@dfosco/storyboard 0.5.0-alpha.0

package/src/internals/canvas/ComponentErrorBoundary.jsx

@@ -0,0 +1,50 @@
+import { Component } from 'react'
+
+/**
+ * Error boundary for canvas component widgets.
+ * Catches render-time errors so a single broken component
+ * doesn't crash the entire canvas page.
+ *
+ * Used as a production fallback when iframe isolation is not available.
+ */
+export default class ComponentErrorBoundary extends Component {
+  constructor(props) {
+    super(props)
+    this.state = { error: null }
+  }
+
+  static getDerivedStateFromError(error) {
+    return { error }
+  }
+
+  componentDidCatch(error, info) {
+    console.error(
+      `[storyboard] Component widget "${this.props.name || 'unknown'}" crashed:`,
+      error,
+      info?.componentStack,
+    )
+  }
+
+  render() {
+    if (this.state.error) {
+      return (
+        <div style={{
+          padding: '16px',
+          color: '#cf222e',
+          fontFamily: 'system-ui, -apple-system, sans-serif',
+          fontSize: '13px',
+          lineHeight: 1.5,
+          whiteSpace: 'pre-wrap',
+          wordBreak: 'break-word',
+          minWidth: 200,
+          minHeight: 60,
+        }}>
+          <strong>{this.props.name || 'Component'}</strong>
+          <br />
+          {String(this.state.error.message || this.state.error)}
+        </div>
+      )
+    }
+    return this.props.children
+  }
+}

package/src/internals/canvas/ConnectorLayer.jsx

