create-substrate 0.1.0

package/dist/surfaces/data-vis.js

@@ -0,0 +1,175 @@
+export const dataVis = {
+    components: [
+        "toolbar",
+        "panel",
+        "pane",
+        "select",
+        "slider",
+        "colour-picker",
+        "number-input",
+        "status-bar",
+    ],
+    extraDeps: {
+        recharts: "^2.15.0",
+    },
+    app: () => `import { useState } from "react"
+import {
+  LineChart,
+  Line,
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from "recharts"
+import {
+  Toolbar,
+  ToolbarToggleGroup,
+  ToolbarToggle,
+} from "@/components/substrate/toolbar"
+import { Panel } from "@/components/substrate/panel"
+import {
+  Pane,
+  PaneHeader,
+  PaneLabel,
+  PaneContent,
+} from "@/components/substrate/pane"
+import { Select } from "@/components/substrate/select"
+import { Slider } from "@/components/substrate/slider"
+import { ColourPicker } from "@/components/substrate/colour-picker"
+import { StatusBar, StatusBarSection, StatusBarItem } from "@/components/substrate/status-bar"
+import {
+  RiLineChartLine,
+  RiBarChartLine,
+} from "@remixicon/react"
+
+const SAMPLE_DATA = [
+  { month: "Jan", revenue: 4200, users: 1800 },
+  { month: "Feb", revenue: 3800, users: 2200 },
+  { month: "Mar", revenue: 5100, users: 2800 },
+  { month: "Apr", revenue: 4600, users: 3100 },
+  { month: "May", revenue: 6200, users: 3600 },
+  { month: "Jun", revenue: 5800, users: 4200 },
+  { month: "Jul", revenue: 7100, users: 4800 },
+  { month: "Aug", revenue: 6500, users: 5100 },
+  { month: "Sep", revenue: 7800, users: 5600 },
+  { month: "Oct", revenue: 8200, users: 6200 },
+  { month: "Nov", revenue: 7600, users: 6800 },
+  { month: "Dec", revenue: 9100, users: 7400 },
+]
+
+const METRICS = [
+  { value: "revenue", label: "Revenue" },
+  { value: "users", label: "Users" },
+]
+
+type ChartType = "line" | "bar"
+
+export default function App() {
+  const [chartType, setChartType] = useState<ChartType>("line")
+  const [metric, setMetric] = useState("revenue")
+  const [colour, setColour] = useState("#6366f1")
+  const [strokeWidth, setStrokeWidth] = useState(2)
+
+  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>Dataset</PaneLabel>
+            </PaneHeader>
+            <PaneContent className="space-y-3">
+              <Select
+                label="Metric"
+                value={metric}
+                onValueChange={setMetric}
+                options={METRICS}
+              />
+            </PaneContent>
+          </Pane>
+        </Panel>
+
+        {/* Chart surface */}
+        <div className="flex flex-1 items-center justify-center bg-canvas p-8">
+          <ResponsiveContainer width="100%" height="80%">
+            {chartType === "line" ? (
+              <LineChart data={SAMPLE_DATA}>
+                <CartesianGrid strokeDasharray="3 3" stroke="hsl(0 0% 20%)" />
+                <XAxis dataKey="month" stroke="hsl(0 0% 50%)" />
+                <YAxis stroke="hsl(0 0% 50%)" />
+                <Tooltip
+                  contentStyle={{ background: "hsl(0 0% 12%)", border: "1px solid hsl(0 0% 20%)", borderRadius: 8 }}
+                  labelStyle={{ color: "hsl(0 0% 80%)" }}
+                />
+                <Line
+                  type="monotone"
+                  dataKey={metric}
+                  stroke={colour}
+                  strokeWidth={strokeWidth}
+                  dot={{ fill: colour, r: 3 }}
+                />
+              </LineChart>
+            ) : (
+              <BarChart data={SAMPLE_DATA}>
+                <CartesianGrid strokeDasharray="3 3" stroke="hsl(0 0% 20%)" />
+                <XAxis dataKey="month" stroke="hsl(0 0% 50%)" />
+                <YAxis stroke="hsl(0 0% 50%)" />
+                <Tooltip
+                  contentStyle={{ background: "hsl(0 0% 12%)", border: "1px solid hsl(0 0% 20%)", borderRadius: 8 }}
+                  labelStyle={{ color: "hsl(0 0% 80%)" }}
+                />
+                <Bar dataKey={metric} fill={colour} radius={[4, 4, 0, 0]} />
+              </BarChart>
+            )}
+          </ResponsiveContainer>
+        </div>
+
+        <Panel position="right">
+          <Pane>
+            <PaneHeader>
+              <PaneLabel>Style</PaneLabel>
+            </PaneHeader>
+            <PaneContent className="space-y-3">
+              <ColourPicker value={colour} onChange={setColour} />
+              {chartType === "line" && (
+                <Slider
+                  label="Stroke width"
+                  min={1}
+                  max={6}
+                  step={0.5}
+                  value={[strokeWidth]}
+                  onValueChange={([v]) => setStrokeWidth(v)}
+                />
+              )}
+            </PaneContent>
+          </Pane>
+        </Panel>
+      </div>
+
+      <Toolbar>
+        <ToolbarToggleGroup value={chartType} onValueChange={(v) => setChartType(v as ChartType)}>
+          <ToolbarToggle value="line" tooltip="Line chart">
+            <RiLineChartLine className="size-4" />
+          </ToolbarToggle>
+          <ToolbarToggle value="bar" tooltip="Bar chart">
+            <RiBarChartLine className="size-4" />
+          </ToolbarToggle>
+        </ToolbarToggleGroup>
+      </Toolbar>
+
+      <StatusBar>
+        <StatusBarSection>
+          <StatusBarItem label="Chart" value={chartType} />
+          <StatusBarItem label="Metric" value={metric} />
+          <StatusBarItem label="Points" value={String(SAMPLE_DATA.length)} />
+        </StatusBarSection>
+      </StatusBar>
+    </div>
+  )
+}
+`,
+};
+//# sourceMappingURL=data-vis.js.map

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

