diff --git a/apps/docs/__tests__/doctest.test.ts b/apps/docs/__tests__/doctest.test.ts
index 1bcc8c62ed..d4010f4e07 100644
--- a/apps/docs/__tests__/doctest.test.ts
+++ b/apps/docs/__tests__/doctest.test.ts
@@ -1,6 +1,20 @@
 import { test, describe, beforeAll, expect } from 'bun:test';
 import { resolve } from 'node:path';
 import { Editor, getStarterExtensions } from '../../../packages/superdoc/dist/super-editor.es.js';
+
+// Headless toolbar exports — loaded dynamically because they may not
+// exist in the dist until the feature branch is merged and rebuilt.
+let createHeadlessToolbar: any;
+let headlessToolbarConstants: any;
+let headlessToolbarHelpers: any;
+try {
+  const mod = await import('../../../packages/superdoc/dist/super-editor.es.js');
+  createHeadlessToolbar = mod.createHeadlessToolbar;
+  headlessToolbarConstants = mod.headlessToolbarConstants;
+  headlessToolbarHelpers = mod.headlessToolbarHelpers;
+} catch {
+  // Not available yet — headless tests will be skipped
+}
 import { extractExamples } from './lib/extract.ts';
 import { transformCode, applyStubs } from './lib/transform.ts';
 
@@ -44,6 +58,28 @@ function isApiError(err: unknown, code: string): boolean {
   return false;
 }
 
+function createMockSuperdocHost(editor: Editor) {
+  const listeners = new Map<string, Set<Function>>();
+  return {
+    activeEditor: editor,
+    on(event: string, fn: Function) {
+      if (!listeners.has(event)) listeners.set(event, new Set());
+      listeners.get(event)!.add(fn);
+    },
+    off(event: string, fn: Function) {
+      listeners.get(event)?.delete(fn);
+    },
+    superdocStore: {
+      documents: [],
+    },
+    config: { rulers: false, documentMode: 'editing' },
+    getZoom: () => 100,
+    setZoom: () => {},
+    toggleRuler: () => {},
+    setDocumentMode: () => {},
+  };
+}
+
 const examples = extractExamples(docsRoot);
 
 const byFile = new Map<string, typeof examples>();
