@dfosco/storyboard-react 4.0.0-beta.2 → 4.0.0-beta.20

package/src/canvas/widgets/WidgetChrome.jsx

@@ -1,6 +1,6 @@
 import { useState, useCallback, useRef, useEffect, useSyncExternalStore } from 'react'
 import { Tooltip } from '@primer/react'
-import { EyeIcon as OcticonEye, EyeClosedIcon as OcticonEyeClosed } from '@primer/octicons-react'
+import { EyeIcon as OcticonEye, EyeClosedIcon as OcticonEyeClosed, CodeIcon as OcticonCode, UnwrapIcon as OcticonUnwrap, ImageIcon as OcticonImage } from '@primer/octicons-react'
 import styles from './WidgetChrome.module.css'
 
 const STICKY_NOTE_COLORS = {
@@ -60,6 +60,18 @@ function EyeClosedIcon() {
   return <OcticonEyeClosed size={12} />
 }
 
+function CodeIcon() {
+  return <OcticonCode size={12} />
+}
+
+function UnwrapIcon() {
+  return <OcticonUnwrap size={12} />
+}
+
+function ImageIcon() {
+  return <OcticonImage size={12} />
+}
+
 function CopyIcon() {
   return (
     <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
@@ -119,6 +131,9 @@ const ICON_REGISTRY = {
   'open-external': OpenExternalIcon,
   'eye': EyeIcon,
   'eye-closed': EyeClosedIcon,
+  'code': CodeIcon,
+  'unwrap': UnwrapIcon,
+  'image': ImageIcon,
   'copy': CopyIcon,
   'link': LinkIcon,
   'more': MoreIcon,
@@ -411,16 +426,21 @@ export default function WidgetChrome({
     onUpdate?.({ color })
   }, [onUpdate])
 
-  const showToolbar = !readOnly && (hovered || selected)
+  // In readOnly mode, features are already filtered to prod-only by getFeatures.
+  // Show toolbar if there are prod features even when readOnly.
+  const hasFeatures = features.length > 0
+  const showToolbar = (hovered || selected) && (!readOnly || hasFeatures)
   const showFeatures = showToolbar && !multiSelected
+  const menuFeatures = features.filter((f) => f.menu)
 
   return (
     <div
       className={styles.chromeContainer}
-      onMouseEnter={readOnly ? undefined : handleMouseEnter}
-      onMouseLeave={readOnly ? undefined : handleMouseLeave}
+      data-tc-elevated={(hovered || selected) || undefined}
+      onMouseEnter={(readOnly && !hasFeatures) ? undefined : handleMouseEnter}
+      onMouseLeave={(readOnly && !hasFeatures) ? undefined : handleMouseLeave}
     >
-      <div className={`tc-drag-surface ${styles.widgetSlot} ${selected ? styles.widgetSlotSelected : ''} ${multiSelected ? styles.widgetSlotMultiSelected : ''}`}>
+      <div className={`tc-drag-surface ${styles.widgetSlot} ${selected ? styles.widgetSlotSelected : ''} ${multiSelected ? styles.widgetSlotMultiSelected : ''}`} data-widget-selected={selected || undefined}>
         {children}
       </div>
       <div
@@ -464,6 +484,11 @@ export default function WidgetChrome({
                   }
                 }
 
+                // Show-code toggle: swap label based on widget state
+                if (feature.action === 'show-code' && widgetRef?.current?.getState?.('showCode')) {
+                  label = 'Show component'
+                }
+
                 return (
                   <Tooltip key={feature.id} text={label} direction="n">
                     <button
@@ -495,22 +520,33 @@ export default function WidgetChrome({
 
               return null
             })}
-            <WidgetOverflowMenu
-              widgetId={widgetId}
-              menuFeatures={features.filter((f) => f.menu)}
-              onAction={onAction}
-            />
+            {menuFeatures.length > 0 && (
+              <WidgetOverflowMenu
+                widgetId={widgetId}
+                menuFeatures={menuFeatures}
+                onAction={(actionId) => {
+                  // Route overflow menu actions through the widget ref first
+                  if (actionId !== 'delete' && actionId !== 'copy' && widgetRef?.current?.handleAction) {
+                    widgetRef.current.handleAction(actionId)
+                  } else {
+                    onAction?.(actionId)
+                  }
+                }}
+              />
+            )}
           </div>
           )}
 
-          <Tooltip text={selected ? "Click and drag to move" : "Select"} direction="n">
-            <button
-              className={`tc-drag-handle ${styles.selectHandle} ${selected ? styles.selectHandleActive : ''}`}
-              onClick={handleHandleClick}
-              aria-label={selected ? "Drag to move widget" : "Select widget"}
-              aria-pressed={selected}
-            />
-          </Tooltip>
+          {!readOnly && (
+            <Tooltip text={selected ? "Click and drag to move" : "Select"} direction="n">
+              <button
+                className={`tc-drag-handle ${styles.selectHandle} ${selected ? styles.selectHandleActive : ''}`}
+                onClick={handleHandleClick}
+                aria-label={selected ? "Drag to move widget" : "Select widget"}
+                aria-pressed={selected}
+              />
+            </Tooltip>
+          )}
         </div>
       </div>
     </div>

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

@@ -33,7 +33,7 @@
   top: calc(100% + 10px);
 }
 
-/* Trigger dot — centered, visible at rest */
+/* Trigger dot — positioned in the toolbar, visible at rest */
 .triggerDot {
   width: 6px;
   height: 6px;
@@ -41,10 +41,6 @@
   background: var(--borderColor-muted, #d0d7de);
   opacity: 0.5;
   transition: opacity 120ms;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
 }
 
 :global([data-sb-canvas-theme^='dark']) .triggerDot {
@@ -235,8 +231,8 @@
 .overflowMenu {
   position: absolute;
   top: calc(100% + 10px);
-  right: 0;
-  min-width: 180px;
+  left: 0;
+  min-width: max-content;
   padding: 4px;
   background: var(--bgColor-default, #ffffff);
   border-radius: 10px;
@@ -265,6 +261,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/WidgetWrapper.module.css

@@ -11,6 +11,8 @@
 
 .content {
   position: relative;
+  width: 100%;
+  height: 100%;
 }
 
 @media (prefers-color-scheme: dark) {

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

@@ -0,0 +1,155 @@
+/**
+ * Tests for embed interaction UX (click-to-interact overlay).
+ */
+import { describe, it, expect, vi, beforeEach } 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'
+
+// Mock buildPrototypeIndex for PrototypeEmbed
+vi.mock('@dfosco/storyboard-core', () => ({
+  buildPrototypeIndex: () => ({ folders: [], prototypes: [], globalFlows: [], sorted: { title: { prototypes: [], folders: [] } } }),
+}))
+
+// Simple mock wrapper for WidgetWrapper
+vi.mock('./WidgetWrapper.jsx', () => ({
+  default: ({ children }) => <div data-testid="widget-wrapper">{children}</div>,
+}))
+
+// 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 interact" hint on hover', () => {
+      render(<PrototypeEmbed {...defaultProps} />)
+      
+      const hint = screen.getByText('Click to interact')
+      expect(hint).toBeInTheDocument()
+      // CSS modules mangle class names, just check the element exists
+    })
+
+    it('enters interactive mode on single click (not double-click)', async () => {
+      render(<PrototypeEmbed {...defaultProps} />)
+      
+      // Overlay should exist before interaction
+      const overlay = screen.getByRole('button', { name: /click to interact/i })
+      expect(overlay).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 interact/i })).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 interact/i })
+      fireEvent.click(overlay, { shiftKey: true })
+      
+      // Overlay should still exist (did not enter interactive mode)
+      expect(screen.getByRole('button', { name: /click to interact/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 interact/i })
+      fireEvent.click(overlay, { metaKey: true })
+      
+      expect(screen.getByRole('button', { name: /click to interact/i })).toBeInTheDocument()
+    })
+
+    it('supports keyboard interaction (Enter key) with event prevention', () => {
+      render(<PrototypeEmbed {...defaultProps} />)
+      
+      const overlay = screen.getByRole('button', { name: /click to interact/i })
+      const event = { key: 'Enter', preventDefault: vi.fn(), stopPropagation: vi.fn() }
+      fireEvent.keyDown(overlay, event)
+      
+      expect(screen.queryByRole('button', { name: /click to interact/i })).not.toBeInTheDocument()
+    })
+
+    it('supports keyboard interaction (Space key) with event prevention', () => {
+      render(<PrototypeEmbed {...defaultProps} />)
+      
+      const overlay = screen.getByRole('button', { name: /click to interact/i })
+      const event = { key: ' ', preventDefault: vi.fn(), stopPropagation: vi.fn() }
+      fireEvent.keyDown(overlay, event)
+      
+      expect(screen.queryByRole('button', { name: /click to interact/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', () => {
+      render(<FigmaEmbed {...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()
+    })
+  })
+
+  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()
+    })
+  })
+})

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

