@dfosco/storyboard-react 4.0.0-beta.3 → 4.0.0-beta.5

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "4.0.0-beta.3",
+  "version": "4.0.0-beta.5",
   "type": "module",
   "dependencies": {
-    "@dfosco/storyboard-core": "4.0.0-beta.3",
-    "@dfosco/tiny-canvas": "4.0.0-beta.3",
+    "@dfosco/storyboard-core": "4.0.0-beta.5",
+    "@dfosco/tiny-canvas": "4.0.0-beta.5",
     "@neodrag/react": "^2.3.1",
     "glob": "^11.0.0",
     "jsonc-parser": "^3.3.1"

package/src/canvas/ComponentErrorBoundary.jsx

@@ -0,0 +1,50 @@
+import { Component } from 'react'
+
+/**
+ * Error boundary for canvas component widgets.
+ * Catches render-time errors so a single broken component
+ * doesn't crash the entire canvas page.
+ *
+ * Used as a production fallback when iframe isolation is not available.
+ */
+export default class ComponentErrorBoundary extends Component {
+  constructor(props) {
+    super(props)
+    this.state = { error: null }
+  }
+
+  static getDerivedStateFromError(error) {
+    return { error }
+  }
+
+  componentDidCatch(error, info) {
+    console.error(
+      `[storyboard] Component widget "${this.props.name || 'unknown'}" crashed:`,
+      error,
+      info?.componentStack,
+    )
+  }
+
+  render() {
+    if (this.state.error) {
+      return (
+        <div style={{
+          padding: '16px',
+          color: '#cf222e',
+          fontFamily: 'system-ui, -apple-system, sans-serif',
+          fontSize: '13px',
+          lineHeight: 1.5,
+          whiteSpace: 'pre-wrap',
+          wordBreak: 'break-word',
+          minWidth: 200,
+          minHeight: 60,
+        }}>
+          <strong>{this.props.name || 'Component'}</strong>
+          <br />
+          {String(this.state.error.message || this.state.error)}
+        </div>
+      )
+    }
+    return this.props.children
+  }
+}

package/src/canvas/canvasReloadGuard.test.js

@@ -0,0 +1,27 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { enableCanvasGuard, disableCanvasGuard, isCanvasGuardActive } from './canvasReloadGuard.js'
+
+describe('canvasReloadGuard', () => {
+  beforeEach(() => {
+    disableCanvasGuard()
+  })
+
+  it('starts inactive', () => {
+    expect(isCanvasGuardActive()).toBe(false)
+  })
+
+  it('can be enabled and disabled', () => {
+    enableCanvasGuard()
+    expect(isCanvasGuardActive()).toBe(true)
+    disableCanvasGuard()
+    expect(isCanvasGuardActive()).toBe(false)
+  })
+
+  it('enable is idempotent', () => {
+    enableCanvasGuard()
+    enableCanvasGuard()
+    expect(isCanvasGuardActive()).toBe(true)
+    disableCanvasGuard()
+    expect(isCanvasGuardActive()).toBe(false)
+  })
+})

package/src/canvas/componentIsolate.jsx

@@ -0,0 +1,109 @@
+/**
+ * Canvas Component Isolate — iframe entry point.
+ *
+ * Renders a single named export from a .canvas.jsx module inside an
+ * isolated document. The parent CanvasPage embeds this via an iframe
+ * so a broken component cannot crash the entire canvas.
+ *
+ * Query params:
+ *   module — absolute or base-relative path to the .canvas.jsx file
+ *   export — the named export to render
+ *   theme  — canvas theme (light / dark / dark_dimmed)
+ */
+import { createElement, Component as ReactComponent } from 'react'
+import { createRoot } from 'react-dom/client'
+
+// ── Error Boundary ──────────────────────────────────────────────────
+class IsolateErrorBoundary extends ReactComponent {
+  constructor(props) {
+    super(props)
+    this.state = { error: null }
+  }
+  static getDerivedStateFromError(error) {
+    return { error }
+  }
+  render() {
+    if (this.state.error) {
+      return createElement('div', { style: errorStyle },
+        createElement('strong', null, this.props.name || 'Component'),
+        createElement('br'),
+        String(this.state.error.message || this.state.error),
+      )
+    }
+    return this.props.children
+  }
+}
+
+// ── Styles ──────────────────────────────────────────────────────────
+const errorStyle = {
+  padding: '16px',
+  color: '#cf222e',
+  fontFamily: 'system-ui, -apple-system, sans-serif',
+  fontSize: '13px',
+  lineHeight: 1.5,
+  whiteSpace: 'pre-wrap',
+  wordBreak: 'break-word',
+}
+
+// ── Resolve module path (mirrors useCanvas.resolveCanvasModuleImport) ─
+function resolveModulePath(raw) {
+  if (!raw) return raw
+  if (/^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(raw)) return raw
+  if (!raw.startsWith('/')) return raw
+  const base = (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
+  if (!base) return raw
+  if (raw.startsWith(base)) return raw
+  return `${base}${raw}`
+}
+
+// ── Main ────────────────────────────────────────────────────────────
+const params = new URLSearchParams(window.location.search)
+const modulePath = params.get('module')
+const exportName = params.get('export')
+const theme = params.get('theme') || 'light'
+
+// Apply theme to document for Primer / CSS-var inheritance
+document.documentElement.setAttribute('data-color-mode', theme.startsWith('dark') ? 'dark' : 'light')
+document.documentElement.setAttribute('data-dark-theme', theme.startsWith('dark') ? theme : '')
+document.documentElement.setAttribute('data-light-theme', theme.startsWith('dark') ? '' : theme || 'light')
+
+const root = createRoot(document.getElementById('root'))
+
+async function mount() {
+  if (!modulePath || !exportName) {
+    root.render(createElement('div', { style: errorStyle }, 'Missing module or export param'))
+    return
+  }
+
+  // Validate: only allow .canvas.jsx modules
+  if (!modulePath.endsWith('.canvas.jsx')) {
+    root.render(createElement('div', { style: errorStyle }, 'Invalid module path — only .canvas.jsx files are allowed'))
+    return
+  }
+
+  try {
+    const resolved = resolveModulePath(modulePath)
+    const mod = await import(/* @vite-ignore */ resolved)
+    const Component = mod[exportName]
+
+    if (!Component || typeof Component !== 'function') {
+      throw new Error(`Export "${exportName}" not found or is not a component`)
+    }
+
+    root.render(
+      createElement(IsolateErrorBoundary, { name: exportName },
+        createElement(Component),
+      ),
+    )
+  } catch (err) {
+    root.render(
+      createElement('div', { style: errorStyle },
+        createElement('strong', null, exportName),
+        createElement('br'),
+        String(err.message || err),
+      ),
+    )
+  }
+}
+
+mount()

package/src/canvas/widgets/WidgetChrome.module.css

@@ -236,7 +236,7 @@
   position: absolute;
   top: calc(100% + 10px);
   right: 0;
-  min-width: 180px;
+  min-width: max-content;
   padding: 4px;
   background: var(--bgColor-default, #ffffff);
   border-radius: 10px;
@@ -265,6 +265,7 @@
   color: var(--fgColor-default, #1f2328);
   border-radius: 6px;
   box-sizing: border-box;
+  white-space: nowrap;
 }
 
 :global([data-sb-canvas-theme^='dark']) .overflowItem {

package/src/vite/data-plugin.js

@@ -155,14 +155,101 @@ function getLastModified(root, dirPath) {
   }
 }
 
+/**
+ * Batch-fetch git metadata (author + lastModified) for multiple files in a
+ * single subprocess, avoiding per-file git overhead during startup.
+ *
+ * Returns a Map<absPath, { gitAuthor: string|null, lastModified: string|null }>
+ */
+function batchGitMetadata(root, filePaths) {
+  const result = new Map()
+  if (filePaths.length === 0) return result
+
+  // Initialize all entries
+  for (const fp of filePaths) {
+    result.set(fp, { gitAuthor: null, lastModified: null })
+  }
+
+  try {
+    // Batch lastModified: one git log call with all paths
+    // git log -1 gives the most recent commit touching any of these paths,
+    // but we need per-path data. Use --name-only to correlate.
+    // For efficiency, use a single git log with --format and --name-only
+    // that outputs one record per commit touching these files.
+    const allDirs = [...new Set(filePaths.map(fp => path.dirname(fp)))]
+    const dirsArg = allDirs.map(d => `"${d}"`).join(' ')
+
+    // Get lastModified per directory in one call using git log --format
+    // We output "MARKER<sep>dir<sep>date" per commit, then take the latest per dir.
+    const logResult = execSync(
+      `git log --format="%aI" --name-only -- ${dirsArg}`,
+      { cwd: root, encoding: 'utf-8', timeout: 10000, maxBuffer: 1024 * 1024 },
+    ).trim()
+
+    if (logResult) {
+      // Parse: alternating date lines and filename lines separated by blank lines
+      const blocks = logResult.split('\n\n')
+      const dirDates = new Map() // dir → most recent date
+      for (const block of blocks) {
+        const lines = block.split('\n').filter(Boolean)
+        if (lines.length < 2) continue
+        const date = lines[0]
+        for (let li = 1; li < lines.length; li++) {
+          const fileLine = lines[li].trim()
+          if (!fileLine) continue
+          const dir = path.dirname(path.resolve(root, fileLine))
+          if (!dirDates.has(dir)) {
+            dirDates.set(dir, date)
+          }
+        }
+      }
+      for (const fp of filePaths) {
+        const dir = path.dirname(fp)
+        const entry = result.get(fp)
+        if (dirDates.has(dir) && entry) {
+          entry.lastModified = dirDates.get(dir)
+        }
+      }
+    }
+  } catch { /* git not available or failed — leave nulls */ }
+
+  // Batch gitAuthor: use git log for each file's creation author.
+  // Unfortunately --follow --diff-filter=A doesn't combine well with multiple
+  // paths, so batch them in a single shell invocation using a for loop.
+  try {
+    const relPaths = filePaths.map(fp => path.relative(root, fp))
+    // Build a shell script that outputs "PATH<tab>AUTHOR" per file
+    const cmds = relPaths.map(rp =>
+      `echo -n "${rp}\\t"; git log --follow --diff-filter=A --format="%aN" -- "${rp}" | tail -1`
+    ).join('; ')
+    const authorResult = execSync(cmds, {
+      cwd: root, encoding: 'utf-8', timeout: 10000, shell: true, maxBuffer: 1024 * 1024,
+    }).trim()
+
+    if (authorResult) {
+      for (const line of authorResult.split('\n')) {
+        const tabIdx = line.indexOf('\t')
+        if (tabIdx < 0) continue
+        const relPath = line.slice(0, tabIdx)
+        const author = line.slice(tabIdx + 1).trim()
+        if (!author) continue
+        const absPath2 = path.resolve(root, relPath)
+        const entry = result.get(absPath2)
+        if (entry) entry.gitAuthor = author
+      }
+    }
+  } catch { /* git not available */ }
+
+  return result
+}
+
 /**
  * Scan the repo for all data files, validate uniqueness, return the index.
  */
 function buildIndex(root) {
-  const ignore = ['node_modules/**', 'dist/**', '.git/**']
-  // Scope to src/ — all data files live there (avoids walking .worktrees/, public/, etc.)
-  const files = globSync(`src/${GLOB_PATTERN}`, { cwd: root, ignore, absolute: false })
-  const canvasFiles = globSync(`src/${CANVAS_GLOB_PATTERN}`, { cwd: root, ignore, absolute: false })
+  const ignore = ['node_modules/**', 'dist/**', '.git/**', '.worktrees/**', 'public/**']
+  const files = globSync(GLOB_PATTERN, { cwd: root, ignore, absolute: false })
+  const canvasFiles = globSync(CANVAS_GLOB_PATTERN, { cwd: root, ignore, absolute: false })
 
   // Detect nested .folder/ directories (not supported)
   // Scan directories directly since empty nested folders have no data files
@@ -340,6 +427,13 @@ function generateModule({ index, protoFolders, flowRoutes, canvasRoutes }, root)
   const resolvedFlowRoutes = {} // flow name → resolved route (for multi-flow logging)
   let i = 0
 
+  // Batch-fetch git metadata for all prototype + canvas files in 1-2 subprocesses
+  const gitPaths = [
+    ...Object.values(index.prototype || {}),
+    ...Object.values(index.canvas || {}),
+  ]
+  const gitMeta = batchGitMetadata(root, gitPaths)
+
   for (const suffix of INDEX_KEYS) {
     for (const [name, absPath] of Object.entries(index[suffix])) {
       const varName = `_d${i++}`
@@ -350,18 +444,17 @@ function generateModule({ index, protoFolders, flowRoutes, canvasRoutes }, root)
 
       // Auto-fill gitAuthor for prototype metadata from git history
       if (suffix === 'prototype' && parsed && !parsed.gitAuthor) {
-        const gitAuthor = getGitAuthor(root, absPath)
-        if (gitAuthor) {
-          parsed = { ...parsed, gitAuthor }
+        const meta = gitMeta.get(absPath)
+        if (meta?.gitAuthor) {
+          parsed = { ...parsed, gitAuthor: meta.gitAuthor }
         }
       }
 
       // Auto-fill lastModified from git history for prototypes
       if (suffix === 'prototype' && parsed) {
-        const protoDir = path.dirname(absPath)
-        const lastModified = getLastModified(root, protoDir)
-        if (lastModified) {
-          parsed = { ...parsed, lastModified }
+        const meta = gitMeta.get(absPath)
+        if (meta?.lastModified) {
+          parsed = { ...parsed, lastModified: meta.lastModified }
         }
       }
 
@@ -400,9 +493,9 @@ function generateModule({ index, protoFolders, flowRoutes, canvasRoutes }, root)
 
       // Auto-fill gitAuthor for canvas metadata from git history
       if (suffix === 'canvas' && parsed && !parsed.gitAuthor) {
-        const gitAuthor = getGitAuthor(root, absPath)
-        if (gitAuthor) {
-          parsed = { ...parsed, gitAuthor }
+        const meta = gitMeta.get(absPath)
+        if (meta?.gitAuthor) {
+          parsed = { ...parsed, gitAuthor: meta.gitAuthor }
         }
       }