@dfosco/storyboard 0.5.0-alpha.0

package/src/internals/canvas/widgets/tilePool.js

@@ -0,0 +1,23 @@
+/**
+ * Static tile image pool.
+ * Each import resolves to a Vite asset URL at build time.
+ */
+import solidA from './tiles/solid-a.png'
+import solidB from './tiles/solid-b.png'
+import quarterTL from './tiles/quarter-tl.png'
+import quarterTR from './tiles/quarter-tr.png'
+import diagonalBR from './tiles/diagonal-br.png'
+import diagonalBL from './tiles/diagonal-bl.png'
+import diagonalTL from './tiles/diagonal-tl.png'
+import leaf from './tiles/leaf.png'
+
+export const TILE_POOL = [
+  solidA,
+  solidB,
+  quarterTL,
+  quarterTR,
+  diagonalBR,
+  diagonalBL,
+  diagonalTL,
+  leaf,
+]

package/src/internals/canvas/widgets/widgetConfig.js

@@ -0,0 +1,291 @@
+/**
+ * Widget Config Loader
+ *
+ * Reads widgets.config.json from @dfosco/storyboard 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.
+ *
+ * Supports `$variable` references in string values, resolved from
+ * the top-level `variables` object in widgets.config.json.
+ */
+import widgetsConfig from '../../../../widgets.config.json'
+
+/** Variables defined in config — used to resolve `$key` references. */
+const variables = widgetsConfig.variables || {}
+
+/**
+ * Resolve `$variable` references in a string value.
+ * Returns the original value if it's not a string or doesn't start with `$`.
+ */
+function resolveVar(value) {
+  if (typeof value !== 'string' || !value.startsWith('$')) return value
+  const key = value.slice(1)
+  return variables[key] ?? value
+}
+
+/**
+ * Resolve all string values in a feature object, including nested items.
+ */
+function resolveFeature(feature) {
+  const resolved = {}
+  for (const [key, val] of Object.entries(feature)) {
+    if (key === 'items' && Array.isArray(val)) {
+      resolved[key] = val.map((item) => {
+        const r = {}
+        for (const [k, v] of Object.entries(item)) {
+          // Resolve nested alt object inside items
+          if (k === 'alt' && v && typeof v === 'object') {
+            const altResolved = {}
+            for (const [ak, av] of Object.entries(v)) altResolved[ak] = resolveVar(av)
+            r[k] = altResolved
+          } else {
+            r[k] = resolveVar(v)
+          }
+        }
+        return r
+      })
+    } else if (key === 'alt' && val && typeof val === 'object') {
+      const r = {}
+      for (const [k, v] of Object.entries(val)) r[k] = resolveVar(v)
+      resolved[key] = r
+    } else if (key === 'toggle' && val && typeof val === 'object') {
+      // Pass toggle config through as-is (stateKey, activeIcon, activeLabel)
+      resolved[key] = { ...val }
+    } else if (key === 'surfaces' && Array.isArray(val)) {
+      resolved[key] = val
+    } else {
+      resolved[key] = resolveVar(val)
+    }
+  }
+  return resolved
+}
+
+/**
+ * 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
+}
+
+/**
+ * Build resolved widget type entries with variables expanded in features.
+ */
+function buildWidgetTypes() {
+  const result = {}
+  for (const [type, def] of Object.entries(widgetsConfig.widgets)) {
+    result[type] = {
+      ...def,
+      features: (def.features || []).map(resolveFeature),
+    }
+  }
+  return result
+}
+
+/** All widget schemas, keyed by type string. */
+export const schemas = buildSchemas()
+
+/** Full widget config entries (with resolved variables), keyed by type string. */
+export const widgetTypes = buildWidgetTypes()
+
+/**
+ * Get the feature list for a widget type.
+ * In production (or when isLocalDev is false, e.g. ?prodMode simulation),
+ * only features with `prod: true` are returned.
+ * In dev, all features are returned.
+ *
+ * Features with an explicit `surfaces` array that does NOT include `"toolbar"`
+ * are excluded — they only render on their declared surfaces (fullbar/splitbar).
+ * Features without a `surfaces` array default to toolbar-only.
+ *
+ * @param {string} type — widget type string
+ * @param {{ isLocalDev?: boolean }} [options]
+ * @returns {Array} features array from config (variables resolved), or empty array
+ */
+export function getFeatures(type, { isLocalDev = true } = {}) {
+  const features = widgetTypes[type]?.features ?? []
+  let filtered = features.filter(f => {
+    const surfaces = f.surfaces || ['toolbar']
+    return surfaces.includes('toolbar')
+  })
+  if (import.meta.env?.PROD || !isLocalDev) {
+    filtered = filtered.filter(f => f.prod)
+  }
+  return filtered
+}
+
+/**
+ * Get features for a specific rendering surface.
+ * Features without a `surfaces` array default to `["toolbar"]`.
+ * @param {string} type — widget type string
+ * @param {'toolbar' | 'fullbar' | 'splitbar'} surface — target surface
+ * @param {{ isLocalDev?: boolean }} [options]
+ * @returns {Array} filtered features for the given surface
+ */
+export function getFeaturesForSurface(type, surface, { isLocalDev = true } = {}) {
+  let features = widgetTypes[type]?.features ?? []
+  if (import.meta.env?.PROD || !isLocalDev) {
+    features = features.filter(f => f.prod)
+  }
+  return features.filter(f => {
+    const surfaces = f.surfaces || ['toolbar']
+    return surfaces.includes(surface)
+  })
+}
+
+/**
+ * Check if a widget type supports resize in the current environment.
+ * Returns false if resize is disabled, or if in production and prod is not true.
+ * @param {string} type — widget type string
+ * @returns {boolean}
+ */
+export function isResizable(type) {
+  const resize = widgetTypes[type]?.resize
+  if (!resize?.enabled) return false
+  if (import.meta.env?.PROD && !resize.prod) return false
+  return true
+}
+
+/**
+ * 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 }
+}
+
+/**
+ * Check if a widget type supports expanding to a full-screen modal.
+ * @param {string} type — widget type string
+ * @returns {boolean}
+ */
+export function isExpandable(type) {
+  return widgetTypes[type]?.expandable === true
+}
+
+/**
+ * Check if a widget type can appear in a split-screen pane.
+ * @param {string} type — widget type string
+ * @returns {boolean}
+ */
+export function isSplitScreenCapable(type) {
+  return widgetTypes[type]?.splitScreen === true
+}
+
+/**
+ * Get the interact gate config for a widget type.
+ * @returns {{ enabled: boolean, label: string }} 
+ */
+export function getInteractGate(type) {
+  const def = widgetTypes[type]
+  if (!def || !def.interactGate) return { enabled: false, label: 'Click to interact' }
+  return {
+    enabled: true,
+    label: def.interactGateLabel || 'Click to interact',
+  }
+}
+
+/**
+ * Get all widget types as an array of { type, label, icon } for menus.
+ * Excludes link-preview, image, and figma-embed which are created via paste only.
+ */
+export function getMenuWidgetTypes() {
+  return Object.entries(widgetTypes)
+    .filter(([type, def]) => type !== 'link-preview' && type !== 'image' && type !== 'figma-embed' && type !== 'codepen-embed' && type !== 'story' && type !== 'terminal-read' && !def.unlisted)
+    .map(([type, def]) => ({ type, label: def.label, icon: def.icon }))
+}
+
+/**
+ * Get the connector configuration for a widget type.
+ * @param {string} type — widget type string
+ * @returns {{ anchors: Record<string, string>, accept: string[], exclude: string[], defaults: Object|undefined }}
+ */
+export function getConnectorConfig(type) {
+  const def = widgetTypes[type]?.connectors
+  return {
+    anchors: def?.anchors ?? { top: 'available', bottom: 'available', left: 'available', right: 'available' },
+    accept: def?.accept ?? ['*'],
+    exclude: def?.exclude ?? [],
+    defaults: def?.defaults,
+  }
+}
+
+/**
+ * Check if a specific anchor is available on a widget type.
+ * @param {string} type — widget type string
+ * @param {string} anchor — anchor name (top/bottom/left/right)
+ * @returns {'available' | 'disabled' | 'unavailable'}
+ */
+export function getAnchorState(type, anchor) {
+  const config = getConnectorConfig(type)
+  return config.anchors[anchor] ?? 'available'
+}
+
+/**
+ * Get the connector styling defaults from config.
+ * @returns {Object} connector default styles
+ */
+export function getConnectorDefaults() {
+  const defaults = widgetsConfig.connectorDefaults ?? {}
+  return {
+    controlOffset: defaults.controlOffset ?? 80,
+    stroke: defaults.stroke ?? 'var(--fgColor-accent, #0969da)',
+    strokeWidth: defaults.strokeWidth ?? 4,
+    hoverStroke: defaults.hoverStroke ?? 'var(--fgColor-danger, #cf222e)',
+    hoverStrokeWidth: defaults.hoverStrokeWidth ?? 5,
+    endpointRadius: defaults.endpointRadius ?? 6,
+    endpointFill: defaults.endpointFill ?? 'var(--fgColor-accent, #0969da)',
+    endpointStroke: defaults.endpointStroke ?? 'var(--bgColor-default, #ffffff)',
+    endpointStrokeWidth: defaults.endpointStrokeWidth ?? 3,
+    hitAreaStrokeWidth: defaults.hitAreaStrokeWidth ?? 24,
+    dragStroke: defaults.dragStroke ?? 'var(--fgColor-accent, #0969da)',
+    dragStrokeWidth: defaults.dragStrokeWidth ?? 2,
+    dragDasharray: defaults.dragDasharray ?? '6 4',
+    dragOpacity: defaults.dragOpacity ?? 0.7,
+    startEndpoint: defaults.startEndpoint ?? 'circle',
+    endEndpoint: defaults.endEndpoint ?? 'circle',
+  }
+}
+
+/**
+ * Check if a connection from sourceType to targetType is allowed.
+ * @param {string} targetType — widget type receiving the connection
+ * @param {string} sourceType — widget type initiating the connection
+ * @returns {boolean}
+ */
+export function canAcceptConnection(targetType, sourceType) {
+  const config = getConnectorConfig(targetType)
+  if (config.exclude.includes(sourceType)) return false
+  if (config.accept.includes('*')) return true
+  return config.accept.includes(sourceType)
+}

