@dfosco/storyboard-react 4.2.0-beta.4 → 4.2.1

package/src/canvas/connectorGeometry.js

@@ -0,0 +1,132 @@
+import { getConnectorDefaults } from './widgets/widgetConfig.js'
+
+const connectorConfig = getConnectorDefaults()
+const CONTROL_OFFSET = connectorConfig.controlOffset
+
+/**
+ * Compute the anchor point on a widget's edge.
+ * Reads actual DOM dimensions for accuracy (widgets like markdown auto-size).
+ * Falls back to props/bounds/defaults if DOM element isn't found.
+ */
+export function getAnchorPoint(widget, anchor) {
+  const x = widget.position?.x ?? 0
+  const y = widget.position?.y ?? 0
+
+  let w, h
+  const el = typeof document !== 'undefined' ? document.getElementById(widget.id) : null
+  if (el) {
+    const firstChild = el.querySelector('[data-widget-id]') || el.firstElementChild
+    if (firstChild) {
+      w = firstChild.offsetWidth
+      h = firstChild.offsetHeight
+    }
+  }
+  if (!w) w = widget.props?.width ?? widget.bounds?.width ?? 270
+  if (!h) h = widget.props?.height ?? widget.bounds?.height ?? 170
+
+  switch (anchor) {
+    case 'top':    return { x: x + w / 2, y }
+    case 'bottom': return { x: x + w / 2, y: y + h }
+    case 'left':   return { x, y: y + h / 2 }
+    case 'right':  return { x: x + w, y: y + h / 2 }
+    default:       return { x: x + w / 2, y: y + h / 2 }
+  }
+}
+
+/**
+ * Compute the control point offset direction for an anchor.
+ */
+export function getControlOffset(anchor) {
+  switch (anchor) {
+    case 'top':    return { dx: 0, dy: -CONTROL_OFFSET }
+    case 'bottom': return { dx: 0, dy: CONTROL_OFFSET }
+    case 'left':   return { dx: -CONTROL_OFFSET, dy: 0 }
+    case 'right':  return { dx: CONTROL_OFFSET, dy: 0 }
+    default:       return { dx: 0, dy: 0 }
+  }
+}
+
+/**
+ * Build a cubic Bézier path string between two anchor points.
+ * When `freeEnd` is true, the end control point is computed from
+ * the direction vector (end→start) so the curve never bends in
+ * front of the cursor during drag.
+ */
+export function buildPath(startPt, startAnchor, endPt, endAnchor, freeEnd = false) {
+  const c1 = getControlOffset(startAnchor)
+  let c2
+  if (freeEnd) {
+    const dx = startPt.x - endPt.x
+    const dy = startPt.y - endPt.y
+    const dist = Math.hypot(dx, dy) || 1
+    const scale = Math.min(CONTROL_OFFSET, dist * 0.4)
+    c2 = { dx: (dx / dist) * scale, dy: (dy / dist) * scale }
+  } else {
+    c2 = getControlOffset(endAnchor)
+  }
+  return `M ${startPt.x} ${startPt.y} C ${startPt.x + c1.dx} ${startPt.y + c1.dy}, ${endPt.x + c2.dx} ${endPt.y + c2.dy}, ${endPt.x} ${endPt.y}`
+}
+
+/**
+ * Evaluate a cubic Bézier curve at parameter t.
+ * B(t) = (1-t)³·P0 + 3(1-t)²t·P1 + 3(1-t)t²·P2 + t³·P3
+ */
+function evalCubicBezier(p0, p1, p2, p3, t) {
+  const mt = 1 - t
+  const mt2 = mt * mt
+  const mt3 = mt2 * mt
+  const t2 = t * t
+  const t3 = t2 * t
+  return {
+    x: mt3 * p0.x + 3 * mt2 * t * p1.x + 3 * mt * t2 * p2.x + t3 * p3.x,
+    y: mt3 * p0.y + 3 * mt2 * t * p1.y + 3 * mt * t2 * p2.y + t3 * p3.y,
+  }
+}
+
+/**
+ * Resolve a connector's Bézier control points from widget positions.
+ * Returns { p0, cp1, cp2, p3 } or null if either widget is missing.
+ */
+export function getConnectorControlPoints(connector, widgetMap) {
+  const startWidget = widgetMap.get(connector.start?.widgetId)
+  const endWidget = widgetMap.get(connector.end?.widgetId)
+  if (!startWidget || !endWidget) return null
+
+  const p0 = getAnchorPoint(startWidget, connector.start.anchor)
+  const p3 = getAnchorPoint(endWidget, connector.end.anchor)
+  const c1 = getControlOffset(connector.start.anchor)
+  const c2 = getControlOffset(connector.end.anchor)
+
+  return {
+    p0,
+    cp1: { x: p0.x + c1.dx, y: p0.y + c1.dy },
+    cp2: { x: p3.x + c2.dx, y: p3.y + c2.dy },
+    p3,
+  }
+}
+
+/**
+ * Test whether any point along a connector's Bézier path falls inside a rect.
+ * @param {Object} connector — { start: { widgetId, anchor }, end: { widgetId, anchor } }
+ * @param {Map} widgetMap — Map<widgetId, widget>
+ * @param {{ x, y, width, height }} rect — axis-aligned selection rectangle
+ * @param {number} numSamples — number of evenly-spaced points to test (default 24)
+ * @returns {boolean}
+ */
+export function connectorIntersectsRect(connector, widgetMap, rect, numSamples = 24) {
+  const pts = getConnectorControlPoints(connector, widgetMap)
+  if (!pts) return false
+
+  const { p0, cp1, cp2, p3 } = pts
+  const rRight = rect.x + rect.width
+  const rBottom = rect.y + rect.height
+
+  for (let i = 0; i <= numSamples; i++) {
+    const t = i / numSamples
+    const pt = evalCubicBezier(p0, cp1, cp2, p3, t)
+    if (pt.x >= rect.x && pt.x <= rRight && pt.y >= rect.y && pt.y <= rBottom) {
+      return true
+    }
+  }
+  return false
+}

