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

package/src/canvas/widgets/ImageWidget.jsx

@@ -1,14 +1,17 @@
-import { useRef, useCallback, useState, forwardRef, useImperativeHandle } from 'react'
+import { useRef, useCallback, useState, useMemo, forwardRef, useImperativeHandle } from 'react'
 import WidgetWrapper from './WidgetWrapper.jsx'
 import ResizeHandle from './ResizeHandle.jsx'
+import ExpandedPane from './ExpandedPane.jsx'
+import CropOverlay from './CropOverlay.jsx'
 import { readProp } from './widgetProps.js'
 import { schemas } from './widgetConfig.js'
-import { toggleImagePrivacy } from '../canvasApi.js'
+import { toggleImagePrivacy, cropAndUpload } from '../canvasApi.js'
+import { findAllConnectedSplitTargets, getSplitPaneLabel, buildPaneForWidget, buildSplitLayout } from './expandUtils.js'
 import styles from './ImageWidget.module.css'
 
 const imageSchema = schemas['image']
 
-function getImageUrl(src) {
+export function getImageUrl(src) {
   if (!src) return ''
   const base = (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
   return `${base}/_storyboard/canvas/images/${src}`
@@ -16,11 +19,18 @@ function getImageUrl(src) {
 
 /**
  * Canvas widget that displays a pasted image.
- * Supports aspect-ratio locked resize and privacy toggle.
+ * Supports aspect-ratio locked resize, privacy toggle, and expand/split-screen.
  */
-const ImageWidget = forwardRef(function ImageWidget({ props, onUpdate, resizable }, ref) {
+const ImageWidget = forwardRef(function ImageWidget({ id, props, onUpdate, resizable }, ref) {
   const containerRef = useRef(null)
+  const imgRef = useRef(null)
   const [naturalRatio, setNaturalRatio] = useState(null)
+  const [naturalSize, setNaturalSize] = useState(null)
+  const [expandMode, setExpandMode] = useState(null)
+  const expanded = expandMode !== null
+  const [cropping, setCropping] = useState(false)
+  const [previousSrc, setPreviousSrc] = useState(null)
+  const [containerSize, setContainerSize] = useState(null)
 
   const src = readProp(props, 'src', imageSchema)
   const isPrivate = readProp(props, 'private', imageSchema)
@@ -34,6 +44,7 @@ const ImageWidget = forwardRef(function ImageWidget({ props, onUpdate, resizable
     const img = e.target
     if (img.naturalWidth && img.naturalHeight) {
       setNaturalRatio(img.naturalWidth / img.naturalHeight)
+      setNaturalSize({ width: img.naturalWidth, height: img.naturalHeight })
     }
   }, [])
 
@@ -43,8 +54,44 @@ const ImageWidget = forwardRef(function ImageWidget({ props, onUpdate, resizable
     onUpdate?.({ width: newWidth, height: newHeight })
   }, [naturalRatio, width, height, onUpdate])
 
+  const handleCropSave = useCallback(async (cropRect) => {
+    if (!src) return
+    const canvasId = window.__storyboardCanvasBridgeState?.canvasId || ''
+    try {
+      const result = await cropAndUpload(src, cropRect, canvasId)
+      if (result.success) {
+        setPreviousSrc(src)
+        onUpdate?.({ src: result.filename })
+      }
+    } catch (err) {
+      console.error('[canvas] Failed to crop image:', err)
+    }
+    setCropping(false)
+  }, [src, onUpdate])
+
+  const handleCropCancel = useCallback(() => {
+    setCropping(false)
+  }, [])
+
+  const handleCropUndo = useCallback(() => {
+    if (previousSrc) {
+      onUpdate?.({ src: previousSrc })
+      setPreviousSrc(null)
+    }
+    setCropping(false)
+  }, [previousSrc, onUpdate])
+
   useImperativeHandle(ref, () => ({
     handleAction(actionId) {
+      if (actionId === 'expand' || actionId === 'expand-single') { setExpandMode('single'); return true }
+      if (actionId === 'split-screen') { setExpandMode('split'); return true }
+      if (actionId === 'crop-image') {
+        // Measure container at activation time (not during render)
+        const el = containerRef.current
+        if (el) setContainerSize({ width: el.offsetWidth, height: el.offsetHeight })
+        setCropping(true)
+        return true
+      }
       if (actionId === 'toggle-private') {
         if (!src) return
         toggleImagePrivacy(src).then((result) => {
@@ -86,23 +133,37 @@ const ImageWidget = forwardRef(function ImageWidget({ props, onUpdate, resizable
   if (typeof width === 'number') sizeStyle.width = `${width}px`
 
   return (
+    <>
     <WidgetWrapper className={styles.imageWrapper}>
-      <div ref={containerRef} className={styles.container} style={sizeStyle}>
+      <div ref={containerRef} className={styles.container} style={sizeStyle} data-crop-active={cropping || undefined}>
         <div className={styles.frame}>
           <img
+            ref={imgRef}
             src={getImageUrl(src)}
             alt=""
             className={styles.image}
             onLoad={handleImageLoad}
             draggable={false}
           />
-          {isPrivate && (
+          {isPrivate && !cropping && (
             <span className={styles.privateBadge} title="Private — not committed to git">
               Private
             </span>
           )}
+          {cropping && (
+            <CropOverlay
+              containerWidth={containerSize?.width || width || 400}
+              containerHeight={containerSize?.height || height || 300}
+              naturalWidth={naturalSize?.width}
+              naturalHeight={naturalSize?.height}
+              onSave={handleCropSave}
+              onCancel={handleCropCancel}
+              onUndo={handleCropUndo}
+              canUndo={!!previousSrc}
+            />
+          )}
         </div>
-        {resizable && (
+        {resizable && !cropping && (
           <ResizeHandle
             targetRef={containerRef}
             minWidth={100}
@@ -112,7 +173,67 @@ const ImageWidget = forwardRef(function ImageWidget({ props, onUpdate, resizable
         )}
       </div>
     </WidgetWrapper>
+    {expanded && (
+      <ImageExpandPane
+        widgetId={id}
+        src={src}
+        splitMode={expandMode === 'split'}
+        onClose={() => setExpandMode(null)}
+      />
+    )}
+    </>
   )
 })
 
+/**
+ * Builds pane configs and renders ExpandedPane for an expanded image widget.
+ */
+function ImageExpandPane({ widgetId, src, 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: 'image', position: { x: 0, y: 0 }, props: {} }
+  }, [widgetId])
+
+  const surface = splitMode ? 'splitbar' : 'fullbar'
+
+  const buildPaneFn = useCallback((widget) => {
+    if (widget.id === widgetId) {
+      return {
+        id: widgetId,
+        label: getSplitPaneLabel(primaryWidget) || 'Image',
+        widgetType: 'image',
+        kind: 'react',
+        render: () => (
+          <div className={styles.expandedImageContainer}>
+            <img
+              src={getImageUrl(src)}
+              alt=""
+              className={styles.expandedImage}
+              draggable={false}
+            />
+          </div>
+        ),
+      }
+    }
+    return buildPaneForWidget(widget, surface)
+  }, [widgetId, primaryWidget, src, surface])
+
+  const layout = useMemo(
+    () => buildSplitLayout(primaryWidget, connectedWidgets, buildPaneFn),
+    [primaryWidget, connectedWidgets, buildPaneFn],
+  )
+
+  return (
+    <ExpandedPane
+      initialLayout={layout}
+      variant={layout.flat().length <= 1 ? 'modal' : 'full'}
+      onClose={onClose}
+    />
+  )
+}
+
 export default ImageWidget

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

@@ -23,6 +23,16 @@
   pointer-events: none;
 }
 
+/* When cropping, the image needs pointer events for the overlay */
+.container[data-crop-active] .image {
+  pointer-events: none;
+}
+
+/* Hide the widget toolbar when crop is active (WidgetChrome reads this) */
+.container[data-crop-active] {
+  overflow: visible;
+}
+
 .privateBadge {
   position: absolute;
   top: 20px;
@@ -37,3 +47,23 @@
   background: var(--bgColor-neutral-emphasis, rgba(0, 0, 0, 0.55));
   pointer-events: none;
 }
+
+/* ── Expanded / split-screen image ───────────────────────────────── */
+
+.expandedImageContainer {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: auto;
+  background: var(--bgColor-inset, #f6f8fa);
+}
+
+.expandedImage {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  border-radius: 0;
+  user-select: none;
+}

package/src/canvas/widgets/LinkPreview.jsx

@@ -6,7 +6,8 @@ import { MarkGithubIcon } from '@primer/octicons-react'
 import WidgetWrapper from './WidgetWrapper.jsx'
 import ResizeHandle from './ResizeHandle.jsx'
 import { readProp, linkPreviewSchema } from './widgetProps.js'
-import SplitExpandModal from './SplitExpandModal.jsx'
+import ExpandedPane from './ExpandedPane.jsx'
+import { findAllConnectedSplitTargets, getSplitPaneLabel, buildPaneForWidget, buildSplitLayout } from './expandUtils.js'
 import styles from './LinkPreview.module.css'
 
 const VIDEO_EXT_RE = /\.(mp4|mov|webm|ogg)(\?[^)]*)?$/i
@@ -107,7 +108,7 @@ function getCommentKindLabel(github) {
   return 'Comment'
 }
 
-function GitHubIssueCard({ id, url, title, github, width, collapsed, expanded, onCloseExpand }) {
+function GitHubIssueCard({ id, url, title, github, width, collapsed, expanded, expandMode, onCloseExpand }) {
   const authors = Array.isArray(github?.authors)
     ? github.authors.filter((a) => typeof a === 'string' && a.trim())
     : []
@@ -206,33 +207,35 @@ function GitHubIssueCard({ id, url, title, github, width, collapsed, expanded, o
         )}
       </div>
     </WidgetWrapper>
-    <SplitExpandModal
-      expanded={expanded}
-      onClose={onCloseExpand}
-      widgetId={id}
-      title={`${kindLabel}: ${titleText || url || 'GitHub'}`}
-    >
-      <div className={styles.expandedIssue}>
-        <header className={styles.expandedIssueHeader}>
-          <h2 className={styles.expandedIssueTitle}>
-            <a href={url || '#'} target="_blank" rel="noopener noreferrer">
-              {titleText || url}
-              {issueNumber && <span className={styles.expandedIssueNumber}> {issueNumber}</span>}
-            </a>
-          </h2>
-          <div className={styles.expandedByline}>
-            {primaryAuthor && (
-              <a href={`https://github.com/${primaryAuthor}`} target="_blank" rel="noopener noreferrer" className={styles.expandedAuthor}>
-                <img src={`https://github.com/${primaryAuthor}.png?size=40`} alt="" width="20" height="20" className={styles.avatar} loading="lazy" />
-                {primaryAuthor}
+    {expanded && (
+      <LinkPreviewExpandPane
+        widgetId={id}
+        label={`${kindLabel}: ${titleText || url || 'GitHub'}`}
+        splitMode={expandMode === 'split'}
+        onClose={onCloseExpand}
+      >
+        <div className={styles.expandedIssue}>
+          <header className={styles.expandedIssueHeader}>
+            <h2 className={styles.expandedIssueTitle}>
+              <a href={url || '#'} target="_blank" rel="noopener noreferrer">
+                {titleText || url}
+                {issueNumber && <span className={styles.expandedIssueNumber}> {issueNumber}</span>}
               </a>
-            )}
-            {createdAgo && <span className={styles.expandedBylineText}>{primaryAuthor ? ` opened ${createdAgo}` : `Opened ${createdAgo}`}</span>}
-          </div>
-        </header>
-        {bodyHtml && <div className={styles.expandedIssueBody} dangerouslySetInnerHTML={{ __html: bodyHtml }} />}
-      </div>
-    </SplitExpandModal>
+            </h2>
+            <div className={styles.expandedByline}>
+              {primaryAuthor && (
+                <a href={`https://github.com/${primaryAuthor}`} target="_blank" rel="noopener noreferrer" className={styles.expandedAuthor}>
+                  <img src={`https://github.com/${primaryAuthor}.png?size=40`} alt="" width="20" height="20" className={styles.avatar} loading="lazy" />
+                  {primaryAuthor}
+                </a>
+              )}
+              {createdAgo && <span className={styles.expandedBylineText}>{primaryAuthor ? ` opened ${createdAgo}` : `Opened ${createdAgo}`}</span>}
+            </div>
+          </header>
+          {bodyHtml && <div className={styles.expandedIssueBody} dangerouslySetInnerHTML={{ __html: bodyHtml }} />}
+        </div>
+      </LinkPreviewExpandPane>
+    )}
     </>
   )
 }
@@ -252,11 +255,13 @@ export default forwardRef(function LinkPreview({ id, props, onUpdate, resizable
   const cardRef = useRef(null)
   const inputRef = useRef(null)
   const [editing, setEditing] = useState(false)
-  const [expanded, setExpanded] = useState(false)
+  const [expandMode, setExpandMode] = useState(null)
+  const expanded = expandMode !== null
 
   useImperativeHandle(ref, () => ({
     handleAction(actionId) {
-      if (actionId === 'expand' || actionId === 'split-screen') { setExpanded(true); return true }
+      if (actionId === 'expand' || actionId === 'expand-single') { setExpandMode('single'); return true }
+      if (actionId === 'split-screen') { setExpandMode('split'); return true }
       if (actionId === 'open-external') {
         if (url) window.open(url, '_blank', 'noopener')
         return true
@@ -291,7 +296,8 @@ export default forwardRef(function LinkPreview({ id, props, onUpdate, resizable
         width={width}
         collapsed={!!props?.collapsed}
         expanded={expanded}
-        onCloseExpand={() => setExpanded(false)}
+        expandMode={expandMode}
+        onCloseExpand={() => setExpandMode(null)}
       />
     )
   }
@@ -361,19 +367,62 @@ export default forwardRef(function LinkPreview({ id, props, onUpdate, resizable
       </div>
       {resizable && <ResizeHandle targetRef={cardRef} width={width} height={height} onResize={handleResize} />}
     </div>
-    <SplitExpandModal
-      expanded={expanded}
-      onClose={() => setExpanded(false)}
-      widgetId={id}
-      title={title || hostname || 'Link Preview'}
-    >
-      <div className={styles.expandedLink}>
-        {ogImage && <img className={styles.expandedOgImage} src={ogImage} alt="" loading="lazy" />}
-        <h2 className={styles.expandedTitle}>{title || hostname || url || 'Untitled'}</h2>
-        {description && <p className={styles.expandedDescription}>{description}</p>}
-        {url && <a href={url} target="_blank" rel="noopener noreferrer" className={styles.expandedUrl}>{url}</a>}
-      </div>
-    </SplitExpandModal>
+    {expanded && (
+      <LinkPreviewExpandPane
+        widgetId={id}
+        label={title || hostname || 'Link Preview'}
+        splitMode={expandMode === 'split'}
+        onClose={() => setExpandMode(null)}
+      >
+        <div className={styles.expandedLink}>
+          {ogImage && <img className={styles.expandedOgImage} src={ogImage} alt="" loading="lazy" />}
+          <h2 className={styles.expandedTitle}>{title || hostname || url || 'Untitled'}</h2>
+          {description && <p className={styles.expandedDescription}>{description}</p>}
+          {url && <a href={url} target="_blank" rel="noopener noreferrer" className={styles.expandedUrl}>{url}</a>}
+        </div>
+      </LinkPreviewExpandPane>
+    )}
     </>
   )
 })
+
+/**
+ * Builds pane configs and renders ExpandedPane for an expanded link-preview widget.
+ */
+function LinkPreviewExpandPane({ widgetId, label, splitMode, onClose, children }) {
+  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: 'link-preview', position: { x: 0, y: 0 }, props: {} }
+  }, [widgetId])
+
+  const buildPaneFn = useCallback((widget) => {
+    if (widget.id === widgetId) {
+      return {
+        id: widgetId,
+        label,
+        widgetType: 'link-preview',
+        kind: 'react',
+        render: () => children,
+      }
+    }
+    return buildPaneForWidget(widget)
+  }, [widgetId, label, children])
+
+  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/canvas/widgets/MarkdownBlock.jsx

@@ -5,8 +5,9 @@ import remarkHtml from 'remark-html'
 import WidgetWrapper from './WidgetWrapper.jsx'
 import ResizeHandle from './ResizeHandle.jsx'
 import { readProp } from './widgetProps.js'
-import { schemas } from './widgetConfig.js'
-import SplitExpandModal from './SplitExpandModal.jsx'
+import { schemas, getFeaturesForSurface } from './widgetConfig.js'
+import ExpandedPane from './ExpandedPane.jsx'
+import { findAllConnectedSplitTargets, getSplitPaneLabel, buildPaneForWidget, buildSplitLayout } from './expandUtils.js'
 import styles from './MarkdownBlock.module.css'
 
 const markdownSchema = schemas['markdown']
@@ -72,7 +73,8 @@ export default forwardRef(function MarkdownBlock({ id, props, onUpdate, resizabl
   const collapsed = !!props?.collapsed
   const canEdit = typeof onUpdate === 'function'
   const [editing, setEditing] = useState(false)
-  const [expanded, setExpanded] = useState(false)
+  const [expandMode, setExpandMode] = useState(null)
+  const expanded = expandMode !== null
   const editingActive = canEdit && editing
   const textareaRef = useRef(null)
   const blockRef = useRef(null)
@@ -80,7 +82,8 @@ export default forwardRef(function MarkdownBlock({ id, props, onUpdate, resizabl
 
   useImperativeHandle(ref, () => ({
     handleAction(actionId) {
-      if (actionId === 'expand' || actionId === 'split-screen') { setExpanded(true); return true }
+      if (actionId === 'expand' || actionId === 'expand-single') { setExpandMode('single'); return true }
+      if (actionId === 'split-screen') { setExpandMode('split'); return true }
       return false
     },
   }), [])
@@ -208,19 +211,141 @@ export default forwardRef(function MarkdownBlock({ id, props, onUpdate, resizabl
         )}
       </div>
     </WidgetWrapper>
-    <SplitExpandModal
-      expanded={expanded}
-      onClose={() => setExpanded(false)}
-      widgetId={id}
-      title="Markdown"
-    >
-      <div
-        className={styles.expandedPreview}
-        dangerouslySetInnerHTML={{
-          __html: renderedHtml || '<p>No content</p>',
-        }}
+    {expanded && (
+      <MarkdownExpandPane
+        widgetId={id}
+        content={content}
+        splitMode={expandMode === 'split'}
+        onClose={() => setExpandMode(null)}
+        onUpdate={onUpdate}
       />
-    </SplitExpandModal>
+    )}
     </>
   )
 })
+
+/**
+ * Builds pane configs and renders ExpandedPane for an expanded markdown widget.
+ */
+function MarkdownExpandPane({ widgetId, content, splitMode, onClose, onUpdate }) {
+  const [editing, setEditing] = useState(false)
+  const canEdit = typeof onUpdate === 'function'
+
+  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: 'markdown', position: { x: 0, y: 0 }, props: {} }
+  }, [widgetId])
+
+  // Surface: fullbar for single expand, splitbar for split
+  const surface = splitMode ? 'splitbar' : 'fullbar'
+  const surfaceFeatures = useMemo(
+    () => canEdit ? getFeaturesForSurface('markdown', surface) : [],
+    [canEdit, surface],
+  )
+
+  const getState = useCallback((key) => {
+    if (key === 'editing') return editing
+    return undefined
+  }, [editing])
+
+  const handleAction = useCallback((actionId) => {
+    if (actionId === 'toggle-edit') {
+      setEditing((v) => !v)
+    }
+  }, [])
+
+  const buildPaneFn = useCallback((widget) => {
+    if (widget.id === widgetId) {
+      return {
+        id: widgetId,
+        label: getSplitPaneLabel(primaryWidget) || 'Markdown',
+        widgetType: 'markdown',
+        kind: 'react',
+        features: surfaceFeatures,
+        getState,
+        onAction: handleAction,
+        render: () => (
+          <ExpandedMarkdownEditor
+            content={content}
+            onUpdate={onUpdate}
+            editing={editing}
+            onToggleEdit={() => setEditing((v) => !v)}
+          />
+        ),
+      }
+    }
+    return buildPaneForWidget(widget, surface)
+  }, [widgetId, primaryWidget, content, onUpdate, editing, surfaceFeatures, getState, handleAction, surface])
+
+  const layout = useMemo(
+    () => buildSplitLayout(primaryWidget, connectedWidgets, buildPaneFn),
+    [primaryWidget, connectedWidgets, buildPaneFn],
+  )
+
+  return (
+    <ExpandedPane
+      initialLayout={layout}
+      variant={layout.flat().length <= 1 ? 'modal' : 'full'}
+      onClose={onClose}
+    />
+  )
+}
+
+/**
+ * Editable markdown view for expanded/split-screen panes.
+ * Self-contained: renders markdown from raw content with syntax highlighting.
+ * Editing state is controlled externally via props (toggle button lives in the title bar).
+ */
+export function ExpandedMarkdownEditor({ content, onUpdate, editing, onToggleEdit }) {
+  const textareaRef = useRef(null)
+  const canEdit = typeof onUpdate === 'function'
+
+  const rawHtml = useMemo(() => renderMarkdown(content), [content])
+  const [renderedHtml, setRenderedHtml] = useState(rawHtml)
+
+  useEffect(() => {
+    setRenderedHtml(rawHtml)
+    if (!rawHtml.includes('<code class="language-')) return
+    let cancelled = false
+    highlightCodeBlocks(rawHtml).then((highlighted) => {
+      if (!cancelled) setRenderedHtml(highlighted)
+    })
+    return () => { cancelled = true }
+  }, [rawHtml])
+
+  useEffect(() => {
+    if (editing && textareaRef.current) {
+      const len = textareaRef.current.value.length
+      textareaRef.current.setSelectionRange(len, len)
+      textareaRef.current.focus({ preventScroll: true })
+    }
+  }, [editing])
+
+  if (editing && canEdit) {
+    return (
+      <textarea
+        ref={textareaRef}
+        className={styles.expandedEditor}
+        value={content}
+        onChange={(e) => onUpdate({ content: e.target.value })}
+        onKeyDown={(e) => { if (e.key === 'Escape') onToggleEdit?.() }}
+        placeholder="Write markdown…"
+      />
+    )
+  }
+
+  return (
+    <div
+      className={styles.expandedPreview}
+      style={{ flex: 1, overflow: 'auto' }}
+      onDoubleClick={canEdit ? onToggleEdit : undefined}
+      dangerouslySetInnerHTML={{
+        __html: renderedHtml || '<p>No content</p>',
+      }}
+    />
+  )
+}

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

@@ -231,10 +231,15 @@
 /* ── Expanded preview in modal ──────────────────────────────────── */
 
 .expandedPreview {
+  --sb--markdown-bg: var(--bgColor-default, #ffffff);
+  --sb--markdown-fg: var(--fgColor-default, #1f2328);
+  --sb--markdown-muted: var(--fgColor-muted, #656d76);
+  --sb--markdown-accent: var(--bgColor-accent-emphasis, #2f81f7);
   padding: 32px 40px;
   font-size: 15px;
   line-height: 1.7;
   color: var(--sb--markdown-fg);
+  background: var(--sb--markdown-bg);
   font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
   max-width: 800px;
   margin: 0 auto;
@@ -350,3 +355,23 @@
   list-style: none;
   margin-left: -24px;
 }
+
+/* ── Expanded editor ─────────────────────────────────────────────── */
+
+.expandedEditor {
+  display: block;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 32px 40px;
+  border: none;
+  outline: none;
+  resize: none;
+  background: var(--bgColor-default, #ffffff);
+  font-family: ui-monospace, SFMono-Regular, monospace;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--fgColor-default, #1f2328);
+  max-width: 800px;
+  margin: 0 auto;
+}