@substrate-kit/cli 0.1.1 → 0.2.0

package/registry.json

@@ -32,7 +32,7 @@
       "name": "math",
       "type": "registry:lib",
       "title": "Math",
-      "description": "Geometry helpers — rotate point, bounds checking, ellipse hit test, screen/world coordinate conversion, normalize bounds, distance, and clamping.",
+      "description": "Geometry helpers — rotate point, bounds checking, ellipse hit test, screen/world coordinate conversion, normalize bounds, distance, clamping, plus rotation and handle maths: rotated bounds, snap angle, and resizing a rotated box.",
       "author": "George Drury <info@georgedrury.co.uk>",
       "categories": [
         "substrate",
@@ -120,7 +120,8 @@
         "zustand"
       ],
       "registryDependencies": [
-        "https://substrate.georgedrury.co.uk/r/types"
+        "https://substrate.georgedrury.co.uk/r/types",
+        "https://substrate.georgedrury.co.uk/r/id"
       ],
       "meta": {
         "lineage": [
@@ -239,7 +240,8 @@
         "canvas"
       ],
       "registryDependencies": [
-        "https://substrate.georgedrury.co.uk/r/types"
+        "https://substrate.georgedrury.co.uk/r/types",
+        "https://substrate.georgedrury.co.uk/r/math"
       ],
       "meta": {
         "lineage": [
@@ -326,7 +328,8 @@
       "registryDependencies": [
         "https://substrate.georgedrury.co.uk/r/types",
         "https://substrate.georgedrury.co.uk/r/math",
-        "https://substrate.georgedrury.co.uk/r/document-store"
+        "https://substrate.georgedrury.co.uk/r/document-store",
+        "https://substrate.georgedrury.co.uk/r/bounding-box"
       ],
       "meta": {
         "lineage": [
@@ -489,12 +492,14 @@
         "https://substrate.georgedrury.co.uk/r/tool-store",
         "https://substrate.georgedrury.co.uk/r/use-canvas-renderer",
         "https://substrate.georgedrury.co.uk/r/use-canvas-interaction",
-        "https://substrate.georgedrury.co.uk/r/use-keyboard-shortcuts"
+        "https://substrate.georgedrury.co.uk/r/use-keyboard-shortcuts",
+        "https://substrate.georgedrury.co.uk/r/document-store",
+        "https://substrate.georgedrury.co.uk/r/types"
       ],
       "cssVars": {
         "theme": {
           "color-canvas": "var(--canvas, var(--color-background))",
-          "color-canvas-foreground": "var(--canvas-foreground, var(--color-foreground-muted))"
+          "color-canvas-foreground": "var(--canvas-foreground, var(--color-muted-foreground))"
         },
         "light": {
           "canvas": "oklch(.97 0.0 0)",
@@ -699,7 +704,7 @@
       "cssVars": {
         "theme": {
           "color-canvas": "var(--canvas, var(--color-background))",
-          "color-canvas-foreground": "var(--canvas-foreground, var(--color-foreground-muted))"
+          "color-canvas-foreground": "var(--canvas-foreground, var(--color-muted-foreground))"
         },
         "light": {
           "canvas": "oklch(.97 0.0 0)",
@@ -878,6 +883,9 @@
           "type": "registry:component",
           "target": "components/substrate/history-controls.tsx"
         }
+      ],
+      "registryDependencies": [
+        "https://substrate.georgedrury.co.uk/r/document-store"
       ]
     },
     {
@@ -1316,7 +1324,35 @@
           "target": "components/substrate/collapsible-pane.tsx"
         }
       ],
-      "author": "George Drury <info@georgedrury.co.uk>"
+      "author": "George Drury <info@georgedrury.co.uk>",
+      "cssVars": {
+        "theme": {
+          "animate-collapsible-down": "collapsible-down 150ms ease-out",
+          "animate-collapsible-up": "collapsible-up 150ms ease-out"
+        }
+      },
+      "css": {
+        "@keyframes collapsible-down": {
+          "from": {
+            "height": "0",
+            "opacity": "0"
+          },
+          "to": {
+            "height": "var(--radix-collapsible-content-height)",
+            "opacity": "1"
+          }
+        },
+        "@keyframes collapsible-up": {
+          "from": {
+            "height": "var(--radix-collapsible-content-height)",
+            "opacity": "1"
+          },
+          "to": {
+            "height": "0",
+            "opacity": "0"
+          }
+        }
+      }
     },
     {
       "name": "command-palette",
@@ -1449,7 +1485,7 @@
       "name": "layer-list",
       "type": "registry:ui",
       "title": "Layer List",
-      "description": "Sortable layer panel with visibility and lock toggles, icons, and context menu support. Compound component pattern.",
+      "description": "Layer panel with selection, visibility and lock toggles, icons and inline rename. Compound component pattern; pair with use-drag-reorder to sort and context-menu for right-click actions.",
       "categories": [
         "substrate",
         "ui",
@@ -1493,7 +1529,11 @@
           "color-node-port-geometry": "var(--node-port-geometry, oklch(0.7 0.15 200))",
           "color-node-port-text": "var(--node-port-text, oklch(0.7 0.15 150))",
           "color-node-port-boolean": "var(--node-port-boolean, oklch(0.7 0.15 30))",
-          "color-node-port-any": "var(--node-port-any, oklch(0.6 0 0))"
+          "color-node-port-any": "var(--node-port-any, oklch(0.6 0 0))",
+          "color-node-bg": "var(--node-bg, var(--card))",
+          "color-node-border": "var(--node-border, var(--border))",
+          "color-node-header": "var(--node-header, var(--muted))",
+          "color-node-selected": "var(--node-selected, var(--ring))"
         }
       },
       "meta": {
@@ -1524,8 +1564,8 @@
         "form"
       ],
       "registryDependencies": [
-        "slider",
-        "number-input"
+        "https://substrate.georgedrury.co.uk/r/slider",
+        "https://substrate.georgedrury.co.uk/r/number-input"
       ],
       "meta": {
         "example": "<NumberSlider label=\"Opacity\" min={0} max={100} value={opacity} onChange={setOpacity} />",
@@ -1600,7 +1640,22 @@
           "target": "components/substrate/progress-bar.tsx"
         }
       ],
-      "author": "George Drury <info@georgedrury.co.uk>"
+      "author": "George Drury <info@georgedrury.co.uk>",
+      "cssVars": {
+        "theme": {
+          "animate-progress-indeterminate": "progress-indeterminate 1.5s ease-in-out infinite"
+        }
+      },
+      "css": {
+        "@keyframes progress-indeterminate": {
+          "0%": {
+            "transform": "translateX(-100%)"
+          },
+          "100%": {
+            "transform": "translateX(400%)"
+          }
+        }
+      }
     },
     {
       "name": "resizer",
@@ -1852,9 +1907,6 @@
       "dependencies": [
         "radix-ui"
       ],
-      "registryDependencies": [
-        "toggle"
-      ],
       "meta": {
         "example": "<ToggleGroup type=\"single\" value={align} onValueChange={setAlign}><ToggleGroupItem value=\"left\">Left</ToggleGroupItem><ToggleGroupItem value=\"center\">Center</ToggleGroupItem><ToggleGroupItem value=\"right\">Right</ToggleGroupItem></ToggleGroup>",
         "lineage": [
@@ -1934,6 +1986,269 @@
         }
       ],
       "author": "George Drury <info@georgedrury.co.uk>"
+    },
+    {
+      "name": "spring",
+      "type": "registry:lib",
+      "title": "Spring",
+      "description": "Spring physics utilities: convert time-based springs (duration, bounce) to stiffness, damping and mass, and sample their progress over time.",
+      "author": "George Drury <info@georgedrury.co.uk>",
+      "categories": [
+        "substrate",
+        "lib",
+        "animation"
+      ],
+      "meta": {
+        "lineage": [
+          {
+            "name": "Substrate"
+          }
+        ]
+      },
+      "files": [
+        {
+          "path": "registry/substrate/lib/spring.ts",
+          "type": "registry:lib",
+          "target": "lib/substrate/spring.ts"
+        }
+      ]
+    },
+    {
+      "name": "spring-editor",
+      "type": "registry:ui",
+      "title": "Spring Editor",
+      "description": "Spring curve preview with duration and bounce, or stiffness, damping and mass sliders. Used for spring transitions in animation tools.",
+      "author": "George Drury <info@georgedrury.co.uk>",
+      "categories": [
+        "substrate",
+        "ui",
+        "animation"
+      ],
+      "cssVars": {
+        "theme": {
+          "color-spring-curve": "var(--spring-curve, var(--color-primary))"
+        },
+        "light": {},
+        "dark": {}
+      },
+      "meta": {
+        "example": "<SpringEditor value={{ type: \"spring\", visualDuration: 0.3, bounce: 0.2 }} onChange={setSpring} />",
+        "lineage": [
+          {
+            "name": "DialKit",
+            "href": "https://github.com/joshpuckett/dialkit"
+          },
+          {
+            "name": "Substrate"
+          }
+        ]
+      },
+      "files": [
+        {
+          "path": "registry/substrate/components/spring-editor.tsx",
+          "type": "registry:ui",
+          "target": "components/substrate/spring-editor.tsx"
+        }
+      ],
+      "registryDependencies": [
+        "https://substrate.georgedrury.co.uk/r/action",
+        "https://substrate.georgedrury.co.uk/r/number-slider",
+        "https://substrate.georgedrury.co.uk/r/toggle-group",
+        "https://substrate.georgedrury.co.uk/r/spring"
+      ]
+    },
+    {
+      "name": "xy-pad",
+      "type": "registry:ui",
+      "title": "XY Pad",
+      "description": "Two-dimensional pad for setting two values at once by dragging or with the arrow keys. Used for offsets, positions and paired parameters.",
+      "author": "George Drury <info@georgedrury.co.uk>",
+      "categories": [
+        "substrate",
+        "ui",
+        "form"
+      ],
+      "cssVars": {
+        "theme": {
+          "color-xy-pad-handle": "var(--xy-pad-handle, var(--color-primary))"
+        },
+        "light": {},
+        "dark": {}
+      },
+      "meta": {
+        "example": "<XYPad value={offset} onChange={setOffset} x={{ min: -50, max: 50, step: 1 }} y={{ min: -50, max: 50, step: 1 }} />",
+        "lineage": [
+          {
+            "name": "DialKit",
+            "href": "https://github.com/joshpuckett/dialkit"
+          },
+          {
+            "name": "Substrate"
+          }
+        ]
+      },
+      "files": [
+        {
+          "path": "registry/substrate/components/xy-pad.tsx",
+          "type": "registry:ui",
+          "target": "components/substrate/xy-pad.tsx"
+        }
+      ]
+    },
+    {
+      "name": "image-picker",
+      "type": "registry:ui",
+      "title": "Image Picker",
+      "description": "Thumbnail grid for choosing an image from a list, with upload and drag-and-drop. Uploads become data URLs.",
+      "author": "George Drury <info@georgedrury.co.uk>",
+      "categories": [
+        "substrate",
+        "ui",
+        "form"
+      ],
+      "cssVars": {
+        "theme": {
+          "color-image-picker-selection": "var(--image-picker-selection, var(--color-primary))"
+        },
+        "light": {},
+        "dark": {}
+      },
+      "meta": {
+        "example": "<ImagePicker value={image} onChange={setImage} options={[\"/a.jpg\", \"/b.jpg\"]} />",
+        "lineage": [
+          {
+            "name": "DialKit",
+            "href": "https://github.com/joshpuckett/dialkit"
+          },
+          {
+            "name": "Substrate"
+          }
+        ]
+      },
+      "files": [
+        {
+          "path": "registry/substrate/components/image-picker.tsx",
+          "type": "registry:ui",
+          "target": "components/substrate/image-picker.tsx"
+        }
+      ],
+      "dependencies": [
+        "@remixicon/react"
+      ]
+    },
+    {
+      "name": "controls",
+      "type": "registry:ui",
+      "title": "Controls",
+      "description": "Config-driven control panels — describe parameters as an object with useControls and render them with Controls, built on DialKit's store.",
+      "author": "George Drury <info@georgedrury.co.uk>",
+      "categories": [
+        "substrate",
+        "ui",
+        "form"
+      ],
+      "dependencies": [
+        "dialkit",
+        "@remixicon/react"
+      ],
+      "meta": {
+        "example": "const values = useControls(\"Card\", { radius: [24, 0, 64], visible: true })\n<Panel><Controls /></Panel>",
+        "lineage": [
+          {
+            "name": "DialKit",
+            "href": "https://github.com/joshpuckett/dialkit"
+          },
+          {
+            "name": "Substrate"
+          }
+        ]
+      },
+      "files": [
+        {
+          "path": "registry/substrate/components/controls.tsx",
+          "type": "registry:ui",
+          "target": "components/substrate/controls.tsx"
+        },
+        {
+          "path": "registry/substrate/hooks/use-controls.ts",
+          "type": "registry:hook",
+          "target": "hooks/substrate/use-controls.ts"
+        },
+        {
+          "path": "registry/substrate/lib/controls-shortcuts.ts",
+          "type": "registry:lib",
+          "target": "lib/substrate/controls-shortcuts.ts"
+        }
+      ],
+      "registryDependencies": [
+        "https://substrate.georgedrury.co.uk/r/pane",
+        "https://substrate.georgedrury.co.uk/r/collapsible-pane",
+        "https://substrate.georgedrury.co.uk/r/action",
+        "https://substrate.georgedrury.co.uk/r/number-slider",
+        "https://substrate.georgedrury.co.uk/r/number-input",
+        "https://substrate.georgedrury.co.uk/r/toggle",
+        "https://substrate.georgedrury.co.uk/r/select",
+        "https://substrate.georgedrury.co.uk/r/colour-picker",
+        "https://substrate.georgedrury.co.uk/r/text-area",
+        "https://substrate.georgedrury.co.uk/r/easing-curve-editor",
+        "https://substrate.georgedrury.co.uk/r/toggle-group",
+        "https://substrate.georgedrury.co.uk/r/spring-editor",
+        "https://substrate.georgedrury.co.uk/r/xy-pad",
+        "https://substrate.georgedrury.co.uk/r/image-picker",
+        "https://substrate.georgedrury.co.uk/r/spring",
+        "https://substrate.georgedrury.co.uk/r/popover"
+      ]
+    },
+    {
+      "name": "controls-timeline",
+      "type": "registry:ui",
+      "title": "Controls Timeline",
+      "description": "Animation clips defined in code with useControlsTimeline, tuned in a timeline editor: scrub, move and resize clips, and edit their values. Built on DialKit's headless timeline.",
+      "author": "George Drury <info@georgedrury.co.uk>",
+      "categories": [
+        "substrate",
+        "ui",
+        "animation"
+      ],
+      "dependencies": [
+        "dialkit",
+        "@remixicon/react"
+      ],
+      "cssVars": {
+        "theme": {
+          "color-timeline-clip": "var(--timeline-clip, var(--color-primary))"
+        },
+        "light": {},
+        "dark": {}
+      },
+      "meta": {
+        "example": "const timeline = useControlsTimeline(\"Card\", { enter: { at: 0, duration: 0.6, from: { y: 24 }, to: { y: 0 } } })\n<ControlsTimeline />",
+        "lineage": [
+          {
+            "name": "DialKit",
+            "href": "https://github.com/joshpuckett/dialkit"
+          },
+          {
+            "name": "Substrate"
+          }
+        ]
+      },
+      "files": [
+        {
+          "path": "registry/substrate/components/controls-timeline.tsx",
+          "type": "registry:ui",
+          "target": "components/substrate/controls-timeline.tsx"
+        },
+        {
+          "path": "registry/substrate/hooks/use-controls-timeline.ts",
+          "type": "registry:hook",
+          "target": "hooks/substrate/use-controls-timeline.ts"
+        }
+      ],
+      "registryDependencies": [
+        "https://substrate.georgedrury.co.uk/r/controls",
+        "https://substrate.georgedrury.co.uk/r/popover"
+      ]
     }
   ]
 }