@@ -69,9 +105,55 @@ for (const [file, fileExamples] of byFile) {
         });
 
         try {
-          editor.commands.selectAll();
-          const fn = new AsyncFunction('editor', code);
-          await fn(editor);
+          if (example.pattern === 'headless') {
+            if (!createHeadlessToolbar) return; // skip until dist includes headless toolbar
+            const superdoc = createMockSuperdocHost(editor);
+            const toolbar = createHeadlessToolbar({
+              superdoc,
+              commands: [
+                'bold',
+                'italic',
+                'underline',
+                'strikethrough',
+                'font-family',
+                'font-size',
+                'text-color',
+                'highlight-color',
+                'link',
+                'text-align',
+                'line-height',
+                'linked-style',
+                'bullet-list',
+                'numbered-list',
+                'indent-increase',
+                'indent-decrease',
+                'undo',
+                'redo',
+                'ruler',
+                'zoom',
+                'document-mode',
+                'clear-formatting',
+                'copy-format',
+                'image',
+                'track-changes-accept-selection',
+                'track-changes-reject-selection',
+                'table-insert',
+              ],
+            });
+            const fn = new AsyncFunction(
+              'toolbar',
+              'headlessToolbarConstants',
+              'headlessToolbarHelpers',
+              'editor',
+              code,
+            );
+            await fn(toolbar, headlessToolbarConstants, headlessToolbarHelpers, editor);
+            toolbar.destroy();
+          } else {
+            editor.commands.selectAll();
+            const fn = new AsyncFunction('editor', code);
+            await fn(editor);
+          }
         } catch (err) {
           if (isApiError(err, code)) {
             throw new Error(
diff --git a/apps/docs/__tests__/lib/extract.ts b/apps/docs/__tests__/lib/extract.ts
index c57ee43397..d321da0dff 100644
--- a/apps/docs/__tests__/lib/extract.ts
+++ b/apps/docs/__tests__/lib/extract.ts
@@ -10,7 +10,7 @@ export interface CodeExample {
   file: string;
   section: string;
   code: string;
-  pattern: 'superdoc' | 'editor' | 'unknown';
+  pattern: 'superdoc' | 'editor' | 'headless' | 'unknown';
   line: number;
 }
 
@@ -60,7 +60,10 @@ function globMdx(dir: string): string[] {
   return results;
 }
 
-function detectPattern(code: string): 'superdoc' | 'editor' | 'unknown' {
+function detectPattern(code: string): 'superdoc' | 'editor' | 'headless' | 'unknown' {
+  if (code.includes("from 'superdoc/headless-toolbar'") || code.includes('createHeadlessToolbar')) {
+    return 'headless';
+  }
   if (code.includes("from 'superdoc/super-editor'") || code.includes('Editor.open')) {
     return 'editor';
   }
diff --git a/apps/docs/__tests__/lib/transform.ts b/apps/docs/__tests__/lib/transform.ts
index b77b2d83e1..ab24df3f9d 100644
--- a/apps/docs/__tests__/lib/transform.ts
+++ b/apps/docs/__tests__/lib/transform.ts
@@ -8,6 +8,7 @@ import type { CodeExample } from './extract';
 export function transformCode(example: CodeExample): string | null {
   if (example.pattern === 'superdoc') return transformSuperdocPattern(example.code);
   if (example.pattern === 'editor') return transformEditorPattern(example.code);
+  if (example.pattern === 'headless') return transformHeadlessPattern(example.code);
   return null;
 }
 
@@ -77,6 +78,23 @@ function transformEditorPattern(code: string): string | null {
   return result || null;
 }
 
+function transformHeadlessPattern(code: string): string | null {
+  const lines = code.split('\n');
+
+  // Strip imports and SuperDoc/toolbar creation boilerplate, keep API usage
+  const filtered = lines.filter((line) => {
+    const trimmed = line.trim();
+    if (trimmed.startsWith('import ')) return false;
+    if (/(?:const|let)\s+superdoc\s*=/.test(trimmed)) return false;
+    if (/(?:const|let)\s+toolbar\s*=\s*createHeadlessToolbar/.test(trimmed)) return false;
+    if (/(?:const|let)\s+unsubscribe\s*=/.test(trimmed)) return false;
+    return true;
+  });
+
+  const result = filtered.join('\n').trim();
+  return result || null;
+}
+
 /** Extract handler body from superdoc.on() patterns that contain editor calls. */
 function extractEventBody(code: string): string | null {
   const lines = code.split('\n');
diff --git a/apps/docs/core/superdoc/configuration.mdx b/apps/docs/core/superdoc/configuration.mdx
index 89dc5bbd30..6433165c19 100644
--- a/apps/docs/core/superdoc/configuration.mdx
+++ b/apps/docs/core/superdoc/configuration.mdx
@@ -215,7 +215,7 @@ new SuperDoc({
       Text label overrides
     </ParamField>
     <ParamField path="fonts" type="string[]">
-      Available font families. See [Toolbar fonts](/modules/toolbar#font-configuration) for details.
+      Available font families. See [Toolbar fonts](/modules/toolbar/built-in#font-configuration) for details.
 
       <Info>Custom fonts from DOCX files will display in the toolbar but won't be selectable unless loaded in your app and added here.</Info>
     </ParamField>
@@ -444,7 +444,9 @@ new SuperDoc({
 </ParamField>
 
 <ParamField path="toolbar" type="string">
-  CSS selector for the toolbar container (e.g. `'#toolbar'`). Shorthand for `modules.toolbar.selector`.
+  CSS selector for the built-in toolbar container (e.g. `'#toolbar'`). Shorthand for `modules.toolbar.selector`.
+
+  Omit this to skip the built-in toolbar — for example, when using the [headless toolbar](/modules/toolbar/headless) to build your own UI.
 </ParamField>
 
 ## Advanced options
diff --git a/apps/docs/docs.json b/apps/docs/docs.json
index cd9ad0bc3d..62984b5e2c 100644
--- a/apps/docs/docs.json
+++ b/apps/docs/docs.json
@@ -141,7 +141,16 @@
                 ]
               },
               "modules/comments",
-              "modules/toolbar",
+              {
+                "group": "Toolbar",
+                "tag": "NEW",
+                "pages": [
+                  "modules/toolbar/overview",
+                  "modules/toolbar/built-in",
+                  "modules/toolbar/headless",
+                  "modules/toolbar/examples"
+                ]
+              },
               "modules/links",
               "modules/context-menu",
               "modules/pdf",
@@ -331,6 +340,10 @@
     "dismissible": true
   },
   "redirects": [
+    {
+      "source": "/modules/toolbar",
+      "destination": "/modules/toolbar/overview"
+    },
     {
       "source": "/getting-started/ai-agents",
       "destination": "/document-engine/ai-agents/llm-tools"
diff --git a/apps/docs/modules/toolbar.mdx b/apps/docs/modules/toolbar/built-in.mdx
similarity index 97%
rename from apps/docs/modules/toolbar.mdx
rename to apps/docs/modules/toolbar/built-in.mdx
index 6c5b1ba477..6a62897f6f 100644
--- a/apps/docs/modules/toolbar.mdx
+++ b/apps/docs/modules/toolbar/built-in.mdx
@@ -1,9 +1,14 @@
 ---
-title: Toolbar
+title: Built-in Toolbar
+sidebarTitle: Built-in
 keywords: "word toolbar, document formatting controls, custom toolbar, editor ui components, formatting buttons"
 ---
 
-The toolbar provides a customizable UI for document editing with support for custom buttons, responsive layouts, and role-based controls.
+SuperDoc ships with a ready-made toolbar. Point it at a container, and you get formatting controls, font pickers, and document actions out of the box.
+
+<Tip>
+  Want full control over the toolbar UI? Use the [headless toolbar](/modules/toolbar/headless) instead — build your own toolbar with any framework and component library.
+</Tip>
 
 ## Quick start
 
@@ -599,7 +604,7 @@ const superdoc = new SuperDoc({
 
 <Card
   title="Custom Toolbar Example"
-  icon="github"
+  icon="external-link"
   href="https://github.com/superdoc-dev/superdoc/tree/main/examples/features/custom-toolbar"
 >
   Runnable example: custom button groups, excluded items, and a custom clear-formatting button
diff --git a/apps/docs/modules/toolbar/examples.mdx b/apps/docs/modules/toolbar/examples.mdx
new file mode 100644
index 0000000000..5b4a1fbfb3
--- /dev/null
+++ b/apps/docs/modules/toolbar/examples.mdx
@@ -0,0 +1,210 @@
+---
+title: Headless Toolbar Examples
+sidebarTitle: Examples
+keywords: "toolbar examples, react toolbar, vue toolbar, svelte toolbar, shadcn toolbar, mui toolbar, custom toolbar examples"
+---
+
+Five examples, five frameworks, five toolbar patterns. Pick the one closest to your stack.
+
+## React + shadcn/ui
+
+Classic top ribbon, like Google Docs. Toggle groups for formatting, select dropdowns for fonts, popovers for colors.
+
+**Stack:** React, Radix primitives + Tailwind CSS, Lucide icons
+
+```tsx
+const toolbar = createHeadlessToolbar({ superdoc, commands: COMMANDS });
+const [snapshot, setSnapshot] = useState(toolbar.getSnapshot());
+
+useEffect(() => {
+  const unsub = toolbar.subscribe(({ snapshot: s }) => setSnapshot(s));
+  return unsub;
+}, []);
+
+// In JSX:
+<ToggleGroup value={activeFormats} onValueChange={() => {}}>
+  <ToggleGroup.Item value="bold" onClick={() => toolbar.execute('bold')}>
+    <Bold />
+  </ToggleGroup.Item>
+  <ToggleGroup.Item value="italic" onClick={() => toolbar.execute('italic')}>
+    <Italic />
+  </ToggleGroup.Item>
+</ToggleGroup>
+```
+
+<Card
+  title="Full source"
+  icon="external-link"
+  href="https://github.com/superdoc-dev/superdoc/tree/main/examples/advanced/headless-toolbar/react-shadcn"
+>
+  React + shadcn/ui example
+</Card>
+
+## React + MUI
+
+Floating bubble bar. Compact Material Design Paper component above the editor with toggle buttons and selects.
+
+**Stack:** React, MUI Material, Material Icons
+
+```tsx
+<Paper elevation={3} sx={{ borderRadius: 3, px: 1, py: 0.5 }}>
+  <ToggleButtonGroup value={activeFormats} onChange={handleFormats}>
+    <ToggleButton value="bold"><FormatBold /></ToggleButton>
+    <ToggleButton value="italic"><FormatItalic /></ToggleButton>
+    <ToggleButton value="underline"><FormatUnderlined /></ToggleButton>
+  </ToggleButtonGroup>
+
+  <Divider orientation="vertical" flexItem sx={{ mx: 0.5 }} />
+
+  <Select
+    value={fontFamily}
+    size="small"
+    onChange={(e) => toolbar.execute('font-family', e.target.value)}
+  >
+    {FONT_FAMILIES.map(f => (
+      <MenuItem key={f.value} value={f.value}>{f.label}</MenuItem>
+    ))}
+  </Select>
+</Paper>
+```
+
+<Card
+  title="Full source"
+  icon="external-link"
+  href="https://github.com/superdoc-dev/superdoc/tree/main/examples/advanced/headless-toolbar/react-mui"
+>
+  React + MUI example
+</Card>
+
+## Vue + Vuetify
+
+Vertical sidebar panel. Navigation drawer with expansion panels grouping related controls.
+
+**Stack:** Vue 3, Vuetify 3, Material Design Icons
+
+```vue
+<v-navigation-drawer permanent width="260">
+  <v-expansion-panels>
+    <v-expansion-panel title="Text">
+      <template #text>
+        <v-btn-toggle v-model="activeFormats" multiple>
+          <v-btn icon="mdi-format-bold" @click="execute('bold')" />
+          <v-btn icon="mdi-format-italic" @click="execute('italic')" />
+          <v-btn icon="mdi-format-underline" @click="execute('underline')" />
+        </v-btn-toggle>
+
+        <v-select
+          label="Font size"
+          :items="fontSizes"
+          @update:model-value="v => execute('font-size', v)"
+        />
+      </template>
+    </v-expansion-panel>
+  </v-expansion-panels>
+</v-navigation-drawer>
+```
+
+<Card
+  title="Full source"
+  icon="external-link"
+  href="https://github.com/superdoc-dev/superdoc/tree/main/examples/advanced/headless-toolbar/vue-vuetify"
+>
+  Vue + Vuetify example
+</Card>
+
+## Svelte + Tailwind
+
+Fixed bottom bar. Compact, mobile-inspired layout with Svelte 5 runes for reactivity.
+
+**Stack:** Svelte 5, Tailwind CSS, Lucide Svelte
+
+```svelte
+<script>
+  let snapshot = $state(toolbar.getSnapshot());
+
+  $effect(() => {
+    return toolbar.subscribe(({ snapshot: s }) => {
+      snapshot = s;
+    });
+  });
+</script>
+
+<div class="fixed bottom-0 inset-x-0 flex items-center gap-1 px-3 h-12 bg-white border-t">
+  <button
+    class:active={snapshot.commands.bold?.active}
+    onclick={() => toolbar.execute('bold')}
+  >
+    <Bold size={16} />
+  </button>
+  <button
+    class:active={snapshot.commands.italic?.active}
+    onclick={() => toolbar.execute('italic')}
+  >
+    <Italic size={16} />
+  </button>
+</div>
+```
+
+<Card
+  title="Full source"
+  icon="external-link"
+  href="https://github.com/superdoc-dev/superdoc/tree/main/examples/advanced/headless-toolbar/svelte-shadcn"
+>
+  Svelte + Tailwind example
+</Card>
+
+## Vanilla JS
+
+Zero-framework proof. Plain buttons, native selects, DOM manipulation. No build step required.
+
+**Stack:** No framework, plain HTML/CSS/JS, Lucide
+
+```ts
+// Sync button states from toolbar snapshot
+toolbar.subscribe(({ snapshot }) => {
+  for (const btn of document.querySelectorAll('[data-cmd]')) {
+    const cmd = snapshot.commands[btn.dataset.cmd];
+    btn.classList.toggle('active', cmd?.active);
+    btn.disabled = cmd?.disabled;
+  }
+});
+
+// Single event listener via delegation
+document.querySelector('#toolbar').addEventListener('click', (e) => {
+  const cmd = e.target.closest('[data-cmd]')?.dataset.cmd;
+  if (cmd) toolbar.execute(cmd);
+});
+```
+
+```html
+<!-- Markup -->
+<div id="toolbar">
+  <button data-cmd="bold"><b>B</b></button>
+  <button data-cmd="italic"><i>I</i></button>
+  <button data-cmd="underline"><u>U</u></button>
+</div>
+```
+
+<Card
+  title="Full source"
+  icon="external-link"
+  href="https://github.com/superdoc-dev/superdoc/tree/main/examples/advanced/headless-toolbar/vanilla"
+>
+  Vanilla JS example
+</Card>
+
+## Running the examples
+
+```bash
+cd examples/advanced/headless-toolbar/<example-name>
+pnpm install
+pnpm dev
+```
+
+Replace `<example-name>` with `react-shadcn`, `react-mui`, `vue-vuetify`, `svelte-shadcn`, or `vanilla`.
+
+## Next steps
+
+<Card title="Headless toolbar API reference" icon="code" href="/modules/toolbar/headless">
+  Full command table, snapshot shape, and helper utilities
+</Card>
diff --git a/apps/docs/modules/toolbar/headless.mdx b/apps/docs/modules/toolbar/headless.mdx
new file mode 100644
index 0000000000..16ca8917db
--- /dev/null
+++ b/apps/docs/modules/toolbar/headless.mdx
@@ -0,0 +1,428 @@
+---
+title: Headless Toolbar
+sidebarTitle: Headless
+keywords: "headless toolbar, custom toolbar, toolbar api, createHeadlessToolbar, toolbar state, toolbar commands"
+---
+
+Build your own toolbar UI. SuperDoc provides the state and commands — you render whatever you want.
+
+## Quick start
+
+```ts
+import { createHeadlessToolbar } from 'superdoc/headless-toolbar';
+
+const superdoc = new SuperDoc({
+  selector: '#editor',
+  document: '/contract.docx',
+});
+
+const toolbar = createHeadlessToolbar({
+  superdoc,
+  commands: ['bold', 'italic', 'underline', 'font-size', 'link', 'undo', 'redo'],
+});
+
+toolbar.subscribe(({ snapshot }) => {
+  renderToolbar(snapshot);
+});
+
+toolbar.execute('bold');
+```
+
+<Tip>
+Don't pass `toolbar` to the SuperDoc constructor. The headless toolbar replaces the built-in UI entirely — no flags needed.
+</Tip>
+
+## Core concepts
+
+### Snapshot
+
+Every time the editor state changes, the toolbar produces a `ToolbarSnapshot`. Read it to know what your UI should look like.
+
+```ts
+snapshot.commands['bold']?.active    // true if bold is on
+snapshot.commands['bold']?.disabled  // true if the command can't run
+snapshot.commands['font-size']?.value // '12pt' — the current value
+```
+
+### Execute
+
+Run a command by ID. Returns `true` if the command executed, `false` otherwise.
+
+```ts
+toolbar.execute('bold');
+toolbar.execute('font-size', '14pt');
+toolbar.execute('text-color', '#ff0000');
+toolbar.execute('zoom', 125);
+```
+
+### Subscribe
+
+`subscribe()` fires immediately with the current snapshot, then again on every change. It returns an unsubscribe function.
+
+```ts
+const unsub = toolbar.subscribe(({ snapshot }) => {
+  updateUI(snapshot);
+});
+
+// Later:
+unsub();
+```
+
+## API reference
+
+### `createHeadlessToolbar(options)`
+
+Creates a headless toolbar controller bound to a SuperDoc instance.
+
+<ParamField path="options.superdoc" type="SuperDoc" required>
+  The SuperDoc instance to bind to.
+</ParamField>
+
+<ParamField path="options.commands" type="PublicToolbarItemId[]">
+  Command IDs to track. When omitted, all available commands are tracked.
+</ParamField>
+
+Returns a `HeadlessToolbarController`.
+
+---
+
+### `HeadlessToolbarController`
+
+#### `getSnapshot()`
+
+Returns the current `ToolbarSnapshot` without subscribing.
+
+<CodeGroup>
+
+```ts Usage
+const snapshot = toolbar.getSnapshot();
+const isBold = snapshot.commands['bold']?.active;
+```
+
+```ts Full Example
+import { createHeadlessToolbar } from 'superdoc/headless-toolbar';
+
+const snapshot = toolbar.getSnapshot();
+const isBold = snapshot.commands['bold']?.active;
+const isDisabled = snapshot.commands['bold']?.disabled;
+const fontSize = snapshot.commands['font-size']?.value;
+```
+
+</CodeGroup>
+
+#### `subscribe(listener)`
+
+Registers a listener that receives `{ snapshot }` on every state change. Fires immediately with the current snapshot. Returns an unsubscribe function.
+
+<CodeGroup>
+
+```ts Usage
+const unsub = toolbar.subscribe(({ snapshot }) => {
+  // update your UI
+});
+```
+
+```ts Full Example
+import { createHeadlessToolbar } from 'superdoc/headless-toolbar';
+
+const unsub = toolbar.subscribe(({ snapshot }) => {
+  const boldActive = snapshot.commands['bold']?.active;
+  const fontSizeValue = snapshot.commands['font-size']?.value;
+});
+unsub();
+```
+
+</CodeGroup>
+
+#### `execute(id, payload?)`
+
+Runs the command identified by `id`. Returns `true` if the command executed, `false` otherwise.
+
+<CodeGroup>
+
+```ts Usage
+toolbar.execute('bold');                    // toggle
+toolbar.execute('font-size', '14pt');       // set value
+toolbar.execute('table-insert', { rows: 3, cols: 4 }); // with object payload
+```
+
+```ts Full Example
+import { createHeadlessToolbar } from 'superdoc/headless-toolbar';
+
+toolbar.execute('bold');
+toolbar.execute('italic');
+toolbar.execute('underline');
+toolbar.execute('strikethrough');
+toolbar.execute('font-size', '14pt');
+toolbar.execute('font-family', 'Arial, sans-serif');
+toolbar.execute('text-color', '#ff0000');
+toolbar.execute('highlight-color', '#ffff00');
+toolbar.execute('text-align', 'center');
+toolbar.execute('line-height', 1.5);
+toolbar.execute('bullet-list');
+toolbar.execute('numbered-list');
+toolbar.execute('indent-increase');
+toolbar.execute('indent-decrease');
+toolbar.execute('undo');
+toolbar.execute('redo');
+toolbar.execute('clear-formatting');
+toolbar.execute('zoom', 125);
+toolbar.execute('document-mode', 'editing');
+```
+
+</CodeGroup>
+
+#### `destroy()`
+
+Tears down event listeners and clears all subscriptions. Call this when unmounting your toolbar.
+
+<CodeGroup>
+
+```ts Usage
+toolbar.destroy();
+```
+
+```ts Full Example
+import { createHeadlessToolbar } from 'superdoc/headless-toolbar';
+
+const snapshot = toolbar.getSnapshot();
+toolbar.execute('bold');
+toolbar.destroy();
+```
+
+</CodeGroup>
+
+---
+
+### `ToolbarSnapshot`
+
+<ParamField path="context" type="ToolbarContext | null">
+  The current editing context. `null` when no editor is active.
+</ParamField>
+
+<ParamField path="commands" type="Partial<Record<PublicToolbarItemId, ToolbarCommandState>>">
+  Map of command IDs to their current state.
+</ParamField>
+
+### `ToolbarCommandState`
+
+<ParamField path="active" type="boolean">
+  Whether the command is currently active (e.g., bold is on at the cursor position).
+</ParamField>
+
+<ParamField path="disabled" type="boolean">
+  Whether the command can run right now. Disabled when the editor isn't editable or the command doesn't apply to the current selection.
+</ParamField>
+
+<ParamField path="value" type="unknown">
+  The current value for commands that have one (font size, text color, zoom, etc.). Not present for toggle commands like bold.
+</ParamField>
+
+### `ToolbarContext`
+
+<ParamField path="target" type="ToolbarTarget">
+  The primary execution surface. Use `target.commands` for direct command access when `execute()` doesn't cover your use case.
+</ParamField>
+
+<ParamField path="surface" type="'body' | 'header' | 'footer'">
+  Which document surface is currently active.
+</ParamField>
+
+<ParamField path="isEditable" type="boolean">
+  Whether the editor is in an editable state.
+</ParamField>
+
+<ParamField path="selectionEmpty" type="boolean">
+  Whether the current selection is collapsed (cursor with no range).
+</ParamField>
+
+## Command reference
+
+<Tip>
+Snapshot values match the format you pass to `execute()`. What you read is what you write — no conversion needed.
+</Tip>
+
+### Text formatting
+
+| Command | Payload | `value` in snapshot |
+|---------|---------|---------------------|
+| `bold` | — | — |
+| `italic` | — | — |
+| `underline` | — | — |
+| `strikethrough` | — | — |
+| `clear-formatting` | — | — |
+| `copy-format` | — | — |
+
+### Font controls
+
+| Command | Payload | `value` in snapshot |
+|---------|---------|---------------------|
+| `font-size` | `'12pt'` | `'12pt'` |
+| `font-family` | `'Arial, sans-serif'` | `'Arial, sans-serif'` |
+| `text-color` | `'#ff0000'` or `'none'` | `'#ff0000'` |
+| `highlight-color` | `'#ffff00'` or `'none'` | `'#ffff00'` |
+
+### Paragraph
+
+| Command | Payload | `value` in snapshot |
+|---------|---------|---------------------|
+| `text-align` | `'left'` \| `'center'` \| `'right'` \| `'justify'` | alignment string |
+| `line-height` | number (e.g. `1.5`) | number |
+| `linked-style` | style object from helpers | style ID string |
+| `bullet-list` | — | — |
+| `numbered-list` | — | — |
+| `indent-increase` | — | — |
+| `indent-decrease` | — | — |
+
+### Insert
+
+| Command | Payload | `value` in snapshot |
+|---------|---------|---------------------|
+| `link` | `{ href: string \| null }` | href string or `null` |
+| `image` | — (opens file picker) | — |
+| `table-insert` | `{ rows: number, cols: number }` | — |
+
+### Table actions
+
+| Command | Payload | `value` in snapshot |
+|---------|---------|---------------------|
+| `table-add-row-before` | — | — |
+| `table-add-row-after` | — | — |
+| `table-delete-row` | — | — |
+| `table-add-column-before` | — | — |
+| `table-add-column-after` | — | — |
+| `table-delete-column` | — | — |
+| `table-delete` | — | — |
+| `table-merge-cells` | — | — |
+| `table-split-cell` | — | — |
+| `table-remove-borders` | — | — |
+| `table-fix` | — | — |
+
+### Document
+
+| Command | Payload | `value` in snapshot |
+|---------|---------|---------------------|
+| `undo` | — | — |
+| `redo` | — | — |
+| `ruler` | — | — |
+| `zoom` | number (e.g. `125`) | number |
+| `document-mode` | `'editing'` \| `'suggesting'` \| `'viewing'` | mode string |
+
+### Track changes
+
+| Command | Payload | `value` in snapshot |
+|---------|---------|---------------------|
+| `track-changes-accept-selection` | — | — |
+| `track-changes-reject-selection` | — | — |
+
+## Constants
+
+`headlessToolbarConstants` provides preset option arrays for dropdown-style controls. Each option has `{ label, value }` — use `value` when calling `execute()`.
+
+<CodeGroup>
+
+```ts Usage
+import { headlessToolbarConstants } from 'superdoc/headless-toolbar';
+
+const { DEFAULT_FONT_SIZE_OPTIONS } = headlessToolbarConstants;
+// [{ label: '8', value: '8pt' }, { label: '9', value: '9pt' }, ...]
+```
+
+```ts Full Example
+import { headlessToolbarConstants } from 'superdoc/headless-toolbar';
+
+const {
+  DEFAULT_FONT_FAMILY_OPTIONS,
+  DEFAULT_FONT_SIZE_OPTIONS,
+  DEFAULT_TEXT_ALIGN_OPTIONS,
+  DEFAULT_LINE_HEIGHT_OPTIONS,
+  DEFAULT_ZOOM_OPTIONS,
+  DEFAULT_DOCUMENT_MODE_OPTIONS,
+  DEFAULT_TEXT_COLOR_OPTIONS,
+  DEFAULT_HIGHLIGHT_COLOR_OPTIONS,
+} = headlessToolbarConstants;
+```
+
+</CodeGroup>
+
+| Constant | Contents |
+|----------|----------|
+| `DEFAULT_FONT_FAMILY_OPTIONS` | Aptos, Georgia, Arial, Courier New, Times New Roman |
+| `DEFAULT_FONT_SIZE_OPTIONS` | 8pt through 96pt (14 sizes) |
+| `DEFAULT_TEXT_ALIGN_OPTIONS` | left, center, right, justify |
+| `DEFAULT_LINE_HEIGHT_OPTIONS` | 1.00, 1.15, 1.50, 2.00, 2.50, 3.00 |
+| `DEFAULT_ZOOM_OPTIONS` | 50% through 200% (7 levels) |
+| `DEFAULT_DOCUMENT_MODE_OPTIONS` | editing, suggesting, viewing (with descriptions) |
+| `DEFAULT_TEXT_COLOR_OPTIONS` | 13 colors including none |
+| `DEFAULT_HIGHLIGHT_COLOR_OPTIONS` | 8 colors including none |
+
+## Helpers
+
+`headlessToolbarHelpers` provides utilities for advanced workflows.
+
+```ts
+import { headlessToolbarHelpers } from 'superdoc/headless-toolbar';
+```
+
+| Helper | What it does |
+|--------|-------------|
+| `getQuickFormatList(editor)` | Returns available paragraph styles (Normal, Heading 1, etc.) for a style dropdown. |
+| `generateLinkedStyleString(style, ...)` | Returns inline CSS for previewing a paragraph style in your UI. |
+| `getFileOpener()` | Returns a function that opens a file picker. Most consumers should use `execute('image')` instead. |
+| `processAndInsertImageFile(...)` | Processes and inserts an image file into the editor. Most consumers should use `execute('image')` instead. |
+
+## React example
+
+A minimal hook that wires the headless toolbar to React state:
+
+```tsx
+import { useEffect, useRef, useState } from 'react';
+import { createHeadlessToolbar } from 'superdoc/headless-toolbar';
+
+function useHeadlessToolbar(superdoc, commands) {
+  const [snapshot, setSnapshot] = useState({ context: null, commands: {} });
+  const controllerRef = useRef(null);
+
+  useEffect(() => {
+    const toolbar = createHeadlessToolbar({ superdoc, commands });
+    controllerRef.current = toolbar;
+    const unsub = toolbar.subscribe(({ snapshot: s }) => setSnapshot(s));
+    return () => { unsub(); toolbar.destroy(); };
+  }, [superdoc]);
+
+  return {
+    snapshot,
+    execute: (id, payload) => controllerRef.current?.execute(id, payload),
+  };
+}
+```
+
+Then in your component:
+
+```tsx
+function Toolbar({ superdoc }) {
+  const { snapshot, execute } = useHeadlessToolbar(superdoc, [
+    'bold', 'italic', 'underline', 'font-size',
+  ]);
+
+  return (
+    <div>
+      <button
+        onClick={() => execute('bold')}
+        data-active={snapshot.commands['bold']?.active}
+        disabled={snapshot.commands['bold']?.disabled}
+      >
+        Bold
+      </button>
+    </div>
+  );
+}
+```
+
+## Examples
+
+<CardGroup cols={2}>
+  <Card title="Framework examples" icon="layout-grid" href="/modules/toolbar/examples">
+    Full examples with React + shadcn, React + MUI, Vue + Vuetify, Svelte, and vanilla JS
+  </Card>
+</CardGroup>
diff --git a/apps/docs/modules/toolbar/overview.mdx b/apps/docs/modules/toolbar/overview.mdx
new file mode 100644
index 0000000000..326ce1ecdc
--- /dev/null
+++ b/apps/docs/modules/toolbar/overview.mdx
@@ -0,0 +1,70 @@
+---
+title: Toolbar
+sidebarTitle: Overview
+keywords: "toolbar, custom toolbar, headless toolbar, formatting controls, editor ui"
+---
+
+The toolbar gives your users formatting controls for document editing. You can use the built-in UI or go headless and build your own.
+
+## Choose your approach
+
+| | Built-in | Headless |
+|---|---|---|
+| Setup | `toolbar: '#toolbar'` — renders a ready-made UI | `createHeadlessToolbar()` — you build the UI |
+| Customization | Swap icons, exclude buttons, reorder groups | Full control — any component library, any layout, any framework |
+| Framework | Renders its own DOM (works everywhere) | React, Vue, Svelte, vanilla JS — your choice |
+| Best for | Standard document editing, quick prototypes | Design system integration, embedded editors, custom UX |
+
+## Quick start
+
+<Tabs>
+  <Tab title="Built-in">
+    Point `toolbar` at a container element. SuperDoc renders the UI for you.
+
+    ```javascript
+    new SuperDoc({
+      selector: '#editor',
+      document: 'contract.docx',
+      toolbar: '#toolbar',
+    });
+    ```
+  </Tab>
+
+  <Tab title="Headless">
+    Create a headless toolbar. You get state snapshots and an `execute` method — wire them to any UI you want.
+
+    ```javascript
+    import { createHeadlessToolbar } from 'superdoc/headless-toolbar';
+
+    const superdoc = new SuperDoc({
+      selector: '#editor',
+      document: 'contract.docx',
+    });
+
+    const toolbar = createHeadlessToolbar({
+      superdoc,
+      commands: ['bold', 'italic', 'underline', 'font-size', 'undo', 'redo'],
+    });
+
+    toolbar.subscribe(({ snapshot }) => {
+      // Update your UI with snapshot.commands
+    });
+
+    toolbar.execute('bold');
+    ```
+  </Tab>
+</Tabs>
+
+## Learn more
+
+<CardGroup cols={2}>
+  <Card title="Built-in toolbar" icon="panel-top" href="/modules/toolbar/built-in">
+    Configuration, custom buttons, responsive behavior
+  </Card>
+  <Card title="Headless toolbar" icon="code" href="/modules/toolbar/headless">
+    API reference, command table, helpers
+  </Card>
+  <Card title="Framework examples" icon="layout-grid" href="/modules/toolbar/examples">
+    React + shadcn, React + MUI, Vue + Vuetify, Svelte, vanilla JS
+  </Card>
+</CardGroup>
diff --git a/apps/docs/scripts/validate-code-imports.ts b/apps/docs/scripts/validate-code-imports.ts
index 861862f829..f735324fbb 100644
--- a/apps/docs/scripts/validate-code-imports.ts
+++ b/apps/docs/scripts/validate-code-imports.ts
@@ -21,6 +21,9 @@ const EXACT_SUPERDOC_IMPORTS = new Set([
   'superdoc/converter',
   'superdoc/docx-zipper',
   'superdoc/file-zipper',
+  'superdoc/headless-toolbar',
+  'superdoc/headless-toolbar/react',
+  'superdoc/headless-toolbar/vue',
   'superdoc/style.css',
   '@superdoc-dev/ai',
   '@superdoc-dev/esign',
diff --git a/examples/advanced/headless-toolbar/package.json b/examples/advanced/headless-toolbar/package.json
deleted file mode 100644
index add9d794bf..0000000000
--- a/examples/advanced/headless-toolbar/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "name": "superdoc-headless-toolbar-example",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "vite"
-  },
-  "dependencies": {
-    "superdoc": "../../../packages/superdoc",
-    "vue": "^3.5.0"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^5.2.0",
-    "typescript": "^5.7.0",
-    "vite": "^6.2.0"
-  }
-}
diff --git a/examples/advanced/headless-toolbar/react-mui/index.html b/examples/advanced/headless-toolbar/react-mui/index.html
new file mode 100644
index 0000000000..88a7270b99
--- /dev/null
+++ b/examples/advanced/headless-toolbar/react-mui/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SuperDoc - Headless Toolbar (React + MUI)</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/advanced/headless-toolbar/react-mui/package.json b/examples/advanced/headless-toolbar/react-mui/package.json
new file mode 100644
index 0000000000..4fd434e241
--- /dev/null
+++ b/examples/advanced/headless-toolbar/react-mui/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "headless-toolbar-react-mui",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^7.3.0",
+    "@mui/material": "^7.3.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "superdoc": "../../../../packages/superdoc"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "typescript": "^5.7.0",
+    "vite": "^6.2.0"
+  }
+}
diff --git a/examples/advanced/headless-toolbar/public/test_file.docx b/examples/advanced/headless-toolbar/react-mui/public/test_file.docx
similarity index 100%
rename from examples/advanced/headless-toolbar/public/test_file.docx
rename to examples/advanced/headless-toolbar/react-mui/public/test_file.docx
diff --git a/examples/advanced/headless-toolbar/react-mui/src/App.tsx b/examples/advanced/headless-toolbar/react-mui/src/App.tsx
new file mode 100644
index 0000000000..6a2d05def5
--- /dev/null
+++ b/examples/advanced/headless-toolbar/react-mui/src/App.tsx
@@ -0,0 +1,349 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { SuperDoc } from 'superdoc';
+import {
+  createHeadlessToolbar,
+  headlessToolbarConstants,
+  type HeadlessToolbarController,
+  type ToolbarSnapshot,
+} from 'superdoc/headless-toolbar';
+import 'superdoc/style.css';
+
+import {
+  Box,
+  Divider,
+  IconButton,
+  MenuItem,
+  Paper,
+  Popover,
+  Select,
+  TextField,
+  ToggleButton,
+  ToggleButtonGroup,
+  Tooltip,
+} from '@mui/material';
+import type { SelectChangeEvent } from '@mui/material';
+
+import FormatBold from '@mui/icons-material/FormatBold';
+import FormatItalic from '@mui/icons-material/FormatItalic';
+import FormatUnderlined from '@mui/icons-material/FormatUnderlined';
+import StrikethroughS from '@mui/icons-material/StrikethroughS';
+import FormatAlignLeft from '@mui/icons-material/FormatAlignLeft';
+import FormatAlignCenter from '@mui/icons-material/FormatAlignCenter';
+import FormatAlignRight from '@mui/icons-material/FormatAlignRight';
+import FormatAlignJustify from '@mui/icons-material/FormatAlignJustify';
+import FormatListBulleted from '@mui/icons-material/FormatListBulleted';
+import FormatListNumbered from '@mui/icons-material/FormatListNumbered';
+import FormatColorText from '@mui/icons-material/FormatColorText';
+import Undo from '@mui/icons-material/Undo';
+import Redo from '@mui/icons-material/Redo';
+import InsertPhoto from '@mui/icons-material/InsertPhoto';
+import LinkIcon from '@mui/icons-material/Link';
+import Check from '@mui/icons-material/Check';
+
+const COMMANDS = [
+  'bold', 'italic', 'underline', 'strikethrough',
+  'font-family', 'font-size', 'text-color', 'text-align',
+  'bullet-list', 'numbered-list', 'link', 'image',
+  'undo', 'redo',
+] as const;
+
+const FONT_FAMILIES = headlessToolbarConstants.DEFAULT_FONT_FAMILY_OPTIONS;
+const FONT_SIZES = headlessToolbarConstants.DEFAULT_FONT_SIZE_OPTIONS;
+
+const ALIGN_ICONS: Record<string, React.ReactNode> = {
+  left: <FormatAlignLeft fontSize="small" />,
+  center: <FormatAlignCenter fontSize="small" />,
+  right: <FormatAlignRight fontSize="small" />,
+  justify: <FormatAlignJustify fontSize="small" />,
+};
+
+const { DEFAULT_TEXT_COLOR_OPTIONS } = headlessToolbarConstants;
+
+// ---------------------------------------------------------------------------
+// App
+// ---------------------------------------------------------------------------
+
+export default function App() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const toolbarRef = useRef<HeadlessToolbarController | null>(null);
+
+  const [snapshot, setSnapshot] = useState<ToolbarSnapshot | null>(null);
+
+  // Link popover state
+  const [linkAnchor, setLinkAnchor] = useState<HTMLElement | null>(null);
+  const [linkHref, setLinkHref] = useState('');
+
+  // Color popover state
+  const [colorAnchor, setColorAnchor] = useState<HTMLElement | null>(null);
+
+  // --- Bootstrap SuperDoc + headless toolbar ---
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    const superdoc = new SuperDoc({
+      selector: containerRef.current,
+      document: '/test_file.docx',
+    });
+    const toolbar = createHeadlessToolbar({
+      superdoc: superdoc as any,
+      commands: [...COMMANDS],
+    });
+    toolbarRef.current = toolbar;
+
+    const unsubscribe = toolbar.subscribe(({ snapshot: s }) => setSnapshot(s));
+
+    return () => {
+      unsubscribe();
+      toolbar.destroy();
+      superdoc.destroy();
+    };
+  }, []);
+
+  // --- Helpers ---
+  const cmd = useCallback(
+    (id: string) => snapshot?.commands[id as keyof typeof snapshot.commands],
+    [snapshot],
+  );
+
+  const exec = useCallback(
+    (id: string, payload?: unknown) => {
+      toolbarRef.current?.execute(id as any, payload);
+    },
+    [],
+  );
+
+  // --- Formatting toggles ---
+  const activeFormats = (['bold', 'italic', 'underline', 'strikethrough'] as const).filter(
+    (id) => cmd(id)?.active,
+  );
+
+  const handleFormats = (_: React.MouseEvent, newFormats: string[]) => {
+    const prev = new Set(activeFormats);
+    const next = new Set(newFormats);
+    for (const id of ['bold', 'italic', 'underline', 'strikethrough']) {
+      if (prev.has(id) !== next.has(id)) exec(id);
+    }
+  };
+
+  // --- Text alignment ---
+  const currentAlign = (cmd('text-align')?.value as string) || 'left';
+
+  const handleAlign = (_: React.MouseEvent, value: string | null) => {
+    if (value) exec('text-align', value);
+  };
+
+  // --- Link ---
+  const openLinkPopover = (e: React.MouseEvent<HTMLElement>) => {
+    const href = (cmd('link')?.value as string) || '';
+    setLinkHref(href);
+    setLinkAnchor(e.currentTarget);
+  };
+
+  const applyLink = () => {
+    exec('link', { href: linkHref || null });
+    setLinkAnchor(null);
+  };
+
+  // --- Render ---
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100vh', bgcolor: '#f0f0f0' }}>
+      {/* Floating toolbar */}
+      <Box sx={{ display: 'flex', justifyContent: 'center', pt: 1.5, pb: 0.5, px: 2 }}>
+        <Paper
+          elevation={3}
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 0.5,
+            px: 1,
+            py: 0.5,
+            borderRadius: 3,
+          }}
+        >
+          {/* Undo / Redo */}
+          <Tooltip title="Undo">
+            <span>
+              <IconButton size="small" disabled={cmd('undo')?.disabled} onClick={() => exec('undo')}>
+                <Undo fontSize="small" />
+              </IconButton>
+            </span>
+          </Tooltip>
+          <Tooltip title="Redo">
+            <span>
+              <IconButton size="small" disabled={cmd('redo')?.disabled} onClick={() => exec('redo')}>
+                <Redo fontSize="small" />
+              </IconButton>
+            </span>
+          </Tooltip>
+
+          <Divider orientation="vertical" flexItem />
+
+          {/* Font family */}
+          <Select
+            size="small"
+            variant="standard"
+            disableUnderline
+            value={(cmd('font-family')?.value as string) || ''}
+            onChange={(e: SelectChangeEvent) => exec('font-family', e.target.value)}
+            sx={{ minWidth: 100, fontSize: 13, ml: 0.5 }}
+            renderValue={(v) => FONT_FAMILIES.find((f) => f.value === v)?.label ?? v.split(',')[0]?.trim() ?? v}
+          >
+            {FONT_FAMILIES.map((f) => (
+              <MenuItem key={f.value} value={f.value} sx={{ fontFamily: f.value, fontSize: 13 }}>
+                {f.label}
+              </MenuItem>
+            ))}
+          </Select>
+
+          {/* Font size */}
+          <Select
+            size="small"
+            variant="standard"
+            disableUnderline
+            value={(cmd('font-size')?.value as string) || '11pt'}
+            onChange={(e: SelectChangeEvent) => exec('font-size', e.target.value)}
+            sx={{ minWidth: 48, fontSize: 13 }}
+          >
+            {FONT_SIZES.map((s) => (
+              <MenuItem key={s.value} value={s.value} sx={{ fontSize: 13 }}>
+                {s.label}
+              </MenuItem>
+            ))}
+          </Select>
+
+          <Divider orientation="vertical" flexItem />
+
+          {/* Bold / Italic / Underline / Strikethrough */}
+          <ToggleButtonGroup size="small" value={activeFormats} onChange={handleFormats}>
+            <ToggleButton value="bold" aria-label="Bold">
+              <Tooltip title="Bold"><FormatBold fontSize="small" /></Tooltip>
+            </ToggleButton>
+            <ToggleButton value="italic" aria-label="Italic">
+              <Tooltip title="Italic"><FormatItalic fontSize="small" /></Tooltip>
+            </ToggleButton>
+            <ToggleButton value="underline" aria-label="Underline">
+              <Tooltip title="Underline"><FormatUnderlined fontSize="small" /></Tooltip>
+            </ToggleButton>
+            <ToggleButton value="strikethrough" aria-label="Strikethrough">
+              <Tooltip title="Strikethrough"><StrikethroughS fontSize="small" /></Tooltip>
+            </ToggleButton>
+          </ToggleButtonGroup>
+
+          <Divider orientation="vertical" flexItem />
+
+          {/* Text color */}
+          <Tooltip title="Text color">
+            <IconButton size="small" onClick={(e) => setColorAnchor(e.currentTarget)}>
+              <FormatColorText
+                fontSize="small"
+                sx={{ color: (cmd('text-color')?.value as string) || '#000' }}
+              />
+            </IconButton>
+          </Tooltip>
+          <Popover
+            open={Boolean(colorAnchor)}
+            anchorEl={colorAnchor}
+            onClose={() => setColorAnchor(null)}
+            anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+          >
+            <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0.5, p: 1 }}>
+              {DEFAULT_TEXT_COLOR_OPTIONS.map((c) => (
+                <IconButton
+                  key={c.value}
+                  size="small"
+                  onClick={() => { exec('text-color', c.value); setColorAnchor(null); }}
+                  sx={{
+                    width: 28, height: 28, borderRadius: 1,
+                    bgcolor: c.value, '&:hover': { opacity: 0.8, bgcolor: c.value },
+                  }}
+                />
+              ))}
+            </Box>
+          </Popover>
+
+          <Divider orientation="vertical" flexItem />
+
+          {/* Alignment */}
+          <ToggleButtonGroup size="small" exclusive value={currentAlign} onChange={handleAlign}>
+            {headlessToolbarConstants.DEFAULT_TEXT_ALIGN_OPTIONS.map((opt) => (
+              <ToggleButton key={opt.value} value={opt.value} aria-label={opt.label}>
+                <Tooltip title={opt.label}>{ALIGN_ICONS[opt.value]}</Tooltip>
+              </ToggleButton>
+            ))}
+          </ToggleButtonGroup>
+
+          <Divider orientation="vertical" flexItem />
+
+          {/* Lists */}
+          <Tooltip title="Bullet list">
+            <ToggleButton
+              size="small"
+              value="bullet-list"
+              selected={cmd('bullet-list')?.active}
+              onChange={() => exec('bullet-list')}
+            >
+              <FormatListBulleted fontSize="small" />
+            </ToggleButton>
+          </Tooltip>
+          <Tooltip title="Numbered list">
+            <ToggleButton
+              size="small"
+              value="numbered-list"
+              selected={cmd('numbered-list')?.active}
+              onChange={() => exec('numbered-list')}
+            >
+              <FormatListNumbered fontSize="small" />
+            </ToggleButton>
+          </Tooltip>
+
+          <Divider orientation="vertical" flexItem />
+
+          {/* Link */}
+          <Tooltip title="Insert link">
+            <ToggleButton
+              size="small"
+              value="link"
+              selected={cmd('link')?.active}
+              onChange={openLinkPopover}
+            >
+              <LinkIcon fontSize="small" />
+            </ToggleButton>
+          </Tooltip>
+          <Popover
+            open={Boolean(linkAnchor)}
+            anchorEl={linkAnchor}
+            onClose={() => setLinkAnchor(null)}
+            anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+          >
+            <Box sx={{ display: 'flex', alignItems: 'center', p: 1, gap: 0.5 }}>
+              <TextField
+                size="small"
+                variant="outlined"
+                placeholder="https://..."
+                value={linkHref}
+                onChange={(e) => setLinkHref(e.target.value)}
+                onKeyDown={(e) => { if (e.key === 'Enter') applyLink(); }}
+                sx={{ width: 240 }}
+              />
+              <IconButton size="small" color="primary" onClick={applyLink}>
+                <Check fontSize="small" />
+              </IconButton>
+            </Box>
+          </Popover>
+
+          {/* Image */}
+          <Tooltip title="Insert image">
+            <span>
+              <IconButton size="small" disabled={cmd('image')?.disabled} onClick={() => exec('image')}>
+                <InsertPhoto fontSize="small" />
+              </IconButton>
+            </span>
+          </Tooltip>
+        </Paper>
+      </Box>
+
+      {/* Editor container */}
+      <Box ref={containerRef} sx={{ flex: 1, overflow: 'auto' }} />
+    </Box>
+  );
+}
diff --git a/examples/advanced/headless-toolbar/react-mui/src/main.tsx b/examples/advanced/headless-toolbar/react-mui/src/main.tsx
new file mode 100644
index 0000000000..c02916cb2e
--- /dev/null
+++ b/examples/advanced/headless-toolbar/react-mui/src/main.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { ThemeProvider, CssBaseline } from '@mui/material';
+import { theme } from './theme';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <App />
+    </ThemeProvider>
+  </React.StrictMode>,
+);
diff --git a/examples/advanced/headless-toolbar/react-mui/src/theme.ts b/examples/advanced/headless-toolbar/react-mui/src/theme.ts
new file mode 100644
index 0000000000..7f2bcff753
--- /dev/null
+++ b/examples/advanced/headless-toolbar/react-mui/src/theme.ts
@@ -0,0 +1,47 @@
+import { createTheme } from '@mui/material/styles';
+
+export const theme = createTheme({
+  typography: {
+    fontFamily: '"Inter", "Roboto", "Helvetica", "Arial", sans-serif',
+    fontSize: 13,
+  },
+  components: {
+    MuiToggleButton: {
+      styleOverrides: {
+        root: {
+          textTransform: 'none',
+          padding: '4px 8px',
+          border: 'none',
+          borderRadius: '6px !important',
+          '&.Mui-selected': {
+            backgroundColor: 'rgba(25, 118, 210, 0.12)',
+          },
+        },
+        sizeSmall: {
+          padding: '3px 6px',
+        },
+      },
+    },
+    MuiIconButton: {
+      styleOverrides: {
+        sizeSmall: {
+          padding: 4,
+        },
+      },
+    },
+    MuiSelect: {
+      styleOverrides: {
+        root: {
+          fontSize: 13,
+        },
+      },
+    },
+    MuiDivider: {
+      styleOverrides: {
+        root: {
+          margin: '0 4px',
+        },
+      },
+    },
+  },
+});
diff --git a/examples/advanced/headless-toolbar/react-mui/tsconfig.json b/examples/advanced/headless-toolbar/react-mui/tsconfig.json
new file mode 100644
index 0000000000..109f0ac280
--- /dev/null
+++ b/examples/advanced/headless-toolbar/react-mui/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/examples/advanced/headless-toolbar/react-mui/vite.config.ts b/examples/advanced/headless-toolbar/react-mui/vite.config.ts
new file mode 100644
index 0000000000..0466183af6
--- /dev/null
+++ b/examples/advanced/headless-toolbar/react-mui/vite.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+});
diff --git a/examples/advanced/headless-toolbar/react-shadcn/index.html b/examples/advanced/headless-toolbar/react-shadcn/index.html
new file mode 100644
index 0000000000..79cb1dea8b
--- /dev/null
+++ b/examples/advanced/headless-toolbar/react-shadcn/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SuperDoc - Headless Toolbar (React + shadcn/ui)</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/advanced/headless-toolbar/react-shadcn/package.json b/examples/advanced/headless-toolbar/react-shadcn/package.json
new file mode 100644
index 0000000000..3aa1e90ce9
--- /dev/null
+++ b/examples/advanced/headless-toolbar/react-shadcn/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "superdoc-headless-toolbar-react-shadcn",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "superdoc": "../../../../packages/superdoc",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "@radix-ui/react-toggle-group": "^1.1.3",
+    "@radix-ui/react-select": "^2.1.7",
+    "@radix-ui/react-popover": "^1.1.7",
+    "@radix-ui/react-separator": "^1.1.3",
+    "@radix-ui/react-tooltip": "^1.2.3",
+    "lucide-react": "^0.511.0",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.3.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "tailwindcss": "^4.1.0",
+    "@tailwindcss/vite": "^4.1.0",
+    "typescript": "~5.5.0",
+    "vite": "^6.3.0"
+  }
+}
diff --git a/examples/advanced/headless-toolbar/react-shadcn/public/test_file.docx b/examples/advanced/headless-toolbar/react-shadcn/public/test_file.docx
new file mode 100644
index 0000000000..b1b8c8f5a7
Binary files /dev/null and b/examples/advanced/headless-toolbar/react-shadcn/public/test_file.docx differ
diff --git a/examples/advanced/headless-toolbar/react-shadcn/src/App.tsx b/examples/advanced/headless-toolbar/react-shadcn/src/App.tsx
new file mode 100644
index 0000000000..82a00e79a3
--- /dev/null
+++ b/examples/advanced/headless-toolbar/react-shadcn/src/App.tsx
@@ -0,0 +1,715 @@
+import { useEffect, useRef, useState } from 'react';
+import { SuperDoc } from 'superdoc';
+import {
+  headlessToolbarConstants,
+  type PublicToolbarItemId,
+  type ToolbarSnapshot,
+  type ToolbarExecuteFn,
+} from 'superdoc/headless-toolbar';
+import { useHeadlessToolbar } from 'superdoc/headless-toolbar/react';
+import 'superdoc/style.css';
+
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import {
+  Bold,
+  Italic,
+  Underline,
+  Strikethrough,
+  AlignLeft,
+  AlignCenter,
+  AlignRight,
+  AlignJustify,
+  List,
+  ListOrdered,
+  Undo2,
+  Redo2,
+  ZoomIn,
+  Image,
+  Paintbrush,
+  Type,
+  Link,
+  ChevronDown,
+  Check,
+} from 'lucide-react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+// ---------------------------------------------------------------------------
+// Utility
+// ---------------------------------------------------------------------------
+
+function cn(...inputs: Parameters<typeof clsx>) {
+  return twMerge(clsx(inputs));
+}
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const {
+  DEFAULT_FONT_FAMILY_OPTIONS,
+  DEFAULT_FONT_SIZE_OPTIONS,
+  DEFAULT_ZOOM_OPTIONS,
+  DEFAULT_TEXT_COLOR_OPTIONS,
+  DEFAULT_HIGHLIGHT_COLOR_OPTIONS,
+} = headlessToolbarConstants;
+
+const COMMANDS: PublicToolbarItemId[] = [
+  'bold', 'italic', 'underline', 'strikethrough',
+  'font-family', 'font-size',
+  'text-color', 'highlight-color',
+  'text-align',
+  'bullet-list', 'numbered-list',
+  'link',
+  'undo', 'redo',
+  'zoom',
+  'image',
+];
+
+const ALIGN_ICONS = {
+  left: AlignLeft,
+  center: AlignCenter,
+  right: AlignRight,
+  justify: AlignJustify,
+} as const;
+
+// ---------------------------------------------------------------------------
+// Shared Radix-based UI primitives (shadcn/ui-style)
+// ---------------------------------------------------------------------------
+
+function Tooltip({ children, content }: { children: React.ReactNode; content: string }) {
+  return (
+    <TooltipPrimitive.Root delayDuration={300}>
+      <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+      <TooltipPrimitive.Portal>
+        <TooltipPrimitive.Content
+          side="bottom"
+          sideOffset={6}
+          className="z-50 rounded-md bg-zinc-900 px-2 py-1 text-xs text-white shadow-md animate-in fade-in-0 zoom-in-95"
+        >
+          {content}
+        </TooltipPrimitive.Content>
+      </TooltipPrimitive.Portal>
+    </TooltipPrimitive.Root>
+  );
+}
+
+function Separator() {
+  return (
+    <SeparatorPrimitive.Root
+      orientation="vertical"
+      className="mx-1 h-6 w-px bg-zinc-200"
+    />
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Toolbar components
+// ---------------------------------------------------------------------------
+
+function FormatToggles({
+  snapshot,
+  onExecute,
+}: {
+  snapshot: ToolbarSnapshot;
+  onExecute: ToolbarExecuteFn;
+}) {
+  const items: { id: PublicToolbarItemId; icon: typeof Bold; label: string }[] = [
+    { id: 'bold', icon: Bold, label: 'Bold' },
+    { id: 'italic', icon: Italic, label: 'Italic' },
+    { id: 'underline', icon: Underline, label: 'Underline' },
+    { id: 'strikethrough', icon: Strikethrough, label: 'Strikethrough' },
+  ];
+
+  const activeIds = items.filter(({ id }) => snapshot.commands[id]?.active).map(({ id }) => id);
+
+  return (
+    <ToggleGroupPrimitive.Root
+      type="multiple"
+      value={activeIds}
+      onValueChange={() => {/* controlled by snapshot */}}
+      className="flex items-center gap-0.5"
+    >
+      {items.map(({ id, icon: Icon, label }) => {
+        const state = snapshot.commands[id];
+        return (
+          <Tooltip key={id} content={label}>
+            <ToggleGroupPrimitive.Item
+              value={id}
+              disabled={state?.disabled}
+              onMouseDown={(e) => e.preventDefault()}
+              onClick={() => onExecute(id)}
+              className={cn(
+                'inline-flex h-8 w-8 items-center justify-center rounded-md text-sm transition-colors',
+                'hover:bg-zinc-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-400',
+                'disabled:pointer-events-none disabled:opacity-50',
+                state?.active && 'bg-zinc-200 text-zinc-900',
+              )}
+            >
+              <Icon className="h-4 w-4" />
+            </ToggleGroupPrimitive.Item>
+          </Tooltip>
+        );
+      })}
+    </ToggleGroupPrimitive.Root>
+  );
+}
+
+function FontFamilySelect({
+  snapshot,
+  onExecute,
+}: {
+  snapshot: ToolbarSnapshot;
+  onExecute: ToolbarExecuteFn;
+}) {
+  const current = (snapshot.commands['font-family']?.value as string) ?? '';
+  const currentLabel =
+    DEFAULT_FONT_FAMILY_OPTIONS.find((o) => o.value === current)?.label ?? current.split(',')[0] ?? 'Font';
+
+  return (
+    <Tooltip content="Font family">
+      <SelectPrimitive.Root
+        value={current}
+        onValueChange={(val) => onExecute('font-family', val)}
+      >
+        <SelectPrimitive.Trigger
+          className={cn(
+            'inline-flex h-8 min-w-[7rem] items-center justify-between gap-1 rounded-md border border-zinc-200 bg-white px-2 text-sm',
+            'hover:bg-zinc-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-400',
+            'disabled:pointer-events-none disabled:opacity-50',
+          )}
+          disabled={snapshot.commands['font-family']?.disabled}
+        >
+          <span className="truncate">{currentLabel}</span>
+          <SelectPrimitive.Icon>
+            <ChevronDown className="h-3.5 w-3.5 text-zinc-500" />
+          </SelectPrimitive.Icon>
+        </SelectPrimitive.Trigger>
+
+        <SelectPrimitive.Portal>
+          <SelectPrimitive.Content
+            position="popper"
+            sideOffset={4}
+            className="z-50 max-h-60 overflow-auto rounded-md border border-zinc-200 bg-white shadow-lg"
+          >
+            <SelectPrimitive.Viewport className="p-1">
+              {DEFAULT_FONT_FAMILY_OPTIONS.map((opt) => (
+                <SelectPrimitive.Item
+                  key={opt.value}
+                  value={opt.value}
+                  className={cn(
+                    'relative flex h-8 cursor-pointer items-center rounded-sm px-2 pr-8 text-sm outline-none',
+                    'data-[highlighted]:bg-zinc-100',
+                  )}
+                  style={{ fontFamily: opt.value }}
+                >
+                  <SelectPrimitive.ItemText>{opt.label}</SelectPrimitive.ItemText>
+                  <SelectPrimitive.ItemIndicator className="absolute right-2">
+                    <Check className="h-3.5 w-3.5" />
+                  </SelectPrimitive.ItemIndicator>
+                </SelectPrimitive.Item>
+              ))}
+            </SelectPrimitive.Viewport>
+          </SelectPrimitive.Content>
+        </SelectPrimitive.Portal>
+      </SelectPrimitive.Root>
+    </Tooltip>
+  );
+}
+
+function FontSizeSelect({
+  snapshot,
+  onExecute,
+}: {
+  snapshot: ToolbarSnapshot;
+  onExecute: ToolbarExecuteFn;
+}) {
+  const current = (snapshot.commands['font-size']?.value as string) ?? '';
+  const currentLabel = DEFAULT_FONT_SIZE_OPTIONS.find((o) => o.value === current)?.label ?? current.replace('pt', '');
+
+  return (
+    <Tooltip content="Font size">
+      <SelectPrimitive.Root
+        value={current}
+        onValueChange={(val) => onExecute('font-size', val)}
+      >
+        <SelectPrimitive.Trigger
+          className={cn(
+            'inline-flex h-8 w-[4.5rem] items-center justify-between gap-1 rounded-md border border-zinc-200 bg-white px-2 text-sm',
+            'hover:bg-zinc-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-400',
+            'disabled:pointer-events-none disabled:opacity-50',
+          )}
+          disabled={snapshot.commands['font-size']?.disabled}
+        >
+          <span className="truncate">{currentLabel || 'Size'}</span>
+          <SelectPrimitive.Icon>
+            <ChevronDown className="h-3.5 w-3.5 text-zinc-500" />
+          </SelectPrimitive.Icon>
+        </SelectPrimitive.Trigger>
+
+        <SelectPrimitive.Portal>
+          <SelectPrimitive.Content
+            position="popper"
+            sideOffset={4}
+            className="z-50 max-h-60 overflow-auto rounded-md border border-zinc-200 bg-white shadow-lg"
+          >
+            <SelectPrimitive.Viewport className="p-1">
+              {DEFAULT_FONT_SIZE_OPTIONS.map((opt) => (
+                <SelectPrimitive.Item
+                  key={opt.value}
+                  value={opt.value}
+                  className={cn(
+                    'relative flex h-8 cursor-pointer items-center rounded-sm px-2 pr-8 text-sm outline-none',
+                    'data-[highlighted]:bg-zinc-100',
+                  )}
+                >
+                  <SelectPrimitive.ItemText>{opt.label}</SelectPrimitive.ItemText>
+                  <SelectPrimitive.ItemIndicator className="absolute right-2">
+                    <Check className="h-3.5 w-3.5" />
+                  </SelectPrimitive.ItemIndicator>
+                </SelectPrimitive.Item>
+              ))}
+            </SelectPrimitive.Viewport>
+          </SelectPrimitive.Content>
+        </SelectPrimitive.Portal>
+      </SelectPrimitive.Root>
+    </Tooltip>
+  );
+}
+
+function ColorPickerPopover({
+  commandId,
+  icon: Icon,
+  label,
+  options,
+  snapshot,
+  onExecute,
+}: {
+  commandId: PublicToolbarItemId;
+  icon: typeof Type;
+  label: string;
+  options: readonly { readonly label: string; readonly value: string }[];
+  snapshot: ToolbarSnapshot;
+  onExecute: ToolbarExecuteFn;
+}) {
+  const currentColor = (snapshot.commands[commandId]?.value as string) ?? '#000000';
+
+  return (
+    <PopoverPrimitive.Root>
+      <Tooltip content={label}>
+        <PopoverPrimitive.Trigger
+          className={cn(
+            'inline-flex h-8 w-8 flex-col items-center justify-center rounded-md text-sm transition-colors',
+            'hover:bg-zinc-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-400',
+            'disabled:pointer-events-none disabled:opacity-50',
+          )}
+          disabled={snapshot.commands[commandId]?.disabled}
+        >
+          <Icon className="h-4 w-4" />
+          <span
+            className="mt-0.5 h-0.5 w-4 rounded-full"
+            style={{ backgroundColor: currentColor === 'none' ? 'transparent' : currentColor }}
+          />
+        </PopoverPrimitive.Trigger>
+      </Tooltip>
+      <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Content
+          side="bottom"
+          sideOffset={6}
+          className="z-50 w-48 rounded-lg border border-zinc-200 bg-white p-3 shadow-lg"
+        >
+          <div className="flex flex-wrap gap-1">
+            {options.map((opt) => (
+              <button
+                key={opt.value}
+                title={opt.label}
+                className={cn(
+                  'h-5 w-5 rounded-sm border border-zinc-300 transition-transform hover:scale-125 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-400',
+                  currentColor === opt.value && 'ring-2 ring-zinc-600 ring-offset-1',
+                )}
+                style={{ backgroundColor: opt.value === 'none' ? 'transparent' : opt.value }}
+                onClick={() => onExecute(commandId, opt.value)}
+              />
+            ))}
+          </div>
+          <button
+            className="mt-2 w-full rounded-md border border-zinc-200 px-2 py-1 text-xs text-zinc-600 hover:bg-zinc-50"
+            onClick={() => onExecute(commandId, 'none')}
+          >
+            Remove color
+          </button>
+        </PopoverPrimitive.Content>
+      </PopoverPrimitive.Portal>
+    </PopoverPrimitive.Root>
+  );
+}
+
+function AlignSelect({
+  snapshot,
+  onExecute,
+}: {
+  snapshot: ToolbarSnapshot;
+  onExecute: ToolbarExecuteFn;
+}) {
+  const current = ((snapshot.commands['text-align']?.value as string) ?? 'left') as keyof typeof ALIGN_ICONS;
+  const ActiveIcon = ALIGN_ICONS[current] ?? AlignLeft;
+
+  return (
+    <Tooltip content="Text alignment">
+      <SelectPrimitive.Root
+        value={current}
+        onValueChange={(val) => onExecute('text-align', val)}
+      >
+        <SelectPrimitive.Trigger
+          className={cn(
+            'inline-flex h-8 w-14 items-center justify-between gap-0.5 rounded-md border border-zinc-200 bg-white px-1.5 text-sm',
+            'hover:bg-zinc-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-400',
+            'disabled:pointer-events-none disabled:opacity-50',
+          )}
+          disabled={snapshot.commands['text-align']?.disabled}
+        >
+          <ActiveIcon className="h-4 w-4" />
+          <SelectPrimitive.Icon>
+            <ChevronDown className="h-3.5 w-3.5 text-zinc-500" />
+          </SelectPrimitive.Icon>
+        </SelectPrimitive.Trigger>
+
+        <SelectPrimitive.Portal>
+          <SelectPrimitive.Content
+            position="popper"
+            sideOffset={4}
+            className="z-50 rounded-md border border-zinc-200 bg-white shadow-lg"
+          >
+            <SelectPrimitive.Viewport className="p-1">
+              {Object.entries(ALIGN_ICONS).map(([value, Icon]) => (
+                <SelectPrimitive.Item
+                  key={value}
+                  value={value}
+                  className={cn(
+                    'relative flex h-8 cursor-pointer items-center gap-2 rounded-sm px-2 pr-8 text-sm outline-none',
+                    'data-[highlighted]:bg-zinc-100',
+                  )}
+                >
+                  <Icon className="h-4 w-4" />
+                  <SelectPrimitive.ItemText>
+                    {value.charAt(0).toUpperCase() + value.slice(1)}
+                  </SelectPrimitive.ItemText>
+                  <SelectPrimitive.ItemIndicator className="absolute right-2">
+                    <Check className="h-3.5 w-3.5" />
+                  </SelectPrimitive.ItemIndicator>
+                </SelectPrimitive.Item>
+              ))}
+            </SelectPrimitive.Viewport>
+          </SelectPrimitive.Content>
+        </SelectPrimitive.Portal>
+      </SelectPrimitive.Root>
+    </Tooltip>
+  );
+}
+
+function ListToggles({
+  snapshot,
+  onExecute,
+}: {
+  snapshot: ToolbarSnapshot;
+  onExecute: ToolbarExecuteFn;
+}) {
+  const items: { id: PublicToolbarItemId; icon: typeof List; label: string }[] = [
+    { id: 'bullet-list', icon: List, label: 'Bullet list' },
+    { id: 'numbered-list', icon: ListOrdered, label: 'Numbered list' },
+  ];
+
+  const activeIds = items.filter(({ id }) => snapshot.commands[id]?.active).map(({ id }) => id);
+
+  return (
+    <ToggleGroupPrimitive.Root
+      type="multiple"
+      value={activeIds}
+      onValueChange={() => {}}
+      className="flex items-center gap-0.5"
+    >
+      {items.map(({ id, icon: Icon, label }) => {
+        const state = snapshot.commands[id];
+        return (
+          <Tooltip key={id} content={label}>
+            <ToggleGroupPrimitive.Item
+              value={id}
+              disabled={state?.disabled}
+              onMouseDown={(e) => e.preventDefault()}
+              onClick={() => onExecute(id)}
+              className={cn(
+                'inline-flex h-8 w-8 items-center justify-center rounded-md text-sm transition-colors',
+                'hover:bg-zinc-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-400',
+                'disabled:pointer-events-none disabled:opacity-50',
+                state?.active && 'bg-zinc-200 text-zinc-900',
+              )}
+            >
+              <Icon className="h-4 w-4" />
+            </ToggleGroupPrimitive.Item>
+          </Tooltip>
+        );
+      })}
+    </ToggleGroupPrimitive.Root>
+  );
+}
+
+function LinkPopover({
+  snapshot,
+  onExecute,
+}: {
+  snapshot: ToolbarSnapshot;
+  onExecute: ToolbarExecuteFn;
+}) {
+  const [href, setHref] = useState('');
+  const state = snapshot.commands['link'];
+  const currentHref = (state?.value as string) ?? '';
+
+  return (
+    <PopoverPrimitive.Root
+      onOpenChange={(open) => {
+        if (open) setHref(currentHref || '');
+      }}
+    >
+      <Tooltip content="Insert link">
+        <PopoverPrimitive.Trigger
+          className={cn(
+            'inline-flex h-8 w-8 items-center justify-center rounded-md text-sm transition-colors',
+            'hover:bg-zinc-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-400',
+            'disabled:pointer-events-none disabled:opacity-50',
+            state?.active && 'bg-zinc-200 text-zinc-900',
+          )}
+          disabled={state?.disabled}
+        >
+          <Link className="h-4 w-4" />
+        </PopoverPrimitive.Trigger>
+      </Tooltip>
+      <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Content
+          side="bottom"
+          sideOffset={6}
+          className="z-50 w-72 rounded-lg border border-zinc-200 bg-white p-3 shadow-lg"
+        >
+          <label className="mb-1 block text-xs font-medium text-zinc-600">URL</label>
+          <input
+            type="url"
+            value={href}
+            onChange={(e) => setHref(e.target.value)}
+            placeholder="https://example.com"
+            className="mb-2 w-full rounded-md border border-zinc-200 px-2 py-1.5 text-sm outline-none focus:ring-1 focus:ring-zinc-400"
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                onExecute('link', { href: href || null });
+              }
+            }}
+          />
+          <div className="flex gap-2">
+            <button
+              className="flex-1 rounded-md bg-zinc-900 px-3 py-1.5 text-xs font-medium text-white hover:bg-zinc-800"
+              onClick={() => onExecute('link', { href: href || null })}
+            >
+              Apply
+            </button>
+            {currentHref && (
+              <button
+                className="rounded-md border border-zinc-200 px-3 py-1.5 text-xs text-zinc-600 hover:bg-zinc-50"
+                onClick={() => onExecute('link', { href: null })}
+              >
+                Remove
+              </button>
+            )}
+          </div>
+        </PopoverPrimitive.Content>
+      </PopoverPrimitive.Portal>
+    </PopoverPrimitive.Root>
+  );
+}
+
+function ZoomSelect({
+  snapshot,
+  onExecute,
+}: {
+  snapshot: ToolbarSnapshot;
+  onExecute: ToolbarExecuteFn;
+}) {
+  const current = (snapshot.commands['zoom']?.value as number) ?? 100;
+  const currentStr = String(current);
+
+  return (
+    <Tooltip content="Zoom">
+      <SelectPrimitive.Root
+        value={currentStr}
+        onValueChange={(val) => onExecute('zoom', Number(val))}
+      >
+        <SelectPrimitive.Trigger
+          className={cn(
+            'inline-flex h-8 items-center gap-1 rounded-md border border-zinc-200 bg-white px-2 text-sm',
+            'hover:bg-zinc-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-400',
+            'disabled:pointer-events-none disabled:opacity-50',
+          )}
+          disabled={snapshot.commands['zoom']?.disabled}
+        >
+          <ZoomIn className="h-3.5 w-3.5 text-zinc-500" />
+          <span>{current}%</span>
+          <SelectPrimitive.Icon>
+            <ChevronDown className="h-3.5 w-3.5 text-zinc-500" />
+          </SelectPrimitive.Icon>
+        </SelectPrimitive.Trigger>
+
+        <SelectPrimitive.Portal>
+          <SelectPrimitive.Content
+            position="popper"
+            sideOffset={4}
+            className="z-50 rounded-md border border-zinc-200 bg-white shadow-lg"
+          >
+            <SelectPrimitive.Viewport className="p-1">
+              {DEFAULT_ZOOM_OPTIONS.map((opt) => (
+                <SelectPrimitive.Item
+                  key={opt.value}
+                  value={String(opt.value)}
+                  className={cn(
+                    'relative flex h-8 cursor-pointer items-center rounded-sm px-2 pr-8 text-sm outline-none',
+                    'data-[highlighted]:bg-zinc-100',
+                  )}
+                >
+                  <SelectPrimitive.ItemText>{opt.label}</SelectPrimitive.ItemText>
+                  <SelectPrimitive.ItemIndicator className="absolute right-2">
+                    <Check className="h-3.5 w-3.5" />
+                  </SelectPrimitive.ItemIndicator>
+                </SelectPrimitive.Item>
+              ))}
+            </SelectPrimitive.Viewport>
+          </SelectPrimitive.Content>
+        </SelectPrimitive.Portal>
+      </SelectPrimitive.Root>
+    </Tooltip>
+  );
+}
+
+function ToolbarButton({
+  id,
+  icon: Icon,
+  label,
+  snapshot,
+  onExecute,
+}: {
+  id: PublicToolbarItemId;
+  icon: typeof Bold;
+  label: string;
+  snapshot: ToolbarSnapshot;
+  onExecute: ToolbarExecuteFn;
+}) {
+  const state = snapshot.commands[id];
+  return (
+    <Tooltip content={label}>
+      <button
+        disabled={state?.disabled}
+        onMouseDown={(e) => e.preventDefault()}
+        onClick={() => onExecute(id)}
+        className={cn(
+          'inline-flex h-8 w-8 items-center justify-center rounded-md text-sm transition-colors',
+          'hover:bg-zinc-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-400',
+          'disabled:pointer-events-none disabled:opacity-50',
+          state?.active && 'bg-zinc-200 text-zinc-900',
+        )}
+      >
+        <Icon className="h-4 w-4" />
+      </button>
+    </Tooltip>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Main toolbar
+// ---------------------------------------------------------------------------
+
+function Toolbar({
+  snapshot,
+  onExecute,
+}: {
+  snapshot: ToolbarSnapshot;
+  onExecute: ToolbarExecuteFn;
+}) {
+  return (
+    <div className="flex items-center gap-1 border-b border-zinc-200 bg-white px-3 py-1.5 overflow-x-auto">
+      {/* Undo / Redo */}
+      <ToolbarButton id="undo" icon={Undo2} label="Undo" snapshot={snapshot} onExecute={onExecute} />
+      <ToolbarButton id="redo" icon={Redo2} label="Redo" snapshot={snapshot} onExecute={onExecute} />
+
+      <Separator />
+
+      {/* Font family & size */}
+      <FontFamilySelect snapshot={snapshot} onExecute={onExecute} />
+      <FontSizeSelect snapshot={snapshot} onExecute={onExecute} />
+
+      <Separator />
+
+      {/* Bold / Italic / Underline / Strikethrough */}
+      <FormatToggles snapshot={snapshot} onExecute={onExecute} />
+
+      <Separator />
+
+      {/* Text color & highlight */}
+      <ColorPickerPopover commandId="text-color" icon={Type} label="Text color" options={DEFAULT_TEXT_COLOR_OPTIONS} snapshot={snapshot} onExecute={onExecute} />
+      <ColorPickerPopover commandId="highlight-color" icon={Paintbrush} label="Highlight color" options={DEFAULT_HIGHLIGHT_COLOR_OPTIONS} snapshot={snapshot} onExecute={onExecute} />
+
+      <Separator />
+
+      {/* Link */}
+      <LinkPopover snapshot={snapshot} onExecute={onExecute} />
+
+      <Separator />
+
+      {/* Alignment */}
+      <AlignSelect snapshot={snapshot} onExecute={onExecute} />
+
+      <Separator />
+
+      {/* Lists */}
+      <ListToggles snapshot={snapshot} onExecute={onExecute} />
+
+      <Separator />
+
+      {/* Image */}
+      <ToolbarButton id="image" icon={Image} label="Insert image" snapshot={snapshot} onExecute={onExecute} />
+
+      {/* Push zoom to the right */}
+      <div className="flex-1" />
+
+      {/* Zoom */}
+      <ZoomSelect snapshot={snapshot} onExecute={onExecute} />
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// App
+// ---------------------------------------------------------------------------
+
+export default function App() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [superdoc, setSuperdoc] = useState<SuperDoc | null>(null);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    const sd = new SuperDoc({ selector: el, document: '/test_file.docx' });
+    setSuperdoc(sd);
+    return () => { sd.destroy(); setSuperdoc(null); };
+  }, []);
+
+  const { snapshot, execute: handleExecute } = useHeadlessToolbar(superdoc, COMMANDS);
+
+  return (
+    <TooltipPrimitive.Provider>
+      <div className="flex h-full flex-col bg-zinc-50">
+        <Toolbar snapshot={snapshot} onExecute={handleExecute} />
+        <div ref={containerRef} className="flex-1 overflow-auto" />
+      </div>
+    </TooltipPrimitive.Provider>
+  );
+}
diff --git a/examples/advanced/headless-toolbar/react-shadcn/src/index.css b/examples/advanced/headless-toolbar/react-shadcn/src/index.css
new file mode 100644
index 0000000000..43d2d131eb
--- /dev/null
+++ b/examples/advanced/headless-toolbar/react-shadcn/src/index.css
@@ -0,0 +1,17 @@
+@import 'tailwindcss';
+
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
+}
+
+body {
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    sans-serif;
+}
diff --git a/examples/advanced/headless-toolbar/react-shadcn/src/main.tsx b/examples/advanced/headless-toolbar/react-shadcn/src/main.tsx
new file mode 100644
index 0000000000..dfacde0907
--- /dev/null
+++ b/examples/advanced/headless-toolbar/react-shadcn/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
diff --git a/examples/advanced/headless-toolbar/react-shadcn/tsconfig.json b/examples/advanced/headless-toolbar/react-shadcn/tsconfig.json
new file mode 100644
index 0000000000..4c77361f34
--- /dev/null
+++ b/examples/advanced/headless-toolbar/react-shadcn/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true
+  },
+  "include": ["src"]
+}
diff --git a/examples/advanced/headless-toolbar/react-shadcn/vite.config.ts b/examples/advanced/headless-toolbar/react-shadcn/vite.config.ts
new file mode 100644
index 0000000000..da17dafaf2
--- /dev/null
+++ b/examples/advanced/headless-toolbar/react-shadcn/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+});
diff --git a/examples/advanced/headless-toolbar/src/App.vue b/examples/advanced/headless-toolbar/src/App.vue
deleted file mode 100644
index db0aae2000..0000000000
--- a/examples/advanced/headless-toolbar/src/App.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, shallowRef } from 'vue';
-import { SuperDoc } from 'superdoc';
-import {
-  createHeadlessToolbar,
-  type HeadlessToolbarController,
-  type ToolbarSnapshot,
-} from 'superdoc/headless-toolbar';
-import HeadlessToolbarDemo from './components/HeadlessToolbarDemo.vue';
-import 'superdoc/style.css';
-
-const editorContainer = ref<HTMLDivElement | null>(null);
-const snapshot = shallowRef<ToolbarSnapshot>({
-  context: null,
-  commands: {},
-});
-
-const headlessToolbarCommands = [
-  'bold',
-  'italic',
-  'underline',
-  'strikethrough',
-  'font-family',
-  'font-size',
-  'text-color',
-  'highlight-color',
-  'link',
-  'linked-style',
-  'table-insert',
-  'table-add-row-before',
-  'table-add-row-after',
-  'table-delete-row',
-  'table-add-column-before',
-  'table-add-column-after',
-  'table-delete-column',
-  'table-delete',
-  'table-merge-cells',
-  'table-split-cell',
-  'table-remove-borders',
-  'table-fix',
-  'bullet-list',
-  'numbered-list',
-  'indent-increase',
-  'indent-decrease',
-  'clear-formatting',
-  'copy-format',
-  'track-changes-accept-selection',
-  'track-changes-reject-selection',
-  'image',
-  'ruler',
-  'zoom',
-  'document-mode',
-  'undo',
-  'redo',
-  'text-align',
-  'line-height',
-] as const;
-
-let superdoc: SuperDoc | null = null;
-let unsubscribeToolbar: (() => void) | null = null;
-let toolbarController: HeadlessToolbarController | null = null;
-
-const init = () => {
-  if (!editorContainer.value) return;
-
-  superdoc = new SuperDoc({
-    selector: editorContainer.value,
-    document: '/test_file.docx',
-    toolbar: null,
-  });
-  window.superdoc = superdoc;
-
-  toolbarController = createHeadlessToolbar({
-    superdoc,
-    commands: [...headlessToolbarCommands],
-  });
-
-  snapshot.value = toolbarController.getSnapshot();
-  unsubscribeToolbar = toolbarController.subscribe(({ snapshot: nextSnapshot }) => {
-    snapshot.value = nextSnapshot;
-    console.debug('Snapshot:', { snapshot: nextSnapshot });
-  });
-};
-
-onMounted(() => {
-  init();
-});
-
-onBeforeUnmount(() => {
-  unsubscribeToolbar?.();
-  toolbarController?.destroy?.();
-  superdoc?.destroy?.();
-});
-</script>
-
-<template>
-  <div class="app-shell">
-    <header class="app-header">
-      <div>
-        <p class="eyebrow">Advanced Example</p>
-        <h1>Headless Toolbar</h1>
-      </div>
-      <p class="intro">
-        This toolbar is fully customer-owned UI. SuperDoc only provides headless state and command access.
-      </p>
-    </header>
-
-    <main class="workspace">
-      <HeadlessToolbarDemo :snapshot="snapshot" :toolbar-controller="toolbarController" />
-      <div ref="editorContainer" class="editor-host"></div>
-    </main>
-  </div>
-</template>
diff --git a/examples/advanced/headless-toolbar/src/components/HeadlessToolbarDemo.vue b/examples/advanced/headless-toolbar/src/components/HeadlessToolbarDemo.vue
deleted file mode 100644
index 81927341c8..0000000000
--- a/examples/advanced/headless-toolbar/src/components/HeadlessToolbarDemo.vue
+++ /dev/null
@@ -1,476 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue';
-import {
-  headlessToolbarConstants,
-  headlessToolbarHelpers,
-  type HeadlessToolbarController,
-  type ToolbarSnapshot,
-} from 'superdoc/headless-toolbar';
-
-const props = defineProps<{
-  snapshot: ToolbarSnapshot;
-  toolbarController: HeadlessToolbarController | null;
-}>();
-
-type LinkedStyleOption = ReturnType<typeof headlessToolbarHelpers.getQuickFormatList>[number];
-type TableActionId =
-  | 'table-add-row-before'
-  | 'table-add-row-after'
-  | 'table-delete-row'
-  | 'table-add-column-before'
-  | 'table-add-column-after'
-  | 'table-delete-column'
-  | 'table-delete'
-  | 'table-merge-cells'
-  | 'table-split-cell'
-  | 'table-remove-borders'
-  | 'table-fix';
-
-const fontFamilyOptions = headlessToolbarConstants.DEFAULT_FONT_FAMILY_OPTIONS;
-const fontSizeOptions = headlessToolbarConstants.DEFAULT_FONT_SIZE_OPTIONS;
-const textAlignOptions = headlessToolbarConstants.DEFAULT_TEXT_ALIGN_OPTIONS;
-const lineHeightOptions = headlessToolbarConstants.DEFAULT_LINE_HEIGHT_OPTIONS;
-const zoomOptions = headlessToolbarConstants.DEFAULT_ZOOM_OPTIONS;
-const documentModeOptions = headlessToolbarConstants.DEFAULT_DOCUMENT_MODE_OPTIONS;
-
-const textColorOptions = [
-  { label: 'Black', value: '#000000' },
-  { label: 'Red', value: '#ff0000' },
-  { label: 'Blue', value: '#0000ff' },
-];
-const highlightColorOptions = [
-  { label: 'Yellow', value: '#ffff00' },
-  { label: 'Green', value: '#00ff00' },
-  { label: 'Cyan', value: '#00ffff' },
-  { label: 'None', value: 'none' },
-];
-const tableActionOptions: Array<{ label: string; value: TableActionId }> = [
-  { label: 'Row Above', value: 'table-add-row-before' },
-  { label: 'Row Below', value: 'table-add-row-after' },
-  { label: 'Delete Row', value: 'table-delete-row' },
-  { label: 'Column Left', value: 'table-add-column-before' },
-  { label: 'Column Right', value: 'table-add-column-after' },
-  { label: 'Delete Column', value: 'table-delete-column' },
-  { label: 'Delete Table', value: 'table-delete' },
-  { label: 'Merge Cells', value: 'table-merge-cells' },
-  { label: 'Split Cell', value: 'table-split-cell' },
-  { label: 'Remove Borders', value: 'table-remove-borders' },
-  { label: 'Fix Tables', value: 'table-fix' },
-];
-
-const isTableActionsOpen = ref(false);
-const isLinkedStylesOpen = ref(false);
-const isLinkOpen = ref(false);
-const linkUrl = ref('');
-
-const activeEditor = computed(() => {
-  const context = props.snapshot.context;
-  return context?.presentationEditor?.getActiveEditor?.() ?? context?.editor ?? null;
-});
-
-const linkedStyleOptions = computed(() => {
-  const editor = activeEditor.value;
-  return editor ? headlessToolbarHelpers.getQuickFormatList(editor) : [];
-});
-
-const selectedLinkedStyleId = computed(() => {
-  const value = props.snapshot.commands['linked-style']?.value;
-  return typeof value === 'string' ? value : null;
-});
-
-const linkedStyleLabel = computed(() => {
-  const selectedStyle = linkedStyleOptions.value.find((style) => style.id === selectedLinkedStyleId.value);
-  if (!selectedStyle || selectedStyle.id === 'Normal') return 'Format text';
-  return selectedStyle.definition?.attrs?.name ?? 'Format text';
-});
-
-const currentLinkHref = computed(() => {
-  const value = props.snapshot.commands.link?.value;
-  return typeof value === 'string' ? value : '';
-});
-
-const insertImage = async () => {
-  const editor = activeEditor.value;
-  if (!editor) return;
-
-  try {
-    const open = headlessToolbarHelpers.getFileOpener();
-    const result = await open();
-    if (!result?.file) return;
-
-    await headlessToolbarHelpers.processAndInsertImageFile({
-      file: result.file,
-      editor,
-      view: editor.view,
-      editorOptions: editor.options,
-      getMaxContentSize: () => editor.getMaxContentSize(),
-    });
-  } catch (error) {
-    console.error('[headless-toolbar demo] Image upload failed', error);
-  }
-};
-
-const applyLink = () => {
-  if (!linkUrl.value) return;
-
-  props.toolbarController?.execute?.('link', { href: linkUrl.value });
-  isLinkOpen.value = false;
-};
-
-const removeLink = () => {
-  props.toolbarController?.execute?.('link', { href: null });
-  isLinkOpen.value = false;
-};
-
-const toggleLinkMenu = () => {
-  linkUrl.value = currentLinkHref.value;
-  isLinkOpen.value = !isLinkOpen.value;
-};
-
-const applyLinkedStyle = (style: LinkedStyleOption) => {
-  props.toolbarController?.execute?.('linked-style', style);
-  isLinkedStylesOpen.value = false;
-};
-
-const runTableAction = (id: TableActionId) => {
-  props.toolbarController?.execute?.(id);
-  isTableActionsOpen.value = false;
-};
-</script>
-
-<template>
-  <div class="toolbar-floating">
-    <div class="toolbar-row">
-      <button
-        class="toolbar-button"
-        :class="{ 'toolbar-button-active': snapshot.commands.bold?.active }"
-        :disabled="snapshot.commands.bold?.disabled"
-        type="button"
-        @click="toolbarController?.execute?.('bold')"
-      >
-        Bold
-      </button>
-      <button
-        class="toolbar-button"
-        :class="{ 'toolbar-button-active': snapshot.commands.italic?.active }"
-        :disabled="snapshot.commands.italic?.disabled"
-        type="button"
-        @click="toolbarController?.execute?.('italic')"
-      >
-        Italic
-      </button>
-      <button
-        class="toolbar-button"
-        :class="{ 'toolbar-button-active': snapshot.commands.underline?.active }"
-        :disabled="snapshot.commands.underline?.disabled"
-        type="button"
-        @click="toolbarController?.execute?.('underline')"
-      >
-        Underline
-      </button>
-      <button
-        class="toolbar-button"
-        :class="{ 'toolbar-button-active': snapshot.commands.strikethrough?.active }"
-        :disabled="snapshot.commands.strikethrough?.disabled"
-        type="button"
-        @click="snapshot.context?.target?.commands?.toggleStrike?.()"
-      >
-        Strikethrough
-      </button>
-      <label class="toolbar-field">
-        <span class="toolbar-field-label">Font family</span>
-        <select
-          class="toolbar-select"
-          :disabled="snapshot.commands['font-family']?.disabled"
-          :value="String(snapshot.commands['font-family']?.value ?? '')"
-          @change="(event) => toolbarController?.execute?.('font-family', (event.target as HTMLSelectElement).value)"
-        >
-          <option v-for="option in fontFamilyOptions" :key="option.value" :value="option.label">
-            {{ option.label }}
-          </option>
-        </select>
-      </label>
-      <label class="toolbar-field">
-        <span class="toolbar-field-label">Font size</span>
-        <select
-          class="toolbar-select"
-          :disabled="snapshot.commands['font-size']?.disabled"
-          :value="String(snapshot.commands['font-size']?.value ?? '')"
-          @change="(event) => toolbarController?.execute?.('font-size', (event.target as HTMLSelectElement).value)"
-        >
-          <option v-for="option in fontSizeOptions" :key="option.value" :value="option.label">
-            {{ option.label }}
-          </option>
-        </select>
-      </label>
-      <label class="toolbar-field">
-        <span class="toolbar-field-label">Text color</span>
-        <select
-          class="toolbar-select"
-          :disabled="snapshot.commands['text-color']?.disabled"
-          :value="String(snapshot.commands['text-color']?.value ?? '').toLowerCase()"
-          @change="(event) => toolbarController?.execute?.('text-color', (event.target as HTMLSelectElement).value)"
-        >
-          <option v-for="option in textColorOptions" :key="option.value" :value="option.value">
-            {{ option.label }}
-          </option>
-        </select>
-      </label>
-      <label class="toolbar-field">
-        <span class="toolbar-field-label">Highlight</span>
-        <select
-          class="toolbar-select"
-          :disabled="snapshot.commands['highlight-color']?.disabled"
-          :value="String(snapshot.commands['highlight-color']?.value ?? '').toLowerCase()"
-          @change="(event) => toolbarController?.execute?.('highlight-color', (event.target as HTMLSelectElement).value)"
-        >
-          <option v-for="option in highlightColorOptions" :key="option.value" :value="option.value">
-            {{ option.label }}
-          </option>
-        </select>
-      </label>
-      <div class="toolbar-dropdown">
-        <button
-          class="toolbar-button toolbar-button-compact"
-          :class="{ 'toolbar-button-active': snapshot.commands.link?.active }"
-          :disabled="snapshot.commands.link?.disabled"
-          type="button"
-          @click="toggleLinkMenu"
-        >
-          Link
-        </button>
-        <div v-if="isLinkOpen" class="toolbar-dropdown-menu toolbar-link-menu">
-          <label class="toolbar-link-field">
-            <span class="toolbar-field-label">URL</span>
-            <input v-model="linkUrl" class="toolbar-link-input" type="text" placeholder="https://example.com" />
-          </label>
-          <div class="toolbar-link-actions">
-            <button class="toolbar-button toolbar-button-compact" type="button" :disabled="!linkUrl" @click="applyLink">
-              Apply
-            </button>
-            <button
-              v-if="snapshot.commands.link?.active"
-              class="toolbar-button toolbar-button-compact"
-              type="button"
-              @click="removeLink"
-            >
-              Remove
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="toolbar-row toolbar-row-secondary">
-      <button
-        class="toolbar-button toolbar-button-compact"
-        :disabled="snapshot.commands['table-insert']?.disabled"
-        type="button"
-        @click="toolbarController?.execute?.('table-insert', { rows: 3, cols: 3 })"
-      >
-        Table 3x3
-      </button>
-      <div class="toolbar-dropdown">
-        <button
-          class="toolbar-button toolbar-button-compact"
-          :disabled="tableActionOptions.every((option) => snapshot.commands[option.value]?.disabled !== false)"
-          type="button"
-          @click="isTableActionsOpen = !isTableActionsOpen"
-        >
-          Table Actions
-        </button>
-        <div v-if="isTableActionsOpen" class="toolbar-dropdown-menu">
-          <button
-            v-for="option in tableActionOptions"
-            :key="option.value"
-            class="toolbar-dropdown-item"
-            :disabled="snapshot.commands[option.value]?.disabled"
-            type="button"
-            @click="runTableAction(option.value)"
-          >
-            {{ option.label }}
-          </button>
-        </div>
-      </div>
-      <label class="toolbar-field">
-        <span class="toolbar-field-label">Text align</span>
-        <select
-          class="toolbar-select"
-          :disabled="snapshot.commands['text-align']?.disabled"
-          :value="String(snapshot.commands['text-align']?.value ?? '')"
-          @change="snapshot.context?.target?.commands?.setTextAlign?.((($event.target as HTMLSelectElement).value as 'left' | 'center' | 'right' | 'justify'))"
-        >
-          <option v-for="option in textAlignOptions" :key="option.value" :value="option.value">
-            {{ option.label }}
-          </option>
-        </select>
-      </label>
-      <button
-        class="toolbar-button toolbar-button-compact"
-        :class="{ 'toolbar-button-active': snapshot.commands['bullet-list']?.active }"
-        :disabled="snapshot.commands['bullet-list']?.disabled"
-        type="button"
-        @click="toolbarController?.execute?.('bullet-list')"
-      >
-        Bullet List
-      </button>
-      <button
-        class="toolbar-button toolbar-button-compact"
-        :class="{ 'toolbar-button-active': snapshot.commands['numbered-list']?.active }"
-        :disabled="snapshot.commands['numbered-list']?.disabled"
-        type="button"
-        @click="toolbarController?.execute?.('numbered-list')"
-      >
-        Numbered List
-      </button>
-      <button
-        class="toolbar-button toolbar-button-compact"
-        :disabled="snapshot.commands['indent-increase']?.disabled"
-        type="button"
-        @click="toolbarController?.execute?.('indent-increase')"
-      >
-        Indent +
-      </button>
-      <button
-        class="toolbar-button toolbar-button-compact"
-        :disabled="snapshot.commands['indent-decrease']?.disabled"
-        type="button"
-        @click="toolbarController?.execute?.('indent-decrease')"
-      >
-        Indent -
-      </button>
-      <label class="toolbar-field">
-        <span class="toolbar-field-label">Line height</span>
-        <select
-          class="toolbar-select"
-          :disabled="snapshot.commands['line-height']?.disabled"
-          :value="String(snapshot.commands['line-height']?.value ?? '')"
-          @change="snapshot.context?.target?.commands?.setLineHeight?.(Number(($event.target as HTMLSelectElement).value))"
-        >
-          <option v-for="option in lineHeightOptions" :key="option.value" :value="option.value">
-            {{ option.label }}
-          </option>
-        </select>
-      </label>
-      <div class="toolbar-dropdown">
-        <button
-          class="toolbar-button toolbar-button-compact"
-          :disabled="snapshot.commands['linked-style']?.disabled || linkedStyleOptions.length === 0"
-          type="button"
-          @click="isLinkedStylesOpen = !isLinkedStylesOpen"
-        >
-          {{ linkedStyleLabel }}
-        </button>
-        <div v-if="isLinkedStylesOpen" class="toolbar-dropdown-menu toolbar-dropdown-menu-wide">
-          <button
-            v-for="style in linkedStyleOptions"
-            :key="style.id"
-            class="toolbar-dropdown-item toolbar-dropdown-item-linked-style"
-            :class="{ 'toolbar-dropdown-item-active': selectedLinkedStyleId === style.id }"
-            type="button"
-            @click="applyLinkedStyle(style)"
-          >
-            <span
-              class="toolbar-linked-style-name"
-              :style="headlessToolbarHelpers.generateLinkedStyleString(style, null, null, false)"
-            >
-              {{ style.definition?.attrs?.name ?? style.id }}
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-    <div class="toolbar-row toolbar-row-secondary">
-      <button
-        class="toolbar-button toolbar-button-compact"
-        :disabled="snapshot.commands.undo?.disabled"
-        type="button"
-        @click="toolbarController?.execute?.('undo')"
-      >
-        Undo
-      </button>
-      <button
-        class="toolbar-button toolbar-button-compact"
-        :disabled="snapshot.commands.redo?.disabled"
-        type="button"
-        @click="toolbarController?.execute?.('redo')"
-      >
-        Redo
-      </button>
-      <label class="toolbar-field">
-        <span class="toolbar-field-label">Zoom</span>
-        <select
-          class="toolbar-select"
-          :disabled="snapshot.commands.zoom?.disabled"
-          :value="String(snapshot.commands.zoom?.value ?? '')"
-          @change="toolbarController?.execute?.('zoom', Number(($event.target as HTMLSelectElement).value))"
-        >
-          <option v-for="option in zoomOptions" :key="option.value" :value="option.value">
-            {{ option.label }}
-          </option>
-        </select>
-      </label>
-      <button
-        class="toolbar-button toolbar-button-compact"
-        :class="{ 'toolbar-button-active': snapshot.commands.ruler?.active }"
-        :disabled="snapshot.commands.ruler?.disabled"
-        type="button"
-        @click="toolbarController?.execute?.('ruler')"
-      >
-        Ruler
-      </button>
-      <button
-        class="toolbar-button toolbar-button-compact"
-        :disabled="snapshot.commands['copy-format']?.disabled"
-        type="button"
-        @click="toolbarController?.execute?.('copy-format')"
-      >
-        Copy Format
-      </button>
-      <button
-        class="toolbar-button toolbar-button-compact"
-        :disabled="snapshot.commands['track-changes-accept-selection']?.disabled"
-        type="button"
-        @click="toolbarController?.execute?.('track-changes-accept-selection')"
-      >
-        Accept Change
-      </button>
-      <button
-        class="toolbar-button toolbar-button-compact"
-        :disabled="snapshot.commands['track-changes-reject-selection']?.disabled"
-        type="button"
-        @click="toolbarController?.execute?.('track-changes-reject-selection')"
-      >
-        Reject Change
-      </button>
-      <button
-        class="toolbar-button toolbar-button-compact"
-        :disabled="snapshot.commands.image?.disabled"
-        type="button"
-        @click="insertImage"
-      >
-        Image
-      </button>
-      <button
-        class="toolbar-button toolbar-button-compact"
-        :disabled="snapshot.commands['clear-formatting']?.disabled"
-        type="button"
-        @click="toolbarController?.execute?.('clear-formatting')"
-      >
-        Clear Formatting
-      </button>
-      <label class="toolbar-field">
-        <span class="toolbar-field-label">Document mode</span>
-        <select
-          class="toolbar-select"
-          :disabled="snapshot.commands['document-mode']?.disabled"
-          :value="String(snapshot.commands['document-mode']?.value ?? '')"
-          @change="toolbarController?.execute?.('document-mode', ($event.target as HTMLSelectElement).value)"
-        >
-          <option v-for="option in documentModeOptions" :key="option.value" :value="option.value">
-            {{ option.label }}
-          </option>
-        </select>
-      </label>
-    </div>
-  </div>
-</template>
diff --git a/examples/advanced/headless-toolbar/src/main.ts b/examples/advanced/headless-toolbar/src/main.ts
deleted file mode 100644
index 8dd6bc1cf3..0000000000
--- a/examples/advanced/headless-toolbar/src/main.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { createApp } from 'vue';
-import App from './App.vue';
-import './style.css';
-
-createApp(App).mount('#app');
diff --git a/examples/advanced/headless-toolbar/src/style.css b/examples/advanced/headless-toolbar/src/style.css
deleted file mode 100644
index 53c5d0baf2..0000000000
--- a/examples/advanced/headless-toolbar/src/style.css
+++ /dev/null
@@ -1,263 +0,0 @@
-:root {
-  font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
-  color: #111827;
-  background:
-    radial-gradient(circle at top left, rgba(251, 191, 36, 0.18), transparent 28%),
-    linear-gradient(180deg, #f8fafc 0%, #e5e7eb 100%);
-}
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-}
-
-button {
-  font: inherit;
-}
-
-select {
-  font: inherit;
-}
-
-.app-shell {
-  min-height: 100vh;
-  padding: 24px;
-}
-
-.app-header {
-  display: flex;
-  justify-content: space-between;
-  gap: 24px;
-  align-items: end;
-  margin-bottom: 24px;
-}
-
-.app-header h1 {
-  margin: 0;
-  font-size: 40px;
-  line-height: 1;
-}
-
-.eyebrow {
-  margin: 0 0 8px;
-  font-size: 12px;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: #92400e;
-}
-
-.intro {
-  max-width: 520px;
-  margin: 0;
-  color: #4b5563;
-}
-
-.workspace {
-  position: relative;
-  border: 1px solid rgba(17, 24, 39, 0.08);
-  border-radius: 28px;
-  background: rgba(255, 255, 255, 0.82);
-  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.08);
-  overflow: hidden;
-}
-
-.toolbar-floating {
-  position: relative;
-  top: 0;
-  z-index: 10;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: 10px;
-  padding: 16px 20px;
-  backdrop-filter: blur(14px);
-  background: rgba(255, 251, 235, 0.88);
-  border-bottom: 1px solid rgba(146, 64, 14, 0.12);
-}
-
-.toolbar-row {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-
-.toolbar-row-secondary {
-  padding-top: 2px;
-}
-
-.toolbar-button {
-  border: 1px solid rgba(17, 24, 39, 0.12);
-  background: #ffffff;
-  color: #111827;
-  border-radius: 999px;
-  padding: 10px 16px;
-  cursor: pointer;
-  transition:
-    background-color 140ms ease,
-    color 140ms ease,
-    border-color 140ms ease,
-    transform 140ms ease;
-}
-
-.toolbar-button:hover:not(:disabled) {
-  transform: translateY(-1px);
-  border-color: rgba(146, 64, 14, 0.28);
-}
-
-.toolbar-button:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-.toolbar-button-active {
-  background: #111827;
-  color: #ffffff;
-  border-color: #111827;
-}
-
-.toolbar-button-compact {
-  padding-inline: 12px;
-}
-
-.toolbar-field {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.toolbar-field-label {
-  font-size: 12px;
-  color: #6b7280;
-}
-
-.toolbar-select {
-  border: 1px solid rgba(17, 24, 39, 0.12);
-  background: #ffffff;
-  color: #111827;
-  border-radius: 999px;
-  padding: 10px 14px;
-  min-width: 92px;
-}
-
-.toolbar-select:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-.toolbar-dropdown {
-  position: relative;
-}
-
-.toolbar-dropdown-menu {
-  position: absolute;
-  top: calc(100% + 8px);
-  left: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  min-width: 188px;
-  padding: 10px;
-  border: 1px solid rgba(17, 24, 39, 0.1);
-  border-radius: 18px;
-  background: rgba(255, 255, 255, 0.98);
-  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
-  z-index: 50;
-}
-
-.toolbar-dropdown-menu-wide {
-  min-width: 220px;
-  max-height: 400px;
-  overflow-y: auto;
-}
-
-.toolbar-link-menu {
-  min-width: 280px;
-}
-
-.toolbar-dropdown-item {
-  border: 1px solid rgba(17, 24, 39, 0.08);
-  background: #ffffff;
-  color: #111827;
-  border-radius: 12px;
-  padding: 10px 12px;
-  text-align: left;
-  cursor: pointer;
-}
-
-.toolbar-dropdown-item-active {
-  border-color: rgba(17, 24, 39, 0.2);
-  background: #f8fafc;
-}
-
-.toolbar-dropdown-item:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-.toolbar-dropdown-item-linked-style {
-  padding: 0;
-}
-
-.toolbar-linked-style-name {
-  display: block;
-  width: 100%;
-  padding: 14px 12px;
-  text-align: left;
-}
-
-.toolbar-link-field {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.toolbar-link-input {
-  width: 100%;
-  border: 1px solid rgba(17, 24, 39, 0.12);
-  background: #ffffff;
-  color: #111827;
-  border-radius: 12px;
-  padding: 10px 12px;
-  font: inherit;
-}
-
-.toolbar-link-actions {
-  display: flex;
-  gap: 8px;
-}
-
-.toolbar-segmented {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.editor-host {
-  display: flex;
-  justify-content: center;
-  min-height: calc(100vh - 210px);
-  padding: 20px;
-}
-
-@media (max-width: 900px) {
-  .app-shell {
-    padding: 16px;
-  }
-
-  .app-header {
-    flex-direction: column;
-    align-items: start;
-  }
-
-  .app-header h1 {
-    font-size: 32px;
-  }
-
-  .toolbar-floating {
-    align-items: start;
-  }
-}
diff --git a/examples/advanced/headless-toolbar/index.html b/examples/advanced/headless-toolbar/svelte-shadcn/index.html
similarity index 80%
rename from examples/advanced/headless-toolbar/index.html
rename to examples/advanced/headless-toolbar/svelte-shadcn/index.html
index ea4787cab4..760fc9214f 100644
--- a/examples/advanced/headless-toolbar/index.html
+++ b/examples/advanced/headless-toolbar/svelte-shadcn/index.html
@@ -3,10 +3,10 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>SuperDoc — Headless Toolbar</title>
+    <title>SuperDoc - Svelte Headless Toolbar</title>
   </head>
   <body>
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
-  </html>
+</html>
diff --git a/examples/advanced/headless-toolbar/svelte-shadcn/package.json b/examples/advanced/headless-toolbar/svelte-shadcn/package.json
new file mode 100644
index 0000000000..c241fa0f40
--- /dev/null
+++ b/examples/advanced/headless-toolbar/svelte-shadcn/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "headless-toolbar-svelte",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "superdoc": "../../../../packages/superdoc"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@tailwindcss/vite": "^4.1.3",
+    "lucide-svelte": "^0.475.0",
+    "svelte": "^5.25.0",
+    "tailwindcss": "^4.1.3",
+    "typescript": "^5.7.0",
+    "vite": "^6.3.0"
+  }
+}
diff --git a/examples/advanced/headless-toolbar/svelte-shadcn/public/test_file.docx b/examples/advanced/headless-toolbar/svelte-shadcn/public/test_file.docx
new file mode 100644
index 0000000000..b1b8c8f5a7
Binary files /dev/null and b/examples/advanced/headless-toolbar/svelte-shadcn/public/test_file.docx differ
diff --git a/examples/advanced/headless-toolbar/svelte-shadcn/src/App.svelte b/examples/advanced/headless-toolbar/svelte-shadcn/src/App.svelte
new file mode 100644
index 0000000000..5da76bda4f
--- /dev/null
+++ b/examples/advanced/headless-toolbar/svelte-shadcn/src/App.svelte
@@ -0,0 +1,217 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { SuperDoc } from 'superdoc';
+  import 'superdoc/style.css';
+  import {
+    createHeadlessToolbar,
+    headlessToolbarConstants,
+    type HeadlessToolbarController,
+    type ToolbarSnapshot,
+    type PublicToolbarItemId,
+  } from 'superdoc/headless-toolbar';
+  import {
+    Bold,
+    Italic,
+    Underline,
+    Strikethrough,
+    AlignLeft,
+    AlignCenter,
+    AlignRight,
+    AlignJustify,
+    List,
+    ListOrdered,
+    Undo2,
+    Redo2,
+    ImagePlus,
+    type Icon,
+  } from 'lucide-svelte';
+
+  const COMMANDS: PublicToolbarItemId[] = [
+    'bold', 'italic', 'underline', 'strikethrough',
+    'font-family', 'font-size', 'text-color', 'text-align',
+    'bullet-list', 'numbered-list',
+    'undo', 'redo', 'image',
+  ];
+
+  const ALIGN_ICONS: Record<string, typeof Icon> = {
+    left: AlignLeft,
+    center: AlignCenter,
+    right: AlignRight,
+    justify: AlignJustify,
+  };
+
+  let editorEl: HTMLDivElement;
+  let snapshot = $state<ToolbarSnapshot>({ context: null, commands: {} });
+  let controller: HeadlessToolbarController | null = $state(null);
+  let unsub: (() => void) | null = null;
+
+  const fontFamilies = headlessToolbarConstants.DEFAULT_FONT_FAMILY_OPTIONS;
+  const fontSizes = headlessToolbarConstants.DEFAULT_FONT_SIZE_OPTIONS;
+
+  function exec(id: PublicToolbarItemId, payload?: unknown) {
+    controller?.execute(id, payload);
+  }
+
+  function isActive(id: PublicToolbarItemId): boolean {
+    return snapshot.commands[id]?.active ?? false;
+  }
+
+  function isDisabled(id: PublicToolbarItemId): boolean {
+    return snapshot.commands[id]?.disabled ?? true;
+  }
+
+  function cmdValue(id: PublicToolbarItemId): unknown {
+    return snapshot.commands[id]?.value;
+  }
+
+  let currentAlign = $derived((cmdValue('text-align') as string) ?? 'left');
+  let CurrentAlignIcon = $derived(ALIGN_ICONS[currentAlign] ?? AlignLeft);
+
+  function cycleAlign() {
+    const order = ['left', 'center', 'right', 'justify'];
+    const next = order[(order.indexOf(currentAlign) + 1) % order.length];
+    exec('text-align', next);
+  }
+
+  onMount(() => {
+    const superdoc = new SuperDoc({
+      selector: editorEl,
+      document: '/test_file.docx',
+    });
+
+    const tb = createHeadlessToolbar({ superdoc, commands: COMMANDS });
+    controller = tb;
+    snapshot = tb.getSnapshot();
+
+    unsub = tb.subscribe(({ snapshot: s }) => {
+      snapshot = s;
+    });
+  });
+
+  onDestroy(() => {
+    unsub?.();
+    controller?.destroy();
+  });
+</script>
+
+<!-- Editor fills viewport above the bottom bar -->
+<div class="h-full pb-12">
+  <div bind:this={editorEl} class="h-full"></div>
+</div>
+
+<!-- Bottom toolbar -->
+<div
+  class="fixed bottom-0 inset-x-0 h-12 z-50 flex items-center gap-1 px-3
+         bg-white/80 backdrop-blur border-t border-gray-200
+         dark:bg-gray-900/80 dark:border-gray-700"
+>
+  <!-- Font family -->
+  <select
+    class="h-7 text-xs rounded border border-gray-300 bg-transparent px-1
+           dark:border-gray-600 dark:text-gray-200"
+    title="Font family"
+    disabled={isDisabled('font-family')}
+    value={cmdValue('font-family') ?? ''}
+    onchange={(e) => exec('font-family', (e.target as HTMLSelectElement).value)}
+  >
+    {#each fontFamilies as f}
+      <option value={f.value}>{f.label}</option>
+    {/each}
+  </select>
+
+  <!-- Font size -->
+  <select
+    class="h-7 w-14 text-xs rounded border border-gray-300 bg-transparent px-1
+           dark:border-gray-600 dark:text-gray-200"
+    title="Font size"
+    disabled={isDisabled('font-size')}
+    value={cmdValue('font-size') ?? ''}
+    onchange={(e) => exec('font-size', (e.target as HTMLSelectElement).value)}
+  >
+    {#each fontSizes as s}
+      <option value={s.value}>{s.label}</option>
+    {/each}
+  </select>
+
+  <span class="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1"></span>
+
+  <!-- Toggle buttons -->
+  <button title="Bold" class="toolbar-btn" class:active={isActive('bold')} disabled={isDisabled('bold')} onclick={() => exec('bold')}>
+    <Bold size={16} />
+  </button>
+  <button title="Italic" class="toolbar-btn" class:active={isActive('italic')} disabled={isDisabled('italic')} onclick={() => exec('italic')}>
+    <Italic size={16} />
+  </button>
+  <button title="Underline" class="toolbar-btn" class:active={isActive('underline')} disabled={isDisabled('underline')} onclick={() => exec('underline')}>
+    <Underline size={16} />
+  </button>
+  <button title="Strikethrough" class="toolbar-btn" class:active={isActive('strikethrough')} disabled={isDisabled('strikethrough')} onclick={() => exec('strikethrough')}>
+    <Strikethrough size={16} />
+  </button>
+
+  <!-- Text color -->
+  <label class="toolbar-btn relative" title="Text color">
+    <span class="text-xs font-bold leading-none" style="color: {cmdValue('text-color') ?? '#000'}">A</span>
+    <span class="absolute bottom-0.5 left-1/2 -translate-x-1/2 h-0.5 w-3 rounded" style="background: {cmdValue('text-color') ?? '#000'}"></span>
+    <input
+      type="color"
+      class="sr-only"
+      disabled={isDisabled('text-color')}
+      value={cmdValue('text-color') ?? '#000000'}
+      onchange={(e) => exec('text-color', (e.target as HTMLInputElement).value)}
+    />
+  </label>
+
+  <span class="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1"></span>
+
+  <!-- Alignment (cycle) -->
+  <button title="Text align: {currentAlign}" class="toolbar-btn" disabled={isDisabled('text-align')} onclick={cycleAlign}>
+    <CurrentAlignIcon size={16} />
+  </button>
+
+  <!-- Lists -->
+  <button title="Bullet list" class="toolbar-btn" class:active={isActive('bullet-list')} disabled={isDisabled('bullet-list')} onclick={() => exec('bullet-list')}>
+    <List size={16} />
+  </button>
+  <button title="Numbered list" class="toolbar-btn" class:active={isActive('numbered-list')} disabled={isDisabled('numbered-list')} onclick={() => exec('numbered-list')}>
+    <ListOrdered size={16} />
+  </button>
+
+  <span class="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1"></span>
+
+  <!-- Image -->
+  <button title="Insert image" class="toolbar-btn" disabled={isDisabled('image')} onclick={() => exec('image')}>
+    <ImagePlus size={16} />
+  </button>
+
+  <!-- Spacer -->
+  <div class="flex-1"></div>
+
+  <!-- Undo / Redo -->
+  <button title="Undo" class="toolbar-btn" disabled={isDisabled('undo')} onclick={() => exec('undo')}>
+    <Undo2 size={16} />
+  </button>
+  <button title="Redo" class="toolbar-btn" disabled={isDisabled('redo')} onclick={() => exec('redo')}>
+    <Redo2 size={16} />
+  </button>
+</div>
+
+<style>
+  @reference "tailwindcss";
+
+  .toolbar-btn {
+    @apply flex items-center justify-center w-8 h-8 rounded
+           text-gray-600 hover:bg-gray-100
+           disabled:opacity-30 disabled:pointer-events-none
+           transition-colors cursor-pointer;
+  }
+  .toolbar-btn.active {
+    @apply bg-gray-200 text-gray-900;
+  }
+  :global(.dark) .toolbar-btn {
+    @apply text-gray-300 hover:bg-gray-700;
+  }
+  :global(.dark) .toolbar-btn.active {
+    @apply bg-gray-700 text-white;
+  }
+</style>
diff --git a/examples/advanced/headless-toolbar/svelte-shadcn/src/app.css b/examples/advanced/headless-toolbar/svelte-shadcn/src/app.css
new file mode 100644
index 0000000000..53180dd731
--- /dev/null
+++ b/examples/advanced/headless-toolbar/svelte-shadcn/src/app.css
@@ -0,0 +1,8 @@
+@import 'tailwindcss';
+
+html,
+body,
+#app {
+  height: 100%;
+  margin: 0;
+}
diff --git a/examples/advanced/headless-toolbar/svelte-shadcn/src/main.ts b/examples/advanced/headless-toolbar/svelte-shadcn/src/main.ts
new file mode 100644
index 0000000000..52438c365f
--- /dev/null
+++ b/examples/advanced/headless-toolbar/svelte-shadcn/src/main.ts
@@ -0,0 +1,7 @@
+import { mount } from 'svelte';
+import App from './App.svelte';
+import './app.css';
+
+const app = mount(App, { target: document.getElementById('app')! });
+
+export default app;
diff --git a/examples/advanced/headless-toolbar/svelte-shadcn/svelte.config.js b/examples/advanced/headless-toolbar/svelte-shadcn/svelte.config.js
new file mode 100644
index 0000000000..4c6b24b107
--- /dev/null
+++ b/examples/advanced/headless-toolbar/svelte-shadcn/svelte.config.js
@@ -0,0 +1,5 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+export default {
+  preprocess: vitePreprocess(),
+};
diff --git a/examples/advanced/headless-toolbar/svelte-shadcn/tsconfig.json b/examples/advanced/headless-toolbar/svelte-shadcn/tsconfig.json
new file mode 100644
index 0000000000..e12060e637
--- /dev/null
+++ b/examples/advanced/headless-toolbar/svelte-shadcn/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true
+  },
+  "include": ["src/**/*", "src/**/*.svelte"]
+}
diff --git a/examples/advanced/headless-toolbar/svelte-shadcn/vite.config.ts b/examples/advanced/headless-toolbar/svelte-shadcn/vite.config.ts
new file mode 100644
index 0000000000..1826950611
--- /dev/null
+++ b/examples/advanced/headless-toolbar/svelte-shadcn/vite.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+  plugins: [svelte(), tailwindcss()],
+  server: { port: 5190 },
+});
diff --git a/examples/advanced/headless-toolbar/vanilla/index.html b/examples/advanced/headless-toolbar/vanilla/index.html
new file mode 100644
index 0000000000..89246b6922
--- /dev/null
+++ b/examples/advanced/headless-toolbar/vanilla/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SuperDoc - Vanilla Headless Toolbar</title>
+  </head>
+  <body>
+    <div id="toolbar"></div>
+    <div id="editor"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/advanced/headless-toolbar/vanilla/package.json b/examples/advanced/headless-toolbar/vanilla/package.json
new file mode 100644
index 0000000000..bf4906bd76
--- /dev/null
+++ b/examples/advanced/headless-toolbar/vanilla/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "@superdoc-examples/headless-toolbar-vanilla",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --noEmit && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "superdoc": "../../../../packages/superdoc",
+    "lucide": "^0.468.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0"
+  }
+}
diff --git a/examples/advanced/headless-toolbar/vanilla/public/test_file.docx b/examples/advanced/headless-toolbar/vanilla/public/test_file.docx
new file mode 100644
index 0000000000..b1b8c8f5a7
Binary files /dev/null and b/examples/advanced/headless-toolbar/vanilla/public/test_file.docx differ
diff --git a/examples/advanced/headless-toolbar/vanilla/src/main.ts b/examples/advanced/headless-toolbar/vanilla/src/main.ts
new file mode 100644
index 0000000000..ca4210643c
--- /dev/null
+++ b/examples/advanced/headless-toolbar/vanilla/src/main.ts
@@ -0,0 +1,185 @@
+import { SuperDoc } from 'superdoc';
+import {
+  createHeadlessToolbar,
+  headlessToolbarConstants,
+  type HeadlessToolbarController,
+  type ToolbarSnapshot,
+  type PublicToolbarItemId,
+} from 'superdoc/headless-toolbar';
+import 'superdoc/style.css';
+import './style.css';
+import {
+  Bold, Italic, Underline, Strikethrough,
+  AlignLeft, AlignCenter, AlignRight, AlignJustify,
+  Undo2, Redo2, Image,
+  createElement,
+} from 'lucide';
+
+// --- Icon helpers ---
+
+const ALIGN_ICONS: Record<string, Parameters<typeof createElement>[0]> = {
+  left: AlignLeft, center: AlignCenter, right: AlignRight, justify: AlignJustify,
+};
+
+function icon(node: Parameters<typeof createElement>[0]): SVGElement {
+  return createElement(node) as unknown as SVGElement;
+}
+
+// --- DOM helpers ---
+
+const $ = (sel: string) => document.querySelector(sel)!;
+
+function btn(id: string, child: Node): HTMLButtonElement {
+  const el = document.createElement('button');
+  el.dataset.cmd = id;
+  el.type = 'button';
+  el.appendChild(child);
+  return el;
+}
+
+function sep(): HTMLDivElement {
+  const el = document.createElement('div');
+  el.className = 'separator';
+  return el;
+}
+
+function select(id: string, options: readonly { label: string; value: string }[]): HTMLSelectElement {
+  const el = document.createElement('select');
+  el.dataset.cmd = id;
+  for (const opt of options) {
+    const o = document.createElement('option');
+    o.value = opt.value;
+    o.textContent = opt.label;
+    el.appendChild(o);
+  }
+  return el;
+}
+
+// --- Build toolbar DOM ---
+
+function buildToolbar(container: HTMLElement) {
+  const { DEFAULT_FONT_FAMILY_OPTIONS, DEFAULT_FONT_SIZE_OPTIONS, DEFAULT_TEXT_COLOR_OPTIONS } = headlessToolbarConstants;
+
+  // Undo / Redo
+  container.append(
+    btn('undo', icon(Undo2)),
+    btn('redo', icon(Redo2)),
+    sep(),
+  );
+
+  // Font family & size
+  container.append(
+    select('font-family', DEFAULT_FONT_FAMILY_OPTIONS),
+    select('font-size', DEFAULT_FONT_SIZE_OPTIONS.map(o => ({ label: o.label, value: o.value }))),
+    sep(),
+  );
+
+  // Inline formatting
+  container.append(
+    btn('bold', icon(Bold)),
+    btn('italic', icon(Italic)),
+    btn('underline', icon(Underline)),
+    btn('strikethrough', icon(Strikethrough)),
+    sep(),
+  );
+
+  // Text color
+  container.append(
+    select('text-color', DEFAULT_TEXT_COLOR_OPTIONS.map(o => ({ label: o.label, value: o.value }))),
+    sep(),
+  );
+
+  // Text align
+  const alignSelect = document.createElement('select');
+  alignSelect.dataset.cmd = 'text-align';
+  for (const opt of headlessToolbarConstants.DEFAULT_TEXT_ALIGN_OPTIONS) {
+    const o = document.createElement('option');
+    o.value = opt.value;
+    o.textContent = opt.label;
+    alignSelect.appendChild(o);
+  }
+  container.append(alignSelect, sep());
+
+  // Image
+  container.append(btn('image', icon(Image)));
+}
+
+// --- Wire events ---
+
+function bindEvents(
+  container: HTMLElement,
+  toolbar: HeadlessToolbarController,
+) {
+  container.addEventListener('click', (e) => {
+    const target = (e.target as HTMLElement).closest<HTMLElement>('button[data-cmd]');
+    if (!target) return;
+    const cmd = target.dataset.cmd as PublicToolbarItemId;
+    toolbar.execute(cmd);
+  });
+
+  container.querySelectorAll<HTMLSelectElement>('select[data-cmd]').forEach((sel) => {
+    sel.addEventListener('change', () => {
+      toolbar.execute(sel.dataset.cmd as PublicToolbarItemId, sel.value);
+    });
+  });
+}
+
+// --- Snapshot sync ---
+
+const TOGGLE_COMMANDS: PublicToolbarItemId[] = [
+  'bold', 'italic', 'underline', 'strikethrough',
+];
+
+function syncUI(container: HTMLElement, snapshot: ToolbarSnapshot) {
+  // Toggle buttons
+  for (const id of TOGGLE_COMMANDS) {
+    const el = container.querySelector<HTMLButtonElement>(`button[data-cmd="${id}"]`);
+    if (!el) continue;
+    const state = snapshot.commands[id];
+    el.classList.toggle('active', state?.active ?? false);
+    el.disabled = state?.disabled ?? true;
+  }
+
+  // Non-toggle buttons
+  for (const id of ['undo', 'redo', 'image'] as PublicToolbarItemId[]) {
+    const el = container.querySelector<HTMLButtonElement>(`button[data-cmd="${id}"]`);
+    if (!el) continue;
+    el.disabled = snapshot.commands[id]?.disabled ?? true;
+  }
+
+  // Selects
+  for (const id of ['font-family', 'font-size', 'text-color', 'text-align'] as PublicToolbarItemId[]) {
+    const sel = container.querySelector<HTMLSelectElement>(`select[data-cmd="${id}"]`);
+    if (!sel) continue;
+    const state = snapshot.commands[id];
+    sel.disabled = state?.disabled ?? true;
+    if (state?.value != null) {
+      const val = String(state.value);
+      // Only set if the value matches an existing option
+      const hasOption = Array.from(sel.options).some((o) => o.value === val);
+      if (hasOption) sel.value = val;
+    }
+  }
+}
+
+// --- Bootstrap ---
+
+const superdoc = new SuperDoc({
+  selector: '#editor',
+  document: '/test_file.docx',
+});
+
+const toolbarEl = $('#toolbar') as HTMLElement;
+buildToolbar(toolbarEl);
+
+const toolbar = createHeadlessToolbar({
+  superdoc: superdoc as any,
+  commands: [
+    'bold', 'italic', 'underline', 'strikethrough',
+    'font-family', 'font-size', 'text-color',
+    'text-align', 'undo', 'redo', 'image',
+  ],
+});
+
+bindEvents(toolbarEl, toolbar);
+toolbar.subscribe(({ snapshot }) => syncUI(toolbarEl, snapshot));
diff --git a/examples/advanced/headless-toolbar/vanilla/src/style.css b/examples/advanced/headless-toolbar/vanilla/src/style.css
new file mode 100644
index 0000000000..12751238e9
--- /dev/null
+++ b/examples/advanced/headless-toolbar/vanilla/src/style.css
@@ -0,0 +1,129 @@
+:root {
+  --toolbar-bg: #ffffff;
+  --toolbar-border: #e2e8f0;
+  --toolbar-height: 44px;
+  --btn-size: 32px;
+  --btn-radius: 6px;
+  --btn-hover: #f1f5f9;
+  --btn-active: #e2e8f0;
+  --btn-disabled: #94a3b8;
+  --select-bg: #f8fafc;
+  --select-border: #cbd5e1;
+  --separator-color: #e2e8f0;
+  --color-swatch-size: 14px;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body {
+  height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: #f1f5f9;
+}
+
+#toolbar {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  height: var(--toolbar-height);
+  padding: 0 8px;
+  background: var(--toolbar-bg);
+  border-bottom: 1px solid var(--toolbar-border);
+}
+
+#toolbar .separator {
+  width: 1px;
+  height: 20px;
+  margin: 0 4px;
+  background: var(--separator-color);
+}
+
+#toolbar button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--btn-size);
+  height: var(--btn-size);
+  border: none;
+  border-radius: var(--btn-radius);
+  background: transparent;
+  color: #334155;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+#toolbar button:hover:not(:disabled) {
+  background: var(--btn-hover);
+}
+
+#toolbar button.active {
+  background: var(--btn-active);
+  color: #0f172a;
+}
+
+#toolbar button:disabled {
+  color: var(--btn-disabled);
+  cursor: default;
+}
+
+#toolbar button svg {
+  width: 16px;
+  height: 16px;
+}
+
+#toolbar select {
+  height: var(--btn-size);
+  padding: 0 8px;
+  border: 1px solid var(--select-border);
+  border-radius: var(--btn-radius);
+  background: var(--select-bg);
+  color: #334155;
+  font-size: 13px;
+  cursor: pointer;
+  outline: none;
+}
+
+#toolbar select:focus {
+  border-color: #3b82f6;
+}
+
+#toolbar select:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+#toolbar .color-btn {
+  position: relative;
+}
+
+#toolbar .color-swatch {
+  position: absolute;
+  bottom: 3px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: var(--color-swatch-size);
+  height: 3px;
+  border-radius: 1px;
+  background: currentColor;
+}
+
+#toolbar .color-input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+
+#editor {
+  height: calc(100% - var(--toolbar-height));
+  overflow: auto;
+}
diff --git a/examples/advanced/headless-toolbar/vanilla/tsconfig.json b/examples/advanced/headless-toolbar/vanilla/tsconfig.json
new file mode 100644
index 0000000000..12443a630b
--- /dev/null
+++ b/examples/advanced/headless-toolbar/vanilla/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}
diff --git a/examples/advanced/headless-toolbar/vanilla/vite.config.ts b/examples/advanced/headless-toolbar/vanilla/vite.config.ts
new file mode 100644
index 0000000000..c049f46e10
--- /dev/null
+++ b/examples/advanced/headless-toolbar/vanilla/vite.config.ts
@@ -0,0 +1,3 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({});
diff --git a/examples/advanced/headless-toolbar/vue-vuetify/index.html b/examples/advanced/headless-toolbar/vue-vuetify/index.html
new file mode 100644
index 0000000000..af38bf2a47
--- /dev/null
+++ b/examples/advanced/headless-toolbar/vue-vuetify/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SuperDoc - Vue + Vuetify Headless Toolbar</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/advanced/headless-toolbar/vue-vuetify/package.json b/examples/advanced/headless-toolbar/vue-vuetify/package.json
new file mode 100644
index 0000000000..5b2f45d5ea
--- /dev/null
+++ b/examples/advanced/headless-toolbar/vue-vuetify/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "@superdoc-examples/headless-toolbar-vue-vuetify",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "superdoc": "../../../../packages/superdoc",
+    "vue": "^3.5.13",
+    "vuetify": "^3.7.6",
+    "@mdi/font": "^7.4.47"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0",
+    "vue-tsc": "^2.2.0"
+  }
+}
diff --git a/examples/advanced/headless-toolbar/vue-vuetify/public/test_file.docx b/examples/advanced/headless-toolbar/vue-vuetify/public/test_file.docx
new file mode 100644
index 0000000000..b1b8c8f5a7
Binary files /dev/null and b/examples/advanced/headless-toolbar/vue-vuetify/public/test_file.docx differ
diff --git a/examples/advanced/headless-toolbar/vue-vuetify/src/App.vue b/examples/advanced/headless-toolbar/vue-vuetify/src/App.vue
new file mode 100644
index 0000000000..56c712a5e6
--- /dev/null
+++ b/examples/advanced/headless-toolbar/vue-vuetify/src/App.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, shallowRef } from 'vue';
+import { SuperDoc } from 'superdoc';
+import {
+  createHeadlessToolbar,
+  type HeadlessToolbarController,
+  type ToolbarSnapshot,
+} from 'superdoc/headless-toolbar';
+import 'superdoc/style.css';
+import Toolbar from './Toolbar.vue';
+
+const editorRef = ref<HTMLElement | null>(null);
+let superdoc: InstanceType<typeof SuperDoc> | null = null;
+let toolbar: HeadlessToolbarController | null = null;
+
+const snapshot = shallowRef<ToolbarSnapshot>({ context: null, commands: {} });
+
+function execute(id: string, payload?: unknown) {
+  toolbar?.execute(id as any, payload);
+}
+
+onMounted(() => {
+  if (!editorRef.value) return;
+
+  superdoc = new SuperDoc({
+    selector: editorRef.value,
+    document: '/test_file.docx',
+  });
+
+  toolbar = createHeadlessToolbar({
+    superdoc: superdoc as any,
+    commands: [
+      'bold', 'italic', 'underline', 'strikethrough',
+      'font-family', 'font-size', 'text-color',
+      'text-align', 'line-height',
+      'bullet-list', 'numbered-list',
+      'indent-increase', 'indent-decrease',
+      'undo', 'redo', 'zoom', 'image',
+      'clear-formatting',
+    ],
+  });
+
+  snapshot.value = toolbar.getSnapshot();
+  toolbar.subscribe(({ snapshot: s }) => {
+    snapshot.value = s;
+  });
+});
+
+onUnmounted(() => {
+  toolbar?.destroy();
+  superdoc?.destroy();
+});
+</script>
+
+<template>
+  <v-app>
+    <Toolbar :snapshot="snapshot" @execute="execute" />
+    <v-main>
+      <div ref="editorRef" class="editor-container" />
+    </v-main>
+  </v-app>
+</template>
+
+<style>
+html, body, #app {
+  margin: 0;
+  height: 100%;
+}
+
+.v-application {
+  height: 100%;
+}
+
+.v-main {
+  height: 100%;
+  overflow: auto;
+}
+
+.editor-container {
+  height: 100%;
+}
+</style>
diff --git a/examples/advanced/headless-toolbar/vue-vuetify/src/Toolbar.vue b/examples/advanced/headless-toolbar/vue-vuetify/src/Toolbar.vue
new file mode 100644
index 0000000000..dde738eff7
--- /dev/null
+++ b/examples/advanced/headless-toolbar/vue-vuetify/src/Toolbar.vue
@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import {
+  headlessToolbarConstants,
+  type ToolbarSnapshot,
+} from 'superdoc/headless-toolbar';
+
+const props = defineProps<{ snapshot: ToolbarSnapshot }>();
+const emit = defineEmits<{ execute: [id: string, payload?: unknown] }>();
+
+const cmd = computed(() => props.snapshot.commands);
+
+const fontFamilies = headlessToolbarConstants.DEFAULT_FONT_FAMILY_OPTIONS.map(
+  (o) => ({ title: o.label, value: o.value }),
+);
+const fontSizes = headlessToolbarConstants.DEFAULT_FONT_SIZE_OPTIONS.map(
+  (o) => ({ title: o.label, value: o.value }),
+);
+const lineHeights = headlessToolbarConstants.DEFAULT_LINE_HEIGHT_OPTIONS.map(
+  (o) => ({ title: o.label, value: o.value }),
+);
+const zoomLevels = headlessToolbarConstants.DEFAULT_ZOOM_OPTIONS.map(
+  (o) => ({ title: o.label, value: o.value }),
+);
+
+const currentFontFamily = computed({
+  get: () => (cmd.value['font-family']?.value as string) ?? '',
+  set: (v: string) => emit('execute', 'font-family', v),
+});
+const currentFontSize = computed({
+  get: () => (cmd.value['font-size']?.value as string) ?? '',
+  set: (v: string) => emit('execute', 'font-size', v),
+});
+const currentLineHeight = computed({
+  get: () => (cmd.value['line-height']?.value as number) ?? 1.15,
+  set: (v: number) => emit('execute', 'line-height', v),
+});
+const currentZoom = computed({
+  get: () => (cmd.value['zoom']?.value as number) ?? 100,
+  set: (v: number) => emit('execute', 'zoom', v),
+});
+const currentAlign = computed(() => (cmd.value['text-align']?.value as string) ?? 'left');
+
+const exec = (id: string, payload?: unknown) => emit('execute', id, payload);
+</script>
+
+<template>
+  <v-navigation-drawer permanent :width="260" color="grey-lighten-5">
+    <div class="pa-3">
+      <!-- History -->
+      <div class="d-flex ga-1 mb-3">
+        <v-btn icon="mdi-undo" size="small" variant="text" :disabled="cmd['undo']?.disabled" @click="exec('undo')" />
+        <v-btn icon="mdi-redo" size="small" variant="text" :disabled="cmd['redo']?.disabled" @click="exec('redo')" />
+        <v-spacer />
+        <v-btn icon="mdi-format-clear" size="x-small" variant="text" title="Clear formatting" @click="exec('clear-formatting')" />
+      </div>
+
+      <!-- Font -->
+      <div class="section-label">Font</div>
+      <v-select
+        :model-value="currentFontFamily"
+        @update:model-value="currentFontFamily = $event"
+        :items="fontFamilies"
+        density="compact"
+        variant="outlined"
+        hide-details
+        class="mb-2"
+      />
+      <div class="d-flex ga-2 align-center mb-3">
+        <v-select
+          :model-value="currentFontSize"
+          @update:model-value="currentFontSize = $event"
+          :items="fontSizes"
+          density="compact"
+          variant="outlined"
+          hide-details
+          style="max-width: 100px"
+        />
+        <input
+          type="color"
+          :value="(cmd['text-color']?.value as string) ?? '#000000'"
+          @input="exec('text-color', ($event.target as HTMLInputElement).value)"
+          class="color-input"
+          title="Text color"
+        />
+      </div>
+
+      <!-- Format -->
+      <div class="section-label">Format</div>
+      <div class="d-flex ga-1 mb-3">
+        <v-btn icon="mdi-format-bold" size="small" :variant="cmd['bold']?.active ? 'tonal' : 'text'" @click="exec('bold')" />
+        <v-btn icon="mdi-format-italic" size="small" :variant="cmd['italic']?.active ? 'tonal' : 'text'" @click="exec('italic')" />
+        <v-btn icon="mdi-format-underline" size="small" :variant="cmd['underline']?.active ? 'tonal' : 'text'" @click="exec('underline')" />
+        <v-btn icon="mdi-format-strikethrough-variant" size="small" :variant="cmd['strikethrough']?.active ? 'tonal' : 'text'" @click="exec('strikethrough')" />
+      </div>
+
+      <!-- Alignment + spacing -->
+      <div class="section-label">Paragraph</div>
+      <div class="d-flex ga-1 mb-2">
+        <v-btn
+          v-for="opt in headlessToolbarConstants.DEFAULT_TEXT_ALIGN_OPTIONS"
+          :key="opt.value"
+          :icon="'mdi-format-align-' + opt.value"
+          size="small"
+          :variant="currentAlign === opt.value ? 'tonal' : 'text'"
+          @click="exec('text-align', opt.value)"
+        />
+      </div>
+      <v-select
+        :model-value="currentLineHeight"
+        @update:model-value="currentLineHeight = $event"
+        :items="lineHeights"
+        label="Line height"
+        density="compact"
+        variant="outlined"
+        hide-details
+        class="mb-3"
+      />
+
+      <!-- Lists -->
+      <div class="section-label">Lists</div>
+      <div class="d-flex ga-1 mb-3">
+        <v-btn icon="mdi-format-list-bulleted" size="small" :variant="cmd['bullet-list']?.active ? 'tonal' : 'text'" @click="exec('bullet-list')" />
+        <v-btn icon="mdi-format-list-numbered" size="small" :variant="cmd['numbered-list']?.active ? 'tonal' : 'text'" @click="exec('numbered-list')" />
+        <v-btn icon="mdi-format-indent-increase" size="small" variant="text" @click="exec('indent-increase')" />
+        <v-btn icon="mdi-format-indent-decrease" size="small" variant="text" @click="exec('indent-decrease')" />
+      </div>
+
+      <!-- Insert -->
+      <div class="section-label">Insert</div>
+      <v-btn prepend-icon="mdi-image-plus" size="small" variant="text" class="mb-3" @click="exec('image')">
+        Image
+      </v-btn>
+
+      <v-divider class="mb-3" />
+
+      <!-- Zoom -->
+      <v-select
+        :model-value="currentZoom"
+        @update:model-value="currentZoom = $event"
+        :items="zoomLevels"
+        label="Zoom"
+        density="compact"
+        variant="outlined"
+        hide-details
+      />
+    </div>
+  </v-navigation-drawer>
+</template>
+
+<style scoped>
+.section-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: rgba(0, 0, 0, 0.5);
+  margin-bottom: 6px;
+}
+.color-input {
+  width: 32px;
+  height: 32px;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 4px;
+  padding: 2px;
+  cursor: pointer;
+  background: transparent;
+}
+</style>
diff --git a/examples/advanced/headless-toolbar/vue-vuetify/src/main.ts b/examples/advanced/headless-toolbar/vue-vuetify/src/main.ts
new file mode 100644
index 0000000000..f52716d7bd
--- /dev/null
+++ b/examples/advanced/headless-toolbar/vue-vuetify/src/main.ts
@@ -0,0 +1,12 @@
+import { createApp } from 'vue';
+import { createVuetify } from 'vuetify';
+import * as components from 'vuetify/components';
+import * as directives from 'vuetify/directives';
+import 'vuetify/styles';
+import '@mdi/font/css/materialdesignicons.css';
+import App from './App.vue';
+
+const vuetify = createVuetify({ components, directives });
+const app = createApp(App);
+app.use(vuetify);
+app.mount('#app');
diff --git a/examples/advanced/headless-toolbar/vue-vuetify/tsconfig.json b/examples/advanced/headless-toolbar/vue-vuetify/tsconfig.json
new file mode 100644
index 0000000000..d0aa09c3c2
--- /dev/null
+++ b/examples/advanced/headless-toolbar/vue-vuetify/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "jsx": "preserve",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "paths": {
+      "superdoc": ["../../../../packages/superdoc/src/index.js"],
+      "superdoc/*": ["../../../../packages/superdoc/src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue"]
+}
diff --git a/examples/advanced/headless-toolbar/vite.config.ts b/examples/advanced/headless-toolbar/vue-vuetify/vite.config.ts
similarity index 72%
rename from examples/advanced/headless-toolbar/vite.config.ts
rename to examples/advanced/headless-toolbar/vue-vuetify/vite.config.ts
index 1ebc4fc7dd..b1b7f97ffd 100644
--- a/examples/advanced/headless-toolbar/vite.config.ts
+++ b/examples/advanced/headless-toolbar/vue-vuetify/vite.config.ts
@@ -3,4 +3,7 @@ import vue from '@vitejs/plugin-vue';
 
 export default defineConfig({
   plugins: [vue()],
+  optimizeDeps: {
+    include: ['vuetify'],
+  },
 });