@@ -0,0 +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,cAAc;QACd,YAAY;KACb;IACD,SAAS,EAAE;QACT,QAAQ,EAAE,SAAS;KACpB;IACD,GAAG,EAAE,GAAG,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8JZ;CACA,CAAA"}

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

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

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

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

package/dist/surfaces/image-gen.js

@@ -0,0 +1,193 @@
+export const imageGen = {
+    components: [
+        "toolbar",
+        "panel",
+        "pane",
+        "gallery",
+        "text-area",
+        "slider",
+        "number-input",
+        "progress-bar",
+        "status-bar",
+    ],
+    app: () => `import { useState } from "react"
+import {
+  Toolbar,
+  ToolbarToggleGroup,
+  ToolbarToggle,
+} from "@/components/substrate/toolbar"
+import { Panel } from "@/components/substrate/panel"
+import {
+  Pane,
+  PaneHeader,
+  PaneLabel,
+  PaneContent,
+} from "@/components/substrate/pane"
+import { Gallery } from "@/components/substrate/gallery"
+import { TextArea } from "@/components/substrate/text-area"
+import { Slider } from "@/components/substrate/slider"
+import { NumberInput } from "@/components/substrate/number-input"
+import { ProgressBar } from "@/components/substrate/progress-bar"
+import { StatusBar, StatusBarSection, StatusBarItem } from "@/components/substrate/status-bar"
+import {
+  RiSparklingLine,
+  RiImageLine,
+  RiSettings3Line,
+} from "@remixicon/react"
+
+interface Generation {
+  id: string
+  prompt: string
+  timestamp: number
+  placeholder: string
+}
+
+const PLACEHOLDER_COLOURS = [
+  "from-indigo-500/20 to-purple-500/20",
+  "from-emerald-500/20 to-cyan-500/20",
+  "from-rose-500/20 to-orange-500/20",
+  "from-blue-500/20 to-violet-500/20",
+]
+
+export default function App() {
+  const [prompt, setPrompt] = useState("")
+  const [steps, setSteps] = useState(30)
+  const [cfg, setCfg] = useState(7)
+  const [seed, setSeed] = useState(-1)
+  const [generating, setGenerating] = useState(false)
+  const [progress, setProgress] = useState(0)
+  const [generations, setGenerations] = useState<Generation[]>([])
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+
+  async function handleGenerate() {
+    if (!prompt.trim()) return
+    setGenerating(true)
+    setProgress(0)
+
+    // Simulate generation progress
+    for (let i = 0; i <= 100; i += 10) {
+      await new Promise((r) => setTimeout(r, 200))
+      setProgress(i)
+    }
+
+    const gen: Generation = {
+      id: crypto.randomUUID(),
+      prompt: prompt.trim(),
+      timestamp: Date.now(),
+      placeholder: PLACEHOLDER_COLOURS[generations.length % PLACEHOLDER_COLOURS.length],
+    }
+    setGenerations((prev) => [gen, ...prev])
+    setSelectedId(gen.id)
+    setGenerating(false)
+    setProgress(0)
+  }
+
+  const selected = generations.find((g) => g.id === selectedId)
+
+  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>Prompt</PaneLabel>
+            </PaneHeader>
+            <PaneContent>
+              <TextArea
+                value={prompt}
+                onChange={(e) => setPrompt(e.target.value)}
+                placeholder="Describe the image you want to generate..."
+                rows={4}
+              />
+            </PaneContent>
+          </Pane>
+          <Pane>
+            <PaneHeader>
+              <PaneLabel>Parameters</PaneLabel>
+            </PaneHeader>
+            <PaneContent className="space-y-3">
+              <Slider
+                label="Steps"
+                min={1}
+                max={100}
+                value={[steps]}
+                onValueChange={([v]) => setSteps(v)}
+              />
+              <Slider
+                label="CFG scale"
+                min={1}
+                max={20}
+                step={0.5}
+                value={[cfg]}
+                onValueChange={([v]) => setCfg(v)}
+              />
+              <NumberInput label="Seed" value={seed} onChange={setSeed} />
+            </PaneContent>
+          </Pane>
+        </Panel>
+
+        {/* Preview area */}
+        <div className="flex flex-1 flex-col bg-canvas">
+          <div className="flex flex-1 items-center justify-center p-8">
+            {selected ? (
+              <div className={\`flex aspect-square max-h-full w-full max-w-lg items-center justify-center rounded-lg bg-gradient-to-br \${selected.placeholder}\`}>
+                <RiImageLine className="size-16 text-muted-foreground/30" />
+              </div>
+            ) : (
+              <div className="text-center text-muted-foreground">
+                <RiSparklingLine className="mx-auto mb-3 size-12 opacity-30" />
+                <p className="text-sm">Enter a prompt and generate</p>
+              </div>
+            )}
+          </div>
+
+          {generating && (
+            <div className="px-8 pb-4">
+              <ProgressBar value={progress} max={100} />
+            </div>
+          )}
+
+          {/* Gallery history */}
+          {generations.length > 0 && (
+            <div className="border-t border-border p-3">
+              <Gallery
+                items={generations.map((g) => ({
+                  id: g.id,
+                  label: g.prompt.slice(0, 40),
+                }))}
+                selectedId={selectedId}
+                onSelect={setSelectedId}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+
+      <Toolbar>
+        <ToolbarToggle
+          value="generate"
+          tooltip="Generate"
+          shortcut="⌘↵"
+          onPressedChange={handleGenerate}
+          disabled={generating || !prompt.trim()}
+        >
+          <RiSparklingLine className="size-4" />
+        </ToolbarToggle>
+      </Toolbar>
+
+      <StatusBar>
+        <StatusBarSection>
+          <StatusBarItem label="Generations" value={String(generations.length)} />
+          {generating && <StatusBarItem label="Progress" value={\`\${progress}%\`} />}
+        </StatusBarSection>
+        <StatusBarSection>
+          <StatusBarItem label="Steps" value={String(steps)} />
+          <StatusBarItem label="CFG" value={String(cfg)} />
+        </StatusBarSection>
+      </StatusBar>
+    </div>
+  )
+}
+`,
+};
+//# sourceMappingURL=image-gen.js.map

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

