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

package/src/canvas/widgets/codepenUrl.js

@@ -0,0 +1,75 @@
+/**
+ * CodePen URL utilities — parse, validate, and convert CodePen URLs
+ * to their embeddable format.
+ *
+ * Supported URL formats:
+ *   https://codepen.io/{user}/pen/{penId}
+ *   https://codepen.io/{user}/full/{penId}
+ *   https://codepen.io/{user}/details/{penId}
+ *   https://codepen.io/{user}/embed/{penId}
+ */
+
+const CODEPEN_RE = /^https?:\/\/codepen\.io\/([^/]+)\/(pen|full|details|embed)\/([A-Za-z0-9]+)/
+
+/**
+ * Check if a URL is a valid CodePen pen URL.
+ */
+export function isCodePenUrl(url) {
+  if (!url) return false
+  return CODEPEN_RE.test(url)
+}
+
+/**
+ * Convert any CodePen pen URL to the embed format.
+ * Defaults to showing the result tab with a dark theme.
+ */
+export function toCodePenEmbedUrl(url) {
+  const m = url?.match(CODEPEN_RE)
+  if (!m) return ''
+  const [, user, , penId] = m
+  return `https://codepen.io/${user}/embed/${penId}?default-tab=result&editable=true`
+}
+
+/**
+ * Extract a fallback title from a CodePen URL (user/penId).
+ */
+export function getCodePenTitle(url) {
+  const m = url?.match(CODEPEN_RE)
+  if (!m) return 'CodePen'
+  return `${m[1]}/${m[3]}`
+}
+
+/**
+ * Extract the username from a CodePen URL.
+ */
+export function getCodePenUser(url) {
+  const m = url?.match(CODEPEN_RE)
+  return m?.[1] || ''
+}
+
+/** In-memory cache for oEmbed results keyed by pen URL. */
+const _oembedCache = new Map()
+
+/**
+ * Fetch pen metadata (title, author_name) via CodePen's oEmbed API.
+ * Returns `{ title, author }` or null on failure. Results are cached.
+ */
+export async function fetchCodePenMeta(url) {
+  if (!url || !isCodePenUrl(url)) return null
+  if (_oembedCache.has(url)) return _oembedCache.get(url)
+
+  try {
+    const endpoint = `https://codepen.io/api/oembed?url=${encodeURIComponent(url)}&format=json`
+    const res = await fetch(endpoint)
+    if (!res.ok) return null
+    const data = await res.json()
+    const meta = {
+      title: data.title || '',
+      author: data.author_name || '',
+    }
+    _oembedCache.set(url, meta)
+    return meta
+  } catch {
+    return null
+  }
+}

package/src/canvas/widgets/codepenUrl.test.js

