@dfosco/storyboard-react 3.10.0-beta.0 → 3.10.0

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "3.10.0-beta.0",
+  "version": "3.10.0",
   "type": "module",
   "dependencies": {
-    "@dfosco/storyboard-core": "3.10.0-beta.0",
-    "@dfosco/tiny-canvas": "3.10.0-beta.0",
+    "@dfosco/storyboard-core": "3.10.0",
+    "@dfosco/tiny-canvas": "3.10.0",
     "@neodrag/react": "^2.3.1",
     "glob": "^11.0.0",
     "jsonc-parser": "^3.3.1"

package/src/canvas/CanvasControls.jsx

@@ -1,15 +1,12 @@
 import { useState, useRef, useEffect, useCallback } from 'react'
+import { getMenuWidgetTypes } from './widgets/widgetConfig.js'
 import styles from './CanvasControls.module.css'
 
 const ZOOM_STEPS = [25, 50, 75, 100, 125, 150, 200]
 export const ZOOM_MIN = ZOOM_STEPS[0]
 export const ZOOM_MAX = ZOOM_STEPS[ZOOM_STEPS.length - 1]
 
-const WIDGET_TYPES = [
-  { type: 'sticky-note', label: 'Sticky Note' },
-  { type: 'markdown', label: 'Markdown' },
-  { type: 'prototype', label: 'Prototype embed' },
-]
+const WIDGET_TYPES = getMenuWidgetTypes()
 
 /**
  * Focused canvas toolbar — bottom-left controls for zoom and widget creation.

package/src/canvas/CanvasPage.jsx

@@ -1,4 +1,5 @@
 import { createElement, useCallback, useEffect, useRef, useState } from 'react'
+import { flushSync } from 'react-dom'
 import { Canvas } from '@dfosco/tiny-canvas'
 import '@dfosco/tiny-canvas/style.css'
 import { useCanvas } from './useCanvas.js'
@@ -6,6 +7,8 @@ import { shouldPreventCanvasTextSelection } from './textSelection.js'
 import { getCanvasThemeVars, getCanvasPrimerAttrs } from './canvasTheme.js'
 import { getWidgetComponent } from './widgets/index.js'
 import { schemas, getDefaults } from './widgets/widgetProps.js'
+import { getFeatures } from './widgets/widgetConfig.js'
+import WidgetChrome from './widgets/WidgetChrome.jsx'
 import ComponentWidget from './widgets/ComponentWidget.jsx'
 import { addWidget as addWidgetApi, updateCanvas, removeWidget as removeWidgetApi } from './canvasApi.js'
 import styles from './CanvasPage.module.css'
@@ -15,6 +18,9 @@ const ZOOM_MAX = 200
 
 const CANVAS_BRIDGE_STATE_KEY = '__storyboardCanvasBridgeState'
 
+/** Matches branch-deploy base path prefixes like /branch--my-feature/ */
+const BRANCH_PREFIX_RE = /^\/branch--[^/]+/
+
 function getToolbarColorMode(theme) {
   return String(theme || 'light').startsWith('dark') ? 'dark' : 'light'
 }
@@ -51,12 +57,41 @@ function debounce(fn, ms) {
 }
 
 /**
- * Get viewport-center coordinates for placing a new widget.
+ * Get viewport-center coordinates in canvas space for placing a new widget.
+ * Converts the visible center of the scroll container to unscaled canvas coordinates.
  */
-function getViewportCenter() {
+function getViewportCenter(scrollEl, scale) {
+  if (!scrollEl) {
+    return { x: 0, y: 0 }
+  }
+  const cx = scrollEl.scrollLeft + scrollEl.clientWidth / 2
+  const cy = scrollEl.scrollTop + scrollEl.clientHeight / 2
   return {
-    x: Math.round(window.innerWidth / 2 - 120),
-    y: Math.round(window.innerHeight / 2 - 80),
+    x: Math.round(cx / scale),
+    y: Math.round(cy / scale),
+  }
+}
+
+/** Fallback sizes for widget types without explicit width/height defaults. */
+const WIDGET_FALLBACK_SIZES = {
+  'sticky-note':  { width: 180, height: 60 },
+  'markdown':     { width: 360, height: 200 },
+  'prototype':    { width: 800, height: 600 },
+  'link-preview': { width: 320, height: 120 },
+  'component':    { width: 200, height: 150 },
+}
+
+/**
+ * Offset a position so the widget's center (not its top-left corner)
+ * lands on the given point.
+ */
+function centerPositionForWidget(pos, type, props) {
+  const fallback = WIDGET_FALLBACK_SIZES[type] || { width: 200, height: 150 }
+  const w = props?.width ?? fallback.width
+  const h = props?.height ?? fallback.height
+  return {
+    x: Math.round(pos.x - w / 2),
+    y: Math.round(pos.y - h / 2),
   }
 }
 
@@ -65,17 +100,61 @@ function roundPosition(value) {
 }
 
 /** Renders a single JSON-defined widget by type lookup. */
-function WidgetRenderer({ widget, onUpdate }) {
+function WidgetRenderer({ widget, onUpdate, widgetRef }) {
   const Component = getWidgetComponent(widget.type)
   if (!Component) {
     console.warn(`[canvas] Unknown widget type: ${widget.type}`)
     return null
   }
-  return createElement(Component, {
-    id: widget.id,
-    props: widget.props,
-    onUpdate,
-  })
+  // Only pass ref to forwardRef-wrapped components (e.g. PrototypeEmbed)
+  const elementProps = { id: widget.id, props: widget.props, onUpdate }
+  if (Component.$$typeof === Symbol.for('react.forward_ref')) {
+    elementProps.ref = widgetRef
+  }
+  return createElement(Component, elementProps)
+}
+
+/**
+ * Wrapper for each JSON widget that holds its own ref for imperative actions.
+ * This allows WidgetChrome to dispatch actions to the widget via ref.
+ */
+function ChromeWrappedWidget({
+  widget,
+  selected,
+  onSelect,
+  onDeselect,
+  onUpdate,
+  onRemove,
+}) {
+  const widgetRef = useRef(null)
+  const features = getFeatures(widget.type)
+
+  const handleAction = useCallback((actionId) => {
+    if (actionId === 'delete') {
+      onRemove(widget.id)
+    }
+  }, [widget.id, onRemove])
+
+  return (
+    <WidgetChrome
+      widgetId={widget.id}
+      widgetType={widget.type}
+      features={features}
+      selected={selected}
+      widgetProps={widget.props}
+      widgetRef={widgetRef}
+      onSelect={onSelect}
+      onDeselect={onDeselect}
+      onAction={handleAction}
+      onUpdate={(updates) => onUpdate(widget.id, updates)}
+    >
+      <WidgetRenderer
+        widget={widget}
+        onUpdate={(updates) => onUpdate(widget.id, updates)}
+        widgetRef={widgetRef}
+      />
+    </WidgetChrome>
+  )
 }
 
 /**
@@ -154,6 +233,25 @@ export default function CanvasPage({ name }) {
     )
   }, [name])
 
+  const debouncedSourceSave = useRef(
+    debounce((canvasName, sources) => {
+      updateCanvas(canvasName, { sources }).catch((err) =>
+        console.error('[canvas] Failed to save sources:', err)
+      )
+    }, 2000)
+  ).current
+
+  const handleSourceUpdate = useCallback((exportName, updates) => {
+    setLocalSources((prev) => {
+      const current = Array.isArray(prev) ? prev : []
+      const next = current.some((s) => s?.export === exportName)
+        ? current.map((s) => (s?.export === exportName ? { ...s, ...updates } : s))
+        : [...current, { export: exportName, ...updates }]
+      debouncedSourceSave(name, next)
+      return next
+    })
+  }, [name, debouncedSourceSave])
+
   const handleItemDragEnd = useCallback((dragId, position) => {
     if (!dragId || !position) return
     const rounded = { x: Math.max(0, roundPosition(position.x)), y: Math.max(0, roundPosition(position.y)) }
@@ -189,6 +287,43 @@ export default function CanvasPage({ name }) {
     zoomRef.current = zoom
   }, [zoom])
 
+  /**
+   * Zoom to a new level, anchoring on an optional client-space point.
+   * When a cursor position is provided (e.g. from a wheel event), the
+   * canvas point under the cursor stays fixed. Otherwise falls back to
+   * the viewport center.
+   */
+  function applyZoom(newZoom, clientX, clientY) {
+    const el = scrollRef.current
+    const clampedZoom = Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, newZoom))
+
+    if (!el) {
+      setZoom(clampedZoom)
+      return
+    }
+
+    const oldScale = zoomRef.current / 100
+    const newScale = clampedZoom / 100
+
+    // Anchor point in scroll-container space
+    const rect = el.getBoundingClientRect()
+    const useViewportCenter = clientX == null || clientY == null
+    const anchorX = useViewportCenter ? el.clientWidth / 2 : clientX - rect.left
+    const anchorY = useViewportCenter ? el.clientHeight / 2 : clientY - rect.top
+
+    // Anchor → canvas coordinate
+    const canvasX = (el.scrollLeft + anchorX) / oldScale
+    const canvasY = (el.scrollTop + anchorY) / oldScale
+
+    // Synchronous render so the DOM has the new transform before we adjust scroll
+    zoomRef.current = clampedZoom
+    flushSync(() => setZoom(clampedZoom))
+
+    // Scroll so the same canvas point stays under the anchor
+    el.scrollLeft = canvasX * newScale - anchorX
+    el.scrollTop = canvasY * newScale - anchorY
+  }
+
   // Signal canvas mount/unmount to CoreUIBar
   useEffect(() => {
     window[CANVAS_BRIDGE_STATE_KEY] = { active: true, name, zoom: zoomRef.current }
@@ -213,7 +348,8 @@ export default function CanvasPage({ name }) {
   // Add a widget by type — used by CanvasControls and CoreUIBar event
   const addWidget = useCallback(async (type) => {
     const defaultProps = schemas[type] ? getDefaults(schemas[type]) : {}
-    const pos = getViewportCenter()
+    const center = getViewportCenter(scrollRef.current, zoomRef.current / 100)
+    const pos = centerPositionForWidget(center, type, defaultProps)
     try {
       const result = await addWidgetApi(name, {
         type,
@@ -242,7 +378,7 @@ export default function CanvasPage({ name }) {
     function handleZoom(e) {
       const { zoom: newZoom } = e.detail
       if (typeof newZoom === 'number') {
-        setZoom(Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, newZoom)))
+        applyZoom(newZoom)
       }
     }
     document.addEventListener('storyboard:canvas:set-zoom', handleZoom)
@@ -296,7 +432,34 @@ export default function CanvasPage({ name }) {
 
   // Paste handler — same-origin URLs become prototypes, other URLs become link previews, text becomes markdown
   useEffect(() => {
-    const baseUrl = window.location.origin + (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
+    const origin = window.location.origin
+    const basePath = (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
+    const baseUrl = origin + basePath
+
+    // Check if a URL is same-origin, accounting for branch-deploy prefixes.
+    // e.g. https://site.com/branch--my-feature/Proto and https://site.com/storyboard/Proto
+    // are both same-origin prototype URLs.
+    function isSameOriginPrototype(url) {
+      if (!url.startsWith(origin)) return false
+      if (url.startsWith(baseUrl)) return true
+      // Match branch deploy URLs: origin + /branch--*/...
+      const pathAfterOrigin = url.slice(origin.length)
+      return BRANCH_PREFIX_RE.test(pathAfterOrigin)
+    }
+
+    // Strip the base path (or any branch prefix) from a pathname to get a portable src.
+    function extractPrototypeSrc(pathname) {
+      // Strip current base path
+      if (basePath && pathname.startsWith(basePath)) {
+        return pathname.slice(basePath.length) || '/'
+      }
+      // Strip branch prefix: /branch--name/rest → /rest
+      const branchMatch = pathname.match(BRANCH_PREFIX_RE)
+      if (branchMatch) {
+        return pathname.slice(branchMatch[0].length) || '/'
+      }
+      return pathname
+    }
 
     async function handlePaste(e) {
       const tag = e.target.tagName
@@ -310,11 +473,9 @@ export default function CanvasPage({ name }) {
       let type, props
       try {
         const parsed = new URL(text)
-        if (text.startsWith(baseUrl)) {
-          // Same-origin URL → prototype embed with the path portion
+        if (isSameOriginPrototype(text)) {
           const pathPortion = parsed.pathname + parsed.search + parsed.hash
-          const basePath = (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
-          const src = basePath ? pathPortion.replace(new RegExp(`^${basePath}`), '') : pathPortion
+          const src = extractPrototypeSrc(pathPortion)
           type = 'prototype'
           props = { src: src || '/', label: '', width: 800, height: 600 }
         } else {
@@ -326,7 +487,8 @@ export default function CanvasPage({ name }) {
         props = { content: text }
       }
 
-      const pos = getViewportCenter()
+      const center = getViewportCenter(scrollRef.current, zoomRef.current / 100)
+      const pos = centerPositionForWidget(center, type, props)
       try {
         const result = await addWidgetApi(name, {
           type,
@@ -356,7 +518,7 @@ export default function CanvasPage({ name }) {
       const step = Math.trunc(zoomAccum.current)
       if (step === 0) return
       zoomAccum.current -= step
-      setZoom((z) => Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, z + step)))
+      applyZoom(zoomRef.current + step, e.clientX, e.clientY)
     }
     document.addEventListener('wheel', handleWheel, { passive: false })
     return () => document.removeEventListener('wheel', handleWheel)
@@ -453,32 +615,51 @@ export default function CanvasPage({ name }) {
   // Merge JSX-sourced widgets (from .canvas.jsx) and JSON widgets
   const allChildren = []
 
-  const sourcePositionByExport = Object.fromEntries(
+  const sourceDataByExport = Object.fromEntries(
     (localSources || [])
       .filter((source) => source?.export)
-      .map((source) => [source.export, source.position || { x: 0, y: 0 }])
+      .map((source) => [source.export, source])
   )
 
-  // 1. JSX-sourced component widgets
+  // 1. JSX-sourced component widgets (wrapped in WidgetChrome, not deletable)
+  const componentFeatures = getFeatures('component')
   if (jsxExports) {
     for (const [exportName, Component] of Object.entries(jsxExports)) {
-      const sourcePosition = sourcePositionByExport[exportName] || { x: 0, y: 0 }
+      const sourceData = sourceDataByExport[exportName] || {}
+      const sourcePosition = sourceData.position || { x: 0, y: 0 }
       allChildren.push(
         <div
           key={`jsx-${exportName}`}
           id={`jsx-${exportName}`}
           data-tc-x={sourcePosition.x}
           data-tc-y={sourcePosition.y}
+          data-tc-handle=".tc-drag-handle"
           {...canvasPrimerAttrs}
           style={canvasThemeVars}
+          onClick={(e) => {
+            e.stopPropagation()
+            setSelectedWidgetId(`jsx-${exportName}`)
+          }}
         >
-          <ComponentWidget component={Component} />
+          <WidgetChrome
+            features={componentFeatures}
+            selected={selectedWidgetId === `jsx-${exportName}`}
+            onSelect={() => setSelectedWidgetId(`jsx-${exportName}`)}
+            onDeselect={() => setSelectedWidgetId(null)}
+          >
+            <ComponentWidget
+              component={Component}
+              width={sourceData.width}
+              height={sourceData.height}
+              onUpdate={(updates) => handleSourceUpdate(exportName, updates)}
+            />
+          </WidgetChrome>
         </div>
       )
     }
   }
 
-  // 2. JSON-defined mutable widgets (selectable)
+  // 2. JSON-defined mutable widgets (selectable, wrapped in WidgetChrome)
   for (const widget of (localWidgets ?? [])) {
     allChildren.push(
       <div
@@ -486,17 +667,24 @@ export default function CanvasPage({ name }) {
         id={widget.id}
         data-tc-x={widget?.position?.x ?? 0}
         data-tc-y={widget?.position?.y ?? 0}
+        data-tc-handle=".tc-drag-handle"
         {...canvasPrimerAttrs}
         style={canvasThemeVars}
         onClick={(e) => {
           e.stopPropagation()
           setSelectedWidgetId(widget.id)
         }}
-        className={selectedWidgetId === widget.id ? styles.selected : undefined}
       >
-        <WidgetRenderer
+        <ChromeWrappedWidget
           widget={widget}
-          onUpdate={(updates) => handleWidgetUpdate(widget.id, updates)}
+          selected={selectedWidgetId === widget.id}
+          onSelect={() => setSelectedWidgetId(widget.id)}
+          onDeselect={() => setSelectedWidgetId(null)}
+          onUpdate={handleWidgetUpdate}
+          onRemove={(id) => {
+            handleWidgetRemove(id)
+            setSelectedWidgetId(null)
+          }}
         />
       </div>
     )

package/src/canvas/CanvasPage.module.css

@@ -32,11 +32,7 @@
   min-height: 100%;
 }
 
-.selected {
-  outline: 2px solid var(--bgColor-accent-emphasis, #2f81f7);
-  outline-offset: 2px;
-  border-radius: 4px;
-}
+/* Selection outline is now handled by WidgetChrome.module.css (.widgetSlotSelected) */
 
 .canvasTitle {
   position: fixed;

package/src/canvas/CanvasToolbar.jsx

@@ -1,13 +1,10 @@
 import { useState } from 'react'
 import { addWidget as addWidgetApi } from './canvasApi.js'
 import { schemas, getDefaults } from './widgets/widgetProps.js'
+import { getMenuWidgetTypes } from './widgets/widgetConfig.js'
 import styles from './CanvasToolbar.module.css'
 
-const WIDGET_TYPES = [
-  { type: 'sticky-note', label: 'Sticky Note', icon: '📝' },
-  { type: 'markdown', label: 'Markdown', icon: '📄' },
-  { type: 'prototype', label: 'Prototype embed', icon: '🖥️' },
-]
+const WIDGET_TYPES = getMenuWidgetTypes()
 
 /**
  * Floating toolbar for adding widgets to a canvas.

package/src/canvas/widgets/ComponentWidget.jsx

@@ -1,15 +1,63 @@
+import { useRef, useCallback, useState, useEffect } from 'react'
 import WidgetWrapper from './WidgetWrapper.jsx'
+import ResizeHandle from './ResizeHandle.jsx'
+import styles from './ComponentWidget.module.css'
 
 /**
  * Renders a live JSX export from a .canvas.jsx companion file.
- * Content is read-only (re-renders on HMR), only position is mutable.
+ * Content is read-only (re-renders on HMR), only position and size are mutable.
+ * Cannot be deleted from canvas — only removed from source code.
+ *
+ * Double-click the overlay to enter interactive mode (dropdowns, buttons work).
+ * Click outside to exit interactive mode.
  */
-export default function ComponentWidget({ component: Component }) {
+export default function ComponentWidget({ component: Component, width, height, onUpdate }) {
+  const containerRef = useRef(null)
+  const [interactive, setInteractive] = useState(false)
+
+  const handleResize = useCallback((w, h) => {
+    onUpdate?.({ width: w, height: h })
+  }, [onUpdate])
+
+  const enterInteractive = useCallback(() => setInteractive(true), [])
+
+  // Exit interactive mode when clicking outside the component
+  useEffect(() => {
+    if (!interactive) return
+    function handlePointerDown(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setInteractive(false)
+      }
+    }
+    document.addEventListener('pointerdown', handlePointerDown)
+    return () => document.removeEventListener('pointerdown', handlePointerDown)
+  }, [interactive])
+
   if (!Component) return null
 
+  const sizeStyle = {}
+  if (typeof width === 'number') sizeStyle.width = `${width}px`
+  if (typeof height === 'number') sizeStyle.height = `${height}px`
+
   return (
     <WidgetWrapper>
-      <Component />
+      <div ref={containerRef} className={styles.container} style={sizeStyle}>
+        <div className={styles.content}>
+          <Component />
+        </div>
+        {!interactive && (
+          <div
+            className={styles.interactOverlay}
+            onDoubleClick={enterInteractive}
+          />
+        )}
+        <ResizeHandle
+          targetRef={containerRef}
+          minWidth={100}
+          minHeight={60}
+          onResize={handleResize}
+        />
+      </div>
     </WidgetWrapper>
   )
 }

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

@@ -0,0 +1,18 @@
+.container {
+  position: relative;
+  overflow: auto;
+  min-width: 100px;
+  min-height: 60px;
+}
+
+.content {
+  width: 100%;
+  height: 100%;
+}
+
+.interactOverlay {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  cursor: default;
+}

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

@@ -20,6 +20,7 @@
 
 .preview :global(*) {
   color: inherit;
+  pointer-events: none;
 }
 
 .preview h1 {

package/src/canvas/widgets/PrototypeEmbed.jsx

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect, useCallback, useMemo } from 'react'
+import { useState, useRef, useEffect, useCallback, useMemo, forwardRef, useImperativeHandle } from 'react'
 import { buildPrototypeIndex } from '@dfosco/storyboard-core'
 import WidgetWrapper from './WidgetWrapper.jsx'
 import { readProp, prototypeEmbedSchema } from './widgetProps.js'
@@ -28,7 +28,7 @@ function resolveCanvasThemeFromStorage() {
   return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
 }
 
-export default function PrototypeEmbed({ props, onUpdate }) {
+export default forwardRef(function PrototypeEmbed({ props, onUpdate }, ref) {
   const src = readProp(props, 'src', prototypeEmbedSchema)
   const width = readProp(props, 'width', prototypeEmbedSchema)
   const height = readProp(props, 'height', prototypeEmbedSchema)
@@ -40,9 +40,11 @@ export default function PrototypeEmbed({ props, onUpdate }) {
   const rawSrc = useMemo(() => {
     if (!src) return ''
     if (/^https?:\/\//.test(src)) return src
-    if (baseSegment && src.startsWith(basePath)) return src
-    if (baseSegment && src.startsWith(baseSegment)) return `/${src}`
-    return `${basePath}${src}`
+    // Strip stale branch prefixes from stored src (e.g. /branch--old-feat/Page)
+    const cleaned = src.replace(/^\/branch--[^/]+/, '')
+    if (baseSegment && cleaned.startsWith(basePath)) return cleaned
+    if (baseSegment && cleaned.startsWith(baseSegment)) return `/${cleaned}`
+    return `${basePath}${cleaned}`
   }, [src, basePath, baseSegment])
 
   const scale = zoom / 100
@@ -179,6 +181,21 @@ export default function PrototypeEmbed({ props, onUpdate }) {
 
   const enterInteractive = useCallback(() => setInteractive(true), [])
 
+  // Expose imperative action handlers for WidgetChrome
+  useImperativeHandle(ref, () => ({
+    handleAction(actionId) {
+      if (actionId === 'edit') {
+        setEditing(true)
+      } else if (actionId === 'zoom-in') {
+        const step = zoom < 75 ? 5 : 25
+        onUpdate?.({ zoom: Math.min(200, zoom + step) })
+      } else if (actionId === 'zoom-out') {
+        const step = zoom <= 75 ? 5 : 25
+        onUpdate?.({ zoom: Math.max(25, zoom - step) })
+      }
+    },
+  }), [zoom, onUpdate])
+
   function handlePickRoute(route) {
     onUpdate?.({ src: route })
     setEditing(false)
@@ -320,45 +337,6 @@ export default function PrototypeEmbed({ props, onUpdate }) {
             <p>Double-click to set prototype URL</p>
           </div>
         )}
-        {iframeSrc && !editing && (
-          <button
-            className={styles.editBtn}
-            onClick={(e) => { e.stopPropagation(); setEditing(true) }}
-            onMouseDown={(e) => e.stopPropagation()}
-            onPointerDown={(e) => e.stopPropagation()}
-            title="Edit URL"
-            aria-label="Edit prototype URL"
-          >
-            <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61Zm.176 4.823L9.75 4.81l-6.286 6.287a.253.253 0 0 0-.064.108l-.558 1.953 1.953-.558a.253.253 0 0 0 .108-.064Zm1.238-3.763a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354Z"/></svg>
-          </button>
-        )}
-        {iframeSrc && !editing && (
-          <div
-            className={styles.zoomBar}
-            onMouseDown={(e) => e.stopPropagation()}
-            onPointerDown={(e) => e.stopPropagation()}
-          >
-            <button
-              className={styles.zoomBtn}
-              onClick={() => {
-                const step = zoom <= 75 ? 5 : 25
-                onUpdate?.({ zoom: Math.max(25, zoom - step) })
-              }}
-              disabled={zoom <= 25}
-              aria-label="Zoom out"
-            >−</button>
-            <span className={styles.zoomLabel}>{zoom}%</span>
-            <button
-              className={styles.zoomBtn}
-              onClick={() => {
-                const step = zoom < 75 ? 5 : 25
-                onUpdate?.({ zoom: Math.min(200, zoom + step) })
-              }}
-              disabled={zoom >= 200}
-              aria-label="Zoom in"
-            >+</button>
-          </div>
-        )}
       </div>
       <div
         className={styles.resizeHandle}
@@ -385,4 +363,4 @@ export default function PrototypeEmbed({ props, onUpdate }) {
       />
     </WidgetWrapper>
   )
-}
+})

package/src/canvas/widgets/StickyNote.jsx

@@ -37,10 +37,6 @@ export default function StickyNote({ props, onUpdate }) {
     onUpdate?.({ text: e.target.value })
   }, [onUpdate])
 
-  const handleColorChange = useCallback((newColor) => {
-    onUpdate?.({ color: newColor })
-  }, [onUpdate])
-
   return (
     <div className={styles.container}>
       <article
@@ -86,33 +82,6 @@ export default function StickyNote({ props, onUpdate }) {
           onResize={handleResize}
         />
       </article>
-
-      {/* Color picker — dot trigger below the sticky */}
-      <div
-        className={styles.pickerArea}
-        onMouseDown={(e) => e.stopPropagation()}
-        onPointerDown={(e) => e.stopPropagation()}
-      >
-        <span
-          className={styles.pickerDot}
-          style={{ background: palette.dot }}
-        />
-        <div className={styles.pickerPopup}>
-          {Object.entries(COLORS).map(([colorName, c]) => (
-            <button
-              key={colorName}
-              className={`${styles.colorDot} ${colorName === color ? styles.active : ''}`}
-              style={{ background: c.bg, borderColor: c.border }}
-              onClick={(e) => {
-                e.stopPropagation()
-                handleColorChange(colorName)
-              }}
-              title={colorName}
-              aria-label={`Set color to ${colorName}`}
-            />
-          ))}
-        </div>
-      </div>
     </div>
   )
 }

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

@@ -60,73 +60,3 @@
 :global([data-sb-canvas-theme^='dark']) .textarea {
   color: color-mix(in srgb, var(--sticky-bg) 26%, #f0f6fc 74%);
 }
-
-/* Color picker area — sits below the sticky */
-
-.pickerArea {
-  display: flex;
-  justify-content: center;
-  padding-top: 6px;
-  position: relative;
-}
-
-.pickerDot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  opacity: 0.5;
-  transition: opacity 150ms;
-  cursor: pointer;
-}
-
-.pickerPopup {
-  position: absolute;
-  top: 4px;
-  display: flex;
-  gap: 5px;
-  padding: 6px 10px;
-  background: var(--bgColor-default, #ffffff);
-  border-radius: 20px;
-  box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.08),
-    0 4px 12px rgba(0, 0, 0, 0.12);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 150ms;
-  z-index: 10;
-}
-
-:global([data-sb-canvas-theme^='dark']) .pickerPopup {
-  background: var(--bgColor-muted, #161b22);
-  box-shadow:
-    0 0 0 1px rgba(255, 255, 255, 0.08),
-    0 4px 12px rgba(0, 0, 0, 0.45);
-}
-
-.pickerArea:hover .pickerDot {
-  opacity: 0;
-}
-
-.pickerArea:hover .pickerPopup {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.colorDot {
-  all: unset;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  border: 2px solid transparent;
-  cursor: pointer;
-  transition: transform 100ms;
-}
-
-.colorDot:hover {
-  transform: scale(1.15);
-}
-
-.colorDot.active {
-  border-color: var(--sticky-border);
-  box-shadow: 0 0 0 1px var(--sticky-border);
-}

package/src/canvas/widgets/WidgetChrome.jsx

@@ -0,0 +1,244 @@
+import { useState, useCallback, useRef } from 'react'
+import styles from './WidgetChrome.module.css'
+
+const STICKY_NOTE_COLORS = {
+  yellow: { bg: '#fff8c5', border: '#d4a72c', dot: '#e8c846' },
+  blue:   { bg: '#ddf4ff', border: '#54aeff', dot: '#74b9ff' },
+  green:  { bg: '#dafbe1', border: '#4ac26b', dot: '#6dd58c' },
+  pink:   { bg: '#ffebe9', border: '#ff8182', dot: '#ff9a9e' },
+  purple: { bg: '#fbefff', border: '#c297ff', dot: '#d4a8ff' },
+  orange: { bg: '#fff1e5', border: '#d18616', dot: '#e8a844' },
+}
+
+function DeleteIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path d="M11 1.75V3h2.25a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75ZM4.496 6.675l.66 6.6a.25.25 0 0 0 .249.225h5.19a.25.25 0 0 0 .249-.225l.66-6.6a.75.75 0 0 1 1.492.15l-.66 6.6A1.748 1.748 0 0 1 10.595 15h-5.19a1.75 1.75 0 0 1-1.741-1.575l-.66-6.6a.75.75 0 1 1 1.492-.15ZM6.5 1.75V3h3V1.75a.25.25 0 0 0-.25-.25h-2.5a.25.25 0 0 0-.25.25Z" />
+    </svg>
+  )
+}
+
+function ZoomInIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <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>
+  )
+}
+
+function ZoomOutIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path d="M2.75 7.25h10.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5Z" />
+    </svg>
+  )
+}
+
+function EditIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61Zm.176 4.823L9.75 4.81l-6.286 6.287a.253.253 0 0 0-.064.108l-.558 1.953 1.953-.558a.253.253 0 0 0 .108-.064Zm1.238-3.763a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354Z" />
+    </svg>
+  )
+}
+
+const ACTION_ICONS = {
+  'delete': DeleteIcon,
+  'zoom-in': ZoomInIcon,
+  'zoom-out': ZoomOutIcon,
+  'edit': EditIcon,
+}
+
+const ACTION_LABELS = {
+  'delete': 'Delete widget',
+  'zoom-in': 'Zoom in',
+  'zoom-out': 'Zoom out',
+  'edit': 'Edit',
+}
+
+/**
+ * ColorPicker feature button — shows a dot that reveals color options on hover.
+ */
+function ColorPickerFeature({ currentColor, options, onColorChange }) {
+  const palette = STICKY_NOTE_COLORS[currentColor] ?? STICKY_NOTE_COLORS.yellow
+
+  return (
+    <div
+      className={styles.colorPickerWrapper}
+      onMouseDown={(e) => e.stopPropagation()}
+      onPointerDown={(e) => e.stopPropagation()}
+    >
+      <button
+        className={styles.featureBtn}
+        style={{ background: palette.dot }}
+        aria-label="Change color"
+        title="Change color"
+      >
+        <span className={styles.colorDotInner} style={{ background: palette.dot }} />
+      </button>
+      <div className={styles.colorPopup}>
+        {(options || Object.keys(STICKY_NOTE_COLORS)).map((colorName) => {
+          const c = STICKY_NOTE_COLORS[colorName]
+          if (!c) return null
+          return (
+            <button
+              key={colorName}
+              className={`${styles.colorOption} ${colorName === currentColor ? styles.colorOptionActive : ''}`}
+              style={{ background: c.bg, borderColor: c.border }}
+              onClick={(e) => {
+                e.stopPropagation()
+                onColorChange(colorName)
+              }}
+              title={colorName}
+              aria-label={`Set color to ${colorName}`}
+            />
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * WidgetChrome — universal hover toolbar rendered below every canvas widget.
+ *
+ * Provides:
+ * - A trigger dot (visible at rest) that transitions to a toolbar on hover
+ * - Feature buttons (left) driven by widget config
+ * - A select handle (right) for selection toggling
+ *
+ * Widget components can expose imperative action handlers via a ref:
+ *   useImperativeHandle(ref, () => ({ handleAction(actionId) { ... } }))
+ * WidgetChrome will call widgetRef.current.handleAction(actionId) for
+ * non-standard actions (anything other than 'delete').
+ */
+export default function WidgetChrome({
+  features = [],
+  selected = false,
+  widgetProps,
+  widgetRef,
+  onSelect,
+  onDeselect,
+  onAction,
+  onUpdate,
+  children,
+}) {
+  const [hovered, setHovered] = useState(false)
+  const leaveTimer = useRef(null)
+  const pointerStartPos = useRef(null)
+
+  const handleMouseEnter = useCallback(() => {
+    clearTimeout(leaveTimer.current)
+    setHovered(true)
+  }, [])
+
+  const handleMouseLeave = useCallback(() => {
+    leaveTimer.current = setTimeout(() => setHovered(false), 80)
+  }, [])
+
+  // Track pointer position on the handle to distinguish click from drag.
+  const handleHandlePointerDown = useCallback((e) => {
+    pointerStartPos.current = { x: e.clientX, y: e.clientY }
+  }, [])
+
+  const handleHandlePointerUp = useCallback((e) => {
+    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])
+
+  const handleActionClick = useCallback((actionId, e) => {
+    e.stopPropagation()
+    // Standard actions go through onAction (handled by CanvasPage)
+    if (actionId === 'delete') {
+      onAction?.(actionId)
+      return
+    }
+    // Widget-specific actions go through the widget's imperative ref
+    if (widgetRef?.current?.handleAction) {
+      widgetRef.current.handleAction(actionId)
+      return
+    }
+    // Fallback to generic handler
+    onAction?.(actionId)
+  }, [onAction, widgetRef])
+
+  const handleColorChange = useCallback((color) => {
+    onUpdate?.({ color })
+  }, [onUpdate])
+
+  const showToolbar = hovered || selected
+
+  return (
+    <div
+      className={styles.chromeContainer}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <div className={`${styles.widgetSlot} ${selected ? styles.widgetSlotSelected : ''}`}>
+        {children}
+      </div>
+      <div
+        className={styles.toolbar}
+      >
+        {/* Trigger dot — visible at rest */}
+        <span
+          className={`${styles.triggerDot} ${showToolbar ? styles.triggerDotHidden : ''}`}
+        />
+
+        {/* Toolbar content — visible on hover */}
+        <div className={`${styles.toolbarContent} ${showToolbar ? styles.toolbarContentVisible : ''}`}>
+          <div className={styles.featureButtons}>
+            {features.map((feature) => {
+              if (feature.type === 'color-picker') {
+                return (
+                  <ColorPickerFeature
+                    key={feature.id}
+                    currentColor={widgetProps?.[feature.prop] || 'yellow'}
+                    options={feature.options}
+                    onColorChange={handleColorChange}
+                  />
+                )
+              }
+
+              if (feature.type === 'action') {
+                const Icon = ACTION_ICONS[feature.action]
+                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>
+                )
+              }
+
+              return null
+            })}
+          </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}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,209 @@
+/* WidgetChrome — universal hover toolbar for canvas widgets */
+
+.chromeContainer {
+  position: relative;
+}
+
+/* Widget slot — contains the actual widget; selection outline targets this */
+.widgetSlot {
+  position: relative;
+  border-radius: 4px;
+}
+
+.widgetSlotSelected {
+  outline: 2px solid var(--bgColor-accent-emphasis, #2f81f7);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+/* Toolbar — absolutely positioned below the widget so it doesn't affect
+   the draggable box dimensions (tiny-canvas measures children for drag). */
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 28px;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: calc(100% + 4px);
+}
+
+/* Trigger dot — centered, visible at rest */
+.triggerDot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  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 {
+  background: var(--borderColor-muted, #373e47);
+  opacity: 0.6;
+}
+
+.triggerDotHidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* Toolbar content — feature buttons + select handle */
+.toolbarContent {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms;
+}
+
+.toolbarContentVisible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Feature buttons — left-aligned group */
+.featureButtons {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+}
+
+/* Individual feature button */
+.featureBtn {
+  all: unset;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 12px;
+  border: 1.6px solid var(--borderColor-muted, #d0d7de);
+  background: var(--bgColor-default, #ffffff);
+  color: var(--fgColor-muted, #656d76);
+  font-size: 12px;
+  transition: background 100ms, color 100ms, border-color 100ms;
+}
+
+:global([data-sb-canvas-theme^='dark']) .featureBtn {
+  background: var(--bgColor-muted, #161b22);
+  border-color: var(--borderColor-muted, #373e47);
+  color: var(--fgColor-muted, #8b949e);
+}
+
+.featureBtn:hover {
+  background: var(--bgColor-neutral-muted, #eaeef2);
+  color: var(--fgColor-default, #1f2328);
+  border-color: var(--borderColor-default, #d0d7de);
+}
+
+:global([data-sb-canvas-theme^='dark']) .featureBtn:hover {
+  background: var(--bgColor-neutral-muted, #272c33);
+  color: var(--fgColor-default, #e6edf3);
+  border-color: var(--borderColor-default, #484f58);
+}
+
+/* Select handle — right-aligned rounded rect */
+.selectHandle {
+  all: unset;
+  cursor: grab;
+  width: 18px;
+  height: 12px;
+  border-radius: 4px;
+  border: 1.6px solid var(--borderColor-muted, #d0d7de);
+  background: var(--bgColor-default, #ffffff);
+  transition: background 100ms, border-color 100ms;
+  flex-shrink: 0;
+}
+
+:global([data-sb-canvas-theme^='dark']) .selectHandle {
+  background: var(--bgColor-muted, #161b22);
+  border-color: var(--borderColor-muted, #373e47);
+}
+
+.selectHandle:hover {
+  border-color: var(--bgColor-accent-emphasis, #2f81f7);
+}
+
+.selectHandleActive {
+  background: var(--bgColor-accent-emphasis, #2f81f7);
+  border-color: var(--bgColor-accent-emphasis, #2f81f7);
+}
+
+.selectHandleActive:hover {
+  background: var(--bgColor-accent-emphasis, #388bfd);
+  border-color: var(--bgColor-accent-emphasis, #388bfd);
+}
+
+/* Color picker feature */
+.colorPickerWrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.colorDotInner {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  display: block;
+}
+
+.colorPopup {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 5px;
+  padding: 6px 10px;
+  background: var(--bgColor-default, #ffffff);
+  border-radius: 20px;
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.08),
+    0 4px 12px rgba(0, 0, 0, 0.12);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 150ms;
+  z-index: 10;
+  white-space: nowrap;
+}
+
+:global([data-sb-canvas-theme^='dark']) .colorPopup {
+  background: var(--bgColor-muted, #161b22);
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.08),
+    0 4px 12px rgba(0, 0, 0, 0.45);
+}
+
+.colorPickerWrapper:hover .colorPopup {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.colorOption {
+  all: unset;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  cursor: pointer;
+  transition: transform 100ms;
+}
+
+.colorOption:hover {
+  transform: scale(1.15);
+}
+
+.colorOptionActive {
+  border-color: currentColor;
+  box-shadow: 0 0 0 1px currentColor;
+}

package/src/canvas/widgets/widgetConfig.js

@@ -0,0 +1,79 @@
+/**
+ * Widget Config Loader
+ *
+ * Reads widgets.config.json from @dfosco/storyboard-core and builds
+ * schema objects compatible with the existing readProp/readAllProps/getDefaults API.
+ *
+ * The config is the single source of truth for widget definitions —
+ * prop schemas, feature lists, labels, and icons all come from here.
+ */
+import widgetsConfig from '@dfosco/storyboard-core/widgets.config.json'
+
+/**
+ * Convert a config prop definition to the schema shape used by widgetProps.js.
+ * Config uses `"default"`, schema uses `"defaultValue"`.
+ */
+function configPropToSchema(propDef) {
+  const schema = {
+    type: propDef.type,
+    label: propDef.label,
+    category: propDef.category,
+  }
+  if (propDef.default !== undefined) schema.defaultValue = propDef.default
+  if (propDef.options) schema.options = propDef.options
+  if (propDef.min !== undefined) schema.min = propDef.min
+  if (propDef.max !== undefined) schema.max = propDef.max
+  return schema
+}
+
+/**
+ * Build schema objects for all widget types from the config.
+ * Returns the same shape as the old hardcoded schemas in widgetProps.js.
+ */
+function buildSchemas() {
+  const result = {}
+  for (const [type, def] of Object.entries(widgetsConfig.widgets)) {
+    const schema = {}
+    for (const [key, propDef] of Object.entries(def.props || {})) {
+      schema[key] = configPropToSchema(propDef)
+    }
+    result[type] = schema
+  }
+  return result
+}
+
+/** All widget schemas, keyed by type string. */
+export const schemas = buildSchemas()
+
+/** Full widget config entries, keyed by type string. */
+export const widgetTypes = widgetsConfig.widgets
+
+/**
+ * Get the feature list for a widget type.
+ * @param {string} type — widget type string
+ * @returns {Array} features array from config, or empty array
+ */
+export function getFeatures(type) {
+  return widgetTypes[type]?.features ?? []
+}
+
+/**
+ * Get the display metadata (label, icon) for a widget type.
+ * @param {string} type — widget type string
+ * @returns {{ label: string, icon: string } | null}
+ */
+export function getWidgetMeta(type) {
+  const def = widgetTypes[type]
+  if (!def) return null
+  return { label: def.label, icon: def.icon }
+}
+
+/**
+ * Get all widget types as an array of { type, label, icon } for menus.
+ * Excludes link-preview which is created via paste only.
+ */
+export function getMenuWidgetTypes() {
+  return Object.entries(widgetTypes)
+    .filter(([type]) => type !== 'link-preview')
+    .map(([type, def]) => ({ type, label: def.label, icon: def.icon }))
+}

package/src/canvas/widgets/widgetProps.js

@@ -54,8 +54,9 @@
  *
  * ## Declaring Widget Props (Schema)
  *
- * Each widget type exports a `schema` describing its props.
- * This is used by the toolbar, canvas settings, and future widget inspectors.
+ * Widget prop schemas are defined in widgets.config.json (packages/core)
+ * and loaded via widgetConfig.js. This module re-exports the generated
+ * schemas and provides utility functions for reading props with defaults.
  */
 
 /**
@@ -71,6 +72,8 @@
  * @property {number}   [max]       — maximum for 'number' type
  */
 
+import { schemas as configSchemas } from './widgetConfig.js'
+
 /**
  * Read a prop value with fallback to schema default.
  * @param {object} props    — widget props object (may be null)
@@ -114,40 +117,13 @@ export function getDefaults(schema) {
   return result
 }
 
-// ── Widget Schemas ──────────────────────────────────────────────────
-
-export const stickyNoteSchema = {
-  text:  { type: 'text',   label: 'Text',  category: 'content', defaultValue: '' },
-  color: { type: 'select', label: 'Color', category: 'settings', defaultValue: 'yellow',
-           options: ['yellow', 'blue', 'green', 'pink', 'purple', 'orange'] },
-  width:  { type: 'number', label: 'Width',  category: 'size', min: 180 },
-  height: { type: 'number', label: 'Height', category: 'size', min: 60 },
-}
-
-export const markdownSchema = {
-  content: { type: 'text',   label: 'Content', category: 'content', defaultValue: '' },
-  width:   { type: 'number', label: 'Width',   category: 'size',    defaultValue: 360, min: 200, max: 1200 },
-}
+// ── Config-driven schemas ───────────────────────────────────────────
 
-export const prototypeEmbedSchema = {
-  src:    { type: 'url',    label: 'URL',    category: 'content',  defaultValue: '' },
-  label:  { type: 'text',   label: 'Label',  category: 'settings', defaultValue: '' },
-  zoom:   { type: 'number', label: 'Zoom',   category: 'settings', defaultValue: 100, min: 25, max: 200 },
-  width:  { type: 'number', label: 'Width',  category: 'size',     defaultValue: 800, min: 200, max: 2000 },
-  height: { type: 'number', label: 'Height', category: 'size',     defaultValue: 600, min: 200, max: 1500 },
-}
+/** Schema registry — maps widget type strings to their schemas. */
+export const schemas = configSchemas
 
-export const linkPreviewSchema = {
-  url:   { type: 'url',  label: 'URL',   category: 'content',  defaultValue: '' },
-  title: { type: 'text', label: 'Title', category: 'content',  defaultValue: '' },
-}
-
-/**
- * Schema registry — maps widget type strings to their schemas.
- */
-export const schemas = {
-  'sticky-note': stickyNoteSchema,
-  'markdown': markdownSchema,
-  'prototype': prototypeEmbedSchema,
-  'link-preview': linkPreviewSchema,
-}
+// Named exports for backward compatibility with widget imports
+export const stickyNoteSchema = schemas['sticky-note']
+export const markdownSchema = schemas['markdown']
+export const prototypeEmbedSchema = schemas['prototype']
+export const linkPreviewSchema = schemas['link-preview']