@dfosco/storyboard-react 4.0.0-beta.0 → 4.0.0-beta.10

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/useCanvas.js

@@ -32,12 +32,13 @@ export function resolveCanvasModuleImport(modulePath, baseUrl = import.meta.env?
  * fresh widget data from the server to pick up persisted edits.
  *
  * @param {string} name - Canvas name as indexed by the data plugin
- * @returns {{ canvas: object|null, jsxExports: object|null, loading: boolean }}
+ * @returns {{ canvas: object|null, jsxExports: object|null, jsxError: boolean, loading: boolean }}
  */
 export function useCanvas(name) {
   const buildTimeCanvas = useMemo(() => getCanvasData(name), [name])
   const [canvas, setCanvas] = useState(buildTimeCanvas)
   const [jsxExports, setJsxExports] = useState(null)
+  const [jsxError, setJsxError] = useState(false)
   const [loading, setLoading] = useState(true)
 
   // Fetch fresh data from server on mount
@@ -66,6 +67,7 @@ export function useCanvas(name) {
   useEffect(() => {
     if (!jsxModule) {
       setJsxExports(null)
+      setJsxError(false)
       return
     }
 
@@ -82,10 +84,12 @@ export function useCanvas(name) {
           }
         }
         setJsxExports(exports)
+        setJsxError(false)
       })
       .catch((err) => {
         console.error(`[storyboard] Failed to load canvas JSX module: ${jsxModule}`, err)
         setJsxExports(null)
+        setJsxError(true)
       })
   }, [jsxModule, jsxImport])
 
@@ -109,5 +113,5 @@ export function useCanvas(name) {
     }
   }, [name, buildTimeCanvas])
 
-  return { canvas, jsxExports, loading }
+  return { canvas, jsxExports, jsxError, loading }
 }

package/src/canvas/widgets/ComponentWidget.jsx

@@ -1,17 +1,33 @@
-import { useRef, useCallback, useState, useEffect } from 'react'
+import { useRef, useCallback, useState, useEffect, useMemo } from 'react'
 import WidgetWrapper from './WidgetWrapper.jsx'
 import ResizeHandle from './ResizeHandle.jsx'
+import ComponentErrorBoundary from '../ComponentErrorBoundary.jsx'
 import styles from './ComponentWidget.module.css'
 
 /**
  * Renders a live JSX export from a .canvas.jsx companion file.
- * Content is read-only (re-renders on HMR), only position and size are mutable.
- * Cannot be deleted from canvas — only removed from source code.
+ *
+ * In dev mode (isLocalDev), each component is rendered inside an iframe
+ * via the /_storyboard/canvas/isolate middleware. This isolates broken
+ * components so they cannot crash the entire canvas page.
+ *
+ * In production, the component is rendered directly with an ErrorBoundary
+ * as a fallback safety net.
  *
  * Double-click the overlay to enter interactive mode (dropdowns, buttons work).
  * Click outside to exit interactive mode.
  */
