@dfosco/storyboard 0.6.12 → 0.6.13

package/src/internals/canvas/CanvasPage.multiselect.test.jsx

@@ -1,11 +1,14 @@
 import { fireEvent, render, screen, act } from '@testing-library/react'
 import CanvasPage from './CanvasPage.jsx'
-import { updateCanvas, removeWidget } from './canvasApi.js'
+import { updateCanvas, removeWidget, batchOperations } from './canvasApi.js'
 
 const MOCK_UNDO_REDO = {
-  snapshot: vi.fn(),
-  undo: vi.fn(),
-  redo: vi.fn(),
+  track: vi.fn(),
+  trackMany: vi.fn(),
+  popUndo: vi.fn(),
+  popRedo: vi.fn(),
+  pushRedo: vi.fn(),
+  pushUndo: vi.fn(),
   reset: vi.fn(),
   canUndo: false,
   canRedo: false,
@@ -117,8 +120,19 @@ vi.mock('./canvasApi.js', () => ({
   checkGitHubCliAvailable: vi.fn(() => Promise.resolve({ available: true })),
   fetchGitHubEmbed: vi.fn(() => Promise.resolve({ success: false })),
   updateCanvas: vi.fn(() => Promise.resolve({ success: true })),
-  removeWidget: vi.fn(() => Promise.resolve({ success: true })),
+  patchWidget: vi.fn(() => Promise.resolve({ success: true, eventIds: ['evt_patch'] })),
+  removeWidget: vi.fn(() => Promise.resolve({ success: true, eventId: 'evt_remove' })),
+  undoEvent: vi.fn(() => Promise.resolve({ status: 200, ok: true, data: { success: true, eventId: 'evt_undo' } })),
+  redoEvent: vi.fn(() => Promise.resolve({ status: 200, ok: true, data: { success: true, eventId: 'evt_redo' } })),
   uploadImage: vi.fn(),
+  batchOperations: vi.fn(() => Promise.resolve({
+    success: true,
+    results: [
+      { op: 'move-widget', widgetId: 'w1', eventId: 'evt_move_w1' },
+      { op: 'move-widget', widgetId: 'w2', eventId: 'evt_move_w2' },
+      { op: 'move-widget', widgetId: 'w3', eventId: 'evt_move_w3' },
+    ],
+  })),
 }))
 
 describe('CanvasPage multi-select', () => {
@@ -231,8 +245,8 @@ describe('CanvasPage multi-select', () => {
     expect(removeWidget).toHaveBeenCalledTimes(2)
     // updateCanvas (widgets_replaced) is NOT used for multi-delete
     expect(updateCanvas).not.toHaveBeenCalled()
-    // Should snapshot for undo
-    expect(MOCK_UNDO_REDO.snapshot).toHaveBeenCalled()
+    // Each remove call's eventId is tracked for undo
+    expect(MOCK_UNDO_REDO.track).toHaveBeenCalledWith('evt_remove')
   })
 
   it('single-select Delete uses removeWidget API', async () => {
@@ -262,18 +276,17 @@ describe('CanvasPage multi-select', () => {
     })
     await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
 
-    // w1 → (150, 200), w2 → (300+50, 100+100) = (350, 200)
-    expect(updateCanvas).toHaveBeenCalledWith(
+    // w1 → (150, 200), w2 → (300+50, 100+100) = (350, 200).
+    // Multi-move is now persisted as a batch of widget_moved ops instead of
+    // a widgets_replaced bomb — fixes the rollback class of bugs.
+    expect(batchOperations).toHaveBeenCalledWith(
       'test-canvas',
-      expect.objectContaining({
-        widgets: expect.arrayContaining([
-          expect.objectContaining({ id: 'w1', position: { x: 150, y: 200 } }),
-          expect.objectContaining({ id: 'w2', position: { x: 350, y: 200 } }),
-          // w3 unchanged
-          expect.objectContaining({ id: 'w3', position: { x: 500, y: 200 } }),
-        ]),
-      })
+      expect.arrayContaining([
+        expect.objectContaining({ op: 'move-widget', widgetId: 'w1', position: { x: 150, y: 200 } }),
+        expect.objectContaining({ op: 'move-widget', widgetId: 'w2', position: { x: 350, y: 200 } }),
+      ])
     )
+    expect(updateCanvas).not.toHaveBeenCalled()
   })
 
   it('multi-select drag captures peer articles on drag start', async () => {
@@ -342,16 +355,16 @@ describe('CanvasPage multi-select', () => {
     })
     await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
 
-    // All selected widgets should move by the same delta (+50, +50)
-    expect(updateCanvas).toHaveBeenCalledWith(
+    // All selected widgets should move by the same delta (+50, +50) via the
+    // batch endpoint.
+    expect(batchOperations).toHaveBeenCalledWith(
       'test-canvas',
-      expect.objectContaining({
-        widgets: expect.arrayContaining([
-          expect.objectContaining({ id: 'w1', position: { x: 150, y: 150 } }),
-          expect.objectContaining({ id: 'w2', position: { x: 350, y: 150 } }),
-          expect.objectContaining({ id: 'w3', position: { x: 550, y: 250 } }),
-        ]),
-      })
+      expect.arrayContaining([
+        expect.objectContaining({ op: 'move-widget', widgetId: 'w1', position: { x: 150, y: 150 } }),
+        expect.objectContaining({ op: 'move-widget', widgetId: 'w2', position: { x: 350, y: 150 } }),
+        expect.objectContaining({ op: 'move-widget', widgetId: 'w3', position: { x: 550, y: 250 } }),
+      ])
     )
+    expect(updateCanvas).not.toHaveBeenCalled()
   })
 })

package/src/internals/canvas/canvasApi.js

@@ -20,6 +20,23 @@ async function request(path, method, body) {
   return res.json()
 }
 
+/**
+ * Like `request` but also returns the HTTP status code so callers can
+ * distinguish between "endpoint succeeded but logical no-op" and "the
+ * target resource is gone" (which undo/redo handle differently after
+ * compaction wipes event ids).
+ */
+async function requestWithStatus(path, method, body) {
+  const url = getApiBase() + path
+  const res = await fetch(url, {
+    method,
+    headers: body ? { 'Content-Type': 'application/json' } : undefined,
+    body: body ? JSON.stringify(body) : undefined,
+  })
+  const data = await res.json().catch(() => ({}))
+  return { status: res.status, ok: res.ok, data }
+}
+
 export function listCanvases() {
   return request('/list', 'GET')
 }
@@ -32,6 +49,18 @@ export function updateCanvas(canvasId, { widgets, sources, settings, connectors
   return request('/update', 'PUT', { name: canvasId, widgets, sources, settings, connectors })
 }
 
+export function patchWidget(canvasId, widgetId, { props, position } = {}) {
+  return request('/widget', 'PATCH', { name: canvasId, widgetId, props, position })
+}
+
+export function undoEvent(canvasId, eventId) {
+  return requestWithStatus('/undo', 'POST', { name: canvasId, eventId })
+}
+
+export function redoEvent(canvasId, eventId) {
+  return requestWithStatus('/redo', 'POST', { name: canvasId, eventId })
+}
+
 export function addWidget(canvasId, { type, props, position }) {
   return request('/widget', 'POST', { name: canvasId, type, props, position })
 }

package/src/internals/canvas/prototypeRoutes.jsx

@@ -0,0 +1,131 @@
+/**
+ * Library-side prototype routes builder for the isolated prototypes iframe.
+ *
+ * Mirrors the consumer-scaffold convention (src/routes.jsx) but lives inside
+ * the library so consumers no longer need to maintain their own
+ * prototypes-entry plumbing. Uses absolute globs (`/src/prototypes/...`),
+ * which Vite resolves against the *consumer's* project root regardless of
+ * where this file physically lives.
+ *
+ * Used by `prototypesEntry.jsx`, which is the iframe entry served by the
+ * `prototypes.html` middleware in `data-plugin.js`.
+ */
+import { Fragment, Suspense } from 'react'
+import { Outlet, useLocation } from 'react-router-dom'
+import {
+  generatePreservedRoutes,
+  generateRegularRoutes,
+  generateModalRoutes,
+  patterns,
+} from '@generouted/react-router/core'
+import PrototypeErrorBoundary, { ImportErrorFallback } from '../PrototypeErrorBoundary.jsx'
+
+// Strip src/prototypes/, .folder/, and `drafts/` segments from route paths.
+// A `drafts/` dir is a gitignored scratch root — prototypes inside route at
+// the same URL as a non-prefixed sibling. The lookbehind ensures we only
+// match `drafts/` as a directory segment, not as part of a filename.
+patterns.route = [/^.*\/src\/prototypes\/|^\/prototypes\/|[^/]*\.folder\/|(?<=^|\/)drafts\/|\.(jsx|tsx|mdx)$/g, '']
+
+const PRESERVED = import.meta.glob('/src/prototypes/(_app|404).{jsx,tsx}', { eager: true })
+const MODALS = import.meta.glob('/src/prototypes/**/[+]*.{jsx,tsx}', { eager: true })
+
+// Lazy-load prototype routes — only the matched route's module is fetched.
+// This prevents story/canvas URLs from paying for every prototype page's
+// imports (Primer, Reshaped, user components, etc.) on first load.
+const ROUTES = import.meta.glob(
+  ['/src/prototypes/**/[\\w[-]*.{jsx,tsx,mdx}', '!/src/prototypes/**/(_!(layout)*(/*)?|_app|404)*'],
+)
+
+const preservedRoutes = generatePreservedRoutes(PRESERVED)
+const modalRoutes = generateModalRoutes(MODALS)
+
+const regularRoutes = generateRegularRoutes(ROUTES, (importFn, key) => {
+  const index = /index\.(jsx|tsx|mdx)$/.test(key) && !key.includes('prototypes/index') ? { index: true } : {}
+  return {
+    ...index,
+    lazy: async () => {
+      try {
+        const module = await importFn()
+        const Default = module?.default || Fragment
+        const Page = () =>
+          module?.Pending ? (
+            <Suspense fallback={<module.Pending />}>
+              <Default />
+            </Suspense>
+          ) : (
+            <Default />
+          )
+        return {
+          Component: Page,
+          ErrorBoundary: module?.Catch || PrototypeErrorBoundary,
+          loader: module?.Loader,
+          action: module?.Action,
+        }
+      } catch (err) {
+        return {
+          Component: () => <ImportErrorFallback error={err} route={key} />,
+        }
+      }
+    },
+  }
+})
+
+const _app = preservedRoutes?.['_app']
+const _404 = preservedRoutes?.['404']
+const Default = _app?.default || Outlet
+
+// eslint-disable-next-line react-refresh/only-export-components
+const Modals_ = () => {
+  const Modal = modalRoutes[useLocation().state?.modal] || Fragment
+  return <Modal />
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+const Layout = () => (
+  <>
+    <Default /> <Modals_ />
+  </>
+)
+
+// eslint-disable-next-line react-refresh/only-export-components
+const App = () =>
+  _app?.Pending ? (
+    <Suspense fallback={<_app.Pending />}>
+      <Layout />
+    </Suspense>
+  ) : (
+    <Layout />
+  )
+
+const app = { Component: _app?.default ? App : Layout, ErrorBoundary: _app?.Catch, loader: _app?.Loader }
+const fallback = { path: '*', Component: _404?.default || Fragment }
+
+export const routes = [{ ...app, children: [...regularRoutes, fallback] }]
+
+/**
+ * Return a routes tree filtered to a single prototype subtree. Used by the
+ * per-prototype iframe entry — filtering at this layer keeps a broken
+ * sibling prototype from ever appearing in the matched route's lazy() chain
+ * (only the requested prototype's modules are reachable from the router).
+ */
+export function getRoutesForProto(proto) {
+  if (!proto) return routes
+  const matchesProto = (route) => {
+    const seg = (route.path || '').split('/').filter(Boolean)[0]
+    return seg === proto
+  }
+  const filter = (children) => children
+    .map((r) => {
+      if (r.path === '*') return r
+      if (!r.path) {
+        if (r.children) return { ...r, children: filter(r.children) }
+        return r
+      }
+      if (matchesProto(r)) {
+        return r.children ? { ...r, children: filter(r.children) } : r
+      }
+      return null
+    })
+    .filter(Boolean)
+  return [{ ...routes[0], children: filter(routes[0].children || []) }]
+}

package/src/internals/canvas/prototypesEntry.jsx

@@ -0,0 +1,66 @@
+/**
+ * Library-provided entry for the isolated prototypes iframe.
+ *
+ * Loaded by the `prototypes.html` middleware in `data-plugin.js` — replaces
+ * the consumer-side `src/prototypes-entry.jsx` so consumers don't need to
+ * maintain the iframe entry themselves.
+ *
+ * Uses `createHashRouter` so prototype routes live in the URL hash
+ * (`prototypes.html#/MyProto/SignupForm`). Filters routes by `?proto=` so a
+ * broken sibling prototype never appears in the matched route's lazy()
+ * chain (module-graph isolation — see .agents/plans/vite-isolation.md).
+ *
+ * CSS chain: relies on `mountStoryboardCore` to inject the compiled
+ * ui-runtime stylesheet (matches index.jsx's mount) — this restores stock
+ * Tailwind utility colors that the Primer adapter would otherwise invert in
+ * dark mode. Also opportunistically pulls in consumer-side global stylesheets
+ * (`/src/{reset,fonts,globals,tailwind}.css`) when present, mirroring what
+ * the scaffolded `src/index.jsx` imports.
+ */
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { RouterProvider, createHashRouter } from 'react-router-dom'
+import { ThemeProvider, BaseStyles } from '@primer/react'
+import { routes, getRoutesForProto } from './prototypeRoutes.jsx'
+import ThemeSync from '../../primer/ThemeSync.jsx'
+import { mountStoryboardCore } from '../../core/index.js'
+import '../../core/comments/ui/comment-layout.css'
+
+// Pull in consumer global stylesheets when they exist. import.meta.glob is
+// resolved against the *consumer's* project root and silently skips missing
+// files, so this is safe in projects that don't ship the scaffold defaults.
+import.meta.glob(
+  ['/src/reset.css', '/src/fonts.css', '/src/globals.css', '/src/tailwind.css'],
+  { eager: true },
+)
+
+const configModules = import.meta.glob('/storyboard.config.json', { eager: true })
+const storyboardConfig = Object.values(configModules)[0]?.default || {}
+
+// Mount storyboard core. In embed mode (`_sb_embed` in the URL — always true
+// for canvas iframes) this short-circuits past UI mounting and only:
+//   - injects the compiled ui-runtime stylesheet (matches index.jsx and
+//     prevents the Tailwind→Primer adapter from inverting fixed dark colors
+//     like bg-neutral-900 when the parent canvas is in dark mode)
+//   - applies the canvas-aware theme (_sb_theme_target, _sb_canvas_theme)
+//   - sets up the iframe→parent postMessage navigation/wheel bridge
+mountStoryboardCore(storyboardConfig, { basePath: import.meta.env.BASE_URL })
+
+const protoParam = new URLSearchParams(window.location.search).get('proto')
+const activeRoutes = protoParam ? getRoutesForProto(protoParam) : routes
+
+const router = createHashRouter(activeRoutes)
+
+const rootElement = document.getElementById('root')
+const root = createRoot(rootElement)
+
+root.render(
+  <StrictMode>
+    <ThemeProvider colorMode="auto">
+      <BaseStyles>
+        <ThemeSync />
+        <RouterProvider router={router} />
+      </BaseStyles>
+    </ThemeProvider>
+  </StrictMode>,
+)

package/src/internals/canvas/useUndoRedo.js

@@ -1,86 +1,101 @@
 import { useRef, useState, useCallback } from 'react'
 
 const MAX_HISTORY = 100
-const COALESCE_MS = 2000
 
 /**
- * Snapshot-based undo/redo history for canvas widgets.
+ * Per-tab undo/redo history for canvas events.
  *
- * Tracks past/future stacks of widget array clones. The present state
- * is always the live `localWidgets` — this hook only manages history.
+ * Maintains two stacks of event IDs:
+ *   undoStack — ids of user-initiated forward events, newest last.
+ *   redoStack — ids of undo events (the inverse events appended by the
+ *               server's POST /undo), newest last.
  *
- * Edit coalescing: continuous edits to the same widget within COALESCE_MS
- * are merged into one undo step (like Figma).
+ * Workflow:
+ *   • Every user-initiated mutation that succeeds calls `track(eventId)` —
+ *     pushes onto undoStack and clears redoStack.
+ *   • `popUndo()` returns the next id to undo. Caller POSTs /undo and on
+ *     success calls `pushRedo(inverseId)`.
+ *   • `popRedo()` returns the next id to redo. Caller POSTs /redo and on
+ *     success calls `pushUndo(inverseId)` (so the redo is itself undoable).
+ *
+ * This hook holds *no* widget data — undo state lives in the JSONL. The
+ * stacks are per-tab and ephemeral; refreshing the page resets them.
  */
 export default function useUndoRedo() {
-  const pastRef = useRef([])
-  const futureRef = useRef([])
-  const lastActionRef = useRef({ type: null, widgetId: null, time: 0 })
-  // State counter drives canUndo/canRedo re-renders without cloning the stacks
-  const [counts, setCounts] = useState({ past: 0, future: 0 })
+  const undoStackRef = useRef([])
+  const redoStackRef = useRef([])
+  const [counts, setCounts] = useState({ undo: 0, redo: 0 })
+
+  const syncCounts = useCallback(() => {
+    setCounts({ undo: undoStackRef.current.length, redo: redoStackRef.current.length })
+  }, [])
 
-  const snapshot = useCallback((currentWidgets, actionType, widgetId) => {
-    const widgets = currentWidgets ?? []
+  const track = useCallback((eventId) => {
+    if (!eventId || typeof eventId !== 'string') return
+    undoStackRef.current.push(eventId)
+    if (undoStackRef.current.length > MAX_HISTORY) undoStackRef.current.shift()
+    // New mutation invalidates the redo chain
+    redoStackRef.current = []
+    syncCounts()
+  }, [syncCounts])
 
-    // Edit coalescing — skip snapshot if same edit target within timeout
-    if (actionType === 'edit' && widgetId) {
-      const last = lastActionRef.current
-      const now = Date.now()
-      if (
-        last.type === 'edit' &&
-        last.widgetId === widgetId &&
-        now - last.time < COALESCE_MS
-      ) {
-        lastActionRef.current = { type: 'edit', widgetId, time: now }
-        return
+  const trackMany = useCallback((eventIds) => {
+    if (!Array.isArray(eventIds)) return
+    for (const id of eventIds) {
+      if (id && typeof id === 'string') {
+        undoStackRef.current.push(id)
+        if (undoStackRef.current.length > MAX_HISTORY) undoStackRef.current.shift()
       }
     }
+    redoStackRef.current = []
+    syncCounts()
+  }, [syncCounts])
 
-    pastRef.current.push(structuredClone(widgets))
-    if (pastRef.current.length > MAX_HISTORY) pastRef.current.shift()
-    futureRef.current = []
-    lastActionRef.current = {
-      type: actionType,
-      widgetId: widgetId || null,
-      time: Date.now(),
-    }
-    setCounts({ past: pastRef.current.length, future: 0 })
-  }, [])
+  const popUndo = useCallback(() => {
+    const id = undoStackRef.current.pop()
+    syncCounts()
+    return id ?? null
+  }, [syncCounts])
 
-  const undo = useCallback((currentWidgets) => {
-    if (pastRef.current.length === 0) return null
-    futureRef.current.push(structuredClone(currentWidgets))
-    const previous = pastRef.current.pop()
-    lastActionRef.current = { type: 'undo', widgetId: null, time: Date.now() }
-    setCounts({ past: pastRef.current.length, future: futureRef.current.length })
-    return previous
-  }, [])
+  const popRedo = useCallback(() => {
+    const id = redoStackRef.current.pop()
+    syncCounts()
+    return id ?? null
+  }, [syncCounts])
 
-  const redo = useCallback((currentWidgets) => {
-    if (futureRef.current.length === 0) return null
-    pastRef.current.push(structuredClone(currentWidgets))
-    const next = futureRef.current.pop()
-    lastActionRef.current = { type: 'redo', widgetId: null, time: Date.now() }
-    setCounts({ past: pastRef.current.length, future: futureRef.current.length })
-    return next
-  }, [])
+  const pushRedo = useCallback((eventId) => {
+    if (!eventId || typeof eventId !== 'string') return
+    redoStackRef.current.push(eventId)
+    if (redoStackRef.current.length > MAX_HISTORY) redoStackRef.current.shift()
+    syncCounts()
+  }, [syncCounts])
+
+  const pushUndo = useCallback((eventId) => {
+    if (!eventId || typeof eventId !== 'string') return
+    undoStackRef.current.push(eventId)
+    if (undoStackRef.current.length > MAX_HISTORY) undoStackRef.current.shift()
+    syncCounts()
+  }, [syncCounts])
 
   const reset = useCallback(() => {
-    pastRef.current = []
-    futureRef.current = []
-    lastActionRef.current = { type: null, widgetId: null, time: 0 }
+    undoStackRef.current = []
+    redoStackRef.current = []
     setCounts((prev) => {
-      if (prev.past === 0 && prev.future === 0) return prev
-      return { past: 0, future: 0 }
+      if (prev.undo === 0 && prev.redo === 0) return prev
+      return { undo: 0, redo: 0 }
     })
   }, [])
 
   return {
-    snapshot,
-    undo,
-    redo,
+    track,
+    trackMany,
+    popUndo,
+    popRedo,
+    pushRedo,
+    pushUndo,
     reset,
-    canUndo: counts.past > 0,
-    canRedo: counts.future > 0,
+    canUndo: counts.undo > 0,
+    canRedo: counts.redo > 0,
   }
 }
+