package/skills/3d-scene/SKILL.md

@@ -173,6 +173,7 @@ Some examples of what this surface enables:
 
 ## Related reference skills
 
+- **scaffold-playground** — the craft rules and the checklist to run before you say it's done
 - **substrate-scaffold** — Toolbar, Panel, StatusBar, ZoomControls for the app shell
-- **substrate-controls** — NumberInput, Slider, ColourPicker, ActionControls for property panes
+- **substrate-controls** — NumberInput, Slider, ColourPicker, ActionControls for property panes; `useControls` for tuning material, light and camera values from one config object
 - **substrate-interaction** — useUndoable, useClipboard, createKeyboardShortcuts, TreeList for scene hierarchy

package/skills/animation/SKILL.md

@@ -195,6 +195,7 @@ Some examples of what this surface enables:
 
 ## Related reference skills
 
+- **scaffold-playground** — the craft rules and the checklist to run before you say it's done
 - **substrate-scaffold** — Toolbar, Panel, StatusBar for the app shell
-- **substrate-controls** — NumberInput, Slider, EasingCurveEditor, ActionControls for keyframe properties
+- **substrate-controls** — NumberInput, Slider, EasingCurveEditor, ActionControls for keyframe properties. For tuning UI motion by eye (entrances, springs, choreography), use `useControlsTimeline` with `<ControlsTimeline />` instead of building a timeline: define clips in code, bind `clip.current` to style, then copy the tuned values back. The `timeline` component is for editing user-authored keyframes.
 - **substrate-interaction** — useUndoable, createKeyboardShortcuts, LayerList for animation layers