@@ -0,0 +1,208 @@
+import { useMemo, useCallback } from 'react'
+import styles from './ConnectorLayer.module.css'
+import { getConnectorDefaults, getConnectorConfig } from './widgets/widgetConfig.js'
+import { getAnchorPoint, buildPath } from './connectorGeometry.js'
+
+const connectorConfig = getConnectorDefaults()
+
+/**
+ * Get the effective endpoint style for a widget, merging per-widget-type
+ * connector overrides with global defaults.
+ * @param {string} widgetType — widget type string
+ * @param {'start'|'end'} side — which end of the connector
+ * @returns {string} endpoint style ('circle', 'arrow-in', 'arrow-out', 'none')
+ */
+function getEndpointStyle(widgetType, side) {
+  const key = side === 'start' ? 'startEndpoint' : 'endEndpoint'
+  const widgetConnectors = getConnectorConfig(widgetType)
+  if (widgetConnectors.defaults?.[key]) return widgetConnectors.defaults[key]
+  return connectorConfig[key]
+}
+
+/**
+ * Render an endpoint shape (circle, arrow-start, arrow-end, or none) at the given point.
+ * - "circle" (default): filled dot
+ * - "arrow-start": arrowhead pointing toward the start widget
+ * - "arrow-end": arrowhead pointing toward the end widget
+ * - "none": invisible drag target only
+ *
+ * @param {number} x,y — position of this endpoint
+ * @param {Object} startPt — position of the connector's start endpoint
+ * @param {Object} endPt — position of the connector's end endpoint
+ */
+const ENDPOINT_HIT_PADDING = 8
+
+function EndpointShape({ x, y, startPt, endPt, style, onPointerDown }) {
+  const passThrough = !onPointerDown ? { pointerEvents: 'none' } : {}
+  const hitRadius = connectorConfig.endpointRadius + ENDPOINT_HIT_PADDING
+  const hitTarget = onPointerDown ? (
+    <circle cx={x} cy={y} r={hitRadius}
+      className={styles.endpointHitArea}
+      onPointerDown={onPointerDown}
+    />
+  ) : null
+  if (style === 'none') {
+    return (
+      <>
+        {hitTarget}
+        <circle cx={x} cy={y} r={connectorConfig.endpointRadius}
+          style={{ fill: 'transparent', stroke: 'none', ...(onPointerDown ? { pointerEvents: 'none' } : { pointerEvents: 'none' }) }}
+        />
+      </>
+    )
+  }
+  if (style === 'arrow-start' || style === 'arrow-end') {
+    const size = connectorConfig.endpointRadius * 2.2
+    const target = style === 'arrow-start' ? startPt : endPt
+    const dx = target.x - x
+    const dy = target.y - y
+    const rotation = (Math.atan2(dy, dx) * 180 / Math.PI) + 90
+    return (
+      <>
+        {hitTarget}
+        <polygon
+          points={`0,${-size} ${size * 0.6},${size * 0.5} ${-size * 0.6},${size * 0.5}`}
+          transform={`translate(${x},${y}) rotate(${rotation})`}
+          className={styles.connectorEndpoint}
+          style={passThrough}
+        />
+      </>
+    )
+  }
+  return (
+    <>
+      {hitTarget}
+      <circle cx={x} cy={y} r={connectorConfig.endpointRadius}
+        className={styles.connectorEndpoint}
+        style={passThrough}
+      />
+    </>
+  )
+}
+
+/** Shared inline style for both SVG layers (CSS vars for connector theming). */
+const svgLayerStyle = {
+  width: '100000px',
+  height: '100000px',
+  '--connector-stroke': connectorConfig.stroke,
+  '--connector-stroke-width': `${connectorConfig.strokeWidth}px`,
+  '--connector-hover-stroke': connectorConfig.hoverStroke,
+  '--connector-hover-stroke-width': `${connectorConfig.hoverStrokeWidth}px`,
+  '--connector-endpoint-fill': connectorConfig.endpointFill,
+  '--connector-endpoint-stroke': connectorConfig.endpointStroke,
+  '--connector-endpoint-stroke-width': `${connectorConfig.endpointStrokeWidth}px`,
+  '--connector-hit-area-width': `${connectorConfig.hitAreaStrokeWidth}px`,
+  '--connector-drag-stroke': connectorConfig.dragStroke,
+  '--connector-drag-stroke-width': `${connectorConfig.dragStrokeWidth}px`,
+  '--connector-drag-dasharray': connectorConfig.dragDasharray,
+  '--connector-drag-opacity': connectorConfig.dragOpacity,
+}
+
+/**
+ * Two-layer SVG overlay for connector lines and endpoints.
+ *
+ * Stacking (bottom → top):
+ *   connectorLayer  (z-index 1) — paths, hit areas, broadcast animations
+ *   widgets         (z-index 2/3) — normal / selected
+ *   endpointLayer   (z-index 4) — anchor dots & drag targets
+ *
+ * Must be placed inside the same zoom-transformed container as widgets.
+ */
+export default function ConnectorLayer({
+  connectors = [],
+  widgets = [],
+  selectedWidgetIds,
+  onRemove,
+  onEndpointDrag,
+  dragPreview,
+  hidden = false,
+}) {
+  const widgetMap = useMemo(() => {
+    const map = new Map()
+    for (const w of widgets) {
+      map.set(w.id, w)
+    }
+    return map
+  }, [widgets])
+
+  const handleClick = useCallback((e, connectorId) => {
+    e.stopPropagation()
+    onRemove?.(connectorId)
+  }, [onRemove])
+
+  // Pre-compute connector geometry once, shared by both SVG layers
+  const resolved = useMemo(() => connectors.map((conn) => {
+    const startWidget = widgetMap.get(conn.start?.widgetId)
+    const endWidget = widgetMap.get(conn.end?.widgetId)
+    if (!startWidget || !endWidget) return null
+    const startPt = getAnchorPoint(startWidget, conn.start.anchor)
+    const endPt = getAnchorPoint(endWidget, conn.end.anchor)
+    const d = buildPath(startPt, conn.start.anchor, endPt, conn.end.anchor)
+    const startStyle = getEndpointStyle(startWidget.type, 'start')
+    const endStyle = getEndpointStyle(endWidget.type, 'end')
+    const isBroadcast = conn.meta?.messagingMode === 'two-way'
+    const startSelected = selectedWidgetIds?.has(conn.start?.widgetId)
+    const endSelected = selectedWidgetIds?.has(conn.end?.widgetId)
+    const reverseAnim = endSelected && !startSelected
+    return { conn, startPt, endPt, d, startStyle, endStyle, isBroadcast, reverseAnim }
+  }).filter(Boolean), [connectors, widgetMap, selectedWidgetIds])
+
+  const hiddenClass = hidden ? styles.connectorLayerHidden : ''
+
+  return (
+    <>
+      {/* Back layer: connector paths (behind widgets) */}
+      <svg
+        className={`${styles.connectorLayer} ${hiddenClass}`}
+        style={svgLayerStyle}
+      >
+        {resolved.map(({ conn, d, isBroadcast, reverseAnim }) => (
+          <g key={conn.id}>
+            <path d={d} className={styles.connectorPathHitArea}
+              onClick={(e) => handleClick(e, conn.id)} />
+            <path d={d}
+              className={`${styles.connectorPath}${isBroadcast ? ` ${styles.connectorBroadcast}` : ''}`}
+              onClick={(e) => handleClick(e, conn.id)} />
+            {isBroadcast && (
+              <path d={d}
+                className={`${styles.broadcastFlow}${reverseAnim ? ` ${styles.broadcastFlowReverse}` : ''}`} />
+            )}
+          </g>
+        ))}
+
+        {dragPreview && (
+          <path
+            d={buildPath(
+              dragPreview.startPt, dragPreview.startAnchor,
+              dragPreview.endPt, dragPreview.endAnchor || dragPreview.startAnchor,
+              !dragPreview.snapTarget,
+            )}
+            className={dragPreview.snapTarget ? styles.connectorPath : styles.dragPreviewPath}
+          />
+        )}
+      </svg>
+
+      {/* Front layer: endpoint anchors (above widgets) */}
+      <svg
+        className={`${styles.endpointLayer} ${hiddenClass}`}
+        style={svgLayerStyle}
+      >
+        {resolved.map(({ conn, startPt, endPt, startStyle, endStyle }) => (
+          <g key={conn.id}>
+            <EndpointShape x={startPt.x} y={startPt.y} startPt={startPt} endPt={endPt} style={startStyle}
+              onPointerDown={onEndpointDrag ? (e) => { e.stopPropagation(); e.preventDefault(); onEndpointDrag(conn, 'start', e) } : undefined} />
+            <EndpointShape x={endPt.x} y={endPt.y} startPt={startPt} endPt={endPt} style={endStyle}
+              onPointerDown={onEndpointDrag ? (e) => { e.stopPropagation(); e.preventDefault(); onEndpointDrag(conn, 'end', e) } : undefined} />
+          </g>
+        ))}
+
+        {dragPreview?.snapTarget && (
+          <EndpointShape x={dragPreview.endPt.x} y={dragPreview.endPt.y}
+            startPt={dragPreview.startPt} endPt={dragPreview.endPt} style={connectorConfig.endEndpoint} />
+        )}
+      </svg>
+    </>
+  )
+}
+
+export { getAnchorPoint, buildPath }