diff --git a/packages/super-editor/package.json b/packages/super-editor/package.json
index 107ff6a03e..5b62fa1f40 100644
--- a/packages/super-editor/package.json
+++ b/packages/super-editor/package.json
@@ -51,6 +51,16 @@
       "source": "./src/editors/v1/components/toolbar/Toolbar.vue",
       "import": "./dist/toolbar.es.js"
     },
+    "./headless-toolbar/react": {
+      "source": "./src/headless-toolbar/react.ts",
+      "types": "./dist/src/headless-toolbar/react.d.ts",
+      "import": "./dist/headless-toolbar-react.es.js"
+    },
+    "./headless-toolbar/vue": {
+      "source": "./src/headless-toolbar/vue.ts",
+      "types": "./dist/src/headless-toolbar/vue.d.ts",
+      "import": "./dist/headless-toolbar-vue.es.js"
+    },
     "./super-input": {
       "source": "./src/editors/v1/components/SuperInput.vue",
       "import": "./dist/super-input.es.js"
diff --git a/packages/super-editor/src/headless-toolbar/README.md b/packages/super-editor/src/headless-toolbar/README.md
index e5ad0c22af..c4cc83b906 100644
--- a/packages/super-editor/src/headless-toolbar/README.md
+++ b/packages/super-editor/src/headless-toolbar/README.md
@@ -8,15 +8,20 @@ It provides:
 
 - toolbar state via `ToolbarSnapshot`
 - normalized active editing context
-- direct access to editor commands and document primitives
-- optional built-in `execute()` for built-in toolbar semantics
+- `execute()` for running toolbar commands with built-in semantics
 - helper utilities for linked styles and image upload flows
 
 ## Quick start
 
 ```ts
+import { SuperDoc } from 'superdoc';
 import { createHeadlessToolbar } from 'superdoc/headless-toolbar';
 
+const superdoc = new SuperDoc({
+  selector: '#editor',
+  document: '/my-document.docx',
+});
+
 const toolbar = createHeadlessToolbar({
   superdoc,
   commands: ['bold', 'italic', 'underline', 'font-size', 'link', 'undo', 'redo'],
@@ -26,49 +31,100 @@ const unsubscribe = toolbar.subscribe(({ snapshot }) => {
   renderToolbar(snapshot);
 });
 
-toolbar.execute?.('bold');
+toolbar.execute('bold');
 
 toolbar.destroy();
 unsubscribe();
 ```
 
+> Don't pass `toolbar` to the SuperDoc constructor. The headless toolbar replaces the built-in UI entirely.
+
 `snapshot` contains:
 
 - `context` for the current active editing target
-- `commands` for built-in command UI state
-
-## How actions are executed
+- `commands` for built-in command UI state (`active`, `disabled`, `value`)
 
-- Use `snapshot.commands` for UI state such as `active`, `disabled`, and `value`
-- Use `snapshot.context?.target.commands.*` for direct command execution
-- Use `toolbar.execute(id, payload?)` for built-in toolbar semantics
+## Executing commands
 
-Example:
+Use `toolbar.execute(id, payload?)` for all toolbar actions:
 
 ```ts
-toolbar.execute?.('bold');
-snapshot.context?.target.commands?.setTextAlign?.('center');
+toolbar.execute('bold');
+toolbar.execute('font-size', '14pt');
+toolbar.execute('text-color', '#ff0000');
+toolbar.execute('zoom', 125);
 ```
 
-## Helpers
-
-`headlessToolbarConstants` provides default option lists for common controls such as:
+For commands not covered by `execute()`, you can use `snapshot.context?.target.commands.*` as an escape hatch for direct access to the editor command surface.
+
+## Command reference
+
+| Command | Payload | `value` in snapshot |
+|---------|---------|---------------------|
+| `bold` | none | — |
+| `italic` | none | — |
+| `underline` | none | — |
+| `strikethrough` | none | — |
+| `font-size` | size string, e.g. `'12pt'` | size string with unit, e.g. `'12pt'` |
+| `font-family` | CSS font family, e.g. `'Arial, sans-serif'` | full CSS font family, e.g. `'Arial, sans-serif'` |
+| `text-color` | hex string, e.g. `'#ff0000'`, or `'none'` | lowercase hex string, e.g. `'#ff0000'` |
+| `highlight-color` | hex string or `'none'` | lowercase hex string, e.g. `'#ffff00'` |
+| `link` | `{ href: string \| null }` | href string or `null` |
+| `text-align` | `'left'` \| `'center'` \| `'right'` \| `'justify'` | current alignment string |
+| `line-height` | number, e.g. `1.5` | current line height number |
+| `linked-style` | style object from `getQuickFormatList()` | style ID string |
+| `bullet-list` | none | — |
+| `numbered-list` | none | — |
+| `indent-increase` | none | — |
+| `indent-decrease` | none | — |
+| `undo` | none | — |
+| `redo` | none | — |
+| `ruler` | none | — |
+| `zoom` | number, e.g. `125` | current zoom number |
+| `document-mode` | `'editing'` \| `'suggesting'` \| `'viewing'` | current mode string |
+| `clear-formatting` | none | — |
+| `copy-format` | none | — |
+| `track-changes-accept-selection` | none | — |
+| `track-changes-reject-selection` | none | — |
+| `image` | none (opens file picker) | — |
+| `table-insert` | `{ rows: number, cols: number }` | — |
+| `table-add-row-before` | none | — |
+| `table-add-row-after` | none | — |
+| `table-delete-row` | none | — |
+| `table-add-column-before` | none | — |
+| `table-add-column-after` | none | — |
+| `table-delete-column` | none | — |
+| `table-delete` | none | — |
+| `table-merge-cells` | none | — |
+| `table-split-cell` | none | — |
+| `table-remove-borders` | none | — |
+| `table-fix` | none | — |
+
+## Constants
+
+`headlessToolbarConstants` provides default option lists for common controls:
+
+- `DEFAULT_FONT_FAMILY_OPTIONS`
+- `DEFAULT_FONT_SIZE_OPTIONS`
+- `DEFAULT_TEXT_ALIGN_OPTIONS`
+- `DEFAULT_LINE_HEIGHT_OPTIONS`
+- `DEFAULT_ZOOM_OPTIONS`
+- `DEFAULT_DOCUMENT_MODE_OPTIONS`
+- `DEFAULT_TEXT_COLOR_OPTIONS`
+- `DEFAULT_HIGHLIGHT_COLOR_OPTIONS`
+
+Each option has `{ label: string, value: string | number }`. Use `value` when calling `execute()`.
 
-- font family
-- font size
-- text align
-- line height
-- zoom
-- document mode
+## Helpers
 
 `headlessToolbarHelpers` provides utilities for richer consumer-owned flows:
 
 - linked styles:
-  - `getQuickFormatList(editor)`
-  - `generateLinkedStyleString(...)`
+  - `getQuickFormatList(editor)` — returns available paragraph styles
+  - `generateLinkedStyleString(...)` — returns inline CSS for style preview
 - image flow:
-  - `getFileOpener()`
-  - `processAndInsertImageFile(...)`
+  - `getFileOpener()` — returns a function that opens a file picker
+  - `processAndInsertImageFile(...)` — processes and inserts an image file
 
 ## Reference
 
diff --git a/packages/super-editor/src/headless-toolbar/constants.ts b/packages/super-editor/src/headless-toolbar/constants.ts
index 8b1b42c162..c356f0d00c 100644
--- a/packages/super-editor/src/headless-toolbar/constants.ts
+++ b/packages/super-editor/src/headless-toolbar/constants.ts
@@ -60,13 +60,40 @@ export const DEFAULT_FONT_SIZE_OPTIONS = [
 ] as const;
 
 export const DEFAULT_FONT_FAMILY_OPTIONS = [
-  { label: 'Aptos', value: 'Aptos' },
+  { label: 'Aptos', value: 'Aptos, Arial, sans-serif' },
   { label: 'Georgia', value: 'Georgia, serif' },
   { label: 'Arial', value: 'Arial, sans-serif' },
   { label: 'Courier New', value: 'Courier New, monospace' },
   { label: 'Times New Roman', value: 'Times New Roman, serif' },
 ] as const;
 
+export const DEFAULT_TEXT_COLOR_OPTIONS = [
+  { label: 'Black', value: '#000000' },
+  { label: 'Dark Gray', value: '#434343' },
+  { label: 'Gray', value: '#666666' },
+  { label: 'Light Gray', value: '#999999' },
+  { label: 'Red', value: '#ff0000' },
+  { label: 'Orange', value: '#ff9900' },
+  { label: 'Yellow', value: '#ffff00' },
+  { label: 'Green', value: '#00ff00' },
+  { label: 'Cyan', value: '#00ffff' },
+  { label: 'Blue', value: '#0000ff' },
+  { label: 'Purple', value: '#9900ff' },
+  { label: 'Magenta', value: '#ff00ff' },
+  { label: 'None', value: 'none' },
+] as const;
+
+export const DEFAULT_HIGHLIGHT_COLOR_OPTIONS = [
+  { label: 'Yellow', value: '#ffff00' },
+  { label: 'Green', value: '#00ff00' },
+  { label: 'Cyan', value: '#00ffff' },
+  { label: 'Pink', value: '#ff00ff' },
+  { label: 'Blue', value: '#0000ff' },
+  { label: 'Red', value: '#ff0000' },
+  { label: 'Orange', value: '#ff9900' },
+  { label: 'None', value: 'none' },
+] as const;
+
 export const headlessToolbarConstants = {
   DEFAULT_TEXT_ALIGN_OPTIONS,
   DEFAULT_LINE_HEIGHT_OPTIONS,
@@ -74,4 +101,6 @@ export const headlessToolbarConstants = {
   DEFAULT_DOCUMENT_MODE_OPTIONS,
   DEFAULT_FONT_SIZE_OPTIONS,
   DEFAULT_FONT_FAMILY_OPTIONS,
+  DEFAULT_TEXT_COLOR_OPTIONS,
+  DEFAULT_HIGHLIGHT_COLOR_OPTIONS,
 } as const;
diff --git a/packages/super-editor/src/headless-toolbar/create-headless-toolbar.ts b/packages/super-editor/src/headless-toolbar/create-headless-toolbar.ts
index 0c86ebe643..5abca58d52 100644
--- a/packages/super-editor/src/headless-toolbar/create-headless-toolbar.ts
+++ b/packages/super-editor/src/headless-toolbar/create-headless-toolbar.ts
@@ -106,8 +106,12 @@ export const createHeadlessToolbar = (options: CreateHeadlessToolbarOptions): He
       };
     },
 
