@dfosco/storyboard-react 4.0.0-beta.4 → 4.0.0-beta.6

package/package.json

@@ -1,13 +1,16 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "4.0.0-beta.4",
+  "version": "4.0.0-beta.6",
   "type": "module",
   "dependencies": {
-    "@dfosco/storyboard-core": "4.0.0-beta.4",
-    "@dfosco/tiny-canvas": "4.0.0-beta.4",
+    "@dfosco/storyboard-core": "4.0.0-beta.6",
+    "@dfosco/tiny-canvas": "4.0.0-beta.6",
     "@neodrag/react": "^2.3.1",
     "glob": "^11.0.0",
-    "jsonc-parser": "^3.3.1"
+    "jsonc-parser": "^3.3.1",
+    "remark": "^15.0.1",
+    "remark-gfm": "^4.0.1",
+    "remark-html": "^16.0.1"
   },
   "license": "MIT",
   "repository": {

package/src/canvas/CanvasPage.jsx

@@ -1,4 +1,4 @@
-import { createElement, useCallback, useEffect, useRef, useState } from 'react'
+import { createElement, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { flushSync } from 'react-dom'
 import { Canvas } from '@dfosco/tiny-canvas'
 import '@dfosco/tiny-canvas/style.css'
@@ -158,7 +158,7 @@ const FIT_PADDING = 48
  * Compute the axis-aligned bounding box that contains every widget and source.
  * Returns { minX, minY, maxX, maxY } in canvas-space coordinates, or null if empty.
  */
-function computeCanvasBounds(widgets, sources, jsxExports) {
+function computeCanvasBounds(widgets, componentEntries) {
   let minX = Infinity
   let minY = Infinity
   let maxX = -Infinity
@@ -179,24 +179,18 @@ function computeCanvasBounds(widgets, sources, jsxExports) {
     hasItems = true
   }
 
-  // JSX sources
-  const sourceMap = Object.fromEntries(
-    (sources || []).filter((s) => s?.export).map((s) => [s.export, s])
-  )
-  if (jsxExports) {
-    for (const exportName of Object.keys(jsxExports)) {
-      const sourceData = sourceMap[exportName] || {}
-      const x = sourceData.position?.x ?? 0
-      const y = sourceData.position?.y ?? 0
-      const fallback = WIDGET_FALLBACK_SIZES['component']
-      const width = sourceData.width ?? fallback.width
-      const height = sourceData.height ?? fallback.height
-      minX = Math.min(minX, x)
-      minY = Math.min(minY, y)
-      maxX = Math.max(maxX, x + width)
-      maxY = Math.max(maxY, y + height)
-      hasItems = true
-    }
+  // Component widgets (from jsxExports or sources fallback)
+  for (const entry of componentEntries) {
+    const x = entry.sourceData?.position?.x ?? 0
+    const y = entry.sourceData?.position?.y ?? 0
+    const fallback = WIDGET_FALLBACK_SIZES['component']
+    const width = entry.sourceData?.width ?? fallback.width
+    const height = entry.sourceData?.height ?? fallback.height
+    minX = Math.min(minX, x)
+    minY = Math.min(minY, y)
+    maxX = Math.max(maxX, x + width)
+    maxY = Math.max(maxY, y + height)
+    hasItems = true
   }
 
   return hasItems ? { minX, minY, maxX, maxY } : null
@@ -275,7 +269,7 @@ function ChromeWrappedWidget({
  * @param {{ name: string }} props - Canvas name as indexed by the data plugin
  */
 export default function CanvasPage({ name }) {
-  const { canvas, jsxExports, loading } = useCanvas(name)
+  const { canvas, jsxExports, jsxError, loading } = useCanvas(name)
   const isLocalDev = typeof window !== 'undefined' && window.__SB_LOCAL_DEV__ === true && !new URLSearchParams(window.location.search).has('prodMode')
 
   // Local mutable copy of widgets for instant UI updates
@@ -294,6 +288,34 @@ export default function CanvasPage({ name }) {
   const [snapEnabled, setSnapEnabled] = useState(canvas?.snapToGrid ?? false)
   const [snapGridSize, setSnapGridSize] = useState(canvas?.gridSize || 40)
 
+  // Centralized list of component export names.
+  // When jsxExports is available, use it (discovers new exports not yet in sources).
+  // When jsxExports is null (module import failed), fall back to sources so iframes
+  // still render — the error is contained inside each iframe.
+  const componentEntries = useMemo(() => {
+    const sourceMap = Object.fromEntries(
+      (localSources || []).filter((s) => s?.export).map((s) => [s.export, s]),
+    )
+    if (jsxExports) {
+      return Object.keys(jsxExports).map((exportName) => ({
+        exportName,
+        Component: jsxExports[exportName],
+        sourceData: sourceMap[exportName] || {},
+      }))
+    }
+    // Fallback: use sources when module import failed (iframe isolation still works)
+    if (jsxError && canvas?._jsxModule) {
+      return (localSources || [])
+        .filter((s) => s?.export)
+        .map((s) => ({
+          exportName: s.export,
+          Component: null,
+          sourceData: s,
+        }))
+    }
+    return []
+  }, [jsxExports, jsxError, localSources, canvas?._jsxModule])
+
   // Undo/redo history — tracks both widgets and sources as a combined snapshot
   const undoRedo = useUndoRedo()
   const stateRef = useRef({ widgets: localWidgets, sources: localSources })
@@ -673,16 +695,13 @@ export default function CanvasPage({ name }) {
     // Check JSX sources (jsx-ExportName)
     if (!widget && targetId.startsWith('jsx-')) {
       const exportName = targetId.slice(4)
-      const sourceMap = Object.fromEntries(
-        (localSources || []).filter((s) => s?.export).map((s) => [s.export, s])
-      )
-      const sourceData = sourceMap[exportName]
-      if (sourceData || (jsxExports && exportName in jsxExports)) {
+      const entry = componentEntries.find((e) => e.exportName === exportName)
+      if (entry) {
         const fallback = WIDGET_FALLBACK_SIZES['component']
-        x = sourceData?.position?.x ?? 0
-        y = sourceData?.position?.y ?? 0
-        w = sourceData?.width ?? fallback.width
-        h = sourceData?.height ?? fallback.height
+        x = entry.sourceData?.position?.x ?? 0
+        y = entry.sourceData?.position?.y ?? 0
+        w = entry.sourceData?.width ?? fallback.width
+        h = entry.sourceData?.height ?? fallback.height
       }
     }
 
@@ -696,7 +715,7 @@ export default function CanvasPage({ name }) {
     const url = new URL(window.location.href)
     url.searchParams.delete('widget')
     window.history.replaceState({}, '', url.toString())
-  }, [loading, localWidgets, localSources, jsxExports])
+  }, [loading, localWidgets, componentEntries])
 
   // Persist viewport state (zoom + scroll) to localStorage on changes
   useEffect(() => {
@@ -893,7 +912,7 @@ export default function CanvasPage({ name }) {
       const el = scrollRef.current
       if (!el) return
 
-      const bounds = computeCanvasBounds(localWidgets, localSources, jsxExports)
+      const bounds = computeCanvasBounds(localWidgets, componentEntries)
       if (!bounds) return
 
       const boxW = bounds.maxX - bounds.minX + FIT_PADDING * 2
@@ -917,7 +936,7 @@ export default function CanvasPage({ name }) {
     }
     document.addEventListener('storyboard:canvas:zoom-to-fit', handleZoomToFit)
     return () => document.removeEventListener('storyboard:canvas:zoom-to-fit', handleZoomToFit)
-  }, [localWidgets, localSources, jsxExports])
+  }, [localWidgets, componentEntries])
 
   // Canvas background should follow toolbar theme target.
   useEffect(() => {
@@ -1328,54 +1347,50 @@ export default function CanvasPage({ name }) {
   // Merge JSX-sourced widgets (from .canvas.jsx) and JSON widgets
   const allChildren = []
 
-  const sourceDataByExport = Object.fromEntries(
-    (localSources || [])
-      .filter((source) => source?.export)
-      .map((source) => [source.export, source])
-  )
-
-  // 1. JSX-sourced component widgets (wrapped in WidgetChrome, not deletable)
+  // 1. Component widgets (from jsxExports or sources fallback)
   const componentFeatures = getFeatures('component')
-  if (jsxExports) {
-    for (const [exportName, Component] of Object.entries(jsxExports)) {
-      const sourceData = sourceDataByExport[exportName] || {}
-      const sourcePosition = sourceData.position || { x: 0, y: 0 }
-      allChildren.push(
-        <div
-          key={`jsx-${exportName}`}
-          id={`jsx-${exportName}`}
-          data-tc-x={sourcePosition.x}
-          data-tc-y={sourcePosition.y}
-          {...(isLocalDev ? { 'data-tc-handle': '.tc-drag-handle, .tc-drag-surface' } : {})}
-          {...canvasPrimerAttrs}
-          style={canvasThemeVars}
-          onClick={isLocalDev ? (e) => {
-            e.stopPropagation()
-            if (!e.target.closest('.tc-drag-handle')) {
-              handleWidgetSelect(`jsx-${exportName}`, e.shiftKey)
-            }
-          } : undefined}
+  for (const entry of componentEntries) {
+    const { exportName, Component, sourceData } = entry
+    const sourcePosition = sourceData.position || { x: 0, y: 0 }
+    allChildren.push(
+      <div
+        key={`jsx-${exportName}`}
+        id={`jsx-${exportName}`}
+        data-tc-x={sourcePosition.x}
+        data-tc-y={sourcePosition.y}
+        {...(isLocalDev ? { 'data-tc-handle': '.tc-drag-handle, .tc-drag-surface' } : {})}
+        {...canvasPrimerAttrs}
+        style={canvasThemeVars}
+        onClick={isLocalDev ? (e) => {
+          e.stopPropagation()
+          if (!e.target.closest('.tc-drag-handle')) {
+            handleWidgetSelect(`jsx-${exportName}`, e.shiftKey)
+          }
+        } : undefined}
+      >
+        <WidgetChrome
+          widgetId={`jsx-${exportName}`}
+          features={componentFeatures}
+          selected={selectedWidgetIds.has(`jsx-${exportName}`)}
+          multiSelected={isMultiSelected && selectedWidgetIds.has(`jsx-${exportName}`)}
+          onSelect={(shiftKey) => handleWidgetSelect(`jsx-${exportName}`, shiftKey)}
+          onDeselect={() => setSelectedWidgetIds(new Set())}
+          readOnly={!isLocalDev}
         >
-          <WidgetChrome
-            widgetId={`jsx-${exportName}`}
-            features={componentFeatures}
-            selected={selectedWidgetIds.has(`jsx-${exportName}`)}
-            multiSelected={isMultiSelected && selectedWidgetIds.has(`jsx-${exportName}`)}
-            onSelect={(shiftKey) => handleWidgetSelect(`jsx-${exportName}`, shiftKey)}
-            onDeselect={() => setSelectedWidgetIds(new Set())}
-            readOnly={!isLocalDev}
-          >
-            <ComponentWidget
-              component={Component}
-              width={sourceData.width}
-              height={sourceData.height}
-              onUpdate={isLocalDev ? (updates) => handleSourceUpdate(exportName, updates) : undefined}
-              resizable={isResizable('component') && isLocalDev}
-            />
-          </WidgetChrome>
-        </div>
-      )
-    }
+          <ComponentWidget
+            component={Component}
+            jsxModule={canvas?._jsxModule}
+            exportName={exportName}
+            canvasTheme={canvasTheme}
+            isLocalDev={isLocalDev}
+            width={sourceData.width}
+            height={sourceData.height}
+            onUpdate={isLocalDev ? (updates) => handleSourceUpdate(exportName, updates) : undefined}
+            resizable={isResizable('component') && isLocalDev}
+          />
+        </WidgetChrome>
+      </div>
+    )
   }
 
   // 2. JSON-defined mutable widgets (selectable, wrapped in WidgetChrome)

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

@@ -0,0 +1,37 @@
+/**
+ * Canvas reload guard — client-side state for preventing HMR full reloads.
+ *
+ * This module tracks whether a canvas is currently active. When active,
+ * the Vite plugin suppresses full-page reloads to preserve canvas state.
+ *
+ * The actual guard logic is implemented in:
+ * - Server: vite.config.js (ws.send monkey-patch + heartbeat)
+ * - Client: CanvasPage.jsx (vite:beforeFullReload + vite:ws:disconnect)
+ *
+ * This module provides the state that those systems check.
+ */
+
+let active = false
+
+/**
+ * Enable the canvas reload guard.
+ * Call when a canvas page mounts.
+ */
+export function enableCanvasGuard() {
+  active = true
+}
+
+/**
+ * Disable the canvas reload guard.
+ * Call when a canvas page unmounts.
+ */
+export function disableCanvasGuard() {
+  active = false
+}
+
+/**
+ * Check if the canvas reload guard is currently active.
+ */
+export function isCanvasGuardActive() {
+  return active
+}

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/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/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

@@ -675,6 +675,41 @@ export default function storyboardDataPlugin() {
     },
 
     configureServer(server) {
+      // ── Component isolate middleware ───────────────────────────────
+      // Serves a minimal HTML shell for iframe-isolated component widgets.
+      // The iframe loads componentIsolate.jsx which reads query params
+      // (module, export, theme) and renders a single canvas.jsx export.
+      const isolateEntryPath = new URL('../canvas/componentIsolate.jsx', import.meta.url).pathname
+      server.middlewares.use(async (req, res, next) => {
+        if (!req.url) return next()
+        let url = req.url
+        const baseNoTrail = (server.config.base || '/').replace(/\/$/, '')
+        if (baseNoTrail && url.startsWith(baseNoTrail)) {
+          url = url.slice(baseNoTrail.length) || '/'
+        }
+        if (!url.startsWith('/_storyboard/canvas/isolate')) return next()
+
+        const rawHtml = [
+          '<!DOCTYPE html>',
+          '<html><head>',
+          '<style>html,body{margin:0;padding:0;width:100%;height:100%}#root{width:100%;height:100%}</style>',
+          '</head><body>',
+          '<div id="root"></div>',
+          `<script type="module" src="/@fs${isolateEntryPath}"></script>`,
+          '</body></html>',
+        ].join('\n')
+
+        try {
+          const html = await server.transformIndexHtml(req.url, rawHtml)
+          res.writeHead(200, { 'Content-Type': 'text/html' })
+          res.end(html)
+        } catch (err) {
+          console.error('[storyboard] Component isolate HTML transform failed:', err)
+          res.writeHead(500, { 'Content-Type': 'text/plain' })
+          res.end('Component isolate failed')
+        }
+      })
+
       // Watch for data file changes in dev mode
       const watcher = server.watcher
       if (!buildResult) buildResult = buildIndex(root)