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

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "3.11.0-beta.5",
+  "version": "3.11.1-beta.0",
   "type": "module",
   "dependencies": {
-    "@dfosco/storyboard-core": "3.11.0-beta.5",
-    "@dfosco/tiny-canvas": "3.11.0-beta.5",
+    "@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/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

@@ -1,4 +1,4 @@
-import { fireEvent, render, screen, waitFor, act } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import CanvasPage from './CanvasPage.jsx'
 import { getCanvasPrimerAttrs, getCanvasThemeVars } from './canvasTheme.js'
 import { updateCanvas } from './canvasApi.js'
@@ -54,42 +54,15 @@ 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: () => ({}),
 }))
 
-vi.mock('./widgets/widgetConfig.js', () => ({
-  getFeatures: () => [],
-  schemas: {},
-  getMenuWidgetTypes: () => [],
-}))
-
-vi.mock('./widgets/figmaUrl.js', () => ({
-  isFigmaUrl: () => false,
-  sanitizeFigmaUrl: (url) => url,
-}))
-
 vi.mock('./canvasApi.js', () => ({
   addWidget: vi.fn(),
   updateCanvas: vi.fn(() => Promise.resolve({ success: true })),
   removeWidget: vi.fn(),
-  uploadImage: vi.fn(),
-}))
-
-vi.mock('./useUndoRedo.js', () => ({
-  default: () => ({
-    snapshot: vi.fn(),
-    undo: vi.fn(),
-    redo: vi.fn(),
-    reset: vi.fn(),
-    canUndo: false,
-    canRedo: false,
-  }),
 }))
 
 describe('CanvasPage canvas bridge', () => {
@@ -144,55 +117,57 @@ describe('CanvasPage canvas bridge', () => {
     document.removeEventListener('storyboard:canvas:unmounted', unmountedHandler)
   })
 
-  it.skip('persists dragged JSON widgets and JSX sources to canvas JSONL via update API', async () => {
+  it('persists dragged JSON widgets and JSX sources to canvas JSONL via update API', async () => {
     render(<CanvasPage name="design-overview" />)
 
     fireEvent.click(screen.getByTestId('drag-widget'))
-    // Flush the promise-based write queue
-    await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
-    expect(updateCanvas).toHaveBeenCalledWith(
-      'design-overview',
-      expect.objectContaining({
-        widgets: expect.arrayContaining([
-          expect.objectContaining({
-            id: 'widget-1',
-            position: { x: 111, y: 223 },
-          }),
-        ]),
-      })
-    )
+    await waitFor(() => {
+      expect(updateCanvas).toHaveBeenCalledWith(
+        'design-overview',
+        expect.objectContaining({
+          widgets: expect.arrayContaining([
+            expect.objectContaining({
+              id: 'widget-1',
+              position: { x: 111, y: 223 },
+            }),
+          ]),
+        })
+      )
+    })
 
     fireEvent.click(screen.getByTestId('drag-source'))
-    await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
-    expect(updateCanvas).toHaveBeenCalledWith(
-      'design-overview',
-      expect.objectContaining({
-        sources: expect.arrayContaining([
-          expect.objectContaining({
-            export: 'PrimaryButtons',
-            position: { x: 333, y: 445 },
-          }),
-        ]),
-      })
-    )
+    await waitFor(() => {
+      expect(updateCanvas).toHaveBeenCalledWith(
+        'design-overview',
+        expect.objectContaining({
+          sources: expect.arrayContaining([
+            expect.objectContaining({
+              export: 'PrimaryButtons',
+              position: { x: 333, y: 445 },
+            }),
+          ]),
+        })
+      )
+    })
   })
 
-  it.skip('clamps negative drag positions to zero', async () => {
+  it('clamps negative drag positions to zero', async () => {
     render(<CanvasPage name="design-overview" />)
 
     fireEvent.click(screen.getByTestId('drag-widget-negative'))
-    await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
-    expect(updateCanvas).toHaveBeenCalledWith(
-      'design-overview',
-      expect.objectContaining({
-        widgets: expect.arrayContaining([
-          expect.objectContaining({
-            id: 'widget-1',
-            position: { x: 0, y: 0 },
-          }),
-        ]),
-      })
-    )
+    await waitFor(() => {
+      expect(updateCanvas).toHaveBeenCalledWith(
+        'design-overview',
+        expect.objectContaining({
+          widgets: expect.arrayContaining([
+            expect.objectContaining({
+              id: 'widget-1',
+              position: { x: 0, y: 0 },
+            }),
+          ]),
+        })
+      )
+    })
   })
 })