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

package/src/canvas/widgets/SplitExpandModal.jsx

@@ -1,234 +0,0 @@
-/**
- * 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,
-  )
-}

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

@@ -1,335 +0,0 @@
-/* ── 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

@@ -1,30 +0,0 @@
-/**
- * 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

@@ -1,58 +0,0 @@
-/* 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);
-}