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

package/src/cli/canvasAdd.js

@@ -0,0 +1,185 @@
+/**
+ * storyboard canvas add <widget-type> — Add a widget to an existing canvas.
+ *
+ * Usage:
+ *   storyboard canvas add sticky-note --canvas my-canvas
+ *   storyboard canvas add markdown --canvas my-canvas --x 100 --y 200
+ *   storyboard canvas add prototype --canvas my-canvas --props '{"src":"my-proto"}'
+ *
+ * Known widget types: sticky-note, markdown, prototype
+ * The server accepts any type string — new widget types work automatically.
+ */
+
+import * as p from '@clack/prompts'
+import { parseFlags, hasFlags, formatFlagHelp } from './flags.js'
+import { widgetSchema } from './schemas.js'
+import { ensureDevServer, serverPost, getServerUrl } from './create.js'
+
+const KNOWN_TYPES = ['sticky-note', 'markdown', 'prototype', 'story']
+
+async function canvasAdd() {
+  // argv: storyboard canvas add [type] [--flags]
+  // process.argv: [node, script, 'canvas', 'add', ...rest]
+  const rest = process.argv.slice(4)
+
+  if (rest.includes('--help') || rest.includes('-h')) {
+    console.log(`\n  canvas add flags:\n`)
+    console.log(`  Positional: <widget-type>  Widget type (${KNOWN_TYPES.join(', ')})\n`)
+    console.log(formatFlagHelp(widgetSchema))
+    console.log('')
+    process.exit(0)
+  }
+
+  // Extract positional widget type (first non-flag arg)
+  let widgetType = ''
+  const flagTokens = []
+  for (const token of rest) {
+    if (!widgetType && !token.startsWith('-')) {
+      widgetType = token
+    } else {
+      flagTokens.push(token)
+    }
+  }
+
+  const flagMode = hasFlags(rest) || Boolean(widgetType)
+  const { flags, errors } = flagMode ? parseFlags(flagTokens, widgetSchema) : { flags: {}, errors: [] }
+
+  if (errors.length) {
+    for (const e of errors) p.log.error(e)
+    process.exit(1)
+  }
+
+  p.intro('storyboard canvas add')
+  await ensureDevServer()
+
+  // Widget type
+  if (!widgetType) {
+    widgetType = await p.select({
+      message: 'Widget type',
+      options: KNOWN_TYPES.map((t) => ({ value: t, label: t })),
+    })
+    if (p.isCancel(widgetType)) return process.exit(0)
+  }
+
+  // Canvas name
+  const canvasName = flags.canvas || await (async () => {
+    // Try to fetch available canvases
+    let canvases = []
+    try {
+      const base = getServerUrl()
+      const res = await fetch(`${base}/_storyboard/canvas/list`)
+      if (res.ok) {
+        const data = await res.json()
+        canvases = data.canvases || data || []
+      }
+    } catch {}
+
+    if (canvases.length > 0) {
+      const choice = await p.select({
+        message: 'Canvas',
+        options: canvases.map((c) => ({ value: c.name || c, label: c.name || c })),
+      })
+      if (p.isCancel(choice)) process.exit(0)
+      return choice
+    }
+
+    const v = await p.text({
+      message: 'Canvas name',
+      placeholder: 'my-canvas',
+      validate: (v) => { if (!v) return 'Canvas name is required' },
+    })
+    if (p.isCancel(v)) process.exit(0)
+    return v
+  })()
+
+  const x = flags.x ?? 0
+  const y = flags.y ?? 0
+
+  let props = {}
+  if (flags.props) {
+    try {
+      props = JSON.parse(flags.props)
+    } catch {
+      p.log.error('--props must be valid JSON')
+      process.exit(1)
+    }
+  }
+
+  // Story-specific: prompt for storyId and exportName if not in --props
+  if (widgetType === 'story' && !props.storyId) {
+    // Try to fetch available stories from the dev server
+    let stories = []
+    try {
+      const base = getServerUrl()
+      const res = await fetch(`${base}/_storyboard/stories/list`)
+      if (res.ok) {
+        const data = await res.json()
+        stories = data.stories || []
+      }
+    } catch {}
+
+    if (stories.length > 0) {
+      const storyId = await (async () => {
+        const choice = await p.select({
+          message: 'Story',
+          options: stories.map((s) => ({ value: s.name, label: s.name, hint: s.route || '' })),
+        })
+        if (p.isCancel(choice)) process.exit(0)
+        return choice
+      })()
+      props.storyId = storyId
+    } else {
+      const storyId = await (async () => {
+        const v = await p.text({
+          message: 'Story ID',
+          placeholder: 'button-patterns',
+          validate: (v) => { if (!v) return 'Story ID is required' },
+        })
+        if (p.isCancel(v)) process.exit(0)
+        return v
+      })()
+      props.storyId = storyId
+    }
+
+    if (!props.exportName) {
+      const exportName = await (async () => {
+        const v = await p.text({
+          message: 'Export name (leave empty for all)',
+          placeholder: 'Default',
+        })
+        if (p.isCancel(v)) process.exit(0)
+        return v
+      })()
+      if (exportName) props.exportName = exportName
+    }
+
+    if (!props.width) props.width = 600
+    if (!props.height) props.height = 400
+  }
+
+  // Submit
+  const s = p.spinner()
+  s.start(`Adding ${widgetType} widget...`)
+
+  try {
+    const result = await serverPost('/_storyboard/canvas/widget', {
+      name: canvasName,
+      type: widgetType,
+      props,
+      position: { x, y },
+    })
+    s.stop(`Widget added!`)
+    if (result.id) {
+      p.log.success(`  ${widgetType} → ${canvasName} (id: ${result.id})`)
+    } else {
+      p.log.success(`  ${widgetType} → ${canvasName}`)
+    }
+    p.outro('')
+  } catch (err) {
+    s.stop('Failed to add widget')
+    p.log.error(err.message)
+    p.outro('')
+  }
+}
+
+canvasAdd()

