@dfosco/storyboard-react 3.0.0 → 3.1.0

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "type": "module",
   "dependencies": {
-    "@dfosco/storyboard-core": "3.0.0",
-    "@dfosco/tiny-canvas": "file:../tiny-canvas",
+    "@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"

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);
+}

package/src/canvas/CanvasPage.jsx

@@ -1,12 +1,15 @@
-import { createElement, useCallback, useRef, useState } from 'react'
+import { createElement, useCallback, useEffect, useRef, useState } from 'react'
 import { Canvas } from '@dfosco/tiny-canvas'
 import { useCanvas } from './useCanvas.js'
 import { getWidgetComponent } from './widgets/index.js'
+import { schemas, getDefaults } from './widgets/widgetProps.js'
 import ComponentWidget from './widgets/ComponentWidget.jsx'
-import CanvasToolbar from './CanvasToolbar.jsx'
-import { updateCanvas, removeWidget as removeWidgetApi } from './canvasApi.js'
+import { addWidget as addWidgetApi, updateCanvas, removeWidget as removeWidgetApi } from './canvasApi.js'
 import styles from './CanvasPage.module.css'
 
+const ZOOM_MIN = 25
+const ZOOM_MAX = 200
+
 /**
  * Debounce helper — returns a function that delays invocation.
  */
@@ -18,8 +21,33 @@ function debounce(fn, ms) {
   }
 }
 
+/**
+ * Save a drag position to localStorage so tiny-canvas picks it up on render.
+ */
+function saveWidgetPosition(widgetId, x, y) {
+  try {
+    const queue = JSON.parse(localStorage.getItem('tiny-canvas-queue')) || []
+    const now = new Date().toISOString().replace(/[:.]/g, '-')
+    const entry = { id: widgetId, x, y, time: now }
+    const idx = queue.findIndex((item) => item.id === widgetId)
+    if (idx >= 0) queue[idx] = entry
+    else queue.push(entry)
+    localStorage.setItem('tiny-canvas-queue', JSON.stringify(queue))
+  } catch { /* localStorage unavailable */ }
+}
+
+/**
+ * Get viewport-center coordinates for placing a new widget.
+ */
+function getViewportCenter() {
+  return {
+    x: Math.round(window.innerWidth / 2 - 120),
+    y: Math.round(window.innerHeight / 2 - 80),
+  }
+}
+
 /** Renders a single JSON-defined widget by type lookup. */
-function WidgetRenderer({ widget, onUpdate, onRemove }) {
+function WidgetRenderer({ widget, onUpdate }) {
   const Component = getWidgetComponent(widget.type)
   if (!Component) {
     console.warn(`[canvas] Unknown widget type: ${widget.type}`)
@@ -29,7 +57,6 @@ function WidgetRenderer({ widget, onUpdate, onRemove }) {
     id: widget.id,
     props: widget.props,
     onUpdate,
-    onRemove,
   })
 }
 
@@ -45,9 +72,16 @@ export default function CanvasPage({ name }) {
   // Local mutable copy of widgets for instant UI updates
   const [localWidgets, setLocalWidgets] = useState(canvas?.widgets ?? null)
   const [trackedCanvas, setTrackedCanvas] = useState(canvas)
+  const [selectedWidgetId, setSelectedWidgetId] = useState(null)
+  const [zoom, setZoom] = useState(100)
+  const scrollRef = useRef(null)
+  const [canvasTitle, setCanvasTitle] = useState(canvas?.title || name)
+  const titleInputRef = useRef(null)
+
   if (canvas !== trackedCanvas) {
     setTrackedCanvas(canvas)
     setLocalWidgets(canvas?.widgets ?? null)
+    setCanvasTitle(canvas?.title || name)
   }
 
   // Debounced save to server
@@ -59,6 +93,27 @@ export default function CanvasPage({ name }) {
     }, 2000)
   ).current
 
