@dfosco/storyboard-react 4.1.0 → 4.2.0-beta.0

package/src/canvas/widgets/MarkdownBlock.jsx

@@ -68,6 +68,7 @@ export default function MarkdownBlock({ props, onUpdate, resizable }) {
   const content = readProp(props, 'content', markdownSchema)
   const width = readProp(props, 'width', markdownSchema)
   const height = props?.height
+  const collapsed = !!props?.collapsed
   const canEdit = typeof onUpdate === 'function'
   const [editing, setEditing] = useState(false)
   const editingActive = canEdit && editing
@@ -121,7 +122,14 @@ export default function MarkdownBlock({ props, onUpdate, resizable }) {
         setEditHeight(blockRef.current.offsetHeight)
       }
       if (textareaRef.current) {
-        textareaRef.current.focus()
+        // Place cursor at end and prevent scroll jump to top
+        const len = textareaRef.current.value.length
+        textareaRef.current.setSelectionRange(len, len)
+        textareaRef.current.focus({ preventScroll: true })
+        // Restore the block's scroll position (captured before React swapped the DOM)
+        if (blockRef.current) {
+          blockRef.current.scrollTop = blockRef.current.dataset.scrollTop || 0
+        }
       }
     } else {
       setEditHeight(null)
@@ -132,15 +140,19 @@ export default function MarkdownBlock({ props, onUpdate, resizable }) {
     <WidgetWrapper>
       <div
         ref={blockRef}
-        className={styles.block}
-        style={{ width, ...(height ? { height, overflow: 'auto' } : {}), minHeight: editHeight || undefined }}
+        className={`${styles.block}${collapsed && !editingActive ? ` ${styles.blockCollapsed}` : ''}`}
+        style={{
+          width,
+          ...(height ? { height, overflow: 'auto' } : {}),
+          ...(editHeight ? { height: editHeight, display: 'flex', flexDirection: 'column' } : {}),
+        }}
       >
         {editingActive ? (
           <textarea
             ref={textareaRef}
             className={styles.editor}
             data-canvas-allow-text-selection
-            style={{ minHeight: editHeight ? editHeight - 2 : undefined }}
+            style={{ flex: 1 }}
             value={content}
             onChange={handleContentChange}
             onBlur={() => setEditing(false)}
@@ -158,10 +170,19 @@ export default function MarkdownBlock({ props, onUpdate, resizable }) {
             data-canvas-allow-text-selection={!canEdit ? '' : undefined}
             onClick={!canEdit ? (e) => e.stopPropagation() : undefined}
             onCopy={!canEdit ? handleReadOnlyCopy : undefined}
-            onDoubleClick={canEdit ? () => setEditing(true) : undefined}
+            onDoubleClick={canEdit ? () => {
+              // Save scroll position before switching to editor
+              if (blockRef.current) blockRef.current.dataset.scrollTop = blockRef.current.scrollTop
+              setEditing(true)
+            } : undefined}
             role={canEdit ? 'button' : undefined}
             tabIndex={canEdit ? 0 : undefined}
-            onKeyDown={canEdit ? (e) => { if (e.key === 'Enter') setEditing(true) } : undefined}
+            onKeyDown={canEdit ? (e) => {
+              if (e.key === 'Enter') {
+                if (blockRef.current) blockRef.current.dataset.scrollTop = blockRef.current.scrollTop
+                setEditing(true)
+              }
+            } : undefined}
             dangerouslySetInnerHTML={{
               __html: renderedHtml || (canEdit
                 ? '<p class="placeholder">Double-click to edit…</p>'

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

@@ -10,6 +10,16 @@
   font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
 }
 
+.blockCollapsed {
+  max-height: 360px;
+  overflow: hidden;
+}
+
+.blockCollapsed .preview {
+  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
+  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
+}
+
 .preview {
   padding: 16px 20px;
   font-size: 14px;
@@ -206,7 +216,7 @@
   width: 100%;
   height: 100%;
   box-sizing: border-box;
-  min-height: 120px;
+
   padding: 16px 20px;
   border: none;
   outline: none;

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

@@ -12,6 +12,8 @@
   font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
   overflow: auto;
   position: relative;
+  display: flex;
+  flex-direction: column;
 }
 
 :global([data-sb-canvas-theme^='dark']) .sticky {
@@ -35,6 +37,7 @@
   word-break: break-word;
   cursor: text;
   min-height: 60px;
+  flex: 1;
 }
 
 :global([data-sb-canvas-theme^='dark']) .text {

package/src/canvas/widgets/TerminalWidget.jsx

@@ -0,0 +1,274 @@
+import { useRef, useEffect, useCallback, useState } from 'react'
+import { readProp } from './widgetProps.js'
+import { schemas } from './widgetProps.js'
+import { getTerminalConfig } from '@dfosco/storyboard-core'
+import ResizeHandle from './ResizeHandle.jsx'
+import styles from './TerminalWidget.module.css'
+import overlayStyles from './embedOverlay.module.css'
+
+const terminalSchema = schemas['terminal']
+
+/**
+ * Lazy-load ghostty-web to avoid bundling WASM in prod.
+ */
+let ghosttyPromise = null
+function loadGhostty() {
+  if (!ghosttyPromise) {
+    ghosttyPromise = import('ghostty-web').then(async (mod) => {
+      if (mod.init) await mod.init()
+      return mod
+    })
+  }
+  return ghosttyPromise
+}
+
+/**
+ * Build the WebSocket URL for the terminal backend.
+ * Includes the base path (e.g. /branch--4.2.0/) so the proxy routes correctly.
+ * Passes canvasId as a query parameter for session scoping.
+ */
+function getWsUrl(sessionId, prettyName) {
+  const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:'
+  const base = (typeof import.meta !== 'undefined' && import.meta.env?.BASE_URL) || '/'
+  const baseClean = base.endsWith('/') ? base : base + '/'
+  const canvasId = window.__storyboardCanvasBridgeState?.canvasId || 'unknown'
+  let url = `${protocol}//${location.host}${baseClean}_storyboard/terminal/${sessionId}?canvas=${encodeURIComponent(canvasId)}`
+  if (prettyName) url += `&name=${encodeURIComponent(prettyName)}`
+  return url
+}
+
+/**
+ * Calculate terminal cols/rows from pixel dimensions.
+ */
+function calcDimensions(widthPx, heightPx) {
+  // Approximate character cell size for 13px monospace
+  const cellWidth = 7.8
+  const cellHeight = 17
+  const padding = 24 // 12px each side
+  const cols = Math.max(10, Math.floor((widthPx - padding) / cellWidth))
+  const rows = Math.max(4, Math.floor((heightPx - padding) / cellHeight))
+  return { cols, rows }
+}
+
+const DEFAULT_THEME = {
+  background: '#0d1117',
+  foreground: '#e6edf3',
+  cursor: '#e6edf3',
+  selectionBackground: '#264f78',
+  black: '#484f58',
+  red: '#ff7b72',
+  green: '#3fb950',
+  yellow: '#d29922',
+  blue: '#58a6ff',
+  magenta: '#bc8cff',
+  cyan: '#39d2c0',
+  white: '#b1bac4',
+  brightBlack: '#6e7681',
+  brightRed: '#ffa198',
+  brightGreen: '#56d364',
+  brightYellow: '#e3b341',
+  brightBlue: '#79c0ff',
+  brightMagenta: '#d2a8ff',
+  brightCyan: '#56d4dd',
+  brightWhite: '#f0f6fc',
+}
+
+export default function TerminalWidget({ id, props, onUpdate, resizable }) {
+  const width = readProp(props, 'width', terminalSchema)
+  const height = readProp(props, 'height', terminalSchema)
+  const prettyName = props?.prettyName || null
+
+  const containerRef = useRef(null)
+  const termRef = useRef(null)
+  const terminalRef = useRef(null)
+  const wsRef = useRef(null)
+  const [ready, setReady] = useState(false)
+  const [error, setError] = useState(null)
+  const [sessionEnded, setSessionEnded] = useState(false)
+  const [connectAttempt, setConnectAttempt] = useState(0)
+
+  const handleResize = useCallback((w, h) => {
+    onUpdate?.({ width: w, height: h })
+  }, [onUpdate])
+
+  // Initialize terminal
+  useEffect(() => {
+    if (!containerRef.current) return
+
+    let disposed = false
+    let term = null
+    let ws = null
+
+    async function setup() {
+      try {
+        const ghostty = await loadGhostty()
+        if (disposed) return
+
+        const dims = calcDimensions(width, height)
+        const cfg = getTerminalConfig()
+
+        term = new ghostty.Terminal({
+          fontSize: cfg.fontSize ?? 13,
+          fontFamily: cfg.fontFamily ?? "'Ghostty', 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace",
+          cursorBlink: true,
+          cursorStyle: 'bar',
+          cols: dims.cols,
+          rows: dims.rows,
+          theme: { ...DEFAULT_THEME, ...cfg.theme },
+        })
+
+        term.open(containerRef.current)
+        termRef.current = term
+
+        // Connect WebSocket
+        const url = getWsUrl(id, prettyName)
+        ws = new WebSocket(url)
+        wsRef.current = ws
+
+        ws.onopen = () => {
+          if (disposed) return
+          setReady(true)
+          ws.send(JSON.stringify({ type: 'resize', cols: dims.cols, rows: dims.rows }))
+        }
+
+        ws.onmessage = (e) => {
+          if (disposed) return
+          const data = typeof e.data === 'string' ? e.data : null
+          // Intercept JSON control messages from the server
+          if (data && data.startsWith('{')) {
+            try {
+              const msg = JSON.parse(data)
+              if (msg.type === 'session-info' || msg.type === 'conflict' || msg.type === 'detached') {
+                // Control message — don't render to terminal
+                return
+              }
+            } catch {
+              // Not valid JSON — pass through as terminal data
+            }
+          }
+          term.write(typeof e.data === 'string' ? e.data : new Uint8Array(e.data))
+        }
+
+        ws.onclose = () => {
+          if (disposed) return
+          setReady(false)
+          setSessionEnded(true)
+        }
+
+        ws.onerror = () => {
+          if (disposed) return
+          setReady(false)
+          setSessionEnded(true)
+        }
+
+        // Terminal input → WebSocket
+        term.onData((data) => {
+          if (ws.readyState === WebSocket.OPEN) {
+            ws.send(data)
+          }
+        })
+      } catch (err) {
+        if (!disposed) setError(err.message || 'Failed to load terminal')
+      }
+    }
+
+    setup()
+
+    return () => {
+      disposed = true
+      if (ws && ws.readyState <= WebSocket.OPEN) ws.close()
+      if (term) term.dispose()
+      termRef.current = null
+      wsRef.current = null
+    }
+  }, [id, connectAttempt])
+
+  // Resize terminal on dimension changes
+  useEffect(() => {
+    if (!termRef.current) return
+    const timer = setTimeout(() => {
+      const dims = calcDimensions(width, height)
+      termRef.current?.resize?.(dims.cols, dims.rows)
+      if (wsRef.current?.readyState === WebSocket.OPEN) {
+        wsRef.current.send(JSON.stringify({ type: 'resize', cols: dims.cols, rows: dims.rows }))
+      }
+    }, 50)
+    return () => clearTimeout(timer)
+  }, [width, height])
+
+  const handleClick = useCallback(() => {
+    if (sessionEnded) return
+    termRef.current?.focus()
+  }, [sessionEnded])
+
+  const [waking, setWaking] = useState(false)
+
+  const handleStartSession = useCallback(() => {
+    setWaking(true)
+    setTimeout(() => {
+      setWaking(false)
+      setSessionEnded(false)
+      setError(null)
+      setConnectAttempt(c => c + 1)
+    }, 1500)
+  }, [])
+
+  // Show interact gate when session is ready but not interacting
+
+  const titleLabel = `terminal · ${prettyName || '...'}`
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.titleBar}>{titleLabel}</div>
+      <div
+        ref={terminalRef}
+        className={styles.terminal}
+        style={{
+          ...(typeof width === 'number' ? { width: `${width}px` } : undefined),
+          ...(typeof height === 'number' ? { height: `${height}px` } : undefined),
+        }}
+        onClick={handleClick}
+      >
+        {error && !sessionEnded && (
+          <div className={styles.error}>
+            <span>⚠ {error}</span>
+          </div>
+        )}
+        <div ref={containerRef} className={styles.xtermContainer} />
+        {sessionEnded && (
+          <div
+            className={overlayStyles.interactOverlay}
+            style={{ backgroundColor: '#0d1117', flexDirection: 'column', gap: 0 }}
+            onClick={handleStartSession}
+            role="button"
+            tabIndex={0}
+            aria-label="Start terminal session"
+            onKeyDown={(e) => { if (e.key === 'Enter') handleStartSession() }}
+          >
+            {!waking && (
+              <div className={styles.buddyZzz}>
+                <span className={styles.z1}>z</span>
+                <span className={styles.z2}>z</span>
+                <span className={styles.z3}>z</span>
+              </div>
+            )}
+            <span className={overlayStyles.interactHint}>
+              {waking ? 'Waking up...' : 'Start terminal session'}
+            </span>
+          </div>
+        )}
+        {!ready && !error && !sessionEnded && (
+          <div className={styles.loading}>Connecting…</div>
+        )}
+      </div>
+      {resizable && (
+        <ResizeHandle
+          targetRef={terminalRef}
+          onResize={handleResize}
+          minWidth={300}
+          minHeight={200}
+        />
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,158 @@
+.container {
+  position: relative;
+  padding-bottom: 0;
+  border-radius: var(--base-size-16, 16px);
+}
+
+/* Match selection outline border-radius to terminal's rounded corners */
+:global(.tc-drag-surface):has(.container) {
+  border-radius: 16px;
+}
+
+.titleBar {
+  position: absolute;
+  top: -28px;
+  left: 4px;
+  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;
+}
+
+[data-widget-selected] .titleBar {
+  color: var(--borderColor-accent-emphasis, #0969da);
+}
+
+.terminal {
+  position: relative;
+  border-radius: var(--base-size-16, 16px);
+  overflow: hidden;
+  background: #0d1117;
+  border: 1px solid var(--borderColor-default, #30363d);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24);
+  padding: 8px;
+}
+
+.xtermContainer {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+/* ghostty-web / xterm.js container overrides */
+.xtermContainer :global(.xterm) {
+  width: 100%;
+  height: 100%;
+  padding: 12px;
+}
+
+.xtermContainer :global(.xterm-viewport) {
+  overflow-y: auto;
+}
+
+.xtermContainer :global(.xterm-viewport::-webkit-scrollbar) {
+  width: 6px;
+}
+
+.xtermContainer :global(.xterm-viewport::-webkit-scrollbar-thumb) {
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 3px;
+}
+
+.xtermContainer :global(.xterm-viewport::-webkit-scrollbar-track) {
+  background: transparent;
+}
+
+.loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #8b949e;
+  font-size: 13px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  background: #0d1117;
+  z-index: 1;
+}
+
+.error {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #f85149;
+  font-size: 13px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  background: #0d1117;
+  z-index: 1;
+}
+
+.mutedPrompt {
+  color: #484f58;
+  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', Menlo, monospace;
+  font-size: 16px;
+  position: absolute;
+  top: 12px;
+  left: 16px;
+  pointer-events: none;
+  user-select: none;
+}
+
+/* ── Terminal Zzz Animation ── */
+
+.buddyZzz {
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+  margin-bottom: 16px;
+  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', Menlo, monospace;
+  pointer-events: none;
+  user-select: none;
+}
+
+.z1 {
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.6);
+  animation: zFloat 2.4s ease-in-out infinite;
+  animation-delay: 0s;
+  opacity: 0;
+}
+
+.z2 {
+  font-size: 22px;
+  color: rgba(255, 255, 255, 0.5);
+  animation: zFloat 2.4s ease-in-out infinite;
+  animation-delay: 0.8s;
+  opacity: 0;
+}
+
+.z3 {
+  font-size: 28px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.4);
+  animation: zFloat 2.4s ease-in-out infinite;
+  animation-delay: 1.6s;
+  opacity: 0;
+}
+
+@keyframes zFloat {
+  0% {
+    opacity: 0;
+    transform: translateY(0);
+  }
+  15% {
+    opacity: 1;
+  }
+  70% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-24px);
+  }
+}

package/src/canvas/widgets/WidgetChrome.jsx

@@ -1,7 +1,9 @@
 import { useState, useCallback, useRef, useEffect, useSyncExternalStore } from 'react'
 import { Tooltip } from '@primer/react'
 import { EyeIcon as OcticonEye, EyeClosedIcon as OcticonEyeClosed, CodeIcon as OcticonCode, UnwrapIcon as OcticonUnwrap, ImageIcon as OcticonImage, UnfoldIcon as OcticonUnfold, FoldIcon as OcticonFold } from '@primer/octicons-react'
+import { getConnectorConfig, getInteractGate } from './widgetConfig.js'
 import styles from './WidgetChrome.module.css'
+import overlayStyles from './embedOverlay.module.css'
 
 const STICKY_NOTE_COLORS = {
   yellow: { bg: '#fff8c5', border: '#d4a72c', dot: '#e8c846' },
@@ -393,6 +395,7 @@ function ColorPickerFeature({ currentColor, options, onColorChange }) {
  */
 export default function WidgetChrome({
   widgetId,
+  widgetType,
   features = [],
   selected = false,
   multiSelected = false,
@@ -402,6 +405,7 @@ export default function WidgetChrome({
   onDeselect, // eslint-disable-line no-unused-vars
   onAction,
   onUpdate,
+  onConnectorDragStart,
   children,
   readOnly = false,
 }) {
@@ -452,6 +456,55 @@ export default function WidgetChrome({
   const showFeatures = showToolbar && !multiSelected
   const menuFeatures = features.filter((f) => f.menu)
 
+  // Interact gate — declarative overlay from widgets.config.json
+  const gate = widgetType ? getInteractGate(widgetType) : { enabled: false }
+  const [interacting, setInteracting] = useState(false)
+  const slotRef = useRef(null)
+
+  // Exit interact mode on click outside or double-Escape
+  const lastEscapeRef = useRef(0)
+  useEffect(() => {
+    if (!gate.enabled || !interacting) return
+    const handleMouseDown = (e) => {
+      if (slotRef.current && !slotRef.current.contains(e.target)) {
+        setInteracting(false)
+      }
+    }
+    const handleKeyDown = (e) => {
+      if (e.key === 'Escape') {
+        const now = Date.now()
+        if (now - lastEscapeRef.current < 500) {
+          // Double-Escape: exit interact mode but keep widget selected
+          e.stopPropagation()
+          e.preventDefault()
+          setInteracting(false)
+          lastEscapeRef.current = 0
+        } else {
+          // First Escape: let it pass to widget, record timestamp
+          lastEscapeRef.current = now
+        }
+      }
+    }
+    document.addEventListener('mousedown', handleMouseDown, true)
+    document.addEventListener('keydown', handleKeyDown, true)
+    return () => {
+      document.removeEventListener('mousedown', handleMouseDown, true)
+      document.removeEventListener('keydown', handleKeyDown, true)
+    }
+  }, [gate.enabled, interacting])
+
+  // Exit interact mode when deselected
+  useEffect(() => {
+    if (!selected && !hovered && interacting) setInteracting(false)
+  }, [selected, hovered, interacting])
+
+  const handleGateClick = useCallback((e) => {
+    e.stopPropagation()
+    setInteracting(true)
+    // Also trigger selection so the widget gets selected
+    onSelect?.()
+  }, [onSelect])
+
   return (
     <div
       className={styles.chromeContainer}
@@ -460,9 +513,41 @@ export default function WidgetChrome({
       onMouseEnter={(readOnly && !hasFeatures) ? undefined : handleMouseEnter}
       onMouseLeave={(readOnly && !hasFeatures) ? undefined : handleMouseLeave}
     >
-      <div className={`tc-drag-surface ${styles.widgetSlot} ${selected ? styles.widgetSlotSelected : ''} ${multiSelected ? styles.widgetSlotMultiSelected : ''}`} data-widget-selected={selected || undefined}>
+      <div ref={slotRef} className={`tc-drag-surface ${styles.widgetSlot} ${selected ? styles.widgetSlotSelected : ''} ${multiSelected ? styles.widgetSlotMultiSelected : ''}`} data-widget-selected={selected || undefined} data-widget-interacting={interacting || undefined}>
         {children}
+        {gate.enabled && !interacting && (
+          <div
+            className={overlayStyles.interactOverlay}
+            onClick={handleGateClick}
+            role="button"
+            tabIndex={0}
+            aria-label={gate.label}
+          >
+            <span className={overlayStyles.interactHint}>{gate.label}</span>
+          </div>
+        )}
       </div>
+      {!readOnly && onConnectorDragStart && (() => {
+        const connConfig = widgetType ? getConnectorConfig(widgetType) : null
+        return ['top', 'bottom', 'left', 'right']
+          .filter((a) => !connConfig || connConfig.anchors[a] !== 'unavailable')
+          .map((anchor) => {
+            const disabled = connConfig?.anchors[anchor] === 'disabled'
+            return (
+              <div
+                key={anchor}
+                className={`${styles.anchorPort} ${styles[`anchorPort${anchor[0].toUpperCase()}${anchor.slice(1)}`]} ${disabled ? styles.anchorPortDisabled : ''}`}
+                onPointerDown={disabled ? undefined : (e) => {
+                  e.stopPropagation()
+                  e.nativeEvent?.stopImmediatePropagation?.()
+                  e.preventDefault()
+                  onConnectorDragStart(widgetId, anchor, e)
+                }}
+                data-anchor={anchor}
+              />
+            )
+          })
+      })()}
       <div
         className={styles.toolbar}
       >