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

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) => {
@@ -59,7 +106,7 @@ const ImageWidget = forwardRef(function ImageWidget({ props, onUpdate, resizable
         const url = getImageUrl(src)
         const a = document.createElement('a')
         a.href = url
-        a.download = src.replace(/^_/, '')
+        a.download = src.replace(/^~/, '')
         document.body.appendChild(a)
         a.click()
         document.body.removeChild(a)
@@ -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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState, forwardRef, useImperativeHandle } from 'react'
 import { remark } from 'remark'
 import remarkGfm from 'remark-gfm'
 import remarkHtml from 'remark-html'
@@ -6,6 +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 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
@@ -106,7 +108,7 @@ function getCommentKindLabel(github) {
   return 'Comment'
 }
 
-function GitHubIssueCard({ url, title, github, width, collapsed, onUpdate }) {
+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())
     : []
@@ -146,6 +148,7 @@ function GitHubIssueCard({ url, title, github, width, collapsed, onUpdate }) {
   }
 
   return (
+    <>
     <WidgetWrapper>
       <div className={`${styles.issueCard} ${collapsed ? styles.issueCardCollapsed : ''}`} style={sizeStyle}>
         <div className={styles.typeBar}>
@@ -204,10 +207,40 @@ function GitHubIssueCard({ url, title, github, width, collapsed, onUpdate }) {
         )}
       </div>
     </WidgetWrapper>
+    {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>
+            </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>
+    )}
+    </>
   )
 }
 
-export default function LinkPreview({ props, onUpdate, resizable }) {
+export default forwardRef(function LinkPreview({ id, props, onUpdate, resizable }, ref) {
   const url = readProp(props, 'url', linkPreviewSchema)
   const title = readProp(props, 'title', linkPreviewSchema)
   const github = props?.github && typeof props.github === 'object' ? props.github : null
@@ -222,6 +255,20 @@ export default function LinkPreview({ props, onUpdate, resizable }) {
   const cardRef = useRef(null)
   const inputRef = useRef(null)
   const [editing, setEditing] = useState(false)
+  const [expandMode, setExpandMode] = useState(null)
+  const expanded = expandMode !== null
+
+  useImperativeHandle(ref, () => ({
+    handleAction(actionId) {
+      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
+      }
+      return false
+    },
+  }), [url])
 
   const startEditing = useCallback(() => {
     if (!canEdit) return
@@ -242,12 +289,15 @@ export default function LinkPreview({ props, onUpdate, resizable }) {
   if (github) {
     return (
       <GitHubIssueCard
+        id={id}
         url={url}
         title={title}
         github={github}
         width={width}
         collapsed={!!props?.collapsed}
-        onUpdate={onUpdate}
+        expanded={expanded}
+        expandMode={expandMode}
+        onCloseExpand={() => setExpandMode(null)}
       />
     )
   }
@@ -262,6 +312,7 @@ export default function LinkPreview({ props, onUpdate, resizable }) {
   const handleResize = (w, h) => onUpdate?.({ width: w, height: h })
 
   return (
+    <>
     <div className={styles.container}>
       <div ref={cardRef} className={styles.card} style={sizeStyle}>
         {ogImage && (
@@ -316,5 +367,62 @@ export default function LinkPreview({ props, onUpdate, resizable }) {
       </div>
       {resizable && <ResizeHandle targetRef={cardRef} width={width} height={height} onResize={handleResize} />}
     </div>
+    {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/LinkPreview.module.css

@@ -417,3 +417,130 @@
   font-size: 12px;
   color: var(--fgColor-danger, #cf222e);
 }
+
+/* ── Expanded issue view in modal ─────────────────────────────────── */
+
+.expandedIssue {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: var(--bgColor-default, #ffffff);
+  font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
+}
+
+.expandedIssueHeader {
+  padding: 24px 40px 16px;
+  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+}
+
+.expandedIssueTitle {
+  margin: 0 0 8px;
+  font-size: 28px;
+  font-weight: 400;
+  line-height: 1.25;
+  color: var(--fgColor-default, #1f2328);
+}
+
+.expandedIssueTitle a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.expandedIssueTitle a:hover {
+  text-decoration: underline;
+}
+
+.expandedIssueNumber {
+  color: var(--fgColor-muted, #656d76);
+}
+
+.expandedByline {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+}
+
+.expandedAuthor {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  text-decoration: none;
+  color: var(--fgColor-default, #1f2328);
+  font-weight: 600;
+}
+
+.expandedAuthor:hover {
+  text-decoration: underline;
+}
+
+.expandedBylineText {
+  color: var(--fgColor-muted, #656d76);
+}
+
+.expandedIssueBody {
+  flex: 1;
+  overflow: auto;
+  padding: 24px 40px;
+  font-size: 15px;
+  line-height: 1.7;
+  color: var(--fgColor-default, #1f2328);
+  max-width: 800px;
+}
+
+.expandedIssueBody * { pointer-events: auto; }
+.expandedIssueBody a { color: var(--fgColor-accent, #0969da); text-decoration: none; }
+.expandedIssueBody a:hover { text-decoration: underline; }
+.expandedIssueBody img { max-width: 100%; height: auto; border-radius: 6px; margin: 8px 0; display: block; }
+.expandedIssueBody video { max-width: 100%; height: auto; border-radius: 6px; margin: 8px 0; display: block; }
+.expandedIssueBody h1 { font-size: 20px; font-weight: 700; margin: 16px 0 8px; border-bottom: 1px solid var(--borderColor-muted, #d8dee4); padding-bottom: 4px; }
+.expandedIssueBody h2 { font-size: 17px; font-weight: 600; margin: 14px 0 6px; }
+.expandedIssueBody h3 { font-size: 15px; font-weight: 600; margin: 12px 0 4px; }
+.expandedIssueBody p { margin: 0 0 12px; }
+.expandedIssueBody code { background: var(--bgColor-neutral-muted, #afb8c133); padding: 2px 5px; border-radius: 4px; font-size: 13px; font-family: ui-monospace, SFMono-Regular, monospace; }
+.expandedIssueBody 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); }
+.expandedIssueBody pre code { background: none; padding: 0; }
+.expandedIssueBody ul { margin: 0 0 12px; padding-left: 24px; list-style: disc; }
+.expandedIssueBody ol { margin: 0 0 12px; padding-left: 24px; list-style: decimal; }
+.expandedIssueBody li { margin: 0 0 4px; display: list-item; }
+.expandedIssueBody blockquote { border-left: 4px solid var(--borderColor-default, #d0d7de); margin: 12px 0; padding: 4px 16px; color: var(--fgColor-muted, #656d76); }
+
+/* ── Expanded plain link view ─────────────────────────────────────── */
+
+.expandedLink {
+  padding: 32px 40px;
+  font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
+}
+
+.expandedOgImage {
+  max-width: 100%;
+  max-height: 400px;
+  object-fit: cover;
+  border-radius: 8px;
+  margin-bottom: 16px;
+  display: block;
+}
+
+.expandedTitle {
+  margin: 0 0 8px;
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--fgColor-default, #1f2328);
+}
+
+.expandedDescription {
+  margin: 0 0 12px;
+  font-size: 15px;
+  line-height: 1.5;
+  color: var(--fgColor-muted, #656d76);
+}
+
+.expandedUrl {
+  font-size: 14px;
+  color: var(--fgColor-accent, #0969da);
+  text-decoration: none;
+}
+
+.expandedUrl:hover {
+  text-decoration: underline;
+}