@dfosco/storyboard-react 3.11.0-beta.4 → 3.11.1-beta.0

package/package.json

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

package/src/Viewfinder.jsx

@@ -45,6 +45,10 @@ export default function Viewfinder({ pageModules = {}, basePath, title = 'Storyb
         showThumbnails,
         hideDefaultFlow: shouldHideDefault,
       })
+      // Reveal after CSS has been processed to prevent FOUC
+      requestAnimationFrame(() => {
+        if (containerRef.current) containerRef.current.style.opacity = '1'
+      })
     })
 
     return () => {
@@ -56,6 +60,11 @@ export default function Viewfinder({ pageModules = {}, basePath, title = 'Storyb
     }
   }, [title, subtitle, basePath, knownRoutes, showThumbnails, shouldHideDefault])
 
-  return <div ref={containerRef} style={{ minHeight: '100vh' }} />
+  return <div ref={containerRef} style={{
+    minHeight: '100vh',
+    background: 'var(--bgColor-default, #0d1117)',
+    opacity: 0,
+    transition: 'opacity 0.15s ease',
+  }} />
 }
 

package/src/canvas/CanvasControls.jsx

@@ -2,12 +2,16 @@ import { useState, useRef, useEffect, useCallback } from 'react'
 import { getMenuWidgetTypes } from './widgets/widgetConfig.js'
 import styles from './CanvasControls.module.css'
 
+const ZOOM_STEPS = [25, 50, 75, 100, 125, 150, 200]
+export const ZOOM_MIN = ZOOM_STEPS[0]
+export const ZOOM_MAX = ZOOM_STEPS[ZOOM_STEPS.length - 1]
+
 const WIDGET_TYPES = getMenuWidgetTypes()
 
 /**
- * Focused canvas toolbar — bottom-left add-widget control.
+ * Focused canvas toolbar — bottom-left controls for zoom and widget creation.
  */
-export default function CanvasControls({ onAddWidget }) {
+export default function CanvasControls({ zoom, onZoomChange, onAddWidget }) {
   const [menuOpen, setMenuOpen] = useState(false)
   const menuRef = useRef(null)
 
@@ -23,6 +27,24 @@ export default function CanvasControls({ onAddWidget }) {
     return () => document.removeEventListener('pointerdown', handlePointerDown)
   }, [menuOpen])
 
+  const zoomIn = useCallback(() => {
+    onZoomChange((z) => {
+      const next = ZOOM_STEPS.find((s) => s > z)
+      return next ?? ZOOM_MAX
+    })
+  }, [onZoomChange])
+
+  const zoomOut = useCallback(() => {
+    onZoomChange((z) => {
+      const next = [...ZOOM_STEPS].reverse().find((s) => s < z)
+      return next ?? ZOOM_MIN
+    })
+  }, [onZoomChange])
+
+  const resetZoom = useCallback(() => {
+    onZoomChange(100)
+  }, [onZoomChange])
+
   const handleAddWidget = useCallback((type) => {
     onAddWidget(type)
     setMenuOpen(false)
@@ -30,6 +52,7 @@ export default function CanvasControls({ onAddWidget }) {
 
   return (
     <div className={styles.toolbar} role="toolbar" aria-label="Canvas controls">
+      {/* Create widget */}
       <div ref={menuRef} className={styles.createGroup}>
         <button
           className={styles.btn}
@@ -58,6 +81,40 @@ export default function CanvasControls({ onAddWidget }) {
           </div>
         )}
       </div>
+
+      <div className={styles.divider} />
+
+      {/* Zoom controls */}
+      <button
+        className={styles.btn}
+        onClick={zoomOut}
+        disabled={zoom <= ZOOM_MIN}
+        aria-label="Zoom out"
+        title="Zoom out"
+      >
+        <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+          <path d="M2.75 7.25h10.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5Z" />
+        </svg>
+      </button>
+      <button
+        className={styles.zoomLevel}
+        onClick={resetZoom}
+        title="Reset to 100%"
+        aria-label={`Zoom ${zoom}%, click to reset`}
+      >
+        {zoom}%
+      </button>
+      <button
+        className={styles.btn}
+        onClick={zoomIn}
+        disabled={zoom >= ZOOM_MAX}
+        aria-label="Zoom in"
+        title="Zoom in"
+      >
+        <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+          <path d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2Z" />
+        </svg>
+      </button>
     </div>
   )
 }

package/src/canvas/CanvasControls.module.css

@@ -50,6 +50,35 @@
   cursor: default;
 }
 
+.zoomLevel {
+  all: unset;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 44px;
+  height: 32px;
+  padding: 0 4px;
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  color: var(--fgColor-muted, #656d76);
+  transition: background 120ms;
+}
+
+.zoomLevel:hover {
+  background: var(--bgColor-muted, #f6f8fa);
+  color: var(--fgColor-default, #1f2328);
+}
+
+.divider {
+  width: 1px;
+  height: 20px;
+  margin: 0 2px;
+  background: var(--borderColor-muted, #d8dee4);
+}
+
 /* Create widget menu */
 .createGroup {
   position: relative;

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

@@ -54,10 +54,6 @@ vi.mock('./widgets/index.js', () => ({
   getWidgetComponent: () => function MockWidget() { return <div>mock widget</div> },
 }))
 
-vi.mock('./widgets/WidgetChrome.jsx', () => ({
-  default: ({ children }) => <div data-testid="widget-chrome">{children}</div>,
-}))
-
 vi.mock('./widgets/widgetProps.js', () => ({
   schemas: {},
   getDefaults: () => ({}),