create-substrate 0.1.0

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

@@ -0,0 +1,184 @@
+export const scene3d = {
+    components: [
+        "toolbar",
+        "panel",
+        "pane",
+        "slider",
+        "number-input",
+        "colour-picker",
+        "status-bar",
+    ],
+    extraDeps: {
+        three: "^0.170.0",
+        "@react-three/fiber": "^8.17.0",
+        "@react-three/drei": "^9.117.0",
+    },
+    extraDevDeps: {
+        "@types/three": "^0.170.0",
+    },
+    app: () => `import { useState, useRef } from "react"
+import { Canvas } from "@react-three/fiber"
+import { OrbitControls, Grid, Environment } from "@react-three/drei"
+import {
+  Toolbar,
+  ToolbarToggleGroup,
+  ToolbarToggle,
+  ToolbarSeparator,
+} from "@/components/substrate/toolbar"
+import { Panel } from "@/components/substrate/panel"
+import {
+  Pane,
+  PaneHeader,
+  PaneLabel,
+  PaneContent,
+} from "@/components/substrate/pane"
+import { NumberInput } from "@/components/substrate/number-input"
+import { Slider } from "@/components/substrate/slider"
+import { ColourPicker } from "@/components/substrate/colour-picker"
+import { StatusBar, StatusBarSection, StatusBarItem } from "@/components/substrate/status-bar"
+import {
+  RiCursorLine,
+  RiDragMoveLine,
+  RiRefreshLine,
+  RiExpandDiagonal2Line,
+} from "@remixicon/react"
+
+interface SceneObject {
+  id: string
+  type: "box" | "sphere"
+  position: [number, number, number]
+  colour: string
+  roughness: number
+}
+
+const INITIAL_OBJECTS: SceneObject[] = [
+  { id: "box-1", type: "box", position: [-1.5, 0.5, 0], colour: "#6366f1", roughness: 0.4 },
+  { id: "sphere-1", type: "sphere", position: [1.5, 0.6, 0], colour: "#f43f5e", roughness: 0.2 },
+]
+
+function SceneMesh({
+  object,
+  selected,
+  onSelect,
+}: {
+  object: SceneObject
+  selected: boolean
+  onSelect: () => void
+}) {
+  return (
+    <mesh position={object.position} onClick={onSelect}>
+      {object.type === "box" ? (
+        <boxGeometry args={[1, 1, 1]} />
+      ) : (
+        <sphereGeometry args={[0.6, 32, 32]} />
+      )}
+      <meshStandardMaterial
+        color={object.colour}
+        roughness={object.roughness}
+        emissive={selected ? "#ffffff" : "#000000"}
+        emissiveIntensity={selected ? 0.05 : 0}
+      />
+    </mesh>
+  )
+}
+
+export default function App() {
+  const [mode, setMode] = useState("select")
+  const [objects, setObjects] = useState(INITIAL_OBJECTS)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+
+  const selected = objects.find((o) => o.id === selectedId) ?? null
+
+  function updateSelected(patch: Partial<SceneObject>) {
+    if (!selectedId) return
+    setObjects((prev) =>
+      prev.map((o) => (o.id === selectedId ? { ...o, ...patch } : o))
+    )
+  }
+
+  return (
+    <div className="flex h-screen flex-col bg-background text-foreground">
+      <div className="relative flex flex-1 overflow-hidden">
+        <div className="flex-1 bg-canvas">
+          <Canvas camera={{ position: [4, 3, 4], fov: 50 }}>
+            <ambientLight intensity={0.4} />
+            <directionalLight position={[5, 8, 5]} intensity={1} />
+            <Environment preset="studio" />
+            <Grid infiniteGrid fadeDistance={20} cellColor="#333" sectionColor="#555" />
+            <OrbitControls makeDefault />
+            {objects.map((obj) => (
+              <SceneMesh
+                key={obj.id}
+                object={obj}
+                selected={obj.id === selectedId}
+                onSelect={() => setSelectedId(obj.id)}
+              />
+            ))}
+          </Canvas>
+        </div>
+
+        <Panel position="right">
+          {selected ? (
+            <>
+              <Pane>
+                <PaneHeader>
+                  <PaneLabel>Position</PaneLabel>
+                </PaneHeader>
+                <PaneContent>
+                  <div className="grid grid-cols-3 gap-2">
+                    <NumberInput label="X" value={selected.position[0]} step={0.1} onChange={(v) => updateSelected({ position: [v, selected.position[1], selected.position[2]] })} />
+                    <NumberInput label="Y" value={selected.position[1]} step={0.1} onChange={(v) => updateSelected({ position: [selected.position[0], v, selected.position[2]] })} />
+                    <NumberInput label="Z" value={selected.position[2]} step={0.1} onChange={(v) => updateSelected({ position: [selected.position[0], selected.position[1], v] })} />
+                  </div>
+                </PaneContent>
+              </Pane>
+              <Pane>
+                <PaneHeader>
+                  <PaneLabel>Material</PaneLabel>
+                </PaneHeader>
+                <PaneContent className="space-y-3">
+                  <ColourPicker value={selected.colour} onChange={(c) => updateSelected({ colour: c })} />
+                  <Slider label="Roughness" min={0} max={1} step={0.01} value={[selected.roughness]} onValueChange={([v]) => updateSelected({ roughness: v })} />
+                </PaneContent>
+              </Pane>
+            </>
+          ) : (
+            <Pane>
+              <PaneContent>
+                <p className="text-sm text-muted-foreground">Click an object to inspect</p>
+              </PaneContent>
+            </Pane>
+          )}
+        </Panel>
+      </div>
+
+      <Toolbar>
+        <ToolbarToggleGroup value={mode} onValueChange={setMode}>
+          <ToolbarToggle value="select" tooltip="Select" shortcut="V">
+            <RiCursorLine className="size-4" />
+          </ToolbarToggle>
+          <ToolbarSeparator />
+          <ToolbarToggle value="translate" tooltip="Translate" shortcut="G">
+            <RiDragMoveLine className="size-4" />
+          </ToolbarToggle>
+          <ToolbarToggle value="rotate" tooltip="Rotate" shortcut="R">
+            <RiRefreshLine className="size-4" />
+          </ToolbarToggle>
+          <ToolbarToggle value="scale" tooltip="Scale" shortcut="S">
+            <RiExpandDiagonal2Line className="size-4" />
+          </ToolbarToggle>
+        </ToolbarToggleGroup>
+      </Toolbar>
+
+      <StatusBar>
+        <StatusBarSection>
+          <StatusBarItem label="Mode" value={mode} />
+          {selected && <StatusBarItem label="Selected" value={selected.id} />}
+        </StatusBarSection>
+      </StatusBar>
+    </div>
+  )
+}
+`,
+};
+//# sourceMappingURL=3d-scene.js.map

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

