@dfosco/storyboard-react 2.8.0 → 3.1.0

package/src/canvas/CanvasPage.jsx

@@ -0,0 +1,433 @@
+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 { 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.
+ */
+function debounce(fn, ms) {
+  let timer
+  return (...args) => {
+    clearTimeout(timer)
+    timer = setTimeout(() => fn(...args), 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 }) {
+  const Component = getWidgetComponent(widget.type)
+  if (!Component) {
+    console.warn(`[canvas] Unknown widget type: ${widget.type}`)
+    return null
+  }
+  return createElement(Component, {
+    id: widget.id,
+    props: widget.props,
+    onUpdate,
+  })
+}
+
+/**
+ * Generic canvas page component.
+ * Reads canvas data from the index and renders all widgets on a draggable surface.
+ *
+ * @param {{ name: string }} props - Canvas name as indexed by the data plugin
+ */
+export default function CanvasPage({ name }) {
+  const { canvas, jsxExports, loading } = useCanvas(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
+  const debouncedSave = useRef(
+    debounce((canvasName, widgets) => {
+      updateCanvas(canvasName, { widgets }).catch((err) =>
+        console.error('[canvas] Failed to save:', err)
+      )
+    }, 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
+      const next = prev.map((w) =>
+        w.id === widgetId ? { ...w, props: { ...w.props, ...updates } } : w
+      )
+      debouncedSave(name, next)
+      return next
+    })
+  }, [name, debouncedSave])
+
+  const handleWidgetRemove = useCallback((widgetId) => {
+    setLocalWidgets((prev) => prev ? prev.filter((w) => w.id !== widgetId) : prev)
+    removeWidgetApi(name, widgetId).catch((err) =>
+      console.error('[canvas] Failed to remove widget:', err)
+    )
+  }, [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}>
+        <p>Canvas &ldquo;{name}&rdquo; not found</p>
+      </div>
+    )
+  }
+
+  if (loading) {
+    return (
+      <div className={styles.loading}>
+        <p>Loading canvas…</p>
+      </div>
+    )
+  }
+
+  const canvasProps = {
+    centered: canvas.centered ?? false,
+    dotted: canvas.dotted ?? false,
+    grid: canvas.grid ?? false,
+    gridSize: canvas.gridSize ?? 18,
+    colorMode: canvas.colorMode ?? 'auto',
+  }
+
+  // Merge JSX-sourced widgets (from .canvas.jsx) and JSON widgets
+  const allChildren = []
+
+  // 1. JSX-sourced component widgets
+  if (jsxExports) {
+    for (const [exportName, Component] of Object.entries(jsxExports)) {
+      allChildren.push(
+        <div key={`jsx-${exportName}`} id={`jsx-${exportName}`}>
+          <ComponentWidget component={Component} />
+        </div>
+      )
+    }
+  }
+
+  // 2. JSON-defined mutable widgets (selectable)
+  for (const widget of (localWidgets ?? [])) {
+    allChildren.push(
+      <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)}
+        />
+      </div>
+    )
+  }
+
+  const scale = zoom / 100
+
+  return (
+    <>
+      <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>
+    </>
+  )
+}

package/src/canvas/CanvasPage.module.css

