@dfosco/storyboard 0.6.9 → 0.6.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dfosco/storyboard",
-  "version": "0.6.9",
+  "version": "0.6.10",
   "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 })