@dfosco/storyboard-react 4.0.0-beta.9 → 4.0.0

package/src/canvas/CanvasControls.jsx

@@ -1,5 +1,6 @@
 import { useState, useRef, useEffect, useCallback } from 'react'
 import { getMenuWidgetTypes } from './widgets/widgetConfig.js'
+import { listStories, getStoryData } from '@dfosco/storyboard-core'
 import styles from './CanvasControls.module.css'
 
 const WIDGET_TYPES = getMenuWidgetTypes()
@@ -9,6 +10,7 @@ const WIDGET_TYPES = getMenuWidgetTypes()
  */
 export default function CanvasControls({ onAddWidget }) {
   const [menuOpen, setMenuOpen] = useState(false)
+  const [storyPicker, setStoryPicker] = useState(false)
   const menuRef = useRef(null)
 
   // Close menu on outside click
@@ -17,6 +19,7 @@ export default function CanvasControls({ onAddWidget }) {
     function handlePointerDown(e) {
       if (menuRef.current && !menuRef.current.contains(e.target)) {
         setMenuOpen(false)
+        setStoryPicker(false)
       }
     }
     document.addEventListener('pointerdown', handlePointerDown)
@@ -26,14 +29,23 @@ export default function CanvasControls({ onAddWidget }) {
   const handleAddWidget = useCallback((type) => {
     onAddWidget(type)
     setMenuOpen(false)
+    setStoryPicker(false)
   }, [onAddWidget])
 
+  const handleAddStory = useCallback((storyId) => {
+    document.dispatchEvent(new CustomEvent('storyboard:canvas:add-story-widget', { detail: { storyId } }))
+    setMenuOpen(false)
+    setStoryPicker(false)
+  }, [])
+
+  const storyNames = storyPicker ? listStories() : []
+
   return (
     <div className={styles.toolbar} role="toolbar" aria-label="Canvas controls">
       <div ref={menuRef} className={styles.createGroup}>
         <button
           className={styles.btn}
-          onClick={() => setMenuOpen((v) => !v)}
+          onClick={() => { setMenuOpen((v) => !v); setStoryPicker(false) }}
           aria-label="Add widget"
           aria-expanded={menuOpen}
           title="Add widget"
@@ -42,7 +54,7 @@ export default function CanvasControls({ onAddWidget }) {
             <path d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2Z" />
           </svg>
         </button>
-        {menuOpen && (
+        {menuOpen && !storyPicker && (
           <div className={styles.menu} role="menu">
             <div className={styles.menuLabel}>Add to canvas</div>
             {WIDGET_TYPES.map((wt) => (
@@ -55,6 +67,43 @@ export default function CanvasControls({ onAddWidget }) {
                 {wt.label}
               </button>
             ))}
+            <div className={styles.menuDivider} />
+            <button
+              className={styles.menuItem}
+              role="menuitem"
+              onClick={() => setStoryPicker(true)}
+            >
+              📖 Component
+            </button>
+          </div>
+        )}
+        {menuOpen && storyPicker && (
+          <div className={styles.menu} role="menu">
+            <div className={styles.menuLabel}>
+              <button
+                className={styles.backBtn}
+                onClick={() => setStoryPicker(false)}
+                aria-label="Back"
+              >←</button>
+              Select component
+            </div>
+            {storyNames.length === 0 && (
+              <div className={styles.menuEmpty}>No stories found</div>
+            )}
+            {storyNames.map((name) => {
+              const story = getStoryData(name)
+              return (
+                <button
+                  key={name}
+                  className={styles.menuItem}
+                  role="menuitem"
+                  onClick={() => handleAddStory(name)}
+                >
+                  {name}
+                  {story?._route && <span className={styles.menuHint}>{story._route}</span>}
+                </button>
+              )
+            })}
           </div>
         )}
       </div>

package/src/canvas/CanvasControls.module.css

@@ -102,3 +102,34 @@
 .menuItem:hover {
   background: var(--bgColor-muted, #f6f8fa);
 }
+
+.menuDivider {
+  height: 1px;
+  margin: 4px 8px;
+  background: var(--borderColor-muted, rgba(0, 0, 0, 0.1));
+}
+
+.menuHint {
+  font-size: 11px;
+  color: var(--fgColor-muted, #656d76);
+  margin-left: 8px;
+}
+
+.menuEmpty {
+  padding: 8px 10px;
+  font-size: 12px;
+  color: var(--fgColor-muted, #656d76);
+  font-style: italic;
+}
+
+.backBtn {
+  all: unset;
+  cursor: pointer;
+  margin-right: 4px;
+  font-size: 13px;
+  color: var(--fgColor-muted, #656d76);
+}
+
+.backBtn:hover {
+  color: var(--fgColor-default, #1f2328);
+}

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

@@ -1,7 +1,7 @@
-import { fireEvent, render, screen, act } from '@testing-library/react'
+import { fireEvent, render, screen, act, waitFor } from '@testing-library/react'
 import CanvasPage from './CanvasPage.jsx'
 import { getCanvasPrimerAttrs, getCanvasThemeVars } from './canvasTheme.js'
-import { updateCanvas } from './canvasApi.js'
+import { addWidget, checkGitHubCliAvailable, fetchGitHubEmbed, updateCanvas } from './canvasApi.js'
 
 vi.mock('@dfosco/tiny-canvas', () => ({
   Canvas: ({ children, onDragEnd }) => (
@@ -77,6 +77,8 @@ vi.mock('./widgets/figmaUrl.js', () => ({
 
 vi.mock('./canvasApi.js', () => ({
   addWidget: vi.fn(),
+  checkGitHubCliAvailable: vi.fn(),
+  fetchGitHubEmbed: vi.fn(),
   updateCanvas: vi.fn(() => Promise.resolve({ success: true })),
   removeWidget: vi.fn(),
   uploadImage: vi.fn(),
@@ -94,9 +96,26 @@ vi.mock('./useUndoRedo.js', () => ({
 }))
 
 describe('CanvasPage canvas bridge', () => {
+  function dispatchTextPaste(text) {
+    const event = new Event('paste', { bubbles: true, cancelable: true })
+    Object.defineProperty(event, 'clipboardData', {
+      value: {
+        getData: (type) => (type === 'text/plain' ? text : ''),
+        items: [],
+      },
+    })
+    document.dispatchEvent(event)
+  }
+
   beforeEach(() => {
     delete window.__storyboardCanvasBridgeState
     vi.clearAllMocks()
+    addWidget.mockResolvedValue({
+      success: true,
+      widget: { id: 'widget-link', type: 'link-preview', position: { x: 0, y: 0 }, props: {} },
+    })
+    checkGitHubCliAvailable.mockResolvedValue({ available: true })
+    fetchGitHubEmbed.mockResolvedValue({ success: false })
   })
 
   it('publishes bridge state and responds to status requests', () => {
@@ -105,11 +124,11 @@ describe('CanvasPage canvas bridge', () => {
     document.addEventListener('storyboard:canvas:mounted', mountedHandler)
     document.addEventListener('storyboard:canvas:status', statusHandler)
 
-    const { unmount } = render(<CanvasPage name="design-overview" />)
+    const { unmount } = render(<CanvasPage canvasId="design-overview" />)
 
     expect(window.__storyboardCanvasBridgeState).toEqual({
       active: true,
-      name: 'design-overview',
+      canvasId: 'design-overview',
       zoom: 100,
     })
     expect(mountedHandler).toHaveBeenCalled()
@@ -118,7 +137,7 @@ describe('CanvasPage canvas bridge', () => {
     expect(statusHandler).toHaveBeenCalled()
     expect(statusHandler.mock.calls.at(-1)?.[0]?.detail).toEqual({
       active: true,
-      name: 'design-overview',
+      canvasId: 'design-overview',
       zoom: 100,
     })
 
@@ -132,22 +151,88 @@ describe('CanvasPage canvas bridge', () => {
     const unmountedHandler = vi.fn()
     document.addEventListener('storyboard:canvas:unmounted', unmountedHandler)
 
-    const { unmount } = render(<CanvasPage name="design-overview" />)
+    const { unmount } = render(<CanvasPage canvasId="design-overview" />)
     unmount()
 
     expect(unmountedHandler).toHaveBeenCalled()
     expect(window.__storyboardCanvasBridgeState).toEqual({
       active: false,
-      name: '',
+      canvasId: '',
       zoom: 100,
     })
 
     document.removeEventListener('storyboard:canvas:unmounted', unmountedHandler)
   })
 
-  it.skip('persists dragged JSON widgets and JSX sources to canvas JSONL via update API', async () => {
+  it('shows gh install banner when gh is unavailable during GitHub URL paste', async () => {
+    checkGitHubCliAvailable.mockResolvedValue({
+      available: false,
+      installUrl: 'https://github.com/cli/cli',
+    })
+
     render(<CanvasPage name="design-overview" />)
 
+    await act(async () => {
+      dispatchTextPaste('https://github.com/dfosco/storyboard/issues/42')
+      await Promise.resolve()
+    })
+
+    await waitFor(() => {
+      expect(addWidget).toHaveBeenCalled()
+    })
+    expect(fetchGitHubEmbed).not.toHaveBeenCalled()
+    expect(screen.getByRole('link', { name: 'Install GitHub CLI' })).toHaveAttribute(
+      'href',
+      'https://github.com/cli/cli',
+    )
+  })
+
+  it('hydrates GitHub metadata when gh is available during paste', async () => {
+    checkGitHubCliAvailable.mockResolvedValue({ available: true })
+    fetchGitHubEmbed.mockResolvedValue({
+      success: true,
+      snapshot: {
+        kind: 'issue',
+        parentKind: 'issue',
+        context: 'GitHub · dfosco/storyboard · Issue #42',
+        title: '#42 Ship GitHub embeds',
+        body: 'Details from GitHub',
+        authors: ['dfosco'],
+        createdAt: '2026-01-01T00:00:00Z',
+        updatedAt: '2026-01-02T00:00:00Z',
+      },
+    })
+
+    render(<CanvasPage name="design-overview" />)
+
+    await act(async () => {
+      dispatchTextPaste('https://github.com/dfosco/storyboard/issues/42')
+      await Promise.resolve()
+    })
+
+    await waitFor(() => {
+      expect(fetchGitHubEmbed).toHaveBeenCalledWith('https://github.com/dfosco/storyboard/issues/42')
+    })
+    expect(addWidget).toHaveBeenCalledWith(
+      'design-overview',
+      expect.objectContaining({
+        type: 'link-preview',
+        props: expect.objectContaining({
+          title: '#42 Ship GitHub embeds',
+          width: 580,
+          height: 400,
+          github: expect.objectContaining({
+            context: 'GitHub · dfosco/storyboard · Issue #42',
+            body: 'Details from GitHub',
+          }),
+        }),
+      }),
+    )
+  })
+
+  it.skip('persists dragged JSON widgets and JSX sources to canvas JSONL via update API', async () => {
+    render(<CanvasPage canvasId="design-overview" />)
+
     fireEvent.click(screen.getByTestId('drag-widget'))
     // Flush the promise-based write queue
     await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
@@ -179,7 +264,7 @@ describe('CanvasPage canvas bridge', () => {
   })
 
   it.skip('clamps negative drag positions to zero', async () => {
-    render(<CanvasPage name="design-overview" />)
+    render(<CanvasPage canvasId="design-overview" />)
 
     fireEvent.click(screen.getByTestId('drag-widget-negative'))
     await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
@@ -198,17 +283,40 @@ describe('CanvasPage canvas bridge', () => {
 })
 
 describe('getCanvasThemeVars', () => {
-  it('returns a distinct dark-dimmed background token', () => {
+  it('returns correct tokens for each theme', () => {
     expect(getCanvasThemeVars('light')['--sb--canvas-bg']).toBe('#f6f8fa')
     expect(getCanvasThemeVars('light')['--tc-bg-muted']).toBe('#f6f8fa')
-    expect(getCanvasThemeVars('dark')['--sb--canvas-bg']).toBe('#161b22')
-    expect(getCanvasThemeVars('dark')['--bgColor-muted']).toBe('#161b22')
-    expect(getCanvasThemeVars('dark')['--tc-bg-muted']).toBe('#161b22')
-    expect(getCanvasThemeVars('dark_dimmed')['--sb--canvas-bg']).toBe('#22272e')
-    expect(getCanvasThemeVars('dark_dimmed')['--bgColor-muted']).toBe('#22272e')
-    expect(getCanvasThemeVars('dark_dimmed')['--tc-bg-muted']).toBe('#22272e')
-    expect(getCanvasThemeVars('dark_dimmed')['--tc-dot-color']).toBe('rgba(205, 217, 229, 0.22)')
-    expect(getCanvasThemeVars('dark_dimmed')['--overlay-backdrop-bgColor']).toBe('rgba(205, 217, 229, 0.22)')
+    expect(getCanvasThemeVars('dark')['--sb--canvas-bg']).toBe('#151b23')
+    expect(getCanvasThemeVars('dark')['--bgColor-muted']).toBe('#151b23')
+    expect(getCanvasThemeVars('dark')['--tc-bg-muted']).toBe('#151b23')
+    expect(getCanvasThemeVars('dark_dimmed')['--sb--canvas-bg']).toBe('#262c36')
+    expect(getCanvasThemeVars('dark_dimmed')['--bgColor-muted']).toBe('#262c36')
+    expect(getCanvasThemeVars('dark_dimmed')['--tc-bg-muted']).toBe('#262c36')
+    expect(getCanvasThemeVars('dark_dimmed')['--tc-dot-color']).toBe('rgba(209, 215, 224, 0.18)')
+    expect(getCanvasThemeVars('dark_dimmed')['--overlay-backdrop-bgColor']).toBe('rgba(209, 215, 224, 0.18)')
+  })
+
+  it('returns distinct values for dark_high_contrast', () => {
+    const vars = getCanvasThemeVars('dark_high_contrast')
+    expect(vars['--bgColor-default']).toBe('#010409')
+    expect(vars['--borderColor-default']).toBe('#b7bdc8')
+    expect(vars['--fgColor-default']).toBe('#ffffff')
+  })
+
+  it('returns distinct values for dark_colorblind', () => {
+    const vars = getCanvasThemeVars('dark_colorblind')
+    expect(vars['--bgColor-default']).toBe('#0d1117')
+    expect(vars['--fgColor-muted']).toBe('#9198a1')
+  })
+
+  it('returns distinct values for light_colorblind', () => {
+    const vars = getCanvasThemeVars('light_colorblind')
+    expect(vars['--bgColor-default']).toBe('#ffffff')
+    expect(vars['--fgColor-muted']).toBe('#59636e')
+  })
+
+  it('falls back to light for unknown themes', () => {
+    expect(getCanvasThemeVars('unknown')).toEqual(getCanvasThemeVars('light'))
   })
 })
 
@@ -219,6 +327,11 @@ describe('getCanvasPrimerAttrs', () => {
       'data-dark-theme': 'dark',
       'data-light-theme': 'light',
     })
+    expect(getCanvasPrimerAttrs('light_colorblind')).toEqual({
+      'data-color-mode': 'light',
+      'data-dark-theme': 'dark',
+      'data-light-theme': 'light_colorblind',
+    })
     expect(getCanvasPrimerAttrs('dark')).toEqual({
       'data-color-mode': 'dark',
       'data-dark-theme': 'dark',
@@ -229,6 +342,16 @@ describe('getCanvasPrimerAttrs', () => {
       'data-dark-theme': 'dark_dimmed',
       'data-light-theme': 'light',
     })
+    expect(getCanvasPrimerAttrs('dark_high_contrast')).toEqual({
+      'data-color-mode': 'dark',
+      'data-dark-theme': 'dark_high_contrast',
+      'data-light-theme': 'light',
+    })
+    expect(getCanvasPrimerAttrs('dark_colorblind')).toEqual({
+      'data-color-mode': 'dark',
+      'data-dark-theme': 'dark_colorblind',
+      'data-light-theme': 'light',
+    })
   })
 })
 
@@ -243,7 +366,7 @@ describe('canvas target fallback', () => {
     localStorage.setItem('sb-color-scheme', 'dark')
     document.documentElement.setAttribute('data-sb-canvas-theme', 'dark')
 
-    render(<CanvasPage name="design-overview" />)
+    render(<CanvasPage canvasId="design-overview" />)
 
     const scroll = document.querySelector('[data-storyboard-canvas-scroll]')
     const jsxWidget = document.getElementById('jsx-PrimaryButtons')