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

package/src/canvas/widgets/PrototypeEmbed.jsx

@@ -1,13 +1,12 @@
 import { useState, useRef, useEffect, useCallback, useMemo, forwardRef, useImperativeHandle } from 'react'
-import { createPortal } from 'react-dom'
 import { buildPrototypeIndex } from '@dfosco/storyboard-core'
 import WidgetWrapper from './WidgetWrapper.jsx'
 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 { findAllConnectedSplitTargets, getSplitPaneLabel, buildPaneForWidget, buildSplitLayout } from './expandUtils.js'
+import ExpandedPane from './ExpandedPane.jsx'
 import styles from './PrototypeEmbed.module.css'
 import overlayStyles from './embedOverlay.module.css'
 
@@ -66,7 +65,8 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
 
   const [editing, setEditing] = useState(false)
   const [interactive, setInteractive] = useState(false)
-  const [expanded, setExpanded] = useState(false)
+  const [expandMode, setExpandMode] = useState(null)
+  const expanded = expandMode !== null
   const [filter, setFilter] = useState('')
   const [canvasTheme, setCanvasTheme] = useState(() => resolveCanvasThemeFromStorage())
   const inputRef = useRef(null)
@@ -193,19 +193,6 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
     return () => document.removeEventListener('storyboard:theme:changed', readToolbarTheme)
   }, [])
 
-  // Close expanded modal on Escape
-  useEffect(() => {
-    if (!expanded) return
-    function handleKeyDown(e) {
-      if (e.key === 'Escape') {
-        e.stopPropagation()
-        setExpanded(false)
-      }
-    }
-    document.addEventListener('keydown', handleKeyDown, true)
-    return () => document.removeEventListener('keydown', handleKeyDown, true)
-  }, [expanded])
-
   // Reparent iframe between inline and modal
   useEffect(() => {
     const iframe = iframeRef.current
@@ -262,8 +249,10 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
     handleAction(actionId) {
       if (actionId === 'edit') {
         setEditing(true)
-      } else if (actionId === 'expand' || actionId === 'split-screen') {
-        setExpanded(true)
+      } else if (actionId === 'expand' || actionId === 'expand-single') {
+        setExpandMode('single')
+      } else if (actionId === 'split-screen') {
+        setExpandMode('split')
       } else if (actionId === 'open-external') {
         if (rawSrc) window.open(rawSrc, '_blank', 'noopener')
       } else if (actionId === 'zoom-in') {
@@ -384,6 +373,7 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
                 }}
                 title={`${prototypeTitle} prototype`}
                 sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
+                onLoad={(e) => e.target.blur()}
               />
             </div>
             {!interactive && !expanded && (
@@ -417,172 +407,58 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
       </div>
       {resizable && <ResizeHandle targetRef={embedRef} width={width} height={height} onResize={handleResize} />}
     </WidgetWrapper>
-    {createPortal(
-      <PrototypeExpandModal
-        expanded={expanded}
-        onClose={() => setExpanded(false)}
-        modalContainerRef={modalContainerRef}
+    {expanded && (
+      <PrototypeExpandPane
         widgetId={widgetId}
-      />,
-      document.body
+        modalContainerRef={modalContainerRef}
+        splitMode={expandMode === 'split'}
+        onClose={() => setExpandMode(null)}
+      />
     )}
     </>
   )
 })
 
 /**
- * PrototypeExpandModal — the existing expand modal with split-screen support.
- * Keeps iframe reparenting in the primary pane, adds a secondary pane if connected.
+ * Builds pane configs and renders ExpandedPane for an expanded prototype widget.
+ * The primary pane is an external pane that receives the iframe via reparenting.
  */
-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],
+function PrototypeExpandPane({ widgetId, modalContainerRef, splitMode, onClose }) {
+  const connectedWidgets = useMemo(
+    () => splitMode ? findAllConnectedSplitTargets(widgetId) : [],
+    [widgetId, splitMode],
   )
-  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>
-      )
+    return bridge?.widgets?.find((w) => w.id === widgetId) || { id: widgetId, type: 'prototype', position: { x: 0, y: 0 }, props: {} }
+  }, [widgetId])
+
+  const buildPaneFn = useCallback((widget) => {
+    if (widget.id === widgetId) {
+      return {
+        id: widgetId,
+        label: getSplitPaneLabel(primaryWidget),
+        widgetType: 'prototype',
+        kind: 'external',
+        attach: (container) => {
+          modalContainerRef.current = container
+          return () => { modalContainerRef.current = null }
+        },
+      }
     }
-  }
-
-  const leftPane = paneOrder.primaryIsLeft ? primaryPane : secondaryPane
-  const rightPane = paneOrder.primaryIsLeft ? secondaryPane : primaryPane
+    return buildPaneForWidget(widget)
+  }, [widgetId, primaryWidget, modalContainerRef])
 
