@dfosco/storyboard-react 4.2.1 → 4.2.3

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "4.2.1",
+  "version": "4.2.3",
   "type": "module",
   "dependencies": {
     "@base-ui/react": "^1.4.0",
-    "@dfosco/storyboard-core": "4.2.1",
-    "@dfosco/tiny-canvas": "4.2.1",
+    "@dfosco/storyboard-core": "4.2.3",
+    "@dfosco/tiny-canvas": "4.2.3",
     "@neodrag/react": "^2.3.1",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-visually-hidden": "^1.2.4",

package/src/AuthModal/AuthModal.jsx

@@ -1,7 +1,7 @@
 /**
  * AuthModal — Global PAT entry dialog for comments authentication.
  * Mounted at app root, triggered by:
- *   - Svelte CoreUIBar (comments tool / "C" shortcut) via 'storyboard:open-auth-modal' event
+ *   - CoreUIBar (comments tool / "C" shortcut) via 'storyboard:open-auth-modal' event
  *   - ViewfinderNew sidebar login button via same event
  */
 import { useState, useEffect, useCallback } from 'react'

package/src/BranchBar/BranchBar.jsx

@@ -15,6 +15,15 @@ function checkLocalDev() {
   return window.__SB_LOCAL_DEV__ === true
 }
 
+/** Read the dev domain color injected by the server plugin, validated via CSS.supports. */
+function getDevDomainColor() {
+  if (typeof window === 'undefined') return null
+  const color = window.__SB_DEV_DOMAIN_COLOR__
+  if (!color) return null
+  if (typeof CSS !== 'undefined' && CSS.supports && !CSS.supports('color', color)) return null
+  return color
+}
+
 export default function BranchBar({ basePath }) {
   const [hidden, setHidden] = useState(
     () => typeof document !== 'undefined' && document.documentElement.classList.contains('storyboard-chrome-hidden')
@@ -33,6 +42,7 @@ export default function BranchBar({ basePath }) {
 
   const isLocalDev = checkLocalDev()
   const isOnBranch = currentBranch !== 'main'
+  const domainColor = isLocalDev ? getDevDomainColor() : null
 
   useEffect(() => {
     const observer = new MutationObserver(() => {
@@ -52,8 +62,15 @@ export default function BranchBar({ basePath }) {
 
   return (
     <div className={css.bar} data-branch-bar>
-      <div className={`${css.barInner}${isLocalDev ? '' : ` ${css.barProd}`}`}>
+      <div
+        className={`${css.barInner}${isLocalDev ? '' : ` ${css.barProd}`}`}
+        style={domainColor ? { '--sb-branch-bar-bg': domainColor } : undefined}
+      >
         <span className={css.barLabel}>
+          {isLocalDev && window.__SB_DEV_DOMAIN__ && <>
+            <span className={css.barDomainName}>⌘ {window.__SB_DEV_DOMAIN__}</span>
+            <span className={css.barSeparator}>·</span>
+          </>}
           <GitBranchIcon size={12} />
           <span className={css.barBranchName}>{currentBranch}</span>
           {isLocalDev && <>

package/src/BranchBar/BranchBar.module.css

@@ -16,7 +16,7 @@
   justify-content: center;
   gap: 8px;
   height: 32px;
-  background: hsl(212, 92%, 45%);
+  background: var(--sb-branch-bar-bg, hsl(212, 92%, 45%));
   color: #fff;
   padding: 4px 12px;
   position: relative;
@@ -72,6 +72,14 @@
   white-space: nowrap;
 }
 
+.barDomainName {
+  font-weight: 400;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .barSeparator {
   opacity: 0.6;
   margin: 0 2px;

package/src/CommandPalette/CommandPalette.jsx

@@ -880,7 +880,7 @@ function buildPaletteItems(basePath, onCreateAction, onNavigateToPage) {
 
 /**
  * StoryboardCommandPalette — React command palette using react-cmdk.
- * Mounted at app root, listens for custom events from Svelte CoreUIBar.
+ * Mounted at app root, listens for custom events from CoreUIBar.
  */
 export default function StoryboardCommandPalette({ basePath }) {
   const [open, setOpen] = useState(false)

package/src/Viewfinder.jsx

@@ -225,7 +225,7 @@ function CardActionsMenu({ typeLabel, onEdit, onDelete }) {
         <KebabHorizontalIcon size={16} />
       </Menu.Trigger>
       <Menu.Portal>
-        <Menu.Positioner className={css.actionsMenuPositioner} side="bottom" alignment="end">
+        <Menu.Positioner className={css.actionsMenuPositioner} side="inline-end" alignment="end" sideOffset={8}>
           <Menu.Popup className={css.actionsMenu} onClick={(e) => { e.preventDefault(); e.stopPropagation() }}>
             <Menu.Item
               className={css.actionsMenuItem}
@@ -486,6 +486,7 @@ function ArtifactCard({ item, basePath, starred, onToggleStar, onItemDeleted })
         <div className={css.cardHeader}>
           <span className={css.cardBadge}>{getTypeLabel(item.type)}</span>
           <div className={css.cardActions}>
+            <StarBtn active={starred} onClick={() => onToggleStar(item.id)} inline />
             {item.flows?.length > 0 && <FlowsDropdown flows={item.flows} basePath={basePath} />}
             {item.pages?.length > 1 && <PagesDropdown pages={item.pages} basePath={basePath} />}
             {canEditDelete && (
@@ -504,7 +505,6 @@ function ArtifactCard({ item, basePath, starred, onToggleStar, onItemDeleted })
                 {item.name}
                 {isExternal && <span className={css.externalBadge}>↗</span>}
               </div>
-              <StarBtn active={starred} onClick={() => onToggleStar(item.id)} inline />
             </div>
             {item.description && (
               <div className={css.cardDescription}>{item.description}</div>
@@ -582,12 +582,13 @@ function FlowsDropdown({ flows, basePath }) {
               <Menu.Item
                 key={flow.key}
                 className={css.flowsItem}
-                onClick={(e) => {
-                  e.preventDefault()
-                  window.location.href = withBase(basePath, flow.route)
-                }}
               >
-                {flow.meta?.title || flow.name}
+                <a
+                  href={withBase(basePath, flow.route)}
+                  className={css.flowsItemLink}
+                >
+                  {flow.meta?.title || flow.name}
+                </a>
               </Menu.Item>
             ))}
           </Menu.Popup>
@@ -619,12 +620,13 @@ function PagesDropdown({ pages, basePath }) {
               <Menu.Item
                 key={page.route}
                 className={css.flowsItem}
-                onClick={(e) => {
-                  e.preventDefault()
-                  window.location.href = withBase(basePath, page.route)
-                }}
               >
-                {page.name}
+                <a
+                  href={withBase(basePath, page.route)}
+                  className={css.flowsItemLink}
+                >
+                  {page.name}
+                </a>
               </Menu.Item>
             ))}
           </Menu.Popup>

package/src/Viewfinder.module.css

@@ -1118,6 +1118,12 @@
   color: var(--fgColor-default, #1a1a1a);
 }
 
+.flowsItemLink {
+  display: block;
+  color: inherit;
+  text-decoration: none;
+}
+
 /* Avatar stack */
 
 .avatarStack {

package/src/canvas/CanvasPage.jsx

@@ -2075,7 +2075,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     return () => document.removeEventListener('storyboard:canvas:toggle-snap', handleSnapToggle)
   }, [canvasId])
 
-  // Broadcast snap state to Svelte toolbar
+  // Broadcast snap state to toolbar
   useEffect(() => {
     document.dispatchEvent(new CustomEvent('storyboard:canvas:snap-state', {
       detail: { snapEnabled }
@@ -2083,7 +2083,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     snapEnabledRef.current = snapEnabled
   }, [snapEnabled])
 
-  // Respond to snap-state requests from Svelte toolbar (handles mount-order race)
+  // Respond to snap-state requests from toolbar (handles mount-order race)
   useEffect(() => {
     function handleRequest() {
       document.dispatchEvent(new CustomEvent('storyboard:canvas:snap-state', {
@@ -2094,7 +2094,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     return () => document.removeEventListener('storyboard:canvas:snap-state-request', handleRequest)
   }, [])
 
-  // Listen for gridSize from Svelte toolbar config
+  // Listen for gridSize from toolbar config
   useEffect(() => {
     function handleGridSize(e) {
       const size = e.detail?.gridSize
@@ -2638,7 +2638,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     return () => document.removeEventListener('keydown', handleKeyDown)
   }, [handleUndo, handleRedo, handleDuplicateSelected, handleDuplicateWithConnectors, handleSelectAll])
 
-  // Listen for undo/redo from CoreUIBar (Svelte toolbar)
+  // Listen for undo/redo from CoreUIBar
   useEffect(() => {
     function handleUndoEvent() { handleUndo() }
     function handleRedoEvent() { handleRedo() }
@@ -2650,7 +2650,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     }
   }, [handleUndo, handleRedo])
 
-  // Broadcast undo/redo availability to Svelte toolbar
+  // Broadcast undo/redo availability to toolbar
   useEffect(() => {
     document.dispatchEvent(new CustomEvent('storyboard:canvas:undo-redo-state', {
       detail: { canUndo: undoRedo.canUndo, canRedo: undoRedo.canRedo }

package/src/canvas/PageSelector.jsx

@@ -104,11 +104,15 @@ export default function PageSelector({ currentName, pages: initialPages, isLocal
   const currentLabel = currentPage?.title || currentName.split('/').pop()
   const currentIndex = realPages.findIndex(p => p.name === currentName)
 
-  const navigateTo = useCallback((page) => {
+  const getPageHref = useCallback((page) => {
     const base = (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
-    window.location.href = base + page.route
+    return base + page.route
   }, [])
 
+  const navigateTo = useCallback((page) => {
+    window.location.href = getPageHref(page)
+  }, [getPageHref])
+
   const handleSelect = useCallback(
     (page) => {
       if (page.name !== currentName) {
@@ -119,13 +123,21 @@ export default function PageSelector({ currentName, pages: initialPages, isLocal
     [currentName, navigateTo],
   )
 
-  // Click handler with 300ms delay (mouse only) to distinguish from dblclick
+  // Click handler with 300ms delay (mouse only) to distinguish from dblclick.
+  // Cmd/Ctrl+click is handled natively by the <a> tag.
   const handleItemClick = useCallback((page, e) => {
     if (didDragRef.current) {
       didDragRef.current = false
+      e.preventDefault()
       return
     }
-    if (editingPage) return
+    if (editingPage) {
+      e.preventDefault()
+      return
+    }
+    // Cmd/Ctrl+click or middle-click → let browser handle natively
+    if (e?.metaKey || e?.ctrlKey || e?.button === 1) return
+    e.preventDefault()
     // Keyboard Enter/Space → navigate immediately
     if (!e?.nativeEvent || e.nativeEvent instanceof KeyboardEvent) {
       handleSelect(page)
@@ -465,15 +477,7 @@ export default function PageSelector({ currentName, pages: initialPages, isLocal
                 role="option"
                 aria-selected={page.name === currentName}
                 className={`${styles.item} ${page.name === currentName ? styles.itemActive : ''} ${dragIndex === index ? styles.itemDragging : ''}`}
-                onClick={(e) => handleItemClick(page, e)}
                 onDoubleClick={() => handleItemDblClick(page)}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter' || e.key === ' ') {
-                    e.preventDefault()
-                    handleSelect(page)
-                  }
-                }}
-                tabIndex={0}
                 draggable={isLocalDev && !isEditing}
                 onDragStart={(e) => handleDragStart(index, e)}
                 onDragOver={(e) => handleDragOver(index, e)}
@@ -499,22 +503,27 @@ export default function PageSelector({ currentName, pages: initialPages, isLocal
                     onBlur={handleRenameCommit}
                   />
                 ) : (
-                  <>
+                  <a
+                    href={getPageHref(page)}
+                    className={styles.itemLink}
+                    onClick={(e) => handleItemClick(page, e)}
+                    onDoubleClick={(e) => e.stopPropagation()}
+                  >
                     <span className={styles.itemContent}>{page.title}</span>
-                    {isLocalDev && (
-                      <button
-                        className={styles.duplicateBtn}
-                        onClick={(e) => handleDuplicate(page, e)}
-                        onDoubleClick={(e) => e.stopPropagation()}
-                        title="Duplicate page"
-                        aria-label="Duplicate page"
-                      >
-                        <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
-                          <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25ZM5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z" />
-                        </svg>
-                      </button>
-                    )}
-                  </>
+                  </a>
+                )}
+                {!isEditing && isLocalDev && (
+                  <button
+                    className={styles.duplicateBtn}
+                    onClick={(e) => handleDuplicate(page, e)}
+                    onDoubleClick={(e) => e.stopPropagation()}
+                    title="Duplicate page"
+                    aria-label="Duplicate page"
+                  >
+                    <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+                      <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25ZM5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z" />
+                    </svg>
+                  </button>
                 )}
               </li>
             )

package/src/canvas/PageSelector.module.css

@@ -83,6 +83,15 @@
   white-space: nowrap;
 }
 
+.itemLink {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  color: inherit;
+  text-decoration: none;
+}
+
 .dragHandle {
   opacity: 0;
   color: var(--fgColor-muted, #656d76);

package/src/canvas/widgets/ComponentSetWidget.jsx

@@ -73,15 +73,24 @@ export default forwardRef(function ComponentSetWidget({ id: widgetId, props, onU
   useEffect(() => {
     function handleMessage(e) {
       if (e.source !== iframeRef.current?.contentWindow) return
-      if (e.data?.type !== 'storyboard:component-set:select') return
-      const newSelected = e.data.exportName || ''
-      if (newSelected !== selected) {
-        onUpdate?.({ selected: newSelected })
+      if (e.data?.type === 'storyboard:component-set:select') {
+        const newSelected = e.data.exportName || ''
+        if (newSelected !== selected) {
+          onUpdate?.({ selected: newSelected })
+        }
+      } else if (e.data?.type === 'storyboard:component-set:resize') {
+        // Auto-size widget to fit the grid content (+ header height)
+        const headerH = 32
+        const newW = Math.max(200, Math.ceil(e.data.width))
+        const newH = Math.max(60, Math.ceil(e.data.height) + headerH)
+        if (newW !== width || newH !== height) {
+          onUpdate?.({ width: newW, height: newH })
+        }
       }
     }
     window.addEventListener('message', handleMessage)
     return () => window.removeEventListener('message', handleMessage)
-  }, [selected, onUpdate])
+  }, [selected, width, height, onUpdate])
 
   const handleResize = useCallback((w, h) => {
     onUpdate?.({ width: w, height: h })

package/src/canvas/widgets/CropOverlay.jsx

@@ -5,17 +5,17 @@
  * - A crop region with drag handles (corners + edges)
  * - Dark overlay on excluded area (via box-shadow)
  * - Rule-of-thirds grid
- * - A floating bar anchored to the crop region with Save / Undo / Cancel + dimensions
+ *
+ * The confirmation bar (CropBar) is rendered separately by ImageWidget,
+ * outside the WidgetWrapper, to avoid overflow clipping.
  *
  * Props:
  *   containerWidth / containerHeight — pixel dimensions of the image container
- *   naturalWidth / naturalHeight — natural image dimensions
- *   onSave(cropRect) — called with { x, y, width, height } in natural pixels
+ *   cropRect — current crop rectangle { x, y, width, height } in display pixels
+ *   onCropRectChange(rect) — called when the user drags the crop region
  *   onCancel() — exit crop mode without saving
- *   onUndo() — revert to previous image (only when canUndo is true)
- *   canUndo — whether undo is available
  */
-import { useState, useRef, useCallback, useEffect } from 'react'
+import { useRef, useCallback, useEffect } from 'react'
 import styles from './CropOverlay.module.css'
 
 const MIN_CROP = 20
@@ -52,23 +52,13 @@ function XIcon() {
 export default function CropOverlay({
   containerWidth,
   containerHeight,
-  naturalWidth,
-  naturalHeight,
-  onSave,
+  cropRect,
+  onCropRectChange,
   onCancel,
-  onUndo,
-  canUndo,
 }) {
   const cw = containerWidth || 400
   const ch = containerHeight || 300
 
-  const [cropRect, setCropRect] = useState({
-    x: Math.round(cw * 0.05),
-    y: Math.round(ch * 0.05),
-    width: Math.round(cw * 0.9),
-    height: Math.round(ch * 0.9),
-  })
-
   const dragging = useRef(null)
 
   // Escape key cancels crop
@@ -118,7 +108,7 @@ export default function CropOverlay({
         }
       }
 
-      setCropRect({ x, y, width, height })
+      onCropRectChange({ x, y, width, height })
     }
 
     const onUp = () => {
@@ -129,21 +119,7 @@ export default function CropOverlay({
 
     window.addEventListener('pointermove', onMove)
     window.addEventListener('pointerup', onUp)
-  }, [cropRect, cw, ch])
-
-  const handleSave = useCallback(() => {
-    const scaleX = (naturalWidth || cw) / cw
-    const scaleY = (naturalHeight || ch) / ch
-    onSave?.({
-      x: Math.round(cropRect.x * scaleX),
-      y: Math.round(cropRect.y * scaleY),
-      width: Math.round(cropRect.width * scaleX),
-      height: Math.round(cropRect.height * scaleY),
-    })
-  }, [cropRect, cw, ch, naturalWidth, naturalHeight, onSave])
-
-  const cropW = Math.round(((naturalWidth || cw) / cw) * cropRect.width)
-  const cropH = Math.round(((naturalHeight || ch) / ch) * cropRect.height)
+  }, [cropRect, cw, ch, onCropRectChange])
 
   return (
     <div
@@ -170,48 +146,32 @@ export default function CropOverlay({
         ))}
       </div>
 
-      <FloatingCropBar
-        cropRect={cropRect}
-        containerWidth={cw}
-        cropW={cropW}
-        cropH={cropH}
-        onSave={handleSave}
-        onUndo={onUndo}
-        onCancel={onCancel}
-        canUndo={canUndo}
-      />
     </div>
   )
 }
 
-function FloatingCropBar({ cropRect, containerWidth, cropW, cropH, onSave, onUndo, onCancel, canUndo }) {
-  const barHeight = 36
-  const gap = 10
-  const centerX = cropRect.x + cropRect.width / 2
-  const aboveY = cropRect.y - barHeight - gap
-  const belowY = cropRect.y + cropRect.height + gap
-
-  const anchorBelow = aboveY < 0
-  const barTop = anchorBelow ? belowY : aboveY
-  const barLeft = clamp(centerX, 80, containerWidth - 80)
-
+/**
+ * CropBar — crop confirmation toolbar rendered outside the image widget.
+ * Positioned by the parent (ImageWidget) in place of the WidgetChrome toolbar.
+ */
+export function CropBar({ cropW, cropH, onSave, onUndo, onCancel, canUndo }) {
   return (
     <div
-      className={`${styles.floatingBar} ${anchorBelow ? styles.floatingBarBelow : ''}`}
-      style={{ top: barTop, left: barLeft }}
+      className={styles.cropBar}
       onPointerDown={(e) => e.stopPropagation()}
+      onMouseDown={(e) => e.stopPropagation()}
     >
       <span className={styles.dimensions}>{cropW} × {cropH}</span>
       <span className={styles.separator} />
-      <button className={`${styles.floatingBtn} ${styles.floatingBtnSave}`} onClick={onSave}>
+      <button className={`${styles.cropBarBtn} ${styles.cropBarBtnSave}`} onClick={onSave}>
         <CheckIcon /> Save
       </button>
       {canUndo && (
-        <button className={styles.floatingBtn} onClick={onUndo}>
+        <button className={styles.cropBarBtn} onClick={onUndo}>
           <UndoIcon /> Undo
         </button>
       )}
-      <button className={`${styles.floatingBtn} ${styles.floatingBtnCancel}`} onClick={onCancel}>
+      <button className={`${styles.cropBarBtn} ${styles.cropBarBtnCancel}`} onClick={onCancel}>
         <XIcon />
       </button>
     </div>

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

@@ -47,27 +47,29 @@
 .handleW  { left: -6px; top: 50%; transform: translateY(-50%); cursor: w-resize; }
 .handleE  { right: -6px; top: 50%; transform: translateY(-50%); cursor: e-resize; }
 
-/* ── Floating crop bar ────────────────────────────────────── */
+/* ── Crop confirmation bar (rendered outside widget by ImageWidget) ── */
 
-.floatingBar {
-  position: absolute;
+.cropBar {
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: 6px;
   padding: 4px 8px;
-  background: rgba(0, 0, 0, 0.75);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-  border-radius: 8px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
-  z-index: 20;
-  transform: translateX(-50%);
-  transition: top 80ms ease-out, left 80ms ease-out;
-  pointer-events: auto;
+  background: var(--bgColor-default, #ffffff);
+  border: 1.6px solid var(--borderColor-muted, #d0d7de);
+  border-radius: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   white-space: nowrap;
+  pointer-events: auto;
 }
 
-.floatingBtn {
+:global([data-sb-canvas-theme^='dark']) .cropBar {
+  background: var(--bgColor-muted, #161b22);
+  border-color: var(--borderColor-muted, #373e47);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.cropBarBtn {
   all: unset;
   cursor: pointer;
   display: flex;
@@ -77,42 +79,76 @@
   border-radius: 6px;
   font-size: 12px;
   font-weight: 500;
-  color: #ffffff;
+  color: var(--fgColor-default, #1f2328);
   transition: background 100ms;
 }
 
-.floatingBtn:hover {
-  background: rgba(255, 255, 255, 0.15);
+:global([data-sb-canvas-theme^='dark']) .cropBarBtn {
+  color: var(--fgColor-default, #e6edf3);
 }
 
-.floatingBtnSave {
+.cropBarBtn:hover {
+  background: var(--bgColor-neutral-muted, #eaeef2);
+}
+
+:global([data-sb-canvas-theme^='dark']) .cropBarBtn:hover {
+  background: var(--bgColor-neutral-muted, #272c33);
+}
+
+.cropBarBtnSave {
   background: var(--bgColor-success-emphasis, #1a7f37);
-  color: #ffffff;
+  color: var(--fgColor-onEmphasis, #ffffff);
 }
 
-.floatingBtnSave:hover {
+.cropBarBtnSave:hover {
   background: var(--bgColor-success-emphasis, #2da44e);
+  filter: brightness(1.1);
+}
+
+:global([data-sb-canvas-theme^='dark']) .cropBarBtnSave {
+  background: var(--bgColor-success-emphasis, #238636);
+  color: var(--fgColor-onEmphasis, #ffffff);
 }
 
-.floatingBtnCancel {
-  color: rgba(255, 255, 255, 0.7);
+:global([data-sb-canvas-theme^='dark']) .cropBarBtnSave:hover {
+  background: var(--bgColor-success-emphasis, #2ea043);
+  filter: brightness(1.1);
 }
 
-.floatingBtnCancel:hover {
-  color: #ffffff;
-  background: rgba(255, 255, 255, 0.1);
+.cropBarBtnCancel {
+  color: var(--fgColor-muted, #656d76);
+}
+
+:global([data-sb-canvas-theme^='dark']) .cropBarBtnCancel {
+  color: var(--fgColor-muted, #8b949e);
+}
+
+.cropBarBtnCancel:hover {
+  color: var(--fgColor-default, #1f2328);
+}
+
+:global([data-sb-canvas-theme^='dark']) .cropBarBtnCancel:hover {
+  color: var(--fgColor-default, #e6edf3);
 }
 
 .dimensions {
   font-size: 11px;
   font-weight: 500;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--fgColor-muted, #656d76);
   padding: 0 4px;
   font-variant-numeric: tabular-nums;
 }
 
+:global([data-sb-canvas-theme^='dark']) .dimensions {
+  color: var(--fgColor-muted, #8b949e);
+}
+
 .separator {
   width: 1px;
   height: 16px;
-  background: rgba(255, 255, 255, 0.2);
+  background: var(--borderColor-muted, #d0d7de);
+}
+
+:global([data-sb-canvas-theme^='dark']) .separator {
+  background: var(--borderColor-muted, #373e47);
 }

package/src/canvas/widgets/ImageWidget.jsx

@@ -2,7 +2,7 @@ import { useRef, useCallback, useState, useMemo, forwardRef, useImperativeHandle
 import WidgetWrapper from './WidgetWrapper.jsx'
 import ResizeHandle from './ResizeHandle.jsx'
 import ExpandedPane from './ExpandedPane.jsx'
-import CropOverlay from './CropOverlay.jsx'
+import CropOverlay, { CropBar } from './CropOverlay.jsx'
 import { readProp } from './widgetProps.js'
 import { schemas } from './widgetConfig.js'
 import { toggleImagePrivacy, cropAndUpload } from '../canvasApi.js'
@@ -29,6 +29,7 @@ const ImageWidget = forwardRef(function ImageWidget({ id, props, onUpdate, resiz
   const [expandMode, setExpandMode] = useState(null)
   const expanded = expandMode !== null
   const [cropping, setCropping] = useState(false)
+  const [cropRect, setCropRect] = useState(null)
   const [previousSrc, setPreviousSrc] = useState(null)
   const [containerSize, setContainerSize] = useState(null)
 
@@ -54,11 +55,22 @@ const ImageWidget = forwardRef(function ImageWidget({ id, props, onUpdate, resiz
     onUpdate?.({ width: newWidth, height: newHeight })
   }, [naturalRatio, width, height, onUpdate])
 
-  const handleCropSave = useCallback(async (cropRect) => {
-    if (!src) return
+  const cw = containerSize?.width || width || 400
+  const ch = containerSize?.height || height || 300
+
+  const handleCropSave = useCallback(async () => {
+    if (!src || !cropRect) return
+    const scaleX = (naturalSize?.width || cw) / cw
+    const scaleY = (naturalSize?.height || ch) / ch
+    const naturalCropRect = {
+      x: Math.round(cropRect.x * scaleX),
+      y: Math.round(cropRect.y * scaleY),
+      width: Math.round(cropRect.width * scaleX),
+      height: Math.round(cropRect.height * scaleY),
+    }
     const canvasId = window.__storyboardCanvasBridgeState?.canvasId || ''
     try {
-      const result = await cropAndUpload(src, cropRect, canvasId)
+      const result = await cropAndUpload(src, naturalCropRect, canvasId)
       if (result.success) {
         setPreviousSrc(src)
         onUpdate?.({ src: result.filename })
@@ -67,10 +79,12 @@ const ImageWidget = forwardRef(function ImageWidget({ id, props, onUpdate, resiz
       console.error('[canvas] Failed to crop image:', err)
     }
     setCropping(false)
-  }, [src, onUpdate])
+    setCropRect(null)
+  }, [src, cropRect, naturalSize, cw, ch, onUpdate])
 
   const handleCropCancel = useCallback(() => {
     setCropping(false)
+    setCropRect(null)
   }, [])
 
   const handleCropUndo = useCallback(() => {
@@ -79,6 +93,7 @@ const ImageWidget = forwardRef(function ImageWidget({ id, props, onUpdate, resiz
       setPreviousSrc(null)
     }
     setCropping(false)
+    setCropRect(null)
   }, [previousSrc, onUpdate])
 
   useImperativeHandle(ref, () => ({
@@ -88,7 +103,15 @@ const ImageWidget = forwardRef(function ImageWidget({ id, props, onUpdate, resiz
       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 })
+        const w = el?.offsetWidth || width || 400
+        const h = el?.offsetHeight || height || 300
+        if (el) setContainerSize({ width: w, height: h })
+        setCropRect({
+          x: Math.round(w * 0.05),
+          y: Math.round(h * 0.05),
+          width: Math.round(w * 0.9),
+          height: Math.round(h * 0.9),
+        })
         setCropping(true)
         return true
       }
@@ -104,12 +127,22 @@ const ImageWidget = forwardRef(function ImageWidget({ id, props, onUpdate, resiz
       } 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)
+        fetch(url)
+          .then((r) => {
+            if (!r.ok) throw new Error(`HTTP ${r.status}`)
+            return r.blob()
+          })
+          .then((blob) => {
+            const blobUrl = URL.createObjectURL(blob)
+            const a = document.createElement('a')
+            a.href = blobUrl
+            a.download = src.replace(/^~/, '')
+            document.body.appendChild(a)
+            a.click()
+            document.body.removeChild(a)
+            URL.revokeObjectURL(blobUrl)
+          })
+          .catch((err) => console.error('[canvas] Failed to download image:', err))
       } else if (actionId === 'copy-as-png') {
         if (!src) return
         const url = getImageUrl(src)
@@ -132,6 +165,12 @@ const ImageWidget = forwardRef(function ImageWidget({ id, props, onUpdate, resiz
   const sizeStyle = {}
   if (typeof width === 'number') sizeStyle.width = `${width}px`
 
+  // Compute crop dimensions in natural pixels for the CropBar display
+  const scaleX = cropRect ? ((naturalSize?.width || cw) / cw) : 1
+  const scaleY = cropRect ? ((naturalSize?.height || ch) / ch) : 1
+  const cropW = cropRect ? Math.round(cropRect.width * scaleX) : 0
+  const cropH = cropRect ? Math.round(cropRect.height * scaleY) : 0
+
   return (
     <>
     <WidgetWrapper className={styles.imageWrapper}>
@@ -150,16 +189,13 @@ const ImageWidget = forwardRef(function ImageWidget({ id, props, onUpdate, resiz
               Private
             </span>
           )}
-          {cropping && (
+          {cropping && cropRect && (
             <CropOverlay
-              containerWidth={containerSize?.width || width || 400}
-              containerHeight={containerSize?.height || height || 300}
-              naturalWidth={naturalSize?.width}
-              naturalHeight={naturalSize?.height}
-              onSave={handleCropSave}
+              containerWidth={cw}
+              containerHeight={ch}
+              cropRect={cropRect}
+              onCropRectChange={setCropRect}
               onCancel={handleCropCancel}
-              onUndo={handleCropUndo}
-              canUndo={!!previousSrc}
             />
           )}
         </div>
@@ -173,6 +209,18 @@ const ImageWidget = forwardRef(function ImageWidget({ id, props, onUpdate, resiz
         )}
       </div>
     </WidgetWrapper>
+    {cropping && cropRect && (
+      <div className={styles.cropBarSlot}>
+        <CropBar
+          cropW={cropW}
+          cropH={cropH}
+          onSave={handleCropSave}
+          onCancel={handleCropCancel}
+          onUndo={handleCropUndo}
+          canUndo={!!previousSrc}
+        />
+      </div>
+    )}
     {expanded && (
       <ImageExpandPane
         widgetId={id}

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

@@ -28,11 +28,23 @@
   pointer-events: none;
 }
 
-/* Hide the widget toolbar when crop is active (WidgetChrome reads this) */
+/* Hide the widget toolbar when crop is active (replaced by crop bar) */
 .container[data-crop-active] {
   overflow: visible;
 }
 
+/* Crop bar slot — positioned below the widget like the WidgetChrome toolbar */
+.cropBarSlot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: calc(100% + 10px);
+  z-index: 20;
+}
+
 .privateBadge {
   position: absolute;
   top: 20px;

package/src/canvas/widgets/LinkPreview.jsx

@@ -31,6 +31,9 @@ function postProcessHtml(html) {
   // Unwrap <details><summary>...</summary><video ...></details> → just the <video>
   out = out.replace(/<details[^>]*>\s*<summary[^>]*>[\s\S]*?<\/summary>\s*(<video[\s\S]*?<\/video>)\s*<\/details>/gi, '$1')
 
+  // Force remaining <details> elements open so content is visible
+  out = out.replace(/<details(?![^>]*\bopen\b)/gi, '<details open')
+
   // Convert bare video URLs (wrapped in <p>) into <video> elements
   out = out.replace(VIDEO_URL_LINE_RE, (_, url) =>
     `<video src="${url}" controls preload="none"></video>`
@@ -52,6 +55,14 @@ function postProcessHtml(html) {
     return `<input ${before}${after}>`
   })
 
+  // Mark @mention links with a data attribute for pill styling.
+  // GitHub API HTML uses class="user-mention" but remark output won't have it.
+  // Match <a ...>@username</a> linking to github.com profiles.
+  out = out.replace(/<a\s([^>]*)>(@[a-zA-Z0-9_-]+)<\/a>/g, (match, attrs, text) => {
+    if (match.includes('data-mention')) return match
+    return `<a ${attrs} data-mention>${text}</a>`
+  })
+
   return out
 }
 

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

@@ -241,6 +241,22 @@
   text-decoration: underline;
 }
 
+/* @mention pills — blue background + text like GitHub */
+.issueBody a[data-mention] {
+  background: var(--bgColor-accent-muted, #ddf4ff);
+  color: var(--fgColor-accent, #0969da);
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.issueBody a[data-mention]:hover {
+  background: var(--bgColor-accent-emphasis, #0969da);
+  color: var(--fgColor-onEmphasis, #ffffff);
+  text-decoration: none;
+}
+
 .issueBody img {
   max-width: 100%;
   height: auto;
@@ -400,15 +416,32 @@
   margin: 16px 0;
 }
 
-/* Details/summary — show content expanded, no collapse UI */
+/* Details/summary — interactive collapsible sections */
 .issueBody details {
-  border: none;
-  margin: 0;
+  border: 1px solid var(--borderColor-muted, #d8dee4);
+  border-radius: 6px;
+  margin: 12px 0;
   padding: 0;
 }
 
 .issueBody summary {
-  display: none;
+  display: list-item;
+  cursor: pointer;
+  pointer-events: auto;
+  font-weight: 600;
+  padding: 8px 12px;
+  list-style: disclosure-closed inside;
+  user-select: none;
+}
+
+.issueBody details[open] > summary {
+  list-style-type: disclosure-open;
+  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+  margin-bottom: 0;
+}
+
+.issueBody details > :not(summary) {
+  padding: 0 12px;
 }
 
 .error {
@@ -491,6 +524,8 @@
 .expandedIssueBody * { pointer-events: auto; }
 .expandedIssueBody a { color: var(--fgColor-accent, #0969da); text-decoration: none; }
 .expandedIssueBody a:hover { text-decoration: underline; }
+.expandedIssueBody a[data-mention] { background: var(--bgColor-accent-muted, #ddf4ff); color: var(--fgColor-accent, #0969da); padding: 1px 6px; border-radius: 4px; font-weight: 600; text-decoration: none; }
+.expandedIssueBody a[data-mention]:hover { background: var(--bgColor-accent-emphasis, #0969da); color: var(--fgColor-onEmphasis, #ffffff); text-decoration: none; }
 .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; }
@@ -504,6 +539,10 @@
 .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); }
+.expandedIssueBody details { border: 1px solid var(--borderColor-muted, #d8dee4); border-radius: 6px; margin: 12px 0; padding: 0; }
+.expandedIssueBody summary { display: list-item; cursor: pointer; font-weight: 600; padding: 8px 12px; list-style: disclosure-closed inside; user-select: none; }
+.expandedIssueBody details[open] > summary { list-style-type: disclosure-open; border-bottom: 1px solid var(--borderColor-muted, #d8dee4); margin-bottom: 0; }
+.expandedIssueBody details > :not(summary) { padding: 0 12px; }
 
 /* ── Expanded plain link view ─────────────────────────────────────── */
 

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

@@ -92,6 +92,13 @@
   border-radius: 4px;
 }
 
+/* Hide toolbar and connector anchors when a child widget is in crop mode */
+.chromeContainer:has([data-crop-active]) .toolbar,
+.chromeContainer:has([data-crop-active]) .anchorPort {
+  visibility: hidden;
+  pointer-events: none;
+}
+
 .widgetSlotSelected {
   outline: 4px solid var(--bgColor-accent-emphasis, #2f81f7);
   outline-offset: 2px;

package/src/context.jsx

@@ -263,7 +263,7 @@ function StoryboardProviderInner({ flowName, sceneName, recordName, recordParam,
         cleanup = mountDesignModes()
       })
       .catch(() => {
-        // Svelte UI not available — degrade gracefully
+        // UI not available — degrade gracefully
       })
 
     return () => cleanup?.()

package/src/index.js

@@ -34,7 +34,7 @@ export { installHashPreserver } from './hashPreserver.js'
 export { FormContext } from './context/FormContext.js'
 
 // Design mode hook (keep — React apps may still read mode state)
-// ModeSwitch and ToolbarShell UI moved to @dfosco/storyboard-svelte-ui
+
 
 // Workspace dashboard
 export { default as Workspace } from './Workspace.jsx'

package/src/story/ComponentSetPage.jsx

@@ -84,7 +84,8 @@ export default function ComponentSetPage({ name }) {
 
   const gridRef = useRef(null)
 
-  // Measure all cell content elements and snap cells to the largest
+  // Measure all cell content elements and snap cells to the largest.
+  // Posts the total grid size to the parent widget so it can auto-size.
   useLayoutEffect(() => {
     const grid = gridRef.current
     if (!grid || !exports) return
@@ -101,6 +102,17 @@ export default function ComponentSetPage({ name }) {
       }
       grid.style.setProperty('--cell-snap-w', `${maxW}px`)
       grid.style.setProperty('--cell-snap-h', `${maxH}px`)
+
+      // Post total grid size to parent widget
+      if (isEmbed && window.parent !== window) {
+        requestAnimationFrame(() => {
+          window.parent.postMessage({
+            type: 'storyboard:component-set:resize',
+            width: grid.scrollWidth,
+            height: grid.scrollHeight,
+          }, '*')
+        })
+      }
     }
 
     // Measure after fonts load and initial paint
@@ -110,7 +122,7 @@ export default function ComponentSetPage({ name }) {
     const ro = new ResizeObserver(measure)
     for (const el of cells) ro.observe(el)
     return () => ro.disconnect()
-  }, [exports, layout])
+  }, [exports, layout, isEmbed])
 
   const handleSelect = useCallback((exportName) => {
     const params = new URLSearchParams(location.search)

package/src/story/ComponentSetPage.module.css

@@ -1,12 +1,11 @@
 /* ComponentSetPage — grid layout for all exports of a story */
 
 .grid {
-  background-color: var(--bgColor-muted, #f6f8fa);
+  background-color: var(--bgColor-default, #ffffff);
   display: flex;
   flex-wrap: nowrap;
-  gap: 12px;
-  padding: 12px;
-  min-height: 100vh;
+  gap: 0;
+  padding: 0;
   width: max-content;
   min-width: 100%;
   box-sizing: border-box;
@@ -24,20 +23,30 @@
   flex: 0 0 auto;
   display: flex;
   flex-direction: column;
-  border: 2px solid var(--borderColor-muted, #d8dee4);
-  border-radius: 2px;
+  border: 1px solid var(--borderColor-muted, #d8dee4);
+  border-radius: 0;
   overflow: hidden;
   transition: border-color 120ms ease, box-shadow 120ms ease;
   position: relative;
-  background: var(--bgColor-default, #ffffff);
+  background: var(--bgColor-muted, #f6f8fa);
+}
+
+/* Collapse double borders between adjacent cells */
+.grid[data-layout="horizontal"] .cell + .cell {
+  border-left: none;
 }
 
-/* In horizontal layout, each cell snaps to the widest component */
+.grid[data-layout="vertical"] .cell + .cell {
+  border-top: none;
+}
+
+/* In horizontal layout, cells snap to widest and tallest component */
 .grid[data-layout="horizontal"] .cell {
   min-width: var(--cell-snap-w, 200px);
+  min-height: var(--cell-snap-h, 60px);
 }
 
-/* In vertical layout, each cell snaps to the tallest component */
+/* In vertical layout, cells snap to widest and tallest component */
 .grid[data-layout="vertical"] .cell {
   min-height: var(--cell-snap-h, 120px);
   min-width: 100%;
@@ -58,14 +67,12 @@
   font-size: 11px;
   font-weight: 600;
   color: var(--fgColor-muted, #656d76);
-  background: var(--bgColor-muted, #f6f8fa);
+  background: var(--bgColor-default, #ffffff);
   border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
   cursor: pointer;
   user-select: none;
   transition: background 100ms ease, color 100ms ease;
   flex-shrink: 0;
-  /* Round top corners to match cell */
-  border-radius: 6px 6px 0 0;
 }
 
 .cellLabel:hover {
@@ -99,6 +106,7 @@
   flex: 1;
   overflow: visible;
   position: relative;
+  padding: 12px;
 }
 
 .error {