@@ -0,0 +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,cAAc;QACd,eAAe;QACf,YAAY;KACb;IACD,SAAS,EAAE;QACT,KAAK,EAAE,UAAU;QACjB,oBAAoB,EAAE,SAAS;QAC/B,mBAAmB,EAAE,UAAU;KAChC;IACD,YAAY,EAAE;QACZ,cAAc,EAAE,UAAU;KAC3B;IACD,GAAG,EAAE,GAAG,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmKZ;CACA,CAAA"}

package/dist/surfaces/animation.d.ts

@@ -0,0 +1,3 @@
+import type { SurfaceConfig } from "./types.js";
+export declare const animation: SurfaceConfig;
+//# sourceMappingURL=animation.d.ts.map

package/dist/surfaces/animation.d.ts.map

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

package/dist/surfaces/animation.js

@@ -0,0 +1,211 @@
+export const animation = {
+    components: [
+        "toolbar",
+        "panel",
+        "pane",
+        "timeline",
+        "easing-curve-editor",
+        "slider",
+        "number-input",
+        "history-controls",
+        "status-bar",
+    ],
+    extraDeps: {
+        gsap: "^3.12.0",
+    },
+    app: () => `import { useState, useRef, useEffect } from "react"
+import {
+  Toolbar,
+  ToolbarToggleGroup,
+  ToolbarToggle,
+  ToolbarSeparator,
+} from "@/components/substrate/toolbar"
+import { Panel } from "@/components/substrate/panel"
+import {
+  Pane,
+  PaneHeader,
+  PaneLabel,
+  PaneContent,
+} from "@/components/substrate/pane"
+import { Timeline } from "@/components/substrate/timeline"
+import { EasingCurveEditor } from "@/components/substrate/easing-curve-editor"
+import { NumberInput } from "@/components/substrate/number-input"
+import { Slider } from "@/components/substrate/slider"
+import { HistoryControls } from "@/components/substrate/history-controls"
+import { StatusBar, StatusBarSection, StatusBarItem } from "@/components/substrate/status-bar"
+import {
+  RiPlayLine,
+  RiPauseLine,
+  RiStopLine,
+  RiSkipBackLine,
+} from "@remixicon/react"
+
+interface Keyframe {
+  id: string
+  time: number
+  value: number
+}
+
+interface Track {
+  id: string
+  label: string
+  keyframes: Keyframe[]
+}
+
+const INITIAL_TRACKS: Track[] = [
+  {
+    id: "position-x",
+    label: "Position X",
+    keyframes: [
+      { id: "k1", time: 0, value: 50 },
+      { id: "k2", time: 30, value: 300 },
+      { id: "k3", time: 60, value: 150 },
+    ],
+  },
+  {
+    id: "opacity",
+    label: "Opacity",
+    keyframes: [
+      { id: "k4", time: 0, value: 100 },
+      { id: "k5", time: 20, value: 30 },
+      { id: "k6", time: 50, value: 100 },
+    ],
+  },
+]
+
+export default function App() {
+  const [playing, setPlaying] = useState(false)
+  const [currentFrame, setCurrentFrame] = useState(0)
+  const [totalFrames] = useState(60)
+  const [tracks] = useState(INITIAL_TRACKS)
+  const [easing, setEasing] = useState<[number, number, number, number]>([0.4, 0, 0.2, 1])
+  const animRef = useRef<number | null>(null)
+  const boxRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!playing) {
+      if (animRef.current) cancelAnimationFrame(animRef.current)
+      return
+    }
+
+    let frame = currentFrame
+    const tick = () => {
+      frame = (frame + 1) % totalFrames
+      setCurrentFrame(frame)
+      animRef.current = requestAnimationFrame(tick)
+    }
+    animRef.current = requestAnimationFrame(tick)
+    return () => {
+      if (animRef.current) cancelAnimationFrame(animRef.current)
+    }
+  }, [playing])
+
+  // Interpolate position and opacity from keyframes
+  const posX = interpolate(tracks[0].keyframes, currentFrame)
+  const opacity = interpolate(tracks[1].keyframes, currentFrame) / 100
+
+  return (
+    <div className="flex h-screen flex-col bg-background text-foreground">
+      <div className="relative flex flex-1 overflow-hidden">
+        {/* Preview stage */}
+        <div className="flex flex-1 items-center justify-center bg-canvas">
+          <div
+            ref={boxRef}
+            className="size-20 rounded-lg bg-primary"
+            style={{
+              transform: \`translateX(\${posX - 150}px)\`,
+              opacity,
+            }}
+          />
+        </div>
+
+        <Panel position="right">
+          <Pane>
+            <PaneHeader>
+              <PaneLabel>Easing</PaneLabel>
+            </PaneHeader>
+            <PaneContent>
+              <EasingCurveEditor value={easing} onChange={setEasing} />
+            </PaneContent>
+          </Pane>
+          <Pane>
+            <PaneHeader>
+              <PaneLabel>Keyframe</PaneLabel>
+            </PaneHeader>
+            <PaneContent>
+              <div className="grid grid-cols-2 gap-2">
+                <NumberInput label="Frame" value={currentFrame} onChange={setCurrentFrame} min={0} max={totalFrames} />
+                <NumberInput label="Value" defaultValue={0} />
+              </div>
+            </PaneContent>
+          </Pane>
+        </Panel>
+      </div>
+
+      {/* Timeline */}
+      <div className="h-48 border-t border-border bg-panel">
+        <Timeline
+          tracks={tracks}
+          currentFrame={currentFrame}
+          totalFrames={totalFrames}
+          onFrameChange={setCurrentFrame}
+        />
+      </div>
+
+      <Toolbar>
+        <ToolbarToggle
+          value="back"
+          tooltip="Go to start"
+          onPressedChange={() => { setCurrentFrame(0); setPlaying(false) }}
+        >
+          <RiSkipBackLine className="size-4" />
+        </ToolbarToggle>
+        <ToolbarToggle
+          value="play"
+          pressed={playing}
+          tooltip={playing ? "Pause" : "Play"}
+          shortcut="Space"
+          onPressedChange={() => setPlaying(!playing)}
+        >
+          {playing ? <RiPauseLine className="size-4" /> : <RiPlayLine className="size-4" />}
+        </ToolbarToggle>
+        <ToolbarToggle
+          value="stop"
+          tooltip="Stop"
+          onPressedChange={() => { setPlaying(false); setCurrentFrame(0) }}
+        >
+          <RiStopLine className="size-4" />
+        </ToolbarToggle>
+      </Toolbar>
+
+      <StatusBar>
+        <StatusBarSection>
+          <StatusBarItem label="Frame" value={\`\${currentFrame} / \${totalFrames}\`} />
+          <StatusBarItem label="State" value={playing ? "Playing" : "Stopped"} />
+        </StatusBarSection>
+        <StatusBarSection>
+          <HistoryControls canUndo={false} canRedo={false} onUndo={() => {}} onRedo={() => {}} />
+        </StatusBarSection>
+      </StatusBar>
+    </div>
+  )
+}
+
+function interpolate(keyframes: Keyframe[], frame: number): number {
+  if (keyframes.length === 0) return 0
+  if (frame <= keyframes[0].time) return keyframes[0].value
+  if (frame >= keyframes[keyframes.length - 1].time) return keyframes[keyframes.length - 1].value
+
+  for (let i = 0; i < keyframes.length - 1; i++) {
+    const a = keyframes[i]
+    const b = keyframes[i + 1]
+    if (frame >= a.time && frame <= b.time) {
+      const t = (frame - a.time) / (b.time - a.time)
+      return a.value + (b.value - a.value) * t
+    }
+  }
+  return 0
+}
+`,
+};
+//# sourceMappingURL=animation.js.map

