@dfosco/storyboard-react 3.8.1 → 3.9.0

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "3.8.1",
+  "version": "3.9.0",
   "type": "module",
   "dependencies": {
-    "@dfosco/storyboard-core": "3.8.1",
+    "@dfosco/storyboard-core": "3.9.0",
     "@dfosco/tiny-canvas": "^1.1.0",
     "@neodrag/react": "^2.3.1",
     "glob": "^11.0.0",
@@ -12,7 +12,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/dfosco/storyboard-source.git",
+    "url": "https://github.com/dfosco/storyboard.git",
     "directory": "packages/react"
   },
   "files": [

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

@@ -13,6 +13,12 @@ vi.mock('@dfosco/tiny-canvas', () => ({
       >
         drag widget
       </button>
+      <button
+        data-testid="drag-widget-negative"
+        onClick={() => onDragEnd?.('widget-1', { x: -50, y: -30 })}
+      >
+        drag widget negative
+      </button>
       <button
         data-testid="drag-source"
         onClick={() => onDragEnd?.('jsx-PrimaryButtons', { x: 333.2, y: 444.8 })}
@@ -144,6 +150,25 @@ describe('CanvasPage canvas bridge', () => {
       )
     })
   })
+
+  it('clamps negative drag positions to zero', async () => {
+    render(<CanvasPage name="design-overview" />)
+
+    fireEvent.click(screen.getByTestId('drag-widget-negative'))
+    await waitFor(() => {
+      expect(updateCanvas).toHaveBeenCalledWith(
+        'design-overview',
+        expect.objectContaining({
+          widgets: expect.arrayContaining([
+            expect.objectContaining({
+              id: 'widget-1',
+              position: { x: 0, y: 0 },
+            }),
+          ]),
+        })
+      )
+    })
+  })
 })
 
 describe('getCanvasThemeVars', () => {

package/src/canvas/CanvasPage.jsx

@@ -156,7 +156,7 @@ export default function CanvasPage({ name }) {
 
   const handleItemDragEnd = useCallback((dragId, position) => {
     if (!dragId || !position) return
-    const rounded = { x: roundPosition(position.x), y: roundPosition(position.y) }
+    const rounded = { x: Math.max(0, roundPosition(position.x)), y: Math.max(0, roundPosition(position.y)) }
 
     if (dragId.startsWith('jsx-')) {
       const sourceExport = dragId.replace(/^jsx-/, '')
@@ -541,6 +541,7 @@ export default function CanvasPage({ name }) {
             transformOrigin: '0 0',
             width: `${Math.max(10000, 100 / scale)}vw`,
             height: `${Math.max(10000, 100 / scale)}vh`,
+            ...(spaceHeld ? { pointerEvents: 'none' } : {}),
           }}
         >
           <Canvas {...canvasProps} onDragEnd={handleItemDragEnd}>

package/src/canvas/useCanvas.js

@@ -59,14 +59,20 @@ export function useCanvas(name) {
     })
   }, [name, buildTimeCanvas])
 
+  const jsxModule = canvas?._jsxModule
+  const jsxImport = canvas?._jsxImport
+
   useEffect(() => {
-    if (!canvas?._jsxModule) {
+    if (!jsxModule) {
       setJsxExports(null)
       return
     }
 
-    const moduleImportPath = resolveCanvasModuleImport(canvas._jsxModule)
-    import(/* @vite-ignore */ moduleImportPath)
+    const loadPromise = jsxImport
+      ? jsxImport()
+      : import(/* @vite-ignore */ resolveCanvasModuleImport(jsxModule))
+
+    loadPromise
       .then((mod) => {
         const exports = {}
         for (const [key, value] of Object.entries(mod)) {
@@ -77,10 +83,10 @@ export function useCanvas(name) {
         setJsxExports(exports)
       })
       .catch((err) => {
-        console.error(`[storyboard] Failed to load canvas JSX module: ${moduleImportPath}`, err)
+        console.error(`[storyboard] Failed to load canvas JSX module: ${jsxModule}`, err)
         setJsxExports(null)
       })
-  }, [canvas?._jsxModule])
+  }, [jsxModule, jsxImport])
 
   // In dev, react to file mutations from the data plugin without reloading
   // the current page. This keeps canvas editing state and route stable.

package/src/hooks/useSceneData.js

@@ -73,7 +73,9 @@ export function useFlowData(path) {
     }
 
     if (sceneValue === undefined) {
-      console.warn(`[useFlowData] Path "${path}" not found in flow data.`)
+      if (data != null && Object.keys(data).length > 0) {
+        console.warn(`[useFlowData] Path "${path}" not found in flow data.`)
+      }
       return {}
     }
 

package/src/vite/data-plugin.js

@@ -444,7 +444,11 @@ function generateModule({ index, protoFolders, flowRoutes, canvasRoutes }, root)
       }
       parsed = resolveTemplateVars(parsed, templateVars)
 
-      declarations.push(`const ${varName} = ${JSON.stringify(parsed)}`)
+      if (suffix === 'canvas' && parsed._jsxModule) {
+        declarations.push(`const ${varName} = Object.assign(${JSON.stringify(parsed)}, { _jsxImport: () => import(${JSON.stringify(parsed._jsxModule)}) })`)
+      } else {
+        declarations.push(`const ${varName} = ${JSON.stringify(parsed)}`)
+      }
       entries[suffix].push(`  ${JSON.stringify(name)}: ${varName}`)
     }
   }