@dfosco/storyboard-react 3.10.0 → 3.11.0-beta.1

package/src/canvas/widgets/ImageWidget.jsx

@@ -0,0 +1,91 @@
+import { useRef, useCallback, useState, forwardRef, useImperativeHandle } from 'react'
+import WidgetWrapper from './WidgetWrapper.jsx'
+import ResizeHandle from './ResizeHandle.jsx'
+import { readProp } from './widgetProps.js'
+import { schemas } from './widgetConfig.js'
+import { toggleImagePrivacy } from '../canvasApi.js'
+import styles from './ImageWidget.module.css'
+
+const imageSchema = schemas['image']
+
+function getImageUrl(src) {
+  if (!src) return ''
+  const base = (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
+  return `${base}/_storyboard/canvas/images/${src}`
+}
+
+/**
+ * Canvas widget that displays a pasted image.
+ * Supports aspect-ratio locked resize and privacy toggle.
+ */
+const ImageWidget = forwardRef(function ImageWidget({ props, onUpdate }, ref) {
+  const containerRef = useRef(null)
+  const [naturalRatio, setNaturalRatio] = useState(null)
+
+  const src = readProp(props, 'src', imageSchema)
+  const isPrivate = readProp(props, 'private', imageSchema)
+  const width = readProp(props, 'width', imageSchema)
+  const height = readProp(props, 'height', imageSchema)
+
+  const handleImageLoad = useCallback((e) => {
+    const img = e.target
+    if (img.naturalWidth && img.naturalHeight) {
+      setNaturalRatio(img.naturalWidth / img.naturalHeight)
+    }
+  }, [])
+
+  const handleResize = useCallback((newWidth) => {
+    const ratio = naturalRatio || (width && height ? width / height : 4 / 3)
+    const newHeight = Math.round(newWidth / ratio)
+    onUpdate?.({ width: newWidth, height: newHeight })
+  }, [naturalRatio, width, height, onUpdate])
+
+  useImperativeHandle(ref, () => ({
+    handleAction(actionId) {
+      if (actionId === 'toggle-private') {
+        if (!src) return
+        toggleImagePrivacy(src).then((result) => {
+          if (result.success) {
+            onUpdate?.({ src: result.filename, private: result.private })
+          }
+        }).catch((err) => {
+          console.error('[canvas] Failed to toggle image privacy:', err)
+        })
+      }
+    }
+  }), [src, onUpdate])
+
+  if (!src) return null
+
+  const sizeStyle = {}
+  if (typeof width === 'number') sizeStyle.width = `${width}px`
+
+  return (
+    <WidgetWrapper className={styles.imageWrapper}>
+      <div ref={containerRef} className={styles.container} style={sizeStyle}>
+        <div className={styles.frame}>
+          <img
+            src={getImageUrl(src)}
+            alt=""
+            className={styles.image}
+            onLoad={handleImageLoad}
+            draggable={false}
+          />
+          {isPrivate && (
+            <span className={styles.privateBadge} title="Private — not committed to git">
+              Private
+            </span>
+          )}
+        </div>
+        <ResizeHandle
+          targetRef={containerRef}
+          minWidth={100}
+          minHeight={60}
+          onResize={(w) => handleResize(w)}
+        />
+      </div>
+    </WidgetWrapper>
+  )
+})
+
+export default ImageWidget

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

@@ -0,0 +1,39 @@
+.imageWrapper {
+  min-width: unset;
+}
+
+.container {
+  position: relative;
+  overflow: hidden;
+  min-width: 100px;
+}
+
+.frame {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.image {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: 4px;
+  user-select: none;
+  pointer-events: none;
+}
+
+.privateBadge {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1.4;
+  letter-spacing: 0.02em;
+  color: var(--fgColor-onEmphasis, #fff);
+  background: var(--bgColor-neutral-emphasis, rgba(0, 0, 0, 0.55));
+  pointer-events: none;
+}

package/src/canvas/widgets/PrototypeEmbed.jsx

@@ -56,6 +56,7 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate }, ref) {
   const inputRef = useRef(null)
   const filterRef = useRef(null)
   const embedRef = useRef(null)
+  const iframeRef = useRef(null)
 
   const iframeSrc = useMemo(() => {
     if (!rawSrc) return ''
@@ -177,6 +178,21 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate }, ref) {
     return () => document.removeEventListener('storyboard:theme:changed', readToolbarTheme)
   }, [])
 
+  // Listen for navigation events from the embedded prototype iframe
+  useEffect(() => {
+    function handleMessage(e) {
+      if (e.source !== iframeRef.current?.contentWindow) return
+      if (e.data?.type !== 'storyboard:embed:navigate') return
+      const newSrc = e.data.src
+      if (newSrc && newSrc !== src) {
+        const originalSrc = readProp(props, 'originalSrc', prototypeEmbedSchema)
+        onUpdate?.({ src: newSrc, originalSrc: originalSrc || src })
+      }
+    }
+    window.addEventListener('message', handleMessage)
+    return () => window.removeEventListener('message', handleMessage)
+  }, [src, props, onUpdate])
+
   const chromeVars = useMemo(() => getEmbedChromeVars(canvasTheme), [canvasTheme])
 
   const enterInteractive = useCallback(() => setInteractive(true), [])
@@ -186,6 +202,8 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate }, ref) {
     handleAction(actionId) {
       if (actionId === 'edit') {
         setEditing(true)
+      } else if (actionId === 'open-external') {
+        if (rawSrc) window.open(rawSrc, '_blank', 'noopener')
       } else if (actionId === 'zoom-in') {
         const step = zoom < 75 ? 5 : 25
         onUpdate?.({ zoom: Math.min(200, zoom + step) })
@@ -194,7 +212,7 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate }, ref) {
         onUpdate?.({ zoom: Math.max(25, zoom - step) })
       }
     },
