@dfosco/storyboard-core 4.2.0-beta.2 → 4.2.0-beta.21

package/src/workshop/features/createPrototype/server.js

@@ -330,6 +330,104 @@ export function createPrototypesHandler(ctx) {
       return
     }
 
+    // DELETE /prototypes — delete a prototype directory
+    if (routePath === '/prototypes' && method === 'DELETE') {
+      const { name, folder } = body
+
+      if (!name || typeof name !== 'string') {
+        sendJson(res, 400, { error: 'Prototype name is required' })
+        return
+      }
+
+      const prototypesDir = path.join(root, 'src', 'prototypes')
+      let targetDir
+
+      if (folder) {
+        targetDir = path.join(prototypesDir, `${folder}.folder`, name)
+        if (!fs.existsSync(targetDir)) {
+          targetDir = path.join(prototypesDir, folder, name)
+        }
+      } else {
+        targetDir = path.join(prototypesDir, name)
+      }
+
+      if (!fs.existsSync(targetDir)) {
+        sendJson(res, 404, { error: `Prototype "${name}" not found` })
+        return
+      }
+
+      // Safety: verify it's actually inside src/prototypes/
+      const resolved = path.resolve(targetDir)
+      if (!resolved.startsWith(path.resolve(prototypesDir))) {
+        sendJson(res, 400, { error: 'Invalid path' })
+        return
+      }
+
+      try {
+        fs.rmSync(targetDir, { recursive: true, force: true })
+        sendJson(res, 200, { success: true, deleted: name })
+      } catch (err) {
+        sendJson(res, 500, { error: `Failed to delete prototype: ${err.message}` })
+      }
+      return
+    }
+
+    // PUT /prototypes — update prototype metadata
+    if (routePath === '/prototypes' && method === 'PUT') {
+      const { name, folder, title, description, author } = body
+
+      if (!name || typeof name !== 'string') {
+        sendJson(res, 400, { error: 'Prototype name is required' })
+        return
+      }
+
+      const prototypesDir = path.join(root, 'src', 'prototypes')
+      let targetDir
+
+      if (folder) {
+        targetDir = path.join(prototypesDir, `${folder}.folder`, name)
+        if (!fs.existsSync(targetDir)) {
+          targetDir = path.join(prototypesDir, folder, name)
+        }
+      } else {
+        targetDir = path.join(prototypesDir, name)
+      }
+
+      if (!fs.existsSync(targetDir)) {
+        sendJson(res, 404, { error: `Prototype "${name}" not found` })
+        return
+      }
+
+      // Find the .prototype.json file
+      const files = fs.readdirSync(targetDir)
+      const protoJsonFile = files.find(f => f.endsWith('.prototype.json'))
+
+      if (!protoJsonFile) {
+        sendJson(res, 404, { error: `No .prototype.json file found in "${name}"` })
+        return
+      }
+
+      try {
+        const protoJsonPath = path.join(targetDir, protoJsonFile)
+        const json = JSON.parse(fs.readFileSync(protoJsonPath, 'utf-8'))
+
+        if (!json.meta) json.meta = {}
+        if (title !== undefined) json.meta.title = title
+        if (description !== undefined) json.meta.description = description
+        if (author !== undefined) {
+          json.meta.author = typeof author === 'string'
+            ? author.split(',').map(a => a.trim()).filter(Boolean)
+            : author
+        }
+
+        fs.writeFileSync(protoJsonPath, JSON.stringify(json, null, 2) + '\n', 'utf-8')
+        sendJson(res, 200, { success: true, updated: name })
+      } catch (err) {
+        sendJson(res, 500, { error: `Failed to update prototype metadata: ${err.message}` })
+      }
+      return
+    }
+
     // Unmatched routes fall through — the server plugin compositor handles 404
   }
 }

package/src/workshop/features/createStory/CreateStoryForm.jsx