@@ -0,0 +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,SAAS;QACT,WAAW;QACX,QAAQ;QACR,cAAc;QACd,cAAc;QACd,YAAY;KACb;IACD,GAAG,EAAE,GAAG,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkLZ;CACA,CAAA"}

package/dist/surfaces/index.d.ts

@@ -0,0 +1,4 @@
+import type { SurfaceType, SurfaceConfig } from "./types.js";
+export declare const surfaces: Record<SurfaceType, SurfaceConfig>;
+export type { SurfaceType, SurfaceConfig } from "./types.js";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/surfaces/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAS5D,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,WAAW,EAAE,aAAa,CAQvD,CAAA;AAED,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA"}

package/dist/surfaces/index.js

@@ -0,0 +1,17 @@
+import { blank } from "./blank.js";
+import { canvas2d } from "./canvas-2d.js";
+import { scene3d } from "./3d-scene.js";
+import { animation } from "./animation.js";
+import { nodeEditor } from "./node-editor.js";
+import { dataVis } from "./data-vis.js";
+import { imageGen } from "./image-gen.js";
+export const surfaces = {
+    "canvas-2d": canvas2d,
+    "3d-scene": scene3d,
+    animation,
+    "node-editor": nodeEditor,
+    "data-vis": dataVis,
+    "image-gen": imageGen,
+    blank,
+};
+//# sourceMappingURL=index.js.map

