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

package/src/canvas/widgets/PrototypeEmbed.jsx

@@ -6,6 +6,8 @@ import ResizeHandle from './ResizeHandle.jsx'
 import { readProp, prototypeEmbedSchema } from './widgetProps.js'
 import { getEmbedChromeVars } from './embedTheme.js'
 import { useIframeDevLogs } from './iframeDevLogs.js'
+import { findConnectedSplitTarget, getPaneOrder, buildSecondaryIframeUrl, reparentTerminalInto, getSplitPaneLabel, getWidgetX } from './expandUtils.js'
+import SplitScreenTopBar from './SplitScreenTopBar.jsx'
 import styles from './PrototypeEmbed.module.css'
 import overlayStyles from './embedOverlay.module.css'
 
@@ -84,6 +86,8 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
     return `${base}${sep}_sb_embed&_sb_hide_branch_bar&_sb_theme_target=prototype&_sb_canvas_theme=${canvasTheme}${hash}`
   }, [rawSrc, canvasTheme])
 
+  const effectiveSrc = iframeSrc
+
   const prototypeIndex = useMemo(() => {
     try { return buildPrototypeIndex() }
     catch { return { folders: [], prototypes: [], globalFlows: [], sorted: { title: { prototypes: [], folders: [] } } } }
@@ -153,8 +157,8 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
 
   useIframeDevLogs({
     widget: 'PrototypeEmbed',
-    loaded: Boolean(iframeSrc && interactive),
-    src: iframeSrc,
+    loaded: Boolean(effectiveSrc && interactive),
+    src: effectiveSrc,
   })
 
   useEffect(() => {
@@ -212,8 +216,12 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
       iframe.className = styles.expandIframe
       iframe.removeAttribute('style')
       const target = modalContainerRef.current
-      if (target.moveBefore) target.moveBefore(iframe, target.firstChild)
-      else target.prepend(iframe)
+      try {
+        if (target.moveBefore) target.moveBefore(iframe, target.firstChild)
+        else target.prepend(iframe)
+      } catch {
+        target.prepend(iframe)
+      }
     } else if (!expanded && inlineContainerRef.current) {
       if (iframe._savedClassName !== undefined) {
         iframe.className = iframe._savedClassName
@@ -222,8 +230,12 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
         delete iframe._savedStyle
       }
       const target = inlineContainerRef.current
-      if (target.moveBefore) target.moveBefore(iframe, null)
-      else target.appendChild(iframe)
+      try {
+        if (target.moveBefore) target.moveBefore(iframe, null)
+        else target.appendChild(iframe)
+      } catch {
+        target.appendChild(iframe)
+      }
     }
   }, [expanded])
 
@@ -250,7 +262,7 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
     handleAction(actionId) {
       if (actionId === 'edit') {
         setEditing(true)
-      } else if (actionId === 'expand') {
+      } else if (actionId === 'expand' || actionId === 'split-screen') {
         setExpanded(true)
       } else if (actionId === 'open-external') {
         if (rawSrc) window.open(rawSrc, '_blank', 'noopener')
@@ -362,7 +374,7 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
             >
               <iframe
                 ref={iframeRef}
-                src={iframeSrc}
+                src={effectiveSrc}
                 className={styles.iframe}
                 style={{
                   width: width / scale,
@@ -406,20 +418,171 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
       {resizable && <ResizeHandle targetRef={embedRef} width={width} height={height} onResize={handleResize} />}
     </WidgetWrapper>
     {createPortal(
-      <div
-        className={styles.expandBackdrop}
-        style={expanded ? undefined : { display: 'none' }}
-        onClick={() => setExpanded(false)}
-        onPointerDown={(e) => e.stopPropagation()}
-        onKeyDown={(e) => e.stopPropagation()}
-        onWheel={(e) => e.stopPropagation()}
-      >
-        <div ref={modalContainerRef} className={styles.expandContainer} onClick={(e) => e.stopPropagation()}>
-          <button className={styles.expandClose} onClick={() => setExpanded(false)} aria-label="Close expanded view" autoFocus>✕</button>
-        </div>
-      </div>,
+      <PrototypeExpandModal
+        expanded={expanded}
+        onClose={() => setExpanded(false)}
+        modalContainerRef={modalContainerRef}
+        widgetId={widgetId}
+      />,
       document.body
     )}
     </>
   )
 })
+
+/**
+ * PrototypeExpandModal — the existing expand modal with split-screen support.
+ * Keeps iframe reparenting in the primary pane, adds a secondary pane if connected.
+ */
+function PrototypeExpandModal({ expanded, onClose, modalContainerRef, widgetId }) {
+  const connectedWidget = useMemo(
+    () => (expanded ? findConnectedSplitTarget(widgetId) : null),
+    [expanded, widgetId],
+  )
+  const hasSplit = Boolean(connectedWidget)
+  const paneOrder = useMemo(
+    () => (hasSplit ? getPaneOrder(widgetId, connectedWidget) : { primaryIsLeft: true }),
+    [hasSplit, widgetId, connectedWidget],
+  )
+  const secondaryUrl = useMemo(() => buildSecondaryIframeUrl(connectedWidget), [connectedWidget])
+  const isTerminalSecondary = connectedWidget?.type === 'terminal' || connectedWidget?.type === 'terminal-read' || connectedWidget?.type === 'agent'
+  const terminalRef = useRef(null)
+  const cleanupRef = useRef(null)
+  const [activePane, setActivePane] = useState('left')
+
+  // Build labels for the top bar
+  const primaryWidget = useMemo(() => {
+    const bridge = window.__storyboardCanvasBridgeState
+    return bridge?.widgets?.find((w) => w.id === widgetId) || { type: 'prototype', props: {} }
+  }, [widgetId, expanded])
+
+  const primaryLabel = useMemo(() => getSplitPaneLabel(primaryWidget), [primaryWidget])
+  const secondaryLabel = useMemo(() => getSplitPaneLabel(connectedWidget), [connectedWidget])
+  const leftLabel = paneOrder.primaryIsLeft ? primaryLabel : secondaryLabel
+  const rightLabel = paneOrder.primaryIsLeft ? secondaryLabel : primaryLabel
+
+  // Reparent terminal DOM for split
+  useEffect(() => {
+    if (!isTerminalSecondary || !expanded || !terminalRef.current) return
+    cleanupRef.current = reparentTerminalInto(connectedWidget.id, terminalRef.current)
+    return () => {
+      cleanupRef.current?.()
+      cleanupRef.current = null
+    }
+  }, [isTerminalSecondary, expanded, connectedWidget?.id])
+
+  const primaryPane = (
+    <div
+      ref={modalContainerRef}
+      className={hasSplit ? styles.expandContainerSplit : styles.expandContainer}
+      onClick={(e) => e.stopPropagation()}
+      onPointerDown={() => setActivePane(paneOrder.primaryIsLeft ? 'left' : 'right')}
+    >
+      {!hasSplit && <button className={styles.expandClose} onClick={onClose} aria-label="Close expanded view" autoFocus>✕</button>}
+    </div>
+  )
+
+  let secondaryPane = null
+  const secondarySide = paneOrder.primaryIsLeft ? 'right' : 'left'
+  if (hasSplit) {
+    if (secondaryUrl) {
+      secondaryPane = (
+        <div className={styles.expandSecondary} onClick={(e) => e.stopPropagation()} onPointerDown={() => setActivePane(secondarySide)}>
+          <iframe src={secondaryUrl} className={styles.expandIframe} title="Connected widget" />
+        </div>
+      )
+    } else if (isTerminalSecondary) {
+      secondaryPane = (
+        <div className={styles.expandSecondary} onClick={(e) => e.stopPropagation()} onPointerDown={() => setActivePane(secondarySide)}>
+          <div ref={terminalRef} className={styles.expandTerminal} />
+        </div>
+      )
+    } else if (connectedWidget?.type === 'markdown') {
+      secondaryPane = (
+        <div className={styles.expandSecondary} onClick={(e) => e.stopPropagation()} onPointerDown={() => setActivePane(secondarySide)}>
+          <MarkdownSecondaryPane content={connectedWidget.props?.content} />
+        </div>
+      )
+    } else if (connectedWidget?.type === 'link-preview') {
+      secondaryPane = (
+        <div className={styles.expandSecondary} onClick={(e) => e.stopPropagation()} onPointerDown={() => setActivePane(secondarySide)}>
+          <LinkPreviewSecondaryPane widget={connectedWidget} />
+        </div>
+      )
+    }
+  }
+
+  const leftPane = paneOrder.primaryIsLeft ? primaryPane : secondaryPane
+  const rightPane = paneOrder.primaryIsLeft ? secondaryPane : primaryPane
+
+  return (
+    <div
+      className={styles.expandBackdrop}
+      style={expanded ? undefined : { display: 'none' }}
+      onClick={onClose}
+      onPointerDown={(e) => e.stopPropagation()}
+      onKeyDown={(e) => e.stopPropagation()}
+      onWheel={(e) => e.stopPropagation()}
+    >
+      {hasSplit ? (
+        <div className={styles.expandSplitBody}>
+          <SplitScreenTopBar
+            leftLabel={leftLabel}
+            rightLabel={rightLabel}
+            activePane={activePane}
+            onClose={onClose}
+          />
+          <div className={styles.expandSplitPanes}>
+            <div className={styles.expandSplitLeft}>{leftPane}</div>
+            <div className={styles.expandSplitRight}>{rightPane}</div>
+          </div>
+        </div>
+      ) : (
+        primaryPane
+      )}
+    </div>
+  )
+}
+
+/** Minimal markdown renderer for secondary pane */
+function MarkdownSecondaryPane({ content }) {
+  const ref = useRef(null)
+  useEffect(() => {
+    if (!ref.current || !content) return
+    let cancelled = false
+    ;(async () => {
+      const { remark } = await import('remark')
+      const remarkGfm = (await import('remark-gfm')).default
+      const remarkHtml = (await import('remark-html')).default
+      if (cancelled) return
+      const result = remark().use(remarkGfm).use(remarkHtml, { sanitize: false }).processSync(content)
+      if (ref.current) ref.current.innerHTML = String(result).replace(/<a\s/g, '<a target="_blank" rel="noopener noreferrer" ')
+    })()
+    return () => { cancelled = true }
+  }, [content])
+  return <div ref={ref} className={styles.expandMarkdownContent} />
+}
+
+/** Link preview secondary pane (GitHub card or plain) */
+function LinkPreviewSecondaryPane({ widget }) {
+  const { url, title, github } = widget.props || {}
+  const bodyRef = useRef(null)
+  useEffect(() => {
+    if (bodyRef.current && github?.bodyHtml) bodyRef.current.innerHTML = github.bodyHtml
+  }, [github?.bodyHtml])
+
+  if (github) {
+    return (
+      <div className={styles.expandGithubCard}>
+        <div className={styles.expandGithubHeader}>{title || url || 'GitHub'}</div>
+        {github.bodyHtml && <div ref={bodyRef} className={styles.expandGithubBody} />}
+      </div>
+    )
+  }
+  return (
+    <div className={styles.expandLinkCard}>
+      <p className={styles.expandLinkTitle}>{title || url || 'Link'}</p>
+      {url && <a href={url} target="_blank" rel="noopener noreferrer">{url}</a>}
+    </div>
+  )
+}

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

@@ -460,3 +460,120 @@
 .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);
+}
+
+.expandContainerSplit .expandIframe {
+  border: none;
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.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);
+}
+
+.expandSecondary iframe {
+  border: none;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.expandTerminal {
+  width: 100%;
+  height: 100%;
+  background: #0d1117;
+}
+
+.expandMarkdownContent {
+  padding: 32px 40px;
+  font-size: 15px;
+  line-height: 1.7;
+  color: var(--fgColor-default, #1f2328);
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.expandMarkdownContent * { pointer-events: auto; }
+.expandMarkdownContent a { color: var(--fgColor-accent, #0969da); text-decoration: none; }
+.expandMarkdownContent a:hover { text-decoration: underline; }
+.expandMarkdownContent img { max-width: 100%; height: auto; border-radius: 6px; margin: 8px 0; display: block; }
+
+.expandGithubCard {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: var(--bgColor-default, #ffffff);
+}
+
+.expandGithubHeader {
+  padding: 16px 24px;
+  font-size: 18px;
+  font-weight: 600;
+  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+}
+
+.expandGithubBody {
+  flex: 1;
+  overflow: auto;
+  padding: 24px;
+  font-size: 15px;
+  line-height: 1.7;
+}
+
+.expandGithubBody * { pointer-events: auto; }
+.expandGithubBody a { color: var(--fgColor-accent, #0969da); }
+
+.expandLinkCard {
+  padding: 32px 40px;
+}
+
+.expandLinkTitle {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0 0 8px;
+}

package/src/canvas/widgets/PrototypeEmbed.test.jsx

@@ -4,7 +4,7 @@ import { getEmbedChromeVars } from './embedTheme.js'
 describe('getEmbedChromeVars', () => {
   it('follows toolbar theme variants for embed edit chrome', () => {
     expect(getEmbedChromeVars('light')['--bgColor-default']).toBe('#ffffff')
-    expect(getEmbedChromeVars('dark')['--bgColor-default']).toBe('#161b22')
-    expect(getEmbedChromeVars('dark_dimmed')['--bgColor-default']).toBe('#22272e')
+    expect(getEmbedChromeVars('dark')['--bgColor-default']).toBe('#0d1117')
+    expect(getEmbedChromeVars('dark_dimmed')['--bgColor-default']).toBe('#212830')
   })
 })

package/src/canvas/widgets/SplitExpandModal.jsx

@@ -0,0 +1,234 @@
+/**
+ * SplitExpandModal — reusable full-screen modal for expandable widgets.
+ *
+ * When a connected split-screen-capable widget exists, renders a 50/50
+ * split (ordered by x-coordinate). Otherwise renders single-pane.
+ */
+import { useState, useEffect, useRef, useMemo, useCallback } from 'react'
+import { createPortal } from 'react-dom'
+import { ScreenNormalIcon, MarkGithubIcon } from '@primer/octicons-react'
+import { findConnectedSplitTarget, getPaneOrder, buildSecondaryIframeUrl, reparentTerminalInto, getSplitPaneLabel } from './expandUtils.js'
+import SplitScreenTopBar from './SplitScreenTopBar.jsx'
+import styles from './SplitExpandModal.module.css'
+
+/**
+ * Renders the content for a secondary pane based on widget type.
+ */
+function SecondaryPane({ widget }) {
+  const iframeUrl = useMemo(() => buildSecondaryIframeUrl(widget), [widget])
+  const terminalRef = useRef(null)
+  const cleanupRef = useRef(null)
+
+  // Reparent terminal DOM into the pane
+  useEffect(() => {
+    if ((widget.type !== 'terminal' && widget.type !== 'terminal-read' && widget.type !== 'agent') || !terminalRef.current) return
+    cleanupRef.current = reparentTerminalInto(widget.id, terminalRef.current)
+    return () => {
+      cleanupRef.current?.()
+      cleanupRef.current = null
+    }
+  }, [widget.id, widget.type])
+
+  // iframe-embeddable types
+  if (iframeUrl) {
+    return (
+      <div className={styles.secondaryPane}>
+        <iframe src={iframeUrl} className={styles.secondaryIframe} title="Connected widget" />
+      </div>
+    )
+  }
+
+  // Terminal: reparent its DOM
+  if (widget.type === 'terminal' || widget.type === 'terminal-read' || widget.type === 'agent') {
+    return (
+      <div className={styles.secondaryPane}>
+        <div ref={terminalRef} className={styles.terminalContainer} />
+      </div>
+    )
+  }
+
+  // Markdown: render content from props
+  if (widget.type === 'markdown') {
+    // Import remark inline to avoid making it a hard dep of this module
+    const content = widget.props?.content || ''
+    return (
+      <div className={styles.secondaryPane}>
+        <MarkdownSecondary content={content} />
+      </div>
+    )
+  }
+
+  // Link-preview (GitHub card or plain)
+  if (widget.type === 'link-preview') {
+    return (
+      <div className={styles.secondaryPane}>
+        <LinkPreviewSecondary widget={widget} />
+      </div>
+    )
+  }
+
+  return null
+}
+
+/**
+ * Renders markdown as HTML for the secondary pane.
+ * Uses dynamic import to avoid bundling remark in this module eagerly.
+ */
+function MarkdownSecondary({ content }) {
+  const ref = useRef(null)
+
+  useEffect(() => {
+    if (!ref.current || !content) return
+    let cancelled = false
+    ;(async () => {
+      const { remark } = await import('remark')
+      const remarkGfm = (await import('remark-gfm')).default
+      const remarkHtml = (await import('remark-html')).default
+      if (cancelled) return
+      const result = remark().use(remarkGfm).use(remarkHtml, { sanitize: false }).processSync(content)
+      let html = String(result).replace(/<a\s/g, '<a target="_blank" rel="noopener noreferrer" ')
+      if (ref.current) ref.current.innerHTML = html
+    })()
+    return () => { cancelled = true }
+  }, [content])
+
+  return <div ref={ref} className={styles.markdownContent} />
+}
+
+/**
+ * Renders a link-preview widget's content for the secondary pane.
+ */
+function LinkPreviewSecondary({ widget }) {
+  const { url, title, github } = widget.props || {}
+  const bodyRef = useRef(null)
+
+  useEffect(() => {
+    if (!bodyRef.current) return
+    const bodyHtml = github?.bodyHtml || ''
+    if (bodyHtml) bodyRef.current.innerHTML = bodyHtml
+  }, [github?.bodyHtml])
+
+  if (github) {
+    return (
+      <div className={styles.githubCard}>
+        <div className={styles.githubHeader}>
+          <MarkGithubIcon size={16} />
+          <span className={styles.githubTitle}>{title || url || 'GitHub'}</span>
+        </div>
+        {github.bodyHtml && <div ref={bodyRef} className={styles.githubBody} />}
+      </div>
+    )
+  }
+
+  return (
+    <div className={styles.linkCard}>
+      <p className={styles.linkTitle}>{title || url || 'Link'}</p>
+      {url && (
+        <a href={url} target="_blank" rel="noopener noreferrer" className={styles.linkUrl}>
+          {url}
+        </a>
+      )}
+    </div>
+  )
+}
+
+/**
+ * @param {Object} props
+ * @param {boolean} props.expanded — whether the modal is visible
+ * @param {() => void} props.onClose — callback to close the modal
+ * @param {string} props.widgetId — the primary widget's ID
+ * @param {string} [props.title] — optional title for the top bar
+ * @param {React.ReactNode} props.children — primary pane content
+ */
+export default function SplitExpandModal({ expanded, onClose, widgetId, title, children }) {
+  const connectedWidget = useMemo(
+    () => (expanded ? findConnectedSplitTarget(widgetId) : null),
+    [expanded, widgetId],
+  )
+  const hasSplit = Boolean(connectedWidget)
+  const paneOrder = useMemo(
+    () => (hasSplit ? getPaneOrder(widgetId, connectedWidget) : { primaryIsLeft: true }),
+    [hasSplit, widgetId, connectedWidget],
+  )
+  const [activePane, setActivePane] = useState('left')
+
+  const primaryWidget = useMemo(() => {
+    const bridge = window.__storyboardCanvasBridgeState
+    return bridge?.widgets?.find((w) => w.id === widgetId) || null
+  }, [widgetId, expanded])
+
+  const primaryLabel = useMemo(() => getSplitPaneLabel(primaryWidget) || title || '', [primaryWidget, title])
+  const secondaryLabel = useMemo(() => getSplitPaneLabel(connectedWidget), [connectedWidget])
+  const leftLabel = paneOrder.primaryIsLeft ? primaryLabel : secondaryLabel
+  const rightLabel = paneOrder.primaryIsLeft ? secondaryLabel : primaryLabel
+
+  // Close on Escape
+  useEffect(() => {
+    if (!expanded) return
+    function handleKeyDown(e) {
+      if (e.key === 'Escape') {
+        e.stopPropagation()
+        onClose()
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown, true)
+    return () => document.removeEventListener('keydown', handleKeyDown, true)
+  }, [expanded, onClose])
+
+  if (!expanded) return null
+
+  const primarySide = paneOrder.primaryIsLeft ? 'left' : 'right'
+  const secondarySide = paneOrder.primaryIsLeft ? 'right' : 'left'
+  const primaryPane = <div className={styles.primaryPane} onPointerDown={() => setActivePane(primarySide)}>{children}</div>
+  const secondaryPane = hasSplit ? <div onPointerDown={() => setActivePane(secondarySide)}><SecondaryPane widget={connectedWidget} /></div> : null
+
+  const leftPane = paneOrder.primaryIsLeft ? primaryPane : secondaryPane
+  const rightPane = paneOrder.primaryIsLeft ? secondaryPane : primaryPane
+
+  return createPortal(
+    <div
+      className={styles.backdrop}
+      onClick={onClose}
+      onPointerDown={(e) => e.stopPropagation()}
+      onKeyDown={(e) => e.stopPropagation()}
+      onWheel={(e) => e.stopPropagation()}
+    >
+      <div className={hasSplit ? styles.modalFullscreen : styles.modal} onClick={(e) => e.stopPropagation()}>
+        {hasSplit ? (
+          <>
+            <SplitScreenTopBar
+              leftLabel={leftLabel}
+              rightLabel={rightLabel}
+              activePane={activePane}
+              onClose={onClose}
+            />
+            <div className={styles.bodySplit}>
+              <div className={styles.splitLeft}>{leftPane}</div>
+              <div className={styles.splitRight}>{rightPane}</div>
+            </div>
+          </>
+        ) : (
+          <>
+            {title && (
+              <div className={styles.topBar}>
+                <span className={styles.topBarTitle}>{title}</span>
+                <button className={styles.closeBtn} onClick={onClose} aria-label="Close expanded view" autoFocus>
+                  <ScreenNormalIcon size={16} />
+                </button>
+              </div>
+            )}
+            <div className={styles.body}>
+              {primaryPane}
+            </div>
+            {!title && (
+              <button className={styles.closeBtnFloat} onClick={onClose} aria-label="Close expanded view" autoFocus>
+                ✕
+              </button>
+            )}
+          </>
+        )}
+      </div>
+    </div>,
+    document.body,
+  )
+}