@@ -0,0 +1,73 @@
+.empty,
+.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
+  color: var(--fgColor-muted, #656d76);
+  font-size: 16px;
+}
+
+.empty p,
+.loading p {
+  margin: 0;
+}
+
+.canvasScroll {
+  width: 100vw;
+  height: 100vh;
+  overflow: auto;
+  background-color: var(--bgColor-muted, #f6f8fa);
+}
+
+@media (prefers-color-scheme: dark) {
+  .canvasScroll {
+    background-color: var(--bgColor-muted, #161b22);
+  }
+}
+
+.canvasZoom {
+  min-width: 100%;
+  min-height: 100%;
+}
+
+.selected {
+  outline: 2px solid var(--bgColor-accent-emphasis, #2f81f7);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+.canvasTitle {
+  position: fixed;
+  top: 12px;
+  left: 16px;
+  z-index: 10;
+}
+
+.canvasTitleInput {
+  font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--fgColor-muted, #656d76);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  padding: 4px 8px;
+  outline: none;
+  min-width: 80px;
+  max-width: 300px;
+  transition: border-color 150ms, background-color 150ms, color 150ms;
+}
+
+.canvasTitleInput:hover {
+  color: var(--fgColor-default, #1f2328);
+  border-color: var(--borderColor-default, #d1d9e0);
+  background: var(--bgColor-default, #ffffff);
+}
+
+.canvasTitleInput:focus {
+  color: var(--fgColor-default, #1f2328);
+  border-color: var(--bgColor-accent-emphasis, #2f81f7);
+  background: var(--bgColor-default, #ffffff);
+}

package/src/canvas/CanvasToolbar.jsx

@@ -0,0 +1,76 @@
+import { useState } from 'react'
+import { addWidget as addWidgetApi } from './canvasApi.js'
+import { schemas, getDefaults } from './widgets/widgetProps.js'
+import styles from './CanvasToolbar.module.css'
+
+const WIDGET_TYPES = [
+  { type: 'sticky-note', label: 'Sticky Note', icon: '📝' },
+  { type: 'markdown', label: 'Markdown', icon: '📄' },
+  { type: 'prototype', label: 'Prototype', icon: '🖥️' },
+]
+
+/**
+ * Floating toolbar for adding widgets to a canvas.
+ */
+export default function CanvasToolbar({ canvasName, onWidgetAdded }) {
+  const [open, setOpen] = useState(false)
+  const [adding, setAdding] = useState(false)
+
+  async function handleAdd(type) {
+    if (adding) return
+    setAdding(true)
+    try {
+      const defaultProps = schemas[type] ? getDefaults(schemas[type]) : {}
+      const result = await addWidgetApi(canvasName, {
+        type,
+        props: defaultProps,
+        position: { x: 0, y: 0 },
+      })
+      if (result.success) {
+        onWidgetAdded?.(result.widget)
+        setOpen(false)
+      }
+    } catch (err) {
+      console.error('[canvas] Failed to add widget:', err)
+    } finally {
+      setAdding(false)
+    }
+  }
+
+  return (
+    <nav className={styles.toolbar}>
+      {open ? (
+        <div className={styles.menu}>
+          <header className={styles.menuHeader}>
+            <span>Add widget</span>
+            <button
+              className={styles.closeBtn}
+              onClick={() => setOpen(false)}
+              aria-label="Close"
+            >×</button>
+          </header>
+          {WIDGET_TYPES.map(({ type, label, icon }) => (
+            <button
+              key={type}
+              className={styles.menuItem}
+              onClick={() => handleAdd(type)}
+              disabled={adding}
+            >
+              <span className={styles.menuIcon}>{icon}</span>
+              {label}
+            </button>
+          ))}
+        </div>
+      ) : (
+        <button
+          className={styles.addBtn}
+          onClick={() => setOpen(true)}
+          title="Add widget"
+          aria-label="Add widget"
+        >
+          +
+        </button>
+      )}
+    </nav>
+  )
+}

package/src/canvas/CanvasToolbar.module.css

@@ -0,0 +1,92 @@
+.toolbar {
+  position: fixed;
+  bottom: 80px;
+  left: 24px;
+  z-index: 1000;
+  font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
+}
+
+.addBtn {
+  all: unset;
+  cursor: pointer;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: var(--bgColor-accent-emphasis, #2f81f7);
+  color: var(--fgColor-onEmphasis, #ffffff);
+  font-size: 28px;
+  font-weight: 300;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+  transition: transform 150ms, background 150ms;
+}
+
+.addBtn:hover {
+  transform: scale(1.08);
+  background: var(--bgColor-accent-emphasis, #388bfd);
+}
+
+.menu {
+  background: var(--bgColor-default, #ffffff);
+  border: 1px solid var(--borderColor-muted, rgba(0, 0, 0, 0.15));
+  border-radius: 12px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  min-width: 180px;
+}
+
+.menuHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--fgColor-muted, #656d76);
+  border-bottom: 1px solid var(--borderColor-muted, rgba(0, 0, 0, 0.1));
+}
+
+.closeBtn {
+  all: unset;
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
+  color: var(--fgColor-muted, #656d76);
+  padding: 0 2px;
+  border-radius: 4px;
+}
+
+.closeBtn:hover {
+  color: var(--fgColor-default, #1f2328);
+}
+
+.menuItem {
+  all: unset;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  font-size: 14px;
+  color: var(--fgColor-default, #1f2328);
+  width: 100%;
+  box-sizing: border-box;
+  transition: background 100ms;
+}
+
+.menuItem:hover {
+  background: var(--bgColor-muted, #f6f8fa);
+}
+
+.menuItem:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.menuIcon {
+  font-size: 18px;
+}

package/src/canvas/canvasApi.js

@@ -0,0 +1,41 @@
+/**
+ * Client-side API for canvas CRUD operations.
+ * Calls the /_storyboard/canvas/ server endpoints.
+ */
+
+const BASE = '/_storyboard/canvas'
+
+function getApiBase() {
+  const base = (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
+  return base + BASE
+}
+
+async function request(path, method, body) {
+  const url = getApiBase() + path
+  const res = await fetch(url, {
+    method,
+    headers: body ? { 'Content-Type': 'application/json' } : undefined,
+    body: body ? JSON.stringify(body) : undefined,
+  })
+  return res.json()
+}
+
+export function listCanvases() {
+  return request('/list', 'GET')
+}
+
+export function createCanvas(data) {
+  return request('/create', 'POST', data)
+}
+
+export function updateCanvas(name, { widgets, sources, settings }) {
+  return request('/update', 'PUT', { name, widgets, sources, settings })
+}
+
+export function addWidget(name, { type, props, position }) {
+  return request('/widget', 'POST', { name, type, props, position })
+}
+
+export function removeWidget(name, widgetId) {
+  return request('/widget', 'DELETE', { name, widgetId })
+}