@dfosco/storyboard-core 3.8.0 → 3.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dfosco/storyboard-core",
-  "version": "3.8.0",
+  "version": "3.8.2",
   "type": "module",
   "license": "MIT",
   "bin": {

package/src/CommandMenu.svelte

@@ -169,7 +169,15 @@
             {@const itemState = action.toolKey ? getToolbarToolState(action.toolKey) : 'active'}
             {@const itemLocalOnly = action.toolKey ? isToolbarToolLocalOnly(action.toolKey) : false}
             <DropdownMenu.Item
-              onclick={() => { open = false; window.location.href = action.url }}
+              onclick={() => {
+                open = false
+                if (action.url.startsWith('/') && !action.url.startsWith('//')) {
+                  const base = (basePath || '/').replace(/\/+$/, '')
+                  window.location.href = (base === '/' ? '' : base) + action.url
+                } else {
+                  window.location.href = action.url
+                }
+              }}
               disabled={itemState === 'inactive'}
               class={itemState === 'dimmed' ? 'opacity-50' : ''}
             >

package/src/InspectorPanel.svelte

@@ -9,7 +9,7 @@
   import Icon from './svelte-plugin-ui/components/Icon.svelte'
   import { inspectElement, inspectElementChain } from './inspector/fiberWalker.js'
   import { createMouseMode } from './inspector/mouseMode.js'
-  import { getColors } from './inspector/highlighter.js'
+  import { getColors, createInspectorHighlighter } from './inspector/highlighter.js'
 
   /** @type {{ name: string, props: object, source: { fileName: string, lineNumber: number, columnNumber?: number } | null, owner: string | null } | null} */
   let componentInfo = $state(null)
@@ -255,7 +255,6 @@
 
   async function getHighlighter() {
     if (highlighter) return highlighter
-    const { createInspectorHighlighter } = await import('./inspector/highlighter.js')
     highlighter = await createInspectorHighlighter()
     return highlighter
   }

package/src/svelte-plugin-ui/components/Viewfinder.svelte

@@ -146,8 +146,15 @@
     setLocal(EXPANDED_KEY, JSON.stringify(expanded))
   }
 
+  function withBase(route: string): string {
+    const normalizedRoute = route.startsWith('/') ? route : `/${route}`
+    const normalizedBase = (basePath || '/').replace(/\/+$/, '')
+    if (!normalizedBase || normalizedBase === '/') return normalizedRoute
+    return `${normalizedBase}${normalizedRoute}`.replace(/\/+/g, '/')
+  }
+
   function protoRoute(dirName: string): string {
-    return `/${dirName}`
+    return withBase(`/${dirName}`)
   }
 
   function formatName(name: string): string {
@@ -342,7 +349,7 @@
             </a>
           {:else if proto.hideFlows && proto.flows.length === 1}
             <!-- Single flow, hidden — navigates directly to the flow -->
-            <a class="listItem" href={proto.flows[0].route}>
+            <a class="listItem" href={withBase(proto.flows[0].route)}>
               <div class="cardBody">
                 <p class="protoName" class:otherflows={proto.dirName === '__global__'}>
                   {#if proto.icon}<span class="protoIcon">{proto.icon}</span>{/if}
@@ -446,7 +453,7 @@
           {#if !(proto.hideFlows && proto.flows.length === 1) && isExpanded(proto.dirName) && proto.flows.length > 0}
             <div class="flowList">
               {#each proto.flows as flow (flow.key)}
-                <a href={flow.route} class="listItem flowItem">
+                <a href={withBase(flow.route)} class="listItem flowItem">
                   {#if showThumbnails}
                     <div class="thumbnail">
                       {@html placeholderSvg(flow.key)}
@@ -467,7 +474,7 @@
 
       {#snippet canvasEntry(canvas)}
         <section class="protoGroup">
-          <a class="listItem" href={canvas.route}>
+          <a class="listItem" href={withBase(canvas.route)}>
             <div class="cardBody">
               <p class="protoName">
                 <span class="protoIcon">{canvas.icon || ''}</span>
@@ -577,6 +584,8 @@
     background-color: var(--bgColor-default, #0d1117);
     color: var(--fgColor-default, #e6edf3);
     padding: 80px 32px 48px;
+    max-width: 960px;
+    margin: 0 auto;
   }
 
   .header {