create-substrate 0.1.6 → 0.2.0

package/dist/surfaces/3d-scene.js

@@ -3,10 +3,8 @@ export const scene3d = {
         "toolbar",
         "panel",
         "pane",
-        "action",
-        "slider",
         "number-input",
-        "colour-picker",
+        "controls",
         "status-bar",
     ],
     extraDeps: {
@@ -35,10 +33,9 @@ import {
   PaneAction,
   PaneContent,
 } from "@/components/substrate/pane"
-import { Action, ActionLabel, ActionControls } from "@/components/substrate/action"
 import { NumberInput } from "@/components/substrate/number-input"
-import { Slider } from "@/components/substrate/slider"
-import { ColourPicker } from "@/components/substrate/colour-picker"
+import { Controls } from "@/components/substrate/controls"
+import { useControls, type ControlsConfig } from "@/hooks/substrate/use-controls"
 import {
   StatusBar,
   StatusBarSection,
@@ -107,7 +104,7 @@ const INITIAL_OBJECTS: SceneObject[] = [
 ]
 
 const toolbarButton =
-  "inline-flex h-7 min-w-7 items-center justify-center rounded-md px-2 outline-none transition-all hover:bg-muted hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50"
+  "inline-flex h-7 min-w-7 items-center justify-center rounded-md px-2 outline-none transition-[color,background-color,box-shadow,transform] active:scale-[0.96] hover:bg-muted hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50"
 
 function isMode(value: string): value is Mode {
   return MODES.some((mode) => mode === value)
@@ -184,11 +181,43 @@ function SceneMesh({
   )
 }
 
+type Material = Pick<SceneObject, "colour" | "roughness" | "metalness">
+
+// Material values belong to the selected object, not to the panel. Mounting
+// this with key={object.id} gives each selection its own panel: the object's
+// values seed the config, and edits are written back through onChange.
+function MaterialControls({
+  object,
+  onChange,
+}: {
+  object: SceneObject
+  onChange: (material: Material) => void
+}) {
+  const [config] = useState(
+    () =>
+      ({
+        colour: object.colour,
+        roughness: [object.roughness, 0, 1, 0.01],
+        metalness: [object.metalness, 0, 1, 0.01],
+      }) satisfies ControlsConfig,
+  )
+  const material = useControls("Material", config)
+
+  const onChangeRef = useRef(onChange)
+  onChangeRef.current = onChange
+  useEffect(() => {
+    onChangeRef.current(material)
+  }, [material])
+
+  return <Controls panel="Material" />
+}
+
 export default function App() {
   const [mode, setMode] = useState<Mode>("select")
   const [objects, setObjects] = useState(INITIAL_OBJECTS)
   const [selectedId, setSelectedId] = useState<string | null>("box-1")
-  const [lightIntensity, setLightIntensity] = useState(1.5)
+  const lighting = useControls("Lighting", { intensity: [1.5, 0, 4, 0.05] })
+  const lightIntensity = lighting.intensity
   const nextIndex = useRef(INITIAL_OBJECTS.length + 1)
 
   const selected = objects.find((object) => object.id === selectedId) ?? null
@@ -362,25 +391,7 @@ export default function App() {
             </PaneContent>
           </Pane>
 
-          <Pane>
-            <PaneHeader>
-              <PaneLabel>Lighting</PaneLabel>
-            </PaneHeader>
-            <PaneContent>
-              <Action>
-                <ActionLabel>Intensity</ActionLabel>
-                <ActionControls>
-                  <Slider
-                    min={0}
-                    max={4}
-                    step={0.05}
-                    value={[lightIntensity]}
-                    onValueChange={([value]) => setLightIntensity(value)}
-                  />
-                </ActionControls>
-              </Action>
-            </PaneContent>
-          </Pane>
+          <Controls panel="Lighting" />
 
           {selected ? (
             <>
@@ -451,53 +462,11 @@ export default function App() {
                 </PaneContent>
               </Pane>
 
-              <Pane>
-                <PaneHeader>
-                  <PaneLabel>Material</PaneLabel>
-                </PaneHeader>
-                <PaneContent className="space-y-2">
-                  <Action>
-                    <ActionLabel>Colour</ActionLabel>
-                    <ActionControls>
-                      <ColourPicker
-                        value={selected.colour}
-                        onChange={(colour) => updateObject(selected.id, { colour })}
-                      />
-                      <span className="font-mono text-xs text-muted-foreground">
-                        {selected.colour}
-                      </span>
-                    </ActionControls>
-                  </Action>
-                  <Action>
-                    <ActionLabel>Roughness</ActionLabel>
-                    <ActionControls>
-                      <Slider
-                        min={0}
-                        max={1}
-                        step={0.01}
-                        value={[selected.roughness]}
-                        onValueChange={([value]) =>
-                          updateObject(selected.id, { roughness: value })
-                        }
-                      />
-                    </ActionControls>
-                  </Action>
-                  <Action>
-                    <ActionLabel>Metalness</ActionLabel>
-                    <ActionControls>
-                      <Slider
-                        min={0}
-                        max={1}
-                        step={0.01}
-                        value={[selected.metalness]}
-                        onValueChange={([value]) =>
-                          updateObject(selected.id, { metalness: value })
-                        }
-                      />
-                    </ActionControls>
-                  </Action>
-                </PaneContent>
-              </Pane>
+              <MaterialControls
+                key={selected.id}
+                object={selected}
+                onChange={(patch) => updateObject(selected.id, patch)}
+              />
             </>
           ) : (
             <Pane>

package/dist/surfaces/3d-scene.js.map

@@ -1 +1 @@
-{"version":3,"file":"3d-scene.js","sourceRoot":"","sources":["../../src/surfaces/3d-scene.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,OAAO,GAAkB;IACpC,UAAU,EAAE;QACV,SAAS;QACT,OAAO;QACP,MAAM;QACN,QAAQ;QACR,QAAQ;QACR,cAAc;QACd,eAAe;QACf,YAAY;KACb;IACD,SAAS,EAAE;QACT,KAAK,EAAE,UAAU;QACjB,oBAAoB,EAAE,QAAQ;QAC9B,mBAAmB,EAAE,SAAS;KAC/B;IACD,YAAY,EAAE;QACZ,cAAc,EAAE,UAAU;KAC3B;IACD,GAAG,EAAE,GAAG,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6fZ;CACA,CAAA"}
+{"version":3,"file":"3d-scene.js","sourceRoot":"","sources":["../../src/surfaces/3d-scene.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,OAAO,GAAkB;IACpC,UAAU,EAAE;QACV,SAAS;QACT,OAAO;QACP,MAAM;QACN,cAAc;QACd,UAAU;QACV,YAAY;KACb;IACD,SAAS,EAAE;QACT,KAAK,EAAE,UAAU;QACjB,oBAAoB,EAAE,QAAQ;QAC9B,mBAAmB,EAAE,SAAS;KAC/B;IACD,YAAY,EAAE;QACZ,cAAc,EAAE,UAAU;KAC3B;IACD,GAAG,EAAE,GAAG,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgeZ;CACA,CAAA"}

package/dist/surfaces/canvas-2d.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"canvas-2d.d.ts","sourceRoot":"","sources":["../../src/surfaces/canvas-2d.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE/C,eAAO,MAAM,QAAQ,EAAE,aAmatB,CAAA"}
+{"version":3,"file":"canvas-2d.d.ts","sourceRoot":"","sources":["../../src/surfaces/canvas-2d.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE/C,eAAO,MAAM,QAAQ,EAAE,aAgatB,CAAA"}

package/dist/surfaces/canvas-2d.js

@@ -45,6 +45,7 @@ import {
 } from "@/components/substrate/status-bar"
 import { ZoomControls } from "@/components/substrate/zoom-controls"
 import { useDocumentStore } from "@/stores/substrate/document-store"
+import { useCanvasTransform } from "@/hooks/substrate/use-canvas-transform"
 import { useToolStore } from "@/stores/substrate/tool-store"
 import { createRectangle, createEllipse } from "@/lib/substrate/element-factory"
 import type { DesignElement, ToolType } from "@/lib/substrate/types"
@@ -82,11 +83,8 @@ const SHAPE_TOOLS: ToolDefinition[] = [
 
 const TOOLS = [...POINTER_TOOLS, ...SHAPE_TOOLS]
 
-// The colour picker edits hex values. Shapes drawn with the tools start with
-// an oklch fill, so the picker opens on this grey until a colour is chosen.
-const PICKER_FALLBACK = "#d4d4d4"
 const ACTION_BUTTON =
-  "inline-flex h-7 min-w-7 items-center justify-center rounded-md px-2 outline-none transition-all hover:bg-muted hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-active:bg-accent data-active:text-accent-foreground"
+  "inline-flex h-7 min-w-7 items-center justify-center rounded-md px-2 outline-none transition-[color,background-color,box-shadow,transform] active:scale-[0.96] hover:bg-muted hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-active:bg-accent data-active:text-accent-foreground"
 
 // Seed the document with a couple of shapes so the canvas is not empty.
 // Everything on the canvas lives in the document store; replace this with
@@ -279,7 +277,6 @@ function PropertiesPanel() {
 
   const id = element.id
   const fill = element.fill
-  const fillHex = fill && fill.color.startsWith("#") ? fill.color : PICKER_FALLBACK
 
   return (
     <Panel position="right" className="shrink-0">
@@ -342,8 +339,8 @@ function PropertiesPanel() {
         <PaneContent className="flex items-center gap-2">
           {/* One undo step per drag: snapshot when the picker is pressed */}
           <ColourPicker
-            value={fillHex}
-            onPointerDown={pushSnapshot}
+            value={fill ? fill.color : "transparent"}
+            onStart={pushSnapshot}
             onChange={(color) =>
               updateElement(id, {
                 fill: { type: "solid", color, opacity: fill?.opacity ?? 1 },
@@ -367,7 +364,7 @@ function PropertiesPanel() {
 function EditorStatusBar() {
   const activeTool = useToolStore((s) => s.activeTool)
   const zoom = useDocumentStore((s) => s.camera.zoom)
-  const setCamera = useDocumentStore((s) => s.setCamera)
+  const { setZoom, zoomToFit } = useCanvasTransform()
   const selectedCount = useDocumentStore((s) => s.selectedIds.size)
   const elementCount = useDocumentStore((s) => s.elementOrder.length)
 
@@ -390,8 +387,8 @@ function EditorStatusBar() {
       <StatusBarSection align="right">
         <ZoomControls
           zoom={zoom}
-          onZoomChange={(next) => setCamera({ zoom: next })}
-          onZoomToFit={() => setCamera({ x: 0, y: 0, zoom: 1 })}
+          onZoomChange={setZoom}
+          onZoomToFit={zoomToFit}
           min={0.1}
           max={10}
           step={0.1}

package/dist/surfaces/canvas-2d.js.map

@@ -1 +1 @@
-{"version":3,"file":"canvas-2d.js","sourceRoot":"","sources":["../../src/surfaces/canvas-2d.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,QAAQ,GAAkB;IACrC,UAAU,EAAE;QACV,OAAO;QACP,gBAAgB;QAChB,YAAY;QACZ,iBAAiB;QACjB,eAAe;QACf,SAAS;QACT,OAAO;QACP,MAAM;QACN,YAAY;QACZ,cAAc;QACd,eAAe;QACf,kBAAkB;QAClB,YAAY;QACZ,eAAe;KAChB;IACD,GAAG,EAAE,GAAG,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiZZ;CACA,CAAA"}
+{"version":3,"file":"canvas-2d.js","sourceRoot":"","sources":["../../src/surfaces/canvas-2d.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,QAAQ,GAAkB;IACrC,UAAU,EAAE;QACV,OAAO;QACP,gBAAgB;QAChB,YAAY;QACZ,iBAAiB;QACjB,eAAe;QACf,SAAS;QACT,OAAO;QACP,MAAM;QACN,YAAY;QACZ,cAAc;QACd,eAAe;QACf,kBAAkB;QAClB,YAAY;QACZ,eAAe;KAChB;IACD,GAAG,EAAE,GAAG,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8YZ;CACA,CAAA"}

package/dist/surfaces/data-vis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-vis.d.ts","sourceRoot":"","sources":["../../src/surfaces/data-vis.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE/C,eAAO,MAAM,OAAO,EAAE,aAiVrB,CAAA"}
+{"version":3,"file":"data-vis.d.ts","sourceRoot":"","sources":["../../src/surfaces/data-vis.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE/C,eAAO,MAAM,OAAO,EAAE,aAuOrB,CAAA"}

package/dist/surfaces/data-vis.js

@@ -2,12 +2,7 @@ export const dataVis = {
     components: [
         "toolbar",
         "panel",
-        "pane",
-        "action",
-        "select",
-        "number-slider",
-        "colour-picker",
-        "toggle-group",
+        "controls",
         "status-bar",
     ],
     extraDeps: {
@@ -33,22 +28,8 @@ import {
   ToolbarToggleGroup,
 } from "@/components/substrate/toolbar"
 import { Panel } from "@/components/substrate/panel"
-import { Pane, PaneHeader, PaneLabel } from "@/components/substrate/pane"
-import {
-  Action,
-  ActionControls,
-  ActionLabel,
-} from "@/components/substrate/action"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/substrate/select"
-import { NumberSlider } from "@/components/substrate/number-slider"
-import { ColourPicker } from "@/components/substrate/colour-picker"
-import { ToggleGroup, ToggleGroupItem } from "@/components/substrate/toggle-group"
+import { Controls } from "@/components/substrate/controls"
+import { useControls } from "@/hooks/substrate/use-controls"
 import {
   StatusBar,
   StatusBarItem,
@@ -76,17 +57,17 @@ const SAMPLE_DATA = [
   { month: "Dec", revenue: 9100, users: 7400, orders: 830 },
 ]
 
-const METRICS = [
-  { value: "revenue", label: "Revenue" },
-  { value: "users", label: "Users" },
-  { value: "orders", label: "Orders" },
-] as const
-
 const CHART_TYPES = ["line", "area", "bar"] as const
 
-type Metric = (typeof METRICS)[number]["value"]
+type Metric = "revenue" | "users" | "orders"
 type ChartType = (typeof CHART_TYPES)[number]
 
+const METRICS: { value: Metric; label: string }[] = [
+  { value: "revenue", label: "Revenue" },
+  { value: "users", label: "Users" },
+  { value: "orders", label: "Orders" },
+]
+
 function isMetric(value: string): value is Metric {
   return METRICS.some((metric) => metric.value === value)
 }
@@ -106,12 +87,22 @@ const TOOLTIP_STYLE = {
 
 export default function App() {
   const [chartType, setChartType] = useState<ChartType>("line")
-  const [metric, setMetric] = useState<Metric>("revenue")
-  const [months, setMonths] = useState(12)
-  const [colour, setColour] = useState("#6366f1")
-  const [strokeWidth, setStrokeWidth] = useState(2)
-  const [fillOpacity, setFillOpacity] = useState(30)
-  const [grid, setGrid] = useState("on")
+
+  // Each useControls call is one panel; <Controls panel="..." /> renders it.
+  // Edit these objects to add, remove or retune a control.
+  const dataControls = useControls("Data", {
+    metric: { type: "select", options: METRICS, default: "revenue" },
+    months: [12, 3, SAMPLE_DATA.length, 1],
+  })
+  const style = useControls("Style", {
+    colour: "#6366f1",
+    stroke: [2, 1, 6, 0.5],
+    fill: [0.3, 0, 1, 0.05],
+    grid: true,
+  })
+
+  const metric = isMetric(dataControls.metric) ? dataControls.metric : "revenue"
+  const { months } = dataControls
 
   const data = SAMPLE_DATA.slice(0, months)
   const values = data.map((row) => row[metric])
@@ -120,7 +111,7 @@ export default function App() {
 
   const axes = (
     <>
-      {grid === "on" && (
+      {style.grid && (
         <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" vertical={false} />
       )}
       <XAxis dataKey="month" tick={AXIS_TICK} stroke="var(--border)" tickLine={false} />
@@ -139,46 +130,7 @@ export default function App() {
     <div className="flex h-screen flex-col bg-background text-foreground">
       <div className="flex min-h-0 flex-1">
         <Panel position="left" className="shrink-0">
-          <Pane>
-            <PaneHeader>
-              <PaneLabel>Data</PaneLabel>
-            </PaneHeader>
-            <Action>
-              <ActionLabel>Metric</ActionLabel>
-              <ActionControls>
-                <Select
-                  value={metric}
-                  onValueChange={(value) => {
-                    if (isMetric(value)) setMetric(value)
-                  }}
-                >
-                  <SelectTrigger aria-label="Metric">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {METRICS.map((item) => (
-                      <SelectItem key={item.value} value={item.value}>
-                        {item.label}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </ActionControls>
-            </Action>
-            <Action>
-              <ActionLabel>Months</ActionLabel>
-              <ActionControls>
-                <NumberSlider
-                  value={months}
-                  onChange={(value) => setMonths(Math.round(value))}
-                  min={3}
-                  max={SAMPLE_DATA.length}
-                  step={1}
-                  precision={0}
-                />
-              </ActionControls>
-            </Action>
-          </Pane>
+          <Controls panel="Data" />
         </Panel>
 
         {/* Chart surface */}
@@ -199,7 +151,7 @@ export default function App() {
                   <Bar
                     dataKey={metric}
                     name={metricLabel}
-                    fill={colour}
+                    fill={style.colour}
                     radius={[4, 4, 0, 0]}
                     maxBarSize={32}
                     isAnimationActive={false}
@@ -212,10 +164,10 @@ export default function App() {
                     type="monotone"
                     dataKey={metric}
                     name={metricLabel}
-                    stroke={colour}
-                    strokeWidth={strokeWidth}
-                    fill={colour}
-                    fillOpacity={fillOpacity / 100}
+                    stroke={style.colour}
+                    strokeWidth={style.stroke}
+                    fill={style.colour}
+                    fillOpacity={style.fill}
                     isAnimationActive={false}
                   />
                 </AreaChart>
@@ -226,9 +178,9 @@ export default function App() {
                     type="monotone"
                     dataKey={metric}
                     name={metricLabel}
-                    stroke={colour}
-                    strokeWidth={strokeWidth}
-                    dot={{ fill: colour, r: 3 }}
+                    stroke={style.colour}
+                    strokeWidth={style.stroke}
+                    dot={{ fill: style.colour, r: 3 }}
                     isAnimationActive={false}
                   />
                 </LineChart>
@@ -238,65 +190,7 @@ export default function App() {
         </main>
 
         <Panel position="right" className="shrink-0">
-          <Pane>
-            <PaneHeader>
-              <PaneLabel>Style</PaneLabel>
-            </PaneHeader>
-            <Action>
-              <ActionLabel>Colour</ActionLabel>
-              <ActionControls>
-                <ColourPicker value={colour} onChange={setColour} />
-                <span className="font-mono text-xs text-muted-foreground">{colour}</span>
-              </ActionControls>
-            </Action>
-            {chartType !== "bar" && (
-              <Action>
-                <ActionLabel>Stroke</ActionLabel>
-                <ActionControls>
-                  <NumberSlider
-                    value={strokeWidth}
-                    onChange={setStrokeWidth}
-                    min={1}
-                    max={6}
-                    step={0.5}
-                    suffix="px"
-                  />
-                </ActionControls>
-              </Action>
-            )}
-            {chartType === "area" && (
-              <Action>
-                <ActionLabel>Fill</ActionLabel>
-                <ActionControls>
-                  <NumberSlider
-                    value={fillOpacity}
-                    onChange={setFillOpacity}
-                    min={0}
-                    max={100}
-                    step={1}
-                    precision={0}
-                    suffix="%"
-                  />
-                </ActionControls>
-              </Action>
-            )}
-            <Action>
-              <ActionLabel>Grid</ActionLabel>
-              <ActionControls>
-                <ToggleGroup
-                  type="single"
-                  value={grid}
-                  onValueChange={(value) => {
-                    if (value) setGrid(value)
-                  }}
-                  aria-label="Grid lines"
-                >
-                  <ToggleGroupItem value="on">On</ToggleGroupItem>
-                  <ToggleGroupItem value="off">Off</ToggleGroupItem>
-                </ToggleGroup>
-              </ActionControls>
-            </Action>
-          </Pane>
+          <Controls panel="Style" />
         </Panel>
       </div>
 

package/dist/surfaces/data-vis.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-vis.js","sourceRoot":"","sources":["../../src/surfaces/data-vis.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,OAAO,GAAkB;IACpC,UAAU,EAAE;QACV,SAAS;QACT,OAAO;QACP,MAAM;QACN,QAAQ;QACR,QAAQ;QACR,eAAe;QACf,eAAe;QACf,cAAc;QACd,YAAY;KACb;IACD,SAAS,EAAE;QACT,QAAQ,EAAE,QAAQ;KACnB;IACD,GAAG,EAAE,GAAG,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiUZ;CACA,CAAA"}
+{"version":3,"file":"data-vis.js","sourceRoot":"","sources":["../../src/surfaces/data-vis.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,OAAO,GAAkB;IACpC,UAAU,EAAE;QACV,SAAS;QACT,OAAO;QACP,UAAU;QACV,YAAY;KACb;IACD,SAAS,EAAE;QACT,QAAQ,EAAE,QAAQ;KACnB;IACD,GAAG,EAAE,GAAG,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4NZ;CACA,CAAA"}

package/dist/surfaces/image-gen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image-gen.d.ts","sourceRoot":"","sources":["../../src/surfaces/image-gen.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE/C,eAAO,MAAM,QAAQ,EAAE,aAqctB,CAAA"}
+{"version":3,"file":"image-gen.d.ts","sourceRoot":"","sources":["../../src/surfaces/image-gen.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE/C,eAAO,MAAM,QAAQ,EAAE,aAibtB,CAAA"}

package/dist/surfaces/image-gen.js

@@ -6,7 +6,7 @@ export const imageGen = {
         "action",
         "gallery",
         "text-area",
-        "slider",
+        "controls",
         "number-input",
         "progress-bar",
         "status-bar",
@@ -36,7 +36,8 @@ import {
   GalleryEmpty,
 } from "@/components/substrate/gallery"
 import { TextArea } from "@/components/substrate/text-area"
-import { Slider } from "@/components/substrate/slider"
+import { Controls } from "@/components/substrate/controls"
+import { useControlsController } from "@/hooks/substrate/use-controls"
 import { NumberInput } from "@/components/substrate/number-input"
 import { ProgressBar } from "@/components/substrate/progress-bar"
 import {
@@ -171,12 +172,18 @@ const INITIAL_GENERATIONS: Generation[] = [
 ]
 
 const TOOLBAR_BUTTON =
-  "inline-flex h-7 items-center justify-center gap-1.5 rounded-md px-2 text-xs font-medium outline-none transition-all hover:bg-muted hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50"
+  "inline-flex h-7 items-center justify-center gap-1.5 rounded-md px-2 text-xs font-medium outline-none transition-[color,background-color,box-shadow,transform] active:scale-[0.96] hover:bg-muted hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50"
 
 export default function App() {
   const [prompt, setPrompt] = useState("Misty mountain valley at sunrise")
-  const [steps, setSteps] = useState(30)
-  const [cfg, setCfg] = useState(7)
+  // The Parameters pane is generated from this config. The controller form
+  // of the hook adds setValues, used below to load a past result's settings.
+  const parameters = useControlsController("Parameters", {
+    steps: [30, 1, 100, 1],
+    cfgScale: [7, 1, 20, 0.5],
+  })
+  const steps = parameters.values.steps
+  const cfg = parameters.values.cfgScale
   const [seed, setSeed] = useState(-1)
   const [aspect, setAspect] = useState<AspectRatio>("1:1")
   const [generating, setGenerating] = useState(false)
@@ -230,8 +237,7 @@ export default function App() {
   function handleSelect(generation: Generation) {
     setSelectedId(generation.id)
     setPrompt(generation.prompt)
-    setSteps(generation.steps)
-    setCfg(generation.cfg)
+    parameters.setValues({ steps: generation.steps, cfgScale: generation.cfg })
     setSeed(generation.seed)
     setAspect(generation.aspect)
   }
@@ -270,9 +276,10 @@ export default function App() {
               {generating && <ProgressBar value={progress} aria-label="Generation progress" />}
             </PaneContent>
           </Pane>
+          <Controls panel="Parameters" />
           <Pane>
             <PaneHeader>
-              <PaneLabel>Parameters</PaneLabel>
+              <PaneLabel>Seed</PaneLabel>
               <PaneAction
                 type="button"
                 title="Random seed"
@@ -283,33 +290,6 @@ export default function App() {
               </PaneAction>
             </PaneHeader>
             <PaneContent className="space-y-1">
-              <Action>
-                <ActionLabel>Steps</ActionLabel>
-                <ActionControls>
-                  <Slider
-                    aria-label="Steps"
-                    min={1}
-                    max={100}
-                    value={[steps]}
-                    onValueChange={(value) => setSteps(value[0] ?? steps)}
-                  />
-                  <span className="w-8 text-right text-xs tabular-nums">{steps}</span>
-                </ActionControls>
-              </Action>
-              <Action>
-                <ActionLabel>CFG scale</ActionLabel>
-                <ActionControls>
-                  <Slider
-                    aria-label="CFG scale"
-                    min={1}
-                    max={20}
-                    step={0.5}
-                    value={[cfg]}
-                    onValueChange={(value) => setCfg(value[0] ?? cfg)}
-                  />
-                  <span className="w-8 text-right text-xs tabular-nums">{cfg}</span>
-                </ActionControls>
-              </Action>
               <Action>
                 <ActionLabel>Seed</ActionLabel>
                 <ActionControls>

package/dist/surfaces/image-gen.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-gen.js","sourceRoot":"","sources":["../../src/surfaces/image-gen.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,QAAQ,GAAkB;IACrC,UAAU,EAAE;QACV,SAAS;QACT,OAAO;QACP,MAAM;QACN,QAAQ;QACR,SAAS;QACT,WAAW;QACX,QAAQ;QACR,cAAc;QACd,cAAc;QACd,YAAY;QACZ,aAAa;KACd;IACD,GAAG,EAAE,GAAG,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsbZ;CACA,CAAA"}
+{"version":3,"file":"image-gen.js","sourceRoot":"","sources":["../../src/surfaces/image-gen.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,QAAQ,GAAkB;IACrC,UAAU,EAAE;QACV,SAAS;QACT,OAAO;QACP,MAAM;QACN,QAAQ;QACR,SAAS;QACT,WAAW;QACX,UAAU;QACV,cAAc;QACd,cAAc;QACd,YAAY;QACZ,aAAa;KACd;IACD,GAAG,EAAE,GAAG,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkaZ;CACA,CAAA"}

package/dist/surfaces/node-editor.js

@@ -260,7 +260,7 @@ type Drag =
   | { kind: "pan"; startX: number; startY: number; originX: number; originY: number }
 
 const actionButton =
-  "inline-flex h-7 items-center gap-1 rounded-md px-2 text-xs font-medium outline-none transition-all hover:bg-muted hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-3.5"
+  "inline-flex h-7 items-center gap-1 rounded-md px-2 text-xs font-medium outline-none transition-[color,background-color,box-shadow,transform] active:scale-[0.96] hover:bg-muted hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-3.5"
 
 export default function App() {
   const [tool, setTool] = useState<Tool>("select")

package/dist/utils/detect-pm.d.ts

@@ -1,4 +1,6 @@
 export type PackageManager = "npm" | "pnpm" | "bun";
+export declare function isPackageManager(value: string): value is PackageManager;
+export declare function detectRunningPackageManager(userAgent?: string | undefined): PackageManager | null;
 export declare function detectPackageManager(cwd: string): PackageManager;
 export declare function getInstallCommand(pm: PackageManager): string;
 export declare function getRunCommand(pm: PackageManager, script: string): string;

package/dist/utils/detect-pm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"detect-pm.d.ts","sourceRoot":"","sources":["../../src/utils/detect-pm.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,CAAA;AAEnD,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,MAAM,GAAG,cAAc,CAQhE;AAED,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,cAAc,GAAG,MAAM,CAE5D;AAED,wBAAgB,aAAa,CAAC,EAAE,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAGxE"}
+{"version":3,"file":"detect-pm.d.ts","sourceRoot":"","sources":["../../src/utils/detect-pm.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,CAAA;AAEnD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,IAAI,cAAc,CAEvE;AAID,wBAAgB,2BAA2B,CACzC,SAAS,GAAE,MAAM,GAAG,SAA6C,GAChE,cAAc,GAAG,IAAI,CAGvB;AAED,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,MAAM,GAAG,cAAc,CAQhE;AAED,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,cAAc,GAAG,MAAM,CAE5D;AAED,wBAAgB,aAAa,CAAC,EAAE,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAGxE"}

package/dist/utils/detect-pm.js

@@ -1,5 +1,14 @@
 import { existsSync } from "node:fs";
 import { join } from "node:path";
+export function isPackageManager(value) {
+    return value === "npm" || value === "pnpm" || value === "bun";
+}
+// npm, pnpm and bun all set npm_config_user_agent to e.g. "pnpm/9.1.0 npm/? ...",
+// so the tool that ran `create-substrate` is the one the user prefers.
+export function detectRunningPackageManager(userAgent = process.env.npm_config_user_agent) {
+    const name = userAgent?.split(" ")[0]?.split("/")[0];
+    return name && isPackageManager(name) ? name : null;
+}
 export function detectPackageManager(cwd) {
     if (existsSync(join(cwd, "bun.lockb")) || existsSync(join(cwd, "bun.lock"))) {
         return "bun";