@dfosco/storyboard-react 2.8.0 → 3.1.0

package/package.json

@@ -1,9 +1,11 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "2.8.0",
+  "version": "3.1.0",
   "type": "module",
   "dependencies": {
-    "@dfosco/storyboard-core": "2.8.0",
+    "@dfosco/storyboard-core": "3.1.0",
+    "@dfosco/tiny-canvas": "^1.1.0",
+    "@neodrag/react": "^2.3.1",
     "glob": "^11.0.0",
     "jsonc-parser": "^3.3.1"
   },
@@ -24,6 +26,7 @@
   "exports": {
     ".": "./src/index.js",
     "./vite": "./src/vite/data-plugin.js",
-    "./hash-preserver": "./src/hashPreserver.js"
+    "./hash-preserver": "./src/hashPreserver.js",
+    "./canvas/CanvasPage": "./src/canvas/CanvasPage.jsx"
   }
 }

package/src/Viewfinder.jsx

@@ -1,5 +1,5 @@
 
-import { useRef, useEffect } from 'react'
+import { useRef, useEffect, useMemo } from 'react'
 
 /**
  * Viewfinder — thin React wrapper around the Svelte Viewfinder component.
@@ -23,9 +23,10 @@ export default function Viewfinder({ pageModules = {}, basePath, title = 'Storyb
 
   const shouldHideDefault = hideDefaultFlow ?? hideDefaultScene
 
-  const knownRoutes = Object.keys(pageModules)
+  const knownRoutes = useMemo(() => Object.keys(pageModules)
     .map(p => p.replace('/src/prototypes/', '').replace('.jsx', ''))
-    .filter(n => !n.startsWith('_') && n !== 'index' && n !== 'viewfinder')
+    .filter(n => !n.startsWith('_') && n !== 'index' && n !== 'viewfinder'),
+  [pageModules])
 
   useEffect(() => {
     if (!containerRef.current) return
@@ -53,7 +54,7 @@ export default function Viewfinder({ pageModules = {}, basePath, title = 'Storyb
         handleRef.current = null
       }
     }
-  }, [title, subtitle, basePath, showThumbnails, shouldHideDefault])
+  }, [title, subtitle, basePath, knownRoutes, showThumbnails, shouldHideDefault])
 
   return <div ref={containerRef} style={{ minHeight: '100vh' }} />
 }

package/src/canvas/CanvasControls.jsx

@@ -0,0 +1,123 @@
+import { useState, useRef, useEffect, useCallback } from 'react'
+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 = [
+  { type: 'sticky-note', label: 'Sticky Note' },
+  { type: 'markdown', label: 'Markdown' },
+  { type: 'prototype', label: 'Prototype' },
+]
+
+/**
+ * Focused canvas toolbar — bottom-left controls for zoom and widget creation.
+ */
+export default function CanvasControls({ zoom, onZoomChange, onAddWidget }) {
+  const [menuOpen, setMenuOpen] = useState(false)
+  const menuRef = useRef(null)
+
+  // Close menu on outside click
+  useEffect(() => {
+    if (!menuOpen) return
+    function handlePointerDown(e) {
+      if (menuRef.current && !menuRef.current.contains(e.target)) {
+        setMenuOpen(false)
+      }
+    }
+    document.addEventListener('pointerdown', handlePointerDown)
+    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)
+  }, [onAddWidget])
+
+  return (
+    <div className={styles.toolbar} role="toolbar" aria-label="Canvas controls">
+      {/* Create widget */}
+      <div ref={menuRef} className={styles.createGroup}>
+        <button
+          className={styles.btn}
+          onClick={() => setMenuOpen((v) => !v)}
+          aria-label="Add widget"
+          aria-expanded={menuOpen}
+          title="Add widget"
+        >
+          <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>
+        {menuOpen && (
+          <div className={styles.menu} role="menu">
+            <div className={styles.menuLabel}>Add to canvas</div>
+            {WIDGET_TYPES.map((wt) => (
+              <button
+                key={wt.type}
+                className={styles.menuItem}
+                role="menuitem"
+                onClick={() => handleAddWidget(wt.type)}
+              >
+                {wt.label}
+              </button>
+            ))}
+          </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

@@ -0,0 +1,133 @@
+.toolbar {
+  position: fixed;
+  bottom: 24px;
+  left: 24px;
+  z-index: 9998;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px;
+  background: rgba(255, 255, 255, 0.92);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 10px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+  font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
+}
+
+@media (prefers-color-scheme: dark) {
+  .toolbar {
+    background: rgba(22, 27, 34, 0.88);
+    border-color: rgba(255, 255, 255, 0.1);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+  }
+}
+
+.btn {
+  all: unset;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  color: var(--fgColor-default, #1f2328);
+  transition: background 120ms;
+}
+
+.btn:hover:not(:disabled) {
+  background: var(--bgColor-muted, #f6f8fa);
+}
+
+.btn:active:not(:disabled) {
+  background: var(--bgColor-neutral-muted, #eaeef2);
+}
+
+.btn:disabled {
+  opacity: 0.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;
+}
+
+.menu {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 0;
+  min-width: 160px;
+  padding: 4px;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 10px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  z-index: 1;
+}
+
+@media (prefers-color-scheme: dark) {
+  .menu {
+    background: rgba(22, 27, 34, 0.92);
+    border-color: rgba(255, 255, 255, 0.1);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+  }
+}
+
+.menuLabel {
+  padding: 6px 10px 4px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--fgColor-muted, #656d76);
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+}
+
+.menuItem {
+  all: unset;
+  cursor: pointer;
+  display: block;
+  width: 100%;
+  padding: 6px 10px;
+  font-size: 13px;
+  color: var(--fgColor-default, #1f2328);
+  border-radius: 6px;
+  box-sizing: border-box;
+}
+
+.menuItem:hover {
+  background: var(--bgColor-muted, #f6f8fa);
+}