@@ -0,0 +1,208 @@
+import { useState, useMemo, useEffect } from 'react'
+import { Button } from '../../../lib/components/ui/button/index.js'
+import { Input } from '../../../lib/components/ui/input/index.js'
+import { Label } from '../../../lib/components/ui/label/index.js'
+import * as Panel from '../../../lib/components/ui/panel/index.js'
+import * as Alert from '../../../lib/components/ui/alert/index.js'
+
+const STORY_SUCCESS_KEY = 'sb-story-created'
+
+function getApiUrl() {
+  const basePath = window.__STORYBOARD_BASE_PATH__ || '/'
+  return basePath.replace(/\/$/, '') + '/_storyboard/canvas'
+}
+
+export default function CreateStoryForm({ onClose }) {
+  const [name, setName] = useState('')
+  const [location, setLocation] = useState('canvas')
+  const [format, setFormat] = useState('jsx')
+  const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState(null)
+  const [success, setSuccess] = useState(null)
+  const [createdPath, setCreatedPath] = useState(null)
+  const [canvasId, setCanvasId] = useState('')
+
+  const kebabName = useMemo(
+    () => name.replace(/[^a-zA-Z0-9\s_-]/g, '').trim().replace(/[\s_]+/g, '-').toLowerCase().replace(/-+/g, '-').replace(/^-|-$/g, ''),
+    [name]
+  )
+
+  const nameError = useMemo(() => {
+    if (name.trim() && !kebabName) return 'Name must contain at least one alphanumeric character'
+    if (name.trim() && !/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(kebabName)) return 'Name must be kebab-case'
+    return null
+  }, [name, kebabName])
+
+  const filePreview = kebabName ? `${kebabName}.story.${format}` : ''
+  const canSubmit = !!kebabName && !nameError && !submitting
+
+  useEffect(() => {
+    try {
+      const bridgeState = window.__storyboardCanvasBridgeState
+      if (bridgeState?.canvasId) setCanvasId(bridgeState.canvasId)
+      else if (bridgeState?.name) setCanvasId(bridgeState.name)
+    } catch {}
+
+    try {
+      const saved = sessionStorage.getItem(STORY_SUCCESS_KEY)
+      if (saved) {
+        const parsed = JSON.parse(saved)
+        setSuccess(parsed.success)
+        setCreatedPath(parsed.path)
+        sessionStorage.removeItem(STORY_SUCCESS_KEY)
+      }
+    } catch {}
+  }, [])
+
+  async function submit() {
+    if (!canSubmit) return
+    setSubmitting(true)
+    setError(null)
+    setSuccess(null)
+    setCreatedPath(null)
+    try {
+      const res = await fetch(getApiUrl() + '/create-story', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: kebabName,
+          location,
+          format,
+          canvasName: location === 'canvas' ? canvasId : undefined,
+        }),
+      })
+      const data = await res.json()
+      if (!res.ok) { setError(data.error || 'Failed to create story'); return }
+      setSuccess(`Created ${data.path}`)
+      setCreatedPath(data.path)
+      try {
+        sessionStorage.setItem(STORY_SUCCESS_KEY, JSON.stringify({
+          success: `Created ${data.name}.story.${format}`,
+          path: data.path,
+        }))
+      } catch {}
+    } catch (err) {
+      setError(err.message || 'Network error')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  function handleKeydown(e) {
+    if (e.key === 'Enter' && canSubmit) submit()
+  }
+
+  return (
+    <>
+      <Panel.Header>
+        <Panel.Title>Create story</Panel.Title>
+        <Panel.Close />
+      </Panel.Header>
+
+      <div className="p-4 pt-2 space-y-3" onKeyDown={handleKeydown}>
+        <div className="space-y-1">
+          <Label htmlFor="sb-story-name">Component name</Label>
+          <Input
+            id="sb-story-name"
+            placeholder="e.g. user-card"
+            autoComplete="off"
+            spellCheck={false}
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+          />
+          {nameError && <p className="text-sm text-destructive">{nameError}</p>}
+          {filePreview && (
+            <p className="text-xs text-muted-foreground">
+              File: <code className="px-1 py-0.5 bg-muted rounded font-mono text-foreground text-xs">{filePreview}</code>
+            </p>
+          )}
+        </div>
+
+        <fieldset className="space-y-1.5">
+          <Label>Location</Label>
+          <div className="flex flex-col gap-1.5">
+            <label className="flex items-center gap-2 text-sm cursor-pointer">
+              <input
+                type="radio"
+                name="sb-story-location"
+                value="canvas"
+                checked={location === 'canvas'}
+                onChange={() => setLocation('canvas')}
+                className="accent-primary"
+              />
+              This canvas directory
+            </label>
+            <label className="flex items-center gap-2 text-sm cursor-pointer">
+              <input
+                type="radio"
+                name="sb-story-location"
+                value="components"
+                checked={location === 'components'}
+                onChange={() => setLocation('components')}
+                className="accent-primary"
+              />
+              <code className="text-xs bg-muted px-1 py-0.5 rounded">src/components/</code>
+            </label>
+          </div>
+        </fieldset>
+
+        <fieldset className="space-y-1.5">
+          <Label>Format</Label>
+          <div className="flex gap-3">
+            <label className="flex items-center gap-2 text-sm cursor-pointer">
+              <input
+                type="radio"
+                name="sb-story-format"
+                value="jsx"
+                checked={format === 'jsx'}
+                onChange={() => setFormat('jsx')}
+                className="accent-primary"
+              />
+              JSX
+            </label>
+            <label className="flex items-center gap-2 text-sm cursor-pointer">
+              <input
+                type="radio"
+                name="sb-story-format"
+                value="tsx"
+                checked={format === 'tsx'}
+                onChange={() => setFormat('tsx')}
+                className="accent-primary"
+              />
+              TSX
+            </label>
+          </div>
+        </fieldset>
+
+        {error && (
+          <Alert.Root variant="destructive">
+            <Alert.Description>{error}</Alert.Description>
+          </Alert.Root>
+        )}
+        {success && (
+          <Alert.Root>
+            <Alert.Description className="text-success">
+              {success}
+              {createdPath && (
+                <>
+                  <br />
+                  <span className="text-xs text-muted-foreground">
+                    To edit your component, go to{' '}
+                    <code className="px-1 py-0.5 bg-muted rounded font-mono text-xs">{createdPath}</code>
+                  </span>
+                </>
+              )}
+            </Alert.Description>
+          </Alert.Root>
+        )}
+      </div>
+
+      <Panel.Footer>
+        <Button variant="outline" onClick={onClose}>Cancel</Button>
+        <Button onClick={submit} disabled={!canSubmit}>
+          {submitting ? 'Creating\u2026' : 'Create'}
+        </Button>
+      </Panel.Footer>
+    </>
+  )
+}

