@dfosco/storyboard-react 4.2.2 → 4.2.3

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "4.2.2",
+  "version": "4.2.3",
   "type": "module",
   "dependencies": {
     "@base-ui/react": "^1.4.0",
-    "@dfosco/storyboard-core": "4.2.2",
-    "@dfosco/tiny-canvas": "4.2.2",
+    "@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/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/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/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 {