-  }), [zoom, onUpdate])
+  }), [rawSrc, zoom, onUpdate])
 
   function handlePickRoute(route) {
     onUpdate?.({ src: route })
@@ -307,6 +325,7 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate }, ref) {
           <>
             <div className={styles.iframeContainer}>
               <iframe
+                ref={iframeRef}
                 src={iframeSrc}
                 className={styles.iframe}
                 style={{

package/src/canvas/widgets/WidgetChrome.jsx

@@ -1,4 +1,6 @@
 import { useState, useCallback, useRef } from 'react'
+import { Tooltip } from '@primer/react'
+import { EyeIcon as OcticonEye, EyeClosedIcon as OcticonEyeClosed } from '@primer/octicons-react'
 import styles from './WidgetChrome.module.css'
 
 const STICKY_NOTE_COLORS = {
@@ -42,11 +44,39 @@ function EditIcon() {
   )
 }
 
+function OpenExternalIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z" />
+    </svg>
+  )
+}
+
+function EyeIcon() {
+  return <OcticonEye size={12} />
+}
+
+function EyeClosedIcon() {
+  return <OcticonEyeClosed size={12} />
+}
+
+function CopyIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z" />
+      <path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z" />
+    </svg>
+  )
+}
+
 const ACTION_ICONS = {
   'delete': DeleteIcon,
   'zoom-in': ZoomInIcon,
   'zoom-out': ZoomOutIcon,
   'edit': EditIcon,
+  'open-external': OpenExternalIcon,
+  'toggle-private': EyeIcon,
+  'copy': CopyIcon,
 }
 
 const ACTION_LABELS = {
@@ -54,6 +84,9 @@ const ACTION_LABELS = {
   'zoom-in': 'Zoom in',
   'zoom-out': 'Zoom out',
   'edit': 'Edit',
+  'open-external': 'Open in new tab',
+  'toggle-private': 'Make private',
+  'copy': 'Copy widget',
 }
 
 /**
@@ -145,21 +178,16 @@ export default function WidgetChrome({
     if (!pointerStartPos.current) return
     const start = pointerStartPos.current
     pointerStartPos.current = null
-    // Only toggle selection if the pointer stayed close (click, not drag)
     const dist = Math.hypot(e.clientX - start.x, e.clientY - start.y)
     if (dist > 10) return
     e.stopPropagation()
-    if (selected) {
-      onDeselect?.()
-    } else {
-      onSelect?.()
-    }
-  }, [selected, onSelect, onDeselect])
+    onSelect?.()
+  }, [onSelect])
 
   const handleActionClick = useCallback((actionId, e) => {
     e.stopPropagation()
     // Standard actions go through onAction (handled by CanvasPage)
-    if (actionId === 'delete') {
+    if (actionId === 'delete' || actionId === 'copy') {
       onAction?.(actionId)
       return
     }
@@ -211,17 +239,29 @@ export default function WidgetChrome({
               }
 
               if (feature.type === 'action') {
-                const Icon = ACTION_ICONS[feature.action]
+                let Icon = ACTION_ICONS[feature.action]
+                let label = ACTION_LABELS[feature.action] || feature.action
+
+                // Toggle-private: swap icon/label based on current state
+                if (feature.action === 'toggle-private') {
+                  if (widgetProps?.private) {
+                    Icon = EyeClosedIcon
+                    label = 'Private image — only visible locally'
+                  } else {
+                    label = 'Published image — deployed with canvas'
+                  }
+                }
+
                 return (
-                  <button
-                    key={feature.id}
-                    className={styles.featureBtn}
-                    onClick={(e) => handleActionClick(feature.action, e)}
-                    title={ACTION_LABELS[feature.action] || feature.action}
-                    aria-label={ACTION_LABELS[feature.action] || feature.action}
-                  >
-                    {Icon ? <Icon /> : feature.action}
-                  </button>
+                  <Tooltip key={feature.id} text={label} direction="n">
+                    <button
+                      className={styles.featureBtn}
+                      onClick={(e) => handleActionClick(feature.action, e)}
+                      aria-label={label}
+                    >
+                      {Icon ? <Icon /> : feature.action}
+                    </button>
+                  </Tooltip>
                 )
               }
 
@@ -229,14 +269,15 @@ export default function WidgetChrome({
             })}
           </div>
 
-          <button
-            className={`tc-drag-handle ${styles.selectHandle} ${selected ? styles.selectHandleActive : ''}`}
-            onPointerDown={handleHandlePointerDown}
-            onPointerUp={handleHandlePointerUp}
-            title={selected ? 'Deselect' : 'Select'}
-            aria-label={selected ? 'Deselect widget' : 'Select widget'}
-            aria-pressed={selected}
-          />
+          <Tooltip text="Select" direction="n">
+            <button
+              className={`tc-drag-handle ${styles.selectHandle} ${selected ? styles.selectHandleActive : ''}`}
+              onPointerDown={handleHandlePointerDown}
+              onPointerUp={handleHandlePointerUp}
+              aria-label="Select widget"
+              aria-pressed={selected}
+            />
+          </Tooltip>
         </div>
       </div>
     </div>

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

@@ -115,8 +115,8 @@
 .selectHandle {
   all: unset;
   cursor: grab;
-  width: 18px;
-  height: 12px;
+  width: 16px;
+  height: 16px;
   border-radius: 4px;
   border: 1.6px solid var(--borderColor-muted, #d0d7de);
   background: var(--bgColor-default, #ffffff);
@@ -159,9 +159,8 @@
 
 .colorPopup {
   position: absolute;
-  bottom: calc(100% + 6px);
-  left: 50%;
-  transform: translateX(-50%);
+  top: calc(100% + 2px);
+  left: -4px;
   display: flex;
   gap: 5px;
   padding: 6px 10px;
@@ -177,6 +176,17 @@
   white-space: nowrap;
 }
 
+/* Invisible bridge from the trigger button to the popup so mouse
+   travel doesn't create a gap that closes the picker. */
+.colorPopup::before {
+  content: '';
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  height: 8px;
+}
+
 :global([data-sb-canvas-theme^='dark']) .colorPopup {
   background: var(--bgColor-muted, #161b22);
   box-shadow:

package/src/canvas/widgets/figmaUrl.js

@@ -0,0 +1,118 @@
+/**
+ * Figma URL utilities — detection, sanitization, and embed URL transformation.
+ *
+ * Supports three Figma link types:
+ *   - Board:  figma.com/board/{key}/{name}
+ *   - Design: figma.com/design/{key}/{name}
+ *   - Proto:  figma.com/proto/{key}/{name}
+ */
+
+const FIGMA_HOST_RE = /^(www\.)?figma\.com$/
+const FIGMA_PATH_RE = /^\/(board|design|proto)\/[A-Za-z0-9]+/
+
+/** Params to strip from stored/embed URLs (session/tracking tokens). */
+const STRIP_PARAMS = new Set(['t'])
+
+/**
+ * Check whether a URL string is a Figma board, design, or prototype link.
+ * @param {string} url
+ * @returns {boolean}
+ */
+export function isFigmaUrl(url) {
+  try {
+    const parsed = new URL(url)
+    return FIGMA_HOST_RE.test(parsed.hostname) && FIGMA_PATH_RE.test(parsed.pathname)
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Return the Figma link type: 'board', 'design', or 'proto'.
+ * Returns null for non-Figma URLs.
+ * @param {string} url
+ * @returns {'board' | 'design' | 'proto' | null}
+ */
+export function getFigmaType(url) {
+  try {
+    const parsed = new URL(url)
+    if (!FIGMA_HOST_RE.test(parsed.hostname)) return null
+    const match = parsed.pathname.match(FIGMA_PATH_RE)
+    if (!match) return null
+    return match[1]
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Sanitize a Figma URL for storage — strips tracking params like `t`.
+ * Returns a canonical www.figma.com URL safe to persist in canvas data.
+ * @param {string} url — raw pasted Figma URL
+ * @returns {string} sanitized URL
+ */
+export function sanitizeFigmaUrl(url) {
+  try {
+    const parsed = new URL(url)
+    if (!FIGMA_HOST_RE.test(parsed.hostname)) return url
+    // Normalize to www.figma.com
+    parsed.hostname = 'www.figma.com'
+    for (const key of STRIP_PARAMS) {
+      parsed.searchParams.delete(key)
+    }
+    return parsed.toString()
+  } catch {
+    return url
+  }
+}
+
+/**
+ * Transform a Figma URL into its embed counterpart.
+ *
+ * - Replaces host with `embed.figma.com`
+ * - Strips tracking params (`t`)
+ * - Appends `embed-host=share`
+ *
+ * @param {string} url — original Figma URL
+ * @returns {string} embed URL, or the original URL if it can't be transformed
+ */
+export function toFigmaEmbedUrl(url) {
+  try {
+    const parsed = new URL(url)
+    if (!FIGMA_HOST_RE.test(parsed.hostname)) return url
+
+    parsed.hostname = 'embed.figma.com'
+
+    // Strip tracking/session params
+    for (const key of STRIP_PARAMS) {
+      parsed.searchParams.delete(key)
+    }
+
+    // Ensure embed-host is set
+    parsed.searchParams.set('embed-host', 'share')
+
+    return parsed.toString()
+  } catch {
+    return url
+  }
+}
+
+/**
+ * Extract a human-readable title from a Figma URL.
+ * Uses the name segment from the path (e.g. "Security-Products-HQ").
+ * @param {string} url
+ * @returns {string}
+ */
+export function getFigmaTitle(url) {
+  try {
+    const parsed = new URL(url)
+    // Path: /board|design|proto/{key}/{name}
+    const segments = parsed.pathname.split('/').filter(Boolean)
+    if (segments.length >= 3) {
+      return segments[2].replace(/-/g, ' ')
+    }
+    return 'Figma'
+  } catch {
+    return 'Figma'
+  }
+}

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

@@ -0,0 +1,139 @@
+import { describe, it, expect } from 'vitest'
+import { isFigmaUrl, getFigmaType, toFigmaEmbedUrl, getFigmaTitle, sanitizeFigmaUrl } from './figmaUrl.js'
+
+describe('isFigmaUrl', () => {
+  it('detects board URLs', () => {
+    expect(isFigmaUrl('https://www.figma.com/board/QlwxSiYxYQsHmnLNYpQRtR/Security-Products-HQ?node-id=0-1&t=XBF45Am0VgicAITG-0')).toBe(true)
+  })
+
+  it('detects design URLs', () => {
+    expect(isFigmaUrl('https://www.figma.com/design/i8jI8RuxPnGQGp2QllfAr7/Darby-s-copilot-metric-sandbox?node-id=103-4739')).toBe(true)
+  })
+
+  it('detects proto URLs', () => {
+    expect(isFigmaUrl('https://www.figma.com/proto/i8jI8RuxPnGQGp2QllfAr7/Darby-s-copilot-metric-sandbox?node-id=122-9632&p=f&t=9XSi047pSbt81sZS-0&scaling=min-zoom')).toBe(true)
+  })
+
+  it('works without www prefix', () => {
+    expect(isFigmaUrl('https://figma.com/board/abc123/My-Board')).toBe(true)
+  })
+
+  it('rejects non-Figma URLs', () => {
+    expect(isFigmaUrl('https://example.com/board/abc')).toBe(false)
+    expect(isFigmaUrl('https://www.figma.com/file/abc')).toBe(false)
+    expect(isFigmaUrl('not a url')).toBe(false)
+    expect(isFigmaUrl('')).toBe(false)
+  })
+})
+
+describe('getFigmaType', () => {
+  it('returns board for board URLs', () => {
+    expect(getFigmaType('https://www.figma.com/board/QlwxSiYxYQsHmnLNYpQRtR/Name')).toBe('board')
+  })
+
+  it('returns design for design URLs', () => {
+    expect(getFigmaType('https://www.figma.com/design/i8jI8RuxPnGQGp2QllfAr7/Name')).toBe('design')
+  })
+
+  it('returns proto for proto URLs', () => {
+    expect(getFigmaType('https://www.figma.com/proto/i8jI8RuxPnGQGp2QllfAr7/Name')).toBe('proto')
+  })
+
+  it('returns null for non-Figma URLs', () => {
+    expect(getFigmaType('https://example.com')).toBeNull()
+  })
+})
+
+describe('toFigmaEmbedUrl', () => {
+  it('transforms board URL', () => {
+    const input = 'https://www.figma.com/board/QlwxSiYxYQsHmnLNYpQRtR/Security-Products-HQ?node-id=0-1&t=XBF45Am0VgicAITG-0'
+    const result = toFigmaEmbedUrl(input)
+    const parsed = new URL(result)
+
+    expect(parsed.hostname).toBe('embed.figma.com')
+    expect(parsed.pathname).toBe('/board/QlwxSiYxYQsHmnLNYpQRtR/Security-Products-HQ')
+    expect(parsed.searchParams.get('node-id')).toBe('0-1')
+    expect(parsed.searchParams.get('embed-host')).toBe('share')
+    expect(parsed.searchParams.has('t')).toBe(false)
+  })
+
+  it('transforms design URL', () => {
+    const input = 'https://www.figma.com/design/i8jI8RuxPnGQGp2QllfAr7/Darby-s-copilot-metric-sandbox?node-id=103-4739'
+    const result = toFigmaEmbedUrl(input)
+    const parsed = new URL(result)
+
+    expect(parsed.hostname).toBe('embed.figma.com')
+    expect(parsed.pathname).toBe('/design/i8jI8RuxPnGQGp2QllfAr7/Darby-s-copilot-metric-sandbox')
+    expect(parsed.searchParams.get('node-id')).toBe('103-4739')
+    expect(parsed.searchParams.get('embed-host')).toBe('share')
+  })
+
+  it('transforms proto URL and preserves relevant params', () => {
+    const input = 'https://www.figma.com/proto/i8jI8RuxPnGQGp2QllfAr7/Darby-s-copilot-metric-sandbox?node-id=122-9632&p=f&t=9XSi047pSbt81sZS-0&scaling=min-zoom&content-scaling=fixed&page-id=103%3A4739&starting-point-node-id=140%3A5949'
+    const result = toFigmaEmbedUrl(input)
+    const parsed = new URL(result)
+
+    expect(parsed.hostname).toBe('embed.figma.com')
+    expect(parsed.pathname).toBe('/proto/i8jI8RuxPnGQGp2QllfAr7/Darby-s-copilot-metric-sandbox')
+    expect(parsed.searchParams.get('node-id')).toBe('122-9632')
+    expect(parsed.searchParams.get('p')).toBe('f')
+    expect(parsed.searchParams.get('scaling')).toBe('min-zoom')
+    expect(parsed.searchParams.get('content-scaling')).toBe('fixed')
+    expect(parsed.searchParams.get('page-id')).toBe('103:4739')
+    expect(parsed.searchParams.get('starting-point-node-id')).toBe('140:5949')
+    expect(parsed.searchParams.get('embed-host')).toBe('share')
+    expect(parsed.searchParams.has('t')).toBe(false)
+  })
+
+  it('returns original URL for non-Figma URLs', () => {
+    expect(toFigmaEmbedUrl('https://example.com')).toBe('https://example.com')
+  })
+})
+
+describe('getFigmaTitle', () => {
+  it('extracts title from board URL', () => {
+    expect(getFigmaTitle('https://www.figma.com/board/QlwxSiYxYQsHmnLNYpQRtR/Security-Products-HQ')).toBe('Security Products HQ')
+  })
+
+  it('extracts title from design URL', () => {
+    expect(getFigmaTitle('https://www.figma.com/design/i8jI8RuxPnGQGp2QllfAr7/Darby-s-copilot-metric-sandbox')).toBe("Darby s copilot metric sandbox")
+  })
+
+  it('returns Figma for URLs without name segment', () => {
+    expect(getFigmaTitle('https://www.figma.com/board/abc')).toBe('Figma')
+  })
+})
+
+describe('sanitizeFigmaUrl', () => {
+  it('strips tracking param and normalizes to www.figma.com', () => {
+    const input = 'https://www.figma.com/board/QlwxSiYxYQsHmnLNYpQRtR/Security-Products-HQ?node-id=0-1&t=XBF45Am0VgicAITG-0'
+    const result = sanitizeFigmaUrl(input)
+    const parsed = new URL(result)
+
+    expect(parsed.hostname).toBe('www.figma.com')
+    expect(parsed.searchParams.get('node-id')).toBe('0-1')
+    expect(parsed.searchParams.has('t')).toBe(false)
+  })
+
+  it('normalizes figma.com to www.figma.com', () => {
+    const input = 'https://figma.com/board/abc/Name?node-id=0-1'
+    const result = sanitizeFigmaUrl(input)
+    expect(new URL(result).hostname).toBe('www.figma.com')
+  })
+
+  it('preserves all non-tracking params for proto URLs', () => {
+    const input = 'https://www.figma.com/proto/abc/Name?node-id=1-2&p=f&t=TOKEN&scaling=min-zoom&page-id=103%3A4739'
+    const result = sanitizeFigmaUrl(input)
+    const parsed = new URL(result)
+
+    expect(parsed.searchParams.get('node-id')).toBe('1-2')
+    expect(parsed.searchParams.get('p')).toBe('f')
+    expect(parsed.searchParams.get('scaling')).toBe('min-zoom')
+    expect(parsed.searchParams.get('page-id')).toBe('103:4739')
+    expect(parsed.searchParams.has('t')).toBe(false)
+  })
+
+  it('returns non-Figma URLs unchanged', () => {
+    expect(sanitizeFigmaUrl('https://example.com')).toBe('https://example.com')
+  })
+})

package/src/canvas/widgets/index.js

@@ -2,6 +2,8 @@ import StickyNote from './StickyNote.jsx'
 import MarkdownBlock from './MarkdownBlock.jsx'
 import PrototypeEmbed from './PrototypeEmbed.jsx'
 import LinkPreview from './LinkPreview.jsx'
+import ImageWidget from './ImageWidget.jsx'
+import FigmaEmbed from './FigmaEmbed.jsx'
 
 /**
  * Maps widget type strings to their React components.
@@ -12,6 +14,8 @@ export const widgetRegistry = {
   'markdown': MarkdownBlock,
   'prototype': PrototypeEmbed,
   'link-preview': LinkPreview,
+  'image': ImageWidget,
+  'figma-embed': FigmaEmbed,
 }
 
 /**

package/src/canvas/widgets/widgetConfig.js

@@ -70,10 +70,10 @@ export function getWidgetMeta(type) {
 
 /**
  * Get all widget types as an array of { type, label, icon } for menus.
- * Excludes link-preview which is created via paste only.
+ * Excludes link-preview, image, and figma-embed which are created via paste only.
  */
 export function getMenuWidgetTypes() {
   return Object.entries(widgetTypes)
-    .filter(([type]) => type !== 'link-preview')
+    .filter(([type]) => type !== 'link-preview' && type !== 'image' && type !== 'figma-embed')
     .map(([type, def]) => ({ type, label: def.label, icon: def.icon }))
 }

package/src/canvas/widgets/widgetProps.js

@@ -127,3 +127,5 @@ export const stickyNoteSchema = schemas['sticky-note']
 export const markdownSchema = schemas['markdown']
 export const prototypeEmbedSchema = schemas['prototype']
 export const linkPreviewSchema = schemas['link-preview']
+export const imageSchema = schemas['image']
+export const figmaEmbedSchema = schemas['figma-embed']