@dfosco/storyboard-react 4.1.0 → 4.2.0-alpha.11

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

@@ -0,0 +1,158 @@
+.container {
+  position: relative;
+  padding-bottom: 0;
+  border-radius: var(--base-size-16, 16px);
+}
+
+/* Match selection outline border-radius to terminal's rounded corners */
+:global(.tc-drag-surface):has(.container) {
+  border-radius: 16px;
+}
+
+.titleBar {
+  position: absolute;
+  top: -28px;
+  left: 4px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 11px;
+  color: #8b949e;
+  pointer-events: none;
+  user-select: none;
+  white-space: nowrap;
+  z-index: 2;
+}
+
+[data-widget-selected] .titleBar {
+  color: var(--borderColor-accent-emphasis, #0969da);
+}
+
+.terminal {
+  position: relative;
+  border-radius: var(--base-size-16, 16px);
+  overflow: hidden;
+  background: #0d1117;
+  border: 1px solid var(--borderColor-default, #30363d);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24);
+  padding: 8px;
+}
+
+.xtermContainer {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+/* ghostty-web / xterm.js container overrides */
+.xtermContainer :global(.xterm) {
+  width: 100%;
+  height: 100%;
+  padding: 12px;
+}
+
+.xtermContainer :global(.xterm-viewport) {
+  overflow-y: auto;
+}
+
+.xtermContainer :global(.xterm-viewport::-webkit-scrollbar) {
+  width: 6px;
+}
+
+.xtermContainer :global(.xterm-viewport::-webkit-scrollbar-thumb) {
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 3px;
+}
+
+.xtermContainer :global(.xterm-viewport::-webkit-scrollbar-track) {
+  background: transparent;
+}
+
+.loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #8b949e;
+  font-size: 13px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  background: #0d1117;
+  z-index: 1;
+}
+
+.error {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #f85149;
+  font-size: 13px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  background: #0d1117;
+  z-index: 1;
+}
+
+.mutedPrompt {
+  color: #484f58;
+  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', Menlo, monospace;
+  font-size: 16px;
+  position: absolute;
+  top: 12px;
+  left: 16px;
+  pointer-events: none;
+  user-select: none;
+}
+
+/* ── Terminal Zzz Animation ── */
+
+.buddyZzz {
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+  margin-bottom: 16px;
+  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', Menlo, monospace;
+  pointer-events: none;
+  user-select: none;
+}
+
+.z1 {
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.6);
+  animation: zFloat 2.4s ease-in-out infinite;
+  animation-delay: 0s;
+  opacity: 0;
+}
+
+.z2 {
+  font-size: 22px;
+  color: rgba(255, 255, 255, 0.5);
+  animation: zFloat 2.4s ease-in-out infinite;
+  animation-delay: 0.8s;
+  opacity: 0;
+}
+
+.z3 {
+  font-size: 28px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.4);
+  animation: zFloat 2.4s ease-in-out infinite;
+  animation-delay: 1.6s;
+  opacity: 0;
+}
+
+@keyframes zFloat {
+  0% {
+    opacity: 0;
+    transform: translateY(0);
+  }
+  15% {
+    opacity: 1;
+  }
+  70% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-24px);
+  }
+}

package/src/canvas/widgets/WidgetChrome.jsx

@@ -1,7 +1,9 @@
 import { useState, useCallback, useRef, useEffect, useSyncExternalStore } from 'react'
 import { Tooltip } from '@primer/react'
 import { EyeIcon as OcticonEye, EyeClosedIcon as OcticonEyeClosed, CodeIcon as OcticonCode, UnwrapIcon as OcticonUnwrap, ImageIcon as OcticonImage, UnfoldIcon as OcticonUnfold, FoldIcon as OcticonFold } from '@primer/octicons-react'
+import { getConnectorConfig, getInteractGate } from './widgetConfig.js'
 import styles from './WidgetChrome.module.css'