package/src/internals/canvas/ConnectorLayer.module.css

@@ -0,0 +1,129 @@
+.connectorLayer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  overflow: visible;
+  z-index: 1;
+  transition: opacity 0.2s ease;
+}
+
+.connectorLayerHidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* Endpoint anchors sit above widgets so they're always visible and interactive */
+.endpointLayer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  overflow: visible;
+  z-index: 4;
+  transition: opacity 0.2s ease;
+}
+
+.connectorPath {
+  fill: none;
+  stroke: var(--connector-stroke, var(--fgColor-accent, #0969da));
+  stroke-width: var(--connector-stroke-width, 4px);
+  pointer-events: stroke;
+  cursor: pointer;
+  transition: stroke 0.15s ease, stroke-width 0.15s ease;
+}
+
+.connectorPath:hover {
+  stroke: var(--connector-hover-stroke, var(--fgColor-danger, #cf222e));
+  stroke-width: var(--connector-hover-stroke-width, 5px);
+}
+
+.connectorEndpoint {
+  fill: var(--connector-endpoint-fill, var(--fgColor-accent, #0969da));
+  stroke: var(--connector-endpoint-stroke, var(--bgColor-default, #ffffff));
+  stroke-width: var(--connector-endpoint-stroke-width, 3px);
+  pointer-events: auto;
+  cursor: crosshair;
+  transition: filter 0.1s ease;
+}
+
+.connectorEndpoint:hover {
+  filter: drop-shadow(0 0 4px var(--connector-endpoint-fill, var(--fgColor-accent, #0969da)));
+}
+
+/* Invisible expanded hit area around connector endpoints */
+.endpointHitArea {
+  fill: transparent;
+  stroke: none;
+  pointer-events: auto;
+  cursor: crosshair;
+}
+
+/* Glow effect when hovering endpoint hit area */
+.endpointHitArea:hover ~ .connectorEndpoint {
+  filter: drop-shadow(0 0 4px var(--connector-endpoint-fill, var(--fgColor-accent, #0969da)));
+}
+
+.connectorPathHitArea {
+  fill: none;
+  stroke: transparent;
+  stroke-width: var(--connector-hit-area-width, 16px);
+  pointer-events: stroke;
+  cursor: pointer;
+}
+
+/* Trigger the visible connector's hover style from the wider hit area */
+.connectorPathHitArea:hover ~ .connectorPath {
+  stroke: var(--connector-hover-stroke, var(--fgColor-danger, #cf222e));
+  stroke-width: var(--connector-hover-stroke-width, 5px);
+}
+
+.dragPreviewPath {
+  fill: none;
+  stroke: var(--connector-drag-stroke, var(--fgColor-accent, #0969da));
+  stroke-width: var(--connector-drag-stroke-width, 2px);
+  stroke-dasharray: var(--connector-drag-dasharray, 6 4);
+  pointer-events: none;
+  opacity: var(--connector-drag-opacity, 0.7);
+}
+
+/* Broadcast-active connector — transparent base, 50% wider */
+.connectorBroadcast {
+  stroke: transparent;
+  stroke-width: 6px;
+}
+
+.connectorPathHitArea:hover ~ .connectorBroadcast {
+  stroke: var(--connector-hover-stroke, var(--fgColor-danger, #cf222e));
+  stroke-width: var(--connector-hover-stroke-width, 5px);
+}
+
+/* Flowing dots animation along broadcast connectors */
+.broadcastFlow {
+  fill: none;
+  stroke: var(--bgColor-accent-emphasis, #0969da);
+  stroke-width: 6px;
+  stroke-dasharray: 3 17;
+  stroke-linecap: round;
+  pointer-events: none;
+  animation: broadcastFlowAnim 0.8s linear infinite;
+  transition: opacity 0.15s ease;
+}
+
+/* Hide dots on hover so the red delete indicator shows cleanly */
+.connectorPathHitArea:hover ~ .broadcastFlow {
+  opacity: 0;
+}
+
+.broadcastFlowReverse {
+  animation-direction: reverse;
+}
+
+@keyframes broadcastFlowAnim {
+  from { stroke-dashoffset: 0; }
+  to { stroke-dashoffset: -20; }
+}

package/src/internals/canvas/MarqueeOverlay.jsx

@@ -0,0 +1,20 @@
+import styles from './CanvasPage.module.css'
+
+/**
+ * Renders the translucent selection rectangle during a marquee drag.
+ * Positioned relative to the scroll container.
+ */
+export default function MarqueeOverlay({ rect }) {
+  if (!rect) return null
+  return (
+    <div
+      className={styles.marqueeRect}
+      style={{
+        left: rect.x,
+        top: rect.y,
+        width: rect.w,
+        height: rect.h,
+      }}
+    />
+  )
+}