package/src/internals/canvas/widgets/widgetConfig.test.js

@@ -0,0 +1,68 @@
+import { describe, expect, it } from 'vitest'
+import { isResizable, getFeatures, getWidgetMeta } from './widgetConfig.js'
+
+describe('isResizable', () => {
+  // Vitest runs in dev mode by default (import.meta.env.PROD = false)
+  // In dev mode, all resize-enabled widgets are resizable
+  it('returns true for resize-enabled widgets in dev mode', () => {
+    expect(isResizable('sticky-note')).toBe(true)
+    expect(isResizable('prototype')).toBe(true)
+    expect(isResizable('figma-embed')).toBe(true)
+    expect(isResizable('image')).toBe(true)
+    expect(isResizable('component')).toBe(true)
+  })
+
+  it('returns false for link-preview (resize disabled)', () => {
+    expect(isResizable('link-preview')).toBe(false)
+  })
+
+  it('returns true for markdown (resize enabled, dev only)', () => {
+    expect(isResizable('markdown')).toBe(true)
+  })
+
+  it('returns false for unknown widget types', () => {
+    expect(isResizable('nonexistent')).toBe(false)
+  })
+})
+
+describe('getFeatures', () => {
+  it('returns features array for known widget types', () => {
+    const features = getFeatures('sticky-note')
+    expect(Array.isArray(features)).toBe(true)
+    expect(features.length).toBeGreaterThan(0)
+  })
+
+  it('returns empty array for unknown widget types', () => {
+    expect(getFeatures('nonexistent')).toEqual([])
+  })
+
+  it('returns only prod features when isLocalDev is false', () => {
+    const features = getFeatures('figma-embed', { isLocalDev: false })
+    expect(features.length).toBeGreaterThan(0)
+    expect(features.every(f => f.prod === true)).toBe(true)
+  })
+
+  it('returns all features when isLocalDev is true (default)', () => {
+    const allFeatures = getFeatures('figma-embed')
+    const prodFeatures = getFeatures('figma-embed', { isLocalDev: false })
+    expect(allFeatures.length).toBeGreaterThan(prodFeatures.length)
+  })
+
+  it('includes menu-only prod features when isLocalDev is false', () => {
+    const features = getFeatures('figma-embed', { isLocalDev: false })
+    const menuFeature = features.find(f => f.menu)
+    expect(menuFeature).toBeDefined()
+    expect(menuFeature.prod).toBe(true)
+  })
+})
+
+describe('getWidgetMeta', () => {
+  it('returns label and icon for known types', () => {
+    const meta = getWidgetMeta('sticky-note')
+    expect(meta).toEqual({ label: 'Sticky Note', icon: '📝' })
+  })
+
+  it('returns null for unknown types', () => {
+    expect(getWidgetMeta('nonexistent')).toBeNull()
+  })
+})