+import overlayStyles from './embedOverlay.module.css'
 
 const STICKY_NOTE_COLORS = {
   yellow: { bg: '#fff8c5', border: '#d4a72c', dot: '#e8c846' },
@@ -393,6 +395,7 @@ function ColorPickerFeature({ currentColor, options, onColorChange }) {
  */
 export default function WidgetChrome({
   widgetId,
+  widgetType,
   features = [],
   selected = false,
   multiSelected = false,
@@ -402,6 +405,7 @@ export default function WidgetChrome({
   onDeselect, // eslint-disable-line no-unused-vars
   onAction,
   onUpdate,
+  onConnectorDragStart,
   children,
   readOnly = false,
 }) {
@@ -452,6 +456,55 @@ export default function WidgetChrome({
   const showFeatures = showToolbar && !multiSelected
   const menuFeatures = features.filter((f) => f.menu)
 
+  // Interact gate — declarative overlay from widgets.config.json
+  const gate = widgetType ? getInteractGate(widgetType) : { enabled: false }
+  const [interacting, setInteracting] = useState(false)
+  const slotRef = useRef(null)
+
+  // Exit interact mode on click outside or double-Escape
+  const lastEscapeRef = useRef(0)
+  useEffect(() => {
+    if (!gate.enabled || !interacting) return
+    const handleMouseDown = (e) => {
+      if (slotRef.current && !slotRef.current.contains(e.target)) {
+        setInteracting(false)
+      }
+    }
+    const handleKeyDown = (e) => {
+      if (e.key === 'Escape') {
+        const now = Date.now()
+        if (now - lastEscapeRef.current < 500) {
+          // Double-Escape: exit interact mode but keep widget selected
+          e.stopPropagation()
+          e.preventDefault()
+          setInteracting(false)
+          lastEscapeRef.current = 0
+        } else {
+          // First Escape: let it pass to widget, record timestamp
+          lastEscapeRef.current = now
+        }
+      }
+    }
+    document.addEventListener('mousedown', handleMouseDown, true)
+    document.addEventListener('keydown', handleKeyDown, true)
+    return () => {
+      document.removeEventListener('mousedown', handleMouseDown, true)
+      document.removeEventListener('keydown', handleKeyDown, true)
+    }
+  }, [gate.enabled, interacting])
+
+  // Exit interact mode when deselected
+  useEffect(() => {
+    if (!selected && !hovered && interacting) setInteracting(false)
+  }, [selected, hovered, interacting])
+
+  const handleGateClick = useCallback((e) => {
+    e.stopPropagation()
+    setInteracting(true)
+    // Also trigger selection so the widget gets selected
+    onSelect?.()
+  }, [onSelect])
+
   return (
     <div
       className={styles.chromeContainer}
@@ -460,9 +513,41 @@ export default function WidgetChrome({
       onMouseEnter={(readOnly && !hasFeatures) ? undefined : handleMouseEnter}
       onMouseLeave={(readOnly && !hasFeatures) ? undefined : handleMouseLeave}
     >
-      <div className={`tc-drag-surface ${styles.widgetSlot} ${selected ? styles.widgetSlotSelected : ''} ${multiSelected ? styles.widgetSlotMultiSelected : ''}`} data-widget-selected={selected || undefined}>
+      <div ref={slotRef} className={`tc-drag-surface ${styles.widgetSlot} ${selected ? styles.widgetSlotSelected : ''} ${multiSelected ? styles.widgetSlotMultiSelected : ''}`} data-widget-selected={selected || undefined} data-widget-interacting={interacting || undefined}>
         {children}
+        {gate.enabled && !interacting && (
+          <div
+            className={overlayStyles.interactOverlay}
+            onClick={handleGateClick}
+            role="button"
+            tabIndex={0}
+            aria-label={gate.label}
+          >
+            <span className={overlayStyles.interactHint}>{gate.label}</span>
+          </div>
+        )}
       </div>
+      {!readOnly && onConnectorDragStart && (() => {
+        const connConfig = widgetType ? getConnectorConfig(widgetType) : null
+        return ['top', 'bottom', 'left', 'right']
+          .filter((a) => !connConfig || connConfig.anchors[a] !== 'unavailable')
+          .map((anchor) => {
+            const disabled = connConfig?.anchors[anchor] === 'disabled'
+            return (
+              <div
+                key={anchor}
+                className={`${styles.anchorPort} ${styles[`anchorPort${anchor[0].toUpperCase()}${anchor.slice(1)}`]} ${disabled ? styles.anchorPortDisabled : ''}`}
+                onPointerDown={disabled ? undefined : (e) => {
+                  e.stopPropagation()
+                  e.nativeEvent?.stopImmediatePropagation?.()
+                  e.preventDefault()
+                  onConnectorDragStart(widgetId, anchor, e)
+                }}
+                data-anchor={anchor}
+              />
+            )
+          })
+      })()}
       <div
         className={styles.toolbar}
       >

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

@@ -4,6 +4,88 @@
   position: relative;
 }
 
+/* Connector anchor ports — positioned at widget edge centers */
+.anchorPort {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--bgColor-accent-emphasis, #2f81f7);
+  border: 3px solid var(--bgColor-default, #fff);
+  opacity: 0;
+  transition: opacity 0.15s ease, width 0.1s ease, height 0.1s ease, margin 0.1s ease;
+  cursor: crosshair;
+  z-index: 100;
+  pointer-events: auto;
+}
+
+/* Invisible expanded hit area — 15px padding around the visible dot */
+.anchorPort::before {
+  content: '';
+  position: absolute;
+  top: -15px;
+  left: -15px;
+  right: -15px;
+  bottom: -15px;
+}
+
+.chromeContainer:hover .anchorPort {
+  opacity: 0.6;
+}
+
+.anchorPort:hover {
+  opacity: 1;
+  width: 18px;
+  height: 18px;
+}
+
+.anchorPortTop {
+  top: -6px;
+  left: 50%;
+  margin-left: -6px;
+}
+.anchorPortTop:hover {
+  margin-left: -9px;
+  top: -9px;
+}
+
+.anchorPortBottom {
+  bottom: -6px;
+  left: 50%;
+  margin-left: -6px;
+}
+.anchorPortBottom:hover {
+  margin-left: -9px;
+  bottom: -9px;
+}
+
+.anchorPortLeft {
+  left: -6px;
+  top: 50%;
+  margin-top: -6px;
+}
+.anchorPortLeft:hover {
+  margin-top: -9px;
+  left: -9px;
+}
+
+.anchorPortRight {
+  right: -6px;
+  top: 50%;
+  margin-top: -6px;
+}
+.anchorPortRight:hover {
+  margin-top: -9px;
+  right: -9px;
+}
+
+.anchorPortDisabled {
+  background: var(--fgColor-muted, #8b949e);
+  opacity: 0;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
 /* Widget slot — contains the actual widget; selection outline targets this */
 .widgetSlot {
   position: relative;

package/src/canvas/widgets/index.js

@@ -6,6 +6,8 @@ import ImageWidget from './ImageWidget.jsx'
 import FigmaEmbed from './FigmaEmbed.jsx'
 import CodePenEmbed from './CodePenEmbed.jsx'
 import StoryWidget from './StoryWidget.jsx'
+import TerminalWidget from './TerminalWidget.jsx'
+import ActionWidget from './ActionWidget.jsx'
 
 /**
  * Maps widget type strings to their React components.
@@ -20,6 +22,8 @@ export const widgetRegistry = {
   'figma-embed': FigmaEmbed,
   'codepen-embed': CodePenEmbed,
   'story': StoryWidget,
+  'terminal': TerminalWidget,
+  'action': ActionWidget,
 }
 
 /**

package/src/canvas/widgets/widgetConfig.js

@@ -151,6 +151,19 @@ export function getWidgetMeta(type) {
   return { label: def.label, icon: def.icon }
 }
 
+/**
+ * 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.
@@ -160,3 +173,68 @@ export function getMenuWidgetTypes() {
     .filter(([type]) => type !== 'link-preview' && type !== 'image' && type !== 'figma-embed' && type !== 'codepen-embed' && type !== 'story')
     .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 ?? 16,
+    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/canvas/widgets/widgetProps.js

@@ -129,3 +129,4 @@ export const prototypeEmbedSchema = schemas['prototype']
 export const linkPreviewSchema = schemas['link-preview']
 export const imageSchema = schemas['image']
 export const figmaEmbedSchema = schemas['figma-embed']
+export const terminalSchema = schemas['terminal']

package/src/context.jsx

@@ -30,6 +30,21 @@ for (const [name, data] of Object.entries(canvases || {})) {
     })
   }
 }
+// Sort each group's pages by pageOrder from .meta.json (if available)
+for (const [, pages] of canvasGroupMap) {
+  const pageOrder = pages[0]?._canvasMeta?.pageOrder
+  if (Array.isArray(pageOrder)) {
+    const orderMap = new Map()
+    pageOrder.forEach((entry, idx) => {
+      if (typeof entry === 'string' && !entry.startsWith('sep-')) orderMap.set(entry, idx)
+    })
+    pages.sort((a, b) => {
+      const ai = orderMap.has(a.name) ? orderMap.get(a.name) : Infinity
+      const bi = orderMap.has(b.name) ? orderMap.get(b.name) : Infinity
+      return ai - bi
+    })
+  }
+}
 
 // Build a map from story route paths → story names at module load time
 const storyRouteMap = new Map()