package/dist/surfaces/animation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animation.js","sourceRoot":"","sources":["../../src/surfaces/animation.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,SAAS,GAAkB;IACtC,UAAU,EAAE;QACV,SAAS;QACT,OAAO;QACP,MAAM;QACN,UAAU;QACV,qBAAqB;QACrB,QAAQ;QACR,cAAc;QACd,kBAAkB;QAClB,YAAY;KACb;IACD,SAAS,EAAE;QACT,IAAI,EAAE,SAAS;KAChB;IACD,GAAG,EAAE,GAAG,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiMZ;CACA,CAAA"}

package/dist/surfaces/blank.d.ts

@@ -0,0 +1,3 @@
+import type { SurfaceConfig } from "./types.js";
+export declare const blank: SurfaceConfig;
+//# sourceMappingURL=blank.d.ts.map

package/dist/surfaces/blank.d.ts.map

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

package/dist/surfaces/blank.js

@@ -0,0 +1,72 @@
+export const blank = {
+    components: [
+        "toolbar",
+        "panel",
+        "pane",
+        "surface",
+        "empty-state",
+        "status-bar",
+    ],
+    app: () => `import { useState } from "react"
+import {
+  Toolbar,
+  ToolbarToggleGroup,
+  ToolbarToggle,
+  ToolbarSeparator,
+} from "@/components/substrate/toolbar"
+import { Panel } from "@/components/substrate/panel"
+import { Surface } from "@/components/substrate/surface"
+import { EmptyState } from "@/components/substrate/empty-state"
+import { StatusBar, StatusBarSection, StatusBarItem } from "@/components/substrate/status-bar"
+import { RiCursorLine, RiHand } from "@remixicon/react"
+
+export default function App() {
+  const [tool, setTool] = useState("select")
+
+  return (
+    <div className="flex h-screen flex-col bg-background text-foreground">
+      <div className="relative flex flex-1 overflow-hidden">
+        <Panel position="left">
+          <EmptyState
+            title="Left panel"
+            description="Add layers, assets, or navigation here"
+          />
+        </Panel>
+
+        <Surface className="flex-1">
+          <EmptyState
+            title="Your surface here"
+            description="Replace this with your rendering engine — canvas, Three.js, timeline, or anything else"
+          />
+        </Surface>
+
+        <Panel position="right">
+          <EmptyState
+            title="Right panel"
+            description="Add property controls and inspectors here"
+          />
+        </Panel>
+      </div>
+
+      <Toolbar>
+        <ToolbarToggleGroup value={tool} onValueChange={setTool}>
+          <ToolbarToggle value="select" tooltip="Select" shortcut="V">
+            <RiCursorLine className="size-4" />
+          </ToolbarToggle>
+          <ToolbarToggle value="hand" tooltip="Hand" shortcut="H">
+            <RiHand className="size-4" />
+          </ToolbarToggle>
+        </ToolbarToggleGroup>
+      </Toolbar>
+
+      <StatusBar>
+        <StatusBarSection>
+          <StatusBarItem label="Tool" value={tool} />
+        </StatusBarSection>
+      </StatusBar>
+    </div>
+  )
+}
+`,
+};
+//# sourceMappingURL=blank.js.map

