@dfosco/storyboard 0.5.0-alpha.0

package/src/internals/canvas/widgets/FigmaEmbed.jsx

@@ -0,0 +1,296 @@
+import { forwardRef, useImperativeHandle, useMemo, useCallback, useState, useEffect, useRef } from 'react'
+import WidgetWrapper from './WidgetWrapper.jsx'
+import { readProp } from './widgetProps.js'
+import { schemas } from './widgetConfig.js'
+import { toFigmaEmbedUrl, getFigmaTitle, getFigmaType, isFigmaUrl } from './figmaUrl.js'
+import { useIframeDevLogs } from './iframeDevLogs.js'
+import { findAllConnectedSplitTargets, getSplitPaneLabel, buildPaneForWidget, buildSplitLayout } from './expandUtils.js'
+import ExpandedPane from './ExpandedPane.jsx'
+import styles from './FigmaEmbed.module.css'
+import overlayStyles from './embedOverlay.module.css'
+
+const figmaEmbedSchema = schemas['figma-embed']
+
+/** Feather-icons figma icon (monochrome, stroke-based) */
+function FigmaIcon({ size = 32, className }) {
+  return (
+    <svg
+      className={className}
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z" />
+      <path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z" />
+      <path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z" />
+      <path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z" />
+      <path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z" />
+    </svg>
+  )
+}
+
+/** Inline Figma logo SVG */
+function FigmaLogo() {
+  return (
+    <svg className={styles.figmaLogo} viewBox="0 0 38 57" fill="none" aria-hidden="true">
+      <path d="M19 28.5a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0z" fill="#1ABCFE" />
+      <path d="M0 47.5A9.5 9.5 0 0 1 9.5 38H19v9.5a9.5 9.5 0 1 1-19 0z" fill="#0ACF83" />
+      <path d="M19 0v19h9.5a9.5 9.5 0 1 0 0-19H19z" fill="#FF7262" />
+      <path d="M0 9.5A9.5 9.5 0 0 0 9.5 19H19V0H9.5A9.5 9.5 0 0 0 0 9.5z" fill="#F24E1E" />
+      <path d="M0 28.5A9.5 9.5 0 0 0 9.5 38H19V19H9.5A9.5 9.5 0 0 0 0 28.5z" fill="#A259FF" />
+    </svg>
+  )
+}
+
+const TYPE_LABELS = { board: 'Board', design: 'Design', proto: 'Prototype' }
+
+export default forwardRef(function FigmaEmbed({ id: widgetId, props, onUpdate, resizable }, ref) {
+  const url = readProp(props, 'url', figmaEmbedSchema)
+  const width = readProp(props, 'width', figmaEmbedSchema)
+  const height = readProp(props, 'height', figmaEmbedSchema)
+
+  const [interactive, setInteractive] = useState(false)
+  const [showIframe, setShowIframe] = useState(true)
+  const [expandMode, setExpandMode] = useState(null)
+  const expanded = expandMode !== null
+
+  const iframeRef = useRef(null)
+  const embedRef = useRef(null)
+  const inlineContainerRef = useRef(null)
+  const modalContainerRef = useRef(null)
+  const teardownTimerRef = useRef(null)
+  const exitSessionRef = useRef(0)
+
+  // Validate URL at render time — only embed known Figma URLs
+  const isValid = useMemo(() => isFigmaUrl(url), [url])
+  const embedUrl = useMemo(() => (isValid ? toFigmaEmbedUrl(url) : ''), [url, isValid])
+  const title = useMemo(() => (url ? getFigmaTitle(url) : 'Figma'), [url])
+  const figmaType = useMemo(() => getFigmaType(url), [url])
+  const typeLabel = figmaType ? TYPE_LABELS[figmaType] : 'Figma'
+
+  useIframeDevLogs({
+    widget: 'FigmaEmbed',
+    loaded: showIframe && Boolean(embedUrl),
+    src: embedUrl,
+  })
+
+  const enterInteractive = useCallback(() => {
+    exitSessionRef.current++
+    clearTimeout(teardownTimerRef.current)
+    setShowIframe(true)
+    setInteractive(true)
+  }, [])
+
+  useEffect(() => {
+    if (!interactive || expanded) return
+    function handlePointerDown(e) {
+      if (embedRef.current && !embedRef.current.contains(e.target)) {
+        setInteractive(false)
+        // Keep iframe alive for 5 min — Figma is slow to reload
+        const session = ++exitSessionRef.current
+        clearTimeout(teardownTimerRef.current)
+        teardownTimerRef.current = setTimeout(() => {
+          if (exitSessionRef.current !== session) return
+          setShowIframe(false)
+        }, 5 * 60 * 1000)
+      }
+    }
+    document.addEventListener('pointerdown', handlePointerDown)
+    return () => document.removeEventListener('pointerdown', handlePointerDown)
+  }, [interactive, expanded])
+
+  useEffect(() => () => clearTimeout(teardownTimerRef.current), [])
+
+  // Reparent iframe DOM node between inline container and modal.
+  // Uses moveBefore() (Chrome 133+) which preserves the iframe's
+  // browsing context — no reload. Falls back to appendChild.
+  useEffect(() => {
+    const iframe = iframeRef.current
+    if (!iframe) return
+
+    if (expanded && modalContainerRef.current) {
+      iframe._savedClassName = iframe.className
+      iframe._savedStyle = iframe.getAttribute('style') || ''
+      iframe.className = styles.expandIframe
+      iframe.removeAttribute('style')
+      const target = modalContainerRef.current
+      if (target.moveBefore) {
+        target.moveBefore(iframe, target.firstChild)
+      } else {
+        target.prepend(iframe)
+      }
+    } else if (!expanded && inlineContainerRef.current) {
+      if (iframe._savedClassName !== undefined) {
+        iframe.className = iframe._savedClassName
+        iframe.setAttribute('style', iframe._savedStyle)
+        delete iframe._savedClassName
+        delete iframe._savedStyle
+      }
+      const target = inlineContainerRef.current
+      if (target.moveBefore) {
+        target.moveBefore(iframe, null)
+      } else {
+        target.appendChild(iframe)
+      }
+    }
+  }, [expanded])
+
+  useImperativeHandle(ref, () => ({
+    handleAction(actionId) {
+      if (actionId === 'open-external') {
+        if (url) window.open(url, '_blank', 'noopener')
+      } else if (actionId === 'expand' || actionId === 'expand-single') {
+        setShowIframe(true)
+        setExpandMode('single')
+      } else if (actionId === 'split-screen') {
+        setShowIframe(true)
+        setExpandMode('split')
+      }
+    },
+  }), [url])
+
+  return (
+    <>
+    <WidgetWrapper>
+      <div ref={embedRef} className={styles.embed} style={{ width, height }}>
+        <div className={styles.header}>
+          <FigmaLogo />
+          <span className={styles.headerTitle}>{title}</span>
+        </div>
+        {embedUrl ? (
+          <>
+            {showIframe ? (
+              <div
+                ref={inlineContainerRef}
+                className={styles.iframeContainer}
+                style={expanded ? { visibility: 'hidden' } : undefined}
+              >
+                <iframe
+                  ref={iframeRef}
+                  src={embedUrl}
+                  className={styles.iframe}
+                  title={`Figma ${typeLabel}: ${title}`}
+                  allowFullScreen
+                  onLoad={(e) => e.target.blur()}
+                />
+              </div>
+            ) : (
+              <div className={styles.iframeContainer} />
+            )}
+            {!interactive && !expanded && (
+              <div
+                className={overlayStyles.interactOverlay}
+                onClick={(e) => {
+                  // Don't enter interactive mode for modifier clicks (shift/meta/ctrl for multi-select)
+                  if (e.shiftKey || e.metaKey || e.ctrlKey || e.altKey) return
+                  enterInteractive()
+                }}
+                role="button"
+                tabIndex={0}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault()
+                    e.stopPropagation()
+                    enterInteractive()
+                  }
+                }}
+                aria-label="Click to interact with Figma embed"
+              >
+                <span className={overlayStyles.interactHint}>Click to interact</span>
+              </div>
+            )}
+          </>
+        ) : (
+        <div className={styles.emptyState}>
+          <FigmaIcon size={32} className={styles.emptyIcon} />
+          <span className={styles.emptyLabel}>No Figma URL</span>
+        </div>
+        )}
+      </div>
+      {resizable && (
+        <div
+          className={styles.resizeHandle}
+          onMouseDown={(e) => {
+            e.stopPropagation()
+            e.preventDefault()
+            const startX = e.clientX
+            const startY = e.clientY
+            const startW = width
+            const startH = height
+            function onMove(ev) {
+              const newW = Math.max(200, startW + ev.clientX - startX)
+              const newH = Math.max(150, startH + ev.clientY - startY)
+              onUpdate?.({ width: newW, height: newH })
+            }
+            function onUp() {
+              document.removeEventListener('mousemove', onMove)
+              document.removeEventListener('mouseup', onUp)
+            }
+            document.addEventListener('mousemove', onMove)
+            document.addEventListener('mouseup', onUp)
+          }}
+          onPointerDown={(e) => e.stopPropagation()}
+        />
+      )}
+    </WidgetWrapper>
+    {expanded && !!embedUrl && (
+      <FigmaExpandPane
+        widgetId={widgetId}
+        modalContainerRef={modalContainerRef}
+        splitMode={expandMode === 'split'}
+        onClose={() => setExpandMode(null)}
+      />
+    )}
+    </>
+  )
+})
+
+/**
+ * Builds pane configs and renders ExpandedPane for an expanded Figma widget.
+ * The primary pane is an external pane that receives the iframe via reparenting.
+ */
+function FigmaExpandPane({ widgetId, modalContainerRef, splitMode, onClose }) {
+  const connectedWidgets = useMemo(
+    () => splitMode ? findAllConnectedSplitTargets(widgetId) : [],
+    [widgetId, splitMode],
+  )
+  const primaryWidget = useMemo(() => {
+    const bridge = window.__storyboardCanvasBridgeState
+    return bridge?.widgets?.find((w) => w.id === widgetId) || { id: widgetId, type: 'figma-embed', position: { x: 0, y: 0 }, props: {} }
+  }, [widgetId])
+
+  const buildPaneFn = useCallback((widget) => {
+    if (widget.id === widgetId) {
+      return {
+        id: widgetId,
+        label: getSplitPaneLabel(primaryWidget),
+        widgetType: 'figma-embed',
+        kind: 'external',
+        attach: (container) => {
+          modalContainerRef.current = container
+          return () => { modalContainerRef.current = null }
+        },
+      }
+    }
+    return buildPaneForWidget(widget)
+  }, [widgetId, primaryWidget, modalContainerRef])
+
+  const layout = useMemo(
+    () => buildSplitLayout(primaryWidget, connectedWidgets, buildPaneFn),
+    [primaryWidget, connectedWidgets, buildPaneFn],
+  )
+
+  return (
+    <ExpandedPane
+      initialLayout={layout}
+      variant={layout.flat().length <= 1 ? 'modal' : 'full'}
+      onClose={onClose}
+    />
+  )
+}