-    execute(id, payload) {
-      return executeRegistryCommand(id, options.superdoc, snapshot, toolbarRegistry, payload);
+    execute(id: PublicToolbarItemId, payload?: unknown) {
+      const result = executeRegistryCommand(id, options.superdoc, snapshot, toolbarRegistry, payload);
+      if (result && !destroyed) {
+        refreshControllerState();
+      }
+      return result;
     },
 
     destroy() {
@@ -117,5 +121,5 @@ export const createHeadlessToolbar = (options: CreateHeadlessToolbarOptions): He
       unsubscribeEvents = null;
       listeners.clear();
     },
-  };
+  } as HeadlessToolbarController;
 };
diff --git a/packages/super-editor/src/headless-toolbar/create-toolbar-snapshot.ts b/packages/super-editor/src/headless-toolbar/create-toolbar-snapshot.ts
index 98cc5b7acf..57f068ede9 100644
--- a/packages/super-editor/src/headless-toolbar/create-toolbar-snapshot.ts
+++ b/packages/super-editor/src/headless-toolbar/create-toolbar-snapshot.ts
@@ -4,7 +4,7 @@ import type {
   CreateHeadlessToolbarOptions,
   HeadlessToolbarSuperdocHost,
   PublicToolbarItemId,
-  ToolbarCommandState,
+  ToolbarCommandStates,
   ToolbarSnapshot,
 } from './types.js';
 
