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

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

@@ -0,0 +1,335 @@
+/* ── Backdrop ──────────────────────────────────────────────────────── */
+
+.backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 100000;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: splitExpandFadeIn 0.15s ease;
+}
+
+@keyframes splitExpandFadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* ── Modal container ──────────────────────────────────────────────── */
+
+.modal {
+  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);
+  display: flex;
+  flex-direction: column;
+  animation: splitExpandScaleIn 0.2s ease;
+}
+
+.modalFullscreen {
+  position: fixed;
+  inset: 0;
+  overflow: hidden;
+  background: var(--bgColor-default, #ffffff);
+  display: flex;
+  flex-direction: column;
+  animation: splitExpandScaleIn 0.2s ease;
+}
+
+@keyframes splitExpandScaleIn {
+  from { transform: scale(0.95); opacity: 0; }
+  to { transform: scale(1); opacity: 1; }
+}
+
+/* ── Top bar ──────────────────────────────────────────────────────── */
+
+.topBar {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  padding: 0 12px;
+  background: var(--bgColor-muted, #f6f8fa);
+  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+  flex-shrink: 0;
+}
+
+.topBarTitle {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--fgColor-muted, #656d76);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.closeBtn {
+  all: unset;
+  cursor: pointer;
+  margin-left: auto;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  color: var(--fgColor-muted, #656d76);
+  font-size: 14px;
+  transition: background 100ms, color 100ms;
+}
+
+.closeBtn:hover {
+  background: var(--bgColor-neutral-muted, #eaeef2);
+  color: var(--fgColor-default, #1f2328);
+}
+
+.closeBtnFloat {
+  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);
+}
+
+.closeBtnFloat:hover {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+/* ── Body ─────────────────────────────────────────────────────────── */
+
+.body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+}
+
+.bodySplit {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+}
+
+.bodySplit .splitLeft,
+.bodySplit .splitRight {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  overflow: hidden;
+}
+
+.bodySplit .splitLeft {
+  border-right: 1px solid var(--borderColor-muted, #d8dee4);
+}
+
+/* ── Panes ────────────────────────────────────────────────────────── */
+
+.primaryPane {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+
+.secondaryPane {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+
+.secondaryIframe {
+  border: none;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.terminalContainer {
+  width: 100%;
+  height: 100%;
+  background: #0d1117;
+}
+
+/* ── Markdown content in secondary pane ───────────────────────────── */
+
+.markdownContent {
+  padding: 32px 40px;
+  font-size: 15px;
+  line-height: 1.7;
+  color: var(--fgColor-default, #1f2328);
+  font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.markdownContent * {
+  pointer-events: auto;
+}
+
+.markdownContent a {
+  color: var(--fgColor-accent, #0969da);
+  text-decoration: none;
+}
+
+.markdownContent a:hover {
+  text-decoration: underline;
+}
+
+.markdownContent img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 6px;
+  border: 1px solid var(--borderColor-default, #d0d7de);
+  margin: 8px 0;
+  display: block;
+}
+
+.markdownContent video {
+  max-width: 100%;
+  height: auto;
+  border-radius: 6px;
+  margin: 8px 0;
+  display: block;
+}
+
+.markdownContent pre {
+  padding: 12px 16px;
+  border-radius: 6px;
+  border: 1px solid var(--borderColor-muted, #d8dee4);
+  overflow-x: auto;
+  margin: 8px 0;
+  background: var(--bgColor-neutral-muted, #afb8c133);
+  line-height: 1.4;
+}
+
+.markdownContent code {
+  background: var(--bgColor-neutral-muted, #afb8c133);
+  padding: 2px 5px;
+  border-radius: 4px;
+  font-size: 13px;
+  font-family: ui-monospace, SFMono-Regular, monospace;
+}
+
+.markdownContent pre code {
+  background: none;
+  padding: 0;
+}
+
+.markdownContent h1 { font-size: 22px; font-weight: 700; margin: 0 0 12px; }
+.markdownContent h2 { font-size: 18px; font-weight: 600; margin: 0 0 8px; }
+.markdownContent h3 { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
+.markdownContent p { margin: 0 0 12px; }
+.markdownContent ul { margin: 0 0 12px; padding-left: 24px; list-style: disc; }
+.markdownContent ol { margin: 0 0 12px; padding-left: 24px; list-style: decimal; }
+.markdownContent li { margin: 0 0 4px; display: list-item; }
+
+.markdownContent blockquote {
+  border-left: 4px solid var(--borderColor-default, #d0d7de);
+  margin: 12px 0;
+  padding: 4px 16px;
+  color: var(--fgColor-muted, #656d76);
+}
+
+.markdownContent table {
+  border-collapse: collapse;
+  margin: 12px 0;
+  width: 100%;
+  font-size: 14px;
+}
+
+.markdownContent th,
+.markdownContent td {
+  border: 1px solid var(--borderColor-default, #d0d7de);
+  padding: 6px 12px;
+  text-align: left;
+}
+
+.markdownContent th {
+  background: var(--bgColor-muted, #f6f8fa);
+  font-weight: 600;
+}
+
+/* ── GitHub card in secondary pane ────────────────────────────────── */
+
+.githubCard {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: var(--bgColor-default, #ffffff);
+}
+
+.githubHeader {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 24px;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--fgColor-default, #1f2328);
+  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+}
+
+.githubTitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.githubBody {
+  flex: 1;
+  overflow: auto;
+  padding: 24px;
+  font-size: 15px;
+  line-height: 1.7;
+  color: var(--fgColor-default, #1f2328);
+}
+
+.githubBody * { pointer-events: auto; }
+.githubBody a { color: var(--fgColor-accent, #0969da); text-decoration: none; }
+.githubBody a:hover { text-decoration: underline; }
+.githubBody img { max-width: 100%; height: auto; border-radius: 6px; margin: 8px 0; display: block; }
+.githubBody video { max-width: 100%; height: auto; border-radius: 6px; margin: 8px 0; display: block; }
+.githubBody pre { padding: 12px 16px; border-radius: 6px; border: 1px solid var(--borderColor-muted, #d8dee4); overflow-x: auto; margin: 12px 0; background: var(--bgColor-neutral-muted, #afb8c133); }
+.githubBody code { background: var(--bgColor-neutral-muted, #afb8c133); padding: 2px 5px; border-radius: 4px; font-size: 13px; font-family: ui-monospace, SFMono-Regular, monospace; }
+.githubBody pre code { background: none; padding: 0; }
+.githubBody h1 { font-size: 20px; font-weight: 700; margin: 16px 0 8px; }
+.githubBody h2 { font-size: 17px; font-weight: 600; margin: 14px 0 6px; }
+.githubBody p { margin: 0 0 12px; }
+
+/* ── Plain link card in secondary pane ────────────────────────────── */
+
+.linkCard {
+  padding: 32px 40px;
+  font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
+}
+
+.linkTitle {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--fgColor-default, #1f2328);
+  margin: 0 0 8px;
+}
+
+.linkUrl {
+  font-size: 14px;
+  color: var(--fgColor-accent, #0969da);
+  text-decoration: none;
+}
+
+.linkUrl:hover {
+  text-decoration: underline;
+}

package/src/canvas/widgets/SplitScreenTopBar.jsx

@@ -0,0 +1,30 @@
+/**
+ * SplitScreenTopBar — terminal-style slim top bar for split-screen modals.
+ * Shows "Type · Metadata" for each pane, with active pane in default color
+ * and inactive pane in muted color. Theme-responsive.
+ */
+import { ScreenNormalIcon } from '@primer/octicons-react'
+import styles from './SplitScreenTopBar.module.css'
+
+/**
+ * @param {Object} props
+ * @param {string} props.leftLabel — "Type · Metadata" for the left pane
+ * @param {string} props.rightLabel — "Type · Metadata" for the right pane
+ * @param {'left' | 'right'} props.activePane — which pane has focus
+ * @param {() => void} props.onClose — close handler
+ */
+export default function SplitScreenTopBar({ leftLabel, rightLabel, activePane, onClose }) {
+  return (
+    <div className={styles.bar}>
+      <span className={`${styles.leftLabel} ${activePane === 'left' ? styles.active : styles.muted}`}>
+        {leftLabel}
+      </span>
+      <span className={`${styles.rightLabel} ${activePane === 'right' ? styles.active : styles.muted}`}>
+        {rightLabel}
+      </span>
+      <button className={styles.closeBtn} onClick={onClose} aria-label="Close expanded view" autoFocus>
+        <ScreenNormalIcon size={16} />
+      </button>
+    </div>
+  )
+}

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

@@ -0,0 +1,58 @@
+/* Theme-responsive split-screen top bar (terminal-style slim bar) */
+
+.bar {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  padding: 0 12px;
+  gap: 12px;
+  background: var(--bgColor-muted, #f6f8fa);
+  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+  flex-shrink: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  user-select: none;
+}
+
+.leftLabel {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+.rightLabel {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+  margin-left: auto;
+}
+
+.active {
+  color: var(--fgColor-default, #1f2328);
+}
+
+.muted {
+  color: var(--fgColor-muted, #656d76);
+}
+
+.closeBtn {
+  all: unset;
+  cursor: pointer;
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  color: var(--fgColor-muted, #656d76);
+  transition: background 100ms, color 100ms;
+}
+
+.closeBtn:hover {
+  background: var(--bgColor-neutral-muted, #eaeef2);
+  color: var(--fgColor-default, #1f2328);
+}

package/src/canvas/widgets/StoryWidget.jsx

@@ -171,10 +171,13 @@ export default forwardRef(function StoryWidget({ id: widgetId, props, onUpdate,
     [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(iframeSrc),
-    src: iframeSrc,
+    loaded: interactive && !showCode && Boolean(effectiveSrc),
+    src: effectiveSrc,
   })
 
   const displayName = exportName ? `${storyId} / ${exportName}` : storyId
@@ -192,7 +195,7 @@ export default forwardRef(function StoryWidget({ id: widgetId, props, onUpdate,
     )
   }
 
-  if (!iframeSrc) {
+  if (!effectiveSrc) {
     return (
       <WidgetWrapper>
         <div className={styles.container} ref={containerRef}>
@@ -241,7 +244,7 @@ export default forwardRef(function StoryWidget({ id: widgetId, props, onUpdate,
             <div className={styles.content}>
               <iframe
                 ref={iframeRef}
-                src={iframeSrc}
+                src={effectiveSrc}
                 className={styles.iframe}
                 title={displayName}
               />

package/src/canvas/widgets/TerminalReadWidget.jsx

@@ -0,0 +1,140 @@
+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()
+        ? [`${baseUrl}_storyboard/terminal-snapshots/${canvasId}/${id}.json`]
+        : [
+            `${baseUrl}_storyboard/canvas/${canvasId}/terminal-snapshot/${id}`,
+            `${baseUrl}_storyboard/terminal-snapshots/${canvasId}/${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.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={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>
+  )
+}

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

@@ -0,0 +1,92 @@
+.container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--base-size-16, 16px);
+}
+
+:global(.tc-drag-surface):has(.container) {
+  border-radius: 16px;
+}
+
+.titleBar {
+  position: absolute;
+  top: -28px;
+  left: 4px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  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);
+}
+
+.readOnlyBadge {
+  font-size: 10px;
+  color: #6e7681;
+  background: rgba(110, 118, 129, 0.15);
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-weight: 500;
+}
+
+.content {
+  background: #0d1117;
+  color: #e6edf3;
+  font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
+  font-size: 13px;
+  line-height: 17px;
+  padding: 12px;
+  overflow-y: auto;
+  white-space: pre;
+  flex: 1;
+  border: 1px solid var(--borderColor-default, #30363d);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24);
+  border-radius: var(--base-size-16, 16px);
+  box-sizing: border-box;
+}
+
+.content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.content::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 3px;
+}
+
+.content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 100%;
+  color: #8b949e;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 13px;
+  text-align: center;
+  user-select: none;
+}
+
+.placeholderTitle {
+  color: #e6edf3;
+  font-weight: 500;
+}
+
+.placeholderSub {
+  color: #6e7681;
+  font-size: 12px;
+}