package/skills/canvas-2d/SKILL.md

@@ -19,7 +19,7 @@ This is Substrate's default surface. The `DesignCanvas` component provides a ful
 ### Install
 
 ```bash
-npx shadcn@latest add https://substrate.georgedrury.co.uk/r/design-canvas
+npx substrate-kit add design-canvas
 ```
 
 This pulls in the canvas renderer, hit-test system, interaction hooks, transform utilities, and all required stores.
@@ -27,7 +27,7 @@ This pulls in the canvas renderer, hit-test system, interaction hooks, transform
 ### Mount
 
 ```tsx
-import { DesignCanvas } from "@/registry/substrate/canvas/design-canvas"
+import { DesignCanvas } from "@/components/substrate/design-canvas"
 
 export default function PlaygroundPage() {
 	return (
@@ -85,27 +85,88 @@ The default tool set for a 2D canvas:
 
 ### Panels
 
-See the [composing panels](./composing-panels.md) skill for full details. In summary:
+See the `composing-panels` skill for full details. In summary:
 
 - **Left panel** — layers list (render order, visibility toggles, selection)
 - **Right panel** — properties inspector (transform, fill, stroke, opacity, type-specific properties)
 
 ### Interactions
 
-See the [wire interactions](./wire-interactions.md) skill for the full state machine. Key patterns:
+See the `wire-interactions` skill for the full state machine. Key patterns:
 
 - Click to select, shift-click to multi-select
 - Drag on empty space with select tool → marquee selection
 - Drag on selected element → move
 - Drag on resize handle → resize
+- Drag on the rotate handle → rotate (Shift snaps to 15°)
 - Drag with shape tool → create new element
 - Middle-click or hand tool → pan
 
+## State, undo and persistence
+
+`useDocumentStore` holds the board: `elements`, `elementOrder` (back to front), `camera`, `showGrid`, the selection and the history.
+
+- **Undo and redo cover elements and their order only.** Pan, zoom and the grid are view state, so undoing an edit never moves the viewport.
+- **Call `pushSnapshot()` before every mutation that should be undoable,** including property edits. For a scrub or drag, snapshot once at the start (`onStart`), not on every change.
+- **Composite actions** record their own undo step: `duplicateElements(ids?)` clones the selection (or the given ids), and `setElementOrder(ids)` replaces the stacking order. Call `pushSnapshot()` yourself before `setElementOrder`.
+- **Zoom** with `useCanvasTransform`: `setZoom(zoom)` and `zoomIn`/`zoomOut` zoom around the middle of the canvas, and `zoomToFit()` frames every visible element. Wire `ZoomControls` to `setZoom` and `zoomToFit`; setting `camera.zoom` directly zooms around the world origin and drifts.
+
+To remember the board across reloads, restore before the first render and save on change:
+
+```ts
+import { useDocumentStore, type DocumentSnapshot } from "@/stores/substrate/document-store"
+
+const KEY = "my-board"
+
+// Call before the first render so the saved board is there on first paint
+export function restoreBoard(): boolean {
+  const raw = localStorage.getItem(KEY)
+  if (!raw) return false
+  try {
+    useDocumentStore.getState().loadState(JSON.parse(raw) as DocumentSnapshot)
+    return true
+  } catch {
+    return false
+  }
+}
+
+// Returns an unsubscribe function
+export function persistBoard(): () => void {
+  let timer: number | undefined
+  return useDocumentStore.subscribe((state, prev) => {
+    const changed =
+      state.elements !== prev.elements ||
+      state.elementOrder !== prev.elementOrder ||
+      state.camera !== prev.camera ||
+      state.showGrid !== prev.showGrid
+    if (!changed) return
+    window.clearTimeout(timer)
+    timer = window.setTimeout(() => {
+      const snapshot: DocumentSnapshot = {
+        elements: state.elements,
+        elementOrder: state.elementOrder,
+        camera: state.camera,
+        showGrid: state.showGrid,
+      }
+      localStorage.setItem(KEY, JSON.stringify(snapshot))
+    }, 300)
+  })
+}
+```
+
+Selection and history are not saved, which is usually what you want. Seed a starter board with `addElement` only when `restoreBoard()` returns `false`, and give the starter shapes theme-safe colours.
+
+## Current limits
+
+- **Rotation** works on a single selection: drag the round handle above it (hold Shift to snap to 15°), and the box, handles and cursors turn with the shape. Resizing a rotated shape keeps the opposite corner fixed. Several selected elements can be moved and deleted but not rotated or resized together; there is no group transform.
+- **Text:** a click with the text tool makes a 160×32 note. Text is edited through a properties panel (`textStyle.content`); there is no on-canvas editing.
+- **Hidden and locked layers** (`visible: false`, `locked: true`) are skipped by hit-testing, so they can't be selected on the canvas.
+
 ## Extending the canvas
 
 ### Custom elements
 
-To add a new element type (e.g. star, arrow, image), follow the [create custom tool](./create-custom-tool.md) skill. The pipeline is: type definition → factory → renderer → hit-test → interaction → shortcut → cursor → toolbar.
+To add a new element type (e.g. star, arrow, image), follow the `create-custom-tool` skill. The pipeline is: type definition → factory → renderer → hit-test → interaction → shortcut → cursor → toolbar.
 
 ### Custom rendering
 
@@ -117,7 +178,7 @@ For UI elements that sit on top of the canvas (selection indicators, context men
 
 ## Theming
 
-The canvas background is driven by the `--canvas` CSS variable, read at render time via `getComputedStyle`. Grid dots use `--canvas-foreground`. See the [theming](./theming.md) skill for the full token table.
+The canvas background is driven by the `--canvas` CSS variable, read at render time via `getComputedStyle`. Grid dots use `--canvas-foreground`. See the `theming` skill for the full token table.
 
 ## What to build
 
@@ -132,6 +193,7 @@ Some examples of what this surface enables:
 
 ## Related reference skills
 
+- **scaffold-playground** — the craft rules and the checklist to run before you say it's done
 - **substrate-canvas** — full catalogue of spatial hooks (useViewport, useSelection, useDragReorder) and utilities (snapToGrid, boundingBox, math)
 - **substrate-scaffold** — Toolbar, Panel, StatusBar, ZoomControls for the app shell
 - **substrate-controls** — NumberInput, Slider, ColourPicker, ActionControls for property panes

package/skills/composing-panels/SKILL.md

@@ -27,16 +27,13 @@ Panel (side panel shell — left or right)
 ## Install
 
 ```bash