package/dist/surfaces/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/surfaces/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAEzC,MAAM,CAAC,MAAM,QAAQ,GAAuC;IAC1D,WAAW,EAAE,QAAQ;IACrB,UAAU,EAAE,OAAO;IACnB,SAAS;IACT,aAAa,EAAE,UAAU;IACzB,UAAU,EAAE,OAAO;IACnB,WAAW,EAAE,QAAQ;IACrB,KAAK;CACN,CAAA"}

package/dist/surfaces/node-editor.d.ts

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

package/dist/surfaces/node-editor.d.ts.map

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

package/dist/surfaces/node-editor.js

@@ -0,0 +1,211 @@
+export const nodeEditor = {
+    components: [
+        "toolbar",
+        "panel",
+        "pane",
+        "node",
+        "number-input",
+        "colour-picker",
+        "status-bar",
+        "zoom-controls",
+        "command-palette",
+    ],
+    cssVars: `  /* Node port colours */
+  --node-port-number: oklch(0.7 0.15 250);
+  --node-port-string: oklch(0.7 0.15 150);
+  --node-port-boolean: oklch(0.7 0.15 30);
+  --node-port-colour: oklch(0.7 0.15 330);
+  --node-port-vector: oklch(0.7 0.15 200);
+  --node-port-image: oklch(0.7 0.15 100);
+  --node-port-any: oklch(0.6 0 0);`,
+    app: () => `import { useState, useCallback } 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 {
+  Node,
+  NodeHeader,
+  NodeTitle,
+  NodeContent,
+  NodePort,
+  NodeDivider,
+} from "@/components/substrate/node"
+import { NumberInput } from "@/components/substrate/number-input"
+import { ColourPicker } from "@/components/substrate/colour-picker"
+import { StatusBar, StatusBarSection, StatusBarItem } from "@/components/substrate/status-bar"
+import { ZoomControls } from "@/components/substrate/zoom-controls"
+import { RiCursorLine, RiHand } from "@remixicon/react"
+
+interface NodeData {
+  id: string
+  type: "math" | "colour"
+  label: string
+  x: number
+  y: number
+}
+
+const INITIAL_NODES: NodeData[] = [
+  { id: "math-1", type: "math", label: "Add", x: 80, y: 100 },
+  { id: "colour-1", type: "colour", label: "Mix Colour", x: 400, y: 80 },
+]
+
+function MathNode({ node, selected, onSelect }: { node: NodeData; selected: boolean; onSelect: () => void }) {
+  return (
+    <div
+      className="absolute"
+      style={{ left: node.x, top: node.y }}
+      onClick={onSelect}
+    >
+      <Node data-selected={selected || undefined}>
+        <NodeHeader>
+          <NodeTitle>{node.label}</NodeTitle>
+        </NodeHeader>
+        <NodeContent>
+          <NodePort type="number" direction="input" label="A" />
+          <NodePort type="number" direction="input" label="B" />
+          <NodeDivider />
+          <NodePort type="number" direction="output" label="Result" />
+        </NodeContent>
+      </Node>
+    </div>
+  )
+}
+
+function ColourNode({ node, selected, onSelect }: { node: NodeData; selected: boolean; onSelect: () => void }) {
+  return (
+    <div
+      className="absolute"
+      style={{ left: node.x, top: node.y }}
+      onClick={onSelect}
+    >
+      <Node data-selected={selected || undefined}>
+        <NodeHeader>
+          <NodeTitle>{node.label}</NodeTitle>
+        </NodeHeader>
+        <NodeContent>
+          <NodePort type="colour" direction="input" label="Colour A" />
+          <NodePort type="colour" direction="input" label="Colour B" />
+          <NodePort type="number" direction="input" label="Factor" />
+          <NodeDivider />
+          <NodePort type="colour" direction="output" label="Result" />
+        </NodeContent>
+      </Node>
+    </div>
+  )
+}
+
+export default function App() {
+  const [tool, setTool] = useState("select")
+  const [zoom, setZoom] = useState(1)
+  const [nodes] = useState(INITIAL_NODES)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+
+  const selected = nodes.find((n) => n.id === selectedId) ?? null
+
+  return (
+    <div className="flex h-screen flex-col bg-background text-foreground">
+      <div className="relative flex flex-1 overflow-hidden">
+        {/* Node canvas */}
+        <div
+          className="relative flex-1 bg-canvas"
+          style={{
+            backgroundImage: "radial-gradient(circle, hsl(0 0% 30%) 1px, transparent 1px)",
+            backgroundSize: \`\${20 * zoom}px \${20 * zoom}px\`,
+          }}
+          onClick={() => setSelectedId(null)}
+        >
+          <div style={{ transform: \`scale(\${zoom})\`, transformOrigin: "0 0" }}>
+            {nodes.map((node) =>
+              node.type === "math" ? (
+                <MathNode
+                  key={node.id}
+                  node={node}
+                  selected={node.id === selectedId}
+                  onSelect={() => setSelectedId(node.id)}
+                />
+              ) : (
+                <ColourNode
+                  key={node.id}
+                  node={node}
+                  selected={node.id === selectedId}
+                  onSelect={() => setSelectedId(node.id)}
+                />
+              )
+            )}
+
+            {/* Sample SVG wire between nodes */}
+            <svg className="pointer-events-none absolute inset-0 size-full">
+              <path
+                d="M 270 155 C 335 155, 335 135, 400 135"
+                fill="none"
+                stroke="hsl(0 0% 40%)"
+                strokeWidth={2}
+              />
+            </svg>
+          </div>
+        </div>
+
+        <Panel position="right">
+          {selected ? (
+            <Pane>
+              <PaneHeader>
+                <PaneLabel>{selected.label}</PaneLabel>
+              </PaneHeader>
+              <PaneContent>
+                <div className="grid grid-cols-2 gap-2">
+                  <NumberInput label="X" value={selected.x} />
+                  <NumberInput label="Y" value={selected.y} />
+                </div>
+              </PaneContent>
+            </Pane>
+          ) : (
+            <Pane>
+              <PaneContent>
+                <p className="text-sm text-muted-foreground">Click a node to inspect</p>
+              </PaneContent>
+            </Pane>
+          )}
+        </Panel>
+      </div>
+
+      <Toolbar>
+        <ToolbarToggleGroup value={tool} onValueChange={setTool}>
+          <ToolbarToggle value="select" tooltip="Select" shortcut="V">
+            <RiCursorLine className="size-4" />
+          </ToolbarToggle>
+          <ToolbarToggle value="hand" tooltip="Pan" shortcut="H">
+            <RiHand className="size-4" />
+          </ToolbarToggle>
+        </ToolbarToggleGroup>
+      </Toolbar>
+
+      <StatusBar>
+        <StatusBarSection>
+          <StatusBarItem label="Tool" value={tool} />
+          {selected && <StatusBarItem label="Node" value={selected.label} />}
+        </StatusBarSection>
+        <StatusBarSection>
+          <ZoomControls
+            zoom={zoom}
+            onZoomIn={() => setZoom((z) => Math.min(z * 1.25, 5))}
+            onZoomOut={() => setZoom((z) => Math.max(z / 1.25, 0.2))}
+            onReset={() => setZoom(1)}
+          />
+        </StatusBarSection>
+      </StatusBar>
+    </div>
+  )
+}
+`,
+};
+//# sourceMappingURL=node-editor.js.map