package/src/workshop/features/createStory/index.js

@@ -5,7 +5,7 @@
  * This feature provides the workshop UI overlay.
  */
 
-import CreateStoryForm from './CreateStoryForm.svelte'
+import CreateStoryForm from './CreateStoryForm.jsx'
 
 export const name = 'createStory'
 export const label = 'Create story'

package/src/workshop/ui/WorkshopPanel.jsx

@@ -0,0 +1,98 @@
+import { useState, useMemo, useEffect, useCallback } from 'react'
+
+export default function WorkshopPanel({ features = [] }) {
+  const [menuOpen, setMenuOpen] = useState(false)
+  const [activeOverlay, setActiveOverlay] = useState(null)
+  const [visible, setVisible] = useState(true)
+
+  const activeFeature = useMemo(
+    () => (activeOverlay ? features.find((f) => f.overlayId === activeOverlay) ?? null : null),
+    [activeOverlay, features]
+  )
+
+  const showOverlay = useCallback((id) => {
+    setActiveOverlay(id)
+    setMenuOpen(false)
+  }, [])
+
+  const closeOverlay = useCallback(() => setActiveOverlay(null), [])
+
+  const handleKeydown = useCallback(
+    (e) => {
+      if (e.key === '.' && (e.metaKey || e.ctrlKey)) {
+        setVisible((v) => !v)
+        return
+      }
+      if (e.key === 'Escape') {
+        setActiveOverlay((cur) => {
+          if (cur) return null
+          setMenuOpen(false)
+          return cur
+        })
+      }
+    },
+    []
+  )
+
+  const handleClickOutside = useCallback((e) => {
+    if (!e.target.closest('[data-workshop-panel]')) {
+      setMenuOpen(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    window.addEventListener('keydown', handleKeydown)
+    document.addEventListener('click', handleClickOutside)
+    return () => {
+      window.removeEventListener('keydown', handleKeydown)
+      document.removeEventListener('click', handleClickOutside)
+    }
+  }, [handleKeydown, handleClickOutside])
+
+  if (!visible) return null
+
+  const ActiveOverlay = activeFeature?.overlay
+
+  return (
+    <div data-workshop-panel className="fixed bottom-6 right-[76px] z-[9999] font-sans">
+      <button
+        className="flex items-center p-3 bg-popover text-muted-foreground border border-border rounded-full cursor-pointer shadow-lg hover:scale-105 active:scale-95 transition-transform select-none"
+        aria-label="Workshop"
+        onClick={() => setMenuOpen((o) => !o)}
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
+          <path d="M5.433 2.304A4.494 4.494 0 0 0 3.5 6c0 1.598.832 3.002 2.09 3.802.518.328.929.923.902 1.64v.008l-.164 3.337a.75.75 0 1 1-1.498-.073l.163-3.34c.007-.14-.1-.313-.36-.465A5.986 5.986 0 0 1 2 6a5.994 5.994 0 0 1 2.567-4.92 1.482 1.482 0 0 1 1.673-.04c.462.296.76.827.76 1.423v2.076c0 .332.214.572.491.572.268 0 .492-.24.492-.572V2.463c0-.596.298-1.127.76-1.423a1.482 1.482 0 0 1 1.673.04A5.994 5.994 0 0 1 13 6a5.986 5.986 0 0 1-2.633 4.909c-.26.152-.367.325-.36.465l.164 3.34a.75.75 0 1 1-1.498.073l-.164-3.337v-.008c-.027-.717.384-1.312.902-1.64A4.494 4.494 0 0 0 11.5 6a4.494 4.494 0 0 0-1.933-3.696c-.024.017-.067.067-.067.159v2.076c0 1.074-.84 2.072-1.991 2.072-1.161 0-2.009-.998-2.009-2.072V2.463c0-.092-.043-.142-.067-.16Z" />
+        </svg>
+      </button>
+
+      {menuOpen && (
+        <div className="absolute bottom-14 right-0 min-w-[200px] bg-popover text-popover-foreground border border-border rounded-xl shadow-lg overflow-hidden">
+          <div className="px-4 pt-2 pb-1 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">Workshop</div>
+          <div className="h-px bg-border" />
+          {features.map((f) => (
+            <button
+              key={f.overlayId}
+              className="flex items-center gap-2 w-full px-4 py-2 text-sm bg-transparent border-none cursor-pointer text-left hover:bg-accent transition-colors"
+              onClick={() => showOverlay(f.overlayId)}
+            >
+              <span className="text-sm">{f.icon || ''}</span> {f.label}
+            </button>
+          ))}
+          <div className="h-px bg-border" />
+          <div className="px-4 py-1.5 text-[11px] text-muted-foreground">Dev-only tools</div>
+        </div>
+      )}
+
+      {ActiveOverlay && (
+        <div
+          className="fixed inset-0 z-[10000] flex items-center justify-center bg-black/50"
+          onClick={(e) => { if (e.target === e.currentTarget) closeOverlay() }}
+        >
+          <div className="w-full max-w-[480px]">
+            <ActiveOverlay onClose={closeOverlay} />
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/workshop/ui/mount.ts

@@ -8,7 +8,7 @@
  */
 
 import { mountSveltePlugin, type PluginHandle } from '../../svelte-plugin-ui/mount.js'
-import WorkshopPanel from './WorkshopPanel.svelte'
+import WorkshopPanel from './WorkshopPanel.jsx'
 import { features as allFeatures } from '../features/registry.js'
 import '../../../dist/tailwind.css'
 

package/src/worktree/port.js

@@ -14,6 +14,7 @@
 import { readFileSync, writeFileSync, existsSync, mkdirSync, readdirSync, realpathSync } from 'fs'
 import { join, dirname, basename } from 'path'
 import { execSync } from 'child_process'
+import { findByWorktree } from './serverRegistry.js'
 
 const BASE_PORT = 1234
 
@@ -130,6 +131,53 @@ export function getPort(worktreeName) {
   return ports[worktreeName]
 }
 
+/**
+ * Release a port assignment for a worktree.
+ *
+ * Removes the entry from ports.json so the port can be reused.
+ * Never removes 'main'.
+ *
+ * @param {string} worktreeName
+ */
+export function releasePort(worktreeName) {
+  if (worktreeName === 'main') return
+
+  const portsFile = portsFilePath()
+  if (!existsSync(portsFile)) return
+
+  try {
+    const ports = JSON.parse(readFileSync(portsFile, 'utf8'))
+    if (!(worktreeName in ports)) return
+    delete ports[worktreeName]
+    writeFileSync(portsFile, JSON.stringify(ports, null, 2) + '\n')
+  } catch { /* ignore corrupt file */ }
+}
+
+/**
+ * Resolve the port for a running dev server.
+ *
+ * Checks the server registry (servers.json) first for a live process,
+ * then falls back to ports.json assignment. Use this when connecting
+ * to an already-running server — it returns the real bound port even
+ * when Vite rebinds to a different port than originally assigned.
+ *
+ * @param {string} worktreeName
+ * @returns {number}
+ */
+export function resolveRunningPort(worktreeName) {
+  try {
+    const servers = findByWorktree(worktreeName)
+    if (servers.length > 0) {
+      const latest = servers.reduce((a, b) =>
+        (a.startedAt || '') >= (b.startedAt || '') ? a : b
+      )
+      return latest.port
+    }
+  } catch { /* registry unavailable */ }
+
+  return resolvePort(worktreeName)
+}
+
 /**
  * Resolve the port for a worktree from .worktrees/ports.json
  * without assigning a new one if missing.

package/src/worktree/serverRegistry.js

@@ -0,0 +1,120 @@
+/**
+ * Server Registry — tracks running dev servers in .storyboard/servers.json.
+ *
+ * Each server gets a unique hex ID. The registry is pruned on every read
+ * to remove entries whose PIDs are no longer alive.
+ */
+
+import { randomBytes } from 'crypto'
+import { readFileSync, writeFileSync, existsSync, mkdirSync, renameSync } from 'fs'
+import { join, dirname } from 'path'
+import { repoRoot } from './port.js'
+
+/**
+ * Absolute path to .storyboard/servers.json.
+ */
+export function registryPath(cwd) {
+  return join(repoRoot(cwd), '.storyboard', 'servers.json')
+}
+
+/**
+ * Generate a short unique hex ID (6 chars).
+ */
+export function generateId() {
+  return randomBytes(3).toString('hex')
+}
+
+/**
+ * Check whether a PID is alive.
+ */
+function isAlive(pid) {
+  try {
+    process.kill(pid, 0)
+    return true
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Read the registry file. Returns an object keyed by server ID.
+ */
+function readRegistry(cwd) {
+  const file = registryPath(cwd)
+  if (!existsSync(file)) return {}
+  try {
+    const data = JSON.parse(readFileSync(file, 'utf8'))
+    return data.servers || {}
+  } catch {
+    return {}
+  }
+}
+
+/**
+ * Write the registry atomically (write tmp then rename).
+ */
+function writeRegistry(servers, cwd) {
+  const file = registryPath(cwd)
+  const dir = dirname(file)
+  if (!existsSync(dir)) mkdirSync(dir, { recursive: true })
+  const tmp = file + '.tmp'
+  writeFileSync(tmp, JSON.stringify({ servers }, null, 2) + '\n')
+  renameSync(tmp, file)
+}
+
+/**
+ * Remove entries whose PIDs are dead.
+ * @returns {object} pruned servers map
+ */
+export function prune(cwd) {
+  const servers = readRegistry(cwd)
+  const alive = {}
+  for (const [id, entry] of Object.entries(servers)) {
+    if (isAlive(entry.pid)) {
+      alive[id] = entry
+    }
+  }
+  writeRegistry(alive, cwd)
+  return alive
+}
+
+/**
+ * Register a new server entry.
+ */
+export function register({ id, worktree, pid, port, background = false }, cwd) {
+  const servers = prune(cwd)
+  servers[id] = { id, worktree, pid, port, background, startedAt: new Date().toISOString() }
+  writeRegistry(servers, cwd)
+  return servers[id]
+}
+
+/**
+ * Unregister a server by ID.
+ */
+export function unregister(id, cwd) {
+  const servers = readRegistry(cwd)
+  delete servers[id]
+  writeRegistry(servers, cwd)
+}
+
+/**
+ * List all live servers (prunes dead ones first).
+ */
+export function list(cwd) {
+  return Object.values(prune(cwd))
+}
+
+/**
+ * Find servers running for a given worktree name.
+ */
+export function findByWorktree(name, cwd) {
+  return list(cwd).filter((s) => s.worktree === name)
+}
+
+/**
+ * Find a server by its unique ID.
+ */
+export function findById(id, cwd) {
+  const servers = prune(cwd)
+  return servers[id] || null
+}