diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index decd758..2378f74 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -14,12 +14,23 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v7
+        with:
+          # Full history so the tags are present: the version check below needs
+          # to know which numbers are already spent.
+          fetch-depth: 0
 
       - uses: actions/setup-node@v6
         with:
           node-version: 24
           cache: npm
 
+      # Before the build, and before a tag exists — the only moment a version
+      # mistake is still cheap. Once a tag is pushed it is installable as a git
+      # dependency forever, whether or not its Release run went green, so the
+      # Release workflow's own tag/manifest guard fires too late to help.
+      - name: Version is ahead of every existing tag
+        run: npm run verify:version
+
       - run: npm ci
 
       - name: Lint
diff --git a/CHANGELOG.md b/CHANGELOG.md
index eb72cae..9ae7f08 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,146 @@ 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.18.0
+
+A types-only release, prompted by a consuming app that stood up a `vue-tsc`
+lane over 152 components for the first time and found out what this package
+does and does not let it say. **No component changes behaviour.** Not one
+template, class, token, prop default or emitted value differs; every call site
+that renders correctly today renders byte-identically after this. Everything
+below happens at the type boundary.
+
+There is no v1.17.0 — see the note at the end.
+
+### Added
+
+- **Every component now exports a named `<Name>Props` type.** 73 of them, one
+  per component, re-exported from the barrel.
+
+  The supporting types were all exported already — `Tone`, `Category`,
+  `SelectOption`, `DataTableColumn`, `BreadcrumbItem`, `TabItem`, `RowKey`,
+  `SortState`, `IconName` — which is what made the gap conspicuous rather than
+  merely absent. The props themselves reached `dist/index.d.ts` as **71
+  anonymous `__VLS_Props` interfaces**, the names `vue-tsc` generates for a
+  type literal passed inline to `defineProps`. Nothing can import those. A
+  consuming app wrapping an atom therefore re-declared the unions by hand, and
+  they drifted the moment either side moved: a `ConfirmDialog` over `Modal`
+  declaring `variant: String` compiles in the app and fails against
+  `'danger' | 'primary' | …` at the boundary.
+
+  So a wrapper can now say what it means:
+
+  ```ts
+  import type { ButtonProps, ModalProps } from '@codebar-ag/storybook';
+
+  defineProps<{
+      size?: ModalProps['size'];
+      variant?: ButtonProps['variant'];
+  }>();
+  ```
+
+  …or take the whole surface, which `@vue/compiler-sfc` resolves out of the
+  published `.d.ts` well enough to emit runtime props from:
+
+  ```ts
+  defineProps<ButtonProps>();
+  ```
+
+  `dist/index.d.ts` now carries 73 named prop interfaces and zero
+  `__VLS_Props`. A new `verify:props` build step keeps the three parts in
+  step — the SFC declares the interface, the barrel re-exports it, and
+  api-extractor carries it into the bundled declarations. Only the last is
+  observable to a consumer, and a type exported from source but dropped from
+  the rollup is invisible until an app tries to import it.
+
+- **`SelectOption` takes its value type as a parameter**, and the two controls
+  that hand an option's value back to the caller — `SearchableSelect` via
+  `update:modelValue`, `Combobox` via `@select` — are generic over it. A caller
+  whose values are all strings says so once, on the options, and stops
+  coercing with `String()` at every call site that writes into a string-typed
+  form field.
+
+  Both infer the parameter from `options` and `modelValue` together, so binding
+  a plain `string` model widens it rather than pinning it to the literal union
+  of an inline options array.
+
+  `Select` is deliberately **not** generic, and the source says why: it is a
+  native `<select>`, its change event carries `HTMLSelectElement.value`, and
+  the DOM has already stringified that. A `SelectOption<number>` there emits
+  `"1"` and not `1` — typing the emit as the parameter would be a lie the
+  compiler could not catch.
+
+### Changed
+
+- **`BreadcrumbItem.href` accepts `null`.** `Breadcrumbs` has always rendered a
+  plain `<span>` for a crumb whose `href` is falsy — an ancestor with no page
+  of its own, a label-only segment. The type just never said so, and every
+  caller assembling a trail from optional route data paid for the gap: typing
+  one wrapper's `breadcrumbs` prop as `BreadcrumbItem[]` in a consuming app
+  produced roughly 64 errors, all of them this one restated. The interior
+  non-link crumb is now also a story, since it was reachable but undocumented.
+
+- **Every array a component accepts is `readonly`.** `Accordion`,
+  `Breadcrumbs`, `Chart`, `Combobox`, `DataTable`, `FileInput`, `KindLegend`,
+  `PageHeading`, `ResourceList`, `SearchableSelect`, `Select`, `Stepper`,
+  `Tabs`.
+
+  Vue props cannot be mutated at runtime, so `options: SelectOption[]` was
+  never a promise the component kept — it only filtered out callers whose array
+  happened to be readonly, which generated translation types and `as const`
+  fixtures routinely are. Declaring the input readonly says what was already
+  true and accepts strictly more.
+
+  Readonly in, mutable out: the headless composables widen their *inputs*
+  (`useSort`'s rows, `usePagination`'s `sliceOf`, `useSelection`'s keys and
+  controlled selection) and keep handing back mutable arrays, copying once at
+  the boundary. `useSort`'s unsorted branch now copies instead of passing the
+  caller's array straight through, which it should have been doing anyway.
+  `verify:props` fails the build on a mutable array prop, because a stance like
+  this is only worth anything if it holds for all of them.
+
+- **`verify:version` runs on every pull request**, asserting that
+  `package.json` neither matches an existing tag nor sits behind the highest
+  one, and the README gains a release checklist. See below for what this is
+  for.
+
+### Upgrade notes
+
+Nothing here changes what a component *does*, so no template needs touching.
+Three of the changes can nonetheless fail an app's type-check, all in narrow
+positions:
+
+- **`BreadcrumbItem.href` is `string | null | undefined`.** Code that *reads*
+  a crumb's href into a `string` now needs a fallback. Code that *builds*
+  crumbs is strictly freer than before.
+- **Array props are `readonly T[]`.** Assigning one back out to a mutable array
+  type — `const steps: Step[] = props.steps` — needs a copy. Passing arrays
+  *in* is strictly freer.
+- **`SearchableSelect` and `Combobox` are generic components.** `typeof
+  SearchableSelect` is no longer a plain `DefineComponent`, so
+  `Meta<typeof SearchableSelect>` and similar type-level gymnastics need the
+  same untyped treatment `DataTable` has always needed. Templates are
+  unaffected.
+
+`SelectOption`'s parameter defaults to `string | number`, so every existing
+`SelectOption[]` annotation — including ones carrying numeric ids, which this
+package supports on purpose — means exactly what it did before.
+
+### A note on v1.17.0
+
+**There is no 1.17.0, and there never will be.** The tag `v1.17.0` exists and
+resolves, but the tree it points at is 1.16.1: `release/v1.16.1` was bumped
+correctly and then tagged by hand under the wrong name. The Release workflow
+caught the mismatch and refused to publish, so **1.16.1 never reached the
+registry and no GitHub Release was cut** — and none of that mattered, because
+this package is documented as a git dependency and `#v1.17.0` installs
+straight from the tag. Consuming apps pinned it and got a build whose
+`package.json` says 1.16.1. Nothing was broken; nothing said so either.
+
+A tag is a release even when the release failed, and a pushed tag is
+permanent. 1.17.0 is therefore spent, and this release skips it. If you are
+pinned to `v1.17.0` you are running 1.16.1 and should move to `v1.18.0`.
+
 ## v1.16.1
 
 One bug, found in a consuming app, and the two more the sweep for its shape
diff --git a/README.md b/README.md
index 1d21432..d4ef03e 100644
--- a/README.md
+++ b/README.md
@@ -141,6 +141,31 @@ git push --follow-tags   # Release workflow builds, tests, publishes
 The workflow refuses to run if the tag and `package.json` version disagree, and
 verifies the version resolves on the registry once published.
 
+### Checklist
+
+1. **Bump with `npm version`, never `git tag` by hand.** `npm version` derives
+   the tag name from the manifest, so the two cannot disagree. Writing the tag
+   yourself is the one step where they can.
+2. **Add the `## vX.Y.Z` section to [CHANGELOG.md](CHANGELOG.md) first** — the
+   Release workflow reads the release body out of it, and falls back to
+   commit-derived notes if the section is missing.
+3. **Push with `--follow-tags`**, then watch the Release run to green. A red
+   run does *not* mean nothing shipped; read it.
+4. **A version number is spent the moment its tag exists.** Never re-use or
+   re-point one. `npm run verify:version` enforces both halves of this and runs
+   on every PR: the manifest may not match an existing tag, and may not be
+   behind the highest one.
+
+> **A tag is a release, even when the release failed.** This package is
+> documented as a git dependency, so `#v1.17.0` resolves and installs straight
+> from the tag — the registry, the Release run and the GitHub Release are not in
+> that path at all. That is what made v1.17.0 a trap: `release/v1.16.1` was
+> bumped correctly to 1.16.1 and then tagged `v1.17.0` by hand, the Release run
+> failed at the mismatch guard so 1.16.1 never reached the registry, and
+> consuming apps pinned v1.17.0 and got a build whose `package.json` says
+> 1.16.1. Nothing was broken; nothing said so either. The number 1.17.0 is now
+> permanently unusable, which is why the next release is 1.18.0.
+
 ## Changelog
 
 Release notes, migration notes and upgrade warnings live in
diff --git a/package.json b/package.json
index 288b0bf..8d6675a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@codebar-ag/storybook",
-  "version": "1.16.1",
+  "version": "1.18.0",
   "description": "codebar-ag DocuHub — shared Vue 3 + Tailwind v4 design-system atoms and tokens, documented in Storybook.",
   "license": "MIT",
   "author": "codebar Solutions AG",
