@dfosco/storyboard 0.6.13 → 0.6.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dfosco/storyboard",
-  "version": "0.6.13",
+  "version": "0.6.14",
   "type": "module",
   "license": "MIT",
   "description": "Storyboard prototyping framework — core engine, React integration, and canvas",

package/src/core/mountStoryboardCore.js

@@ -399,12 +399,7 @@ export async function mountStoryboardCore(config = {}, options = {}) {
         if (currentHref !== lastHref) {
           lastHref = currentHref
           const basePath = (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
-          const pathname = window.location.pathname
-          const hash = window.location.hash
-          const stripped = basePath && pathname.startsWith(basePath)
-            ? pathname.slice(basePath.length) || '/'
-            : pathname.replace(/^\/branch--[^/]+/, '') || '/'
-          const src = stripped + hash
+          const src = computeEmbedNavigationSrc(window.location.pathname, window.location.hash, basePath)
           window.parent.postMessage({ type: 'storyboard:embed:navigate', src }, '*')
         }
       }
@@ -462,6 +457,36 @@ export async function mountStoryboardCore(config = {}, options = {}) {
   handlePendingNavigation()
 }
 
+/**
+ * Compute the route src to broadcast to the parent canvas from a prototype embed iframe.
+ *
+ * In **dev mode**, the embed iframe is loaded via the isolation entry
+ * (`/prototypes.html#/<route>`), so `pathname` is `/prototypes.html` and the
+ * actual route lives in the hash. We strip the loader path and report the
+ * hash content as the src. Otherwise, the parent canvas would persist
+ * `/prototypes.html#/<route>` as the widget src — and then re-build the
+ * iframe URL as `/prototypes.html?proto=prototypes.html#/...`, which loads
+ * a blank page. Duplicating that widget (cmd+D) inherits the broken src.
+ *
+ * In **prod mode**, the iframe loads the prototype route directly through
+ * the canvas SPA, so `pathname` already contains the route — we just strip
+ * the base path (and any `/branch--xxx/` deploy prefix) and append the hash.
+ *
+ * Exported for tests.
+ */
+export function computeEmbedNavigationSrc(pathname, hash, basePath = '') {
+  const cleanBase = (basePath || '').replace(/\/$/, '')
+  const stripped = cleanBase && pathname.startsWith(cleanBase)
+    ? pathname.slice(cleanBase.length) || '/'
+    : pathname.replace(/^\/branch--[^/]+/, '') || '/'
+  if (stripped === '/prototypes.html' || stripped.endsWith('/prototypes.html')) {
+    const inner = (hash || '').startsWith('#') ? hash.slice(1) : (hash || '')
+    if (!inner) return '/'
+    return inner.startsWith('/') ? inner : `/${inner}`
+  }
+  return stripped + (hash || '')
+}
+
 /**
  * Check sessionStorage for a pending navigation target.
  * Used by PageSelector when creating a new canvas page — Vite does a full-reload

package/src/core/mountStoryboardCore.test.js

@@ -0,0 +1,101 @@
+import { computeEmbedNavigationSrc } from './mountStoryboardCore.js'
+
+describe('computeEmbedNavigationSrc', () => {
+  describe('prod mode (direct route in pathname)', () => {
+    it('strips basePath and appends hash', () => {
+      expect(computeEmbedNavigationSrc('/cq-org-enablement', '#sectionA', '/')).toBe(
+        '/cq-org-enablement#sectionA',
+      )
+    })
+
+    it('handles non-root basePath', () => {
+      expect(
+        computeEmbedNavigationSrc('/storyboard/cq-org-enablement', '#x', '/storyboard/'),
+      ).toBe('/cq-org-enablement#x')
+    })
+
+    it('strips /branch--xxx/ deploy prefix', () => {
+      expect(
+        computeEmbedNavigationSrc('/branch--my-feature/cq-org-enablement', '#x', '/'),
+      ).toBe('/cq-org-enablement#x')
+    })
+
+    it('returns "/" when pathname equals basePath', () => {
+      expect(computeEmbedNavigationSrc('/storyboard', '', '/storyboard/')).toBe('/')
+    })
+
+    it('handles missing hash', () => {
+      expect(computeEmbedNavigationSrc('/MyProto', '', '/')).toBe('/MyProto')
+    })
+  })
+
+  describe('dev mode (prototypes.html isolation entry)', () => {
+    it('uses hash content as src when pathname is /prototypes.html', () => {
+      expect(
+        computeEmbedNavigationSrc('/prototypes.html', '#/cq-org-enablement', '/'),
+      ).toBe('/cq-org-enablement')
+    })
+
+    it('preserves query string inside hash', () => {
+      expect(
+        computeEmbedNavigationSrc(
+          '/prototypes.html',
+          '#/cq-org-enablement?flow=cq-org-enablement/default&cqConfirmOpen=true',
+          '/',
+        ),
+      ).toBe('/cq-org-enablement?flow=cq-org-enablement/default&cqConfirmOpen=true')
+    })
+
+    it('handles non-root basePath', () => {
+      expect(
+        computeEmbedNavigationSrc('/storyboard/prototypes.html', '#/MyProto', '/storyboard/'),
+      ).toBe('/MyProto')
+    })
+
+    it('handles branch deploy basePath', () => {
+      expect(
+        computeEmbedNavigationSrc(
+          '/branch--feature-x/prototypes.html',
+          '#/MyProto',
+          '/branch--feature-x/',
+        ),
+      ).toBe('/MyProto')
+    })
+
+    it('prefixes inner hash with "/" if missing', () => {
+      expect(
+        computeEmbedNavigationSrc('/prototypes.html', '#MyProto', '/'),
+      ).toBe('/MyProto')
+    })
+
+    it('returns "/" for empty hash', () => {
+      expect(computeEmbedNavigationSrc('/prototypes.html', '', '/')).toBe('/')
+    })
+
+    it('returns "/" for hash that is just "#"', () => {
+      expect(computeEmbedNavigationSrc('/prototypes.html', '#', '/')).toBe('/')
+    })
+  })
+
+  describe('cmd+D regression — must never produce /prototypes.html#... as src', () => {
+    // The original bug: dev embed broadcast pathname+hash, so the parent
+    // canvas persisted `/prototypes.html#/route` as the widget src. The
+    // URL builder then rebuilt the iframe URL as
+    // `/prototypes.html?proto=prototypes.html#/prototypes.html#/route`,
+    // which loaded a blank page. Duplicating that widget (cmd+D) carried
+    // the broken src to every clone.
+    it('never returns a string starting with /prototypes.html#', () => {
+      const cases = [
+        ['/prototypes.html', '#/foo'],
+        ['/prototypes.html', '#/foo?bar=1'],
+        ['/storyboard/prototypes.html', '#/bar'],
+        ['/branch--x/prototypes.html', '#/baz'],
+      ]
+      for (const [pathname, hash] of cases) {
+        const basePath = pathname.replace(/\/prototypes\.html$/, '/') || '/'
+        const result = computeEmbedNavigationSrc(pathname, hash, basePath)
+        expect(result.startsWith('/prototypes.html')).toBe(false)
+      }
+    })
+  })
+})

package/src/internals/canvas/widgets/PrototypeEmbed.jsx

@@ -27,6 +27,21 @@ function formatName(name) {
     .replace(/\b\w/g, (c) => c.toUpperCase())
 }
 
+// Self-heal canvases that persisted a dev-isolation src like
+// `/prototypes.html#/MyProto?...` (caused by an older broadcastNavigation
+// that reported pathname+hash, treating the loader path as the route).
+// Without this normalization, the URL builder treats "prototypes.html" as
+// the prototype name and produces a blank iframe — and cmd+D duplicates
+// inherit the broken src. Pure, deterministic, safe to call on every render.
+function normalizeLegacyEmbedSrc(src) {
+  if (typeof src !== 'string' || !src) return src
+  const m = src.match(/^\/?(?:[^#]*\/)?prototypes\.html#(.*)$/)
+  if (!m) return src
+  const inner = m[1] || ''
+  if (!inner) return '/'
+  return inner.startsWith('/') ? inner : `/${inner}`
+}
+
 function resolveCanvasThemeFromStorage() {
   if (typeof localStorage === 'undefined') return 'light'
   let sync = { prototype: true, toolbar: false, codeBoxes: true, canvas: false }
@@ -46,7 +61,7 @@ function resolveCanvasThemeFromStorage() {
 const HEADER_HEIGHT = 37
 
 export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdate, resizable }, ref) {
-  const src = readProp(props, 'src', prototypeEmbedSchema)
+  const src = normalizeLegacyEmbedSrc(readProp(props, 'src', prototypeEmbedSchema))
   const width = readProp(props, 'width', prototypeEmbedSchema) || 800
   const height = readProp(props, 'height', prototypeEmbedSchema) || 600
   const zoom = readProp(props, 'zoom', prototypeEmbedSchema) || 100
@@ -309,7 +324,10 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
     function handleMessage(e) {
       if (e.source !== iframeRef.current?.contentWindow) return
       if (e.data?.type !== 'storyboard:embed:navigate') return
-      const newSrc = e.data.src
+      // Defensive: older consumer embeds reported `/prototypes.html#/route`
+      // here (loader path + hash). Normalize to the inner route so we never
+      // persist the broken form.
+      const newSrc = normalizeLegacyEmbedSrc(e.data.src)
       if (newSrc && newSrc !== src) {
         const originalSrc = readProp(props, 'originalSrc', prototypeEmbedSchema)
         onUpdate?.({ src: newSrc, originalSrc: originalSrc || src })