@@ -4,6 +4,7 @@ import PrototypeEmbed from './PrototypeEmbed.jsx'
 import LinkPreview from './LinkPreview.jsx'
 import ImageWidget from './ImageWidget.jsx'
 import FigmaEmbed from './FigmaEmbed.jsx'
+import StoryWidget from './StoryWidget.jsx'
 
 /**
  * Maps widget type strings to their React components.
@@ -16,6 +17,7 @@ export const widgetRegistry = {
   'link-preview': LinkPreview,
   'image': ImageWidget,
   'figma-embed': FigmaEmbed,
+  'story': StoryWidget,
 }
 
 /**

package/src/canvas/widgets/pasteRules.js

@@ -0,0 +1,295 @@
+/**
+ * Paste Rules — config-driven paste routing for canvas widgets.
+ *
+ * All paste routing is defined in paste.config.json (packages/core).
+ * Each rule declares a match condition and a widget type + prop template.
+ * Rules are evaluated in order — first match wins.
+ *
+ * Image paste and widget-ref paste remain in CanvasPage.jsx because they
+ * require clipboard / canvas API access that doesn't belong here.
+ */
+
+import pasteConfig from '@dfosco/storyboard-core/paste.config.json'
+
+// ---------------------------------------------------------------------------
+// Branch-prefix pattern (matches /branch--<name> at start of pathname)
+// ---------------------------------------------------------------------------
+
+const BRANCH_PREFIX_RE = /^\/branch--[^/]+/
+
+// ---------------------------------------------------------------------------
+// Paste context — captures origin + base-path once per effect cycle
+// ---------------------------------------------------------------------------
+
+/**
+ * Build a paste context object that URL rules can query.
+ *
+ * @param {string} origin  - `window.location.origin`
+ * @param {string} basePath - `import.meta.env.BASE_URL` with trailing slash stripped
+ * @returns {PasteContext}
+ */
+export function createPasteContext(origin, basePath) {
+  const normalizedBase = basePath.replace(/\/$/, '')
+
+  return {
+    origin,
+    basePath: normalizedBase,
+    baseUrl: origin + normalizedBase,
+
+    /**
+     * Check whether a raw URL string points at the same Storyboard origin,
+     * accounting for branch-deploy prefixes.
+     * Uses parsed URL comparison (not string prefix) to avoid host spoofing.
+     */
+    isSameOrigin(text) {
+      const parsed = this.parseUrl(text)
+      if (!parsed || parsed.origin !== origin) return false
+      const pathname = parsed.pathname
+      if (normalizedBase && (pathname === normalizedBase || pathname.startsWith(normalizedBase + '/'))) return true
+      if (!normalizedBase) return true
+      return BRANCH_PREFIX_RE.test(pathname)
+    },
+
+    /**
+     * Strip the base path (or any branch prefix) from a pathname to produce a
+     * portable prototype `src` value.
+     */
+    extractSrc(pathname) {
+      if (normalizedBase && pathname.startsWith(normalizedBase)) {
+        return pathname.slice(normalizedBase.length) || '/'
+      }
+      const m = pathname.match(BRANCH_PREFIX_RE)
+      if (m) return pathname.slice(m[0].length) || '/'
+      return pathname
+    },
+
+    /**
+     * Parse text as an http(s) URL. Returns the URL object or null.
+     */
+    parseUrl(text) {
+      try {
+        const url = new URL(text)
+        return (url.protocol === 'http:' || url.protocol === 'https:') ? url : null
+      } catch {
+        return null
+      }
+    },
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Template variable resolution
+// ---------------------------------------------------------------------------
+
+/**
+ * Build the set of template variables available to prop templates.
+ *
+ * @param {string} text           - raw pasted text
+ * @param {URL|null} parsed       - parsed URL (null for non-URL text)
+ * @param {PasteContext} ctx
+ * @returns {Record<string, string>}
+ */
+export function buildTemplateVars(text, parsed, ctx) {
+  const pathname = parsed?.pathname ?? ''
+  return {
+    $url: text,
+    $text: text,
+    $pathname: pathname,
+    $src: ctx.extractSrc(pathname),
+    $search: parsed?.search ?? '',
+    $hash: parsed?.hash ?? '',
+    $hostname: parsed?.hostname ?? '',
+    $origin: parsed?.origin ?? '',
+  }
+}
+
+/**
+ * Apply URL sanitization to a value per the sanitize spec.
+ *
+ * @param {string} value         - the resolved URL string
+ * @param {{ stripParams?: string[], normalizeHost?: string }} spec
+ * @returns {string}
+ */
+export function sanitizeUrl(value, spec) {
+  try {
+    const url = new URL(value)
+    if (spec.normalizeHost) url.hostname = spec.normalizeHost
+    if (Array.isArray(spec.stripParams)) {
+      for (const p of spec.stripParams) url.searchParams.delete(p)
+    }
+    return url.toString()
+  } catch {
+    return value
+  }
+}
+
+/**
+ * Resolve a single prop value from config.
+ * - Plain values (string, number, boolean) are returned as-is.
+ * - Objects with `template` are resolved from template vars.
+ * - Objects with `sanitize` have URL sanitization applied after template resolution.
+ *
+ * @param {*} propDef             - the prop definition from config
+ * @param {Record<string, string>} vars - template variables
+ * @returns {*}
+ */
+export function resolvePropValue(propDef, vars) {
+  if (propDef == null) return propDef
+
+  // Object with template key → resolve template + optional sanitize
+  if (typeof propDef === 'object' && propDef.template) {
+    let value = propDef.template
+    for (const [varName, varValue] of Object.entries(vars)) {
+      value = value.replaceAll(varName, varValue)
+    }
+    if (propDef.sanitize) {
+      value = sanitizeUrl(value, propDef.sanitize)
+    }
+    return value
+  }
+
+  // Plain string — substitute template vars
+  if (typeof propDef === 'string') {
+    let value = propDef
+    for (const [varName, varValue] of Object.entries(vars)) {
+      value = value.replaceAll(varName, varValue)
+    }
+    return value
+  }
+
+  // Numbers, booleans, etc. — pass through
+  return propDef
+}
+
+// ---------------------------------------------------------------------------
+// Rule compilation
+// ---------------------------------------------------------------------------
+
+/**
+ * Compile a single rule from paste.config.json into a callable
+ * `{ name, match, resolve }` object.
+ *
+ * Match conditions (all must pass when combined):
+ *   - `hostname`    — regex tested against parsed URL hostname
+ *   - `pathname`    — regex tested against parsed URL pathname
+ *   - `pattern`     — regex tested against the full pasted text
+ *   - `sameOrigin`  — boolean; delegates to ctx.isSameOrigin()
+ *   - `isUrl`       — boolean; true if text is a valid http(s) URL
+ *   - `any`         — boolean; always matches (catch-all)
+ *
+ * @param {object} ruleDef
+ * @returns {{ name: string, match: Function, resolve: Function } | null}
+ */
+export function compileRule(ruleDef) {
+  if (!ruleDef || !ruleDef.match || !ruleDef.widget) return null
+
+  const { match: matchDef, widget, props: propsDef = {}, name = 'unnamed' } = ruleDef
+
+  // Pre-compile regexes
+  const matchers = []
+
+  if (matchDef.hostname) {
+    try {
+      const re = new RegExp(matchDef.hostname)
+      matchers.push((text, parsed) => parsed !== null && re.test(parsed.hostname))
+    } catch {
+      console.warn(`[pasteRules] Invalid hostname regex in rule "${name}": ${matchDef.hostname}`)
+      return null
+    }
+  }
+
+  if (matchDef.pathname) {
+    try {
+      const re = new RegExp(matchDef.pathname)
+      matchers.push((text, parsed) => parsed !== null && re.test(parsed.pathname))
+    } catch {
+      console.warn(`[pasteRules] Invalid pathname regex in rule "${name}": ${matchDef.pathname}`)
+      return null
+    }
+  }
+
+  if (matchDef.pattern) {
+    try {
+      const re = new RegExp(matchDef.pattern)
+      matchers.push((text) => re.test(text))
+    } catch {
+      console.warn(`[pasteRules] Invalid pattern regex in rule "${name}": ${matchDef.pattern}`)
+      return null
+    }
+  }
+
+  if (matchDef.sameOrigin) {
+    matchers.push((text, parsed, ctx) => ctx.isSameOrigin(text))
+  }
+
+  if (matchDef.isUrl) {
+    matchers.push((text, parsed) => parsed !== null)
+  }
+
+  if (matchDef.any) {
+    matchers.push(() => true)
+  }
+
+  if (matchers.length === 0) {
+    console.warn(`[pasteRules] Rule "${name}" has no valid match conditions`)
+    return null
+  }
+
+  return {
+    name,
+    match(text, parsed, ctx) {
+      return matchers.every(fn => fn(text, parsed, ctx))
+    },
+    resolve(text, parsed, ctx) {
+      const vars = buildTemplateVars(text, parsed, ctx)
+      const resolvedProps = {}
+      for (const [key, def] of Object.entries(propsDef)) {
+        resolvedProps[key] = resolvePropValue(def, vars)
+      }
+      return { type: widget, props: resolvedProps }
+    },
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Compile rules from paste.config.json at import time
+// ---------------------------------------------------------------------------
+
+const COMPILED_RULES = (pasteConfig.rules || [])
+  .map(compileRule)
+  .filter(Boolean)
+
+// ---------------------------------------------------------------------------
+// Main resolver
+// ---------------------------------------------------------------------------
+
+/**
+ * Resolve pasted text into a widget `{ type, props }` by running through
+ * ordered rules from paste.config.json. Override rules (if any) run first.
+ *
+ * @param {string} text              - trimmed clipboard text
+ * @param {PasteContext} context      - from `createPasteContext()`
+ * @param {object[]} [overrideRules] - raw rule objects from storyboard.config.json canvas.pasteRules
+ * @returns {{ type: string, props: object } | null}
+ */
+export function resolvePaste(text, context, overrideRules = []) {
+  const parsed = context.parseUrl(text)
+
+  // Compile any runtime override rules (from storyboard.config.json)
+  const overrides = overrideRules.map(compileRule).filter(Boolean)
+  const allRules = [...overrides, ...COMPILED_RULES]
+
+  for (const rule of allRules) {
+    if (rule.match(text, parsed, context)) {
+      return rule.resolve(text, parsed, context)
+    }
+  }
+
+  return null
+}
+
+// ---------------------------------------------------------------------------
+// Exports for testing
+// ---------------------------------------------------------------------------
+
+export { COMPILED_RULES, BRANCH_PREFIX_RE }