package/src/internals/canvas/widgets/FigmaEmbed.module.css

@@ -0,0 +1,222 @@
+.embed {
+  position: relative;
+  overflow: hidden;
+  background: var(--bgColor-default, #ffffff);
+  border: 3px solid var(--borderColor-default, #d0d7de);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--fgColor-muted, #656d76);
+  background: var(--bgColor-muted, #f6f8fa);
+  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  user-select: none;
+}
+
+.figmaLogo {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+
+.headerTitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.iframeContainer {
+  width: 100%;
+  height: calc(100% - 10px); /* subtract header height */
+  overflow: hidden;
+}
+
+.iframe {
+  width: 100%;
+  height: calc(100% + 24px); /* clip Figma's built-in bottom toolbar */
+  border: none;
+  display: block;
+}
+
+.resizeHandle {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 16px;
+  height: 16px;
+  cursor: nwse-resize;
+  background: linear-gradient(
+    135deg,
+    transparent 40%,
+    var(--borderColor-muted, rgba(0, 0, 0, 0.15)) 40%,
+    var(--borderColor-muted, rgba(0, 0, 0, 0.15)) 50%,
+    transparent 50%,
+    transparent 65%,
+    var(--borderColor-muted, rgba(0, 0, 0, 0.15)) 65%,
+    var(--borderColor-muted, rgba(0, 0, 0, 0.15)) 75%,
+    transparent 75%
+  );
+  opacity: 0;
+  transition: opacity 150ms;
+  z-index: 2;
+}
+
+.embed:hover ~ .resizeHandle,
+.resizeHandle:hover {
+  opacity: 1;
+}
+
+/* Expand modal — fullscreen overlay for expanded iframe */
+.expandBackdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 100000;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: expandFadeIn 0.15s ease;
+}
+
+@keyframes expandFadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.expandContainer {
+  width: 90vw;
+  height: 90vh;
+  position: relative;
+  border-radius: 12px;
+  overflow: hidden;
+  background: var(--bgColor-default, #ffffff);
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
+  animation: expandScaleIn 0.2s ease;
+}
+
+@keyframes expandScaleIn {
+  from { transform: scale(0.95); opacity: 0; }
+  to { transform: scale(1); opacity: 1; }
+}
+
+.expandIframe {
+  border: none;
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.expandClose {
+  all: unset;
+  cursor: pointer;
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.5);
+  color: #ffffff;
+  font-size: 16px;
+  z-index: 1;
+  transition: background 100ms;
+  backdrop-filter: blur(4px);
+}
+
+.expandClose:hover {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+/* ── Split-screen layout ──────────────────────────────────────────── */
+
+.expandContainerSplit {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  background: var(--bgColor-default, #ffffff);
+}
+
+.expandSplitBody {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: expandScaleIn 0.2s ease;
+}
+
+.expandSplitPanes {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+}
+
+.expandSplitLeft {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  overflow: hidden;
+  border-right: 1px solid var(--borderColor-muted, #d8dee4);
+}
+
+.expandSplitRight {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  overflow: hidden;
+}
+
+.expandSecondary {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background: var(--bgColor-default, #ffffff);
+}
+
+.expandSecondaryIframe {
+  border: none;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.expandTerminal {
+  width: 100%;
+  height: 100%;
+  background: #0d1117;
+}
+
+.emptyState {
+  width: 100%;
+  height: calc(100% - 10px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.emptyIcon {
+  color: var(--fgColor-muted, #656d76);
+  opacity: 0.5;
+}
+
+.emptyLabel {
+  color: var(--fgColor-muted, #656d76);
+  font-size: 13px;
+  font-style: italic;
+}

package/src/internals/canvas/widgets/FrozenTerminalOverlay.jsx

@@ -0,0 +1,151 @@
+import { useState, useEffect, useRef } from 'react'
+import styles from './FrozenTerminalOverlay.module.css'
+
+/**
+ * Renders a frozen terminal preview from the latest server snapshot.
+ * Shown when a terminal widget loses its live WebGL slot but the
+ * server-side tmux session is still running.
+ *
+ * The snapshot text is rendered at a base font size then CSS-scaled to
+ * fill the widget width — matching the live ghostty terminal's sizing.
+ */
+
+let Convert = null
+let ansiLoadAttempted = false
+
+async function getConverter() {
+  if (Convert) return new Convert({ fg: '#e6edf3', bg: '#0d1117', newline: true })
+  if (ansiLoadAttempted) return null
+  ansiLoadAttempted = true
+  try {
+    const mod = await import(/* @vite-ignore */ 'ansi-to-html')
+    Convert = mod.default || mod
+    return new Convert({ fg: '#e6edf3', bg: '#0d1117', newline: true })
+  } catch {
+    return null
+  }
+}
+
+function stripAnsi(text) {
+  // eslint-disable-next-line no-control-regex
+  return text.replace(/\x1b\[[0-9;]*[a-zA-Z]/g, '')
+}
+
+function getBaseUrl() {
+  const base = (typeof import.meta !== 'undefined' && import.meta.env?.BASE_URL) || '/'
+  return base.endsWith('/') ? base : base + '/'
+}
+
+export default function FrozenTerminalOverlay({ widgetId, onActivate }) {
+  const [html, setHtml] = useState(null)
+  const [plainText, setPlainText] = useState(null)
+  const [scale, setScale] = useState(1)
+  const containerRef = useRef(null)
+  const preRef = useRef(null)
+
+  useEffect(() => {
+    let cancelled = false
+
+    async function fetchSnapshot() {
+      const baseUrl = getBaseUrl()
+      const urls = [
+        `${baseUrl}_storyboard/canvas/terminal-snapshot/${widgetId}`,
+        `${baseUrl}_storyboard/terminal-snapshots/${widgetId}.snapshot.json`,
+      ]
+
+      for (const url of urls) {
+        try {
+          const res = await fetch(url)
+          if (!res.ok) continue
+          const data = await res.json()
+          if (cancelled) return
+          const text = data.paneContent || data.content || data.output || ''
+          if (!text) continue
+
+          const converter = await getConverter()
+          if (cancelled) return
+          if (converter) {
+            setHtml(converter.toHtml(text))
+          } else {
+            setPlainText(stripAnsi(text))
+          }
+          return
+        } catch {
+          continue
+        }
+      }
+    }
+
+    fetchSnapshot()
+    return () => { cancelled = true }
+  }, [widgetId])
+
+  // Scale the pre to fill the padded content area width
+  useEffect(() => {
+    const container = containerRef.current
+    const pre = preRef.current
+    if (!container || !pre) return
+
+    function updateScale() {
+      const style = getComputedStyle(container)
+      const padL = parseFloat(style.paddingLeft) || 0
+      const padR = parseFloat(style.paddingRight) || 0
+      const availableWidth = container.clientWidth - padL - padR
+      const naturalWidth = pre.scrollWidth
+      if (naturalWidth > 0 && availableWidth > 0) {
+        setScale(availableWidth / naturalWidth)
+      }
+    }
+
+    const observer = new ResizeObserver(updateScale)
+    observer.observe(container)
+    updateScale()
+
+    return () => observer.disconnect()
+  }, [html, plainText])
+
+  const hasSnapshot = !!(html || plainText)
+
+  return (
+    <div
+      className={styles.overlay}
+      onClick={onActivate}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => { if (e.key === 'Enter') onActivate?.() }}
+      aria-label="Click to resume terminal"
+    >
+      {/* Faded snapshot background — scaled to fill widget width */}
+      {hasSnapshot && (
+        <div ref={containerRef} className={styles.snapshotContent}>
+          {html && (
+            <pre
+              ref={preRef}
+              className={styles.snapshotPre}
+              style={{ transform: `scale(${scale})` }}
+              dangerouslySetInnerHTML={{ __html: html }}
+            />
+          )}
+          {!html && plainText && (
+            <pre
+              ref={preRef}
+              className={styles.snapshotPre}
+              style={{ transform: `scale(${scale})` }}
+            >
+              {plainText}
+            </pre>
+          )}
+        </div>
+      )}
+
+      {/* Status + action */}
+      <div className={styles.statusLayer}>
+        <span className={styles.actionButton}>Click to resume</span>
+        <span className={styles.statusBadge}>
+          Running in background
+          <span className={styles.orbitSpinner} />
+        </span>
+      </div>
+    </div>
+  )
+}