-export default function ComponentWidget({ component: Component, width, height, onUpdate, resizable }) {
+export default function ComponentWidget({
+  component: Component,
+  jsxModule,
+  exportName,
+  canvasTheme,
+  isLocalDev,
+  width,
+  height,
+  onUpdate,
+  resizable,
+}) {
   const containerRef = useRef(null)
   const [interactive, setInteractive] = useState(false)
 
@@ -33,7 +49,21 @@ export default function ComponentWidget({ component: Component, width, height, o
     return () => document.removeEventListener('pointerdown', handlePointerDown)
   }, [interactive])
 
-  if (!Component) return null
+  // Build iframe src for dev isolation
+  const iframeSrc = useMemo(() => {
+    if (!isLocalDev || !jsxModule || !exportName) return null
+    const basePath = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
+    const params = new URLSearchParams({
+      module: jsxModule,
+      export: exportName,
+      theme: canvasTheme || 'light',
+    })
+    return `${basePath}/_storyboard/canvas/isolate?${params}`
+  }, [isLocalDev, jsxModule, exportName, canvasTheme])
+
+  const useIframe = isLocalDev && iframeSrc
+
+  if (!useIframe && !Component) return null
 
   const sizeStyle = {}
   if (typeof width === 'number') sizeStyle.width = `${width}px`
@@ -43,7 +73,18 @@ export default function ComponentWidget({ component: Component, width, height, o
     <WidgetWrapper>
       <div ref={containerRef} className={styles.container} style={sizeStyle}>
         <div className={styles.content}>
-          <Component />
+          {useIframe ? (
+            <iframe
+              src={iframeSrc}
+              className={styles.iframe}
+              title={exportName || 'Component widget'}
+              sandbox="allow-same-origin allow-scripts"
+            />
+          ) : Component ? (
+            <ComponentErrorBoundary name={exportName}>
+              <Component />
+            </ComponentErrorBoundary>
+          ) : null}
         </div>
         {!interactive && (
           <div

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

@@ -1,6 +1,6 @@
 .container {
   position: relative;
-  overflow: auto;
+  overflow: hidden;
   min-width: 100px;
   min-height: 60px;
 }
@@ -10,6 +10,13 @@
   height: 100%;
 }
 
+.iframe {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
 .interactOverlay {
   position: absolute;
   inset: 0;

package/src/canvas/widgets/MarkdownBlock.jsx

@@ -1,28 +1,21 @@
-import { useState, useRef, useEffect, useCallback } from 'react'
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react'
+import { remark } from 'remark'
+import remarkGfm from 'remark-gfm'
+import remarkHtml from 'remark-html'
 import WidgetWrapper from './WidgetWrapper.jsx'
 import { readProp, markdownSchema } from './widgetProps.js'
 import styles from './MarkdownBlock.module.css'
 
 /**
- * Renders markdown as plain HTML using a minimal built-in converter.
+ * Renders markdown to HTML using remark with GitHub Flavored Markdown support.
  */
 function renderMarkdown(text) {
   if (!text) return ''
-  return text
-    .replace(/^### (.+)$/gm, '<h3>$1</h3>')
-    .replace(/^## (.+)$/gm, '<h2>$1</h2>')
-    .replace(/^# (.+)$/gm, '<h1>$1</h1>')
-    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
-    .replace(/\*(.+?)\*/g, '<em>$1</em>')
-    .replace(/`(.+?)`/g, '<code>$1</code>')
-    .replace(/^- (.+)$/gm, '<li>$1</li>')
-    .replace(/(<li>.*<\/li>)/s, '<ul>$1</ul>')
-    .replace(/\n\n/g, '</p><p>')
-    .replace(/\n/g, '<br>')
-    .replace(/^(.+)$/gm, (line) => {
-      if (line.startsWith('<')) return line
-      return `<p>${line}</p>`
-    })
+  const result = remark()
+    .use(remarkGfm)
+    .use(remarkHtml, { sanitize: false })
+    .processSync(text)
+  return String(result)
 }
 
 export default function MarkdownBlock({ props, onUpdate }) {

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

@@ -65,6 +65,88 @@
   margin: 0 0 2px;
 }
 
+.preview ol {
+  margin: 0 0 8px;
+  padding-left: 20px;
+}
+
+/* GFM: Task lists */
+.preview input[type="checkbox"] {
+  margin-right: 6px;
+  pointer-events: none;
+}
+
+.preview li:has(input[type="checkbox"]) {
+  list-style: none;
+  margin-left: -20px;
+}
+
+/* GFM: Strikethrough */
+.preview del {
+  text-decoration: line-through;
+  color: var(--sb--markdown-muted);
+}
+
+/* GFM: Tables */
+.preview table {
+  border-collapse: collapse;
+  margin: 8px 0;
+  width: 100%;
+  font-size: 13px;
+}
+
+.preview th,
+.preview td {
+  border: 1px solid var(--borderColor-default, #d0d7de);
+  padding: 6px 12px;
+  text-align: left;
+}
+
+.preview th {
+  background: var(--bgColor-muted, #f6f8fa);
+  font-weight: 600;
+}
+
+/* GFM: Autolinks */
+.preview a {
+  color: var(--sb--markdown-accent);
+  text-decoration: none;
+}
+
+.preview a:hover {
+  text-decoration: underline;
+}
+
+/* Code blocks */
+.preview pre {
+  background: var(--bgColor-neutral-muted, #afb8c133);
+  padding: 12px 16px;
+  border-radius: 6px;
+  overflow-x: auto;
+  margin: 8px 0;
+}
+
+.preview pre code {
+  background: none;
+  padding: 0;
+  font-size: 13px;
+}
+
+/* Blockquotes */
+.preview blockquote {
+  border-left: 4px solid var(--borderColor-default, #d0d7de);
+  margin: 8px 0;
+  padding: 4px 16px;
+  color: var(--sb--markdown-muted);
+}
+
+/* Horizontal rules */
+.preview hr {
+  border: none;
+  border-top: 1px solid var(--borderColor-default, #d0d7de);
+  margin: 16px 0;
+}
+
 .preview :global(.placeholder) {
   color: var(--sb--markdown-muted);
   font-style: italic;

package/src/canvas/widgets/MarkdownBlock.test.jsx

@@ -50,4 +50,43 @@ describe('MarkdownBlock', () => {
 
     expect(setData).toHaveBeenCalledWith('text/plain', '**Hello**\n- item')
   })
+
+  describe('GitHub Flavored Markdown', () => {
+    it('renders tables', () => {
+      const markdown = `| Name | Age |
+| --- | --- |
+| Alice | 30 |`
+      const { container } = render(<MarkdownBlock props={{ content: markdown, width: 420 }} />)
+
+      expect(container.querySelector('table')).not.toBeNull()
+      expect(container.querySelector('th')).not.toBeNull()
+      expect(screen.getByText('Alice')).toBeTruthy()
+    })
+
+    it('renders task lists', () => {
+      const markdown = `- [x] Done
+- [ ] Todo`
+      const { container } = render(<MarkdownBlock props={{ content: markdown, width: 420 }} />)
+
+      const checkboxes = container.querySelectorAll('input[type="checkbox"]')
+      expect(checkboxes).toHaveLength(2)
+      expect(checkboxes[0].checked).toBe(true)
+      expect(checkboxes[1].checked).toBe(false)
+    })
+
+    it('renders strikethrough', () => {
+      const { container } = render(<MarkdownBlock props={{ content: '~~deleted~~', width: 420 }} />)
+
+      expect(container.querySelector('del')).not.toBeNull()
+      expect(screen.getByText('deleted')).toBeTruthy()
+    })
+
+    it('renders autolinks', () => {
+      const { container } = render(<MarkdownBlock props={{ content: 'https://github.com', width: 420 }} />)
+
+      const link = container.querySelector('a')
+      expect(link).not.toBeNull()
+      expect(link.href).toBe('https://github.com/')
+    })
+  })
 })

package/src/canvas/widgets/StickyNote.test.jsx

@@ -13,16 +13,16 @@ describe('stickyNoteSchema', () => {
     )
   })
 
-  it('does not include default values for width/height so new widgets size naturally', () => {
+  it('includes default values for width/height from config', () => {
     const defaults = getDefaults(stickyNoteSchema)
-    expect(defaults).not.toHaveProperty('width')
-    expect(defaults).not.toHaveProperty('height')
+    expect(defaults).toHaveProperty('width', 270)
+    expect(defaults).toHaveProperty('height', 170)
   })
 
-  it('returns null when width/height are not saved in props', () => {
+  it('returns default value when width/height are not saved in props', () => {
     const props = { text: 'hello', color: 'yellow' }
-    expect(readProp(props, 'width', stickyNoteSchema)).toBeNull()
-    expect(readProp(props, 'height', stickyNoteSchema)).toBeNull()
+    expect(readProp(props, 'width', stickyNoteSchema)).toBe(270)
+    expect(readProp(props, 'height', stickyNoteSchema)).toBe(170)
   })
 
   it('returns saved width/height when present in props', () => {
@@ -33,11 +33,11 @@ describe('stickyNoteSchema', () => {
 })
 
 describe('StickyNote', () => {
-  it('renders without explicit dimensions when width/height are not saved', () => {
+  it('applies default dimensions as inline styles when not saved in props', () => {
     const { container } = render(<StickyNote props={{ text: 'Hi' }} onUpdate={vi.fn()} />)
     const sticky = container.querySelector('article')
-    expect(sticky.style.width).toBe('')
-    expect(sticky.style.height).toBe('')
+    expect(sticky.style.width).toBe('270px')
+    expect(sticky.style.height).toBe('170px')
   })
 
   it('applies saved dimensions as inline styles', () => {

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/canvas/widgets/widgetConfig.test.js

@@ -2,14 +2,14 @@ import { describe, expect, it } from 'vitest'
 import { isResizable, getFeatures, getWidgetMeta } from './widgetConfig.js'
 
 describe('isResizable', () => {
-  // Vitest runs with import.meta.env.PROD = true, so prod: false widgets
-  // correctly return false. This tests the production behavior.
-  it('returns false for resize-enabled widgets when prod is false (production env)', () => {
-    expect(isResizable('sticky-note')).toBe(false)
-    expect(isResizable('prototype')).toBe(false)
-    expect(isResizable('figma-embed')).toBe(false)
-    expect(isResizable('image')).toBe(false)
-    expect(isResizable('component')).toBe(false)
+  // Vitest runs in dev mode by default (import.meta.env.PROD = false)
+  // In dev mode, all resize-enabled widgets are resizable
+  it('returns true for resize-enabled widgets in dev mode', () => {
+    expect(isResizable('sticky-note')).toBe(true)
+    expect(isResizable('prototype')).toBe(true)
+    expect(isResizable('figma-embed')).toBe(true)
+    expect(isResizable('image')).toBe(true)
+    expect(isResizable('component')).toBe(true)
   })
 
   it('returns false for widget types with resize disabled', () => {