npm - @dfosco/storyboard-core - Versions diffs - 3.2.0 → 3.3.1 - Mend

@dfosco/storyboard-core 3.2.0 → 3.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (61) hide show

package/dist/storyboard-ui.css +1 -0
package/dist/storyboard-ui.js +26304 -0
package/dist/storyboard-ui.js.map +1 -0
package/dist/tailwind.css +1 -1
package/package.json +24 -18
package/scaffold/manifest.json +35 -0
package/scaffold/scripts/link.sh +26 -0
package/scaffold/scripts/unlink.sh +10 -0
package/scaffold/skills/create/SKILL.md +501 -0
package/scaffold/skills/storyboard/SKILL.md +360 -0
package/scaffold/skills/update-storyboard/SKILL.md +16 -0
package/scaffold/skills/update-storyboard/update-storyboard-packages.sh +26 -0
package/scaffold/skills/vitest/GENERATION.md +5 -0
package/scaffold/skills/vitest/SKILL.md +52 -0
package/scaffold/skills/vitest/references/advanced-environments.md +264 -0
package/scaffold/skills/vitest/references/advanced-projects.md +300 -0
package/scaffold/skills/vitest/references/advanced-type-testing.md +237 -0
package/scaffold/skills/vitest/references/advanced-vi.md +249 -0
package/scaffold/skills/vitest/references/core-cli.md +166 -0
package/scaffold/skills/vitest/references/core-config.md +174 -0
package/scaffold/skills/vitest/references/core-describe.md +193 -0
package/scaffold/skills/vitest/references/core-expect.md +219 -0
package/scaffold/skills/vitest/references/core-hooks.md +244 -0
package/scaffold/skills/vitest/references/core-test-api.md +233 -0
package/scaffold/skills/vitest/references/features-concurrency.md +250 -0
package/scaffold/skills/vitest/references/features-context.md +238 -0
package/scaffold/skills/vitest/references/features-coverage.md +207 -0
package/scaffold/skills/vitest/references/features-filtering.md +211 -0
package/scaffold/skills/vitest/references/features-mocking.md +265 -0
package/scaffold/skills/vitest/references/features-snapshots.md +207 -0
package/scaffold/skills/worktree/SKILL.md +51 -0
package/scaffold/storyboard.config.json +26 -0
package/scaffold/svelte.config.js +1 -0
package/scaffold/toolbar.config.json +4 -0
package/src/ActionMenuButton.svelte +1 -1
package/src/CanvasCreateMenu.svelte +1 -1
package/src/CoreUIBar.svelte +23 -12
package/src/CreateMenuButton.svelte +1 -1
package/src/InspectorPanel.svelte +144 -49
package/src/SidePanel.svelte +10 -10
package/src/commandActions.js +1 -1
package/src/comments/index.js +0 -3
package/src/devtools-consumer.js +28 -0
package/src/devtools.js +4 -1
package/src/index.js +8 -3
package/src/inspector/highlighter.js +28 -17
package/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte +1 -1
package/src/lib/components/ui/trigger-button/trigger-button.svelte +8 -4
package/src/mountStoryboardCore.js +223 -0
package/src/scaffold.js +100 -0
package/src/stores/themeStore.ts +29 -8
package/src/styles/tailwind.css +16 -0
package/src/svelte-plugin-ui/components/Viewfinder.svelte +18 -0
package/src/ui-entry.js +30 -0
package/src/vite/server-plugin.js +8 -24
package/src/workshop/features/createCanvas/CreateCanvasForm.svelte +24 -6
package/src/workshop/features/createFlow/CreateFlowForm.svelte +1 -1
package/src/workshop/features/createFlow/index.js +0 -1
package/src/workshop/features/createPrototype/CreatePrototypeForm.svelte +1 -1
package/src/workshop/features/createPrototype/index.js +0 -1
/package/{core-ui.config.json → toolbar.config.json} +0 -0

package/src/InspectorPanel.svelte CHANGED Viewed

@@ -28,6 +28,59 @@
   /** @type {Element | null} — the currently selected DOM element */
   let selectedElement = $state(null)