package/src/cli/canvasRead.js

@@ -0,0 +1,208 @@
+/**
+ * storyboard canvas read — Read canvas state and list widgets with their IDs, URLs, and content.
+ *
+ * Usage:
+ *   storyboard canvas read my-canvas             List all widgets
+ *   storyboard canvas read my-canvas --json      Output as JSON
+ *   storyboard canvas read my-canvas --id abc    Get a specific widget by ID
+ *
+ * Output includes:
+ *   - Widget ID
+ *   - Widget type
+ *   - Position (x, y)
+ *   - Content (text, url, src depending on type)
+ *   - File path (for images)
+ */
+
+import * as p from '@clack/prompts'
+import { getServerUrl } from './serverUrl.js'
+
+const dim = (s) => `\x1b[2m${s}\x1b[0m`
+const bold = (s) => `\x1b[1m${s}\x1b[0m`
+const cyan = (s) => `\x1b[36m${s}\x1b[0m`
+
+async function checkServer() {
+  try {
+    await fetch(getServerUrl(), { signal: AbortSignal.timeout(2000) })
+    return true
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Extract the primary content from a widget based on its type.
+ */
+function getWidgetContent(widget) {
+  const { type, props = {} } = widget
+  switch (type) {
+    case 'sticky-note':
+      return { content: props.text || '', contentType: 'text' }
+    case 'markdown':
+      return { content: props.content || '', contentType: 'markdown' }
+    case 'prototype':
+      return { content: props.src || '', contentType: 'url', url: props.src }
+    case 'figma-embed':
+      return { content: props.url || '', contentType: 'url', url: props.url }
+    case 'link-preview':
+      return { content: props.url || '', contentType: 'url', url: props.url }
+    case 'image':
+      return {
+        content: props.src || '',
+        contentType: 'image',
+        url: props.src ? `/_storyboard/canvas/images/${props.src}` : '',
+        filePath: props.src ? `assets/canvas/images/${props.src}` : '',
+      }
+    default:
+      return { content: JSON.stringify(props), contentType: 'props' }
+  }
+}
+
+/**
+ * Format a widget for human-readable output.
+ */
+function formatWidget(widget) {
+  const { id, type, position = {} } = widget
+  const { content, contentType, url, filePath } = getWidgetContent(widget)
+
+  const lines = []
+  lines.push(`${bold(id)} ${dim(`(${type})`)}`)
+  lines.push(`  Position: ${position.x ?? 0}, ${position.y ?? 0}`)
+
+  if (contentType === 'image') {
+    lines.push(`  File: ${cyan(filePath)}`)
+    if (content) lines.push(`  Filename: ${content}`)
+  } else if (contentType === 'url') {
+    lines.push(`  URL: ${cyan(url || content)}`)
+  } else if (content) {
+    const preview = content.length > 80 ? content.slice(0, 77) + '...' : content
+    lines.push(`  Content: ${preview}`)
+  }
+
+  return lines.join('\n')
+}
+
+async function canvasRead() {
+  const args = process.argv.slice(4)
+
+  if (args.includes('--help') || args.includes('-h')) {
+    console.log(`
+  canvas read — Read canvas state and list widgets
+
+  Usage:
+    storyboard canvas read <canvas-name>          List all widgets
+    storyboard canvas read <canvas-name> --json   Output as JSON
+    storyboard canvas read <canvas-name> --id <widget-id>  Get specific widget
+
+  Output includes widget ID, type, position, content, URLs, and file paths.
+`)
+    process.exit(0)
+  }
+
+  // Parse args
+  let canvasName = ''
+  let outputJson = false
+  let widgetId = ''
+
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i]
+    if (arg === '--json') {
+      outputJson = true
+    } else if (arg === '--id' && args[i + 1]) {
+      widgetId = args[++i]
+    } else if (!arg.startsWith('-') && !canvasName) {
+      canvasName = arg
+    }
+  }
+
+  // Check server
+  const serverUp = await checkServer()
+  if (!serverUp) {
+    p.log.error('Dev server is not running. Start it with: storyboard dev')
+    process.exit(1)
+  }
+
+  const base = getServerUrl()
+
+  // If no canvas name, list available canvases
+  if (!canvasName) {
+    try {
+      const res = await fetch(`${base}/_storyboard/canvas/list`)
+      if (!res.ok) throw new Error(`${res.status} ${res.statusText}`)
+      const data = await res.json()
+      const canvases = data.canvases || []
+
+      if (outputJson) {
+        console.log(JSON.stringify(canvases, null, 2))
+      } else {
+        if (canvases.length === 0) {
+          p.log.info('No canvases found')
+        } else {
+          console.log('\nAvailable canvases:\n')
+          for (const c of canvases) {
+            console.log(`  ${bold(c.name)} ${dim(`(${c.widgetCount} widgets)`)}`)
+          }
+          console.log('')
+        }
+      }
+    } catch (err) {
+      p.log.error(`Failed to list canvases: ${err.message}`)
+      process.exit(1)
+    }
+    return
+  }
+
+  // Read canvas state
+  try {
+    let url = `${base}/_storyboard/canvas/read?name=${encodeURIComponent(canvasName)}`
+    if (widgetId) url += `&widget=${encodeURIComponent(widgetId)}`
+    const res = await fetch(url)
+    if (!res.ok) {
+      const text = await res.text().catch(() => '')
+      throw new Error(`${res.status} ${res.statusText}${text ? ': ' + text : ''}`)
+    }
+    const data = await res.json()
+    const widgets = data.widgets || []
+
+    // If filtering by widget ID
+    if (widgetId) {
+      const widget = widgets[0]
+      if (!widget) {
+        p.log.error(`Widget "${widgetId}" not found in canvas "${canvasName}"`)
+        process.exit(1)
+      }
+
+      if (outputJson) {
+        const enriched = { ...widget, ...getWidgetContent(widget) }
+        console.log(JSON.stringify(enriched, null, 2))
+      } else {
+        console.log('')
+        console.log(formatWidget(widget))
+        console.log('')
+      }
+      return
+    }
+
+    // List all widgets
+    if (outputJson) {
+      const enriched = widgets.map((w) => ({ ...w, ...getWidgetContent(w) }))
+      console.log(JSON.stringify({ ...data, widgets: enriched }, null, 2))
+    } else {
+      console.log(`\n${bold(data.title || canvasName)} ${dim(`(${widgets.length} widgets)`)}\n`)
+
+      if (widgets.length === 0) {
+        console.log('  No widgets on this canvas.\n')
+      } else {
+        for (const widget of widgets) {
+          console.log(formatWidget(widget))
+          console.log('')
+        }
+      }
+    }
+  } catch (err) {
+    p.log.error(`Failed to read canvas: ${err.message}`)
+    process.exit(1)
+  }
+}
+
+canvasRead()