@@ -0,0 +1,76 @@
+/**
+ * Tests for CodePen URL utilities.
+ */
+import { describe, it, expect } from 'vitest'
+import { isCodePenUrl, toCodePenEmbedUrl, getCodePenTitle, getCodePenUser } from './codepenUrl.js'
+
+describe('isCodePenUrl', () => {
+  it('returns true for pen URLs', () => {
+    expect(isCodePenUrl('https://codepen.io/Calleb/pen/jEMXgvq')).toBe(true)
+  })
+
+  it('returns true for full view URLs', () => {
+    expect(isCodePenUrl('https://codepen.io/Calleb/full/jEMXgvq')).toBe(true)
+  })
+
+  it('returns true for details URLs', () => {
+    expect(isCodePenUrl('https://codepen.io/Calleb/details/jEMXgvq')).toBe(true)
+  })
+
+  it('returns true for embed URLs', () => {
+    expect(isCodePenUrl('https://codepen.io/Calleb/embed/jEMXgvq')).toBe(true)
+  })
+
+  it('returns false for non-CodePen URLs', () => {
+    expect(isCodePenUrl('https://example.com')).toBe(false)
+    expect(isCodePenUrl('https://figma.com/design/abc')).toBe(false)
+  })
+
+  it('returns false for CodePen homepage', () => {
+    expect(isCodePenUrl('https://codepen.io')).toBe(false)
+    expect(isCodePenUrl('https://codepen.io/Calleb')).toBe(false)
+  })
+
+  it('returns false for null/empty', () => {
+    expect(isCodePenUrl(null)).toBe(false)
+    expect(isCodePenUrl('')).toBe(false)
+  })
+})
+
+describe('toCodePenEmbedUrl', () => {
+  it('converts pen URL to embed format', () => {
+    const result = toCodePenEmbedUrl('https://codepen.io/Calleb/pen/jEMXgvq')
+    expect(result).toBe('https://codepen.io/Calleb/embed/jEMXgvq?default-tab=result&editable=true')
+  })
+
+  it('converts full URL to embed format', () => {
+    const result = toCodePenEmbedUrl('https://codepen.io/Calleb/full/jEMXgvq')
+    expect(result).toBe('https://codepen.io/Calleb/embed/jEMXgvq?default-tab=result&editable=true')
+  })
+
+  it('returns empty string for invalid URL', () => {
+    expect(toCodePenEmbedUrl('https://example.com')).toBe('')
+    expect(toCodePenEmbedUrl(null)).toBe('')
+  })
+})
+
+describe('getCodePenTitle', () => {
+  it('extracts user/penId from URL', () => {
+    expect(getCodePenTitle('https://codepen.io/Calleb/pen/jEMXgvq')).toBe('Calleb/jEMXgvq')
+  })
+
+  it('returns "CodePen" for invalid URL', () => {
+    expect(getCodePenTitle('https://example.com')).toBe('CodePen')
+    expect(getCodePenTitle(null)).toBe('CodePen')
+  })
+})
+
+describe('getCodePenUser', () => {
+  it('extracts username', () => {
+    expect(getCodePenUser('https://codepen.io/Calleb/pen/jEMXgvq')).toBe('Calleb')
+  })
+
+  it('returns empty for invalid URL', () => {
+    expect(getCodePenUser('https://example.com')).toBe('')
+  })
+})

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

