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

package/src/canvas/CanvasPage.module.css

@@ -3,7 +3,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: 100vh;
+  min-height: calc(100vh - var(--sb-branch-bar-height, 0px));
   font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
   color: var(--fgColor-muted, #656d76);
   font-size: 16px;
@@ -16,7 +16,7 @@
 
 .canvasScroll {
   width: 100vw;
-  height: 100vh;
+  height: calc(100vh - var(--sb-branch-bar-height, 0px));
   overflow: auto;
   background-color: var(--sb--canvas-bg, var(--bgColor-muted, #f6f8fa));
 }
@@ -32,11 +32,18 @@
   min-height: 100%;
 }
 
+/* GPU compositing hint during active zoom gestures — applied imperatively
+   via data-zooming attribute and removed on zoom-end to avoid permanent
+   memory pressure on the large canvas surface. */
+.canvasZoom[data-zooming] {
+  will-change: transform;
+}
+
 /* Selection outline is now handled by WidgetChrome.module.css (.widgetSlotSelected) */
 
 .canvasTitle {
   position: fixed;
-  top: 12px;
+  top: calc(12px + var(--sb-branch-bar-height, 0px));
   left: 16px;
   z-index: 10;
   display: flex;
@@ -44,58 +51,14 @@
   gap: 8px;
 }
 
-.canvasTitleWrap {
-  display: inline-grid;
-}
-
-.canvasTitleWrap > * {
-  grid-area: 1 / 1;
-}
-
-.canvasTitleMeasure {
-  visibility: hidden;
-  white-space: pre;
-  font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
-  font-size: 14px;
-  font-weight: 600;
-  padding: 4px 8px;
-  border: 1px solid transparent;
-  min-width: 80px;
-  pointer-events: none;
-}
-
-.canvasTitleInput {
+.canvasTitleStatic {
   font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
   font-size: 14px;
   font-weight: 600;
   color: var(--fgColor-muted, #656d76);
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  padding: 4px 8px;
   margin: 0;
-  outline: none;
-  width: 100%;
-  min-width: 0;
-  transition: border-color 150ms, background-color 150ms, color 150ms;
-}
-
-.canvasTitleInput:hover {
-  color: var(--fgColor-default, #1f2328);
-  border-color: var(--borderColor-default, #d1d9e0);
-  background: var(--bgColor-default, #ffffff);
-}
-
-.canvasTitleInput:focus {
-  color: var(--fgColor-default, #1f2328);
-  border-color: var(--bgColor-accent-emphasis, #2f81f7);
-  background: var(--bgColor-default, #ffffff);
-}
-
-.canvasTitleStatic {
-  composes: canvasTitleInput;
-  cursor: default;
-  pointer-events: none;
+  padding: 4px 8px;
+  white-space: nowrap;
 }
 
 /* Remove tiny-canvas wrapper clipping — widgets handle their own overflow/radius */
@@ -103,6 +66,12 @@
   overflow: visible;
 }
 
+/* Elevate stacking context for hovered/selected widgets so their chrome
+   (toolbar, menus, selection outline) renders above sibling widgets. */
+:global(.tc-drag:has([data-tc-elevated])) {
+  z-index: 1;
+}
+
 .localEditingLabel {
   display: inline-flex;
   align-items: center;
@@ -117,3 +86,57 @@
   pointer-events: none;
   user-select: none;
 }
+
+.ghInstallBanner {
+  position: fixed;
+  left: 50%;
+  bottom: 12px;
+  transform: translateX(-50%);
+  z-index: 15;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  border: 1px solid var(--borderColor-default, #d1d9e0);
+  background: color-mix(in srgb, var(--bgColor-default, #ffffff) 88%, transparent);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
+  backdrop-filter: blur(8px);
+  font-size: 12px;
+  color: var(--fgColor-default, #1f2328);
+}
+
+.ghInstallBannerText {
+  white-space: nowrap;
+}
+
+.ghInstallBannerText code {
+  font-size: 11px;
+  padding: 1px 4px;
+  border-radius: 4px;
+  background: var(--bgColor-muted, #f6f8fa);
+}
+
+.ghInstallBannerLink {
+  color: var(--fgColor-accent, #0969da);
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.ghInstallBannerLink:hover {
+  text-decoration: underline;
+}
+
+.ghInstallBannerDismiss {
+  border: 1px solid var(--borderColor-default, #d1d9e0);
+  background: var(--bgColor-default, #ffffff);
+  color: var(--fgColor-default, #1f2328);
+  border-radius: 6px;
+  font-size: 11px;
+  padding: 4px 8px;
+  cursor: pointer;
+}
+
+.ghInstallBannerDismiss:hover {
+  background: var(--bgColor-muted, #f6f8fa);
+}

package/src/canvas/CanvasPage.multiselect.test.jsx

@@ -103,6 +103,8 @@ vi.mock('./widgets/figmaUrl.js', () => ({
 
 vi.mock('./canvasApi.js', () => ({
   addWidget: vi.fn(),
+  checkGitHubCliAvailable: vi.fn(() => Promise.resolve({ available: true })),
+  fetchGitHubEmbed: vi.fn(() => Promise.resolve({ success: false })),
   updateCanvas: vi.fn(() => Promise.resolve({ success: true })),
   removeWidget: vi.fn(() => Promise.resolve({ success: true })),
   uploadImage: vi.fn(),
@@ -123,7 +125,7 @@ describe('CanvasPage multi-select', () => {
   })
 
   it('shift+click on select handle adds widget to selection', async () => {
-    render(<CanvasPage name="test-canvas" />)
+    render(<CanvasPage canvasId="test-canvas" />)
 
     // Select first widget
     fireEvent.click(screen.getByTestId('select-w1'))
@@ -138,7 +140,7 @@ describe('CanvasPage multi-select', () => {
   })
 
   it('shift+click on already selected widget removes it from selection', async () => {
-    render(<CanvasPage name="test-canvas" />)
+    render(<CanvasPage canvasId="test-canvas" />)
 
     // Select both
     fireEvent.click(screen.getByTestId('select-w1'))
@@ -155,7 +157,7 @@ describe('CanvasPage multi-select', () => {
   })
 
   it('normal click replaces multi-selection with single', async () => {
-    render(<CanvasPage name="test-canvas" />)
+    render(<CanvasPage canvasId="test-canvas" />)
 
     // Multi-select
     fireEvent.click(screen.getByTestId('select-w1'))
@@ -172,7 +174,7 @@ describe('CanvasPage multi-select', () => {
   })
 
   it('sets multiSelected on all selected widgets when multiple are selected', async () => {
-    render(<CanvasPage name="test-canvas" />)
+    render(<CanvasPage canvasId="test-canvas" />)
 
     fireEvent.click(screen.getByTestId('select-w1'))
     fireEvent.click(screen.getByTestId('shift-select-w2'))
@@ -185,7 +187,7 @@ describe('CanvasPage multi-select', () => {
   })
 
   it('Escape clears all selection', async () => {
-    render(<CanvasPage name="test-canvas" />)
+    render(<CanvasPage canvasId="test-canvas" />)
 
     fireEvent.click(screen.getByTestId('select-w1'))
     fireEvent.click(screen.getByTestId('shift-select-w2'))
@@ -199,7 +201,7 @@ describe('CanvasPage multi-select', () => {
   })
 
   it('Delete removes all selected widgets and calls updateCanvas', async () => {
-    render(<CanvasPage name="test-canvas" />)
+    render(<CanvasPage canvasId="test-canvas" />)
 
     // Multi-select w1 and w2
     fireEvent.click(screen.getByTestId('select-w1'))
@@ -224,7 +226,7 @@ describe('CanvasPage multi-select', () => {
   })
 
   it('single-select Delete uses removeWidget API', async () => {
-    render(<CanvasPage name="test-canvas" />)
+    render(<CanvasPage canvasId="test-canvas" />)
 
     fireEvent.click(screen.getByTestId('select-w1'))
     fireEvent.keyDown(document, { key: 'Backspace' })
@@ -234,7 +236,7 @@ describe('CanvasPage multi-select', () => {
   })
 
   it('multi-select move applies delta to all selected widgets', async () => {
-    render(<CanvasPage name="test-canvas" />)
+    render(<CanvasPage canvasId="test-canvas" />)
 
     // Multi-select w1 (100,100) and w2 (300,100)
     fireEvent.click(screen.getByTestId('select-w1'))
@@ -265,7 +267,7 @@ describe('CanvasPage multi-select', () => {
   })
 
   it('multi-select drag captures peer articles on drag start', async () => {
-    render(<CanvasPage name="test-canvas" />)
+    render(<CanvasPage canvasId="test-canvas" />)
 
     // Multi-select w1 and w2
     fireEvent.click(screen.getByTestId('select-w1'))
@@ -288,7 +290,7 @@ describe('CanvasPage multi-select', () => {
   })
 
   it('multi-select drag preserves selection after drag end', async () => {
-    render(<CanvasPage name="test-canvas" />)
+    render(<CanvasPage canvasId="test-canvas" />)
 
     // Multi-select w1 and w2
     fireEvent.click(screen.getByTestId('select-w1'))
@@ -313,7 +315,7 @@ describe('CanvasPage multi-select', () => {
   })
 
   it('any selected widget can serve as drag handler for the group', async () => {
-    render(<CanvasPage name="test-canvas" />)
+    render(<CanvasPage canvasId="test-canvas" />)
 
     // Multi-select w1 (100,100), w2 (300,100), w3 (500,200)
     fireEvent.click(screen.getByTestId('select-w1'))

package/src/canvas/CanvasToolbar.jsx

@@ -9,7 +9,7 @@ const WIDGET_TYPES = getMenuWidgetTypes()
 /**
  * Floating toolbar for adding widgets to a canvas.
  */
-export default function CanvasToolbar({ canvasName, onWidgetAdded }) {
+export default function CanvasToolbar({ canvasId, onWidgetAdded }) {
   const [open, setOpen] = useState(false)
   const [adding, setAdding] = useState(false)
 
@@ -18,7 +18,7 @@ export default function CanvasToolbar({ canvasName, onWidgetAdded }) {
     setAdding(true)
     try {
       const defaultProps = schemas[type] ? getDefaults(schemas[type]) : {}
-      const result = await addWidgetApi(canvasName, {
+      const result = await addWidgetApi(canvasId, {
         type,
         props: defaultProps,
         position: { x: 0, y: 0 },

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/PageSelector.jsx

@@ -0,0 +1,198 @@
+import { useCallback, useRef, useState, useEffect } from 'react'
+import { createCanvas } from './canvasApi.js'
+import styles from './PageSelector.module.css'
+
+/**
+ * In-canvas page selector — shows sibling pages in the same canvas group.
+ * Only renders when 2+ sibling pages exist.
+ * Uses window.location for navigation to avoid requiring a Router context.
+ *
+ * @param {{ currentName: string, pages: Array<{ name: string, route: string, title: string }>, isLocalDev?: boolean }} props
+ */
+export default function PageSelector({ currentName, pages, isLocalDev = false }) {
+  const [open, setOpen] = useState(false)
+  const [adding, setAdding] = useState(false)
+  const [newName, setNewName] = useState('')
+  const [creating, setCreating] = useState(false)
+  const containerRef = useRef(null)
+  const inputRef = useRef(null)
+
+  const currentPage = pages.find((p) => p.name === currentName)
+  const currentLabel = currentPage?.title || currentName.split('/').pop()
+  const currentIndex = pages.findIndex((p) => p.name === currentName)
+
+  // Derive folder from currentName (e.g. "Examples/Design Overview" → "Examples")
+  const folder = currentName.includes('/') ? currentName.split('/')[0] : ''
+
+  const handleSelect = useCallback(
+    (page) => {
+      if (page.name !== currentName) {
+        const base = (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
+        window.location.href = base + page.route
+      }
+      setOpen(false)
+    },
+    [currentName],
+  )
+
+  const handleAddPage = useCallback(async () => {
+    const trimmed = newName.trim()
+    if (!trimmed || creating) return
+    setCreating(true)
+    try {
+      const result = await createCanvas({ name: trimmed, folder: folder || undefined })
+      if (result.error) {
+        console.error('Failed to create canvas page:', result.error)
+        setCreating(false)
+        return
+      }
+      // Navigate to the new page once Vite picks it up
+      const kebab = trimmed
+        .replace(/[^a-zA-Z0-9\s_-]/g, '')
+        .trim()
+        .replace(/[\s_]+/g, '-')
+        .toLowerCase()
+        .replace(/-+/g, '-')
+        .replace(/^-|-$/g, '')
+      const route = folder ? `/${folder}/${kebab}` : `/${kebab}`
+      const base = (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
+      // Small delay to let Vite detect the new file
+      setTimeout(() => { window.location.href = base + route }, 600)
+    } catch (err) {
+      console.error('Failed to create canvas page:', err)
+      setCreating(false)
+    }
+  }, [newName, folder, creating])
+
+  // Focus input when entering add mode
+  useEffect(() => {
+    if (adding && inputRef.current) inputRef.current.focus()
+  }, [adding])
+
+  // Close on outside click
+  useEffect(() => {
+    if (!open) return
+    function handleClick(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false)
+        setAdding(false)
+        setNewName('')
+      }
+    }
+    document.addEventListener('mousedown', handleClick)
+    return () => document.removeEventListener('mousedown', handleClick)
+  }, [open])
+
+  // Close on Escape
+  useEffect(() => {
+    if (!open) return
+    function handleKey(e) {
+      if (e.key === 'Escape') {
+        if (adding) {
+          setAdding(false)
+          setNewName('')
+        } else {
+          setOpen(false)
+        }
+      }
+    }
+    document.addEventListener('keydown', handleKey)
+    return () => document.removeEventListener('keydown', handleKey)
+  }, [open, adding])
+
+  if (!pages || pages.length < 2) return null
+
+  return (
+    <nav ref={containerRef} className={styles.container} aria-label="Canvas pages">
+      <button
+        className={styles.trigger}
+        onClick={() => setOpen((v) => !v)}
+        aria-expanded={open}
+        aria-haspopup="listbox"
+        title="Switch canvas page"
+      >
+        <span className={styles.label}>{currentLabel}</span>
+        <span className={styles.badge}>
+          {currentIndex + 1}/{pages.length}
+        </span>
+        <svg
+          className={`${styles.chevron} ${open ? styles.chevronOpen : ''}`}
+          width="12"
+          height="12"
+          viewBox="0 0 12 12"
+          fill="none"
+          aria-hidden="true"
+        >
+          <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      </button>
+      {open && (
+        <ul className={styles.menu} role="listbox" aria-label="Canvas pages">
+          {pages.map((page) => (
+            <li
+              key={page.name}
+              role="option"
+              aria-selected={page.name === currentName}
+              className={`${styles.item} ${page.name === currentName ? styles.itemActive : ''}`}
+              onClick={() => handleSelect(page)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault()
+                  handleSelect(page)
+                }
+              }}
+              tabIndex={0}
+            >
+              {page.title}
+            </li>
+          ))}
+          {isLocalDev && (
+            <>
+              <li className={styles.separator} role="separator" />
+              {adding ? (
+                <li className={styles.addForm}>
+                  <input
+                    ref={inputRef}
+                    className={styles.addInput}
+                    type="text"
+                    placeholder="Page name"
+                    value={newName}
+                    onChange={(e) => setNewName(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') {
+                        e.preventDefault()
+                        handleAddPage()
+                      }
+                    }}
+                    disabled={creating}
+                  />
+                  <button
+                    className={styles.addSubmit}
+                    onClick={handleAddPage}
+                    disabled={!newName.trim() || creating}
+                  >
+                    {creating ? '…' : 'Add'}
+                  </button>
+                </li>
+              ) : (
+                <li
+                  className={styles.addItem}
+                  onClick={() => setAdding(true)}
+                  tabIndex={0}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      e.preventDefault()
+                      setAdding(true)
+                    }
+                  }}
+                >
+                  + Add new page
+                </li>
+              )}
+            </>
+          )}
+        </ul>
+      )}
+    </nav>
+  )
+}

package/src/canvas/PageSelector.module.css

@@ -0,0 +1,158 @@
+.container {
+  position: relative;
+  font-size: 13px;
+}
+
+.trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 10px;
+  border: 1px solid var(--borderColor-default, rgba(0, 0, 0, 0.15));
+  border-radius: 6px;
+  background: var(--bgColor-default, #fff);
+  color: var(--fgColor-default, #1f2328);
+  cursor: pointer;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  transition: border-color 0.15s, box-shadow 0.15s;
+  line-height: 1;
+}
+
+.trigger:hover {
+  border-color: var(--borderColor-emphasis, rgba(0, 0, 0, 0.3));
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
+}
+
+.label {
+  font-weight: 600;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.badge {
+  font-size: 11px;
+  color: var(--fgColor-muted, #656d76);
+  font-variant-numeric: tabular-nums;
+}
+
+.chevron {
+  color: var(--fgColor-muted, #656d76);
+  transition: transform 0.15s;
+  flex-shrink: 0;
+}
+
+.chevronOpen {
+  transform: rotate(180deg);
+}
+
+.menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  min-width: 180px;
+  max-width: 300px;
+  max-height: 320px;
+  overflow-y: auto;
+  margin: 0;
+  padding: 4px;
+  list-style: none;
+  background: var(--bgColor-default, #fff);
+  border: 1px solid var(--borderColor-default, rgba(0, 0, 0, 0.15));
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+}
+
+.item {
+  padding: 6px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--fgColor-default, #1f2328);
+}
+
+.item:hover {
+  background: var(--bgColor-muted, #f6f8fa);
+}
+
+.item:focus-visible {
+  outline: 2px solid var(--focus-outlineColor, #0969da);
+  outline-offset: -2px;
+}
+
+.itemActive {
+  font-weight: 600;
+  background: var(--bgColor-accent-muted, #ddf4ff);
+}
+
+.itemActive:hover {
+  background: var(--bgColor-accent-muted, #ddf4ff);
+}
+
+.separator {
+  height: 1px;
+  background: var(--borderColor-default, rgba(0, 0, 0, 0.15));
+  margin: 4px 8px;
+  list-style: none;
+}
+
+.addItem {
+  padding: 6px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  white-space: nowrap;
+  color: var(--fgColor-muted, #656d76);
+  font-size: 12px;
+}
+
+.addItem:hover {
+  background: var(--bgColor-muted, #f6f8fa);
+  color: var(--fgColor-default, #1f2328);
+}
+
+.addForm {
+  display: flex;
+  gap: 4px;
+  padding: 4px 6px;
+  list-style: none;
+}
+
+.addInput {
+  flex: 1;
+  min-width: 0;
+  padding: 4px 8px;
+  border: 1px solid var(--borderColor-default, rgba(0, 0, 0, 0.15));
+  border-radius: 4px;
+  font-size: 12px;
+  font-family: inherit;
+  outline: none;
+}
+
+.addInput:focus {
+  border-color: var(--focus-outlineColor, #0969da);
+  box-shadow: 0 0 0 2px rgba(9, 105, 218, 0.3);
+}
+
+.addSubmit {
+  padding: 4px 10px;
+  border: none;
+  border-radius: 4px;
+  background: var(--bgColor-accent-emphasis, #0969da);
+  color: #fff;
+  font-size: 12px;
+  font-family: inherit;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.addSubmit:hover {
+  opacity: 0.9;
+}
+
+.addSubmit:disabled {
+  opacity: 0.5;
+  cursor: default;
+}