+  const debouncedTitleSave = useRef(
+    debounce((canvasName, title) => {
+      updateCanvas(canvasName, { settings: { title } }).catch((err) =>
+        console.error('[canvas] Failed to save title:', err)
+      )
+    }, 1000)
+  ).current
+
+  const handleTitleChange = useCallback((e) => {
+    const newTitle = e.target.value
+    setCanvasTitle(newTitle)
+    debouncedTitleSave(name, newTitle)
+  }, [name, debouncedTitleSave])
+
+  const handleTitleKeyDown = useCallback((e) => {
+    if (e.key === 'Enter') {
+      e.target.blur()
+    }
+    e.stopPropagation()
+  }, [])
+
   const handleWidgetUpdate = useCallback((widgetId, updates) => {
     setLocalWidgets((prev) => {
       if (!prev) return prev
@@ -77,6 +132,206 @@ export default function CanvasPage({ name }) {
     )
   }, [name])
 
+  // Signal canvas mount/unmount to CoreUIBar (include zoom state)
+  useEffect(() => {
+    document.dispatchEvent(new CustomEvent('storyboard:canvas:mounted', {
+      detail: { name, zoom }
+    }))
+    return () => {
+      document.dispatchEvent(new CustomEvent('storyboard:canvas:unmounted'))
+    }
+  }, [name, zoom])
+
+  // Add a widget by type — used by CanvasControls and CoreUIBar event
+  const addWidget = useCallback(async (type) => {
+    const defaultProps = schemas[type] ? getDefaults(schemas[type]) : {}
+    const pos = getViewportCenter()
+    try {
+      const result = await addWidgetApi(name, {
+        type,
+        props: defaultProps,
+        position: pos,
+      })
+      if (result.success && result.widget) {
+        saveWidgetPosition(result.widget.id, pos.x, pos.y)
+        setLocalWidgets((prev) => [...(prev || []), result.widget])
+      }
+    } catch (err) {
+      console.error('[canvas] Failed to add widget:', err)
+    }
+  }, [name])
+
+  // Listen for CoreUIBar add-widget events
+  useEffect(() => {
+    function handleAddWidget(e) {
+      addWidget(e.detail.type)
+    }
+    document.addEventListener('storyboard:canvas:add-widget', handleAddWidget)
+    return () => document.removeEventListener('storyboard:canvas:add-widget', handleAddWidget)
+  }, [addWidget])
+
+  // Listen for zoom changes from CoreUIBar
+  useEffect(() => {
+    function handleZoom(e) {
+      const { zoom: newZoom } = e.detail
+      if (typeof newZoom === 'number') {
+        setZoom(Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, newZoom)))
+      }
+    }
+    document.addEventListener('storyboard:canvas:set-zoom', handleZoom)
+    return () => document.removeEventListener('storyboard:canvas:set-zoom', handleZoom)
+  }, [])
+
+  // Broadcast zoom level to CoreUIBar whenever it changes
+  useEffect(() => {
+    document.dispatchEvent(new CustomEvent('storyboard:canvas:zoom-changed', {
+      detail: { zoom }
+    }))
+  }, [zoom])
+
+  // Delete selected widget on Delete/Backspace key
+  useEffect(() => {
+    function handleKeyDown(e) {
+      if (!selectedWidgetId) return
+      const tag = e.target.tagName
+      if (tag === 'INPUT' || tag === 'TEXTAREA' || e.target.isContentEditable) return
+      if (e.key === 'Delete' || e.key === 'Backspace') {
+        e.preventDefault()
+        handleWidgetRemove(selectedWidgetId)
+        setSelectedWidgetId(null)
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [selectedWidgetId, handleWidgetRemove])
+
+  // Paste handler — same-origin URLs become prototypes, other URLs become link previews, text becomes markdown
+  useEffect(() => {
+    const baseUrl = window.location.origin + (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
+
+    async function handlePaste(e) {
+      const tag = e.target.tagName
+      if (tag === 'INPUT' || tag === 'TEXTAREA' || e.target.isContentEditable) return
+
+      const text = e.clipboardData?.getData('text/plain')?.trim()
+      if (!text) return
+
+      e.preventDefault()
+
+      let type, props
+      try {
+        const parsed = new URL(text)
+        if (text.startsWith(baseUrl)) {
+          // Same-origin URL → prototype embed with the path portion
+          const pathPortion = parsed.pathname + parsed.search + parsed.hash
+          const basePath = (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
+          const src = basePath ? pathPortion.replace(new RegExp(`^${basePath}`), '') : pathPortion
+          type = 'prototype'
+          props = { src: src || '/', label: '', width: 800, height: 600 }
+        } else {
+          type = 'link-preview'
+          props = { url: text, title: '' }
+        }
+      } catch {
+        type = 'markdown'
+        props = { content: text }
+      }
+
+      const pos = getViewportCenter()
+      try {
+        const result = await addWidgetApi(name, {
+          type,
+          props,
+          position: pos,
+        })
+        if (result.success && result.widget) {
+          saveWidgetPosition(result.widget.id, pos.x, pos.y)
+          setLocalWidgets((prev) => [...(prev || []), result.widget])
+        }
+      } catch (err) {
+        console.error('[canvas] Failed to add widget from paste:', err)
+      }
+    }
+    document.addEventListener('paste', handlePaste)
+    return () => document.removeEventListener('paste', handlePaste)
+  }, [name])
+
+  // Cmd+scroll / trackpad pinch to smooth-zoom the canvas
+  // On macOS, pinch-to-zoom fires wheel events with ctrlKey: true and small
+  // fractional deltaY values. We accumulate the delta to handle sub-pixel changes.
+  const zoomAccum = useRef(0)
+  useEffect(() => {
+    function handleWheel(e) {
+      if (!e.metaKey && !e.ctrlKey) return
+      e.preventDefault()
+      zoomAccum.current += -e.deltaY
+      const step = Math.trunc(zoomAccum.current)
+      if (step === 0) return
+      zoomAccum.current -= step
+      setZoom((z) => Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, z + step)))
+    }
+    document.addEventListener('wheel', handleWheel, { passive: false })
+    return () => document.removeEventListener('wheel', handleWheel)
+  }, [])
+
+  // Space + drag to pan the canvas
+  const [spaceHeld, setSpaceHeld] = useState(false)
+  const isPanning = useRef(false)
+  const [panningActive, setPanningActive] = useState(false)
+  const panStart = useRef({ x: 0, y: 0, scrollX: 0, scrollY: 0 })
+
+  useEffect(() => {
+    function handleKeyDown(e) {
+      if (e.key === ' ' && !e.repeat) {
+        const tag = e.target.tagName
+        if (tag === 'INPUT' || tag === 'TEXTAREA' || e.target.isContentEditable) return
+        e.preventDefault()
+        setSpaceHeld(true)
+      }
+    }
+    function handleKeyUp(e) {
+      if (e.key === ' ') {
+        setSpaceHeld(false)
+        isPanning.current = false
+        setPanningActive(false)
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown)
+    document.addEventListener('keyup', handleKeyUp)
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+      document.removeEventListener('keyup', handleKeyUp)
+    }
+  }, [])
+
+  const handlePanStart = useCallback((e) => {
+    if (!spaceHeld) return
+    e.preventDefault()
+    isPanning.current = true
+    setPanningActive(true)
+    const el = scrollRef.current
+    panStart.current = {
+      x: e.clientX,
+      y: e.clientY,
+      scrollX: el?.scrollLeft ?? 0,
+      scrollY: el?.scrollTop ?? 0,
+    }
+
+    function handlePanMove(ev) {
+      if (!isPanning.current || !el) return
+      el.scrollLeft = panStart.current.scrollX - (ev.clientX - panStart.current.x)
+      el.scrollTop = panStart.current.scrollY - (ev.clientY - panStart.current.y)
+    }
+    function handlePanEnd() {
+      isPanning.current = false
+      setPanningActive(false)
+      document.removeEventListener('mousemove', handlePanMove)
+      document.removeEventListener('mouseup', handlePanEnd)
+    }
+    document.addEventListener('mousemove', handlePanMove)
+    document.addEventListener('mouseup', handlePanEnd)
+  }, [spaceHeld])
+
   if (!canvas) {
     return (
       <div className={styles.empty}>
@@ -115,31 +370,64 @@ export default function CanvasPage({ name }) {
     }
   }
 
-  // 2. JSON-defined mutable widgets
+  // 2. JSON-defined mutable widgets (selectable)
   for (const widget of (localWidgets ?? [])) {
     allChildren.push(
-      <div key={widget.id} id={widget.id}>
+      <div
+        key={widget.id}
+        id={widget.id}
+        onClick={(e) => {
+          e.stopPropagation()
+          setSelectedWidgetId(widget.id)
+        }}
+        className={selectedWidgetId === widget.id ? styles.selected : undefined}
+      >
         <WidgetRenderer
           widget={widget}
           onUpdate={(updates) => handleWidgetUpdate(widget.id, updates)}
-          onRemove={() => handleWidgetRemove(widget.id)}
         />
       </div>
     )
   }
 
+  const scale = zoom / 100
+
   return (
     <>
-      <Canvas {...canvasProps}>
-        {allChildren}
-      </Canvas>
-      <CanvasToolbar
-        canvasName={name}
-        onWidgetAdded={() => {
-          // Reload the page to pick up the new widget from the updated .canvas.json
-          window.location.reload()
-        }}
-      />
+      <div className={styles.canvasTitle}>
+        <input
+          ref={titleInputRef}
+          className={styles.canvasTitleInput}
+          value={canvasTitle}
+          onChange={handleTitleChange}
+          onKeyDown={handleTitleKeyDown}
+          onMouseDown={(e) => e.stopPropagation()}
+          spellCheck={false}
+          aria-label="Canvas title"
+          style={{ width: `${Math.max(80, canvasTitle.length * 8.5 + 20)}px` }}
+        />
+      </div>
+      <div
+        ref={scrollRef}
+        className={styles.canvasScroll}
+        style={spaceHeld ? { cursor: panningActive ? 'grabbing' : 'grab' } : undefined}
+        onClick={() => setSelectedWidgetId(null)}
+        onMouseDown={handlePanStart}
+      >
+        <div
+          className={styles.canvasZoom}
+          style={{
+            transform: `scale(${scale})`,
+            transformOrigin: '0 0',
+            width: `${Math.max(10000, 100 / scale)}vw`,
+            height: `${Math.max(10000, 100 / scale)}vh`,
+          }}
+        >
+          <Canvas {...canvasProps}>
+            {allChildren}
+          </Canvas>
+        </div>
+      </div>
     </>
   )
 }