@dfosco/storyboard-react 3.11.1-beta.0 → 3.11.1

package/src/canvas/widgets/ImageWidget.jsx

@@ -0,0 +1,115 @@
+import { useRef, useCallback, useState, forwardRef, useImperativeHandle } from 'react'
+import WidgetWrapper from './WidgetWrapper.jsx'
+import ResizeHandle from './ResizeHandle.jsx'
+import { readProp } from './widgetProps.js'
+import { schemas } from './widgetConfig.js'
+import { toggleImagePrivacy } from '../canvasApi.js'
+import styles from './ImageWidget.module.css'
+
+const imageSchema = schemas['image']
+
+function getImageUrl(src) {
+  if (!src) return ''
+  const base = (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
+  return `${base}/_storyboard/canvas/images/${src}`
+}
+
+/**
+ * Canvas widget that displays a pasted image.
+ * Supports aspect-ratio locked resize and privacy toggle.
+ */
+const ImageWidget = forwardRef(function ImageWidget({ props, onUpdate, resizable }, ref) {
+  const containerRef = useRef(null)
+  const [naturalRatio, setNaturalRatio] = useState(null)
+
+  const src = readProp(props, 'src', imageSchema)
+  const isPrivate = readProp(props, 'private', imageSchema)
+  const width = readProp(props, 'width', imageSchema)
+  const height = readProp(props, 'height', imageSchema)
+
+  const handleImageLoad = useCallback((e) => {
+    const img = e.target
+    if (img.naturalWidth && img.naturalHeight) {
+      setNaturalRatio(img.naturalWidth / img.naturalHeight)
+    }
+  }, [])
+
+  const handleResize = useCallback((newWidth) => {
+    const ratio = naturalRatio || (width && height ? width / height : 4 / 3)
+    const newHeight = Math.round(newWidth / ratio)
+    onUpdate?.({ width: newWidth, height: newHeight })
+  }, [naturalRatio, width, height, onUpdate])
+
+  useImperativeHandle(ref, () => ({
+    handleAction(actionId) {
+      if (actionId === 'toggle-private') {
+        if (!src) return
+        toggleImagePrivacy(src).then((result) => {
+          if (result.success) {
+            onUpdate?.({ src: result.filename, private: result.private })
+          }
+        }).catch((err) => {
+          console.error('[canvas] Failed to toggle image privacy:', err)
+        })
+      } else if (actionId === 'download-image') {
+        if (!src) return
+        const url = getImageUrl(src)
+        const a = document.createElement('a')
+        a.href = url
+        a.download = src.replace(/^_/, '')
+        document.body.appendChild(a)
+        a.click()
+        document.body.removeChild(a)
+      } else if (actionId === 'copy-as-png') {
+        if (!src) return
+        const url = getImageUrl(src)
+        fetch(url)
+          .then((r) => r.blob())
+          .then((blob) => {
+            const pngBlob = blob.type === 'image/png' ? blob : blob
+            navigator.clipboard.write([new ClipboardItem({ 'image/png': pngBlob })]).catch(() => {})
+          })
+          .catch((err) => console.error('[canvas] Failed to copy image:', err))
+      } else if (actionId === 'copy-file-path') {
+        if (!src) return
+        navigator.clipboard.writeText(`src/canvas/images/${src}`).catch(() => {})
+      }
+    }
+  }), [src, onUpdate])
+
+  if (!src) return null
+
+  const sizeStyle = {}
+  if (typeof width === 'number') sizeStyle.width = `${width}px`
+
+  return (
+    <WidgetWrapper className={styles.imageWrapper}>
+      <div ref={containerRef} className={styles.container} style={sizeStyle}>
+        <div className={styles.frame}>
+          <img
+            src={getImageUrl(src)}
+            alt=""
+            className={styles.image}
+            onLoad={handleImageLoad}
+            draggable={false}
+          />
+          {isPrivate && (
+            <span className={styles.privateBadge} title="Private — not committed to git">
+              Private
+            </span>
+          )}
+        </div>
+        {resizable && (
+          <ResizeHandle
+            targetRef={containerRef}
+            minWidth={100}
+            minHeight={60}
+            onResize={(w) => handleResize(w)}
+          />
+        )}
+      </div>
+    </WidgetWrapper>
+  )
+})
+
+export default ImageWidget

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

@@ -0,0 +1,39 @@
+.imageWrapper {
+  min-width: unset;
+}
+
+.container {
+  position: relative;
+  overflow: hidden;
+  min-width: 100px;
+}
+
+.frame {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.image {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: 4px;
+  user-select: none;
+  pointer-events: none;
+}
+
+.privateBadge {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1.4;
+  letter-spacing: 0.02em;
+  color: var(--fgColor-onEmphasis, #fff);
+  background: var(--bgColor-neutral-emphasis, rgba(0, 0, 0, 0.55));
+  pointer-events: none;
+}

package/src/canvas/widgets/MarkdownBlock.jsx

@@ -28,7 +28,9 @@ function renderMarkdown(text) {
 export default function MarkdownBlock({ props, onUpdate }) {
   const content = readProp(props, 'content', markdownSchema)
   const width = readProp(props, 'width', markdownSchema)
+  const canEdit = typeof onUpdate === 'function'
   const [editing, setEditing] = useState(false)
+  const editingActive = canEdit && editing
   const textareaRef = useRef(null)
   const blockRef = useRef(null)
   const [editHeight, setEditHeight] = useState(null)
@@ -37,8 +39,17 @@ export default function MarkdownBlock({ props, onUpdate }) {
     onUpdate?.({ content: e.target.value })
   }, [onUpdate])
 
+  const handleReadOnlyCopy = useCallback((e) => {
+    if (canEdit) return
+    e.preventDefault()
+    e.stopPropagation()
+    if (e.clipboardData?.setData) {
+      e.clipboardData.setData('text/plain', content || '')
+    }
+  }, [canEdit, content])
+
   useEffect(() => {
-    if (editing) {
+    if (editingActive) {
       // Capture the preview height before switching to editor
       if (blockRef.current && !editHeight) {
         setEditHeight(blockRef.current.offsetHeight)
@@ -49,7 +60,7 @@ export default function MarkdownBlock({ props, onUpdate }) {
     } else {
       setEditHeight(null)
     }
-  }, [editing, editHeight])
+  }, [editingActive, editHeight])
 
   return (
     <WidgetWrapper>
@@ -58,7 +69,7 @@ export default function MarkdownBlock({ props, onUpdate }) {
         className={styles.block}
         style={{ width, minHeight: editHeight || undefined }}
       >
-        {editing ? (
+        {editingActive ? (
           <textarea
             ref={textareaRef}
             className={styles.editor}
@@ -77,12 +88,18 @@ export default function MarkdownBlock({ props, onUpdate }) {
         ) : (
           <div
             className={styles.preview}
-            onDoubleClick={() => setEditing(true)}
-            role="button"
-            tabIndex={0}
-            onKeyDown={(e) => { if (e.key === 'Enter') setEditing(true) }}
+            style={!canEdit ? { cursor: 'default' } : undefined}
+            data-canvas-allow-text-selection={!canEdit ? '' : undefined}
+            onClick={!canEdit ? (e) => e.stopPropagation() : undefined}
+            onCopy={!canEdit ? handleReadOnlyCopy : undefined}
+            onDoubleClick={canEdit ? () => setEditing(true) : undefined}
+            role={canEdit ? 'button' : undefined}
+            tabIndex={canEdit ? 0 : undefined}
+            onKeyDown={canEdit ? (e) => { if (e.key === 'Enter') setEditing(true) } : undefined}
             dangerouslySetInnerHTML={{
-              __html: renderMarkdown(content) || '<p class="placeholder">Double-click to edit…</p>',
+              __html: renderMarkdown(content) || (canEdit
+                ? '<p class="placeholder">Double-click to edit…</p>'
+                : '<p class="placeholder">No content</p>'),
             }}
           />
         )}

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

@@ -0,0 +1,53 @@
+import { describe, it, expect, vi } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import MarkdownBlock from './MarkdownBlock.jsx'
+
+describe('MarkdownBlock', () => {
+  it('does not enter edit mode when onUpdate is unavailable (read-only/prod)', () => {
+    const { container } = render(<MarkdownBlock props={{ content: 'Hello', width: 420 }} />)
+
+    fireEvent.doubleClick(screen.getByText('Hello'))
+
+    expect(screen.queryByRole('textbox')).toBeNull()
+    expect(container.querySelector('[data-canvas-allow-text-selection]')).not.toBeNull()
+  })
+
+  it('enters edit mode when onUpdate is available', () => {
+    const onUpdate = vi.fn()
+    render(<MarkdownBlock props={{ content: 'Hello', width: 420 }} onUpdate={onUpdate} />)
+
+    fireEvent.doubleClick(screen.getByText('Hello'))
+
+    expect(screen.queryByRole('textbox')).not.toBeNull()
+  })
+
+  it('shows a non-editable empty-state message in read-only mode', () => {
+    render(<MarkdownBlock props={{ content: '', width: 420 }} />)
+
+    expect(screen.getByText('No content')).toBeTruthy()
+    expect(screen.queryByText('Double-click to edit…')).toBeNull()
+  })
+
+  it('stops click propagation in read-only mode', () => {
+    const onParentClick = vi.fn()
+    render(
+      <div onClick={onParentClick}>
+        <MarkdownBlock props={{ content: 'Hello', width: 420 }} />
+      </div>
+    )
+
+    fireEvent.click(screen.getByText('Hello'))
+
+    expect(onParentClick).not.toHaveBeenCalled()
+  })
+
+  it('copies markdown source in read-only mode', () => {
+    render(<MarkdownBlock props={{ content: '**Hello**\n- item', width: 420 }} />)
+
+    const preview = screen.getByText('Hello').closest('[data-canvas-allow-text-selection]')
+    const setData = vi.fn()
+    fireEvent.copy(preview, { clipboardData: { setData } })
+
+    expect(setData).toHaveBeenCalledWith('text/plain', '**Hello**\n- item')
+  })
+})

package/src/canvas/widgets/PrototypeEmbed.jsx

@@ -1,4 +1,5 @@
 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 { readProp, prototypeEmbedSchema } from './widgetProps.js'
@@ -28,7 +29,7 @@ function resolveCanvasThemeFromStorage() {
   return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
 }
 
-export default forwardRef(function PrototypeEmbed({ props, onUpdate }, ref) {
+export default forwardRef(function PrototypeEmbed({ props, onUpdate, resizable }, ref) {
   const src = readProp(props, 'src', prototypeEmbedSchema)
   const width = readProp(props, 'width', prototypeEmbedSchema)
   const height = readProp(props, 'height', prototypeEmbedSchema)
@@ -51,11 +52,15 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate }, ref) {
 
   const [editing, setEditing] = useState(false)
   const [interactive, setInteractive] = useState(false)
+  const [expanded, setExpanded] = useState(false)
   const [filter, setFilter] = useState('')
   const [canvasTheme, setCanvasTheme] = useState(() => resolveCanvasThemeFromStorage())
   const inputRef = useRef(null)
   const filterRef = useRef(null)
   const embedRef = useRef(null)
+  const iframeRef = useRef(null)
+  const inlineContainerRef = useRef(null)
+  const modalContainerRef = useRef(null)
 
   const iframeSrc = useMemo(() => {
     if (!rawSrc) return ''
@@ -177,6 +182,69 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate }, ref) {
     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 DOM node between inline container and modal.
+  // Uses moveBefore() (Chrome 133+) which preserves the iframe's
+  // browsing context — no reload. Falls back to appendChild which
+  // will reload but still works functionally.
+  useEffect(() => {
+    const iframe = iframeRef.current
+    if (!iframe) return
+
+    if (expanded && modalContainerRef.current) {
+      iframe._savedClassName = iframe.className
+      iframe._savedStyle = iframe.getAttribute('style') || ''
+      iframe.className = styles.expandIframe
+      iframe.removeAttribute('style')
+      const target = modalContainerRef.current
+      if (target.moveBefore) {
+        target.moveBefore(iframe, target.firstChild)
+      } else {
+        target.prepend(iframe)
+      }
+    } else if (!expanded && inlineContainerRef.current) {
+      if (iframe._savedClassName !== undefined) {
+        iframe.className = iframe._savedClassName
+        iframe.setAttribute('style', iframe._savedStyle)
+        delete iframe._savedClassName
+        delete iframe._savedStyle
+      }
+      const target = inlineContainerRef.current
+      if (target.moveBefore) {
+        target.moveBefore(iframe, null)
+      } else {
+        target.appendChild(iframe)
+      }
+    }
+  }, [expanded])
+
+  // Listen for navigation events from the embedded prototype iframe
+  useEffect(() => {
+    function handleMessage(e) {
+      if (e.source !== iframeRef.current?.contentWindow) return
+      if (e.data?.type !== 'storyboard:embed:navigate') return
+      const newSrc = e.data.src
+      if (newSrc && newSrc !== src) {
+        const originalSrc = readProp(props, 'originalSrc', prototypeEmbedSchema)
+        onUpdate?.({ src: newSrc, originalSrc: originalSrc || src })
+      }
+    }
+    window.addEventListener('message', handleMessage)
+    return () => window.removeEventListener('message', handleMessage)
+  }, [src, props, onUpdate])
+
   const chromeVars = useMemo(() => getEmbedChromeVars(canvasTheme), [canvasTheme])
 
   const enterInteractive = useCallback(() => setInteractive(true), [])
@@ -186,6 +254,10 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate }, ref) {
     handleAction(actionId) {
       if (actionId === 'edit') {
         setEditing(true)
+      } else if (actionId === 'expand') {
+        setExpanded(true)
+      } else if (actionId === 'open-external') {
+        if (rawSrc) window.open(rawSrc, '_blank', 'noopener')
       } else if (actionId === 'zoom-in') {
         const step = zoom < 75 ? 5 : 25
         onUpdate?.({ zoom: Math.min(200, zoom + step) })
@@ -194,7 +266,7 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate }, ref) {
         onUpdate?.({ zoom: Math.max(25, zoom - step) })
       }
     },
-  }), [zoom, onUpdate])
+  }), [rawSrc, zoom, onUpdate])
 
   function handlePickRoute(route) {
     onUpdate?.({ src: route })
@@ -216,6 +288,7 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate }, ref) {
   }
 
   return (
+    <>
     <WidgetWrapper>
       <div
         ref={embedRef}
@@ -305,8 +378,13 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate }, ref) {
           </div>
         ) : iframeSrc ? (
           <>
-            <div className={styles.iframeContainer}>
+            <div
+              ref={inlineContainerRef}
+              className={styles.iframeContainer}
+              style={expanded ? { visibility: 'hidden' } : undefined}
+            >
               <iframe
+                ref={iframeRef}
                 src={iframeSrc}
                 className={styles.iframe}
                 style={{
@@ -319,7 +397,7 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate }, ref) {
                 sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
               />
             </div>
-            {!interactive && (
+            {!interactive && !expanded && (
               <div
                 className={styles.dragOverlay}
                 onDoubleClick={enterInteractive}
@@ -338,29 +416,57 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate }, ref) {
           </div>
         )}
       </div>
+      {resizable && (
+        <div
+          className={styles.resizeHandle}
+          onMouseDown={(e) => {
+            e.stopPropagation()
+            e.preventDefault()
+            const startX = e.clientX
+            const startY = e.clientY
+            const startW = width
+            const startH = height
+            function onMove(ev) {
+              const newW = Math.max(200, startW + ev.clientX - startX)
+              const newH = Math.max(150, startH + ev.clientY - startY)
+              onUpdate?.({ width: newW, height: newH })
+            }
+            function onUp() {
+              document.removeEventListener('mousemove', onMove)
+              document.removeEventListener('mouseup', onUp)
+            }
+            document.addEventListener('mousemove', onMove)
+            document.addEventListener('mouseup', onUp)
+          }}
+          onPointerDown={(e) => e.stopPropagation()}
+        />
+      )}
+    </WidgetWrapper>
+    {createPortal(
       <div
-        className={styles.resizeHandle}
-        onMouseDown={(e) => {
-          e.stopPropagation()
-          e.preventDefault()
-          const startX = e.clientX
-          const startY = e.clientY
-          const startW = width
-          const startH = height
-          function onMove(ev) {
-            const newW = Math.max(200, startW + ev.clientX - startX)
-            const newH = Math.max(150, startH + ev.clientY - startY)
-            onUpdate?.({ width: newW, height: newH })
-          }
-          function onUp() {
-            document.removeEventListener('mousemove', onMove)
-            document.removeEventListener('mouseup', onUp)
-          }
-          document.addEventListener('mousemove', onMove)
-          document.addEventListener('mouseup', onUp)
-        }}
+        className={styles.expandBackdrop}
+        style={expanded ? undefined : { display: 'none' }}
+        onClick={() => setExpanded(false)}
         onPointerDown={(e) => e.stopPropagation()}
-      />
-    </WidgetWrapper>
+        onKeyDown={(e) => e.stopPropagation()}
+        onWheel={(e) => e.stopPropagation()}
+      >
+        <div
+          ref={modalContainerRef}
+          className={styles.expandContainer}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {/* iframe is reparented here via useEffect */}
+          <button
+            className={styles.expandClose}
+            onClick={() => setExpanded(false)}
+            aria-label="Close expanded view"
+            autoFocus
+          >✕</button>
+        </div>
+      </div>,
+      document.body
+    )}
+    </>
   )
 })

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

@@ -3,7 +3,7 @@
   overflow: hidden;
   background: var(--bgColor-default, #ffffff);
   border: 3px solid var(--borderColor-default, #d0d7de);
-  border-radius: 8px;
+  border-radius: 12px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
 }
 
@@ -150,7 +150,7 @@
 }
 
 .pickerItem:focus-visible {
-  outline: 2px solid var(--bgColor-accent-emphasis, #2f81f7);
+  outline: 4px solid var(--bgColor-accent-emphasis, #2f81f7);
   outline-offset: -2px;
 }
 
@@ -326,3 +326,67 @@
   border-right: 1.5px solid var(--trigger-border, var(--borderColor-muted, #d0d7de));
   user-select: none;
 }
+
+/* Expand modal — fullscreen overlay for expanded iframe */
+.expandBackdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 100000;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: expandFadeIn 0.15s ease;
+}
+
+@keyframes expandFadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.expandContainer {
+  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);
+  animation: expandScaleIn 0.2s ease;
+}
+
+@keyframes expandScaleIn {
+  from { transform: scale(0.95); opacity: 0; }
+  to { transform: scale(1); opacity: 1; }
+}
+
+.expandIframe {
+  border: none;
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.expandClose {
+  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);
+}
+
+.expandClose:hover {
+  background: rgba(0, 0, 0, 0.7);
+}

package/src/canvas/widgets/StickyNote.jsx

@@ -12,26 +12,28 @@ const COLORS = {
   orange: { bg: '#fff1e5', border: '#d18616', dot: '#e8a844' },
 }
 
-export default function StickyNote({ props, onUpdate }) {
+export default function StickyNote({ props, onUpdate, resizable }) {
   const text = readProp(props, 'text', stickyNoteSchema)
   const color = readProp(props, 'color', stickyNoteSchema)
   const width = readProp(props, 'width', stickyNoteSchema)
   const height = readProp(props, 'height', stickyNoteSchema)
+  const canEdit = typeof onUpdate === 'function'
   const palette = COLORS[color] ?? COLORS.yellow
   const textareaRef = useRef(null)
   const stickyRef = useRef(null)
   const [editing, setEditing] = useState(false)
+  const editingActive = canEdit && editing
 
   const handleResize = useCallback((w, h) => {
     onUpdate?.({ width: w, height: h })
   }, [onUpdate])
 
   useEffect(() => {
-    if (editing && textareaRef.current) {
+    if (editingActive && textareaRef.current) {
       textareaRef.current.focus()
       textareaRef.current.selectionStart = textareaRef.current.value.length
     }
-  }, [editing])
+  }, [editingActive])
 
   const handleTextChange = useCallback((e) => {
     onUpdate?.({ text: e.target.value })
@@ -51,15 +53,16 @@ export default function StickyNote({ props, onUpdate }) {
       >
         <p
           className={styles.text}
-          style={editing ? { visibility: 'hidden' } : undefined}
-          onDoubleClick={() => setEditing(true)}
-          role="button"
-          tabIndex={0}
-          onKeyDown={(e) => { if (e.key === 'Enter') setEditing(true) }}
+          style={editingActive ? { visibility: 'hidden' } : undefined}
+          data-canvas-allow-text-selection={!canEdit ? '' : undefined}
+          onDoubleClick={canEdit ? () => setEditing(true) : undefined}
+          role={canEdit ? 'button' : undefined}
+          tabIndex={canEdit ? 0 : undefined}
+          onKeyDown={canEdit ? (e) => { if (e.key === 'Enter') setEditing(true) } : undefined}
         >
-          {text || 'Double-click to edit…'}
+          {text || (canEdit ? 'Double-click to edit…' : 'No content')}
         </p>
-        {editing && (
+        {editingActive && (
           <textarea
             ref={textareaRef}
             className={styles.textarea}
@@ -75,12 +78,14 @@ export default function StickyNote({ props, onUpdate }) {
             placeholder="Type here…"
           />
         )}
-        <ResizeHandle
-          targetRef={stickyRef}
-          minWidth={180}
-          minHeight={60}
-          onResize={handleResize}
-        />
+        {resizable && (
+          <ResizeHandle
+            targetRef={stickyRef}
+            minWidth={180}
+            minHeight={60}
+            onResize={handleResize}
+          />
+        )}
       </article>
     </div>
   )