package/dist/surfaces/node-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"node-editor.js","sourceRoot":"","sources":["../../src/surfaces/node-editor.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,UAAU,GAAkB;IACvC,UAAU,EAAE;QACV,SAAS;QACT,OAAO;QACP,MAAM;QACN,MAAM;QACN,cAAc;QACd,eAAe;QACf,YAAY;QACZ,eAAe;QACf,iBAAiB;KAClB;IACD,OAAO,EAAE;;;;;;;mCAOwB;IACjC,GAAG,EAAE,GAAG,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4LZ;CACA,CAAA"}

package/dist/surfaces/types.d.ts

@@ -0,0 +1,22 @@
+export type SurfaceType = "canvas-2d" | "3d-scene" | "animation" | "node-editor" | "data-vis" | "image-gen" | "blank";
+export interface SurfaceOption {
+    value: SurfaceType;
+    label: string;
+    description: string;
+}
+export declare const SURFACE_OPTIONS: SurfaceOption[];
+export interface SurfaceConfig {
+    /** Registry components to install via shadcn */
+    components: string[];
+    /** Additional npm dependencies beyond the base */
+    extraDeps?: Record<string, string>;
+    /** Additional npm devDependencies */
+    extraDevDeps?: Record<string, string>;
+    /** Extra CSS variable block appended to globals.css */
+    cssVars?: string;
+    /** The main App.tsx content */
+    app: () => string;
+    /** Additional files to write (path relative to project root → content) */
+    files?: Record<string, () => string>;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/surfaces/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GACnB,WAAW,GACX,UAAU,GACV,WAAW,GACX,aAAa,GACb,UAAU,GACV,WAAW,GACX,OAAO,CAAA;AAEX,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,WAAW,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;CACpB;AAED,eAAO,MAAM,eAAe,EAAE,aAAa,EAQ1C,CAAA;AAED,MAAM,WAAW,aAAa;IAC5B,gDAAgD;IAChD,UAAU,EAAE,MAAM,EAAE,CAAA;IACpB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAClC,qCAAqC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACrC,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,+BAA+B;IAC/B,GAAG,EAAE,MAAM,MAAM,CAAA;IACjB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,MAAM,CAAC,CAAA;CACrC"}

package/dist/surfaces/types.js

@@ -0,0 +1,10 @@
+export const SURFACE_OPTIONS = [
+    { value: "canvas-2d", label: "2D canvas", description: "Shape editors, whiteboards, diagram tools" },
+    { value: "3d-scene", label: "3D scene", description: "Product viewers, architectural tools, shader playgrounds" },
+    { value: "animation", label: "Animation", description: "Keyframe editors, motion graphics, easing explorers" },
+    { value: "node-editor", label: "Node editor", description: "Visual programming, shader graphs, data pipelines" },
+    { value: "data-vis", label: "Data vis", description: "Charts, dashboards, analytics explorers" },
+    { value: "image-gen", label: "Image generation", description: "AI image tools, prompt-driven workflows" },
+    { value: "blank", label: "Blank", description: "Scaffold only — bring your own surface" },
+];
+//# sourceMappingURL=types.js.map