+  // ── URL state helpers ─────────────────────────────────────────────
+  /**
+   * Build a CSS selector that can re-find `el` later.
+   * Prefers id, then data-testid, then an nth-child path from <body>.
+   */
+  function generateSelector(el) {
+    if (!(el instanceof Element)) return null
+    if (el.id) return `#${CSS.escape(el.id)}`
+    const testId = el.getAttribute('data-testid')
+    if (testId) return `[data-testid="${CSS.escape(testId)}"]`
+    const parts = []
+    let cur = el
+    while (cur && cur !== document.body && cur !== document.documentElement) {
+      let seg = cur.tagName.toLowerCase()
+      if (cur.id) {
+        parts.unshift(`#${CSS.escape(cur.id)}`)
+        break
+      }
+      const parent = cur.parentElement
+      if (parent) {
+        const siblings = Array.from(parent.children)
+        const idx = siblings.indexOf(cur) + 1
+        seg += `:nth-child(${idx})`
+      }
+      parts.unshift(seg)
+      cur = parent
+    }
+    return parts.length ? parts.join(' > ') : null
+  }
+  /** Read the `inspect` search param from the current URL. */
+  function getInspectParam() {
+    try {
+      return new URL(window.location.href).searchParams.get('inspect')
+    } catch { return null }
+  }
+  /** Set or clear the `inspect` search param without triggering navigation. */
+  function setInspectParam(selector) {
+    try {
+      const url = new URL(window.location.href)
+      if (selector) {
+        url.searchParams.set('inspect', selector)
+      } else {
+        url.searchParams.delete('inspect')
+      }
+      history.replaceState(history.state, '', url.toString())
+    } catch {}
+  }
   /** @type {string[]} */
   let knownFiles = []
@@ -44,7 +97,10 @@
   async function loadStaticData() {
     if (staticInspectorData) return staticInspectorData
     try {
-      const res = await fetch(`${import.meta.env.BASE_URL}_storyboard/inspector.json`)
+      // Use window.location to derive base path at runtime, since
+      // import.meta.env.BASE_URL is baked at compile time in the UI bundle
+      const basePath = window.__STORYBOARD_BASE_PATH__ || '/'
+      const res = await fetch(`${basePath}_storyboard/inspector.json`)
       if (res.ok) {
         staticInspectorData = await res.json()
         return staticInspectorData
@@ -55,12 +111,19 @@
   /**
    * Fetch source file content — uses dev middleware in dev, static JSON in prod.
+   * Uses runtime detection (not import.meta.env.DEV) so this works in the
+   * pre-compiled UI bundle where compile-time env vars are baked in.
    */
   async function fetchSourceContent(filePath) {
-    if (import.meta.env.DEV) {
+    // Try the dev middleware first — works when Vite server plugin is active
+    try {
       const res = await fetch(`/_storyboard/docs/source?path=${encodeURIComponent(filePath)}`)
-      return res.ok ? (await res.json())?.content || '' : ''
-    }
+      if (res.ok) {
+        const json = await res.json()
+        return json?.content || ''
+      }
+    } catch {}
+    // Fall back to static inspector JSON for deployed/production builds
     const data = await loadStaticData()
     return data?.sources?.[filePath] || ''
   }
@@ -322,6 +385,8 @@
     inspecting = false
     // Show persistent highlight on the selected element
     mouseMode?.showHighlight(el)
+    // Persist selection to URL
+    setInspectParam(generateSelector(el))
   }
   function handleDeactivate() {
@@ -333,6 +398,8 @@
     mouseMode?.hideHighlight()
     mouseMode?.activate()
     inspecting = true
+    // Clear URL param while re-selecting
+    setInspectParam(null)
   }
   function stopInspecting() {
@@ -360,38 +427,62 @@
       onDeactivate: handleDeactivate,
     })
-    // Auto-start inspector mode
-    startInspecting()
-    // Pre-fetch file list and repo info
-    if (import.meta.env.DEV) {
-      // Dev: use live middleware endpoints
-      try {
-        const [filesRes, repoRes] = await Promise.all([
-          fetch('/_storyboard/docs/files'),
-          fetch('/_storyboard/docs/repo'),
-        ])
-        if (filesRes.ok) {
-          const data = await filesRes.json()
-          knownFiles = data.files || []
-        }
-        if (repoRes.ok) {
-          repoInfo = await repoRes.json()
-        }
-      } catch {}
-    } else {
-      // Production: load from static build-time JSON
+    // Pre-fetch file list and repo info FIRST (needed for source resolution)
+    // Try dev middleware first, fall back to static JSON
+    let filesLoaded = false
+    try {
+      const [filesRes, repoRes] = await Promise.all([
+        fetch('/_storyboard/docs/files'),
+        fetch('/_storyboard/docs/repo'),
+      ])
+      if (filesRes.ok) {
+        const data = await filesRes.json()
+        knownFiles = data.files || []
+        filesLoaded = true
+      }
+      if (repoRes.ok) {
+        repoInfo = await repoRes.json()
+      }
+    } catch {}
+    if (!filesLoaded) {
+      // Fall back to static build-time JSON
       const data = await loadStaticData()
       if (data) {
         knownFiles = data.files || []
         repoInfo = data.repo || null
       }
     }
+    // Restore inspector selection from URL param (after files are loaded)
+    const savedSelector = getInspectParam()
+    let restored = false
+    if (savedSelector) {
+      // Retry with delay — the React page may still be rendering
+      for (let attempt = 0; attempt < 5 && !restored; attempt++) {
+        if (attempt > 0) await new Promise(r => setTimeout(r, 300))
+        try {
+          const el = document.querySelector(savedSelector)
+          if (el) {
+            handleSelect(el)
+            restored = true
+          }
+        } catch {
+          break // invalid selector, don't retry
+        }
+      }
+      if (!restored) setInspectParam(null)
+    }
+    if (!restored) {
+      startInspecting()
+    }
   })
   onDestroy(() => {
     mouseMode?.deactivate()
     mouseMode?.hideHighlight()
+    setInspectParam(null)
   })
 </script>
