@dfosco/storyboard 0.6.10 → 0.6.11

package/package.json

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

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
+    }
+  })
 })