package/src/internals/canvas/widgets/widgetIcons.jsx

@@ -0,0 +1,190 @@
+/**
+ * Shared icon registry for widget toolbars and titlebar actions.
+ *
+ * Maps string icon names from widgets.config.json to React components.
+ * Used by both WidgetChrome (canvas toolbar) and ExpandedPaneTopBar (fullscreen/split titlebars).
+ */
+import { EyeIcon as OcticonEye, EyeClosedIcon as OcticonEyeClosed, CodeIcon as OcticonCode, UnwrapIcon as OcticonUnwrap, ImageIcon as OcticonImage, UnfoldIcon as OcticonUnfold, FoldIcon as OcticonFold, ScreenFullIcon as OcticonScreenFull, ScreenNormalIcon as OcticonScreenNormal, BroadcastIcon as OcticonBroadcast, CheckIcon as OcticonCheck, MirrorIcon as OcticonMirror } from '@primer/octicons-react'
+
+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>
+  )
+}
+
+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 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">
+      <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>
+  )
+}
+
+function MoreIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
+    </svg>
+  )
+}
+
+function LinkIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z" />
+    </svg>
+  )
+}
+
+function ChevronDownIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z" />
+    </svg>
+  )
+}
+
+function DownloadIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path d="M2.75 14A1.75 1.75 0 0 1 1 12.25v-2.5a.75.75 0 0 1 1.5 0v2.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25v-2.5a.75.75 0 0 1 1.5 0v2.5A1.75 1.75 0 0 1 13.25 14Z" />
+      <path d="M7.25 7.689V2a.75.75 0 0 1 1.5 0v5.689l1.97-1.969a.749.749 0 1 1 1.06 1.06l-3.25 3.25a.749.749 0 0 1-1.06 0L4.22 6.78a.749.749 0 1 1 1.06-1.06Z" />
+    </svg>
+  )
+}
+
+function ExpandIcon() {
+  return <OcticonScreenFull size={12} />
+}
+
+function CollapseIcon() {
+  return <OcticonScreenNormal size={12} />
+}
+
+function SyncIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path d="M1.705 8.005a.75.75 0 0 1 .834.656 5.5 5.5 0 0 0 9.592 2.97l-1.204-1.204a.25.25 0 0 1 .177-.427h3.646a.25.25 0 0 1 .25.25v3.646a.25.25 0 0 1-.427.177l-1.38-1.38A7.002 7.002 0 0 1 1.05 8.84a.75.75 0 0 1 .656-.834ZM8 2.5a5.487 5.487 0 0 0-4.131 1.869l1.204 1.204A.25.25 0 0 1 4.896 6H1.25A.25.25 0 0 1 1 5.75V2.104a.25.25 0 0 1 .427-.177l1.38 1.38A7.002 7.002 0 0 1 14.95 7.16a.75.75 0 0 1-1.49.178A5.5 5.5 0 0 0 8 2.5Z" />
+    </svg>
+  )
+}
+
+function UnfoldIcon() {
+  return <OcticonUnfold size={12} />
+}
+
+function FoldIcon() {
+  return <OcticonFold size={12} />
+}
+
+function ColumnsIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M12 3v18" /><rect x="3" y="3" width="18" height="18" rx="2" />
+    </svg>
+  )
+}
+
+function CheckMarkIcon() {
+  return <OcticonCheck size={12} />
+}
+
+function BroadcastIcon() {
+  return <OcticonBroadcast size={12} />
+}
+
+function MirrorIcon() {
+  return <OcticonMirror size={12} />
+}
+
+function CropIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path d="M3.75 1a.75.75 0 0 1 .75.75V3.5h7a1.75 1.75 0 0 1 1.75 1.75v7h1.75a.75.75 0 0 1 0 1.5H13.25v1.5a.75.75 0 0 1-1.5 0v-1.5h-7A1.75 1.75 0 0 1 3 12.5v-7H1.25a.75.75 0 0 1 0-1.5H3V1.75A.75.75 0 0 1 3.75 1ZM4.5 5.25v7c0 .138.112.25.25.25h7V5.25a.25.25 0 0 0-.25-.25h-7Z" />
+    </svg>
+  )
+}
+
+/** Maps icon name strings from config to React components. */
+export const ICON_REGISTRY = {
+  'trash': DeleteIcon,
+  'zoom-in': ZoomInIcon,
+  'zoom-out': ZoomOutIcon,
+  'edit': EditIcon,
+  'open-external': OpenExternalIcon,
+  'eye': EyeIcon,
+  'eye-closed': EyeClosedIcon,
+  'code': CodeIcon,
+  'unwrap': UnwrapIcon,
+  'image': ImageIcon,
+  'copy': CopyIcon,
+  'link': LinkIcon,
+  'more': MoreIcon,
+  'chevron-down': ChevronDownIcon,
+  'download': DownloadIcon,
+  'expand': ExpandIcon,
+  'collapse': CollapseIcon,
+  'sync': SyncIcon,
+  'unfold': UnfoldIcon,
+  'fold': FoldIcon,
+  'columns': ColumnsIcon,
+  'broadcast': BroadcastIcon,
+  'check': CheckMarkIcon,
+  'crop': CropIcon,
+  'mirror': MirrorIcon,
+}