@@ -433,7 +524,7 @@
           class="mt-2 px-4 py-1.5 text-xs font-medium rounded-md border cursor-pointer transition-colors"
           style:background="transparent"
           style:color="var(--fgColor-muted)"
-          style:border-color="var(--borderColor-default)"
+          style:border-color="var(--borderColor-default, var(--color-border, #d1d9e0))"
           onclick={stopInspecting}
         >
           Cancel
@@ -442,29 +533,19 @@
     <!-- Selected state -->
     {:else}
-      <div class="flex flex-col flex-1 min-h-0 p-3 gap-3">
+      <div class="flex flex-col flex-1 min-h-0 p-3 pt-0 gap-3">
         <!-- Component name -->
         <div>
           <h3 class="text-base font-bold m-0 inspector-mono" style:color="var(--color-purple, #7655a4)">
             {componentInfo.name}
           </h3>
-          <!-- Source file -->
-          {#if sourcePath}
-            <p class="inline-flex items-center gap-1 mt-1 text-xs m-0 inspector-mono" style:color="var(--fgColor-muted)">
-              <Icon name="primer/file-code" size={12} />
-              {sourcePath}
-            </p>
-          {/if}
         </div>
         <!-- Source code -->
         {#if sourcePath}
-          <div class="border rounded-md overflow-hidden flex-1 min-h-0 flex flex-col" style:border-color="var(--borderColor-default)">
+          <div class="border rounded-md overflow-hidden flex-1 min-h-0 flex flex-col inspector-code-block" style:border-color="var(--borderColor-default, var(--color-border, #d1d9e0))">
             <div
-              class="flex items-center justify-between w-full px-3 py-1.5 text-xs font-semibold shrink-0"
-              style:background="var(--bgColor-default)"
-              style:color="var(--fgColor-muted)"
+              class="flex items-center justify-between w-full px-3 py-1.5 text-xs font-semibold shrink-0 inspector-code-header"
             >
               <span class="flex items-center gap-1.5 min-w-0">
                 <Icon name="primer/file-code" size={12} />
@@ -475,8 +556,7 @@
                   href={githubUrl}
                   target="_blank"
                   rel="noopener noreferrer"
-                  class="flex items-center gap-1 shrink-0 text-xs no-underline hover:underline inspector-mono"
-                  style:color="var(--fgColor-muted)"
+                  class="flex items-center gap-1 shrink-0 text-xs no-underline hover:underline inspector-mono inspector-code-link"
                 >
                   <Icon name="primer/mark-github" size={14} />
                   <span>GitHub</span>
@@ -484,9 +564,9 @@
               {/if}
             </div>
-            <div class="border-t flex-1 min-h-0 flex flex-col" style:border-color="var(--borderColor-default)">
+            <div class="border-t flex-1 min-h-0 flex flex-col" style:border-color="#30363d">
                 {#if sourceLoading}
-                  <div class="px-3 py-4 text-xs text-center" style:color="var(--fgColor-muted)">
+                  <div class="px-3 py-4 text-xs text-center" style:color="#8b949e">
                     Loading source…
                   </div>
                 {:else if sourceCode}
@@ -494,11 +574,11 @@
                     {#if highlightedHtml}
                       <div class="shiki-wrapper">{@html highlightedHtml}</div>
                     {:else}
-                      <pre class="m-0 text-xs leading-relaxed inspector-mono source-pre" style:color="var(--fgColor-default)">{sourceCode}</pre>
+                      <pre class="m-0 text-xs leading-relaxed inspector-mono source-pre" style:color="#c9d1d9">{sourceCode}</pre>
                     {/if}
                   </div>
                 {:else}
-                  <div class="px-3 py-4 text-xs text-center" style:color="var(--fgColor-muted)">
+                  <div class="px-3 py-4 text-xs text-center" style:color="#8b949e">
                     Unable to load source
                   </div>
                 {/if}
@@ -526,10 +606,6 @@
     font-family: "Ioskeley Mono", ui-monospace, monospace;
   }
-  .inspector-toggle-active {
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-purple, #7655a4) 30%, transparent);
-  }
   .inspector-pulse-dot {
     width: 8px;
     height: 8px;
@@ -584,4 +660,23 @@
     background: color-mix(in srgb, var(--color-purple, #7655a4) 20%, transparent);
     border-left: 2px solid var(--color-purple, #7655a4);
   }
+  /* Force dark chrome on the code block — independent of page theme */
+  .inspector-code-block {
+    background: #0d1117;
+    border-color: #30363d !important;
+  }
+  .inspector-code-header {
+    background: #161b22;
+    color: #8b949e;
+    border-bottom: 1px solid #30363d;
+  }
+  .inspector-code-link {
+    color: #8b949e;
+  }
+  .inspector-code-link:hover {
+    color: #c9d1d9;
+  }
 </style>

package/src/SidePanel.svelte CHANGED Viewed

@@ -276,11 +276,11 @@
     z-index: 9998;
     display: flex;
     flex-direction: column;
-    background-color: var(--bgColor-default, #0d1117);
-    border-left: 1px solid var(--borderColor-default, #30363d);
+    background-color: var(--bgColor-default, var(--color-background, #ffffff));
+    border-left: 1px solid var(--borderColor-default, var(--color-border, #d0d7de));
     box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
-    color: var(--fgColor-default, #e6edf3);
+    color: var(--fgColor-default, var(--color-foreground, #1f2328));
     animation: sb-sidepanel-slide-in 0.25s ease;
   }
@@ -293,7 +293,7 @@
     width: 100% !important;
     height: var(--sidepanel-height, 300px);
     border-left: none;
-    border-top: 1px solid var(--borderColor-default, #30363d);
+    border-top: 1px solid var(--borderColor-default, var(--color-border, #d0d7de));
     box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
     animation: sb-sidepanel-slide-up 0.25s ease;
   }
@@ -320,7 +320,7 @@
     left: 0;
     right: 0;
     height: 3px;
-    background: var(--mode-color, var(--borderColor-default, #30363d));
+    background: var(--mode-color, var(--borderColor-default, var(--color-border, #d0d7de)));
   }
   /* Drag handle — side mode (left edge, vertical) */
@@ -378,7 +378,7 @@
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.05em;
-    color: var(--fgColor-muted, #848d97);
+    color: var(--fgColor-muted, var(--color-muted-foreground, #656d76));
     padding-left: 4px;
   }
@@ -392,7 +392,7 @@
     appearance: none;
     border: none;
     background: transparent;
-    color: var(--fgColor-muted, #848d97);
+    color: var(--fgColor-muted, var(--color-muted-foreground, #656d76));
     cursor: pointer;
     padding: 6px;
     border-radius: 6px;
@@ -404,7 +404,7 @@
   .sb-sidepanel-action-btn:hover {
     background: var(--bgColor-neutral-muted, rgba(110, 118, 129, 0.1));
-    color: var(--fgColor-default, #e6edf3);
+    color: var(--fgColor-default, var(--color-foreground, #1f2328));
   }
   /* Body */
@@ -425,8 +425,8 @@
   .sb-sidepanel-spinner {
     width: 20px;
     height: 20px;
-    border: 2px solid var(--borderColor-default, #30363d);
-    border-top-color: var(--fgColor-muted, #848d97);
+    border: 2px solid var(--borderColor-default, var(--color-border, #d0d7de));
+    border-top-color: var(--fgColor-muted, var(--color-muted-foreground, #656d76));
     border-radius: 50%;
     animation: sb-spin 0.6s linear infinite;
   }

package/src/commandActions.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /**
  * Command Actions — config-driven registry for command menu entries.
  *
- * The command section of core-ui.config.json declares action metadata:
+ * The command section of toolbar.config.json declares action metadata:
  *   id, label, type, hideFrom, separatorBefore
  *
  * Handler shapes by type:

package/src/comments/index.js CHANGED Viewed

@@ -40,6 +40,3 @@ export { saveDraft, getDraft, clearDraft, composerDraftKey, replyDraftKey } from
 // GraphQL client (for advanced use)
 export { graphql } from './graphql.js'
-// Mount (Svelte UI)
-export { mountComments } from './ui/mount.js'

package/src/devtools-consumer.js ADDED Viewed

@@ -0,0 +1,28 @@
+/**
+ * Consumer-safe proxy for mountDevTools.
+ *
+ * Delegates to the compiled UI bundle (@dfosco/storyboard-core/ui-runtime)
+ * so consumers don't need svelte installed. The real mountDevTools in
+ * devtools.js imports svelte directly and is only usable in the source repo
+ * or via the compiled UI bundle.
+ */
+export async function mountDevTools(options = {}) {
+  const ui = await import('@dfosco/storyboard-core/ui-runtime')
+  return ui.mountDevTools(options)
+}
+export async function unmountDevTools() {
+  const ui = await import('@dfosco/storyboard-core/ui-runtime')
+  return ui.unmountDevTools()
+}
+/** @deprecated Use mountDevTools instead. */
+export function mountFlowDebug(options = {}) {
+  return mountDevTools(options)
+}
+/** @deprecated Use mountDevTools instead. */
+export function mountSceneDebug(options = {}) {
+  return mountDevTools(options)
+}

package/src/devtools.js CHANGED Viewed

@@ -30,6 +30,9 @@ export async function mountDevTools(options = {}) {
   // Prevent double-mount
   if (wrapper) return
+  // Skip mounting entirely when loaded inside a prototype embed iframe
+  if (typeof window !== 'undefined' && new URLSearchParams(window.location.search).has('_sb_embed')) return
   const { mount } = await import('svelte')
   const { default: CoreUIBar } = await import('./CoreUIBar.svelte')
@@ -105,7 +108,7 @@ export async function mountDevTools(options = {}) {
   instance = mount(CoreUIBar, {
     target: wrapper,
-    props: { basePath },
+    props: { basePath, toolbarConfig: options.toolbarConfig },
   })
 }

package/src/index.js CHANGED Viewed

@@ -28,7 +28,7 @@ export { getByPath, setByPath, deepClone } from './dotPath.js'
 export { getParam, setParam, getAllParams, removeParam } from './session.js'
 // localStorage persistence
-export { getLocal, setLocal, removeLocal, getAllLocal, subscribeToStorage, getStorageSnapshot } from './localStorage.js'
+export { getLocal, setLocal, removeLocal, getAllLocal, subscribeToStorage, getStorageSnapshot, notifyChange } from './localStorage.js'
 // Hide mode (clean URLs)
 export { isHideMode, activateHideMode, deactivateHideMode, getShadow, setShadow, removeShadow, getAllShadows, pushSnapshot, getOverrideHistory, getCurrentSnapshot, getCurrentRoute, getCurrentIndex, getNextIndex, canUndo, canRedo, undo, redo, syncHashToHistory, installHistorySync } from './hideMode.js'
@@ -49,11 +49,16 @@ export { registerMode, unregisterMode, getRegisteredModes, getCurrentMode, activ
 export { initTools, setToolAction, setToolState, getToolState, getToolsForMode, subscribeToTools, getToolsSnapshot } from './modes.js'
 // Dev tools (vanilla JS, framework-agnostic)
-export { mountDevTools } from './devtools.js'
+// mountDevTools delegates to the compiled UI bundle so consumers
+// don't need svelte installed — svelte is bundled into ui-runtime.
+export { mountDevTools } from './devtools-consumer.js'
 export { mountFlowDebug } from './sceneDebug.js'
 // Deprecated alias
 export { mountSceneDebug } from './sceneDebug.js'
+// Single entry point for consumer apps
+export { mountStoryboardCore } from './mountStoryboardCore.js'
 // Viewfinder utilities
 export { hash, resolveFlowRoute, getFlowMeta, buildPrototypeIndex } from './viewfinder.js'
 // Deprecated aliases
@@ -63,7 +68,7 @@ export { resolveSceneRoute, getSceneMeta } from './viewfinder.js'
 export { initFeatureFlags, getFlag, setFlag, toggleFlag, getAllFlags, resetFlags, getFlagKeys, syncFlagBodyClasses } from './featureFlags.js'
 // Command actions (config-driven command menu entries)
-export { initCommandActions, registerCommandAction, unregisterCommandAction, setDynamicActions, clearDynamicActions, getActionsForMode, executeAction, getActionChildren, subscribeToCommandActions, getCommandActionsSnapshot, setRoutingBasePath } from './commandActions.js'
+export { initCommandActions, registerCommandAction, unregisterCommandAction, setDynamicActions, clearDynamicActions, getActionsForMode, executeAction, getActionChildren, subscribeToCommandActions, getCommandActionsSnapshot, setRoutingBasePath, isExcludedByRoute } from './commandActions.js'
 // Plugin configuration
 export { initPlugins, isPluginEnabled, getPluginsConfig } from './plugins.js'

package/src/inspector/highlighter.js CHANGED Viewed

@@ -4,24 +4,35 @@
  * Uses shiki/core with only the four languages the inspector needs,
  * avoiding the full shiki bundle that registers 200+ lazy-loaded
  * language chunks (which break in deployed/static environments).
+ *
+ * Each import() has .catch() so consumer bundlers (esbuild dep optimizer)
+ * treat them as runtime-fallible and don't fail at build time when shiki
+ * isn't installed. Returns null when shiki is unavailable.
  */
-import { createHighlighterCore } from 'shiki/core'
-import { createOnigurumaEngine } from 'shiki/engine/oniguruma'
 export async function createInspectorHighlighter() {
-  const [tsx, jsx, javascript, typescript, githubDark, wasm] =
-    await Promise.all([
-      import('shiki/dist/langs/tsx.mjs'),
-      import('shiki/dist/langs/jsx.mjs'),
-      import('shiki/dist/langs/javascript.mjs'),
-      import('shiki/dist/langs/typescript.mjs'),
-      import('shiki/dist/themes/github-dark.mjs'),
-      import('shiki/wasm'),
-    ])
+  try {
+    const [shikiCore, oniguruma, tsx, jsx, javascript, typescript, githubDark, wasm] =
+      await Promise.all([
+        import('shiki/core').catch(() => null),
+        import('shiki/engine/oniguruma').catch(() => null),
+        import('shiki/dist/langs/tsx.mjs').catch(() => null),
+        import('shiki/dist/langs/jsx.mjs').catch(() => null),
+        import('shiki/dist/langs/javascript.mjs').catch(() => null),
+        import('shiki/dist/langs/typescript.mjs').catch(() => null),
+        import('shiki/dist/themes/github-dark.mjs').catch(() => null),
+        import('shiki/wasm').catch(() => null),
+      ])
+    if (!shikiCore || !oniguruma || !tsx || !jsx || !javascript || !typescript || !githubDark || !wasm) {
+      return null
+    }
-  return createHighlighterCore({
-    themes: [githubDark.default],
-    langs: [tsx.default, jsx.default, javascript.default, typescript.default],
-    engine: createOnigurumaEngine(wasm),
-  })
+    return shikiCore.createHighlighterCore({
+      themes: [githubDark.default],
+      langs: [tsx.default, jsx.default, javascript.default, typescript.default],
+      engine: oniguruma.createOnigurumaEngine(wasm),
+    })
+  } catch {
+    return null
+  }
 }

package/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte CHANGED Viewed

@@ -19,7 +19,7 @@
 		{sideOffset}
 		{align}
 		class={cn(
-			"font-sans data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 w-(--bits-dropdown-menu-anchor-width) data-closed:overflow-hidden z-[10000] bg-popover border-3 border-slate-400 text-slate-800 fill-slate-600 min-w-40 rounded-xl p-2 shadow-xl duration-100 overflow-x-hidden overflow-y-auto",
+			"font-sans data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 w-(--bits-dropdown-menu-anchor-width) data-closed:overflow-hidden z-[10000] bg-popover border-3 border-slate-400 text-slate-800 fill-slate-600 min-w-40 rounded-xl p-2 shadow-xl duration-100 overflow-x-hidden overflow-y-auto",
 			className
 		)}
 		{...restProps}

package/src/lib/components/ui/trigger-button/trigger-button.svelte CHANGED Viewed

@@ -12,11 +12,15 @@
 <script module>
   import { cn } from "../../../utils/index.js";
-  // Register CSS Houdini paint worklet for superellipse masks
+  // Register CSS Houdini paint worklet for superellipse masks.
+  // Inlined from smooth-corners (MIT) to avoid Vite-specific ?url import
+  // that breaks when this source is consumed from node_modules.
   if (typeof CSS !== 'undefined' && 'paintWorklet' in CSS) {
-    import('smooth-corners/paint.js?url').then(mod => {
-      CSS.paintWorklet.addModule(mod.default)
-    }).catch(() => {})
+    try {
+      const worklet = `class P{static get inputProperties(){return["--smooth-corners"]}superellipse(a,b,nX=4,nY){if(Number.isNaN(nX))nX=4;if(typeof nY==="undefined"||Number.isNaN(nY))nY=nX;if(nX>100)nX=100;if(nY>100)nY=100;if(nX<1e-11)nX=1e-11;if(nY<1e-11)nY=1e-11;const nX2=2/nX,nY2=nY?2/nY:nX2,steps=360,step=(2*Math.PI)/steps;return Array.from({length:steps},(_,i)=>{const t=i*step,cosT=Math.cos(t),sinT=Math.sin(t);return{x:Math.abs(cosT)**nX2*a*Math.sign(cosT),y:Math.abs(sinT)**nY2*b*Math.sign(sinT)}})}paint(ctx,geom,props){const[nX,nY]=props.get("--smooth-corners").toString().replace(/ /g,"").split(",");const w=geom.width/2,h=geom.height/2,s=this.superellipse(w,h,parseFloat(nX),parseFloat(nY));ctx.fillStyle="#000";ctx.setTransform(1,0,0,1,w,h);ctx.beginPath();for(let i=0;i<s.length;i++){const{x,y}=s[i];i===0?ctx.moveTo(x,y):ctx.lineTo(x,y)}ctx.closePath();ctx.fill()}}registerPaint("smooth-corners",P);`;
+      const blob = new Blob([worklet], { type: 'application/javascript' });
+      CSS.paintWorklet.addModule(URL.createObjectURL(blob));
+    } catch {}
   }
 </script>