From 3472cdf0d7d2758a7d4ad298ae1dc139fd16cfbe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20B=C3=BCrgin-Fix?= <sebastian.buergin@codebar.ch>
Date: Wed, 29 Jul 2026 03:59:21 +0200
Subject: [PATCH 1/4] Release v1.6.0: CodeEditor + FullscreenPanel promotions,
 PageHeading actions slot, Card sm size

Additive package changes for the app-wide frontend consistency refactor:
- Promote CodeEditor (replacing the app's JsonEditor/MarkdownEditor) and
  FullscreenPanel into the kit, both lazy-loading CodeMirror consistently
  with CodePreview's existing convention.
- Add an optional #actions slot to PageHeading and a purple legacy tone
  alias to StatusBadge, closing gaps the app was working around locally.
- Add a Card size="sm" variant for nested/compact container use.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 package-lock.json                             |  21 +++
 package.json                                  |  10 +-
 src/components/atoms/StatusBadge.stories.ts   |   6 +
 src/components/molecules/Card.stories.ts      |   9 +
 src/components/molecules/Card.vue             |  10 +-
 .../molecules/FullscreenPanel.stories.ts      |  27 +++
 src/components/molecules/FullscreenPanel.vue  |  38 +++++
 .../molecules/PageHeading.stories.ts          |  17 ++
 src/components/molecules/PageHeading.vue      |  49 +++---
 .../organisms/CodeEditor.stories.ts           |  40 +++++
 src/components/organisms/CodeEditor.vue       | 155 ++++++++++++++++++
 src/components/organisms/CodePreview.vue      |  22 +--
 src/composables/useEscapeKey.ts               |  14 +-
 src/helpers/codeMirrorTheme.ts                |  48 ++++++
 src/helpers/tone.ts                           |   6 +-
 src/index.ts                                  |   6 +
 16 files changed, 437 insertions(+), 41 deletions(-)
 create mode 100644 src/components/molecules/FullscreenPanel.stories.ts
 create mode 100644 src/components/molecules/FullscreenPanel.vue
 create mode 100644 src/components/organisms/CodeEditor.stories.ts
 create mode 100644 src/components/organisms/CodeEditor.vue
 create mode 100644 src/helpers/codeMirrorTheme.ts

diff --git a/package-lock.json b/package-lock.json
index 75dabff..41d20b6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,8 +12,10 @@
         "tailwind-merge": "^3.0.0"
       },
       "devDependencies": {
+        "@codemirror/commands": "^6.10.4",
         "@codemirror/lang-json": "^6.0.2",
         "@codemirror/lang-markdown": "^6.5.0",
+        "@codemirror/language": "^6.12.4",
         "@codemirror/state": "^6.7.0",
         "@codemirror/view": "^6.43.4",
         "@playwright/test": "^1.48.0",
@@ -40,12 +42,18 @@
         "vue": "^3.5.0"
       },
       "peerDependenciesMeta": {
+        "@codemirror/commands": {
+          "optional": true
+        },
         "@codemirror/lang-json": {
           "optional": true
         },
         "@codemirror/lang-markdown": {
           "optional": true
         },
+        "@codemirror/language": {
+          "optional": true
+        },
         "@codemirror/state": {
           "optional": true
         },
@@ -154,6 +162,19 @@
         "@lezer/common": "^1.0.0"
       }
     },
+    "node_modules/@codemirror/commands": {
+      "version": "6.10.4",
+      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.10.4.tgz",
+      "integrity": "sha512-Ryk9y9T0FFVF0cUGhAknveAyUOl/A1qReTFi+qPKtOh2Z9F4AUBz3XOrYD4ZEgZirdugVzHvd/2/Wcwy5OliTg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.7.0",
+        "@codemirror/view": "^6.27.0",
+        "@lezer/common": "^1.1.0"
+      }
+    },
     "node_modules/@codemirror/lang-css": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.3.1.tgz",
diff --git a/package.json b/package.json
index eb88829..b17a482 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@codebar-ag/storybook",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "codebar-ag DocuHub — shared Vue 3 + Tailwind v4 design-system atoms and tokens, documented in Storybook.",
   "license": "MIT",
   "author": "codebar Solutions AG",
@@ -54,11 +54,19 @@
     },
     "@codemirror/lang-markdown": {
       "optional": true
+    },
+    "@codemirror/commands": {
+      "optional": true
+    },
+    "@codemirror/language": {
+      "optional": true
     }
   },
   "devDependencies": {
+    "@codemirror/commands": "^6.10.4",
     "@codemirror/lang-json": "^6.0.2",
     "@codemirror/lang-markdown": "^6.5.0",
+    "@codemirror/language": "^6.12.4",
     "@codemirror/state": "^6.7.0",
     "@codemirror/view": "^6.43.4",
     "@playwright/test": "^1.48.0",
diff --git a/src/components/atoms/StatusBadge.stories.ts b/src/components/atoms/StatusBadge.stories.ts
index cbfd28b..264faf8 100644
--- a/src/components/atoms/StatusBadge.stories.ts
+++ b/src/components/atoms/StatusBadge.stories.ts
@@ -37,3 +37,9 @@ export const InstanceStatuses: Story = {
         </div>`,
     }),
 };
+
+// `purple` is a deprecated legacy alias (rides `info`) for non-severity
+// statuses like "seen this before" — e.g. a duplicate webhook delivery.
+export const LegacyPurpleAlias: Story = {
+    args: { variant: 'purple', label: 'Duplicate', dot: false },
+};
diff --git a/src/components/molecules/Card.stories.ts b/src/components/molecules/Card.stories.ts
index 3daf674..47de170 100644
--- a/src/components/molecules/Card.stories.ts
+++ b/src/components/molecules/Card.stories.ts
@@ -30,3 +30,12 @@ export const WithActionsAndFooter: Story = {
         </Card>`,
     }),
 };
+
+export const Small: Story = {
+    render: () => ({
+        components: { Card },
+        template: `<Card size="sm" title="Header field">
+            <p class="text-sm text-muted">A denser card for rows nested inside a larger container.</p>
+        </Card>`,
+    }),
+};
diff --git a/src/components/molecules/Card.vue b/src/components/molecules/Card.vue
index b800a0a..cae8127 100644
--- a/src/components/molecules/Card.vue
+++ b/src/components/molecules/Card.vue
@@ -13,8 +13,10 @@ const props = withDefaults(
         variant?: 'default' | 'danger';
         hoverable?: boolean;
         // 'lg' is for screens with a single, centered card as the focal point
-        // (e.g. auth screens) where the default density reads cramped.
-        size?: 'md' | 'lg';
+        // (e.g. auth screens) where the default density reads cramped. 'sm'
+        // is for cards nested inside another card/list — a denser container,
+        // not a different component.
+        size?: 'sm' | 'md' | 'lg';
     }>(),
     { title: null, description: null, padded: true, variant: 'default', hoverable: false, size: 'md' },
 );
@@ -25,18 +27,22 @@ const { rootAttrs, classAttr } = useRootAttrs();
 const variants: Record<string, string> = { default: '', danger: 'border-danger-line/60' };
 
 const headerPadding: Record<string, string> = {
+    sm: 'px-3 sm:px-4 pt-3 pb-2.5',
     md: 'px-4 sm:px-5 pt-5 pb-4',
     lg: 'px-5 sm:px-6 pt-6 pb-5',
 };
 const bodyPadding: Record<string, string> = {
+    sm: 'px-3 sm:px-4 py-3',
     md: 'px-4 sm:px-5 py-5',
     lg: 'px-5 sm:px-6 py-6',
 };
 const footerPadding: Record<string, string> = {
+    sm: 'px-3 sm:px-4 py-2.5',
     md: 'px-4 sm:px-5 py-4',
     lg: 'px-5 sm:px-6 py-5',
 };
 const titleSize: Record<string, string> = {
+    sm: 'text-sm',
     md: 'text-lg',
     lg: 'text-xl',
 };
