@dfosco/storyboard-core 4.2.0-beta.2 → 4.2.0-beta.21

package/src/canvas/materializer.js

@@ -15,6 +15,7 @@
  *   widgets_replaced — replace the entire widgets array (bulk update)
  *   connector_added  — append a connector between two widgets
  *   connector_removed — remove a connector by id
+ *   connectors_replaced — replace the entire connectors array (bulk update, used by undo/redo)
  */
 
 /**
@@ -182,6 +183,36 @@ export function materialize(events) {
         break
       }
 
+      case 'connectors_replaced': {
+        state.connectors = evt.connectors || []
+        break
+      }
+
+      case 'connector_updated': {
+        state.connectors = (state.connectors || []).map((c) => {
+          if (c.id !== evt.connectorId) return c
+          const { startAnchor, endAnchor, meta, ...rest } = evt.updates || {}
+          // Deep-merge meta so per-widget messaging settings accumulate
+          const mergedMeta = { ...(c.meta || {}), ...(meta || {}) }
+          if (meta?.messaging) {
+            mergedMeta.messaging = { ...(c.meta?.messaging || {}), ...meta.messaging }
+          }
+          // Clear messagingMode if explicitly set to null (switching from two-way to per-widget)
+          if (meta && meta.messagingMode === null) {
+            delete mergedMeta.messagingMode
+          }
+          // Apply anchor updates if provided, preserving widget connections
+          const start = startAnchor
+            ? { ...c.start, anchor: startAnchor }
+            : c.start
+          const end = endAnchor
+            ? { ...c.end, anchor: endAnchor }
+            : c.end
+          return { ...c, ...rest, meta: mergedMeta, id: c.id, start, end }
+        })
+        break
+      }
+
       // Unknown events are silently ignored (forward compatibility)
     }
   }

package/src/canvas/materializer.test.js

@@ -278,6 +278,62 @@ describe('connectors', () => {
     ])
     expect(state.connectors).toHaveLength(1)
   })
+
+  it('updates connector anchors in-place via connector_updated', () => {
+    const state = materialize([
+      ...baseEvents,
+      { event: 'connector_added', timestamp: '2', connector },
+      { event: 'connector_updated', timestamp: '3', connectorId: 'connector-001', updates: {
+        startAnchor: 'bottom',
+        endAnchor: 'top',
+      } },
+    ])
+    expect(state.connectors).toHaveLength(1)
+    expect(state.connectors[0].start.widgetId).toBe('w1')
+    expect(state.connectors[0].start.anchor).toBe('bottom')
+    expect(state.connectors[0].end.widgetId).toBe('w2')
+    expect(state.connectors[0].end.anchor).toBe('top')
+  })
+
+  it('updates only startAnchor when endAnchor is omitted', () => {
+    const state = materialize([
+      ...baseEvents,
+      { event: 'connector_added', timestamp: '2', connector },
+      { event: 'connector_updated', timestamp: '3', connectorId: 'connector-001', updates: {
+        startAnchor: 'top',
+      } },
+    ])
+    expect(state.connectors[0].start.anchor).toBe('top')
+    expect(state.connectors[0].end.anchor).toBe('left')
+  })
+
+  it('does not leak startAnchor/endAnchor as top-level connector properties', () => {
+    const state = materialize([
+      ...baseEvents,
+      { event: 'connector_added', timestamp: '2', connector },
+      { event: 'connector_updated', timestamp: '3', connectorId: 'connector-001', updates: {
+        startAnchor: 'bottom',
+        endAnchor: 'top',
+      } },
+    ])
+    expect(state.connectors[0]).not.toHaveProperty('startAnchor')
+    expect(state.connectors[0]).not.toHaveProperty('endAnchor')
+  })
+
+  it('preserves meta when updating anchors', () => {
+    const state = materialize([
+      ...baseEvents,
+      { event: 'connector_added', timestamp: '2', connector },
+      { event: 'connector_updated', timestamp: '3', connectorId: 'connector-001', updates: {
+        meta: { messagingMode: 'two-way' },
+      } },
+      { event: 'connector_updated', timestamp: '4', connectorId: 'connector-001', updates: {
+        startAnchor: 'bottom',
+      } },
+    ])
+    expect(state.connectors[0].start.anchor).toBe('bottom')
+    expect(state.connectors[0].meta.messagingMode).toBe('two-way')
+  })
 })
 
 describe('materializeFromText', () => {

package/src/canvas/selectedWidgets.js

@@ -1,9 +1,10 @@
 /**
- * Selected Widgets Bridge — real-time canvas selection context for Copilot.
+ * Selected Widgets Bridge — real-time canvas selection & viewport context for agents.
  *
  * Writes `.selectedwidgets.json` at the project root with the currently
- * focused canvas and selected widgets. Copilot reads this file on every
- * prompt to understand what the user is looking at.
+ * focused canvas, selected widgets, and user viewport position/zoom.
+ * Agents read this file on every prompt to understand what the user is
+ * looking at and where to place new widgets.
  *
  * Communication flow:
  *   Browser (CanvasPage.jsx) → HMR events → this module → file on disk
@@ -11,12 +12,14 @@
  * Events listened for:
  *   storyboard:canvas-focused     — tab gained focus or canvas mounted
  *   storyboard:selection-changed  — widget selection changed (debounced client-side)
+ *   storyboard:viewport-changed   — user scrolled/zoomed (debounced 500ms)
  *   storyboard:canvas-unfocused   — canvas unmounted or tab lost focus
  */
 
 import fs from 'node:fs'
 import path from 'node:path'
 import { toCanvasId } from './identity.js'
+import { devLog } from '../logger/devLogger.js'
 
 const DIR_NAME = '.storyboard'
 const FILE_NAME = '.selectedwidgets.json'
