@dfosco/storyboard 0.6.9 → 0.6.11

package/package.json

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

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

@@ -54,22 +54,24 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
 
   const basePath = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
   const baseSegment = basePath.replace(/^\//, '')
-  // Iframe URL is mode-dependent:
-  //   - DEV: route through the isolated prototypes.html entry so a
-  //     broken prototype's transform/HMR errors stay inside the iframe
-  //     and never poison the canvas (see .agents/plans/vite-isolation.md).
-  //     prototypes.html uses createHashRouter, so /MyProto/SignupForm
-  //     becomes prototypes.html?proto=MyProto#/MyProto/SignupForm.
-  //   - PROD: load the prototype path directly through the canvas SPA's
-  //     BrowserRouter (e.g. /MyProto/SignupForm). prototypes.html is a
-  //     build-time isolation artifact — it must not leak into deployed
-  //     URLs (breaks deep links, exposes build internals). basePath
-  //     already carries the /branch--xxx/ prefix on branch deploys, so
-  //     this works for main and branch deploys alike.
-  // External http(s) URLs are left alone.
-  const rawSrc = useMemo(() => {
-    if (!src) return ''
-    if (/^https?:\/\//.test(src)) return src
+  // Two URLs are derived from `src`:
+  //   - rawSrc — the iframe URL. In DEV this routes through the isolated
+  //     prototypes.html entry so a broken prototype's transform/HMR errors
+  //     stay inside the iframe (see .agents/plans/vite-isolation.md):
+  //     /MyProto/SignupForm becomes prototypes.html?proto=MyProto#/MyProto/SignupForm.
+  //     In PROD it loads the prototype path directly through the canvas SPA
+  //     (prototypes.html is a build-time isolation artifact that must not
+  //     leak into deployed URLs).
+  //   - externalSrc — the URL used by "Open in new tab". Always direct
+  //     (`${basePath}/<protoPath>`), never prototypes.html, even in dev —
+  //     opening prototypes.html#/... in a fresh tab is a leaky surprise
+  //     for users navigating from the canvas.
+  // External http(s) URLs are left alone in both cases. basePath already
+  // carries the /branch--xxx/ prefix on branch deploys, so both work for
+  // main and branch deploys alike.
+  const { rawSrc, externalSrc } = useMemo(() => {
+    if (!src) return { rawSrc: '', externalSrc: '' }
+    if (/^https?:\/\//.test(src)) return { rawSrc: src, externalSrc: src }
     const cleaned = src.replace(/^\/branch--[^/]+/, '')
     let normalized
     if (baseSegment && cleaned.startsWith(basePath)) normalized = cleaned
@@ -77,7 +79,7 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
     else normalized = `${basePath}${cleaned}`
     // Strip basePath so we can split path/query/hash cleanly and
     // re-anchor for whichever mode we're in. Any pre-existing #hash on
-    // the original src is preserved as the iframe URL's hash.
+    // the original src is preserved.
     const withoutBase = baseSegment && normalized.startsWith(basePath)
       ? normalized.slice(basePath.length) || '/'
       : normalized
@@ -86,18 +88,20 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
     const pathAndQuery = hashIdx >= 0 ? withoutBase.slice(0, hashIdx) : withoutBase
     const routePath = pathAndQuery.startsWith('/') ? pathAndQuery : `/${pathAndQuery}`
     const suffix = innerHash ? `#${innerHash}` : ''
+    // Direct path through the canvas SPA — used in prod for the iframe and
+    // always for "Open in new tab".
+    const directUrl = `${basePath}${routePath}${suffix}`
     if (import.meta.env.PROD) {
-      // Direct path through the canvas SPA — no prototypes.html in
-      // production URLs.
-      return `${basePath}${routePath}${suffix}`
+      return { rawSrc: directUrl, externalSrc: directUrl }
     }
-    // Dev: prototypes.html with ?proto= narrowing. The consumer's
+    // Dev iframe: prototypes.html with ?proto= narrowing. The consumer's
     // prototypes-entry.jsx reads ?proto= and calls getRoutesForProto();
     // older scaffolds harmlessly ignore the param and load the full tree.
     const pathOnly = pathAndQuery.split('?')[0]
     const protoName = pathOnly.split('/').filter(Boolean)[0] || ''
     const queryStr = protoName ? `?proto=${encodeURIComponent(protoName)}` : ''
-    return `${basePath}/prototypes.html${queryStr}#${routePath}${suffix}`
+    const iframeUrl = `${basePath}/prototypes.html${queryStr}#${routePath}${suffix}`
+    return { rawSrc: iframeUrl, externalSrc: directUrl }
   }, [src, basePath, baseSegment])
 
   const scale = zoom / 100
@@ -332,7 +336,7 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
       } else if (actionId === 'split-screen') {
         setExpandMode('split')
       } else if (actionId === 'open-external') {
-        if (rawSrc) window.open(rawSrc, '_blank', 'noopener')
+        if (externalSrc) window.open(externalSrc, '_blank', 'noopener')
       } else if (actionId === 'refresh-frame') {
         const iframe = iframeRef.current
         if (iframe) {
@@ -347,7 +351,7 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
         onUpdate?.({ zoom: Math.max(25, zoom - step) })
       }
     },
-  }), [rawSrc, zoom, onUpdate])
+  }), [externalSrc, zoom, onUpdate])
 
   function handlePickRoute(route) {
     onUpdate?.({ src: route })

package/src/internals/context.jsx

@@ -132,6 +132,14 @@ function matchStoryRoute(pathname) {
  * Strip the app's sub-path prefix (e.g. /storyboard) from the pathname.
  * React Router's basename strips the branch prefix but not the app name prefix
  * when the app runs under a nested base path.
+ *
+ * Two prefixing scenarios are handled:
+ *   1. Branch deploys — BASE_URL is `/branch--xxx/{devDomain}/`, so we strip
+ *      whatever app sub-path remains after the branch prefix.
+ *   2. Local dev via Caddy proxy — BASE_URL is `/` (Caddy strips `/{devDomain}/`
+ *      before forwarding to the dev server), but window.location.pathname is
+ *      still `/{devDomain}/...`. React Router's basename `/` doesn't strip it,
+ *      so we rely on the injected `__SB_DEV_DOMAIN__` global instead.
  */
 function stripBasePath(pathname) {
   let p = pathname.replace(/\/+$/, '') || '/'
@@ -146,6 +154,18 @@ function stripBasePath(pathname) {
       p = p.slice(subPath.length) || '/'
     }
   }
+  // Local dev via Caddy proxy: window.location.pathname includes the
+  // /{devDomain}/ prefix that Caddy strips before reaching the dev server.
+  // BASE_URL is `/` in this scenario, so the block above is a no-op.
+  if (typeof window !== 'undefined' && window.__SB_LOCAL_DEV__ && window.__SB_DEV_DOMAIN__) {
+    const devDomain = String(window.__SB_DEV_DOMAIN__).replace(/^\/+|\/+$/g, '')
+    if (devDomain) {
+      const devPrefix = '/' + devDomain
+      if (p === devPrefix || p.startsWith(devPrefix + '/')) {
+        p = p.slice(devPrefix.length) || '/'
+      }
+    }
+  }
   return p
 }
 

package/src/internals/context.test.jsx

@@ -293,4 +293,51 @@ describe('StoryboardProvider', () => {
     expect(screen.getByText('Canvas not found')).toBeInTheDocument()
     expect(screen.getByRole('link', { name: /go to index page/i })).toHaveAttribute('href', '/')
   })
+
+  it('strips dev-domain prefix in local dev (Caddy proxy) so canvas routes resolve', () => {
+    // Local dev via Caddy: window.location.pathname includes the /{devDomain}/
+    // prefix even though BASE_URL is `/` (the proxy strips it before forwarding
+    // to the dev server). Without stripping, isCanvasPath returns false and the
+    // 404 never renders — the canvas page just stays blank.
+    const origLocalDev = window.__SB_LOCAL_DEV__
+    const origDomain = window.__SB_DEV_DOMAIN__
+    window.__SB_LOCAL_DEV__ = true
+    window.__SB_DEV_DOMAIN__ = 'storyboard'
+    try {
+      mockUseLocation.mockReturnValue({ pathname: '/storyboard/canvas/unknown-board', search: '', hash: '' })
+
+      render(
+        <StoryboardProvider>
+          <ContextReader />
+        </StoryboardProvider>,
+      )
+
+      expect(screen.getByText('Canvas not found')).toBeInTheDocument()
+    } finally {
+      window.__SB_LOCAL_DEV__ = origLocalDev
+      window.__SB_DEV_DOMAIN__ = origDomain
+    }
+  })
+
+  it('does not strip dev-domain prefix when __SB_LOCAL_DEV__ is not set', () => {
+    // Same URL shape, but production-like: prefix should be left alone so it
+    // doesn't accidentally match canvas routes for unrelated path segments.
+    const origDomain = window.__SB_DEV_DOMAIN__
+    window.__SB_DEV_DOMAIN__ = 'storyboard'
+    try {
+      mockUseLocation.mockReturnValue({ pathname: '/storyboard/canvas/unknown-board', search: '', hash: '' })
+
+      render(
+        <StoryboardProvider>
+          <ContextReader />
+        </StoryboardProvider>,
+      )
+
+      // isCanvasPath sees `/storyboard/canvas/...` → does NOT start with `/canvas/`
+      // → no 404, just renders flow context
+      expect(screen.queryByText('Canvas not found')).not.toBeInTheDocument()
+    } finally {
+      window.__SB_DEV_DOMAIN__ = origDomain
+    }
+  })
 })