@@ -0,0 +1,235 @@
+/**
+ * Tests for embed interaction UX (click-to-interact overlay).
+ */
+import { describe, it, expect, vi } from 'vitest'
+import { render, fireEvent, screen } from '@testing-library/react'
+import PrototypeEmbed from './PrototypeEmbed.jsx'
+import FigmaEmbed from './FigmaEmbed.jsx'
+import ComponentWidget from './ComponentWidget.jsx'
+import StoryWidget from './StoryWidget.jsx'
+
+// Mock buildPrototypeIndex for PrototypeEmbed
+vi.mock('@dfosco/storyboard-core', () => ({
+  buildPrototypeIndex: () => ({
+    folders: [],
+    prototypes: [
+      {
+        name: 'Design Overview',
+        dirName: 'examples',
+        isExternal: false,
+        hideFlows: true,
+        flows: [{ route: '/test', name: 'default', meta: { title: 'Design Overview' } }],
+      },
+    ],
+    globalFlows: [],
+    sorted: { title: { prototypes: [], folders: [] } },
+  }),
+  getStoryData: (storyId) => ({ _route: `/components/${storyId}` }),
+}))
+
+// Simple mock wrapper for WidgetWrapper
+vi.mock('./WidgetWrapper.jsx', () => ({
+  default: ({ children }) => <div data-testid="widget-wrapper">{children}</div>,
+}))
+
+vi.mock('@dfosco/storyboard-core/inspector/highlighter', () => ({
+  createInspectorHighlighter: async () => ({
+    codeToHtml: () => '<pre><code></code></pre>',
+  }),
+}))
+
+// Mock ResizeHandle
+vi.mock('./ResizeHandle.jsx', () => ({
+  default: () => <div data-testid="resize-handle" />,
+}))
+
+// Mock ComponentErrorBoundary
+vi.mock('../ComponentErrorBoundary.jsx', () => ({
+  default: ({ children }) => <div data-testid="error-boundary">{children}</div>,
+}))
+
+describe('Embed interaction overlay', () => {
+  describe('PrototypeEmbed', () => {
+    const defaultProps = {
+      props: { src: '/test', width: 400, height: 300, zoom: 100 },
+      onUpdate: vi.fn(),
+      resizable: false,
+    }
+
+    it('renders "Click to open" hint when no snapshot exists', () => {
+      render(<PrototypeEmbed {...defaultProps} />)
+      
+      const hint = screen.getByText('Click to open')
+      expect(hint).toBeInTheDocument()
+      // CSS modules mangle class names, just check the element exists
+    })
+
+    it('enters interactive mode on single click (not double-click)', async () => {
+      const { container } = render(<PrototypeEmbed {...defaultProps} />)
+      
+      // Overlay should exist before interaction
+      const overlay = screen.getByRole('button', { name: /click to open/i })
+      expect(overlay).toBeInTheDocument()
+      expect(container.querySelector('iframe')).not.toBeInTheDocument()
+      expect(screen.getByText('Design Overview')).toBeInTheDocument()
+      
+      // Single click should remove the overlay (enter interactive mode)
+      fireEvent.click(overlay)
+      
+      // Overlay should no longer exist
+      expect(screen.queryByRole('button', { name: /click to open/i })).not.toBeInTheDocument()
+      expect(container.querySelector('iframe')).toBeInTheDocument()
+
+      fireEvent.pointerDown(document.body)
+      expect(screen.getByRole('button', { name: /click to open/i })).toBeInTheDocument()
+      expect(container.querySelector('iframe')).not.toBeInTheDocument()
+    })
+
+    it('does not enter interactive mode on shift+click (preserves multi-select)', () => {
+      render(<PrototypeEmbed {...defaultProps} />)
+      
+      const overlay = screen.getByRole('button', { name: /click to open/i })
+      fireEvent.click(overlay, { shiftKey: true })
+      
+      // Overlay should still exist (did not enter interactive mode)
+      expect(screen.getByRole('button', { name: /click to open/i })).toBeInTheDocument()
+    })
+
+    it('does not enter interactive mode on meta+click (preserves multi-select)', () => {
+      render(<PrototypeEmbed {...defaultProps} />)
+      
+      const overlay = screen.getByRole('button', { name: /click to open/i })
+      fireEvent.click(overlay, { metaKey: true })
+      
+      expect(screen.getByRole('button', { name: /click to open/i })).toBeInTheDocument()
+    })
+
+    it('supports keyboard interaction (Enter key) with event prevention', () => {
+      render(<PrototypeEmbed {...defaultProps} />)
+      
+      const overlay = screen.getByRole('button', { name: /click to open/i })
+      const event = { key: 'Enter', preventDefault: vi.fn(), stopPropagation: vi.fn() }
+      fireEvent.keyDown(overlay, event)
+      
+      expect(screen.queryByRole('button', { name: /click to open/i })).not.toBeInTheDocument()
+    })
+
+    it('supports keyboard interaction (Space key) with event prevention', () => {
+      render(<PrototypeEmbed {...defaultProps} />)
+      
+      const overlay = screen.getByRole('button', { name: /click to open/i })
+      const event = { key: ' ', preventDefault: vi.fn(), stopPropagation: vi.fn() }
+      fireEvent.keyDown(overlay, event)
+      
+      expect(screen.queryByRole('button', { name: /click to open/i })).not.toBeInTheDocument()
+    })
+  })
+
+  describe('FigmaEmbed', () => {
+    const defaultProps = {
+      props: { url: 'https://www.figma.com/design/abc123/Test', width: 400, height: 300 },
+      onUpdate: vi.fn(),
+      resizable: false,
+    }
+
+    it('renders "Click to interact" hint', () => {
+      render(<FigmaEmbed {...defaultProps} />)
+      
+      const hint = screen.getByText('Click to interact')
+      expect(hint).toBeInTheDocument()
+    })
+
+    it('enters interactive mode on single click', () => {
+      const { container } = render(<FigmaEmbed {...defaultProps} />)
+      
+      const overlay = screen.getByRole('button', { name: /click to interact/i })
+      expect(container.querySelector('iframe')).not.toBeInTheDocument()
+      fireEvent.click(overlay)
+      
+      expect(screen.queryByRole('button', { name: /click to interact/i })).not.toBeInTheDocument()
+      expect(container.querySelector('iframe')).toBeInTheDocument()
+
+      fireEvent.pointerDown(document.body)
+      expect(screen.getByRole('button', { name: /click to interact/i })).toBeInTheDocument()
+      expect(container.querySelector('iframe')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('StoryWidget', () => {
+    const defaultProps = {
+      props: { storyId: 'button-patterns', exportName: 'Primary', width: 400, height: 300 },
+      onUpdate: vi.fn(),
+      resizable: false,
+    }
+
+    it('mounts iframe only after user activation', () => {
+      const { container } = render(<StoryWidget {...defaultProps} />)
+
+      const overlay = screen.getByRole('button', { name: /click to open story component/i })
+      expect(container.querySelector('iframe')).not.toBeInTheDocument()
+
+      fireEvent.click(overlay)
+
+      expect(screen.queryByRole('button', { name: /click to open story component/i })).not.toBeInTheDocument()
+      expect(container.querySelector('iframe')).toBeInTheDocument()
+
+      fireEvent.pointerDown(document.body)
+      expect(screen.getByRole('button', { name: /click to open story component/i })).toBeInTheDocument()
+      expect(container.querySelector('iframe')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('ComponentWidget', () => {
+    const MockComponent = () => <div>Mock Component</div>
+    
+    const defaultProps = {
+      component: MockComponent,
+      jsxModule: null,
+      exportName: 'MockComponent',
+      canvasTheme: 'light',
+      isLocalDev: false,
+      width: 200,
+      height: 150,
+      onUpdate: vi.fn(),
+      resizable: false,
+    }
+
+    it('renders "Click to interact" hint', () => {
+      render(<ComponentWidget {...defaultProps} />)
+      
+      const hint = screen.getByText('Click to interact')
+      expect(hint).toBeInTheDocument()
+    })
+
+    it('enters interactive mode on single click', () => {
+      render(<ComponentWidget {...defaultProps} />)
+      
+      const overlay = screen.getByRole('button', { name: /click to interact/i })
+      fireEvent.click(overlay)
+      
+      expect(screen.queryByRole('button', { name: /click to interact/i })).not.toBeInTheDocument()
+    })
+
+    it('mounts dev iframe only after user activation', () => {
+      const { container } = render(
+        <ComponentWidget
+          {...defaultProps}
+          isLocalDev
+          jsxModule="/src/canvas/mock.story.jsx"
+          exportName="MockComponent"
+        />
+      )
+
+      const overlay = screen.getByRole('button', { name: /click to interact with component/i })
+      expect(container.querySelector('iframe')).not.toBeInTheDocument()
+
+      fireEvent.click(overlay)
+
+      expect(container.querySelector('iframe')).toBeInTheDocument()
+
+      fireEvent.pointerDown(document.body)
+      expect(screen.getByRole('button', { name: /click to interact with component/i })).toBeInTheDocument()
+      expect(container.querySelector('iframe')).not.toBeInTheDocument()
+    })
+  })
+})

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

@@ -0,0 +1,35 @@
+/**
+ * Shared styles for embed interaction overlays.
+ * Used by PrototypeEmbed, FigmaEmbed, and ComponentWidget.
+ */
+
+.interactOverlay {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 150ms ease;
+}
+
+.interactOverlay:hover {
+  background-color: rgba(0, 0, 0, 0.15);
+}
+
+.interactHint {
+  opacity: 0;
+  color: var(--fgColor-onInverse);
+  background-color: var(--bgColor-inverse);
+  padding: var(--base-size-12) var(--base-size-16);
+  border-radius: var(--base-size-6);
+  font-size: 14px;
+  font-weight: 600;
+  pointer-events: none;
+  transition: opacity 150ms ease;
+}
+
+.interactOverlay:hover .interactHint {
+  opacity: 1;
+}

package/src/canvas/widgets/embedTheme.js

@@ -1,49 +1,148 @@
-export function getEmbedChromeVars(theme) {
-  const value = String(theme || 'light')
-  if (value === 'dark_dimmed') {
-    return {
-      '--bgColor-default': '#22272e',
-      '--bgColor-muted': '#2d333b',
-      '--bgColor-neutral-muted': 'rgba(99, 110, 123, 0.3)',
-      '--fgColor-default': '#adbac7',
-      '--fgColor-muted': '#768390',
-      '--fgColor-onEmphasis': '#ffffff',
-      '--borderColor-default': '#444c56',
-      '--borderColor-muted': '#545d68',
-      '--bgColor-accent-emphasis': '#316dca',
-      '--trigger-bg': '#2d333b',
-      '--trigger-bg-hover': '#373e47',
-      '--trigger-border': '#444c56',
+/**
+ * Resolve the effective canvas theme from the core theme store.
+ * Respects the canvas-specific theme sync toggle.
+ */
+import { getTheme, getThemeSyncTargets } from '@dfosco/storyboard-core'
+
+function resolveSystem() {
+  if (typeof window === 'undefined') return 'light'
+  return window.matchMedia?.('(prefers-color-scheme: dark)')?.matches ? 'dark' : 'light'
+}
+
+export function resolveCanvasTheme() {
+  const sync = getThemeSyncTargets()
+  if (!sync.canvas) return 'light'
+  const theme = getTheme()
+  return theme === 'system' ? resolveSystem() : theme
+}
+
+/**
+ * Subscribe to canvas theme changes for embed widget snapshot switching.
+ *
+ * Reads `data-sb-canvas-theme` from the nearest ancestor set by CanvasPage.
+ * With canvas sync ON (the default), this attribute follows the global theme.
+ * Uses MutationObserver for immediate reaction + event backup.
+ */
+export function subscribeCanvasTheme({ anchorRef, onTheme }) {
+  if (typeof onTheme !== 'function') return () => {}
+
+  let observed = null
+  let observer = null
+
+  function readAndEmit() {
+    const el = anchorRef?.current?.closest?.('[data-sb-canvas-theme]') || null
+    if (el !== observed) {
+      if (observer) observer.disconnect()
+      observer = null
+      observed = el
+      if (el && typeof MutationObserver !== 'undefined') {
+        observer = new MutationObserver(readAndEmit)
+        observer.observe(el, { attributes: true, attributeFilter: ['data-sb-canvas-theme'] })
+      }
     }
+    onTheme(el?.getAttribute('data-sb-canvas-theme') || 'light')
   }
-  if (value.startsWith('dark')) {
-    return {
-      '--bgColor-default': '#161b22',
-      '--bgColor-muted': '#21262d',
-      '--bgColor-neutral-muted': 'rgba(110, 118, 129, 0.2)',
-      '--fgColor-default': '#e6edf3',
-      '--fgColor-muted': '#8b949e',
-      '--fgColor-onEmphasis': '#ffffff',
-      '--borderColor-default': '#30363d',
-      '--borderColor-muted': '#30363d',
-      '--bgColor-accent-emphasis': '#2f81f7',
-      '--trigger-bg': '#21262d',
-      '--trigger-bg-hover': '#30363d',
-      '--trigger-border': '#30363d',
-    }
+
+  readAndEmit()
+  document.addEventListener('storyboard:theme:changed', readAndEmit)
+
+  return () => {
+    document.removeEventListener('storyboard:theme:changed', readAndEmit)
+    if (observer) observer.disconnect()
   }
-  return {
+}
+
+/**
+ * Per-theme embed chrome CSS custom properties sourced from @primer/primitives.
+ */
+const EMBED_CHROME_VARS = {
+  light: {
     '--bgColor-default': '#ffffff',
     '--bgColor-muted': '#f6f8fa',
-    '--bgColor-neutral-muted': '#eaeef2',
+    '--bgColor-neutral-muted': '#818b981f',
     '--fgColor-default': '#1f2328',
-    '--fgColor-muted': '#656d76',
+    '--fgColor-muted': '#59636e',
     '--fgColor-onEmphasis': '#ffffff',
-    '--borderColor-default': '#d0d7de',
-    '--borderColor-muted': '#d8dee4',
-    '--bgColor-accent-emphasis': '#2f81f7',
+    '--borderColor-default': '#d1d9e0',
+    '--borderColor-muted': '#d1d9e0b3',
+    '--bgColor-accent-emphasis': '#0969da',
     '--trigger-bg': '#f6f8fa',
     '--trigger-bg-hover': '#eaeef2',
-    '--trigger-border': '#d0d7de',
-  }
+    '--trigger-border': '#d1d9e0',
+  },
+  light_colorblind: {
+    '--bgColor-default': '#ffffff',
+    '--bgColor-muted': '#f6f8fa',
+    '--bgColor-neutral-muted': '#818b981f',
+    '--fgColor-default': '#1f2328',
+    '--fgColor-muted': '#59636e',
+    '--fgColor-onEmphasis': '#ffffff',
+    '--borderColor-default': '#d1d9e0',
+    '--borderColor-muted': '#d1d9e0b3',
+    '--bgColor-accent-emphasis': '#0969da',
+    '--trigger-bg': '#f6f8fa',
+    '--trigger-bg-hover': '#eaeef2',
+    '--trigger-border': '#d1d9e0',
+  },
+  dark: {
+    '--bgColor-default': '#0d1117',
+    '--bgColor-muted': '#151b23',
+    '--bgColor-neutral-muted': '#656c7633',
+    '--fgColor-default': '#f0f6fc',
+    '--fgColor-muted': '#9198a1',
+    '--fgColor-onEmphasis': '#ffffff',
+    '--borderColor-default': '#3d444d',
+    '--borderColor-muted': '#3d444db3',
+    '--bgColor-accent-emphasis': '#1f6feb',
+    '--trigger-bg': '#151b23',
+    '--trigger-bg-hover': '#212830',
+    '--trigger-border': '#3d444d',
+  },
+  dark_dimmed: {
+    '--bgColor-default': '#212830',
+    '--bgColor-muted': '#262c36',
+    '--bgColor-neutral-muted': '#656c7633',
+    '--fgColor-default': '#d1d7e0',
+    '--fgColor-muted': '#9198a1',
+    '--fgColor-onEmphasis': '#f0f6fc',
+    '--borderColor-default': '#3d444d',
+    '--borderColor-muted': '#3d444db3',
+    '--bgColor-accent-emphasis': '#316dca',
+    '--trigger-bg': '#262c36',
+    '--trigger-bg-hover': '#2d333b',
+    '--trigger-border': '#3d444d',
+  },
+  dark_colorblind: {
+    '--bgColor-default': '#0d1117',
+    '--bgColor-muted': '#151b23',
+    '--bgColor-neutral-muted': '#656c7633',
+    '--fgColor-default': '#f0f6fc',
+    '--fgColor-muted': '#9198a1',
+    '--fgColor-onEmphasis': '#ffffff',
+    '--borderColor-default': '#3d444d',
+    '--borderColor-muted': '#3d444db3',
+    '--bgColor-accent-emphasis': '#1f6feb',
+    '--trigger-bg': '#151b23',
+    '--trigger-bg-hover': '#212830',
+    '--trigger-border': '#3d444d',
+  },
+  dark_high_contrast: {
+    '--bgColor-default': '#010409',
+    '--bgColor-muted': '#151b23',
+    '--bgColor-neutral-muted': '#212830',
+    '--fgColor-default': '#ffffff',
+    '--fgColor-muted': '#b7bdc8',
+    '--fgColor-onEmphasis': '#ffffff',
+    '--borderColor-default': '#b7bdc8',
+    '--borderColor-muted': '#b7bdc8',
+    '--bgColor-accent-emphasis': '#194fb1',
+    '--trigger-bg': '#151b23',
+    '--trigger-bg-hover': '#212830',
+    '--trigger-border': '#b7bdc8',
+  },
+}
+
+export function getEmbedChromeVars(theme) {
+  const value = String(theme || 'light')
+  return EMBED_CHROME_VARS[value] || EMBED_CHROME_VARS.light
 }