@@ -18,7 +18,7 @@ const buildCommandStateMap = ({
   superdoc: HeadlessToolbarSuperdocHost;
   context: ToolbarSnapshot['context'];
   toolbarRegistry: Partial<Record<PublicToolbarItemId, BuiltInToolbarRegistryEntry>>;
-}): Partial<Record<PublicToolbarItemId, ToolbarCommandState>> => {
+}): ToolbarCommandStates => {
   const entries = commands.map((command) => {
     const entry = toolbarRegistry[command];
 
@@ -35,7 +35,7 @@ const buildCommandStateMap = ({
     return [command, entry.state({ context, superdoc })] as const;
   });
 
-  return Object.fromEntries(entries);
+  return Object.fromEntries(entries) as ToolbarCommandStates;
 };
 
 export const createToolbarSnapshot = ({
diff --git a/packages/super-editor/src/headless-toolbar/helpers/document.ts b/packages/super-editor/src/headless-toolbar/helpers/document.ts
index bda94eb130..f504d0d7d4 100644
--- a/packages/super-editor/src/headless-toolbar/helpers/document.ts
+++ b/packages/super-editor/src/headless-toolbar/helpers/document.ts
@@ -1,10 +1,11 @@
 import { undoDepth, redoDepth } from 'prosemirror-history';
 import { yUndoPluginKey } from 'y-prosemirror';
 import { isCommandDisabled } from './general.js';
+import { resolveStateEditor } from './context.js';
 import type { ToolbarCommandState, ToolbarContext } from '../types.js';
 
 export const getCurrentUndoDepth = (context: ToolbarContext | null) => {
-  const stateEditor = context?.presentationEditor?.editor ?? context?.editor ?? null;
+  const stateEditor = resolveStateEditor(context);
 
   if (!stateEditor?.state) {
     return 0;
@@ -23,7 +24,7 @@ export const getCurrentUndoDepth = (context: ToolbarContext | null) => {
 };
 
 export const getCurrentRedoDepth = (context: ToolbarContext | null) => {
-  const stateEditor = context?.presentationEditor?.editor ?? context?.editor ?? null;
+  const stateEditor = resolveStateEditor(context);
 
   if (!stateEditor?.state) {
     return 0;
diff --git a/packages/super-editor/src/headless-toolbar/helpers/formatting.ts b/packages/super-editor/src/headless-toolbar/helpers/formatting.ts
index c9584b38f5..7c7cba66f5 100644
--- a/packages/super-editor/src/headless-toolbar/helpers/formatting.ts
+++ b/packages/super-editor/src/headless-toolbar/helpers/formatting.ts
@@ -1,6 +1,7 @@
 import { parseSizeUnit } from '../../editors/v1/core/utilities/parseSizeUnit.js';
 import { isNegatedMark } from '../../editors/v1/components/toolbar/format-negation.js';
 import { getActiveFormatting } from '../../editors/v1/core/helpers/getActiveFormatting.js';
+import { getFileOpener, processAndInsertImageFile } from '../../editors/v1/extensions/image/imageHelpers/index.js';
 import { TextSelection, Selection } from 'prosemirror-state';
 import { getCurrentResolvedParagraphProperties, isFieldAnnotationSelection, resolveStateEditor } from './context.js';
 import { createDirectCommandExecute, isCommandDisabled } from './general.js';
@@ -8,13 +9,13 @@ import type { ToolbarContext } from '../types.js';
 
 export const normalizeFontSizeValue = (value: unknown) => {
   if (typeof value === 'number') {
-    return String(value);
+    return `${value}pt`;
   }
 
   if (typeof value === 'string') {
-    const [numericValue] = parseSizeUnit(value);
+    const [numericValue, unit] = parseSizeUnit(value);
     if (!Number.isNaN(numericValue)) {
-      return String(numericValue);
+      return `${numericValue}${unit || 'pt'}`;
     }
   }
 
@@ -26,7 +27,7 @@ export const normalizeFontFamilyValue = (value: unknown) => {
     return value;
   }
 
-  return value.split(',')[0]?.trim() ?? value;
+  return value;
 };
 
 export const normalizeLinkHrefValue = (value: unknown) => {
@@ -34,7 +35,10 @@ export const normalizeLinkHrefValue = (value: unknown) => {
 };
 
 export const normalizeColorValue = (value: unknown) => {
-  return typeof value === 'string' && value.length > 0 ? value : null;
+  if (typeof value === 'string' && value.length > 0) {
+    return value.toLowerCase();
+  }
+  return null;
 };
 
 export const isFormattingActivatedFromLinkedStyle = (
@@ -441,10 +445,8 @@ export const createTextColorExecute =
     const inlineValue = isNone ? 'inherit' : payload;
 
     const result = createDirectCommandExecute('setColor')({ context, payload: inlineValue });
-    if (!result) return false;
-
     editor?.commands?.setFieldAnnotationsTextColor?.(isNone ? null : payload, true);
-    return true;
+    return result;
   };
 
 export const createHighlightColorExecute =
@@ -460,12 +462,10 @@ export const createHighlightColorExecute =
     const inlineValue = isNone ? 'transparent' : payload;
 
     const result = createDirectCommandExecute('setHighlight')({ context, payload: inlineValue });
-    if (!result) return false;
-
     const argValue = isNone ? null : payload;
     editor?.commands?.setFieldAnnotationsTextHighlight?.(argValue, true);
     editor?.commands?.setCellBackground?.(argValue);
-    return true;
+    return result;
   };
 
 const applyLinkPostExecute = (editor: NonNullable<ReturnType<typeof resolveStateEditor>>) => {
@@ -506,3 +506,28 @@ export const createLinkExecute =
     applyLinkPostExecute(editor);
     return true;
   };
+
+export const createImageExecute =
+  () =>
+  ({ context }: { context: ToolbarContext | null; payload?: unknown }) => {
+    const editor = resolveStateEditor(context);
+    if (!editor?.view) return false;
+
+    const open = getFileOpener();
+    open()
+      .then(async (result: any) => {
+        if (!result?.file) return;
+        await processAndInsertImageFile({
+          file: result.file,
+          editor,
+          view: editor.view,
+          editorOptions: editor.options,
+          getMaxContentSize: () => editor.getMaxContentSize(),
+        });
+      })
+      .catch((err: unknown) => {
+        console.error('[headless-toolbar] Image insertion failed:', err);
+      });
+
+    return true;
+  };
diff --git a/packages/super-editor/src/headless-toolbar/helpers/general.ts b/packages/super-editor/src/headless-toolbar/helpers/general.ts
index 663d937485..a0d925f462 100644
--- a/packages/super-editor/src/headless-toolbar/helpers/general.ts
+++ b/packages/super-editor/src/headless-toolbar/helpers/general.ts
@@ -4,7 +4,7 @@ import type { ToolbarCommandState, ToolbarContext } from '../types.js';
 export const isCommandDisabled = (context: ToolbarContext | null) => {
   if (!context || !context.isEditable) return true;
   const editor = context.presentationEditor?.editor ?? context.editor;
-  const documentMode = editor?.options?.documentMode ?? editor?.options?.documentMode;
+  const documentMode = editor?.options?.documentMode;
   return documentMode === 'viewing';
 };
 
diff --git a/packages/super-editor/src/headless-toolbar/index.ts b/packages/super-editor/src/headless-toolbar/index.ts
index c2158325c4..9880470ace 100644
--- a/packages/super-editor/src/headless-toolbar/index.ts
+++ b/packages/super-editor/src/headless-toolbar/index.ts
@@ -20,7 +20,11 @@ export type {
   HeadlessToolbarSuperdocHost,
   PublicToolbarItemId,
   ToolbarCommandState,
+  ToolbarCommandStates,
   ToolbarContext,
+  ToolbarExecuteFn,
+  ToolbarPayloadMap,
   ToolbarSnapshot,
   ToolbarTarget,
+  ToolbarValueMap,
 } from './types.js';
diff --git a/packages/super-editor/src/headless-toolbar/internal-types.ts b/packages/super-editor/src/headless-toolbar/internal-types.ts
index b49db296c3..e024dd9d6c 100644
--- a/packages/super-editor/src/headless-toolbar/internal-types.ts
+++ b/packages/super-editor/src/headless-toolbar/internal-types.ts
@@ -8,12 +8,6 @@ export type ResolvedToolbarSources = {
   context: ToolbarContext | null;
 };
 
-// `direct` uses raw command mapping only.
-// `hybrid` allows either direct command execution or an explicit registry execute adapter.
-// `execute` requires an explicit registry execute adapter.
-// `special` is reserved for items outside the current synchronous execute model.
-export type RegistryMode = 'direct' | 'hybrid' | 'execute' | 'special';
-
 export type RegistryStateDeriver = (params: {
   context: ToolbarContext | null;
   superdoc: HeadlessToolbarSuperdocHost;
@@ -27,7 +21,6 @@ export type RegistryExecutor = (params: {
 
 export type BuiltInToolbarRegistryEntry = {
   id: PublicToolbarItemId;
-  mode: RegistryMode;
   state: RegistryStateDeriver;
   directCommandName?: string;
   execute?: RegistryExecutor;
diff --git a/packages/super-editor/src/headless-toolbar/react.ts b/packages/super-editor/src/headless-toolbar/react.ts
new file mode 100644
index 0000000000..a6c02f1858
--- /dev/null
+++ b/packages/super-editor/src/headless-toolbar/react.ts
@@ -0,0 +1,54 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { createHeadlessToolbar } from './create-headless-toolbar.js';
+import type {
+  CreateHeadlessToolbarOptions,
+  HeadlessToolbarController,
+  PublicToolbarItemId,
+  ToolbarSnapshot,
+} from './types.js';
+
+const EMPTY_SNAPSHOT: ToolbarSnapshot = { context: null, commands: {} };
+
+/**
+ * React hook for the headless toolbar.
+ *
+ * Returns `{ snapshot, execute }` — bind `snapshot` to your UI and call
+ * `execute` from your button handlers. Cleanup is automatic.
+ *
+ * ```tsx
+ * const { snapshot, execute } = useHeadlessToolbar(superdoc, ['bold', 'italic', 'undo', 'redo']);
+ *
+ * <button onClick={() => execute('bold')} data-active={snapshot.commands.bold?.active}>
+ *   Bold
+ * </button>
+ * ```
+ */
+export function useHeadlessToolbar(
+  superdoc: CreateHeadlessToolbarOptions['superdoc'] | null | undefined,
+  commands?: PublicToolbarItemId[],
+) {
+  const [snapshot, setSnapshot] = useState<ToolbarSnapshot>(EMPTY_SNAPSHOT);
+  const controllerRef = useRef<HeadlessToolbarController | null>(null);
+
+  useEffect(() => {
+    if (!superdoc) return;
+
+    const controller = createHeadlessToolbar({ superdoc, commands });
+    controllerRef.current = controller;
+
+    setSnapshot(controller.getSnapshot());
+    const unsub = controller.subscribe(({ snapshot: s }) => setSnapshot(s));
+
+    return () => {
+      unsub();
+      controller.destroy();
+      controllerRef.current = null;
+    };
+  }, [superdoc]);
+
+  const execute = useCallback((id: PublicToolbarItemId, payload?: unknown) => {
+    return controllerRef.current?.execute(id, payload) ?? false;
+  }, []);
+
+  return { snapshot, execute };
+}
diff --git a/packages/super-editor/src/headless-toolbar/subscribe-toolbar-events.ts b/packages/super-editor/src/headless-toolbar/subscribe-toolbar-events.ts
index 9f0fe14cb4..2784bc738b 100644
--- a/packages/super-editor/src/headless-toolbar/subscribe-toolbar-events.ts
+++ b/packages/super-editor/src/headless-toolbar/subscribe-toolbar-events.ts
@@ -8,13 +8,13 @@ const subscribeToSuperdocEvents = (
   if (!superdoc?.on || !superdoc?.off) return null;
 
   superdoc.on('editorCreate', onChange);
-  // superdoc.on('editor-update', onChange);
   superdoc.on('document-mode-change', onChange);
+  superdoc.on('zoomChange', onChange);
 
   return () => {
     superdoc.off?.('editorCreate', onChange);
-    // superdoc.off?.('editor-update', onChange);
     superdoc.off?.('document-mode-change', onChange);
+    superdoc.off?.('zoomChange', onChange);
   };
 };
 
diff --git a/packages/super-editor/src/headless-toolbar/toolbar-registry.test.ts b/packages/super-editor/src/headless-toolbar/toolbar-registry.test.ts
index 3e462739c7..a0a75f3510 100644
--- a/packages/super-editor/src/headless-toolbar/toolbar-registry.test.ts
+++ b/packages/super-editor/src/headless-toolbar/toolbar-registry.test.ts
@@ -141,7 +141,7 @@ describe('createToolbarRegistry', () => {
     });
   });
 
-  it('normalizes font-size value to a unitless string', () => {
+  it('preserves font-size value with unit', () => {
     getActiveFormattingMock.mockReturnValueOnce([{ name: 'fontSize', attrs: { fontSize: '12pt' } }]);
 
     const registry = createToolbarRegistry();
@@ -153,7 +153,7 @@ describe('createToolbarRegistry', () => {
     expect(state).toEqual({
       active: true,
       disabled: false,
-      value: '12',
+      value: '12pt',
     });
   });
 
@@ -209,11 +209,11 @@ describe('createToolbarRegistry', () => {
     expect(state).toEqual({
       active: true,
       disabled: false,
-      value: '14',
+      value: '14pt',
     });
   });
 
-  it('normalizes font-family value to the first family name', () => {
+  it('preserves full font-family value including fallbacks', () => {
     getActiveFormattingMock.mockReturnValueOnce([{ name: 'fontFamily', attrs: { fontFamily: 'Arial, sans-serif' } }]);
 
     const registry = createToolbarRegistry();
@@ -225,7 +225,7 @@ describe('createToolbarRegistry', () => {
     expect(state).toEqual({
       active: true,
       disabled: false,
-      value: 'Arial',
+      value: 'Arial, sans-serif',
     });
   });
 
@@ -281,7 +281,7 @@ describe('createToolbarRegistry', () => {
     expect(state).toEqual({
       active: true,
       disabled: false,
-      value: 'Arial',
+      value: 'Arial, sans-serif',
     });
   });
 
diff --git a/packages/super-editor/src/headless-toolbar/toolbar-registry.ts b/packages/super-editor/src/headless-toolbar/toolbar-registry.ts
index 90d2ab01fc..a06a49ef71 100644
--- a/packages/super-editor/src/headless-toolbar/toolbar-registry.ts
+++ b/packages/super-editor/src/headless-toolbar/toolbar-registry.ts
@@ -16,6 +16,7 @@ import {
   createFontSizeStateDeriver,
   createHighlightColorExecute,
   createHighlightColorStateDeriver,
+  createImageExecute,
   createItalicStateDeriver,
   createItalicExecute,
   createLinkExecute,
@@ -45,34 +46,29 @@ export const createToolbarRegistry = (): Partial<Record<PublicToolbarItemId, Bui
     // Inline/text items
     bold: {
       id: 'bold',
-      mode: 'hybrid',
       directCommandName: 'toggleBold',
       state: createBoldStateDeriver(),
       execute: createBoldExecute(),
     },
     italic: {
       id: 'italic',
-      mode: 'hybrid',
       directCommandName: 'toggleItalic',
       state: createItalicStateDeriver(),
       execute: createItalicExecute(),
     },
     underline: {
       id: 'underline',
-      mode: 'hybrid',
       directCommandName: 'toggleUnderline',
       state: createUnderlineStateDeriver(),
       execute: createUnderlineExecute(),
     },
     strikethrough: {
       id: 'strikethrough',
-      mode: 'direct',
       directCommandName: 'toggleStrike',
       state: createStrikethroughStateDeriver(),
     },
     'font-size': {
       id: 'font-size',
-      mode: 'hybrid',
       directCommandName: 'setFontSize',
       // State parity is close to legacy; full item parity still needs sticky/off-focus stored-mark behavior.
       state: createFontSizeStateDeriver(),
@@ -80,7 +76,6 @@ export const createToolbarRegistry = (): Partial<Record<PublicToolbarItemId, Bui
     },
     'font-family': {
       id: 'font-family',
-      mode: 'hybrid',
       directCommandName: 'setFontFamily',
       // Paragraph-font fallback for empty collapsed paragraphs from legacy toolbar is still follow-up work.
       state: createFontFamilyStateDeriver(),
@@ -88,21 +83,18 @@ export const createToolbarRegistry = (): Partial<Record<PublicToolbarItemId, Bui
     },
     'text-color': {
       id: 'text-color',
-      mode: 'hybrid',
       directCommandName: 'setColor',
       state: createTextColorStateDeriver(),
       execute: createTextColorExecute(),
     },
     'highlight-color': {
       id: 'highlight-color',
-      mode: 'hybrid',
       directCommandName: 'setHighlight',
       state: createHighlightColorStateDeriver(),
       execute: createHighlightColorExecute(),
     },
     link: {
       id: 'link',
-      mode: 'hybrid',
       directCommandName: 'toggleLink',
       state: createLinkStateDeriver(),
       execute: createLinkExecute(),
@@ -111,44 +103,37 @@ export const createToolbarRegistry = (): Partial<Record<PublicToolbarItemId, Bui
     // Paragraph/block items
     'text-align': {
       id: 'text-align',
-      mode: 'direct',
       directCommandName: 'setTextAlign',
       state: createTextAlignStateDeriver(),
     },
     'line-height': {
       id: 'line-height',
-      mode: 'direct',
       directCommandName: 'setLineHeight',
       state: createLineHeightStateDeriver(),
     },
     'linked-style': {
       id: 'linked-style',
-      mode: 'hybrid',
       directCommandName: 'setLinkedStyle',
       state: createLinkedStyleStateDeriver(),
       execute: createDirectCommandExecute('setLinkedStyle'),
     },
     'bullet-list': {
       id: 'bullet-list',
-      mode: 'hybrid',
       directCommandName: 'toggleBulletList',
       state: createListStateDeriver('bullet'),
     },
     'numbered-list': {
       id: 'numbered-list',
-      mode: 'hybrid',
       directCommandName: 'toggleOrderedList',
       state: createListStateDeriver('ordered'),
     },
     'indent-increase': {
       id: 'indent-increase',
-      mode: 'execute',
       state: createDisabledStateDeriver(),
       execute: createIndentIncreaseExecute(),
     },
     'indent-decrease': {
       id: 'indent-decrease',
-      mode: 'execute',
       state: createDisabledStateDeriver(),
       execute: createIndentDecreaseExecute(),
     },
@@ -156,31 +141,26 @@ export const createToolbarRegistry = (): Partial<Record<PublicToolbarItemId, Bui
     // History/document-level items
     undo: {
       id: 'undo',
-      mode: 'direct',
       directCommandName: 'undo',
       state: createHistoryStateDeriver('undo'),
     },
     redo: {
       id: 'redo',
-      mode: 'direct',
       directCommandName: 'redo',
       state: createHistoryStateDeriver('redo'),
     },
     ruler: {
       id: 'ruler',
-      mode: 'execute',
       state: createRulerStateDeriver(),
       execute: createRulerExecute(),
     },
     zoom: {
       id: 'zoom',
-      mode: 'execute',
       state: createZoomStateDeriver(),
       execute: createZoomExecute(),
     },
     'document-mode': {
       id: 'document-mode',
-      mode: 'execute',
       state: createDocumentModeStateDeriver(),
       execute: createDocumentModeExecute(),
     },
@@ -188,105 +168,89 @@ export const createToolbarRegistry = (): Partial<Record<PublicToolbarItemId, Bui
     // Utility items
     'clear-formatting': {
       id: 'clear-formatting',
-      mode: 'direct',
       directCommandName: 'clearFormat',
       state: createDisabledStateDeriver(),
     },
     'copy-format': {
       id: 'copy-format',
-      mode: 'direct',
       directCommandName: 'copyFormat',
       state: createDisabledStateDeriver(),
     },
     'track-changes-accept-selection': {
       id: 'track-changes-accept-selection',
-      mode: 'direct',
       directCommandName: 'acceptTrackedChangeFromToolbar',
       state: createTrackChangesSelectionActionStateDeriver('accept'),
     },
     'track-changes-reject-selection': {
       id: 'track-changes-reject-selection',
-      mode: 'direct',
       directCommandName: 'rejectTrackedChangeFromToolbar',
       state: createTrackChangesSelectionActionStateDeriver('reject'),
     },
     image: {
       id: 'image',
-      mode: 'special',
       state: createDisabledStateDeriver(),
+      execute: createImageExecute(),
     },
 
     // Table items
     'table-insert': {
       id: 'table-insert',
-      mode: 'hybrid',
       directCommandName: 'insertTable',
       state: createDisabledStateDeriver(),
       execute: createDirectCommandExecute('insertTable'),
     },
     'table-add-row-before': {
       id: 'table-add-row-before',
-      mode: 'direct',
       directCommandName: 'addRowBefore',
       state: createTableActionsStateDeriver(),
     },
     'table-add-row-after': {
       id: 'table-add-row-after',
-      mode: 'direct',
       directCommandName: 'addRowAfter',
       state: createTableActionsStateDeriver(),
     },
     'table-delete-row': {
       id: 'table-delete-row',
-      mode: 'direct',
       directCommandName: 'deleteRow',
       state: createTableActionsStateDeriver(),
     },
     'table-add-column-before': {
       id: 'table-add-column-before',
-      mode: 'direct',
       directCommandName: 'addColumnBefore',
       state: createTableActionsStateDeriver(),
     },
     'table-add-column-after': {
       id: 'table-add-column-after',
-      mode: 'direct',
       directCommandName: 'addColumnAfter',
       state: createTableActionsStateDeriver(),
     },
     'table-delete-column': {
       id: 'table-delete-column',
-      mode: 'direct',
       directCommandName: 'deleteColumn',
       state: createTableActionsStateDeriver(),
     },
     'table-delete': {
       id: 'table-delete',
-      mode: 'direct',
       directCommandName: 'deleteTable',
       state: createTableActionsStateDeriver(),
     },
     'table-merge-cells': {
       id: 'table-merge-cells',
-      mode: 'direct',
       directCommandName: 'mergeCells',
       state: createTableActionsStateDeriver(),
     },
     'table-split-cell': {
       id: 'table-split-cell',
-      mode: 'direct',
       directCommandName: 'splitCell',
       state: createTableActionsStateDeriver(),
     },
     'table-remove-borders': {
       id: 'table-remove-borders',
-      mode: 'direct',
       directCommandName: 'deleteCellAndTableBorders',
       state: createTableActionsStateDeriver(),
     },
     'table-fix': {
       id: 'table-fix',
-      mode: 'direct',
       directCommandName: 'fixTables',
       state: createTableActionsStateDeriver(),
     },
diff --git a/packages/super-editor/src/headless-toolbar/types.ts b/packages/super-editor/src/headless-toolbar/types.ts
index 9e9a3ba59a..cbb4b22030 100644
--- a/packages/super-editor/src/headless-toolbar/types.ts
+++ b/packages/super-editor/src/headless-toolbar/types.ts
@@ -44,6 +44,96 @@ export type PublicToolbarItemId =
   | 'table-remove-borders'
   | 'table-fix';
 
+/**
+ * Maps each command ID to its execute() payload type.
+ * Commands with `never` take no payload.
+ */
+export type ToolbarPayloadMap = {
+  bold: never;
+  italic: never;
+  underline: never;
+  strikethrough: never;
+  'font-size': string;
+  'font-family': string;
+  'text-color': string;
+  'highlight-color': string;
+  link: { href: string | null };
+  'text-align': 'left' | 'center' | 'right' | 'justify';
+  'line-height': number;
+  'linked-style': Record<string, unknown>;
+  'bullet-list': never;
+  'numbered-list': never;
+  'indent-increase': never;
+  'indent-decrease': never;
+  undo: never;
+  redo: never;
+  ruler: never;
+  zoom: number;
+  'document-mode': 'editing' | 'suggesting' | 'viewing';
+  'clear-formatting': never;
+  'copy-format': never;
+  'track-changes-accept-selection': never;
+  'track-changes-reject-selection': never;
+  image: never;
+  'table-insert': { rows: number; cols: number };
+  'table-add-row-before': never;
+  'table-add-row-after': never;
+  'table-delete-row': never;
+  'table-add-column-before': never;
+  'table-add-column-after': never;
+  'table-delete-column': never;
+  'table-delete': never;
+  'table-merge-cells': never;
+  'table-split-cell': never;
+  'table-remove-borders': never;
+  'table-fix': never;
+};
+
+/**
+ * Maps each command ID to its snapshot value type.
+ * Commands with `undefined` have no value.
+ */
+export type ToolbarValueMap = {
+  bold: undefined;
+  italic: undefined;
+  underline: undefined;
+  strikethrough: undefined;
+  'font-size': string;
+  'font-family': string;
+  'text-color': string | null;
+  'highlight-color': string | null;
+  link: string | null;
+  'text-align': string;
+  'line-height': number;
+  'linked-style': string;
+  'bullet-list': undefined;
+  'numbered-list': undefined;
+  'indent-increase': undefined;
+  'indent-decrease': undefined;
+  undo: undefined;
+  redo: undefined;
+  ruler: undefined;
+  zoom: number;
+  'document-mode': string;
+  'clear-formatting': undefined;
+  'copy-format': undefined;
+  'track-changes-accept-selection': undefined;
+  'track-changes-reject-selection': undefined;
+  image: undefined;
+  'table-insert': undefined;
+  'table-add-row-before': undefined;
+  'table-add-row-after': undefined;
+  'table-delete-row': undefined;
+  'table-add-column-before': undefined;
+  'table-add-column-after': undefined;
+  'table-delete-column': undefined;
+  'table-delete': undefined;
+  'table-merge-cells': undefined;
+  'table-split-cell': undefined;
+  'table-remove-borders': undefined;
+  'table-fix': undefined;
+};
+
 export type ToolbarCommandState = {
   active: boolean;
   disabled: boolean;
@@ -80,9 +170,22 @@ export type ToolbarContext = {
   presentationEditor?: PresentationEditor;
 };
 
+/**
+ * Typed command states — each command ID maps to its specific value type.
+ * Use this instead of `Record<PublicToolbarItemId, ToolbarCommandState>`
+ * for type-safe access to snapshot values.
+ */
+export type ToolbarCommandStates = {
+  [Id in PublicToolbarItemId]?: {
+    active: boolean;
+    disabled: boolean;
+    value?: ToolbarValueMap[Id];
+  };
+};
+
 export type ToolbarSnapshot = {
   context: ToolbarContext | null;
-  commands: Partial<Record<PublicToolbarItemId, ToolbarCommandState>>;
+  commands: ToolbarCommandStates;
 };
 
 // Object wrapper keeps the subscription payload extensible.
@@ -92,15 +195,22 @@ export type ToolbarSubscriptionEvent = {
 
 /**
  * Public controller contract.
- * Direct `context.target` access remains the base path; `execute(...)` is optional built-in behavior.
  */
 export type HeadlessToolbarController = {
   getSnapshot(): ToolbarSnapshot;
   subscribe(listener: (event: ToolbarSubscriptionEvent) => void): () => void;
-  execute?: (id: PublicToolbarItemId, payload?: unknown) => boolean;
+  execute<Id extends PublicToolbarItemId>(
+    ...args: ToolbarPayloadMap[Id] extends never ? [id: Id] : [id: Id, payload: ToolbarPayloadMap[Id]]
+  ): boolean;
   destroy(): void;
 };
 
+/**
+ * Loose execute function type for passing as a callback prop to child components.
+ * Use `HeadlessToolbarController['execute']` for type-safe direct calls.
+ */
+export type ToolbarExecuteFn = (id: PublicToolbarItemId, payload?: unknown) => boolean;
+
 export type HeadlessToolbarSuperdocHost = {
   activeEditor?: Editor | null;
   on?: (event: string, listener: (...args: any[]) => void) => void;
diff --git a/packages/super-editor/src/headless-toolbar/vue.ts b/packages/super-editor/src/headless-toolbar/vue.ts
new file mode 100644
index 0000000000..b9ae12430d
--- /dev/null
+++ b/packages/super-editor/src/headless-toolbar/vue.ts
@@ -0,0 +1,52 @@
+import { shallowRef, onBeforeUnmount, type ShallowRef } from 'vue';
+import { createHeadlessToolbar } from './create-headless-toolbar.js';
+import type {
+  CreateHeadlessToolbarOptions,
+  HeadlessToolbarController,
+  PublicToolbarItemId,
+  ToolbarSnapshot,
+  ToolbarPayloadMap,
+} from './types.js';
+
+/**
+ * Vue composable for the headless toolbar.
+ *
+ * Returns `{ snapshot, execute }` — bind `snapshot` in your template and call
+ * `execute` from your event handlers. Cleanup is automatic on unmount.
+ *
+ * ```vue
+ * <script setup>
+ * const { snapshot, execute } = useHeadlessToolbar(superdoc, ['bold', 'italic', 'undo', 'redo']);
+ * </script>
+ *
+ * <template>
+ *   <button @click="execute('bold')" :data-active="snapshot.commands.bold?.active">Bold</button>
+ * </template>
+ * ```
+ */
+export function useHeadlessToolbar(
+  superdoc: CreateHeadlessToolbarOptions['superdoc'],
+  commands?: PublicToolbarItemId[],
+): {
+  snapshot: ShallowRef<ToolbarSnapshot>;
+  execute: (id: PublicToolbarItemId, payload?: unknown) => boolean;
+} {
+  const controller: HeadlessToolbarController = createHeadlessToolbar({ superdoc, commands });
+
+  const snapshot = shallowRef<ToolbarSnapshot>(controller.getSnapshot());
+
+  const unsub = controller.subscribe(({ snapshot: s }) => {
+    snapshot.value = s;
+  });
+
+  onBeforeUnmount(() => {
+    unsub();
+    controller.destroy();
+  });
+
+  const execute: HeadlessToolbarController['execute'] = ((...args: [any, any?]) => {
+    return controller.execute(...args);
+  }) as HeadlessToolbarController['execute'];
+
+  return { snapshot, execute };
+}
diff --git a/packages/superdoc/package.json b/packages/superdoc/package.json
index 02cb343947..24e663a5fe 100644
--- a/packages/superdoc/package.json
+++ b/packages/superdoc/package.json
@@ -47,6 +47,16 @@
       "source": "./src/headless-toolbar.js",
       "import": "./dist/headless-toolbar.es.js"
     },
+    "./headless-toolbar/react": {
+      "types": "./dist/superdoc/src/headless-toolbar-react.d.ts",
+      "source": "./src/headless-toolbar-react.js",
+      "import": "./dist/headless-toolbar-react.es.js"
+    },
+    "./headless-toolbar/vue": {
+      "types": "./dist/superdoc/src/headless-toolbar-vue.d.ts",
+      "source": "./src/headless-toolbar-vue.js",
+      "import": "./dist/headless-toolbar-vue.es.js"
+    },
     "./file-zipper": {
       "import": "./dist/super-editor/file-zipper.es.js"
     },
@@ -58,6 +68,12 @@
       "headless-toolbar": [
         "./dist/superdoc/src/headless-toolbar.d.ts"
       ],
+      "headless-toolbar/react": [
+        "./dist/superdoc/src/headless-toolbar-react.d.ts"
+      ],
+      "headless-toolbar/vue": [
+        "./dist/superdoc/src/headless-toolbar-vue.d.ts"
+      ],
       "super-editor": [
         "./dist/superdoc/src/super-editor.d.ts"
       ],
diff --git a/packages/superdoc/src/core/types/index.js b/packages/superdoc/src/core/types/index.js
index 75f7479003..e7a1b3c27e 100644
--- a/packages/superdoc/src/core/types/index.js
+++ b/packages/superdoc/src/core/types/index.js
@@ -546,7 +546,7 @@
  * @typedef {Object} Config
  * @property {string} [superdocId] The ID of the SuperDoc
  * @property {string | HTMLElement} selector The selector or element to mount the SuperDoc into
- * @property {DocumentMode} documentMode The mode of the document
+ * @property {DocumentMode} [documentMode] The mode of the document (default: 'editing')
  * @property {'editor' | 'viewer' | 'suggester'} [role] The role of the user in this SuperDoc
  * @property {Object | string | File | Blob} [document] The document to load. If a string, it will be treated as a URL. If a File or Blob, it will be used directly.
  * @property {string} [password] Password for encrypted DOCX files. Forwarded during document load.
diff --git a/packages/superdoc/src/headless-toolbar-react.js b/packages/superdoc/src/headless-toolbar-react.js
new file mode 100644
index 0000000000..835c06d6c1
--- /dev/null
+++ b/packages/superdoc/src/headless-toolbar-react.js
@@ -0,0 +1,35 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { createHeadlessToolbar } from '@superdoc/super-editor';
+
+const EMPTY_SNAPSHOT = { context: null, commands: {} };
+
+/**
+ * React hook for the headless toolbar.
+ *
+ * @param {import('@superdoc/super-editor').HeadlessToolbarSuperdocHost | null | undefined} superdoc
+ * @param {import('@superdoc/super-editor').PublicToolbarItemId[]} [commands]
+ */
+export function useHeadlessToolbar(superdoc, commands) {
+  const [snapshot, setSnapshot] = useState(EMPTY_SNAPSHOT);
+  const controllerRef = useRef(null);
+
+  useEffect(() => {
+    if (!superdoc) return;
+
+    const controller = createHeadlessToolbar({ superdoc, commands });
+    controllerRef.current = controller;
+
+    setSnapshot(controller.getSnapshot());
+    const unsub = controller.subscribe(({ snapshot: s }) => setSnapshot(s));
+
+    return () => {
+      unsub();
+      controller.destroy();
+      controllerRef.current = null;
+    };
+  }, [superdoc]);
+
+  const execute = useCallback((id, payload) => controllerRef.current?.execute(id, payload) ?? false, []);
+
+  return { snapshot, execute };
+}
diff --git a/packages/superdoc/src/headless-toolbar-vue.js b/packages/superdoc/src/headless-toolbar-vue.js
new file mode 100644
index 0000000000..084b38a64c
--- /dev/null
+++ b/packages/superdoc/src/headless-toolbar-vue.js
@@ -0,0 +1,26 @@
+import { shallowRef, onBeforeUnmount } from 'vue';
+import { createHeadlessToolbar } from '@superdoc/super-editor';
+
+/**
+ * Vue composable for the headless toolbar.
+ *
+ * @param {import('@superdoc/super-editor').HeadlessToolbarSuperdocHost} superdoc
+ * @param {import('@superdoc/super-editor').PublicToolbarItemId[]} [commands]
+ */
+export function useHeadlessToolbar(superdoc, commands) {
+  const controller = createHeadlessToolbar({ superdoc, commands });
+
+  const snapshot = shallowRef(controller.getSnapshot());
+  const unsub = controller.subscribe(({ snapshot: s }) => {
+    snapshot.value = s;
+  });
+
+  onBeforeUnmount(() => {
+    unsub();
+    controller.destroy();
+  });
+
+  const execute = (id, payload) => controller.execute(id, payload);
+
+  return { snapshot, execute };
+}
diff --git a/packages/superdoc/src/headless-toolbar.d.ts b/packages/superdoc/src/headless-toolbar.d.ts
index 634474554d..f2819a581f 100644
--- a/packages/superdoc/src/headless-toolbar.d.ts
+++ b/packages/superdoc/src/headless-toolbar.d.ts
@@ -8,7 +8,11 @@ export {
   type HeadlessToolbarSuperdocHost,
   type PublicToolbarItemId,
   type ToolbarCommandState,
+  type ToolbarCommandStates,
   type ToolbarContext,
+  type ToolbarExecuteFn,
+  type ToolbarPayloadMap,
   type ToolbarSnapshot,
   type ToolbarTarget,
+  type ToolbarValueMap,
 } from '@superdoc/super-editor';
diff --git a/packages/superdoc/vite.config.js b/packages/superdoc/vite.config.js
index a90c677235..264d90cb8f 100644
--- a/packages/superdoc/vite.config.js
+++ b/packages/superdoc/vite.config.js
@@ -180,6 +180,8 @@ export default defineConfig(({ mode, command }) => {
         input: {
           'superdoc': 'src/index.js',
           'headless-toolbar': 'src/headless-toolbar.js',
+          'headless-toolbar-react': 'src/headless-toolbar-react.js',
+          'headless-toolbar-vue': 'src/headless-toolbar-vue.js',
           'super-editor': 'src/super-editor.js',
           'types': 'src/types.ts',
           'super-editor/docx-zipper': '@core/DocxZipper',
@@ -193,6 +195,8 @@ export default defineConfig(({ mode, command }) => {
           'pdfjs-dist/build/pdf.mjs',
           'pdfjs-dist/legacy/build/pdf.mjs',
           'pdfjs-dist/web/pdf_viewer.mjs',
+          'react',
+          'vue',
         ],
         output: [
           {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7cce713a86..5d84802218 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -549,7 +549,7 @@ importers:
         version: 14.0.3
       mintlify:
         specifier: 4.2.446
-        version: 4.2.446(@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/node@22.19.15)(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(ts-node@10.9.2(@swc/core@1.15.21)(@types/node@22.19.15)(typescript@5.9.3))(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)
+        version: 4.2.446(@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/node@22.19.15)(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(ts-node@10.9.2(@swc/core@1.15.21)(@types/node@22.19.15)(typescript@5.9.3))(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)
       remark-mdx:
         specifier: ^3.1.1
         version: 3.1.1
@@ -1373,7 +1373,7 @@ importers:
         version: 6.33.0(ws@8.20.0)(zod@4.3.6)
       promptfoo:
         specifier: ^0.121.1
-        version: 0.121.3(@types/json-schema@7.0.15)(@types/node@18.19.130)(@types/react@19.2.14)(bun-types@1.3.11)(canvas@3.2.2)(pg@8.20.0)(playwright-core@1.58.2)(postgres@3.4.8)(socks@2.8.7)(typescript@5.9.3)
+        version: 0.121.3(@types/json-schema@7.0.15)(@types/node@18.19.130)(@types/react@19.2.14)(babel-plugin-macros@3.1.0)(bun-types@1.3.11)(canvas@3.2.2)(pg@8.20.0)(playwright-core@1.58.2)(postgres@3.4.8)(socks@2.8.7)(typescript@5.9.3)
 
   examples/__tests__:
     devDependencies:
@@ -1406,17 +1406,165 @@ importers:
         specifier: npm:rolldown-vite@7.3.1
         version: rolldown-vite@7.3.1(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@22.19.15)(esbuild@0.27.4)(jiti@2.6.1)(less@4.4.2)(sass@1.97.3)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
 
-  examples/advanced/headless-toolbar:
+  examples/advanced/headless-toolbar/react-mui:
+    dependencies:
+      '@emotion/react':
+        specifier: ^11.14.0
+        version: 11.14.0(@types/react@19.2.14)(react@19.2.4)
+      '@emotion/styled':
+        specifier: ^11.14.0
+        version: 11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react@19.2.4)
+      '@mui/icons-material':
+        specifier: ^7.3.0
+        version: 7.3.9(@mui/material@7.3.9(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(@types/react@19.2.14)(react@19.2.4)
+      '@mui/material':
+        specifier: ^7.3.0
+        version: 7.3.9(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react:
+        specifier: ^19.2.0
+        version: 19.2.4
+      react-dom:
+        specifier: ^19.2.0
+        version: 19.2.4(react@19.2.4)
+      superdoc:
+        specifier: workspace:*
+        version: link:../../../../packages/superdoc
+    devDependencies:
+      '@types/react':
+        specifier: ^19.2.0
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.0
+        version: 19.2.3(@types/react@19.2.14)
+      '@vitejs/plugin-react':
+        specifier: ^4.3.0
+        version: 4.7.0(rolldown-vite@7.3.1(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@22.19.15)(esbuild@0.27.4)(jiti@2.6.1)(less@4.4.2)(sass@1.97.3)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
+      typescript:
+        specifier: ^5.7.0
+        version: 5.9.3
+      vite:
+        specifier: npm:rolldown-vite@7.3.1
+        version: rolldown-vite@7.3.1(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@22.19.15)(esbuild@0.27.4)(jiti@2.6.1)(less@4.4.2)(sass@1.97.3)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
+
+  examples/advanced/headless-toolbar/react-shadcn:
     dependencies:
+      '@radix-ui/react-popover':
+        specifier: ^1.1.7
+        version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-select':
+        specifier: ^2.1.7
+        version: 2.2.6(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-separator':
+        specifier: ^1.1.3
+        version: 1.1.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-toggle-group':
+        specifier: ^1.1.3
+        version: 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-tooltip':
+        specifier: ^1.2.3
+        version: 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      lucide-react:
+        specifier: ^0.511.0
+        version: 0.511.0(react@19.2.4)
+      react:
+        specifier: ^19.2.0
+        version: 19.2.4
+      react-dom:
+        specifier: ^19.2.0
+        version: 19.2.4(react@19.2.4)
       superdoc:
         specifier: workspace:*
-        version: link:../../../packages/superdoc
+        version: link:../../../../packages/superdoc
+      tailwind-merge:
+        specifier: ^3.3.0
+        version: 3.5.0
+    devDependencies:
+      '@tailwindcss/vite':
+        specifier: ^4.1.0
+        version: 4.2.2(rolldown-vite@7.3.1(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@22.19.15)(esbuild@0.27.4)(jiti@2.6.1)(less@4.4.2)(sass@1.97.3)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
+      '@types/react':
+        specifier: ^19.2.0
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.0
+        version: 19.2.3(@types/react@19.2.14)
+      '@vitejs/plugin-react':
+        specifier: ^4.3.0
+        version: 4.7.0(rolldown-vite@7.3.1(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@22.19.15)(esbuild@0.27.4)(jiti@2.6.1)(less@4.4.2)(sass@1.97.3)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
+      tailwindcss:
+        specifier: ^4.1.0
+        version: 4.2.2
+      typescript:
+        specifier: ~5.5.0
+        version: 5.5.4
+      vite:
+        specifier: npm:rolldown-vite@7.3.1
+        version: rolldown-vite@7.3.1(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@22.19.15)(esbuild@0.27.4)(jiti@2.6.1)(less@4.4.2)(sass@1.97.3)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
+
+  examples/advanced/headless-toolbar/svelte-shadcn:
+    dependencies:
+      superdoc:
+        specifier: workspace:*
+        version: link:../../../../packages/superdoc
+    devDependencies:
+      '@sveltejs/vite-plugin-svelte':
+        specifier: ^5.0.3
+        version: 5.1.1(rolldown-vite@7.3.1(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@22.19.15)(esbuild@0.27.4)(jiti@2.6.1)(less@4.4.2)(sass@1.97.3)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(svelte@5.55.1)
+      '@tailwindcss/vite':
+        specifier: ^4.1.3
+        version: 4.2.2(rolldown-vite@7.3.1(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@22.19.15)(esbuild@0.27.4)(jiti@2.6.1)(less@4.4.2)(sass@1.97.3)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
+      lucide-svelte:
+        specifier: ^0.475.0
+        version: 0.475.0(svelte@5.55.1)
+      svelte:
+        specifier: ^5.25.0
+        version: 5.55.1
+      tailwindcss:
+        specifier: ^4.1.3
+        version: 4.2.2
+      typescript:
+        specifier: ^5.7.0
+        version: 5.9.3
+      vite:
+        specifier: npm:rolldown-vite@7.3.1
+        version: rolldown-vite@7.3.1(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@22.19.15)(esbuild@0.27.4)(jiti@2.6.1)(less@4.4.2)(sass@1.97.3)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
+
+  examples/advanced/headless-toolbar/vanilla:
+    dependencies:
+      lucide:
+        specifier: ^0.468.0
+        version: 0.468.0
+      superdoc:
+        specifier: workspace:*
+        version: link:../../../../packages/superdoc
+    devDependencies:
+      typescript:
+        specifier: ^5.7.0
+        version: 5.9.3
+      vite:
+        specifier: npm:rolldown-vite@7.3.1
+        version: rolldown-vite@7.3.1(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@22.19.15)(esbuild@0.27.4)(jiti@2.6.1)(less@4.4.2)(sass@1.97.3)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
+
+  examples/advanced/headless-toolbar/vue-vuetify:
+    dependencies:
+      '@mdi/font':
+        specifier: ^7.4.47
+        version: 7.4.47
+      superdoc:
+        specifier: workspace:*
+        version: link:../../../../packages/superdoc
       vue:
         specifier: 3.5.25
         version: 3.5.25(typescript@5.9.3)
+      vuetify:
+        specifier: ^3.7.6
+        version: 3.12.4(typescript@5.9.3)(vue@3.5.25(typescript@5.9.3))
     devDependencies:
       '@vitejs/plugin-vue':
-        specifier: ^5.2.0
+        specifier: ^5.2.1
         version: 5.2.4(rolldown-vite@7.3.1(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@22.19.15)(esbuild@0.27.4)(jiti@2.6.1)(less@4.4.2)(sass@1.97.3)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vue@3.5.25(typescript@5.9.3))
       typescript:
         specifier: ^5.7.0
@@ -1424,6 +1572,9 @@ importers:
       vite:
         specifier: npm:rolldown-vite@7.3.1
         version: rolldown-vite@7.3.1(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@22.19.15)(esbuild@0.27.4)(jiti@2.6.1)(less@4.4.2)(sass@1.97.3)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
+      vue-tsc:
+        specifier: ^2.2.0
+        version: 2.2.12(typescript@5.9.3)
 
   examples/ai/bedrock:
     dependencies:
@@ -2018,7 +2169,7 @@ importers:
     dependencies:
       nuxt:
         specifier: ^4.3.1
-        version: 4.4.2(9f8db8e1c76a42c038c7e62f4101cb52)
+        version: 4.4.2(9119e209ad8cf55673c89b332bf0c82c)
       superdoc:
         specifier: workspace:*
         version: link:../../../packages/superdoc
@@ -4484,6 +4635,60 @@ packages:
   '@emnapi/wasi-threads@1.2.0':
     resolution: {integrity: sha512-N10dEJNSsUx41Z6pZsXU8FjPjpBEplgH24sfkmITrBED1/U2Esum9F3lfLrMjKHHjmi557zQn7kR9R+XWXu5Rg==}
 
+  '@emotion/babel-plugin@11.13.5':
+    resolution: {integrity: sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==}
+
+  '@emotion/cache@11.14.0':
+    resolution: {integrity: sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==}
+
+  '@emotion/hash@0.9.2':
+    resolution: {integrity: sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==}
+
+  '@emotion/is-prop-valid@1.4.0':
+    resolution: {integrity: sha512-QgD4fyscGcbbKwJmqNvUMSE02OsHUa+lAWKdEUIJKgqe5IwRSKd7+KhibEWdaKwgjLj0DRSHA9biAIqGBk05lw==}
+
+  '@emotion/memoize@0.9.0':
+    resolution: {integrity: sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==}
+
+  '@emotion/react@11.14.0':
+    resolution: {integrity: sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: '>=16.8.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@emotion/serialize@1.3.3':
+    resolution: {integrity: sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==}
+
+  '@emotion/sheet@1.4.0':
+    resolution: {integrity: sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==}
+
+  '@emotion/styled@11.14.1':
+    resolution: {integrity: sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==}
+    peerDependencies:
+      '@emotion/react': ^11.0.0-rc.0
+      '@types/react': '*'
+      react: '>=16.8.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@emotion/unitless@0.10.0':
+    resolution: {integrity: sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==}
+
+  '@emotion/use-insertion-effect-with-fallbacks@1.2.0':
+    resolution: {integrity: sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==}
+    peerDependencies:
+      react: '>=16.8.0'
+
+  '@emotion/utils@1.4.2':
+    resolution: {integrity: sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==}
+
+  '@emotion/weak-memoize@0.4.0':
+    resolution: {integrity: sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==}
+
   '@es-joy/jsdoccomment@0.56.0':
     resolution: {integrity: sha512-c6EW+aA1w2rjqOMjbL93nZlwxp6c1Ln06vTYs5FjRRhmJXK8V/OrSXdT+pUr4aRYgjCgu8/OkiZr0tzeVrRSbw==}
     engines: {node: '>=20.11.0'}
@@ -5962,6 +6167,9 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
+  '@mdi/font@7.4.47':
+    resolution: {integrity: sha512-43MtGpd585SNzHZPcYowu/84Vz2a2g31TvPMTm9uTiCSWzaheQySUcSyUH/46fPnuPQWof2yd0pGBtzee/IQWw==}
+
   '@mdx-js/mdx@3.1.1':
     resolution: {integrity: sha512-f6ZO2ifpwAQIpzGWaBQT2TXxPv6z3RBzQKpVftEWN78Vl/YweF1uwussDx8ECAXVtr3Rs89fKyG9YlzUs9DyGQ==}
 
@@ -6000,7 +6208,6 @@ packages:
   '@microsoft/teamsapp-cli@3.0.2':
     resolution: {integrity: sha512-AowuJwrrUxeF9Bq/frxuy9YZjK/ECk3pi0UBXl3CQLZ4XNWfgWatiFi/UWpyHDLccFs+0Za3nNYATFvgsxEFwQ==}
     engines: {node: '>=12'}
-    deprecated: This package is deprecated and supported Node.js version is 18-22. Please use @microsoft/m365agentstoolkit-cli instead.
     hasBin: true
 
   '@microsoft/teamsfx-api@0.23.1':
@@ -6129,6 +6336,97 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@mui/core-downloads-tracker@7.3.9':
+    resolution: {integrity: sha512-MOkOCTfbMJwLshlBCKJ59V2F/uaLYfmKnN76kksj6jlGUVdI25A9Hzs08m+zjBRdLv+sK7Rqdsefe8X7h/6PCw==}
+
+  '@mui/icons-material@7.3.9':
+    resolution: {integrity: sha512-BT+zPJXss8Hg/oEMRmHl17Q97bPACG4ufFSfGEdhiE96jOyR5Dz1ty7ZWt1fVGR0y1p+sSgEwQT/MNZQmoWDCw==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@mui/material': ^7.3.9
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@mui/material@7.3.9':
+    resolution: {integrity: sha512-I8yO3t4T0y7bvDiR1qhIN6iBWZOTBfVOnmLlM7K6h3dx5YX2a7rnkuXzc2UkZaqhxY9NgTnEbdPlokR1RxCNRQ==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@emotion/react': ^11.5.0
+      '@emotion/styled': ^11.3.0
+      '@mui/material-pigment-css': ^7.3.9
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/react':
+        optional: true
+      '@emotion/styled':
+        optional: true
+      '@mui/material-pigment-css':
+        optional: true
+      '@types/react':
+        optional: true
+
+  '@mui/private-theming@7.3.9':
+    resolution: {integrity: sha512-ErIyRQvsiQEq7Yvcvfw9UDHngaqjMy9P3JDPnRAaKG5qhpl2C4tX/W1S4zJvpu+feihmZJStjIyvnv6KDbIrlw==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@mui/styled-engine@7.3.9':
+    resolution: {integrity: sha512-JqujWt5bX4okjUPGpVof/7pvgClqh7HvIbsIBIOOlCh2u3wG/Bwp4+E1bc1dXSwkrkp9WUAoNdI5HEC+5HKvMw==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@emotion/react': ^11.4.1
+      '@emotion/styled': ^11.3.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/react':
+        optional: true
+      '@emotion/styled':
+        optional: true
+
+  '@mui/system@7.3.9':
+    resolution: {integrity: sha512-aL1q9am8XpRrSabv9qWf5RHhJICJql34wnrc1nz0MuOglPRYF/liN+c8VqZdTvUn9qg+ZjRVbKf4sJVFfIDtmg==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@emotion/react': ^11.5.0
+      '@emotion/styled': ^11.3.0
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/react':
+        optional: true
+      '@emotion/styled':
+        optional: true
+      '@types/react':
+        optional: true
+
+  '@mui/types@7.4.12':
+    resolution: {integrity: sha512-iKNAF2u9PzSIj40CjvKJWxFXJo122jXVdrmdh0hMYd+FR+NuJMkr/L88XwWLCRiJ5P1j+uyac25+Kp6YC4hu6w==}
+    peerDependencies:
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@mui/utils@7.3.9':
+    resolution: {integrity: sha512-U6SdZaGbfb65fqTsH3V5oJdFj9uYwyLE2WVuNvmbggTSDBb8QHrFsqY8BN3taK9t3yJ8/BPHD/kNvLNyjwM7Yw==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@napi-rs/canvas-android-arm64@0.1.80':
     resolution: {integrity: sha512-sk7xhN/MoXeuExlggf91pNziBxLPVUqF2CAVnB57KLG/pz7+U5TKG8eXdc3pm0d7Od0WreB6ZKLj37sX9muGOQ==}
     engines: {node: '>= 10'}
@@ -7494,9 +7792,15 @@ packages:
   '@radix-ui/number@1.1.0':
     resolution: {integrity: sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ==}
 
+  '@radix-ui/number@1.1.1':
+    resolution: {integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==}
+
   '@radix-ui/primitive@1.1.1':
     resolution: {integrity: sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==}
 
+  '@radix-ui/primitive@1.1.3':
+    resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==}
+
   '@radix-ui/react-accordion@1.2.2':
     resolution: {integrity: sha512-b1oh54x4DMCdGsB4/7ahiSrViXxaBwRPotiZNnYXjLha9vfuURSAZErki6qjDoSIV0eXx5v57XnTGVtGwnfp2g==}
     peerDependencies:
@@ -7536,6 +7840,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-arrow@1.1.7':
+    resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-aspect-ratio@1.1.1':
     resolution: {integrity: sha512-kNU4FIpcFMBLkOUcgeIteH06/8JLBcYY6Le1iKenDGCYNYFX3TQqCZjzkOsz37h7r94/99GTb7YhEr98ZBJibw==}
     peerDependencies:
@@ -7601,6 +7918,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-collection@1.1.7':
+    resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-compose-refs@1.1.1':
     resolution: {integrity: sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==}
     peerDependencies:
@@ -7641,6 +7971,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-context@1.1.2':
+    resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-dialog@1.1.4':
     resolution: {integrity: sha512-Ur7EV1IwQGCyaAuyDRiOLA5JIUZxELJljF+MbM/2NC0BYwfuRrbpS30BiQBJrVruscgUkieKkqXYDOoByaxIoA==}
     peerDependencies:
@@ -7663,6 +8002,28 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-direction@1.1.1':
+    resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-dismissable-layer@1.1.11':
+    resolution: {integrity: sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-dismissable-layer@1.1.3':
     resolution: {integrity: sha512-onrWn/72lQoEucDmJnr8uczSNTujT0vJnA/X5+3AkChVPowr8n1yvIKIabhWyMQeMvvmdpsvcyDqx3X1LEXCPg==}
     peerDependencies:
@@ -7698,6 +8059,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-focus-guards@1.1.3':
+    resolution: {integrity: sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-focus-scope@1.1.1':
     resolution: {integrity: sha512-01omzJAYRxXdG2/he/+xy+c8a8gCydoQ1yOxnWNcRhrrBW5W+RQJ22EK1SaO8tb3WoUsuEw7mJjBozPzihDFjA==}
     peerDependencies:
@@ -7711,6 +8081,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-focus-scope@1.1.7':
+    resolution: {integrity: sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-hover-card@1.1.4':
     resolution: {integrity: sha512-QSUUnRA3PQ2UhvoCv3eYvMnCAgGQW+sTu86QPuNb+ZMi+ZENd6UWpiXbcWDQ4AEaKF9KKpCHBeaJz9Rw6lRlaQ==}
     peerDependencies:
@@ -7794,6 +8177,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-popover@1.1.15':
+    resolution: {integrity: sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-popover@1.1.4':
     resolution: {integrity: sha512-aUACAkXx8LaFymDma+HQVji7WhvEhpFJ7+qPz17Nf4lLZqtreGOFRiNQWQmhzp7kEWg9cOyyQJpdIMUMPc/CPw==}
     peerDependencies:
@@ -7820,6 +8216,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-popper@1.2.8':
+    resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-portal@1.1.3':
     resolution: {integrity: sha512-NciRqhXnGojhT93RPyDaMPfLH3ZSl4jjIFbZQ1b/vxvZEdHsBZ49wP9w8L3HzUQwep01LcWtkUvm0OVB5JAHTw==}
     peerDependencies:
@@ -7833,6 +8242,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-portal@1.1.9':
+    resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-presence@1.1.2':
     resolution: {integrity: sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg==}
     peerDependencies:
@@ -7846,6 +8268,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-presence@1.1.5':
+    resolution: {integrity: sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-primitive@2.0.1':
     resolution: {integrity: sha512-sHCWTtxwNn3L3fH8qAfnF3WbUZycW93SM1j3NFDzXBiz8D6F5UTTy8G1+WFEaiCdvCVRJWj6N2R4Xq6HdiHmDg==}
     peerDependencies:
@@ -7859,6 +8294,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-primitive@2.1.3':
+    resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-primitive@2.1.4':
     resolution: {integrity: sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==}
     peerDependencies:
@@ -7911,6 +8359,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-roving-focus@1.1.11':
+    resolution: {integrity: sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-scroll-area@1.2.2':
     resolution: {integrity: sha512-EFI1N/S3YxZEW/lJ/H1jY3njlvTd8tBmgKEn4GHi51+aMm94i6NmAJstsm5cu3yJwYqYc93gpCPm21FeAbFk6g==}
     peerDependencies:
@@ -7937,6 +8398,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-select@2.2.6':
+    resolution: {integrity: sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-separator@1.1.1':
     resolution: {integrity: sha512-RRiNRSrD8iUiXriq/Y5n4/3iE8HzqgLHsusUSg5jVpU2+3tqcUFPJXHDymwEypunc2sWxDUS3UC+rkZRlHedsw==}
     peerDependencies:
@@ -7950,6 +8424,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-separator@1.1.8':
+    resolution: {integrity: sha512-sDvqVY4itsKwwSMEe0jtKgfTh+72Sy3gPmQpjqcQneqQ4PFmr/1I0YA+2/puilhggCe2gJcx5EBAYFkWkdpa5g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-slider@1.2.2':
     resolution: {integrity: sha512-sNlU06ii1/ZcbHf8I9En54ZPW0Vil/yPVg4vQMcFNjrIx51jsHbFl1HYHQvCIWJSr1q0ZmA+iIs/ZTv8h7HHSA==}
     peerDependencies:
@@ -7972,6 +8459,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-slot@1.2.3':
+    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-slot@1.2.4':
     resolution: {integrity: sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==}
     peerDependencies:
@@ -8033,6 +8529,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-toggle-group@1.1.11':
+    resolution: {integrity: sha512-5umnS0T8JQzQT6HbPyO7Hh9dgd82NmS36DQr+X/YJ9ctFNCiiQd6IJAYYZ33LUwm8M+taCz5t2ui29fHZc4Y6Q==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-toggle@1.1.1':
     resolution: {integrity: sha512-i77tcgObYr743IonC1hrsnnPmszDRn8p+EGUsUt+5a/JFn28fxaM88Py6V2mc8J5kELMWishI0rLnuGLFD/nnQ==}
     peerDependencies:
@@ -8046,6 +8555,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-toggle@1.1.10':
+    resolution: {integrity: sha512-lS1odchhFTeZv3xwHH31YPObmJn8gOg7Lq12inrr0+BH/l3Tsq32VfjqH1oh80ARM3mlkfMic15n0kg4sD1poQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-tooltip@1.1.6':
     resolution: {integrity: sha512-TLB5D8QLExS1uDn7+wH/bjEmRurNMTzNrtq7IjaS4kjion9NtzsTGkvR5+i7yc9q01Pi2KMM2cN3f8UG4IvvXA==}
     peerDependencies:
@@ -8059,6 +8581,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-tooltip@1.2.8':
+    resolution: {integrity: sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-use-callback-ref@1.1.0':
     resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==}
     peerDependencies:
@@ -8068,6 +8603,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-callback-ref@1.1.1':
+    resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-controllable-state@1.1.0':
     resolution: {integrity: sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==}
     peerDependencies:
@@ -8077,6 +8621,24 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-controllable-state@1.2.2':
+    resolution: {integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-effect-event@0.0.2':
+    resolution: {integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-escape-keydown@1.1.0':
     resolution: {integrity: sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==}
     peerDependencies:
@@ -8086,6 +8648,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-escape-keydown@1.1.1':
+    resolution: {integrity: sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-layout-effect@1.1.0':
     resolution: {integrity: sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==}
     peerDependencies:
@@ -8113,6 +8684,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-previous@1.1.1':
+    resolution: {integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-rect@1.1.0':
     resolution: {integrity: sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==}
     peerDependencies:
@@ -8122,6 +8702,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-rect@1.1.1':
+    resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-size@1.1.0':
     resolution: {integrity: sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==}
     peerDependencies:
@@ -8131,6 +8720,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-size@1.1.1':
+    resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-visually-hidden@1.1.1':
     resolution: {integrity: sha512-vVfA2IZ9q/J+gEamvj761Oq1FpWgCDaNOOIfbPVp2MVPLEomUr5+Vf7kJGwQ24YxZSlQVar7Bes8kyTo5Dshpg==}
     peerDependencies:
@@ -8144,9 +8742,25 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-visually-hidden@1.2.3':
+    resolution: {integrity: sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/rect@1.1.0':
     resolution: {integrity: sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==}
 
+  '@radix-ui/rect@1.1.1':
+    resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
+
   '@redis/bloom@5.11.0':
     resolution: {integrity: sha512-KYiVilAhAFN3057afUb/tfYJpsEyTkQB+tQcn5gVVA7DgcNOAj8lLxe4j8ov8BF6I9C1Fe/kwlbuAICcTMX8Lw==}
     engines: {node: '>= 18'}
@@ -9039,6 +9653,26 @@ packages:
     resolution: {integrity: sha512-JZlVFE6/dYpP9tQmV0/ADfn32L9uFarHWxfcRhReKUnljz1ZiUM5zpX+PH8h5CJs6lao3TuFqnPm9IJJCEkE2w==}
     engines: {node: '>=10.8'}
 
+  '@sveltejs/acorn-typescript@1.0.9':
+    resolution: {integrity: sha512-lVJX6qEgs/4DOcRTpo56tmKzVPtoWAaVbL4hfO7t7NVwl9AAXzQR6cihesW1BmNMPl+bK6dreu2sOKBP2Q9CIA==}
+    peerDependencies:
+      acorn: ^8.9.0
+
+  '@sveltejs/vite-plugin-svelte-inspector@4.0.1':
+    resolution: {integrity: sha512-J/Nmb2Q2y7mck2hyCX4ckVHcR5tu2J+MtBEQqpDrrgELZ2uvraQcK/ioCV61AqkdXFgriksOKIceDcQmqnGhVw==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22}
+    peerDependencies:
+      '@sveltejs/vite-plugin-svelte': ^5.0.0
+      svelte: ^5.0.0
+      vite: ^6.0.0
+
+  '@sveltejs/vite-plugin-svelte@5.1.1':
+    resolution: {integrity: sha512-Y1Cs7hhTc+a5E9Va/xwKlAJoariQyHY+5zBgCZg4PFWNYQ1nMN9sjK1zhw1gK69DuqVP++sht/1GZg1aRwmAXQ==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22}
+    peerDependencies:
+      svelte: ^5.0.0
+      vite: ^6.0.0
+
   '@swc/core-darwin-arm64@1.15.21':
     resolution: {integrity: sha512-SA8SFg9dp0qKRH8goWsax6bptFE2EdmPf2YRAQW9WoHGf3XKM1bX0nd5UdwxmC5hXsBUZAYf7xSciCler6/oyA==}
     engines: {node: '>=10'}
@@ -9506,6 +10140,9 @@ packages:
   '@types/office-runtime@1.0.36':
     resolution: {integrity: sha512-PiXgflBSd1Arcb5z64K4DuQL2t/g7rEN7x3McLLSnKcs8qzhLKHi1UpzfeXC3UzmJk+q9qfu+vOy7V7suBJOAA==}
 
+  '@types/parse-json@4.0.2':
+    resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==}
+
   '@types/parse5@6.0.3':
     resolution: {integrity: sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==}
 
@@ -9531,6 +10168,11 @@ packages:
     peerDependencies:
       '@types/react': ^19.2.0
 
+  '@types/react-transition-group@4.4.12':
+    resolution: {integrity: sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==}
+    peerDependencies:
+      '@types/react': '*'
+
   '@types/react@18.3.28':
     resolution: {integrity: sha512-z9VXpC7MWrhfWipitjNdgCauoMLRdIILQsAEV+ZesIzBq/oUlxk0m3ApZuMFCXdnS4U7KrI+l3WRUEGQ8K1QKw==}
 
@@ -9580,6 +10222,9 @@ packages:
   '@types/triple-beam@1.3.5':
     resolution: {integrity: sha512-6WaYesThRMCl19iryMYP7/x2OVgCtbIVflDGFpWnb9irXI3UjYE4AzmYuiUKY1AJstGijoY+MgUszMgRxIYTYw==}
 
+  '@types/trusted-types@2.0.7':
+    resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
+
   '@types/unist@2.0.11':
     resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
 
@@ -10032,12 +10677,21 @@ packages:
   '@vitest/utils@3.2.4':
     resolution: {integrity: sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==}
 
+  '@volar/language-core@2.4.15':
+    resolution: {integrity: sha512-3VHw+QZU0ZG9IuQmzT68IyN4hZNd9GchGPhbD9+pa8CVv7rnoOZwo7T8weIbrRmihqy3ATpdfXFnqRrfPVK6CA==}
+
   '@volar/language-core@2.4.28':
     resolution: {integrity: sha512-w4qhIJ8ZSitgLAkVay6AbcnC7gP3glYM3fYwKV3srj8m494E3xtrCv6E+bWviiK/8hs6e6t1ij1s2Endql7vzQ==}
 
+  '@volar/source-map@2.4.15':
+    resolution: {integrity: sha512-CPbMWlUN6hVZJYGcU/GSoHu4EnCHiLaXI9n8c9la6RaI9W5JHX+NqG+GSQcB0JdC2FIBLdZJwGsfKyBB71VlTg==}
+
   '@volar/source-map@2.4.28':
     resolution: {integrity: sha512-yX2BDBqJkRXfKw8my8VarTyjv48QwxdJtvRgUpNE5erCsgEUdI2DsLbpa+rOQVAJYshY99szEcRDmyHbF10ggQ==}
 
+  '@volar/typescript@2.4.15':
+    resolution: {integrity: sha512-2aZ8i0cqPGjXb4BhkMsPYDkkuc2ZQ6yOpqwAuNwUoncELqoy5fRgOQtLR9gB0g902iS0NAkvpIzs27geVyVdPg==}
+
   '@volar/typescript@2.4.28':
     resolution: {integrity: sha512-Ja6yvWrbis2QtN4ClAKreeUZPVYMARDYZl9LMEv1iQ1QdepB6wn0jTRxA9MftYmYa4DQ4k/DaSZpFPUfxl8giw==}
 
@@ -10186,6 +10840,14 @@ packages:
       typescript:
         optional: true
 
+  '@vue/language-core@2.2.12':
+    resolution: {integrity: sha512-IsGljWbKGU1MZpBPN+BvPAdr55YPkj2nB/TBNGNC32Vy2qLG25DYu/NBN2vNtZqdRbTRjaoYrahLrToim2NanA==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   '@vue/reactivity@3.5.25':
     resolution: {integrity: sha512-5xfAypCQepv4Jog1U4zn8cZIcbKKFka3AgWHEFQeK65OW+Ys4XybP6z2kKgws4YB43KGpqp5D/K3go2UPPunLA==}
 
@@ -10521,6 +11183,9 @@ packages:
   alien-signals@0.4.14:
     resolution: {integrity: sha512-itUAVzhczTmP2U5yX67xVpsbbOiquusbWVyA9N+sy6+r6YVbFkahXvNCeEPWEOMhwDYwbVbGHFkVL03N9I5g+Q==}
 
+  alien-signals@1.0.13:
+    resolution: {integrity: sha512-OGj9yyTnJEttvzhTUWuscOvtqxq5vrhF7vL9oS0xJ2mK0ItPYP1/y+vCFebfxoEyAz0++1AIwJ5CMr+Fk3nDmg==}
+
   ansi-align@3.0.1:
     resolution: {integrity: sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==}
 
@@ -10627,6 +11292,10 @@ packages:
   aria-query@5.3.0:
     resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
 
+  aria-query@5.3.1:
+    resolution: {integrity: sha512-Z/ZeOgVl7bcSYZ/u/rh0fOpvEpq//LZmdbkXyc7syVzjPAhfOa9ebsdTSjEBDU4vs5nC98Kfduj1uFo0qyET3g==}
+    engines: {node: '>= 0.4'}
+
   aria-query@5.3.2:
     resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
     engines: {node: '>= 0.4'}
@@ -10865,6 +11534,10 @@ packages:
       '@babel/core': ^7.12.0
       webpack: '>=5'
 
+  babel-plugin-macros@3.1.0:
+    resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
+    engines: {node: '>=10', npm: '>=6'}
+
   babel-plugin-polyfill-corejs2@0.4.17:
     resolution: {integrity: sha512-aTyf30K/rqAsNwN76zYrdtx8obu0E4KoUME29B1xj+B3WxgvWkp943vYQ+z8Mv3lw9xHXMHpvSPOBxzAkIa94w==}
     peerDependencies:
@@ -11846,6 +12519,10 @@ packages:
       cosmiconfig: '>=9'
       typescript: '>=5'
 
+  cosmiconfig@7.1.0:
+    resolution: {integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==}
+    engines: {node: '>=10'}
+
   cosmiconfig@9.0.1:
     resolution: {integrity: sha512-hr4ihw+DBqcvrsEDioRO31Z17x71pUYoNe/4h6Z0wB72p7MU7/9gH8Q3s12NFhHPfYBBOV3qyfUxmr/Yn3shnQ==}
     engines: {node: '>=14'}
@@ -13032,6 +13709,9 @@ packages:
       jiti:
         optional: true
 
+  esm-env@1.2.2:
+    resolution: {integrity: sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==}
+
   espree@10.4.0:
     resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -13049,6 +13729,9 @@ packages:
     resolution: {integrity: sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==}
     engines: {node: '>=0.10'}
 
+  esrap@2.2.4:
+    resolution: {integrity: sha512-suICpxAmZ9A8bzJjEl/+rLJiDKC0X4gYWUxT6URAWBLvlXmtbZd5ySMu/N2ZGEtMCAmflUDPSehrP9BQcsGcSg==}
+
   esrecurse@4.3.0:
     resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
     engines: {node: '>=4.0'}
@@ -13377,6 +14060,9 @@ packages:
     resolution: {integrity: sha512-VW2RfnmscZO5KgBY5XVyKREMW5nMZcxDy+buTOsL+zIPnBlbKm+00sgzoQzq1EVh4aALZLfKdwv6atBGcjvjrQ==}
     engines: {node: '>=20'}
 
+  find-root@1.1.0:
+    resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
+
   find-up-simple@1.0.1:
     resolution: {integrity: sha512-afd4O7zpqHeRyg4PfDQsXmlDe2PfdHtJt6Akt8jOWaApLOZk5JXs6VMR29lz03pRe9mpykrRCYIYxaJYcfpncQ==}
     engines: {node: '>=18'}
@@ -14032,6 +14718,9 @@ packages:
   hmac-drbg@1.0.1:
     resolution: {integrity: sha512-Tti3gMqLdZfhOQY1Mzf/AanLiqh1WTiJgEj26ZuYQ9fbkLomzGchCws4FyrSd4VkpBfiNhaE1On+lOz894jvXg==}
 
+  hoist-non-react-statics@3.3.2:
+    resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
+
   hono@4.12.9:
     resolution: {integrity: sha512-wy3T8Zm2bsEvxKZM5w21VdHDDcwVS1yUFFY6i8UobSsKfFceT7TOwhbhfKsDyx7tYQlmRM5FLpIuYvNFyjctiA==}
     engines: {node: '>=16.9.0'}
@@ -14696,6 +15385,9 @@ packages:
   is-reference@1.2.1:
     resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
 
+  is-reference@3.0.3:
+    resolution: {integrity: sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==}
+
   is-regex@1.2.1:
     resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
     engines: {node: '>= 0.4'}
@@ -15447,6 +16139,9 @@ packages:
     resolution: {integrity: sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==}
     engines: {node: '>=14'}
 
+  locate-character@3.0.0:
+    resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==}
+
   locate-path@2.0.0:
     resolution: {integrity: sha512-NCI2kiDkyR7VeEKm27Kda/iQHyKJe1Bu0FlTbYp3CqJu+9IFe9bLyAjMxf5ZDDbEg+iMPzB5zYyUTSm8wVTKmA==}
     engines: {node: '>=4'}
@@ -15618,6 +16313,19 @@ packages:
     peerDependencies:
       react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc
 
+  lucide-react@0.511.0:
+    resolution: {integrity: sha512-VK5a2ydJ7xm8GvBeKLS9mu1pVK6ucef9780JVUjw6bAjJL/QXnd4Y0p7SPeOUMC27YhzNCZvm5d/QX0Tp3rc0w==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  lucide-svelte@0.475.0:
+    resolution: {integrity: sha512-N5+hFTPHaZe9HhqJDxxxODfYuOmI6v+JIowzERcea/uxytN/JZlehVTcINBNp8wMo7l6ov1Jf5srrDbkI/WsJg==}
+    peerDependencies:
+      svelte: ^3 || ^4 || ^5.0.0-next.42
+
+  lucide@0.468.0:
+    resolution: {integrity: sha512-UFbgwji/ZnAV7iTTE4jujyTV7J95AILKyATDUrqOJrMcUGfXvGjw3c1mcuHZUX2oJfkrAGU9KoxkrLQk2jjtiA==}
+
   lz-string@1.5.0:
     resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
     hasBin: true
@@ -18419,6 +19127,9 @@ packages:
   react-is@18.3.1:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
 
+  react-is@19.2.4:
+    resolution: {integrity: sha512-W+EWGn2v0ApPKgKKCy/7s7WHXkboGcsrXE+2joLyVxkbyVQfO3MUEaUQDHoSmb8TFFrSKYa9mw64WZHNHSDzYA==}
+
   react-markdown@9.1.0:
     resolution: {integrity: sha512-xaijuJB0kzGiUdG7nc2MOMDUDBWPyGAjZtUrow9XxUeua8IqeP+VlIfAZ3bphpcLTnSZXz6z9jcVC/TCwbfgdw==}
     peerDependencies:
@@ -18918,6 +19629,7 @@ packages:
   rolldown-vite@7.3.1:
     resolution: {integrity: sha512-LYzdNAjRHhF2yA4JUQm/QyARyi216N2rpJ0lJZb8E9FU2y5v6Vk+xq/U4XBOxMefpWixT5H3TslmAHm1rqIq2w==}
     engines: {node: ^20.19.0 || >=22.12.0}
+    deprecated: Use this package to migrate from Vite 7 to Vite 8. For the most recent updates, migrate to Vite 8 once you're ready.
     hasBin: true
     peerDependencies:
       '@types/node': ^20.19.0 || >=22.12.0
@@ -19500,6 +20212,10 @@ packages:
   source-map-support@0.5.21:
     resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
 
+  source-map@0.5.7:
+    resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
+    engines: {node: '>=0.10.0'}
+
   source-map@0.6.1:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
@@ -19820,6 +20536,9 @@ packages:
     peerDependencies:
       postcss: ^8.4.32
 
+  stylis@4.2.0:
+    resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}
+
   sucrase@3.35.1:
     resolution: {integrity: sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -19865,6 +20584,10 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  svelte@5.55.1:
+    resolution: {integrity: sha512-QjvU7EFemf6mRzdMGlAFttMWtAAVXrax61SZYHdkD6yoVGQ89VeyKfZD4H1JrV1WLmJBxWhFch9H6ig/87VGjw==}
+    engines: {node: '>=18'}
+
   svgo@4.0.1:
     resolution: {integrity: sha512-XDpWUOPC6FEibaLzjfe0ucaV0YrOjYotGJO1WpF0Zd+n6ZGEQUsSugaoLq9QkEZtAfQIxT42UChcssDVPP3+/w==}
     engines: {node: '>=16'}
@@ -19896,6 +20619,9 @@ packages:
   tailwind-merge@2.6.1:
     resolution: {integrity: sha512-Oo6tHdpZsGpkKG88HJ8RR1rg/RdnEkQEfMoEk2x1XRI3F1AxeU+ijRXpiVUF4UbLfcxxRGw6TbUINKYdWVsQTQ==}
 
+  tailwind-merge@3.5.0:
+    resolution: {integrity: sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==}
+
   tailwindcss-animate@1.0.7:
     resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
     peerDependencies:
@@ -21067,6 +21793,14 @@ packages:
       yaml:
         optional: true
 
+  vitefu@1.1.3:
+    resolution: {integrity: sha512-ub4okH7Z5KLjb6hDyjqrGXqWtWvoYdU3IGm/NorpgHncKoLTCfRIbvlhBm7r0YstIaQRYlp4yEbFqDcKSzXSSg==}
+    peerDependencies:
+      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+    peerDependenciesMeta:
+      vite:
+        optional: true
+
   vitest@3.2.4:
     resolution: {integrity: sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A==}
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
@@ -21152,6 +21886,12 @@ packages:
   vue-template-compiler@2.7.16:
     resolution: {integrity: sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==}
 
+  vue-tsc@2.2.12:
+    resolution: {integrity: sha512-P7OP77b2h/Pmk+lZdJ0YWs+5tJ6J2+uOQPo7tlBnY44QqQSPYvS0qVT4wqDJgwrZaLe47etJLLQRFia71GYITw==}
+    hasBin: true
+    peerDependencies:
+      typescript: '>=5.0.0'
+
   vue@3.5.25:
     resolution: {integrity: sha512-YLVdgv2K13WJ6n+kD5owehKtEXwdwXuj2TTyJMsO7pSeKw2bfRNZGjhB7YzrpbMYj5b5QsUebHpOqR3R3ziy/g==}
     peerDependencies:
@@ -21160,6 +21900,21 @@ packages:
       typescript:
         optional: true
 
+  vuetify@3.12.4:
+    resolution: {integrity: sha512-9pyvSdL4vGEioOSJKjoyRxyPc2HYYINWkwxE4ku8PuGGRhCoEchXL57EL1JabIy+D8lUsx+co/G+tUaksvpXrw==}
+    peerDependencies:
+      typescript: '>=4.7'
+      vite-plugin-vuetify: '>=2.1.0'
+      vue: 3.5.25
+      webpack-plugin-vuetify: '>=3.1.0'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+      vite-plugin-vuetify:
+        optional: true
+      webpack-plugin-vuetify:
+        optional: true
+
   w3c-keyname@2.2.8:
     resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
 
@@ -21681,6 +22436,9 @@ packages:
   youch@4.1.1:
     resolution: {integrity: sha512-mxW3qiSnl+GRxXsaUMzv2Mbada1Y8CDltET9UxejDQe6DBYlSekghl5U5K0ReAikcHDi0G1vKZEmmo/NWAGKLA==}
 
+  zimmerframe@1.1.4:
+    resolution: {integrity: sha512-B58NGBEoc8Y9MWWCQGl/gq9xBCe4IiKM0a2x7GZdQKOW5Exr8S1W24J6OgM1njK8xCRGvAJIL/MxXHf6SkmQKQ==}
+
   zip-stream@6.0.1:
     resolution: {integrity: sha512-zK7YHHz4ZXpW89AHXUPbQVGKI7uvkd3hzusTdotCg1UxyaVtg0zFJSTfW/Dq5f7OBBVnq6cZIaC8Ti4hb6dtCA==}
     engines: {node: '>= 14'}
@@ -24153,6 +24911,89 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@emotion/babel-plugin@11.13.5':
+    dependencies:
+      '@babel/helper-module-imports': 7.28.6
+      '@babel/runtime': 7.29.2
+      '@emotion/hash': 0.9.2
+      '@emotion/memoize': 0.9.0
+      '@emotion/serialize': 1.3.3
+      babel-plugin-macros: 3.1.0
+      convert-source-map: 1.9.0
+      escape-string-regexp: 4.0.0
+      find-root: 1.1.0
+      source-map: 0.5.7
+      stylis: 4.2.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@emotion/cache@11.14.0':
+    dependencies:
+      '@emotion/memoize': 0.9.0
+      '@emotion/sheet': 1.4.0
+      '@emotion/utils': 1.4.2
+      '@emotion/weak-memoize': 0.4.0
+      stylis: 4.2.0
+
+  '@emotion/hash@0.9.2': {}
+
+  '@emotion/is-prop-valid@1.4.0':
+    dependencies:
+      '@emotion/memoize': 0.9.0
+
+  '@emotion/memoize@0.9.0': {}
+
+  '@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4)':
+    dependencies:
+      '@babel/runtime': 7.29.2
+      '@emotion/babel-plugin': 11.13.5
+      '@emotion/cache': 11.14.0
+      '@emotion/serialize': 1.3.3
+      '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@19.2.4)
+      '@emotion/utils': 1.4.2
+      '@emotion/weak-memoize': 0.4.0
+      hoist-non-react-statics: 3.3.2
+      react: 19.2.4
+    optionalDependencies:
+      '@types/react': 19.2.14
+    transitivePeerDependencies:
+      - supports-color
+
+  '@emotion/serialize@1.3.3':
+    dependencies:
+      '@emotion/hash': 0.9.2
+      '@emotion/memoize': 0.9.0
+      '@emotion/unitless': 0.10.0
+      '@emotion/utils': 1.4.2
+      csstype: 3.2.3
+
+  '@emotion/sheet@1.4.0': {}
+
+  '@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react@19.2.4)':
+    dependencies:
+      '@babel/runtime': 7.29.2
+      '@emotion/babel-plugin': 11.13.5
+      '@emotion/is-prop-valid': 1.4.0
+      '@emotion/react': 11.14.0(@types/react@19.2.14)(react@19.2.4)
+      '@emotion/serialize': 1.3.3
+      '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@19.2.4)
+      '@emotion/utils': 1.4.2
+      react: 19.2.4
+    optionalDependencies:
+      '@types/react': 19.2.14
+    transitivePeerDependencies:
+      - supports-color
+
+  '@emotion/unitless@0.10.0': {}
+
+  '@emotion/use-insertion-effect-with-fallbacks@1.2.0(react@19.2.4)':
+    dependencies:
+      react: 19.2.4
+
+  '@emotion/utils@1.4.2': {}
+
+  '@emotion/weak-memoize@0.4.0': {}
+
   '@es-joy/jsdoccomment@0.56.0':
     dependencies:
       '@types/estree': 1.0.8
@@ -25523,6 +26364,8 @@ snapshots:
       - encoding
       - supports-color
 
+  '@mdi/font@7.4.47': {}
+
   '@mdx-js/mdx@3.1.1':
     dependencies:
       '@types/estree': 1.0.8
@@ -25700,7 +26543,7 @@ snapshots:
       figures: 3.2.0
       fs-extra: 9.1.0
       inquirer: 7.3.3
-      lodash: 4.17.23
+      lodash: 4.17.21
       node-machine-id: 1.1.12
       open: 8.4.2
       semver: 7.7.4
@@ -25794,16 +26637,16 @@ snapshots:
 
   '@microsoft/tsdoc@0.16.0': {}
 
-  '@mintlify/cli@4.0.1049(@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/node@22.19.15)(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(ts-node@10.9.2(@swc/core@1.15.21)(@types/node@22.19.15)(typescript@5.9.3))(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)':
+  '@mintlify/cli@4.0.1049(@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/node@22.19.15)(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(ts-node@10.9.2(@swc/core@1.15.21)(@types/node@22.19.15)(typescript@5.9.3))(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)':
     dependencies:
       '@inquirer/prompts': 7.9.0(@types/node@22.19.15)
-      '@mintlify/common': 1.0.813(@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)
-      '@mintlify/link-rot': 3.0.983(@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(ts-node@10.9.2(@swc/core@1.15.21)(@types/node@22.19.15)(typescript@5.9.3))(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)
+      '@mintlify/common': 1.0.813(@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)
+      '@mintlify/link-rot': 3.0.983(@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(ts-node@10.9.2(@swc/core@1.15.21)(@types/node@22.19.15)(typescript@5.9.3))(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)
       '@mintlify/models': 0.0.286
-      '@mintlify/prebuild': 1.0.954(@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)
-      '@mintlify/previewing': 4.0.1012(@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)
-      '@mintlify/scraping': 4.0.676(@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)
-      '@mintlify/validation': 0.1.640(@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(typescript@5.9.3)
+      '@mintlify/prebuild': 1.0.954(@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)
+      '@mintlify/previewing': 4.0.1012(@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)
+      '@mintlify/scraping': 4.0.676(@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)
+      '@mintlify/validation': 0.1.640(@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(typescript@5.9.3)
       adm-zip: 0.5.16
       chalk: 5.2.0
       color: 4.2.3
@@ -25837,13 +26680,13 @@ snapshots:
       - utf-8-validate
       - yaml
 
-  '@mintlify/common@1.0.661(@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(ts-node@10.9.2(@swc/core@1.15.21)(@types/node@22.19.15)(typescript@5.9.3))(typescript@5.9.3)':
+  '@mintlify/common@1.0.661(@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(ts-node@10.9.2(@swc/core@1.15.21)(@types/node@22.19.15)(typescript@5.9.3))(typescript@5.9.3)':
     dependencies:
       '@asyncapi/parser': 3.4.0
-      '@mintlify/mdx': 3.0.4(@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(typescript@5.9.3)
+      '@mintlify/mdx': 3.0.4(@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(typescript@5.9.3)
       '@mintlify/models': 0.0.255
       '@mintlify/openapi-parser': 0.0.8
-      '@mintlify/validation': 0.1.555(@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(typescript@5.9.3)
+      '@mintlify/validation': 0.1.555(@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(typescript@5.9.3)
       '@sindresorhus/slugify': 2.2.0
       '@types/mdast': 4.0.4
       acorn: 8.11.2
@@ -25897,14 +26740,14 @@ snapshots:
       - ts-node
       - typescript
 
-  '@mintlify/common@1.0.813(@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)':
+  '@mintlify/common@1.0.813(@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)':
     dependencies:
       '@asyncapi/parser': 3.4.0
       '@asyncapi/specs': 6.8.1
-      '@mintlify/mdx': 3.0.4(@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(typescript@5.9.3)
+      '@mintlify/mdx': 3.0.4(@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(typescript@5.9.3)
       '@mintlify/models': 0.0.286
       '@mintlify/openapi-parser': 0.0.8
-      '@mintlify/validation': 0.1.640(@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(typescript@5.9.3)
+      '@mintlify/validation': 0.1.640(@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(typescript@5.9.3)
       '@sindresorhus/slugify': 2.2.0
       '@types/mdast': 4.0.4
       acorn: 8.11.2
@@ -25961,13 +26804,13 @@ snapshots:
       - typescript
       - yaml
 
-  '@mintlify/link-rot@3.0.983(@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(ts-node@10.9.2(@swc/core@1.15.21)(@types/node@22.19.15)(typescript@5.9.3))(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)':
+  '@mintlify/link-rot@3.0.983(@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(ts-node@10.9.2(@swc/core@1.15.21)(@types/node@22.19.15)(typescript@5.9.3))(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)':
     dependencies:
-      '@mintlify/common': 1.0.813(@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)
-      '@mintlify/prebuild': 1.0.954(@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)
-      '@mintlify/previewing': 4.0.1012(@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)
-      '@mintlify/scraping': 4.0.522(@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(ts-node@10.9.2(@swc/core@1.15.21)(@types/node@22.19.15)(typescript@5.9.3))(typescript@5.9.3)
-      '@mintlify/validation': 0.1.640(@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(typescript@5.9.3)
+      '@mintlify/common': 1.0.813(@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)
+      '@mintlify/prebuild': 1.0.954(@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)
+      '@mintlify/previewing': 4.0.1012(@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)
+      '@mintlify/scraping': 4.0.522(@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(ts-node@10.9.2(@swc/core@1.15.21)(@types/node@22.19.15)(typescript@5.9.3))(typescript@5.9.3)
+      '@mintlify/validation': 0.1.640(@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(typescript@5.9.3)
       fs-extra: 11.1.0
       unist-util-visit: 4.1.2
     transitivePeerDependencies:
@@ -25989,9 +26832,9 @@ snapshots:
       - utf-8-validate
       - yaml
 
-  '@mintlify/mdx@3.0.4(@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(typescript@5.9.3)':
+  '@mintlify/mdx@3.0.4(@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(typescript@5.9.3)':
     dependencies:
-      '@radix-ui/react-popover': 1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-popover': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)
       '@shikijs/transformers': 3.23.0
       '@shikijs/twoslash': 3.23.0(typescript@5.9.3)
       arktype: 2.2.0
@@ -26038,12 +26881,12 @@ snapshots:
       leven: 4.1.0
       yaml: 2.8.3
 
-  '@mintlify/prebuild@1.0.954(@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)':
+  '@mintlify/prebuild@1.0.954(@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)':
     dependencies:
-      '@mintlify/common': 1.0.813(@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)
+      '@mintlify/common': 1.0.813(@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)
       '@mintlify/openapi-parser': 0.0.8
-      '@mintlify/scraping': 4.0.676(@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)
-      '@mintlify/validation': 0.1.640(@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(typescript@5.9.3)
+      '@mintlify/scraping': 4.0.676(@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)
+      '@mintlify/validation': 0.1.640(@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(typescript@5.9.3)
       chalk: 5.3.0
       favicons: 7.2.0
       front-matter: 4.0.2
@@ -26071,11 +26914,11 @@ snapshots:
       - utf-8-validate
       - yaml
 
-  '@mintlify/previewing@4.0.1012(@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)':
+  '@mintlify/previewing@4.0.1012(@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)':
     dependencies:
-      '@mintlify/common': 1.0.813(@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)
-      '@mintlify/prebuild': 1.0.954(@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)
-      '@mintlify/validation': 0.1.640(@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(typescript@5.9.3)
+      '@mintlify/common': 1.0.813(@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)
+      '@mintlify/prebuild': 1.0.954(@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)
+      '@mintlify/validation': 0.1.640(@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(typescript@5.9.3)
       better-opn: 3.0.2
       chalk: 5.2.0
       chokidar: 3.5.3
@@ -26110,9 +26953,9 @@ snapshots:
       - utf-8-validate
       - yaml
 
-  '@mintlify/scraping@4.0.522(@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(ts-node@10.9.2(@swc/core@1.15.21)(@types/node@22.19.15)(typescript@5.9.3))(typescript@5.9.3)':
+  '@mintlify/scraping@4.0.522(@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(ts-node@10.9.2(@swc/core@1.15.21)(@types/node@22.19.15)(typescript@5.9.3))(typescript@5.9.3)':
     dependencies:
-      '@mintlify/common': 1.0.661(@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(ts-node@10.9.2(@swc/core@1.15.21)(@types/node@22.19.15)(typescript@5.9.3))(typescript@5.9.3)
+      '@mintlify/common': 1.0.661(@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(ts-node@10.9.2(@swc/core@1.15.21)(@types/node@22.19.15)(typescript@5.9.3))(typescript@5.9.3)
       '@mintlify/openapi-parser': 0.0.8
       fs-extra: 11.1.1
       hast-util-to-mdast: 10.1.0
@@ -26145,9 +26988,9 @@ snapshots:
       - typescript
       - utf-8-validate
 
-  '@mintlify/scraping@4.0.676(@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)':
+  '@mintlify/scraping@4.0.676(@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)':
     dependencies:
-      '@mintlify/common': 1.0.813(@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)
+      '@mintlify/common': 1.0.813(@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)
       '@mintlify/openapi-parser': 0.0.8
       fs-extra: 11.1.1
       hast-util-to-mdast: 10.1.0
@@ -26181,9 +27024,9 @@ snapshots:
       - utf-8-validate
       - yaml
 
-  '@mintlify/validation@0.1.555(@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(typescript@5.9.3)':
+  '@mintlify/validation@0.1.555(@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(typescript@5.9.3)':
     dependencies:
-      '@mintlify/mdx': 3.0.4(@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(typescript@5.9.3)
+      '@mintlify/mdx': 3.0.4(@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(typescript@5.9.3)
       '@mintlify/models': 0.0.255
       arktype: 2.1.27
       js-yaml: 4.1.0
@@ -26203,9 +27046,9 @@ snapshots:
       - supports-color
       - typescript
 
-  '@mintlify/validation@0.1.640(@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(typescript@5.9.3)':
+  '@mintlify/validation@0.1.640(@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(typescript@5.9.3)':
     dependencies:
-      '@mintlify/mdx': 3.0.4(@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(typescript@5.9.3)
+      '@mintlify/mdx': 3.0.4(@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)(typescript@5.9.3)
       '@mintlify/models': 0.0.286
       arktype: 2.1.27
       js-yaml: 4.1.0
@@ -26296,6 +27139,93 @@ snapshots:
   '@msgpackr-extract/msgpackr-extract-win32-x64@3.0.3':
     optional: true
 
+  '@mui/core-downloads-tracker@7.3.9': {}
+
+  '@mui/icons-material@7.3.9(@mui/material@7.3.9(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(@types/react@19.2.14)(react@19.2.4)':
+    dependencies:
+      '@babel/runtime': 7.29.2
+      '@mui/material': 7.3.9(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react: 19.2.4
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@mui/material@7.3.9(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@babel/runtime': 7.29.2
+      '@mui/core-downloads-tracker': 7.3.9
+      '@mui/system': 7.3.9(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react@19.2.4)
+      '@mui/types': 7.4.12(@types/react@19.2.14)
+      '@mui/utils': 7.3.9(@types/react@19.2.14)(react@19.2.4)
+      '@popperjs/core': 2.11.8
+      '@types/react-transition-group': 4.4.12(@types/react@19.2.14)
+      clsx: 2.1.1
+      csstype: 3.2.3
+      prop-types: 15.8.1
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      react-is: 19.2.4
+      react-transition-group: 4.4.5(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+    optionalDependencies:
+      '@emotion/react': 11.14.0(@types/react@19.2.14)(react@19.2.4)
+      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react@19.2.4)
+      '@types/react': 19.2.14
+
+  '@mui/private-theming@7.3.9(@types/react@19.2.14)(react@19.2.4)':
+    dependencies:
+      '@babel/runtime': 7.29.2
+      '@mui/utils': 7.3.9(@types/react@19.2.14)(react@19.2.4)
+      prop-types: 15.8.1
+      react: 19.2.4
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@mui/styled-engine@7.3.9(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@babel/runtime': 7.29.2
+      '@emotion/cache': 11.14.0
+      '@emotion/serialize': 1.3.3
+      '@emotion/sheet': 1.4.0
+      csstype: 3.2.3
+      prop-types: 15.8.1
+      react: 19.2.4
+    optionalDependencies:
+      '@emotion/react': 11.14.0(@types/react@19.2.14)(react@19.2.4)
+      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react@19.2.4)
+
+  '@mui/system@7.3.9(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react@19.2.4)':
+    dependencies:
+      '@babel/runtime': 7.29.2
+      '@mui/private-theming': 7.3.9(@types/react@19.2.14)(react@19.2.4)
+      '@mui/styled-engine': 7.3.9(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react@19.2.4))(react@19.2.4)
+      '@mui/types': 7.4.12(@types/react@19.2.14)
+      '@mui/utils': 7.3.9(@types/react@19.2.14)(react@19.2.4)
+      clsx: 2.1.1
+      csstype: 3.2.3
+      prop-types: 15.8.1
+      react: 19.2.4
+    optionalDependencies:
+      '@emotion/react': 11.14.0(@types/react@19.2.14)(react@19.2.4)
+      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react@19.2.4)
+      '@types/react': 19.2.14
+
+  '@mui/types@7.4.12(@types/react@19.2.14)':
+    dependencies:
+      '@babel/runtime': 7.29.2
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@mui/utils@7.3.9(@types/react@19.2.14)(react@19.2.4)':
+    dependencies:
+      '@babel/runtime': 7.29.2
+      '@mui/types': 7.4.12(@types/react@19.2.14)
+      '@types/prop-types': 15.7.15
+      clsx: 2.1.1
+      prop-types: 15.8.1
+      react: 19.2.4
+      react-is: 19.2.4
+    optionalDependencies:
+      '@types/react': 19.2.14
+
   '@napi-rs/canvas-android-arm64@0.1.80':
     optional: true
 
@@ -26763,7 +27693,7 @@ snapshots:
     transitivePeerDependencies:
       - magicast
 
-  '@nuxt/nitro-server@4.4.2(@azure/identity@4.13.1)(@azure/storage-blob@12.31.0)(@babel/core@7.29.0)(@babel/plugin-proposal-decorators@7.29.0(@babel/core@7.29.0))(better-sqlite3@12.8.0)(db0@0.3.4(better-sqlite3@12.8.0)(drizzle-orm@0.45.2(@opentelemetry/api@1.9.1)(better-sqlite3@12.8.0)(bun-types@1.3.11)(pg@8.20.0)(postgres@3.4.8)))(drizzle-orm@0.45.2(@opentelemetry/api@1.9.1)(better-sqlite3@12.8.0)(bun-types@1.3.11)(pg@8.20.0)(postgres@3.4.8))(ioredis@5.10.1)(magicast@0.5.2)(nuxt@4.4.2(9f8db8e1c76a42c038c7e62f4101cb52))(rolldown@1.0.0-rc.4(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1))(typescript@5.9.3)(xml2js@0.6.2)':
+  '@nuxt/nitro-server@4.4.2(@azure/identity@4.13.1)(@azure/storage-blob@12.31.0)(@babel/core@7.29.0)(@babel/plugin-proposal-decorators@7.29.0(@babel/core@7.29.0))(better-sqlite3@12.8.0)(db0@0.3.4(better-sqlite3@12.8.0)(drizzle-orm@0.45.2(@opentelemetry/api@1.9.1)(better-sqlite3@12.8.0)(bun-types@1.3.11)(pg@8.20.0)(postgres@3.4.8)))(drizzle-orm@0.45.2(@opentelemetry/api@1.9.1)(better-sqlite3@12.8.0)(bun-types@1.3.11)(pg@8.20.0)(postgres@3.4.8))(ioredis@5.10.1)(magicast@0.5.2)(nuxt@4.4.2(9119e209ad8cf55673c89b332bf0c82c))(rolldown@1.0.0-rc.4(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1))(typescript@5.9.3)(xml2js@0.6.2)':
     dependencies:
       '@babel/plugin-syntax-typescript': 7.28.6(@babel/core@7.29.0)
       '@nuxt/devalue': 2.0.2
@@ -26782,7 +27712,7 @@ snapshots:
       klona: 2.0.6
       mocked-exports: 0.1.1
       nitropack: 2.13.2(@azure/identity@4.13.1)(@azure/storage-blob@12.31.0)(better-sqlite3@12.8.0)(drizzle-orm@0.45.2(@opentelemetry/api@1.9.1)(better-sqlite3@12.8.0)(bun-types@1.3.11)(pg@8.20.0)(postgres@3.4.8))(rolldown@1.0.0-rc.4(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1))(xml2js@0.6.2)
-      nuxt: 4.4.2(9f8db8e1c76a42c038c7e62f4101cb52)
+      nuxt: 4.4.2(9119e209ad8cf55673c89b332bf0c82c)
       nypm: 0.6.5
       ohash: 2.0.11
       pathe: 2.0.3
@@ -26851,7 +27781,7 @@ snapshots:
       rc9: 3.0.0
       std-env: 3.10.0
 
-  '@nuxt/vite-builder@4.4.2(@babel/plugin-proposal-decorators@7.29.0(@babel/core@7.29.0))(@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.29.0))(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@22.19.15)(esbuild@0.27.4)(eslint@9.39.4(jiti@2.6.1))(less@4.4.2)(magicast@0.5.2)(meow@13.2.0)(nuxt@4.4.2(9f8db8e1c76a42c038c7e62f4101cb52))(optionator@0.9.4)(rolldown@1.0.0-rc.4(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1))(rollup-plugin-visualizer@7.0.1(rolldown@1.0.0-rc.4(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1))(rollup@4.60.0))(rollup@4.60.0)(sass@1.97.3)(terser@5.46.1)(tsx@4.21.0)(typescript@5.9.3)(vue@3.5.25(typescript@5.9.3))(yaml@2.8.3)':
+  '@nuxt/vite-builder@4.4.2(@babel/plugin-proposal-decorators@7.29.0(@babel/core@7.29.0))(@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.29.0))(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@22.19.15)(esbuild@0.27.4)(eslint@9.39.4(jiti@2.6.1))(less@4.4.2)(magicast@0.5.2)(meow@13.2.0)(nuxt@4.4.2(9119e209ad8cf55673c89b332bf0c82c))(optionator@0.9.4)(rolldown@1.0.0-rc.4(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1))(rollup-plugin-visualizer@7.0.1(rolldown@1.0.0-rc.4(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1))(rollup@4.60.0))(rollup@4.60.0)(sass@1.97.3)(terser@5.46.1)(tsx@4.21.0)(typescript@5.9.3)(vue-tsc@2.2.12(typescript@5.9.3))(vue@3.5.25(typescript@5.9.3))(yaml@2.8.3)':
     dependencies:
       '@nuxt/kit': 4.4.2(magicast@0.5.2)
       '@rollup/plugin-replace': 6.0.3(rollup@4.60.0)
@@ -26869,7 +27799,7 @@ snapshots:
       magic-string: 0.30.21
       mlly: 1.8.2
       mocked-exports: 0.1.1
-      nuxt: 4.4.2(9f8db8e1c76a42c038c7e62f4101cb52)
+      nuxt: 4.4.2(9119e209ad8cf55673c89b332bf0c82c)
       nypm: 0.6.5
       pathe: 2.0.3
       pkg-types: 2.3.0
@@ -26880,7 +27810,7 @@ snapshots:
       unenv: 2.0.0-rc.24
       vite: rolldown-vite@7.3.1(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@22.19.15)(esbuild@0.27.4)(jiti@2.6.1)(less@4.4.2)(sass@1.97.3)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
       vite-node: 5.3.0(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@22.19.15)(esbuild@0.27.4)(jiti@2.6.1)(less@4.4.2)(sass@1.97.3)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
-      vite-plugin-checker: 0.12.0(eslint@9.39.4(jiti@2.6.1))(meow@13.2.0)(optionator@0.9.4)(rolldown-vite@7.3.1(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@22.19.15)(esbuild@0.27.4)(jiti@2.6.1)(less@4.4.2)(sass@1.97.3)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(typescript@5.9.3)
+      vite-plugin-checker: 0.12.0(eslint@9.39.4(jiti@2.6.1))(meow@13.2.0)(optionator@0.9.4)(rolldown-vite@7.3.1(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@22.19.15)(esbuild@0.27.4)(jiti@2.6.1)(less@4.4.2)(sass@1.97.3)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(typescript@5.9.3)(vue-tsc@2.2.12(typescript@5.9.3))
       vue: 3.5.25(typescript@5.9.3)
       vue-bundle-renderer: 2.2.0
     optionalDependencies:
@@ -27623,8 +28553,12 @@ snapshots:
 
   '@radix-ui/number@1.1.0': {}
 
+  '@radix-ui/number@1.1.1': {}
+
   '@radix-ui/primitive@1.1.1': {}
 
+  '@radix-ui/primitive@1.1.3': {}
+
   '@radix-ui/react-accordion@1.2.2(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
@@ -27665,18 +28599,27 @@ snapshots:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-arrow@1.1.1(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)':
+  '@radix-ui/react-arrow@1.1.1(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)
       react: 19.2.3
       react-dom: 19.2.4(react@19.2.3)
     optionalDependencies:
       '@types/react': 19.2.14
       '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-arrow@1.1.1(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+  '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
     dependencies:
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       react: 19.2.4
       react-dom: 19.2.4(react@19.2.4)
     optionalDependencies:
@@ -27776,17 +28719,23 @@ snapshots:
       '@types/react': 19.2.14
       '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-compose-refs@1.1.1(@types/react@18.3.28)(react@18.2.0)':
+  '@radix-ui/react-collection@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
     dependencies:
-      react: 18.2.0
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
     optionalDependencies:
-      '@types/react': 18.3.28
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-compose-refs@1.1.1(@types/react@19.2.14)(react@19.2.3)':
+  '@radix-ui/react-compose-refs@1.1.1(@types/react@18.3.28)(react@18.2.0)':
     dependencies:
-      react: 19.2.3
+      react: 18.2.0
     optionalDependencies:
-      '@types/react': 19.2.14
+      '@types/react': 18.3.28
 
   '@radix-ui/react-compose-refs@1.1.1(@types/react@19.2.14)(react@19.2.4)':
     dependencies:
@@ -27800,6 +28749,18 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.28
 
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.14)(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.14)(react@19.2.4)':
+    dependencies:
+      react: 19.2.4
+    optionalDependencies:
+      '@types/react': 19.2.14
+
   '@radix-ui/react-context-menu@2.2.4(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
@@ -27820,13 +28781,19 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.28
 
-  '@radix-ui/react-context@1.1.1(@types/react@19.2.14)(react@19.2.3)':
+  '@radix-ui/react-context@1.1.1(@types/react@19.2.14)(react@19.2.4)':
+    dependencies:
+      react: 19.2.4
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-context@1.1.2(@types/react@19.2.14)(react@19.2.3)':
     dependencies:
       react: 19.2.3
     optionalDependencies:
       '@types/react': 19.2.14
 
-  '@radix-ui/react-context@1.1.1(@types/react@19.2.14)(react@19.2.4)':
+  '@radix-ui/react-context@1.1.2(@types/react@19.2.14)(react@19.2.4)':
     dependencies:
       react: 19.2.4
     optionalDependencies:
@@ -27866,6 +28833,38 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.14
 
+  '@radix-ui/react-direction@1.1.1(@types/react@19.2.14)(react@19.2.4)':
+    dependencies:
+      react: 19.2.4
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.2.14)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.4(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
   '@radix-ui/react-dismissable-layer@1.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
@@ -27879,19 +28878,6 @@ snapshots:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-dismissable-layer@1.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/react-use-escape-keydown': 1.1.0(@types/react@19.2.14)(react@19.2.3)
-      react: 19.2.3
-      react-dom: 19.2.4(react@19.2.3)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
-
   '@radix-ui/react-dismissable-layer@1.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
@@ -27926,13 +28912,19 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.28
 
-  '@radix-ui/react-focus-guards@1.1.1(@types/react@19.2.14)(react@19.2.3)':
+  '@radix-ui/react-focus-guards@1.1.1(@types/react@19.2.14)(react@19.2.4)':
+    dependencies:
+      react: 19.2.4
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-focus-guards@1.1.3(@types/react@19.2.14)(react@19.2.3)':
     dependencies:
       react: 19.2.3
     optionalDependencies:
       '@types/react': 19.2.14
 
-  '@radix-ui/react-focus-guards@1.1.1(@types/react@19.2.14)(react@19.2.4)':
+  '@radix-ui/react-focus-guards@1.1.3(@types/react@19.2.14)(react@19.2.4)':
     dependencies:
       react: 19.2.4
     optionalDependencies:
@@ -27949,22 +28941,33 @@ snapshots:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-focus-scope@1.1.1(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)':
+  '@radix-ui/react-focus-scope@1.1.1(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.3)
       react: 19.2.3
       react-dom: 19.2.4(react@19.2.3)
     optionalDependencies:
       '@types/react': 19.2.14
       '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-focus-scope@1.1.1(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.14)(react@19.2.4)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.4)
       react: 19.2.4
       react-dom: 19.2.4(react@19.2.4)
     optionalDependencies:
@@ -27995,13 +28998,6 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.28
 
-  '@radix-ui/react-id@1.1.0(@types/react@19.2.14)(react@19.2.3)':
-    dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.2.14)(react@19.2.3)
-      react: 19.2.3
-    optionalDependencies:
-      '@types/react': 19.2.14
-
   '@radix-ui/react-id@1.1.0(@types/react@19.2.14)(react@19.2.4)':
     dependencies:
       '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.2.14)(react@19.2.4)
@@ -28016,6 +29012,20 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.28
 
+  '@radix-ui/react-id@1.1.1(@types/react@19.2.14)(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.3)
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-id@1.1.1(@types/react@19.2.14)(react@19.2.4)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+    optionalDependencies:
+      '@types/react': 19.2.14
+
   '@radix-ui/react-label@2.1.1(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -28091,6 +29101,52 @@ snapshots:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
+  '@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.3)
+      aria-hidden: 1.2.6
+      react: 19.2.3
+      react-dom: 19.2.4(react@19.2.3)
+      react-remove-scroll: 2.7.2(@types/react@19.2.14)(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      aria-hidden: 1.2.6
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      react-remove-scroll: 2.7.2(@types/react@19.2.14)(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
   '@radix-ui/react-popover@1.1.4(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
@@ -28114,29 +29170,6 @@ snapshots:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/react-context': 1.1.1(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/react-dismissable-layer': 1.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-focus-guards': 1.1.1(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/react-focus-scope': 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-id': 1.1.0(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/react-popper': 1.2.1(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-portal': 1.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-presence': 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-slot': 1.1.1(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.2.14)(react@19.2.3)
-      aria-hidden: 1.2.6
-      react: 19.2.3
-      react-dom: 19.2.4(react@19.2.3)
-      react-remove-scroll: 2.7.2(@types/react@19.2.14)(react@19.2.3)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
-
   '@radix-ui/react-popper@1.2.1(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@floating-ui/react-dom': 2.1.8(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -28155,24 +29188,6 @@ snapshots:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-popper@1.2.1(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)':
-    dependencies:
-      '@floating-ui/react-dom': 2.1.8(react-dom@19.2.4(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-arrow': 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/react-context': 1.1.1(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/react-use-rect': 1.1.0(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/react-use-size': 1.1.0(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/rect': 1.1.0
-      react: 19.2.3
-      react-dom: 19.2.4(react@19.2.3)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
-
   '@radix-ui/react-popper@1.2.1(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
     dependencies:
       '@floating-ui/react-dom': 2.1.8(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -28191,6 +29206,42 @@ snapshots:
       '@types/react': 19.2.14
       '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
+  '@radix-ui/react-popper@1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.8(react-dom@19.2.4(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/rect': 1.1.1
+      react: 19.2.3
+      react-dom: 19.2.4(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-popper@1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.8(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/rect': 1.1.1
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
   '@radix-ui/react-portal@1.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -28201,20 +29252,30 @@ snapshots:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-portal@1.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)':
+  '@radix-ui/react-portal@1.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-portal@1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.3)
       react: 19.2.3
       react-dom: 19.2.4(react@19.2.3)
     optionalDependencies:
       '@types/react': 19.2.14
       '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-portal@1.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+  '@radix-ui/react-portal@1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
     dependencies:
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
       react: 19.2.4
       react-dom: 19.2.4(react@19.2.4)
     optionalDependencies:
@@ -28231,20 +29292,30 @@ snapshots:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-presence@1.1.2(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)':
+  '@radix-ui/react-presence@1.1.2(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-presence@1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.3)
       react: 19.2.3
       react-dom: 19.2.4(react@19.2.3)
     optionalDependencies:
       '@types/react': 19.2.14
       '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-presence@1.1.2(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+  '@radix-ui/react-presence@1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.14)(react@19.2.4)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
       react: 19.2.4
       react-dom: 19.2.4(react@19.2.4)
     optionalDependencies:
@@ -28260,18 +29331,27 @@ snapshots:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-primitive@2.0.1(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)':
+  '@radix-ui/react-primitive@2.0.1(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/react-slot': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-slot': 1.1.1(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.3)
       react: 19.2.3
       react-dom: 19.2.4(react@19.2.3)
     optionalDependencies:
       '@types/react': 19.2.14
       '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-primitive@2.0.1(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
     dependencies:
-      '@radix-ui/react-slot': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.4)
       react: 19.2.4
       react-dom: 19.2.4(react@19.2.4)
     optionalDependencies:
@@ -28287,6 +29367,15 @@ snapshots:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
+  '@radix-ui/react-primitive@2.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.4(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
   '@radix-ui/react-progress@1.1.1(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@radix-ui/react-context': 1.1.1(@types/react@18.3.28)(react@18.2.0)
@@ -28349,6 +29438,23 @@ snapshots:
       '@types/react': 19.2.14
       '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
+  '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
   '@radix-ui/react-scroll-area@1.2.2(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@radix-ui/number': 1.1.0
@@ -28441,6 +29547,35 @@ snapshots:
       '@types/react': 19.2.14
       '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
+  '@radix-ui/react-select@2.2.6(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      aria-hidden: 1.2.6
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      react-remove-scroll: 2.7.2(@types/react@19.2.14)(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
   '@radix-ui/react-separator@1.1.1(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -28459,6 +29594,15 @@ snapshots:
       '@types/react': 19.2.14
       '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
+  '@radix-ui/react-separator@1.1.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
   '@radix-ui/react-slider@1.2.2(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@radix-ui/number': 1.1.0
@@ -28485,16 +29629,23 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.28
 
-  '@radix-ui/react-slot@1.1.1(@types/react@19.2.14)(react@19.2.3)':
+  '@radix-ui/react-slot@1.1.1(@types/react@19.2.14)(react@19.2.4)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-slot@1.2.3(@types/react@19.2.14)(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.3)
       react: 19.2.3
     optionalDependencies:
       '@types/react': 19.2.14
 
-  '@radix-ui/react-slot@1.1.1(@types/react@19.2.14)(react@19.2.4)':
+  '@radix-ui/react-slot@1.2.3(@types/react@19.2.14)(react@19.2.4)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
       react: 19.2.4
     optionalDependencies:
       '@types/react': 19.2.14
@@ -28506,6 +29657,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.28
 
+  '@radix-ui/react-slot@1.2.4(@types/react@19.2.14)(react@19.2.4)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+    optionalDependencies:
+      '@types/react': 19.2.14
+
   '@radix-ui/react-switch@1.1.2(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
@@ -28588,6 +29746,21 @@ snapshots:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
+  '@radix-ui/react-toggle-group@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-toggle': 1.1.10(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
   '@radix-ui/react-toggle@1.1.1(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
@@ -28599,6 +29772,17 @@ snapshots:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
+  '@radix-ui/react-toggle@1.1.10(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
   '@radix-ui/react-tooltip@1.1.6(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
@@ -28639,19 +29823,45 @@ snapshots:
       '@types/react': 19.2.14
       '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
+  '@radix-ui/react-tooltip@1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
   '@radix-ui/react-use-callback-ref@1.1.0(@types/react@18.3.28)(react@18.2.0)':
     dependencies:
       react: 18.2.0
     optionalDependencies:
       '@types/react': 18.3.28
 
-  '@radix-ui/react-use-callback-ref@1.1.0(@types/react@19.2.14)(react@19.2.3)':
+  '@radix-ui/react-use-callback-ref@1.1.0(@types/react@19.2.14)(react@19.2.4)':
+    dependencies:
+      react: 19.2.4
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.2.14)(react@19.2.3)':
     dependencies:
       react: 19.2.3
     optionalDependencies:
       '@types/react': 19.2.14
 
-  '@radix-ui/react-use-callback-ref@1.1.0(@types/react@19.2.14)(react@19.2.4)':
+  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.2.14)(react@19.2.4)':
     dependencies:
       react: 19.2.4
     optionalDependencies:
@@ -28664,16 +29874,39 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.28
 
-  '@radix-ui/react-use-controllable-state@1.1.0(@types/react@19.2.14)(react@19.2.3)':
+  '@radix-ui/react-use-controllable-state@1.1.0(@types/react@19.2.14)(react@19.2.4)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.2.14)(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.3)
       react: 19.2.3
     optionalDependencies:
       '@types/react': 19.2.14
 
-  '@radix-ui/react-use-controllable-state@1.1.0(@types/react@19.2.14)(react@19.2.4)':
+  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.2.14)(react@19.2.4)':
     dependencies:
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.2.14)(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.3)
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.2.14)(react@19.2.4)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
       react: 19.2.4
     optionalDependencies:
       '@types/react': 19.2.14
@@ -28685,16 +29918,23 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.28
 
-  '@radix-ui/react-use-escape-keydown@1.1.0(@types/react@19.2.14)(react@19.2.3)':
+  '@radix-ui/react-use-escape-keydown@1.1.0(@types/react@19.2.14)(react@19.2.4)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.2.14)(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.3)
       react: 19.2.3
     optionalDependencies:
       '@types/react': 19.2.14
 
-  '@radix-ui/react-use-escape-keydown@1.1.0(@types/react@19.2.14)(react@19.2.4)':
+  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.2.14)(react@19.2.4)':
     dependencies:
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.4)
       react: 19.2.4
     optionalDependencies:
       '@types/react': 19.2.14
@@ -28705,12 +29945,6 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.28
 
-  '@radix-ui/react-use-layout-effect@1.1.0(@types/react@19.2.14)(react@19.2.3)':
-    dependencies:
-      react: 19.2.3
-    optionalDependencies:
-      '@types/react': 19.2.14
-
   '@radix-ui/react-use-layout-effect@1.1.0(@types/react@19.2.14)(react@19.2.4)':
     dependencies:
       react: 19.2.4
@@ -28723,6 +29957,18 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.28
 
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.2.14)(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.2.14)(react@19.2.4)':
+    dependencies:
+      react: 19.2.4
+    optionalDependencies:
+      '@types/react': 19.2.14
+
   '@radix-ui/react-use-previous@1.1.0(@types/react@18.3.28)(react@18.2.0)':
     dependencies:
       react: 18.2.0
@@ -28735,6 +29981,12 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.14
 
+  '@radix-ui/react-use-previous@1.1.1(@types/react@19.2.14)(react@19.2.4)':
+    dependencies:
+      react: 19.2.4
+    optionalDependencies:
+      '@types/react': 19.2.14
+
   '@radix-ui/react-use-rect@1.1.0(@types/react@18.3.28)(react@18.2.0)':
     dependencies:
       '@radix-ui/rect': 1.1.0
@@ -28742,16 +29994,23 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.28
 
-  '@radix-ui/react-use-rect@1.1.0(@types/react@19.2.14)(react@19.2.3)':
+  '@radix-ui/react-use-rect@1.1.0(@types/react@19.2.14)(react@19.2.4)':
     dependencies:
       '@radix-ui/rect': 1.1.0
+      react: 19.2.4
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-use-rect@1.1.1(@types/react@19.2.14)(react@19.2.3)':
+    dependencies:
+      '@radix-ui/rect': 1.1.1
       react: 19.2.3
     optionalDependencies:
       '@types/react': 19.2.14
 
-  '@radix-ui/react-use-rect@1.1.0(@types/react@19.2.14)(react@19.2.4)':
+  '@radix-ui/react-use-rect@1.1.1(@types/react@19.2.14)(react@19.2.4)':
     dependencies:
-      '@radix-ui/rect': 1.1.0
+      '@radix-ui/rect': 1.1.1
       react: 19.2.4
     optionalDependencies:
       '@types/react': 19.2.14
@@ -28763,16 +30022,23 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.28
 
-  '@radix-ui/react-use-size@1.1.0(@types/react@19.2.14)(react@19.2.3)':
+  '@radix-ui/react-use-size@1.1.0(@types/react@19.2.14)(react@19.2.4)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-use-size@1.1.1(@types/react@19.2.14)(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.3)
       react: 19.2.3
     optionalDependencies:
       '@types/react': 19.2.14
 
-  '@radix-ui/react-use-size@1.1.0(@types/react@19.2.14)(react@19.2.4)':
+  '@radix-ui/react-use-size@1.1.1(@types/react@19.2.14)(react@19.2.4)':
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
       react: 19.2.4
     optionalDependencies:
       '@types/react': 19.2.14
@@ -28795,8 +30061,19 @@ snapshots:
       '@types/react': 19.2.14
       '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
+  '@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
   '@radix-ui/rect@1.1.0': {}
 
+  '@radix-ui/rect@1.1.1': {}
+
   '@redis/bloom@5.11.0(@redis/client@5.11.0)':
     dependencies:
       '@redis/client': 5.11.0
@@ -29870,6 +31147,32 @@ snapshots:
       '@stoplight/yaml-ast-parser': 0.0.50
       tslib: 2.8.1
 
+  '@sveltejs/acorn-typescript@1.0.9(acorn@8.16.0)':
+    dependencies:
+      acorn: 8.16.0
+
+  '@sveltejs/vite-plugin-svelte-inspector@4.0.1(@sveltejs/vite-plugin-svelte@5.1.1(rolldown-vite@7.3.1(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@22.19.15)(esbuild@0.27.4)(jiti@2.6.1)(less@4.4.2)(sass@1.97.3)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(svelte@5.55.1))(rolldown-vite@7.3.1(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@22.19.15)(esbuild@0.27.4)(jiti@2.6.1)(less@4.4.2)(sass@1.97.3)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(svelte@5.55.1)':
+    dependencies:
+      '@sveltejs/vite-plugin-svelte': 5.1.1(rolldown-vite@7.3.1(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@22.19.15)(esbuild@0.27.4)(jiti@2.6.1)(less@4.4.2)(sass@1.97.3)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(svelte@5.55.1)
+      debug: 4.4.3(supports-color@5.5.0)
+      svelte: 5.55.1
+      vite: rolldown-vite@7.3.1(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@22.19.15)(esbuild@0.27.4)(jiti@2.6.1)(less@4.4.2)(sass@1.97.3)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@sveltejs/vite-plugin-svelte@5.1.1(rolldown-vite@7.3.1(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@22.19.15)(esbuild@0.27.4)(jiti@2.6.1)(less@4.4.2)(sass@1.97.3)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(svelte@5.55.1)':
+    dependencies:
+      '@sveltejs/vite-plugin-svelte-inspector': 4.0.1(@sveltejs/vite-plugin-svelte@5.1.1(rolldown-vite@7.3.1(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@22.19.15)(esbuild@0.27.4)(jiti@2.6.1)(less@4.4.2)(sass@1.97.3)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(svelte@5.55.1))(rolldown-vite@7.3.1(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@22.19.15)(esbuild@0.27.4)(jiti@2.6.1)(less@4.4.2)(sass@1.97.3)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(svelte@5.55.1)
+      debug: 4.4.3(supports-color@5.5.0)
+      deepmerge: 4.3.1
+      kleur: 4.1.5
+      magic-string: 0.30.21
+      svelte: 5.55.1
+      vite: rolldown-vite@7.3.1(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@22.19.15)(esbuild@0.27.4)(jiti@2.6.1)(less@4.4.2)(sass@1.97.3)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
+      vitefu: 1.1.3(rolldown-vite@7.3.1(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@22.19.15)(esbuild@0.27.4)(jiti@2.6.1)(less@4.4.2)(sass@1.97.3)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
+    transitivePeerDependencies:
+      - supports-color
+
   '@swc/core-darwin-arm64@1.15.21':
     optional: true
 
@@ -30340,6 +31643,8 @@ snapshots:
 
   '@types/office-runtime@1.0.36': {}
 
+  '@types/parse-json@4.0.2': {}
+
   '@types/parse5@6.0.3': {}
 
   '@types/pegjs@0.10.6':
@@ -30359,6 +31664,10 @@ snapshots:
     dependencies:
       '@types/react': 19.2.14
 
+  '@types/react-transition-group@4.4.12(@types/react@19.2.14)':
+    dependencies:
+      '@types/react': 19.2.14
+
   '@types/react@18.3.28':
     dependencies:
       '@types/prop-types': 15.7.15
@@ -30419,6 +31728,8 @@ snapshots:
 
   '@types/triple-beam@1.3.5': {}
 
+  '@types/trusted-types@2.0.7': {}
+
   '@types/unist@2.0.11': {}
 
   '@types/unist@3.0.3': {}
@@ -31214,12 +32525,24 @@ snapshots:
       loupe: 3.2.1
       tinyrainbow: 2.0.0
 
+  '@volar/language-core@2.4.15':
+    dependencies:
+      '@volar/source-map': 2.4.15
+
   '@volar/language-core@2.4.28':
     dependencies:
       '@volar/source-map': 2.4.28
 
+  '@volar/source-map@2.4.15': {}
+
   '@volar/source-map@2.4.28': {}
 
+  '@volar/typescript@2.4.15':
+    dependencies:
+      '@volar/language-core': 2.4.15
+      path-browserify: 1.0.1
+      vscode-uri: 3.1.0
+
   '@volar/typescript@2.4.28':
     dependencies:
       '@volar/language-core': 2.4.28
@@ -31459,6 +32782,19 @@ snapshots:
     optionalDependencies:
       typescript: 5.9.3
 
+  '@vue/language-core@2.2.12(typescript@5.9.3)':
+    dependencies:
+      '@volar/language-core': 2.4.15
+      '@vue/compiler-dom': 3.5.25
+      '@vue/compiler-vue2': 2.7.16
+      '@vue/shared': 3.5.25
+      alien-signals: 1.0.13
+      minimatch: 9.0.9
+      muggle-string: 0.4.1
+      path-browserify: 1.0.1
+    optionalDependencies:
+      typescript: 5.9.3
+
   '@vue/reactivity@3.5.25':
     dependencies:
       '@vue/shared': 3.5.25
@@ -31821,6 +33157,8 @@ snapshots:
 
   alien-signals@0.4.14: {}
 
+  alien-signals@1.0.13: {}
+
   ansi-align@3.0.1:
     dependencies:
       string-width: 4.2.3
@@ -31927,6 +33265,8 @@ snapshots:
     dependencies:
       dequal: 2.0.3
 
+  aria-query@5.3.1: {}
+
   aria-query@5.3.2: {}
 
   arkregex@0.0.3:
@@ -32222,6 +33562,12 @@ snapshots:
       schema-utils: 4.3.3
       webpack: 5.105.4(esbuild@0.27.4)(webpack-cli@5.1.4)
 
+  babel-plugin-macros@3.1.0:
+    dependencies:
+      '@babel/runtime': 7.29.2
+      cosmiconfig: 7.1.0
+      resolve: 1.22.11
+
   babel-plugin-polyfill-corejs2@0.4.17(@babel/core@7.29.0):
     dependencies:
       '@babel/compat-data': 7.29.0
@@ -33284,6 +34630,14 @@ snapshots:
       jiti: 2.6.1
       typescript: 5.9.3
 
+  cosmiconfig@7.1.0:
+    dependencies:
+      '@types/parse-json': 4.0.2
+      import-fresh: 3.3.1
+      parse-json: 5.2.0
+      path-type: 4.0.0
+      yaml: 1.10.3
+
   cosmiconfig@9.0.1(typescript@5.9.3):
     dependencies:
       env-paths: 2.2.1
@@ -33627,7 +34981,9 @@ snapshots:
     dependencies:
       mimic-response: 3.1.0
 
-  dedent@1.7.2: {}
+  dedent@1.7.2(babel-plugin-macros@3.1.0):
+    optionalDependencies:
+      babel-plugin-macros: 3.1.0
 
   deep-eql@4.1.4:
     dependencies:
@@ -34799,6 +36155,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  esm-env@1.2.2: {}
+
   espree@10.4.0:
     dependencies:
       acorn: 8.16.0
@@ -34817,6 +36175,11 @@ snapshots:
     dependencies:
       estraverse: 5.3.0
 
+  esrap@2.2.4:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@typescript-eslint/types': 8.57.2
+
   esrecurse@4.3.0:
     dependencies:
       estraverse: 5.3.0
@@ -35307,6 +36670,8 @@ snapshots:
       fast-querystring: 1.1.2
       safe-regex2: 5.1.0
 
+  find-root@1.1.0: {}
+
   find-up-simple@1.0.1: {}
 
   find-up@2.1.0:
@@ -36285,6 +37650,10 @@ snapshots:
       minimalistic-assert: 1.0.1
       minimalistic-crypto-utils: 1.0.1
 
+  hoist-non-react-statics@3.3.2:
+    dependencies:
+      react-is: 16.13.1
+
   hono@4.12.9: {}
 
   hook-std@4.0.0: {}
@@ -37026,6 +38395,10 @@ snapshots:
     dependencies:
       '@types/estree': 1.0.8
 
+  is-reference@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.8
+
   is-regex@1.2.1:
     dependencies:
       call-bound: 1.0.4
@@ -37802,6 +39175,8 @@ snapshots:
       pkg-types: 2.3.0
       quansync: 0.2.11
 
+  locate-character@3.0.0: {}
+
   locate-path@2.0.0:
     dependencies:
       p-locate: 2.0.0
@@ -37952,6 +39327,16 @@ snapshots:
     dependencies:
       react: 18.2.0
 
+  lucide-react@0.511.0(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+
+  lucide-svelte@0.475.0(svelte@5.55.1):
+    dependencies:
+      svelte: 5.55.1
+
+  lucide@0.468.0: {}
+
   lz-string@1.5.0: {}
 
   magic-regexp@0.10.0:
@@ -39124,9 +40509,9 @@ snapshots:
     dependencies:
       minipass: 7.1.3
 
-  mintlify@4.2.446(@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/node@22.19.15)(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(ts-node@10.9.2(@swc/core@1.15.21)(@types/node@22.19.15)(typescript@5.9.3))(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3):
+  mintlify@4.2.446(@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/node@22.19.15)(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(ts-node@10.9.2(@swc/core@1.15.21)(@types/node@22.19.15)(typescript@5.9.3))(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3):
     dependencies:
-      '@mintlify/cli': 4.0.1049(@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/node@22.19.15)(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(ts-node@10.9.2(@swc/core@1.15.21)(@types/node@22.19.15)(typescript@5.9.3))(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)
+      '@mintlify/cli': 4.0.1049(@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(react@19.2.3))(@types/node@22.19.15)(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.3))(ts-node@10.9.2(@swc/core@1.15.21)(@types/node@22.19.15)(typescript@5.9.3))(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)
     transitivePeerDependencies:
       - '@radix-ui/react-popover'
       - '@types/node'
@@ -39820,16 +41205,16 @@ snapshots:
     optionalDependencies:
       chokidar: 5.0.0
 
-  nuxt@4.4.2(9f8db8e1c76a42c038c7e62f4101cb52):
+  nuxt@4.4.2(9119e209ad8cf55673c89b332bf0c82c):
     dependencies:
       '@dxup/nuxt': 0.4.0(magicast@0.5.2)(typescript@5.9.3)
       '@nuxt/cli': 3.34.0(@nuxt/schema@4.4.2)(cac@6.7.14)(magicast@0.5.2)
       '@nuxt/devtools': 3.2.4(vite@7.3.1(@types/node@22.19.15)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vue@3.5.25(typescript@5.9.3))
       '@nuxt/kit': 4.4.2(magicast@0.5.2)
-      '@nuxt/nitro-server': 4.4.2(@azure/identity@4.13.1)(@azure/storage-blob@12.31.0)(@babel/core@7.29.0)(@babel/plugin-proposal-decorators@7.29.0(@babel/core@7.29.0))(better-sqlite3@12.8.0)(db0@0.3.4(better-sqlite3@12.8.0)(drizzle-orm@0.45.2(@opentelemetry/api@1.9.1)(better-sqlite3@12.8.0)(bun-types@1.3.11)(pg@8.20.0)(postgres@3.4.8)))(drizzle-orm@0.45.2(@opentelemetry/api@1.9.1)(better-sqlite3@12.8.0)(bun-types@1.3.11)(pg@8.20.0)(postgres@3.4.8))(ioredis@5.10.1)(magicast@0.5.2)(nuxt@4.4.2(9f8db8e1c76a42c038c7e62f4101cb52))(rolldown@1.0.0-rc.4(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1))(typescript@5.9.3)(xml2js@0.6.2)
+      '@nuxt/nitro-server': 4.4.2(@azure/identity@4.13.1)(@azure/storage-blob@12.31.0)(@babel/core@7.29.0)(@babel/plugin-proposal-decorators@7.29.0(@babel/core@7.29.0))(better-sqlite3@12.8.0)(db0@0.3.4(better-sqlite3@12.8.0)(drizzle-orm@0.45.2(@opentelemetry/api@1.9.1)(better-sqlite3@12.8.0)(bun-types@1.3.11)(pg@8.20.0)(postgres@3.4.8)))(drizzle-orm@0.45.2(@opentelemetry/api@1.9.1)(better-sqlite3@12.8.0)(bun-types@1.3.11)(pg@8.20.0)(postgres@3.4.8))(ioredis@5.10.1)(magicast@0.5.2)(nuxt@4.4.2(9119e209ad8cf55673c89b332bf0c82c))(rolldown@1.0.0-rc.4(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1))(typescript@5.9.3)(xml2js@0.6.2)
       '@nuxt/schema': 4.4.2
       '@nuxt/telemetry': 2.7.0(@nuxt/kit@4.4.2(magicast@0.5.2))
-      '@nuxt/vite-builder': 4.4.2(@babel/plugin-proposal-decorators@7.29.0(@babel/core@7.29.0))(@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.29.0))(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@22.19.15)(esbuild@0.27.4)(eslint@9.39.4(jiti@2.6.1))(less@4.4.2)(magicast@0.5.2)(meow@13.2.0)(nuxt@4.4.2(9f8db8e1c76a42c038c7e62f4101cb52))(optionator@0.9.4)(rolldown@1.0.0-rc.4(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1))(rollup-plugin-visualizer@7.0.1(rolldown@1.0.0-rc.4(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1))(rollup@4.60.0))(rollup@4.60.0)(sass@1.97.3)(terser@5.46.1)(tsx@4.21.0)(typescript@5.9.3)(vue@3.5.25(typescript@5.9.3))(yaml@2.8.3)
+      '@nuxt/vite-builder': 4.4.2(@babel/plugin-proposal-decorators@7.29.0(@babel/core@7.29.0))(@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.29.0))(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@22.19.15)(esbuild@0.27.4)(eslint@9.39.4(jiti@2.6.1))(less@4.4.2)(magicast@0.5.2)(meow@13.2.0)(nuxt@4.4.2(9119e209ad8cf55673c89b332bf0c82c))(optionator@0.9.4)(rolldown@1.0.0-rc.4(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1))(rollup-plugin-visualizer@7.0.1(rolldown@1.0.0-rc.4(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1))(rollup@4.60.0))(rollup@4.60.0)(sass@1.97.3)(terser@5.46.1)(tsx@4.21.0)(typescript@5.9.3)(vue-tsc@2.2.12(typescript@5.9.3))(vue@3.5.25(typescript@5.9.3))(yaml@2.8.3)
       '@unhead/vue': 2.1.12(vue@3.5.25(typescript@5.9.3))
       '@vue/shared': 3.5.25
       c12: 3.3.3(magicast@0.5.2)
@@ -41373,7 +42758,7 @@ snapshots:
       err-code: 2.0.3
       retry: 0.12.0
 
-  promptfoo@0.121.3(@types/json-schema@7.0.15)(@types/node@18.19.130)(@types/react@19.2.14)(bun-types@1.3.11)(canvas@3.2.2)(pg@8.20.0)(playwright-core@1.58.2)(postgres@3.4.8)(socks@2.8.7)(typescript@5.9.3):
+  promptfoo@0.121.3(@types/json-schema@7.0.15)(@types/node@18.19.130)(@types/react@19.2.14)(babel-plugin-macros@3.1.0)(bun-types@1.3.11)(canvas@3.2.2)(pg@8.20.0)(playwright-core@1.58.2)(postgres@3.4.8)(socks@2.8.7)(typescript@5.9.3):
     dependencies:
       '@anthropic-ai/sdk': 0.80.0(zod@4.3.6)
       '@apidevtools/json-schema-ref-parser': 15.3.4(@types/json-schema@7.0.15)
@@ -41412,7 +42797,7 @@ snapshots:
       csv-parse: 6.2.1
       csv-stringify: 6.7.0
       debounce: 3.0.0
-      dedent: 1.7.2
+      dedent: 1.7.2(babel-plugin-macros@3.1.0)
       dotenv: 17.3.1
       drizzle-orm: 0.45.2(@opentelemetry/api@1.9.1)(better-sqlite3@12.8.0)(bun-types@1.3.11)(pg@8.20.0)(postgres@3.4.8)
       execa: 9.6.1
@@ -41966,6 +43351,8 @@ snapshots:
 
   react-is@18.3.1: {}
 
+  react-is@19.2.4: {}
+
   react-markdown@9.1.0(@types/react@19.2.14)(react@19.2.4):
     dependencies:
       '@types/hast': 3.0.4
@@ -42115,6 +43502,15 @@ snapshots:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
+  react-transition-group@4.4.5(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+    dependencies:
+      '@babel/runtime': 7.29.2
+      dom-helpers: 5.2.1
+      loose-envify: 1.4.0
+      prop-types: 15.8.1
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+
   react@18.2.0:
     dependencies:
       loose-envify: 1.4.0
@@ -43710,6 +45106,8 @@ snapshots:
       buffer-from: 1.1.2
       source-map: 0.6.1
 
+  source-map@0.5.7: {}
+
   source-map@0.6.1: {}
 
   source-map@0.7.6: {}
@@ -44044,6 +45442,8 @@ snapshots:
       postcss: 8.5.8
       postcss-selector-parser: 7.1.1
 
+  stylis@4.2.0: {}
+
   sucrase@3.35.1:
     dependencies:
       '@jridgewell/gen-mapping': 0.3.13
@@ -44101,6 +45501,25 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  svelte@5.55.1:
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@sveltejs/acorn-typescript': 1.0.9(acorn@8.16.0)
+      '@types/estree': 1.0.8
+      '@types/trusted-types': 2.0.7
+      acorn: 8.16.0
+      aria-query: 5.3.1
+      axobject-query: 4.1.0
+      clsx: 2.1.1
+      devalue: 5.6.4
+      esm-env: 1.2.2
+      esrap: 2.2.4
+      is-reference: 3.0.3
+      locate-character: 3.0.0
+      magic-string: 0.30.21
+      zimmerframe: 1.1.4
+
   svgo@4.0.1:
     dependencies:
       commander: 11.1.0
@@ -44142,6 +45561,8 @@ snapshots:
 
   tailwind-merge@2.6.1: {}
 
+  tailwind-merge@3.5.0: {}
+
   tailwindcss-animate@1.0.7(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.3)):
     dependencies:
       tailwindcss: 3.4.19(tsx@4.21.0)(yaml@2.8.3)
@@ -45613,7 +47034,7 @@ snapshots:
       - tsx
       - yaml
 
-  vite-plugin-checker@0.12.0(eslint@9.39.4(jiti@2.6.1))(meow@13.2.0)(optionator@0.9.4)(rolldown-vite@7.3.1(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@22.19.15)(esbuild@0.27.4)(jiti@2.6.1)(less@4.4.2)(sass@1.97.3)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(typescript@5.9.3):
+  vite-plugin-checker@0.12.0(eslint@9.39.4(jiti@2.6.1))(meow@13.2.0)(optionator@0.9.4)(rolldown-vite@7.3.1(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@22.19.15)(esbuild@0.27.4)(jiti@2.6.1)(less@4.4.2)(sass@1.97.3)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(typescript@5.9.3)(vue-tsc@2.2.12(typescript@5.9.3)):
     dependencies:
       '@babel/code-frame': 7.29.0
       chokidar: 4.0.3
@@ -45629,6 +47050,7 @@ snapshots:
       meow: 13.2.0
       optionator: 0.9.4
       typescript: 5.9.3
+      vue-tsc: 2.2.12(typescript@5.9.3)
 
   vite-plugin-dts@4.5.4(@types/node@22.19.15)(rolldown-vite@7.3.1(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@22.19.15)(esbuild@0.27.4)(jiti@2.6.1)(less@4.4.2)(sass@1.97.3)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(rollup@4.60.0)(typescript@5.9.3):
     dependencies:
@@ -45801,6 +47223,10 @@ snapshots:
       tsx: 4.21.0
       yaml: 2.8.3
 
+  vitefu@1.1.3(rolldown-vite@7.3.1(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@22.19.15)(esbuild@0.27.4)(jiti@2.6.1)(less@4.4.2)(sass@1.97.3)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)):
+    optionalDependencies:
+      vite: rolldown-vite@7.3.1(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@22.19.15)(esbuild@0.27.4)(jiti@2.6.1)(less@4.4.2)(sass@1.97.3)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
+
   vitest@3.2.4(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/debug@4.1.13)(@types/node@22.19.15)(esbuild@0.27.4)(happy-dom@20.4.0)(jiti@2.6.1)(jsdom@27.3.0(canvas@3.2.2))(less@4.4.2)(sass@1.97.3)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3):
     dependencies:
       '@types/chai': 5.2.3
@@ -46086,6 +47512,12 @@ snapshots:
       he: 1.2.0
     optional: true
 
+  vue-tsc@2.2.12(typescript@5.9.3):
+    dependencies:
+      '@volar/typescript': 2.4.15
+      '@vue/language-core': 2.2.12(typescript@5.9.3)
+      typescript: 5.9.3
+
   vue@3.5.25(typescript@5.9.3):
     dependencies:
       '@vue/compiler-dom': 3.5.25
@@ -46096,6 +47528,12 @@ snapshots:
     optionalDependencies:
       typescript: 5.9.3
 
+  vuetify@3.12.4(typescript@5.9.3)(vue@3.5.25(typescript@5.9.3)):
+    dependencies:
+      vue: 3.5.25(typescript@5.9.3)
+    optionalDependencies:
+      typescript: 5.9.3
+
   w3c-keyname@2.2.8: {}
 
   w3c-xmlserializer@5.0.0:
@@ -46766,6 +48204,8 @@ snapshots:
       cookie-es: 3.1.1
       youch-core: 0.3.3
 
+  zimmerframe@1.1.4: {}
+
   zip-stream@6.0.1:
     dependencies:
       archiver-utils: 5.0.2