package/src/cli/code.js

@@ -0,0 +1,67 @@
+/**
+ * storyboard code [branch] — Open a worktree in VS Code.
+ *
+ * Usage:
+ *   storyboard code              # open current worktree or repo root
+ *   storyboard code main         # open repo root
+ *   storyboard code <branch>     # open .worktrees/<branch>/
+ */
+
+import * as p from '@clack/prompts'
+import { execFileSync } from 'child_process'
+import { existsSync } from 'fs'
+import { resolve } from 'path'
+import { detectWorktreeName, repoRoot, worktreeDir, listWorktrees } from '../worktree/port.js'
+
+const branch = process.argv[3] || undefined
+
+p.intro('storyboard code')
+
+function openInCode(dir) {
+  try {
+    execFileSync('code', [dir], { stdio: 'inherit' })
+    return true
+  } catch {
+    return false
+  }
+}
+
+const root = repoRoot()
+
+if (!branch) {
+  // No argument — open current directory
+  const name = detectWorktreeName()
+  const dir = name === 'main' ? root : worktreeDir(name)
+  if (openInCode(dir)) {
+    p.outro(`Opened ${name === 'main' ? 'repo root' : `.worktrees/${name}/`}`)
+  } else {
+    p.log.error('Could not open VS Code. Is the `code` CLI installed?')
+    p.log.info('Run `npx storyboard setup` to install it, or open VS Code and run:')
+    p.log.info('  Cmd+Shift+P → "Shell Command: Install \'code\' command in PATH"')
+    process.exit(1)
+  }
+} else if (branch === 'main') {
+  if (openInCode(root)) {
+    p.outro('Opened repo root')
+  } else {
+    p.log.error('Could not open VS Code.')
+    process.exit(1)
+  }
+} else {
+  const dir = worktreeDir(branch)
+  if (!existsSync(resolve(dir, '.git'))) {
+    // List available worktrees as a hint
+    const available = listWorktrees()
+    p.log.error(`Worktree "${branch}" does not exist.`)
+    if (available.length > 0) {
+      p.log.info(`Available worktrees: ${available.join(', ')}`)
+    }
+    process.exit(1)
+  }
+  if (openInCode(dir)) {
+    p.outro(`Opened .worktrees/${branch}/`)
+  } else {
+    p.log.error('Could not open VS Code.')
+    process.exit(1)
+  }
+}