@dfosco/storyboard-react 4.1.0 → 4.2.0-beta.0

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

@@ -4,6 +4,78 @@
   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;
+}
+
+.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,7 @@ 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'
 
 /**
  * Maps widget type strings to their React components.
@@ -20,6 +21,7 @@ export const widgetRegistry = {
   'figma-embed': FigmaEmbed,
   'codepen-embed': CodePenEmbed,
   'story': StoryWidget,
+  'terminal': TerminalWidget,
 }
 
 /**

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()