@dfosco/storyboard 0.10.2 → 0.10.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dfosco/storyboard",
-    "version": "0.10.2",
+    "version": "0.10.3",
     "type": "module",
     "license": "MIT",
     "description": "Storyboard prototyping framework — core engine, React integration, and canvas",
@@ -117,7 +117,7 @@
         "remark-gfm": "^4.0.1",
         "remark-html": "^16.0.1",
         "tailwind-merge": "^3.5.0",
-        "ws": "^8.0.0",
+        "ws": "^8.21.0",
         "zod": "^3.23.8"
     },
     "peerDependencies": {
@@ -194,7 +194,7 @@
         "tailwindcss": "^4.2.2",
         "tw-animate-css": "^1.4.0",
         "typescript": "^5.6.0",
-        "vite": "^7.3.1"
+        "vite": "^7.3.5"
     },
     "optionalDependencies": {
         "node-pty": "^1.0.0"

package/src/core/stores/configSchema.js

@@ -329,7 +329,7 @@ export const configDefaults = {
     surfaces: {
       prototype: { label: 'Prototype',  sync: true  },
       canvas:    { label: 'Canvas',     sync: true  },
-      toolbar:   { label: 'Tools',      sync: false },
+      toolbar:   { label: 'Tools',      sync: true  },
       codeBoxes: { label: 'Code boxes', sync: true  },
     },
     // Default global theme. "system" follows OS prefers-color-scheme.

package/src/internals/canvas/CanvasPage.jsx

@@ -64,6 +64,35 @@ function zoomLimits() {
   return { ZOOM_MIN: z.min, ZOOM_MAX: z.max, ZOOM_STEP: z.step }
 }
 
+/**
+ * Compute the .canvasZoom wrapper's layout width/height for a given scale,
+ * honoring `canvas.surface.{width,height}`.
+ *
+ * Default ("auto"): `max(10000, 100 / scale) <axis-unit>` — keeps the
+ * surface huge so users can pan into an infinite-feeling canvas; layout
+ * shrinks with zoom-in but the 10000-unit floor keeps scroll available.
+ *
+ * Viewport: the surface clamps to 100<axis-unit> at scale = 1, then grows
+ * proportionally with scale on zoom-in (`100 * scale <axis-unit>`) so the
+ * scroller still produces horizontal/vertical scroll above 100% zoom.
+ * At scale < 1 the layout stays at 100<axis-unit> (zoom-out doesn't add
+ * extra empty space).
+ */
+function getZoomLayoutDim(scale, surfaceAxis, axisUnit) {
+  if (surfaceAxis === 'viewport') {
+    return `${Math.max(100, 100 * scale)}${axisUnit}`
+  }
+  return `${Math.max(10000, 100 / scale)}${axisUnit}`
+}
+
+function getZoomLayoutWidth(scale, surface) {
+  return getZoomLayoutDim(scale, surface?.width, 'vw')
+}
+
+function getZoomLayoutHeight(scale, surface) {
+  return getZoomLayoutDim(scale, surface?.height, 'vh')
+}
+
 /** Saved viewport state older than this is considered stale — zoom-to-fit instead. */
 const VIEWPORT_TTL_MS = 15 * 60 * 1000
 
@@ -135,7 +164,7 @@ function getConnectedComponent(widgetId, connectors) {
 
 function resolveCanvasThemeFromStorage() {
   if (typeof localStorage === 'undefined') return 'light'
-  let sync = { prototype: true, toolbar: false, codeBoxes: true, canvas: true }
+  let sync = { prototype: true, toolbar: true, codeBoxes: true, canvas: true }
   try {
     const rawSync = localStorage.getItem('sb-theme-sync')
     if (rawSync) sync = { ...sync, ...JSON.parse(rawSync) }
@@ -2058,8 +2087,8 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
         const zoomEl = zoomElRef.current
         if (zoomEl) {
           zoomEl.style.transform = `scale(${newScale})`
-          zoomEl.style.width = `${Math.max(10000, 100 / newScale)}vw`
-          zoomEl.style.height = `${Math.max(10000, 100 / newScale)}vh`
+          zoomEl.style.width = getZoomLayoutWidth(newScale, interactionRef.current?.surface)
+          zoomEl.style.height = getZoomLayoutHeight(newScale, interactionRef.current?.surface)
         }
         setZoom(fitZoom)
         el.scrollLeft = (bounds.minX - FIT_PADDING) * newScale
@@ -2281,8 +2310,8 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     // Imperative DOM update — no React re-render
     zoomRef.current = clampedZoom
     zoomEl.style.transform = `scale(${newScale})`
-    zoomEl.style.width = `${Math.max(10000, 100 / newScale)}vw`
-    zoomEl.style.height = `${Math.max(10000, 100 / newScale)}vh`
+    zoomEl.style.width = getZoomLayoutWidth(newScale, interactionRef.current?.surface)
+    zoomEl.style.height = getZoomLayoutHeight(newScale, interactionRef.current?.surface)
 
     // Hint GPU compositing during active zoom
     zoomEl.dataset.zooming = ''
@@ -2618,8 +2647,8 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
       const zoomEl = zoomElRef.current
       if (zoomEl) {
         zoomEl.style.transform = `scale(${newScale})`
-        zoomEl.style.width = `${Math.max(10000, 100 / newScale)}vw`
-        zoomEl.style.height = `${Math.max(10000, 100 / newScale)}vh`
+        zoomEl.style.width = getZoomLayoutWidth(newScale, interactionRef.current?.surface)
+        zoomEl.style.height = getZoomLayoutHeight(newScale, interactionRef.current?.surface)
       }
       setZoom(fitZoom)
 
@@ -2852,8 +2881,8 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
         const zoomEl = zoomElRef.current
         if (zoomEl) {
           zoomEl.style.transform = `scale(${newScale})`
-          zoomEl.style.width = `${Math.max(10000, 100 / newScale)}vw`
-          zoomEl.style.height = `${Math.max(10000, 100 / newScale)}vh`
+          zoomEl.style.width = getZoomLayoutWidth(newScale, interactionRef.current?.surface)
+          zoomEl.style.height = getZoomLayoutHeight(newScale, interactionRef.current?.surface)
         }
         setZoom(targetZoom)
       }
@@ -4098,8 +4127,8 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
           style={{
             transform: `scale(${scale})`,
             transformOrigin: '0 0',
-            width: `${Math.max(10000, 100 / scale)}vw`,
-            height: `${Math.max(10000, 100 / scale)}vh`,
+            width: getZoomLayoutWidth(scale, interactionRef.current?.surface),
+            height: getZoomLayoutHeight(scale, interactionRef.current?.surface),
             ...(spaceHeld ? { pointerEvents: 'none' } : {}),
           }}
         >

package/src/internals/canvas/CanvasPage.module.css

@@ -41,23 +41,6 @@
   will-change: transform;
 }
 
-/* When the consumer sets `canvas.surface.width/height` to "viewport"
-   (see canvasInteractionStore.js), the canvas surface clamps to 100vw/100vh
-   — but the .canvasZoom wrapper still has its inline `max(10000, 100/scale)vw`
-   sizing, which would leave a huge stretch of empty wrapper to the right /
-   below the canvas and let the user scroll into it. Clamp the wrapper to
-   the viewport too. !important is required to beat the inline style set
-   by applyZoom(). Each axis is independent — only the configured axis is
-   constrained. */
-:global(html[data-canvas-surface-width="viewport"]) .canvasZoom {
-  width: 100vw !important;
-  min-width: 100vw !important;
-}
-:global(html[data-canvas-surface-height="viewport"]) .canvasZoom {
-  height: 100vh !important;
-  min-height: 100vh !important;
-}
-
 /* Selection outline is now handled by WidgetChrome.module.css (.widgetSlotSelected) */
 
 .canvasLogo {

package/src/internals/canvas/ConnectorLayer.module.css

@@ -28,6 +28,22 @@
   transition: opacity 0.2s ease;
 }
 
+/* When the consumer sets `canvas.surface.{width,height}` to "viewport"
+   (see canvasInteractionStore.js), the canvas surface clamps to 100vw/100vh.
+   The SVG layers below are siblings of .tc-canvas inside .canvasZoom and
+   have a hardcoded `width: 100000px; height: 100000px` inline style — so
+   without clamping them too, they grow the scroll container even though
+   .tc-canvas is viewport-sized. Override with !important to beat the
+   inline width/height. Each axis is independent. */
+:global(html[data-canvas-surface-width="viewport"]) .connectorLayer,
+:global(html[data-canvas-surface-width="viewport"]) .endpointLayer {
+  width: 100vw !important;
+}
+:global(html[data-canvas-surface-height="viewport"]) .connectorLayer,
+:global(html[data-canvas-surface-height="viewport"]) .endpointLayer {
+  height: 100vh !important;
+}
+
 .connectorPath {
   fill: none;
   stroke: var(--connector-stroke, var(--color-foreground-accent, #0969da));

package/src/internals/canvas/widgets/PrototypeEmbed.jsx

@@ -31,7 +31,7 @@ function formatName(name) {
 
 function resolveCanvasThemeFromStorage() {
   if (typeof localStorage === 'undefined') return 'light'
-  let sync = { prototype: true, toolbar: false, codeBoxes: true, canvas: false }
+  let sync = { prototype: true, toolbar: true, codeBoxes: true, canvas: false }
   try {
     const rawSync = localStorage.getItem('sb-theme-sync')
     if (rawSync) sync = { ...sync, ...JSON.parse(rawSync) }

package/src/internals/hooks/useThemeState.test.js

@@ -49,7 +49,7 @@ describe('useThemeSyncTargets', () => {
   it('returns default sync targets', () => {
     const { result } = renderHook(() => useThemeSyncTargets())
     expect(result.current.prototype).toBe(true)
-    expect(result.current.toolbar).toBe(false)
+    expect(result.current.toolbar).toBe(true)
     expect(result.current.codeBoxes).toBe(true)
     expect(result.current.canvas).toBe(true)
   })