package/src/canvas/hotPoolDevLogs.js

@@ -0,0 +1,25 @@
+/**
+ * Hot Pool browser devlogs — listens for server HMR events and
+ * logs them to the browser console when DevTools "Dev logs" is on.
+ */
+
+import { getFlag } from '@dfosco/storyboard-core'
+
+let registered = false
+
+function isDevLogsEnabled() {
+  return getFlag('dev-logs')
+}
+
+export function registerHotPoolDevLogs() {
+  if (registered) return
+  registered = true
+
+  if (!import.meta.hot) return
+
+  import.meta.hot.on('storyboard:hot-pool-log', (data) => {
+    if (!isDevLogsEnabled()) return
+    const poolTag = data.poolId ? `:${data.poolId}` : ''
+    console.log(`%c[hot-pool${poolTag}]%c ${data.message}`, 'color: #8b5cf6; font-weight: bold', 'color: inherit')
+  })
+}

package/src/canvas/useCanvas.js

@@ -100,7 +100,7 @@ export function useCanvas(canvasId) {
   useEffect(() => {
     if (!import.meta.hot || !buildTimeCanvas) return
 
-    const handleCanvasFileChanged = ({ data }) => {
+    const handleCanvasFileChanged = (data) => {
       const eventId = data?.canvasId || data?.name
       if (!data || eventId !== canvasId) return
       // Use metadata from the HMR event directly if available (faster)

package/src/canvas/useMarqueeSelect.js

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
+import { connectorIntersectsRect } from './connectorGeometry.js'
 
 /**
  * Returns the bounding-box list for all widgets on the canvas.
@@ -45,6 +46,7 @@ function rectsIntersect(a, b) {
  * @param {React.RefObject} opts.zoomRef      — ref holding current zoom (number 25-200)
  * @param {Function} opts.setSelectedWidgetIds — state setter for selected IDs (Set)
  * @param {Array} opts.widgets                — current localWidgets array
+ * @param {Array} opts.connectors             — current localConnectors array
  * @param {Array} opts.componentEntries       — current componentEntries array
  * @param {Object} opts.fallbackSizes         — WIDGET_FALLBACK_SIZES map
  * @param {boolean} opts.spaceHeld            — whether the space key is pressed (panning)
@@ -57,6 +59,7 @@ export default function useMarqueeSelect({
   zoomRef,
   setSelectedWidgetIds,
   widgets,
+  connectors,
   componentEntries,
   fallbackSizes,
   spaceHeld,
@@ -93,6 +96,8 @@ export default function useMarqueeSelect({
       startCanvasY: canvasStart.y,
       startClientX: e.clientX,
       startClientY: e.clientY,
+      shiftKey: e.shiftKey,
+      altKey: e.altKey,
     }
 
     // Minimum drag distance before showing the marquee (avoids flicker on clicks)
@@ -141,11 +146,11 @@ export default function useMarqueeSelect({
 
       if (!ms) return
 
-      // If the user barely moved, treat as a deselect click
+      // If the user barely moved, treat as a deselect click (unless shift held)
       const dx = ev.clientX - ms.startClientX
       const dy = ev.clientY - ms.startClientY
       if (Math.abs(dx) < MIN_DRAG && Math.abs(dy) < MIN_DRAG) {
-        setSelectedWidgetIds(new Set())
+        if (!ms.shiftKey) setSelectedWidgetIds(new Set())
         return
       }
 
@@ -167,14 +172,35 @@ export default function useMarqueeSelect({
         }
       }
 
-      setSelectedWidgetIds(selected)
+      // Option+marquee: also select widgets connected by intersected connectors
+      if (ms.altKey && connectors?.length) {
+        const widgetMap = new Map()
+        for (const w of (widgets ?? [])) widgetMap.set(w.id, w)
+        for (const conn of connectors) {
+          if (connectorIntersectsRect(conn, widgetMap, selRect)) {
+            if (conn.start?.widgetId) selected.add(conn.start.widgetId)
+            if (conn.end?.widgetId) selected.add(conn.end.widgetId)
+          }
+        }
+      }
+
+      // Shift+marquee merges with existing selection; plain marquee replaces it
+      if (ms.shiftKey) {
+        setSelectedWidgetIds((prev) => {
+          const merged = new Set(prev)
+          for (const id of selected) merged.add(id)
+          return merged
+        })
+      } else {
+        setSelectedWidgetIds(selected)
+      }
     }
 
     document.addEventListener('mousemove', handleMove)
     document.addEventListener('mouseup', handleUp)
     window.addEventListener('blur', handleCancel)
     cleanupRef.current = removeListeners
-  }, [isLocalDev, spaceHeld, clientToCanvas, scrollRef, setSelectedWidgetIds, widgets, componentEntries, fallbackSizes])
+  }, [isLocalDev, spaceHeld, clientToCanvas, scrollRef, setSelectedWidgetIds, widgets, connectors, componentEntries, fallbackSizes])
 
   // Clean up listeners if component unmounts mid-drag
   useEffect(() => {

package/src/canvas/widgets/CodePenEmbed.jsx

@@ -198,6 +198,7 @@ export default forwardRef(function CodePenEmbed({ props, onUpdate, resizable },
                   title={`CodePen: ${headerTitle}`}
                   allowFullScreen
                   loading="lazy"
+                  onLoad={(e) => e.target.blur()}
                 />
               </div>
             ) : (

package/src/canvas/widgets/ComponentSetWidget.jsx

@@ -0,0 +1,199 @@
+/**
+ * ComponentSetWidget — renders all exports from a story in a single iframe grid.
+ *
+ * Instead of N iframes (one per export), this widget loads one iframe pointing
+ * to the story's ComponentSetPage. Each export renders in a grid cell inside
+ * that single page. The user can select a cell (via label click) which updates
+ * `props.selected` — visible to connected agents.
+ *
+ * Props: { storyId, layout, selected, width, height }
+ */
+import { forwardRef, useImperativeHandle, useRef, useCallback, useState, useEffect, useMemo } from 'react'
+import { getStoryData } from '@dfosco/storyboard-core'
+import Icon from '../../Icon.jsx'
+import WidgetWrapper from './WidgetWrapper.jsx'
+import ResizeHandle from './ResizeHandle.jsx'
+import { useIframeDevLogs } from './iframeDevLogs.js'
+import styles from './ComponentSetWidget.module.css'
+import overlayStyles from './embedOverlay.module.css'
+
+function GridIcon({ size = 16 }) {
+  return <Icon name="iconoir/view-grid" size={size} />
+}
+
+function resolveComponentSetUrl(storyId, layout, selected) {
+  const story = getStoryData(storyId)
+  if (!story?._route) return ''
+  const base = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
+  const params = new URLSearchParams()
+  params.set('_sb_embed', '')
+  params.set('_sb_hide_branch_bar', '')
+  params.set('_sb_component_set', '')
+  if (layout) params.set('layout', layout)
+  if (selected) params.set('selected', selected)
+  return `${base}${story._route}?${params}`
+}
+
+export default forwardRef(function ComponentSetWidget({ id: widgetId, props, onUpdate, resizable }, ref) {
+  const storyId = props?.storyId || ''
+  const layout = props?.layout || 'horizontal'
+  const selected = props?.selected || ''
+  const width = props?.width
+  const height = props?.height
+
+  const containerRef = useRef(null)
+  const iframeRef = useRef(null)
+  const [interactive, setInteractive] = useState(false)
+  const [storyIndexKey, setStoryIndexKey] = useState(0)
+
+  // Re-resolve when story index is live-patched
+  useEffect(() => {
+    const handler = () => setStoryIndexKey((k) => k + 1)
+    document.addEventListener('storyboard:story-index-changed', handler)
+    return () => document.removeEventListener('storyboard:story-index-changed', handler)
+  }, [])
+
+  const enterInteractive = useCallback(() => setInteractive(true), [])
+
+  // Exit interactive mode when clicking outside
+  useEffect(() => {
+    if (!interactive) return
+    function handlePointerDown(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        const chromeEl = e.target.closest(`[data-widget-id="${widgetId}"]`)
+        if (chromeEl) return
+        setInteractive(false)
+      }
+    }
+    document.addEventListener('pointerdown', handlePointerDown)
+    return () => document.removeEventListener('pointerdown', handlePointerDown)
+  }, [interactive, widgetId])
+
+  // Listen for selection messages from the embedded ComponentSetPage
+  useEffect(() => {
+    function handleMessage(e) {
+      if (e.source !== iframeRef.current?.contentWindow) return
+      if (e.data?.type !== 'storyboard:component-set:select') return
+      const newSelected = e.data.exportName || ''
+      if (newSelected !== selected) {
+        onUpdate?.({ selected: newSelected })
+      }
+    }
+    window.addEventListener('message', handleMessage)
+    return () => window.removeEventListener('message', handleMessage)
+  }, [selected, onUpdate])
+
+  const handleResize = useCallback((w, h) => {
+    onUpdate?.({ width: w, height: h })
+  }, [onUpdate])
+
+  useImperativeHandle(ref, () => ({
+    handleAction(actionId) {
+      if (actionId === 'flip-layout') {
+        const next = layout === 'horizontal' ? 'vertical' : 'horizontal'
+        onUpdate?.({ layout: next })
+        return true
+      } else if (actionId === 'open-external') {
+        const story = getStoryData(storyId)
+        if (story?._route) {
+          const base = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
+          window.open(`${base}${story._route}`, '_blank', 'noopener')
+        }
+        return true
+      }
+    },
+  }), [storyId, layout, onUpdate])
+
+  const iframeSrc = useMemo(
+    () => resolveComponentSetUrl(storyId, layout, selected),
+    // storyIndexKey forces re-evaluation when HMR mutates the story index
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [storyId, layout, selected, storyIndexKey],
+  )
+
+  useIframeDevLogs({
+    widget: 'ComponentSetWidget',
+    loaded: interactive && Boolean(iframeSrc),
+    src: iframeSrc,
+  })
+
+  const displayName = storyId || 'Component Set'
+
+  if (!storyId) {
+    return (
+      <WidgetWrapper>
+        <div className={styles.container} ref={containerRef}>
+          <div className={styles.error}>
+            <span className={styles.errorIcon}><GridIcon size={20} /></span>
+            <span className={styles.errorText}>Missing story ID</span>
+          </div>
+        </div>
+      </WidgetWrapper>
+    )
+  }
+
+  if (!iframeSrc) {
+    return (
+      <WidgetWrapper>
+        <div className={styles.container} ref={containerRef}>
+          <div className={styles.error}>
+            <span className={styles.errorIcon}><GridIcon size={20} /></span>
+            <span className={styles.errorText}>Story &ldquo;{storyId}&rdquo; not found or has no route</span>
+          </div>
+        </div>
+      </WidgetWrapper>
+    )
+  }
+
+  const sizeStyle = {}
+  if (typeof width === 'number') sizeStyle.width = `${width}px`
+  if (typeof height === 'number') sizeStyle.height = `${height}px`
+
+  return (
+    <WidgetWrapper>
+      <div ref={containerRef} className={styles.container} style={sizeStyle}>
+        <div className={styles.header}>
+          <span className={styles.headerIcon}><GridIcon size={16} /></span>
+          <span className={styles.headerTitle}>{displayName}</span>
+          {selected && (
+            <span className={styles.headerSelected}>· {selected}</span>
+          )}
+          <span className={styles.headerLayout} title={`Layout: ${layout}`}>
+            {layout === 'horizontal' ? '⇔' : '⇕'}
+          </span>
+        </div>
+        <div className={styles.content}>
+          <iframe
+            ref={iframeRef}
+            src={iframeSrc}
+            className={styles.iframe}
+            title={`${displayName} component set`}
+            onLoad={(e) => e.target.blur()}
+          />
+        </div>
+        {!interactive && (
+          <div
+            className={overlayStyles.interactOverlay}
+            onClick={(e) => {
+              if (e.shiftKey || e.metaKey || e.ctrlKey || e.altKey) return
+              enterInteractive()
+            }}
+            role="button"
+            tabIndex={0}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+                e.stopPropagation()
+                enterInteractive()
+              }
+            }}
+            aria-label="Click to interact"
+          >
+            <span className={overlayStyles.interactHint}>Click to interact</span>
+          </div>
+        )}
+      </div>
+      {resizable && <ResizeHandle targetRef={containerRef} width={width} height={height} onResize={handleResize} />}
+    </WidgetWrapper>
+  )
+})

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

@@ -0,0 +1,89 @@
+/* ComponentSetWidget — canvas widget chrome */
+
+.container {
+  position: relative;
+  overflow: hidden;
+  min-width: 200px;
+  min-height: 120px;
+  background: var(--bgColor-default, #ffffff);
+  border: 3px solid var(--borderColor-default, #d0d7de);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  width: 100%;
+  height: 100%;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--fgColor-muted, #656d76);
+  background: var(--bgColor-muted, #f6f8fa);
+  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  user-select: none;
+}
+
+.headerIcon {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.headerTitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.headerSelected {
+  color: var(--fgColor-accent, #0969da);
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.headerLayout {
+  margin-left: auto;
+  font-size: 14px;
+  opacity: 0.5;
+  flex-shrink: 0;
+}
+
+.content {
+  position: relative;
+  width: 100%;
+  height: calc(100% - 37px);
+}
+
+.iframe {
+  position: absolute;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: none;
+  z-index: 1;
+}
+
+.error {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px;
+  color: var(--fgColor-danger, #cf222e);
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.errorIcon {
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+.errorText {
+  word-break: break-word;
+}

package/src/canvas/widgets/ComponentWidget.jsx

@@ -90,6 +90,7 @@ export default function ComponentWidget({
                 className={styles.iframe}
                 title={exportName || 'Component widget'}
                 sandbox="allow-same-origin allow-scripts"
+                onLoad={(e) => e.target.blur()}
               />
             ) : (
               <div className={styles.placeholder} />