diff --git a/src/components/molecules/FullscreenPanel.stories.ts b/src/components/molecules/FullscreenPanel.stories.ts
new file mode 100644
index 0000000..fb2fe8e
--- /dev/null
+++ b/src/components/molecules/FullscreenPanel.stories.ts
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import FullscreenPanel from './FullscreenPanel.vue';
+import Button from '../atoms/Button.vue';
+
+const meta: Meta<typeof FullscreenPanel> = {
+    title: 'Molecules/FullscreenPanel',
+    component: FullscreenPanel,
+    parameters: { layout: 'padded' },
+};
+
+export default meta;
+type Story = StoryObj<typeof FullscreenPanel>;
+
+export const Default: Story = {
+    render: () => ({
+        components: { FullscreenPanel, Button },
+        template: `<FullscreenPanel v-slot="{ isFullscreen, toggle }">
+            <div class="flex items-center justify-between border-b border-line pb-2 mb-2">
+                <span class="text-sm text-muted">{{ isFullscreen ? 'Fullscreen' : 'Inline' }}</span>
+                <Button size="sm" variant="secondary" @click="toggle">
+                    {{ isFullscreen ? 'Exit fullscreen' : 'Expand' }}
+                </Button>
+            </div>
+            <p class="text-sm text-ink">Editor content lives in the default slot.</p>
+        </FullscreenPanel>`,
+    }),
+};
diff --git a/src/components/molecules/FullscreenPanel.vue b/src/components/molecules/FullscreenPanel.vue
new file mode 100644
index 0000000..11fe9d7
--- /dev/null
+++ b/src/components/molecules/FullscreenPanel.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+// Wraps a section and lets it expand to cover the whole viewport. Exposes
+// { isFullscreen, toggle } as slot props so the caller keeps its own toolbar
+// (save/versions/badges) visible while fullscreen. Escape exits; scrolling
+// behind the panel is locked while open.
+import { ref } from 'vue';
+import { useEscapeKey } from '../../composables/useEscapeKey';
+import { useScrollLock } from '../../composables/useScrollLock';
+
+const isFullscreen = ref(false);
+
+function toggle(): void {
+    isFullscreen.value = !isFullscreen.value;
+}
+
+// Capture phase + stopPropagation: a CodeMirror editor inside the default
+// slot binds its own Escape handling in the bubble phase, so this has to
+// win the race to actually exit fullscreen instead of the editor eating it.
+useEscapeKey(
+    (event) => {
+        event.stopPropagation();
+        isFullscreen.value = false;
+    },
+    isFullscreen,
+    { capture: true },
+);
+
+useScrollLock(isFullscreen);
+</script>
+
+<template>
+  <div :class="isFullscreen ? 'fixed inset-0 z-50 flex flex-col overflow-hidden bg-bg p-4' : ''">
+    <slot
+      :is-fullscreen="isFullscreen"
+      :toggle="toggle"
+    />
+  </div>
+</template>
diff --git a/src/components/molecules/PageHeading.stories.ts b/src/components/molecules/PageHeading.stories.ts
index 49a8f82..3b9358b 100644
--- a/src/components/molecules/PageHeading.stories.ts
+++ b/src/components/molecules/PageHeading.stories.ts
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import PageHeading from './PageHeading.vue';
+import Button from '../atoms/Button.vue';
 
 const meta: Meta<typeof PageHeading> = {
     title: 'Molecules/PageHeading',
@@ -30,3 +31,19 @@ export const WithDescription: Story = {
         </PageHeading>`,
     }),
 };
+
+export const WithActions: Story = {
+    render: () => ({
+        components: { PageHeading, Button },
+        template: `<PageHeading eyebrow="Mustermann AG">
+            File cabinets
+            <template #description>
+                Archives and document trays available to the connected MCP gateway.
+            </template>
+            <template #actions>
+                <Button variant="secondary" size="sm">Export</Button>
+                <Button size="sm">New cabinet</Button>
+            </template>
+        </PageHeading>`,
+    }),
+};
diff --git a/src/components/molecules/PageHeading.vue b/src/components/molecules/PageHeading.vue
index 84e0da7..fc49fca 100644
--- a/src/components/molecules/PageHeading.vue
+++ b/src/components/molecules/PageHeading.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 // Page/section title, optionally preceded by an eyebrow caption and followed
 // by a description. Covers the plain `<h1 class="text-xl font-semibold
-// text-ink">` pattern repeated across most pages — badges/actions alongside
-// the title stay as siblings in the caller's own header row.
+// text-ink">` pattern repeated across most pages. An optional `#actions`
+// slot renders a right-aligned action cluster beside the title (wraps below
+// it on narrow screens) — omit the slot and this renders exactly as before.
 import { computed, useSlots } from 'vue';
 import { cx } from '../../helpers/cx';
 import { useRootAttrs } from '../../composables/useRootAttrs';
@@ -23,24 +24,32 @@ const classes = computed(() => cx('text-xl font-semibold text-ink', classAttr.va
 </script>
 
 <template>
-  <div class="min-w-0">
-    <p
-      v-if="eyebrow"
-      class="text-2xs uppercase tracking-wide text-muted"
+  <div class="flex flex-wrap items-start justify-between gap-4">
+    <div class="min-w-0">
+      <p
+        v-if="eyebrow"
+        class="text-2xs uppercase tracking-wide text-muted"
+      >
+        {{ eyebrow }}
+      </p>
+      <h1
+        :class="classes"
+        v-bind="rootAttrs"
+      >
+        <slot />
+      </h1>
+      <p
+        v-if="slots.description"
+        class="mt-1 text-sm text-muted"
+      >
+        <slot name="description" />
+      </p>
+    </div>
+    <div
+      v-if="slots.actions"
+      class="flex flex-wrap items-center gap-2 shrink-0"
     >
-      {{ eyebrow }}
-    </p>
-    <h1
-      :class="classes"
-      v-bind="rootAttrs"
-    >
-      <slot />
-    </h1>
-    <p
-      v-if="slots.description"
-      class="mt-1 text-sm text-muted"
-    >
-      <slot name="description" />
-    </p>
+      <slot name="actions" />
+    </div>
   </div>
 </template>
diff --git a/src/components/organisms/CodeEditor.stories.ts b/src/components/organisms/CodeEditor.stories.ts
new file mode 100644
index 0000000..968cb02
--- /dev/null
+++ b/src/components/organisms/CodeEditor.stories.ts
@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import CodeEditor from './CodeEditor.vue';
+
+const meta: Meta<typeof CodeEditor> = {
+    title: 'Organisms/CodeEditor',
+    component: CodeEditor,
+    parameters: { layout: 'padded' },
+    args: {
+        modelValue: '{\n  "vendor": "string",\n  "invoice_number": "string"\n}',
+        language: 'json',
+    },
+    render: (args) => ({
+        components: { CodeEditor },
+        setup: () => ({ args }),
+        template: '<div class="h-64"><CodeEditor v-bind="args" /></div>',
+    }),
+};
+
+export default meta;
+type Story = StoryObj<typeof CodeEditor>;
+
+export const Json: Story = {};
+
+export const Markdown: Story = {
+    args: {
+        modelValue: '# Extraction prompt\n\nSummarize the invoice fields below.',
+        language: 'markdown',
+    },
+};
+
+export const ReadOnlyEmpty: Story = {
+    render: () => ({
+        components: { CodeEditor },
+        template: '<div class="h-64"><CodeEditor readonly placeholder="No schema yet." /></div>',
+    }),
+};
+
+export const AutoHeight: Story = {
+    args: { autoHeight: true, maxHeight: '12rem' },
+};
diff --git a/src/components/organisms/CodeEditor.vue b/src/components/organisms/CodeEditor.vue
new file mode 100644
index 0000000..7a8fd4e
--- /dev/null
+++ b/src/components/organisms/CodeEditor.vue
@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import type { EditorView as EditorViewType } from '@codemirror/view';
+import { createCodeMirrorTheme } from '../../helpers/codeMirrorTheme';
+
+// CodeMirror is an OPTIONAL peer dependency: it is imported lazily so apps
+// that never render an editor don't pay for the bundle (same convention as
+// CodePreview, this component's read-only sibling).
+
+const props = withDefaults(
+    defineProps<{
+        modelValue?: string;
+        language?: 'json' | 'markdown';
+        readonly?: boolean;
+        /** Empty-state text shown only while readonly and there's no value. No default — the caller's copy. */
+        placeholder?: string | null;
+        autoHeight?: boolean;
+        maxHeight?: string | null;
+    }>(),
+    {
+        modelValue: '',
+        language: 'json',
+        readonly: false,
+        placeholder: null,
+        autoHeight: false,
+        maxHeight: null,
+    },
+);
+
+const emit = defineEmits<{ 'update:modelValue': [value: string] }>();
+
+const host = ref<HTMLElement | null>(null);
+let view: EditorViewType | null = null;
+
+function formatValue(raw: string): string {
+    if (!raw || props.language !== 'json') {
+        return raw ?? '';
+    }
+
+    try {
+        return JSON.stringify(JSON.parse(raw), null, 2);
+    } catch {
+        return raw;
+    }
+}
+
+async function loadLanguage(language: string) {
+    if (language === 'markdown') {
+        const { markdown, markdownLanguage } = await import('@codemirror/lang-markdown');
+        return markdown({ base: markdownLanguage });
+    }
+
+    return (await import('@codemirror/lang-json')).json();
+}
+
+async function mountEditor(): Promise<void> {
+    if (!host.value) {
+        return;
+    }
+
+    const [{ EditorState }, EditorViewModule, { defaultKeymap, history, historyKeymap }, { syntaxHighlighting, defaultHighlightStyle }, lang] =
+        await Promise.all([
+            import('@codemirror/state'),
+            import('@codemirror/view'),
+            import('@codemirror/commands'),
+            import('@codemirror/language'),
+            loadLanguage(props.language),
+        ]);
+    const { EditorView, keymap, lineNumbers } = EditorViewModule;
+
+    if (!host.value) {
+        return;
+    }
+
+    view?.destroy();
+
+    view = new EditorView({
+        state: EditorState.create({
+            doc: formatValue(props.modelValue ?? ''),
+            extensions: [
+                lineNumbers(),
+                history(),
+                lang,
+                syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+                EditorView.lineWrapping,
+                keymap.of([...defaultKeymap, ...historyKeymap]),
+                EditorView.updateListener.of((update) => {
+                    if (update.docChanged && !props.readonly) {
+                        emit('update:modelValue', update.state.doc.toString());
+                    }
+                }),
+                EditorView.editable.of(!props.readonly),
+                EditorState.readOnly.of(props.readonly),
+                createCodeMirrorTheme(EditorViewModule, { autoHeight: props.autoHeight }),
+            ],
+        }),
+        parent: host.value,
+    });
+}
+
+function syncDocument(value: string): void {
+    if (!view) {
+        return;
+    }
+
+    const formatted = formatValue(value ?? '');
+
+    if (view.state.doc.toString() === formatted) {
+        return;
+    }
+
+    view.dispatch({
+        changes: { from: 0, to: view.state.doc.length, insert: formatted },
+    });
+}
+
+onMounted(mountEditor);
+
+watch(
+    () => props.readonly,
+    () => mountEditor(),
+);
+
+watch(
+    () => props.language,
+    () => mountEditor(),
+);
+
+watch(
+    () => props.modelValue,
+    (value) => syncDocument(value ?? ''),
+);
+
+onBeforeUnmount(() => view?.destroy());
+</script>
+
+<template>
+  <div
+    class="relative flex flex-col rounded-control border border-line bg-surface"
+    :class="autoHeight ? 'overflow-y-auto' : 'h-full min-h-0 overflow-hidden'"
+    :style="autoHeight && maxHeight ? { maxHeight } : undefined"
+  >
+    <div
+      v-if="!modelValue && readonly && placeholder"
+      :class="autoHeight ? 'flex min-h-16 items-center justify-center' : 'pointer-events-none absolute inset-0 flex items-center justify-center'"
+      class="text-sm text-muted"
+    >
+      {{ placeholder }}
+    </div>
+    <div
+      ref="host"
+      :class="autoHeight ? '' : 'min-h-0 flex-1'"
+    />
+  </div>
+</template>
diff --git a/src/components/organisms/CodePreview.vue b/src/components/organisms/CodePreview.vue
index 19db003..3506d03 100644
--- a/src/components/organisms/CodePreview.vue
+++ b/src/components/organisms/CodePreview.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import type { EditorView as EditorViewType } from '@codemirror/view';
+import { createCodeMirrorTheme } from '../../helpers/codeMirrorTheme';
 
 // CodeMirror is an OPTIONAL peer dependency: it is imported lazily so apps
 // that never render a code preview don't pay for the bundle.
@@ -54,11 +55,12 @@ async function mount(): Promise<void> {
         return;
     }
 
-    const [{ EditorState }, { EditorView, lineNumbers }, lang] = await Promise.all([
+    const [{ EditorState }, EditorViewModule, lang] = await Promise.all([
         import('@codemirror/state'),
         import('@codemirror/view'),
         loadLanguage(props.language),
     ]);
+    const { EditorView, lineNumbers } = EditorViewModule;
 
     if (!host.value) {
         return;
@@ -74,20 +76,12 @@ async function mount(): Promise<void> {
                 EditorView.lineWrapping,
                 lineNumbers(),
                 lang,
+                // Shared theme (same as CodeEditor) plus this component's own
+                // maxHeight cap, which only makes sense for a preview surface.
+                createCodeMirrorTheme(EditorViewModule, { autoHeight: true }),
                 EditorView.theme({
-                    '&': {
-                        fontSize: '12px',
-                        backgroundColor: 'transparent',
-                    },
-                    '.cm-scroller': {
-                        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
-                        overflow: 'auto',
-                        maxHeight: props.maxHeight,
-                    },
-                    '.cm-gutters': {
-                        backgroundColor: 'transparent',
-                        borderRight: '1px solid var(--color-line, #e5e7eb)',
-                    },
+                    '&': { fontSize: '12px' },
+                    '.cm-scroller': { maxHeight: props.maxHeight },
                 }),
             ],
         }),
diff --git a/src/composables/useEscapeKey.ts b/src/composables/useEscapeKey.ts
index 3b7c171..9ecff8a 100644
--- a/src/composables/useEscapeKey.ts
+++ b/src/composables/useEscapeKey.ts
@@ -6,15 +6,23 @@ import type { Ref } from 'vue';
  * `enabled` is true. The listener only exists while enabled (checked
  * immediately, so an initially-open overlay is covered too) and is always
  * removed on unmount. SSR-safe (no-op without document).
+ *
+ * Pass `capture: true` when the overlay can contain a focused child that
+ * binds its own Escape handling in the bubble phase (e.g. a CodeMirror
+ * editor) and needs to be beaten to the key. Combine with
+ * `event.stopPropagation()` inside `handler` to actually suppress it.
  */
 export function useEscapeKey(
     handler: (event: KeyboardEvent) => void,
     enabled: Ref<boolean>,
+    options: { capture?: boolean } = {},
 ): void {
     if (typeof document === 'undefined') {
         return;
     }
 
+    const capture = options.capture ?? false;
+
     function onKeydown(event: KeyboardEvent): void {
         if (event.key === 'Escape') {
             handler(event);
@@ -25,13 +33,13 @@ export function useEscapeKey(
         enabled,
         (on) => {
             if (on) {
-                document.addEventListener('keydown', onKeydown);
+                document.addEventListener('keydown', onKeydown, { capture });
             } else {
-                document.removeEventListener('keydown', onKeydown);
+                document.removeEventListener('keydown', onKeydown, { capture });
             }
         },
         { immediate: true },
     );
 
-    onBeforeUnmount(() => document.removeEventListener('keydown', onKeydown));
+    onBeforeUnmount(() => document.removeEventListener('keydown', onKeydown, { capture }));
 }
diff --git a/src/helpers/codeMirrorTheme.ts b/src/helpers/codeMirrorTheme.ts
new file mode 100644
index 0000000..5aacfdc
--- /dev/null
+++ b/src/helpers/codeMirrorTheme.ts
@@ -0,0 +1,48 @@
+import type { Extension } from '@codemirror/state';
+import type * as EditorViewModuleType from '@codemirror/view';
+
+/**
+ * Shared CodeMirror theme for every editor/preview surface in the kit
+ * (CodeEditor, CodePreview). Colors reference the design tokens' CSS custom
+ * properties directly (see tokens.css for the source of truth) instead of
+ * embedding literal hex fallbacks, so every consumer stays in sync
+ * automatically and never drifts from the token layer.
+ *
+ * Takes the dynamically-imported `@codemirror/view` module itself (rather
+ * than importing it statically here) so this helper doesn't force the
+ * optional-peer bundle cost on consumers who never render an editor.
+ */
+export function createCodeMirrorTheme(
+    { EditorView }: Pick<typeof EditorViewModuleType, 'EditorView'>,
+    { autoHeight = false }: { autoHeight?: boolean } = {},
+): Extension {
+    return EditorView.theme({
+        '&': {
+            fontSize: '13px',
+            backgroundColor: 'transparent',
+            ...(autoHeight ? {} : { height: '100%' }),
+        },
+        '.cm-scroller': {
+            fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+            ...(autoHeight ? {} : { height: '100%', overflow: 'auto' }),
+        },
+        '.cm-gutters': {
+            backgroundColor: 'transparent',
+            borderRight: '1px solid var(--color-line)',
+            color: 'var(--color-muted)',
+        },
+        '.cm-content': {
+            padding: '12px 0',
+            caretColor: 'var(--color-ink)',
+        },
+        '.cm-activeLine': {
+            backgroundColor: 'color-mix(in srgb, var(--color-surface-2) 60%, transparent)',
+        },
+        '&.cm-focused .cm-cursor': {
+            borderLeftColor: 'var(--color-ink)',
+        },
+        '.cm-selectionBackground, &.cm-focused .cm-selectionBackground': {
+            backgroundColor: 'color-mix(in srgb, var(--color-accent) 20%, transparent) !important',
+        },
+    });
+}
diff --git a/src/helpers/tone.ts b/src/helpers/tone.ts
index 72fdc4e..04a3e1c 100644
--- a/src/helpers/tone.ts
+++ b/src/helpers/tone.ts
@@ -9,7 +9,7 @@
 export type Tone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
 
 /** @deprecated Use the semantic {@link Tone} names instead. */
-export type LegacyTone = 'gray' | 'blue' | 'green' | 'amber' | 'red' | 'error';
+export type LegacyTone = 'gray' | 'blue' | 'green' | 'amber' | 'red' | 'error' | 'purple';
 
 const LEGACY_TONES: Record<LegacyTone, Tone> = {
     gray: 'neutral',
@@ -18,6 +18,10 @@ const LEGACY_TONES: Record<LegacyTone, Tone> = {
     amber: 'warning',
     red: 'danger',
     error: 'danger',
+    // Not a severity — "seen this before" (e.g. a duplicate-delivery status).
+    // The tone vocabulary stays at 5 semantic values, so this rides `info`
+    // rather than introducing a 6th hue.
+    purple: 'info',
 };
 
 const warned = new Set<string>();
diff --git a/src/index.ts b/src/index.ts
index 68664e9..249e5e6 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -13,6 +13,7 @@ import AppShell from './components/layouts/AppShell.vue';
 import Card from './components/molecules/Card.vue';
 import Chart from './components/organisms/Chart.vue';
 import Checkbox from './components/atoms/Checkbox.vue';
+import CodeEditor from './components/organisms/CodeEditor.vue';
 import CodeLine from './components/molecules/CodeLine.vue';
 import CodePreview from './components/organisms/CodePreview.vue';
 import Combobox from './components/molecules/Combobox.vue';
@@ -32,6 +33,7 @@ import FileInput from './components/molecules/FileInput.vue';
 import FilterBar from './components/molecules/FilterBar.vue';
 import FormActions from './components/molecules/FormActions.vue';
 import FormGrid from './components/molecules/FormGrid.vue';
+import FullscreenPanel from './components/molecules/FullscreenPanel.vue';
 import Icon from './components/atoms/Icon.vue';
 import IconBadge from './components/atoms/IconBadge.vue';
 import IdCell from './components/atoms/IdCell.vue';
@@ -94,6 +96,7 @@ export {
     Card,
     Chart,
     Checkbox,
+    CodeEditor,
     CodeLine,
     CodePreview,
     Combobox,
@@ -113,6 +116,7 @@ export {
     FilterBar,
     FormActions,
     FormGrid,
+    FullscreenPanel,
     Icon,
     IconBadge,
     IdCell,
@@ -214,6 +218,7 @@ const components: Record<string, Component> = {
     Card,
     Chart,
     Checkbox,
+    CodeEditor,
     CodeLine,
     CodePreview,
     Combobox,
@@ -233,6 +238,7 @@ const components: Record<string, Component> = {
     FilterBar,
     FormActions,
     FormGrid,
+    FullscreenPanel,
     Icon,
     IconBadge,
     IdCell,

From e45f86797dbc5f8d46c95cc11b3a196a3fbe6adb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20B=C3=BCrgin-Fix?= <sebastian.buergin@codebar.ch>
Date: Thu, 30 Jul 2026 07:46:17 +0200
Subject: [PATCH 2/4] Release v1.7.0 with a dedicated changelog
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Version 1.7.0 rather than 1.6.0: that version is already tagged and published,
so it cannot be republished. 1.7.0 is the first release whose `main` actually
contains the v1.6.0 work, which until the preceding merge existed only on an
orphaned tag.

Adds CHANGELOG.md and moves the release notes out of the README, which had
accumulated three "What's new in …" sections and the v1.3.0 migration notes.
Versions between those and now had no notes at all; the gaps are filled from
each release commit rather than invented, and v1.4.0 is marked superseded since
v1.4.1 exists only to revert it.

Documents the tokenless git-dependency install in the README, and corrects the
claim there that a token is needed because the package is private — it is needed
because GitHub's npm registry authenticates every read, public or not.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 CHANGELOG.md      | 156 ++++++++++++++++++++++++++++++++++++++++++++++
 README.md         |  92 ++++++++-------------------
 package-lock.json |   4 +-
 package.json      |   2 +-
 4 files changed, 186 insertions(+), 68 deletions(-)
 create mode 100644 CHANGELOG.md

diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..85d2cc9
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,156 @@
+# Changelog
+
+All notable changes to `@codebar-ag/storybook`.
+
+The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) and
+this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## v1.7.0
+
+### Added
+
+- **Tokenless installs from this repository.** A `prepare` script builds `dist`
+  on install, so the package can be consumed straight from the public repo as a
+  git dependency and no GitHub Packages token is needed:
+
+  ```json
+  "@codebar-ag/storybook": "github:codebar-ag/storybook.codebar.ch#v1.7.0"
+  ```
+
+  `files` is `["dist"]` and `dist` is gitignored, so a git install previously
+  resolved to a package with no entry point at all. It also means `npm publish`
+  always ships a freshly built `dist` rather than whatever was last in the
+  working tree.
+
+- `CHANGELOG.md` — release notes now live here instead of in the README.
+
+### Fixed
+
+- **The dependency tree could not be installed at all.** `npm ci` failed on
+  `main` — and with it the `release`, `pages` and `test` workflows — because
+  `@storybook/vue3-vite` was `^10.5.3` while `storybook` stayed `^9.0.0` and both
+  addons `^9.1.20`, leaving its peer requirement of `storybook@^10`
+  unsatisfiable.
+
+- **All five security advisories cleared** (`npm audit`: 0 vulnerabilities, was
+  5 high). The half-finished `^10.5.3` bump was reaching for a real fix, so it
+  was completed rather than reverted: aligning the Storybook family on `^10.5.5`
+  pulls `vue-component-meta` and `@vue/language-core` to versions whose
+  `minimatch`/`brace-expansion` are patched, and takes `postcss` to `8.5.25`,
+  closing the source-map path-traversal advisory.
+
+- **`main` had lost the published v1.6.0.** That release was tagged and
+  published from a commit that was never merged, so `main` was missing
+  `CodeEditor`, `FullscreenPanel`, `Card`'s `sm` size, the `PageHeading` actions
+  slot and the `CodePreview` changes — 437 lines that consumers on `^1.6.0`
+  already depended on. Merged back in; anything released from `main` before this
+  would have silently regressed them.
+
+- Two implicit-`any` handler parameters in `Pagination.vue`. Pre-existing and
+  unrelated to the upgrade, but `typecheck` could not run while the tree was
+  uninstallable, so nothing had reported them.
+
+### Changed
+
+- Storybook and its addons: `^9` → `^10.5.5`. No config migration was needed —
+  the full docs build and all 184 Playwright story tests pass unchanged.
+- `publishConfig.access`: `restricted` → `public`. This affects *future*
+  publishes only. The existing package's visibility is a setting on the package
+  itself, and GitHub's npm registry requires a token for every read regardless
+  of visibility — the git dependency above is what actually removes the token.
+
+## v1.6.0
+
+- `CodeEditor` and `FullscreenPanel` promoted to the public API.
+- `PageHeading` gained an actions slot.
+- `Card` gained the `sm` size.
+- `CodePreview` and `useEscapeKey` refinements, plus `codeMirrorTheme` helper.
+
+> **Note:** published to GitHub Packages but never merged to `main`. If you
+> pinned a git dependency to a commit rather than the tag, upgrade to v1.7.0,
+> which is the first release where `main` actually contains this work.
+
+## v1.5.0
+
+- `Toaster` gained a `maxWidth` prop.
+- `DataTable` row cursor fix.
+
+## v1.4.3
+
+- Maintenance release.
+
+## v1.4.2
+
+- **Placeholder names in story fixtures.** Real client and person names were
+  replaced with `Mustermann AG` / `Max Mustermann` placeholders (and
+  `mustermann.*` hosts) throughout the Storybook stories. No component or API
+  changes.
+
+## v1.4.1
+
+- **All-mono restored.** v1.4.0 switched the UI font to Inter; that is reverted.
+  The all-mono look (JetBrains Mono everywhere, via `--font-mono`) is the
+  brand's visual identity and is intentional. Skip v1.4.0 and upgrade straight
+  to v1.4.1.
+
+## v1.4.0
+
+- Switched the UI font to Inter. **Superseded — do not use;** see v1.4.1.
+
+## v1.3.1
+
+- Restored the package name `@codebar-ag/storybook`.
+
+## v1.3.0
+
+### Added
+
+- **New components** — atoms `Avatar`, `Divider`, `Kbd`, `Spinner`; molecules
+  `Accordion`/`AccordionItem`, `Combobox`, `InputNumber`, `PasswordInput`,
+  `PinInput`, `Popover`, `Tabs`, `Tooltip`; organisms `DataTable` (sortable,
+  selectable, paginated), `Drawer`, `Navbar`, `Sidebar`/`SidebarGroup`/
+  `SidebarItem`; layouts `AppShell`, `AuthLayout`, `ErrorLayout`.
+- **Composables are now part of the public API** — overlay/keyboard utilities
+  (`useFocusTrap`, `useClickOutside`, `useEscapeKey`, `useScrollLock`,
+  `useListNavigation`), form helpers (`useFieldA11y`, `useFormErrors`,
+  `usePasswordManagerAttrs`), data-table helpers (`useSort`, `useSelection`,
+  `usePagination`), plus `useControllable` and `useRootAttrs`.
+- **Helpers** — `cx` class combiner and `resolveTone` with the
+  `Tone`/`LegacyTone` types.
+- **Storybook** — Foundations docs (colors, typography, spacing, radii &
+  shadows, icons), example pages (Auth, Errors, Dashboard), docs + a11y
+  addons, and per-story play functions that run in CI via Playwright.
+
+### Migration notes
+
+Non-breaking, but worth knowing when upgrading:
+
+- **Tones unified.** `Badge`/`StatusBadge` now use the semantic tones
+  `neutral | info | success | warning | danger`; `Alert` gained `danger`.
+  The old values (`gray`/`blue`/`green`/`amber`/`red`, Alert's `error`) keep
+  rendering identically via `resolveTone()` but log a dev-only deprecation
+  warning and will be removed in the next major.
+- **Dropdown DOM changed.** The root moved from `<details>/<summary>` to
+  `<div><button aria-haspopup="menu">…` with full keyboard support (arrows,
+  Home/End, Escape, click-outside). Props and slots are unchanged; only CSS
+  targeting `details`/`summary` needs updating. Optional `v-model:open`.
+- **Button** gained a `loading` prop (spinner + `disabled` + `aria-busy`);
+  the default slot is now wrapped in a layout `<span>`.
+- **Modal** now traps focus, locks page scroll, restores focus on close and
+  supports `initialFocus`; API unchanged.
+- **FileInput** supports `v-model` (`File[]`); the previous `change`
+  (FileList) emit is retained. It now renders inside the standard control box.
+- **`Switch`** is a new alias export for `Toggle` (both names work).
+- **Components moved** into `src/components/{atoms,molecules,organisms,layouts}`;
+  the public API (`src/index.ts`) is unchanged.
+- **Storybook story IDs changed** with the new `Foundations/Atoms/Molecules/
+  Organisms/Layouts/Pages` hierarchy — deep links into the published
+  styleguide need re-copying.
+- **Bugfix:** dismissed toasts were hidden but never removed from the DOM
+  (`useToast` reassigned the array its consumers had captured); they are now
+  spliced in place.
+
+## v1.2.0
+
+- First public shape of the design system: Vue 3 + Tailwind v4 atoms, tokens
+  and Storybook.
diff --git a/README.md b/README.md
index 304e3f2..225db69 100644
--- a/README.md
+++ b/README.md
@@ -15,7 +15,24 @@ and its variants, deployed automatically from `main`.
 
 ## Install
 
-The package is published to **GitHub Packages**. Add an `.npmrc` to the consuming app:
+Two ways, and the first needs no credentials.
+
+### From this repository — no token
+
+The repository is public and `prepare` builds `dist` on install, so a git
+dependency works anywhere with no setup:
+
+```bash
+npm install github:codebar-ag/storybook.codebar.ch#v1.7.0
+```
+
+Pin a tag rather than a branch, so installs stay reproducible. npm installs this
+repo's devDependencies to run the build, which makes a cold install slower than a
+registry one — that is the trade for needing no token.
+
+### From GitHub Packages — token required
+
+Add an `.npmrc` to the consuming app:
 
 ```
 @codebar-ag:registry=https://npm.pkg.github.com
@@ -26,10 +43,11 @@ The package is published to **GitHub Packages**. Add an `.npmrc` to the consumin
 npm install @codebar-ag/storybook
 ```
 
-> **Note:** the package is private; GitHub's npm registry requires
-> authentication to install. Set `GITHUB_TOKEN` to a GitHub token with the
-> `read:packages` scope (a classic PAT works) — locally, in CI, and on deploy
-> targets.
+> **Note:** GitHub's npm registry requires authentication for **every** read,
+> public packages included — unlike npmjs.com. This repository being public does
+> not change that, and neither does the package's own visibility. Set
+> `GITHUB_TOKEN` to a token with the `read:packages` scope (a classic PAT works,
+> as does `gh auth token`) locally, in CI, and on every deploy target.
 
 ## Use
 
@@ -108,66 +126,10 @@ npm run typecheck        # vue-tsc
 npm run lint
 ```
 
-## What's new in v1.4.2
-
-- **Placeholder names in story fixtures.** Real client and person names were
-  replaced with `Mustermann AG` / `Max Mustermann` placeholders (and
-  `mustermann.*` hosts) throughout the Storybook stories. No component or API
-  changes.
-
-## What's new in v1.4.1
-
-- **All-mono restored.** v1.4.0 switched the UI font to Inter; that is reverted.
-  The all-mono look (JetBrains Mono everywhere, via `--font-mono`) is the
-  brand's visual identity and is intentional. Skip v1.4.0 and upgrade straight
-  to v1.4.1.
-
-## What's new in v1.3.0
-
-- **New components** — atoms `Avatar`, `Divider`, `Kbd`, `Spinner`; molecules
-  `Accordion`/`AccordionItem`, `Combobox`, `InputNumber`, `PasswordInput`,
-  `PinInput`, `Popover`, `Tabs`, `Tooltip`; organisms `DataTable` (sortable,
-  selectable, paginated), `Drawer`, `Navbar`, `Sidebar`/`SidebarGroup`/
-  `SidebarItem`; layouts `AppShell`, `AuthLayout`, `ErrorLayout`.
-- **Composables are now part of the public API** — overlay/keyboard utilities
-  (`useFocusTrap`, `useClickOutside`, `useEscapeKey`, `useScrollLock`,
-  `useListNavigation`), form helpers (`useFieldA11y`, `useFormErrors`,
-  `usePasswordManagerAttrs`), data-table helpers (`useSort`, `useSelection`,
-  `usePagination`), plus `useControllable` and `useRootAttrs`.
-- **Helpers** — `cx` class combiner and `resolveTone` with the
-  `Tone`/`LegacyTone` types.
-- **Storybook** — Foundations docs (colors, typography, spacing, radii &
-  shadows, icons), example pages (Auth, Errors, Dashboard), docs + a11y
-  addons, and per-story play functions that run in CI via Playwright.
-
-### Migration notes
-
-Non-breaking, but worth knowing when upgrading:
-
-- **Tones unified.** `Badge`/`StatusBadge` now use the semantic tones
-  `neutral | info | success | warning | danger`; `Alert` gained `danger`.
-  The old values (`gray`/`blue`/`green`/`amber`/`red`, Alert's `error`) keep
-  rendering identically via `resolveTone()` but log a dev-only deprecation
-  warning and will be removed in the next major.
-- **Dropdown DOM changed.** The root moved from `<details>/<summary>` to
-  `<div><button aria-haspopup="menu">…` with full keyboard support (arrows,
-  Home/End, Escape, click-outside). Props and slots are unchanged; only CSS
-  targeting `details`/`summary` needs updating. Optional `v-model:open`.
-- **Button** gained a `loading` prop (spinner + `disabled` + `aria-busy`);
-  the default slot is now wrapped in a layout `<span>`.
-- **Modal** now traps focus, locks page scroll, restores focus on close and
-  supports `initialFocus`; API unchanged.
-- **FileInput** supports `v-model` (`File[]`); the previous `change`
-  (FileList) emit is retained. It now renders inside the standard control box.
-- **`Switch`** is a new alias export for `Toggle` (both names work).
-- **Components moved** into `src/components/{atoms,molecules,organisms,layouts}`;
-  the public API (`src/index.ts`) is unchanged.
-- **Storybook story IDs changed** with the new `Foundations/Atoms/Molecules/
-  Organisms/Layouts/Pages` hierarchy — deep links into the published
-  styleguide need re-copying.
-- **Bugfix:** dismissed toasts were hidden but never removed from the DOM
-  (`useToast` reassigned the array its consumers had captured); they are now
-  spliced in place.
+## Changelog
+
+Release notes, migration notes and upgrade warnings live in
+[CHANGELOG.md](CHANGELOG.md).
 
 ## License
 
diff --git a/package-lock.json b/package-lock.json
index d36d99e..0f2679b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@codebar-ag/storybook",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@codebar-ag/storybook",
-      "version": "1.5.0",
+      "version": "1.7.0",
       "license": "MIT",
       "dependencies": {
         "tailwind-merge": "^3.0.0"
diff --git a/package.json b/package.json
index 864d29e..97a1f11 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@codebar-ag/storybook",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "codebar-ag DocuHub — shared Vue 3 + Tailwind v4 design-system atoms and tokens, documented in Storybook.",
   "license": "MIT",
   "author": "codebar Solutions AG",

From f2a674e0808c673ea89a50eb8fcc0257083268cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20B=C3=BCrgin-Fix?= <sebastian.buergin@codebar.ch>
Date: Thu, 30 Jul 2026 07:53:04 +0200
Subject: [PATCH 3/4] Emit bundled types again: rollupTypes -> bundleTypes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

vite-plugin-dts 5 renamed the option and accepts-and-ignores the old name
rather than rejecting it, so `rollupTypes: true` had silently stopped doing
anything after the dependency bump. The build was emitting split per-component
declarations: dist/index.d.ts fell from ~84 KB to 9 KB, with the real types
moved into a dist/components tree.

Importing from the package still resolved, which is why nothing failed — but a
consumer that reads the declaration file to check its own usage against the
public API got a valid-looking file describing almost nothing. Found exactly
that way: llm-gateway's design-system prop checker silently matched zero
components and passed every file.

Adds @microsoft/api-extractor, which bundleTypes requires and which was
previously only present transitively.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 CHANGELOG.md      |   8 +
 package-lock.json | 431 ++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |   1 +
 vite.config.ts    |   7 +-
 4 files changed, 446 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 85d2cc9..77e98ab 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -46,6 +46,14 @@ this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
   already depended on. Merged back in; anything released from `main` before this
   would have silently regressed them.
 
+- **Types are a single bundled `index.d.ts` again.** `vite-plugin-dts` 5 renamed
+  `rollupTypes` to `bundleTypes` and *ignores* the old name instead of rejecting
+  it, so the build had quietly started emitting split per-component
+  declarations — an 84 KB entry point became 9 KB plus a `components/` tree.
+  Consumers that parse the declaration file rather than merely importing from it
+  saw an apparently valid file describing almost nothing. Adds
+  `@microsoft/api-extractor`, which `bundleTypes` requires.
+
 - Two implicit-`any` handler parameters in `Pagination.vue`. Pre-existing and
   unrelated to the upgrade, but `typecheck` could not run while the tree was
   uninstallable, so nothing had reported them.
diff --git a/package-lock.json b/package-lock.json
index 0f2679b..f04d9a3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "@codemirror/language": "^6.12.4",
         "@codemirror/state": "^6.7.0",
         "@codemirror/view": "^6.43.4",
+        "@microsoft/api-extractor": "^7.58.12",
         "@playwright/test": "^1.48.0",
         "@storybook/addon-a11y": "^10.5.5",
         "@storybook/addon-docs": "^10.5.5",
@@ -1108,6 +1109,116 @@
         "react": ">=16"
       }
     },
+    "node_modules/@microsoft/api-extractor": {
+      "version": "7.58.12",
+      "resolved": "https://registry.npmjs.org/@microsoft/api-extractor/-/api-extractor-7.58.12.tgz",
+      "integrity": "sha512-VNpgC/1LaroLbn+UKmwDYspq+9r3EHyj4vJ3qUy/g8vB0rKt+1Wgs7WFj/JGpgxhG8SNyXs1XwYwe7nqkk8IDg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@microsoft/api-extractor-model": "7.33.10",
+        "@microsoft/tsdoc": "~0.16.0",
+        "@microsoft/tsdoc-config": "~0.18.1",
+        "@rushstack/node-core-library": "5.23.3",
+        "@rushstack/rig-package": "0.7.3",
+        "@rushstack/terminal": "0.24.2",
+        "@rushstack/ts-command-line": "5.3.12",
+        "diff": "~8.0.2",
+        "minimatch": "10.2.3",
+        "resolve": "~1.22.1",
+        "semver": "~7.7.4",
+        "source-map": "~0.6.1",
+        "typescript": "5.9.3"
+      },
+      "bin": {
+        "api-extractor": "bin/api-extractor"
+      }
+    },
+    "node_modules/@microsoft/api-extractor-model": {
+      "version": "7.33.10",
+      "resolved": "https://registry.npmjs.org/@microsoft/api-extractor-model/-/api-extractor-model-7.33.10.tgz",
+      "integrity": "sha512-uPUK17xGxeQ3av6TN7awp+dTTSTvx8fZC0XFL1gyt7hFapYuxND3XLXH8vkmI7UjfW92oogzFAFqHSifmJROaw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@microsoft/tsdoc": "~0.16.0",
+        "@microsoft/tsdoc-config": "~0.18.1",
+        "@rushstack/node-core-library": "5.23.3"
+      }
+    },
+    "node_modules/@microsoft/api-extractor/node_modules/minimatch": {
+      "version": "10.2.3",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.3.tgz",
+      "integrity": "sha512-Rwi3pnapEqirPSbWbrZaa6N3nmqq4Xer/2XooiOKyV3q12ML06f7MOuc5DVH8ONZIFhwIYQ3yzPH4nt7iWHaTg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "brace-expansion": "^5.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@microsoft/api-extractor/node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@microsoft/tsdoc": {
+      "version": "0.16.0",
+      "resolved": "https://registry.npmjs.org/@microsoft/tsdoc/-/tsdoc-0.16.0.tgz",
+      "integrity": "sha512-xgAyonlVVS+q7Vc7qLW0UrJU7rSFcETRWsqdXZtjzRU8dF+6CkozTK4V4y1LwOX7j8r/vHphjDeMeGI4tNGeGA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@microsoft/tsdoc-config": {
+      "version": "0.18.1",
+      "resolved": "https://registry.npmjs.org/@microsoft/tsdoc-config/-/tsdoc-config-0.18.1.tgz",
+      "integrity": "sha512-9brPoVdfN9k9g0dcWkFeA7IH9bbcttzDJlXvkf8b2OBzd5MueR1V2wkKBL0abn0otvmkHJC6aapBOTJDDeMCZg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@microsoft/tsdoc": "0.16.0",
+        "ajv": "~8.18.0",
+        "jju": "~1.4.0",
+        "resolve": "~1.22.2"
+      }
+    },
+    "node_modules/@microsoft/tsdoc-config/node_modules/ajv": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz",
+      "integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/@microsoft/tsdoc-config/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@napi-rs/wasm-runtime": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.2.1.tgz",
@@ -2270,6 +2381,158 @@
         "win32"
       ]
     },
+    "node_modules/@rushstack/node-core-library": {
+      "version": "5.23.3",
+      "resolved": "https://registry.npmjs.org/@rushstack/node-core-library/-/node-core-library-5.23.3.tgz",
+      "integrity": "sha512-f6uuza7Um65bwsIJgf0MRs7IPA5IG+A+zs1AYGQvpZmLjtTGdfHowhQw4kwF0pPhJCrU4UHNhK8Qa6tLygYZCA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "~8.20.0",
+        "ajv-draft-04": "~1.0.0",
+        "ajv-formats": "~3.0.1",
+        "fs-extra": "~11.3.0",
+        "import-lazy": "~4.0.0",
+        "jju": "~1.4.0",
+        "resolve": "~1.22.1",
+        "semver": "~7.7.4"
+      },
+      "peerDependencies": {
+        "@types/node": "*"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rushstack/node-core-library/node_modules/ajv": {
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.20.0.tgz",
+      "integrity": "sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/@rushstack/node-core-library/node_modules/ajv-draft-04": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/ajv-draft-04/-/ajv-draft-04-1.0.0.tgz",
+      "integrity": "sha512-mv00Te6nmYbRp5DCwclxtt7yV/joXJPGS7nM+97GdxvuttCOfgI3K4U25zboyeX0O+myI8ERluxQe5wljMmVIw==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "ajv": "^8.5.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rushstack/node-core-library/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rushstack/node-core-library/node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@rushstack/problem-matcher": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@rushstack/problem-matcher/-/problem-matcher-0.2.1.tgz",
+      "integrity": "sha512-gulfhBs6n+I5b7DvjKRfhMGyUejtSgOHTclF/eONr8hcgF1APEDjhxIsfdUYYMzC3rvLwGluqLjbwCFZ8nxrog==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/node": "*"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rushstack/rig-package": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/@rushstack/rig-package/-/rig-package-0.7.3.tgz",
+      "integrity": "sha512-aAA518n6wxxjCfnTAOjQnm7ngNE0FVHxHAw2pxKlIhxrMn0XQjGcXKF0oKWpjBgJOmsaJpVob/v+zr3zxgPWuA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "jju": "~1.4.0",
+        "resolve": "~1.22.1"
+      }
+    },
+    "node_modules/@rushstack/terminal": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@rushstack/terminal/-/terminal-0.24.2.tgz",
+      "integrity": "sha512-KB7PpvzDyKMw/RGU3TxOwxTs3OwZ4gq6+WHlTJN/JfQH4ezliNtWIqver78jTaAJyz/ZAAlJGH7a/M1WyFLFSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rushstack/node-core-library": "5.23.3",
+        "@rushstack/problem-matcher": "0.2.1",
+        "supports-color": "~8.1.1"
+      },
+      "peerDependencies": {
+        "@types/node": "*"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rushstack/terminal/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/@rushstack/ts-command-line": {
+      "version": "5.3.12",
+      "resolved": "https://registry.npmjs.org/@rushstack/ts-command-line/-/ts-command-line-5.3.12.tgz",
+      "integrity": "sha512-Vg2n24arSf7JvUNga2DMHYTbxnVq9L5OtVCp4Gfr8YC/kmL/bmdR8FQhGcpMzMYNY9Vdw3+TaimG11Sf+z1Tpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rushstack/terminal": "0.24.2",
+        "@types/argparse": "1.0.38",
+        "argparse": "~1.0.9",
+        "string-argv": "~0.3.1"
+      }
+    },
     "node_modules/@storybook/addon-a11y": {
       "version": "10.5.5",
       "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-10.5.5.tgz",
@@ -2874,6 +3137,13 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/argparse": {
+      "version": "1.0.38",
+      "resolved": "https://registry.npmjs.org/@types/argparse/-/argparse-1.0.38.tgz",
+      "integrity": "sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/aria-query": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
@@ -3449,6 +3719,48 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/ajv-formats": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-3.0.1.tgz",
+      "integrity": "sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ajv-formats/node_modules/ajv": {
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.20.0.tgz",
+      "integrity": "sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ajv-formats/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/alien-signals": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/alien-signals/-/alien-signals-3.2.1.tgz",
@@ -3497,6 +3809,16 @@
         "@yr/monotone-cubic-spline": "^1.0.3"
       }
     },
+    "node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
     "node_modules/aria-query": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
@@ -3920,6 +4242,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/diff": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-8.0.4.tgz",
+      "integrity": "sha512-DPi0FmjiSU5EvQV0++GFDOJ9ASQUVFh5kD+OzOnYdi7n3Wpm9hWWGfB/O2blfHcMVTL5WkQXSnRiK9makhrcnw==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
     "node_modules/doctypes": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/doctypes/-/doctypes-1.1.0.tgz",
@@ -4314,6 +4646,23 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-uri": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.4.tgz",
+      "integrity": "sha512-8JnbkQ4juDyvYs4mgFGQqg4yCYtFDtUtmp2QIQq11ZZe5CFQ5wcqm1rqDgAh/QdMySuBnPzMUiJUNZG5N/AiQw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
     "node_modules/fdir": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
@@ -4404,6 +4753,21 @@
         }
       }
     },
+    "node_modules/fs-extra": {
+      "version": "11.3.6",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.6.tgz",
+      "integrity": "sha512-w8ZNZr2mKIc7qeNaQ9AVPT1+iFaI+Avd4xudVOvdDJ8VytREi1Ft5Ih7hd9jjehod8vAM5GMsfQ/TpPf4EyoEA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -4649,6 +5013,16 @@
         "node": ">= 4"
       }
     },
+    "node_modules/import-lazy": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-4.0.0.tgz",
+      "integrity": "sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/imurmurhash": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
@@ -4826,6 +5200,13 @@
         "jiti": "lib/jiti-cli.mjs"
       }
     },
+    "node_modules/jju": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/jju/-/jju-1.4.0.tgz",
+      "integrity": "sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/js-stringify": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/js-stringify/-/js-stringify-1.0.2.tgz",
@@ -4868,6 +5249,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/jsonfile": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.1.tgz",
+      "integrity": "sha512-zwOTdL3rFQ/lRdBnntKVOX6k5cKJwEc1HdilT71BWEu7J41gXIB2MRp+vxduPSwZJPWBxEzv4yH1wYLJGUHX4Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
     "node_modules/jstransformer": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/jstransformer/-/jstransformer-1.0.0.tgz",
@@ -6030,6 +6424,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
@@ -6277,6 +6681,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
     "node_modules/storybook": {
       "version": "10.5.5",
       "resolved": "https://registry.npmjs.org/storybook/-/storybook-10.5.5.tgz",
@@ -6326,6 +6737,16 @@
         }
       }
     },
+    "node_modules/string-argv": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.2.tgz",
+      "integrity": "sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.6.19"
+      }
+    },
     "node_modules/strip-indent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
@@ -6590,6 +7011,16 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
     "node_modules/unplugin": {
       "version": "2.3.11",
       "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-2.3.11.tgz",
diff --git a/package.json b/package.json
index 97a1f11..9988874 100644
--- a/package.json
+++ b/package.json
@@ -70,6 +70,7 @@
     "@codemirror/language": "^6.12.4",
     "@codemirror/state": "^6.7.0",
     "@codemirror/view": "^6.43.4",
+    "@microsoft/api-extractor": "^7.58.12",
     "@playwright/test": "^1.48.0",
     "@storybook/addon-a11y": "^10.5.5",
     "@storybook/addon-docs": "^10.5.5",
diff --git a/vite.config.ts b/vite.config.ts
index 5f9bf6a..47778d0 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -10,7 +10,12 @@ import dts from 'vite-plugin-dts';
 export default defineConfig({
     plugins: [
         vue(),
-        dts({ include: ['src'], rollupTypes: true }),
+        // `bundleTypes`, not `rollupTypes`: vite-plugin-dts 5 renamed it and the
+        // old name is accepted-and-ignored rather than rejected, which quietly
+        // emitted split per-component .d.ts files instead of the single bundled
+        // index.d.ts every published version so far has shipped. Requires
+        // @microsoft/api-extractor, hence its devDependency.
+        dts({ include: ['src'], bundleTypes: true }),
     ],
     resolve: {
         alias: {

From dcd2baf6982e9ca10af3fdce83a928cf555d4f33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20B=C3=BCrgin-Fix?= <sebastian.buergin@codebar.ch>
Date: Thu, 30 Jul 2026 08:08:00 +0200
Subject: [PATCH 4/4] Keep the declaration plugin out of the Storybook build
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Storybook inherits vite.config.ts, so enabling `bundleTypes` also pointed API
Extractor at the docs build, where it walks the stories and dies on Vue's
internal template symbols: "Symbol not found for identifier: __VLS_1". The
library build was fine; `build-storybook` was not, which broke CI.

This build has no declarations to emit, so the plugin is filtered out in
viteFinal rather than made conditional in vite.config.ts — that keeps the
library build's own config honest instead of teaching it about Storybook.

Missed locally because build-storybook had been run before `bundleTypes` was
enabled and the Playwright suite then served that already-built
storybook-static, so both looked green against a stale artefact. Re-verified by
running the CI steps in order from a clean npm ci: typecheck, lint, build
(index.d.ts 84 KB bundled), build-storybook, 192 Playwright tests.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .storybook/main.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/.storybook/main.ts b/.storybook/main.ts
index 32c42a6..b768007 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -13,6 +13,19 @@ const config: StorybookConfig = {
         const { default: tailwindcss } = await import('@tailwindcss/vite');
         cfg.plugins = cfg.plugins ?? [];
         cfg.plugins.push(tailwindcss());
+
+        /*
+         | Storybook inherits vite.config.ts, so the declaration-file plugin runs
+         | here too — and this build has no declarations to emit. It is not just
+         | wasted work: bundling types means API Extractor, which walks the
+         | stories and dies on Vue's internal template symbols ("Symbol not found
+         | for identifier: __VLS_1"). Dropping it here is what lets the library
+         | build bundle its types without the docs build having to cope.
+         */
+        cfg.plugins = cfg.plugins.filter(
+            (plugin) => !(plugin && 'name' in plugin && String(plugin.name).includes('dts')),
+        );
+
         return cfg;
     },
 };