@dfosco/storyboard-react 4.2.0-beta.17 → 4.2.0-beta.18

package/src/canvas/widgets/TerminalWidget.module.css

@@ -1,3 +1,7 @@
+:root {
+  --term-bg: #181b22;
+}
+
 .container {
   position: relative;
   padding-bottom: 0;
@@ -16,10 +20,12 @@
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   font-size: 11px;
   color: #8b949e;
-  pointer-events: none;
   user-select: none;
   white-space: nowrap;
   z-index: 2;
+  cursor: grab;
+  padding: 2px 6px;
+  border-radius: 4px;
 }
 
 [data-widget-selected] .titleBar {
@@ -30,24 +36,30 @@
   position: relative;
   border-radius: var(--base-size-16, 16px);
   overflow: hidden;
-  background: #0d1117;
+  background: var(--term-bg, #181b22);
   border: 1px solid var(--borderColor-default, #30363d);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24);
-  padding: var(--base-size-8, 8px);
-  padding-bottom: var(--base-size-16, 16px);
+  padding: var(--base-size-16, 16px);
+  box-sizing: border-box;
 }
 
 .xtermContainer {
   width: 100%;
   height: 100%;
   box-sizing: border-box;
+  background: var(--term-bg, #181b22);
+  transition: opacity 0.3s ease;
 }
 
 /* ghostty-web / xterm.js container overrides */
 .xtermContainer :global(.xterm) {
   width: 100%;
   height: 100%;
-  padding: 12px;
+  background: var(--term-bg, #181b22);
+}
+
+.xtermContainer :global(.xterm) canvas {
+  background: var(--term-bg, #181b22);
 }
 
 /* Hide the native caret on ghostty-web's helper textarea —
@@ -92,10 +104,28 @@
   color: #8b949e;
   font-size: 13px;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  background: #0d1117;
+  background: var(--term-bg, #181b22);
   z-index: 1;
 }
 
+.spinner {
+  width: 40px;
+  height: 40px;
+  background-color: #333;
+  border-radius: 100%;
+  animation: sk-scaleout 1.0s infinite ease-in-out;
+}
+
+@keyframes sk-scaleout {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1.0);
+    opacity: 0;
+  }
+}
+
 .error {
   position: absolute;
   inset: 0;
@@ -105,7 +135,7 @@
   color: #f85149;
   font-size: 13px;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  background: #0d1117;
+  background: var(--term-bg, #181b22);
   z-index: 1;
 }
 
@@ -114,8 +144,8 @@
   font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', Menlo, monospace;
   font-size: 16px;
   position: absolute;
-  top: 12px;
-  left: 16px;
+  top: 8px;
+  left: 8px;
   pointer-events: none;
   user-select: none;
 }
@@ -174,6 +204,85 @@
   }
 }
 
+/* ── Resource-limited overlay ── */
+
+.resourceIcon {
+  font-size: 24px;
+  margin-bottom: 4px;
+}
+
+.resourceTitle {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 14px;
+  font-weight: 600;
+  color: #d29922;
+}
+
+.resourceMessage {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 12px;
+  color: #8b949e;
+  text-align: center;
+  line-height: 1.5;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.resourceCounts {
+  font-family: 'SF Mono', 'Fira Code', Menlo, monospace;
+  font-size: 11px;
+  color: #6e7681;
+}
+
+.resourceActions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  margin-top: 8px;
+}
+
+.resourceBtn {
+  all: unset;
+  cursor: pointer;
+  padding: 6px 16px;
+  border-radius: 6px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  color: #ffffff;
+  background: #da3633;
+  transition: background 100ms;
+}
+
+.resourceBtn:hover {
+  background: #f85149;
+}
+
+.resourceBtnSecondary {
+  all: unset;
+  cursor: pointer;
+  padding: 4px 12px;
+  border-radius: 6px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 12px;
+  color: #8b949e;
+  transition: color 100ms;
+}
+
+.resourceBtnSecondary:hover {
+  color: #e6edf3;
+}
+
+.resourceMuted {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 11px;
+  color: #6e7681;
+  text-align: center;
+  max-width: 240px;
+}
+
 /* Fullscreen expand */
 
 /* Drag hint tooltip — appears when user tries to drag the terminal body */
@@ -211,7 +320,7 @@
   position: fixed;
   inset: 0;
   z-index: 100000;
-  background: #0d1117;
+  background: var(--term-bg, #0d1117);
   display: flex;
   flex-direction: column;
   animation: expandFadeIn 0.15s ease;
@@ -227,7 +336,7 @@
   align-items: center;
   height: 40px;
   padding: 0 12px;
-  background: #161b22;
+  background: #21262d;
   border-bottom: 1px solid #30363d;
   flex-shrink: 0;
 }
@@ -284,7 +393,7 @@
   flex: 1;
   min-width: 0;
   overflow: hidden;
-  background: #0d1117;
+  background: var(--term-bg, #0d1117);
 }
 
 .expandTerminal :global(.xterm) {

package/src/canvas/widgets/TilesWidget.jsx

@@ -0,0 +1,302 @@
+import { useState, useCallback, useRef, useEffect, forwardRef, useImperativeHandle, useMemo } from 'react'
+import WidgetWrapper from './WidgetWrapper.jsx'
+import ResizeHandle from './ResizeHandle.jsx'
+import { readProp } from './widgetProps.js'
+import { schemas } from './widgetConfig.js'
+import { TILE_POOL } from './tilePool.js'
+import styles from './TilesWidget.module.css'
+
+const tilesSchema = schemas['tiles']
+const LS_PREFIX = 'storyboard-tiles-'
+
+/** Read persisted state from localStorage for a given widget ID. */
+function loadFromStorage(widgetId) {
+  try {
+    const raw = localStorage.getItem(`${LS_PREFIX}${widgetId}`)
+    return raw ? JSON.parse(raw) : null
+  } catch { return null }
+}
+
+/** Save state to localStorage for a given widget ID. */
+function saveToStorage(widgetId, state) {
+  try {
+    localStorage.setItem(`${LS_PREFIX}${widgetId}`, JSON.stringify(state))
+  } catch { /* quota exceeded — silently ignore */ }
+}
+
+/**
+ * Canvas widget that arranges square images in an interactive tile grid.
+ *
+ * Uses a static pool of tile images bundled with the widget (see tilePool.js).
+ * In production, state is persisted to localStorage since canvas editing is read-only.
+ *
+ * Features:
+ * - Configurable columns × rows (toolbar actions in dev, inline buttons in prod)
+ * - Drag & drop reorder
+ * - Click-select + Cmd+C / Cmd+V to copy-paste tiles
+ * - Randomize action
+ * - Tile composition persisted as indexes into TILE_POOL
+ */
+const TilesWidget = forwardRef(function TilesWidget({ id, props, onUpdate, resizable }, ref) {
+  const containerRef = useRef(null)
+  const isProd = !onUpdate
+
+  // In prod, load initial state from localStorage
+  const [localState, setLocalState] = useState(() => loadFromStorage(id))
+
+  const columns = (isProd ? localState?.columns : null) ?? (readProp(props, 'columns', tilesSchema) || 3)
+  const rows = (isProd ? localState?.rows : null) ?? (readProp(props, 'rows', tilesSchema) || 3)
+  const tileSize = readProp(props, 'tileSize', tilesSchema) || 80
+  const width = readProp(props, 'width', tilesSchema)
+  const height = readProp(props, 'height', tilesSchema)
+  const savedTiles = (isProd ? localState?.tiles : null) ?? readProp(props, 'tiles', tilesSchema)
+
+  // Local state for interactions
+  const [selectedIdx, setSelectedIdx] = useState(null)
+  const [copiedSrc, setCopiedSrc] = useState(null)
+  const [dragIdx, setDragIdx] = useState(null)
+  const [dragOverIdx, setDragOverIdx] = useState(null)
+
+  // Clear selection when exiting interact mode (dev only — prod has no gate)
+  useEffect(() => {
+    if (isProd) return
+    const el = containerRef.current
+    if (!el) return
+    const observer = new MutationObserver(() => {
+      const slot = el.closest('[data-widget-interacting]')
+      if (!slot) {
+        setSelectedIdx(null)
+        setCopiedSrc(null)
+      }
+    })
+    const slot = el.closest('[data-widget-selected]')?.parentElement
+    if (slot) observer.observe(slot, { attributes: true, attributeFilter: ['data-widget-interacting'] })
+    return () => observer.disconnect()
+  }, [isProd])
+
+  // Build effective tile list from saved indexes or default pool
+  const tiles = useMemo(() => {
+    if (savedTiles && savedTiles.length > 0) {
+      return savedTiles.map((idx) =>
+        typeof idx === 'number' ? (TILE_POOL[idx] ?? TILE_POOL[0]) : TILE_POOL[0]
+      )
+    }
+    return [...TILE_POOL]
+  }, [savedTiles])
+
+  // Total visible slots
+  const slotCount = columns * rows
+  const visibleTiles = tiles.slice(0, slotCount)
+
+  // Pad with nulls if we have fewer images than slots
+  const grid = useMemo(() => {
+    const g = [...visibleTiles]
+    while (g.length < slotCount) g.push(null)
+    return g
+  }, [visibleTiles, slotCount])
+
+  // Persist — writes to onUpdate (dev) or localStorage (prod)
+  const persist = useCallback((patch) => {
+    if (isProd) {
+      setLocalState((prev) => {
+        const next = { ...prev, ...patch }
+        saveToStorage(id, next)
+        return next
+      })
+    } else {
+      onUpdate?.(patch)
+    }
+  }, [isProd, id, onUpdate])
+
+  const persistTiles = useCallback((srcs) => {
+    const indexes = srcs.map((src) => {
+      const idx = TILE_POOL.indexOf(src)
+      return idx >= 0 ? idx : 0
+    })
+    persist({ tiles: indexes })
+  }, [persist])
+
+  // ── Actions (shared by toolbar handleAction and inline buttons) ──
+  const addColumn = useCallback(() => persist({ columns: columns + 1 }), [columns, persist])
+  const removeColumn = useCallback(() => { if (columns > 1) persist({ columns: columns - 1 }) }, [columns, persist])
+  const addRow = useCallback(() => persist({ rows: rows + 1 }), [rows, persist])
+  const removeRow = useCallback(() => { if (rows > 1) persist({ rows: rows - 1 }) }, [rows, persist])
+  const randomize = useCallback(() => {
+    const total = columns * rows
+    const filled = Array.from({ length: total }, () =>
+      TILE_POOL[Math.floor(Math.random() * TILE_POOL.length)]
+    )
+    persistTiles(filled)
+  }, [columns, rows, persistTiles])
+
+  // ── Keyboard: Cmd+C / Cmd+V ──
+  useEffect(() => {
+    function handleKeyDown(e) {
+      const el = containerRef.current
+      if (!el) return
+      // In dev, only respond when interacting; in prod, always respond when focused
+      if (!isProd) {
+        const slot = el.closest('[data-widget-interacting]')
+        if (!slot) return
+      }
+
+      if (!e.metaKey && !e.ctrlKey) return
+      if (e.key === 'c' && selectedIdx !== null && grid[selectedIdx]) {
+        e.stopPropagation()
+        e.preventDefault()
+        setCopiedSrc(grid[selectedIdx])
+      }
+      if (e.key === 'v' && selectedIdx !== null && copiedSrc) {
+        e.stopPropagation()
+        e.preventDefault()
+        const newGrid = [...grid]
+        newGrid[selectedIdx] = copiedSrc
+        persistTiles(newGrid.filter(Boolean))
+        setCopiedSrc(null)
+      }
+    }
+    window.addEventListener('keydown', handleKeyDown, true)
+    return () => window.removeEventListener('keydown', handleKeyDown, true)
+  }, [selectedIdx, copiedSrc, grid, persistTiles, isProd])
+
+  // ── Drag & drop handlers ──
+  const handleDragStart = useCallback((e, idx) => {
+    e.stopPropagation()
+    setDragIdx(idx)
+    e.dataTransfer.effectAllowed = 'move'
+    e.dataTransfer.setData('text/plain', String(idx))
+  }, [])
+
+  const handleDragOver = useCallback((e, idx) => {
+    e.preventDefault()
+    e.stopPropagation()
+    e.dataTransfer.dropEffect = 'move'
+    setDragOverIdx(idx)
+  }, [])
+
+  const handleDragLeave = useCallback(() => {
+    setDragOverIdx(null)
+  }, [])
+
+  const handleDrop = useCallback((e, toIdx) => {
+    e.preventDefault()
+    e.stopPropagation()
+    const fromIdx = dragIdx
+    setDragIdx(null)
+    setDragOverIdx(null)
+    if (fromIdx === null || fromIdx === toIdx) return
+    const newGrid = [...grid]
+    ;[newGrid[fromIdx], newGrid[toIdx]] = [newGrid[toIdx], newGrid[fromIdx]]
+    persistTiles(newGrid.filter(Boolean))
+  }, [dragIdx, grid, persistTiles])
+
+  const handleDragEnd = useCallback(() => {
+    setDragIdx(null)
+    setDragOverIdx(null)
+  }, [])
+
+  // ── Tile click ──
+  const handleTileClick = useCallback((e, idx) => {
+    e.stopPropagation()
+    setSelectedIdx((prev) => (prev === idx ? null : idx))
+  }, [])
+
+  const handleBackgroundClick = useCallback(() => {
+    setSelectedIdx(null)
+  }, [])
+
+  // ── Widget actions (dev toolbar) ──
+  useImperativeHandle(ref, () => ({
+    handleAction(actionId) {
+      if (actionId === 'add-column') { addColumn(); return true }
+      if (actionId === 'remove-column') { removeColumn(); return true }
+      if (actionId === 'add-row') { addRow(); return true }
+      if (actionId === 'remove-row') { removeRow(); return true }
+      if (actionId === 'randomize') { randomize(); return true }
+    },
+  }), [addColumn, removeColumn, addRow, removeRow, randomize])
+
+  const gridStyle = {
+    gridTemplateColumns: `repeat(${columns}, ${tileSize}px)`,
+    gridTemplateRows: `repeat(${rows}, ${tileSize}px)`,
+    gap: '2px',
+  }
+
+  return (
+    <WidgetWrapper>
+      <div
+        ref={containerRef}
+        className={styles.container}
+        onClick={handleBackgroundClick}
+        data-tiles-widget
+      >
+        {isProd && (
+          <div className={styles.toolbar}>
+            <button className={styles.toolbarBtn} onClick={(e) => { e.stopPropagation(); randomize() }} title="Randomize">🔀</button>
+            <span className={styles.toolbarSep} />
+            <button className={styles.toolbarBtn} onClick={(e) => { e.stopPropagation(); removeColumn() }} title="Remove column" disabled={columns <= 1}>−</button>
+            <span className={styles.toolbarLabel}>{columns}×{rows}</span>
+            <button className={styles.toolbarBtn} onClick={(e) => { e.stopPropagation(); addColumn() }} title="Add column">+</button>
+            <span className={styles.toolbarSep} />
+            <button className={styles.toolbarBtn} onClick={(e) => { e.stopPropagation(); removeRow() }} title="Remove row" disabled={rows <= 1}>↑</button>
+            <button className={styles.toolbarBtn} onClick={(e) => { e.stopPropagation(); addRow() }} title="Add row">↓</button>
+          </div>
+        )}
+        <div className={styles.grid} style={gridStyle}>
+          {grid.map((src, idx) => (
+            <div
+              key={`${idx}-${src || 'empty'}`}
+              className={[
+                styles.tile,
+                selectedIdx === idx ? styles.selected : '',
+                copiedSrc && selectedIdx === idx ? styles.pasteTarget : '',
+                dragOverIdx === idx ? styles.dragOver : '',
+                dragIdx === idx ? styles.dragging : '',
+              ].filter(Boolean).join(' ')}
+              draggable={!!src}
+              onDragStart={(e) => handleDragStart(e, idx)}
+              onDragOver={(e) => handleDragOver(e, idx)}
+              onDragLeave={handleDragLeave}
+              onDrop={(e) => handleDrop(e, idx)}
+              onDragEnd={handleDragEnd}
+              onClick={(e) => handleTileClick(e, idx)}
+              onMouseDown={(e) => e.stopPropagation()}
+              onPointerDown={(e) => e.stopPropagation()}
+              style={{ width: tileSize, height: tileSize }}
+            >
+              {src ? (
+                <img
+                  src={src}
+                  alt=""
+                  className={styles.tileImage}
+                  draggable={false}
+                />
+              ) : (
+                <span className={styles.emptyTile} />
+              )}
+              {copiedSrc && selectedIdx === idx && (
+                <span className={styles.pasteHint}>⌘V</span>
+              )}
+            </div>
+          ))}
+        </div>
+        {selectedIdx !== null && grid[selectedIdx] && !copiedSrc && (
+          <div className={styles.hint}>⌘C to copy · click another tile · ⌘V to paste</div>
+        )}
+        {copiedSrc && selectedIdx !== null && (
+          <div className={styles.hint}>⌘V to replace this tile</div>
+        )}
+        {resizable && (
+          <ResizeHandle
+            targetRef={containerRef}
+            minWidth={200}
+            minHeight={100}
+            onResize={(w, h) => onUpdate?.({ width: w, height: h })}
+          />
+        )}
+      </div>
+    </WidgetWrapper>
+  )
+})
+
+export default TilesWidget

package/src/canvas/widgets/TilesWidget.module.css

@@ -0,0 +1,133 @@
+.container {
+  padding: 8px;
+  user-select: none;
+  cursor: default;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 0 8px;
+}
+
+.toolbarBtn {
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  font-size: 14px;
+  cursor: pointer;
+  color: var(--fgColor-default, #1f2328);
+  background: var(--bgColor-muted, #f6f8fa);
+  transition: background 0.12s ease;
+}
+
+.toolbarBtn:hover {
+  background: var(--bgColor-neutral-muted, #d0d7de);
+}
+
+.toolbarBtn:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
+.toolbarLabel {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--fgColor-muted, #656d76);
+  min-width: 32px;
+  text-align: center;
+}
+
+.toolbarSep {
+  width: 1px;
+  height: 16px;
+  background: var(--borderColor-muted, #d0d7de);
+  margin: 0 4px;
+}
+
+.grid {
+  display: grid;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.tile {
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  border: 2px solid transparent;
+  border-radius: 4px;
+  transition: border-color 0.12s ease, opacity 0.15s ease, transform 0.12s ease;
+  background: var(--bgColor-muted, #f6f8fa);
+}
+
+.tile:hover {
+  border-color: var(--borderColor-accent-emphasis, #0969da);
+}
+
+.selected {
+  border-color: var(--fgColor-accent, #0969da);
+  box-shadow: 0 0 0 2px var(--fgColor-accent, #0969da);
+}
+
+.pasteTarget {
+  border-color: var(--fgColor-success, #1a7f37);
+  box-shadow: 0 0 0 2px var(--fgColor-success, #1a7f37);
+  animation: pulse 1s infinite;
+}
+
+.dragOver {
+  border-color: var(--fgColor-accent, #0969da);
+  background: var(--bgColor-accent-muted, #ddf4ff);
+  transform: scale(1.04);
+}
+
+.dragging {
+  opacity: 0.4;
+}
+
+.tileImage {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  pointer-events: none;
+}
+
+.emptyTile {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: var(--bgColor-muted, #f6f8fa);
+}
+
+.pasteHint {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.45);
+  color: white;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  pointer-events: none;
+}
+
+.hint {
+  padding: 6px 0 2px;
+  text-align: center;
+  font-size: 11px;
+  color: var(--fgColor-muted, #656d76);
+}
+
+@keyframes pulse {
+  0%, 100% { box-shadow: 0 0 0 2px var(--fgColor-success, #1a7f37); }
+  50% { box-shadow: 0 0 0 4px var(--fgColor-success, #1a7f37); }
+}