@@ -25,8 +25,10 @@
   "scripts": {
     "prepare": "npm run build",
     "dev": "storybook dev -p 6006",
-    "build": "vite build && npm run build:tokens && npm run verify:externals && npm run verify:dev-warnings",
+    "build": "vite build && npm run build:tokens && npm run verify:externals && npm run verify:dev-warnings && npm run verify:props",
     "verify:externals": "node scripts/verify-externals.mjs",
+    "verify:props": "node scripts/verify-props.mjs",
+    "verify:version": "node scripts/verify-version.mjs",
     "build:tokens": "node -e \"require('node:fs').copyFileSync('src/tokens.css','dist/tokens.css')\"",
     "build-storybook": "storybook build",
     "lint": "eslint \"src/**/*.{ts,vue}\"",
diff --git a/scripts/verify-props.mjs b/scripts/verify-props.mjs
new file mode 100644
index 0000000..587f6f0
--- /dev/null
+++ b/scripts/verify-props.mjs
@@ -0,0 +1,111 @@
+// Guards the per-component prop types that consuming apps wrap components with.
+//
+// A consuming app that wraps an atom — its own ConfirmDialog over Modal, its own
+// SectionShell over PageHeading — has to name the wrapped component's prop types
+// or it re-declares the unions by hand and they drift. `variant: String` passes
+// the app's own build and then fails against `'danger' | 'primary' | …` at the
+// boundary. So every component's props are declared as a named, exported
+// `<Name>Props` interface and re-exported from `src/index.ts`.
+//
+// Three things have to line up, and only the third is observable from outside:
+// the SFC declares the interface, the barrel re-exports it, and api-extractor
+// carries it into the bundled `dist/index.d.ts`. The last one is the one that
+// actually matters to a consumer and the one nothing else checks — a type that
+// is exported from source but dropped from the rollup is invisible until an app
+// tries to import it.
+//
+// The second half of the file guards the array-prop stance: every array a
+// component ACCEPTS is `readonly`. Props are readonly at runtime anyway, so a
+// mutable array type is not a promise the component keeps — it is only a filter
+// on who may call it. One mutable prop is enough to break the rule, because the
+// value of the stance is that it holds for ALL of them: a caller holding a
+// ReadonlyArray (generated translation types, `as const` fixtures, anything
+// frozen) can then pass it to every component rather than remembering which.
+import { existsSync, globSync, readFileSync } from 'node:fs';
+import { basename } from 'node:path';
+
+const components = globSync('src/components/*/*.vue').sort();
+const index = readFileSync('src/index.ts', 'utf8');
+const errors = [];
+
+/** Components whose props are exported, for the dist check below. */
+const exported = [];
+
+for (const file of components) {
+    const name = basename(file, '.vue');
+    const source = readFileSync(file, 'utf8');
+
+    if (!source.includes('defineProps')) {
+        continue;
+    }
+
+    if (!source.includes(`export interface ${name}Props`)) {
+        errors.push(
+            `${file} declares props but no \`export interface ${name}Props\`. ` +
+                'Name the props interface and export it, rather than passing a type literal to defineProps.',
+        );
+        continue;
+    }
+
+    if (!index.includes(`export type { ${name}Props }`)) {
+        errors.push(
+            `src/index.ts does not re-export ${name}Props. ` +
+                `Add: export type { ${name}Props } from './${file.slice(4)}';`,
+        );
+        continue;
+    }
+
+    exported.push(`${name}Props`);
+}
+
+// Only meaningful after a build; `npm run build` runs this last, on purpose.
+if (existsSync('dist/index.d.ts')) {
+    const declarations = readFileSync('dist/index.d.ts', 'utf8');
+    const missing = exported.filter(
+        (type) => !new RegExp(`\\binterface ${type}\\b`).test(declarations),
+    );
+
+    if (missing.length > 0) {
+        errors.push(
+            `dist/index.d.ts is missing: ${missing.join(', ')}.\n` +
+                'The barrel exports them but api-extractor did not carry them into the bundled ' +
+                'declarations, so no consumer can import them.',
+        );
+    }
+}
+
+// Array props must be readonly. Line-based on purpose: a props interface that
+// needs a multi-line union type is past the point where a component should be
+// taking that prop at all.
+const MUTABLE_ARRAY = /\w\s*\[\]|\bArray</;
+const READONLY = /\breadonly\b|\bReadonlyArray</;
+
+for (const file of components) {
+    const name = basename(file, '.vue');
+    const source = readFileSync(file, 'utf8');
+    const block = new RegExp(`export interface ${name}Props(?:<[^>]*>)? \\{\\n([\\s\\S]*?)\\n\\}`).exec(source);
+
+    if (!block) {
+        continue;
+    }
+
+    for (const line of block[1].split('\n')) {
+        const declaration = line.replace(/\/\*.*?\*\//g, '').replace(/\/\/.*$/, '');
+
+        if (!declaration.includes(':') || !MUTABLE_ARRAY.test(declaration) || READONLY.test(declaration)) {
+            continue;
+        }
+
+        errors.push(
+            `${file}: ${name}Props has a mutable array prop —\n    ${declaration.trim()}\n` +
+                'Accept `readonly T[]`. Props cannot be mutated at runtime, so a mutable type only ' +
+                'rejects callers holding a ReadonlyArray. Copy at the boundary if something inside ' +
+                'genuinely needs a mutable array.',
+        );
+    }
+}
+
+if (errors.length > 0) {
+    console.error(errors.join('\n\n'));
+    process.exit(1);
+}
diff --git a/scripts/verify-version.mjs b/scripts/verify-version.mjs
new file mode 100644
index 0000000..204c942
--- /dev/null
+++ b/scripts/verify-version.mjs
@@ -0,0 +1,81 @@
+// Guards the version number BEFORE a tag exists, which is the only moment it
+// can still be guarded.
+//
+// The Release workflow already refuses to publish when the tag and the manifest
+// disagree — but by then the tag has been pushed, and a pushed tag is the
+// artefact consumers actually install: this package is documented as a git
+// dependency (`npm install github:codebar-ag/storybook.codebar.ch#v1.7.0`), so a
+// tag resolves and installs whether or not the release ever succeeded.
+//
+// That is how v1.17.0 happened. `release/v1.16.1` was bumped correctly to 1.16.1
+// and then tagged v1.17.0 by hand. The Release run failed at the mismatch guard,
+// so 1.16.1 never reached the registry and no GitHub Release was cut — and yet
+// consuming apps pinned v1.17.0 and got a build whose package.json says 1.16.1.
+// Nothing was broken, and nothing said so either.
+//
+// So: the manifest version must be strictly ahead of every tag that already
+// exists. A number that is already taken cannot be released under that name a
+// second time, and a tag cut with the wrong name burns that number permanently.
+import { execFileSync } from 'node:child_process';
+import { readFileSync } from 'node:fs';
+
+/** @returns {[number, number, number]} */
+function parse(version) {
+    const match = /^(\d+)\.(\d+)\.(\d+)(?:-|\+|$)/.exec(version);
+
+    if (!match) {
+        throw new Error(`Not a semantic version: ${version}`);
+    }
+
+    return [Number(match[1]), Number(match[2]), Number(match[3])];
+}
+
+function compare(a, b) {
+    const left = parse(a);
+    const right = parse(b);
+
+    for (let i = 0; i < 3; i += 1) {
+        if (left[i] !== right[i]) {
+            return left[i] - right[i];
+        }
+    }
+
+    return 0;
+}
+
+const { version } = JSON.parse(readFileSync('package.json', 'utf8'));
+
+const tags = execFileSync('git', ['tag', '--list', 'v*'], { encoding: 'utf8' })
+    .split('\n')
+    .map((tag) => tag.trim())
+    .filter((tag) => /^v\d+\.\d+\.\d+$/.test(tag));
+
+if (tags.length === 0) {
+    console.error(
+        'No v* tags are visible. Fetch them before running this — ' +
+            'in CI that means actions/checkout with `fetch-depth: 0`.',
+    );
+    process.exit(1);
+}
+
+const taken = tags.find((tag) => tag.slice(1) === version);
+
+if (taken) {
+    console.error(
+        `package.json is ${version}, but tag ${taken} already exists.\n` +
+            'That number is spent: the tag is permanent and installable as a git ' +
+            'dependency whether or not its release succeeded. Bump past it.',
+    );
+    process.exit(1);
+}
+
+const highest = tags.reduce((a, b) => (compare(a.slice(1), b.slice(1)) >= 0 ? a : b));
+
+if (compare(version, highest.slice(1)) < 0) {
+    console.error(
+        `package.json is ${version}, behind the highest existing tag ${highest}.\n` +
+            'Bump the manifest (npm version …), which derives the tag from it. ' +
+            'Never write the tag name by hand.',
+    );
+    process.exit(1);
+}
diff --git a/src/components/atoms/Avatar.vue b/src/components/atoms/Avatar.vue
index 96dd951..a3f99d1 100644
--- a/src/components/atoms/Avatar.vue
+++ b/src/components/atoms/Avatar.vue
@@ -8,12 +8,14 @@ import { useRootAttrs } from '../../composables/useRootAttrs';
 
 defineOptions({ inheritAttrs: false });
 
+export interface AvatarProps {
+    name?: string;
+    src?: string | null;
+    size?: 'sm' | 'md' | 'lg';
+}
+
 const props = withDefaults(
-    defineProps<{
-        name?: string;
-        src?: string | null;
-        size?: 'sm' | 'md' | 'lg';
-    }>(),
+    defineProps<AvatarProps>(),
     { name: '', src: null, size: 'md' },
 );
 
diff --git a/src/components/atoms/Badge.vue b/src/components/atoms/Badge.vue
index b7e1034..3c58b44 100644
--- a/src/components/atoms/Badge.vue
+++ b/src/components/atoms/Badge.vue
@@ -11,28 +11,30 @@ import { warnOnce } from '../../helpers/dev';
    mutual-exclusivity check below has to tell those apart. The `neutral`
    fallback is applied one level down by `resolveTone()`, so the rendered
    result is unchanged. */
+export interface BadgeProps {
+    /**
+     * SEVERITY tone — how bad is this. The color names
+     * (gray/blue/green/amber/red) are deprecated aliases and will be
+     * removed in the next major release.
+     *
+     * Mutually exclusive with `category`. Defaults to `neutral` when
+     * neither is given.
+     */
+    variant?: Tone | LegacyTone;
+    /**
+     * CATEGORICAL identity — which kind is this, with no severity implied.
+     * For state that is not a status: on/off, inherited/overridden,
+     * first/duplicate, draft/published, or a kind-of-thing label.
+     *
+     * Mutually exclusive with `variant`; takes precedence if both are
+     * passed. Use `variant="neutral"` for "no category".
+     */
+    category?: Category;
+    size?: 'sm' | 'md';
+}
+
 const props = withDefaults(
-    defineProps<{
-        /**
-         * SEVERITY tone — how bad is this. The color names
-         * (gray/blue/green/amber/red) are deprecated aliases and will be
-         * removed in the next major release.
-         *
-         * Mutually exclusive with `category`. Defaults to `neutral` when
-         * neither is given.
-         */
-        variant?: Tone | LegacyTone;
-        /**
-         * CATEGORICAL identity — which kind is this, with no severity implied.
-         * For state that is not a status: on/off, inherited/overridden,
-         * first/duplicate, draft/published, or a kind-of-thing label.
-         *
-         * Mutually exclusive with `variant`; takes precedence if both are
-         * passed. Use `variant="neutral"` for "no category".
-         */
-        category?: Category;
-        size?: 'sm' | 'md';
-    }>(),
+    defineProps<BadgeProps>(),
     { size: 'md' },
 );
 /* eslint-enable vue/require-default-prop */
diff --git a/src/components/atoms/Button.vue b/src/components/atoms/Button.vue
index a2bfd63..fd888c5 100644
--- a/src/components/atoms/Button.vue
+++ b/src/components/atoms/Button.vue
@@ -8,19 +8,21 @@ import Spinner from './Spinner.vue';
 
 defineOptions({ inheritAttrs: false });
 
+export interface ButtonProps {
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'subtle' | 'cta';
+    size?: 'sm' | 'md' | 'lg';
+    type?: 'button' | 'submit' | 'reset';
+    // Pass a component (e.g. Inertia's Link) to keep navigation client-side
+    // while staying framework-agnostic — the package never imports Inertia.
+    as?: 'button' | 'a' | Component;
+    href?: string | null;
+    // Shows a centered spinner and blocks interaction; the label stays in
+    // the layout (hidden, not removed) so the button keeps its width.
+    loading?: boolean;
+}
+
 const props = withDefaults(
-    defineProps<{
-        variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'subtle' | 'cta';
-        size?: 'sm' | 'md' | 'lg';
-        type?: 'button' | 'submit' | 'reset';
-        // Pass a component (e.g. Inertia's Link) to keep navigation client-side
-        // while staying framework-agnostic — the package never imports Inertia.
-        as?: 'button' | 'a' | Component;
-        href?: string | null;
-        // Shows a centered spinner and blocks interaction; the label stays in
-        // the layout (hidden, not removed) so the button keeps its width.
-        loading?: boolean;
-    }>(),
+    defineProps<ButtonProps>(),
     { variant: 'primary', size: 'md', type: 'button', as: 'button', href: null, loading: false },
 );
 
diff --git a/src/components/atoms/Checkbox.vue b/src/components/atoms/Checkbox.vue
index 21f19c9..b718f17 100644
--- a/src/components/atoms/Checkbox.vue
+++ b/src/components/atoms/Checkbox.vue
@@ -2,15 +2,17 @@
 import { computed } from 'vue';
 import { useFieldA11y } from '../../composables/useFieldA11y';
 
+export interface CheckboxProps {
+    modelValue?: boolean;
+    name?: string | null;
+    value?: string;
+    invalid?: boolean;
+    description?: string | null;
+    disabled?: boolean;
+}
+
 const props = withDefaults(
-    defineProps<{
-        modelValue?: boolean;
-        name?: string | null;
-        value?: string;
-        invalid?: boolean;
-        description?: string | null;
-        disabled?: boolean;
-    }>(),
+    defineProps<CheckboxProps>(),
     { modelValue: false, name: null, value: '1', invalid: false, description: null, disabled: false },
 );
 
diff --git a/src/components/atoms/Divider.vue b/src/components/atoms/Divider.vue
index 86e3208..8f7f63b 100644
--- a/src/components/atoms/Divider.vue
+++ b/src/components/atoms/Divider.vue
@@ -6,11 +6,13 @@ import { useRootAttrs } from '../../composables/useRootAttrs';
 
 defineOptions({ inheritAttrs: false });
 
+export interface DividerProps {
+    orientation?: 'horizontal' | 'vertical';
+    label?: string | null;
+}
+
 withDefaults(
-    defineProps<{
-        orientation?: 'horizontal' | 'vertical';
-        label?: string | null;
-    }>(),
+    defineProps<DividerProps>(),
     { orientation: 'horizontal', label: null },
 );
 
diff --git a/src/components/atoms/Icon.vue b/src/components/atoms/Icon.vue
index 37d9c04..eff11ed 100644
--- a/src/components/atoms/Icon.vue
+++ b/src/components/atoms/Icon.vue
@@ -3,11 +3,13 @@ import { computed } from 'vue';
 import { icons, type IconName } from '../../icons';
 import { pick } from '../../helpers/pick';
 
+export interface IconProps {
+    name?: IconName;
+    size?: 'sm' | 'md' | 'lg';
+}
+
 const props = withDefaults(
-    defineProps<{
-        name?: IconName;
-        size?: 'sm' | 'md' | 'lg';
-    }>(),
+    defineProps<IconProps>(),
     { name: 'plus', size: 'md' },
 );
 
diff --git a/src/components/atoms/IconBadge.vue b/src/components/atoms/IconBadge.vue
index ead6fdd..1f5a567 100644
--- a/src/components/atoms/IconBadge.vue
+++ b/src/components/atoms/IconBadge.vue
@@ -4,14 +4,16 @@ import Icon from './Icon.vue';
 import type { IconName } from '../../icons';
 import { pick } from '../../helpers/pick';
 
+export interface IconBadgeProps {
+    icon?: IconName;
+    variant?: 'accent' | 'danger' | 'success' | 'warning' | 'neutral';
+    size?: 'sm' | 'md';
+    shape?: 'circle' | 'surface';
+}
+
 // Icon inside a tinted, bordered badge. size: sm = 40px tile, md = 48px disc.
 const props = withDefaults(
-    defineProps<{
-        icon?: IconName;
-        variant?: 'accent' | 'danger' | 'success' | 'warning' | 'neutral';
-        size?: 'sm' | 'md';
-        shape?: 'circle' | 'surface';
-    }>(),
+    defineProps<IconBadgeProps>(),
     { icon: 'check', variant: 'accent', size: 'md', shape: 'circle' },
 );
 
diff --git a/src/components/atoms/IdCell.vue b/src/components/atoms/IdCell.vue
index 4496776..b17c021 100644
--- a/src/components/atoms/IdCell.vue
+++ b/src/components/atoms/IdCell.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
+export interface IdCellProps {
+    id: string | number;
+    uuid?: string | null;
+}
+
 const props = withDefaults(
-    defineProps<{
-        id: string | number;
-        uuid?: string | null;
-    }>(),
+    defineProps<IdCellProps>(),
     { uuid: null },
 );
 
diff --git a/src/components/atoms/Input.vue b/src/components/atoms/Input.vue
index 22f8f04..ed91401 100644
--- a/src/components/atoms/Input.vue
+++ b/src/components/atoms/Input.vue
@@ -8,13 +8,15 @@ import { useRootAttrs } from '../../composables/useRootAttrs';
 
 defineOptions({ inheritAttrs: false });
 
+export interface InputProps {
+    modelValue?: string | number | null;
+    type?: string;
+    name?: string | null;
+    invalid?: boolean;
+}
+
 const props = withDefaults(
-    defineProps<{
-        modelValue?: string | number | null;
-        type?: string;
-        name?: string | null;
-        invalid?: boolean;
-    }>(),
+    defineProps<InputProps>(),
     { modelValue: '', type: 'text', name: null, invalid: false },
 );
 
diff --git a/src/components/atoms/KindMark.vue b/src/components/atoms/KindMark.vue
index 95981cc..c609017 100644
--- a/src/components/atoms/KindMark.vue
+++ b/src/components/atoms/KindMark.vue
@@ -80,27 +80,29 @@ import { useRootAttrs } from '../../composables/useRootAttrs';
    a default glyph would make it unreachable. An absent `category` means "no
    category", which renders neutral; defaulting it would silently assign every
    unlabelled mark to a category it does not belong to. */
+export interface KindMarkProps {
+    /** Which family this kind belongs to. The primary, greyscale-safe channel. */
+    shape: KindShape;
+    /**
+     * The kind's name, always rendered. This is not an `aria-label` —
+     * it is visible text, and it is required because the mark alone does
+     * not separate an arbitrary number of kinds and should not pretend to.
+     * Override the rendering (not the presence) through the default slot.
+     */
+    label: string;
+    /** Separates kinds *within* a family. Omit for a silhouette-only mark. */
+    icon?: IconName;
+    /**
+     * Reinforcement only, one per family. Omit for the neutral family.
+     * Deliberately drawn from `Category` and `accent`, never from the
+     * severity ramp — a kind is not a status.
+     */
+    category?: Category;
+    size?: 'sm' | 'md' | 'lg';
+}
+
 const props = withDefaults(
-    defineProps<{
-        /** Which family this kind belongs to. The primary, greyscale-safe channel. */
-        shape: KindShape;
-        /**
-         * The kind's name, always rendered. This is not an `aria-label` —
-         * it is visible text, and it is required because the mark alone does
-         * not separate an arbitrary number of kinds and should not pretend to.
-         * Override the rendering (not the presence) through the default slot.
-         */
-        label: string;
-        /** Separates kinds *within* a family. Omit for a silhouette-only mark. */
-        icon?: IconName;
-        /**
-         * Reinforcement only, one per family. Omit for the neutral family.
-         * Deliberately drawn from `Category` and `accent`, never from the
-         * severity ramp — a kind is not a status.
-         */
-        category?: Category;
-        size?: 'sm' | 'md' | 'lg';
-    }>(),
+    defineProps<KindMarkProps>(),
     { size: 'md' },
 );
 /* eslint-enable vue/require-default-prop */
diff --git a/src/components/atoms/Label.vue b/src/components/atoms/Label.vue
index e2e8ed3..2d894e9 100644
--- a/src/components/atoms/Label.vue
+++ b/src/components/atoms/Label.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
+export interface LabelProps {
+    for?: string | null;
+    required?: boolean;
+}
+
 withDefaults(
-    defineProps<{
-        for?: string | null;
-        required?: boolean;
-    }>(),
+    defineProps<LabelProps>(),
     { for: null, required: false },
 );
 </script>
diff --git a/src/components/atoms/Link.vue b/src/components/atoms/Link.vue
index 932eeca..fe52c9d 100644
--- a/src/components/atoms/Link.vue
+++ b/src/components/atoms/Link.vue
@@ -7,13 +7,15 @@ import { useRootAttrs } from '../../composables/useRootAttrs';
 
 defineOptions({ inheritAttrs: false });
 
+export interface LinkProps {
+    href?: string;
+    tone?: 'default' | 'muted' | 'accent';
+    // Link component (e.g. Inertia's Link) used instead of <a>.
+    as?: Component | null;
+}
+
 const props = withDefaults(
-    defineProps<{
-        href?: string;
-        tone?: 'default' | 'muted' | 'accent';
-        // Link component (e.g. Inertia's Link) used instead of <a>.
-        as?: Component | null;
-    }>(),
+    defineProps<LinkProps>(),
     { href: '#', tone: 'default', as: null },
 );
 
diff --git a/src/components/atoms/ListIcon.vue b/src/components/atoms/ListIcon.vue
index 9d690d9..5a7580a 100644
--- a/src/components/atoms/ListIcon.vue
+++ b/src/components/atoms/ListIcon.vue
@@ -2,7 +2,9 @@
 import Icon from './Icon.vue';
 import type { IconName } from '../../icons';
 
-defineProps<{ name: IconName }>();
+export interface ListIconProps { name: IconName }
+
+defineProps<ListIconProps>();
 </script>
 
 <template>
diff --git a/src/components/atoms/Metric.vue b/src/components/atoms/Metric.vue
index fa8394b..062d866 100644
--- a/src/components/atoms/Metric.vue
+++ b/src/components/atoms/Metric.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
-defineProps<{
+export interface MetricProps {
     label: string | number;
     value: string | number;
-}>();
+}
+
+defineProps<MetricProps>();
 </script>
 
 <template>
diff --git a/src/components/atoms/NumericCell.vue b/src/components/atoms/NumericCell.vue
index f32b842..967502c 100644
--- a/src/components/atoms/NumericCell.vue
+++ b/src/components/atoms/NumericCell.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 // A right-aligned table cell for numeric columns. Renders <th> in a header row
 // (pass :head="true") and <td> otherwise, with tabular-nums so digits align.
-withDefaults(defineProps<{ head?: boolean }>(), { head: false });
+export interface NumericCellProps { head?: boolean }
+
+withDefaults(defineProps<NumericCellProps>(), { head: false });
 </script>
 
 <template>
diff --git a/src/components/atoms/PrimarySubtitleCell.vue b/src/components/atoms/PrimarySubtitleCell.vue
index 4cbbc16..d23fb7b 100644
--- a/src/components/atoms/PrimarySubtitleCell.vue
+++ b/src/components/atoms/PrimarySubtitleCell.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
+export interface PrimarySubtitleCellProps {
+    primary: string;
+    subtitle?: string;
+    subtitleMono?: boolean;
+}
+
 withDefaults(
-    defineProps<{
-        primary: string;
-        subtitle?: string;
-        subtitleMono?: boolean;
-    }>(),
+    defineProps<PrimarySubtitleCellProps>(),
     { subtitle: '', subtitleMono: false },
 );
 </script>
diff --git a/src/components/atoms/Progress.vue b/src/components/atoms/Progress.vue
index b4bd36f..ec3cf0d 100644
--- a/src/components/atoms/Progress.vue
+++ b/src/components/atoms/Progress.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
+export interface ProgressProps {
+    value?: number;
+    max?: number;
+    min?: number;
+}
+
 // A thin horizontal progress/proportion bar. The fill width is clamped to a
 // minimum so non-zero values stay visible.
 const props = withDefaults(
-    defineProps<{
-        value?: number;
-        max?: number;
-        min?: number;
-    }>(),
+    defineProps<ProgressProps>(),
     { value: 0, max: 100, min: 2 },
 );
 
diff --git a/src/components/atoms/Radio.vue b/src/components/atoms/Radio.vue
index 1bca28f..7892fb3 100644
--- a/src/components/atoms/Radio.vue
+++ b/src/components/atoms/Radio.vue
@@ -2,16 +2,18 @@
 import { computed } from 'vue';
 import { useFieldA11y } from '../../composables/useFieldA11y';
 
+export interface RadioProps {
+    modelValue?: string | number | boolean | null;
+    value: string | number | boolean;
+    name?: string | null;
+    label?: string | null;
+    description?: string | null;
+    invalid?: boolean;
+    disabled?: boolean;
+}
+
 const props = withDefaults(
-    defineProps<{
-        modelValue?: string | number | boolean | null;
-        value: string | number | boolean;
-        name?: string | null;
-        label?: string | null;
-        description?: string | null;
-        invalid?: boolean;
-        disabled?: boolean;
-    }>(),
+    defineProps<RadioProps>(),
     { modelValue: null, name: null, label: null, description: null, invalid: false, disabled: false },
 );
 
diff --git a/src/components/atoms/Select.vue b/src/components/atoms/Select.vue
index 3f90c76..2e4470b 100644
--- a/src/components/atoms/Select.vue
+++ b/src/components/atoms/Select.vue
@@ -7,24 +7,49 @@ import { usePasswordManagerAttrs } from '../../composables/usePasswordManagerAtt
 import { useRootAttrs } from '../../composables/useRootAttrs';
 import Icon from './Icon.vue';
 
-export interface SelectOption {
-    value: string | number;
+/**
+ * An option's `value` type is a parameter so a caller whose values are all
+ * strings can say so — `SelectOption<string>[]` — and have that flow through
+ * SearchableSelect's and Combobox's payloads instead of coercing
+ * `string | number` back down at every call site.
+ *
+ * The default stays `string | number`, NOT `string`: narrowing it would
+ * silently break every existing `SelectOption[]` annotation carrying numeric
+ * ids, which this package supports on purpose.
+ */
+export interface SelectOption<T extends string | number = string | number> {
+    value: T;
     label: string;
 }
 
 defineOptions({ inheritAttrs: false });
 
+export interface SelectProps {
+    modelValue?: string | number | null;
+    name?: string | null;
+    /**
+     * `ReadonlyArray<…>` rather than the `readonly …[]` spelling used
+     * everywhere else, and only because of this union: eslint-plugin-vue's
+     * own type inference does not see through `readonly X[] | Record<…>` and
+     * reports the `() => []` default as invalid for an object-typed prop. The
+     * compiler emits `type: [Array, Object]` either way — the two spellings
+     * are the same type.
+     */
+    options?: ReadonlyArray<SelectOption> | Record<string, string>;
+    placeholder?: string | null;
+    invalid?: boolean;
+}
+
 const props = withDefaults(
-    defineProps<{
-        modelValue?: string | number | null;
-        name?: string | null;
-        options?: SelectOption[] | Record<string, string>;
-        placeholder?: string | null;
-        invalid?: boolean;
-    }>(),
+    defineProps<SelectProps>(),
     { modelValue: null, name: null, options: () => [], placeholder: null, invalid: false },
 );
 
+// Deliberately NOT generic over the option value, unlike SearchableSelect and
+// Combobox. This is a native <select>: the change event carries
+// `HTMLSelectElement.value`, which the DOM has already stringified, so a
+// `SelectOption<number>` here would emit "1" and not 1. Typing the emit as `T`
+// would be a lie the compiler could not catch.
 defineEmits<{ 'update:modelValue': [value: string] }>();
 
 const { rootAttrs, classAttr } = useRootAttrs();
diff --git a/src/components/atoms/Spinner.vue b/src/components/atoms/Spinner.vue
index a57a4b8..64af783 100644
--- a/src/components/atoms/Spinner.vue
+++ b/src/components/atoms/Spinner.vue
@@ -9,11 +9,13 @@ import { useRootAttrs } from '../../composables/useRootAttrs';
 
 defineOptions({ inheritAttrs: false });
 
+export interface SpinnerProps {
+    size?: 'sm' | 'md' | 'lg';
+    label?: string;
+}
+
 const props = withDefaults(
-    defineProps<{
-        size?: 'sm' | 'md' | 'lg';
-        label?: string;
-    }>(),
+    defineProps<SpinnerProps>(),
     { size: 'md', label: 'Loading…' },
 );
 
diff --git a/src/components/atoms/StatusBadge.vue b/src/components/atoms/StatusBadge.vue
index 2216322..27751b9 100644
--- a/src/components/atoms/StatusBadge.vue
+++ b/src/components/atoms/StatusBadge.vue
@@ -12,19 +12,21 @@ import type { Category, LegacyTone, Tone } from '../../helpers/tone';
 // unset `variant` still renders exactly as before.
 /* eslint-disable vue/require-default-prop -- see Badge.vue: defaulting either
    of these would forward a value Badge cannot distinguish from an unset one. */
+export interface StatusBadgeProps {
+    /** SEVERITY tone; legacy color names are deprecated (see Badge). */
+    variant?: Tone | LegacyTone;
+    /**
+     * CATEGORICAL identity, for a state that is not a severity — enabled,
+     * overridden, duplicate, published, or a kind label. Mutually exclusive
+     * with `variant`.
+     */
+    category?: Category;
+    label: string;
+    dot?: boolean;
+}
+
 withDefaults(
-    defineProps<{
-        /** SEVERITY tone; legacy color names are deprecated (see Badge). */
-        variant?: Tone | LegacyTone;
-        /**
-         * CATEGORICAL identity, for a state that is not a severity — enabled,
-         * overridden, duplicate, published, or a kind label. Mutually exclusive
-         * with `variant`.
-         */
-        category?: Category;
-        label: string;
-        dot?: boolean;
-    }>(),
+    defineProps<StatusBadgeProps>(),
     { dot: false },
 );
 /* eslint-enable vue/require-default-prop */
diff --git a/src/components/atoms/Tab.vue b/src/components/atoms/Tab.vue
index 93dfc11..218246e 100644
--- a/src/components/atoms/Tab.vue
+++ b/src/components/atoms/Tab.vue
@@ -9,8 +9,10 @@ import { useRootAttrs } from '../../composables/useRootAttrs';
 
 defineOptions({ inheritAttrs: false });
 
+export interface TabProps { href: string; active?: boolean; as?: string | object }
+
 const props = withDefaults(
-    defineProps<{ href: string; active?: boolean; as?: string | object }>(),
+    defineProps<TabProps>(),
     { active: false, as: 'a' },
 );
 
diff --git a/src/components/atoms/Textarea.vue b/src/components/atoms/Textarea.vue
index 2577cb2..2718724 100644
--- a/src/components/atoms/Textarea.vue
+++ b/src/components/atoms/Textarea.vue
@@ -7,13 +7,15 @@ import { useRootAttrs } from '../../composables/useRootAttrs';
 
 defineOptions({ inheritAttrs: false });
 
+export interface TextareaProps {
+    modelValue?: string | null;
+    name?: string | null;
+    rows?: number;
+    invalid?: boolean;
+}
+
 const props = withDefaults(
-    defineProps<{
-        modelValue?: string | null;
-        name?: string | null;
-        rows?: number;
-        invalid?: boolean;
-    }>(),
+    defineProps<TextareaProps>(),
     { modelValue: '', name: null, rows: 4, invalid: false },
 );
 
diff --git a/src/components/atoms/Th.vue b/src/components/atoms/Th.vue
index c7a0cb1..5918b78 100644
--- a/src/components/atoms/Th.vue
+++ b/src/components/atoms/Th.vue
@@ -3,12 +3,14 @@
 // sort button carrying aria-sort (used by DataTable, usable standalone).
 import Icon from './Icon.vue';
 
+export interface ThProps {
+    sortable?: boolean;
+    sortDir?: 'asc' | 'desc' | null;
+    align?: 'left' | 'right';
+}
+
 withDefaults(
-    defineProps<{
-        sortable?: boolean;
-        sortDir?: 'asc' | 'desc' | null;
-        align?: 'left' | 'right';
-    }>(),
+    defineProps<ThProps>(),
     { sortable: false, sortDir: null, align: 'left' },
 );
 
diff --git a/src/components/atoms/Toggle.vue b/src/components/atoms/Toggle.vue
index 22e4ccf..c898ec6 100644
--- a/src/components/atoms/Toggle.vue
+++ b/src/components/atoms/Toggle.vue
@@ -1,16 +1,18 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
+export interface ToggleProps {
+    modelValue?: boolean;
+    name?: string | null;
+    disabled?: boolean;
+    label?: string | null;
+    description?: string | null;
+}
+
 // An on/off switch. Mirrors the native-checkbox accessibility of Checkbox.vue
 // but renders the PlanetScale-style pill so boolean settings read as toggles.
 const props = withDefaults(
-    defineProps<{
-        modelValue?: boolean;
-        name?: string | null;
-        disabled?: boolean;
-        label?: string | null;
-        description?: string | null;
-    }>(),
+    defineProps<ToggleProps>(),
     { modelValue: false, name: null, disabled: false, label: null, description: null },
 );
 
diff --git a/src/components/layouts/AuthLayout.vue b/src/components/layouts/AuthLayout.vue
index a8c0fb1..4be372b 100644
--- a/src/components/layouts/AuthLayout.vue
+++ b/src/components/layouts/AuthLayout.vue
@@ -26,16 +26,18 @@ import { computed } from 'vue';
 import Card from '../molecules/Card.vue';
 import { pick } from '../../helpers/pick';
 
+export interface AuthLayoutProps {
+    title?: string | null;
+    description?: string | null;
+    maxWidth?: AuthLayoutMaxWidth;
+}
+
 // `maxWidth` defaults to md — the width this card was previously hardcoded to,
 // so existing callers render unchanged. The wider steps exist for auth-adjacent
 // screens that outgrow one column: onboarding with side-by-side billing fields,
 // consent screens showing a document alongside the form.
 const props = withDefaults(
-    defineProps<{
-        title?: string | null;
-        description?: string | null;
-        maxWidth?: AuthLayoutMaxWidth;
-    }>(),
+    defineProps<AuthLayoutProps>(),
     { title: null, description: null, maxWidth: 'md' },
 );
 
diff --git a/src/components/layouts/ErrorLayout.vue b/src/components/layouts/ErrorLayout.vue
index d84efa5..bcd184f 100644
--- a/src/components/layouts/ErrorLayout.vue
+++ b/src/components/layouts/ErrorLayout.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
 // Full-page stage for error/system screens (404, 403, 500, maintenance):
 // status code eyebrow, headline, explanation and a primary action.
+export interface ErrorLayoutProps {
+    code?: string | null;
+    title: string;
+    description?: string | null;
+}
+
 withDefaults(
-    defineProps<{
-        code?: string | null;
-        title: string;
-        description?: string | null;
-    }>(),
+    defineProps<ErrorLayoutProps>(),
     { code: null, description: null },
 );
 </script>
diff --git a/src/components/molecules/Accordion.vue b/src/components/molecules/Accordion.vue
index cecaf50..5b625ed 100644
--- a/src/components/molecules/Accordion.vue
+++ b/src/components/molecules/Accordion.vue
@@ -6,18 +6,22 @@ import { provide } from 'vue';
 import { useControllable } from '../../composables/useControllable';
 import { accordionKey } from './accordionContext';
 
+export interface AccordionProps {
+    modelValue?: readonly string[];
+    multiple?: boolean;
+}
+
 const props = withDefaults(
-    defineProps<{
-        modelValue?: string[];
-        multiple?: boolean;
-    }>(),
+    defineProps<AccordionProps>(),
     { modelValue: undefined, multiple: false },
 );
 
 const emit = defineEmits<{ 'update:modelValue': [keys: string[]] }>();
 
-const openKeys = useControllable(
-    () => props.modelValue,
+// `modelValue` is accepted as readonly and copied in, so a caller can bind a
+// ReadonlyArray of keys; what goes back out on update stays mutable.
+const openKeys = useControllable<string[]>(
+    () => (props.modelValue === undefined ? undefined : [...props.modelValue]),
     (value) => emit('update:modelValue', value),
     [],
 );
diff --git a/src/components/molecules/AccordionItem.vue b/src/components/molecules/AccordionItem.vue
index 28f1c36..d1bdc76 100644
--- a/src/components/molecules/AccordionItem.vue
+++ b/src/components/molecules/AccordionItem.vue
@@ -5,12 +5,14 @@ import { computed, inject, ref, useId } from 'vue';
 import { accordionKey } from './accordionContext';
 import Icon from '../atoms/Icon.vue';
 
+export interface AccordionItemProps {
+    title: string;
+    // Key within the parent Accordion; defaults to the title.
+    value?: string | null;
+}
+
 const props = withDefaults(
-    defineProps<{
-        title: string;
-        // Key within the parent Accordion; defaults to the title.
-        value?: string | null;
-    }>(),
+    defineProps<AccordionItemProps>(),
     { value: null },
 );
 
diff --git a/src/components/molecules/Alert.vue b/src/components/molecules/Alert.vue
index 4b7ee7b..58c2270 100644
--- a/src/components/molecules/Alert.vue
+++ b/src/components/molecules/Alert.vue
@@ -7,12 +7,14 @@ import { useRootAttrs } from '../../composables/useRootAttrs';
 
 defineOptions({ inheritAttrs: false });
 
+export interface AlertProps {
+    /** Semantic tone. `error` is a deprecated alias for `danger`. */
+    variant?: Tone | LegacyTone;
+    title?: string | null;
+}
+
 const props = withDefaults(
-    defineProps<{
-        /** Semantic tone. `error` is a deprecated alias for `danger`. */
-        variant?: Tone | LegacyTone;
-        title?: string | null;
-    }>(),
+    defineProps<AlertProps>(),
     { variant: 'info', title: null },
 );
 
diff --git a/src/components/molecules/Breadcrumbs.stories.ts b/src/components/molecules/Breadcrumbs.stories.ts
index 2a31e11..3ad1eb3 100644
--- a/src/components/molecules/Breadcrumbs.stories.ts
+++ b/src/components/molecules/Breadcrumbs.stories.ts
@@ -31,6 +31,20 @@ export const SingleItem: Story = {
     args: { items: [{ label: 'Dashboard' }] },
 };
 
+// An INTERIOR crumb without an href renders as plain text rather than a dead
+// link — an ancestor with no page of its own, or a trail assembled from route
+// data where some segments have no URL. `href` accepts null for exactly this,
+// so a caller can map optional data straight through.
+export const NonLinkCrumb: Story = {
+    args: {
+        items: [
+            { label: 'Instances', href: '#' },
+            { label: 'Archived', href: null },
+            { label: 'Mustermann AG' },
+        ],
+    },
+};
+
 export const LongTrail: Story = {
     args: {
         items: [
diff --git a/src/components/molecules/Breadcrumbs.vue b/src/components/molecules/Breadcrumbs.vue
index daa4e99..63b9ebf 100644
--- a/src/components/molecules/Breadcrumbs.vue
+++ b/src/components/molecules/Breadcrumbs.vue
@@ -5,14 +5,23 @@
 // static text, de-emphasized and marked aria-current="page".
 export interface BreadcrumbItem {
     label: string;
-    href?: string;
+    /**
+     * Omit — or pass null — for a crumb that is not a link. The template has
+     * always rendered a plain <span> for a falsy href (an ancestor with no
+     * page of its own, a label-only segment), so the type says so too:
+     * requiring `string` forced every caller building a trail from optional
+     * route data to assert or filter on the way in.
+     */
+    href?: string | null;
+}
+
+export interface BreadcrumbsProps {
+    items?: readonly BreadcrumbItem[];
+    as?: string | object;
 }
 
 withDefaults(
-    defineProps<{
-        items?: BreadcrumbItem[];
-        as?: string | object;
-    }>(),
+    defineProps<BreadcrumbsProps>(),
     { items: () => [], as: 'a' },
 );
 </script>
diff --git a/src/components/molecules/Card.vue b/src/components/molecules/Card.vue
index 873886e..c0e5e9b 100644
--- a/src/components/molecules/Card.vue
+++ b/src/components/molecules/Card.vue
@@ -6,19 +6,21 @@ import { pick } from '../../helpers/pick';
 
 defineOptions({ inheritAttrs: false });
 
+export interface CardProps {
+    title?: string | null;
+    description?: string | null;
+    padded?: boolean;
+    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. 'sm'
+    // is for cards nested inside another card/list — a denser container,
+    // not a different component.
+    size?: 'sm' | 'md' | 'lg';
+}
+
 const props = withDefaults(
-    defineProps<{
-        title?: string | null;
-        description?: string | null;
-        padded?: boolean;
-        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. 'sm'
-        // is for cards nested inside another card/list — a denser container,
-        // not a different component.
-        size?: 'sm' | 'md' | 'lg';
-    }>(),
+    defineProps<CardProps>(),
     { title: null, description: null, padded: true, variant: 'default', hoverable: false, size: 'md' },
 );
 
diff --git a/src/components/molecules/CodeLine.vue b/src/components/molecules/CodeLine.vue
index 14b1fd6..37aade5 100644
--- a/src/components/molecules/CodeLine.vue
+++ b/src/components/molecules/CodeLine.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import CopyButton from './CopyButton.vue';
 
+export interface CodeLineProps {
+    value?: string;
+    copyable?: boolean;
+}
+
 withDefaults(
-    defineProps<{
-        value?: string;
-        copyable?: boolean;
-    }>(),
+    defineProps<CodeLineProps>(),
     { value: '', copyable: true },
 );
 </script>
diff --git a/src/components/molecules/Combobox.stories.ts b/src/components/molecules/Combobox.stories.ts
index beac74a..5360bea 100644
--- a/src/components/molecules/Combobox.stories.ts
+++ b/src/components/molecules/Combobox.stories.ts
@@ -12,13 +12,17 @@ const cabinets = [
     { value: 'b_review', label: 'b_review (basket)' },
 ];
 
-const meta: Meta<typeof Combobox> = {
+// Untyped Meta/StoryObj, same as DataTable: the component is generic over
+// its option value, which Storybook's Meta<typeof X> inference can't
+// represent. These stories drive the component from a template, not args,
+// so nothing is lost.
+const meta: Meta = {
     title: 'Molecules/Combobox',
-    component: Combobox,
+    component: Combobox as unknown as Meta['component'],
 };
 
 export default meta;
-type Story = StoryObj<typeof Combobox>;
+type Story = StoryObj;
 
 export const Default: Story = {
     render: () => ({
diff --git a/src/components/molecules/Combobox.vue b/src/components/molecules/Combobox.vue
index 092707e..dc807d8 100644
--- a/src/components/molecules/Combobox.vue
+++ b/src/components/molecules/Combobox.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends string | number = string | number">
 // Free-text input with filtered suggestions (ARIA combobox). Unlike
 // SearchableSelect — which picks from a closed set — the typed text IS the
 // value; suggestions are shortcuts. Built on the same useListNavigation core.
@@ -10,15 +10,23 @@ import { useFieldA11y } from '../../composables/useFieldA11y';
 import { useListNavigation } from '../../composables/useListNavigation';
 import type { SelectOption } from '../atoms/Select.vue';
 
+/**
+ * Generic over the option value. `modelValue` stays a plain string — here the
+ * TYPED TEXT is the value and suggestions are only shortcuts — but `@select`
+ * hands back the option that was picked, so its `value` should keep whatever
+ * type the caller's options carry.
+ */
+export interface ComboboxProps<T extends string | number = string | number> {
+    modelValue?: string;
+    options?: readonly SelectOption<T>[];
+    name?: string | null;
+    placeholder?: string | null;
+    invalid?: boolean;
+    emptyMessage?: string | null;
+}
+
 const props = withDefaults(
-    defineProps<{
-        modelValue?: string;
-        options?: SelectOption[];
-        name?: string | null;
-        placeholder?: string | null;
-        invalid?: boolean;
-        emptyMessage?: string | null;
-    }>(),
+    defineProps<ComboboxProps<T>>(),
     {
         modelValue: '',
         options: () => [],
@@ -31,7 +39,7 @@ const props = withDefaults(
 
 const emit = defineEmits<{
     'update:modelValue': [value: string];
-    select: [option: SelectOption];
+    select: [option: SelectOption<T>];
 }>();
 
 const { describedBy } = useFieldA11y(props);
@@ -68,7 +76,7 @@ function close(): void {
     setActive(-1);
 }
 
-function selectOption(opt: SelectOption): void {
+function selectOption(opt: SelectOption<T>): void {
     emit('update:modelValue', opt.label);
     emit('select', opt);
     close();
diff --git a/src/components/molecules/CopyButton.vue b/src/components/molecules/CopyButton.vue
index d4455d0..1908b71 100644
--- a/src/components/molecules/CopyButton.vue
+++ b/src/components/molecules/CopyButton.vue
@@ -3,16 +3,18 @@ import { push } from '../../composables/useToast';
 import { touchTargetClasses } from '../../helpers/touchTarget';
 import Icon from '../atoms/Icon.vue';
 
+export interface CopyButtonProps {
+    value?: string;
+    label?: string;
+    copiedMessage?: string;
+    iconSize?: string;
+}
+
 // Icon-only "copy to clipboard" button. Writes `value` to the clipboard and
 // pushes a success toast. Colour/ring/icon-size ride in via class so both app
 // chrome (theme tokens) and the DocuWare mirror (dw hex) reuse the behaviour.
 const props = withDefaults(
-    defineProps<{
-        value?: string;
-        label?: string;
-        copiedMessage?: string;
-        iconSize?: string;
-    }>(),
+    defineProps<CopyButtonProps>(),
     {
         value: '',
         label: 'Copy to clipboard',
diff --git a/src/components/molecules/DescriptionItem.vue b/src/components/molecules/DescriptionItem.vue
index 5235b0a..5949406 100644
--- a/src/components/molecules/DescriptionItem.vue
+++ b/src/components/molecules/DescriptionItem.vue
@@ -2,13 +2,15 @@
 import { computed, inject } from 'vue';
 import { descriptionListKey } from './descriptionListContext';
 
+export interface DescriptionItemProps {
+    label: string;
+    tone?: 'ink' | 'muted';
+}
+
 // `tone` is a text-emphasis axis (ink = primary value, muted = secondary),
 // intentionally NOT `variant` (which app-wide denotes a status colour).
 const props = withDefaults(
-    defineProps<{
-        label: string;
-        tone?: 'ink' | 'muted';
-    }>(),
+    defineProps<DescriptionItemProps>(),
     { tone: 'ink' },
 );
 
diff --git a/src/components/molecules/DescriptionList.vue b/src/components/molecules/DescriptionList.vue
index f8199db..82718d6 100644
--- a/src/components/molecules/DescriptionList.vue
+++ b/src/components/molecules/DescriptionList.vue
@@ -2,6 +2,10 @@
 import { computed, provide } from 'vue';
 import { descriptionListKey } from './descriptionListContext';
 
+export interface DescriptionListProps {
+    layout?: 'gutter' | 'rows';
+}
+
 // Read-only metadata list: a stack of label → value rows. Pair with DescriptionItem.
 //
 // `layout` picks the row shape, and every item in the list follows it — the
@@ -16,9 +20,7 @@ import { descriptionListKey } from './descriptionListContext';
 // value to the far edge and rules a line under each pair, so one limit is one
 // line however long its label runs.
 const props = withDefaults(
-    defineProps<{
-        layout?: 'gutter' | 'rows';
-    }>(),
+    defineProps<DescriptionListProps>(),
     { layout: 'gutter' },
 );
 
diff --git a/src/components/molecules/Dropdown.vue b/src/components/molecules/Dropdown.vue
index 38adad9..791327c 100644
--- a/src/components/molecules/Dropdown.vue
+++ b/src/components/molecules/Dropdown.vue
@@ -13,14 +13,16 @@ import { useClickOutside } from '../../composables/useClickOutside';
 import { useControllable } from '../../composables/useControllable';
 import { useEscapeKey } from '../../composables/useEscapeKey';
 
+export interface DropdownProps {
+    align?: 'left' | 'right';
+    // Width utility class for the menu panel, e.g. `w-80` for wider menus.
+    width?: string;
+    // Optional v-model:open; leave unbound for internal state.
+    open?: boolean;
+}
+
 const props = withDefaults(
-    defineProps<{
-        align?: 'left' | 'right';
-        // Width utility class for the menu panel, e.g. `w-80` for wider menus.
-        width?: string;
-        // Optional v-model:open; leave unbound for internal state.
-        open?: boolean;
-    }>(),
+    defineProps<DropdownProps>(),
     { align: 'right', width: 'w-56', open: undefined },
 );
 
diff --git a/src/components/molecules/DropdownItem.vue b/src/components/molecules/DropdownItem.vue
index 7a0cfd9..b30cdc7 100644
--- a/src/components/molecules/DropdownItem.vue
+++ b/src/components/molecules/DropdownItem.vue
@@ -2,15 +2,17 @@
 import { computed } from 'vue';
 import type { Component } from 'vue';
 
+export interface DropdownItemProps {
+    href?: string | null;
+    active?: boolean;
+    // `submit` lets the item act as a form submit button (e.g. tenant switch).
+    type?: 'button' | 'submit';
+    // Link component (e.g. Inertia's Link) used instead of <a> when href is set.
+    as?: Component | null;
+}
+
 const props = withDefaults(
-    defineProps<{
-        href?: string | null;
-        active?: boolean;
-        // `submit` lets the item act as a form submit button (e.g. tenant switch).
-        type?: 'button' | 'submit';
-        // Link component (e.g. Inertia's Link) used instead of <a> when href is set.
-        as?: Component | null;
-    }>(),
+    defineProps<DropdownItemProps>(),
     { href: null, active: false, type: 'button', as: null },
 );
 
diff --git a/src/components/molecules/EmptyState.vue b/src/components/molecules/EmptyState.vue
index b158660..34bceaf 100644
--- a/src/components/molecules/EmptyState.vue
+++ b/src/components/molecules/EmptyState.vue
@@ -2,13 +2,15 @@
 import IconBadge from '../atoms/IconBadge.vue';
 import type { IconName } from '../../icons';
 
+export interface EmptyStateProps {
+    icon?: IconName;
+    variant?: 'accent' | 'danger' | 'success' | 'warning' | 'neutral';
+    title?: string | null;
+    description?: string | null;
+}
+
 withDefaults(
-    defineProps<{
-        icon?: IconName;
-        variant?: 'accent' | 'danger' | 'success' | 'warning' | 'neutral';
-        title?: string | null;
-        description?: string | null;
-    }>(),
+    defineProps<EmptyStateProps>(),
     { icon: 'sparkles', variant: 'neutral', title: null, description: null },
 );
 </script>
diff --git a/src/components/molecules/Field.vue b/src/components/molecules/Field.vue
index 8225337..43e5079 100644
--- a/src/components/molecules/Field.vue
+++ b/src/components/molecules/Field.vue
@@ -1,16 +1,18 @@
 <script setup lang="ts">
 import Label from '../atoms/Label.vue';
 
+export interface FieldProps {
+    label?: string | null;
+    name?: string | null;
+    hint?: string | null;
+    required?: boolean;
+    // In the Blade original this fell back to Laravel's $errors bag; under
+    // Inertia the consuming form passes the message in explicitly.
+    error?: string | null;
+}
+
 withDefaults(
-    defineProps<{
-        label?: string | null;
-        name?: string | null;
-        hint?: string | null;
-        required?: boolean;
-        // In the Blade original this fell back to Laravel's $errors bag; under
-        // Inertia the consuming form passes the message in explicitly.
-        error?: string | null;
-    }>(),
+    defineProps<FieldProps>(),
     { label: null, name: null, hint: null, required: false, error: null },
 );
 </script>
diff --git a/src/components/molecules/FileInput.vue b/src/components/molecules/FileInput.vue
index aa15ec7..6cd6092 100644
--- a/src/components/molecules/FileInput.vue
+++ b/src/components/molecules/FileInput.vue
@@ -4,14 +4,16 @@ import { cx } from '../../helpers/cx';
 import { formControlClasses } from '../../helpers/formControlClasses';
 import { useFieldA11y } from '../../composables/useFieldA11y';
 
+export interface FileInputProps {
+    // File inputs are write-only: the browser owns the selection, so the
+    // model only flows outward (input → caller), never back in.
+    modelValue?: readonly File[] | null;
+    name?: string | null;
+    invalid?: boolean;
+}
+
 const props = withDefaults(
-    defineProps<{
-        // File inputs are write-only: the browser owns the selection, so the
-        // model only flows outward (input → caller), never back in.
-        modelValue?: File[] | null;
-        name?: string | null;
-        invalid?: boolean;
-    }>(),
+    defineProps<FileInputProps>(),
     { modelValue: null, name: null, invalid: false },
 );
 
diff --git a/src/components/molecules/FormActions.vue b/src/components/molecules/FormActions.vue
index 5582863..9ffeb6d 100644
--- a/src/components/molecules/FormActions.vue
+++ b/src/components/molecules/FormActions.vue
@@ -2,11 +2,13 @@
 import { computed } from 'vue';
 import { pick } from '../../helpers/pick';
 
+export interface FormActionsProps { align?: 'between' | 'end' | 'start' }
+
 // Form-footer action row. `between` puts the secondary action (Cancel) on the
 // left and the primary on the right; `end` right-aligns everything. The
 // `secondary` slot renders before the primary default slot. Pair with Button.
 const props = withDefaults(
-    defineProps<{ align?: 'between' | 'end' | 'start' }>(),
+    defineProps<FormActionsProps>(),
     { align: 'between' },
 );
 
diff --git a/src/components/molecules/FormGrid.vue b/src/components/molecules/FormGrid.vue
index 2b5e351..162af45 100644
--- a/src/components/molecules/FormGrid.vue
+++ b/src/components/molecules/FormGrid.vue
@@ -2,13 +2,15 @@
 import { computed } from 'vue';
 import { pick } from '../../helpers/pick';
 
+export interface FormGridProps {
+    cols?: 1 | 2 | 3;
+}
+
 // Responsive form/field grid: single column on mobile, splitting at `sm`. Replaces
 // the ad-hoc `grid gap-4 sm:grid-cols-2` blocks repeated across forms. Class strings
 // are full literals (not interpolated) so Tailwind never purges them.
 const props = withDefaults(
-    defineProps<{
-        cols?: 1 | 2 | 3;
-    }>(),
+    defineProps<FormGridProps>(),
     { cols: 2 },
 );
 
diff --git a/src/components/molecules/InputNumber.vue b/src/components/molecules/InputNumber.vue
index 39759ed..1cc9d46 100644
--- a/src/components/molecules/InputNumber.vue
+++ b/src/components/molecules/InputNumber.vue
@@ -8,16 +8,18 @@ import { formControlClasses } from '../../helpers/formControlClasses';
 import { useFieldA11y } from '../../composables/useFieldA11y';
 import Icon from '../atoms/Icon.vue';
 
+export interface InputNumberProps {
+    modelValue?: number | null;
+    name?: string | null;
+    min?: number | null;
+    max?: number | null;
+    step?: number;
+    invalid?: boolean;
+    disabled?: boolean;
+}
+
 const props = withDefaults(
-    defineProps<{
-        modelValue?: number | null;
-        name?: string | null;
-        min?: number | null;
-        max?: number | null;
-        step?: number;
-        invalid?: boolean;
-        disabled?: boolean;
-    }>(),
+    defineProps<InputNumberProps>(),
     { modelValue: null, name: null, min: null, max: null, step: 1, invalid: false, disabled: false },
 );
 
diff --git a/src/components/molecules/KindLegend.vue b/src/components/molecules/KindLegend.vue
index 63b6a24..0b36d9f 100644
--- a/src/components/molecules/KindLegend.vue
+++ b/src/components/molecules/KindLegend.vue
@@ -39,12 +39,14 @@ export interface KindLegendItem {
     icon?: IconName;
 }
 
+export interface KindLegendProps {
+    items: readonly KindLegendItem[];
+    /** Leading caption, e.g. "Kinds". Omitted when the context is obvious. */
+    label?: string;
+}
+
 withDefaults(
-    defineProps<{
-        items: KindLegendItem[];
-        /** Leading caption, e.g. "Kinds". Omitted when the context is obvious. */
-        label?: string;
-    }>(),
+    defineProps<KindLegendProps>(),
     { label: '' },
 );
 </script>
diff --git a/src/components/molecules/LabeledCodeBlock.vue b/src/components/molecules/LabeledCodeBlock.vue
index 01e9b8c..039ab93 100644
--- a/src/components/molecules/LabeledCodeBlock.vue
+++ b/src/components/molecules/LabeledCodeBlock.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
 import CodeLine from './CodeLine.vue';
 
+export interface LabeledCodeBlockProps {
+    label: string;
+    value?: string;
+    copyable?: boolean;
+}
+
 // An uppercase caption over a copyable code line. Used for surfacing URLs,
 // endpoints, and one-time secrets.
 withDefaults(
-    defineProps<{
-        label: string;
-        value?: string;
-        copyable?: boolean;
-    }>(),
+    defineProps<LabeledCodeBlockProps>(),
     { value: '', copyable: true },
 );
 </script>
diff --git a/src/components/molecules/ListRow.vue b/src/components/molecules/ListRow.vue
index aa5487f..b0c8f85 100644
--- a/src/components/molecules/ListRow.vue
+++ b/src/components/molecules/ListRow.vue
@@ -2,13 +2,15 @@
 import { computed } from 'vue';
 import type { Component } from 'vue';
 
+export interface ListRowProps {
+    href?: string | null;
+    first?: boolean;
+    // Link component (e.g. Inertia's Link) used instead of <a> when href is set.
+    as?: Component | null;
+}
+
 const props = withDefaults(
-    defineProps<{
-        href?: string | null;
-        first?: boolean;
-        // Link component (e.g. Inertia's Link) used instead of <a> when href is set.
-        as?: Component | null;
-    }>(),
+    defineProps<ListRowProps>(),
     { href: null, first: false, as: null },
 );
 
diff --git a/src/components/molecules/PageHeading.vue b/src/components/molecules/PageHeading.vue
index 02deec9..94c3c20 100644
--- a/src/components/molecules/PageHeading.vue
+++ b/src/components/molecules/PageHeading.vue
@@ -18,12 +18,14 @@ import Breadcrumbs, { type BreadcrumbItem } from './Breadcrumbs.vue';
 
 defineOptions({ inheritAttrs: false });
 
+export interface PageHeadingProps {
+    eyebrow?: string | null;
+    breadcrumbs?: readonly BreadcrumbItem[];
+    breadcrumbAs?: string | object;
+}
+
 withDefaults(
-    defineProps<{
-        eyebrow?: string | null;
-        breadcrumbs?: BreadcrumbItem[];
-        breadcrumbAs?: string | object;
-    }>(),
+    defineProps<PageHeadingProps>(),
     { eyebrow: null, breadcrumbs: () => [], breadcrumbAs: 'a' },
 );
 
diff --git a/src/components/molecules/Pagination.vue b/src/components/molecules/Pagination.vue
index 8f691fe..bece398 100644
--- a/src/components/molecules/Pagination.vue
+++ b/src/components/molecules/Pagination.vue
@@ -1,6 +1,14 @@
 <script setup lang="ts">
 import Button from '../atoms/Button.vue';
 
+export interface PaginationProps {
+    prevHref?: string | null;
+    nextHref?: string | null;
+    prevLabel?: string;
+    nextLabel?: string;
+    onNavigate?: ((href: string) => void) | null;
+}
+
 // Prev/next pager for cursor/simple-paginated lists. Renders nothing when neither
 // link is present, so callers can drop it in unconditionally. Links are plain hrefs
 // by default (Inertia-agnostic) — under Inertia the `<a>` triggers a full page
@@ -8,13 +16,7 @@ import Button from '../atoms/Button.vue';
 // navigation yourself (e.g. Inertia's router.visit for a partial/preserve-state
 // reload) without making @inertiajs/vue3 a package dependency.
 const props = withDefaults(
-    defineProps<{
-        prevHref?: string | null;
-        nextHref?: string | null;
-        prevLabel?: string;
-        nextLabel?: string;
-        onNavigate?: ((href: string) => void) | null;
-    }>(),
+    defineProps<PaginationProps>(),
     { prevHref: null, nextHref: null, prevLabel: 'Previous', nextLabel: 'Next', onNavigate: null },
 );
 
diff --git a/src/components/molecules/PasswordInput.vue b/src/components/molecules/PasswordInput.vue
index f135942..ba6bda0 100644
--- a/src/components/molecules/PasswordInput.vue
+++ b/src/components/molecules/PasswordInput.vue
@@ -5,12 +5,14 @@ import { computed, ref } from 'vue';
 import Icon from '../atoms/Icon.vue';
 import Input from '../atoms/Input.vue';
 
+export interface PasswordInputProps {
+    modelValue?: string;
+    name?: string | null;
+    invalid?: boolean;
+}
+
 const props = withDefaults(
-    defineProps<{
-        modelValue?: string;
-        name?: string | null;
-        invalid?: boolean;
-    }>(),
+    defineProps<PasswordInputProps>(),
     { modelValue: '', name: null, invalid: false },
 );
 
diff --git a/src/components/molecules/PinInput.vue b/src/components/molecules/PinInput.vue
index 9d790f4..ea19a0c 100644
--- a/src/components/molecules/PinInput.vue
+++ b/src/components/molecules/PinInput.vue
@@ -6,15 +6,17 @@ import { computed, ref } from 'vue';
 import { cx } from '../../helpers/cx';
 import { useFieldA11y } from '../../composables/useFieldA11y';
 
+export interface PinInputProps {
+    modelValue?: string;
+    length?: number;
+    name?: string | null;
+    invalid?: boolean;
+    disabled?: boolean;
+    label?: string;
+}
+
 const props = withDefaults(
-    defineProps<{
-        modelValue?: string;
-        length?: number;
-        name?: string | null;
-        invalid?: boolean;
-        disabled?: boolean;
-        label?: string;
-    }>(),
+    defineProps<PinInputProps>(),
     {
         modelValue: '',
         length: 6,
diff --git a/src/components/molecules/Popover.vue b/src/components/molecules/Popover.vue
index 68bf209..dc15099 100644
--- a/src/components/molecules/Popover.vue
+++ b/src/components/molecules/Popover.vue
@@ -7,14 +7,16 @@ import { useClickOutside } from '../../composables/useClickOutside';
 import { useControllable } from '../../composables/useControllable';
 import { useEscapeKey } from '../../composables/useEscapeKey';
 
+export interface PopoverProps {
+    align?: 'left' | 'right';
+    // Width utility class for the panel.
+    width?: string;
+    // Optional v-model:open; leave unbound for internal state.
+    open?: boolean;
+}
+
 const props = withDefaults(
-    defineProps<{
-        align?: 'left' | 'right';
-        // Width utility class for the panel.
-        width?: string;
-        // Optional v-model:open; leave unbound for internal state.
-        open?: boolean;
-    }>(),
+    defineProps<PopoverProps>(),
     { align: 'left', width: 'w-72', open: undefined },
 );
 
diff --git a/src/components/molecules/RadioGroup.vue b/src/components/molecules/RadioGroup.vue
index 09c43e7..3e2d520 100644
--- a/src/components/molecules/RadioGroup.vue
+++ b/src/components/molecules/RadioGroup.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-withDefaults(defineProps<{ label?: string | null }>(), { label: null });
+export interface RadioGroupProps { label?: string | null }
+
+withDefaults(defineProps<RadioGroupProps>(), { label: null });
 </script>
 
 <template>
diff --git a/src/components/molecules/SearchableSelect.stories.ts b/src/components/molecules/SearchableSelect.stories.ts
index eee8dbf..09f95ed 100644
--- a/src/components/molecules/SearchableSelect.stories.ts
+++ b/src/components/molecules/SearchableSelect.stories.ts
@@ -4,13 +4,17 @@ import { ref } from 'vue';
 import SearchableSelect from './SearchableSelect.vue';
 import Field from './Field.vue';
 
-const meta: Meta<typeof SearchableSelect> = {
+// Untyped Meta/StoryObj, same as DataTable: the component is generic over
+// its option value, which Storybook's Meta<typeof X> inference can't
+// represent. These stories drive the component from a template, not args,
+// so nothing is lost.
+const meta: Meta = {
     title: 'Molecules/SearchableSelect',
-    component: SearchableSelect,
+    component: SearchableSelect as unknown as Meta['component'],
 };
 
 export default meta;
-type Story = StoryObj<typeof SearchableSelect>;
+type Story = StoryObj;
 
 export const Default: Story = {
     render: () => ({
diff --git a/src/components/molecules/SearchableSelect.vue b/src/components/molecules/SearchableSelect.vue
index 5e8272a..ef5f40f 100644
--- a/src/components/molecules/SearchableSelect.vue
+++ b/src/components/molecules/SearchableSelect.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends string | number = string | number">
 import { computed, nextTick, ref, watch } from 'vue';
 import { formControlClasses } from '../../helpers/formControlClasses';
 import { useClickOutside } from '../../composables/useClickOutside';
@@ -7,14 +7,23 @@ import Icon from '../atoms/Icon.vue';
 import Input from '../atoms/Input.vue';
 import type { SelectOption } from '../atoms/Select.vue';
 
+/**
+ * Generic over the option value: this control picks from a CLOSED set and
+ * emits `option.value` verbatim, so whatever the caller's options carry is
+ * exactly what comes back. `T` is inferred from `options` and `modelValue`
+ * together, so binding a plain `string` model widens it rather than pinning
+ * it to the literal union of the options.
+ */
+export interface SearchableSelectProps<T extends string | number = string | number> {
+    modelValue?: T | null;
+    options?: readonly SelectOption<T>[];
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyMessage?: string;
+}
+
 const props = withDefaults(
-    defineProps<{
-        modelValue?: string | number | null;
-        options?: SelectOption[];
-        placeholder?: string;
-        searchPlaceholder?: string;
-        emptyMessage?: string;
-    }>(),
+    defineProps<SearchableSelectProps<T>>(),
     {
         modelValue: null,
         options: () => [],
@@ -24,7 +33,7 @@ const props = withDefaults(
     },
 );
 
-const emit = defineEmits<{ 'update:modelValue': [value: string | number] }>();
+const emit = defineEmits<{ 'update:modelValue': [value: T] }>();
 
 const open = ref(false);
 const query = ref('');
@@ -77,7 +86,7 @@ function closeMenu() {
     setActive(-1);
 }
 
-function selectOption(opt: SelectOption) {
+function selectOption(opt: SelectOption<T>) {
     emit('update:modelValue', opt.value);
     closeMenu();
 }
diff --git a/src/components/molecules/Stepper.vue b/src/components/molecules/Stepper.vue
index 09460d8..f467a5f 100644
--- a/src/components/molecules/Stepper.vue
+++ b/src/components/molecules/Stepper.vue
@@ -6,13 +6,15 @@ export interface Step {
     label: string;
 }
 
+export interface StepperProps {
+    steps: readonly Step[];
+    current?: number;
+}
+
 // Horizontal progress indicator for multi-step wizards. Purely presentational:
 // the parent owns the active index and navigation.
 const props = withDefaults(
-    defineProps<{
-        steps: Step[];
-        current?: number;
-    }>(),
+    defineProps<StepperProps>(),
     { current: 0 },
 );
 
diff --git a/src/components/molecules/Tabs.vue b/src/components/molecules/Tabs.vue
index 546d08d..41fb831 100644
--- a/src/components/molecules/Tabs.vue
+++ b/src/components/molecules/Tabs.vue
@@ -15,11 +15,13 @@ export interface TabItem {
     disabled?: boolean;
 }
 
+export interface TabsProps {
+    tabs: readonly TabItem[];
+    modelValue?: string;
+}
+
 const props = withDefaults(
-    defineProps<{
-        tabs: TabItem[];
-        modelValue?: string;
-    }>(),
+    defineProps<TabsProps>(),
     { modelValue: undefined },
 );
 
diff --git a/src/components/molecules/Tooltip.vue b/src/components/molecules/Tooltip.vue
index 07ea394..d469637 100644
--- a/src/components/molecules/Tooltip.vue
+++ b/src/components/molecules/Tooltip.vue
@@ -12,11 +12,13 @@
 import { computed, ref, useId } from 'vue';
 import { pick } from '../../helpers/pick';
 
+export interface TooltipProps {
+    text: string;
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+}
+
 const props = withDefaults(
-    defineProps<{
-        text: string;
-        placement?: 'top' | 'bottom' | 'left' | 'right';
-    }>(),
+    defineProps<TooltipProps>(),
     { placement: 'top' },
 );
 
diff --git a/src/components/organisms/Chart.vue b/src/components/organisms/Chart.vue
index 59ef729..b4784b6 100644
--- a/src/components/organisms/Chart.vue
+++ b/src/components/organisms/Chart.vue
@@ -2,15 +2,17 @@
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { chartBaseOptions } from '../../helpers/chartTheme';
 
+export interface ChartProps {
+    type?: string;
+    series: readonly unknown[];
+    options?: Record<string, unknown>;
+    height?: number | string;
+}
+
 // Thin ApexCharts wrapper. `apexcharts` is an OPTIONAL peer dependency: it is
 // imported lazily so apps that never render a chart don't pay for the bundle.
 const props = withDefaults(
-    defineProps<{
-        type?: string;
-        series: unknown[];
-        options?: Record<string, unknown>;
-        height?: number | string;
-    }>(),
+    defineProps<ChartProps>(),
     { type: 'line', options: () => ({}), height: 288 },
 );
 
diff --git a/src/components/organisms/CodeEditor.vue b/src/components/organisms/CodeEditor.vue
index ff91a34..ee8ae1f 100644
--- a/src/components/organisms/CodeEditor.vue
+++ b/src/components/organisms/CodeEditor.vue
@@ -8,20 +8,22 @@ import CopyButton from '../molecules/CopyButton.vue';
 // that never render an editor don't pay for the bundle (same convention as
 // CodePreview, this component's read-only sibling).
 
+export interface CodeEditorProps {
+    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;
+    /** Pins a copy-to-clipboard button over the top-right of the editor. Opt-in, so existing surfaces keep their chrome. */
+    copyable?: boolean;
+    copyLabel?: string;
+    copiedMessage?: string;
+}
+
 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;
-        /** Pins a copy-to-clipboard button over the top-right of the editor. Opt-in, so existing surfaces keep their chrome. */
-        copyable?: boolean;
-        copyLabel?: string;
-        copiedMessage?: string;
-    }>(),
+    defineProps<CodeEditorProps>(),
     {
         modelValue: '',
         language: 'json',
diff --git a/src/components/organisms/CodePreview.vue b/src/components/organisms/CodePreview.vue
index e36ae9a..368212b 100644
--- a/src/components/organisms/CodePreview.vue
+++ b/src/components/organisms/CodePreview.vue
@@ -6,12 +6,14 @@ 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.
 
+export interface CodePreviewProps {
+    value?: string;
+    language?: 'text' | 'json' | 'markdown';
+    maxHeight?: string;
+}
+
 const props = withDefaults(
-    defineProps<{
-        value?: string;
-        language?: 'text' | 'json' | 'markdown';
-        maxHeight?: string;
-    }>(),
+    defineProps<CodePreviewProps>(),
     {
         value: '',
         language: 'text',
diff --git a/src/components/organisms/ConfigValue.vue b/src/components/organisms/ConfigValue.vue
index c782fe8..e27f190 100644
--- a/src/components/organisms/ConfigValue.vue
+++ b/src/components/organisms/ConfigValue.vue
@@ -3,10 +3,12 @@ import { computed } from 'vue';
 import CodePreview from './CodePreview.vue';
 import DescriptionItem from '../molecules/DescriptionItem.vue';
 
-const props = defineProps<{
+export interface ConfigValueProps {
     label: string;
     value?: string | null;
-}>();
+}
+
+const props = defineProps<ConfigValueProps>();
 
 type DisplayKind = 'empty' | 'text' | 'json' | 'markdown';
 
diff --git a/src/components/organisms/DataTable.vue b/src/components/organisms/DataTable.vue
index e404a06..a857aa5 100644
--- a/src/components/organisms/DataTable.vue
+++ b/src/components/organisms/DataTable.vue
@@ -26,28 +26,30 @@ import EmptyState from '../molecules/EmptyState.vue';
 import Th from '../atoms/Th.vue';
 import { touchTargetBoundsClasses, touchTargetLabelClasses } from '../../helpers/touchTarget';
 
+export interface DataTableProps<T extends Record<string, unknown>> {
+    columns: readonly DataTableColumn<T>[];
+    rows: readonly T[];
+    rowKey: keyof T | ((row: T) => RowKey);
+    loading?: boolean;
+    error?: string | null;
+    selectable?: boolean;
+    /** v-model:selected */
+    selected?: readonly RowKey[];
+    sortMode?: 'client' | 'server';
+    /** v-model:sort */
+    sort?: SortState | null;
+    paginationMode?: 'client' | 'server' | 'none';
+    /** v-model:page */
+    page?: number;
+    pageSize?: number;
+    /** Total row count in server mode (client mode derives it). */
+    total?: number | null;
+    stickyHeader?: boolean;
+    density?: 'comfortable' | 'compact';
+}
+
 const props = withDefaults(
-    defineProps<{
-        columns: DataTableColumn<T>[];
-        rows: T[];
-        rowKey: keyof T | ((row: T) => RowKey);
-        loading?: boolean;
-        error?: string | null;
-        selectable?: boolean;
-        /** v-model:selected */
-        selected?: RowKey[];
-        sortMode?: 'client' | 'server';
-        /** v-model:sort */
-        sort?: SortState | null;
-        paginationMode?: 'client' | 'server' | 'none';
-        /** v-model:page */
-        page?: number;
-        pageSize?: number;
-        /** Total row count in server mode (client mode derives it). */
-        total?: number | null;
-        stickyHeader?: boolean;
-        density?: 'comfortable' | 'compact';
-    }>(),
+    defineProps<DataTableProps<T>>(),
     {
         loading: false,
         error: null,
diff --git a/src/components/organisms/Drawer.vue b/src/components/organisms/Drawer.vue
index 8d94a48..7db7115 100644
--- a/src/components/organisms/Drawer.vue
+++ b/src/components/organisms/Drawer.vue
@@ -9,16 +9,18 @@ import { useFocusTrap } from '../../composables/useFocusTrap';
 import { useScrollLock } from '../../composables/useScrollLock';
 import { touchTargetClasses } from '../../helpers/touchTarget';
 
+export interface DrawerProps {
+    modelValue?: boolean;
+    title?: string | null;
+    description?: string | null;
+    side?: 'right' | 'left';
+    // Width utility class for the panel.
+    width?: string;
+    closeOnBackdrop?: boolean;
+}
+
 const props = withDefaults(
-    defineProps<{
-        modelValue?: boolean;
-        title?: string | null;
-        description?: string | null;
-        side?: 'right' | 'left';
-        // Width utility class for the panel.
-        width?: string;
-        closeOnBackdrop?: boolean;
-    }>(),
+    defineProps<DrawerProps>(),
     {
         modelValue: false,
         title: null,
diff --git a/src/components/organisms/KnowledgeSchemaPanel.vue b/src/components/organisms/KnowledgeSchemaPanel.vue
index 32c0f4b..6946c67 100644
--- a/src/components/organisms/KnowledgeSchemaPanel.vue
+++ b/src/components/organisms/KnowledgeSchemaPanel.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
 import CodePreview from './CodePreview.vue';
 
+export interface KnowledgeSchemaPanelProps {
+    knowledge?: string | null;
+    schema?: string | Record<string, unknown> | null;
+    knowledgeLabel?: string;
+    schemaLabel?: string;
+    maxHeight?: string;
+}
+
 withDefaults(
-    defineProps<{
-        knowledge?: string | null;
-        schema?: string | Record<string, unknown> | null;
-        knowledgeLabel?: string;
-        schemaLabel?: string;
-        maxHeight?: string;
-    }>(),
+    defineProps<KnowledgeSchemaPanelProps>(),
     {
         knowledge: null,
         schema: null,
diff --git a/src/components/organisms/MetricGrid.vue b/src/components/organisms/MetricGrid.vue
index ddabd98..4ac4692 100644
--- a/src/components/organisms/MetricGrid.vue
+++ b/src/components/organisms/MetricGrid.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { Comment, computed, Fragment, Text, useSlots, type VNode } from 'vue';
 
-const props = withDefaults(defineProps<{
+export interface MetricGridProps {
     columns?: 1 | 2 | 3 | 4;
-}>(), {
+}
+
+const props = withDefaults(defineProps<MetricGridProps>(), {
     columns: 4,
 });
 
diff --git a/src/components/organisms/Modal.vue b/src/components/organisms/Modal.vue
index fed211f..e904fe5 100644
--- a/src/components/organisms/Modal.vue
+++ b/src/components/organisms/Modal.vue
@@ -5,30 +5,32 @@ import { useFocusTrap } from '../../composables/useFocusTrap';
 import { useScrollLock } from '../../composables/useScrollLock';
 import { touchTargetClasses } from '../../helpers/touchTarget';
 
+export interface ModalProps {
+    modelValue?: boolean;
+    title?: string | null;
+    description?: string | null;
+    closeOnBackdrop?: boolean;
+    // CSS selector (scoped to the panel) for the element to focus on open,
+    // e.g. 'input[name=email]'. Defaults to the first focusable element.
+    initialFocus?: string | null;
+    // 'md' is a reading-width dialog: a confirmation, a short form. 'lg'
+    // is the same dialog, wider — for content that is intrinsically wide
+    // (a table, a list of dotted key paths, side-by-side fields) but still
+    // short enough to size itself. 'full' stretches the panel to the
+    // viewport (minus the overlay inset) and scrolls the body slot instead
+    // of growing the dialog. The gap between 'md' and 'full' is why 'lg'
+    // exists: without it, anything too wide for max-w-lg had to go
+    // edge-to-edge, and a six-line picker in a full-screen panel reads as
+    // a broken page rather than a dialog.
+    size?: 'md' | 'lg' | 'full';
+}
+
 // Centered dialog with a scrim. Open state is v-model-driven so callers keep
 // ownership of visibility. Escape and backdrop clicks request a close. While
 // open, focus is trapped in the panel and page scrolling is locked; focus
 // returns to the previously focused element on close.
 const props = withDefaults(
-    defineProps<{
-        modelValue?: boolean;
-        title?: string | null;
-        description?: string | null;
-        closeOnBackdrop?: boolean;
-        // CSS selector (scoped to the panel) for the element to focus on open,
-        // e.g. 'input[name=email]'. Defaults to the first focusable element.
-        initialFocus?: string | null;
-        // 'md' is a reading-width dialog: a confirmation, a short form. 'lg'
-        // is the same dialog, wider — for content that is intrinsically wide
-        // (a table, a list of dotted key paths, side-by-side fields) but still
-        // short enough to size itself. 'full' stretches the panel to the
-        // viewport (minus the overlay inset) and scrolls the body slot instead
-        // of growing the dialog. The gap between 'md' and 'full' is why 'lg'
-        // exists: without it, anything too wide for max-w-lg had to go
-        // edge-to-edge, and a six-line picker in a full-screen panel reads as
-        // a broken page rather than a dialog.
-        size?: 'md' | 'lg' | 'full';
-    }>(),
+    defineProps<ModalProps>(),
     {
         modelValue: false,
         title: null,
diff --git a/src/components/organisms/Navbar.vue b/src/components/organisms/Navbar.vue
index 2e2a758..9dc8159 100644
--- a/src/components/organisms/Navbar.vue
+++ b/src/components/organisms/Navbar.vue
@@ -4,11 +4,13 @@
 import Icon from '../atoms/Icon.vue';
 import { touchTargetClasses } from '../../helpers/touchTarget';
 
+export interface NavbarProps {
+    // Hide the mobile menu button when the page has no sidebar.
+    menuButton?: boolean;
+}
+
 withDefaults(
-    defineProps<{
-        // Hide the mobile menu button when the page has no sidebar.
-        menuButton?: boolean;
-    }>(),
+    defineProps<NavbarProps>(),
     { menuButton: true },
 );
 
diff --git a/src/components/organisms/ResourceList.vue b/src/components/organisms/ResourceList.vue
index dbcf176..737ce4d 100644
--- a/src/components/organisms/ResourceList.vue
+++ b/src/components/organisms/ResourceList.vue
@@ -5,6 +5,19 @@ import ListRow from '../molecules/ListRow.vue';
 import ListIcon from '../atoms/ListIcon.vue';
 import type { IconName } from '../../icons';
 
+export interface ResourceListProps {
+    items: readonly Record<string, unknown>[];
+    hrefKey?: string;
+    rowKey?: string | null;
+    emptyIcon?: IconName;
+    emptyVariant?: 'accent' | 'danger' | 'success' | 'warning' | 'neutral';
+    emptyTitle?: string | null;
+    emptyDescription?: string | null;
+    addHref?: string | null;
+    addLabel?: string;
+    addIcon?: IconName;
+}
+
 // Card-framed list of rows with a built-in empty state and trailing "add" row — the
 // shell that every index/list page repeated. Callers own the per-row markup through
 // the scoped slots (`row`, plus optional `row-leading` / `row-trailing` that map onto
@@ -13,18 +26,7 @@ import type { IconName } from '../../icons';
 // Each item's link is read from `hrefKey` (default `href`); set it to make rows
 // clickable. The v-for `:key` comes from `rowKey`, falling back to the href, then index.
 const props = withDefaults(
-    defineProps<{
-        items: Array<Record<string, unknown>>;
-        hrefKey?: string;
-        rowKey?: string | null;
-        emptyIcon?: IconName;
-        emptyVariant?: 'accent' | 'danger' | 'success' | 'warning' | 'neutral';
-        emptyTitle?: string | null;
-        emptyDescription?: string | null;
-        addHref?: string | null;
-        addLabel?: string;
-        addIcon?: IconName;
-    }>(),
+    defineProps<ResourceListProps>(),
     {
         hrefKey: 'href',
         rowKey: null,
diff --git a/src/components/organisms/Sidebar.vue b/src/components/organisms/Sidebar.vue
index 2c47e67..4094fa1 100644
--- a/src/components/organisms/Sidebar.vue
+++ b/src/components/organisms/Sidebar.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 // App navigation rail. Composes SidebarGroup/SidebarItem in the default slot;
 // brand and footer slots frame it. AppShell handles the responsive collapse.
+export interface SidebarProps {
+    label?: string;
+}
+
 withDefaults(
-    defineProps<{
-        label?: string;
-    }>(),
+    defineProps<SidebarProps>(),
     { label: 'Main navigation' },
 );
 </script>
diff --git a/src/components/organisms/SidebarGroup.vue b/src/components/organisms/SidebarGroup.vue
index c412d53..933c9a8 100644
--- a/src/components/organisms/SidebarGroup.vue
+++ b/src/components/organisms/SidebarGroup.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 // Labeled section inside a Sidebar.
-defineProps<{ label?: string }>();
+export interface SidebarGroupProps { label?: string }
+
+defineProps<SidebarGroupProps>();
 </script>
 
 <template>
diff --git a/src/components/organisms/SidebarItem.vue b/src/components/organisms/SidebarItem.vue
index 32541b0..8861711 100644
--- a/src/components/organisms/SidebarItem.vue
+++ b/src/components/organisms/SidebarItem.vue
@@ -15,13 +15,15 @@ import { useRootAttrs } from '../../composables/useRootAttrs';
 // and a feature that silently never engaged. Same pattern as Link.vue.
 defineOptions({ inheritAttrs: false });
 
+export interface SidebarItemProps {
+    href: string;
+    icon?: IconName | null;
+    active?: boolean;
+    as?: Component | null;
+}
+
 const props = withDefaults(
-    defineProps<{
-        href: string;
-        icon?: IconName | null;
-        active?: boolean;
-        as?: Component | null;
-    }>(),
+    defineProps<SidebarItemProps>(),
     { icon: null, active: false, as: null },
 );
 
diff --git a/src/components/organisms/Toaster.vue b/src/components/organisms/Toaster.vue
index ed50921..6af81db 100644
--- a/src/components/organisms/Toaster.vue
+++ b/src/components/organisms/Toaster.vue
@@ -4,14 +4,16 @@ import type { IconName } from '../../icons';
 import Icon from '../atoms/Icon.vue';
 import { pick } from '../../helpers/pick';
 
+export interface ToasterProps {
+    // Cap on the toast stack width; raise it where messages run long
+    // (e.g. flash messages that echo user input back).
+    maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+}
+
 // Unified toast overlay. Mount once near the app root; producers call `push()`
 // from the useToast composable (copy buttons, Inertia flash bridging, etc.).
 const props = withDefaults(
-    defineProps<{
-        // Cap on the toast stack width; raise it where messages run long
-        // (e.g. flash messages that echo user input back).
-        maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-    }>(),
+    defineProps<ToasterProps>(),
     { maxWidth: 'sm' },
 );
 
diff --git a/src/composables/usePagination.ts b/src/composables/usePagination.ts
index 85cc3a2..6b3fda4 100644
--- a/src/composables/usePagination.ts
+++ b/src/composables/usePagination.ts
@@ -23,7 +23,7 @@ export function usePagination(
     canNext: ComputedRef<boolean>;
     prev: () => void;
     next: () => void;
-    sliceOf: <T>(rows: T[]) => T[];
+    sliceOf: <T>(rows: readonly T[]) => T[];
 } {
     const pageSize = computed(() => options.pageSize?.() ?? 10);
 
@@ -50,7 +50,7 @@ export function usePagination(
         }
     }
 
-    function sliceOf<T>(rows: T[]): T[] {
+    function sliceOf<T>(rows: readonly T[]): T[] {
         const start = (page.value - 1) * pageSize.value;
         return rows.slice(start, start + pageSize.value);
     }
diff --git a/src/composables/useSelection.ts b/src/composables/useSelection.ts
index 6dd2bcf..73c0b49 100644
--- a/src/composables/useSelection.ts
+++ b/src/composables/useSelection.ts
@@ -6,7 +6,7 @@ export type RowKey = string | number;
 
 export interface UseSelectionOptions {
     /** Controlled selection (v-model:selected), or undefined for internal state. */
-    selected?: () => RowKey[] | undefined;
+    selected?: () => readonly RowKey[] | undefined;
     onChange?: (selected: RowKey[]) => void;
 }
 
@@ -15,7 +15,7 @@ export interface UseSelectionOptions {
  * a select-all that reports the indeterminate in-between state.
  */
 export function useSelection(
-    keys: () => RowKey[],
+    keys: () => readonly RowKey[],
     options: UseSelectionOptions = {},
 ): {
     selected: WritableComputedRef<RowKey[]>;
@@ -26,8 +26,14 @@ export function useSelection(
     allSelected: ComputedRef<boolean>;
     someSelected: ComputedRef<boolean>;
 } {
+    // The controlled selection is accepted as readonly and copied on the way
+    // in, so `selected` — which callers read, emit and store — stays a mutable
+    // array, and a write never mutates what the caller passed down.
     const selected = useControllable<RowKey[]>(
-        options.selected ?? (() => undefined),
+        () => {
+            const controlled = options.selected?.();
+            return controlled === undefined ? undefined : [...controlled];
+        },
         (value) => options.onChange?.(value),
         [],
     );
diff --git a/src/composables/useSort.ts b/src/composables/useSort.ts
index 6f8d174..d134a41 100644
--- a/src/composables/useSort.ts
+++ b/src/composables/useSort.ts
@@ -40,7 +40,7 @@ function defaultCompare(a: unknown, b: unknown): number {
  * `onChange` and ignore `sortedRows` — the state is all you need to emit.
  */
 export function useSort<T extends Record<string, unknown>>(
-    rows: () => T[],
+    rows: () => readonly T[],
     options: UseSortOptions<T> = {},
 ): {
     sort: WritableComputedRef<SortState | null>;
@@ -65,8 +65,11 @@ export function useSort<T extends Record<string, unknown>>(
 
     const sortedRows = computed(() => {
         const state = sort.value;
+        // Copied, not passed through: `rows` is accepted as readonly so a caller
+        // can hand over a frozen or ReadonlyArray source, while `sortedRows` stays
+        // a mutable array for whatever the caller does with it next.
         if (!state) {
-            return rows();
+            return [...rows()];
         }
         const comparator =
             options.comparators?.[state.key] ??
diff --git a/src/index.ts b/src/index.ts
index 769969f..fe37bdb 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -212,6 +212,88 @@ export type { TabItem } from './components/molecules/Tabs.vue';
 export type { KindLegendItem } from './components/molecules/KindLegend.vue';
 export type { DataTableColumn } from './components/organisms/dataTable.types';
 
+// Per-component prop types, so a consuming app can name the props of a
+// component it wraps instead of re-declaring the unions by hand:
+//
+//     import type { ButtonProps } from '@codebar-ag/storybook';
+//     defineProps<{ variant?: ButtonProps['variant'] }>();
+//
+// One line per component, kept in sync by the `verify:props-exports` build
+// step — a component whose props are not exported fails the build.
+export type { AccordionProps } from './components/molecules/Accordion.vue';
+export type { AccordionItemProps } from './components/molecules/AccordionItem.vue';
+export type { AlertProps } from './components/molecules/Alert.vue';
+export type { AuthLayoutProps } from './components/layouts/AuthLayout.vue';
+export type { AvatarProps } from './components/atoms/Avatar.vue';
+export type { BadgeProps } from './components/atoms/Badge.vue';
+export type { BreadcrumbsProps } from './components/molecules/Breadcrumbs.vue';
+export type { ButtonProps } from './components/atoms/Button.vue';
+export type { CardProps } from './components/molecules/Card.vue';
+export type { ChartProps } from './components/organisms/Chart.vue';
+export type { CheckboxProps } from './components/atoms/Checkbox.vue';
+export type { CodeEditorProps } from './components/organisms/CodeEditor.vue';
+export type { CodeLineProps } from './components/molecules/CodeLine.vue';
+export type { CodePreviewProps } from './components/organisms/CodePreview.vue';
+export type { ComboboxProps } from './components/molecules/Combobox.vue';
+export type { ConfigValueProps } from './components/organisms/ConfigValue.vue';
+export type { CopyButtonProps } from './components/molecules/CopyButton.vue';
+export type { DataTableProps } from './components/organisms/DataTable.vue';
+export type { DescriptionItemProps } from './components/molecules/DescriptionItem.vue';
+export type { DescriptionListProps } from './components/molecules/DescriptionList.vue';
+export type { DividerProps } from './components/atoms/Divider.vue';
+export type { DrawerProps } from './components/organisms/Drawer.vue';
+export type { DropdownProps } from './components/molecules/Dropdown.vue';
+export type { DropdownItemProps } from './components/molecules/DropdownItem.vue';
+export type { EmptyStateProps } from './components/molecules/EmptyState.vue';
+export type { ErrorLayoutProps } from './components/layouts/ErrorLayout.vue';
+export type { FieldProps } from './components/molecules/Field.vue';
+export type { FileInputProps } from './components/molecules/FileInput.vue';
+export type { FormActionsProps } from './components/molecules/FormActions.vue';
+export type { FormGridProps } from './components/molecules/FormGrid.vue';
+export type { IconProps } from './components/atoms/Icon.vue';
+export type { IconBadgeProps } from './components/atoms/IconBadge.vue';
+export type { IdCellProps } from './components/atoms/IdCell.vue';
+export type { InputProps } from './components/atoms/Input.vue';
+export type { InputNumberProps } from './components/molecules/InputNumber.vue';
+export type { KindLegendProps } from './components/molecules/KindLegend.vue';
+export type { KindMarkProps } from './components/atoms/KindMark.vue';
+export type { KnowledgeSchemaPanelProps } from './components/organisms/KnowledgeSchemaPanel.vue';
+export type { LabelProps } from './components/atoms/Label.vue';
+export type { LabeledCodeBlockProps } from './components/molecules/LabeledCodeBlock.vue';
+export type { LinkProps } from './components/atoms/Link.vue';
+export type { ListIconProps } from './components/atoms/ListIcon.vue';
+export type { ListRowProps } from './components/molecules/ListRow.vue';
+export type { MetricProps } from './components/atoms/Metric.vue';
+export type { MetricGridProps } from './components/organisms/MetricGrid.vue';
+export type { ModalProps } from './components/organisms/Modal.vue';
+export type { NavbarProps } from './components/organisms/Navbar.vue';
+export type { NumericCellProps } from './components/atoms/NumericCell.vue';
+export type { PageHeadingProps } from './components/molecules/PageHeading.vue';
+export type { PaginationProps } from './components/molecules/Pagination.vue';
+export type { PasswordInputProps } from './components/molecules/PasswordInput.vue';
+export type { PinInputProps } from './components/molecules/PinInput.vue';
+export type { PopoverProps } from './components/molecules/Popover.vue';
+export type { PrimarySubtitleCellProps } from './components/atoms/PrimarySubtitleCell.vue';
+export type { ProgressProps } from './components/atoms/Progress.vue';
+export type { RadioProps } from './components/atoms/Radio.vue';
+export type { RadioGroupProps } from './components/molecules/RadioGroup.vue';
+export type { ResourceListProps } from './components/organisms/ResourceList.vue';
+export type { SearchableSelectProps } from './components/molecules/SearchableSelect.vue';
+export type { SelectProps } from './components/atoms/Select.vue';
+export type { SidebarProps } from './components/organisms/Sidebar.vue';
+export type { SidebarGroupProps } from './components/organisms/SidebarGroup.vue';
+export type { SidebarItemProps } from './components/organisms/SidebarItem.vue';
+export type { SpinnerProps } from './components/atoms/Spinner.vue';
+export type { StatusBadgeProps } from './components/atoms/StatusBadge.vue';
+export type { StepperProps } from './components/molecules/Stepper.vue';
+export type { TabProps } from './components/atoms/Tab.vue';
+export type { TabsProps } from './components/molecules/Tabs.vue';
+export type { TextareaProps } from './components/atoms/Textarea.vue';
+export type { ThProps } from './components/atoms/Th.vue';
+export type { ToasterProps } from './components/organisms/Toaster.vue';
+export type { ToggleProps } from './components/atoms/Toggle.vue';
+export type { TooltipProps } from './components/molecules/Tooltip.vue';
+
 /**
  * Every atom keyed by the name it registers under globally. Names are used
  * verbatim in templates (e.g. `<Button>`, `<Card>`) when the plugin is installed.