-npx shadcn@latest add https://substrate.georgedrury.co.uk/r/panel
-npx shadcn@latest add https://substrate.georgedrury.co.uk/r/pane
-npx shadcn@latest add https://substrate.georgedrury.co.uk/r/action
-npx shadcn@latest add https://substrate.georgedrury.co.uk/r/slider
+npx substrate-kit add panel pane action slider
 ```
 
 ## Panel positioning
 
 ```tsx
-import { Panel } from "@/registry/substrate/components/panel"
+import { Panel } from "@/components/substrate/panel"
 
 {
 	/* Left panel — layers, tool options */
@@ -58,19 +55,19 @@ A typical properties panel reads from `useDocumentStore` and writes back via `up
 ```tsx
 "use client"
 
-import { useDocumentStore } from "@/registry/substrate/stores/document-store"
+import { useDocumentStore } from "@/stores/substrate/document-store"
 import {
 	Pane,
 	PaneHeader,
 	PaneLabel,
 	PaneAction,
-} from "@/registry/substrate/components/pane"
+} from "@/components/substrate/pane"
 import {
 	Action,
 	ActionLabel,
 	ActionControls,
-} from "@/registry/substrate/components/action"
-import { Slider } from "@/registry/substrate/components/slider"
+} from "@/components/substrate/action"
+import { Slider } from "@/components/substrate/slider"
 
 export function PropertiesPanel() {
 	const selectedIds = useDocumentStore((s) => s.selectedIds)
@@ -170,12 +167,12 @@ A layers panel lists elements in render order (bottom to top) and lets users sel
 ```tsx
 "use client"
 
-import { useDocumentStore } from "@/registry/substrate/stores/document-store"
+import { useDocumentStore } from "@/stores/substrate/document-store"
 import {
 	Pane,
 	PaneHeader,
 	PaneLabel,
-} from "@/registry/substrate/components/pane"
+} from "@/components/substrate/pane"
 
 export function LayersPanel() {
 	const elements = useDocumentStore((s) => s.elements)
@@ -224,7 +221,7 @@ export function LayersPanel() {
 Use `usePanelStore` to control panel visibility:
 
 ```tsx
-import { usePanelStore } from "@/registry/substrate/stores/panel-store"
+import { usePanelStore } from "@/stores/substrate/panel-store"
 
 const leftPanel = usePanelStore((s) => s.leftPanel)
 const rightPanel = usePanelStore((s) => s.rightPanel)

package/skills/data-visualisation/SKILL.md

@@ -229,6 +229,7 @@ Some examples of what this surface enables:
 
 ## Related reference skills
 
+- **scaffold-playground** — the craft rules and the checklist to run before you say it's done
 - **substrate-scaffold** — Toolbar, Panel, StatusBar, DocumentTabs for the app shell
-- **substrate-controls** — Select, NumberInput, Slider, ColourPicker for chart configuration
+- **substrate-controls** — `useControls` for chart settings from one config object (sliders, toggles, colours, selects); Select, NumberInput, Slider, ColourPicker when composing rows by hand
 - **substrate-feedback** — Toast, EmptyState, CommandPalette for data loading feedback