[pull] main from tldraw:main

apps/docs/content/releases/next.mdx

@@ -463,7 +463,7 @@ New APIs include `handleSocketResume()` for restoring sessions from snapshots, `
 - Fix quick zoom mode (Z + Shift) cursor anchor and brush misalignment when the tldraw container is offset from the top-left of the window. ([#8520](https://github.com/tldraw/tldraw/pull/8520))
 - Fix `Cmd+Shift+V` doing nothing when the clipboard contains an image; the shortcut now falls back to the regular paste flow when there is no plain-text payload. ([#8490](https://github.com/tldraw/tldraw/pull/8490))
 - Fix keyboard shortcuts that change styles not marking the change as a style update, causing subsequent shapes to use the wrong defaults. ([#8599](https://github.com/tldraw/tldraw/pull/8599)) (contributed by [@danieljamesross](https://github.com/danieljamesross))
-- Fix "back to content" button flickering when both it and the "move focus to canvas" button are visible. ([#8334](https://github.com/tldraw/tldraw/pull/8334)) (contributed by [@kaneel](https://github.com/kaneel))
+- Fix "back to content" button flickering when both it and the "move focus to canvas" button are visible. ([#8334](https://github.com/tldraw/tldraw/pull/8334))
 - Fix intermittent `ResizeObserver loop` browser warnings when hovering over toolbar buttons. ([#8574](https://github.com/tldraw/tldraw/pull/8574))
 - Fix missing sandbox attribute on GitHub Gist embeds. ([#8403](https://github.com/tldraw/tldraw/pull/8403))
 - Restrict sandbox permissions for unknown/arbitrary embeds to mitigate security risks from untrusted content. ([#8404](https://github.com/tldraw/tldraw/pull/8404))

apps/examples/src/examples/configuration/only-editor/MiniBoxShape.tsx

@@ -65,6 +65,6 @@ The shape util itself.
 	[b] The default props for our shape. These will be used when creating a new shape.
 	[c] The component for our shape. This returns JSX and is what will be rendered on the
 		canvas. The HtmlContainer component is a div that provides some useful styles.
-	[d] The indicator for our shape, this also returns JSX. This is what will be rendered
-		on the canvas when the shape is selected.
+	[d] The indicator path for our shape. This returns a Path2D that's stroked on the
+		canvas overlay when the shape is selected.
 */

apps/examples/src/examples/shapes/tools/bounds-snapping-shape/PlayingCardShape/playing-card-util.tsx

@@ -146,8 +146,9 @@ the suit in the top left. The HTMLContainer component is a helpful wrapper that
 exports, it's a div that comes with a css class.
 
 [8]
-The indicator is the blue box that appears around the shape when it's selected. We're just returning
-a rectangle with the same width and height as the shape here.
+getIndicatorPath returns a Path2D for the blue box that appears around the shape when it's selected.
+We're just returning a rectangle with the same width and height as the shape; tldraw strokes it onto
+the canvas overlay.
 
 
 */

apps/examples/src/examples/shapes/tools/custom-config/CardShape/CardShapeUtil.tsx

@@ -143,7 +143,8 @@ and button. We can get the shape's bounds using our own getGeometry method.
 	   think you're trying to select drag the shape.
 
 [7]
-Indicator — used when hovering over a shape or when it's selected; must return only SVG elements here
+getIndicatorPath — returns a Path2D used when hovering over the shape or when it's selected.
+The path is stroked onto the canvas overlay.
 
 [8]
 Resize handler — called when the shape is resized. Sometimes you'll want to do some

apps/examples/src/examples/shapes/tools/custom-shape/CustomShapeExample.tsx

@@ -146,8 +146,8 @@ BaseBoxShapeUtil class instead, we wouldn't have define methods such as `getGeom
 	lot of flexibility here, and you can use any React hooks you want and return any valid JSX.
 
 	[g]
-	The indicator is the blue outline around a selected shape. We're just returning a rectangle with the
-	same width and height as the shape here. You can return any valid JSX here.
+	The indicator is the blue outline around a selected shape. We're returning a Path2D for a rectangle
+	with the same width and height as the shape. The path is stroked onto the canvas overlay.
 
 [4]
 This is where we render the Tldraw component with our custom shape. We're passing in our custom shape

apps/examples/src/examples/shapes/tools/shape-with-geometry/ShapeWithGeometry.tsx

@@ -155,7 +155,8 @@ method is called when the shape needs to be drawn on the canvas. The tl-svg-cont
 class contains some helpful styles for rendering the svg correctly.
 
 [3]
-The indicator method renders the same path as a thin blue line when the shape is selected.
+The getIndicatorPath method returns a Path2D for the same outline; tldraw strokes it
+onto the canvas overlay as a thin blue line when the shape is selected.
 
 [4]
 The getHouseVertices function calculates the vertices for both the house body and the door

apps/examples/src/examples/shapes/tools/shape-with-onClick/ClickableShapeUtil.tsx

@@ -109,5 +109,6 @@ The component renders the click count. We don't add any React event handlers her
 click handling is done entirely through ShapeUtil.onClick above.
 
 [5]
-The indicator is the blue outline shown when the shape is selected.
+getIndicatorPath returns a Path2D that tldraw strokes onto the canvas overlay as the
+blue outline when the shape is selected.
 */

packages/tldraw/src/lib/ui.css

@@ -1418,20 +1418,20 @@ tldraw? probably.
 	display: none;
 }
 .tlui-row.tlui-main-toolbar__group:not(:nth-last-child(-n + 1 of [data-toolbar-visible='true'])) {
-	border-right: 1px solid var(--color-divider);
+	border-right: 1px solid var(--tl-color-divider);
 	margin-right: 2px;
 }
 .tlui-column.tlui-main-toolbar__group:not(
 		:nth-last-child(-n + 1 of [data-toolbar-visible='true'])
 	) {
-	border-bottom: 1px solid var(--color-divider);
+	border-bottom: 1px solid var(--tl-color-divider);
 	margin-bottom: 2px;
 }
 .tlui-grid.tlui-main-toolbar__group {
 	grid-column: 1 / span 4;
 }
 .tlui-grid.tlui-main-toolbar__group:not(:nth-last-child(-n + 1 of [data-toolbar-visible='true'])) {
-	border-bottom: 1px solid var(--color-divider);
+	border-bottom: 1px solid var(--tl-color-divider);
 	margin-bottom: 2px;
 }