@@ -82,7 +85,7 @@ function writeSelectedWidgets(root, data) {
     fs.writeFileSync(tmpPath, JSON.stringify(data, null, 2) + '\n', 'utf-8')
     fs.renameSync(tmpPath, filePath)
   } catch (err) {
-    console.error('[storyboard] Failed to write .selectedwidgets.json:', err.message)
+    devLog().logEvent('warn', 'Failed to write .selectedwidgets.json', { error: err.message })
   }
 }
 
@@ -96,6 +99,36 @@ function clearSelectedWidgets(root) {
   } catch { /* ignore — file may already be gone */ }
 }
 
+/**
+ * Read the current viewport from `.selectedwidgets.json`.
+ * Returns the viewport object or null if unavailable.
+ *
+ * @param {string} root — project root directory
+ * @returns {{ centerX: number, centerY: number, zoom: number, topLeftX: number, topLeftY: number, width: number, height: number } | null}
+ */
+export function readCurrentViewport(root) {
+  const filePath = path.join(root, DIR_NAME, FILE_NAME)
+  try {
+    const raw = fs.readFileSync(filePath, 'utf-8')
+    const data = JSON.parse(raw)
+    return data?.viewport || null
+  } catch { return null }
+}
+
+/**
+ * Read the full `.selectedwidgets.json` bridge state.
+ * Returns { canvasId, selectedWidgetIds, widgets, viewport } or null.
+ *
+ * @param {string} root — project root directory
+ */
+export function readSelectedWidgets(root) {
+  const filePath = path.join(root, DIR_NAME, FILE_NAME)
+  try {
+    const raw = fs.readFileSync(filePath, 'utf-8')
+    return JSON.parse(raw)
+  } catch { return null }
+}
+
 /**
  * Set up the selected-widgets bridge on a Vite dev server.
  *
@@ -111,7 +144,7 @@ export function setupSelectedWidgets(server, root) {
   if (!fs.existsSync(dirPath)) fs.mkdirSync(dirPath, { recursive: true })
   if (!fs.existsSync(filePath)) {
     writeSelectedWidgets(root, {
-      canvasId: null, canvasFile: null, selectedWidgetIds: [], widgets: [],
+      canvasId: null, canvasFile: null, selectedWidgetIds: [], widgets: [], viewport: null,
     })
   }
 
@@ -122,6 +155,8 @@ export function setupSelectedWidgets(server, root) {
   let activeCanvasFile = null
   let activeWidgetIds = []
   let activeWidgets = []
+  let activeViewport = null
+  let lastViewportJson = null
 
   function writeCurrentState() {
     writeSelectedWidgets(root, {
@@ -129,13 +164,14 @@ export function setupSelectedWidgets(server, root) {
       canvasFile: activeCanvasFile,
       selectedWidgetIds: activeWidgetIds,
       widgets: activeWidgets,
+      viewport: activeViewport,
     })
   }
 
   // --- HMR event listeners ---
 
   server.hot.on('storyboard:canvas-focused', (data, client) => {
-    const { tabId, canvasId, widgetIds = [], widgets = [] } = data || {}
+    const { tabId, canvasId, widgetIds = [], widgets = [], viewport = null } = data || {}
     if (!tabId || !canvasId) return
 
     activeTabId = tabId
@@ -144,12 +180,13 @@ export function setupSelectedWidgets(server, root) {
     activeCanvasFile = resolvePath(canvasId)
     activeWidgetIds = widgetIds
     activeWidgets = widgets
+    if (viewport) activeViewport = viewport
 
     writeCurrentState()
   })
 
   server.hot.on('storyboard:selection-changed', (data) => {
-    const { tabId, canvasId, widgetIds = [], widgets = [] } = data || {}
+    const { tabId, canvasId, widgetIds = [], widgets = [], viewport = null } = data || {}
     if (!tabId || !canvasId) return
 
     // Only accept updates from the active tab
@@ -157,6 +194,7 @@ export function setupSelectedWidgets(server, root) {
 
     activeWidgetIds = widgetIds
     activeWidgets = widgets
+    if (viewport) activeViewport = viewport
 
     // Update canvas info in case it changed (e.g. page navigation within same tab)
     if (canvasId !== activeCanvasId) {
@@ -167,6 +205,22 @@ export function setupSelectedWidgets(server, root) {
     writeCurrentState()
   })
 
+  server.hot.on('storyboard:viewport-changed', (data) => {
+    const { tabId, canvasId, viewport } = data || {}
+    if (!tabId || !canvasId || !viewport) return
+
+    // Only accept from active tab AND matching canvas
+    if (tabId !== activeTabId || canvasId !== activeCanvasId) return
+
+    // Skip write if viewport hasn't changed (dedupe)
+    const json = JSON.stringify(viewport)
+    if (json === lastViewportJson) return
+    lastViewportJson = json
+
+    activeViewport = viewport
+    writeCurrentState()
+  })
+
   server.hot.on('storyboard:canvas-unfocused', (data) => {
     const { tabId } = data || {}
     if (!tabId) return
@@ -180,6 +234,8 @@ export function setupSelectedWidgets(server, root) {
     activeCanvasFile = null
     activeWidgetIds = []
     activeWidgets = []
+    activeViewport = null
+    lastViewportJson = null
 
     clearSelectedWidgets(root)
   })
@@ -196,6 +252,8 @@ export function setupSelectedWidgets(server, root) {
       activeCanvasFile = null
       activeWidgetIds = []
       activeWidgets = []
+      activeViewport = null
+      lastViewportJson = null
       clearSelectedWidgets(root)
     }
   }, CLEANUP_INTERVAL_MS)