@dfosco/storyboard 0.5.0-alpha.0

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

@@ -0,0 +1,334 @@
+/**
+ * Renders a story at its route URL inside an iframe on canvas.
+ *
+ * Features:
+ * - Title bar showing story name + export
+ * - "Show code" action toggles between iframe and source view
+ * - "Copy code" action copies the story source to clipboard
+ *
+ * Props: { storyId, exportName, width, height }
+ */
+import { forwardRef, useImperativeHandle, useRef, useCallback, useState, useEffect, useMemo } from 'react'
+import { getStoryData } from '../../../core/index.js'
+import { createInspectorHighlighter } from '../../../core/inspector/highlighter.js'
+import Icon from '../../Icon.jsx'
+import WidgetWrapper from './WidgetWrapper.jsx'
+import ResizeHandle from './ResizeHandle.jsx'
+import { useIframeDevLogs } from './iframeDevLogs.js'
+import { findAllConnectedSplitTargets, getSplitPaneLabel, buildPaneForWidget, buildSplitLayout, buildSecondaryIframeUrl } from './expandUtils.js'
+import ExpandedPane from './ExpandedPane.jsx'
+import styles from './StoryWidget.module.css'
+import overlayStyles from './embedOverlay.module.css'
+
+function ComponentIcon({ size = 36 }) {
+  return <Icon name="iconoir/keyframe" size={size} />
+}
+
+function resolveStoryUrl(storyId, exportName) {
+  const story = getStoryData(storyId)
+  if (!story?._storyModule) return ''
+  const base = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
+  const params = new URLSearchParams()
+  params.set('module', story._storyModule)
+  if (exportName) params.set('export', exportName)
+  return `${base}/_storyboard/canvas/isolate?${params}`
+}
+
+const _storySourcesCache = {}
+
+async function fetchStorySource(modulePath) {
+  if (modulePath in _storySourcesCache) return _storySourcesCache[modulePath]
+  const base = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
+  const path = modulePath.startsWith('/') ? modulePath : `/${modulePath}`
+  const res = await fetch(`${base}${path}?raw`)
+  if (!res.ok) throw new Error(`Failed to fetch ${base}${path}`)
+  const code = await res.text()
+  _storySourcesCache[modulePath] = code
+  return code
+}
+
+export default forwardRef(function StoryWidget({ id: widgetId, props, onUpdate, resizable }, ref) {
+  const storyId = props?.storyId || ''
+  const exportName = props?.exportName || ''
+  const width = props?.width
+  const height = props?.height
+
+  const containerRef = useRef(null)
+  const [expandMode, setExpandMode] = useState(null)
+  const expanded = expandMode !== null
+  const iframeRef = useRef(null)
+  const [interactive, setInteractive] = useState(false)
+  const [showCode, setShowCode] = useState(!!props?.showCode)
+  const [sourceCode, setSourceCode] = useState(null)
+  const [highlightedHtml, setHighlightedHtml] = useState(null)
+  const [sourceLoading, setSourceLoading] = useState(false)
+  const [storyIndexKey, setStoryIndexKey] = useState(0)
+
+  // Re-resolve story URL when the story index is live-patched
+  useEffect(() => {
+    const handler = () => setStoryIndexKey((k) => k + 1)
+    document.addEventListener('storyboard:story-index-changed', handler)
+    return () => document.removeEventListener('storyboard:story-index-changed', handler)
+  }, [])
+
+  const toggleShowCode = useCallback(() => {
+    setShowCode((v) => {
+      const next = !v
+      if (onUpdate) onUpdate({ showCode: next })
+      return next
+    })
+  }, [onUpdate])
+
+  const enterInteractive = useCallback(() => setInteractive(true), [])
+
+  // Exit interactive mode when clicking outside
+  useEffect(() => {
+    if (!interactive) return
+    function handlePointerDown(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        const chromeEl = e.target.closest(`[data-widget-id="${widgetId}"]`)
+        if (chromeEl) return
+        setInteractive(false)
+      }
+    }
+    document.addEventListener('pointerdown', handlePointerDown)
+    return () => document.removeEventListener('pointerdown', handlePointerDown)
+  }, [interactive, widgetId])
+
+  const handleResize = useCallback((w, h) => {
+    onUpdate?.({ width: w, height: h })
+  }, [onUpdate])
+
+  // Load source code when show-code is toggled on
+  useEffect(() => {
+    if (!showCode || sourceCode !== null) return
+    const story = getStoryData(storyId)
+    if (!story?._storyModule) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setSourceCode('// Source not available')
+      return
+    }
+    let cancelled = false
+    setSourceLoading(true)
+    fetchStorySource(story._storyModule)
+      .then((code) => { if (!cancelled) { setSourceCode(code || '// Empty file'); setSourceLoading(false) } })
+      .catch(() => { if (!cancelled) { setSourceCode('// Failed to load source'); setSourceLoading(false) } })
+    return () => { cancelled = true; setSourceLoading(false) }
+  }, [showCode, sourceCode, storyId])
+
+  // Re-highlight when theme changes
+  const [codeThemeKey, setCodeThemeKey] = useState(0)
+  useEffect(() => {
+    function onThemeChanged() { setCodeThemeKey((k) => k + 1) }
+    document.addEventListener('storyboard:theme:changed', onThemeChanged)
+    return () => document.removeEventListener('storyboard:theme:changed', onThemeChanged)
+  }, [])
+
+  // Syntax-highlight source code
+  useEffect(() => {
+    if (!sourceCode) return
+    let cancelled = false
+    createInspectorHighlighter().then((hl) => {
+      if (cancelled) return
+      const lang = storyId.endsWith('.tsx') ? 'tsx' : 'jsx'
+      setHighlightedHtml(hl.codeToHtml(sourceCode, { lang }))
+    })
+    return () => { cancelled = true }
+  }, [sourceCode, storyId, codeThemeKey])
+
+  const copyCode = useCallback(async () => {
+    if (sourceCode) { await navigator.clipboard?.writeText(sourceCode); return }
+    const story = getStoryData(storyId)
+    if (!story?._storyModule) return
+    try {
+      const code = await fetchStorySource(story._storyModule)
+      setSourceCode(code)
+      await navigator.clipboard?.writeText(code)
+    } catch { /* */ }
+  }, [sourceCode, storyId])
+
+  useImperativeHandle(ref, () => ({
+    getState(key) {
+      if (key === 'showCode') return showCode
+      return undefined
+    },
+    handleAction(actionId) {
+      if (actionId === 'show-code') toggleShowCode()
+      else if (actionId === 'copy-code') copyCode()
+      else if (actionId === 'expand' || actionId === 'expand-single') setExpandMode('single')
+      else if (actionId === 'split-screen') setExpandMode('split')
+      else if (actionId === 'open-external') {
+        const story = getStoryData(storyId)
+        if (story?._route) {
+          const base = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
+          window.open(`${base}${story._route}`, '_blank', 'noopener')
+        }
+      }
+    },
+  }), [storyId, showCode, toggleShowCode, copyCode])
+
+  const iframeSrc = useMemo(
+    () => resolveStoryUrl(storyId, exportName),
+    [storyId, exportName, storyIndexKey],
+  )
+
+  // When paused and not interactive, freeze the iframe src to prevent reloads
+  const effectiveSrc = iframeSrc
+
+  useIframeDevLogs({
+    widget: 'StoryWidget',
+    loaded: interactive && !showCode && Boolean(effectiveSrc),
+    src: effectiveSrc,
+  })
+
+  const displayName = exportName ? `${storyId} / ${exportName}` : storyId
+
+  if (!storyId) {
+    return (
+      <WidgetWrapper>
+        <div className={styles.container} ref={containerRef}>
+          <div className={styles.error}>
+            <span className={styles.errorIcon}><ComponentIcon size={20} /></span>
+            <span className={styles.errorText}>Missing story ID</span>
+          </div>
+        </div>
+      </WidgetWrapper>
+    )
+  }
+
+  if (!effectiveSrc) {
+    return (
+      <WidgetWrapper>
+        <div className={styles.container} ref={containerRef}>
+          <div className={styles.error}>
+            <span className={styles.errorIcon}><ComponentIcon size={20} /></span>
+            <span className={styles.errorText}>Story &ldquo;{storyId}&rdquo; not found or has no route</span>
+          </div>
+        </div>
+      </WidgetWrapper>
+    )
+  }
+
+  const sizeStyle = {}
+  if (typeof width === 'number') sizeStyle.width = `${width}px`
+  if (typeof height === 'number') sizeStyle.height = `${height}px`
+
+  return (
+    <>
+    <WidgetWrapper>
+      <div ref={containerRef} className={styles.container} style={sizeStyle}>
+        <div className={styles.header}>
+          <span className={styles.headerIcon}><ComponentIcon size={16} /></span>
+          <span className={styles.headerTitle}>{displayName}</span>
+        </div>
+        {showCode ? (
+          <div
+            className={styles.codeView}
+            data-canvas-allow-text-selection
+            onPointerDown={(e) => e.stopPropagation()}
+            onMouseDown={(e) => e.stopPropagation()}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className={styles.codeHeader}>
+              <span className={styles.codeLabel}>{storyId}.story.jsx</span>
+              <button className={styles.codeCloseBtn} onClick={() => setShowCode(false)} aria-label="Close code view">×</button>
+            </div>
+            {sourceLoading ? (
+              <div className={styles.codeLoading}>Loading…</div>
+            ) : highlightedHtml ? (
+              <div className={styles.codeBlock} dangerouslySetInnerHTML={{ __html: highlightedHtml }} />
+            ) : (
+              <pre className={styles.codeBlock}><code>{sourceCode || ''}</code></pre>
+            )}
+          </div>
+        ) : (
+          <>
+            <div className={styles.content}>
+              <iframe
+                ref={iframeRef}
+                src={effectiveSrc}
+                className={styles.iframe}
+                title={displayName}
+                onLoad={(e) => e.target.blur()}
+              />
+            </div>
+
+            {!interactive && (
+              <div
+                className={overlayStyles.interactOverlay}
+                onClick={(e) => {
+                  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"
+              >
+                <span className={overlayStyles.interactHint}>Click to interact</span>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+      {resizable && <ResizeHandle targetRef={containerRef} width={width} height={height} onResize={handleResize} />}
+    </WidgetWrapper>
+    {expanded && (
+      <StoryExpandPane
+        widgetId={widgetId}
+        storyId={storyId}
+        exportName={exportName}
+        splitMode={expandMode === 'split'}
+        onClose={() => setExpandMode(null)}
+      />
+    )}
+    </>
+  )
+})
+
+function StoryExpandPane({ widgetId, storyId, exportName, 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: 'story', position: { x: 0, y: 0 }, props: { storyId, exportName } }
+  }, [widgetId, storyId, exportName])
+
+  const buildPaneFn = useCallback((widget) => {
+    if (widget.id === widgetId) {
+      const url = buildSecondaryIframeUrl({ type: 'story', props: { storyId, exportName } })
+      return {
+        id: widgetId,
+        label: getSplitPaneLabel({ type: 'story', props: { storyId, exportName } }),
+        widgetType: 'story',
+        kind: 'react',
+        render: () => url
+          ? <iframe src={url} style={{ border: 'none', width: '100%', height: '100%', display: 'block' }} title={storyId} onLoad={(e) => e.target.blur()} />
+          : <div style={{ padding: 32, color: 'var(--fgColor-muted)' }}>Story &quot;{storyId}&quot; not found</div>,
+      }
+    }
+    return buildPaneForWidget(widget)
+  }, [widgetId, storyId, exportName])
+
+  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/StoryWidget.module.css

@@ -0,0 +1,211 @@
+.container {
+  position: relative;
+  overflow: hidden;
+  min-width: 100px;
+  min-height: 60px;
+  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);
+  width: 100%;
+  height: 100%;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 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;
+}
+
+.headerIcon {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.headerTitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.content {
+  position: relative;
+  width: 100%;
+  height: calc(100% - 37px);
+}
+
+.placeholder {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: var(--fgColor-muted, #656d76);
+  text-align: center;
+}
+
+.placeholderLabel {
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.spinner {
+  width: 24px;
+  height: 24px;
+  border: 3px solid var(--borderColor-muted, #d0d7de);
+  border-top-color: var(--fgColor-accent, #2f81f7);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.iframe {
+  position: absolute;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: none;
+  z-index: 1;
+}
+
+.snapshotImage {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: top left;
+  display: block;
+  pointer-events: none;
+  transition: opacity 150ms ease;
+}
+
+.codeView {
+  display: flex;
+  flex-direction: column;
+  height: calc(100% - 37px);
+  overflow: hidden;
+}
+
+.codeHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 10px;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--fgColor-muted, #656d76);
+  background: var(--bgColor-inset, #eff2f5);
+  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+  user-select: none;
+  flex-shrink: 0;
+}
+
+.codeLabel {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+}
+
+.codeCloseBtn {
+  all: unset;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  font-size: 14px;
+  color: var(--fgColor-muted, #656d76);
+}
+
+.codeCloseBtn:hover {
+  background: var(--bgColor-neutral-muted, #eaeef2);
+  color: var(--fgColor-default, #1f2328);
+}
+
+.codeBlock {
+  flex: 1;
+  margin: 0;
+  overflow: auto;
+  user-select: text;
+  cursor: text;
+}
+
+/* Style the highlighted pre from the inspector highlighter.
+   padding uses !important to override the inline padding:0 from codeToHtml. */
+.codeBlock pre {
+  margin: 0;
+  padding: var(--base-size-8, 8px) !important;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.6;
+  tab-size: 2;
+  min-height: 100%;
+  box-sizing: border-box;
+}
+
+/* Fallback when no highlighted HTML (plain pre/code) */
+.codeBlock > code {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.6;
+  white-space: pre;
+  tab-size: 2;
+}
+
+.codeLoading {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: var(--fgColor-muted, #656d76);
+}
+
+.error {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px;
+  color: var(--fgColor-danger, #cf222e);
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.errorIcon {
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+.errorText {
+  word-break: break-word;
+}
+
+.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  color: var(--fgColor-muted, #656d76);
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 13px;
+}

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

@@ -0,0 +1,146 @@
+import { useRef, useEffect, useState } from 'react'
+import { readProp, schemas } from './widgetProps.js'
+import styles from './TerminalReadWidget.module.css'
+
+const terminalSchema = schemas['terminal']
+
+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 + '/'
+}
+
+function getCanvasId() {
+  return window.__storyboardCanvasBridgeState?.canvasId || null
+}
+
+function isProduction() {
+  return typeof import.meta !== 'undefined' && import.meta.env?.PROD
+}
+
+export default function TerminalReadWidget({ id, props }) {
+  const width = readProp(props, 'width', terminalSchema)
+  const height = readProp(props, 'height', terminalSchema)
+  const prettyName = props?.prettyName || '...'
+
+  const [content, setContent] = useState(null)
+  const [html, setHtml] = useState(null)
+  const [failed, setFailed] = useState(false)
+  const contentRef = useRef(null)
+
+  useEffect(() => {
+    let cancelled = false
+    async function fetchSnapshot() {
+      const baseUrl = getBaseUrl()
+      const canvasId = getCanvasId()
+      if (!canvasId) { setFailed(true); return }
+
+      const urls = isProduction()
+        ? [
+            // New flat format: <widgetId>.snapshot.json
+            `${baseUrl}_storyboard/terminal-snapshots/${id}.snapshot.json`,
+            // Legacy nested format: <canvasDir>/<widgetId>.json
+            `${baseUrl}_storyboard/terminal-snapshots/${canvasId.replace(/\//g, '--')}/${id}.json`,
+          ]
+        : [
+            `${baseUrl}_storyboard/canvas/terminal-snapshot/${id}`,
+            `${baseUrl}_storyboard/terminal-snapshots/${id}.snapshot.json`,
+            `${baseUrl}_storyboard/terminal-snapshots/${canvasId.replace(/\//g, '--')}/${id}.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 || ''
+          setContent(text)
+
+          const converter = await getConverter()
+          if (cancelled) return
+          if (converter) {
+            setHtml(converter.toHtml(text))
+          } else {
+            setContent(stripAnsi(text))
+          }
+          return
+        } catch {
+          continue
+        }
+      }
+      if (!cancelled) setFailed(true)
+    }
+    fetchSnapshot()
+    return () => { cancelled = true }
+  }, [id])
+
+  // Auto-scroll to bottom
+  useEffect(() => {
+    if (contentRef.current) {
+      contentRef.current.scrollTop = contentRef.current.scrollHeight
+    }
+  }, [html, content])
+
+  const titleLabel = `terminal · ${prettyName}`
+
+  return (
+    <div className={styles.container}>
+      <div className={`tc-drag-handle ${styles.titleBar}`}>
+        <span>{titleLabel}</span>
+        <span className={styles.readOnlyBadge}>read only</span>
+      </div>
+      <div
+        ref={contentRef}
+        className={styles.content}
+        style={{
+          ...(typeof width === 'number' ? { width: `${width}px` } : undefined),
+          ...(typeof height === 'number' ? { height: `${height}px` } : undefined),
+        }}
+      >
+        {failed && (
+          <div className={styles.placeholder}>
+            <span className={styles.placeholderTitle}>Terminal session · {prettyName}</span>
+            <span className={styles.placeholderSub}>No captured output available</span>
+          </div>
+        )}
+        {!failed && content === null && (
+          <div className={styles.placeholder}>
+            <span className={styles.placeholderSub}>Loading…</span>
+          </div>
+        )}
+        {!failed && html && (
+          <pre
+            style={{ margin: 0, whiteSpace: 'pre', fontFamily: 'inherit', fontSize: 'inherit', lineHeight: 'inherit' }}
+            dangerouslySetInnerHTML={{ __html: html }}
+          />
+        )}
+        {!failed && content !== null && !html && (
+          <pre style={{ margin: 0, whiteSpace: 'pre', fontFamily: 'inherit', fontSize: 'inherit', lineHeight: 'inherit' }}>
+            {content}
+          </pre>
+        )}
+      </div>
+    </div>
+  )
+}