-  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>
+  const layout = useMemo(
+    () => buildSplitLayout(primaryWidget, connectedWidgets, buildPaneFn),
+    [primaryWidget, connectedWidgets, buildPaneFn],
   )
-}
-
-/** 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>
+    <ExpandedPane
+      initialLayout={layout}
+      variant={layout.flat().length <= 1 ? 'modal' : 'full'}
+      onClose={onClose}
+    />
   )
 }

package/src/canvas/widgets/ResizeHandle.jsx

@@ -13,9 +13,12 @@ import styles from './ResizeHandle.module.css'
  * @param {React.RefObject} props.targetRef - ref to the element being resized (reads offsetWidth/Height)
  * @param {number} [props.minWidth=180]  - minimum allowed width
  * @param {number} [props.minHeight=60]  - minimum allowed height
+ * @param {'both'|'vertical'|'horizontal'} [props.axis='both'] - constrain resize to a single axis
  * @param {Function} props.onResize - callback: (width, height) => void
+ * @param {Function} [props.onResizeStart] - called when drag begins
+ * @param {Function} [props.onResizeEnd] - called with final (width, height) on drag end
  */
-export default function ResizeHandle({ targetRef, minWidth = 180, minHeight = 60, onResize }) {
+export default function ResizeHandle({ targetRef, minWidth = 180, minHeight = 60, axis = 'both', onResize, onResizeStart, onResizeEnd }) {
   const handleMouseDown = useCallback((e) => {
     e.stopPropagation()
     e.preventDefault()
@@ -27,29 +30,37 @@ export default function ResizeHandle({ targetRef, minWidth = 180, minHeight = 60
     const startY = e.clientY
     const startW = el.offsetWidth
     const startH = el.offsetHeight
+    let lastW = startW
+    let lastH = startH
+
+    onResizeStart?.()
 
     function onMove(ev) {
-      const newW = Math.max(minWidth, startW + ev.clientX - startX)
-      const newH = Math.max(minHeight, startH + ev.clientY - startY)
-      onResize?.(newW, newH)
+      lastW = axis === 'vertical' ? startW : Math.max(minWidth, startW + ev.clientX - startX)
+      lastH = axis === 'horizontal' ? startH : Math.max(minHeight, startH + ev.clientY - startY)
+      onResize?.(lastW, lastH)
     }
 
     function onUp() {
       document.removeEventListener('mousemove', onMove)
       document.removeEventListener('mouseup', onUp)
+      onResizeEnd?.(lastW, lastH)
     }
 
     document.addEventListener('mousemove', onMove)
     document.addEventListener('mouseup', onUp)
-  }, [targetRef, minWidth, minHeight, onResize])
+  }, [targetRef, minWidth, minHeight, axis, onResize, onResizeStart, onResizeEnd])
+
+  const cursor = axis === 'vertical' ? 'ns-resize' : axis === 'horizontal' ? 'ew-resize' : 'nwse-resize'
 
   return (
     <div
       className={styles.handle}
+      style={axis !== 'both' ? { cursor } : undefined}
       onMouseDown={handleMouseDown}
       onPointerDown={(e) => e.stopPropagation()}
       role="separator"
-      aria-orientation="horizontal"
+      aria-orientation={axis === 'vertical' ? 'vertical' : 'horizontal'}
       aria-label="Resize"
     />
   )

package/src/canvas/widgets/StoryWidget.jsx

@@ -11,21 +11,17 @@
 import { forwardRef, useImperativeHandle, useRef, useCallback, useState, useEffect, useMemo } from 'react'
 import { getStoryData } from '@dfosco/storyboard-core'
 import { createInspectorHighlighter } from '@dfosco/storyboard-core/inspector/highlighter'
+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 (
-    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
-      <path d="M5.21173 15.1113L2.52473 12.4243C2.29041 12.1899 2.29041 11.8101 2.52473 11.5757L5.21173 8.88873C5.44605 8.65442 5.82595 8.65442 6.06026 8.88873L8.74727 11.5757C8.98158 11.8101 8.98158 12.1899 8.74727 12.4243L6.06026 15.1113C5.82595 15.3456 5.44605 15.3456 5.21173 15.1113Z" />
-      <path d="M11.5757 21.475L8.88874 18.788C8.65443 18.5537 8.65443 18.1738 8.88874 17.9395L11.5757 15.2525C11.8101 15.0182 12.19 15.0182 12.4243 15.2525L15.1113 17.9395C15.3456 18.1738 15.3456 18.5537 15.1113 18.788L12.4243 21.475C12.19 21.7094 11.8101 21.7094 11.5757 21.475Z" />
-      <path d="M17.9395 15.1113L15.2525 12.4243C15.0182 12.1899 15.0182 11.8101 15.2525 11.5757L17.9395 8.88873C18.1738 8.65442 18.5537 8.65442 18.788 8.88873L21.475 11.5757C21.7094 11.8101 21.7094 12.1899 21.475 12.4243L18.788 15.1113C18.5537 15.3456 18.1738 15.3456 17.9395 15.1113Z" />
-      <path d="M11.5757 8.74727L8.88874 6.06026C8.65443 5.82595 8.65443 5.44605 8.88874 5.21173L11.5757 2.52473C11.8101 2.29041 12.19 2.29041 12.4243 2.52473L15.1113 5.21173C15.3456 5.44605 15.3456 5.82595 15.1113 6.06026L12.4243 8.74727C12.19 8.98158 11.8101 8.98158 11.5757 8.74727Z" />
-    </svg>
-  )
+  return <Icon name="iconoir/keyframe" size={size} />
 }
 
 function resolveStoryUrl(storyId, exportName) {
@@ -43,9 +39,10 @@ const _storySourcesCache = {}
 
 async function fetchStorySource(modulePath) {
   if (modulePath in _storySourcesCache) return _storySourcesCache[modulePath]
-  const url = modulePath.startsWith('/') ? modulePath : `/${modulePath}`
-  const res = await fetch(`${url}?raw`)
-  if (!res.ok) throw new Error(`Failed to fetch ${url}`)
+  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
@@ -58,6 +55,8 @@ export default forwardRef(function StoryWidget({ id: widgetId, props, onUpdate,
   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)
@@ -156,6 +155,8 @@ export default forwardRef(function StoryWidget({ id: widgetId, props, onUpdate,
     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) {
@@ -213,6 +214,7 @@ export default forwardRef(function StoryWidget({ id: widgetId, props, onUpdate,
   if (typeof height === 'number') sizeStyle.height = `${height}px`
 
   return (
+    <>
     <WidgetWrapper>
       <div ref={containerRef} className={styles.container} style={sizeStyle}>
         <div className={styles.header}>
@@ -247,6 +249,7 @@ export default forwardRef(function StoryWidget({ id: widgetId, props, onUpdate,
                 src={effectiveSrc}
                 className={styles.iframe}
                 title={displayName}
+                onLoad={(e) => e.target.blur()}
               />
             </div>
 
@@ -276,5 +279,56 @@ export default forwardRef(function StoryWidget({ id: widgetId, props, onUpdate,
       </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 "{storyId}" 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/canvas/widgets/TerminalReadWidget.jsx

@@ -56,10 +56,16 @@ export default function TerminalReadWidget({ id, props }) {
       if (!canvasId) { setFailed(true); return }
 
       const urls = isProduction()
-        ? [`${baseUrl}_storyboard/terminal-snapshots/${canvasId}/${id}.json`]
+        ? [
+            // 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/${canvasId}/terminal-snapshot/${id}`,
-            `${baseUrl}_storyboard/terminal-snapshots/${canvasId}/${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) {
@@ -68,7 +74,7 @@ export default function TerminalReadWidget({ id, props }) {
           if (!res.ok) continue
           const data = await res.json()
           if (cancelled) return
-          const text = data.content || data.output || ''
+          const text = data.paneContent || data.content || data.output || ''
           setContent(text)
 
           const converter = await getConverter()
@@ -100,7 +106,7 @@ export default function TerminalReadWidget({ id, props }) {
 
   return (
     <div className={styles.container}>
-      <div className={styles.titleBar}>
+      <div className={`tc-drag-handle ${styles.titleBar}`}>
         <span>{titleLabel}</span>
         <span className={styles.readOnlyBadge}>read only</span>
       </div>

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

@@ -19,10 +19,12 @@
   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;
+  cursor: grab;
+  padding: 2px 6px;
+  border-radius: 4px;
 }
 
 [data-widget-selected] .titleBar {