@dfosco/storyboard-react 3.0.0 → 3.1.0

package/src/canvas/CanvasPage.module.css

@@ -13,3 +13,61 @@
 .loading p {
   margin: 0;
 }
+
+.canvasScroll {
+  width: 100vw;
+  height: 100vh;
+  overflow: auto;
+  background-color: var(--bgColor-muted, #f6f8fa);
+}
+
+@media (prefers-color-scheme: dark) {
+  .canvasScroll {
+    background-color: var(--bgColor-muted, #161b22);
+  }
+}
+
+.canvasZoom {
+  min-width: 100%;
+  min-height: 100%;
+}
+
+.selected {
+  outline: 2px solid var(--bgColor-accent-emphasis, #2f81f7);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+.canvasTitle {
+  position: fixed;
+  top: 12px;
+  left: 16px;
+  z-index: 10;
+}
+
+.canvasTitleInput {
+  font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--fgColor-muted, #656d76);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  padding: 4px 8px;
+  outline: none;
+  min-width: 80px;
+  max-width: 300px;
+  transition: border-color 150ms, background-color 150ms, color 150ms;
+}
+
+.canvasTitleInput:hover {
+  color: var(--fgColor-default, #1f2328);
+  border-color: var(--borderColor-default, #d1d9e0);
+  background: var(--bgColor-default, #ffffff);
+}
+
+.canvasTitleInput:focus {
+  color: var(--fgColor-default, #1f2328);
+  border-color: var(--bgColor-accent-emphasis, #2f81f7);
+  background: var(--bgColor-default, #ffffff);
+}

package/src/canvas/widgets/LinkPreview.jsx

@@ -0,0 +1,34 @@
+import WidgetWrapper from './WidgetWrapper.jsx'
+import { readProp, linkPreviewSchema } from './widgetProps.js'
+import styles from './LinkPreview.module.css'
+
+export default function LinkPreview({ props }) {
+  const url = readProp(props, 'url', linkPreviewSchema)
+  const title = readProp(props, 'title', linkPreviewSchema)
+
+  let hostname = ''
+  try {
+    hostname = new URL(url).hostname
+  } catch { /* invalid URL */ }
+
+  return (
+    <WidgetWrapper>
+      <div className={styles.card}>
+        <span className={styles.icon}>🔗</span>
+        <div className={styles.text}>
+          {title && <p className={styles.title}>{title}</p>}
+          <a
+            href={url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={styles.url}
+            onMouseDown={(e) => e.stopPropagation()}
+            onPointerDown={(e) => e.stopPropagation()}
+          >
+            {hostname || url}
+          </a>
+        </div>
+      </div>
+    </WidgetWrapper>
+  )
+}

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

@@ -0,0 +1,51 @@
+.card {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  text-decoration: none;
+  color: inherit;
+  min-width: 240px;
+  transition: background 150ms;
+}
+
+.card:hover {
+  background: var(--bgColor-muted, #f6f8fa);
+}
+
+.icon {
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+.text {
+  overflow: hidden;
+  min-width: 0;
+}
+
+.title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--fgColor-default, #1f2328);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.url {
+  margin: 0;
+  font-size: 12px;
+  color: var(--fgColor-muted, #656d76);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-decoration: none;
+  display: block;
+}
+
+.url:hover {
+  text-decoration: underline;
+  color: var(--fgColor-accent, #0969da);
+}

package/src/canvas/widgets/MarkdownBlock.jsx

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from 'react'
+import { useState, useRef, useEffect, useCallback } from 'react'
 import WidgetWrapper from './WidgetWrapper.jsx'
 import { readProp, markdownSchema } from './widgetProps.js'
 import styles from './MarkdownBlock.module.css'
@@ -25,7 +25,7 @@ function renderMarkdown(text) {
     })
 }
 
-export default function MarkdownBlock({ props, onUpdate, onRemove }) {
+export default function MarkdownBlock({ props, onUpdate }) {
   const content = readProp(props, 'content', markdownSchema)
   const width = readProp(props, 'width', markdownSchema)
   const [editing, setEditing] = useState(false)
@@ -33,6 +33,10 @@ export default function MarkdownBlock({ props, onUpdate, onRemove }) {
   const blockRef = useRef(null)
   const [editHeight, setEditHeight] = useState(null)
 
+  const handleContentChange = useCallback((e) => {
+    onUpdate?.({ content: e.target.value })
+  }, [onUpdate])
+
   useEffect(() => {
     if (editing) {
       // Capture the preview height before switching to editor
@@ -48,7 +52,7 @@ export default function MarkdownBlock({ props, onUpdate, onRemove }) {
   }, [editing, editHeight])
 
   return (
-    <WidgetWrapper onRemove={onRemove}>
+    <WidgetWrapper>
       <div
         ref={blockRef}
         className={styles.block}
@@ -60,7 +64,7 @@ export default function MarkdownBlock({ props, onUpdate, onRemove }) {
             className={styles.editor}
             style={{ minHeight: editHeight ? editHeight - 2 : undefined }}
             value={content}
-            onChange={(e) => onUpdate?.({ content: e.target.value })}
+            onChange={handleContentChange}
             onBlur={() => setEditing(false)}
             onMouseDown={(e) => e.stopPropagation()}
             onPointerDown={(e) => e.stopPropagation()}

package/src/canvas/widgets/PrototypeEmbed.jsx

@@ -1,33 +1,179 @@
+import { useState, useRef, useEffect, useCallback } from 'react'
 import WidgetWrapper from './WidgetWrapper.jsx'
 import { readProp, prototypeEmbedSchema } from './widgetProps.js'
 import styles from './PrototypeEmbed.module.css'
 
-export default function PrototypeEmbed({ props, onRemove }) {
+export default function PrototypeEmbed({ props, onUpdate }) {
   const src = readProp(props, 'src', prototypeEmbedSchema)
   const width = readProp(props, 'width', prototypeEmbedSchema)
   const height = readProp(props, 'height', prototypeEmbedSchema)
+  const zoom = readProp(props, 'zoom', prototypeEmbedSchema)
   const label = readProp(props, 'label', prototypeEmbedSchema) || src
 
-  // Build the full iframe URL using the app's base path
   const basePath = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
-  const iframeSrc = src ? `${basePath}${src}` : ''
+  const rawSrc = src ? `${basePath}${src}` : ''
+  const iframeSrc = rawSrc ? `${rawSrc}${rawSrc.includes('?') ? '&' : '?'}_sb_embed` : ''
+
+  const scale = zoom / 100
+
+  const [editing, setEditing] = useState(false)
+  const [interactive, setInteractive] = useState(false)
+  const inputRef = useRef(null)
+  const embedRef = useRef(null)
+
+  useEffect(() => {
+    if (editing && inputRef.current) {
+      inputRef.current.focus()
+      inputRef.current.select()
+    }
+  }, [editing])
+
+  // Exit interactive mode when clicking outside the embed
+  useEffect(() => {
+    if (!interactive) return
+    function handlePointerDown(e) {
+      if (embedRef.current && !embedRef.current.contains(e.target)) {
+        setInteractive(false)
+      }
+    }
+    document.addEventListener('pointerdown', handlePointerDown)
+    return () => document.removeEventListener('pointerdown', handlePointerDown)
+  }, [interactive])
+
+  const enterInteractive = useCallback(() => setInteractive(true), [])
+
+  function handleSubmit(e) {
+    e.preventDefault()
+    const value = inputRef.current?.value?.trim() || ''
+    onUpdate?.({ src: value })
+    setEditing(false)
+  }
 
   return (
-    <WidgetWrapper onRemove={onRemove}>
-      <div className={styles.embed} style={{ width, height }}>
-        {iframeSrc ? (
-          <iframe
-            src={iframeSrc}
-            className={styles.iframe}
-            title={label || 'Prototype embed'}
-            sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
-          />
+    <WidgetWrapper>
+      <div
+        ref={embedRef}
+        className={styles.embed}
+        style={{ width, height }}
+      >
+        {editing ? (
+          <form
+            className={styles.urlForm}
+            onSubmit={handleSubmit}
+            onMouseDown={(e) => e.stopPropagation()}
+            onPointerDown={(e) => e.stopPropagation()}
+          >
+            <label className={styles.urlLabel}>Prototype URL path</label>
+            <input
+              ref={inputRef}
+              className={styles.urlInput}
+              type="text"
+              defaultValue={src}
+              placeholder="/MyPrototype/page"
+              onKeyDown={(e) => { if (e.key === 'Escape') setEditing(false) }}
+            />
+            <div className={styles.urlActions}>
+              <button type="submit" className={styles.urlSave}>Save</button>
+              <button type="button" className={styles.urlCancel} onClick={() => setEditing(false)}>Cancel</button>
+            </div>
+          </form>
+        ) : iframeSrc ? (
+          <>
+            <div className={styles.iframeContainer}>
+              <iframe
+                src={iframeSrc}
+                className={styles.iframe}
+                style={{
+                  width: width / scale,
+                  height: height / scale,
+                  transform: `scale(${scale})`,
+                  transformOrigin: '0 0',
+                }}
+                title={label || 'Prototype embed'}
+                sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
+              />
+            </div>
+            {!interactive && (
+              <div
+                className={styles.dragOverlay}
+                onDoubleClick={enterInteractive}
+              />
+            )}
+          </>
         ) : (
-          <div className={styles.empty}>
-            <p>No prototype URL set</p>
+          <div
+            className={styles.empty}
+            onDoubleClick={() => setEditing(true)}
+            role="button"
+            tabIndex={0}
+            onKeyDown={(e) => { if (e.key === 'Enter') setEditing(true) }}
+          >
+            <p>Double-click to set prototype URL</p>
+          </div>
+        )}
+        {iframeSrc && !editing && (
+          <button
+            className={styles.editBtn}
+            onClick={(e) => { e.stopPropagation(); setEditing(true) }}
+            onMouseDown={(e) => e.stopPropagation()}
+            onPointerDown={(e) => e.stopPropagation()}
+            title="Edit URL"
+            aria-label="Edit prototype URL"
+          >
+            <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61Zm.176 4.823L9.75 4.81l-6.286 6.287a.253.253 0 0 0-.064.108l-.558 1.953 1.953-.558a.253.253 0 0 0 .108-.064Zm1.238-3.763a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354Z"/></svg>
+          </button>
+        )}
+        {iframeSrc && !editing && (
+          <div
+            className={styles.zoomBar}
+            onMouseDown={(e) => e.stopPropagation()}
+            onPointerDown={(e) => e.stopPropagation()}
+          >
+            <button
+              className={styles.zoomBtn}
+              onClick={() => {
+                const step = zoom <= 75 ? 5 : 25
+                onUpdate?.({ zoom: Math.max(25, zoom - step) })
+              }}
+              disabled={zoom <= 25}
+              aria-label="Zoom out"
+            >−</button>
+            <span className={styles.zoomLabel}>{zoom}%</span>
+            <button
+              className={styles.zoomBtn}
+              onClick={() => {
+                const step = zoom < 75 ? 5 : 25
+                onUpdate?.({ zoom: Math.min(200, zoom + step) })
+              }}
+              disabled={zoom >= 200}
+              aria-label="Zoom in"
+            >+</button>
           </div>
         )}
       </div>
+      <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>
   )
 }

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

@@ -4,13 +4,24 @@
   background: var(--bgColor-default, #ffffff);
 }
 
-.iframe {
+.iframeContainer {
   width: 100%;
   height: 100%;
+  overflow: hidden;
+}
+
+.iframe {
   border: none;
   display: block;
 }
 
+.dragOverlay {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  cursor: grab;
+}
+
 .empty {
   display: flex;
   align-items: center;
@@ -19,8 +30,213 @@
   color: var(--fgColor-muted, #656d76);
   font-size: 14px;
   font-style: italic;
+  cursor: pointer;
 }
 
 .empty p {
   margin: 0;
 }
+
+.editBtn {
+  all: unset;
+  cursor: pointer;
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.92);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
+  font-size: 14px;
+  opacity: 0;
+  transition: opacity 150ms;
+  z-index: 2;
+}
+
+.embed:hover .editBtn {
+  opacity: 1;
+}
+
+.editBtn:hover {
+  background: rgba(255, 255, 255, 0.98);
+}
+
+@media (prefers-color-scheme: dark) {
+  .editBtn {
+    background: rgba(22, 27, 34, 0.88);
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .editBtn:hover {
+    background: rgba(30, 37, 46, 0.95);
+  }
+}
+
+.urlForm {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 24px;
+  height: 100%;
+  box-sizing: border-box;
+  justify-content: center;
+}
+
+.urlLabel {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--fgColor-muted, #656d76);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.urlInput {
+  all: unset;
+  padding: 8px 10px;
+  font-size: 14px;
+  font-family: ui-monospace, SFMono-Regular, monospace;
+  border: 1px solid var(--borderColor-default, #d0d7de);
+  border-radius: 6px;
+  background: var(--bgColor-default, #ffffff);
+  color: var(--fgColor-default, #1f2328);
+}
+
+.urlInput:focus {
+  border-color: var(--bgColor-accent-emphasis, #2f81f7);
+  box-shadow: 0 0 0 2px rgba(47, 129, 247, 0.3);
+}
+
+.urlActions {
+  display: flex;
+  gap: 8px;
+}
+
+.urlSave,
+.urlCancel {
+  all: unset;
+  cursor: pointer;
+  padding: 6px 14px;
+  font-size: 13px;
+  font-weight: 500;
+  border-radius: 6px;
+  text-align: center;
+}
+
+.urlSave {
+  background: var(--bgColor-accent-emphasis, #2f81f7);
+  color: var(--fgColor-onEmphasis, #ffffff);
+}
+
+.urlSave:hover {
+  background: var(--bgColor-accent-emphasis, #388bfd);
+}
+
+.urlCancel {
+  color: var(--fgColor-muted, #656d76);
+}
+
+.urlCancel:hover {
+  color: var(--fgColor-default, #1f2328);
+  background: var(--bgColor-muted, #f6f8fa);
+}
+
+.resizeHandle {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 16px;
+  height: 16px;
+  cursor: nwse-resize;
+  background: linear-gradient(
+    135deg,
+    transparent 40%,
+    var(--borderColor-muted, rgba(0, 0, 0, 0.15)) 40%,
+    var(--borderColor-muted, rgba(0, 0, 0, 0.15)) 50%,
+    transparent 50%,
+    transparent 65%,
+    var(--borderColor-muted, rgba(0, 0, 0, 0.15)) 65%,
+    var(--borderColor-muted, rgba(0, 0, 0, 0.15)) 75%,
+    transparent 75%
+  );
+  opacity: 0;
+  transition: opacity 150ms;
+  z-index: 2;
+}
+
+.embed:hover ~ .resizeHandle,
+.resizeHandle:hover {
+  opacity: 1;
+}
+
+.zoomBar {
+  position: absolute;
+  bottom: 8px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  border-radius: 10px;
+  border: 1.5px solid var(--trigger-border, var(--borderColor-muted, #d0d7de));
+  background: var(--trigger-bg, var(--bgColor-muted, #f6f8fa));
+  opacity: 0;
+  transition: opacity 150ms;
+  z-index: 3;
+}
+
+.embed:hover .zoomBar {
+  opacity: 1;
+}
+
+.zoomBtn {
+  all: unset;
+  cursor: pointer;
+  width: 36px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--trigger-text, var(--fgColor-default, #1f2328));
+  transition: background 120ms;
+}
+
+.zoomBtn:first-child {
+  border-radius: 7px 0 0 7px;
+}
+
+.zoomBtn:last-child {
+  border-radius: 0 7px 7px 0;
+}
+
+.zoomBtn:hover:not(:disabled) {
+  background: var(--trigger-bg-hover, var(--bgColor-neutral-muted, #eaeef2));
+}
+
+.zoomBtn:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+
+.zoomLabel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 48px;
+  height: 32px;
+  padding: 0 4px;
+  font-size: 11px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--trigger-text, var(--fgColor-default, #1f2328));
+  border-left: 1.5px solid var(--trigger-border, var(--borderColor-muted, #d0d7de));
+  border-right: 1.5px solid var(--trigger-border, var(--borderColor-muted, #d0d7de));
+  user-select: none;
+}

package/src/canvas/widgets/StickyNote.jsx

@@ -11,7 +11,7 @@ const COLORS = {
   orange: { bg: '#fff1e5', border: '#d18616', dot: '#e8a844' },
 }
 
-export default function StickyNote({ props, onUpdate, onRemove }) {
+export default function StickyNote({ props, onUpdate }) {
   const text = readProp(props, 'text', stickyNoteSchema)
   const color = readProp(props, 'color', stickyNoteSchema)
   const palette = COLORS[color] ?? COLORS.yellow
@@ -39,15 +39,17 @@ export default function StickyNote({ props, onUpdate, onRemove }) {
         className={styles.sticky}
         style={{ '--sticky-bg': palette.bg, '--sticky-border': palette.border }}
       >
-        {onRemove && (
-          <button
-            className={styles.removeBtn}
-            onClick={(e) => { e.stopPropagation(); onRemove() }}
-            title="Remove"
-            aria-label="Remove sticky note"
-          >×</button>
-        )}
-        {editing ? (
+        <p
+          className={styles.text}
+          style={editing ? { visibility: 'hidden' } : undefined}
+          onDoubleClick={() => setEditing(true)}
+          role="button"
+          tabIndex={0}
+          onKeyDown={(e) => { if (e.key === 'Enter') setEditing(true) }}
+        >
+          {text || 'Double-click to edit…'}
+        </p>
+        {editing && (
           <textarea
             ref={textareaRef}
             className={styles.textarea}
@@ -61,16 +63,6 @@ export default function StickyNote({ props, onUpdate, onRemove }) {
             }}
             placeholder="Type here…"
           />
-        ) : (
-          <p
-            className={styles.text}
-            onDoubleClick={() => setEditing(true)}
-            role="button"
-            tabIndex={0}
-            onKeyDown={(e) => { if (e.key === 'Enter') setEditing(true) }}
-          >
-            {text || 'Double-click to edit…'}
-          </p>
         )}
       </article>