package/dist/surfaces/blank.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"blank.js","sourceRoot":"","sources":["../../src/surfaces/blank.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,KAAK,GAAkB;IAClC,UAAU,EAAE;QACV,SAAS;QACT,OAAO;QACP,MAAM;QACN,SAAS;QACT,aAAa;QACb,YAAY;KACb;IACD,GAAG,EAAE,GAAG,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DZ;CACA,CAAA"}

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

@@ -0,0 +1,3 @@
+import type { SurfaceConfig } from "./types.js";
+export declare const canvas2d: SurfaceConfig;
+//# sourceMappingURL=canvas-2d.d.ts.map

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

@@ -0,0 +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,aAyItB,CAAA"}

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

@@ -0,0 +1,139 @@
+export const canvas2d = {
+    components: [
+        "design-canvas",
+        "toolbar",
+        "panel",
+        "pane",
+        "slider",
+        "layer-list",
+        "number-input",
+        "colour-picker",
+        "history-controls",
+        "status-bar",
+        "zoom-controls",
+    ],
+    app: () => `import { useState } from "react"
+import { DesignCanvas } from "@/components/substrate/design-canvas"
+import {
+  Toolbar,
+  ToolbarToggleGroup,
+  ToolbarToggle,
+  ToolbarSeparator,
+} from "@/components/substrate/toolbar"
+import { Panel } from "@/components/substrate/panel"
+import {
+  Pane,
+  PaneHeader,
+  PaneLabel,
+  PaneContent,
+} from "@/components/substrate/pane"
+import { LayerList, LayerItem, LayerIcon, LayerName } from "@/components/substrate/layer-list"
+import { NumberInput } from "@/components/substrate/number-input"
+import { ColourPicker } from "@/components/substrate/colour-picker"
+import { HistoryControls } from "@/components/substrate/history-controls"
+import { StatusBar, StatusBarSection, StatusBarItem } from "@/components/substrate/status-bar"
+import { ZoomControls } from "@/components/substrate/zoom-controls"
+import {
+  RiCursorLine,
+  RiHand,
+  RiSquareLine,
+  RiCircleLine,
+  RiSubtractLine,
+  RiText,
+  RiArtboard2Line,
+} from "@remixicon/react"
+
+const TOOLS = [
+  { value: "select", icon: RiCursorLine, label: "Select", shortcut: "V" },
+  { value: "hand", icon: RiHand, label: "Hand", shortcut: "H" },
+  "separator",
+  { value: "rectangle", icon: RiSquareLine, label: "Rectangle", shortcut: "R" },
+  { value: "ellipse", icon: RiCircleLine, label: "Ellipse", shortcut: "O" },
+  { value: "line", icon: RiSubtractLine, label: "Line", shortcut: "L" },
+  { value: "text", icon: RiText, label: "Text", shortcut: "T" },
+  { value: "frame", icon: RiArtboard2Line, label: "Frame", shortcut: "F" },
+] as const
+
+export default function App() {
+  const [tool, setTool] = useState("select")
+  const [zoom, setZoom] = useState(1)
+
+  return (
+    <div className="flex h-screen flex-col bg-background text-foreground">
+      <div className="relative flex flex-1 overflow-hidden">
+        <Panel position="left">
+          <Pane>
+            <PaneHeader>
+              <PaneLabel>Layers</PaneLabel>
+            </PaneHeader>
+            <PaneContent>
+              <LayerList>
+                <LayerItem>
+                  <LayerIcon><RiSquareLine className="size-3.5" /></LayerIcon>
+                  <LayerName>Rectangle 1</LayerName>
+                </LayerItem>
+                <LayerItem>
+                  <LayerIcon><RiCircleLine className="size-3.5" /></LayerIcon>
+                  <LayerName>Ellipse 1</LayerName>
+                </LayerItem>
+              </LayerList>
+            </PaneContent>
+          </Pane>
+        </Panel>
+
+        <DesignCanvas />
+
+        <Panel position="right">
+          <Pane>
+            <PaneHeader>
+              <PaneLabel>Transform</PaneLabel>
+            </PaneHeader>
+            <PaneContent>
+              <div className="grid grid-cols-2 gap-2">
+                <NumberInput label="X" defaultValue={0} />
+                <NumberInput label="Y" defaultValue={0} />
+                <NumberInput label="W" defaultValue={100} />
+                <NumberInput label="H" defaultValue={100} />
+              </div>
+            </PaneContent>
+          </Pane>
+          <Pane>
+            <PaneHeader>
+              <PaneLabel>Fill</PaneLabel>
+            </PaneHeader>
+            <PaneContent>
+              <ColourPicker />
+            </PaneContent>
+          </Pane>
+        </Panel>
+      </div>
+
+      <Toolbar>
+        <ToolbarToggleGroup value={tool} onValueChange={setTool}>
+          {TOOLS.map((t, i) =>
+            t === "separator" ? (
+              <ToolbarSeparator key={i} />
+            ) : (
+              <ToolbarToggle key={t.value} value={t.value} tooltip={t.label} shortcut={t.shortcut}>
+                <t.icon className="size-4" />
+              </ToolbarToggle>
+            )
+          )}
+        </ToolbarToggleGroup>
+      </Toolbar>
+
+      <StatusBar>
+        <StatusBarSection>
+          <StatusBarItem label="Tool" value={tool} />
+        </StatusBarSection>
+        <StatusBarSection>
+          <HistoryControls canUndo={false} canRedo={false} onUndo={() => {}} onRedo={() => {}} />
+          <ZoomControls zoom={zoom} onZoomIn={() => setZoom((z) => Math.min(z * 1.25, 10))} onZoomOut={() => setZoom((z) => Math.max(z / 1.25, 0.1))} onReset={() => setZoom(1)} />
+        </StatusBarSection>
+      </StatusBar>
+    </div>
+  )
+}
+`,
+};
+//# sourceMappingURL=canvas-2d.js.map

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

@@ -0,0 +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,eAAe;QACf,SAAS;QACT,OAAO;QACP,MAAM;QACN,QAAQ;QACR,YAAY;QACZ,cAAc;QACd,eAAe;QACf,kBAAkB;QAClB,YAAY;QACZ,eAAe;KAChB;IACD,GAAG,EAAE,GAAG,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0HZ;CACA,CAAA"}

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

@@ -0,0 +1,3 @@
+import type { SurfaceConfig } from "./types.js";
+export declare const dataVis: SurfaceConfig;
+//# sourceMappingURL=data-vis.d.ts.map

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

@@ -0,0 +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,aA6KrB,CAAA"}