@dfosco/storyboard-react 4.0.0-beta.24 → 4.0.0-beta.26

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "4.0.0-beta.24",
+  "version": "4.0.0-beta.26",
   "type": "module",
   "dependencies": {
-    "@dfosco/storyboard-core": "4.0.0-beta.24",
-    "@dfosco/tiny-canvas": "4.0.0-beta.24",
+    "@dfosco/storyboard-core": "4.0.0-beta.26",
+    "@dfosco/tiny-canvas": "4.0.0-beta.26",
     "@neodrag/react": "^2.3.1",
     "glob": "^11.0.0",
     "jsonc-parser": "^3.3.1",

package/src/canvas/CanvasPage.bridge.test.jsx

@@ -105,11 +105,11 @@ describe('CanvasPage canvas bridge', () => {
     document.addEventListener('storyboard:canvas:mounted', mountedHandler)
     document.addEventListener('storyboard:canvas:status', statusHandler)
 
-    const { unmount } = render(<CanvasPage name="design-overview" />)
+    const { unmount } = render(<CanvasPage canvasId="design-overview" />)
 
     expect(window.__storyboardCanvasBridgeState).toEqual({
       active: true,
-      name: 'design-overview',
+      canvasId: 'design-overview',
       zoom: 100,
     })
     expect(mountedHandler).toHaveBeenCalled()
@@ -118,7 +118,7 @@ describe('CanvasPage canvas bridge', () => {
     expect(statusHandler).toHaveBeenCalled()
     expect(statusHandler.mock.calls.at(-1)?.[0]?.detail).toEqual({
       active: true,
-      name: 'design-overview',
+      canvasId: 'design-overview',
       zoom: 100,
     })
 
@@ -132,13 +132,13 @@ describe('CanvasPage canvas bridge', () => {
     const unmountedHandler = vi.fn()
     document.addEventListener('storyboard:canvas:unmounted', unmountedHandler)
 
-    const { unmount } = render(<CanvasPage name="design-overview" />)
+    const { unmount } = render(<CanvasPage canvasId="design-overview" />)
     unmount()
 
     expect(unmountedHandler).toHaveBeenCalled()
     expect(window.__storyboardCanvasBridgeState).toEqual({
       active: false,
-      name: '',
+      canvasId: '',
       zoom: 100,
     })
 
@@ -146,7 +146,7 @@ describe('CanvasPage canvas bridge', () => {
   })
 
   it.skip('persists dragged JSON widgets and JSX sources to canvas JSONL via update API', async () => {
-    render(<CanvasPage name="design-overview" />)
+    render(<CanvasPage canvasId="design-overview" />)
 
     fireEvent.click(screen.getByTestId('drag-widget'))
     // Flush the promise-based write queue
@@ -179,7 +179,7 @@ describe('CanvasPage canvas bridge', () => {
   })
 
   it.skip('clamps negative drag positions to zero', async () => {
-    render(<CanvasPage name="design-overview" />)
+    render(<CanvasPage canvasId="design-overview" />)
 
     fireEvent.click(screen.getByTestId('drag-widget-negative'))
     await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
@@ -243,7 +243,7 @@ describe('canvas target fallback', () => {
     localStorage.setItem('sb-color-scheme', 'dark')
     document.documentElement.setAttribute('data-sb-canvas-theme', 'dark')
 
-    render(<CanvasPage name="design-overview" />)
+    render(<CanvasPage canvasId="design-overview" />)
 
     const scroll = document.querySelector('[data-storyboard-canvas-scroll]')
     const jsxWidget = document.getElementById('jsx-PrimaryButtons')

package/src/canvas/CanvasPage.dragdrop.test.jsx

@@ -123,7 +123,7 @@ describe('CanvasPage image drag-and-drop', () => {
   })
 
   it('allows drop by preventing default on dragover with Files', () => {
-    render(<CanvasPage name="test-canvas" />)
+    render(<CanvasPage canvasId="test-canvas" />)
     const scrollContainer = document.querySelector('[data-storyboard-canvas-scroll]')
 
     const dragOverEvent = new Event('dragover', { bubbles: true, cancelable: true })
@@ -137,7 +137,7 @@ describe('CanvasPage image drag-and-drop', () => {
   })
 
   it('ignores dragover without Files type (internal widget drag)', () => {
-    render(<CanvasPage name="test-canvas" />)
+    render(<CanvasPage canvasId="test-canvas" />)
     const scrollContainer = document.querySelector('[data-storyboard-canvas-scroll]')
 
     const dragOverEvent = new Event('dragover', { bubbles: true, cancelable: true })
@@ -150,7 +150,7 @@ describe('CanvasPage image drag-and-drop', () => {
   })
 
   it('uploads image and creates widget on drop', async () => {
-    render(<CanvasPage name="test-canvas" />)
+    render(<CanvasPage canvasId="test-canvas" />)
     const scrollContainer = document.querySelector('[data-storyboard-canvas-scroll]')
 
     const imageFile = createMockImageFile('photo.png', 'image/png')
@@ -199,7 +199,7 @@ describe('CanvasPage image drag-and-drop', () => {
   })
 
   it('ignores non-image files but prevents browser default', async () => {
-    render(<CanvasPage name="test-canvas" />)
+    render(<CanvasPage canvasId="test-canvas" />)
     const scrollContainer = document.querySelector('[data-storyboard-canvas-scroll]')
 
     const textFile = new File(['text content'], 'readme.txt', { type: 'text/plain' })
@@ -225,7 +225,7 @@ describe('CanvasPage image drag-and-drop', () => {
   })
 
   it('processes multiple image files on drop', async () => {
-    render(<CanvasPage name="test-canvas" />)
+    render(<CanvasPage canvasId="test-canvas" />)
     const scrollContainer = document.querySelector('[data-storyboard-canvas-scroll]')
 
     const image1 = createMockImageFile('photo1.png', 'image/png')
@@ -253,7 +253,7 @@ describe('CanvasPage image drag-and-drop', () => {
   })
 
   it('ignores drop without Files type', async () => {
-    render(<CanvasPage name="test-canvas" />)
+    render(<CanvasPage canvasId="test-canvas" />)
     const scrollContainer = document.querySelector('[data-storyboard-canvas-scroll]')
 
     const dropEvent = new Event('drop', { bubbles: true, cancelable: true })
@@ -273,7 +273,7 @@ describe('CanvasPage image drag-and-drop', () => {
     const originalSnapToGrid = mockCanvas.snapToGrid
     mockCanvas.snapToGrid = true
 
-    render(<CanvasPage name="test-canvas" />)
+    render(<CanvasPage canvasId="test-canvas" />)
     const scrollContainer = document.querySelector('[data-storyboard-canvas-scroll]')
 
     const imageFile = createMockImageFile()
@@ -311,7 +311,7 @@ describe('CanvasPage image drag-and-drop', () => {
     const originalSnapToGrid = mockCanvas.snapToGrid
     mockCanvas.snapToGrid = false
 
-    render(<CanvasPage name="test-canvas" />)
+    render(<CanvasPage canvasId="test-canvas" />)
     const scrollContainer = document.querySelector('[data-storyboard-canvas-scroll]')
 
     const imageFile = createMockImageFile()