diff --git a/.github/agents/component-test-auditor.agent.md b/.github/agents/component-test-auditor.agent.md
new file mode 100644
index 0000000..2851570
--- /dev/null
+++ b/.github/agents/component-test-auditor.agent.md
@@ -0,0 +1,71 @@
+---
+description: "Audit and complete Vue/web component test suites. Use when the user asks to check test coverage, find missing test cases, fill gaps in component tests, verify a11y of a component, audit *.test.ts / a11y.test.ts files, or ensure a component is fully covered by vitest. Triggers: \"check tests\", \"complete tests\", \"test coverage\", \"missing test cases\", \"audit a11y\", \"проверь тесты\", \"допиши тесты\", \"покрытие тестов\"."
+name: "Component Test Auditor"
+tools: [read, search, edit, execute, todo]
+model: "Claude Sonnet 4.5 (copilot)"
+argument-hint: "Path to a component or test file to audit"
+user-invocable: true
+---
+
+You are a specialist in Vue/web component test completeness auditing. Your single job: given a component, determine whether its test suite fully covers behavior, props, emits, slots, edge cases, and accessibility — then fill the gaps with additional vitest specs.
+
+## Constraints
+
+- DO NOT modify production component source. ONLY add or refine test files.
+- DO NOT introduce new test frameworks. Use the existing `vitest` + `@vue/test-utils` setup found in the repo.
+- DO NOT create redundant tests for behavior already covered. Each new spec must close a concrete gap.
+- DO NOT skip running the suite — every change must be verified with vitest before reporting back.
+- ONLY audit one component (or a small explicit list) per invocation. Stay focused.
+
+## Required Skills
+
+Always load these skills via `read_file` before acting:
+
+1. `/Users/robonen/.agents/skills/vue-testing-best-practices/SKILL.md` — patterns for Vue component tests.
+2. `/Users/robonen/.agents/skills/vitest/SKILL.md` — vitest API, mocking, coverage.
+3. `/Users/robonen/.agents/skills/accessibility-a11y/SKILL.md` — WCAG checks, ARIA, keyboard nav. Load whenever the component has interactive behavior, focus management, ARIA attributes, or a sibling `a11y.test.ts` file exists.
+4. `/Users/robonen/Projects/tools/.github/skills/monorepo/SKILL.md` — for repo-specific commands (`pnpm`, test scoping, workspace layout).
+
+## Approach
+
+1. **Locate the component.** Resolve the target `.vue` / `.ts` source and its `__test__/` folder. Inspect sibling `*.test.ts`, `a11y.test.ts`, and any AGENTS.md / README.md for the package.
+2. **Inventory the surface.** From the component source, enumerate: props (with defaults & types), emits, exposed methods, slots (named + scoped), `v-model`s, internal state machines, conditional branches, lifecycle effects, DOM/ARIA attributes, keyboard handlers.
+3. **Inventory existing coverage.** Read all related test files and map each `it(...)` to the surface item it covers. Build a gap table.
+4. **Decide on a11y scope.** If the component is interactive (focusable, ARIA roles, keyboard, form-related) → run the a11y skill checklist and ensure an `a11y.test.ts` exists with: role, accessible name, keyboard interaction, focus order, `aria-*` invariants, and (where applicable) `axe`-style assertions consistent with neighboring components.
+5. **Write the missing specs.** Match the file/folder conventions used by neighbors (e.g. `src/<comp>/__test__/<Component>.test.ts` + `a11y.test.ts`). Mirror style (mount helpers, fixtures, naming). Keep specs deterministic and isolated.
+6. **Run vitest.** Use `runTests` when available, otherwise `pnpm --filter <pkg> test -- <pattern>`. Iterate until green. If a failure reveals a real component bug, STOP and report it — do not silently fix production code.
+7. **Optionally measure coverage.** If coverage is requested or unclear, run vitest in coverage mode scoped to the component file and report uncovered lines/branches.
+
+## Output Format
+
+Return a concise markdown report:
+
+```
+### Component: <name> (<path>)
+
+**Surface inventory**
+- props: ...
+- emits: ...
+- slots: ...
+- interactive/a11y: yes/no — <reason>
+
+**Existing coverage**
+- <file>: N specs — covers X, Y
+- a11y.test.ts: present/absent
+
+**Gaps closed**
+- + <spec name> — <what it covers>
+- + <spec name> — <what it covers>
+
+**Files changed**
+- <path> (+N specs)
+
+**Verification**
+- vitest: PASS (M tests) | coverage: L% lines / B% branches
+- a11y skill applied: yes/no
+
+**Follow-ups (not done)**
+- <anything out of scope or requiring human decision>
+```
+
+If no gaps exist, say so explicitly and do not touch any files.
diff --git a/.github/skills/monorepo/SKILL.md b/.github/skills/monorepo/SKILL.md
new file mode 100644
index 0000000..3b5c2ff
--- /dev/null
+++ b/.github/skills/monorepo/SKILL.md
@@ -0,0 +1,399 @@
+---
+name: monorepo
+description: "Manage the @robonen/tools monorepo. Use when: installing dependencies, creating new packages, linting, building, testing, publishing, or scaffolding workspace packages. Covers pnpm catalogs, tsdown builds, eslint presets, vitest projects, JSR/NPM publishing."
+---
+
+# Monorepo Management
+
+## Overview
+
+This is a pnpm workspace monorepo (`@robonen/tools`) with shared configs, strict dependency management via catalogs, and automated publishing.
+
+## Workspace Layout
+
+| Directory | Purpose | Examples |
+|-----------|---------|---------|
+| `configs/*` | Shared tooling configs | `eslint`, `tsconfig`, `tsdown` |
+| `core/*` | Platform-agnostic TS libraries | `stdlib`, `platform`, `encoding` |
+| `vue/*` | Vue 3 packages | `primitives`, `toolkit` |
+| `docs` | Nuxt 4 documentation site | — |
+| `infra/*` | Infrastructure configs | `renovate` |
+
+## Installing Dependencies
+
+**Always use pnpm. Never use npm or yarn.**
+
+### Add a dependency to a specific package
+
+```bash
+# Runtime dependency
+pnpm -C <package-path> add <dep-name>
+
+# Dev dependency
+pnpm -C <package-path> add -D <dep-name>
+```
+
+Examples:
+```bash
+pnpm -C core/stdlib add -D eslint
+pnpm -C vue/primitives add vue
+```
+
+### Use catalogs for shared versions
+
+Versions shared across multiple packages MUST use the pnpm catalog system. The catalog is defined in `pnpm-workspace.yaml`:
+
+```yaml
+catalog:
+  vitest: ^4.0.18
+  tsdown: ^0.21.0
+  eslint: ^10.4.1
+  vue: ^3.5.28
+  # ... etc
+```
+
+In `package.json`, reference catalog versions with the `catalog:` protocol:
+```json
+{
+  "devDependencies": {
+    "vitest": "catalog:",
+    "eslint": "catalog:"
+  }
+}
+```
+
+**When to add to catalog:** If the dependency is used in 2+ packages, add it to `pnpm-workspace.yaml` under `catalog:` and use `catalog:` in each `package.json`.
+
+**When NOT to use catalog:** Package-specific dependencies used in only one package (e.g., `citty` in root).
+
+### Internal workspace dependencies
+
+Reference sibling packages with the workspace protocol:
+```json
+{
+  "devDependencies": {
+    "@robonen/eslint": "workspace:*",
+    "@robonen/tsconfig": "workspace:*",
+    "@robonen/tsdown": "workspace:*"
+  }
+}
+```
+
+Nearly every package depends on these three shared config packages.
+
+### After installing
+
+Always run `pnpm install` at the root after editing `pnpm-workspace.yaml` or any `package.json` manually.
+
+## Creating a New Package
+
+> **Note:** The existing `bin/cli.ts` (`pnpm create`) is outdated — it generates Vite configs instead of tsdown and lacks eslint/vitest setup. Follow the manual steps below instead.
+
+### 1. Create the directory
+
+Choose the correct parent based on package type:
+- `core/<name>` — Platform-agnostic TypeScript library
+- `vue/<name>` — Vue 3 library (needs jsdom, vue deps)
+- `configs/<name>` — Shared configuration package
+
+### 2. Create `package.json`
+
+```json
+{
+  "name": "@robonen/<name>",
+  "version": "0.0.1",
+  "license": "Apache-2.0",
+  "description": "",
+  "packageManager": "pnpm@10.29.3",
+  "engines": { "node": ">=24.13.1" },
+  "type": "module",
+  "files": ["dist"],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "scripts": {
+    "lint:check": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "test": "vitest run",
+    "dev": "vitest dev",
+    "build": "tsdown"
+  },
+  "devDependencies": {
+    "@robonen/eslint": "workspace:*",
+    "@robonen/tsconfig": "workspace:*",
+    "@robonen/tsdown": "workspace:*",
+    "eslint": "catalog:",
+    "tsdown": "catalog:"
+  }
+}
+```
+
+For Vue packages, also add:
+```json
+{
+  "dependencies": {
+    "vue": "catalog:",
+    "@vue/shared": "catalog:"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "catalog:"
+  }
+}
+```
+
+For packages with sub-path exports (like `core/platform`):
+```json
+{
+  "exports": {
+    "./browsers": {
+      "types": "./dist/browsers.d.ts",
+      "import": "./dist/browsers.js",
+      "require": "./dist/browsers.cjs"
+    }
+  }
+}
+```
+
+### 3. Create `tsconfig.json`
+
+Node/core package:
+```json
+{
+  "extends": "@robonen/tsconfig/tsconfig.json"
+}
+```
+
+Vue package (needs DOM types and path aliases):
+```json
+{
+  "extends": "@robonen/tsconfig/tsconfig.json",
+  "compilerOptions": {
+    "lib": ["DOM"],
+    "baseUrl": ".",
+    "paths": { "@/*": ["src/*"] }
+  }
+}
+```
+
+### 4. Create `tsdown.config.ts`
+
+Standard:
+```typescript
+import { defineConfig } from 'tsdown';
+import { sharedConfig } from '@robonen/tsdown';
+
+export default defineConfig({
+  ...sharedConfig,
+  entry: ['src/index.ts'],
+});
+```
+
+Vue package (externalize vue, bundle internal deps):
+```typescript
+import { defineConfig } from 'tsdown';
+import { sharedConfig } from '@robonen/tsdown';
+
+export default defineConfig({
+  ...sharedConfig,
+  entry: ['src/index.ts'],
+  deps: {
+    neverBundle: ['vue'],
+    alwaysBundle: [/^@robonen\//, '@vue/shared'],
+  },
+  inputOptions: {
+    resolve: {
+      alias: { '@vue/shared': '@vue/shared/dist/shared.esm-bundler.js' },
+    },
+  },
+  define: { __DEV__: 'false' },
+});
+```
+
+### 5. Create `eslint.config.ts`
+
+Standard (node packages):
+```typescript
+import { base, compose, imports, stylistic, typescript } from '@robonen/eslint';
+
+export default compose(base, typescript, imports, stylistic);
+```
+
+> ESLint auto-discovers `eslint.config.ts` (loaded via `jiti`, which `@robonen/eslint` depends on). No `defineConfig` wrapper is needed — `compose()` returns the flat-config array directly.
+
+### 6. Create `vitest.config.ts`
+
+Node package:
+```typescript
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    environment: 'node',
+  },
+});
+```
+
+Vue package:
+```typescript
+import { defineConfig } from 'vitest/config';
+import { resolve } from 'node:path';
+
+export default defineConfig({
+  define: { __DEV__: 'true' },
+  resolve: {
+    alias: { '@': resolve(__dirname, './src') },
+  },
+  test: {
+    environment: 'jsdom',
+  },
+});
+```
+
+### 7. Create `jsr.json` (for publishable packages)
+
+```json
+{
+  "$schema": "https://jsr.io/schema/config-file.v1.json",
+  "name": "@robonen/<name>",
+  "version": "0.0.1",
+  "exports": "./src/index.ts"
+}
+```
+
+### 8. Create source files
+
+```bash
+mkdir -p src
+touch src/index.ts
+```
+
+### 9. Register with vitest projects
+
+Add the new `vitest.config.ts` path to the root `vitest.config.ts` `projects` array.
+
+### 10. Install dependencies
+
+```bash
+pnpm install
+```
+
+### 11. Verify
+
+```bash
+pnpm -C <package-path> build
+pnpm -C <package-path> lint
+pnpm -C <package-path> test
+```
+
+## Linting
+
+Uses **ESLint** (flat config) with composable presets from `@robonen/eslint`.
+
+### Run linting
+
+```bash
+# Check lint errors (no auto-fix)
+pnpm -C <package-path> lint:check
+
+# Auto-fix lint errors
+pnpm -C <package-path> lint:fix
+
+# Check all packages
+pnpm lint:check
+
+# Fix all packages
+pnpm lint:fix
+```
+
+### Available presets
+
+| Preset | Purpose |
+|--------|---------|
+| `base` | ESLint core + Unicorn rules + global ignores |
+| `typescript` | TypeScript rules (via `typescript-eslint`, on `*.ts` + `*.vue`) |
+| `imports` | Import ordering, cycles, duplicates (`eslint-plugin-import-x`) |
+| `stylistic` | Code style via `@stylistic/eslint-plugin` |
+| `vue` | Vue 3 Composition API rules (`eslint-plugin-vue`) |
+| `vitest` | Test file rules (`@vitest/eslint-plugin`) |
+| `node` | Node.js-specific rules (`eslint-plugin-n`) |
+
+Compose presets in `eslint.config.ts`:
+```typescript
+import { base, compose, imports, typescript } from '@robonen/eslint';
+
+export default compose(base, typescript, imports);
+```
+
+**Recommended:** Include `stylistic` preset for code formatting:
+```typescript
+import { base, compose, imports, stylistic, typescript } from '@robonen/eslint';
+
+export default compose(base, typescript, imports, stylistic);
+```
+
+All plugins (including `@stylistic/eslint-plugin`) ship as dependencies of `@robonen/eslint`, so packages only need `@robonen/eslint` + `eslint` in devDependencies.
+
+## Building
+
+```bash
+# Build a specific package
+pnpm -C <package-path> build
+
+# Build all packages
+pnpm build
+```
+
+All packages use `tsdown` with shared config from `@robonen/tsdown`. Output: ESM (`.js`/`.mjs`) + CJS (`.cjs`) + type declarations (`.d.ts`). Every bundle includes an Apache-2.0 license banner.
+
+## Testing
+
+```bash
+# Run tests in a specific package
+pnpm -C <package-path> test
+
+# Run all tests (via vitest projects)
+pnpm test
+
+# Interactive test UI
+pnpm test:ui
+
+# Watch mode in a package
+pnpm -C <package-path> dev
+```
+
+Uses **vitest** with project-based configuration. Root `vitest.config.ts` lists all package vitest configs as projects.
+
+## Publishing
+
+Publishing is **automated** via GitHub Actions on push to `master`:
+
+1. CI builds and tests all packages
+2. Publish workflow compares each package's `version` in `package.json` against npm registry
+3. If version changed → `pnpm publish --access public`
+
+**To publish:** Bump the `version` in `package.json` (and `jsr.json` if present), then merge to `master`.
+
+**NPM scope:** All packages publish under `@robonen/`.
+
+## Documentation
+
+```bash
+pnpm docs:dev      # Start Nuxt dev server
+pnpm docs:generate  # Generate static site
+pnpm docs:preview   # Preview generated site
+pnpm docs:extract   # Extract API docs
+```
+
+## Key Conventions
+
+- **ESM-first:** All packages use `"type": "module"`
+- **Strict TypeScript:** `strict: true`, `noUncheckedIndexedAccess: true`, `verbatimModuleSyntax: true`
+- **License:** Apache-2.0 for all published packages
+- **Node version:** ≥24.13.1 (set in `engines` and CI)
+- **pnpm version:** Pinned in `packageManager` field
+- **No barrel re-exports of entire modules** — export explicitly
+- **`__DEV__` global:** `false` in builds, `true` in tests (Vue packages only)
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
index 5752467..27f7dc6 100644
--- a/.github/workflows/ci.yaml
+++ b/.github/workflows/ci.yaml
@@ -5,21 +5,26 @@ on:
     branches:
       - master
 
+concurrency:
+  group: ci-${{ github.ref }}
+  cancel-in-progress: true
+
 env:
-  NODE_VERSION: 22.x
+  NODE_VERSION: 24.x
 
 jobs:
-  code-quality:
-    name: Code quality checks
+  # Enumerate the workspace packages so the matrix below fans out one job per
+  # package (kept dynamic so new packages are picked up automatically).
+  discover:
+    name: Discover packages
     runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      pull-requests: write
+    outputs:
+      packages: ${{ steps.list.outputs.packages }}
     steps:
       - uses: actions/checkout@v6
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v5
+        uses: pnpm/action-setup@v6
         with:
           run_install: false
 
@@ -31,11 +36,52 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: List workspace packages
+        id: list
+        run: echo "packages=$(pnpm -r ls --depth -1 --json | jq -c '[.[] | select(.name != "tools") | .name]')" >> "$GITHUB_OUTPUT"
+
+  # One job per package — build (with its workspace deps), lint and test run in
+  # parallel across packages. fail-fast: false so every package is reported.
+  check:
+    name: ${{ matrix.package }}
+    needs: discover
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    strategy:
+      fail-fast: false
+      matrix:
+        package: ${{ fromJSON(needs.discover.outputs.packages) }}
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v6
+        with:
+          run_install: false
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      # Build the package and the workspace deps it relies on (incl. @robonen/eslint,
+      # which every package's lint config imports from its built dist).
       - name: Build
-        run: pnpm build
+        run: pnpm --filter "${{ matrix.package }}..." --if-present run build
+
+      # Only the browser-mode test suites (vitest `instances: chromium`) need a
+      # browser. playwright is a direct devDep of these packages, so run its CLI
+      # in the package context (--filter) — it isn't resolvable from the root.
+      - name: Install Playwright Chromium
+        if: matrix.package == '@robonen/primitives' || matrix.package == '@robonen/editor'
+        run: pnpm --filter "${{ matrix.package }}" exec playwright install --with-deps chromium
 
       - name: Lint
-        run: pnpm lint
+        run: pnpm --filter "${{ matrix.package }}" --if-present run lint:check
 
       - name: Test
-        run: pnpm test
\ No newline at end of file
+        run: pnpm --filter "${{ matrix.package }}" --if-present run test
diff --git a/.github/workflows/publish.yaml b/.github/workflows/publish.yaml
index 3ac6de2..931f9e7 100644
--- a/.github/workflows/publish.yaml
+++ b/.github/workflows/publish.yaml
@@ -6,7 +6,7 @@ on:
       - master
 
 env:
-  NODE_VERSION: 22.x
+  NODE_VERSION: 24.x
 
 jobs:
   check-and-publish:
@@ -18,7 +18,7 @@ jobs:
           fetch-depth: 0
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v5
+        uses: pnpm/action-setup@v6
         with:
           run_install: false
 
@@ -31,6 +31,9 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Install Playwright browser
+        run: pnpm --filter "@robonen/primitives" exec playwright install --with-deps chromium
+
       - name: Build & Test
         run: pnpm build && pnpm test
 
diff --git a/.gitignore b/.gitignore
index a84ed06..3da90bf 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,6 +24,7 @@ dist
 
 # test
 coverage
+**/.vitest-attachments
 
 # env
 .env*
diff --git a/.mcp.json b/.mcp.json
new file mode 100644
index 0000000..2148398
--- /dev/null
+++ b/.mcp.json
@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "robonen-docs": {
+      "type": "http",
+      "url": "http://localhost:3000/mcp"
+    }
+  }
+}
diff --git a/configs/eslint/README.md b/configs/eslint/README.md
new file mode 100644
index 0000000..3791415
--- /dev/null
+++ b/configs/eslint/README.md
@@ -0,0 +1,74 @@
+# @robonen/eslint
+
+Composable [ESLint](https://eslint.org) flat-config presets.
+
+## Install
+
+```bash
+pnpm install -D @robonen/eslint eslint jiti
+```
+
+> `jiti` lets ESLint load a TypeScript `eslint.config.ts`.
+
+## Usage
+
+Create `eslint.config.ts` in your project root:
+
+```ts
+import { compose, base, typescript, vue, vitest, imports } from '@robonen/eslint';
+
+export default compose(base, typescript, vue, vitest, imports);
+```
+
+Append custom config objects after presets to override them:
+
+```ts
+import { compose, base, typescript } from '@robonen/eslint';
+
+export default compose(base, typescript, {
+  rules: { 'no-console': 'off' },
+}, {
+  files: ['**/*.vue'],
+  rules: { '@stylistic/no-multiple-empty-lines': 'off' },
+});
+```
+
+## Presets
+
+| Preset       | Plugin(s)                              | Description                                    |
+| ------------ | -------------------------------------- | ---------------------------------------------- |
+| `base`       | `@eslint/js`, `eslint-plugin-unicorn`  | Core eslint + unicorn rules, global ignores    |
+| `typescript` | `typescript-eslint`                    | TypeScript rules (`**/*.ts`, `**/*.vue`)       |
+| `vue`        | `eslint-plugin-vue`                    | Vue 3 Composition API / `<script setup>` rules |
+| `vitest`     | `@vitest/eslint-plugin`                | Test file rules                                |
+| `imports`    | `eslint-plugin-import-x`               | Import rules (cycles, duplicates, ordering)    |
+| `node`       | `eslint-plugin-n`                      | Node.js-specific rules                         |
+| `stylistic`  | `@stylistic/eslint-plugin`             | Formatting rules                               |
+
+`ignores` is also exported on its own if you only want the global ignore list.
+
+## Migrating from `@robonen/oxlint`
+
+This package replaces `@robonen/oxlint`. The preset names and intent are
+preserved, with these mapping notes:
+
+- `eslint/*` rules → ESLint core rules (no prefix), e.g. `eslint/no-console` → `no-console`.
+- `typescript/*` → `@typescript-eslint/*`.
+- `import/*` → `import-x/*` (via `eslint-plugin-import-x`).
+- `node/*` → `n/*` (via `eslint-plugin-n`).
+- `@stylistic/*` and `unicorn/*` are unchanged.
+- `oxc/*` rules are oxc-exclusive and have **no ESLint equivalent**; they are
+  dropped. Their intent is largely covered by `@eslint/js` recommended and
+  `unicorn`.
+- `categories`/`env`/`ignorePatterns` (oxlint config keys) are replaced by flat
+  config equivalents: `@eslint/js` recommended, `languageOptions.globals`, and
+  the `ignores` preset.
+
+## API
+
+### `compose(...configs): FlatConfigArray`
+
+Flattens presets (arrays) and inline overrides (single objects) into one ordered
+flat config array. Later entries override earlier ones — ESLint flat-config
+semantics. Falsy entries (`false`/`null`/`undefined`) are skipped, enabling
+conditional composition.
diff --git a/configs/eslint/docs/intro.vue b/configs/eslint/docs/intro.vue
new file mode 100644
index 0000000..b1fd419
--- /dev/null
+++ b/configs/eslint/docs/intro.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+const usageExample = `import { compose, base, typescript, vue, vitest, imports } from '@robonen/eslint';
+
+// eslint.config.ts
+export default compose(base, typescript, vue, vitest, imports);`;
+
+const overrideExample = `import { compose, base, typescript } from '@robonen/eslint';
+
+export default compose(base, typescript, {
+  // later entries override earlier ones
+  rules: { 'no-console': 'off' },
+});`;
+</script>
+
+<template>
+  <div class="docs-section">
+    <div class="prose-docs">
+      <h1>@robonen/eslint</h1>
+      <p class="text-lg text-(--fg-muted)">
+        Composable ESLint flat-config presets — assemble a linting setup from
+        small, focused building blocks instead of one monolithic config.
+      </p>
+    </div>
+
+    <div class="prose-docs">
+      <p>
+        Modern ESLint flat config is just an ordered array of config objects, but
+        wiring up plugins, parsers, and rule sets by hand is repetitive and easy
+        to get wrong. <code>@robonen/eslint</code> ships a curated set of presets
+        — <code>base</code>, <code>typescript</code>, <code>vue</code>,
+        <code>vitest</code>, <code>imports</code>, <code>node</code>,
+        <code>regexp</code>, and <code>stylistic</code> — and a single
+        <code>compose()</code> helper that flattens them into one config array.
+        Pick the presets your project needs, layer your own overrides on top, and
+        you have a consistent, type-safe lint setup in a few lines.
+      </p>
+    </div>
+
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="font-medium text-(--fg) mb-1.5">Composable presets</h3>
+        <p class="text-sm text-(--fg-muted) m-0">
+          Mix and match focused presets per language and tool. Each preset is a
+          plain flat-config array — no magic, no hidden state.
+        </p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="font-medium text-(--fg) mb-1.5">Override-friendly</h3>
+        <p class="text-sm text-(--fg-muted) m-0">
+          Append inline config objects after presets. Later entries win, exactly
+          as ESLint flat-config semantics intend.
+        </p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="font-medium text-(--fg) mb-1.5">Conditional by design</h3>
+        <p class="text-sm text-(--fg-muted) m-0">
+          <code>compose()</code> skips <code>false</code>/<code>null</code>/<code>undefined</code>
+          entries, so feature flags and conditional spreads just work.
+        </p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="font-medium text-(--fg) mb-1.5">Typed flat config</h3>
+        <p class="text-sm text-(--fg-muted) m-0">
+          Exported <code>FlatConfig</code> and <code>Rules</code> types give you
+          editor autocomplete and type-checked overrides in
+          <code>eslint.config.ts</code>.
+        </p>
+      </div>
+    </div>
+
+    <div class="prose-docs">
+      <h2>Install</h2>
+      <p>
+        Install the package alongside ESLint and <code>jiti</code> (so ESLint can
+        load a TypeScript <code>eslint.config.ts</code>).
+      </p>
+    </div>
+    <DocsCode :code="`pnpm add -D @robonen/eslint eslint jiti`" lang="bash" />
+
+    <div class="prose-docs">
+      <h2>Usage</h2>
+      <p>
+        Create <code>eslint.config.ts</code> in your project root and compose the
+        presets you want:
+      </p>
+    </div>
+    <DocsCode :code="usageExample" lang="ts" />
+
+    <div class="prose-docs">
+      <p>
+        Add inline config objects after the presets to tweak rules — later
+        entries override earlier ones:
+      </p>
+    </div>
+    <DocsCode :code="overrideExample" lang="ts" />
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-elevated) p-5">
+      <h3 class="font-medium text-(--fg) mb-2">Where to next</h3>
+      <ul class="text-sm text-(--fg-muted) space-y-1.5 list-disc pl-5 m-0">
+        <li>
+          <NuxtLink to="/eslint/overview" class="text-(--accent-text) hover:underline">compose</NuxtLink>
+          — flatten presets and overrides into one config array.
+        </li>
+        <li>
+          <NuxtLink to="/eslint/base" class="text-(--accent-text) hover:underline">base</NuxtLink>
+          — core ESLint, unicorn, regexp rules and global ignores.
+        </li>
+        <li>
+          <NuxtLink to="/eslint/typescript" class="text-(--accent-text) hover:underline">typescript</NuxtLink>
+          and
+          <NuxtLink to="/eslint/vue" class="text-(--accent-text) hover:underline">vue</NuxtLink>
+          — language presets for TS and Vue 3 SFCs.
+        </li>
+        <li>
+          Read the guide sections below for the full preset table and migration
+          notes from <code>@robonen/oxlint</code>.
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
diff --git a/configs/eslint/eslint.config.ts b/configs/eslint/eslint.config.ts
new file mode 100644
index 0000000..d6b8969
--- /dev/null
+++ b/configs/eslint/eslint.config.ts
@@ -0,0 +1,3 @@
+import { base, compose, imports, stylistic, typescript } from './src';
+
+export default compose(base, typescript, imports, stylistic);
diff --git a/configs/eslint/package.json b/configs/eslint/package.json
new file mode 100644
index 0000000..99e16c1
--- /dev/null
+++ b/configs/eslint/package.json
@@ -0,0 +1,74 @@
+{
+  "name": "@robonen/eslint",
+  "version": "0.0.1",
+  "license": "Apache-2.0",
+  "description": "Composable ESLint flat configuration presets",
+  "keywords": [
+    "eslint",
+    "eslint-config",
+    "flat-config",
+    "linter",
+    "config",
+    "presets"
+  ],
+  "author": "Robonen Andrew <robonenandrew@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/robonen/tools.git",
+    "directory": "configs/eslint"
+  },
+  "packageManager": "pnpm@10.33.2",
+  "engines": {
+    "node": ">=24.13.1"
+  },
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "scripts": {
+    "lint:check": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "test": "vitest run",
+    "dev": "vitest dev",
+    "build": "tsdown"
+  },
+  "dependencies": {
+    "@eslint/js": "^10.0.1",
+    "@stylistic/eslint-plugin": "catalog:",
+    "@vitest/eslint-plugin": "^1.6.19",
+    "eslint-plugin-import-x": "^4.16.2",
+    "eslint-plugin-n": "^18.0.1",
+    "eslint-plugin-regexp": "^3.1.0",
+    "eslint-plugin-unicorn": "^65.0.0",
+    "eslint-plugin-vue": "^10.9.2",
+    "globals": "^17.6.0",
+    "jiti": "^2.7.0",
+    "typescript-eslint": "^8.60.1",
+    "vue-eslint-parser": "^10.4.1"
+  },
+  "devDependencies": {
+    "@robonen/eslint": "workspace:*",
+    "@robonen/tsconfig": "workspace:*",
+    "@robonen/tsdown": "workspace:*",
+    "eslint": "catalog:",
+    "tsdown": "catalog:"
+  },
+  "peerDependencies": {
+    "eslint": ">=9.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/configs/eslint/rules/README.md b/configs/eslint/rules/README.md
new file mode 100644
index 0000000..92c9c0a
--- /dev/null
+++ b/configs/eslint/rules/README.md
@@ -0,0 +1,21 @@
+# Rules Reference
+
+Документация по preset-ам `@robonen/eslint`: что включает каждый preset и какие правила чаще всего влияют на код.
+
+## Presets
+
+- [base](./base.md)
+- [typescript](./typescript.md)
+- [vue](./vue.md)
+- [vitest](./vitest.md)
+- [imports](./imports.md)
+- [node](./node.md)
+- [stylistic](./stylistic.md)
+
+## Как читать
+
+- `Purpose` — зачем preset подключать.
+- `Key Rules` — ключевые правила из preset-а (не полный dump).
+- `Examples` — минимальные `good/bad` примеры.
+
+Для точного источника правил см. файлы в `configs/eslint/src/presets/*.ts`.
diff --git a/configs/eslint/rules/base.md b/configs/eslint/rules/base.md
new file mode 100644
index 0000000..65579d9
--- /dev/null
+++ b/configs/eslint/rules/base.md
@@ -0,0 +1,36 @@
+# base preset
+
+## Purpose
+
+Базовый quality-профиль для JS/TS-проектов: корректность, анти-паттерны, безопасные дефолты. Включает `@eslint/js` recommended (аналог oxlint-категории `correctness`) + правила `unicorn`.
+
+## Key Rules
+
+- `eqeqeq`: запрещает `==`, требует `===`.
+- `no-unused-vars`: запрещает неиспользуемые переменные (кроме `_name`).
+- `no-eval`, `no-var`, `prefer-const`.
+- `unicorn/prefer-node-protocol`: требует `node:` для built-in модулей.
+- `unicorn/no-thenable`: запрещает thenable-объекты.
+
+> Правила `oxc/*` из `@robonen/oxlint` не имеют аналога в ESLint и были убраны;
+> их назначение покрывается `@eslint/js` recommended и `unicorn`.
+
+## Examples
+
+```ts
+// ✅ Good
+import { readFile } from 'node:fs/promises';
+
+const id = 42;
+if (id === 42) {
+  throw new Error('unexpected');
+}
+
+// ❌ Bad
+import { readFile } from 'fs/promises';
+
+var id = 42;
+if (id == '42') {
+  throw 'unexpected';
+}
+```
diff --git a/configs/eslint/rules/imports.md b/configs/eslint/rules/imports.md
new file mode 100644
index 0000000..101111b
--- /dev/null
+++ b/configs/eslint/rules/imports.md
@@ -0,0 +1,27 @@
+# imports preset
+
+## Purpose
+
+Чистые границы модулей и предсказуемые импорты (через `eslint-plugin-import-x`).
+
+## Key Rules
+
+- `import-x/no-duplicates`.
+- `import-x/no-self-import`.
+- `import-x/no-cycle` (warn).
+- `import-x/no-mutable-exports`.
+- `import-x/consistent-type-specifier-style`: `prefer-top-level`.
+
+## Examples
+
+```ts
+// ✅ Good
+import type { User } from './types';
+import { getUser } from './service';
+
+// ❌ Bad
+import { getUser } from './service';
+import { getUser as getUser2 } from './service';
+
+export let state = 0;
+```
diff --git a/configs/eslint/rules/node.md b/configs/eslint/rules/node.md
new file mode 100644
index 0000000..9aa8181
--- /dev/null
+++ b/configs/eslint/rules/node.md
@@ -0,0 +1,22 @@
+# node preset
+
+## Purpose
+
+Node.js-правила (через `eslint-plugin-n`) и Node-глобалы в `languageOptions.globals`.
+
+## Key Rules
+
+- `n/no-exports-assign`: запрещает перезапись `exports`.
+- `n/no-new-require`: запрещает `new require(...)`.
+
+## Examples
+
+```ts
+// ✅ Good
+module.exports = { run };
+const mod = require('./mod');
+
+// ❌ Bad
+exports = { run };
+const bad = new require('./mod');
+```
diff --git a/configs/eslint/rules/stylistic.md b/configs/eslint/rules/stylistic.md
new file mode 100644
index 0000000..683adcc
--- /dev/null
+++ b/configs/eslint/rules/stylistic.md
@@ -0,0 +1,51 @@
+# stylistic preset
+
+## Purpose
+
+Форматирование через `@stylistic/eslint-plugin` (отступы, пробелы, скобки, переносы, TS/JSX-стиль).
+
+## Defaults
+
+- `indent: 2`
+- `quotes: single`
+- `semi: always`
+- `braceStyle: stroustrup`
+- `commaDangle: always-multiline`
+- `arrowParens: as-needed`
+
+## Key Rules
+
+- `@stylistic/indent`, `@stylistic/no-tabs`.
+- `@stylistic/quotes`, `@stylistic/semi`.
+- `@stylistic/object-curly-spacing`, `@stylistic/comma-spacing`.
+- `@stylistic/arrow-spacing`, `@stylistic/space-before-function-paren`.
+- `@stylistic/max-statements-per-line`.
+- `@stylistic/no-mixed-operators`.
+- `@stylistic/member-delimiter-style` (TS).
+
+## Examples
+
+```ts
+// ✅ Good
+type User = {
+  id: string;
+  role: 'admin' | 'user';
+};
+
+const value = condition
+  ? 'yes'
+  : 'no';
+
+const sum = (a: number, b: number) => a + b;
+
+// ❌ Bad
+type User = {
+  id: string
+  role: 'admin' | 'user'
+}
+
+const value = condition ? 'yes' : 'no'; const x = 1;
+const sum=(a:number,b:number)=>{ return a+b };
+```
+
+Полный список правил и их настройки см. в `src/presets/stylistic.ts`.
diff --git a/configs/eslint/rules/typescript.md b/configs/eslint/rules/typescript.md
new file mode 100644
index 0000000..d3377a7
--- /dev/null
+++ b/configs/eslint/rules/typescript.md
@@ -0,0 +1,33 @@
+# typescript preset
+
+## Purpose
+
+TypeScript-правила для `.ts/.tsx/.mts/.cts` и `<script lang="ts">` в `.vue`. Базируется на `typescript-eslint` recommended (без type-checking).
+
+## Key Rules
+
+- `@typescript-eslint/consistent-type-imports`: выносит типы в `import type`.
+- `@typescript-eslint/no-import-type-side-effects`: запрещает сайд-эффекты в type import.
+- `@typescript-eslint/prefer-as-const`.
+- `@typescript-eslint/no-namespace`, `@typescript-eslint/triple-slash-reference`.
+- `@typescript-eslint/no-wrapper-object-types`: запрещает `String`, `Number`, `Boolean`.
+
+## Examples
+
+```ts
+// ✅ Good
+import type { User } from './types';
+
+const status = 'ok' as const;
+interface Payload {
+  value: string;
+}
+
+// ❌ Bad
+import { User } from './types';
+
+type Boxed = String;
+namespace Legacy {
+  export const x = 1;
+}
+```
diff --git a/configs/eslint/rules/vitest.md b/configs/eslint/rules/vitest.md
new file mode 100644
index 0000000..f5f5b09
--- /dev/null
+++ b/configs/eslint/rules/vitest.md
@@ -0,0 +1,34 @@
+# vitest preset
+
+## Purpose
+
+Правила для тестов (`*.test.*`, `*.spec.*`, `test/**`, `__tests__/**`).
+
+## Key Rules
+
+- `vitest/no-conditional-tests`.
+- `vitest/no-import-node-test`.
+- `vitest/prefer-to-be-truthy`, `vitest/prefer-to-be-falsy`.
+- `vitest/prefer-to-have-length`.
+- Relaxations: `no-unused-vars` и `@typescript-eslint/no-explicit-any` выключены для тестов.
+
+## Examples
+
+```ts
+// ✅ Good
+import { describe, it, expect } from 'vitest';
+
+describe('list', () => {
+  it('has items', () => {
+    expect([1, 2, 3]).toHaveLength(3);
+    expect(true).toBeTruthy();
+  });
+});
+
+// ❌ Bad
+if (process.env.CI) {
+  it('conditionally runs', () => {
+    expect(true).toBe(true);
+  });
+}
+```
diff --git a/configs/eslint/rules/vue.md b/configs/eslint/rules/vue.md
new file mode 100644
index 0000000..dfa5bb5
--- /dev/null
+++ b/configs/eslint/rules/vue.md
@@ -0,0 +1,30 @@
+# vue preset
+
+## Purpose
+
+Правила для Vue 3 с упором на Composition API и `<script setup>`.
+
+## Key Rules
+
+- `vue/no-export-in-script-setup`.
+- `vue/no-import-compiler-macros`.
+- `vue/define-props-declaration`: type-based.
+- `vue/define-emits-declaration`: type-based.
+- `vue/valid-define-props`, `vue/valid-define-emits`.
+- `vue/no-lifecycle-after-await`.
+
+## Examples
+
+```vue
+<script setup lang="ts">
+const props = defineProps<{ id: string }>();
+const emit = defineEmits<{ change: [value: string] }>();
+</script>
+
+<!-- ❌ Bad -->
+<script setup lang="ts">
+import { defineProps } from 'vue';
+export const x = 1;
+const props = defineProps({ id: String });
+</script>
+```
diff --git a/configs/eslint/src/compose.ts b/configs/eslint/src/compose.ts
new file mode 100644
index 0000000..90ef126
--- /dev/null
+++ b/configs/eslint/src/compose.ts
@@ -0,0 +1,34 @@
+import type { FlatConfigArray, FlatConfigInput } from './types';
+
+/**
+ * Compose multiple ESLint flat configurations into a single flat config array.
+ *
+ * ESLint flat config is an ordered array where later entries override earlier
+ * ones, so composition is a flatten: each preset (an array) and each inline
+ * override (a single object) are concatenated in order. `undefined`/`null`
+ * inputs are skipped, allowing conditional spreads.
+ *
+ * @example
+ * ```ts
+ * import { compose, base, typescript, vue } from '@robonen/eslint';
+ *
+ * export default compose(base, typescript, vue, {
+ *   rules: { 'no-console': 'off' },
+ * });
+ * ```
+ */
+export function compose(...configs: Array<FlatConfigInput | false | null | undefined>): FlatConfigArray {
+  const result: FlatConfigArray = [];
+
+  for (const config of configs) {
+    if (!config)
+      continue;
+
+    if (Array.isArray(config))
+      result.push(...config);
+    else
+      result.push(config);
+  }
+
+  return result;
+}
diff --git a/configs/eslint/src/index.ts b/configs/eslint/src/index.ts
new file mode 100644
index 0000000..498a123
--- /dev/null
+++ b/configs/eslint/src/index.ts
@@ -0,0 +1,13 @@
+/* Compose */
+export { compose } from './compose';
+
+/* Presets */
+export { base, ignores, typescript, vue, vitest, imports, node, stylistic, regexp } from './presets';
+
+/* Types */
+export type {
+  FlatConfig,
+  FlatConfigArray,
+  FlatConfigInput,
+  Rules,
+} from './types';
diff --git a/configs/eslint/src/presets/base.ts b/configs/eslint/src/presets/base.ts
new file mode 100644
index 0000000..4da972a
--- /dev/null
+++ b/configs/eslint/src/presets/base.ts
@@ -0,0 +1,128 @@
+import type { FlatConfigArray } from '../types';
+import js from '@eslint/js';
+import unicorn from 'eslint-plugin-unicorn';
+import globals from 'globals';
+import { regexp } from './regexp';
+
+/**
+ * Globally ignored paths — build output, coverage, generated artifacts.
+ *
+ * A flat config entry with only `ignores` acts as a global ignore.
+ */
+export const ignores: FlatConfigArray = [
+  {
+    name: 'robonen/ignores',
+    ignores: [
+      '**/dist/**',
+      '**/coverage/**',
+      '**/node_modules/**',
+      '**/.nuxt/**',
+      '**/.output/**',
+      '**/storybook-static/**',
+      '**/*.min.*',
+      // Hand-authored docs-site content co-located in packages (intro/guide .vue
+      // pages and per-composable demos). Not shipped source; lints against the
+      // docs app's own toolchain, and non-Vue packages can't even parse .vue.
+      '**/docs/**',
+      '**/demo.vue',
+    ],
+  },
+];
+
+/**
+ * Base configuration for any JavaScript/TypeScript project.
+ *
+ * Includes `@eslint/js` recommended rules (the analog of oxlint's
+ * `correctness` category) plus opinionated `eslint` core and `unicorn` rules.
+ *
+ * > Note: oxlint's `oxc/*` rules have no ESLint equivalent and are dropped in
+ * > this migration; their intent is largely covered by `@eslint/js` recommended
+ * > and `unicorn`.
+ */
+export const base: FlatConfigArray = [
+  ...ignores,
+  {
+    name: 'robonen/base/setup',
+    languageOptions: {
+      ecmaVersion: 2024,
+      sourceType: 'module',
+      globals: {
+        ...globals.es2024,
+        ...globals.browser,
+        ...globals.node,
+      },
+    },
+  },
+  js.configs.recommended,
+  {
+    name: 'robonen/base/rules',
+    plugins: {
+      unicorn,
+    },
+    rules: {
+      /* ── eslint core ──────────────────────────────────────── */
+      eqeqeq: 'error',
+      'no-console': 'warn',
+      'no-debugger': 'error',
+      'no-eval': 'error',
+      'no-var': 'error',
+      'prefer-const': 'error',
+      'prefer-template': 'error',
+      'no-useless-constructor': 'error',
+      'no-useless-rename': 'error',
+      'no-unused-vars': ['error', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
+      'no-self-compare': 'error',
+      'no-template-curly-in-string': 'error',
+      'no-throw-literal': 'error',
+      'no-return-assign': 'error',
+      'no-else-return': 'error',
+      'no-lonely-if': 'error',
+      'no-unneeded-ternary': 'error',
+      'prefer-object-spread': 'error',
+      'prefer-exponentiation-operator': 'error',
+      'no-useless-computed-key': 'error',
+      'no-useless-concat': 'error',
+      'no-array-constructor': 'error',
+      'no-new-wrappers': 'error',
+      'no-useless-return': 'error',
+      'object-shorthand': ['error', 'always'],
+      'prefer-spread': 'error',
+      'prefer-rest-params': 'error',
+      'symbol-description': 'error',
+      curly: 'off',
+
+      /* ── unicorn ──────────────────────────────────────────── */
+      'unicorn/prefer-node-protocol': 'error',
+      'unicorn/no-instanceof-builtins': 'error',
+      'unicorn/no-new-array': 'error',
+      'unicorn/prefer-array-flat-map': 'error',
+      'unicorn/prefer-array-flat': 'error',
+      'unicorn/prefer-includes': 'error',
+      'unicorn/prefer-string-slice': 'error',
+      'unicorn/prefer-string-starts-ends-with': 'error',
+      'unicorn/throw-new-error': 'error',
+      'unicorn/error-message': 'error',
+      'unicorn/no-useless-spread': 'error',
+      'unicorn/no-useless-undefined': 'off',
+      'unicorn/prefer-optional-catch-binding': 'error',
+      'unicorn/prefer-type-error': 'error',
+      'unicorn/no-thenable': 'error',
+      'unicorn/prefer-number-properties': 'error',
+      'unicorn/prefer-global-this': 'error',
+      'unicorn/prefer-array-some': 'error',
+      'unicorn/prefer-array-find': 'error',
+      'unicorn/prefer-array-index-of': 'error',
+      'unicorn/prefer-date-now': 'error',
+      'unicorn/prefer-modern-math-apis': 'error',
+      'unicorn/prefer-negative-index': 'error',
+      'unicorn/prefer-set-has': 'error',
+      'unicorn/prefer-string-trim-start-end': 'error',
+      'unicorn/prefer-regexp-test': 'error',
+      'unicorn/prefer-string-replace-all': 'error',
+      'unicorn/no-typeof-undefined': 'error',
+      'unicorn/no-array-push-push': 'error',
+      'unicorn/no-useless-promise-resolve-reject': 'error',
+    },
+  },
+  ...regexp,
+];
diff --git a/configs/eslint/src/presets/imports.ts b/configs/eslint/src/presets/imports.ts
new file mode 100644
index 0000000..fa30055
--- /dev/null
+++ b/configs/eslint/src/presets/imports.ts
@@ -0,0 +1,55 @@
+import type { FlatConfigArray } from '../types';
+import importX, { createNodeResolver } from 'eslint-plugin-import-x';
+
+/**
+ * Import configuration for clean module boundaries.
+ *
+ * Uses `eslint-plugin-import-x` (the faster, modern fork) under the `import-x`
+ * namespace, plus the core `sort-imports` rule. The Node resolver is configured
+ * explicitly (flat config no longer ships a default) with TypeScript/Vue-aware
+ * extensions so resolution-based rules (`no-cycle`, `no-self-import`) work.
+ */
+export const imports: FlatConfigArray = [
+  {
+    name: 'robonen/imports',
+    plugins: {
+      'import-x': importX,
+    },
+    settings: {
+      'import-x/resolver-next': [
+        createNodeResolver({
+          extensions: ['.js', '.jsx', '.mjs', '.cjs', '.ts', '.tsx', '.mts', '.cts', '.vue', '.json', '.node'],
+        }),
+      ],
+    },
+    rules: {
+      'import-x/no-duplicates': 'error',
+      'import-x/no-self-import': 'error',
+      'import-x/no-cycle': 'error',
+      'import-x/first': 'error',
+      'import-x/no-mutable-exports': 'error',
+      'import-x/no-amd': 'error',
+      'import-x/no-commonjs': 'error',
+      'import-x/no-empty-named-blocks': 'error',
+      'import-x/no-useless-path-segments': ['error', { noUselessIndex: false }],
+      'import-x/consistent-type-specifier-style': ['error', 'prefer-top-level'],
+
+      /* Only enforce member order within `{ … }`; declaration order is sorted
+         by source path across the codebase, which core `sort-imports` (orders
+         by first member name) would otherwise fight. Kept at `warn` — it is not
+         autofixable and member order is a soft preference. */
+      'sort-imports': ['warn', { ignoreDeclarationSort: true }],
+    },
+  },
+  {
+    /* Vue SFCs may have two <script> blocks (`<script>` + `<script setup>`),
+       which the parser concatenates — `import-x/first` then wrongly flags the
+       second block's imports as out of place. Kept here (rather than in the
+       `vue` preset) so it wins regardless of preset composition order. */
+    name: 'robonen/imports/vue',
+    files: ['**/*.vue'],
+    rules: {
+      'import-x/first': 'off',
+    },
+  },
+];
diff --git a/configs/oxlint/src/presets/index.ts b/configs/eslint/src/presets/index.ts
similarity index 60%
rename from configs/oxlint/src/presets/index.ts
rename to configs/eslint/src/presets/index.ts
index c17cbeb..dd29f3e 100644
--- a/configs/oxlint/src/presets/index.ts
+++ b/configs/eslint/src/presets/index.ts
@@ -1,6 +1,8 @@
-export { base } from './base';
+export { base, ignores } from './base';
 export { typescript } from './typescript';
 export { vue } from './vue';
 export { vitest } from './vitest';
 export { imports } from './imports';
 export { node } from './node';
+export { regexp } from './regexp';
+export { stylistic } from './stylistic';
diff --git a/configs/eslint/src/presets/node.ts b/configs/eslint/src/presets/node.ts
new file mode 100644
index 0000000..6046397
--- /dev/null
+++ b/configs/eslint/src/presets/node.ts
@@ -0,0 +1,27 @@
+import type { FlatConfigArray } from '../types';
+import nodePlugin from 'eslint-plugin-n';
+import globals from 'globals';
+
+/**
+ * Node.js-specific configuration.
+ *
+ * Registers `eslint-plugin-n` (the maintained successor of `eslint-plugin-node`)
+ * under the `n` namespace and adds Node globals.
+ */
+export const node: FlatConfigArray = [
+  {
+    name: 'robonen/node',
+    plugins: {
+      n: nodePlugin,
+    },
+    languageOptions: {
+      globals: {
+        ...globals.node,
+      },
+    },
+    rules: {
+      'n/no-exports-assign': 'error',
+      'n/no-new-require': 'error',
+    },
+  },
+];
diff --git a/configs/eslint/src/presets/regexp.ts b/configs/eslint/src/presets/regexp.ts
new file mode 100644
index 0000000..5e21887
--- /dev/null
+++ b/configs/eslint/src/presets/regexp.ts
@@ -0,0 +1,18 @@
+import type { FlatConfigArray } from '../types';
+import regexpPlugin from 'eslint-plugin-regexp';
+
+/**
+ * Regular-expression correctness & optimization rules via
+ * [`eslint-plugin-regexp`](https://ota-meshi.github.io/eslint-plugin-regexp/).
+ *
+ * Applies the plugin's flat `recommended` ruleset — catches buggy/ambiguous
+ * patterns (control characters, useless quantifiers, ReDoS-prone constructs)
+ * and pushes toward clearer, faster expressions. Included in {@link base} so it
+ * applies to every package.
+ */
+export const regexp: FlatConfigArray = [
+  {
+    ...regexpPlugin.configs['flat/recommended'],
+    name: 'robonen/regexp',
+  },
+];
diff --git a/configs/eslint/src/presets/stylistic.ts b/configs/eslint/src/presets/stylistic.ts
new file mode 100644
index 0000000..15f9576
--- /dev/null
+++ b/configs/eslint/src/presets/stylistic.ts
@@ -0,0 +1,165 @@
+import type { FlatConfigArray } from '../types';
+import stylisticPlugin from '@stylistic/eslint-plugin';
+
+/**
+ * Stylistic formatting rules via `@stylistic/eslint-plugin`.
+ *
+ * Roughly equivalent to the plugin's `customize()` defaults:
+ * - indent: 2
+ * - quotes: single
+ * - semi: true
+ * - braceStyle: stroustrup
+ * - commaDangle: always-multiline
+ * - arrowParens: as-needed
+ * - blockSpacing: true
+ * - quoteProps: as-needed
+ * - jsx: true
+ *
+ * @see https://eslint.style/guide/config-presets
+ */
+export const stylistic: FlatConfigArray = [
+  {
+    name: 'robonen/stylistic',
+    plugins: {
+      '@stylistic': stylisticPlugin,
+    },
+    rules: {
+      /* ── spacing & layout ─────────────────────────────────── */
+      '@stylistic/array-bracket-spacing': ['error', 'never'],
+      '@stylistic/arrow-spacing': ['error', { after: true, before: true }],
+      '@stylistic/block-spacing': ['error', 'always'],
+      '@stylistic/comma-spacing': ['error', { after: true, before: false }],
+      '@stylistic/computed-property-spacing': ['error', 'never', { enforceForClassMembers: true }],
+      '@stylistic/dot-location': ['error', 'property'],
+      '@stylistic/key-spacing': ['error', { afterColon: true, beforeColon: false }],
+      '@stylistic/keyword-spacing': ['error', { after: true, before: true }],
+      '@stylistic/no-mixed-spaces-and-tabs': 'error',
+      '@stylistic/no-multi-spaces': 'error',
+      '@stylistic/no-trailing-spaces': 'error',
+      '@stylistic/no-whitespace-before-property': 'error',
+      '@stylistic/rest-spread-spacing': ['error', 'never'],
+      '@stylistic/semi-spacing': ['error', { after: true, before: false }],
+      '@stylistic/space-before-blocks': ['error', 'always'],
+      '@stylistic/space-before-function-paren': ['error', { anonymous: 'always', asyncArrow: 'always', named: 'never' }],
+      '@stylistic/space-in-parens': ['error', 'never'],
+      '@stylistic/space-infix-ops': 'error',
+      '@stylistic/space-unary-ops': ['error', { nonwords: false, words: true }],
+      '@stylistic/template-curly-spacing': 'error',
+      '@stylistic/template-tag-spacing': ['error', 'never'],
+
+      /* ── braces & blocks ──────────────────────────────────── */
+      '@stylistic/brace-style': ['error', 'stroustrup', { allowSingleLine: true }],
+      '@stylistic/arrow-parens': ['error', 'as-needed', { requireForBlockBody: true }],
+      '@stylistic/no-extra-parens': ['error', 'functions'],
+      '@stylistic/no-floating-decimal': 'error',
+      '@stylistic/wrap-iife': ['error', 'any', { functionPrototypeMethods: true }],
+      '@stylistic/new-parens': 'error',
+      '@stylistic/padded-blocks': ['error', { blocks: 'never', classes: 'never', switches: 'never' }],
+
+      /* ── punctuation ──────────────────────────────────────── */
+      '@stylistic/comma-dangle': ['error', 'always-multiline'],
+      '@stylistic/comma-style': ['error', 'last'],
+      '@stylistic/semi': ['error', 'always'],
+      '@stylistic/quotes': ['error', 'single', { allowTemplateLiterals: 'always', avoidEscape: false }],
+      '@stylistic/quote-props': ['error', 'as-needed'],
+
+      /* ── indentation ──────────────────────────────────────── */
+      '@stylistic/indent': ['error', 2, {
+        ArrayExpression: 1,
+        CallExpression: { arguments: 1 },
+        flatTernaryExpressions: false,
+        FunctionDeclaration: { body: 1, parameters: 1, returnType: 1 },
+        FunctionExpression: { body: 1, parameters: 1, returnType: 1 },
+        ignoreComments: false,
+        ignoredNodes: [
+          'TSUnionType',
+          'TSIntersectionType',
+        ],
+        ImportDeclaration: 1,
+        MemberExpression: 1,
+        ObjectExpression: 1,
+        offsetTernaryExpressions: true,
+        outerIIFEBody: 1,
+        SwitchCase: 1,
+        tabLength: 2,
+        VariableDeclarator: 1,
+      }],
+      '@stylistic/indent-binary-ops': ['error', 2],
+      '@stylistic/no-tabs': 'error',
+
+      /* ── line breaks ──────────────────────────────────────── */
+      '@stylistic/eol-last': 'error',
+      '@stylistic/no-multiple-empty-lines': ['error', { max: 1, maxBOF: 0, maxEOF: 0 }],
+      '@stylistic/lines-between-class-members': ['error', 'always', { exceptAfterSingleLine: true }],
+      '@stylistic/max-statements-per-line': ['error', { max: 1 }],
+      '@stylistic/multiline-ternary': ['error', 'always-multiline'],
+      '@stylistic/operator-linebreak': ['error', 'before'],
+      '@stylistic/object-curly-spacing': ['error', 'always'],
+
+      /* ── generators ───────────────────────────────────────── */
+      '@stylistic/generator-star-spacing': ['error', { after: true, before: false }],
+      '@stylistic/yield-star-spacing': ['error', { after: true, before: false }],
+
+      /* ── operators & mixed ────────────────────────────────── */
+      '@stylistic/no-mixed-operators': ['error', {
+        allowSamePrecedence: true,
+        groups: [
+          ['==', '!=', '===', '!==', '>', '>=', '<', '<='],
+          ['&&', '||'],
+          ['in', 'instanceof'],
+        ],
+      }],
+
+      /* ── typescript styling ───────────────────────────────── */
+      '@stylistic/member-delimiter-style': ['error', {
+        multiline: { delimiter: 'semi', requireLast: true },
+        multilineDetection: 'brackets',
+        overrides: {
+          interface: {
+            multiline: { delimiter: 'semi', requireLast: true },
+          },
+        },
+        singleline: { delimiter: 'semi' },
+      }],
+      '@stylistic/type-annotation-spacing': ['error', {}],
+      '@stylistic/type-generic-spacing': 'error',
+      '@stylistic/type-named-tuple-spacing': 'error',
+
+      /* ── comments ─────────────────────────────────────────── */
+      '@stylistic/spaced-comment': ['error', 'always', {
+        block: { balanced: true, exceptions: ['*'], markers: ['!'] },
+        line: { exceptions: ['/', '#'], markers: ['/'] },
+      }],
+
+      /* ── jsx ───────────────────────────────────────────────── */
+      '@stylistic/jsx-closing-bracket-location': 'error',
+      '@stylistic/jsx-closing-tag-location': 'error',
+      '@stylistic/jsx-curly-brace-presence': ['error', { propElementValues: 'always' }],
+      '@stylistic/jsx-curly-newline': 'error',
+      '@stylistic/jsx-curly-spacing': ['error', 'never'],
+      '@stylistic/jsx-equals-spacing': 'error',
+      '@stylistic/jsx-first-prop-new-line': 'error',
+      '@stylistic/jsx-function-call-newline': ['error', 'multiline'],
+      '@stylistic/jsx-indent-props': ['error', 2],
+      '@stylistic/jsx-max-props-per-line': ['error', { maximum: 1, when: 'multiline' }],
+      '@stylistic/jsx-one-expression-per-line': ['error', { allow: 'single-child' }],
+      '@stylistic/jsx-quotes': 'error',
+      '@stylistic/jsx-tag-spacing': ['error', {
+        afterOpening: 'never',
+        beforeClosing: 'never',
+        beforeSelfClosing: 'always',
+        closingSlash: 'never',
+      }],
+      '@stylistic/jsx-wrap-multilines': ['error', {
+        arrow: 'parens-new-line',
+        assignment: 'parens-new-line',
+        condition: 'parens-new-line',
+        declaration: 'parens-new-line',
+        logical: 'parens-new-line',
+        prop: 'parens-new-line',
+        propertyValue: 'parens-new-line',
+        return: 'parens-new-line',
+      }],
+    },
+  },
+];
diff --git a/configs/eslint/src/presets/typescript.ts b/configs/eslint/src/presets/typescript.ts
new file mode 100644
index 0000000..1852856
--- /dev/null
+++ b/configs/eslint/src/presets/typescript.ts
@@ -0,0 +1,64 @@
+import type { FlatConfigArray } from '../types';
+import tseslint from 'typescript-eslint';
+
+/**
+ * TypeScript-specific configuration.
+ *
+ * Adopts `typescript-eslint`'s **strict** (non type-checked) ruleset plus the
+ * **stylistic** ruleset — registering the parser/plugin, disabling core rules
+ * superseded by TS-aware counterparts, and enforcing the full strict + stylistic
+ * sets at `error`. A small overlay re-tunes a few rules for this monorepo.
+ *
+ * Two deliberate carve-outs: `no-explicit-any` is kept at `warn` (the low-level
+ * stdlib/toolkit does a lot of type-boundary work where `any` is idiomatic), and
+ * `no-non-null-assertion` is `off` (the `!` operator is how the codebase satisfies
+ * `noUncheckedIndexedAccess` on provably-bounded indexed access).
+ *
+ * `.vue` files are included so the rules apply inside `<script lang="ts">`
+ * blocks; the `vue` preset assigns the matching parser for them.
+ */
+export const typescript: FlatConfigArray = [
+  ...tseslint.configs.strict,
+  ...tseslint.configs.stylistic,
+  {
+    name: 'robonen/typescript',
+    files: ['**/*.ts', '**/*.tsx', '**/*.mts', '**/*.cts', '**/*.vue'],
+    rules: {
+      /* core no-unused-vars is replaced by the TS-aware version */
+      'no-unused-vars': 'off',
+      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
+
+      /* TypeScript already reports undefined names; `no-undef` only adds
+         false positives (e.g. globals, auto-imports, compiler macros). */
+      'no-undef': 'off',
+
+      /* Deliberate carve-outs from `strict` (see file header). */
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/no-non-null-assertion': 'off',
+      /* noop/default callbacks (`() => {}`) are an intentional, pervasive pattern. */
+      '@typescript-eslint/no-empty-function': 'off',
+      /* The libraries expose deliberate overload signatures (better inference/DX
+         than a single union signature) — don't force-merge them. */
+      '@typescript-eslint/unified-signatures': 'off',
+      /* Plain objects are used as keyed dictionaries (e.g. forms errors/touched
+         maps) where dynamic `delete` is legitimate. */
+      '@typescript-eslint/no-dynamic-delete': 'off',
+      /* Index-based `for` loops are sometimes a deliberate perf choice; this rule
+         is not autofixable and converting can subtly change semantics. */
+      '@typescript-eslint/prefer-for-of': 'off',
+      /* Idiomatic callback return unions (`() => void | false`, `() => void |
+         Promise<T>`) are pervasive in composables; the rule is hostile to them. */
+      '@typescript-eslint/no-invalid-void-type': 'off',
+
+      /* Allow our type-helper interfaces that extend a single mapped type. */
+      '@typescript-eslint/no-empty-object-type': ['error', { allowInterfaces: 'with-single-extends' }],
+
+      /* House preferences (override the strict/stylistic defaults' options). */
+      '@typescript-eslint/consistent-type-imports': 'error',
+      '@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
+      '@typescript-eslint/array-type': ['error', { default: 'array-simple' }],
+      '@typescript-eslint/no-import-type-side-effects': 'error',
+      '@typescript-eslint/no-useless-empty-export': 'error',
+    },
+  },
+];
diff --git a/configs/eslint/src/presets/vitest.ts b/configs/eslint/src/presets/vitest.ts
new file mode 100644
index 0000000..c9e9c5c
--- /dev/null
+++ b/configs/eslint/src/presets/vitest.ts
@@ -0,0 +1,49 @@
+import type { FlatConfigArray } from '../types';
+import vitestPlugin from '@vitest/eslint-plugin';
+
+/**
+ * Vitest configuration for test files.
+ *
+ * Scoped to common test file patterns. Adopts the plugin's full `recommended`
+ * ruleset, layers extra preference rules at `error`, and relaxes a few strict
+ * rules that are noisy in tests.
+ */
+export const vitest: FlatConfigArray = [
+  {
+    name: 'robonen/vitest',
+    files: [
+      '**/*.test.{ts,tsx,js,jsx}',
+      '**/*.spec.{ts,tsx,js,jsx}',
+      '**/test/**/*.{ts,tsx,js,jsx}',
+      '**/__tests__/**/*.{ts,tsx,js,jsx}',
+    ],
+    plugins: {
+      vitest: vitestPlugin,
+    },
+    rules: {
+      ...vitestPlugin.configs.recommended.rules,
+
+      /* House convention: `describe(useX, …)` / `it(fn, …)` pass a FUNCTION as the
+         title (nicer reporter output) — valid-title only accepts strings. */
+      'vitest/valid-title': 'off',
+      /* Niche stylistic preference; the explicit two-assertion form is clearer. */
+      'vitest/prefer-called-exactly-once-with': 'off',
+
+      'vitest/no-import-node-test': 'error',
+      'vitest/no-conditional-tests': 'error',
+      'vitest/prefer-to-be-truthy': 'error',
+      'vitest/prefer-to-be-falsy': 'error',
+      'vitest/prefer-to-be-object': 'error',
+      'vitest/prefer-to-have-length': 'error',
+      'vitest/consistent-test-filename': 'error',
+      'vitest/prefer-describe-function-title': 'error',
+
+      /* relax strict rules in tests */
+      'no-unused-vars': 'off',
+      '@typescript-eslint/no-unused-vars': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+      /* Empty mock/fixture classes (e.g. stubbing `class DeviceOrientationEvent {}`). */
+      '@typescript-eslint/no-extraneous-class': 'off',
+    },
+  },
+];
diff --git a/configs/eslint/src/presets/vue.ts b/configs/eslint/src/presets/vue.ts
new file mode 100644
index 0000000..ec2e12f
--- /dev/null
+++ b/configs/eslint/src/presets/vue.ts
@@ -0,0 +1,64 @@
+import type { FlatConfigArray, Rules } from '../types';
+import pluginVue from 'eslint-plugin-vue';
+import tseslint from 'typescript-eslint';
+import vueParser from 'vue-eslint-parser';
+
+/**
+ * Merge the rule maps from every config object in an eslint-plugin-vue flat
+ * preset (they ship as arrays) into a single rules record.
+ */
+function collectRules(configs: Array<{ rules?: unknown }>): Rules {
+  return configs.reduce<Rules>((rules, config) => ({ ...rules, ...(config.rules as Rules | undefined) }), {});
+}
+
+/**
+ * The Priority-A "Essential" (error-prevention) ruleset from eslint-plugin-vue.
+ */
+const essentialRules = collectRules(pluginVue.configs['flat/essential'] as Array<{ rules?: unknown }>);
+
+/**
+ * Vue.js configuration.
+ *
+ * Registers `eslint-plugin-vue` with `vue-eslint-parser` (delegating
+ * `<script lang="ts">` to the TypeScript parser), adopts the plugin's full
+ * **Essential** (Priority-A) ruleset, and layers opinionated rules that enforce
+ * the Composition API with `<script setup>` and type-based declarations.
+ */
+export const vue: FlatConfigArray = [
+  {
+    name: 'robonen/vue/setup',
+    files: ['**/*.vue'],
+    plugins: {
+      vue: pluginVue,
+    },
+    processor: pluginVue.processors['.vue'],
+    languageOptions: {
+      parser: vueParser,
+      parserOptions: {
+        parser: tseslint.parser,
+        ecmaFeatures: { jsx: true },
+        extraFileExtensions: ['.vue'],
+        sourceType: 'module',
+      },
+    },
+  },
+  {
+    name: 'robonen/vue/rules',
+    files: ['**/*.vue'],
+    rules: {
+      ...essentialRules,
+
+      /* Component library: single-word component names (Primitive, Slot, …) are intentional. */
+      'vue/multi-word-component-names': 'off',
+
+      /* House additions / stricter opinions on top of Essential. */
+      'vue/no-multiple-slot-args': 'error',
+      'vue/no-import-compiler-macros': 'error',
+      'vue/define-emits-declaration': ['error', 'type-based'],
+      'vue/define-props-declaration': ['error', 'type-based'],
+      'vue/prefer-import-from-vue': 'error',
+      'vue/no-required-prop-with-default': 'error',
+      'vue/require-typed-ref': 'error',
+    },
+  },
+];
diff --git a/configs/eslint/src/types.ts b/configs/eslint/src/types.ts
new file mode 100644
index 0000000..cf31145
--- /dev/null
+++ b/configs/eslint/src/types.ts
@@ -0,0 +1,27 @@
+import type { Linter } from 'eslint';
+
+/**
+ * A single ESLint flat configuration object.
+ *
+ * @see https://eslint.org/docs/latest/use/configure/configuration-files
+ */
+export type FlatConfig = Linter.Config;
+
+/**
+ * An array of ESLint flat configuration objects — the shape ESLint
+ * expects from an `eslint.config.ts` default export.
+ */
+export type FlatConfigArray = FlatConfig[];
+
+/**
+ * A flat config rules record (`Partial<Linter.RulesRecord>`).
+ */
+export type Rules = NonNullable<FlatConfig['rules']>;
+
+/**
+ * Accepts either a single flat config object or an array of them.
+ *
+ * Used by {@link compose} so presets (arrays) and inline overrides
+ * (single objects) can be passed interchangeably.
+ */
+export type FlatConfigInput = FlatConfig | FlatConfigArray;
diff --git a/configs/eslint/test/compose.test.ts b/configs/eslint/test/compose.test.ts
new file mode 100644
index 0000000..aeb17a6
--- /dev/null
+++ b/configs/eslint/test/compose.test.ts
@@ -0,0 +1,67 @@
+import { describe, expect, it } from 'vitest';
+import { compose } from '../src/compose';
+import type { FlatConfig } from '../src/types';
+
+describe('compose', () => {
+  it('should return empty array when no configs provided', () => {
+    expect(compose()).toEqual([]);
+  });
+
+  it('should wrap a single flat config object into an array', () => {
+    const config: FlatConfig = {
+      name: 'a',
+      rules: { 'no-console': 'warn' },
+    };
+
+    expect(compose(config)).toEqual([config]);
+  });
+
+  it('should flatten preset arrays into a single array', () => {
+    const preset: FlatConfig[] = [
+      { name: 'a', rules: { 'no-console': 'warn' } },
+      { name: 'b', rules: { 'no-debugger': 'error' } },
+    ];
+
+    expect(compose(preset)).toEqual(preset);
+  });
+
+  it('should preserve order across presets and inline objects', () => {
+    const presetA: FlatConfig[] = [{ name: 'a' }];
+    const presetB: FlatConfig[] = [{ name: 'b' }, { name: 'c' }];
+    const inline: FlatConfig = { name: 'd' };
+
+    const result = compose(presetA, presetB, inline);
+
+    expect(result.map(c => c.name)).toEqual(['a', 'b', 'c', 'd']);
+  });
+
+  it('should not mutate the input arrays', () => {
+    const preset: FlatConfig[] = [{ name: 'a' }];
+    compose(preset, { name: 'b' });
+
+    expect(preset).toEqual([{ name: 'a' }]);
+  });
+
+  it('should skip falsy entries for conditional composition', () => {
+    const result = compose(
+      { name: 'a' },
+      false,
+      null,
+      undefined,
+      { name: 'b' },
+    );
+
+    expect(result.map(c => c.name)).toEqual(['a', 'b']);
+  });
+
+  it('should compose all presets together preserving order', () => {
+    const base: FlatConfig[] = [{ name: 'base/setup' }, { name: 'base/rules' }];
+    const ts: FlatConfig[] = [{ name: 'ts' }];
+    const custom: FlatConfig = { name: 'custom', rules: { 'no-console': 'off' } };
+
+    const result = compose(base, ts, custom);
+
+    expect(result.map(c => c.name)).toEqual(['base/setup', 'base/rules', 'ts', 'custom']);
+    expect(result.at(-1)?.rules).toEqual({ 'no-console': 'off' });
+  });
+});
diff --git a/configs/eslint/tsconfig.json b/configs/eslint/tsconfig.json
new file mode 100644
index 0000000..2781e66
--- /dev/null
+++ b/configs/eslint/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.src.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/configs/eslint/tsconfig.node.json b/configs/eslint/tsconfig.node.json
new file mode 100644
index 0000000..2579e7c
--- /dev/null
+++ b/configs/eslint/tsconfig.node.json
@@ -0,0 +1,8 @@
+{
+  "extends": "@robonen/tsconfig/tsconfig.node.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo"
+  },
+  "include": ["tsdown.config.ts", "vitest.config.ts"]
+}
diff --git a/configs/eslint/tsconfig.src.json b/configs/eslint/tsconfig.src.json
new file mode 100644
index 0000000..9e87845
--- /dev/null
+++ b/configs/eslint/tsconfig.src.json
@@ -0,0 +1,9 @@
+{
+  "extends": "@robonen/tsconfig/tsconfig.base.json",
+  "compilerOptions": {
+    "composite": true,
+    "types": [],
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.src.tsbuildinfo"
+  },
+  "include": ["src/**/*.ts", "test/**/*.ts", "eslint.config.ts"]
+}
diff --git a/configs/oxlint/tsdown.config.ts b/configs/eslint/tsdown.config.ts
similarity index 82%
rename from configs/oxlint/tsdown.config.ts
rename to configs/eslint/tsdown.config.ts
index ae9657f..6e391e5 100644
--- a/configs/oxlint/tsdown.config.ts
+++ b/configs/eslint/tsdown.config.ts
@@ -3,5 +3,6 @@ import { sharedConfig } from '@robonen/tsdown';
 
 export default defineConfig({
   ...sharedConfig,
+  tsconfig: './tsconfig.src.json',
   entry: ['src/index.ts'],
 });
diff --git a/configs/oxlint/vitest.config.ts b/configs/eslint/vitest.config.ts
similarity index 100%
rename from configs/oxlint/vitest.config.ts
rename to configs/eslint/vitest.config.ts
diff --git a/configs/oxlint/README.md b/configs/oxlint/README.md
deleted file mode 100644
index 96817c7..0000000
--- a/configs/oxlint/README.md
+++ /dev/null
@@ -1,54 +0,0 @@
-# @robonen/oxlint
-
-Composable [oxlint](https://oxc.rs/docs/guide/usage/linter.html) configuration presets.
-
-## Install
-
-```bash
-pnpm install -D @robonen/oxlint oxlint
-```
-
-## Usage
-
-Create `oxlint.config.ts` in your project root:
-
-```ts
-import { defineConfig } from 'oxlint';
-import { compose, base, typescript, vue, vitest, imports } from '@robonen/oxlint';
-
-export default defineConfig(
-  compose(base, typescript, vue, vitest, imports),
-);
-```
-
-Append custom rules after presets to override them:
-
-```ts
-compose(base, typescript, {
-  rules: { 'eslint/no-console': 'off' },
-  ignorePatterns: ['dist'],
-});
-```
-
-## Presets
-
-| Preset       | Description                                        |
-| ------------ | -------------------------------------------------- |
-| `base`       | Core eslint, oxc, unicorn rules                    |
-| `typescript` | TypeScript-specific rules (via overrides)           |
-| `vue`        | Vue 3 Composition API / `<script setup>` rules     |
-| `vitest`     | Test file rules (via overrides)                    |
-| `imports`    | Import rules (cycles, duplicates, ordering)        |
-| `node`       | Node.js-specific rules                             |
-
-## API
-
-### `compose(...configs: OxlintConfig[]): OxlintConfig`
-
-Merges multiple configs into one:
-
-- **plugins** — union (deduplicated)
-- **rules / categories** — last wins
-- **overrides / ignorePatterns** — concatenated
-- **env / globals** — shallow merge
-- **settings** — deep merge
diff --git a/configs/oxlint/oxlint.config.ts b/configs/oxlint/oxlint.config.ts
deleted file mode 100644
index 247c39b..0000000
--- a/configs/oxlint/oxlint.config.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { defineConfig } from 'oxlint';
-import { compose, base, typescript, imports } from '@robonen/oxlint';
-
-export default defineConfig(compose(base, typescript, imports));
diff --git a/configs/oxlint/package.json b/configs/oxlint/package.json
deleted file mode 100644
index bd87274..0000000
--- a/configs/oxlint/package.json
+++ /dev/null
@@ -1,53 +0,0 @@
-{
-  "name": "@robonen/oxlint",
-  "version": "0.0.2",
-  "license": "Apache-2.0",
-  "description": "Composable oxlint configuration presets",
-  "keywords": [
-    "oxlint",
-    "oxc",
-    "linter",
-    "config",
-    "presets"
-  ],
-  "author": "Robonen Andrew <robonenandrew@gmail.com>",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/robonen/tools.git",
-    "directory": "configs/oxlint"
-  },
-  "packageManager": "pnpm@10.29.3",
-  "engines": {
-    "node": ">=24.13.1"
-  },
-  "type": "module",
-  "files": [
-    "dist"
-  ],
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    }
-  },
-  "scripts": {
-    "lint": "oxlint -c oxlint.config.ts",
-    "test": "vitest run",
-    "dev": "vitest dev",
-    "build": "tsdown"
-  },
-  "devDependencies": {
-    "@robonen/oxlint": "workspace:*",
-    "@robonen/tsconfig": "workspace:*",
-    "@robonen/tsdown": "workspace:*",
-    "oxlint": "catalog:",
-    "tsdown": "catalog:"
-  },
-  "peerDependencies": {
-    "oxlint": ">=1.0.0"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}
diff --git a/configs/oxlint/src/compose.ts b/configs/oxlint/src/compose.ts
deleted file mode 100644
index 96993fc..0000000
--- a/configs/oxlint/src/compose.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import type { OxlintConfig } from './types';
-
-/**
- * Deep merge two objects. Arrays are concatenated, objects are recursively merged.
- */
-function deepMerge(target: Record<string, unknown>, source: Record<string, unknown>): Record<string, unknown> {
-  const result = { ...target };
-
-  for (const key of Object.keys(source)) {
-    const targetValue = target[key];
-    const sourceValue = source[key];
-
-    if (
-      typeof targetValue === 'object' && targetValue !== null && !Array.isArray(targetValue)
-      && typeof sourceValue === 'object' && sourceValue !== null && !Array.isArray(sourceValue)
-    ) {
-      result[key] = deepMerge(
-        targetValue as Record<string, unknown>,
-        sourceValue as Record<string, unknown>,
-      );
-    }
-    else {
-      result[key] = sourceValue;
-    }
-  }
-
-  return result;
-}
-
-/**
- * Compose multiple oxlint configurations into a single config.
- *
- * - `plugins` — union (deduplicated)
- * - `categories` — later configs override earlier
- * - `rules` — later configs override earlier
- * - `overrides` — concatenated
- * - `env` — merged (later overrides earlier)
- * - `globals` — merged (later overrides earlier)
- * - `settings` — deep-merged
- * - `ignorePatterns` — concatenated
- *
- * @example
- * ```ts
- * import { compose, base, typescript, vue } from '@robonen/oxlint';
- * import { defineConfig } from 'oxlint';
- *
- * export default defineConfig(
- *   compose(base, typescript, vue, {
- *     rules: { 'eslint/no-console': 'off' },
- *   }),
- * );
- * ```
- */
-export function compose(...configs: OxlintConfig[]): OxlintConfig {
-  const result: OxlintConfig = {};
-
-  for (const config of configs) {
-    // Plugins — union with dedup
-    if (config.plugins?.length) {
-      result.plugins = Array.from(new Set([...(result.plugins ?? []), ...config.plugins]));
-    }
-
-    // Categories — shallow merge
-    if (config.categories) {
-      result.categories = { ...result.categories, ...config.categories };
-    }
-
-    // Rules — shallow merge (later overrides earlier)
-    if (config.rules) {
-      result.rules = { ...result.rules, ...config.rules };
-    }
-
-    // Overrides — concatenate
-    if (config.overrides?.length) {
-      result.overrides = [...(result.overrides ?? []), ...config.overrides];
-    }
-
-    // Env — shallow merge
-    if (config.env) {
-      result.env = { ...result.env, ...config.env };
-    }
-
-    // Globals — shallow merge
-    if (config.globals) {
-      result.globals = { ...result.globals, ...config.globals };
-    }
-
-    // Settings — deep merge
-    if (config.settings) {
-      result.settings = deepMerge(
-        (result.settings ?? {}) as Record<string, unknown>,
-        config.settings as Record<string, unknown>,
-      );
-    }
-
-    // Ignore patterns — concatenate
-    if (config.ignorePatterns?.length) {
-      result.ignorePatterns = [...(result.ignorePatterns ?? []), ...config.ignorePatterns];
-    }
-  }
-
-  return result;
-}
diff --git a/configs/oxlint/src/index.ts b/configs/oxlint/src/index.ts
deleted file mode 100644
index b026d25..0000000
--- a/configs/oxlint/src/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/* Compose */
-export { compose } from './compose';
-
-/* Presets */
-export { base, typescript, vue, vitest, imports, node } from './presets';
-
-/* Types */
-export type {
-  OxlintConfig,
-  OxlintOverride,
-  OxlintEnv,
-  OxlintGlobals,
-  AllowWarnDeny,
-  DummyRule,
-  DummyRuleMap,
-  RuleCategories,
-} from './types';
diff --git a/configs/oxlint/src/presets/base.ts b/configs/oxlint/src/presets/base.ts
deleted file mode 100644
index 22695b9..0000000
--- a/configs/oxlint/src/presets/base.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import type { OxlintConfig } from '../types';
-
-/**
- * Base configuration for any JavaScript/TypeScript project.
- *
- * Enables `correctness` category and opinionated rules from
- * `eslint`, `oxc`, and `unicorn` plugins.
- */
-export const base: OxlintConfig = {
-  plugins: ['eslint', 'oxc', 'unicorn'],
-
-  categories: {
-    correctness: 'error',
-  },
-
-  rules: {
-    /* ── eslint core ──────────────────────────────────────── */
-    'eslint/eqeqeq': 'error',
-    'eslint/no-console': 'warn',
-    'eslint/no-debugger': 'error',
-    'eslint/no-eval': 'error',
-    'eslint/no-var': 'error',
-    'eslint/prefer-const': 'error',
-    'eslint/prefer-template': 'warn',
-    'eslint/no-useless-constructor': 'warn',
-    'eslint/no-useless-rename': 'warn',
-    'eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
-    'eslint/no-self-compare': 'error',
-    'eslint/no-template-curly-in-string': 'warn',
-    'eslint/no-throw-literal': 'error',
-    'eslint/no-return-assign': 'warn',
-    'eslint/no-else-return': 'warn',
-    'eslint/no-lonely-if': 'warn',
-    'eslint/no-unneeded-ternary': 'warn',
-    'eslint/prefer-object-spread': 'warn',
-    'eslint/prefer-exponentiation-operator': 'warn',
-    'eslint/no-useless-computed-key': 'warn',
-    'eslint/no-useless-concat': 'warn',
-    'eslint/curly': 'off',
-
-    /* ── unicorn ──────────────────────────────────────────── */
-    'unicorn/prefer-node-protocol': 'error',
-    'unicorn/no-instanceof-array': 'error',
-    'unicorn/no-new-array': 'error',
-    'unicorn/prefer-array-flat-map': 'warn',
-    'unicorn/prefer-array-flat': 'warn',
-    'unicorn/prefer-includes': 'warn',
-    'unicorn/prefer-string-slice': 'warn',
-    'unicorn/prefer-string-starts-ends-with': 'warn',
-    'unicorn/throw-new-error': 'error',
-    'unicorn/error-message': 'warn',
-    'unicorn/no-useless-spread': 'warn',
-    'unicorn/no-useless-undefined': 'off',
-    'unicorn/prefer-optional-catch-binding': 'warn',
-    'unicorn/prefer-type-error': 'warn',
-    'unicorn/no-thenable': 'error',
-    'unicorn/prefer-number-properties': 'warn',
-    'unicorn/prefer-global-this': 'warn',
-
-    /* ── oxc ──────────────────────────────────────────────── */
-    'oxc/no-accumulating-spread': 'warn',
-    'oxc/bad-comparison-sequence': 'error',
-    'oxc/bad-min-max-func': 'error',
-    'oxc/bad-object-literal-comparison': 'error',
-    'oxc/const-comparisons': 'error',
-    'oxc/double-comparisons': 'error',
-    'oxc/erasing-op': 'error',
-    'oxc/missing-throw': 'error',
-    'oxc/bad-bitwise-operator': 'error',
-    'oxc/bad-char-at-comparison': 'error',
-    'oxc/bad-replace-all-arg': 'error',
-  },
-};
diff --git a/configs/oxlint/src/presets/imports.ts b/configs/oxlint/src/presets/imports.ts
deleted file mode 100644
index f3a6276..0000000
--- a/configs/oxlint/src/presets/imports.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { OxlintConfig } from '../types';
-
-/**
- * Import plugin rules for clean module boundaries.
- */
-export const imports: OxlintConfig = {
-  plugins: ['import'],
-
-  rules: {
-    'import/no-duplicates': 'error',
-    'import/no-self-import': 'error',
-    'import/no-cycle': 'warn',
-    'import/first': 'warn',
-    'import/no-mutable-exports': 'error',
-    'import/no-amd': 'error',
-    'import/no-commonjs': 'warn',
-    'import/no-empty-named-blocks': 'warn',
-    'import/consistent-type-specifier-style': ['warn', 'prefer-top-level'],
-  },
-};
diff --git a/configs/oxlint/src/presets/node.ts b/configs/oxlint/src/presets/node.ts
deleted file mode 100644
index 59ffb3c..0000000
--- a/configs/oxlint/src/presets/node.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { OxlintConfig } from '../types';
-
-/**
- * Node.js-specific rules.
- */
-export const node: OxlintConfig = {
-  plugins: ['node'],
-
-  env: {
-    node: true,
-  },
-
-  rules: {
-    'node/no-exports-assign': 'error',
-    'node/no-new-require': 'error',
-  },
-};
diff --git a/configs/oxlint/src/presets/typescript.ts b/configs/oxlint/src/presets/typescript.ts
deleted file mode 100644
index dfe8107..0000000
--- a/configs/oxlint/src/presets/typescript.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import type { OxlintConfig } from '../types';
-
-/**
- * TypeScript-specific rules.
- *
- * Applied via `overrides` for `*.ts`, `*.tsx`, `*.mts`, `*.cts` files.
- */
-export const typescript: OxlintConfig = {
-  plugins: ['typescript'],
-
-  overrides: [
-    {
-      files: ['**/*.ts', '**/*.tsx', '**/*.mts', '**/*.cts'],
-      rules: {
-        'typescript/consistent-type-imports': 'error',
-        'typescript/no-explicit-any': 'off',
-        'typescript/no-non-null-assertion': 'off',
-        'typescript/prefer-as-const': 'error',
-        'typescript/no-empty-object-type': 'warn',
-        'typescript/no-wrapper-object-types': 'error',
-        'typescript/no-duplicate-enum-values': 'error',
-        'typescript/no-unsafe-declaration-merging': 'error',
-        'typescript/no-import-type-side-effects': 'error',
-        'typescript/no-useless-empty-export': 'warn',
-        'typescript/no-inferrable-types': 'warn',
-        'typescript/prefer-function-type': 'warn',
-        'typescript/ban-tslint-comment': 'error',
-        'typescript/consistent-type-definitions': ['warn', 'interface'],
-        'typescript/prefer-for-of': 'warn',
-        'typescript/no-unnecessary-type-constraint': 'warn',
-        'typescript/adjacent-overload-signatures': 'warn',
-        'typescript/array-type': ['warn', { default: 'array-simple' }],
-        'typescript/no-this-alias': 'error',
-        'typescript/triple-slash-reference': 'error',
-        'typescript/no-namespace': 'error',
-      },
-    },
-  ],
-};
diff --git a/configs/oxlint/src/presets/vitest.ts b/configs/oxlint/src/presets/vitest.ts
deleted file mode 100644
index df9a9fe..0000000
--- a/configs/oxlint/src/presets/vitest.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import type { OxlintConfig } from '../types';
-
-/**
- * Vitest rules for test files.
- *
- * Applied via `overrides` for common test file patterns.
- */
-export const vitest: OxlintConfig = {
-  plugins: ['vitest'],
-
-  overrides: [
-    {
-      files: [
-        '**/*.test.{ts,tsx,js,jsx}',
-        '**/*.spec.{ts,tsx,js,jsx}',
-        '**/test/**/*.{ts,tsx,js,jsx}',
-        '**/__tests__/**/*.{ts,tsx,js,jsx}',
-      ],
-      rules: {
-        'vitest/no-conditional-tests': 'warn',
-        'vitest/no-import-node-test': 'error',
-        'vitest/prefer-to-be-truthy': 'warn',
-        'vitest/prefer-to-be-falsy': 'warn',
-        'vitest/prefer-to-be-object': 'warn',
-        'vitest/prefer-to-have-length': 'warn',
-        'vitest/consistent-test-filename': 'warn',
-        'vitest/prefer-describe-function-title': 'warn',
-
-        /* relax strict rules in tests */
-        'eslint/no-unused-vars': 'off',
-        'typescript/no-explicit-any': 'off',
-      },
-    },
-  ],
-};
diff --git a/configs/oxlint/src/presets/vue.ts b/configs/oxlint/src/presets/vue.ts
deleted file mode 100644
index fb8cd73..0000000
--- a/configs/oxlint/src/presets/vue.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { OxlintConfig } from '../types';
-
-/**
- * Vue.js-specific rules.
- *
- * Enforces Composition API with `<script setup>` and type-based declarations.
- */
-export const vue: OxlintConfig = {
-  plugins: ['vue'],
-
-  rules: {
-    'vue/no-arrow-functions-in-watch': 'error',
-    'vue/no-deprecated-destroyed-lifecycle': 'error',
-    'vue/no-export-in-script-setup': 'error',
-    'vue/no-lifecycle-after-await': 'error',
-    'vue/no-multiple-slot-args': 'error',
-    'vue/no-import-compiler-macros': 'error',
-    'vue/define-emits-declaration': ['error', 'type-based'],
-    'vue/define-props-declaration': ['error', 'type-based'],
-    'vue/prefer-import-from-vue': 'error',
-    'vue/no-required-prop-with-default': 'warn',
-    'vue/valid-define-emits': 'error',
-    'vue/valid-define-props': 'error',
-    'vue/require-typed-ref': 'warn',
-  },
-};
diff --git a/configs/oxlint/src/types.ts b/configs/oxlint/src/types.ts
deleted file mode 100644
index 150b065..0000000
--- a/configs/oxlint/src/types.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Re-exported configuration types from `oxlint`.
- *
- * Keeps the preset API in sync with the oxlint CLI without
- * maintaining a separate copy of the types.
- *
- * @see https://oxc.rs/docs/guide/usage/linter/config-file-reference.html
- */
-export type {
-  OxlintConfig,
-  OxlintOverride,
-  OxlintEnv,
-  OxlintGlobals,
-  AllowWarnDeny,
-  DummyRule,
-  DummyRuleMap,
-  RuleCategories,
-} from 'oxlint';
diff --git a/configs/oxlint/test/compose.test.ts b/configs/oxlint/test/compose.test.ts
deleted file mode 100644
index 1ff07e1..0000000
--- a/configs/oxlint/test/compose.test.ts
+++ /dev/null
@@ -1,146 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { compose } from '../src/compose';
-import type { OxlintConfig } from '../src/types';
-
-describe('compose', () => {
-  it('should return empty config when no configs provided', () => {
-    expect(compose()).toEqual({});
-  });
-
-  it('should return the same config when one config provided', () => {
-    const config: OxlintConfig = {
-      plugins: ['eslint'],
-      rules: { 'eslint/no-console': 'warn' },
-    };
-    const result = compose(config);
-    expect(result.plugins).toEqual(['eslint']);
-    expect(result.rules).toEqual({ 'eslint/no-console': 'warn' });
-  });
-
-  it('should merge plugins with dedup', () => {
-    const a: OxlintConfig = { plugins: ['eslint', 'oxc'] };
-    const b: OxlintConfig = { plugins: ['oxc', 'typescript'] };
-
-    const result = compose(a, b);
-    expect(result.plugins).toEqual(['eslint', 'oxc', 'typescript']);
-  });
-
-  it('should override rules from later configs', () => {
-    const a: OxlintConfig = { rules: { 'eslint/no-console': 'error', 'eslint/eqeqeq': 'warn' } };
-    const b: OxlintConfig = { rules: { 'eslint/no-console': 'off' } };
-
-    const result = compose(a, b);
-    expect(result.rules).toEqual({
-      'eslint/no-console': 'off',
-      'eslint/eqeqeq': 'warn',
-    });
-  });
-
-  it('should override categories from later configs', () => {
-    const a: OxlintConfig = { categories: { correctness: 'error', suspicious: 'warn' } };
-    const b: OxlintConfig = { categories: { suspicious: 'off' } };
-
-    const result = compose(a, b);
-    expect(result.categories).toEqual({
-      correctness: 'error',
-      suspicious: 'off',
-    });
-  });
-
-  it('should concatenate overrides', () => {
-    const a: OxlintConfig = {
-      overrides: [{ files: ['**/*.ts'], rules: { 'typescript/no-explicit-any': 'warn' } }],
-    };
-    const b: OxlintConfig = {
-      overrides: [{ files: ['**/*.test.ts'], rules: { 'eslint/no-unused-vars': 'off' } }],
-    };
-
-    const result = compose(a, b);
-    expect(result.overrides).toHaveLength(2);
-    expect(result.overrides?.[0]?.files).toEqual(['**/*.ts']);
-    expect(result.overrides?.[1]?.files).toEqual(['**/*.test.ts']);
-  });
-
-  it('should merge env', () => {
-    const a: OxlintConfig = { env: { browser: true } };
-    const b: OxlintConfig = { env: { node: true } };
-
-    const result = compose(a, b);
-    expect(result.env).toEqual({ browser: true, node: true });
-  });
-
-  it('should merge globals', () => {
-    const a: OxlintConfig = { globals: { MY_VAR: 'readonly' } };
-    const b: OxlintConfig = { globals: { ANOTHER: 'writable' } };
-
-    const result = compose(a, b);
-    expect(result.globals).toEqual({ MY_VAR: 'readonly', ANOTHER: 'writable' });
-  });
-
-  it('should deep merge settings', () => {
-    const a: OxlintConfig = {
-      settings: {
-        react: { version: '18.2.0' },
-        next: { rootDir: 'apps/' },
-      },
-    };
-    const b: OxlintConfig = {
-      settings: {
-        react: { linkComponents: [{ name: 'Link', linkAttribute: 'to', attributes: ['to'] }] },
-      },
-    };
-
-    const result = compose(a, b);
-    expect(result.settings).toEqual({
-      react: {
-        version: '18.2.0',
-        linkComponents: [{ name: 'Link', linkAttribute: 'to', attributes: ['to'] }],
-      },
-      next: { rootDir: 'apps/' },
-    });
-  });
-
-  it('should concatenate ignorePatterns', () => {
-    const a: OxlintConfig = { ignorePatterns: ['dist'] };
-    const b: OxlintConfig = { ignorePatterns: ['node_modules', 'coverage'] };
-
-    const result = compose(a, b);
-    expect(result.ignorePatterns).toEqual(['dist', 'node_modules', 'coverage']);
-  });
-
-  it('should handle composing all presets together', () => {
-    const base: OxlintConfig = {
-      plugins: ['eslint', 'oxc'],
-      categories: { correctness: 'error' },
-      rules: { 'eslint/no-console': 'warn' },
-    };
-    const ts: OxlintConfig = {
-      plugins: ['typescript'],
-      overrides: [{ files: ['**/*.ts'], rules: { 'typescript/no-explicit-any': 'warn' } }],
-    };
-    const custom: OxlintConfig = {
-      rules: { 'eslint/no-console': 'off' },
-      ignorePatterns: ['dist'],
-    };
-
-    const result = compose(base, ts, custom);
-
-    expect(result.plugins).toEqual(['eslint', 'oxc', 'typescript']);
-    expect(result.categories).toEqual({ correctness: 'error' });
-    expect(result.rules).toEqual({ 'eslint/no-console': 'off' });
-    expect(result.overrides).toHaveLength(1);
-    expect(result.ignorePatterns).toEqual(['dist']);
-  });
-
-  it('should skip undefined/empty fields', () => {
-    const a: OxlintConfig = { plugins: ['eslint'] };
-    const b: OxlintConfig = { rules: { 'eslint/no-console': 'warn' } };
-
-    const result = compose(a, b);
-    expect(result.plugins).toEqual(['eslint']);
-    expect(result.rules).toEqual({ 'eslint/no-console': 'warn' });
-    expect(result.overrides).toBeUndefined();
-    expect(result.env).toBeUndefined();
-    expect(result.settings).toBeUndefined();
-  });
-});
diff --git a/configs/oxlint/tsconfig.json b/configs/oxlint/tsconfig.json
deleted file mode 100644
index ab255ac..0000000
--- a/configs/oxlint/tsconfig.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "@robonen/tsconfig/tsconfig.json"
-}
diff --git a/configs/tsconfig/README.md b/configs/tsconfig/README.md
index 10f9f81..ed57ea3 100644
--- a/configs/tsconfig/README.md
+++ b/configs/tsconfig/README.md
@@ -1,6 +1,6 @@
 # @robonen/tsconfig
 
-Shared base TypeScript configuration.
+Shared TypeScript configurations.
 
 ## Install
 
@@ -8,20 +8,95 @@ Shared base TypeScript configuration.
 pnpm install -D @robonen/tsconfig
 ```
 
+## Presets
+
+| Preset | Extends | Use for |
+| --- | --- | --- |
+| `tsconfig.base.json` | — | Node / isomorphic libraries (`lib: ESNext`, no DOM) |
+| `tsconfig.dom.json` | base | Browser libraries (adds `DOM`, `DOM.Iterable`) |
+| `tsconfig.vue.json` | dom | Vue SFC libraries / apps (adds `jsx`, `vueCompilerOptions`) |
+| `tsconfig.node.json` | base | Build/test tooling files (`*.config.ts`) — adds `types: ["node"]`, no DOM |
+| `tsconfig.json` | base | Default alias for `base` (bare `@robonen/tsconfig` import) |
+
 ## Usage
 
-Extend from it in your `tsconfig.json`:
+Pick the preset that matches the package and extend it:
 
-```json
+```jsonc
+// Node / isomorphic library
+{ "extends": "@robonen/tsconfig/tsconfig.base.json" }
+```
+
+```jsonc
+// Browser library
+{ "extends": "@robonen/tsconfig/tsconfig.dom.json" }
+```
+
+```jsonc
+// Vue package, with path aliases
 {
-  "extends": "@robonen/tsconfig/tsconfig.json"
+  "extends": "@robonen/tsconfig/tsconfig.vue.json",
+  "compilerOptions": {
+    "paths": { "@/*": ["./src/*"] }
+  }
 }
 ```
 
-## What's Included
+> Path aliases resolve relative to the `tsconfig.json` location — `baseUrl` is
+> intentionally omitted (deprecated, removed in TypeScript 7.0).
 
-- **Target / Module**: ESNext with Bundler resolution
-- **Strict mode**: `strict`, `noUncheckedIndexedAccess`
-- **Module safety**: `verbatimModuleSyntax`, `isolatedModules`
-- **Declarations**: `declaration` enabled
-- **Interop**: `esModuleInterop`, `allowJs`, `resolveJsonModule`
+## Project references (DOM + Node split)
+
+Most packages contain two environments: browser/library `src` (DOM) and Node
+tooling files (`vite.config.ts`, `vitest.config.ts`, `tsdown.config.ts`). They
+are split into separate projects wired with references, so `src` never sees Node
+globals and config files never see `DOM`:
+
+```jsonc
+// tsconfig.json — solution root, tools (tsdown/vitest/editor) target src below
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.src.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
+```
+
+```jsonc
+// tsconfig.src.json — the library code
+{
+  "extends": "@robonen/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "composite": true,
+    "types": [],
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.src.tsbuildinfo"
+  },
+  "include": ["src/**/*.ts"]
+}
+```
+
+```jsonc
+// tsconfig.node.json — build/test tooling files
+{
+  "extends": "@robonen/tsconfig/tsconfig.node.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo"
+  },
+  "include": ["*.config.ts"]
+}
+```
+
+Type-check the whole package (both projects) with `tsc -b` / `vue-tsc -b`.
+Point `tsdown` at the src project (`tsconfig: './tsconfig.src.json'`) since the
+root has no `compilerOptions`.
+
+## What's included (base)
+
+- **Target / Module**: `ESNext` with `module: Preserve` + `Bundler` resolution
+- **Strict mode**: `strict`, `noUncheckedIndexedAccess`, `noImplicitOverride`,
+  `noImplicitReturns`, `noFallthroughCasesInSwitch`, `noUncheckedSideEffectImports`
+- **Module safety**: `verbatimModuleSyntax`, `isolatedModules`, `moduleDetection: force`
+- **Type-check only**: `noEmit` (declarations/output are produced by `tsdown`)
+- **Interop**: `esModuleInterop`, `resolveJsonModule`
diff --git a/configs/tsconfig/docs/intro.vue b/configs/tsconfig/docs/intro.vue
new file mode 100644
index 0000000..51f4ed9
--- /dev/null
+++ b/configs/tsconfig/docs/intro.vue
@@ -0,0 +1,154 @@
+<script setup lang="ts">
+const nodeExample = `// Node / isomorphic library
+{ "extends": "@robonen/tsconfig/tsconfig.base.json" }`;
+
+const vueExample = `// Vue package, with path aliases
+{
+  "extends": "@robonen/tsconfig/tsconfig.vue.json",
+  "compilerOptions": {
+    "paths": { "@/*": ["./src/*"] }
+  }
+}`;
+
+const splitExample = `// tsconfig.json — solution root
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.src.json" },  // extends tsconfig.dom.json
+    { "path": "./tsconfig.node.json" }  // *.config.ts, types: ["node"]
+  ]
+}`;
+</script>
+
+<template>
+  <div class="docs-section">
+    <div class="prose-docs">
+      <h1>@robonen/tsconfig</h1>
+      <p class="text-lg text-(--fg-muted)">
+        Shared, strict TypeScript configurations — a small set of layered
+        presets you extend instead of copying compiler options between packages.
+      </p>
+    </div>
+
+    <div class="prose-docs">
+      <p>
+        Every package in a monorepo wants the same modern, strict TypeScript
+        baseline, but keeping a dozen <code>tsconfig.json</code> files in sync by
+        hand drifts almost immediately. <code>@robonen/tsconfig</code> ships one
+        carefully tuned <code>base</code> config and three environment layers
+        — <code>dom</code>, <code>vue</code>, and <code>node</code> — that extend
+        it. Point your package's <code>extends</code> at the right preset and you
+        inherit a consistent, bundler-first, type-check-only setup with no local
+        compiler options to maintain.
+      </p>
+    </div>
+
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="font-medium text-(--fg) mb-1.5">Layered presets</h3>
+        <p class="text-sm text-(--fg-muted) m-0">
+          <code>base</code> &rarr; <code>dom</code> &rarr; <code>vue</code>, plus
+          a sibling <code>node</code> layer. Extend the one that matches the
+          environment; everything else is inherited.
+        </p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="font-medium text-(--fg) mb-1.5">Strict by default</h3>
+        <p class="text-sm text-(--fg-muted) m-0">
+          <code>strict</code> plus <code>noUncheckedIndexedAccess</code>,
+          <code>noImplicitOverride</code>, <code>noImplicitReturns</code> and
+          <code>noFallthroughCasesInSwitch</code> are on out of the box.
+        </p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="font-medium text-(--fg) mb-1.5">Bundler-first</h3>
+        <p class="text-sm text-(--fg-muted) m-0">
+          <code>module: Preserve</code> with <code>Bundler</code> resolution,
+          <code>verbatimModuleSyntax</code> and <code>isolatedModules</code>.
+          Emit is <code>noEmit</code> — declarations come from
+          <code>tsdown</code>.
+        </p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="font-medium text-(--fg) mb-1.5">Env isolation</h3>
+        <p class="text-sm text-(--fg-muted) m-0">
+          Browser <code>src</code> (DOM, no Node globals) and tooling files
+          (<code>node</code> types, no DOM) split into separate projects wired
+          with project references.
+        </p>
+      </div>
+    </div>
+
+    <div class="prose-docs">
+      <h2>Install</h2>
+      <p>
+        Add the package as a dev dependency. It ships only JSON presets — no
+        runtime code.
+      </p>
+    </div>
+    <DocsCode :code="`pnpm add -D @robonen/tsconfig`" lang="bash" />
+
+    <div class="prose-docs">
+      <h2>Usage</h2>
+      <p>
+        Pick the preset that matches the package and extend it from your
+        <code>tsconfig.json</code>:
+      </p>
+    </div>
+    <DocsCode :code="nodeExample" lang="json" />
+
+    <div class="prose-docs">
+      <p>
+        Vue SFC packages extend the <code>vue</code> layer (adds
+        <code>jsx: preserve</code> and strict
+        <code>vueCompilerOptions</code>) and can declare path aliases inline:
+      </p>
+    </div>
+    <DocsCode :code="vueExample" lang="json" />
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-4">
+      <p class="text-sm text-(--fg-muted) m-0">
+        <strong class="text-(--fg)">Note:</strong> path aliases resolve relative
+        to the <code class="text-(--fg)">tsconfig.json</code> location —
+        <code class="text-(--fg)">baseUrl</code> is intentionally omitted
+        (deprecated, removed in TypeScript 7.0).
+      </p>
+    </div>
+
+    <div class="prose-docs">
+      <h2>DOM + Node split</h2>
+      <p>
+        Most packages mix browser <code>src</code> with Node tooling files
+        (<code>vite.config.ts</code>, <code>vitest.config.ts</code>,
+        <code>tsdown.config.ts</code>). Split them into two projects wired with
+        references so <code>src</code> never sees Node globals and config files
+        never see <code>DOM</code>, then type-check the whole package with
+        <code>tsc -b</code> / <code>vue-tsc -b</code>:
+      </p>
+    </div>
+    <DocsCode :code="splitExample" lang="json" />
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-elevated) p-5">
+      <h3 class="font-medium text-(--fg) mb-2">Where to next</h3>
+      <ul class="text-sm text-(--fg-muted) space-y-1.5 list-disc pl-5 m-0">
+        <li>
+          <strong class="text-(--fg)">Presets</strong> — the full table of
+          <code>base</code>, <code>dom</code>, <code>vue</code> and
+          <code>node</code>, with what each layer adds.
+        </li>
+        <li>
+          <strong class="text-(--fg)">Project references</strong> — the complete
+          DOM + Node split with <code>composite</code> and
+          <code>tsBuildInfoFile</code> wiring.
+        </li>
+        <li>
+          <strong class="text-(--fg)">What's included</strong> — the exact
+          compiler options the <code>base</code> preset turns on.
+        </li>
+        <li>
+          See the guide sections in the sidebar for each of the above.
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
diff --git a/configs/tsconfig/package.json b/configs/tsconfig/package.json
index 8287506..5178487 100644
--- a/configs/tsconfig/package.json
+++ b/configs/tsconfig/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@robonen/tsconfig",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "license": "Apache-2.0",
   "description": "Base typescript configuration for projects",
   "keywords": [
@@ -15,12 +15,16 @@
     "url": "git+https://github.com/robonen/tools.git",
     "directory": "packages/tsconfig"
   },
-  "packageManager": "pnpm@10.29.3",
+  "packageManager": "pnpm@10.33.2",
   "engines": {
     "node": ">=24.13.1"
   },
   "files": [
-    "**tsconfig.json"
+    "tsconfig.json",
+    "tsconfig.base.json",
+    "tsconfig.dom.json",
+    "tsconfig.node.json",
+    "tsconfig.vue.json"
   ],
   "publishConfig": {
     "access": "public"
diff --git a/configs/tsconfig/tsconfig.base.json b/configs/tsconfig/tsconfig.base.json
new file mode 100644
index 0000000..09a83e2
--- /dev/null
+++ b/configs/tsconfig/tsconfig.base.json
@@ -0,0 +1,35 @@
+{
+    "$schema": "https://json.schemastore.org/tsconfig",
+    "display": "@robonen base (type-check, no DOM)",
+    "compilerOptions": {
+        /* Modules */
+        "module": "Preserve",
+        "moduleResolution": "Bundler",
+        "moduleDetection": "force",
+        "resolveJsonModule": true,
+        "allowImportingTsExtensions": true,
+        "verbatimModuleSyntax": true,
+        "isolatedModules": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+
+        /* Language and environment */
+        "target": "ESNext",
+        "lib": ["ESNext"],
+        "useDefineForClassFields": true,
+
+        /* Type checking (strict) */
+        "strict": true,
+        "noUncheckedIndexedAccess": true,
+        "noImplicitOverride": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "noUncheckedSideEffectImports": true,
+        "forceConsistentCasingInFileNames": true,
+
+        /* Emit is delegated to the bundler (tsdown); tsc is type-check only */
+        "noEmit": true,
+        "skipLibCheck": true
+    },
+    "exclude": ["node_modules", "dist", ".output", "coverage"]
+}
diff --git a/configs/tsconfig/tsconfig.dom.json b/configs/tsconfig/tsconfig.dom.json
new file mode 100644
index 0000000..8478baf
--- /dev/null
+++ b/configs/tsconfig/tsconfig.dom.json
@@ -0,0 +1,8 @@
+{
+    "$schema": "https://json.schemastore.org/tsconfig",
+    "display": "@robonen dom (browser libraries)",
+    "extends": "./tsconfig.base.json",
+    "compilerOptions": {
+        "lib": ["ESNext", "DOM", "DOM.Iterable"]
+    }
+}
diff --git a/configs/tsconfig/tsconfig.json b/configs/tsconfig/tsconfig.json
index a5ed60d..bd66768 100644
--- a/configs/tsconfig/tsconfig.json
+++ b/configs/tsconfig/tsconfig.json
@@ -1,36 +1,5 @@
 {
     "$schema": "https://json.schemastore.org/tsconfig",
-    "display": "Base TypeScript Configuration",
-    "compilerOptions": {
-        /* Basic Options */
-        "module": "ESNext",
-        "noEmit": true,
-        "lib": ["ESNext"],
-        "moduleResolution": "Bundler",
-        "target": "ESNext",
-        "outDir": "dist",
-        
-        "skipLibCheck": true,
-        "esModuleInterop": true,
-        "allowSyntheticDefaultImports": true,
-        "allowImportingTsExtensions": true,
-        "allowJs": true,
-        "resolveJsonModule": true,
-        "moduleDetection": "force",
-        "isolatedModules": true,
-        "removeComments": false,
-        "verbatimModuleSyntax": true,
-        "useDefineForClassFields": true,
-
-        /* Strict Type-Checking Options */
-        "strict": true,
-        "noUncheckedIndexedAccess": true,
-
-        /* Library transpiling */
-        "declaration": true,
-        // "composite": true,
-        "sourceMap": false,
-        "declarationMap": false
-    },
-    "exclude": ["node_modules", "dist", ".output", "coverage"]
-}
\ No newline at end of file
+    "display": "@robonen base (default)",
+    "extends": "./tsconfig.base.json"
+}
diff --git a/configs/tsconfig/tsconfig.node.json b/configs/tsconfig/tsconfig.node.json
new file mode 100644
index 0000000..33df2c9
--- /dev/null
+++ b/configs/tsconfig/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+    "$schema": "https://json.schemastore.org/tsconfig",
+    "display": "@robonen node (build/test tooling files)",
+    "extends": "./tsconfig.base.json",
+    "compilerOptions": {
+        "lib": ["ESNext"],
+        "types": ["node"]
+    }
+}
diff --git a/configs/tsconfig/tsconfig.vue.json b/configs/tsconfig/tsconfig.vue.json
new file mode 100644
index 0000000..59c79f9
--- /dev/null
+++ b/configs/tsconfig/tsconfig.vue.json
@@ -0,0 +1,15 @@
+{
+    "$schema": "https://json.schemastore.org/tsconfig",
+    "display": "@robonen vue (Vue SFC libraries / apps)",
+    "extends": "./tsconfig.dom.json",
+    "compilerOptions": {
+        "jsx": "preserve"
+    },
+    "vueCompilerOptions": {
+        "strictTemplates": true,
+        "fallthroughAttributes": true,
+        "inferTemplateDollarAttrs": true,
+        "inferTemplateDollarEl": true,
+        "inferTemplateDollarRefs": true
+    }
+}
diff --git a/configs/tsdown/docs/intro.vue b/configs/tsdown/docs/intro.vue
new file mode 100644
index 0000000..c282f9c
--- /dev/null
+++ b/configs/tsdown/docs/intro.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+const usageExample = `import { defineConfig } from 'tsdown';
+import { sharedConfig } from '@robonen/tsdown';
+
+export default defineConfig({
+  ...sharedConfig,
+  tsconfig: './tsconfig.src.json',
+  entry: ['src/index.ts'],
+});`;
+
+const overrideExample = `import { defineConfig } from 'tsdown';
+import { sharedConfig } from '@robonen/tsdown';
+import Vue from 'unplugin-vue/rolldown';
+
+export default defineConfig({
+  ...sharedConfig,
+  entry: ['src/index.ts', 'src/*/index.ts'],
+  plugins: [Vue({ isProduction: true })],
+  // layer on top of the shared defaults
+  dts: { vue: true },
+});`;
+</script>
+
+<template>
+  <div class="docs-section">
+    <div class="prose-docs">
+      <h1>@robonen/tsdown</h1>
+      <p class="text-lg text-(--fg-muted)">
+        Shared tsdown build configuration for every <code>@robonen</code>
+        package — one source of truth for output formats, declarations, and
+        bundle hygiene.
+      </p>
+    </div>
+
+    <div class="prose-docs">
+      <p>
+        Every library in this monorepo ships dual ESM/CJS builds with type
+        declarations, a clean <code>dist</code>, and a consistent license
+        banner. Re-declaring that in each package's
+        <code>tsdown.config.ts</code> is repetitive and drifts over time.
+        <code>@robonen/tsdown</code> exports a single
+        <code>sharedConfig</code> object you spread into
+        <code>defineConfig</code>, then add only what is package-specific —
+        usually just <code>entry</code> and <code>tsconfig</code>.
+      </p>
+    </div>
+
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="font-medium text-(--fg) mb-1.5">Dual ESM + CJS</h3>
+        <p class="text-sm text-(--fg-muted) m-0">
+          Emits both <code>esm</code> and <code>cjs</code> formats so packages
+          work in modern bundlers and legacy <code>require</code> setups alike.
+        </p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="font-medium text-(--fg) mb-1.5">Types included</h3>
+        <p class="text-sm text-(--fg-muted) m-0">
+          <code>dts: true</code> generates <code>.d.ts</code> declarations on
+          every build — no separate type pipeline to maintain.
+        </p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="font-medium text-(--fg) mb-1.5">Clean, stable output</h3>
+        <p class="text-sm text-(--fg-muted) m-0">
+          <code>clean: true</code> wipes <code>dist</code> first and
+          <code>hash: false</code> keeps file names deterministic for
+          predictable publishing.
+        </p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="font-medium text-(--fg) mb-1.5">Spread &amp; override</h3>
+        <p class="text-sm text-(--fg-muted) m-0">
+          It is a plain object typed as <code>InlineConfig</code> — spread it,
+          override any field, and let editor autocomplete guide you.
+        </p>
+      </div>
+    </div>
+
+    <div class="prose-docs">
+      <h2>Install</h2>
+      <p>
+        Add the config package and <code>tsdown</code> itself as dev
+        dependencies:
+      </p>
+    </div>
+    <DocsCode :code="`pnpm add -D @robonen/tsdown tsdown`" lang="bash" />
+
+    <div class="prose-docs">
+      <h2>Usage</h2>
+      <p>
+        Create <code>tsdown.config.ts</code> in your package, spread
+        <code>sharedConfig</code>, and supply your entry points:
+      </p>
+    </div>
+    <DocsCode :code="usageExample" lang="ts" />
+
+    <div class="prose-docs">
+      <p>
+        Because <code>sharedConfig</code> is a normal object, you can override
+        or extend any field after spreading — add plugins, extra entries, or
+        tweak the declaration options:
+      </p>
+    </div>
+    <DocsCode :code="overrideExample" lang="ts" />
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-elevated) p-5">
+      <h3 class="font-medium text-(--fg) mb-2">Where to next</h3>
+      <ul class="text-sm text-(--fg-muted) space-y-1.5 list-disc pl-5 m-0">
+        <li>
+          <NuxtLink to="/tsdown/overview" class="text-(--accent-text) hover:underline">sharedConfig</NuxtLink>
+          — the full list of defaults and their exact values.
+        </li>
+        <li>
+          Read the guide sections below for the conventions baked into the
+          shared build and tips for package-specific overrides.
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
diff --git a/configs/tsdown/package.json b/configs/tsdown/package.json
index 44a7213..e954910 100644
--- a/configs/tsdown/package.json
+++ b/configs/tsdown/package.json
@@ -15,7 +15,7 @@
     "url": "git+https://github.com/robonen/tools.git",
     "directory": "configs/tsdown"
   },
-  "packageManager": "pnpm@10.29.3",
+  "packageManager": "pnpm@10.33.2",
   "engines": {
     "node": ">=24.13.1"
   },
diff --git a/configs/tsdown/src/index.ts b/configs/tsdown/src/index.ts
index 4f69eb2..db3d8f6 100644
--- a/configs/tsdown/src/index.ts
+++ b/configs/tsdown/src/index.ts
@@ -1,4 +1,4 @@
-import type { Options } from 'tsdown';
+import type { InlineConfig } from 'tsdown';
 
 const BANNER = '/*! @robonen/tools | (c) 2026 Robonen Andrew | Apache-2.0 */';
 
@@ -10,4 +10,4 @@ export const sharedConfig = {
   outputOptions: {
     banner: BANNER,
   },
-} satisfies Options;
+} satisfies InlineConfig;
diff --git a/core/crdt/README.md b/core/crdt/README.md
new file mode 100644
index 0000000..a9a61a2
--- /dev/null
+++ b/core/crdt/README.md
@@ -0,0 +1,60 @@
+# @robonen/crdt
+
+Framework-agnostic CRDT primitives — the convergence engine behind `@robonen/editor`, usable on their own. Zero runtime dependencies; pure TypeScript; runs in Node and the browser.
+
+Every primitive is built so that **applying the same set of operations in any order, with duplicates, yields the same state** (commutative, idempotent, convergent), verified by property tests.
+
+## Primitives
+
+| Module | Exports | Purpose |
+| --- | --- | --- |
+| `clock` | `OpId`, `LamportClock`, `VersionVector`, `compareOpId`, `createSiteId` | Causality: per-site Lamport ids with a deterministic total order; version vectors for dedup + deltas. |
+| `registers` | `LwwRegister`, `LwwMap` | Last-writer-wins values / maps (conflict resolved by op id). |
+| `ordering` | `keyBetween`, `keysBetween` | Fractional indexing — place an item strictly between two neighbors (or move it) with one string key. |
+| `sequence` | `Rga` | Replicated Growable Array — a sequence CRDT with tombstones, higher-op-id-first tie-break, causal-buffering API. |
+| `marks` | `MarkStore`, `MarkSpan`, `MarkValue` | Lightweight Peritext: formatting spans anchored to character op ids, resolved per character by highest op id. |
+| `oplog` | `OpLog` | Append-only op log with a version vector; computes deltas. |
+| `sync` | `encodeStateVector`, `encodeDelta`/`encodeOps`, `decode*` | Transport-agnostic wire encoding (JSON-over-bytes in v1). |
+| `doc` | `Replica` | Ties a clock + op log + causal buffer together; integrates local/remote ops and exposes deltas. |
+
+## Example: a converging replicated string
+
+```ts
+import { Replica, Rga, opId } from '@robonen/crdt';
+
+function makeReplica(site: string) {
+  const rga = new Rga<string>();
+  const replica = new Replica<{ id: ReturnType<typeof opId>; originLeft: ReturnType<typeof opId> | null; value: string }>(
+    { integrate: op => rga.integrateInsert(op.id, op.value, op.originLeft) },
+    site,
+  );
+  return { rga, replica };
+}
+
+const a = makeReplica('a');
+const b = makeReplica('b');
+
+// ... A and B make concurrent local edits via replica.commitLocal(...) ...
+
+// Exchange only what each side is missing:
+b.replica.receive(a.replica.delta(b.replica.version));
+a.replica.receive(b.replica.delta(a.replica.version));
+
+a.rga.toArray().join('') === b.rga.toArray().join(''); // true — converged
+```
+
+`Replica.receive` buffers ops whose causal dependencies haven't arrived yet (an insert before its origin, a delete before its target) and retries them automatically.
+
+## Notes
+
+- `compareOpId` is the single deterministic tie-break (higher clock wins; site id breaks ties) every primitive agrees on — that's what makes LWW and RGA converge.
+- `VersionVector` assumes **dense** per-site clocks (1, 2, 3, …).
+- The v1 wire format is JSON encoded to bytes — simple and debuggable; a compact varint format is a later optimization with no API change.
+- An editor-specific composition of these primitives (blocks + text + marks ↔ editor steps) lives in `@robonen/editor` under `crdt/native/`, not here — this package stays domain-agnostic.
+
+## Development
+
+```bash
+pnpm --filter @robonen/crdt test    # property/convergence tests
+pnpm --filter @robonen/crdt build   # tsdown (ESM + CJS + dts)
+```
diff --git a/core/crdt/docs/01-concepts.vue b/core/crdt/docs/01-concepts.vue
new file mode 100644
index 0000000..80c83cd
--- /dev/null
+++ b/core/crdt/docs/01-concepts.vue
@@ -0,0 +1,304 @@
+<!-- title: Concepts -->
+<!-- order: 1 -->
+<script setup lang="ts">
+const opIdSrc = `import { opId, opIdEq, opIdToString, createSiteId } from '@robonen/crdt';
+
+// An OpId is just { site, clock } — a per-site Lamport counter
+// tagged with the site that produced it.
+const id = opId('alice', 3); // { site: 'alice', clock: 3 }
+
+opIdToString(id);           // 'alice@3'
+opIdEq(id, opId('alice', 3)); // true
+
+// A site id is a per-replica handle. Generate one when a session starts.
+const site = createSiteId(); // e.g. 'k3f9a2d1xz'`;
+
+const lamportSrc = `import { LamportClock } from '@robonen/crdt';
+
+const clock = new LamportClock('alice');
+
+clock.tick(); // { site: 'alice', clock: 1 }
+clock.tick(); // { site: 'alice', clock: 2 }
+
+// We hear about a remote op from 'bob' at clock 5.
+clock.observe({ site: 'bob', clock: 5 });
+
+// Our next local id jumps past it, so it's causally *after* what we've seen.
+clock.tick(); // { site: 'alice', clock: 6 }`;
+
+const compareSrc = `import { compareOpId, opId } from '@robonen/crdt';
+
+// Higher clock wins.
+compareOpId(opId('alice', 1), opId('alice', 2)); // < 0  (2 is greater)
+
+// Equal clocks → site id breaks the tie, deterministically.
+compareOpId(opId('alice', 2), opId('bob', 2));   // < 0  ('alice' < 'bob')
+compareOpId(opId('bob', 2),   opId('alice', 2)); // > 0
+
+// Identical ids compare equal.
+compareOpId(opId('alice', 2), opId('alice', 2)); // 0`;
+
+const vvSrc = `import { VersionVector, opId } from '@robonen/crdt';
+
+const vv = new VersionVector();
+vv.observe(opId('alice', 3));
+vv.observe(opId('bob', 1));
+
+// "Have I already seen this op?" — the basis for dedup.
+vv.has(opId('alice', 2)); // true  (we've seen alice up to 3)
+vv.has(opId('alice', 3)); // true
+vv.has(opId('alice', 4)); // false (not yet)
+vv.has(opId('carol', 1)); // false (never heard from carol)
+
+// Highest dense clock per site (0 if a site is unknown).
+vv.get('alice'); // 3
+vv.get('carol'); // 0`;
+
+const vvWireSrc = `import { VersionVector, opId } from '@robonen/crdt';
+
+const local = new VersionVector();
+local.observe(opId('alice', 5));
+local.observe(opId('bob', 2));
+
+// Snapshot for transport: a plain { site: clock } object.
+const snapshot = local.toJSON(); // { alice: 5, bob: 2 }
+
+// The other side reconstructs it and compares against its own log
+// to compute exactly which ops you're missing.
+const remoteKnows = VersionVector.fromJSON(snapshot);
+remoteKnows.has(opId('alice', 4)); // true  → skip it
+remoteKnows.has(opId('alice', 6)); // false → send it`;
+
+const propsSrc = `// Commutative — order of application doesn't matter:
+//   apply(apply(s, x), y) === apply(apply(s, y), x)
+//
+// Idempotent — re-applying a seen op is a no-op:
+//   apply(s, x) === apply(apply(s, x), x)
+//
+// Convergent — same op SET ⇒ same state, regardless of how it got there.
+//
+// These three together mean a network that reorders, duplicates, and
+// delays messages can never push two replicas to different states.`;
+</script>
+
+<template>
+  <div class="docs-section">
+    <div class="prose-docs">
+      <h1>Concepts</h1>
+      <p>
+        Every primitive in <code>@robonen/crdt</code> rests on one small idea: if all replicas agree on a
+        <strong>deterministic total order</strong> over operations, then applying the same set of operations
+        — in any order, with duplicates, after any delay — always produces the same state. This page builds
+        that mental model from the ground up: sites and replicas, Lamport clocks and op ids, the single
+        tie-break that resolves every conflict, version vectors for deduplication and deltas, and the three
+        algebraic properties that make convergence inevitable rather than hopeful.
+      </p>
+    </div>
+
+    <div class="prose-docs">
+      <h2>Replicas and sites</h2>
+      <p>
+        A <strong>replica</strong> is one copy of the shared state — a browser tab, a mobile app, a server
+        process. Each replica is owned by exactly one <strong>site</strong>, identified by a
+        <code>SiteId</code> (just a string). The site id is the thing that makes one replica distinguishable
+        from every other, so it must be unique across all participants. Use <code>createSiteId</code> to mint
+        one when a session begins; it trades on randomness for uniqueness, not secrecy, so there's no crypto
+        dependency.
+      </p>
+      <p>
+        Replicas never share mutable memory. They evolve independently and communicate only by exchanging
+        <strong>operations</strong> — small, self-describing facts like "insert this character" or "set this
+        key". The whole job of a CRDT is to make sure that once two replicas have seen the same operations,
+        they hold the same state, no matter what the network did to the messages in between.
+      </p>
+    </div>
+
+    <div class="prose-docs">
+      <h2>Op ids: naming every operation</h2>
+      <p>
+        For replicas to talk about the same operation — to deduplicate it, to refer to it as a causal
+        dependency, to break ties against it — every operation needs a stable, globally unique name. That
+        name is an <code>OpId</code>: a per-site counter (its Lamport <code>clock</code>) tagged with the
+        <code>site</code> that produced it.
+      </p>
+    </div>
+    <DocsCode :code="opIdSrc" lang="ts" />
+    <div class="prose-docs">
+      <p>
+        Because the counter is local to a site and the id carries that site, two replicas can generate ids
+        completely independently and never collide. There's no coordination, no central allocator, no UUID
+        round-trips — uniqueness falls out of the structure. <code>opIdToString</code> gives the canonical
+        <code>site@clock</code> form, handy as a map key or for logging.
+      </p>
+    </div>
+
+    <div class="prose-docs">
+      <h2>Lamport clocks: encoding causality</h2>
+      <p>
+        A bare per-site counter is unique, but it isn't enough to compare two operations from different
+        sites in a meaningful way. <code>LamportClock</code> fixes that. It hands out monotonically
+        increasing ids via <code>tick()</code>, and — crucially — it <code>observe()</code>s the clocks of
+        remote operations it learns about, jumping its own counter ahead so that anything it produces next is
+        numbered <em>after</em> what it has already seen.
+      </p>
+    </div>
+    <DocsCode :code="lamportSrc" lang="ts" />
+    <div class="prose-docs">
+      <p>
+        This is the Lamport <em>happens-before</em> rule in miniature: if operation
+        <strong>A</strong> causally precedes <strong>B</strong> (B was generated by a replica that had
+        already seen A), then A's clock is strictly less than B's. The converse isn't guaranteed — two ops
+        with unrelated clocks may simply be <strong>concurrent</strong>, produced by replicas that hadn't yet
+        heard from each other. That's fine, and expected: concurrency is exactly the situation a CRDT exists
+        to resolve.
+      </p>
+    </div>
+
+    <div class="prose-docs">
+      <h2>compareOpId: the one tie-break</h2>
+      <p>
+        Lamport clocks give a <em>partial</em> order — they leave concurrent operations incomparable. But to
+        converge, every replica must agree on a single <strong>total</strong> order so that any two
+        operations can be ranked the same way everywhere. <code>compareOpId</code> is that total order, and it
+        is the only conflict-resolution rule in the entire library:
+      </p>
+      <ul>
+        <li><strong>Higher clock wins.</strong> A later operation supersedes an earlier one.</li>
+        <li>
+          <strong>Site id breaks ties.</strong> When two ops share a clock (they were concurrent), the
+          string comparison of their site ids picks a winner — arbitrary, but identical on every replica.
+        </li>
+      </ul>
+    </div>
+    <DocsCode :code="compareSrc" lang="ts" />
+    <div class="prose-docs">
+      <p>
+        That second rule is the quiet hero of the whole design. The choice of winner doesn't matter; what
+        matters is that <em>every replica makes the same choice</em>. Because site ids are unique and string
+        comparison is deterministic, two replicas resolving the same concurrent edit will always pick the
+        same survivor. That single shared decision is what lets a last-writer-wins register and a sequence
+        CRDT, built by different code, nonetheless agree on the final document.
+      </p>
+      <div class="my-4 rounded-lg border border-(--border) bg-(--bg-subtle) p-4">
+        <p class="m-0 text-sm leading-relaxed text-(--fg-muted)">
+          <strong class="text-(--fg)">Why one rule for everything?</strong>
+          <code class="text-(--accent-text)">LwwRegister</code> uses
+          <code class="text-(--accent-text)">compareOpId</code> to pick the surviving value;
+          <code class="text-(--accent-text)">Rga</code> uses it to break ties between concurrent inserts at
+          the same position; <code class="text-(--accent-text)">MarkStore</code> uses it to decide which
+          formatting wins per character. One total order, applied consistently, is what turns a pile of
+          independent primitives into a coherent, converging system.
+        </p>
+      </div>
+    </div>
+
+    <div class="prose-docs">
+      <h2>Version vectors: who has seen what</h2>
+      <p>
+        Op ids order operations; a <code>VersionVector</code> summarizes <em>which</em> operations a replica
+        has seen. It maps each known site to the highest clock observed from it. Its power comes from one
+        assumption: per-site clocks are <strong>dense</strong> — a site emits <code>1, 2, 3, …</code> with no
+        gaps. Given that, "highest clock seen from site X" implies "every op from X up to that clock has been
+        seen", so a single integer per site captures the entire causal history.
+      </p>
+    </div>
+    <DocsCode :code="vvSrc" lang="ts" />
+    <div class="prose-docs">
+      <h3>Deduplication</h3>
+      <p>
+        Networks redeliver. Because operations are idempotent (more on that below), re-applying one is
+        harmless — but <code>vv.has(id)</code> lets you skip the work entirely. If the vector already covers
+        an op's site and clock, you've seen it; drop it before it ever touches your state. This is the first
+        line of defense that keeps duplicate messages from doing anything observable.
+      </p>
+      <h3>Deltas</h3>
+      <p>
+        The same vector drives efficient sync. When a peer tells you its version vector, you compare it
+        against your own op log and send back <em>only</em> the operations it's missing — never the whole
+        document. A site with clock <code>4</code> in their vector but <code>9</code> in yours means ops
+        <code>5</code> through <code>9</code> are the delta. Version vectors are tiny and serialize to a plain
+        <code>{ site: clock }</code> object, so they're cheap to ship as the "here's what I have" handshake.
+      </p>
+    </div>
+    <DocsCode :code="vvWireSrc" lang="ts" />
+    <div class="prose-docs">
+      <div class="my-4 rounded-lg border border-amber-500/30 bg-amber-500/10 p-4">
+        <p class="m-0 text-sm leading-relaxed text-(--fg-muted)">
+          <strong class="text-amber-700 dark:text-amber-400">Density matters.</strong>
+          <code class="text-(--accent-text)">VersionVector</code> only works because clocks arrive without
+          gaps. If you generate ids with a raw <code class="text-(--accent-text)">LamportClock</code>, deliver
+          them in order per site (the <code class="text-(--accent-text)">Replica</code>'s causal buffer does
+          this for you) so a single high-water mark per site can stand in for the full set of seen ops.
+        </p>
+      </div>
+    </div>
+
+    <div class="prose-docs">
+      <h2>The three properties</h2>
+      <p>
+        Everything above exists to guarantee three algebraic properties of operations. They're the formal
+        promise behind "it just converges", and they're verified by property tests across the package.
+      </p>
+    </div>
+    <DocsCode :code="propsSrc" lang="ts" />
+    <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="mb-1.5 text-sm font-semibold text-(--fg)">Commutative</h3>
+        <p class="text-sm leading-relaxed text-(--fg-muted)">
+          Order of application doesn't change the result. A replica can integrate operations as they arrive,
+          in whatever sequence the network delivers them.
+        </p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="mb-1.5 text-sm font-semibold text-(--fg)">Idempotent</h3>
+        <p class="text-sm leading-relaxed text-(--fg-muted)">
+          Applying the same operation twice is the same as applying it once. Redelivery and retries are safe;
+          version vectors make them free.
+        </p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="mb-1.5 text-sm font-semibold text-(--fg)">Convergent</h3>
+        <p class="text-sm leading-relaxed text-(--fg-muted)">
+          Same set of operations, same final state — full stop. Two replicas that have seen the same ops are
+          byte-for-byte identical.
+        </p>
+      </div>
+    </div>
+    <div class="prose-docs">
+      <p>
+        Commutativity and idempotency are <em>local</em> properties of how a single replica integrates an
+        operation. Convergence is the <em>global</em> consequence: if integration is both order-independent
+        and duplicate-safe, then the state of a replica is a pure function of the <em>set</em> of operations
+        it has seen, with no dependence on path or timing. That's why a CRDT tolerates the worst a network
+        can do — reordering, duplication, partition, arbitrary delay — and still lands every participant on
+        the same document.
+      </p>
+    </div>
+
+    <div class="prose-docs">
+      <h2>Putting it together</h2>
+      <p>
+        With the model in hand, the rest of the library reads as direct applications of it. The same
+        <code>OpId</code> that names an operation is the value <code>compareOpId</code> ranks; the same
+        Lamport clock that produced it advances when you observe a peer; the same dense clocks that make ids
+        unique make version vectors a one-integer-per-site summary. From here:
+      </p>
+      <ul>
+        <li>
+          <NuxtLink to="/crdt/primitives">Primitives</NuxtLink> — see the order in action across
+          <NuxtLink to="/crdt/rga">Rga</NuxtLink>, <NuxtLink to="/crdt/lww-register">LwwRegister</NuxtLink>,
+          and fractional indexing with <NuxtLink to="/crdt/key-between">keyBetween</NuxtLink>.
+        </li>
+        <li>
+          <NuxtLink to="/crdt/replication">Replication &amp; Sync</NuxtLink> — how
+          <NuxtLink to="/crdt/replica">Replica</NuxtLink> wires a clock, op log, and causal buffer into
+          version-vector deltas.
+        </li>
+        <li>
+          <NuxtLink to="/crdt/playground">Playground</NuxtLink> — watch two replicas diverge and reconcile,
+          live in the browser.
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
diff --git a/core/crdt/docs/02-primitives.vue b/core/crdt/docs/02-primitives.vue
new file mode 100644
index 0000000..77e29a4
--- /dev/null
+++ b/core/crdt/docs/02-primitives.vue
@@ -0,0 +1,435 @@
+<!-- title: Primitives -->
+<!-- order: 2 -->
+<script setup lang="ts">
+const lwwRegister = `import { LwwRegister, opId } from '@robonen/crdt';
+
+// Two replicas hold the same register, start from the same value.
+const a = new LwwRegister('draft');
+const b = new LwwRegister('draft');
+
+// They write concurrently — A at clock 4, B at clock 5.
+a.set('A wins?', opId('a', 4));
+b.set('B wins!', opId('b', 5));
+
+// Exchange the writes (order and duplicates don't matter):
+a.set('B wins!', opId('b', 5)); // 5 > 4 → accepted, returns true
+b.set('A wins?', opId('a', 4)); // 4 < 5 → rejected, returns false
+
+a.get(); // 'B wins!'
+a.get() === b.get(); // true — converged on the higher op id`;
+
+const lwwMap = `import { LwwMap, opId } from '@robonen/crdt';
+
+const a = new LwwMap<string, string>();
+const b = new LwwMap<string, string>();
+
+// Concurrent edits to the same key, plus a concurrent delete.
+a.set('color', 'red', opId('a', 7));
+b.set('color', 'blue', opId('b', 7)); // same clock — site id breaks the tie
+
+a.delete('color', opId('a', 7));        // tie too: delete vs set at the same id
+
+// After both replicas see all three ops…
+b.set('color', 'red', opId('a', 7));    // already covered by b's clock-7 write
+a.set('color', 'blue', opId('b', 7));   // 'b' > 'a' at clock 7 → blue wins
+
+a.get('color'); // 'blue'
+a.has('color'); // true
+a.toEntries();  // [['color', 'blue']]`;
+
+const fractionalBetween = `import { keyBetween } from '@robonen/crdt';
+
+// Open bounds (null) ask for "before everything" / "after everything".
+const first = keyBetween(null, null);  // e.g. 'V'
+const second = keyBetween(first, null); // a key after 'first'
+const zeroth = keyBetween(null, first); // a key before 'first'
+
+// Insert strictly between two existing neighbors — no renumbering, ever.
+const mid = keyBetween(zeroth, first);
+zeroth < mid && mid < first; // true
+
+// Sorting items by key reproduces their order:
+const items = [
+  { text: 'b', key: first },
+  { text: 'a', key: zeroth },
+  { text: 'ab', key: mid },
+];
+items.sort((x, y) => (x.key < y.key ? -1 : x.key > y.key ? 1 : 0));
+items.map(i => i.text); // ['a', 'ab', 'b']`;
+
+const fractionalBatch = `import { keysBetween } from '@robonen/crdt';
+
+// Pre-allocate N keys at once — ascending, all strictly between the bounds.
+const keys = keysBetween(null, null, 5);
+// each keys[i] < keys[i + 1]
+
+// Moving an item is a single-field write: give it a new key between its
+// new neighbors and re-sort. Nothing else in the list changes.
+function move(list, fromKeyLeft, fromKeyRight) {
+  return keyBetween(fromKeyLeft, fromKeyRight);
+}`;
+
+const rgaBasic = `import { Rga, opId } from '@robonen/crdt';
+
+const rga = new Rga<string>();
+
+// integrateInsert(id, value, originLeft) — originLeft = null means "at the start".
+rga.integrateInsert(opId('a', 1), 'H', null);
+rga.integrateInsert(opId('a', 2), 'i', opId('a', 1)); // after 'H'
+
+rga.toArray().join(''); // 'Hi'
+
+// Delete = tombstone. The node stays as an anchor; it just stops being visible.
+rga.integrateDelete(opId('a', 2));
+rga.toArray().join(''); // 'H'
+rga.length;             // 1  (visible count, tombstones excluded)`;
+
+const rgaConverge = `import { Rga, opId } from '@robonen/crdt';
+
+// Two replicas both start from "AC" and concurrently insert after 'A'.
+function seed() {
+  const rga = new Rga<string>();
+  rga.integrateInsert(opId('seed', 1), 'A', null);
+  rga.integrateInsert(opId('seed', 2), 'C', opId('seed', 1));
+  return rga;
+}
+
+const left = seed();
+const right = seed();
+
+// left inserts 'x' after 'A'; right inserts 'y' after 'A' — same origin.
+const xOp = { id: opId('left', 5), value: 'x', origin: opId('seed', 1) };
+const yOp = { id: opId('right', 5), value: 'y', origin: opId('seed', 1) };
+
+// Apply locally, then exchange. Order and duplicates don't matter.
+left.integrateInsert(xOp.id, xOp.value, xOp.origin);
+left.integrateInsert(yOp.id, yOp.value, yOp.origin);
+
+right.integrateInsert(yOp.id, yOp.value, yOp.origin);
+right.integrateInsert(xOp.id, xOp.value, xOp.origin);
+
+// Tie-break: higher op id first. opId('right', 5) > opId('left', 5)
+// (same clock, 'right' > 'left'), so 'y' lands before 'x'.
+left.toArray().join('');  // 'AyxC'
+right.toArray().join(''); // 'AyxC' — converged`;
+
+const rgaBuffer = `import { Rga, opId } from '@robonen/crdt';
+
+const rga = new Rga<string>();
+rga.integrateInsert(opId('a', 1), 'H', null);
+
+// An op arrives BEFORE its origin (causal violation). integrateInsert
+// returns false instead of corrupting order — the caller buffers it.
+const pending = { id: opId('a', 3), value: '!', origin: opId('a', 2) };
+const ok = rga.integrateInsert(pending.id, pending.value, pending.origin);
+// ok === false — origin opId('a', 2) isn't present yet
+
+// Once the missing origin lands, retry the buffered op:
+rga.integrateInsert(opId('a', 2), 'i', opId('a', 1));
+rga.integrateInsert(pending.id, pending.value, pending.origin); // now true
+
+rga.toArray().join(''); // 'Hi!'`;
+
+const marks = `import { Rga, MarkStore, opId } from '@robonen/crdt';
+
+// Build a sequence and grab the op ids of its characters.
+const rga = new Rga<string>();
+const ids: ReturnType<typeof opId>[] = [];
+let left: ReturnType<typeof opId> | null = null;
+for (let i = 0; i < 'bold'.length; i++) {
+  const id = opId('a', i + 1);
+  rga.integrateInsert(id, 'bold'[i]!, left);
+  ids.push(id);
+  left = id;
+}
+
+const marks = new MarkStore();
+
+// A span anchors to the FIRST and LAST character op ids (inclusive), not to
+// integer offsets — so it survives concurrent inserts/deletes around it.
+marks.add({
+  id: opId('a', 10),
+  type: 'strong',
+  value: true,
+  start: ids[0]!, // 'b'
+  end: ids[3]!,   // 'd'
+});
+
+// resolve() returns one active type→value map per character, in document order.
+const active = marks.resolve(rga.visible().map(n => n.id));
+active.map(m => m.get('strong')); // [true, true, true, true]`;
+
+const marksConflict = `import { MarkStore, opId } from '@robonen/crdt';
+
+const store = new MarkStore();
+const start = opId('a', 1);
+const end = opId('a', 4);
+
+// Concurrent formatting on the same range: B turns it bold, A clears it.
+store.add({ id: opId('a', 9), type: 'strong', value: false, start, end });
+store.add({ id: opId('b', 9), type: 'strong', value: true, start, end });
+
+// Highest op id wins per (character, type). opId('b', 9) > opId('a', 9),
+// so 'strong' resolves to true — a null/false value would have cleared it.
+const order = [opId('a', 1), opId('a', 2), opId('a', 3), opId('a', 4)];
+store.resolve(order).map(m => m.get('strong')); // [true, true, true, true]`;
+</script>
+
+<template>
+  <div class="docs-section">
+    <!-- Intro -->
+    <div class="prose-docs">
+      <h1>Primitives</h1>
+      <p>
+        <code>@robonen/crdt</code> is a small set of independent data structures, each convergent on
+        its own. You can use a single primitive in isolation — a last-writer-wins setting, an ordered
+        list, a collaborative string — or compose them into something bigger. This page walks through
+        each one with a construction example and a small converging scenario.
+      </p>
+      <p>
+        Every primitive leans on one shared idea:
+        <NuxtLink to="/crdt/compare-op-id">compareOpId</NuxtLink> — a deterministic total order over
+        operation ids (higher Lamport clock wins; site id breaks ties). Because all primitives resolve
+        conflicts the same way, two replicas that have seen the same operations always agree, no matter
+        the order or duplicates in which those operations arrived. If op ids are new to you, start with
+        <NuxtLink to="/crdt/concepts">Concepts</NuxtLink>.
+      </p>
+    </div>
+
+    <!-- Map of the package -->
+    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="mb-1.5 text-sm font-semibold text-(--fg)">Registers</h3>
+        <p class="text-sm leading-relaxed text-(--fg-muted)">
+          <code class="text-(--accent-text)">LwwRegister</code> and
+          <code class="text-(--accent-text)">LwwMap</code> — single values and keyed maps where the
+          write with the highest op id wins.
+        </p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="mb-1.5 text-sm font-semibold text-(--fg)">Ordering</h3>
+        <p class="text-sm leading-relaxed text-(--fg-muted)">
+          <code class="text-(--accent-text)">keyBetween</code> /
+          <code class="text-(--accent-text)">keysBetween</code> — fractional indexing to place or move
+          an item with a single string key.
+        </p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="mb-1.5 text-sm font-semibold text-(--fg)">Sequence</h3>
+        <p class="text-sm leading-relaxed text-(--fg-muted)">
+          <code class="text-(--accent-text)">Rga</code> — a replicated growable array: an ordered
+          sequence CRDT with tombstones and a deterministic insert tie-break.
+        </p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="mb-1.5 text-sm font-semibold text-(--fg)">Marks</h3>
+        <p class="text-sm leading-relaxed text-(--fg-muted)">
+          <code class="text-(--accent-text)">MarkStore</code> — lightweight Peritext formatting spans
+          anchored to character op ids, resolved per character by highest op id.
+        </p>
+      </div>
+    </div>
+
+    <!-- Registers -->
+    <div class="prose-docs">
+      <h2>LWW registers</h2>
+      <p>
+        A <NuxtLink to="/crdt/lww-register">LwwRegister</NuxtLink> is the smallest CRDT: a single
+        value with a timestamp. Every write carries an <code>OpId</code>, and a write only takes effect
+        if its id is strictly later than the current one by <code>compareOpId</code>. That single rule
+        gives you the three convergence properties for free — applying writes is
+        <strong>commutative</strong> (a later write always beats an earlier one regardless of arrival
+        order), <strong>idempotent</strong> (re-applying a write is a no-op), and
+        <strong>convergent</strong> (every replica ends on the same winning write).
+      </p>
+      <p>
+        <code>set(value, id)</code> returns <code>true</code> when the write won and
+        <code>false</code> when it was superseded, which is handy for skipping downstream work.
+      </p>
+    </div>
+    <DocsCode :code="lwwRegister" lang="ts" />
+
+    <div class="prose-docs">
+      <h3>LwwMap</h3>
+      <p>
+        <NuxtLink to="/crdt/lww-map">LwwMap</NuxtLink> is a register per key. Each entry tracks its own
+        timestamp and a tombstone flag, so concurrent <code>set</code> and <code>delete</code> on the
+        same key converge to whichever has the higher op id — deleting is just another timestamped
+        write that happens to hide the value. <code>get</code>, <code>has</code>, <code>keys</code>,
+        and <code>toEntries</code> all skip tombstoned entries, so the map reads like a plain map even
+        though deletions are retained internally for convergence.
+      </p>
+    </div>
+    <DocsCode :code="lwwMap" lang="ts" />
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-4">
+      <p class="text-sm leading-relaxed text-(--fg-muted)">
+        <strong class="text-(--fg)">Why keep tombstones?</strong> If a delete simply dropped the entry,
+        a concurrent <code class="text-(--accent-text)">set</code> arriving afterward would resurrect
+        the key — the two replicas would disagree on whether it exists. Retaining the delete as a
+        timestamped tombstone lets <code class="text-(--accent-text)">compareOpId</code> decide the
+        winner deterministically, the same way it does for live values.
+      </p>
+    </div>
+
+    <!-- Ordering -->
+    <div class="prose-docs">
+      <h2>Fractional indexing</h2>
+      <p>
+        Ordering a collaborative list with integer indices is a trap: insert at position 2 and every
+        index after it shifts, so two replicas inserting concurrently clobber each other's positions.
+        <NuxtLink to="/crdt/key-between">keyBetween</NuxtLink> sidesteps this by giving each item a
+        <em>string key</em> that lives strictly between its neighbors. Order is recovered by sorting
+        keys with plain string comparison — the digit alphabet is ASCII-ascending, so lexical order
+        matches digit order.
+      </p>
+      <p>
+        Pass <code>null</code> for an open bound: <code>keyBetween(null, x)</code> is "before
+        <code>x</code>", <code>keyBetween(x, null)</code> is "after <code>x</code>", and
+        <code>keyBetween(null, null)</code> seeds an empty list. The result is always strictly between
+        the bounds, so there is unlimited room to keep subdividing — you never run out of space to
+        insert between two adjacent items.
+      </p>
+    </div>
+    <DocsCode :code="fractionalBetween" lang="ts" />
+
+    <div class="prose-docs">
+      <h3>Batches and moves</h3>
+      <p>
+        <NuxtLink to="/crdt/keys-between">keysBetween</NuxtLink> generates <code>n</code> keys at once,
+        all strictly between the bounds and in ascending order — useful for seeding a list or
+        bulk-inserting a run of items. Because a key is just a value on the item, <strong>moving</strong>
+        an item is a single-field write: compute a new key between its new neighbors and re-sort.
+        Nothing else in the list is touched, which is exactly what makes concurrent reorders converge
+        cleanly (they reduce to independent
+        <NuxtLink to="/crdt/lww-register">LwwRegister</NuxtLink> writes on each item's key).
+      </p>
+    </div>
+    <DocsCode :code="fractionalBatch" lang="ts" />
+
+    <div class="rounded-lg border border-amber-500/30 bg-amber-500/10 p-4">
+      <p class="text-sm leading-relaxed text-(--fg-muted)">
+        <strong class="text-amber-700 dark:text-amber-400">Heads up:</strong>
+        <code class="text-(--accent-text)">keyBetween</code> requires <code>lower &lt; upper</code>
+        and throws otherwise. Two replicas independently generating a key between the
+        <em>same</em> neighbors can produce identical keys; pair the key with the item's op id as a
+        secondary sort to keep ordering deterministic, or let
+        <NuxtLink to="/crdt/rga">Rga</NuxtLink> handle character-level ordering for you.
+      </p>
+    </div>
+
+    <!-- Sequence -->
+    <div class="prose-docs">
+      <h2>The RGA sequence</h2>
+      <p>
+        <NuxtLink to="/crdt/rga">Rga</NuxtLink> (Replicated Growable Array) is the heart of the
+        package — the CRDT behind collaborative text. Each element is a node with a unique
+        <code>OpId</code>, a value, and an <code>originLeft</code>: the id of the element it was
+        inserted <em>after</em> (<code>null</code> means the start of the sequence). Deletion never
+        removes a node; it sets a <strong>tombstone</strong> flag, so the node lives on as a stable
+        anchor that later inserts and marks can still reference.
+      </p>
+      <p>
+        <code>integrateInsert(id, value, originLeft)</code> and <code>integrateDelete(id)</code> are
+        both idempotent — re-integrating an op you've already seen is a no-op that safely returns
+        <code>true</code>. Read the visible state with <code>toArray()</code>; use
+        <code>visible()</code> to get the surviving nodes (and their ids) for cursor anchoring, and
+        <code>length</code> for the visible count.
+      </p>
+    </div>
+    <DocsCode :code="rgaBasic" lang="ts" />
+
+    <div class="prose-docs">
+      <h3>Concurrent inserts and the tie-break</h3>
+      <p>
+        The interesting case is two replicas inserting at the <em>same</em> origin at the same time.
+        Both new elements claim the slot right after the same left neighbor — so which goes first? RGA
+        resolves this deterministically: among elements sharing an origin, the one with the
+        <strong>higher op id</strong> is placed first (<code>compareOpId &gt; 0</code> scans past it).
+        Because every replica applies the identical comparison, they all settle on the same order
+        without any coordination.
+      </p>
+    </div>
+    <DocsCode :code="rgaConverge" lang="ts" />
+
+    <div class="prose-docs">
+      <h3>Causal buffering</h3>
+      <p>
+        RGA requires inserts to be integrated <strong>in causal order</strong>: an element's
+        <code>originLeft</code> must already be present, or there's no anchor to insert after. Rather
+        than guess, <code>integrateInsert</code> returns <code>false</code> when the origin is missing
+        and <code>integrateDelete</code> returns <code>false</code> for an unknown target — the signal
+        to <em>buffer</em> the op and retry once its dependency lands. (At a higher level,
+        <NuxtLink to="/crdt/replica">Replica</NuxtLink> does this bookkeeping for you, holding and
+        replaying ops automatically.)
+      </p>
+    </div>
+    <DocsCode :code="rgaBuffer" lang="ts" />
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-4">
+      <p class="text-sm leading-relaxed text-(--fg-muted)">
+        <strong class="text-(--fg)">Garbage collection.</strong> Tombstones accumulate. When every
+        replica has fully synced and nothing is in flight, <code class="text-(--accent-text)">gc(stable, keep?)</code>
+        drops deleted nodes whose insert is covered by a stable
+        <NuxtLink to="/crdt/version-vector">VersionVector</NuxtLink>, returning how many it removed.
+        Run it only at quiescence — a late op that uses a dropped node as its origin could no longer
+        integrate — and pass <code class="text-(--accent-text)">keep</code> to protect ids still
+        referenced elsewhere, such as mark span endpoints.
+      </p>
+    </div>
+
+    <!-- Marks -->
+    <div class="prose-docs">
+      <h2>Marks (lightweight Peritext)</h2>
+      <p>
+        Formatting in a collaborative editor can't be stored by offset — insert a character and every
+        offset after it shifts, so a "bold from 3 to 7" range would drift onto the wrong text.
+        <NuxtLink to="/crdt/mark-store">MarkStore</NuxtLink> follows the
+        <a href="https://www.inkandswitch.com/peritext/" target="_blank" rel="noopener">Peritext</a>
+        model: a <code>MarkSpan</code> anchors to the <code>OpId</code> of its first and last
+        characters (an inclusive range), so the span moves with the text it covers as the sequence
+        grows and shrinks around it.
+      </p>
+      <p>
+        A span's <code>value</code> is a JSON-serializable <code>MarkValue</code> — pass
+        <code>true</code> (or attributes like a color string) to apply the mark, and
+        <code>null</code> or <code>false</code> to clear it.
+      </p>
+    </div>
+    <DocsCode :code="marks" lang="ts" />
+
+    <div class="prose-docs">
+      <h3>Resolving and converging</h3>
+      <p>
+        <code>add(span)</code> just records a span (idempotent by span id). The real work is
+        <code>resolve(order)</code>: given the character op ids in document order — typically
+        <code>rga.visible().map(n =&gt; n.id)</code> — it returns one <code>Map&lt;type, value&gt;</code>
+        of active marks per character. For each character and mark type, the covering span with the
+        <strong>highest op id wins</strong>, so concurrent formatting converges by the same
+        <code>compareOpId</code> rule as everything else; a winning <code>null</code>/<code>false</code>
+        span clears the mark.
+      </p>
+    </div>
+    <DocsCode :code="marksConflict" lang="ts" />
+
+    <!-- Where next -->
+    <div class="prose-docs">
+      <h2>Where to next</h2>
+      <ul>
+        <li>
+          <NuxtLink to="/crdt/concepts">Concepts</NuxtLink> — op ids, Lamport clocks, version vectors,
+          and why convergence holds across all of these primitives.
+        </li>
+        <li>
+          <NuxtLink to="/crdt/replication">Replication &amp; Sync</NuxtLink> — wire the primitives to a
+          <NuxtLink to="/crdt/replica">Replica</NuxtLink> for delta sync and automatic causal
+          buffering.
+        </li>
+        <li>
+          <NuxtLink to="/crdt/playground">Playground</NuxtLink> — watch two replicas diverge and
+          reconcile, live in the browser.
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
diff --git a/core/crdt/docs/03-replication.vue b/core/crdt/docs/03-replication.vue
new file mode 100644
index 0000000..8dfb6d6
--- /dev/null
+++ b/core/crdt/docs/03-replication.vue
@@ -0,0 +1,378 @@
+<!-- title: Replication & Sync -->
+<!-- order: 3 -->
+<script setup lang="ts">
+const opLogShape = `import { OpLog } from '@robonen/crdt';
+
+// The op log only ever reads \`id\` — the rest of the op is your domain payload.
+interface CharOp {
+  id: { site: string; clock: number };
+  originLeft: { site: string; clock: number } | null;
+  value: string;
+}
+
+const log = new OpLog<CharOp>();
+
+log.append(op);          // true if new, false if already seen (dedup by id)
+log.has(op.id);          // version vector lookup, not a linear scan
+log.version;             // VersionVector — the highest clock seen per site
+log.all();               // every op, in append order
+log.delta(remoteVector); // ops the remote (described by its vector) lacks`;
+
+const deltaExample = `// A asks B: "here's everything I've seen" (a state vector).
+const aWants = a.replica.version;
+
+// B answers with exactly the ops A is missing — nothing more.
+const patch = b.replica.delta(aWants); // OpLog.delta filters by the vector
+
+// A integrates them; ids it already has are silently dropped.
+a.replica.receive(patch);`;
+
+const roundTrip = `import { Replica, Rga } from '@robonen/crdt';
+import type { OpId } from '@robonen/crdt';
+
+interface CharOp {
+  id: OpId;
+  originLeft: OpId | null;
+  value: string;
+}
+
+// Each site owns an RGA (the sequence state) behind a Replica
+// (clock + op log + causal buffer + delta sync).
+function makeReplica(site: string) {
+  const rga = new Rga<string>();
+  const replica = new Replica<CharOp>(
+    { integrate: op => rga.integrateInsert(op.id, op.value, op.originLeft) },
+    site,
+  );
+  return { rga, replica };
+}
+
+function type(peer: ReturnType<typeof makeReplica>, text: string): void {
+  let left: OpId | null = null;
+  for (const ch of text) {
+    const id = peer.replica.nextId();              // tick the Lamport clock
+    peer.replica.commitLocal({ id, originLeft: left, value: ch });
+    left = id;
+  }
+}
+
+const a = makeReplica('a');
+const b = makeReplica('b');
+
+// Concurrent, independent edits — neither has seen the other.
+type(a, 'Hi');
+type(b, 'Yo');
+
+// Exchange ONLY the delta each side is missing, in both directions.
+b.replica.receive(a.replica.delta(b.replica.version));
+a.replica.receive(b.replica.delta(a.replica.version));
+
+a.rga.toArray().join('') === b.rga.toArray().join(''); // true — converged
+a.rga.length; // 4`;
+
+const bufferingExample = `const a = makeReplica('a');
+type(a, 'ab'); // two ops; the 2nd inserts after (depends on) the 1st
+
+const b = makeReplica('b');
+const [op1, op2] = a.replica.delta(b.replica.version);
+
+// Deliver the DEPENDENT op first. Its origin (op1) isn't present,
+// so integrate() returns false and the replica buffers it.
+b.replica.receive([op2]);
+b.rga.toArray().join(''); // '' — nothing applied yet
+
+// Now deliver the dependency. op1 integrates, which unblocks op2;
+// drain() loops until no further progress is possible.
+b.replica.receive([op1]);
+b.rga.toArray().join(''); // 'ab'`;
+
+const wireExample = `import {
+  encodeStateVector, decodeStateVector,
+  encodeOps, decodeOps,
+} from '@robonen/crdt';
+
+// --- Peer A: announce what I have ---
+const myVector: Uint8Array = encodeStateVector(a.replica.version);
+socket.send(myVector); // send over WebSocket, HTTP, BroadcastChannel, …
+
+// --- Peer B: answer with the delta A is missing ---
+const remoteVector = decodeStateVector(received);
+const patch: Uint8Array = encodeOps(b.replica.delta(remoteVector));
+socket.send(patch);
+
+// --- Peer A: apply the patch ---
+const ops = decodeOps<CharOp>(receivedPatch);
+a.replica.receive(ops);`;
+</script>
+
+<template>
+  <div class="docs-section">
+    <!-- Intro -->
+    <div class="prose-docs">
+      <h1>Replication &amp; Sync</h1>
+      <p>
+        A CRDT primitive on its own guarantees that the <em>same</em> set of operations converges.
+        Replication is the layer that makes sure every replica eventually holds that same set —
+        despite messages arriving out of order, twice, or after a long offline gap. This package
+        does it without a central server, a global lock, or full-state diffing: each replica keeps
+        an append-only op log keyed by a version vector, and the two sides exchange only the
+        operations the other is missing.
+      </p>
+      <p>
+        The pieces fit together in one direction. <code>OpLog</code> stores ops and tracks a
+        <code>VersionVector</code>; <code>Replica</code> wraps a log plus a Lamport clock and a
+        causal buffer, integrating local and remote ops into your domain state; and the
+        <code>sync</code> helpers turn version vectors and op batches into bytes for any transport.
+      </p>
+    </div>
+
+    <!-- Mental model -->
+    <div class="prose-docs">
+      <h2>The convergence model</h2>
+      <p>
+        Every operation carries a globally-unique <code>OpId</code> — a per-site
+        <a href="https://en.wikipedia.org/wiki/Lamport_timestamp">Lamport</a> clock value tagged
+        with the site that produced it (<code>{ site, clock }</code>). Two facts make replication
+        work, and both flow from that id:
+      </p>
+      <ul>
+        <li>
+          <strong>Identity ⇒ idempotence.</strong> Because an op's id is stable, a replica can tell
+          whether it has already seen an op and apply it at most once. Delivering the same op twice
+          is a no-op, so duplicate or replayed messages are harmless.
+        </li>
+        <li>
+          <strong>Determinism ⇒ commutativity.</strong> Concurrent ops are resolved by one shared
+          tie-break — <NuxtLink to="/crdt/compare-op-id">compareOpId</NuxtLink> (higher clock wins,
+          site id breaks ties). Since every replica agrees on it, the order ops arrive in doesn't
+          change the final state.
+        </li>
+      </ul>
+      <p>
+        Replication therefore reduces to a set-reconciliation problem: <em>get both replicas to the
+        same set of ops.</em> Convergence of the resulting state is the primitive's job; getting the
+        ops there efficiently is this layer's.
+      </p>
+    </div>
+
+    <!-- Version vectors -->
+    <div class="prose-docs">
+      <h3>Version vectors: "what have you seen?"</h3>
+      <p>
+        A <NuxtLink to="/crdt/version-vector">VersionVector</NuxtLink> is the compact summary of
+        everything a replica has observed — a map from site id to the highest clock seen for that
+        site. It relies on one assumption: each site emits <strong>dense</strong> clocks
+        (1, 2, 3, …), with no gaps. That's what lets a single number per site stand in for a whole
+        set: if a replica has seen <code>a@5</code>, it has necessarily seen <code>a@1…a@4</code>
+        too. So <code>has(id)</code> is just <code>get(id.site) &gt;= id.clock</code> — an O(1)
+        check, no per-op bookkeeping.
+      </p>
+      <p>
+        Two operations follow directly. <strong>Dedup:</strong> an incoming op whose id the vector
+        already covers can be ignored. <strong>Delta:</strong> given a remote vector, the set of ops
+        the remote lacks is exactly those whose id the vector does <em>not</em> cover.
+      </p>
+    </div>
+
+    <!-- OpLog -->
+    <div class="prose-docs">
+      <h2>The op log</h2>
+      <p>
+        <NuxtLink to="/crdt/op-log">OpLog</NuxtLink> is an append-only list of operations paired
+        with a version vector. It is deliberately domain-agnostic: the only field it reads is
+        <code>id</code> (the <code>HasOpId</code> constraint), so the same log stores RGA inserts,
+        LWW writes, mark spans, or anything else you give it.
+      </p>
+    </div>
+    <DocsCode :code="opLogShape" lang="ts" />
+    <div class="prose-docs">
+      <p>
+        <code>append</code> consults the vector first and returns <code>false</code> if the op is a
+        duplicate, so the log never stores the same id twice. <code>delta(remote)</code> walks the
+        log once and keeps every op the remote vector hasn't covered — this is the heart of
+        "exchange only the delta".
+      </p>
+    </div>
+    <DocsCode :code="deltaExample" lang="ts" />
+
+    <!-- Replica -->
+    <div class="prose-docs">
+      <h2>The replica</h2>
+      <p>
+        <NuxtLink to="/crdt/replica">Replica</NuxtLink> ties everything together. It owns a
+        <code>LamportClock</code>, an <code>OpLog</code>, and a pending buffer, and you give it a
+        single handler — <code>integrate(op)</code> — that applies an op to your domain state and
+        returns <code>false</code> when the op's causal dependencies aren't present yet.
+      </p>
+      <h3>Producing local ops</h3>
+      <p>
+        Call <code>nextId()</code> to tick the clock and mint a fresh, causally-later
+        <code>OpId</code>, build your op around it, then hand it to <code>commitLocal(op)</code>.
+        That logs it, integrates it into local state, and notifies <code>onUpdate</code> listeners
+        with origin <code>'local'</code>. Because <code>nextId</code> advances a Lamport clock that
+        also tracks observed remote ops, locally-generated ids are always ordered after everything
+        the replica has seen.
+      </p>
+      <h3>Receiving remote ops</h3>
+      <p>
+        <code>receive(ops)</code> is the inbound path. For each op it advances the clock past the
+        remote id (<code>clock.observe</code>), skips anything already logged or already buffered,
+        then drains the buffer — integrating whatever is now causally ready, retrying until no
+        further progress is possible. It returns the ops it actually applied (in apply order) and
+        notifies listeners with origin <code>'remote'</code>.
+      </p>
+      <h3>Computing a delta</h3>
+      <p>
+        <code>delta(remoteVector)</code> forwards to the log: the ops this replica holds that the
+        remote, described by its <code>version</code>, has not seen. The whole round-trip is two
+        deltas — one per direction.
+      </p>
+    </div>
+
+    <!-- Round trip -->
+    <div class="prose-docs">
+      <h2>The canonical round-trip</h2>
+      <p>
+        Here is the README's converging-string example expanded end to end. Two replicas type
+        concurrently, then each side sends the other exactly the ops it lacks. After both deltas,
+        they hold the identical op set and therefore the identical string.
+      </p>
+    </div>
+    <DocsCode :code="roundTrip" lang="ts" />
+    <div class="prose-docs">
+      <p>
+        Note the asymmetry that makes this efficient: <code>a.replica.delta(b.replica.version)</code>
+        is computed against <em>B's</em> vector, so it returns only what B is missing — not A's
+        entire history. On a long document this is the difference between sending two characters and
+        re-sending the whole file.
+      </p>
+    </div>
+
+    <!-- Why order does not matter -->
+    <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+      <h3 class="mb-1.5 text-sm font-semibold text-(--fg)">Why the order of the two deltas is irrelevant</h3>
+      <p class="text-sm leading-relaxed text-(--fg-muted)">
+        You could swap the two <code class="text-(--accent-text)">receive</code> lines, run them
+        repeatedly, or interleave them with more edits — the result is the same. Each side only ever
+        adds ops it hasn't seen, and <code class="text-(--accent-text)">compareOpId</code> places
+        each op in its deterministic position regardless of arrival order. That is convergence,
+        and the property tests assert it across randomized schedules.
+      </p>
+    </div>
+
+    <!-- Causal buffering -->
+    <div class="prose-docs">
+      <h2>Causal buffering</h2>
+      <p>
+        Some ops can't be applied the instant they arrive. An RGA insert references an
+        <code>originLeft</code> — the element it goes after — and a delete references the element it
+        tombstones. If that target hasn't been integrated yet (a later op overtook an earlier one in
+        transit), the insert has nowhere to anchor.
+      </p>
+      <p>
+        The handler signals this by returning <code>false</code> from <code>integrate</code>:
+        <NuxtLink to="/crdt/rga">Rga</NuxtLink>'s <code>integrateInsert</code> returns
+        <code>false</code> when its origin is absent, and <code>integrateDelete</code> returns
+        <code>false</code> when its target is unknown. <code>Replica.receive</code> treats a
+        <code>false</code> as "not ready yet": it keeps the op in a pending buffer and re-runs the
+        buffer every time new ops land, until either the op integrates or its dependency finally
+        arrives. Nothing is lost; nothing is applied prematurely.
+      </p>
+    </div>
+    <DocsCode :code="bufferingExample" lang="ts" />
+    <div class="prose-docs">
+      <p>
+        Internally the drain loop sweeps the buffer repeatedly: each successful integration may
+        unblock another buffered op, so it keeps looping while it makes progress. This is why a
+        single <code>receive</code> of a batch delivered in any order still settles to the right
+        state — the buffer absorbs the disorder.
+      </p>
+    </div>
+
+    <!-- Wire encoding -->
+    <div class="prose-docs">
+      <h2>Transport-agnostic wire encoding</h2>
+      <p>
+        The <code>sync</code> module is the only part that touches bytes, and it stays small on
+        purpose. There are two things to put on the wire — a version vector (the "what do you have?"
+        handshake) and a batch of ops (the delta or a full snapshot) — and a helper for each
+        direction:
+      </p>
+      <ul>
+        <li>
+          <NuxtLink to="/crdt/encode-state-vector">encodeStateVector</NuxtLink> /
+          <code>decodeStateVector</code> — a <code>VersionVector</code> ⇄ <code>Uint8Array</code>.
+        </li>
+        <li>
+          <NuxtLink to="/crdt/encode-ops">encodeOps</NuxtLink> / <code>decodeOps</code> — an op
+          batch (the delta or a full snapshot) ⇄ <code>Uint8Array</code>.
+        </li>
+        <li>
+          <code>encodeJson</code> / <code>decodeJson</code> — the lower-level pair the others build on.
+        </li>
+      </ul>
+      <p>
+        The v1 format is JSON encoded to bytes — simple and debuggable. A compact varint format is a
+        later optimization that changes the bytes, not the API, so code written against these
+        functions keeps working. Because the result is just a <code>Uint8Array</code>, the transport
+        is entirely up to you: WebSocket, HTTP, <code>BroadcastChannel</code>, a file on disk.
+      </p>
+    </div>
+    <DocsCode :code="wireExample" lang="ts" />
+
+    <!-- A typical sync protocol -->
+    <div class="prose-docs">
+      <h3>A minimal two-way protocol</h3>
+      <p>
+        Put the pieces together and a full reconciliation between two peers is four messages:
+      </p>
+      <ol>
+        <li>Each peer sends its <code>encodeStateVector(replica.version)</code>.</li>
+        <li>
+          On receiving the other's vector, each peer replies with
+          <code>encodeOps(replica.delta(theirVector))</code>.
+        </li>
+        <li>Each peer <code>receive()</code>s the decoded delta.</li>
+        <li>Both replicas now hold the same op set — and the same converged state.</li>
+      </ol>
+      <p>
+        This generalizes cleanly. For live collaboration, also forward each locally-committed op as
+        it happens (subscribe with <code>onUpdate</code>, encode the op, broadcast it); peers that
+        receive an op out of causal order simply buffer it. For catch-up after an offline gap, the
+        state-vector handshake above replays exactly the missed ops. The same machinery covers both.
+      </p>
+    </div>
+
+    <!-- Caveat callout -->
+    <div class="rounded-lg border border-amber-500/30 bg-amber-500/10 p-5">
+      <h3 class="mb-1.5 text-sm font-semibold text-amber-700 dark:text-amber-400">Dense clocks are a precondition</h3>
+      <p class="text-sm leading-relaxed text-(--fg-muted)">
+        Version vectors assume each site's clocks are dense (1, 2, 3, …). That holds automatically
+        when ids come from <code class="text-(--accent-text)">Replica.nextId()</code>. If you mint
+        ids yourself, never skip a value for a site — a gap would make
+        <code class="text-(--accent-text)">delta</code> believe a missing op was already delivered.
+      </p>
+    </div>
+
+    <!-- Where next -->
+    <div class="prose-docs">
+      <h2>Where to next</h2>
+      <ul>
+        <li>
+          <NuxtLink to="/crdt/replica">Replica</NuxtLink> — the full API reference for
+          <code>commitLocal</code>, <code>receive</code>, <code>delta</code>, and
+          <code>onUpdate</code>.
+        </li>
+        <li>
+          <NuxtLink to="/crdt/op-log">OpLog</NuxtLink> and
+          <NuxtLink to="/crdt/version-vector">VersionVector</NuxtLink> — the storage and causality
+          primitives underneath.
+        </li>
+        <li>
+          <NuxtLink to="/crdt/playground">Playground</NuxtLink> — watch two replicas diverge and
+          reconcile live in the browser.
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
diff --git a/core/crdt/docs/04-playground.vue b/core/crdt/docs/04-playground.vue
new file mode 100644
index 0000000..45b514f
--- /dev/null
+++ b/core/crdt/docs/04-playground.vue
@@ -0,0 +1,528 @@
+<!-- title: Playground -->
+<!-- order: 4 -->
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue';
+import type { OpId } from '../src';
+import { Replica, Rga } from '../src';
+
+// ---------------------------------------------------------------------------
+// The op shape exchanged between replicas.
+//
+// This is a REAL @robonen/crdt setup, not a simulation: each side owns an `Rga`
+// for its sequence state, wrapped by a `Replica` that owns the Lamport clock,
+// op log, causal buffer and delta computation. The only thing the demo adds is
+// a tiny op union so we can both insert and delete characters.
+// ---------------------------------------------------------------------------
+type CharOp =
+  | { kind: 'insert'; id: OpId; value: string; originLeft: OpId | null }
+  | { kind: 'delete'; id: OpId; target: OpId };
+
+interface Side {
+  rga: Rga<string>;
+  replica: Replica<CharOp>;
+}
+
+function makeSide(site: string): Side {
+  const rga = new Rga<string>();
+  const replica = new Replica<CharOp>(
+    {
+      // Return `false` when a dependency is missing — the Replica buffers the op
+      // and retries it automatically once the dependency arrives.
+      integrate: (op) => {
+        if (op.kind === 'insert')
+          return rga.integrateInsert(op.id, op.value, op.originLeft);
+        return rga.integrateDelete(op.target);
+      },
+    },
+    site,
+  );
+  return { rga, replica };
+}
+
+// Reactive view-model. The CRDT classes are plain (non-reactive) objects, so we
+// keep a small reactive snapshot and refresh it after every mutation.
+interface View {
+  text: string;
+  ops: number;
+  clock: number;
+  pending: number;
+}
+
+const snapshot = reactive<{ a: View; b: View }>({
+  a: { text: '', ops: 0, clock: 0, pending: 0 },
+  b: { text: '', ops: 0, clock: 0, pending: 0 },
+});
+
+const drafts = reactive({ a: '', b: '' });
+let a: Side | null = null;
+let b: Side | null = null;
+
+function refresh(): void {
+  if (!a || !b)
+    return;
+  snapshot.a = {
+    text: a.rga.toArray().join(''),
+    ops: a.replica.version.get(a.replica.site),
+    clock: a.replica.version.get(a.replica.site),
+    pending: 0,
+  };
+  snapshot.b = {
+    text: b.rga.toArray().join(''),
+    ops: b.replica.version.get(b.replica.site),
+    clock: b.replica.version.get(b.replica.site),
+    pending: 0,
+  };
+}
+
+function init(): void {
+  a = makeSide('A');
+  b = makeSide('B');
+  drafts.a = '';
+  drafts.b = '';
+  refresh();
+}
+
+// The drafts are deliberately decoupled from the CRDT value until "Apply":
+// that lets the user stage CONCURRENT edits on both sides before any sync, the
+// scenario where convergence actually matters.
+
+/**
+ * Diff the side's current CRDT string against the textarea draft and emit the
+ * minimal insert/delete ops to make the RGA match the draft, committing each
+ * locally. A real editor derives these ops from input events the same way.
+ */
+function apply(which: 'a' | 'b'): void {
+  const side = which === 'a' ? a : b;
+  if (!side)
+    return;
+
+  const current = side.rga.toArray();
+  const next = [...(which === 'a' ? drafts.a : drafts.b)];
+
+  // Longest common prefix / suffix → splice region (a tiny, dependency-free diff).
+  let start = 0;
+  while (start < current.length && start < next.length && current[start] === next[start])
+    start += 1;
+
+  let endCur = current.length;
+  let endNext = next.length;
+  while (endCur > start && endNext > start && current[endCur - 1] === next[endNext - 1]) {
+    endCur -= 1;
+    endNext -= 1;
+  }
+
+  // Delete the removed characters (right-to-left keeps live indices stable).
+  for (let i = endCur - 1; i >= start; i--) {
+    const target = side.rga.idAt(i);
+    if (target) {
+      const op: CharOp = { kind: 'delete', id: side.replica.nextId(), target };
+      side.replica.commitLocal(op);
+    }
+  }
+
+  // Insert the new characters after the surviving left neighbour.
+  let left = start > 0 ? side.rga.idAt(start - 1) : null;
+  for (let i = start; i < endNext; i++) {
+    const op: CharOp = {
+      kind: 'insert',
+      id: side.replica.nextId(),
+      value: next[i]!,
+      originLeft: left,
+    };
+    side.replica.commitLocal(op);
+    left = op.id;
+  }
+
+  // Re-read drafts from the authoritative CRDT value.
+  drafts.a = a!.rga.toArray().join('');
+  drafts.b = b!.rga.toArray().join('');
+  refresh();
+}
+
+/**
+ * One full sync round: each side hands the other only the ops it is missing
+ * (computed from the peer's version vector), and `receive` integrates them with
+ * dedup + causal buffering. After this both RGAs hold the identical sequence.
+ */
+function sync(): void {
+  if (!a || !b)
+    return;
+  // Snapshot versions BEFORE exchanging so each delta reflects pre-sync state.
+  const va = a.replica.version.clone();
+  const vb = b.replica.version.clone();
+  b.replica.receive(a.replica.delta(vb));
+  a.replica.receive(b.replica.delta(va));
+  drafts.a = a.rga.toArray().join('');
+  drafts.b = b.rga.toArray().join('');
+  refresh();
+}
+
+const ready = ref(false);
+function start(): void {
+  if (ready.value)
+    return;
+  init();
+  ready.value = true;
+}
+
+const converged = computed(() =>
+  snapshot.a.text === snapshot.b.text && (snapshot.a.text.length > 0 || snapshot.a.ops > 0));
+
+// --- static code samples ---------------------------------------------------
+const setupCode = `import { Replica, Rga } from '@robonen/crdt';
+import type { OpId } from '@robonen/crdt';
+
+// Inserts and deletes travel as ops. Every op carries an \`id\`; that's all
+// Replica's op log needs to dedup and compute deltas.
+type CharOp =
+  | { kind: 'insert'; id: OpId; value: string; originLeft: OpId | null }
+  | { kind: 'delete'; id: OpId; target: OpId };
+
+function makeSide(site: string) {
+  const rga = new Rga<string>();
+  const replica = new Replica<CharOp>(
+    {
+      // Return false when a causal dependency is missing — the Replica buffers
+      // the op and retries it automatically once the dependency lands.
+      integrate: (op) =>
+        op.kind === 'insert'
+          ? rga.integrateInsert(op.id, op.value, op.originLeft)
+          : rga.integrateDelete(op.target),
+    },
+    site,
+  );
+  return { rga, replica };
+}
+
+const a = makeSide('A');
+const b = makeSide('B');`;
+
+const localEditCode = `// A types "cat" at the start. Each character is an insert anchored to the
+// previous one via originLeft; nextId() advances A's Lamport clock.
+let left: OpId | null = null;
+for (const ch of 'cat') {
+  const op = { kind: 'insert', id: a.replica.nextId(), value: ch, originLeft: left } as const;
+  a.replica.commitLocal(op); // integrate locally + append to the log
+  left = op.id;
+}
+
+// Concurrently, B types "dog" — it has NOT seen A's ops yet.
+left = null;
+for (const ch of 'dog') {
+  const op = { kind: 'insert', id: b.replica.nextId(), value: ch, originLeft: left } as const;
+  b.replica.commitLocal(op);
+  left = op.id;
+}
+
+a.rga.toArray().join(''); // 'cat'
+b.rga.toArray().join(''); // 'dog'  — the replicas have DIVERGED`;
+
+const syncCode = `// Send each side only what it's missing, computed from the peer's version.
+// Snapshot versions first so both deltas describe the pre-sync state.
+const va = a.replica.version.clone();
+const vb = b.replica.version.clone();
+
+b.replica.receive(a.replica.delta(vb)); // B integrates A's 3 inserts
+a.replica.receive(b.replica.delta(va)); // A integrates B's 3 inserts
+
+// Both RGAs now hold the same six characters in the same order. The order is
+// decided by compareOpId (higher clock wins; site id breaks the tie) — NOT by
+// who synced first — so the result is identical on every replica.
+a.rga.toArray().join(''); // e.g. 'dogcat'
+a.rga.toArray().join('') === b.rga.toArray().join(''); // true — CONVERGED`;
+</script>
+
+<template>
+  <div class="docs-section">
+    <!-- Intro -->
+    <div class="prose-docs">
+      <h1>Playground</h1>
+      <p>
+        Reading about convergence only gets you so far — the intuition lands when you
+        <em>watch two replicas disagree and then reconcile</em>. Below is a live, two-replica
+        editor backed by the real <NuxtLink to="/crdt/rga">Rga</NuxtLink> and
+        <NuxtLink to="/crdt/replica">Replica</NuxtLink> classes from this package. Edit each side
+        independently, then press <strong>Sync</strong> and see them land on the exact same string.
+      </p>
+    </div>
+
+    <!-- Live demo -->
+    <div class="prose-docs">
+      <h2>Live: two replicas, one string</h2>
+      <p>
+        Replica <strong>A</strong> and replica <strong>B</strong> each own a private copy of a
+        shared document. Type something different into each, click <strong>Apply</strong> to commit
+        those edits locally (they diverge), then <strong>Sync</strong> to exchange deltas and
+        converge. The readout under each side shows its current value, how many local ops its log
+        has produced, and its Lamport clock.
+      </p>
+    </div>
+
+    <ClientOnly>
+      <template #fallback>
+        <div class="rounded-xl border border-(--border) bg-(--bg-subtle) p-8 text-center text-sm text-(--fg-subtle)">
+          Loading interactive demo…
+        </div>
+      </template>
+
+      <div class="rounded-xl border border-(--border) bg-(--bg-subtle) p-4 sm:p-5">
+        <div v-if="!ready" class="flex flex-col items-center gap-3 py-8 text-center">
+          <p class="text-sm text-(--fg-muted)">Spin up two fresh replicas to start editing.</p>
+          <button
+            type="button"
+            class="rounded-md bg-(--accent) px-4 py-2 text-sm font-medium text-(--accent-fg) hover:bg-(--accent-hover) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+            @click="start()"
+          >
+            Start demo
+          </button>
+        </div>
+
+        <div v-else class="flex flex-col gap-4">
+          <!-- Two replica panes -->
+          <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <!-- Replica A -->
+            <div class="flex flex-col gap-2 rounded-lg border border-(--border) bg-(--bg-elevated) p-3">
+              <div class="flex items-center justify-between">
+                <span class="text-xs font-semibold uppercase tracking-wider text-(--fg-muted)">Replica A</span>
+                <span class="rounded bg-(--bg-inset) px-1.5 py-0.5 font-mono text-[11px] text-(--fg-subtle)">site: A</span>
+              </div>
+              <textarea
+                v-model="drafts.a"
+                rows="3"
+                spellcheck="false"
+                class="resize-none rounded-md border border-(--border) bg-(--bg) px-3 py-2 font-mono text-sm text-(--fg) focus:border-(--border-strong) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+                placeholder="Type on A…"
+              />
+              <div class="flex items-center gap-2">
+                <button
+                  type="button"
+                  class="rounded-md border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-xs font-medium text-(--fg) hover:bg-(--bg-inset) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+                  @click="apply('a')"
+                >
+                  Apply edits
+                </button>
+                <div class="ml-auto flex items-center gap-3 font-mono text-[11px] text-(--fg-subtle)">
+                  <span>ops {{ snapshot.a.ops }}</span>
+                  <span>clock {{ snapshot.a.clock }}</span>
+                </div>
+              </div>
+              <div class="rounded-md bg-(--bg-inset) px-3 py-2 font-mono text-sm text-(--fg) break-all min-h-9">
+                <span v-if="snapshot.a.text">{{ snapshot.a.text }}</span>
+                <span v-else class="text-(--fg-subtle)">(empty)</span>
+              </div>
+            </div>
+
+            <!-- Replica B -->
+            <div class="flex flex-col gap-2 rounded-lg border border-(--border) bg-(--bg-elevated) p-3">
+              <div class="flex items-center justify-between">
+                <span class="text-xs font-semibold uppercase tracking-wider text-(--fg-muted)">Replica B</span>
+                <span class="rounded bg-(--bg-inset) px-1.5 py-0.5 font-mono text-[11px] text-(--fg-subtle)">site: B</span>
+              </div>
+              <textarea
+                v-model="drafts.b"
+                rows="3"
+                spellcheck="false"
+                class="resize-none rounded-md border border-(--border) bg-(--bg) px-3 py-2 font-mono text-sm text-(--fg) focus:border-(--border-strong) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+                placeholder="Type on B…"
+              />
+              <div class="flex items-center gap-2">
+                <button
+                  type="button"
+                  class="rounded-md border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-xs font-medium text-(--fg) hover:bg-(--bg-inset) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+                  @click="apply('b')"
+                >
+                  Apply edits
+                </button>
+                <div class="ml-auto flex items-center gap-3 font-mono text-[11px] text-(--fg-subtle)">
+                  <span>ops {{ snapshot.b.ops }}</span>
+                  <span>clock {{ snapshot.b.clock }}</span>
+                </div>
+              </div>
+              <div class="rounded-md bg-(--bg-inset) px-3 py-2 font-mono text-sm text-(--fg) break-all min-h-9">
+                <span v-if="snapshot.b.text">{{ snapshot.b.text }}</span>
+                <span v-else class="text-(--fg-subtle)">(empty)</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Sync bar -->
+          <div class="flex flex-wrap items-center gap-3 border-t border-(--border) pt-3">
+            <button
+              type="button"
+              class="rounded-md bg-(--accent) px-4 py-2 text-sm font-medium text-(--accent-fg) hover:bg-(--accent-hover) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+              @click="sync()"
+            >
+              Sync ↔
+            </button>
+            <button
+              type="button"
+              class="rounded-md px-3 py-2 text-sm text-(--fg-muted) hover:bg-(--bg-inset) hover:text-(--fg) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+              @click="init()"
+            >
+              Reset
+            </button>
+            <span
+              v-if="converged"
+              class="ml-auto inline-flex items-center gap-1.5 rounded-md bg-emerald-500/10 px-2.5 py-1 text-xs font-medium text-emerald-600 dark:text-emerald-400"
+            >
+              ● Converged — both sides equal
+            </span>
+            <span
+              v-else
+              class="ml-auto inline-flex items-center gap-1.5 rounded-md bg-amber-500/10 px-2.5 py-1 text-xs font-medium text-amber-600 dark:text-amber-400"
+            >
+              ● Diverged — sync to reconcile
+            </span>
+          </div>
+        </div>
+      </div>
+    </ClientOnly>
+
+    <div class="prose-docs">
+      <p>
+        Try the canonical experiment: type <code>cat</code> on A and <code>dog</code> on B, apply
+        both, then sync. The result is the same six characters on both sides, every time — the order
+        is decided by op id, not by who synced first. Reset and try it again to confirm it's
+        deterministic.
+      </p>
+    </div>
+
+    <!-- How it works -->
+    <div class="prose-docs">
+      <h2>How the demo is wired</h2>
+      <p>
+        There's no mock here. Each side is a real <code>Rga&lt;string&gt;</code> wrapped in a
+        <code>Replica&lt;CharOp&gt;</code>. The <code>Replica</code> owns the Lamport clock, the
+        append-only op log, the causal buffer, and delta computation; the <code>Rga</code> holds the
+        actual character sequence with tombstones. We pass one handler — <code>integrate</code> —
+        that applies an op to the RGA.
+      </p>
+    </div>
+    <DocsCode :code="setupCode" lang="ts" />
+
+    <div class="prose-docs">
+      <h3>Making concurrent edits</h3>
+      <p>
+        A local edit is just an op: call <code>replica.nextId()</code> to mint a fresh op id (which
+        ticks that site's Lamport clock), build the insert or delete, and pass it to
+        <code>commitLocal</code>. That integrates the op into the RGA and appends it to the log in
+        one step. Because A and B edit before any sync, they produce ops with overlapping clock
+        values but different site ids — genuinely concurrent operations.
+      </p>
+    </div>
+    <DocsCode :code="localEditCode" lang="ts" />
+
+    <div class="prose-docs">
+      <h3>Syncing the deltas</h3>
+      <p>
+        Sync is a delta exchange driven by version vectors. Each replica's
+        <code>version</code> records the highest clock it has seen per site;
+        <code>delta(remoteVersion)</code> returns exactly the ops the remote is missing.
+        <code>receive</code> then dedups, integrates, and — crucially — <em>buffers</em> any op
+        whose causal dependency hasn't arrived yet, retrying it automatically once that dependency
+        lands.
+      </p>
+    </div>
+    <DocsCode :code="syncCode" lang="ts" />
+
+    <!-- Why it converges -->
+    <div class="prose-docs">
+      <h2>Why it always converges</h2>
+      <p>
+        The demo never special-cases conflicts, because the data structure can't have any. Three
+        properties, each verified by the package's property tests, guarantee that every replica
+        reaches the same state regardless of message order, duplication, or delay.
+      </p>
+    </div>
+
+    <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="mb-1.5 text-sm font-semibold text-(--fg)">Commutative</h3>
+        <p class="text-sm leading-relaxed text-(--fg-muted)">
+          A-then-B and B-then-A produce the same sequence. Concurrent inserts at the same origin are
+          ordered by <code class="text-(--accent-text)">compareOpId</code>, so order of arrival
+          doesn't matter.
+        </p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="mb-1.5 text-sm font-semibold text-(--fg)">Idempotent</h3>
+        <p class="text-sm leading-relaxed text-(--fg-muted)">
+          Receiving the same op twice is a no-op. The op log's version vector dedups on
+          <code class="text-(--accent-text)">id</code>, and <code class="text-(--accent-text)">integrateInsert</code>
+          short-circuits if the id is already present.
+        </p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="mb-1.5 text-sm font-semibold text-(--fg)">Causal</h3>
+        <p class="text-sm leading-relaxed text-(--fg-muted)">
+          An insert can't integrate before its <code class="text-(--accent-text)">originLeft</code>,
+          nor a delete before its target. <code class="text-(--accent-text)">receive</code> buffers
+          such ops and retries them, so out-of-order delivery still converges.
+        </p>
+      </div>
+    </div>
+
+    <div class="prose-docs">
+      <h3>The single source of truth: op id order</h3>
+      <p>
+        Everything hinges on one comparison. When two replicas insert characters at the same
+        position concurrently, <code>Rga.integrateInsert</code> walks past any existing siblings
+        whose op id sorts <em>higher</em> and splices the new node in — so the final order is fully
+        determined by <code>compareOpId</code>: higher Lamport clock first, with the site id as a
+        deterministic tie-break. Every replica runs the same comparison on the same ids, so they all
+        agree on the same order without a coordinator.
+      </p>
+      <p>
+        That's also why deletes are tombstones rather than removals: a delete only flips a node's
+        <code>deleted</code> flag, so a concurrent insert that anchored to that node still has a
+        valid origin. The character disappears from <code>toArray()</code>, but the structure stays
+        intact for convergence. Tombstones are reclaimed later via
+        <NuxtLink to="/crdt/rga"><code>Rga.gc</code></NuxtLink>, but only at quiescence.
+      </p>
+    </div>
+
+    <!-- Things to try -->
+    <div class="prose-docs">
+      <h2>Experiments to try</h2>
+      <ul>
+        <li>
+          <strong>Repeat sync.</strong> Press <strong>Sync</strong> twice in a row — the second pass
+          applies nothing, because each side's delta is now empty. Idempotence in action.
+        </li>
+        <li>
+          <strong>Concurrent deletes.</strong> Sync to a shared value, then delete different
+          characters on each side and sync again. Both deletions survive; neither clobbers the other.
+        </li>
+        <li>
+          <strong>Edit after sync.</strong> Keep editing on one side and syncing repeatedly — only
+          the new ops travel each time, because <code>delta</code> filters by the peer's version
+          vector.
+        </li>
+        <li>
+          <strong>Tie-break.</strong> Type a single different character at the very start of each
+          side, then sync. The one whose op id sorts higher lands first — deterministically.
+        </li>
+      </ul>
+    </div>
+
+    <!-- Where next -->
+    <div class="prose-docs">
+      <h2>Where to next</h2>
+      <ul>
+        <li>
+          <NuxtLink to="/crdt/rga">Rga</NuxtLink> — the full sequence API: tombstones, cursor
+          anchoring via op ids, and garbage collection.
+        </li>
+        <li>
+          <NuxtLink to="/crdt/replica">Replica</NuxtLink> — clock, op log, causal buffer, deltas,
+          and the <code>onUpdate</code> subscription used to drive UI.
+        </li>
+        <li>
+          <NuxtLink to="/crdt/version-vector">VersionVector</NuxtLink> and
+          <NuxtLink to="/crdt/compare-op-id">compareOpId</NuxtLink> — the causality and tie-break
+          machinery behind every primitive.
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
diff --git a/core/crdt/docs/intro.vue b/core/crdt/docs/intro.vue
new file mode 100644
index 0000000..e22715f
--- /dev/null
+++ b/core/crdt/docs/intro.vue
@@ -0,0 +1,139 @@
+<script setup lang="ts">
+const replicaExample = `import { Replica, Rga, opId } from '@robonen/crdt';
+
+// Each editing site owns an RGA (the sequence state) wrapped by a Replica
+// (clock + op log + causal buffering + delta sync).
+type Op = {
+  id: ReturnType<typeof opId>;
+  value: string;
+  originLeft: ReturnType<typeof opId> | null;
+};
+
+function makeReplica(site: string) {
+  const rga = new Rga<string>();
+  const replica = new Replica<Op>(
+    { integrate: op => rga.integrateInsert(op.id, op.value, op.originLeft) },
+    site,
+  );
+  return { rga, replica };
+}
+
+const a = makeReplica('a');
+const b = makeReplica('b');
+
+// A types "hi" locally.
+let left: Op['originLeft'] = null;
+for (const ch of 'hi') {
+  const op: Op = { id: a.replica.nextId(), value: ch, originLeft: left };
+  a.replica.commitLocal(op);
+  left = op.id;
+}
+
+// Sync: send B only the ops it is missing, then send A only what it lacks.
+b.replica.receive(a.replica.delta(b.replica.version));
+a.replica.receive(b.replica.delta(a.replica.version));
+
+a.rga.toArray().join(''); // 'hi'
+a.rga.toArray().join('') === b.rga.toArray().join(''); // true — converged`;
+</script>
+
+<template>
+  <div class="docs-section">
+    <!-- Hero -->
+    <div class="prose-docs">
+      <h1>@robonen/crdt</h1>
+      <p>
+        Framework-agnostic CRDT primitives — an RGA sequence, last-writer-wins registers,
+        fractional indexing, and version vectors that converge no matter the order, duplicates,
+        or delays in which operations arrive.
+      </p>
+    </div>
+
+    <div class="prose-docs">
+      <p>
+        Collaborative state is hard because two replicas can edit the same document at once,
+        offline, with messages that arrive out of order or twice. A CRDT solves this by construction:
+        every primitive here is <strong>commutative, idempotent, and convergent</strong>, so applying
+        the same set of operations in any order yields the same state — a property verified by
+        property tests. It's the convergence engine behind <code>@robonen/editor</code>, but stays
+        fully domain-agnostic, ships zero runtime dependencies, and runs in both Node and the browser.
+      </p>
+    </div>
+
+    <!-- Feature cards -->
+    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="mb-1.5 text-sm font-semibold text-(--fg)">Convergent by construction</h3>
+        <p class="text-sm leading-relaxed text-(--fg-muted)">
+          One deterministic tie-break — <code class="text-(--accent-text)">compareOpId</code> (higher
+          Lamport clock wins; site id breaks ties) — is shared by every primitive, so LWW and RGA agree
+          on the same final state.
+        </p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="mb-1.5 text-sm font-semibold text-(--fg)">Causal buffering built in</h3>
+        <p class="text-sm leading-relaxed text-(--fg-muted)">
+          <code class="text-(--accent-text)">Replica.receive</code> dedups, holds ops whose dependencies
+          haven't arrived yet (an insert before its origin), and retries them automatically as they land.
+        </p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="mb-1.5 text-sm font-semibold text-(--fg)">Delta sync, not full state</h3>
+        <p class="text-sm leading-relaxed text-(--fg-muted)">
+          Version vectors let each side request exactly the ops it's missing via
+          <code class="text-(--accent-text)">delta(version)</code>, with a transport-agnostic wire format.
+        </p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="mb-1.5 text-sm font-semibold text-(--fg)">Zero dependencies, pure TS</h3>
+        <p class="text-sm leading-relaxed text-(--fg-muted)">
+          No runtime deps, no framework lock-in. Compose the primitives yourself, or lean on
+          <code class="text-(--accent-text)">Replica</code> to tie a clock, op log, and buffer together.
+        </p>
+      </div>
+    </div>
+
+    <!-- Install -->
+    <div class="prose-docs">
+      <h2>Install</h2>
+      <p>Add the package with your preferred package manager.</p>
+    </div>
+    <DocsCode :code="`pnpm add @robonen/crdt`" lang="bash" />
+
+    <!-- Usage -->
+    <div class="prose-docs">
+      <h2>Quick start</h2>
+      <p>
+        Two replicas edit a string independently, then exchange only the operations each is missing
+        and converge to the same result.
+      </p>
+    </div>
+    <DocsCode :code="replicaExample" lang="ts" />
+
+    <!-- Where next -->
+    <div class="prose-docs">
+      <h2>Where to next</h2>
+      <p>New to CRDTs? Work through the guide and finish in the live playground.</p>
+      <ul>
+        <li>
+          <NuxtLink to="/crdt/concepts">Concepts</NuxtLink> — op ids, Lamport clocks, version vectors,
+          and why convergence holds.
+        </li>
+        <li>
+          <NuxtLink to="/crdt/primitives">Primitives</NuxtLink> — a tour of
+          <NuxtLink to="/crdt/rga">Rga</NuxtLink>,
+          <NuxtLink to="/crdt/lww-register">LwwRegister</NuxtLink>, and fractional indexing with
+          <NuxtLink to="/crdt/key-between">keyBetween</NuxtLink>.
+        </li>
+        <li>
+          <NuxtLink to="/crdt/replication">Replication &amp; Sync</NuxtLink> — wiring up
+          <NuxtLink to="/crdt/replica">Replica</NuxtLink>, deltas, and the wire encoding.
+        </li>
+        <li>
+          <NuxtLink to="/crdt/playground">Playground</NuxtLink> — watch two replicas diverge and
+          reconcile, live in the browser.
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
diff --git a/core/crdt/eslint.config.ts b/core/crdt/eslint.config.ts
new file mode 100644
index 0000000..e703f35
--- /dev/null
+++ b/core/crdt/eslint.config.ts
@@ -0,0 +1,3 @@
+import { base, compose, imports, stylistic, typescript } from '@robonen/eslint';
+
+export default compose(base, typescript, imports, stylistic);
diff --git a/core/crdt/package.json b/core/crdt/package.json
new file mode 100644
index 0000000..23f32f3
--- /dev/null
+++ b/core/crdt/package.json
@@ -0,0 +1,54 @@
+{
+  "name": "@robonen/crdt",
+  "version": "0.0.1",
+  "license": "Apache-2.0",
+  "description": "Framework-agnostic CRDT primitives: RGA sequence, LWW registers, fractional indexing, version vectors",
+  "keywords": [
+    "crdt",
+    "rga",
+    "lww",
+    "collaborative",
+    "fractional-indexing",
+    "tools"
+  ],
+  "author": "Robonen Andrew <robonenandrew@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/robonen/tools.git",
+    "directory": "core/crdt"
+  },
+  "packageManager": "pnpm@10.33.2",
+  "engines": {
+    "node": ">=24.13.1"
+  },
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "scripts": {
+    "lint:check": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "test": "vitest run",
+    "dev": "vitest dev",
+    "build": "tsdown"
+  },
+  "devDependencies": {
+    "@robonen/eslint": "workspace:*",
+    "@robonen/tsconfig": "workspace:*",
+    "@robonen/tsdown": "workspace:*",
+    "eslint": "catalog:",
+    "tsdown": "catalog:"
+  }
+}
diff --git a/core/crdt/src/clock/__test__/clock.test.ts b/core/crdt/src/clock/__test__/clock.test.ts
new file mode 100644
index 0000000..618aaf2
--- /dev/null
+++ b/core/crdt/src/clock/__test__/clock.test.ts
@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest';
+import { LamportClock, VersionVector, compareOpId, opId, opIdEq } from '..';
+
+describe('compareOpId', () => {
+  it('orders by clock, then by site id', () => {
+    expect(compareOpId(opId('a', 1), opId('a', 2))).toBeLessThan(0);
+    expect(compareOpId(opId('a', 2), opId('b', 2))).toBeLessThan(0);
+    expect(compareOpId(opId('b', 2), opId('a', 2))).toBeGreaterThan(0);
+    expect(compareOpId(opId('a', 2), opId('a', 2))).toBe(0);
+    expect(opIdEq(opId('a', 1), opId('a', 1))).toBe(true);
+  });
+});
+
+describe('lamportClock', () => {
+  it('ticks monotonically and advances past observed remote ops', () => {
+    const clock = new LamportClock('a');
+    expect(clock.tick()).toEqual({ site: 'a', clock: 1 });
+    expect(clock.tick()).toEqual({ site: 'a', clock: 2 });
+    clock.observe({ site: 'b', clock: 5 });
+    expect(clock.tick().clock).toBe(6);
+  });
+});
+
+describe('versionVector', () => {
+  it('tracks seen ops and round-trips through JSON', () => {
+    const vv = new VersionVector();
+    vv.observe(opId('a', 3));
+    vv.observe(opId('b', 1));
+
+    expect(vv.has(opId('a', 2))).toBe(true);
+    expect(vv.has(opId('a', 3))).toBe(true);
+    expect(vv.has(opId('a', 4))).toBe(false);
+    expect(vv.has(opId('c', 1))).toBe(false);
+
+    const restored = VersionVector.fromJSON(vv.toJSON());
+    expect(restored.get('a')).toBe(3);
+    expect(restored.get('b')).toBe(1);
+  });
+});
diff --git a/core/crdt/src/clock/id.ts b/core/crdt/src/clock/id.ts
new file mode 100644
index 0000000..c87f658
--- /dev/null
+++ b/core/crdt/src/clock/id.ts
@@ -0,0 +1,35 @@
+/** A replica identifier — unique per editing site/session. */
+export type SiteId = string;
+
+/** A globally-unique operation id: a per-site Lamport counter tagged with the site. */
+export interface OpId {
+  readonly site: SiteId;
+  readonly clock: number;
+}
+
+export function opId(site: SiteId, clock: number): OpId {
+  return { site, clock };
+}
+
+export function opIdEq(a: OpId, b: OpId): boolean {
+  return a.clock === b.clock && a.site === b.site;
+}
+
+/**
+ * Total order over op ids: higher clock wins; ties broken by site id. This is
+ * the deterministic tie-break every replica agrees on, so LWW and RGA converge.
+ */
+export function compareOpId(a: OpId, b: OpId): number {
+  if (a.clock !== b.clock)
+    return a.clock - b.clock;
+  return a.site < b.site ? -1 : a.site > b.site ? 1 : 0;
+}
+
+export function opIdToString(id: OpId): string {
+  return `${id.site}@${id.clock}`;
+}
+
+/** Generate a random site id (no crypto dependency; uniqueness, not secrecy). */
+export function createSiteId(): SiteId {
+  return Math.random().toString(36).slice(2, 10) + Math.random().toString(36).slice(2, 6);
+}
diff --git a/core/crdt/src/clock/index.ts b/core/crdt/src/clock/index.ts
new file mode 100644
index 0000000..6628fa1
--- /dev/null
+++ b/core/crdt/src/clock/index.ts
@@ -0,0 +1,3 @@
+export * from './id';
+export * from './lamport';
+export * from './version-vector';
diff --git a/core/crdt/src/clock/lamport.ts b/core/crdt/src/clock/lamport.ts
new file mode 100644
index 0000000..49826cd
--- /dev/null
+++ b/core/crdt/src/clock/lamport.ts
@@ -0,0 +1,29 @@
+import type { OpId, SiteId } from './id';
+
+/**
+ * A Lamport clock for one site: hands out monotonically increasing op ids and
+ * advances past observed remote ops so locally-generated ids stay causally later.
+ */
+export class LamportClock {
+  private counter: number;
+
+  constructor(public readonly site: SiteId, start = 0) {
+    this.counter = start;
+  }
+
+  /** Generate the next op id for a local operation. */
+  tick(): OpId {
+    this.counter += 1;
+    return { site: this.site, clock: this.counter };
+  }
+
+  /** Advance past a remote op so future local ticks are causally after it. */
+  observe(id: OpId): void {
+    if (id.clock > this.counter)
+      this.counter = id.clock;
+  }
+
+  get value(): number {
+    return this.counter;
+  }
+}
diff --git a/core/crdt/src/clock/version-vector.ts b/core/crdt/src/clock/version-vector.ts
new file mode 100644
index 0000000..079df9d
--- /dev/null
+++ b/core/crdt/src/clock/version-vector.ts
@@ -0,0 +1,41 @@
+import type { OpId, SiteId } from './id';
+
+/**
+ * Tracks the highest clock seen per site, assuming each site emits dense clocks
+ * (1, 2, 3, …). Used to deduplicate ops and to compute deltas during sync.
+ */
+export class VersionVector {
+  private readonly clocks = new Map<SiteId, number>();
+
+  /** Record that an op has been seen. */
+  observe(id: OpId): void {
+    if (id.clock > this.get(id.site))
+      this.clocks.set(id.site, id.clock);
+  }
+
+  /** Highest clock seen for a site (0 if none). */
+  get(site: SiteId): number {
+    return this.clocks.get(site) ?? 0;
+  }
+
+  /** Whether an op id has already been seen. */
+  has(id: OpId): boolean {
+    return this.get(id.site) >= id.clock;
+  }
+
+  /** Plain-object snapshot for transport. */
+  toJSON(): Record<SiteId, number> {
+    return Object.fromEntries(this.clocks);
+  }
+
+  static fromJSON(snapshot: Record<SiteId, number>): VersionVector {
+    const vv = new VersionVector();
+    for (const site in snapshot)
+      vv.clocks.set(site, snapshot[site]!);
+    return vv;
+  }
+
+  clone(): VersionVector {
+    return VersionVector.fromJSON(this.toJSON());
+  }
+}
diff --git a/core/crdt/src/doc/__test__/replica.test.ts b/core/crdt/src/doc/__test__/replica.test.ts
new file mode 100644
index 0000000..7cb9e9a
--- /dev/null
+++ b/core/crdt/src/doc/__test__/replica.test.ts
@@ -0,0 +1,61 @@
+import { describe, expect, it } from 'vitest';
+import type { OpId } from '../../clock';
+import { Rga } from '../../sequence';
+import { Replica } from '..';
+
+interface CharOp {
+  id: OpId;
+  originLeft: OpId | null;
+  value: string;
+}
+
+function makeReplica(site: string) {
+  const rga = new Rga<string>();
+  const replica = new Replica<CharOp>(
+    { integrate: op => rga.integrateInsert(op.id, op.value, op.originLeft) },
+    site,
+  );
+  return { rga, replica };
+}
+
+function type(peer: ReturnType<typeof makeReplica>, text: string): void {
+  let left: OpId | null = null;
+  for (const ch of text) {
+    const id = peer.replica.nextId();
+    peer.replica.commitLocal({ id, originLeft: left, value: ch });
+    left = id;
+  }
+}
+
+describe('replica', () => {
+  it('two replicas converge after exchanging deltas', () => {
+    const a = makeReplica('a');
+    const b = makeReplica('b');
+
+    type(a, 'Hi'); // concurrent edits
+    type(b, 'Yo');
+
+    // Exchange only what each side is missing (delta by version vector).
+    b.replica.receive(a.replica.delta(b.replica.version));
+    a.replica.receive(b.replica.delta(a.replica.version));
+
+    expect(a.rga.toArray().join('')).toBe(b.rga.toArray().join(''));
+    expect(a.rga.length).toBe(4);
+  });
+
+  it('buffers a remote op until its causal dependency arrives, then applies both', () => {
+    const a = makeReplica('a');
+    type(a, 'ab'); // two ops; the 2nd depends on the 1st
+
+    const b = makeReplica('b');
+    const [op1, op2] = a.replica.delta(b.replica.version) as CharOp[];
+
+    // Deliver the dependent op first — it must buffer.
+    b.replica.receive([op2!]);
+    expect(b.rga.toArray().join('')).toBe('');
+
+    // Now deliver the dependency — both integrate.
+    b.replica.receive([op1!]);
+    expect(b.rga.toArray().join('')).toBe('ab');
+  });
+});
diff --git a/core/crdt/src/doc/index.ts b/core/crdt/src/doc/index.ts
new file mode 100644
index 0000000..0f623f5
--- /dev/null
+++ b/core/crdt/src/doc/index.ts
@@ -0,0 +1 @@
+export * from './replica';
diff --git a/core/crdt/src/doc/replica.ts b/core/crdt/src/doc/replica.ts
new file mode 100644
index 0000000..186b91d
--- /dev/null
+++ b/core/crdt/src/doc/replica.ts
@@ -0,0 +1,102 @@
+import type { OpId, SiteId, VersionVector } from '../clock';
+import { LamportClock, createSiteId, opIdEq } from '../clock';
+import type { HasOpId } from '../oplog';
+import { OpLog } from '../oplog';
+
+export interface ReplicaHandlers<Op extends HasOpId> {
+  /**
+   * Apply an op to domain state (RGA, marks, block list, …). Return `false` if
+   * its causal dependencies aren't present yet; the replica buffers and retries.
+   */
+  integrate: (op: Op) => boolean;
+}
+
+export type UpdateListener<Op> = (ops: readonly Op[], origin: unknown) => void;
+
+/**
+ * Generic op-based CRDT replica: owns a Lamport clock + op log, integrates local
+ * and remote ops (with causal buffering and dedup), and exposes deltas for
+ * transport-agnostic sync. The domain state lives behind {@link ReplicaHandlers}.
+ */
+export class Replica<Op extends HasOpId> {
+  readonly site: SiteId;
+  private readonly clock: LamportClock;
+  private readonly log = new OpLog<Op>();
+  private readonly pending: Op[] = [];
+  private readonly listeners = new Set<UpdateListener<Op>>();
+
+  constructor(private readonly handlers: ReplicaHandlers<Op>, site: SiteId = createSiteId()) {
+    this.site = site;
+    this.clock = new LamportClock(site);
+  }
+
+  /** Next op id for a locally-generated operation. */
+  nextId(): OpId {
+    return this.clock.tick();
+  }
+
+  get version(): VersionVector {
+    return this.log.version;
+  }
+
+  /** Integrate + log a local op, then notify listeners (origin `'local'`). */
+  commitLocal(op: Op): void {
+    if (!this.log.append(op))
+      return;
+    this.handlers.integrate(op);
+    this.emit([op], 'local');
+  }
+
+  /**
+   * Receive remote ops: dedup, buffer until causally ready, integrate, log, and
+   * notify with the ops actually applied. Returns the applied ops (in apply order).
+   */
+  receive(ops: readonly Op[], origin: unknown = 'remote'): Op[] {
+    for (const op of ops) {
+      this.clock.observe(op.id);
+      if (!this.log.has(op.id) && !this.pending.some(p => opIdEq(p.id, op.id)))
+        this.pending.push(op);
+    }
+
+    const applied = this.drain();
+    if (applied.length > 0)
+      this.emit(applied, origin);
+    return applied;
+  }
+
+  private drain(): Op[] {
+    const applied: Op[] = [];
+    let progressed = true;
+
+    while (this.pending.length > 0 && progressed) {
+      progressed = false;
+      for (let i = this.pending.length - 1; i >= 0; i--) {
+        const op = this.pending[i]!;
+        if (this.handlers.integrate(op)) {
+          this.log.append(op);
+          this.pending.splice(i, 1);
+          applied.push(op);
+          progressed = true;
+        }
+      }
+    }
+
+    return applied;
+  }
+
+  /** Ops a remote replica (described by its version vector) is missing. */
+  delta(remote: VersionVector): Op[] {
+    return this.log.delta(remote);
+  }
+
+  /** Subscribe to applied ops (local + remote). Returns an unsubscribe fn. */
+  onUpdate(listener: UpdateListener<Op>): () => void {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+
+  private emit(ops: readonly Op[], origin: unknown): void {
+    for (const listener of this.listeners)
+      listener(ops, origin);
+  }
+}
diff --git a/core/crdt/src/index.ts b/core/crdt/src/index.ts
new file mode 100644
index 0000000..9b302f0
--- /dev/null
+++ b/core/crdt/src/index.ts
@@ -0,0 +1,8 @@
+export * from './clock';
+export * from './registers';
+export * from './ordering';
+export * from './sequence';
+export * from './marks';
+export * from './oplog';
+export * from './sync';
+export * from './doc';
diff --git a/core/crdt/src/marks/__test__/mark-store.test.ts b/core/crdt/src/marks/__test__/mark-store.test.ts
new file mode 100644
index 0000000..40be2b5
--- /dev/null
+++ b/core/crdt/src/marks/__test__/mark-store.test.ts
@@ -0,0 +1,33 @@
+import { describe, expect, it } from 'vitest';
+import { opId } from '../../clock';
+import { MarkStore } from '..';
+
+describe('markStore', () => {
+  it('resolves overlapping spans by highest op id per character/type', () => {
+    const chars = [opId('a', 1), opId('a', 2), opId('a', 3)];
+    const store = new MarkStore();
+    store.add({ id: opId('a', 10), type: 'bold', value: true, start: chars[0]!, end: chars[2]! });
+    store.add({ id: opId('a', 11), type: 'bold', value: null, start: chars[1]!, end: chars[1]! });
+
+    const active = store.resolve(chars);
+    expect(active[0]!.get('bold')).toBe(true);
+    expect(active[1]!.has('bold')).toBe(false); // cleared by the higher-id span
+    expect(active[2]!.get('bold')).toBe(true);
+  });
+
+  it('converges regardless of span insertion order', () => {
+    const chars = [opId('a', 1), opId('a', 2)];
+    const spanA = { id: opId('a', 10), type: 'bold', value: true, start: chars[0]!, end: chars[1]! };
+    const spanB = { id: opId('b', 10), type: 'bold', value: null, start: chars[0]!, end: chars[0]! };
+
+    const first = new MarkStore();
+    first.add(spanA);
+    first.add(spanB);
+    const second = new MarkStore();
+    second.add(spanB);
+    second.add(spanA);
+
+    expect(first.resolve(chars).map(m => m.get('bold')))
+      .toEqual(second.resolve(chars).map(m => m.get('bold')));
+  });
+});
diff --git a/core/crdt/src/marks/index.ts b/core/crdt/src/marks/index.ts
new file mode 100644
index 0000000..5c07250
--- /dev/null
+++ b/core/crdt/src/marks/index.ts
@@ -0,0 +1 @@
+export * from './mark-store';
diff --git a/core/crdt/src/marks/mark-store.ts b/core/crdt/src/marks/mark-store.ts
new file mode 100644
index 0000000..8860c74
--- /dev/null
+++ b/core/crdt/src/marks/mark-store.ts
@@ -0,0 +1,78 @@
+import type { OpId } from '../clock';
+import { compareOpId, opIdEq, opIdToString } from '../clock';
+
+/** A mark's value: `true`/attrs to apply, `null`/`false` to clear. JSON-serializable. */
+export type MarkValue = boolean | string | number | null | { readonly [key: string]: MarkValue };
+
+/**
+ * A formatting span anchored to character op ids (inclusive range), tagged with
+ * an op id for LWW conflict resolution — a lightweight Peritext mark.
+ */
+export interface MarkSpan {
+  readonly id: OpId;
+  readonly type: string;
+  readonly value: MarkValue;
+  readonly start: OpId;
+  readonly end: OpId;
+}
+
+/**
+ * Stores formatting spans and resolves them against a character order. For each
+ * (character, mark type) the covering span with the highest op id wins, so
+ * concurrent formatting converges; a `null`/`false` value clears the mark.
+ */
+export class MarkStore {
+  private spans: MarkSpan[] = [];
+
+  add(span: MarkSpan): boolean {
+    if (this.has(span.id))
+      return false;
+    this.spans.push(span);
+    return true;
+  }
+
+  has(id: OpId): boolean {
+    return this.spans.some(span => opIdEq(span.id, id));
+  }
+
+  all(): readonly MarkSpan[] {
+    return this.spans;
+  }
+
+  /**
+   * Active marks for each character, given the character ids in document order.
+   * Returns one `type → value` map per index.
+   */
+  resolve(order: readonly OpId[]): Array<Map<string, MarkValue>> {
+    const indexOf = new Map<string, number>();
+    order.forEach((id, i) => indexOf.set(opIdToString(id), i));
+
+    const active: Array<Map<string, MarkValue>> = order.map(() => new Map());
+    const winner: Array<Map<string, OpId>> = order.map(() => new Map());
+
+    for (const span of this.spans) {
+      const startIndex = indexOf.get(opIdToString(span.start));
+      const endIndex = indexOf.get(opIdToString(span.end));
+
+      if (startIndex === undefined || endIndex === undefined)
+        continue;
+
+      const lo = Math.min(startIndex, endIndex);
+      const hi = Math.max(startIndex, endIndex);
+
+      for (let i = lo; i <= hi; i++) {
+        const current = winner[i]!.get(span.type);
+        if (current && compareOpId(span.id, current) <= 0)
+          continue;
+
+        winner[i]!.set(span.type, span.id);
+        if (span.value === null || span.value === false)
+          active[i]!.delete(span.type);
+        else
+          active[i]!.set(span.type, span.value);
+      }
+    }
+
+    return active;
+  }
+}
diff --git a/core/crdt/src/oplog/index.ts b/core/crdt/src/oplog/index.ts
new file mode 100644
index 0000000..9ebd233
--- /dev/null
+++ b/core/crdt/src/oplog/index.ts
@@ -0,0 +1 @@
+export * from './op-log';
diff --git a/core/crdt/src/oplog/op-log.ts b/core/crdt/src/oplog/op-log.ts
new file mode 100644
index 0000000..c287f52
--- /dev/null
+++ b/core/crdt/src/oplog/op-log.ts
@@ -0,0 +1,43 @@
+import type { OpId } from '../clock';
+import { VersionVector } from '../clock';
+
+/** Anything carrying an op id can live in the log. */
+export interface HasOpId {
+  readonly id: OpId;
+}
+
+/**
+ * An append-only log of operations with a version vector for deduplication and
+ * delta computation. The op shape is domain-specific; the log only reads `id`.
+ */
+export class OpLog<Op extends HasOpId> {
+  private readonly ops: Op[] = [];
+  private readonly vv = new VersionVector();
+
+  /** Append an op unless already seen. Returns `true` if appended. */
+  append(op: Op): boolean {
+    if (this.vv.has(op.id))
+      return false;
+
+    this.ops.push(op);
+    this.vv.observe(op.id);
+    return true;
+  }
+
+  has(id: OpId): boolean {
+    return this.vv.has(id);
+  }
+
+  get version(): VersionVector {
+    return this.vv;
+  }
+
+  all(): readonly Op[] {
+    return this.ops;
+  }
+
+  /** Ops a remote replica (described by its version vector) hasn't seen. */
+  delta(remote: VersionVector): Op[] {
+    return this.ops.filter(op => !remote.has(op.id));
+  }
+}
diff --git a/core/crdt/src/ordering/__test__/fractional-index.test.ts b/core/crdt/src/ordering/__test__/fractional-index.test.ts
new file mode 100644
index 0000000..31811ba
--- /dev/null
+++ b/core/crdt/src/ordering/__test__/fractional-index.test.ts
@@ -0,0 +1,47 @@
+import { describe, expect, it } from 'vitest';
+import { keyBetween, keysBetween } from '..';
+
+function seeded(seed: number): () => number {
+  let state = seed >>> 0;
+  return () => {
+    state = (state * 1664525 + 1013904223) >>> 0;
+    return state / 0xFFFFFFFF;
+  };
+}
+
+describe('keyBetween', () => {
+  it('produces a key strictly between its bounds', () => {
+    const a = keyBetween(null, null);
+    const b = keyBetween(a, null);
+    expect(b > a).toBe(true);
+    const mid = keyBetween(a, b);
+    expect(mid > a && mid < b).toBe(true);
+  });
+
+  it('rejects an inverted range', () => {
+    expect(() => keyBetween('b', 'a')).toThrow();
+  });
+
+  it('keysBetween returns n ascending keys within the bounds', () => {
+    const keys = keysBetween('a', 'b', 5);
+    expect(keys).toHaveLength(5);
+    for (let i = 1; i < keys.length; i++)
+      expect(keys[i - 1]! < keys[i]!).toBe(true);
+    expect(keys[0]! > 'a' && keys[keys.length - 1]! < 'b').toBe(true);
+  });
+
+  it('stays strictly ordered under 300 random insertions', () => {
+    const rng = seeded(7);
+    const keys: string[] = [keyBetween(null, null)];
+
+    for (let i = 0; i < 300; i++) {
+      const pos = Math.floor(rng() * (keys.length + 1));
+      const lower = pos > 0 ? keys[pos - 1]! : null;
+      const upper = pos < keys.length ? keys[pos]! : null;
+      keys.splice(pos, 0, keyBetween(lower, upper));
+    }
+
+    for (let i = 1; i < keys.length; i++)
+      expect(keys[i - 1]! < keys[i]!).toBe(true);
+  });
+});
diff --git a/core/crdt/src/ordering/fractional-index.ts b/core/crdt/src/ordering/fractional-index.ts
new file mode 100644
index 0000000..7b07b24
--- /dev/null
+++ b/core/crdt/src/ordering/fractional-index.ts
@@ -0,0 +1,54 @@
+/**
+ * Fractional indexing: generate string "order keys" so an element can be placed
+ * strictly between two neighbors with a single key, and re-ordered (moved) by
+ * just changing its key — without touching anything else. The digit alphabet is
+ * ASCII-ascending, so JavaScript string comparison matches digit order.
+ */
+const DIGITS = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+
+function midpoint(a: string, b: string): string {
+  if (b !== '' && a >= b)
+    throw new Error(`fractional-index: lower '${a}' must be < upper '${b}'`);
+
+  let result = '';
+  let i = 0;
+  let upper = b;
+
+  for (;;) {
+    const x = i < a.length ? DIGITS.indexOf(a[i]!) : 0;
+    const y = upper !== '' && i < upper.length ? DIGITS.indexOf(upper[i]!) : DIGITS.length;
+
+    if (x === y) {
+      result += DIGITS[x]!;
+      i += 1;
+      continue;
+    }
+
+    const mid = x + Math.floor((y - x) / 2);
+    if (mid !== x)
+      return result + DIGITS[mid]!;
+
+    // Digits are adjacent — keep the lower digit and open the upper bound.
+    result += DIGITS[x]!;
+    i += 1;
+    upper = '';
+  }
+}
+
+/** A key strictly between `lower` and `upper` (`null` = open bound). */
+export function keyBetween(lower: string | null, upper: string | null): string {
+  return midpoint(lower ?? '', upper ?? '');
+}
+
+/** `n` keys strictly between `lower` and `upper`, in ascending order. */
+export function keysBetween(lower: string | null, upper: string | null, n: number): string[] {
+  if (n <= 0)
+    return [];
+  if (n === 1)
+    return [keyBetween(lower, upper)];
+
+  const mid = keyBetween(lower, upper);
+  const left = keysBetween(lower, mid, Math.floor((n - 1) / 2));
+  const right = keysBetween(mid, upper, n - 1 - left.length);
+  return [...left, mid, ...right];
+}
diff --git a/core/crdt/src/ordering/index.ts b/core/crdt/src/ordering/index.ts
new file mode 100644
index 0000000..ffffefa
--- /dev/null
+++ b/core/crdt/src/ordering/index.ts
@@ -0,0 +1 @@
+export * from './fractional-index';
diff --git a/core/crdt/src/registers/__test__/lww.test.ts b/core/crdt/src/registers/__test__/lww.test.ts
new file mode 100644
index 0000000..dc1f387
--- /dev/null
+++ b/core/crdt/src/registers/__test__/lww.test.ts
@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest';
+import { opId } from '../../clock';
+import { LwwMap, LwwRegister } from '..';
+
+describe('lwwRegister', () => {
+  it('keeps the write with the higher op id regardless of order', () => {
+    const a = new LwwRegister('init');
+    a.set('first', opId('a', 1));
+    a.set('second', opId('b', 2));
+    expect(a.get()).toBe('second');
+
+    // A later-arriving but older write must not win.
+    expect(a.set('stale', opId('a', 1))).toBe(false);
+    expect(a.get()).toBe('second');
+  });
+
+  it('converges when concurrent writes arrive in opposite orders', () => {
+    const left = new LwwRegister('x');
+    const right = new LwwRegister('x');
+    left.set('A', opId('a', 5));
+    left.set('B', opId('b', 5));
+    right.set('B', opId('b', 5));
+    right.set('A', opId('a', 5));
+    expect(left.get()).toBe(right.get());
+    expect(left.get()).toBe('B'); // site 'b' > 'a' at equal clock
+  });
+});
+
+describe('lwwMap', () => {
+  it('handles set/delete with tombstones', () => {
+    const map = new LwwMap<string, number>();
+    map.set('k', 1, opId('a', 1));
+    expect(map.get('k')).toBe(1);
+    map.delete('k', opId('a', 2));
+    expect(map.has('k')).toBe(false);
+    // A concurrent older set loses to the delete.
+    expect(map.set('k', 9, opId('a', 1))).toBe(false);
+    expect(map.has('k')).toBe(false);
+  });
+});
diff --git a/core/crdt/src/registers/index.ts b/core/crdt/src/registers/index.ts
new file mode 100644
index 0000000..3ab638b
--- /dev/null
+++ b/core/crdt/src/registers/index.ts
@@ -0,0 +1,2 @@
+export * from './lww-register';
+export * from './lww-map';
diff --git a/core/crdt/src/registers/lww-map.ts b/core/crdt/src/registers/lww-map.ts
new file mode 100644
index 0000000..33a0583
--- /dev/null
+++ b/core/crdt/src/registers/lww-map.ts
@@ -0,0 +1,52 @@
+import type { OpId } from '../clock';
+import { compareOpId } from '../clock';
+
+interface Entry<V> {
+  value: V;
+  ts: OpId;
+  deleted: boolean;
+}
+
+/**
+ * Last-writer-wins map with per-key timestamps and tombstones. Concurrent
+ * set/delete on a key converge to the operation with the higher op id.
+ */
+export class LwwMap<K, V> {
+  private readonly entries = new Map<K, Entry<V>>();
+
+  set(key: K, value: V, id: OpId): boolean {
+    const existing = this.entries.get(key);
+    if (existing && compareOpId(id, existing.ts) <= 0)
+      return false;
+
+    this.entries.set(key, { value, ts: id, deleted: false });
+    return true;
+  }
+
+  delete(key: K, id: OpId): boolean {
+    const existing = this.entries.get(key);
+    if (existing && compareOpId(id, existing.ts) <= 0)
+      return false;
+
+    this.entries.set(key, { value: existing?.value as V, ts: id, deleted: true });
+    return true;
+  }
+
+  get(key: K): V | undefined {
+    const entry = this.entries.get(key);
+    return entry && !entry.deleted ? entry.value : undefined;
+  }
+
+  has(key: K): boolean {
+    const entry = this.entries.get(key);
+    return entry !== undefined && !entry.deleted;
+  }
+
+  keys(): K[] {
+    return [...this.entries].filter(([, entry]) => !entry.deleted).map(([key]) => key);
+  }
+
+  toEntries(): Array<[K, V]> {
+    return [...this.entries].filter(([, entry]) => !entry.deleted).map(([key, entry]) => [key, entry.value]);
+  }
+}
diff --git a/core/crdt/src/registers/lww-register.ts b/core/crdt/src/registers/lww-register.ts
new file mode 100644
index 0000000..9c8a576
--- /dev/null
+++ b/core/crdt/src/registers/lww-register.ts
@@ -0,0 +1,31 @@
+import type { OpId } from '../clock';
+import { compareOpId } from '../clock';
+
+/**
+ * Last-writer-wins register. A write applies only if its op id is later than the
+ * current write's (by {@link compareOpId}), so concurrent writes converge to the
+ * one with the higher timestamp regardless of arrival order.
+ */
+export class LwwRegister<T> {
+  private ts: OpId | null = null;
+
+  constructor(private current: T) {}
+
+  get(): T {
+    return this.current;
+  }
+
+  /** Apply a timestamped write. Returns `true` if it won. */
+  set(value: T, id: OpId): boolean {
+    if (this.ts !== null && compareOpId(id, this.ts) <= 0)
+      return false;
+
+    this.current = value;
+    this.ts = id;
+    return true;
+  }
+
+  get timestamp(): OpId | null {
+    return this.ts;
+  }
+}
diff --git a/core/crdt/src/sequence/__test__/rga.test.ts b/core/crdt/src/sequence/__test__/rga.test.ts
new file mode 100644
index 0000000..ebfdf63
--- /dev/null
+++ b/core/crdt/src/sequence/__test__/rga.test.ts
@@ -0,0 +1,127 @@
+import { describe, expect, it } from 'vitest';
+import type { OpId } from '../../clock';
+import { VersionVector, opId, opIdEq } from '../../clock';
+import { Rga } from '..';
+
+type Op
+  = | { kind: 'insert'; id: OpId; value: string; originLeft: OpId | null }
+    | { kind: 'delete'; id: OpId };
+
+/** Apply ops in the given order, buffering and retrying any whose causal deps aren't met. */
+function applyAll(rga: Rga<string>, ops: readonly Op[]): void {
+  const pending = [...ops];
+  let progressed = true;
+
+  while (pending.length > 0 && progressed) {
+    progressed = false;
+    for (let i = pending.length - 1; i >= 0; i--) {
+      const op = pending[i]!;
+      const applied = op.kind === 'insert'
+        ? rga.integrateInsert(op.id, op.value, op.originLeft)
+        : rga.integrateDelete(op.id);
+      if (applied) {
+        pending.splice(i, 1);
+        progressed = true;
+      }
+    }
+  }
+}
+
+function seeded(seed: number): () => number {
+  let state = seed >>> 0;
+  return () => {
+    state = (state * 1664525 + 1013904223) >>> 0;
+    return state / 0xFFFFFFFF;
+  };
+}
+
+function shuffle<T>(items: readonly T[], rng: () => number): T[] {
+  const out = [...items];
+  for (let i = out.length - 1; i > 0; i--) {
+    const j = Math.floor(rng() * (i + 1));
+    [out[i], out[j]] = [out[j]!, out[i]!];
+  }
+  return out;
+}
+
+describe('rga', () => {
+  it('orders concurrent inserts at the same origin higher-op-id-first', () => {
+    const opA: Op = { kind: 'insert', id: opId('a', 1), value: 'X', originLeft: null };
+    const opB: Op = { kind: 'insert', id: opId('b', 1), value: 'Y', originLeft: null };
+
+    const first = new Rga<string>();
+    applyAll(first, [opA, opB]);
+    const second = new Rga<string>();
+    applyAll(second, [opB, opA]);
+
+    expect(first.toArray()).toEqual(['Y', 'X']); // site 'b' > 'a' at equal clock
+    expect(second.toArray()).toEqual(first.toArray());
+  });
+
+  it('is idempotent under re-applied ops', () => {
+    const rga = new Rga<string>();
+    const op: Op = { kind: 'insert', id: opId('a', 1), value: 'X', originLeft: null };
+    applyAll(rga, [op, op, op]);
+    expect(rga.toArray()).toEqual(['X']);
+  });
+
+  it('converges across two replicas for random concurrent ops + deletes', () => {
+    for (let trial = 0; trial < 25; trial++) {
+      const rng = seeded(trial + 1);
+      const sites = ['a', 'b', 'c'];
+      const counters: Record<string, number> = { a: 0, b: 0, c: 0 };
+      const inserted: Array<{ id: OpId; value: string }> = [];
+      const ops: Op[] = [];
+
+      for (let i = 0; i < 40; i++) {
+        const site = sites[Math.floor(rng() * sites.length)]!;
+        const makeDelete = inserted.length > 0 && rng() < 0.25;
+
+        if (makeDelete) {
+          const target = inserted[Math.floor(rng() * inserted.length)]!;
+          ops.push({ kind: 'delete', id: target.id });
+        }
+        else {
+          counters[site] = counters[site]! + 1;
+          const id = opId(site, counters[site]!);
+          const originLeft = inserted.length > 0 && rng() < 0.8
+            ? inserted[Math.floor(rng() * inserted.length)]!.id
+            : null;
+          ops.push({ kind: 'insert', id, value: `${site}${counters[site]}`, originLeft });
+          inserted.push({ id, value: `${site}${counters[site]}` });
+        }
+      }
+
+      const replicaOrder = new Rga<string>();
+      applyAll(replicaOrder, ops);
+
+      const replicaShuffled = new Rga<string>();
+      applyAll(replicaShuffled, shuffle(ops, rng));
+
+      expect(replicaShuffled.toArray()).toEqual(replicaOrder.toArray());
+    }
+  });
+
+  it('gc drops stable tombstones, keeps live/protected/unstable ones', () => {
+    const rga = new Rga<string>();
+    applyAll(rga, [
+      { kind: 'insert', id: opId('a', 1), value: 'a', originLeft: null },
+      { kind: 'insert', id: opId('a', 2), value: 'b', originLeft: opId('a', 1) },
+      { kind: 'insert', id: opId('a', 3), value: 'c', originLeft: opId('a', 2) },
+    ]);
+    rga.integrateDelete(opId('a', 2)); // tombstone 'b'
+    rga.integrateDelete(opId('a', 3)); // tombstone 'c'
+    expect(rga.toArray().join('')).toBe('a');
+
+    const stable = new VersionVector();
+    stable.observe(opId('a', 2)); // only ops up to a@2 are stable everywhere
+
+    // a@2 tombstone is dropped; a@3 is unstable (kept); 'c' protected via keep.
+    const removed = rga.gc(stable, id => opIdEq(id, opId('a', 3)));
+    expect(removed).toBe(1);
+    expect(rga.has(opId('a', 2))).toBe(false);
+    expect(rga.has(opId('a', 3))).toBe(true);
+    expect(rga.has(opId('a', 1))).toBe(true); // live, never dropped
+    expect(rga.toArray().join('')).toBe('a');
+  });
+});
diff --git a/core/crdt/src/sequence/index.ts b/core/crdt/src/sequence/index.ts
new file mode 100644
index 0000000..3189031
--- /dev/null
+++ b/core/crdt/src/sequence/index.ts
@@ -0,0 +1 @@
+export * from './rga';
diff --git a/core/crdt/src/sequence/rga.ts b/core/crdt/src/sequence/rga.ts
new file mode 100644
index 0000000..9d793f7
--- /dev/null
+++ b/core/crdt/src/sequence/rga.ts
@@ -0,0 +1,111 @@
+import type { OpId, VersionVector } from '../clock';
+import { compareOpId, opIdEq } from '../clock';
+
+/** One element of an RGA sequence (visible or tombstoned). */
+export interface RgaNode<T> {
+  readonly id: OpId;
+  readonly value: T;
+  readonly originLeft: OpId | null;
+  deleted: boolean;
+}
+
+/**
+ * Replicated Growable Array — a sequence CRDT. Each element is inserted after a
+ * left-origin element (or at the start) and tombstoned on delete. Concurrent
+ * inserts at the same origin are ordered higher-op-id-first, a deterministic
+ * tie-break that makes every replica converge to the same order. Operations must
+ * be integrated in causal order (an insert's origin must already be present);
+ * {@link integrateInsert} returns `false` when the origin is missing so the
+ * caller can buffer and retry.
+ */
+export class Rga<T> {
+  private nodes: Array<RgaNode<T>> = [];
+
+  private nodeIndex(id: OpId): number {
+    for (let i = 0; i < this.nodes.length; i++) {
+      if (opIdEq(this.nodes[i]!.id, id))
+        return i;
+    }
+    return -1;
+  }
+
+  has(id: OpId): boolean {
+    return this.nodeIndex(id) !== -1;
+  }
+
+  /** Integrate an insert after `originLeft` (`null` = start). Idempotent. */
+  integrateInsert(id: OpId, value: T, originLeft: OpId | null): boolean {
+    if (this.has(id))
+      return true;
+
+    const originIndex = originLeft === null ? -1 : this.nodeIndex(originLeft);
+    if (originLeft !== null && originIndex === -1)
+      return false; // origin not present yet — caller should buffer
+
+    let i = originIndex + 1;
+    while (i < this.nodes.length && compareOpId(this.nodes[i]!.id, id) > 0)
+      i += 1;
+
+    this.nodes.splice(i, 0, { id, value, originLeft, deleted: false });
+    return true;
+  }
+
+  /** Tombstone an element. Idempotent; returns false if the element is unknown. */
+  integrateDelete(id: OpId): boolean {
+    const index = this.nodeIndex(id);
+    if (index === -1)
+      return false;
+
+    this.nodes[index]!.deleted = true;
+    return true;
+  }
+
+  /**
+   * Drop tombstoned nodes whose insert is covered by `stable`. Call ONLY at
+   * quiescence — when every replica has fully synced and no operations are in
+   * flight — otherwise a late op that uses a dropped node as its origin can no
+   * longer integrate. `keep` protects ids still referenced elsewhere (e.g. mark
+   * span endpoints). Returns the number of nodes removed.
+   */
+  gc(stable: VersionVector, keep?: (id: OpId) => boolean): number {
+    const before = this.nodes.length;
+    this.nodes = this.nodes.filter(node =>
+      !node.deleted || !stable.has(node.id) || (keep?.(node.id) ?? false));
+    return before - this.nodes.length;
+  }
+
+  /** Visible values in document order. */
+  toArray(): T[] {
+    const out: T[] = [];
+    for (const node of this.nodes) {
+      if (!node.deleted)
+        out.push(node.value);
+    }
+    return out;
+  }
+
+  /** Visible nodes in document order (read ids for cursor anchoring). */
+  visible(): Array<RgaNode<T>> {
+    return this.nodes.filter(node => !node.deleted);
+  }
+
+  /** All nodes including tombstones (for state encoding). */
+  all(): ReadonlyArray<RgaNode<T>> {
+    return this.nodes;
+  }
+
+  /** Op id of the visible element at `index`, or `null` if out of range. */
+  idAt(index: number): OpId | null {
+    return this.visible()[index]?.id ?? null;
+  }
+
+  /** Number of visible elements. */
+  get length(): number {
+    let count = 0;
+    for (const node of this.nodes) {
+      if (!node.deleted)
+        count += 1;
+    }
+    return count;
+  }
+}
diff --git a/core/crdt/src/sync/__test__/encode.test.ts b/core/crdt/src/sync/__test__/encode.test.ts
new file mode 100644
index 0000000..c043d0a
--- /dev/null
+++ b/core/crdt/src/sync/__test__/encode.test.ts
@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vitest';
+import { VersionVector, opId } from '../../clock';
+import { decodeOps, decodeStateVector, encodeOps, encodeStateVector } from '..';
+
+describe('sync encoding', () => {
+  it('round-trips a version vector through bytes', () => {
+    const vv = new VersionVector();
+    vv.observe(opId('a', 3));
+    vv.observe(opId('b', 1));
+
+    const restored = decodeStateVector(encodeStateVector(vv));
+    expect(restored.get('a')).toBe(3);
+    expect(restored.get('b')).toBe(1);
+  });
+
+  it('round-trips an op batch through bytes', () => {
+    const ops = [{ id: opId('a', 1), kind: 'insert', value: 'x' }];
+    expect(decodeOps(encodeOps(ops))).toEqual(ops);
+  });
+});
diff --git a/core/crdt/src/sync/encode.ts b/core/crdt/src/sync/encode.ts
new file mode 100644
index 0000000..299ea16
--- /dev/null
+++ b/core/crdt/src/sync/encode.ts
@@ -0,0 +1,34 @@
+import { VersionVector } from '../clock';
+
+const encoder = new TextEncoder();
+const decoder = new TextDecoder();
+
+/**
+ * Transport-agnostic wire encoding. v1 is JSON-over-bytes — simple and
+ * debuggable; a compact varint format is a later optimization with no API change.
+ */
+export function encodeJson(value: unknown): Uint8Array {
+  return encoder.encode(JSON.stringify(value));
+}
+
+export function decodeJson<T>(bytes: Uint8Array): T {
+  return JSON.parse(decoder.decode(bytes)) as T;
+}
+
+/** Encode a version vector for a "what do you have?" sync handshake. */
+export function encodeStateVector(vv: VersionVector): Uint8Array {
+  return encodeJson(vv.toJSON());
+}
+
+export function decodeStateVector(bytes: Uint8Array): VersionVector {
+  return VersionVector.fromJSON(decodeJson(bytes));
+}
+
+/** Encode a batch of ops (the delta or a full snapshot). */
+export function encodeOps<Op>(ops: readonly Op[]): Uint8Array {
+  return encodeJson(ops);
+}
+
+export function decodeOps<Op>(bytes: Uint8Array): Op[] {
+  return decodeJson<Op[]>(bytes);
+}
diff --git a/core/crdt/src/sync/index.ts b/core/crdt/src/sync/index.ts
new file mode 100644
index 0000000..a447c57
--- /dev/null
+++ b/core/crdt/src/sync/index.ts
@@ -0,0 +1 @@
+export * from './encode';
diff --git a/core/crdt/tsconfig.json b/core/crdt/tsconfig.json
new file mode 100644
index 0000000..2781e66
--- /dev/null
+++ b/core/crdt/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.src.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/core/crdt/tsconfig.node.json b/core/crdt/tsconfig.node.json
new file mode 100644
index 0000000..edc474f
--- /dev/null
+++ b/core/crdt/tsconfig.node.json
@@ -0,0 +1,8 @@
+{
+  "extends": "@robonen/tsconfig/tsconfig.node.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo"
+  },
+  "include": ["*.config.ts"]
+}
diff --git a/core/crdt/tsconfig.src.json b/core/crdt/tsconfig.src.json
new file mode 100644
index 0000000..04b066e
--- /dev/null
+++ b/core/crdt/tsconfig.src.json
@@ -0,0 +1,9 @@
+{
+  "extends": "@robonen/tsconfig/tsconfig.base.json",
+  "compilerOptions": {
+    "composite": true,
+    "types": ["node"],
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.src.tsbuildinfo"
+  },
+  "include": ["src/**/*.ts"]
+}
diff --git a/core/crdt/tsdown.config.ts b/core/crdt/tsdown.config.ts
new file mode 100644
index 0000000..6e391e5
--- /dev/null
+++ b/core/crdt/tsdown.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from 'tsdown';
+import { sharedConfig } from '@robonen/tsdown';
+
+export default defineConfig({
+  ...sharedConfig,
+  tsconfig: './tsconfig.src.json',
+  entry: ['src/index.ts'],
+});
diff --git a/core/crdt/vitest.config.ts b/core/crdt/vitest.config.ts
new file mode 100644
index 0000000..4ac6027
--- /dev/null
+++ b/core/crdt/vitest.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    environment: 'node',
+  },
+});
diff --git a/core/encoding/docs/intro.vue b/core/encoding/docs/intro.vue
new file mode 100644
index 0000000..e60161b
--- /dev/null
+++ b/core/encoding/docs/intro.vue
@@ -0,0 +1,147 @@
+<script setup lang="ts">
+// Landing hero for @robonen/encoding. Static content only — no live demo,
+// so nothing here touches the DOM or runs at setup top-level.
+</script>
+
+<template>
+  <div class="docs-section">
+    <!-- Hero -->
+    <div class="prose-docs">
+      <h1>@robonen/encoding</h1>
+      <p>
+        Encoding utilities for TypeScript — a dependency-free QR Code generator
+        and the Reed-Solomon error-correction primitives that power it.
+      </p>
+    </div>
+
+    <div class="prose-docs">
+      <p>
+        Generating a QR Code correctly is deceptively hard: segment-mode selection,
+        version sizing, Reed-Solomon ECC over a finite field, block interleaving, and
+        the eight masking patterns each have to be just right for a scanner to read the
+        result. <code>@robonen/encoding</code> packages all of that into a small set of
+        pure functions and immutable classes, with zero runtime dependencies and an
+        output you render however you like — SVG, canvas, a DOM grid, or a terminal.
+      </p>
+    </div>
+
+    <!-- Feature cards -->
+    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-5">
+        <h3 class="text-sm font-semibold text-(--fg)">High-level QR in one call</h3>
+        <p class="mt-1.5 text-sm text-(--fg-muted)">
+          <code>encodeText</code> and <code>encodeBinary</code> pick the smallest
+          version and optimal segment modes for you, then hand back an immutable
+          <code>QrCode</code> grid.
+        </p>
+      </div>
+
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-5">
+        <h3 class="text-sm font-semibold text-(--fg)">Render-agnostic output</h3>
+        <p class="mt-1.5 text-sm text-(--fg-muted)">
+          A <code>QrCode</code> is just a square of modules. Read each one with
+          <code>getModule(x, y)</code> and draw to SVG, canvas, or anything else —
+          no rendering opinions baked in.
+        </p>
+      </div>
+
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-5">
+        <h3 class="text-sm font-semibold text-(--fg)">Standalone Reed-Solomon</h3>
+        <p class="mt-1.5 text-sm text-(--fg-muted)">
+          The GF(2^8) error-correction core — <code>multiply</code>,
+          <code>computeDivisor</code>, <code>computeRemainder</code> — is exported
+          on its own, reusable beyond QR.
+        </p>
+      </div>
+
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-5">
+        <h3 class="text-sm font-semibold text-(--fg)">Zero dependencies, fully typed</h3>
+        <p class="mt-1.5 text-sm text-(--fg-muted)">
+          Tree-shakeable ESM and CJS builds with no third-party runtime deps, hot
+          loops backed by typed arrays, and end-to-end TypeScript types.
+        </p>
+      </div>
+    </div>
+
+    <!-- Install -->
+    <div class="prose-docs">
+      <h2>Install</h2>
+    </div>
+
+    <DocsCode :code="`pnpm add @robonen/encoding`" lang="bash" />
+
+    <!-- Usage -->
+    <div class="prose-docs">
+      <h2>Quick start</h2>
+      <p>
+        Encode a string into a <code>QrCode</code> and walk its modules to render
+        it. <code>EccMap.M</code> selects the medium (~15% recovery) error-correction
+        level; <code>EccMap.L</code>, <code>.Q</code>, and <code>.H</code> are also
+        available.
+      </p>
+    </div>
+
+    <DocsCode lang="ts" :code="quickStart" />
+
+    <div class="prose-docs">
+      <p>
+        Need raw error-correction codewords without the QR machinery? The
+        Reed-Solomon primitives stand on their own:
+      </p>
+    </div>
+
+    <DocsCode lang="ts" :code="reedSolomon" />
+
+    <!-- Where to next -->
+    <div class="prose-docs">
+      <h2>Where to next</h2>
+      <ul>
+        <li>
+          <NuxtLink to="/encoding/encode-text">encodeText</NuxtLink> and
+          <NuxtLink to="/encoding/encode-binary">encodeBinary</NuxtLink> — the
+          high-level entry points for text and binary payloads.
+        </li>
+        <li>
+          <NuxtLink to="/encoding/encode-segments">encodeSegments</NuxtLink> — the
+          mid-level API for mixed-mode payloads and version/mask control.
+        </li>
+        <li>
+          <NuxtLink to="/encoding/qr-code">QrCode</NuxtLink> — the immutable grid,
+          with <code>size</code>, <code>getModule</code>, and <code>getType</code>.
+        </li>
+        <li>
+          <NuxtLink to="/encoding/compute-remainder">computeRemainder</NuxtLink> and
+          <NuxtLink to="/encoding/compute-divisor">computeDivisor</NuxtLink> — the
+          standalone Reed-Solomon core.
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+const quickStart = `import { encodeText, EccMap } from '@robonen/encoding';
+
+// Smallest version + optimal segment modes are chosen automatically.
+const qr = encodeText('https://robonen.dev', EccMap.M);
+
+console.log(qr.size); // module count per side (21..177)
+
+// Render however you like — here, plain text:
+let out = '';
+for (let y = 0; y < qr.size; y++) {
+  for (let x = 0; x < qr.size; x++)
+    out += qr.getModule(x, y) ? '##' : '  ';
+  out += '\\n';
+}
+console.log(out);`
+
+const reedSolomon = `import { computeDivisor, computeRemainder } from '@robonen/encoding';
+
+// Build a degree-10 generator polynomial over GF(2^8/0x11D)...
+const divisor = computeDivisor(10);
+
+// ...then derive the 10 error-correction codewords for your data block.
+const data = [0x40, 0xd2, 0x75, 0x47, 0x76, 0x17, 0x32, 0x06, 0x27, 0x26];
+const ecc = computeRemainder(data, divisor); // Uint8Array(10)`
+</script>
diff --git a/core/encoding/eslint.config.ts b/core/encoding/eslint.config.ts
new file mode 100644
index 0000000..78536c2
--- /dev/null
+++ b/core/encoding/eslint.config.ts
@@ -0,0 +1,13 @@
+import { base, compose, imports, stylistic, typescript } from '@robonen/eslint';
+
+export default compose(base, typescript, imports, stylistic, {
+  name: 'encoding/overrides',
+  files: ['src/qr/qr-code.ts'],
+  rules: {
+    '@stylistic/max-statements-per-line': 'off',
+    '@stylistic/no-mixed-operators': 'off',
+    /* Uniform sliding-window register shift (h6 = h5; h5 = h4; …) where the
+       oldest register's seed/last write is intentionally dead — keep symmetry. */
+    'no-useless-assignment': 'off',
+  },
+});
diff --git a/core/encoding/jsr.json b/core/encoding/jsr.json
new file mode 100644
index 0000000..4491833
--- /dev/null
+++ b/core/encoding/jsr.json
@@ -0,0 +1,6 @@
+{
+    "$schema": "https://jsr.io/schema/config-file.v1.json",
+    "name": "@robonen/encoding",
+    "version": "0.0.1",
+    "exports": "./src/index.ts"
+}
diff --git a/core/encoding/package.json b/core/encoding/package.json
new file mode 100644
index 0000000..044568d
--- /dev/null
+++ b/core/encoding/package.json
@@ -0,0 +1,51 @@
+{
+  "name": "@robonen/encoding",
+  "version": "0.0.1",
+  "license": "Apache-2.0",
+  "description": "Encoding utilities for TypeScript",
+  "keywords": [
+    "encoding",
+    "tools"
+  ],
+  "author": "Robonen Andrew <robonenandrew@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/robonen/tools.git",
+    "directory": "core/encoding"
+  },
+  "packageManager": "pnpm@10.33.2",
+  "engines": {
+    "node": ">=24.13.1"
+  },
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "scripts": {
+    "lint:check": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "test": "vitest run",
+    "dev": "vitest dev",
+    "bench": "vitest bench",
+    "build": "tsdown"
+  },
+  "devDependencies": {
+    "@robonen/eslint": "workspace:*",
+    "@robonen/tsconfig": "workspace:*",
+    "@robonen/tsdown": "workspace:*",
+    "eslint": "catalog:",
+    "tsdown": "catalog:"
+  }
+}
diff --git a/core/encoding/src/index.ts b/core/encoding/src/index.ts
new file mode 100644
index 0000000..0de9894
--- /dev/null
+++ b/core/encoding/src/index.ts
@@ -0,0 +1,2 @@
+export * from './reed-solomon';
+export * from './qr';
diff --git a/core/encoding/src/qr/__test__/index.bench.ts b/core/encoding/src/qr/__test__/index.bench.ts
new file mode 100644
index 0000000..ca1df65
--- /dev/null
+++ b/core/encoding/src/qr/__test__/index.bench.ts
@@ -0,0 +1,96 @@
+import { bench, describe } from 'vitest';
+import { EccMap, LOW, encodeBinary, encodeSegments, encodeText, makeSegments } from '..';
+
+/* -- Test data -- */
+
+const SHORT_TEXT = 'Hello';
+const MEDIUM_TEXT = 'https://example.com/path?query=value&foo=bar';
+const LONG_TEXT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.';
+const NUMERIC_TEXT = '314159265358979323846264338327950288419716939937510';
+const ALPHANUMERIC_TEXT = 'HELLO WORLD 12345';
+
+const SMALL_BINARY = Array.from({ length: 32 }, (_, i) => i);
+const MEDIUM_BINARY = Array.from({ length: 256 }, (_, i) => i % 256);
+
+/* -- Precomputed segments for isolated encodeSegments benchmark -- */
+const precomputedSegs = makeSegments(MEDIUM_TEXT);
+
+/* -- encodeText benchmarks -- */
+
+describe('encodeText', () => {
+  bench('short text (5 chars)', () => {
+    encodeText(SHORT_TEXT, LOW);
+  });
+
+  bench('medium text (URL ~44 chars)', () => {
+    encodeText(MEDIUM_TEXT, LOW);
+  });
+
+  bench('long text (~270 chars)', () => {
+    encodeText(LONG_TEXT, LOW);
+  });
+
+  bench('numeric text (50 digits)', () => {
+    encodeText(NUMERIC_TEXT, LOW);
+  });
+
+  bench('alphanumeric text (17 chars)', () => {
+    encodeText(ALPHANUMERIC_TEXT, LOW);
+  });
+});
+
+/* -- ECC level impact -- */
+
+describe('encodeText — ECC levels', () => {
+  bench('LOW (L)', () => {
+    encodeText(MEDIUM_TEXT, EccMap.L);
+  });
+
+  bench('MEDIUM (M)', () => {
+    encodeText(MEDIUM_TEXT, EccMap.M);
+  });
+
+  bench('QUARTILE (Q)', () => {
+    encodeText(MEDIUM_TEXT, EccMap.Q);
+  });
+
+  bench('HIGH (H)', () => {
+    encodeText(MEDIUM_TEXT, EccMap.H);
+  });
+});
+
+/* -- encodeBinary benchmarks -- */
+
+describe('encodeBinary', () => {
+  bench('small binary (32 bytes)', () => {
+    encodeBinary(SMALL_BINARY, LOW);
+  });
+
+  bench('medium binary (256 bytes)', () => {
+    encodeBinary(MEDIUM_BINARY, LOW);
+  });
+});
+
+/* -- makeSegments benchmarks -- */
+
+describe('makeSegments', () => {
+  bench('numeric classification', () => {
+    makeSegments(NUMERIC_TEXT);
+  });
+
+  bench('alphanumeric classification', () => {
+    makeSegments(ALPHANUMERIC_TEXT);
+  });
+
+  bench('byte mode classification', () => {
+    makeSegments(MEDIUM_TEXT);
+  });
+});
+
+/* -- encodeSegments (pre-built segments) -- */
+
+describe('encodeSegments', () => {
+  bench('from pre-built segments', () => {
+    encodeSegments(precomputedSegs, LOW);
+  });
+});
diff --git a/core/encoding/src/qr/__test__/index.test.ts b/core/encoding/src/qr/__test__/index.test.ts
new file mode 100644
index 0000000..8e1d1a4
--- /dev/null
+++ b/core/encoding/src/qr/__test__/index.test.ts
@@ -0,0 +1,293 @@
+import { describe, expect, it } from 'vitest';
+import { EccMap, HIGH, LOW, MEDIUM, QUARTILE, QrCode, QrCodeDataType, encodeBinary, encodeSegments, encodeText, isAlphanumeric, isNumeric, makeSegments } from '..';
+
+describe('isNumeric', () => {
+  it('accepts pure digit strings', () => {
+    expect(isNumeric('0123456789')).toBe(true);
+    expect(isNumeric('0')).toBe(true);
+    expect(isNumeric('')).toBe(true);
+  });
+
+  it('rejects non-digit characters', () => {
+    expect(isNumeric('12a3')).toBe(false);
+    expect(isNumeric('HELLO')).toBe(false);
+    expect(isNumeric('12 34')).toBe(false);
+  });
+});
+
+describe('isAlphanumeric', () => {
+  it('accepts valid alphanumeric strings', () => {
+    expect(isAlphanumeric('HELLO WORLD')).toBe(true);
+    expect(isAlphanumeric('0123456789')).toBe(true);
+    expect(isAlphanumeric('ABC123')).toBe(true);
+    expect(isAlphanumeric('')).toBe(true);
+  });
+
+  it('rejects lowercase and special characters', () => {
+    expect(isAlphanumeric('hello')).toBe(false);
+    expect(isAlphanumeric('Hello')).toBe(false);
+    expect(isAlphanumeric('test@email')).toBe(false);
+  });
+});
+
+describe('makeSegments', () => {
+  it('returns empty array for empty string', () => {
+    expect(makeSegments('')).toEqual([]);
+  });
+
+  it('selects numeric mode for digit strings', () => {
+    const segs = makeSegments('12345');
+    expect(segs).toHaveLength(1);
+    expect(segs[0]!.mode[0]).toBe(0x1); // MODE_NUMERIC
+  });
+
+  it('selects alphanumeric mode for uppercase strings', () => {
+    const segs = makeSegments('HELLO WORLD');
+    expect(segs).toHaveLength(1);
+    expect(segs[0]!.mode[0]).toBe(0x2); // MODE_ALPHANUMERIC
+  });
+
+  it('selects byte mode for general text', () => {
+    const segs = makeSegments('Hello, World!');
+    expect(segs).toHaveLength(1);
+    expect(segs[0]!.mode[0]).toBe(0x4); // MODE_BYTE
+  });
+});
+
+describe('encodeText', () => {
+  it('encodes short text at LOW ECC', () => {
+    const qr = encodeText('Hello', LOW);
+    expect(qr).toBeInstanceOf(QrCode);
+    expect(qr.version).toBeGreaterThanOrEqual(1);
+    expect(qr.size).toBe(qr.version * 4 + 17);
+    expect(qr.mask).toBeGreaterThanOrEqual(0);
+    expect(qr.mask).toBeLessThanOrEqual(7);
+  });
+
+  it('encodes text at different ECC levels', () => {
+    const qrL = encodeText('Test', LOW);
+    const qrM = encodeText('Test', MEDIUM);
+    const qrH = encodeText('Test', HIGH);
+
+    // Higher ECC needs same or higher version
+    expect(qrH.version).toBeGreaterThanOrEqual(qrL.version);
+    // All produce valid sizes
+    for (const qr of [qrL, qrM, qrH]) {
+      expect(qr.size).toBe(qr.version * 4 + 17);
+    }
+  });
+
+  it('encodes numeric-only text', () => {
+    const qr = encodeText('123456789012345', LOW);
+    expect(qr.version).toBe(1); // Numeric mode is compact
+  });
+
+  it('encodes a URL', () => {
+    const qr = encodeText('https://example.com/path?query=value', LOW);
+    expect(qr).toBeInstanceOf(QrCode);
+    expect(qr.size).toBeGreaterThanOrEqual(21);
+  });
+
+  it('encodes long text', () => {
+    const longText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.';
+    const qr = encodeText(longText, LOW);
+    expect(qr).toBeInstanceOf(QrCode);
+  });
+
+  it('throws for data too long', () => {
+    const tooLong = 'A'.repeat(10000);
+    expect(() => encodeText(tooLong, HIGH)).toThrow(RangeError);
+  });
+});
+
+describe('encodeBinary', () => {
+  it('encodes binary data', () => {
+    const data = [0x00, 0xFF, 0x48, 0x65, 0x6C, 0x6C, 0x6F];
+    const qr = encodeBinary(data, LOW);
+    expect(qr).toBeInstanceOf(QrCode);
+  });
+});
+
+describe('QrCode', () => {
+  it('modules grid has correct dimensions', () => {
+    const qr = encodeText('Test', LOW);
+    // Flat Uint8Array grid, verify via getModule
+    expect(qr.size).toBeGreaterThanOrEqual(21);
+    for (let y = 0; y < qr.size; y++) {
+      for (let x = 0; x < qr.size; x++) {
+        const mod = qr.getModule(x, y);
+        expect(typeof mod).toBe('boolean');
+      }
+    }
+  });
+
+  it('types grid has correct dimensions', () => {
+    const qr = encodeText('Test', LOW);
+    // Flat Int8Array grid, verify via getType
+    for (let y = 0; y < qr.size; y++) {
+      for (let x = 0; x < qr.size; x++) {
+        const t = qr.getType(x, y);
+        expect(typeof t).toBe('number');
+      }
+    }
+  });
+
+  it('getModule returns false for out of bounds', () => {
+    const qr = encodeText('Test', LOW);
+    expect(qr.getModule(-1, 0)).toBe(false);
+    expect(qr.getModule(0, -1)).toBe(false);
+    expect(qr.getModule(qr.size, 0)).toBe(false);
+    expect(qr.getModule(0, qr.size)).toBe(false);
+  });
+
+  it('produces deterministic output', () => {
+    const qr1 = encodeText('Hello', LOW);
+    const qr2 = encodeText('Hello', LOW);
+    expect(qr1.version).toBe(qr2.version);
+    expect(qr1.mask).toBe(qr2.mask);
+    for (let y = 0; y < qr1.size; y++) {
+      for (let x = 0; x < qr1.size; x++) {
+        expect(qr1.getModule(x, y)).toBe(qr2.getModule(x, y));
+      }
+    }
+  });
+
+  it('different inputs produce different outputs', () => {
+    const qr1 = encodeText('Hello', LOW);
+    const qr2 = encodeText('World', LOW);
+    // They might have the same version/size but different modules
+    let hasDiff = false;
+    for (let y = 0; y < qr1.size && !hasDiff; y++) {
+      for (let x = 0; x < qr1.size && !hasDiff; x++) {
+        if (qr1.getModule(x, y) !== qr2.getModule(x, y))
+          hasDiff = true;
+      }
+    }
+    expect(hasDiff).toBe(true);
+  });
+});
+
+describe('EccMap', () => {
+  it('has all four levels', () => {
+    expect(EccMap.L).toBeDefined();
+    expect(EccMap.M).toBeDefined();
+    expect(EccMap.Q).toBeDefined();
+    expect(EccMap.H).toBeDefined();
+  });
+
+  it('works with encodeText', () => {
+    const qr = encodeText('Test', EccMap.L);
+    expect(qr).toBeInstanceOf(QrCode);
+  });
+});
+
+describe('encodeSegments', () => {
+  it('uses explicit mask when specified', () => {
+    const qr = encodeSegments(makeSegments('Test'), LOW, 1, 40, 3);
+    expect(qr.mask).toBe(3);
+  });
+
+  it('preserves ECC level when boostEcl is false', () => {
+    const qr = encodeSegments(makeSegments('Test'), LOW, 1, 40, -1, false);
+    expect(qr.ecc).toBe(LOW);
+  });
+
+  it('boosts ECC level by default when data fits', () => {
+    const qr = encodeSegments(makeSegments('Test'), LOW);
+    expect(qr.ecc).toBe(HIGH);
+  });
+
+  it('forces a specific version when min equals max', () => {
+    const qr = encodeSegments(makeSegments('Test'), LOW, 5, 5);
+    expect(qr.version).toBe(5);
+  });
+
+  it('throws on invalid version range', () => {
+    expect(() => encodeSegments(makeSegments('Test'), LOW, 2, 1)).toThrow(RangeError);
+  });
+
+  it('throws on invalid mask value', () => {
+    expect(() => encodeSegments(makeSegments('Test'), LOW, 1, 40, 8)).toThrow(RangeError);
+  });
+});
+
+describe('encodeBinary edge cases', () => {
+  it('encodes an empty array', () => {
+    const qr = encodeBinary([], LOW);
+    expect(qr).toBeInstanceOf(QrCode);
+  });
+});
+
+describe('encodeText edge cases', () => {
+  it('encodes Unicode emoji text', () => {
+    const qr = encodeText('Hello \uD83C\uDF0D', LOW);
+    expect(qr).toBeInstanceOf(QrCode);
+    expect(qr.size).toBeGreaterThanOrEqual(21);
+  });
+
+  it('uses compact encoding for alphanumeric text', () => {
+    const qr = encodeText('HELLO WORLD', LOW);
+    expect(qr.version).toBe(1);
+  });
+
+  it('selects version >= 7 for long data (triggers drawVersion)', () => {
+    const qr = encodeText('a'.repeat(200), LOW);
+    expect(qr.version).toBeGreaterThanOrEqual(7);
+  });
+});
+
+describe('getType semantics', () => {
+  it('identifies finder pattern modules as Position', () => {
+    const qr = encodeText('Test', LOW);
+    // Top-left finder pattern
+    expect(qr.getType(0, 0)).toBe(QrCodeDataType.Position);
+    expect(qr.getType(3, 3)).toBe(QrCodeDataType.Position);
+    expect(qr.getType(6, 6)).toBe(QrCodeDataType.Position);
+    // Top-right finder pattern
+    expect(qr.getType(qr.size - 1, 0)).toBe(QrCodeDataType.Position);
+    // Bottom-left finder pattern
+    expect(qr.getType(0, qr.size - 1)).toBe(QrCodeDataType.Position);
+  });
+
+  it('identifies timing pattern modules as Timing', () => {
+    const qr = encodeText('Test', LOW);
+    // Horizontal timing row y=6, between finders
+    expect(qr.getType(8, 6)).toBe(QrCodeDataType.Timing);
+  });
+});
+
+describe('automatic mask selection (regression)', () => {
+  // The mask is chosen by minimizing getPenaltyScore() over all 8 patterns.
+  // These version/mask pairs were verified against the canonical Project Nayuki
+  // penalty algorithm. A regression in the finder-pattern (PENALTY_N3) rolling
+  // window — e.g. dropping a history slot during the shift — silently selects a
+  // different, non-spec-optimal mask, which these fixtures catch.
+  it.each([
+    ['HELLO WORLD', QUARTILE, 1, 0],
+    ['HELLO WORLD', MEDIUM, 1, 0],
+    ['https://example.com', LOW, 2, 0],
+    ['12345678901234567890', LOW, 1, 4],
+    ['Hello, World!', MEDIUM, 1, 3],
+    ['a'.repeat(200), LOW, 9, 1],
+  ] as const)('locks version/mask for %j', (text, ecc, version, mask) => {
+    const qr = encodeText(text, ecc);
+    expect(qr.version).toBe(version);
+    expect(qr.mask).toBe(mask);
+  });
+
+  it('produces a stable full-grid fingerprint for HELLO WORLD / QUARTILE', () => {
+    const qr = encodeText('HELLO WORLD', QUARTILE);
+    let dark = 0;
+    let hash = 0;
+    for (let y = 0; y < qr.size; y++) {
+      for (let x = 0; x < qr.size; x++) {
+        const bit = qr.getModule(x, y) ? 1 : 0;
+        dark += bit;
+        hash = (hash * 31 + bit) >>> 0;
+      }
+    }
+    expect(qr.size).toBe(21);
+    expect(dark).toBe(218);
+    expect(hash).toBe(1_118_257_212);
+  });
+});
diff --git a/core/encoding/src/qr/__test__/segment.test.ts b/core/encoding/src/qr/__test__/segment.test.ts
new file mode 100644
index 0000000..0b99706
--- /dev/null
+++ b/core/encoding/src/qr/__test__/segment.test.ts
@@ -0,0 +1,92 @@
+import { describe, expect, it } from 'vitest';
+import { QrSegment, makeAlphanumeric, makeBytes, makeNumeric } from '../segment';
+import { MODE_ALPHANUMERIC, MODE_BYTE, MODE_NUMERIC } from '../constants';
+
+describe('QrSegment', () => {
+  it('throws on negative numChars', () => {
+    expect(() => new QrSegment(MODE_BYTE, -1, [])).toThrow(RangeError);
+  });
+
+  it('accepts zero numChars', () => {
+    const seg = new QrSegment(MODE_BYTE, 0, []);
+    expect(seg.numChars).toBe(0);
+    expect(seg.bitData).toEqual([]);
+  });
+});
+
+describe('makeNumeric', () => {
+  it('encodes a 5-digit string', () => {
+    const seg = makeNumeric('12345');
+    expect(seg.mode).toBe(MODE_NUMERIC);
+    expect(seg.numChars).toBe(5);
+    // "123" → 10 bits, "45" → 7 bits
+    expect(seg.bitData).toHaveLength(17);
+  });
+
+  it('encodes a single digit', () => {
+    const seg = makeNumeric('0');
+    expect(seg.numChars).toBe(1);
+    expect(seg.bitData).toHaveLength(4);
+  });
+
+  it('encodes an empty string', () => {
+    const seg = makeNumeric('');
+    expect(seg.numChars).toBe(0);
+    expect(seg.bitData).toHaveLength(0);
+  });
+
+  it('throws on non-numeric input', () => {
+    expect(() => makeNumeric('12a3')).toThrow(RangeError);
+    expect(() => makeNumeric('hello')).toThrow(RangeError);
+  });
+});
+
+describe('makeAlphanumeric', () => {
+  it('encodes a character pair', () => {
+    const seg = makeAlphanumeric('AB');
+    expect(seg.mode).toBe(MODE_ALPHANUMERIC);
+    expect(seg.numChars).toBe(2);
+    // 1 pair → 11 bits
+    expect(seg.bitData).toHaveLength(11);
+  });
+
+  it('encodes a pair plus remainder', () => {
+    const seg = makeAlphanumeric('ABC');
+    expect(seg.numChars).toBe(3);
+    // 1 pair (11 bits) + 1 remainder (6 bits)
+    expect(seg.bitData).toHaveLength(17);
+  });
+
+  it('throws on lowercase input', () => {
+    expect(() => makeAlphanumeric('hello')).toThrow(RangeError);
+  });
+
+  it('throws on invalid characters', () => {
+    expect(() => makeAlphanumeric('test@email')).toThrow(RangeError);
+  });
+});
+
+describe('makeBytes', () => {
+  it('encodes an empty array', () => {
+    const seg = makeBytes([]);
+    expect(seg.mode).toBe(MODE_BYTE);
+    expect(seg.numChars).toBe(0);
+    expect(seg.bitData).toHaveLength(0);
+  });
+
+  it('encodes two bytes', () => {
+    const seg = makeBytes([0x48, 0x65]);
+    expect(seg.numChars).toBe(2);
+    expect(seg.bitData).toHaveLength(16);
+  });
+
+  it('encodes 0xFF correctly', () => {
+    const seg = makeBytes([0xFF]);
+    expect(seg.bitData).toEqual([1, 1, 1, 1, 1, 1, 1, 1]);
+  });
+
+  it('encodes 0x00 correctly', () => {
+    const seg = makeBytes([0x00]);
+    expect(seg.bitData).toEqual([0, 0, 0, 0, 0, 0, 0, 0]);
+  });
+});
diff --git a/core/encoding/src/qr/__test__/utils.test.ts b/core/encoding/src/qr/__test__/utils.test.ts
new file mode 100644
index 0000000..e4dc2bd
--- /dev/null
+++ b/core/encoding/src/qr/__test__/utils.test.ts
@@ -0,0 +1,119 @@
+import { describe, expect, it } from 'vitest';
+import { appendBits, getBit, getNumDataCodewords, getNumRawDataModules, getTotalBits, numCharCountBits } from '../utils';
+import { HIGH, LOW, MODE_BYTE, MODE_NUMERIC } from '../constants';
+import { QrSegment } from '../segment';
+
+describe('appendBits', () => {
+  it('appends nothing when len is 0', () => {
+    const bb: number[] = [];
+    appendBits(0, 0, bb);
+    expect(bb).toEqual([]);
+  });
+
+  it('appends bits in MSB-first order', () => {
+    const bb: number[] = [];
+    appendBits(0b101, 3, bb);
+    expect(bb).toEqual([1, 0, 1]);
+  });
+
+  it('appends to an existing array', () => {
+    const bb = [1, 0];
+    appendBits(0b11, 2, bb);
+    expect(bb).toEqual([1, 0, 1, 1]);
+  });
+
+  it('throws when value exceeds bit length', () => {
+    expect(() => appendBits(5, 2, [])).toThrow(RangeError);
+  });
+
+  it('throws on negative length', () => {
+    expect(() => appendBits(0, -1, [])).toThrow(RangeError);
+  });
+});
+
+describe('getBit', () => {
+  it('returns correct bits for 0b10110', () => {
+    expect(getBit(0b10110, 0)).toBe(false);
+    expect(getBit(0b10110, 1)).toBe(true);
+    expect(getBit(0b10110, 2)).toBe(true);
+    expect(getBit(0b10110, 3)).toBe(false);
+    expect(getBit(0b10110, 4)).toBe(true);
+  });
+
+  it('returns false for high bits of a small number', () => {
+    expect(getBit(1, 7)).toBe(false);
+    expect(getBit(1, 31)).toBe(false);
+  });
+});
+
+describe('getNumRawDataModules', () => {
+  it('returns 208 for version 1', () => {
+    expect(getNumRawDataModules(1)).toBe(208);
+  });
+
+  it('returns correct value for version 2 (with alignment)', () => {
+    expect(getNumRawDataModules(2)).toBe(359);
+  });
+
+  it('returns correct value for version 7 (with version info)', () => {
+    expect(getNumRawDataModules(7)).toBe(1568);
+  });
+
+  it('returns 29648 for version 40', () => {
+    expect(getNumRawDataModules(40)).toBe(29648);
+  });
+
+  it('throws on version 0', () => {
+    expect(() => getNumRawDataModules(0)).toThrow(RangeError);
+  });
+
+  it('throws on version 41', () => {
+    expect(() => getNumRawDataModules(41)).toThrow(RangeError);
+  });
+});
+
+describe('getNumDataCodewords', () => {
+  it('returns 19 for version 1 LOW', () => {
+    expect(getNumDataCodewords(1, LOW)).toBe(19);
+  });
+
+  it('returns 9 for version 1 HIGH', () => {
+    expect(getNumDataCodewords(1, HIGH)).toBe(9);
+  });
+});
+
+describe('getTotalBits', () => {
+  it('returns 0 for empty segments', () => {
+    expect(getTotalBits([], 1)).toBe(0);
+  });
+
+  it('returns Infinity when numChars overflows char count field', () => {
+    // MODE_BYTE at v1 has ccbits=8, so numChars=256 overflows
+    const seg = new QrSegment(MODE_BYTE, 256, []);
+    expect(getTotalBits([seg], 1)).toBe(Number.POSITIVE_INFINITY);
+  });
+
+  it('calculates total bits for a single segment', () => {
+    // MODE_BYTE at v1: 4 (mode) + 8 (char count) + 8 (data) = 20
+    const seg = new QrSegment(MODE_BYTE, 1, [0, 0, 0, 0, 0, 0, 0, 0]);
+    expect(getTotalBits([seg], 1)).toBe(20);
+  });
+});
+
+describe('numCharCountBits', () => {
+  it('returns correct bits for MODE_NUMERIC across version ranges', () => {
+    expect(numCharCountBits(MODE_NUMERIC, 1)).toBe(10);
+    expect(numCharCountBits(MODE_NUMERIC, 9)).toBe(10);
+    expect(numCharCountBits(MODE_NUMERIC, 10)).toBe(12);
+    expect(numCharCountBits(MODE_NUMERIC, 26)).toBe(12);
+    expect(numCharCountBits(MODE_NUMERIC, 27)).toBe(14);
+    expect(numCharCountBits(MODE_NUMERIC, 40)).toBe(14);
+  });
+
+  it('returns correct bits for MODE_BYTE across version ranges', () => {
+    expect(numCharCountBits(MODE_BYTE, 1)).toBe(8);
+    expect(numCharCountBits(MODE_BYTE, 9)).toBe(8);
+    expect(numCharCountBits(MODE_BYTE, 10)).toBe(16);
+    expect(numCharCountBits(MODE_BYTE, 40)).toBe(16);
+  });
+});
diff --git a/core/encoding/src/qr/constants.ts b/core/encoding/src/qr/constants.ts
new file mode 100644
index 0000000..421fbec
--- /dev/null
+++ b/core/encoding/src/qr/constants.ts
@@ -0,0 +1,67 @@
+import type { QrCodeEcc, QrSegmentMode } from './types';
+
+/* -- ECC Levels -- */
+
+export const LOW: QrCodeEcc = [0, 1]; // ~7% recovery
+export const MEDIUM: QrCodeEcc = [1, 0]; // ~15% recovery
+export const QUARTILE: QrCodeEcc = [2, 3]; // ~25% recovery
+export const HIGH: QrCodeEcc = [3, 2]; // ~30% recovery
+
+export const EccMap = {
+  L: LOW,
+  M: MEDIUM,
+  Q: QUARTILE,
+  H: HIGH,
+} as const;
+
+/* -- Segment Modes -- */
+
+export const MODE_NUMERIC: QrSegmentMode = [0x1, 10, 12, 14];
+export const MODE_ALPHANUMERIC: QrSegmentMode = [0x2, 9, 11, 13];
+export const MODE_BYTE: QrSegmentMode = [0x4, 8, 16, 16];
+
+/* -- Version Limits -- */
+
+export const MIN_VERSION = 1;
+export const MAX_VERSION = 40;
+
+/* -- Penalty Constants -- */
+
+export const PENALTY_N1 = 3;
+export const PENALTY_N2 = 3;
+export const PENALTY_N3 = 40;
+export const PENALTY_N4 = 10;
+
+/* -- Character Sets & Patterns -- */
+
+export const NUMERIC_REGEX = /^\d*$/;
+export const ALPHANUMERIC_REGEX = /^[A-Z0-9 $%*+./:_-]*$/;
+export const ALPHANUMERIC_CHARSET = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ $%*+-./:' as const;
+
+/** Pre-computed charCode → alphanumeric index lookup (0xFF = invalid). O(1) instead of O(45) indexOf. */
+export const ALPHANUMERIC_MAP = /* @__PURE__ */ (() => {
+  const map = new Uint8Array(128).fill(0xFF);
+  for (let i = 0; i < ALPHANUMERIC_CHARSET.length; i++)
+    map[ALPHANUMERIC_CHARSET.charCodeAt(i)] = i;
+  return map;
+})();
+
+/* -- ECC Lookup Tables -- */
+
+// prettier-ignore
+export const ECC_CODEWORDS_PER_BLOCK: number[][] = [
+  //  0,  1,  2,  3,  4,  5,  6,  7,  8,  9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40
+  [-1, 7, 10, 15, 20, 26, 18, 20, 24, 30, 18, 20, 24, 26, 30, 22, 24, 28, 30, 28, 28, 28, 28, 30, 30, 26, 28, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30], // Low
+  [-1, 10, 16, 26, 18, 24, 16, 18, 22, 22, 26, 30, 22, 22, 24, 24, 28, 28, 26, 26, 26, 26, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28], // Medium
+  [-1, 13, 22, 18, 26, 18, 24, 18, 22, 20, 24, 28, 26, 24, 20, 30, 24, 28, 28, 26, 30, 28, 30, 30, 30, 30, 28, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30], // Quartile
+  [-1, 17, 28, 22, 16, 22, 28, 26, 26, 24, 28, 24, 28, 22, 24, 24, 30, 28, 28, 26, 28, 30, 24, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30], // High
+];
+
+// prettier-ignore
+export const NUM_ERROR_CORRECTION_BLOCKS: number[][] = [
+  //  0, 1, 2, 3, 4, 5, 6, 7, 8, 9,10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40
+  [-1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 4, 4, 4, 4, 4, 6, 6, 6, 6, 7, 8, 8, 9, 9, 10, 12, 12, 12, 13, 14, 15, 16, 17, 18, 19, 19, 20, 21, 22, 24, 25], // Low
+  [-1, 1, 1, 1, 2, 2, 4, 4, 4, 5, 5, 5, 8, 9, 9, 10, 10, 11, 13, 14, 16, 17, 17, 18, 20, 21, 23, 25, 26, 28, 29, 31, 33, 35, 37, 38, 40, 43, 45, 47, 49], // Medium
+  [-1, 1, 1, 2, 2, 4, 4, 6, 6, 8, 8, 8, 10, 12, 16, 12, 17, 16, 18, 21, 20, 23, 23, 25, 27, 29, 34, 34, 35, 38, 40, 43, 45, 48, 51, 53, 56, 59, 62, 65, 68], // Quartile
+  [-1, 1, 1, 2, 4, 4, 4, 5, 6, 8, 8, 11, 11, 16, 16, 18, 16, 19, 21, 25, 25, 25, 34, 30, 32, 35, 37, 40, 42, 45, 48, 51, 54, 57, 60, 63, 66, 70, 74, 77, 81], // High
+];
diff --git a/core/encoding/src/qr/encode.ts b/core/encoding/src/qr/encode.ts
new file mode 100644
index 0000000..76f74f7
--- /dev/null
+++ b/core/encoding/src/qr/encode.ts
@@ -0,0 +1,94 @@
+import type { QrCodeEcc } from './types';
+import { HIGH, MAX_VERSION, MEDIUM, MIN_VERSION, QUARTILE } from './constants';
+import { QrCode } from './qr-code';
+import { makeBytes, makeSegments } from './segment';
+import type { QrSegment } from './segment';
+import { appendBits, assert, getNumDataCodewords, getTotalBits, numCharCountBits } from './utils';
+
+/**
+ * Returns a QR Code representing the given Unicode text string at the given error correction level.
+ * As a conservative upper bound, this function is guaranteed to succeed for strings that have 738 or fewer
+ * Unicode code points (not UTF-16 code units) if the low error correction level is used.
+ * The smallest possible QR Code version is automatically chosen for the output.
+ */
+export function encodeText(text: string, ecl: QrCodeEcc): QrCode {
+  const segs = makeSegments(text);
+  return encodeSegments(segs, ecl);
+}
+
+/**
+ * Returns a QR Code representing the given binary data at the given error correction level.
+ * This function always encodes using the binary segment mode, not any text mode.
+ * The maximum number of bytes allowed is 2953.
+ */
+export function encodeBinary(data: readonly number[], ecl: QrCodeEcc): QrCode {
+  const seg = makeBytes(data);
+  return encodeSegments([seg], ecl);
+}
+
+/**
+ * Returns a QR Code representing the given segments with the given encoding parameters.
+ * The smallest possible QR Code version within the given range is automatically chosen for the output.
+ * This is a mid-level API; the high-level API is encodeText() and encodeBinary().
+ */
+export function encodeSegments(
+  segs: readonly QrSegment[],
+  ecl: QrCodeEcc,
+  minVersion = 1,
+  maxVersion = 40,
+  mask = -1,
+  boostEcl = true,
+): QrCode {
+  if (!(MIN_VERSION <= minVersion && minVersion <= maxVersion && maxVersion <= MAX_VERSION)
+    || mask < -1 || mask > 7)
+    throw new RangeError('Invalid value');
+
+  // Find the minimal version number to use
+  let version: number;
+  let dataUsedBits: number;
+  for (version = minVersion; ; version++) {
+    const dataCapacityBits = getNumDataCodewords(version, ecl) * 8;
+    const usedBits = getTotalBits(segs, version);
+    if (usedBits <= dataCapacityBits) {
+      dataUsedBits = usedBits;
+      break;
+    }
+    if (version >= maxVersion)
+      throw new RangeError('Data too long');
+  }
+
+  // Increase the error correction level while the data still fits in the current version number
+  for (const newEcl of [MEDIUM, QUARTILE, HIGH]) {
+    if (boostEcl && dataUsedBits! <= getNumDataCodewords(version, newEcl) * 8)
+      ecl = newEcl;
+  }
+
+  // Concatenate all segments to create the data bit string
+  const bb: number[] = [];
+  for (const seg of segs) {
+    appendBits(seg.mode[0], 4, bb);
+    appendBits(seg.numChars, numCharCountBits(seg.mode, version), bb);
+    for (const b of seg.bitData)
+      bb.push(b);
+  }
+  assert(bb.length === dataUsedBits!);
+
+  // Add terminator and pad up to a byte if applicable
+  const dataCapacityBits = getNumDataCodewords(version, ecl) * 8;
+  assert(bb.length <= dataCapacityBits);
+  appendBits(0, Math.min(4, dataCapacityBits - bb.length), bb);
+  appendBits(0, (8 - bb.length % 8) % 8, bb);
+  assert(bb.length % 8 === 0);
+
+  // Pad with alternating bytes until data capacity is reached
+  for (let padByte = 0xEC; bb.length < dataCapacityBits; padByte ^= 0xEC ^ 0x11)
+    appendBits(padByte, 8, bb);
+
+  // Pack bits into bytes in big endian
+  const dataCodewords = Array.from({ length: Math.ceil(bb.length / 8) }, () => 0);
+  for (let i = 0; i < bb.length; i++)
+    dataCodewords[i >>> 3]! |= bb[i]! << (7 - (i & 7));
+
+  // Create the QR Code object
+  return new QrCode(version, ecl, dataCodewords, mask);
+}
diff --git a/core/encoding/src/qr/index.ts b/core/encoding/src/qr/index.ts
new file mode 100644
index 0000000..36a713c
--- /dev/null
+++ b/core/encoding/src/qr/index.ts
@@ -0,0 +1,8 @@
+export { QrCodeDataType } from './types';
+export type { QrCodeEcc, QrSegmentMode } from './types';
+
+export { EccMap, LOW, MEDIUM, QUARTILE, HIGH } from './constants';
+
+export { QrCode } from './qr-code';
+export { QrSegment, makeBytes, makeSegments, isNumeric, isAlphanumeric } from './segment';
+export { encodeText, encodeBinary, encodeSegments } from './encode';
diff --git a/core/encoding/src/qr/qr-code.ts b/core/encoding/src/qr/qr-code.ts
new file mode 100644
index 0000000..5af22db
--- /dev/null
+++ b/core/encoding/src/qr/qr-code.ts
@@ -0,0 +1,434 @@
+/*
+ * QR Code generator — core QrCode class
+ *
+ * Based on Project Nayuki's QR Code generator library (MIT License)
+ * https://www.nayuki.io/page/qr-code-generator-library
+ */
+
+import type { QrCodeEcc } from './types';
+import { QrCodeDataType } from './types';
+import { ECC_CODEWORDS_PER_BLOCK, MAX_VERSION, MIN_VERSION, NUM_ERROR_CORRECTION_BLOCKS, PENALTY_N1, PENALTY_N2, PENALTY_N3, PENALTY_N4 } from './constants';
+import { assert, getBit, getNumDataCodewords, getNumRawDataModules } from './utils';
+import { computeDivisor, computeRemainder } from '../reed-solomon';
+
+/**
+ * A QR Code symbol, which is a type of two-dimension barcode.
+ * Invented by Denso Wave and described in the ISO/IEC 18004 standard.
+ * Instances of this class represent an immutable square grid of dark and light cells.
+ */
+export class QrCode {
+  /** The width and height of this QR Code, measured in modules, between 21 and 177 (inclusive). */
+  public readonly size: number;
+
+  /** The index of the mask pattern used in this QR Code, which is between 0 and 7 (inclusive). */
+  public readonly mask: number;
+
+  /** The modules of this QR Code (0 = light, 1 = dark). Flat row-major Uint8Array. */
+  private readonly modules: Uint8Array;
+
+  /** Data type of each module. Flat row-major Int8Array. */
+  private readonly types: Int8Array;
+
+  /**
+   * Creates a new QR Code with the given version number, error correction level, data codeword bytes, and mask number.
+   * This is a low-level API that most users should not use directly.
+   */
+  public constructor(
+    /** The version number of this QR Code, which is between 1 and 40 (inclusive). */
+    public readonly version: number,
+    /** The error correction level used in this QR Code. */
+    public readonly ecc: QrCodeEcc,
+    dataCodewords: readonly number[],
+    msk: number,
+  ) {
+    if (version < MIN_VERSION || version > MAX_VERSION)
+      throw new RangeError('Version value out of range');
+    if (msk < -1 || msk > 7)
+      throw new RangeError('Mask value out of range');
+    this.size = version * 4 + 17;
+
+    const totalModules = this.size * this.size;
+    this.modules = new Uint8Array(totalModules);
+    this.types = new Int8Array(totalModules); // 0 = QrCodeDataType.Data
+
+    // Compute ECC, draw modules
+    this.drawFunctionPatterns();
+    const allCodewords = this.addEccAndInterleave(dataCodewords);
+    this.drawCodewords(allCodewords);
+
+    // Do masking
+    if (msk === -1) {
+      let minPenalty = 1_000_000_000;
+      for (let i = 0; i < 8; i++) {
+        this.applyMask(i);
+        this.drawFormatBits(i);
+        const penalty = this.getPenaltyScore();
+        if (penalty < minPenalty) {
+          msk = i;
+          minPenalty = penalty;
+        }
+        this.applyMask(i); // Undoes the mask due to XOR
+      }
+    }
+
+    assert(msk >= 0 && msk <= 7);
+    this.mask = msk;
+    this.applyMask(msk);
+    this.drawFormatBits(msk);
+  }
+
+  /**
+   * Returns the color of the module (pixel) at the given coordinates.
+   * false for light, true for dark. Out of bounds returns false (light).
+   */
+  public getModule(x: number, y: number): boolean {
+    return x >= 0 && x < this.size && y >= 0 && y < this.size
+      && this.modules[y * this.size + x] === 1;
+  }
+
+  /** Returns the data type of the module at the given coordinates. */
+  public getType(x: number, y: number): QrCodeDataType {
+    return this.types[y * this.size + x] as QrCodeDataType;
+  }
+
+  /* -- Private helper methods for constructor: Drawing function modules -- */
+
+  private drawFunctionPatterns(): void {
+    const size = this.size;
+    // Draw horizontal and vertical timing patterns
+    for (let i = 0; i < size; i++) {
+      const dark = (i & 1) ^ 1;
+      this.setFunctionModule(6, i, dark, QrCodeDataType.Timing);
+      this.setFunctionModule(i, 6, dark, QrCodeDataType.Timing);
+    }
+
+    // Draw 3 finder patterns (all corners except bottom right)
+    this.drawFinderPattern(3, 3);
+    this.drawFinderPattern(size - 4, 3);
+    this.drawFinderPattern(3, size - 4);
+
+    // Draw numerous alignment patterns
+    const alignPatPos = this.getAlignmentPatternPositions();
+    const numAlign = alignPatPos.length;
+    for (let i = 0; i < numAlign; i++) {
+      for (let j = 0; j < numAlign; j++) {
+        if (!(i === 0 && j === 0 || i === 0 && j === numAlign - 1 || i === numAlign - 1 && j === 0))
+          this.drawAlignmentPattern(alignPatPos[i]!, alignPatPos[j]!);
+      }
+    }
+
+    // Draw configuration data
+    this.drawFormatBits(0); // Dummy mask value; overwritten later in the constructor
+    this.drawVersion();
+  }
+
+  private drawFormatBits(mask: number): void {
+    const data = this.ecc[1] << 3 | mask;
+    let rem = data;
+    for (let i = 0; i < 10; i++)
+      rem = (rem << 1) ^ ((rem >>> 9) * 0x537);
+    const bits = (data << 10 | rem) ^ 0x5412;
+    assert(bits >>> 15 === 0);
+
+    const size = this.size;
+    // Draw first copy
+    for (let i = 0; i <= 5; i++)
+      this.setFunctionModule(8, i, getBit(bits, i) ? 1 : 0);
+    this.setFunctionModule(8, 7, getBit(bits, 6) ? 1 : 0);
+    this.setFunctionModule(8, 8, getBit(bits, 7) ? 1 : 0);
+    this.setFunctionModule(7, 8, getBit(bits, 8) ? 1 : 0);
+    for (let i = 9; i < 15; i++)
+      this.setFunctionModule(14 - i, 8, getBit(bits, i) ? 1 : 0);
+
+    // Draw second copy
+    for (let i = 0; i < 8; i++)
+      this.setFunctionModule(size - 1 - i, 8, getBit(bits, i) ? 1 : 0);
+    for (let i = 8; i < 15; i++)
+      this.setFunctionModule(8, size - 15 + i, getBit(bits, i) ? 1 : 0);
+    this.setFunctionModule(8, size - 8, 1);
+  }
+
+  private drawVersion(): void {
+    if (this.version < 7)
+      return;
+
+    let rem = this.version;
+    for (let i = 0; i < 12; i++)
+      rem = (rem << 1) ^ ((rem >>> 11) * 0x1F25);
+    const bits = this.version << 12 | rem;
+    assert(bits >>> 18 === 0);
+
+    const size = this.size;
+    for (let i = 0; i < 18; i++) {
+      const color = getBit(bits, i) ? 1 : 0;
+      const a = size - 11 + i % 3;
+      const b = (i / 3) | 0;
+      this.setFunctionModule(a, b, color);
+      this.setFunctionModule(b, a, color);
+    }
+  }
+
+  private drawFinderPattern(x: number, y: number): void {
+    const size = this.size;
+    for (let dy = -4; dy <= 4; dy++) {
+      for (let dx = -4; dx <= 4; dx++) {
+        const dist = Math.max(Math.abs(dx), Math.abs(dy));
+        const xx = x + dx;
+        const yy = y + dy;
+        if (xx >= 0 && xx < size && yy >= 0 && yy < size)
+          this.setFunctionModule(xx, yy, dist !== 2 && dist !== 4 ? 1 : 0, QrCodeDataType.Position);
+      }
+    }
+  }
+
+  private drawAlignmentPattern(x: number, y: number): void {
+    for (let dy = -2; dy <= 2; dy++) {
+      for (let dx = -2; dx <= 2; dx++) {
+        this.setFunctionModule(
+          x + dx,
+          y + dy,
+          Math.max(Math.abs(dx), Math.abs(dy)) !== 1 ? 1 : 0,
+          QrCodeDataType.Alignment,
+        );
+      }
+    }
+  }
+
+  private setFunctionModule(x: number, y: number, isDark: number, type: QrCodeDataType = QrCodeDataType.Function): void {
+    const idx = y * this.size + x;
+    this.modules[idx] = isDark;
+    this.types[idx] = type;
+  }
+
+  /* -- Private helper methods for constructor: Codewords and masking -- */
+
+  private addEccAndInterleave(data: readonly number[]): number[] {
+    const ver = this.version;
+    const ecl = this.ecc;
+    if (data.length !== getNumDataCodewords(ver, ecl))
+      throw new RangeError('Invalid argument');
+
+    const numBlocks = NUM_ERROR_CORRECTION_BLOCKS[ecl[0]]![ver]!;
+    const blockEccLen = ECC_CODEWORDS_PER_BLOCK[ecl[0]]![ver]!;
+    const rawCodewords = (getNumRawDataModules(ver) / 8) | 0;
+    const numShortBlocks = numBlocks - rawCodewords % numBlocks;
+    const shortBlockLen = (rawCodewords / numBlocks) | 0;
+
+    // Split data into blocks and append ECC to each block
+    const blocks: number[][] = [];
+    const rsDiv = computeDivisor(blockEccLen);
+    for (let i = 0, k = 0; i < numBlocks; i++) {
+      const dat: number[] = data.slice(k, k + shortBlockLen - blockEccLen + (i < numShortBlocks ? 0 : 1)) as number[];
+      k += dat.length;
+      const ecc = computeRemainder(dat, rsDiv);
+      if (i < numShortBlocks)
+        dat.push(0);
+      blocks.push([...dat, ...ecc]);
+    }
+
+    // Interleave (not concatenate) the bytes from every block into a single sequence
+    const result: number[] = [];
+    const blockLen = blocks[0]!.length;
+    for (let i = 0; i < blockLen; i++) {
+      for (let j = 0; j < blocks.length; j++) {
+        if (i !== shortBlockLen - blockEccLen || j >= numShortBlocks)
+          result.push(blocks[j]![i]!);
+      }
+    }
+    assert(result.length === rawCodewords);
+    return result;
+  }
+
+  private drawCodewords(data: readonly number[]): void {
+    if (data.length !== ((getNumRawDataModules(this.version) / 8) | 0))
+      throw new RangeError('Invalid argument');
+
+    const size = this.size;
+    const modules = this.modules;
+    const types = this.types;
+    let i = 0;
+    for (let right = size - 1; right >= 1; right -= 2) {
+      if (right === 6)
+        right = 5;
+      for (let vert = 0; vert < size; vert++) {
+        for (let j = 0; j < 2; j++) {
+          const x = right - j;
+          const upward = ((right + 1) & 2) === 0;
+          const y = upward ? size - 1 - vert : vert;
+          const idx = y * size + x;
+          if (types[idx] === QrCodeDataType.Data && i < data.length * 8) {
+            modules[idx] = (data[i >>> 3]! >>> (7 - (i & 7))) & 1;
+            i++;
+          }
+        }
+      }
+    }
+    assert(i === data.length * 8);
+  }
+
+  private applyMask(mask: number): void {
+    if (mask < 0 || mask > 7)
+      throw new RangeError('Mask value out of range');
+    const size = this.size;
+    const modules = this.modules;
+    const types = this.types;
+    for (let y = 0; y < size; y++) {
+      const yOffset = y * size;
+      for (let x = 0; x < size; x++) {
+        const idx = yOffset + x;
+        if (types[idx] !== QrCodeDataType.Data)
+          continue;
+        let invert: boolean;
+        switch (mask) {
+          case 0: invert = (x + y) % 2 === 0; break;
+          case 1: invert = y % 2 === 0; break;
+          case 2: invert = x % 3 === 0; break;
+          case 3: invert = (x + y) % 3 === 0; break;
+          case 4: invert = (((x / 3) | 0) + ((y / 2) | 0)) % 2 === 0; break;
+          case 5: invert = x * y % 2 + x * y % 3 === 0; break;
+          case 6: invert = (x * y % 2 + x * y % 3) % 2 === 0; break;
+          case 7: invert = ((x + y) % 2 + x * y % 3) % 2 === 0; break;
+          default: throw new Error('Unreachable');
+        }
+        if (invert)
+          modules[idx]! ^= 1;
+      }
+    }
+  }
+
+  private getPenaltyScore(): number {
+    const size = this.size;
+    const modules = this.modules;
+    let result = 0;
+
+    // Adjacent modules in row having same color, and finder-like patterns
+    for (let y = 0; y < size; y++) {
+      const yOffset = y * size;
+      let runColor = 0;
+      let runX = 0;
+      let h0 = 0, h1 = 0, h2 = 0, h3 = 0, h4 = 0, h5 = 0, h6 = 0;
+      for (let x = 0; x < size; x++) {
+        const mod = modules[yOffset + x]!;
+        if (mod === runColor) {
+          runX++;
+          if (runX === 5)
+            result += PENALTY_N1;
+          else if (runX > 5)
+            result++;
+        }
+        else {
+          let v = runX;
+          if (h0 === 0) v += size;
+          h6 = h5; h5 = h4; h4 = h3; h3 = h2; h2 = h1; h1 = h0; h0 = v;
+          if (runColor === 0) {
+            const core = h1 > 0 && h2 === h1 && h3 === h1 * 3 && h4 === h1 && h5 === h1;
+            if (core && h0 >= h1 * 4 && h6 >= h1) result += PENALTY_N3;
+            if (core && h6 >= h1 * 4 && h0 >= h1) result += PENALTY_N3;
+          }
+          runColor = mod;
+          runX = 1;
+        }
+      }
+      {
+        let currentRunLength = runX;
+        if (runColor === 1) {
+          let v = currentRunLength;
+          if (h0 === 0) v += size;
+          h6 = h5; h5 = h4; h4 = h3; h3 = h2; h2 = h1; h1 = h0; h0 = v;
+          currentRunLength = 0;
+        }
+        currentRunLength += size;
+        let v = currentRunLength;
+        if (h0 === 0) v += size;
+        h6 = h5; h5 = h4; h4 = h3; h3 = h2; h2 = h1; h1 = h0; h0 = v;
+        const core = h1 > 0 && h2 === h1 && h3 === h1 * 3 && h4 === h1 && h5 === h1;
+        if (core && h0 >= h1 * 4 && h6 >= h1) result += PENALTY_N3;
+        if (core && h6 >= h1 * 4 && h0 >= h1) result += PENALTY_N3;
+      }
+    }
+
+    // Adjacent modules in column having same color, and finder-like patterns
+    for (let x = 0; x < size; x++) {
+      let runColor = 0;
+      let runY = 0;
+      let h0 = 0, h1 = 0, h2 = 0, h3 = 0, h4 = 0, h5 = 0, h6 = 0;
+      for (let y = 0; y < size; y++) {
+        const mod = modules[y * size + x]!;
+        if (mod === runColor) {
+          runY++;
+          if (runY === 5)
+            result += PENALTY_N1;
+          else if (runY > 5)
+            result++;
+        }
+        else {
+          let v = runY;
+          if (h0 === 0) v += size;
+          h6 = h5; h5 = h4; h4 = h3; h3 = h2; h2 = h1; h1 = h0; h0 = v;
+          if (runColor === 0) {
+            const core = h1 > 0 && h2 === h1 && h3 === h1 * 3 && h4 === h1 && h5 === h1;
+            if (core && h0 >= h1 * 4 && h6 >= h1) result += PENALTY_N3;
+            if (core && h6 >= h1 * 4 && h0 >= h1) result += PENALTY_N3;
+          }
+          runColor = mod;
+          runY = 1;
+        }
+      }
+      {
+        let currentRunLength = runY;
+        if (runColor === 1) {
+          let v = currentRunLength;
+          if (h0 === 0) v += size;
+          h6 = h5; h5 = h4; h4 = h3; h3 = h2; h2 = h1; h1 = h0; h0 = v;
+          currentRunLength = 0;
+        }
+        currentRunLength += size;
+        let v = currentRunLength;
+        if (h0 === 0) v += size;
+        h6 = h5; h5 = h4; h4 = h3; h3 = h2; h2 = h1; h1 = h0; h0 = v;
+        const core = h1 > 0 && h2 === h1 && h3 === h1 * 3 && h4 === h1 && h5 === h1;
+        if (core && h0 >= h1 * 4 && h6 >= h1) result += PENALTY_N3;
+        if (core && h6 >= h1 * 4 && h0 >= h1) result += PENALTY_N3;
+      }
+    }
+
+    // 2*2 blocks of modules having same color
+    for (let y = 0; y < size - 1; y++) {
+      const yOffset = y * size;
+      const nextYOffset = yOffset + size;
+      for (let x = 0; x < size - 1; x++) {
+        const color = modules[yOffset + x]!;
+        if (color === modules[yOffset + x + 1]
+          && color === modules[nextYOffset + x]
+          && color === modules[nextYOffset + x + 1])
+          result += PENALTY_N2;
+      }
+    }
+
+    // Balance of dark and light modules
+    let dark = 0;
+    const total = size * size;
+    for (let i = 0; i < total; i++)
+      dark += modules[i]!;
+    const k = Math.ceil(Math.abs(dark * 20 - total * 10) / total) - 1;
+    assert(k >= 0 && k <= 9);
+    result += k * PENALTY_N4;
+    assert(result >= 0 && result <= 2_568_888);
+    return result;
+  }
+
+  private getAlignmentPatternPositions(): number[] {
+    if (this.version === 1)
+      return [];
+
+    const numAlign = ((this.version / 7) | 0) + 2;
+    const step = (this.version === 32)
+      ? 26
+      : Math.ceil((this.version * 4 + 4) / (numAlign * 2 - 2)) * 2;
+    const result = Array.from<number>({ length: numAlign });
+    result[0] = 6;
+    for (let i = numAlign - 1, pos = this.size - 7; i >= 1; i--, pos -= step)
+      result[i] = pos;
+    return result;
+  }
+}
diff --git a/core/encoding/src/qr/segment.ts b/core/encoding/src/qr/segment.ts
new file mode 100644
index 0000000..8030479
--- /dev/null
+++ b/core/encoding/src/qr/segment.ts
@@ -0,0 +1,82 @@
+import type { QrSegmentMode } from './types';
+import { ALPHANUMERIC_MAP, ALPHANUMERIC_REGEX, MODE_ALPHANUMERIC, MODE_BYTE, MODE_NUMERIC, NUMERIC_REGEX } from './constants';
+import { appendBits, toUtf8ByteArray } from './utils';
+
+/**
+ * A segment of character/binary/control data in a QR Code symbol.
+ * Instances of this class are immutable.
+ */
+export class QrSegment {
+  public constructor(
+    /** The mode indicator of this segment. */
+    public readonly mode: QrSegmentMode,
+    /** The length of this segment's unencoded data. */
+    public readonly numChars: number,
+    /** The data bits of this segment. */
+    public readonly bitData: readonly number[],
+  ) {
+    if (numChars < 0)
+      throw new RangeError('Invalid argument');
+  }
+}
+
+/** Returns a segment representing the given binary data encoded in byte mode. */
+export function makeBytes(data: ArrayLike<number>): QrSegment {
+  const bb: number[] = [];
+  for (let i = 0, len = data.length; i < len; i++)
+    appendBits(data[i]!, 8, bb);
+  return new QrSegment(MODE_BYTE, data.length, bb);
+}
+
+/** Returns a segment representing the given string of decimal digits encoded in numeric mode. */
+export function makeNumeric(digits: string): QrSegment {
+  if (!isNumeric(digits))
+    throw new RangeError('String contains non-numeric characters');
+  const bb: number[] = [];
+  for (let i = 0; i < digits.length;) {
+    const n = Math.min(digits.length - i, 3);
+    appendBits(Number.parseInt(digits.slice(i, i + n), 10), n * 3 + 1, bb);
+    i += n;
+  }
+  return new QrSegment(MODE_NUMERIC, digits.length, bb);
+}
+
+/** Returns a segment representing the given text string encoded in alphanumeric mode. */
+export function makeAlphanumeric(text: string): QrSegment {
+  if (!isAlphanumeric(text))
+    throw new RangeError('String contains unencodable characters in alphanumeric mode');
+  const bb: number[] = [];
+  let i: number;
+  for (i = 0; i + 2 <= text.length; i += 2) {
+    let temp = ALPHANUMERIC_MAP[text.charCodeAt(i)]! * 45;
+    temp += ALPHANUMERIC_MAP[text.charCodeAt(i + 1)]!;
+    appendBits(temp, 11, bb);
+  }
+  if (i < text.length)
+    appendBits(ALPHANUMERIC_MAP[text.charCodeAt(i)]!, 6, bb);
+  return new QrSegment(MODE_ALPHANUMERIC, text.length, bb);
+}
+
+/**
+ * Returns a new mutable list of zero or more segments to represent the given Unicode text string.
+ * The result may use various segment modes and switch modes to optimize the length of the bit stream.
+ */
+export function makeSegments(text: string): QrSegment[] {
+  if (text === '')
+    return [];
+  if (isNumeric(text))
+    return [makeNumeric(text)];
+  if (isAlphanumeric(text))
+    return [makeAlphanumeric(text)];
+  return [makeBytes(toUtf8ByteArray(text))];
+}
+
+/** Tests whether the given string can be encoded as a segment in numeric mode. */
+export function isNumeric(text: string): boolean {
+  return NUMERIC_REGEX.test(text);
+}
+
+/** Tests whether the given string can be encoded as a segment in alphanumeric mode. */
+export function isAlphanumeric(text: string): boolean {
+  return ALPHANUMERIC_REGEX.test(text);
+}
diff --git a/core/encoding/src/qr/types.ts b/core/encoding/src/qr/types.ts
new file mode 100644
index 0000000..cf60ba6
--- /dev/null
+++ b/core/encoding/src/qr/types.ts
@@ -0,0 +1,17 @@
+export type QrCodeEcc = readonly [ordinal: number, formatBits: number];
+
+export type QrSegmentMode = [
+  modeBits: number,
+  numBitsCharCount1: number,
+  numBitsCharCount2: number,
+  numBitsCharCount3: number,
+];
+
+export enum QrCodeDataType {
+  Border = -1,
+  Data = 0,
+  Function = 1,
+  Position = 2,
+  Timing = 3,
+  Alignment = 4,
+}
diff --git a/core/encoding/src/qr/utils.ts b/core/encoding/src/qr/utils.ts
new file mode 100644
index 0000000..9a29c32
--- /dev/null
+++ b/core/encoding/src/qr/utils.ts
@@ -0,0 +1,79 @@
+import type { QrCodeEcc, QrSegmentMode } from './types';
+import { ECC_CODEWORDS_PER_BLOCK, MAX_VERSION, MIN_VERSION, NUM_ERROR_CORRECTION_BLOCKS } from './constants';
+import type { QrSegment } from './segment';
+
+const utf8Encoder = new TextEncoder();
+
+/** Appends the given number of low-order bits of the given value to the buffer. */
+export function appendBits(val: number, len: number, bb: number[]): void {
+  if (len < 0 || len > 31 || val >>> len !== 0)
+    throw new RangeError('Value out of range');
+  for (let i = len - 1; i >= 0; i--)
+    bb.push((val >>> i) & 1);
+}
+
+/** Returns true iff the i'th bit of x is set to 1. */
+export function getBit(x: number, i: number): boolean {
+  return ((x >>> i) & 1) !== 0;
+}
+
+/** Throws an exception if the given condition is false. */
+export function assert(cond: boolean): asserts cond {
+  if (!cond)
+    throw new Error('Assertion error');
+}
+
+/** Returns a Uint8Array representing the given string encoded in UTF-8. */
+export function toUtf8ByteArray(str: string): Uint8Array {
+  return utf8Encoder.encode(str);
+}
+
+/** Returns the bit width of the character count field for a segment in this mode at the given version number. */
+export function numCharCountBits(mode: QrSegmentMode, ver: number): number {
+  return mode[((ver + 7) / 17 | 0) + 1]!;
+}
+
+/**
+ * Returns the number of data bits that can be stored in a QR Code of the given version number,
+ * after all function modules are excluded. This includes remainder bits, so it might not be a multiple of 8.
+ * The result is in the range [208, 29648].
+ */
+export function getNumRawDataModules(ver: number): number {
+  if (ver < MIN_VERSION || ver > MAX_VERSION)
+    throw new RangeError('Version number out of range');
+
+  let result = (16 * ver + 128) * ver + 64;
+  if (ver >= 2) {
+    const numAlign = (ver / 7 | 0) + 2;
+    result -= (25 * numAlign - 10) * numAlign - 55;
+    if (ver >= 7)
+      result -= 36;
+  }
+  assert(result >= 208 && result <= 29648);
+  return result;
+}
+
+/**
+ * Returns the number of 8-bit data (i.e. not error correction) codewords contained in any
+ * QR Code of the given version number and error correction level, with remainder bits discarded.
+ */
+export function getNumDataCodewords(ver: number, ecl: QrCodeEcc): number {
+  return (getNumRawDataModules(ver) / 8 | 0)
+    - ECC_CODEWORDS_PER_BLOCK[ecl[0]]![ver]!
+    * NUM_ERROR_CORRECTION_BLOCKS[ecl[0]]![ver]!;
+}
+
+/**
+ * Calculates and returns the number of bits needed to encode the given segments at the given version.
+ * The result is infinity if a segment has too many characters to fit its length field.
+ */
+export function getTotalBits(segs: readonly QrSegment[], version: number): number {
+  let result = 0;
+  for (const seg of segs) {
+    const ccbits = numCharCountBits(seg.mode, version);
+    if (seg.numChars >= (1 << ccbits))
+      return Number.POSITIVE_INFINITY;
+    result += 4 + ccbits + seg.bitData.length;
+  }
+  return result;
+}
diff --git a/core/encoding/src/reed-solomon/__test__/index.test.ts b/core/encoding/src/reed-solomon/__test__/index.test.ts
new file mode 100644
index 0000000..91eb771
--- /dev/null
+++ b/core/encoding/src/reed-solomon/__test__/index.test.ts
@@ -0,0 +1,115 @@
+import { describe, expect, it } from 'vitest';
+import { computeDivisor, computeRemainder, multiply } from '..';
+
+describe('multiply', () => {
+  it('multiplies zero by anything to get zero', () => {
+    expect(multiply(0, 0)).toBe(0);
+    expect(multiply(0, 1)).toBe(0);
+    expect(multiply(0, 255)).toBe(0);
+    expect(multiply(1, 0)).toBe(0);
+  });
+
+  it('multiplies by one (identity)', () => {
+    expect(multiply(1, 1)).toBe(1);
+    expect(multiply(1, 42)).toBe(42);
+    expect(multiply(42, 1)).toBe(42);
+    expect(multiply(1, 255)).toBe(255);
+  });
+
+  it('is commutative', () => {
+    expect(multiply(5, 7)).toBe(multiply(7, 5));
+    expect(multiply(0x53, 0xCA)).toBe(multiply(0xCA, 0x53));
+    expect(multiply(100, 200)).toBe(multiply(200, 100));
+  });
+
+  it('produces known GF(2^8) products', () => {
+    expect(multiply(2, 2)).toBe(4);
+    expect(multiply(2, 0x80)).toBe(0x1D);
+  });
+
+  it('throws on out of range inputs', () => {
+    expect(() => multiply(256, 0)).toThrow(RangeError);
+    expect(() => multiply(0, 256)).toThrow(RangeError);
+    expect(() => multiply(1000, 1000)).toThrow(RangeError);
+  });
+});
+
+describe('computeDivisor', () => {
+  it('computes a degree-1 divisor', () => {
+    expect(computeDivisor(1)).toEqual(Uint8Array.from([1]));
+  });
+
+  it('computes a degree-2 divisor', () => {
+    const result = computeDivisor(2);
+    expect(result).toHaveLength(2);
+    expect(result).toEqual(Uint8Array.from([3, 2]));
+  });
+
+  it('has correct length for arbitrary degrees', () => {
+    expect(computeDivisor(7)).toHaveLength(7);
+    expect(computeDivisor(10)).toHaveLength(10);
+    expect(computeDivisor(30)).toHaveLength(30);
+  });
+
+  it('returns Uint8Array', () => {
+    expect(computeDivisor(5)).toBeInstanceOf(Uint8Array);
+  });
+
+  it('throws on degree out of range', () => {
+    expect(() => computeDivisor(0)).toThrow(RangeError);
+    expect(() => computeDivisor(256)).toThrow(RangeError);
+    expect(() => computeDivisor(-1)).toThrow(RangeError);
+  });
+});
+
+describe('computeRemainder', () => {
+  it('returns zero remainder for empty data', () => {
+    const divisor = computeDivisor(4);
+    const result = computeRemainder([], divisor);
+    expect(result).toEqual(new Uint8Array(4));
+  });
+
+  it('produces non-zero remainder for non-empty data', () => {
+    const divisor = computeDivisor(7);
+    const data = [0x40, 0xD2, 0x75, 0x47, 0x76, 0x17, 0x32, 0x06, 0x27, 0x26, 0x96, 0xC6, 0xC6, 0x96, 0x70, 0xEC];
+    const result = computeRemainder(data, divisor);
+    expect(result).toHaveLength(7);
+    expect(result).toBeInstanceOf(Uint8Array);
+    for (const b of result) {
+      expect(b).toBeGreaterThanOrEqual(0);
+      expect(b).toBeLessThanOrEqual(255);
+    }
+  });
+
+  it('accepts Uint8Array as data input', () => {
+    const divisor = computeDivisor(7);
+    const data = Uint8Array.from([0x40, 0xD2, 0x75, 0x47]);
+    const result = computeRemainder(data, divisor);
+    expect(result).toHaveLength(7);
+    expect(result).toBeInstanceOf(Uint8Array);
+  });
+
+  it('remainder length matches divisor length', () => {
+    for (const degree of [1, 5, 10, 20]) {
+      const divisor = computeDivisor(degree);
+      const data = [1, 2, 3, 4, 5];
+      const result = computeRemainder(data, divisor);
+      expect(result).toHaveLength(degree);
+    }
+  });
+
+  it('produces correct ECC for QR Version 1-M reference data', () => {
+    const data = [0x40, 0xD2, 0x75, 0x47, 0x76, 0x17, 0x32, 0x06, 0x27, 0x26, 0x96, 0xC6, 0xC6, 0x96, 0x70, 0xEC];
+    const divisor = computeDivisor(10);
+    const result = computeRemainder(data, divisor);
+    expect(result).toEqual(Uint8Array.from([188, 42, 144, 19, 107, 175, 239, 253, 75, 224]));
+  });
+
+  it('is deterministic', () => {
+    const data = [0x10, 0x20, 0x30, 0x40, 0x50];
+    const divisor = computeDivisor(7);
+    const a = computeRemainder(data, divisor);
+    const b = computeRemainder(data, divisor);
+    expect(a).toEqual(b);
+  });
+});
diff --git a/core/encoding/src/reed-solomon/index.ts b/core/encoding/src/reed-solomon/index.ts
new file mode 100644
index 0000000..bbff108
--- /dev/null
+++ b/core/encoding/src/reed-solomon/index.ts
@@ -0,0 +1,92 @@
+/*
+ * Reed-Solomon error correction over GF(2^8/0x11D)
+ *
+ * Based on Project Nayuki's QR Code generator library (MIT License)
+ * https://www.nayuki.io/page/qr-code-generator-library
+ */
+
+/* -- GF(2^8) exp/log lookup tables (generator α=0x02, primitive polynomial 0x11D) -- */
+
+const GF_EXP = new Uint8Array(256);
+const GF_LOG = new Uint8Array(256);
+
+{
+  let x = 1;
+  for (let i = 0; i < 255; i++) {
+    GF_EXP[i] = x;
+    GF_LOG[x] = i;
+    x = (x << 1) ^ ((x >>> 7) * 0x11D);
+  }
+  GF_EXP[255] = GF_EXP[0]!;
+}
+
+/**
+ * Returns the product of the two given field elements modulo GF(2^8/0x11D).
+ * The arguments and result are unsigned 8-bit integers.
+ */
+export function multiply(x: number, y: number): number {
+  if (x >>> 8 !== 0 || y >>> 8 !== 0)
+    throw new RangeError('Byte out of range');
+
+  if (x === 0 || y === 0)
+    return 0;
+
+  return GF_EXP[(GF_LOG[x]! + GF_LOG[y]!) % 255]!;
+}
+
+/**
+ * Returns a Reed-Solomon ECC generator polynomial for the given degree.
+ *
+ * Polynomial coefficients are stored from highest to lowest power, excluding the leading term which is always 1.
+ * For example the polynomial x^3 + 255x^2 + 8x + 93 is stored as the uint8 array [255, 8, 93].
+ */
+export function computeDivisor(degree: number): Uint8Array {
+  if (degree < 1 || degree > 255)
+    throw new RangeError('Degree out of range');
+
+  const result = new Uint8Array(degree);
+  result[degree - 1] = 1;
+
+  // Compute the product polynomial (x - r^0) * (x - r^1) * ... * (x - r^{degree-1}),
+  // dropping the leading term which is always 1x^degree.
+  // r = 0x02, a generator element of GF(2^8/0x11D).
+  let root = 0; // GF_LOG[1] = 0, i.e. α^0 = 1
+  for (let i = 0; i < degree; i++) {
+    // Multiply the current product by (x - r^i)
+    for (let j = 0; j < degree; j++) {
+      // result[j] = multiply(result[j], α^root) — inlined for performance
+      if (result[j] !== 0)
+        result[j] = GF_EXP[(GF_LOG[result[j]!]! + root) % 255]!;
+      if (j + 1 < degree)
+        result[j]! ^= result[j + 1]!;
+    }
+    root = (root + 1) % 255; // root tracks log(α^i) = i mod 255
+  }
+
+  return result;
+}
+
+/**
+ * Returns the Reed-Solomon error correction codeword for the given data and divisor polynomials.
+ */
+export function computeRemainder(data: ArrayLike<number>, divisor: Uint8Array): Uint8Array {
+  const len = divisor.length;
+  const result = new Uint8Array(len);
+
+  for (let d = 0, dLen = data.length; d < dLen; d++) {
+    const factor = data[d]! ^ result[0]!;
+    // Shift left by 1 position (native memcpy)
+    result.copyWithin(0, 1);
+    result[len - 1] = 0;
+    // XOR with divisor scaled by factor — inlined GF multiply for performance
+    if (factor !== 0) {
+      const logFactor = GF_LOG[factor]!;
+      for (let i = 0; i < len; i++) {
+        if (divisor[i] !== 0)
+          result[i]! ^= GF_EXP[(GF_LOG[divisor[i]!]! + logFactor) % 255]!;
+      }
+    }
+  }
+
+  return result;
+}
diff --git a/core/encoding/tsconfig.json b/core/encoding/tsconfig.json
new file mode 100644
index 0000000..2781e66
--- /dev/null
+++ b/core/encoding/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.src.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/core/encoding/tsconfig.node.json b/core/encoding/tsconfig.node.json
new file mode 100644
index 0000000..edc474f
--- /dev/null
+++ b/core/encoding/tsconfig.node.json
@@ -0,0 +1,8 @@
+{
+  "extends": "@robonen/tsconfig/tsconfig.node.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo"
+  },
+  "include": ["*.config.ts"]
+}
diff --git a/core/encoding/tsconfig.src.json b/core/encoding/tsconfig.src.json
new file mode 100644
index 0000000..6661594
--- /dev/null
+++ b/core/encoding/tsconfig.src.json
@@ -0,0 +1,9 @@
+{
+  "extends": "@robonen/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "composite": true,
+    "types": [],
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.src.tsbuildinfo"
+  },
+  "include": ["src/**/*.ts"]
+}
diff --git a/core/encoding/tsdown.config.ts b/core/encoding/tsdown.config.ts
new file mode 100644
index 0000000..6e391e5
--- /dev/null
+++ b/core/encoding/tsdown.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from 'tsdown';
+import { sharedConfig } from '@robonen/tsdown';
+
+export default defineConfig({
+  ...sharedConfig,
+  tsconfig: './tsconfig.src.json',
+  entry: ['src/index.ts'],
+});
diff --git a/core/encoding/vitest.config.ts b/core/encoding/vitest.config.ts
new file mode 100644
index 0000000..4ac6027
--- /dev/null
+++ b/core/encoding/vitest.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    environment: 'node',
+  },
+});
diff --git a/core/fetch/README.md b/core/fetch/README.md
new file mode 100644
index 0000000..3d61378
--- /dev/null
+++ b/core/fetch/README.md
@@ -0,0 +1,376 @@
+# @robonen/fetch
+
+A lightweight, type-safe `fetch` wrapper with interceptors, retry, timeout, and a composable plugin system — V8-optimized internals, zero runtime dependencies beyond the standard library.
+
+```ts
+import { $fetch } from '@robonen/fetch';
+
+const user = await $fetch<User>('https://api.example.com/users/1');
+//    ^? User — body is parsed and typed for you
+```
+
+## Install
+
+```bash
+pnpm install @robonen/fetch
+```
+
+## Why
+
+`globalThis.fetch` is great primitive plumbing, but every app re-implements the same layer on top of it: JSON parsing, throwing on `4xx`/`5xx`, base URLs, query strings, retries, timeouts, auth headers. `@robonen/fetch` is that layer — small, typed, and built so attaching features costs nothing on the hot path.
+
+- **🎯 Type-safe** — response data, options, and plugin-contributed fields are all inferred.
+- **📦 Smart bodies** — plain objects are JSON-serialized; `FormData`/`Blob`/streams pass through untouched.
+- **🧠 Auto-parsing** — response decoded from `Content-Type`, or forced via `responseType`.
+- **💥 Errors that throw** — non-2xx responses reject with a rich `FetchError`.
+- **🔁 Retry & ⏱️ timeout** — built in, per-request configurable, sensible defaults.
+- **🪝 Lifecycle hooks** — `onRequest` / `onResponse` / `onRequestError` / `onResponseError`.
+- **🧩 Plugins** — composed once, typed, with onion-style `execute` middleware.
+- **🌱 `create` / `extend`** — derive pre-configured instances that inherit defaults and plugins.
+
+---
+
+## Quick start
+
+```ts
+import { $fetch } from '@robonen/fetch';
+
+// GET + automatic JSON parse
+const todo = await $fetch<Todo>('https://api.example.com/todos/1');
+
+// POST a plain object — serialized to JSON, content-type set for you
+const created = await $fetch<Todo>('https://api.example.com/todos', {
+  method: 'POST',
+  body: { title: 'Ship it', done: false },
+});
+
+// Method shortcuts
+await $fetch.get('https://api.example.com/todos');
+await $fetch.delete('https://api.example.com/todos/1');
+```
+
+---
+
+## Features
+
+### Type-safe responses
+
+The first type parameter types the parsed body; the second drives the parsing mode.
+
+```ts
+interface User { id: number; name: string }
+
+const user = await $fetch<User>('/users/1');        // Promise<User>
+const ids  = await $fetch<number[]>('/users/ids');  // Promise<number[]>
+```
+
+### Method shortcuts
+
+```ts
+await $fetch.get<User>('/users/1');
+await $fetch.post<User>('/users', { body: { name: 'Alice' } });
+await $fetch.put('/users/1', { body: patch });
+await $fetch.patch('/users/1', { body: partial });
+await $fetch.delete('/users/1');
+await $fetch.head('/users/1'); // returns the raw Response
+```
+
+### Base URL & query params
+
+```ts
+const api = $fetch.create({ baseURL: 'https://api.example.com/v1' });
+
+await api('/users');                              // → https://api.example.com/v1/users
+await api('/search', { query: { q: 'vue', page: 2 } });
+//                                                → ...?q=vue&page=2
+```
+
+`null` / `undefined` query values are dropped, existing query strings are preserved, and the query is inserted **before** any `#fragment`.
+
+### Automatic body serialization
+
+```ts
+// Plain object → JSON  (content-type: application/json + accept: application/json)
+await $fetch.post('/users', { body: { name: 'Alice' } });
+
+// content-type: application/x-www-form-urlencoded → form-encoded automatically
+await $fetch.post('/login', {
+  headers: { 'content-type': 'application/x-www-form-urlencoded' },
+  body: { user: 'a', pass: 'b' },               // → "user=a&pass=b"
+});
+
+// FormData / Blob / ReadableStream / raw string → passed through untouched
+await $fetch.post('/upload', { body: formData });
+await $fetch.post('/ndjson', { body: '{"a":1}\n{"b":2}' }); // you own content-type
+```
+
+### Response type detection
+
+The body is decoded from the response `Content-Type`, or you can force it:
+
+```ts
+const text = await $fetch<string, 'text'>('/readme', { responseType: 'text' });
+const blob = await $fetch<Blob, 'blob'>('/avatar.png', { responseType: 'blob' });
+const buf  = await $fetch<ArrayBuffer, 'arrayBuffer'>('/file', { responseType: 'arrayBuffer' });
+const sse  = await $fetch<ReadableStream, 'stream'>('/events', { responseType: 'stream' });
+
+// Custom parser (e.g. superjson, devalue)
+const data = await $fetch('/data', { parseResponse: txt => superjson.parse(txt) });
+```
+
+### Errors that throw
+
+Any `4xx`/`5xx` rejects with a `FetchError` carrying the request, parsed body, and status.
+
+```ts
+import { FetchError } from '@robonen/fetch';
+
+try {
+  await $fetch('/users/999');
+}
+catch (err) {
+  if (err instanceof FetchError) {
+    err.status;       // 404
+    err.statusText;   // "Not Found"
+    err.data;         // parsed error body
+    err.request;      // the URL/Request
+    err.options;      // resolved request options (hooks stripped)
+  }
+}
+
+// Opt out — get the parsed body even on error responses
+const body = await $fetch('/maybe-404', { ignoreResponseError: true });
+```
+
+### Retry
+
+Retries are built in. Defaults: **1 retry for non-payload methods** (GET/HEAD…), **0 for payload methods** (POST/PUT/PATCH/DELETE), on status `408, 409, 425, 429, 500, 502, 503, 504`.
+
+```ts
+await $fetch('/flaky', { retry: 3 });                      // up to 3 retries
+await $fetch('/flaky', { retry: 3, retryDelay: 200 });     // 200ms between attempts
+await $fetch('/flaky', { retry: 3, retryDelay: ctx => ctx.response?.status === 429 ? 1000 : 200 });
+await $fetch('/flaky', { retryStatusCodes: [429, 503] });  // custom allowlist
+await $fetch('/flaky', { retry: false });                  // disable
+```
+
+A **user-initiated abort never retries**; a timeout does.
+
+### Timeout
+
+Backed by `AbortSignal.timeout`, composed with any signal you pass. The timeout applies **per attempt**, so a slow attempt that times out still gets retried with a fresh signal.
+
+```ts
+await $fetch('/slow', { timeout: 5000 });
+
+// Combine with your own AbortController — both are honoured
+const controller = new AbortController();
+await $fetch('/slow', { timeout: 5000, signal: controller.signal });
+```
+
+### Lifecycle hooks
+
+```ts
+await $fetch('/users', {
+  onRequest: (ctx) => {
+    ctx.options.headers.set('authorization', `Bearer ${token}`);
+  },
+  onResponse: (ctx) => {
+    console.log(ctx.response.status, ctx.response._data);
+  },
+  onResponseError: (ctx) => {
+    report(ctx.response.status, ctx.request);
+  },
+  onRequestError: (ctx) => {
+    console.error('network failure', ctx.error);
+  },
+});
+```
+
+Hooks accept a single function or an array, and run after any plugin hooks for the same phase.
+
+---
+
+## Instances: `create` / `extend`
+
+Derive a configured instance. Defaults and plugins are merged; child wins on conflicts.
+
+```ts
+const api = $fetch.create({
+  baseURL: 'https://api.example.com',
+  headers: { 'x-app': 'web' },
+  retry: 2,
+});
+
+// `extend` is an alias for `create` — layer on more defaults / plugins
+const billing = api.extend({ baseURL: 'https://billing.example.com' });
+
+await api('/users');        // x-app + retry:2 inherited
+await billing('/invoices'); // inherits headers/retry, overrides baseURL
+```
+
+Need the raw `Response`, or the underlying native fetch?
+
+```ts
+const res = await $fetch.raw<User>('/users/1');
+res._data;   // parsed body
+res.headers; // full Response API
+
+await $fetch.native('https://example.com'); // untouched globalThis.fetch
+```
+
+---
+
+## Plugins
+
+A plugin is a reusable bundle of **defaults**, **typed options**, **lifecycle hooks**, and optional **`execute` middleware**. Plugins are composed once at `createFetch` time — attaching them adds zero per-request overhead beyond the hooks themselves.
+
+```ts
+import { createFetch, definePlugin } from '@robonen/fetch';
+```
+
+### Auth header injection — with a typed per-request option
+
+```ts
+const auth = definePlugin<'auth', { token?: string }>({
+  name: 'auth',
+  hooks: {
+    onRequest: (ctx) => {
+      const token = (ctx.options as { token?: string }).token;
+      if (token) ctx.options.headers.set('authorization', `Bearer ${token}`);
+    },
+  },
+});
+
+const api = createFetch({ plugins: [auth] });
+
+await api('/me', { token: 'xyz' }); // `token` is type-checked thanks to the plugin
+```
+
+### Token auto-refresh on 401
+
+```ts
+function createAuthPlugin(getAccessToken: () => Promise<string>) {
+  let current: Promise<string> | undefined;
+  const refresh = () => (current ??= getAccessToken().finally(() => { current = undefined; }));
+
+  return definePlugin<'auth', { skipAuth?: boolean }>({
+    name: 'auth',
+    defaults: { retry: 1, retryStatusCodes: [401, 408, 429, 500, 502, 503, 504] },
+    hooks: {
+      onRequest: async (ctx) => {
+        if ((ctx.options as { skipAuth?: boolean }).skipAuth) return;
+        ctx.options.headers.set('authorization', `Bearer ${await refresh()}`);
+      },
+      onResponseError: async (ctx) => {
+        if (ctx.response.status !== 401) return;
+        current = undefined; // invalidate; the retry picks up a fresh token
+        ctx.options.headers.set('authorization', `Bearer ${await refresh()}`);
+      },
+    },
+  });
+}
+```
+
+### Response envelope unwrapping — `{ data, meta }` → `data`
+
+```ts
+const unwrap = definePlugin({
+  name: 'unwrap',
+  hooks: {
+    onResponse: (ctx) => {
+      const body = ctx.response._data as { data?: unknown } | undefined;
+      if (body && typeof body === 'object' && 'data' in body) {
+        ctx.response._data = body.data;
+      }
+    },
+  },
+});
+```
+
+### `execute` middleware — onion-style wrapping
+
+`execute` wraps the whole fetch attempt (the built-in `retry` is itself an `execute` middleware). Middlewares may call `next()` zero, one, or many times.
+
+```ts
+const logger = definePlugin({
+  name: 'logger',
+  execute: async (ctx, next) => {
+    const start = performance.now();
+    try {
+      await next(); // run the attempt (+ inner middlewares)
+      console.log(`${ctx.request} → ${ctx.response?.status} in ${(performance.now() - start) | 0}ms`);
+    }
+    catch (err) {
+      console.error(`${ctx.request} failed in ${(performance.now() - start) | 0}ms`);
+      throw err;
+    }
+  },
+});
+```
+
+### Composing — order matters
+
+Hooks run in registration order; the user's per-request hook runs last.
+
+```ts
+const api = createFetch({
+  baseURL: 'https://api.example.com',
+  plugins: [createAuthPlugin(fetchToken), logger, unwrap],
+});
+
+// Children inherit every parent plugin and may add their own
+const idempotency = definePlugin<'idempotency', { idempotencyKey?: string }>({
+  name: 'idempotency',
+  hooks: {
+    onRequest: (ctx) => {
+      const m = (ctx.options.method ?? 'GET').toUpperCase();
+      if (m === 'GET' || m === 'HEAD') return;
+      const key = (ctx.options as { idempotencyKey?: string }).idempotencyKey ?? crypto.randomUUID();
+      ctx.options.headers.set('idempotency-key', key);
+    },
+  },
+});
+
+const billing = api.extend({ baseURL: 'https://billing.example.com' }, { plugins: [idempotency] });
+await billing('/invoices', { method: 'POST', body: { amount: 100 } });
+```
+
+---
+
+## API reference
+
+### `$fetch(request, options?)` / `createFetch(globalOptions?)`
+
+| Option              | Type                                  | Description |
+| ------------------- | ------------------------------------- | ----------- |
+| `baseURL`           | `string`                              | Prepended to relative request URLs. |
+| `query`             | `Record<string, …>`                   | Serialized and appended to the URL. |
+| `body`              | `RequestInit['body'] \| object \| array` | Objects are JSON-serialized. |
+| `responseType`      | `'json' \| 'text' \| 'blob' \| 'arrayBuffer' \| 'stream'` | Forces the parse mode. |
+| `parseResponse`     | `(text: string) => T`                 | Custom body parser. |
+| `ignoreResponseError` | `boolean`                           | Don't throw on `4xx`/`5xx`. |
+| `retry`             | `number \| false`                     | Retry attempts on failure. |
+| `retryDelay`        | `number \| (ctx) => number`           | Delay between retries. |
+| `retryStatusCodes`  | `readonly number[]`                   | Status codes that trigger a retry. |
+| `timeout`           | `number`                              | Per-attempt timeout in ms. |
+| `onRequest` / `onResponse` / `onRequestError` / `onResponseError` | hook(s) | Lifecycle callbacks. |
+
+…plus every native `RequestInit` field (`headers`, `method`, `signal`, `credentials`, …).
+
+### Instance members
+
+| Member            | Description |
+| ----------------- | ----------- |
+| `$fetch(req, o?)` | Returns the parsed body. |
+| `$fetch.raw(req, o?)` | Returns the full `Response` with a parsed `_data`. |
+| `$fetch.get/post/put/patch/delete/head` | Method shortcuts. |
+| `$fetch.create(defaults?, globalOptions?)` | New instance with merged config. |
+| `$fetch.extend(...)` | Alias for `create`. |
+| `$fetch.native` | The underlying `globalThis.fetch`. |
+
+---
+
+## License
+
+Apache-2.0 © Robonen Andrew
diff --git a/core/fetch/docs/intro.vue b/core/fetch/docs/intro.vue
new file mode 100644
index 0000000..636f561
--- /dev/null
+++ b/core/fetch/docs/intro.vue
@@ -0,0 +1,153 @@
+<script setup lang="ts">
+// Landing hero for @robonen/fetch — static, SSR-safe content.
+const quickStart = `import { $fetch } from '@robonen/fetch';
+
+interface Todo {
+  id: number;
+  title: string;
+  done: boolean;
+}
+
+// GET + automatic JSON parse — the body is typed for you
+const todo = await $fetch<Todo>('https://api.example.com/todos/1');
+
+// POST a plain object — serialized to JSON, content-type set automatically
+const created = await $fetch<Todo>('https://api.example.com/todos', {
+  method: 'POST',
+  body: { title: 'Ship it', done: false },
+});
+
+// Method shortcuts
+await $fetch.get<Todo>('https://api.example.com/todos/1');
+await $fetch.delete('https://api.example.com/todos/1');`;
+
+const instances = `import { $fetch } from '@robonen/fetch';
+
+// Derive a pre-configured instance — defaults & plugins are inherited
+const api = $fetch.create({
+  baseURL: 'https://api.example.com/v1',
+  headers: { 'x-app': 'web' },
+  retry: 2,
+});
+
+await api('/users');                       // → /v1/users, retry:2, x-app header
+await api('/search', { query: { q: 'vue', page: 2 } });
+
+// 'extend' layers on more defaults / plugins; child wins on conflicts
+const billing = api.extend({ baseURL: 'https://billing.example.com' });`;
+</script>
+
+<template>
+  <div class="docs-section">
+    <div class="prose-docs">
+      <h1>@robonen/fetch</h1>
+      <p>
+        A lightweight, type-safe <code>fetch</code> wrapper with interceptors, retry,
+        timeout, and a composable plugin system — V8-optimized internals, zero runtime
+        dependencies beyond the standard library.
+      </p>
+    </div>
+
+    <div class="prose-docs">
+      <p>
+        <code>globalThis.fetch</code> is great primitive plumbing, but every app
+        re-implements the same layer on top of it: JSON parsing, throwing on
+        <code>4xx</code>/<code>5xx</code>, base URLs, query strings, retries, timeouts,
+        auth headers. <strong>@robonen/fetch</strong> is that layer — small, fully typed,
+        and built so attaching features costs nothing on the hot path.
+      </p>
+    </div>
+
+    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-5">
+        <h3 class="text-sm font-semibold text-(--fg)">Type-safe end to end</h3>
+        <p class="mt-1.5 text-sm text-(--fg-muted)">
+          Response data, request options, and plugin-contributed fields are all inferred —
+          the parsed body comes back typed, no casting required.
+        </p>
+      </div>
+
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-5">
+        <h3 class="text-sm font-semibold text-(--fg)">Smart bodies &amp; parsing</h3>
+        <p class="mt-1.5 text-sm text-(--fg-muted)">
+          Plain objects are JSON-serialized; <code>FormData</code>/<code>Blob</code>/streams
+          pass through untouched. Responses are decoded from <code>Content-Type</code> or
+          forced via <code>responseType</code>.
+        </p>
+      </div>
+
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-5">
+        <h3 class="text-sm font-semibold text-(--fg)">Retry, timeout &amp; errors</h3>
+        <p class="mt-1.5 text-sm text-(--fg-muted)">
+          Built-in retry and per-attempt timeout with sensible defaults, and non-2xx
+          responses reject with a rich <code>FetchError</code> carrying status, request,
+          and parsed body.
+        </p>
+      </div>
+
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-5">
+        <h3 class="text-sm font-semibold text-(--fg)">Hooks &amp; plugins</h3>
+        <p class="mt-1.5 text-sm text-(--fg-muted)">
+          Lifecycle hooks plus a typed, composable plugin system with onion-style
+          <code>execute</code> middleware — composed once, with zero per-request overhead
+          beyond the hooks themselves.
+        </p>
+      </div>
+    </div>
+
+    <div class="prose-docs">
+      <h2>Install</h2>
+    </div>
+
+    <DocsCode :code="`pnpm add @robonen/fetch`" lang="bash" />
+
+    <div class="prose-docs">
+      <h2>Quick start</h2>
+      <p>
+        Import the default <code>$fetch</code> instance — it is backed by
+        <code>globalThis.fetch</code> and ready to use. The first type parameter types the
+        parsed body.
+      </p>
+    </div>
+
+    <DocsCode :code="quickStart" lang="ts" />
+
+    <div class="prose-docs">
+      <h2>Configured instances</h2>
+      <p>
+        Use <code>create</code> (or its alias <code>extend</code>) to derive instances with
+        a <code>baseURL</code>, default headers, retry policy, and plugins. Configuration is
+        merged down the chain; the child wins on conflicts.
+      </p>
+    </div>
+
+    <DocsCode :code="instances" lang="ts" />
+
+    <div class="prose-docs">
+      <h2>Where to next</h2>
+      <p>
+        The full API reference is listed below. A few good places to start:
+      </p>
+      <ul>
+        <li>
+          <NuxtLink to="/fetch/create-fetch"><code>createFetch</code></NuxtLink> — build a
+          fully configured instance with defaults and plugins.
+        </li>
+        <li>
+          <NuxtLink to="/fetch/define-plugin"><code>definePlugin</code></NuxtLink> — bundle
+          defaults, typed options, hooks, and <code>execute</code> middleware into a
+          reusable plugin.
+        </li>
+        <li>
+          <NuxtLink to="/fetch/fetch-error"><code>FetchError</code></NuxtLink> — the rich
+          error thrown on non-2xx responses.
+        </li>
+        <li>
+          <NuxtLink to="/fetch/build-url"><code>buildURL</code></NuxtLink> and
+          <NuxtLink to="/fetch/detect-response-type"><code>detectResponseType</code></NuxtLink>
+          — the URL and response-type helpers used internally, exported for reuse.
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
diff --git a/core/fetch/eslint.config.ts b/core/fetch/eslint.config.ts
new file mode 100644
index 0000000..e703f35
--- /dev/null
+++ b/core/fetch/eslint.config.ts
@@ -0,0 +1,3 @@
+import { base, compose, imports, stylistic, typescript } from '@robonen/eslint';
+
+export default compose(base, typescript, imports, stylistic);
diff --git a/core/fetch/jsr.json b/core/fetch/jsr.json
new file mode 100644
index 0000000..ae321cf
--- /dev/null
+++ b/core/fetch/jsr.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://jsr.io/schema/config-file.v1.json",
+  "name": "@robonen/fetch",
+  "version": "0.0.1",
+  "exports": "./src/index.ts"
+}
diff --git a/core/fetch/package.json b/core/fetch/package.json
new file mode 100644
index 0000000..b95f1d1
--- /dev/null
+++ b/core/fetch/package.json
@@ -0,0 +1,55 @@
+{
+  "name": "@robonen/fetch",
+  "version": "0.0.1",
+  "license": "Apache-2.0",
+  "description": "A lightweight, type-safe fetch wrapper with interceptors, retry, and V8-optimized internals",
+  "keywords": [
+    "fetch",
+    "http",
+    "request",
+    "tools"
+  ],
+  "author": "Robonen Andrew <robonenandrew@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/robonen/tools.git",
+    "directory": "core/fetch"
+  },
+  "packageManager": "pnpm@10.33.2",
+  "engines": {
+    "node": ">=24.13.1"
+  },
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "scripts": {
+    "lint:check": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "test": "vitest run",
+    "dev": "vitest dev",
+    "build": "tsdown"
+  },
+  "dependencies": {
+    "@robonen/stdlib": "workspace:*"
+  },
+  "devDependencies": {
+    "@robonen/eslint": "workspace:*",
+    "@robonen/tsconfig": "workspace:*",
+    "@robonen/tsdown": "workspace:*",
+    "eslint": "catalog:",
+    "tsdown": "catalog:"
+  }
+}
diff --git a/core/fetch/src/error.test.ts b/core/fetch/src/error.test.ts
new file mode 100644
index 0000000..0ba7ba4
--- /dev/null
+++ b/core/fetch/src/error.test.ts
@@ -0,0 +1,71 @@
+import { FetchError, createFetchError } from './error';
+import { describe, expect, it } from 'vitest';
+import type { FetchContext } from './types';
+
+function makeContext(overrides: Partial<FetchContext> = {}): FetchContext {
+  return {
+    request: 'https://example.com/api',
+    options: { headers: new Headers() },
+    response: undefined,
+    error: undefined,
+    ...overrides,
+  } as FetchContext;
+}
+
+describe('FetchError', () => {
+  it('is an instance of Error', () => {
+    const err = new FetchError('oops');
+    expect(err).toBeInstanceOf(Error);
+    expect(err).toBeInstanceOf(FetchError);
+  });
+
+  it('has name "FetchError"', () => {
+    expect(new FetchError('x').name).toBe('FetchError');
+  });
+
+  it('preserves the message', () => {
+    expect(new FetchError('something went wrong').message).toBe('something went wrong');
+  });
+});
+
+describe('createFetchError', () => {
+  it('includes the request URL in the message', () => {
+    const err = createFetchError(makeContext());
+    expect(err.message).toContain('https://example.com/api');
+  });
+
+  it('appends status information when a response is present', () => {
+    const response = new Response('', { status: 404, statusText: 'Not Found' });
+    const err = createFetchError(makeContext({ response: response as never }));
+    expect(err.message).toContain('404');
+    expect(err.message).toContain('Not Found');
+    expect(err.status).toBe(404);
+    expect(err.statusCode).toBe(404);
+    expect(err.statusText).toBe('Not Found');
+    expect(err.statusMessage).toBe('Not Found');
+  });
+
+  it('appends the underlying error message when present', () => {
+    const networkErr = new Error('Failed to fetch');
+    const err = createFetchError(makeContext({ error: networkErr }));
+    expect(err.message).toContain('Failed to fetch');
+  });
+
+  it('populates response._data as data', () => {
+    const response = Object.assign(new Response('', { status: 422 }), { _data: { code: 42 } });
+    const err = createFetchError(makeContext({ response: response as never }));
+    expect(err.data).toEqual({ code: 42 });
+  });
+
+  it('works with a URL object as request', () => {
+    const ctx = makeContext({ request: new URL('https://example.com/test') });
+    const err = createFetchError(ctx);
+    expect(err.message).toContain('https://example.com/test');
+  });
+
+  it('works with a Request object as request', () => {
+    const ctx = makeContext({ request: new Request('https://example.com/req') });
+    const err = createFetchError(ctx);
+    expect(err.message).toContain('https://example.com/req');
+  });
+});
diff --git a/core/fetch/src/error.ts b/core/fetch/src/error.ts
new file mode 100644
index 0000000..0474f26
--- /dev/null
+++ b/core/fetch/src/error.ts
@@ -0,0 +1,80 @@
+import type { FetchContext, FetchErrorOptions, FetchRequest, FetchResponse, IFetchError, ResponseType } from './types';
+import { omit } from '@robonen/stdlib';
+
+/**
+ * @name FetchError
+ * @category Fetch
+ * @description Error thrown by $fetch on network failures or non-2xx responses
+ *
+ * @since 0.0.1
+ */
+export class FetchError<T = unknown> extends Error implements IFetchError<T> {
+  request: FetchRequest | undefined;
+  options: FetchErrorOptions | undefined;
+  response: FetchResponse<T> | undefined;
+  data: T | undefined;
+  status: number | undefined;
+  statusText: string | undefined;
+  statusCode: number | undefined;
+  statusMessage: string | undefined;
+
+  constructor(message: string) {
+    super(message);
+    this.name = 'FetchError';
+
+    this.request = undefined;
+    this.options = undefined;
+    this.response = undefined;
+    this.data = undefined;
+    this.status = undefined;
+    this.statusText = undefined;
+    this.statusCode = undefined;
+    this.statusMessage = undefined;
+  }
+}
+
+/**
+ * @name createFetchError
+ * @category Fetch
+ * @description Builds a FetchError from a FetchContext, extracting URL, status, and error message
+ *
+ * @param {FetchContext} context - The context at the point of failure
+ * @returns {FetchError} A populated FetchError instance
+ *
+ * @since 0.0.1
+ */
+export function createFetchError<T = unknown, R extends ResponseType = ResponseType>(context: FetchContext<T, R>): FetchError<T> {
+  const url
+    = typeof context.request === 'string'
+      ? context.request
+      : context.request instanceof URL
+        ? context.request.href
+        : context.request.url;
+
+  const statusPart = context.response
+    ? `${context.response.status} ${context.response.statusText}`
+    : '';
+
+  const errorPart = context.error?.message ?? '';
+
+  // Build message from non-empty parts
+  let message = url;
+  if (statusPart) message += ` ${statusPart}`;
+  if (errorPart) message += `: ${errorPart}`;
+
+  const error = new FetchError<T>(message);
+
+  error.request = context.request;
+  error.options = omit(context.options, ['onRequest', 'onRequestError', 'onResponse', 'onResponseError', 'retryDelay', 'parseResponse']);
+
+  if (context.response !== undefined) {
+    error.response = context.response;
+    error.data = context.response._data;
+    error.status = context.response.status;
+    error.statusText = context.response.statusText;
+    error.statusCode = context.response.status;
+    error.statusMessage = context.response.statusText;
+  }
+
+  return error;
+}
diff --git a/core/fetch/src/fetch.test.ts b/core/fetch/src/fetch.test.ts
new file mode 100644
index 0000000..9c0cf44
--- /dev/null
+++ b/core/fetch/src/fetch.test.ts
@@ -0,0 +1,619 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import type { Fetch } from './types';
+import { FetchError } from './error';
+import { createFetch } from './fetch';
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function makeFetchMock(
+  body: unknown = { ok: true },
+  init: ResponseInit = { status: 200 },
+  contentType = 'application/json',
+) {
+  return vi.fn<Fetch>().mockResolvedValue(
+    new Response(typeof body === 'string' ? body : JSON.stringify(body), {
+      ...init,
+      headers: { 'content-type': contentType, ...init.headers },
+    }),
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Basic fetch
+// ---------------------------------------------------------------------------
+
+describe('createFetch — basic', () => {
+  it('returns parsed JSON body', async () => {
+    const fetchMock = makeFetchMock({ id: 1 });
+    const $fetch = createFetch({ fetch: fetchMock });
+
+    const data = await $fetch<{ id: number }>('https://api.example.com/user');
+
+    expect(data).toEqual({ id: 1 });
+    expect(fetchMock).toHaveBeenCalledOnce();
+  });
+
+  it('passes options through to the underlying fetch', async () => {
+    const fetchMock = makeFetchMock({ done: true });
+    const $fetch = createFetch({ fetch: fetchMock });
+
+    await $fetch('https://api.example.com/task', {
+      method: 'POST',
+      headers: { 'x-token': 'abc' },
+    });
+
+    const [, init] = fetchMock.mock.calls[0] as [string, RequestInit];
+    expect((init.headers as Headers).get('x-token')).toBe('abc');
+    expect(init.method).toBe('POST');
+  });
+
+  it('uppercases the HTTP method', async () => {
+    const fetchMock = makeFetchMock({});
+    const $fetch = createFetch({ fetch: fetchMock });
+
+    await $fetch('https://api.example.com', { method: 'post' });
+
+    const [, init] = fetchMock.mock.calls[0] as [string, RequestInit];
+    expect(init.method).toBe('POST');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// raw
+// ---------------------------------------------------------------------------
+
+describe('$fetch.raw', () => {
+  it('returns a Response with _data', async () => {
+    const fetchMock = makeFetchMock({ value: 42 });
+    const $fetch = createFetch({ fetch: fetchMock });
+
+    const response = await $fetch.raw<{ value: number }>('https://api.example.com');
+
+    expect(response).toBeInstanceOf(Response);
+    expect(response._data).toEqual({ value: 42 });
+    expect(response.status).toBe(200);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Method shortcuts
+// ---------------------------------------------------------------------------
+
+describe('method shortcuts', () => {
+  it('$fetch.get sends a GET request', async () => {
+    const fetchMock = makeFetchMock({});
+    const $fetch = createFetch({ fetch: fetchMock });
+    await $fetch.get('https://api.example.com/items');
+    const [, init] = fetchMock.mock.calls[0] as [string, RequestInit];
+    expect(init.method).toBe('GET');
+  });
+
+  it('$fetch.post sends a POST request', async () => {
+    const fetchMock = makeFetchMock({});
+    const $fetch = createFetch({ fetch: fetchMock });
+    await $fetch.post('https://api.example.com/items', { body: { name: 'x' } });
+    const [, init] = fetchMock.mock.calls[0] as [string, RequestInit];
+    expect(init.method).toBe('POST');
+  });
+
+  it('$fetch.put sends a PUT request', async () => {
+    const fetchMock = makeFetchMock({});
+    const $fetch = createFetch({ fetch: fetchMock });
+    await $fetch.put('https://api.example.com/items/1', { body: { name: 'y' } });
+    const [, init] = fetchMock.mock.calls[0] as [string, RequestInit];
+    expect(init.method).toBe('PUT');
+  });
+
+  it('$fetch.patch sends a PATCH request', async () => {
+    const fetchMock = makeFetchMock({});
+    const $fetch = createFetch({ fetch: fetchMock });
+    await $fetch.patch('https://api.example.com/items/1', { body: { name: 'z' } });
+    const [, init] = fetchMock.mock.calls[0] as [string, RequestInit];
+    expect(init.method).toBe('PATCH');
+  });
+
+  it('$fetch.delete sends a DELETE request', async () => {
+    const fetchMock = makeFetchMock({});
+    const $fetch = createFetch({ fetch: fetchMock });
+    await $fetch.delete('https://api.example.com/items/1');
+    const [, init] = fetchMock.mock.calls[0] as [string, RequestInit];
+    expect(init.method).toBe('DELETE');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// baseURL
+// ---------------------------------------------------------------------------
+
+describe('baseURL', () => {
+  it('prepends baseURL to a relative path', async () => {
+    const fetchMock = makeFetchMock({});
+    const $fetch = createFetch({ fetch: fetchMock });
+
+    await $fetch('/users', { baseURL: 'https://api.example.com/v1' });
+
+    const [url] = fetchMock.mock.calls[0] as [string];
+    expect(url).toBe('https://api.example.com/v1/users');
+  });
+
+  it('inherits baseURL from create() defaults', async () => {
+    const fetchMock = makeFetchMock({});
+    const api = createFetch({ fetch: fetchMock }).create({ baseURL: 'https://api.example.com' });
+
+    await api('/health');
+
+    const [url] = fetchMock.mock.calls[0] as [string];
+    expect(url).toBe('https://api.example.com/health');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Query params
+// ---------------------------------------------------------------------------
+
+describe('query params', () => {
+  it('appends query to the request URL', async () => {
+    const fetchMock = makeFetchMock([]);
+    const $fetch = createFetch({ fetch: fetchMock });
+
+    await $fetch('https://api.example.com/items', { query: { page: 2, limit: 10 } });
+
+    const [url] = fetchMock.mock.calls[0] as [string];
+    expect(url).toContain('page=2');
+    expect(url).toContain('limit=10');
+  });
+
+  it('merges default query with per-request query', async () => {
+    const fetchMock = makeFetchMock([]);
+    const $fetch = createFetch({ fetch: fetchMock }).create({
+      baseURL: 'https://api.example.com',
+      query: { version: 2 },
+    });
+
+    await $fetch('/items', { query: { page: 1 } });
+
+    const [url] = fetchMock.mock.calls[0] as [string];
+    expect(url).toContain('version=2');
+    expect(url).toContain('page=1');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// JSON body serialisation
+// ---------------------------------------------------------------------------
+
+describe('JSON body serialisation', () => {
+  it('serialises plain objects and sets content-type to application/json', async () => {
+    const fetchMock = makeFetchMock({ ok: true });
+    const $fetch = createFetch({ fetch: fetchMock });
+
+    await $fetch('https://api.example.com/users', {
+      method: 'POST',
+      body: { name: 'Alice' },
+    });
+
+    const [, init] = fetchMock.mock.calls[0] as [string, RequestInit];
+    expect(init.body).toBe('{"name":"Alice"}');
+    expect((init.headers as Headers).get('content-type')).toBe('application/json');
+  });
+
+  it('respects a pre-set content-type header', async () => {
+    const fetchMock = makeFetchMock({ ok: true });
+    const $fetch = createFetch({ fetch: fetchMock });
+
+    await $fetch('https://api.example.com/form', {
+      method: 'POST',
+      headers: { 'content-type': 'application/x-www-form-urlencoded' },
+      body: { key: 'value' },
+    });
+
+    const [, init] = fetchMock.mock.calls[0] as [string, RequestInit];
+    expect(init.body).toBe('key=value');
+  });
+
+  it('passes a raw string body through without forcing a JSON content-type', async () => {
+    const fetchMock = makeFetchMock({ ok: true });
+    const $fetch = createFetch({ fetch: fetchMock });
+
+    await $fetch('https://api.example.com/raw', {
+      method: 'POST',
+      body: 'plain text payload',
+    });
+
+    const [, init] = fetchMock.mock.calls[0] as [string, RequestInit];
+    expect(init.body).toBe('plain text payload');
+    expect((init.headers as Headers).get('content-type')).toBeNull();
+    expect((init.headers as Headers).get('accept')).toBeNull();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Error handling
+// ---------------------------------------------------------------------------
+
+describe('error handling', () => {
+  it('throws FetchError on 4xx response', async () => {
+    const fetchMock = vi.fn().mockResolvedValue(
+      new Response('{"error":"not found"}', {
+        status: 404,
+        statusText: 'Not Found',
+        headers: { 'content-type': 'application/json' },
+      }),
+    );
+    const $fetch = createFetch({ fetch: fetchMock });
+
+    await expect($fetch('https://api.example.com/missing')).rejects.toBeInstanceOf(FetchError);
+  });
+
+  it('throws FetchError on 5xx response', async () => {
+    // Use mockImplementation so each retry attempt gets a fresh Response (body not yet read)
+    const fetchMock = vi
+      .fn()
+      .mockImplementation(async () => new Response('Internal Server Error', { status: 500, statusText: 'Internal Server Error' }));
+    const $fetch = createFetch({ fetch: fetchMock });
+
+    await expect($fetch('https://api.example.com/crash')).rejects.toThrow(FetchError);
+  });
+
+  it('does not throw when ignoreResponseError is true', async () => {
+    const fetchMock = vi.fn().mockResolvedValue(
+      new Response('{"error":"bad request"}', {
+        status: 400,
+        headers: { 'content-type': 'application/json' },
+      }),
+    );
+    const $fetch = createFetch({ fetch: fetchMock });
+
+    await expect(
+      $fetch('https://api.example.com/bad', { ignoreResponseError: true }),
+    ).resolves.toEqual({ error: 'bad request' });
+  });
+
+  it('throws FetchError on network error', async () => {
+    const fetchMock = vi.fn().mockRejectedValue(new TypeError('Failed to fetch'));
+    const $fetch = createFetch({ fetch: fetchMock });
+
+    await expect($fetch('https://api.example.com/offline')).rejects.toBeInstanceOf(FetchError);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Retry
+// ---------------------------------------------------------------------------
+
+describe('retry', () => {
+  it('retries once on 500 by default for GET', async () => {
+    const fetchMock = vi
+      .fn()
+      .mockResolvedValueOnce(new Response('error', { status: 500 }))
+      .mockResolvedValueOnce(
+        new Response('{"ok":true}', {
+          status: 200,
+          headers: { 'content-type': 'application/json' },
+        }),
+      );
+    const $fetch = createFetch({ fetch: fetchMock });
+
+    const data = await $fetch('https://api.example.com/flaky');
+
+    expect(fetchMock).toHaveBeenCalledTimes(2);
+    expect(data).toEqual({ ok: true });
+  });
+
+  it('does not retry POST by default', async () => {
+    const fetchMock = vi.fn().mockResolvedValue(new Response('error', { status: 500 }));
+    const $fetch = createFetch({ fetch: fetchMock });
+
+    await expect(
+      $fetch('https://api.example.com/task', { method: 'POST' }),
+    ).rejects.toBeInstanceOf(FetchError);
+
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('respects retry: false', async () => {
+    const fetchMock = vi.fn().mockResolvedValue(new Response('error', { status: 503 }));
+    const $fetch = createFetch({ fetch: fetchMock });
+
+    await expect(
+      $fetch('https://api.example.com/flaky', { retry: false }),
+    ).rejects.toBeInstanceOf(FetchError);
+
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('respects custom retryStatusCodes', async () => {
+    const fetchMock = vi
+      .fn()
+      .mockResolvedValueOnce(new Response('', { status: 418 }))
+      .mockResolvedValueOnce(
+        new Response('{"ok":true}', {
+          status: 200,
+          headers: { 'content-type': 'application/json' },
+        }),
+      );
+    const $fetch = createFetch({ fetch: fetchMock });
+
+    const data = await $fetch('https://api.example.com/teapot', {
+      retryStatusCodes: [418],
+    });
+
+    expect(fetchMock).toHaveBeenCalledTimes(2);
+    expect(data).toEqual({ ok: true });
+  });
+
+  it('does not retry a user-initiated abort', async () => {
+    const controller = new AbortController();
+    const fetchMock = vi.fn().mockImplementation((_url: string, init: RequestInit) =>
+      new Promise((_resolve, reject) => {
+        const signal = init.signal as AbortSignal;
+        signal.addEventListener('abort', () => reject(signal.reason));
+      }),
+    );
+    const $fetch = createFetch({ fetch: fetchMock });
+
+    const promise = $fetch('https://api.example.com/cancel', {
+      signal: controller.signal,
+      retry: 3,
+    });
+    controller.abort();
+
+    await expect(promise).rejects.toBeInstanceOf(FetchError);
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('clears a stale error on a successful retry before onResponse runs', async () => {
+    const fetchMock = vi
+      .fn()
+      .mockRejectedValueOnce(new TypeError('network down'))
+      .mockResolvedValueOnce(
+        new Response('{"ok":true}', {
+          status: 200,
+          headers: { 'content-type': 'application/json' },
+        }),
+      );
+    const $fetch = createFetch({ fetch: fetchMock });
+
+    let errorInResponseHook: unknown = 'unset';
+    const data = await $fetch('https://api.example.com/flaky', {
+      onResponse: (ctx) => {
+        errorInResponseHook = ctx.error;
+      },
+    });
+
+    expect(data).toEqual({ ok: true });
+    expect(fetchMock).toHaveBeenCalledTimes(2);
+    expect(errorInResponseHook).toBeUndefined();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Lifecycle hooks
+// ---------------------------------------------------------------------------
+
+describe('lifecycle hooks', () => {
+  it('calls onRequest before sending', async () => {
+    const fetchMock = makeFetchMock({});
+    const $fetch = createFetch({ fetch: fetchMock });
+    const calls: string[] = [];
+
+    await $fetch('https://api.example.com', {
+      onRequest: () => {
+        calls.push('request');
+      },
+    });
+
+    expect(calls).toContain('request');
+    expect(calls.indexOf('request')).toBeLessThan(1);
+  });
+
+  it('calls onResponse after a successful response', async () => {
+    const fetchMock = makeFetchMock({ data: 1 });
+    const $fetch = createFetch({ fetch: fetchMock });
+    const calls: string[] = [];
+
+    await $fetch('https://api.example.com', {
+      onResponse: () => {
+        calls.push('response');
+      },
+    });
+
+    expect(calls).toContain('response');
+  });
+
+  it('calls onResponseError for 4xx responses', async () => {
+    const fetchMock = vi.fn().mockResolvedValue(new Response('', { status: 401 }));
+    const $fetch = createFetch({ fetch: fetchMock });
+    const calls: string[] = [];
+
+    await expect(
+      $fetch('https://api.example.com/protected', {
+        retry: false,
+        onResponseError: () => {
+          calls.push('responseError');
+        },
+      }),
+    ).rejects.toBeInstanceOf(FetchError);
+
+    expect(calls).toContain('responseError');
+  });
+
+  it('calls onRequestError on network failure', async () => {
+    const fetchMock = vi.fn().mockRejectedValue(new TypeError('Network error'));
+    const $fetch = createFetch({ fetch: fetchMock });
+    const calls: string[] = [];
+
+    await expect(
+      $fetch('https://api.example.com/offline', {
+        retry: false,
+        onRequestError: () => {
+          calls.push('requestError');
+        },
+      }),
+    ).rejects.toBeInstanceOf(FetchError);
+
+    expect(calls).toContain('requestError');
+  });
+
+  it('supports multiple hooks as an array', async () => {
+    const fetchMock = makeFetchMock({});
+    const $fetch = createFetch({ fetch: fetchMock });
+    const calls: number[] = [];
+
+    await $fetch('https://api.example.com', {
+      onRequest: [
+        () => {
+          calls.push(1);
+        },
+        () => {
+          calls.push(2);
+        },
+      ],
+    });
+
+    expect(calls).toEqual([1, 2]);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// create / extend
+// ---------------------------------------------------------------------------
+
+describe('create and extend', () => {
+  it('creates a new instance with merged defaults', async () => {
+    const fetchMock = makeFetchMock({});
+    const $fetch = createFetch({ fetch: fetchMock });
+    const api = $fetch.create({ baseURL: 'https://api.example.com' });
+
+    await api('/ping');
+
+    const [url] = fetchMock.mock.calls[0] as [string];
+    expect(url).toBe('https://api.example.com/ping');
+  });
+
+  it('extend is an alias for create', async () => {
+    const fetchMock = makeFetchMock({});
+    const $fetch = createFetch({ fetch: fetchMock });
+    const api = $fetch.extend({ baseURL: 'https://api.example.com' });
+
+    await api('/ping');
+
+    const [url] = fetchMock.mock.calls[0] as [string];
+    expect(url).toBe('https://api.example.com/ping');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Response type variants
+// ---------------------------------------------------------------------------
+
+describe('response types', () => {
+  it('returns text when responseType is "text"', async () => {
+    const fetchMock = vi
+      .fn()
+      .mockResolvedValue(new Response('hello world', { headers: { 'content-type': 'text/plain' } }));
+    const $fetch = createFetch({ fetch: fetchMock });
+
+    const text = await $fetch<string, 'text'>('https://api.example.com/text', {
+      responseType: 'text',
+    });
+
+    expect(text).toBe('hello world');
+  });
+
+  it('returns a Blob when responseType is "blob"', async () => {
+    const fetchMock = vi
+      .fn()
+      .mockResolvedValue(new Response('binary', { headers: { 'content-type': 'image/png' } }));
+    const $fetch = createFetch({ fetch: fetchMock });
+
+    const blob = await $fetch<Blob, 'blob'>('https://api.example.com/img', {
+      responseType: 'blob',
+    });
+
+    expect(blob).toBeInstanceOf(Blob);
+  });
+
+  it('uses a custom parseResponse function', async () => {
+    const fetchMock = vi
+      .fn<Fetch>()
+      .mockResolvedValue(
+        new Response('{"value":10}', { headers: { 'content-type': 'application/json' } }),
+      );
+    const $fetch = createFetch({ fetch: fetchMock });
+
+    const data = await $fetch<{ value: number; custom: boolean }>('https://api.example.com/custom', {
+      parseResponse: text => ({ ...(JSON.parse(text) as { value: number }), custom: true }),
+    });
+
+    expect(data).toEqual({ value: 10, custom: true });
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Timeout
+// ---------------------------------------------------------------------------
+
+describe('timeout', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('aborts a request that exceeds the timeout', async () => {
+    // fetchMock that never resolves until the signal fires
+    const fetchMock = vi.fn().mockImplementation((_url: string, init: RequestInit) => {
+      return new Promise((_resolve, reject) => {
+        (init.signal as AbortSignal).addEventListener('abort', () => {
+          reject(new DOMException('The operation was aborted.', 'AbortError'));
+        });
+      });
+    });
+
+    const $fetch = createFetch({ fetch: fetchMock });
+
+    const promise = $fetch('https://api.example.com/slow', { timeout: 100, retry: false });
+
+    vi.advanceTimersByTime(200);
+
+    await expect(promise).rejects.toBeInstanceOf(FetchError);
+  });
+
+  it('uses a fresh, un-aborted timeout signal on each retry attempt', async () => {
+    let attempt = 0;
+    const fetchMock = vi.fn().mockImplementation((_url: string, init: RequestInit) => {
+      attempt += 1;
+      const signal = init.signal as AbortSignal;
+
+      // First attempt hangs until its own timeout fires.
+      if (attempt === 1) {
+        return new Promise((_resolve, reject) => {
+          signal.addEventListener('abort', () => reject(signal.reason));
+        });
+      }
+
+      // Retry must receive a brand-new signal, not the already-aborted one.
+      expect(signal.aborted).toBe(false);
+      return Promise.resolve(
+        new Response('{"ok":true}', {
+          status: 200,
+          headers: { 'content-type': 'application/json' },
+        }),
+      );
+    });
+
+    const $fetch = createFetch({ fetch: fetchMock });
+    const promise = $fetch('https://api.example.com/slow', { timeout: 100 });
+
+    // Fire attempt-1 timeout and let the retry proceed to attempt 2.
+    await vi.advanceTimersByTimeAsync(100);
+
+    await expect(promise).resolves.toEqual({ ok: true });
+    expect(fetchMock).toHaveBeenCalledTimes(2);
+  });
+});
diff --git a/core/fetch/src/fetch.ts b/core/fetch/src/fetch.ts
new file mode 100644
index 0000000..bd46d92
--- /dev/null
+++ b/core/fetch/src/fetch.ts
@@ -0,0 +1,345 @@
+import type { $Fetch, CreateFetchOptions, Fetch, FetchContext, FetchHook, FetchOptions, FetchPlugin, FetchRequest, FetchResponse, MappedResponseType, MergePluginOptions, ResolvedFetchOptions, ResponseType } from './types';
+import { isString } from '@robonen/stdlib';
+import { FetchError, createFetchError } from './error';
+import { composePlugins, runHookPhase } from './plugin';
+import { retryPlugin, timeoutPlugin } from './plugins';
+import {
+  NULL_BODY_STATUSES,
+  buildURL,
+  detectResponseType,
+  isJSONSerializable,
+  isPayloadMethod,
+  joinURL,
+  resolveFetchOptions,
+} from './utils';
+
+// ---------------------------------------------------------------------------
+// Module-scope constants and helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Built-in plugins prepended to every `createFetch` call.
+ * Frozen tuple: stable array identity + V8 can treat entries as constants.
+ */
+const BUILTIN_PLUGINS: readonly FetchPlugin[] = /* @__PURE__ */ Object.freeze([
+  retryPlugin(),
+  timeoutPlugin(),
+]) as readonly FetchPlugin[];
+
+/** Default HTTP method — hoisted once so string literal is interned and reused */
+const DEFAULT_METHOD = 'GET';
+
+/**
+ * V8/Node expose `Error.captureStackTrace`, browsers do not. Resolve once at
+ * module load so the error path doesn't pay a dynamic lookup + typeof check.
+ */
+const captureStackTrace: typeof Error.captureStackTrace | undefined
+  = typeof Error.captureStackTrace === 'function' ? Error.captureStackTrace : undefined;
+
+/**
+ * Parse a successful fetch Response body into `response._data` according to
+ * the caller's `parseResponse` / `responseType` options (or detected from
+ * Content-Type). Hoisted to module scope so `$fetchRaw` / `runAttempt`
+ * stay small and inlineable.
+ */
+async function parseResponseBody(
+  response: FetchResponse<unknown>,
+  options: ResolvedFetchOptions<ResponseType, unknown>,
+  method: string,
+): Promise<void> {
+  if (
+    response.body === null
+    || method === 'HEAD'
+    || NULL_BODY_STATUSES.has(response.status)
+  ) return;
+
+  const parseResponse = options.parseResponse;
+  const responseType = parseResponse !== undefined
+    ? 'json'
+    : (options.responseType ?? detectResponseType(response.headers.get('content-type') ?? ''));
+
+  switch (responseType) {
+    case 'json': {
+      const text = await response.text();
+      if (text.length > 0) {
+        response._data = parseResponse !== undefined ? parseResponse(text) : JSON.parse(text);
+      }
+      return;
+    }
+    case 'stream': {
+      response._data = response.body;
+      return;
+    }
+    default: {
+      response._data = await response[responseType]();
+    }
+  }
+}
+
+/**
+ * Serialize the request body for payload-bearing methods and set the
+ * appropriate content-type / accept / duplex hints. Mutates `options` in place.
+ */
+function serializeRequestBody(options: ResolvedFetchOptions<ResponseType, unknown>, method: string): void {
+  const body = options.body;
+  if (body === undefined || body === null || !isPayloadMethod(method)) return;
+
+  if (isJSONSerializable(body)) {
+    // A raw string body is passed through untouched — the caller owns its
+    // content-type (it may be plain text, NDJSON, GraphQL, etc.).
+    if (isString(body)) return;
+
+    const headers = options.headers;
+    const contentType = headers.get('content-type');
+
+    options.body = contentType === 'application/x-www-form-urlencoded'
+      ? new URLSearchParams(body as Record<string, string>).toString()
+      : JSON.stringify(body);
+
+    if (contentType === null) {
+      headers.set('content-type', 'application/json');
+    }
+    if (!headers.has('accept')) {
+      headers.set('accept', 'application/json');
+    }
+    return;
+  }
+
+  // Web Streams body — mark duplex if caller didn't set it explicitly.
+  // `options.duplex === undefined` avoids the `in` operator slow path on
+  // dictionary-mode objects and keeps the IC monomorphic on a single key load.
+  if (typeof (body as ReadableStream).pipeTo === 'function' && options.duplex === undefined) {
+    options.duplex = 'half';
+  }
+}
+
+/**
+ * Shortcut for method-specialized helpers (get/post/...). Avoids a spread
+ * allocation when `options` is undefined, which is the common case.
+ */
+function withMethod<O>(options: O | undefined, method: string): O & { method: string } {
+  return options === undefined
+    ? ({ method } as O & { method: string })
+    : ({ ...options, method } as O & { method: string });
+}
+
+// ---------------------------------------------------------------------------
+// createFetch
+// ---------------------------------------------------------------------------
+
+/**
+ * @name createFetch
+ * @category Fetch
+ * @description Creates a configured $fetch instance
+ *
+ * @param {CreateFetchOptions} [globalOptions={}] - Global defaults, custom fetch implementation, and plugins
+ * @returns {$Fetch} Configured fetch instance
+ *
+ * @since 0.0.1
+ */
+export function createFetch<Plugins extends readonly FetchPlugin[] = []>(
+  globalOptions: CreateFetchOptions<Plugins> = {},
+): $Fetch<Plugins> {
+  const fetchImpl = globalOptions.fetch ?? globalThis.fetch;
+
+  // Built-ins compose first, user plugins layer on top. composePlugins runs once.
+  const userPlugins = (globalOptions.plugins ?? []) as readonly FetchPlugin[];
+  const allPlugins = userPlugins.length === 0
+    ? BUILTIN_PLUGINS
+    : [...BUILTIN_PLUGINS, ...userPlugins];
+
+  const composed = composePlugins(
+    allPlugins,
+    globalOptions.defaults as FetchOptions | undefined,
+  );
+  const composedHooks = composed.hooks;
+  const composedExecute = composed.execute;
+  const composedDefaults = composed.defaults;
+
+  // -------------------------------------------------------------------------
+  // runAttempt — a single fetch attempt (fetch + body parse + response hooks)
+  // Closure over fetchImpl + composedHooks; stable shape per instance.
+  // -------------------------------------------------------------------------
+
+  async function runAttempt<T, R extends ResponseType>(context: FetchContext<T, R>): Promise<void> {
+    const options = context.options;
+
+    // Reset per-attempt outcome so a successful retry never carries a stale
+    // error/response from a previous attempt into the response hooks.
+    context.error = undefined;
+    context.response = undefined;
+
+    try {
+      context.response = await fetchImpl(context.request, options as RequestInit);
+    }
+    catch (err) {
+      context.error = err as Error;
+
+      if (composedHooks.onRequestError !== undefined || options.onRequestError !== undefined) {
+        await runHookPhase(
+          composedHooks.onRequestError as ReadonlyArray<FetchHook<FetchContext<T, R> & { error: Error }>> | undefined,
+          options.onRequestError,
+          context as FetchContext<T, R> & { error: Error },
+        );
+      }
+
+      throw createFetchError(context);
+    }
+
+    const response = context.response;
+    const method = options.method ?? DEFAULT_METHOD;
+
+    await parseResponseBody(response as FetchResponse<unknown>, options as unknown as ResolvedFetchOptions<ResponseType, unknown>, method);
+
+    if (composedHooks.onResponse !== undefined || options.onResponse !== undefined) {
+      await runHookPhase(
+        composedHooks.onResponse as ReadonlyArray<FetchHook<FetchContext<T, R> & { response: FetchResponse<T> }>> | undefined,
+        options.onResponse,
+        context as FetchContext<T, R> & { response: FetchResponse<T> },
+      );
+    }
+
+    const status = response.status;
+    if (!options.ignoreResponseError && status >= 400 && status < 600) {
+      if (composedHooks.onResponseError !== undefined || options.onResponseError !== undefined) {
+        await runHookPhase(
+          composedHooks.onResponseError as ReadonlyArray<FetchHook<FetchContext<T, R> & { response: FetchResponse<T> }>> | undefined,
+          options.onResponseError,
+          context as FetchContext<T, R> & { response: FetchResponse<T> },
+        );
+      }
+
+      throw createFetchError(context);
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // $fetchRaw — returns the full Response object with a parsed `_data` field
+  // -------------------------------------------------------------------------
+
+  const $fetchRaw = async function $fetchRaw<
+    T = unknown,
+    R extends ResponseType = 'json',
+  >(
+    _request: FetchRequest,
+    _options?: FetchOptions<R, T>,
+  ): Promise<FetchResponse<MappedResponseType<R, T>>> {
+    // Fixed key order → single hidden class for FetchContext across all requests
+    const context: FetchContext<T, R> = {
+      request: _request,
+      options: resolveFetchOptions(_request, _options, composedDefaults),
+      response: undefined,
+      error: undefined,
+    };
+
+    const options = context.options;
+
+    // Normalise method to uppercase before any hook or header logic, then
+    // cache the resolved method string for reuse below (avoids repeating
+    // `options.method ?? DEFAULT_METHOD` at every downstream call site).
+    let method: string;
+    if (options.method !== undefined) {
+      method = options.method.toUpperCase();
+      options.method = method;
+    }
+    else {
+      method = DEFAULT_METHOD;
+    }
+
+    if (composedHooks.onRequest !== undefined || options.onRequest !== undefined) {
+      await runHookPhase(
+        composedHooks.onRequest as ReadonlyArray<FetchHook<FetchContext<T, R>>> | undefined,
+        options.onRequest,
+        context,
+      );
+    }
+
+    // URL transformations — only when request is a plain string
+    if (isString(context.request)) {
+      if (options.baseURL !== undefined) {
+        context.request = joinURL(options.baseURL, context.request);
+      }
+
+      const query = options.query ?? options.params;
+      if (query !== undefined) {
+        context.request = buildURL(context.request, query);
+      }
+    }
+
+    serializeRequestBody(options as unknown as ResolvedFetchOptions<ResponseType, unknown>, method);
+
+    // -----------------------------------------------------------------------
+    // Execute — fast path (no execute middleware) vs onion chain
+    // -----------------------------------------------------------------------
+
+    try {
+      if (composedExecute === undefined) {
+        await runAttempt(context);
+      }
+      else {
+        await composedExecute(context as unknown as FetchContext, () => runAttempt(context));
+      }
+      return context.response as FetchResponse<MappedResponseType<R, T>>;
+    }
+    catch (err) {
+      const error = err instanceof FetchError ? err : createFetchError(context);
+
+      // V8 / Node.js — clip internal frames from the error stack trace
+      if (captureStackTrace !== undefined) {
+        captureStackTrace(error, $fetchRaw);
+      }
+
+      throw error;
+    }
+  };
+
+  // -------------------------------------------------------------------------
+  // $fetch — convenience wrapper that returns only the parsed data
+  // -------------------------------------------------------------------------
+
+  const $fetch = async function $fetch<T = unknown, R extends ResponseType = 'json'>(
+    request: FetchRequest,
+    options?: FetchOptions<R, T>,
+  ): Promise<MappedResponseType<R, T>> {
+    const response = await $fetchRaw<T, R>(request, options);
+    return response._data as MappedResponseType<R, T>;
+  } as $Fetch<Plugins>;
+
+  $fetch.raw = $fetchRaw;
+
+  $fetch.native = fetchImpl as Fetch;
+
+  $fetch.create = (<NewPlugins extends readonly FetchPlugin[] = []>(
+    defaults: FetchOptions = {},
+    customGlobalOptions: CreateFetchOptions<NewPlugins> = {},
+  ) =>
+    createFetch<[...Plugins, ...NewPlugins]>({
+      fetch: customGlobalOptions.fetch ?? globalOptions.fetch,
+      plugins: [
+        ...((globalOptions.plugins ?? []) as readonly FetchPlugin[]),
+        ...((customGlobalOptions.plugins ?? []) as readonly FetchPlugin[]),
+      ] as unknown as [...Plugins, ...NewPlugins],
+      defaults: {
+        ...(globalOptions.defaults as FetchOptions | undefined),
+        ...(customGlobalOptions.defaults as FetchOptions | undefined),
+        ...defaults,
+      } as FetchOptions & MergePluginOptions<[...Plugins, ...NewPlugins]>,
+    })) as $Fetch<Plugins>['create'];
+
+  $fetch.extend = $fetch.create;
+
+  // -------------------------------------------------------------------------
+  // Method shortcuts — `withMethod` keeps the fast path allocation-free
+  // when no per-request options are provided.
+  // -------------------------------------------------------------------------
+
+  type ShortcutOptions = FetchOptions & MergePluginOptions<Plugins>;
+  $fetch.get = ((req, opt) => $fetch(req, withMethod(opt, 'GET') as ShortcutOptions)) as $Fetch<Plugins>['get'];
+  $fetch.post = ((req, opt) => $fetch(req, withMethod(opt, 'POST') as ShortcutOptions)) as $Fetch<Plugins>['post'];
+  $fetch.put = ((req, opt) => $fetch(req, withMethod(opt, 'PUT') as ShortcutOptions)) as $Fetch<Plugins>['put'];
+  $fetch.patch = ((req, opt) => $fetch(req, withMethod(opt, 'PATCH') as ShortcutOptions)) as $Fetch<Plugins>['patch'];
+  $fetch.delete = ((req, opt) => $fetch(req, withMethod(opt, 'DELETE') as ShortcutOptions)) as $Fetch<Plugins>['delete'];
+  $fetch.head = ((req, opt) => $fetchRaw(req, withMethod(opt, 'HEAD') as ShortcutOptions)) as $Fetch<Plugins>['head'];
+
+  return $fetch;
+}
diff --git a/core/fetch/src/index.ts b/core/fetch/src/index.ts
new file mode 100644
index 0000000..f988fe5
--- /dev/null
+++ b/core/fetch/src/index.ts
@@ -0,0 +1,54 @@
+import { createFetch } from './fetch';
+
+export { createFetch } from './fetch';
+export { FetchError, createFetchError } from './error';
+export { composePlugins, definePlugin, runHookPhase } from './plugin';
+export type { ComposedPlugins } from './plugin';
+export { retryPlugin, timeoutPlugin } from './plugins';
+export {
+  isPayloadMethod,
+  isJSONSerializable,
+  detectResponseType,
+  buildURL,
+  joinURL,
+  callHooks,
+  resolveFetchOptions,
+} from './utils';
+export type {
+  $Fetch,
+  CreateFetchOptions,
+  Fetch,
+  FetchContext,
+  FetchErrorOptions,
+  FetchExecuteMiddleware,
+  FetchHook,
+  FetchHooks,
+  FetchOptions,
+  FetchPlugin,
+  FetchRequest,
+  FetchResponse,
+  IFetchError,
+  MappedResponseType,
+  MergePluginContext,
+  MergePluginOptions,
+  ResponseMap,
+  ResponseType,
+  ResolvedFetchOptions,
+} from './types';
+
+/**
+ * @name $fetch
+ * @category Fetch
+ * @description Default $fetch instance backed by globalThis.fetch
+ *
+ * @example
+ * const data = await $fetch<User>('https://api.example.com/users/1');
+ *
+ * @example
+ * const user = await $fetch.post<User>('https://api.example.com/users', {
+ *   body: { name: 'Alice' },
+ * });
+ *
+ * @since 0.0.1
+ */
+export const $fetch = createFetch();
diff --git a/core/fetch/src/plugin.test.ts b/core/fetch/src/plugin.test.ts
new file mode 100644
index 0000000..182f620
--- /dev/null
+++ b/core/fetch/src/plugin.test.ts
@@ -0,0 +1,380 @@
+import type { Fetch, FetchContext } from './types';
+import { describe, expect, expectTypeOf, it, vi } from 'vitest';
+import { FetchError } from './error';
+import { createFetch } from './fetch';
+import { definePlugin } from './plugin';
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function makeFetchMock(
+  body: unknown = { ok: true },
+  init: ResponseInit = { status: 200 },
+  contentType = 'application/json',
+) {
+  return vi.fn<Fetch>().mockResolvedValue(
+    new Response(typeof body === 'string' ? body : JSON.stringify(body), {
+      ...init,
+      headers: { 'content-type': contentType, ...init.headers },
+    }),
+  );
+}
+
+// ---------------------------------------------------------------------------
+// definePlugin — identity + inference
+// ---------------------------------------------------------------------------
+
+describe('definePlugin', () => {
+  it('returns the plugin object verbatim', () => {
+    const plugin = definePlugin({ name: 'noop' });
+    expect(plugin.name).toBe('noop');
+  });
+
+  it('preserves the const Name generic', () => {
+    const plugin = definePlugin({ name: 'auth' });
+    expectTypeOf(plugin.name).toEqualTypeOf<'auth'>();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Defaults merging
+// ---------------------------------------------------------------------------
+
+describe('plugin defaults', () => {
+  it('applies plugin defaults to every request', async () => {
+    const fetchMock = makeFetchMock({});
+    const baseUrl = definePlugin({
+      name: 'baseUrl',
+      defaults: { baseURL: 'https://api.example.com' },
+    });
+    const $fetch = createFetch({ fetch: fetchMock, plugins: [baseUrl] });
+
+    await $fetch('/users');
+
+    const [url] = fetchMock.mock.calls[0] as [string];
+    expect(url).toBe('https://api.example.com/users');
+  });
+
+  it('user defaults override plugin defaults', async () => {
+    const fetchMock = makeFetchMock({});
+    const plugin = definePlugin({
+      name: 'x',
+      defaults: { baseURL: 'https://plugin.example.com' },
+    });
+    const $fetch = createFetch({
+      fetch: fetchMock,
+      plugins: [plugin],
+      defaults: { baseURL: 'https://user.example.com' },
+    });
+
+    await $fetch('/x');
+
+    const [url] = fetchMock.mock.calls[0] as [string];
+    expect(url).toBe('https://user.example.com/x');
+  });
+
+  it('merges headers from plugin defaults and user defaults', async () => {
+    const fetchMock = makeFetchMock({});
+    const plugin = definePlugin({
+      name: 'hdrs',
+      defaults: { headers: { 'x-plugin': 'p' } },
+    });
+    const $fetch = createFetch({
+      fetch: fetchMock,
+      plugins: [plugin],
+      defaults: { headers: { 'x-user': 'u' } },
+    });
+
+    await $fetch('https://api.example.com');
+
+    const [, init] = fetchMock.mock.calls[0] as [string, RequestInit];
+    const headers = init.headers as Headers;
+    expect(headers.get('x-plugin')).toBe('p');
+    expect(headers.get('x-user')).toBe('u');
+  });
+
+  it('user headers win on conflict', async () => {
+    const fetchMock = makeFetchMock({});
+    const plugin = definePlugin({
+      name: 'hdrs',
+      defaults: { headers: { authorization: 'plugin' } },
+    });
+    const $fetch = createFetch({
+      fetch: fetchMock,
+      plugins: [plugin],
+      defaults: { headers: { authorization: 'user' } },
+    });
+
+    await $fetch('https://api.example.com');
+
+    const [, init] = fetchMock.mock.calls[0] as [string, RequestInit];
+    expect((init.headers as Headers).get('authorization')).toBe('user');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Hook ordering
+// ---------------------------------------------------------------------------
+
+describe('plugin hooks', () => {
+  it('runs plugin hooks before per-request hooks', async () => {
+    const fetchMock = makeFetchMock({});
+    const calls: string[] = [];
+    const plugin = definePlugin({
+      name: 'a',
+      hooks: {
+        onRequest: () => {
+          calls.push('plugin');
+        },
+      },
+    });
+    const $fetch = createFetch({ fetch: fetchMock, plugins: [plugin] });
+
+    await $fetch('https://api.example.com', {
+      onRequest: () => {
+        calls.push('user');
+      },
+    });
+
+    expect(calls).toEqual(['plugin', 'user']);
+  });
+
+  it('preserves plugin registration order across multiple plugins', async () => {
+    const fetchMock = makeFetchMock({});
+    const calls: string[] = [];
+    const a = definePlugin({
+      name: 'a',
+      hooks: { onRequest: () => { calls.push('a'); } },
+    });
+    const b = definePlugin({
+      name: 'b',
+      hooks: { onRequest: () => { calls.push('b'); } },
+    });
+    const $fetch = createFetch({ fetch: fetchMock, plugins: [a, b] });
+
+    await $fetch('https://api.example.com');
+
+    expect(calls).toEqual(['a', 'b']);
+  });
+
+  it('supports arrays of hooks inside a single plugin', async () => {
+    const fetchMock = makeFetchMock({});
+    const calls: string[] = [];
+    const plugin = definePlugin({
+      name: 'multi',
+      hooks: {
+        onRequest: [
+          () => { calls.push('1'); },
+          () => { calls.push('2'); },
+        ],
+      },
+    });
+    const $fetch = createFetch({ fetch: fetchMock, plugins: [plugin] });
+
+    await $fetch('https://api.example.com');
+
+    expect(calls).toEqual(['1', '2']);
+  });
+
+  it('invokes onResponse hook for successful responses', async () => {
+    const fetchMock = makeFetchMock({ id: 1 });
+    const seen: number[] = [];
+    const plugin = definePlugin({
+      name: 'r',
+      hooks: {
+        onResponse: (ctx) => {
+          if (ctx.response.status === 200) seen.push(ctx.response.status);
+        },
+      },
+    });
+    const $fetch = createFetch({ fetch: fetchMock, plugins: [plugin] });
+
+    await $fetch('https://api.example.com');
+
+    expect(seen).toEqual([200]);
+  });
+
+  it('invokes onResponseError hook for 4xx', async () => {
+    const fetchMock = vi.fn().mockResolvedValue(new Response('', { status: 401 }));
+    const calls: string[] = [];
+    const plugin = definePlugin({
+      name: 'err',
+      hooks: { onResponseError: () => { calls.push('err'); } },
+    });
+    const $fetch = createFetch({ fetch: fetchMock, plugins: [plugin] });
+
+    await expect($fetch('https://api.example.com', { retry: false }))
+      .rejects.toBeInstanceOf(FetchError);
+    expect(calls).toEqual(['err']);
+  });
+
+  it('invokes onRequestError hook on network failure', async () => {
+    const fetchMock = vi.fn().mockRejectedValue(new TypeError('offline'));
+    const calls: string[] = [];
+    const plugin = definePlugin({
+      name: 'net',
+      hooks: { onRequestError: () => { calls.push('net'); } },
+    });
+    const $fetch = createFetch({ fetch: fetchMock, plugins: [plugin] });
+
+    await expect($fetch('https://api.example.com', { retry: false }))
+      .rejects.toBeInstanceOf(FetchError);
+    expect(calls).toEqual(['net']);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// setup
+// ---------------------------------------------------------------------------
+
+describe('plugin setup', () => {
+  it('is called exactly once per createFetch', async () => {
+    const fetchMock = vi.fn<Fetch>().mockImplementation(async () =>
+      new Response('{}', { status: 200, headers: { 'content-type': 'application/json' } }),
+    );
+    const setup = vi.fn();
+    const plugin = definePlugin({ name: 's', setup });
+
+    const $fetch = createFetch({ fetch: fetchMock, plugins: [plugin] });
+    expect(setup).toHaveBeenCalledTimes(1);
+
+    await $fetch('https://api.example.com');
+    await $fetch('https://api.example.com');
+    expect(setup).toHaveBeenCalledTimes(1);
+  });
+
+  it('receives the fully merged defaults', () => {
+    const plugin = definePlugin({
+      name: 'inspect',
+      defaults: { baseURL: 'https://plugin.example.com' },
+      setup: ({ defaults }) => {
+        expect(defaults.baseURL).toBe('https://user.example.com');
+      },
+    });
+    createFetch({
+      fetch: makeFetchMock({}),
+      plugins: [plugin],
+      defaults: { baseURL: 'https://user.example.com' },
+    });
+  });
+});
+
+// ---------------------------------------------------------------------------
+// extend / create — plugin inheritance
+// ---------------------------------------------------------------------------
+
+describe('extend inherits plugins', () => {
+  it('child instance runs parent plugin hooks', async () => {
+    const fetchMock = makeFetchMock({});
+    const calls: string[] = [];
+    const parentPlugin = definePlugin({
+      name: 'parent',
+      hooks: { onRequest: () => { calls.push('parent'); } },
+    });
+    const parent = createFetch({ fetch: fetchMock, plugins: [parentPlugin] });
+    const child = parent.extend({});
+
+    await child('https://api.example.com');
+
+    expect(calls).toEqual(['parent']);
+  });
+
+  it('child plugin runs after parent plugin', async () => {
+    const fetchMock = makeFetchMock({});
+    const calls: string[] = [];
+    const parentPlugin = definePlugin({
+      name: 'parent',
+      hooks: { onRequest: () => { calls.push('parent'); } },
+    });
+    const childPlugin = definePlugin({
+      name: 'child',
+      hooks: { onRequest: () => { calls.push('child'); } },
+    });
+    const parent = createFetch({ fetch: fetchMock, plugins: [parentPlugin] });
+    const child = parent.extend({}, { plugins: [childPlugin] });
+
+    await child('https://api.example.com', {
+      onRequest: () => { calls.push('user'); },
+    });
+
+    expect(calls).toEqual(['parent', 'child', 'user']);
+  });
+
+  it('child defaults override parent defaults', async () => {
+    const fetchMock = makeFetchMock({});
+    const parent = createFetch({
+      fetch: fetchMock,
+      defaults: { baseURL: 'https://parent.example.com' },
+    });
+    const child = parent.extend({ baseURL: 'https://child.example.com' });
+
+    await child('/x');
+
+    const [url] = fetchMock.mock.calls[0] as [string];
+    expect(url).toBe('https://child.example.com/x');
+  });
+
+  it('parent plugin defaults persist through extend', async () => {
+    const fetchMock = makeFetchMock({});
+    const plugin = definePlugin({
+      name: 'base',
+      defaults: { baseURL: 'https://plugin.example.com' },
+    });
+    const parent = createFetch({ fetch: fetchMock, plugins: [plugin] });
+    const child = parent.extend({});
+
+    await child('/x');
+
+    const [url] = fetchMock.mock.calls[0] as [string];
+    expect(url).toBe('https://plugin.example.com/x');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Zero-regression: instance without plugins behaves exactly like before
+// ---------------------------------------------------------------------------
+
+describe('no-plugin instances', () => {
+  it('skips the hook fast-path when neither plugin nor user hooks are set', async () => {
+    const fetchMock = makeFetchMock({ ok: true });
+    const $fetch = createFetch({ fetch: fetchMock });
+
+    const data = await $fetch<{ ok: boolean }>('https://api.example.com');
+
+    expect(data).toEqual({ ok: true });
+    expect(fetchMock).toHaveBeenCalledOnce();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Type-level checks — plugin OptionsExt flows into request options
+// ---------------------------------------------------------------------------
+
+describe('type inference', () => {
+  it('adds plugin OptionsExt fields to request options', () => {
+    const auth = definePlugin<'auth', { token?: string }>({ name: 'auth' });
+    const _api = createFetch({ plugins: [auth] });
+
+    // Valid usage — `token` is known to the type system.
+    type ApiCall = Parameters<typeof _api>[1];
+    expectTypeOf<ApiCall>().toMatchTypeOf<{ token?: string } | undefined>();
+  });
+
+  it('rejects unknown fields when no plugin declares them', () => {
+    const api = createFetch();
+
+    // @ts-expect-error — `token` is not a known option on a plugin-less instance.
+    void (() => api('https://api.example.com', { token: 'x' }));
+  });
+
+  it('exposes context extension as a type-only carrier', () => {
+    const trace = definePlugin<'trace', object, { traceId: string }>({
+      name: 'trace',
+    });
+
+    expectTypeOf(trace.name).toEqualTypeOf<'trace'>();
+    // Sanity: FetchContext at runtime is still the base shape; ContextExt is advisory.
+    expectTypeOf<FetchContext>().toMatchTypeOf<{ request: unknown }>();
+  });
+});
diff --git a/core/fetch/src/plugin.ts b/core/fetch/src/plugin.ts
new file mode 100644
index 0000000..ea4bc19
--- /dev/null
+++ b/core/fetch/src/plugin.ts
@@ -0,0 +1,357 @@
+import type { FetchExecuteMiddleware, FetchHook, FetchHooks, FetchOptions, FetchPlugin } from './types';
+
+// ---------------------------------------------------------------------------
+// definePlugin — identity factory with type-safe inference
+// ---------------------------------------------------------------------------
+
+/**
+ * @name definePlugin
+ * @category Fetch
+ * @description Declares a typed fetch plugin. Identity function — returns its input
+ * verbatim at runtime, used only to narrow generics for strong option inference.
+ *
+ * @typeParam Name - Unique plugin identifier
+ * @typeParam OptionsExt - Extra fields contributed to FetchOptions by this plugin
+ * @typeParam ContextExt - Extra fields advisory for FetchContext
+ *
+ * @example <caption>Bearer token injection with typed per-request override</caption>
+ * const auth = definePlugin<'auth', { token?: string }>({
+ *   name: 'auth',
+ *   hooks: {
+ *     onRequest: (ctx) => {
+ *       const token = (ctx.options as { token?: string }).token;
+ *       if (token !== undefined) ctx.options.headers.set('authorization', `Bearer ${token}`);
+ *     },
+ *   },
+ * });
+ *
+ * const api = createFetch({ plugins: [auth] });
+ * await api('/me', { token: 'xyz' });
+ *
+ * @example <caption>Auto-refresh on 401 using a shared factory closure</caption>
+ * function createAuthPlugin(getAccessToken: () => Promise<string>) {
+ *   let current: Promise<string> | undefined;
+ *   const refresh = () => (current ??= getAccessToken().finally(() => { current = undefined; }));
+ *
+ *   return definePlugin<'auth', { skipAuth?: boolean }>({
+ *     name: 'auth',
+ *     hooks: {
+ *       onRequest: async (ctx) => {
+ *         if ((ctx.options as { skipAuth?: boolean }).skipAuth) return;
+ *         ctx.options.headers.set('authorization', `Bearer ${await refresh()}`);
+ *       },
+ *       onResponseError: async (ctx) => {
+ *         if (ctx.response.status !== 401) return;
+ *         // Invalidate cached token; next attempt via `retry` will pick up a fresh one.
+ *         current = undefined;
+ *         ctx.options.headers.set('authorization', `Bearer ${await refresh()}`);
+ *       },
+ *     },
+ *     defaults: { retry: 1, retryStatusCodes: [401, 408, 429, 500, 502, 503, 504] },
+ *   });
+ * }
+ *
+ * @example <caption>Idempotency-Key for unsafe methods</caption>
+ * const idempotency = definePlugin<'idempotency', { idempotencyKey?: string }>({
+ *   name: 'idempotency',
+ *   hooks: {
+ *     onRequest: (ctx) => {
+ *       const method = (ctx.options.method ?? 'GET').toUpperCase();
+ *       if (method === 'GET' || method === 'HEAD') return;
+ *       const key = (ctx.options as { idempotencyKey?: string }).idempotencyKey ?? crypto.randomUUID();
+ *       ctx.options.headers.set('idempotency-key', key);
+ *     },
+ *   },
+ * });
+ *
+ * @example <caption>Response envelope unwrapping — { data, meta } → data</caption>
+ * interface Envelope<T> { readonly data: T; readonly meta?: Record<string, unknown> }
+ *
+ * const unwrap = definePlugin({
+ *   name: 'unwrap',
+ *   hooks: {
+ *     onResponse: (ctx) => {
+ *       const body = ctx.response._data as Envelope<unknown> | undefined;
+ *       if (body !== undefined && typeof body === 'object' && 'data' in body) {
+ *         ctx.response._data = body.data;
+ *       }
+ *     },
+ *   },
+ * });
+ *
+ * @example <caption>Timing + structured logger using WeakMap-keyed state</caption>
+ * function createLoggerPlugin(sink: (record: { url: string; status: number; ms: number }) => void) {
+ *   const started = new WeakMap<object, number>();
+ *
+ *   return definePlugin({
+ *     name: 'logger',
+ *     hooks: {
+ *       onRequest: (ctx) => {
+ *         started.set(ctx, performance.now());
+ *       },
+ *       onResponse: (ctx) => {
+ *         const t = started.get(ctx);
+ *         if (t === undefined) return;
+ *         sink({ url: String(ctx.request), status: ctx.response.status, ms: performance.now() - t });
+ *       },
+ *       onResponseError: (ctx) => {
+ *         const t = started.get(ctx);
+ *         if (t === undefined) return;
+ *         sink({ url: String(ctx.request), status: ctx.response.status, ms: performance.now() - t });
+ *       },
+ *     },
+ *   });
+ * }
+ *
+ * @example <caption>Request ID / correlation header</caption>
+ * const requestId = definePlugin<'requestId', { requestId?: string }>({
+ *   name: 'requestId',
+ *   hooks: {
+ *     onRequest: (ctx) => {
+ *       const id = (ctx.options as { requestId?: string }).requestId ?? crypto.randomUUID();
+ *       ctx.options.headers.set('x-request-id', id);
+ *     },
+ *   },
+ * });
+ *
+ * @example <caption>Composing multiple plugins — order matters</caption>
+ * // Hooks execute in registration order, then any user per-request hook runs last.
+ * // Here: requestId → auth → logger → user-provided onRequest.
+ * const api = createFetch({
+ *   plugins: [requestId, createAuthPlugin(fetchToken), createLoggerPlugin(console.log), unwrap],
+ *   defaults: { baseURL: 'https://api.example.com' },
+ * });
+ *
+ * // Per-domain instance inherits every parent plugin and may add its own.
+ * const billing = api.extend({ baseURL: 'https://billing.example.com' }, {
+ *   plugins: [idempotency],
+ * });
+ * await billing('/invoices', { method: 'POST', body: { amount: 100 } });
+ *
+ * @since 0.1.0
+ */
+export function definePlugin<
+  const Name extends string,
+  OptionsExt = unknown,
+  ContextExt = unknown,
+>(
+  plugin: FetchPlugin<Name, OptionsExt, ContextExt>,
+): FetchPlugin<Name, OptionsExt, ContextExt> {
+  return plugin;
+}
+
+// ---------------------------------------------------------------------------
+// composePlugins — runs once per createFetch
+// ---------------------------------------------------------------------------
+
+/**
+ * @name ComposedPlugins
+ * @category Fetch
+ * @description Flattened hook lists and merged defaults produced by composePlugins.
+ */
+export interface ComposedPlugins {
+  /** Merged defaults — plugin defaults first, then user defaults (user wins) */
+  defaults: FetchOptions;
+  /** Pre-flattened readonly hook arrays; undefined when no plugin contributed a phase */
+  readonly hooks: {
+    readonly onRequest: readonly FetchHook[] | undefined;
+    readonly onRequestError: readonly FetchHook[] | undefined;
+    readonly onResponse: readonly FetchHook[] | undefined;
+    readonly onResponseError: readonly FetchHook[] | undefined;
+  };
+  /**
+   * Pre-composed onion chain of plugin `execute` middlewares, or `undefined`
+   * when no plugin contributed one (fast path: caller invokes the core
+   * executor directly without constructing a `next` closure).
+   */
+  readonly execute: FetchExecuteMiddleware | undefined;
+}
+
+/** Empty hooks shape reused when no plugins are attached — preserves a single hidden class */
+const EMPTY_HOOKS: ComposedPlugins['hooks'] = /* @__PURE__ */ Object.freeze({
+  onRequest: undefined,
+  onRequestError: undefined,
+  onResponse: undefined,
+  onResponseError: undefined,
+});
+
+type HeadersInput = Headers | Record<string, string | undefined> | Array<[string, string]>;
+
+function appendHeaders(target: Headers, source: HeadersInput): void {
+  if (source instanceof Headers) {
+    source.forEach((value, key) => {
+      target.set(key, value);
+    });
+    return;
+  }
+  const headers = new Headers(source as Record<string, string> | Array<[string, string]>);
+  headers.forEach((value, key) => {
+    target.set(key, value);
+  });
+}
+
+function pushHook<C>(
+  target: Array<FetchHook<C>>,
+  source: FetchHook<C> | ReadonlyArray<FetchHook<C>> | undefined,
+): void {
+  if (source === undefined) return;
+  if (typeof source === 'function') {
+    target.push(source);
+    return;
+  }
+  for (let i = 0; i < source.length; i++) {
+    target.push(source[i]!);
+  }
+}
+
+function applyDefaults(
+  merged: FetchOptions,
+  mergedHeaders: Headers | undefined,
+  next: FetchOptions,
+): { defaults: FetchOptions; headers: Headers | undefined } {
+  const { headers, ...rest } = next;
+  const out = { ...merged, ...rest };
+  let nextHeaders = mergedHeaders;
+  if (headers !== undefined) {
+    nextHeaders ??= new Headers();
+    appendHeaders(nextHeaders, headers as HeadersInput);
+  }
+  return { defaults: out, headers: nextHeaders };
+}
+
+/**
+ * @name composePlugins
+ * @category Fetch
+ * @description Flattens plugin defaults and hook arrays into a single shape suitable
+ * for long-lived storage on a fetch instance. Runs exactly once per createFetch call.
+ *
+ * Ordering: plugin defaults (in declaration order) → user defaults (user wins).
+ * Headers are merged independently through a single Headers instance.
+ *
+ * @since 0.1.0
+ */
+export function composePlugins(
+  plugins: readonly FetchPlugin[] | undefined,
+  userDefaults: FetchOptions | undefined,
+): ComposedPlugins {
+  // Fast path — no plugins: avoid allocating hook arrays and header instances
+  if (plugins === undefined || plugins.length === 0) {
+    return {
+      defaults: userDefaults ?? {},
+      hooks: EMPTY_HOOKS,
+      execute: undefined,
+    };
+  }
+
+  let defaults: FetchOptions = {};
+  let headers: Headers | undefined;
+
+  const onRequest: FetchHook[] = [];
+  const onRequestError: FetchHook[] = [];
+  const onResponse: FetchHook[] = [];
+  const onResponseError: FetchHook[] = [];
+  const executes: FetchExecuteMiddleware[] = [];
+
+  for (let i = 0; i < plugins.length; i++) {
+    const plugin = plugins[i]!;
+
+    if (plugin.defaults !== undefined) {
+      const merged = applyDefaults(defaults, headers, plugin.defaults);
+      defaults = merged.defaults;
+      headers = merged.headers;
+    }
+
+    if (plugin.hooks !== undefined) {
+      const hooks: FetchHooks = plugin.hooks;
+      pushHook(onRequest, hooks.onRequest as FetchHook | readonly FetchHook[] | undefined);
+      pushHook(onRequestError, hooks.onRequestError as FetchHook | readonly FetchHook[] | undefined);
+      pushHook(onResponse, hooks.onResponse as FetchHook | readonly FetchHook[] | undefined);
+      pushHook(onResponseError, hooks.onResponseError as FetchHook | readonly FetchHook[] | undefined);
+    }
+
+    if (plugin.execute !== undefined) {
+      executes.push(plugin.execute);
+    }
+  }
+
+  if (userDefaults !== undefined) {
+    const merged = applyDefaults(defaults, headers, userDefaults);
+    defaults = merged.defaults;
+    headers = merged.headers;
+  }
+
+  if (headers !== undefined) {
+    defaults = { ...defaults, headers };
+  }
+
+  // Invoke setup AFTER defaults are fully merged, so plugins observe the final shape
+  for (let i = 0; i < plugins.length; i++) {
+    plugins[i]!.setup?.({ defaults });
+  }
+
+  return {
+    defaults,
+    hooks: {
+      onRequest: onRequest.length > 0 ? onRequest : undefined,
+      onRequestError: onRequestError.length > 0 ? onRequestError : undefined,
+      onResponse: onResponse.length > 0 ? onResponse : undefined,
+      onResponseError: onResponseError.length > 0 ? onResponseError : undefined,
+    },
+    execute: executes.length === 0
+      ? undefined
+      : executes.length === 1
+        ? executes[0]
+        : composeExecute(executes),
+  };
+}
+
+/**
+ * Classic onion composition — dispatch(i) invokes middleware i or, past the end,
+ * delegates to the supplied `next`. Middlewares MAY call next() multiple times
+ * (retry-style) — the dispatcher is re-entrant.
+ */
+function composeExecute(middlewares: readonly FetchExecuteMiddleware[]): FetchExecuteMiddleware {
+  return (context, next) => {
+    const dispatch = (i: number): Promise<void> => {
+      const mw = middlewares[i];
+      if (mw === undefined) return next();
+      return mw(context, () => dispatch(i + 1));
+    };
+    return dispatch(0);
+  };
+}
+
+// ---------------------------------------------------------------------------
+// runHookPhase — dispatches instance hooks then optional per-request hook(s)
+// ---------------------------------------------------------------------------
+
+/**
+ * @name runHookPhase
+ * @category Fetch
+ * @description Runs all instance-level (plugin) hooks for a single phase, then the
+ * optional user per-request hook(s). Avoids allocating an intermediate array per call.
+ *
+ * @since 0.1.0
+ */
+export async function runHookPhase<C>(
+  instance: ReadonlyArray<FetchHook<C>> | undefined,
+  user: FetchHook<C> | ReadonlyArray<FetchHook<C>> | undefined,
+  context: C,
+): Promise<void> {
+  if (instance !== undefined) {
+    for (let i = 0; i < instance.length; i++) {
+      await instance[i]!(context);
+    }
+  }
+
+  if (user === undefined) return;
+
+  if (typeof user === 'function') {
+    await user(context);
+    return;
+  }
+
+  for (let i = 0; i < user.length; i++) {
+    await user[i]!(context);
+  }
+}
diff --git a/core/fetch/src/plugins/index.ts b/core/fetch/src/plugins/index.ts
new file mode 100644
index 0000000..b50a773
--- /dev/null
+++ b/core/fetch/src/plugins/index.ts
@@ -0,0 +1,2 @@
+export { retryPlugin } from './retry';
+export { timeoutPlugin } from './timeout';
diff --git a/core/fetch/src/plugins/retry.ts b/core/fetch/src/plugins/retry.ts
new file mode 100644
index 0000000..196e521
--- /dev/null
+++ b/core/fetch/src/plugins/retry.ts
@@ -0,0 +1,92 @@
+import type { FetchContext, ResolvedFetchOptions } from '../types';
+import { isFunction, isNumber, retry } from '@robonen/stdlib';
+import { definePlugin } from '../plugin';
+import { isPayloadMethod } from '../utils';
+
+/** HTTP status codes that trigger automatic retry by default */
+const DEFAULT_RETRY_STATUS_CODES: ReadonlySet<number> = /* @__PURE__ */ new Set([
+  408, // Request Timeout
+  409, // Conflict
+  425, // Too Early (Experimental)
+  429, // Too Many Requests
+  500, // Internal Server Error
+  502, // Bad Gateway
+  503, // Service Unavailable
+  504, // Gateway Timeout
+]);
+
+const ABORT_ERROR_NAME = 'AbortError';
+
+/**
+ * Compute the number of retries for a given request. Module-scope so the
+ * function site stays monomorphic (always sees `ResolvedFetchOptions` / string).
+ */
+function computeMaxRetries(options: ResolvedFetchOptions, method: string): number {
+  const retryOpt = options.retry;
+  if (retryOpt === false) return 0;
+  if (isNumber(retryOpt)) return retryOpt;
+  return isPayloadMethod(method) ? 0 : 1;
+}
+
+/** True when the current response status is in the effective retry-status allowlist. */
+function shouldRetryStatus(options: ResolvedFetchOptions, status: number): boolean {
+  const list = options.retryStatusCodes;
+  return list !== undefined
+    ? list.includes(status)
+    : DEFAULT_RETRY_STATUS_CODES.has(status);
+}
+
+/**
+ * @name retryPlugin
+ * @category Fetch
+ * @description Retries failed attempts based on status code, respecting
+ * `retry` / `retryDelay` / `retryStatusCodes` request options.
+ *
+ * Auto-registered by `createFetch`; disable per-request via `retry: false`.
+ *
+ * @since 0.1.0
+ */
+export function retryPlugin() {
+  return definePlugin({
+    name: 'retry',
+    execute: async (context, next) => {
+      const options = context.options;
+      const maxRetries = computeMaxRetries(options, options.method ?? 'GET');
+
+      // Fast path — no retries requested; avoid the stdlib retry wrapper
+      if (maxRetries === 0) {
+        await next();
+        return;
+      }
+
+      const retryDelay = options.retryDelay;
+      const delay = isFunction(retryDelay)
+        ? () => (retryDelay as (ctx: FetchContext) => number)(context)
+        : (retryDelay ?? 0);
+
+      await retry(
+        async ({ stop }) => {
+          try {
+            await next();
+          }
+          catch (error) {
+            // User-initiated abort must never be retried. `AbortSignal.timeout`
+            // aborts with a `TimeoutError`, so a plain `AbortError` is always
+            // caller-driven and should stop the retry loop immediately.
+            const err = context.error;
+            if (err !== undefined && err.name === ABORT_ERROR_NAME) {
+              stop(error);
+            }
+            throw error;
+          }
+        },
+        {
+          // stdlib retry counts total attempts; fetch `retry` means retries only
+          times: maxRetries + 1,
+          delay,
+          shouldRetry: () => shouldRetryStatus(options, context.response?.status ?? 500),
+        },
+      );
+    },
+  });
+}
diff --git a/core/fetch/src/plugins/timeout.ts b/core/fetch/src/plugins/timeout.ts
new file mode 100644
index 0000000..2806ba2
--- /dev/null
+++ b/core/fetch/src/plugins/timeout.ts
@@ -0,0 +1,54 @@
+import { definePlugin } from '../plugin';
+
+/**
+ * Caller's original `signal`, captured once per request so each retry attempt
+ * recombines a *fresh* timeout signal with it instead of reusing an already
+ * aborted one. Keyed on the FetchContext to keep its hidden class stable.
+ */
+const baseSignals = new WeakMap<object, AbortSignal | undefined>();
+
+/**
+ * @name timeoutPlugin
+ * @category Fetch
+ * @description Composes an `AbortSignal.timeout(ms)` with any caller-supplied signal
+ * when `options.timeout` is set.
+ *
+ * Implemented as an `execute` middleware (inner to `retry`) so every retry attempt
+ * gets a brand-new timeout signal — a single timeout no longer poisons all
+ * subsequent attempts. The timeout therefore applies per attempt, not to the whole
+ * retry sequence.
+ *
+ * Auto-registered by `createFetch`; no-op when `timeout` is unset.
+ *
+ * @since 0.1.0
+ */
+export function timeoutPlugin() {
+  return definePlugin({
+    name: 'timeout',
+    execute: async (context, next) => {
+      const options = context.options;
+      const timeout = options.timeout;
+      if (timeout === undefined) {
+        await next();
+        return;
+      }
+
+      // Fix the caller's signal once; reuse it across retry attempts.
+      let base: AbortSignal | undefined;
+      if (baseSignals.has(context)) {
+        base = baseSignals.get(context);
+      }
+      else {
+        base = options.signal as AbortSignal | undefined;
+        baseSignals.set(context, base);
+      }
+
+      const timeoutSignal = AbortSignal.timeout(timeout);
+      options.signal = base === undefined
+        ? timeoutSignal
+        : AbortSignal.any([timeoutSignal, base]);
+
+      await next();
+    },
+  });
+}
diff --git a/core/fetch/src/types.ts b/core/fetch/src/types.ts
new file mode 100644
index 0000000..9219240
--- /dev/null
+++ b/core/fetch/src/types.ts
@@ -0,0 +1,359 @@
+import type { MaybePromise, ReadonlyArrayable, UnionToIntersection } from '@robonen/stdlib';
+
+// --------------------------
+// Fetch API
+// --------------------------
+
+/**
+ * @name $Fetch
+ * @category Fetch
+ * @description The main fetch interface with method shortcuts, raw access, and factory methods
+ *
+ * @typeParam Plugins - Tuple of plugins attached to this instance; their option
+ * extensions are merged into every request's options type.
+ */
+export interface $Fetch<Plugins extends readonly FetchPlugin[] = []> {
+  <T = unknown, R extends ResponseType = 'json'>(
+    request: FetchRequest,
+    options?: FetchOptions<R, T> & MergePluginOptions<Plugins>,
+  ): Promise<MappedResponseType<R, T>>;
+  raw<T = unknown, R extends ResponseType = 'json'>(
+    request: FetchRequest,
+    options?: FetchOptions<R, T> & MergePluginOptions<Plugins>,
+  ): Promise<FetchResponse<MappedResponseType<R, T>>>;
+  /** Access to the underlying native fetch function */
+  native: Fetch;
+  /** Create a new fetch instance with merged defaults and (optionally) additional plugins */
+  create<NewPlugins extends readonly FetchPlugin[] = []>(
+    defaults?: FetchOptions & MergePluginOptions<[...Plugins, ...NewPlugins]>,
+    globalOptions?: CreateFetchOptions<NewPlugins>,
+  ): $Fetch<[...Plugins, ...NewPlugins]>;
+  /** Alias for create — extend this instance with new defaults and (optionally) additional plugins */
+  extend<NewPlugins extends readonly FetchPlugin[] = []>(
+    defaults?: FetchOptions & MergePluginOptions<[...Plugins, ...NewPlugins]>,
+    globalOptions?: CreateFetchOptions<NewPlugins>,
+  ): $Fetch<[...Plugins, ...NewPlugins]>;
+  /** Shorthand for GET requests */
+  get<T = unknown, R extends ResponseType = 'json'>(
+    request: FetchRequest,
+    options?: Omit<FetchOptions<R, T>, 'method'> & MergePluginOptions<Plugins>,
+  ): Promise<MappedResponseType<R, T>>;
+  /** Shorthand for POST requests */
+  post<T = unknown, R extends ResponseType = 'json'>(
+    request: FetchRequest,
+    options?: Omit<FetchOptions<R, T>, 'method'> & MergePluginOptions<Plugins>,
+  ): Promise<MappedResponseType<R, T>>;
+  /** Shorthand for PUT requests */
+  put<T = unknown, R extends ResponseType = 'json'>(
+    request: FetchRequest,
+    options?: Omit<FetchOptions<R, T>, 'method'> & MergePluginOptions<Plugins>,
+  ): Promise<MappedResponseType<R, T>>;
+  /** Shorthand for PATCH requests */
+  patch<T = unknown, R extends ResponseType = 'json'>(
+    request: FetchRequest,
+    options?: Omit<FetchOptions<R, T>, 'method'> & MergePluginOptions<Plugins>,
+  ): Promise<MappedResponseType<R, T>>;
+  /** Shorthand for DELETE requests */
+  delete<T = unknown, R extends ResponseType = 'json'>(
+    request: FetchRequest,
+    options?: Omit<FetchOptions<R, T>, 'method'> & MergePluginOptions<Plugins>,
+  ): Promise<MappedResponseType<R, T>>;
+  /** Shorthand for HEAD requests */
+  head(
+    request: FetchRequest,
+    options?: Omit<FetchOptions, 'method'> & MergePluginOptions<Plugins>,
+  ): Promise<FetchResponse<unknown>>;
+}
+
+// --------------------------
+// Options
+// --------------------------
+
+/**
+ * @name FetchOptions
+ * @category Fetch
+ * @description Options for a fetch request, extending native RequestInit with additional features
+ */
+export interface FetchOptions<R extends ResponseType = 'json', T = unknown>
+  extends Omit<RequestInit, 'body'>,
+  FetchHooks<T, R> {
+  /** Base URL prepended to all relative request URLs */
+  baseURL?: string;
+  /** Request body — plain objects are automatically JSON-serialized */
+  body?: RequestInit['body'] | Record<string, unknown> | unknown[] | null;
+  /** Suppress throwing on 4xx/5xx responses */
+  ignoreResponseError?: boolean;
+  /** URL query parameters serialized and appended to the request URL */
+  query?: Record<string, string | number | boolean | null | undefined>;
+  /**
+   * @deprecated use `query` instead
+   */
+  params?: Record<string, string | number | boolean | null | undefined>;
+  /** Custom response parser — overrides built-in JSON.parse */
+  parseResponse?: (responseText: string) => T;
+  /** Expected response format — drives body parsing */
+  responseType?: R;
+  /**
+   * Enable duplex streaming.
+   * Automatically set to "half" when a ReadableStream is used as body.
+   * @see https://fetch.spec.whatwg.org/#enumdef-requestduplex
+   */
+  duplex?: 'half';
+  /** Request timeout in milliseconds. Uses AbortSignal.timeout internally. */
+  timeout?: number;
+  /** Number of retry attempts on failure, or false to disable. Defaults to 1 for non-payload methods. */
+  retry?: number | false;
+  /** Delay in milliseconds between retries, or a function receiving the context */
+  retryDelay?: number | ((context: FetchContext<T, R>) => number);
+  /**
+   * HTTP status codes that trigger a retry.
+   * Defaults to [408, 409, 425, 429, 500, 502, 503, 504].
+   */
+  retryStatusCodes?: readonly number[];
+}
+
+/**
+ * @name ResolvedFetchOptions
+ * @category Fetch
+ * @description FetchOptions after merging defaults — headers are always a Headers instance
+ */
+export interface ResolvedFetchOptions<R extends ResponseType = 'json', T = unknown>
+  extends FetchOptions<R, T> {
+  headers: Headers;
+}
+
+/**
+ * @name CreateFetchOptions
+ * @category Fetch
+ * @description Global options for createFetch
+ *
+ * @typeParam Plugins - Tuple of plugins to attach to the instance
+ */
+export interface CreateFetchOptions<Plugins extends readonly FetchPlugin[] = []> {
+  /** Default options merged into every request */
+  defaults?: FetchOptions & MergePluginOptions<Plugins>;
+  /** Custom fetch implementation — defaults to globalThis.fetch */
+  fetch?: Fetch;
+  /**
+   * Plugins composed once at createFetch time.
+   * Each plugin may contribute defaults, lifecycle hooks, and typed option fields.
+   */
+  plugins?: Plugins;
+}
+
+// --------------------------
+// Plugins
+// --------------------------
+
+/**
+ * @name FetchPlugin
+ * @category Fetch
+ * @description A reusable bundle of defaults and lifecycle hooks that extends a fetch instance.
+ *
+ * Plugins are composed once at `createFetch` time — their defaults and hooks are
+ * flattened into the instance closure, so attaching plugins adds zero per-request
+ * overhead beyond the contributed hooks themselves.
+ *
+ * @typeParam Name - Unique plugin identifier (for debugging / duplicate detection)
+ * @typeParam OptionsExt - Extra fields merged into every request's options type
+ * @typeParam ContextExt - Extra fields that the plugin may attach to FetchContext
+ * at runtime (advisory; not enforced by the core pipeline)
+ *
+ * @example
+ * const authPlugin = definePlugin<'auth', { token?: string }>({
+ *   name: 'auth',
+ *   hooks: {
+ *     onRequest: (ctx) => {
+ *       const token = (ctx.options as { token?: string }).token;
+ *       if (token) ctx.options.headers.set('authorization', `Bearer ${token}`);
+ *     },
+ *   },
+ * });
+ */
+export interface FetchPlugin<
+  Name extends string = string,
+  OptionsExt = unknown,
+  ContextExt = unknown,
+> {
+  /** Plugin identifier */
+  readonly name: Name;
+  /** Default options contributed by the plugin — merged under user defaults */
+  readonly defaults?: FetchOptions;
+  /** Lifecycle hooks executed before any user per-request hooks */
+  readonly hooks?: FetchHooks;
+  /**
+   * Onion-style middleware wrapping the fetch attempt + response parse.
+   * Plugins compose in registration order; calling `next()` invokes the next
+   * middleware or ultimately the core executor. May call `next()` multiple
+   * times (e.g. to implement retries).
+   */
+  readonly execute?: FetchExecuteMiddleware;
+  /** Invoked once per createFetch, after all plugin defaults are merged */
+  readonly setup?: (context: { readonly defaults: FetchOptions }) => void;
+  /**
+   * Phantom marker for type-only option/context extensions — never present at runtime.
+   * Populated via dummy field in `definePlugin` generics.
+   * @internal
+   */
+  readonly __types?: { options: OptionsExt; context: ContextExt };
+}
+
+/**
+ * @name FetchExecuteMiddleware
+ * @category Fetch
+ * @description Onion-style wrapper around a single fetch attempt.
+ *
+ * Invoking `next()` delegates to the next middleware in the chain or, at the
+ * innermost layer, performs the actual `fetch` call and response body parsing.
+ * `context.response` / `context.error` are populated by the time `next()` resolves.
+ *
+ * Middlewares may call `next()` zero, one, or many times (retries).
+ */
+export type FetchExecuteMiddleware = (
+  context: FetchContext,
+  next: () => Promise<void>,
+) => Promise<void>;
+
+/**
+ * @name MergePluginOptions
+ * @category Fetch
+ * @description Intersection of all `OptionsExt` carried by a plugin tuple. Empty tuple resolves to `unknown`.
+ */
+export type MergePluginOptions<Plugins extends readonly FetchPlugin[]>
+  = [Plugins[number]] extends [never]
+    ? unknown
+    : UnionToIntersection<PluginOptionsOf<Plugins[number]>>;
+
+/**
+ * @name MergePluginContext
+ * @category Fetch
+ * @description Intersection of all `ContextExt` carried by a plugin tuple. Empty tuple resolves to `unknown`.
+ */
+export type MergePluginContext<Plugins extends readonly FetchPlugin[]>
+  = [Plugins[number]] extends [never]
+    ? unknown
+    : UnionToIntersection<PluginContextOf<Plugins[number]>>;
+
+type PluginOptionsOf<P> = P extends FetchPlugin<infer _N, infer O, infer _C> ? O : unknown;
+type PluginContextOf<P> = P extends FetchPlugin<infer _N, infer _O, infer C> ? C : unknown;
+
+// --------------------------
+// Hooks and Context
+// --------------------------
+
+/**
+ * @name FetchContext
+ * @category Fetch
+ * @description Mutable context object passed to all hooks and the core fetch pipeline
+ */
+export interface FetchContext<T = unknown, R extends ResponseType = 'json'> {
+  request: FetchRequest;
+  options: ResolvedFetchOptions<R, T>;
+  response?: FetchResponse<T>;
+  error?: Error;
+}
+
+/**
+ * @name FetchHook
+ * @category Fetch
+ * @description A function invoked at a specific point in the fetch lifecycle
+ */
+export type FetchHook<C = FetchContext> = (context: C) => MaybePromise<void>;
+
+/**
+ * @name FetchHooks
+ * @category Fetch
+ * @description Lifecycle hooks for the fetch pipeline
+ */
+export interface FetchHooks<T = unknown, R extends ResponseType = 'json'> {
+  /** Called before the request is sent */
+  onRequest?: ReadonlyArrayable<FetchHook<FetchContext<T, R>>>;
+  /** Called when the request itself throws (e.g. network error, timeout) */
+  onRequestError?: ReadonlyArrayable<FetchHook<FetchContext<T, R> & { error: Error }>>;
+  /** Called after a successful response is received and parsed */
+  onResponse?: ReadonlyArrayable<FetchHook<FetchContext<T, R> & { response: FetchResponse<T> }>>;
+  /** Called when the response status is 4xx or 5xx */
+  onResponseError?: ReadonlyArrayable<FetchHook<FetchContext<T, R> & { response: FetchResponse<T> }>>;
+}
+
+// --------------------------
+// Response Types
+// --------------------------
+
+/**
+ * @name ResponseMap
+ * @category Fetch
+ * @description Maps response type keys to their parsed value types
+ */
+export interface ResponseMap {
+  blob: Blob;
+  text: string;
+  arrayBuffer: ArrayBuffer;
+  stream: ReadableStream<Uint8Array>;
+}
+
+/**
+ * @name ResponseType
+ * @category Fetch
+ * @description Supported response body parsing modes
+ */
+export type ResponseType = keyof ResponseMap | 'json';
+
+/**
+ * @name MappedResponseType
+ * @category Fetch
+ * @description Resolves the response value type from a ResponseType key
+ */
+export type MappedResponseType<R extends ResponseType, T = unknown> = R extends keyof ResponseMap
+  ? ResponseMap[R]
+  : T;
+
+/**
+ * @name FetchResponse
+ * @category Fetch
+ * @description Extended Response with a parsed `_data` field
+ */
+export interface FetchResponse<T> extends Response {
+  _data?: T;
+}
+
+// --------------------------
+// Error
+// --------------------------
+
+/**
+ * @name FetchErrorOptions
+ * @category Fetch
+ * @description Subset of FetchOptions stored on FetchError — strips lifecycle hooks,
+ * parseResponse, and retryDelay callback that are invariant in T/R
+ */
+export type FetchErrorOptions = Omit<
+  FetchOptions<ResponseType>,
+  keyof FetchHooks | 'parseResponse' | 'retryDelay'
+>;
+
+/**
+ * @name IFetchError
+ * @category Fetch
+ * @description Shape of errors thrown by $fetch
+ */
+export interface IFetchError<T = unknown> extends Error {
+  request?: FetchRequest;
+  options?: FetchErrorOptions;
+  response?: FetchResponse<T>;
+  data?: T;
+  status?: number;
+  statusText?: string;
+  statusCode?: number;
+  statusMessage?: string;
+}
+
+// --------------------------
+// Primitives
+// --------------------------
+
+/** The native fetch function signature */
+export type Fetch = typeof globalThis.fetch;
+
+/** A fetch request — URL string, URL object, or Request object */
+export type FetchRequest = string | URL | Request;
diff --git a/core/fetch/src/utils.test.ts b/core/fetch/src/utils.test.ts
new file mode 100644
index 0000000..1d03b70
--- /dev/null
+++ b/core/fetch/src/utils.test.ts
@@ -0,0 +1,269 @@
+import {
+  buildURL,
+  callHooks,
+  detectResponseType,
+  isJSONSerializable,
+  isPayloadMethod,
+  joinURL,
+  resolveFetchOptions,
+} from './utils';
+import { describe, expect, it } from 'vitest';
+import type { FetchContext } from './types';
+
+// ---------------------------------------------------------------------------
+// isPayloadMethod
+// ---------------------------------------------------------------------------
+
+describe('isPayloadMethod', () => {
+  it('returns true for payload methods', () => {
+    expect(isPayloadMethod('POST')).toBe(true);
+    expect(isPayloadMethod('PUT')).toBe(true);
+    expect(isPayloadMethod('PATCH')).toBe(true);
+    expect(isPayloadMethod('DELETE')).toBe(true);
+  });
+
+  it('returns false for non-payload methods', () => {
+    expect(isPayloadMethod('GET')).toBe(false);
+    expect(isPayloadMethod('HEAD')).toBe(false);
+    expect(isPayloadMethod('OPTIONS')).toBe(false);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// isJSONSerializable
+// ---------------------------------------------------------------------------
+
+describe('isJSONSerializable', () => {
+  it('returns false for undefined', () => {
+    expect(isJSONSerializable(undefined)).toBe(false);
+  });
+
+  it('returns true for primitives', () => {
+    expect(isJSONSerializable('hello')).toBe(true);
+    expect(isJSONSerializable(42)).toBe(true);
+    expect(isJSONSerializable(true)).toBe(true);
+    expect(isJSONSerializable(null)).toBe(true);
+  });
+
+  it('returns false for functions, symbols, bigints', () => {
+    expect(isJSONSerializable(() => {})).toBe(false);
+    expect(isJSONSerializable(Symbol('x'))).toBe(false);
+    expect(isJSONSerializable(42n)).toBe(false);
+  });
+
+  it('returns true for plain arrays', () => {
+    expect(isJSONSerializable([1, 2, 3])).toBe(true);
+  });
+
+  it('returns false for ArrayBuffer-like values', () => {
+    expect(isJSONSerializable(new Uint8Array([1, 2]))).toBe(false);
+  });
+
+  it('returns false for FormData and URLSearchParams', () => {
+    expect(isJSONSerializable(new FormData())).toBe(false);
+    expect(isJSONSerializable(new URLSearchParams())).toBe(false);
+  });
+
+  it('returns true for plain objects', () => {
+    expect(isJSONSerializable({ a: 1 })).toBe(true);
+  });
+
+  it('returns true for objects with toJSON', () => {
+    expect(isJSONSerializable({ toJSON: () => ({}) })).toBe(true);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// detectResponseType
+// ---------------------------------------------------------------------------
+
+describe('detectResponseType', () => {
+  it('defaults to json when content-type is empty', () => {
+    expect(detectResponseType('')).toBe('json');
+    expect(detectResponseType()).toBe('json');
+  });
+
+  it('detects json content types', () => {
+    expect(detectResponseType('application/json')).toBe('json');
+    expect(detectResponseType('application/json; charset=utf-8')).toBe('json');
+    expect(detectResponseType('application/vnd.api+json')).toBe('json');
+  });
+
+  it('detects event-stream as stream', () => {
+    expect(detectResponseType('text/event-stream')).toBe('stream');
+  });
+
+  it('detects text content types', () => {
+    expect(detectResponseType('text/plain')).toBe('text');
+    expect(detectResponseType('text/html')).toBe('text');
+    expect(detectResponseType('application/xml')).toBe('text');
+  });
+
+  it('falls back to blob for binary types', () => {
+    expect(detectResponseType('image/png')).toBe('blob');
+    expect(detectResponseType('application/octet-stream')).toBe('blob');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// buildURL
+// ---------------------------------------------------------------------------
+
+describe('buildURL', () => {
+  it('appends query params to a clean URL', () => {
+    expect(buildURL('https://api.example.com', { page: 1, limit: 20 })).toBe(
+      'https://api.example.com?page=1&limit=20',
+    );
+  });
+
+  it('appends to an existing query string with &', () => {
+    expect(buildURL('https://api.example.com?foo=bar', { baz: 'qux' })).toBe(
+      'https://api.example.com?foo=bar&baz=qux',
+    );
+  });
+
+  it('omits null and undefined values', () => {
+    expect(buildURL('https://api.example.com', { a: null, b: undefined, c: 'keep' })).toBe(
+      'https://api.example.com?c=keep',
+    );
+  });
+
+  it('returns the URL unchanged when all params are omitted', () => {
+    expect(buildURL('https://api.example.com', { a: null })).toBe('https://api.example.com');
+  });
+
+  it('inserts the query string before a fragment', () => {
+    expect(buildURL('https://api.example.com/p#section', { a: 1 })).toBe(
+      'https://api.example.com/p?a=1#section',
+    );
+  });
+
+  it('appends to an existing query string before a fragment', () => {
+    expect(buildURL('https://api.example.com/p?foo=bar#section', { baz: 'qux' })).toBe(
+      'https://api.example.com/p?foo=bar&baz=qux#section',
+    );
+  });
+});
+
+// ---------------------------------------------------------------------------
+// joinURL
+// ---------------------------------------------------------------------------
+
+describe('joinURL', () => {
+  it('joins base and path correctly', () => {
+    expect(joinURL('https://api.example.com/v1', '/users')).toBe(
+      'https://api.example.com/v1/users',
+    );
+  });
+
+  it('does not double slashes', () => {
+    expect(joinURL('https://api.example.com/v1/', '/users')).toBe(
+      'https://api.example.com/v1/users',
+    );
+  });
+
+  it('adds a slash when neither side has one', () => {
+    expect(joinURL('https://api.example.com/v1', 'users')).toBe(
+      'https://api.example.com/v1/users',
+    );
+  });
+
+  it('returns base when path is empty', () => {
+    expect(joinURL('https://api.example.com', '')).toBe('https://api.example.com');
+  });
+
+  it('returns base when path is "/"', () => {
+    expect(joinURL('https://api.example.com', '/')).toBe('https://api.example.com');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// callHooks
+// ---------------------------------------------------------------------------
+
+describe('callHooks', () => {
+  function makeCtx(): FetchContext {
+    return {
+      request: 'https://example.com',
+      options: { headers: new Headers() },
+      response: undefined,
+      error: undefined,
+    } as FetchContext;
+  }
+
+  it('does nothing when hooks is undefined', async () => {
+    await expect(callHooks(makeCtx(), undefined)).resolves.toBeUndefined();
+  });
+
+  it('calls a single hook', async () => {
+    const calls: number[] = [];
+    await callHooks(makeCtx(), () => {
+      calls.push(1);
+    });
+    expect(calls).toEqual([1]);
+  });
+
+  it('calls an array of hooks in order', async () => {
+    const calls: number[] = [];
+    await callHooks(makeCtx(), [
+      () => { calls.push(1); },
+      () => { calls.push(2); },
+      () => { calls.push(3); },
+    ]);
+    expect(calls).toEqual([1, 2, 3]);
+  });
+
+  it('awaits async hooks', async () => {
+    const calls: number[] = [];
+    await callHooks(makeCtx(), [
+      async () => {
+        await Promise.resolve();
+        calls.push(1);
+      },
+      () => {
+        calls.push(2);
+      },
+    ]);
+    expect(calls).toEqual([1, 2]);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// resolveFetchOptions
+// ---------------------------------------------------------------------------
+
+describe('resolveFetchOptions', () => {
+  it('returns an object with a Headers instance', () => {
+    const resolved = resolveFetchOptions('https://example.com', undefined, undefined);
+    expect(resolved.headers).toBeInstanceOf(Headers);
+  });
+
+  it('merges input and default headers (input wins)', () => {
+    const resolved = resolveFetchOptions(
+      'https://example.com',
+      { headers: { 'x-custom': 'input' } },
+      { headers: { 'x-custom': 'default', 'x-default-only': 'yes' } },
+    );
+    expect(resolved.headers.get('x-custom')).toBe('input');
+    expect(resolved.headers.get('x-default-only')).toBe('yes');
+  });
+
+  it('merges query params from defaults and input', () => {
+    const resolved = resolveFetchOptions(
+      'https://example.com',
+      { query: { a: '1' } },
+      { query: { b: '2' } },
+    );
+    expect(resolved.query).toEqual({ a: '1', b: '2' });
+  });
+
+  it('merges params alias into query', () => {
+    const resolved = resolveFetchOptions(
+      'https://example.com',
+      { params: { p: '10' } },
+      undefined,
+    );
+    expect(resolved.query).toEqual({ p: '10' });
+    expect(resolved.params).toEqual({ p: '10' });
+  });
+});
diff --git a/core/fetch/src/utils.ts b/core/fetch/src/utils.ts
new file mode 100644
index 0000000..37c37d4
--- /dev/null
+++ b/core/fetch/src/utils.ts
@@ -0,0 +1,280 @@
+import type {
+  FetchHook,
+  FetchOptions,
+  FetchRequest,
+  ResolvedFetchOptions,
+  ResponseType,
+} from './types';
+import { isArray, isFunction } from '@robonen/stdlib';
+
+/** HTTP methods whose requests carry a body */
+const PAYLOAD_METHODS: ReadonlySet<string> = /* @__PURE__ */ new Set(['PATCH', 'POST', 'PUT', 'DELETE']);
+
+/** HTTP status codes whose responses never have a body */
+export const NULL_BODY_STATUSES: ReadonlySet<number> = /* @__PURE__ */ new Set([101, 204, 205, 304]);
+
+/** Content-types treated as plain text */
+const TEXT_CONTENT_TYPES: ReadonlySet<string> = /* @__PURE__ */ new Set([
+  'image/svg',
+  'application/xml',
+  'application/xhtml',
+  'application/html',
+]);
+
+const JSON_CONTENT_TYPE_RE = /^application\/(?:[\w!#$%&*.^`~-]*\+)?json(?:;.+)?$/i;
+
+// ---------------------------------------------------------------------------
+// Predicate helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * @name isPayloadMethod
+ * @category Fetch
+ * @description Returns true for HTTP methods that carry a request body
+ *
+ * @param {string} method - Uppercase HTTP method string
+ * @returns {boolean}
+ *
+ * @since 0.0.1
+ */
+export function isPayloadMethod(method: string): boolean {
+  return PAYLOAD_METHODS.has(method);
+}
+
+/**
+ * @name isJSONSerializable
+ * @category Fetch
+ * @description Returns true when a value can be serialised with JSON.stringify
+ *
+ * @param {unknown} value - Any value
+ * @returns {boolean}
+ *
+ * @since 0.0.1
+ */
+export function isJSONSerializable(value: unknown): boolean {
+  if (value === undefined)
+    return false;
+
+  const type = typeof value;
+
+  // Fast path — primitives are always serialisable
+  if (type === 'string' || type === 'number' || type === 'boolean' || value === null) return true;
+
+  // Non-object types (bigint, function, symbol) are not serialisable
+  if (type !== 'object') return false;
+
+  // Arrays are serialisable
+  if (isArray(value)) return true;
+
+  // TypedArrays and ArrayBuffers — use native type checks instead of probing
+  // `.buffer`, which would pollute the property IC with every distinct body shape.
+  if (ArrayBuffer.isView(value) || value instanceof ArrayBuffer) return false;
+
+  // FormData and URLSearchParams should not be auto-serialised
+  if (value instanceof FormData || value instanceof URLSearchParams) return false;
+
+  // Plain objects or objects with a custom toJSON
+  const ctor = (value as object).constructor;
+  return (
+    ctor === undefined
+    || ctor === Object
+    || typeof (value as { toJSON?: unknown }).toJSON === 'function'
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Response type detection
+// ---------------------------------------------------------------------------
+
+/**
+ * @name detectResponseType
+ * @category Fetch
+ * @description Infers the response body parsing strategy from a Content-Type header value
+ *
+ * @param {string} [contentType] - Value of the Content-Type response header
+ * @returns {ResponseType}
+ *
+ * @since 0.0.1
+ */
+export function detectResponseType(contentType = ''): ResponseType {
+  if (!contentType) return 'json';
+
+  // Strip any `; charset=...` suffix without allocating an intermediate array.
+  const semi = contentType.indexOf(';');
+  const type = semi === -1 ? contentType : contentType.slice(0, semi);
+
+  if (JSON_CONTENT_TYPE_RE.test(type)) return 'json';
+  if (type === 'text/event-stream') return 'stream';
+  if (TEXT_CONTENT_TYPES.has(type) || type.startsWith('text/')) return 'text';
+
+  return 'blob';
+}
+
+// ---------------------------------------------------------------------------
+// URL helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * @name buildURL
+ * @category Fetch
+ * @description Appends serialised query parameters to a URL string
+ *
+ * Null and undefined values are omitted. Existing query strings are preserved.
+ *
+ * @param {string} url - Base URL (may already contain a query string)
+ * @param {Record<string, string | number | boolean | null | undefined>} query - Parameters to append
+ * @returns {string} URL with query string
+ *
+ * @since 0.0.1
+ */
+export function buildURL(
+  url: string,
+  query: Record<string, string | number | boolean | null | undefined>,
+): string {
+  const params = new URLSearchParams();
+
+  for (const key of Object.keys(query)) {
+    const value = query[key];
+    if (value !== null && value !== undefined) {
+      params.append(key, String(value));
+    }
+  }
+
+  const qs = params.toString();
+  if (!qs) return url;
+
+  // Insert the query string *before* any fragment so `#section` stays trailing.
+  const hashIndex = url.indexOf('#');
+  const base = hashIndex === -1 ? url : url.slice(0, hashIndex);
+  const hash = hashIndex === -1 ? '' : url.slice(hashIndex);
+
+  return `${base}${base.includes('?') ? '&' : '?'}${qs}${hash}`;
+}
+
+/**
+ * @name joinURL
+ * @category Fetch
+ * @description Joins a base URL with a relative path, normalising the slash boundary
+ *
+ * @param {string} base - Base URL (e.g. "https://api.example.com/v1")
+ * @param {string} path - Relative path (e.g. "/users")
+ * @returns {string} Joined URL
+ *
+ * @since 0.0.1
+ */
+export function joinURL(base: string, path: string): string {
+  if (!path || path === '/') return base;
+
+  const baseEnds = base.endsWith('/');
+  const pathStarts = path.startsWith('/');
+
+  if (baseEnds && pathStarts) return `${base}${path.slice(1)}`;
+  if (!baseEnds && !pathStarts) return `${base}/${path}`;
+  return `${base}${path}`;
+}
+
+// ---------------------------------------------------------------------------
+// Options resolution
+// ---------------------------------------------------------------------------
+
+/**
+ * @name resolveFetchOptions
+ * @category Fetch
+ * @description Merges per-request options with global defaults
+ *
+ * @since 0.0.1
+ */
+export function resolveFetchOptions<R extends ResponseType = 'json', T = unknown>(
+  request: FetchRequest,
+  input: FetchOptions<R, T> | undefined,
+  defaults: FetchOptions | undefined,
+): ResolvedFetchOptions<R, T>;
+export function resolveFetchOptions(
+  request: FetchRequest,
+  input: FetchOptions | undefined,
+  defaults: FetchOptions | undefined,
+): ResolvedFetchOptions {
+  const headers = mergeHeaders(
+    input?.headers ?? (request as Request)?.headers,
+    defaults?.headers,
+  );
+
+  let query: Record<string, string | number | boolean | null | undefined> | undefined;
+  if (
+    defaults?.query !== undefined
+    || defaults?.params !== undefined
+    || input?.params !== undefined
+    || input?.query !== undefined
+  ) {
+    query = {
+      ...defaults?.params,
+      ...defaults?.query,
+      ...input?.params,
+      ...input?.query,
+    };
+  }
+
+  return {
+    ...defaults,
+    ...input,
+    query,
+    params: query,
+    headers,
+  };
+}
+
+/** Header sources accepted by the merge function */
+type HeadersInput = Headers | Record<string, string | undefined> | Array<[string, string]>;
+
+/**
+ * Merge two header sources into a single Headers instance.
+ * Input headers override default headers.
+ *
+ */
+function mergeHeaders(
+  input: HeadersInput | undefined,
+  defaults: HeadersInput | undefined,
+): Headers {
+  if (defaults === undefined) {
+    return new Headers(input);
+  }
+
+  const merged = new Headers(defaults);
+
+  if (input !== undefined) {
+    const src = input instanceof Headers ? input : new Headers(input);
+    src.forEach((value, key) => {
+      merged.set(key, value);
+    });
+  }
+
+  return merged;
+}
+
+// ---------------------------------------------------------------------------
+// Hook dispatch
+// ---------------------------------------------------------------------------
+
+/**
+ * @name callHooks
+ * @category Fetch
+ * @description Invokes one or more lifecycle hooks with the given context
+ *
+ * @since 0.0.1
+ */
+export async function callHooks<C>(
+  context: C,
+  hooks: FetchHook<C> | ReadonlyArray<FetchHook<C>> | undefined,
+): Promise<void> {
+  if (hooks === undefined) return;
+
+  if (isFunction(hooks)) {
+    await hooks(context);
+    return;
+  }
+
+  const len = hooks.length;
+  for (let i = 0; i < len; i++) {
+    await hooks[i]!(context);
+  }
+}
diff --git a/core/fetch/tsconfig.json b/core/fetch/tsconfig.json
new file mode 100644
index 0000000..2781e66
--- /dev/null
+++ b/core/fetch/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.src.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/core/fetch/tsconfig.node.json b/core/fetch/tsconfig.node.json
new file mode 100644
index 0000000..edc474f
--- /dev/null
+++ b/core/fetch/tsconfig.node.json
@@ -0,0 +1,8 @@
+{
+  "extends": "@robonen/tsconfig/tsconfig.node.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo"
+  },
+  "include": ["*.config.ts"]
+}
diff --git a/core/fetch/tsconfig.src.json b/core/fetch/tsconfig.src.json
new file mode 100644
index 0000000..04b066e
--- /dev/null
+++ b/core/fetch/tsconfig.src.json
@@ -0,0 +1,9 @@
+{
+  "extends": "@robonen/tsconfig/tsconfig.base.json",
+  "compilerOptions": {
+    "composite": true,
+    "types": ["node"],
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.src.tsbuildinfo"
+  },
+  "include": ["src/**/*.ts"]
+}
diff --git a/core/fetch/tsdown.config.ts b/core/fetch/tsdown.config.ts
new file mode 100644
index 0000000..6e391e5
--- /dev/null
+++ b/core/fetch/tsdown.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from 'tsdown';
+import { sharedConfig } from '@robonen/tsdown';
+
+export default defineConfig({
+  ...sharedConfig,
+  tsconfig: './tsconfig.src.json',
+  entry: ['src/index.ts'],
+});
diff --git a/core/fetch/vitest.config.ts b/core/fetch/vitest.config.ts
new file mode 100644
index 0000000..4ac6027
--- /dev/null
+++ b/core/fetch/vitest.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    environment: 'node',
+  },
+});
diff --git a/core/platform/docs/intro.vue b/core/platform/docs/intro.vue
new file mode 100644
index 0000000..88464c7
--- /dev/null
+++ b/core/platform/docs/intro.vue
@@ -0,0 +1,171 @@
+<script setup lang="ts">
+// Landing hero for @robonen/platform. Static content only — no runtime APIs are
+// touched at setup top-level, so this prerenders and hydrates safely.
+</script>
+
+<template>
+  <div class="docs-section">
+    <div class="prose-docs">
+      <h1>@robonen/platform</h1>
+      <p>
+        Platform-dependent utilities for browser and multi-runtime JavaScript — focus management,
+        ARIA isolation, animation lifecycle tracking, and environment-safe globals.
+      </p>
+    </div>
+
+    <div class="prose-docs">
+      <p>
+        Most utility libraries stop at the platform boundary: the moment you need to reach for the
+        DOM, shadow roots, <code>aria-hidden</code>, or <code>globalThis</code>, you are on your own.
+        <strong>@robonen/platform</strong> fills that gap. It packages the gritty, well-tested
+        primitives that overlays, dialogs, and editors depend on — focus guards, tabbable-edge
+        detection, sibling hiding for screen readers, and CSS animation settling — and ships them
+        SSR-aware and dependency-free. It is the low-level layer that powers
+        <NuxtLink to="/primitives">@robonen/primitives</NuxtLink> and the editor.
+      </p>
+    </div>
+
+    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-5">
+        <h3 class="text-sm font-semibold text-(--fg)">
+          Focus, done right
+        </h3>
+        <p class="mt-1.5 text-sm text-(--fg-muted)">
+          Shadow-DOM-aware active-element lookup, scroll-free focusing, and first/last tabbable-edge
+          detection via a fast <code class="text-(--accent-text)">TreeWalker</code> — the bones of any focus trap.
+        </p>
+      </div>
+
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-5">
+        <h3 class="text-sm font-semibold text-(--fg)">
+          Accessible isolation
+        </h3>
+        <p class="mt-1.5 text-sm text-(--fg-muted)">
+          <code class="text-(--accent-text)">hideOthers</code> marks every sibling
+          <code class="text-(--accent-text)">aria-hidden</code>, ref-counted across layers, preserving
+          <code class="text-(--accent-text)">aria-live</code> regions. A dependency-free port of <code>aria-hidden</code>.
+        </p>
+      </div>
+
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-5">
+        <h3 class="text-sm font-semibold text-(--fg)">
+          Animation lifecycle
+        </h3>
+        <p class="mt-1.5 text-sm text-(--fg-muted)">
+          Detect running animations and transitions, then settle exit animations cleanly with
+          fill-mode flash prevention — so unmounts wait for the CSS to finish.
+        </p>
+      </div>
+
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-5">
+        <h3 class="text-sm font-semibold text-(--fg)">
+          Multi-runtime safe
+        </h3>
+        <p class="mt-1.5 text-sm text-(--fg-muted)">
+          A resolved <code class="text-(--accent-text)">_global</code> and an
+          <code class="text-(--accent-text)">isClient</code> flag that work across Node, Bun, Deno, and the
+          browser — guards baked in so SSR never throws.
+        </p>
+      </div>
+    </div>
+
+    <div class="prose-docs">
+      <h2>Install</h2>
+    </div>
+
+    <DocsCode :code="`pnpm add @robonen/platform`" lang="bash" />
+
+    <div class="prose-docs">
+      <h2>Subpath exports</h2>
+      <p>
+        The package splits along the platform boundary. Browser-only helpers live under
+        <code>/browsers</code>; runtime-agnostic helpers live under <code>/multi</code>.
+      </p>
+      <table>
+        <thead>
+          <tr>
+            <th>Entry</th>
+            <th>Scope</th>
+            <th>What you get</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td><code>@robonen/platform/browsers</code></td>
+            <td>DOM</td>
+            <td>Focus, tabbable edges, <code>hideOthers</code>, animation lifecycle</td>
+          </tr>
+          <tr>
+            <td><code>@robonen/platform/multi</code></td>
+            <td>Any runtime</td>
+            <td><code>_global</code>, <code>isClient</code></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="prose-docs">
+      <h2>Usage</h2>
+      <p>
+        A typical overlay flow: capture the focused element, hide siblings from assistive tech, drop
+        focus onto the first tabbable target, and tear it all down on close.
+      </p>
+    </div>
+
+    <DocsCode lang="ts" :code="`import {
+  getActiveElement,
+  getTabbableEdges,
+  focus,
+  hideOthers,
+} from '@robonen/platform/browsers';
+
+function openDialog(dialog: HTMLElement) {
+  // Remember where focus was, so we can restore it on close.
+  const previouslyFocused = getActiveElement();
+
+  // Hide everything outside the dialog from screen readers (ref-counted).
+  const undoHide = hideOthers(dialog);
+
+  // Move focus to the first tabbable element inside the dialog.
+  const { first } = getTabbableEdges(dialog);
+  focus(first, { select: true });
+
+  return function close() {
+    undoHide();
+    focus(previouslyFocused);
+  };
+}`" />
+
+    <div class="prose-docs">
+      <p>
+        On the cross-runtime side, reach for a safe global and a reliable client check without
+        sprinkling <code>typeof window</code> guards through your code:
+      </p>
+    </div>
+
+    <DocsCode lang="ts" :code="`import { _global, isClient } from '@robonen/platform/multi';
+
+// Works in Node, Bun, Deno and the browser — never throws in SSR.
+if (isClient) {
+  _global.addEventListener('resize', onResize);
+}`" />
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-subtle) p-4 text-sm text-(--fg-muted)">
+      <strong class="text-(--fg)">SSR note:</strong> browser helpers touch the DOM, so call them
+      inside event handlers or after mount.
+      <code class="text-(--accent-text)">hideOthers</code> already no-ops when <code>document</code> is
+      undefined, and <code>/multi</code> is import-safe everywhere.
+    </div>
+
+    <div class="prose-docs">
+      <h2>Where to next</h2>
+      <p>Browse the full API reference below, or jump straight to the building blocks:</p>
+      <ul>
+        <li><NuxtLink to="/platform/focus-guard">focusGuard</NuxtLink> — add boundary guards for predictable focus wrapping</li>
+        <li><NuxtLink to="/platform/get-tabbable-edges">getTabbableEdges</NuxtLink> — find the first and last focusable elements in a container</li>
+        <li><NuxtLink to="/platform/hide-others">hideOthers</NuxtLink> — isolate a subtree for assistive technology</li>
+        <li><NuxtLink to="/platform/on-animation-settle">onAnimationSettle</NuxtLink> — run a callback once an animation or transition finishes</li>
+      </ul>
+    </div>
+  </div>
+</template>
diff --git a/core/platform/eslint.config.ts b/core/platform/eslint.config.ts
new file mode 100644
index 0000000..f458d0d
--- /dev/null
+++ b/core/platform/eslint.config.ts
@@ -0,0 +1,9 @@
+import { base, compose, imports, stylistic, typescript } from '@robonen/eslint';
+
+export default compose(base, typescript, imports, stylistic, {
+  name: 'platform/overrides',
+  files: ['src/multi/global/index.ts'],
+  rules: {
+    'unicorn/prefer-global-this': 'off',
+  },
+});
diff --git a/core/platform/oxlint.config.ts b/core/platform/oxlint.config.ts
deleted file mode 100644
index 2a8522e..0000000
--- a/core/platform/oxlint.config.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { defineConfig } from 'oxlint';
-import { compose, base, typescript, imports } from '@robonen/oxlint';
-
-export default defineConfig(
-	compose(base, typescript, imports, {
-		overrides: [
-			{
-				files: ['src/multi/global/index.ts'],
-				rules: {
-					'unicorn/prefer-global-this': 'off',
-				},
-			},
-		],
-	}),
-);
diff --git a/core/platform/package.json b/core/platform/package.json
index d12a24f..f2d13dd 100644
--- a/core/platform/package.json
+++ b/core/platform/package.json
@@ -18,7 +18,7 @@
     "url": "git+https://github.com/robonen/tools.git",
     "directory": "packages/platform"
   },
-  "packageManager": "pnpm@10.29.3",
+  "packageManager": "pnpm@10.33.2",
   "engines": {
     "node": ">=24.13.1"
   },
@@ -28,27 +28,39 @@
   ],
   "exports": {
     "./browsers": {
-      "types": "./dist/browsers.d.ts",
-      "import": "./dist/browsers.js",
-      "require": "./dist/browsers.cjs"
+      "import": {
+        "types": "./dist/browsers.d.mts",
+        "default": "./dist/browsers.mjs"
+      },
+      "require": {
+        "types": "./dist/browsers.d.cts",
+        "default": "./dist/browsers.cjs"
+      }
     },
     "./multi": {
-      "types": "./dist/multi.d.ts",
-      "import": "./dist/multi.js",
-      "require": "./dist/multi.cjs"
+      "import": {
+        "types": "./dist/multi.d.mts",
+        "default": "./dist/multi.mjs"
+      },
+      "require": {
+        "types": "./dist/multi.d.cts",
+        "default": "./dist/multi.cjs"
+      }
     }
   },
   "scripts": {
-    "lint": "oxlint -c oxlint.config.ts",
+    "lint:check": "eslint .",
+    "lint:fix": "eslint . --fix",
     "test": "vitest run",
     "dev": "vitest dev",
     "build": "tsdown"
   },
   "devDependencies": {
-    "@robonen/oxlint": "workspace:*",
+    "@robonen/eslint": "workspace:*",
+    "@robonen/stdlib": "workspace:*",
     "@robonen/tsconfig": "workspace:*",
     "@robonen/tsdown": "workspace:*",
-    "oxlint": "catalog:",
+    "eslint": "catalog:",
     "tsdown": "catalog:"
   }
 }
diff --git a/core/platform/src/browsers/animationLifecycle/index.test.ts b/core/platform/src/browsers/animationLifecycle/index.test.ts
new file mode 100644
index 0000000..f697335
--- /dev/null
+++ b/core/platform/src/browsers/animationLifecycle/index.test.ts
@@ -0,0 +1,139 @@
+import { describe, expect, it, vi } from 'vitest';
+import {
+  dispatchAnimationEvent,
+  getAnimationName,
+  isAnimatable,
+  onAnimationSettle,
+  shouldSuspendUnmount,
+} from '.';
+
+describe('getAnimationName', () => {
+  it('returns "none" for undefined element', () => {
+    expect(getAnimationName(undefined)).toBe('none');
+  });
+
+  it('returns the animation name from inline style', () => {
+    const el = document.createElement('div');
+    el.style.animationName = 'fadeIn';
+    document.body.appendChild(el);
+
+    expect(getAnimationName(el)).toBe('fadeIn');
+
+    document.body.removeChild(el);
+  });
+});
+
+describe('isAnimatable', () => {
+  it('returns false for undefined element', () => {
+    expect(isAnimatable(undefined)).toBe(false);
+  });
+
+  it('returns false for element with no animation or transition', () => {
+    const el = document.createElement('div');
+    document.body.appendChild(el);
+
+    expect(isAnimatable(el)).toBe(false);
+
+    document.body.removeChild(el);
+  });
+});
+
+describe('shouldSuspendUnmount', () => {
+  it('returns false for undefined element', () => {
+    expect(shouldSuspendUnmount(undefined, 'none')).toBe(false);
+  });
+
+  it('returns false for element with no animation/transition', () => {
+    const el = document.createElement('div');
+    document.body.appendChild(el);
+
+    expect(shouldSuspendUnmount(el, 'none')).toBe(false);
+
+    document.body.removeChild(el);
+  });
+});
+
+describe('dispatchAnimationEvent', () => {
+  it('dispatches a custom event on the element', () => {
+    const el = document.createElement('div');
+    const handler = vi.fn();
+
+    el.addEventListener('enter', handler);
+    dispatchAnimationEvent(el, 'enter');
+
+    expect(handler).toHaveBeenCalledOnce();
+  });
+
+  it('does not throw for undefined element', () => {
+    expect(() => dispatchAnimationEvent(undefined, 'leave')).not.toThrow();
+  });
+
+  it('dispatches non-bubbling event', () => {
+    const el = document.createElement('div');
+    const parent = document.createElement('div');
+    const handler = vi.fn();
+
+    parent.appendChild(el);
+    parent.addEventListener('enter', handler);
+    dispatchAnimationEvent(el, 'enter');
+
+    expect(handler).not.toHaveBeenCalled();
+  });
+});
+
+describe('onAnimationSettle', () => {
+  it('returns a cleanup function', () => {
+    const el = document.createElement('div');
+    const cleanup = onAnimationSettle(el, { onSettle: vi.fn() });
+
+    expect(typeof cleanup).toBe('function');
+    cleanup();
+  });
+
+  it('calls onSettle callback on transitionend', () => {
+    const el = document.createElement('div');
+    const callback = vi.fn();
+
+    onAnimationSettle(el, { onSettle: callback });
+    el.dispatchEvent(new Event('transitionend'));
+
+    expect(callback).toHaveBeenCalledOnce();
+  });
+
+  it('calls onSettle callback on transitioncancel', () => {
+    const el = document.createElement('div');
+    const callback = vi.fn();
+
+    onAnimationSettle(el, { onSettle: callback });
+    el.dispatchEvent(new Event('transitioncancel'));
+
+    expect(callback).toHaveBeenCalledOnce();
+  });
+
+  it('calls onStart callback on animationstart', () => {
+    const el = document.createElement('div');
+    const startCallback = vi.fn();
+
+    onAnimationSettle(el, {
+      onSettle: vi.fn(),
+      onStart: startCallback,
+    });
+
+    el.dispatchEvent(new Event('animationstart'));
+
+    expect(startCallback).toHaveBeenCalledOnce();
+  });
+
+  it('removes all listeners on cleanup', () => {
+    const el = document.createElement('div');
+    const callback = vi.fn();
+
+    const cleanup = onAnimationSettle(el, { onSettle: callback });
+    cleanup();
+
+    el.dispatchEvent(new Event('transitionend'));
+    el.dispatchEvent(new Event('transitioncancel'));
+
+    expect(callback).not.toHaveBeenCalled();
+  });
+});
diff --git a/core/platform/src/browsers/animationLifecycle/index.ts b/core/platform/src/browsers/animationLifecycle/index.ts
new file mode 100644
index 0000000..9701621
--- /dev/null
+++ b/core/platform/src/browsers/animationLifecycle/index.ts
@@ -0,0 +1,139 @@
+export type AnimationLifecycleEvent = 'enter' | 'after-enter' | 'leave' | 'after-leave';
+
+export interface AnimationSettleCallbacks {
+  onSettle: () => void;
+  onStart?: (animationName: string) => void;
+}
+
+/**
+ * @name getAnimationName
+ * @category Browsers
+ * @description Returns the current CSS animation name(s) of an element
+ *
+ * @since 0.0.5
+ */
+export function getAnimationName(el: HTMLElement | undefined): string {
+  return el ? getComputedStyle(el).animationName || 'none' : 'none';
+}
+
+/**
+ * @name isAnimatable
+ * @category Browsers
+ * @description Checks whether an element has a running CSS animation or transition
+ *
+ * @since 0.0.5
+ */
+export function isAnimatable(el: HTMLElement | undefined): boolean {
+  if (!el) return false;
+
+  const style = getComputedStyle(el);
+  const animationName = style.animationName || 'none';
+  const transitionProperty = style.transitionProperty || 'none';
+
+  const hasAnimation = animationName !== 'none' && animationName !== '';
+  const hasTransition = transitionProperty !== 'none' && transitionProperty !== '' && transitionProperty !== 'all';
+
+  return hasAnimation || hasTransition;
+}
+
+/**
+ * @name shouldSuspendUnmount
+ * @category Browsers
+ * @description Determines whether unmounting should be delayed due to a running animation/transition change
+ *
+ * @since 0.0.5
+ */
+export function shouldSuspendUnmount(el: HTMLElement | undefined, prevAnimationName: string): boolean {
+  if (!el) return false;
+
+  const style = getComputedStyle(el);
+
+  if (style.display === 'none') return false;
+
+  const animationName = style.animationName || 'none';
+  const transitionProperty = style.transitionProperty || 'none';
+
+  const hasAnimation = animationName !== 'none' && animationName !== '';
+  const hasTransition = transitionProperty !== 'none' && transitionProperty !== '' && transitionProperty !== 'all';
+
+  if (!hasAnimation && !hasTransition) return false;
+
+  return prevAnimationName !== animationName || hasTransition;
+}
+
+/**
+ * @name dispatchAnimationEvent
+ * @category Browsers
+ * @description Dispatches a non-bubbling custom event on an element for animation lifecycle tracking
+ *
+ * @since 0.0.5
+ */
+export function dispatchAnimationEvent(el: HTMLElement | undefined, name: AnimationLifecycleEvent): void {
+  el?.dispatchEvent(new CustomEvent(name, { bubbles: false, cancelable: false }));
+}
+
+/**
+ * @name onAnimationSettle
+ * @category Browsers
+ * @description Attaches animation/transition end listeners to an element with fill-mode flash prevention. Returns a cleanup function.
+ *
+ * @since 0.0.5
+ */
+export function onAnimationSettle(el: HTMLElement, callbacks: AnimationSettleCallbacks): () => void {
+  let fillModeTimeoutId: ReturnType<typeof setTimeout> | undefined;
+
+  const handleAnimationEnd = (event: AnimationEvent) => {
+    const currentAnimationName = getAnimationName(el);
+    const isCurrentAnimation = currentAnimationName.includes(CSS.escape(event.animationName));
+
+    if (event.target === el && isCurrentAnimation) {
+      callbacks.onSettle();
+
+      if (fillModeTimeoutId !== undefined) {
+        clearTimeout(fillModeTimeoutId);
+      }
+
+      const currentFillMode = el.style.animationFillMode;
+      el.style.animationFillMode = 'forwards';
+
+      fillModeTimeoutId = setTimeout(() => {
+        if (el.style.animationFillMode === 'forwards') {
+          el.style.animationFillMode = currentFillMode;
+        }
+      });
+    }
+    else if (event.target === el && currentAnimationName === 'none') {
+      callbacks.onSettle();
+    }
+  };
+
+  const handleAnimationStart = (event: AnimationEvent) => {
+    if (event.target === el) {
+      callbacks.onStart?.(getAnimationName(el));
+    }
+  };
+
+  const handleTransitionEnd = (event: TransitionEvent) => {
+    if (event.target === el) {
+      callbacks.onSettle();
+    }
+  };
+
+  el.addEventListener('animationstart', handleAnimationStart, { passive: true });
+  el.addEventListener('animationcancel', handleAnimationEnd, { passive: true });
+  el.addEventListener('animationend', handleAnimationEnd, { passive: true });
+  el.addEventListener('transitioncancel', handleTransitionEnd, { passive: true });
+  el.addEventListener('transitionend', handleTransitionEnd, { passive: true });
+
+  return () => {
+    el.removeEventListener('animationstart', handleAnimationStart);
+    el.removeEventListener('animationcancel', handleAnimationEnd);
+    el.removeEventListener('animationend', handleAnimationEnd);
+    el.removeEventListener('transitioncancel', handleTransitionEnd);
+    el.removeEventListener('transitionend', handleTransitionEnd);
+
+    if (fillModeTimeoutId !== undefined) {
+      clearTimeout(fillModeTimeoutId);
+    }
+  };
+}
diff --git a/core/platform/src/browsers/focusGuard/index.test.ts b/core/platform/src/browsers/focusGuard/index.test.ts
index 22e29a9..ffe3995 100644
--- a/core/platform/src/browsers/focusGuard/index.test.ts
+++ b/core/platform/src/browsers/focusGuard/index.test.ts
@@ -1,5 +1,5 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import { focusGuard, createGuardAttrs } from '.';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { createGuardAttrs, focusGuard } from '.';
 
 describe('focusGuard', () => {
   beforeEach(() => {
@@ -8,7 +8,7 @@ describe('focusGuard', () => {
 
   it('initialize with the correct default namespace', () => {
     const guard = focusGuard();
-    
+
     expect(guard.selector).toBe('data-focus-guard');
   });
 
@@ -31,7 +31,7 @@ describe('focusGuard', () => {
     guard.removeGuard();
 
     const guards = document.querySelectorAll(`[${guard.selector}]`);
-    
+
     expect(guards.length).toBe(0);
   });
 
@@ -66,4 +66,4 @@ describe('focusGuard', () => {
     expect(element.getAttribute('tabindex')).toBe('0');
     expect(element.getAttribute('style')).toBe('outline: none; opacity: 0; pointer-events: none; position: fixed;');
   });
-});
\ No newline at end of file
+});
diff --git a/core/platform/src/browsers/focusGuard/index.ts b/core/platform/src/browsers/focusGuard/index.ts
index 4ad1cf8..675075d 100644
--- a/core/platform/src/browsers/focusGuard/index.ts
+++ b/core/platform/src/browsers/focusGuard/index.ts
@@ -2,20 +2,20 @@
  * @name focusGuard
  * @category Browsers
  * @description Adds a pair of focus guards at the boundaries of the DOM tree to ensure consistent focus behavior
- * 
+ *
  * @param {string} namespace - The namespace to use for the guard attributes
  * @returns {Object} - An object containing the selector, createGuard, and removeGuard functions
- * 
+ *
  * @example
  * const guard = focusGuard();
  * guard.createGuard();
  * guard.removeGuard();
- * 
+ *
  * @example
  * const guard = focusGuard('focus-guard');
  * guard.createGuard();
  * guard.removeGuard();
- * 
+ *
  * @since 0.0.3
  */
 export function focusGuard(namespace = 'focus-guard') {
@@ -29,7 +29,7 @@ export function focusGuard(namespace = 'focus-guard') {
   };
 
   const removeGuard = () => {
-    document.querySelectorAll(`[${guardAttr}]`).forEach((element) => element.remove());
+    document.querySelectorAll(`[${guardAttr}]`).forEach(element => element.remove());
   };
 
   return {
@@ -47,4 +47,4 @@ export function createGuardAttrs(namespace = 'focus-guard') {
   element.setAttribute('style', 'outline: none; opacity: 0; pointer-events: none; position: fixed;');
 
   return element;
-}
\ No newline at end of file
+}
diff --git a/core/platform/src/browsers/focusScope/index.test.ts b/core/platform/src/browsers/focusScope/index.test.ts
new file mode 100644
index 0000000..d9acad6
--- /dev/null
+++ b/core/platform/src/browsers/focusScope/index.test.ts
@@ -0,0 +1,262 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import {
+  AUTOFOCUS_ON_MOUNT,
+  AUTOFOCUS_ON_UNMOUNT,
+  EVENT_OPTIONS,
+  focus,
+  focusFirst,
+  getActiveElement,
+  getTabbableCandidates,
+  getTabbableEdges,
+  isHidden,
+  isSelectableInput,
+} from '.';
+
+function createContainer(html: string): HTMLElement {
+  const container = document.createElement('div');
+
+  container.innerHTML = html;
+  document.body.appendChild(container);
+
+  return container;
+}
+
+describe('constants', () => {
+  it('exports correct event names', () => {
+    expect(AUTOFOCUS_ON_MOUNT).toBe('focusScope.autoFocusOnMount');
+    expect(AUTOFOCUS_ON_UNMOUNT).toBe('focusScope.autoFocusOnUnmount');
+  });
+
+  it('exports correct event options', () => {
+    expect(EVENT_OPTIONS).toEqual({ bubbles: false, cancelable: true });
+  });
+});
+
+describe('getActiveElement', () => {
+  it('returns document.body when nothing is focused', () => {
+    const active = getActiveElement();
+    expect(active).toBe(document.body);
+  });
+
+  it('returns the focused element', () => {
+    const input = document.createElement('input');
+    document.body.appendChild(input);
+    input.focus();
+
+    expect(getActiveElement()).toBe(input);
+
+    input.remove();
+  });
+});
+
+describe('getTabbableCandidates', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('returns focusable elements with tabindex >= 0', () => {
+    const container = createContainer(`
+      <input type="text" />
+      <button>Click</button>
+      <a href="#">Link</a>
+      <div tabindex="0">Div</div>
+    `);
+
+    const candidates = getTabbableCandidates(container);
+    expect(candidates.length).toBe(4);
+
+    container.remove();
+  });
+
+  it('skips disabled elements', () => {
+    const container = createContainer(`
+      <button disabled>Disabled</button>
+      <input type="text" />
+    `);
+
+    const candidates = getTabbableCandidates(container);
+    expect(candidates.length).toBe(1);
+    expect(candidates[0]!.tagName).toBe('INPUT');
+
+    container.remove();
+  });
+
+  it('skips hidden inputs', () => {
+    const container = createContainer(`
+      <input type="hidden" />
+      <input type="text" />
+    `);
+
+    const candidates = getTabbableCandidates(container);
+    expect(candidates.length).toBe(1);
+    expect((candidates[0] as HTMLInputElement).type).toBe('text');
+
+    container.remove();
+  });
+
+  it('skips elements with hidden attribute', () => {
+    const container = createContainer(`
+      <input type="text" hidden />
+      <input type="text" />
+    `);
+
+    const candidates = getTabbableCandidates(container);
+    expect(candidates.length).toBe(1);
+
+    container.remove();
+  });
+
+  it('returns empty array for container with no focusable elements', () => {
+    const container = createContainer(`
+      <div>Just text</div>
+      <span>More text</span>
+    `);
+
+    const candidates = getTabbableCandidates(container);
+    expect(candidates.length).toBe(0);
+
+    container.remove();
+  });
+});
+
+describe('getTabbableEdges', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('returns first and last tabbable elements', () => {
+    const container = createContainer(`
+      <input type="text" data-testid="first" />
+      <button>Middle</button>
+      <input type="text" data-testid="last" />
+    `);
+
+    const { first, last } = getTabbableEdges(container);
+    expect(first?.getAttribute('data-testid')).toBe('first');
+    expect(last?.getAttribute('data-testid')).toBe('last');
+
+    container.remove();
+  });
+
+  it('returns undefined for both when no tabbable elements', () => {
+    const container = createContainer(`<div>no focusable</div>`);
+
+    const { first, last } = getTabbableEdges(container);
+    expect(first).toBeUndefined();
+    expect(last).toBeUndefined();
+
+    container.remove();
+  });
+});
+
+describe('focusFirst', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('focuses the first element in the list', () => {
+    const container = createContainer(`
+      <input type="text" data-testid="a" />
+      <input type="text" data-testid="b" />
+    `);
+
+    const candidates = Array.from(container.querySelectorAll('input')) as HTMLElement[];
+    focusFirst(candidates);
+
+    expect(document.activeElement).toBe(candidates[0]);
+
+    container.remove();
+  });
+
+  it('returns true when focus changed', () => {
+    const container = createContainer(`<input type="text" />`);
+    const candidates = Array.from(container.querySelectorAll('input')) as HTMLElement[];
+
+    const result = focusFirst(candidates);
+    expect(result).toBe(true);
+
+    container.remove();
+  });
+
+  it('returns false when no candidate receives focus', () => {
+    const result = focusFirst([]);
+    expect(result).toBe(false);
+  });
+});
+
+describe('focus', () => {
+  it('does nothing when element is null', () => {
+    expect(() => focus(null)).not.toThrow();
+  });
+
+  it('focuses the given element', () => {
+    const input = document.createElement('input');
+    document.body.appendChild(input);
+
+    focus(input);
+    expect(document.activeElement).toBe(input);
+
+    input.remove();
+  });
+
+  it('calls select on input when select=true', () => {
+    const input = document.createElement('input');
+    input.value = 'hello';
+    document.body.appendChild(input);
+
+    focus(input, { select: true });
+    expect(document.activeElement).toBe(input);
+
+    input.remove();
+  });
+});
+
+describe('isSelectableInput', () => {
+  it('returns true for input elements', () => {
+    const input = document.createElement('input');
+    expect(isSelectableInput(input)).toBe(true);
+  });
+
+  it('returns false for non-input elements', () => {
+    const div = document.createElement('div');
+    expect(isSelectableInput(div)).toBe(false);
+  });
+});
+
+describe('isHidden', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('detects elements with visibility: hidden', () => {
+    const container = createContainer('');
+    const el = document.createElement('div');
+    el.style.visibility = 'hidden';
+    container.appendChild(el);
+
+    expect(isHidden(el)).toBe(true);
+
+    container.remove();
+  });
+
+  it('detects elements with display: none', () => {
+    const container = createContainer('');
+    const el = document.createElement('div');
+    el.style.display = 'none';
+    container.appendChild(el);
+
+    expect(isHidden(el)).toBe(true);
+
+    container.remove();
+  });
+
+  it('returns false for visible elements', () => {
+    const container = createContainer('');
+    const el = document.createElement('div');
+    container.appendChild(el);
+
+    expect(isHidden(el, container)).toBe(false);
+
+    container.remove();
+  });
+});
diff --git a/core/platform/src/browsers/focusScope/index.ts b/core/platform/src/browsers/focusScope/index.ts
new file mode 100644
index 0000000..4662ee4
--- /dev/null
+++ b/core/platform/src/browsers/focusScope/index.ts
@@ -0,0 +1,172 @@
+export type FocusableTarget = HTMLElement | { focus: () => void };
+
+export const AUTOFOCUS_ON_MOUNT = 'focusScope.autoFocusOnMount';
+export const AUTOFOCUS_ON_UNMOUNT = 'focusScope.autoFocusOnUnmount';
+export const EVENT_OPTIONS = { bubbles: false, cancelable: true };
+
+/**
+ * @name getActiveElement
+ * @category Browsers
+ * @description Returns the active element of the document (or shadow root)
+ *
+ * @since 0.0.5
+ */
+export function getActiveElement(doc: Document | ShadowRoot = document): HTMLElement | null {
+  let active = doc.activeElement as HTMLElement | null;
+
+  while (active?.shadowRoot)
+    active = active.shadowRoot.activeElement as HTMLElement | null;
+
+  return active;
+}
+
+/**
+ * @name isSelectableInput
+ * @category Browsers
+ * @description Checks if an element is an input element with a select method
+ *
+ * @since 0.0.5
+ */
+export function isSelectableInput(element: unknown): element is FocusableTarget & { select: () => void } {
+  return element instanceof HTMLInputElement && 'select' in element;
+}
+
+/**
+ * @name focus
+ * @category Browsers
+ * @description Focuses an element without scrolling. Optionally calls select on input elements.
+ *
+ * @since 0.0.5
+ */
+export function focus(element?: FocusableTarget | null, { select = false } = {}) {
+  if (element && element.focus) {
+    const previouslyFocused = getActiveElement();
+
+    element.focus({ preventScroll: true });
+
+    if (element !== previouslyFocused && isSelectableInput(element) && select) {
+      element.select();
+    }
+  }
+}
+
+/**
+ * @name focusFirst
+ * @category Browsers
+ * @description Attempts to focus the first element from a list of candidates. Stops when focus actually moves.
+ *
+ * @since 0.0.5
+ */
+export function focusFirst(candidates: HTMLElement[], { select = false } = {}): boolean {
+  const previouslyFocused = getActiveElement();
+
+  for (const candidate of candidates) {
+    focus(candidate, { select });
+
+    if (getActiveElement() !== previouslyFocused)
+      return true;
+  }
+
+  return false;
+}
+
+/**
+ * @name getTabbableCandidates
+ * @category Browsers
+ * @description Collects all tabbable candidates via TreeWalker (faster than querySelectorAll).
+ * This is an approximate check — does not account for computed styles. Visibility is checked separately in `findFirstVisible`.
+ *
+ * @since 0.0.5
+ */
+export function getTabbableCandidates(container: HTMLElement): HTMLElement[] {
+  const nodes: HTMLElement[] = [];
+
+  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+    acceptNode: (node: HTMLElement) => {
+      const isHiddenInput = node.tagName === 'INPUT' && (node as HTMLInputElement).type === 'hidden';
+
+      if ((node as any).disabled || node.hidden || isHiddenInput)
+        return NodeFilter.FILTER_SKIP;
+
+      return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+    },
+  });
+
+  while (walker.nextNode())
+    nodes.push(walker.currentNode as HTMLElement);
+
+  return nodes;
+}
+
+/**
+ * @name isHidden
+ * @category Browsers
+ * @description Checks if an element is hidden via `visibility: hidden` or `display: none` up the DOM tree
+ *
+ * @since 0.0.5
+ */
+export function isHidden(node: HTMLElement, upTo?: HTMLElement): boolean {
+  const style = getComputedStyle(node);
+
+  if (style.visibility === 'hidden' || style.display === 'none')
+    return true;
+
+  while (node.parentElement) {
+    node = node.parentElement;
+
+    if (upTo !== undefined && node === upTo)
+      return false;
+
+    if (getComputedStyle(node).display === 'none')
+      return true;
+  }
+
+  return false;
+}
+
+/**
+ * @name findFirstVisible
+ * @category Browsers
+ * @description Returns the first visible element from a list. Checks visibility up the DOM to `container` (exclusive).
+ *
+ * @since 0.0.5
+ */
+export function findFirstVisible(elements: HTMLElement[], container: HTMLElement): HTMLElement | undefined {
+  for (const element of elements) {
+    if (!isHidden(element, container))
+      return element;
+  }
+
+  return undefined;
+}
+
+/**
+ * @name findLastVisible
+ * @category Browsers
+ * @description Returns the last visible element from a list. Checks visibility up the DOM to `container` (exclusive).
+ *
+ * @since 0.0.5
+ */
+export function findLastVisible(elements: HTMLElement[], container: HTMLElement): HTMLElement | undefined {
+  for (let i = elements.length - 1; i >= 0; i--) {
+    if (!isHidden(elements[i]!, container))
+      return elements[i];
+  }
+
+  return undefined;
+}
+
+/**
+ * @name getTabbableEdges
+ * @category Browsers
+ * @description Returns the first and last tabbable elements inside a container
+ *
+ * @since 0.0.5
+ */
+export function getTabbableEdges(container: HTMLElement): { first: HTMLElement | undefined; last: HTMLElement | undefined } {
+  const candidates = getTabbableCandidates(container);
+  const first = findFirstVisible(candidates, container);
+  const last = findLastVisible(candidates, container);
+
+  return { first, last };
+}
diff --git a/core/platform/src/browsers/hideOthers/index.test.ts b/core/platform/src/browsers/hideOthers/index.test.ts
new file mode 100644
index 0000000..db33355
--- /dev/null
+++ b/core/platform/src/browsers/hideOthers/index.test.ts
@@ -0,0 +1,197 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { hideOthers } from '.';
+
+function setupTree(): { keep: HTMLElement; siblings: HTMLElement[] } {
+  document.body.innerHTML = `
+    <div id="a"></div>
+    <div id="b"></div>
+    <main id="container">
+      <header id="header"></header>
+      <section id="keep"><span id="inside"></span></section>
+      <footer id="footer"></footer>
+    </main>
+    <div id="c"></div>
+  `;
+  const keep = document.querySelector<HTMLElement>('#keep')!;
+  const siblings = [
+    document.querySelector<HTMLElement>('#a')!,
+    document.querySelector<HTMLElement>('#b')!,
+    document.querySelector<HTMLElement>('#c')!,
+    document.querySelector<HTMLElement>('#header')!,
+    document.querySelector<HTMLElement>('#footer')!,
+  ];
+  return { keep, siblings };
+}
+
+describe('hideOthers', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('hides siblings and ancestor-siblings of the target', () => {
+    const { keep, siblings } = setupTree();
+
+    hideOthers(keep);
+
+    for (const el of siblings) expect(el.getAttribute('aria-hidden')).toBe('true');
+    expect(keep.getAttribute('aria-hidden')).toBeNull();
+    expect(document.querySelector('#inside')!.getAttribute('aria-hidden')).toBeNull();
+    expect(document.querySelector('#container')!.getAttribute('aria-hidden')).toBeNull();
+  });
+
+  it('marks hidden nodes with the default marker', () => {
+    const { keep } = setupTree();
+
+    hideOthers(keep);
+
+    expect(document.querySelector('#a')!.getAttribute('data-aria-hidden')).toBe('true');
+    expect(keep.getAttribute('data-aria-hidden')).toBeNull();
+  });
+
+  it('undo restores the DOM to its original state', () => {
+    const { keep, siblings } = setupTree();
+
+    const undo = hideOthers(keep);
+    undo();
+
+    for (const el of siblings) {
+      expect(el.getAttribute('aria-hidden')).toBeNull();
+      expect(el.getAttribute('data-aria-hidden')).toBeNull();
+    }
+  });
+
+  it('ref-counts stacked calls so partial undo keeps outer layer hidden', () => {
+    const { keep, siblings } = setupTree();
+
+    const undoOuter = hideOthers(keep);
+    const undoInner = hideOthers(keep);
+
+    undoInner();
+
+    for (const el of siblings) expect(el.getAttribute('aria-hidden')).toBe('true');
+
+    undoOuter();
+
+    for (const el of siblings) expect(el.getAttribute('aria-hidden')).toBeNull();
+  });
+
+  it('preserves pre-existing aria-hidden attributes after undo', () => {
+    const { keep } = setupTree();
+    const a = document.querySelector<HTMLElement>('#a')!;
+    a.setAttribute('aria-hidden', 'true');
+
+    const undo = hideOthers(keep);
+    expect(a.getAttribute('aria-hidden')).toBe('true');
+
+    undo();
+    expect(a.getAttribute('aria-hidden')).toBe('true');
+    expect(a.getAttribute('data-aria-hidden')).toBeNull();
+  });
+
+  it('does not hide [aria-live] regions or <script> elements', () => {
+    document.body.innerHTML = `
+      <div id="keep"></div>
+      <div id="sibling"></div>
+      <div id="live" aria-live="polite"></div>
+      <script id="script"></script>
+    `;
+    const keep = document.querySelector<HTMLElement>('#keep')!;
+
+    hideOthers(keep);
+
+    expect(document.querySelector('#sibling')!.getAttribute('aria-hidden')).toBe('true');
+    expect(document.querySelector('#live')!.getAttribute('aria-hidden')).toBeNull();
+    expect(document.querySelector('#script')!.getAttribute('aria-hidden')).toBeNull();
+  });
+
+  it('accepts an array of targets', () => {
+    document.body.innerHTML = `
+      <div id="a"></div>
+      <div id="b"></div>
+      <div id="c"></div>
+    `;
+    const a = document.querySelector<HTMLElement>('#a')!;
+    const b = document.querySelector<HTMLElement>('#b')!;
+    const c = document.querySelector<HTMLElement>('#c')!;
+
+    hideOthers([a, b]);
+
+    expect(a.getAttribute('aria-hidden')).toBeNull();
+    expect(b.getAttribute('aria-hidden')).toBeNull();
+    expect(c.getAttribute('aria-hidden')).toBe('true');
+  });
+
+  it('respects a custom parentNode scope', () => {
+    document.body.innerHTML = `
+      <div id="outside"></div>
+      <section id="root">
+        <div id="keep"></div>
+        <div id="sibling"></div>
+      </section>
+    `;
+    const root = document.querySelector<HTMLElement>('#root')!;
+    const keep = document.querySelector<HTMLElement>('#keep')!;
+
+    hideOthers(keep, root);
+
+    expect(document.querySelector('#sibling')!.getAttribute('aria-hidden')).toBe('true');
+    expect(document.querySelector('#outside')!.getAttribute('aria-hidden')).toBeNull();
+  });
+
+  it('respects a custom marker name', () => {
+    const { keep } = setupTree();
+
+    const undo = hideOthers(keep, undefined, 'data-custom-marker');
+
+    const a = document.querySelector<HTMLElement>('#a')!;
+    expect(a.getAttribute('data-custom-marker')).toBe('true');
+    expect(a.getAttribute('data-aria-hidden')).toBeNull();
+
+    undo();
+    expect(a.getAttribute('data-custom-marker')).toBeNull();
+  });
+
+  it('walks up ShadowDOM hosts to find targets inside closed subtrees', () => {
+    document.body.innerHTML = `
+      <div id="host"></div>
+      <div id="sibling"></div>
+    `;
+    const host = document.querySelector<HTMLElement>('#host')!;
+    const shadow = host.attachShadow({ mode: 'open' });
+    const inner = document.createElement('div');
+    shadow.appendChild(inner);
+
+    hideOthers(inner);
+
+    expect(document.querySelector('#sibling')!.getAttribute('aria-hidden')).toBe('true');
+    expect(host.getAttribute('aria-hidden')).toBeNull();
+  });
+
+  it('returns a no-op when parent is unavailable', () => {
+    const orphan = document.createElement('div');
+    const bodyChild = document.createElement('div');
+    document.body.appendChild(bodyChild);
+
+    // Orphan has no ownerDocument.body? It does — jsdom. Simulate by pointing
+    // to a parentNode the target isn't contained in.
+    const undo = hideOthers(orphan, bodyChild);
+    expect(() => undo()).not.toThrow();
+    expect(bodyChild.getAttribute('aria-hidden')).toBeNull();
+  });
+
+  it('logs and continues when setAttribute throws on a node', () => {
+    const { keep } = setupTree();
+    const a = document.querySelector<HTMLElement>('#a')!;
+    const error = vi.spyOn(console, 'error').mockImplementation(() => {});
+    const original = a.setAttribute;
+    a.setAttribute = () => {
+      throw new Error('boom');
+    };
+
+    expect(() => hideOthers(keep)).not.toThrow();
+    expect(error).toHaveBeenCalled();
+
+    a.setAttribute = original;
+    error.mockRestore();
+  });
+});
diff --git a/core/platform/src/browsers/hideOthers/index.ts b/core/platform/src/browsers/hideOthers/index.ts
new file mode 100644
index 0000000..304b6a8
--- /dev/null
+++ b/core/platform/src/browsers/hideOthers/index.ts
@@ -0,0 +1,190 @@
+import { noop } from '@robonen/stdlib';
+import type { VoidFunction } from '@robonen/stdlib';
+
+type Undo = VoidFunction;
+
+const CONTROL_ATTR = 'aria-hidden';
+const DEFAULT_MARKER = 'data-aria-hidden';
+/**
+ * `aria-live` regions and scripts stay readable — see theKashey/aria-hidden#10.
+ */
+const PRESERVE_SELECTOR = '[aria-live], script';
+
+/**
+ * Ref-counted global state. Shapes are intentionally monomorphic and only
+ * mutated via `.set/.get/.delete` so V8 keeps fast-property access on the
+ * backing `WeakMap`s.
+ */
+let counterMap = new WeakMap<Element, number>();
+let uncontrolledNodes = new WeakMap<Element, boolean>();
+let markerRegistry = new Map<string, WeakMap<Element, number>>();
+let lockCount = 0;
+
+function unwrapHost(node: Node | null): Element | null {
+  let cursor: Node | null = node;
+  while (cursor) {
+    const host = (cursor as unknown as { host?: Element }).host;
+    if (host) return host;
+    cursor = cursor.parentNode;
+  }
+  return null;
+}
+
+/**
+ * Projects each target into `parent`: if a target sits outside (e.g. inside a
+ * shadow root), substitute its nearest ShadowDOM host.
+ */
+function normalizeTargets(parent: Element, targets: readonly Element[]): Element[] {
+  const out: Element[] = [];
+  for (let i = 0, len = targets.length; i < len; i++) {
+    const target = targets[i]!;
+    if (parent.contains(target)) {
+      out.push(target);
+      continue;
+    }
+    const host = unwrapHost(target);
+    if (host && parent.contains(host)) out.push(host);
+  }
+  return out;
+}
+
+function markAncestors(targets: readonly Element[], keep: Set<Node>): void {
+  for (let i = 0, len = targets.length; i < len; i++) {
+    let cursor: Node | null = targets[i]!;
+    while (cursor && !keep.has(cursor)) {
+      keep.add(cursor);
+      cursor = cursor.parentNode;
+    }
+  }
+}
+
+function getOrCreateMarker(name: string): WeakMap<Element, number> {
+  let marker = markerRegistry.get(name);
+  if (!marker) {
+    marker = new WeakMap<Element, number>();
+    markerRegistry.set(name, marker);
+  }
+  return marker;
+}
+
+function hideNode(node: Element, marker: WeakMap<Element, number>, markerName: string): void {
+  try {
+    const attr = node.getAttribute(CONTROL_ATTR);
+    const alreadyHidden = attr !== null && attr !== 'false';
+    const counterValue = (counterMap.get(node) || 0) + 1;
+    const markerValue = (marker.get(node) || 0) + 1;
+
+    counterMap.set(node, counterValue);
+    marker.set(node, markerValue);
+
+    if (counterValue === 1 && alreadyHidden) uncontrolledNodes.set(node, true);
+    if (markerValue === 1) node.setAttribute(markerName, 'true');
+    if (!alreadyHidden) node.setAttribute(CONTROL_ATTR, 'true');
+  }
+  catch (error) {
+    console.error('hideOthers: cannot operate on', node, error);
+  }
+}
+
+function restoreNode(node: Element, marker: WeakMap<Element, number>, markerName: string): void {
+  const counterValue = (counterMap.get(node) || 0) - 1;
+  const markerValue = (marker.get(node) || 0) - 1;
+
+  counterMap.set(node, counterValue);
+  marker.set(node, markerValue);
+
+  if (counterValue === 0) {
+    if (!uncontrolledNodes.has(node)) node.removeAttribute(CONTROL_ATTR);
+    uncontrolledNodes.delete(node);
+  }
+  if (markerValue === 0) node.removeAttribute(markerName);
+}
+
+function applyAttributeToOthers(originalTargets: Element[], parentNode: Element, markerName: string): Undo {
+  const targets = normalizeTargets(parentNode, originalTargets);
+  const marker = getOrCreateMarker(markerName);
+
+  // PACKED_ELEMENTS from cradle to grave: only `Element` is ever pushed.
+  const hiddenNodes: Element[] = [];
+  const toKeep = new Set<Node>();
+  const toStop = new Set<Element>();
+  for (let i = 0, len = targets.length; i < len; i++) toStop.add(targets[i]!);
+
+  markAncestors(targets, toKeep);
+
+  // Iterative DFS over live `HTMLCollection`s — no closure per descent, no
+  // `Array.from` clone.
+  const stack: Element[] = [parentNode];
+  while (stack.length > 0) {
+    const parent = stack.pop()!;
+    if (toStop.has(parent)) continue;
+
+    const children = parent.children;
+    for (let i = 0, len = children.length; i < len; i++) {
+      const node = children[i]!;
+      if (toKeep.has(node)) {
+        stack.push(node);
+      }
+      else {
+        hideNode(node, marker, markerName);
+        hiddenNodes.push(node);
+      }
+    }
+  }
+  lockCount++;
+
+  return () => {
+    for (let i = 0, len = hiddenNodes.length; i < len; i++) {
+      restoreNode(hiddenNodes[i]!, marker, markerName);
+    }
+    lockCount--;
+    if (lockCount === 0) {
+      counterMap = new WeakMap();
+      uncontrolledNodes = new WeakMap();
+      markerRegistry = new Map();
+    }
+  };
+}
+
+/**
+ * @name hideOthers
+ * @category Browsers
+ * @description Marks every sibling of `target` (within `parentNode`, defaulting
+ * to `document.body`) as `aria-hidden="true"` so assistive technologies skip
+ * them. `aria-live` regions and `<script>` elements are preserved. Returns an
+ * undo function that restores the previous state; calls stack (ref-counted)
+ * across multiple layers.
+ *
+ * Port of the `aria-hidden` npm package, kept dependency-free.
+ *
+ * @param {Element | Element[]} target - Element(s) to keep visible to AT
+ * @param {Element} [parentNode] - Root to scan; defaults to `document.body`
+ * @param {string} [markerName] - Data attribute used to ref-count our mutations
+ * @returns {Undo} Function that reverts the aria-hidden mutations
+ *
+ * @since 0.0.5
+ */
+export function hideOthers(target: Element | Element[], parentNode?: Element, markerName = DEFAULT_MARKER): Undo {
+  // `typeof` avoids a ReferenceError in SSR environments where `document` is
+  // not defined as a global.
+  if (typeof document === 'undefined') return noop;
+
+  // Copy the input into our own packed `Element[]` so user mutations don't
+  // affect us and we never call into the iterator protocol later.
+  const targets: Element[] = [];
+  if (Array.isArray(target)) {
+    for (let i = 0, len = target.length; i < len; i++)
+      targets.push(target[i]!);
+  }
+  else {
+    targets.push(target);
+  }
+
+  const activeParent = parentNode ?? targets[0]?.ownerDocument.body;
+  if (!activeParent) return noop;
+
+  const preserved = activeParent.querySelectorAll(PRESERVE_SELECTOR);
+  for (let i = 0, len = preserved.length; i < len; i++) targets.push(preserved[i]!);
+
+  return applyAttributeToOthers(targets, activeParent, markerName);
+}
diff --git a/core/platform/src/browsers/index.ts b/core/platform/src/browsers/index.ts
index 0569ecb..d82f88c 100644
--- a/core/platform/src/browsers/index.ts
+++ b/core/platform/src/browsers/index.ts
@@ -1 +1,4 @@
-export * from './focusGuard';
\ No newline at end of file
+export * from './animationLifecycle';
+export * from './focusGuard';
+export * from './focusScope';
+export * from './hideOthers';
diff --git a/core/platform/src/multi/debounce/index.ts b/core/platform/src/multi/debounce/index.ts
deleted file mode 100644
index d61307e..0000000
--- a/core/platform/src/multi/debounce/index.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-// eslint-disable
-
-export interface DebounceOptions {
-    /**
-     * Call the function on the leading edge of the timeout, instead of waiting for the trailing edge
-     */
-    readonly immediate?: boolean;
-
-    /**
-     * Call the function on the trailing edge with the last used arguments.
-     * Result of call is from previous call
-     */
-    readonly trailing?: boolean;
-}
-
-const DEFAULT_DEBOUNCE_OPTIONS: DebounceOptions = {
-    trailing: true,
-}
-
-export function debounce<FnArguments extends unknown[], FnReturn>(
-    fn: (...args: FnArguments) => PromiseLike<FnReturn> | FnReturn,
-    timeout: number = 20,
-    options: DebounceOptions = {},
-) {
-    options = {
-        ...DEFAULT_DEBOUNCE_OPTIONS,
-        ...options,
-    };
-
-    if (!Number.isFinite(timeout) || timeout <= 0)
-        throw new TypeError('Debounce timeout must be a positive number');
-
-    // Last result for leading edge
-    let leadingValue: PromiseLike<FnReturn> | FnReturn;
-    
-    // Debounce timeout id
-    let timeoutId: NodeJS.Timeout;
-
-    // Promises to be resolved when debounce is finished
-    let resolveList: Array<(value: unknown) => void> = [];
-
-    // State of currently resolving promise
-    let currentResolve: Promise<FnReturn>;
-
-    // Trailing call information
-    let trailingArgs: unknown[];
-
-
-}
diff --git a/core/platform/src/multi/global/index.ts b/core/platform/src/multi/global/index.ts
index e337e88..a867321 100644
--- a/core/platform/src/multi/global/index.ts
+++ b/core/platform/src/multi/global/index.ts
@@ -7,8 +7,8 @@
  *
  * @since 0.0.1
  */
-export const _global =
-  typeof globalThis !== 'undefined'
+export const _global
+  = typeof globalThis !== 'undefined'
     ? globalThis
     : typeof window !== 'undefined'
       ? window
@@ -22,7 +22,7 @@ export const _global =
  * @name isClient
  * @category Multi
  * @description Check if the current environment is the client
- * 
+ *
  * @since 0.0.1
  */
-export const isClient = typeof window !== 'undefined' && typeof document !== 'undefined';
\ No newline at end of file
+export const isClient = typeof window !== 'undefined' && typeof document !== 'undefined';
diff --git a/core/platform/src/multi/index.ts b/core/platform/src/multi/index.ts
index 8774985..7afcc36 100644
--- a/core/platform/src/multi/index.ts
+++ b/core/platform/src/multi/index.ts
@@ -1,2 +1 @@
 export * from './global';
-// export * from './debounce';
\ No newline at end of file
diff --git a/core/platform/tsconfig.json b/core/platform/tsconfig.json
index 2d43941..2781e66 100644
--- a/core/platform/tsconfig.json
+++ b/core/platform/tsconfig.json
@@ -1,6 +1,7 @@
 {
-  "extends": "@robonen/tsconfig/tsconfig.json",
-  "compilerOptions": {
-    "lib": ["DOM"]
-  }
-}
\ No newline at end of file
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.src.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/core/platform/tsconfig.node.json b/core/platform/tsconfig.node.json
new file mode 100644
index 0000000..edc474f
--- /dev/null
+++ b/core/platform/tsconfig.node.json
@@ -0,0 +1,8 @@
+{
+  "extends": "@robonen/tsconfig/tsconfig.node.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo"
+  },
+  "include": ["*.config.ts"]
+}
diff --git a/core/platform/tsconfig.src.json b/core/platform/tsconfig.src.json
new file mode 100644
index 0000000..1fbcf24
--- /dev/null
+++ b/core/platform/tsconfig.src.json
@@ -0,0 +1,9 @@
+{
+  "extends": "@robonen/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "composite": true,
+    "types": ["node"],
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.src.tsbuildinfo"
+  },
+  "include": ["src/**/*.ts"]
+}
diff --git a/core/platform/tsdown.config.ts b/core/platform/tsdown.config.ts
index 1b37543..4ed448d 100644
--- a/core/platform/tsdown.config.ts
+++ b/core/platform/tsdown.config.ts
@@ -3,8 +3,9 @@ import { sharedConfig } from '@robonen/tsdown';
 
 export default defineConfig({
   ...sharedConfig,
+  tsconfig: './tsconfig.src.json',
   entry: {
     browsers: 'src/browsers/index.ts',
     multi: 'src/multi/index.ts',
   },
-});
\ No newline at end of file
+});
diff --git a/core/platform/vitest.config.ts b/core/platform/vitest.config.ts
index 69e22cf..647a9e5 100644
--- a/core/platform/vitest.config.ts
+++ b/core/platform/vitest.config.ts
@@ -5,4 +5,3 @@ export default defineConfig({
     environment: 'jsdom',
   },
 });
-
diff --git a/core/stdlib/README.md b/core/stdlib/README.md
index 609ce8f..68f6900 100644
--- a/core/stdlib/README.md
+++ b/core/stdlib/README.md
@@ -10,20 +10,21 @@ pnpm install @robonen/stdlib
 
 ## Modules
 
-| Module          | Utilities                                                       |
-| --------------- | --------------------------------------------------------------- |
-| **arrays**      | `cluster`, `first`, `last`, `sum`, `unique`                     |
-| **async**       | `sleep`, `tryIt`                                                |
-| **bits**        | `flags`                                                         |
-| **collections** | `get`                                                           |
-| **math**        | `clamp`, `lerp`, `remap` + BigInt variants                      |
-| **objects**     | `omit`, `pick`                                                  |
-| **patterns**    | `pubsub`                                                        |
-| **structs**     | `stack`                                                         |
-| **sync**        | `mutex`                                                         |
-| **text**        | `levenshteinDistance`, `trigramDistance`                         |
-| **types**       | JS & TS type utilities                                          |
-| **utils**       | `timestamp`, `noop`                                             |
+| Module          | Utilities                                                                          |
+| --------------- | ---------------------------------------------------------------------------------- |
+| **arrays**      | `cluster`, `first`, `groupBy`, `last`, `partition`, `range`, `sum`, `toArray`, `unique`, `zip` |
+| **async**       | `pool`, `retry`, `sleep`, `tryIt`                                                   |
+| **bits**        | `flagsGenerator`, `and`, `or`, `not`, `has`, `is`, `unset`, `toggle`, `BitVector`  |
+| **collections** | `get`                                                                              |
+| **functions**   | `compose`, `debounce`, `memoize`, `once`, `pipe`, `throttle`                        |
+| **math**        | `clamp`, `lerp`, `remap` + BigInt variants                                          |
+| **objects**     | `omit`, `pick`                                                                     |
+| **patterns**    | `Command`, `PubSub`, `StateMachine`                                                 |
+| **structs**     | `BinaryHeap`, `CircularBuffer`, `Deque`, `LinkedList`, `PriorityQueue`, `Queue`, `Stack` |
+| **sync**        | `mutex`                                                                            |
+| **text**        | `levenshteinDistance`, `trigramDistance`, `templateObject`                          |
+| **types**       | JS & TS type utilities                                                             |
+| **utils**       | `timestamp`, `noop`                                                                |
 
 ## Usage
 
diff --git a/core/stdlib/docs/intro.vue b/core/stdlib/docs/intro.vue
new file mode 100644
index 0000000..5d54ef1
--- /dev/null
+++ b/core/stdlib/docs/intro.vue
@@ -0,0 +1,178 @@
+<script setup lang="ts">
+const installCode = `pnpm add @robonen/stdlib`;
+
+const usageCode = `import { groupBy, unique, clamp, tryIt } from '@robonen/stdlib';
+
+// Arrays — group records by a derived key
+const byType = groupBy(
+  [{ type: 'a', v: 1 }, { type: 'b', v: 2 }, { type: 'a', v: 3 }],
+  item => item.type,
+);
+// => { a: [{ type: 'a', v: 1 }, { type: 'a', v: 3 }], b: [{ type: 'b', v: 2 }] }
+
+// Arrays — dedupe in a single pass
+unique([1, 1, 2, 3, 3]); // => [1, 2, 3]
+
+// Math — keep a value inside a range
+clamp(value, 0, 100);
+
+// Async — error handling without forking control flow
+const { error, data } = await tryIt(fetch)('/api/todos/1');
+if (error) {
+  // handle the failure
+} else {
+  // use data
+}`;
+</script>
+
+<template>
+  <div class="docs-section">
+    <!-- Hero -->
+    <div class="prose-docs">
+      <h1>@robonen/stdlib</h1>
+      <p class="text-lg text-(--fg-muted)">
+        A platform-independent standard library of tools, utilities, and helpers for TypeScript —
+        arrays, async, math, data structures, and patterns, all tree-shakeable and fully typed.
+      </p>
+    </div>
+
+    <div class="prose-docs">
+      <p>
+        Every project ends up reimplementing the same handful of helpers: dedupe an array,
+        clamp a number, group records by a key, retry a flaky request. <code>@robonen/stdlib</code>
+        collects those building blocks into one cohesive, dependency-free package. It runs the same
+        in Node, the browser, and the edge — there are no platform globals, no polyfills, and no
+        runtime dependencies. Import only what you use; the rest is shaken out of your bundle.
+      </p>
+    </div>
+
+    <!-- Feature highlights -->
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="text-sm font-semibold text-(--fg) mb-1.5">Fully typed</h3>
+        <p class="text-sm text-(--fg-muted) leading-relaxed">
+          Generic signatures preserve element and key types end to end, so inference keeps
+          working through <code>groupBy</code>, <code>partition</code>, <code>zip</code>, and friends.
+        </p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="text-sm font-semibold text-(--fg) mb-1.5">Zero dependencies</h3>
+        <p class="text-sm text-(--fg-muted) leading-relaxed">
+          No transitive dependencies and no platform assumptions. The same code runs in Node,
+          the browser, Deno, Bun, and edge runtimes.
+        </p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="text-sm font-semibold text-(--fg) mb-1.5">Tree-shakeable</h3>
+        <p class="text-sm text-(--fg-muted) leading-relaxed">
+          Each utility is a standalone export with no shared side effects. Import a single
+          function and ship only that function.
+        </p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="text-sm font-semibold text-(--fg) mb-1.5">Batteries included</h3>
+        <p class="text-sm text-(--fg-muted) leading-relaxed">
+          Beyond array and math helpers you get data structures
+          (<code>Deque</code>, <code>BinaryHeap</code>, <code>LinkedList</code>) and patterns
+          (<code>StateMachine</code>, <code>PubSub</code>, <code>Command</code>).
+        </p>
+      </div>
+    </div>
+
+    <!-- Install -->
+    <div class="prose-docs">
+      <h2>Install</h2>
+    </div>
+    <DocsCode :code="installCode" lang="bash" />
+
+    <!-- Usage -->
+    <div class="prose-docs">
+      <h2>Quick start</h2>
+      <p>
+        Import named utilities directly from the package root. Each one is small, predictable,
+        and focused on a single job.
+      </p>
+    </div>
+    <DocsCode :code="usageCode" lang="ts" />
+
+    <!-- Modules overview -->
+    <div class="prose-docs">
+      <h2>What's inside</h2>
+      <p>
+        The library is organized into focused modules. A few of the most-used building blocks:
+      </p>
+      <ul>
+        <li>
+          <strong>Arrays</strong> — <code>groupBy</code>, <code>partition</code>,
+          <code>unique</code>, <code>zip</code>, <code>cluster</code>, <code>range</code>.
+        </li>
+        <li>
+          <strong>Async</strong> — <code>tryIt</code>, <code>retry</code>, <code>pool</code>,
+          <code>sleep</code> for control flow that doesn't fight you.
+        </li>
+        <li>
+          <strong>Math</strong> — <code>clamp</code>, <code>lerp</code>, <code>remap</code>,
+          each with a BigInt variant.
+        </li>
+        <li>
+          <strong>Functions</strong> — <code>debounce</code>, <code>throttle</code>,
+          <code>memoize</code>, <code>once</code>, <code>compose</code>, <code>pipe</code>.
+        </li>
+        <li>
+          <strong>Structs &amp; patterns</strong> — <code>Deque</code>,
+          <code>PriorityQueue</code>, <code>StateMachine</code>, <code>PubSub</code> and more.
+        </li>
+      </ul>
+    </div>
+
+    <!-- Where to next -->
+    <div class="rounded-lg border border-(--border) bg-(--bg-elevated) p-5">
+      <h2 class="text-base font-semibold text-(--fg) mb-2">Where to next</h2>
+      <p class="text-sm text-(--fg-muted) mb-3">
+        Browse the full API reference below, or jump straight to a popular utility:
+      </p>
+      <ul class="flex flex-wrap gap-2 m-0 p-0 list-none">
+        <li>
+          <NuxtLink
+            to="/stdlib/group-by"
+            class="inline-flex items-center rounded-md border border-(--border) bg-(--bg-subtle) px-3 py-1.5 text-sm text-(--accent-text) hover:bg-(--bg-inset) focus:ring-(--ring)"
+          >
+            groupBy
+          </NuxtLink>
+        </li>
+        <li>
+          <NuxtLink
+            to="/stdlib/try-it"
+            class="inline-flex items-center rounded-md border border-(--border) bg-(--bg-subtle) px-3 py-1.5 text-sm text-(--accent-text) hover:bg-(--bg-inset) focus:ring-(--ring)"
+          >
+            tryIt
+          </NuxtLink>
+        </li>
+        <li>
+          <NuxtLink
+            to="/stdlib/retry"
+            class="inline-flex items-center rounded-md border border-(--border) bg-(--bg-subtle) px-3 py-1.5 text-sm text-(--accent-text) hover:bg-(--bg-inset) focus:ring-(--ring)"
+          >
+            retry
+          </NuxtLink>
+        </li>
+        <li>
+          <NuxtLink
+            to="/stdlib/clamp"
+            class="inline-flex items-center rounded-md border border-(--border) bg-(--bg-subtle) px-3 py-1.5 text-sm text-(--accent-text) hover:bg-(--bg-inset) focus:ring-(--ring)"
+          >
+            clamp
+          </NuxtLink>
+        </li>
+        <li>
+          <NuxtLink
+            to="/stdlib/debounce"
+            class="inline-flex items-center rounded-md border border-(--border) bg-(--bg-subtle) px-3 py-1.5 text-sm text-(--accent-text) hover:bg-(--bg-inset) focus:ring-(--ring)"
+          >
+            debounce
+          </NuxtLink>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
diff --git a/core/stdlib/eslint.config.ts b/core/stdlib/eslint.config.ts
new file mode 100644
index 0000000..e703f35
--- /dev/null
+++ b/core/stdlib/eslint.config.ts
@@ -0,0 +1,3 @@
+import { base, compose, imports, stylistic, typescript } from '@robonen/eslint';
+
+export default compose(base, typescript, imports, stylistic);
diff --git a/core/stdlib/oxlint.config.ts b/core/stdlib/oxlint.config.ts
deleted file mode 100644
index 247c39b..0000000
--- a/core/stdlib/oxlint.config.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { defineConfig } from 'oxlint';
-import { compose, base, typescript, imports } from '@robonen/oxlint';
-
-export default defineConfig(compose(base, typescript, imports));
diff --git a/core/stdlib/package.json b/core/stdlib/package.json
index 077068c..51282c5 100644
--- a/core/stdlib/package.json
+++ b/core/stdlib/package.json
@@ -18,7 +18,7 @@
     "url": "git+https://github.com/robonen/tools.git",
     "directory": "packages/stdlib"
   },
-  "packageManager": "pnpm@10.29.3",
+  "packageManager": "pnpm@10.33.2",
   "engines": {
     "node": ">=24.13.1"
   },
@@ -28,22 +28,29 @@
   ],
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
     }
   },
   "scripts": {
-    "lint": "oxlint -c oxlint.config.ts",
+    "lint:check": "eslint .",
+    "lint:fix": "eslint . --fix",
     "test": "vitest run",
     "dev": "vitest dev",
     "build": "tsdown"
   },
   "devDependencies": {
-    "@robonen/oxlint": "workspace:*",
+    "@robonen/eslint": "workspace:*",
     "@robonen/tsconfig": "workspace:*",
     "@robonen/tsdown": "workspace:*",
-    "oxlint": "catalog:",
-    "tsdown": "catalog:"
+    "eslint": "catalog:",
+    "tsdown": "catalog:",
+    "typescript": "^6.0.3"
   }
 }
diff --git a/core/stdlib/src/arrays/cluster/index.test.ts b/core/stdlib/src/arrays/cluster/index.test.ts
index c0a8648..891bb6f 100644
--- a/core/stdlib/src/arrays/cluster/index.test.ts
+++ b/core/stdlib/src/arrays/cluster/index.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { cluster } from '.';
 
 describe('cluster', () => {
@@ -34,7 +34,16 @@ describe('cluster', () => {
 
   it('return an empty array if the input array is empty', () => {
     const result = cluster([], 3);
-    
+
     expect(result).toEqual([]);
   });
-});
\ No newline at end of file
+
+  it('not mutate the input and produce copied sub-arrays', () => {
+    const input = [1, 2, 3, 4];
+    const result = cluster(input, 2);
+
+    result[0]!.push(99);
+
+    expect(input).toEqual([1, 2, 3, 4]);
+  });
+});
diff --git a/core/stdlib/src/arrays/cluster/index.ts b/core/stdlib/src/arrays/cluster/index.ts
index 8f045f6..35f377f 100644
--- a/core/stdlib/src/arrays/cluster/index.ts
+++ b/core/stdlib/src/arrays/cluster/index.ts
@@ -2,17 +2,17 @@
  * @name cluster
  * @category Arrays
  * @description Cluster an array into subarrays of a specific size
- * 
+ *
  * @param {Value[]} arr The array to cluster
  * @param {number} size The size of each cluster
  * @returns {Value[][]} The clustered array
- * 
+ *
  * @example
  * cluster([1, 2, 3, 4, 5, 6, 7, 8], 3) // => [[1, 2, 3], [4, 5, 6], [7, 8]]
- * 
+ *
  * @example
  * cluster([1, 2, 3, 4], -1) // => []
- * 
+ *
  * @since 0.0.3
  */
 export function cluster<Value>(arr: Value[], size: number): Value[][] {
diff --git a/core/stdlib/src/arrays/first/index.test.ts b/core/stdlib/src/arrays/first/index.test.ts
index 74a0062..26a5fbe 100644
--- a/core/stdlib/src/arrays/first/index.test.ts
+++ b/core/stdlib/src/arrays/first/index.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { first } from '.';
 
 describe('first', () => {
@@ -20,4 +20,11 @@ describe('first', () => {
     expect(first([1, 2, 3], 42)).toBe(1);
     expect(first(['a', 'b', 'c'], 'default')).toBe('a');
   });
-});
\ No newline at end of file
+
+  it('preserve a present null/undefined/falsy first element (not the default)', () => {
+    expect(first([null as number | null], 42)).toBeNull();
+    expect(first([undefined, 2], 42)).toBeUndefined();
+    expect(first([0], 99)).toBe(0);
+    expect(first([''], 'x')).toBe('');
+  });
+});
diff --git a/core/stdlib/src/arrays/first/index.ts b/core/stdlib/src/arrays/first/index.ts
index 720bb8a..97a5cf5 100644
--- a/core/stdlib/src/arrays/first/index.ts
+++ b/core/stdlib/src/arrays/first/index.ts
@@ -2,19 +2,20 @@
  * @name first
  * @category Arrays
  * @description Returns the first element of an array
- * 
+ *
  * @param {Value[]} arr The array to get the first element from
  * @param {Value} [defaultValue] The default value to return if the array is empty
  * @returns {Value | undefined} The first element of the array, or the default value if the array is empty
- * 
+ *
  * @example
  * first([1, 2, 3]); // => 1
- * 
+ *
  * @example
  * first([]); // => undefined
- * 
+ *
  * @since 0.0.3
  */
 export function first<Value>(arr: Value[], defaultValue?: Value) {
-    return arr[0] ?? defaultValue;
-}
\ No newline at end of file
+  // Branch on length, not nullishness, so a present null/undefined first element is preserved.
+  return arr.length > 0 ? arr[0]! : defaultValue;
+}
diff --git a/core/stdlib/src/arrays/groupBy/index.test-d.ts b/core/stdlib/src/arrays/groupBy/index.test-d.ts
new file mode 100644
index 0000000..62257fe
--- /dev/null
+++ b/core/stdlib/src/arrays/groupBy/index.test-d.ts
@@ -0,0 +1,16 @@
+import { describe, expectTypeOf, it } from 'vitest';
+import { groupBy } from '.';
+
+describe('groupBy', () => {
+  it('keys the record by the union returned by the key function', () => {
+    const result = groupBy([1, 2, 3], n => (n % 2 === 0 ? 'even' : 'odd'));
+
+    expectTypeOf(result).toEqualTypeOf<Record<'even' | 'odd', number[]>>();
+  });
+
+  it('preserves the element type in the grouped arrays', () => {
+    const result = groupBy([{ id: 1 }], item => item.id);
+
+    expectTypeOf(result).toEqualTypeOf<Record<number, Array<{ id: number }>>>();
+  });
+});
diff --git a/core/stdlib/src/arrays/groupBy/index.test.ts b/core/stdlib/src/arrays/groupBy/index.test.ts
new file mode 100644
index 0000000..84f4e47
--- /dev/null
+++ b/core/stdlib/src/arrays/groupBy/index.test.ts
@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest';
+import { groupBy } from '.';
+
+describe('groupBy', () => {
+  it('group by a string key', () => {
+    const result = groupBy([1, 2, 3, 4], n => (n % 2 === 0 ? 'even' : 'odd'));
+
+    expect(result).toEqual({ odd: [1, 3], even: [2, 4] });
+  });
+
+  it('group objects by a property', () => {
+    const input = [
+      { type: 'a', v: 1 },
+      { type: 'b', v: 2 },
+      { type: 'a', v: 3 },
+    ];
+
+    expect(groupBy(input, item => item.type)).toEqual({
+      a: [{ type: 'a', v: 1 }, { type: 'a', v: 3 }],
+      b: [{ type: 'b', v: 2 }],
+    });
+  });
+
+  it('pass the index to the key function', () => {
+    const result = groupBy(['a', 'b', 'c', 'd'], (_, i) => i % 2);
+
+    expect(result).toEqual({ 0: ['a', 'c'], 1: ['b', 'd'] });
+  });
+
+  it('return an empty object for an empty array', () => {
+    expect(groupBy([], () => 'x')).toEqual({});
+  });
+
+  it('push elements by reference (no cloning)', () => {
+    const item = { id: 1 };
+    const result = groupBy([item], x => x.id);
+
+    expect(result[1]![0]).toBe(item);
+  });
+
+  it('handle __proto__ and other Object.prototype keys as ordinary groups', () => {
+    const proto = groupBy(['a', 'b'], (): string => '__proto__');
+    expect(proto.__proto__).toEqual(['a', 'b']);
+
+    const ctor = groupBy(['x'], (): string => 'constructor');
+    expect(ctor.constructor).toEqual(['x']);
+  });
+});
diff --git a/core/stdlib/src/arrays/groupBy/index.ts b/core/stdlib/src/arrays/groupBy/index.ts
new file mode 100644
index 0000000..cd255f1
--- /dev/null
+++ b/core/stdlib/src/arrays/groupBy/index.ts
@@ -0,0 +1,36 @@
+/**
+ * @name groupBy
+ * @category Arrays
+ * @description Groups the elements of an array by the key returned by `getKey`
+ *
+ * @param {Value[]} array - The array to group
+ * @param {(item: Value, index: number) => Key} getKey - Maps an element to its group key
+ * @returns {Record<Key, Value[]>} An object of arrays, keyed by group
+ *
+ * @example
+ * groupBy([1, 2, 3, 4], n => (n % 2 === 0 ? 'even' : 'odd'))
+ * // => { odd: [1, 3], even: [2, 4] }
+ *
+ * @example
+ * groupBy([{ type: 'a', v: 1 }, { type: 'b', v: 2 }, { type: 'a', v: 3 }], item => item.type)
+ * // => { a: [{ type: 'a', v: 1 }, { type: 'a', v: 3 }], b: [{ type: 'b', v: 2 }] }
+ *
+ * @since 0.0.10
+ */
+export function groupBy<Value, Key extends PropertyKey>(
+  array: Value[],
+  getKey: (item: Value, index: number) => Key,
+): Record<Key, Value[]> {
+  // Null-prototype object so keys like '__proto__'/'constructor' become ordinary own keys
+  // instead of colliding with Object.prototype (which would throw on .push or pollute).
+  const result = Object.create(null) as Record<Key, Value[]>;
+
+  for (let i = 0; i < array.length; i++) {
+    const item = array[i]!;
+    const key = getKey(item, i);
+
+    (result[key] ??= []).push(item);
+  }
+
+  return result;
+}
diff --git a/core/stdlib/src/arrays/index.ts b/core/stdlib/src/arrays/index.ts
index cf02dc8..efe6439 100644
--- a/core/stdlib/src/arrays/index.ts
+++ b/core/stdlib/src/arrays/index.ts
@@ -1,5 +1,14 @@
 export * from './cluster';
 export * from './first';
+export * from './groupBy';
+export * from './insert';
 export * from './last';
+export * from './move';
+export * from './partition';
+export * from './range';
+export * from './remove';
 export * from './sum';
-export * from './unique';
\ No newline at end of file
+export * from './swap';
+export * from './toArray';
+export * from './unique';
+export * from './zip';
diff --git a/core/stdlib/src/arrays/insert/index.test.ts b/core/stdlib/src/arrays/insert/index.test.ts
new file mode 100644
index 0000000..e4fe048
--- /dev/null
+++ b/core/stdlib/src/arrays/insert/index.test.ts
@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest';
+import { insert } from '.';
+
+describe('insert', () => {
+  it('insert a single item', () => {
+    expect(insert(['a', 'c'], 1, 'b')).toEqual(['a', 'b', 'c']);
+  });
+
+  it('insert multiple items', () => {
+    expect(insert(['a', 'd'], 1, 'b', 'c')).toEqual(['a', 'b', 'c', 'd']);
+  });
+
+  it('prepend at index 0', () => {
+    expect(insert(['b', 'c'], 0, 'a')).toEqual(['a', 'b', 'c']);
+  });
+
+  it('append when the index is too large', () => {
+    expect(insert(['a'], 99, 'b', 'c')).toEqual(['a', 'b', 'c']);
+  });
+
+  it('clamp a negative index to 0', () => {
+    expect(insert(['b'], -5, 'a')).toEqual(['a', 'b']);
+  });
+
+  it('never mutate the source', () => {
+    const source = ['a', 'b'];
+    insert(source, 1, 'x');
+    expect(source).toEqual(['a', 'b']);
+  });
+});
diff --git a/core/stdlib/src/arrays/insert/index.ts b/core/stdlib/src/arrays/insert/index.ts
new file mode 100644
index 0000000..2f98fb8
--- /dev/null
+++ b/core/stdlib/src/arrays/insert/index.ts
@@ -0,0 +1,24 @@
+/**
+ * @name insert
+ * @category Arrays
+ * @description Return a new array with `items` inserted at `index`. The index is
+ * clamped into `[0, length]`, so a too-large index appends. Never mutates.
+ *
+ * @param {readonly T[]} array - The source array
+ * @param {number} index - Position to insert at
+ * @param {...T} items - Items to insert
+ * @returns {T[]} A new array with the items inserted
+ *
+ * @example
+ * insert(['a', 'c'], 1, 'b'); // ['a', 'b', 'c']
+ * insert(['a'], 99, 'b', 'c'); // ['a', 'b', 'c']
+ *
+ * @since 0.0.10
+ */
+export function insert<T>(array: readonly T[], index: number, ...items: T[]): T[] {
+  const result = array.slice();
+  const target = Math.max(0, Math.min(index, result.length));
+  result.splice(target, 0, ...items);
+
+  return result;
+}
diff --git a/core/stdlib/src/arrays/last/index.test.ts b/core/stdlib/src/arrays/last/index.test.ts
index 9f9ce60..7aadf7c 100644
--- a/core/stdlib/src/arrays/last/index.test.ts
+++ b/core/stdlib/src/arrays/last/index.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { last } from '.';
 
 describe('last', () => {
@@ -20,4 +20,10 @@ describe('last', () => {
     expect(last([1, 2, 3], 42)).toBe(3);
     expect(last(['a', 'b', 'c'], 'default')).toBe('c');
   });
-});
\ No newline at end of file
+
+  it('preserve a present null/undefined/falsy last element (not the default)', () => {
+    expect(last([1, null as number | null], 42)).toBeNull();
+    expect(last([1, undefined], 42)).toBeUndefined();
+    expect(last([0], 99)).toBe(0);
+  });
+});
diff --git a/core/stdlib/src/arrays/last/index.ts b/core/stdlib/src/arrays/last/index.ts
index 4661aaf..d7cb332 100644
--- a/core/stdlib/src/arrays/last/index.ts
+++ b/core/stdlib/src/arrays/last/index.ts
@@ -2,19 +2,20 @@
  * @name last
  * @section Arrays
  * @description Gets the last element of an array
- * 
+ *
  * @param {Value[]} arr The array to get the last element of
  * @param {Value} [defaultValue] The default value to return if the array is empty
  * @returns {Value | undefined} The last element of the array, or the default value if the array is empty
- * 
+ *
  * @example
  * last([1, 2, 3, 4, 5]); // => 5
- * 
+ *
  * @example
  * last([], 3); // => 3
- * 
+ *
  * @since 0.0.3
  */
 export function last<Value>(arr: Value[], defaultValue?: Value) {
-  return arr[arr.length - 1] ?? defaultValue;
+  // Branch on length, not nullishness, so a present null/undefined last element is preserved.
+  return arr.length > 0 ? arr[arr.length - 1]! : defaultValue;
 }
diff --git a/core/stdlib/src/arrays/move/index.test.ts b/core/stdlib/src/arrays/move/index.test.ts
new file mode 100644
index 0000000..fff3d83
--- /dev/null
+++ b/core/stdlib/src/arrays/move/index.test.ts
@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'vitest';
+import { move } from '.';
+
+describe('move', () => {
+  it('move an item forward', () => {
+    expect(move(['a', 'b', 'c'], 0, 2)).toEqual(['b', 'c', 'a']);
+  });
+
+  it('move an item backward', () => {
+    expect(move(['a', 'b', 'c'], 2, 0)).toEqual(['c', 'a', 'b']);
+  });
+
+  it('clamp the target index', () => {
+    expect(move(['a', 'b', 'c'], 0, 99)).toEqual(['b', 'c', 'a']);
+  });
+
+  it('return a copy unchanged for an out-of-range source', () => {
+    const source = ['a', 'b'];
+    const result = move(source, 5, 0);
+    expect(result).toEqual(['a', 'b']);
+    expect(result).not.toBe(source);
+  });
+
+  it('never mutate the source', () => {
+    const source = ['a', 'b', 'c'];
+    move(source, 0, 2);
+    expect(source).toEqual(['a', 'b', 'c']);
+  });
+});
diff --git a/core/stdlib/src/arrays/move/index.ts b/core/stdlib/src/arrays/move/index.ts
new file mode 100644
index 0000000..189cdf8
--- /dev/null
+++ b/core/stdlib/src/arrays/move/index.ts
@@ -0,0 +1,28 @@
+/**
+ * @name move
+ * @category Arrays
+ * @description Return a new array with the item at `from` moved to `to`. Out-of-range
+ * `from` returns a shallow copy unchanged; `to` is clamped into range. Never mutates.
+ *
+ * @param {readonly T[]} array - The source array
+ * @param {number} from - Index to move from
+ * @param {number} to - Index to move to
+ * @returns {T[]} A new array with the item moved
+ *
+ * @example
+ * move(['a', 'b', 'c'], 0, 2); // ['b', 'c', 'a']
+ *
+ * @since 0.0.10
+ */
+export function move<T>(array: readonly T[], from: number, to: number): T[] {
+  const result = array.slice();
+
+  if (from < 0 || from >= result.length)
+    return result;
+
+  const item = result.splice(from, 1)[0] as T;
+  const target = Math.max(0, Math.min(to, result.length));
+  result.splice(target, 0, item);
+
+  return result;
+}
diff --git a/core/stdlib/src/arrays/partition/index.test-d.ts b/core/stdlib/src/arrays/partition/index.test-d.ts
new file mode 100644
index 0000000..669ac66
--- /dev/null
+++ b/core/stdlib/src/arrays/partition/index.test-d.ts
@@ -0,0 +1,17 @@
+import { describe, expectTypeOf, it } from 'vitest';
+import { partition } from '.';
+
+describe('partition', () => {
+  it('returns a tuple of two arrays of the element type', () => {
+    const result = partition([1, 2, 3], n => n > 1);
+
+    expectTypeOf(result).toEqualTypeOf<[number[], number[]]>();
+  });
+
+  it('narrows both partitions with a type guard', () => {
+    const mixed: Array<string | number> = ['a', 1];
+    const result = partition(mixed, (v): v is string => typeof v === 'string');
+
+    expectTypeOf(result).toEqualTypeOf<[string[], number[]]>();
+  });
+});
diff --git a/core/stdlib/src/arrays/partition/index.test.ts b/core/stdlib/src/arrays/partition/index.test.ts
new file mode 100644
index 0000000..adb4113
--- /dev/null
+++ b/core/stdlib/src/arrays/partition/index.test.ts
@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'vitest';
+import { partition } from '.';
+
+describe('partition', () => {
+  it('split by a predicate into [matching, rest]', () => {
+    expect(partition([1, 2, 3, 4], n => n % 2 === 0)).toEqual([[2, 4], [1, 3]]);
+  });
+
+  it('preserve order within each partition', () => {
+    expect(partition([5, 1, 4, 2, 3], n => n > 2)).toEqual([[5, 4, 3], [1, 2]]);
+  });
+
+  it('pass the index to the predicate', () => {
+    expect(partition(['a', 'b', 'c', 'd'], (_, i) => i < 2)).toEqual([['a', 'b'], ['c', 'd']]);
+  });
+
+  it('handle all-matching and none-matching', () => {
+    expect(partition([1, 2, 3], () => true)).toEqual([[1, 2, 3], []]);
+    expect(partition([1, 2, 3], () => false)).toEqual([[], [1, 2, 3]]);
+  });
+
+  it('work with a type guard', () => {
+    const mixed: Array<string | number> = ['a', 1, 'b', 2];
+    const [strings, numbers] = partition(mixed, (v): v is string => typeof v === 'string');
+
+    expect(strings).toEqual(['a', 'b']);
+    expect(numbers).toEqual([1, 2]);
+  });
+});
diff --git a/core/stdlib/src/arrays/partition/index.ts b/core/stdlib/src/arrays/partition/index.ts
new file mode 100644
index 0000000..3912462
--- /dev/null
+++ b/core/stdlib/src/arrays/partition/index.ts
@@ -0,0 +1,43 @@
+/**
+ * @name partition
+ * @category Arrays
+ * @description Splits an array into two: elements that satisfy the predicate and those that do not
+ *
+ * @param {Value[]} array - The array to split
+ * @param {(item: Value, index: number) => boolean} predicate - Decides which partition an element belongs to
+ * @returns {[Value[], Value[]]} A tuple of `[matching, rest]`
+ *
+ * @example
+ * partition([1, 2, 3, 4], n => n % 2 === 0) // => [[2, 4], [1, 3]]
+ *
+ * @example
+ * const [strings, others] = partition(mixed, (v): v is string => typeof v === 'string');
+ *
+ * @since 0.0.10
+ */
+export function partition<Value, Matched extends Value>(
+  array: Value[],
+  predicate: (item: Value, index: number) => item is Matched,
+): [Matched[], Array<Exclude<Value, Matched>>];
+export function partition<Value>(
+  array: Value[],
+  predicate: (item: Value, index: number) => boolean,
+): [Value[], Value[]];
+export function partition<Value>(
+  array: Value[],
+  predicate: (item: Value, index: number) => boolean,
+): [Value[], Value[]] {
+  const matched: Value[] = [];
+  const rest: Value[] = [];
+
+  for (let i = 0; i < array.length; i++) {
+    const item = array[i]!;
+
+    if (predicate(item, i))
+      matched.push(item);
+    else
+      rest.push(item);
+  }
+
+  return [matched, rest];
+}
diff --git a/core/stdlib/src/arrays/range/index.test.ts b/core/stdlib/src/arrays/range/index.test.ts
new file mode 100644
index 0000000..eea1591
--- /dev/null
+++ b/core/stdlib/src/arrays/range/index.test.ts
@@ -0,0 +1,47 @@
+import { describe, expect, it } from 'vitest';
+import { range } from '.';
+
+describe('range', () => {
+  it('generate 0..stop with a single argument', () => {
+    expect(range(4)).toEqual([0, 1, 2, 3]);
+  });
+
+  it('generate start..stop', () => {
+    expect(range(1, 5)).toEqual([1, 2, 3, 4]);
+  });
+
+  it('respect a positive step', () => {
+    expect(range(0, 10, 2)).toEqual([0, 2, 4, 6, 8]);
+  });
+
+  it('support a negative step', () => {
+    expect(range(5, 0, -1)).toEqual([5, 4, 3, 2, 1]);
+  });
+
+  it('return an empty array for an empty range', () => {
+    expect(range(0)).toEqual([]);
+    expect(range(5, 5)).toEqual([]);
+    expect(range(0, 5, -1)).toEqual([]);
+  });
+
+  it('return an empty array for a zero step', () => {
+    expect(range(0, 5, 0)).toEqual([]);
+  });
+
+  it('handle non-integer steps', () => {
+    expect(range(0, 1, 0.25)).toEqual([0, 0.25, 0.5, 0.75]);
+  });
+
+  it('span zero with a negative start', () => {
+    expect(range(-2, 3)).toEqual([-2, -1, 0, 1, 2]);
+    expect(range(-3, 3, 2)).toEqual([-3, -1, 1]);
+  });
+
+  it('handle a non-integer step that is not exactly representable', () => {
+    const result = range(0, 1, 0.1);
+
+    expect(result).toHaveLength(10);
+    expect(result[0]).toBe(0);
+    expect(result.at(-1)).toBeCloseTo(0.9, 10);
+  });
+});
diff --git a/core/stdlib/src/arrays/range/index.ts b/core/stdlib/src/arrays/range/index.ts
new file mode 100644
index 0000000..532aab3
--- /dev/null
+++ b/core/stdlib/src/arrays/range/index.ts
@@ -0,0 +1,41 @@
+/**
+ * @name range
+ * @category Arrays
+ * @description Generates an array of numbers from `start` (inclusive) to `stop` (exclusive)
+ *
+ * @param {number} startOrStop - The start of the range, or the stop when called with one argument
+ * @param {number} [stop] - The end of the range (exclusive)
+ * @param {number} [step] - The increment between values; supports negative steps. Default `1`
+ * @returns {number[]} The generated range
+ *
+ * @example
+ * range(4) // => [0, 1, 2, 3]
+ *
+ * @example
+ * range(1, 5) // => [1, 2, 3, 4]
+ *
+ * @example
+ * range(0, 10, 2) // => [0, 2, 4, 6, 8]
+ *
+ * @example
+ * range(5, 0, -1) // => [5, 4, 3, 2, 1]
+ *
+ * @since 0.0.10
+ */
+export function range(stop: number): number[];
+export function range(start: number, stop: number, step?: number): number[];
+export function range(startOrStop: number, stop?: number, step = 1): number[] {
+  let start = startOrStop;
+
+  if (stop === undefined) {
+    start = 0;
+    stop = startOrStop;
+  }
+
+  if (step === 0)
+    return [];
+
+  const length = Math.max(Math.ceil((stop - start) / step), 0);
+
+  return Array.from({ length }, (_, i) => start + i * step);
+}
diff --git a/core/stdlib/src/arrays/remove/index.test.ts b/core/stdlib/src/arrays/remove/index.test.ts
new file mode 100644
index 0000000..4fa4b5e
--- /dev/null
+++ b/core/stdlib/src/arrays/remove/index.test.ts
@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest';
+import { remove } from '.';
+
+describe('remove', () => {
+  it('remove an item by index', () => {
+    expect(remove(['a', 'b', 'c'], 1)).toEqual(['a', 'c']);
+  });
+
+  it('remove the first and last items', () => {
+    expect(remove(['a', 'b', 'c'], 0)).toEqual(['b', 'c']);
+    expect(remove(['a', 'b', 'c'], 2)).toEqual(['a', 'b']);
+  });
+
+  it('return a copy unchanged for an out-of-range index', () => {
+    const source = ['a', 'b'];
+    const result = remove(source, 9);
+    expect(result).toEqual(['a', 'b']);
+    expect(result).not.toBe(source);
+  });
+
+  it('never mutate the source', () => {
+    const source = ['a', 'b', 'c'];
+    remove(source, 1);
+    expect(source).toEqual(['a', 'b', 'c']);
+  });
+});
diff --git a/core/stdlib/src/arrays/remove/index.ts b/core/stdlib/src/arrays/remove/index.ts
new file mode 100644
index 0000000..0aba8c0
--- /dev/null
+++ b/core/stdlib/src/arrays/remove/index.ts
@@ -0,0 +1,25 @@
+/**
+ * @name remove
+ * @category Arrays
+ * @description Return a new array with the item at `index` removed. Returns a shallow
+ * copy unchanged when the index is out of range. Never mutates.
+ *
+ * @param {readonly T[]} array - The source array
+ * @param {number} index - Index of the item to remove
+ * @returns {T[]} A new array without the removed item
+ *
+ * @example
+ * remove(['a', 'b', 'c'], 1); // ['a', 'c']
+ *
+ * @since 0.0.10
+ */
+export function remove<T>(array: readonly T[], index: number): T[] {
+  const result = array.slice();
+
+  if (index < 0 || index >= result.length)
+    return result;
+
+  result.splice(index, 1);
+
+  return result;
+}
diff --git a/core/stdlib/src/arrays/sum/index.test.ts b/core/stdlib/src/arrays/sum/index.test.ts
index 6785353..230a5ac 100644
--- a/core/stdlib/src/arrays/sum/index.test.ts
+++ b/core/stdlib/src/arrays/sum/index.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { sum } from '.';
 
 describe('sum', () => {
@@ -15,7 +15,7 @@ describe('sum', () => {
   });
 
   it('return the sum of all elements using a getValue function', () => {
-    const result = sum([{ value: 1 }, { value: 2 }, { value: 3 }], (item) => item.value);
+    const result = sum([{ value: 1 }, { value: 2 }, { value: 3 }], item => item.value);
 
     expect(result).toBe(6);
   });
@@ -39,8 +39,8 @@ describe('sum', () => {
   });
 
   it('handle arrays with a getValue function returning floating point numbers', () => {
-    const result = sum([{ value: 1.5 }, { value: 2.5 }, { value: 3.5 }], (item) => item.value);
-    
+    const result = sum([{ value: 1.5 }, { value: 2.5 }, { value: 3.5 }], item => item.value);
+
     expect(result).toBe(7.5);
   });
-});
\ No newline at end of file
+});
diff --git a/core/stdlib/src/arrays/sum/index.ts b/core/stdlib/src/arrays/sum/index.ts
index 4a82850..427e979 100644
--- a/core/stdlib/src/arrays/sum/index.ts
+++ b/core/stdlib/src/arrays/sum/index.ts
@@ -2,16 +2,16 @@
  * @name sum
  * @category Arrays
  * @description Returns the sum of all the elements in an array
- * 
+ *
  * @param {Value[]} array - The array to sum
  * @param {(item: Value) => number} [getValue] - A function that returns the value to sum from each element in the array
  * @returns {number} The sum of all the elements in the array
- * 
+ *
  * @example
  * sum([1, 2, 3, 4, 5]) // => 15
- * 
+ *
  * sum([{ value: 1 }, { value: 2 }, { value: 3 }], (item) => item.value) // => 6
- * 
+ *
  * @since 0.0.3
  */
 export function sum<Value extends number>(array: Value[]): number;
diff --git a/core/stdlib/src/arrays/swap/index.test.ts b/core/stdlib/src/arrays/swap/index.test.ts
new file mode 100644
index 0000000..798a16f
--- /dev/null
+++ b/core/stdlib/src/arrays/swap/index.test.ts
@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest';
+import { swap } from '.';
+
+describe('swap', () => {
+  it('swap two items', () => {
+    expect(swap(['a', 'b', 'c'], 0, 2)).toEqual(['c', 'b', 'a']);
+  });
+
+  it('return a copy unchanged when indices are equal', () => {
+    const source = ['a', 'b'];
+    const result = swap(source, 1, 1);
+    expect(result).toEqual(['a', 'b']);
+    expect(result).not.toBe(source);
+  });
+
+  it('return a copy unchanged for out-of-range indices', () => {
+    expect(swap(['a', 'b'], 0, 9)).toEqual(['a', 'b']);
+    expect(swap(['a', 'b'], -1, 1)).toEqual(['a', 'b']);
+  });
+
+  it('never mutate the source', () => {
+    const source = ['a', 'b', 'c'];
+    swap(source, 0, 2);
+    expect(source).toEqual(['a', 'b', 'c']);
+  });
+});
diff --git a/core/stdlib/src/arrays/swap/index.ts b/core/stdlib/src/arrays/swap/index.ts
new file mode 100644
index 0000000..7fc4074
--- /dev/null
+++ b/core/stdlib/src/arrays/swap/index.ts
@@ -0,0 +1,29 @@
+/**
+ * @name swap
+ * @category Arrays
+ * @description Return a new array with the items at indices `a` and `b` swapped.
+ * Returns a shallow copy unchanged when either index is out of range or equal.
+ * Never mutates.
+ *
+ * @param {readonly T[]} array - The source array
+ * @param {number} a - First index
+ * @param {number} b - Second index
+ * @returns {T[]} A new array with the two items swapped
+ *
+ * @example
+ * swap(['a', 'b', 'c'], 0, 2); // ['c', 'b', 'a']
+ *
+ * @since 0.0.10
+ */
+export function swap<T>(array: readonly T[], a: number, b: number): T[] {
+  const result = array.slice();
+
+  if (a < 0 || b < 0 || a >= result.length || b >= result.length || a === b)
+    return result;
+
+  const temp = result[a] as T;
+  result[a] = result[b] as T;
+  result[b] = temp;
+
+  return result;
+}
diff --git a/core/stdlib/src/arrays/toArray/index.test-d.ts b/core/stdlib/src/arrays/toArray/index.test-d.ts
new file mode 100644
index 0000000..950edff
--- /dev/null
+++ b/core/stdlib/src/arrays/toArray/index.test-d.ts
@@ -0,0 +1,17 @@
+import { describe, expectTypeOf, it } from 'vitest';
+import { toArray } from '.';
+
+describe('toArray', () => {
+  it('wraps a single value into an array of that type', () => {
+    expectTypeOf(toArray(1)).toEqualTypeOf<number[]>();
+  });
+
+  it('returns an array input as the same element type', () => {
+    expectTypeOf(toArray([1, 2, 3])).toEqualTypeOf<number[]>();
+  });
+
+  it('returns the element array type for a nullish input', () => {
+    expectTypeOf(toArray<string>(undefined)).toEqualTypeOf<string[]>();
+    expectTypeOf(toArray<number>(null)).toEqualTypeOf<number[]>();
+  });
+});
diff --git a/core/stdlib/src/arrays/toArray/index.test.ts b/core/stdlib/src/arrays/toArray/index.test.ts
new file mode 100644
index 0000000..069f53f
--- /dev/null
+++ b/core/stdlib/src/arrays/toArray/index.test.ts
@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest';
+import { toArray } from '.';
+
+describe('toArray', () => {
+  it('wrap a single value into an array', () => {
+    expect(toArray(1)).toEqual([1]);
+    expect(toArray('a')).toEqual(['a']);
+    expect(toArray(false)).toEqual([false]);
+    expect(toArray(0)).toEqual([0]);
+  });
+
+  it('return arrays as-is (same reference, no copy)', () => {
+    const arr = [1, 2, 3];
+    expect(toArray(arr)).toBe(arr);
+  });
+
+  it('treat null and undefined as empty', () => {
+    expect(toArray(undefined)).toEqual([]);
+    expect(toArray(null)).toEqual([]);
+  });
+
+  it('preserve empty arrays', () => {
+    const empty: number[] = [];
+    expect(toArray(empty)).toBe(empty);
+  });
+});
diff --git a/core/stdlib/src/arrays/toArray/index.ts b/core/stdlib/src/arrays/toArray/index.ts
new file mode 100644
index 0000000..bf223c0
--- /dev/null
+++ b/core/stdlib/src/arrays/toArray/index.ts
@@ -0,0 +1,25 @@
+import type { Arrayable } from '../../types';
+
+/**
+ * @name toArray
+ * @category Arrays
+ * @description Normalize an `Arrayable<T>` value into an array. `undefined` and `null` become an empty array; a single value is wrapped; arrays are returned as-is (no copy).
+ *
+ * @param {Arrayable<Value> | null | undefined} value The value to normalize
+ * @returns {Value[]} The value as an array
+ *
+ * @example
+ * toArray(1) // => [1]
+ *
+ * @example
+ * toArray([1, 2]) // => [1, 2]
+ *
+ * @example
+ * toArray(undefined) // => []
+ *
+ * @since 0.0.10
+ */
+export function toArray<Value>(value: Arrayable<Value> | null | undefined): Value[] {
+  if (value === null || value === undefined) return [];
+  return Array.isArray(value) ? value : [value];
+}
diff --git a/core/stdlib/src/arrays/unique/index.test.ts b/core/stdlib/src/arrays/unique/index.test.ts
index bb4e30a..656a39b 100644
--- a/core/stdlib/src/arrays/unique/index.test.ts
+++ b/core/stdlib/src/arrays/unique/index.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { unique } from '.';
 
 describe('unique', () => {
@@ -11,7 +11,7 @@ describe('unique', () => {
   it('return an array with unique objects based on id', () => {
     const result = unique(
       [{ id: 1 }, { id: 2 }, { id: 1 }],
-      (item) => item.id,
+      item => item.id,
     );
 
     expect(result).toEqual([{ id: 1 }, { id: 2 }]);
@@ -33,7 +33,7 @@ describe('unique', () => {
     const sym1 = Symbol('a');
     const sym2 = Symbol('b');
     const result = unique([sym1, sym2, sym1]);
-    
+
     expect(result).toEqual([sym1, sym2]);
   });
 
@@ -42,4 +42,28 @@ describe('unique', () => {
 
     expect(result).toEqual([]);
   });
-});
\ No newline at end of file
+
+  it('keep the last value per extracted key (last-write-wins, first-seen order)', () => {
+    const result = unique(
+      [{ id: 1, v: 'a' }, { id: 2, v: 'b' }, { id: 1, v: 'c' }],
+      item => item.id,
+    );
+
+    expect(result).toEqual([{ id: 1, v: 'c' }, { id: 2, v: 'b' }]);
+  });
+
+  it('return a new array and not mutate the input', () => {
+    const input = [1, 2, 2, 3];
+    const result = unique(input);
+
+    expect(result).not.toBe(input);
+    expect(input).toEqual([1, 2, 2, 3]);
+  });
+
+  it('preserve element identity for object values', () => {
+    const a = { id: 1 };
+    const result = unique([a], item => item.id);
+
+    expect(result[0]).toBe(a);
+  });
+});
diff --git a/core/stdlib/src/arrays/unique/index.ts b/core/stdlib/src/arrays/unique/index.ts
index 6175c1d..a490b96 100644
--- a/core/stdlib/src/arrays/unique/index.ts
+++ b/core/stdlib/src/arrays/unique/index.ts
@@ -5,29 +5,32 @@ export type Extractor<Value, Key extends UniqueKey> = (value: Value) => Key;
  * @name unique
  * @category Arrays
  * @description Returns a new array with unique values from the original array
- * 
+ *
  * @param {Value[]} array - The array to filter
  * @param {Function} [extractor] - The function to extract the value to compare
  * @returns {Value[]} - The new array with unique values
- * 
+ *
  * @example
  * unique([1, 2, 3, 3, 4, 5, 5, 6]) //=> [1, 2, 3, 4, 5, 6]
- * 
+ *
  * @example
- * unique([{ id: 1 }, { id: 2 }, { id: 1 }], (a, b) => a.id === b.id) //=> [{ id: 1 }, { id: 2 }]
- * 
+ * unique([{ id: 1 }, { id: 2 }, { id: 1 }], value => value.id) //=> [{ id: 1 }, { id: 2 }]
+ *
  * @since 0.0.3
  */
 export function unique<Value, Key extends UniqueKey>(
   array: Value[],
   extractor?: Extractor<Value, Key>,
-) {
+): Value[] {
+  // Fast path: a plain Set is leaner than a Map storing each value as both key and value.
+  if (!extractor)
+    return [...new Set(array)];
+
+  // Last-write-wins per extracted key, preserving first-seen insertion order.
   const values = new Map<Key, Value>();
 
-  for (const value of array) {
-    const key = extractor ? extractor(value) : value as any;
-    values.set(key, value);
-  }
+  for (const value of array)
+    values.set(extractor(value), value);
 
-  return Array.from(values.values());
+  return [...values.values()];
 }
diff --git a/core/stdlib/src/arrays/zip/index.test-d.ts b/core/stdlib/src/arrays/zip/index.test-d.ts
new file mode 100644
index 0000000..850e4ae
--- /dev/null
+++ b/core/stdlib/src/arrays/zip/index.test-d.ts
@@ -0,0 +1,27 @@
+import { describe, expectTypeOf, it } from 'vitest';
+import { zip } from '.';
+
+describe('zip', () => {
+  it('produces tuples of the element types (two arrays)', () => {
+    const result = zip([1, 2], ['a', 'b']);
+
+    expectTypeOf(result).toEqualTypeOf<Array<[number, string]>>();
+  });
+
+  it('produces tuples of the element types (three arrays)', () => {
+    const result = zip([1], ['a'], [true]);
+
+    expectTypeOf(result).toEqualTypeOf<Array<[number, string, boolean]>>();
+  });
+
+  it('zips a single array into singleton tuples', () => {
+    const result = zip([1, 2, 3]);
+
+    expectTypeOf(result).toEqualTypeOf<Array<[number]>>();
+  });
+
+  it('produces tuples for four and five arrays', () => {
+    expectTypeOf(zip([1], ['a'], [true], [9])).toEqualTypeOf<Array<[number, string, boolean, number]>>();
+    expectTypeOf(zip([1], ['a'], [true], [9], ['x'])).toEqualTypeOf<Array<[number, string, boolean, number, string]>>();
+  });
+});
diff --git a/core/stdlib/src/arrays/zip/index.test.ts b/core/stdlib/src/arrays/zip/index.test.ts
new file mode 100644
index 0000000..a2b4a4f
--- /dev/null
+++ b/core/stdlib/src/arrays/zip/index.test.ts
@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'vitest';
+import { zip } from '.';
+
+describe('zip', () => {
+  it('zip two arrays of equal length', () => {
+    expect(zip([1, 2, 3], ['a', 'b', 'c'])).toEqual([[1, 'a'], [2, 'b'], [3, 'c']]);
+  });
+
+  it('zip three arrays', () => {
+    expect(zip([1, 2], ['a', 'b'], [true, false])).toEqual([[1, 'a', true], [2, 'b', false]]);
+  });
+
+  it('truncate to the shortest array', () => {
+    expect(zip([1, 2, 3], ['a'])).toEqual([[1, 'a']]);
+    expect(zip([1], ['a', 'b', 'c'])).toEqual([[1, 'a']]);
+  });
+
+  it('zip a single array into singletons', () => {
+    expect(zip([1, 2, 3])).toEqual([[1], [2], [3]]);
+  });
+
+  it('return an empty array when an input is empty', () => {
+    expect(zip([1, 2, 3], [])).toEqual([]);
+  });
+
+  it('return an empty array with no arguments', () => {
+    expect((zip as () => unknown[])()).toEqual([]);
+  });
+
+  it('zip four and five arrays', () => {
+    expect(zip([1], ['a'], [true], [9])).toEqual([[1, 'a', true, 9]]);
+    expect(zip([1, 2], ['a', 'b'], [true, false], [9, 8], ['x', 'y']))
+      .toEqual([[1, 'a', true, 9, 'x'], [2, 'b', false, 8, 'y']]);
+  });
+});
diff --git a/core/stdlib/src/arrays/zip/index.ts b/core/stdlib/src/arrays/zip/index.ts
new file mode 100644
index 0000000..82abc8f
--- /dev/null
+++ b/core/stdlib/src/arrays/zip/index.ts
@@ -0,0 +1,35 @@
+/**
+ * @name zip
+ * @category Arrays
+ * @description Combines several arrays into an array of tuples, stopping at the shortest input
+ *
+ * @param {...Array} arrays - The arrays to zip together
+ * @returns {Array} An array of tuples; its length equals the shortest input array
+ *
+ * @example
+ * zip([1, 2, 3], ['a', 'b', 'c']) // => [[1, 'a'], [2, 'b'], [3, 'c']]
+ *
+ * @example
+ * zip([1, 2], ['a', 'b'], [true, false]) // => [[1, 'a', true], [2, 'b', false]]
+ *
+ * @example
+ * zip([1, 2, 3], ['a']) // => [[1, 'a']] (truncated to the shortest)
+ *
+ * @since 0.0.10
+ */
+export function zip<A>(a: A[]): Array<[A]>;
+export function zip<A, B>(a: A[], b: B[]): Array<[A, B]>;
+export function zip<A, B, C>(a: A[], b: B[], c: C[]): Array<[A, B, C]>;
+export function zip<A, B, C, D>(a: A[], b: B[], c: C[], d: D[]): Array<[A, B, C, D]>;
+export function zip<A, B, C, D, E>(a: A[], b: B[], c: C[], d: D[], e: E[]): Array<[A, B, C, D, E]>;
+export function zip(...arrays: any[][]): any[][] {
+  if (arrays.length === 0)
+    return [];
+
+  let length = arrays[0]!.length;
+
+  for (let i = 1; i < arrays.length; i++)
+    length = Math.min(length, arrays[i]!.length);
+
+  return Array.from({ length }, (_, i) => arrays.map(array => array[i]));
+}
diff --git a/core/stdlib/src/async/index.ts b/core/stdlib/src/async/index.ts
index d4e70f3..5641f3b 100644
--- a/core/stdlib/src/async/index.ts
+++ b/core/stdlib/src/async/index.ts
@@ -1,3 +1,4 @@
+export * from './pool';
 export * from './retry';
 export * from './sleep';
 export * from './tryIt';
diff --git a/core/stdlib/src/async/pool/index.test.ts b/core/stdlib/src/async/pool/index.test.ts
new file mode 100644
index 0000000..3d68795
--- /dev/null
+++ b/core/stdlib/src/async/pool/index.test.ts
@@ -0,0 +1,438 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { AsyncPool } from '.';
+
+describe('AsyncPool', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  // ── Constructor / getters ────────────────────────────────────────────────
+
+  describe('constructor', () => {
+    it('default concurrency is Infinity', () => {
+      expect(new AsyncPool().concurrency).toBe(Infinity);
+    });
+
+    it('respects explicit concurrency', () => {
+      expect(new AsyncPool({ concurrency: 4 }).concurrency).toBe(4);
+    });
+
+    it('truncates float to integer', () => {
+      expect(new AsyncPool({ concurrency: 3.9 }).concurrency).toBe(3);
+    });
+
+    it('Infinity concurrency is preserved (not coerced to 0)', () => {
+      expect(new AsyncPool({ concurrency: Infinity }).concurrency).toBe(Infinity);
+    });
+
+    it('invalid values fall back to Infinity', () => {
+      expect(new AsyncPool({ concurrency: 0 }).concurrency).toBe(Infinity);
+      expect(new AsyncPool({ concurrency: -1 }).concurrency).toBe(Infinity);
+    });
+
+    it('initial size and active are 0', () => {
+      const pool = new AsyncPool({ concurrency: 2 });
+      expect(pool.size).toBe(0);
+      expect(pool.active).toBe(0);
+    });
+  });
+
+  // ── add() — basic execution ──────────────────────────────────────────────
+
+  describe('add()', () => {
+    it('starts task immediately when under limit', () => {
+      const pool = new AsyncPool({ concurrency: 2 });
+      const fn = vi.fn().mockResolvedValue('ok');
+      pool.add(fn);
+      expect(fn).toHaveBeenCalledTimes(1);
+      expect(pool.active).toBe(1);
+    });
+
+    it('passes the pool signal to the task', () => {
+      const pool = new AsyncPool({ concurrency: 1 });
+      let receivedSignal: AbortSignal | undefined;
+      pool.add((signal) => {
+        receivedSignal = signal;
+        return Promise.resolve();
+      });
+      expect(receivedSignal).toBeInstanceOf(AbortSignal);
+    });
+
+    it('returns the task result', async () => {
+      const pool = new AsyncPool({ concurrency: 1 });
+      const result = await pool.add(() => Promise.resolve(42));
+      expect(result).toBe(42);
+    });
+
+    it('propagates task rejection', async () => {
+      const pool = new AsyncPool({ concurrency: 1 });
+      const error = new Error('boom');
+      await expect(pool.add(() => Promise.reject(error))).rejects.toThrow('boom');
+    });
+  });
+
+  // ── Concurrency limiting ─────────────────────────────────────────────────
+
+  describe('concurrency limiting', () => {
+    it('does not exceed the concurrency limit', () => {
+      const pool = new AsyncPool({ concurrency: 2 });
+      const fn = vi.fn(() => new Promise<void>(() => {}));
+      pool.add(fn);
+      pool.add(fn);
+      pool.add(fn); // queued
+      expect(fn).toHaveBeenCalledTimes(2);
+      expect(pool.active).toBe(2);
+      expect(pool.size).toBe(1);
+    });
+
+    it('dequeues task when an active one completes', async () => {
+      const pool = new AsyncPool({ concurrency: 1 });
+      let resolve1!: () => void;
+      const task1 = vi.fn(() => new Promise<void>(r => (resolve1 = r)));
+      const task2 = vi.fn(() => Promise.resolve());
+      pool.add(task1);
+      pool.add(task2);
+      expect(task2).toHaveBeenCalledTimes(0);
+      resolve1();
+      await Promise.resolve();
+      await Promise.resolve(); // two microtask ticks for then handlers
+      expect(task2).toHaveBeenCalledTimes(1);
+    });
+
+    it('runs tasks in FIFO order', async () => {
+      const pool = new AsyncPool({ concurrency: 1 });
+      const order: number[] = [];
+      let unblock!: () => void;
+      pool.add(() => new Promise<void>(r => (unblock = r)));
+      pool.add(async () => {
+        order.push(1);
+      });
+      pool.add(async () => {
+        order.push(2);
+      });
+      unblock();
+      await pool.all();
+      expect(order).toEqual([1, 2]);
+    });
+
+    it('respects concurrency across many tasks', async () => {
+      const pool = new AsyncPool({ concurrency: 3 });
+      let concurrent = 0;
+      let maxConcurrent = 0;
+      const tasks = Array.from({ length: 9 }, () => async (_signal: AbortSignal) => {
+        concurrent++;
+        maxConcurrent = Math.max(maxConcurrent, concurrent);
+        await Promise.resolve();
+        concurrent--;
+      });
+      await Promise.all(tasks.map(t => pool.add(t)));
+      expect(maxConcurrent).toBeLessThanOrEqual(3);
+    });
+
+    it('starts all tasks immediately with Infinity concurrency', () => {
+      const pool = new AsyncPool();
+      const fn = vi.fn(() => new Promise<void>(() => {}));
+      for (let i = 0; i < 10; i++) pool.add(fn);
+      expect(fn).toHaveBeenCalledTimes(10);
+      expect(pool.size).toBe(0);
+    });
+  });
+
+  // ── concurrency setter ───────────────────────────────────────────────────
+
+  describe('concurrency setter', () => {
+    it('increasing concurrency starts queued tasks immediately', async () => {
+      const pool = new AsyncPool({ concurrency: 1 });
+      const fn = vi.fn(() => new Promise<void>(() => {}));
+      pool.add(fn);
+      pool.add(fn);
+      pool.add(fn);
+      expect(fn).toHaveBeenCalledTimes(1);
+      pool.concurrency = 3;
+      expect(fn).toHaveBeenCalledTimes(3);
+      expect(pool.size).toBe(0);
+    });
+
+    it('decreasing concurrency does not stop running tasks', () => {
+      const pool = new AsyncPool({ concurrency: 3 });
+      const fn = vi.fn(() => new Promise<void>(() => {}));
+      pool.add(fn);
+      pool.add(fn);
+      pool.add(fn);
+      pool.concurrency = 1;
+      expect(pool.active).toBe(3); // already running tasks are not stopped
+    });
+
+    it('invalid value falls back to Infinity', () => {
+      const pool = new AsyncPool({ concurrency: 2 });
+      pool.concurrency = -5;
+      expect(pool.concurrency).toBe(Infinity);
+    });
+  });
+
+  // ── all() ────────────────────────────────────────────────────────────────
+
+  describe('all()', () => {
+    it('resolves immediately when pool is empty', async () => {
+      await expect(new AsyncPool().all()).resolves.toBeUndefined();
+    });
+
+    it('waits for all tasks to complete', async () => {
+      const pool = new AsyncPool({ concurrency: 2 });
+      const completed: number[] = [];
+      pool.add(async () => {
+        completed.push(1);
+      });
+      pool.add(async () => {
+        completed.push(2);
+      });
+      await pool.all();
+      expect(completed).toEqual([1, 2]);
+    });
+
+    it('throws AggregateError when any task fails', async () => {
+      const pool = new AsyncPool({ concurrency: 2 });
+      pool.add(() => Promise.reject(new Error('e1'))).catch(() => {});
+      pool.add(() => Promise.reject(new Error('e2'))).catch(() => {});
+      pool.add(() => Promise.resolve('ok'));
+      await expect(pool.all()).rejects.toBeInstanceOf(AggregateError);
+    });
+
+    it('AggregateError contains all failures', async () => {
+      const pool = new AsyncPool({ concurrency: 2 });
+      const e1 = new Error('e1');
+      const e2 = new Error('e2');
+      pool.add(() => Promise.reject(e1)).catch(() => {});
+      pool.add(() => Promise.reject(e2)).catch(() => {});
+      try {
+        await pool.all();
+      }
+      catch (err) {
+        expect(err).toBeInstanceOf(AggregateError);
+        expect((err as AggregateError).errors).toContain(e1);
+        expect((err as AggregateError).errors).toContain(e2);
+      }
+    });
+
+    it('multiple concurrent callers share the same underlying drain', () => {
+      // all() wraps _drain.promise in .then() each call (different outer promises),
+      // but allSettled() returns the raw _drain.promise — verify that is idempotent
+      const pool = new AsyncPool({ concurrency: 1 });
+      pool.add(() => new Promise<void>(() => {}));
+      expect(pool.allSettled()).toBe(pool.allSettled());
+    });
+
+    it('resets after each drain cycle', async () => {
+      const pool = new AsyncPool({ concurrency: 1 });
+      pool.add(() => Promise.resolve());
+      await pool.all();
+      // second batch
+      pool.add(() => Promise.resolve());
+      await pool.all(); // should not throw or hang
+      expect(pool.active).toBe(0);
+    });
+  });
+
+  // ── allSettled() ─────────────────────────────────────────────────────────
+
+  describe('allSettled()', () => {
+    it('resolves immediately with empty array when pool is empty', async () => {
+      await expect(new AsyncPool().allSettled()).resolves.toEqual([]);
+    });
+
+    it('returns fulfilled results', async () => {
+      const pool = new AsyncPool({ concurrency: 2 });
+      pool.add(() => Promise.resolve(1));
+      pool.add(() => Promise.resolve(2));
+      const results = await pool.allSettled();
+      expect(results).toHaveLength(2);
+      expect(results.every(r => r.status === 'fulfilled')).toBe(true);
+    });
+
+    it('returns mix of fulfilled and rejected', async () => {
+      const pool = new AsyncPool({ concurrency: 2 });
+      pool.add(() => Promise.resolve('ok'));
+      pool.add(() => Promise.reject(new Error('fail'))).catch(() => {});
+      const results = await pool.allSettled();
+      expect(results.some(r => r.status === 'fulfilled')).toBe(true);
+      expect(results.some(r => r.status === 'rejected')).toBe(true);
+    });
+
+    it('all() and allSettled() called simultaneously share the same promise', () => {
+      const pool = new AsyncPool({ concurrency: 1 });
+      pool.add(() => new Promise<void>(() => {}));
+      // Both chain off the same underlying _drain.promise
+      const a = pool.allSettled();
+      const b = pool.allSettled();
+      expect(a).toBe(b);
+    });
+
+    it('results are cleared after each cycle', async () => {
+      const pool = new AsyncPool({ concurrency: 1 });
+      pool.add(() => Promise.resolve('first'));
+      const r1 = await pool.allSettled();
+      expect(r1).toHaveLength(1);
+
+      pool.add(() => Promise.resolve('second'));
+      const r2 = await pool.allSettled();
+      expect(r2).toHaveLength(1); // only new-batch results
+    });
+  });
+
+  // ── size / active getters ────────────────────────────────────────────────
+
+  describe('size / active', () => {
+    it('active reflects currently running tasks', async () => {
+      const pool = new AsyncPool({ concurrency: 2 });
+      let resolve1!: () => void;
+      const p = pool.add(() => new Promise<void>(r => (resolve1 = r)));
+      expect(pool.active).toBe(1);
+      resolve1();
+      await p;
+      expect(pool.active).toBe(0);
+    });
+
+    it('size reflects queued count', () => {
+      const pool = new AsyncPool({ concurrency: 1 });
+      const neverResolve = () => new Promise<void>(() => {});
+      pool.add(neverResolve);
+      pool.add(neverResolve);
+      pool.add(neverResolve);
+      expect(pool.active).toBe(1);
+      expect(pool.size).toBe(2);
+    });
+  });
+
+  // ── AbortSignal / cancellation ───────────────────────────────────────────
+
+  describe('signal / abort', () => {
+    it('add() after abort rejects immediately', async () => {
+      const controller = new AbortController();
+      const pool = new AsyncPool({ concurrency: 2, signal: controller.signal });
+      controller.abort(new Error('cancelled'));
+      await expect(pool.add(() => Promise.resolve())).rejects.toThrow('cancelled');
+    });
+
+    it('queued tasks are rejected on abort', async () => {
+      const controller = new AbortController();
+      const pool = new AsyncPool({ concurrency: 1, signal: controller.signal });
+      pool.add(() => new Promise<void>(() => {})); // blocks the slot
+      const queued = pool.add(() => Promise.resolve('queued'));
+      controller.abort();
+      await expect(queued).rejects.toBeDefined();
+    });
+
+    it('running tasks receive the aborted signal', async () => {
+      const controller = new AbortController();
+      const pool = new AsyncPool({ concurrency: 1, signal: controller.signal });
+      let taskSignal!: AbortSignal;
+      const taskDone = pool.add((signal) => {
+        taskSignal = signal;
+        return new Promise<void>((resolve) => {
+          signal.addEventListener('abort', () => resolve());
+        });
+      });
+      controller.abort();
+      await taskDone;
+      expect(taskSignal.aborted).toBe(true);
+    });
+
+    it('allSettled() resolves after abort with rejected entries', async () => {
+      const controller = new AbortController();
+      const pool = new AsyncPool({ concurrency: 1, signal: controller.signal });
+      // Active task listens to signal and resolves on abort
+      pool.add(signal => new Promise<void>((resolve) => {
+        signal.addEventListener('abort', () => resolve(), { once: true });
+      }));
+      pool.add(() => Promise.resolve()).catch(() => {}); // queued — rejected on abort
+      controller.abort();
+      const results = await pool.allSettled();
+      expect(results.some(r => r.status === 'rejected')).toBe(true);
+    });
+
+    it('all() rejects with an AggregateError including the abort reason', async () => {
+      const controller = new AbortController();
+      const pool = new AsyncPool({ concurrency: 1, signal: controller.signal });
+      const reason = new Error('cancelled');
+
+      pool.add(signal => new Promise<void>((resolve) => {
+        signal.addEventListener('abort', () => resolve(), { once: true });
+      }));
+      pool.add(() => Promise.resolve()).catch(() => {}); // queued — rejected on abort
+      controller.abort(reason);
+
+      await expect(pool.all()).rejects.toBeInstanceOf(AggregateError);
+    });
+
+    it('dispose() detaches the abort listener', () => {
+      const controller = new AbortController();
+      const removeSpy = vi.spyOn(controller.signal, 'removeEventListener');
+      const pool = new AsyncPool({ signal: controller.signal });
+
+      pool.dispose();
+
+      expect(removeSpy).toHaveBeenCalledWith('abort', expect.any(Function));
+    });
+  });
+
+  // ── Error resilience ─────────────────────────────────────────────────────
+
+  describe('error resilience', () => {
+    it('rejected task does not block subsequent tasks', async () => {
+      const pool = new AsyncPool({ concurrency: 1 });
+      const completed: string[] = [];
+      pool.add(() => Promise.reject(new Error('fail'))).catch(() => {});
+      pool.add(async () => {
+        completed.push('second');
+      });
+      await pool.all().catch(() => {});
+      expect(completed).toContain('second');
+    });
+
+    it('rejected task does not corrupt active count', async () => {
+      const pool = new AsyncPool({ concurrency: 2 });
+      await pool.add(() => Promise.reject(new Error('fail'))).catch(() => {});
+      expect(pool.active).toBe(0);
+    });
+
+    it('a synchronously-throwing task rejects instead of wedging the pool', async () => {
+      const pool = new AsyncPool({ concurrency: 1 });
+
+      await expect(pool.add(() => {
+        throw new Error('sync');
+      })).rejects.toThrow('sync');
+
+      // The slot must be released, not leaked.
+      expect(pool.active).toBe(0);
+
+      // Subsequent tasks still run.
+      await expect(pool.add(() => Promise.resolve('next'))).resolves.toBe('next');
+    });
+  });
+
+  // ── Results survive a drained batch ──────────────────────────────────────
+
+  describe('drain before waiter', () => {
+    it('allSettled() still sees results when the batch drained first', async () => {
+      const pool = new AsyncPool({ concurrency: 2 });
+
+      await pool.add(() => Promise.resolve(1));
+      await pool.add(() => Promise.resolve(2));
+
+      const results = await pool.allSettled();
+      expect(results).toHaveLength(2);
+    });
+
+    it('all() still throws after a failing task drained first', async () => {
+      const pool = new AsyncPool({ concurrency: 1 });
+
+      await pool.add(() => Promise.reject(new Error('boom'))).catch(() => {});
+
+      await expect(pool.all()).rejects.toBeInstanceOf(AggregateError);
+    });
+  });
+});
diff --git a/core/stdlib/src/async/pool/index.ts b/core/stdlib/src/async/pool/index.ts
index 0f6010f..9211d88 100644
--- a/core/stdlib/src/async/pool/index.ts
+++ b/core/stdlib/src/async/pool/index.ts
@@ -1,3 +1,244 @@
+import { CircularBuffer } from '../../structs/CircularBuffer';
+import { isNumber } from '../../types';
+
 export interface AsyncPoolOptions {
   concurrency?: number;
-}
\ No newline at end of file
+  signal?: AbortSignal;
+}
+
+interface PoolEntry<T = any> {
+  task: (signal: AbortSignal) => Promise<T>;
+  resolve: (value: T) => void;
+  reject: (reason: unknown) => void;
+}
+
+// Shared sentinel — never aborts, avoids allocating AbortController per instance when no signal
+const NEVER_ABORT_SIGNAL: AbortSignal = /* @__PURE__ */ new AbortController().signal;
+
+// Normalizes concurrency option to a positive integer or Infinity.
+// Note: (Infinity | 0) === 0 in JS — the `|| Infinity` trick recovers the correct value.
+function normalizeConcurrency(value: unknown): number {
+  return (isNumber(value) && value > 0) ? (value | 0) || Infinity : Infinity;
+}
+
+/**
+ * @name AsyncPool
+ * @category Async
+ * @description A concurrency-limited async task pool with AbortSignal support.
+ * Tasks start immediately when under the concurrency limit and are queued otherwise.
+ * Each task receives the pool's AbortSignal for cooperative cancellation.
+ *
+ * Use `all()` to wait for all tasks (throws AggregateError on any failure)
+ * or `allSettled()` to inspect individual results — mirroring the Promise static API.
+ *
+ * @example
+ * const pool = new AsyncPool({ concurrency: 3, signal: controller.signal });
+ * for (const chunk of chunks) {
+ *   pool.add((signal) => fetch(chunk.url, { signal }));
+ * }
+ * await pool.all();
+ *
+ * @since 0.0.9
+ */
+export class AsyncPool {
+  private limit: number;
+  private activeCount: number;
+  private readonly queue: CircularBuffer<PoolEntry>;
+  // withResolvers result — single field replaces separate drainPromise + drainResolve
+  private pending: ReturnType<typeof Promise.withResolvers<Array<PromiseSettledResult<unknown>>>> | null;
+  private readonly signal: AbortSignal;
+  private settled: Array<PromiseSettledResult<unknown>>;
+  // Kept so the listener can be detached via dispose(), avoiding retention through a long-lived signal
+  private readonly abortListener: (() => void) | null;
+  // No aborted field — use this.signal.aborted directly (always in sync with the platform)
+
+  constructor(options: AsyncPoolOptions = {}) {
+    this.limit = normalizeConcurrency(options.concurrency);
+    this.activeCount = 0;
+    this.queue = new CircularBuffer<PoolEntry>();
+    this.pending = null;
+    this.signal = options.signal ?? NEVER_ABORT_SIGNAL;
+    this.settled = [];
+
+    if (options.signal) {
+      this.abortListener = () => this.onAbort();
+      options.signal.addEventListener('abort', this.abortListener, { once: true });
+    }
+    else {
+      this.abortListener = null;
+    }
+  }
+
+  /**
+   * Detaches the pool's abort listener from the provided signal. Call this when the pool is no
+   * longer needed but the signal outlives it (e.g. one long-lived controller feeding many pools),
+   * otherwise the pool stays reachable through the signal's listener list and cannot be GC'd.
+   */
+  dispose(): void {
+    if (this.abortListener)
+      this.signal.removeEventListener('abort', this.abortListener);
+  }
+
+  get size(): number {
+    return this.queue.length;
+  }
+
+  get active(): number {
+    return this.activeCount;
+  }
+
+  get concurrency(): number {
+    return this.limit;
+  }
+
+  /**
+   * Updates the concurrency limit at runtime. If increased, queued tasks are started immediately
+   * to fill the newly available slots.
+   */
+  set concurrency(value: number) {
+    this.limit = normalizeConcurrency(value);
+    this.fill();
+  }
+
+  /**
+   * Adds a task to the pool. Starts immediately if under the concurrency limit; queues otherwise.
+   * The task receives the pool's AbortSignal for cooperative cancellation.
+   *
+   * @param {(signal: AbortSignal) => Promise<T>} task
+   * @returns {Promise<T>}
+   */
+  add<T>(task: (signal: AbortSignal) => Promise<T>): Promise<T> {
+    // withResolvers — resolve/reject needed outside the promise for PoolEntry;
+    // no executor closure, no captured variables
+    const { promise, resolve, reject } = Promise.withResolvers<T>();
+    if (this.signal.aborted) {
+      reject(this.signal.reason);
+      return promise;
+    }
+    const entry = { task, resolve, reject } as PoolEntry<T>;
+    if (this.activeCount < this.limit) {
+      this.run(entry);
+    }
+    else {
+      this.queue.pushBack(entry);
+    }
+    return promise;
+  }
+
+  /**
+   * Like `Promise.all` — resolves when all tasks complete; throws `AggregateError` if any failed.
+   * Multiple concurrent callers share the same underlying promise.
+   *
+   * @returns {Promise<void>}
+   */
+  async all(): Promise<void> {
+    const results = await this.waitForDrain();
+    const errors: unknown[] = [];
+    for (const r of results) {
+      if (r.status === 'rejected')
+        errors.push((r as PromiseRejectedResult).reason);
+    }
+    if (errors.length > 0)
+      throw new AggregateError(errors, 'AsyncPool: one or more tasks failed');
+  }
+
+  /**
+   * Like `Promise.allSettled` — always resolves with the settled result of every task.
+   * Multiple concurrent callers share the same underlying promise.
+   *
+   * @returns {Promise<Array<PromiseSettledResult<unknown>>>}
+   */
+  allSettled(): Promise<Array<PromiseSettledResult<unknown>>> {
+    return this.waitForDrain();
+  }
+
+  private waitForDrain(): Promise<Array<PromiseSettledResult<unknown>>> {
+    if (this.activeCount === 0 && this.queue.isEmpty) {
+      // Fast path — swap settled out immediately; no copy
+      const results = this.settled;
+      this.settled = [];
+      return Promise.resolve(results);
+    }
+    if (this.pending !== null)
+      return this.pending.promise; // idempotent — N callers share one promise
+
+    this.pending = Promise.withResolvers();
+    return this.pending.promise;
+  }
+
+  private run(entry: PoolEntry): void {
+    this.activeCount++;
+
+    let task: Promise<unknown>;
+
+    // A task that throws synchronously must become a rejection, otherwise the
+    // exception escapes add(), the concurrency slot leaks and the pool wedges forever.
+    try {
+      task = Promise.resolve(entry.task(this.signal));
+    }
+    catch (reason) {
+      this.settled.push({ status: 'rejected', reason });
+      entry.reject(reason);
+      this.next();
+      return;
+    }
+
+    task.then(
+      (value) => {
+        this.settled.push({ status: 'fulfilled', value });
+        entry.resolve(value);
+        this.next();
+      },
+      (reason) => {
+        this.settled.push({ status: 'rejected', reason });
+        entry.reject(reason);
+        this.next();
+      },
+    );
+  }
+
+  private next(): void {
+    this.activeCount--;
+    this.fill();
+  }
+
+  // Central pump — fills available concurrency slots from the queue.
+  // Exit point: flushes drain when queue and active are both empty.
+  // Note: no abort check here — onAbort() drains the queue synchronously before
+  // any microtask could call fill(), so by the time fill() runs, queue is already empty.
+  private fill(): void {
+    const q = this.queue;
+    while (!q.isEmpty && this.activeCount < this.limit) {
+      this.run(q.popFront() as PoolEntry);
+    }
+    if (q.isEmpty && this.activeCount === 0)
+      this.flush();
+  }
+
+  private onAbort(): void {
+    const reason = this.signal.reason;
+    const q = this.queue;
+    while (!q.isEmpty) {
+      const entry = q.popFront() as PoolEntry;
+      this.settled.push({ status: 'rejected', reason });
+      entry.reject(reason);
+    }
+    if (this.activeCount === 0)
+      this.flush();
+  }
+
+  private flush(): void {
+    const drain = this.pending;
+
+    // No waiter yet — keep `settled` intact so a later all()/allSettled() can still
+    // observe the results of every task via the waitForDrain() fast path.
+    if (drain === null)
+      return;
+
+    this.pending = null;
+    // Swap — hand off current array, allocate fresh one; no element copy
+    const results = this.settled;
+    this.settled = [];
+    drain.resolve(results);
+  }
+}
diff --git a/core/stdlib/src/async/retry/index.test.ts b/core/stdlib/src/async/retry/index.test.ts
index 4fc61e1..6acbb73 100644
--- a/core/stdlib/src/async/retry/index.test.ts
+++ b/core/stdlib/src/async/retry/index.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { retry } from '.';
 
 describe('retry', () => {
@@ -12,7 +12,7 @@ describe('retry', () => {
 
   it('return the result on first successful attempt', async () => {
     const successFn = vi.fn().mockResolvedValue('success');
-    
+
     const result = await retry(successFn);
 
     expect(result).toBe('success');
@@ -20,19 +20,19 @@ describe('retry', () => {
     expect(successFn).toHaveBeenCalledWith({ count: 1, stop: expect.any(Function) });
   });
 
-    it('use default times value of 2', async () => {
+  it('use default times value of 2', async () => {
     const failingFn = vi.fn().mockRejectedValue(new Error('Test error'));
-    
+
     await expect(retry(failingFn)).rejects.toThrow('Test error');
-    
+
     expect(failingFn).toHaveBeenCalledTimes(2);
   });
 
   it('retry the specified number of times on failure', async () => {
     const failingFn = vi.fn().mockRejectedValue(new Error('Test error'));
-    
+
     await expect(retry(failingFn, { times: 3 })).rejects.toThrow('Test error');
-    
+
     expect(failingFn).toHaveBeenCalledTimes(3);
     expect(failingFn).toHaveBeenNthCalledWith(1, { count: 1, stop: expect.any(Function) });
     expect(failingFn).toHaveBeenNthCalledWith(2, { count: 2, stop: expect.any(Function) });
@@ -44,7 +44,7 @@ describe('retry', () => {
       .mockRejectedValueOnce(new Error('First failure'))
       .mockRejectedValueOnce(new Error('Second failure'))
       .mockResolvedValue('success');
-    
+
     const result = await retry(partiallyFailingFn, { times: 3 });
 
     expect(result).toBe('success');
@@ -55,24 +55,24 @@ describe('retry', () => {
     const networkError = new Error('Network failed');
     networkError.name = 'NetworkError';
     const failingFn = vi.fn().mockRejectedValue(networkError);
-    
-    await expect(retry(failingFn, { 
+
+    await expect(retry(failingFn, {
       times: 3,
-      shouldRetry: (error) => error.name !== 'NetworkError'
+      shouldRetry: error => error.name !== 'NetworkError',
     })).rejects.toThrow('Network failed');
-    
+
     expect(failingFn).toHaveBeenCalledTimes(1);
   });
 
   it('retry with custom shouldRetry based on count', async () => {
     const testError = new Error('Test error');
     const failingFn = vi.fn().mockRejectedValue(testError);
-    
-    await expect(retry(failingFn, { 
+
+    await expect(retry(failingFn, {
       times: 5,
-      shouldRetry: (error, count) => count < 3 // Only retry first 2 attempts
+      shouldRetry: (error, count) => count < 3, // Only retry first 2 attempts
     })).rejects.toThrow('Test error');
-    
+
     expect(failingFn).toHaveBeenCalledTimes(3); // Initial + 2 retries
   });
 
@@ -81,17 +81,17 @@ describe('retry', () => {
     temporaryError.name = 'TemporaryError';
     const permanentError = new Error('Permanent failure');
     permanentError.name = 'PermanentError';
-    
+
     const failingFn = vi.fn()
       .mockRejectedValueOnce(temporaryError)
       .mockRejectedValueOnce(temporaryError)
       .mockRejectedValueOnce(permanentError);
-    
-    await expect(retry(failingFn, { 
+
+    await expect(retry(failingFn, {
       times: 5,
-      shouldRetry: (error) => error.name === 'TemporaryError'
+      shouldRetry: error => error.name === 'TemporaryError',
     })).rejects.toThrow('Permanent failure');
-    
+
     expect(failingFn).toHaveBeenCalledTimes(3);
   });
 
@@ -154,9 +154,9 @@ describe('retry', () => {
 
   it('handle zero delay', async () => {
     const failingFn = vi.fn().mockRejectedValue(new Error('Test error'));
-    
+
     await expect(retry(failingFn, { times: 3, delay: 0 })).rejects.toThrow('Test error');
-    
+
     expect(failingFn).toHaveBeenCalledTimes(3);
   });
 
@@ -167,7 +167,7 @@ describe('retry', () => {
       }
       return `Success on attempt ${count}`;
     });
-    
+
     const result = await retry(countingFn, { times: 3 });
 
     expect(result).toBe('Success on attempt 3');
@@ -182,15 +182,15 @@ describe('retry', () => {
     const failingFn = vi.fn()
       .mockRejectedValueOnce(firstError)
       .mockRejectedValueOnce(lastError);
-    
+
     await expect(retry(failingFn, { times: 2 })).rejects.toThrow('Last error');
   });
 
   it('handle times value of 1', async () => {
     const failingFn = vi.fn().mockRejectedValue(new Error('Test error'));
-    
+
     await expect(retry(failingFn, { times: 1 })).rejects.toThrow('Test error');
-    
+
     expect(failingFn).toHaveBeenCalledTimes(1);
   });
 
@@ -201,7 +201,7 @@ describe('retry', () => {
       }
       return 'success';
     });
-    
+
     const result = await retry(syncFn, { times: 2 });
 
     expect(result).toBe('success');
@@ -209,45 +209,82 @@ describe('retry', () => {
   });
 
   it('handle complex return types', async () => {
-    const complexFn = vi.fn().mockResolvedValue({ 
-      data: [1, 2, 3], 
+    const complexFn = vi.fn().mockResolvedValue({
+      data: [1, 2, 3],
       status: 'ok',
-      metadata: { timestamp: 123456 }
+      metadata: { timestamp: 123456 },
     });
-    
+
     const result = await retry(complexFn);
 
     expect(result).toEqual({
       data: [1, 2, 3],
       status: 'ok',
-      metadata: { timestamp: 123456 }
+      metadata: { timestamp: 123456 },
     });
   });
 
   it('stop retrying when stop function is called', async () => {
     const customError = new Error('Custom stop error');
-    const stopFn = vi.fn(async ({ count, stop }: { count: number, stop: (error: any) => void }) => {
+    const stopFn = vi.fn(async ({ count, stop }: { count: number; stop: (error: any) => void }) => {
       if (count === 2) {
         stop(customError);
       }
       throw new Error(`Attempt ${count} failed`);
     });
-    
+
     await expect(retry(stopFn, { times: 5 })).rejects.toThrow('Custom stop error');
-    
+
     expect(stopFn).toHaveBeenCalledTimes(2);
   });
 
   it('stop retrying with undefined error when stop is called without argument', async () => {
-    const stopFn = vi.fn(async ({ count, stop }: { count: number, stop: (error?: any) => void }) => {
+    const stopFn = vi.fn(async ({ count, stop }: { count: number; stop: (error?: any) => void }) => {
       if (count === 2) {
         stop();
       }
       throw new Error(`Attempt ${count} failed`);
     });
-    
+
     await expect(retry(stopFn, { times: 5 })).rejects.toBeUndefined();
-    
+
     expect(stopFn).toHaveBeenCalledTimes(2);
   });
+
+  it('make exactly one attempt for times: 0 and reject with the real error (not null)', async () => {
+    const failingFn = vi.fn().mockRejectedValue(new Error('only attempt'));
+
+    await expect(retry(failingFn, { times: 0 })).rejects.toThrow('only attempt');
+
+    expect(failingFn).toHaveBeenCalledTimes(1);
+  });
+
+  it('make exactly one attempt for a negative times', async () => {
+    const failingFn = vi.fn().mockRejectedValue(new Error('only attempt'));
+
+    await expect(retry(failingFn, { times: -3 })).rejects.toThrow('only attempt');
+
+    expect(failingFn).toHaveBeenCalledTimes(1);
+  });
+
+  it('stop() on the first attempt aborts immediately with the given reason', async () => {
+    const reason = new Error('early');
+    const fn = vi.fn(async ({ stop }: { stop: (error: any) => void }) => {
+      stop(reason);
+      throw new Error('should not surface');
+    });
+
+    await expect(retry(fn, { times: 5 })).rejects.toBe(reason);
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it('stop() rejects with a non-Error value verbatim', async () => {
+    const fn = vi.fn(async ({ stop }: { stop: (error: any) => void }) => {
+      stop('plain string reason');
+      throw new Error('ignored');
+    });
+
+    await expect(retry(fn, { times: 3 })).rejects.toBe('plain string reason');
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/core/stdlib/src/async/retry/index.ts b/core/stdlib/src/async/retry/index.ts
index 8901d98..aab5724 100644
--- a/core/stdlib/src/async/retry/index.ts
+++ b/core/stdlib/src/async/retry/index.ts
@@ -55,6 +55,9 @@ export async function retry<Return>(
     shouldRetry,
   } = options;
 
+  // Always make at least one attempt — `times < 1` would otherwise skip the loop
+  // entirely and throw a bare `null`, which is impossible for callers to diagnose.
+  const maxAttempts = times < 1 ? 1 : times;
   const wrappedFn = tryIt(fn);
   const delayFn = isFunction(delay) ? delay : null;
   const delayMs = delayFn ? 0 : delay as number;
@@ -66,7 +69,7 @@ export async function retry<Return>(
   let lastError: Error | null = null;
   let count = 1;
 
-  while (count <= times) {
+  while (count <= maxAttempts) {
     const { error, data } = await wrappedFn({ count, stop });
 
     if (!error)
@@ -82,7 +85,7 @@ export async function retry<Return>(
     count++;
 
     // Don't delay after the last attempt
-    if (count <= times) {
+    if (count <= maxAttempts) {
       const ms = delayFn ? delayFn(count) : delayMs;
 
       if (ms > 0)
@@ -90,6 +93,7 @@ export async function retry<Return>(
     }
   }
 
-  // eslint-disable-next-line eslint/no-throw-literal
+  // lastError is always set by the loop above (at least one attempt runs).
+  // eslint-disable-next-line no-throw-literal -- rethrowing the original caught error verbatim
   throw lastError!;
 }
diff --git a/core/stdlib/src/async/sleep/index.test.ts b/core/stdlib/src/async/sleep/index.test.ts
index c018887..638d010 100644
--- a/core/stdlib/src/async/sleep/index.test.ts
+++ b/core/stdlib/src/async/sleep/index.test.ts
@@ -1,19 +1,38 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { sleep } from '.';
 
 describe('sleep', () => {
   beforeEach(() => {
-    vi.useFakeTimers({ shouldAdvanceTime: true });
+    vi.useFakeTimers();
   });
 
-  it('delay execution by the specified amount of time', async () => {
-    const start = performance.now();
-    const delay = 100;
-
-    await sleep(delay);
-
-    const end = performance.now();
-
-    expect(end - start).toBeGreaterThan(delay - 5);
+  afterEach(() => {
+    vi.useRealTimers();
   });
-});
\ No newline at end of file
+
+  it('resolve only after the requested delay elapses', async () => {
+    let done = false;
+    sleep(100).then(() => (done = true));
+
+    await vi.advanceTimersByTimeAsync(99);
+    expect(done).toBe(false);
+
+    await vi.advanceTimersByTimeAsync(1);
+    expect(done).toBe(true);
+  });
+
+  it('resolve with undefined', async () => {
+    const promise = sleep(0);
+    await vi.advanceTimersByTimeAsync(0);
+
+    expect(await promise).toBeUndefined();
+  });
+
+  it('resolve on the next macrotask for a zero delay', async () => {
+    let done = false;
+    sleep(0).then(() => (done = true));
+
+    await vi.advanceTimersByTimeAsync(0);
+    expect(done).toBe(true);
+  });
+});
diff --git a/core/stdlib/src/async/sleep/index.ts b/core/stdlib/src/async/sleep/index.ts
index db3f5fc..74019c7 100644
--- a/core/stdlib/src/async/sleep/index.ts
+++ b/core/stdlib/src/async/sleep/index.ts
@@ -2,20 +2,20 @@
  * @name sleep
  * @category Async
  * @description Delays the execution of the current function by the specified amount of time
- * 
+ *
  * @param {number} ms - The amount of time to delay the execution of the current function
  * @returns {Promise<void>} - A promise that resolves after the specified amount of time
- * 
+ *
  * @example
  * await sleep(1000);
- * 
+ *
  * @example
  * sleep(1000).then(() => {
  *  console.log('Hello, World!');
  * });
- * 
+ *
  * @since 0.0.3
  */
 export function sleep(ms: number): Promise<void> {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
\ No newline at end of file
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
diff --git a/core/stdlib/src/async/tryIt/index.test-d.ts b/core/stdlib/src/async/tryIt/index.test-d.ts
new file mode 100644
index 0000000..3d0f8b3
--- /dev/null
+++ b/core/stdlib/src/async/tryIt/index.test-d.ts
@@ -0,0 +1,37 @@
+import { describe, expectTypeOf, it } from 'vitest';
+import { tryIt } from '.';
+
+describe('tryIt', () => {
+  it('wraps async returns in a Promise of the discriminated union', () => {
+    const wrapped = tryIt(async (n: number) => n * 2);
+
+    expectTypeOf(wrapped(2)).toEqualTypeOf<
+      Promise<{ error: Error; data: undefined } | { error: undefined; data: number }>
+    >();
+  });
+
+  it('keeps sync returns synchronous', () => {
+    const wrapped = tryIt((n: number) => n * 2);
+
+    expectTypeOf(wrapped(2)).toEqualTypeOf<
+      { error: Error; data: undefined } | { error: undefined; data: number }
+    >();
+  });
+
+  it('unwraps Awaited for a promise-returning function', () => {
+    const wrapped = tryIt((n: number) => Promise.resolve(`${n}`));
+
+    expectTypeOf(wrapped(1)).toEqualTypeOf<
+      Promise<{ error: Error; data: undefined } | { error: undefined; data: string }>
+    >();
+  });
+
+  it('narrows data when error is checked', () => {
+    const result = tryIt((n: number) => n)(1);
+
+    if (result.error === undefined)
+      expectTypeOf(result.data).toEqualTypeOf<number>();
+    else
+      expectTypeOf(result.data).toEqualTypeOf<undefined>();
+  });
+});
diff --git a/core/stdlib/src/async/tryIt/index.test.ts b/core/stdlib/src/async/tryIt/index.test.ts
index 25d668a..6f29d1a 100644
--- a/core/stdlib/src/async/tryIt/index.test.ts
+++ b/core/stdlib/src/async/tryIt/index.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { tryIt } from '.';
 
 describe('tryIt', () => {
@@ -13,7 +13,9 @@ describe('tryIt', () => {
   });
 
   it('handle synchronous functions with errors', () => {
-    const syncFn = (): void => { throw new Error('Test error') };
+    const syncFn = (): void => {
+      throw new Error('Test error');
+    };
     const wrappedSyncFn = tryIt(syncFn);
 
     const { error, data } = wrappedSyncFn();
@@ -34,7 +36,9 @@ describe('tryIt', () => {
   });
 
   it('handle asynchronous functions with errors', async () => {
-    const asyncFn = async () => { throw new Error('Test error') };
+    const asyncFn = async () => {
+      throw new Error('Test error');
+    };
     const wrappedAsyncFn = tryIt(asyncFn);
 
     const { error, data } = await wrappedAsyncFn();
@@ -64,4 +68,33 @@ describe('tryIt', () => {
     expect(error?.message).toBe('Test error');
     expect(data).toBeUndefined();
   });
-});
\ No newline at end of file
+
+  it('capture a rejected thenable (non-native PromiseLike)', async () => {
+    const thenableFn = () => ({
+      // eslint-disable-next-line unicorn/no-thenable -- intentionally exercising a custom thenable
+      then(_resolve: (v: number) => void, reject: (e: unknown) => void) {
+        reject(new Error('thenable error'));
+      },
+    });
+
+    const { error, data } = await tryIt(thenableFn)();
+
+    expect(error).toBeInstanceOf(Error);
+    expect((error as Error).message).toBe('thenable error');
+    expect(data).toBeUndefined();
+  });
+
+  it('resolve a fulfilled thenable to its data', async () => {
+    const thenableFn = () => ({
+      // eslint-disable-next-line unicorn/no-thenable -- intentionally exercising a custom thenable
+      then(resolve: (v: number) => void) {
+        resolve(42);
+      },
+    });
+
+    const { error, data } = await tryIt(thenableFn)();
+
+    expect(error).toBeUndefined();
+    expect(data).toBe(42);
+  });
+});
diff --git a/core/stdlib/src/async/tryIt/index.ts b/core/stdlib/src/async/tryIt/index.ts
index f0734f4..14f49a3 100644
--- a/core/stdlib/src/async/tryIt/index.ts
+++ b/core/stdlib/src/async/tryIt/index.ts
@@ -1,11 +1,19 @@
-import { isPromise } from '../../types';
-
-export type TryItReturn<Return> = Return extends Promise<any>
+export type TryItReturn<Return> = Return extends PromiseLike<any>
   ? Promise<{ error: Error; data: undefined } | { error: undefined; data: Awaited<Return> }>
   : { error: Error; data: undefined } | { error: undefined; data: Return };
 
-function onResolve(data: any) { return { error: undefined, data }; }
-function onReject(error: any) { return { error, data: undefined }; }
+function isThenable(value: unknown): value is PromiseLike<unknown> {
+  return value !== null && (typeof value === 'object' || typeof value === 'function')
+    && typeof (value as PromiseLike<unknown>).then === 'function';
+}
+
+function onResolve(data: any) {
+  return { error: undefined, data };
+}
+
+function onReject(error: any) {
+  return { error, data: undefined };
+}
 
 /**
  * @name tryIt
@@ -31,11 +39,14 @@ export function tryIt<Args extends any[], Return>(
     try {
       const result = fn(...args);
 
-      if (isPromise(result))
-        return result.then(onResolve, onReject) as TryItReturn<Return>;
+      // Handle any thenable (native Promise, async fn, or custom PromiseLike), so a
+      // rejected thenable is captured as { error } instead of escaping as raw data.
+      if (isThenable(result))
+        return Promise.resolve(result).then(onResolve, onReject) as TryItReturn<Return>;
 
       return { error: undefined, data: result } as TryItReturn<Return>;
-    } catch (error) {
+    }
+    catch (error) {
       return { error, data: undefined } as TryItReturn<Return>;
     }
   };
diff --git a/core/stdlib/src/bits/flags/index.test.ts b/core/stdlib/src/bits/flags/index.test.ts
index b9dffb3..43c4744 100644
--- a/core/stdlib/src/bits/flags/index.test.ts
+++ b/core/stdlib/src/bits/flags/index.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { flagsGenerator } from '.';
 
 describe('flagsGenerator', () => {
@@ -23,4 +23,17 @@ describe('flagsGenerator', () => {
 
     expect(() => generateFlag()).toThrow(new RangeError('Cannot create more than 31 flags'));
   });
+
+  it('produce 31 distinct, orthogonal powers of two up to 2^30', () => {
+    const generateFlag = flagsGenerator();
+    const flags = Array.from({ length: 31 }, () => generateFlag());
+
+    expect(new Set(flags).size).toBe(31);
+    flags.forEach((flag, i) => {
+      expect(flag).toBe(2 ** i);
+      expect(flag & (flag - 1)).toBe(0); // exactly one bit set
+    });
+
+    expect(flags.at(-1)).toBe(2 ** 30);
+  });
 });
diff --git a/core/stdlib/src/bits/flags/index.ts b/core/stdlib/src/bits/flags/index.ts
index 1be8ed3..b098e19 100644
--- a/core/stdlib/src/bits/flags/index.ts
+++ b/core/stdlib/src/bits/flags/index.ts
@@ -2,21 +2,21 @@
  * @name flagsGenerator
  * @category Bits
  * @description Create a function that generates unique flags
- * 
+ *
  * @returns {Function} A function that generates unique flags
  * @throws {RangeError} If more than 31 flags are created
  *
  * @since 0.0.2
  */
 export function flagsGenerator() {
-    let lastFlag = 0;
+  let lastFlag = 0;
 
-    return () => {
-      // 31 flags is the maximum number of flags that can be created
-      // (without zero) because of the 32-bit integer limit in bitwise operations
-      if (lastFlag & 0x40000000)
-        throw new RangeError('Cannot create more than 31 flags');
+  return () => {
+    // 31 flags is the maximum number of flags that can be created
+    // (without zero) because of the 32-bit integer limit in bitwise operations
+    if (lastFlag & 0x40000000)
+      throw new RangeError('Cannot create more than 31 flags');
 
-      return (lastFlag = lastFlag === 0 ? 1 : lastFlag << 1);
-    };
+    return (lastFlag = lastFlag === 0 ? 1 : lastFlag << 1);
+  };
 }
diff --git a/core/stdlib/src/bits/helpers/index.test.ts b/core/stdlib/src/bits/helpers/index.test.ts
index 502e322..2c21b4d 100644
--- a/core/stdlib/src/bits/helpers/index.test.ts
+++ b/core/stdlib/src/bits/helpers/index.test.ts
@@ -1,6 +1,5 @@
-import { describe, it, expect } from 'vitest';
-import { and, or, not, has, is, unset, toggle } from '.';
-
+import { describe, expect, it } from 'vitest';
+import { and, has, is, not, or, toggle, unset } from '.';
 
 describe('flagsAnd', () => {
   it('no effect on zero flags', () => {
@@ -14,7 +13,7 @@ describe('flagsAnd', () => {
 
     expect(result).toBe(0b1010);
   });
-  
+
   it('perform bitwise AND operation on flags', () => {
     const result = and(0b1111, 0b1010, 0b1100);
 
@@ -30,15 +29,15 @@ describe('flagsOr', () => {
   });
 
   it('source flag is returned if no flags are provided', () => {
-      const result = or(0b1010);
-  
-      expect(result).toBe(0b1010);
+    const result = or(0b1010);
+
+    expect(result).toBe(0b1010);
   });
 
   it('perform bitwise OR operation on flags', () => {
-      const result = or(0b1111, 0b1010, 0b1100);
-  
-      expect(result).toBe(0b1111);
+    const result = or(0b1111, 0b1010, 0b1100);
+
+    expect(result).toBe(0b1111);
   });
 });
 
@@ -58,9 +57,18 @@ describe('flagsHas', () => {
   });
 
   it('check if a flag has a specific bit unset', () => {
-      const result = has(0b1010, 0b0100);
-  
-      expect(result).toBe(false);
+    const result = has(0b1010, 0b0100);
+
+    expect(result).toBe(false);
+  });
+
+  it('require ALL queried bits, not just any (partial overlap is false)', () => {
+    // 0b1000 is set but 0b0100 is not — partial overlap must be false
+    expect(has(0b1010, 0b1100)).toBe(false);
+    // both bits present
+    expect(has(0b1110, 0b1100)).toBe(true);
+    // querying zero bits is vacuously true
+    expect(has(0b1010, 0b0000)).toBe(true);
   });
 });
 
@@ -72,9 +80,9 @@ describe('flagsIs', () => {
   });
 
   it('check if a flag is unset', () => {
-      const result = is(0);
-  
-      expect(result).toBe(false);
+    const result = is(0);
+
+    expect(result).toBe(false);
   });
 });
 
@@ -92,4 +100,4 @@ describe('flagsToggle', () => {
 
     expect(result).toBe(0b0010);
   });
-});
\ No newline at end of file
+});
diff --git a/core/stdlib/src/bits/helpers/index.ts b/core/stdlib/src/bits/helpers/index.ts
index ff4b692..b293746 100644
--- a/core/stdlib/src/bits/helpers/index.ts
+++ b/core/stdlib/src/bits/helpers/index.ts
@@ -2,7 +2,7 @@
  * @name and
  * @category Bits
  * @description Function to combine multiple flags using the AND operator
- * 
+ *
  * @param {number[]} flags - The flags to combine
  * @returns {number} The combined flags
  *
@@ -16,7 +16,7 @@ export function and(...flags: number[]) {
 * @name or
 * @category Bits
 * @description Function to combine multiple flags using the OR operator
-* 
+*
 * @param {number[]} flags - The flags to combine
 * @returns {number} The combined flags
 *
@@ -29,8 +29,8 @@ export function or(...flags: number[]) {
 /**
 * @name not
 * @category Bits
-* @description Function to combine multiple flags using the XOR operator
-* 
+* @description Function to apply the bitwise NOT (complement) operator to a flag
+*
 * @param {number} flag - The flag to apply the NOT operator to
 * @returns {number} The result of the NOT operator
 *
@@ -44,7 +44,7 @@ export function not(flag: number) {
 * @name has
 * @category Bits
 * @description Function to make sure a flag has a specific bit set
-* 
+*
 * @param {number} flag - The flag to check
 * @param {number} other - Flag to check
 * @returns {boolean} Whether the flag has the bit set
@@ -59,7 +59,7 @@ export function has(flag: number, other: number) {
 * @name is
 * @category Bits
 * @description Function to check if a flag is set
-* 
+*
 * @param {number} flag - The flag to check
 * @returns {boolean} Whether the flag is set
 *
@@ -73,7 +73,7 @@ export function is(flag: number) {
 * @name unset
 * @category Bits
 * @description Function to unset a flag
-* 
+*
 * @param {number} flag - Source flag
 * @param {number} other - Flag to unset
 * @returns {number} The new flag
@@ -88,7 +88,7 @@ export function unset(flag: number, other: number) {
 * @name toggle
 * @category Bits
 * @description Function to toggle (xor) a flag
-* 
+*
 * @param {number} flag - Source flag
 * @param {number} other - Flag to toggle
 * @returns {number} The new flag
diff --git a/core/stdlib/src/bits/index.ts b/core/stdlib/src/bits/index.ts
index a21ed83..15312c2 100644
--- a/core/stdlib/src/bits/index.ts
+++ b/core/stdlib/src/bits/index.ts
@@ -1 +1,3 @@
-export * from './flags';
\ No newline at end of file
+export * from './flags';
+export * from './helpers';
+export * from './vector';
diff --git a/core/stdlib/src/bits/vector/index.test.ts b/core/stdlib/src/bits/vector/index.test.ts
index 2aca9b3..ae8a897 100644
--- a/core/stdlib/src/bits/vector/index.test.ts
+++ b/core/stdlib/src/bits/vector/index.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { BitVector } from '.';
 
 describe('BitVector', () => {
@@ -13,7 +13,7 @@ describe('BitVector', () => {
   it('set and get bits correctly', () => {
     const bitVector = new BitVector(16);
     bitVector.setBit(5);
-    
+
     expect(bitVector.getBit(5)).toBe(true);
     expect(bitVector.getBit(4)).toBe(false);
   });
@@ -40,7 +40,7 @@ describe('BitVector', () => {
     const indices = [99, 88, 66, 65, 64, 63, 15, 14, 1, 0];
     const result = [];
     indices.forEach(index => bitVector.setBit(index));
-    
+
     for (let i = bitVector.previousBit(100); i !== -1; i = bitVector.previousBit(i)) {
       result.push(i);
     }
@@ -54,10 +54,76 @@ describe('BitVector', () => {
     expect(bitVector.previousBit(0)).toBe(-1);
   });
 
-  it('throw RangeError when previousBit is called with an unreachable value', () => {
+  it('clamp an out-of-range start index and return the previous set bit', () => {
     const bitVector = new BitVector(16);
     bitVector.setBit(5);
 
-    expect(() => bitVector.previousBit(24)).toThrow(new RangeError('Unreachable value'));
+    expect(bitVector.previousBit(24)).toBe(5);
   });
-});
\ No newline at end of file
+
+  it('return -1 from previousBit on an empty out-of-range query', () => {
+    const bitVector = new BitVector(16);
+
+    expect(bitVector.previousBit(24)).toBe(-1);
+  });
+
+  it('toggle bits correctly', () => {
+    const bitVector = new BitVector(16);
+
+    bitVector.toggleBit(7);
+    expect(bitVector.getBit(7)).toBe(true);
+
+    bitVector.toggleBit(7);
+    expect(bitVector.getBit(7)).toBe(false);
+  });
+
+  it('find the next bit correctly', () => {
+    const bitVector = new BitVector(100);
+    const indices = [0, 1, 14, 15, 63, 64, 65, 66, 88, 99];
+    const result = [];
+    indices.forEach(index => bitVector.setBit(index));
+
+    for (let i = bitVector.nextBit(-1); i !== -1; i = bitVector.nextBit(i)) {
+      result.push(i);
+    }
+
+    expect(result).toEqual(indices);
+  });
+
+  it('return -1 when no next bit is found', () => {
+    const bitVector = new BitVector(16);
+
+    expect(bitVector.nextBit(0)).toBe(-1);
+    expect(bitVector.nextBit(15)).toBe(-1);
+  });
+
+  it('count the number of set bits', () => {
+    const bitVector = new BitVector(100);
+
+    expect(bitVector.count()).toBe(0);
+
+    [0, 5, 63, 64, 99].forEach(index => bitVector.setBit(index));
+
+    expect(bitVector.count()).toBe(5);
+
+    bitVector.clearBit(5);
+
+    expect(bitVector.count()).toBe(4);
+  });
+
+  it('tolerate out-of-bounds writes without crashing or corrupting in-range bits', () => {
+    const bitVector = new BitVector(16);
+    bitVector.setBit(3);
+
+    expect(() => {
+      bitVector.setBit(1000);
+      bitVector.clearBit(1000);
+      bitVector.toggleBit(1000);
+    }).not.toThrow();
+
+    // out-of-range reads are false; in-range state is intact
+    expect(bitVector.getBit(1000)).toBe(false);
+    expect(bitVector.getBit(3)).toBe(true);
+    expect(bitVector.count()).toBe(1);
+  });
+});
diff --git a/core/stdlib/src/bits/vector/index.ts b/core/stdlib/src/bits/vector/index.ts
index dbccbff..d9caa7b 100644
--- a/core/stdlib/src/bits/vector/index.ts
+++ b/core/stdlib/src/bits/vector/index.ts
@@ -2,14 +2,17 @@ export interface BitVectorLike {
   getBit(index: number): boolean;
   setBit(index: number): void;
   clearBit(index: number): void;
+  toggleBit(index: number): void;
   previousBit(index: number): number;
+  nextBit(index: number): number;
+  count(): number;
 }
 
 /**
  * @name BitVector
  * @category Bits
  * @description A bit vector is a vector of bits that can be used to store a collection of bits
- * 
+ *
  * @since 0.0.3
  */
 export class BitVector extends Uint8Array implements BitVectorLike {
@@ -30,7 +33,18 @@ export class BitVector extends Uint8Array implements BitVectorLike {
     this[index >> 3]! &= ~(1 << (index & 7));
   }
 
+  toggleBit(index: number): void {
+    this[index >> 3]! ^= 1 << (index & 7);
+  }
+
   previousBit(index: number): number {
+    // Clamp an out-of-range start to the vector's bit length so a query past the end
+    // returns the last set bit (or -1) instead of falling through to the invariant throw.
+    const totalBits = this.length << 3;
+
+    if (index > totalBits)
+      index = totalBits;
+
     while (index !== ((index >> 3) << 3)) {
       --index;
 
@@ -58,4 +72,61 @@ export class BitVector extends Uint8Array implements BitVectorLike {
 
     throw new RangeError('Unreachable value');
   }
-}
\ No newline at end of file
+
+  nextBit(index: number): number {
+    const totalBits = this.length << 3;
+
+    let i = index + 1;
+
+    if (i < 0)
+      i = 0;
+
+    // Finish scanning the remainder of the starting byte.
+    while (i < totalBits && (i & 7) !== 0) {
+      if (this.getBit(i))
+        return i;
+
+      ++i;
+    }
+
+    // Skip over fully-empty bytes.
+    let byteIndex = i >> 3;
+
+    while (byteIndex < this.length && this[byteIndex] === 0)
+      ++byteIndex;
+
+    if (byteIndex >= this.length)
+      return -1;
+
+    i = byteIndex << 3;
+
+    const end = i + 8;
+
+    while (i < end) {
+      if (this.getBit(i))
+        return i;
+
+      ++i;
+    }
+
+    throw new RangeError('Unreachable value');
+  }
+
+  count(): number {
+    let total = 0;
+    const len = this.length;
+
+    // Indexed loop — the typed-array iterator protocol (for...of) is ~3.5x slower here.
+    for (let i = 0; i < len; i++) {
+      // Brian Kernighan's algorithm: iterate once per set bit.
+      let byte = this[i]!;
+
+      while (byte !== 0) {
+        byte &= byte - 1;
+        ++total;
+      }
+    }
+
+    return total;
+  }
+}
diff --git a/core/stdlib/src/collections/get/index.test-d.ts b/core/stdlib/src/collections/get/index.test-d.ts
new file mode 100644
index 0000000..6960b75
--- /dev/null
+++ b/core/stdlib/src/collections/get/index.test-d.ts
@@ -0,0 +1,53 @@
+import { describe, expectTypeOf, it } from 'vitest';
+import { get } from '.';
+import type { Get } from '.';
+
+describe('get', () => {
+  describe('runtime return type', () => {
+    it('infer a nested object value', () => {
+      expectTypeOf(get({ user: { name: 'John' } }, 'user.name')).toEqualTypeOf<string | undefined>();
+    });
+
+    it('infer a value behind an array index', () => {
+      expectTypeOf(get({ items: [{ id: 1 }] }, 'items.0.id')).toEqualTypeOf<number | undefined>();
+    });
+
+    it('infer an array element', () => {
+      expectTypeOf(get({ items: [{ id: 1 }] }, 'items.0')).toEqualTypeOf<{ id: number } | undefined>();
+    });
+
+    it('infer the element type of a root array', () => {
+      expectTypeOf(get(['a', 'b', 'c'], '0')).toEqualTypeOf<string | undefined>();
+    });
+
+    it('narrow to undefined when descending into a primitive', () => {
+      expectTypeOf(get({ a: 1 }, 'a.b.c')).toEqualTypeOf<undefined>();
+    });
+
+    it('narrow to undefined for a missing key', () => {
+      expectTypeOf(get({ user: { name: 'John' } }, 'user.age')).toEqualTypeOf<undefined>();
+    });
+  });
+
+  describe('Get', () => {
+    it('resolve a simple object path', () => {
+      expectTypeOf<Get<{ user: { name: string } }, 'user.name'>>().toEqualTypeOf<string>();
+    });
+
+    it('resolve a path through an array index (general arrays widen with undefined)', () => {
+      expectTypeOf<Get<{ list: number[] }, 'list.0'>>().toEqualTypeOf<number | undefined>();
+    });
+
+    it('resolve an exact element type from a tuple', () => {
+      expectTypeOf<Get<{ pair: [string, number] }, 'pair.1'>>().toEqualTypeOf<number>();
+    });
+
+    it('resolve a deeply nested path', () => {
+      expectTypeOf<Get<{ a: { b: { c: boolean } } }, 'a.b.c'>>().toEqualTypeOf<boolean>();
+    });
+
+    it('resolve to never for a missing key', () => {
+      expectTypeOf<Get<{ a: number }, 'b'>>().toEqualTypeOf<never>();
+    });
+  });
+});
diff --git a/core/stdlib/src/collections/get/index.test.ts b/core/stdlib/src/collections/get/index.test.ts
new file mode 100644
index 0000000..012c72e
--- /dev/null
+++ b/core/stdlib/src/collections/get/index.test.ts
@@ -0,0 +1,61 @@
+import { describe, expect, it } from 'vitest';
+import { get } from '.';
+
+describe('get', () => {
+  it('read a top-level property', () => {
+    expect(get({ name: 'John' }, 'name')).toBe('John');
+  });
+
+  it('read a nested object property', () => {
+    expect(get({ user: { name: 'John' } }, 'user.name')).toBe('John');
+  });
+
+  it('read a value through an array index', () => {
+    expect(get({ items: [{ id: 1 }, { id: 2 }] }, 'items.1.id')).toBe(2);
+  });
+
+  it('read deeply nested values', () => {
+    const source = { a: { b: { c: { d: 42 } } } };
+
+    expect(get(source, 'a.b.c.d')).toBe(42);
+  });
+
+  it('return undefined for a missing leaf', () => {
+    expect(get({ user: { name: 'John' } }, 'user.age')).toBeUndefined();
+  });
+
+  it('return undefined when traversing through a missing branch', () => {
+    expect(get({ a: 1 }, 'a.b.c')).toBeUndefined();
+  });
+
+  it('return undefined when traversing through null/undefined', () => {
+    expect(get({ user: null }, 'user.name')).toBeUndefined();
+    expect(get({ user: undefined }, 'user.name')).toBeUndefined();
+  });
+
+  it('preserve falsy values', () => {
+    expect(get({ count: 0 }, 'count')).toBe(0);
+    expect(get({ flag: false }, 'flag')).toBe(false);
+    expect(get({ value: '' }, 'value')).toBe('');
+  });
+
+  it('work on arrays as the root collection', () => {
+    expect(get(['a', 'b', 'c'], '2')).toBe('c');
+  });
+
+  it('return the object itself for an empty path', () => {
+    const obj = { a: 1 };
+
+    expect(get(obj, '')).toBeUndefined();
+  });
+
+  it('resolve own properties (inherited keys are reachable via the prototype chain)', () => {
+    const proto = { inherited: 'from-proto' };
+    const obj = Object.create(proto) as { inherited: string; own?: number };
+    obj.own = 1;
+
+    expect(get(obj, 'own')).toBe(1);
+    // documents current behavior: bracket access does walk the prototype chain
+    expect(get(obj, 'inherited')).toBe('from-proto');
+  });
+});
diff --git a/core/stdlib/src/collections/get/index.ts b/core/stdlib/src/collections/get/index.ts
index e5bc56c..a222f6b 100644
--- a/core/stdlib/src/collections/get/index.ts
+++ b/core/stdlib/src/collections/get/index.ts
@@ -1,14 +1,14 @@
 import type { Collection, Path } from '../../types';
 
-export type ExtractFromObject<O extends Record<PropertyKey, unknown>, K> =
-  K extends keyof O
+export type ExtractFromObject<O extends Record<PropertyKey, unknown>, K>
+  = K extends keyof O
     ? O[K]
     : K extends keyof NonNullable<O>
       ? NonNullable<O>[K]
       : never;
 
-export type ExtractFromArray<A extends readonly any[], K> =
-  any[] extends A
+export type ExtractFromArray<A extends readonly any[], K>
+  = any[] extends A
     ? A extends ReadonlyArray<infer T>
       ? T | undefined
       : undefined
@@ -16,19 +16,51 @@ export type ExtractFromArray<A extends readonly any[], K> =
       ? A[K]
       : undefined;
 
-export type ExtractFromCollection<O, K> =
-  K extends []
-  ? O
-  : K extends [infer Key, ...infer Rest]
-    ? O extends Record<PropertyKey, unknown>
-      ? ExtractFromCollection<ExtractFromObject<O, Key>, Rest>
-      : O extends readonly any[]
-        ? ExtractFromCollection<ExtractFromArray<O, Key>, Rest>
-        : never
-    : never;
+export type ExtractFromCollection<O, K>
+  = K extends []
+    ? O
+    : K extends [infer Key, ...infer Rest]
+      ? O extends Record<PropertyKey, unknown>
+        ? ExtractFromCollection<ExtractFromObject<O, Key>, Rest>
+        : O extends readonly any[]
+          ? ExtractFromCollection<ExtractFromArray<O, Key>, Rest>
+          : never
+      : never;
 
-type Get<O, K> = ExtractFromCollection<O, Path<K>>;
+export type Get<O, K> = ExtractFromCollection<O, Path<K>>;
 
-export function get<O extends Collection, K extends string>(obj: O, path: K) {
-  return path.split('.').reduce((acc, key) => (acc as any)?.[key], obj) as Get<O, K> | undefined;
-}
\ No newline at end of file
+/**
+ * @name get
+ * @category Collections
+ * @description Safely read a deeply nested value from a collection by a dot-separated path
+ *
+ * @param {Collection} obj - The source object or array
+ * @param {string} path - Dot-separated path, e.g. `'user.addresses.0.street'`
+ * @returns {Get<O, K> | undefined} The resolved value, or `undefined` if any segment is missing
+ *
+ * @example
+ * get({ user: { name: 'John' } }, 'user.name'); // 'John'
+ * get({ items: [{ id: 1 }] }, 'items.0.id'); // 1
+ * get({ a: 1 }, 'a.b.c'); // undefined
+ *
+ * @since 0.0.4
+ */
+export function get<O extends Collection, K extends string>(obj: O, path: K): Get<O, K> | undefined {
+  let value: any = obj;
+  let start = 0;
+
+  // Walk the path without allocating an intermediate array of segments.
+  for (let i = 0, len = path.length; i <= len; i++) {
+    // Split on '.' (char code 46) or the end of the string.
+    if (i !== len && path.charCodeAt(i) !== 46)
+      continue;
+
+    if (value === null || value === undefined)
+      return undefined;
+
+    value = value[path.slice(start, i)];
+    start = i + 1;
+  }
+
+  return value;
+}
diff --git a/core/stdlib/src/collections/index.ts b/core/stdlib/src/collections/index.ts
index cab6a69..b990690 100644
--- a/core/stdlib/src/collections/index.ts
+++ b/core/stdlib/src/collections/index.ts
@@ -1 +1,2 @@
-export * from './get';
\ No newline at end of file
+export * from './get';
+export * from './set';
diff --git a/core/stdlib/src/collections/set/index.test.ts b/core/stdlib/src/collections/set/index.test.ts
new file mode 100644
index 0000000..766a27c
--- /dev/null
+++ b/core/stdlib/src/collections/set/index.test.ts
@@ -0,0 +1,47 @@
+import { describe, expect, it } from 'vitest';
+import { set } from '.';
+
+describe('set', () => {
+  it('set a top-level property', () => {
+    expect(set({ name: 'John' }, 'name', 'Jane')).toEqual({ name: 'Jane' });
+  });
+
+  it('set a nested object property', () => {
+    expect(set({ user: { name: 'John' } }, 'user.name', 'Jane')).toEqual({ user: { name: 'Jane' } });
+  });
+
+  it('set through an array index', () => {
+    expect(set({ items: [{ id: 1 }, { id: 2 }] }, 'items.1.id', 9)).toEqual({ items: [{ id: 1 }, { id: 9 }] });
+  });
+
+  it('create missing object intermediates', () => {
+    expect(set({}, 'a.b.c', 42)).toEqual({ a: { b: { c: 42 } } });
+  });
+
+  it('create an array when the next segment is numeric', () => {
+    const result = set({} as Record<string, unknown>, 'items.0.id', 1);
+    expect(Array.isArray((result as any).items)).toBe(true);
+    expect(result).toEqual({ items: [{ id: 1 }] });
+  });
+
+  it('overwrite a non-object intermediate', () => {
+    expect(set({ a: 1 } as Record<string, unknown>, 'a.b', 2)).toEqual({ a: { b: 2 } });
+  });
+
+  it('mutate and return the same reference', () => {
+    const source = { a: 1 };
+    expect(set(source, 'a', 2)).toBe(source);
+    expect(source.a).toBe(2);
+  });
+
+  it('preserve falsy values', () => {
+    expect(set({}, 'count', 0)).toEqual({ count: 0 });
+    expect(set({}, 'flag', false)).toEqual({ flag: false });
+  });
+
+  it('return the object unchanged for an empty path', () => {
+    const source = { a: 1 };
+    expect(set(source, '', 2)).toBe(source);
+    expect(source).toEqual({ a: 1 });
+  });
+});
diff --git a/core/stdlib/src/collections/set/index.ts b/core/stdlib/src/collections/set/index.ts
new file mode 100644
index 0000000..d2a7f61
--- /dev/null
+++ b/core/stdlib/src/collections/set/index.ts
@@ -0,0 +1,47 @@
+import type { Collection } from '../../types';
+
+// Hoisted so it is compiled once rather than re-created on each `set` call.
+const NUMERIC_SEGMENT = /^\d+$/;
+
+/**
+ * @name set
+ * @category Collections
+ * @description Write a deeply nested value into a collection by a dot-separated path,
+ * creating any missing intermediate containers along the way. A numeric next segment
+ * creates an array, otherwise an object. Mutates and returns the original collection.
+ *
+ * @param {Collection} obj - The target object or array (mutated in place)
+ * @param {string} path - Dot-separated path, e.g. `'user.addresses.0.street'`
+ * @param {unknown} value - The value to assign at the path
+ * @returns {Collection} The same `obj`, for chaining
+ *
+ * @example
+ * set({ user: { name: 'John' } }, 'user.name', 'Jane'); // { user: { name: 'Jane' } }
+ * set({}, 'items.0.id', 1); // { items: [{ id: 1 }] }
+ *
+ * @since 0.0.10
+ */
+export function set<O extends Collection>(obj: O, path: string, value: unknown): O {
+  if (path === '')
+    return obj;
+
+  const keys = path.split('.');
+  const lastKey = keys[keys.length - 1]!;
+  let current: any = obj;
+
+  for (let i = 0; i < keys.length - 1; i++) {
+    const key = keys[i]!;
+    const next = current[key];
+
+    // Create the missing intermediate: an array when the next segment is a numeric
+    // index, otherwise a plain object.
+    if (next === null || typeof next !== 'object')
+      current[key] = NUMERIC_SEGMENT.test(keys[i + 1]!) ? [] : {};
+
+    current = current[key];
+  }
+
+  current[lastKey] = value;
+
+  return obj;
+}
diff --git a/core/stdlib/src/comparators/index.ts b/core/stdlib/src/comparators/index.ts
new file mode 100644
index 0000000..016dfbe
--- /dev/null
+++ b/core/stdlib/src/comparators/index.ts
@@ -0,0 +1 @@
+export * from './isEqual';
diff --git a/core/stdlib/src/comparators/isEqual/index.test.ts b/core/stdlib/src/comparators/isEqual/index.test.ts
new file mode 100644
index 0000000..a03d343
--- /dev/null
+++ b/core/stdlib/src/comparators/isEqual/index.test.ts
@@ -0,0 +1,57 @@
+import { describe, expect, it } from 'vitest';
+import { isEqual } from '.';
+
+describe('isEqual', () => {
+  it('compare primitives', () => {
+    expect(isEqual(1, 1)).toBe(true);
+    expect(isEqual('a', 'a')).toBe(true);
+    expect(isEqual(1, 2)).toBe(false);
+    expect(isEqual(1, '1')).toBe(false);
+    expect(isEqual(null, null)).toBe(true);
+    expect(isEqual(null, undefined)).toBe(false);
+  });
+
+  it('treat NaN as equal to NaN', () => {
+    expect(isEqual(Number.NaN, Number.NaN)).toBe(true);
+    expect(isEqual(Number.NaN, 1)).toBe(false);
+  });
+
+  it('compare arrays deeply', () => {
+    expect(isEqual([1, 2, 3], [1, 2, 3])).toBe(true);
+    expect(isEqual([1, [2, 3]], [1, [2, 3]])).toBe(true);
+    expect(isEqual([1, 2], [1, 2, 3])).toBe(false);
+    expect(isEqual([1, { a: 2 }], [1, { a: 3 }])).toBe(false);
+  });
+
+  it('compare plain objects deeply', () => {
+    expect(isEqual({ a: 1, b: { c: 2 } }, { a: 1, b: { c: 2 } })).toBe(true);
+    expect(isEqual({ a: 1 }, { a: 1, b: 2 })).toBe(false);
+    expect(isEqual({ a: 1 }, { a: 2 })).toBe(false);
+  });
+
+  it('compare dates and regexps', () => {
+    expect(isEqual(new Date(0), new Date(0))).toBe(true);
+    expect(isEqual(new Date(0), new Date(1))).toBe(false);
+    expect(isEqual(/a/gi, /a/gi)).toBe(true);
+    expect(isEqual(/a/g, /a/i)).toBe(false);
+  });
+
+  it('compare Map and Set', () => {
+    expect(isEqual(new Map([['a', 1]]), new Map([['a', 1]]))).toBe(true);
+    expect(isEqual(new Map([['a', 1]]), new Map([['a', 2]]))).toBe(false);
+    expect(isEqual(new Set([1, 2]), new Set([1, 2]))).toBe(true);
+    expect(isEqual(new Set([1, 2]), new Set([1, 3]))).toBe(false);
+  });
+
+  it('distinguish arrays from objects', () => {
+    expect(isEqual([], {})).toBe(false);
+  });
+
+  it('handle circular references', () => {
+    const a: any = { name: 'a' };
+    a.self = a;
+    const b: any = { name: 'a' };
+    b.self = b;
+    expect(isEqual(a, b)).toBe(true);
+  });
+});
diff --git a/core/stdlib/src/comparators/isEqual/index.ts b/core/stdlib/src/comparators/isEqual/index.ts
new file mode 100644
index 0000000..3d9256f
--- /dev/null
+++ b/core/stdlib/src/comparators/isEqual/index.ts
@@ -0,0 +1,95 @@
+function equals(a: any, b: any, seen: WeakMap<object, unknown>): boolean {
+  if (a === b)
+    return true;
+
+  // NaN is the only value not equal to itself; treat NaN === NaN.
+  if (typeof a === 'number' && typeof b === 'number')
+    return Number.isNaN(a) && Number.isNaN(b);
+
+  if (a === null || b === null || typeof a !== 'object' || typeof b !== 'object')
+    return false;
+
+  // Cycle guard: if we have already paired `a`, it must pair with the same `b`.
+  const paired = seen.get(a);
+  if (paired !== undefined)
+    return paired === b;
+  seen.set(a, b);
+
+  if (a instanceof Date || b instanceof Date)
+    return a instanceof Date && b instanceof Date && a.getTime() === b.getTime();
+
+  if (a instanceof RegExp || b instanceof RegExp)
+    return a instanceof RegExp && b instanceof RegExp && a.source === b.source && a.flags === b.flags;
+
+  const aIsArray = Array.isArray(a);
+  const bIsArray = Array.isArray(b);
+  if (aIsArray || bIsArray) {
+    if (!aIsArray || !bIsArray || a.length !== b.length)
+      return false;
+
+    for (let i = 0; i < a.length; i++) {
+      if (!equals(a[i], b[i], seen))
+        return false;
+    }
+
+    return true;
+  }
+
+  if (a instanceof Map || b instanceof Map) {
+    if (!(a instanceof Map) || !(b instanceof Map) || a.size !== b.size)
+      return false;
+
+    for (const [key, value] of a) {
+      if (!b.has(key) || !equals(value, b.get(key), seen))
+        return false;
+    }
+
+    return true;
+  }
+
+  if (a instanceof Set || b instanceof Set) {
+    if (!(a instanceof Set) || !(b instanceof Set) || a.size !== b.size)
+      return false;
+
+    for (const value of a) {
+      if (!b.has(value))
+        return false;
+    }
+
+    return true;
+  }
+
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length)
+    return false;
+
+  for (const key of aKeys) {
+    if (!Object.prototype.hasOwnProperty.call(b, key) || !equals(a[key], b[key], seen))
+      return false;
+  }
+
+  return true;
+}
+
+/**
+ * @name isEqual
+ * @category Comparators
+ * @description Deep structural equality between two values. Handles primitives
+ * (NaN-aware), `Date`, `RegExp`, arrays, `Map`, `Set`, and plain objects, and is
+ * safe against circular references. `Set` membership is compared shallowly.
+ *
+ * @param {unknown} a - The first value
+ * @param {unknown} b - The second value
+ * @returns {boolean} `true` if the values are deeply equal
+ *
+ * @example
+ * isEqual({ a: [1, 2] }, { a: [1, 2] }); // true
+ * isEqual([1, { b: 2 }], [1, { b: 3 }]); // false
+ * isEqual(Number.NaN, Number.NaN); // true
+ *
+ * @since 0.0.10
+ */
+export function isEqual(a: unknown, b: unknown): boolean {
+  return equals(a, b, new WeakMap());
+}
diff --git a/core/stdlib/src/functions/compose/index.test-d.ts b/core/stdlib/src/functions/compose/index.test-d.ts
new file mode 100644
index 0000000..9d47769
--- /dev/null
+++ b/core/stdlib/src/functions/compose/index.test-d.ts
@@ -0,0 +1,18 @@
+import { describe, expectTypeOf, it } from 'vitest';
+import { compose } from '.';
+
+describe('compose', () => {
+  it('infers the final return type through the chain', () => {
+    const fn = compose((s: string) => s.length > 0, (n: number) => `${n}`, (n: number) => n + 1);
+
+    expectTypeOf(fn).parameters.toEqualTypeOf<[number]>();
+    expectTypeOf(fn).returns.toEqualTypeOf<boolean>();
+  });
+
+  it('keeps the variadic parameters of the last function', () => {
+    const fn = compose((n: number) => `${n}`, (a: number, b: number) => a + b);
+
+    expectTypeOf(fn).parameters.toEqualTypeOf<[number, number]>();
+    expectTypeOf(fn).returns.toEqualTypeOf<string>();
+  });
+});
diff --git a/core/stdlib/src/functions/compose/index.test.ts b/core/stdlib/src/functions/compose/index.test.ts
new file mode 100644
index 0000000..5f0683d
--- /dev/null
+++ b/core/stdlib/src/functions/compose/index.test.ts
@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'vitest';
+import { compose } from '.';
+
+describe('compose', () => {
+  it('apply functions right-to-left', () => {
+    const calc = compose((n: number) => `= ${n}`, (n: number) => n * 2, (n: number) => n + 1);
+
+    expect(calc(3)).toBe('= 8');
+  });
+
+  it('pass multiple arguments to the last function', () => {
+    const calc = compose((n: number) => n * 10, (a: number, b: number) => a + b);
+
+    expect(calc(2, 3)).toBe(50);
+  });
+
+  it('support a single function', () => {
+    const inc = compose((n: number) => n + 1);
+
+    expect(inc(1)).toBe(2);
+  });
+
+  it('mirror pipe with reversed arguments', () => {
+    const f = (n: number) => n + 1;
+    const g = (n: number) => n * 2;
+
+    expect(compose(g, f)(3)).toBe(8);
+  });
+
+  it('forward this to the right-most function', () => {
+    const calc = compose((n: number) => n * 2, function (this: { base: number }, n: number) {
+      return this.base + n;
+    });
+
+    expect(calc.call({ base: 10 }, 5)).toBe(30);
+  });
+
+  it('return the input unchanged with no functions', () => {
+    expect((compose as unknown as (...fns: never[]) => (x: number) => number)()(42)).toBe(42);
+  });
+});
diff --git a/core/stdlib/src/functions/compose/index.ts b/core/stdlib/src/functions/compose/index.ts
new file mode 100644
index 0000000..d449744
--- /dev/null
+++ b/core/stdlib/src/functions/compose/index.ts
@@ -0,0 +1,38 @@
+import type { AnyFunction } from '../../types';
+
+/**
+ * @name compose
+ * @category Functions
+ * @description Composes functions right-to-left: `compose(f, g)(x)` is `f(g(x))`
+ *
+ * @param {...Function} fns - The functions to compose; the last may take any number of arguments
+ * @returns {Function} A function that runs the input through every function from last to first
+ *
+ * @example
+ * const calc = compose((n: number) => `= ${n}`, (n: number) => n * 2, (n: number) => n + 1);
+ * calc(3); // '= 8'
+ *
+ * @since 0.0.10
+ */
+export function compose<A extends any[], B>(ab: (...a: A) => B): (...a: A) => B;
+export function compose<A extends any[], B, C>(bc: (b: B) => C, ab: (...a: A) => B): (...a: A) => C;
+export function compose<A extends any[], B, C, D>(cd: (c: C) => D, bc: (b: B) => C, ab: (...a: A) => B): (...a: A) => D;
+export function compose<A extends any[], B, C, D, E>(de: (d: D) => E, cd: (c: C) => D, bc: (b: B) => C, ab: (...a: A) => B): (...a: A) => E;
+export function compose<A extends any[], B, C, D, E, F>(ef: (e: E) => F, de: (d: D) => E, cd: (c: C) => D, bc: (b: B) => C, ab: (...a: A) => B): (...a: A) => F;
+export function compose<A extends any[], B, C, D, E, F, G>(fg: (f: F) => G, ef: (e: E) => F, de: (d: D) => E, cd: (c: C) => D, bc: (b: B) => C, ab: (...a: A) => B): (...a: A) => G;
+export function compose<A extends any[], B, C, D, E, F, G, H>(gh: (g: G) => H, fg: (f: F) => G, ef: (e: E) => F, de: (d: D) => E, cd: (c: C) => D, bc: (b: B) => C, ab: (...a: A) => B): (...a: A) => H;
+export function compose(...fns: AnyFunction[]): AnyFunction {
+  return function (this: unknown, ...args: any[]) {
+    const last = fns.length - 1;
+
+    if (last < 0)
+      return args[0];
+
+    let result = fns[last]!.apply(this, args);
+
+    for (let i = last - 1; i >= 0; i--)
+      result = fns[i]!.call(this, result);
+
+    return result;
+  };
+}
diff --git a/core/stdlib/src/functions/debounce/index.test.ts b/core/stdlib/src/functions/debounce/index.test.ts
new file mode 100644
index 0000000..713ccea
--- /dev/null
+++ b/core/stdlib/src/functions/debounce/index.test.ts
@@ -0,0 +1,179 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { debounce } from '.';
+
+describe('debounce', () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+
+  it('delay invocation until wait elapses since the last call', () => {
+    const spy = vi.fn();
+    const debounced = debounce(spy, 100);
+
+    debounced();
+    debounced();
+    debounced();
+    expect(spy).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(100);
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  it('reset the timer on every call', () => {
+    const spy = vi.fn();
+    const debounced = debounce(spy, 100);
+
+    debounced();
+    vi.advanceTimersByTime(60);
+    debounced();
+    vi.advanceTimersByTime(60);
+    expect(spy).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(40);
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  it('invoke on the leading edge', () => {
+    const spy = vi.fn();
+    const debounced = debounce(spy, 100, { leading: true, trailing: false });
+
+    debounced();
+    expect(spy).toHaveBeenCalledTimes(1);
+
+    debounced();
+    debounced();
+    expect(spy).toHaveBeenCalledTimes(1);
+
+    vi.advanceTimersByTime(100);
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  it('forward the latest arguments and this', () => {
+    const spy = vi.fn(function (this: { base: number }, n: number) {
+      return this.base + n;
+    });
+    const debounced = debounce(spy, 100);
+
+    debounced.call({ base: 10 }, 1);
+    debounced.call({ base: 10 }, 2);
+    vi.advanceTimersByTime(100);
+
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenLastCalledWith(2);
+    expect(spy.mock.results[0]!.value).toBe(12);
+  });
+
+  it('cancel a pending invocation', () => {
+    const spy = vi.fn();
+    const debounced = debounce(spy, 100);
+
+    debounced();
+    expect(debounced.pending()).toBe(true);
+
+    debounced.cancel();
+    expect(debounced.pending()).toBe(false);
+
+    vi.advanceTimersByTime(100);
+    expect(spy).not.toHaveBeenCalled();
+  });
+
+  it('flush a pending invocation immediately and return its result', () => {
+    const spy = vi.fn((n: number) => n * 2);
+    const debounced = debounce(spy, 100);
+
+    debounced(5);
+    expect(debounced.flush()).toBe(10);
+    expect(spy).toHaveBeenCalledTimes(1);
+
+    vi.advanceTimersByTime(100);
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  it('resolves the wait from a getter on each call', () => {
+    const spy = vi.fn();
+    let wait = 100;
+    const debounced = debounce(spy, () => wait);
+
+    debounced();
+    vi.advanceTimersByTime(100);
+    expect(spy).toHaveBeenCalledTimes(1);
+
+    wait = 200;
+    debounced();
+    vi.advanceTimersByTime(100);
+    expect(spy).toHaveBeenCalledTimes(1); // not yet, window is now 200
+    vi.advanceTimersByTime(100);
+    expect(spy).toHaveBeenCalledTimes(2);
+  });
+
+  it('forces invocation after maxWait under sustained calls', () => {
+    const spy = vi.fn();
+    const debounced = debounce(spy, 100, { maxWait: 250 });
+
+    // Keep resetting the 100ms timer every 80ms; without maxWait it would never fire.
+    debounced();
+    vi.advanceTimersByTime(80);
+    debounced();
+    vi.advanceTimersByTime(80);
+    debounced();
+    vi.advanceTimersByTime(80);
+    expect(spy).not.toHaveBeenCalled();
+
+    // 240ms elapsed; at 250ms the maxWait fires.
+    vi.advanceTimersByTime(10);
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  it('pending() is false after a maxWait-forced invocation', () => {
+    const debounced = debounce(vi.fn(), 100, { maxWait: 150 });
+    debounced();
+    vi.advanceTimersByTime(150);
+    expect(debounced.pending()).toBe(false);
+  });
+
+  it('leading + trailing fires on both edges for a burst but once for a lone call', () => {
+    const spy = vi.fn();
+    const debounced = debounce(spy, 100, { leading: true, trailing: true });
+
+    debounced();
+    expect(spy).toHaveBeenCalledTimes(1); // leading
+    debounced();
+    vi.advanceTimersByTime(100);
+    expect(spy).toHaveBeenCalledTimes(2); // trailing
+
+    spy.mockClear();
+    debounced(); // isolated call
+    vi.advanceTimersByTime(100);
+    expect(spy).toHaveBeenCalledTimes(1); // leading only, no trailing double-fire
+  });
+
+  it('re-arm after a trailing fire', () => {
+    const spy = vi.fn();
+    const debounced = debounce(spy, 100);
+
+    debounced();
+    vi.advanceTimersByTime(100);
+    expect(spy).toHaveBeenCalledTimes(1);
+
+    debounced();
+    vi.advanceTimersByTime(100);
+    expect(spy).toHaveBeenCalledTimes(2);
+  });
+
+  it('flush() and cancel() are no-ops when nothing is pending', () => {
+    const spy = vi.fn();
+    const debounced = debounce(spy, 100);
+
+    expect(debounced.flush()).toBeUndefined();
+    debounced.cancel();
+
+    expect(spy).not.toHaveBeenCalled();
+    expect(debounced.pending()).toBe(false);
+  });
+
+  it('pending() is false during the window when trailing is disabled', () => {
+    const debounced = debounce(vi.fn(), 100, { leading: true, trailing: false });
+
+    debounced();
+    expect(debounced.pending()).toBe(false);
+  });
+});
diff --git a/core/stdlib/src/functions/debounce/index.ts b/core/stdlib/src/functions/debounce/index.ts
new file mode 100644
index 0000000..d16f694
--- /dev/null
+++ b/core/stdlib/src/functions/debounce/index.ts
@@ -0,0 +1,130 @@
+import type { AnyFunction } from '../../types';
+
+export interface DebounceOptions {
+  /** Invoke on the leading edge of the timeout. Default `false`. */
+  leading?: boolean;
+  /** Invoke on the trailing edge of the timeout. Default `true`. */
+  trailing?: boolean;
+  /**
+   * The maximum time `fn` is allowed to be delayed before it is forcibly
+   * invoked, even while calls keep arriving. Accepts a number or a getter
+   * resolved lazily. When omitted there is no upper bound.
+   */
+  maxWait?: number | (() => number);
+}
+
+export interface DebouncedFunction<T extends AnyFunction> {
+  (this: ThisParameterType<T>, ...args: Parameters<T>): void;
+  /** Cancel a pending invocation without calling the function. */
+  cancel: () => void;
+  /** Immediately invoke a pending call (if any) and return its result. */
+  flush: () => ReturnType<T> | undefined;
+  /** Whether an invocation is currently scheduled. */
+  pending: () => boolean;
+}
+
+/**
+ * @name debounce
+ * @category Functions
+ * @description Delays invoking a function until `wait` ms have elapsed since the last call
+ *
+ * @param {Function} fn - The function to debounce
+ * @param {number | (() => number)} wait - Milliseconds to wait, or a getter resolved lazily on each call (useful for reactive delays)
+ * @param {DebounceOptions} [options] - Leading/trailing edge behavior and `maxWait`
+ * @returns {DebouncedFunction} The debounced function with `cancel()`, `flush()` and `pending()`
+ *
+ * @example
+ * const onResize = debounce(() => layout(), 200);
+ * window.addEventListener('resize', onResize);
+ * onResize.cancel();
+ *
+ * @example
+ * // Reactive delay + a guaranteed call at least every 1000ms under sustained input
+ * const save = debounce(persist, () => delayRef.value, { maxWait: 1000 });
+ *
+ * @since 0.0.10
+ */
+export function debounce<T extends AnyFunction>(
+  fn: T,
+  wait: number | (() => number),
+  options: DebounceOptions = {},
+): DebouncedFunction<T> {
+  const { leading = false, trailing = true, maxWait } = options;
+  const resolveWait = typeof wait === 'function' ? wait : () => wait;
+  const resolveMaxWait = maxWait === undefined
+    ? undefined
+    : (typeof maxWait === 'function' ? maxWait : () => maxWait);
+
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  let maxTimer: ReturnType<typeof setTimeout> | undefined;
+  let pending: (() => ReturnType<T>) | undefined;
+  let result: ReturnType<T> | undefined;
+
+  function invoke() {
+    if (pending === undefined)
+      return;
+
+    result = pending();
+    pending = undefined;
+  }
+
+  function clearTimers() {
+    if (timer !== undefined) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+
+    if (maxTimer !== undefined) {
+      clearTimeout(maxTimer);
+      maxTimer = undefined;
+    }
+  }
+
+  const debounced = function (this: ThisParameterType<T>, ...args: Parameters<T>) {
+    // The arrow captures the call-time `this` lexically, no aliasing needed.
+    pending = () => fn.apply(this, args) as ReturnType<T>;
+
+    const callLeading = leading && timer === undefined && maxTimer === undefined;
+
+    if (timer !== undefined)
+      clearTimeout(timer);
+
+    timer = setTimeout(() => {
+      clearTimers();
+
+      if (trailing)
+        invoke();
+    }, resolveWait());
+
+    // maxWait: guarantee an invocation within maxWait of the burst's first call.
+    if (resolveMaxWait !== undefined && maxTimer === undefined) {
+      maxTimer = setTimeout(() => {
+        clearTimers();
+        invoke();
+      }, resolveMaxWait());
+    }
+
+    if (callLeading)
+      invoke();
+  } as DebouncedFunction<T>;
+
+  debounced.cancel = () => {
+    clearTimers();
+    pending = undefined;
+  };
+
+  debounced.flush = () => {
+    if (timer !== undefined || maxTimer !== undefined) {
+      clearTimers();
+      invoke();
+    }
+
+    return result;
+  };
+
+  // True only when an invocation will actually occur: a maxWait flush is always honored,
+  // but the trailing-edge timer fires fn only when `trailing` is enabled.
+  debounced.pending = () => maxTimer !== undefined || (trailing && timer !== undefined);
+
+  return debounced;
+}
diff --git a/core/stdlib/src/functions/index.ts b/core/stdlib/src/functions/index.ts
new file mode 100644
index 0000000..4f82f6f
--- /dev/null
+++ b/core/stdlib/src/functions/index.ts
@@ -0,0 +1,6 @@
+export * from './compose';
+export * from './debounce';
+export * from './memoize';
+export * from './once';
+export * from './pipe';
+export * from './throttle';
diff --git a/core/stdlib/src/functions/memoize/index.test.ts b/core/stdlib/src/functions/memoize/index.test.ts
new file mode 100644
index 0000000..77afee1
--- /dev/null
+++ b/core/stdlib/src/functions/memoize/index.test.ts
@@ -0,0 +1,71 @@
+import { describe, expect, it, vi } from 'vitest';
+import { memoize } from '.';
+
+describe('memoize', () => {
+  it('cache results by the first argument', () => {
+    const spy = vi.fn((n: number) => n * 2);
+    const memoized = memoize(spy);
+
+    expect(memoized(2)).toBe(4);
+    expect(memoized(2)).toBe(4);
+    expect(memoized(3)).toBe(6);
+    expect(spy).toHaveBeenCalledTimes(2);
+  });
+
+  it('use a custom resolver for the cache key', () => {
+    const spy = vi.fn((a: number, b: number) => a + b);
+    const memoized = memoize(spy, (a, b) => `${a},${b}`);
+
+    expect(memoized(1, 2)).toBe(3);
+    expect(memoized(1, 2)).toBe(3);
+    expect(memoized(2, 1)).toBe(3);
+    expect(spy).toHaveBeenCalledTimes(2);
+  });
+
+  it('cache falsy results', () => {
+    const spy = vi.fn((_n: number) => 0);
+    const memoized = memoize(spy);
+
+    expect(memoized(1)).toBe(0);
+    expect(memoized(1)).toBe(0);
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  it('expose the cache and a clear() method', () => {
+    const memoized = memoize((n: number) => n * 2);
+
+    memoized(2);
+    expect(memoized.cache.size).toBe(1);
+    expect(memoized.cache.get(2)).toBe(4);
+
+    memoized.clear();
+    expect(memoized.cache.size).toBe(0);
+  });
+
+  it('preserve this', () => {
+    const memoized = memoize(function (this: { base: number }, n: number) {
+      return this.base + n;
+    });
+
+    expect(memoized.call({ base: 10 }, 5)).toBe(15);
+  });
+
+  it('key only on the first argument by default (documented multi-arg footgun)', () => {
+    const spy = vi.fn((a: number, b: number) => a + b);
+    const memoized = memoize(spy);
+
+    expect(memoized(1, 2)).toBe(3);
+    expect(memoized(1, 9)).toBe(3); // stale — collides on first arg
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  it('cache an undefined return value (does not recompute)', () => {
+    const spy = vi.fn((_n: number) => undefined);
+    const memoized = memoize(spy);
+
+    memoized(1);
+    memoized(1);
+
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/core/stdlib/src/functions/memoize/index.ts b/core/stdlib/src/functions/memoize/index.ts
new file mode 100644
index 0000000..6e7a0fd
--- /dev/null
+++ b/core/stdlib/src/functions/memoize/index.ts
@@ -0,0 +1,50 @@
+import type { AnyFunction } from '../../types';
+
+export type MemoizeResolver<T extends AnyFunction> = (...args: Parameters<T>) => unknown;
+
+export type MemoizedFunction<T extends AnyFunction> = T & {
+  /** The underlying cache, keyed by the resolver (first argument by default). */
+  cache: Map<unknown, ReturnType<T>>;
+  /** Drop all cached results. */
+  clear: () => void;
+};
+
+/**
+ * @name memoize
+ * @category Functions
+ * @description Caches the result of a function by its arguments
+ *
+ * @param {Function} fn - The function to memoize
+ * @param {Function} [resolver] - Maps the arguments to a cache key; defaults to the first argument
+ * @returns {MemoizedFunction} The memoized function, exposing its `cache` and a `clear()` method
+ *
+ * @example
+ * const slow = memoize((n: number) => expensive(n));
+ * slow(2); // computed
+ * slow(2); // cached
+ *
+ * @example
+ * const sum = memoize((a: number, b: number) => a + b, (a, b) => `${a},${b}`);
+ *
+ * @since 0.0.10
+ */
+export function memoize<T extends AnyFunction>(fn: T, resolver?: MemoizeResolver<T>): MemoizedFunction<T> {
+  const cache = new Map<unknown, ReturnType<T>>();
+
+  const memoized = function (this: unknown, ...args: Parameters<T>): ReturnType<T> {
+    const key = resolver ? resolver(...args) : args[0];
+
+    if (cache.has(key))
+      return cache.get(key)!;
+
+    const result = fn.apply(this, args) as ReturnType<T>;
+    cache.set(key, result);
+
+    return result;
+  } as MemoizedFunction<T>;
+
+  memoized.cache = cache;
+  memoized.clear = () => cache.clear();
+
+  return memoized;
+}
diff --git a/core/stdlib/src/functions/once/index.test.ts b/core/stdlib/src/functions/once/index.test.ts
new file mode 100644
index 0000000..b8c3ecb
--- /dev/null
+++ b/core/stdlib/src/functions/once/index.test.ts
@@ -0,0 +1,55 @@
+import { describe, expect, it, vi } from 'vitest';
+import { once } from '.';
+
+describe('once', () => {
+  it('invoke the original function only once', () => {
+    const spy = vi.fn(() => 42);
+    const onced = once(spy);
+
+    expect(onced()).toBe(42);
+    expect(onced()).toBe(42);
+    expect(onced()).toBe(42);
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  it('forward arguments and this from the first call', () => {
+    const onced = once(function (this: { base: number }, a: number, b: number) {
+      return this.base + a + b;
+    });
+
+    expect(onced.call({ base: 10 }, 1, 2)).toBe(13);
+  });
+
+  it('cache the first result even when later args differ', () => {
+    const onced = once((n: number) => n * 2);
+
+    expect(onced(2)).toBe(4);
+    expect(onced(100)).toBe(4);
+  });
+
+  it('run again after clear()', () => {
+    let count = 0;
+    const onced = once(() => ++count);
+
+    expect(onced()).toBe(1);
+    expect(onced()).toBe(1);
+
+    onced.clear();
+
+    expect(onced()).toBe(2);
+  });
+
+  it('stay retryable when the first call throws (guard armed only on success)', () => {
+    let n = 0;
+    const onced = once(() => {
+      n++;
+      if (n === 1)
+        throw new Error('first');
+      return n;
+    });
+
+    expect(() => onced()).toThrow('first');
+    expect(onced()).toBe(2);
+    expect(onced()).toBe(2);
+  });
+});
diff --git a/core/stdlib/src/functions/once/index.ts b/core/stdlib/src/functions/once/index.ts
new file mode 100644
index 0000000..5b71b64
--- /dev/null
+++ b/core/stdlib/src/functions/once/index.ts
@@ -0,0 +1,47 @@
+import type { AnyFunction } from '../../types';
+
+export type OnceFunction<T extends AnyFunction> = T & {
+  /** Reset the guard so the next call runs the original function again. */
+  clear: () => void;
+};
+
+/**
+ * @name once
+ * @category Functions
+ * @description Wraps a function so it runs at most once; subsequent calls return the first result
+ *
+ * @param {Function} fn - The function to guard
+ * @returns {OnceFunction} The guarded function with a `clear()` method to reset it
+ *
+ * @example
+ * const init = once(() => Math.random());
+ * init(); // 0.42
+ * init(); // 0.42 (cached)
+ * init.clear();
+ * init(); // 0.91 (runs again)
+ *
+ * @since 0.0.10
+ */
+export function once<T extends AnyFunction>(fn: T): OnceFunction<T> {
+  let called = false;
+  let result: ReturnType<T>;
+
+  const onced = function (this: unknown, ...args: Parameters<T>): ReturnType<T> {
+    if (!called) {
+      // Arm the guard only after a successful call, so a throwing first call stays
+      // retryable (matching memoize) instead of permanently latching `undefined`.
+      result = fn.apply(this, args);
+      called = true;
+    }
+
+    return result;
+  } as OnceFunction<T>;
+
+  onced.clear = () => {
+    called = false;
+    // Release the cached result so it (and anything it retains) can be GC'd.
+    result = undefined as ReturnType<T>;
+  };
+
+  return onced;
+}
diff --git a/core/stdlib/src/functions/pipe/index.test-d.ts b/core/stdlib/src/functions/pipe/index.test-d.ts
new file mode 100644
index 0000000..6d0db28
--- /dev/null
+++ b/core/stdlib/src/functions/pipe/index.test-d.ts
@@ -0,0 +1,24 @@
+import { describe, expectTypeOf, it } from 'vitest';
+import { pipe } from '.';
+
+describe('pipe', () => {
+  it('infers the final return type through the chain', () => {
+    const fn = pipe((n: number) => n + 1, n => `${n}`, s => s.length > 0);
+
+    expectTypeOf(fn).parameters.toEqualTypeOf<[number]>();
+    expectTypeOf(fn).returns.toEqualTypeOf<boolean>();
+  });
+
+  it('keeps the variadic parameters of the first function', () => {
+    const fn = pipe((a: number, b: number) => a + b, n => `${n}`);
+
+    expectTypeOf(fn).parameters.toEqualTypeOf<[number, number]>();
+    expectTypeOf(fn).returns.toEqualTypeOf<string>();
+  });
+
+  it('supports a single function', () => {
+    const fn = pipe((n: number) => n > 0);
+
+    expectTypeOf(fn).returns.toEqualTypeOf<boolean>();
+  });
+});
diff --git a/core/stdlib/src/functions/pipe/index.test.ts b/core/stdlib/src/functions/pipe/index.test.ts
new file mode 100644
index 0000000..ca84c3a
--- /dev/null
+++ b/core/stdlib/src/functions/pipe/index.test.ts
@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest';
+import { pipe } from '.';
+
+describe('pipe', () => {
+  it('apply functions left-to-right', () => {
+    const calc = pipe((n: number) => n + 1, n => n * 2, n => `= ${n}`);
+
+    expect(calc(3)).toBe('= 8');
+  });
+
+  it('pass multiple arguments to the first function', () => {
+    const calc = pipe((a: number, b: number) => a + b, n => n * 10);
+
+    expect(calc(2, 3)).toBe(50);
+  });
+
+  it('support a single function', () => {
+    const inc = pipe((n: number) => n + 1);
+
+    expect(inc(1)).toBe(2);
+  });
+
+  it('preserve this for the first function', () => {
+    const calc = pipe(function (this: { base: number }, n: number) {
+      return this.base + n;
+    }, n => n * 2);
+
+    expect(calc.call({ base: 10 }, 5)).toBe(30);
+  });
+
+  it('return the input unchanged with no functions', () => {
+    expect((pipe as unknown as (...fns: never[]) => (x: number) => number)()(42)).toBe(42);
+  });
+});
diff --git a/core/stdlib/src/functions/pipe/index.ts b/core/stdlib/src/functions/pipe/index.ts
new file mode 100644
index 0000000..1629b19
--- /dev/null
+++ b/core/stdlib/src/functions/pipe/index.ts
@@ -0,0 +1,36 @@
+import type { AnyFunction } from '../../types';
+
+/**
+ * @name pipe
+ * @category Functions
+ * @description Composes functions left-to-right: `pipe(f, g)(x)` is `g(f(x))`
+ *
+ * @param {...Function} fns - The functions to pipe; the first may take any number of arguments
+ * @returns {Function} A function that runs the input through every function in order
+ *
+ * @example
+ * const calc = pipe((n: number) => n + 1, n => n * 2, n => `= ${n}`);
+ * calc(3); // '= 8'
+ *
+ * @since 0.0.10
+ */
+export function pipe<A extends any[], B>(ab: (...a: A) => B): (...a: A) => B;
+export function pipe<A extends any[], B, C>(ab: (...a: A) => B, bc: (b: B) => C): (...a: A) => C;
+export function pipe<A extends any[], B, C, D>(ab: (...a: A) => B, bc: (b: B) => C, cd: (c: C) => D): (...a: A) => D;
+export function pipe<A extends any[], B, C, D, E>(ab: (...a: A) => B, bc: (b: B) => C, cd: (c: C) => D, de: (d: D) => E): (...a: A) => E;
+export function pipe<A extends any[], B, C, D, E, F>(ab: (...a: A) => B, bc: (b: B) => C, cd: (c: C) => D, de: (d: D) => E, ef: (e: E) => F): (...a: A) => F;
+export function pipe<A extends any[], B, C, D, E, F, G>(ab: (...a: A) => B, bc: (b: B) => C, cd: (c: C) => D, de: (d: D) => E, ef: (e: E) => F, fg: (f: F) => G): (...a: A) => G;
+export function pipe<A extends any[], B, C, D, E, F, G, H>(ab: (...a: A) => B, bc: (b: B) => C, cd: (c: C) => D, de: (d: D) => E, ef: (e: E) => F, fg: (f: F) => G, gh: (g: G) => H): (...a: A) => H;
+export function pipe(...fns: AnyFunction[]): AnyFunction {
+  return function (this: unknown, ...args: any[]) {
+    if (fns.length === 0)
+      return args[0];
+
+    let result = fns[0]!.apply(this, args);
+
+    for (let i = 1; i < fns.length; i++)
+      result = fns[i]!.call(this, result);
+
+    return result;
+  };
+}
diff --git a/core/stdlib/src/functions/throttle/index.test.ts b/core/stdlib/src/functions/throttle/index.test.ts
new file mode 100644
index 0000000..47270c7
--- /dev/null
+++ b/core/stdlib/src/functions/throttle/index.test.ts
@@ -0,0 +1,158 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { throttle } from '.';
+
+describe('throttle', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(1_700_000_000_000);
+  });
+  afterEach(() => vi.useRealTimers());
+
+  it('invoke immediately on the leading edge', () => {
+    const spy = vi.fn();
+    const throttled = throttle(spy, 100);
+
+    throttled();
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  it('throttle rapid calls to leading + trailing', () => {
+    const spy = vi.fn();
+    const throttled = throttle(spy, 100);
+
+    throttled();
+    throttled();
+    throttled();
+    expect(spy).toHaveBeenCalledTimes(1);
+
+    vi.advanceTimersByTime(100);
+    expect(spy).toHaveBeenCalledTimes(2);
+  });
+
+  it('skip the leading call when leading is false', () => {
+    const spy = vi.fn();
+    const throttled = throttle(spy, 100, { leading: false });
+
+    throttled();
+    expect(spy).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(100);
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  it('skip the trailing call when trailing is false', () => {
+    const spy = vi.fn();
+    const throttled = throttle(spy, 100, { trailing: false });
+
+    throttled();
+    throttled();
+    throttled();
+    expect(spy).toHaveBeenCalledTimes(1);
+
+    vi.advanceTimersByTime(100);
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  it('allow another leading call after the window passes', () => {
+    const spy = vi.fn();
+    const throttled = throttle(spy, 100, { trailing: false });
+
+    throttled();
+    expect(spy).toHaveBeenCalledTimes(1);
+
+    vi.advanceTimersByTime(150);
+    throttled();
+    expect(spy).toHaveBeenCalledTimes(2);
+  });
+
+  it('cancel a pending trailing call', () => {
+    const spy = vi.fn();
+    const throttled = throttle(spy, 100);
+
+    throttled();
+    throttled();
+    expect(throttled.pending()).toBe(true);
+
+    throttled.cancel();
+    expect(throttled.pending()).toBe(false);
+
+    vi.advanceTimersByTime(100);
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  it('flush a pending trailing call immediately and return its result', () => {
+    const spy = vi.fn((n: number) => n * 2);
+    const throttled = throttle(spy, 100);
+
+    throttled(1);
+    throttled(5);
+    expect(throttled.flush()).toBe(10);
+    expect(spy).toHaveBeenCalledTimes(2);
+    expect(throttled.pending()).toBe(false);
+  });
+
+  it('resolves the wait from a getter on each call', () => {
+    const spy = vi.fn();
+    let wait = 100;
+    const throttled = throttle(spy, () => wait, { leading: false });
+
+    throttled();
+    vi.advanceTimersByTime(100);
+    expect(spy).toHaveBeenCalledTimes(1);
+
+    wait = 200;
+    throttled();
+    vi.advanceTimersByTime(100);
+    expect(spy).toHaveBeenCalledTimes(1); // window widened to 200
+    vi.advanceTimersByTime(100);
+    expect(spy).toHaveBeenCalledTimes(2);
+  });
+
+  it('trailing invocation uses the latest arguments', () => {
+    const spy = vi.fn();
+    const throttled = throttle(spy, 100);
+
+    throttled('a');
+    throttled('b');
+    throttled('c');
+    vi.advanceTimersByTime(100);
+
+    expect(spy).toHaveBeenNthCalledWith(1, 'a'); // leading
+    expect(spy).toHaveBeenNthCalledWith(2, 'c'); // trailing = most recent
+  });
+
+  it('rate-limit across multiple sustained windows', () => {
+    const spy = vi.fn();
+    const throttled = throttle(spy, 100);
+
+    for (let i = 0; i < 5; i++) {
+      throttled();
+      vi.advanceTimersByTime(50);
+    }
+
+    // 250ms of calls every 50ms with a 100ms window — far fewer than 5 invocations.
+    expect(spy.mock.calls.length).toBeGreaterThanOrEqual(2);
+    expect(spy.mock.calls.length).toBeLessThan(5);
+  });
+
+  it('flush() with nothing scheduled returns the last result without double-calling', () => {
+    const spy = vi.fn((n: number) => n);
+    const throttled = throttle(spy, 100);
+
+    throttled(1); // leading fires immediately, nothing trailing pending
+
+    expect(throttled.flush()).toBe(1);
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  it('preserve this on the leading call', () => {
+    const throttled = throttle(function (this: { base: number }, n: number) {
+      this.base += n;
+    }, 100);
+    const ctx = { base: 10 };
+
+    throttled.call(ctx, 5);
+
+    expect(ctx.base).toBe(15);
+  });
+});
diff --git a/core/stdlib/src/functions/throttle/index.ts b/core/stdlib/src/functions/throttle/index.ts
new file mode 100644
index 0000000..9d7b7df
--- /dev/null
+++ b/core/stdlib/src/functions/throttle/index.ts
@@ -0,0 +1,106 @@
+import type { AnyFunction } from '../../types';
+
+export interface ThrottleOptions {
+  /** Invoke on the leading edge of the window. Default `true`. */
+  leading?: boolean;
+  /** Invoke on the trailing edge of the window. Default `true`. */
+  trailing?: boolean;
+}
+
+export interface ThrottledFunction<T extends AnyFunction> {
+  (this: ThisParameterType<T>, ...args: Parameters<T>): void;
+  /** Cancel a pending trailing invocation. */
+  cancel: () => void;
+  /** Immediately invoke a pending call (if any) and return its result. */
+  flush: () => ReturnType<T> | undefined;
+  /** Whether a trailing invocation is currently scheduled. */
+  pending: () => boolean;
+}
+
+/**
+ * @name throttle
+ * @category Functions
+ * @description Invokes a function at most once per `wait` ms
+ *
+ * @param {Function} fn - The function to throttle
+ * @param {number | (() => number)} wait - Milliseconds to throttle to, or a getter resolved lazily on each call (useful for reactive windows)
+ * @param {ThrottleOptions} [options] - Leading/trailing edge behavior
+ * @returns {ThrottledFunction} The throttled function with `cancel()`, `flush()` and `pending()`
+ *
+ * @example
+ * const onScroll = throttle(() => update(), 100);
+ * window.addEventListener('scroll', onScroll);
+ *
+ * @since 0.0.10
+ */
+export function throttle<T extends AnyFunction>(fn: T, wait: number | (() => number), options: ThrottleOptions = {}): ThrottledFunction<T> {
+  const { leading = true, trailing = true } = options;
+  const resolveWait = typeof wait === 'function' ? wait : () => wait;
+
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  let pending: (() => ReturnType<T>) | undefined;
+  let result: ReturnType<T> | undefined;
+  let lastInvokeTime = 0;
+
+  function invoke(time: number) {
+    if (pending === undefined)
+      return;
+
+    lastInvokeTime = time;
+    result = pending();
+    pending = undefined;
+  }
+
+  const throttled = function (this: ThisParameterType<T>, ...args: Parameters<T>) {
+    const now = Date.now();
+    const wait = resolveWait();
+
+    // Skip the leading call by pretending we just invoked.
+    if (lastInvokeTime === 0 && !leading)
+      lastInvokeTime = now;
+
+    const remaining = wait - (now - lastInvokeTime);
+
+    // The arrow captures the call-time `this` lexically, no aliasing needed.
+    pending = () => fn.apply(this, args) as ReturnType<T>;
+
+    // Outside the window (or the clock jumped): invoke right away.
+    if (remaining <= 0 || remaining > wait) {
+      if (timer !== undefined) {
+        clearTimeout(timer);
+        timer = undefined;
+      }
+
+      invoke(now);
+    }
+    else if (timer === undefined && trailing) {
+      timer = setTimeout(() => {
+        timer = undefined;
+        invoke(leading ? Date.now() : 0);
+      }, remaining);
+    }
+  } as ThrottledFunction<T>;
+
+  throttled.cancel = () => {
+    if (timer !== undefined)
+      clearTimeout(timer);
+
+    timer = undefined;
+    pending = undefined;
+    lastInvokeTime = 0;
+  };
+
+  throttled.flush = () => {
+    if (timer !== undefined) {
+      clearTimeout(timer);
+      timer = undefined;
+      invoke(Date.now());
+    }
+
+    return result;
+  };
+
+  throttled.pending = () => timer !== undefined;
+
+  return throttled;
+}
diff --git a/core/stdlib/src/index.ts b/core/stdlib/src/index.ts
index 62ebea0..db18442 100644
--- a/core/stdlib/src/index.ts
+++ b/core/stdlib/src/index.ts
@@ -1,6 +1,9 @@
 export * from './arrays';
 export * from './async';
 export * from './bits';
+export * from './collections';
+export * from './comparators';
+export * from './functions';
 export * from './math';
 export * from './objects';
 export * from './patterns';
@@ -8,4 +11,4 @@ export * from './structs';
 export * from './sync';
 export * from './text';
 export * from './types';
-export * from './utils'
+export * from './utils';
diff --git a/core/stdlib/src/math/basic/clamp/index.test.ts b/core/stdlib/src/math/basic/clamp/index.test.ts
index 342485b..da5668f 100644
--- a/core/stdlib/src/math/basic/clamp/index.test.ts
+++ b/core/stdlib/src/math/basic/clamp/index.test.ts
@@ -1,4 +1,4 @@
-import { describe,it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { clamp } from '.';
 
 describe('clamp', () => {
@@ -78,4 +78,4 @@ describe('clamp', () => {
     // min and max are -Infinity
     expect(clamp(50, -Infinity, -Infinity)).toBe(-Infinity);
   });
-});
\ No newline at end of file
+});
diff --git a/core/stdlib/src/math/basic/clamp/index.ts b/core/stdlib/src/math/basic/clamp/index.ts
index 898adc6..cd93525 100644
--- a/core/stdlib/src/math/basic/clamp/index.ts
+++ b/core/stdlib/src/math/basic/clamp/index.ts
@@ -2,7 +2,7 @@
  * @name clamp
  * @category Math
  * @description Clamps a number between a minimum and maximum value
- * 
+ *
  * @param {number} value The number to clamp
  * @param {number} min Minimum value
  * @param {number} max Maximum value
diff --git a/core/stdlib/src/math/basic/lerp/index.test.ts b/core/stdlib/src/math/basic/lerp/index.test.ts
index c0455cb..16de9e0 100644
--- a/core/stdlib/src/math/basic/lerp/index.test.ts
+++ b/core/stdlib/src/math/basic/lerp/index.test.ts
@@ -1,5 +1,5 @@
-import {describe, it, expect} from 'vitest';
-import {inverseLerp, lerp} from '.';
+import { describe, expect, it } from 'vitest';
+import { inverseLerp, lerp } from '.';
 
 describe('lerp', () => {
   it('interpolates between two values', () => {
@@ -26,6 +26,16 @@ describe('lerp', () => {
     const result = lerp(0, 10, 1.5);
     expect(result).toBe(15);
   });
+
+  it('interpolates from a non-zero start', () => {
+    expect(lerp(10, 20, 0.5)).toBe(15);
+    expect(lerp(-10, 10, 0.25)).toBe(-5);
+  });
+
+  it('propagates NaN and Infinity', () => {
+    expect(lerp(0, 10, Number.NaN)).toBeNaN();
+    expect(lerp(0, Number.POSITIVE_INFINITY, 0.5)).toBe(Number.POSITIVE_INFINITY);
+  });
 });
 
 describe('inverseLerp', () => {
diff --git a/core/stdlib/src/math/basic/remap/index.test.ts b/core/stdlib/src/math/basic/remap/index.test.ts
index 778b249..73e436f 100644
--- a/core/stdlib/src/math/basic/remap/index.test.ts
+++ b/core/stdlib/src/math/basic/remap/index.test.ts
@@ -1,5 +1,5 @@
-import {describe, expect, it} from 'vitest';
-import {remap} from '.';
+import { describe, expect, it } from 'vitest';
+import { remap } from '.';
 
 describe('remap', () => {
   it('map values from one range to another', () => {
@@ -43,4 +43,12 @@ describe('remap', () => {
     // input range is zero (should return output min)
     expect(remap(5, 0, 0, 0, 100)).toBe(0);
   });
-});
\ No newline at end of file
+
+  it('handle a reversed (descending) input range', () => {
+    // 2 is 80% of the way from 10 down to 0
+    expect(remap(2, 10, 0, 0, 100)).toBe(80);
+    // clamps to the interval regardless of orientation
+    expect(remap(15, 10, 0, 0, 100)).toBe(0);
+    expect(remap(-5, 10, 0, 0, 100)).toBe(100);
+  });
+});
diff --git a/core/stdlib/src/math/basic/remap/index.ts b/core/stdlib/src/math/basic/remap/index.ts
index ddf5a5e..b4038a1 100644
--- a/core/stdlib/src/math/basic/remap/index.ts
+++ b/core/stdlib/src/math/basic/remap/index.ts
@@ -1,11 +1,11 @@
 import { clamp } from '../clamp';
-import {inverseLerp, lerp} from '../lerp';
+import { inverseLerp, lerp } from '../lerp';
 
 /**
  * @name remap
  * @category Math
  * @description Map a value from one range to another
- * 
+ *
  * @param {number} value The value to map
  * @param {number} in_min The minimum value of the input range
  * @param {number} in_max The maximum value of the input range
@@ -19,7 +19,9 @@ export function remap(value: number, in_min: number, in_max: number, out_min: nu
   if (in_min === in_max)
     return out_min;
 
-  const clampedValue = clamp(value, in_min, in_max);
+  // Clamp to the interval's actual bounds so a reversed (descending) input range still works;
+  // inverseLerp itself handles in_min > in_max correctly.
+  const clampedValue = clamp(value, Math.min(in_min, in_max), Math.max(in_min, in_max));
 
   return lerp(out_min, out_max, inverseLerp(in_min, in_max, clampedValue));
-}
\ No newline at end of file
+}
diff --git a/core/stdlib/src/math/bigint/clampBigInt/index.test.ts b/core/stdlib/src/math/bigint/clampBigInt/index.test.ts
index 0c9fabc..1253698 100644
--- a/core/stdlib/src/math/bigint/clampBigInt/index.test.ts
+++ b/core/stdlib/src/math/bigint/clampBigInt/index.test.ts
@@ -1,5 +1,5 @@
-import {describe, it, expect} from 'vitest';
-import {clampBigInt} from '.';
+import { describe, expect, it } from 'vitest';
+import { clampBigInt } from '.';
 
 describe('clampBigInt', () => {
   it('clamp a value within the given range', () => {
@@ -32,4 +32,4 @@ describe('clampBigInt', () => {
     // negative range and value
     expect(clampBigInt(-10n, -100n, -5n)).toBe(-10n);
   });
-});
\ No newline at end of file
+});
diff --git a/core/stdlib/src/math/bigint/clampBigInt/index.ts b/core/stdlib/src/math/bigint/clampBigInt/index.ts
index a9a3200..d71747c 100644
--- a/core/stdlib/src/math/bigint/clampBigInt/index.ts
+++ b/core/stdlib/src/math/bigint/clampBigInt/index.ts
@@ -1,5 +1,5 @@
-import {minBigInt} from '../minBigInt';
-import {maxBigInt} from '../maxBigInt';
+import { minBigInt } from '../minBigInt';
+import { maxBigInt } from '../maxBigInt';
 
 /**
  * @name clampBigInt
diff --git a/core/stdlib/src/math/bigint/lerpBigInt/index.test.ts b/core/stdlib/src/math/bigint/lerpBigInt/index.test.ts
index 95e6f5d..4399175 100644
--- a/core/stdlib/src/math/bigint/lerpBigInt/index.test.ts
+++ b/core/stdlib/src/math/bigint/lerpBigInt/index.test.ts
@@ -1,5 +1,5 @@
-import {describe, it, expect} from 'vitest';
-import {inverseLerpBigInt, lerpBigInt} from '.';
+import { describe, expect, it } from 'vitest';
+import { inverseLerpBigInt, lerpBigInt } from '.';
 
 const MAX_SAFE_INTEGER = BigInt(Number.MAX_SAFE_INTEGER);
 
@@ -28,6 +28,20 @@ describe('lerpBigInt', () => {
     const result = lerpBigInt(0n, 10n, 1.5);
     expect(result).toBe(15n);
   });
+
+  it('truncates the fractional part toward zero', () => {
+    expect(lerpBigInt(0n, 10n, 0.29)).toBe(2n); // 2.9 -> 2
+    expect(lerpBigInt(0n, -10n, 0.29)).toBe(-2n); // -2.9 -> -2 (toward zero, asymmetric)
+  });
+
+  it('stays exact for very large bigint ranges', () => {
+    expect(lerpBigInt(0n, 10n ** 30n, 0.5)).toBe(5n * 10n ** 29n);
+  });
+
+  it('interpolates a reversed (start > end) range', () => {
+    expect(lerpBigInt(10n, 0n, 0.5)).toBe(5n);
+    expect(lerpBigInt(10n, 0n, 0.25)).toBe(8n); // 10 + (-10 * 0.25) = 7.5 -> 8? truncation
+  });
 });
 
 describe('inverseLerpBigInt', () => {
@@ -61,23 +75,20 @@ describe('inverseLerpBigInt', () => {
     expect(result).toBe(0);
   });
 
-  it('handles the maximum safe integer correctly', () => {
-    const result = inverseLerpBigInt(0n, MAX_SAFE_INTEGER, MAX_SAFE_INTEGER);
-    expect(result).toBe(1);
+  it('returns 1 at the maximum safe integer', () => {
+    expect(inverseLerpBigInt(0n, MAX_SAFE_INTEGER, MAX_SAFE_INTEGER)).toBe(1);
   });
 
-  it('handles values just above the maximum safe integer correctly', () => {
-    const result = inverseLerpBigInt(0n, MAX_SAFE_INTEGER, 0n);
-    expect(result).toBe(0);
+  it('returns 0 at the start of a max-safe-integer range', () => {
+    expect(inverseLerpBigInt(0n, MAX_SAFE_INTEGER, 0n)).toBe(0);
   });
 
-  it('handles values just below the maximum safe integer correctly', () => {
-    const result = inverseLerpBigInt(0n, MAX_SAFE_INTEGER, MAX_SAFE_INTEGER);
-    expect(result).toBe(1);
+  it('returns the midpoint of a max-safe-integer range', () => {
+    // 6-decimal SCALE quantizes the result, so allow ~1e-6 tolerance.
+    expect(inverseLerpBigInt(0n, MAX_SAFE_INTEGER, MAX_SAFE_INTEGER / 2n)).toBeCloseTo(0.5, 5);
   });
 
-  it('handles values just above the maximum safe integer correctly', () => {
-    const result = inverseLerpBigInt(0n, 2n ** 128n, 2n ** 127n);
-    expect(result).toBe(0.5);
+  it('handles values far beyond 2^53', () => {
+    expect(inverseLerpBigInt(0n, 2n ** 128n, 2n ** 127n)).toBe(0.5);
   });
 });
diff --git a/core/stdlib/src/math/bigint/lerpBigInt/index.ts b/core/stdlib/src/math/bigint/lerpBigInt/index.ts
index 3ba5f48..cb6483d 100644
--- a/core/stdlib/src/math/bigint/lerpBigInt/index.ts
+++ b/core/stdlib/src/math/bigint/lerpBigInt/index.ts
@@ -35,4 +35,4 @@ export function lerpBigInt(start: bigint, end: bigint, t: number) {
  */
 export function inverseLerpBigInt(start: bigint, end: bigint, value: bigint) {
   return start === end ? 0 : Number((value - start) * SCALE_N / (end - start)) / SCALE;
-}
\ No newline at end of file
+}
diff --git a/core/stdlib/src/math/bigint/maxBigInt/index.test.ts b/core/stdlib/src/math/bigint/maxBigInt/index.test.ts
index a88ef2b..fc55e4d 100644
--- a/core/stdlib/src/math/bigint/maxBigInt/index.test.ts
+++ b/core/stdlib/src/math/bigint/maxBigInt/index.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { maxBigInt } from '.';
 
 describe('maxBigInt', () => {
@@ -36,4 +36,4 @@ describe('maxBigInt', () => {
     const result = maxBigInt(...values);
     expect(result).toBe(999n);
   });
-});
\ No newline at end of file
+});
diff --git a/core/stdlib/src/math/bigint/maxBigInt/index.ts b/core/stdlib/src/math/bigint/maxBigInt/index.ts
index fe386c9..215f588 100644
--- a/core/stdlib/src/math/bigint/maxBigInt/index.ts
+++ b/core/stdlib/src/math/bigint/maxBigInt/index.ts
@@ -14,4 +14,4 @@ export function maxBigInt(...values: bigint[]) {
     throw new TypeError('maxBigInt requires at least one argument');
 
   return values.reduce((acc, val) => val > acc ? val : acc);
-}
\ No newline at end of file
+}
diff --git a/core/stdlib/src/math/bigint/minBigInt/index.test.ts b/core/stdlib/src/math/bigint/minBigInt/index.test.ts
index ca601ed..dce3fc3 100644
--- a/core/stdlib/src/math/bigint/minBigInt/index.test.ts
+++ b/core/stdlib/src/math/bigint/minBigInt/index.test.ts
@@ -1,5 +1,5 @@
-import {describe, it, expect} from 'vitest';
-import {minBigInt} from '.';
+import { describe, expect, it } from 'vitest';
+import { minBigInt } from '.';
 
 describe('minBigInt', () => {
   it('returns Infinity when no values are provided', () => {
@@ -32,8 +32,8 @@ describe('minBigInt', () => {
   });
 
   it('handles a large number of bigints', () => {
-    const values = Array.from({length: 1000}, (_, i) => BigInt(i));
+    const values = Array.from({ length: 1000 }, (_, i) => BigInt(i));
     const result = minBigInt(...values);
     expect(result).toBe(0n);
   });
-});
\ No newline at end of file
+});
diff --git a/core/stdlib/src/math/bigint/remapBigInt/index.test.ts b/core/stdlib/src/math/bigint/remapBigInt/index.test.ts
index a934aaa..f3ea245 100644
--- a/core/stdlib/src/math/bigint/remapBigInt/index.test.ts
+++ b/core/stdlib/src/math/bigint/remapBigInt/index.test.ts
@@ -1,5 +1,5 @@
-import {describe, expect, it} from 'vitest';
-import {remapBigInt} from '.';
+import { describe, expect, it } from 'vitest';
+import { remapBigInt } from '.';
 
 describe('remapBigInt', () => {
   it('map values from one range to another', () => {
@@ -29,4 +29,14 @@ describe('remapBigInt', () => {
     // input range is zero (should return output min)
     expect(remapBigInt(5n, 0n, 0n, 0n, 100n)).toBe(0n);
   });
-});
\ No newline at end of file
+
+  it('stay exact for large ranges (no number round-trip)', () => {
+    // 1/3 of 10^30, computed entirely in BigInt — only truncation, no float precision loss
+    expect(remapBigInt(1n, 0n, 3n, 0n, 10n ** 30n)).toBe(333333333333333333333333333333n);
+  });
+
+  it('preserve precision well beyond 2^53', () => {
+    const huge = 10n ** 40n;
+    expect(remapBigInt(1n, 0n, 2n, 0n, huge)).toBe(huge / 2n);
+  });
+});
diff --git a/core/stdlib/src/math/bigint/remapBigInt/index.ts b/core/stdlib/src/math/bigint/remapBigInt/index.ts
index 2de7a9d..c9c32c7 100644
--- a/core/stdlib/src/math/bigint/remapBigInt/index.ts
+++ b/core/stdlib/src/math/bigint/remapBigInt/index.ts
@@ -1,11 +1,10 @@
 import { clampBigInt } from '../clampBigInt';
-import {inverseLerpBigInt, lerpBigInt} from '../lerpBigInt';
 
 /**
  * @name remapBigInt
  * @category Math
  * @description Map a bigint value from one range to another
- * 
+ *
  * @param {bigint} value The value to map
  * @param {bigint} in_min The minimum value of the input range
  * @param {bigint} in_max The maximum value of the input range
@@ -21,5 +20,7 @@ export function remapBigInt(value: bigint, in_min: bigint, in_max: bigint, out_m
 
   const clampedValue = clampBigInt(value, in_min, in_max);
 
-  return lerpBigInt(out_min, out_max, inverseLerpBigInt(in_min, in_max, clampedValue));
-}
\ No newline at end of file
+  // Stay entirely in BigInt — round-tripping through a JS number (as inverseLerpBigInt does)
+  // quantizes to ~6 decimals and overflows precision past 2^53, defeating the point of BigInt.
+  return out_min + ((clampedValue - in_min) * (out_max - out_min)) / (in_max - in_min);
+}
diff --git a/core/stdlib/src/objects/omit/index.test-d.ts b/core/stdlib/src/objects/omit/index.test-d.ts
new file mode 100644
index 0000000..890ce8a
--- /dev/null
+++ b/core/stdlib/src/objects/omit/index.test-d.ts
@@ -0,0 +1,14 @@
+import { describe, expectTypeOf, it } from 'vitest';
+import { omit } from '.';
+
+interface Sample { a: number; b: string; c: boolean }
+
+describe('omit', () => {
+  it('removes a single key from the type', () => {
+    expectTypeOf(omit({ a: 1, b: 'x', c: true } as Sample, 'a')).toEqualTypeOf<Omit<Sample, 'a'>>();
+  });
+
+  it('removes multiple keys from the type', () => {
+    expectTypeOf(omit({ a: 1, b: 'x', c: true } as Sample, ['a', 'b'])).toEqualTypeOf<Omit<Sample, 'a' | 'b'>>();
+  });
+});
diff --git a/core/stdlib/src/objects/omit/index.test.ts b/core/stdlib/src/objects/omit/index.test.ts
index c086a89..8fb84fa 100644
--- a/core/stdlib/src/objects/omit/index.test.ts
+++ b/core/stdlib/src/objects/omit/index.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { omit } from '.';
 
 describe('omit', () => {
@@ -47,4 +47,4 @@ describe('omit', () => {
     expect(emptyTarget).toEqual({});
     expect(emptyKeys).toEqual({ a: 1 });
   });
-});
\ No newline at end of file
+});
diff --git a/core/stdlib/src/objects/omit/index.ts b/core/stdlib/src/objects/omit/index.ts
index 9f99b51..fa21ab9 100644
--- a/core/stdlib/src/objects/omit/index.ts
+++ b/core/stdlib/src/objects/omit/index.ts
@@ -5,34 +5,37 @@ import type { Arrayable } from '../../types';
  * @name omit
  * @category Objects
  * @description Returns a new object with the specified keys omitted
- * 
+ *
  * @param {object} target - The object to omit keys from
  * @param {Arrayable<keyof Target>} keys - The keys to omit
  * @returns {Omit<Target, Key>} The new object with the specified keys omitted
- * 
+ *
  * @example
  * omit({ a: 1, b: 2, c: 3 }, 'a') // => { b: 2, c: 3 }
- * 
+ *
  * @example
  * omit({ a: 1, b: 2, c: 3 }, ['a', 'b']) // => { c: 3 }
- * 
+ *
  * @since 0.0.3
  */
 export function omit<Target extends object, Key extends keyof Target>(
   target: Target,
-  keys: Arrayable<Key>
+  keys: Arrayable<Key>,
 ): Omit<Target, Key> {
-  const result = { ...target };
+  const result = {} as Omit<Target, Key>;
 
-  if (!target || !keys)
+  if (!target)
     return result;
 
-  if (isArray(keys)) {
-    for (const key of keys) {
-      delete result[key];
-    }
-  } else {
-    delete result[keys];
+  // Build the kept-keys object directly instead of spread-then-delete: `delete` forces V8
+  // to drop the object into slow dictionary mode, penalizing all later property access.
+  const omitted = new Set<PropertyKey>(
+    keys === null || keys === undefined ? [] : isArray(keys) ? keys : [keys],
+  );
+
+  for (const key in target) {
+    if (Object.hasOwn(target, key) && !omitted.has(key))
+      (result as Record<PropertyKey, unknown>)[key] = target[key];
   }
 
   return result;
diff --git a/core/stdlib/src/objects/pick/index.test-d.ts b/core/stdlib/src/objects/pick/index.test-d.ts
new file mode 100644
index 0000000..137d436
--- /dev/null
+++ b/core/stdlib/src/objects/pick/index.test-d.ts
@@ -0,0 +1,14 @@
+import { describe, expectTypeOf, it } from 'vitest';
+import { pick } from '.';
+
+interface Sample { a: number; b: string; c: boolean }
+
+describe('pick', () => {
+  it('narrows to a single picked key', () => {
+    expectTypeOf(pick({ a: 1, b: 'x', c: true } as Sample, 'a')).toEqualTypeOf<Pick<Sample, 'a'>>();
+  });
+
+  it('narrows to multiple picked keys', () => {
+    expectTypeOf(pick({ a: 1, b: 'x', c: true } as Sample, ['a', 'b'])).toEqualTypeOf<Pick<Sample, 'a' | 'b'>>();
+  });
+});
diff --git a/core/stdlib/src/objects/pick/index.test.ts b/core/stdlib/src/objects/pick/index.test.ts
index 48c088f..e051f7b 100644
--- a/core/stdlib/src/objects/pick/index.test.ts
+++ b/core/stdlib/src/objects/pick/index.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { pick } from '.';
 
 describe('pick', () => {
@@ -23,7 +23,11 @@ describe('pick', () => {
   it('handle non-existent keys by setting them to undefined', () => {
     const result = pick({ a: 1, b: 2 }, ['a', 'c'] as any);
 
-    expect(result).toEqual({ a: 1, c: undefined });
+    // toEqual ignores undefined values, so assert key presence explicitly.
+    expect(Object.keys(result).sort()).toEqual(['a', 'c']);
+    expect('c' in result).toBe(true);
+    expect((result as Record<string, unknown>).c).toBeUndefined();
+    expect(result.a).toBe(1);
   });
 
   it('return an empty object if target is null or undefined', () => {
@@ -33,4 +37,4 @@ describe('pick', () => {
     expect(emptyTarget).toEqual({});
     expect(emptyKeys).toEqual({});
   });
-});
\ No newline at end of file
+});
diff --git a/core/stdlib/src/objects/pick/index.ts b/core/stdlib/src/objects/pick/index.ts
index 2589d9c..d7ff404 100644
--- a/core/stdlib/src/objects/pick/index.ts
+++ b/core/stdlib/src/objects/pick/index.ts
@@ -5,22 +5,22 @@ import type { Arrayable } from '../../types';
  * @name pick
  * @category Objects
  * @description Returns a partial copy of an object containing only the keys specified
- * 
+ *
  * @param {object} target - The object to pick keys from
  * @param {Arrayable<keyof Target>} keys - The keys to pick
  * @returns {Pick<Target, Key>} The new object with the specified keys picked
- * 
+ *
  * @example
  * pick({ a: 1, b: 2, c: 3 }, 'a') // => { a: 1 }
- * 
+ *
  * @example
  * pick({ a: 1, b: 2, c: 3 }, ['a', 'b']) // => { a: 1, b: 2 }
- * 
+ *
  * @since 0.0.3
  */
 export function pick<Target extends object, Key extends keyof Target>(
   target: Target,
-  keys: Arrayable<Key>
+  keys: Arrayable<Key>,
 ): Pick<Target, Key> {
   const result = {} as Pick<Target, Key>;
 
@@ -31,9 +31,10 @@ export function pick<Target extends object, Key extends keyof Target>(
     for (const key of keys) {
       result[key] = target[key];
     }
-  } else {
+  }
+  else {
     result[keys] = target[keys];
   }
 
   return result;
-}
\ No newline at end of file
+}
diff --git a/core/stdlib/src/patterns/behavioral/Command/index.test.ts b/core/stdlib/src/patterns/behavioral/Command/index.test.ts
index c6691b5..4985d06 100644
--- a/core/stdlib/src/patterns/behavioral/Command/index.test.ts
+++ b/core/stdlib/src/patterns/behavioral/Command/index.test.ts
@@ -1,6 +1,6 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import { CommandHistory, AsyncCommandHistory } from '.';
-import type { Command, AsyncCommand } from '.';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { AsyncCommandHistory, CommandHistory } from '.';
+import type { AsyncCommand, Command } from '.';
 
 describe('commandHistory', () => {
   let history: CommandHistory;
@@ -205,11 +205,11 @@ describe('asyncCommandHistory', () => {
   function addItemAsync(item: string): AsyncCommand {
     return {
       execute: async () => {
-        await new Promise((r) => setTimeout(r, 5));
+        await new Promise(r => setTimeout(r, 5));
         items.push(item);
       },
       undo: async () => {
-        await new Promise((r) => setTimeout(r, 5));
+        await new Promise(r => setTimeout(r, 5));
         items.pop();
       },
     };
@@ -278,4 +278,43 @@ describe('asyncCommandHistory', () => {
 
     expect(limited.size).toBe(2);
   });
+
+  describe('error handling', () => {
+    it('does not record a sync command whose execute throws', () => {
+      const h = new CommandHistory();
+      const cmd: Command = {
+        execute: () => {
+          throw new Error('boom');
+        },
+        undo: () => {},
+      };
+
+      expect(() => h.execute(cmd)).toThrow('boom');
+      expect(h.size).toBe(0);
+      expect(h.undo()).toBe(false);
+    });
+
+    it('does not record an async command whose execute rejects', async () => {
+      const h = new AsyncCommandHistory();
+      const cmd: AsyncCommand = {
+        execute: () => Promise.reject(new Error('boom')),
+        undo: () => Promise.resolve(),
+      };
+
+      await expect(h.execute(cmd)).rejects.toThrow('boom');
+      expect(h.size).toBe(0);
+      expect(await h.undo()).toBe(false);
+    });
+
+    it('propagates a rejecting undo', async () => {
+      const h = new AsyncCommandHistory();
+      const cmd: AsyncCommand = {
+        execute: () => Promise.resolve(),
+        undo: () => Promise.reject(new Error('undo failed')),
+      };
+
+      await h.execute(cmd);
+      await expect(h.undo()).rejects.toThrow('undo failed');
+    });
+  });
 });
diff --git a/core/stdlib/src/patterns/behavioral/Command/sync.ts b/core/stdlib/src/patterns/behavioral/Command/sync.ts
index 0e1b137..c057d89 100644
--- a/core/stdlib/src/patterns/behavioral/Command/sync.ts
+++ b/core/stdlib/src/patterns/behavioral/Command/sync.ts
@@ -40,7 +40,7 @@ export class CommandHistory extends BaseCommandHistory<Command> {
 
   batch(commands: Command[]): void {
     const macro: Command = {
-      execute: () => commands.forEach((c) => c.execute()),
+      execute: () => commands.forEach(c => c.execute()),
       undo: () => {
         for (let i = commands.length - 1; i >= 0; i--)
           commands[i]!.undo();
diff --git a/core/stdlib/src/patterns/behavioral/PubSub/index.test.ts b/core/stdlib/src/patterns/behavioral/PubSub/index.test.ts
index c329d19..1885291 100644
--- a/core/stdlib/src/patterns/behavioral/PubSub/index.test.ts
+++ b/core/stdlib/src/patterns/behavioral/PubSub/index.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { PubSub } from '.';
 
 describe('pubsub', () => {
@@ -115,4 +115,54 @@ describe('pubsub', () => {
 
     expect(listener).toHaveBeenCalledTimes(1);
   });
-});
\ No newline at end of file
+
+  describe('off edge cases', () => {
+    it('removes only the targeted listener of many', () => {
+      const a = vi.fn();
+      const b = vi.fn();
+      eventBus.on('event1', a);
+      eventBus.on('event1', b);
+
+      eventBus.off('event1', a);
+      eventBus.emit('event1', 'x');
+
+      expect(a).not.toHaveBeenCalled();
+      expect(b).toHaveBeenCalledTimes(1);
+    });
+
+    it('is a no-op when removing an unregistered listener or unknown event', () => {
+      const a = vi.fn();
+      eventBus.on('event1', a);
+
+      expect(() => eventBus.off('event1', vi.fn())).not.toThrow();
+      expect(() => eventBus.off('event2', vi.fn())).not.toThrow();
+
+      eventBus.emit('event1', 'x');
+      expect(a).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('emit stability', () => {
+    it('does not invoke listeners added during the same emit', () => {
+      const added = vi.fn();
+      const adder = vi.fn(() => eventBus.on('event1', added));
+      eventBus.on('event1', adder);
+
+      eventBus.emit('event1', 'x');
+
+      expect(adder).toHaveBeenCalledTimes(1);
+      expect(added).not.toHaveBeenCalled(); // only fires on the next emit
+    });
+
+    it('a once listener removes itself and fires exactly once', () => {
+      const listener = vi.fn();
+      eventBus.once('event1', listener);
+
+      eventBus.emit('event1', 'a');
+      eventBus.emit('event1', 'b');
+
+      expect(listener).toHaveBeenCalledTimes(1);
+      expect(listener).toHaveBeenCalledWith('a');
+    });
+  });
+});
diff --git a/core/stdlib/src/patterns/behavioral/PubSub/index.ts b/core/stdlib/src/patterns/behavioral/PubSub/index.ts
index fc47f04..3b6990a 100644
--- a/core/stdlib/src/patterns/behavioral/PubSub/index.ts
+++ b/core/stdlib/src/patterns/behavioral/PubSub/index.ts
@@ -4,13 +4,13 @@
  * @description Simple PubSub implementation
  *
  * @since 0.0.2
- * 
+ *
  * @template Events - Event map where keys are event names and values are listener signatures
  */
 export class PubSub<Events extends Record<string, (...args: any[]) => any>> {
   /**
    * Events map
-   * 
+   *
    * @private
    * @type {Map<keyof Events, Set<Events[keyof Events]>>}
    */
@@ -25,7 +25,7 @@ export class PubSub<Events extends Record<string, (...args: any[]) => any>> {
 
   /**
    * Subscribe to an event
-   * 
+   *
    * @template {keyof Events} K
    * @param {K} event Name of the event
    * @param {Events[K]} listener Listener function
@@ -44,7 +44,7 @@ export class PubSub<Events extends Record<string, (...args: any[]) => any>> {
 
   /**
    * Unsubscribe from an event
-   * 
+   *
    * @template {keyof Events} K
    * @param {K} event Name of the event
    * @param {Events[K]} listener Listener function
@@ -61,7 +61,7 @@ export class PubSub<Events extends Record<string, (...args: any[]) => any>> {
 
   /**
    * Subscribe to an event only once
-   * 
+   *
    * @template {keyof Events} K
    * @param {K} event Name of the event
    * @param {Events[K]} listener Listener function
@@ -69,8 +69,8 @@ export class PubSub<Events extends Record<string, (...args: any[]) => any>> {
    */
   public once<K extends keyof Events>(event: K, listener: Events[K]) {
     const onceListener = (...args: Parameters<Events[K]>) => {
-        this.off(event, onceListener as Events[K]);
-        listener(...args);
+      this.off(event, onceListener as Events[K]);
+      listener(...args);
     };
 
     this.on(event, onceListener as Events[K]);
@@ -80,7 +80,7 @@ export class PubSub<Events extends Record<string, (...args: any[]) => any>> {
 
   /**
    * Emit an event
-   * 
+   *
    * @template {keyof Events} K
    * @param {K} event Name of the event
    * @param {...Parameters<Events[K]>} args Arguments for the listener
@@ -92,14 +92,18 @@ export class PubSub<Events extends Record<string, (...args: any[]) => any>> {
     if (!listeners)
       return false;
 
-    listeners.forEach((listener) => listener(...args));
+    // Snapshot first: iterating the live Set would invoke listeners added during this
+    // emit (and is fragile to self-removal). A copy gives stable EventEmitter semantics.
+    const snapshot = [...listeners];
+    for (const listener of snapshot)
+      listener(...args);
 
     return true;
   }
 
   /**
    * Clear all listeners for an event
-   * 
+   *
    * @template {keyof Events} K
    * @param {K} event Name of the event
    * @returns {this}
diff --git a/core/stdlib/src/patterns/behavioral/StateMachine/async.ts b/core/stdlib/src/patterns/behavioral/StateMachine/async.ts
index 28f2777..13b6a63 100644
--- a/core/stdlib/src/patterns/behavioral/StateMachine/async.ts
+++ b/core/stdlib/src/patterns/behavioral/StateMachine/async.ts
@@ -1,6 +1,6 @@
 import { isString } from '../../../types';
 import { BaseStateMachine } from './base';
-import type { AsyncStateNodeConfig, ExtractStates, ExtractEvents } from './types';
+import type { AsyncStateNodeConfig, ExtractEvents, ExtractStates } from './types';
 
 /**
  * @name AsyncStateMachine
@@ -39,7 +39,8 @@ export class AsyncStateMachine<
 
     if (isString(transition)) {
       target = transition;
-    } else {
+    }
+    else {
       if (transition.guard && !(await transition.guard(this.context)))
         return this.currentState;
 
diff --git a/core/stdlib/src/patterns/behavioral/StateMachine/index.test-d.ts b/core/stdlib/src/patterns/behavioral/StateMachine/index.test-d.ts
new file mode 100644
index 0000000..361aec2
--- /dev/null
+++ b/core/stdlib/src/patterns/behavioral/StateMachine/index.test-d.ts
@@ -0,0 +1,24 @@
+import { describe, expectTypeOf, it } from 'vitest';
+import { createMachine } from '.';
+
+describe('createMachine', () => {
+  const machine = createMachine({
+    initial: 'idle',
+    states: {
+      idle: { on: { START: 'running' } },
+      running: { on: { STOP: 'idle' } },
+    },
+  });
+
+  it('infers the state union from the states config', () => {
+    expectTypeOf(machine.current).toEqualTypeOf<'idle' | 'running'>();
+  });
+
+  it('infers the event union accepted by send', () => {
+    expectTypeOf(machine.send).parameter(0).toEqualTypeOf<'START' | 'STOP'>();
+  });
+
+  it('send returns the (typed) resulting state', () => {
+    expectTypeOf(machine.send('START')).toEqualTypeOf<'idle' | 'running'>();
+  });
+});
diff --git a/core/stdlib/src/patterns/behavioral/StateMachine/index.test.ts b/core/stdlib/src/patterns/behavioral/StateMachine/index.test.ts
index 070cde1..4fcdffd 100644
--- a/core/stdlib/src/patterns/behavioral/StateMachine/index.test.ts
+++ b/core/stdlib/src/patterns/behavioral/StateMachine/index.test.ts
@@ -1,5 +1,5 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { createMachine, createAsyncMachine, StateMachine, AsyncStateMachine } from '.';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { AsyncStateMachine, StateMachine, createAsyncMachine, createMachine } from '.';
 
 describe('stateMachine', () => {
   describe('createMachine (without context)', () => {
@@ -169,7 +169,7 @@ describe('stateMachine', () => {
             on: {
               FAIL: {
                 target: 'idle',
-                guard: (ctx) => ctx.retries < 3,
+                guard: ctx => ctx.retries < 3,
               },
               SUCCESS: 'done',
             },
@@ -255,7 +255,7 @@ describe('stateMachine', () => {
             on: {
               UNLOCK: {
                 target: 'unlocked',
-                guard: (ctx) => ctx.unlocked,
+                guard: ctx => ctx.unlocked,
               },
             },
             exit: exitHook,
@@ -374,7 +374,7 @@ describe('stateMachine', () => {
             on: {
               NEXT: {
                 target: 'c',
-                guard: (ctx) => ctx.step === 1,
+                guard: ctx => ctx.step === 1,
                 action: (ctx) => { ctx.step = 2; },
               },
             },
@@ -434,7 +434,7 @@ describe('asyncStateMachine', () => {
             on: {
               GO: {
                 target: 'active',
-                guard: async (ctx) => ctx.allowed,
+                guard: async ctx => ctx.allowed,
               },
             },
           },
@@ -456,7 +456,7 @@ describe('asyncStateMachine', () => {
             on: {
               GO: {
                 target: 'active',
-                guard: async (ctx) => ctx.allowed,
+                guard: async ctx => ctx.allowed,
               },
             },
           },
@@ -483,7 +483,7 @@ describe('asyncStateMachine', () => {
               FETCH: {
                 target: 'done',
                 action: async (ctx) => {
-                  await new Promise((r) => setTimeout(r, 10));
+                  await new Promise(r => setTimeout(r, 10));
                   ctx.data = 'fetched';
                   order.push('action');
                 },
@@ -513,13 +513,13 @@ describe('asyncStateMachine', () => {
           a: {
             on: { GO: 'b' },
             exit: async () => {
-              await new Promise((r) => setTimeout(r, 10));
+              await new Promise(r => setTimeout(r, 10));
               order.push('exit-a');
             },
           },
           b: {
             entry: async () => {
-              await new Promise((r) => setTimeout(r, 10));
+              await new Promise(r => setTimeout(r, 10));
               order.push('entry-b');
             },
           },
@@ -544,7 +544,7 @@ describe('asyncStateMachine', () => {
             on: {
               UNLOCK: {
                 target: 'unlocked',
-                guard: async (ctx) => ctx.unlocked,
+                guard: async ctx => ctx.unlocked,
               },
             },
             exit: exitHook,
@@ -573,7 +573,7 @@ describe('asyncStateMachine', () => {
             on: {
               GO: {
                 target: 'active',
-                guard: async (ctx) => ctx.ready,
+                guard: async ctx => ctx.ready,
               },
             },
           },
@@ -667,7 +667,7 @@ describe('asyncStateMachine', () => {
             on: {
               GO: {
                 target: 'active',
-                guard: (ctx) => ctx.count === 0,
+                guard: ctx => ctx.count === 0,
                 action: (ctx) => { ctx.count++; },
               },
             },
@@ -685,4 +685,23 @@ describe('asyncStateMachine', () => {
       expect(entryHook).toHaveBeenCalledOnce();
     });
   });
+
+  describe('transition into an unknown target state', () => {
+    it('silently moves to a target that has no state node, then dead-ends', () => {
+      const machine = createMachine({
+        initial: 'idle',
+        states: {
+          idle: { on: { GO: 'ghost' } }, // 'ghost' is not defined in states
+        },
+      });
+
+      // Documents current behavior: the transition is accepted, no throw.
+      expect(machine.send('GO')).toBe('ghost');
+      expect(machine.current).toBe('ghost');
+
+      // From the undefined state there are no transitions — further sends are no-ops.
+      expect(machine.send('GO')).toBe('ghost');
+      expect(machine.can('GO')).toBe(false);
+    });
+  });
 });
diff --git a/core/stdlib/src/patterns/behavioral/StateMachine/sync.ts b/core/stdlib/src/patterns/behavioral/StateMachine/sync.ts
index cf10d18..3c9c8c3 100644
--- a/core/stdlib/src/patterns/behavioral/StateMachine/sync.ts
+++ b/core/stdlib/src/patterns/behavioral/StateMachine/sync.ts
@@ -1,6 +1,6 @@
 import { isString } from '../../../types';
 import { BaseStateMachine } from './base';
-import type { SyncStateNodeConfig, ExtractStates, ExtractEvents } from './types';
+import type { ExtractEvents, ExtractStates, SyncStateNodeConfig } from './types';
 
 /**
  * @name StateMachine
@@ -39,7 +39,8 @@ export class StateMachine<
 
     if (isString(transition)) {
       target = transition;
-    } else {
+    }
+    else {
       if (transition.guard && !transition.guard(this.context))
         return this.currentState;
 
diff --git a/core/stdlib/src/patterns/index.ts b/core/stdlib/src/patterns/index.ts
index 6c0db50..1c69a96 100644
--- a/core/stdlib/src/patterns/index.ts
+++ b/core/stdlib/src/patterns/index.ts
@@ -1,3 +1,3 @@
 export * from './behavioral/Command';
 export * from './behavioral/PubSub';
-export * from './behavioral/StateMachine';
\ No newline at end of file
+export * from './behavioral/StateMachine';
diff --git a/core/stdlib/src/structs/BinaryHeap/index.test.ts b/core/stdlib/src/structs/BinaryHeap/index.test.ts
index 02c44ef..cf8bfe1 100644
--- a/core/stdlib/src/structs/BinaryHeap/index.test.ts
+++ b/core/stdlib/src/structs/BinaryHeap/index.test.ts
@@ -3,227 +3,275 @@ import { describe, expect, it } from 'vitest';
 import { BinaryHeap } from '.';
 
 describe('BinaryHeap', () => {
-    describe('constructor', () => {
-        it('should create an empty heap', () => {
-            const heap = new BinaryHeap<number>();
+  describe('constructor', () => {
+    it('should create an empty heap', () => {
+      const heap = new BinaryHeap<number>();
 
-            expect(heap.length).toBe(0);
-            expect(heap.isEmpty).toBe(true);
-        });
-
-        it('should create a heap from single value', () => {
-            const heap = new BinaryHeap(42);
-
-            expect(heap.length).toBe(1);
-            expect(heap.peek()).toBe(42);
-        });
-
-        it('should create a heap from array (heapify)', () => {
-            const heap = new BinaryHeap([5, 3, 8, 1, 4]);
-
-            expect(heap.length).toBe(5);
-            expect(heap.peek()).toBe(1);
-        });
-
-        it('should accept a custom comparator for max-heap', () => {
-            const heap = new BinaryHeap([5, 3, 8, 1, 4], {
-                comparator: (a, b) => b - a,
-            });
-
-            expect(heap.peek()).toBe(8);
-        });
+      expect(heap.length).toBe(0);
+      expect(heap.isEmpty).toBe(true);
     });
 
-    describe('push', () => {
-        it('should insert elements maintaining heap property', () => {
-            const heap = new BinaryHeap<number>();
+    it('should create a heap from single value', () => {
+      const heap = new BinaryHeap(42);
 
-            heap.push(5);
-            heap.push(3);
-            heap.push(8);
-            heap.push(1);
-
-            expect(heap.peek()).toBe(1);
-            expect(heap.length).toBe(4);
-        });
-
-        it('should handle duplicate values', () => {
-            const heap = new BinaryHeap<number>();
-
-            heap.push(3);
-            heap.push(3);
-            heap.push(3);
-
-            expect(heap.length).toBe(3);
-            expect(heap.peek()).toBe(3);
-        });
+      expect(heap.length).toBe(1);
+      expect(heap.peek()).toBe(42);
     });
 
-    describe('pop', () => {
-        it('should return undefined for empty heap', () => {
-            const heap = new BinaryHeap<number>();
+    it('should create a heap from array (heapify)', () => {
+      const heap = new BinaryHeap([5, 3, 8, 1, 4]);
 
-            expect(heap.pop()).toBeUndefined();
-        });
-
-        it('should extract elements in min-heap order', () => {
-            const heap = new BinaryHeap([5, 3, 8, 1, 4, 2, 7, 6]);
-            const sorted: number[] = [];
-
-            while (!heap.isEmpty) {
-                sorted.push(heap.pop()!);
-            }
-
-            expect(sorted).toEqual([1, 2, 3, 4, 5, 6, 7, 8]);
-        });
-
-        it('should extract elements in max-heap order with custom comparator', () => {
-            const heap = new BinaryHeap([5, 3, 8, 1, 4], {
-                comparator: (a, b) => b - a,
-            });
-            const sorted: number[] = [];
-
-            while (!heap.isEmpty) {
-                sorted.push(heap.pop()!);
-            }
-
-            expect(sorted).toEqual([8, 5, 4, 3, 1]);
-        });
-
-        it('should handle single element', () => {
-            const heap = new BinaryHeap(42);
-
-            expect(heap.pop()).toBe(42);
-            expect(heap.isEmpty).toBe(true);
-        });
+      expect(heap.length).toBe(5);
+      expect(heap.peek()).toBe(1);
     });
 
-    describe('peek', () => {
-        it('should return undefined for empty heap', () => {
-            const heap = new BinaryHeap<number>();
+    it('should accept a custom comparator for max-heap', () => {
+      const heap = new BinaryHeap([5, 3, 8, 1, 4], {
+        comparator: (a, b) => b - a,
+      });
 
-            expect(heap.peek()).toBeUndefined();
-        });
-
-        it('should return root without removing it', () => {
-            const heap = new BinaryHeap([5, 3, 1]);
-
-            expect(heap.peek()).toBe(1);
-            expect(heap.length).toBe(3);
-        });
+      expect(heap.peek()).toBe(8);
     });
 
-    describe('clear', () => {
-        it('should remove all elements', () => {
-            const heap = new BinaryHeap([1, 2, 3]);
+    it('should not mutate the input array', () => {
+      const input = [5, 3, 8, 1, 4];
 
-            const result = heap.clear();
+      new BinaryHeap(input);
 
-            expect(heap.length).toBe(0);
-            expect(heap.isEmpty).toBe(true);
-            expect(result).toBe(heap);
-        });
+      expect(input).toEqual([5, 3, 8, 1, 4]);
     });
 
-    describe('toArray', () => {
-        it('should return empty array for empty heap', () => {
-            const heap = new BinaryHeap<number>();
+    it('should not overflow the stack for a very large initial array', () => {
+      const big = Array.from({ length: 200_000 }, (_, i) => 200_000 - i);
 
-            expect(heap.toArray()).toEqual([]);
-        });
+      expect(() => new BinaryHeap(big)).not.toThrow();
+      expect(new BinaryHeap(big).peek()).toBe(1);
+    });
+  });
 
-        it('should return a shallow copy', () => {
-            const heap = new BinaryHeap([3, 1, 2]);
-            const arr = heap.toArray();
+  describe('push', () => {
+    it('should insert elements maintaining heap property', () => {
+      const heap = new BinaryHeap<number>();
 
-            arr.push(99);
+      heap.push(5);
+      heap.push(3);
+      heap.push(8);
+      heap.push(1);
 
-            expect(heap.length).toBe(3);
-        });
+      expect(heap.peek()).toBe(1);
+      expect(heap.length).toBe(4);
     });
 
-    describe('toString', () => {
-        it('should return formatted string', () => {
-            const heap = new BinaryHeap([1, 2, 3]);
+    it('should handle duplicate values', () => {
+      const heap = new BinaryHeap<number>();
 
-            expect(heap.toString()).toBe('BinaryHeap(3)');
-        });
+      heap.push(3);
+      heap.push(3);
+      heap.push(3);
+
+      expect(heap.length).toBe(3);
+      expect(heap.peek()).toBe(3);
+    });
+  });
+
+  describe('pop', () => {
+    it('should return undefined for empty heap', () => {
+      const heap = new BinaryHeap<number>();
+
+      expect(heap.pop()).toBeUndefined();
     });
 
-    describe('iterator', () => {
-        it('should iterate over heap elements', () => {
-            const heap = new BinaryHeap([5, 3, 8, 1]);
-            const elements = [...heap];
+    it('should extract elements in min-heap order', () => {
+      const heap = new BinaryHeap([5, 3, 8, 1, 4, 2, 7, 6]);
+      const sorted: number[] = [];
 
-            expect(elements.length).toBe(4);
-            expect(elements[0]).toBe(1);
-        });
+      while (!heap.isEmpty) {
+        sorted.push(heap.pop()!);
+      }
+
+      expect(sorted).toEqual([1, 2, 3, 4, 5, 6, 7, 8]);
     });
 
-    describe('custom comparator', () => {
-        it('should work with string length comparator', () => {
-            const heap = new BinaryHeap(['banana', 'apple', 'kiwi', 'fig'], {
-                comparator: (a, b) => a.length - b.length,
-            });
+    it('should extract elements in max-heap order with custom comparator', () => {
+      const heap = new BinaryHeap([5, 3, 8, 1, 4], {
+        comparator: (a, b) => b - a,
+      });
+      const sorted: number[] = [];
 
-            expect(heap.pop()).toBe('fig');
-            expect(heap.pop()).toBe('kiwi');
-        });
+      while (!heap.isEmpty) {
+        sorted.push(heap.pop()!);
+      }
 
-        it('should work with object comparator', () => {
-            interface Task {
-                priority: number;
-                name: string;
-            }
-
-            const heap = new BinaryHeap<Task>(
-                [
-                    { priority: 3, name: 'low' },
-                    { priority: 1, name: 'high' },
-                    { priority: 2, name: 'medium' },
-                ],
-                { comparator: (a, b) => a.priority - b.priority },
-            );
-
-            expect(heap.pop()?.name).toBe('high');
-            expect(heap.pop()?.name).toBe('medium');
-            expect(heap.pop()?.name).toBe('low');
-        });
+      expect(sorted).toEqual([8, 5, 4, 3, 1]);
     });
 
-    describe('heapify', () => {
-        it('should correctly heapify large arrays', () => {
-            const values = Array.from({ length: 1000 }, () => Math.random() * 1000 | 0);
-            const heap = new BinaryHeap(values);
-            const sorted: number[] = [];
+    it('should handle single element', () => {
+      const heap = new BinaryHeap(42);
 
-            while (!heap.isEmpty) {
-                sorted.push(heap.pop()!);
-            }
+      expect(heap.pop()).toBe(42);
+      expect(heap.isEmpty).toBe(true);
+    });
+  });
 
-            const expected = [...values].sort((a, b) => a - b);
+  describe('peek', () => {
+    it('should return undefined for empty heap', () => {
+      const heap = new BinaryHeap<number>();
 
-            expect(sorted).toEqual(expected);
-        });
+      expect(heap.peek()).toBeUndefined();
     });
 
-    describe('interleaved operations', () => {
-        it('should maintain heap property with mixed push and pop', () => {
-            const heap = new BinaryHeap<number>();
+    it('should return root without removing it', () => {
+      const heap = new BinaryHeap([5, 3, 1]);
 
-            heap.push(10);
-            heap.push(5);
-            expect(heap.pop()).toBe(5);
-
-            heap.push(3);
-            heap.push(7);
-            expect(heap.pop()).toBe(3);
-
-            heap.push(1);
-            expect(heap.pop()).toBe(1);
-            expect(heap.pop()).toBe(7);
-            expect(heap.pop()).toBe(10);
-            expect(heap.pop()).toBeUndefined();
-        });
+      expect(heap.peek()).toBe(1);
+      expect(heap.length).toBe(3);
     });
+  });
+
+  describe('clear', () => {
+    it('should remove all elements', () => {
+      const heap = new BinaryHeap([1, 2, 3]);
+
+      const result = heap.clear();
+
+      expect(heap.length).toBe(0);
+      expect(heap.isEmpty).toBe(true);
+      expect(result).toBe(heap);
+    });
+  });
+
+  describe('toArray', () => {
+    it('should return empty array for empty heap', () => {
+      const heap = new BinaryHeap<number>();
+
+      expect(heap.toArray()).toEqual([]);
+    });
+
+    it('should return a shallow copy', () => {
+      const heap = new BinaryHeap([3, 1, 2]);
+      const arr = heap.toArray();
+
+      arr.push(99);
+
+      expect(heap.length).toBe(3);
+    });
+  });
+
+  describe('toString', () => {
+    it('should return formatted string', () => {
+      const heap = new BinaryHeap([1, 2, 3]);
+
+      expect(heap.toString()).toBe('BinaryHeap(3)');
+    });
+  });
+
+  describe('iterator', () => {
+    it('should iterate over heap elements', () => {
+      const heap = new BinaryHeap([5, 3, 8, 1]);
+      const elements = [...heap];
+
+      expect(elements.length).toBe(4);
+      expect(elements[0]).toBe(1);
+    });
+  });
+
+  describe('custom comparator', () => {
+    it('should work with string length comparator', () => {
+      const heap = new BinaryHeap(['banana', 'apple', 'kiwi', 'fig'], {
+        comparator: (a, b) => a.length - b.length,
+      });
+
+      expect(heap.pop()).toBe('fig');
+      expect(heap.pop()).toBe('kiwi');
+    });
+
+    it('should work with object comparator', () => {
+      interface Task {
+        priority: number;
+        name: string;
+      }
+
+      const heap = new BinaryHeap<Task>(
+        [
+          { priority: 3, name: 'low' },
+          { priority: 1, name: 'high' },
+          { priority: 2, name: 'medium' },
+        ],
+        { comparator: (a, b) => a.priority - b.priority },
+      );
+
+      expect(heap.pop()?.name).toBe('high');
+      expect(heap.pop()?.name).toBe('medium');
+      expect(heap.pop()?.name).toBe('low');
+    });
+  });
+
+  describe('heapify', () => {
+    it('should correctly heapify large arrays', () => {
+      const values = Array.from({ length: 1000 }, () => Math.random() * 1000 | 0);
+      const heap = new BinaryHeap(values);
+      const sorted: number[] = [];
+
+      while (!heap.isEmpty) {
+        sorted.push(heap.pop()!);
+      }
+
+      const expected = [...values].sort((a, b) => a - b);
+
+      expect(sorted).toEqual(expected);
+    });
+  });
+
+  describe('interleaved operations', () => {
+    it('should maintain heap property with mixed push and pop', () => {
+      const heap = new BinaryHeap<number>();
+
+      heap.push(10);
+      heap.push(5);
+      expect(heap.pop()).toBe(5);
+
+      heap.push(3);
+      heap.push(7);
+      expect(heap.pop()).toBe(3);
+
+      heap.push(1);
+      expect(heap.pop()).toBe(1);
+      expect(heap.pop()).toBe(7);
+      expect(heap.pop()).toBe(10);
+      expect(heap.pop()).toBeUndefined();
+    });
+  });
+
+  describe('nullable / falsy elements', () => {
+    it('peek/pop return a legitimately stored null root (not undefined)', () => {
+      // Comparator that ranks null before any number.
+      const heap = new BinaryHeap<number | null>([5, null, 3], {
+        comparator: (a, b) => (a === null ? -1 : b === null ? 1 : a - b),
+      });
+
+      expect(heap.length).toBe(3);
+      expect(heap.peek()).toBeNull();
+      expect(heap.pop()).toBeNull();
+      expect(heap.length).toBe(2);
+    });
+
+    it('peek returns a 0 root rather than collapsing to undefined', () => {
+      const heap = new BinaryHeap([0, 5, 3]);
+
+      expect(heap.peek()).toBe(0);
+    });
+  });
+
+  describe('async iteration', () => {
+    it('yields every element with the root (min) first', async () => {
+      const heap = new BinaryHeap([5, 3, 8, 1]);
+      const out: number[] = [];
+
+      for await (const value of heap)
+        out.push(value);
+
+      expect(out[0]).toBe(1); // heap array order — root first
+      expect([...out].sort((a, b) => a - b)).toEqual([1, 3, 5, 8]);
+    });
+  });
 });
diff --git a/core/stdlib/src/structs/BinaryHeap/index.ts b/core/stdlib/src/structs/BinaryHeap/index.ts
index e5b04cf..60e7449 100644
--- a/core/stdlib/src/structs/BinaryHeap/index.ts
+++ b/core/stdlib/src/structs/BinaryHeap/index.ts
@@ -1,11 +1,10 @@
-import { first } from '../../arrays';
 import { isArray } from '../../types';
 import type { BinaryHeapLike, Comparator } from './types';
 
 export type { BinaryHeapLike, Comparator } from './types';
 
 export interface BinaryHeapOptions<T> {
-    comparator?: Comparator<T>;
+  comparator?: Comparator<T>;
 }
 
 /**
@@ -27,194 +26,199 @@ const defaultComparator: Comparator<any> = (a: number, b: number) => a - b;
  * @template T The type of elements stored in the heap
  */
 export class BinaryHeap<T> implements BinaryHeapLike<T> {
-    /**
+  /**
      * The comparator function used to order elements
      *
      * @private
      * @type {Comparator<T>}
      */
-    private readonly comparator: Comparator<T>;
+  private readonly comparator: Comparator<T>;
 
-    /**
+  /**
      * Internal flat array backing the heap
      *
      * @private
      * @type {T[]}
      */
-    private readonly heap: T[] = [];
+  private readonly heap: T[] = [];
 
-    /**
+  /**
      * Creates an instance of BinaryHeap
      *
      * @param {(T[] | T)} [initialValues] The initial values to heapify
      * @param {BinaryHeapOptions<T>} [options] Heap configuration
      */
-    constructor(initialValues?: T[] | T, options?: BinaryHeapOptions<T>) {
-        this.comparator = options?.comparator ?? defaultComparator;
+  constructor(initialValues?: T[] | T, options?: BinaryHeapOptions<T>) {
+    this.comparator = options?.comparator ?? defaultComparator;
 
-        if (initialValues !== null && initialValues !== undefined) {
-            const items = isArray(initialValues) ? initialValues : [initialValues];
-            this.heap.push(...items);
-            this.heapify();
-        }
+    if (initialValues !== null && initialValues !== undefined) {
+      const items = isArray(initialValues) ? initialValues : [initialValues];
+
+      // Avoid push(...items): spreading a large array as arguments overflows the call stack.
+      for (const item of items)
+        this.heap.push(item);
+
+      this.heapify();
     }
+  }
 
-    /**
+  /**
      * Gets the number of elements in the heap
      * @returns {number} The number of elements in the heap
      */
-    public get length(): number {
-        return this.heap.length;
-    }
+  public get length(): number {
+    return this.heap.length;
+  }
 
-    /**
+  /**
      * Checks if the heap is empty
      * @returns {boolean} `true` if the heap is empty, `false` otherwise
      */
-    public get isEmpty(): boolean {
-        return this.heap.length === 0;
-    }
+  public get isEmpty(): boolean {
+    return this.heap.length === 0;
+  }
 
-    /**
+  /**
      * Pushes an element into the heap
      * @param {T} element The element to insert
      */
-    public push(element: T): void {
-        this.heap.push(element);
-        this.siftUp(this.heap.length - 1);
-    }
+  public push(element: T): void {
+    this.heap.push(element);
+    this.siftUp(this.heap.length - 1);
+  }
 
-    /**
+  /**
      * Removes and returns the root element (min or max depending on comparator)
      * @returns {T | undefined} The root element, or `undefined` if the heap is empty
      */
-    public pop(): T | undefined {
-        if (this.heap.length === 0) return undefined;
+  public pop(): T | undefined {
+    if (this.heap.length === 0) return undefined;
 
-        const root = first(this.heap)!;
-        const last = this.heap.pop()!;
+    const root = this.heap[0]!;
+    const last = this.heap.pop()!;
 
-        if (this.heap.length > 0) {
-            this.heap[0] = last;
-            this.siftDown(0);
-        }
-
-        return root;
+    if (this.heap.length > 0) {
+      this.heap[0] = last;
+      this.siftDown(0);
     }
 
-    /**
+    return root;
+  }
+
+  /**
      * Returns the root element without removing it
      * @returns {T | undefined} The root element, or `undefined` if the heap is empty
      */
-    public peek(): T | undefined {
-        return first(this.heap);
-    }
+  public peek(): T | undefined {
+    // Direct index preserves a legitimately stored null/undefined root (length is the empty check).
+    return this.heap.length === 0 ? undefined : this.heap[0];
+  }
 
-    /**
+  /**
      * Removes all elements from the heap
      * @returns {this} The heap instance for chaining
      */
-    public clear(): this {
-        this.heap.length = 0;
-        return this;
-    }
+  public clear(): this {
+    this.heap.length = 0;
+    return this;
+  }
 
-    /**
+  /**
      * Returns a shallow copy of the heap elements as an array (heap order, not sorted)
      * @returns {T[]} Array of elements in heap order
      */
-    public toArray(): T[] {
-        return this.heap.slice();
-    }
+  public toArray(): T[] {
+    return this.heap.slice();
+  }
 
-    /**
+  /**
      * Returns a string representation of the heap
      * @returns {string} String representation
      */
-    public toString(): string {
-        return `BinaryHeap(${this.heap.length})`;
-    }
+  public toString(): string {
+    return `BinaryHeap(${this.heap.length})`;
+  }
 
-    /**
+  /**
      * Iterator over heap elements in heap order
      */
-    public *[Symbol.iterator](): Iterator<T> {
-        yield* this.heap;
-    }
+  public* [Symbol.iterator](): Iterator<T> {
+    yield* this.heap;
+  }
 
-    /**
+  /**
      * Async iterator over heap elements in heap order
      */
-    public async *[Symbol.asyncIterator](): AsyncIterator<T> {
-        for (const element of this.heap)
-            yield element;
-    }
+  public async* [Symbol.asyncIterator](): AsyncIterator<T> {
+    for (const element of this.heap)
+      yield element;
+  }
 
-    /**
+  /**
      * Restores heap property by sifting an element up
      *
      * @private
      * @param {number} index The index of the element to sift up
      */
-    private siftUp(index: number): void {
-        const heap = this.heap;
-        const cmp = this.comparator;
+  private siftUp(index: number): void {
+    const heap = this.heap;
+    const cmp = this.comparator;
 
-        while (index > 0) {
-            const parent = (index - 1) >> 1;
+    while (index > 0) {
+      const parent = (index - 1) >> 1;
 
-            if (cmp(heap[index]!, heap[parent]!) >= 0) break;
+      if (cmp(heap[index]!, heap[parent]!) >= 0) break;
 
-            const temp = heap[index]!;
-            heap[index] = heap[parent]!;
-            heap[parent] = temp;
+      const temp = heap[index]!;
+      heap[index] = heap[parent]!;
+      heap[parent] = temp;
 
-            index = parent;
-        }
+      index = parent;
     }
+  }
 
-    /**
+  /**
      * Restores heap property by sifting an element down
      *
      * @private
      * @param {number} index The index of the element to sift down
      */
-    private siftDown(index: number): void {
-        const heap = this.heap;
-        const cmp = this.comparator;
-        const length = heap.length;
+  private siftDown(index: number): void {
+    const heap = this.heap;
+    const cmp = this.comparator;
+    const length = heap.length;
 
-        while (true) {
-            let smallest = index;
-            const left = 2 * index + 1;
-            const right = 2 * index + 2;
+    while (true) {
+      let smallest = index;
+      const left = 2 * index + 1;
+      const right = 2 * index + 2;
 
-            if (left < length && cmp(heap[left]!, heap[smallest]!) < 0) {
-                smallest = left;
-            }
+      if (left < length && cmp(heap[left]!, heap[smallest]!) < 0) {
+        smallest = left;
+      }
 
-            if (right < length && cmp(heap[right]!, heap[smallest]!) < 0) {
-                smallest = right;
-            }
+      if (right < length && cmp(heap[right]!, heap[smallest]!) < 0) {
+        smallest = right;
+      }
 
-            if (smallest === index) break;
+      if (smallest === index) break;
 
-            const temp = heap[index]!;
-            heap[index] = heap[smallest]!;
-            heap[smallest] = temp;
+      const temp = heap[index]!;
+      heap[index] = heap[smallest]!;
+      heap[smallest] = temp;
 
-            index = smallest;
-        }
+      index = smallest;
     }
+  }
 
-    /**
+  /**
      * Builds heap from unordered array in O(n) using Floyd's algorithm
      *
      * @private
      */
-    private heapify(): void {
-        for (let i = (this.heap.length >> 1) - 1; i >= 0; i--) {
-            this.siftDown(i);
-        }
+  private heapify(): void {
+    for (let i = (this.heap.length >> 1) - 1; i >= 0; i--) {
+      this.siftDown(i);
     }
+  }
 }
diff --git a/core/stdlib/src/structs/CircularBuffer/index.test.ts b/core/stdlib/src/structs/CircularBuffer/index.test.ts
index e34a5b8..8e07627 100644
--- a/core/stdlib/src/structs/CircularBuffer/index.test.ts
+++ b/core/stdlib/src/structs/CircularBuffer/index.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { CircularBuffer } from '.';
 
 describe('circularBuffer', () => {
diff --git a/core/stdlib/src/structs/CircularBuffer/index.ts b/core/stdlib/src/structs/CircularBuffer/index.ts
index 9f59972..b12a4ad 100644
--- a/core/stdlib/src/structs/CircularBuffer/index.ts
+++ b/core/stdlib/src/structs/CircularBuffer/index.ts
@@ -53,7 +53,8 @@ export class CircularBuffer<T> implements CircularBufferLike<T> {
     const requested = Math.max(items.length, initialCapacity ?? 0);
     const cap = Math.max(MIN_CAPACITY, nextPowerOfTwo(requested));
 
-    this.buffer = Array.from<T | undefined>({ length: cap });
+    // eslint-disable-next-line unicorn/no-new-array -- preallocate exact-size ring (Array.from({length}) is ~40x slower)
+    this.buffer = new Array<T | undefined>(cap);
 
     for (const item of items)
       this.pushBack(item);
@@ -190,7 +191,8 @@ export class CircularBuffer<T> implements CircularBufferLike<T> {
    * @returns {this}
    */
   clear() {
-    this.buffer = Array.from<T | undefined>({ length: MIN_CAPACITY });
+    // eslint-disable-next-line unicorn/no-new-array -- preallocate exact-size ring (Array.from({length}) is ~40x slower)
+    this.buffer = new Array<T | undefined>(MIN_CAPACITY);
     this.head = 0;
     this.count = 0;
 
@@ -203,7 +205,8 @@ export class CircularBuffer<T> implements CircularBufferLike<T> {
    * @returns {T[]}
    */
   toArray() {
-    const result = Array.from<T>({ length: this.count });
+    // eslint-disable-next-line unicorn/no-new-array -- preallocate exact-size result (filled below; Array.from({length}) is ~40x slower)
+    const result = new Array<T>(this.count);
 
     for (let i = 0; i < this.count; i++)
       result[i] = this.buffer[(this.head + i) & (this.buffer.length - 1)] as T;
@@ -225,8 +228,12 @@ export class CircularBuffer<T> implements CircularBufferLike<T> {
    *
    * @returns {IterableIterator<T>}
    */
-  [Symbol.iterator]() {
-    return this.toArray()[Symbol.iterator]();
+  * [Symbol.iterator](): IterableIterator<T> {
+    // Lazy walk over the ring — no intermediate array snapshot allocation.
+    const mask = this.buffer.length - 1;
+
+    for (let i = 0; i < this.count; i++)
+      yield this.buffer[(this.head + i) & mask] as T;
   }
 
   /**
@@ -234,7 +241,7 @@ export class CircularBuffer<T> implements CircularBufferLike<T> {
    *
    * @returns {AsyncIterableIterator<T>}
    */
-  async *[Symbol.asyncIterator]() {
+  async* [Symbol.asyncIterator]() {
     for (const element of this)
       yield element;
   }
@@ -246,7 +253,8 @@ export class CircularBuffer<T> implements CircularBufferLike<T> {
    */
   private grow() {
     const newCapacity = this.buffer.length << 1;
-    const newBuffer = Array.from<T | undefined>({ length: newCapacity });
+    // eslint-disable-next-line unicorn/no-new-array -- preallocate exact-size ring on the amortized push hot path
+    const newBuffer = new Array<T | undefined>(newCapacity);
 
     for (let i = 0; i < this.count; i++)
       newBuffer[i] = this.buffer[(this.head + i) & (this.buffer.length - 1)];
diff --git a/core/stdlib/src/structs/Deque/index.test.ts b/core/stdlib/src/structs/Deque/index.test.ts
index cb71006..f050ea8 100644
--- a/core/stdlib/src/structs/Deque/index.test.ts
+++ b/core/stdlib/src/structs/Deque/index.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { Deque } from '.';
 
 describe('deque', () => {
@@ -31,6 +31,22 @@ describe('deque', () => {
       expect(deque.length).toBe(0);
       expect(deque.isFull).toBe(false);
     });
+
+    it('throw when initial values exceed maxSize', () => {
+      expect(() => new Deque([1, 2, 3, 4, 5], { maxSize: 3 })).toThrow(RangeError);
+    });
+
+    it('enforce maxSize against subsequent pushes', () => {
+      const deque = new Deque([1, 2], { maxSize: 2 });
+
+      expect(deque.isFull).toBe(true);
+      expect(() => deque.pushBack(3)).toThrow(RangeError);
+      expect(() => deque.pushFront(0)).toThrow(RangeError);
+
+      deque.popFront();
+      expect(deque.isFull).toBe(false);
+      expect(() => deque.pushBack(3)).not.toThrow();
+    });
   });
 
   describe('pushBack', () => {
diff --git a/core/stdlib/src/structs/Deque/index.ts b/core/stdlib/src/structs/Deque/index.ts
index 05847bb..3a32317 100644
--- a/core/stdlib/src/structs/Deque/index.ts
+++ b/core/stdlib/src/structs/Deque/index.ts
@@ -42,6 +42,9 @@ export class Deque<T> implements DequeLike<T> {
   constructor(initialValues?: T[] | T, options?: DequeOptions) {
     this.maxSize = options?.maxSize ?? Infinity;
     this.buffer = new CircularBuffer(initialValues);
+
+    if (this.buffer.length > this.maxSize)
+      throw new RangeError('Deque: initial values exceed maxSize');
   }
 
   /**
@@ -65,7 +68,7 @@ export class Deque<T> implements DequeLike<T> {
    * @returns {boolean} `true` if the deque is full, `false` otherwise
    */
   get isFull() {
-    return this.buffer.length === this.maxSize;
+    return this.buffer.length >= this.maxSize;
   }
 
   /**
@@ -173,7 +176,7 @@ export class Deque<T> implements DequeLike<T> {
    *
    * @returns {AsyncIterableIterator<T>}
    */
-  async *[Symbol.asyncIterator]() {
+  async* [Symbol.asyncIterator]() {
     for (const element of this.buffer)
       yield element;
   }
diff --git a/core/stdlib/src/structs/LinkedList/index.test.ts b/core/stdlib/src/structs/LinkedList/index.test.ts
index a8ef9ed..fa35753 100644
--- a/core/stdlib/src/structs/LinkedList/index.test.ts
+++ b/core/stdlib/src/structs/LinkedList/index.test.ts
@@ -3,404 +3,418 @@ import { describe, expect, it } from 'vitest';
 import { LinkedList } from '.';
 
 describe('LinkedList', () => {
-    describe('constructor', () => {
-        it('should create an empty list', () => {
-            const list = new LinkedList<number>();
+  describe('constructor', () => {
+    it('should create an empty list', () => {
+      const list = new LinkedList<number>();
 
-            expect(list.length).toBe(0);
-            expect(list.isEmpty).toBe(true);
-            expect(list.head).toBeUndefined();
-            expect(list.tail).toBeUndefined();
-        });
-
-        it('should create a list from single value', () => {
-            const list = new LinkedList(42);
-
-            expect(list.length).toBe(1);
-            expect(list.peekFront()).toBe(42);
-            expect(list.peekBack()).toBe(42);
-        });
-
-        it('should create a list from array', () => {
-            const list = new LinkedList([1, 2, 3]);
-
-            expect(list.length).toBe(3);
-            expect(list.peekFront()).toBe(1);
-            expect(list.peekBack()).toBe(3);
-        });
+      expect(list.length).toBe(0);
+      expect(list.isEmpty).toBe(true);
+      expect(list.head).toBeUndefined();
+      expect(list.tail).toBeUndefined();
     });
 
-    describe('pushBack', () => {
-        it('should append to empty list', () => {
-            const list = new LinkedList<number>();
+    it('should create a list from single value', () => {
+      const list = new LinkedList(42);
 
-            const node = list.pushBack(1);
-
-            expect(list.length).toBe(1);
-            expect(node.value).toBe(1);
-            expect(list.head).toBe(node);
-            expect(list.tail).toBe(node);
-        });
-
-        it('should append to non-empty list', () => {
-            const list = new LinkedList([1, 2]);
-
-            list.pushBack(3);
-
-            expect(list.length).toBe(3);
-            expect(list.peekBack()).toBe(3);
-            expect(list.peekFront()).toBe(1);
-        });
-
-        it('should return the created node', () => {
-            const list = new LinkedList<number>();
-
-            const node = list.pushBack(5);
-
-            expect(node.value).toBe(5);
-            expect(node.prev).toBeUndefined();
-            expect(node.next).toBeUndefined();
-        });
+      expect(list.length).toBe(1);
+      expect(list.peekFront()).toBe(42);
+      expect(list.peekBack()).toBe(42);
     });
 
-    describe('pushFront', () => {
-        it('should prepend to empty list', () => {
-            const list = new LinkedList<number>();
+    it('should create a list from array', () => {
+      const list = new LinkedList([1, 2, 3]);
 
-            const node = list.pushFront(1);
+      expect(list.length).toBe(3);
+      expect(list.peekFront()).toBe(1);
+      expect(list.peekBack()).toBe(3);
+    });
+  });
 
-            expect(list.length).toBe(1);
-            expect(list.head).toBe(node);
-            expect(list.tail).toBe(node);
-        });
+  describe('pushBack', () => {
+    it('should append to empty list', () => {
+      const list = new LinkedList<number>();
 
-        it('should prepend to non-empty list', () => {
-            const list = new LinkedList([2, 3]);
+      const node = list.pushBack(1);
 
-            list.pushFront(1);
-
-            expect(list.length).toBe(3);
-            expect(list.peekFront()).toBe(1);
-            expect(list.peekBack()).toBe(3);
-        });
+      expect(list.length).toBe(1);
+      expect(node.value).toBe(1);
+      expect(list.head).toBe(node);
+      expect(list.tail).toBe(node);
     });
 
-    describe('popBack', () => {
-        it('should return undefined for empty list', () => {
-            const list = new LinkedList<number>();
+    it('should append to non-empty list', () => {
+      const list = new LinkedList([1, 2]);
 
-            expect(list.popBack()).toBeUndefined();
-        });
+      list.pushBack(3);
 
-        it('should remove and return last value', () => {
-            const list = new LinkedList([1, 2, 3]);
-
-            expect(list.popBack()).toBe(3);
-            expect(list.length).toBe(2);
-            expect(list.peekBack()).toBe(2);
-        });
-
-        it('should handle single element', () => {
-            const list = new LinkedList(1);
-
-            expect(list.popBack()).toBe(1);
-            expect(list.isEmpty).toBe(true);
-            expect(list.head).toBeUndefined();
-            expect(list.tail).toBeUndefined();
-        });
+      expect(list.length).toBe(3);
+      expect(list.peekBack()).toBe(3);
+      expect(list.peekFront()).toBe(1);
     });
 
-    describe('popFront', () => {
-        it('should return undefined for empty list', () => {
-            const list = new LinkedList<number>();
+    it('should return the created node', () => {
+      const list = new LinkedList<number>();
 
-            expect(list.popFront()).toBeUndefined();
-        });
+      const node = list.pushBack(5);
 
-        it('should remove and return first value', () => {
-            const list = new LinkedList([1, 2, 3]);
+      expect(node.value).toBe(5);
+      expect(node.prev).toBeUndefined();
+      expect(node.next).toBeUndefined();
+    });
+  });
 
-            expect(list.popFront()).toBe(1);
-            expect(list.length).toBe(2);
-            expect(list.peekFront()).toBe(2);
-        });
+  describe('pushFront', () => {
+    it('should prepend to empty list', () => {
+      const list = new LinkedList<number>();
 
-        it('should handle single element', () => {
-            const list = new LinkedList(1);
+      const node = list.pushFront(1);
 
-            expect(list.popFront()).toBe(1);
-            expect(list.isEmpty).toBe(true);
-            expect(list.head).toBeUndefined();
-            expect(list.tail).toBeUndefined();
-        });
+      expect(list.length).toBe(1);
+      expect(list.head).toBe(node);
+      expect(list.tail).toBe(node);
     });
 
-    describe('peekBack', () => {
-        it('should return undefined for empty list', () => {
-            const list = new LinkedList<number>();
+    it('should prepend to non-empty list', () => {
+      const list = new LinkedList([2, 3]);
 
-            expect(list.peekBack()).toBeUndefined();
-        });
+      list.pushFront(1);
 
-        it('should return last value without removing', () => {
-            const list = new LinkedList([1, 2, 3]);
+      expect(list.length).toBe(3);
+      expect(list.peekFront()).toBe(1);
+      expect(list.peekBack()).toBe(3);
+    });
+  });
 
-            expect(list.peekBack()).toBe(3);
-            expect(list.length).toBe(3);
-        });
+  describe('popBack', () => {
+    it('should return undefined for empty list', () => {
+      const list = new LinkedList<number>();
+
+      expect(list.popBack()).toBeUndefined();
     });
 
-    describe('peekFront', () => {
-        it('should return undefined for empty list', () => {
-            const list = new LinkedList<number>();
+    it('should remove and return last value', () => {
+      const list = new LinkedList([1, 2, 3]);
 
-            expect(list.peekFront()).toBeUndefined();
-        });
-
-        it('should return first value without removing', () => {
-            const list = new LinkedList([1, 2, 3]);
-
-            expect(list.peekFront()).toBe(1);
-            expect(list.length).toBe(3);
-        });
+      expect(list.popBack()).toBe(3);
+      expect(list.length).toBe(2);
+      expect(list.peekBack()).toBe(2);
+      // tail pointer must be rewired and detached
+      expect(list.tail!.value).toBe(2);
+      expect(list.tail!.next).toBeUndefined();
+      expect(list.peekFront()).toBe(1);
     });
 
-    describe('insertBefore', () => {
-        it('should insert before head', () => {
-            const list = new LinkedList<number>();
-            const node = list.pushBack(2);
+    it('should handle single element', () => {
+      const list = new LinkedList(1);
 
-            list.insertBefore(node, 1);
+      expect(list.popBack()).toBe(1);
+      expect(list.isEmpty).toBe(true);
+      expect(list.head).toBeUndefined();
+      expect(list.tail).toBeUndefined();
+    });
+  });
 
-            expect(list.peekFront()).toBe(1);
-            expect(list.peekBack()).toBe(2);
-            expect(list.length).toBe(2);
-        });
+  describe('popFront', () => {
+    it('should return undefined for empty list', () => {
+      const list = new LinkedList<number>();
 
-        it('should insert before middle node', () => {
-            const list = new LinkedList([1, 3]);
-            const tail = list.tail!;
-
-            list.insertBefore(tail, 2);
-
-            expect(list.toArray()).toEqual([1, 2, 3]);
-        });
-
-        it('should return the created node', () => {
-            const list = new LinkedList<number>();
-            const existing = list.pushBack(2);
-
-            const newNode = list.insertBefore(existing, 1);
-
-            expect(newNode.value).toBe(1);
-            expect(newNode.next).toBe(existing);
-        });
+      expect(list.popFront()).toBeUndefined();
     });
 
-    describe('insertAfter', () => {
-        it('should insert after tail', () => {
-            const list = new LinkedList<number>();
-            const node = list.pushBack(1);
+    it('should remove and return first value', () => {
+      const list = new LinkedList([1, 2, 3]);
 
-            list.insertAfter(node, 2);
-
-            expect(list.peekFront()).toBe(1);
-            expect(list.peekBack()).toBe(2);
-            expect(list.length).toBe(2);
-        });
-
-        it('should insert after middle node', () => {
-            const list = new LinkedList([1, 3]);
-            const head = list.head!;
-
-            list.insertAfter(head, 2);
-
-            expect(list.toArray()).toEqual([1, 2, 3]);
-        });
-
-        it('should return the created node', () => {
-            const list = new LinkedList<number>();
-            const existing = list.pushBack(1);
-
-            const newNode = list.insertAfter(existing, 2);
-
-            expect(newNode.value).toBe(2);
-            expect(newNode.prev).toBe(existing);
-        });
+      expect(list.popFront()).toBe(1);
+      expect(list.length).toBe(2);
+      expect(list.peekFront()).toBe(2);
+      // head pointer must be rewired and detached
+      expect(list.head!.value).toBe(2);
+      expect(list.head!.prev).toBeUndefined();
+      expect(list.peekBack()).toBe(3);
     });
 
-    describe('remove', () => {
-        it('should remove head node', () => {
-            const list = new LinkedList([1, 2, 3]);
-            const head = list.head!;
+    it('should handle single element', () => {
+      const list = new LinkedList(1);
 
-            const value = list.remove(head);
+      expect(list.popFront()).toBe(1);
+      expect(list.isEmpty).toBe(true);
+      expect(list.head).toBeUndefined();
+      expect(list.tail).toBeUndefined();
+    });
+  });
 
-            expect(value).toBe(1);
-            expect(list.length).toBe(2);
-            expect(list.peekFront()).toBe(2);
-        });
+  describe('peekBack', () => {
+    it('should return undefined for empty list', () => {
+      const list = new LinkedList<number>();
 
-        it('should remove tail node', () => {
-            const list = new LinkedList([1, 2, 3]);
-            const tail = list.tail!;
-
-            const value = list.remove(tail);
-
-            expect(value).toBe(3);
-            expect(list.length).toBe(2);
-            expect(list.peekBack()).toBe(2);
-        });
-
-        it('should remove middle node', () => {
-            const list = new LinkedList([1, 2, 3]);
-            const middle = list.head!.next!;
-
-            const value = list.remove(middle);
-
-            expect(value).toBe(2);
-            expect(list.toArray()).toEqual([1, 3]);
-        });
-
-        it('should remove single element', () => {
-            const list = new LinkedList<number>();
-            const node = list.pushBack(1);
-
-            list.remove(node);
-
-            expect(list.isEmpty).toBe(true);
-            expect(list.head).toBeUndefined();
-            expect(list.tail).toBeUndefined();
-        });
-
-        it('should detach the removed node', () => {
-            const list = new LinkedList([1, 2, 3]);
-            const middle = list.head!.next!;
-
-            list.remove(middle);
-
-            expect(middle.prev).toBeUndefined();
-            expect(middle.next).toBeUndefined();
-        });
+      expect(list.peekBack()).toBeUndefined();
     });
 
-    describe('clear', () => {
-        it('should remove all elements', () => {
-            const list = new LinkedList([1, 2, 3]);
+    it('should return last value without removing', () => {
+      const list = new LinkedList([1, 2, 3]);
 
-            const result = list.clear();
+      expect(list.peekBack()).toBe(3);
+      expect(list.length).toBe(3);
+    });
+  });
 
-            expect(list.length).toBe(0);
-            expect(list.isEmpty).toBe(true);
-            expect(list.head).toBeUndefined();
-            expect(list.tail).toBeUndefined();
-            expect(result).toBe(list);
-        });
+  describe('peekFront', () => {
+    it('should return undefined for empty list', () => {
+      const list = new LinkedList<number>();
+
+      expect(list.peekFront()).toBeUndefined();
     });
 
-    describe('toArray', () => {
-        it('should return empty array for empty list', () => {
-            const list = new LinkedList<number>();
+    it('should return first value without removing', () => {
+      const list = new LinkedList([1, 2, 3]);
 
-            expect(list.toArray()).toEqual([]);
-        });
+      expect(list.peekFront()).toBe(1);
+      expect(list.length).toBe(3);
+    });
+  });
 
-        it('should return values from head to tail', () => {
-            const list = new LinkedList([1, 2, 3]);
+  describe('insertBefore', () => {
+    it('should insert before head', () => {
+      const list = new LinkedList<number>();
+      const node = list.pushBack(2);
 
-            expect(list.toArray()).toEqual([1, 2, 3]);
-        });
+      const inserted = list.insertBefore(node, 1);
+
+      expect(list.peekFront()).toBe(1);
+      expect(list.peekBack()).toBe(2);
+      expect(list.length).toBe(2);
+      // new node becomes the head with no prev
+      expect(list.head).toBe(inserted);
+      expect(inserted.prev).toBeUndefined();
     });
 
-    describe('toString', () => {
-        it('should return comma-separated values', () => {
-            const list = new LinkedList([1, 2, 3]);
+    it('should insert before middle node', () => {
+      const list = new LinkedList([1, 3]);
+      const tail = list.tail!;
 
-            expect(list.toString()).toBe('1,2,3');
-        });
+      list.insertBefore(tail, 2);
+
+      expect(list.toArray()).toEqual([1, 2, 3]);
     });
 
-    describe('iterator', () => {
-        it('should iterate from head to tail', () => {
-            const list = new LinkedList([1, 2, 3]);
+    it('should return the created node', () => {
+      const list = new LinkedList<number>();
+      const existing = list.pushBack(2);
 
-            expect([...list]).toEqual([1, 2, 3]);
-        });
+      const newNode = list.insertBefore(existing, 1);
 
-        it('should yield nothing for empty list', () => {
-            const list = new LinkedList<number>();
+      expect(newNode.value).toBe(1);
+      expect(newNode.next).toBe(existing);
+    });
+  });
 
-            expect([...list]).toEqual([]);
-        });
+  describe('insertAfter', () => {
+    it('should insert after tail', () => {
+      const list = new LinkedList<number>();
+      const node = list.pushBack(1);
+
+      const inserted = list.insertAfter(node, 2);
+
+      expect(list.peekFront()).toBe(1);
+      expect(list.peekBack()).toBe(2);
+      // new node becomes the tail with no next
+      expect(list.tail).toBe(inserted);
+      expect(inserted.next).toBeUndefined();
+      expect(list.length).toBe(2);
     });
 
-    describe('async iterator', () => {
-        it('should async iterate from head to tail', async () => {
-            const list = new LinkedList([1, 2, 3]);
-            const result: number[] = [];
+    it('should insert after middle node', () => {
+      const list = new LinkedList([1, 3]);
+      const head = list.head!;
 
-            for await (const value of list)
-                result.push(value);
+      list.insertAfter(head, 2);
 
-            expect(result).toEqual([1, 2, 3]);
-        });
+      expect(list.toArray()).toEqual([1, 2, 3]);
     });
 
-    describe('node linking', () => {
-        it('should maintain correct prev/next references', () => {
-            const list = new LinkedList<number>();
-            const a = list.pushBack(1);
-            const b = list.pushBack(2);
-            const c = list.pushBack(3);
+    it('should return the created node', () => {
+      const list = new LinkedList<number>();
+      const existing = list.pushBack(1);
 
-            expect(a.next).toBe(b);
-            expect(b.prev).toBe(a);
-            expect(b.next).toBe(c);
-            expect(c.prev).toBe(b);
-            expect(a.prev).toBeUndefined();
-            expect(c.next).toBeUndefined();
-        });
+      const newNode = list.insertAfter(existing, 2);
 
-        it('should update links after removal', () => {
-            const list = new LinkedList<number>();
-            const a = list.pushBack(1);
-            const b = list.pushBack(2);
-            const c = list.pushBack(3);
+      expect(newNode.value).toBe(2);
+      expect(newNode.prev).toBe(existing);
+    });
+  });
 
-            list.remove(b);
+  describe('remove', () => {
+    it('should remove head node', () => {
+      const list = new LinkedList([1, 2, 3]);
+      const head = list.head!;
 
-            expect(a.next).toBe(c);
-            expect(c.prev).toBe(a);
-        });
+      const value = list.remove(head);
+
+      expect(value).toBe(1);
+      expect(list.length).toBe(2);
+      expect(list.peekFront()).toBe(2);
     });
 
-    describe('interleaved operations', () => {
-        it('should handle mixed push/pop from both ends', () => {
-            const list = new LinkedList<number>();
+    it('should remove tail node', () => {
+      const list = new LinkedList([1, 2, 3]);
+      const tail = list.tail!;
 
-            list.pushBack(1);
-            list.pushBack(2);
-            list.pushFront(0);
+      const value = list.remove(tail);
 
-            expect(list.popFront()).toBe(0);
-            expect(list.popBack()).toBe(2);
-            expect(list.popFront()).toBe(1);
-            expect(list.isEmpty).toBe(true);
-        });
-
-        it('should handle insert and remove by node reference', () => {
-            const list = new LinkedList<number>();
-            const a = list.pushBack(1);
-            const c = list.pushBack(3);
-            const b = list.insertAfter(a, 2);
-            const d = list.insertBefore(c, 2.5);
-
-            expect(list.toArray()).toEqual([1, 2, 2.5, 3]);
-
-            list.remove(b);
-            list.remove(d);
-
-            expect(list.toArray()).toEqual([1, 3]);
-        });
+      expect(value).toBe(3);
+      expect(list.length).toBe(2);
+      expect(list.peekBack()).toBe(2);
     });
+
+    it('should remove middle node', () => {
+      const list = new LinkedList([1, 2, 3]);
+      const middle = list.head!.next!;
+
+      const value = list.remove(middle);
+
+      expect(value).toBe(2);
+      expect(list.toArray()).toEqual([1, 3]);
+    });
+
+    it('should remove single element', () => {
+      const list = new LinkedList<number>();
+      const node = list.pushBack(1);
+
+      list.remove(node);
+
+      expect(list.isEmpty).toBe(true);
+      expect(list.head).toBeUndefined();
+      expect(list.tail).toBeUndefined();
+    });
+
+    it('should detach the removed node', () => {
+      const list = new LinkedList([1, 2, 3]);
+      const middle = list.head!.next!;
+
+      list.remove(middle);
+
+      expect(middle.prev).toBeUndefined();
+      expect(middle.next).toBeUndefined();
+    });
+  });
+
+  describe('clear', () => {
+    it('should remove all elements', () => {
+      const list = new LinkedList([1, 2, 3]);
+
+      const result = list.clear();
+
+      expect(list.length).toBe(0);
+      expect(list.isEmpty).toBe(true);
+      expect(list.head).toBeUndefined();
+      expect(list.tail).toBeUndefined();
+      expect(result).toBe(list);
+    });
+  });
+
+  describe('toArray', () => {
+    it('should return empty array for empty list', () => {
+      const list = new LinkedList<number>();
+
+      expect(list.toArray()).toEqual([]);
+    });
+
+    it('should return values from head to tail', () => {
+      const list = new LinkedList([1, 2, 3]);
+
+      expect(list.toArray()).toEqual([1, 2, 3]);
+    });
+  });
+
+  describe('toString', () => {
+    it('should return comma-separated values', () => {
+      const list = new LinkedList([1, 2, 3]);
+
+      expect(list.toString()).toBe('1,2,3');
+    });
+  });
+
+  describe('iterator', () => {
+    it('should iterate from head to tail', () => {
+      const list = new LinkedList([1, 2, 3]);
+
+      expect([...list]).toEqual([1, 2, 3]);
+    });
+
+    it('should yield nothing for empty list', () => {
+      const list = new LinkedList<number>();
+
+      expect([...list]).toEqual([]);
+    });
+  });
+
+  describe('async iterator', () => {
+    it('should async iterate from head to tail', async () => {
+      const list = new LinkedList([1, 2, 3]);
+      const result: number[] = [];
+
+      for await (const value of list)
+        result.push(value);
+
+      expect(result).toEqual([1, 2, 3]);
+    });
+  });
+
+  describe('node linking', () => {
+    it('should maintain correct prev/next references', () => {
+      const list = new LinkedList<number>();
+      const a = list.pushBack(1);
+      const b = list.pushBack(2);
+      const c = list.pushBack(3);
+
+      expect(a.next).toBe(b);
+      expect(b.prev).toBe(a);
+      expect(b.next).toBe(c);
+      expect(c.prev).toBe(b);
+      expect(a.prev).toBeUndefined();
+      expect(c.next).toBeUndefined();
+    });
+
+    it('should update links after removal', () => {
+      const list = new LinkedList<number>();
+      const a = list.pushBack(1);
+      const b = list.pushBack(2);
+      const c = list.pushBack(3);
+
+      list.remove(b);
+
+      expect(a.next).toBe(c);
+      expect(c.prev).toBe(a);
+    });
+  });
+
+  describe('interleaved operations', () => {
+    it('should handle mixed push/pop from both ends', () => {
+      const list = new LinkedList<number>();
+
+      list.pushBack(1);
+      list.pushBack(2);
+      list.pushFront(0);
+
+      expect(list.popFront()).toBe(0);
+      expect(list.popBack()).toBe(2);
+      expect(list.popFront()).toBe(1);
+      expect(list.isEmpty).toBe(true);
+    });
+
+    it('should handle insert and remove by node reference', () => {
+      const list = new LinkedList<number>();
+      const a = list.pushBack(1);
+      const c = list.pushBack(3);
+      const b = list.insertAfter(a, 2);
+      const d = list.insertBefore(c, 2.5);
+
+      expect(list.toArray()).toEqual([1, 2, 2.5, 3]);
+
+      list.remove(b);
+      list.remove(d);
+
+      expect(list.toArray()).toEqual([1, 3]);
+    });
+  });
 });
diff --git a/core/stdlib/src/structs/LinkedList/index.ts b/core/stdlib/src/structs/LinkedList/index.ts
index 38d60fa..c9666aa 100644
--- a/core/stdlib/src/structs/LinkedList/index.ts
+++ b/core/stdlib/src/structs/LinkedList/index.ts
@@ -11,7 +11,7 @@ export type { LinkedListLike, LinkedListNode } from './types';
  * @returns {LinkedListNode<T>} The created node
  */
 function createNode<T>(value: T): LinkedListNode<T> {
-    return { value, prev: undefined, next: undefined };
+  return { value, prev: undefined, next: undefined };
 }
 
 /**
@@ -24,301 +24,307 @@ function createNode<T>(value: T): LinkedListNode<T> {
  * @template T The type of elements stored in the list
  */
 export class LinkedList<T> implements LinkedListLike<T> {
-    /**
+  /**
      * The number of elements in the list
      *
      * @private
      * @type {number}
      */
-    private count = 0;
+  private count = 0;
 
-    /**
+  /**
      * The first node in the list
      *
      * @private
      * @type {LinkedListNode<T> | undefined}
      */
-    private first: LinkedListNode<T> | undefined;
+  private first: LinkedListNode<T> | undefined;
 
-    /**
+  /**
      * The last node in the list
      *
      * @private
      * @type {LinkedListNode<T> | undefined}
      */
-    private last: LinkedListNode<T> | undefined;
+  private last: LinkedListNode<T> | undefined;
 
-    /**
+  /**
      * Creates an instance of LinkedList
      *
      * @param {(T[] | T)} [initialValues] The initial values to add to the list
      */
-    constructor(initialValues?: T[] | T) {
-        if (initialValues !== null && initialValues !== undefined) {
-            const items = isArray(initialValues) ? initialValues : [initialValues];
+  constructor(initialValues?: T[] | T) {
+    if (initialValues !== null && initialValues !== undefined) {
+      const items = isArray(initialValues) ? initialValues : [initialValues];
 
-            for (const item of items)
-                this.pushBack(item);
-        }
+      for (const item of items)
+        this.pushBack(item);
     }
+  }
 
-    /**
+  /**
      * Gets the number of elements in the list
      * @returns {number} The number of elements in the list
      */
-    public get length(): number {
-        return this.count;
-    }
+  public get length(): number {
+    return this.count;
+  }
 
-    /**
+  /**
      * Checks if the list is empty
      * @returns {boolean} `true` if the list is empty, `false` otherwise
      */
-    public get isEmpty(): boolean {
-        return this.count === 0;
-    }
+  public get isEmpty(): boolean {
+    return this.count === 0;
+  }
 
-    /**
+  /**
      * Gets the first node
      * @returns {LinkedListNode<T> | undefined} The first node, or `undefined` if the list is empty
      */
-    public get head(): LinkedListNode<T> | undefined {
-        return this.first;
-    }
+  public get head(): LinkedListNode<T> | undefined {
+    return this.first;
+  }
 
-    /**
+  /**
      * Gets the last node
      * @returns {LinkedListNode<T> | undefined} The last node, or `undefined` if the list is empty
      */
-    public get tail(): LinkedListNode<T> | undefined {
-        return this.last;
-    }
+  public get tail(): LinkedListNode<T> | undefined {
+    return this.last;
+  }
 
-    /**
+  /**
      * Appends a value to the end of the list
      * @param {T} value The value to append
      * @returns {LinkedListNode<T>} The created node
      */
-    public pushBack(value: T): LinkedListNode<T> {
-        const node = createNode(value);
+  public pushBack(value: T): LinkedListNode<T> {
+    const node = createNode(value);
 
-        if (this.last) {
-            node.prev = this.last;
-            this.last.next = node;
-            this.last = node;
-        } else {
-            this.first = node;
-            this.last = node;
-        }
-
-        this.count++;
-
-        return node;
+    if (this.last) {
+      node.prev = this.last;
+      this.last.next = node;
+      this.last = node;
+    }
+    else {
+      this.first = node;
+      this.last = node;
     }
 
-    /**
+    this.count++;
+
+    return node;
+  }
+
+  /**
      * Prepends a value to the beginning of the list
      * @param {T} value The value to prepend
      * @returns {LinkedListNode<T>} The created node
      */
-    public pushFront(value: T): LinkedListNode<T> {
-        const node = createNode(value);
+  public pushFront(value: T): LinkedListNode<T> {
+    const node = createNode(value);
 
-        if (this.first) {
-            node.next = this.first;
-            this.first.prev = node;
-            this.first = node;
-        } else {
-            this.first = node;
-            this.last = node;
-        }
-
-        this.count++;
-
-        return node;
+    if (this.first) {
+      node.next = this.first;
+      this.first.prev = node;
+      this.first = node;
+    }
+    else {
+      this.first = node;
+      this.last = node;
     }
 
-    /**
+    this.count++;
+
+    return node;
+  }
+
+  /**
      * Removes and returns the last value
      * @returns {T | undefined} The last value, or `undefined` if the list is empty
      */
-    public popBack(): T | undefined {
-        if (!this.last) return undefined;
+  public popBack(): T | undefined {
+    if (!this.last) return undefined;
 
-        const node = this.last;
+    const node = this.last;
 
-        this.detach(node);
+    this.detach(node);
 
-        return node.value;
-    }
+    return node.value;
+  }
 
-    /**
+  /**
      * Removes and returns the first value
      * @returns {T | undefined} The first value, or `undefined` if the list is empty
      */
-    public popFront(): T | undefined {
-        if (!this.first) return undefined;
+  public popFront(): T | undefined {
+    if (!this.first) return undefined;
 
-        const node = this.first;
+    const node = this.first;
 
-        this.detach(node);
+    this.detach(node);
 
-        return node.value;
-    }
+    return node.value;
+  }
 
-    /**
+  /**
      * Returns the last value without removing it
      * @returns {T | undefined} The last value, or `undefined` if the list is empty
      */
-    public peekBack(): T | undefined {
-        return this.last?.value;
-    }
+  public peekBack(): T | undefined {
+    return this.last?.value;
+  }
 
-    /**
+  /**
      * Returns the first value without removing it
      * @returns {T | undefined} The first value, or `undefined` if the list is empty
      */
-    public peekFront(): T | undefined {
-        return this.first?.value;
-    }
+  public peekFront(): T | undefined {
+    return this.first?.value;
+  }
 
-    /**
+  /**
      * Inserts a value before the given node
      * @param {LinkedListNode<T>} node The reference node
      * @param {T} value The value to insert
      * @returns {LinkedListNode<T>} The created node
      */
-    public insertBefore(node: LinkedListNode<T>, value: T): LinkedListNode<T> {
-        const newNode = createNode(value);
+  public insertBefore(node: LinkedListNode<T>, value: T): LinkedListNode<T> {
+    const newNode = createNode(value);
 
-        newNode.next = node;
-        newNode.prev = node.prev;
+    newNode.next = node;
+    newNode.prev = node.prev;
 
-        if (node.prev) {
-            node.prev.next = newNode;
-        } else {
-            this.first = newNode;
-        }
-
-        node.prev = newNode;
-        this.count++;
-
-        return newNode;
+    if (node.prev) {
+      node.prev.next = newNode;
+    }
+    else {
+      this.first = newNode;
     }
 
-    /**
+    node.prev = newNode;
+    this.count++;
+
+    return newNode;
+  }
+
+  /**
      * Inserts a value after the given node
      * @param {LinkedListNode<T>} node The reference node
      * @param {T} value The value to insert
      * @returns {LinkedListNode<T>} The created node
      */
-    public insertAfter(node: LinkedListNode<T>, value: T): LinkedListNode<T> {
-        const newNode = createNode(value);
+  public insertAfter(node: LinkedListNode<T>, value: T): LinkedListNode<T> {
+    const newNode = createNode(value);
 
-        newNode.prev = node;
-        newNode.next = node.next;
+    newNode.prev = node;
+    newNode.next = node.next;
 
-        if (node.next) {
-            node.next.prev = newNode;
-        } else {
-            this.last = newNode;
-        }
-
-        node.next = newNode;
-        this.count++;
-
-        return newNode;
+    if (node.next) {
+      node.next.prev = newNode;
+    }
+    else {
+      this.last = newNode;
     }
 
-    /**
+    node.next = newNode;
+    this.count++;
+
+    return newNode;
+  }
+
+  /**
      * Removes a node from the list by reference in O(1)
      * @param {LinkedListNode<T>} node The node to remove
      * @returns {T} The value of the removed node
      */
-    public remove(node: LinkedListNode<T>): T {
-        this.detach(node);
+  public remove(node: LinkedListNode<T>): T {
+    this.detach(node);
 
-        return node.value;
-    }
+    return node.value;
+  }
 
-    /**
+  /**
      * Removes all elements from the list
      * @returns {this} The list instance for chaining
      */
-    public clear(): this {
-        this.first = undefined;
-        this.last = undefined;
-        this.count = 0;
+  public clear(): this {
+    this.first = undefined;
+    this.last = undefined;
+    this.count = 0;
 
-        return this;
-    }
+    return this;
+  }
 
-    /**
+  /**
      * Returns a shallow copy of the list values as an array
      * @returns {T[]} Array of values from head to tail
      */
-    public toArray(): T[] {
-        const result = Array.from<T>({ length: this.count });
-        let current = this.first;
-        let i = 0;
+  public toArray(): T[] {
+    const result = Array.from<T>({ length: this.count });
+    let current = this.first;
+    let i = 0;
 
-        while (current) {
-            result[i++] = current.value;
-            current = current.next;
-        }
-
-        return result;
+    while (current) {
+      result[i++] = current.value;
+      current = current.next;
     }
 
-    /**
+    return result;
+  }
+
+  /**
      * Returns a string representation of the list
      * @returns {string} String representation
      */
-    public toString(): string {
-        return this.toArray().toString();
-    }
+  public toString(): string {
+    return this.toArray().toString();
+  }
 
-    /**
+  /**
      * Iterator over list values from head to tail
      */
-    public *[Symbol.iterator](): Iterator<T> {
-        let current = this.first;
+  public* [Symbol.iterator](): Iterator<T> {
+    let current = this.first;
 
-        while (current) {
-            yield current.value;
-            current = current.next;
-        }
+    while (current) {
+      yield current.value;
+      current = current.next;
     }
+  }
 
-    /**
+  /**
      * Async iterator over list values from head to tail
      */
-    public async *[Symbol.asyncIterator](): AsyncIterator<T> {
-        for (const value of this)
-            yield value;
-    }
+  public async* [Symbol.asyncIterator](): AsyncIterator<T> {
+    for (const value of this)
+      yield value;
+  }
 
-    /**
+  /**
      * Detaches a node from the list, updating head/tail and count
      *
      * @private
      * @param {LinkedListNode<T>} node The node to detach
      */
-    private detach(node: LinkedListNode<T>): void {
-        if (node.prev) {
-            node.prev.next = node.next;
-        } else {
-            this.first = node.next;
-        }
-
-        if (node.next) {
-            node.next.prev = node.prev;
-        } else {
-            this.last = node.prev;
-        }
-
-        node.prev = undefined;
-        node.next = undefined;
-        this.count--;
+  private detach(node: LinkedListNode<T>): void {
+    if (node.prev) {
+      node.prev.next = node.next;
     }
+    else {
+      this.first = node.next;
+    }
+
+    if (node.next) {
+      node.next.prev = node.prev;
+    }
+    else {
+      this.last = node.prev;
+    }
+
+    node.prev = undefined;
+    node.next = undefined;
+    this.count--;
+  }
 }
diff --git a/core/stdlib/src/structs/LinkedList/types.ts b/core/stdlib/src/structs/LinkedList/types.ts
index 79e3b1b..095aa21 100644
--- a/core/stdlib/src/structs/LinkedList/types.ts
+++ b/core/stdlib/src/structs/LinkedList/types.ts
@@ -1,28 +1,28 @@
 export interface LinkedListNode<T> {
-    value: T;
-    prev: LinkedListNode<T> | undefined;
-    next: LinkedListNode<T> | undefined;
+  value: T;
+  prev: LinkedListNode<T> | undefined;
+  next: LinkedListNode<T> | undefined;
 }
 
 export interface LinkedListLike<T> extends Iterable<T>, AsyncIterable<T> {
-    readonly length: number;
-    readonly isEmpty: boolean;
+  readonly length: number;
+  readonly isEmpty: boolean;
 
-    readonly head: LinkedListNode<T> | undefined;
-    readonly tail: LinkedListNode<T> | undefined;
+  readonly head: LinkedListNode<T> | undefined;
+  readonly tail: LinkedListNode<T> | undefined;
 
-    pushBack(value: T): LinkedListNode<T>;
-    pushFront(value: T): LinkedListNode<T>;
-    popBack(): T | undefined;
-    popFront(): T | undefined;
-    peekBack(): T | undefined;
-    peekFront(): T | undefined;
+  pushBack(value: T): LinkedListNode<T>;
+  pushFront(value: T): LinkedListNode<T>;
+  popBack(): T | undefined;
+  popFront(): T | undefined;
+  peekBack(): T | undefined;
+  peekFront(): T | undefined;
 
-    insertBefore(node: LinkedListNode<T>, value: T): LinkedListNode<T>;
-    insertAfter(node: LinkedListNode<T>, value: T): LinkedListNode<T>;
-    remove(node: LinkedListNode<T>): T;
+  insertBefore(node: LinkedListNode<T>, value: T): LinkedListNode<T>;
+  insertAfter(node: LinkedListNode<T>, value: T): LinkedListNode<T>;
+  remove(node: LinkedListNode<T>): T;
 
-    clear(): this;
-    toArray(): T[];
-    toString(): string;
+  clear(): this;
+  toArray(): T[];
+  toString(): string;
 }
diff --git a/core/stdlib/src/structs/PriorityQueue/index.test.ts b/core/stdlib/src/structs/PriorityQueue/index.test.ts
index c842799..ff0cf5d 100644
--- a/core/stdlib/src/structs/PriorityQueue/index.test.ts
+++ b/core/stdlib/src/structs/PriorityQueue/index.test.ts
@@ -3,211 +3,223 @@ import { describe, expect, it } from 'vitest';
 import { PriorityQueue } from '.';
 
 describe('PriorityQueue', () => {
-    describe('constructor', () => {
-        it('should create an empty queue', () => {
-            const pq = new PriorityQueue<number>();
+  describe('constructor', () => {
+    it('should create an empty queue', () => {
+      const pq = new PriorityQueue<number>();
 
-            expect(pq.length).toBe(0);
-            expect(pq.isEmpty).toBe(true);
-            expect(pq.isFull).toBe(false);
-        });
-
-        it('should create a queue from single value', () => {
-            const pq = new PriorityQueue(42);
-
-            expect(pq.length).toBe(1);
-            expect(pq.peek()).toBe(42);
-        });
-
-        it('should create a queue from array', () => {
-            const pq = new PriorityQueue([5, 3, 8, 1, 4]);
-
-            expect(pq.length).toBe(5);
-            expect(pq.peek()).toBe(1);
-        });
-
-        it('should throw if initial values exceed maxSize', () => {
-            expect(() => new PriorityQueue([1, 2, 3], { maxSize: 2 }))
-                .toThrow('Initial values exceed maxSize');
-        });
+      expect(pq.length).toBe(0);
+      expect(pq.isEmpty).toBe(true);
+      expect(pq.isFull).toBe(false);
     });
 
-    describe('enqueue', () => {
-        it('should enqueue elements by priority', () => {
-            const pq = new PriorityQueue<number>();
+    it('should create a queue from single value', () => {
+      const pq = new PriorityQueue(42);
 
-            pq.enqueue(5);
-            pq.enqueue(1);
-            pq.enqueue(3);
-
-            expect(pq.peek()).toBe(1);
-            expect(pq.length).toBe(3);
-        });
-
-        it('should throw when queue is full', () => {
-            const pq = new PriorityQueue<number>(undefined, { maxSize: 2 });
-
-            pq.enqueue(1);
-            pq.enqueue(2);
-
-            expect(() => pq.enqueue(3)).toThrow('PriorityQueue is full');
-        });
+      expect(pq.length).toBe(1);
+      expect(pq.peek()).toBe(42);
     });
 
-    describe('dequeue', () => {
-        it('should return undefined for empty queue', () => {
-            const pq = new PriorityQueue<number>();
+    it('should create a queue from array', () => {
+      const pq = new PriorityQueue([5, 3, 8, 1, 4]);
 
-            expect(pq.dequeue()).toBeUndefined();
-        });
-
-        it('should dequeue elements in priority order (min-heap)', () => {
-            const pq = new PriorityQueue([5, 3, 8, 1, 4]);
-            const result: number[] = [];
-
-            while (!pq.isEmpty) {
-                result.push(pq.dequeue()!);
-            }
-
-            expect(result).toEqual([1, 3, 4, 5, 8]);
-        });
-
-        it('should dequeue elements in priority order (max-heap)', () => {
-            const pq = new PriorityQueue([5, 3, 8, 1, 4], {
-                comparator: (a, b) => b - a,
-            });
-            const result: number[] = [];
-
-            while (!pq.isEmpty) {
-                result.push(pq.dequeue()!);
-            }
-
-            expect(result).toEqual([8, 5, 4, 3, 1]);
-        });
+      expect(pq.length).toBe(5);
+      expect(pq.peek()).toBe(1);
     });
 
-    describe('peek', () => {
-        it('should return undefined for empty queue', () => {
-            const pq = new PriorityQueue<number>();
+    it('should throw if initial values exceed maxSize', () => {
+      expect(() => new PriorityQueue([1, 2, 3], { maxSize: 2 }))
+        .toThrow('Initial values exceed maxSize');
+    });
+  });
 
-            expect(pq.peek()).toBeUndefined();
-        });
+  describe('enqueue', () => {
+    it('should enqueue elements by priority', () => {
+      const pq = new PriorityQueue<number>();
 
-        it('should return highest-priority element without removing', () => {
-            const pq = new PriorityQueue([5, 1, 3]);
+      pq.enqueue(5);
+      pq.enqueue(1);
+      pq.enqueue(3);
 
-            expect(pq.peek()).toBe(1);
-            expect(pq.length).toBe(3);
-        });
+      expect(pq.peek()).toBe(1);
+      expect(pq.length).toBe(3);
     });
 
-    describe('isFull', () => {
-        it('should be false when no maxSize', () => {
-            const pq = new PriorityQueue([1, 2, 3]);
+    it('should throw when queue is full', () => {
+      const pq = new PriorityQueue<number>(undefined, { maxSize: 2 });
 
-            expect(pq.isFull).toBe(false);
-        });
+      pq.enqueue(1);
+      pq.enqueue(2);
 
-        it('should be true when at maxSize', () => {
-            const pq = new PriorityQueue([1, 2], { maxSize: 2 });
+      expect(() => pq.enqueue(3)).toThrow('PriorityQueue is full');
+    });
+  });
 
-            expect(pq.isFull).toBe(true);
-        });
+  describe('dequeue', () => {
+    it('should return undefined for empty queue', () => {
+      const pq = new PriorityQueue<number>();
 
-        it('should become false after dequeue', () => {
-            const pq = new PriorityQueue([1, 2], { maxSize: 2 });
-
-            pq.dequeue();
-
-            expect(pq.isFull).toBe(false);
-        });
+      expect(pq.dequeue()).toBeUndefined();
     });
 
-    describe('clear', () => {
-        it('should remove all elements', () => {
-            const pq = new PriorityQueue([1, 2, 3]);
+    it('should dequeue elements in priority order (min-heap)', () => {
+      const pq = new PriorityQueue([5, 3, 8, 1, 4]);
+      const result: number[] = [];
 
-            const result = pq.clear();
+      while (!pq.isEmpty) {
+        result.push(pq.dequeue()!);
+      }
 
-            expect(pq.length).toBe(0);
-            expect(pq.isEmpty).toBe(true);
-            expect(result).toBe(pq);
-        });
+      expect(result).toEqual([1, 3, 4, 5, 8]);
     });
 
-    describe('toArray', () => {
-        it('should return empty array for empty queue', () => {
-            const pq = new PriorityQueue<number>();
+    it('should dequeue elements in priority order (max-heap)', () => {
+      const pq = new PriorityQueue([5, 3, 8, 1, 4], {
+        comparator: (a, b) => b - a,
+      });
+      const result: number[] = [];
 
-            expect(pq.toArray()).toEqual([]);
-        });
+      while (!pq.isEmpty) {
+        result.push(pq.dequeue()!);
+      }
 
-        it('should return a shallow copy', () => {
-            const pq = new PriorityQueue([3, 1, 2]);
-            const arr = pq.toArray();
+      expect(result).toEqual([8, 5, 4, 3, 1]);
+    });
+  });
 
-            arr.push(99);
+  describe('peek', () => {
+    it('should return undefined for empty queue', () => {
+      const pq = new PriorityQueue<number>();
 
-            expect(pq.length).toBe(3);
-        });
+      expect(pq.peek()).toBeUndefined();
     });
 
-    describe('toString', () => {
-        it('should return formatted string', () => {
-            const pq = new PriorityQueue([1, 2, 3]);
+    it('should return highest-priority element without removing', () => {
+      const pq = new PriorityQueue([5, 1, 3]);
 
-            expect(pq.toString()).toBe('PriorityQueue(3)');
-        });
+      expect(pq.peek()).toBe(1);
+      expect(pq.length).toBe(3);
+    });
+  });
+
+  describe('isFull', () => {
+    it('should be false when no maxSize', () => {
+      const pq = new PriorityQueue([1, 2, 3]);
+
+      expect(pq.isFull).toBe(false);
     });
 
-    describe('iterator', () => {
-        it('should iterate over elements', () => {
-            const pq = new PriorityQueue([5, 3, 1]);
-            const elements = [...pq];
+    it('should be true when at maxSize', () => {
+      const pq = new PriorityQueue([1, 2], { maxSize: 2 });
 
-            expect(elements.length).toBe(3);
-        });
+      expect(pq.isFull).toBe(true);
     });
 
-    describe('custom comparator', () => {
-        it('should work with object priority', () => {
-            interface Job {
-                priority: number;
-                name: string;
-            }
+    it('should become false after dequeue', () => {
+      const pq = new PriorityQueue([1, 2], { maxSize: 2 });
 
-            const pq = new PriorityQueue<Job>(
-                [
-                    { priority: 3, name: 'low' },
-                    { priority: 1, name: 'critical' },
-                    { priority: 2, name: 'normal' },
-                ],
-                { comparator: (a, b) => a.priority - b.priority },
-            );
+      pq.dequeue();
 
-            expect(pq.dequeue()?.name).toBe('critical');
-            expect(pq.dequeue()?.name).toBe('normal');
-            expect(pq.dequeue()?.name).toBe('low');
-        });
+      expect(pq.isFull).toBe(false);
+    });
+  });
+
+  describe('clear', () => {
+    it('should remove all elements', () => {
+      const pq = new PriorityQueue([1, 2, 3]);
+
+      const result = pq.clear();
+
+      expect(pq.length).toBe(0);
+      expect(pq.isEmpty).toBe(true);
+      expect(result).toBe(pq);
+    });
+  });
+
+  describe('toArray', () => {
+    it('should return empty array for empty queue', () => {
+      const pq = new PriorityQueue<number>();
+
+      expect(pq.toArray()).toEqual([]);
     });
 
-    describe('interleaved operations', () => {
-        it('should maintain priority with mixed enqueue and dequeue', () => {
-            const pq = new PriorityQueue<number>();
+    it('should return a shallow copy', () => {
+      const pq = new PriorityQueue([3, 1, 2]);
+      const arr = pq.toArray();
 
-            pq.enqueue(10);
-            pq.enqueue(5);
-            expect(pq.dequeue()).toBe(5);
+      arr.push(99);
 
-            pq.enqueue(3);
-            pq.enqueue(7);
-            expect(pq.dequeue()).toBe(3);
-
-            pq.enqueue(1);
-            expect(pq.dequeue()).toBe(1);
-            expect(pq.dequeue()).toBe(7);
-            expect(pq.dequeue()).toBe(10);
-            expect(pq.dequeue()).toBeUndefined();
-        });
+      expect(pq.length).toBe(3);
     });
+  });
+
+  describe('toString', () => {
+    it('should return formatted string', () => {
+      const pq = new PriorityQueue([1, 2, 3]);
+
+      expect(pq.toString()).toBe('PriorityQueue(3)');
+    });
+  });
+
+  describe('iterator', () => {
+    it('should iterate over elements', () => {
+      const pq = new PriorityQueue([5, 3, 1]);
+      const elements = [...pq];
+
+      expect(elements.length).toBe(3);
+    });
+  });
+
+  describe('custom comparator', () => {
+    it('should work with object priority', () => {
+      interface Job {
+        priority: number;
+        name: string;
+      }
+
+      const pq = new PriorityQueue<Job>(
+        [
+          { priority: 3, name: 'low' },
+          { priority: 1, name: 'critical' },
+          { priority: 2, name: 'normal' },
+        ],
+        { comparator: (a, b) => a.priority - b.priority },
+      );
+
+      expect(pq.dequeue()?.name).toBe('critical');
+      expect(pq.dequeue()?.name).toBe('normal');
+      expect(pq.dequeue()?.name).toBe('low');
+    });
+  });
+
+  describe('interleaved operations', () => {
+    it('should maintain priority with mixed enqueue and dequeue', () => {
+      const pq = new PriorityQueue<number>();
+
+      pq.enqueue(10);
+      pq.enqueue(5);
+      expect(pq.dequeue()).toBe(5);
+
+      pq.enqueue(3);
+      pq.enqueue(7);
+      expect(pq.dequeue()).toBe(3);
+
+      pq.enqueue(1);
+      expect(pq.dequeue()).toBe(1);
+      expect(pq.dequeue()).toBe(7);
+      expect(pq.dequeue()).toBe(10);
+      expect(pq.dequeue()).toBeUndefined();
+    });
+
+    it('accept a new element after dequeue frees a slot in a full queue', () => {
+      const pq = new PriorityQueue([1, 2], { maxSize: 2 });
+
+      expect(pq.isFull).toBe(true);
+      expect(() => pq.enqueue(3)).toThrow(RangeError);
+
+      pq.dequeue();
+      expect(pq.isFull).toBe(false);
+      expect(() => pq.enqueue(3)).not.toThrow();
+      expect(pq.length).toBe(2);
+    });
+  });
 });
diff --git a/core/stdlib/src/structs/PriorityQueue/index.ts b/core/stdlib/src/structs/PriorityQueue/index.ts
index e1cee9f..242f1c4 100644
--- a/core/stdlib/src/structs/PriorityQueue/index.ts
+++ b/core/stdlib/src/structs/PriorityQueue/index.ts
@@ -5,8 +5,8 @@ export type { PriorityQueueLike } from './types';
 export type { Comparator } from './types';
 
 export interface PriorityQueueOptions<T> {
-    comparator?: Comparator<T>;
-    maxSize?: number;
+  comparator?: Comparator<T>;
+  maxSize?: number;
 }
 
 /**
@@ -19,126 +19,126 @@ export interface PriorityQueueOptions<T> {
  * @template T The type of elements stored in the queue
  */
 export class PriorityQueue<T> implements PriorityQueueLike<T> {
-    /**
+  /**
      * The maximum number of elements the queue can hold
      *
      * @private
      * @type {number}
      */
-    private readonly maxSize: number;
+  private readonly maxSize: number;
 
-    /**
+  /**
      * Internal binary heap backing the queue
      *
      * @private
      * @type {BinaryHeap<T>}
      */
-    private readonly heap: BinaryHeap<T>;
+  private readonly heap: BinaryHeap<T>;
 
-    /**
+  /**
      * Creates an instance of PriorityQueue
      *
      * @param {(T[] | T)} [initialValues] The initial values to add to the queue
      * @param {PriorityQueueOptions<T>} [options] Queue configuration
      */
-    constructor(initialValues?: T[] | T, options?: PriorityQueueOptions<T>) {
-        this.maxSize = options?.maxSize ?? Infinity;
-        this.heap = new BinaryHeap(initialValues, { comparator: options?.comparator });
+  constructor(initialValues?: T[] | T, options?: PriorityQueueOptions<T>) {
+    this.maxSize = options?.maxSize ?? Infinity;
+    this.heap = new BinaryHeap(initialValues, { comparator: options?.comparator });
 
-        if (this.heap.length > this.maxSize) {
-            throw new RangeError('Initial values exceed maxSize');
-        }
+    if (this.heap.length > this.maxSize) {
+      throw new RangeError('Initial values exceed maxSize');
     }
+  }
 
-    /**
+  /**
      * Gets the number of elements in the queue
      * @returns {number} The number of elements in the queue
      */
-    public get length(): number {
-        return this.heap.length;
-    }
+  public get length(): number {
+    return this.heap.length;
+  }
 
-    /**
+  /**
      * Checks if the queue is empty
      * @returns {boolean} `true` if the queue is empty, `false` otherwise
      */
-    public get isEmpty(): boolean {
-        return this.heap.isEmpty;
-    }
+  public get isEmpty(): boolean {
+    return this.heap.isEmpty;
+  }
 
-    /**
+  /**
      * Checks if the queue is full
      * @returns {boolean} `true` if the queue has reached maxSize, `false` otherwise
      */
-    public get isFull(): boolean {
-        return this.heap.length >= this.maxSize;
-    }
+  public get isFull(): boolean {
+    return this.heap.length >= this.maxSize;
+  }
 
-    /**
+  /**
      * Enqueues an element by priority
      * @param {T} element The element to enqueue
      * @throws {RangeError} If the queue is full
      */
-    public enqueue(element: T): void {
-        if (this.isFull)
-            throw new RangeError('PriorityQueue is full');
+  public enqueue(element: T): void {
+    if (this.isFull)
+      throw new RangeError('PriorityQueue is full');
 
-        this.heap.push(element);
-    }
+    this.heap.push(element);
+  }
 
-    /**
+  /**
      * Dequeues the highest-priority element
      * @returns {T | undefined} The highest-priority element, or `undefined` if empty
      */
-    public dequeue(): T | undefined {
-        return this.heap.pop();
-    }
+  public dequeue(): T | undefined {
+    return this.heap.pop();
+  }
 
-    /**
+  /**
      * Returns the highest-priority element without removing it
      * @returns {T | undefined} The highest-priority element, or `undefined` if empty
      */
-    public peek(): T | undefined {
-        return this.heap.peek();
-    }
+  public peek(): T | undefined {
+    return this.heap.peek();
+  }
 
-    /**
+  /**
      * Removes all elements from the queue
      * @returns {this} The queue instance for chaining
      */
-    public clear(): this {
-        this.heap.clear();
-        return this;
-    }
+  public clear(): this {
+    this.heap.clear();
+    return this;
+  }
 
-    /**
+  /**
      * Returns a shallow copy of elements in heap order
      * @returns {T[]} Array of elements
      */
-    public toArray(): T[] {
-        return this.heap.toArray();
-    }
+  public toArray(): T[] {
+    return this.heap.toArray();
+  }
 
-    /**
+  /**
      * Returns a string representation of the queue
      * @returns {string} String representation
      */
-    public toString(): string {
-        return `PriorityQueue(${this.heap.length})`;
-    }
+  public toString(): string {
+    return `PriorityQueue(${this.heap.length})`;
+  }
 
-    /**
+  /**
      * Iterator over queue elements in heap order
      */
-    public *[Symbol.iterator](): Iterator<T> {
-        yield* this.heap;
-    }
+  public* [Symbol.iterator](): Iterator<T> {
+    yield* this.heap;
+  }
 
-    /**
+  /**
      * Async iterator over queue elements in heap order
      */
-    public async *[Symbol.asyncIterator](): AsyncIterator<T> {
-        for (const element of this.heap)
-            yield element;
-    }
+  public async* [Symbol.asyncIterator](): AsyncIterator<T> {
+    for (const element of this.heap)
+      yield element;
+  }
 }
diff --git a/core/stdlib/src/structs/PriorityQueue/types.ts b/core/stdlib/src/structs/PriorityQueue/types.ts
index 46144b7..d282dfc 100644
--- a/core/stdlib/src/structs/PriorityQueue/types.ts
+++ b/core/stdlib/src/structs/PriorityQueue/types.ts
@@ -1,16 +1,16 @@
 import type { Comparator } from '../BinaryHeap';
 
 export interface PriorityQueueLike<T> extends Iterable<T>, AsyncIterable<T> {
-    readonly length: number;
-    readonly isEmpty: boolean;
-    readonly isFull: boolean;
+  readonly length: number;
+  readonly isEmpty: boolean;
+  readonly isFull: boolean;
 
-    enqueue(element: T): void;
-    dequeue(): T | undefined;
-    peek(): T | undefined;
-    clear(): this;
-    toArray(): T[];
-    toString(): string;
+  enqueue(element: T): void;
+  dequeue(): T | undefined;
+  peek(): T | undefined;
+  clear(): this;
+  toArray(): T[];
+  toString(): string;
 }
 
 export type { Comparator };
diff --git a/core/stdlib/src/structs/Queue/index.test.ts b/core/stdlib/src/structs/Queue/index.test.ts
index 4a62480..6c9a0d8 100644
--- a/core/stdlib/src/structs/Queue/index.test.ts
+++ b/core/stdlib/src/structs/Queue/index.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { Queue } from '.';
 
 describe('queue', () => {
@@ -87,7 +87,7 @@ describe('queue', () => {
       expect(queue.dequeue()).toBeUndefined();
     });
 
-    it('compact internal storage after many dequeues', () => {
+    it('keep correct length and front element after many enqueue/dequeue cycles', () => {
       const queue = new Queue<number>();
 
       for (let i = 0; i < 100; i++)
@@ -99,6 +99,17 @@ describe('queue', () => {
       expect(queue.length).toBe(20);
       expect(queue.peek()).toBe(80);
     });
+
+    it('report isFull and free a slot after dequeue', () => {
+      const queue = new Queue<number>(undefined, { maxSize: 2 });
+      queue.enqueue(1).enqueue(2);
+
+      expect(queue.isFull).toBe(true);
+
+      queue.dequeue();
+      expect(queue.isFull).toBe(false);
+      expect(() => queue.enqueue(3)).not.toThrow();
+    });
   });
 
   describe('peek', () => {
diff --git a/core/stdlib/src/structs/Queue/index.ts b/core/stdlib/src/structs/Queue/index.ts
index 50f6cf7..0455665 100644
--- a/core/stdlib/src/structs/Queue/index.ts
+++ b/core/stdlib/src/structs/Queue/index.ts
@@ -133,7 +133,7 @@ export class Queue<T> implements QueueLike<T> {
    *
    * @returns {AsyncIterableIterator<T>}
    */
-  async *[Symbol.asyncIterator]() {
+  async* [Symbol.asyncIterator]() {
     for (const element of this.deque)
       yield element;
   }
diff --git a/core/stdlib/src/structs/Stack/index.test.ts b/core/stdlib/src/structs/Stack/index.test.ts
index 7d3920a..4b73a6f 100644
--- a/core/stdlib/src/structs/Stack/index.test.ts
+++ b/core/stdlib/src/structs/Stack/index.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { Stack } from '.';
 
 describe('stack', () => {
@@ -33,6 +33,26 @@ describe('stack', () => {
       expect(stack.length).toBe(0);
       expect(stack.isFull).toBe(false);
     });
+
+    it('keep a falsy single initial value', () => {
+      expect(new Stack(0).length).toBe(1);
+      expect(new Stack(0).peek()).toBe(0);
+      expect(new Stack('').peek()).toBe('');
+    });
+
+    it('copy the initial array (no aliasing of the caller array)', () => {
+      const initialValues = [1, 2, 3];
+      const stack = new Stack(initialValues);
+
+      initialValues.push(4);
+
+      expect(stack.length).toBe(3);
+      expect([...stack]).toEqual([3, 2, 1]);
+    });
+
+    it('throw when initial values exceed maxSize', () => {
+      expect(() => new Stack([1, 2, 3], { maxSize: 2 })).toThrow(RangeError);
+    });
   });
 
   describe('push', () => {
@@ -51,6 +71,16 @@ describe('stack', () => {
 
       expect(() => stack.push(2)).toThrow(new RangeError('Stack is full'));
     });
+
+    it('report isFull at the boundary', () => {
+      const stack = new Stack<number>(undefined, { maxSize: 2 });
+      stack.push(1).push(2);
+
+      expect(stack.isFull).toBe(true);
+
+      stack.pop();
+      expect(stack.isFull).toBe(false);
+    });
   });
 
   describe('pop', () => {
@@ -97,6 +127,22 @@ describe('stack', () => {
     });
   });
 
+  describe('toArray / toString', () => {
+    it('return elements in LIFO order as a distinct array', () => {
+      const stack = new Stack([1, 2, 3]);
+      const arr = stack.toArray();
+
+      expect(arr).toEqual([3, 2, 1]);
+
+      arr.push(99);
+      expect(stack.length).toBe(3);
+    });
+
+    it('stringify in LIFO order', () => {
+      expect(new Stack([1, 2, 3]).toString()).toBe('3,2,1');
+    });
+  });
+
   describe('iteration', () => {
     it('iterate over the stack in LIFO order', () => {
       const stack = new Stack<number>([1, 2, 3]);
@@ -112,8 +158,8 @@ describe('stack', () => {
       for await (const element of stack) {
         elements.push(element);
       }
-      
+
       expect(elements).toEqual([3, 2, 1]);
     });
   });
-});
\ No newline at end of file
+});
diff --git a/core/stdlib/src/structs/Stack/index.ts b/core/stdlib/src/structs/Stack/index.ts
index 05fee93..b85de49 100644
--- a/core/stdlib/src/structs/Stack/index.ts
+++ b/core/stdlib/src/structs/Stack/index.ts
@@ -1,11 +1,10 @@
-import { last } from '../../arrays';
 import { isArray } from '../../types';
 import type { StackLike } from './types';
 
 export type { StackLike } from './types';
 
 export interface StackOptions {
-    maxSize?: number;
+  maxSize?: number;
 }
 
 /**
@@ -18,138 +17,148 @@ export interface StackOptions {
  * @template T The type of elements stored in the stack
  */
 export class Stack<T> implements StackLike<T> {
-    /**
+  /**
      * The maximum number of elements that the stack can hold
-     * 
+     *
      * @private
      * @type {number}
      */
-    private readonly maxSize: number;
+  private readonly maxSize: number;
 
-    /**
+  /**
      * The stack data structure
-     * 
+     *
      * @private
      * @type {T[]}
      */
-    private readonly stack: T[];
+  private readonly stack: T[];
 
-    /**
+  /**
      * Creates an instance of Stack
-     * 
+     *
      * @param {(T[] | T)} [initialValues] The initial values to add to the stack
      * @param {StackOptions} [options] The options for the stack
      * @memberof Stack
      */
-    constructor(initialValues?: T[] | T, options?: StackOptions) {
-        this.maxSize = options?.maxSize ?? Infinity;
-        this.stack = isArray(initialValues) ? initialValues : initialValues ? [initialValues] : [];
-    }
-    
-    /**
+  constructor(initialValues?: T[] | T, options?: StackOptions) {
+    this.maxSize = options?.maxSize ?? Infinity;
+
+    // Copy the input so external mutation can't corrupt internal state, and use an
+    // explicit nullish check so falsy single values (0, '', false) are not dropped.
+    const values = isArray(initialValues)
+      ? initialValues.slice()
+      : initialValues !== null && initialValues !== undefined ? [initialValues] : [];
+
+    if (values.length > this.maxSize)
+      throw new RangeError('Stack: initial values exceed maxSize');
+
+    this.stack = values;
+  }
+
+  /**
      * Gets the number of elements in the stack
      * @returns {number} The number of elements in the stack
      */
-    public get length() {
-        return this.stack.length;
-    }
+  public get length() {
+    return this.stack.length;
+  }
 
-    /**
+  /**
      * Checks if the stack is empty
      * @returns {boolean} `true` if the stack is empty, `false` otherwise
      */
-    public get isEmpty() {
-        return this.stack.length === 0;
-    }
+  public get isEmpty() {
+    return this.stack.length === 0;
+  }
 
-    /**
+  /**
      * Checks if the stack is full
      * @returns {boolean} `true` if the stack is full, `false` otherwise
      */
-    public get isFull() {
-        return this.stack.length === this.maxSize;
-    }
+  public get isFull() {
+    return this.stack.length >= this.maxSize;
+  }
 
-    /**
+  /**
      * Pushes an element onto the stack
      * @param {T} element The element to push onto the stack
      * @returns {this}
      * @throws {RangeError} If the stack is full
      */
-    public push(element: T) {
-        if (this.isFull)
-            throw new RangeError('Stack is full');
-        
-        this.stack.push(element);
+  public push(element: T) {
+    if (this.isFull)
+      throw new RangeError('Stack is full');
 
-        return this;
-    }
+    this.stack.push(element);
 
-    /**
+    return this;
+  }
+
+  /**
      * Pops an element from the stack
      * @returns {T | undefined} The element popped from the stack
      */
-    public pop() {
-        return this.stack.pop();
-    }
+  public pop() {
+    return this.stack.pop();
+  }
 
-    /**
+  /**
      * Peeks at the top element of the stack
      * @returns {T | undefined} The top element of the stack
      */
-    public peek() {
-        if (this.isEmpty)
-            return undefined;
-        
-        return last(this.stack);
-    }
+  public peek() {
+    // Direct index preserves a legitimately stored `undefined`/`null` top and
+    // returns `undefined` for an empty stack (noUncheckedIndexedAccess).
+    return this.stack[this.stack.length - 1];
+  }
 
-    /**
+  /**
      * Clears the stack
-     * 
+     *
      * @returns {this}
      */
-    public clear() {
-        this.stack.length = 0;
+  public clear() {
+    this.stack.length = 0;
 
-        return this;
-    }
+    return this;
+  }
 
-    /**
+  /**
      * Converts the stack to an array
-     * 
+     *
      * @returns {T[]}
      */
-    public toArray() {
-        return this.stack.toReversed();
-    }
+  public toArray() {
+    return this.stack.toReversed();
+  }
 
-    /**
+  /**
      * Returns a string representation of the stack
-     * 
+     *
      * @returns {string}
      */
-    public toString() {
-        return this.toArray().toString();
-    }
+  public toString() {
+    return this.toArray().toString();
+  }
 
-    /**
+  /**
      * Returns an iterator for the stack
-     * 
+     *
      * @returns {IterableIterator<T>}
      */
-    public [Symbol.iterator]() {
-        return this.toArray()[Symbol.iterator]();
-    }
+  public* [Symbol.iterator]() {
+    // Lazy reverse walk — no eager reversed-copy allocation.
+    for (let i = this.stack.length - 1; i >= 0; i--)
+      yield this.stack[i]!;
+  }
 
-    /**
+  /**
      * Returns an async iterator for the stack
-     * 
+     *
      * @returns {AsyncIterableIterator<T>}
      */
-    public async *[Symbol.asyncIterator]() {
-        for (const element of this.toArray()) {
-            yield element;
-        }
-    }
+  public async* [Symbol.asyncIterator]() {
+    for (let i = this.stack.length - 1; i >= 0; i--)
+      yield this.stack[i]!;
+  }
 }
diff --git a/core/stdlib/src/structs/index.ts b/core/stdlib/src/structs/index.ts
index 1f304c9..7110086 100644
--- a/core/stdlib/src/structs/index.ts
+++ b/core/stdlib/src/structs/index.ts
@@ -4,4 +4,4 @@ export * from './Deque';
 export * from './LinkedList';
 export * from './PriorityQueue';
 export * from './Queue';
-export * from './Stack';
\ No newline at end of file
+export * from './Stack';
diff --git a/core/stdlib/src/sync/mutex/index.test.ts b/core/stdlib/src/sync/mutex/index.test.ts
index 3b97fc0..64a3f5e 100644
--- a/core/stdlib/src/sync/mutex/index.test.ts
+++ b/core/stdlib/src/sync/mutex/index.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { SyncMutex } from '.';
 
 describe('SyncMutex', () => {
@@ -14,21 +14,21 @@ describe('SyncMutex', () => {
 
   it('lock the mutex', () => {
     mutex.lock();
-  
+
     expect(mutex.isLocked).toBe(true);
   });
 
   it('remain locked when locked multiple times', () => {
     mutex.lock();
     mutex.lock();
-  
+
     expect(mutex.isLocked).toBe(true);
   });
 
   it('unlock a locked mutex', () => {
     mutex.lock();
     mutex.unlock();
-  
+
     expect(mutex.isLocked).toBe(false);
   });
 
@@ -50,7 +50,7 @@ describe('SyncMutex', () => {
   it('execute a callback when unlocked', async () => {
     const callback = vi.fn(() => 'done');
     const result = await mutex.execute(callback);
-  
+
     expect(result).toBe('done');
     expect(callback).toHaveBeenCalled();
   });
@@ -58,7 +58,7 @@ describe('SyncMutex', () => {
   it('execute a promise callback when unlocked', async () => {
     const callback = vi.fn(() => Promise.resolve('done'));
     const result = await mutex.execute(callback);
-  
+
     expect(result).toBe('done');
     expect(callback).toHaveBeenCalled();
   });
@@ -71,7 +71,7 @@ describe('SyncMutex', () => {
       mutex.execute(callback),
       mutex.execute(callback),
     ]);
-  
+
     expect(result).toEqual(['done', undefined, undefined]);
     expect(callback).toHaveBeenCalledTimes(1);
   });
@@ -88,7 +88,24 @@ describe('SyncMutex', () => {
   it('unlocks after executing a callback', async () => {
     const callback = vi.fn(() => 'done');
     await mutex.execute(callback);
-  
+
+    expect(mutex.isLocked).toBe(false);
+  });
+
+  it('releases the lock and rethrows when the callback throws synchronously', async () => {
+    await expect(mutex.execute(() => {
+      throw new Error('boom');
+    })).rejects.toThrow('boom');
+
+    expect(mutex.isLocked).toBe(false);
+
+    // The mutex must still be usable afterwards.
+    await expect(mutex.execute(() => Promise.resolve('ok'))).resolves.toBe('ok');
+  });
+
+  it('releases the lock and rejects when the callback returns a rejecting promise', async () => {
+    await expect(mutex.execute(() => Promise.reject(new Error('async boom')))).rejects.toThrow('async boom');
+
     expect(mutex.isLocked).toBe(false);
   });
 });
diff --git a/core/stdlib/src/sync/mutex/index.ts b/core/stdlib/src/sync/mutex/index.ts
index b2ddaa2..5e3d9c1 100644
--- a/core/stdlib/src/sync/mutex/index.ts
+++ b/core/stdlib/src/sync/mutex/index.ts
@@ -2,19 +2,19 @@
  * @name SyncMutex
  * @category Utils
  * @description A simple synchronous mutex to provide more readable locking and unlocking of code blocks
- * 
+ *
  * @example
  * const mutex = new SyncMutex();
- * 
+ *
  * mutex.lock();
  *
  * mutex.unlock();
- * 
+ *
  * const result = await mutex.execute(() => {
  *  // do something
- *  return Promise.resolve('done');  
+ *  return Promise.resolve('done');
  * });
- * 
+ *
  * @since 0.0.5
  */
 export class SyncMutex {
@@ -37,9 +37,14 @@ export class SyncMutex {
       return;
 
     this.lock();
-    const result = await callback();
-    this.unlock();
 
-    return result;
+    // try/finally guarantees the lock is released even if the callback throws or
+    // rejects — otherwise a single failure would wedge the guarded section forever.
+    try {
+      return await callback();
+    }
+    finally {
+      this.unlock();
+    }
   }
 }
diff --git a/core/stdlib/src/text/index.ts b/core/stdlib/src/text/index.ts
index 1a0231f..22b867e 100644
--- a/core/stdlib/src/text/index.ts
+++ b/core/stdlib/src/text/index.ts
@@ -1,4 +1,3 @@
 export * from './levenshtein-distance';
+export * from './template';
 export * from './trigram-distance';
-// TODO: Template is not implemented yet
-// export * from './template';
\ No newline at end of file
diff --git a/core/stdlib/src/text/levenshtein-distance/index.test.ts b/core/stdlib/src/text/levenshtein-distance/index.test.ts
index a3c0f79..e670032 100644
--- a/core/stdlib/src/text/levenshtein-distance/index.test.ts
+++ b/core/stdlib/src/text/levenshtein-distance/index.test.ts
@@ -1,32 +1,43 @@
 import { describe, expect, it } from 'vitest';
-import {levenshteinDistance} from '.';
-  
-describe('levenshteinDistance', () => {
-    it('calculate edit distance between two strings', () => {  
-      // just one substitution I at the beginning
-      expect(levenshteinDistance('islander', 'slander')).toBe(1);
-  
-      // substitution M->K, T->M and add an A to the end
-      expect(levenshteinDistance('mart', 'karma')).toBe(3);
-  
-      // substitution K->S, E->I and insert G at the end
-      expect(levenshteinDistance('kitten', 'sitting')).toBe(3);
-  
-      // should add 4 letters FOOT at the beginning
-      expect(levenshteinDistance('ball', 'football')).toBe(4);
-  
-      // should delete 4 letters FOOT at the beginning
-      expect(levenshteinDistance('football', 'foot')).toBe(4);
-  
-      // needs to substitute the first 5 chars INTEN->EXECU
-      expect(levenshteinDistance('intention', 'execution')).toBe(5);
-    });
+import { levenshteinDistance } from '.';
 
-    it('handle empty strings', () => {
-      expect(levenshteinDistance('', '')).toBe(0);
-      expect(levenshteinDistance('a', '')).toBe(1);
-      expect(levenshteinDistance('', 'a')).toBe(1);
-      expect(levenshteinDistance('abc', '')).toBe(3);
-      expect(levenshteinDistance('', 'abc')).toBe(3);
-    });
-  });
\ No newline at end of file
+describe('levenshteinDistance', () => {
+  it('calculate edit distance between two strings', () => {
+    // just one substitution I at the beginning
+    expect(levenshteinDistance('islander', 'slander')).toBe(1);
+
+    // substitution M->K, T->M and add an A to the end
+    expect(levenshteinDistance('mart', 'karma')).toBe(3);
+
+    // substitution K->S, E->I and insert G at the end
+    expect(levenshteinDistance('kitten', 'sitting')).toBe(3);
+
+    // should add 4 letters FOOT at the beginning
+    expect(levenshteinDistance('ball', 'football')).toBe(4);
+
+    // should delete 4 letters FOOT at the beginning
+    expect(levenshteinDistance('football', 'foot')).toBe(4);
+
+    // needs to substitute the first 5 chars INTEN->EXECU
+    expect(levenshteinDistance('intention', 'execution')).toBe(5);
+  });
+
+  it('handle empty strings', () => {
+    expect(levenshteinDistance('', '')).toBe(0);
+    expect(levenshteinDistance('a', '')).toBe(1);
+    expect(levenshteinDistance('', 'a')).toBe(1);
+    expect(levenshteinDistance('abc', '')).toBe(3);
+    expect(levenshteinDistance('', 'abc')).toBe(3);
+  });
+
+  it('is symmetric', () => {
+    expect(levenshteinDistance('kitten', 'sitting')).toBe(levenshteinDistance('sitting', 'kitten'));
+    expect(levenshteinDistance('football', 'foot')).toBe(levenshteinDistance('foot', 'football'));
+  });
+
+  it('counts UTF-16 code units (surrogate pairs count as two)', () => {
+    expect(levenshteinDistance('😀', '')).toBe(2); // surrogate pair = 2 code units
+    expect(levenshteinDistance('a😀b', 'a😀b')).toBe(0);
+    expect(levenshteinDistance('café', 'cafe')).toBe(1);
+  });
+});
diff --git a/core/stdlib/src/text/levenshtein-distance/index.ts b/core/stdlib/src/text/levenshtein-distance/index.ts
index 8ddd0ec..1ab504a 100644
--- a/core/stdlib/src/text/levenshtein-distance/index.ts
+++ b/core/stdlib/src/text/levenshtein-distance/index.ts
@@ -2,7 +2,7 @@
  * @name levenshteinDistance
  * @category Text
  * @description Calculate the Levenshtein distance between two strings
- * 
+ *
  * @param {string} left First string
  * @param {string} right Second string
  * @returns {number} The Levenshtein distance between the two strings
@@ -10,37 +10,39 @@
  * @since 0.0.1
  */
 export function levenshteinDistance(left: string, right: string): number {
-    if (left === right) return 0;
+  if (left === right) return 0;
 
-    if (left.length === 0) return right.length;
-    if (right.length === 0) return left.length;
+  if (left.length === 0) return right.length;
+  if (right.length === 0) return left.length;
 
-    // Create empty edit distance matrix for all possible modifications of
-    // substrings of left to substrings of right
-    const distanceMatrix = Array(right.length + 1).fill(null).map(() => Array(left.length + 1).fill(null));
+  // Iterate with the shorter string as the inner dimension so the rolling rows are
+  // O(min(m, n)) memory instead of a full O(m * n) matrix.
+  const outer = left.length >= right.length ? left : right;
+  const inner = left.length >= right.length ? right : left;
+  const innerLength = inner.length;
 
-    // Fill the first row of the matrix
-    // If this is the first row, we're transforming from an empty string to left
-    // In this case, the number of operations equals the length of left substring
-    for (let i = 0; i <= left.length; i++)
-        distanceMatrix[0]![i]! = i;
+  // prev = previous row; current = row being computed. prev starts as the base row [0..innerLength].
+  let prev = Array.from({ length: innerLength + 1 }, (_, i) => i);
+  let current = Array.from<number>({ length: innerLength + 1 });
 
-    // Fill the first column of the matrix
-    // If this is the first column, we're transforming empty string to right
-    // In this case, the number of operations equals the length of right substring
-    for (let j = 0; j <= right.length; j++)
-        distanceMatrix[j]![0]! = j;
+  for (let i = 1; i <= outer.length; i++) {
+    current[0] = i;
+    const outerChar = outer[i - 1];
 
-    for (let j = 1; j <= right.length; j++) {
-        for (let i = 1; i <= left.length; i++) {
-            const indicator = left[i - 1] === right[j - 1] ? 0 : 1;
-            distanceMatrix[j]![i]! = Math.min(
-                distanceMatrix[j]![i - 1]! + 1, // deletion
-                distanceMatrix[j - 1]![i]! + 1, // insertion
-                distanceMatrix[j - 1]![i - 1]! + indicator // substitution
-            );
-        }
+    for (let j = 1; j <= innerLength; j++) {
+      const cost = outerChar === inner[j - 1] ? 0 : 1;
+      current[j] = Math.min(
+        prev[j]! + 1, // insertion
+        current[j - 1]! + 1, // deletion
+        prev[j - 1]! + cost, // substitution
+      );
     }
 
-    return distanceMatrix[right.length]![left.length]!;
+    // Swap the rolling rows; the freshly computed row becomes `prev` for the next iteration.
+    const next = prev;
+    prev = current;
+    current = next;
+  }
+
+  return prev[innerLength]!;
 }
diff --git a/core/stdlib/src/text/template/index.test-d.ts b/core/stdlib/src/text/template/index.test-d.ts
index f64bb32..e06ea07 100644
--- a/core/stdlib/src/text/template/index.test-d.ts
+++ b/core/stdlib/src/text/template/index.test-d.ts
@@ -1,7 +1,8 @@
 import { describe, expectTypeOf, it } from 'vitest';
-import type { ClearPlaceholder, ExtractPlaceholders } from './index';
+import type { ClearPlaceholder, ExtractPlaceholders, GenerateTypes } from './index';
+import { templateObject } from './index';
 
-describe.skip('template', () => {
+describe('template', () => {
   describe('ClearPlaceholder', () => {
     it('ignores strings without braces', () => {
       type actual = ClearPlaceholder<'name'>;
@@ -102,4 +103,36 @@ describe.skip('template', () => {
       expectTypeOf<actual>().toEqualTypeOf<expected>();
     });
   });
-});
\ No newline at end of file
+
+  describe('GenerateTypes', () => {
+    type Shape = GenerateTypes<'user.name', string>;
+
+    it('accepts a fully-matching shape', () => {
+      expectTypeOf<{ user: { name: 'John' } }>().toExtend<Shape>();
+    });
+
+    it('accepts missing keys (every key is optional)', () => {
+      expectTypeOf<{ unrelated: number }>().toExtend<Shape>();
+    });
+
+    it('accepts extra keys (objects stay open)', () => {
+      expectTypeOf<{ user: { name: 'John' }; extra: number }>().toExtend<Shape>();
+    });
+
+    it('rejects a mistyped leaf value', () => {
+      expectTypeOf<{ user: { name: number } }>().not.toExtend<Shape>();
+    });
+  });
+
+  describe('templateObject', () => {
+    it('always returns a string', () => {
+      expectTypeOf(templateObject('Hello, {name}!', { name: 'John' })).toEqualTypeOf<string>();
+      expectTypeOf(templateObject('Hi {user.name}', { user: { name: 'John' } })).toEqualTypeOf<string>();
+    });
+
+    it('accepts a string or factory fallback', () => {
+      expectTypeOf(templateObject('Hello, {name}!', {}, 'Guest')).toEqualTypeOf<string>();
+      expectTypeOf(templateObject('Hello, {name}!', {}, key => `<${key}>`)).toEqualTypeOf<string>();
+    });
+  });
+});
diff --git a/core/stdlib/src/text/template/index.test.ts b/core/stdlib/src/text/template/index.test.ts
index eabb1f2..4ac001c 100644
--- a/core/stdlib/src/text/template/index.test.ts
+++ b/core/stdlib/src/text/template/index.test.ts
@@ -1,15 +1,15 @@
 import { describe, expect, it } from 'vitest';
 import { templateObject } from '.';
 
-describe.skip('templateObject', () => {
-  it('replace template placeholders with corresponding values from args', () => {
+describe('templateObject', () => {
+  it('replace an indexed array placeholder', () => {
     const template = 'Hello, {names.0}!';
     const args = { names: ['John'] };
     const result = templateObject(template, args);
     expect(result).toBe('Hello, John!');
   });
 
-  it('replace template placeholders with corresponding values from args', () => {
+  it('replace a simple key placeholder', () => {
     const template = 'Hello, {name}!';
     const args = { name: 'John' };
     const result = templateObject(template, args);
@@ -33,16 +33,35 @@ describe.skip('templateObject', () => {
   });
 
   it('replace template placeholders with nested values from args', () => {
-      const result = templateObject('Hello {{user.name}, your address {user.addresses.0.street}', {
-        user: {
-         name: 'John Doe',
-         addresses: [
-           { street: '123 Main St', city: 'Springfield'},
-           { street: '456 Elm St', city: 'Shelbyville'}
-         ]
-       }
-     });
+    const result = templateObject('Hello {{user.name}, your address {user.addresses.0.street}', {
+      user: {
+        name: 'John Doe',
+        addresses: [
+          { street: '123 Main St', city: 'Springfield' },
+          { street: '456 Elm St', city: 'Shelbyville' },
+        ],
+      },
+    });
 
-      expect(result).toBe('Hello {John Doe, your address 123 Main St');
+    expect(result).toBe('Hello {John Doe, your address 123 Main St');
   });
-});
\ No newline at end of file
+
+  it('replace a missing placeholder with an empty string by default', () => {
+    expect(templateObject('Hello, {name}!', {})).toBe('Hello, !');
+  });
+
+  it('render falsy-but-present values (0, false, empty string)', () => {
+    expect(templateObject('count: {n}', { n: 0 })).toBe('count: 0');
+    expect(templateObject('flag: {b}', { b: false })).toBe('flag: false');
+    expect(templateObject('s:{s}.', { s: '' })).toBe('s:.');
+  });
+
+  it('trim whitespace inside the braces', () => {
+    expect(templateObject('Hi { name }!', { name: 'Jo' })).toBe('Hi Jo!');
+  });
+
+  it('leave a template without placeholders untouched', () => {
+    expect(templateObject('no placeholders here', {})).toBe('no placeholders here');
+    expect(templateObject('', {})).toBe('');
+  });
+});
diff --git a/core/stdlib/src/text/template/index.ts b/core/stdlib/src/text/template/index.ts
index a23f447..827a365 100644
--- a/core/stdlib/src/text/template/index.ts
+++ b/core/stdlib/src/text/template/index.ts
@@ -1,6 +1,6 @@
+import type { Collection, Path, PathToPartialType, Stringable, Trim, UnionToIntersection } from '../../types';
 import { get } from '../../collections';
 import { isFunction } from '../../types';
-import type { Collection, Path, PathToType, Stringable, Trim, UnionToIntersection } from '../../types';
 
 /**
  * Type of a value that will be used to replace a placeholder in a template.
@@ -15,18 +15,18 @@ export type TemplateFallback = string | ((key: string) => string);
 /**
  * Type of a template string with placeholders.
  */
-const TEMPLATE_PLACEHOLDER = /\{\s*([^{}]+?)\s*\}/gm;
+const TEMPLATE_PLACEHOLDER = /\{([^{}]+)\}/g;
 
 /**
  * Removes the placeholder syntax from a template string.
- * 
+ *
  * @example
  * type Base = ClearPlaceholder<'{user.name}'>; // 'user.name'
  * type Unbalanced = ClearPlaceholder<'{user.name'>; // 'user.name'
  * type Spaces = ClearPlaceholder<'{ user.name }'>; // 'user.name'
  */
-export type ClearPlaceholder<In extends string> =
-  In extends `${string}{${infer Template}`
+export type ClearPlaceholder<In extends string>
+  = In extends `${string}{${infer Template}`
     ? ClearPlaceholder<Template>
     : In extends `${infer Template}}${string}`
       ? ClearPlaceholder<Template>
@@ -34,12 +34,12 @@ export type ClearPlaceholder<In extends string> =
 
 /**
  * Extracts all placeholders from a template string.
- * 
+ *
  * @example
  * type Base = ExtractPlaceholders<'Hello {user.name}, {user.addresses.0.street}'>; // 'user.name' | 'user.addresses.0.street'
  */
-export type ExtractPlaceholders<In extends string> =
-  In extends `${infer Before}}${infer After}`
+export type ExtractPlaceholders<In extends string>
+  = In extends `${infer Before}}${infer After}`
     ? Before extends `${string}{${infer Placeholder}`
       ? ClearPlaceholder<Placeholder> | ExtractPlaceholders<After>
       : ExtractPlaceholders<After>
@@ -47,28 +47,50 @@ export type ExtractPlaceholders<In extends string> =
 
 /**
  * Generates a type for a template string with placeholders.
- * 
+ *
  * @example
  * type Base = GenerateTypes<'Hello {user.name}, your address {user.addresses.0.street}'>; // { user: { name: string; addresses: { 0: { street: string; }; }; }; }
  * type WithTarget = GenerateTypes<'Hello {user.age}', number>; // { user: { age: number; }; }
  */
-export type GenerateTypes<T extends string, Target = string> = UnionToIntersection<PathToType<Path<T>, Target>>;
+export type GenerateTypes<T extends string, Target = string>
+  // No placeholders (T is never) → impose no shape on the args object.
+  = [T] extends [never]
+    ? Collection
+    : UnionToIntersection<PathToPartialType<Path<T>, Target>>;
 
+/**
+ * @name templateObject
+ * @category Text
+ * @description Replace `{path}` placeholders in a template string with values
+ * resolved from `args` by dot-path. Placeholder keys are inferred from the
+ * template, so `args` is type-checked and auto-completed against them.
+ *
+ * @param {string} template - Template string with `{path}` placeholders
+ * @param {object} args - Source values, keyed by the placeholder paths
+ * @param {string | ((key: string) => string)} [fallback] - Value (or factory) used when a placeholder cannot be resolved; defaults to an empty string
+ * @returns {string} The interpolated string
+ *
+ * @example
+ * templateObject('Hello, {name}!', { name: 'John' }); // 'Hello, John!'
+ * templateObject('Hi {user.addresses.0.city}', { user: { addresses: [{ city: 'NY' }] } }); // 'Hi NY'
+ * templateObject('Hello, {name}!', {}, 'Guest'); // 'Hello, Guest!'
+ * templateObject('Hello, {name}!', {}, key => `<${key}>`); // 'Hello, <name>!'
+ *
+ * @since 0.0.4
+ */
 export function templateObject<
   T extends string,
-  A extends GenerateTypes<ExtractPlaceholders<T>, TemplateValue> & Collection
->(template: T, args: A, fallback?: TemplateFallback) {
-    return template.replace(TEMPLATE_PLACEHOLDER, (_, key) => {    
-        const value = get(args, key)?.toString();
-        return value !== undefined ? value : (isFunction(fallback) ? fallback(key) : '');
-    });
-}
+  A extends GenerateTypes<ExtractPlaceholders<T>, TemplateValue> & Collection,
+>(template: T, args: A, fallback?: TemplateFallback): string {
+  return template.replaceAll(TEMPLATE_PLACEHOLDER, (_match, key: string) => {
+    const value = get(args, key.trim());
 
-templateObject('Hello {user.name}, your address {user.addresses.0.city}', {
-  user: {
-    name: 'John',
-    addresses: [
-      { city: 'Kolpa' },
-    ],
-  },
-});
+    if (value !== null && value !== undefined)
+      return String(value);
+
+    if (isFunction<(key: string) => string>(fallback))
+      return fallback(key);
+
+    return fallback ?? '';
+  });
+}
diff --git a/core/stdlib/src/text/trigram-distance/index.test.ts b/core/stdlib/src/text/trigram-distance/index.test.ts
index 3f23146..b58da55 100644
--- a/core/stdlib/src/text/trigram-distance/index.test.ts
+++ b/core/stdlib/src/text/trigram-distance/index.test.ts
@@ -1,93 +1,100 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { trigramDistance, trigramProfile } from '.';
 
 describe('trigramProfile', () => {
-    it('trigram profile of a text with different trigrams', () => {
-        const different_trigrams = 'hello world';
-        const profile1 = trigramProfile(different_trigrams);
+  it('trigram profile of a text with different trigrams', () => {
+    const different_trigrams = 'hello world';
+    const profile1 = trigramProfile(different_trigrams);
 
-        expect(profile1).toEqual(new Map([
-            ['\n\nh', 1],
-            ['\nhe', 1],
-            ['hel', 1],
-            ['ell', 1],
-            ['llo', 1],
-            ['lo ', 1],
-            ['o w', 1],
-            [' wo', 1],
-            ['wor', 1],
-            ['orl', 1],
-            ['rld', 1],
-            ['ld\n', 1],
-            ['d\n\n', 1]
-        ]));
-    });
+    expect(profile1).toEqual(new Map([
+      ['\n\nh', 1],
+      ['\nhe', 1],
+      ['hel', 1],
+      ['ell', 1],
+      ['llo', 1],
+      ['lo ', 1],
+      ['o w', 1],
+      [' wo', 1],
+      ['wor', 1],
+      ['orl', 1],
+      ['rld', 1],
+      ['ld\n', 1],
+      ['d\n\n', 1],
+    ]));
+  });
 
-    it('trigram profile of a text with repeated trigrams', () => {
-        const repeated_trigrams = 'hello hello';
-        const profile2 = trigramProfile(repeated_trigrams);
+  it('trigram profile of a text with repeated trigrams', () => {
+    const repeated_trigrams = 'hello hello';
+    const profile2 = trigramProfile(repeated_trigrams);
 
-        expect(profile2).toEqual(new Map([
-            ['\n\nh', 1],
-            ['\nhe', 1],
-            ['hel', 2],
-            ['ell', 2],
-            ['llo', 2],
-            ['lo ', 1],
-            ['o h', 1],
-            [' he', 1],
-            ['lo\n', 1],
-            ['o\n\n', 1]
-        ]));
-    });
+    expect(profile2).toEqual(new Map([
+      ['\n\nh', 1],
+      ['\nhe', 1],
+      ['hel', 2],
+      ['ell', 2],
+      ['llo', 2],
+      ['lo ', 1],
+      ['o h', 1],
+      [' he', 1],
+      ['lo\n', 1],
+      ['o\n\n', 1],
+    ]));
+  });
 
-    it('trigram profile of an empty text', () => {
-        const text = '';
-        const profile = trigramProfile(text);
+  it('trigram profile of an empty text', () => {
+    const text = '';
+    const profile = trigramProfile(text);
 
-        expect(profile).toEqual(new Map([
-            ['\n\n\n', 2],
-        ]));
-    });
+    expect(profile).toEqual(new Map([
+      ['\n\n\n', 2],
+    ]));
+  });
 });
 
 describe('trigramDistance', () => {
-    it('zero when comparing the same text', () => {
-        const profile1 = trigramProfile('hello world');
-        const profile2 = trigramProfile('hello world');
+  it('zero when comparing the same text', () => {
+    const profile1 = trigramProfile('hello world');
+    const profile2 = trigramProfile('hello world');
 
-        expect(trigramDistance(profile1, profile2)).toBe(0);
-    });
+    expect(trigramDistance(profile1, profile2)).toBe(0);
+  });
 
-    it('one for completely different text', () => {
-        const profile1 = trigramProfile('hello world');
-        const profile2 = trigramProfile('lorem ipsum');
+  it('one for completely different text', () => {
+    const profile1 = trigramProfile('hello world');
+    const profile2 = trigramProfile('lorem ipsum');
 
-        expect(trigramDistance(profile1, profile2)).toBe(1);
-    });
+    expect(trigramDistance(profile1, profile2)).toBe(1);
+  });
 
-    it('one for empty text and non-empty text', () => {
-        const profile1 = trigramProfile('hello world');
-        const profile2 = trigramProfile('');
+  it('is symmetric', () => {
+    const a = trigramProfile('hello world');
+    const b = trigramProfile('hello lorem');
 
-        expect(trigramDistance(profile1, profile2)).toBe(1);
-    });
+    expect(trigramDistance(a, b)).toBe(trigramDistance(b, a));
+  });
 
-    it('approximately 0.5 for similar text', () => {
-        const profile1 = trigramProfile('hello world');
-        const profile2 = trigramProfile('hello lorem');
+  it('one for empty text and non-empty text', () => {
+    const profile1 = trigramProfile('hello world');
+    const profile2 = trigramProfile('');
 
-        const approx = trigramDistance(profile1, profile2);
+    expect(trigramDistance(profile1, profile2)).toBe(1);
+  });
 
-        expect(approx).toBeGreaterThan(0.45);
-        expect(approx).toBeLessThan(0.55);
-    });
+  it('approximately 0.5 for similar text', () => {
+    const profile1 = trigramProfile('hello world');
+    const profile2 = trigramProfile('hello lorem');
 
-    it('triangle inequality', () => {
-        const A = trigramDistance(trigramProfile('metric'), trigramProfile('123ric'));
-        const B = trigramDistance(trigramProfile('123ric'), trigramProfile('123456'));
-        const C = trigramDistance(trigramProfile('metric'), trigramProfile('123456'));
+    const approx = trigramDistance(profile1, profile2);
 
-        expect(A + B).toBeGreaterThanOrEqual(C);
-    });
-});
\ No newline at end of file
+    expect(approx).toBeGreaterThan(0.45);
+    expect(approx).toBeLessThan(0.55);
+  });
+
+  it('triangle inequality', () => {
+    const A = trigramDistance(trigramProfile('metric'), trigramProfile('123ric'));
+    const B = trigramDistance(trigramProfile('123ric'), trigramProfile('123456'));
+    const C = trigramDistance(trigramProfile('metric'), trigramProfile('123456'));
+
+    expect(A + B).toBeGreaterThanOrEqual(C);
+  });
+});
diff --git a/core/stdlib/src/text/trigram-distance/index.ts b/core/stdlib/src/text/trigram-distance/index.ts
index ee24fbd..d797b68 100644
--- a/core/stdlib/src/text/trigram-distance/index.ts
+++ b/core/stdlib/src/text/trigram-distance/index.ts
@@ -4,31 +4,31 @@ export type Trigrams = Map<string, number>;
  * @name trigramProfile
  * @category Text
  * @description Extracts trigrams from a text and returns a map of trigram to count
- * 
+ *
  * @param {string} text The text to extract trigrams
  * @returns {Trigrams} A map of trigram to count
  *
  * @since 0.0.1
  */
 export function trigramProfile(text: string): Trigrams {
-    text = `\n\n${text}\n\n`;
+  text = `\n\n${text}\n\n`;
 
-    const trigrams = new Map<string, number>();
+  const trigrams = new Map<string, number>();
 
-    for (let i = 0; i < text.length - 2; i++) {
-        const trigram = text.slice(i, i + 3);
-        const count = trigrams.get(trigram) ?? 0;
-        trigrams.set(trigram, count + 1);
-    }
+  for (let i = 0; i < text.length - 2; i++) {
+    const trigram = text.slice(i, i + 3);
+    const count = trigrams.get(trigram) ?? 0;
+    trigrams.set(trigram, count + 1);
+  }
 
-    return trigrams;
+  return trigrams;
 }
 
 /**
  * @name trigramDistance
  * @category Text
  * @description Calculates the trigram distance between two strings
- * 
+ *
  * @param {Trigrams} left First text trigram profile
  * @param {Trigrams} right Second text trigram profile
  * @returns {number} The trigram distance between the two strings
@@ -36,22 +36,22 @@ export function trigramProfile(text: string): Trigrams {
  * @since 0.0.1
  */
 export function trigramDistance(left: Trigrams, right: Trigrams): number {
-    let distance = -4;
-    let total = -4;
+  let distance = -4;
+  let total = -4;
 
-    for (const [trigram, left_count] of left) {
-        total += left_count;
-        const right_count = right.get(trigram) ?? 0;
-        distance += Math.abs(left_count - right_count);
-    }
+  for (const [trigram, left_count] of left) {
+    total += left_count;
+    const right_count = right.get(trigram) ?? 0;
+    distance += Math.abs(left_count - right_count);
+  }
 
-    for (const [trigram, right_count] of right) {
-        total += right_count;
-        const left_count = left.get(trigram) ?? 0;
-        distance += Math.abs(left_count - right_count);
-    }
+  for (const [trigram, right_count] of right) {
+    total += right_count;
+    const left_count = left.get(trigram) ?? 0;
+    distance += Math.abs(left_count - right_count);
+  }
 
-    if (distance < 0) return 0;
+  if (distance < 0) return 0;
 
-    return distance / total;
-}
\ No newline at end of file
+  return distance / total;
+}
diff --git a/core/stdlib/src/types/index.ts b/core/stdlib/src/types/index.ts
index 25d7c6a..73f997e 100644
--- a/core/stdlib/src/types/index.ts
+++ b/core/stdlib/src/types/index.ts
@@ -1,2 +1,2 @@
 export * from './js';
-export * from './ts';
\ No newline at end of file
+export * from './ts';
diff --git a/core/stdlib/src/types/js/casts.test.ts b/core/stdlib/src/types/js/casts.test.ts
index c79abfd..6ca62b4 100644
--- a/core/stdlib/src/types/js/casts.test.ts
+++ b/core/stdlib/src/types/js/casts.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { toString } from './casts';
 
 describe('casts', () => {
@@ -27,4 +27,4 @@ describe('casts', () => {
       expect(toString(new WeakSet())).toBe('[object WeakSet]');
     });
   });
-});
\ No newline at end of file
+});
diff --git a/core/stdlib/src/types/js/casts.ts b/core/stdlib/src/types/js/casts.ts
index 11664b3..b6c7f08 100644
--- a/core/stdlib/src/types/js/casts.ts
+++ b/core/stdlib/src/types/js/casts.ts
@@ -2,10 +2,10 @@
  * @name toString
  * @category Types
  * @description To string any value
- * 
+ *
  * @param {any} value
  * @returns {string}
- * 
+ *
  * @since 0.0.2
  */
-export const toString = (value: any): string => Object.prototype.toString.call(value);
\ No newline at end of file
+export const toString = (value: any): string => Object.prototype.toString.call(value);
diff --git a/core/stdlib/src/types/js/complex.test.ts b/core/stdlib/src/types/js/complex.test.ts
index 133f5f1..9e70f26 100644
--- a/core/stdlib/src/types/js/complex.test.ts
+++ b/core/stdlib/src/types/js/complex.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { isArray, isObject, isRegExp, isDate, isError, isPromise, isMap, isSet, isWeakMap, isWeakSet } from './complex';
+import { isArray, isDate, isError, isMap, isObject, isPromise, isRegExp, isSet, isWeakMap, isWeakSet } from './complex';
 
 describe('complex', () => {
   describe('isArray', () => {
@@ -7,7 +7,7 @@ describe('complex', () => {
       expect(isArray([])).toBe(true);
       expect(isArray([1, 2, 3])).toBe(true);
     });
-  
+
     it('false if the value is not an array', () => {
       expect(isArray('')).toBe(false);
       expect(isArray(123)).toBe(false);
@@ -19,13 +19,13 @@ describe('complex', () => {
       expect(isArray(new Set())).toBe(false);
     });
   });
-  
+
   describe('isObject', () => {
     it('true if the value is an object', () => {
       expect(isObject({})).toBe(true);
       expect(isObject({ key: 'value' })).toBe(true);
     });
-  
+
     it('false if the value is not an object', () => {
       expect(isObject('')).toBe(false);
       expect(isObject(123)).toBe(false);
@@ -36,14 +36,23 @@ describe('complex', () => {
       expect(isObject(new Map())).toBe(false);
       expect(isObject(new Set())).toBe(false);
     });
+
+    it('true for class instances and null-prototype objects', () => {
+      // eslint-disable-next-line @typescript-eslint/no-extraneous-class -- fixture for the instance check
+      class Foo {}
+
+      expect(isObject(new Foo())).toBe(true);
+      expect(isObject(Object.create(null))).toBe(true);
+    });
   });
-  
+
   describe('isRegExp', () => {
     it('true if the value is a regexp', () => {
       expect(isRegExp(/test/)).toBe(true);
+      // eslint-disable-next-line prefer-regex-literals -- intentionally testing the constructor form
       expect(isRegExp(new RegExp('test'))).toBe(true);
     });
-  
+
     it('false if the value is not a regexp', () => {
       expect(isRegExp('')).toBe(false);
       expect(isRegExp(123)).toBe(false);
@@ -56,12 +65,12 @@ describe('complex', () => {
       expect(isRegExp(new Set())).toBe(false);
     });
   });
-  
+
   describe('isDate', () => {
     it('true if the value is a date', () => {
       expect(isDate(new Date())).toBe(true);
     });
-  
+
     it('false if the value is not a date', () => {
       expect(isDate('')).toBe(false);
       expect(isDate(123)).toBe(false);
@@ -74,12 +83,12 @@ describe('complex', () => {
       expect(isDate(new Set())).toBe(false);
     });
   });
-  
+
   describe('isError', () => {
     it('true if the value is an error', () => {
       expect(isError(new Error('test'))).toBe(true);
     });
-  
+
     it('false if the value is not an error', () => {
       expect(isError('')).toBe(false);
       expect(isError(123)).toBe(false);
@@ -92,12 +101,14 @@ describe('complex', () => {
       expect(isError(new Set())).toBe(false);
     });
   });
-  
+
   describe('isPromise', () => {
     it('true if the value is a promise', () => {
       expect(isPromise(new Promise(() => {}))).toBe(true);
+      expect(isPromise(Promise.resolve())).toBe(true);
+      expect(isPromise((async () => {})())).toBe(true);
     });
-  
+
     it('false if the value is not a promise', () => {
       expect(isPromise('')).toBe(false);
       expect(isPromise(123)).toBe(false);
@@ -109,13 +120,18 @@ describe('complex', () => {
       expect(isPromise(new Map())).toBe(false);
       expect(isPromise(new Set())).toBe(false);
     });
+
+    it('false for a non-native thenable (only native promises match)', () => {
+      // eslint-disable-next-line unicorn/no-thenable -- documenting that custom thenables are not detected
+      expect(isPromise({ then() {} })).toBe(false);
+    });
   });
-  
+
   describe('isMap', () => {
     it('true if the value is a map', () => {
       expect(isMap(new Map())).toBe(true);
     });
-  
+
     it('false if the value is not a map', () => {
       expect(isMap('')).toBe(false);
       expect(isMap(123)).toBe(false);
@@ -127,12 +143,12 @@ describe('complex', () => {
       expect(isMap(new Set())).toBe(false);
     });
   });
-  
+
   describe('isSet', () => {
     it('true if the value is a set', () => {
       expect(isSet(new Set())).toBe(true);
     });
-  
+
     it('false if the value is not a set', () => {
       expect(isSet('')).toBe(false);
       expect(isSet(123)).toBe(false);
@@ -144,12 +160,12 @@ describe('complex', () => {
       expect(isSet(new Map())).toBe(false);
     });
   });
-  
+
   describe('isWeakMap', () => {
     it('true if the value is a weakmap', () => {
       expect(isWeakMap(new WeakMap())).toBe(true);
     });
-  
+
     it('false if the value is not a weakmap', () => {
       expect(isWeakMap('')).toBe(false);
       expect(isWeakMap(123)).toBe(false);
@@ -162,12 +178,12 @@ describe('complex', () => {
       expect(isWeakMap(new Set())).toBe(false);
     });
   });
-  
+
   describe('isWeakSet', () => {
     it('true if the value is a weakset', () => {
       expect(isWeakSet(new WeakSet())).toBe(true);
     });
-  
+
     it('false if the value is not a weakset', () => {
       expect(isWeakSet('')).toBe(false);
       expect(isWeakSet(123)).toBe(false);
@@ -180,4 +196,4 @@ describe('complex', () => {
       expect(isWeakSet(new Set())).toBe(false);
     });
   });
-});
\ No newline at end of file
+});
diff --git a/core/stdlib/src/types/js/complex.ts b/core/stdlib/src/types/js/complex.ts
index 77f2f48..cdd195a 100644
--- a/core/stdlib/src/types/js/complex.ts
+++ b/core/stdlib/src/types/js/complex.ts
@@ -4,10 +4,10 @@ import { toString } from './casts';
  * @name isFunction
  * @category Types
  * @description Check if a value is an array
- * 
+ *
  * @param {any} value
  * @returns {value is any[]}
- * 
+ *
  * @since 0.0.2
  */
 export const isArray = (value: any): value is any[] => Array.isArray(value);
@@ -16,10 +16,10 @@ export const isArray = (value: any): value is any[] => Array.isArray(value);
  * @name isObject
  * @category Types
  * @description Check if a value is an object
- * 
+ *
  * @param {any} value
  * @returns {value is object}
- * 
+ *
  * @since 0.0.2
  */
 export const isObject = (value: any): value is object => toString(value) === '[object Object]';
@@ -31,7 +31,7 @@ export const isObject = (value: any): value is object => toString(value) === '[o
  *
  * @param {any} value
  * @returns {value is RegExp}
- * 
+ *
  * @since 0.0.2
  */
 export const isRegExp = (value: any): value is RegExp => toString(value) === '[object RegExp]';
@@ -43,7 +43,7 @@ export const isRegExp = (value: any): value is RegExp => toString(value) === '[o
  *
  * @param {any} value
  * @returns {value is Date}
- * 
+ *
  * @since 0.0.2
  */
 export const isDate = (value: any): value is Date => toString(value) === '[object Date]';
@@ -52,10 +52,10 @@ export const isDate = (value: any): value is Date => toString(value) === '[objec
  * @name isError
  * @category Types
  * @description Check if a value is an error
- * 
+ *
  * @param {any} value
  * @returns {value is Error}
- * 
+ *
  * @since 0.0.2
  */
 export const isError = (value: any): value is Error => toString(value) === '[object Error]';
@@ -64,10 +64,10 @@ export const isError = (value: any): value is Error => toString(value) === '[obj
  * @name isPromise
  * @category Types
  * @description Check if a value is a promise
- * 
+ *
  * @param {any} value
  * @returns {value is Promise<any>}
- * 
+ *
  * @since 0.0.2
  */
 export const isPromise = (value: any): value is Promise<any> => toString(value) === '[object Promise]';
@@ -76,10 +76,10 @@ export const isPromise = (value: any): value is Promise<any> => toString(value)
  * @name isMap
  * @category Types
  * @description Check if a value is a map
- * 
+ *
  * @param {any} value
  * @returns {value is Map<any, any>}
- * 
+ *
  * @since 0.0.2
  */
 export const isMap = (value: any): value is Map<any, any> => toString(value) === '[object Map]';
@@ -88,10 +88,10 @@ export const isMap = (value: any): value is Map<any, any> => toString(value) ===
  * @name isSet
  * @category Types
  * @description Check if a value is a set
- * 
+ *
  * @param {any} value
  * @returns {value is Set<any>}
- * 
+ *
  * @since 0.0.2
  */
 export const isSet = (value: any): value is Set<any> => toString(value) === '[object Set]';
@@ -100,10 +100,10 @@ export const isSet = (value: any): value is Set<any> => toString(value) === '[ob
  * @name isWeakMap
  * @category Types
  * @description Check if a value is a weakmap
- * 
+ *
  * @param {any} value
  * @returns {value is WeakMap<object, any>}
- * 
+ *
  * @since 0.0.2
  */
 export const isWeakMap = (value: any): value is WeakMap<object, any> => toString(value) === '[object WeakMap]';
@@ -112,10 +112,10 @@ export const isWeakMap = (value: any): value is WeakMap<object, any> => toString
  * @name isWeakSet
  * @category Types
  * @description Check if a value is a weakset
- * 
+ *
  * @param {any} value
  * @returns {value is WeakSet<object>}
- * 
+ *
  * @since 0.0.2
  */
 export const isWeakSet = (value: any): value is WeakSet<object> => toString(value) === '[object WeakSet]';
diff --git a/core/stdlib/src/types/js/index.ts b/core/stdlib/src/types/js/index.ts
index 70d8433..41decba 100644
--- a/core/stdlib/src/types/js/index.ts
+++ b/core/stdlib/src/types/js/index.ts
@@ -1,3 +1,3 @@
 export * from './casts';
 export * from './primitives';
-export * from './complex';
\ No newline at end of file
+export * from './complex';
diff --git a/core/stdlib/src/types/js/primitives.test.ts b/core/stdlib/src/types/js/primitives.test.ts
index 799aa59..25318a2 100644
--- a/core/stdlib/src/types/js/primitives.test.ts
+++ b/core/stdlib/src/types/js/primitives.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { isBoolean, isFunction, isNumber, isBigInt, isString, isSymbol, isUndefined, isNull } from './primitives';
+import { isBigInt, isBoolean, isFunction, isNull, isNumber, isString, isSymbol, isUndefined } from './primitives';
 
 describe('primitives', () => {
   describe('isBoolean', () => {
@@ -7,95 +7,102 @@ describe('primitives', () => {
       expect(isBoolean(true)).toBe(true);
       expect(isBoolean(false)).toBe(true);
     });
-    
+
     it('false if the value is not a boolean', () => {
       expect(isBoolean(0)).toBe(false);
       expect(isBoolean('true')).toBe(false);
       expect(isBoolean(null)).toBe(false);
     });
   });
-  
+
   describe('isFunction', () => {
     it('true if the value is a function', () => {
       expect(isFunction(() => {})).toBe(true);
-      expect(isFunction(function() {})).toBe(true);
+      expect(isFunction(function () {})).toBe(true);
     });
-  
+
     it('false if the value is not a function', () => {
       expect(isFunction(123)).toBe(false);
       expect(isFunction('function')).toBe(false);
       expect(isFunction(null)).toBe(false);
     });
   });
-  
+
   describe('isNumber', () => {
     it('true if the value is a number', () => {
       expect(isNumber(123)).toBe(true);
       expect(isNumber(3.14)).toBe(true);
     });
-  
+
     it('false if the value is not a number', () => {
       expect(isNumber('123')).toBe(false);
       expect(isNumber(null)).toBe(false);
     });
+
+    it('true for NaN, Infinity and -0 (purely typeof-based)', () => {
+      expect(isNumber(Number.NaN)).toBe(true);
+      expect(isNumber(Number.POSITIVE_INFINITY)).toBe(true);
+      expect(isNumber(Number.NEGATIVE_INFINITY)).toBe(true);
+      expect(isNumber(-0)).toBe(true);
+    });
   });
-  
+
   describe('isBigInt', () => {
     it('true if the value is a bigint', () => {
       expect(isBigInt(BigInt(123))).toBe(true);
     });
-  
+
     it('false if the value is not a bigint', () => {
       expect(isBigInt(123)).toBe(false);
       expect(isBigInt('123')).toBe(false);
       expect(isBigInt(null)).toBe(false);
     });
   });
-  
+
   describe('isString', () => {
     it('true if the value is a string', () => {
       expect(isString('hello')).toBe(true);
     });
-  
+
     it('false if the value is not a string', () => {
       expect(isString(123)).toBe(false);
       expect(isString(null)).toBe(false);
     });
   });
-  
+
   describe('isSymbol', () => {
     it('true if the value is a symbol', () => {
-      expect(isSymbol(Symbol())).toBe(true);
+      expect(isSymbol(Symbol('test'))).toBe(true);
     });
-  
+
     it('false if the value is not a symbol', () => {
       expect(isSymbol(123)).toBe(false);
       expect(isSymbol('symbol')).toBe(false);
       expect(isSymbol(null)).toBe(false);
     });
   });
-  
+
   describe('isUndefined', () => {
     it('true if the value is undefined', () => {
       expect(isUndefined(undefined)).toBe(true);
     });
-  
+
     it('false if the value is not undefined', () => {
       expect(isUndefined(null)).toBe(false);
       expect(isUndefined(123)).toBe(false);
       expect(isUndefined('undefined')).toBe(false);
     });
   });
-  
+
   describe('isNull', () => {
     it('true if the value is null', () => {
       expect(isNull(null)).toBe(true);
     });
-  
+
     it('false if the value is not null', () => {
       expect(isNull(undefined)).toBe(false);
       expect(isNull(123)).toBe(false);
       expect(isNull('null')).toBe(false);
     });
   });
-});
\ No newline at end of file
+});
diff --git a/core/stdlib/src/types/js/primitives.ts b/core/stdlib/src/types/js/primitives.ts
index 0573a11..8e585e0 100644
--- a/core/stdlib/src/types/js/primitives.ts
+++ b/core/stdlib/src/types/js/primitives.ts
@@ -1,13 +1,11 @@
-import { toString } from './casts';
-
 /**
  * @name isObject
  * @category Types
  * @description Check if a value is a boolean
- * 
+ *
  * @param {any} value
  * @returns {value is boolean}
- * 
+ *
  * @since 0.0.2
  */
 export const isBoolean = (value: any): value is boolean => typeof value === 'boolean';
@@ -16,22 +14,22 @@ export const isBoolean = (value: any): value is boolean => typeof value === 'boo
  * @name isFunction
  * @category Types
  * @description Check if a value is a function
- * 
+ *
  * @param {any} value
  * @returns {value is Function}
- * 
+ *
  * @since 0.0.2
  */
-export const isFunction = <T extends Function>(value: any): value is T => typeof value === 'function';
+export const isFunction = <T extends (...args: any[]) => any>(value: any): value is T => typeof value === 'function';
 
 /**
  * @name isNumber
  * @category Types
  * @description Check if a value is a number
- * 
+ *
  * @param {any} value
  * @returns {value is number}
- * 
+ *
  * @since 0.0.2
  */
 export const isNumber = (value: any): value is number => typeof value === 'number';
@@ -40,10 +38,10 @@ export const isNumber = (value: any): value is number => typeof value === 'numbe
  * @name isBigInt
  * @category Types
  * @description Check if a value is a bigint
- * 
+ *
  * @param {any} value
  * @returns {value is bigint}
- * 
+ *
  * @since 0.0.2
  */
 export const isBigInt = (value: any): value is bigint => typeof value === 'bigint';
@@ -52,10 +50,10 @@ export const isBigInt = (value: any): value is bigint => typeof value === 'bigin
  * @name isString
  * @category Types
  * @description Check if a value is a string
- * 
+ *
  * @param {any} value
  * @returns {value is string}
- * 
+ *
  * @since 0.0.2
  */
 export const isString = (value: any): value is string => typeof value === 'string';
@@ -64,10 +62,10 @@ export const isString = (value: any): value is string => typeof value === 'strin
  * @name isSymbol
  * @category Types
  * @description Check if a value is a symbol
- * 
+ *
  * @param {any} value
  * @returns {value is symbol}
- * 
+ *
  * @since 0.0.2
  */
 export const isSymbol = (value: any): value is symbol => typeof value === 'symbol';
@@ -76,22 +74,22 @@ export const isSymbol = (value: any): value is symbol => typeof value === 'symbo
  * @name isUndefined
  * @category Types
  * @description Check if a value is a undefined
- * 
+ *
  * @param {any} value
  * @returns {value is undefined}
- * 
+ *
  * @since 0.0.2
  */
-export const isUndefined = (value: any): value is undefined => toString(value) === '[object Undefined]';
+export const isUndefined = (value: any): value is undefined => value === undefined;
 
 /**
  * @name isNull
  * @category Types
  * @description Check if a value is a null
- * 
+ *
  * @param {any} value
  * @returns {value is null}
- * 
+ *
  * @since 0.0.2
  */
-export const isNull = (value: any): value is null => toString(value) === '[object Null]';
+export const isNull = (value: any): value is null => value === null;
diff --git a/core/stdlib/src/types/ts/array.ts b/core/stdlib/src/types/ts/array.ts
index d8c5237..192ea74 100644
--- a/core/stdlib/src/types/ts/array.ts
+++ b/core/stdlib/src/types/ts/array.ts
@@ -2,3 +2,8 @@
  * A type that can be either a single value or an array of values
  */
 export type Arrayable<T> = T | T[];
+
+/**
+ * A type that can be either a single value or a readonly array of values
+ */
+export type ReadonlyArrayable<T> = T | readonly T[];
diff --git a/core/stdlib/src/types/ts/collections.test-d.ts b/core/stdlib/src/types/ts/collections.test-d.ts
index 30ee871..a601e96 100644
--- a/core/stdlib/src/types/ts/collections.test-d.ts
+++ b/core/stdlib/src/types/ts/collections.test-d.ts
@@ -1,5 +1,5 @@
 import { describe, expectTypeOf, it } from 'vitest';
-import type { Path, PathToType } from './collections';
+import type { Path, PathToPartialType, PathToType } from './collections';
 
 describe('collections', () => {
   describe('Path', () => {
@@ -68,4 +68,30 @@ describe('collections', () => {
       expectTypeOf<actual>().toEqualTypeOf<expected>();
     });
   });
-});
\ No newline at end of file
+
+  describe('PathToPartialType', () => {
+    type Shape = PathToPartialType<['user', 'name'], string>;
+
+    it('accepts the full nested shape', () => {
+      expectTypeOf<{ user: { name: 'John' } }>().toExtend<Shape>();
+    });
+
+    it('makes every key optional', () => {
+      expectTypeOf<{ unrelated: number }>().toExtend<Shape>();
+    });
+
+    it('keeps objects open for extra keys', () => {
+      expectTypeOf<{ user: { name: 'John'; age: number }; meta: boolean }>().toExtend<Shape>();
+    });
+
+    it('still enforces the leaf type when provided', () => {
+      expectTypeOf<{ user: { name: number } }>().not.toExtend<Shape>();
+    });
+
+    it('resolves array segments to arrays', () => {
+      type Indexed = PathToPartialType<['items', '0'], string>;
+
+      expectTypeOf<{ items: string[] }>().toExtend<Indexed>();
+    });
+  });
+});
diff --git a/core/stdlib/src/types/ts/collections.ts b/core/stdlib/src/types/ts/collections.ts
index b05f271..dcec15b 100644
--- a/core/stdlib/src/types/ts/collections.ts
+++ b/core/stdlib/src/types/ts/collections.ts
@@ -6,18 +6,18 @@ export type Collection = Record<PropertyKey, any> | any[];
 /**
  * Parse a collection path string into an array of keys
  */
-export type Path<T> =
-  T extends `${infer Key}.${infer Rest}`
+export type Path<T>
+  = T extends `${infer Key}.${infer Rest}`
     ? [Key, ...Path<Rest>]
-      : T extends `${infer Key}`
-        ? [Key]
-        : [];
+    : T extends `${infer Key}`
+      ? [Key]
+      : [];
 
 /**
  * Convert a collection path array into a Target type
  */
-export type PathToType<T extends string[], Target = unknown> =
-  T extends [infer Head, ...infer Rest]
+export type PathToType<T extends string[], Target = unknown>
+  = T extends [infer Head, ...infer Rest]
     ? Head extends `${number}`
       ? Rest extends string[]
         ? Array<PathToType<Rest, Target>>
@@ -26,3 +26,19 @@ export type PathToType<T extends string[], Target = unknown> =
         ? { [K in Head & string]: PathToType<Rest, Target> }
         : never
     : Target;
+
+/**
+ * Like {@link PathToType}, but every object key is optional and objects stay
+ * open (accept extra keys). Useful when the produced type only describes the
+ * keys a consumer *may* provide rather than the full shape of the source data.
+ */
+export type PathToPartialType<T extends string[], Target = unknown>
+  = T extends [infer Head, ...infer Rest]
+    ? Head extends `${number}`
+      ? Rest extends string[]
+        ? Array<PathToPartialType<Rest, Target>>
+        : never
+      : Rest extends string[]
+        ? { [K in Head & string]?: PathToPartialType<Rest, Target> } & Record<PropertyKey, unknown>
+        : never
+    : Target;
diff --git a/core/stdlib/src/types/ts/index.ts b/core/stdlib/src/types/ts/index.ts
index 7582ae8..7cadfe9 100644
--- a/core/stdlib/src/types/ts/index.ts
+++ b/core/stdlib/src/types/ts/index.ts
@@ -1,6 +1,6 @@
 export * from './array';
 export * from './collections';
 export * from './function';
-export * from  './promise';
+export * from './promise';
 export * from './string';
 export * from './union';
diff --git a/core/stdlib/src/types/ts/string.test-d.ts b/core/stdlib/src/types/ts/string.test-d.ts
index 7ac0189..b2bea16 100644
--- a/core/stdlib/src/types/ts/string.test-d.ts
+++ b/core/stdlib/src/types/ts/string.test-d.ts
@@ -1,54 +1,77 @@
 import { describe, expectTypeOf, it } from 'vitest';
-import type { HasSpaces, Trim, Stringable } from './string';
+import type { HasSpaces, Stringable, Trim } from './string';
 
 describe('string', () => {
-    describe('Stringable', () => {
-      it('should be a string', () => {
-        expectTypeOf(Number(1)).toExtend<Stringable>();
-        expectTypeOf(String(1)).toExtend<Stringable>();
-        expectTypeOf(Symbol()).toExtend<Stringable>();
-        expectTypeOf([1]).toExtend<Stringable>();
-        expectTypeOf(new Object()).toExtend<Stringable>();
-        expectTypeOf(new Date()).toExtend<Stringable>();
-      });
+  describe('Stringable', () => {
+    it('should be a string', () => {
+      expectTypeOf(Number(1)).toExtend<Stringable>();
+      expectTypeOf(String(1)).toExtend<Stringable>();
+      expectTypeOf(Symbol('test')).toExtend<Stringable>();
+      expectTypeOf([1]).toExtend<Stringable>();
+      expectTypeOf(new Object()).toExtend<Stringable>();
+      expectTypeOf(new Date()).toExtend<Stringable>();
+    });
+  });
+
+  describe('Trim', () => {
+    it('remove leading and trailing spaces from a string', () => {
+      type actual = Trim<'  hello  '>;
+      type expected = 'hello';
+
+      expectTypeOf<actual>().toEqualTypeOf<expected>();
     });
 
-    describe('Trim', () => {
-      it('remove leading and trailing spaces from a string', () => {
-        type actual = Trim<'  hello  '>;
-        type expected = 'hello';
+    it('remove only leading spaces from a string', () => {
+      type actual = Trim<'  hello'>;
+      type expected = 'hello';
 
-        expectTypeOf<actual>().toEqualTypeOf<expected>();
-      });
-
-      it('remove only leading spaces from a string', () => {
-        type actual = Trim<'  hello'>;
-        type expected = 'hello';
-
-        expectTypeOf<actual>().toEqualTypeOf<expected>();
-      });
-
-      it('remove only trailing spaces from a string', () => {
-        type actual = Trim<'hello  '>;
-        type expected = 'hello';
-
-        expectTypeOf<actual>().toEqualTypeOf<expected>();
-      });
+      expectTypeOf<actual>().toEqualTypeOf<expected>();
     });
 
-    describe('HasSpaces', () => {
-      it('check if a string has spaces', () => {
-        type actual = HasSpaces<'hello world'>;
-        type expected = true;
+    it('remove only trailing spaces from a string', () => {
+      type actual = Trim<'hello  '>;
+      type expected = 'hello';
 
-        expectTypeOf<actual>().toEqualTypeOf<expected>();
-      });
-
-      it('check if a string has no spaces', () => {
-        type actual = HasSpaces<'helloworld'>;
-        type expected = false;
-
-        expectTypeOf<actual>().toEqualTypeOf<expected>();
-      });
+      expectTypeOf<actual>().toEqualTypeOf<expected>();
     });
-});
\ No newline at end of file
+
+    it('trim tabs, newlines and carriage returns', () => {
+      expectTypeOf<Trim<'\thello\n'>>().toEqualTypeOf<'hello'>();
+      expectTypeOf<Trim<'\r\n hello \r\n'>>().toEqualTypeOf<'hello'>();
+    });
+
+    it('handle empty and whitespace-only strings', () => {
+      expectTypeOf<Trim<''>>().toEqualTypeOf<''>();
+      expectTypeOf<Trim<'   '>>().toEqualTypeOf<''>();
+    });
+
+    it('preserve interior spaces', () => {
+      expectTypeOf<Trim<'  a b  '>>().toEqualTypeOf<'a b'>();
+    });
+  });
+
+  describe('HasSpaces', () => {
+    it('check if a string has spaces', () => {
+      type actual = HasSpaces<'hello world'>;
+      type expected = true;
+
+      expectTypeOf<actual>().toEqualTypeOf<expected>();
+    });
+
+    it('check if a string has no spaces', () => {
+      type actual = HasSpaces<'helloworld'>;
+      type expected = false;
+
+      expectTypeOf<actual>().toEqualTypeOf<expected>();
+    });
+
+    it('false for an empty string', () => {
+      expectTypeOf<HasSpaces<''>>().toEqualTypeOf<false>();
+    });
+
+    it('true for leading or trailing spaces', () => {
+      expectTypeOf<HasSpaces<' a'>>().toEqualTypeOf<true>();
+      expectTypeOf<HasSpaces<'a '>>().toEqualTypeOf<true>();
+    });
+  });
+});
diff --git a/core/stdlib/src/types/ts/string.ts b/core/stdlib/src/types/ts/string.ts
index 1c94bc0..cd5ec8e 100644
--- a/core/stdlib/src/types/ts/string.ts
+++ b/core/stdlib/src/types/ts/string.ts
@@ -5,10 +5,20 @@ export interface Stringable {
   toString(): string;
 }
 
+/**
+ * Whitespace characters recognized by {@link Trim}
+ */
+export type Whitespace = ' ' | '\t' | '\n' | '\r' | '\f' | '\v';
+
 /**
  * Trim leading and trailing whitespace from `S`
  */
-export type Trim<S extends string> = S extends ` ${infer R}` ? Trim<R> : S extends `${infer L} ` ? Trim<L> : S;
+export type Trim<S extends string>
+  = S extends `${Whitespace}${infer R}`
+    ? Trim<R>
+    : S extends `${infer L}${Whitespace}`
+      ? Trim<L>
+      : S;
 
 /**
  * Check if `S` has any spaces
diff --git a/core/stdlib/src/types/ts/union.test-d.ts b/core/stdlib/src/types/ts/union.test-d.ts
index c279d47..e509d7e 100644
--- a/core/stdlib/src/types/ts/union.test-d.ts
+++ b/core/stdlib/src/types/ts/union.test-d.ts
@@ -27,5 +27,13 @@ describe('union', () => {
     it('never when union not possible', () => {
       expectTypeOf<UnionToIntersection<string | number>>().toEqualTypeOf<never>();
     });
+
+    it('returns a single-member object union unchanged', () => {
+      expectTypeOf<UnionToIntersection<{ a: string }>>().toEqualTypeOf<{ a: string }>();
+    });
+
+    it('collapses boolean (true | false) to never', () => {
+      expectTypeOf<UnionToIntersection<boolean>>().toEqualTypeOf<never>();
+    });
   });
 });
diff --git a/core/stdlib/src/types/ts/union.ts b/core/stdlib/src/types/ts/union.ts
index 72c4f40..c153e5d 100644
--- a/core/stdlib/src/types/ts/union.ts
+++ b/core/stdlib/src/types/ts/union.ts
@@ -3,8 +3,8 @@
  */
 export type UnionToIntersection<Union> = (
   Union extends unknown
-		? (distributedUnion: Union) => void
-		: never
+    ? (distributedUnion: Union) => void
+    : never
 ) extends ((mergedIntersection: infer Intersection) => void)
-	? Intersection & Union
-	: never;
+  ? Intersection & Union
+  : never;
diff --git a/core/stdlib/src/utils/index.test.ts b/core/stdlib/src/utils/index.test.ts
new file mode 100644
index 0000000..7881816
--- /dev/null
+++ b/core/stdlib/src/utils/index.test.ts
@@ -0,0 +1,28 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { noop, timestamp } from '.';
+
+describe('timestamp', () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+
+  it('return the current epoch milliseconds', () => {
+    vi.setSystemTime(1_700_000_000_000);
+
+    expect(timestamp()).toBe(1_700_000_000_000);
+  });
+
+  it('track the advancing clock', () => {
+    vi.setSystemTime(1_000);
+    expect(timestamp()).toBe(1_000);
+
+    vi.advanceTimersByTime(500);
+    expect(timestamp()).toBe(1_500);
+  });
+});
+
+describe('noop', () => {
+  it('return undefined and not throw', () => {
+    expect(noop()).toBeUndefined();
+    expect(() => noop()).not.toThrow();
+  });
+});
diff --git a/core/stdlib/tsconfig.json b/core/stdlib/tsconfig.json
index d6d22e4..2781e66 100644
--- a/core/stdlib/tsconfig.json
+++ b/core/stdlib/tsconfig.json
@@ -1,3 +1,7 @@
 {
-  "extends": "@robonen/tsconfig/tsconfig.json"
-}
\ No newline at end of file
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.src.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/core/stdlib/tsconfig.node.json b/core/stdlib/tsconfig.node.json
new file mode 100644
index 0000000..edc474f
--- /dev/null
+++ b/core/stdlib/tsconfig.node.json
@@ -0,0 +1,8 @@
+{
+  "extends": "@robonen/tsconfig/tsconfig.node.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo"
+  },
+  "include": ["*.config.ts"]
+}
diff --git a/core/stdlib/tsconfig.src.json b/core/stdlib/tsconfig.src.json
new file mode 100644
index 0000000..6661594
--- /dev/null
+++ b/core/stdlib/tsconfig.src.json
@@ -0,0 +1,9 @@
+{
+  "extends": "@robonen/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "composite": true,
+    "types": [],
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.src.tsbuildinfo"
+  },
+  "include": ["src/**/*.ts"]
+}
diff --git a/core/stdlib/tsdown.config.ts b/core/stdlib/tsdown.config.ts
index 6dd0139..6e391e5 100644
--- a/core/stdlib/tsdown.config.ts
+++ b/core/stdlib/tsdown.config.ts
@@ -3,5 +3,6 @@ import { sharedConfig } from '@robonen/tsdown';
 
 export default defineConfig({
   ...sharedConfig,
+  tsconfig: './tsconfig.src.json',
   entry: ['src/index.ts'],
-});
\ No newline at end of file
+});
diff --git a/core/stdlib/vitest.config.ts b/core/stdlib/vitest.config.ts
index 4ac6027..503d632 100644
--- a/core/stdlib/vitest.config.ts
+++ b/core/stdlib/vitest.config.ts
@@ -3,5 +3,9 @@ import { defineConfig } from 'vitest/config';
 export default defineConfig({
   test: {
     environment: 'node',
+    typecheck: {
+      enabled: true,
+      tsconfig: './tsconfig.src.json',
+    },
   },
 });
diff --git a/docs/.gitignore b/docs/.gitignore
new file mode 100644
index 0000000..7409778
--- /dev/null
+++ b/docs/.gitignore
@@ -0,0 +1,4 @@
+.nuxt/
+.output/
+node_modules/
+dist/
diff --git a/docs/app/app.vue b/docs/app/app.vue
new file mode 100644
index 0000000..f8eacfa
--- /dev/null
+++ b/docs/app/app.vue
@@ -0,0 +1,5 @@
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>
diff --git a/docs/app/assets/css/main.css b/docs/app/assets/css/main.css
new file mode 100644
index 0000000..eab104b
--- /dev/null
+++ b/docs/app/assets/css/main.css
@@ -0,0 +1,191 @@
+@import "tailwindcss";
+
+@source "../../../../vue/toolkit/src/**/demo.vue";
+@source "../../../../vue/primitives/src/**/demo.vue";
+@source "../../../../core/stdlib/src/**/demo.vue";
+@source "../../../../core/platform/src/**/demo.vue";
+
+/* Class-based dark mode (toggled on <html class="dark">) */
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
+
+  --radius-card: 0.75rem;
+}
+
+/* ── Semantic design tokens — Geist-minimal ──────────────────────────────── */
+:root {
+  --bg: #ffffff;
+  --bg-subtle: #fafafa;
+  --bg-elevated: #ffffff;
+  --bg-inset: #f4f4f5;
+  --border: #ececec;
+  --border-strong: #d8d8dc;
+  --fg: #18181b;
+  --fg-muted: #52525b;
+  --fg-subtle: #a1a1aa;
+  --accent: #2563eb;
+  --accent-hover: #1d4ed8;
+  --accent-fg: #ffffff;
+  --accent-subtle: #eef3ff;
+  --accent-text: #2563eb;
+  --header-bg: rgba(255, 255, 255, 0.72);
+  --ring: rgba(37, 99, 235, 0.35);
+  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
+  color-scheme: light;
+}
+
+.dark {
+  --bg: #0a0a0a;
+  --bg-subtle: #0f0f10;
+  --bg-elevated: #141416;
+  --bg-inset: #1b1b1e;
+  --border: #232327;
+  --border-strong: #34343a;
+  --fg: #ededed;
+  --fg-muted: #a1a1aa;
+  --fg-subtle: #6c6c75;
+  --accent: #3b82f6;
+  --accent-hover: #60a5fa;
+  --accent-fg: #ffffff;
+  --accent-subtle: #14203a;
+  --accent-text: #74a8ff;
+  --header-bg: rgba(10, 10, 10, 0.72);
+  --ring: rgba(59, 130, 246, 0.4);
+  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5);
+  color-scheme: dark;
+}
+
+html {
+  scroll-behavior: smooth;
+  scroll-padding-top: 5rem;
+}
+
+body {
+  background-color: var(--bg);
+  color: var(--fg);
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+code, pre, kbd {
+  font-family: var(--font-mono);
+}
+
+::selection {
+  background-color: var(--accent-subtle);
+  color: var(--accent-text);
+}
+
+/* Subtle, theme-aware scrollbars */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-strong) transparent;
+}
+*::-webkit-scrollbar { width: 8px; height: 8px; }
+*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 9999px; }
+*::-webkit-scrollbar-track { background: transparent; }
+
+/* Shiki dual-theme: switch to dark colors under .dark */
+.dark .shiki,
+.dark .shiki span {
+  color: var(--shiki-dark) !important;
+  background-color: var(--shiki-dark-bg) !important;
+  font-style: var(--shiki-dark-font-style) !important;
+  font-weight: var(--shiki-dark-font-weight) !important;
+  text-decoration: var(--shiki-dark-text-decoration) !important;
+}
+
+/* ── Markdown (guide) typography ──────────────────────────────────────────── */
+.prose-docs {
+  color: var(--fg-muted);
+  font-size: 0.9375rem;
+  line-height: 1.7;
+}
+.prose-docs > :first-child { margin-top: 0; }
+.prose-docs h1 {
+  color: var(--fg);
+  font-size: 1.875rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  margin: 0 0 1rem;
+}
+.prose-docs h2 {
+  color: var(--fg);
+  font-size: 1.375rem;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+  margin: 2.5rem 0 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--border);
+  scroll-margin-top: 5rem;
+}
+.prose-docs h3 {
+  color: var(--fg);
+  font-size: 1.0625rem;
+  font-weight: 600;
+  margin: 2rem 0 0.75rem;
+  scroll-margin-top: 5rem;
+}
+.prose-docs p { margin: 1rem 0; }
+.prose-docs a {
+  color: var(--accent-text);
+  text-decoration: none;
+  font-weight: 500;
+}
+.prose-docs a:hover { text-decoration: underline; }
+.prose-docs strong { color: var(--fg); font-weight: 600; }
+.prose-docs ul, .prose-docs ol { margin: 1rem 0; padding-left: 1.5rem; }
+.prose-docs ul { list-style: disc; }
+.prose-docs ol { list-style: decimal; }
+.prose-docs li { margin: 0.375rem 0; }
+.prose-docs li::marker { color: var(--fg-subtle); }
+.prose-docs blockquote {
+  border-left: 3px solid var(--border-strong);
+  padding-left: 1rem;
+  margin: 1.25rem 0;
+  color: var(--fg-muted);
+}
+.prose-docs hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }
+/* inline code */
+.prose-docs :not(pre) > code {
+  font-size: 0.85em;
+  background-color: var(--bg-inset);
+  border: 1px solid var(--border);
+  border-radius: 0.375rem;
+  padding: 0.1rem 0.35rem;
+  color: var(--fg);
+}
+/* fenced code (shiki replaces, but style the fallback + wrapper) */
+.prose-docs pre {
+  background-color: var(--bg-subtle);
+  border: 1px solid var(--border);
+  border-radius: 0.625rem;
+  padding: 1rem;
+  overflow-x: auto;
+  margin: 1.25rem 0;
+  font-size: 0.85rem;
+  line-height: 1.6;
+}
+.prose-docs pre code { background: none; border: 0; padding: 0; }
+.prose-docs table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1.25rem 0;
+  font-size: 0.875rem;
+}
+.prose-docs th, .prose-docs td {
+  border: 1px solid var(--border);
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+}
+.prose-docs th { background-color: var(--bg-subtle); color: var(--fg); font-weight: 600; }
+
+/* Page-enter fade for route transitions */
+.page-enter-active, .page-leave-active { transition: opacity 0.18s ease, transform 0.18s ease; }
+.page-enter-from { opacity: 0; transform: translateY(4px); }
+.page-leave-to { opacity: 0; }
diff --git a/docs/app/components/DocsBadge.vue b/docs/app/components/DocsBadge.vue
new file mode 100644
index 0000000..321b308
--- /dev/null
+++ b/docs/app/components/DocsBadge.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">defineProps<{
+  kind: string;
+  size?: 'sm' | 'md';
+}>();
+
+const kindColors: Record<string, string> = {
+  function: 'bg-blue-100 text-blue-700 dark:bg-blue-500/15 dark:text-blue-300',
+  class: 'bg-violet-100 text-violet-700 dark:bg-violet-500/15 dark:text-violet-300',
+  interface: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300',
+  type: 'bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300',
+  enum: 'bg-rose-100 text-rose-700 dark:bg-rose-500/15 dark:text-rose-300',
+  variable: 'bg-zinc-100 text-zinc-600 dark:bg-zinc-500/15 dark:text-zinc-300',
+  component: 'bg-fuchsia-100 text-fuchsia-700 dark:bg-fuchsia-500/15 dark:text-fuchsia-300',
+  guide: 'bg-teal-100 text-teal-700 dark:bg-teal-500/15 dark:text-teal-300',
+};
+
+const kindLabels: Record<string, string> = {
+  function: 'fn',
+  class: 'C',
+  interface: 'I',
+  type: 'T',
+  enum: 'E',
+  variable: 'V',
+  component: '◇',
+  guide: '¶',
+};
+</script>
+
+<template>
+  <span
+    :class="[
+      'inline-flex items-center justify-center rounded-md font-mono font-semibold shrink-0',
+      kindColors[kind] ?? kindColors.variable,
+      size === 'sm' ? 'w-5 h-5 text-[10px]' : 'w-6 h-6 text-xs',
+    ]"
+    :title="kind"
+  >
+    {{ kindLabels[kind] ?? '?' }}
+  </span>
+</template>
diff --git a/docs/app/components/DocsCode.vue b/docs/app/components/DocsCode.vue
new file mode 100644
index 0000000..43d18a1
--- /dev/null
+++ b/docs/app/components/DocsCode.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">const props = defineProps<{
+  code: string;
+  lang?: string;
+  /** Show the header bar with language label + copy button */
+  bare?: boolean;
+}>();
+
+const { highlight } = useShiki();
+const html = ref('');
+
+const resolvedLang = computed(() => props.lang ?? 'typescript');
+const langLabel = computed(() => ({
+  typescript: 'ts',
+  javascript: 'js',
+  bash: 'sh',
+  vue: 'vue',
+  json: 'json',
+}[resolvedLang.value] ?? resolvedLang.value));
+
+async function render() {
+  html.value = await highlight(props.code, resolvedLang.value);
+}
+
+onMounted(render);
+watch(() => props.code, render);
+
+const copied = ref(false);
+let copyTimer: ReturnType<typeof setTimeout> | undefined;
+
+async function copy() {
+  try {
+    await navigator.clipboard.writeText(props.code);
+    copied.value = true;
+    clearTimeout(copyTimer);
+    copyTimer = setTimeout(() => (copied.value = false), 1500);
+  }
+  catch { /* clipboard unavailable */ }
+}
+</script>
+
+<template>
+  <div class="group relative rounded-xl border border-(--border) bg-(--bg-subtle) overflow-hidden max-w-full">
+    <div v-if="!bare" class="flex items-center justify-between px-3 h-9 border-b border-(--border) bg-(--bg-subtle)">
+      <span class="text-[11px] font-mono uppercase tracking-wider text-(--fg-subtle)">{{ langLabel }}</span>
+      <button
+        type="button"
+        class="inline-flex items-center gap-1 text-[11px] font-medium text-(--fg-subtle) hover:text-(--fg) transition-colors cursor-pointer"
+        @click="copy"
+      >
+        <svg v-if="!copied" xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <rect x="9" y="9" width="13" height="13" rx="2" /><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+        </svg>
+        <svg v-else xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-500">
+          <path d="M20 6 9 17l-5-5" />
+        </svg>
+        {{ copied ? 'Copied' : 'Copy' }}
+      </button>
+    </div>
+    <button
+      v-else
+      type="button"
+      class="absolute right-2 top-2 z-10 inline-flex items-center justify-center w-7 h-7 rounded-md bg-(--bg-elevated) border border-(--border) text-(--fg-subtle) opacity-0 group-hover:opacity-100 hover:text-(--fg) transition-all cursor-pointer"
+      title="Copy"
+      @click="copy"
+    >
+      <svg v-if="!copied" xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <rect x="9" y="9" width="13" height="13" rx="2" /><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+      </svg>
+      <svg v-else xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-500">
+        <path d="M20 6 9 17l-5-5" />
+      </svg>
+    </button>
+
+    <div
+      v-if="html"
+      class="overflow-x-auto text-[13px] leading-relaxed [&_pre]:p-4 [&_pre]:m-0 [&_pre]:bg-transparent! [&_pre]:min-w-0"
+      v-html="html"
+    />
+    <pre v-else class="p-4 text-[13px] overflow-x-auto"><code>{{ code }}</code></pre>
+  </div>
+</template>
diff --git a/docs/app/components/DocsComponentAnatomy.vue b/docs/app/components/DocsComponentAnatomy.vue
new file mode 100644
index 0000000..15977d9
--- /dev/null
+++ b/docs/app/components/DocsComponentAnatomy.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">import type { ComponentMeta } from '../../modules/extractor/types';
+
+const props = defineProps<{
+  component: ComponentMeta;
+  packageName: string;
+}>();
+
+const importPath = computed(() => {
+  const sub = props.component.entryPoint.replace(/^\.\/?/, '');
+  return sub ? `${props.packageName}/${sub}` : props.packageName;
+});
+
+const partNames = computed(() => props.component.parts.map(p => p.name));
+
+/** Import statement + a composition skeleton (Root wraps the remaining parts). */
+const anatomyCode = computed(() => {
+  const names = partNames.value;
+  if (names.length === 0) return '';
+
+  const imports = `import {\n${names.map(n => `  ${n},`).join('\n')}\n} from '${importPath.value}';`;
+
+  const [root, ...rest] = names;
+  let tree: string;
+  if (rest.length === 0) {
+    tree = `<${root} />`;
+  }
+  else {
+    tree = `<${root}>\n${rest.map(n => `  <${n} />`).join('\n')}\n</${root}>`;
+  }
+
+  return `${imports}\n\n${tree}`;
+});
+
+const roleColor: Record<string, string> = {
+  Root: 'bg-fuchsia-100 text-fuchsia-700 dark:bg-fuchsia-500/15 dark:text-fuchsia-300',
+};
+</script>
+
+<template>
+  <div class="space-y-10">
+    <!-- Anatomy snippet -->
+    <section>
+      <h2 class="text-xs font-semibold uppercase tracking-wider text-(--fg-subtle) mb-3">
+        Anatomy
+      </h2>
+      <p class="text-sm text-(--fg-muted) mb-3">
+        Import the parts and compose them. Each part forwards attributes to its underlying element.
+      </p>
+      <DocsCode :code="anatomyCode" lang="vue" />
+    </section>
+
+    <!-- Parts -->
+    <section>
+      <h2 class="text-xs font-semibold uppercase tracking-wider text-(--fg-subtle) mb-4">
+        API Reference
+      </h2>
+      <div class="space-y-8">
+        <div
+          v-for="part in component.parts"
+          :id="part.name.toLowerCase()"
+          :key="part.name"
+          class="scroll-mt-20"
+        >
+          <div class="flex items-center gap-2.5 mb-2">
+            <h3 class="font-mono text-base font-semibold text-(--fg)">{{ part.name }}</h3>
+            <span
+              :class="[
+                'text-[11px] px-2 py-0.5 rounded-full font-medium leading-none',
+                roleColor[part.role] ?? 'bg-(--bg-inset) text-(--fg-muted) border border-(--border)',
+              ]"
+            >
+              {{ part.role }}
+            </span>
+          </div>
+
+          <p v-if="part.description" class="text-sm text-(--fg-muted) mb-3 max-w-2xl">
+            {{ part.description }}
+          </p>
+
+          <div v-if="part.props.length > 0" class="mb-3">
+            <DocsPropsTable :properties="part.props" label="Prop" />
+          </div>
+
+          <div v-if="part.emits.length > 0" class="mb-3">
+            <div class="text-[11px] font-semibold uppercase tracking-wider text-(--fg-subtle) mb-2">Emits</div>
+            <DocsEmitsTable :emits="part.emits" />
+          </div>
+
+          <p v-if="part.props.length === 0 && part.emits.length === 0" class="text-sm text-(--fg-subtle) italic">
+            No props or events — renders its element and forwards attributes.
+          </p>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
diff --git a/docs/app/components/DocsDemo.vue b/docs/app/components/DocsDemo.vue
new file mode 100644
index 0000000..8e1962c
--- /dev/null
+++ b/docs/app/components/DocsDemo.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { Component } from 'vue';
+
+const props = defineProps<{
+  component: Component;
+  source: string;
+}>();
+
+const showSource = ref(false);
+
+const { highlighted, highlightReactive } = useShiki();
+
+watch(showSource, async (show) => {
+  if (show && !highlighted.value) {
+    await highlightReactive(props.source, 'vue');
+  }
+});
+</script>
+
+<template>
+  <div class="rounded-xl border border-(--border) overflow-hidden">
+    <!-- Live demo — client-only: demos are interactive and use browser APIs,
+         so they must not be instantiated during SSR/prerender. -->
+    <div class="p-4 sm:p-8 bg-(--bg-subtle) flex items-center justify-center min-h-32">
+      <ClientOnly>
+        <component :is="component" />
+        <template #fallback>
+          <div class="flex items-center gap-2 text-sm text-(--fg-subtle)">
+            <svg class="animate-spin" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+            </svg>
+            Loading demo…
+          </div>
+        </template>
+      </ClientOnly>
+    </div>
+
+    <!-- Source toggle bar -->
+    <div class="flex items-center border-t border-(--border) bg-(--bg-elevated)">
+      <button
+        type="button"
+        class="flex items-center gap-1.5 px-4 py-2.5 text-xs font-medium text-(--fg-muted) hover:text-(--fg) transition-colors cursor-pointer"
+        @click="showSource = !showSource"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="16 18 22 12 16 6" /><polyline points="8 6 2 12 8 18" />
+        </svg>
+        {{ showSource ? 'Hide source' : 'View source' }}
+        <svg
+          xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+          class="transition-transform" :class="showSource ? 'rotate-180' : ''"
+        >
+          <polyline points="6 9 12 15 18 9" />
+        </svg>
+      </button>
+    </div>
+
+    <!-- Source code -->
+    <div v-if="showSource" class="border-t border-(--border) bg-(--bg-subtle)">
+      <div class="overflow-x-auto text-[13px] [&_pre]:p-4 [&_pre]:m-0 [&_pre]:bg-transparent!" v-html="highlighted" />
+    </div>
+  </div>
+</template>
diff --git a/docs/app/components/DocsEmitsTable.vue b/docs/app/components/DocsEmitsTable.vue
new file mode 100644
index 0000000..c0c95b8
--- /dev/null
+++ b/docs/app/components/DocsEmitsTable.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">import type { EmitMeta } from '../../modules/extractor/types';
+
+defineProps<{
+  emits: EmitMeta[];
+}>();
+</script>
+
+<template>
+  <div v-if="emits.length > 0" class="overflow-x-auto rounded-xl border border-(--border)">
+    <table class="w-full text-sm border-collapse">
+      <thead>
+        <tr class="bg-(--bg-subtle) text-left">
+          <th class="py-2.5 px-4 font-medium text-(--fg-muted) text-xs uppercase tracking-wider">Event</th>
+          <th class="py-2.5 px-4 font-medium text-(--fg-muted) text-xs uppercase tracking-wider">Payload</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="e in emits" :key="e.name" class="border-t border-(--border) align-top">
+          <td class="py-2.5 px-4 whitespace-nowrap">
+            <code class="text-(--accent-text) font-mono text-[13px] font-medium">{{ e.name }}</code>
+          </td>
+          <td class="py-2.5 px-4">
+            <code class="text-xs font-mono text-(--fg-muted) bg-(--bg-inset) px-1.5 py-0.5 rounded border border-(--border) wrap-break-word">{{ e.payload }}</code>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
diff --git a/docs/app/components/DocsMarkdown.vue b/docs/app/components/DocsMarkdown.vue
new file mode 100644
index 0000000..dce2eb3
--- /dev/null
+++ b/docs/app/components/DocsMarkdown.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">const props = defineProps<{
+  source: string;
+}>();
+
+const { highlight } = useShiki();
+
+const html = computed(() => renderMarkdown(props.source));
+const root = ref<HTMLElement | null>(null);
+
+/** Replace marked's <pre><code> blocks with Shiki-highlighted markup. */
+async function highlightCodeBlocks() {
+  const el = root.value;
+  if (!el) return;
+
+  const blocks = Array.from(el.querySelectorAll('pre > code'));
+  for (const code of blocks) {
+    const langClass = Array.from(code.classList).find(c => c.startsWith('language-'));
+    const lang = langClass?.replace('language-', '') || 'typescript';
+    const supported = ['typescript', 'javascript', 'ts', 'js', 'vue', 'json', 'bash', 'sh'];
+    const resolved = supported.includes(lang)
+      ? ({ ts: 'typescript', js: 'javascript', sh: 'bash' }[lang] ?? lang)
+      : 'typescript';
+
+    const text = code.textContent ?? '';
+    const pre = code.parentElement;
+    if (!pre) continue;
+
+    try {
+      const out = await highlight(text, resolved);
+      const wrapper = document.createElement('div');
+      wrapper.className = 'not-prose rounded-xl border border-(--border) bg-(--bg-subtle) overflow-x-auto text-[13px] my-5 [&_pre]:p-4 [&_pre]:m-0 [&_pre]:bg-transparent!';
+      wrapper.innerHTML = out;
+      pre.replaceWith(wrapper);
+    }
+    catch { /* leave the fallback <pre> as-is */ }
+  }
+}
+
+onMounted(highlightCodeBlocks);
+watch(() => props.source, async () => {
+  await nextTick();
+  await highlightCodeBlocks();
+});
+</script>
+
+<template>
+  <div ref="root" class="prose-docs max-w-none" v-html="html" />
+</template>
diff --git a/docs/app/components/DocsMethodsList.vue b/docs/app/components/DocsMethodsList.vue
new file mode 100644
index 0000000..53ed88c
--- /dev/null
+++ b/docs/app/components/DocsMethodsList.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">import type { MethodMeta } from '../../modules/extractor/types';
+
+defineProps<{
+  methods: MethodMeta[];
+}>();
+</script>
+
+<template>
+  <div v-if="methods.length > 0" class="space-y-3">
+    <div
+      v-for="method in methods"
+      :key="method.name"
+      class="rounded-xl border border-(--border) bg-(--bg-subtle) p-4"
+    >
+      <div class="flex items-center gap-2 mb-2">
+        <code class="text-sm font-mono font-semibold text-(--fg)">{{ method.name }}</code>
+        <span
+          v-if="method.visibility !== 'public'"
+          class="text-[10px] uppercase px-1.5 py-0.5 rounded bg-(--bg-inset) border border-(--border) text-(--fg-subtle)"
+        >
+          {{ method.visibility }}
+        </span>
+      </div>
+
+      <p v-if="method.description" class="text-sm text-(--fg-muted) mb-3">
+        {{ method.description }}
+      </p>
+
+      <DocsCode
+        v-for="(sig, i) in method.signatures"
+        :key="i"
+        :code="sig"
+        class="mb-3"
+      />
+
+      <DocsParamsTable v-if="method.params.length > 0" :params="method.params" />
+
+      <div v-if="method.returns" class="mt-2 text-sm">
+        <span class="text-(--fg-subtle)">Returns</span>
+        <code class="ml-1.5 text-xs font-mono bg-(--bg-inset) border border-(--border) px-1.5 py-0.5 rounded">{{ method.returns.type }}</code>
+        <span v-if="method.returns.description" class="ml-2 text-(--fg-muted)">{{ method.returns.description }}</span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/docs/app/components/DocsParamsTable.vue b/docs/app/components/DocsParamsTable.vue
new file mode 100644
index 0000000..3ddae0a
--- /dev/null
+++ b/docs/app/components/DocsParamsTable.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">import type { ParamMeta } from '../../modules/extractor/types';
+
+defineProps<{
+  params: ParamMeta[];
+}>();
+</script>
+
+<template>
+  <div v-if="params.length > 0" class="overflow-x-auto rounded-xl border border-(--border)">
+    <table class="w-full text-sm border-collapse">
+      <thead>
+        <tr class="bg-(--bg-subtle) text-left">
+          <th class="py-2.5 px-4 font-medium text-(--fg-muted) text-xs uppercase tracking-wider">Parameter</th>
+          <th class="py-2.5 px-4 font-medium text-(--fg-muted) text-xs uppercase tracking-wider">Type</th>
+          <th class="py-2.5 px-4 font-medium text-(--fg-muted) text-xs uppercase tracking-wider hidden sm:table-cell">Default</th>
+          <th class="py-2.5 px-4 font-medium text-(--fg-muted) text-xs uppercase tracking-wider">Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="param in params"
+          :key="param.name"
+          class="border-t border-(--border) align-top"
+        >
+          <td class="py-2.5 px-4 whitespace-nowrap">
+            <code class="text-(--accent-text) font-mono text-[13px] font-medium">{{ param.name }}</code><span v-if="param.optional" class="text-(--fg-subtle) text-xs">?</span>
+          </td>
+          <td class="py-2.5 px-4">
+            <code class="text-xs font-mono text-(--fg-muted) bg-(--bg-inset) px-1.5 py-0.5 rounded border border-(--border) wrap-break-word">{{ param.type }}</code>
+          </td>
+          <td class="py-2.5 px-4 hidden sm:table-cell">
+            <code v-if="param.defaultValue" class="text-xs font-mono text-(--fg-muted)">{{ param.defaultValue }}</code>
+            <span v-else class="text-(--fg-subtle)">—</span>
+          </td>
+          <td class="py-2.5 px-4 text-(--fg-muted) min-w-48">
+            {{ param.description || '—' }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
diff --git a/docs/app/components/DocsPropsTable.vue b/docs/app/components/DocsPropsTable.vue
new file mode 100644
index 0000000..399e4ee
--- /dev/null
+++ b/docs/app/components/DocsPropsTable.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">import type { PropertyMeta } from '../../modules/extractor/types';
+
+defineProps<{
+  properties: PropertyMeta[];
+  /** Column label for the first column */
+  label?: string;
+}>();
+</script>
+
+<template>
+  <div v-if="properties.length > 0" class="overflow-x-auto rounded-xl border border-(--border)">
+    <table class="w-full text-sm border-collapse">
+      <thead>
+        <tr class="bg-(--bg-subtle) text-left">
+          <th class="py-2.5 px-4 font-medium text-(--fg-muted) text-xs uppercase tracking-wider">{{ label ?? 'Property' }}</th>
+          <th class="py-2.5 px-4 font-medium text-(--fg-muted) text-xs uppercase tracking-wider">Type</th>
+          <th class="py-2.5 px-4 font-medium text-(--fg-muted) text-xs uppercase tracking-wider hidden sm:table-cell">Default</th>
+          <th class="py-2.5 px-4 font-medium text-(--fg-muted) text-xs uppercase tracking-wider">Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="prop in properties"
+          :key="prop.name"
+          class="border-t border-(--border) align-top"
+        >
+          <td class="py-2.5 px-4 whitespace-nowrap">
+            <code class="text-(--accent-text) font-mono text-[13px] font-medium">{{ prop.name }}</code><span v-if="prop.optional" class="text-(--fg-subtle) text-xs">?</span>
+            <span v-if="prop.readonly" class="block text-[10px] text-(--fg-subtle) uppercase tracking-wide mt-0.5">readonly</span>
+          </td>
+          <td class="py-2.5 px-4">
+            <code class="text-xs font-mono text-(--fg-muted) bg-(--bg-inset) px-1.5 py-0.5 rounded border border-(--border) wrap-break-word">{{ prop.type }}</code>
+          </td>
+          <td class="py-2.5 px-4 hidden sm:table-cell">
+            <code v-if="prop.defaultValue" class="text-xs font-mono text-(--fg-muted)">{{ prop.defaultValue }}</code>
+            <span v-else class="text-(--fg-subtle)">—</span>
+          </td>
+          <td class="py-2.5 px-4 text-(--fg-muted) min-w-48">
+            {{ prop.description || '—' }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
diff --git a/docs/app/components/DocsSearch.vue b/docs/app/components/DocsSearch.vue
new file mode 100644
index 0000000..5c3e7d5
--- /dev/null
+++ b/docs/app/components/DocsSearch.vue
@@ -0,0 +1,135 @@
+<script setup lang="ts">const { search } = useDocs();
+
+const isOpen = ref(false);
+const query = ref('');
+const activeIndex = ref(0);
+
+const results = computed(() => search(query.value).slice(0, 24));
+
+watch(results, () => {
+  activeIndex.value = 0;
+});
+
+function open() {
+  isOpen.value = true;
+  nextTick(() => document.querySelector<HTMLInputElement>('[data-search-input]')?.focus());
+}
+
+function close() {
+  isOpen.value = false;
+  query.value = '';
+}
+
+const router = useRouter();
+function goTo(slug: string) {
+  const r = results.value[activeIndex.value];
+  // slug param kept for click handlers that pass an explicit target
+  const target = slug || (r ? `/${r.pkg.slug}/${r.slug}` : '');
+  if (target) {
+    router.push(target);
+    close();
+  }
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+    e.preventDefault();
+    if (isOpen.value) close();
+    else open();
+    return;
+  }
+  if (!isOpen.value) return;
+
+  if (e.key === 'Escape') {
+    close();
+  }
+  else if (e.key === 'ArrowDown') {
+    e.preventDefault();
+    activeIndex.value = Math.min(activeIndex.value + 1, results.value.length - 1);
+  }
+  else if (e.key === 'ArrowUp') {
+    e.preventDefault();
+    activeIndex.value = Math.max(activeIndex.value - 1, 0);
+  }
+  else if (e.key === 'Enter') {
+    e.preventDefault();
+    goTo('');
+  }
+}
+
+onMounted(() => globalThis.addEventListener('keydown', onKeydown));
+onUnmounted(() => globalThis.removeEventListener('keydown', onKeydown));
+</script>
+
+<template>
+  <div>
+    <button
+      type="button"
+      class="flex items-center gap-2 px-2.5 h-9 text-sm text-(--fg-subtle) bg-(--bg-subtle) border border-(--border) rounded-lg hover:border-(--border-strong) transition-colors w-9 sm:w-56 justify-center sm:justify-start cursor-pointer"
+      @click="open"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0">
+        <circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" />
+      </svg>
+      <span class="hidden sm:inline flex-1 text-left">Search…</span>
+      <kbd class="hidden sm:inline-flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] font-mono bg-(--bg) border border-(--border) rounded text-(--fg-subtle)">⌘K</kbd>
+    </button>
+
+    <Teleport to="body">
+      <Transition
+        enter-active-class="duration-200 ease-out" enter-from-class="opacity-0" enter-to-class="opacity-100"
+        leave-active-class="duration-150 ease-in" leave-from-class="opacity-100" leave-to-class="opacity-0"
+      >
+        <div v-if="isOpen" class="fixed inset-0 z-100">
+          <div class="fixed inset-0 bg-black/40 backdrop-blur-sm" @click="close" />
+
+          <div class="fixed inset-x-0 top-[12vh] mx-auto max-w-xl px-4">
+            <div class="bg-(--bg-elevated) rounded-2xl border border-(--border) shadow-2xl overflow-hidden">
+              <div class="flex items-center px-4 border-b border-(--border)">
+                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-(--fg-subtle) shrink-0">
+                  <circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" />
+                </svg>
+                <input
+                  v-model="query"
+                  data-search-input
+                  type="text"
+                  placeholder="Search across all packages…"
+                  class="w-full py-3.5 px-3 bg-transparent text-(--fg) placeholder:text-(--fg-subtle) focus:outline-none text-[15px]"
+                >
+                <kbd class="hidden sm:inline-flex items-center px-1.5 py-0.5 text-[10px] font-mono bg-(--bg-inset) border border-(--border) rounded text-(--fg-subtle)">ESC</kbd>
+              </div>
+
+              <div class="max-h-[60vh] overflow-y-auto p-2">
+                <div v-if="query && results.length === 0" class="py-12 text-center text-sm text-(--fg-subtle)">
+                  No results for "{{ query }}"
+                </div>
+                <ul v-else-if="results.length > 0" class="space-y-0.5">
+                  <li v-for="(r, i) in results" :key="`${r.pkg.slug}-${r.slug}`">
+                    <NuxtLink
+                      :to="`/${r.pkg.slug}/${r.slug}`"
+                      :class="[
+                        'flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors',
+                        i === activeIndex ? 'bg-(--accent-subtle)' : 'hover:bg-(--bg-inset)',
+                      ]"
+                      @click="close"
+                      @mouseenter="activeIndex = i"
+                    >
+                      <DocsBadge :kind="r.badge" size="sm" />
+                      <div class="min-w-0 flex-1">
+                        <div class="text-sm font-medium text-(--fg) truncate">{{ r.name }}</div>
+                        <div class="text-xs text-(--fg-subtle) truncate">{{ r.pkg.name }} · {{ r.description }}</div>
+                      </div>
+                    </NuxtLink>
+                  </li>
+                </ul>
+                <div v-else class="py-12 text-center text-sm text-(--fg-subtle)">
+                  Type to search functions, components &amp; guides…
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
diff --git a/docs/app/components/DocsTag.vue b/docs/app/components/DocsTag.vue
new file mode 100644
index 0000000..5341548
--- /dev/null
+++ b/docs/app/components/DocsTag.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">defineProps<{
+  label: string;
+  variant?: 'since' | 'test' | 'demo' | 'wip' | 'neutral';
+}>();
+
+const variantClasses: Record<string, string> = {
+  since: 'bg-(--bg-inset) text-(--fg-muted) border border-(--border)',
+  neutral: 'bg-(--bg-inset) text-(--fg-muted) border border-(--border)',
+  test: 'bg-emerald-50 text-emerald-700 border border-emerald-200 dark:bg-emerald-500/10 dark:text-emerald-300 dark:border-emerald-500/20',
+  demo: 'bg-blue-50 text-blue-700 border border-blue-200 dark:bg-blue-500/10 dark:text-blue-300 dark:border-blue-500/20',
+  wip: 'bg-amber-50 text-amber-700 border border-amber-200 dark:bg-amber-500/10 dark:text-amber-300 dark:border-amber-500/20',
+};
+</script>
+
+<template>
+  <span
+    :class="[
+      'inline-flex items-center px-2 py-0.5 text-[11px] font-medium rounded-full leading-none h-5',
+      variantClasses[variant ?? 'since'],
+    ]"
+  >
+    {{ label }}
+  </span>
+</template>
diff --git a/docs/app/components/DocsThemeToggle.vue b/docs/app/components/DocsThemeToggle.vue
new file mode 100644
index 0000000..6c8584f
--- /dev/null
+++ b/docs/app/components/DocsThemeToggle.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">const { preference, cycle } = useTheme();
+
+const label = computed(() => ({
+  light: 'Light',
+  dark: 'Dark',
+  system: 'System',
+}[preference.value]));
+</script>
+
+<template>
+  <button
+    type="button"
+    :title="`Theme: ${label} (click to change)`"
+    :aria-label="`Theme: ${label}`"
+    class="inline-flex items-center justify-center w-9 h-9 rounded-lg text-(--fg-muted) hover:text-(--fg) hover:bg-(--bg-inset) transition-colors cursor-pointer"
+    @click="cycle"
+  >
+    <ClientOnly>
+      <!-- Light -->
+      <svg v-if="preference === 'light'" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="12" cy="12" r="4" />
+        <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
+      </svg>
+      <!-- Dark -->
+      <svg v-else-if="preference === 'dark'" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+      </svg>
+      <!-- System -->
+      <svg v-else xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <rect x="2" y="3" width="20" height="14" rx="2" />
+        <path d="M8 21h8M12 17v4" />
+      </svg>
+      <template #fallback>
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <rect x="2" y="3" width="20" height="14" rx="2" />
+          <path d="M8 21h8M12 17v4" />
+        </svg>
+      </template>
+    </ClientOnly>
+  </button>
+</template>
diff --git a/docs/app/components/DocsToc.vue b/docs/app/components/DocsToc.vue
new file mode 100644
index 0000000..d023428
--- /dev/null
+++ b/docs/app/components/DocsToc.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">interface TocItem {
+  id: string;
+  text: string;
+  depth: number;
+}
+
+const props = defineProps<{
+  items: TocItem[];
+}>();
+
+const activeId = ref<string>('');
+let observer: IntersectionObserver | null = null;
+
+function setup() {
+  if (!import.meta.client || props.items.length === 0) return;
+
+  observer?.disconnect();
+  observer = new IntersectionObserver(
+    (entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) activeId.value = entry.target.id;
+      }
+    },
+    { rootMargin: '0px 0px -75% 0px', threshold: 0 },
+  );
+
+  for (const item of props.items) {
+    const el = document.getElementById(item.id);
+    if (el) observer.observe(el);
+  }
+}
+
+onMounted(() => nextTick(setup));
+watch(() => props.items, () => nextTick(setup));
+onUnmounted(() => observer?.disconnect());
+
+function go(id: string) {
+  const el = document.getElementById(id);
+  if (el) {
+    activeId.value = id;
+    el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    history.replaceState(null, '', `#${id}`);
+  }
+}
+</script>
+
+<template>
+  <nav v-if="items.length > 0" class="text-sm">
+    <div class="text-[11px] font-semibold uppercase tracking-wider text-(--fg-subtle) mb-3">
+      On this page
+    </div>
+    <ul class="space-y-1 border-l border-(--border)">
+      <li v-for="item in items" :key="item.id">
+        <a
+          :href="`#${item.id}`"
+          :class="[
+            'block py-1 -ml-px border-l-2 transition-colors',
+            item.depth === 3 ? 'pl-6' : 'pl-4',
+            activeId === item.id
+              ? 'border-(--accent) text-(--accent-text) font-medium'
+              : 'border-transparent text-(--fg-muted) hover:text-(--fg)',
+          ]"
+          @click.prevent="go(item.id)"
+        >
+          {{ item.text }}
+        </a>
+      </li>
+    </ul>
+  </nav>
+</template>
diff --git a/docs/app/composables/useDocs.ts b/docs/app/composables/useDocs.ts
new file mode 100644
index 0000000..56d4a55
--- /dev/null
+++ b/docs/app/composables/useDocs.ts
@@ -0,0 +1,163 @@
+import metadata from '#docs/metadata';
+import type {
+  CategoryMeta,
+  ComponentMeta,
+  DocSection,
+  DocsMetadata,
+  GuideSection,
+  ItemMeta,
+  PackageGroup,
+  PackageMeta,
+} from '../../modules/extractor/types';
+
+/** A unified, normalised entry for any documented leaf, regardless of kind. */
+export type DocEntry
+  = | { kind: 'api'; pkg: PackageMeta; category: CategoryMeta; item: ItemMeta }
+    | { kind: 'components'; pkg: PackageMeta; component: ComponentMeta }
+    | { kind: 'guide'; pkg: PackageMeta; section: GuideSection }
+    | { kind: 'doc'; pkg: PackageMeta; section: DocSection };
+
+export interface SearchResult {
+  pkg: PackageMeta;
+  slug: string;
+  name: string;
+  description: string;
+  /** Display kind for the badge */
+  badge: string;
+}
+
+const GROUP_LABELS: Record<PackageGroup, string> = {
+  core: 'Core',
+  vue: 'Vue',
+  configs: 'Configs',
+  infra: 'Infra',
+};
+
+const GROUP_ORDER: PackageGroup[] = ['core', 'vue', 'configs', 'infra'];
+
+export function useDocs() {
+  const data = metadata as unknown as DocsMetadata;
+
+  function getPackages(): PackageMeta[] {
+    return data.packages;
+  }
+
+  /** Packages grouped & ordered for sidebar / landing. */
+  function getGroupedPackages(): Array<{ group: PackageGroup; label: string; packages: PackageMeta[] }> {
+    return GROUP_ORDER
+      .map(group => ({
+        group,
+        label: GROUP_LABELS[group],
+        packages: data.packages.filter(p => p.group === group),
+      }))
+      .filter(g => g.packages.length > 0);
+  }
+
+  function getPackage(slug: string): PackageMeta | undefined {
+    return data.packages.find(p => p.slug === slug);
+  }
+
+  /** Number of documented leaves in a package, whatever its kind. */
+  function countEntries(pkg: PackageMeta): number {
+    if (pkg.kind === 'api') return pkg.categories.reduce((s, c) => s + c.items.length, 0);
+    if (pkg.kind === 'components') return pkg.components.length;
+    return pkg.sections.length;
+  }
+
+  /** The hand-authored intro section for a package, if any. */
+  function getIntro(pkg: PackageMeta): DocSection | undefined {
+    return pkg.docs.find(s => s.isIntro);
+  }
+
+  /** Non-intro doc sections (the "Guide" list shown in the sidebar). */
+  function getDocSections(pkg: PackageMeta): DocSection[] {
+    return pkg.docs.filter(s => !s.isIntro);
+  }
+
+  /** Resolve any `/:package/:slug` route to a normalised entry. */
+  function resolveEntry(packageSlug: string, slug: string): DocEntry | undefined {
+    const pkg = getPackage(packageSlug);
+    if (!pkg) return undefined;
+
+    // Hand-authored doc sections take precedence over auto-generated leaves.
+    const docSection = pkg.docs.find(s => !s.isIntro && s.slug === slug);
+    if (docSection) return { kind: 'doc', pkg, section: docSection };
+
+    if (pkg.kind === 'api') {
+      for (const category of pkg.categories) {
+        const item = category.items.find(i => i.slug === slug);
+        if (item) return { kind: 'api', pkg, category, item };
+      }
+    }
+    else if (pkg.kind === 'components') {
+      const component = pkg.components.find(c => c.slug === slug);
+      if (component) return { kind: 'components', pkg, component };
+    }
+    else {
+      const section = pkg.sections.find(s => s.slug === slug);
+      if (section) return { kind: 'guide', pkg, section };
+    }
+
+    return undefined;
+  }
+
+  /** The default entry to open when landing on a package, if any. */
+  function firstEntrySlug(pkg: PackageMeta): string | undefined {
+    if (pkg.kind === 'api') return pkg.categories[0]?.items[0]?.slug;
+    if (pkg.kind === 'components') return pkg.components[0]?.slug;
+    return pkg.sections[0]?.slug;
+  }
+
+  function search(query: string): SearchResult[] {
+    const q = query.trim().toLowerCase();
+    if (!q) return [];
+
+    const results: SearchResult[] = [];
+
+    for (const pkg of data.packages) {
+      if (pkg.kind === 'api') {
+        for (const category of pkg.categories) {
+          for (const item of category.items) {
+            if (item.name.toLowerCase().includes(q) || item.description.toLowerCase().includes(q)) {
+              results.push({ pkg, slug: item.slug, name: item.name, description: item.description, badge: item.kind });
+            }
+          }
+        }
+      }
+      else if (pkg.kind === 'components') {
+        for (const c of pkg.components) {
+          if (c.name.toLowerCase().includes(q) || c.description.toLowerCase().includes(q)) {
+            results.push({ pkg, slug: c.slug, name: c.name, description: c.description || `${c.parts.length} parts`, badge: 'component' });
+          }
+        }
+      }
+      else {
+        for (const s of pkg.sections) {
+          if (s.title.toLowerCase().includes(q) || s.markdown.toLowerCase().includes(q)) {
+            results.push({ pkg, slug: s.slug, name: s.title, description: pkg.name, badge: 'guide' });
+          }
+        }
+      }
+    }
+
+    return results;
+  }
+
+  function getTotalItems(): number {
+    return data.packages.reduce((sum, pkg) => sum + countEntries(pkg), 0);
+  }
+
+  return {
+    data,
+    getPackages,
+    getGroupedPackages,
+    getPackage,
+    countEntries,
+    resolveEntry,
+    firstEntrySlug,
+    getIntro,
+    getDocSections,
+    search,
+    getTotalItems,
+  };
+}
diff --git a/docs/app/composables/useMarkdown.ts b/docs/app/composables/useMarkdown.ts
new file mode 100644
index 0000000..c7ac126
--- /dev/null
+++ b/docs/app/composables/useMarkdown.ts
@@ -0,0 +1,65 @@
+import { marked } from 'marked';
+
+export interface Heading {
+  depth: number;
+  text: string;
+  id: string;
+}
+
+export function slugHeading(text: string): string {
+  return text
+    .toLowerCase()
+    .replaceAll('`', '')
+    .replaceAll(/[^\w\s-]/g, '')
+    .trim()
+    .replaceAll(/\s+/g, '-');
+}
+
+/** Collect h2/h3 headings for the table of contents. */
+export function extractHeadings(markdown: string): Heading[] {
+  const headings: Heading[] = [];
+  const seen = new Map<string, number>();
+  let inFence = false;
+
+  for (const line of markdown.split('\n')) {
+    if (/^\s*```/.test(line)) {
+      inFence = !inFence;
+      continue;
+    }
+    if (inFence) continue;
+
+    const m = line.match(/^(#{2,3})\s+(\S.*)$/);
+    if (!m) continue;
+
+    const depth = m[1]!.length;
+    // Strip an optional ATX closing run (a single space then trailing `#`s) without
+    // a backtracking-prone pattern, then drop inline code ticks.
+    const text = m[2]!.replace(/ #+ *$/, '').replaceAll('`', '').trim();
+    let id = slugHeading(text);
+    const count = seen.get(id) ?? 0;
+    seen.set(id, count + 1);
+    if (count > 0) id = `${id}-${count}`;
+
+    headings.push({ depth, text, id });
+  }
+
+  return headings;
+}
+
+/** Render markdown to HTML with stable heading ids (matching extractHeadings). */
+export function renderMarkdown(markdown: string): string {
+  const seen = new Map<string, number>();
+
+  const renderer = new marked.Renderer();
+  renderer.heading = function ({ tokens, depth }) {
+    const inner = this.parser.parseInline(tokens);
+    const plain = inner.replaceAll(/<[^>]+>/g, '');
+    let id = slugHeading(plain);
+    const count = seen.get(id) ?? 0;
+    seen.set(id, count + 1);
+    if (count > 0) id = `${id}-${count}`;
+    return `<h${depth} id="${id}">${inner}</h${depth}>\n`;
+  };
+
+  return marked.parse(markdown, { renderer, async: false }) as string;
+}
diff --git a/docs/app/composables/useShiki.ts b/docs/app/composables/useShiki.ts
new file mode 100644
index 0000000..77d51c0
--- /dev/null
+++ b/docs/app/composables/useShiki.ts
@@ -0,0 +1,42 @@
+import { createHighlighter } from 'shiki';
+import type { Highlighter } from 'shiki';
+
+let highlighterPromise: Promise<Highlighter> | null = null;
+
+function getHighlighter(): Promise<Highlighter> {
+  if (!highlighterPromise) {
+    highlighterPromise = createHighlighter({
+      themes: ['github-light', 'github-dark'],
+      langs: ['typescript', 'javascript', 'vue', 'json', 'bash'],
+    });
+  }
+  return highlighterPromise;
+}
+
+export function useShiki() {
+  const highlighted = ref<string>('');
+  const isReady = ref(false);
+
+  async function highlight(code: string, lang = 'typescript'): Promise<string> {
+    const highlighter = await getHighlighter();
+    return highlighter.codeToHtml(code, {
+      lang,
+      themes: {
+        light: 'github-light',
+        dark: 'github-dark',
+      },
+    });
+  }
+
+  async function highlightReactive(code: string, lang = 'typescript'): Promise<void> {
+    highlighted.value = await highlight(code, lang);
+    isReady.value = true;
+  }
+
+  return {
+    highlight,
+    highlighted,
+    highlightReactive,
+    isReady,
+  };
+}
diff --git a/docs/app/composables/useTheme.ts b/docs/app/composables/useTheme.ts
new file mode 100644
index 0000000..0651a52
--- /dev/null
+++ b/docs/app/composables/useTheme.ts
@@ -0,0 +1,62 @@
+export type ThemePreference = 'light' | 'dark' | 'system';
+
+const STORAGE_KEY = 'docs-theme';
+
+/**
+ * Theme controller. The actual `.dark` class is set as early as possible by the
+ * inline head script (see nuxt.config) to avoid a flash; this composable keeps a
+ * reactive preference, persists it, and re-applies the resolved theme on change.
+ */
+export function useTheme() {
+  const preference = useState<ThemePreference>('theme-preference', () => 'system');
+
+  function resolve(pref: ThemePreference): 'light' | 'dark' {
+    if (pref === 'system') {
+      return import.meta.client && globalThis.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light';
+    }
+    return pref;
+  }
+
+  function apply(pref: ThemePreference) {
+    if (!import.meta.client) return;
+    const resolved = resolve(pref);
+    document.documentElement.classList.toggle('dark', resolved === 'dark');
+  }
+
+  function setTheme(pref: ThemePreference) {
+    preference.value = pref;
+    if (import.meta.client) {
+      if (pref === 'system') localStorage.removeItem(STORAGE_KEY);
+      else localStorage.setItem(STORAGE_KEY, pref);
+      apply(pref);
+    }
+  }
+
+  function cycle() {
+    const order: ThemePreference[] = ['light', 'dark', 'system'];
+    const next = order[(order.indexOf(preference.value) + 1) % order.length]!;
+    setTheme(next);
+  }
+
+  // Initialise reactive preference from storage on the client.
+  if (import.meta.client) {
+    onMounted(() => {
+      const stored = localStorage.getItem(STORAGE_KEY) as ThemePreference | null;
+      preference.value = stored ?? 'system';
+
+      // Track OS changes while in `system` mode.
+      const mq = globalThis.matchMedia('(prefers-color-scheme: dark)');
+      const onChange = () => {
+        if (preference.value === 'system') apply('system');
+      };
+      mq.addEventListener('change', onChange);
+      onUnmounted(() => mq.removeEventListener('change', onChange));
+    });
+  }
+
+  const resolved = computed(() => resolve(preference.value));
+
+  return { preference, resolved, setTheme, cycle };
+}
diff --git a/docs/app/layouts/default.vue b/docs/app/layouts/default.vue
new file mode 100644
index 0000000..0c454ea
--- /dev/null
+++ b/docs/app/layouts/default.vue
@@ -0,0 +1,198 @@
+<script setup lang="ts">const { getGroupedPackages, getPackage, getIntro, getDocSections } = useDocs();
+const groups = getGroupedPackages();
+
+const route = useRoute();
+const isSidebarOpen = ref(false);
+
+const currentPackageSlug = computed(() => {
+  const param = route.params.package;
+  return typeof param === 'string' ? param : undefined;
+});
+
+const currentPackage = computed(() =>
+  currentPackageSlug.value ? getPackage(currentPackageSlug.value) : undefined,
+);
+
+function isActive(pkgSlug: string, slug: string) {
+  return route.path === `/${pkgSlug}/${slug}`;
+}
+
+watch(() => route.path, () => {
+  isSidebarOpen.value = false;
+});
+</script>
+
+<template>
+  <div class="min-h-screen">
+    <!-- Header -->
+    <header class="sticky top-0 z-50 border-b border-(--border) backdrop-blur-md" style="background-color: var(--header-bg)">
+      <div class="mx-auto max-w-352 flex items-center gap-3 px-4 h-14 sm:px-6">
+        <button
+          type="button"
+          class="lg:hidden inline-flex items-center justify-center w-9 h-9 -ml-1.5 rounded-lg text-(--fg-muted) hover:text-(--fg) hover:bg-(--bg-inset)"
+          aria-label="Toggle navigation"
+          @click="isSidebarOpen = !isSidebarOpen"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
+          </svg>
+        </button>
+
+        <NuxtLink to="/" class="flex items-center gap-2 font-semibold text-[15px] mr-auto">
+          <span class="inline-flex items-center justify-center w-7 h-7 rounded-lg bg-(--fg) text-(--bg) text-xs font-bold">R</span>
+          <span class="hidden sm:flex items-center">
+            <span class="text-(--accent-text)">@robonen</span><span class="text-(--fg-subtle)">/</span><span class="text-(--fg)">tools</span>
+          </span>
+        </NuxtLink>
+
+        <DocsSearch />
+        <DocsThemeToggle />
+        <a
+          href="https://github.com/robonen/tools"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inline-flex items-center justify-center w-9 h-9 rounded-lg text-(--fg-muted) hover:text-(--fg) hover:bg-(--bg-inset) transition-colors"
+          aria-label="GitHub"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+          </svg>
+        </a>
+      </div>
+    </header>
+
+    <div class="mx-auto max-w-352 w-full flex px-4 sm:px-6">
+      <!-- Sidebar -->
+      <aside
+        :class="[
+          'fixed inset-y-0 left-0 z-40 w-72 bg-(--bg) border-r border-(--border) pt-14 transform transition-transform lg:sticky lg:top-14 lg:z-auto lg:h-[calc(100vh-3.5rem)] lg:w-64 lg:shrink-0 lg:translate-x-0 lg:pt-0 lg:border-r-0 lg:bg-transparent',
+          isSidebarOpen ? 'translate-x-0' : '-translate-x-full',
+        ]"
+      >
+        <nav class="h-full overflow-y-auto py-8 px-4 lg:pr-6 lg:pl-0 overscroll-contain">
+          <div v-for="grp in groups" :key="grp.group" class="mb-7">
+            <div class="text-[11px] font-semibold uppercase tracking-wider text-(--fg-subtle) mb-2 px-2">
+              {{ grp.label }}
+            </div>
+            <ul class="space-y-0.5">
+              <li v-for="pkg in grp.packages" :key="pkg.slug">
+                <NuxtLink
+                  :to="`/${pkg.slug}`"
+                  :class="[
+                    'flex items-center justify-between py-1.5 px-2 rounded-lg text-sm transition-colors',
+                    currentPackageSlug === pkg.slug
+                      ? 'text-(--fg) font-medium bg-(--bg-inset)'
+                      : 'text-(--fg-muted) hover:text-(--fg) hover:bg-(--bg-inset)',
+                  ]"
+                >
+                  <span>{{ pkg.name.replace('@robonen/', '') }}</span>
+                  <span class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">{{ pkg.kind === 'api' ? 'api' : pkg.kind === 'components' ? 'ui' : 'guide' }}</span>
+                </NuxtLink>
+
+                <!-- Expanded tree for the current package -->
+                <div v-if="currentPackageSlug === pkg.slug && currentPackage" class="mt-1 mb-2 ml-2 pl-3 border-l border-(--border)">
+                  <!-- Hand-authored guide sections (intro + prose pages) -->
+                  <div v-if="currentPackage.docs.length" class="mb-2">
+                    <div class="text-[11px] font-medium text-(--fg-subtle) py-1 px-1">Guide</div>
+                    <ul>
+                      <li v-if="getIntro(currentPackage)">
+                        <NuxtLink
+                          :to="`/${pkg.slug}`"
+                          :class="[
+                            'block py-1 px-2 text-[13px] rounded-md transition-colors truncate',
+                            route.path === `/${pkg.slug}`
+                              ? 'text-(--accent-text) bg-(--accent-subtle) font-medium'
+                              : 'text-(--fg-muted) hover:text-(--fg) hover:bg-(--bg-inset)',
+                          ]"
+                        >
+                          Introduction
+                        </NuxtLink>
+                      </li>
+                      <li v-for="s in getDocSections(currentPackage)" :key="s.slug">
+                        <NuxtLink
+                          :to="`/${pkg.slug}/${s.slug}`"
+                          :class="[
+                            'block py-1 px-2 text-[13px] rounded-md transition-colors truncate',
+                            isActive(pkg.slug, s.slug)
+                              ? 'text-(--accent-text) bg-(--accent-subtle) font-medium'
+                              : 'text-(--fg-muted) hover:text-(--fg) hover:bg-(--bg-inset)',
+                          ]"
+                        >
+                          {{ s.title }}
+                        </NuxtLink>
+                      </li>
+                    </ul>
+                  </div>
+
+                  <!-- api -->
+                  <template v-if="currentPackage.kind === 'api'">
+                    <div v-for="cat in currentPackage.categories" :key="cat.slug" class="mb-2">
+                      <div class="text-[11px] font-medium text-(--fg-subtle) py-1 px-1">{{ cat.name }}</div>
+                      <ul>
+                        <li v-for="item in cat.items" :key="item.slug">
+                          <NuxtLink
+                            :to="`/${pkg.slug}/${item.slug}`"
+                            :class="[
+                              'block py-1 px-2 text-[13px] rounded-md font-mono transition-colors truncate',
+                              isActive(pkg.slug, item.slug)
+                                ? 'text-(--accent-text) bg-(--accent-subtle) font-medium'
+                                : 'text-(--fg-muted) hover:text-(--fg) hover:bg-(--bg-inset)',
+                            ]"
+                          >
+                            {{ item.name }}
+                          </NuxtLink>
+                        </li>
+                      </ul>
+                    </div>
+                  </template>
+
+                  <!-- components -->
+                  <ul v-else-if="currentPackage.kind === 'components'">
+                    <li v-for="c in currentPackage.components" :key="c.slug">
+                      <NuxtLink
+                        :to="`/${pkg.slug}/${c.slug}`"
+                        :class="[
+                          'block py-1 px-2 text-[13px] rounded-md transition-colors truncate',
+                          isActive(pkg.slug, c.slug)
+                            ? 'text-(--accent-text) bg-(--accent-subtle) font-medium'
+                            : 'text-(--fg-muted) hover:text-(--fg) hover:bg-(--bg-inset)',
+                        ]"
+                      >
+                        {{ c.name }}
+                      </NuxtLink>
+                    </li>
+                  </ul>
+
+                  <!-- guide -->
+                  <ul v-else>
+                    <li v-for="s in currentPackage.sections" :key="s.slug">
+                      <NuxtLink
+                        :to="`/${pkg.slug}/${s.slug}`"
+                        :class="[
+                          'block py-1 px-2 text-[13px] rounded-md transition-colors truncate',
+                          isActive(pkg.slug, s.slug)
+                            ? 'text-(--accent-text) bg-(--accent-subtle) font-medium'
+                            : 'text-(--fg-muted) hover:text-(--fg) hover:bg-(--bg-inset)',
+                        ]"
+                      >
+                        {{ s.title }}
+                      </NuxtLink>
+                    </li>
+                  </ul>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </nav>
+      </aside>
+
+      <!-- Mobile overlay -->
+      <div v-if="isSidebarOpen" class="fixed inset-0 z-30 bg-black/30 lg:hidden" @click="isSidebarOpen = false" />
+
+      <!-- Main content -->
+      <main class="flex-1 min-w-0 py-10 lg:pl-10">
+        <slot />
+      </main>
+    </div>
+  </div>
+</template>
diff --git a/docs/app/pages/[package]/[utility].vue b/docs/app/pages/[package]/[utility].vue
new file mode 100644
index 0000000..2e53eb9
--- /dev/null
+++ b/docs/app/pages/[package]/[utility].vue
@@ -0,0 +1,251 @@
+<script setup lang="ts">import { demos } from '#docs/demos';
+import { sections } from '#docs/sections';
+
+const route = useRoute();
+const { resolveEntry } = useDocs();
+
+const packageSlug = computed(() => route.params.package as string);
+const utilitySlug = computed(() => route.params.utility as string);
+
+const entry = computed(() => resolveEntry(packageSlug.value, utilitySlug.value));
+
+if (!entry.value) {
+  throw createError({
+    statusCode: 404,
+    message: `"${utilitySlug.value}" not found in package "${packageSlug.value}"`,
+  });
+}
+
+const pkg = computed(() => entry.value!.pkg);
+
+const demoComponent = computed(() => demos[`${packageSlug.value}/${utilitySlug.value}`] ?? null);
+const sectionComponent = computed(() => sections[`${packageSlug.value}/${utilitySlug.value}`] ?? null);
+
+// ── Doc sections: client-side TOC built from the rendered headings ───────────
+const docRoot = ref<HTMLElement | null>(null);
+const docToc = ref<Array<{ id: string; text: string; depth: number }>>([]);
+
+function buildDocToc() {
+  const el = docRoot.value;
+  if (!el) return;
+  docToc.value = Array.from(el.querySelectorAll('h2, h3')).map((h) => {
+    if (!h.id) {
+      h.id = (h.textContent ?? '')
+        .toLowerCase().trim()
+        .replaceAll(/[^a-z0-9]+/g, '-')
+        .replaceAll(/(^-|-$)/g, '');
+    }
+    return { id: h.id, text: h.textContent ?? '', depth: h.tagName === 'H2' ? 2 : 3 };
+  });
+}
+
+onMounted(() => {
+  const el = docRoot.value;
+  if (!el) return;
+  buildDocToc();
+  // The section is an async component — rebuild once its content mounts.
+  const observer = new MutationObserver(() => buildDocToc());
+  observer.observe(el, { childList: true, subtree: true });
+  onScopeDispose(() => observer.disconnect());
+});
+
+function ghUrl(path: string) {
+  return `https://github.com/robonen/tools/blob/master/${path}`;
+}
+
+// ── Page title & TOC ─────────────────────────────────────────────────────────
+const title = computed(() => {
+  const e = entry.value!;
+  if (e.kind === 'api') return e.item.name;
+  if (e.kind === 'components') return e.component.name;
+  if (e.kind === 'doc') return e.section.title;
+  return e.section.title;
+});
+
+useHead(() => ({
+  title: `${title.value} — ${pkg.value.name}`,
+  meta: [{
+    name: 'description',
+    content: entry.value?.kind === 'api' ? entry.value.item.description : pkg.value.description,
+  }],
+}));
+
+const toc = computed(() => {
+  const e = entry.value;
+  if (!e) return [];
+
+  if (e.kind === 'guide') {
+    return extractHeadings(e.section.markdown).map(h => ({ id: h.id, text: h.text, depth: h.depth }));
+  }
+  if (e.kind === 'doc') {
+    return docToc.value;
+  }
+  if (e.kind === 'components') {
+    return e.component.parts.map(p => ({ id: p.name.toLowerCase(), text: p.name, depth: 2 }));
+  }
+  // api: derive from present sections
+  const i = e.item;
+  const items: Array<{ id: string; text: string; depth: number }> = [];
+  if (i.examples.length) items.push({ id: 'example', text: 'Example', depth: 2 });
+  if (i.hasDemo && demoComponent.value) items.push({ id: 'demo', text: 'Demo', depth: 2 });
+  if (i.signatures.length) items.push({ id: 'signature', text: 'Signature', depth: 2 });
+  if (i.typeParams.length) items.push({ id: 'type-parameters', text: 'Type Parameters', depth: 2 });
+  if (i.params.length) items.push({ id: 'parameters', text: 'Parameters', depth: 2 });
+  if (i.returns) items.push({ id: 'returns', text: 'Returns', depth: 2 });
+  if (i.properties.length) items.push({ id: 'properties', text: 'Properties', depth: 2 });
+  if (i.methods.length) items.push({ id: 'methods', text: 'Methods', depth: 2 });
+  if (i.relatedTypes?.length) items.push({ id: 'related-types', text: 'Related Types', depth: 2 });
+  return items;
+});
+
+const sectionTitle = 'text-xs font-semibold uppercase tracking-wider text-(--fg-subtle) mb-3';
+</script>
+
+<template>
+  <div v-if="entry" class="xl:grid xl:grid-cols-[minmax(0,1fr)_14rem] xl:gap-12">
+    <article class="min-w-0 max-w-3xl">
+      <!-- Breadcrumb -->
+      <nav class="flex items-center gap-1.5 text-sm text-(--fg-subtle) mb-6">
+        <NuxtLink :to="`/${pkg.slug}`" class="hover:text-(--fg) transition-colors">{{ pkg.name }}</NuxtLink>
+        <span>/</span>
+        <span class="text-(--fg)">{{ title }}</span>
+      </nav>
+
+      <!-- ── API ITEM ───────────────────────────────────────────────────── -->
+      <template v-if="entry.kind === 'api'">
+        <header class="mb-8">
+          <div class="flex items-center gap-2.5 mb-2 flex-wrap">
+            <DocsBadge :kind="entry.item.kind" size="md" />
+            <h1 class="min-w-0 break-words text-2xl font-bold font-mono tracking-tight text-(--fg)">{{ entry.item.name }}</h1>
+            <DocsTag v-if="entry.item.since" :label="`v${entry.item.since}`" variant="neutral" />
+            <DocsTag v-if="entry.item.hasTests" label="tested" variant="test" />
+            <DocsTag v-if="entry.item.hasDemo" label="demo" variant="demo" />
+          </div>
+          <p v-if="entry.item.description" class="text-(--fg-muted) text-[15px] leading-relaxed">{{ entry.item.description }}</p>
+          <div class="flex items-center gap-4 mt-4 text-sm">
+            <a :href="ghUrl(entry.item.sourcePath)" target="_blank" rel="noopener noreferrer" class="flex items-center gap-1.5 text-(--fg-subtle) hover:text-(--fg) transition-colors">
+              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" /><path d="M9 18c-4.51 2-5-2-7-2" /></svg>
+              Source
+            </a>
+            <a v-if="entry.item.hasTests" :href="ghUrl(entry.item.sourcePath).replace('index.ts', 'index.test.ts')" target="_blank" rel="noopener noreferrer" class="flex items-center gap-1.5 text-(--fg-subtle) hover:text-(--fg) transition-colors">
+              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" /><polyline points="14 2 14 8 20 8" /><path d="m9 15 2 2 4-4" /></svg>
+              Tests
+            </a>
+          </div>
+        </header>
+
+        <section v-if="entry.item.examples.length" id="example" class="mb-8 scroll-mt-20">
+          <h2 :class="sectionTitle">{{ entry.item.examples.length > 1 ? 'Examples' : 'Example' }}</h2>
+          <div class="space-y-3">
+            <DocsCode v-for="(ex, i) in entry.item.examples" :key="i" :code="ex" />
+          </div>
+        </section>
+
+        <section v-if="entry.item.hasDemo && demoComponent" id="demo" class="mb-8 scroll-mt-20">
+          <h2 :class="sectionTitle">Demo</h2>
+          <DocsDemo :component="demoComponent" :source="entry.item.demoSource" />
+        </section>
+
+        <section v-if="entry.item.signatures.length" id="signature" class="mb-8 scroll-mt-20">
+          <h2 :class="sectionTitle">{{ entry.item.signatures.length > 1 ? 'Signatures' : 'Signature' }}</h2>
+          <div class="space-y-2">
+            <DocsCode v-for="(sig, i) in entry.item.signatures" :key="i" :code="sig" />
+          </div>
+        </section>
+
+        <section v-if="entry.item.typeParams.length" id="type-parameters" class="mb-8 scroll-mt-20">
+          <h2 :class="sectionTitle">Type Parameters</h2>
+          <div class="space-y-1.5">
+            <div v-for="tp in entry.item.typeParams" :key="tp.name" class="flex items-baseline gap-2 text-sm flex-wrap">
+              <code class="font-mono font-medium text-(--accent-text)">{{ tp.name }}</code>
+              <span v-if="tp.constraint" class="text-(--fg-subtle)">extends <code class="font-mono text-xs">{{ tp.constraint }}</code></span>
+              <span v-if="tp.default" class="text-(--fg-subtle)">= <code class="font-mono text-xs">{{ tp.default }}</code></span>
+            </div>
+          </div>
+        </section>
+
+        <section v-if="entry.item.params.length" id="parameters" class="mb-8 scroll-mt-20">
+          <h2 :class="sectionTitle">Parameters</h2>
+          <DocsParamsTable :params="entry.item.params" />
+        </section>
+
+        <section v-if="entry.item.returns" id="returns" class="mb-8 scroll-mt-20">
+          <h2 :class="sectionTitle">Returns</h2>
+          <div class="flex items-baseline gap-2 text-sm flex-wrap">
+            <code class="font-mono bg-(--bg-inset) border border-(--border) px-2 py-1 rounded text-xs wrap-break-word">{{ entry.item.returns.type }}</code>
+            <span v-if="entry.item.returns.description" class="text-(--fg-muted)">{{ entry.item.returns.description }}</span>
+          </div>
+        </section>
+
+        <section v-if="entry.item.properties.length" id="properties" class="mb-8 scroll-mt-20">
+          <h2 :class="sectionTitle">Properties</h2>
+          <DocsPropsTable :properties="entry.item.properties" />
+        </section>
+
+        <section v-if="entry.item.methods.length" id="methods" class="mb-8 scroll-mt-20">
+          <h2 :class="sectionTitle">Methods</h2>
+          <DocsMethodsList :methods="entry.item.methods" />
+        </section>
+
+        <section v-if="entry.item.relatedTypes?.length" id="related-types" class="mb-8 scroll-mt-20">
+          <h2 :class="sectionTitle">Related Types</h2>
+          <div class="space-y-4">
+            <div v-for="rt in entry.item.relatedTypes" :key="rt.name" class="rounded-xl border border-(--border) bg-(--bg-subtle) p-4">
+              <div class="flex items-center gap-2 mb-2">
+                <DocsBadge :kind="rt.kind" size="sm" />
+                <h3 class="font-mono font-semibold text-sm text-(--fg)">{{ rt.name }}</h3>
+              </div>
+              <p v-if="rt.description" class="text-sm text-(--fg-muted) mb-3">{{ rt.description }}</p>
+              <DocsCode v-if="rt.signatures.length" :code="rt.signatures[0]!" />
+              <DocsPropsTable v-if="rt.properties.length" :properties="rt.properties" class="mt-3" />
+            </div>
+          </div>
+        </section>
+      </template>
+
+      <!-- ── COMPONENT ──────────────────────────────────────────────────── -->
+      <template v-else-if="entry.kind === 'components'">
+        <header class="mb-8">
+          <div class="flex items-center gap-2.5 mb-2 flex-wrap">
+            <DocsBadge kind="component" size="md" />
+            <h1 class="text-2xl font-bold tracking-tight text-(--fg)">{{ entry.component.name }}</h1>
+            <DocsTag :label="`${entry.component.parts.length} parts`" variant="neutral" />
+          </div>
+          <p v-if="entry.component.description" class="text-(--fg-muted) text-[15px] leading-relaxed">{{ entry.component.description }}</p>
+          <div class="flex items-center gap-4 mt-4 text-sm">
+            <a :href="ghUrl(entry.component.sourcePath)" target="_blank" rel="noopener noreferrer" class="flex items-center gap-1.5 text-(--fg-subtle) hover:text-(--fg) transition-colors">
+              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" /><path d="M9 18c-4.51 2-5-2-7-2" /></svg>
+              Source
+            </a>
+          </div>
+        </header>
+
+        <section v-if="entry.component.hasDemo && demoComponent" class="mb-10">
+          <h2 :class="sectionTitle">Demo</h2>
+          <DocsDemo :component="demoComponent" :source="entry.component.demoSource" />
+        </section>
+
+        <DocsComponentAnatomy :component="entry.component" :package-name="pkg.name" />
+      </template>
+
+      <!-- ── GUIDE (Markdown) ───────────────────────────────────────────── -->
+      <template v-else-if="entry.kind === 'guide'">
+        <DocsMarkdown :source="entry.section.markdown" />
+      </template>
+
+      <!-- ── DOC SECTION (hand-authored .vue) ───────────────────────────── -->
+      <template v-else-if="entry.kind === 'doc'">
+        <div ref="docRoot" class="docs-section">
+          <component :is="sectionComponent" />
+        </div>
+      </template>
+    </article>
+
+    <!-- Right rail TOC -->
+    <aside class="hidden xl:block">
+      <div class="sticky top-20 max-h-[calc(100vh-6rem)] overflow-y-auto">
+        <DocsToc :items="toc" />
+      </div>
+    </aside>
+  </div>
+</template>
diff --git a/docs/app/pages/[package]/index.vue b/docs/app/pages/[package]/index.vue
new file mode 100644
index 0000000..34fec91
--- /dev/null
+++ b/docs/app/pages/[package]/index.vue
@@ -0,0 +1,148 @@
+<script setup lang="ts">import { sections } from '#docs/sections';
+
+const route = useRoute();
+const { getPackage, countEntries, getIntro } = useDocs();
+
+const slug = computed(() => route.params.package as string);
+const pkg = computed(() => getPackage(slug.value));
+
+if (!pkg.value) {
+  throw createError({ statusCode: 404, message: `Package "${slug.value}" not found` });
+}
+
+// Hand-authored intro (docs/intro.vue) renders as the package hero when present.
+const intro = computed(() => getIntro(pkg.value!));
+const introComponent = computed(() => intro.value ? sections[`${slug.value}/introduction`] ?? null : null);
+
+useHead({ title: `${pkg.value.name} — @robonen/tools` });
+
+const kindLabel = computed(() => ({
+  api: 'API Reference',
+  components: 'Components',
+  guide: 'Guide',
+}[pkg.value!.kind]));
+
+// For guide packages, surface the overview section inline.
+const overview = computed(() =>
+  pkg.value?.kind === 'guide' ? pkg.value.sections.find(s => s.slug === 'overview') : undefined,
+);
+const otherSections = computed(() =>
+  pkg.value?.kind === 'guide' ? pkg.value.sections.filter(s => s.slug !== 'overview') : [],
+);
+</script>
+
+<template>
+  <div v-if="pkg" class="max-w-3xl">
+    <!-- Hand-authored intro hero (docs/intro.vue) -->
+    <section v-if="introComponent" class="docs-section mb-12">
+      <component :is="introComponent" />
+    </section>
+
+    <!-- Auto header (shown only when there's no hand-authored intro) -->
+    <header v-else class="mb-8 pb-8 border-b border-(--border)">
+      <div class="flex items-center gap-2.5 mb-2 flex-wrap">
+        <h1 class="font-mono text-2xl font-bold tracking-tight text-(--fg)">{{ pkg.name }}</h1>
+        <DocsTag :label="`v${pkg.version}`" variant="neutral" />
+      </div>
+      <p class="text-(--fg-muted) text-[15px] leading-relaxed">{{ pkg.description }}</p>
+      <div class="mt-4 flex items-center gap-3 text-xs text-(--fg-subtle)">
+        <span>{{ kindLabel }}</span>
+        <span>·</span>
+        <span>{{ countEntries(pkg) }} entries</span>
+      </div>
+      <div class="mt-5">
+        <DocsCode :code="`pnpm add ${pkg.name}`" lang="bash" />
+      </div>
+    </header>
+
+    <!-- When an intro replaces the header, label the auto-generated reference -->
+    <h2 v-if="introComponent && pkg.kind === 'api'" class="text-xs font-semibold uppercase tracking-wider text-(--fg-subtle) mb-4 pt-2">
+      API Reference
+    </h2>
+
+    <!-- API: categories of items -->
+    <template v-if="pkg.kind === 'api'">
+      <section v-for="category in pkg.categories" :key="category.slug" class="mb-10">
+        <h2 class="text-xs font-semibold uppercase tracking-wider text-(--fg-subtle) mb-4">
+          {{ category.name }}
+          <span class="ml-1 text-(--fg-subtle) normal-case font-normal">· {{ category.items.length }}</span>
+        </h2>
+        <div class="grid grid-cols-1 gap-2">
+          <NuxtLink
+            v-for="item in category.items"
+            :key="item.slug"
+            :to="`/${pkg.slug}/${item.slug}`"
+            class="group flex items-center gap-3 p-3 rounded-xl border border-(--border) bg-(--bg-elevated) hover:border-(--border-strong) hover:bg-(--bg-subtle) transition-all"
+          >
+            <DocsBadge :kind="item.kind" />
+            <div class="min-w-0 flex-1">
+              <div class="flex items-center gap-2 flex-wrap">
+                <span class="font-mono text-sm font-medium text-(--fg) group-hover:text-(--accent-text) transition-colors">{{ item.name }}</span>
+                <DocsTag v-if="item.hasTests" label="tested" variant="test" />
+                <DocsTag v-if="item.hasDemo" label="demo" variant="demo" />
+              </div>
+              <p v-if="item.description" class="text-sm text-(--fg-subtle) mt-0.5 truncate">{{ item.description }}</p>
+            </div>
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-(--fg-subtle) group-hover:text-(--accent-text) transition-colors shrink-0">
+              <polyline points="9 18 15 12 9 6" />
+            </svg>
+          </NuxtLink>
+        </div>
+      </section>
+    </template>
+
+    <!-- Components: gallery -->
+    <template v-else-if="pkg.kind === 'components'">
+      <section>
+        <h2 class="text-xs font-semibold uppercase tracking-wider text-(--fg-subtle) mb-4">
+          All components <span class="normal-case font-normal">· {{ pkg.components.length }}</span>
+        </h2>
+        <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
+          <NuxtLink
+            v-for="c in pkg.components"
+            :key="c.slug"
+            :to="`/${pkg.slug}/${c.slug}`"
+            class="group block p-4 rounded-xl border border-(--border) bg-(--bg-elevated) hover:border-(--border-strong) hover:shadow-(--shadow-card) transition-all"
+          >
+            <div class="flex items-center justify-between gap-2 mb-1.5">
+              <span class="font-semibold text-(--fg) group-hover:text-(--accent-text) transition-colors">{{ c.name }}</span>
+              <span class="text-[11px] text-(--fg-subtle)">{{ c.parts.length }} parts</span>
+            </div>
+            <p v-if="c.description" class="text-sm text-(--fg-subtle) line-clamp-2">{{ c.description }}</p>
+            <div class="mt-3 flex flex-wrap gap-1">
+              <span
+                v-for="part in c.parts.slice(0, 4)"
+                :key="part.name"
+                class="text-[10px] font-mono px-1.5 py-0.5 rounded bg-(--bg-inset) border border-(--border) text-(--fg-subtle)"
+              >
+                {{ part.role }}
+              </span>
+              <span v-if="c.parts.length > 4" class="text-[10px] text-(--fg-subtle) px-1">+{{ c.parts.length - 4 }}</span>
+            </div>
+          </NuxtLink>
+        </div>
+      </section>
+    </template>
+
+    <!-- Guide: overview markdown + section links -->
+    <template v-else>
+      <DocsMarkdown v-if="overview" :source="overview.markdown" />
+      <section v-if="otherSections.length > 0" class="mt-10 pt-8 border-t border-(--border)">
+        <h2 class="text-xs font-semibold uppercase tracking-wider text-(--fg-subtle) mb-4">Sections</h2>
+        <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+          <NuxtLink
+            v-for="s in otherSections"
+            :key="s.slug"
+            :to="`/${pkg.slug}/${s.slug}`"
+            class="group flex items-center justify-between gap-3 p-3.5 rounded-xl border border-(--border) bg-(--bg-elevated) hover:border-(--border-strong) hover:bg-(--bg-subtle) transition-all"
+          >
+            <span class="text-sm font-medium text-(--fg) group-hover:text-(--accent-text) transition-colors">{{ s.title }}</span>
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-(--fg-subtle) group-hover:text-(--accent-text) transition-colors shrink-0">
+              <polyline points="9 18 15 12 9 6" />
+            </svg>
+          </NuxtLink>
+        </div>
+      </section>
+    </template>
+  </div>
+</template>
diff --git a/docs/app/pages/index.vue b/docs/app/pages/index.vue
new file mode 100644
index 0000000..ab2769a
--- /dev/null
+++ b/docs/app/pages/index.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">const { getGroupedPackages, getPackages, countEntries, getTotalItems } = useDocs();
+const groups = getGroupedPackages();
+const packages = getPackages();
+const totalItems = getTotalItems();
+
+const kindMeta: Record<string, { label: string; cls: string }> = {
+  api: { label: 'API', cls: 'bg-blue-100 text-blue-700 dark:bg-blue-500/15 dark:text-blue-300' },
+  components: { label: 'Components', cls: 'bg-fuchsia-100 text-fuchsia-700 dark:bg-fuchsia-500/15 dark:text-fuchsia-300' },
+  guide: { label: 'Guide', cls: 'bg-teal-100 text-teal-700 dark:bg-teal-500/15 dark:text-teal-300' },
+};
+
+useHead({ title: '@robonen/tools — Documentation' });
+</script>
+
+<template>
+  <div class="max-w-4xl">
+    <!-- Hero -->
+    <section class="mb-14">
+      <div class="inline-flex items-center gap-2 mb-5 px-3 py-1 rounded-full border border-(--border) bg-(--bg-subtle) text-xs text-(--fg-muted)">
+        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500" />
+        Auto-generated from source &amp; JSDoc
+      </div>
+      <h1 class="text-4xl sm:text-5xl font-bold tracking-tight text-(--fg) mb-4">
+        @robonen/tools
+      </h1>
+      <p class="text-lg text-(--fg-muted) leading-relaxed max-w-2xl">
+        A monorepo of TypeScript utilities, Vue composables, headless UI primitives
+        and shared tooling — documented, typed and tested.
+      </p>
+      <div class="mt-6 flex flex-wrap items-center gap-x-6 gap-y-2 text-sm text-(--fg-subtle)">
+        <span><span class="text-(--fg) font-semibold">{{ packages.length }}</span> packages</span>
+        <span><span class="text-(--fg) font-semibold">{{ totalItems }}</span> documented items</span>
+        <span><span class="text-(--fg) font-semibold">{{ groups.length }}</span> groups</span>
+      </div>
+    </section>
+
+    <!-- Package groups -->
+    <section v-for="grp in groups" :key="grp.group" class="mb-10">
+      <h2 class="text-xs font-semibold uppercase tracking-wider text-(--fg-subtle) mb-4">
+        {{ grp.label }}
+      </h2>
+      <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
+        <NuxtLink
+          v-for="pkg in grp.packages"
+          :key="pkg.slug"
+          :to="`/${pkg.slug}`"
+          class="group relative block p-5 rounded-card border border-(--border) bg-(--bg-elevated) hover:border-(--border-strong) hover:shadow-(--shadow-card) transition-all"
+        >
+          <div class="flex items-start justify-between gap-3 mb-2">
+            <h3 class="font-mono text-sm font-semibold text-(--fg) group-hover:text-(--accent-text) transition-colors">
+              {{ pkg.name }}
+            </h3>
+            <span :class="['text-[10px] px-2 py-0.5 rounded-full font-medium leading-none shrink-0', kindMeta[pkg.kind]?.cls]">
+              {{ kindMeta[pkg.kind]?.label }}
+            </span>
+          </div>
+          <p class="text-sm text-(--fg-muted) leading-relaxed line-clamp-2">
+            {{ pkg.description }}
+          </p>
+          <div class="mt-4 flex items-center gap-3 text-xs text-(--fg-subtle)">
+            <span class="font-mono">v{{ pkg.version }}</span>
+            <span>·</span>
+            <span>{{ countEntries(pkg) }} {{ pkg.kind === 'components' ? 'components' : pkg.kind === 'guide' ? 'sections' : 'items' }}</span>
+          </div>
+        </NuxtLink>
+      </div>
+    </section>
+  </div>
+</template>
diff --git a/docs/eslint.config.ts b/docs/eslint.config.ts
new file mode 100644
index 0000000..f394f09
--- /dev/null
+++ b/docs/eslint.config.ts
@@ -0,0 +1,10 @@
+import { base, compose, imports, stylistic, typescript, vue } from '@robonen/eslint';
+
+export default compose(base, typescript, vue, imports, stylistic, {
+  name: 'docs/build-scripts',
+  files: ['modules/**'],
+  rules: {
+    /* Build-time tooling (doc extractor) logs progress to the console. */
+    'no-console': 'off',
+  },
+});
diff --git a/docs/modules/extractor/extract.ts b/docs/modules/extractor/extract.ts
new file mode 100644
index 0000000..810b7c0
--- /dev/null
+++ b/docs/modules/extractor/extract.ts
@@ -0,0 +1,922 @@
+/**
+ * ts-morph based metadata extractor for @robonen/tools packages.
+ *
+ * Each package declares a {@link PackageKind} so it can be documented in the way
+ * that fits it best:
+ *  - `api`        → scans source for exported functions / classes / types + JSDoc
+ *  - `components` → walks `.vue` parts and extracts per-part props / emits (anatomy)
+ *  - `guide`      → collects co-located Markdown files into prose sections
+ *
+ * Produces a single structured JSON metadata file consumed by the Nuxt docs site.
+ */
+
+import { basename, dirname, relative, resolve } from 'node:path';
+import { existsSync, readFileSync, readdirSync } from 'node:fs';
+import { Project } from 'ts-morph';
+import type { ClassDeclaration, FunctionDeclaration, InterfaceDeclaration, JSDoc, JSDocTag, MethodDeclaration, PropertyDeclaration, PropertySignature, SourceFile, TypeAliasDeclaration } from 'ts-morph';
+import type {
+  CategoryMeta,
+  ComponentMeta,
+  ComponentPartMeta,
+  DocSection,
+  DocsMetadata,
+  EmitMeta,
+  GuideSection,
+  ItemMeta,
+  MethodMeta,
+  PackageGroup,
+  PackageKind,
+  PackageMeta,
+  ParamMeta,
+  PropertyMeta,
+  ReturnMeta,
+  TypeParamMeta,
+} from './types';
+
+/** Repository root — docs/modules/extractor → three levels up */
+const ROOT = resolve(import.meta.dirname, '..', '..', '..');
+
+interface PackageConfig {
+  /** Path relative to repo root */
+  path: string;
+  /** URL slug */
+  slug: string;
+  /** Presentation kind */
+  kind: PackageKind;
+  /** Sidebar group */
+  group: PackageGroup;
+  /** For `guide` kind: markdown sources relative to the package dir.
+   *  Supports exact files (`README.md`) and single-level globs (`rules/*.md`). */
+  guideSources?: string[];
+}
+
+/** Packages to document. */
+const PACKAGES: PackageConfig[] = [
+  // ── core ──
+  { path: 'core/stdlib', slug: 'stdlib', kind: 'api', group: 'core' },
+  { path: 'core/platform', slug: 'platform', kind: 'api', group: 'core' },
+  { path: 'core/fetch', slug: 'fetch', kind: 'api', group: 'core' },
+  { path: 'core/encoding', slug: 'encoding', kind: 'api', group: 'core' },
+  { path: 'core/crdt', slug: 'crdt', kind: 'api', group: 'core' },
+  // ── vue ──
+  { path: 'vue/toolkit', slug: 'vue', kind: 'api', group: 'vue' },
+  { path: 'vue/editor', slug: 'editor', kind: 'api', group: 'vue' },
+  { path: 'vue/primitives', slug: 'primitives', kind: 'components', group: 'vue' },
+  // ── configs ──
+  { path: 'configs/eslint', slug: 'eslint', kind: 'guide', group: 'configs', guideSources: ['README.md', 'rules/*.md'] },
+  { path: 'configs/tsconfig', slug: 'tsconfig', kind: 'guide', group: 'configs', guideSources: ['README.md'] },
+  { path: 'configs/tsdown', slug: 'tsdown', kind: 'guide', group: 'configs', guideSources: ['README.md'] },
+  // ── infra ──
+  { path: 'infra/renovate', slug: 'renovate', kind: 'guide', group: 'infra', guideSources: ['README.md'] },
+];
+
+// ── Helpers ────────────────────────────────────────────────────────────────
+
+function toKebabCase(str: string): string {
+  return str
+    .replaceAll(/([a-z0-9])([A-Z])/g, '$1-$2')
+    .replaceAll(/([A-Z])([A-Z][a-z])/g, '$1-$2')
+    .toLowerCase();
+}
+
+function slugify(name: string): string {
+  return toKebabCase(name);
+}
+
+function toPascalCase(slug: string): string {
+  return slug
+    .split(/[-_]/)
+    .filter(Boolean)
+    .map(s => s.charAt(0).toUpperCase() + s.slice(1))
+    .join('');
+}
+
+function getJsDocTags(jsdocs: JSDoc[]): JSDocTag[] {
+  return jsdocs.flatMap(doc => doc.getTags());
+}
+
+function getTagValue(tags: JSDocTag[], tagName: string): string {
+  const tag = tags.find(t => t.getTagName() === tagName);
+  if (!tag) return '';
+  const comment = tag.getCommentText();
+  return comment?.trim() ?? '';
+}
+
+function getDescription(jsdocs: JSDoc[], tags: JSDocTag[]): string {
+  const descTag = getTagValue(tags, 'description');
+  if (descTag) return descTag;
+
+  for (const doc of jsdocs) {
+    const desc = doc.getDescription().trim();
+    if (desc) return desc;
+  }
+
+  return '';
+}
+
+function getExamples(tags: JSDocTag[]): string[] {
+  return tags
+    .filter(t => t.getTagName() === 'example')
+    .map((t) => {
+      const text = t.getCommentText()?.trim() ?? '';
+      return text.replace(/^```(?:ts|typescript)?\n?/, '').replace(/\n?```$/, '').trim();
+    })
+    .filter(Boolean);
+}
+
+function extractParams(tags: JSDocTag[], node: FunctionDeclaration | MethodDeclaration): ParamMeta[] {
+  const params: ParamMeta[] = [];
+  const paramTags = tags.filter(t => t.getTagName() === 'param');
+
+  for (const param of node.getParameters()) {
+    const name = param.getName();
+    const type = param.getType().getText(param);
+    const optional = param.isOptional();
+    const defaultValue = param.getInitializer()?.getText() ?? null;
+
+    const paramTag = paramTags.find(t => t.getText().includes(name));
+
+    let description = '';
+    if (paramTag) {
+      const comment = paramTag.getCommentText() ?? '';
+      description = comment
+        .replace(/^\{[^}]*\}\s*/, '')
+        .replace(new RegExp(`^${name}\\s*[-–—]?\\s*`), '')
+        .replace(new RegExp(`^${name}\\s+`), '')
+        .replace(/^[-–—]\s*/, '')
+        .trim();
+    }
+
+    params.push({ name, type, description, optional, defaultValue });
+  }
+
+  return params;
+}
+
+function extractTypeParams(node: FunctionDeclaration | ClassDeclaration | InterfaceDeclaration | TypeAliasDeclaration): TypeParamMeta[] {
+  return node.getTypeParameters().map(tp => ({
+    name: tp.getName(),
+    constraint: tp.getConstraint()?.getText() ?? null,
+    default: tp.getDefault()?.getText() ?? null,
+    description: '',
+  }));
+}
+
+function extractReturnMeta(tags: JSDocTag[], node: FunctionDeclaration | MethodDeclaration): ReturnMeta | null {
+  const returnType = node.getReturnType().getText(node);
+  if (returnType === 'void') return null;
+
+  const returnsTag = getTagValue(tags, 'returns') || getTagValue(tags, 'return');
+  const description = returnsTag.replace(/^\{[^}]*\}\s*/, '').trim();
+
+  return { type: returnType, description };
+}
+
+function extractMethodMeta(method: MethodDeclaration): MethodMeta {
+  const jsdocs = method.getJsDocs();
+  const tags = getJsDocTags(jsdocs);
+
+  return {
+    name: method.getName(),
+    description: getDescription(jsdocs, tags),
+    signatures: [method.getText().split('{')[0]?.trim() ?? ''],
+    params: extractParams(tags, method),
+    returns: extractReturnMeta(tags, method),
+    visibility: method.getScope() ?? 'public',
+  };
+}
+
+function extractPropertyMeta(prop: PropertyDeclaration | PropertySignature): PropertyMeta {
+  const jsdocs = prop.getJsDocs();
+  const tags = getJsDocTags(jsdocs);
+
+  return {
+    name: prop.getName(),
+    type: prop.getType().getText(prop),
+    description: getDescription(jsdocs, tags),
+    optional: prop.hasQuestionToken?.() ?? false,
+    defaultValue: getTagValue(tags, 'default') || null,
+    readonly: prop.isReadonly?.() ?? false,
+  };
+}
+
+function getSourceDir(itemPath: string): string {
+  return dirname(itemPath);
+}
+
+function hasDemoFile(sourceFilePath: string): boolean {
+  return existsSync(resolve(getSourceDir(sourceFilePath), 'demo.vue'));
+}
+
+function readDemoSource(sourceFilePath: string): string {
+  const demoPath = resolve(getSourceDir(sourceFilePath), 'demo.vue');
+  if (!existsSync(demoPath)) return '';
+  return readFileSync(demoPath, 'utf-8');
+}
+
+function hasTestFile(sourceFilePath: string): boolean {
+  const dir = getSourceDir(sourceFilePath);
+  return existsSync(resolve(dir, 'index.test.ts')) || existsSync(resolve(dir, '__test__'));
+}
+
+// ── API Extraction ───────────────────────────────────────────────────────────
+
+function extractFunction(fn: FunctionDeclaration, sourceFilePath: string, entryPoint: string): ItemMeta | null {
+  const name = fn.getName();
+  if (!name || name.startsWith('_')) return null;
+
+  const jsdocs = fn.getJsDocs();
+  const tags = getJsDocTags(jsdocs);
+
+  const signatureText = fn.getOverloads().length > 0
+    ? fn.getOverloads().map(o => o.getText().trim())
+    : [`${fn.getText().split('{')[0]?.trim()}{ ... }`];
+
+  return {
+    name,
+    slug: slugify(name),
+    kind: 'function',
+    description: getDescription(jsdocs, tags),
+    since: getTagValue(tags, 'since'),
+    signatures: signatureText,
+    params: extractParams(tags, fn),
+    returns: extractReturnMeta(tags, fn),
+    typeParams: extractTypeParams(fn),
+    examples: getExamples(tags),
+    methods: [],
+    properties: [],
+    hasDemo: hasDemoFile(sourceFilePath),
+    demoSource: readDemoSource(sourceFilePath),
+    hasTests: hasTestFile(sourceFilePath),
+    relatedTypes: [],
+    sourcePath: relative(ROOT, sourceFilePath),
+    entryPoint,
+  };
+}
+
+function extractClass(cls: ClassDeclaration, sourceFilePath: string, entryPoint: string): ItemMeta | null {
+  const name = cls.getName();
+  if (!name) return null;
+
+  const jsdocs = cls.getJsDocs();
+  const tags = getJsDocTags(jsdocs);
+
+  const methods = cls.getMethods()
+    .filter(m => (m.getScope() ?? 'public') === 'public')
+    .filter(m => !m.getName().startsWith('_'))
+    .map(extractMethodMeta);
+
+  const properties = cls.getProperties()
+    .filter(p => (p.getScope() ?? 'public') === 'public')
+    .map(p => extractPropertyMeta(p));
+
+  const getters = cls.getGetAccessors()
+    .filter(g => (g.getScope() ?? 'public') === 'public')
+    .map(g => ({
+      name: g.getName(),
+      type: g.getReturnType().getText(g),
+      description: getDescription(g.getJsDocs(), getJsDocTags(g.getJsDocs())),
+      optional: false,
+      defaultValue: null,
+      readonly: true,
+    }));
+
+  const typeParams = cls.getTypeParameters();
+  const typeParamStr = typeParams.length > 0 ? `<${typeParams.map(tp => tp.getText()).join(', ')}>` : '';
+  const extendsClause = cls.getExtends() ? ` extends ${cls.getExtends()!.getText()}` : '';
+  const implementsClause = cls.getImplements().length > 0
+    ? ` implements ${cls.getImplements().map(i => i.getText()).join(', ')}`
+    : '';
+  const signature = `class ${name}${typeParamStr}${extendsClause}${implementsClause}`;
+
+  return {
+    name,
+    slug: slugify(name),
+    kind: 'class',
+    description: getDescription(jsdocs, tags),
+    since: getTagValue(tags, 'since'),
+    signatures: [signature],
+    params: [],
+    returns: null,
+    typeParams: extractTypeParams(cls),
+    examples: getExamples(tags),
+    methods,
+    properties: [...properties, ...getters],
+    hasDemo: hasDemoFile(sourceFilePath),
+    demoSource: readDemoSource(sourceFilePath),
+    hasTests: hasTestFile(sourceFilePath),
+    relatedTypes: [],
+    sourcePath: relative(ROOT, sourceFilePath),
+    entryPoint,
+  };
+}
+
+function extractInterface(iface: InterfaceDeclaration, sourceFilePath: string, entryPoint: string): ItemMeta | null {
+  const name = iface.getName();
+  if (!name) return null;
+
+  const jsdocs = iface.getJsDocs();
+  const tags = getJsDocTags(jsdocs);
+
+  const properties = iface.getProperties().map(p => extractPropertyMeta(p));
+
+  const typeParams = iface.getTypeParameters();
+  const typeParamStr = typeParams.length > 0 ? `<${typeParams.map(tp => tp.getText()).join(', ')}>` : '';
+  const extendsExprs = iface.getExtends();
+  const extendsStr = extendsExprs.length > 0 ? ` extends ${extendsExprs.map(e => e.getText()).join(', ')}` : '';
+  const signature = `interface ${name}${typeParamStr}${extendsStr}`;
+
+  return {
+    name,
+    slug: slugify(name),
+    kind: 'interface',
+    description: getDescription(jsdocs, tags),
+    since: getTagValue(tags, 'since'),
+    signatures: [signature],
+    params: [],
+    returns: null,
+    typeParams: extractTypeParams(iface),
+    examples: getExamples(tags),
+    methods: [],
+    properties,
+    hasDemo: hasDemoFile(sourceFilePath),
+    demoSource: readDemoSource(sourceFilePath),
+    hasTests: hasTestFile(sourceFilePath),
+    relatedTypes: [],
+    sourcePath: relative(ROOT, sourceFilePath),
+    entryPoint,
+  };
+}
+
+function extractTypeAlias(typeAlias: TypeAliasDeclaration, sourceFilePath: string, entryPoint: string): ItemMeta | null {
+  const name = typeAlias.getName();
+  if (!name) return null;
+
+  const jsdocs = typeAlias.getJsDocs();
+  const tags = getJsDocTags(jsdocs);
+
+  return {
+    name,
+    slug: slugify(name),
+    kind: 'type',
+    description: getDescription(jsdocs, tags),
+    since: getTagValue(tags, 'since'),
+    signatures: [typeAlias.getText().trim()],
+    params: [],
+    returns: null,
+    typeParams: extractTypeParams(typeAlias),
+    examples: getExamples(tags),
+    methods: [],
+    properties: [],
+    hasDemo: hasDemoFile(sourceFilePath),
+    demoSource: readDemoSource(sourceFilePath),
+    hasTests: hasTestFile(sourceFilePath),
+    relatedTypes: [],
+    sourcePath: relative(ROOT, sourceFilePath),
+    entryPoint,
+  };
+}
+
+function collectExportedItems(sourceFile: SourceFile, entryPoint: string, visited = new Set<string>()): ItemMeta[] {
+  const filePath = sourceFile.getFilePath();
+  if (visited.has(filePath)) return [];
+  visited.add(filePath);
+
+  const items: ItemMeta[] = [];
+
+  for (const fn of sourceFile.getFunctions()) {
+    if (!fn.isExported()) continue;
+
+    const overloads = fn.getOverloads();
+    if (overloads.length > 0) {
+      const firstOverload = overloads[0]!;
+      const jsdocs = firstOverload.getJsDocs();
+      const tags = getJsDocTags(jsdocs);
+      const name = fn.getName();
+      if (!name || name.startsWith('_')) continue;
+
+      items.push({
+        name,
+        slug: slugify(name),
+        kind: 'function',
+        description: getDescription(jsdocs, tags),
+        since: getTagValue(tags, 'since'),
+        signatures: overloads.map(o => o.getText().trim()),
+        params: extractParams(tags, fn),
+        returns: extractReturnMeta(tags, fn),
+        typeParams: extractTypeParams(fn),
+        examples: getExamples(tags),
+        methods: [],
+        properties: [],
+        hasDemo: hasDemoFile(filePath),
+        demoSource: readDemoSource(filePath),
+        hasTests: hasTestFile(filePath),
+        relatedTypes: [],
+        sourcePath: relative(ROOT, filePath),
+        entryPoint,
+      });
+    }
+    else {
+      const item = extractFunction(fn, filePath, entryPoint);
+      if (item) items.push(item);
+    }
+  }
+
+  for (const cls of sourceFile.getClasses()) {
+    if (!cls.isExported()) continue;
+    const item = extractClass(cls, filePath, entryPoint);
+    if (item) items.push(item);
+  }
+
+  for (const iface of sourceFile.getInterfaces()) {
+    if (!iface.isExported()) continue;
+    const jsdocs = iface.getJsDocs();
+    const tags = getJsDocTags(jsdocs);
+    const hasCategory = getTagValue(tags, 'category') !== '';
+    if (!hasCategory && jsdocs.length === 0) continue;
+    const item = extractInterface(iface, filePath, entryPoint);
+    if (item) items.push(item);
+  }
+
+  for (const typeAlias of sourceFile.getTypeAliases()) {
+    if (!typeAlias.isExported()) continue;
+    const jsdocs = typeAlias.getJsDocs();
+    const tags = getJsDocTags(jsdocs);
+    const hasCategory = getTagValue(tags, 'category') !== '';
+    if (!hasCategory && jsdocs.length === 0) continue;
+    const item = extractTypeAlias(typeAlias, filePath, entryPoint);
+    if (item) items.push(item);
+  }
+
+  for (const exportDecl of sourceFile.getExportDeclarations()) {
+    if (!exportDecl.getModuleSpecifierValue()) continue;
+    const referencedFile = exportDecl.getModuleSpecifierSourceFile();
+    if (referencedFile) items.push(...collectExportedItems(referencedFile, entryPoint, visited));
+  }
+
+  return items;
+}
+
+/**
+ * Groups types/interfaces from `types.ts` files with their sibling
+ * class/function items from the same directory as `relatedTypes`.
+ */
+function groupCoLocatedTypes(items: ItemMeta[]): ItemMeta[] {
+  const typesByDir = new Map<string, ItemMeta[]>();
+  const primaryByDir = new Map<string, ItemMeta[]>();
+
+  for (const item of items) {
+    const dir = dirname(item.sourcePath);
+    const isSecondary = item.sourcePath.endsWith('/types.ts') && (item.kind === 'type' || item.kind === 'interface');
+
+    const target = isSecondary ? typesByDir : primaryByDir;
+    const existing = target.get(dir) ?? [];
+    existing.push(item);
+    target.set(dir, existing);
+  }
+
+  const absorbed = new Set<string>();
+  for (const [dir, types] of Array.from(typesByDir.entries())) {
+    const primaries = primaryByDir.get(dir);
+    if (!primaries || primaries.length === 0) continue;
+    for (const primary of primaries) primary.relatedTypes = [...types];
+    for (const t of types) absorbed.add(`${t.entryPoint}:${t.name}`);
+  }
+
+  return items.filter(item => !absorbed.has(`${item.entryPoint}:${item.name}`));
+}
+
+function inferCategoryFromItem(item: ItemMeta): string {
+  const parts = item.sourcePath.split('/src/');
+  if (parts.length < 2) return 'General';
+
+  const segments = parts[1]!.split('/');
+
+  if (segments[0] === 'composables' && segments.length >= 3) {
+    const cat = segments[1]!;
+    return cat.charAt(0).toUpperCase() + cat.slice(1);
+  }
+  if (segments[0] && segments.length >= 2) {
+    const cat = segments[0];
+    return cat.charAt(0).toUpperCase() + cat.slice(1);
+  }
+  return 'General';
+}
+
+/** Resolve a package's export subpaths to source entry files. */
+function resolveEntryPoints(pkgDir: string, exportsField: Record<string, any>): Array<{ subpath: string; filePath: string }> {
+  const entryPoints: Array<{ subpath: string; filePath: string }> = [];
+
+  for (const [subpath, value] of Object.entries(exportsField)) {
+    if (typeof value !== 'object' || value === null) continue;
+
+    let entry: any = (value as Record<string, any>).import ?? (value as Record<string, any>).types;
+    if (typeof entry === 'object' && entry !== null) entry = entry.types || entry.default;
+    if (!entry || typeof entry !== 'string') continue;
+    // Wildcard exports (e.g. "./*") can't be resolved to a single file here.
+    if (entry.includes('*')) continue;
+
+    const srcPath = entry
+      .replace(/^\.\/dist\//, 'src/')
+      .replace(/\.m?js$/, '.ts')
+      .replace(/\.d\.m?ts$/, '.ts');
+
+    const fullPath = resolve(pkgDir, srcPath);
+    if (existsSync(fullPath)) {
+      entryPoints.push({ subpath, filePath: fullPath });
+    }
+    else {
+      const altPath = resolve(pkgDir, srcPath.replace(/\.ts$/, '/index.ts'));
+      if (existsSync(altPath)) entryPoints.push({ subpath, filePath: altPath });
+    }
+  }
+
+  // Fallback: a conventional src/index.ts entry.
+  if (entryPoints.length === 0) {
+    const idx = resolve(pkgDir, 'src/index.ts');
+    if (existsSync(idx)) entryPoints.push({ subpath: '.', filePath: idx });
+  }
+
+  return entryPoints;
+}
+
+function buildApiCategories(pkgDir: string): CategoryMeta[] {
+  const pkgJson = JSON.parse(readFileSync(resolve(pkgDir, 'package.json'), 'utf-8'));
+  const entryPoints = resolveEntryPoints(pkgDir, pkgJson.exports ?? {});
+  if (entryPoints.length === 0) return [];
+
+  const tsconfigPath = resolve(pkgDir, 'tsconfig.json');
+  const project = new Project({
+    tsConfigFilePath: existsSync(tsconfigPath) ? tsconfigPath : undefined,
+    skipAddingFilesFromTsConfig: true,
+  });
+
+  for (const ep of entryPoints) project.addSourceFileAtPath(ep.filePath);
+  project.resolveSourceFileDependencies();
+
+  const allItems: ItemMeta[] = [];
+  for (const ep of entryPoints) {
+    const sourceFile = project.getSourceFile(ep.filePath);
+    if (!sourceFile) continue;
+    allItems.push(...collectExportedItems(sourceFile, ep.subpath));
+  }
+
+  const seen = new Set<string>();
+  const uniqueItems = allItems.filter((item) => {
+    const key = `${item.entryPoint}:${item.name}`;
+    if (seen.has(key)) return false;
+    seen.add(key);
+    return true;
+  });
+
+  const groupedItems = groupCoLocatedTypes(uniqueItems);
+
+  const categoryMap = new Map<string, ItemMeta[]>();
+  for (const item of groupedItems) {
+    const cat = inferCategoryFromItem(item);
+    const existing = categoryMap.get(cat) ?? [];
+    existing.push(item);
+    categoryMap.set(cat, existing);
+  }
+
+  return Array.from(categoryMap.entries())
+    .map(([name, items]) => ({
+      name,
+      slug: slugify(name),
+      items: items.sort((a, b) => a.name.localeCompare(b.name)),
+    }))
+    .sort((a, b) => a.name.localeCompare(b.name));
+}
+
+// ── Component Extraction ───────────────────────────────────────────────────────
+
+/** Pull a named `<script>` block's inner content out of an SFC string. */
+function extractScriptBlock(sfc: string, setup: boolean): string {
+  // Match <script ... lang="ts"> ... </script>; distinguish setup vs plain.
+  const re = /<script\b([^>]*)>([\s\S]*?)<\/script>/g;
+  let match: RegExpExecArray | null;
+  while ((match = re.exec(sfc)) !== null) {
+    const attrs = match[1] ?? '';
+    const isSetup = /\bsetup\b/.test(attrs);
+    if (isSetup === setup) return match[2] ?? '';
+  }
+  return '';
+}
+
+/** Parse `defineEmits<{ 'a': [x: T]; b: [] }>()` from a setup block. */
+function extractEmits(setupScript: string): EmitMeta[] {
+  const m = setupScript.match(/defineEmits<\{([\s\S]*?)\}>\s*\(\s*\)/);
+  if (!m) return [];
+  const body = m[1] ?? '';
+  const emits: EmitMeta[] = [];
+  // Split on ; or newlines, then match `name: [payload]`
+  for (const raw of body.split(/[;\n]/)) {
+    const line = raw.trim();
+    if (!line) continue;
+    const em = line.match(/^['"]?([\w:-]+)['"]?\s*:\s*(\[[\s\S]*\])\s*$/);
+    if (em) emits.push({ name: em[1]!, payload: em[2]!, description: '' });
+  }
+  return emits;
+}
+
+let partProjectCounter = 0;
+
+/** Parse the `XxxProps` interface from a `.vue` part using ts-morph in-memory. */
+function extractPartProps(plainScript: string): { props: PropertyMeta[]; description: string } {
+  if (!plainScript.trim()) return { props: [], description: '' };
+
+  // Strip imports — types they reference are unresolved here, which is fine:
+  // getText() on property type nodes still yields the written type text.
+  const project = new Project({ useInMemoryFileSystem: true, skipAddingFilesFromTsConfig: true, compilerOptions: { allowJs: true, skipLibCheck: true } });
+  const sf = project.createSourceFile(`__part_${partProjectCounter++}.ts`, plainScript);
+
+  const propsIface = sf.getInterfaces().find(i => i.getName().endsWith('Props'));
+  if (!propsIface) return { props: [], description: '' };
+
+  const jsdocs = propsIface.getJsDocs();
+  const description = getDescription(jsdocs, getJsDocTags(jsdocs));
+
+  const props = propsIface.getProperties().map((p) => {
+    const pj = p.getJsDocs();
+    const ptags = getJsDocTags(pj);
+    return {
+      name: p.getName(),
+      // Use the written type text (declared), not the resolved type.
+      type: p.getTypeNode()?.getText() ?? p.getType().getText(p),
+      description: getDescription(pj, ptags),
+      optional: p.hasQuestionToken(),
+      defaultValue: getTagValue(ptags, 'default') || null,
+      readonly: p.isReadonly(),
+    } satisfies PropertyMeta;
+  });
+
+  return { props, description };
+}
+
+/** Read default-export component names from an index.ts barrel, in source order. */
+function readPartOrder(indexPath: string): string[] {
+  if (!existsSync(indexPath)) return [];
+  const src = readFileSync(indexPath, 'utf-8');
+  const order: string[] = [];
+  const re = /export\s*\{\s*default\s+as\s+(\w+)\s*\}\s*from\s*['"]\.\/[\w.-]+\.vue['"]/g;
+  let m: RegExpExecArray | null;
+  while ((m = re.exec(src)) !== null) order.push(m[1]!);
+  return order;
+}
+
+function roleFromName(componentName: string, base: string): string {
+  // AccordionRoot + base "Accordion" → "Root"; AccordionItem → "Item"
+  let role = componentName;
+  if (componentName.startsWith(base)) role = componentName.slice(base.length);
+  return role || 'Root';
+}
+
+function buildComponents(pkgDir: string): ComponentMeta[] {
+  const srcDir = resolve(pkgDir, 'src');
+  if (!existsSync(srcDir)) return [];
+
+  const components: ComponentMeta[] = [];
+
+  for (const entry of readdirSync(srcDir, { withFileTypes: true })) {
+    if (!entry.isDirectory()) continue;
+    const dir = resolve(srcDir, entry.name);
+
+    // A component group is any dir that ships at least one .vue file.
+    const vueFiles = readdirSync(dir).filter(f => f.endsWith('.vue'));
+    if (vueFiles.length === 0) continue;
+
+    const slug = entry.name;
+    const base = toPascalCase(slug);
+
+    // Preserve the anatomy order declared in index.ts; fall back to filenames.
+    const order = readPartOrder(resolve(dir, 'index.ts'));
+    const orderedFiles = [
+      ...order.map(name => `${name}.vue`).filter(f => vueFiles.includes(f)),
+      ...vueFiles.filter(f => !order.includes(f.replace(/\.vue$/, ''))),
+    ];
+
+    const parts: ComponentPartMeta[] = [];
+    let groupDescription = '';
+
+    for (const file of orderedFiles) {
+      const sfc = readFileSync(resolve(dir, file), 'utf-8');
+      const plain = extractScriptBlock(sfc, false);
+      const setup = extractScriptBlock(sfc, true);
+      const { props, description } = extractPartProps(plain);
+      const name = file.replace(/\.vue$/, '');
+      const role = roleFromName(name, base);
+      if (role === 'Root' && description && !groupDescription) groupDescription = description;
+      parts.push({ name, role, description, props, emits: extractEmits(setup) });
+    }
+
+    const entryPoint = `./${slug}`;
+    const demoPath = resolve(dir, 'demo.vue');
+    const hasDemo = existsSync(demoPath);
+
+    components.push({
+      name: base,
+      slug,
+      description: groupDescription,
+      entryPoint,
+      parts,
+      hasDemo,
+      demoSource: hasDemo ? readFileSync(demoPath, 'utf-8') : '',
+      sourcePath: relative(ROOT, dir),
+    });
+  }
+
+  return components.sort((a, b) => a.name.localeCompare(b.name));
+}
+
+// ── Guide Extraction ───────────────────────────────────────────────────────────
+
+/** Resolve guide source patterns (exact files + single-level `dir/*.md`). */
+function resolveGuideFiles(pkgDir: string, patterns: string[]): string[] {
+  const files: string[] = [];
+  for (const pattern of patterns) {
+    if (pattern.includes('*')) {
+      const dir = resolve(pkgDir, dirname(pattern));
+      if (!existsSync(dir)) continue;
+      const ext = pattern.slice(pattern.lastIndexOf('.'));
+      const matched = readdirSync(dir)
+        .filter(f => f.endsWith(ext) && f.toLowerCase() !== 'readme.md')
+        .sort()
+        .map(f => resolve(dir, f));
+      files.push(...matched);
+    }
+    else {
+      const full = resolve(pkgDir, pattern);
+      if (existsSync(full)) files.push(full);
+    }
+  }
+  return files;
+}
+
+function titleFromMarkdown(md: string, fallback: string): string {
+  const m = md.match(/^\s*#\s+(\S.*)$/m);
+  return m ? m[1]!.trim() : fallback;
+}
+
+function buildGuideSections(pkgDir: string, patterns: string[], pkgDescription: string): GuideSection[] {
+  const files = resolveGuideFiles(pkgDir, patterns);
+  const sections: GuideSection[] = [];
+
+  for (const file of files) {
+    const markdown = readFileSync(file, 'utf-8');
+    const fileSlug = basename(file).replace(/\.md$/i, '');
+    const slug = /readme/i.test(fileSlug) ? 'overview' : slugify(fileSlug);
+    const fallbackTitle = slug === 'overview' ? 'Overview' : fileSlug;
+    sections.push({ title: titleFromMarkdown(markdown, fallbackTitle), slug, markdown });
+  }
+
+  // Ensure an overview exists even when there's no README.
+  if (!sections.some(s => s.slug === 'overview')) {
+    sections.unshift({
+      title: 'Overview',
+      slug: 'overview',
+      markdown: `# Overview\n\n${pkgDescription || 'Documentation for this package.'}\n`,
+    });
+  }
+  else {
+    // Move overview to the front.
+    sections.sort((a, b) => (a.slug === 'overview' ? -1 : b.slug === 'overview' ? 1 : 0));
+  }
+
+  return sections;
+}
+
+// ── Hand-authored .vue doc sections ─────────────────────────────────────────────
+
+/** Read an optional `<!-- key: value -->` directive from a doc SFC. */
+function readDocDirective(src: string, key: string): string | undefined {
+  const m = src.match(new RegExp(`<!--\\s*${key}\\s*:\\s*([^]*?)\\s*-->`));
+  return m ? m[1]!.trim() : undefined;
+}
+
+function humanizeTitle(slug: string): string {
+  return slug
+    .split(/[-_]/)
+    .filter(Boolean)
+    .map(w => w.charAt(0).toUpperCase() + w.slice(1))
+    .join(' ');
+}
+
+/**
+ * Discover hand-authored documentation pages from `<pkg>/docs/*.vue`.
+ *  - `intro.vue` becomes the package landing (isIntro, sorted first).
+ *  - Other files are ordered by a `<!-- order: N -->` directive or a numeric
+ *    filename prefix (`02-concepts.vue`); titles come from `<!-- title: … -->`
+ *    or the humanized filename.
+ */
+function buildDocSections(pkgDir: string): DocSection[] {
+  const docsDir = resolve(pkgDir, 'docs');
+  if (!existsSync(docsDir)) return [];
+
+  const sections: DocSection[] = [];
+  for (const file of readdirSync(docsDir)) {
+    if (!file.endsWith('.vue')) continue;
+
+    const full = resolve(docsDir, file);
+    const src = readFileSync(full, 'utf-8');
+    const base = file.replace(/\.vue$/, '');
+    const isIntro = base === 'intro';
+
+    // Optional numeric prefix on the filename, e.g. "02-concepts" or "02.concepts".
+    const prefixed = base.match(/^(\d+)[-.](.+)$/);
+    const rawName = prefixed ? prefixed[2]! : base;
+
+    const orderDirective = readDocDirective(src, 'order');
+    const order = isIntro
+      ? -1
+      : orderDirective !== undefined
+        ? Number(orderDirective)
+        : prefixed
+          ? Number(prefixed[1])
+          : 100;
+
+    const slug = isIntro ? 'introduction' : slugify(rawName);
+    const title = readDocDirective(src, 'title')
+      ?? (isIntro ? 'Introduction' : humanizeTitle(rawName));
+
+    sections.push({ title, slug, order, isIntro, sourcePath: relative(ROOT, full) });
+  }
+
+  return sections.sort((a, b) => a.order - b.order || a.title.localeCompare(b.title));
+}
+
+// ── Package Extraction ─────────────────────────────────────────────────────────
+
+function extractPackage(config: PackageConfig): PackageMeta | null {
+  const pkgDir = resolve(ROOT, config.path);
+  const pkgJsonPath = resolve(pkgDir, 'package.json');
+
+  if (!existsSync(pkgJsonPath)) {
+    console.warn(`[extractor] package.json not found: ${pkgJsonPath}`);
+    return null;
+  }
+
+  const pkgJson = JSON.parse(readFileSync(pkgJsonPath, 'utf-8'));
+
+  const base: PackageMeta = {
+    name: pkgJson.name,
+    version: pkgJson.version,
+    description: pkgJson.description ?? '',
+    slug: config.slug,
+    kind: config.kind,
+    group: config.group,
+    entryPoints: Object.keys(pkgJson.exports ?? { '.': {} }),
+    categories: [],
+    components: [],
+    sections: [],
+    docs: buildDocSections(pkgDir),
+  };
+
+  if (config.kind === 'api') {
+    base.categories = buildApiCategories(pkgDir);
+  }
+  else if (config.kind === 'components') {
+    base.components = buildComponents(pkgDir);
+  }
+  else if (config.kind === 'guide') {
+    base.sections = buildGuideSections(pkgDir, config.guideSources ?? ['README.md'], base.description);
+  }
+
+  return base;
+}
+
+// ── Main ───────────────────────────────────────────────────────────────────
+
+export function extract(): DocsMetadata {
+  console.log('[extractor] Starting metadata extraction...');
+
+  const packages: PackageMeta[] = [];
+
+  for (const config of PACKAGES) {
+    const pkg = extractPackage(config);
+    if (!pkg) continue;
+
+    let summary: string;
+    if (pkg.kind === 'api') {
+      const itemCount = pkg.categories.reduce((s, c) => s + c.items.length, 0);
+      summary = `${itemCount} items / ${pkg.categories.length} categories`;
+    }
+    else if (pkg.kind === 'components') {
+      const partCount = pkg.components.reduce((s, c) => s + c.parts.length, 0);
+      summary = `${pkg.components.length} components / ${partCount} parts`;
+    }
+    else {
+      summary = `${pkg.sections.length} sections`;
+    }
+    console.log(`[extractor]   → ${pkg.name}@${pkg.version} [${pkg.kind}]: ${summary}`);
+    packages.push(pkg);
+  }
+
+  console.log(`[extractor] Done — ${packages.length} packages`);
+
+  return { packages, generatedAt: new Date().toISOString() };
+}
+
+// Allow running directly — prints metadata as JSON to stdout
+if (import.meta.filename === process.argv[1]) {
+  console.log(JSON.stringify(extract(), null, 2));
+}
diff --git a/docs/modules/extractor/index.ts b/docs/modules/extractor/index.ts
new file mode 100644
index 0000000..47968ea
--- /dev/null
+++ b/docs/modules/extractor/index.ts
@@ -0,0 +1,249 @@
+/**
+ * Nuxt module that extracts TypeScript metadata from source packages
+ * and provides it as a virtual module `#docs/metadata`.
+ *
+ * Runs extraction at build start and makes the data available to all
+ * pages/components via `import metadata from '#docs/metadata'`.
+ */
+
+import { addTemplate, createResolver, defineNuxtModule } from '@nuxt/kit';
+import { dirname, resolve } from 'node:path';
+import type { DocsMetadata } from './types';
+
+export default defineNuxtModule({
+  meta: {
+    name: 'docs-extractor',
+    configKey: 'docsExtractor',
+  },
+
+  async setup(_options, nuxt) {
+    const { resolve: resolveModule } = createResolver(import.meta.url);
+    const ROOT = resolve(import.meta.dirname, '..', '..', '..');
+
+    // Run extraction immediately during setup so metadata is available
+    // when templates are resolved (app:templates phase runs before build:before)
+    console.log('[docs-extractor] Running metadata extraction...');
+    const { extract } = await import('./extract');
+    const metadata: DocsMetadata = extract();
+
+    // Add Vite resolve aliases for source packages so demo.vue imports resolve.
+    // The vue/toolkit package uses `@/` path aliases (e.g. `@/composables/...`).
+    // We prepend them via vite:extendConfig so they take priority over Nuxt's
+    // built-in `@` → srcDir alias.
+    const vueSrc = resolve(ROOT, 'vue/toolkit/src');
+
+    // Resolve `@robonen/*` workspace imports (pulled in transitively by demos and
+    // doc sections) from SOURCE rather than built `dist/`. Without this the docs
+    // build depends on every workspace package being built first — which CI does
+    // not guarantee (e.g. a composable importing `@robonen/platform/multi` fails
+    // to resolve when platform's dist is absent). Prefix aliases also cover
+    // subpath exports (`@robonen/platform/multi` → `core/platform/src/multi`).
+    const workspaceSrc: Record<string, string> = {
+      '@robonen/stdlib': 'core/stdlib/src',
+      '@robonen/platform': 'core/platform/src',
+      '@robonen/fetch': 'core/fetch/src',
+      '@robonen/encoding': 'core/encoding/src',
+      '@robonen/crdt': 'core/crdt/src',
+      '@robonen/editor': 'vue/editor/src',
+      '@robonen/primitives': 'vue/primitives/src',
+      '@robonen/vue': vueSrc,
+    };
+
+    nuxt.hook('vite:extendConfig', (config) => {
+      const existing = config.resolve?.alias;
+      const sourceAliases = [
+        { find: '@/composables', replacement: resolve(vueSrc, 'composables') },
+        { find: '@/types', replacement: resolve(vueSrc, 'types') },
+        { find: '@/utils', replacement: resolve(vueSrc, 'utils') },
+        ...Object.entries(workspaceSrc).map(([find, rel]) => ({ find, replacement: resolve(ROOT, rel) })),
+      ];
+
+      if (Array.isArray(existing)) {
+        existing.unshift(...sourceAliases);
+      }
+      else {
+        config.resolve ??= {};
+        config.resolve.alias = [
+          ...sourceAliases,
+          ...Object.entries(existing ?? {}).map(([find, replacement]) => ({ find, replacement: replacement as string })),
+        ];
+      }
+    });
+
+    // Provide metadata as a virtual template
+    addTemplate({
+      filename: 'docs-metadata.ts',
+      write: true,
+      getContents: () => {
+        const json = JSON.stringify(metadata, null, 2);
+        return `export default ${json} as const;`;
+      },
+    });
+
+    // Register the alias for the virtual module
+    nuxt.options.alias['#docs/metadata'] = resolve(nuxt.options.buildDir, 'docs-metadata');
+
+    // Expose the same metadata to Nitro so server routes (e.g. the MCP endpoint
+    // at `server/routes/mcp.post.ts`) can import it without re-running extraction.
+    nuxt.hook('nitro:config', (nitroConfig: { virtual?: Record<string, string | (() => string)> }) => {
+      nitroConfig.virtual ??= {};
+      // Base64-encode the payload so Nitro's build-time text replacements (e.g.
+      // `typeof window` → "undefined") can't corrupt source snippets embedded in
+      // the metadata JSON (demo sources, examples, type signatures).
+      const encoded = Buffer.from(JSON.stringify(metadata), 'utf8').toString('base64');
+      nitroConfig.virtual['#docs/server-metadata'] = () => `export default JSON.parse(Buffer.from(${JSON.stringify(encoded)}, 'base64').toString('utf8'))`;
+    });
+
+    // Add types reference
+    addTemplate({
+      filename: 'docs-metadata-types.d.ts',
+      write: true,
+      getContents: () => {
+        const typesPath = resolveModule('./types');
+        return `
+import type { DocsMetadata } from '${typesPath}';
+declare module '#docs/metadata' {
+  const metadata: DocsMetadata;
+  export default metadata;
+}
+`;
+      },
+    });
+
+    // Register prerender routes from metadata — one detail route per documented
+    // leaf, regardless of package kind (api items / components / guide sections).
+    nuxt.hook('prerender:routes', async ({ routes }: { routes: Set<string> }) => {
+      if (metadata.packages.length === 0) return;
+
+      for (const pkg of metadata.packages) {
+        routes.add(`/${pkg.slug}`);
+
+        // Hand-authored doc sections (any kind). The intro renders on the
+        // package landing, so only non-intro sections get their own route.
+        for (const section of pkg.docs)
+          if (!section.isIntro) routes.add(`/${pkg.slug}/${section.slug}`);
+
+        if (pkg.kind === 'api') {
+          for (const category of pkg.categories)
+            for (const item of category.items)
+              routes.add(`/${pkg.slug}/${item.slug}`);
+        }
+        else if (pkg.kind === 'components') {
+          for (const component of pkg.components)
+            routes.add(`/${pkg.slug}/${component.slug}`);
+        }
+        else if (pkg.kind === 'guide') {
+          for (const section of pkg.sections)
+            routes.add(`/${pkg.slug}/${section.slug}`);
+        }
+      }
+
+      console.log(`[docs-extractor] Registered ${routes.size} routes for prerender`);
+    });
+
+    // Generate demo component import map
+    addTemplate({
+      filename: 'docs-demos.ts',
+      write: true,
+      getContents: () => {
+        const entries: string[] = [];
+        // An item re-exported from several entry points yields the same key more
+        // than once; dedupe so the generated object literal has no duplicate keys.
+        const seen = new Set<string>();
+        const add = (key: string, demoPath: string) => {
+          if (seen.has(key)) return;
+          seen.add(key);
+          entries.push(`  '${key}': defineAsyncComponent(() => import('${demoPath}')),`);
+        };
+
+        for (const pkg of metadata.packages) {
+          // api items
+          for (const cat of pkg.categories) {
+            for (const item of cat.items) {
+              if (item.hasDemo) {
+                const demoPath = resolve(ROOT, dirname(item.sourcePath), 'demo.vue');
+                add(`${pkg.slug}/${item.slug}`, demoPath);
+              }
+            }
+          }
+          // component groups
+          for (const component of pkg.components) {
+            if (component.hasDemo) {
+              const demoPath = resolve(ROOT, component.sourcePath, 'demo.vue');
+              add(`${pkg.slug}/${component.slug}`, demoPath);
+            }
+          }
+        }
+
+        if (entries.length === 0) {
+          return `import type { Component } from 'vue';\nexport const demos: Record<string, Component> = {};\n`;
+        }
+
+        return [
+          `import { defineAsyncComponent } from 'vue';`,
+          `import type { Component } from 'vue';`,
+          ``,
+          `export const demos: Record<string, Component> = {`,
+          ...entries,
+          `};`,
+          ``,
+        ].join('\n');
+      },
+    });
+
+    nuxt.options.alias['#docs/demos'] = resolve(nuxt.options.buildDir, 'docs-demos');
+
+    addTemplate({
+      filename: 'docs-demos-types.d.ts',
+      write: true,
+      getContents: () => `
+import type { Component } from 'vue';
+declare module '#docs/demos' {
+  export const demos: Record<string, Component>;
+}
+`,
+    });
+
+    // Generate hand-authored doc-section import map (`<pkg>/docs/*.vue`)
+    addTemplate({
+      filename: 'docs-sections.ts',
+      write: true,
+      getContents: () => {
+        const entries: string[] = [];
+        for (const pkg of metadata.packages) {
+          for (const section of pkg.docs) {
+            const sectionPath = resolve(ROOT, section.sourcePath);
+            entries.push(`  '${pkg.slug}/${section.slug}': defineAsyncComponent(() => import('${sectionPath}')),`);
+          }
+        }
+
+        if (entries.length === 0) {
+          return `import type { Component } from 'vue';\nexport const sections: Record<string, Component> = {};\n`;
+        }
+
+        return [
+          `import { defineAsyncComponent } from 'vue';`,
+          `import type { Component } from 'vue';`,
+          ``,
+          `export const sections: Record<string, Component> = {`,
+          ...entries,
+          `};`,
+          ``,
+        ].join('\n');
+      },
+    });
+
+    nuxt.options.alias['#docs/sections'] = resolve(nuxt.options.buildDir, 'docs-sections');
+
+    addTemplate({
+      filename: 'docs-sections-types.d.ts',
+      write: true,
+      getContents: () => `
+import type { Component } from 'vue';
+declare module '#docs/sections' {
+  export const sections: Record<string, Component>;
+}
+`,
+    });
+  },
+});
diff --git a/docs/modules/extractor/types.ts b/docs/modules/extractor/types.ts
new file mode 100644
index 0000000..f9f5533
--- /dev/null
+++ b/docs/modules/extractor/types.ts
@@ -0,0 +1,217 @@
+/**
+ * Metadata types for the documentation extractor.
+ *
+ * The docs site is "flexible": every package declares a {@link PackageKind}
+ * and is rendered with a layout that fits its nature —
+ *  - `api`        → reference of functions / classes / types (from JSDoc)
+ *  - `components` → component gallery with per-part anatomy (props/emits/slots)
+ *  - `guide`      → prose guide rendered from co-located Markdown
+ */
+
+export interface DocsMetadata {
+  packages: PackageMeta[];
+  generatedAt: string;
+}
+
+/** How a package's documentation should be presented. */
+export type PackageKind = 'api' | 'components' | 'guide';
+
+/** Top-level grouping used for sidebar / landing organisation. */
+export type PackageGroup = 'core' | 'vue' | 'configs' | 'infra';
+
+export interface PackageMeta {
+  /** Package name from package.json, e.g. "@robonen/stdlib" */
+  name: string;
+  /** Package version */
+  version: string;
+  /** Package description from package.json */
+  description: string;
+  /** URL-friendly slug derived from package name, e.g. "stdlib" */
+  slug: string;
+  /** Presentation kind — drives which layout the page uses */
+  kind: PackageKind;
+  /** Sidebar / landing group */
+  group: PackageGroup;
+  /** Subpath export entries (e.g. "." or "./browsers") */
+  entryPoints: string[];
+
+  // ── kind: 'api' ──────────────────────────────────────────────────────────
+  /** Documented API items grouped by category (kind === 'api') */
+  categories: CategoryMeta[];
+
+  // ── kind: 'components' ─────────────────────────────────────────────────────
+  /** Documented component groups (kind === 'components') */
+  components: ComponentMeta[];
+
+  // ── kind: 'guide' ──────────────────────────────────────────────────────────
+  /** Prose sections rendered from Markdown (kind === 'guide') */
+  sections: GuideSection[];
+
+  // ── any kind ───────────────────────────────────────────────────────────────
+  /**
+   * Hand-authored `.vue` documentation pages discovered from `<pkg>/docs/*.vue`.
+   * Independent of `kind` — an `api` package can still ship a rich intro and
+   * several prose sections alongside its auto-generated reference.
+   */
+  docs: DocSection[];
+}
+
+// ── API kind ─────────────────────────────────────────────────────────────────
+
+export interface CategoryMeta {
+  /** Category name from @category JSDoc tag or directory name */
+  name: string;
+  /** URL-friendly slug */
+  slug: string;
+  /** Items in this category */
+  items: ItemMeta[];
+}
+
+export interface ItemMeta {
+  /** Export name */
+  name: string;
+  /** URL-friendly slug (camelCase → kebab-case) */
+  slug: string;
+  /** Kind of export */
+  kind: 'function' | 'class' | 'type' | 'interface' | 'enum' | 'variable';
+  /** Description from @description tag or first JSDoc line */
+  description: string;
+  /** Version when this item was introduced */
+  since: string;
+  /** Full TypeScript signature(s) — supports overloads */
+  signatures: string[];
+  /** Function/method parameters */
+  params: ParamMeta[];
+  /** Return type description */
+  returns: ReturnMeta | null;
+  /** Template/generic type parameters */
+  typeParams: TypeParamMeta[];
+  /** Code examples from @example tags */
+  examples: string[];
+  /** Class methods (only for kind === 'class') */
+  methods: MethodMeta[];
+  /** Class/interface properties (only for kind === 'class' or 'interface') */
+  properties: PropertyMeta[];
+  /** Whether a demo.vue file exists alongside */
+  hasDemo: boolean;
+  /** Raw source code of the demo.vue file (for syntax-highlighted display) */
+  demoSource: string;
+  /** Whether an index.test.ts file exists alongside */
+  hasTests: boolean;
+  /** Related types/interfaces co-located in the same module directory */
+  relatedTypes: ItemMeta[];
+  /** Relative path to the source file from repo root */
+  sourcePath: string;
+  /** Subpath export this belongs to (e.g. "." or "./browsers") */
+  entryPoint: string;
+}
+
+// ── Components kind ────────────────────────────────────────────────────────────
+
+export interface ComponentMeta {
+  /** Display name of the component group, e.g. "Accordion" */
+  name: string;
+  /** URL-friendly slug, e.g. "accordion" */
+  slug: string;
+  /** Short description (from README heading or first JSDoc) */
+  description: string;
+  /** Subpath export, e.g. "./accordion" */
+  entryPoint: string;
+  /** Ordered parts that compose the anatomy (Root, Item, Trigger, …) */
+  parts: ComponentPartMeta[];
+  /** Whether a demo.vue exists for the group */
+  hasDemo: boolean;
+  /** Raw demo source */
+  demoSource: string;
+  /** Relative path to the component directory from repo root */
+  sourcePath: string;
+}
+
+export interface ComponentPartMeta {
+  /** Component name, e.g. "AccordionRoot" */
+  name: string;
+  /** Short role label derived from the suffix (Root, Item, Trigger…) */
+  role: string;
+  /** Description from the Props interface JSDoc */
+  description: string;
+  /** Props parsed from the `XxxProps` interface */
+  props: PropertyMeta[];
+  /** Emitted events parsed from `defineEmits` */
+  emits: EmitMeta[];
+}
+
+export interface EmitMeta {
+  /** Event name, e.g. "update:modelValue" */
+  name: string;
+  /** Payload signature, e.g. "[value: string]" */
+  payload: string;
+  /** Description, if documented */
+  description: string;
+}
+
+// ── Guide kind ─────────────────────────────────────────────────────────────────
+
+export interface GuideSection {
+  /** Heading-derived title, e.g. "imports preset" */
+  title: string;
+  /** URL-friendly slug, e.g. "imports" */
+  slug: string;
+  /** Raw Markdown content (rendered client-side) */
+  markdown: string;
+}
+
+// ── Hand-authored .vue doc sections (any kind) ──────────────────────────────────
+
+export interface DocSection {
+  /** Display title (from a `<!-- title: … -->` comment or the filename). */
+  title: string;
+  /** URL-friendly slug, e.g. "introduction" or "concepts". */
+  slug: string;
+  /** Sort order (from a `<!-- order: N -->` comment or a numeric filename prefix). */
+  order: number;
+  /** `true` for `docs/intro.vue` — rendered as the package landing page. */
+  isIntro: boolean;
+  /** Relative path to the `.vue` file from repo root (for the GitHub source link). */
+  sourcePath: string;
+}
+
+// ── Shared leaf types ──────────────────────────────────────────────────────────
+
+export interface ParamMeta {
+  name: string;
+  type: string;
+  description: string;
+  optional: boolean;
+  defaultValue: string | null;
+}
+
+export interface ReturnMeta {
+  type: string;
+  description: string;
+}
+
+export interface TypeParamMeta {
+  name: string;
+  constraint: string | null;
+  default: string | null;
+  description: string;
+}
+
+export interface MethodMeta {
+  name: string;
+  description: string;
+  signatures: string[];
+  params: ParamMeta[];
+  returns: ReturnMeta | null;
+  /** Visibility: public, protected, private */
+  visibility: string;
+}
+
+export interface PropertyMeta {
+  name: string;
+  type: string;
+  description: string;
+  optional: boolean;
+  defaultValue: string | null;
+  readonly: boolean;
+}
diff --git a/docs/modules/mcp/README.md b/docs/modules/mcp/README.md
new file mode 100644
index 0000000..708a4d1
--- /dev/null
+++ b/docs/modules/mcp/README.md
@@ -0,0 +1,65 @@
+# Docs MCP server
+
+An [MCP](https://modelcontextprotocol.io) server that exposes the `@robonen/tools`
+documentation to any MCP client (Claude Code, Claude Desktop, Cursor, …).
+
+It is **served by the Nuxt/Nitro docs server itself** — there is no separate
+process. The documentation metadata is the same data that renders the docs site
+(produced by [`../extractor`](../extractor) at build time and injected into Nitro
+as the `#docs/server-metadata` virtual), so what an agent reads is always in sync
+with the site.
+
+## Run
+
+Start the docs server, and the MCP endpoint comes up with it:
+
+```sh
+pnpm docs:dev      # → http://localhost:3000, MCP at http://localhost:3000/mcp
+```
+
+`POST /mcp` speaks the MCP **Streamable HTTP** transport (stateless, JSON
+responses). The route lives at [`../../server/routes/mcp.post.ts`](../../server/routes/mcp.post.ts).
+
+## Register with a client
+
+A project-scoped [`.mcp.json`](../../../.mcp.json) at the repo root already points
+Claude Code at the endpoint — start the docs server, then approve the
+`robonen-docs` server:
+
+```json
+{
+  "mcpServers": {
+    "robonen-docs": { "type": "http", "url": "http://localhost:3000/mcp" }
+  }
+}
+```
+
+## Tools
+
+| Tool            | Arguments                       | Returns                                                                 |
+| --------------- | ------------------------------- | ----------------------------------------------------------------------- |
+| `list_packages` | —                               | Every documented package grouped by core / vue / configs / infra.       |
+| `search_docs`   | `query`, `limit?`               | Ranked `package/slug` matches across items, components and guides.      |
+| `get_package`   | `slug`                          | A package's table of contents (categories, components or sections).     |
+| `get_doc`       | `package`, `name`               | Full reference for one item: signatures, params, examples, props/emits. |
+
+`name` accepts either the URL slug (`use-clipboard`) or the exported name
+(`useClipboard`). Slugs are unique within a package; case-only collisions (e.g.
+the `useProjection` function vs the `UseProjection` type) are disambiguated with
+a kind suffix (`use-projection-type`).
+
+## Resources
+
+- `robonen-docs://index` — the documentation index.
+- `robonen-docs://{package}/{slug}` — full Markdown for a single documented item
+  (listable, one entry per leaf).
+
+## Layout
+
+| File                                  | Responsibility                                                          |
+| ------------------------------------- | ----------------------------------------------------------------------- |
+| `../../server/routes/mcp.post.ts`     | Nitro HTTP route — bridges the request to the MCP transport.            |
+| `create-server.ts`                    | Builds the configured `McpServer` (tools + resources) from metadata.   |
+| `docs-index.ts`                       | Pure query layer — flatten, unique-slug, search, resolve.              |
+| `format.ts`                           | Markdown renderers for tool/resource payloads.                          |
+| `*.test.ts`                           | Unit tests for the query layer.                                         |
diff --git a/docs/modules/mcp/create-server.ts b/docs/modules/mcp/create-server.ts
new file mode 100644
index 0000000..58b71b1
--- /dev/null
+++ b/docs/modules/mcp/create-server.ts
@@ -0,0 +1,160 @@
+/**
+ * Builds a configured MCP server exposing the @robonen/tools documentation.
+ *
+ * Transport-agnostic: the same server is mounted on the Nuxt/Nitro HTTP route
+ * (see `docs/server/routes/mcp.post.ts`). Given already-extracted
+ * {@link DocsMetadata}, it registers the docs tools and resources.
+ */
+
+import { McpServer, ResourceTemplate } from '@modelcontextprotocol/sdk/server/mcp.js';
+import { z } from 'zod';
+import type { DocsMetadata } from '../extractor/types';
+import type { Leaf } from './docs-index';
+import { buildLeaves, getPackage, resolveEntry, search } from './docs-index';
+import {
+  renderDocEntry,
+  renderPackageList,
+  renderPackageOverview,
+  renderSearchResults,
+} from './format';
+
+const INSTRUCTIONS = [
+  'Documentation for the @robonen/tools monorepo (core utilities, Vue composables &',
+  'primitives, shared configs). Workflow: call `list_packages` to see what exists,',
+  '`search_docs` to find an item by keyword, `get_package` for a package\'s table of',
+  'contents, and `get_doc` for the full reference (signatures, params, examples,',
+  'props/emits, demo source) of one item. Slugs are kebab-case; names are as exported.',
+].join(' ');
+
+/** Wrap a not-found message as a non-fatal tool error. */
+function toolError(message: string) {
+  return { content: [{ type: 'text' as const, text: message }], isError: true };
+}
+
+/** Wrap rendered Markdown as a successful tool result. */
+function toolText(text: string) {
+  return { content: [{ type: 'text' as const, text }] };
+}
+
+function registerTools(server: McpServer, metadata: DocsMetadata, leaves: Leaf[]): void {
+  server.registerTool(
+    'list_packages',
+    {
+      title: 'List documentation packages',
+      description:
+        'List every documented @robonen/tools package (core, vue, configs, infra) with its kind, '
+        + 'version, description and entry count. Start here to discover what is available.',
+      inputSchema: {},
+    },
+    async () => toolText(renderPackageList(metadata)),
+  );
+
+  server.registerTool(
+    'search_docs',
+    {
+      title: 'Search documentation',
+      description:
+        'Full-text search across all documented functions, classes, types, components and guide '
+        + 'sections. Returns ranked matches as `package/slug` references to pass to get_doc.',
+      inputSchema: {
+        query: z.string().min(1).describe('Search terms, e.g. "debounce", "clipboard", "eslint imports".'),
+        limit: z.number().int().min(1).max(50).optional().describe('Maximum number of results (default 20).'),
+      },
+    },
+    async ({ query, limit }) => toolText(renderSearchResults(search(leaves, query, limit ?? 20), query)),
+  );
+
+  server.registerTool(
+    'get_package',
+    {
+      title: 'Get a package overview',
+      description:
+        'Show a package\'s full table of contents: categories and items (api), components and their '
+        + 'parts (components), or sections (guide). Pass the package slug from list_packages.',
+      inputSchema: {
+        slug: z.string().min(1).describe('Package slug, e.g. "stdlib", "toolkit", "primitives".'),
+      },
+    },
+    async ({ slug }) => {
+      const pkg = getPackage(metadata, slug);
+      if (!pkg) return toolError(`No package with slug "${slug}". Call list_packages to see available slugs.`);
+      return toolText(renderPackageOverview(pkg));
+    },
+  );
+
+  server.registerTool(
+    'get_doc',
+    {
+      title: 'Get full documentation for an item',
+      description:
+        'Return the complete documentation for a single function, class, type, component or guide '
+        + 'section: signatures, parameters, return type, examples, props/emits, demo source and the '
+        + 'source path. Pass the package slug plus the item slug or its exported name.',
+      inputSchema: {
+        package: z.string().min(1).describe('Package slug, e.g. "stdlib".'),
+        name: z.string().min(1).describe('Item slug or exported name, e.g. "clamp" or "useClipboard".'),
+      },
+    },
+    async ({ package: pkgSlug, name }) => {
+      const entry = resolveEntry(leaves, pkgSlug, name);
+      if (!entry) {
+        return toolError(
+          `No documented item "${name}" in package "${pkgSlug}". Call get_package("${pkgSlug}") to list its items.`,
+        );
+      }
+      return toolText(renderDocEntry(entry));
+    },
+  );
+}
+
+function registerResources(server: McpServer, metadata: DocsMetadata, leaves: Leaf[]): void {
+  // The whole table of contents as a single browsable resource.
+  server.registerResource(
+    'docs-index',
+    'robonen-docs://index',
+    {
+      title: '@robonen/tools documentation index',
+      description: 'Table of contents for every documented package.',
+      mimeType: 'text/markdown',
+    },
+    async uri => ({
+      contents: [{ uri: uri.href, mimeType: 'text/markdown', text: renderPackageList(metadata) }],
+    }),
+  );
+
+  // One resource per documented leaf, addressable as robonen-docs://<package>/<slug>.
+  server.registerResource(
+    'docs-entry',
+    new ResourceTemplate('robonen-docs://{package}/{slug}', {
+      list: async () => ({
+        resources: leaves.map(leaf => ({
+          uri: `robonen-docs://${leaf.packageSlug}/${leaf.slug}`,
+          name: `${leaf.packageName} / ${leaf.name}`,
+          description: leaf.description || `${leaf.badge} in ${leaf.packageName}`,
+          mimeType: 'text/markdown',
+        })),
+      }),
+    }),
+    {
+      title: 'Documentation entry',
+      description: 'Full documentation for a single documented item.',
+      mimeType: 'text/markdown',
+    },
+    async (uri, variables) => {
+      const pkgSlug = String(variables.package);
+      const slug = String(variables.slug);
+      const entry = resolveEntry(leaves, pkgSlug, slug);
+      if (!entry) throw new Error(`Unknown documentation resource: ${uri.href}`);
+      return { contents: [{ uri: uri.href, mimeType: 'text/markdown', text: renderDocEntry(entry) }] };
+    },
+  );
+}
+
+/** Build an MCP server for the given documentation metadata, ready to connect to a transport. */
+export function createDocsMcpServer(metadata: DocsMetadata, version = '0.0.0'): McpServer {
+  const leaves = buildLeaves(metadata);
+  const server = new McpServer({ name: 'robonen-docs', version }, { instructions: INSTRUCTIONS });
+  registerTools(server, metadata, leaves);
+  registerResources(server, metadata, leaves);
+  return server;
+}
diff --git a/docs/modules/mcp/docs-index.test.ts b/docs/modules/mcp/docs-index.test.ts
new file mode 100644
index 0000000..bd5df48
--- /dev/null
+++ b/docs/modules/mcp/docs-index.test.ts
@@ -0,0 +1,232 @@
+import { describe, expect, it } from 'vitest';
+import type { DocsMetadata, ItemMeta } from '../extractor/types';
+import { buildLeaves, countEntries, getPackage, groupPackages, resolveEntry, search } from './docs-index';
+
+function item(partial: Partial<ItemMeta> & Pick<ItemMeta, 'name' | 'slug' | 'kind' | 'description'>): ItemMeta {
+  return {
+    since: '',
+    signatures: [],
+    params: [],
+    returns: null,
+    typeParams: [],
+    examples: [],
+    methods: [],
+    properties: [],
+    hasDemo: false,
+    demoSource: '',
+    hasTests: false,
+    relatedTypes: [],
+    sourcePath: '',
+    entryPoint: '.',
+    ...partial,
+  };
+}
+
+const metadata: DocsMetadata = {
+  generatedAt: '2026-06-08T00:00:00.000Z',
+  packages: [
+    {
+      name: '@robonen/stdlib',
+      version: '1.0.0',
+      description: 'Standard library utilities',
+      slug: 'stdlib',
+      kind: 'api',
+      group: 'core',
+      entryPoints: ['.'],
+      categories: [
+        {
+          name: 'Numbers',
+          slug: 'numbers',
+          items: [
+            item({ name: 'clamp', slug: 'clamp', kind: 'function', description: 'Clamp a number to a range' }),
+            item({ name: 'debounce', slug: 'debounce', kind: 'function', description: 'Debounce a function call' }),
+          ],
+        },
+      ],
+      components: [],
+      sections: [],
+    },
+    {
+      name: '@robonen/toolkit',
+      version: '2.0.0',
+      description: 'Vue composables',
+      slug: 'toolkit',
+      kind: 'components',
+      group: 'vue',
+      entryPoints: ['.'],
+      categories: [],
+      components: [
+        {
+          name: 'useClipboard',
+          slug: 'use-clipboard',
+          description: 'Reactive clipboard access',
+          entryPoint: './use-clipboard',
+          parts: [],
+          hasDemo: false,
+          demoSource: '',
+          sourcePath: '',
+        },
+      ],
+      sections: [],
+    },
+    {
+      name: '@robonen/eslint',
+      version: '3.0.0',
+      description: 'Shared ESLint config',
+      slug: 'eslint',
+      kind: 'guide',
+      group: 'configs',
+      entryPoints: ['.'],
+      categories: [],
+      components: [],
+      sections: [
+        { title: 'Imports preset', slug: 'imports', markdown: '# Imports\nSorts and dedupes imports.' },
+      ],
+    },
+  ],
+};
+
+describe('buildLeaves', () => {
+  it('flattens every leaf across all package kinds', () => {
+    const leaves = buildLeaves(metadata);
+    expect(leaves).toHaveLength(4);
+    expect(leaves.map(l => l.slug).sort()).toEqual(['clamp', 'debounce', 'imports', 'use-clipboard']);
+  });
+
+  it('tags each leaf with the right badge', () => {
+    const byName = new Map(buildLeaves(metadata).map(l => [l.name, l.badge]));
+    expect(byName.get('clamp')).toBe('function');
+    expect(byName.get('useClipboard')).toBe('component');
+    expect(byName.get('Imports preset')).toBe('guide');
+  });
+});
+
+describe('search', () => {
+  const leaves = buildLeaves(metadata);
+
+  it('returns empty for a blank query', () => {
+    expect(search(leaves, '   ')).toEqual([]);
+  });
+
+  it('ranks an exact name match first', () => {
+    const hits = search(leaves, 'clamp');
+    expect(hits[0]?.name).toBe('clamp');
+    expect(hits[0]?.packageSlug).toBe('stdlib');
+  });
+
+  it('matches on description body, not just names', () => {
+    const hits = search(leaves, 'clipboard');
+    expect(hits.map(h => h.name)).toContain('useClipboard');
+  });
+
+  it('applies AND semantics across tokens', () => {
+    expect(search(leaves, 'clamp clipboard')).toEqual([]);
+  });
+
+  it('honours the limit', () => {
+    expect(search(leaves, 'a', 1)).toHaveLength(1);
+  });
+});
+
+describe('getPackage / resolveEntry', () => {
+  const leaves = buildLeaves(metadata);
+
+  it('finds a package by slug, case-insensitively', () => {
+    expect(getPackage(metadata, 'STDLIB')?.name).toBe('@robonen/stdlib');
+    expect(getPackage(metadata, 'nope')).toBeUndefined();
+  });
+
+  it('resolves an api item by slug or exported name', () => {
+    expect(resolveEntry(leaves, 'stdlib', 'clamp')?.kind).toBe('api');
+    expect(resolveEntry(leaves, 'stdlib', 'Clamp')?.kind).toBe('api');
+  });
+
+  it('resolves a component by slug and by name', () => {
+    expect(resolveEntry(leaves, 'toolkit', 'use-clipboard')?.kind).toBe('components');
+    expect(resolveEntry(leaves, 'toolkit', 'useClipboard')?.kind).toBe('components');
+  });
+
+  it('resolves a guide section', () => {
+    const entry = resolveEntry(leaves, 'eslint', 'imports');
+    expect(entry?.kind).toBe('guide');
+  });
+
+  it('returns undefined for an unknown item', () => {
+    expect(resolveEntry(leaves, 'stdlib', 'missing')).toBeUndefined();
+  });
+});
+
+describe('slug uniqueness & collisions', () => {
+  // A function and a co-located type/interface whose names differ only in case
+  // both slugify to the same value — the real extractor produces these in
+  // @robonen/editor and @robonen/vue.
+  const colliding: DocsMetadata = {
+    generatedAt: '2026-06-08T00:00:00.000Z',
+    packages: [
+      {
+        name: '@robonen/editor',
+        version: '1.0.0',
+        description: 'Editor',
+        slug: 'editor',
+        kind: 'api',
+        group: 'vue',
+        entryPoints: ['.'],
+        categories: [
+          {
+            name: 'Model',
+            slug: 'model',
+            items: [
+              item({ name: 'position', slug: 'position', kind: 'function', description: 'Create a position' }),
+              item({ name: 'Position', slug: 'position', kind: 'interface', description: 'A position' }),
+            ],
+          },
+        ],
+        components: [],
+        sections: [],
+      },
+    ],
+  };
+
+  it('disambiguates colliding slugs so every (package, slug) pair is unique', () => {
+    const leaves = buildLeaves(colliding);
+    const slugs = leaves.map(l => l.slug);
+    expect(slugs).toEqual(['position', 'position-interface']);
+    expect(new Set(slugs).size).toBe(slugs.length);
+  });
+
+  it('reaches both colliding symbols — function and interface — independently', () => {
+    const leaves = buildLeaves(colliding);
+    // Exact case-sensitive name disambiguates the function from the interface.
+    const fn = resolveEntry(leaves, 'editor', 'position');
+    const iface = resolveEntry(leaves, 'editor', 'Position');
+    expect(fn?.kind === 'api' && fn.item.kind).toBe('function');
+    expect(iface?.kind === 'api' && iface.item.kind).toBe('interface');
+    // The disambiguated slug also resolves the interface directly.
+    const bySlug = resolveEntry(leaves, 'editor', 'position-interface');
+    expect(bySlug?.kind === 'api' && bySlug.item.kind).toBe('interface');
+  });
+
+  it('throws when a slug contains a URI-reserved character', () => {
+    const bad: DocsMetadata = {
+      generatedAt: '2026-06-08T00:00:00.000Z',
+      packages: [{
+        name: '@robonen/x', version: '1.0.0', description: '', slug: 'x', kind: 'guide', group: 'infra',
+        entryPoints: ['.'], categories: [], components: [],
+        sections: [{ title: 'Nested', slug: 'rules/no-foo', markdown: '#' }],
+      }],
+    };
+    expect(() => buildLeaves(bad)).toThrow(/reserved URI character/);
+  });
+});
+
+describe('grouping helpers', () => {
+  it('orders groups core → vue → configs and drops empties', () => {
+    expect(groupPackages(metadata).map(g => g.group)).toEqual(['core', 'vue', 'configs']);
+  });
+
+  it('counts entries per package kind', () => {
+    expect(countEntries(metadata.packages[0]!)).toBe(2);
+    expect(countEntries(metadata.packages[1]!)).toBe(1);
+    expect(countEntries(metadata.packages[2]!)).toBe(1);
+  });
+});
diff --git a/docs/modules/mcp/docs-index.ts b/docs/modules/mcp/docs-index.ts
new file mode 100644
index 0000000..397e50a
Binary files /dev/null and b/docs/modules/mcp/docs-index.ts differ
diff --git a/docs/modules/mcp/format.ts b/docs/modules/mcp/format.ts
new file mode 100644
index 0000000..46a4ca8
--- /dev/null
+++ b/docs/modules/mcp/format.ts
@@ -0,0 +1,274 @@
+/**
+ * Markdown renderers turning structured {@link DocsMetadata} into the text
+ * payloads returned by the MCP tools/resources. Output targets an LLM reader:
+ * compact, signature-first, code-fenced where it helps.
+ */
+
+import type {
+  ComponentMeta,
+  ComponentPartMeta,
+  DocsMetadata,
+  GuideSection,
+  ItemMeta,
+  MethodMeta,
+  PackageMeta,
+  ParamMeta,
+  PropertyMeta,
+} from '../extractor/types';
+import type { DocEntry, SearchHit } from './docs-index';
+import { countEntries, groupPackages } from './docs-index';
+
+/** Collapse whitespace and trim — keeps table cells on one line. */
+function inline(text: string): string {
+  return text.replaceAll(/\s+/g, ' ').trim();
+}
+
+/** Escape pipe / newline so a value is safe inside a Markdown table cell. */
+function cell(text: string): string {
+  const value = inline(text).replaceAll('|', '\\|');
+  return value.length > 0 ? value : '—';
+}
+
+/** A fenced code block; language defaults to `ts`. */
+function fence(code: string, lang = 'ts'): string {
+  return `\`\`\`${lang}\n${code.trim()}\n\`\`\``;
+}
+
+/** Maximum demo lines embedded verbatim before we truncate and link the source. */
+const MAX_DEMO_LINES = 140;
+
+/** A `## Demo` block, capped so a large demo.vue cannot bloat a single tool result. */
+function demoBlock(source: string, sourcePath: string): string[] {
+  const lines = source.trim().split('\n');
+  if (lines.length <= MAX_DEMO_LINES) return ['## Demo', '', fence(source, 'vue'), ''];
+  return [
+    '## Demo',
+    '',
+    fence(lines.slice(0, MAX_DEMO_LINES).join('\n'), 'vue'),
+    `_Demo truncated to ${MAX_DEMO_LINES} of ${lines.length} lines — full source: \`${sourcePath}\`._`,
+    '',
+  ];
+}
+
+/** Render a GitHub-flavoured Markdown table from a header + rows. */
+function table(header: string[], rows: string[][]): string {
+  const head = `| ${header.join(' | ')} |`;
+  const divider = `| ${header.map(() => '---').join(' | ')} |`;
+  const body = rows.map(r => `| ${r.join(' | ')} |`).join('\n');
+  return [head, divider, body].join('\n');
+}
+
+/** A required/optional name with its default, formatted for a table cell. */
+function paramName(p: ParamMeta | PropertyMeta): string {
+  const base = p.optional ? `${p.name}?` : p.name;
+  return p.defaultValue ? `${base} = ${p.defaultValue}` : base;
+}
+
+// ── Package list (table of contents) ─────────────────────────────────────────
+
+export function renderPackageList(metadata: DocsMetadata): string {
+  const lines: string[] = ['# @robonen/tools — documentation index', ''];
+
+  for (const { label, packages } of groupPackages(metadata)) {
+    lines.push(`## ${label}`, '');
+    for (const pkg of packages) {
+      const count = countEntries(pkg);
+      const noun = pkg.kind === 'api' ? 'items' : pkg.kind === 'components' ? 'components' : 'sections';
+      lines.push(
+        `- **${pkg.slug}** — \`${pkg.name}\`@${pkg.version} · _${pkg.kind}_ · ${count} ${noun}${
+          pkg.description ? `\n  ${inline(pkg.description)}` : ''}`,
+      );
+    }
+    lines.push('');
+  }
+
+  lines.push(
+    '---',
+    `${metadata.packages.length} packages · generated ${metadata.generatedAt}`,
+    'Use `get_package(slug)` for a package\'s contents, then `get_doc(package, name)` for full detail.',
+  );
+
+  return lines.join('\n');
+}
+
+// ── Package overview ─────────────────────────────────────────────────────────
+
+export function renderPackageOverview(pkg: PackageMeta): string {
+  const lines: string[] = [`# ${pkg.name}@${pkg.version}`, ''];
+  if (pkg.description) lines.push(inline(pkg.description), '');
+  lines.push(`_kind: ${pkg.kind} · group: ${pkg.group} · entry points: ${pkg.entryPoints.join(', ')}_`, '');
+
+  if (pkg.kind === 'api') {
+    for (const category of pkg.categories) {
+      lines.push(`## ${category.name}`, '');
+      for (const item of category.items) {
+        lines.push(`- \`${item.name}\` · _${item.kind}_${item.description ? ` — ${inline(item.description)}` : ''}`);
+      }
+      lines.push('');
+    }
+  }
+  else if (pkg.kind === 'components') {
+    lines.push('## Components', '');
+    for (const c of pkg.components) {
+      const parts = c.parts.map(p => p.name).join(', ');
+      lines.push(`- **${c.name}** (\`${c.slug}\`)${c.description ? ` — ${inline(c.description)}` : ''}`);
+      if (parts) lines.push(`  parts: ${parts}`);
+    }
+    lines.push('');
+  }
+  else {
+    lines.push('## Sections', '');
+    for (const s of pkg.sections) lines.push(`- **${s.title}** (\`${s.slug}\`)`);
+    lines.push('');
+  }
+
+  lines.push('---', `Use \`get_doc("${pkg.slug}", name)\` for the full documentation of an item.`);
+  return lines.join('\n');
+}
+
+// ── Single entry ─────────────────────────────────────────────────────────────
+
+function renderParams(params: ParamMeta[]): string[] {
+  if (params.length === 0) return [];
+  const rows = params.map(p => [cell(paramName(p)), cell(`\`${p.type}\``), cell(p.description)]);
+  return ['## Parameters', '', table(['Parameter', 'Type', 'Description'], rows), ''];
+}
+
+function renderProperties(title: string, props: PropertyMeta[]): string[] {
+  if (props.length === 0) return [];
+  const rows = props.map(p => [
+    cell(`${paramName(p)}${p.readonly ? ' _(readonly)_' : ''}`),
+    cell(`\`${p.type}\``),
+    cell(p.description),
+  ]);
+  return [`## ${title}`, '', table(['Name', 'Type', 'Description'], rows), ''];
+}
+
+function renderMethods(methods: MethodMeta[]): string[] {
+  if (methods.length === 0) return [];
+  const out: string[] = ['## Methods', ''];
+  for (const m of methods) {
+    out.push(`### ${m.name}${m.visibility && m.visibility !== 'public' ? ` _(${m.visibility})_` : ''}`);
+    if (m.description) out.push('', inline(m.description));
+    if (m.signatures.length > 0) out.push('', fence(m.signatures.join('\n')));
+    out.push(...renderParams(m.params));
+    if (m.returns) out.push(`**Returns** \`${inline(m.returns.type)}\`${m.returns.description ? ` — ${inline(m.returns.description)}` : ''}`, '');
+  }
+  return out;
+}
+
+function renderApiItem(pkg: PackageMeta, item: ItemMeta): string {
+  const lines: string[] = [
+    `# ${item.name}`,
+    '',
+    `_${item.kind} · ${pkg.name}${item.since ? ` · since ${item.since}` : ''} · \`${item.entryPoint}\`_`,
+    '',
+  ];
+  if (item.description) lines.push(inline(item.description), '');
+
+  if (item.signatures.length > 0) {
+    lines.push('## Signature', '', fence(item.signatures.join('\n\n')), '');
+  }
+
+  if (item.typeParams.length > 0) {
+    const rows = item.typeParams.map(tp => [
+      cell(tp.name),
+      cell(tp.constraint ? `\`${tp.constraint}\`` : '—'),
+      cell(tp.default ? `\`${tp.default}\`` : '—'),
+      cell(tp.description),
+    ]);
+    lines.push('## Type Parameters', '', table(['Name', 'Constraint', 'Default', 'Description'], rows), '');
+  }
+
+  lines.push(...renderParams(item.params));
+
+  if (item.returns) {
+    lines.push(
+      '## Returns',
+      '',
+      `\`${inline(item.returns.type)}\`${item.returns.description ? ` — ${inline(item.returns.description)}` : ''}`,
+      '',
+    );
+  }
+
+  lines.push(...renderMethods(item.methods));
+  lines.push(...renderProperties('Properties', item.properties));
+
+  if (item.examples.length > 0) {
+    lines.push('## Examples', '');
+    for (const ex of item.examples) lines.push(fence(ex), '');
+  }
+
+  if (item.relatedTypes.length > 0) {
+    lines.push('## Related Types', '');
+    for (const t of item.relatedTypes) {
+      lines.push(`### ${t.name}${t.description ? ` — ${inline(t.description)}` : ''}`);
+      if (t.signatures.length > 0) lines.push('', fence(t.signatures.join('\n')));
+      lines.push(...renderProperties('Properties', t.properties));
+      lines.push('');
+    }
+  }
+
+  if (item.hasDemo && item.demoSource) {
+    lines.push(...demoBlock(item.demoSource, item.sourcePath));
+  }
+
+  lines.push('---', `Source: \`${item.sourcePath}\`${item.hasTests ? ' · has tests' : ''}`);
+  return lines.join('\n');
+}
+
+function renderComponentPart(part: ComponentPartMeta): string[] {
+  const out: string[] = [`### ${part.name}${part.role ? ` _(${part.role})_` : ''}`];
+  if (part.description) out.push('', inline(part.description));
+  out.push(...renderProperties('Props', part.props));
+
+  if (part.emits.length > 0) {
+    const rows = part.emits.map(e => [cell(e.name), cell(`\`${e.payload}\``), cell(e.description)]);
+    out.push('#### Emits', '', table(['Event', 'Payload', 'Description'], rows), '');
+  }
+  return out;
+}
+
+function renderComponent(pkg: PackageMeta, component: ComponentMeta): string {
+  const lines: string[] = [`# ${component.name}`, '', `_component · ${pkg.name} · \`${component.entryPoint}\`_`, ''];
+  if (component.description) lines.push(inline(component.description), '');
+
+  lines.push('## Anatomy', '');
+  for (const part of component.parts) lines.push(...renderComponentPart(part));
+
+  if (component.hasDemo && component.demoSource) {
+    lines.push(...demoBlock(component.demoSource, component.sourcePath));
+  }
+
+  lines.push('---', `Source: \`${component.sourcePath}\``);
+  return lines.join('\n');
+}
+
+function renderGuide(pkg: PackageMeta, section: GuideSection): string {
+  return [`# ${section.title}`, '', `_guide · ${pkg.name}_`, '', section.markdown.trim()].join('\n');
+}
+
+/** Render any documented leaf to full Markdown. */
+export function renderDocEntry(entry: DocEntry): string {
+  if (entry.kind === 'api') return renderApiItem(entry.pkg, entry.item);
+  if (entry.kind === 'components') return renderComponent(entry.pkg, entry.component);
+  return renderGuide(entry.pkg, entry.section);
+}
+
+// ── Search results ───────────────────────────────────────────────────────────
+
+export function renderSearchResults(hits: SearchHit[], query: string): string {
+  if (hits.length === 0) {
+    return `No documentation matches "${query}". Try a broader term, or call list_packages to browse.`;
+  }
+
+  const lines: string[] = [`Found ${hits.length} result${hits.length === 1 ? '' : 's'} for "${query}":`, ''];
+  for (const hit of hits) {
+    lines.push(
+      `- **${hit.name}** · _${hit.badge}_ · \`${hit.packageSlug}/${hit.slug}\`${
+        hit.description ? `\n  ${inline(hit.description)}` : ''}`,
+    );
+  }
+  lines.push('', 'Call `get_doc(package, name)` with the `package/slug` above for full detail.');
+  return lines.join('\n');
+}
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
new file mode 100644
index 0000000..9223646
--- /dev/null
+++ b/docs/nuxt.config.ts
@@ -0,0 +1,74 @@
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineNuxtConfig({
+  future: {
+    compatibilityVersion: 4,
+  },
+
+  modules: [
+    '@nuxt/fonts',
+    './modules/extractor',
+  ],
+
+  vite: {
+    plugins: [
+      tailwindcss() as any,
+    ],
+  },
+
+  css: ['~/assets/css/main.css'],
+
+  ssr: true,
+
+  // Dev-only: the file-based payload cache collides on parent+child routes that
+  // share a segment (e.g. `/vue` is written as a file while `/vue/*` needs `vue`
+  // to be a directory → ENOTDIR). Production prerender writes each route to its
+  // own dir, so payload extraction is left enabled there.
+  $development: {
+    experimental: { payloadExtraction: false },
+  },
+
+  routeRules: {
+    '/**': { prerender: true },
+    // The MCP endpoint is a dynamic POST handler — never prerender it.
+    '/mcp': { prerender: false },
+  },
+
+  nitro: {
+    prerender: {
+      crawlLinks: true,
+    },
+  },
+
+  fonts: {
+    families: [
+      { name: 'Inter', provider: 'google', weights: [400, 500, 600, 700] },
+      { name: 'JetBrains Mono', provider: 'google', weights: [400, 500] },
+    ],
+  },
+
+  app: {
+    pageTransition: { name: 'page', mode: 'out-in' },
+    head: {
+      title: '@robonen/tools — Documentation',
+      meta: [
+        { name: 'description', content: 'Auto-generated documentation for the @robonen/tools monorepo' },
+        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+        { name: 'theme-color', content: '#ffffff', media: '(prefers-color-scheme: light)' },
+        { name: 'theme-color', content: '#0a0a0a', media: '(prefers-color-scheme: dark)' },
+      ],
+      htmlAttrs: {
+        lang: 'en',
+      },
+      script: [
+        {
+          // Set the theme class before first paint to avoid a flash.
+          innerHTML: `(function(){try{var t=localStorage.getItem('docs-theme');var d=t==='dark'||((!t||t==='system')&&matchMedia('(prefers-color-scheme: dark)').matches);document.documentElement.classList.toggle('dark',d);}catch(e){}})();`,
+          tagPosition: 'head',
+        },
+      ],
+    },
+  },
+
+  compatibilityDate: '2026-02-15',
+});
diff --git a/docs/package.json b/docs/package.json
new file mode 100644
index 0000000..dfe149c
--- /dev/null
+++ b/docs/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "@robonen/docs",
+  "version": "0.0.1",
+  "private": true,
+  "license": "Apache-2.0",
+  "description": "Auto-generated documentation site for @robonen/tools",
+  "type": "module",
+  "scripts": {
+    "lint:check": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "test": "vitest run",
+    "dev": "nuxt dev",
+    "build": "nuxt build",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "extract": "jiti ./modules/extractor/extract.ts"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.29.0",
+    "marked": "^18.0.5",
+    "shiki": "^4.2.0",
+    "zod": "^4.4.3"
+  },
+  "devDependencies": {
+    "@nuxt/fonts": "^0.14.0",
+    "@nuxt/kit": "^4.4.7",
+    "@robonen/eslint": "workspace:*",
+    "@tailwindcss/vite": "^4.3.0",
+    "eslint": "catalog:",
+    "jiti": "^2.7.0",
+    "nuxt": "catalog:",
+    "tailwindcss": "^4.3.0",
+    "ts-morph": "^28.0.0",
+    "vue": "catalog:",
+    "vue-router": "^5.1.0"
+  }
+}
diff --git a/docs/server/routes/mcp.post.ts b/docs/server/routes/mcp.post.ts
new file mode 100644
index 0000000..176e296
--- /dev/null
+++ b/docs/server/routes/mcp.post.ts
@@ -0,0 +1,39 @@
+/**
+ * MCP endpoint, served by the Nuxt/Nitro server itself — no separate process.
+ *
+ * Speaks the MCP Streamable HTTP transport in stateless mode (one fresh server
+ * per request, plain JSON responses), reusing the shared `createDocsMcpServer`
+ * factory and the build-time documentation metadata injected by the extractor
+ * module as the `#docs/server-metadata` virtual.
+ *
+ * POST /mcp  →  start the dev server (`pnpm docs:dev`) and point your MCP client
+ * at http://localhost:3000/mcp.
+ */
+
+import { StreamableHTTPServerTransport } from '@modelcontextprotocol/sdk/server/streamableHttp.js';
+import metadata from '#docs/server-metadata';
+import pkg from '../../package.json';
+import { createDocsMcpServer } from '../../modules/mcp/create-server';
+
+export default defineEventHandler(async (event) => {
+  // h3 has already buffered the JSON body; hand it to the transport so it does
+  // not try to re-read the consumed request stream.
+  const body = await readBody(event);
+
+  const server = createDocsMcpServer(metadata, pkg.version);
+  const transport = new StreamableHTTPServerTransport({
+    sessionIdGenerator: undefined, // stateless: no session tracking for read-only docs
+    enableJsonResponse: true, // return a single JSON response rather than an SSE stream
+  });
+
+  // Tear both down once the response is flushed.
+  event.node.res.on('close', () => {
+    void transport.close();
+    void server.close();
+  });
+
+  await server.connect(transport);
+  // The transport writes the status, headers and body directly to res and ends
+  // it; h3 sees `res.writableEnded` and does not attempt a second response.
+  await transport.handleRequest(event.node.req, event.node.res, body);
+});
diff --git a/docs/server/types.d.ts b/docs/server/types.d.ts
new file mode 100644
index 0000000..f723e17
--- /dev/null
+++ b/docs/server/types.d.ts
@@ -0,0 +1,7 @@
+/** Types for the Nitro virtual module injected by `modules/extractor`. */
+declare module '#docs/server-metadata' {
+  import type { DocsMetadata } from '../modules/extractor/types';
+
+  const metadata: DocsMetadata;
+  export default metadata;
+}
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
new file mode 100644
index 0000000..4b34df1
--- /dev/null
+++ b/docs/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}
diff --git a/docs/tsconfig.tsbuildinfo b/docs/tsconfig.tsbuildinfo
new file mode 100644
index 0000000..d12568c
--- /dev/null
+++ b/docs/tsconfig.tsbuildinfo
@@ -0,0 +1 @@
+{"root":["./.nuxt/nuxt.d.ts","./app/app.vue","./app/components/docsbadge.vue","./app/components/docscode.vue","./app/components/docscomponentanatomy.vue","./app/components/docsdemo.vue","./app/components/docsemitstable.vue","./app/components/docsmarkdown.vue","./app/components/docsmethodslist.vue","./app/components/docsparamstable.vue","./app/components/docspropstable.vue","./app/components/docssearch.vue","./app/components/docstag.vue","./app/components/docsthemetoggle.vue","./app/components/docstoc.vue","./app/composables/usedocs.ts","./app/composables/usemarkdown.ts","./app/composables/useshiki.ts","./app/composables/usetheme.ts","./app/layouts/default.vue","./app/pages/index.vue","./app/pages/[package]/[utility].vue","./app/pages/[package]/index.vue","./.nuxt/nuxt.node.d.ts","./nuxt.config.ts"],"errors":true,"version":"5.9.3"}
\ No newline at end of file
diff --git a/docs/vitest.config.ts b/docs/vitest.config.ts
new file mode 100644
index 0000000..0b27d3f
--- /dev/null
+++ b/docs/vitest.config.ts
@@ -0,0 +1,10 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    // Only the build-time tooling (extractor / MCP server) is unit-tested here;
+    // the Nuxt app itself is covered elsewhere.
+    include: ['modules/**/*.test.ts'],
+    environment: 'node',
+  },
+});
diff --git a/infra/renovate/docs/intro.vue b/infra/renovate/docs/intro.vue
new file mode 100644
index 0000000..f250547
--- /dev/null
+++ b/infra/renovate/docs/intro.vue
@@ -0,0 +1,128 @@
+<script setup lang="ts">
+// Landing hero for @robonen/renovate. Static content only — no runtime APIs are
+// touched at setup top-level, so this prerenders and hydrates safely.
+
+const renovateJson = `{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": ["github>robonen/tools//infra/renovate/default.json"]
+}`;
+
+const overrideExample = `{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": ["github>robonen/tools//infra/renovate/default.json"],
+  "packageRules": [
+    {
+      "matchUpdateTypes": ["major"],
+      "automerge": false
+    }
+  ]
+}`;
+</script>
+
+<template>
+  <div class="docs-section">
+    <div class="prose-docs">
+      <h1>@robonen/renovate</h1>
+      <p class="text-lg text-(--fg-muted)">
+        A shared Renovate configuration preset — one line in your
+        <code>renovate.json</code> and dependency updates run on autopilot.
+      </p>
+    </div>
+
+    <div class="prose-docs">
+      <p>
+        Every repository ends up re-deriving the same Renovate setup: which update
+        types to auto-merge, when to schedule the noise, how to phrase commit
+        messages, who to assign reviews to. <code>@robonen/renovate</code> captures
+        those decisions once as a single <code>default.json</code> preset that any
+        repo can extend, so the policy lives in one place instead of being copied
+        and slowly drifting across projects.
+      </p>
+    </div>
+
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="font-medium text-(--fg) mb-1.5">One-line adoption</h3>
+        <p class="text-sm text-(--fg-muted) m-0">
+          Extend it via
+          <code>github&gt;robonen/tools//infra/renovate/default.json</code>
+          — no copy-pasted config, and updates to the policy roll out to every
+          consumer.
+        </p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="font-medium text-(--fg) mb-1.5">Quiet by default</h3>
+        <p class="text-sm text-(--fg-muted) m-0">
+          Non-major updates are grouped via <code>group:allNonMajor</code>, so you
+          review one consolidated PR instead of a wall of individual bumps.
+        </p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="font-medium text-(--fg) mb-1.5">Hands-off minor &amp; patch</h3>
+        <p class="text-sm text-(--fg-muted) m-0">
+          Minor, patch, pin, and digest updates auto-approve and auto-merge on a
+          1–3 AM schedule — safe upgrades land overnight, majors still wait for you.
+        </p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="font-medium text-(--fg) mb-1.5">Conventional commits</h3>
+        <p class="text-sm text-(--fg-muted) m-0">
+          Every update commits as <code>chore</code> with a
+          <code>bump</code> range strategy, and reviews are assigned straight from
+          <code>CODEOWNERS</code>.
+        </p>
+      </div>
+    </div>
+
+    <div class="prose-docs">
+      <h2>Install</h2>
+      <p>
+        You don't import this package in code — Renovate reads it from the repo by
+        reference. Add the package to your workspace if you want the bundled
+        <code>renovate-config-validator</code> available locally:
+      </p>
+    </div>
+    <DocsCode :code="`pnpm add @robonen/renovate`" lang="bash" />
+
+    <div class="prose-docs">
+      <h2>Usage</h2>
+      <p>
+        Create (or edit) <code>renovate.json</code> in your repository root and
+        extend the preset:
+      </p>
+    </div>
+    <DocsCode :code="renovateJson" lang="json" />
+
+    <div class="prose-docs">
+      <p>
+        That's the whole setup. To diverge from the shared policy, append your own
+        <code>packageRules</code> after the extend — for example, opt out of
+        auto-merging major upgrades:
+      </p>
+    </div>
+    <DocsCode :code="overrideExample" lang="json" />
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-4 text-sm text-(--fg-muted)">
+      <strong class="text-(--fg)">Tip:</strong> validate any config that extends
+      this preset with
+      <code class="text-(--accent-text)">renovate-config-validator</code> before
+      committing — the package ships it as a <code>test</code> script against
+      <code>default.json</code>.
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-elevated) p-5">
+      <h3 class="font-medium text-(--fg) mb-2">Where to next</h3>
+      <ul class="text-sm text-(--fg-muted) space-y-1.5 list-disc pl-5 m-0">
+        <li>
+          Read the guide sections below for the full list of what the preset
+          enables — extended configs, schedules, and package rules.
+        </li>
+        <li>
+          See the upstream
+          <a href="https://docs.renovatebot.com/" class="text-(--accent-text) hover:underline" target="_blank" rel="noreferrer">Renovate docs</a>
+          for the complete configuration schema you can layer on top.
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
diff --git a/infra/renovate/package.json b/infra/renovate/package.json
index 4843f24..0ce416a 100644
--- a/infra/renovate/package.json
+++ b/infra/renovate/package.json
@@ -16,7 +16,7 @@
     "url": "git+https://github.com/robonen/tools.git",
     "directory": "packages/renovate"
   },
-  "packageManager": "pnpm@10.29.3",
+  "packageManager": "pnpm@10.33.2",
   "engines": {
     "node": ">=24.13.1"
   },
@@ -27,6 +27,6 @@
     "test": "renovate-config-validator ./default.json"
   },
   "devDependencies": {
-    "renovate": "^43.12.0"
+    "renovate": "^43.214.6"
   }
 }
diff --git a/package.json b/package.json
index 8da5278..000432b 100644
--- a/package.json
+++ b/package.json
@@ -15,26 +15,32 @@
     "type": "git",
     "url": "git+https://github.com/robonen/tools.git"
   },
-  "packageManager": "pnpm@10.29.3",
+  "packageManager": "pnpm@10.33.2",
   "engines": {
     "node": ">=24.13.1"
   },
   "type": "module",
   "devDependencies": {
-    "@types/node": "^24.10.13",
+    "@types/node": "^25.9.2",
     "@vitest/coverage-v8": "catalog:",
     "@vitest/ui": "catalog:",
-    "citty": "^0.2.1",
-    "jiti": "^2.6.1",
+    "citty": "^0.2.2",
+    "jiti": "^2.7.0",
     "jsdom": "catalog:",
     "scule": "^1.3.0",
+    "typescript": "^6.0.3",
     "vitest": "catalog:"
   },
   "scripts": {
     "build": "pnpm -r build",
-    "lint": "pnpm -r lint",
+    "lint:check": "pnpm -r lint:check",
+    "lint:fix": "pnpm -r lint:fix",
     "test": "vitest run",
     "test:ui": "vitest --ui",
-    "create": "jiti ./bin/cli.ts"
+    "create": "jiti ./bin/cli.ts",
+    "docs:dev": "pnpm -C docs dev",
+    "docs:generate": "pnpm -C docs generate",
+    "docs:preview": "pnpm -C docs preview",
+    "docs:extract": "pnpm -C docs extract"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6349758..0ed0ee9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,60 +6,115 @@ settings:
 
 catalogs:
   default:
+    '@stylistic/eslint-plugin':
+      specifier: ^5.10.0
+      version: 5.10.0
+    '@vitest/browser':
+      specifier: ^4.1.8
+      version: 4.1.8
     '@vitest/coverage-v8':
-      specifier: ^4.0.18
-      version: 4.0.18
+      specifier: ^4.1.8
+      version: 4.1.8
     '@vitest/ui':
-      specifier: ^4.0.18
-      version: 4.0.18
+      specifier: ^4.1.8
+      version: 4.1.8
+    '@vue/shared':
+      specifier: ^3.5.35
+      version: 3.5.35
     '@vue/test-utils':
-      specifier: ^2.4.6
-      version: 2.4.6
+      specifier: ^2.4.11
+      version: 2.4.11
+    eslint:
+      specifier: ^10.4.1
+      version: 10.4.1
     jsdom:
-      specifier: ^29.0.1
-      version: 29.0.1
-    oxlint:
-      specifier: ^1.2.0
-      version: 1.47.0
+      specifier: ^29.1.1
+      version: 29.1.1
+    nuxt:
+      specifier: ^4.4.7
+      version: 4.4.7
     tsdown:
-      specifier: ^0.12.5
-      version: 0.12.9
+      specifier: ^0.22.2
+      version: 0.22.2
+    vitest:
+      specifier: ^4.1.8
+      version: 4.1.8
     vue:
-      specifier: ^3.5.28
-      version: 3.5.28
+      specifier: ^3.5.35
+      version: 3.5.35
 
 importers:
 
   .:
     devDependencies:
       '@types/node':
-        specifier: ^24.10.13
-        version: 24.10.13
+        specifier: ^25.9.2
+        version: 25.9.2
       '@vitest/coverage-v8':
         specifier: 'catalog:'
-        version: 4.0.18(vitest@4.1.0)
+        version: 4.1.8(@vitest/browser@4.1.8)(vitest@4.1.8)
       '@vitest/ui':
         specifier: 'catalog:'
-        version: 4.0.18(vitest@4.1.0)
+        version: 4.1.8(vitest@4.1.8)
       citty:
-        specifier: ^0.2.1
-        version: 0.2.1
+        specifier: ^0.2.2
+        version: 0.2.2
       jiti:
-        specifier: ^2.6.1
-        version: 2.6.1
+        specifier: ^2.7.0
+        version: 2.7.0
       jsdom:
         specifier: 'catalog:'
-        version: 29.0.1
+        version: 29.1.1
       scule:
         specifier: ^1.3.0
         version: 1.3.0
+      typescript:
+        specifier: ^6.0.3
+        version: 6.0.3
       vitest:
         specifier: 'catalog:'
-        version: 4.1.0(@opentelemetry/api@1.9.0)(@types/node@24.10.13)(@vitest/ui@4.0.18)(jsdom@29.0.1)(vite@7.1.4(@types/node@24.10.13)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.2))
+        version: 4.1.8(@opentelemetry/api@1.9.1)(@types/node@25.9.2)(@vitest/browser-playwright@4.1.8)(@vitest/coverage-v8@4.1.8)(@vitest/ui@4.1.8)(jsdom@29.1.1)(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))
 
-  configs/oxlint:
+  configs/eslint:
+    dependencies:
+      '@eslint/js':
+        specifier: ^10.0.1
+        version: 10.0.1(eslint@10.4.1(jiti@2.7.0))
+      '@stylistic/eslint-plugin':
+        specifier: 'catalog:'
+        version: 5.10.0(eslint@10.4.1(jiti@2.7.0))
+      '@vitest/eslint-plugin':
+        specifier: ^1.6.19
+        version: 1.6.19(@typescript-eslint/eslint-plugin@8.60.1(@typescript-eslint/parser@8.60.1(eslint@10.4.1(jiti@2.7.0))(typescript@6.0.3))(eslint@10.4.1(jiti@2.7.0))(typescript@6.0.3))(eslint@10.4.1(jiti@2.7.0))(typescript@6.0.3)(vitest@4.1.8)
+      eslint-plugin-import-x:
+        specifier: ^4.16.2
+        version: 4.16.2(@typescript-eslint/utils@8.60.1(eslint@10.4.1(jiti@2.7.0))(typescript@6.0.3))(eslint@10.4.1(jiti@2.7.0))
+      eslint-plugin-n:
+        specifier: ^18.0.1
+        version: 18.0.1(eslint@10.4.1(jiti@2.7.0))(typescript@6.0.3)
+      eslint-plugin-regexp:
+        specifier: ^3.1.0
+        version: 3.1.0(eslint@10.4.1(jiti@2.7.0))
+      eslint-plugin-unicorn:
+        specifier: ^65.0.0
+        version: 65.0.0(eslint@10.4.1(jiti@2.7.0))
+      eslint-plugin-vue:
+        specifier: ^10.9.2
+        version: 10.9.2(@stylistic/eslint-plugin@5.10.0(eslint@10.4.1(jiti@2.7.0)))(@typescript-eslint/parser@8.60.1(eslint@10.4.1(jiti@2.7.0))(typescript@6.0.3))(eslint@10.4.1(jiti@2.7.0))(vue-eslint-parser@10.4.1(eslint@10.4.1(jiti@2.7.0)))
+      globals:
+        specifier: ^17.6.0
+        version: 17.6.0
+      jiti:
+        specifier: ^2.7.0
+        version: 2.7.0
+      typescript-eslint:
+        specifier: ^8.60.1
+        version: 8.60.1(eslint@10.4.1(jiti@2.7.0))(typescript@6.0.3)
+      vue-eslint-parser:
+        specifier: ^10.4.1
+        version: 10.4.1(eslint@10.4.1(jiti@2.7.0))
     devDependencies:
-      '@robonen/oxlint':
+      '@robonen/eslint':
         specifier: workspace:*
         version: 'link:'
       '@robonen/tsconfig':
@@ -68,12 +123,12 @@ importers:
       '@robonen/tsdown':
         specifier: workspace:*
         version: link:../tsdown
-      oxlint:
+      eslint:
         specifier: 'catalog:'
-        version: 1.47.0
+        version: 10.4.1(jiti@2.7.0)
       tsdown:
         specifier: 'catalog:'
-        version: 0.12.9(typescript@5.8.3)
+        version: 0.22.2(oxc-resolver@11.20.0)(typescript@6.0.3)(unrun@0.2.33(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0))(vue-tsc@3.2.6(typescript@6.0.3))
 
   configs/tsconfig: {}
 
@@ -84,51 +139,379 @@ importers:
         version: link:../tsconfig
       tsdown:
         specifier: 'catalog:'
-        version: 0.12.9(typescript@5.8.3)
+        version: 0.22.2(oxc-resolver@11.20.0)(typescript@6.0.3)(unrun@0.2.33)(vue-tsc@3.2.6(typescript@6.0.3))
+
+  core/crdt:
+    devDependencies:
+      '@robonen/eslint':
+        specifier: workspace:*
+        version: link:../../configs/eslint
+      '@robonen/tsconfig':
+        specifier: workspace:*
+        version: link:../../configs/tsconfig
+      '@robonen/tsdown':
+        specifier: workspace:*
+        version: link:../../configs/tsdown
+      eslint:
+        specifier: 'catalog:'
+        version: 10.4.1(jiti@2.7.0)
+      tsdown:
+        specifier: 'catalog:'
+        version: 0.22.2(oxc-resolver@11.20.0)(typescript@6.0.3)(unrun@0.2.33)(vue-tsc@3.2.6(typescript@6.0.3))
+
+  core/encoding:
+    devDependencies:
+      '@robonen/eslint':
+        specifier: workspace:*
+        version: link:../../configs/eslint
+      '@robonen/tsconfig':
+        specifier: workspace:*
+        version: link:../../configs/tsconfig
+      '@robonen/tsdown':
+        specifier: workspace:*
+        version: link:../../configs/tsdown
+      eslint:
+        specifier: 'catalog:'
+        version: 10.4.1(jiti@2.7.0)
+      tsdown:
+        specifier: 'catalog:'
+        version: 0.22.2(oxc-resolver@11.20.0)(typescript@6.0.3)(unrun@0.2.33)(vue-tsc@3.2.6(typescript@6.0.3))
+
+  core/fetch:
+    dependencies:
+      '@robonen/stdlib':
+        specifier: workspace:*
+        version: link:../stdlib
+    devDependencies:
+      '@robonen/eslint':
+        specifier: workspace:*
+        version: link:../../configs/eslint
+      '@robonen/tsconfig':
+        specifier: workspace:*
+        version: link:../../configs/tsconfig
+      '@robonen/tsdown':
+        specifier: workspace:*
+        version: link:../../configs/tsdown
+      eslint:
+        specifier: 'catalog:'
+        version: 10.4.1(jiti@2.7.0)
+      tsdown:
+        specifier: 'catalog:'
+        version: 0.22.2(oxc-resolver@11.20.0)(typescript@6.0.3)(unrun@0.2.33)(vue-tsc@3.2.6(typescript@6.0.3))
 
   core/platform:
     devDependencies:
-      '@robonen/oxlint':
+      '@robonen/eslint':
         specifier: workspace:*
-        version: link:../../configs/oxlint
+        version: link:../../configs/eslint
+      '@robonen/stdlib':
+        specifier: workspace:*
+        version: link:../stdlib
       '@robonen/tsconfig':
         specifier: workspace:*
         version: link:../../configs/tsconfig
       '@robonen/tsdown':
         specifier: workspace:*
         version: link:../../configs/tsdown
-      oxlint:
+      eslint:
         specifier: 'catalog:'
-        version: 1.47.0
+        version: 10.4.1(jiti@2.7.0)
       tsdown:
         specifier: 'catalog:'
-        version: 0.12.9(typescript@5.8.3)
+        version: 0.22.2(oxc-resolver@11.20.0)(typescript@6.0.3)(unrun@0.2.33)(vue-tsc@3.2.6(typescript@6.0.3))
 
   core/stdlib:
     devDependencies:
-      '@robonen/oxlint':
+      '@robonen/eslint':
         specifier: workspace:*
-        version: link:../../configs/oxlint
+        version: link:../../configs/eslint
       '@robonen/tsconfig':
         specifier: workspace:*
         version: link:../../configs/tsconfig
       '@robonen/tsdown':
         specifier: workspace:*
         version: link:../../configs/tsdown
-      oxlint:
+      eslint:
         specifier: 'catalog:'
-        version: 1.47.0
+        version: 10.4.1(jiti@2.7.0)
       tsdown:
         specifier: 'catalog:'
-        version: 0.12.9(typescript@5.8.3)
+        version: 0.22.2(oxc-resolver@11.20.0)(typescript@6.0.3)(unrun@0.2.33)(vue-tsc@3.2.6(typescript@6.0.3))
+      typescript:
+        specifier: ^6.0.3
+        version: 6.0.3
+
+  docs:
+    dependencies:
+      '@modelcontextprotocol/sdk':
+        specifier: ^1.29.0
+        version: 1.29.0(zod@4.4.3)
+      marked:
+        specifier: ^18.0.5
+        version: 18.0.5
+      shiki:
+        specifier: ^4.2.0
+        version: 4.2.0
+      zod:
+        specifier: ^4.4.3
+        version: 4.4.3
+    devDependencies:
+      '@nuxt/fonts':
+        specifier: ^0.14.0
+        version: 0.14.0(db0@0.3.4(better-sqlite3@12.8.0))(ioredis@5.10.1)(magicast@0.5.2)(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))
+      '@nuxt/kit':
+        specifier: ^4.4.7
+        version: 4.4.7(magicast@0.5.2)
+      '@robonen/eslint':
+        specifier: workspace:*
+        version: link:../configs/eslint
+      '@tailwindcss/vite':
+        specifier: ^4.3.0
+        version: 4.3.0(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))
+      eslint:
+        specifier: 'catalog:'
+        version: 10.4.1(jiti@2.7.0)
+      jiti:
+        specifier: ^2.7.0
+        version: 2.7.0
+      nuxt:
+        specifier: 'catalog:'
+        version: 4.4.7(@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.29.0))(@babel/plugin-syntax-typescript@7.28.6(@babel/core@7.29.0))(@parcel/watcher@2.5.6)(@types/node@25.9.2)(@vue/compiler-sfc@3.5.35)(better-sqlite3@12.8.0)(cac@6.7.14)(db0@0.3.4(better-sqlite3@12.8.0))(encoding@0.1.13)(eslint@10.4.1(jiti@2.7.0))(ioredis@5.10.1)(lightningcss@1.32.0)(magicast@0.5.2)(optionator@0.9.4)(oxlint@1.57.0)(rolldown@1.1.0)(rollup-plugin-visualizer@7.0.1(rolldown@1.1.0)(rollup@4.61.1))(rollup@4.61.1)(terser@5.44.0)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))(vue-tsc@3.3.4(typescript@6.0.3))(yaml@2.9.0)
+      tailwindcss:
+        specifier: ^4.3.0
+        version: 4.3.0
+      ts-morph:
+        specifier: ^28.0.0
+        version: 28.0.0
+      vue:
+        specifier: 'catalog:'
+        version: 3.5.35(typescript@6.0.3)
+      vue-router:
+        specifier: ^5.1.0
+        version: 5.1.0(@vue/compiler-sfc@3.5.35)(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))(vue@3.5.35(typescript@6.0.3))
 
   infra/renovate:
     devDependencies:
       renovate:
-        specifier: ^43.12.0
-        version: 43.12.0(encoding@0.1.13)(typanion@3.14.0)
+        specifier: ^43.214.6
+        version: 43.214.6(typanion@3.14.0)
 
-  web/vue:
+  vue/editor:
+    dependencies:
+      '@floating-ui/vue':
+        specifier: ^1.1.11
+        version: 1.1.11(vue@3.5.35(typescript@6.0.3))
+      '@robonen/crdt':
+        specifier: workspace:*
+        version: link:../../core/crdt
+      '@robonen/platform':
+        specifier: workspace:*
+        version: link:../../core/platform
+      '@robonen/stdlib':
+        specifier: workspace:*
+        version: link:../../core/stdlib
+      '@vue/shared':
+        specifier: 'catalog:'
+        version: 3.5.35
+      vue:
+        specifier: 'catalog:'
+        version: 3.5.35(typescript@6.0.3)
+    devDependencies:
+      '@robonen/eslint':
+        specifier: workspace:*
+        version: link:../../configs/eslint
+      '@robonen/tsconfig':
+        specifier: workspace:*
+        version: link:../../configs/tsconfig
+      '@robonen/tsdown':
+        specifier: workspace:*
+        version: link:../../configs/tsdown
+      '@vitest/browser':
+        specifier: 'catalog:'
+        version: 4.1.8(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))(vitest@4.1.8)
+      '@vitest/browser-playwright':
+        specifier: ^4.1.8
+        version: 4.1.8(playwright@1.60.0)(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))(vitest@4.1.8)
+      '@vue/test-utils':
+        specifier: 'catalog:'
+        version: 2.4.11(@vue/compiler-dom@3.5.35)(@vue/server-renderer@3.5.35(vue@3.5.35(typescript@6.0.3)))(vue@3.5.35(typescript@6.0.3))
+      eslint:
+        specifier: 'catalog:'
+        version: 10.4.1(jiti@2.7.0)
+      jsdom:
+        specifier: 'catalog:'
+        version: 29.1.1
+      playwright:
+        specifier: ^1.60.0
+        version: 1.60.0
+      tsdown:
+        specifier: 'catalog:'
+        version: 0.22.2(oxc-resolver@11.20.0)(typescript@6.0.3)(unrun@0.2.33)(vue-tsc@3.3.4(typescript@6.0.3))
+      unplugin-vue:
+        specifier: ^7.2.0
+        version: 7.2.0(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(vue@3.5.35(typescript@6.0.3))(yaml@2.9.0)
+      vitest-browser-vue:
+        specifier: ^2.1.0
+        version: 2.1.0(@vue/compiler-dom@3.5.35)(@vue/server-renderer@3.5.35(vue@3.5.35(typescript@6.0.3)))(vitest@4.1.8)(vue@3.5.35(typescript@6.0.3))
+      vue-tsc:
+        specifier: ^3.3.4
+        version: 3.3.4(typescript@6.0.3)
+
+  vue/editor/playground:
+    dependencies:
+      '@robonen/editor':
+        specifier: workspace:*
+        version: link:..
+      vue:
+        specifier: 'catalog:'
+        version: 3.5.35(typescript@6.0.3)
+    devDependencies:
+      '@robonen/tsconfig':
+        specifier: workspace:*
+        version: link:../../../configs/tsconfig
+      '@vitejs/plugin-vue':
+        specifier: ^6.0.7
+        version: 6.0.7(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))(vue@3.5.35(typescript@6.0.3))
+      vite:
+        specifier: ^8.0.16
+        version: 8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0)
+      vue-tsc:
+        specifier: ^3.3.4
+        version: 3.3.4(typescript@6.0.3)
+
+  vue/primitives:
+    dependencies:
+      '@floating-ui/vue':
+        specifier: ^1.1.11
+        version: 1.1.11(vue@3.5.35(typescript@6.0.3))
+      '@robonen/platform':
+        specifier: workspace:*
+        version: link:../../core/platform
+      '@robonen/stdlib':
+        specifier: workspace:*
+        version: link:../../core/stdlib
+      '@robonen/vue':
+        specifier: workspace:*
+        version: link:../toolkit
+      '@vue/shared':
+        specifier: 'catalog:'
+        version: 3.5.35
+      vue:
+        specifier: 'catalog:'
+        version: 3.5.35(typescript@6.0.3)
+    devDependencies:
+      '@robonen/eslint':
+        specifier: workspace:*
+        version: link:../../configs/eslint
+      '@robonen/tsconfig':
+        specifier: workspace:*
+        version: link:../../configs/tsconfig
+      '@robonen/tsdown':
+        specifier: workspace:*
+        version: link:../../configs/tsdown
+      '@vitest/browser':
+        specifier: 'catalog:'
+        version: 4.1.8(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))(vitest@4.1.8)
+      '@vitest/browser-playwright':
+        specifier: ^4.1.8
+        version: 4.1.8(playwright@1.60.0)(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))(vitest@4.1.8)
+      '@vue/test-utils':
+        specifier: 'catalog:'
+        version: 2.4.11(@vue/compiler-dom@3.5.35)(@vue/server-renderer@3.5.35(vue@3.5.35(typescript@6.0.3)))(vue@3.5.35(typescript@6.0.3))
+      axe-core:
+        specifier: ^4.12.0
+        version: 4.12.0
+      eslint:
+        specifier: 'catalog:'
+        version: 10.4.1(jiti@2.7.0)
+      playwright:
+        specifier: ^1.60.0
+        version: 1.60.0
+      tsdown:
+        specifier: 'catalog:'
+        version: 0.22.2(oxc-resolver@11.20.0)(typescript@6.0.3)(unrun@0.2.33)(vue-tsc@3.3.4(typescript@6.0.3))
+      unplugin-vue:
+        specifier: ^7.2.0
+        version: 7.2.0(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(vue@3.5.35(typescript@6.0.3))(yaml@2.9.0)
+      vitest-browser-vue:
+        specifier: ^2.1.0
+        version: 2.1.0(@vue/compiler-dom@3.5.35)(@vue/server-renderer@3.5.35(vue@3.5.35(typescript@6.0.3)))(vitest@4.1.8)(vue@3.5.35(typescript@6.0.3))
+      vue-tsc:
+        specifier: ^3.3.4
+        version: 3.3.4(typescript@6.0.3)
+
+  vue/primitives/playground:
+    dependencies:
+      '@robonen/primitives':
+        specifier: workspace:*
+        version: link:..
+      vue:
+        specifier: 'catalog:'
+        version: 3.5.35(typescript@6.0.3)
+      vue-router:
+        specifier: ^5.1.0
+        version: 5.1.0(@vue/compiler-sfc@3.5.35)(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))(vue@3.5.35(typescript@6.0.3))
+    devDependencies:
+      '@robonen/tsconfig':
+        specifier: workspace:*
+        version: link:../../../configs/tsconfig
+      '@tailwindcss/vite':
+        specifier: ^4.3.0
+        version: 4.3.0(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))
+      '@vitejs/plugin-vue':
+        specifier: ^6.0.7
+        version: 6.0.7(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))(vue@3.5.35(typescript@6.0.3))
+      tailwindcss:
+        specifier: ^4.3.0
+        version: 4.3.0
+      vite:
+        specifier: ^8.0.16
+        version: 8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0)
+      vue-tsc:
+        specifier: ^3.3.4
+        version: 3.3.4(typescript@6.0.3)
+
+  vue/stories:
+    dependencies:
+      '@robonen/primitives':
+        specifier: workspace:*
+        version: link:../primitives
+      '@robonen/vue':
+        specifier: workspace:*
+        version: link:../toolkit
+      vue:
+        specifier: 'catalog:'
+        version: 3.5.35(typescript@5.9.3)
+    devDependencies:
+      '@robonen/eslint':
+        specifier: workspace:*
+        version: link:../../configs/eslint
+      '@robonen/tsconfig':
+        specifier: workspace:*
+        version: link:../../configs/tsconfig
+      '@storybook/addon-a11y':
+        specifier: ^10.4.2
+        version: 10.4.2(storybook@10.4.2(@testing-library/dom@10.4.1)(@types/react@19.2.14)(prettier@3.8.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))
+      '@storybook/addon-docs':
+        specifier: ^10.4.2
+        version: 10.4.2(@types/react@19.2.14)(esbuild@0.28.0)(rollup@4.61.1)(storybook@10.4.2(@testing-library/dom@10.4.1)(@types/react@19.2.14)(prettier@3.8.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))
+      '@storybook/vue3-vite':
+        specifier: ^10.4.2
+        version: 10.4.2(esbuild@0.28.0)(rollup@4.61.1)(storybook@10.4.2(@testing-library/dom@10.4.1)(@types/react@19.2.14)(prettier@3.8.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))(vue@3.5.35(typescript@5.9.3))
+      '@vitejs/plugin-vue':
+        specifier: ^6.0.7
+        version: 6.0.7(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))(vue@3.5.35(typescript@5.9.3))
+      eslint:
+        specifier: 'catalog:'
+        version: 10.4.1(jiti@2.7.0)
+      storybook:
+        specifier: ^10.4.2
+        version: 10.4.2(@testing-library/dom@10.4.1)(@types/react@19.2.14)(prettier@3.8.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      vite:
+        specifier: ^8.0.16
+        version: 8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0)
+
+  vue/toolkit:
     dependencies:
       '@robonen/platform':
         specifier: workspace:*
@@ -138,11 +521,11 @@ importers:
         version: link:../../core/stdlib
       vue:
         specifier: 'catalog:'
-        version: 3.5.28(typescript@5.8.3)
+        version: 3.5.35(typescript@6.0.3)
     devDependencies:
-      '@robonen/oxlint':
+      '@robonen/eslint':
         specifier: workspace:*
-        version: link:../../configs/oxlint
+        version: link:../../configs/eslint
       '@robonen/tsconfig':
         specifier: workspace:*
         version: link:../../configs/tsconfig
@@ -151,25 +534,32 @@ importers:
         version: link:../../configs/tsdown
       '@vue/test-utils':
         specifier: 'catalog:'
-        version: 2.4.6
-      oxlint:
+        version: 2.4.11(@vue/compiler-dom@3.5.35)(@vue/server-renderer@3.5.35(vue@3.5.35(typescript@6.0.3)))(vue@3.5.35(typescript@6.0.3))
+      eslint:
         specifier: 'catalog:'
-        version: 1.47.0
+        version: 10.4.1(jiti@2.7.0)
       tsdown:
         specifier: 'catalog:'
-        version: 0.12.9(typescript@5.8.3)
+        version: 0.22.2(oxc-resolver@11.20.0)(typescript@6.0.3)(unrun@0.2.33)(vue-tsc@3.2.6(typescript@6.0.3))
 
 packages:
 
+  '@adobe/css-tools@4.4.4':
+    resolution: {integrity: sha512-Elp+iwUx5rN5+Y8xLt5/GRoG20WGoDCQ/1Fb+1LiGtvwbDavuSk0jhD/eZdckHAuzcDzccnkv+rEjyWfRx18gg==}
+
   '@arcanis/slice-ansi@1.1.1':
     resolution: {integrity: sha512-xguP2WR2Dv0gQ7Ykbdb7BNCnPnIPB94uTi0Z2NvkRBEnhbwjOQ7QyQKJXrVQg4qDpiD9hA5l5cCwy/z2OXgc3w==}
 
-  '@asamuzakjp/css-color@5.0.1':
-    resolution: {integrity: sha512-2SZFvqMyvboVV1d15lMf7XiI3m7SDqXUuKaTymJYLN6dSGadqp+fVojqJlVoMlbZnlTmu3S0TLwLTJpvBMO1Aw==}
+  '@asamuzakjp/css-color@5.1.11':
+    resolution: {integrity: sha512-KVw6qIiCTUQhByfTd78h2yD1/00waTmm9uy/R7Ck/ctUyAPj+AEDLkQIdJW0T8+qGgj3j5bpNKK7Q3G+LedJWg==}
     engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
 
-  '@asamuzakjp/dom-selector@7.0.4':
-    resolution: {integrity: sha512-jXR6x4AcT3eIrS2fSNAwJpwirOkGcd+E7F7CP3zjdTqz9B/2huHOL8YJZBgekKwLML+u7qB/6P1LXQuMScsx0w==}
+  '@asamuzakjp/dom-selector@7.1.1':
+    resolution: {integrity: sha512-67RZDnYRc8H/8MLDgQCDE//zoqVFwajkepHZgmXrbwybzXOEwOWGPYGmALYl9J2DOLfFPPs6kKCqmbzV895hTQ==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
+  '@asamuzakjp/generational-cache@1.0.1':
+    resolution: {integrity: sha512-wajfB8KqzMCN2KGNFdLkReeHncd0AslUSrvHVvvYWuU8ghncRJoA50kT3zP9MVL0+9g4/67H+cdvBskj9THPzg==}
     engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
 
   '@asamuzakjp/nwsapi@2.3.9':
@@ -198,231 +588,288 @@ packages:
   '@aws-crypto/util@5.2.0':
     resolution: {integrity: sha512-4RkU9EsI6ZpBve5fseQlGNUWKMa1RLPQ1dnjnQoe07ldfIzcsGb5hC5W0Dm7u423KWzawlrpbjXBrXCEv9zazQ==}
 
-  '@aws-sdk/client-codecommit@3.980.0':
-    resolution: {integrity: sha512-VjMQet/GtaMKd8Ydy9+v+vwq3p8Ol9NbztHwJ4rJt7unpbiiYQw7KzSQR2f9mcwQ1LN62cPEw3t0ofhKtFSXig==}
+  '@aws-sdk/checksums@3.1000.2':
+    resolution: {integrity: sha512-PIha+kauTbp6IRmOpYktPTrlfrrSqDVixvhO/EUOFOf62DPX81CaJoHJreuA1m9HYpSKyXf99BKjU1dvJPeUfw==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/client-cognito-identity@3.980.0':
-    resolution: {integrity: sha512-nLgMW2drTzv+dTo3ORCcotQPcrUaTQ+xoaDTdSaUXdZO7zbbVyk7ysE5GDTnJdZWcUjHOSB8xfNQhOTTNVPhFw==}
+  '@aws-sdk/client-codecommit@3.1053.0':
+    resolution: {integrity: sha512-cbsUHBo3+3LfO/SBLmL41vz9lN2lu5v34Ixkta9X/Gu5VDthkAp0RFlzAiEfcQqsDUNNMpbiXU8EKQQyNe49Aw==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/client-ec2@3.980.0':
-    resolution: {integrity: sha512-JpOjVaN8Hjw09TtwtW/yOZrEK5+0JDNbZBRomz/B9XZC/U4yL385xlZGXUWvQjAVo7LcGvGOdWNXEWc6Ysm4JA==}
+  '@aws-sdk/client-cognito-identity@3.1053.0':
+    resolution: {integrity: sha512-fMwSPTOWcYrKsB1NG1z9uRSLE/GDJR/375tjiAyO6z2UTlpLSuWkfoYx98oMwHaJpqb1fEhtZZQ7o8czblShJQ==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/client-ecr@3.980.0':
-    resolution: {integrity: sha512-mA5gEw6HMA+JiO5Kgr8bJPUxrVttmh6jvM7l/hOcThd8wmwAB3NFBRYEJVtRiS++q6ow2HQ0HUvOmhQkUhwMNw==}
+  '@aws-sdk/client-ec2@3.1053.0':
+    resolution: {integrity: sha512-8qfMGgfJdIOefogdYcF50yvX6rF9DNxljxh3qHz6CGuZTsXgJUzQ0U51z9mBUdh5YYTkK19o3c6LKuSHtT0MxQ==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/client-eks@3.980.0':
-    resolution: {integrity: sha512-lpjGtdO6SOz102zh0YjQTrxy7VOueuioFRykxXT59NG6Kj7sYRZ/KIX2z93boZiDZDeJp5F7rjGCxM4cXecf0A==}
+  '@aws-sdk/client-ecr@3.1053.0':
+    resolution: {integrity: sha512-Rd6fqumZ/ztVtjGR1sM/WVNkoiQNf8tBSnjTbhAxmAIp7vjNIQ/F72sxZjjhFzOPjMAQretSWfQtBqcAo27PfQ==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/client-rds@3.980.0':
-    resolution: {integrity: sha512-unSs3jQGzOUmd42IbTaadyvtXwqyZv3AfItRQ2zysRR66zXvDdr+UXMHA6Lq9ye5tcw9LBC11CZJpYvtFIsHeA==}
+  '@aws-sdk/client-eks@3.1053.0':
+    resolution: {integrity: sha512-bKf69MI/09ovjjxMWUL+nDinkQpafZ/jY9J7TovMjmiJbAbJu6SHWaB1ieU+vCfhq4e/U3ymYzYE7OuHwzVgTw==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/client-s3@3.980.0':
-    resolution: {integrity: sha512-ch8QqKehyn1WOYbd8LyDbWjv84Z9OEj9qUxz8q3IOCU3ftAVkVR0wAuN96a1xCHnpOJcQZo3rOB08RlyKdkGxQ==}
+  '@aws-sdk/client-rds@3.1053.0':
+    resolution: {integrity: sha512-uxCKH+wKV7U8ggqjma/2r+cytOKmRB90FpswQBQiL7QlMtVrFYPyoRJhxeCQeP23vaPYJbkiBOJ5kSXAjA9bPA==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/client-sso@3.990.0':
-    resolution: {integrity: sha512-xTEaPjZwOqVjGbLOP7qzwbdOWJOo1ne2mUhTZwEBBkPvNk4aXB/vcYwWwrjoSWUqtit4+GDbO75ePc/S6TUJYQ==}
+  '@aws-sdk/client-s3@3.1053.0':
+    resolution: {integrity: sha512-/oGxoB6p1Nqs935Blt+v1o+anSCEf2n3RjIrcLz84i4cn2Gr+Z7JpDdUkG5+74r5ctqEPG7k/phTGbJ9fNKnHg==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/core@3.973.10':
-    resolution: {integrity: sha512-4u/FbyyT3JqzfsESI70iFg6e2yp87MB5kS2qcxIA66m52VSTN1fvuvbCY1h/LKq1LvuxIrlJ1ItcyjvcKoaPLg==}
+  '@aws-sdk/core@3.974.18':
+    resolution: {integrity: sha512-JDYCPI0j7zGrzXTDFsLB346cxss7J/AxH7+O0MzWlqppJBEyB9Qe6TQXRL6iwLUo/xZkNv9KFmBL2hqElmwW0g==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/crc64-nvme@3.972.0':
-    resolution: {integrity: sha512-ThlLhTqX68jvoIVv+pryOdb5coP1cX1/MaTbB9xkGDCbWbsqQcLqzPxuSoW1DCnAAIacmXCWpzUNOB9pv+xXQw==}
+  '@aws-sdk/credential-provider-cognito-identity@3.972.42':
+    resolution: {integrity: sha512-94W7f8xVsdLEjv3TY8R+beoFL0pIRduiGZdqMfIVMvQfn6q9IA3SgE2mIQluu3VCULn8PopB/gx7Fns8ETn/1Q==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/credential-provider-cognito-identity@3.972.3':
-    resolution: {integrity: sha512-dW/DqTk90XW7hIngqntAVtJJyrkS51wcLhGz39lOMe0TlSmZl+5R/UGnAZqNbXmWuJHLzxe+MLgagxH41aTsAQ==}
+  '@aws-sdk/credential-provider-env@3.972.44':
+    resolution: {integrity: sha512-3hKJVrZ7bqXzDAXCQp+OaQ1ASN+vWstaNuEH418wQVl//cRZhqhfR9Bjk1qIWmgUGe8/D3gdO73PgidRj378EQ==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/credential-provider-env@3.972.8':
-    resolution: {integrity: sha512-r91OOPAcHnLCSxaeu/lzZAVRCZ/CtTNuwmJkUwpwSDshUrP7bkX1OmFn2nUMWd9kN53Q4cEo8b7226G4olt2Mg==}
+  '@aws-sdk/credential-provider-http@3.972.46':
+    resolution: {integrity: sha512-VhwC9pGAZHhiQ2xSViyOPDFqvr9aRxGCAXZtADsUhU3R65nad7y//CwynE6mQnWNR+suRlqE79W36IVayL+m1g==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/credential-provider-http@3.972.10':
-    resolution: {integrity: sha512-DTtuyXSWB+KetzLcWaSahLJCtTUe/3SXtlGp4ik9PCe9xD6swHEkG8n8/BNsQ9dsihb9nhFvuUB4DpdBGDcvVg==}
+  '@aws-sdk/credential-provider-ini@3.972.50':
+    resolution: {integrity: sha512-09Xi6ovxiK42+De/qBGF71sT5F2bWgYM+1fFyDwSOpy1xpsQ5R/naIu7MVDpH6Dic36QNc8dAv4KADtMGK2JYg==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/credential-provider-ini@3.972.8':
-    resolution: {integrity: sha512-n2dMn21gvbBIEh00E8Nb+j01U/9rSqFIamWRdGm/mE5e+vHQ9g0cBNdrYFlM6AAiryKVHZmShWT9D1JAWJ3ISw==}
+  '@aws-sdk/credential-provider-login@3.972.49':
+    resolution: {integrity: sha512-EfJF/1Fh9mI4pZyoheU2RY9xUhTcugIZNkD63+orXMkYj/QXacJNbKVDUK90Yv5hE+aX+rt9J/EZ9Qr3vKOa7g==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/credential-provider-login@3.972.8':
-    resolution: {integrity: sha512-rMFuVids8ICge/X9DF5pRdGMIvkVhDV9IQFQ8aTYk6iF0rl9jOUa1C3kjepxiXUlpgJQT++sLZkT9n0TMLHhQw==}
+  '@aws-sdk/credential-provider-node@3.972.52':
+    resolution: {integrity: sha512-7QX+PbyiWBEOVipJq8Nke/TqXT6lAPLE7fvTaopa39/IVWuLfS+Fzdy71sZJONf/mLGgmtj6aU17+REw3+aRrw==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/credential-provider-node@3.972.9':
-    resolution: {integrity: sha512-LfJfO0ClRAq2WsSnA9JuUsNyIicD2eyputxSlSL0EiMrtxOxELLRG6ZVYDf/a1HCepaYPXeakH4y8D5OLCauag==}
+  '@aws-sdk/credential-provider-process@3.972.44':
+    resolution: {integrity: sha512-V+UUhZpRP7QDRhi+qgBDisM9tUBnYmMje8Bk77A6MZsfeGeGdMsQXmaHP1CDYFcept0o/Rz5g2Y0TMeVlG9dzg==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/credential-provider-process@3.972.8':
-    resolution: {integrity: sha512-6cg26ffFltxM51OOS8NH7oE41EccaYiNlbd5VgUYwhiGCySLfHoGuGrLm2rMB4zhy+IO5nWIIG0HiodX8zdvHA==}
+  '@aws-sdk/credential-provider-sso@3.972.49':
+    resolution: {integrity: sha512-9QqOYGuh5tZ76OzaT68kwI78AH+5lS/uZGGvkfxb3fc8FzRrIz2jOufNTliEBEeSAwmgK2rWLNsK+IB3zbtNPA==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/credential-provider-sso@3.972.8':
-    resolution: {integrity: sha512-35kqmFOVU1n26SNv+U37sM8b2TzG8LyqAcd6iM9gprqxyHEh/8IM3gzN4Jzufs3qM6IrH8e43ryZWYdvfVzzKQ==}
+  '@aws-sdk/credential-provider-web-identity@3.972.49':
+    resolution: {integrity: sha512-IYx1lN38MnnPXv+NBLpuATu0cZakbZ321TAfjW+aVkw7HIJF38YnEwdeEO55MSl3pl7hIX1IvvnD6EmnAzmAJw==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/credential-provider-web-identity@3.972.8':
-    resolution: {integrity: sha512-CZhN1bOc1J3ubQPqbmr5b4KaMJBgdDvYsmEIZuX++wFlzmZsKj1bwkaiTEb5U2V7kXuzLlpF5HJSOM9eY/6nGA==}
+  '@aws-sdk/credential-providers@3.1053.0':
+    resolution: {integrity: sha512-jMzNBhYIIzaKiVOFndhyWSvEIosiU/zSxgcOaGXrHGcwlRXcFgTgZEcOFL504hxg4BdrrAIVdGw55Zk9zMhs7g==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/credential-providers@3.980.0':
-    resolution: {integrity: sha512-xkuzICw1nu+MTEKNqkrNcNAEn8PYY08VMZk5jYSRenmdUfOch+vp1BZ3AGkD/8FxsJQwfo5ncpcHy4bMkNjBUA==}
+  '@aws-sdk/middleware-bucket-endpoint@3.972.21':
+    resolution: {integrity: sha512-9hkf6r6GIovTMi3gl/9TZLokp4R27PrZ1t0yejQqDZ49bLGiVmRnbklU2uMjtuot9yBskIquvinEoYGpZ0wMKw==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/middleware-bucket-endpoint@3.972.3':
-    resolution: {integrity: sha512-fmbgWYirF67YF1GfD7cg5N6HHQ96EyRNx/rDIrTF277/zTWVuPI2qS/ZHgofwR1NZPe/NWvoppflQY01LrbVLg==}
+  '@aws-sdk/middleware-expect-continue@3.972.17':
+    resolution: {integrity: sha512-MzrvtvWEedwi4sg0DXT9SOiP8dFTfopnPBaOpQQcchMasCpZ/3v1EWzEi2RIAb8UiQKPQWzNvUARlGmlWuyZzQ==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/middleware-expect-continue@3.972.3':
-    resolution: {integrity: sha512-4msC33RZsXQpUKR5QR4HnvBSNCPLGHmB55oDiROqqgyOc+TOfVu2xgi5goA7ms6MdZLeEh2905UfWMnMMF4mRg==}
+  '@aws-sdk/middleware-flexible-checksums@3.974.27':
+    resolution: {integrity: sha512-bZqezPLdllFC4VAeV/f+EIc/hz56ab3TD/+4zNCgOgmG5ZHAE5dMHrX1gtTwdcQXbPr3KR7x3zTC3zuCTE6+ng==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/middleware-flexible-checksums@3.972.8':
-    resolution: {integrity: sha512-Hn6gumcN/3/8Fzo9z7N1pA2PRfE8S+qAqdb4g3MqzXjIOIe+VxD7edO/DKAJ1YH11639EGQIHBz0wdOb5btjtw==}
+  '@aws-sdk/middleware-location-constraint@3.972.14':
+    resolution: {integrity: sha512-FcHrGhxZCFbWvkZ6VXSbjzAthO79NSvnjzHTvH6ai1ncyXJgZiqepgAwCUq1MxakIAHwjid+WJvkMUmQtyGtuA==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/middleware-host-header@3.972.3':
-    resolution: {integrity: sha512-aknPTb2M+G3s+0qLCx4Li/qGZH8IIYjugHMv15JTYMe6mgZO8VBpYgeGYsNMGCqCZOcWzuf900jFBG5bopfzmA==}
+  '@aws-sdk/middleware-sdk-ec2@3.972.32':
+    resolution: {integrity: sha512-pYIQfl8jN0HVuz6iDisD4wxA59MgLLp2mAs6ziPPA4OMGXkQ5eDQgZRU1K7d5b6tFcdTmQTYD+pcqqUpeG5Plw==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/middleware-location-constraint@3.972.3':
-    resolution: {integrity: sha512-nIg64CVrsXp67vbK0U1/Is8rik3huS3QkRHn2DRDx4NldrEFMgdkZGI/+cZMKD9k4YOS110Dfu21KZLHrFA/1g==}
+  '@aws-sdk/middleware-sdk-rds@3.972.32':
+    resolution: {integrity: sha512-TWC/yvkqyAbSf/kmzsS+2ETqYAySU/UeE7biigwviDTjo1KQ5rHT3dFrsd+m8zfO09g2NyusOkG5S4Mh85buEA==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/middleware-logger@3.972.3':
-    resolution: {integrity: sha512-Ftg09xNNRqaz9QNzlfdQWfpqMCJbsQdnZVJP55jfhbKi1+FTWxGuvfPoBhDHIovqWKjqbuiew3HuhxbJ0+OjgA==}
+  '@aws-sdk/middleware-sdk-s3@3.972.48':
+    resolution: {integrity: sha512-MRTqx8wD/T3REt6LTT3/yN8rrp6+xIHrbUekkDYJTYWVch70mwtdJBovR4qKJz1jIPlbN+9R/Sn6R04BfsglzA==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/middleware-recursion-detection@3.972.3':
-    resolution: {integrity: sha512-PY57QhzNuXHnwbJgbWYTrqIDHYSeOlhfYERTAuc16LKZpTZRJUjzBFokp9hF7u1fuGeE3D70ERXzdbMBOqQz7Q==}
+  '@aws-sdk/middleware-ssec@3.972.14':
+    resolution: {integrity: sha512-T29abTnUuKa0Wt3DjXcx5vK/0OkNruLhiP9rbo668nxGXpyeulpxT3gpN22j/51MPFi8dAsgtz4Bpya1NT4EhQ==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/middleware-sdk-ec2@3.972.7':
-    resolution: {integrity: sha512-QCfIq4jnimaUOyLkQW25tRJx1q0NbKm2dtDcqmQ+TUge90ctR0WE0oJhajJw/6adJRdN8Q2T/vEybcjTWhNx6w==}
+  '@aws-sdk/nested-clients@3.997.17':
+    resolution: {integrity: sha512-lDRgraoTfKRawUyc176Ow93mrNrOho/x+EoK4C+lKU+vKkHWhNhzvSMVAx0WEJUJoeQxxDN5ZdKMfiGEyNejig==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/middleware-sdk-rds@3.972.7':
-    resolution: {integrity: sha512-lFK3ldsNylp9mf9vsEFimya4HzHO5hiXyA9sYnrIkvj320ZAsGI+tQYsUK3YYR5RKcP0n+1+soA2qnxrw01L2w==}
+  '@aws-sdk/signature-v4-multi-region@3.996.32':
+    resolution: {integrity: sha512-llvApLcsWtmRFhG2wT3WIp1CmDeRaIYutqty1ZZXoMzK7TiJ6MOLOimk9eXUS8PwgG4ew4pa4QAbt0lfhn++1w==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/middleware-sdk-s3@3.972.10':
-    resolution: {integrity: sha512-wLkB4bshbBtsAiC2WwlHzOWXu1fx3ftL63fQl0DxEda48Q6B8bcHydZppE3KjEIpPyiNOllByfSnb07cYpIgmw==}
+  '@aws-sdk/token-providers@3.1063.0':
+    resolution: {integrity: sha512-nYDaWWdzjKiDP5xj8k4oUgcYd4WPgzfAOgdU5vJsaqH/07Dfvm7ffisHCFJ+NEl7kUC9JEIUxh0kznvenbo3NQ==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/middleware-ssec@3.972.3':
-    resolution: {integrity: sha512-dU6kDuULN3o3jEHcjm0c4zWJlY1zWVkjG9NPe9qxYLLpcbdj5kRYBS2DdWYD+1B9f910DezRuws7xDEqKkHQIg==}
-    engines: {node: '>=20.0.0'}
-
-  '@aws-sdk/middleware-user-agent@3.972.10':
-    resolution: {integrity: sha512-bBEL8CAqPQkI91ZM5a9xnFAzedpzH6NYCOtNyLarRAzTUTFN2DKqaC60ugBa7pnU1jSi4mA7WAXBsrod7nJltg==}
-    engines: {node: '>=20.0.0'}
-
-  '@aws-sdk/nested-clients@3.980.0':
-    resolution: {integrity: sha512-/dONY5xc5/CCKzOqHZCTidtAR4lJXWkGefXvTRKdSKMGaYbbKsxDckisd6GfnvPSLxWtvQzwgRGRutMRoYUApQ==}
-    engines: {node: '>=20.0.0'}
-
-  '@aws-sdk/nested-clients@3.990.0':
-    resolution: {integrity: sha512-3NA0s66vsy8g7hPh36ZsUgO4SiMyrhwcYvuuNK1PezO52vX3hXDW4pQrC6OQLGKGJV0o6tbEyQtXb/mPs8zg8w==}
-    engines: {node: '>=20.0.0'}
-
-  '@aws-sdk/region-config-resolver@3.972.3':
-    resolution: {integrity: sha512-v4J8qYAWfOMcZ4MJUyatntOicTzEMaU7j3OpkRCGGFSL2NgXQ5VbxauIyORA+pxdKZ0qQG2tCQjQjZDlXEC3Ow==}
-    engines: {node: '>=20.0.0'}
-
-  '@aws-sdk/signature-v4-multi-region@3.980.0':
-    resolution: {integrity: sha512-tO2jBj+ZIVM0nEgi1SyxWtaYGpuAJdsrugmWcI3/U2MPWCYsrvKasUo0026NvJJao38wyUq9B8XTG8Xu53j/VA==}
-    engines: {node: '>=20.0.0'}
-
-  '@aws-sdk/token-providers@3.990.0':
-    resolution: {integrity: sha512-L3BtUb2v9XmYgQdfGBzbBtKMXaP5fV973y3Qdxeevs6oUTVXFmi/mV1+LnScA/1wVPJC9/hlK+1o5vbt7cG7EQ==}
-    engines: {node: '>=20.0.0'}
-
-  '@aws-sdk/types@3.973.1':
-    resolution: {integrity: sha512-DwHBiMNOB468JiX6+i34c+THsKHErYUdNQ3HexeXZvVn4zouLjgaS4FejiGSi2HyBuzuyHg7SuOPmjSvoU9NRg==}
-    engines: {node: '>=20.0.0'}
-
-  '@aws-sdk/util-arn-parser@3.972.2':
-    resolution: {integrity: sha512-VkykWbqMjlSgBFDyrY3nOSqupMc6ivXuGmvci6Q3NnLq5kC+mKQe2QBZ4nrWRE/jqOxeFP2uYzLtwncYYcvQDg==}
-    engines: {node: '>=20.0.0'}
-
-  '@aws-sdk/util-endpoints@3.980.0':
-    resolution: {integrity: sha512-AjKBNEc+rjOZQE1HwcD9aCELqg1GmUj1rtICKuY8cgwB73xJ4U/kNyqKKpN2k9emGqlfDY2D8itIp/vDc6OKpw==}
-    engines: {node: '>=20.0.0'}
-
-  '@aws-sdk/util-endpoints@3.990.0':
-    resolution: {integrity: sha512-kVwtDc9LNI3tQZHEMNbkLIOpeDK8sRSTuT8eMnzGY+O+JImPisfSTjdh+jw9OTznu+MYZjQsv0258sazVKunYg==}
-    engines: {node: '>=20.0.0'}
-
-  '@aws-sdk/util-format-url@3.972.3':
-    resolution: {integrity: sha512-n7F2ycckcKFXa01vAsT/SJdjFHfKH9s96QHcs5gn8AaaigASICeME8WdUL9uBp8XV/OVwEt8+6gzn6KFUgQa8g==}
+  '@aws-sdk/types@3.973.11':
+    resolution: {integrity: sha512-YjS0qFuECClRh4qhEyW8XagW0fwEPBeZ1cfsW/gU73Kh/ExFILxbzxOfPCmzF/2DwEvhvsHYt0b0qnvStwKYrg==}
     engines: {node: '>=20.0.0'}
 
   '@aws-sdk/util-locate-window@3.535.0':
     resolution: {integrity: sha512-PHJ3SL6d2jpcgbqdgiPxkXpu7Drc2PYViwxSIqvvMKhDwzSB1W3mMvtpzwKM4IE7zLFodZo0GKjJ9AsoXndXhA==}
     engines: {node: '>=14.0.0'}
 
-  '@aws-sdk/util-user-agent-browser@3.972.3':
-    resolution: {integrity: sha512-JurOwkRUcXD/5MTDBcqdyQ9eVedtAsZgw5rBwktsPTN7QtPiS2Ld1jkJepNgYoCufz1Wcut9iup7GJDoIHp8Fw==}
-
-  '@aws-sdk/util-user-agent-node@3.972.8':
-    resolution: {integrity: sha512-XJZuT0LWsFCW1C8dEpPAXSa7h6Pb3krr2y//1X0Zidpcl0vmgY5nL/X0JuBZlntpBzaN3+U4hvKjuijyiiR8zw==}
-    engines: {node: '>=20.0.0'}
-    peerDependencies:
-      aws-crt: '>=1.0.0'
-    peerDependenciesMeta:
-      aws-crt:
-        optional: true
-
-  '@aws-sdk/xml-builder@3.972.4':
-    resolution: {integrity: sha512-0zJ05ANfYqI6+rGqj8samZBFod0dPPousBjLEqg8WdxSgbMAkRgLyn81lP215Do0rFJ/17LIXwr7q0yK24mP6Q==}
+  '@aws-sdk/xml-builder@3.972.28':
+    resolution: {integrity: sha512-lI/l3c/vPvsxmspzV63NfS3x9q4CkMmdhJy4QiM+NThAufVkDvi/PZZQ6xETnICL0UD7jI808pY83gllf86RFg==}
     engines: {node: '>=20.0.0'}
 
   '@aws/lambda-invoke-store@0.2.3':
     resolution: {integrity: sha512-oLvsaPMTBejkkmHhjf09xTgk71mOqyr/409NKhRIL08If7AhVfUsJhVsx386uJaqNd42v9kWamQ9lFbkoC2dYw==}
     engines: {node: '>=18.0.0'}
 
-  '@babel/code-frame@7.27.1':
-    resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
+  '@babel/code-frame@7.29.0':
+    resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/compat-data@7.29.0':
+    resolution: {integrity: sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/core@7.29.0':
+    resolution: {integrity: sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==}
     engines: {node: '>=6.9.0'}
 
   '@babel/generator@7.29.1':
     resolution: {integrity: sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-string-parser@7.27.1':
-    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
+  '@babel/generator@8.0.0-rc.6':
+    resolution: {integrity: sha512-6mIzgVK8DgEzvIapoQwhXTMnnkuE4STQmVv9H03i/tZ2ml8oev3TRvZJgTenK2Bsq0YWNtzOrFdTyNzCMFtjJQ==}
+    engines: {node: ^22.18.0 || >=24.11.0}
+
+  '@babel/helper-annotate-as-pure@7.27.3':
+    resolution: {integrity: sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-validator-identifier@7.27.1':
-    resolution: {integrity: sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==}
+  '@babel/helper-compilation-targets@7.28.6':
+    resolution: {integrity: sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-validator-identifier@7.28.5':
-    resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
+  '@babel/helper-create-class-features-plugin@7.28.6':
+    resolution: {integrity: sha512-dTOdvsjnG3xNT9Y0AUg1wAl38y+4Rl4sf9caSQZOXdNqVn+H+HbbJ4IyyHaIqNR6SW9oJpA/RuRjsjCw2IdIow==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-globals@7.28.0':
+    resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/parser@7.29.0':
-    resolution: {integrity: sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==}
+  '@babel/helper-member-expression-to-functions@7.28.5':
+    resolution: {integrity: sha512-cwM7SBRZcPCLgl8a7cY0soT1SptSzAlMH39vwiRpOQkJlh53r5hdHwLSCZpQdVLT39sZt+CRpNwYG4Y2v77atg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-imports@7.28.6':
+    resolution: {integrity: sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-transforms@7.28.6':
+    resolution: {integrity: sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-optimise-call-expression@7.27.1':
+    resolution: {integrity: sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-plugin-utils@7.28.6':
+    resolution: {integrity: sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-replace-supers@7.28.6':
+    resolution: {integrity: sha512-mq8e+laIk94/yFec3DxSjCRD2Z0TAjhVbEJY3UQrlwVo15Lmt7C2wAUbK4bjnTs4APkwsYLTahXRraQXhb1WCg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-skip-transparent-expression-wrappers@7.27.1':
+    resolution: {integrity: sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-string-parser@7.29.7':
+    resolution: {integrity: sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-string-parser@8.0.0-rc.6':
+    resolution: {integrity: sha512-BCkFy+zN6kXQed3YOT7aJl93NfDSzQc3pBfsvTVPs9gU9X3V0aefEF5kwBT0E+mDWH9QgKaZstYUQN9VdQZT4g==}
+    engines: {node: ^22.18.0 || >=24.11.0}
+
+  '@babel/helper-validator-identifier@7.29.7':
+    resolution: {integrity: sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@8.0.0-rc.6':
+    resolution: {integrity: sha512-nVJ+1JcCgntv8d78rRo++o2wuODT0Irknx2BF8Np4Ft2CRgjLqIs4qzSZ8b66yGbBdMWGmZBO9WEZv1hhNiSpg==}
+    engines: {node: ^22.18.0 || >=24.11.0}
+
+  '@babel/helper-validator-option@7.27.1':
+    resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helpers@7.29.2':
+    resolution: {integrity: sha512-HoGuUs4sCZNezVEKdVcwqmZN8GoHirLUcLaYVNBK2J0DadGtdcqgr3BCbvH8+XUo4NGjNl3VOtSjEKNzqfFgKw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/parser@7.29.7':
+    resolution: {integrity: sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  '@babel/parser@8.0.0-rc.6':
+    resolution: {integrity: sha512-rOS8IpdO7mQELkTPlCsTgPejO0bFuZdEDCGQJouYbYf9e1FLTym7Fei2pEjq8q7MWbX0ravcd7QQYKs1TxOuog==}
+    engines: {node: ^22.18.0 || >=24.11.0}
+    hasBin: true
+
+  '@babel/plugin-syntax-jsx@7.28.6':
+    resolution: {integrity: sha512-wgEmr06G6sIpqr8YDwA2dSRTE3bJ+V0IfpzfSY3Lfgd7YWOaAdlykvJi13ZKBt8cZHfgH1IXN+CL656W3uUa4w==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-typescript@7.28.6':
+    resolution: {integrity: sha512-+nDNmQye7nlnuuHDboPbGm00Vqg3oO8niRRL27/4LYHUsHYh0zJ1xWOz0uRwNFmM1Avzk8wZbc6rdiYhomzv/A==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-typescript@7.28.6':
+    resolution: {integrity: sha512-0YWL2RFxOqEm9Efk5PvreamxPME8OyY0wM5wh5lHjF+VtVhdneCWGzZeSqzOfiobVqQaNCd2z0tQvnI9DaPWPw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
   '@babel/runtime-corejs3@7.24.4':
     resolution: {integrity: sha512-VOQOexSilscN24VEY810G/PqtpFvx/z6UqDIjIWbDe2368HhDLkYN5TYwaEz/+eRCUkhJ2WaNLLmQAlxzfWj4w==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/types@7.29.0':
-    resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
+  '@babel/runtime@7.29.2':
+    resolution: {integrity: sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/template@7.28.6':
+    resolution: {integrity: sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/traverse@7.29.0':
+    resolution: {integrity: sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/types@7.29.7':
+    resolution: {integrity: sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/types@8.0.0-rc.6':
+    resolution: {integrity: sha512-p7/ABylAYlexb31wtRdIfH9L9A0Z2T/9H6zAqzqndkY2PLkvNNc580wGhp/gGKN4Sp9sQvSkhc6Oga8/O+wTyw==}
+    engines: {node: ^22.18.0 || >=24.11.0}
+
   '@baszalmstra/rattler@0.2.1':
     resolution: {integrity: sha512-HZ2xu6Nk+XzAeateyzDKYM47ySkjkuKtTNpKRAy+Y+YcRH1qHM2le4iLlG32wDddaHCLUsBsyBxirClOj1TLjw==}
 
@@ -430,6 +877,24 @@ packages:
     resolution: {integrity: sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==}
     engines: {node: '>=18'}
 
+  '@blazediff/core@1.9.1':
+    resolution: {integrity: sha512-ehg3jIkYKulZh+8om/O25vkvSsXXwC+skXmyA87FFx6A/45eqOkZsBltMw/TVteb0mloiGT8oGRTcjRAz66zaA==}
+
+  '@bomb.sh/tab@0.0.15':
+    resolution: {integrity: sha512-Y90ub44TAvbdO9P8mcD/XPyQjFhiR5xmd4Fk7JErmWmEWEUimNnjWiBrVZ16Tj3GA1rLZ+uvCN2V/pzLawv31g==}
+    hasBin: true
+    peerDependencies:
+      cac: ^6.7.14
+      citty: ^0.1.6 || ^0.2.0
+      commander: ^13.1.0
+    peerDependenciesMeta:
+      cac:
+        optional: true
+      citty:
+        optional: true
+      commander:
+        optional: true
+
   '@bramus/specificity@2.4.2':
     resolution: {integrity: sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==}
     hasBin: true
@@ -438,22 +903,41 @@ packages:
     resolution: {integrity: sha512-EVMD0SgJtOuFeg0lAVbCwa+qeTKILb87jqvLyUtQswGD9+ce2nB52Y5zbTF1Hc0MDFfbydcMcxb47jSdhikVHA==}
     engines: {node: '>= 10'}
 
+  '@capsizecss/unpack@4.0.0':
+    resolution: {integrity: sha512-VERIM64vtTP1C4mxQ5thVT9fK0apjPFobqybMtA1UdUujWka24ERHbRHFGmpbbhp73MhV+KSsHQH9C6uOTdEQA==}
+    engines: {node: '>=18'}
+
   '@cdktf/hcl2json@0.21.0':
     resolution: {integrity: sha512-cwX3i/mSJI/cRrtqwEPRfawB7pXgNioriSlkvou8LWiCrrcDe9ZtTbAbu8W1tEJQpe1pnX9VEgpzf/BbM7xF8Q==}
 
+  '@clack/core@1.4.1':
+    resolution: {integrity: sha512-FILJa1gGKEFTGZAJE9RpVhrjKz3c3h4ar60dSv6cGuDqufQ84YEIS3GAGvZiN+H6yaLbbvTFNejjCC4tXpZEuw==}
+    engines: {node: '>= 20.12.0'}
+
+  '@clack/prompts@1.5.1':
+    resolution: {integrity: sha512-zccHj2z2oCCO4yrDiRSlFOxWerGqRiysP7a5jPK6uoI9URKAquwY42Dd/iUP8JWHxEzdRe4TlbvZCo8z1/mhrw==}
+    engines: {node: '>= 20.12.0'}
+
+  '@cloudflare/kv-asset-handler@0.4.2':
+    resolution: {integrity: sha512-SIOD2DxrRRwQ+jgzlXCqoEFiKOFqaPjhnNTGKXSRLvp1HiOvapLaFG2kEr9dYQTYe8rKrd9uvDUzmAITeNyaHQ==}
+    engines: {node: '>=18.0.0'}
+
+  '@colordx/core@5.4.3':
+    resolution: {integrity: sha512-kIxYSfA5T8HXjav55UaaH/o/cKivF6jCCGIb8eqtcsfI46wsvlSiT8jMDyrl779qLec3c2c2oHBZo4oAhvbjrQ==}
+
   '@csstools/color-helpers@6.0.2':
     resolution: {integrity: sha512-LMGQLS9EuADloEFkcTBR3BwV/CGHV7zyDxVRtVDTwdI2Ca4it0CCVTT9wCkxSgokjE5Ho41hEPgb8OEUwoXr6Q==}
     engines: {node: '>=20.19.0'}
 
-  '@csstools/css-calc@3.1.1':
-    resolution: {integrity: sha512-HJ26Z/vmsZQqs/o3a6bgKslXGFAungXGbinULZO3eMsOyNJHeBBZfup5FiZInOghgoM4Hwnmw+OgbJCNg1wwUQ==}
+  '@csstools/css-calc@3.2.1':
+    resolution: {integrity: sha512-DtdHlgXh5ZkA43cwBcAm+huzgJiwx3ZTWVjBs94kwz2xKqSimDA3lBgCjphYgwgVUMWatSM0pDd8TILB1yrVVg==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       '@csstools/css-parser-algorithms': ^4.0.0
       '@csstools/css-tokenizer': ^4.0.0
 
-  '@csstools/css-color-parser@4.0.2':
-    resolution: {integrity: sha512-0GEfbBLmTFf0dJlpsNU7zwxRIH0/BGEMuXLTCvFYxuL1tNhqzTbtnFICyJLTNK4a+RechKP75e7w42ClXSnJQw==}
+  '@csstools/css-color-parser@4.1.1':
+    resolution: {integrity: sha512-eZ5XOtyhK+mggRafYUWzA0tvaYOFgdY8AkgQiCJF9qNAePnUo/zmsqqYubBBb3sQ8uNUaSKTY9s9klfRaAXL0g==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       '@csstools/css-parser-algorithms': ^4.0.0
@@ -465,8 +949,8 @@ packages:
     peerDependencies:
       '@csstools/css-tokenizer': ^4.0.0
 
-  '@csstools/css-syntax-patches-for-csstree@1.1.1':
-    resolution: {integrity: sha512-BvqN0AMWNAnLk9G8jnUT77D+mUbY/H2b3uDTvg2isJkHaOufUE2R3AOwxWo7VBQKT1lOdwdvorddo2B/lk64+w==}
+  '@csstools/css-syntax-patches-for-csstree@1.1.5':
+    resolution: {integrity: sha512-oNjBvzLq2GPZtJphCjLqXow/cHySHSgtxvKZb7OqSZ/xHgw6NWNhfad+6AB9cLeVm6eA9d/qMll3JdEHjy6M+A==}
     peerDependencies:
       css-tree: ^3.2.1
     peerDependenciesMeta:
@@ -477,171 +961,383 @@ packages:
     resolution: {integrity: sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==}
     engines: {node: '>=20.19.0'}
 
-  '@emnapi/core@1.8.1':
-    resolution: {integrity: sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg==}
+  '@dxup/nuxt@0.4.1':
+    resolution: {integrity: sha512-gtYffW6OfWNvoLW+XD3Mx/K8uUq08PMGLYJoDxc92EzZAWqR0FhcR5iaLm5r/OxyGTKz+P5f5Y7Aoir9+SjYaw==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
 
-  '@emnapi/runtime@1.8.1':
-    resolution: {integrity: sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg==}
+  '@dxup/unimport@0.1.2':
+    resolution: {integrity: sha512-/B8YJGPzaYq1NbsQmwgP8EZqg40NpTw4ZB3suuI0TplbxKHeK94jeaawLmVhCv+YwUnOpiWEz9U6SeThku/8JQ==}
 
-  '@emnapi/wasi-threads@1.1.0':
-    resolution: {integrity: sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==}
+  '@emnapi/core@1.10.0':
+    resolution: {integrity: sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==}
 
-  '@esbuild/aix-ppc64@0.25.12':
-    resolution: {integrity: sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==}
+  '@emnapi/core@1.9.2':
+    resolution: {integrity: sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==}
+
+  '@emnapi/runtime@1.10.0':
+    resolution: {integrity: sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==}
+
+  '@emnapi/runtime@1.9.2':
+    resolution: {integrity: sha512-3U4+MIWHImeyu1wnmVygh5WlgfYDtyf0k8AbLhMFxOipihf6nrWC4syIm/SwEeec0mNSafiiNnMJwbza/Is6Lw==}
+
+  '@emnapi/wasi-threads@1.2.1':
+    resolution: {integrity: sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==}
+
+  '@esbuild/aix-ppc64@0.27.4':
+    resolution: {integrity: sha512-cQPwL2mp2nSmHHJlCyoXgHGhbEPMrEEU5xhkcy3Hs/O7nGZqEpZ2sUtLaL9MORLtDfRvVl2/3PAuEkYZH0Ty8Q==}
     engines: {node: '>=18'}
     cpu: [ppc64]
     os: [aix]
 
-  '@esbuild/android-arm64@0.25.12':
-    resolution: {integrity: sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==}
+  '@esbuild/aix-ppc64@0.28.0':
+    resolution: {integrity: sha512-lhRUCeuOyJQURhTxl4WkpFTjIsbDayJHih5kZC1giwE+MhIzAb7mEsQMqMf18rHLsrb5qI1tafG20mLxEWcWlA==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/android-arm64@0.27.4':
+    resolution: {integrity: sha512-gdLscB7v75wRfu7QSm/zg6Rx29VLdy9eTr2t44sfTW7CxwAtQghZ4ZnqHk3/ogz7xao0QAgrkradbBzcqFPasw==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [android]
 
-  '@esbuild/android-arm@0.25.12':
-    resolution: {integrity: sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==}
+  '@esbuild/android-arm64@0.28.0':
+    resolution: {integrity: sha512-+WzIXQOSaGs33tLEgYPYe/yQHf0WTU0X42Jca3y8NWMbUVhp7rUnw+vAsRC/QiDrdD31IszMrZy+qwPOPjd+rw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm@0.27.4':
+    resolution: {integrity: sha512-X9bUgvxiC8CHAGKYufLIHGXPJWnr0OCdR0anD2e21vdvgCI8lIfqFbnoeOz7lBjdrAGUhqLZLcQo6MLhTO2DKQ==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [android]
 
-  '@esbuild/android-x64@0.25.12':
-    resolution: {integrity: sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==}
+  '@esbuild/android-arm@0.28.0':
+    resolution: {integrity: sha512-wqh0ByljabXLKHeWXYLqoJ5jKC4XBaw6Hk08OfMrCRd2nP2ZQ5eleDZC41XHyCNgktBGYMbqnrJKq/K/lzPMSQ==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-x64@0.27.4':
+    resolution: {integrity: sha512-PzPFnBNVF292sfpfhiyiXCGSn9HZg5BcAz+ivBuSsl6Rk4ga1oEXAamhOXRFyMcjwr2DVtm40G65N3GLeH1Lvw==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [android]
 
-  '@esbuild/darwin-arm64@0.25.12':
-    resolution: {integrity: sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==}
+  '@esbuild/android-x64@0.28.0':
+    resolution: {integrity: sha512-+VJggoaKhk2VNNqVL7f6S189UzShHC/mR9EE8rDdSkdpN0KflSwWY/gWjDrNxxisg8Fp1ZCD9jLMo4m0OUfeUA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/darwin-arm64@0.27.4':
+    resolution: {integrity: sha512-b7xaGIwdJlht8ZFCvMkpDN6uiSmnxxK56N2GDTMYPr2/gzvfdQN8rTfBsvVKmIVY/X7EM+/hJKEIbbHs9oA4tQ==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [darwin]
 
-  '@esbuild/darwin-x64@0.25.12':
-    resolution: {integrity: sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==}
+  '@esbuild/darwin-arm64@0.28.0':
+    resolution: {integrity: sha512-0T+A9WZm+bZ84nZBtk1ckYsOvyA3x7e2Acj1KdVfV4/2tdG4fzUp91YHx+GArWLtwqp77pBXVCPn2We7Letr0Q==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.27.4':
+    resolution: {integrity: sha512-sR+OiKLwd15nmCdqpXMnuJ9W2kpy0KigzqScqHI3Hqwr7IXxBp3Yva+yJwoqh7rE8V77tdoheRYataNKL4QrPw==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [darwin]
 
-  '@esbuild/freebsd-arm64@0.25.12':
-    resolution: {integrity: sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==}
+  '@esbuild/darwin-x64@0.28.0':
+    resolution: {integrity: sha512-fyzLm/DLDl/84OCfp2f/XQ4flmORsjU7VKt8HLjvIXChJoFFOIL6pLJPH4Yhd1n1gGFF9mPwtlN5Wf82DZs+LQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/freebsd-arm64@0.27.4':
+    resolution: {integrity: sha512-jnfpKe+p79tCnm4GVav68A7tUFeKQwQyLgESwEAUzyxk/TJr4QdGog9sqWNcUbr/bZt/O/HXouspuQDd9JxFSw==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [freebsd]
 
-  '@esbuild/freebsd-x64@0.25.12':
-    resolution: {integrity: sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==}
+  '@esbuild/freebsd-arm64@0.28.0':
+    resolution: {integrity: sha512-l9GeW5UZBT9k9brBYI+0WDffcRxgHQD8ShN2Ur4xWq/NFzUKm3k5lsH4PdaRgb2w7mI9u61nr2gI2mLI27Nh3Q==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.27.4':
+    resolution: {integrity: sha512-2kb4ceA/CpfUrIcTUl1wrP/9ad9Atrp5J94Lq69w7UwOMolPIGrfLSvAKJp0RTvkPPyn6CIWrNy13kyLikZRZQ==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [freebsd]
 
-  '@esbuild/linux-arm64@0.25.12':
-    resolution: {integrity: sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==}
+  '@esbuild/freebsd-x64@0.28.0':
+    resolution: {integrity: sha512-BXoQai/A0wPO6Es3yFJ7APCiKGc1tdAEOgeTNy3SsB491S3aHn4S4r3e976eUnPdU+NbdtmBuLncYir2tMU9Nw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/linux-arm64@0.27.4':
+    resolution: {integrity: sha512-7nQOttdzVGth1iz57kxg9uCz57dxQLHWxopL6mYuYthohPKEK0vU0C3O21CcBK6KDlkYVcnDXY099HcCDXd9dA==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [linux]
 
-  '@esbuild/linux-arm@0.25.12':
-    resolution: {integrity: sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==}
+  '@esbuild/linux-arm64@0.28.0':
+    resolution: {integrity: sha512-RVyzfb3FWsGA55n6WY0MEIEPURL1FcbhFE6BffZEMEekfCzCIMtB5yyDcFnVbTnwk+CLAgTujmV/Lgvih56W+A==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.27.4':
+    resolution: {integrity: sha512-aBYgcIxX/wd5n2ys0yESGeYMGF+pv6g0DhZr3G1ZG4jMfruU9Tl1i2Z+Wnj9/KjGz1lTLCcorqE2viePZqj4Eg==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [linux]
 
-  '@esbuild/linux-ia32@0.25.12':
-    resolution: {integrity: sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==}
+  '@esbuild/linux-arm@0.28.0':
+    resolution: {integrity: sha512-CjaaREJagqJp7iTaNQjjidaNbCKYcd4IDkzbwwxtSvjI7NZm79qiHc8HqciMddQ6CKvJT6aBd8lO9kN/ZudLlw==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.27.4':
+    resolution: {integrity: sha512-oPtixtAIzgvzYcKBQM/qZ3R+9TEUd1aNJQu0HhGyqtx6oS7qTpvjheIWBbes4+qu1bNlo2V4cbkISr8q6gRBFA==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [linux]
 
-  '@esbuild/linux-loong64@0.25.12':
-    resolution: {integrity: sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==}
+  '@esbuild/linux-ia32@0.28.0':
+    resolution: {integrity: sha512-KBnSTt1kxl9x70q+ydterVdl+Cn0H18ngRMRCEQfrbqdUuntQQ0LoMZv47uB97NljZFzY6HcfqEZ2SAyIUTQBQ==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.27.4':
+    resolution: {integrity: sha512-8mL/vh8qeCoRcFH2nM8wm5uJP+ZcVYGGayMavi8GmRJjuI3g1v6Z7Ni0JJKAJW+m0EtUuARb6Lmp4hMjzCBWzA==}
     engines: {node: '>=18'}
     cpu: [loong64]
     os: [linux]
 
-  '@esbuild/linux-mips64el@0.25.12':
-    resolution: {integrity: sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==}
+  '@esbuild/linux-loong64@0.28.0':
+    resolution: {integrity: sha512-zpSlUce1mnxzgBADvxKXX5sl8aYQHo2ezvMNI8I0lbblJtp8V4odlm3Yzlj7gPyt3T8ReksE6bK+pT3WD+aJRg==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.27.4':
+    resolution: {integrity: sha512-1RdrWFFiiLIW7LQq9Q2NES+HiD4NyT8Itj9AUeCl0IVCA459WnPhREKgwrpaIfTOe+/2rdntisegiPWn/r/aAw==}
     engines: {node: '>=18'}
     cpu: [mips64el]
     os: [linux]
 
-  '@esbuild/linux-ppc64@0.25.12':
-    resolution: {integrity: sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==}
+  '@esbuild/linux-mips64el@0.28.0':
+    resolution: {integrity: sha512-2jIfP6mmjkdmeTlsX/9vmdmhBmKADrWqN7zcdtHIeNSCH1SqIoNI63cYsjQR8J+wGa4Y5izRcSHSm8K3QWmk3w==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.27.4':
+    resolution: {integrity: sha512-tLCwNG47l3sd9lpfyx9LAGEGItCUeRCWeAx6x2Jmbav65nAwoPXfewtAdtbtit/pJFLUWOhpv0FpS6GQAmPrHA==}
     engines: {node: '>=18'}
     cpu: [ppc64]
     os: [linux]
 
-  '@esbuild/linux-riscv64@0.25.12':
-    resolution: {integrity: sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==}
+  '@esbuild/linux-ppc64@0.28.0':
+    resolution: {integrity: sha512-bc0FE9wWeC0WBm49IQMPSPILRocGTQt3j5KPCA8os6VprfuJ7KD+5PzESSrJ6GmPIPJK965ZJHTUlSA6GNYEhg==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.27.4':
+    resolution: {integrity: sha512-BnASypppbUWyqjd1KIpU4AUBiIhVr6YlHx/cnPgqEkNoVOhHg+YiSVxM1RLfiy4t9cAulbRGTNCKOcqHrEQLIw==}
     engines: {node: '>=18'}
     cpu: [riscv64]
     os: [linux]
 
-  '@esbuild/linux-s390x@0.25.12':
-    resolution: {integrity: sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==}
+  '@esbuild/linux-riscv64@0.28.0':
+    resolution: {integrity: sha512-SQPZOwoTTT/HXFXQJG/vBX8sOFagGqvZyXcgLA3NhIqcBv1BJU1d46c0rGcrij2B56Z2rNiSLaZOYW5cUk7yLQ==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.27.4':
+    resolution: {integrity: sha512-+eUqgb/Z7vxVLezG8bVB9SfBie89gMueS+I0xYh2tJdw3vqA/0ImZJ2ROeWwVJN59ihBeZ7Tu92dF/5dy5FttA==}
     engines: {node: '>=18'}
     cpu: [s390x]
     os: [linux]
 
-  '@esbuild/linux-x64@0.25.12':
-    resolution: {integrity: sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==}
+  '@esbuild/linux-s390x@0.28.0':
+    resolution: {integrity: sha512-SCfR0HN8CEEjnYnySJTd2cw0k9OHB/YFzt5zgJEwa+wL/T/raGWYMBqwDNAC6dqFKmJYZoQBRfHjgwLHGSrn3Q==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.27.4':
+    resolution: {integrity: sha512-S5qOXrKV8BQEzJPVxAwnryi2+Iq5pB40gTEIT69BQONqR7JH1EPIcQ/Uiv9mCnn05jff9umq/5nqzxlqTOg9NA==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [linux]
 
-  '@esbuild/netbsd-arm64@0.25.12':
-    resolution: {integrity: sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==}
+  '@esbuild/linux-x64@0.28.0':
+    resolution: {integrity: sha512-us0dSb9iFxIi8srnpl931Nvs65it/Jd2a2K3qs7fz2WfGPHqzfzZTfec7oxZJRNPXPnNYZtanmRc4AL/JwVzHQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/netbsd-arm64@0.27.4':
+    resolution: {integrity: sha512-xHT8X4sb0GS8qTqiwzHqpY00C95DPAq7nAwX35Ie/s+LO9830hrMd3oX0ZMKLvy7vsonee73x0lmcdOVXFzd6Q==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [netbsd]
 
-  '@esbuild/netbsd-x64@0.25.12':
-    resolution: {integrity: sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==}
+  '@esbuild/netbsd-arm64@0.28.0':
+    resolution: {integrity: sha512-CR/RYotgtCKwtftMwJlUU7xCVNg3lMYZ0RzTmAHSfLCXw3NtZtNpswLEj/Kkf6kEL3Gw+BpOekRX0BYCtklhUw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.27.4':
+    resolution: {integrity: sha512-RugOvOdXfdyi5Tyv40kgQnI0byv66BFgAqjdgtAKqHoZTbTF2QqfQrFwa7cHEORJf6X2ht+l9ABLMP0dnKYsgg==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [netbsd]
 
-  '@esbuild/openbsd-arm64@0.25.12':
-    resolution: {integrity: sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==}
+  '@esbuild/netbsd-x64@0.28.0':
+    resolution: {integrity: sha512-nU1yhmYutL+fQ71Kxnhg8uEOdC0pwEW9entHykTgEbna2pw2dkbFSMeqjjyHZoCmt8SBkOSvV+yNmm94aUrrqw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/openbsd-arm64@0.27.4':
+    resolution: {integrity: sha512-2MyL3IAaTX+1/qP0O1SwskwcwCoOI4kV2IBX1xYnDDqthmq5ArrW94qSIKCAuRraMgPOmG0RDTA74mzYNQA9ow==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [openbsd]
 
-  '@esbuild/openbsd-x64@0.25.12':
-    resolution: {integrity: sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==}
+  '@esbuild/openbsd-arm64@0.28.0':
+    resolution: {integrity: sha512-cXb5vApOsRsxsEl4mcZ1XY3D4DzcoMxR/nnc4IyqYs0rTI8ZKmW6kyyg+11Z8yvgMfAEldKzP7AdP64HnSC/6g==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.27.4':
+    resolution: {integrity: sha512-u8fg/jQ5aQDfsnIV6+KwLOf1CmJnfu1ShpwqdwC0uA7ZPwFws55Ngc12vBdeUdnuWoQYx/SOQLGDcdlfXhYmXQ==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [openbsd]
 
-  '@esbuild/openharmony-arm64@0.25.12':
-    resolution: {integrity: sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==}
+  '@esbuild/openbsd-x64@0.28.0':
+    resolution: {integrity: sha512-8wZM2qqtv9UP3mzy7HiGYNH/zjTA355mpeuA+859TyR+e+Tc08IHYpLJuMsfpDJwoLo1ikIJI8jC3GFjnRClzA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/openharmony-arm64@0.27.4':
+    resolution: {integrity: sha512-JkTZrl6VbyO8lDQO3yv26nNr2RM2yZzNrNHEsj9bm6dOwwu9OYN28CjzZkH57bh4w0I2F7IodpQvUAEd1mbWXg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [openharmony]
 
-  '@esbuild/sunos-x64@0.25.12':
-    resolution: {integrity: sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==}
+  '@esbuild/openharmony-arm64@0.28.0':
+    resolution: {integrity: sha512-FLGfyizszcef5C3YtoyQDACyg95+dndv79i2EekILBofh5wpCa1KuBqOWKrEHZg3zrL3t5ouE5jgr94vA+Wb2w==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@esbuild/sunos-x64@0.27.4':
+    resolution: {integrity: sha512-/gOzgaewZJfeJTlsWhvUEmUG4tWEY2Spp5M20INYRg2ZKl9QPO3QEEgPeRtLjEWSW8FilRNacPOg8R1uaYkA6g==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [sunos]
 
-  '@esbuild/win32-arm64@0.25.12':
-    resolution: {integrity: sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==}
+  '@esbuild/sunos-x64@0.28.0':
+    resolution: {integrity: sha512-1ZgjUoEdHZZl/YlV76TSCz9Hqj9h9YmMGAgAPYd+q4SicWNX3G5GCyx9uhQWSLcbvPW8Ni7lj4gDa1T40akdlw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/win32-arm64@0.27.4':
+    resolution: {integrity: sha512-Z9SExBg2y32smoDQdf1HRwHRt6vAHLXcxD2uGgO/v2jK7Y718Ix4ndsbNMU/+1Qiem9OiOdaqitioZwxivhXYg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [win32]
 
-  '@esbuild/win32-ia32@0.25.12':
-    resolution: {integrity: sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==}
+  '@esbuild/win32-arm64@0.28.0':
+    resolution: {integrity: sha512-Q9StnDmQ/enxnpxCCLSg0oo4+34B9TdXpuyPeTedN/6+iXBJ4J+zwfQI28u/Jl40nOYAxGoNi7mFP40RUtkmUA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.27.4':
+    resolution: {integrity: sha512-DAyGLS0Jz5G5iixEbMHi5KdiApqHBWMGzTtMiJ72ZOLhbu/bzxgAe8Ue8CTS3n3HbIUHQz/L51yMdGMeoxXNJw==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [win32]
 
-  '@esbuild/win32-x64@0.25.12':
-    resolution: {integrity: sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==}
+  '@esbuild/win32-ia32@0.28.0':
+    resolution: {integrity: sha512-zF3ag/gfiCe6U2iczcRzSYJKH1DCI+ByzSENHlM2FcDbEeo5Zd2C86Aq0tKUYAJJ1obRP84ymxIAksZUcdztHA==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.27.4':
+    resolution: {integrity: sha512-+knoa0BDoeXgkNvvV1vvbZX4+hizelrkwmGJBdT17t8FNPwG2lKemmuMZlmaNQ3ws3DKKCxpb4zRZEIp3UxFCg==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [win32]
 
+  '@esbuild/win32-x64@0.28.0':
+    resolution: {integrity: sha512-pEl1bO9mfAmIC+tW5btTmrKaujg3zGtUmWNdCw/xs70FBjwAL3o9OEKNHvNmnyylD6ubxUERiEhdsL0xBQ9efw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
+  '@eslint-community/eslint-utils@4.9.1':
+    resolution: {integrity: sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+
+  '@eslint-community/regexpp@4.12.2':
+    resolution: {integrity: sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+
+  '@eslint/config-array@0.23.5':
+    resolution: {integrity: sha512-Y3kKLvC1dvTOT+oGlqNQ1XLqK6D1HU2YXPc52NmAlJZbMMWDzGYXMiPRJ8TYD39muD/OTjlZmNJ4ib7dvSrMBA==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  '@eslint/config-helpers@0.6.0':
+    resolution: {integrity: sha512-ii6Bw9jJ2zi2cWA2Z+9/QZ/+3DX6kwaV5Q986D/CdP3Lap3w/pgQZ373FV7byY/i7L4IRH/G43I5dz1ClsCbpA==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  '@eslint/core@1.2.1':
+    resolution: {integrity: sha512-MwcE1P+AZ4C6DWlpin/OmOA54mmIZ/+xZuJiQd4SyB29oAJjN30UW9wkKNptW2ctp4cEsvhlLY/CsQ1uoHDloQ==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  '@eslint/js@10.0.1':
+    resolution: {integrity: sha512-zeR9k5pd4gxjZ0abRoIaxdc7I3nDktoXZk2qOv9gCNWx3mVwEn32VRhyLaRsDiJjTs0xq/T8mfPtyuXu7GWBcA==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+    peerDependencies:
+      eslint: ^10.0.0
+    peerDependenciesMeta:
+      eslint:
+        optional: true
+
+  '@eslint/object-schema@3.0.5':
+    resolution: {integrity: sha512-vqTaUEgxzm+YDSdElad6PiRoX4t8VGDjCtt05zn4nU810UIx/uNEV7/lZJ6KwFThKZOzOxzXy48da+No7HZaMw==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  '@eslint/plugin-kit@0.7.2':
+    resolution: {integrity: sha512-+CNAzxglkrpNf/kKywqQfk74QjtceuOE7Qm+AF8miRvPF/wmmK5+OJOgVh3AVTT3RP2mH3+FOaxlE5v72owk0A==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
   '@exodus/bytes@1.15.0':
     resolution: {integrity: sha512-UY0nlA+feH81UGSHv92sLEPLCeZFjXOuHhrIo0HQydScuQc8s0A7kL/UdgwgDq8g8ilksmuoF35YVTNphV2aBQ==}
     engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
@@ -651,17 +1347,46 @@ packages:
       '@noble/hashes':
         optional: true
 
+  '@floating-ui/core@1.7.5':
+    resolution: {integrity: sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==}
+
+  '@floating-ui/dom@1.7.6':
+    resolution: {integrity: sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==}
+
+  '@floating-ui/utils@0.2.11':
+    resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
+
+  '@floating-ui/vue@1.1.11':
+    resolution: {integrity: sha512-HzHKCNVxnGS35r9fCHBc3+uCnjw9IWIlCPL683cGgM9Kgj2BiAl8x1mS7vtvP6F9S/e/q4O6MApwSHj8hNLGfw==}
+
   '@gwhitney/detect-indent@7.0.1':
     resolution: {integrity: sha512-7bQW+gkKa2kKZPeJf6+c6gFK9ARxQfn+FKy9ScTBppyKRWH2KzsmweXUoklqeEiHiNVWaeP5csIdsNq6w7QhzA==}
     engines: {node: '>=12.20'}
 
-  '@isaacs/balanced-match@4.0.1':
-    resolution: {integrity: sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==}
-    engines: {node: 20 || >=22}
+  '@hono/node-server@1.19.14':
+    resolution: {integrity: sha512-GwtvgtXxnWsucXvbQXkRgqksiH2Qed37H9xHZocE5sA3N8O8O8/8FA3uclQXxXVzc9XBZuEOMK7+r02FmSpHtw==}
+    engines: {node: '>=18.14.1'}
+    peerDependencies:
+      hono: ^4
 
-  '@isaacs/brace-expansion@5.0.1':
-    resolution: {integrity: sha512-WMz71T1JS624nWj2n2fnYAuPovhv7EUhk69R6i9dsVyzxt5eM3bjwvgk9L+APE1TRscGysAVMANkB0jh0LQZrQ==}
-    engines: {node: 20 || >=22}
+  '@humanfs/core@0.19.1':
+    resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanfs/node@0.16.7':
+    resolution: {integrity: sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanwhocodes/module-importer@1.0.1':
+    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
+    engines: {node: '>=12.22'}
+
+  '@humanwhocodes/retry@0.4.3':
+    resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
+    engines: {node: '>=18.18'}
+
+  '@ioredis/commands@1.5.1':
+    resolution: {integrity: sha512-JH8ZL/ywcJyR9MmJ5BNqZllXNZQqQbnVZOqpPQqE1vHiFgAw4NHbvE0FOduNU8IX9babitBT46571OnPTT0Zcw==}
 
   '@isaacs/cliui@8.0.2':
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
@@ -674,6 +1399,9 @@ packages:
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
 
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
   '@jridgewell/resolve-uri@3.1.2':
     resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
     engines: {node: '>=6.0.0'}
@@ -687,14 +1415,44 @@ packages:
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
+  '@keyv/serialize@1.1.1':
+    resolution: {integrity: sha512-dXn3FZhPv0US+7dtJsIi2R+c7qWYiReoEh5zUntWCf4oSpMNib8FDhSoed6m3QyZdx5hK7iLFkYk3rNxwt8vTA==}
+
   '@kwsites/file-exists@1.1.1':
     resolution: {integrity: sha512-m9/5YGR18lIwxSFDwfE3oA7bWuq9kdau6ugN4H2rJeyhFQZcG9AgSHkQtSD15a8WvTgfz9aikZMrKPHvbpqFiw==}
 
   '@kwsites/promise-deferred@1.1.1':
     resolution: {integrity: sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==}
 
-  '@napi-rs/wasm-runtime@1.1.1':
-    resolution: {integrity: sha512-p64ah1M1ld8xjWv3qbvFwHiFVWrq1yFvV4f7w+mzaqiR4IlSgkqhcRdHwsGgomwzBH51sRY4NEowLxnaBjcW/A==}
+  '@mapbox/node-pre-gyp@2.0.3':
+    resolution: {integrity: sha512-uwPAhccfFJlsfCxMYTwOdVfOz3xqyj8xYL3zJj8f0pb30tLohnnFPhLuqp4/qoEz8sNxe4SESZedcBojRefIzg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  '@mdx-js/react@3.1.1':
+    resolution: {integrity: sha512-f++rKLQgUVYDAtECQ6fn/is15GkEH9+nZPM3MS0RcxVqoTfawHvDlSCH7JbMhAM6uJ32v3eXLvLmLvjGu7PTQw==}
+    peerDependencies:
+      '@types/react': '>=16'
+      react: '>=16'
+
+  '@modelcontextprotocol/sdk@1.29.0':
+    resolution: {integrity: sha512-zo37mZA9hJWpULgkRpowewez1y6ML5GsXJPY8FI0tBBCd77HEvza4jDqRKOXgHNn867PVGCyTdzqpz0izu5ZjQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@cfworker/json-schema': ^4.1.1
+      zod: ^3.25 || ^4.0
+    peerDependenciesMeta:
+      '@cfworker/json-schema':
+        optional: true
+
+  '@napi-rs/wasm-runtime@1.1.4':
+    resolution: {integrity: sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow==}
+    peerDependencies:
+      '@emnapi/core': ^1.7.1
+      '@emnapi/runtime': ^1.7.1
+
+  '@nodable/entities@2.1.1':
+    resolution: {integrity: sha512-Pig3HxDIoMgjdEH8OCf/dkcTmLFjJRjWuq8jSnklu284/TKOPibSRERmOykiwmyXTtv61mP+44f3GMx0tLAyjg==}
 
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
@@ -708,106 +1466,182 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
-  '@npmcli/agent@4.0.0':
-    resolution: {integrity: sha512-kAQTcEN9E8ERLVg5AsGwLNoFb+oEG6engbqAU2P43gD4JEIkNGMHdVQ096FsOAAYpZPB0RSt0zgInKIAS1l5QA==}
-    engines: {node: ^20.17.0 || >=22.9.0}
-
   '@npmcli/fs@5.0.0':
     resolution: {integrity: sha512-7OsC1gNORBEawOa5+j2pXN9vsicaIOH5cPXxoR6fJOmH6/EXpJB2CajXOu1fPRFun2m1lktEFX11+P89hqO/og==}
     engines: {node: ^20.17.0 || >=22.9.0}
 
+  '@nuxt/cli@3.35.2':
+    resolution: {integrity: sha512-sCxNnFuYamqippdj+Cj4Nue55yaUvasaneyf2mnowK5/F1TKln/WVqTH18McxQ4baLlIlVapIFovKjJx1L8XMQ==}
+    engines: {node: ^16.14.0 || >=18.0.0}
+    hasBin: true
+    peerDependencies:
+      '@nuxt/schema': ^4.4.5
+    peerDependenciesMeta:
+      '@nuxt/schema':
+        optional: true
+
+  '@nuxt/devalue@2.0.2':
+    resolution: {integrity: sha512-GBzP8zOc7CGWyFQS6dv1lQz8VVpz5C2yRszbXufwG/9zhStTIH50EtD87NmWbTMwXDvZLNg8GIpb1UFdH93JCA==}
+
+  '@nuxt/devtools-kit@3.2.4':
+    resolution: {integrity: sha512-Yxy2Xgmq5hf3dQy983V0xh0OJV2mYwRZz9eVIGc3EaribdFGPDNGMMbYqX9qCty3Pbxn/bCF3J0UyPaNlHVayQ==}
+    peerDependencies:
+      vite: '>=6.0'
+
+  '@nuxt/devtools-wizard@3.2.4':
+    resolution: {integrity: sha512-5tu2+Quu9XTxwtpzM8CUN0UKn/bzZIfJcoGd+at5Yy1RiUQJ4E52tRK0idW1rMSUDkbkvX3dSnu8Tpj7SAtWdQ==}
+    hasBin: true
+
+  '@nuxt/devtools@3.2.4':
+    resolution: {integrity: sha512-VPbFy7hlPzWpEZk4BsuVpNuHq1ZYGV9xezjb7/NGuePuNLqeNn74YZugU+PCtva7OwKhEeTXmMK0Mqo/6+nwNA==}
+    hasBin: true
+    peerDependencies:
+      '@vitejs/devtools': '*'
+      vite: '>=6.0'
+    peerDependenciesMeta:
+      '@vitejs/devtools':
+        optional: true
+
+  '@nuxt/fonts@0.14.0':
+    resolution: {integrity: sha512-4uXQl9fa5F4ibdgU8zomoOcyMdnwgdem+Pi8JEqeDYI5yPR32Kam6HnuRr47dTb97CstaepAvXPWQUUHMtjsFQ==}
+
+  '@nuxt/kit@4.4.7':
+    resolution: {integrity: sha512-QwtpqNxSOLyJH1UoDpcgsfzVEw95J0893hn1A+CvgeOxoTos1BGvD15D1v/OVQ2MK1EpfnFZJby51t1yudOvBA==}
+    engines: {node: '>=18.12.0'}
+
+  '@nuxt/nitro-server@4.4.7':
+    resolution: {integrity: sha512-mlu/DQ2P0CUb62uKlWr/uiWEG//gxEzGoTHtqREb1iso15zMmRMpFajILOdCknSGNoOyDOhqdAe7w6Yod9o50g==}
+    engines: {node: ^22.12.0 || ^24.11.0 || >=26.0.0}
+    peerDependencies:
+      '@babel/plugin-proposal-decorators': ^7.25.0
+      '@babel/plugin-syntax-typescript': ^7.25.0
+      '@rollup/plugin-babel': ^6.0.0 || ^7.0.0
+      nuxt: ^4.4.7
+    peerDependenciesMeta:
+      '@babel/plugin-proposal-decorators':
+        optional: true
+      '@babel/plugin-syntax-typescript':
+        optional: true
+      '@rollup/plugin-babel':
+        optional: true
+
+  '@nuxt/schema@4.4.7':
+    resolution: {integrity: sha512-jcyXJlOR/GmxDQHrIEdEevUCUuBv7B6GCQXIBt4oKTCasIwWgGuqo48IM35RsxdQVTb4tBohnqJbS2lKJlCBWg==}
+    engines: {node: ^14.18.0 || >=16.10.0}
+
+  '@nuxt/telemetry@2.8.0':
+    resolution: {integrity: sha512-zAwXY24KYvpLTmiV+osagd2EHkfs5IF+7oDZYTQoit5r0kPlwaCNlzHp5I/wUAWT4LBw6lG8gZ6bWidAdv/erQ==}
+    engines: {node: '>=18.12.0'}
+    hasBin: true
+    peerDependencies:
+      '@nuxt/kit': '>=3.0.0'
+
+  '@nuxt/vite-builder@4.4.7':
+    resolution: {integrity: sha512-EnMofNWpZF/dg4948PXk1kqrdR5uUR301sSudVbYj4DCjCa4NnBISwRbd4qe04F5Yw5OMHcR3svd8phZm1Yc7Q==}
+    engines: {node: ^22.12.0 || ^24.11.0 || >=26.0.0}
+    peerDependencies:
+      '@babel/plugin-proposal-decorators': ^7.25.0
+      '@babel/plugin-syntax-jsx': ^7.25.0
+      nuxt: 4.4.7
+      rolldown: ^1.0.0-beta.38
+      rollup-plugin-visualizer: ^6.0.0 || ^7.0.1
+      vue: ^3.3.4
+    peerDependenciesMeta:
+      '@babel/plugin-proposal-decorators':
+        optional: true
+      '@babel/plugin-syntax-jsx':
+        optional: true
+      rolldown:
+        optional: true
+      rollup-plugin-visualizer:
+        optional: true
+
   '@one-ini/wasm@0.1.1':
     resolution: {integrity: sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==}
 
-  '@one-ini/wasm@0.2.0':
-    resolution: {integrity: sha512-n+L/BvrwKUn7q5O3wHGo+CJZAqfewh38+37sk+eBzv/39lM9pPgPRd4sOZRvSRzo0ukLxzyXso4WlGj2oKZ5hA==}
+  '@one-ini/wasm@0.2.1':
+    resolution: {integrity: sha512-TUqERXGNTifZ9y2g3wPxQrw3HpHv/02DsW3D90T9x0hhonrL1ZqpSmNrU2XkoIq0fP1N6gZfVQzy2Fw1ZvGBNg==}
 
-  '@opentelemetry/api-logs@0.211.0':
-    resolution: {integrity: sha512-swFdZq8MCdmdR22jTVGQDhwqDzcI4M10nhjXkLr1EsIzXgZBqm4ZlmmcWsg3TSNf+3mzgOiqveXmBLZuDi2Lgg==}
+  '@opentelemetry/api-logs@0.218.0':
+    resolution: {integrity: sha512-fmEWp5kXlGEc3i/lR698Hz41DfGyN4Tbe4g7L1AxSc7fF8Xeh/FQ9Quqpa9dVA413Q1Ad43QOLzU4JoXgbFPWw==}
     engines: {node: '>=8.0.0'}
 
-  '@opentelemetry/api@1.9.0':
-    resolution: {integrity: sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==}
+  '@opentelemetry/api@1.9.1':
+    resolution: {integrity: sha512-gLyJlPHPZYdAk1JENA9LeHejZe1Ti77/pTeFm/nMXmQH/HFZlcS/O2XJB+L8fkbrNSqhdtlvjBVjxwUYanNH5Q==}
     engines: {node: '>=8.0.0'}
 
-  '@opentelemetry/context-async-hooks@2.5.0':
-    resolution: {integrity: sha512-uOXpVX0ZjO7heSVjhheW2XEPrhQAWr2BScDPoZ9UDycl5iuHG+Usyc3AIfG6kZeC1GyLpMInpQ6X5+9n69yOFw==}
+  '@opentelemetry/context-async-hooks@2.7.1':
+    resolution: {integrity: sha512-OPFBYuXEn1E4ja3Y6eeA7O+ZnLBNcXTV5Cgsn1VaqBZ6hC5FnpZPLBNme1LJY8ZtF4aOujPKFoeWN4ik487KuQ==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': '>=1.0.0 <1.10.0'
 
-  '@opentelemetry/core@2.0.1':
-    resolution: {integrity: sha512-MaZk9SJIDgo1peKevlbhP6+IwIiNPNmswNL4AF0WaQJLbHXjr9SrZMgS12+iqr9ToV4ZVosCcc0f8Rg67LXjxw==}
+  '@opentelemetry/core@2.7.1':
+    resolution: {integrity: sha512-QAqIj32AtK6+pEVNG7EOVxHdE06RP+FM5qpiEJ4RtDcFIqKUZHYhl7/7UY5efhwmwNAg7j8QbJVBLxMerc0+gw==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': '>=1.0.0 <1.10.0'
 
-  '@opentelemetry/core@2.5.0':
-    resolution: {integrity: sha512-ka4H8OM6+DlUhSAZpONu0cPBtPPTQKxbxVzC4CzVx5+K4JnroJVBtDzLAMx4/3CDTJXRvVFhpFjtl4SaiTNoyQ==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': '>=1.0.0 <1.10.0'
-
-  '@opentelemetry/exporter-trace-otlp-http@0.211.0':
-    resolution: {integrity: sha512-F1Rv3JeMkgS//xdVjbQMrI3+26e5SXC7vXA6trx8SWEA0OUhw4JHB+qeHtH0fJn46eFItrYbL5m8j4qi9Sfaxw==}
+  '@opentelemetry/exporter-trace-otlp-http@0.218.0':
+    resolution: {integrity: sha512-8dqezsmPhtKitIK/eTipZhYl9EX2/gNQ5zUMhaz3uxEURwfkNf8IPvo6yNfrzbxdtpAOybS/+h7wmIWYqFSpiw==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-bunyan@0.56.0':
-    resolution: {integrity: sha512-cTt3gLGxBvgjgUTBeMz6MaFAHXFQM/N3411mZFTzlczuOQTlsuJTn+fWTah/a0el9NsepO5LdbULRBNmA9rSUw==}
+  '@opentelemetry/instrumentation-bunyan@0.63.0':
+    resolution: {integrity: sha512-z0xPSZ62d3I7sG2sUTyQ5/ES1RdESP2eOETiMLY9gPSp+HZwbsAyj7T/2sdZKYD+O2ajRHZEil+DBoUolf1ocQ==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-http@0.211.0':
-    resolution: {integrity: sha512-n0IaQ6oVll9PP84SjbOCwDjaJasWRHi6BLsbMLiT6tNj7QbVOkuA5sk/EfZczwI0j5uTKl1awQPivO/ldVtsqA==}
+  '@opentelemetry/instrumentation-http@0.218.0':
+    resolution: {integrity: sha512-x9djaqdzpT8WAboep1H9nCAQ1E+MMsm08TNfA02TqM3bNNddZeiim+E3KMWVQFaX6JpUy7V0nm/wfN/K2Em+Zw==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-redis@0.59.0':
-    resolution: {integrity: sha512-JKv1KDDYA2chJ1PC3pLP+Q9ISMQk6h5ey+99mB57/ARk0vQPGZTTEb4h4/JlcEpy7AYT8HIGv7X6l+br03Neeg==}
+  '@opentelemetry/instrumentation-redis@0.66.0':
+    resolution: {integrity: sha512-bVShkag6vP2VQO0cpA8CHjOohWbKNYLyjiwGkOnSAwou1TPc6pf9DssFUxwqN2XF1J4oqP0LVSvN9kZUzMecfA==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation@0.211.0':
-    resolution: {integrity: sha512-h0nrZEC/zvI994nhg7EgQ8URIHt0uDTwN90r3qQUdZORS455bbx+YebnGeEuFghUT0HlJSrLF4iHw67f+odY+Q==}
+  '@opentelemetry/instrumentation@0.218.0':
+    resolution: {integrity: sha512-mIZil8Es+sYDK5m+DQiwAwF57F14TF2YlEqvIjZ/RQWcxDBwRGsKfdK2Tv65OU9meQKCMzSIFS9mxAcnAb6Bkg==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/otlp-exporter-base@0.211.0':
-    resolution: {integrity: sha512-bp1+63V8WPV+bRI9EQG6E9YID1LIHYSZVbp7f+44g9tRzCq+rtw/o4fpL5PC31adcUsFiz/oN0MdLISSrZDdrg==}
+  '@opentelemetry/otlp-exporter-base@0.218.0':
+    resolution: {integrity: sha512-ZwqpkNL5W7RyGJPDZ9g06DvKp8KFTWPJPN12anpMQYSKpTSU0z3EIZuPq9vPGpS8siFyOqDYDAuCwlNO9FqgbA==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/otlp-transformer@0.211.0':
-    resolution: {integrity: sha512-julhCJ9dXwkOg9svuuYqqjXLhVaUgyUvO2hWbTxwjvLXX2rG3VtAaB0SzxMnGTuoCZizBT7Xqqm2V7+ggrfCXA==}
+  '@opentelemetry/otlp-transformer@0.218.0':
+    resolution: {integrity: sha512-CFaKH87WAzjuJ4awowTTLzUvMfaRfiOFG5+qm5S5ncyalRtN4ecQ+YmuANJSCrVPuvZFEkUgKhBPBndxi3rHsQ==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/redis-common@0.38.2':
-    resolution: {integrity: sha512-1BCcU93iwSRZvDAgwUxC/DV4T/406SkMfxGqu5ojc3AvNI+I9GhV7v0J1HljsczuuhcnFLYqD5VmwVXfCGHzxA==}
+  '@opentelemetry/redis-common@0.38.3':
+    resolution: {integrity: sha512-VCghU1JYs/4gP6Gqf/xro9MEsZ7LrMv2uONVsaESKL38ZOB9BqnI98FfS23wjMnHlpuE+TTaWSoAVNpTwYXzjw==}
     engines: {node: ^18.19.0 || >=20.6.0}
 
-  '@opentelemetry/resource-detector-aws@2.11.0':
-    resolution: {integrity: sha512-Wphbm9fGyinMLC8BiLU/5aK6yG191ws2q2SN4biCcQZQCTo6yEij4ka+fXQXAiLMGSzb5w8wa/FxOn/7KWPiSQ==}
+  '@opentelemetry/resource-detector-aws@2.18.0':
+    resolution: {integrity: sha512-wyMM4UoRuHvI2KjqnTzvyW8Yv7MKRGA+I78Xti6gTEw7hBhqXU1SRo+f9KrsQfeeiOn+TkDuvxavuaAQbD3i6g==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.0.0
 
-  '@opentelemetry/resource-detector-azure@0.19.0':
-    resolution: {integrity: sha512-3UBJYyAfQY7aqot4xBvTsGlxi9Ax5XwWlddCvFPNIfZiy5KX405w3KThcRypadVsP5Q9D/lr/WAn5J+xXTqJoA==}
+  '@opentelemetry/resource-detector-azure@0.26.0':
+    resolution: {integrity: sha512-7KxF7mlwI2nKja/iEdwPqOaS0QAJbhT9ye4DeYZnXdOS/4phfonk5nSmyGDBYhBL7J30MPL91oZNuGYRKXZAXA==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.0.0
 
-  '@opentelemetry/resource-detector-gcp@0.46.0':
-    resolution: {integrity: sha512-CulcNXV/a4lc4TTYFdApTfRg4DlCwiUilsXnEsRfFSK/p/EbkfgEQz8hB4tZF5z/Us9MnhtuT6l4Kj4Ng8qLcw==}
+  '@opentelemetry/resource-detector-gcp@0.53.0':
+    resolution: {integrity: sha512-RCV31v23ZwZfYR3LPkuORHTHIOvfm3hZBT7hAzSO0+oAIrG/Dm0ld5tV4lYNO05GjI7sHQdRcbSqzEYAvQcQuw==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.0.0
@@ -818,165 +1652,882 @@ packages:
     peerDependencies:
       '@opentelemetry/api': ^1.0.0
 
-  '@opentelemetry/resources@2.5.0':
-    resolution: {integrity: sha512-F8W52ApePshpoSrfsSk1H2yJn9aKjCrbpQF1M9Qii0GHzbfVeFUB+rc3X4aggyZD8x9Gu3Slua+s6krmq6Dt8g==}
+  '@opentelemetry/resources@2.7.1':
+    resolution: {integrity: sha512-DeT6KKolmC4e/dRQvMQ/RwlnzhaqeiFOXY5ngoOPJ07GgVVKxZOg9EcrNZb5aTzUn+iCrJldAgOfQm1O/QfPAQ==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': '>=1.3.0 <1.10.0'
 
-  '@opentelemetry/sdk-logs@0.211.0':
-    resolution: {integrity: sha512-O5nPwzgg2JHzo59kpQTPUOTzFi0Nv5LxryG27QoXBciX3zWM3z83g+SNOHhiQVYRWFSxoWn1JM2TGD5iNjOwdA==}
+  '@opentelemetry/sdk-logs@0.218.0':
+    resolution: {integrity: sha512-QvnNdugatFTVCJXH0Mcu7GOOJSylA9j127kIezOE4YwTI4YbowRons2K4WZTv5FMS8T4q9P0NdaRHdkSmeAIag==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': '>=1.4.0 <1.10.0'
 
-  '@opentelemetry/sdk-metrics@2.5.0':
-    resolution: {integrity: sha512-BeJLtU+f5Gf905cJX9vXFQorAr6TAfK3SPvTFqP+scfIpDQEJfRaGJWta7sJgP+m4dNtBf9y3yvBKVAZZtJQVA==}
+  '@opentelemetry/sdk-metrics@2.7.1':
+    resolution: {integrity: sha512-MpDJdkiFDs3Pm1RHO3KByuZbuBdJEXEAkiC0+yJdsZGVCdf1RpHR6n+LHDcS7ffmfrt5kVCzJSCfm4z2C7v0uQ==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': '>=1.9.0 <1.10.0'
 
-  '@opentelemetry/sdk-trace-base@2.5.0':
-    resolution: {integrity: sha512-VzRf8LzotASEyNDUxTdaJ9IRJ1/h692WyArDBInf5puLCjxbICD6XkHgpuudis56EndyS7LYFmtTMny6UABNdQ==}
+  '@opentelemetry/sdk-trace-base@2.7.1':
+    resolution: {integrity: sha512-NAYIlsF8MPUsKqJMiDQJTMPOmlbawC1Iz/omMLygZ1C9am8fTKYjTaI+OZM+WTY3t3Glo0wnOg/6/pac6RGPPw==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': '>=1.3.0 <1.10.0'
 
-  '@opentelemetry/sdk-trace-node@2.5.0':
-    resolution: {integrity: sha512-O6N/ejzburFm2C84aKNrwJVPpt6HSTSq8T0ZUMq3xT2XmqT4cwxUItcL5UWGThYuq8RTcbH8u1sfj6dmRci0Ow==}
+  '@opentelemetry/sdk-trace-node@2.7.1':
+    resolution: {integrity: sha512-pCpQxU68lV+I9s9svqMyVu5iHdDDUnqUpSxqwyCU8A9ejEsSnMPCbearwsUO4yk08ZJzAIUCFuReMdVQvHrdvg==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': '>=1.0.0 <1.10.0'
 
-  '@opentelemetry/semantic-conventions@1.39.0':
-    resolution: {integrity: sha512-R5R9tb2AXs2IRLNKLBJDynhkfmx7mX0vi8NkhZb3gUkPWHn6HXk5J8iQ/dql0U3ApfWym4kXXmBDRGO+oeOfjg==}
+  '@opentelemetry/semantic-conventions@1.41.1':
+    resolution: {integrity: sha512-/UhIkaZgPutTFmQ7RnIJGgDXZmtEJ7Dvi86xNTFWcnRxVRNk/aotsqDJYeEvDP+FSMB2SdW+pQzNMcWP0rwuNA==}
     engines: {node: '>=14'}
 
-  '@oxc-project/types@0.113.0':
-    resolution: {integrity: sha512-Tp3XmgxwNQ9pEN9vxgJBAqdRamHibi76iowQ38O2I4PMpcvNRQNVsU2n1x1nv9yh0XoTrGFzf7cZSGxmixxrhA==}
-
-  '@oxlint/binding-android-arm-eabi@1.47.0':
-    resolution: {integrity: sha512-UHqo3te9K/fh29brCuQdHjN+kfpIi9cnTPABuD5S9wb9ykXYRGTOOMVuSV/CK43sOhU4wwb2nT1RVjcbrrQjFw==}
+  '@oxc-minify/binding-android-arm-eabi@0.133.0':
+    resolution: {integrity: sha512-D8M1+nqwLaACHZsld/t6f+cE4N97XOu5iQ88f1ZaYH4ptFzFrXo5N7wUKACTI4xmNUD+6W0Y4Apk5U2r8HLdBQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [android]
 
-  '@oxlint/binding-android-arm64@1.47.0':
-    resolution: {integrity: sha512-xh02lsTF1TAkR+SZrRMYHR/xCx8Wg2MAHxJNdHVpAKELh9/yE9h4LJeqAOBbIb3YYn8o/D97U9VmkvkfJfrHfw==}
+  '@oxc-minify/binding-android-arm64@0.133.0':
+    resolution: {integrity: sha512-dnQUJdpOEh/nZfQtvGGN61VcCCcPJ2aCm+ndl8GIA2lk2GpmIBgZ9h+phLVhgUFGt2es+2AQc0xvtK7RFNsViw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [android]
 
-  '@oxlint/binding-darwin-arm64@1.47.0':
-    resolution: {integrity: sha512-OSOfNJqabOYbkyQDGT5pdoL+05qgyrmlQrvtCO58M4iKGEQ/xf3XkkKj7ws+hO+k8Y4VF4zGlBsJlwqy7qBcHA==}
+  '@oxc-minify/binding-darwin-arm64@0.133.0':
+    resolution: {integrity: sha512-K6+aXlOlsCcibpTiTitQYNXWGGwea0fEKF/kGHCNB+MNqOLCkdC7wesycaABYcXcyr58DhDoJnVb8E4Hq95iVw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
 
-  '@oxlint/binding-darwin-x64@1.47.0':
-    resolution: {integrity: sha512-hP2bOI4IWNS+F6pVXWtRshSTuJ1qCRZgDgVUg6EBUqsRy+ExkEPJkx+YmIuxgdCduYK1LKptLNFuQLJP8voPbQ==}
+  '@oxc-minify/binding-darwin-x64@0.133.0':
+    resolution: {integrity: sha512-BFEXHxYNwThyaO63p1VE5MOOXNGkHsHfkmajOCKXH40TfllTHQenXhpJ9mHDoF7EhaQjArpPjlDY88BuPjhurw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
 
-  '@oxlint/binding-freebsd-x64@1.47.0':
-    resolution: {integrity: sha512-F55jIEH5xmGu7S661Uho8vGiLFk0bY3A/g4J8CTKiLJnYu/PSMZ2WxFoy5Hji6qvFuujrrM9Q8XXbMO0fKOYPg==}
+  '@oxc-minify/binding-freebsd-x64@0.133.0':
+    resolution: {integrity: sha512-oT5dbcXnS/cbpdXCpudAeVg/fqH1XnKhLUE/vkuRTuocjOd/GA2MoNMMhLWUvqNXO0xJnYmo2ISmDxShkItfOQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
 
-  '@oxlint/binding-linux-arm-gnueabihf@1.47.0':
-    resolution: {integrity: sha512-wxmOn/wns/WKPXUC1fo5mu9pMZPVOu8hsynaVDrgmmXMdHKS7on6bA5cPauFFN9tJXNdsjW26AK9lpfu3IfHBQ==}
+  '@oxc-minify/binding-linux-arm-gnueabihf@0.133.0':
+    resolution: {integrity: sha512-tJ3B+b7DOuTsIMXSmu5xHHCakrBqqcrp4COYd/lelOdDvkbFoDRGnwH91POUOSUEOI/WLzIMkDqAH2SZ3N2jhQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@oxlint/binding-linux-arm-musleabihf@1.47.0':
-    resolution: {integrity: sha512-KJTmVIA/GqRlM2K+ZROH30VMdydEU7bDTY35fNg3tOPzQRIs2deLZlY/9JWwdWo1F/9mIYmpbdCmPqtKhWNOPg==}
+  '@oxc-minify/binding-linux-arm-musleabihf@0.133.0':
+    resolution: {integrity: sha512-XMUHfdilk1KTtOM2vA1bwDso07/wkLm/GgDOO9z/ioxrZoQyjXnJRW665VXa08z2BqEgwHRc1zH9p7s6sKPQbg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@oxlint/binding-linux-arm64-gnu@1.47.0':
-    resolution: {integrity: sha512-PF7ELcFg1GVlS0X0ZB6aWiXobjLrAKer3T8YEkwIoO8RwWiAMkL3n3gbleg895BuZkHVlJ2kPRUwfrhHrVkD1A==}
+  '@oxc-minify/binding-linux-arm64-gnu@0.133.0':
+    resolution: {integrity: sha512-UEff2jopbwJ4SndmxK06uqXrOpwWiJERJPdgDTBywwXP9QgW0p1YkQnBNt4+jK0I/hdLpbbyaCLLuUPKbaU70w==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@oxlint/binding-linux-arm64-musl@1.47.0':
-    resolution: {integrity: sha512-4BezLRO5cu0asf0Jp1gkrnn2OHiXrPPPEfBTxq1k5/yJ2zdGGTmZxHD2KF2voR23wb8Elyu3iQawXo7wvIZq0Q==}
+  '@oxc-minify/binding-linux-arm64-musl@0.133.0':
+    resolution: {integrity: sha512-yqskeIapQvx7Tu/OLsepLPcGsHGzfYy9PX6gIbhaOHfF+LA2zHBKnKb587FGx+lQjHLQR0llfmoSuXQ6q2EN+A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@oxlint/binding-linux-ppc64-gnu@1.47.0':
-    resolution: {integrity: sha512-aI5ds9jq2CPDOvjeapiIj48T/vlWp+f4prkxs+FVzrmVN9BWIj0eqeJ/hV8WgXg79HVMIz9PU6deI2ki09bR1w==}
+  '@oxc-minify/binding-linux-ppc64-gnu@0.133.0':
+    resolution: {integrity: sha512-r7PnUNxRB9D/gQjCVeasoieJVUF48n43rvk/jYbGAw9sRfYGoEo/rOs0GyTZU9ttss8HzjBaerAbADbAL8K8vw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ppc64]
     os: [linux]
     libc: [glibc]
 
-  '@oxlint/binding-linux-riscv64-gnu@1.47.0':
-    resolution: {integrity: sha512-mO7ycp9Elvgt5EdGkQHCwJA6878xvo9tk+vlMfT1qg++UjvOMB8INsOCQIOH2IKErF/8/P21LULkdIrocMw9xA==}
+  '@oxc-minify/binding-linux-riscv64-gnu@0.133.0':
+    resolution: {integrity: sha512-omXWC8I9lAMMjQIeadfItP5H4VDAiuU2BiVCtHMH3ktTbFq04sxscZhK4NFUUuw3fApDdXmfd7LW18q0JBHarg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
     libc: [glibc]
 
-  '@oxlint/binding-linux-riscv64-musl@1.47.0':
-    resolution: {integrity: sha512-24D0wsYT/7hDFn3Ow32m3/+QT/1ZwrUhShx4/wRDAmz11GQHOZ1k+/HBuK/MflebdnalmXWITcPEy4BWTi7TCA==}
+  '@oxc-minify/binding-linux-riscv64-musl@0.133.0':
+    resolution: {integrity: sha512-LtFA3Hi8LVD/zuiPLKy9Aiz7N1IOj8rRhdXiW38GKQ9mAhj+Ko6IHGcTk2A7yNDA1DZBl7r+Qd4PEGWgVelPPw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
     libc: [musl]
 
-  '@oxlint/binding-linux-s390x-gnu@1.47.0':
-    resolution: {integrity: sha512-8tPzPne882mtML/uy3mApvdCyuVOpthJ7xUv3b67gVfz63hOOM/bwO0cysSkPyYYFDFRn6/FnUb7Jhmsesntvg==}
+  '@oxc-minify/binding-linux-s390x-gnu@0.133.0':
+    resolution: {integrity: sha512-rFsPDsT1j3beSInbrFukAAlTg101PcqdVMXDioR9AgJ1180tZ8s8D+pNDpQTRmPd3956mnpAE+Cs77Xoo/QZAQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
-  '@oxlint/binding-linux-x64-gnu@1.47.0':
-    resolution: {integrity: sha512-q58pIyGIzeffEBhEgbRxLFHmHfV9m7g1RnkLiahQuEvyjKNiJcvdHOwKH2BdgZxdzc99Cs6hF5xTa86X40WzPw==}
+  '@oxc-minify/binding-linux-x64-gnu@0.133.0':
+    resolution: {integrity: sha512-xlrtAmDWZI8BEmsaXMYfblWuLIY5UnnRkit1VLkmVDb5ceZRZf4oEXK1QeYf5Z33dT0WK1Ek++P+TL/ZMCpyGQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@oxlint/binding-linux-x64-musl@1.47.0':
-    resolution: {integrity: sha512-e7DiLZtETZUCwTa4EEHg9G+7g3pY+afCWXvSeMG7m0TQ29UHHxMARPaEQUE4mfKgSqIWnJaUk2iZzRPMRdga5g==}
+  '@oxc-minify/binding-linux-x64-musl@0.133.0':
+    resolution: {integrity: sha512-kd36CDkTkZDMNfVceNTSfpWnitE1+GjZmzJCeq8yaxsgvs/MXg8aauI2RgFjElYZIHSMyZku4pQ7Jtl3ZEYI6w==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@oxlint/binding-openharmony-arm64@1.47.0':
-    resolution: {integrity: sha512-3AFPfQ0WKMleT/bKd7zsks3xoawtZA6E/wKf0DjwysH7wUiMMJkNKXOzYq1R/00G98JFgSU1AkrlOQrSdNNhlg==}
+  '@oxc-minify/binding-openharmony-arm64@0.133.0':
+    resolution: {integrity: sha512-pI38dJBqfkNbFoL/GEarAzGDjKGVCZTdg0a8NKh1PP9GqWleXT6HLtXE4CZ+54e+2u68qVYVBwhbWAiRfwlUZA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [openharmony]
 
-  '@oxlint/binding-win32-arm64-msvc@1.47.0':
-    resolution: {integrity: sha512-cLMVVM6TBxp+N7FldQJ2GQnkcLYEPGgiuEaXdvhgvSgODBk9ov3jed+khIXSAWtnFOW0wOnG3RjwqPh0rCuheA==}
+  '@oxc-minify/binding-wasm32-wasi@0.133.0':
+    resolution: {integrity: sha512-AkLr+d+LLY4/55J/TrE0srNBUpZPzyU+cygdse7yZ9AhCndryNqe2y6e8naVK0TV7n8lxBd2OGGJAkho6blAkw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [wasm32]
+
+  '@oxc-minify/binding-win32-arm64-msvc@0.133.0':
+    resolution: {integrity: sha512-V92v7397t2073g+mSfaLHnPeoz6hA/1U4JNLeUBP87eWGZgVxDZ2qz3t3wFyYqXGJ/0VoEwdP8yrHLQQ7QzAOQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
 
-  '@oxlint/binding-win32-ia32-msvc@1.47.0':
-    resolution: {integrity: sha512-VpFOSzvTnld77/Edje3ZdHgZWnlTb5nVWXyTgjD3/DKF/6t5bRRbwn3z77zOdnGy44xAMvbyAwDNOSeOdVUmRA==}
+  '@oxc-minify/binding-win32-ia32-msvc@0.133.0':
+    resolution: {integrity: sha512-2DP5RbG/SSaRVtmuwgTH6Ati4+uuOJjoI88dQnC5hD0zCC90EVDXZSXyJQ5i/OxLE1UAy58Wo2DJot/OrUspzA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ia32]
     os: [win32]
 
-  '@oxlint/binding-win32-x64-msvc@1.47.0':
-    resolution: {integrity: sha512-+q8IWptxXx2HMTM6JluR67284t0h8X/oHJgqpxH1siowxPMqZeIpAcWCUq+tY+Rv2iQK8TUugjZnSBQAVV5CmA==}
+  '@oxc-minify/binding-win32-x64-msvc@0.133.0':
+    resolution: {integrity: sha512-PJ75c6PlBx87tau0W35J43eGCv4wrDmdZ+4ddTZAnGtZqEeCVsLdmDPOEMe2DepogqlSVUF2kGBWtnFUJ5c7Rw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [win32]
 
+  '@oxc-parser/binding-android-arm-eabi@0.127.0':
+    resolution: {integrity: sha512-0LC7ye4hvqbIKxAzThzvswgHLFu2AURKzYLeSVvLdu2TBOYWQDmHnTqPLeA597BcUCxiLqLsS4CJ5uoI5WYWCQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
+
+  '@oxc-parser/binding-android-arm-eabi@0.133.0':
+    resolution: {integrity: sha512-l/44caGse+VpnY9gx0yvvc5QnnG3yG1FO3KZgYvNL1GZrfK86zIwAOgGEVlxDyRymzrU/KHiblPFpevKOmJmUA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
+
+  '@oxc-parser/binding-android-arm64@0.127.0':
+    resolution: {integrity: sha512-b5jtVTH6AU5CJXHNdj7Jj9IEiR9yVjjnwHzPJhGyHGPdcsZSzBCkS9GBbV33niRMvKthDwQRFRJfI4a+k4PvYg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@oxc-parser/binding-android-arm64@0.133.0':
+    resolution: {integrity: sha512-KUHmPMziLBp4u+zbrLdB7iWS7KshuZe+RAp7ELnY9SI9nNXBZ+dp8fiBqWOxhXqn+FQg3a4UcQhwmsJOKV8Jjg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@oxc-parser/binding-darwin-arm64@0.127.0':
+    resolution: {integrity: sha512-obCE8B7ISKkJidjlhv9xRGJPOSDG2Yu6PRga9Ruaz35uintHxbp1Ki/Yc71wx4rj3Edrm0a1kzG1TAwit0wFpg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxc-parser/binding-darwin-arm64@0.133.0':
+    resolution: {integrity: sha512-q8dWmnU/8ea2tga9w2f1PinQ5rcMPDUGkF64T189b65YMjUomET4oy5oRldOr4AwOQkneOG/Zttnz1Dvrc62wg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxc-parser/binding-darwin-x64@0.127.0':
+    resolution: {integrity: sha512-JL6Xb5IwPQT8rUzlpsX7E+AgfcdNklXNPFp8pjCQQ5MQOQo5rtEB2ui+3Hgg9Sn7Y9Egj6YOLLiHhLpdAe12Aw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxc-parser/binding-darwin-x64@0.133.0':
+    resolution: {integrity: sha512-cOKeIELIB2bJnCKwqx4Rdj+1Lss/U6uCbLxRySZrhyOOQa1flKhwZFjEHRHxk8fU1NKmhK5OnTdPQ4CpjuFuVw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxc-parser/binding-freebsd-x64@0.127.0':
+    resolution: {integrity: sha512-SDQ/3MQFw58fqQz3Z1PhSKFF3JoCF4gmlNjziDm8X02tTahCw0qJbd7FGPDKw1i4VTBZene9JPyC3mHtSvi+wA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@oxc-parser/binding-freebsd-x64@0.133.0':
+    resolution: {integrity: sha512-OpaSv4pW3KgFrMYQxTaS0aOE4T1DQF3qZE/4B6uqqv1KgPWWd4UQhJALi8PJPX1RRV5K7ThKXRfF7qGg2+3l1A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.127.0':
+    resolution: {integrity: sha512-Av+D1MIqzV0YMGPT9we2SIZaMKD7Cxs4CvXSx/yxaWHewZjYEjScpOf5igc8IILASViw4WTnjlwUdI1KzVtDHQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.133.0':
+    resolution: {integrity: sha512-JGK1wlGrGwxBIlVSF7KWTX1/ru6BEtf28fRROztDRkLfiW+Kxa4onnriezMIiogfn9hVw2KzYcKiLjkLR2ns8A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-arm-musleabihf@0.127.0':
+    resolution: {integrity: sha512-Cs2fdJ8cPpFdeebj6p4dag8A4+56hPvZ0AhQQzlaLswGz1tz7bXt1nETLeorrM9+AMcWFFkqxcXwDGfTVidY8g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-arm-musleabihf@0.133.0':
+    resolution: {integrity: sha512-yuZO533Ftonxn/iyoqQzURzLQHMspvsIyfiCSNi1t/ER4eIQaR0SsmUOUm5b/lmSig7IWIUa5/BrbEkAPwcilQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-arm64-gnu@0.127.0':
+    resolution: {integrity: sha512-qdOfTcT6SY8gsJrrV92uyEUyjqMGPpIB5JZUG6QN5dukYd+7/j0kX6MwK1DgQj39jtUYixxPiaRUiEN1+0CXgQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-arm64-gnu@0.133.0':
+    resolution: {integrity: sha512-hvpbqT5pN2rR+3+xtWeizwfR/aZ0vGceg6TqYMl+ToxMpk9/tmnX7kSvQnfEUkoua8mhogzvIKsAkn0wxgblBA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-arm64-musl@0.127.0':
+    resolution: {integrity: sha512-EoTCZneNFU/P2qrpEM+RHmQwt+CvDkyGESG6qhr7KaegXLZwePfbrkCDfAk8/rhxbDUVGsZILX+2tqPzFtoFWA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-parser/binding-linux-arm64-musl@0.133.0':
+    resolution: {integrity: sha512-wJQGamIosQBoJHW9+S5XxrtKRo3eyJxsnS1XCPrqN0LHi8uw1pTqqTfn3t/NVuvbBg7Pumn4ez9Eidgcn0xbEg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-parser/binding-linux-ppc64-gnu@0.127.0':
+    resolution: {integrity: sha512-zALjmZYgxFLHjXeudcDF0xFGNydTAtkAeXAr2EuC17ywCyFxcmQra4w0BMde0Yi/re4Bi4iwEoEXtYN7l6eBLQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-ppc64-gnu@0.133.0':
+    resolution: {integrity: sha512-Koaz32/O5+abIfrNGdyndgRvdOZ9jEf5/z3Ep9h3h2QWpdDiUQpVwgH0OcMXCs+l9aXxPLtkupqyVig9W6FDKw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-riscv64-gnu@0.127.0':
+    resolution: {integrity: sha512-fPP8M6zQLS7Jz7o9d5ArUSuAuSK3e+WCYVrCpdzeCOejidtZExJ9tjhDrAd3HEPqARBCPmdpqxESPFqy44vkBQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-riscv64-gnu@0.133.0':
+    resolution: {integrity: sha512-R4vOjWzxhnNWHnVLeiB6jNuIifdy9vcMXZGPc7StXcxBovI+U2zg1QhZ9o8OjV80oGivs1lX5NfPLzk4IPqlRA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-riscv64-musl@0.127.0':
+    resolution: {integrity: sha512-7IcC4Ao02oGpfnjt+X/oF4U2mllo2qoSkw5xxiXNKL9MCTsTiAC6616beOuehdxGcnz1bRoPC1RQ2f1GQDdN+g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-parser/binding-linux-riscv64-musl@0.133.0':
+    resolution: {integrity: sha512-iwgBNUTHiMdxARLYuM0SBlnYeb19iw1Ea5M+4ERZupCsBMLArti6FyZ6UfFjJxIiTDr2oW2DGQFxlQVQ/dW9rA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-parser/binding-linux-s390x-gnu@0.127.0':
+    resolution: {integrity: sha512-pbXIhiNFHoqWeqDNLiJ9JkpHz1IM9k4DXa66x+1GTWMG7iLxtkXgE53iiuKSXwmk3zIYmaPVfBvgcAhS583K4Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-s390x-gnu@0.133.0':
+    resolution: {integrity: sha512-ZwZNo8FZmB/gVfboQl+wXilBigGl+6nQQs+nITOeAP/HcAOjiHl6XZJL9F/KXNEspODQcbjAiyjUbeCJd9a0fA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-x64-gnu@0.127.0':
+    resolution: {integrity: sha512-MYCguB9RvBvlSd6gbuNI7QwiLoCCAlGnlRJFPrzLI6U1/9wkC/WK6LtBAUln55H1Ctqw45PWmqrobKoMhsYQzQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-x64-gnu@0.133.0':
+    resolution: {integrity: sha512-govCvWx1dBlED3uu4qXctxpRcouu9I8Kn+DBktGCl760JtlGJzc9l/OmPJKlYWSbrRqKkMZehNeZ/4Wfma7uSA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-x64-musl@0.127.0':
+    resolution: {integrity: sha512-5eY0B/bxf1xIUxb4NOTvOI3KWtBQfPWYyKAzgcrCt0mDibSZygVpO1Pz8bkeiSZ5Jj9+M09dkggG3H8I5d0Uyg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-parser/binding-linux-x64-musl@0.133.0':
+    resolution: {integrity: sha512-ssTlpXD5Mq9uCssDJPzlRWqBt4Y7Zzd9i+XZhWmK/9Y6KUIuAxVYTYiI8lxcGWi0+3/Cz4A8q9UrD4NK9Y2j7g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-parser/binding-openharmony-arm64@0.127.0':
+    resolution: {integrity: sha512-Gld0ajrFTUXNtdw20fVBuTQx66FA75nIVg+//pPfR3sXkuABB4mTBhl3r9JNzrJpgW//qiwxf0nWXUWGJSL3UQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@oxc-parser/binding-openharmony-arm64@0.133.0':
+    resolution: {integrity: sha512-51aByfXhPtLEdWG4a2Ihdw6cPWV1ei1AarALpFdDP8MLWDLE2NuUMgbo3DERR2Kt8fT/ok1GUvBiLxVGke9uUQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@oxc-parser/binding-wasm32-wasi@0.127.0':
+    resolution: {integrity: sha512-T6KVD7rhLzFlwGRXMnxUFfkCZD8FHnb968wVXW1mXzgRFc5RNXOBY2mPPDZ77x5Ln76ltLMgtPg0cOkU1NSrEQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [wasm32]
+
+  '@oxc-parser/binding-wasm32-wasi@0.133.0':
+    resolution: {integrity: sha512-2e16tkKp+wDO2GTAmXfxbBcCmGEaFPIJEIRBBmVKNVXSc8/fJsSIaBGyFTPHM9ST5GNWgJcYIt94rDTks+PLwA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [wasm32]
+
+  '@oxc-parser/binding-win32-arm64-msvc@0.127.0':
+    resolution: {integrity: sha512-Ujvw4X+LD1CCGULcsQcvb4YNVoBGqt+JHgNNzGGaCImELiZLk477ifUH53gIbE7EKd933NdTi25JWEr9K2HwXw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxc-parser/binding-win32-arm64-msvc@0.133.0':
+    resolution: {integrity: sha512-KPTNDKbxH1cglrqTyVeXHb4Pk4oksz8EcE1/v8zqU7N4UXbiHfA/IwtXZ2U77fnRAWBbgVkl/lZbL7o3hRdejg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxc-parser/binding-win32-ia32-msvc@0.127.0':
+    resolution: {integrity: sha512-0cwxKO7KHQQQfo4Uf4B2SQrhgm+cJaP9OvFFhx52Tkg4bezsacu83GB2/In5bC415Ueeym+kXdnge/57rbSfTw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@oxc-parser/binding-win32-ia32-msvc@0.133.0':
+    resolution: {integrity: sha512-Una1bNYv9zCavQrfnDR9wuZVB3itLjCEH4Oz7i6CwAJN/Xq9b+zbbcxmvdkKvvJt4Ngc/MBmIYlbLo3zS4TQ0A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@oxc-parser/binding-win32-x64-msvc@0.127.0':
+    resolution: {integrity: sha512-rOrnSQSCbhI2kowr9XxE7m9a8oQXnBHjnS6j95LxxAnEZ0+Fz20WlRXG4ondQb+ejjt2KOsa65sE6++L6kUd+w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@oxc-parser/binding-win32-x64-msvc@0.133.0':
+    resolution: {integrity: sha512-kjBhCiOGSYTwDJQuuZa7a94JbP8htWu7J0X1KwH74kV2K5eYf6eyJRYmkpCDvr0XEL8tMxYI4WU1VekblFCLgg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@oxc-project/types@0.122.0':
+    resolution: {integrity: sha512-oLAl5kBpV4w69UtFZ9xqcmTi+GENWOcPF7FCrczTiBbmC0ibXxCwyvZGbO39rCVEuLGAZM84DH0pUIyyv/YJzA==}
+
+  '@oxc-project/types@0.127.0':
+    resolution: {integrity: sha512-aIYXQBo4lCbO4z0R3FHeucQHpF46l2LbMdxRvqvuRuW2OxdnSkcng5B8+K12spgLDj93rtN3+J2Vac/TIO+ciQ==}
+
+  '@oxc-project/types@0.133.0':
+    resolution: {integrity: sha512-KzkdCd6Uxqnf6l3HOw1xfatAlUURA0g14cvBYFyJ5SaNOQbOUvBr9PKArcPcrNIeRsBdgcUzOGrhKveVpvOIGA==}
+
+  '@oxc-project/types@0.134.0':
+    resolution: {integrity: sha512-T0xuRRKrQFmocH8y+jGfpmSkGcheaJExY9lEihmR1Gm2aH+75B8CzgU2rABRQSzzDxLjZ15Sc0bRVLj5lVeNXQ==}
+
+  '@oxc-resolver/binding-android-arm-eabi@11.20.0':
+    resolution: {integrity: sha512-IjfWOXRgJFNdORDl+Uf1aibNgZY2guOD3zmOhx1BGVb/MIiqlFTdmjpQNplSN58lhWehnX4UNqC3QwpUo8pjJg==}
+    cpu: [arm]
+    os: [android]
+
+  '@oxc-resolver/binding-android-arm64@11.20.0':
+    resolution: {integrity: sha512-QqslZAuFQG8Q9xm7JuIn8JUbvywhSBMVhuQHtYW+auirZJloS41oxUUaBXk7uUhZJgp44c5zQLeVvmFaDQB+2Q==}
+    cpu: [arm64]
+    os: [android]
+
+  '@oxc-resolver/binding-darwin-arm64@11.20.0':
+    resolution: {integrity: sha512-MUcavykj2ewlR+kc5arpg4tC2RvzJkUxWtNv74pf7lcNk00GpIpN43vXMj+j6r4eMmfZhlb8hueKoIb8e9kAGQ==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxc-resolver/binding-darwin-x64@11.20.0':
+    resolution: {integrity: sha512-BGB16nRUK5Etiv//ihPyzj8Lj1px0mhh4YIfe0FDf045ywknfSm0GEbiRESpr6Q4K82AvnyaRIhhluHByvS4bg==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxc-resolver/binding-freebsd-x64@11.20.0':
+    resolution: {integrity: sha512-JZgtePaqj3qmD5XFHJaSLWzHRxQu0LaPkdoM1KJXYADvAaa83ijXHclV3ej3CueeW0wxfIAbGCZVP45J0CA7uQ==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@oxc-resolver/binding-linux-arm-gnueabihf@11.20.0':
+    resolution: {integrity: sha512-hOQ/p3ry3v3SchUBXicrrnszaI/UmYzM4wtS4RGfwgVUX7a+HbyQSzJ5aOzu+o6XZkFkS3ZXN4PZAzhOb77OSg==}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-arm-musleabihf@11.20.0':
+    resolution: {integrity: sha512-2ArPksaw0AqeuGBfoS715VF+JvJQAhD2niWgjE5hVO+L+nAfikVQopvngCMX9x4BD8itWoQ3dnikrQyl5Ho5Jg==}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-arm64-gnu@11.20.0':
+    resolution: {integrity: sha512-0bJnmYFp62JdZ4nVMDUZ/C58BCZOCcqgKtnUlp7L9Ojf/czIN+3j72YlLPeWLkzlr6SlYvIQA4SGV/HyO0d+qg==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-resolver/binding-linux-arm64-musl@11.20.0':
+    resolution: {integrity: sha512-wKHHzPKZo7Ufhv/Bt6yxT7FOgnIgW4gwXcJUipkShGp68W3wGVqvr1Sr0fY65lN0Oy6y41+g2kIDvkgZaMMUkw==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-resolver/binding-linux-ppc64-gnu@11.20.0':
+    resolution: {integrity: sha512-RN8goF7Ie0B79L4i4G6OeBocTgSC56vJbQ65VJje+oXnldVpLnOU7j/AQ/dP94TcCS+Yh6WG8u3Qt4ETteXFNQ==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-resolver/binding-linux-riscv64-gnu@11.20.0':
+    resolution: {integrity: sha512-5l1yU6/xQEqLZRzxqmMxJfWPslpwCmBsdDGaBvABPehxquCXDC7dd7oraNdKSJUMDXSM7VvVj8H2D2FTjU7oWw==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-resolver/binding-linux-riscv64-musl@11.20.0':
+    resolution: {integrity: sha512-xHEvkbgz6UC+A3JOyDQy76LkUaxsNSfIr3/GV8slwZsnuooJiIB34gzJfsyvR4JdCYNUUPsRJc/w/oWkODu+hg==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-resolver/binding-linux-s390x-gnu@11.20.0':
+    resolution: {integrity: sha512-aWPDUUmSeyHvlW+SoEUd+JIJsQhVhu6a5tBpDRMu058naPAchTgAVGCFy35zjbnFlt0i8hLWziff6HX0D3LU4g==}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-resolver/binding-linux-x64-gnu@11.20.0':
+    resolution: {integrity: sha512-x2YeSimvhJjKLVD8KSu8f/rqU1potcdEMkApIPJqjZWN7c2Fpt4g2X32WDg1p+XDAmyT7nuQGe0vnhvXeLbH+g==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-resolver/binding-linux-x64-musl@11.20.0':
+    resolution: {integrity: sha512-kcRLEIxpZefeYfLChjpgFf3ilBzRDZ+yobMrpRsQlSrxuFGtm3U6PMU7AaEpMqo3NfDGVyJJseAjnRLzMFHjwQ==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-resolver/binding-openharmony-arm64@11.20.0':
+    resolution: {integrity: sha512-HHcfnApSZGtKhTiHqe8OZruOZe5XuFQH5/E0Yhj3u8fnFvzkM4/k6WjacUf4SvA0SPEAbfbgYmVPuo0VX/fIBQ==}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@oxc-resolver/binding-wasm32-wasi@11.20.0':
+    resolution: {integrity: sha512-Tn0y1XOFYHNfK1wp1Z5QK8Rcld/bsOwRISQXfqAZ5IBpv8Gz1IvV39fUWNprqNdRizgcvFhOzWwFun2zkJsyBg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
+  '@oxc-resolver/binding-win32-arm64-msvc@11.20.0':
+    resolution: {integrity: sha512-qPi25YNPe4YenS8MgsQU2+bIFHxxpLx1LVna2444cEHqNPhNjvWf9zqj4aWE43H9LpAsTmkkAlA3eL5ElBU3mA==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxc-resolver/binding-win32-x64-msvc@11.20.0':
+    resolution: {integrity: sha512-Wb14jWEW8huH6It9F6sXd9vrYmIS7pMrgkU6sxpLxkP+9z+wRgs71hUEhRpcn8FOXAFa27FVWfY2tRpbfTzfLw==}
+    cpu: [x64]
+    os: [win32]
+
+  '@oxc-transform/binding-android-arm-eabi@0.133.0':
+    resolution: {integrity: sha512-2A79NBpyBKgHJ0FwgC8D1hzp3x2ujyvqq/kG+M76YyDMMkxLhX6A3vjnAnfEKycOoZxuKhwYu8BF9hKq67ykIA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
+
+  '@oxc-transform/binding-android-arm64@0.133.0':
+    resolution: {integrity: sha512-dynEph/hyoSgBzd2XbNlW37NK97nU6tZMs5jrhObUxSasBV/Gv9THZrWj9AlbWiMXR07WFYE82C9axjntYyBSw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@oxc-transform/binding-darwin-arm64@0.133.0':
+    resolution: {integrity: sha512-4hGgKOG+dZSN3xjcgNWpcihekRG7/YbbAdjyz07yv0HjzA6kdqYAhGrn84374UPO2h6etYJwsCBoM9iJHHvJ8w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxc-transform/binding-darwin-x64@0.133.0':
+    resolution: {integrity: sha512-7J11/9PFkznmKuANkCAjt3znV1BcDFXQSgDiBvDxXT3Wm6995/zxrJD5zmo+5XSgY4sm+2V8/ED6ZSD3mKOC5A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxc-transform/binding-freebsd-x64@0.133.0':
+    resolution: {integrity: sha512-5EMAO0vzCpUfhn6aSjIUeJeRI2ztevHwSVr/M8sZ2VBYc79UuOfjjMCQ67LtUbgpvQtpBWkzeAHCP3L7JFYmlg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@oxc-transform/binding-linux-arm-gnueabihf@0.133.0':
+    resolution: {integrity: sha512-z6XT8tmo9sPmCIYaFIxDelBU4wXLwwWMX2VNCMIY6bkQp5r+kRtVXYS3yLbJHMKEhRKvw/g+Z7fO9aadsGGEAw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-transform/binding-linux-arm-musleabihf@0.133.0':
+    resolution: {integrity: sha512-GQDpEV2VhHG8hT5BviDv+emi9oHYhfv+JJJWROYp+eGgWjiQMp4QZVb6Bu3kwVMzkwy0r200ToA1KThYTq53ug==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-transform/binding-linux-arm64-gnu@0.133.0':
+    resolution: {integrity: sha512-VstR+NEQAJb80ysWk2vPjEvg0JzwEjKn2hDbC/joa5zGXkCnVVCWgAGG8c6o23S981a7XRpCMcClBgeD1q9H2A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-transform/binding-linux-arm64-musl@0.133.0':
+    resolution: {integrity: sha512-Ec7xJdDrnukgiz20E3iDNzAIgx1XXn8cVVsNNUpgEIAvNlXZaocqlQT8Zalk0Lv3fbkxcJ+9BuWB0ndBRHQtzg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-transform/binding-linux-ppc64-gnu@0.133.0':
+    resolution: {integrity: sha512-6YX38grimcigz20eYpyz6e4c9rDKzwK3i+tcDpgwYj0bWreaAOwrABmSmKplPJOorkDVlbT69wPCN+d11irBQw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-transform/binding-linux-riscv64-gnu@0.133.0':
+    resolution: {integrity: sha512-WxMIzItRJR66lgaAyyqj0FFwLMpcuCV9mTFcUMQpIz8+Hey1Enk8xuv+7QpSsqCR5zRlwNr092dsFkz5cbvtrw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-transform/binding-linux-riscv64-musl@0.133.0':
+    resolution: {integrity: sha512-+x6dnO87986rjVNjcF0tg8wVS0e/SH8nzLa/X0Wsh7jtEniN7buvR8iqZm8pnsfaZ8DH5F4GCSZpoPRrd9jJ6w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-transform/binding-linux-s390x-gnu@0.133.0':
+    resolution: {integrity: sha512-oEyQudXIwWM/+v0vZzPbAi25YMWyvjtQYYjuSrhMEQwe7ZEMDXscX7U1j6alrVdZq2DtCMeror3X/Dv7p/JUwg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-transform/binding-linux-x64-gnu@0.133.0':
+    resolution: {integrity: sha512-G8P/OadKTbyUHz5TK63sDDtUHwn2SXG/o0oGo4GGTzBu70xmUSN5/ZUgpyl6ypAmbshoyw8nC7+msb3BjzHxaA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-transform/binding-linux-x64-musl@0.133.0':
+    resolution: {integrity: sha512-Oi/fyOzZ+aytmmsRND5pGgvux4n++v9cG4qNFiXj7qFwSqBKWZHBq7cJLXqbH1I81pyI3kvU1Za+1qk3afXuwg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-transform/binding-openharmony-arm64@0.133.0':
+    resolution: {integrity: sha512-/ZElgq+/tcga27X2G2AUpxcYX0baX94Gz658w6Zz2P+6Kr06bfYSrdtC0P7oPrbu3Gy/6kpiSoJPgZy8R2IjYQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@oxc-transform/binding-wasm32-wasi@0.133.0':
+    resolution: {integrity: sha512-GANcoEa8Nzza7saxdb4qWO24U6jk4nK6G+g87lGp8TTU45CUvWf1Igdze2+NrebgiwOy6F1/h6Esag4DM3JTtQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [wasm32]
+
+  '@oxc-transform/binding-win32-arm64-msvc@0.133.0':
+    resolution: {integrity: sha512-2+uDo/+ZvGQu10J8xryg/l5PdBt2vXPtf+0aIosVKJavqCaKcBDdo95OUaEulx0bqvoytAQ4yyz2gcPZ40mjcQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxc-transform/binding-win32-ia32-msvc@0.133.0':
+    resolution: {integrity: sha512-zpPIZ1S3JHmSEFyyGyPYCwhOiNLyfaPifYxK8BQY21JXyHglu/wUr3/ESFrXb+XegEy/iBlWbzr3FzPtcq1MUw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@oxc-transform/binding-win32-x64-msvc@0.133.0':
+    resolution: {integrity: sha512-cADrfLvc/VeyvpvQS+t5ktqfyqyyGANZC5NHp++JAElacfXqq/+k8bYkjqMWzNZ3HxkJtL1qDHfZZCA9+4hlSQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@oxlint/binding-android-arm-eabi@1.57.0':
+    resolution: {integrity: sha512-C7EiyfAJG4B70496eV543nKiq5cH0o/xIh/ufbjQz3SIvHhlDDsyn+mRFh+aW8KskTyUpyH2LGWL8p2oN6bl1A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
+
+  '@oxlint/binding-android-arm64@1.57.0':
+    resolution: {integrity: sha512-9i80AresjZ/FZf5xK8tKFbhQnijD4s1eOZw6/FHUwD59HEZbVLRc2C88ADYJfLZrF5XofWDiRX/Ja9KefCLy7w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@oxlint/binding-darwin-arm64@1.57.0':
+    resolution: {integrity: sha512-0eUfhRz5L2yKa9I8k3qpyl37XK3oBS5BvrgdVIx599WZK63P8sMbg+0s4IuxmIiZuBK68Ek+Z+gcKgeYf0otsg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxlint/binding-darwin-x64@1.57.0':
+    resolution: {integrity: sha512-UvrSuzBaYOue+QMAcuDITe0k/Vhj6KZGjfnI6x+NkxBTke/VoM7ZisaxgNY0LWuBkTnd1OmeQfEQdQ48fRjkQg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxlint/binding-freebsd-x64@1.57.0':
+    resolution: {integrity: sha512-wtQq0dCoiw4bUwlsNVDJJ3pxJA218fOezpgtLKrbQqUtQJcM9yP8z+I9fu14aHg0uyAxIY+99toL6uBa2r7nxA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@oxlint/binding-linux-arm-gnueabihf@1.57.0':
+    resolution: {integrity: sha512-qxFWl2BBBFcT4djKa+OtMdnLgoHEJXpqjyGwz8OhW35ImoCwR5qtAGqApNYce5260FQqoAHW8S8eZTjiX67Tsg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxlint/binding-linux-arm-musleabihf@1.57.0':
+    resolution: {integrity: sha512-SQoIsBU7J0bDW15/f0/RvxHfY3Y0+eB/caKBQtNFbuerTiA6JCYx9P1MrrFTwY2dTm/lMgTSgskvCEYk2AtG/Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxlint/binding-linux-arm64-gnu@1.57.0':
+    resolution: {integrity: sha512-jqxYd1W6WMeozsCmqe9Rzbu3SRrGTyGDAipRlRggetyYbUksJqJKvUNTQtZR/KFoJPb+grnSm5SHhdWrywv3RQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-arm64-musl@1.57.0':
+    resolution: {integrity: sha512-i66WyEPVEvq9bxRUCJ/MP5EBfnTDN3nhwEdFZFTO5MmLLvzngfWEG3NSdXQzTT3vk5B9i6C2XSIYBh+aG6uqyg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxlint/binding-linux-ppc64-gnu@1.57.0':
+    resolution: {integrity: sha512-oMZDCwz4NobclZU3pH+V1/upVlJZiZvne4jQP+zhJwt+lmio4XXr4qG47CehvrW1Lx2YZiIHuxM2D4YpkG3KVA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-riscv64-gnu@1.57.0':
+    resolution: {integrity: sha512-uoBnjJ3MMEBbfnWC1jSFr7/nSCkcQYa72NYoNtLl1imshDnWSolYCjzb8LVCwYCCfLJXD+0gBLD7fyC14c0+0g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-riscv64-musl@1.57.0':
+    resolution: {integrity: sha512-BdrwD7haPZ8a9KrZhKJRSj6jwCor+Z8tHFZ3PT89Y3Jq5v3LfMfEePeAmD0LOTWpiTmzSzdmyw9ijneapiVHKQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxlint/binding-linux-s390x-gnu@1.57.0':
+    resolution: {integrity: sha512-BNs+7ZNsRstVg2tpNxAXfMX/Iv5oZh204dVyb8Z37+/gCh+yZqNTlg6YwCLIMPSk5wLWIGOaQjT0GUOahKYImw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-x64-gnu@1.57.0':
+    resolution: {integrity: sha512-AghS18w+XcENcAX0+BQGLiqjpqpaxKJa4cWWP0OWNLacs27vHBxu7TYkv9LUSGe5w8lOJHeMxcYfZNOAPqw2bg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-x64-musl@1.57.0':
+    resolution: {integrity: sha512-E/FV3GB8phu/Rpkhz5T96hAiJlGzn91qX5yj5gU754P5cmVGXY1Jw/VSjDSlZBCY3VHjsVLdzgdkJaomEmcNOg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxlint/binding-openharmony-arm64@1.57.0':
+    resolution: {integrity: sha512-xvZ2yZt0nUVfU14iuGv3V25jpr9pov5N0Wr28RXnHFxHCRxNDMtYPHV61gGLhN9IlXM96gI4pyYpLSJC5ClLCQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@oxlint/binding-win32-arm64-msvc@1.57.0':
+    resolution: {integrity: sha512-Z4D8Pd0AyHBKeazhdIXeUUy5sIS3Mo0veOlzlDECg6PhRRKgEsBJCCV1n+keUZtQ04OP+i7+itS3kOykUyNhDg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxlint/binding-win32-ia32-msvc@1.57.0':
+    resolution: {integrity: sha512-StOZ9nFMVKvevicbQfql6Pouu9pgbeQnu60Fvhz2S6yfMaii+wnueLnqQ5I1JPgNF0Syew4voBlAaHD13wH6tw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@oxlint/binding-win32-x64-msvc@1.57.0':
+    resolution: {integrity: sha512-6PuxhYgth8TuW0+ABPOIkGdBYw+qYGxgIdXPHSVpiCDm+hqTTWCmC739St1Xni0DJBt8HnSHTG67i1y6gr8qrA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@package-json/types@0.0.12':
+    resolution: {integrity: sha512-uu43FGU34B5VM9mCNjXCwLaGHYjXdNincqKLaraaCW+7S2+SmiBg1Nv8bPnmschrIfZmfKNY9f3fC376MRrObw==}
+
+  '@parcel/watcher-android-arm64@2.5.6':
+    resolution: {integrity: sha512-YQxSS34tPF/6ZG7r/Ih9xy+kP/WwediEUsqmtf0cuCV5TPPKw/PQHRhueUo6JdeFJaqV3pyjm0GdYjZotbRt/A==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  '@parcel/watcher-darwin-arm64@2.5.6':
+    resolution: {integrity: sha512-Z2ZdrnwyXvvvdtRHLmM4knydIdU9adO3D4n/0cVipF3rRiwP+3/sfzpAwA/qKFL6i1ModaabkU7IbpeMBgiVEA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@parcel/watcher-darwin-x64@2.5.6':
+    resolution: {integrity: sha512-HgvOf3W9dhithcwOWX9uDZyn1lW9R+7tPZ4sug+NGrGIo4Rk1hAXLEbcH1TQSqxts0NYXXlOWqVpvS1SFS4fRg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@parcel/watcher-freebsd-x64@2.5.6':
+    resolution: {integrity: sha512-vJVi8yd/qzJxEKHkeemh7w3YAn6RJCtYlE4HPMoVnCpIXEzSrxErBW5SJBgKLbXU3WdIpkjBTeUNtyBVn8TRng==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@parcel/watcher-linux-arm-glibc@2.5.6':
+    resolution: {integrity: sha512-9JiYfB6h6BgV50CCfasfLf/uvOcJskMSwcdH1PHH9rvS1IrNy8zad6IUVPVUfmXr+u+Km9IxcfMLzgdOudz9EQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+    libc: [glibc]
+
+  '@parcel/watcher-linux-arm-musl@2.5.6':
+    resolution: {integrity: sha512-Ve3gUCG57nuUUSyjBq/MAM0CzArtuIOxsBdQ+ftz6ho8n7s1i9E1Nmk/xmP323r2YL0SONs1EuwqBp2u1k5fxg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+    libc: [musl]
+
+  '@parcel/watcher-linux-arm64-glibc@2.5.6':
+    resolution: {integrity: sha512-f2g/DT3NhGPdBmMWYoxixqYr3v/UXcmLOYy16Bx0TM20Tchduwr4EaCbmxh1321TABqPGDpS8D/ggOTaljijOA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@parcel/watcher-linux-arm64-musl@2.5.6':
+    resolution: {integrity: sha512-qb6naMDGlbCwdhLj6hgoVKJl2odL34z2sqkC7Z6kzir8b5W65WYDpLB6R06KabvZdgoHI/zxke4b3zR0wAbDTA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@parcel/watcher-linux-x64-glibc@2.5.6':
+    resolution: {integrity: sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@parcel/watcher-linux-x64-musl@2.5.6':
+    resolution: {integrity: sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@parcel/watcher-wasm@2.5.6':
+    resolution: {integrity: sha512-byAiBZ1t3tXQvc8dMD/eoyE7lTXYorhn+6uVW5AC+JGI1KtJC/LvDche5cfUE+qiefH+Ybq0bUCJU0aB1cSHUA==}
+    engines: {node: '>= 10.0.0'}
+    bundledDependencies:
+      - napi-wasm
+
+  '@parcel/watcher-win32-arm64@2.5.6':
+    resolution: {integrity: sha512-3ukyebjc6eGlw9yRt678DxVF7rjXatWiHvTXqphZLvo7aC5NdEgFufVwjFfY51ijYEWpXbqF5jtrK275z52D4Q==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@parcel/watcher-win32-ia32@2.5.6':
+    resolution: {integrity: sha512-k35yLp1ZMwwee3Ez/pxBi5cf4AoBKYXj00CZ80jUz5h8prpiaQsiRPKQMxoLstNuqe2vR4RNPEAEcjEFzhEz/g==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@parcel/watcher-win32-x64@2.5.6':
+    resolution: {integrity: sha512-hbQlYcCq5dlAX9Qx+kFb0FHue6vbjlf0FrNzSKdYK2APUf7tGfGxQCk2ihEREmbR6ZMc0MVAD5RIX/41gpUzTw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  '@parcel/watcher@2.5.6':
+    resolution: {integrity: sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==}
+    engines: {node: '>= 10.0.0'}
+
   '@pkgjs/parseargs@0.11.0':
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
@@ -1001,8 +2552,8 @@ packages:
     resolution: {integrity: sha512-L6AiU3OXv9kjKGTJN9j8n1TeJGDcLX9atQlZvAkthlvbXjvKc5SKNWESc/eXhr5nEfuMWhQhiKHDJCpYejmeCQ==}
     engines: {node: '>=14.19'}
 
-  '@pnpm/error@1000.0.5':
-    resolution: {integrity: sha512-GjH0TPjbVNrPnl/BAGoFuBLJ2sFfXNKbS33lll/Ehe9yw0fyc8Kdw7kO9if37yQqn6vaa4dAHKkPllum7f/IPQ==}
+  '@pnpm/error@1000.1.0':
+    resolution: {integrity: sha512-Dqc2IJJPjUatwc9Letw+vG29rnaMrDGi5g6WCx1HiZYm0obXbTmLygeRafMbgf+sLKXrWE1shOeiayQuczBdoA==}
     engines: {node: '>=18.12'}
 
   '@pnpm/error@4.0.0':
@@ -1013,8 +2564,8 @@ packages:
     resolution: {integrity: sha512-ogUZCGf0/UILZt6d8PsO4gA4pXh7f0BumXeFkcCe4AQ65PXPKfAkHC0C30Lheh2EgFOpLZm3twDP1Eiww18gew==}
     engines: {node: '>=14.19'}
 
-  '@pnpm/parse-overrides@1001.0.3':
-    resolution: {integrity: sha512-Ctu3m3cnGscQM9SQjnBVzrw6C4ZI4DBkotEOYv1dyRF0xc+aktGNDnrx59O/hnWU8PbsQ9PT5LmAO/GkdlrM/Q==}
+  '@pnpm/parse-overrides@1001.0.4':
+    resolution: {integrity: sha512-fk6gFXDKN61vZfb/qbTne/938GPQaYy8U+B2TdBPxPuw2M/U8l1ltlUoJZzR3SW4O+jghzaFKTVVIPiPs3K1AQ==}
     engines: {node: '>=18.12'}
 
   '@pnpm/parse-wanted-dependency@1001.0.0':
@@ -1044,35 +2595,14 @@ packages:
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
 
-  '@protobufjs/aspromise@1.1.2':
-    resolution: {integrity: sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==}
+  '@poppinss/colors@4.1.6':
+    resolution: {integrity: sha512-H9xkIdFswbS8n1d6vmRd8+c10t2Qe+rZITbbDHHkQixH5+2x1FDGmi/0K+WgWiqQFKPSlIYB7jlH6Kpfn6Fleg==}
 
-  '@protobufjs/base64@1.1.2':
-    resolution: {integrity: sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg==}
+  '@poppinss/dumper@0.7.0':
+    resolution: {integrity: sha512-0UTYalzk2t6S4rA2uHOz5bSSW2CHdv4vggJI6Alg90yvl0UgXs6XSXpH96OH+bRkX4J/06djv29pqXJ0lq5Kag==}
 
-  '@protobufjs/codegen@2.0.4':
-    resolution: {integrity: sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg==}
-
-  '@protobufjs/eventemitter@1.1.0':
-    resolution: {integrity: sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q==}
-
-  '@protobufjs/fetch@1.1.0':
-    resolution: {integrity: sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==}
-
-  '@protobufjs/float@1.0.2':
-    resolution: {integrity: sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ==}
-
-  '@protobufjs/inquire@1.1.0':
-    resolution: {integrity: sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q==}
-
-  '@protobufjs/path@1.1.2':
-    resolution: {integrity: sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA==}
-
-  '@protobufjs/pool@1.1.0':
-    resolution: {integrity: sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw==}
-
-  '@protobufjs/utf8@1.1.0':
-    resolution: {integrity: sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==}
+  '@poppinss/exception@1.2.3':
+    resolution: {integrity: sha512-dCED+QRChTVatE9ibtoaxc+WkdzOSjYTKi/+uacHWIsfodVfpsueo3+DKpgU5Px8qXjgmXkSvhXvSCz3fnP9lw==}
 
   '@qnighy/marshal@0.1.3':
     resolution: {integrity: sha512-uaDZTJYtD2UgQTGemmgWeth+e2WapZm+GkAq8UU8AJ55PKRFaf1GkH7X/uzA+Ygu8iInzIlM2FGyCUnruyMKMg==}
@@ -1080,288 +2610,586 @@ packages:
   '@quansync/fs@1.0.0':
     resolution: {integrity: sha512-4TJ3DFtlf1L5LDMaM6CanJ/0lckGNtJcMjQ1NAV6zDmA0tEHKZtxNKin8EgPaVX1YzljbxckyT2tJrpQKAtngQ==}
 
-  '@redis/bloom@5.10.0':
-    resolution: {integrity: sha512-doIF37ob+l47n0rkpRNgU8n4iacBlKM9xLiP1LtTZTvz8TloJB8qx/MgvhMhKdYG+CvCY2aPBnN2706izFn/4A==}
-    engines: {node: '>= 18'}
+  '@redis/client@5.12.1':
+    resolution: {integrity: sha512-7aPGWeqA3uFm43o19umzdl16CEjK/JQGtSXVPevplTaOU3VJA/rseBC1QvYUz9lLDIMBimc4SW/zrW4S89BaCA==}
+    engines: {node: '>= 18.19.0'}
     peerDependencies:
-      '@redis/client': ^5.10.0
+      '@node-rs/xxhash': ^1.1.0
+      '@opentelemetry/api': '>=1 <2'
+    peerDependenciesMeta:
+      '@node-rs/xxhash':
+        optional: true
+      '@opentelemetry/api':
+        optional: true
 
-  '@redis/client@5.10.0':
-    resolution: {integrity: sha512-JXmM4XCoso6C75Mr3lhKA3eNxSzkYi3nCzxDIKY+YOszYsJjuKbFgVtguVPbLMOttN4iu2fXoc2BGhdnYhIOxA==}
-    engines: {node: '>= 18'}
+  '@renovatebot/detect-tools@4.0.8':
+    resolution: {integrity: sha512-beysRwqyNh/6ETeeF6Qr1q9fVMc+j+oXT5vh2PaeX+ESm8j9Sw5ngtTxy5dHNZV+4rqywdz0qwEos623bB6Gew==}
+    engines: {node: '>=22.12.0', pnpm: '>=10.0.0'}
 
-  '@redis/json@5.10.0':
-    resolution: {integrity: sha512-B2G8XlOmTPUuZtD44EMGbtoepQG34RCDXLZbjrtON1Djet0t5Ri7/YPXvL9aomXqP8lLTreaprtyLKF4tmXEEA==}
-    engines: {node: '>= 18'}
-    peerDependencies:
-      '@redis/client': ^5.10.0
+  '@renovatebot/good-enough-parser@2.0.1':
+    resolution: {integrity: sha512-FBLawccaWOPwqXgMSB3FTp1VTfGJWSTTXY2Q3kWPoLYOpKYBr3V37vtqFLjb5wUFkrXN2Sj+S840JXKfHwy8Rg==}
+    engines: {node: '>=22.12.0', pnpm: '>=10.0.0'}
 
-  '@redis/search@5.10.0':
-    resolution: {integrity: sha512-3SVcPswoSfp2HnmWbAGUzlbUPn7fOohVu2weUQ0S+EMiQi8jwjL+aN2p6V3TI65eNfVsJ8vyPvqWklm6H6esmg==}
-    engines: {node: '>= 18'}
-    peerDependencies:
-      '@redis/client': ^5.10.0
+  '@renovatebot/osv-offline-db@3.0.3':
+    resolution: {integrity: sha512-hUN68nHALl0ZRZCH6aLuXNmghIMz/8J2uj8FSnF176DJXwbznusvVf91Gt34bDIp6TJhGbNdpFoiUqtv2iL0Lw==}
+    engines: {node: '>=22.12.0', pnpm: '>=10.0.0'}
 
-  '@redis/time-series@5.10.0':
-    resolution: {integrity: sha512-cPkpddXH5kc/SdRhF0YG0qtjL+noqFT0AcHbQ6axhsPsO7iqPi1cjxgdkE9TNeKiBUUdCaU1DbqkR/LzbzPBhg==}
-    engines: {node: '>= 18'}
-    peerDependencies:
-      '@redis/client': ^5.10.0
+  '@renovatebot/osv-offline@3.0.3':
+    resolution: {integrity: sha512-A02ZvTF+Y6MNb7Z5PvWSxgTJcgVPPgWjcaHcwLuh6vEpBvnufmqvUrzq8ueIb/4u81cZXX0TPPWbyYSbTxdVOg==}
+    engines: {node: '>=22.12.0', pnpm: '>=10.0.0'}
 
-  '@renovatebot/detect-tools@1.2.8':
-    resolution: {integrity: sha512-TDHJeRQxFPzaZuUSNBqWLmg0MBTion3E4Tz6bTZFll4ZyjWm0OyJ+u4sYb8whSjVryjRwCK0vALAq65TFNKg3A==}
+  '@renovatebot/pep440@5.0.0':
+    resolution: {integrity: sha512-91cFM32/pnOAvC7W1W1kPPI9QM2y6OrYCeomz7pop4A+3Ksh2XnZXGznUMlzR7YbOQlg7X/MNlF27s9Yt9hhTA==}
+    engines: {node: ^22.11.0 || >=24.10.0, pnpm: '>=10.0.0'}
 
-  '@renovatebot/good-enough-parser@1.2.0':
-    resolution: {integrity: sha512-5HrZJqZJzjzhghtJ85nNG8/dE97MQ1LOvo+T4dMGZg1s56HnZEZkm5KENNhQ+dwqC6vk5DdOcZ8J0oQOcn8gng==}
-    engines: {node: '>=18.12.0', yarn: ^1.17.0}
+  '@renovatebot/pgp@1.3.12':
+    resolution: {integrity: sha512-3glRBjBTgoFHdFedUsxcQWw7C0LfHYhCKzTo9+jqjoI+kk5YD/g7GWJ2hsPSG6WTQqJqD8VGiM0h2j3xqTS4Qw==}
+    engines: {node: ^22.11.0 || >=24.10.0, pnpm: '>=10.0.0'}
 
-  '@renovatebot/osv-offline-db@2.0.1':
-    resolution: {integrity: sha512-DB3tPESeQ3Qw0hysgZJogxYJLIcQ0g9nR7xTuYFXTrJzwchRIftNqMd/K5lTeC7tFpjz8JwAY6D669sgUp2oYQ==}
-    engines: {node: '>=22.12.0'}
+  '@renovatebot/ruby-semver@5.0.0':
+    resolution: {integrity: sha512-yQgeq4HVV9mh2AJHHlStd//7mD/96lWj8KWB5Szi5YDjPwpvk12Sj3H+Y4waNC3N2D4t5xqbwYYpTHB5KsrSVg==}
+    engines: {node: ^22.11.0 || >=24.10.0, pnpm: '>=10.0.0'}
 
-  '@renovatebot/osv-offline@2.0.1':
-    resolution: {integrity: sha512-+O1IYzTriUIz4lMDWbh5uJ8M5ufx16PIFYips8F7n04P6CXZXpVAk8AxkwTwxK/znJ2epYsCPN9wMY8iSdjr0A==}
-    engines: {node: '>=22.12.0'}
-
-  '@renovatebot/pep440@4.2.1':
-    resolution: {integrity: sha512-2FK1hF93Fuf1laSdfiEmJvSJPVIDHEUTz68D3Fi9s0IZrrpaEcj6pTFBTbYvsgC5du4ogrtf5re7yMMvrKNgkw==}
-    engines: {node: ^20.9.0 || ^22.11.0 || ^24, pnpm: ^10.0.0}
-
-  '@renovatebot/pgp@1.3.1':
-    resolution: {integrity: sha512-4geaRHA8ZBAt4K+Y3q4DbuIVphLwxuvwWoSEzNtTpNfVm3VfxqddxvWCUTVzis98+0oJvDsW7Yh1JJQgpCgCag==}
-    engines: {node: ^22.11.0 || >=24.10.0, pnpm: ^10.0.0}
-
-  '@renovatebot/ruby-semver@4.1.2':
-    resolution: {integrity: sha512-zTK2X2r6fQTgQ1lqM0jaF/MgxmXCp0UrfiE1Ks3rQOBQjci4Xez1Zzsy4MgtjhMiHcdDi4lbBvtlPnksvEU8GQ==}
-    engines: {node: ^20.9.0 || ^22.11.0 || ^24, pnpm: ^10.0.0}
-
-  '@rolldown/binding-android-arm64@1.0.0-rc.4':
-    resolution: {integrity: sha512-vRq9f4NzvbdZavhQbjkJBx7rRebDKYR9zHfO/Wg486+I7bSecdUapzCm5cyXoK+LHokTxgSq7A5baAXUZkIz0w==}
+  '@rolldown/binding-android-arm64@1.0.0-rc.11':
+    resolution: {integrity: sha512-SJ+/g+xNnOh6NqYxD0V3uVN4W3VfnrGsC9/hoglicgTNfABFG9JjISvkkU0dNY84MNHLWyOgxP9v9Y9pX4S7+A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [android]
 
-  '@rolldown/binding-darwin-arm64@1.0.0-rc.4':
-    resolution: {integrity: sha512-kFgEvkWLqt3YCgKB5re9RlIrx9bRsvyVUnaTakEpOPuLGzLpLapYxE9BufJNvPg8GjT6mB1alN4yN1NjzoeM8Q==}
+  '@rolldown/binding-android-arm64@1.0.3':
+    resolution: {integrity: sha512-454rs7jHngixp/NMxd5srYD57OnzSlZ/eFTETjORQHLwJG1lRtmNOJcBerZlfu4GjKqeq8aCCIQrMdHyhI51Hw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
-    os: [darwin]
-
-  '@rolldown/binding-darwin-x64@1.0.0-rc.4':
-    resolution: {integrity: sha512-JXmaOJGsL/+rsmMfutcDjxWM2fTaVgCHGoXS7nE8Z3c9NAYjGqHvXrAhMUZvMpHS/k7Mg+X7n/MVKb7NYWKKww==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [darwin]
-
-  '@rolldown/binding-freebsd-x64@1.0.0-rc.4':
-    resolution: {integrity: sha512-ep3Catd6sPnHTM0P4hNEvIv5arnDvk01PfyJIJ+J3wVCG1eEaPo09tvFqdtcaTrkwQy0VWR24uz+cb4IsK53Qw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.4':
-    resolution: {integrity: sha512-LwA5ayKIpnsgXJEwWc3h8wPiS33NMIHd9BhsV92T8VetVAbGe2qXlJwNVDGHN5cOQ22R9uYvbrQir2AB+ntT2w==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [linux]
-
-  '@rolldown/binding-linux-arm64-gnu@1.0.0-rc.4':
-    resolution: {integrity: sha512-AC1WsGdlV1MtGay/OQ4J9T7GRadVnpYRzTcygV1hKnypbYN20Yh4t6O1Sa2qRBMqv1etulUknqXjc3CTIsBu6A==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [linux]
-    libc: [glibc]
-
-  '@rolldown/binding-linux-arm64-musl@1.0.0-rc.4':
-    resolution: {integrity: sha512-lU+6rgXXViO61B4EudxtVMXSOfiZONR29Sys5VGSetUY7X8mg9FCKIIjcPPj8xNDeYzKl+H8F/qSKOBVFJChCQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [linux]
-    libc: [musl]
-
-  '@rolldown/binding-linux-x64-gnu@1.0.0-rc.4':
-    resolution: {integrity: sha512-DZaN1f0PGp/bSvKhtw50pPsnln4T13ycDq1FrDWRiHmWt1JeW+UtYg9touPFf8yt993p8tS2QjybpzKNTxYEwg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [linux]
-    libc: [glibc]
-
-  '@rolldown/binding-linux-x64-musl@1.0.0-rc.4':
-    resolution: {integrity: sha512-RnGxwZLN7fhMMAItnD6dZ7lvy+TI7ba+2V54UF4dhaWa/p8I/ys1E73KO6HmPmgz92ZkfD8TXS1IMV8+uhbR9g==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [linux]
-    libc: [musl]
-
-  '@rolldown/binding-openharmony-arm64@1.0.0-rc.4':
-    resolution: {integrity: sha512-6lcI79+X8klGiGd8yHuTgQRjuuJYNggmEml+RsyN596P23l/zf9FVmJ7K0KVKkFAeYEdg0iMUKyIxiV5vebDNQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [openharmony]
-
-  '@rolldown/binding-wasm32-wasi@1.0.0-rc.4':
-    resolution: {integrity: sha512-wz7ohsKCAIWy91blZ/1FlpPdqrsm1xpcEOQVveWoL6+aSPKL4VUcoYmmzuLTssyZxRpEwzuIxL/GDsvpjaBtOw==}
-    engines: {node: '>=14.0.0'}
-    cpu: [wasm32]
-
-  '@rolldown/binding-win32-arm64-msvc@1.0.0-rc.4':
-    resolution: {integrity: sha512-cfiMrfuWCIgsFmcVG0IPuO6qTRHvF7NuG3wngX1RZzc6dU8FuBFb+J3MIR5WrdTNozlumfgL4cvz+R4ozBCvsQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [win32]
-
-  '@rolldown/binding-win32-x64-msvc@1.0.0-rc.4':
-    resolution: {integrity: sha512-p6UeR9y7ht82AH57qwGuFYn69S6CZ7LLKdCKy/8T3zS9VTrJei2/CGsTUV45Da4Z9Rbhc7G4gyWQ/Ioamqn09g==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [win32]
-
-  '@rolldown/pluginutils@1.0.0-rc.4':
-    resolution: {integrity: sha512-1BrrmTu0TWfOP1riA8uakjFc9bpIUGzVKETsOtzY39pPga8zELGDl8eu1Dx7/gjM5CAz14UknsUMpBO8L+YntQ==}
-
-  '@rollup/rollup-android-arm-eabi@4.61.0':
-    resolution: {integrity: sha512-dnxczajOqt0gesZlN5pGQ1s1imQVrsmCw5G2Ci4oM+0WvNz3pyRnlWrT7McoZIb8VlFwCawdmbWRmxRn7HI+VQ==}
-    cpu: [arm]
-    os: [android]
-
-  '@rollup/rollup-android-arm64@4.61.0':
-    resolution: {integrity: sha512-Bp3JpGP00Vu3f238ivRrjf7z3xSzVPXqCmaJYA9t2c+c8vKYvOzmXF7LkkeUalTEGd6cZcSWe+PFIP3Vy48fRg==}
-    cpu: [arm64]
     os: [android]
 
-  '@rollup/rollup-darwin-arm64@4.61.0':
-    resolution: {integrity: sha512-zaYIpr670mUmmZ1tVzUFplbQbG7h3Gugx3L5FoqhsC2m/YnLlR1a7zVLmXNPy+iY1tFPEbNG+HHBXZGyId0G5w==}
+  '@rolldown/binding-android-arm64@1.1.0':
+    resolution: {integrity: sha512-gCYzGOSkYY6Z034suzd20euvds7lPzMEEla62DJGE/ZAlR4OMBnNbvnBSsIGUCAr52gaWMsloGxP4tVGtN5aCA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@rolldown/binding-darwin-arm64@1.0.0-rc.11':
+    resolution: {integrity: sha512-7WQgR8SfOPwmDZGFkThUvsmd/nwAWv91oCO4I5LS7RKrssPZmOt7jONN0cW17ydGC1n/+puol1IpoieKqQidmg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
 
-  '@rollup/rollup-darwin-x64@4.61.0':
-    resolution: {integrity: sha512-+P49fvkv2dSoeevUW+lgZ/I2JHSsJCK1Lyjj7Cu6E4UHG4tS9XIefzIjo5qhgELjAclnen1rLzK2PMKJdo+Dyg==}
+  '@rolldown/binding-darwin-arm64@1.0.3':
+    resolution: {integrity: sha512-PcAhP+ynjURNyy8SKGl5DQP94aGuB/7JrXJb/t7P+hanXvQVMWzUvRRhBAcg/lNRadBhoUPqSoP4xw5tR/KBEA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rolldown/binding-darwin-arm64@1.1.0':
+    resolution: {integrity: sha512-JQBD77MNgu+4Z6RAyg69acugdrhhVoWesr3l47zohYZ2YV2fwkWMArkN/2p4l6Ei+Sno7W5q+UsKdVWq5Ens0w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rolldown/binding-darwin-x64@1.0.0-rc.11':
+    resolution: {integrity: sha512-39Ks6UvIHq4rEogIfQBoBRusj0Q0nPVWIvqmwBLaT6aqQGIakHdESBVOPRRLacy4WwUPIx4ZKzfZ9PMW+IeyUQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
 
-  '@rollup/rollup-freebsd-arm64@4.61.0':
-    resolution: {integrity: sha512-l3FAAOyKJXH2ea6KNFN+MMgC/rnE94YGLXs2ehYqDcCoHt1DpvgWX75BhUJxN38XojP7Ul+4H8PRn7EdyqSDrw==}
-    cpu: [arm64]
-    os: [freebsd]
+  '@rolldown/binding-darwin-x64@1.0.3':
+    resolution: {integrity: sha512-9YpfeUvSE2RS7wysJ81uOZkXJz7f7Q55H2Gvp3VEw/EsahqDtrphrZ0EwDLK5vvKOzaCrBsjF8JmnMLcUt78Gg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
 
-  '@rollup/rollup-freebsd-x64@4.61.0':
-    resolution: {integrity: sha512-VokPN3TSctKj65cyCNPaUh4vMFA8awxOot/0sp+4J7ZlNRKQEhXhawqPwajoi8H5ZFt61i0ugZJuTKXBjGJ17Q==}
+  '@rolldown/binding-darwin-x64@1.1.0':
+    resolution: {integrity: sha512-p/8cXUTK4Sob604e+xxPhVSbDFf29E6J0l/xESM9rdCfn3aDai3nEs6TnMHUsdD5aNlFz0+gDbiGlozLKGa2YA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rolldown/binding-freebsd-x64@1.0.0-rc.11':
+    resolution: {integrity: sha512-jfsm0ZHfhiqrvWjJAmzsqiIFPz5e7mAoCOPBNTcNgkiid/LaFKiq92+0ojH+nmJmKYkre4t71BWXUZDNp7vsag==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.61.0':
-    resolution: {integrity: sha512-DxH0P3wxm+Yzs/p3zrk9dw1rURu8p0Nv5+MRK/L7OtnLNg5rLZraSBFZ8iUXOd9f2BlhJyEpIZUH/emjq4UJ4g==}
+  '@rolldown/binding-freebsd-x64@1.0.3':
+    resolution: {integrity: sha512-yB1IlAsSNHncV6SCTL27/MVGR5htvQsoGxIv5KMGXALp+Ll1wYsn+x98M9MW7qa+NdSbvrrY7ANI4wLJ0n1e6g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rolldown/binding-freebsd-x64@1.1.0':
+    resolution: {integrity: sha512-KbtOSlVv6fElujiZWMcC3aQYhEwLVVf073RcwlSmpGQvIsKZFUqc0ef4sjUuurRwfbiI6JJXji9DQn+86hawmQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.11':
+    resolution: {integrity: sha512-zjQaUtSyq1nVe3nxmlSCuR96T1LPlpvmJ0SZy0WJFEsV4kFbXcq2u68L4E6O0XeFj4aex9bEauqjW8UQBeAvfQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
-  '@rollup/rollup-linux-arm-musleabihf@4.61.0':
-    resolution: {integrity: sha512-T6ZvMNe84kAz6TBWHC7hGAoEtzP1LWYw/AqayGWEF6uISt3Abk/st06LqRD9THd7Xz3NxzurUpzAuEAUbZf+nw==}
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.3':
+    resolution: {integrity: sha512-Yi30IVAAfLUCy2MseFjbB1jAMDl1VMCAas5StnYp8da9+CKvMd2H2cbEjWcw5NPaPqzvYkVIaF1nNUG+b7u/sw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
-  '@rollup/rollup-linux-arm64-gnu@4.61.0':
-    resolution: {integrity: sha512-q/4hzvQkDs8b4jIBab1pnLiiM0ayTZsN2amBFPDzuyZxjEd4wDwx0UJFYM3cOZzSf5Kw8fnWSprJzIBMkcR44Q==}
+  '@rolldown/binding-linux-arm-gnueabihf@1.1.0':
+    resolution: {integrity: sha512-9fZ9i0o0/MQaw7om6Z6TsT7tfCk0jtbEFtC+aPqZL5RNsGWNcHvn6EHgL3dAprjq+AZzPTAQjg2JtpJaMt+6pg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@rolldown/binding-linux-arm64-gnu@1.0.0-rc.11':
+    resolution: {integrity: sha512-WMW1yE6IOnehTcFE9eipFkm3XN63zypWlrJQ2iF7NrQ9b2LDRjumFoOGJE8RJJTJCTBAdmLMnJ8uVitACUUo1Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-arm64-musl@4.61.0':
-    resolution: {integrity: sha512-vvYWX3akdEAY6km+9wAqFDnk6pQsbJKVnj7xawcvs/+fdlYBGp+U+Qq/lLfpIxYIZvZLHMAKD9HLdacSx/r3dw==}
+  '@rolldown/binding-linux-arm64-gnu@1.0.3':
+    resolution: {integrity: sha512-jsO7R8To+AdlYgUmN5sHSCZbfhtMBkO0WUx8iORQnPcMMdgr7qM2DQmMwgabs3GhNztdmoKkMKQFHD6DTMCIQw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-arm64-gnu@1.1.0':
+    resolution: {integrity: sha512-+tog7T66i+yFyIuuAnjL6xmW182W/qTBOUt6BtQ6lBIM1Eikh/fSMz4HGgvuCp5uU0zuIVWng7kDYthjCMOHcg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-arm64-musl@1.0.0-rc.11':
+    resolution: {integrity: sha512-jfndI9tsfm4APzjNt6QdBkYwre5lRPUgHeDHoI7ydKUuJvz3lZeCfMsI56BZj+7BYqiKsJm7cfd/6KYV7ubrBg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@rollup/rollup-linux-loong64-gnu@4.61.0':
-    resolution: {integrity: sha512-DePa5cqOxDP/Zp0VOXpeWaGew5iIv5DXp9NYbzkX5PFQyWVX9184WCTh3hvr/7lhXo8ZVlbFLkz8+o/q1dU6gA==}
-    cpu: [loong64]
-    os: [linux]
-    libc: [glibc]
-
-  '@rollup/rollup-linux-loong64-musl@4.61.0':
-    resolution: {integrity: sha512-LV8aWMB8UChglMCEzs7RkN0GsH29RJaLLqwm9fCIjlqwxQTiWAqNcc7wjBkH31hV0PU/yVxGYvrYsgfea2qw6g==}
-    cpu: [loong64]
+  '@rolldown/binding-linux-arm64-musl@1.0.3':
+    resolution: {integrity: sha512-VWkUHwWriDciit80wleYwKILoR/KMvxh/IdwS/paX+ZgpuRpCrKLUdadJbc0NpBEiyhpYawsJ73j9aCvOH+f7Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@rollup/rollup-linux-ppc64-gnu@4.61.0':
-    resolution: {integrity: sha512-QoNSnwQtaeNu5grdBbsL0tt1uyl5EnS8DA8Mr3nluMXbhdQNyhN+G4tBax7VCdxLKj8YJ0/4OO9Ho84jMnJtKA==}
+  '@rolldown/binding-linux-arm64-musl@1.1.0':
+    resolution: {integrity: sha512-4b7yruLIIj/oZ3GpcLOvxcLCLDMraohn3IhQfN2hBP4w9UekG0DTIajWguJosRGfySf/+h/NwRUiMKoCpxCrqQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.11':
+    resolution: {integrity: sha512-ZlFgw46NOAGMgcdvdYwAGu2Q+SLFA9LzbJLW+iyMOJyhj5wk6P3KEE9Gct4xWwSzFoPI7JCdYmYMzVtlgQ+zfw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ppc64]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-ppc64-musl@4.61.0':
-    resolution: {integrity: sha512-/zZp5MKapIIApE8trN8qLGNSiRN9TUoaUZ1cmVu4XnVdd5LQLOXTtyi+vtfUbNnT3iyjzpPqYeKXmvJ+gJGYWw==}
+  '@rolldown/binding-linux-ppc64-gnu@1.0.3':
+    resolution: {integrity: sha512-5f1laC0SlIR0yDbFCd8acUhvJIag6N3zC5P7oUPN6wX0aOma+uKJ0wBDH5aq7I1PVI2ttTlhJwzwRIBnLiSGEg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ppc64]
     os: [linux]
-    libc: [musl]
-
-  '@rollup/rollup-linux-riscv64-gnu@4.61.0':
-    resolution: {integrity: sha512-RbrzcD3aJ1k3UbtMRRBNwojdVVyXjuVAFTfn/xPa6EEl6GE9Sm/akPgFTb9aAC9pMKGJ6CtWxaGrqWcabH+ySg==}
-    cpu: [riscv64]
-    os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-riscv64-musl@4.61.0':
-    resolution: {integrity: sha512-ZF+onDsBso8PJf1XaG9lB+O9RnBpKGnY6OrzC4CSHrtC1jb6jWLTKK4bRqdoCXHd22gyr2hiYmEAm8Wns/BOCw==}
-    cpu: [riscv64]
+  '@rolldown/binding-linux-ppc64-gnu@1.1.0':
+    resolution: {integrity: sha512-QRDOVZd0bhQ5jLsUsCC3dUxDWdTSVY9WMznowZgCGOrZfLLgctWpelhUASEiBwsXfat/JwYnVd1EaxMhqyT+UQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
     os: [linux]
-    libc: [musl]
+    libc: [glibc]
 
-  '@rollup/rollup-linux-s390x-gnu@4.61.0':
-    resolution: {integrity: sha512-Atk0aSIk5Zx2Wuh9dgRQgLP0Koc8hOeYpbWryMXyk8G8/HmPkwPPkMqIIDhrXHHYqfUzSJA/I7IWSBv8xSmRBA==}
+  '@rolldown/binding-linux-s390x-gnu@1.0.0-rc.11':
+    resolution: {integrity: sha512-hIOYmuT6ofM4K04XAZd3OzMySEO4K0/nc9+jmNcxNAxRi6c5UWpqfw3KMFV4MVFWL+jQsSh+bGw2VqmaPMTLyw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-x64-gnu@4.61.0':
-    resolution: {integrity: sha512-0uMOcf3eZ5K+K4cYHkdxShFMPlPXCOdfDFEFn9dNYAEEd2cVvmOfH7zFgRVoDgmtQ1m9k5q7qfrHzyMAubKYUA==}
+  '@rolldown/binding-linux-s390x-gnu@1.0.3':
+    resolution: {integrity: sha512-Iq4ko0r4XsgbrF/LunNgHtAGLRRVE2kXonAXQ/MV0mC6jQpMOhW1SvtZja2EhC/kd05++bP78dsqBeIQyYJ6Yg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-s390x-gnu@1.1.0':
+    resolution: {integrity: sha512-ypxT+Hq76NFG7woFbNbySnGEajFuYuIXeKz/jfCU+lXUoxfi3zLE6OG/ZQNeK3RpZSYJlAe2bokpsQ046CaieQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-x64-gnu@1.0.0-rc.11':
+    resolution: {integrity: sha512-qXBQQO9OvkjjQPLdUVr7Nr2t3QTZI7s4KZtfw7HzBgjbmAPSFwSv4rmET9lLSgq3rH/ndA3ngv3Qb8l2njoPNA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-x64-musl@4.61.0':
-    resolution: {integrity: sha512-mvFtE4A/t/7hRJ7X8Ozmu8FsIkAUat2nzl12pgU337BRmq87AQUJztwHz2Zv5/tjo9/C95E66CK03SI/ToEDJw==}
+  '@rolldown/binding-linux-x64-gnu@1.0.3':
+    resolution: {integrity: sha512-B8m6tD5+/N5FeNQFbKlLA/2yVq9ycQP1SeedyEYYKWBNR3ZQbkvIUcNnDNM03lO1l5F2roiiFJGgvoLLyZXtSg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-x64-gnu@1.1.0':
+    resolution: {integrity: sha512-IdovCmfROFmpTLahdecTDFL74aLERVYN68F/mLZjfVh6LfoplPfI6deyHNMTcVujbokDV5k05XrFO22zfv+qjg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-x64-musl@1.0.0-rc.11':
+    resolution: {integrity: sha512-/tpFfoSTzUkH9LPY+cYbqZBDyyX62w5fICq9qzsHLL8uTI6BHip3Q9Uzft0wylk/i8OOwKik8OxW+QAhDmzwmg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@rollup/rollup-openbsd-x64@4.61.0':
-    resolution: {integrity: sha512-z9b9+aTxvt8n2rNltMPvyaUfB8NJ+CVyOrGK/MdIKHx7B+lXmZpm/XbRsU7Rpf3fRqJ2uS6mBJiJveCtq8LHDg==}
+  '@rolldown/binding-linux-x64-musl@1.0.3':
+    resolution: {integrity: sha512-pSdpdUJHkuCxun9LE7jvgUB9qsRgaiyNNCX7m/AvHTcq67AiT/Yhoxvw5zPfhrM8k/BfP8ce/hMOpthKDpEUow==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
-    os: [openbsd]
+    os: [linux]
+    libc: [musl]
 
-  '@rollup/rollup-openharmony-arm64@4.61.0':
-    resolution: {integrity: sha512-jXaXFqKMehsOc+g8R6oo33RRC6w07G9jDBxAE5eAKX7mOcCbZloYIPNhfG9Wl+P9O9IWHFO4OJgPi1Ml2qkt7w==}
+  '@rolldown/binding-linux-x64-musl@1.1.0':
+    resolution: {integrity: sha512-pcA8xlFp2tyk9T2R6Fi/rPe3bQ1MA+sSMDNUU5Ogu80GHOatkE4P8YCreGAvZErm5Ho2YRXnyvNrWiRncfVysQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@rolldown/binding-openharmony-arm64@1.0.0-rc.11':
+    resolution: {integrity: sha512-mcp3Rio2w72IvdZG0oQ4bM2c2oumtwHfUfKncUM6zGgz0KgPz4YmDPQfnXEiY5t3+KD/i8HG2rOB/LxdmieK2g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [openharmony]
 
-  '@rollup/rollup-win32-arm64-msvc@4.61.0':
-    resolution: {integrity: sha512-OXNWVFocS2IA4+QplhTZZ2a+8hPZR7T8KuozsNmJKK8y7cp83StHvGksfHzPG3wczWTczyWHVQuqeiTUbjiyBg==}
+  '@rolldown/binding-openharmony-arm64@1.0.3':
+    resolution: {integrity: sha512-OXXS3RKJgX2uLwM+gYyuH5omcH8fL1LJs96pZGgtetVCahON57+d4SJHzTgZiOjxgGkSnpXpOsWuPDGAKAigEg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rolldown/binding-openharmony-arm64@1.1.0':
+    resolution: {integrity: sha512-4+fexHayrLCWpriPh4c6dNvL4an34DEZCG7zOM/FD5QNF6h8DT+bDXzyB/kfC8lDJbaFb7jKShtnjDQFXVQEjg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rolldown/binding-wasm32-wasi@1.0.0-rc.11':
+    resolution: {integrity: sha512-LXk5Hii1Ph9asuGRjBuz8TUxdc1lWzB7nyfdoRgI0WGPZKmCxvlKk8KfYysqtr4MfGElu/f/pEQRh8fcEgkrWw==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
+  '@rolldown/binding-wasm32-wasi@1.0.3':
+    resolution: {integrity: sha512-JTtb8BWFynicNSoPrehsCzBtOKjZ6jhMiPFEmOiuXg1Fl8dn2KHQob+GuPSGR0dryQa1PQJbzjF3dqO/whhjLg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [wasm32]
+
+  '@rolldown/binding-wasm32-wasi@1.1.0':
+    resolution: {integrity: sha512-SbL++MNmOw6QamrwIGDMSSfM4ceTzFr+RjbOExJSLLBinScU4WI5OdA413h1qwPw2yH7lVF1+H4svQ+6mSXKTQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [wasm32]
+
+  '@rolldown/binding-win32-arm64-msvc@1.0.0-rc.11':
+    resolution: {integrity: sha512-dDwf5otnx0XgRY1yqxOC4ITizcdzS/8cQ3goOWv3jFAo4F+xQYni+hnMuO6+LssHHdJW7+OCVL3CoU4ycnh35Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
 
-  '@rollup/rollup-win32-ia32-msvc@4.61.0':
-    resolution: {integrity: sha512-AlAbNtBO637LxSldqV43z0FfXoGfl2TW1DgAg/bs7aQswFbDewz2SJm3BUhiGfbOVtW571xbc9p+REdxhyN/Eg==}
+  '@rolldown/binding-win32-arm64-msvc@1.0.3':
+    resolution: {integrity: sha512-gEdFFEN70A/jxb2svrWsN3aDL7OUtmvlOy+6fa2jxG8K0wQ1ZbdeLGnidov6Yu5/733dI5ySfzFlQ/cb0bSz1g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rolldown/binding-win32-arm64-msvc@1.1.0':
+    resolution: {integrity: sha512-+xTE6XC7wBgk0VKRXGG+QAnyW5S9b8vfsFpiMjf0waQTmSQSU8onsH/beyZ8X4aXVveJnotiy7VDjLOaW8bTrg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rolldown/binding-win32-x64-msvc@1.0.0-rc.11':
+    resolution: {integrity: sha512-LN4/skhSggybX71ews7dAj6r2geaMJfm3kMbK2KhFMg9B10AZXnKoLCVVgzhMHL0S+aKtr4p8QbAW8k+w95bAA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@rolldown/binding-win32-x64-msvc@1.0.3':
+    resolution: {integrity: sha512-eXB7CHuaQdqmJcc3koCNtNPmT/bj2gc999kUFgBxG8Ac0NdgXc4rkCHhqrgrhN3zddvvvrgzj1e90SuSfmyIXA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@rolldown/binding-win32-x64-msvc@1.1.0':
+    resolution: {integrity: sha512-Ogji1TQNqH3ACLnYr+1Ns1nyrJ0CO2P585u9Hsh02pXvtFiFpgtgT2b3P4PnCOU86VVCvqtAeCN4OftMT8KU4w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@rolldown/pluginutils@1.0.0-rc.11':
+    resolution: {integrity: sha512-xQO9vbwBecJRv9EUcQ/y0dzSTJgA7Q6UVN7xp6B81+tBGSLVAK03yJ9NkJaUA7JFD91kbjxRSC/mDnmvXzbHoQ==}
+
+  '@rolldown/pluginutils@1.0.1':
+    resolution: {integrity: sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==}
+
+  '@rollup/plugin-alias@6.0.0':
+    resolution: {integrity: sha512-tPCzJOtS7uuVZd+xPhoy5W4vThe6KWXNmsFCNktaAh5RTqcLiSfT4huPQIXkgJ6YCOjJHvecOAzQxLFhPxKr+g==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      rollup: '>=4.0.0'
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
+  '@rollup/plugin-commonjs@29.0.2':
+    resolution: {integrity: sha512-S/ggWH1LU7jTyi9DxZOKyxpVd4hF/OZ0JrEbeLjXk/DFXwRny0tjD2c992zOUYQobLrVkRVMDdmHP16HKP7GRg==}
+    engines: {node: '>=16.0.0 || 14 >= 14.17'}
+    peerDependencies:
+      rollup: ^2.68.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
+  '@rollup/plugin-inject@5.0.5':
+    resolution: {integrity: sha512-2+DEJbNBoPROPkgTDNe8/1YXWcqxbN5DTjASVIOx8HS+pITXushyNiBV56RB08zuptzz8gT3YfkqriTBVycepg==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
+  '@rollup/plugin-json@6.1.0':
+    resolution: {integrity: sha512-EGI2te5ENk1coGeADSIwZ7G2Q8CJS2sF120T7jLw4xFw9n7wIOXHo+kIYRAoVpJAN+kmqZSoO3Fp4JtoNF4ReA==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
+  '@rollup/plugin-node-resolve@16.0.3':
+    resolution: {integrity: sha512-lUYM3UBGuM93CnMPG1YocWu7X802BrNF3jW2zny5gQyLQgRFJhV1Sq0Zi74+dh/6NBx1DxFC4b4GXg9wUCG5Qg==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^2.78.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
+  '@rollup/plugin-replace@6.0.3':
+    resolution: {integrity: sha512-J4RZarRvQAm5IF0/LwUUg+obsm+xZhYnbMXmXROyoSE1ATJe3oXSb9L5MMppdxP2ylNSjv6zFBwKYjcKMucVfA==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
+  '@rollup/plugin-terser@1.0.0':
+    resolution: {integrity: sha512-FnCxhTBx6bMOYQrar6C8h3scPt8/JwIzw3+AJ2K++6guogH5fYaIFia+zZuhqv0eo1RN7W1Pz630SyvLbDjhtQ==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      rollup: ^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
+  '@rollup/pluginutils@5.3.0':
+    resolution: {integrity: sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
+  '@rollup/rollup-android-arm-eabi@4.61.1':
+    resolution: {integrity: sha512-JnBB8MdXj45cajvTuO5FmPlvFVJRQgvrz1uSEl3NwqFnReAPGwb8EanbGi4z2nRaqLzjJSv5/JmycoTKlRZxHA==}
+    cpu: [arm]
+    os: [android]
+
+  '@rollup/rollup-android-arm64@4.61.1':
+    resolution: {integrity: sha512-Jx2g7iSjw4AOT0HDPHM9RV3GNjRXwybWtSFZiZAYUTjUwjVrYIwq3kBf+LnhqJlzXFAqTAh2F7IGI+O568exPw==}
+    cpu: [arm64]
+    os: [android]
+
+  '@rollup/rollup-darwin-arm64@4.61.1':
+    resolution: {integrity: sha512-0F1L/Z3Eqv8mT2n3dCpeO8GcTvHvVqkP5/t6DMsn0KzhYVcg+s7Ncl5DS8qjKYEeio6Az0Gt6nyBORay5qIlCA==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rollup/rollup-darwin-x64@4.61.1':
+    resolution: {integrity: sha512-qLttcH871ujY4YcVfUSShhOw+CsoTatYz8gRbHO7Bb92QH059/P0y5do1KMs41fY0BpD2x4AJH/gID0zFiqVKQ==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rollup/rollup-freebsd-arm64@4.61.1':
+    resolution: {integrity: sha512-fUI4RapGE0Oh3mb8mgfvC1O2nU1RpDZUKnDQm3xB1Ipg7C2wTs5Kstz7G2uWK99a8S2yTMq8/P4uycwNa0nJyw==}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@rollup/rollup-freebsd-x64@4.61.1':
+    resolution: {integrity: sha512-H5YrdvJaDtI/U9/emrD4b++xkvp3y/JvOe4rizHbxvkyMfRS/CiRYdji+Pl8D0brEaNFWUh1drQxgAGIl6Xudw==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.61.1':
+    resolution: {integrity: sha512-Q8CBCCQtDFrYtXoeUXSrnFXKOnyUhx6bz+SkL6A0E7V8kAiCJ5pamq1WtbfpVGhR5TSpXY6ak3avmDc5fHTyJA==}
+    cpu: [arm]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-arm-musleabihf@4.61.1':
+    resolution: {integrity: sha512-nwnhk1581l0FBVellGcVCAT0Oi06onEA3WB53sf01VO3I0UPBkMH9sXONYME2K0ovXcNayJfNtHfm6mpJElatQ==}
+    cpu: [arm]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-arm64-gnu@4.61.1':
+    resolution: {integrity: sha512-x5Xr49hwt3hdW75UOZm3395YwwzPyauktslv29KpWL/T+vVAzoT3azLcTWv0eMciBNrx+DYjH4paehHoLpPvpg==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-arm64-musl@4.61.1':
+    resolution: {integrity: sha512-unMS3H73DpaoPyyEVPjGKleM/s0mkmsauTENpw4INQY8y4+IuLNjkueQ5QCtC0D3N38Y38yhAU8OoZ20S2Tm6w==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-loong64-gnu@4.61.1':
+    resolution: {integrity: sha512-zNZzGRnAhwjFEYmvphJRV5XaQGjs62cCmeYYHUT//NbvEnHauw+I85nGG+SiVg5ld4GX8D1IbKIX+ozITQnhMQ==}
+    cpu: [loong64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-loong64-musl@4.61.1':
+    resolution: {integrity: sha512-LdpWGL8X209B2SIvWjqlc8VZgM6PKfontSerGepuldQmHYrAOtnMCXeJkxXGbC+PPZVOuu5czJo7fNV6aeW8rQ==}
+    cpu: [loong64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-ppc64-gnu@4.61.1':
+    resolution: {integrity: sha512-EC5kTtNaNGOmbMGqar8dvJy6y/hg99GAwjfBz++pxZhQATXGcRjd6c5en5wcbru0vkRmiMGsQKdMJOOf6sza4g==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-ppc64-musl@4.61.1':
+    resolution: {integrity: sha512-8hiwp6D4acEcNK78I4rP0/XtS1sknWIAMJBPdR4l6zUtyTm5KiTDr5bXmWt4foY7nAN7AThDHgkLIEZOWKbzWw==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-riscv64-gnu@4.61.1':
+    resolution: {integrity: sha512-10dh/h/BqA7DuMPWSxkR8uks18FRwnwOEqr5zOTEl+NOwP/OMzKX8OFR/Of9xxDA7D5qef1Nzar5WDD2kCCr1g==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-riscv64-musl@4.61.1':
+    resolution: {integrity: sha512-YKJ5lg35DP17gcAOggnihe+APw9HLyj1Xn7gsmGumBJAUDa6NGXNixJzmkWLhcK9TOuuyQjdamzvJefkO7qHZQ==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-s390x-gnu@4.61.1':
+    resolution: {integrity: sha512-Mlil5G2Jj6a7B3LWGctg+XPL9vdXYuzCtNXfxOQ0nPjc2m6ueUktocPGH9bnAM0bNRKb/bAWTujUU7IJQdQA+g==}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-x64-gnu@4.61.1':
+    resolution: {integrity: sha512-bVWIOIk6pV01p4CdUbPP7CJ/434z+OooYjDuFcR+44N35YvKUC66G8MGnvcWx5mWKW3g61J+t74l3Kj15Kwn2Q==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-x64-musl@4.61.1':
+    resolution: {integrity: sha512-qy5pBvZbqNFheBz61R1rzsezjm0J7O2oNGoWtGoY89SZYLUfxAJTBAqDChqAIdB4rCiIbi9nF7yZ83GnNiLwSw==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-openbsd-x64@4.61.1':
+    resolution: {integrity: sha512-E83TXjI4zm0+5f2qO+UOudaCYIhYwpJ5jq6YCZNIZ+6CbfhKrkAGezeiASBL9ElxAxFsRS9ZhESv8mfnj6TKeg==}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@rollup/rollup-openharmony-arm64@4.61.1':
+    resolution: {integrity: sha512-fbWnKqVkjrJN38vNe3ahkbk6iejS/3b0Nt7EEtPpE6RBacZcGXNKbzfHN3GUUlXOPghUg0j6XUGrtjX9z1sIvA==}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rollup/rollup-win32-arm64-msvc@4.61.1':
+    resolution: {integrity: sha512-ArMl38iVAbk0New1ogihQNY6iphLi4ZaRsa037gUzv5yeKPY8TD3Dmy4x2RNC1VztU/uqm+G+/RwFrSka3Oy2g==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rollup/rollup-win32-ia32-msvc@4.61.1':
+    resolution: {integrity: sha512-0mYtjHS9ucAbcATycCNK9IGBk/cCe/ma7EmSLGZdsxnOA8cjRIyU04wDpVAD9NiOfLUR9KTxdiO53uOkherqjQ==}
     cpu: [ia32]
     os: [win32]
 
-  '@rollup/rollup-win32-x64-gnu@4.61.0':
-    resolution: {integrity: sha512-QRSrQXyJ1M4tjNXdR0/G/IgV6lzfQQJYBjlWIEYkY2Xs86DRl/iEpQ4blMDjJxSl7n19eDKKXMg0AmuBVYy8pQ==}
+  '@rollup/rollup-win32-x64-gnu@4.61.1':
+    resolution: {integrity: sha512-gK1iCEPfpoSG9wfBihXxvBMi8ZfcWffYkEsC/Eih+iFENTaewvNcrEQ69lIOWYO5pePHKLHHO7nq5AILGO/HQQ==}
     cpu: [x64]
     os: [win32]
 
-  '@rollup/rollup-win32-x64-msvc@4.61.0':
-    resolution: {integrity: sha512-tkuFxhvKO/HlGd0VsINF6vHSYH8AF8W0TcNxKDK6JZmrehngFj78pToc8iemtnvwilDjs2G/qSzYFhe9U8q+fw==}
+  '@rollup/rollup-win32-x64-msvc@4.61.1':
+    resolution: {integrity: sha512-X+zaP2x+j4RXGfbp/seSoRHWnPxzApilDszisZxbYH5C/jTxFhCtDNdPGZb9lJyYPs24wGxruPF7Y+sIXt9Gzw==}
     cpu: [x64]
     os: [win32]
 
-  '@seald-io/binary-search-tree@1.0.3':
-    resolution: {integrity: sha512-qv3jnwoakeax2razYaMsGI/luWdliBLHTdC6jU55hQt1hcFqzauH/HsBollQ7IR4ySTtYhT+xyHoijpA16C+tA==}
+  '@sec-ant/readable-stream@0.4.1':
+    resolution: {integrity: sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==}
 
-  '@seald-io/nedb@4.1.2':
-    resolution: {integrity: sha512-bDr6TqjBVS2rDyYM9CPxAnotj5FuNL9NF8o7h7YyFXM7yruqT4ddr+PkSb2mJvvw991bqdftazkEo38gykvaww==}
+  '@shikijs/core@4.2.0':
+    resolution: {integrity: sha512-Hc87Ab1Ld/vEbZRCbwx344I5v+4RU8CVToUTRkqXL1+TjbuOp9U5Xa0M23V4GEWHxVn+yO5otb+HkQVm3ptWQQ==}
+    engines: {node: '>=20'}
+
+  '@shikijs/engine-javascript@4.2.0':
+    resolution: {integrity: sha512-fjETeq1k5ffyXqRgS6+3hpvqseLalp1kjNfRbXpUgWR8FpZ1CmQfiNHovc5lncYjt/Vg5JK/WJEmLahjwMa0og==}
+    engines: {node: '>=20'}
+
+  '@shikijs/engine-oniguruma@4.2.0':
+    resolution: {integrity: sha512-hTorK1dffPkpbMUk6Z+828PgRo7d07HbnizoP0hNPFjhxMHctj0Px/qoHeGMYafc6ju+u9iMldN4JbVzNQM++g==}
+    engines: {node: '>=20'}
+
+  '@shikijs/langs@4.2.0':
+    resolution: {integrity: sha512-bwrVRlJ0wUhZxAbVdvBbv2TTC9yLsh4C/IO5Ofz0T8MQntgDvyVnkbjw9vi50r1kx7RCIJdnJnjZAwmAsXFLZQ==}
+    engines: {node: '>=20'}
+
+  '@shikijs/primitive@4.2.0':
+    resolution: {integrity: sha512-NOq+DtUkVBJtZMVXL5A0vI0Xk8nvDYaXetFHSJFlOqjDZIVhIPRYFdGkSoElDqNuegikcc3A76SNUa8dTqtAYA==}
+    engines: {node: '>=20'}
+
+  '@shikijs/themes@4.2.0':
+    resolution: {integrity: sha512-RX8IHYeLv8Cu2W6ruc3RxUqWn0IYCqSrMBzi/uRGAmfyDNOnNO5BF/Px7o97n4XTpmFTo5GbRaazuOWj+2ak2w==}
+    engines: {node: '>=20'}
+
+  '@shikijs/types@4.2.0':
+    resolution: {integrity: sha512-VT/MKtlpOhEPZloSH3Pb9WCZEBDoQVMa9jedp5UAwmJOar1DVc9DRODAxmYPW9M93IK4ryuqRejFfmlvlVDemw==}
+    engines: {node: '>=20'}
+
+  '@shikijs/vscode-textmate@10.0.2':
+    resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
+
+  '@simple-git/args-pathspec@1.0.3':
+    resolution: {integrity: sha512-ngJMaHlsWDTfjyq9F3VIQ8b7NXbBLq5j9i5bJ6XLYtD6qlDXT7fdKY2KscWWUF8t18xx052Y/PUO1K1TRc9yKA==}
+
+  '@simple-git/argv-parser@1.1.1':
+    resolution: {integrity: sha512-Q9lBcfQ+VQCpQqGJFHe5yooOS5hGdLFFbJ5R+R5aDsnkPCahtn1hSkMcORX65J2Z5lxSkD0lQorMsncuBQxYUw==}
 
   '@sindresorhus/is@4.6.0':
     resolution: {integrity: sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw==}
@@ -1371,229 +3199,247 @@ packages:
     resolution: {integrity: sha512-P1Cz1dWaFfR4IR+U13mqqiGsLFf1KbayybWwdd2vfctdV6hDpUkgCY0nKOLLTMSoRd/jJNjtbqzf13K8DCCXQw==}
     engines: {node: '>=18'}
 
-  '@smithy/abort-controller@4.2.8':
-    resolution: {integrity: sha512-peuVfkYHAmS5ybKxWcfraK7WBBP0J+rkfUcbHJJKQ4ir3UAUNQI+Y4Vt/PqSzGqgloJ5O1dk7+WzNL8wcCSXbw==}
+  '@sindresorhus/is@8.1.0':
+    resolution: {integrity: sha512-2SX/1jW6CIMAiebvVv5ZInoCEuWQmMyBoJXXGC6Vjakjp/fpxP5eHs7/V6WKuPEIbuK06+VpjH+vjLQhr98rDQ==}
+    engines: {node: '>=22'}
+
+  '@sindresorhus/merge-streams@4.0.0':
+    resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
+    engines: {node: '>=18'}
+
+  '@smithy/core@3.24.6':
+    resolution: {integrity: sha512-wBXDRup6UU97VKyaiRo8AssnfStPtG0oAAfpq/bC0a1YYau8pM86YB4kM6ccoVi1mS8l/UHbn9oDM+7uozr/ug==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/chunked-blob-reader-native@4.2.1':
-    resolution: {integrity: sha512-lX9Ay+6LisTfpLid2zZtIhSEjHMZoAR5hHCR4H7tBz/Zkfr5ea8RcQ7Tk4mi0P76p4cN+Btz16Ffno7YHpKXnQ==}
+  '@smithy/credential-provider-imds@4.3.8':
+    resolution: {integrity: sha512-5cAM+KZC02sTqDt6NaLXyu50M/GNMd1eTzDVR8Lb0BBsVtu7RWHo47VPPEEv1vt3Yub6uzr+M5FHC+GtoT0USg==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/chunked-blob-reader@5.2.0':
-    resolution: {integrity: sha512-WmU0TnhEAJLWvfSeMxBNe5xtbselEO8+4wG0NtZeL8oR21WgH1xiO37El+/Y+H/Ie4SCwBy3MxYWmOYaGgZueA==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/config-resolver@4.4.6':
-    resolution: {integrity: sha512-qJpzYC64kaj3S0fueiu3kXm8xPrR3PcXDPEgnaNMRn0EjNSZFoFjvbUp0YUDsRhN1CB90EnHJtbxWKevnH99UQ==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/core@3.23.0':
-    resolution: {integrity: sha512-Yq4UPVoQICM9zHnByLmG8632t2M0+yap4T7ANVw482J0W7HW0pOuxwVmeOwzJqX2Q89fkXz0Vybz55Wj2Xzrsg==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/credential-provider-imds@4.2.8':
-    resolution: {integrity: sha512-FNT0xHS1c/CPN8upqbMFP83+ul5YgdisfCfkZ86Jh2NSmnqw/AJ6x5pEogVCTVvSm7j9MopRU89bmDelxuDMYw==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/eventstream-codec@4.2.8':
-    resolution: {integrity: sha512-jS/O5Q14UsufqoGhov7dHLOPCzkYJl9QDzusI2Psh4wyYx/izhzvX9P4D69aTxcdfVhEPhjK+wYyn/PzLjKbbw==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/eventstream-serde-browser@4.2.8':
-    resolution: {integrity: sha512-MTfQT/CRQz5g24ayXdjg53V0mhucZth4PESoA5IhvaWVDTOQLfo8qI9vzqHcPsdd2v6sqfTYqF5L/l+pea5Uyw==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/eventstream-serde-config-resolver@4.3.8':
-    resolution: {integrity: sha512-ah12+luBiDGzBruhu3efNy1IlbwSEdNiw8fOZksoKoWW1ZHvO/04MQsdnws/9Aj+5b0YXSSN2JXKy/ClIsW8MQ==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/eventstream-serde-node@4.2.8':
-    resolution: {integrity: sha512-cYpCpp29z6EJHa5T9WL0KAlq3SOKUQkcgSoeRfRVwjGgSFl7Uh32eYGt7IDYCX20skiEdRffyDpvF2efEZPC0A==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/eventstream-serde-universal@4.2.8':
-    resolution: {integrity: sha512-iJ6YNJd0bntJYnX6s52NC4WFYcZeKrPUr1Kmmr5AwZcwCSzVpS7oavAmxMR7pMq7V+D1G4s9F5NJK0xwOsKAlQ==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/fetch-http-handler@5.3.9':
-    resolution: {integrity: sha512-I4UhmcTYXBrct03rwzQX1Y/iqQlzVQaPxWjCjula++5EmWq9YGBrx6bbGqluGc1f0XEfhSkiY4jhLgbsJUMKRA==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/hash-blob-browser@4.2.9':
-    resolution: {integrity: sha512-m80d/iicI7DlBDxyQP6Th7BW/ejDGiF0bgI754+tiwK0lgMkcaIBgvwwVc7OFbY4eUzpGtnig52MhPAEJ7iNYg==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/hash-node@4.2.8':
-    resolution: {integrity: sha512-7ZIlPbmaDGxVoxErDZnuFG18WekhbA/g2/i97wGj+wUBeS6pcUeAym8u4BXh/75RXWhgIJhyC11hBzig6MljwA==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/hash-stream-node@4.2.8':
-    resolution: {integrity: sha512-v0FLTXgHrTeheYZFGhR+ehX5qUm4IQsjAiL9qehad2cyjMWcN2QG6/4mSwbSgEQzI7jwfoXj7z4fxZUx/Mhj2w==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/invalid-dependency@4.2.8':
-    resolution: {integrity: sha512-N9iozRybwAQ2dn9Fot9kI6/w9vos2oTXLhtK7ovGqwZjlOcxu6XhPlpLpC+INsxktqHinn5gS2DXDjDF2kG5sQ==}
+  '@smithy/fetch-http-handler@5.4.6':
+    resolution: {integrity: sha512-FEwEYJ1jlBKdhe9TPzfghEi1bP55ZeEImlDkEa62bBBYzUcnB6RUCyuiS2mqKt6ZVjUbBgcNhzfIctH+Hevx9g==}
     engines: {node: '>=18.0.0'}
 
   '@smithy/is-array-buffer@2.2.0':
     resolution: {integrity: sha512-GGP3O9QFD24uGeAXYUjwSTXARoqpZykHadOmA8G5vfJPK0/DC67qa//0qvqrJzL1xc8WQWX7/yc7fwudjPHPhA==}
     engines: {node: '>=14.0.0'}
 
-  '@smithy/is-array-buffer@4.2.0':
-    resolution: {integrity: sha512-DZZZBvC7sjcYh4MazJSGiWMI2L7E0oCiRHREDzIxi/M2LY79/21iXt6aPLHge82wi5LsuRF5A06Ds3+0mlh6CQ==}
+  '@smithy/node-http-handler@4.7.7':
+    resolution: {integrity: sha512-ZAFvHXrEk6K180EVhmZVg8GU5pUH5BSFqRs27JW3j1qEFx9YyYwWFx17x/MHcjALYimGAji7qEOlF1++be+G5A==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/md5-js@4.2.8':
-    resolution: {integrity: sha512-oGMaLj4tVZzLi3itBa9TCswgMBr7k9b+qKYowQ6x1rTyTuO1IU2YHdHUa+891OsOH+wCsH7aTPRsTJO3RMQmjQ==}
+  '@smithy/signature-v4@5.4.6':
+    resolution: {integrity: sha512-Ojg4B6oIDlIr1R86xCDJt1zJWnYa0VINmqdjfe9qxWjdRivHalZ3iSlQgVqYbW0MdpFOC5XfHEWsnbmdnpIILQ==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/middleware-content-length@4.2.8':
-    resolution: {integrity: sha512-RO0jeoaYAB1qBRhfVyq0pMgBoUK34YEJxVxyjOWYZiOKOq2yMZ4MnVXMZCUDenpozHue207+9P5ilTV1zeda0A==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/middleware-endpoint@4.4.14':
-    resolution: {integrity: sha512-FUFNE5KVeaY6U/GL0nzAAHkaCHzXLZcY1EhtQnsAqhD8Du13oPKtMB9/0WK4/LK6a/T5OZ24wPoSShff5iI6Ag==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/middleware-retry@4.4.31':
-    resolution: {integrity: sha512-RXBzLpMkIrxBPe4C8OmEOHvS8aH9RUuCOH++Acb5jZDEblxDjyg6un72X9IcbrGTJoiUwmI7hLypNfuDACypbg==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/middleware-serde@4.2.9':
-    resolution: {integrity: sha512-eMNiej0u/snzDvlqRGSN3Vl0ESn3838+nKyVfF2FKNXFbi4SERYT6PR392D39iczngbqqGG0Jl1DlCnp7tBbXQ==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/middleware-stack@4.2.8':
-    resolution: {integrity: sha512-w6LCfOviTYQjBctOKSwy6A8FIkQy7ICvglrZFl6Bw4FmcQ1Z420fUtIhxaUZZshRe0VCq4kvDiPiXrPZAe8oRA==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/node-config-provider@4.3.8':
-    resolution: {integrity: sha512-aFP1ai4lrbVlWjfpAfRSL8KFcnJQYfTl5QxLJXY32vghJrDuFyPZ6LtUL+JEGYiFRG1PfPLHLoxj107ulncLIg==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/node-http-handler@4.4.10':
-    resolution: {integrity: sha512-u4YeUwOWRZaHbWaebvrs3UhwQwj+2VNmcVCwXcYTvPIuVyM7Ex1ftAj+fdbG/P4AkBwLq/+SKn+ydOI4ZJE9PA==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/property-provider@4.2.8':
-    resolution: {integrity: sha512-EtCTbyIveCKeOXDSWSdze3k612yCPq1YbXsbqX3UHhkOSW8zKsM9NOJG5gTIya0vbY2DIaieG8pKo1rITHYL0w==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/protocol-http@5.3.8':
-    resolution: {integrity: sha512-QNINVDhxpZ5QnP3aviNHQFlRogQZDfYlCkQT+7tJnErPQbDhysondEjhikuANxgMsZrkGeiAxXy4jguEGsDrWQ==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/querystring-builder@4.2.8':
-    resolution: {integrity: sha512-Xr83r31+DrE8CP3MqPgMJl+pQlLLmOfiEUnoyAlGzzJIrEsbKsPy1hqH0qySaQm4oWrCBlUqRt+idEgunKB+iw==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/querystring-parser@4.2.8':
-    resolution: {integrity: sha512-vUurovluVy50CUlazOiXkPq40KGvGWSdmusa3130MwrR1UNnNgKAlj58wlOe61XSHRpUfIIh6cE0zZ8mzKaDPA==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/service-error-classification@4.2.8':
-    resolution: {integrity: sha512-mZ5xddodpJhEt3RkCjbmUQuXUOaPNTkbMGR0bcS8FE0bJDLMZlhmpgrvPNCYglVw5rsYTpSnv19womw9WWXKQQ==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/shared-ini-file-loader@4.4.3':
-    resolution: {integrity: sha512-DfQjxXQnzC5UbCUPeC3Ie8u+rIWZTvuDPAGU/BxzrOGhRvgUanaP68kDZA+jaT3ZI+djOf+4dERGlm9mWfFDrg==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/signature-v4@5.3.8':
-    resolution: {integrity: sha512-6A4vdGj7qKNRF16UIcO8HhHjKW27thsxYci+5r/uVRkdcBEkOEiY8OMPuydLX4QHSrJqGHPJzPRwwVTqbLZJhg==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/smithy-client@4.11.3':
-    resolution: {integrity: sha512-Q7kY5sDau8OoE6Y9zJoRGgje8P4/UY0WzH8R2ok0PDh+iJ+ZnEKowhjEqYafVcubkbYxQVaqwm3iufktzhprGg==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/types@4.12.0':
-    resolution: {integrity: sha512-9YcuJVTOBDjg9LWo23Qp0lTQ3D7fQsQtwle0jVfpbUHy9qBwCEgKuVH4FqFB3VYu0nwdHKiEMA+oXz7oV8X1kw==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/url-parser@4.2.8':
-    resolution: {integrity: sha512-NQho9U68TGMEU639YkXnVMV3GEFFULmmaWdlu1E9qzyIePOHsoSnagTGSDv1Zi8DCNN6btxOSdgmy5E/hsZwhA==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/util-base64@4.3.0':
-    resolution: {integrity: sha512-GkXZ59JfyxsIwNTWFnjmFEI8kZpRNIBfxKjv09+nkAWPt/4aGaEWMM04m4sxgNVWkbt2MdSvE3KF/PfX4nFedQ==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/util-body-length-browser@4.2.0':
-    resolution: {integrity: sha512-Fkoh/I76szMKJnBXWPdFkQJl2r9SjPt3cMzLdOB6eJ4Pnpas8hVoWPYemX/peO0yrrvldgCUVJqOAjUrOLjbxg==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/util-body-length-node@4.2.1':
-    resolution: {integrity: sha512-h53dz/pISVrVrfxV1iqXlx5pRg3V2YWFcSQyPyXZRrZoZj4R4DeWRDo1a7dd3CPTcFi3kE+98tuNyD2axyZReA==}
+  '@smithy/types@4.14.3':
+    resolution: {integrity: sha512-YupL0ZWmFtJexUN2cHzkvvF/b9pKrtAIfT1o7/oY/Ppu8IYeZ+lDPM5vZdQJaSeA132dJCqojjGC9NhXeF71VQ==}
     engines: {node: '>=18.0.0'}
 
   '@smithy/util-buffer-from@2.2.0':
     resolution: {integrity: sha512-IJdWBbTcMQ6DA0gdNhh/BwrLkDR+ADW5Kr1aZmd4k3DIF6ezMV4R2NIAmT08wQJ3yUK82thHWmC/TnK/wpMMIA==}
     engines: {node: '>=14.0.0'}
 
-  '@smithy/util-buffer-from@4.2.0':
-    resolution: {integrity: sha512-kAY9hTKulTNevM2nlRtxAG2FQ3B2OR6QIrPY3zE5LqJy1oxzmgBGsHLWTcNhWXKchgA0WHW+mZkQrng/pgcCew==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/util-config-provider@4.2.0':
-    resolution: {integrity: sha512-YEjpl6XJ36FTKmD+kRJJWYvrHeUvm5ykaUS5xK+6oXffQPHeEM4/nXlZPe+Wu0lsgRUcNZiliYNh/y7q9c2y6Q==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/util-defaults-mode-browser@4.3.30':
-    resolution: {integrity: sha512-cMni0uVU27zxOiU8TuC8pQLC1pYeZ/xEMxvchSK/ILwleRd1ugobOcIRr5vXtcRqKd4aBLWlpeBoDPJJ91LQng==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/util-defaults-mode-node@4.2.33':
-    resolution: {integrity: sha512-LEb2aq5F4oZUSzWBG7S53d4UytZSkOEJPXcBq/xbG2/TmK9EW5naUZ8lKu1BEyWMzdHIzEVN16M3k8oxDq+DJA==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/util-endpoints@3.2.8':
-    resolution: {integrity: sha512-8JaVTn3pBDkhZgHQ8R0epwWt+BqPSLCjdjXXusK1onwJlRuN69fbvSK66aIKKO7SwVFM6x2J2ox5X8pOaWcUEw==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/util-hex-encoding@4.2.0':
-    resolution: {integrity: sha512-CCQBwJIvXMLKxVbO88IukazJD9a4kQ9ZN7/UMGBjBcJYvatpWk+9g870El4cB8/EJxfe+k+y0GmR9CAzkF+Nbw==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/util-middleware@4.2.8':
-    resolution: {integrity: sha512-PMqfeJxLcNPMDgvPbbLl/2Vpin+luxqTGPpW3NAQVLbRrFRzTa4rNAASYeIGjRV9Ytuhzny39SpyU04EQreF+A==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/util-retry@4.2.8':
-    resolution: {integrity: sha512-CfJqwvoRY0kTGe5AkQokpURNCT1u/MkRzMTASWMPPo2hNSnKtF1D45dQl3DE2LKLr4m+PW9mCeBMJr5mCAVThg==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/util-stream@4.5.12':
-    resolution: {integrity: sha512-D8tgkrmhAX/UNeCZbqbEO3uqyghUnEmmoO9YEvRuwxjlkKKUE7FOgCJnqpTlQPe9MApdWPky58mNQQHbnCzoNg==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/util-uri-escape@4.2.0':
-    resolution: {integrity: sha512-igZpCKV9+E/Mzrpq6YacdTQ0qTiLm85gD6N/IrmyDvQFA4UnU3d5g3m8tMT/6zG/vVkWSU+VxeUyGonL62DuxA==}
-    engines: {node: '>=18.0.0'}
-
   '@smithy/util-utf8@2.3.0':
     resolution: {integrity: sha512-R8Rdn8Hy72KKcebgLiv8jQcQkXoLMOGGv5uI1/k0l+snqkOzQ1R0ChUBCxWMlBsFMekWjq0wRudIweFs7sKT5A==}
     engines: {node: '>=14.0.0'}
 
-  '@smithy/util-utf8@4.2.0':
-    resolution: {integrity: sha512-zBPfuzoI8xyBtR2P6WQj63Rz8i3AmfAaJLuNG8dWsfvPe8lO4aCPYLn879mEgHndZH1zQ2oXmG8O1GGzzaoZiw==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/util-waiter@4.2.8':
-    resolution: {integrity: sha512-n+lahlMWk+aejGuax7DPWtqav8HYnWxQwR+LCG2BgCUmaGcTe9qZCFsmw8TMg9iG75HOwhrJCX9TCJRLH+Yzqg==}
-    engines: {node: '>=18.0.0'}
-
-  '@smithy/uuid@1.1.0':
-    resolution: {integrity: sha512-4aUIteuyxtBUhVdiQqcDhKFitwfd9hqoSDYY2KRXiWtgoWJ9Bmise+KfEPDiVHWeJepvF8xJO9/9+WDIciMFFw==}
-    engines: {node: '>=18.0.0'}
+  '@speed-highlight/core@1.2.15':
+    resolution: {integrity: sha512-BMq1K3DsElxDWawkX6eLg9+CKJrTVGCBAWVuHXVUV2u0s2711qiChLSId6ikYPfxhdYocLNt3wWwSvDiTvFabw==}
 
   '@standard-schema/spec@1.1.0':
     resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
 
+  '@storybook/addon-a11y@10.4.2':
+    resolution: {integrity: sha512-9Bm41peswHVPXm8iDBEA/sCXx+MUQV8Q10yFgNC2zTbtxKamMDb8HZCPIRDxvjBQ5v13eaXA2yZGTwQ+D8S6+g==}
+    peerDependencies:
+      storybook: ^10.4.2
+
+  '@storybook/addon-docs@10.4.2':
+    resolution: {integrity: sha512-CtW1O4xSKZPNtpWgpfp4yB/x4pj/of+3MvlEDfErSlr3Hp3QmEa2pCLaecR08H5LJqJFlt1PtG0UrIynTvgW9w==}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      storybook: ^10.4.2
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@storybook/builder-vite@10.4.2':
+    resolution: {integrity: sha512-d3+i9vbbUfV6hvT90qabmy1WmC4bEJ7iAYDm0217doeA+S6awF25GF0qOy9gN9waU4NMntHoVpdB1YQO2wUj/w==}
+    peerDependencies:
+      storybook: ^10.4.2
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  '@storybook/csf-plugin@10.4.2':
+    resolution: {integrity: sha512-GqX/2DeF3/jKs5D7gpDiuT9gd0c/f2TKcnQ5av4/s3YqeN+0nhm7btkCrDfgF16uzE1Zj3OrkxvB3AOkfxWgDg==}
+    peerDependencies:
+      esbuild: '*'
+      rollup: '*'
+      storybook: ^10.4.2
+      vite: '*'
+      webpack: '*'
+    peerDependenciesMeta:
+      esbuild:
+        optional: true
+      rollup:
+        optional: true
+      vite:
+        optional: true
+      webpack:
+        optional: true
+
+  '@storybook/global@5.0.0':
+    resolution: {integrity: sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==}
+
+  '@storybook/icons@2.0.2':
+    resolution: {integrity: sha512-KZBCpXsshAIjczYNXR/rlxEtCUX/eAbpFNwKi8bcOomrLA4t/SyPz5RF+lVPO2oZBUE4sAkt43mfJUevQDSEEw==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  '@storybook/react-dom-shim@10.4.2':
+    resolution: {integrity: sha512-Eng3Yt2NCjPX94QcfyLeUFhrMj0hec2yU9J/qafBVbfj9XrFI8o+0ZwYJ7uXb9ECbvPN4y06dgt/2W/LiR417w==}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      '@types/react-dom': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      storybook: ^10.4.2
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@storybook/vue3-vite@10.4.2':
+    resolution: {integrity: sha512-mhvzZNE97Jrf0hsZn0MSyyIvzEJ6CFrr9GnNFCe2ynvqC8/TWpCiMHhhnOGRFqfGC0NuLEzUBCuto38IK4qb/A==}
+    peerDependencies:
+      storybook: ^10.4.2
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  '@storybook/vue3@10.4.2':
+    resolution: {integrity: sha512-HGmL/ErcjA4cD8lQLZ4zjxxO2teF5W4sWK5J6Rq0VBD63gtV5/YylU2B41lVf6bEK/2vWhskED498sBkpErBzA==}
+    peerDependencies:
+      storybook: ^10.4.2
+      vue: ^3.0.0
+
+  '@stylistic/eslint-plugin@5.10.0':
+    resolution: {integrity: sha512-nPK52ZHvot8Ju/0A4ucSX1dcPV2/1clx0kLcH5wDmrE4naKso7TUC/voUyU1O9OTKTrR6MYip6LP0ogEMQ9jPQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^9.0.0 || ^10.0.0
+
   '@szmarczak/http-timer@4.0.6':
     resolution: {integrity: sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w==}
     engines: {node: '>=10'}
 
+  '@tailwindcss/node@4.3.0':
+    resolution: {integrity: sha512-aFb4gUhFOgdh9AXo4IzBEOzBkkAxm9VigwDJnMIYv3lcfXCJVesNfbEaBl4BNgVRyid92AmdviqwBUBRKSeY3g==}
+
+  '@tailwindcss/oxide-android-arm64@4.3.0':
+    resolution: {integrity: sha512-TJPiq67tKlLuObP6RkwvVGDoxCMBVtDgKkLfa/uyj7/FyxvQwHS+UOnVrXXgbEsfUaMgiVvC4KbJnRr26ho4Ng==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.3.0':
+    resolution: {integrity: sha512-oMN/WZRb+SO37BmUElEgeEWuU8E/HXRkiODxJxLe1UTHVXLrdVSgfaJV7pSlhRGMSOiXLuxTIjfsF3wYvz8cgQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.3.0':
+    resolution: {integrity: sha512-N6CUmu4a6bKVADfw77p+iw6Yd9Q3OBhe0veaDX+QazfuVYlQsHfDgxBrsjQ/IW+zywL8mTrNd0SdJT/zgtvMdA==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.3.0':
+    resolution: {integrity: sha512-zDL5hBkQdH5C6MpqbK3gQAgP80tsMwSI26vjOzjJtNCMUo0lFgOItzHKBIupOZNQxt3ouPH7RPhvNhiTfCe5CQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.0':
+    resolution: {integrity: sha512-R06HdNi7A7OEoMsf6d4tjZ71RCWnZQPHj2mnotSFURjNLdBC+cIgXQ7l81CqeoiQftjf6OOblxXMInMgN2VzMA==}
+    engines: {node: '>= 20'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.3.0':
+    resolution: {integrity: sha512-qTJHELX8jetjhRQHCLilkVLmybpzNQAtaI/gaoVoidn/ufbNDbAo8KlK2J+yPoc8wQxvDxCmh/5lr8nC1+lTbg==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.3.0':
+    resolution: {integrity: sha512-Z6sukiQsngnWO+l39X4pPbiWT81IC+PLKF+PHxIlyZbGNb9MODfYlXEVlFvej5BOZInWX01kVyzeLvHsXhfczQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.3.0':
+    resolution: {integrity: sha512-DRNdQRpSGzRGfARVuVkxvM8Q12nh19l4BF/G7zGA1oe+9wcC6saFBHTISrpIcKzhiXtSrlSrluCfvMuledoCTQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.3.0':
+    resolution: {integrity: sha512-Z0IADbDo8bh6I7h2IQMx601AdXBLfFpEdUotft86evd/8ZPflZe9COPO8Q1vw+pfLWIUo9zN/JGZvwuAJqduqg==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.3.0':
+    resolution: {integrity: sha512-HNZGOUxEmElksYR7S6sC5jTeNGpobAsy9u7Gu0AskJ8/20FR9GqebUyB+HBcU/ax6BHuiuJi+Oda4B+YX6H1yA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.3.0':
+    resolution: {integrity: sha512-Pe+RPVTi1T+qymuuRpcdvwSVZjnll/f7n8gBxMMh3xLTctMDKqpdfGimbMyioqtLhUYZxdJ9wGNhV7MKHvgZsQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.3.0':
+    resolution: {integrity: sha512-Mvrf2kXW/yeW/OTezZlCGOirXRcUuLIBx/5Y12BaPM7wJoryG6dfS/NJL8aBPqtTEx/Vm4T4vKzFUcKDT+TKUA==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.3.0':
+    resolution: {integrity: sha512-F7HZGBeN9I0/AuuJS5PwcD8xayx5ri5GhjYUDBEVYUkexyA/giwbDNjRVrxSezE3T250OU2K/wp/ltWx3UOefg==}
+    engines: {node: '>= 20'}
+
+  '@tailwindcss/vite@4.3.0':
+    resolution: {integrity: sha512-t6J3OrB5Fc0ExuhohouH0fWUGMYL6PTLhW+E7zIk/pdbnJARZDCwjBznFnkh5ynRnIRSI4YjtTH0t6USjJISrw==}
+    peerDependencies:
+      vite: ^5.2.0 || ^6 || ^7 || ^8
+
+  '@testing-library/dom@10.4.1':
+    resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==}
+    engines: {node: '>=18'}
+
+  '@testing-library/jest-dom@6.9.1':
+    resolution: {integrity: sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==}
+    engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
+
+  '@testing-library/user-event@14.6.1':
+    resolution: {integrity: sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==}
+    engines: {node: '>=12', npm: '>=6'}
+    peerDependencies:
+      '@testing-library/dom': '>=7.21.4'
+
   '@thi.ng/api@7.2.0':
     resolution: {integrity: sha512-4NcwHXxwPF/JgJG/jSFd9rjfQNguF0QrHvd6e+CEf4T0sFChqetW6ZmJ6/a2X+noDVntgulegA+Bx0HHzw+Tyw==}
 
@@ -1621,17 +3467,23 @@ packages:
   '@thi.ng/zipper@1.0.3':
     resolution: {integrity: sha512-dWfuk5nzf5wGEmcF90AXNEuWr3NVwRF+cf/9ZSE6xImA7Vy5XpHNMwLHFszZaC+kqiDXr+EZ0lXWDF46a8lSPA==}
 
+  '@ts-morph/common@0.29.0':
+    resolution: {integrity: sha512-35oUmphHbJvQ/+UTwFNme/t2p3FoKiGJ5auTjjpNTop2dyREspirjMy82PLSC1pnDJ8ah1GU98hwpVt64YXQsg==}
+
   '@tybys/wasm-util@0.10.1':
     resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
 
+  '@types/aria-query@5.0.4':
+    resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
+
   '@types/bunyan@1.8.11':
     resolution: {integrity: sha512-758fRH7umIMk5qt5ELmRMff4mLDlN+xyYzC+dkPTdKwbSkJFvz6xwyScrytPU0QIBbRRwbiE8/BIg8bpajerNQ==}
 
   '@types/cacheable-request@6.0.3':
     resolution: {integrity: sha512-IQ3EbTzGxIigb1I3qPZc1rWJnH0BmSKv5QYTalEwweFvyBDLSAe24zP0le/hyi7ecGfZVlIVAg4BZqb8WBwKqw==}
 
-  '@types/chai@5.2.3':
-    resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
+  '@types/chai@5.2.2':
+    resolution: {integrity: sha512-8kB30R7Hwqf40JPiKhVzodJs2Qc1ZJ5zuT3uzw5Hq/dhNCl3G3l83jfpdI1e20BP348+fV7VIL/+FxaXkqBmWg==}
 
   '@types/debug@4.1.12':
     resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
@@ -1642,20 +3494,32 @@ packages:
   '@types/emscripten@1.39.10':
     resolution: {integrity: sha512-TB/6hBkYQJxsZHSqyeuO1Jt0AB/bW6G7rHt9g7lML7SOF6lbgcHvw/Lr+69iqN0qxgXLhWKScAon73JNnptuDw==}
 
+  '@types/esrecurse@4.3.1':
+    resolution: {integrity: sha512-xJBAbDifo5hpffDBuHl0Y8ywswbiAp/Wi7Y/GtAgSlZyIABppyurxVueOPE8LUQOxdlgi6Zqce7uoEpqNTeiUw==}
+
   '@types/estree@1.0.9':
     resolution: {integrity: sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==}
 
+  '@types/hast@3.0.4':
+    resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
+
   '@types/http-cache-semantics@4.0.4':
     resolution: {integrity: sha512-1m0bIFVc7eJWyve9S0RnuRgcQqF/Xd5QsUZAZeQFr1Q3/p9JWoQQEqmVy+DPTNpGXwhgIetAoYF8JSc33q29QA==}
 
+  '@types/jsesc@2.5.1':
+    resolution: {integrity: sha512-9VN+6yxLOPLOav+7PwjZbxiID2bVaeq0ED4qSQmdQTdjnXJSaCVKTR58t15oqH1H5t8Ng2ZX1SabJVoN9Q34bw==}
+
+  '@types/json-schema@7.0.15':
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
+
   '@types/keyv@3.1.4':
     resolution: {integrity: sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==}
 
   '@types/mdast@4.0.4':
     resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
 
-  '@types/minimist@1.2.5':
-    resolution: {integrity: sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag==}
+  '@types/mdx@2.0.13':
+    resolution: {integrity: sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==}
 
   '@types/moo@0.5.10':
     resolution: {integrity: sha512-W6KzyZjXUYpwQfLK1O1UDzqcqYlul+lO7Bt71luyIIyNlOZwJaNeWWdqFs1C/f2hohZvUFHMk6oFNe9Rg48DbA==}
@@ -1663,15 +3527,18 @@ packages:
   '@types/ms@2.1.0':
     resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
 
-  '@types/node@24.10.13':
-    resolution: {integrity: sha512-oH72nZRfDv9lADUBSo104Aq7gPHpQZc4BTx38r9xf9pg5LfP6EzSyH2n7qFmmxRQXh7YlUXODcYsg6PuTDSxGg==}
-
-  '@types/normalize-package-data@2.4.4':
-    resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
+  '@types/node@25.9.2':
+    resolution: {integrity: sha512-G05zqtJhcDLb8uslf5EjCxXg9G1KQxiV8OS0R26IC//Eoyitzqe8z37I7cqvnZlrlSfgocQRfSn/AHBZJJFyGw==}
 
   '@types/parse-path@7.0.3':
     resolution: {integrity: sha512-LriObC2+KYZD3FzCrgWGv/qufdUy4eXrxcLgQMfYXgPbLIecKIsVBaQgUPmxSSLcjmYbDTQbMgr6qr6l/eb7Bg==}
 
+  '@types/react@19.2.14':
+    resolution: {integrity: sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==}
+
+  '@types/resolve@1.20.2':
+    resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
+
   '@types/responselike@1.0.3':
     resolution: {integrity: sha512-H/+L+UkTV33uf49PH5pCAUBVPNj2nDBXTN+qS1dOwyyg24l3CcicicCA7ca+HMvJBZcFgl5r8e+RR6elsb4Lyw==}
 
@@ -1684,96 +3551,417 @@ packages:
   '@types/unist@3.0.3':
     resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
 
-  '@types/yauzl@2.10.3':
-    resolution: {integrity: sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==}
-
-  '@vitest/coverage-v8@4.0.18':
-    resolution: {integrity: sha512-7i+N2i0+ME+2JFZhfuz7Tg/FqKtilHjGyGvoHYQ6iLV0zahbsJ9sljC9OcFcPDbhYKCet+sG8SsVqlyGvPflZg==}
+  '@typescript-eslint/eslint-plugin@8.60.1':
+    resolution: {integrity: sha512-JQ4S5GB0tfjO8BuJ4fcX+HodkzJjYBV+7OJ+wLygaX7OGQ7FudyHL4NSCA6ob+w3Yn+5MkKIozOwQhXeM7opVg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      '@vitest/browser': 4.0.18
-      vitest: 4.0.18
+      '@typescript-eslint/parser': ^8.60.1
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.1.0'
+
+  '@typescript-eslint/parser@8.60.1':
+    resolution: {integrity: sha512-A0M6ua6H252bVjPvvtSgl2QA4+ET9S5Mtkb2GDyTxIhH/C4qDItT7RQNO5PhMC6NXGYXOR9dIalcDDgBKT7oFA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.1.0'
+
+  '@typescript-eslint/project-service@8.60.1':
+    resolution: {integrity: sha512-eXkTH2bxmXlqD1RnOPmLZ9ZM9D3VwSx04JOwBnP9RQ+yUA5a2Mu7SfW8uaV2Aon53NJzZlZYuX7tn91Izf+xaw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.1.0'
+
+  '@typescript-eslint/scope-manager@8.60.1':
+    resolution: {integrity: sha512-gvI5OQoptnxQnchOirukCuQ55svJSTuD/4k5+pC267xyBtYry748R9/c3tYUzb/iE6RZfllRz2lVulLCHkTm4w==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/tsconfig-utils@8.60.1':
+    resolution: {integrity: sha512-nh8w4qAteiKuZu3pSSzG/yGKpw0OlkrKnzFmbVRenKaD4qc+7i1GrmZaLVkr8rk4uipiPGMOW4YsM6WmKZ5CvA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.1.0'
+
+  '@typescript-eslint/type-utils@8.60.1':
+    resolution: {integrity: sha512-sdwTrpjosW7ANQYJ39ZBF1ZyEMEGVB2UsikrserVM/30a/F1dTLnu9bGxEdosugyu5caigjLrR2qiD11asjI1A==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.1.0'
+
+  '@typescript-eslint/types@8.60.1':
+    resolution: {integrity: sha512-4h0tY8ppCkdCzcrl2YM5M3my0xsE1Tf8om3owEu5oPWmXwkKRmk0j0LGDzYBGUcAlesEbxBhazqu/K4cu3Ug7w==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/typescript-estree@8.60.1':
+    resolution: {integrity: sha512-alpRkfG8hlVE5kdJW2GkfgDgXxold3e8e4l6EnmhRmRLbekgAPCCGDVD++sABy9FcgPFroq+uFcCSM1vR57Cew==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.1.0'
+
+  '@typescript-eslint/utils@8.60.1':
+    resolution: {integrity: sha512-h2MPBLoNtjc3qZWfY3Tl51yPorQ2McHn8pJfcMNTcIvrrZrr90Ykffit0yjrPFWQcRcUxzH20+6OcVdW4yHtUg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.1.0'
+
+  '@typescript-eslint/visitor-keys@8.60.1':
+    resolution: {integrity: sha512-EbGRQg4FhrmwLodl+t3JNAnXHWVr9Vp+Zl1QBZVPY4ByfkzIT8cX3K6QWODHtkIZqqJVEWvhHSx3v5PDHsaQag==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@ungap/structured-clone@1.3.0':
+    resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
+    deprecated: Potential CWE-502 - Update to 1.3.1 or higher
+
+  '@unhead/vue@2.1.15':
+    resolution: {integrity: sha512-SSByXfEjhzPn8gXdEdgpYqpLMPSkLUH2HVE0GxZfOtNsJ0GgOHQs0g9T67ZZ1z0kTELLKdtOtYrzrbv9+ffF7g==}
+    peerDependencies:
+      vue: '>=3.5.18'
+
+  '@unrs/resolver-binding-android-arm-eabi@1.12.2':
+    resolution: {integrity: sha512-g5T90pqg1bo/7mytQx6F4iBNC0Wsh9cu+z9veDbFjc7HjpesJFWD7QMS0NGStXM075+7dJPPVvBbpZlnrdpi/w==}
+    cpu: [arm]
+    os: [android]
+
+  '@unrs/resolver-binding-android-arm64@1.12.2':
+    resolution: {integrity: sha512-YGCRZv/9GLhwmz6mYDeTsm/92BAyR28l6c2ReweVW5pWgfsitWLY8upvfRlGdoyD8HjeTHSYJWyZGD4KJA/nFQ==}
+    cpu: [arm64]
+    os: [android]
+
+  '@unrs/resolver-binding-darwin-arm64@1.12.2':
+    resolution: {integrity: sha512-u9DiNT1auQMO20A9SyTuG3wUgQWB9Z7KjAg0uFuCDR1FsAY8A0CG2S6JpHS1xwm/w1G08bjXZDcyOCjv1WAm2w==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@unrs/resolver-binding-darwin-x64@1.12.2':
+    resolution: {integrity: sha512-f7rPLi/T1HVKZu/u6t87lroib16n8vrSzcyxI7lg4BGO9UF26KhQL44sd9eOUgrTYhvRXtWOIZT5PejdPyJfUA==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@unrs/resolver-binding-freebsd-x64@1.12.2':
+    resolution: {integrity: sha512-BpcOjWCJub6nRZUS2zA20pmLvjtqAtGejETaIyRLiZiQf++cbrjltLA5NN/xaXfqeOBOSlMFbemIl5/S5tljmg==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@unrs/resolver-binding-linux-arm-gnueabihf@1.12.2':
+    resolution: {integrity: sha512-vZTDvdSISZjJx66OzJqtsOhzifbqRjbmI1Mnu49fQDwog5GtDI4QidRiEAYbZCRj9C8YZEW+3ZjqsyS9GR4k2A==}
+    cpu: [arm]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-arm-musleabihf@1.12.2':
+    resolution: {integrity: sha512-BiPI+IrIlwcW4nLLMM21+B1dFPzd55yAVgVGrdgDjNef+ch03GdxrcyaIz8X9SsQirh/kCQ7mviyWlMxdh2D7g==}
+    cpu: [arm]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-arm64-gnu@1.12.2':
+    resolution: {integrity: sha512-zJc0H99FEPoFfSrNpa91HYfxzfAJCr502oxNK1cfdC9hlaFI43RT+JFCann9JUgZmLzzntChHyn13Sgn9ljHNg==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@unrs/resolver-binding-linux-arm64-musl@1.12.2':
+    resolution: {integrity: sha512-KQ3Lki6l+Pz1k/eBipN41ES+YUK30beLGb9YqcB1O542cyLCNE6GaxrfcY3T6EezmGGk84wb5XyO9loTM9tkcA==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@unrs/resolver-binding-linux-loong64-gnu@1.12.2':
+    resolution: {integrity: sha512-3SJGEh1DborhG6pyxvhPzCT4bbSIVihsvgJc13P1bHG7KLdNDaF9T3gsTwFc7Jw/5Y5/iWOjkEx7Zy0NvCGX3Q==}
+    cpu: [loong64]
+    os: [linux]
+    libc: [glibc]
+
+  '@unrs/resolver-binding-linux-loong64-musl@1.12.2':
+    resolution: {integrity: sha512-jiuG/Obbel7uw1PwHNFfrkiKhLAF6mnyZ6aWlOAVN9WqKm8v0OFGnciJIHu8+CMvXLQ8AD51LPzAoUfT21D5Ew==}
+    cpu: [loong64]
+    os: [linux]
+    libc: [musl]
+
+  '@unrs/resolver-binding-linux-ppc64-gnu@1.12.2':
+    resolution: {integrity: sha512-q7xRvVpmcfeL+LlZg8Pbbo6QaTZwDU5BaGZbwfhkEsXJn3Was8xYfE0RBH266xZt0rM6B7i8xAYIvjthuUIWHg==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@unrs/resolver-binding-linux-riscv64-gnu@1.12.2':
+    resolution: {integrity: sha512-0CVdx6lcnT3Q9inOH8tsMIOJ6ImndllMjqJHg8RLVdB7Vq4SfkEXl9mCSsVNuNA4MCYycRicCUxPCabVHJRr6A==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@unrs/resolver-binding-linux-riscv64-musl@1.12.2':
+    resolution: {integrity: sha512-iOwlRo9vnp6R6ohHQS11n0NnfdXx/omhkocmIfaPRpQhKZ+3BDMkkdRVh53qjkFkpPddf+FETA28NwGN7l5l+w==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@unrs/resolver-binding-linux-s390x-gnu@1.12.2':
+    resolution: {integrity: sha512-HYJtLfXq94q8iZNFT1lknx258wlkkWhZeUXJRqzKBBUJ00CvZ+N33zgbCqimLjsyw5Va6uUxhVa12mI+kaveEw==}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@unrs/resolver-binding-linux-x64-gnu@1.12.2':
+    resolution: {integrity: sha512-mPsUhunKKDih5O96Y6enDQyHc1SqBPlY1E/SfMWDM3EdJ95Z9CArPeCVwCCqbP45ljvivdEk8Fxn+SIb1rDAJQ==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@unrs/resolver-binding-linux-x64-musl@1.12.2':
+    resolution: {integrity: sha512-azrt6+5ydLd8Vt210AAFis/lZevSfPw93EJRIJG+xPu4WCJ8K0kppCTpMyLPcKT7H15M4Jnt2tMp5bOvCkRC6A==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@unrs/resolver-binding-openharmony-arm64@1.12.2':
+    resolution: {integrity: sha512-YZ9hP4O0X9PQb8eO980qmLNGH4zT3I9+SZTdt0Pr0YyuGQhYKoOZkV02VzrzyOZJ5xIJ3UFIenKkUkGg8GjgWQ==}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@unrs/resolver-binding-wasm32-wasi@1.12.2':
+    resolution: {integrity: sha512-tYFDIkMxSflfEc/h92ZWNsZlHSwgimbNHSO3PL2JWQHfCuC2q316jMyYU9TIWZsFK2bQwyK5VAdYgn8ygPj69A==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
+  '@unrs/resolver-binding-win32-arm64-msvc@1.12.2':
+    resolution: {integrity: sha512-qzNyg3xL0VPQmCaUh+N5jSitce6k+uCBfMDesWRnlULOZaqUkaJ0ybdT+UqlAWJoQjuqfIU/0Ptx9bteN4D82g==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@unrs/resolver-binding-win32-ia32-msvc@1.12.2':
+    resolution: {integrity: sha512-WD9sY00OfpHVGfsnHZoA8jVT+esS/Bg8z8jzxp5BnDCjjwsuKsPQrzswwpFy4J1AUJbXPRfkpcX0mXrzeXW79g==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@unrs/resolver-binding-win32-x64-msvc@1.12.2':
+    resolution: {integrity: sha512-nAB74NfSNKknqQ1RrYj6uz8FcXEomu/MATJZxh/x+BArzN2U3JbOYC0APYzUIGhVY3m5hRxA8VPNdPBoG8txlA==}
+    cpu: [x64]
+    os: [win32]
+
+  '@vercel/nft@1.5.0':
+    resolution: {integrity: sha512-IWTDeIoWhQ7ZtRO/JRKH+jhmeQvZYhtGPmzw/QGDY+wDCQqfm25P9yIdoAFagu4fWsK4IwZXDFIjrmp5rRm/sA==}
+    engines: {node: '>=20'}
+    hasBin: true
+
+  '@vitejs/plugin-vue-jsx@5.1.5':
+    resolution: {integrity: sha512-jIAsvHOEtWpslLOI2MeElGFxH7M8pM83BU/Tor4RLyiwH0FM4nUW3xdvbw20EeU9wc5IspQwMq225K3CMnJEpA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    peerDependencies:
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+      vue: ^3.0.0
+
+  '@vitejs/plugin-vue@6.0.7':
+    resolution: {integrity: sha512-km+p+XdSz9Sxm5rqUbqcSfZYaAniKxWBj1KURl+Jr7UaPvvX7BmaWMdP69I5rrFDeQGyxAG7NXdc57vz+snhWg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    peerDependencies:
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+      vue: ^3.2.25
+
+  '@vitest/browser-playwright@4.1.8':
+    resolution: {integrity: sha512-SR7FqgegaexEg73xvf3ArtygXegagMdXnL0EZMpxrWvvhQxvicD/E8p0ib0J91riPRtQUViyh67Xjw3NqvyhVg==}
+    peerDependencies:
+      playwright: '*'
+      vitest: 4.1.8
+
+  '@vitest/browser@4.1.8':
+    resolution: {integrity: sha512-u21VzX07HzlJYpFgkxmjEXar/tG2UqWGgyGG/46SrrPc7rSdCTPw5vuowopO9CIqF8UCUQzDFdbVnNpw6N0BfQ==}
+    peerDependencies:
+      vitest: 4.1.8
+
+  '@vitest/coverage-v8@4.1.8':
+    resolution: {integrity: sha512-lt3kovsyHwYe00wq4D1ti0Z974fWj4NLp6siqiyEufUpyFwK9Yhi7rBhac9JL5aA0zoMrJqc4vYPZRUnI7l7nw==}
+    peerDependencies:
+      '@vitest/browser': 4.1.8
+      vitest: 4.1.8
     peerDependenciesMeta:
       '@vitest/browser':
         optional: true
 
-  '@vitest/expect@4.1.0':
-    resolution: {integrity: sha512-EIxG7k4wlWweuCLG9Y5InKFwpMEOyrMb6ZJ1ihYu02LVj/bzUwn2VMU+13PinsjRW75XnITeFrQBMH5+dLvCDA==}
+  '@vitest/eslint-plugin@1.6.19':
+    resolution: {integrity: sha512-zodmXRsVKFsuHxHJILuTFaaKsrsxm0YsiOX65clk+LpCW9JrVXaf6ERXr0caDs+NEk0S62Jyk0K7XYQ7gWXheA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@typescript-eslint/eslint-plugin': '*'
+      eslint: '>=8.57.0'
+      typescript: '>=5.0.0'
+      vitest: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/eslint-plugin':
+        optional: true
+      typescript:
+        optional: true
+      vitest:
+        optional: true
 
-  '@vitest/mocker@4.1.0':
-    resolution: {integrity: sha512-evxREh+Hork43+Y4IOhTo+h5lGmVRyjqI739Rz4RlUPqwrkFFDF6EMvOOYjTx4E8Tl6gyCLRL8Mu7Ry12a13Tw==}
+  '@vitest/expect@3.2.4':
+    resolution: {integrity: sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==}
+
+  '@vitest/expect@4.1.8':
+    resolution: {integrity: sha512-h3nDO677RDLEGlBxyQ5CW8RlMThSKSRLUePLOx09gNIWRL40edgA1GCZSZgf1W55MFAG6/Sw14KeaAnqv0NKdQ==}
+
+  '@vitest/mocker@4.1.8':
+    resolution: {integrity: sha512-LEiN/xe4OSIbKe9HQIp5OC24agGD9J5CnmMgsLohVVoOPWL9a2sBoR6VBx43jQZb7Kr1l4RCuyCJzcAa0+dojw==}
     peerDependencies:
       msw: ^2.4.9
-      vite: ^6.0.0 || ^7.0.0 || ^8.0.0-0
+      vite: ^6.0.0 || ^7.0.0 || ^8.0.0
     peerDependenciesMeta:
       msw:
         optional: true
       vite:
         optional: true
 
-  '@vitest/pretty-format@4.0.18':
-    resolution: {integrity: sha512-P24GK3GulZWC5tz87ux0m8OADrQIUVDPIjjj65vBXYG17ZeU3qD7r+MNZ1RNv4l8CGU2vtTRqixrOi9fYk/yKw==}
+  '@vitest/pretty-format@3.2.4':
+    resolution: {integrity: sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==}
 
-  '@vitest/pretty-format@4.1.0':
-    resolution: {integrity: sha512-3RZLZlh88Ib0J7NQTRATfc/3ZPOnSUn2uDBUoGNn5T36+bALixmzphN26OUD3LRXWkJu4H0s5vvUeqBiw+kS0A==}
+  '@vitest/pretty-format@4.1.8':
+    resolution: {integrity: sha512-9GasEBxpZ1VYIpqHf/0+YGg121uSNwCKOJqIrTwWP/TB7DmFCiaBpNl3aPZzoLWfWkuqhbH8vJIVobZkvdo2cA==}
 
-  '@vitest/runner@4.1.0':
-    resolution: {integrity: sha512-Duvx2OzQ7d6OjchL+trw+aSrb9idh7pnNfxrklo14p3zmNL4qPCDeIJAK+eBKYjkIwG96Bc6vYuxhqDXQOWpoQ==}
+  '@vitest/runner@4.1.8':
+    resolution: {integrity: sha512-EmVxeBAfMJvycdjd6Hm+RbFBbA9fKvo0Kx37hNpBYoYeavH3RNsBXWDooR1mgD52dCrxIIuP7UotpfiwOikvcg==}
 
-  '@vitest/snapshot@4.1.0':
-    resolution: {integrity: sha512-0Vy9euT1kgsnj1CHttwi9i9o+4rRLEaPRSOJ5gyv579GJkNpgJK+B4HSv/rAWixx2wdAFci1X4CEPjiu2bXIMg==}
+  '@vitest/snapshot@4.1.8':
+    resolution: {integrity: sha512-acfZboRmAIf05DEKcBQy33VXojFJjtUdLyo7oOmV9kebb2xdU01UknNiPuPZoJZQyO7DF0gZdTGTpeAzET9QPQ==}
 
-  '@vitest/spy@4.1.0':
-    resolution: {integrity: sha512-pz77k+PgNpyMDv2FV6qmk5ZVau6c3R8HC8v342T2xlFxQKTrSeYw9waIJG8KgV9fFwAtTu4ceRzMivPTH6wSxw==}
+  '@vitest/spy@3.2.4':
+    resolution: {integrity: sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==}
 
-  '@vitest/ui@4.0.18':
-    resolution: {integrity: sha512-CGJ25bc8fRi8Lod/3GHSvXRKi7nBo3kxh0ApW4yCjmrWmRmlT53B5E08XRSZRliygG0aVNxLrBEqPYdz/KcCtQ==}
+  '@vitest/spy@4.1.8':
+    resolution: {integrity: sha512-6EevtBp6OZOPF7bmz36HrGMeP3txgVSrgebWxHOafDXGkhIzfXK14f8KF6MuFfgXXUeHxmpD3BQxkV00/3s5mA==}
+
+  '@vitest/ui@4.1.8':
+    resolution: {integrity: sha512-RUS2ZU2TsduVrI+9c12uTNaKrNUTsm6yFt3fueEUB9iKvyC2UP83F+sqIz00HQIah4UOL1TMoDAki8K0NjGvsA==}
     peerDependencies:
-      vitest: 4.0.18
+      vitest: 4.1.8
 
-  '@vitest/utils@4.0.18':
-    resolution: {integrity: sha512-msMRKLMVLWygpK3u2Hybgi4MNjcYJvwTb0Ru09+fOyCXIgT5raYP041DRRdiJiI3k/2U6SEbAETB3YtBrUkCFA==}
+  '@vitest/utils@3.2.4':
+    resolution: {integrity: sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==}
 
-  '@vitest/utils@4.1.0':
-    resolution: {integrity: sha512-XfPXT6a8TZY3dcGY8EdwsBulFCIw+BeeX0RZn2x/BtiY/75YGh8FeWGG8QISN/WhaqSrE2OrlDgtF8q5uhOTmw==}
+  '@vitest/utils@4.1.8':
+    resolution: {integrity: sha512-uOJamYALNhfJ6iolExyQM40yIQwDqYnkKtQ5VCiSe17E33H0aQ/u+1GlRuz4LZBk6Mm3sg90G9hEbmEt37C1Zg==}
 
-  '@vue/compiler-core@3.5.28':
-    resolution: {integrity: sha512-kviccYxTgoE8n6OCw96BNdYlBg2GOWfBuOW4Vqwrt7mSKWKwFVvI8egdTltqRgITGPsTFYtKYfxIG8ptX2PJHQ==}
+  '@volar/language-core@2.4.15':
+    resolution: {integrity: sha512-3VHw+QZU0ZG9IuQmzT68IyN4hZNd9GchGPhbD9+pa8CVv7rnoOZwo7T8weIbrRmihqy3ATpdfXFnqRrfPVK6CA==}
 
-  '@vue/compiler-dom@3.5.28':
-    resolution: {integrity: sha512-/1ZepxAb159jKR1btkefDP+J2xuWL5V3WtleRmxaT+K2Aqiek/Ab/+Ebrw2pPj0sdHO8ViAyyJWfhXXOP/+LQA==}
+  '@volar/language-core@2.4.28':
+    resolution: {integrity: sha512-w4qhIJ8ZSitgLAkVay6AbcnC7gP3glYM3fYwKV3srj8m494E3xtrCv6E+bWviiK/8hs6e6t1ij1s2Endql7vzQ==}
 
-  '@vue/compiler-sfc@3.5.28':
-    resolution: {integrity: sha512-6TnKMiNkd6u6VeVDhZn/07KhEZuBSn43Wd2No5zaP5s3xm8IqFTHBj84HJah4UepSUJTro5SoqqlOY22FKY96g==}
+  '@volar/source-map@2.4.15':
+    resolution: {integrity: sha512-CPbMWlUN6hVZJYGcU/GSoHu4EnCHiLaXI9n8c9la6RaI9W5JHX+NqG+GSQcB0JdC2FIBLdZJwGsfKyBB71VlTg==}
 
-  '@vue/compiler-ssr@3.5.28':
-    resolution: {integrity: sha512-JCq//9w1qmC6UGLWJX7RXzrGpKkroubey/ZFqTpvEIDJEKGgntuDMqkuWiZvzTzTA5h2qZvFBFHY7fAAa9475g==}
+  '@volar/source-map@2.4.28':
+    resolution: {integrity: sha512-yX2BDBqJkRXfKw8my8VarTyjv48QwxdJtvRgUpNE5erCsgEUdI2DsLbpa+rOQVAJYshY99szEcRDmyHbF10ggQ==}
 
-  '@vue/reactivity@3.5.28':
-    resolution: {integrity: sha512-gr5hEsxvn+RNyu9/9o1WtdYdwDjg5FgjUSBEkZWqgTKlo/fvwZ2+8W6AfKsc9YN2k/+iHYdS9vZYAhpi10kNaw==}
+  '@volar/typescript@2.4.15':
+    resolution: {integrity: sha512-2aZ8i0cqPGjXb4BhkMsPYDkkuc2ZQ6yOpqwAuNwUoncELqoy5fRgOQtLR9gB0g902iS0NAkvpIzs27geVyVdPg==}
 
-  '@vue/runtime-core@3.5.28':
-    resolution: {integrity: sha512-POVHTdbgnrBBIpnbYU4y7pOMNlPn2QVxVzkvEA2pEgvzbelQq4ZOUxbp2oiyo+BOtiYlm8Q44wShHJoBvDPAjQ==}
+  '@volar/typescript@2.4.28':
+    resolution: {integrity: sha512-Ja6yvWrbis2QtN4ClAKreeUZPVYMARDYZl9LMEv1iQ1QdepB6wn0jTRxA9MftYmYa4DQ4k/DaSZpFPUfxl8giw==}
 
-  '@vue/runtime-dom@3.5.28':
-    resolution: {integrity: sha512-4SXxSF8SXYMuhAIkT+eBRqOkWEfPu6nhccrzrkioA6l0boiq7sp18HCOov9qWJA5HML61kW8p/cB4MmBiG9dSA==}
-
-  '@vue/server-renderer@3.5.28':
-    resolution: {integrity: sha512-pf+5ECKGj8fX95bNincbzJ6yp6nyzuLDhYZCeFxUNp8EBrQpPpQaLX3nNCp49+UbgbPun3CeVE+5CXVV1Xydfg==}
+  '@vue-macros/common@3.1.2':
+    resolution: {integrity: sha512-h9t4ArDdniO9ekYHAD95t9AZcAbb19lEGK+26iAjUODOIJKmObDNBSe4+6ELQAA3vtYiFPPBtHh7+cQCKi3Dng==}
+    engines: {node: '>=20.19.0'}
     peerDependencies:
-      vue: 3.5.28
+      vue: ^2.7.0 || ^3.2.25
+    peerDependenciesMeta:
+      vue:
+        optional: true
 
-  '@vue/shared@3.5.28':
-    resolution: {integrity: sha512-cfWa1fCGBxrvaHRhvV3Is0MgmrbSCxYTXCSCau2I0a1Xw1N1pHAvkWCiXPRAqjvToILvguNyEwjevUqAuBQWvQ==}
+  '@vue/babel-helper-vue-transform-on@2.0.1':
+    resolution: {integrity: sha512-uZ66EaFbnnZSYqYEyplWvn46GhZ1KuYSThdT68p+am7MgBNbQ3hphTL9L+xSIsWkdktwhPYLwPgVWqo96jDdRA==}
 
-  '@vue/test-utils@2.4.6':
-    resolution: {integrity: sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==}
+  '@vue/babel-plugin-jsx@2.0.1':
+    resolution: {integrity: sha512-a8CaLQjD/s4PVdhrLD/zT574ZNPnZBOY+IhdtKWRB4HRZ0I2tXBi5ne7d9eCfaYwp5gU5+4KIyFTV1W1YL9xZA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
 
-  '@yarnpkg/core@4.5.0':
-    resolution: {integrity: sha512-jZnEYfP05k3KpBIWlNkPEuJ3E0QLnYTNALQOH+7x8LAQyzhnN9yuLZx8Ze80Y7mlU1Hnv5wUGtzzUFn1wyBAlQ==}
+  '@vue/babel-plugin-resolve-type@2.0.1':
+    resolution: {integrity: sha512-ybwgIuRGRRBhOU37GImDoWQoz+TlSqap65qVI6iwg/J7FfLTLmMf97TS7xQH9I7Qtr/gp161kYVdhr1ZMraSYQ==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@vue/compiler-core@3.5.35':
+    resolution: {integrity: sha512-BUmHaR1J+O+CKZ9uJucdVTEr1LHsdyvv7vG3eNRhK3CczEHeMd/LtsHAuD7PbrxvI2envCY2v7HI1vC1aBRzKw==}
+
+  '@vue/compiler-dom@3.5.35':
+    resolution: {integrity: sha512-k+bprkXxuqhVajgTx5mUHuir7TwQzUKOWR40ng1ncAqQRPnrLngGGgqVEEhOnTMlc8btHYVKmrP8s5Qyg0hvYA==}
+
+  '@vue/compiler-sfc@3.5.35':
+    resolution: {integrity: sha512-G5VPMcXTSywXBgtFOZOnHKBxKSrwXUcvY1iaF5/hRcy7t0J6CH/d8ha9F4nzi00Fax1eLV0QHM7v4mQu68jydw==}
+
+  '@vue/compiler-ssr@3.5.35':
+    resolution: {integrity: sha512-rGhAeXgdM7/ffTJGXT69rCCdTmjDewnFuUZfBQQHTdcEBeWdT5HCGY60y2ytLJr9/Dsu7IntUi5z/w0h6Rjnzw==}
+
+  '@vue/compiler-vue2@2.7.16':
+    resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}
+
+  '@vue/devtools-api@8.1.2':
+    resolution: {integrity: sha512-vA0O112YqyDuNA1s7Yb2gCgToQ/OxOWiFDO5ThLCcDy0ldHnSd1dUTaSYhOldbqoNgumE4dxtGAoAaSUKUD1Zg==}
+
+  '@vue/devtools-core@8.1.1':
+    resolution: {integrity: sha512-bCCsSABp1/ot4j8xJEycM6Mtt2wbuucfByr6hMgjbYhrtlscOJypZKvy8f1FyWLYrLTchB5Qz216Lm92wfbq0A==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@vue/devtools-kit@8.1.2':
+    resolution: {integrity: sha512-f75/upc+GCyjXErpgPGz4582ujS0L/adAltGy+tqXMGUJpgAcfGr6CxnnhpZY8BHuMYt6KpbF8uaFrrQG66rGQ==}
+
+  '@vue/devtools-shared@8.1.2':
+    resolution: {integrity: sha512-X9RyVFYAdkBe4IUf5v48TxBF/6QPmF8CmWrDAjXzfUHrgQ/HGfTC1A6TqgXqZ03ye66l3AD51BAGD69IvKM9sw==}
+
+  '@vue/language-core@2.2.12':
+    resolution: {integrity: sha512-IsGljWbKGU1MZpBPN+BvPAdr55YPkj2nB/TBNGNC32Vy2qLG25DYu/NBN2vNtZqdRbTRjaoYrahLrToim2NanA==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@vue/language-core@3.2.6':
+    resolution: {integrity: sha512-xYYYX3/aVup576tP/23sEUpgiEnujrENaoNRbaozC1/MA9I6EGFQRJb4xrt/MmUCAGlxTKL2RmT8JLTPqagCkg==}
+
+  '@vue/language-core@3.3.4':
+    resolution: {integrity: sha512-IuHqQ5zGGOE7CXP72VX6A42IVeIzYv4WAhO6arej11TRNqtdZfGyH8Yr2FOCaDX0dSQG+JwULLoFHGY1igYVjQ==}
+
+  '@vue/reactivity@3.5.35':
+    resolution: {integrity: sha512-tVc+SsHConvh/Lz64qq1pP3rYArBmK42xonovEcxY74SQtvctZodG/zhq54P5dr38cVuw25d27cPNRdlMidpGQ==}
+
+  '@vue/runtime-core@3.5.35':
+    resolution: {integrity: sha512-A/xFNX9loIcWDygeQuNCfKuh0CoYBzxhqEMNah5TSFg9Z53DrFYEN2qi5CU9necjM1OWYegYREUTHmXTmhfXtg==}
+
+  '@vue/runtime-dom@3.5.35':
+    resolution: {integrity: sha512-odrJ1C391dbGnyDRh8U+rnP7J2amIEzfmRk5vXy7xi3aZhEXofTvpi0T4HJb6jlNqQZTNPR5MPHSB3RHNkIORA==}
+
+  '@vue/server-renderer@3.5.35':
+    resolution: {integrity: sha512-NkebSOYdB97wi8OQcO3HqzZSlymJi/aWsN/7h74OSVhRTm6qGs3Jp3e0rCXynmWwSlKeRrnlIug+ilYoHBmQDA==}
+    peerDependencies:
+      vue: 3.5.35
+
+  '@vue/shared@3.5.35':
+    resolution: {integrity: sha512-zSbjL7gRXwks2ZQLRGCajBtBXEOXW9Ddhn/HvSdrGkE2dqGnumzW8XtusRrxrE9LvqtiqDXQ+A60Hp6mvdYxfA==}
+
+  '@vue/test-utils@2.4.11':
+    resolution: {integrity: sha512-GDqaqZsA6m2E5vNzej0aYiIb6BX8xV9pNSbbbXKOfEYwg7ZNblVX8suyqmUBThq8VIrgAJNxn+z72hVtUeiWHA==}
+    peerDependencies:
+      '@vue/compiler-dom': 3.x
+      '@vue/server-renderer': 3.x
+      vue: 3.x
+    peerDependenciesMeta:
+      '@vue/server-renderer':
+        optional: true
+
+  '@webcontainer/env@1.1.1':
+    resolution: {integrity: sha512-6aN99yL695Hi9SuIk1oC88l9o0gmxL1nGWWQ/kNy81HigJ0FoaoTXpytCj6ItzgyCEwA9kF1wixsTuv5cjsgng==}
+
+  '@yarnpkg/core@4.8.0':
+    resolution: {integrity: sha512-knO69Rqtr5GkGwGOKKhX1gLv7i2SDujoe4TBODUUzY/NLRuNBHPtFoANGYrMsGSSbsnmLLbGEJGQQ6c/CJXF2w==}
     engines: {node: '>=18.12.0'}
 
-  '@yarnpkg/fslib@3.1.4':
-    resolution: {integrity: sha512-Yyguw5RM+xI1Bv0RFbs1ZF5HwU+9/He4YT7yeT722yAlLfkz9IzZHO6a5yStEshxiliPn9Fdj4H54a785xpK/g==}
+  '@yarnpkg/fslib@3.1.5':
+    resolution: {integrity: sha512-hXaPIWl5GZA+rXcx+yaKWUuePJruZuD+3A5A2X6paEBfFsyCD7oEp88lSMj1ym1ehBWUmhNH/YGOp+SrbmSBPg==}
     engines: {node: '>=18.12.0'}
 
   '@yarnpkg/libzip@3.2.2':
@@ -1795,17 +3983,34 @@ packages:
     resolution: {integrity: sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
+  abbrev@3.0.1:
+    resolution: {integrity: sha512-AO2ac6pjRB3SJmGJo+v5/aK6Omggp6fsLrs6wN9bd35ulu4cCwaAU9+7ZhXjeqHVkaHThLuzH0nZr0YpCDhygg==}
+    engines: {node: ^18.17.0 || >=20.5.0}
+
   abbrev@4.0.0:
     resolution: {integrity: sha512-a1wflyaL0tHtJSmLSOVybYhy22vRih4eduhhrkcjgrWGnRfrZtovJ2FRjxuTtkkj47O/baf0R86QU5OuYpz8fA==}
     engines: {node: ^20.17.0 || >=22.9.0}
 
+  abort-controller@3.0.0:
+    resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==}
+    engines: {node: '>=6.5'}
+
+  accepts@2.0.0:
+    resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
+    engines: {node: '>= 0.6'}
+
   acorn-import-attributes@1.9.5:
     resolution: {integrity: sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==}
     peerDependencies:
       acorn: ^8
 
-  acorn@8.15.0:
-    resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
+  acorn-jsx@5.3.2:
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  acorn@7.4.1:
+    resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==}
     engines: {node: '>=0.4.0'}
     hasBin: true
 
@@ -1814,12 +4019,12 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
-  adm-zip@0.5.16:
-    resolution: {integrity: sha512-TGw5yVi4saajsSEgz25grObGHEUaDrniwvA2qwSC060KfqGPdglhvPMA2lPIoxs3PQIItj2iag35fONcQqgUaQ==}
+  adm-zip@0.5.17:
+    resolution: {integrity: sha512-+Ut8d9LLqwEvHHJl1+PIHqoyDxFgVN847JTVM3Izi3xHDWPE4UtzzXysMZQs64DMcrJfBeS/uoEP4AD3HQHnQQ==}
     engines: {node: '>=12.0'}
 
-  ae-cvss-calculator@1.0.9:
-    resolution: {integrity: sha512-CTeSR6Cm/cOJQLRNIw3wvRnNUMp9du+qKwH6IAf/DHwgGFsVeoCiuvtH6BWl5gaYVn1RTMBdQmT2D5Ul31Mh5Q==}
+  ae-cvss-calculator@1.0.12:
+    resolution: {integrity: sha512-YVO+dhb8sZubNeL9pqSlN5hyZGC8hkAwnThnd3EimUGZtJEMeuy4kMb7zMCAsBiMr/RxklH0oY7DCsFV/B7peg==}
 
   agent-base@7.1.3:
     resolution: {integrity: sha512-jRR5wdylq8CkOe6hei19GGZnxM6rBGwFl3Bg0YItGDimvjGtAvdZk4Pu6Cl4u4Igsws4a1fd1Vq3ezrhn4KmFw==}
@@ -1829,6 +4034,26 @@ packages:
     resolution: {integrity: sha512-kja8j7PjmncONqaTsB8fQ+wE2mSU2DJ9D4XKoJ5PFWIdRMa6SLSN1ff4mOr4jCbfRSsxR4keIiySJU0N9T5hIQ==}
     engines: {node: '>= 8.0.0'}
 
+  ajv-formats@3.0.1:
+    resolution: {integrity: sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==}
+    peerDependencies:
+      ajv: ^8.0.0
+    peerDependenciesMeta:
+      ajv:
+        optional: true
+
+  ajv@6.14.0:
+    resolution: {integrity: sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==}
+
+  ajv@8.20.0:
+    resolution: {integrity: sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==}
+
+  alien-signals@1.0.13:
+    resolution: {integrity: sha512-OGj9yyTnJEttvzhTUWuscOvtqxq5vrhF7vL9oS0xJ2mK0ItPYP1/y+vCFebfxoEyAz0++1AIwJ5CMr+Fk3nDmg==}
+
+  alien-signals@3.2.1:
+    resolution: {integrity: sha512-I8FjmltrfnDFoZedi5CG8DghVYNhzb/Ijluz7tCSJH0xpd0484Kowhbb1XDYOxfJpU1p5wnM2X54dA+IfGyD1g==}
+
   ansi-regex@5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
@@ -1841,23 +4066,48 @@ packages:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
 
+  ansi-styles@5.2.0:
+    resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
+    engines: {node: '>=10'}
+
   ansi-styles@6.2.1:
     resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
     engines: {node: '>=12'}
 
-  ansis@4.2.0:
-    resolution: {integrity: sha512-HqZ5rWlFjGiV0tDm3UxxgNRqsOTniqoKZu0pIAfh7TZQMGuZK+hH0drySty0si0QXj1ieop4+SkSfPZBPPkHig==}
+  ansis@4.3.1:
+    resolution: {integrity: sha512-BJ8/l4R5LRE7hW9WdSuGYrLSHi2ynxeFpDFbH0K/CgNeY/tyhk+vO6TYxXC5r5CpUhNVX310xzPsN/H9lCdfOA==}
     engines: {node: '>=14'}
 
+  anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+
+  archiver-utils@5.0.2:
+    resolution: {integrity: sha512-wuLJMmIBQYCsGZgYLTy5FIB2pF6Lfb6cXMSF8Qywwk3t20zWnAi7zLcQFdKQmIB8wyZpY5ER38x08GbwtR2cLA==}
+    engines: {node: '>= 14'}
+
+  archiver@7.0.1:
+    resolution: {integrity: sha512-ZcbTaIqJOfCc03QwD468Unz/5Ir8ATtvAHsK+FdXbDIbGfihqh9mrvdcYunQzqn4HrvWWaFyaxJhGZagaJJpPQ==}
+    engines: {node: '>= 14'}
+
   argparse@1.0.10:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
 
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
-  arrify@1.0.1:
-    resolution: {integrity: sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==}
-    engines: {node: '>=0.10.0'}
+  aria-query@5.3.0:
+    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
+
+  aria-query@5.3.2:
+    resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
+    engines: {node: '>= 0.4'}
+
+  asap@2.0.6:
+    resolution: {integrity: sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==}
+
+  assert-never@1.4.0:
+    resolution: {integrity: sha512-5oJg84os6NMQNl27T9LnZkvvqzvAnHu03ShCnoj6bsJwS7L8AO4lf+C/XjK/nvzEqQB744moC6V128RucQd1jA==}
 
   assertion-error@2.0.1:
     resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
@@ -1867,26 +4117,60 @@ packages:
     resolution: {integrity: sha512-m1Q/RaVOnTp9JxPX+F+Zn7IcLYMzM8kZofDImfsKZd8MbR+ikdOzTeztStWqfrqIxZnYWryyI9ePm3NGjnZgGw==}
     engines: {node: '>=20.19.0'}
 
-  ast-v8-to-istanbul@0.3.11:
-    resolution: {integrity: sha512-Qya9fkoofMjCBNVdWINMjB5KZvkYfaO9/anwkWnjxibpWUxo5iHl2sOdP7/uAqaRuUYuoo8rDwnbaaKVFxoUvw==}
+  ast-kit@3.0.0-beta.1:
+    resolution: {integrity: sha512-trmleAnZ2PxN/loHWVhhx1qeOHSRXq4TDsBBxq3GqeJitfk3+jTQ+v/C1km/KYq9M7wKqCewMh+/NAvVH7m+bw==}
+    engines: {node: '>=20.19.0'}
+
+  ast-types@0.16.1:
+    resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==}
+    engines: {node: '>=4'}
+
+  ast-v8-to-istanbul@1.0.0:
+    resolution: {integrity: sha512-1fSfIwuDICFA4LKkCzRPO7F0hzFf0B7+Xqrl27ynQaa+Rh0e1Es0v6kWHPott3lU10AyAr7oKHa65OppjLn3Rg==}
+
+  ast-walker-scope@0.9.0:
+    resolution: {integrity: sha512-IJdzo2vLiElBxKzwS36VsCue/62d6IdWjnPB2v3nuPKeWGynp6FF/CYoLa5i/3jXH/z97ZDdsXz6abpgM6w07A==}
+    engines: {node: '>=20.19.0'}
 
   async-mutex@0.5.0:
     resolution: {integrity: sha512-1A94B18jkJ3DYq284ohPxoXbfTA5HsQ7/Mf4DEhcyLx3Bz27Rh59iScbB6EPiP+B+joue6YCxcMXSbFC1tZKwA==}
 
-  auth-header@1.0.0:
-    resolution: {integrity: sha512-CPPazq09YVDUNNVWo4oSPTQmtwIzHusZhQmahCKvIsk0/xH6U3QsMAv3sM+7+Q0B1K2KJ/Q38OND317uXs4NHA==}
+  async-sema@3.1.1:
+    resolution: {integrity: sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==}
 
-  available-typed-arrays@1.0.7:
-    resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
-    engines: {node: '>= 0.4'}
+  async@3.2.6:
+    resolution: {integrity: sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==}
+
+  autoprefixer@10.5.0:
+    resolution: {integrity: sha512-FMhOoZV4+qR6aTUALKX2rEqGG+oyATvwBt9IIzVR5rMa2HRWPkxf+P+PAJLD1I/H5/II+HuZcBJYEFBpq39ong==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
 
   aws4@1.13.2:
     resolution: {integrity: sha512-lHe62zvbTB5eEABUVi/AwVh0ZKY9rMMDhmm+eeyuuUQbQ3+J+fONVQOZyj+DdrvD4BY33uYniyRJ4UJIaSKAfw==}
 
+  axe-core@4.12.0:
+    resolution: {integrity: sha512-FTavr/7Ba0IptwGOPxnQvdyW2tAsdLBMTBXz7rKH6xJ2skpyxpBxyHkDdBs4lf69yRqYpkqCdfhnwS8YULGOmg==}
+    engines: {node: '>=4'}
+
   azure-devops-node-api@15.1.2:
     resolution: {integrity: sha512-PfJTGK8oaBB3e0hilF5QE5BT0axpxssZlc0pRq3Rb0XsKr4qk1Cma+jBRRz0hE+zuUsu/7cz0WTCVo+kcVvOjw==}
     engines: {node: '>= 16.0.0'}
 
+  b4a@1.8.0:
+    resolution: {integrity: sha512-qRuSmNSkGQaHwNbM7J78Wwy+ghLEYF1zNrSeMxj4Kgw6y33O3mXcQ6Ie9fRvfU/YnxWkOchPXbaLb73TkIsfdg==}
+    peerDependencies:
+      react-native-b4a: '*'
+    peerDependenciesMeta:
+      react-native-b4a:
+        optional: true
+
+  babel-walk@3.0.0-canary-5:
+    resolution: {integrity: sha512-GAwkz0AihzY5bkwIY5QDR+LvsRQgB/B+1foMPvi0FZPMl5fjD7ICiznUiBdLYMH1QYe6vqu4gWYytZOccLouFw==}
+    engines: {node: '>= 10.0.0'}
+
   backslash@0.2.0:
     resolution: {integrity: sha512-Avs+8FUZ1HF/VFP4YWwHQZSGzRPm37ukU1JQYQWijuHhtXdOuAzcZ8PcAzfIw898a8PyBzdn+RtnKA6MzW0X2A==}
 
@@ -1896,11 +4180,61 @@ packages:
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
+  balanced-match@4.0.4:
+    resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
+    engines: {node: 18 || 20 || >=22}
+
+  bare-events@2.8.2:
+    resolution: {integrity: sha512-riJjyv1/mHLIPX4RwiK+oW9/4c3TEUeORHKefKAKnZ5kyslbN+HXowtbaVEqt4IMUB7OXlfixcs6gsFeo/jhiQ==}
+    peerDependencies:
+      bare-abort-controller: '*'
+    peerDependenciesMeta:
+      bare-abort-controller:
+        optional: true
+
+  bare-fs@4.5.6:
+    resolution: {integrity: sha512-1QovqDrR80Pmt5HPAsMsXTCFcDYr+NSUKW6nd6WO5v0JBmnItc/irNRzm2KOQ5oZ69P37y+AMujNyNtG+1Rggw==}
+    engines: {bare: '>=1.16.0'}
+    peerDependencies:
+      bare-buffer: '*'
+    peerDependenciesMeta:
+      bare-buffer:
+        optional: true
+
+  bare-os@3.8.0:
+    resolution: {integrity: sha512-Dc9/SlwfxkXIGYhvMQNUtKaXCaGkZYGcd1vuNUUADVqzu4/vQfvnMkYYOUnt2VwQ2AqKr/8qAVFRtwETljgeFg==}
+    engines: {bare: '>=1.14.0'}
+
+  bare-path@3.0.0:
+    resolution: {integrity: sha512-tyfW2cQcB5NN8Saijrhqn0Zh7AnFNsnczRcuWODH0eYAXBsJ5gVxAUuNr7tsHSC6IZ77cA0SitzT+s47kot8Mw==}
+
+  bare-stream@2.11.0:
+    resolution: {integrity: sha512-Y/+iQ49fL3rIn6w/AVxI/2+BRrpmzJvdWt5Jv8Za6Ngqc6V227c+pYjYYgLdpR3MwQ9ObVXD0ZrqoBztakM0rw==}
+    peerDependencies:
+      bare-abort-controller: '*'
+      bare-buffer: '*'
+      bare-events: '*'
+    peerDependenciesMeta:
+      bare-abort-controller:
+        optional: true
+      bare-buffer:
+        optional: true
+      bare-events:
+        optional: true
+
+  bare-url@2.4.0:
+    resolution: {integrity: sha512-NSTU5WN+fy/L0DDenfE8SXQna4voXuW0FHM7wH8i3/q9khUSchfPbPezO4zSFMnDGIf9YE+mt/RWhZgNRKRIXA==}
+
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
-  better-sqlite3@12.6.2:
-    resolution: {integrity: sha512-8VYKM3MjCa9WcaSAI3hzwhmyHVlH8tiGFwf0RlTsZPWJ1I5MkzjiudCo4KC4DxOaL/53A5B1sI/IbldNFDbsKA==}
+  baseline-browser-mapping@2.10.34:
+    resolution: {integrity: sha512-IMDedajPifLnHNY0X9n8hKxRTQ6/eTHwr5bDo04WnuqxyKw6LYtQywCuuqPZwhl3aBXMvQpJov42GLCwRRdQzw==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  better-sqlite3@12.8.0:
+    resolution: {integrity: sha512-RxD2Vd96sQDjQr20kdP+F+dK/1OUNiVOl200vKBZY8u0vTwysfolF6Hq+3ZK2+h8My9YvZhHsF+RSGZW2VYrPQ==}
     engines: {node: 20.x || 22.x || 23.x || 24.x || 25.x}
 
   bidi-js@1.0.3:
@@ -1915,9 +4249,16 @@ packages:
   birpc@2.9.0:
     resolution: {integrity: sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==}
 
+  birpc@4.0.0:
+    resolution: {integrity: sha512-LShSxJP0KTmd101b6DRyGBj57LZxSDYWKitQNW/mi8GRMvZb078Uf9+pveax1DrVL89vm7mWe+TovdI/UDOuPw==}
+
   bl@4.1.0:
     resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
 
+  body-parser@2.2.2:
+    resolution: {integrity: sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA==}
+    engines: {node: '>=18'}
+
   boolbase@1.0.0:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
 
@@ -1934,12 +4275,22 @@ packages:
   brace-expansion@2.0.1:
     resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
 
+  brace-expansion@5.0.5:
+    resolution: {integrity: sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==}
+    engines: {node: 18 || 20 || >=22}
+
   braces@3.0.3:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
 
-  buffer-crc32@0.2.13:
-    resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
+  browserslist@4.28.2:
+    resolution: {integrity: sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
+  buffer-crc32@1.0.0:
+    resolution: {integrity: sha512-Db1SbgBS/fg/392AblrMJk97KggmvYhr4pB5ZIMTWtaivCPMWLkmb7m21cJvpvgK+J3nsU2CmmixNBZx4vFj/w==}
+    engines: {node: '>=8.0.0'}
 
   buffer-equal-constant-time@1.0.1:
     resolution: {integrity: sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==}
@@ -1950,45 +4301,94 @@ packages:
   buffer@5.7.1:
     resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
 
+  buffer@6.0.3:
+    resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
+
+  builtin-modules@5.2.0:
+    resolution: {integrity: sha512-02yxLeyxF4dNl6SlY6/5HfRSrSdZ/sCPoxy2kZNP5dZZX8LSAD9aE2gtJIUgWrsQTiMPl3mxESyrobSwvRGisQ==}
+    engines: {node: '>=18.20'}
+
   builtins@5.1.0:
     resolution: {integrity: sha512-SW9lzGTLvWTP1AY8xeAMZimqDrIaSdLQUcVr9DMef51niJ022Ri87SwRRKYm4A6iHfkPaiVUu/Duw2Wc4J7kKg==}
 
+  bundle-name@4.1.0:
+    resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
+    engines: {node: '>=18'}
+
   bunyan@1.8.15:
     resolution: {integrity: sha512-0tECWShh6wUysgucJcBAoYegf3JJoZWibxdqhTm7OHPeT42qdjkZ29QCMcKwbgU1kiH+auSIasNRXMLWXafXig==}
     engines: {'0': node >=0.10.0}
     hasBin: true
 
+  byte-counter@0.1.0:
+    resolution: {integrity: sha512-jheRLVMeUKrDBjVw2O5+k4EvR4t9wtxHL+bo/LxfkxsVeuGMy3a5SEGgXdAFA4FSzTrU8rQXQIrsZ3oBq5a0pQ==}
+    engines: {node: '>=20'}
+
+  bytes@3.1.2:
+    resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
+    engines: {node: '>= 0.8'}
+
+  c12@3.3.4:
+    resolution: {integrity: sha512-cM0ApFQSBXuourJejzwv/AuPRvAxordTyParRVcHjjtXirtkzM0uK2L9TTn9s0cXZbG7E55jCivRQzoxYmRAlA==}
+    peerDependencies:
+      magicast: '*'
+    peerDependenciesMeta:
+      magicast:
+        optional: true
+
   cac@6.7.14:
     resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
     engines: {node: '>=8'}
 
-  cacache@20.0.3:
-    resolution: {integrity: sha512-3pUp4e8hv07k1QlijZu6Kn7c9+ZpWWk4j3F8N3xPuCExULobqJydKYOTj1FTq58srkJsXvO7LbGAH4C0ZU3WGw==}
+  cac@7.0.0:
+    resolution: {integrity: sha512-tixWYgm5ZoOD+3g6UTea91eow5z6AAHaho3g0V9CNSNb45gM8SmflpAc+GRd1InC4AqN/07Unrgp56Y94N9hJQ==}
+    engines: {node: '>=20.19.0'}
+
+  cacache@20.0.4:
+    resolution: {integrity: sha512-M3Lab8NPYlZU2exsL3bMVvMrMqgwCnMWfdZbK28bn3pK6APT/Te/I8hjRPNu1uwORY9a1eEQoifXbKPQMfMTOA==}
     engines: {node: ^20.17.0 || >=22.9.0}
 
   cacheable-lookup@5.0.4:
     resolution: {integrity: sha512-2/kNscPhpcxrOigMZzbiWF7dz8ilhb/nIHU3EyZiXWXpeq/au8qJ8VhdftMkty3n7Gj6HIGalQG8oiBNB3AJgA==}
     engines: {node: '>=10.6.0'}
 
+  cacheable-lookup@7.0.0:
+    resolution: {integrity: sha512-+qJyx4xiKra8mZrcwhjMRMUhD5NR1R8esPkzIYxX96JiecFoxAXFuz/GpR3+ev4PE1WamHip78wV0vcmPQtp8w==}
+    engines: {node: '>=14.16'}
+
+  cacheable-request@13.0.18:
+    resolution: {integrity: sha512-rFWadDRKJs3s2eYdXlGggnBZKG7MTblkFBB0YllFds+UYnfogDp2wcR6JN97FhRkHTvq59n2vhNoHNZn29dh/Q==}
+    engines: {node: '>=18'}
+
   cacheable-request@7.0.4:
     resolution: {integrity: sha512-v+p6ongsrp0yTGbJXjgxPow2+DL93DASP4kXCDKb8/bwRtt9OEF3whggkkDkGNzgcWy2XaF4a8nZglC7uElscg==}
     engines: {node: '>=8'}
 
-  call-bind@1.0.7:
-    resolution: {integrity: sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==}
+  call-bind-apply-helpers@1.0.2:
+    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
     engines: {node: '>= 0.4'}
 
-  camelcase-keys@6.2.2:
-    resolution: {integrity: sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==}
-    engines: {node: '>=8'}
+  call-bound@1.0.4:
+    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
+    engines: {node: '>= 0.4'}
 
   camelcase@5.3.1:
     resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
     engines: {node: '>=6'}
 
+  caniuse-api@3.0.0:
+    resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
+
+  caniuse-lite@1.0.30001797:
+    resolution: {integrity: sha512-l8xKG+gwAIExZGl9FrF7KUwuOmk6wbEPC9Xoy/RtnWv1XG0Q4LFlagaLpUv3Kiza3W/wm27zy0yWJEieYKAP6w==}
+
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
 
+  chai@5.3.3:
+    resolution: {integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==}
+    engines: {node: '>=18'}
+
   chai@6.2.2:
     resolution: {integrity: sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==}
     engines: {node: '>=18'}
@@ -1997,33 +4397,52 @@ packages:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
 
+  change-case@5.4.4:
+    resolution: {integrity: sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==}
+
   changelog-filename-regex@2.0.1:
     resolution: {integrity: sha512-DZdyJpCprw8V3jp8V2x13nAA05Yy/IN+Prowj+0mrAHNENYkuMtNI4u5m449TTjPqShIslQSEuXee+Jtkn4m+g==}
 
+  character-entities-html4@2.1.0:
+    resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
+
+  character-entities-legacy@3.0.0:
+    resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
+
   character-entities@2.0.2:
     resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
 
-  chokidar@4.0.3:
-    resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
-    engines: {node: '>= 14.16.0'}
+  character-parser@2.2.0:
+    resolution: {integrity: sha512-+UqJQjFEFaTAs3bNsF2j2kEN1baG/zghZbdqoYEDxGZtJo9LBzl1A+m0D4n3qKx8N2FNv8/Xp6yV9mQmBuptaw==}
+
+  check-error@2.1.3:
+    resolution: {integrity: sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA==}
+    engines: {node: '>= 16'}
+
+  chokidar@5.0.0:
+    resolution: {integrity: sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==}
+    engines: {node: '>= 20.19.0'}
 
   chownr@1.1.4:
     resolution: {integrity: sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==}
 
-  chownr@2.0.0:
-    resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
-    engines: {node: '>=10'}
-
   chownr@3.0.0:
     resolution: {integrity: sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==}
     engines: {node: '>=18'}
 
-  ci-info@4.0.0:
-    resolution: {integrity: sha512-TdHqgGf9odd8SXNuxtUBVx8Nv+qZOejE6qyqiy5NtbYYQOeFa6zmHkxlPzmaLxWWHsU6nJmB7AETdVPi+2NBUg==}
+  chunk-data@0.1.0:
+    resolution: {integrity: sha512-zFyPtyC0SZ6Zu79b9sOYtXZcgrsXe0RpePrzRyj52hYVFG1+Rk6rBqjjOEk+GNQwc3PIX+86teQMok970pod1g==}
+    engines: {node: '>=20'}
+
+  ci-info@4.4.0:
+    resolution: {integrity: sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg==}
     engines: {node: '>=8'}
 
-  citty@0.2.1:
-    resolution: {integrity: sha512-kEV95lFBhQgtogAPlQfJJ0WGVSokvLr/UEoFPiKKOXF7pl98HfUVUD0ejsuTCld/9xH9vogSywZ5KqHzXrZpqg==}
+  citty@0.1.6:
+    resolution: {integrity: sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==}
+
+  citty@0.2.2:
+    resolution: {integrity: sha512-+6vJA3L98yv+IdfKGZHBNiGW5KHn22e/JwID0Strsz8h4S/csAu/OuICwxrg44k5MRiZHWIo8XXuJgQTriRP4w==}
 
   cjs-module-lexer@2.2.0:
     resolution: {integrity: sha512-4bHTS2YuzUvtoLjdy+98ykbNB5jS0+07EvFNXerqZQJ89F7DI6ET7OQo/HJuW6K0aVsKA9hj9/RVb2kQVOrPDQ==}
@@ -2036,6 +4455,10 @@ packages:
     peerDependencies:
       typanion: '*'
 
+  cliui@9.0.1:
+    resolution: {integrity: sha512-k7ndgKhwoQveBL+/1tqGJYNz097I7WOvwbmmU2AR5+magtbjPWQTS1C5vzGkBC8Ym8UWRzfKUzUUqFLypY4Q+w==}
+    engines: {node: '>=20'}
+
   clone-response@1.0.3:
     resolution: {integrity: sha512-ROoL94jJH2dUVML2Y/5PEDNaSHgeOdSDicUyS7izcF63G6sTc/FTjLub4b8Il9S8S0beOfYt0TaA5qvFK+w0wA==}
 
@@ -2043,6 +4466,9 @@ packages:
     resolution: {integrity: sha512-RMr0FhtfXemyinomL4hrWcYJxmX6deFdCxpJzhDttxgO1+bcCnkk+9drydLVDmAMG7NE6aN/fl4F7ucU/90gAA==}
     engines: {node: '>=0.10.0'}
 
+  code-block-writer@13.0.3:
+    resolution: {integrity: sha512-Oofo0pq3IKnsFtuHqSF7TqBfr71aeyZDVJ0HpmqB7FBM2qEigL0iPONSCZSO9pE9dZTAxANe5XHG9Uy0YMv8cg==}
+
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -2050,10 +4476,17 @@ packages:
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
+  comma-separated-tokens@2.0.3:
+    resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
+
   commander@10.0.1:
     resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
     engines: {node: '>=14'}
 
+  commander@11.1.0:
+    resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
+    engines: {node: '>=16'}
+
   commander@14.0.3:
     resolution: {integrity: sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==}
     engines: {node: '>=20'}
@@ -2061,41 +4494,115 @@ packages:
   commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
+  comment-parser@1.4.7:
+    resolution: {integrity: sha512-0h+uSNtQGW3D98eQt3jJ8L06Fves8hncB4V/PKdw/Qb8Hnk19VaKuTr55UNRYiSoVa7WwrFls+rh3ux9agmkeQ==}
+    engines: {node: '>= 12.0.0'}
+
+  commondir@1.0.1:
+    resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
+
+  compatx@0.2.0:
+    resolution: {integrity: sha512-6gLRNt4ygsi5NyMVhceOCFv14CIdDFN7fQjX1U4+47qVE/+kjPoXMK65KWK+dWxmFzMTuKazoQ9sch6pM0p5oA==}
+
+  compress-commons@6.0.2:
+    resolution: {integrity: sha512-6FqVXeETqWPoGcfzrXb37E50NP0LXT8kAMu5ooZayhWWdgEY4lBEEcbQNXtkuKQsGduxiIcI4gOTsxTmuq/bSg==}
+    engines: {node: '>= 14'}
+
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
+  confbox@0.1.8:
+    resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
+
+  confbox@0.2.4:
+    resolution: {integrity: sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==}
+
   config-chain@1.1.13:
     resolution: {integrity: sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==}
 
-  conventional-commits-detector@1.0.3:
-    resolution: {integrity: sha512-VlBCTEg34Bbvyh7MPYtmgoYPsP69Z1BusmthbiUbzTiwfhLZWRDEWsJHqWyiekSC9vFCHGT/jKOzs8r21MUZ5g==}
-    engines: {node: '>=6.9.0'}
-    hasBin: true
+  consola@3.4.2:
+    resolution: {integrity: sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==}
+    engines: {node: ^14.18.0 || >=16.10.0}
+
+  constantinople@4.0.1:
+    resolution: {integrity: sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==}
+
+  content-disposition@1.1.0:
+    resolution: {integrity: sha512-5jRCH9Z/+DRP7rkvY83B+yGIGX96OYdJmzngqnw2SBSxqCFPd0w2km3s5iawpGX8krnwSGmF0FW5Nhr0Hfai3g==}
+    engines: {node: '>=18'}
+
+  content-type@1.0.5:
+    resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
+    engines: {node: '>= 0.6'}
+
+  content-type@2.0.0:
+    resolution: {integrity: sha512-j/O/d7GcZCyNl7/hwZAb606rzqkyvaDctLmckbxLzHvFBzTJHuGEdodATcP3yIRoDrLHkIATJuvzbFlp/ki2cQ==}
+    engines: {node: '>=18'}
 
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
+  cookie-es@1.2.3:
+    resolution: {integrity: sha512-lXVyvUvrNXblMqzIRrxHb57UUVmqsSWlxqt3XIjCkUP0wDAf6uicO6KMbEgYrMNtEvWgWHwe42CKxPu9MYAnWw==}
+
+  cookie-es@2.0.1:
+    resolution: {integrity: sha512-aVf4A4hI2w70LnF7GG+7xDQUkliwiXWXFvTjkip4+b64ygDQ2sJPRSKFDHbxn8o0xu9QzPkMuuiWIXyFSE2slA==}
+
+  cookie-es@3.1.1:
+    resolution: {integrity: sha512-UaXxwISYJPTr9hwQxMFYZ7kNhSXboMXP+Z3TRX6f1/NyaGPfuNUZOWP1pUEb75B2HjfklIYLVRfWiFZJyC6Npg==}
+
+  cookie-signature@1.2.2:
+    resolution: {integrity: sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==}
+    engines: {node: '>=6.6.0'}
+
+  cookie@0.7.2:
+    resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
+    engines: {node: '>= 0.6'}
+
+  core-js-compat@3.49.0:
+    resolution: {integrity: sha512-VQXt1jr9cBz03b331DFDCCP90b3fanciLkgiOoy8SBHy06gNf+vQ1A3WFLqG7I8TipYIKeYK9wxd0tUrvHcOZA==}
+
   core-js-pure@3.37.0:
     resolution: {integrity: sha512-d3BrpyFr5eD4KcbRvQ3FTUx/KWmaDesr7+a3+1+P46IUnNoEt+oiLijPINZMEon7w9oGkIINWxrBAU9DEciwFQ==}
 
   core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
 
-  croner@9.1.0:
-    resolution: {integrity: sha512-p9nwwR4qyT5W996vBZhdvBCnMhicY5ytZkR4D1Xj0wuTDEiMnjwR57Q3RXYY/s0EpX6Ay3vgIcfaR+ewGHsi+g==}
+  cors@2.8.6:
+    resolution: {integrity: sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==}
+    engines: {node: '>= 0.10'}
+
+  crc-32@1.2.2:
+    resolution: {integrity: sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==}
+    engines: {node: '>=0.8'}
+    hasBin: true
+
+  crc32-stream@6.0.0:
+    resolution: {integrity: sha512-piICUB6ei4IlTv1+653yq5+KoqfBYmj9bw6LqXoOneTMDXk5nM1qt12mFW1caG3LlJXEKW1Bp0WggEmIfQB34g==}
+    engines: {node: '>= 14'}
+
+  croner@10.0.1:
+    resolution: {integrity: sha512-ixNtAJndqh173VQ4KodSdJEI6nuioBWI0V1ITNKhZZsO0pEMoDxz539T4FTTbSZ/xIOSuDnzxLVRqBVSvPNE2g==}
     engines: {node: '>=18.0'}
 
-  cronstrue@3.11.0:
-    resolution: {integrity: sha512-nXST7NEkjPF6loOTJtCwbLHB6cOVR5Ofuq/VZ4UGsZw/0HTvxy6mRCrDHOJ4xoLPcuS3ooruBLyUk3INaidKwg==}
+  cronstrue@3.14.0:
+    resolution: {integrity: sha512-XnW4vuK/jPJjmTyDWiej1Zq36Od7ITwxaV2O1pzHZuyMVvdy7NAvyvIBzybt+idqSpfqYuoDG7uf/ocGtJVWxA==}
     hasBin: true
 
   cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
+  crossws@0.3.5:
+    resolution: {integrity: sha512-ojKiDvcmByhwa8YYqbQI/hg7MEU0NC03+pSdEq4ZUnZR9xXpwk7E43SMNGkn+JxJGPFtNvQ48+vV2p+P1ml5PA==}
+
   css-select@5.1.0:
     resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==}
 
+  css-tree@2.2.1:
+    resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
+
   css-tree@3.2.1:
     resolution: {integrity: sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==}
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
@@ -2104,13 +4611,39 @@ packages:
     resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
     engines: {node: '>= 6'}
 
+  css.escape@1.5.1:
+    resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
+
+  cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  cssnano-preset-default@8.0.1:
+    resolution: {integrity: sha512-OTdKeYMlvQ8KBgyej5ysktnWJoeyo7rGrVnm+bdpIHGvxhbTGPsOkB+7T1EdTuX00dGlQQb2UEbSPB1OpMXULw==}
+    engines: {node: ^22.11.0 || ^24.11.0 || >=26.0}
+    peerDependencies:
+      postcss: ^8.5.14
+
+  cssnano-utils@6.0.0:
+    resolution: {integrity: sha512-ztS9W/+uaDn+bkYmDhs+GdMveHJ3CL8IPNHpRqDUQXv5GJOTQAJjV1XUOInr9esLXSabQV1pLRZlJpyUwEqDyQ==}
+    engines: {node: ^22.11.0 || ^24.11.0 || >=26.0}
+    peerDependencies:
+      postcss: ^8.5.14
+
+  cssnano@8.0.1:
+    resolution: {integrity: sha512-oSiOnPQNNYjusTUlYJiE6xvFQG4don3N0QavaoV1BxIsC1zjvxOwikXlR7lG1EVmZNDDaJkHbQx1VRB8kaoMHA==}
+    engines: {node: ^22.11.0 || ^24.11.0 || >=26.0}
+    peerDependencies:
+      postcss: ^8.5.14
+
+  csso@5.0.5:
+    resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
+
   csstype@3.2.3:
     resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
-  dargs@7.0.0:
-    resolution: {integrity: sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==}
-    engines: {node: '>=8'}
-
   data-uri-to-buffer@4.0.1:
     resolution: {integrity: sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==}
     engines: {node: '>= 12'}
@@ -2119,14 +4652,31 @@ packages:
     resolution: {integrity: sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA==}
     engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
 
-  debug@4.4.1:
-    resolution: {integrity: sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==}
-    engines: {node: '>=6.0'}
+  db0@0.3.4:
+    resolution: {integrity: sha512-RiXXi4WaNzPTHEOu8UPQKMooIbqOEyqA1t7Z6MsdxSCeb8iUC9ko3LcmsLmeUt2SM5bctfArZKkRQggKZz7JNw==}
     peerDependencies:
-      supports-color: '*'
+      '@electric-sql/pglite': '*'
+      '@libsql/client': '*'
+      better-sqlite3: '*'
+      drizzle-orm: '*'
+      mysql2: '*'
+      sqlite3: '*'
     peerDependenciesMeta:
-      supports-color:
+      '@electric-sql/pglite':
         optional: true
+      '@libsql/client':
+        optional: true
+      better-sqlite3:
+        optional: true
+      drizzle-orm:
+        optional: true
+      mysql2:
+        optional: true
+      sqlite3:
+        optional: true
+
+  de-indent@1.0.2:
+    resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
 
   debug@4.4.3:
     resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
@@ -2137,32 +4687,43 @@ packages:
       supports-color:
         optional: true
 
-  decamelize-keys@1.1.1:
-    resolution: {integrity: sha512-WiPxgEirIV0/eIOMcnFBA3/IJZAZqKnwAwWyvvdi4lsr1WCN22nhdf/3db3DoZcUjTV2SqfzIwNyp6y2xs3nmg==}
-    engines: {node: '>=0.10.0'}
-
-  decamelize@1.2.0:
-    resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
-    engines: {node: '>=0.10.0'}
-
   decimal.js@10.6.0:
     resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==}
 
   decode-named-character-reference@1.2.0:
     resolution: {integrity: sha512-c6fcElNV6ShtZXmsgNgFFV5tVX2PaV4g+MOAkb8eXHvn6sryJBrZa9r0zV6+dtTyoCKxtDy5tyQ5ZwQuidtd+Q==}
 
+  decompress-response@10.0.0:
+    resolution: {integrity: sha512-oj7KWToJuuxlPr7VV0vabvxEIiqNMo+q0NueIiL3XhtwC6FVOX7Hr1c0C4eD0bmf7Zr+S/dSf2xvkH3Ad6sU3Q==}
+    engines: {node: '>=20'}
+
   decompress-response@6.0.0:
     resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==}
     engines: {node: '>=10'}
 
+  deep-eql@5.0.2:
+    resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
+    engines: {node: '>=6'}
+
   deep-extend@0.6.0:
     resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==}
     engines: {node: '>=4.0.0'}
 
+  deep-is@0.1.4:
+    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
+
   deepmerge@4.3.1:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
     engines: {node: '>=0.10.0'}
 
+  default-browser-id@5.0.1:
+    resolution: {integrity: sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q==}
+    engines: {node: '>=18'}
+
+  default-browser@5.5.0:
+    resolution: {integrity: sha512-H9LMLr5zwIbSxrmvikGuI/5KGhZ8E2zH3stkMgM5LpOWDutGM2JZaj460Udnf1a+946zc7YBgrqEWwbk7zHvGw==}
+    engines: {node: '>=18'}
+
   defer-to-connect@2.0.1:
     resolution: {integrity: sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg==}
     engines: {node: '>=10'}
@@ -2171,12 +4732,24 @@ packages:
     resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
     engines: {node: '>= 0.4'}
 
+  define-lazy-prop@3.0.0:
+    resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
+    engines: {node: '>=12'}
+
   define-properties@1.2.1:
     resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
     engines: {node: '>= 0.4'}
 
-  defu@6.1.4:
-    resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
+  defu@6.1.7:
+    resolution: {integrity: sha512-7z22QmUWiQ/2d0KkdYmANbRUVABpZ9SNYyH5vx6PZ+nE5bcC0l7uFvEfHlyld/HcGBFTL536ClDt3DEcSlEJAQ==}
+
+  denque@2.1.0:
+    resolution: {integrity: sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw==}
+    engines: {node: '>=0.10'}
+
+  depd@2.0.0:
+    resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
+    engines: {node: '>= 0.8'}
 
   dequal@2.0.3:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
@@ -2185,6 +4758,9 @@ packages:
   des.js@1.1.0:
     resolution: {integrity: sha512-r17GxjhUCjSRy8aiJpr8/UadFIzMzJGexI3Nmz4ADi9LYSFx4gTBp80+NaX/YsXWWLhpZ7v/v/ubEc/bCNfKwg==}
 
+  destr@2.0.5:
+    resolution: {integrity: sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==}
+
   detect-indent@7.0.2:
     resolution: {integrity: sha512-y+8xyqdGLL+6sh0tVeHcfP/QDd8gUgbasolJJpY7NgeQGSZ739bDtSiaiDgtoicy+mtYB81dKLxO9xRhCyIB3A==}
     engines: {node: '>=12.20'}
@@ -2196,6 +4772,9 @@ packages:
   detect-node@2.1.0:
     resolution: {integrity: sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==}
 
+  devalue@5.8.1:
+    resolution: {integrity: sha512-4CXDYRBGqN+57wVJkuXBYmpAVUSg3L6JAQa/DFqm238G73E1wuyc/JhGQJzN7vUf/CMphYau2zXbfWzDR5aTEw==}
+
   devlop@1.1.0:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
 
@@ -2207,6 +4786,19 @@ packages:
     resolution: {integrity: sha512-qejHi7bcSD4hQAZE0tNAawRK1ZtafHDmMTMkrrIGgSLl7hTnQHmKCeB45xAcbfTqK2zowkM3j3bHt/4b/ARbYQ==}
     engines: {node: '>=0.3.1'}
 
+  diff@9.0.0:
+    resolution: {integrity: sha512-svtcdpS8CgJyqAjEQIXdb3OjhFVVYjzGAPO8WGCmRbrml64SPw/jJD4GoE98aR7r25A0XcgrK3F02yw9R/vhQw==}
+    engines: {node: '>=0.3.1'}
+
+  doctypes@1.1.0:
+    resolution: {integrity: sha512-LLBi6pEqS6Do3EKQ3J0NqHWV5hhb78Pi8vvESYwyOy2c31ZEZVdtitdzsQsKb7878PEERhzUk0ftqGhG6Mz+pQ==}
+
+  dom-accessibility-api@0.5.16:
+    resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
+
+  dom-accessibility-api@0.6.3:
+    resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}
+
   dom-serializer@2.0.0:
     resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
 
@@ -2220,23 +4812,38 @@ packages:
   domutils@3.1.0:
     resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==}
 
+  dot-prop@10.1.0:
+    resolution: {integrity: sha512-MVUtAugQMOff5RnBy2d9N31iG0lNwg1qAoAOn7pOK5wf94WIaE3My2p3uwTQuvS2AcqchkcR3bHByjaM0mmi7Q==}
+    engines: {node: '>=20'}
+
   dotenv@16.6.1:
     resolution: {integrity: sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==}
     engines: {node: '>=12'}
 
+  dotenv@17.3.1:
+    resolution: {integrity: sha512-IO8C/dzEb6O3F9/twg6ZLXz164a2fhTnEWb95H23Dm4OuN+92NmEAlTrupP9VW6Jm3sO26tQlqyvyi4CsnY9GA==}
+    engines: {node: '>=12'}
+
   dtrace-provider@0.8.8:
     resolution: {integrity: sha512-b7Z7cNtHPhH9EJhNNbbeqTcXB8LGFFZhq1PGgEvpeHlzd36bhbdTWoE/Ba/YguqpBSlAPKnARWhVlhunCMwfxg==}
     engines: {node: '>=0.10'}
 
-  dts-resolver@2.1.3:
-    resolution: {integrity: sha512-bihc7jPC90VrosXNzK0LTE2cuLP6jr0Ro8jk+kMugHReJVLIpHz/xadeq3MhuwyO4TD4OA3L1Q8pBBFRc08Tsw==}
-    engines: {node: '>=20.19.0'}
+  dts-resolver@3.0.0:
+    resolution: {integrity: sha512-1T1f+z+4tl9XD+m+0HBgWoL/nm0bOIffyWaUuUSBlFg/86IWvfx+wjNaO/ybU0AJzG9/Mi5hBUgGV6zCmWEN7Q==}
+    engines: {node: ^22.18.0 || >=24.0.0}
     peerDependencies:
       oxc-resolver: '>=11.0.0'
     peerDependenciesMeta:
       oxc-resolver:
         optional: true
 
+  dunder-proto@1.0.1:
+    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
+    engines: {node: '>= 0.4'}
+
+  duplexer@0.1.2:
+    resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
+
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
@@ -2248,11 +4855,17 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
 
-  editorconfig@3.0.1:
-    resolution: {integrity: sha512-k5NZM2XNIJfH/omUv0SRYaiLae4VRwg1ILW6xLOjuP4AQGAGcvzNij5imJ+m1rbzDIH0ov6EbH53BW96amFXpQ==}
+  editorconfig@3.0.2:
+    resolution: {integrity: sha512-T0ix8GhtxyKVfUFEcvdNDt3YGqlwkFHbD4/5bgFUDgFmxhI/cSRAeJ87/Sz//Cq8Eam6JX/e23RkoFO71P7aAA==}
     engines: {node: '>=20'}
     hasBin: true
 
+  ee-first@1.1.1:
+    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
+
+  electron-to-chromium@1.5.368:
+    resolution: {integrity: sha512-7RckJJK4uESJF9PxvfMWd3TGqIiieUTG4HxnKaKuIpGbcr+r2ZEB3g2gAhCP3Fqm42vJSzLfgab9eva/C4/XVw==}
+
   email-addresses@5.0.0:
     resolution: {integrity: sha512-4OIPYlA6JXqtVn8zpHpGiI7vE6EQOAg16aGnDMIAlZVinnoZ8208tW1hAbjWydgN/4PLTT9q+O1K6AH/vALJGw==}
 
@@ -2265,55 +4878,70 @@ packages:
   emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
 
-  emojibase-regex@16.0.0:
-    resolution: {integrity: sha512-ZMp31BkzBWNW+T73of6NURL6nXQa5GkfKneOkr3cEwBDVllbW/2nuva7NO0J3RjaQ07+SZQNgPTGZ4JlIhmM2Q==}
+  emojibase-regex@17.0.0:
+    resolution: {integrity: sha512-iWlqiz2l2zNf2lDqgN/7qjqKHVUX6H4D+8F5vDZkgjyWyRFXcA5K4rxkoTl7AJmyjHnoytw0m/do2SrGByui+g==}
 
-  emojibase@16.0.0:
-    resolution: {integrity: sha512-Nw2m7JLIO4Ou2X/yZPRNscHQXVbbr6SErjkJ7EooG7MbR3yDZszCv9KTizsXFc7yZl0n3WF+qUKIC/Lw6H9xaQ==}
+  emojibase@17.0.0:
+    resolution: {integrity: sha512-bXdpf4HPY3p41zK5swVKZdC/VynsMZ4LoLxdYDE+GucqkFwzcM1GVc4ODfYAlwoKaf2U2oNNUoOO78N96ovpBA==}
     engines: {node: '>=18.12.0'}
 
-  empathic@2.0.0:
-    resolution: {integrity: sha512-i6UzDscO/XfAcNYD75CfICkmfLedpyPDdozrLMmQc5ORaQcdMoc21OnlEylMIqI7U8eniKrPMxxtj8k0vhmJhA==}
+  empathic@2.0.1:
+    resolution: {integrity: sha512-YGRs8knHhKHVShLkFET/rWAU8kmHbOV5LwN938RHI0pljAJ1Gf6SzXsSmRaEzcXTtOOmVqJ5+WtQPL5uigY50Q==}
     engines: {node: '>=14'}
 
+  encodeurl@2.0.0:
+    resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
+    engines: {node: '>= 0.8'}
+
   encoding@0.1.13:
     resolution: {integrity: sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==}
 
   end-of-stream@1.4.4:
     resolution: {integrity: sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==}
 
+  enhanced-resolve@5.23.0:
+    resolution: {integrity: sha512-yJN/BOOLxcOW2aQgeif9mSnaUB8KtvmMMp56oA1kx1CRfBKbhZm2pJ+NBY+3eOboHxix8lfjWpHE0Ei5U8RbSA==}
+    engines: {node: '>=10.13.0'}
+
   entities@4.5.0:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
 
-  entities@6.0.1:
-    resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
-    engines: {node: '>=0.12'}
-
   entities@7.0.1:
     resolution: {integrity: sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==}
     engines: {node: '>=0.12'}
 
+  entities@8.0.0:
+    resolution: {integrity: sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==}
+    engines: {node: '>=20.19.0'}
+
   env-paths@2.2.1:
     resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
     engines: {node: '>=6'}
 
-  err-code@2.0.3:
-    resolution: {integrity: sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==}
-
   error-ex@1.3.2:
     resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
 
-  es-define-property@1.0.0:
-    resolution: {integrity: sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==}
+  error-stack-parser-es@1.0.5:
+    resolution: {integrity: sha512-5qucVt2XcuGMcEGgWI7i+yZpmpByQ8J1lHhcL7PwqCwu9FPP3VUXzT4ltHe5i2z9dePwEHcDVOAfSnHsOlCXRA==}
+
+  errx@0.1.0:
+    resolution: {integrity: sha512-fZmsRiDNv07K6s2KkKFTiD2aIvECa7++PKyD5NC32tpRw46qZA3sOz+aM+/V9V0GDHxVTKLziveV4JhzBHDp9Q==}
+
+  es-define-property@1.0.1:
+    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
     engines: {node: '>= 0.4'}
 
   es-errors@1.3.0:
     resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
     engines: {node: '>= 0.4'}
 
-  es-module-lexer@2.1.0:
-    resolution: {integrity: sha512-n27zTYMjYu1aj4MjCWzSP7G9r75utsaoc8m61weK+W8JMBGGQybd43GstCXZ3WNmSFtGT9wi59qQTW6mhTR5LQ==}
+  es-module-lexer@2.0.0:
+    resolution: {integrity: sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw==}
+
+  es-object-atoms@1.1.1:
+    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
+    engines: {node: '>= 0.4'}
 
   es-toolkit@1.39.10:
     resolution: {integrity: sha512-E0iGnTtbDhkeczB0T+mxmoVlT4YNweEKBLq7oaU4p11mecdsZpNWOglI4895Vh4usbQ+LsJiuLuI2L0Vdmfm2w==}
@@ -2321,11 +4949,23 @@ packages:
   es6-error@4.1.1:
     resolution: {integrity: sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==}
 
-  esbuild@0.25.12:
-    resolution: {integrity: sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==}
+  esbuild@0.27.4:
+    resolution: {integrity: sha512-Rq4vbHnYkK5fws5NF7MYTU68FPRE1ajX7heQ/8QXXWqNgqqJ/GkmmyxIzUnf2Sr/bakf8l54716CcMGHYhMrrQ==}
     engines: {node: '>=18'}
     hasBin: true
 
+  esbuild@0.28.0:
+    resolution: {integrity: sha512-sNR9MHpXSUV/XB4zmsFKN+QgVG82Cc7+/aaxJ8Adi8hyOac+EXptIp45QBPaVyX3N70664wRbTcLTOemCAnyqw==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
+
+  escape-html@1.0.3:
+    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
+
   escape-string-regexp@4.0.0:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
@@ -2334,23 +4974,168 @@ packages:
     resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
     engines: {node: '>=12'}
 
+  eslint-compat-utils@0.5.1:
+    resolution: {integrity: sha512-3z3vFexKIEnjHE3zCMRo6fn/e44U7T1khUjg+Hp0ZQMCigh28rALD0nPFBcGZuiLC5rLZa2ubQHDRln09JfU2Q==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      eslint: '>=6.0.0'
+
+  eslint-import-context@0.1.9:
+    resolution: {integrity: sha512-K9Hb+yRaGAGUbwjhFNHvSmmkZs9+zbuoe3kFQ4V1wYjrepUFYM2dZAfNtjbbj3qsPfUfsA68Bx/ICWQMi+C8Eg==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      unrs-resolver: ^1.0.0
+    peerDependenciesMeta:
+      unrs-resolver:
+        optional: true
+
+  eslint-plugin-es-x@7.8.0:
+    resolution: {integrity: sha512-7Ds8+wAAoV3T+LAKeu39Y5BzXCrGKrcISfgKEqTS4BDN8SFEDQd0S43jiQ8vIa3wUKD07qitZdfzlenSi8/0qQ==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '>=8'
+
+  eslint-plugin-import-x@4.16.2:
+    resolution: {integrity: sha512-rM9K8UBHcWKpzQzStn1YRN2T5NvdeIfSVoKu/lKF41znQXHAUcBbYXe5wd6GNjZjTrP7viQ49n1D83x/2gYgIw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      '@typescript-eslint/utils': ^8.56.0
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      eslint-import-resolver-node: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/utils':
+        optional: true
+      eslint-import-resolver-node:
+        optional: true
+
+  eslint-plugin-n@18.0.1:
+    resolution: {integrity: sha512-q3ARhk+eZRc7myR0KHx+R3/GJeOHF+Ir6PK95Pu2tEX8Sl/4BIpmmVLva2kPrjC2gCmn6WHlHm+3yeo6Rxhycw==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+    peerDependencies:
+      eslint: '>=8.57.1'
+      ts-declaration-location: ^1.0.6
+      typescript: '>=5.0.0'
+    peerDependenciesMeta:
+      ts-declaration-location:
+        optional: true
+      typescript:
+        optional: true
+
+  eslint-plugin-regexp@3.1.0:
+    resolution: {integrity: sha512-qGXIC3DIKZHcK1H9A9+Byz9gmndY6TTSRkSMTZpNXdyCw2ObSehRgccJv35n9AdUakEjQp5VFNLas6BMXizCZg==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+    peerDependencies:
+      eslint: '>=9.38.0'
+
+  eslint-plugin-unicorn@65.0.0:
+    resolution: {integrity: sha512-wE75x2QqMuPgZXcoc8LgTz7+gk5+SZK93Cxe6jkfouKp6+FwYwjMGrbYQTMRH8HK8X6jeTBhPPI2Cun923EMLQ==}
+    engines: {node: ^20.10.0 || >=21.0.0}
+    peerDependencies:
+      eslint: '>=9.38.0'
+
+  eslint-plugin-vue@10.9.2:
+    resolution: {integrity: sha512-4g7ZP3pYcuqd7Zp0pzUKcos0W+RkjBz4EGdhJ92FcYk6v03Ti/GK5NwjgsjxHK+98eXDbHeK7VtX1az7/8doZA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      '@stylistic/eslint-plugin': ^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0
+      '@typescript-eslint/parser': ^7.0.0 || ^8.0.0
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      vue-eslint-parser: ^10.3.0
+    peerDependenciesMeta:
+      '@stylistic/eslint-plugin':
+        optional: true
+      '@typescript-eslint/parser':
+        optional: true
+
+  eslint-scope@9.1.2:
+    resolution: {integrity: sha512-xS90H51cKw0jltxmvmHy2Iai1LIqrfbw57b79w/J7MfvDfkIkFZ+kj6zC3BjtUwh150HsSSdxXZcsuv72miDFQ==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
   eslint-visitor-keys@3.4.3:
     resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
+  eslint-visitor-keys@4.2.1:
+    resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  eslint-visitor-keys@5.0.1:
+    resolution: {integrity: sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  eslint@10.4.1:
+    resolution: {integrity: sha512-AyIKhnOBuOAdueD7RB3xB+YeAWScb9jHsJBgH2Hcde8InP5JYhqrRR6iTMHyTEwgENK54Cp44e4v8BwNhsuHuw==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+    hasBin: true
+    peerDependencies:
+      jiti: '*'
+    peerDependenciesMeta:
+      jiti:
+        optional: true
+
+  esm-resolve@1.0.11:
+    resolution: {integrity: sha512-LxF0wfUQm3ldUDHkkV2MIbvvY0TgzIpJ420jHSV1Dm+IlplBEWiJTKWM61GtxUfvjV6iD4OtTYFGAGM2uuIUWg==}
+
+  espree@10.4.0:
+    resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  espree@11.2.0:
+    resolution: {integrity: sha512-7p3DrVEIopW1B1avAGLuCSh1jubc01H2JHc8B4qqGblmg5gI9yumBgACjWo4JlIc04ufug4xJ3SQI8HkS/Rgzw==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
   esprima@4.0.1:
     resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
     engines: {node: '>=4'}
     hasBin: true
 
+  esquery@1.7.0:
+    resolution: {integrity: sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==}
+    engines: {node: '>=0.10'}
+
+  esrecurse@4.3.0:
+    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
+    engines: {node: '>=4.0'}
+
+  estraverse@5.3.0:
+    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
+    engines: {node: '>=4.0'}
+
   estree-walker@2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
 
   estree-walker@3.0.3:
     resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
 
-  eventemitter3@5.0.1:
-    resolution: {integrity: sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==}
+  esutils@2.0.3:
+    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
+    engines: {node: '>=0.10.0'}
+
+  etag@1.8.1:
+    resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
+    engines: {node: '>= 0.6'}
+
+  event-target-shim@5.0.1:
+    resolution: {integrity: sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==}
+    engines: {node: '>=6'}
+
+  eventemitter3@5.0.4:
+    resolution: {integrity: sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==}
+
+  events-universal@1.0.1:
+    resolution: {integrity: sha512-LUd5euvbMLpwOF8m6ivPCbhQeSiYVNb8Vs0fQ8QjXo0JTkEHpz8pxdQf0gStltaPpw0Cca8b39KxvK9cfKRiAw==}
+
+  events@3.3.0:
+    resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
+    engines: {node: '>=0.8.x'}
+
+  eventsource-parser@3.1.0:
+    resolution: {integrity: sha512-kJezFj9YFAMLeORyi7aCLxLbD5/qWMQnoMVlVPyHIll7lgRJCc3JVln9Vgl9nwQi0YkMnhdGTMNn7CkRRAptMg==}
+    engines: {node: '>=18.0.0'}
+
+  eventsource@3.0.7:
+    resolution: {integrity: sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==}
+    engines: {node: '>=18.0.0'}
 
   execa@8.0.1:
     resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
@@ -2367,31 +5152,64 @@ packages:
   exponential-backoff@3.1.1:
     resolution: {integrity: sha512-dX7e/LHVJ6W3DE1MHWi9S1EYzDESENfLrYohG2G++ovZrYOkm4Knwa0mc1cn84xJOR4KEU0WSchhLbd0UklbHw==}
 
+  express-rate-limit@8.5.2:
+    resolution: {integrity: sha512-5Kb34ipNX694DH48vN9irak1Qx30nb0PLYHXfJgw4YEjiC3ZEmZJhwOp+VfiCYwFzvFTdB9QkArYS5kXa2cx2A==}
+    engines: {node: '>= 16'}
+    peerDependencies:
+      express: '>= 4.11'
+
+  express@5.2.1:
+    resolution: {integrity: sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==}
+    engines: {node: '>= 18'}
+
+  exsolve@1.0.8:
+    resolution: {integrity: sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==}
+
   extend@3.0.2:
     resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
 
-  extract-zip@2.0.1:
-    resolution: {integrity: sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==}
-    engines: {node: '>= 10.17.0'}
-    hasBin: true
-
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
+  fast-fifo@1.3.2:
+    resolution: {integrity: sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==}
+
   fast-glob@3.3.3:
     resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
     engines: {node: '>=8.6.0'}
 
-  fast-xml-parser@5.3.4:
-    resolution: {integrity: sha512-EFd6afGmXlCx8H8WTZHhAoDaWaGyuIBoZJ2mknrNxug+aZKjkp0a0dlars9Izl+jF+7Gu1/5f/2h68cQpe0IiA==}
+  fast-json-stable-stringify@2.1.0:
+    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
+
+  fast-levenshtein@2.0.6:
+    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+
+  fast-npm-meta@1.4.2:
+    resolution: {integrity: sha512-XXyd9d3ie/JeIIjm6WeKalvapGGFI4ShAjPJM78vgUFYzoEsuNSjvvVTuht0XZcwbVdOnEEGzhxwguRbxkIcDg==}
+    hasBin: true
+
+  fast-string-truncated-width@3.0.3:
+    resolution: {integrity: sha512-0jjjIEL6+0jag3l2XWWizO64/aZVtpiGE3t0Zgqxv0DPuxiMjvB3M24fCyhZUO4KomJQPj3LTSUnDP3GpdwC0g==}
+
+  fast-string-width@3.0.2:
+    resolution: {integrity: sha512-gX8LrtNEI5hq8DVUfRQMbr5lpaS4nMIWV+7XEbXk2b8kiQIizgnlr12B4dA3ZEx3308ze0O4Q1R+cHts8kyUJg==}
+
+  fast-uri@3.1.2:
+    resolution: {integrity: sha512-rVjf7ArG3LTk+FS6Yw81V1DLuZl1bRbNrev6Tmd/9RaroeeRRJhAt7jg/6YFxbvAQXUCavSoZhPPj6oOx+5KjQ==}
+
+  fast-wrap-ansi@0.2.2:
+    resolution: {integrity: sha512-7F2Fl+TjRSenLqlU3UjSH0iyqopqoZIu7eZVpEirP2g1GtWa2G/ecEmBdgz31+Mxr+ELclgg6sokpSFIQiZ02Q==}
+
+  fast-xml-builder@1.2.0:
+    resolution: {integrity: sha512-00aAWieqff+ZJhsXA4g1g7M8k+7AYoMUUHF+/zFb5U6Uv/P0Vl4QZo84/IcufzYalLuEj9928bXN9PbbFzMF0Q==}
+
+  fast-xml-parser@5.7.3:
+    resolution: {integrity: sha512-C0AaNuC+mscy6vrAQKAc/rMq+zAPHodfHGZu4sGVehvAQt/JLG1O5zEcYcXSY5zSqr4YVgxsB+pHXTq0i7eDlg==}
     hasBin: true
 
   fastq@1.17.1:
     resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
 
-  fd-slicer@1.1.0:
-    resolution: {integrity: sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==}
-
   fdir@6.5.0:
     resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
     engines: {node: '>=12.0.0'}
@@ -2408,6 +5226,10 @@ packages:
   fflate@0.8.2:
     resolution: {integrity: sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==}
 
+  file-entry-cache@8.0.0:
+    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
+    engines: {node: '>=16.0.0'}
+
   file-uri-to-path@1.0.0:
     resolution: {integrity: sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==}
 
@@ -2415,28 +5237,58 @@ packages:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
 
+  finalhandler@2.1.1:
+    resolution: {integrity: sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==}
+    engines: {node: '>= 18.0.0'}
+
   find-packages@10.0.4:
     resolution: {integrity: sha512-JmO9lEBUEYOiRw/bdbdgFWpGFgBZBGLcK/5GjQKo3ZN+zR6jmQOh9gWyZoqxlQmnldZ9WBWhna0QYyuq6BxvRg==}
     engines: {node: '>=14.6'}
 
-  find-up@4.1.0:
-    resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
-    engines: {node: '>=8'}
+  find-up-simple@1.0.1:
+    resolution: {integrity: sha512-afd4O7zpqHeRyg4PfDQsXmlDe2PfdHtJt6Akt8jOWaApLOZk5JXs6VMR29lz03pRe9mpykrRCYIYxaJYcfpncQ==}
+    engines: {node: '>=18'}
+
+  find-up@5.0.0:
+    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
+    engines: {node: '>=10'}
 
   find-up@8.0.0:
     resolution: {integrity: sha512-JGG8pvDi2C+JxidYdIwQDyS/CgcrIdh18cvgxcBge3wSHRQOrooMD3GlFBcmMJAN9M42SAZjDp5zv1dglJjwww==}
     engines: {node: '>=20'}
 
-  flatted@3.3.3:
-    resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
+  flat-cache@4.0.1:
+    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
+    engines: {node: '>=16'}
 
-  for-each@0.3.3:
-    resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
+  flatted@3.4.2:
+    resolution: {integrity: sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==}
+
+  fontaine@0.8.0:
+    resolution: {integrity: sha512-eek1GbzOdWIj9FyQH/emqW1aEdfC3lYRCHepzwlFCm5T77fBSRSyNRKE6/antF1/B1M+SfJXVRQTY9GAr7lnDg==}
+    engines: {node: '>=18.12.0'}
+
+  fontkitten@1.0.3:
+    resolution: {integrity: sha512-Wp1zXWPVUPBmfoa3Cqc9ctaKuzKAV6uLstRqlR56kSjplf5uAce+qeyYym7F+PHbGTk+tCEdkCW6RD7DX/gBZw==}
+    engines: {node: '>=20'}
+
+  fontless@0.2.1:
+    resolution: {integrity: sha512-mUWZ8w91/mw2KEcZ6gHNoNNmsAq9Wiw2IypIux5lM03nhXm+WSloXGUNuRETNTLqZexMgpt7Aj/v63qqrsWraQ==}
+    engines: {node: '>=18.12.0'}
+    peerDependencies:
+      vite: '*'
+    peerDependenciesMeta:
+      vite:
+        optional: true
 
   foreground-child@3.3.1:
     resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
     engines: {node: '>=14'}
 
+  form-data-encoder@4.1.0:
+    resolution: {integrity: sha512-G6NsmEW15s0Uw9XnCg+33H3ViYRyiM0hMrMhhqQOR8NFc5GhYrI+6I3u7OTw7b91J2g8rtvMBZJDbcGb2YUniw==}
+    engines: {node: '>= 18'}
+
   formdata-polyfill@4.0.10:
     resolution: {integrity: sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==}
     engines: {node: '>=12.20.0'}
@@ -2444,6 +5296,17 @@ packages:
   forwarded-parse@2.1.2:
     resolution: {integrity: sha512-alTFZZQDKMporBH77856pXgzhEzaUVmLCDk+egLgIgHst3Tpndzz8MnKe+GzRJRfvVdn69HhpW7cmXzvtLvJAw==}
 
+  forwarded@0.2.0:
+    resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
+    engines: {node: '>= 0.6'}
+
+  fraction.js@5.3.4:
+    resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}
+
+  fresh@2.0.0:
+    resolution: {integrity: sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==}
+    engines: {node: '>= 0.8'}
+
   fs-constants@1.0.0:
     resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
 
@@ -2451,18 +5314,19 @@ packages:
     resolution: {integrity: sha512-Z4XaCL6dUDHfP/jT25jJKMmtxvuwbkrD1vNSMFlo9lNLY2c5FHYSQgHPRZUjAB26TpDEoW9HCOgplrdbaPV/ew==}
     engines: {node: '>=14.14'}
 
-  fs-extra@11.3.3:
-    resolution: {integrity: sha512-VWSRii4t0AFm6ixFFmLLx1t7wS1gh+ckoa84aOeapGum0h+EZd1EhEumSB+ZdDLnEPuucsVB9oB7cxJHap6Afg==}
+  fs-extra@11.3.5:
+    resolution: {integrity: sha512-eKpRKAovdpZtR1WopLHxlBWvAgPny3c4gX1G5Jhwmmw4XJj0ifSD5qB5TOo8hmA0wlRKDAOAhEE1yVPgs6Fgcg==}
     engines: {node: '>=14.14'}
 
-  fs-minipass@2.1.0:
-    resolution: {integrity: sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==}
-    engines: {node: '>= 8'}
-
   fs-minipass@3.0.3:
     resolution: {integrity: sha512-XUBA9XClHbnJWSfBzjkm6RvPsyg3sryZt06BEQoXcF7EK/xpGaQYJgQKDJSUH5SGZ76Y7pFx1QBnXz09rU5Fbw==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
+  fsevents@2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -2471,24 +5335,42 @@ packages:
   function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
-  gaxios@6.5.0:
-    resolution: {integrity: sha512-R9QGdv8j4/dlNoQbX3hSaK/S0rkMijqjVvW3YM06CoBdbU/VdKd159j4hePpng0KuE6Lh6JJ7UdmVGJZFcAG1w==}
-    engines: {node: '>=14'}
+  fuse.js@7.4.2:
+    resolution: {integrity: sha512-LVbzjD4WA6UP5B1UnP8wuaXJiLnqMdM/E4fiJXTJ5haJ5b/MBNsK29h2fm6swEoQaVQjvYFWKLE2RanyZIoRVQ==}
+    engines: {node: '>=10'}
 
-  gaxios@7.1.1:
-    resolution: {integrity: sha512-Odju3uBUJyVCkW64nLD4wKLhbh93bh6vIg/ZIXkWiLPBrdgtc65+tls/qml+un3pr6JqYVFDZbbmLDQT68rTOQ==}
+  fzf@0.5.2:
+    resolution: {integrity: sha512-Tt4kuxLXFKHy8KT40zwsUPUkg1CrsgY25FxA2U/j/0WgEDCk3ddc/zLTCCcbSHX9FcKtLuVaDGtGE/STWC+j3Q==}
+
+  gaxios@7.1.4:
+    resolution: {integrity: sha512-bTIgTsM2bWn3XklZISBTQX7ZSddGW+IO3bMdGaemHZ3tbqExMENHLx6kKZ/KlejgrMtj8q7wBItt51yegqalrA==}
     engines: {node: '>=18'}
 
-  gcp-metadata@6.1.0:
-    resolution: {integrity: sha512-Jh/AIwwgaxan+7ZUUmRLCjtchyDiqh4KjBJ5tW3plBZb5iL/BPcso8A5DlzeD9qlw0duCamnNdpFjxwaT0KyKg==}
-    engines: {node: '>=14'}
-
   gcp-metadata@8.1.2:
     resolution: {integrity: sha512-zV/5HKTfCeKWnxG0Dmrw51hEWFGfcF2xiXqcA3+J90WDuP0SvoiSO5ORvcBsifmx/FoIjgQN3oNOGaQ5PhLFkg==}
     engines: {node: '>=18'}
 
-  get-intrinsic@1.2.4:
-    resolution: {integrity: sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==}
+  gensync@1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+
+  get-caller-file@2.0.5:
+    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
+    engines: {node: 6.* || 8.* || >= 10.*}
+
+  get-east-asian-width@1.5.0:
+    resolution: {integrity: sha512-CQ+bEO+Tva/qlmw24dCejulK5pMzVnUOFOijVogd3KQs07HnRIgp8TGipvCCRT06xeYEbpbgwaCxglFyiuIcmA==}
+    engines: {node: '>=18'}
+
+  get-intrinsic@1.3.0:
+    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
+    engines: {node: '>= 0.4'}
+
+  get-port-please@3.2.0:
+    resolution: {integrity: sha512-I9QVvBw5U/hw3RmWpYKRumUeaDgxTPd401x364rLmWBJcOQ753eov1eTgzDqRG9bqFIfDc7gfzcQEWrUri3o1A==}
+
+  get-proto@1.0.1:
+    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
     engines: {node: '>= 0.4'}
 
   get-stream@5.2.0:
@@ -2499,13 +5381,19 @@ packages:
     resolution: {integrity: sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==}
     engines: {node: '>=16'}
 
+  get-stream@9.0.1:
+    resolution: {integrity: sha512-kVCxPF3vQM/N0B1PmoqVUqgHP+EeVjmZSQn+1oCRPxd2P21P2F19lIgbR3HBosbB1PUhOAoctJnfEn2GbN2eZA==}
+    engines: {node: '>=18'}
+
   get-tsconfig@4.13.6:
     resolution: {integrity: sha512-shZT/QMiSHc/YBLxxOkMtgSid5HFoauqCE3/exfsEcwg1WkeqjG+V40yBbBrsD+jW2HDXcs28xOfcbm2jI8Ddw==}
 
-  git-raw-commits@2.0.11:
-    resolution: {integrity: sha512-VnctFhw+xfj8Va1xtfEqCUD2XDrbAPSJx+hSrE5K7fGdjZruW7XV+QOrN7LF/RJyvspRiD2I0asWsxFp0ya26A==}
-    engines: {node: '>=10'}
-    deprecated: This package is no longer maintained. For the JavaScript API, please use @conventional-changelog/git-client instead.
+  get-tsconfig@5.0.0-beta.5:
+    resolution: {integrity: sha512-/6gFNr0N04nob252sTQxyFLi3eKFRqIg1I87YcqAMT1i6SQrSF6KujUEQrtrjMV0H/eejTCltLdDSTEMzHbnsQ==}
+    engines: {node: '>=20.20.0'}
+
+  giget@3.2.0:
+    resolution: {integrity: sha512-GvHTWcykIR/fP8cj8dMpuMMkvaeJfPvYnhq0oW+chSeIr+ldX21ifU2Ms6KBoyKZQZmVaUAAhQ2EZ68KJF8a7A==}
     hasBin: true
 
   git-up@8.1.1:
@@ -2524,14 +5412,18 @@ packages:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
 
+  glob-parent@6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+
   glob@10.4.5:
     resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
     deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
     hasBin: true
 
-  glob@13.0.1:
-    resolution: {integrity: sha512-B7U/vJpE3DkJ5WXTgTpTRN63uV42DseiXXKMwG14LQBXmsdeIoHAPbU/MEo6II0k5ED74uc2ZGTC6MwHFQhF6w==}
-    engines: {node: 20 || >=22}
+  glob@13.0.6:
+    resolution: {integrity: sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw==}
+    engines: {node: 18 || 20 || >=22}
 
   glob@6.0.4:
     resolution: {integrity: sha512-MKZeRNyYZAVVVG1oZeLaWie1uweH40m9AZwIwxyPbTSX4hHrVYSzLg0Ro5Z5R7XKkIX+Cc6oD1rqeDJnwsB8/A==}
@@ -2541,25 +5433,53 @@ packages:
     resolution: {integrity: sha512-PT6XReJ+D07JvGoxQMkT6qji/jVNfX/h364XHZOWeRzy64sSFr+xJ5OX7LI3b4MPQzdL4H8Y8M0xzPpsVMwA8Q==}
     engines: {node: '>=10.0'}
 
+  global-directory@4.0.1:
+    resolution: {integrity: sha512-wHTUcDUoZ1H5/0iVqEudYW4/kAlN5cZ3j/bXn0Dpbizl9iaUVeWSHqiOjsgk6OW2bkLclbBjzewBz6weQ1zA2Q==}
+    engines: {node: '>=18'}
+
+  globals@15.15.0:
+    resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==}
+    engines: {node: '>=18'}
+
+  globals@17.6.0:
+    resolution: {integrity: sha512-sepffkT8stwnIYbsMBpoCHJuJM5l98FUF2AnE07hfvE0m/qp3R586hw4jF4uadbhvg1ooIdzuu7CsfD2jzCaNA==}
+    engines: {node: '>=18'}
+
   globalthis@1.0.3:
     resolution: {integrity: sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==}
     engines: {node: '>= 0.4'}
 
-  google-auth-library@10.5.0:
-    resolution: {integrity: sha512-7ABviyMOlX5hIVD60YOfHw4/CxOfBhyduaYB+wbFWCWoni4N7SLcV46hrVRktuBbZjFC9ONyqamZITN7q3n32w==}
+  globby@16.2.0:
+    resolution: {integrity: sha512-QrJia2qDf5BB/V6HYlDTs0I0lBahyjLzpGQg3KT7FnCdTonAyPy2RtY802m2k4ALx6Dp752f82WsOczEVr3l6Q==}
+    engines: {node: '>=20'}
+
+  globrex@0.1.2:
+    resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
+
+  google-auth-library@10.6.2:
+    resolution: {integrity: sha512-e27Z6EThmVNNvtYASwQxose/G57rkRuaRbQyxM2bvYLLX/GqWZ5chWq2EBoUchJbCc57eC9ArzO5wMsEmWftCw==}
     engines: {node: '>=18'}
 
-  google-logging-utils@1.1.1:
-    resolution: {integrity: sha512-rcX58I7nqpu4mbKztFeOAObbomBbHU2oIb/d3tJfF3dizGSApqtSwYJigGCooHdnMyQBIw8BrWyK96w3YXgr6A==}
+  google-logging-utils@1.1.3:
+    resolution: {integrity: sha512-eAmLkjDjAFCVXg7A1unxHsLf961m6y17QFqXqAXGj/gVkKFrEICfStRfwUlGNfeCEjNRa32JEWOUTlYXPyyKvA==}
     engines: {node: '>=14'}
 
-  gopd@1.0.1:
-    resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
+  gopd@1.2.0:
+    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+    engines: {node: '>= 0.4'}
 
   got@11.8.6:
     resolution: {integrity: sha512-6tfZ91bOr7bOXnK7PRDCGBLa1H4U080YHNaAQ2KsMGlLEzRbk44nsZF2E1IeRc3vtJHPVbKCYgdFbaGO2ljd8g==}
     engines: {node: '>=10.19.0'}
 
+  got@14.6.6:
+    resolution: {integrity: sha512-QLV1qeYSo5l13mQzWgP/y0LbMr5Plr5fJilgAIwgnwseproEbtNym8xpLsDzeZ6MWXgNE6kdWGBjdh3zT/Qerg==}
+    engines: {node: '>=20'}
+
+  got@15.0.5:
+    resolution: {integrity: sha512-PMIMaZuYUCK43+Z9JWEXea4kkX2b3301m81D5TS6QpfG4PmNyirzEdO/Oa2OHAN4GsjnPfvWCWsshKN2rq4/gQ==}
+    engines: {node: '>=22'}
+
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
@@ -2569,19 +5489,18 @@ packages:
   grapheme-splitter@1.0.4:
     resolution: {integrity: sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==}
 
-  gtoken@8.0.0:
-    resolution: {integrity: sha512-+CqsMbHPiSTdtSO14O51eMNlrp9N79gmeqmXeouJOhfucAedHw9noVe/n5uJk3tbKE6a+6ZCQg3RPhVhHByAIw==}
-    engines: {node: '>=18'}
+  gzip-size@7.0.0:
+    resolution: {integrity: sha512-O1Ld7Dr+nqPnmGpdhzLmMTQ4vAsD+rHwMm1NLUmoUFFymBOMKxCCrtDxqdBRYXdeEPEi3SyoR4TizJLQrnKBNA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
-  handlebars@4.7.8:
-    resolution: {integrity: sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==}
+  h3@1.15.11:
+    resolution: {integrity: sha512-L3THSe2MPeBwgIZVSH5zLdBBU90TOxarvhK9d04IDY2AmVS8j2Jz2LIWtwsGOU3lu2I5jCN7FNvVfY2+XyF+mg==}
+
+  handlebars@4.7.9:
+    resolution: {integrity: sha512-4E71E0rpOaQuJR2A3xDZ+GM1HyWYv1clR58tC8emQNeQe3RH7MAzSbat+V0wG78LQBo6m6bzSG/L4pBuCsgnUQ==}
     engines: {node: '>=0.4.7'}
     hasBin: true
 
-  hard-rejection@2.1.0:
-    resolution: {integrity: sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==}
-    engines: {node: '>=6'}
-
   has-flag@4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
@@ -2589,35 +5508,40 @@ packages:
   has-property-descriptors@1.0.2:
     resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
 
-  has-proto@1.0.3:
-    resolution: {integrity: sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==}
-    engines: {node: '>= 0.4'}
-
-  has-symbols@1.0.3:
-    resolution: {integrity: sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==}
+  has-symbols@1.1.0:
+    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
     engines: {node: '>= 0.4'}
 
   has-tostringtag@1.0.2:
     resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
     engines: {node: '>= 0.4'}
 
+  hash-sum@2.0.0:
+    resolution: {integrity: sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==}
+
   hasown@2.0.2:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
+  hast-util-to-html@9.0.5:
+    resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==}
+
+  hast-util-whitespace@3.0.0:
+    resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
+
   he@1.2.0:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
     hasBin: true
 
+  hono@4.12.23:
+    resolution: {integrity: sha512-eIaZ9qDgu7XV0pxOCrg7/WhnQ6Ivm22UcxhXx/A3dcbqbbYgBEkc6e/J/s7j2tS96zoB0S9VBdLwQNCWwUo4LA==}
+    engines: {node: '>=16.9.0'}
+
   hookable@5.5.3:
     resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
 
-  hosted-git-info@2.8.9:
-    resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
-
-  hosted-git-info@4.1.0:
-    resolution: {integrity: sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==}
-    engines: {node: '>=10'}
+  hookable@6.1.1:
+    resolution: {integrity: sha512-U9LYDy1CwhMCnprUfeAZWZGByVbhd54hwepegYTK7Pi5NvqEj63ifz5z+xukznehT7i6NIZRu89Ay1AZmRsLEQ==}
 
   hpagent@1.2.0:
     resolution: {integrity: sha512-A91dYTeIB6NoXG+PxTQpCCDDnfHsW9kc06Lvpu1TEe9gnd6ZFeiBoRO9JvzEv6xK7EX97/dUE8g/vBMTqTS3CA==}
@@ -2630,21 +5554,35 @@ packages:
   html-escaper@2.0.2:
     resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
 
-  http-cache-semantics@4.1.1:
-    resolution: {integrity: sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==}
+  html-void-elements@3.0.0:
+    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
 
-  http-proxy-agent@7.0.2:
-    resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
-    engines: {node: '>= 14'}
+  http-cache-semantics@4.2.0:
+    resolution: {integrity: sha512-dTxcvPXqPvXBQpq5dUr6mEMJX4oIEFv6bwom3FDwKRDsuIjjJGANqhBuoAn9c1RQJIdAKav33ED65E2ys+87QQ==}
+
+  http-errors@2.0.1:
+    resolution: {integrity: sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==}
+    engines: {node: '>= 0.8'}
+
+  http-shutdown@1.2.2:
+    resolution: {integrity: sha512-S9wWkJ/VSY9/k4qcjG318bqJNruzE4HySUhFYknwmu6LBP97KLLfwNf+n4V1BHurvFNkSKLFnK/RsuUnRTf9Vw==}
+    engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
 
   http2-wrapper@1.0.3:
     resolution: {integrity: sha512-V+23sDMr12Wnz7iTcDeJr3O6AIxlnvT/bmaAAAP/Xda35C90p9599p0F1eHR/N1KILWSoWVAiOMFjBBXaXSMxg==}
     engines: {node: '>=10.19.0'}
 
+  http2-wrapper@2.2.1:
+    resolution: {integrity: sha512-V5nVw1PAOgfI3Lmeaj2Exmeg7fenjhRUgz1lPSezy1CuhPYbgQtbQj4jZfEAEMlaL+vupsvhjqCyjzob0yxsmQ==}
+    engines: {node: '>=10.19.0'}
+
   https-proxy-agent@7.0.6:
     resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
     engines: {node: '>= 14'}
 
+  httpxy@0.5.3:
+    resolution: {integrity: sha512-SMS9V6Sn7VWaS11lYhoAr0ceoaiolTWf4jYdJn0NJhCdKMu9R2H9Fh0LBDWBHQF6HRLI1PmaePYsjanSpE5PEw==}
+
   human-signals@5.0.0:
     resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
     engines: {node: '>=16.17.0'}
@@ -2656,18 +5594,34 @@ packages:
     resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
     engines: {node: '>=0.10.0'}
 
+  iconv-lite@0.7.2:
+    resolution: {integrity: sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==}
+    engines: {node: '>=0.10.0'}
+
   ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
 
+  ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
+    engines: {node: '>= 4'}
+
   ignore@7.0.5:
     resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
     engines: {node: '>= 4'}
 
-  immediate@3.0.6:
-    resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}
+  image-meta@0.2.2:
+    resolution: {integrity: sha512-3MOLanc3sb3LNGWQl1RlQlNWURE5g32aUphrDyFeCsxBTk08iE3VNe4CwsUZ0Qs1X+EfX0+r29Sxdpza4B+yRA==}
 
-  import-in-the-middle@2.0.6:
-    resolution: {integrity: sha512-3vZV3jX0XRFW3EJDTwzWoZa+RH1b8eTTx6YOCjglrLyPuepwoBti1k3L2dKwdCUrnVEfc5CuRuGstaC/uQJJaw==}
+  import-in-the-middle@3.0.0:
+    resolution: {integrity: sha512-OnGy+eYT7wVejH2XWgLRgbmzujhhVIATQH0ztIeRilwHBjTeG3pD+XnH3PKX0r9gJ0BuJmJ68q/oh9qgXnNDQg==}
+    engines: {node: '>=18'}
+
+  import-without-cache@0.4.0:
+    resolution: {integrity: sha512-NkJQA7oZ4YHQhd2+H3BoRFKF3d/XNsiKpHZCQEMH9pDX27hQQLsTyOocyRgaIVtf8gHX3Nt3LPkR4e5EdtPAGQ==}
+    engines: {node: ^22.18.0 || >=24.0.0}
+
+  impound@1.1.5:
+    resolution: {integrity: sha512-5AUn+QE0UofqNHu5f2Skf6Svukdg4ehOIq8O0EtqIx4jta0CDZYBPqpIHt0zrlUTiFVYlLpeH39DoikXBjPKpA==}
 
   imurmurhash@0.1.4:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
@@ -2677,6 +5631,10 @@ packages:
     resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
     engines: {node: '>=8'}
 
+  indent-string@5.0.0:
+    resolution: {integrity: sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==}
+    engines: {node: '>=12'}
+
   inflight@1.0.6:
     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
     deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
@@ -2687,32 +5645,52 @@ packages:
   ini@1.3.8:
     resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
 
+  ini@4.1.1:
+    resolution: {integrity: sha512-QQnnxNyfvmHFIsj7gkPcYymR8Jdw/o7mp5ZFihxn6h8Ci6fh3Dx4E1gPjpQEpIuPo9XVNY/ZUwh4BPMjGyL01g==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+
   ini@6.0.0:
     resolution: {integrity: sha512-IBTdIkzZNOpqm7q3dRqJvMaldXjDHWkEDfrwGEQTs5eaQMWV+djAhR+wahyNNMAa+qpbDUhBMVt4ZKNwpPm7xQ==}
     engines: {node: ^20.17.0 || >=22.9.0}
 
-  install-artifact-from-github@1.4.0:
-    resolution: {integrity: sha512-+y6WywKZREw5rq7U2jvr2nmZpT7cbWbQQ0N/qfcseYnzHFz2cZz1Et52oY+XttYuYeTkI8Y+R2JNWj68MpQFSg==}
+  install-artifact-from-github@1.6.0:
+    resolution: {integrity: sha512-wKsuzN8fy8QK7iEUqyWTQmvZ1QFGPn1xyl3/1iIIDthDjS7Hn9HoPwHlNakZirWbCsbad0lZMkr6Xfbpe1pUzw==}
+    engines: {node: '>=18'}
     hasBin: true
 
-  ip-address@9.0.5:
-    resolution: {integrity: sha512-zHtQzGojZXTwZTHQqra+ETKd4Sn3vgi7uBmlPoXVWZqYvuKmtI0l/VZTjqGmJY9x88GGOaZ9+G9ES8hC4T4X8g==}
+  ioredis@5.10.1:
+    resolution: {integrity: sha512-HuEDBTI70aYdx1v6U97SbNx9F1+svQKBDo30o0b9fw055LMepzpOOd0Ccg9Q6tbqmBSJaMuY0fB7yw9/vjBYCA==}
+    engines: {node: '>=12.22.0'}
+
+  ip-address@10.2.0:
+    resolution: {integrity: sha512-/+S6j4E9AHvW9SWMSEY9Xfy66O5PWvVEJ08O0y5JGyEKQpojb0K0GKpz/v5HJ/G0vi3D2sjGK78119oXZeE0qA==}
     engines: {node: '>= 12'}
 
-  is-arguments@1.1.1:
-    resolution: {integrity: sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==}
-    engines: {node: '>= 0.4'}
+  ipaddr.js@1.9.1:
+    resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
+    engines: {node: '>= 0.10'}
+
+  iron-webcrypto@1.2.1:
+    resolution: {integrity: sha512-feOM6FaSr6rEABp/eDfVseKyTMDt+KGpeB35SkVn9Tyn0CqvVsY3EwI0v5i8nMHyJnzCIQf7nsy3p41TPkJZhg==}
 
   is-arrayish@0.2.1:
     resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
 
-  is-callable@1.2.7:
-    resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
-    engines: {node: '>= 0.4'}
+  is-builtin-module@5.0.0:
+    resolution: {integrity: sha512-f4RqJKBUe5rQkJ2eJEJBXSticB3hGbN9j0yxxMQFqIW89Jp9WYFtzfTcRlstDKVUTRzSOTLKRfO9vIztenwtxA==}
+    engines: {node: '>=18.20'}
 
   is-core-module@2.13.1:
     resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==}
 
+  is-docker@3.0.0:
+    resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    hasBin: true
+
+  is-expression@4.0.0:
+    resolution: {integrity: sha512-zMIXX63sxzG3XrkHkrAPvm/OVZVSCPNkwMHU8oTX7/U3AL78I0QXCEICXUM13BIa8TYGZ68PiTKfQz3yaTNr4A==}
+
   is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -2721,21 +5699,33 @@ packages:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
     engines: {node: '>=8'}
 
-  is-generator-function@1.0.10:
-    resolution: {integrity: sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==}
-    engines: {node: '>= 0.4'}
-
   is-glob@4.0.3:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
 
+  is-in-ssh@1.0.0:
+    resolution: {integrity: sha512-jYa6Q9rH90kR1vKB6NM7qqd1mge3Fx4Dhw5TVlK1MUBqhEOuCagrEHMevNuCcbECmXZ0ThXkRm+Ymr51HwEPAw==}
+    engines: {node: '>=20'}
+
+  is-inside-container@1.0.0:
+    resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
+    engines: {node: '>=14.16'}
+    hasBin: true
+
+  is-installed-globally@1.0.0:
+    resolution: {integrity: sha512-K55T22lfpQ63N4KEN57jZUAaAYqYHEe8veb/TycJRk9DdSCLLcovXz/mL6mOnhQaZsQGwPhuFopdQIlqGSEjiQ==}
+    engines: {node: '>=18'}
+
+  is-module@1.0.0:
+    resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==}
+
   is-number@7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
 
-  is-plain-obj@1.1.0:
-    resolution: {integrity: sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==}
-    engines: {node: '>=0.10.0'}
+  is-path-inside@4.0.0:
+    resolution: {integrity: sha512-lJJV/5dYS+RcL8uQdBDW9c9uWFLLBNRyFhnAKXw5tVqLlKZ4RMGZKv+YQ/IA3OhD+RpbJa1LLFM1FQPGyIXvOA==}
+    engines: {node: '>=12'}
 
   is-plain-obj@2.1.0:
     resolution: {integrity: sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==}
@@ -2748,6 +5738,19 @@ packages:
   is-potential-custom-element-name@1.0.1:
     resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
 
+  is-promise@2.2.2:
+    resolution: {integrity: sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==}
+
+  is-promise@4.0.0:
+    resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==}
+
+  is-reference@1.2.1:
+    resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
+
+  is-regex@1.2.1:
+    resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
+    engines: {node: '>= 0.4'}
+
   is-ssh@1.4.0:
     resolution: {integrity: sha512-x7+VxdxOdlV3CYpjvRLBv5Lo9OJerlYanjwFrPR9fuGPjCiNiCzFgAWpiLAohSbsnH4ZAys3SBh+hq5rJosxUQ==}
 
@@ -2759,9 +5762,9 @@ packages:
     resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
-  is-typed-array@1.1.13:
-    resolution: {integrity: sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==}
-    engines: {node: '>= 0.4'}
+  is-stream@4.0.1:
+    resolution: {integrity: sha512-Dnz92NInDqYckGEUJv689RbRiTSEHCQ7wOVeALbkOz999YpqT46yMRIGtSNl2iCL1waAZSx40+h59NV/EwzV/A==}
+    engines: {node: '>=18'}
 
   is-typedarray@1.0.0:
     resolution: {integrity: sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==}
@@ -2770,6 +5773,10 @@ packages:
     resolution: {integrity: sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==}
     engines: {node: '>=0.10.0'}
 
+  is-wsl@3.1.1:
+    resolution: {integrity: sha512-e6rvdUCiQCAuumZslxRJWR/Doq4VpPR82kqclvcS0efgt430SlGIk05vdCN58+VrzgtIcfNODjozVielycD4Sw==}
+    engines: {node: '>=16'}
+
   isarray@1.0.0:
     resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
 
@@ -2796,10 +5803,13 @@ packages:
     resolution: {integrity: sha512-kWmLKn2tRtfYMF/BakihVVRzBKOxz4gJMiL2Rj91WnAB5TPZumSH99R/Yf1qE1u4uRimvCSJfm6hnxohXeEXjQ==}
     engines: {node: '>=14'}
 
-  jiti@2.6.1:
-    resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
+  jiti@2.7.0:
+    resolution: {integrity: sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==}
     hasBin: true
 
+  jose@6.2.3:
+    resolution: {integrity: sha512-YYVDInQKFJfR/xa3ojUTl8c2KoTwiL1R5Wg9YCydwH0x0B9grbzlg5HC7mMjCtUJjbQ/YnGEZIhI5tCgfTb4Hw==}
+
   js-beautify@1.15.1:
     resolution: {integrity: sha512-ESjNzSlt/sWE8sciZH8kBF8BPlwXPwhR6pWKAw8bw4Bwj+iZcnKW6ONWUutJ7eObuBZQpiIb8S7OYspWrKt7rA==}
     engines: {node: '>=14'}
@@ -2812,12 +5822,18 @@ packages:
   js-md4@0.3.2:
     resolution: {integrity: sha512-/GDnfQYsltsjRswQhN9fhv3EMw2sCpUdrdxyWDOUK7eyD++r3gRhzgiQgc/x4MAv2i1iuQ4lxO5mvqM3vj4bwA==}
 
+  js-stringify@1.0.2:
+    resolution: {integrity: sha512-rtS5ATOo2Q5k1G+DADISilDA6lv79zIiwFd6CcjuIxGKLFm5C+RLImRscVap9k55i+MOZwgliw+NejvkLuGD5g==}
+
   js-tokens@10.0.0:
     resolution: {integrity: sha512-lM/UBzQmfJRo9ABXbPWemivdCW8V2G8FHaHdypQaIy523snUjog0W71ayWXTjiR+ixeMyVHN2XcpnTd/liPg/Q==}
 
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
+  js-tokens@9.0.1:
+    resolution: {integrity: sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==}
+
   js-yaml@3.14.1:
     resolution: {integrity: sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==}
     hasBin: true
@@ -2826,11 +5842,12 @@ packages:
     resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
     hasBin: true
 
-  jsbn@1.1.0:
-    resolution: {integrity: sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A==}
+  jsdoc-type-pratt-parser@7.2.0:
+    resolution: {integrity: sha512-dh140MMgjyg3JhJZY/+iEzW+NO5xR2gpbDFKHqotCmexElVntw7GjWjt511+C/Ef02RU5TKYrJo/Xlzk+OLaTw==}
+    engines: {node: '>=20.0.0'}
 
-  jsdom@29.0.1:
-    resolution: {integrity: sha512-z6JOK5gRO7aMybVq/y/MlIpKh8JIi68FBKMUtKkK2KH/wMSRlCxQ682d08LB9fYXplyY/UXG8P4XXTScmdjApg==}
+  jsdom@29.1.1:
+    resolution: {integrity: sha512-ECi4Fi2f7BdJtUKTflYRTiaMxIB0O6zfR1fX0GXpUrf6flp8QIYn1UT20YQqdSOfk2dfkCwS8LAFoJDEppNK5Q==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=24.0.0}
     peerDependencies:
       canvas: ^3.0.0
@@ -2855,6 +5872,18 @@ packages:
   json-parse-even-better-errors@2.3.1:
     resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
 
+  json-schema-traverse@0.4.1:
+    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+
+  json-schema-traverse@1.0.0:
+    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
+
+  json-schema-typed@8.0.2:
+    resolution: {integrity: sha512-fQhoXdcvc3V28x7C7BMs4P5+kNlgUURe2jmUT1T//oBRMDrqy1QPelJimwZGo7Hg9VPV3EQV5Bnq4hbFy2vetA==}
+
+  json-stable-stringify-without-jsonify@1.0.1:
+    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+
   json-stringify-pretty-compact@4.0.0:
     resolution: {integrity: sha512-3CNZ2DnrpByG9Nqj6Xo8vqbjT4F6N+tb4Gb28ESAZjYZ5yqvmc56J+/kuIwkaAMOyblTQhUW7PxMkUb8Q36N3Q==}
 
@@ -2866,16 +5895,22 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
-  jsonata@2.1.0:
-    resolution: {integrity: sha512-OCzaRMK8HobtX8fp37uIVmL8CY1IGc/a6gLsDqz3quExFR09/U78HUzWYr7T31UEB6+Eu0/8dkVD5fFDOl9a8w==}
+  jsonata@2.2.1:
+    resolution: {integrity: sha512-xd1uwUrKeIcJbsWhaoS3qAX4Ea8m0Mw0G5nlnAQvPT7TbZ5qaPdzBVTQia9KfyuyQm+nenfyjvzUDTRYHsC2sw==}
     engines: {node: '>= 8'}
 
-  jsonc-parser@3.3.1:
-    resolution: {integrity: sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==}
+  jsonc-morph@0.3.4:
+    resolution: {integrity: sha512-tY9H0tplGdRZ0O/7N0qQGr8RuiwuAqGZfO1NCcy986qdMf2gcWTQnr2YF+Q3VkaCBKN2+mTPSZzewg3V4rWXQg==}
+
+  jsonc-weaver@0.2.4:
+    resolution: {integrity: sha512-aIKK8SOg+TdBdeML4MB++phUEdS7KWZxuaPPjxUSat8Kc/2A+2AoxmAGhvbVajNjqsgSX4dhjfCJq3QlE/NSCg==}
 
   jsonfile@6.1.0:
     resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
 
+  jstransformer@1.0.0:
+    resolution: {integrity: sha512-C9YK3Rf8q6VAPDCCU9fnqo3mAfOH6vUGnMcP4AQAYIEpWtfGLpwOTmZ+igtdK5y+VvI2n3CyYSzy4Qh34eq24A==}
+
   jwa@2.0.0:
     resolution: {integrity: sha512-jrZ2Qx916EA+fq9cEAeCROWPTfCwi1IVHqT2tapuqLEVVDKFDENFw1oL+MwrTvH6msKxsd1YTDVw6uKEcsrLEA==}
 
@@ -2885,66 +5920,199 @@ packages:
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
-  kind-of@6.0.3:
-    resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
-    engines: {node: '>=0.10.0'}
+  keyv@5.6.0:
+    resolution: {integrity: sha512-CYDD3SOtsHtyXeEORYRx2qBtpDJFjRTGXUtmNEMGyzYOKj1TE3tycdlho7kA1Ufx9OYWZzg52QFBGALTirzDSw==}
+
+  kleur@4.1.5:
+    resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
+    engines: {node: '>=6'}
 
   klona@2.0.6:
     resolution: {integrity: sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==}
     engines: {node: '>= 8'}
 
-  lie@3.1.1:
-    resolution: {integrity: sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==}
+  knitwork@1.3.0:
+    resolution: {integrity: sha512-4LqMNoONzR43B1W0ek0fhXMsDNW/zxa1NdFAVMY+k28pgZLovR4G3PB5MrpTxCy1QaZCqNoiaKPr5w5qZHfSNw==}
+
+  launch-editor@2.13.2:
+    resolution: {integrity: sha512-4VVDnbOpLXy/s8rdRCSXb+zfMeFR0WlJWpET1iA9CQdlZDfwyLjUuGQzXU4VeOoey6AicSAluWan7Etga6Kcmg==}
+
+  lazystream@1.0.1:
+    resolution: {integrity: sha512-b94GiNHQNy6JNTrt5w6zNyffMrNkXZb3KTkCZJb2V1xaEGCk093vkZ2jk3tpaeP33/OiXC+WvK9AxUebnf5nbw==}
+    engines: {node: '>= 0.6.3'}
+
+  levn@0.4.1:
+    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
+    engines: {node: '>= 0.8.0'}
+
+  lightningcss-android-arm64@1.32.0:
+    resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-darwin-arm64@1.32.0:
+    resolution: {integrity: sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.32.0:
+    resolution: {integrity: sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.32.0:
+    resolution: {integrity: sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    resolution: {integrity: sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.32.0:
+    resolution: {integrity: sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-arm64-musl@1.32.0:
+    resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-linux-x64-gnu@1.32.0:
+    resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-x64-musl@1.32.0:
+    resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-win32-arm64-msvc@1.32.0:
+    resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.32.0:
+    resolution: {integrity: sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.32.0:
+    resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==}
+    engines: {node: '>= 12.0.0'}
+
+  lilconfig@3.1.3:
+    resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
+    engines: {node: '>=14'}
 
   lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
-  linkify-it@5.0.0:
-    resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
+  linkify-it@5.0.1:
+    resolution: {integrity: sha512-wVoTjP4Q6R0NW5hiZkVJaFZPWgtXfoGF+6LucL3/FtiNjmcHhYjEr5f1Kqjirc1nBW07J/ZuRFumqr2oqccEWg==}
 
-  localforage@1.10.0:
-    resolution: {integrity: sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==}
+  listhen@1.10.0:
+    resolution: {integrity: sha512-kfz4C0OrC6IpaVMtYDJtf6PFjurxe9NBBoDAh/o2p587INryFOO4DQ9OetbCdDrWFt1m1CJKvYrzkGsuPHw8nQ==}
+    hasBin: true
 
-  locate-path@5.0.0:
-    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
-    engines: {node: '>=8'}
+  local-pkg@1.1.2:
+    resolution: {integrity: sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==}
+    engines: {node: '>=14'}
+
+  locate-path@6.0.0:
+    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
+    engines: {node: '>=10'}
 
   locate-path@8.0.0:
     resolution: {integrity: sha512-XT9ewWAC43tiAV7xDAPflMkG0qOPn2QjHqlgX8FOqmWa/rxnyYDulF9T0F7tRy1u+TVTmK/M//6VIOye+2zDXg==}
     engines: {node: '>=20'}
 
+  lodash.defaults@4.2.0:
+    resolution: {integrity: sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==}
+
+  lodash.isarguments@3.1.0:
+    resolution: {integrity: sha512-chi4NHZlZqZD18a0imDHnZPrDeBbTtVN7GXMwuGdRH9qotxAjYs3aVLKc7zNOG9eddR5Ksd8rvFEBc9SsggPpg==}
+
+  lodash.memoize@4.1.2:
+    resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==}
+
+  lodash.uniq@4.5.0:
+    resolution: {integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==}
+
   lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
 
-  long@5.2.3:
-    resolution: {integrity: sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q==}
+  long@5.3.2:
+    resolution: {integrity: sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==}
 
   longest-streak@3.1.0:
     resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
 
+  loupe@3.2.1:
+    resolution: {integrity: sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==}
+
   lowercase-keys@2.0.0:
     resolution: {integrity: sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==}
     engines: {node: '>=8'}
 
+  lowercase-keys@3.0.0:
+    resolution: {integrity: sha512-ozCC6gdQ+glXOQsveKD0YsDy8DSQFjDTz4zyzEHNV5+JP5D62LmfDZ6o1cycFx9ouG940M5dE8C8CTewdj2YWQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  lowercase-keys@4.0.1:
+    resolution: {integrity: sha512-wI9Nui/L8VfADa/cr/7NQruaASk1k23/Uh1khQ02BCVYiiy8F4AhOGnQzJy3Fl/c44GnYSbZHv8g7EcG3kJ1Qg==}
+    engines: {node: '>=20'}
+
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
-  lru-cache@11.2.6:
-    resolution: {integrity: sha512-ESL2CrkS/2wTPfuend7Zhkzo2u0daGJ/A2VucJOgQ/C48S/zB8MMeMHSGKYpXhIjbPxfuezITkaBH1wqv00DDQ==}
+  lru-cache@11.5.1:
+    resolution: {integrity: sha512-RPimw/7aMdv2oqRrxKwvZXcPfwBrn/JZ2xYcY9Hus/6LaS3VOAKVWKWgNLCFSiOm1ESXinjsDlidVU7JlnCN2A==}
     engines: {node: 20 || >=22}
 
-  lru-cache@11.2.7:
-    resolution: {integrity: sha512-aY/R+aEsRelme17KGQa/1ZSIpLpNYYrhcrepKTZgE+W3WM16YMCaPwOHLHsmopZHELU0Ojin1lPVxKR0MihncA==}
-    engines: {node: 20 || >=22}
+  lru-cache@5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
-  lru-cache@6.0.0:
-    resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
-    engines: {node: '>=10'}
+  lru-cache@8.0.5:
+    resolution: {integrity: sha512-MhWWlVnuab1RG5/zMRRcVGXZLCXrZTgfwMikgzCegsPnG62yDQo5JnqKkrK4jO5iKqDAZGItAqN5CtKBCBWRUA==}
+    engines: {node: '>=16.14'}
 
   luxon@3.7.2:
     resolution: {integrity: sha512-vtEhXh/gNjI9Yg1u4jX/0YVPMvxzHuGgCm6tC5kZyb08yjGWGnqAjGJvcXbqQR2P3MyMEFnRbpcdFS6PBcLqew==}
     engines: {node: '>=12'}
 
+  lz-string@1.5.0:
+    resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
+    hasBin: true
+
+  magic-regexp@0.10.0:
+    resolution: {integrity: sha512-Uly1Bu4lO1hwHUW0CQeSWuRtzCMNO00CmXtS8N6fyvB3B979GOEEeAkiTUDsmbYLAbvpUS/Kt5c4ibosAzVyVg==}
+
+  magic-regexp@0.11.0:
+    resolution: {integrity: sha512-LG77Z/gVnwz7oaDpD4heX6ryl+lcr4l1B2gnP4MMvt2pGhGC1Dfj7dl1pXpP4ih+VQFLuAadeKVa+lARAzfW+Q==}
+
+  magic-string-ast@1.0.3:
+    resolution: {integrity: sha512-CvkkH1i81zl7mmb94DsRiFeG9V2fR2JeuK8yDgS8oiZSFa++wWLEgZ5ufEOyLHbvSbD1gTRKv9NdX69Rnvr9JA==}
+    engines: {node: '>=20.19.0'}
+
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
@@ -2955,29 +6123,26 @@ packages:
     resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
     engines: {node: '>=10'}
 
-  make-fetch-happen@15.0.3:
-    resolution: {integrity: sha512-iyyEpDty1mwW3dGlYXAJqC/azFn5PPvgKVwXayOGBSmKLxhKZ9fg4qIan2ePpp1vJIwfFiO34LAPZgq9SZW9Aw==}
-    engines: {node: ^20.17.0 || >=22.9.0}
-
-  map-obj@1.0.1:
-    resolution: {integrity: sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==}
-    engines: {node: '>=0.10.0'}
-
-  map-obj@4.3.0:
-    resolution: {integrity: sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==}
-    engines: {node: '>=8'}
-
-  markdown-it@14.1.0:
-    resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==}
+  markdown-it@14.2.0:
+    resolution: {integrity: sha512-1TGiQiJVRQ3NPmZH6sx5Cfnmg6GQm9jvC1ch4TK511NjSJvjzKLzn5pPfZRNZkRPZP0HqCioSndqH8v2nRaWVQ==}
     hasBin: true
 
   markdown-table@3.0.4:
     resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
 
+  marked@18.0.5:
+    resolution: {integrity: sha512-S6GcvALHg6K4ohtu4E7x0a1AqhAjp6cV8KhLSyN9qVapnzJkusVBxZRcIU9AeYsbe6P1hKDusSbEOzGyyuce6w==}
+    engines: {node: '>= 20'}
+    hasBin: true
+
   matcher@3.0.0:
     resolution: {integrity: sha512-OkeDaAZ/bQCxeFAozM55PKcKU0yJMPGifLwV4Qgjitu+5MoAfSQN4lsLJeXZ1b8w0x+/Emda6MZgXS1jvsapng==}
     engines: {node: '>=10'}
 
+  math-intrinsics@1.1.0:
+    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+    engines: {node: '>= 0.4'}
+
   mdast-util-find-and-replace@3.0.2:
     resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==}
 
@@ -3005,25 +6170,31 @@ packages:
   mdast-util-phrasing@4.1.0:
     resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==}
 
+  mdast-util-to-hast@13.2.1:
+    resolution: {integrity: sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==}
+
   mdast-util-to-markdown@2.1.2:
     resolution: {integrity: sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==}
 
   mdast-util-to-string@4.0.0:
     resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
 
+  mdn-data@2.0.28:
+    resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
+
   mdn-data@2.27.1:
     resolution: {integrity: sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==}
 
   mdurl@2.0.0:
     resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
 
-  meow@7.1.1:
-    resolution: {integrity: sha512-GWHvA5QOcS412WCo8vwKDlTelGLsCGBVevQB5Kva961rmNfun0PCbv5+xta2kUMFJyR8/oWnn7ddeKdosbAPbA==}
-    engines: {node: '>=10'}
+  media-typer@1.1.0:
+    resolution: {integrity: sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==}
+    engines: {node: '>= 0.8'}
 
-  meow@8.1.2:
-    resolution: {integrity: sha512-r85E3NdZ+mpYk1C6RjPFEMSE+s1iZMuHtsHAqY0DT3jZczl0diWUZ8g6oU7h0M9cD2EL+PzaYghhCLzR0ZNn5Q==}
-    engines: {node: '>=10'}
+  merge-descriptors@2.0.0:
+    resolution: {integrity: sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==}
+    engines: {node: '>=18'}
 
   merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
@@ -3120,6 +6291,19 @@ packages:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
 
+  mime-db@1.54.0:
+    resolution: {integrity: sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@3.0.2:
+    resolution: {integrity: sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==}
+    engines: {node: '>=18'}
+
+  mime@4.1.0:
+    resolution: {integrity: sha512-X5ju04+cAzsojXKes0B/S4tcYtFAJ6tTMuSPBEn9CPGlrWr8Fiw7qYeLT0XyH80HSoAoqWCaz+MWKh22P7G1cw==}
+    engines: {node: '>=16'}
+    hasBin: true
+
   mimic-fn@4.0.0:
     resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
     engines: {node: '>=12'}
@@ -3132,6 +6316,10 @@ packages:
     resolution: {integrity: sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==}
     engines: {node: '>=10'}
 
+  mimic-response@4.0.0:
+    resolution: {integrity: sha512-e5ISH9xMYU0DzrT+jl8q2ze9D6eWBto+I8CNpe+VI+K2J/F/k3PdkdTdz4wvGVH4NTpo+NRYTVIuMQEMMcsLqg==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
   min-indent@1.0.1:
     resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
     engines: {node: '>=4'}
@@ -3139,17 +6327,17 @@ packages:
   minimalistic-assert@1.0.1:
     resolution: {integrity: sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==}
 
-  minimatch@10.0.1:
-    resolution: {integrity: sha512-ethXTt3SGGR+95gudmqJ1eNhRO7eGEGIgYA9vnPatK4/etz2MEVDno5GMCibdMTuBMyElzIlgxMna3K94XDIDQ==}
-    engines: {node: 20 || >=22}
-
-  minimatch@10.1.2:
-    resolution: {integrity: sha512-fu656aJ0n2kcXwsnwnv9g24tkU5uSmOlTjd6WyyaKm2Z+h1qmY6bAjrcaIxF/BslFqbZ8UBtbJi7KgQOZD2PTw==}
-    engines: {node: 20 || >=22}
+  minimatch@10.2.5:
+    resolution: {integrity: sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==}
+    engines: {node: 18 || 20 || >=22}
 
   minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
 
+  minimatch@5.1.9:
+    resolution: {integrity: sha512-7o1wEA2RyMP7Iu7GNba9vc0RWWGACJOCZBJX2GJWip0ikV+wcOsgVuY9uE8CPiyQhkGFSlhuSkZPavN7u1c2Fw==}
+    engines: {node: '>=10'}
+
   minimatch@9.0.1:
     resolution: {integrity: sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -3158,10 +6346,6 @@ packages:
     resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
     engines: {node: '>=16 || 14 >=14.17'}
 
-  minimist-options@4.1.0:
-    resolution: {integrity: sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==}
-    engines: {node: '>= 6'}
-
   minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
 
@@ -3169,10 +6353,6 @@ packages:
     resolution: {integrity: sha512-D7V8PO9oaz7PWGLbCACuI1qEOsq7UKfLotx/C0Aet43fCUB/wfQ7DYeq2oR/svFJGYDHPr38SHATeaj/ZoKHKw==}
     engines: {node: '>=16 || 14 >=14.17'}
 
-  minipass-fetch@5.0.1:
-    resolution: {integrity: sha512-yHK8pb0iCGat0lDrs/D6RZmCdaBT64tULXjdxjSMAqoDi18Q3qKEUTHypHQZQd9+FYpIS+lkvpq6C/R6SbUeRw==}
-    engines: {node: ^20.17.0 || >=22.9.0}
-
   minipass-flush@1.0.5:
     resolution: {integrity: sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==}
     engines: {node: '>= 8'}
@@ -3181,30 +6361,14 @@ packages:
     resolution: {integrity: sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==}
     engines: {node: '>=8'}
 
-  minipass-sized@2.0.0:
-    resolution: {integrity: sha512-zSsHhto5BcUVM2m1LurnXY6M//cGhVaegT71OfOXoprxT6o780GZd792ea6FfrQkuU4usHZIUczAQMRUE2plzA==}
-    engines: {node: '>=8'}
-
   minipass@3.3.6:
     resolution: {integrity: sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==}
     engines: {node: '>=8'}
 
-  minipass@5.0.0:
-    resolution: {integrity: sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==}
-    engines: {node: '>=8'}
-
-  minipass@7.1.2:
-    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
+  minipass@7.1.3:
+    resolution: {integrity: sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==}
     engines: {node: '>=16 || 14 >=14.17'}
 
-  minizlib@2.1.2:
-    resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==}
-    engines: {node: '>= 8'}
-
-  minizlib@3.0.1:
-    resolution: {integrity: sha512-umcy022ILvb5/3Djuu8LWeqUa8D68JaBzlttKeMWen48SjabqS3iY5w/vzeMzMUNhLDifyhbOwKDSznB1vvrwg==}
-    engines: {node: '>= 18'}
-
   minizlib@3.1.0:
     resolution: {integrity: sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==}
     engines: {node: '>= 18'}
@@ -3216,13 +6380,11 @@ packages:
     resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
     hasBin: true
 
-  mkdirp@1.0.4:
-    resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
-    engines: {node: '>=10'}
-    hasBin: true
+  mlly@1.8.2:
+    resolution: {integrity: sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==}
 
-  module-details-from-path@1.0.3:
-    resolution: {integrity: sha512-ySViT69/76t8VhE1xXHK6Ch4NcDd26gx0MzKXLO+F7NOtnqH68d9zF94nT8ZWSxXh8ELOERsnJO/sWt1xZYw5A==}
+  mocked-exports@0.1.1:
+    resolution: {integrity: sha512-aF7yRQr/Q0O2/4pIXm6PZ5G+jAd7QS4Yu8m+WEeEHGnbo+7mE36CbLSDQiXYV8bVL3NfmdeqPJct0tUlnjVSnA==}
 
   module-details-from-path@1.0.4:
     resolution: {integrity: sha512-EGWKgxALGMgzvxYF1UyGTy0HXX/2vHLkw6+NvDKW2jypWbHpjQuj4UMcqQWXHERJhVGKikolT06G3bcKe4fi7w==}
@@ -3230,8 +6392,8 @@ packages:
   moment@2.30.1:
     resolution: {integrity: sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==}
 
-  moo@0.5.2:
-    resolution: {integrity: sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q==}
+  moo@0.5.3:
+    resolution: {integrity: sha512-m2fmM2dDm7GZQsY7KK2cme8agi+AAljILjQnof7p1ZMDe6dQ4bdnSMx0cPppudoeNv5hEFQirN6u+O4fDE0IWA==}
 
   mrmime@2.0.1:
     resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
@@ -3240,29 +6402,35 @@ packages:
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
+  muggle-string@0.4.1:
+    resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
+
   mv@2.1.1:
     resolution: {integrity: sha512-at/ZndSy3xEGJ8i0ygALh8ru9qy7gWW1cmkaqBN29JmMlIvM//MEO9y1sk/avxuwnPcfhkejkLsuPxH81BrkSg==}
     engines: {node: '>=0.8.0'}
 
-  nan@2.22.2:
-    resolution: {integrity: sha512-DANghxFkS1plDdRsX0X9pm0Z6SJNN6gBdtXfanwoZ8hooC5gosGFSBGRYHUVPz1asKA/kMRqDRdHrluZ61SpBQ==}
-
-  nan@2.25.0:
-    resolution: {integrity: sha512-0M90Ag7Xn5KMLLZ7zliPWP3rT90P6PN+IzVFS0VqmnPktBk3700xUVv8Ikm9EUaUE5SDWdp/BIxdENzVznpm1g==}
-
-  nanoid@3.3.11:
-    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
-    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
-    hasBin: true
+  nan@2.27.0:
+    resolution: {integrity: sha512-hC+0LidcL3XE4rp1C4H54KujgXKzbfyTngZTwBByQxsOxCEKZT0MPQ4hOKUH2jU1OYstqdDH4onyHPDzcV0XdQ==}
 
   nanoid@3.3.12:
     resolution: {integrity: sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  nanotar@0.3.0:
+    resolution: {integrity: sha512-Kv2JYYiCzt16Kt5QwAc9BFG89xfPNBx+oQL4GQXD9nLqPkZBiNaqaCWtwnbk/q7UVsTYevvM1b0UF8zmEI4pCg==}
+
   napi-build-utils@1.0.2:
     resolution: {integrity: sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==}
 
+  napi-postinstall@0.3.4:
+    resolution: {integrity: sha512-PHI5f1O0EP5xJ9gQmFGMS6IZcrVvTjpXjz7Na41gTE7eE2hK11lg04CECCYEEjdc17EV4DO+fkGEtt7TpTaTiQ==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+    hasBin: true
+
+  natural-compare@1.4.0:
+    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
+
   ncp@2.0.0:
     resolution: {integrity: sha512-zIdGUrPRFTUELUvr3Gmc7KZ2Sw/h1PiVM0Af/oHB6zgnV1ikqSfRk+TOufi79aHYCW3NiOXmr1BP5nWbzojLaA==}
     hasBin: true
@@ -3278,15 +6446,31 @@ packages:
     resolution: {integrity: sha512-Z4SmBUweYa09+o6pG+eASabEpP6QkQ70yHj351pQoEXIs8uHbaU2DWVmzBANKgflPa47A50PtB2+NgRpQvr7vA==}
     engines: {node: '>= 10'}
 
+  nitropack@2.13.4:
+    resolution: {integrity: sha512-tX7bT6zxNeMwkc6hxHiZeUoTOjVrcjoh1Z3cmxOlodIqjl4HISgqfGOmkWSayky3Nv9Z5+KQH52F8nmXJY5AAA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      xml2js: ^0.6.2
+    peerDependenciesMeta:
+      xml2js:
+        optional: true
+
   node-abi@3.62.0:
     resolution: {integrity: sha512-CPMcGa+y33xuL1E0TcNIu4YyaZCxnnvkVaEXrsosR3FxN+fV8xvb7Mzpb7IgKler10qeMkE6+Dp8qJhpzdq35g==}
     engines: {node: '>=10'}
 
+  node-addon-api@7.1.1:
+    resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
+
   node-domexception@1.0.0:
     resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
     engines: {node: '>=10.5.0'}
     deprecated: Use your platform's native DOMException instead
 
+  node-fetch-native@1.6.7:
+    resolution: {integrity: sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==}
+
   node-fetch@2.7.0:
     resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==}
     engines: {node: 4.x || >=6.0.0}
@@ -3300,44 +6484,91 @@ packages:
     resolution: {integrity: sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
-  node-gyp@12.2.0:
-    resolution: {integrity: sha512-q23WdzrQv48KozXlr0U1v9dwO/k59NHeSzn6loGcasyf0UnSrtzs8kRxM+mfwJSf0DkX0s43hcqgnSO4/VNthQ==}
+  node-forge@1.4.0:
+    resolution: {integrity: sha512-LarFH0+6VfriEhqMMcLX2F7SwSXeWwnEAJEsYm5QKWchiVYVvJyV9v7UDvUv+w5HO23ZpQTXDv/GxdDdMyOuoQ==}
+    engines: {node: '>= 6.13.0'}
+
+  node-gyp-build@4.8.4:
+    resolution: {integrity: sha512-LA4ZjwlnUblHVgq0oBF3Jl/6h/Nvs5fzBLwdEF4nuxnFdsfajde4WfxtJr3CaiH+F6ewcIB/q4jQ4UzPyid+CQ==}
+    hasBin: true
+
+  node-gyp@12.4.0:
+    resolution: {integrity: sha512-OMcPNvqTCFUnNaBlmdgq+lfNqY7gTiSmNRDjY3uAXRyudeKZEZxu3CLtjMQrx4zZxCX2b/mpNqTtwuCJgXhHkw==}
     engines: {node: ^20.17.0 || >=22.9.0}
     hasBin: true
 
-  node-html-parser@7.0.2:
-    resolution: {integrity: sha512-DxodLVh7a6JMkYzWyc8nBX9MaF4M0lLFYkJHlWOiu7+9/I6mwNK9u5TbAMC7qfqDJEPX9OIoWA2A9t4C2l1mUQ==}
+  node-html-parser@7.1.0:
+    resolution: {integrity: sha512-iJo8b2uYGT40Y8BTyy5ufL6IVbN8rbm/1QK2xffXU/1a/v3AAa0d1YAoqBNYqaS4R/HajkWIpIfdE6KcyFh1AQ==}
+
+  node-mock-http@1.0.4:
+    resolution: {integrity: sha512-8DY+kFsDkNXy1sJglUfuODx1/opAGJGyrTuFqEoN90oRc2Vk0ZbD4K2qmKXBBEhZQzdKHIVfEJpDU8Ak2NJEvQ==}
+
+  node-releases@2.0.36:
+    resolution: {integrity: sha512-TdC8FSgHz8Mwtw9g5L4gR/Sh9XhSP/0DEkQxfEFXOpiul5IiHgHan2VhYYb6agDSfp4KuvltmGApc8HMgUrIkA==}
 
   nopt@7.2.0:
     resolution: {integrity: sha512-CVDtwCdhYIvnAzFoJ6NJ6dX3oga9/HyciQDnG1vQDjSLMeKLJ4A93ZqYKDrgYSr1FBY5/hMYC+2VCi24pgpkGA==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     hasBin: true
 
+  nopt@8.1.0:
+    resolution: {integrity: sha512-ieGu42u/Qsa4TFktmaKEwM6MQH0pOWnaB3htzh0JRtx84+Mebc0cbZYN5bC+6WTZ4+77xrL9Pn5m7CV6VIkV7A==}
+    engines: {node: ^18.17.0 || >=20.5.0}
+    hasBin: true
+
   nopt@9.0.0:
     resolution: {integrity: sha512-Zhq3a+yFKrYwSBluL4H9XP3m3y5uvQkB/09CwDruCiRmR/UJYnn9W4R48ry0uGC70aeTPKLynBtscP9efFFcPw==}
     engines: {node: ^20.17.0 || >=22.9.0}
     hasBin: true
 
-  normalize-package-data@2.5.0:
-    resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==}
-
-  normalize-package-data@3.0.3:
-    resolution: {integrity: sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==}
-    engines: {node: '>=10'}
+  normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
 
   normalize-url@6.1.0:
     resolution: {integrity: sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==}
     engines: {node: '>=10'}
 
+  normalize-url@8.1.1:
+    resolution: {integrity: sha512-JYc0DPlpGWB40kH5g07gGTrYuMqV653k3uBKY6uITPWds3M0ov3GaWGp9lbE3Bzngx8+XkfzgvASb9vk9JDFXQ==}
+    engines: {node: '>=14.16'}
+
   npm-run-path@5.3.0:
     resolution: {integrity: sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  npm-run-path@6.0.0:
+    resolution: {integrity: sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==}
+    engines: {node: '>=18'}
+
   nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
 
-  object-inspect@1.13.1:
-    resolution: {integrity: sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==}
+  nuxt@4.4.7:
+    resolution: {integrity: sha512-4ASIbcOVF2O1HJqoKRVntxOphl9zmikgmj25D9c93l795yp8x0f4TItzrnT0xyrFxMkpL6z3rHhrfQQfoxNXxw==}
+    engines: {node: ^22.12.0 || ^24.11.0 || >=26.0.0}
+    hasBin: true
+    peerDependencies:
+      '@parcel/watcher': ^2.1.0
+      '@types/node': '>=18.12.0'
+    peerDependenciesMeta:
+      '@parcel/watcher':
+        optional: true
+      '@types/node':
+        optional: true
+
+  nypm@0.6.6:
+    resolution: {integrity: sha512-vRyr0r4cbBapw07Xw8xrj9Teq3o7MUD35rSaTcanDbW+aK2XHDgJFiU6ZTj2GBw7Q12ysdsyFss+Vdz4hQ0Y6Q==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
+  object-inspect@1.13.4:
+    resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
+    engines: {node: '>= 0.4'}
 
   object-keys@1.1.1:
     resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
@@ -3346,6 +6577,23 @@ packages:
   obug@2.1.1:
     resolution: {integrity: sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==}
 
+  ofetch@1.5.1:
+    resolution: {integrity: sha512-2W4oUZlVaqAPAil6FUg/difl6YhqhUR7x2eZY4bQCko22UXg3hptq9KLQdqFClV+Wu85UX7hNtdGTngi/1BxcA==}
+
+  ofetch@2.0.0-alpha.3:
+    resolution: {integrity: sha512-zpYTCs2byOuft65vI3z43Dd6iSdFbOZZLb9/d21aCpx2rGastVU9dOCv0lu4ykc1Ur1anAYjDi3SUvR0vq50JA==}
+
+  ohash@2.0.11:
+    resolution: {integrity: sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==}
+
+  on-change@6.0.2:
+    resolution: {integrity: sha512-08+12qcOVEA0fS9g/VxKS27HaT94nRutUT77J2dr8zv/unzXopvhBuF8tNLWsoLQ5IgrQ6eptGeGqUYat82U1w==}
+    engines: {node: '>=20'}
+
+  on-finished@2.4.1:
+    resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
+    engines: {node: '>= 0.8'}
+
   once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 
@@ -3353,16 +6601,64 @@ packages:
     resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
     engines: {node: '>=12'}
 
+  oniguruma-parser@0.12.2:
+    resolution: {integrity: sha512-6HVa5oIrgMC6aA6WF6XyyqbhRPJrKR02L20+2+zpDtO5QAzGHAUGw5TKQvwi5vctNnRHkJYmjAhRVQF2EKdTQw==}
+
+  oniguruma-to-es@4.3.6:
+    resolution: {integrity: sha512-csuQ9x3Yr0cEIs/Zgx/OEt9iBw9vqIunAPQkx19R/fiMq2oGVTgcMqO/V3Ybqefr1TBvosI6jU539ksaBULJyA==}
+
+  open@10.2.0:
+    resolution: {integrity: sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==}
+    engines: {node: '>=18'}
+
+  open@11.0.0:
+    resolution: {integrity: sha512-smsWv2LzFjP03xmvFoJ331ss6h+jixfA4UUV/Bsiyuu4YJPfN+FIQGOIiv4w9/+MoHkfkJ22UIaQWRVFRfH6Vw==}
+    engines: {node: '>=20'}
+
   openpgp@6.3.0:
     resolution: {integrity: sha512-pLzCU8IgyKXPSO11eeharQkQ4GzOKNWhXq79pQarIRZEMt1/ssyr+MIuWBv1mNoenJLg04gvPx+fi4gcKZ4bag==}
     engines: {node: '>= 18.0.0'}
 
-  oxlint@1.47.0:
-    resolution: {integrity: sha512-v7xkK1iv1qdvTxJGclM97QzN8hHs5816AneFAQ0NGji1BMUquhiDAhXpMwp8+ls16uRVJtzVHxP9pAAXblDeGA==}
+  optionator@0.9.4:
+    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
+    engines: {node: '>= 0.8.0'}
+
+  oxc-minify@0.133.0:
+    resolution: {integrity: sha512-6bNsYU+5WNIaNHB16zHnL24cUaJuKiPzUvjENoMale3+U8ZBMbGYgdgt//frx0ge7UcgEGIpqtukGGNPT0kxfQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+
+  oxc-parser@0.127.0:
+    resolution: {integrity: sha512-bkgD4qHlN7WxLdX8bLXdaU54TtQtAIg/ZBAfm0aje/mo3MRDo3P0hZSgr4U7O3xfX+fQmR5AP04JS/TGcZLcFA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+
+  oxc-parser@0.133.0:
+    resolution: {integrity: sha512-661RSx+ZcjBmjBYid+Fpp/2F5EbtildpeoZh5HdgnGs+jZ03nqQEQW8yGkt4BGyOC3OMPDQQRl8M5kqD2/g6jw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+
+  oxc-resolver@11.20.0:
+    resolution: {integrity: sha512-CblytBiV/a/ZXY34dsVU2NxhIOxMXst8CvDCtyBelVITgd7PLrKzbEbA6oKLdPjvDKDzCiW48qzmzZ+mYaqn+g==}
+
+  oxc-transform@0.133.0:
+    resolution: {integrity: sha512-9lt2b+hkG6yqe0fUDMHhMk7rgI9uTjNxU9wauQiYnHzc4kZI8JP/OhBqXTIJQTrqRJ8CkSH3O5AhQ13ke28yNg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+
+  oxc-walker@1.0.0:
+    resolution: {integrity: sha512-eMsHflAGfOskpWxtp9xP/f5b96XLEU8ifTd2gOOCkdux9HMxKGy5S1ru0Gh1B3aPu+YbfmWUUVkcb7MrZz3XyQ==}
+    peerDependencies:
+      oxc-parser: '>=0.98.0'
+      rolldown: '>=1.0.0'
+    peerDependenciesMeta:
+      oxc-parser:
+        optional: true
+      rolldown:
+        optional: true
+
+  oxlint@1.57.0:
+    resolution: {integrity: sha512-DGFsuBX5MFZX9yiDdtKjTrYPq45CZ8Fft6qCltJITYZxfwYjVdGf/6wycGYTACloauwIPxUnYhBVeZbHvleGhw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
     peerDependencies:
-      oxlint-tsgolint: '>=0.11.2'
+      oxlint-tsgolint: '>=0.15.0'
     peerDependenciesMeta:
       oxlint-tsgolint:
         optional: true
@@ -3375,6 +6671,10 @@ packages:
     resolution: {integrity: sha512-BZOr3nRQHOntUjTrH8+Lh54smKHoHyur8We1V8DSMVrl5A2malOOwuJRnKRDjSnkoeBh4at6BwEnb5I7Jl31wg==}
     engines: {node: '>=8'}
 
+  p-cancelable@4.0.1:
+    resolution: {integrity: sha512-wBowNApzd45EIKdO1LaU+LrMBwAcjfPaYtVzV3lmfM3gf8Z4CHZsiIqlM8TZZ8okYvh5A1cP6gTfCRQtwUpaUg==}
+    engines: {node: '>=14.16'}
+
   p-filter@2.1.0:
     resolution: {integrity: sha512-ZBxxZ5sL2HghephhpGAQdoskxplTwr7ICaehZwLIlfL6acuVgZPm8yBNuRAFBGEqtD/hmUeq9eqLg2ys9Xr/yw==}
     engines: {node: '>=8'}
@@ -3383,13 +6683,17 @@ packages:
     resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
     engines: {node: '>=6'}
 
+  p-limit@3.1.0:
+    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
+    engines: {node: '>=10'}
+
   p-limit@4.0.0:
     resolution: {integrity: sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
-  p-locate@4.1.0:
-    resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
-    engines: {node: '>=8'}
+  p-locate@5.0.0:
+    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
+    engines: {node: '>=10'}
 
   p-locate@6.0.0:
     resolution: {integrity: sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==}
@@ -3407,8 +6711,8 @@ packages:
     resolution: {integrity: sha512-tkAQEw8ysMzmkhgw8k+1U/iPhWNhykKnSk4Rd5zLoPJCuJaGRPo6YposrZgaxHKzDHdDWWZvE/Sk7hsL2X/CpQ==}
     engines: {node: '>=18'}
 
-  p-queue@9.1.0:
-    resolution: {integrity: sha512-O/ZPaXuQV29uSLbxWBGGZO1mCQXV2BLIwUr59JUU9SoH76mnYvtms7aafH/isNSNGwuEfP6W/4xD0/TJXxrizw==}
+  p-queue@9.3.0:
+    resolution: {integrity: sha512-7NED7xhQ74Ngp4JP/2e0VZHp7vSWfJfqeiR92jPgxsz6m0Se4P03YoTKa9dDXyZ3r6P616gUXttrB6nnHYKang==}
     engines: {node: '>=20'}
 
   p-throttle@8.1.0:
@@ -3440,13 +6744,24 @@ packages:
     resolution: {integrity: sha512-bCgsFI+GeGWPAvAiUv63ZorMeif3/U0zaXABGJbOWt5OH2KCaPHF6S+0ok4aqM9RuIPGyZdx9tR9l13PsW4AYQ==}
     engines: {node: '>=14.13.0'}
 
-  parse5@8.0.0:
-    resolution: {integrity: sha512-9m4m5GSgXjL4AjumKzq1Fgfp3Z8rsvjRNbnkVwfu2ImRqE5D0LnY2QfDen18FSY9C573YU5XxSapdHZTZ2WolA==}
+  parse5@8.0.1:
+    resolution: {integrity: sha512-z1e/HMG90obSGeidlli3hj7cbocou0/wa5HacvI3ASx34PecNjNQeaHNo5WIZpWofN9kgkqV1q5YvXe3F0FoPw==}
+
+  parseurl@1.3.3:
+    resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
+    engines: {node: '>= 0.8'}
+
+  path-browserify@1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
 
   path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
 
+  path-expression-matcher@1.5.0:
+    resolution: {integrity: sha512-cbrerZV+6rvdQrrD+iGMcZFEiiSrbv9Tfdkvnusy6y0x0GKBXREFg/Y65GhIfm0tnLntThhzCnfKwp1WRjeCyQ==}
+    engines: {node: '>=14.0.0'}
+
   path-is-absolute@1.0.1:
     resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
     engines: {node: '>=0.10.0'}
@@ -3466,38 +6781,241 @@ packages:
     resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
     engines: {node: '>=16 || 14 >=14.18'}
 
-  path-scurry@2.0.0:
-    resolution: {integrity: sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==}
-    engines: {node: 20 || >=22}
+  path-scurry@2.0.2:
+    resolution: {integrity: sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg==}
+    engines: {node: 18 || 20 || >=22}
+
+  path-to-regexp@8.4.2:
+    resolution: {integrity: sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA==}
+
+  pathe@1.1.2:
+    resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
 
   pathe@2.0.3:
     resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
 
-  pend@1.2.0:
-    resolution: {integrity: sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==}
+  pathval@2.0.1:
+    resolution: {integrity: sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==}
+    engines: {node: '>= 14.16'}
+
+  perfect-debounce@2.1.0:
+    resolution: {integrity: sha512-LjgdTytVFXeUgtHZr9WYViYSM/g8MkcTPYDlPa3cDqMirHjKiSZPYd6DoL7pK8AJQr+uWkQvCjHNdiMqsrJs+g==}
 
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
-  picomatch@2.3.2:
-    resolution: {integrity: sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==}
+  picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
 
   picomatch@4.0.4:
     resolution: {integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==}
     engines: {node: '>=12'}
 
-  possible-typed-array-names@1.0.0:
-    resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==}
-    engines: {node: '>= 0.4'}
+  pkce-challenge@5.0.1:
+    resolution: {integrity: sha512-wQ0b/W4Fr01qtpHlqSqspcj3EhBvimsdh0KlHhH8HRZnMsEa0ea2fTULOXOS9ccQr3om+GcGRk4e+isrZWV8qQ==}
+    engines: {node: '>=16.20.0'}
+
+  pkg-types@1.3.1:
+    resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
+
+  pkg-types@2.3.1:
+    resolution: {integrity: sha512-y+ichcgc2LrADuhLNAx8DFjVfgz91pRxfZdI3UDhxHvcVEZsenLO+7XaU5vOp0u/7V/wZ+plyuQxtrDlZJ+yeg==}
+
+  playwright-core@1.60.0:
+    resolution: {integrity: sha512-9bW6zvX/m0lEbgTKJ6YppOKx8H3VOPBMOCFh2irXFOT4BbHgrx5hPjwJYLT40Lu+4qtD36qKc/Hn56StUW57IA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  playwright@1.60.0:
+    resolution: {integrity: sha512-hheHdokM8cdqCb0lcE3s+zT4t4W+vvjpGxsZlDnikarzx8tSzMebh3UiFtgqwFwnTnjYQcsyMF8ei2mCO/tpeA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  pluralize@8.0.0:
+    resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
+    engines: {node: '>=4'}
+
+  pngjs@7.0.0:
+    resolution: {integrity: sha512-LKWqWJRhstyYo9pGvgor/ivk2w94eSjE3RGVuzLGlr3NmD8bf7RcYGze1mNdEHRP6TRP6rMuDHk5t44hnTRyow==}
+    engines: {node: '>=14.19.0'}
+
+  postcss-calc@10.1.1:
+    resolution: {integrity: sha512-NYEsLHh8DgG/PRH2+G9BTuUdtf9ViS+vdoQ0YA5OQdGsfN4ztiwtDWNtBl9EKeqNMFnIu8IKZ0cLxEQ5r5KVMw==}
+    engines: {node: ^18.12 || ^20.9 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.38
+
+  postcss-colormin@8.0.0:
+    resolution: {integrity: sha512-KKwMmsSgsmdYXqrjQeqL3tnuIFtctiR1GEMHdjNpDpz/TCRkkkok2mMcreK2zVV3l7POWOmAkR2xYHUpRUK1DA==}
+    engines: {node: ^22.11.0 || ^24.11.0 || >=26.0}
+    peerDependencies:
+      postcss: ^8.5.14
+
+  postcss-convert-values@8.0.0:
+    resolution: {integrity: sha512-Ohtj3rNZWawTRePv5NCHTy8VJSdJ/G/uKuxcxJreOMichuqcT6uEl2TAnopVeJCJ/c13jaSqg7m63yFLM5zBsA==}
+    engines: {node: ^22.11.0 || ^24.11.0 || >=26.0}
+    peerDependencies:
+      postcss: ^8.5.14
+
+  postcss-discard-comments@8.0.0:
+    resolution: {integrity: sha512-zGpvVLj2sbagEp+BTVETvAfkZdGVA6rALNujDK/WTIjdf1/rQOxOG8BBzkI8UQgnw8SkL6xffAfbtGMHFypadw==}
+    engines: {node: ^22.11.0 || ^24.11.0 || >=26.0}
+    peerDependencies:
+      postcss: ^8.5.14
+
+  postcss-discard-duplicates@8.0.0:
+    resolution: {integrity: sha512-zjRyYmNGI3PTipKBBtCgExlmZXQn49KvKoaiNnR2g+iXxeNk7GY5Js2ULtZXPrCYeqjPagrzKIBNcBocvXCR7g==}
+    engines: {node: ^22.11.0 || ^24.11.0 || >=26.0}
+    peerDependencies:
+      postcss: ^8.5.14
+
+  postcss-discard-empty@8.0.0:
+    resolution: {integrity: sha512-kxPJg6EqahbBvm+l7hpYYCtpsv8dlz7Tv6wJXUXZaeuY0WGS61DxfGdZR4uVB/Cx+yi3iOHQVSqpSHKMFaBg6Q==}
+    engines: {node: ^22.11.0 || ^24.11.0 || >=26.0}
+    peerDependencies:
+      postcss: ^8.5.14
+
+  postcss-discard-overridden@8.0.0:
+    resolution: {integrity: sha512-sW2OWH3l9p0FmBSVr228uztFseqroZxwgD7SGF0Ks0dRPDttSo3P8FK5ZBLtWBH2A5+chpB0J2fB/T8heKHLBw==}
+    engines: {node: ^22.11.0 || ^24.11.0 || >=26.0}
+    peerDependencies:
+      postcss: ^8.5.14
+
+  postcss-merge-longhand@8.0.0:
+    resolution: {integrity: sha512-YDmAmQ8H+ljfomVpSXvr9NA0GP01fraQJqjWBYoMVGg6rOT+PJLwPyeVo2ekn4WB4ZVSH5ddtK3DTRxbz6CFzg==}
+    engines: {node: ^22.11.0 || ^24.11.0 || >=26.0}
+    peerDependencies:
+      postcss: ^8.5.14
+
+  postcss-merge-rules@8.0.0:
+    resolution: {integrity: sha512-bgstL5mpi41dDpnYGDUcI3M814NWkCMcIWpwDqEHXkHg3BT7b4XRAfNEuwJncZOVn/67kVKvWzhfv/7xyrp2uQ==}
+    engines: {node: ^22.11.0 || ^24.11.0 || >=26.0}
+    peerDependencies:
+      postcss: ^8.5.14
+
+  postcss-minify-font-values@8.0.0:
+    resolution: {integrity: sha512-EnOHQEnSt6oH5NrL1DMFAQuwB2IOimFXTCzc9bKfUeH1jREbqIF5MAK4gQJQOC4mPUwJt4sWifAmNZ1qLu6j3Q==}
+    engines: {node: ^22.11.0 || ^24.11.0 || >=26.0}
+    peerDependencies:
+      postcss: ^8.5.14
+
+  postcss-minify-gradients@8.0.0:
+    resolution: {integrity: sha512-43iAnYIGk0ZjNx5X/rkIcHi6dhmu/vEjY0kqfUfxPuJRO+V7jx8uKIdcnL0dpfNoC5J9TSh3EtzLWbq0gpqnWA==}
+    engines: {node: ^22.11.0 || ^24.11.0 || >=26.0}
+    peerDependencies:
+      postcss: ^8.5.14
+
+  postcss-minify-params@8.0.0:
+    resolution: {integrity: sha512-z7w4QO7G55l4vMUK1Lmx03GW7iyRLgf2V5Dz/7ioSPLnXRjeD+b7m0XfAXUGrbBYYrJ6bXPk+3LoX5u4JfAcSg==}
+    engines: {node: ^22.11.0 || ^24.11.0 || >=26.0}
+    peerDependencies:
+      postcss: ^8.5.14
+
+  postcss-minify-selectors@8.0.1:
+    resolution: {integrity: sha512-c31D46811kTkQDxV1KTTow79axX6gj/01AY5G7cGZg3s31KvAwP13jEFXGAzQbJ7NvOFV1pRqEia6nrAdHU7qg==}
+    engines: {node: ^22.11.0 || ^24.11.0 || >=26.0}
+    peerDependencies:
+      postcss: ^8.5.14
+
+  postcss-normalize-charset@8.0.0:
+    resolution: {integrity: sha512-s88FUNDSUD8m0wBYvTQQcubVts6zhXwBU8zCD4vkRKiecd0v8cOjHVIF9r/i+5xzS/WG3f98qq4XsOM0JqvfLA==}
+    engines: {node: ^22.11.0 || ^24.11.0 || >=26.0}
+    peerDependencies:
+      postcss: ^8.5.14
+
+  postcss-normalize-display-values@8.0.0:
+    resolution: {integrity: sha512-gG2nBxD27fiw6Luinb1QYKdM/Co5GornRJgSD+JTwNH4PGKxImP0qyruDDav49aHUPLY3qrL3qN3LvybO7IzxQ==}
+    engines: {node: ^22.11.0 || ^24.11.0 || >=26.0}
+    peerDependencies:
+      postcss: ^8.5.14
+
+  postcss-normalize-positions@8.0.0:
+    resolution: {integrity: sha512-t/wGqpehS20Ke7kc4QAsWpH+AJjUdMK/V5qV2RhrXkj8hO/fT1t1MJ8NL7sedWYk7ZqC7eISEJQonW5j0tU1MQ==}
+    engines: {node: ^22.11.0 || ^24.11.0 || >=26.0}
+    peerDependencies:
+      postcss: ^8.5.14
+
+  postcss-normalize-repeat-style@8.0.0:
+    resolution: {integrity: sha512-3ebOmGdCYKrBYyGKc1xhj0unEnW7beZpVU7JohVeGl7mTxR+7T6egpaawTWAVsB0pEIhcsbJVOjPKCJSoRO6Zg==}
+    engines: {node: ^22.11.0 || ^24.11.0 || >=26.0}
+    peerDependencies:
+      postcss: ^8.5.14
+
+  postcss-normalize-string@8.0.0:
+    resolution: {integrity: sha512-TvWCGZ/e04Tv31uJvOUtbexkfgUnqmQ3M2P5DkAaVzvOj+BvTkG2QjpA5Y71SL1SPxJcj4M23fNh+RDVCmG8kA==}
+    engines: {node: ^22.11.0 || ^24.11.0 || >=26.0}
+    peerDependencies:
+      postcss: ^8.5.14
+
+  postcss-normalize-timing-functions@8.0.0:
+    resolution: {integrity: sha512-uEfaXst5Xgqxv7geYUuz6vs9mn88K2NPY2RoIzM3BMmSjsdTSeppV9x2qIgrxsisdbSqF6IVhzI2occcte3hTA==}
+    engines: {node: ^22.11.0 || ^24.11.0 || >=26.0}
+    peerDependencies:
+      postcss: ^8.5.14
+
+  postcss-normalize-unicode@8.0.0:
+    resolution: {integrity: sha512-+WYngZaChEeTHZmWhmKtnJ4gTzWdINEaFcgWBnu6WdVu8Ftim8OBTcw768DuCC/3Aax9bZ9WkwrLGHym2Lzf+A==}
+    engines: {node: ^22.11.0 || ^24.11.0 || >=26.0}
+    peerDependencies:
+      postcss: ^8.5.14
+
+  postcss-normalize-url@8.0.0:
+    resolution: {integrity: sha512-4Mz9hZHn/QIB+YtFqTXrDmE2193GYxGb3F8uMfLvMicaEXCCUlDIJ658gFFJbqEGl9FYzwPtRiuNgbwlO9kkBg==}
+    engines: {node: ^22.11.0 || ^24.11.0 || >=26.0}
+    peerDependencies:
+      postcss: ^8.5.14
+
+  postcss-normalize-whitespace@8.0.0:
+    resolution: {integrity: sha512-V1f8tYnwIP5tscOXQFTKK8Y5EJ+R2GMpFJ6FjzwoKoQnhbqQy3IeSrDjJJb8JjVos8ut6Osi80Zybpayv/XjIQ==}
+    engines: {node: ^22.11.0 || ^24.11.0 || >=26.0}
+    peerDependencies:
+      postcss: ^8.5.14
+
+  postcss-ordered-values@8.0.0:
+    resolution: {integrity: sha512-Dg9+itb6lmD0bxqhQyHCtXAwYRh0wUrx6Mp4/BNXgkLoJmdYMmWi+V+Pypw79Q6iQhxA8KFMHqLBITQJV2gKMA==}
+    engines: {node: ^22.11.0 || ^24.11.0 || >=26.0}
+    peerDependencies:
+      postcss: ^8.5.14
+
+  postcss-reduce-initial@8.0.0:
+    resolution: {integrity: sha512-DChcE9d528AKrlpCTHjhsAiOsWCk4H9ApHPS1QqRT3praObWTiWyn6W1UddGpc46K9LQnHwUu4YwaPUukGtXVA==}
+    engines: {node: ^22.11.0 || ^24.11.0 || >=26.0}
+    peerDependencies:
+      postcss: ^8.5.14
+
+  postcss-reduce-transforms@8.0.0:
+    resolution: {integrity: sha512-cLZT0som7vvumQT9XQCnSKOSnRinNQZd1Hm+J723Ney13E8CIydDhw6JwzsjPtgnYThTqn9Q45906gz6wxaAsw==}
+    engines: {node: ^22.11.0 || ^24.11.0 || >=26.0}
+    peerDependencies:
+      postcss: ^8.5.14
+
+  postcss-selector-parser@7.1.1:
+    resolution: {integrity: sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==}
+    engines: {node: '>=4'}
+
+  postcss-svgo@8.0.0:
+    resolution: {integrity: sha512-Q2fMSYEiNE1ioDc/3sxvI24NdgA/MJno2XLNpOxgv8aCcJbym8mZY10/lDY5+AWCIc3Aiqzy2Wcp9/zaIXBZgQ==}
+    engines: {node: ^22.11.0 || ^24.11.0 || >=26.0}
+    peerDependencies:
+      postcss: ^8.5.14
+
+  postcss-unique-selectors@8.0.0:
+    resolution: {integrity: sha512-iObuolUX+ITJfMU2QQFQdh31JgSjNLPNjVs6YGAqBHvOvAWXMMNget6donQl83aQaeS32i5XeKZURUW/WBxIUw==}
+    engines: {node: ^22.11.0 || ^24.11.0 || >=26.0}
+    peerDependencies:
+      postcss: ^8.5.14
+
+  postcss-value-parser@4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
   postcss@8.5.15:
     resolution: {integrity: sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==}
     engines: {node: ^10 || ^12 || >=14}
 
-  postcss@8.5.6:
-    resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
-    engines: {node: ^10 || ^12 || >=14}
+  powershell-utils@0.1.0:
+    resolution: {integrity: sha512-dM0jVuXJPsDN6DvRpea484tCUaMiXWjuCn++HGTqUWzGDjv5tZkEZldAJ/UMlqRYGFrD/etByo4/xOuC/snX2A==}
+    engines: {node: '>=20'}
 
   prebuild-install@7.1.2:
     resolution: {integrity: sha512-UnNke3IQb6sgarcZIDU3gbMeTp/9SSU1DAIkil7PrqG1vZlBtY5msYccSKSHDqa3hNg436IXK+SNImReuA1wEQ==}
@@ -3505,11 +7023,23 @@ packages:
     deprecated: No longer maintained. Please contact the author of the relevant native addon; alternatives are available.
     hasBin: true
 
-  prettier@3.6.2:
-    resolution: {integrity: sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==}
+  prelude-ls@1.2.1:
+    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
+    engines: {node: '>= 0.8.0'}
+
+  prettier@3.8.1:
+    resolution: {integrity: sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==}
     engines: {node: '>=14'}
     hasBin: true
 
+  pretty-bytes@7.1.0:
+    resolution: {integrity: sha512-nODzvTiYVRGRqAOvE84Vk5JDPyyxsVk0/fbA/bq7RqlnhksGpset09XTxbpvLTIjoaF7K8Z8DG8yHtKGTPSYRw==}
+    engines: {node: '>=20'}
+
+  pretty-format@27.5.1:
+    resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
   proc-log@6.1.0:
     resolution: {integrity: sha512-iG+GYldRf2BQ0UDUAd6JQ/RwzaQy6mXmsk/IzlYyal4A4SNFw54MeH4/tLkF4I5WoWG9SQwuqWzS99jaFQHBuQ==}
     engines: {node: ^20.17.0 || >=22.9.0}
@@ -3517,20 +7047,69 @@ packages:
   process-nextick-args@2.0.1:
     resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
 
-  promise-retry@2.0.1:
-    resolution: {integrity: sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==}
-    engines: {node: '>=10'}
+  process@0.11.10:
+    resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
+    engines: {node: '>= 0.6.0'}
+
+  promise@7.3.1:
+    resolution: {integrity: sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==}
+
+  proper-lockfile@4.1.2:
+    resolution: {integrity: sha512-TjNPblN4BwAWMXU8s9AEz4JmQxnD1NNL7bNOY/AKUzyamc379FWASUhc/K1pL2noVb+XmZKLL68cjzLsiOAMaA==}
+
+  property-information@7.1.0:
+    resolution: {integrity: sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==}
 
   proto-list@1.2.4:
     resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
 
-  protobufjs@8.0.0:
-    resolution: {integrity: sha512-jx6+sE9h/UryaCZhsJWbJtTEy47yXoGNYI4z8ZaRncM0zBKeRqjO2JEcOUYwrYGb1WLhXM1FfMzW3annvFv0rw==}
+  protobufjs@8.5.0:
+    resolution: {integrity: sha512-df1jWDPA5VIBNRtuAHjqr09f2qN5D4Vke1wYqOQg1XJ7ZDpA7BD6L7E4tyChgGRLB5hqk2m79Zsy0WHwV9a84A==}
     engines: {node: '>=12.0.0'}
 
   protocols@2.0.1:
     resolution: {integrity: sha512-/XJ368cyBJ7fzLMwLKv1e4vLxOju2MNAIokcr7meSaNcVbWz/CPcW22cP04mwxOErdA5mwjA8Q6w/cdAQxVn7Q==}
 
+  proxy-addr@2.0.7:
+    resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
+    engines: {node: '>= 0.10'}
+
+  pug-attrs@3.0.0:
+    resolution: {integrity: sha512-azINV9dUtzPMFQktvTXciNAfAuVh/L/JCl0vtPCwvOA21uZrC08K/UnmrL+SXGEVc1FwzjW62+xw5S/uaLj6cA==}
+
+  pug-code-gen@3.0.4:
+    resolution: {integrity: sha512-6okWYIKdasTyXICyEtvobmTZAVX57JkzgzIi4iRJlin8kmhG+Xry2dsus+Mun/nGCn6F2U49haHI5mkELXB14g==}
+
+  pug-error@2.1.0:
+    resolution: {integrity: sha512-lv7sU9e5Jk8IeUheHata6/UThZ7RK2jnaaNztxfPYUY+VxZyk/ePVaNZ/vwmH8WqGvDz3LrNYt/+gA55NDg6Pg==}
+
+  pug-filters@4.0.0:
+    resolution: {integrity: sha512-yeNFtq5Yxmfz0f9z2rMXGw/8/4i1cCFecw/Q7+D0V2DdtII5UvqE12VaZ2AY7ri6o5RNXiweGH79OCq+2RQU4A==}
+
+  pug-lexer@5.0.1:
+    resolution: {integrity: sha512-0I6C62+keXlZPZkOJeVam9aBLVP2EnbeDw3An+k0/QlqdwH6rv8284nko14Na7c0TtqtogfWXcRoFE4O4Ff20w==}
+
+  pug-linker@4.0.0:
+    resolution: {integrity: sha512-gjD1yzp0yxbQqnzBAdlhbgoJL5qIFJw78juN1NpTLt/mfPJ5VgC4BvkoD3G23qKzJtIIXBbcCt6FioLSFLOHdw==}
+
+  pug-load@3.0.0:
+    resolution: {integrity: sha512-OCjTEnhLWZBvS4zni/WUMjH2YSUosnsmjGBB1An7CsKQarYSWQ0GCVyd4eQPMFJqZ8w9xgs01QdiZXKVjk92EQ==}
+
+  pug-parser@6.0.0:
+    resolution: {integrity: sha512-ukiYM/9cH6Cml+AOl5kETtM9NR3WulyVP2y4HOU45DyMim1IeP/OOiyEWRr6qk5I5klpsBnbuHpwKmTx6WURnw==}
+
+  pug-runtime@3.0.1:
+    resolution: {integrity: sha512-L50zbvrQ35TkpHwv0G6aLSuueDRwc/97XdY8kL3tOT0FmhgG7UypU3VztfV/LATAvmUfYi4wNxSajhSAeNN+Kg==}
+
+  pug-strip-comments@2.0.0:
+    resolution: {integrity: sha512-zo8DsDpH7eTkPHCXFeAk1xZXJbyoTfdPlNR0bK7rpOMuhBYb0f5qUVCO1xlsitYd3w5FQTK7zpNVKb3rZoUrrQ==}
+
+  pug-walk@2.0.0:
+    resolution: {integrity: sha512-yYELe9Q5q9IQhuvqsZNwA5hfPkMJ8u92bQLIMcsMxf/VADjNtEYptU+inlufAFYcWdHlwNfZOEnOOQrZrcyJCQ==}
+
+  pug@3.0.4:
+    resolution: {integrity: sha512-kFfq5mMzrS7+wrl5pLJzZEzemx34OQ0w4SARfhy/3yxTlhbstsudDwJzhf1hP02yHzbjoVMSXUj/Sz6RNfMyXg==}
+
   pump@3.0.0:
     resolution: {integrity: sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==}
 
@@ -3542,38 +7121,56 @@ packages:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
 
-  qs@6.12.1:
-    resolution: {integrity: sha512-zWmv4RSuB9r2mYQw3zxQuHWeU+42aKi1wWig/j4ele4ygELZ7PEO6MM7rim9oAQH2A5MWfsAVf/jPvTPgCbvUQ==}
+  qs@6.15.2:
+    resolution: {integrity: sha512-Rzq0KEyX/w/tEybncDgdkZrJgVUsUMk3xjh3t5bv3S1HTAtg+uOYt72+ZfwiQwKdysThkTBdL/rTi6HDmX9Ddw==}
     engines: {node: '>=0.6'}
 
+  quansync@0.2.11:
+    resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==}
+
   quansync@1.0.0:
     resolution: {integrity: sha512-5xZacEEufv3HSTPQuchrvV6soaiACMFnq1H8wkVioctoH3TRha9Sz66lOxRwPK/qZj7HPiSveih9yAyh98gvqA==}
 
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
-  quick-lru@4.0.1:
-    resolution: {integrity: sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==}
-    engines: {node: '>=8'}
-
   quick-lru@5.1.1:
     resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==}
     engines: {node: '>=10'}
 
+  radix3@1.1.2:
+    resolution: {integrity: sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==}
+
+  range-parser@1.2.1:
+    resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
+    engines: {node: '>= 0.6'}
+
+  raw-body@3.0.2:
+    resolution: {integrity: sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==}
+    engines: {node: '>= 0.10'}
+
+  rc9@3.0.1:
+    resolution: {integrity: sha512-gMDyleLWVE+i6Sgtc0QbbY6pEKqYs97NGi6isHQPqYlLemPoO8dxQ3uGi0f4NiP98c+jMW6cG1Kx9dDwfvqARQ==}
+
   rc@1.2.8:
     resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
     hasBin: true
 
-  re2@1.23.2:
-    resolution: {integrity: sha512-ds5iwbnfsmyiNDtuljBNAva54O4jhR77jL5bSM73NnsWQHkYoGWuePiZTrt6O3xXAHtrB/fviNQsPGRei6031w==}
+  re2@1.24.1:
+    resolution: {integrity: sha512-uRl9cLDKuobJQp+6lVz7E3AyVszubUJ0fqAMWout4ocUWTIFvdHgpqLwwMh/vuNGGGJGh2p2mJZJIQr9am9M/A==}
+    engines: {node: '>=22'}
 
-  read-pkg-up@7.0.1:
-    resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
-    engines: {node: '>=8'}
+  react-dom@19.2.5:
+    resolution: {integrity: sha512-J5bAZz+DXMMwW/wV3xzKke59Af6CHY7G4uYLN1OvBcKEsWOs4pQExj86BBKamxl/Ik5bx9whOrvBlSDfWzgSag==}
+    peerDependencies:
+      react: ^19.2.5
 
-  read-pkg@5.2.0:
-    resolution: {integrity: sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==}
-    engines: {node: '>=8'}
+  react-is@17.0.2:
+    resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
+
+  react@19.2.5:
+    resolution: {integrity: sha512-llUJLzz1zTUBrskt2pwZgLq59AemifIftw4aB7JxOqf1HY2FDaGDxgwpAPVzHU1kdWabH7FauP4i1oEeer2WCA==}
+    engines: {node: '>=0.10.0'}
 
   read-yaml-file@2.1.0:
     resolution: {integrity: sha512-UkRNRIwnhG+y7hpqnycCL/xbTk7+ia9VuVTC0S+zVbwd65DI9eUpRMfsWIGrCWxTU/mi+JW8cHQCrv+zfCbEPQ==}
@@ -3586,21 +7183,61 @@ packages:
     resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
     engines: {node: '>= 6'}
 
-  readdirp@4.1.2:
-    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
-    engines: {node: '>= 14.18.0'}
+  readable-stream@4.7.0:
+    resolution: {integrity: sha512-oIGGmcpTLwPga8Bn6/Z75SVaH1z5dUut2ibSyAMVhmUggWpmDn2dapB0n7f8nwaSiRtepAsfJyfXIO5DCVAODg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  readdir-glob@1.1.3:
+    resolution: {integrity: sha512-v05I2k7xN8zXvPD9N+z/uhXPaj0sUFCe2rcWZIpBsqxfP7xXFQ0tipAd/wjj1YxWyWtUS5IDJpOG82JKt2EAVA==}
+
+  readdirp@5.0.0:
+    resolution: {integrity: sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==}
+    engines: {node: '>= 20.19.0'}
+
+  recast@0.23.11:
+    resolution: {integrity: sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==}
+    engines: {node: '>= 4'}
 
   redent@3.0.0:
     resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
     engines: {node: '>=8'}
 
-  redis@5.10.0:
-    resolution: {integrity: sha512-0/Y+7IEiTgVGPrLFKy8oAEArSyEJkU0zvgV5xyi9NzNQ+SLZmyFbUsWIbgPcd4UdUh00opXGKlXJwMmsis5Byw==}
-    engines: {node: '>= 18'}
+  redis-errors@1.2.0:
+    resolution: {integrity: sha512-1qny3OExCf0UvUV/5wpYKf2YwPcOqXzkwKKSmKHiE6ZMQs5heeE/c8eXK+PNllPvmjgAbfnsbpkGZWy8cBpn9w==}
+    engines: {node: '>=4'}
+
+  redis-parser@3.0.0:
+    resolution: {integrity: sha512-DJnGAeenTdpMEH6uAJRK/uiyEIH9WVsUmoLwzudwGJUwZPp80PDBWPHXSAGNPwNvIXAbe7MSUB1zQFugFml66A==}
+    engines: {node: '>=4'}
+
+  refa@0.12.1:
+    resolution: {integrity: sha512-J8rn6v4DBb2nnFqkqwy6/NnTYMcgLA+sLr0iIO41qpv0n+ngb7ksag2tMRl0inb1bbO/esUwzW1vbJi7K0sI0g==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
 
   regenerator-runtime@0.14.1:
     resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
 
+  regex-recursion@6.0.2:
+    resolution: {integrity: sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==}
+
+  regex-utilities@2.3.0:
+    resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==}
+
+  regex@6.1.0:
+    resolution: {integrity: sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg==}
+
+  regexp-ast-analysis@0.7.1:
+    resolution: {integrity: sha512-sZuz1dYW/ZsfG17WSAG7eS85r5a0dDsvg+7BiiYR5o6lKCAtUrEwdmRmaGF6rwVj3LcmAeYkOWKEPlbPzN3Y3A==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+
+  regexp-tree@0.1.27:
+    resolution: {integrity: sha512-iETxpjK6YoRWJG5o6hXLwvjYAoW+FEZn9os0PD/b6AP6xQwsa/Y7lCVgIixBbUPMfhu+i2LtdeAqVTgGlQarfA==}
+    hasBin: true
+
+  regjsparser@0.13.1:
+    resolution: {integrity: sha512-dLsljMd9sqwRkby8zhO1gSg3PnJIBFid8f4CQj/sXx+7cKx+E7u0PKhZ+U4wmhx7EfmtvnA318oVaIkAB1lRJw==}
+    hasBin: true
+
   remark-gfm@4.0.1:
     resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}
 
@@ -3616,8 +7253,8 @@ packages:
   remark@15.0.1:
     resolution: {integrity: sha512-Eht5w30ruCXgFmxVUSlNWQ9iiimq07URKeFS3hNc8cUWy1llX4KDWfyEDZRycMc+znsN9Ux5/tJ/BFdgdOwA3A==}
 
-  renovate@43.12.0:
-    resolution: {integrity: sha512-WpoG7NQMnoN3+Y8MpWVYWeOwYIxywrq/DBIiPyr6ThD3Wf6ChSxvdNO+fkCj/tDkzXfU2WSpTlK5SYh5ZZ5C7w==}
+  renovate@43.214.6:
+    resolution: {integrity: sha512-35M2gs8Mhzh4D/tMr0SyIN1pEcTsJWpYNteRykLxfEux9d/iBy2qQmDj6ovPel8vXGw9jhZHVymk1zgrthRmaA==}
     engines: {node: ^24.11.0, pnpm: ^10.0.0}
     hasBin: true
 
@@ -3632,6 +7269,10 @@ packages:
   resolve-alpn@1.2.1:
     resolution: {integrity: sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g==}
 
+  resolve-from@5.0.0:
+    resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
+    engines: {node: '>=8'}
+
   resolve-pkg-maps@1.0.0:
     resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
 
@@ -3642,6 +7283,10 @@ packages:
   responselike@2.0.1:
     resolution: {integrity: sha512-4gl03wn3hj1HP3yzgdI7d3lCkF95F21Pz4BPGvKHinyQzALR5CapwC8yIi0Rh58DEMQ/SguC03wFj2k0M/mHhw==}
 
+  responselike@4.0.2:
+    resolution: {integrity: sha512-cGk8IbWEAnaCpdAt1BHzJ3Ahz5ewDJa0KseTsE3qIRMJ3C698W8psM7byCeWVpd/Ha7FUYzuRVzXoKoM6nRUbA==}
+    engines: {node: '>=20'}
+
   retry@0.12.0:
     resolution: {integrity: sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==}
     engines: {node: '>= 4'}
@@ -3655,23 +7300,22 @@ packages:
     deprecated: Rimraf versions prior to v4 are no longer supported
     hasBin: true
 
-  rimraf@5.0.10:
-    resolution: {integrity: sha512-l0OE8wL34P4nJH/H2ffoaniAokM2qSmrtXHmlpvYr5AVVX8msAyW0l8NVJFDxlSK4u3Uh/f41cQheDVdnYijwQ==}
-    hasBin: true
-
   roarr@2.15.4:
     resolution: {integrity: sha512-CHhPh+UNHD2GTXNYhPWLnU8ONHdI+5DI+4EYIAOaiD63rHeYlZvyh8P+in5999TTSFgUYuKUAjzRI4mdh/p+2A==}
     engines: {node: '>=8.0'}
 
-  rolldown-plugin-dts@0.13.14:
-    resolution: {integrity: sha512-wjNhHZz9dlN6PTIXyizB6u/mAg1wEFMW9yw7imEVe3CxHSRnNHVyycIX0yDEOVJfDNISLPbkCIPEpFpizy5+PQ==}
-    engines: {node: '>=20.18.0'}
+  rolldown-plugin-dts@0.25.2:
+    resolution: {integrity: sha512-nMhN/R+vmR8GM45ZW1FWMSjRTSDDn/6w4GTf8RNrEFCBdl8B1kySWrU1ixPtbwzXoRlcO+R/S88VgXuJQwfdDg==}
+    engines: {node: ^22.18.0 || >=24.0.0}
     peerDependencies:
-      '@typescript/native-preview': '>=7.0.0-dev.20250601.1'
-      rolldown: ^1.0.0-beta.9
-      typescript: ^5.0.0
-      vue-tsc: ^2.2.0 || ^3.0.0
+      '@ts-macro/tsc': ^0.3.6
+      '@typescript/native-preview': '>=7.0.0-dev.20260325.1'
+      rolldown: ^1.0.0
+      typescript: ^5.0.0 || ^6.0.0
+      vue-tsc: ~3.2.0
     peerDependenciesMeta:
+      '@ts-macro/tsc':
+        optional: true
       '@typescript/native-preview':
         optional: true
       typescript:
@@ -3679,16 +7323,50 @@ packages:
       vue-tsc:
         optional: true
 
-  rolldown@1.0.0-rc.4:
-    resolution: {integrity: sha512-V2tPDUrY3WSevrvU2E41ijZlpF+5PbZu4giH+VpNraaadsJGHa4fR6IFwsocVwEXDoAdIv5qgPPxgrvKAOIPtA==}
+  rolldown@1.0.0-rc.11:
+    resolution: {integrity: sha512-NRjoKMusSjfRbSYiH3VSumlkgFe7kYAa3pzVOsVYVFY3zb5d7nS+a3KGQ7hJKXuYWbzJKPVQ9Wxq2UvyK+ENpw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
 
-  rollup@4.61.0:
-    resolution: {integrity: sha512-T9mWdbWfQtp0B5lv/HX+wrhYsmXRlcWnXXmJbXqKJhlRaoS6KMhq0gpyzW4UJfclcxrEdLnTgjT2NjruLONu0g==}
+  rolldown@1.0.3:
+    resolution: {integrity: sha512-i00lAJ2ks1BYr7rjNjKC7BcqAS7nVfiT3QX1SI5aY+AFHblCmaUf9OE9dbdzDvW6dJxbi2ZCZiy9v3CcwOiX3g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+
+  rolldown@1.1.0:
+    resolution: {integrity: sha512-zpMvlJhs5PkXRTtKc0CaLBVI9AR/VDiJFpM+kx//hgToEca7FgMlGjaRIisXBcb19T76LswgmKECSQ96hjWr5A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+
+  rollup-plugin-visualizer@7.0.1:
+    resolution: {integrity: sha512-UJUT4+1Ho4OcWmPYU3sYXgUqI8B8Ayfe06MX7y0qCJ1K8aGoKtR/NDd/2nZqM7ADkrzny+I99Ul7GgyoiVNAgg==}
+    engines: {node: '>=22'}
+    hasBin: true
+    peerDependencies:
+      rolldown: 1.x || ^1.0.0-beta || ^1.0.0-rc
+      rollup: 2.x || 3.x || 4.x
+    peerDependenciesMeta:
+      rolldown:
+        optional: true
+      rollup:
+        optional: true
+
+  rollup@4.61.1:
+    resolution: {integrity: sha512-I4KW6iuRpuu2uHBLraZ1wNZe0DP7lnRha+VJ9tNaYVaVgKhW0aI3h4RYnoRPeql0flHm/Co55b7snEDcOfOJrA==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
+  rou3@0.8.1:
+    resolution: {integrity: sha512-ePa+XGk00/3HuCqrEnK3LxJW7I0SdNg6EFzKUJG73hMAdDcOUC/i/aSz7LSDwLrGr33kal/rqOGydzwl6U7zBA==}
+
+  router@2.2.0:
+    resolution: {integrity: sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==}
+    engines: {node: '>= 18'}
+
+  run-applescript@7.1.0:
+    resolution: {integrity: sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==}
+    engines: {node: '>=18'}
+
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
@@ -3708,14 +7386,21 @@ packages:
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
-  sax@1.4.4:
-    resolution: {integrity: sha512-1n3r/tGXO6b6VXMdFT54SHzT9ytu9yr7TaELowdYpMqY/Ao7EnlQGmAQ1+RatX7Tkkdm6hONI2owqNx2aZj5Sw==}
+  sax@1.6.0:
+    resolution: {integrity: sha512-6R3J5M4AcbtLUdZmRv2SygeVaM7IhrLXu9BmnOGmmACak8fiUtOsYNWUS4uK7upbmHIBbLBeFeI//477BKLBzA==}
     engines: {node: '>=11.0.0'}
 
   saxes@6.0.0:
     resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
     engines: {node: '>=v12.22.7'}
 
+  scheduler@0.27.0:
+    resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
+
+  scslre@0.3.0:
+    resolution: {integrity: sha512-3A6sD0WYP7+QrjbfNA2FN3FsOaGGFoekCVgTyypy53gPxhbkCIjtO6YWgdrfM+n/8sI8JeXZOIxsHjMTNxQ4nQ==}
+    engines: {node: ^14.0.0 || >=16.0.0}
+
   scule@1.3.0:
     resolution: {integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==}
 
@@ -3729,31 +7414,45 @@ packages:
   semver-utils@1.1.4:
     resolution: {integrity: sha512-EjnoLE5OGmDAVV/8YDoN5KiajNadjzIp9BAHOhYeQHt7j0UWxjmgsx4YD48wp4Ue1Qogq38F1GNUJNqF1kKKxA==}
 
-  semver@5.7.2:
-    resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
-    hasBin: true
-
   semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
 
-  semver@7.7.2:
-    resolution: {integrity: sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==}
+  semver@7.8.1:
+    resolution: {integrity: sha512-rkVq3IXh+4FDGch+KwzX3aV9W3kO54GyEgpvBzSyctDA6Xtd7RJQV1xmXbeQp5v7+VzLOfVqiutSE6GICgPFvg==}
     engines: {node: '>=10'}
     hasBin: true
 
-  semver@7.7.4:
-    resolution: {integrity: sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==}
+  semver@7.8.2:
+    resolution: {integrity: sha512-c8jsqUZm3omBOI66G90z1Dyw5z622G8oLG+omfsHBJf3CWQTlOcwOjvOG6wtiNfW6anKm/eA39LMwMtMez2TiQ==}
     engines: {node: '>=10'}
     hasBin: true
 
+  send@1.2.1:
+    resolution: {integrity: sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==}
+    engines: {node: '>= 18'}
+
   serialize-error@7.0.1:
     resolution: {integrity: sha512-8I8TjW5KMOKsZQTvoxjuSIa7foAwPWGOts+6o7sgjz41/qMD9VQHEDxi6PBvK2l0MXUmqZyNpUK+T2tQaaElvw==}
     engines: {node: '>=10'}
 
-  set-function-length@1.2.2:
-    resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
-    engines: {node: '>= 0.4'}
+  serialize-javascript@7.0.5:
+    resolution: {integrity: sha512-F4LcB0UqUl1zErq+1nYEEzSHJnIwb3AF2XWB94b+afhrekOUijwooAYqFyRbjYkm2PAKBabx6oYv/xDxNi8IBw==}
+    engines: {node: '>=20.0.0'}
+
+  seroval@1.5.4:
+    resolution: {integrity: sha512-46uFvgrXTVxZcUorgSSRZ4y+ieqLLQRMlG4bnCZKW3qI6BZm7Rg4ntMW4p1mILEEBZWrFlcpp0AyIIlM6jD9iw==}
+    engines: {node: '>=10'}
+
+  serve-placeholder@2.0.2:
+    resolution: {integrity: sha512-/TMG8SboeiQbZJWRlfTCqMs2DD3SZgWp0kDQePz9yUuCnDfDh/92gf7/PxGhzXTKBIPASIHxFcZndoNbp6QOLQ==}
+
+  serve-static@2.2.1:
+    resolution: {integrity: sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==}
+    engines: {node: '>= 18'}
+
+  setprototypeof@1.2.0:
+    resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
 
   shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
@@ -3763,11 +7462,31 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
+  shell-quote@1.8.3:
+    resolution: {integrity: sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==}
+    engines: {node: '>= 0.4'}
+
+  shiki@4.2.0:
+    resolution: {integrity: sha512-hjNax6o/ylDy9lefQEaSDtzaT3iVNtZ3WmpQnbuQNoG4xvnSKf2kSKbihZVO4JRG1TTMejs7CmNRYlWgAL66pQ==}
+    engines: {node: '>=20'}
+
   shlex@3.0.0:
     resolution: {integrity: sha512-jHPXQQk9d/QXCvJuLPYMOYWez3c43sORAgcIEoV7bFv5AJSJRAOyw5lQO12PMfd385qiLRCaDt7OtEzgrIGZUA==}
 
-  side-channel@1.0.6:
-    resolution: {integrity: sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==}
+  side-channel-list@1.0.1:
+    resolution: {integrity: sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-map@1.0.1:
+    resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-weakmap@1.0.2:
+    resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
+    engines: {node: '>= 0.4'}
+
+  side-channel@1.1.0:
+    resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
     engines: {node: '>= 0.4'}
 
   siginfo@2.0.0:
@@ -3786,28 +7505,27 @@ packages:
   simple-get@4.0.1:
     resolution: {integrity: sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==}
 
-  simple-git@3.30.0:
-    resolution: {integrity: sha512-q6lxyDsCmEal/MEGhP1aVyQ3oxnagGlBDOVSIB4XUVLl1iZh0Pah6ebC9V4xBap/RfgP2WlI8EKs0WS0rMEJHg==}
+  simple-git@3.36.0:
+    resolution: {integrity: sha512-cGQjLjK8bxJw4QuYT7gxHw3/IouVESbhahSsHrX97MzCL1gu2u7oy38W6L2ZIGECEfIBG4BabsWDPjBxJENv9Q==}
 
   sirv@3.0.2:
     resolution: {integrity: sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==}
     engines: {node: '>=18'}
 
-  slugify@1.6.6:
-    resolution: {integrity: sha512-h+z7HKHYXj6wJU+AnS/+IH8Uh9fdcX1Lrhg1/VMdf9PwoBQXFcXiAdsy2tSK0P6gKwJLXp02r90ahUCqHk9rrw==}
+  sisteransi@1.0.5:
+    resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
+
+  slash@5.1.0:
+    resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
+    engines: {node: '>=14.16'}
+
+  slugify@1.6.9:
+    resolution: {integrity: sha512-vZ7rfeehZui7wQs438JXBckYLkIIdfHOXsaVEUMyS5fHo1483l1bMdo0EDSWYclY0yZKFOipDy4KHuKs6ssvdg==}
     engines: {node: '>=8.0.0'}
 
-  smart-buffer@4.2.0:
-    resolution: {integrity: sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==}
-    engines: {node: '>= 6.0.0', npm: '>= 3.0.0'}
-
-  socks-proxy-agent@8.0.3:
-    resolution: {integrity: sha512-VNegTZKhuGq5vSD6XNKlbqWhyt/40CgoEw8XxD6dhnm8Jq9IEa3nIa4HwnM8XOqU0CdB0BwWVXusqiFXfHB3+A==}
-    engines: {node: '>= 14'}
-
-  socks@2.8.3:
-    resolution: {integrity: sha512-l5x7VUUWbjVFbafGLxPWkYsHIhEvmF85tbIeFZWc8ZPtoMyybuEhL7Jye/ooC4/d48FgOjSJXgsF/AJPYCW8Zw==}
-    engines: {node: '>= 10.0.0', npm: '>= 3.0.0'}
+  smob@1.6.1:
+    resolution: {integrity: sha512-KAkBqZl3c2GvNgNhcoyJae1aKldDW0LO279wF9bk1PnluRTETKBq0WyzRXxEhoQLk56yHaOY4JCBEKDuJIET5g==}
+    engines: {node: '>=20.0.0'}
 
   sort-keys@4.2.0:
     resolution: {integrity: sha512-aUYIEU/UviqPgc8mHR6IW1EGxkAXpeRETYcrzg8cLAvUPZcpAlleSXHV2mY7G12GphSH6Gzv+4MMVSSkbdteHg==}
@@ -3824,20 +7542,12 @@ packages:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
 
-  spdx-correct@3.2.0:
-    resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==}
+  source-map@0.7.6:
+    resolution: {integrity: sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==}
+    engines: {node: '>= 12'}
 
-  spdx-exceptions@2.5.0:
-    resolution: {integrity: sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==}
-
-  spdx-expression-parse@3.0.1:
-    resolution: {integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==}
-
-  spdx-license-ids@3.0.17:
-    resolution: {integrity: sha512-sh8PWc/ftMqAAdFiBu6Fy6JUOYjqDJBJvIhpfDMyHrr0Rbp5liZqd4TjtQ/RgfLjKFZb+LMx5hpml5qOWy0qvg==}
-
-  split2@3.2.2:
-    resolution: {integrity: sha512-9NThjpgZnifTkJpzTZ7Eue85S49QwpNhZTq6GRJwObb6jnLFNGB7Qm73V5HewTROPyxD0C29xqmaI68bQtV+hg==}
+  space-separated-tokens@2.0.2:
+    resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
 
   sprintf-js@1.0.3:
     resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
@@ -3845,19 +7555,50 @@ packages:
   sprintf-js@1.1.3:
     resolution: {integrity: sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==}
 
+  srvx@0.11.16:
+    resolution: {integrity: sha512-bp07zRuycfTY43IjAvvTFnmnJi8ikW0VFiHwOhhYcVW/L4xQ1XY4PAd4Nuum1rsA17C39zL7x+CDhrn5AL32Rw==}
+    engines: {node: '>=20.16.0'}
+    hasBin: true
+
   ssri@13.0.1:
     resolution: {integrity: sha512-QUiRf1+u9wPTL/76GTYlKttDEBWV1ga9ZXW8BG6kfdeyyM8LGPix9gROyg9V2+P0xNyF3X2Go526xKFdMZrHSQ==}
     engines: {node: ^20.17.0 || >=22.9.0}
 
+  stable-hash-x@0.2.0:
+    resolution: {integrity: sha512-o3yWv49B/o4QZk5ZcsALc6t0+eCelPc44zZsLtCQnZPDwFpDYSWcDnrv2TtMmMbQ7uKo3J0HTURCqckw23czNQ==}
+    engines: {node: '>=12.0.0'}
+
   stackback@0.0.2:
     resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
 
-  std-env@3.10.0:
-    resolution: {integrity: sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==}
+  standard-as-callback@2.1.0:
+    resolution: {integrity: sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A==}
+
+  statuses@2.0.2:
+    resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
+    engines: {node: '>= 0.8'}
 
   std-env@4.1.0:
     resolution: {integrity: sha512-Rq7ybcX2RuC55r9oaPVEW7/xu3tj8u4GeBYHBWCychFtzMIr86A7e3PPEBPT37sHStKX3+TiX/Fr/ACmJLVlLQ==}
 
+  storybook@10.4.2:
+    resolution: {integrity: sha512-5Ax5vbHxFgMBGGhQDm75Rrumm/HZC4ICFhMcJaM0UlqnC/4FKj/IaZtImZFupknyiiyUEcWHPQFA2kX3/VSv1A==}
+    hasBin: true
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      prettier: ^2 || ^3
+      vite-plus: ^0.1.15
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      prettier:
+        optional: true
+      vite-plus:
+        optional: true
+
+  streamx@2.25.0:
+    resolution: {integrity: sha512-0nQuG6jf1w+wddNEEXCF4nTg3LtufWINB5eFEN+5TNZW7KWJp6x87+JFL43vaAUPyCfH1wID+mNVyW6OHtFamg==}
+
   string-width@4.2.3:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
     engines: {node: '>=8'}
@@ -3866,12 +7607,19 @@ packages:
     resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
     engines: {node: '>=12'}
 
+  string-width@7.2.0:
+    resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
+    engines: {node: '>=18'}
+
   string_decoder@1.1.1:
     resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
 
   string_decoder@1.3.0:
     resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
 
+  stringify-entities@4.0.4:
+    resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
+
   strip-ansi@6.0.1:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
@@ -3895,6 +7643,10 @@ packages:
     resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
     engines: {node: '>=8'}
 
+  strip-indent@4.1.1:
+    resolution: {integrity: sha512-SlyRoSkdh1dYP0PzclLE7r0M9sgbFKKMFXpFRUMNuKhQSbC6VQIGzq3E0qsfvGJaUFJPGv6Ws1NZ/haTAjfbMA==}
+    engines: {node: '>=12'}
+
   strip-json-comments@2.0.1:
     resolution: {integrity: sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==}
     engines: {node: '>=0.10.0'}
@@ -3903,8 +7655,24 @@ packages:
     resolution: {integrity: sha512-1tB5mhVo7U+ETBKNf92xT4hrQa3pm0MZ0PQvuDnWgAAGHDsfp4lPSpiS6psrSiet87wyGPh9ft6wmhOMQ0hDiw==}
     engines: {node: '>=14.16'}
 
-  strnum@2.1.1:
-    resolution: {integrity: sha512-7ZvoFTiCnGxBtDqJ//Cu6fWtZtc7Y3x+QOirG15wztbdngGSkht27o2pyGWrVy0b4WAy3jbKmnoK6g5VlVNUUw==}
+  strip-literal@3.1.0:
+    resolution: {integrity: sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg==}
+
+  strnum@2.3.0:
+    resolution: {integrity: sha512-ums3KNd42PGyx5xaoVTO1mjU1bH3NpY4vsrVlnv9PNGqQj8wd7rJ6nEypLrJ7z5vxK5RP0yMLo6J/Gsm62DI5Q==}
+
+  structured-clone-es@2.0.0:
+    resolution: {integrity: sha512-5UuAHmBLXYPCl22xWJrFuGmIhBKQzxISPVz6E7nmTmTcAOpUzlbjKJsRrCE4vADmMQ0dzeCnlWn9XufnAGf76Q==}
+
+  stylehacks@8.0.0:
+    resolution: {integrity: sha512-sWyjaJvBqHoVKYPbQ8JRvrGSPaYWtWrJsU+fGVtwKB1GE1rRPu3rC7T6UCuXLoL00Dwb+tsHe2T904r8Vnsx8w==}
+    engines: {node: ^22.11.0 || ^24.11.0 || >=26.0}
+    peerDependencies:
+      postcss: ^8.5.14
+
+  supports-color@10.2.2:
+    resolution: {integrity: sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g==}
+    engines: {node: '>=18'}
 
   supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
@@ -3914,9 +7682,25 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  svgo@4.0.1:
+    resolution: {integrity: sha512-XDpWUOPC6FEibaLzjfe0ucaV0YrOjYotGJO1WpF0Zd+n6ZGEQUsSugaoLq9QkEZtAfQIxT42UChcssDVPP3+/w==}
+    engines: {node: '>=16'}
+    hasBin: true
+
   symbol-tree@3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
 
+  tagged-tag@1.0.0:
+    resolution: {integrity: sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==}
+    engines: {node: '>=20'}
+
+  tailwindcss@4.3.0:
+    resolution: {integrity: sha512-y6nxMGB1nMW9R6k96e5gdIFzcfL/gTJRNaqGes1YvkLnPVXzWgbqFF2yLC0T8G774n24cx3Pe8XrKoniCOAH+Q==}
+
+  tapable@2.3.3:
+    resolution: {integrity: sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==}
+    engines: {node: '>=6'}
+
   tar-fs@2.1.1:
     resolution: {integrity: sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==}
 
@@ -3924,45 +7708,42 @@ packages:
     resolution: {integrity: sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==}
     engines: {node: '>=6'}
 
-  tar@6.2.1:
-    resolution: {integrity: sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==}
-    engines: {node: '>=10'}
-    deprecated: Old versions of tar are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
+  tar-stream@3.1.8:
+    resolution: {integrity: sha512-U6QpVRyCGHva435KoNWy9PRoi2IFYCgtEhq9nmrPPpbRacPs9IH4aJ3gbrFC8dPcXvdSZ4XXfXT5Fshbp2MtlQ==}
 
   tar@7.5.7:
     resolution: {integrity: sha512-fov56fJiRuThVFXD6o6/Q354S7pnWMJIVlDBYijsTNx6jKSE4pvrDTs6lUnmGvNyfJwFQQwWy3owKz1ucIhveQ==}
     engines: {node: '>=18'}
     deprecated: Old versions of tar are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
 
+  teex@1.0.1:
+    resolution: {integrity: sha512-eYE6iEI62Ni1H8oIa7KlDU6uQBtqr4Eajni3wX7rpfXD8ysFx8z0+dri+KWEPWpBsxXfxu58x/0jvTVT1ekOSg==}
+
   terser@5.44.0:
     resolution: {integrity: sha512-nIVck8DK+GM/0Frwd+nIhZ84pR/BX7rmXMfYwyg+Sri5oGVE99/E3KvXqpC2xHFxyqXyGHTKBSioxxplrO4I4w==}
     engines: {node: '>=10'}
     hasBin: true
 
-  through2-concurrent@2.0.0:
-    resolution: {integrity: sha512-R5/jLkfMvdmDD+seLwN7vB+mhbqzWop5fAjx5IX8/yQq7VhBhzDmhXgaHAOnhnWkCpRMM7gToYHycB0CS/pd+A==}
+  text-decoder@1.2.7:
+    resolution: {integrity: sha512-vlLytXkeP4xvEq2otHeJfSQIRyWxo/oZGEbXrtEEF9Hnmrdly59sUbzZ/QgyWuLYHctCHxFF4tRQZNQ9k60ExQ==}
 
-  through2@2.0.5:
-    resolution: {integrity: sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==}
+  tiny-inflate@1.0.3:
+    resolution: {integrity: sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==}
 
-  through2@4.0.2:
-    resolution: {integrity: sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==}
+  tiny-invariant@1.3.3:
+    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
 
   tinybench@2.9.0:
     resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
 
-  tinyexec@1.0.2:
-    resolution: {integrity: sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg==}
-    engines: {node: '>=18'}
+  tinyclip@0.1.12:
+    resolution: {integrity: sha512-Ae3OVUqifDw0wBriIBS7yVaW44Dp6eSHQcyq4Igc7eN2TJH/2YsicswaW+J/OuMvhpDPOKEgpAZCjkb4hpoyeA==}
+    engines: {node: ^16.14.0 || >= 17.3.0}
 
   tinyexec@1.2.4:
     resolution: {integrity: sha512-SHf/r48b7vOrjve9PxJo3MN5v5yuyjHvdUcrQffT3WXMUfnGmHDVbC4k3sHJaJTgZCwpUplIaAo5ANtMyp3YHg==}
     engines: {node: '>=18'}
 
-  tinyglobby@0.2.15:
-    resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
-    engines: {node: '>=12.0.0'}
-
   tinyglobby@0.2.17:
     resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==}
     engines: {node: '>=12.0.0'}
@@ -3970,14 +7751,18 @@ packages:
   tinylogic@2.0.0:
     resolution: {integrity: sha512-dljTkiLLITtsjqBvTA1MRZQK/sGP4kI3UJKc3yA9fMzYbMF2RhcN04SeROVqJBIYYOoJMM8u0WDnhFwMSFQotw==}
 
-  tinyrainbow@3.0.3:
-    resolution: {integrity: sha512-PSkbLUoxOFRzJYjjxHJt9xro7D+iilgMX/C9lawzVuYiIdcihh9DXmVibBe8lmcFrRi/VzlPjBxbN7rH24q8/Q==}
+  tinyrainbow@2.0.0:
+    resolution: {integrity: sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==}
     engines: {node: '>=14.0.0'}
 
   tinyrainbow@3.1.0:
     resolution: {integrity: sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==}
     engines: {node: '>=14.0.0'}
 
+  tinyspy@4.0.4:
+    resolution: {integrity: sha512-azl+t0z7pw/z958Gy9svOTuzqIk6xq+NSheJzn5MMWtWTFywIacg2wUlzKFGtt3cthx0r2SxMK0yzJOR0IES7Q==}
+    engines: {node: '>=14.0.0'}
+
   tldts-core@7.0.23:
     resolution: {integrity: sha512-0g9vrtDQLrNIiCj22HSe9d4mLVG3g5ph5DZ8zCKBr4OtrspmNB6ss7hVyzArAeE88ceZocIEGkyW1Ime7fxPtQ==}
 
@@ -3992,9 +7777,16 @@ packages:
   to-vfile@8.0.0:
     resolution: {integrity: sha512-IcmH1xB5576MJc9qcfEC/m/nQCFt3fzMHz45sSlgJyTWjRbKW1HAkJpuf3DgE57YzIlZcwcBZA5ENQbBo4aLkg==}
 
-  toml-eslint-parser@0.12.0:
-    resolution: {integrity: sha512-4qHgkGXl0LyFp/3aNoi6dKWuPuxFsCiDtBl5IbJljeYR57+5l3pJHJEW9xPSOu2U1drGlG82tpGqkJz/uJZ2Fw==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  toidentifier@1.0.1:
+    resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
+    engines: {node: '>=0.6'}
+
+  token-stream@1.0.0:
+    resolution: {integrity: sha512-VSsyNPPW74RpHwR8Fc21uubwHY7wMDeJLys2IX5zJNih+OnAnaifKHo+1LHT7DAdloQ7apeaaWg8l7qnf/TnEg==}
+
+  toml-eslint-parser@1.0.3:
+    resolution: {integrity: sha512-A5F0cM6+mDleacLIEUkmfpkBbnHJFV1d2rprHU2MXNk7mlxHq2zGojA+SRvQD1RoMo9gqjZPWEaKG4v1BQ48lw==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
 
   totalist@3.0.1:
     resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
@@ -4011,38 +7803,69 @@ packages:
     resolution: {integrity: sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==}
     engines: {node: '>=20'}
 
+  tree-kill@1.2.2:
+    resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
+    hasBin: true
+
   treeify@1.1.0:
     resolution: {integrity: sha512-1m4RA7xVAJrSGrrXGs0L3YTwyvBs2S8PbRHaLZAkFw7JR8oIFwYtysxlBZhYIa7xSyiYJKZ3iGrrk55cGA3i9A==}
     engines: {node: '>=0.6'}
 
-  trim-newlines@3.0.1:
-    resolution: {integrity: sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==}
-    engines: {node: '>=8'}
+  trim-lines@3.0.1:
+    resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
 
   trough@2.2.0:
     resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
 
-  tsdown@0.12.9:
-    resolution: {integrity: sha512-MfrXm9PIlT3saovtWKf/gCJJ/NQCdE0SiREkdNC+9Qy6UHhdeDPxnkFaBD7xttVUmgp0yUHtGirpoLB+OVLuLA==}
-    engines: {node: '>=18.0.0'}
+  ts-api-utils@2.5.0:
+    resolution: {integrity: sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA==}
+    engines: {node: '>=18.12'}
+    peerDependencies:
+      typescript: '>=4.8.4'
+
+  ts-dedent@2.2.0:
+    resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==}
+    engines: {node: '>=6.10'}
+
+  ts-map@1.0.3:
+    resolution: {integrity: sha512-vDWbsl26LIcPGmDpoVzjEP6+hvHZkBkLW7JpvwbCv/5IYPJlsbzCVXY3wsCeAxAUeTclNOUZxnLdGh3VBD/J6w==}
+
+  ts-morph@28.0.0:
+    resolution: {integrity: sha512-Wp3tnZ2bzwxyTZMtgWVzXDfm7lB1Drz+y9DmmYH/L702PQhPyVrp3pkou3yIz4qjS14GY9kcpmLiOOMvl8oG1g==}
+
+  tsdown@0.22.2:
+    resolution: {integrity: sha512-VX9gsyKXsTnBZjnIM4jsHl9aRv+GfgkE/k1hQslilaBfZMlaw3JuGR+6yhiU0QxWBtOCDnTjwOSoXzgB7Rr50g==}
+    engines: {node: ^22.18.0 || >=24.0.0}
     hasBin: true
     peerDependencies:
       '@arethetypeswrong/core': ^0.18.1
-      publint: ^0.3.0
-      typescript: ^5.0.0
-      unplugin-lightningcss: ^0.4.0
+      '@tsdown/css': 0.22.2
+      '@tsdown/exe': 0.22.2
+      '@vitejs/devtools': '*'
+      publint: ^0.3.8
+      tsx: '*'
+      typescript: ^5.0.0 || ^6.0.0
       unplugin-unused: ^0.5.0
+      unrun: '*'
     peerDependenciesMeta:
       '@arethetypeswrong/core':
         optional: true
+      '@tsdown/css':
+        optional: true
+      '@tsdown/exe':
+        optional: true
+      '@vitejs/devtools':
+        optional: true
       publint:
         optional: true
+      tsx:
+        optional: true
       typescript:
         optional: true
-      unplugin-lightningcss:
-        optional: true
       unplugin-unused:
         optional: true
+      unrun:
+        optional: true
 
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
@@ -4057,21 +7880,28 @@ packages:
   typanion@3.14.0:
     resolution: {integrity: sha512-ZW/lVMRabETuYCd9O9ZvMhAh8GslSqaUjxmK/JLPCh6l73CvLBiuXswj/+7LdnWOgYsQ130FqLzFz5aGT4I3Ug==}
 
+  type-check@0.4.0:
+    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
+    engines: {node: '>= 0.8.0'}
+
   type-fest@0.13.1:
     resolution: {integrity: sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==}
     engines: {node: '>=10'}
 
-  type-fest@0.18.1:
-    resolution: {integrity: sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==}
-    engines: {node: '>=10'}
+  type-fest@4.41.0:
+    resolution: {integrity: sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==}
+    engines: {node: '>=16'}
 
-  type-fest@0.6.0:
-    resolution: {integrity: sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==}
-    engines: {node: '>=8'}
+  type-fest@5.7.0:
+    resolution: {integrity: sha512-1URUxUqfHFM1c+zfSPsa3gnkO7Aq21qyH75SIduNYz4SzY964rn1X2vCMQaHSHhktiw+0kPa2iyb6PUpXqB6Vg==}
+    engines: {node: '>=20'}
 
-  type-fest@0.8.1:
-    resolution: {integrity: sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==}
-    engines: {node: '>=8'}
+  type-is@2.1.0:
+    resolution: {integrity: sha512-faYHw0anBbc/kWF3zFTEnxSFOAGUX9GFbOBthvDdLsIlEoWOFOtS0zgCiQYwIskL9iGXZL3kAXD8OoZ4GmMATA==}
+    engines: {node: '>= 18'}
+
+  type-level-regexp@0.1.17:
+    resolution: {integrity: sha512-wTk4DH3cxwk196uGLK/E9pE45aLfeKJacKmcEgEOA/q5dnPGNxXt0cfYdFxb57L+sEpf1oJH4Dnx/pnRcku9jg==}
 
   typed-rest-client@2.1.0:
     resolution: {integrity: sha512-Nel9aPbgSzRxfs1+4GoSB4wexCF+4Axlk7OSGVQCMa+4fWcyxIsN/YNmkp0xTT2iQzMD98h8yFLav/cNaULmRA==}
@@ -4080,53 +7910,110 @@ packages:
   typedarray-to-buffer@3.1.5:
     resolution: {integrity: sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==}
 
-  typescript@5.8.3:
-    resolution: {integrity: sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==}
+  typescript-eslint@8.60.1:
+    resolution: {integrity: sha512-6m5hkkRAp8lKvhVpcprAIn5KkehQEh+47oHH2VGnExEh7dhNxXlg6GPAOIu6TxbVQxhebrJDvjl3020ooiWCMA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.1.0'
+
+  typescript@5.9.3:
+    resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  typescript@6.0.3:
+    resolution: {integrity: sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==}
     engines: {node: '>=14.17'}
     hasBin: true
 
   uc.micro@2.1.0:
     resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==}
 
+  ufo@1.6.4:
+    resolution: {integrity: sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA==}
+
   uglify-js@3.17.4:
     resolution: {integrity: sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==}
     engines: {node: '>=0.8.0'}
     hasBin: true
 
-  unconfig-core@7.4.2:
-    resolution: {integrity: sha512-VgPCvLWugINbXvMQDf8Jh0mlbvNjNC6eSUziHsBCMpxR05OPrNrvDnyatdMjRgcHaaNsCqz+wjNXxNw1kRLHUg==}
+  uint8array-extras@1.5.0:
+    resolution: {integrity: sha512-rvKSBiC5zqCCiDZ9kAOszZcDvdAHwwIKJG33Ykj43OKcWsnmcBRL09YTU4nOeHZ8Y2a7l1MgTd08SBe9A8Qj6A==}
+    engines: {node: '>=18'}
 
-  unconfig@7.4.2:
-    resolution: {integrity: sha512-nrMlWRQ1xdTjSnSUqvYqJzbTBFugoqHobQj58B2bc8qxHKBBHMNNsWQFP3Cd3/JZK907voM2geYPWqD4VK3MPQ==}
+  ultrahtml@1.6.0:
+    resolution: {integrity: sha512-R9fBn90VTJrqqLDwyMph+HGne8eqY1iPfYhPzZrvKpIfwkWZbcYlfpsb8B9dTvBfpy1/hqAD7Wi8EKfP9e8zdw==}
+
+  unconfig-core@7.5.0:
+    resolution: {integrity: sha512-Su3FauozOGP44ZmKdHy2oE6LPjk51M/TRRjHv2HNCWiDvfvCoxC2lno6jevMA91MYAdCdwP05QnWdWpSbncX/w==}
+
+  uncrypto@0.1.3:
+    resolution: {integrity: sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q==}
+
+  unctx@2.5.0:
+    resolution: {integrity: sha512-p+Rz9x0R7X+CYDkT+Xg8/GhpcShTlU8n+cf9OtOEf7zEQsNcCZO1dPKNRDqvUTaq+P32PMMkxWHwfrxkqfqAYg==}
 
   underscore@1.13.6:
     resolution: {integrity: sha512-+A5Sja4HP1M08MaXya7p5LvjuM7K6q/2EaC0+iovj/wOcMsTzMvDFbasi/oSapiwOlt252IqsKqPjCl7huKS0A==}
 
-  undici-types@7.16.0:
-    resolution: {integrity: sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==}
+  undici-types@7.24.6:
+    resolution: {integrity: sha512-WRNW+sJgj5OBN4/0JpHFqtqzhpbnV0GuB+OozA9gCL7a993SmU+1JBZCzLNxYsbMfIeDL+lTsphD5jN5N+n0zg==}
 
-  undici@7.24.5:
-    resolution: {integrity: sha512-3IWdCpjgxp15CbJnsi/Y9TCDE7HWVN19j1hmzVhoAkY/+CJx449tVxT5wZc1Gwg8J+P0LWvzlBzxYRnHJ+1i7Q==}
+  undici@6.26.0:
+    resolution: {integrity: sha512-4yqz8a3n5HmGTlsbADNtr/dJlhkh/55Rq798G6ibiULcXbDtaLpTl1pvdqcbFfeoj3iSi52lePFM7h9H21cw/A==}
+    engines: {node: '>=18.17'}
+
+  undici@7.27.2:
+    resolution: {integrity: sha512-uZsKNuzQxDMUY6M3pIMvy5tvlGmtq8XJ2oLAkfRKGNu+1VQAIvLy2xIVG5ATZl5wDXl/tddByAWCizRbOme+TA==}
     engines: {node: '>=20.18.1'}
 
+  unenv@2.0.0-rc.24:
+    resolution: {integrity: sha512-i7qRCmY42zmCwnYlh9H2SvLEypEFGye5iRmEMKjcGi7zk9UquigRjFtTLz0TYqr0ZGLZhaMHl/foy1bZR+Cwlw==}
+
+  unhead@2.1.15:
+    resolution: {integrity: sha512-MCt5T90mCWyr3Z6pUCdM9lVRXoMoVBlL7z7U4CYVIiaDiuzad/UCfLuMqz5MeNmpZUgoBCQnrucJimU7EZR+XA==}
+
+  unhead@3.1.3:
+    resolution: {integrity: sha512-mAlNpNmafwHM/13qvoDbzKmNU+zJBC2CHtmCvUtFDep5kAsUhHomBWtEAEQEw+rNnQ6g6RVo71elWKD/QDAbQQ==}
+    peerDependencies:
+      vite: '>=6.4.2'
+    peerDependenciesMeta:
+      vite:
+        optional: true
+
   unicorn-magic@0.3.0:
     resolution: {integrity: sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==}
     engines: {node: '>=18'}
 
+  unicorn-magic@0.4.0:
+    resolution: {integrity: sha512-wH590V9VNgYH9g3lH9wWjTrUoKsjLF6sGLjhR4sH1LWpLmCOH0Zf7PukhDA8BiS7KHe4oPNkcTHqYkj7SOGUOw==}
+    engines: {node: '>=20'}
+
   unified@11.0.5:
     resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
 
-  unique-filename@5.0.0:
-    resolution: {integrity: sha512-2RaJTAvAb4owyjllTfXzFClJ7WsGxlykkPvCr9pA//LD9goVq+m4PPAeBgNodGZ7nSrntT/auWpJ6Y5IFXcfjg==}
-    engines: {node: ^20.17.0 || >=22.9.0}
+  unifont@0.7.4:
+    resolution: {integrity: sha512-oHeis4/xl42HUIeHuNZRGEvxj5AaIKR+bHPNegRq5LV1gdc3jundpONbjglKpihmJf+dswygdMJn3eftGIMemg==}
 
-  unique-slug@6.0.0:
-    resolution: {integrity: sha512-4Lup7Ezn8W3d52/xBhZBVdx323ckxa7DEvd9kPQHppTkLoJXw6ltrBCyj5pnrxj0qKDxYMJ56CoxNuFCscdTiw==}
-    engines: {node: ^20.17.0 || >=22.9.0}
+  unimport@6.3.0:
+    resolution: {integrity: sha512-M+Dxk5W9WRd+8j56W9tp8lGW/dmMc7g5zj7BWQnEjKQhryBstqsi1V0izb0zHwSkEN8cSYV7K75/bykairV2tA==}
+    engines: {node: '>=18.12.0'}
+    peerDependencies:
+      oxc-parser: '*'
+      rolldown: ^1.0.0
+    peerDependenciesMeta:
+      oxc-parser:
+        optional: true
+      rolldown:
+        optional: true
 
   unist-util-is@6.0.0:
     resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}
 
+  unist-util-position@5.0.0:
+    resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
+
   unist-util-stringify-position@4.0.0:
     resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
 
@@ -4140,28 +8027,145 @@ packages:
     resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
     engines: {node: '>= 10.0.0'}
 
-  upath@2.0.1:
-    resolution: {integrity: sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==}
-    engines: {node: '>=4'}
+  unpipe@1.0.0:
+    resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
+    engines: {node: '>= 0.8'}
+
+  unplugin-utils@0.3.1:
+    resolution: {integrity: sha512-5lWVjgi6vuHhJ526bI4nlCOmkCIF3nnfXkCMDeMJrtdvxTs6ZFCM8oNufGTsDbKv/tJ/xj8RpvXjRuPBZJuJog==}
+    engines: {node: '>=20.19.0'}
+
+  unplugin-vue@7.2.0:
+    resolution: {integrity: sha512-6JHWcRbLO3bySOsipQSW9n2VRoPqsx9GLSWBfp7QLPCvpUr/edeAXR7pSl44EEJ+FIp9bG8Zm+xm5dnM/yir4Q==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      vue: ^3.2.25
+
+  unplugin@2.3.11:
+    resolution: {integrity: sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==}
+    engines: {node: '>=18.12.0'}
+
+  unplugin@3.0.0:
+    resolution: {integrity: sha512-0Mqk3AT2TZCXWKdcoaufeXNukv2mTrEZExeXlHIOZXdqYoHHr4n51pymnwV8x2BOVxwXbK2HLlI7usrqMpycdg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+
+  unrouting@0.1.7:
+    resolution: {integrity: sha512-+0hfD+CVWtD636rc5Fn9VEjjTEDhdqgMpbwAuVoUmydSHDaMNiFW93SJG4LV++RoGSEAyvQN5uABAscYpDphpQ==}
+
+  unrs-resolver@1.12.2:
+    resolution: {integrity: sha512-dmlRxBJJayXjqTwC+JtF1HhJmgf3ftQ3YejFcZrf4+KKtJv0qDsK1pjqaaVjG7wJ5NJ6UVP1OqRMQ71Z4C3rxQ==}
+
+  unrun@0.2.33:
+    resolution: {integrity: sha512-urXTjZHOHS6lMnatQerLcBpcTsaKZYGuu9aSZ+HlNfCApkiINRbj7YecC9h9hdZroMT4WQ4KVyzHfBqHKuFX9Q==}
+    engines: {node: '>=20.19.0'}
+    hasBin: true
+    peerDependencies:
+      synckit: ^0.11.11
+    peerDependenciesMeta:
+      synckit:
+        optional: true
+
+  unstorage@1.17.5:
+    resolution: {integrity: sha512-0i3iqvRfx29hkNntHyQvJTpf5W9dQ9ZadSoRU8+xVlhVtT7jAX57fazYO9EHvcRCfBCyi5YRya7XCDOsbTgkPg==}
+    peerDependencies:
+      '@azure/app-configuration': ^1.8.0
+      '@azure/cosmos': ^4.2.0
+      '@azure/data-tables': ^13.3.0
+      '@azure/identity': ^4.6.0
+      '@azure/keyvault-secrets': ^4.9.0
+      '@azure/storage-blob': ^12.26.0
+      '@capacitor/preferences': ^6 || ^7 || ^8
+      '@deno/kv': '>=0.9.0'
+      '@netlify/blobs': ^6.5.0 || ^7.0.0 || ^8.1.0 || ^9.0.0 || ^10.0.0
+      '@planetscale/database': ^1.19.0
+      '@upstash/redis': ^1.34.3
+      '@vercel/blob': '>=0.27.1'
+      '@vercel/functions': ^2.2.12 || ^3.0.0
+      '@vercel/kv': ^1 || ^2 || ^3
+      aws4fetch: ^1.0.20
+      db0: '>=0.2.1'
+      idb-keyval: ^6.2.1
+      ioredis: ^5.4.2
+      uploadthing: ^7.4.4
+    peerDependenciesMeta:
+      '@azure/app-configuration':
+        optional: true
+      '@azure/cosmos':
+        optional: true
+      '@azure/data-tables':
+        optional: true
+      '@azure/identity':
+        optional: true
+      '@azure/keyvault-secrets':
+        optional: true
+      '@azure/storage-blob':
+        optional: true
+      '@capacitor/preferences':
+        optional: true
+      '@deno/kv':
+        optional: true
+      '@netlify/blobs':
+        optional: true
+      '@planetscale/database':
+        optional: true
+      '@upstash/redis':
+        optional: true
+      '@vercel/blob':
+        optional: true
+      '@vercel/functions':
+        optional: true
+      '@vercel/kv':
+        optional: true
+      aws4fetch:
+        optional: true
+      db0:
+        optional: true
+      idb-keyval:
+        optional: true
+      ioredis:
+        optional: true
+      uploadthing:
+        optional: true
+
+  untun@0.1.3:
+    resolution: {integrity: sha512-4luGP9LMYszMRZwsvyUd9MrxgEGZdZuZgpVQHEEX0lCYFESasVRvZd0EYpCkOIbJKHMuv0LskpXc/8Un+MJzEQ==}
+    hasBin: true
+
+  untyped@2.0.0:
+    resolution: {integrity: sha512-nwNCjxJTjNuLCgFr42fEak5OcLuB3ecca+9ksPFNvtfYSLpjf+iJqSIaSnIile6ZPbKYxI5k2AfXqeopGudK/g==}
+    hasBin: true
+
+  unwasm@0.5.3:
+    resolution: {integrity: sha512-keBgTSfp3r6+s9ZcSma+0chwxQdmLbB5+dAD9vjtB21UTMYuKAxHXCU1K2CbCtnP09EaWeRvACnXk0EJtUx+hw==}
+
+  upath@3.0.7:
+    resolution: {integrity: sha512-VjBBquch25nUGMuVBpOb2Cj3gc8Kb7lJBqbsXR/0anZ/5uJsL14Kpth9JKfnBsckxCfgIp6hPvcvvmZ97R9X7g==}
+    engines: {node: '>=20'}
+
+  update-browserslist-db@1.2.3:
+    resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+
+  uqr@0.1.3:
+    resolution: {integrity: sha512-0rjE8iEJe4YmT9TOhwsZtqCMRLc5DXZUI2UEYUUg63ikBkqqE5EYWaI0etFe/5KUcmcYwLih2RND1kq+hrUJXA==}
+
+  uri-js@4.4.1:
+    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
   url-join@5.0.0:
     resolution: {integrity: sha512-n2huDr9h9yzd6exQVnH/jU5mr+Pfx08LRXXZhkLLetAMESRj+anQsTAh940iMrIetKAmry9coFuZQ2jY8/p3WA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  use-sync-external-store@1.6.0:
+    resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
-  util@0.12.5:
-    resolution: {integrity: sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==}
-
-  uuid@9.0.1:
-    resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==}
-    deprecated: uuid@10 and below is no longer supported.  For ESM codebases, update to uuid@latest.  For CommonJS codebases, use uuid@11 (but be aware this version will likely be deprecated in 2028).
-    hasBin: true
-
-  validate-npm-package-license@3.0.4:
-    resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
-
   validate-npm-package-name@5.0.0:
     resolution: {integrity: sha512-YuKoXDAhBYxY7SfOKxHBDoSyENFeW5VvIIQp2TGQuit8gpK6MnWaQelBKxso72DoxTZfZdcP3W90LqpSkgPzLQ==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
@@ -4170,14 +8174,80 @@ packages:
     resolution: {integrity: sha512-hVDIBwsRruT73PbK7uP5ebUt+ezEtCmzZz3F59BSr2F6OVFnJ/6h8liuvdLrQ88Xmnk6/+xGGuq+pG9WwTuy3A==}
     engines: {node: ^20.17.0 || >=22.9.0}
 
+  vary@1.1.2:
+    resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
+    engines: {node: '>= 0.8'}
+
   vfile-message@4.0.2:
     resolution: {integrity: sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==}
 
   vfile@6.0.3:
     resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
 
-  vite@7.1.4:
-    resolution: {integrity: sha512-X5QFK4SGynAeeIt+A7ZWnApdUyHYm+pzv/8/A57LqSGcI88U6R6ipOs3uCesdc6yl7nl+zNO0t8LmqAdXcQihw==}
+  vite-dev-rpc@1.1.0:
+    resolution: {integrity: sha512-pKXZlgoXGoE8sEKiKJSng4hI1sQ4wi5YT24FCrwrLt6opmkjlqPPVmiPWWJn8M8byMxRGzp1CrFuqQs4M/Z39A==}
+    peerDependencies:
+      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.1 || ^7.0.0-0
+
+  vite-hot-client@2.1.0:
+    resolution: {integrity: sha512-7SpgZmU7R+dDnSmvXE1mfDtnHLHQSisdySVR7lO8ceAXvM0otZeuQQ6C8LrS5d/aYyP/QZ0hI0L+dIPrm4YlFQ==}
+    peerDependencies:
+      vite: ^2.6.0 || ^3.0.0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0
+
+  vite-node@5.3.0:
+    resolution: {integrity: sha512-8f20COPYJujc3OKPX6OuyBy3ZIv2det4eRRU4GY1y2MjbeGSUmPjedxg1b72KnTagCofwvZ65ThzjxDW2AtQFQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+
+  vite-plugin-checker@0.14.1:
+    resolution: {integrity: sha512-Mv8oQc9XYBYf+XkP/riqqQCt8lBP6Iad75PZPho1lHRrpxQI0BwX2gwE10enn4f6Hgc+PvR1F7N38KARcaJtzw==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      '@biomejs/biome': '>=2.4.12'
+      eslint: '>=9.39.4'
+      meow: ^13.2.0 || ^14.0.0
+      optionator: ^0.9.4
+      oxlint: '>=1'
+      stylelint: '>=16.26.1'
+      typescript: '*'
+      vite: '>=5.4.21'
+      vue-tsc: ~2.2.10 || ^3.0.0
+    peerDependenciesMeta:
+      '@biomejs/biome':
+        optional: true
+      eslint:
+        optional: true
+      meow:
+        optional: true
+      optionator:
+        optional: true
+      oxlint:
+        optional: true
+      stylelint:
+        optional: true
+      typescript:
+        optional: true
+      vue-tsc:
+        optional: true
+
+  vite-plugin-inspect@11.3.3:
+    resolution: {integrity: sha512-u2eV5La99oHoYPHE6UvbwgEqKKOQGz86wMg40CCosP6q8BkB6e5xPneZfYagK4ojPJSj5anHCrnvC20DpwVdRA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@nuxt/kit': '*'
+      vite: ^6.0.0 || ^7.0.0-0
+    peerDependenciesMeta:
+      '@nuxt/kit':
+        optional: true
+
+  vite-plugin-vue-tracer@1.3.0:
+    resolution: {integrity: sha512-Cgfce6VikzOw5MUJTpeg50s5rRjzU1Vr61ZjuHunVVHLjZZ5AUlgyExHthZ3r59vtoz9W2rDt23FYG81avYBKw==}
+    peerDependencies:
+      vite: ^6.0.0 || ^7.0.0
+      vue: ^3.5.0
+
+  vite@7.3.5:
+    resolution: {integrity: sha512-KuOaNhcnGFN2zIPGA7wRmzF+lJA1sea7rHq17aiJ++9lzY1WWG6Jpwqwe1KNbRVPIqHmr8GLYx7jbrQcN/7/ww==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
     peerDependencies:
@@ -4216,21 +8286,72 @@ packages:
       yaml:
         optional: true
 
-  vitest@4.1.0:
-    resolution: {integrity: sha512-YbDrMF9jM2Lqc++2530UourxZHmkKLxrs4+mYhEwqWS97WJ7wOYEkcr+QfRgJ3PW9wz3odRijLZjHEaRLTNbqw==}
+  vite@8.0.16:
+    resolution: {integrity: sha512-h9bXPmJichP5fLmVQo3PyaGSDE2n3aPuomeAlVRm0JLmt4rY6zmPKd59HYI4LNW8oTK7tlTsuC7l/m7awx9Jcw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^20.19.0 || >=22.12.0
+      '@vitejs/devtools': ^0.1.18
+      esbuild: ^0.27.0 || ^0.28.0
+      jiti: '>=1.21.0'
+      less: ^4.0.0
+      sass: ^1.70.0
+      sass-embedded: ^1.70.0
+      stylus: '>=0.54.8'
+      sugarss: ^5.0.0
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      '@vitejs/devtools':
+        optional: true
+      esbuild:
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
+  vitest-browser-vue@2.1.0:
+    resolution: {integrity: sha512-K3H/oxIOY4EjXx2bxwrLsPg4jTMvzpRW6Jb6T8XZRoxUvmDVwGkd8mua130F8GZezE7H5QYoXd/S8hYijw7j5g==}
+    peerDependencies:
+      vitest: ^4.0.0-0
+      vue: ^3.0.0
+
+  vitest@4.1.8:
+    resolution: {integrity: sha512-flY6ScbCIt9HThs+C5HS7jvGOB560DJtk/Z15IQROTA6zEy49Nh8T/dofWTQL+n3vswqn87sbJNiuqw1SDp5Ig==}
     engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0}
     hasBin: true
     peerDependencies:
       '@edge-runtime/vm': '*'
       '@opentelemetry/api': ^1.9.0
       '@types/node': ^20.0.0 || ^22.0.0 || >=24.0.0
-      '@vitest/browser-playwright': 4.1.0
-      '@vitest/browser-preview': 4.1.0
-      '@vitest/browser-webdriverio': 4.1.0
-      '@vitest/ui': 4.1.0
+      '@vitest/browser-playwright': 4.1.8
+      '@vitest/browser-preview': 4.1.8
+      '@vitest/browser-webdriverio': 4.1.8
+      '@vitest/coverage-istanbul': 4.1.8
+      '@vitest/coverage-v8': 4.1.8
+      '@vitest/ui': 4.1.8
       happy-dom: '*'
       jsdom: '*'
-      vite: ^6.0.0 || ^7.0.0 || ^8.0.0-0
+      vite: ^6.0.0 || ^7.0.0 || ^8.0.0
     peerDependenciesMeta:
       '@edge-runtime/vm':
         optional: true
@@ -4244,6 +8365,10 @@ packages:
         optional: true
       '@vitest/browser-webdriverio':
         optional: true
+      '@vitest/coverage-istanbul':
+        optional: true
+      '@vitest/coverage-v8':
+        optional: true
       '@vitest/ui':
         optional: true
       happy-dom:
@@ -4251,11 +8376,92 @@ packages:
       jsdom:
         optional: true
 
-  vue-component-type-helpers@2.1.6:
-    resolution: {integrity: sha512-ng11B8B/ZADUMMOsRbqv0arc442q7lifSubD0v8oDXIFoMg/mXwAPUunrroIDkY+mcD0dHKccdaznSVp8EoX3w==}
+  void-elements@3.1.0:
+    resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
+    engines: {node: '>=0.10.0'}
 
-  vue@3.5.28:
-    resolution: {integrity: sha512-BRdrNfeoccSoIZeIhyPBfvWSLFP4q8J3u8Ju8Ug5vu3LdD+yTM13Sg4sKtljxozbnuMu1NB1X5HBHRYUzFocKg==}
+  vscode-uri@3.1.0:
+    resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
+
+  vue-bundle-renderer@2.2.0:
+    resolution: {integrity: sha512-sz/0WEdYH1KfaOm0XaBmRZOWgYTEvUDt6yPYaUzl4E52qzgWLlknaPPTTZmp6benaPTlQAI/hN1x3tAzZygycg==}
+
+  vue-component-meta@2.2.12:
+    resolution: {integrity: sha512-dQU6/obNSNbennJ1xd+rhDid4g3vQro+9qUBBIg8HMZH2Zs1jTpkFNxuQ3z77bOlU+ew08Qck9sbYkdSePr0Pw==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  vue-component-type-helpers@2.2.12:
+    resolution: {integrity: sha512-YbGqHZ5/eW4SnkPNR44mKVc6ZKQoRs/Rux1sxC6rdwXb4qpbOSYfDr9DsTHolOTGmIKgM9j141mZbBeg05R1pw==}
+
+  vue-component-type-helpers@3.3.4:
+    resolution: {integrity: sha512-joip1uZTaQR0nD23N400gIdJ7xY+WiiiMA/BCKz842gvGBknqDQAzklUvDEhqFvvrhQY8S2ZANBMu4X70VMFGw==}
+
+  vue-demi@0.14.10:
+    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
+  vue-devtools-stub@0.1.0:
+    resolution: {integrity: sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ==}
+
+  vue-docgen-api@4.79.2:
+    resolution: {integrity: sha512-n9ENAcs+40awPZMsas7STqjkZiVlIjxIKgiJr5rSohDP0/JCrD9VtlzNojafsA1MChm/hz2h3PDtUedx3lbgfA==}
+    peerDependencies:
+      vue: '>=2'
+
+  vue-eslint-parser@10.4.1:
+    resolution: {integrity: sha512-Gk6gRDj0n/fkRa3C3l0bBheoBckUq/Rs0F/TvMWIS6nzzx67amAViMe9CkNgsP2tXyQONvGiHQESHwFtZ3aYDA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+
+  vue-inbrowser-compiler-independent-utils@4.71.1:
+    resolution: {integrity: sha512-K3wt3iVmNGaFEOUR4JIThQRWfqokxLfnPslD41FDZB2ajXp789+wCqJyGYlIFsvEQ2P61PInw6/ph5iiqg51gg==}
+    peerDependencies:
+      vue: '>=2'
+
+  vue-router@5.1.0:
+    resolution: {integrity: sha512-HAbiLzLEHQwxPgvsbOJDAwtavszEgLwri6XfyrsPECIFez8+59xc9LofWVdc/HEaSRT822lJ8H9Ns38VVond5g==}
+    peerDependencies:
+      '@pinia/colada': '>=0.21.2'
+      '@vue/compiler-sfc': ^3.5.34
+      pinia: ^3.0.4
+      vite: ^7.0.0 || ^8.0.0
+      vue: ^3.5.34
+    peerDependenciesMeta:
+      '@pinia/colada':
+        optional: true
+      '@vue/compiler-sfc':
+        optional: true
+      pinia:
+        optional: true
+      vite:
+        optional: true
+
+  vue-tsc@3.2.6:
+    resolution: {integrity: sha512-gYW/kWI0XrwGzd0PKc7tVB/qpdeAkIZLNZb10/InizkQjHjnT8weZ/vBarZoj4kHKbUTZT/bAVgoOr8x4NsQ/Q==}
+    hasBin: true
+    peerDependencies:
+      typescript: '>=5.0.0'
+
+  vue-tsc@3.3.4:
+    resolution: {integrity: sha512-XA/JqmQwS2GZmfgpjOEGdrKwaTSEuPwxpHa7/t6f4yiGrJb3gVHTPb9wBfByMNZwQ+xDXs41b8gaS2DKsOozUw==}
+    hasBin: true
+    peerDependencies:
+      typescript: '>=5.0.0'
+
+  vue@3.5.35:
+    resolution: {integrity: sha512-cx89fnr+0kVGHiNFG6y6s0bdjypJRFNZn6x3WPstNdQR1bi1mbB7h4v5IBGTsPJU3nK1+0Iqj3Zf+hZWMieR4Q==}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
@@ -4277,6 +8483,9 @@ packages:
     resolution: {integrity: sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==}
     engines: {node: '>=20'}
 
+  webpack-virtual-modules@0.6.2:
+    resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
+
   whatwg-mimetype@5.0.0:
     resolution: {integrity: sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==}
     engines: {node: '>=20'}
@@ -4288,10 +8497,6 @@ packages:
   whatwg-url@5.0.0:
     resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
 
-  which-typed-array@1.1.15:
-    resolution: {integrity: sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==}
-    engines: {node: '>= 0.4'}
-
   which@2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
     engines: {node: '>= 8'}
@@ -4307,6 +8512,14 @@ packages:
     engines: {node: '>=8'}
     hasBin: true
 
+  with@7.0.2:
+    resolution: {integrity: sha512-RNGKj82nUPg3g5ygxkQl0R937xLyho1J24ItRCBTr/m1YnZkzJy1hUiHUJrc/VlsDQzsCnInEGSg3bci0Lmd4w==}
+    engines: {node: '>= 10.0.0'}
+
+  word-wrap@1.2.5:
+    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
+    engines: {node: '>=0.10.0'}
+
   wordwrap@1.0.0:
     resolution: {integrity: sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==}
 
@@ -4318,6 +8531,10 @@ packages:
     resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
     engines: {node: '>=12'}
 
+  wrap-ansi@9.0.2:
+    resolution: {integrity: sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==}
+    engines: {node: '>=18'}
+
   wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
 
@@ -4332,10 +8549,38 @@ packages:
     resolution: {integrity: sha512-LwyucHy0uhWqbrOkh9cBluZBeNVxzHjDaE9mwepZG3n3ZlbM4v3ndrFw51zW/NXYFFqP+QWZ72ihtLWTh05e4Q==}
     engines: {node: '>=10.13'}
 
+  ws@8.20.0:
+    resolution: {integrity: sha512-sAt8BhgNbzCtgGbt2OxmpuryO63ZoDk/sqaB/znQm94T4fCEsy/yV+7CdC1kJhOU9lboAEU7R3kquuycDoibVA==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
+  wsl-utils@0.1.0:
+    resolution: {integrity: sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==}
+    engines: {node: '>=18'}
+
+  wsl-utils@0.3.1:
+    resolution: {integrity: sha512-g/eziiSUNBSsdDJtCLB8bdYEUMj4jR7AGeUo96p/3dTafgjHhpF4RiCFPiRILwjQoDXx5MqkBr4fwWtR3Ky4Wg==}
+    engines: {node: '>=20'}
+
+  xml-name-validator@4.0.0:
+    resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
+    engines: {node: '>=12'}
+
   xml-name-validator@5.0.0:
     resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
     engines: {node: '>=18'}
 
+  xml-naming@0.1.0:
+    resolution: {integrity: sha512-k8KO9hrMyNk6tUWqUfkTEZbezRRpONVOzUTnc97VnCvyj6Tf9lyUR9EDAIeiVLv56jsMcoXEwjW8Kv5yPY52lw==}
+    engines: {node: '>=16.0.0'}
+
   xmlchars@2.2.0:
     resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
 
@@ -4347,6 +8592,13 @@ packages:
     resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
     engines: {node: '>=0.4'}
 
+  y18n@5.0.8:
+    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
+    engines: {node: '>=10'}
+
+  yallist@3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+
   yallist@4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
 
@@ -4354,73 +8606,93 @@ packages:
     resolution: {integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==}
     engines: {node: '>=18'}
 
-  yaml@2.8.2:
-    resolution: {integrity: sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==}
+  yaml@2.9.0:
+    resolution: {integrity: sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==}
     engines: {node: '>= 14.6'}
     hasBin: true
 
-  yargs-parser@18.1.3:
-    resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
-    engines: {node: '>=6'}
+  yargs-parser@22.0.0:
+    resolution: {integrity: sha512-rwu/ClNdSMpkSrUb+d6BRsSkLUq1fmfsY6TOpYzTwvwkg1/NRG85KBy3kq++A8LKQwX6lsu+aWad+2khvuXrqw==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=23}
 
-  yargs-parser@20.2.9:
-    resolution: {integrity: sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==}
+  yargs@18.0.0:
+    resolution: {integrity: sha512-4UEqdc2RYGHZc7Doyqkrqiln3p9X2DZVxaGbwhn2pi7MrRagKaOcIKe8L3OxYcbhXLgLFUS3zAYuQjKBQgmuNg==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=23}
+
+  yocto-queue@0.1.0:
+    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
-  yauzl@2.10.0:
-    resolution: {integrity: sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==}
-
   yocto-queue@1.2.1:
     resolution: {integrity: sha512-AyeEbWOu/TAXdxlV9wmGcR0+yh2j3vYPGOECcIj2S7MkrLyC7ne+oye2BKTItt0ii2PHk4cDy+95+LshzbXnGg==}
     engines: {node: '>=12.20'}
 
-  zod@3.25.76:
-    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
+  youch-core@0.3.3:
+    resolution: {integrity: sha512-ho7XuGjLaJ2hWHoK8yFnsUGy2Y5uDpqSTq1FkHLK4/oqKtyUU1AFbOOxY4IpC9f0fTLjwYbslUz0Po5BpD1wrA==}
+
+  youch@4.1.1:
+    resolution: {integrity: sha512-mxW3qiSnl+GRxXsaUMzv2Mbada1Y8CDltET9UxejDQe6DBYlSekghl5U5K0ReAikcHDi0G1vKZEmmo/NWAGKLA==}
+
+  zip-stream@6.0.1:
+    resolution: {integrity: sha512-zK7YHHz4ZXpW89AHXUPbQVGKI7uvkd3hzusTdotCg1UxyaVtg0zFJSTfW/Dq5f7OBBVnq6cZIaC8Ti4hb6dtCA==}
+    engines: {node: '>= 14'}
+
+  zod-to-json-schema@3.25.2:
+    resolution: {integrity: sha512-O/PgfnpT1xKSDeQYSCfRI5Gy3hPf91mKVDuYLUHZJMiDFptvP41MSnWofm8dnCm0256ZNfZIM7DSzuSMAFnjHA==}
+    peerDependencies:
+      zod: ^3.25.28 || ^4
+
+  zod@4.4.3:
+    resolution: {integrity: sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==}
 
   zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
 
 snapshots:
 
+  '@adobe/css-tools@4.4.4': {}
+
   '@arcanis/slice-ansi@1.1.1':
     dependencies:
       grapheme-splitter: 1.0.4
 
-  '@asamuzakjp/css-color@5.0.1':
+  '@asamuzakjp/css-color@5.1.11':
     dependencies:
-      '@csstools/css-calc': 3.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
-      '@csstools/css-color-parser': 4.0.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@asamuzakjp/generational-cache': 1.0.1
+      '@csstools/css-calc': 3.2.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-color-parser': 4.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      lru-cache: 11.2.7
 
-  '@asamuzakjp/dom-selector@7.0.4':
+  '@asamuzakjp/dom-selector@7.1.1':
     dependencies:
+      '@asamuzakjp/generational-cache': 1.0.1
       '@asamuzakjp/nwsapi': 2.3.9
       bidi-js: 1.0.3
       css-tree: 3.2.1
       is-potential-custom-element-name: 1.0.1
-      lru-cache: 11.2.7
+
+  '@asamuzakjp/generational-cache@1.0.1': {}
 
   '@asamuzakjp/nwsapi@2.3.9': {}
 
   '@aws-crypto/crc32@5.2.0':
     dependencies:
       '@aws-crypto/util': 5.2.0
-      '@aws-sdk/types': 3.973.1
+      '@aws-sdk/types': 3.973.11
       tslib: 2.8.1
 
   '@aws-crypto/crc32c@5.2.0':
     dependencies:
       '@aws-crypto/util': 5.2.0
-      '@aws-sdk/types': 3.973.1
+      '@aws-sdk/types': 3.973.11
       tslib: 2.8.1
 
   '@aws-crypto/sha1-browser@5.2.0':
     dependencies:
       '@aws-crypto/supports-web-crypto': 5.2.0
       '@aws-crypto/util': 5.2.0
-      '@aws-sdk/types': 3.973.1
+      '@aws-sdk/types': 3.973.11
       '@aws-sdk/util-locate-window': 3.535.0
       '@smithy/util-utf8': 2.3.0
       tslib: 2.8.1
@@ -4430,7 +8702,7 @@ snapshots:
       '@aws-crypto/sha256-js': 5.2.0
       '@aws-crypto/supports-web-crypto': 5.2.0
       '@aws-crypto/util': 5.2.0
-      '@aws-sdk/types': 3.973.1
+      '@aws-sdk/types': 3.973.11
       '@aws-sdk/util-locate-window': 3.535.0
       '@smithy/util-utf8': 2.3.0
       tslib: 2.8.1
@@ -4438,7 +8710,7 @@ snapshots:
   '@aws-crypto/sha256-js@5.2.0':
     dependencies:
       '@aws-crypto/util': 5.2.0
-      '@aws-sdk/types': 3.973.1
+      '@aws-sdk/types': 3.973.11
       tslib: 2.8.1
 
   '@aws-crypto/supports-web-crypto@5.2.0':
@@ -4447,891 +8719,591 @@ snapshots:
 
   '@aws-crypto/util@5.2.0':
     dependencies:
-      '@aws-sdk/types': 3.973.1
+      '@aws-sdk/types': 3.973.11
       '@smithy/util-utf8': 2.3.0
       tslib: 2.8.1
 
-  '@aws-sdk/client-codecommit@3.980.0':
-    dependencies:
-      '@aws-crypto/sha256-browser': 5.2.0
-      '@aws-crypto/sha256-js': 5.2.0
-      '@aws-sdk/core': 3.973.10
-      '@aws-sdk/credential-provider-node': 3.972.9
-      '@aws-sdk/middleware-host-header': 3.972.3
-      '@aws-sdk/middleware-logger': 3.972.3
-      '@aws-sdk/middleware-recursion-detection': 3.972.3
-      '@aws-sdk/middleware-user-agent': 3.972.10
-      '@aws-sdk/region-config-resolver': 3.972.3
-      '@aws-sdk/types': 3.973.1
-      '@aws-sdk/util-endpoints': 3.980.0
-      '@aws-sdk/util-user-agent-browser': 3.972.3
-      '@aws-sdk/util-user-agent-node': 3.972.8
-      '@smithy/config-resolver': 4.4.6
-      '@smithy/core': 3.23.0
-      '@smithy/fetch-http-handler': 5.3.9
-      '@smithy/hash-node': 4.2.8
-      '@smithy/invalid-dependency': 4.2.8
-      '@smithy/middleware-content-length': 4.2.8
-      '@smithy/middleware-endpoint': 4.4.14
-      '@smithy/middleware-retry': 4.4.31
-      '@smithy/middleware-serde': 4.2.9
-      '@smithy/middleware-stack': 4.2.8
-      '@smithy/node-config-provider': 4.3.8
-      '@smithy/node-http-handler': 4.4.10
-      '@smithy/protocol-http': 5.3.8
-      '@smithy/smithy-client': 4.11.3
-      '@smithy/types': 4.12.0
-      '@smithy/url-parser': 4.2.8
-      '@smithy/util-base64': 4.3.0
-      '@smithy/util-body-length-browser': 4.2.0
-      '@smithy/util-body-length-node': 4.2.1
-      '@smithy/util-defaults-mode-browser': 4.3.30
-      '@smithy/util-defaults-mode-node': 4.2.33
-      '@smithy/util-endpoints': 3.2.8
-      '@smithy/util-middleware': 4.2.8
-      '@smithy/util-retry': 4.2.8
-      '@smithy/util-utf8': 4.2.0
-      tslib: 2.8.1
-    transitivePeerDependencies:
-      - aws-crt
-
-  '@aws-sdk/client-cognito-identity@3.980.0':
-    dependencies:
-      '@aws-crypto/sha256-browser': 5.2.0
-      '@aws-crypto/sha256-js': 5.2.0
-      '@aws-sdk/core': 3.973.10
-      '@aws-sdk/credential-provider-node': 3.972.9
-      '@aws-sdk/middleware-host-header': 3.972.3
-      '@aws-sdk/middleware-logger': 3.972.3
-      '@aws-sdk/middleware-recursion-detection': 3.972.3
-      '@aws-sdk/middleware-user-agent': 3.972.10
-      '@aws-sdk/region-config-resolver': 3.972.3
-      '@aws-sdk/types': 3.973.1
-      '@aws-sdk/util-endpoints': 3.980.0
-      '@aws-sdk/util-user-agent-browser': 3.972.3
-      '@aws-sdk/util-user-agent-node': 3.972.8
-      '@smithy/config-resolver': 4.4.6
-      '@smithy/core': 3.23.0
-      '@smithy/fetch-http-handler': 5.3.9
-      '@smithy/hash-node': 4.2.8
-      '@smithy/invalid-dependency': 4.2.8
-      '@smithy/middleware-content-length': 4.2.8
-      '@smithy/middleware-endpoint': 4.4.14
-      '@smithy/middleware-retry': 4.4.31
-      '@smithy/middleware-serde': 4.2.9
-      '@smithy/middleware-stack': 4.2.8
-      '@smithy/node-config-provider': 4.3.8
-      '@smithy/node-http-handler': 4.4.10
-      '@smithy/protocol-http': 5.3.8
-      '@smithy/smithy-client': 4.11.3
-      '@smithy/types': 4.12.0
-      '@smithy/url-parser': 4.2.8
-      '@smithy/util-base64': 4.3.0
-      '@smithy/util-body-length-browser': 4.2.0
-      '@smithy/util-body-length-node': 4.2.1
-      '@smithy/util-defaults-mode-browser': 4.3.30
-      '@smithy/util-defaults-mode-node': 4.2.33
-      '@smithy/util-endpoints': 3.2.8
-      '@smithy/util-middleware': 4.2.8
-      '@smithy/util-retry': 4.2.8
-      '@smithy/util-utf8': 4.2.0
-      tslib: 2.8.1
-    transitivePeerDependencies:
-      - aws-crt
-
-  '@aws-sdk/client-ec2@3.980.0':
-    dependencies:
-      '@aws-crypto/sha256-browser': 5.2.0
-      '@aws-crypto/sha256-js': 5.2.0
-      '@aws-sdk/core': 3.973.10
-      '@aws-sdk/credential-provider-node': 3.972.9
-      '@aws-sdk/middleware-host-header': 3.972.3
-      '@aws-sdk/middleware-logger': 3.972.3
-      '@aws-sdk/middleware-recursion-detection': 3.972.3
-      '@aws-sdk/middleware-sdk-ec2': 3.972.7
-      '@aws-sdk/middleware-user-agent': 3.972.10
-      '@aws-sdk/region-config-resolver': 3.972.3
-      '@aws-sdk/types': 3.973.1
-      '@aws-sdk/util-endpoints': 3.980.0
-      '@aws-sdk/util-user-agent-browser': 3.972.3
-      '@aws-sdk/util-user-agent-node': 3.972.8
-      '@smithy/config-resolver': 4.4.6
-      '@smithy/core': 3.23.0
-      '@smithy/fetch-http-handler': 5.3.9
-      '@smithy/hash-node': 4.2.8
-      '@smithy/invalid-dependency': 4.2.8
-      '@smithy/middleware-content-length': 4.2.8
-      '@smithy/middleware-endpoint': 4.4.14
-      '@smithy/middleware-retry': 4.4.31
-      '@smithy/middleware-serde': 4.2.9
-      '@smithy/middleware-stack': 4.2.8
-      '@smithy/node-config-provider': 4.3.8
-      '@smithy/node-http-handler': 4.4.10
-      '@smithy/protocol-http': 5.3.8
-      '@smithy/smithy-client': 4.11.3
-      '@smithy/types': 4.12.0
-      '@smithy/url-parser': 4.2.8
-      '@smithy/util-base64': 4.3.0
-      '@smithy/util-body-length-browser': 4.2.0
-      '@smithy/util-body-length-node': 4.2.1
-      '@smithy/util-defaults-mode-browser': 4.3.30
-      '@smithy/util-defaults-mode-node': 4.2.33
-      '@smithy/util-endpoints': 3.2.8
-      '@smithy/util-middleware': 4.2.8
-      '@smithy/util-retry': 4.2.8
-      '@smithy/util-utf8': 4.2.0
-      '@smithy/util-waiter': 4.2.8
-      tslib: 2.8.1
-    transitivePeerDependencies:
-      - aws-crt
-
-  '@aws-sdk/client-ecr@3.980.0':
-    dependencies:
-      '@aws-crypto/sha256-browser': 5.2.0
-      '@aws-crypto/sha256-js': 5.2.0
-      '@aws-sdk/core': 3.973.10
-      '@aws-sdk/credential-provider-node': 3.972.9
-      '@aws-sdk/middleware-host-header': 3.972.3
-      '@aws-sdk/middleware-logger': 3.972.3
-      '@aws-sdk/middleware-recursion-detection': 3.972.3
-      '@aws-sdk/middleware-user-agent': 3.972.10
-      '@aws-sdk/region-config-resolver': 3.972.3
-      '@aws-sdk/types': 3.973.1
-      '@aws-sdk/util-endpoints': 3.980.0
-      '@aws-sdk/util-user-agent-browser': 3.972.3
-      '@aws-sdk/util-user-agent-node': 3.972.8
-      '@smithy/config-resolver': 4.4.6
-      '@smithy/core': 3.23.0
-      '@smithy/fetch-http-handler': 5.3.9
-      '@smithy/hash-node': 4.2.8
-      '@smithy/invalid-dependency': 4.2.8
-      '@smithy/middleware-content-length': 4.2.8
-      '@smithy/middleware-endpoint': 4.4.14
-      '@smithy/middleware-retry': 4.4.31
-      '@smithy/middleware-serde': 4.2.9
-      '@smithy/middleware-stack': 4.2.8
-      '@smithy/node-config-provider': 4.3.8
-      '@smithy/node-http-handler': 4.4.10
-      '@smithy/protocol-http': 5.3.8
-      '@smithy/smithy-client': 4.11.3
-      '@smithy/types': 4.12.0
-      '@smithy/url-parser': 4.2.8
-      '@smithy/util-base64': 4.3.0
-      '@smithy/util-body-length-browser': 4.2.0
-      '@smithy/util-body-length-node': 4.2.1
-      '@smithy/util-defaults-mode-browser': 4.3.30
-      '@smithy/util-defaults-mode-node': 4.2.33
-      '@smithy/util-endpoints': 3.2.8
-      '@smithy/util-middleware': 4.2.8
-      '@smithy/util-retry': 4.2.8
-      '@smithy/util-utf8': 4.2.0
-      '@smithy/util-waiter': 4.2.8
-      tslib: 2.8.1
-    transitivePeerDependencies:
-      - aws-crt
-
-  '@aws-sdk/client-eks@3.980.0':
-    dependencies:
-      '@aws-crypto/sha256-browser': 5.2.0
-      '@aws-crypto/sha256-js': 5.2.0
-      '@aws-sdk/core': 3.973.10
-      '@aws-sdk/credential-provider-node': 3.972.9
-      '@aws-sdk/middleware-host-header': 3.972.3
-      '@aws-sdk/middleware-logger': 3.972.3
-      '@aws-sdk/middleware-recursion-detection': 3.972.3
-      '@aws-sdk/middleware-user-agent': 3.972.10
-      '@aws-sdk/region-config-resolver': 3.972.3
-      '@aws-sdk/types': 3.973.1
-      '@aws-sdk/util-endpoints': 3.980.0
-      '@aws-sdk/util-user-agent-browser': 3.972.3
-      '@aws-sdk/util-user-agent-node': 3.972.8
-      '@smithy/config-resolver': 4.4.6
-      '@smithy/core': 3.23.0
-      '@smithy/fetch-http-handler': 5.3.9
-      '@smithy/hash-node': 4.2.8
-      '@smithy/invalid-dependency': 4.2.8
-      '@smithy/middleware-content-length': 4.2.8
-      '@smithy/middleware-endpoint': 4.4.14
-      '@smithy/middleware-retry': 4.4.31
-      '@smithy/middleware-serde': 4.2.9
-      '@smithy/middleware-stack': 4.2.8
-      '@smithy/node-config-provider': 4.3.8
-      '@smithy/node-http-handler': 4.4.10
-      '@smithy/protocol-http': 5.3.8
-      '@smithy/smithy-client': 4.11.3
-      '@smithy/types': 4.12.0
-      '@smithy/url-parser': 4.2.8
-      '@smithy/util-base64': 4.3.0
-      '@smithy/util-body-length-browser': 4.2.0
-      '@smithy/util-body-length-node': 4.2.1
-      '@smithy/util-defaults-mode-browser': 4.3.30
-      '@smithy/util-defaults-mode-node': 4.2.33
-      '@smithy/util-endpoints': 3.2.8
-      '@smithy/util-middleware': 4.2.8
-      '@smithy/util-retry': 4.2.8
-      '@smithy/util-utf8': 4.2.0
-      '@smithy/util-waiter': 4.2.8
-      tslib: 2.8.1
-    transitivePeerDependencies:
-      - aws-crt
-
-  '@aws-sdk/client-rds@3.980.0':
-    dependencies:
-      '@aws-crypto/sha256-browser': 5.2.0
-      '@aws-crypto/sha256-js': 5.2.0
-      '@aws-sdk/core': 3.973.10
-      '@aws-sdk/credential-provider-node': 3.972.9
-      '@aws-sdk/middleware-host-header': 3.972.3
-      '@aws-sdk/middleware-logger': 3.972.3
-      '@aws-sdk/middleware-recursion-detection': 3.972.3
-      '@aws-sdk/middleware-sdk-rds': 3.972.7
-      '@aws-sdk/middleware-user-agent': 3.972.10
-      '@aws-sdk/region-config-resolver': 3.972.3
-      '@aws-sdk/types': 3.973.1
-      '@aws-sdk/util-endpoints': 3.980.0
-      '@aws-sdk/util-user-agent-browser': 3.972.3
-      '@aws-sdk/util-user-agent-node': 3.972.8
-      '@smithy/config-resolver': 4.4.6
-      '@smithy/core': 3.23.0
-      '@smithy/fetch-http-handler': 5.3.9
-      '@smithy/hash-node': 4.2.8
-      '@smithy/invalid-dependency': 4.2.8
-      '@smithy/middleware-content-length': 4.2.8
-      '@smithy/middleware-endpoint': 4.4.14
-      '@smithy/middleware-retry': 4.4.31
-      '@smithy/middleware-serde': 4.2.9
-      '@smithy/middleware-stack': 4.2.8
-      '@smithy/node-config-provider': 4.3.8
-      '@smithy/node-http-handler': 4.4.10
-      '@smithy/protocol-http': 5.3.8
-      '@smithy/smithy-client': 4.11.3
-      '@smithy/types': 4.12.0
-      '@smithy/url-parser': 4.2.8
-      '@smithy/util-base64': 4.3.0
-      '@smithy/util-body-length-browser': 4.2.0
-      '@smithy/util-body-length-node': 4.2.1
-      '@smithy/util-defaults-mode-browser': 4.3.30
-      '@smithy/util-defaults-mode-node': 4.2.33
-      '@smithy/util-endpoints': 3.2.8
-      '@smithy/util-middleware': 4.2.8
-      '@smithy/util-retry': 4.2.8
-      '@smithy/util-utf8': 4.2.0
-      '@smithy/util-waiter': 4.2.8
-      tslib: 2.8.1
-    transitivePeerDependencies:
-      - aws-crt
-
-  '@aws-sdk/client-s3@3.980.0':
-    dependencies:
-      '@aws-crypto/sha1-browser': 5.2.0
-      '@aws-crypto/sha256-browser': 5.2.0
-      '@aws-crypto/sha256-js': 5.2.0
-      '@aws-sdk/core': 3.973.10
-      '@aws-sdk/credential-provider-node': 3.972.9
-      '@aws-sdk/middleware-bucket-endpoint': 3.972.3
-      '@aws-sdk/middleware-expect-continue': 3.972.3
-      '@aws-sdk/middleware-flexible-checksums': 3.972.8
-      '@aws-sdk/middleware-host-header': 3.972.3
-      '@aws-sdk/middleware-location-constraint': 3.972.3
-      '@aws-sdk/middleware-logger': 3.972.3
-      '@aws-sdk/middleware-recursion-detection': 3.972.3
-      '@aws-sdk/middleware-sdk-s3': 3.972.10
-      '@aws-sdk/middleware-ssec': 3.972.3
-      '@aws-sdk/middleware-user-agent': 3.972.10
-      '@aws-sdk/region-config-resolver': 3.972.3
-      '@aws-sdk/signature-v4-multi-region': 3.980.0
-      '@aws-sdk/types': 3.973.1
-      '@aws-sdk/util-endpoints': 3.980.0
-      '@aws-sdk/util-user-agent-browser': 3.972.3
-      '@aws-sdk/util-user-agent-node': 3.972.8
-      '@smithy/config-resolver': 4.4.6
-      '@smithy/core': 3.23.0
-      '@smithy/eventstream-serde-browser': 4.2.8
-      '@smithy/eventstream-serde-config-resolver': 4.3.8
-      '@smithy/eventstream-serde-node': 4.2.8
-      '@smithy/fetch-http-handler': 5.3.9
-      '@smithy/hash-blob-browser': 4.2.9
-      '@smithy/hash-node': 4.2.8
-      '@smithy/hash-stream-node': 4.2.8
-      '@smithy/invalid-dependency': 4.2.8
-      '@smithy/md5-js': 4.2.8
-      '@smithy/middleware-content-length': 4.2.8
-      '@smithy/middleware-endpoint': 4.4.14
-      '@smithy/middleware-retry': 4.4.31
-      '@smithy/middleware-serde': 4.2.9
-      '@smithy/middleware-stack': 4.2.8
-      '@smithy/node-config-provider': 4.3.8
-      '@smithy/node-http-handler': 4.4.10
-      '@smithy/protocol-http': 5.3.8
-      '@smithy/smithy-client': 4.11.3
-      '@smithy/types': 4.12.0
-      '@smithy/url-parser': 4.2.8
-      '@smithy/util-base64': 4.3.0
-      '@smithy/util-body-length-browser': 4.2.0
-      '@smithy/util-body-length-node': 4.2.1
-      '@smithy/util-defaults-mode-browser': 4.3.30
-      '@smithy/util-defaults-mode-node': 4.2.33
-      '@smithy/util-endpoints': 3.2.8
-      '@smithy/util-middleware': 4.2.8
-      '@smithy/util-retry': 4.2.8
-      '@smithy/util-stream': 4.5.12
-      '@smithy/util-utf8': 4.2.0
-      '@smithy/util-waiter': 4.2.8
-      tslib: 2.8.1
-    transitivePeerDependencies:
-      - aws-crt
-
-  '@aws-sdk/client-sso@3.990.0':
-    dependencies:
-      '@aws-crypto/sha256-browser': 5.2.0
-      '@aws-crypto/sha256-js': 5.2.0
-      '@aws-sdk/core': 3.973.10
-      '@aws-sdk/middleware-host-header': 3.972.3
-      '@aws-sdk/middleware-logger': 3.972.3
-      '@aws-sdk/middleware-recursion-detection': 3.972.3
-      '@aws-sdk/middleware-user-agent': 3.972.10
-      '@aws-sdk/region-config-resolver': 3.972.3
-      '@aws-sdk/types': 3.973.1
-      '@aws-sdk/util-endpoints': 3.990.0
-      '@aws-sdk/util-user-agent-browser': 3.972.3
-      '@aws-sdk/util-user-agent-node': 3.972.8
-      '@smithy/config-resolver': 4.4.6
-      '@smithy/core': 3.23.0
-      '@smithy/fetch-http-handler': 5.3.9
-      '@smithy/hash-node': 4.2.8
-      '@smithy/invalid-dependency': 4.2.8
-      '@smithy/middleware-content-length': 4.2.8
-      '@smithy/middleware-endpoint': 4.4.14
-      '@smithy/middleware-retry': 4.4.31
-      '@smithy/middleware-serde': 4.2.9
-      '@smithy/middleware-stack': 4.2.8
-      '@smithy/node-config-provider': 4.3.8
-      '@smithy/node-http-handler': 4.4.10
-      '@smithy/protocol-http': 5.3.8
-      '@smithy/smithy-client': 4.11.3
-      '@smithy/types': 4.12.0
-      '@smithy/url-parser': 4.2.8
-      '@smithy/util-base64': 4.3.0
-      '@smithy/util-body-length-browser': 4.2.0
-      '@smithy/util-body-length-node': 4.2.1
-      '@smithy/util-defaults-mode-browser': 4.3.30
-      '@smithy/util-defaults-mode-node': 4.2.33
-      '@smithy/util-endpoints': 3.2.8
-      '@smithy/util-middleware': 4.2.8
-      '@smithy/util-retry': 4.2.8
-      '@smithy/util-utf8': 4.2.0
-      tslib: 2.8.1
-    transitivePeerDependencies:
-      - aws-crt
-
-  '@aws-sdk/core@3.973.10':
-    dependencies:
-      '@aws-sdk/types': 3.973.1
-      '@aws-sdk/xml-builder': 3.972.4
-      '@smithy/core': 3.23.0
-      '@smithy/node-config-provider': 4.3.8
-      '@smithy/property-provider': 4.2.8
-      '@smithy/protocol-http': 5.3.8
-      '@smithy/signature-v4': 5.3.8
-      '@smithy/smithy-client': 4.11.3
-      '@smithy/types': 4.12.0
-      '@smithy/util-base64': 4.3.0
-      '@smithy/util-middleware': 4.2.8
-      '@smithy/util-utf8': 4.2.0
-      tslib: 2.8.1
-
-  '@aws-sdk/crc64-nvme@3.972.0':
-    dependencies:
-      '@smithy/types': 4.12.0
-      tslib: 2.8.1
-
-  '@aws-sdk/credential-provider-cognito-identity@3.972.3':
-    dependencies:
-      '@aws-sdk/client-cognito-identity': 3.980.0
-      '@aws-sdk/types': 3.973.1
-      '@smithy/property-provider': 4.2.8
-      '@smithy/types': 4.12.0
-      tslib: 2.8.1
-    transitivePeerDependencies:
-      - aws-crt
-
-  '@aws-sdk/credential-provider-env@3.972.8':
-    dependencies:
-      '@aws-sdk/core': 3.973.10
-      '@aws-sdk/types': 3.973.1
-      '@smithy/property-provider': 4.2.8
-      '@smithy/types': 4.12.0
-      tslib: 2.8.1
-
-  '@aws-sdk/credential-provider-http@3.972.10':
-    dependencies:
-      '@aws-sdk/core': 3.973.10
-      '@aws-sdk/types': 3.973.1
-      '@smithy/fetch-http-handler': 5.3.9
-      '@smithy/node-http-handler': 4.4.10
-      '@smithy/property-provider': 4.2.8
-      '@smithy/protocol-http': 5.3.8
-      '@smithy/smithy-client': 4.11.3
-      '@smithy/types': 4.12.0
-      '@smithy/util-stream': 4.5.12
-      tslib: 2.8.1
-
-  '@aws-sdk/credential-provider-ini@3.972.8':
-    dependencies:
-      '@aws-sdk/core': 3.973.10
-      '@aws-sdk/credential-provider-env': 3.972.8
-      '@aws-sdk/credential-provider-http': 3.972.10
-      '@aws-sdk/credential-provider-login': 3.972.8
-      '@aws-sdk/credential-provider-process': 3.972.8
-      '@aws-sdk/credential-provider-sso': 3.972.8
-      '@aws-sdk/credential-provider-web-identity': 3.972.8
-      '@aws-sdk/nested-clients': 3.990.0
-      '@aws-sdk/types': 3.973.1
-      '@smithy/credential-provider-imds': 4.2.8
-      '@smithy/property-provider': 4.2.8
-      '@smithy/shared-ini-file-loader': 4.4.3
-      '@smithy/types': 4.12.0
-      tslib: 2.8.1
-    transitivePeerDependencies:
-      - aws-crt
-
-  '@aws-sdk/credential-provider-login@3.972.8':
-    dependencies:
-      '@aws-sdk/core': 3.973.10
-      '@aws-sdk/nested-clients': 3.990.0
-      '@aws-sdk/types': 3.973.1
-      '@smithy/property-provider': 4.2.8
-      '@smithy/protocol-http': 5.3.8
-      '@smithy/shared-ini-file-loader': 4.4.3
-      '@smithy/types': 4.12.0
-      tslib: 2.8.1
-    transitivePeerDependencies:
-      - aws-crt
-
-  '@aws-sdk/credential-provider-node@3.972.9':
-    dependencies:
-      '@aws-sdk/credential-provider-env': 3.972.8
-      '@aws-sdk/credential-provider-http': 3.972.10
-      '@aws-sdk/credential-provider-ini': 3.972.8
-      '@aws-sdk/credential-provider-process': 3.972.8
-      '@aws-sdk/credential-provider-sso': 3.972.8
-      '@aws-sdk/credential-provider-web-identity': 3.972.8
-      '@aws-sdk/types': 3.973.1
-      '@smithy/credential-provider-imds': 4.2.8
-      '@smithy/property-provider': 4.2.8
-      '@smithy/shared-ini-file-loader': 4.4.3
-      '@smithy/types': 4.12.0
-      tslib: 2.8.1
-    transitivePeerDependencies:
-      - aws-crt
-
-  '@aws-sdk/credential-provider-process@3.972.8':
-    dependencies:
-      '@aws-sdk/core': 3.973.10
-      '@aws-sdk/types': 3.973.1
-      '@smithy/property-provider': 4.2.8
-      '@smithy/shared-ini-file-loader': 4.4.3
-      '@smithy/types': 4.12.0
-      tslib: 2.8.1
-
-  '@aws-sdk/credential-provider-sso@3.972.8':
-    dependencies:
-      '@aws-sdk/client-sso': 3.990.0
-      '@aws-sdk/core': 3.973.10
-      '@aws-sdk/token-providers': 3.990.0
-      '@aws-sdk/types': 3.973.1
-      '@smithy/property-provider': 4.2.8
-      '@smithy/shared-ini-file-loader': 4.4.3
-      '@smithy/types': 4.12.0
-      tslib: 2.8.1
-    transitivePeerDependencies:
-      - aws-crt
-
-  '@aws-sdk/credential-provider-web-identity@3.972.8':
-    dependencies:
-      '@aws-sdk/core': 3.973.10
-      '@aws-sdk/nested-clients': 3.990.0
-      '@aws-sdk/types': 3.973.1
-      '@smithy/property-provider': 4.2.8
-      '@smithy/shared-ini-file-loader': 4.4.3
-      '@smithy/types': 4.12.0
-      tslib: 2.8.1
-    transitivePeerDependencies:
-      - aws-crt
-
-  '@aws-sdk/credential-providers@3.980.0':
-    dependencies:
-      '@aws-sdk/client-cognito-identity': 3.980.0
-      '@aws-sdk/core': 3.973.10
-      '@aws-sdk/credential-provider-cognito-identity': 3.972.3
-      '@aws-sdk/credential-provider-env': 3.972.8
-      '@aws-sdk/credential-provider-http': 3.972.10
-      '@aws-sdk/credential-provider-ini': 3.972.8
-      '@aws-sdk/credential-provider-login': 3.972.8
-      '@aws-sdk/credential-provider-node': 3.972.9
-      '@aws-sdk/credential-provider-process': 3.972.8
-      '@aws-sdk/credential-provider-sso': 3.972.8
-      '@aws-sdk/credential-provider-web-identity': 3.972.8
-      '@aws-sdk/nested-clients': 3.980.0
-      '@aws-sdk/types': 3.973.1
-      '@smithy/config-resolver': 4.4.6
-      '@smithy/core': 3.23.0
-      '@smithy/credential-provider-imds': 4.2.8
-      '@smithy/node-config-provider': 4.3.8
-      '@smithy/property-provider': 4.2.8
-      '@smithy/types': 4.12.0
-      tslib: 2.8.1
-    transitivePeerDependencies:
-      - aws-crt
-
-  '@aws-sdk/middleware-bucket-endpoint@3.972.3':
-    dependencies:
-      '@aws-sdk/types': 3.973.1
-      '@aws-sdk/util-arn-parser': 3.972.2
-      '@smithy/node-config-provider': 4.3.8
-      '@smithy/protocol-http': 5.3.8
-      '@smithy/types': 4.12.0
-      '@smithy/util-config-provider': 4.2.0
-      tslib: 2.8.1
-
-  '@aws-sdk/middleware-expect-continue@3.972.3':
-    dependencies:
-      '@aws-sdk/types': 3.973.1
-      '@smithy/protocol-http': 5.3.8
-      '@smithy/types': 4.12.0
-      tslib: 2.8.1
-
-  '@aws-sdk/middleware-flexible-checksums@3.972.8':
+  '@aws-sdk/checksums@3.1000.2':
     dependencies:
       '@aws-crypto/crc32': 5.2.0
       '@aws-crypto/crc32c': 5.2.0
       '@aws-crypto/util': 5.2.0
-      '@aws-sdk/core': 3.973.10
-      '@aws-sdk/crc64-nvme': 3.972.0
-      '@aws-sdk/types': 3.973.1
-      '@smithy/is-array-buffer': 4.2.0
-      '@smithy/node-config-provider': 4.3.8
-      '@smithy/protocol-http': 5.3.8
-      '@smithy/types': 4.12.0
-      '@smithy/util-middleware': 4.2.8
-      '@smithy/util-stream': 4.5.12
-      '@smithy/util-utf8': 4.2.0
+      '@aws-sdk/core': 3.974.18
+      '@aws-sdk/types': 3.973.11
+      '@smithy/core': 3.24.6
+      '@smithy/types': 4.14.3
       tslib: 2.8.1
 
-  '@aws-sdk/middleware-host-header@3.972.3':
+  '@aws-sdk/client-codecommit@3.1053.0':
     dependencies:
-      '@aws-sdk/types': 3.973.1
-      '@smithy/protocol-http': 5.3.8
-      '@smithy/types': 4.12.0
+      '@aws-crypto/sha256-browser': 5.2.0
+      '@aws-crypto/sha256-js': 5.2.0
+      '@aws-sdk/core': 3.974.18
+      '@aws-sdk/credential-provider-node': 3.972.52
+      '@aws-sdk/types': 3.973.11
+      '@smithy/core': 3.24.6
+      '@smithy/fetch-http-handler': 5.4.6
+      '@smithy/node-http-handler': 4.7.7
+      '@smithy/types': 4.14.3
       tslib: 2.8.1
 
-  '@aws-sdk/middleware-location-constraint@3.972.3':
+  '@aws-sdk/client-cognito-identity@3.1053.0':
     dependencies:
-      '@aws-sdk/types': 3.973.1
-      '@smithy/types': 4.12.0
+      '@aws-crypto/sha256-browser': 5.2.0
+      '@aws-crypto/sha256-js': 5.2.0
+      '@aws-sdk/core': 3.974.18
+      '@aws-sdk/credential-provider-node': 3.972.52
+      '@aws-sdk/types': 3.973.11
+      '@smithy/core': 3.24.6
+      '@smithy/fetch-http-handler': 5.4.6
+      '@smithy/node-http-handler': 4.7.7
+      '@smithy/types': 4.14.3
       tslib: 2.8.1
 
-  '@aws-sdk/middleware-logger@3.972.3':
+  '@aws-sdk/client-ec2@3.1053.0':
     dependencies:
-      '@aws-sdk/types': 3.973.1
-      '@smithy/types': 4.12.0
+      '@aws-crypto/sha256-browser': 5.2.0
+      '@aws-crypto/sha256-js': 5.2.0
+      '@aws-sdk/core': 3.974.18
+      '@aws-sdk/credential-provider-node': 3.972.52
+      '@aws-sdk/middleware-sdk-ec2': 3.972.32
+      '@aws-sdk/types': 3.973.11
+      '@smithy/core': 3.24.6
+      '@smithy/fetch-http-handler': 5.4.6
+      '@smithy/node-http-handler': 4.7.7
+      '@smithy/types': 4.14.3
       tslib: 2.8.1
 
-  '@aws-sdk/middleware-recursion-detection@3.972.3':
+  '@aws-sdk/client-ecr@3.1053.0':
     dependencies:
-      '@aws-sdk/types': 3.973.1
+      '@aws-crypto/sha256-browser': 5.2.0
+      '@aws-crypto/sha256-js': 5.2.0
+      '@aws-sdk/core': 3.974.18
+      '@aws-sdk/credential-provider-node': 3.972.52
+      '@aws-sdk/types': 3.973.11
+      '@smithy/core': 3.24.6
+      '@smithy/fetch-http-handler': 5.4.6
+      '@smithy/node-http-handler': 4.7.7
+      '@smithy/types': 4.14.3
+      tslib: 2.8.1
+
+  '@aws-sdk/client-eks@3.1053.0':
+    dependencies:
+      '@aws-crypto/sha256-browser': 5.2.0
+      '@aws-crypto/sha256-js': 5.2.0
+      '@aws-sdk/core': 3.974.18
+      '@aws-sdk/credential-provider-node': 3.972.52
+      '@aws-sdk/types': 3.973.11
+      '@smithy/core': 3.24.6
+      '@smithy/fetch-http-handler': 5.4.6
+      '@smithy/node-http-handler': 4.7.7
+      '@smithy/types': 4.14.3
+      tslib: 2.8.1
+
+  '@aws-sdk/client-rds@3.1053.0':
+    dependencies:
+      '@aws-crypto/sha256-browser': 5.2.0
+      '@aws-crypto/sha256-js': 5.2.0
+      '@aws-sdk/core': 3.974.18
+      '@aws-sdk/credential-provider-node': 3.972.52
+      '@aws-sdk/middleware-sdk-rds': 3.972.32
+      '@aws-sdk/types': 3.973.11
+      '@smithy/core': 3.24.6
+      '@smithy/fetch-http-handler': 5.4.6
+      '@smithy/node-http-handler': 4.7.7
+      '@smithy/types': 4.14.3
+      tslib: 2.8.1
+
+  '@aws-sdk/client-s3@3.1053.0':
+    dependencies:
+      '@aws-crypto/sha1-browser': 5.2.0
+      '@aws-crypto/sha256-browser': 5.2.0
+      '@aws-crypto/sha256-js': 5.2.0
+      '@aws-sdk/core': 3.974.18
+      '@aws-sdk/credential-provider-node': 3.972.52
+      '@aws-sdk/middleware-bucket-endpoint': 3.972.21
+      '@aws-sdk/middleware-expect-continue': 3.972.17
+      '@aws-sdk/middleware-flexible-checksums': 3.974.27
+      '@aws-sdk/middleware-location-constraint': 3.972.14
+      '@aws-sdk/middleware-sdk-s3': 3.972.48
+      '@aws-sdk/middleware-ssec': 3.972.14
+      '@aws-sdk/signature-v4-multi-region': 3.996.32
+      '@aws-sdk/types': 3.973.11
+      '@smithy/core': 3.24.6
+      '@smithy/fetch-http-handler': 5.4.6
+      '@smithy/node-http-handler': 4.7.7
+      '@smithy/types': 4.14.3
+      tslib: 2.8.1
+
+  '@aws-sdk/core@3.974.18':
+    dependencies:
+      '@aws-sdk/types': 3.973.11
+      '@aws-sdk/xml-builder': 3.972.28
       '@aws/lambda-invoke-store': 0.2.3
-      '@smithy/protocol-http': 5.3.8
-      '@smithy/types': 4.12.0
+      '@smithy/core': 3.24.6
+      '@smithy/signature-v4': 5.4.6
+      '@smithy/types': 4.14.3
+      bowser: 2.11.0
       tslib: 2.8.1
 
-  '@aws-sdk/middleware-sdk-ec2@3.972.7':
+  '@aws-sdk/credential-provider-cognito-identity@3.972.42':
     dependencies:
-      '@aws-sdk/types': 3.973.1
-      '@aws-sdk/util-format-url': 3.972.3
-      '@smithy/middleware-endpoint': 4.4.14
-      '@smithy/protocol-http': 5.3.8
-      '@smithy/signature-v4': 5.3.8
-      '@smithy/smithy-client': 4.11.3
-      '@smithy/types': 4.12.0
+      '@aws-sdk/nested-clients': 3.997.17
+      '@aws-sdk/types': 3.973.11
+      '@smithy/core': 3.24.6
+      '@smithy/types': 4.14.3
       tslib: 2.8.1
 
-  '@aws-sdk/middleware-sdk-rds@3.972.7':
+  '@aws-sdk/credential-provider-env@3.972.44':
     dependencies:
-      '@aws-sdk/types': 3.973.1
-      '@aws-sdk/util-format-url': 3.972.3
-      '@smithy/middleware-endpoint': 4.4.14
-      '@smithy/protocol-http': 5.3.8
-      '@smithy/signature-v4': 5.3.8
-      '@smithy/types': 4.12.0
+      '@aws-sdk/core': 3.974.18
+      '@aws-sdk/types': 3.973.11
+      '@smithy/core': 3.24.6
+      '@smithy/types': 4.14.3
       tslib: 2.8.1
 
-  '@aws-sdk/middleware-sdk-s3@3.972.10':
+  '@aws-sdk/credential-provider-http@3.972.46':
     dependencies:
-      '@aws-sdk/core': 3.973.10
-      '@aws-sdk/types': 3.973.1
-      '@aws-sdk/util-arn-parser': 3.972.2
-      '@smithy/core': 3.23.0
-      '@smithy/node-config-provider': 4.3.8
-      '@smithy/protocol-http': 5.3.8
-      '@smithy/signature-v4': 5.3.8
-      '@smithy/smithy-client': 4.11.3
-      '@smithy/types': 4.12.0
-      '@smithy/util-config-provider': 4.2.0
-      '@smithy/util-middleware': 4.2.8
-      '@smithy/util-stream': 4.5.12
-      '@smithy/util-utf8': 4.2.0
+      '@aws-sdk/core': 3.974.18
+      '@aws-sdk/types': 3.973.11
+      '@smithy/core': 3.24.6
+      '@smithy/fetch-http-handler': 5.4.6
+      '@smithy/node-http-handler': 4.7.7
+      '@smithy/types': 4.14.3
       tslib: 2.8.1
 
-  '@aws-sdk/middleware-ssec@3.972.3':
+  '@aws-sdk/credential-provider-ini@3.972.50':
     dependencies:
-      '@aws-sdk/types': 3.973.1
-      '@smithy/types': 4.12.0
+      '@aws-sdk/core': 3.974.18
+      '@aws-sdk/credential-provider-env': 3.972.44
+      '@aws-sdk/credential-provider-http': 3.972.46
+      '@aws-sdk/credential-provider-login': 3.972.49
+      '@aws-sdk/credential-provider-process': 3.972.44
+      '@aws-sdk/credential-provider-sso': 3.972.49
+      '@aws-sdk/credential-provider-web-identity': 3.972.49
+      '@aws-sdk/nested-clients': 3.997.17
+      '@aws-sdk/types': 3.973.11
+      '@smithy/core': 3.24.6
+      '@smithy/credential-provider-imds': 4.3.8
+      '@smithy/types': 4.14.3
       tslib: 2.8.1
 
-  '@aws-sdk/middleware-user-agent@3.972.10':
+  '@aws-sdk/credential-provider-login@3.972.49':
     dependencies:
-      '@aws-sdk/core': 3.973.10
-      '@aws-sdk/types': 3.973.1
-      '@aws-sdk/util-endpoints': 3.990.0
-      '@smithy/core': 3.23.0
-      '@smithy/protocol-http': 5.3.8
-      '@smithy/types': 4.12.0
+      '@aws-sdk/core': 3.974.18
+      '@aws-sdk/nested-clients': 3.997.17
+      '@aws-sdk/types': 3.973.11
+      '@smithy/core': 3.24.6
+      '@smithy/types': 4.14.3
       tslib: 2.8.1
 
-  '@aws-sdk/nested-clients@3.980.0':
+  '@aws-sdk/credential-provider-node@3.972.52':
+    dependencies:
+      '@aws-sdk/credential-provider-env': 3.972.44
+      '@aws-sdk/credential-provider-http': 3.972.46
+      '@aws-sdk/credential-provider-ini': 3.972.50
+      '@aws-sdk/credential-provider-process': 3.972.44
+      '@aws-sdk/credential-provider-sso': 3.972.49
+      '@aws-sdk/credential-provider-web-identity': 3.972.49
+      '@aws-sdk/types': 3.973.11
+      '@smithy/core': 3.24.6
+      '@smithy/credential-provider-imds': 4.3.8
+      '@smithy/types': 4.14.3
+      tslib: 2.8.1
+
+  '@aws-sdk/credential-provider-process@3.972.44':
+    dependencies:
+      '@aws-sdk/core': 3.974.18
+      '@aws-sdk/types': 3.973.11
+      '@smithy/core': 3.24.6
+      '@smithy/types': 4.14.3
+      tslib: 2.8.1
+
+  '@aws-sdk/credential-provider-sso@3.972.49':
+    dependencies:
+      '@aws-sdk/core': 3.974.18
+      '@aws-sdk/nested-clients': 3.997.17
+      '@aws-sdk/token-providers': 3.1063.0
+      '@aws-sdk/types': 3.973.11
+      '@smithy/core': 3.24.6
+      '@smithy/types': 4.14.3
+      tslib: 2.8.1
+
+  '@aws-sdk/credential-provider-web-identity@3.972.49':
+    dependencies:
+      '@aws-sdk/core': 3.974.18
+      '@aws-sdk/nested-clients': 3.997.17
+      '@aws-sdk/types': 3.973.11
+      '@smithy/core': 3.24.6
+      '@smithy/types': 4.14.3
+      tslib: 2.8.1
+
+  '@aws-sdk/credential-providers@3.1053.0':
+    dependencies:
+      '@aws-sdk/client-cognito-identity': 3.1053.0
+      '@aws-sdk/core': 3.974.18
+      '@aws-sdk/credential-provider-cognito-identity': 3.972.42
+      '@aws-sdk/credential-provider-env': 3.972.44
+      '@aws-sdk/credential-provider-http': 3.972.46
+      '@aws-sdk/credential-provider-ini': 3.972.50
+      '@aws-sdk/credential-provider-login': 3.972.49
+      '@aws-sdk/credential-provider-node': 3.972.52
+      '@aws-sdk/credential-provider-process': 3.972.44
+      '@aws-sdk/credential-provider-sso': 3.972.49
+      '@aws-sdk/credential-provider-web-identity': 3.972.49
+      '@aws-sdk/nested-clients': 3.997.17
+      '@aws-sdk/types': 3.973.11
+      '@smithy/core': 3.24.6
+      '@smithy/credential-provider-imds': 4.3.8
+      '@smithy/types': 4.14.3
+      tslib: 2.8.1
+
+  '@aws-sdk/middleware-bucket-endpoint@3.972.21':
+    dependencies:
+      '@aws-sdk/middleware-sdk-s3': 3.972.48
+      tslib: 2.8.1
+
+  '@aws-sdk/middleware-expect-continue@3.972.17':
+    dependencies:
+      '@aws-sdk/middleware-sdk-s3': 3.972.48
+      tslib: 2.8.1
+
+  '@aws-sdk/middleware-flexible-checksums@3.974.27':
+    dependencies:
+      '@aws-sdk/checksums': 3.1000.2
+      tslib: 2.8.1
+
+  '@aws-sdk/middleware-location-constraint@3.972.14':
+    dependencies:
+      '@aws-sdk/middleware-sdk-s3': 3.972.48
+      tslib: 2.8.1
+
+  '@aws-sdk/middleware-sdk-ec2@3.972.32':
+    dependencies:
+      '@aws-sdk/core': 3.974.18
+      '@aws-sdk/types': 3.973.11
+      '@smithy/core': 3.24.6
+      '@smithy/signature-v4': 5.4.6
+      '@smithy/types': 4.14.3
+      tslib: 2.8.1
+
+  '@aws-sdk/middleware-sdk-rds@3.972.32':
+    dependencies:
+      '@aws-sdk/core': 3.974.18
+      '@aws-sdk/types': 3.973.11
+      '@smithy/core': 3.24.6
+      '@smithy/signature-v4': 5.4.6
+      '@smithy/types': 4.14.3
+      tslib: 2.8.1
+
+  '@aws-sdk/middleware-sdk-s3@3.972.48':
+    dependencies:
+      '@aws-sdk/core': 3.974.18
+      '@aws-sdk/signature-v4-multi-region': 3.996.32
+      '@aws-sdk/types': 3.973.11
+      '@smithy/core': 3.24.6
+      '@smithy/types': 4.14.3
+      tslib: 2.8.1
+
+  '@aws-sdk/middleware-ssec@3.972.14':
+    dependencies:
+      '@aws-sdk/middleware-sdk-s3': 3.972.48
+      tslib: 2.8.1
+
+  '@aws-sdk/nested-clients@3.997.17':
     dependencies:
       '@aws-crypto/sha256-browser': 5.2.0
       '@aws-crypto/sha256-js': 5.2.0
-      '@aws-sdk/core': 3.973.10
-      '@aws-sdk/middleware-host-header': 3.972.3
-      '@aws-sdk/middleware-logger': 3.972.3
-      '@aws-sdk/middleware-recursion-detection': 3.972.3
-      '@aws-sdk/middleware-user-agent': 3.972.10
-      '@aws-sdk/region-config-resolver': 3.972.3
-      '@aws-sdk/types': 3.973.1
-      '@aws-sdk/util-endpoints': 3.980.0
-      '@aws-sdk/util-user-agent-browser': 3.972.3
-      '@aws-sdk/util-user-agent-node': 3.972.8
-      '@smithy/config-resolver': 4.4.6
-      '@smithy/core': 3.23.0
-      '@smithy/fetch-http-handler': 5.3.9
-      '@smithy/hash-node': 4.2.8
-      '@smithy/invalid-dependency': 4.2.8
-      '@smithy/middleware-content-length': 4.2.8
-      '@smithy/middleware-endpoint': 4.4.14
-      '@smithy/middleware-retry': 4.4.31
-      '@smithy/middleware-serde': 4.2.9
-      '@smithy/middleware-stack': 4.2.8
-      '@smithy/node-config-provider': 4.3.8
-      '@smithy/node-http-handler': 4.4.10
-      '@smithy/protocol-http': 5.3.8
-      '@smithy/smithy-client': 4.11.3
-      '@smithy/types': 4.12.0
-      '@smithy/url-parser': 4.2.8
-      '@smithy/util-base64': 4.3.0
-      '@smithy/util-body-length-browser': 4.2.0
-      '@smithy/util-body-length-node': 4.2.1
-      '@smithy/util-defaults-mode-browser': 4.3.30
-      '@smithy/util-defaults-mode-node': 4.2.33
-      '@smithy/util-endpoints': 3.2.8
-      '@smithy/util-middleware': 4.2.8
-      '@smithy/util-retry': 4.2.8
-      '@smithy/util-utf8': 4.2.0
-      tslib: 2.8.1
-    transitivePeerDependencies:
-      - aws-crt
-
-  '@aws-sdk/nested-clients@3.990.0':
-    dependencies:
-      '@aws-crypto/sha256-browser': 5.2.0
-      '@aws-crypto/sha256-js': 5.2.0
-      '@aws-sdk/core': 3.973.10
-      '@aws-sdk/middleware-host-header': 3.972.3
-      '@aws-sdk/middleware-logger': 3.972.3
-      '@aws-sdk/middleware-recursion-detection': 3.972.3
-      '@aws-sdk/middleware-user-agent': 3.972.10
-      '@aws-sdk/region-config-resolver': 3.972.3
-      '@aws-sdk/types': 3.973.1
-      '@aws-sdk/util-endpoints': 3.990.0
-      '@aws-sdk/util-user-agent-browser': 3.972.3
-      '@aws-sdk/util-user-agent-node': 3.972.8
-      '@smithy/config-resolver': 4.4.6
-      '@smithy/core': 3.23.0
-      '@smithy/fetch-http-handler': 5.3.9
-      '@smithy/hash-node': 4.2.8
-      '@smithy/invalid-dependency': 4.2.8
-      '@smithy/middleware-content-length': 4.2.8
-      '@smithy/middleware-endpoint': 4.4.14
-      '@smithy/middleware-retry': 4.4.31
-      '@smithy/middleware-serde': 4.2.9
-      '@smithy/middleware-stack': 4.2.8
-      '@smithy/node-config-provider': 4.3.8
-      '@smithy/node-http-handler': 4.4.10
-      '@smithy/protocol-http': 5.3.8
-      '@smithy/smithy-client': 4.11.3
-      '@smithy/types': 4.12.0
-      '@smithy/url-parser': 4.2.8
-      '@smithy/util-base64': 4.3.0
-      '@smithy/util-body-length-browser': 4.2.0
-      '@smithy/util-body-length-node': 4.2.1
-      '@smithy/util-defaults-mode-browser': 4.3.30
-      '@smithy/util-defaults-mode-node': 4.2.33
-      '@smithy/util-endpoints': 3.2.8
-      '@smithy/util-middleware': 4.2.8
-      '@smithy/util-retry': 4.2.8
-      '@smithy/util-utf8': 4.2.0
-      tslib: 2.8.1
-    transitivePeerDependencies:
-      - aws-crt
-
-  '@aws-sdk/region-config-resolver@3.972.3':
-    dependencies:
-      '@aws-sdk/types': 3.973.1
-      '@smithy/config-resolver': 4.4.6
-      '@smithy/node-config-provider': 4.3.8
-      '@smithy/types': 4.12.0
+      '@aws-sdk/core': 3.974.18
+      '@aws-sdk/signature-v4-multi-region': 3.996.32
+      '@aws-sdk/types': 3.973.11
+      '@smithy/core': 3.24.6
+      '@smithy/fetch-http-handler': 5.4.6
+      '@smithy/node-http-handler': 4.7.7
+      '@smithy/types': 4.14.3
       tslib: 2.8.1
 
-  '@aws-sdk/signature-v4-multi-region@3.980.0':
+  '@aws-sdk/signature-v4-multi-region@3.996.32':
     dependencies:
-      '@aws-sdk/middleware-sdk-s3': 3.972.10
-      '@aws-sdk/types': 3.973.1
-      '@smithy/protocol-http': 5.3.8
-      '@smithy/signature-v4': 5.3.8
-      '@smithy/types': 4.12.0
+      '@aws-sdk/types': 3.973.11
+      '@smithy/signature-v4': 5.4.6
+      '@smithy/types': 4.14.3
       tslib: 2.8.1
 
-  '@aws-sdk/token-providers@3.990.0':
+  '@aws-sdk/token-providers@3.1063.0':
     dependencies:
-      '@aws-sdk/core': 3.973.10
-      '@aws-sdk/nested-clients': 3.990.0
-      '@aws-sdk/types': 3.973.1
-      '@smithy/property-provider': 4.2.8
-      '@smithy/shared-ini-file-loader': 4.4.3
-      '@smithy/types': 4.12.0
-      tslib: 2.8.1
-    transitivePeerDependencies:
-      - aws-crt
-
-  '@aws-sdk/types@3.973.1':
-    dependencies:
-      '@smithy/types': 4.12.0
+      '@aws-sdk/core': 3.974.18
+      '@aws-sdk/nested-clients': 3.997.17
+      '@aws-sdk/types': 3.973.11
+      '@smithy/core': 3.24.6
+      '@smithy/types': 4.14.3
       tslib: 2.8.1
 
-  '@aws-sdk/util-arn-parser@3.972.2':
+  '@aws-sdk/types@3.973.11':
     dependencies:
-      tslib: 2.8.1
-
-  '@aws-sdk/util-endpoints@3.980.0':
-    dependencies:
-      '@aws-sdk/types': 3.973.1
-      '@smithy/types': 4.12.0
-      '@smithy/url-parser': 4.2.8
-      '@smithy/util-endpoints': 3.2.8
-      tslib: 2.8.1
-
-  '@aws-sdk/util-endpoints@3.990.0':
-    dependencies:
-      '@aws-sdk/types': 3.973.1
-      '@smithy/types': 4.12.0
-      '@smithy/url-parser': 4.2.8
-      '@smithy/util-endpoints': 3.2.8
-      tslib: 2.8.1
-
-  '@aws-sdk/util-format-url@3.972.3':
-    dependencies:
-      '@aws-sdk/types': 3.973.1
-      '@smithy/querystring-builder': 4.2.8
-      '@smithy/types': 4.12.0
+      '@smithy/types': 4.14.3
       tslib: 2.8.1
 
   '@aws-sdk/util-locate-window@3.535.0':
     dependencies:
       tslib: 2.8.1
 
-  '@aws-sdk/util-user-agent-browser@3.972.3':
+  '@aws-sdk/xml-builder@3.972.28':
     dependencies:
-      '@aws-sdk/types': 3.973.1
-      '@smithy/types': 4.12.0
-      bowser: 2.11.0
-      tslib: 2.8.1
-
-  '@aws-sdk/util-user-agent-node@3.972.8':
-    dependencies:
-      '@aws-sdk/middleware-user-agent': 3.972.10
-      '@aws-sdk/types': 3.973.1
-      '@smithy/node-config-provider': 4.3.8
-      '@smithy/types': 4.12.0
-      tslib: 2.8.1
-
-  '@aws-sdk/xml-builder@3.972.4':
-    dependencies:
-      '@smithy/types': 4.12.0
-      fast-xml-parser: 5.3.4
+      '@smithy/types': 4.14.3
+      fast-xml-parser: 5.7.3
       tslib: 2.8.1
 
   '@aws/lambda-invoke-store@0.2.3': {}
 
-  '@babel/code-frame@7.27.1':
+  '@babel/code-frame@7.29.0':
     dependencies:
-      '@babel/helper-validator-identifier': 7.27.1
+      '@babel/helper-validator-identifier': 7.29.7
       js-tokens: 4.0.0
       picocolors: 1.1.1
 
+  '@babel/compat-data@7.29.0': {}
+
+  '@babel/core@7.29.0':
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/generator': 7.29.1
+      '@babel/helper-compilation-targets': 7.28.6
+      '@babel/helper-module-transforms': 7.28.6(@babel/core@7.29.0)
+      '@babel/helpers': 7.29.2
+      '@babel/parser': 7.29.7
+      '@babel/template': 7.28.6
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.7
+      '@jridgewell/remapping': 2.3.5
+      convert-source-map: 2.0.0
+      debug: 4.4.3
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/generator@7.29.1':
     dependencies:
-      '@babel/parser': 7.29.0
-      '@babel/types': 7.29.0
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
       '@jridgewell/gen-mapping': 0.3.13
       '@jridgewell/trace-mapping': 0.3.31
       jsesc: 3.1.0
 
-  '@babel/helper-string-parser@7.27.1': {}
-
-  '@babel/helper-validator-identifier@7.27.1': {}
-
-  '@babel/helper-validator-identifier@7.28.5': {}
-
-  '@babel/parser@7.29.0':
+  '@babel/generator@8.0.0-rc.6':
     dependencies:
-      '@babel/types': 7.29.0
+      '@babel/parser': 8.0.0-rc.6
+      '@babel/types': 8.0.0-rc.6
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+      '@types/jsesc': 2.5.1
+      jsesc: 3.1.0
+
+  '@babel/helper-annotate-as-pure@7.27.3':
+    dependencies:
+      '@babel/types': 7.29.7
+
+  '@babel/helper-compilation-targets@7.28.6':
+    dependencies:
+      '@babel/compat-data': 7.29.0
+      '@babel/helper-validator-option': 7.27.1
+      browserslist: 4.28.2
+      lru-cache: 5.1.1
+      semver: 6.3.1
+
+  '@babel/helper-create-class-features-plugin@7.28.6(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-annotate-as-pure': 7.27.3
+      '@babel/helper-member-expression-to-functions': 7.28.5
+      '@babel/helper-optimise-call-expression': 7.27.1
+      '@babel/helper-replace-supers': 7.28.6(@babel/core@7.29.0)
+      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
+      '@babel/traverse': 7.29.0
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-globals@7.28.0': {}
+
+  '@babel/helper-member-expression-to-functions@7.28.5':
+    dependencies:
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-imports@7.28.6':
+    dependencies:
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-transforms@7.28.6(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-module-imports': 7.28.6
+      '@babel/helper-validator-identifier': 7.29.7
+      '@babel/traverse': 7.29.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-optimise-call-expression@7.27.1':
+    dependencies:
+      '@babel/types': 7.29.7
+
+  '@babel/helper-plugin-utils@7.28.6': {}
+
+  '@babel/helper-replace-supers@7.28.6(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-member-expression-to-functions': 7.28.5
+      '@babel/helper-optimise-call-expression': 7.27.1
+      '@babel/traverse': 7.29.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-skip-transparent-expression-wrappers@7.27.1':
+    dependencies:
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-string-parser@7.29.7': {}
+
+  '@babel/helper-string-parser@8.0.0-rc.6': {}
+
+  '@babel/helper-validator-identifier@7.29.7': {}
+
+  '@babel/helper-validator-identifier@8.0.0-rc.6': {}
+
+  '@babel/helper-validator-option@7.27.1': {}
+
+  '@babel/helpers@7.29.2':
+    dependencies:
+      '@babel/template': 7.28.6
+      '@babel/types': 7.29.7
+
+  '@babel/parser@7.29.7':
+    dependencies:
+      '@babel/types': 7.29.7
+
+  '@babel/parser@8.0.0-rc.6':
+    dependencies:
+      '@babel/types': 8.0.0-rc.6
+
+  '@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-plugin-utils': 7.28.6
+
+  '@babel/plugin-syntax-typescript@7.28.6(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-plugin-utils': 7.28.6
+
+  '@babel/plugin-transform-typescript@7.28.6(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-annotate-as-pure': 7.27.3
+      '@babel/helper-create-class-features-plugin': 7.28.6(@babel/core@7.29.0)
+      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
+      '@babel/plugin-syntax-typescript': 7.28.6(@babel/core@7.29.0)
+    transitivePeerDependencies:
+      - supports-color
 
   '@babel/runtime-corejs3@7.24.4':
     dependencies:
       core-js-pure: 3.37.0
       regenerator-runtime: 0.14.1
 
-  '@babel/types@7.29.0':
+  '@babel/runtime@7.29.2': {}
+
+  '@babel/template@7.28.6':
     dependencies:
-      '@babel/helper-string-parser': 7.27.1
-      '@babel/helper-validator-identifier': 7.28.5
+      '@babel/code-frame': 7.29.0
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
+
+  '@babel/traverse@7.29.0':
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/generator': 7.29.1
+      '@babel/helper-globals': 7.28.0
+      '@babel/parser': 7.29.7
+      '@babel/template': 7.28.6
+      '@babel/types': 7.29.7
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/types@7.29.7':
+    dependencies:
+      '@babel/helper-string-parser': 7.29.7
+      '@babel/helper-validator-identifier': 7.29.7
+
+  '@babel/types@8.0.0-rc.6':
+    dependencies:
+      '@babel/helper-string-parser': 8.0.0-rc.6
+      '@babel/helper-validator-identifier': 8.0.0-rc.6
 
   '@baszalmstra/rattler@0.2.1': {}
 
   '@bcoe/v8-coverage@1.0.2': {}
 
+  '@blazediff/core@1.9.1': {}
+
+  '@bomb.sh/tab@0.0.15(cac@6.7.14)(citty@0.2.2)':
+    optionalDependencies:
+      cac: 6.7.14
+      citty: 0.2.2
+
   '@bramus/specificity@2.4.2':
     dependencies:
       css-tree: 3.2.1
 
   '@breejs/later@4.2.0': {}
 
+  '@capsizecss/unpack@4.0.0':
+    dependencies:
+      fontkitten: 1.0.3
+
   '@cdktf/hcl2json@0.21.0':
     dependencies:
       fs-extra: 11.3.0
 
+  '@clack/core@1.4.1':
+    dependencies:
+      fast-wrap-ansi: 0.2.2
+      sisteransi: 1.0.5
+
+  '@clack/prompts@1.5.1':
+    dependencies:
+      '@clack/core': 1.4.1
+      fast-string-width: 3.0.2
+      fast-wrap-ansi: 0.2.2
+      sisteransi: 1.0.5
+
+  '@cloudflare/kv-asset-handler@0.4.2': {}
+
+  '@colordx/core@5.4.3': {}
+
   '@csstools/color-helpers@6.0.2': {}
 
-  '@csstools/css-calc@3.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
+  '@csstools/css-calc@3.2.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
     dependencies:
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
 
-  '@csstools/css-color-parser@4.0.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
+  '@csstools/css-color-parser@4.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
     dependencies:
       '@csstools/color-helpers': 6.0.2
-      '@csstools/css-calc': 3.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-calc': 3.2.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
 
@@ -5339,115 +9311,283 @@ snapshots:
     dependencies:
       '@csstools/css-tokenizer': 4.0.0
 
-  '@csstools/css-syntax-patches-for-csstree@1.1.1(css-tree@3.2.1)':
+  '@csstools/css-syntax-patches-for-csstree@1.1.5(css-tree@3.2.1)':
     optionalDependencies:
       css-tree: 3.2.1
 
   '@csstools/css-tokenizer@4.0.0': {}
 
-  '@emnapi/core@1.8.1':
+  '@dxup/nuxt@0.4.1(magicast@0.5.2)(typescript@6.0.3)':
     dependencies:
-      '@emnapi/wasi-threads': 1.1.0
+      '@dxup/unimport': 0.1.2
+      '@nuxt/kit': 4.4.7(magicast@0.5.2)
+      chokidar: 5.0.0
+      pathe: 2.0.3
+      tinyglobby: 0.2.17
+    optionalDependencies:
+      typescript: 6.0.3
+    transitivePeerDependencies:
+      - magicast
+
+  '@dxup/unimport@0.1.2': {}
+
+  '@emnapi/core@1.10.0':
+    dependencies:
+      '@emnapi/wasi-threads': 1.2.1
       tslib: 2.8.1
     optional: true
 
-  '@emnapi/runtime@1.8.1':
+  '@emnapi/core@1.9.2':
+    dependencies:
+      '@emnapi/wasi-threads': 1.2.1
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/runtime@1.10.0':
     dependencies:
       tslib: 2.8.1
     optional: true
 
-  '@emnapi/wasi-threads@1.1.0':
+  '@emnapi/runtime@1.9.2':
     dependencies:
       tslib: 2.8.1
     optional: true
 
-  '@esbuild/aix-ppc64@0.25.12':
+  '@emnapi/wasi-threads@1.2.1':
+    dependencies:
+      tslib: 2.8.1
     optional: true
 
-  '@esbuild/android-arm64@0.25.12':
+  '@esbuild/aix-ppc64@0.27.4':
     optional: true
 
-  '@esbuild/android-arm@0.25.12':
+  '@esbuild/aix-ppc64@0.28.0':
     optional: true
 
-  '@esbuild/android-x64@0.25.12':
+  '@esbuild/android-arm64@0.27.4':
     optional: true
 
-  '@esbuild/darwin-arm64@0.25.12':
+  '@esbuild/android-arm64@0.28.0':
     optional: true
 
-  '@esbuild/darwin-x64@0.25.12':
+  '@esbuild/android-arm@0.27.4':
     optional: true
 
-  '@esbuild/freebsd-arm64@0.25.12':
+  '@esbuild/android-arm@0.28.0':
     optional: true
 
-  '@esbuild/freebsd-x64@0.25.12':
+  '@esbuild/android-x64@0.27.4':
     optional: true
 
-  '@esbuild/linux-arm64@0.25.12':
+  '@esbuild/android-x64@0.28.0':
     optional: true
 
-  '@esbuild/linux-arm@0.25.12':
+  '@esbuild/darwin-arm64@0.27.4':
     optional: true
 
-  '@esbuild/linux-ia32@0.25.12':
+  '@esbuild/darwin-arm64@0.28.0':
     optional: true
 
-  '@esbuild/linux-loong64@0.25.12':
+  '@esbuild/darwin-x64@0.27.4':
     optional: true
 
-  '@esbuild/linux-mips64el@0.25.12':
+  '@esbuild/darwin-x64@0.28.0':
     optional: true
 
-  '@esbuild/linux-ppc64@0.25.12':
+  '@esbuild/freebsd-arm64@0.27.4':
     optional: true
 
-  '@esbuild/linux-riscv64@0.25.12':
+  '@esbuild/freebsd-arm64@0.28.0':
     optional: true
 
-  '@esbuild/linux-s390x@0.25.12':
+  '@esbuild/freebsd-x64@0.27.4':
     optional: true
 
-  '@esbuild/linux-x64@0.25.12':
+  '@esbuild/freebsd-x64@0.28.0':
     optional: true
 
-  '@esbuild/netbsd-arm64@0.25.12':
+  '@esbuild/linux-arm64@0.27.4':
     optional: true
 
-  '@esbuild/netbsd-x64@0.25.12':
+  '@esbuild/linux-arm64@0.28.0':
     optional: true
 
-  '@esbuild/openbsd-arm64@0.25.12':
+  '@esbuild/linux-arm@0.27.4':
     optional: true
 
-  '@esbuild/openbsd-x64@0.25.12':
+  '@esbuild/linux-arm@0.28.0':
     optional: true
 
-  '@esbuild/openharmony-arm64@0.25.12':
+  '@esbuild/linux-ia32@0.27.4':
     optional: true
 
-  '@esbuild/sunos-x64@0.25.12':
+  '@esbuild/linux-ia32@0.28.0':
     optional: true
 
-  '@esbuild/win32-arm64@0.25.12':
+  '@esbuild/linux-loong64@0.27.4':
     optional: true
 
-  '@esbuild/win32-ia32@0.25.12':
+  '@esbuild/linux-loong64@0.28.0':
     optional: true
 
-  '@esbuild/win32-x64@0.25.12':
+  '@esbuild/linux-mips64el@0.27.4':
     optional: true
 
+  '@esbuild/linux-mips64el@0.28.0':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.27.4':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.28.0':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.27.4':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.28.0':
+    optional: true
+
+  '@esbuild/linux-s390x@0.27.4':
+    optional: true
+
+  '@esbuild/linux-s390x@0.28.0':
+    optional: true
+
+  '@esbuild/linux-x64@0.27.4':
+    optional: true
+
+  '@esbuild/linux-x64@0.28.0':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.27.4':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.28.0':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.27.4':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.28.0':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.27.4':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.28.0':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.27.4':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.28.0':
+    optional: true
+
+  '@esbuild/openharmony-arm64@0.27.4':
+    optional: true
+
+  '@esbuild/openharmony-arm64@0.28.0':
+    optional: true
+
+  '@esbuild/sunos-x64@0.27.4':
+    optional: true
+
+  '@esbuild/sunos-x64@0.28.0':
+    optional: true
+
+  '@esbuild/win32-arm64@0.27.4':
+    optional: true
+
+  '@esbuild/win32-arm64@0.28.0':
+    optional: true
+
+  '@esbuild/win32-ia32@0.27.4':
+    optional: true
+
+  '@esbuild/win32-ia32@0.28.0':
+    optional: true
+
+  '@esbuild/win32-x64@0.27.4':
+    optional: true
+
+  '@esbuild/win32-x64@0.28.0':
+    optional: true
+
+  '@eslint-community/eslint-utils@4.9.1(eslint@10.4.1(jiti@2.7.0))':
+    dependencies:
+      eslint: 10.4.1(jiti@2.7.0)
+      eslint-visitor-keys: 3.4.3
+
+  '@eslint-community/regexpp@4.12.2': {}
+
+  '@eslint/config-array@0.23.5':
+    dependencies:
+      '@eslint/object-schema': 3.0.5
+      debug: 4.4.3
+      minimatch: 10.2.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/config-helpers@0.6.0':
+    dependencies:
+      '@eslint/core': 1.2.1
+
+  '@eslint/core@1.2.1':
+    dependencies:
+      '@types/json-schema': 7.0.15
+
+  '@eslint/js@10.0.1(eslint@10.4.1(jiti@2.7.0))':
+    optionalDependencies:
+      eslint: 10.4.1(jiti@2.7.0)
+
+  '@eslint/object-schema@3.0.5': {}
+
+  '@eslint/plugin-kit@0.7.2':
+    dependencies:
+      '@eslint/core': 1.2.1
+      levn: 0.4.1
+
   '@exodus/bytes@1.15.0': {}
 
+  '@floating-ui/core@1.7.5':
+    dependencies:
+      '@floating-ui/utils': 0.2.11
+
+  '@floating-ui/dom@1.7.6':
+    dependencies:
+      '@floating-ui/core': 1.7.5
+      '@floating-ui/utils': 0.2.11
+
+  '@floating-ui/utils@0.2.11': {}
+
+  '@floating-ui/vue@1.1.11(vue@3.5.35(typescript@6.0.3))':
+    dependencies:
+      '@floating-ui/dom': 1.7.6
+      '@floating-ui/utils': 0.2.11
+      vue-demi: 0.14.10(vue@3.5.35(typescript@6.0.3))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   '@gwhitney/detect-indent@7.0.1': {}
 
-  '@isaacs/balanced-match@4.0.1': {}
-
-  '@isaacs/brace-expansion@5.0.1':
+  '@hono/node-server@1.19.14(hono@4.12.23)':
     dependencies:
-      '@isaacs/balanced-match': 4.0.1
+      hono: 4.12.23
+
+  '@humanfs/core@0.19.1': {}
+
+  '@humanfs/node@0.16.7':
+    dependencies:
+      '@humanfs/core': 0.19.1
+      '@humanwhocodes/retry': 0.4.3
+
+  '@humanwhocodes/module-importer@1.0.1': {}
+
+  '@humanwhocodes/retry@0.4.3': {}
+
+  '@ioredis/commands@1.5.1': {}
 
   '@isaacs/cliui@8.0.2':
     dependencies:
@@ -5460,21 +9600,24 @@ snapshots:
 
   '@isaacs/fs-minipass@4.0.1':
     dependencies:
-      minipass: 7.1.2
-    optional: true
+      minipass: 7.1.3
 
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
       '@jridgewell/trace-mapping': 0.3.31
 
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
   '@jridgewell/resolve-uri@3.1.2': {}
 
   '@jridgewell/source-map@0.3.11':
     dependencies:
       '@jridgewell/gen-mapping': 0.3.13
       '@jridgewell/trace-mapping': 0.3.31
-    optional: true
 
   '@jridgewell/sourcemap-codec@1.5.5': {}
 
@@ -5483,21 +9626,78 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  '@keyv/serialize@1.1.1': {}
+
   '@kwsites/file-exists@1.1.1':
     dependencies:
-      debug: 4.4.1
+      debug: 4.4.3
     transitivePeerDependencies:
       - supports-color
 
   '@kwsites/promise-deferred@1.1.1': {}
 
-  '@napi-rs/wasm-runtime@1.1.1':
+  '@mapbox/node-pre-gyp@2.0.3(encoding@0.1.13)':
+    dependencies:
+      consola: 3.4.2
+      detect-libc: 2.0.3
+      https-proxy-agent: 7.0.6
+      node-fetch: 2.7.0(encoding@0.1.13)
+      nopt: 8.1.0
+      semver: 7.8.2
+      tar: 7.5.7
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+
+  '@mdx-js/react@3.1.1(@types/react@19.2.14)(react@19.2.5)':
+    dependencies:
+      '@types/mdx': 2.0.13
+      '@types/react': 19.2.14
+      react: 19.2.5
+
+  '@modelcontextprotocol/sdk@1.29.0(zod@4.4.3)':
+    dependencies:
+      '@hono/node-server': 1.19.14(hono@4.12.23)
+      ajv: 8.20.0
+      ajv-formats: 3.0.1(ajv@8.20.0)
+      content-type: 1.0.5
+      cors: 2.8.6
+      cross-spawn: 7.0.6
+      eventsource: 3.0.7
+      eventsource-parser: 3.1.0
+      express: 5.2.1
+      express-rate-limit: 8.5.2(express@5.2.1)
+      hono: 4.12.23
+      jose: 6.2.3
+      json-schema-typed: 8.0.2
+      pkce-challenge: 5.0.1
+      raw-body: 3.0.2
+      zod: 4.4.3
+      zod-to-json-schema: 3.25.2(zod@4.4.3)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@napi-rs/wasm-runtime@1.1.4':
     dependencies:
-      '@emnapi/core': 1.8.1
-      '@emnapi/runtime': 1.8.1
       '@tybys/wasm-util': 0.10.1
     optional: true
 
+  '@napi-rs/wasm-runtime@1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
+    dependencies:
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
+      '@tybys/wasm-util': 0.10.1
+    optional: true
+
+  '@napi-rs/wasm-runtime@1.1.4(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)':
+    dependencies:
+      '@emnapi/core': 1.9.2
+      '@emnapi/runtime': 1.9.2
+      '@tybys/wasm-util': 0.10.1
+    optional: true
+
+  '@nodable/entities@2.1.1': {}
+
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -5510,233 +9710,917 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.17.1
 
-  '@npmcli/agent@4.0.0':
-    dependencies:
-      agent-base: 7.1.3
-      http-proxy-agent: 7.0.2
-      https-proxy-agent: 7.0.6
-      lru-cache: 11.2.6
-      socks-proxy-agent: 8.0.3
-    transitivePeerDependencies:
-      - supports-color
-    optional: true
-
   '@npmcli/fs@5.0.0':
     dependencies:
-      semver: 7.7.4
+      semver: 7.8.2
+
+  '@nuxt/cli@3.35.2(@nuxt/schema@4.4.7)(cac@6.7.14)(magicast@0.5.2)':
+    dependencies:
+      '@bomb.sh/tab': 0.0.15(cac@6.7.14)(citty@0.2.2)
+      '@clack/prompts': 1.5.1
+      c12: 3.3.4(magicast@0.5.2)
+      citty: 0.2.2
+      confbox: 0.2.4
+      consola: 3.4.2
+      debug: 4.4.3
+      defu: 6.1.7
+      exsolve: 1.0.8
+      fuse.js: 7.4.2
+      fzf: 0.5.2
+      giget: 3.2.0
+      jiti: 2.7.0
+      listhen: 1.10.0
+      nypm: 0.6.6
+      ofetch: 1.5.1
+      ohash: 2.0.11
+      pathe: 2.0.3
+      perfect-debounce: 2.1.0
+      pkg-types: 2.3.1
+      scule: 1.3.0
+      semver: 7.8.2
+      srvx: 0.11.16
+      std-env: 4.1.0
+      tinyclip: 0.1.12
+      tinyexec: 1.2.4
+      ufo: 1.6.4
+      youch: 4.1.1
+    optionalDependencies:
+      '@nuxt/schema': 4.4.7
+    transitivePeerDependencies:
+      - cac
+      - commander
+      - magicast
+      - supports-color
+
+  '@nuxt/devalue@2.0.2': {}
+
+  '@nuxt/devtools-kit@3.2.4(magicast@0.5.2)(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))':
+    dependencies:
+      '@nuxt/kit': 4.4.7(magicast@0.5.2)
+      execa: 8.0.1
+      vite: 8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0)
+    transitivePeerDependencies:
+      - magicast
+
+  '@nuxt/devtools-wizard@3.2.4':
+    dependencies:
+      '@clack/prompts': 1.5.1
+      consola: 3.4.2
+      diff: 8.0.3
+      execa: 8.0.1
+      magicast: 0.5.2
+      pathe: 2.0.3
+      pkg-types: 2.3.1
+      semver: 7.8.2
+
+  '@nuxt/devtools@3.2.4(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))(vue@3.5.35(typescript@6.0.3))':
+    dependencies:
+      '@nuxt/devtools-kit': 3.2.4(magicast@0.5.2)(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))
+      '@nuxt/devtools-wizard': 3.2.4
+      '@nuxt/kit': 4.4.7(magicast@0.5.2)
+      '@vue/devtools-core': 8.1.1(vue@3.5.35(typescript@6.0.3))
+      '@vue/devtools-kit': 8.1.2
+      birpc: 4.0.0
+      consola: 3.4.2
+      destr: 2.0.5
+      error-stack-parser-es: 1.0.5
+      execa: 8.0.1
+      fast-npm-meta: 1.4.2
+      get-port-please: 3.2.0
+      hookable: 6.1.1
+      image-meta: 0.2.2
+      is-installed-globally: 1.0.0
+      launch-editor: 2.13.2
+      local-pkg: 1.1.2
+      magicast: 0.5.2
+      nypm: 0.6.6
+      ohash: 2.0.11
+      pathe: 2.0.3
+      perfect-debounce: 2.1.0
+      pkg-types: 2.3.1
+      semver: 7.8.2
+      simple-git: 3.36.0
+      sirv: 3.0.2
+      structured-clone-es: 2.0.0
+      tinyglobby: 0.2.17
+      vite: 8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0)
+      vite-plugin-inspect: 11.3.3(@nuxt/kit@4.4.7(magicast@0.5.2))(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))
+      vite-plugin-vue-tracer: 1.3.0(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))(vue@3.5.35(typescript@6.0.3))
+      which: 6.0.1
+      ws: 8.20.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+      - vue
+
+  '@nuxt/fonts@0.14.0(db0@0.3.4(better-sqlite3@12.8.0))(ioredis@5.10.1)(magicast@0.5.2)(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))':
+    dependencies:
+      '@nuxt/devtools-kit': 3.2.4(magicast@0.5.2)(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))
+      '@nuxt/kit': 4.4.7(magicast@0.5.2)
+      consola: 3.4.2
+      defu: 6.1.7
+      fontless: 0.2.1(db0@0.3.4(better-sqlite3@12.8.0))(ioredis@5.10.1)(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))
+      h3: 1.15.11
+      magic-regexp: 0.10.0
+      ofetch: 1.5.1
+      pathe: 2.0.3
+      sirv: 3.0.2
+      tinyglobby: 0.2.17
+      ufo: 1.6.4
+      unifont: 0.7.4
+      unplugin: 3.0.0
+      unstorage: 1.17.5(db0@0.3.4(better-sqlite3@12.8.0))(ioredis@5.10.1)
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/functions'
+      - '@vercel/kv'
+      - aws4fetch
+      - db0
+      - idb-keyval
+      - ioredis
+      - magicast
+      - uploadthing
+      - vite
+
+  '@nuxt/kit@4.4.7(magicast@0.5.2)':
+    dependencies:
+      c12: 3.3.4(magicast@0.5.2)
+      consola: 3.4.2
+      defu: 6.1.7
+      destr: 2.0.5
+      errx: 0.1.0
+      exsolve: 1.0.8
+      ignore: 7.0.5
+      jiti: 2.7.0
+      klona: 2.0.6
+      mlly: 1.8.2
+      ohash: 2.0.11
+      pathe: 2.0.3
+      pkg-types: 2.3.1
+      rc9: 3.0.1
+      scule: 1.3.0
+      semver: 7.8.2
+      tinyglobby: 0.2.17
+      ufo: 1.6.4
+      unctx: 2.5.0
+      untyped: 2.0.0
+    transitivePeerDependencies:
+      - magicast
+
+  '@nuxt/nitro-server@4.4.7(@babel/plugin-syntax-typescript@7.28.6(@babel/core@7.29.0))(better-sqlite3@12.8.0)(db0@0.3.4(better-sqlite3@12.8.0))(encoding@0.1.13)(ioredis@5.10.1)(magicast@0.5.2)(nuxt@4.4.7(@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.29.0))(@babel/plugin-syntax-typescript@7.28.6(@babel/core@7.29.0))(@parcel/watcher@2.5.6)(@types/node@25.9.2)(@vue/compiler-sfc@3.5.35)(better-sqlite3@12.8.0)(cac@6.7.14)(db0@0.3.4(better-sqlite3@12.8.0))(encoding@0.1.13)(eslint@10.4.1(jiti@2.7.0))(ioredis@5.10.1)(lightningcss@1.32.0)(magicast@0.5.2)(optionator@0.9.4)(oxlint@1.57.0)(rolldown@1.1.0)(rollup-plugin-visualizer@7.0.1(rolldown@1.1.0)(rollup@4.61.1))(rollup@4.61.1)(terser@5.44.0)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))(vue-tsc@3.3.4(typescript@6.0.3))(yaml@2.9.0))(oxc-parser@0.133.0)(rolldown@1.1.0)(typescript@6.0.3)':
+    dependencies:
+      '@nuxt/devalue': 2.0.2
+      '@nuxt/kit': 4.4.7(magicast@0.5.2)
+      '@unhead/vue': 2.1.15(vue@3.5.35(typescript@6.0.3))
+      '@vue/shared': 3.5.35
+      consola: 3.4.2
+      defu: 6.1.7
+      destr: 2.0.5
+      devalue: 5.8.1
+      errx: 0.1.0
+      escape-string-regexp: 5.0.0
+      exsolve: 1.0.8
+      h3: 1.15.11
+      impound: 1.1.5
+      klona: 2.0.6
+      mocked-exports: 0.1.1
+      nitropack: 2.13.4(better-sqlite3@12.8.0)(encoding@0.1.13)(oxc-parser@0.133.0)(rolldown@1.1.0)
+      nuxt: 4.4.7(@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.29.0))(@babel/plugin-syntax-typescript@7.28.6(@babel/core@7.29.0))(@parcel/watcher@2.5.6)(@types/node@25.9.2)(@vue/compiler-sfc@3.5.35)(better-sqlite3@12.8.0)(cac@6.7.14)(db0@0.3.4(better-sqlite3@12.8.0))(encoding@0.1.13)(eslint@10.4.1(jiti@2.7.0))(ioredis@5.10.1)(lightningcss@1.32.0)(magicast@0.5.2)(optionator@0.9.4)(oxlint@1.57.0)(rolldown@1.1.0)(rollup-plugin-visualizer@7.0.1(rolldown@1.1.0)(rollup@4.61.1))(rollup@4.61.1)(terser@5.44.0)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))(vue-tsc@3.3.4(typescript@6.0.3))(yaml@2.9.0)
+      nypm: 0.6.6
+      ohash: 2.0.11
+      pathe: 2.0.3
+      rou3: 0.8.1
+      std-env: 4.1.0
+      ufo: 1.6.4
+      unctx: 2.5.0
+      unstorage: 1.17.5(db0@0.3.4(better-sqlite3@12.8.0))(ioredis@5.10.1)
+      vue: 3.5.35(typescript@6.0.3)
+      vue-bundle-renderer: 2.2.0
+      vue-devtools-stub: 0.1.0
+    optionalDependencies:
+      '@babel/plugin-syntax-typescript': 7.28.6(@babel/core@7.29.0)
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@electric-sql/pglite'
+      - '@libsql/client'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/functions'
+      - '@vercel/kv'
+      - aws4fetch
+      - bare-abort-controller
+      - bare-buffer
+      - better-sqlite3
+      - db0
+      - drizzle-orm
+      - encoding
+      - idb-keyval
+      - ioredis
+      - magicast
+      - mysql2
+      - oxc-parser
+      - react-native-b4a
+      - rolldown
+      - sqlite3
+      - supports-color
+      - typescript
+      - uploadthing
+      - xml2js
+
+  '@nuxt/schema@4.4.7':
+    dependencies:
+      '@vue/shared': 3.5.35
+      defu: 6.1.7
+      pathe: 2.0.3
+      pkg-types: 2.3.1
+      std-env: 4.1.0
+
+  '@nuxt/telemetry@2.8.0(@nuxt/kit@4.4.7(magicast@0.5.2))':
+    dependencies:
+      '@nuxt/kit': 4.4.7(magicast@0.5.2)
+      citty: 0.2.2
+      consola: 3.4.2
+      ofetch: 2.0.0-alpha.3
+      rc9: 3.0.1
+      std-env: 4.1.0
+
+  '@nuxt/vite-builder@4.4.7(01d9006e6f33ee22c805b8f2349663c0)':
+    dependencies:
+      '@nuxt/kit': 4.4.7(magicast@0.5.2)
+      '@rollup/plugin-replace': 6.0.3(rollup@4.61.1)
+      '@vitejs/plugin-vue': 6.0.7(vite@7.3.5(@types/node@25.9.2)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.9.0))(vue@3.5.35(typescript@6.0.3))
+      '@vitejs/plugin-vue-jsx': 5.1.5(vite@7.3.5(@types/node@25.9.2)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.9.0))(vue@3.5.35(typescript@6.0.3))
+      autoprefixer: 10.5.0(postcss@8.5.15)
+      consola: 3.4.2
+      cssnano: 8.0.1(postcss@8.5.15)
+      defu: 6.1.7
+      escape-string-regexp: 5.0.0
+      exsolve: 1.0.8
+      get-port-please: 3.2.0
+      jiti: 2.7.0
+      knitwork: 1.3.0
+      magic-string: 0.30.21
+      mlly: 1.8.2
+      mocked-exports: 0.1.1
+      nuxt: 4.4.7(@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.29.0))(@babel/plugin-syntax-typescript@7.28.6(@babel/core@7.29.0))(@parcel/watcher@2.5.6)(@types/node@25.9.2)(@vue/compiler-sfc@3.5.35)(better-sqlite3@12.8.0)(cac@6.7.14)(db0@0.3.4(better-sqlite3@12.8.0))(encoding@0.1.13)(eslint@10.4.1(jiti@2.7.0))(ioredis@5.10.1)(lightningcss@1.32.0)(magicast@0.5.2)(optionator@0.9.4)(oxlint@1.57.0)(rolldown@1.1.0)(rollup-plugin-visualizer@7.0.1(rolldown@1.1.0)(rollup@4.61.1))(rollup@4.61.1)(terser@5.44.0)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))(vue-tsc@3.3.4(typescript@6.0.3))(yaml@2.9.0)
+      nypm: 0.6.6
+      pathe: 2.0.3
+      pkg-types: 2.3.1
+      postcss: 8.5.15
+      seroval: 1.5.4
+      std-env: 4.1.0
+      ufo: 1.6.4
+      unenv: 2.0.0-rc.24
+      vite: 7.3.5(@types/node@25.9.2)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.9.0)
+      vite-node: 5.3.0(@types/node@25.9.2)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.9.0)
+      vite-plugin-checker: 0.14.1(eslint@10.4.1(jiti@2.7.0))(optionator@0.9.4)(oxlint@1.57.0)(typescript@6.0.3)(vite@7.3.5(@types/node@25.9.2)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.9.0))(vue-tsc@3.3.4(typescript@6.0.3))
+      vue: 3.5.35(typescript@6.0.3)
+      vue-bundle-renderer: 2.2.0
+    optionalDependencies:
+      '@babel/plugin-syntax-jsx': 7.28.6(@babel/core@7.29.0)
+      rolldown: 1.1.0
+      rollup-plugin-visualizer: 7.0.1(rolldown@1.1.0)(rollup@4.61.1)
+    transitivePeerDependencies:
+      - '@biomejs/biome'
+      - '@types/node'
+      - eslint
+      - less
+      - lightningcss
+      - magicast
+      - meow
+      - optionator
+      - oxlint
+      - rollup
+      - sass
+      - sass-embedded
+      - stylelint
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - typescript
+      - vue-tsc
+      - yaml
 
   '@one-ini/wasm@0.1.1': {}
 
-  '@one-ini/wasm@0.2.0': {}
+  '@one-ini/wasm@0.2.1': {}
 
-  '@opentelemetry/api-logs@0.211.0':
+  '@opentelemetry/api-logs@0.218.0':
     dependencies:
-      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/api': 1.9.1
 
-  '@opentelemetry/api@1.9.0': {}
+  '@opentelemetry/api@1.9.1': {}
 
-  '@opentelemetry/context-async-hooks@2.5.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/context-async-hooks@2.7.1(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/api': 1.9.1
 
-  '@opentelemetry/core@2.0.1(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/core@2.7.1(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/semantic-conventions': 1.39.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/semantic-conventions': 1.41.1
 
-  '@opentelemetry/core@2.5.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/exporter-trace-otlp-http@0.218.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/semantic-conventions': 1.39.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.7.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/otlp-exporter-base': 0.218.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/otlp-transformer': 0.218.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/resources': 2.7.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/sdk-trace-base': 2.7.1(@opentelemetry/api@1.9.1)
 
-  '@opentelemetry/exporter-trace-otlp-http@0.211.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-bunyan@0.63.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.5.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/otlp-exporter-base': 0.211.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/otlp-transformer': 0.211.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/resources': 2.5.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/sdk-trace-base': 2.5.0(@opentelemetry/api@1.9.0)
-
-  '@opentelemetry/instrumentation-bunyan@0.56.0(@opentelemetry/api@1.9.0)':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/api-logs': 0.211.0
-      '@opentelemetry/instrumentation': 0.211.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/api-logs': 0.218.0
+      '@opentelemetry/instrumentation': 0.218.0(@opentelemetry/api@1.9.1)
       '@types/bunyan': 1.8.11
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-http@0.211.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-http@0.218.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.5.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.211.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.39.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.7.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation': 0.218.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.41.1
       forwarded-parse: 2.1.2
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-redis@0.59.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-redis@0.66.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.211.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/redis-common': 0.38.2
-      '@opentelemetry/semantic-conventions': 1.39.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/instrumentation': 0.218.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/redis-common': 0.38.3
+      '@opentelemetry/semantic-conventions': 1.41.1
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation@0.211.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation@0.218.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/api-logs': 0.211.0
-      import-in-the-middle: 2.0.6
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/api-logs': 0.218.0
+      import-in-the-middle: 3.0.0
       require-in-the-middle: 8.0.1
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/otlp-exporter-base@0.211.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/otlp-exporter-base@0.218.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.5.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/otlp-transformer': 0.211.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.7.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/otlp-transformer': 0.218.0(@opentelemetry/api@1.9.1)
 
-  '@opentelemetry/otlp-transformer@0.211.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/otlp-transformer@0.218.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/api-logs': 0.211.0
-      '@opentelemetry/core': 2.5.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/resources': 2.5.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/sdk-logs': 0.211.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/sdk-metrics': 2.5.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/sdk-trace-base': 2.5.0(@opentelemetry/api@1.9.0)
-      protobufjs: 8.0.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/api-logs': 0.218.0
+      '@opentelemetry/core': 2.7.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/resources': 2.7.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/sdk-logs': 0.218.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/sdk-metrics': 2.7.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/sdk-trace-base': 2.7.1(@opentelemetry/api@1.9.1)
 
-  '@opentelemetry/redis-common@0.38.2': {}
+  '@opentelemetry/redis-common@0.38.3': {}
 
-  '@opentelemetry/resource-detector-aws@2.11.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/resource-detector-aws@2.18.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.0.1(@opentelemetry/api@1.9.0)
-      '@opentelemetry/resources': 2.5.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.39.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.7.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/resources': 2.7.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.41.1
 
-  '@opentelemetry/resource-detector-azure@0.19.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/resource-detector-azure@0.26.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.0.1(@opentelemetry/api@1.9.0)
-      '@opentelemetry/resources': 2.5.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.39.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.7.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/resources': 2.7.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.41.1
 
-  '@opentelemetry/resource-detector-gcp@0.46.0(@opentelemetry/api@1.9.0)(encoding@0.1.13)':
+  '@opentelemetry/resource-detector-gcp@0.53.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.0.1(@opentelemetry/api@1.9.0)
-      '@opentelemetry/resources': 2.5.0(@opentelemetry/api@1.9.0)
-      gcp-metadata: 6.1.0(encoding@0.1.13)
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.7.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/resources': 2.7.1(@opentelemetry/api@1.9.1)
+      gcp-metadata: 8.1.2
     transitivePeerDependencies:
-      - encoding
       - supports-color
 
-  '@opentelemetry/resource-detector-github@0.32.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/resource-detector-github@0.32.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/resources': 2.5.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/resources': 2.7.1(@opentelemetry/api@1.9.1)
 
-  '@opentelemetry/resources@2.5.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/resources@2.7.1(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.5.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.39.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.7.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.41.1
 
-  '@opentelemetry/sdk-logs@0.211.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/sdk-logs@0.218.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/api-logs': 0.211.0
-      '@opentelemetry/core': 2.5.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/resources': 2.5.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/api-logs': 0.218.0
+      '@opentelemetry/core': 2.7.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/resources': 2.7.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.41.1
 
-  '@opentelemetry/sdk-metrics@2.5.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/sdk-metrics@2.7.1(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.5.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/resources': 2.5.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.7.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/resources': 2.7.1(@opentelemetry/api@1.9.1)
 
-  '@opentelemetry/sdk-trace-base@2.5.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/sdk-trace-base@2.7.1(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.5.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/resources': 2.5.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.39.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.7.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/resources': 2.7.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.41.1
 
-  '@opentelemetry/sdk-trace-node@2.5.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/sdk-trace-node@2.7.1(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/context-async-hooks': 2.5.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/core': 2.5.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/sdk-trace-base': 2.5.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/context-async-hooks': 2.7.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/core': 2.7.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/sdk-trace-base': 2.7.1(@opentelemetry/api@1.9.1)
 
-  '@opentelemetry/semantic-conventions@1.39.0': {}
+  '@opentelemetry/semantic-conventions@1.41.1': {}
 
-  '@oxc-project/types@0.113.0': {}
-
-  '@oxlint/binding-android-arm-eabi@1.47.0':
+  '@oxc-minify/binding-android-arm-eabi@0.133.0':
     optional: true
 
-  '@oxlint/binding-android-arm64@1.47.0':
+  '@oxc-minify/binding-android-arm64@0.133.0':
     optional: true
 
-  '@oxlint/binding-darwin-arm64@1.47.0':
+  '@oxc-minify/binding-darwin-arm64@0.133.0':
     optional: true
 
-  '@oxlint/binding-darwin-x64@1.47.0':
+  '@oxc-minify/binding-darwin-x64@0.133.0':
     optional: true
 
-  '@oxlint/binding-freebsd-x64@1.47.0':
+  '@oxc-minify/binding-freebsd-x64@0.133.0':
     optional: true
 
-  '@oxlint/binding-linux-arm-gnueabihf@1.47.0':
+  '@oxc-minify/binding-linux-arm-gnueabihf@0.133.0':
     optional: true
 
-  '@oxlint/binding-linux-arm-musleabihf@1.47.0':
+  '@oxc-minify/binding-linux-arm-musleabihf@0.133.0':
     optional: true
 
-  '@oxlint/binding-linux-arm64-gnu@1.47.0':
+  '@oxc-minify/binding-linux-arm64-gnu@0.133.0':
     optional: true
 
-  '@oxlint/binding-linux-arm64-musl@1.47.0':
+  '@oxc-minify/binding-linux-arm64-musl@0.133.0':
     optional: true
 
-  '@oxlint/binding-linux-ppc64-gnu@1.47.0':
+  '@oxc-minify/binding-linux-ppc64-gnu@0.133.0':
     optional: true
 
-  '@oxlint/binding-linux-riscv64-gnu@1.47.0':
+  '@oxc-minify/binding-linux-riscv64-gnu@0.133.0':
     optional: true
 
-  '@oxlint/binding-linux-riscv64-musl@1.47.0':
+  '@oxc-minify/binding-linux-riscv64-musl@0.133.0':
     optional: true
 
-  '@oxlint/binding-linux-s390x-gnu@1.47.0':
+  '@oxc-minify/binding-linux-s390x-gnu@0.133.0':
     optional: true
 
-  '@oxlint/binding-linux-x64-gnu@1.47.0':
+  '@oxc-minify/binding-linux-x64-gnu@0.133.0':
     optional: true
 
-  '@oxlint/binding-linux-x64-musl@1.47.0':
+  '@oxc-minify/binding-linux-x64-musl@0.133.0':
     optional: true
 
-  '@oxlint/binding-openharmony-arm64@1.47.0':
+  '@oxc-minify/binding-openharmony-arm64@0.133.0':
     optional: true
 
-  '@oxlint/binding-win32-arm64-msvc@1.47.0':
+  '@oxc-minify/binding-wasm32-wasi@0.133.0':
+    dependencies:
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
+      '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
     optional: true
 
-  '@oxlint/binding-win32-ia32-msvc@1.47.0':
+  '@oxc-minify/binding-win32-arm64-msvc@0.133.0':
     optional: true
 
-  '@oxlint/binding-win32-x64-msvc@1.47.0':
+  '@oxc-minify/binding-win32-ia32-msvc@0.133.0':
     optional: true
 
+  '@oxc-minify/binding-win32-x64-msvc@0.133.0':
+    optional: true
+
+  '@oxc-parser/binding-android-arm-eabi@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-android-arm-eabi@0.133.0':
+    optional: true
+
+  '@oxc-parser/binding-android-arm64@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-android-arm64@0.133.0':
+    optional: true
+
+  '@oxc-parser/binding-darwin-arm64@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-darwin-arm64@0.133.0':
+    optional: true
+
+  '@oxc-parser/binding-darwin-x64@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-darwin-x64@0.133.0':
+    optional: true
+
+  '@oxc-parser/binding-freebsd-x64@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-freebsd-x64@0.133.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.133.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm-musleabihf@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm-musleabihf@0.133.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm64-gnu@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm64-gnu@0.133.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm64-musl@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm64-musl@0.133.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-ppc64-gnu@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-ppc64-gnu@0.133.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-riscv64-gnu@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-riscv64-gnu@0.133.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-riscv64-musl@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-riscv64-musl@0.133.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-s390x-gnu@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-s390x-gnu@0.133.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-x64-gnu@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-x64-gnu@0.133.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-x64-musl@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-x64-musl@0.133.0':
+    optional: true
+
+  '@oxc-parser/binding-openharmony-arm64@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-openharmony-arm64@0.133.0':
+    optional: true
+
+  '@oxc-parser/binding-wasm32-wasi@0.127.0':
+    dependencies:
+      '@emnapi/core': 1.9.2
+      '@emnapi/runtime': 1.9.2
+      '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)
+    optional: true
+
+  '@oxc-parser/binding-wasm32-wasi@0.133.0':
+    dependencies:
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
+      '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+    optional: true
+
+  '@oxc-parser/binding-win32-arm64-msvc@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-win32-arm64-msvc@0.133.0':
+    optional: true
+
+  '@oxc-parser/binding-win32-ia32-msvc@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-win32-ia32-msvc@0.133.0':
+    optional: true
+
+  '@oxc-parser/binding-win32-x64-msvc@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-win32-x64-msvc@0.133.0':
+    optional: true
+
+  '@oxc-project/types@0.122.0':
+    optional: true
+
+  '@oxc-project/types@0.127.0': {}
+
+  '@oxc-project/types@0.133.0': {}
+
+  '@oxc-project/types@0.134.0': {}
+
+  '@oxc-resolver/binding-android-arm-eabi@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-android-arm64@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-darwin-arm64@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-darwin-x64@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-freebsd-x64@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-linux-arm-gnueabihf@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-linux-arm-musleabihf@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-linux-arm64-gnu@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-linux-arm64-musl@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-linux-ppc64-gnu@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-linux-riscv64-gnu@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-linux-riscv64-musl@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-linux-s390x-gnu@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-linux-x64-gnu@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-linux-x64-musl@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-openharmony-arm64@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-wasm32-wasi@11.20.0':
+    dependencies:
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
+      '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+    optional: true
+
+  '@oxc-resolver/binding-win32-arm64-msvc@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-win32-x64-msvc@11.20.0':
+    optional: true
+
+  '@oxc-transform/binding-android-arm-eabi@0.133.0':
+    optional: true
+
+  '@oxc-transform/binding-android-arm64@0.133.0':
+    optional: true
+
+  '@oxc-transform/binding-darwin-arm64@0.133.0':
+    optional: true
+
+  '@oxc-transform/binding-darwin-x64@0.133.0':
+    optional: true
+
+  '@oxc-transform/binding-freebsd-x64@0.133.0':
+    optional: true
+
+  '@oxc-transform/binding-linux-arm-gnueabihf@0.133.0':
+    optional: true
+
+  '@oxc-transform/binding-linux-arm-musleabihf@0.133.0':
+    optional: true
+
+  '@oxc-transform/binding-linux-arm64-gnu@0.133.0':
+    optional: true
+
+  '@oxc-transform/binding-linux-arm64-musl@0.133.0':
+    optional: true
+
+  '@oxc-transform/binding-linux-ppc64-gnu@0.133.0':
+    optional: true
+
+  '@oxc-transform/binding-linux-riscv64-gnu@0.133.0':
+    optional: true
+
+  '@oxc-transform/binding-linux-riscv64-musl@0.133.0':
+    optional: true
+
+  '@oxc-transform/binding-linux-s390x-gnu@0.133.0':
+    optional: true
+
+  '@oxc-transform/binding-linux-x64-gnu@0.133.0':
+    optional: true
+
+  '@oxc-transform/binding-linux-x64-musl@0.133.0':
+    optional: true
+
+  '@oxc-transform/binding-openharmony-arm64@0.133.0':
+    optional: true
+
+  '@oxc-transform/binding-wasm32-wasi@0.133.0':
+    dependencies:
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
+      '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+    optional: true
+
+  '@oxc-transform/binding-win32-arm64-msvc@0.133.0':
+    optional: true
+
+  '@oxc-transform/binding-win32-ia32-msvc@0.133.0':
+    optional: true
+
+  '@oxc-transform/binding-win32-x64-msvc@0.133.0':
+    optional: true
+
+  '@oxlint/binding-android-arm-eabi@1.57.0':
+    optional: true
+
+  '@oxlint/binding-android-arm64@1.57.0':
+    optional: true
+
+  '@oxlint/binding-darwin-arm64@1.57.0':
+    optional: true
+
+  '@oxlint/binding-darwin-x64@1.57.0':
+    optional: true
+
+  '@oxlint/binding-freebsd-x64@1.57.0':
+    optional: true
+
+  '@oxlint/binding-linux-arm-gnueabihf@1.57.0':
+    optional: true
+
+  '@oxlint/binding-linux-arm-musleabihf@1.57.0':
+    optional: true
+
+  '@oxlint/binding-linux-arm64-gnu@1.57.0':
+    optional: true
+
+  '@oxlint/binding-linux-arm64-musl@1.57.0':
+    optional: true
+
+  '@oxlint/binding-linux-ppc64-gnu@1.57.0':
+    optional: true
+
+  '@oxlint/binding-linux-riscv64-gnu@1.57.0':
+    optional: true
+
+  '@oxlint/binding-linux-riscv64-musl@1.57.0':
+    optional: true
+
+  '@oxlint/binding-linux-s390x-gnu@1.57.0':
+    optional: true
+
+  '@oxlint/binding-linux-x64-gnu@1.57.0':
+    optional: true
+
+  '@oxlint/binding-linux-x64-musl@1.57.0':
+    optional: true
+
+  '@oxlint/binding-openharmony-arm64@1.57.0':
+    optional: true
+
+  '@oxlint/binding-win32-arm64-msvc@1.57.0':
+    optional: true
+
+  '@oxlint/binding-win32-ia32-msvc@1.57.0':
+    optional: true
+
+  '@oxlint/binding-win32-x64-msvc@1.57.0':
+    optional: true
+
+  '@package-json/types@0.0.12': {}
+
+  '@parcel/watcher-android-arm64@2.5.6':
+    optional: true
+
+  '@parcel/watcher-darwin-arm64@2.5.6':
+    optional: true
+
+  '@parcel/watcher-darwin-x64@2.5.6':
+    optional: true
+
+  '@parcel/watcher-freebsd-x64@2.5.6':
+    optional: true
+
+  '@parcel/watcher-linux-arm-glibc@2.5.6':
+    optional: true
+
+  '@parcel/watcher-linux-arm-musl@2.5.6':
+    optional: true
+
+  '@parcel/watcher-linux-arm64-glibc@2.5.6':
+    optional: true
+
+  '@parcel/watcher-linux-arm64-musl@2.5.6':
+    optional: true
+
+  '@parcel/watcher-linux-x64-glibc@2.5.6':
+    optional: true
+
+  '@parcel/watcher-linux-x64-musl@2.5.6':
+    optional: true
+
+  '@parcel/watcher-wasm@2.5.6':
+    dependencies:
+      is-glob: 4.0.3
+      picomatch: 4.0.4
+
+  '@parcel/watcher-win32-arm64@2.5.6':
+    optional: true
+
+  '@parcel/watcher-win32-ia32@2.5.6':
+    optional: true
+
+  '@parcel/watcher-win32-x64@2.5.6':
+    optional: true
+
+  '@parcel/watcher@2.5.6':
+    dependencies:
+      detect-libc: 2.0.3
+      is-glob: 4.0.3
+      node-addon-api: 7.1.1
+      picomatch: 4.0.4
+    optionalDependencies:
+      '@parcel/watcher-android-arm64': 2.5.6
+      '@parcel/watcher-darwin-arm64': 2.5.6
+      '@parcel/watcher-darwin-x64': 2.5.6
+      '@parcel/watcher-freebsd-x64': 2.5.6
+      '@parcel/watcher-linux-arm-glibc': 2.5.6
+      '@parcel/watcher-linux-arm-musl': 2.5.6
+      '@parcel/watcher-linux-arm64-glibc': 2.5.6
+      '@parcel/watcher-linux-arm64-musl': 2.5.6
+      '@parcel/watcher-linux-x64-glibc': 2.5.6
+      '@parcel/watcher-linux-x64-musl': 2.5.6
+      '@parcel/watcher-win32-arm64': 2.5.6
+      '@parcel/watcher-win32-ia32': 2.5.6
+      '@parcel/watcher-win32-x64': 2.5.6
+
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
@@ -5745,7 +10629,7 @@ snapshots:
   '@pnpm/catalogs.resolver@1000.0.5':
     dependencies:
       '@pnpm/catalogs.protocol-parser': 1001.0.0
-      '@pnpm/error': 1000.0.5
+      '@pnpm/error': 1000.1.0
 
   '@pnpm/catalogs.types@1000.0.0': {}
 
@@ -5753,7 +10637,7 @@ snapshots:
 
   '@pnpm/constants@6.1.0': {}
 
-  '@pnpm/error@1000.0.5':
+  '@pnpm/error@1000.1.0':
     dependencies:
       '@pnpm/constants': 1001.3.1
 
@@ -5765,11 +10649,11 @@ snapshots:
     dependencies:
       graceful-fs: 4.2.11
 
-  '@pnpm/parse-overrides@1001.0.3':
+  '@pnpm/parse-overrides@1001.0.4':
     dependencies:
       '@pnpm/catalogs.resolver': 1000.0.5
       '@pnpm/catalogs.types': 1000.0.0
-      '@pnpm/error': 1000.0.5
+      '@pnpm/error': 1000.1.0
       '@pnpm/parse-wanted-dependency': 1001.0.0
 
   '@pnpm/parse-wanted-dependency@1001.0.0':
@@ -5810,28 +10694,17 @@ snapshots:
 
   '@polka/url@1.0.0-next.29': {}
 
-  '@protobufjs/aspromise@1.1.2': {}
-
-  '@protobufjs/base64@1.1.2': {}
-
-  '@protobufjs/codegen@2.0.4': {}
-
-  '@protobufjs/eventemitter@1.1.0': {}
-
-  '@protobufjs/fetch@1.1.0':
+  '@poppinss/colors@4.1.6':
     dependencies:
-      '@protobufjs/aspromise': 1.1.2
-      '@protobufjs/inquire': 1.1.0
+      kleur: 4.1.5
 
-  '@protobufjs/float@1.0.2': {}
+  '@poppinss/dumper@0.7.0':
+    dependencies:
+      '@poppinss/colors': 4.1.6
+      '@sindresorhus/is': 7.2.0
+      supports-color: 10.2.2
 
-  '@protobufjs/inquire@1.1.0': {}
-
-  '@protobufjs/path@1.1.2': {}
-
-  '@protobufjs/pool@1.1.0': {}
-
-  '@protobufjs/utf8@1.1.0': {}
+  '@poppinss/exception@1.2.3': {}
 
   '@qnighy/marshal@0.1.3':
     dependencies:
@@ -5841,439 +10714,439 @@ snapshots:
     dependencies:
       quansync: 1.0.0
 
-  '@redis/bloom@5.10.0(@redis/client@5.10.0)':
-    dependencies:
-      '@redis/client': 5.10.0
-
-  '@redis/client@5.10.0':
+  '@redis/client@5.12.1(@opentelemetry/api@1.9.1)':
     dependencies:
       cluster-key-slot: 1.1.2
+    optionalDependencies:
+      '@opentelemetry/api': 1.9.1
 
-  '@redis/json@5.10.0(@redis/client@5.10.0)':
+  '@renovatebot/detect-tools@4.0.8':
     dependencies:
-      '@redis/client': 5.10.0
+      fs-extra: 11.3.5
+      toml-eslint-parser: 1.0.3
+      upath: 3.0.7
+      zod: 4.4.3
 
-  '@redis/search@5.10.0(@redis/client@5.10.0)':
-    dependencies:
-      '@redis/client': 5.10.0
-
-  '@redis/time-series@5.10.0(@redis/client@5.10.0)':
-    dependencies:
-      '@redis/client': 5.10.0
-
-  '@renovatebot/detect-tools@1.2.8':
-    dependencies:
-      fs-extra: 11.3.3
-      toml-eslint-parser: 0.12.0
-      upath: 2.0.1
-      zod: 3.25.76
-
-  '@renovatebot/good-enough-parser@1.2.0':
+  '@renovatebot/good-enough-parser@2.0.1':
     dependencies:
       '@thi.ng/zipper': 1.0.3
       '@types/moo': 0.5.10
       klona: 2.0.6
-      moo: 0.5.2
+      moo: 0.5.3
 
-  '@renovatebot/osv-offline-db@2.0.1':
+  '@renovatebot/osv-offline-db@3.0.3':
     dependencies:
-      '@seald-io/nedb': 4.1.2
-
-  '@renovatebot/osv-offline@2.0.1':
-    dependencies:
-      '@renovatebot/osv-offline-db': 2.0.1
-      adm-zip: 0.5.16
       debug: 4.4.3
-      fs-extra: 11.3.3
-      got: 11.8.6
+    transitivePeerDependencies:
+      - supports-color
+
+  '@renovatebot/osv-offline@3.0.3':
+    dependencies:
+      '@renovatebot/osv-offline-db': 3.0.3
+      adm-zip: 0.5.17
+      debug: 4.4.3
+      fs-extra: 11.3.5
+      got: 15.0.5
       luxon: 3.7.2
     transitivePeerDependencies:
       - supports-color
 
-  '@renovatebot/pep440@4.2.1': {}
+  '@renovatebot/pep440@5.0.0': {}
 
-  '@renovatebot/pgp@1.3.1': {}
+  '@renovatebot/pgp@1.3.12': {}
 
-  '@renovatebot/ruby-semver@4.1.2': {}
+  '@renovatebot/ruby-semver@5.0.0': {}
 
-  '@rolldown/binding-android-arm64@1.0.0-rc.4':
+  '@rolldown/binding-android-arm64@1.0.0-rc.11':
     optional: true
 
-  '@rolldown/binding-darwin-arm64@1.0.0-rc.4':
+  '@rolldown/binding-android-arm64@1.0.3':
     optional: true
 
-  '@rolldown/binding-darwin-x64@1.0.0-rc.4':
+  '@rolldown/binding-android-arm64@1.1.0':
     optional: true
 
-  '@rolldown/binding-freebsd-x64@1.0.0-rc.4':
+  '@rolldown/binding-darwin-arm64@1.0.0-rc.11':
     optional: true
 
-  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.4':
+  '@rolldown/binding-darwin-arm64@1.0.3':
     optional: true
 
-  '@rolldown/binding-linux-arm64-gnu@1.0.0-rc.4':
+  '@rolldown/binding-darwin-arm64@1.1.0':
     optional: true
 
-  '@rolldown/binding-linux-arm64-musl@1.0.0-rc.4':
+  '@rolldown/binding-darwin-x64@1.0.0-rc.11':
     optional: true
 
-  '@rolldown/binding-linux-x64-gnu@1.0.0-rc.4':
+  '@rolldown/binding-darwin-x64@1.0.3':
     optional: true
 
-  '@rolldown/binding-linux-x64-musl@1.0.0-rc.4':
+  '@rolldown/binding-darwin-x64@1.1.0':
     optional: true
 
-  '@rolldown/binding-openharmony-arm64@1.0.0-rc.4':
+  '@rolldown/binding-freebsd-x64@1.0.0-rc.11':
     optional: true
 
-  '@rolldown/binding-wasm32-wasi@1.0.0-rc.4':
+  '@rolldown/binding-freebsd-x64@1.0.3':
+    optional: true
+
+  '@rolldown/binding-freebsd-x64@1.1.0':
+    optional: true
+
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.11':
+    optional: true
+
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.3':
+    optional: true
+
+  '@rolldown/binding-linux-arm-gnueabihf@1.1.0':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-gnu@1.0.0-rc.11':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-gnu@1.0.3':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-gnu@1.1.0':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-musl@1.0.0-rc.11':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-musl@1.0.3':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-musl@1.1.0':
+    optional: true
+
+  '@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.11':
+    optional: true
+
+  '@rolldown/binding-linux-ppc64-gnu@1.0.3':
+    optional: true
+
+  '@rolldown/binding-linux-ppc64-gnu@1.1.0':
+    optional: true
+
+  '@rolldown/binding-linux-s390x-gnu@1.0.0-rc.11':
+    optional: true
+
+  '@rolldown/binding-linux-s390x-gnu@1.0.3':
+    optional: true
+
+  '@rolldown/binding-linux-s390x-gnu@1.1.0':
+    optional: true
+
+  '@rolldown/binding-linux-x64-gnu@1.0.0-rc.11':
+    optional: true
+
+  '@rolldown/binding-linux-x64-gnu@1.0.3':
+    optional: true
+
+  '@rolldown/binding-linux-x64-gnu@1.1.0':
+    optional: true
+
+  '@rolldown/binding-linux-x64-musl@1.0.0-rc.11':
+    optional: true
+
+  '@rolldown/binding-linux-x64-musl@1.0.3':
+    optional: true
+
+  '@rolldown/binding-linux-x64-musl@1.1.0':
+    optional: true
+
+  '@rolldown/binding-openharmony-arm64@1.0.0-rc.11':
+    optional: true
+
+  '@rolldown/binding-openharmony-arm64@1.0.3':
+    optional: true
+
+  '@rolldown/binding-openharmony-arm64@1.1.0':
+    optional: true
+
+  '@rolldown/binding-wasm32-wasi@1.0.0-rc.11':
     dependencies:
-      '@napi-rs/wasm-runtime': 1.1.1
+      '@napi-rs/wasm-runtime': 1.1.4
+    transitivePeerDependencies:
+      - '@emnapi/core'
+      - '@emnapi/runtime'
     optional: true
 
-  '@rolldown/binding-win32-arm64-msvc@1.0.0-rc.4':
-    optional: true
-
-  '@rolldown/binding-win32-x64-msvc@1.0.0-rc.4':
-    optional: true
-
-  '@rolldown/pluginutils@1.0.0-rc.4': {}
-
-  '@rollup/rollup-android-arm-eabi@4.61.0':
-    optional: true
-
-  '@rollup/rollup-android-arm64@4.61.0':
-    optional: true
-
-  '@rollup/rollup-darwin-arm64@4.61.0':
-    optional: true
-
-  '@rollup/rollup-darwin-x64@4.61.0':
-    optional: true
-
-  '@rollup/rollup-freebsd-arm64@4.61.0':
-    optional: true
-
-  '@rollup/rollup-freebsd-x64@4.61.0':
-    optional: true
-
-  '@rollup/rollup-linux-arm-gnueabihf@4.61.0':
-    optional: true
-
-  '@rollup/rollup-linux-arm-musleabihf@4.61.0':
-    optional: true
-
-  '@rollup/rollup-linux-arm64-gnu@4.61.0':
-    optional: true
-
-  '@rollup/rollup-linux-arm64-musl@4.61.0':
-    optional: true
-
-  '@rollup/rollup-linux-loong64-gnu@4.61.0':
-    optional: true
-
-  '@rollup/rollup-linux-loong64-musl@4.61.0':
-    optional: true
-
-  '@rollup/rollup-linux-ppc64-gnu@4.61.0':
-    optional: true
-
-  '@rollup/rollup-linux-ppc64-musl@4.61.0':
-    optional: true
-
-  '@rollup/rollup-linux-riscv64-gnu@4.61.0':
-    optional: true
-
-  '@rollup/rollup-linux-riscv64-musl@4.61.0':
-    optional: true
-
-  '@rollup/rollup-linux-s390x-gnu@4.61.0':
-    optional: true
-
-  '@rollup/rollup-linux-x64-gnu@4.61.0':
-    optional: true
-
-  '@rollup/rollup-linux-x64-musl@4.61.0':
-    optional: true
-
-  '@rollup/rollup-openbsd-x64@4.61.0':
-    optional: true
-
-  '@rollup/rollup-openharmony-arm64@4.61.0':
-    optional: true
-
-  '@rollup/rollup-win32-arm64-msvc@4.61.0':
-    optional: true
-
-  '@rollup/rollup-win32-ia32-msvc@4.61.0':
-    optional: true
-
-  '@rollup/rollup-win32-x64-gnu@4.61.0':
-    optional: true
-
-  '@rollup/rollup-win32-x64-msvc@4.61.0':
-    optional: true
-
-  '@seald-io/binary-search-tree@1.0.3': {}
-
-  '@seald-io/nedb@4.1.2':
+  '@rolldown/binding-wasm32-wasi@1.0.0-rc.11(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
     dependencies:
-      '@seald-io/binary-search-tree': 1.0.3
-      localforage: 1.10.0
-      util: 0.12.5
+      '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+    transitivePeerDependencies:
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+    optional: true
+
+  '@rolldown/binding-wasm32-wasi@1.0.3':
+    dependencies:
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
+      '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+    optional: true
+
+  '@rolldown/binding-wasm32-wasi@1.1.0':
+    dependencies:
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
+      '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+    optional: true
+
+  '@rolldown/binding-win32-arm64-msvc@1.0.0-rc.11':
+    optional: true
+
+  '@rolldown/binding-win32-arm64-msvc@1.0.3':
+    optional: true
+
+  '@rolldown/binding-win32-arm64-msvc@1.1.0':
+    optional: true
+
+  '@rolldown/binding-win32-x64-msvc@1.0.0-rc.11':
+    optional: true
+
+  '@rolldown/binding-win32-x64-msvc@1.0.3':
+    optional: true
+
+  '@rolldown/binding-win32-x64-msvc@1.1.0':
+    optional: true
+
+  '@rolldown/pluginutils@1.0.0-rc.11':
+    optional: true
+
+  '@rolldown/pluginutils@1.0.1': {}
+
+  '@rollup/plugin-alias@6.0.0(rollup@4.61.1)':
+    optionalDependencies:
+      rollup: 4.61.1
+
+  '@rollup/plugin-commonjs@29.0.2(rollup@4.61.1)':
+    dependencies:
+      '@rollup/pluginutils': 5.3.0(rollup@4.61.1)
+      commondir: 1.0.1
+      estree-walker: 2.0.2
+      fdir: 6.5.0(picomatch@4.0.4)
+      is-reference: 1.2.1
+      magic-string: 0.30.21
+      picomatch: 4.0.4
+    optionalDependencies:
+      rollup: 4.61.1
+
+  '@rollup/plugin-inject@5.0.5(rollup@4.61.1)':
+    dependencies:
+      '@rollup/pluginutils': 5.3.0(rollup@4.61.1)
+      estree-walker: 2.0.2
+      magic-string: 0.30.21
+    optionalDependencies:
+      rollup: 4.61.1
+
+  '@rollup/plugin-json@6.1.0(rollup@4.61.1)':
+    dependencies:
+      '@rollup/pluginutils': 5.3.0(rollup@4.61.1)
+    optionalDependencies:
+      rollup: 4.61.1
+
+  '@rollup/plugin-node-resolve@16.0.3(rollup@4.61.1)':
+    dependencies:
+      '@rollup/pluginutils': 5.3.0(rollup@4.61.1)
+      '@types/resolve': 1.20.2
+      deepmerge: 4.3.1
+      is-module: 1.0.0
+      resolve: 1.22.8
+    optionalDependencies:
+      rollup: 4.61.1
+
+  '@rollup/plugin-replace@6.0.3(rollup@4.61.1)':
+    dependencies:
+      '@rollup/pluginutils': 5.3.0(rollup@4.61.1)
+      magic-string: 0.30.21
+    optionalDependencies:
+      rollup: 4.61.1
+
+  '@rollup/plugin-terser@1.0.0(rollup@4.61.1)':
+    dependencies:
+      serialize-javascript: 7.0.5
+      smob: 1.6.1
+      terser: 5.44.0
+    optionalDependencies:
+      rollup: 4.61.1
+
+  '@rollup/pluginutils@5.3.0(rollup@4.61.1)':
+    dependencies:
+      '@types/estree': 1.0.9
+      estree-walker: 2.0.2
+      picomatch: 4.0.4
+    optionalDependencies:
+      rollup: 4.61.1
+
+  '@rollup/rollup-android-arm-eabi@4.61.1':
+    optional: true
+
+  '@rollup/rollup-android-arm64@4.61.1':
+    optional: true
+
+  '@rollup/rollup-darwin-arm64@4.61.1':
+    optional: true
+
+  '@rollup/rollup-darwin-x64@4.61.1':
+    optional: true
+
+  '@rollup/rollup-freebsd-arm64@4.61.1':
+    optional: true
+
+  '@rollup/rollup-freebsd-x64@4.61.1':
+    optional: true
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.61.1':
+    optional: true
+
+  '@rollup/rollup-linux-arm-musleabihf@4.61.1':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-gnu@4.61.1':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-musl@4.61.1':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-gnu@4.61.1':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-musl@4.61.1':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-gnu@4.61.1':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-musl@4.61.1':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-gnu@4.61.1':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-musl@4.61.1':
+    optional: true
+
+  '@rollup/rollup-linux-s390x-gnu@4.61.1':
+    optional: true
+
+  '@rollup/rollup-linux-x64-gnu@4.61.1':
+    optional: true
+
+  '@rollup/rollup-linux-x64-musl@4.61.1':
+    optional: true
+
+  '@rollup/rollup-openbsd-x64@4.61.1':
+    optional: true
+
+  '@rollup/rollup-openharmony-arm64@4.61.1':
+    optional: true
+
+  '@rollup/rollup-win32-arm64-msvc@4.61.1':
+    optional: true
+
+  '@rollup/rollup-win32-ia32-msvc@4.61.1':
+    optional: true
+
+  '@rollup/rollup-win32-x64-gnu@4.61.1':
+    optional: true
+
+  '@rollup/rollup-win32-x64-msvc@4.61.1':
+    optional: true
+
+  '@sec-ant/readable-stream@0.4.1': {}
+
+  '@shikijs/core@4.2.0':
+    dependencies:
+      '@shikijs/primitive': 4.2.0
+      '@shikijs/types': 4.2.0
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+      hast-util-to-html: 9.0.5
+
+  '@shikijs/engine-javascript@4.2.0':
+    dependencies:
+      '@shikijs/types': 4.2.0
+      '@shikijs/vscode-textmate': 10.0.2
+      oniguruma-to-es: 4.3.6
+
+  '@shikijs/engine-oniguruma@4.2.0':
+    dependencies:
+      '@shikijs/types': 4.2.0
+      '@shikijs/vscode-textmate': 10.0.2
+
+  '@shikijs/langs@4.2.0':
+    dependencies:
+      '@shikijs/types': 4.2.0
+
+  '@shikijs/primitive@4.2.0':
+    dependencies:
+      '@shikijs/types': 4.2.0
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
+  '@shikijs/themes@4.2.0':
+    dependencies:
+      '@shikijs/types': 4.2.0
+
+  '@shikijs/types@4.2.0':
+    dependencies:
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
+  '@shikijs/vscode-textmate@10.0.2': {}
+
+  '@simple-git/args-pathspec@1.0.3': {}
+
+  '@simple-git/argv-parser@1.1.1':
+    dependencies:
+      '@simple-git/args-pathspec': 1.0.3
 
   '@sindresorhus/is@4.6.0': {}
 
   '@sindresorhus/is@7.2.0': {}
 
-  '@smithy/abort-controller@4.2.8':
-    dependencies:
-      '@smithy/types': 4.12.0
-      tslib: 2.8.1
+  '@sindresorhus/is@8.1.0': {}
 
-  '@smithy/chunked-blob-reader-native@4.2.1':
-    dependencies:
-      '@smithy/util-base64': 4.3.0
-      tslib: 2.8.1
+  '@sindresorhus/merge-streams@4.0.0': {}
 
-  '@smithy/chunked-blob-reader@5.2.0':
-    dependencies:
-      tslib: 2.8.1
-
-  '@smithy/config-resolver@4.4.6':
-    dependencies:
-      '@smithy/node-config-provider': 4.3.8
-      '@smithy/types': 4.12.0
-      '@smithy/util-config-provider': 4.2.0
-      '@smithy/util-endpoints': 3.2.8
-      '@smithy/util-middleware': 4.2.8
-      tslib: 2.8.1
-
-  '@smithy/core@3.23.0':
-    dependencies:
-      '@smithy/middleware-serde': 4.2.9
-      '@smithy/protocol-http': 5.3.8
-      '@smithy/types': 4.12.0
-      '@smithy/util-base64': 4.3.0
-      '@smithy/util-body-length-browser': 4.2.0
-      '@smithy/util-middleware': 4.2.8
-      '@smithy/util-stream': 4.5.12
-      '@smithy/util-utf8': 4.2.0
-      '@smithy/uuid': 1.1.0
-      tslib: 2.8.1
-
-  '@smithy/credential-provider-imds@4.2.8':
-    dependencies:
-      '@smithy/node-config-provider': 4.3.8
-      '@smithy/property-provider': 4.2.8
-      '@smithy/types': 4.12.0
-      '@smithy/url-parser': 4.2.8
-      tslib: 2.8.1
-
-  '@smithy/eventstream-codec@4.2.8':
+  '@smithy/core@3.24.6':
     dependencies:
       '@aws-crypto/crc32': 5.2.0
-      '@smithy/types': 4.12.0
-      '@smithy/util-hex-encoding': 4.2.0
+      '@smithy/types': 4.14.3
       tslib: 2.8.1
 
-  '@smithy/eventstream-serde-browser@4.2.8':
+  '@smithy/credential-provider-imds@4.3.8':
     dependencies:
-      '@smithy/eventstream-serde-universal': 4.2.8
-      '@smithy/types': 4.12.0
+      '@smithy/core': 3.24.6
+      '@smithy/types': 4.14.3
       tslib: 2.8.1
 
-  '@smithy/eventstream-serde-config-resolver@4.3.8':
+  '@smithy/fetch-http-handler@5.4.6':
     dependencies:
-      '@smithy/types': 4.12.0
-      tslib: 2.8.1
-
-  '@smithy/eventstream-serde-node@4.2.8':
-    dependencies:
-      '@smithy/eventstream-serde-universal': 4.2.8
-      '@smithy/types': 4.12.0
-      tslib: 2.8.1
-
-  '@smithy/eventstream-serde-universal@4.2.8':
-    dependencies:
-      '@smithy/eventstream-codec': 4.2.8
-      '@smithy/types': 4.12.0
-      tslib: 2.8.1
-
-  '@smithy/fetch-http-handler@5.3.9':
-    dependencies:
-      '@smithy/protocol-http': 5.3.8
-      '@smithy/querystring-builder': 4.2.8
-      '@smithy/types': 4.12.0
-      '@smithy/util-base64': 4.3.0
-      tslib: 2.8.1
-
-  '@smithy/hash-blob-browser@4.2.9':
-    dependencies:
-      '@smithy/chunked-blob-reader': 5.2.0
-      '@smithy/chunked-blob-reader-native': 4.2.1
-      '@smithy/types': 4.12.0
-      tslib: 2.8.1
-
-  '@smithy/hash-node@4.2.8':
-    dependencies:
-      '@smithy/types': 4.12.0
-      '@smithy/util-buffer-from': 4.2.0
-      '@smithy/util-utf8': 4.2.0
-      tslib: 2.8.1
-
-  '@smithy/hash-stream-node@4.2.8':
-    dependencies:
-      '@smithy/types': 4.12.0
-      '@smithy/util-utf8': 4.2.0
-      tslib: 2.8.1
-
-  '@smithy/invalid-dependency@4.2.8':
-    dependencies:
-      '@smithy/types': 4.12.0
+      '@smithy/core': 3.24.6
+      '@smithy/types': 4.14.3
       tslib: 2.8.1
 
   '@smithy/is-array-buffer@2.2.0':
     dependencies:
       tslib: 2.8.1
 
-  '@smithy/is-array-buffer@4.2.0':
+  '@smithy/node-http-handler@4.7.7':
     dependencies:
+      '@smithy/core': 3.24.6
+      '@smithy/types': 4.14.3
       tslib: 2.8.1
 
-  '@smithy/md5-js@4.2.8':
+  '@smithy/signature-v4@5.4.6':
     dependencies:
-      '@smithy/types': 4.12.0
-      '@smithy/util-utf8': 4.2.0
+      '@smithy/core': 3.24.6
+      '@smithy/types': 4.14.3
       tslib: 2.8.1
 
-  '@smithy/middleware-content-length@4.2.8':
-    dependencies:
-      '@smithy/protocol-http': 5.3.8
-      '@smithy/types': 4.12.0
-      tslib: 2.8.1
-
-  '@smithy/middleware-endpoint@4.4.14':
-    dependencies:
-      '@smithy/core': 3.23.0
-      '@smithy/middleware-serde': 4.2.9
-      '@smithy/node-config-provider': 4.3.8
-      '@smithy/shared-ini-file-loader': 4.4.3
-      '@smithy/types': 4.12.0
-      '@smithy/url-parser': 4.2.8
-      '@smithy/util-middleware': 4.2.8
-      tslib: 2.8.1
-
-  '@smithy/middleware-retry@4.4.31':
-    dependencies:
-      '@smithy/node-config-provider': 4.3.8
-      '@smithy/protocol-http': 5.3.8
-      '@smithy/service-error-classification': 4.2.8
-      '@smithy/smithy-client': 4.11.3
-      '@smithy/types': 4.12.0
-      '@smithy/util-middleware': 4.2.8
-      '@smithy/util-retry': 4.2.8
-      '@smithy/uuid': 1.1.0
-      tslib: 2.8.1
-
-  '@smithy/middleware-serde@4.2.9':
-    dependencies:
-      '@smithy/protocol-http': 5.3.8
-      '@smithy/types': 4.12.0
-      tslib: 2.8.1
-
-  '@smithy/middleware-stack@4.2.8':
-    dependencies:
-      '@smithy/types': 4.12.0
-      tslib: 2.8.1
-
-  '@smithy/node-config-provider@4.3.8':
-    dependencies:
-      '@smithy/property-provider': 4.2.8
-      '@smithy/shared-ini-file-loader': 4.4.3
-      '@smithy/types': 4.12.0
-      tslib: 2.8.1
-
-  '@smithy/node-http-handler@4.4.10':
-    dependencies:
-      '@smithy/abort-controller': 4.2.8
-      '@smithy/protocol-http': 5.3.8
-      '@smithy/querystring-builder': 4.2.8
-      '@smithy/types': 4.12.0
-      tslib: 2.8.1
-
-  '@smithy/property-provider@4.2.8':
-    dependencies:
-      '@smithy/types': 4.12.0
-      tslib: 2.8.1
-
-  '@smithy/protocol-http@5.3.8':
-    dependencies:
-      '@smithy/types': 4.12.0
-      tslib: 2.8.1
-
-  '@smithy/querystring-builder@4.2.8':
-    dependencies:
-      '@smithy/types': 4.12.0
-      '@smithy/util-uri-escape': 4.2.0
-      tslib: 2.8.1
-
-  '@smithy/querystring-parser@4.2.8':
-    dependencies:
-      '@smithy/types': 4.12.0
-      tslib: 2.8.1
-
-  '@smithy/service-error-classification@4.2.8':
-    dependencies:
-      '@smithy/types': 4.12.0
-
-  '@smithy/shared-ini-file-loader@4.4.3':
-    dependencies:
-      '@smithy/types': 4.12.0
-      tslib: 2.8.1
-
-  '@smithy/signature-v4@5.3.8':
-    dependencies:
-      '@smithy/is-array-buffer': 4.2.0
-      '@smithy/protocol-http': 5.3.8
-      '@smithy/types': 4.12.0
-      '@smithy/util-hex-encoding': 4.2.0
-      '@smithy/util-middleware': 4.2.8
-      '@smithy/util-uri-escape': 4.2.0
-      '@smithy/util-utf8': 4.2.0
-      tslib: 2.8.1
-
-  '@smithy/smithy-client@4.11.3':
-    dependencies:
-      '@smithy/core': 3.23.0
-      '@smithy/middleware-endpoint': 4.4.14
-      '@smithy/middleware-stack': 4.2.8
-      '@smithy/protocol-http': 5.3.8
-      '@smithy/types': 4.12.0
-      '@smithy/util-stream': 4.5.12
-      tslib: 2.8.1
-
-  '@smithy/types@4.12.0':
-    dependencies:
-      tslib: 2.8.1
-
-  '@smithy/url-parser@4.2.8':
-    dependencies:
-      '@smithy/querystring-parser': 4.2.8
-      '@smithy/types': 4.12.0
-      tslib: 2.8.1
-
-  '@smithy/util-base64@4.3.0':
-    dependencies:
-      '@smithy/util-buffer-from': 4.2.0
-      '@smithy/util-utf8': 4.2.0
-      tslib: 2.8.1
-
-  '@smithy/util-body-length-browser@4.2.0':
-    dependencies:
-      tslib: 2.8.1
-
-  '@smithy/util-body-length-node@4.2.1':
+  '@smithy/types@4.14.3':
     dependencies:
       tslib: 2.8.1
 
@@ -6282,94 +11155,205 @@ snapshots:
       '@smithy/is-array-buffer': 2.2.0
       tslib: 2.8.1
 
-  '@smithy/util-buffer-from@4.2.0':
-    dependencies:
-      '@smithy/is-array-buffer': 4.2.0
-      tslib: 2.8.1
-
-  '@smithy/util-config-provider@4.2.0':
-    dependencies:
-      tslib: 2.8.1
-
-  '@smithy/util-defaults-mode-browser@4.3.30':
-    dependencies:
-      '@smithy/property-provider': 4.2.8
-      '@smithy/smithy-client': 4.11.3
-      '@smithy/types': 4.12.0
-      tslib: 2.8.1
-
-  '@smithy/util-defaults-mode-node@4.2.33':
-    dependencies:
-      '@smithy/config-resolver': 4.4.6
-      '@smithy/credential-provider-imds': 4.2.8
-      '@smithy/node-config-provider': 4.3.8
-      '@smithy/property-provider': 4.2.8
-      '@smithy/smithy-client': 4.11.3
-      '@smithy/types': 4.12.0
-      tslib: 2.8.1
-
-  '@smithy/util-endpoints@3.2.8':
-    dependencies:
-      '@smithy/node-config-provider': 4.3.8
-      '@smithy/types': 4.12.0
-      tslib: 2.8.1
-
-  '@smithy/util-hex-encoding@4.2.0':
-    dependencies:
-      tslib: 2.8.1
-
-  '@smithy/util-middleware@4.2.8':
-    dependencies:
-      '@smithy/types': 4.12.0
-      tslib: 2.8.1
-
-  '@smithy/util-retry@4.2.8':
-    dependencies:
-      '@smithy/service-error-classification': 4.2.8
-      '@smithy/types': 4.12.0
-      tslib: 2.8.1
-
-  '@smithy/util-stream@4.5.12':
-    dependencies:
-      '@smithy/fetch-http-handler': 5.3.9
-      '@smithy/node-http-handler': 4.4.10
-      '@smithy/types': 4.12.0
-      '@smithy/util-base64': 4.3.0
-      '@smithy/util-buffer-from': 4.2.0
-      '@smithy/util-hex-encoding': 4.2.0
-      '@smithy/util-utf8': 4.2.0
-      tslib: 2.8.1
-
-  '@smithy/util-uri-escape@4.2.0':
-    dependencies:
-      tslib: 2.8.1
-
   '@smithy/util-utf8@2.3.0':
     dependencies:
       '@smithy/util-buffer-from': 2.2.0
       tslib: 2.8.1
 
-  '@smithy/util-utf8@4.2.0':
-    dependencies:
-      '@smithy/util-buffer-from': 4.2.0
-      tslib: 2.8.1
-
-  '@smithy/util-waiter@4.2.8':
-    dependencies:
-      '@smithy/abort-controller': 4.2.8
-      '@smithy/types': 4.12.0
-      tslib: 2.8.1
-
-  '@smithy/uuid@1.1.0':
-    dependencies:
-      tslib: 2.8.1
+  '@speed-highlight/core@1.2.15': {}
 
   '@standard-schema/spec@1.1.0': {}
 
+  '@storybook/addon-a11y@10.4.2(storybook@10.4.2(@testing-library/dom@10.4.1)(@types/react@19.2.14)(prettier@3.8.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))':
+    dependencies:
+      '@storybook/global': 5.0.0
+      axe-core: 4.12.0
+      storybook: 10.4.2(@testing-library/dom@10.4.1)(@types/react@19.2.14)(prettier@3.8.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+
+  '@storybook/addon-docs@10.4.2(@types/react@19.2.14)(esbuild@0.28.0)(rollup@4.61.1)(storybook@10.4.2(@testing-library/dom@10.4.1)(@types/react@19.2.14)(prettier@3.8.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))':
+    dependencies:
+      '@mdx-js/react': 3.1.1(@types/react@19.2.14)(react@19.2.5)
+      '@storybook/csf-plugin': 10.4.2(esbuild@0.28.0)(rollup@4.61.1)(storybook@10.4.2(@testing-library/dom@10.4.1)(@types/react@19.2.14)(prettier@3.8.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))
+      '@storybook/icons': 2.0.2(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@storybook/react-dom-shim': 10.4.2(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(storybook@10.4.2(@testing-library/dom@10.4.1)(@types/react@19.2.14)(prettier@3.8.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
+      storybook: 10.4.2(@testing-library/dom@10.4.1)(@types/react@19.2.14)(prettier@3.8.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      ts-dedent: 2.2.0
+    optionalDependencies:
+      '@types/react': 19.2.14
+    transitivePeerDependencies:
+      - '@types/react-dom'
+      - esbuild
+      - rollup
+      - vite
+      - webpack
+
+  '@storybook/builder-vite@10.4.2(esbuild@0.28.0)(rollup@4.61.1)(storybook@10.4.2(@testing-library/dom@10.4.1)(@types/react@19.2.14)(prettier@3.8.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))':
+    dependencies:
+      '@storybook/csf-plugin': 10.4.2(esbuild@0.28.0)(rollup@4.61.1)(storybook@10.4.2(@testing-library/dom@10.4.1)(@types/react@19.2.14)(prettier@3.8.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))
+      storybook: 10.4.2(@testing-library/dom@10.4.1)(@types/react@19.2.14)(prettier@3.8.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      ts-dedent: 2.2.0
+      vite: 8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0)
+    transitivePeerDependencies:
+      - esbuild
+      - rollup
+      - webpack
+
+  '@storybook/csf-plugin@10.4.2(esbuild@0.28.0)(rollup@4.61.1)(storybook@10.4.2(@testing-library/dom@10.4.1)(@types/react@19.2.14)(prettier@3.8.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))':
+    dependencies:
+      storybook: 10.4.2(@testing-library/dom@10.4.1)(@types/react@19.2.14)(prettier@3.8.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      unplugin: 2.3.11
+    optionalDependencies:
+      esbuild: 0.28.0
+      rollup: 4.61.1
+      vite: 8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0)
+
+  '@storybook/global@5.0.0': {}
+
+  '@storybook/icons@2.0.2(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
+    dependencies:
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
+
+  '@storybook/react-dom-shim@10.4.2(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(storybook@10.4.2(@testing-library/dom@10.4.1)(@types/react@19.2.14)(prettier@3.8.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))':
+    dependencies:
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
+      storybook: 10.4.2(@testing-library/dom@10.4.1)(@types/react@19.2.14)(prettier@3.8.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@storybook/vue3-vite@10.4.2(esbuild@0.28.0)(rollup@4.61.1)(storybook@10.4.2(@testing-library/dom@10.4.1)(@types/react@19.2.14)(prettier@3.8.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))(vue@3.5.35(typescript@5.9.3))':
+    dependencies:
+      '@storybook/builder-vite': 10.4.2(esbuild@0.28.0)(rollup@4.61.1)(storybook@10.4.2(@testing-library/dom@10.4.1)(@types/react@19.2.14)(prettier@3.8.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))
+      '@storybook/vue3': 10.4.2(storybook@10.4.2(@testing-library/dom@10.4.1)(@types/react@19.2.14)(prettier@3.8.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(vue@3.5.35(typescript@5.9.3))
+      magic-string: 0.30.21
+      storybook: 10.4.2(@testing-library/dom@10.4.1)(@types/react@19.2.14)(prettier@3.8.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      typescript: 5.9.3
+      vite: 8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0)
+      vue-component-meta: 2.2.12(typescript@5.9.3)
+      vue-docgen-api: 4.79.2(vue@3.5.35(typescript@5.9.3))
+    transitivePeerDependencies:
+      - esbuild
+      - rollup
+      - vue
+      - webpack
+
+  '@storybook/vue3@10.4.2(storybook@10.4.2(@testing-library/dom@10.4.1)(@types/react@19.2.14)(prettier@3.8.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(vue@3.5.35(typescript@5.9.3))':
+    dependencies:
+      '@storybook/global': 5.0.0
+      storybook: 10.4.2(@testing-library/dom@10.4.1)(@types/react@19.2.14)(prettier@3.8.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      type-fest: 5.7.0
+      vue: 3.5.35(typescript@5.9.3)
+      vue-component-type-helpers: 3.3.4
+
+  '@stylistic/eslint-plugin@5.10.0(eslint@10.4.1(jiti@2.7.0))':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@10.4.1(jiti@2.7.0))
+      '@typescript-eslint/types': 8.60.1
+      eslint: 10.4.1(jiti@2.7.0)
+      eslint-visitor-keys: 4.2.1
+      espree: 10.4.0
+      estraverse: 5.3.0
+      picomatch: 4.0.4
+
   '@szmarczak/http-timer@4.0.6':
     dependencies:
       defer-to-connect: 2.0.1
 
+  '@tailwindcss/node@4.3.0':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.23.0
+      jiti: 2.7.0
+      lightningcss: 1.32.0
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.3.0
+
+  '@tailwindcss/oxide-android-arm64@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide@4.3.0':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.3.0
+      '@tailwindcss/oxide-darwin-arm64': 4.3.0
+      '@tailwindcss/oxide-darwin-x64': 4.3.0
+      '@tailwindcss/oxide-freebsd-x64': 4.3.0
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.3.0
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.3.0
+      '@tailwindcss/oxide-linux-arm64-musl': 4.3.0
+      '@tailwindcss/oxide-linux-x64-gnu': 4.3.0
+      '@tailwindcss/oxide-linux-x64-musl': 4.3.0
+      '@tailwindcss/oxide-wasm32-wasi': 4.3.0
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.3.0
+      '@tailwindcss/oxide-win32-x64-msvc': 4.3.0
+
+  '@tailwindcss/vite@4.3.0(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))':
+    dependencies:
+      '@tailwindcss/node': 4.3.0
+      '@tailwindcss/oxide': 4.3.0
+      tailwindcss: 4.3.0
+      vite: 8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0)
+
+  '@testing-library/dom@10.4.1':
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/runtime': 7.29.2
+      '@types/aria-query': 5.0.4
+      aria-query: 5.3.0
+      dom-accessibility-api: 0.5.16
+      lz-string: 1.5.0
+      picocolors: 1.1.1
+      pretty-format: 27.5.1
+
+  '@testing-library/jest-dom@6.9.1':
+    dependencies:
+      '@adobe/css-tools': 4.4.4
+      aria-query: 5.3.2
+      css.escape: 1.5.1
+      dom-accessibility-api: 0.6.3
+      picocolors: 1.1.1
+      redent: 3.0.0
+
+  '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.1)':
+    dependencies:
+      '@testing-library/dom': 10.4.1
+
   '@thi.ng/api@7.2.0': {}
 
   '@thi.ng/arrays@1.0.3':
@@ -6407,26 +11391,33 @@ snapshots:
       '@thi.ng/arrays': 1.0.3
       '@thi.ng/checks': 2.9.11
 
+  '@ts-morph/common@0.29.0':
+    dependencies:
+      minimatch: 10.2.5
+      path-browserify: 1.0.1
+      tinyglobby: 0.2.17
+
   '@tybys/wasm-util@0.10.1':
     dependencies:
       tslib: 2.8.1
     optional: true
 
+  '@types/aria-query@5.0.4': {}
+
   '@types/bunyan@1.8.11':
     dependencies:
-      '@types/node': 24.10.13
+      '@types/node': 25.9.2
 
   '@types/cacheable-request@6.0.3':
     dependencies:
       '@types/http-cache-semantics': 4.0.4
       '@types/keyv': 3.1.4
-      '@types/node': 24.10.13
+      '@types/node': 25.9.2
       '@types/responselike': 1.0.3
 
-  '@types/chai@5.2.3':
+  '@types/chai@5.2.2':
     dependencies:
       '@types/deep-eql': 4.0.2
-      assertion-error: 2.0.1
 
   '@types/debug@4.1.12':
     dependencies:
@@ -6436,35 +11427,49 @@ snapshots:
 
   '@types/emscripten@1.39.10': {}
 
+  '@types/esrecurse@4.3.1': {}
+
   '@types/estree@1.0.9': {}
 
+  '@types/hast@3.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
   '@types/http-cache-semantics@4.0.4': {}
 
+  '@types/jsesc@2.5.1': {}
+
+  '@types/json-schema@7.0.15': {}
+
   '@types/keyv@3.1.4':
     dependencies:
-      '@types/node': 24.10.13
+      '@types/node': 25.9.2
 
   '@types/mdast@4.0.4':
     dependencies:
       '@types/unist': 3.0.3
 
-  '@types/minimist@1.2.5': {}
+  '@types/mdx@2.0.13': {}
 
   '@types/moo@0.5.10': {}
 
   '@types/ms@2.1.0': {}
 
-  '@types/node@24.10.13':
+  '@types/node@25.9.2':
     dependencies:
-      undici-types: 7.16.0
-
-  '@types/normalize-package-data@2.4.4': {}
+      undici-types: 7.24.6
 
   '@types/parse-path@7.0.3': {}
 
+  '@types/react@19.2.14':
+    dependencies:
+      csstype: 3.2.3
+
+  '@types/resolve@1.20.2': {}
+
   '@types/responselike@1.0.3':
     dependencies:
-      '@types/node': 24.10.13
+      '@types/node': 25.9.2
 
   '@types/semver@7.5.8': {}
 
@@ -6472,157 +11477,560 @@ snapshots:
 
   '@types/unist@3.0.3': {}
 
-  '@types/yauzl@2.10.3':
+  '@typescript-eslint/eslint-plugin@8.60.1(@typescript-eslint/parser@8.60.1(eslint@10.4.1(jiti@2.7.0))(typescript@6.0.3))(eslint@10.4.1(jiti@2.7.0))(typescript@6.0.3)':
     dependencies:
-      '@types/node': 24.10.13
+      '@eslint-community/regexpp': 4.12.2
+      '@typescript-eslint/parser': 8.60.1(eslint@10.4.1(jiti@2.7.0))(typescript@6.0.3)
+      '@typescript-eslint/scope-manager': 8.60.1
+      '@typescript-eslint/type-utils': 8.60.1(eslint@10.4.1(jiti@2.7.0))(typescript@6.0.3)
+      '@typescript-eslint/utils': 8.60.1(eslint@10.4.1(jiti@2.7.0))(typescript@6.0.3)
+      '@typescript-eslint/visitor-keys': 8.60.1
+      eslint: 10.4.1(jiti@2.7.0)
+      ignore: 7.0.5
+      natural-compare: 1.4.0
+      ts-api-utils: 2.5.0(typescript@6.0.3)
+      typescript: 6.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/parser@8.60.1(eslint@10.4.1(jiti@2.7.0))(typescript@6.0.3)':
+    dependencies:
+      '@typescript-eslint/scope-manager': 8.60.1
+      '@typescript-eslint/types': 8.60.1
+      '@typescript-eslint/typescript-estree': 8.60.1(typescript@6.0.3)
+      '@typescript-eslint/visitor-keys': 8.60.1
+      debug: 4.4.3
+      eslint: 10.4.1(jiti@2.7.0)
+      typescript: 6.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/project-service@8.60.1(typescript@6.0.3)':
+    dependencies:
+      '@typescript-eslint/tsconfig-utils': 8.60.1(typescript@6.0.3)
+      '@typescript-eslint/types': 8.60.1
+      debug: 4.4.3
+      typescript: 6.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/scope-manager@8.60.1':
+    dependencies:
+      '@typescript-eslint/types': 8.60.1
+      '@typescript-eslint/visitor-keys': 8.60.1
+
+  '@typescript-eslint/tsconfig-utils@8.60.1(typescript@6.0.3)':
+    dependencies:
+      typescript: 6.0.3
+
+  '@typescript-eslint/type-utils@8.60.1(eslint@10.4.1(jiti@2.7.0))(typescript@6.0.3)':
+    dependencies:
+      '@typescript-eslint/types': 8.60.1
+      '@typescript-eslint/typescript-estree': 8.60.1(typescript@6.0.3)
+      '@typescript-eslint/utils': 8.60.1(eslint@10.4.1(jiti@2.7.0))(typescript@6.0.3)
+      debug: 4.4.3
+      eslint: 10.4.1(jiti@2.7.0)
+      ts-api-utils: 2.5.0(typescript@6.0.3)
+      typescript: 6.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/types@8.60.1': {}
+
+  '@typescript-eslint/typescript-estree@8.60.1(typescript@6.0.3)':
+    dependencies:
+      '@typescript-eslint/project-service': 8.60.1(typescript@6.0.3)
+      '@typescript-eslint/tsconfig-utils': 8.60.1(typescript@6.0.3)
+      '@typescript-eslint/types': 8.60.1
+      '@typescript-eslint/visitor-keys': 8.60.1
+      debug: 4.4.3
+      minimatch: 10.2.5
+      semver: 7.8.2
+      tinyglobby: 0.2.17
+      ts-api-utils: 2.5.0(typescript@6.0.3)
+      typescript: 6.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/utils@8.60.1(eslint@10.4.1(jiti@2.7.0))(typescript@6.0.3)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@10.4.1(jiti@2.7.0))
+      '@typescript-eslint/scope-manager': 8.60.1
+      '@typescript-eslint/types': 8.60.1
+      '@typescript-eslint/typescript-estree': 8.60.1(typescript@6.0.3)
+      eslint: 10.4.1(jiti@2.7.0)
+      typescript: 6.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/visitor-keys@8.60.1':
+    dependencies:
+      '@typescript-eslint/types': 8.60.1
+      eslint-visitor-keys: 5.0.1
+
+  '@ungap/structured-clone@1.3.0': {}
+
+  '@unhead/vue@2.1.15(vue@3.5.35(typescript@6.0.3))':
+    dependencies:
+      hookable: 6.1.1
+      unhead: 2.1.15
+      vue: 3.5.35(typescript@6.0.3)
+
+  '@unrs/resolver-binding-android-arm-eabi@1.12.2':
     optional: true
 
-  '@vitest/coverage-v8@4.0.18(vitest@4.1.0)':
+  '@unrs/resolver-binding-android-arm64@1.12.2':
+    optional: true
+
+  '@unrs/resolver-binding-darwin-arm64@1.12.2':
+    optional: true
+
+  '@unrs/resolver-binding-darwin-x64@1.12.2':
+    optional: true
+
+  '@unrs/resolver-binding-freebsd-x64@1.12.2':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm-gnueabihf@1.12.2':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm-musleabihf@1.12.2':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm64-gnu@1.12.2':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm64-musl@1.12.2':
+    optional: true
+
+  '@unrs/resolver-binding-linux-loong64-gnu@1.12.2':
+    optional: true
+
+  '@unrs/resolver-binding-linux-loong64-musl@1.12.2':
+    optional: true
+
+  '@unrs/resolver-binding-linux-ppc64-gnu@1.12.2':
+    optional: true
+
+  '@unrs/resolver-binding-linux-riscv64-gnu@1.12.2':
+    optional: true
+
+  '@unrs/resolver-binding-linux-riscv64-musl@1.12.2':
+    optional: true
+
+  '@unrs/resolver-binding-linux-s390x-gnu@1.12.2':
+    optional: true
+
+  '@unrs/resolver-binding-linux-x64-gnu@1.12.2':
+    optional: true
+
+  '@unrs/resolver-binding-linux-x64-musl@1.12.2':
+    optional: true
+
+  '@unrs/resolver-binding-openharmony-arm64@1.12.2':
+    optional: true
+
+  '@unrs/resolver-binding-wasm32-wasi@1.12.2':
+    dependencies:
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
+      '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+    optional: true
+
+  '@unrs/resolver-binding-win32-arm64-msvc@1.12.2':
+    optional: true
+
+  '@unrs/resolver-binding-win32-ia32-msvc@1.12.2':
+    optional: true
+
+  '@unrs/resolver-binding-win32-x64-msvc@1.12.2':
+    optional: true
+
+  '@vercel/nft@1.5.0(encoding@0.1.13)(rollup@4.61.1)':
+    dependencies:
+      '@mapbox/node-pre-gyp': 2.0.3(encoding@0.1.13)
+      '@rollup/pluginutils': 5.3.0(rollup@4.61.1)
+      acorn: 8.16.0
+      acorn-import-attributes: 1.9.5(acorn@8.16.0)
+      async-sema: 3.1.1
+      bindings: 1.5.0
+      estree-walker: 2.0.2
+      glob: 13.0.6
+      graceful-fs: 4.2.11
+      node-gyp-build: 4.8.4
+      picomatch: 4.0.4
+      resolve-from: 5.0.0
+    transitivePeerDependencies:
+      - encoding
+      - rollup
+      - supports-color
+
+  '@vitejs/plugin-vue-jsx@5.1.5(vite@7.3.5(@types/node@25.9.2)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.9.0))(vue@3.5.35(typescript@6.0.3))':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/plugin-syntax-typescript': 7.28.6(@babel/core@7.29.0)
+      '@babel/plugin-transform-typescript': 7.28.6(@babel/core@7.29.0)
+      '@rolldown/pluginutils': 1.0.1
+      '@vue/babel-plugin-jsx': 2.0.1(@babel/core@7.29.0)
+      vite: 7.3.5(@types/node@25.9.2)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.9.0)
+      vue: 3.5.35(typescript@6.0.3)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vitejs/plugin-vue@6.0.7(vite@7.3.5(@types/node@25.9.2)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.9.0))(vue@3.5.35(typescript@6.0.3))':
+    dependencies:
+      '@rolldown/pluginutils': 1.0.1
+      vite: 7.3.5(@types/node@25.9.2)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.9.0)
+      vue: 3.5.35(typescript@6.0.3)
+
+  '@vitejs/plugin-vue@6.0.7(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))(vue@3.5.35(typescript@5.9.3))':
+    dependencies:
+      '@rolldown/pluginutils': 1.0.1
+      vite: 8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0)
+      vue: 3.5.35(typescript@5.9.3)
+
+  '@vitejs/plugin-vue@6.0.7(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))(vue@3.5.35(typescript@6.0.3))':
+    dependencies:
+      '@rolldown/pluginutils': 1.0.1
+      vite: 8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0)
+      vue: 3.5.35(typescript@6.0.3)
+
+  '@vitest/browser-playwright@4.1.8(playwright@1.60.0)(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))(vitest@4.1.8)':
+    dependencies:
+      '@vitest/browser': 4.1.8(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))(vitest@4.1.8)
+      '@vitest/mocker': 4.1.8(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))
+      playwright: 1.60.0
+      tinyrainbow: 3.1.0
+      vitest: 4.1.8(@opentelemetry/api@1.9.1)(@types/node@25.9.2)(@vitest/browser-playwright@4.1.8)(@vitest/coverage-v8@4.1.8)(@vitest/ui@4.1.8)(jsdom@29.1.1)(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))
+    transitivePeerDependencies:
+      - bufferutil
+      - msw
+      - utf-8-validate
+      - vite
+
+  '@vitest/browser@4.1.8(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))(vitest@4.1.8)':
+    dependencies:
+      '@blazediff/core': 1.9.1
+      '@vitest/mocker': 4.1.8(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))
+      '@vitest/utils': 4.1.8
+      magic-string: 0.30.21
+      pngjs: 7.0.0
+      sirv: 3.0.2
+      tinyrainbow: 3.1.0
+      vitest: 4.1.8(@opentelemetry/api@1.9.1)(@types/node@25.9.2)(@vitest/browser-playwright@4.1.8)(@vitest/coverage-v8@4.1.8)(@vitest/ui@4.1.8)(jsdom@29.1.1)(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))
+      ws: 8.20.0
+    transitivePeerDependencies:
+      - bufferutil
+      - msw
+      - utf-8-validate
+      - vite
+
+  '@vitest/coverage-v8@4.1.8(@vitest/browser@4.1.8)(vitest@4.1.8)':
     dependencies:
       '@bcoe/v8-coverage': 1.0.2
-      '@vitest/utils': 4.0.18
-      ast-v8-to-istanbul: 0.3.11
+      '@vitest/utils': 4.1.8
+      ast-v8-to-istanbul: 1.0.0
       istanbul-lib-coverage: 3.2.2
       istanbul-lib-report: 3.0.1
       istanbul-reports: 3.2.0
       magicast: 0.5.2
       obug: 2.1.1
-      std-env: 3.10.0
-      tinyrainbow: 3.0.3
-      vitest: 4.1.0(@opentelemetry/api@1.9.0)(@types/node@24.10.13)(@vitest/ui@4.0.18)(jsdom@29.0.1)(vite@7.1.4(@types/node@24.10.13)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.2))
+      std-env: 4.1.0
+      tinyrainbow: 3.1.0
+      vitest: 4.1.8(@opentelemetry/api@1.9.1)(@types/node@25.9.2)(@vitest/browser-playwright@4.1.8)(@vitest/coverage-v8@4.1.8)(@vitest/ui@4.1.8)(jsdom@29.1.1)(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))
+    optionalDependencies:
+      '@vitest/browser': 4.1.8(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))(vitest@4.1.8)
 
-  '@vitest/expect@4.1.0':
+  '@vitest/eslint-plugin@1.6.19(@typescript-eslint/eslint-plugin@8.60.1(@typescript-eslint/parser@8.60.1(eslint@10.4.1(jiti@2.7.0))(typescript@6.0.3))(eslint@10.4.1(jiti@2.7.0))(typescript@6.0.3))(eslint@10.4.1(jiti@2.7.0))(typescript@6.0.3)(vitest@4.1.8)':
+    dependencies:
+      '@typescript-eslint/scope-manager': 8.60.1
+      '@typescript-eslint/utils': 8.60.1(eslint@10.4.1(jiti@2.7.0))(typescript@6.0.3)
+      eslint: 10.4.1(jiti@2.7.0)
+    optionalDependencies:
+      '@typescript-eslint/eslint-plugin': 8.60.1(@typescript-eslint/parser@8.60.1(eslint@10.4.1(jiti@2.7.0))(typescript@6.0.3))(eslint@10.4.1(jiti@2.7.0))(typescript@6.0.3)
+      typescript: 6.0.3
+      vitest: 4.1.8(@opentelemetry/api@1.9.1)(@types/node@25.9.2)(@vitest/browser-playwright@4.1.8)(@vitest/coverage-v8@4.1.8)(@vitest/ui@4.1.8)(jsdom@29.1.1)(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vitest/expect@3.2.4':
+    dependencies:
+      '@types/chai': 5.2.2
+      '@vitest/spy': 3.2.4
+      '@vitest/utils': 3.2.4
+      chai: 5.3.3
+      tinyrainbow: 2.0.0
+
+  '@vitest/expect@4.1.8':
     dependencies:
       '@standard-schema/spec': 1.1.0
-      '@types/chai': 5.2.3
-      '@vitest/spy': 4.1.0
-      '@vitest/utils': 4.1.0
+      '@types/chai': 5.2.2
+      '@vitest/spy': 4.1.8
+      '@vitest/utils': 4.1.8
       chai: 6.2.2
       tinyrainbow: 3.1.0
 
-  '@vitest/mocker@4.1.0(vite@7.1.4(@types/node@24.10.13)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.2))':
+  '@vitest/mocker@4.1.8(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))':
     dependencies:
-      '@vitest/spy': 4.1.0
+      '@vitest/spy': 4.1.8
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
-      vite: 7.1.4(@types/node@24.10.13)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.2)
+      vite: 8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0)
 
-  '@vitest/pretty-format@4.0.18':
+  '@vitest/pretty-format@3.2.4':
     dependencies:
-      tinyrainbow: 3.0.3
+      tinyrainbow: 2.0.0
 
-  '@vitest/pretty-format@4.1.0':
+  '@vitest/pretty-format@4.1.8':
     dependencies:
       tinyrainbow: 3.1.0
 
-  '@vitest/runner@4.1.0':
+  '@vitest/runner@4.1.8':
     dependencies:
-      '@vitest/utils': 4.1.0
+      '@vitest/utils': 4.1.8
       pathe: 2.0.3
 
-  '@vitest/snapshot@4.1.0':
+  '@vitest/snapshot@4.1.8':
     dependencies:
-      '@vitest/pretty-format': 4.1.0
-      '@vitest/utils': 4.1.0
+      '@vitest/pretty-format': 4.1.8
+      '@vitest/utils': 4.1.8
       magic-string: 0.30.21
       pathe: 2.0.3
 
-  '@vitest/spy@4.1.0': {}
-
-  '@vitest/ui@4.0.18(vitest@4.1.0)':
+  '@vitest/spy@3.2.4':
     dependencies:
-      '@vitest/utils': 4.0.18
+      tinyspy: 4.0.4
+
+  '@vitest/spy@4.1.8': {}
+
+  '@vitest/ui@4.1.8(vitest@4.1.8)':
+    dependencies:
+      '@vitest/utils': 4.1.8
       fflate: 0.8.2
-      flatted: 3.3.3
+      flatted: 3.4.2
       pathe: 2.0.3
       sirv: 3.0.2
-      tinyglobby: 0.2.15
-      tinyrainbow: 3.0.3
-      vitest: 4.1.0(@opentelemetry/api@1.9.0)(@types/node@24.10.13)(@vitest/ui@4.0.18)(jsdom@29.0.1)(vite@7.1.4(@types/node@24.10.13)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.2))
+      tinyglobby: 0.2.17
+      tinyrainbow: 3.1.0
+      vitest: 4.1.8(@opentelemetry/api@1.9.1)(@types/node@25.9.2)(@vitest/browser-playwright@4.1.8)(@vitest/coverage-v8@4.1.8)(@vitest/ui@4.1.8)(jsdom@29.1.1)(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))
 
-  '@vitest/utils@4.0.18':
+  '@vitest/utils@3.2.4':
     dependencies:
-      '@vitest/pretty-format': 4.0.18
-      tinyrainbow: 3.0.3
+      '@vitest/pretty-format': 3.2.4
+      loupe: 3.2.1
+      tinyrainbow: 2.0.0
 
-  '@vitest/utils@4.1.0':
+  '@vitest/utils@4.1.8':
     dependencies:
-      '@vitest/pretty-format': 4.1.0
+      '@vitest/pretty-format': 4.1.8
       convert-source-map: 2.0.0
       tinyrainbow: 3.1.0
 
-  '@vue/compiler-core@3.5.28':
+  '@volar/language-core@2.4.15':
     dependencies:
-      '@babel/parser': 7.29.0
-      '@vue/shared': 3.5.28
+      '@volar/source-map': 2.4.15
+
+  '@volar/language-core@2.4.28':
+    dependencies:
+      '@volar/source-map': 2.4.28
+
+  '@volar/source-map@2.4.15': {}
+
+  '@volar/source-map@2.4.28': {}
+
+  '@volar/typescript@2.4.15':
+    dependencies:
+      '@volar/language-core': 2.4.15
+      path-browserify: 1.0.1
+      vscode-uri: 3.1.0
+
+  '@volar/typescript@2.4.28':
+    dependencies:
+      '@volar/language-core': 2.4.28
+      path-browserify: 1.0.1
+      vscode-uri: 3.1.0
+
+  '@vue-macros/common@3.1.2(vue@3.5.35(typescript@6.0.3))':
+    dependencies:
+      '@vue/compiler-sfc': 3.5.35
+      ast-kit: 2.2.0
+      local-pkg: 1.1.2
+      magic-string-ast: 1.0.3
+      unplugin-utils: 0.3.1
+    optionalDependencies:
+      vue: 3.5.35(typescript@6.0.3)
+
+  '@vue/babel-helper-vue-transform-on@2.0.1': {}
+
+  '@vue/babel-plugin-jsx@2.0.1(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/helper-module-imports': 7.28.6
+      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/plugin-syntax-jsx': 7.28.6(@babel/core@7.29.0)
+      '@babel/template': 7.28.6
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.7
+      '@vue/babel-helper-vue-transform-on': 2.0.1
+      '@vue/babel-plugin-resolve-type': 2.0.1(@babel/core@7.29.0)
+      '@vue/shared': 3.5.35
+    optionalDependencies:
+      '@babel/core': 7.29.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vue/babel-plugin-resolve-type@2.0.1(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/core': 7.29.0
+      '@babel/helper-module-imports': 7.28.6
+      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/parser': 7.29.7
+      '@vue/compiler-sfc': 3.5.35
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vue/compiler-core@3.5.35':
+    dependencies:
+      '@babel/parser': 7.29.7
+      '@vue/shared': 3.5.35
       entities: 7.0.1
       estree-walker: 2.0.2
       source-map-js: 1.2.1
 
-  '@vue/compiler-dom@3.5.28':
+  '@vue/compiler-dom@3.5.35':
     dependencies:
-      '@vue/compiler-core': 3.5.28
-      '@vue/shared': 3.5.28
+      '@vue/compiler-core': 3.5.35
+      '@vue/shared': 3.5.35
 
-  '@vue/compiler-sfc@3.5.28':
+  '@vue/compiler-sfc@3.5.35':
     dependencies:
-      '@babel/parser': 7.29.0
-      '@vue/compiler-core': 3.5.28
-      '@vue/compiler-dom': 3.5.28
-      '@vue/compiler-ssr': 3.5.28
-      '@vue/shared': 3.5.28
+      '@babel/parser': 7.29.7
+      '@vue/compiler-core': 3.5.35
+      '@vue/compiler-dom': 3.5.35
+      '@vue/compiler-ssr': 3.5.35
+      '@vue/shared': 3.5.35
       estree-walker: 2.0.2
       magic-string: 0.30.21
-      postcss: 8.5.6
+      postcss: 8.5.15
       source-map-js: 1.2.1
 
-  '@vue/compiler-ssr@3.5.28':
+  '@vue/compiler-ssr@3.5.35':
     dependencies:
-      '@vue/compiler-dom': 3.5.28
-      '@vue/shared': 3.5.28
+      '@vue/compiler-dom': 3.5.35
+      '@vue/shared': 3.5.35
 
-  '@vue/reactivity@3.5.28':
+  '@vue/compiler-vue2@2.7.16':
     dependencies:
-      '@vue/shared': 3.5.28
+      de-indent: 1.0.2
+      he: 1.2.0
 
-  '@vue/runtime-core@3.5.28':
+  '@vue/devtools-api@8.1.2':
     dependencies:
-      '@vue/reactivity': 3.5.28
-      '@vue/shared': 3.5.28
+      '@vue/devtools-kit': 8.1.2
 
-  '@vue/runtime-dom@3.5.28':
+  '@vue/devtools-core@8.1.1(vue@3.5.35(typescript@6.0.3))':
     dependencies:
-      '@vue/reactivity': 3.5.28
-      '@vue/runtime-core': 3.5.28
-      '@vue/shared': 3.5.28
+      '@vue/devtools-kit': 8.1.2
+      '@vue/devtools-shared': 8.1.2
+      vue: 3.5.35(typescript@6.0.3)
+
+  '@vue/devtools-kit@8.1.2':
+    dependencies:
+      '@vue/devtools-shared': 8.1.2
+      birpc: 2.9.0
+      hookable: 5.5.3
+      perfect-debounce: 2.1.0
+
+  '@vue/devtools-shared@8.1.2': {}
+
+  '@vue/language-core@2.2.12(typescript@5.9.3)':
+    dependencies:
+      '@volar/language-core': 2.4.15
+      '@vue/compiler-dom': 3.5.35
+      '@vue/compiler-vue2': 2.7.16
+      '@vue/shared': 3.5.35
+      alien-signals: 1.0.13
+      minimatch: 9.0.5
+      muggle-string: 0.4.1
+      path-browserify: 1.0.1
+    optionalDependencies:
+      typescript: 5.9.3
+
+  '@vue/language-core@3.2.6':
+    dependencies:
+      '@volar/language-core': 2.4.28
+      '@vue/compiler-dom': 3.5.35
+      '@vue/shared': 3.5.35
+      alien-signals: 3.2.1
+      muggle-string: 0.4.1
+      path-browserify: 1.0.1
+      picomatch: 4.0.4
+    optional: true
+
+  '@vue/language-core@3.3.4':
+    dependencies:
+      '@volar/language-core': 2.4.28
+      '@vue/compiler-dom': 3.5.35
+      '@vue/shared': 3.5.35
+      alien-signals: 3.2.1
+      muggle-string: 0.4.1
+      path-browserify: 1.0.1
+      picomatch: 4.0.4
+
+  '@vue/reactivity@3.5.35':
+    dependencies:
+      '@vue/shared': 3.5.35
+
+  '@vue/runtime-core@3.5.35':
+    dependencies:
+      '@vue/reactivity': 3.5.35
+      '@vue/shared': 3.5.35
+
+  '@vue/runtime-dom@3.5.35':
+    dependencies:
+      '@vue/reactivity': 3.5.35
+      '@vue/runtime-core': 3.5.35
+      '@vue/shared': 3.5.35
       csstype: 3.2.3
 
-  '@vue/server-renderer@3.5.28(vue@3.5.28(typescript@5.8.3))':
+  '@vue/server-renderer@3.5.35(vue@3.5.35(typescript@5.9.3))':
     dependencies:
-      '@vue/compiler-ssr': 3.5.28
-      '@vue/shared': 3.5.28
-      vue: 3.5.28(typescript@5.8.3)
+      '@vue/compiler-ssr': 3.5.35
+      '@vue/shared': 3.5.35
+      vue: 3.5.35(typescript@5.9.3)
 
-  '@vue/shared@3.5.28': {}
-
-  '@vue/test-utils@2.4.6':
+  '@vue/server-renderer@3.5.35(vue@3.5.35(typescript@6.0.3))':
     dependencies:
+      '@vue/compiler-ssr': 3.5.35
+      '@vue/shared': 3.5.35
+      vue: 3.5.35(typescript@6.0.3)
+
+  '@vue/shared@3.5.35': {}
+
+  '@vue/test-utils@2.4.11(@vue/compiler-dom@3.5.35)(@vue/server-renderer@3.5.35(vue@3.5.35(typescript@6.0.3)))(vue@3.5.35(typescript@6.0.3))':
+    dependencies:
+      '@vue/compiler-dom': 3.5.35
       js-beautify: 1.15.1
-      vue-component-type-helpers: 2.1.6
+      vue: 3.5.35(typescript@6.0.3)
+      vue-component-type-helpers: 3.3.4
+    optionalDependencies:
+      '@vue/server-renderer': 3.5.35(vue@3.5.35(typescript@6.0.3))
 
-  '@yarnpkg/core@4.5.0(typanion@3.14.0)':
+  '@webcontainer/env@1.1.1': {}
+
+  '@yarnpkg/core@4.8.0(typanion@3.14.0)':
     dependencies:
       '@arcanis/slice-ansi': 1.1.1
       '@types/semver': 7.5.8
       '@types/treeify': 1.0.3
-      '@yarnpkg/fslib': 3.1.4
-      '@yarnpkg/libzip': 3.2.2(@yarnpkg/fslib@3.1.4)
+      '@yarnpkg/fslib': 3.1.5
+      '@yarnpkg/libzip': 3.2.2(@yarnpkg/fslib@3.1.5)
       '@yarnpkg/parsers': 3.0.3
       '@yarnpkg/shell': 4.1.3(typanion@3.14.0)
       camelcase: 5.3.1
       chalk: 4.1.2
-      ci-info: 4.0.0
+      ci-info: 4.4.0
       clipanion: 4.0.0-rc.3(typanion@3.14.0)
       cross-spawn: 7.0.6
       diff: 5.2.0
@@ -6633,23 +12041,23 @@ snapshots:
       hpagent: 1.2.0
       micromatch: 4.0.8
       p-limit: 2.3.0
-      semver: 7.7.4
+      semver: 7.8.2
       strip-ansi: 6.0.1
-      tar: 6.2.1
+      tar: 7.5.7
       tinylogic: 2.0.0
       treeify: 1.1.0
       tslib: 2.8.1
     transitivePeerDependencies:
       - typanion
 
-  '@yarnpkg/fslib@3.1.4':
+  '@yarnpkg/fslib@3.1.5':
     dependencies:
       tslib: 2.8.1
 
-  '@yarnpkg/libzip@3.2.2(@yarnpkg/fslib@3.1.4)':
+  '@yarnpkg/libzip@3.2.2(@yarnpkg/fslib@3.1.5)':
     dependencies:
       '@types/emscripten': 1.39.10
-      '@yarnpkg/fslib': 3.1.4
+      '@yarnpkg/fslib': 3.1.5
       tslib: 2.8.1
 
   '@yarnpkg/parsers@3.0.3':
@@ -6659,7 +12067,7 @@ snapshots:
 
   '@yarnpkg/shell@4.1.3(typanion@3.14.0)':
     dependencies:
-      '@yarnpkg/fslib': 3.1.4
+      '@yarnpkg/fslib': 3.1.5
       '@yarnpkg/parsers': 3.0.3
       chalk: 4.1.2
       clipanion: 4.0.0-rc.3(typanion@3.14.0)
@@ -6672,21 +12080,35 @@ snapshots:
 
   abbrev@2.0.0: {}
 
+  abbrev@3.0.1: {}
+
   abbrev@4.0.0:
     optional: true
 
-  acorn-import-attributes@1.9.5(acorn@8.15.0):
+  abort-controller@3.0.0:
     dependencies:
-      acorn: 8.15.0
+      event-target-shim: 5.0.1
 
-  acorn@8.15.0: {}
+  accepts@2.0.0:
+    dependencies:
+      mime-types: 3.0.2
+      negotiator: 1.0.0
 
-  acorn@8.16.0:
-    optional: true
+  acorn-import-attributes@1.9.5(acorn@8.16.0):
+    dependencies:
+      acorn: 8.16.0
 
-  adm-zip@0.5.16: {}
+  acorn-jsx@5.3.2(acorn@8.16.0):
+    dependencies:
+      acorn: 8.16.0
 
-  ae-cvss-calculator@1.0.9: {}
+  acorn@7.4.1: {}
+
+  acorn@8.16.0: {}
+
+  adm-zip@0.5.17: {}
+
+  ae-cvss-calculator@1.0.12: {}
 
   agent-base@7.1.3: {}
 
@@ -6694,6 +12116,28 @@ snapshots:
     dependencies:
       humanize-ms: 1.2.1
 
+  ajv-formats@3.0.1(ajv@8.20.0):
+    optionalDependencies:
+      ajv: 8.20.0
+
+  ajv@6.14.0:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-json-stable-stringify: 2.1.0
+      json-schema-traverse: 0.4.1
+      uri-js: 4.4.1
+
+  ajv@8.20.0:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-uri: 3.1.2
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+
+  alien-signals@1.0.13: {}
+
+  alien-signals@3.2.1: {}
+
   ansi-regex@5.0.1: {}
 
   ansi-regex@6.0.1: {}
@@ -6702,9 +12146,40 @@ snapshots:
     dependencies:
       color-convert: 2.0.1
 
+  ansi-styles@5.2.0: {}
+
   ansi-styles@6.2.1: {}
 
-  ansis@4.2.0: {}
+  ansis@4.3.1: {}
+
+  anymatch@3.1.3:
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.1
+
+  archiver-utils@5.0.2:
+    dependencies:
+      glob: 10.4.5
+      graceful-fs: 4.2.11
+      is-stream: 2.0.1
+      lazystream: 1.0.1
+      lodash: 4.17.21
+      normalize-path: 3.0.0
+      readable-stream: 4.7.0
+
+  archiver@7.0.1:
+    dependencies:
+      archiver-utils: 5.0.2
+      async: 3.2.6
+      buffer-crc32: 1.0.0
+      readable-stream: 4.7.0
+      readdir-glob: 1.1.3
+      tar-stream: 3.1.8
+      zip-stream: 6.0.1
+    transitivePeerDependencies:
+      - bare-abort-controller
+      - bare-buffer
+      - react-native-b4a
 
   argparse@1.0.10:
     dependencies:
@@ -6712,47 +12187,122 @@ snapshots:
 
   argparse@2.0.1: {}
 
-  arrify@1.0.1: {}
+  aria-query@5.3.0:
+    dependencies:
+      dequal: 2.0.3
+
+  aria-query@5.3.2: {}
+
+  asap@2.0.6: {}
+
+  assert-never@1.4.0: {}
 
   assertion-error@2.0.1: {}
 
   ast-kit@2.2.0:
     dependencies:
-      '@babel/parser': 7.29.0
+      '@babel/parser': 7.29.7
       pathe: 2.0.3
 
-  ast-v8-to-istanbul@0.3.11:
+  ast-kit@3.0.0-beta.1:
+    dependencies:
+      '@babel/parser': 8.0.0-rc.6
+      estree-walker: 3.0.3
+      pathe: 2.0.3
+
+  ast-types@0.16.1:
+    dependencies:
+      tslib: 2.8.1
+
+  ast-v8-to-istanbul@1.0.0:
     dependencies:
       '@jridgewell/trace-mapping': 0.3.31
       estree-walker: 3.0.3
       js-tokens: 10.0.0
 
+  ast-walker-scope@0.9.0:
+    dependencies:
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
+      ast-kit: 2.2.0
+
   async-mutex@0.5.0:
     dependencies:
       tslib: 2.8.1
 
-  auth-header@1.0.0: {}
+  async-sema@3.1.1: {}
 
-  available-typed-arrays@1.0.7:
+  async@3.2.6: {}
+
+  autoprefixer@10.5.0(postcss@8.5.15):
     dependencies:
-      possible-typed-array-names: 1.0.0
+      browserslist: 4.28.2
+      caniuse-lite: 1.0.30001797
+      fraction.js: 5.3.4
+      picocolors: 1.1.1
+      postcss: 8.5.15
+      postcss-value-parser: 4.2.0
 
   aws4@1.13.2: {}
 
+  axe-core@4.12.0: {}
+
   azure-devops-node-api@15.1.2:
     dependencies:
       tunnel: 0.0.6
       typed-rest-client: 2.1.0
 
+  b4a@1.8.0: {}
+
+  babel-walk@3.0.0-canary-5:
+    dependencies:
+      '@babel/types': 7.29.7
+
   backslash@0.2.0: {}
 
   bail@2.0.2: {}
 
   balanced-match@1.0.2: {}
 
+  balanced-match@4.0.4: {}
+
+  bare-events@2.8.2: {}
+
+  bare-fs@4.5.6:
+    dependencies:
+      bare-events: 2.8.2
+      bare-path: 3.0.0
+      bare-stream: 2.11.0(bare-events@2.8.2)
+      bare-url: 2.4.0
+      fast-fifo: 1.3.2
+    transitivePeerDependencies:
+      - bare-abort-controller
+      - react-native-b4a
+
+  bare-os@3.8.0: {}
+
+  bare-path@3.0.0:
+    dependencies:
+      bare-os: 3.8.0
+
+  bare-stream@2.11.0(bare-events@2.8.2):
+    dependencies:
+      streamx: 2.25.0
+      teex: 1.0.1
+    optionalDependencies:
+      bare-events: 2.8.2
+    transitivePeerDependencies:
+      - react-native-b4a
+
+  bare-url@2.4.0:
+    dependencies:
+      bare-path: 3.0.0
+
   base64-js@1.5.1: {}
 
-  better-sqlite3@12.6.2:
+  baseline-browser-mapping@2.10.34: {}
+
+  better-sqlite3@12.8.0:
     dependencies:
       bindings: 1.5.0
       prebuild-install: 7.1.2
@@ -6767,10 +12317,11 @@ snapshots:
   bindings@1.5.0:
     dependencies:
       file-uri-to-path: 1.0.0
-    optional: true
 
   birpc@2.9.0: {}
 
+  birpc@4.0.0: {}
+
   bl@4.1.0:
     dependencies:
       buffer: 5.7.1
@@ -6778,6 +12329,20 @@ snapshots:
       readable-stream: 3.6.2
     optional: true
 
+  body-parser@2.2.2:
+    dependencies:
+      bytes: 3.1.2
+      content-type: 1.0.5
+      debug: 4.4.3
+      http-errors: 2.0.1
+      iconv-lite: 0.7.2
+      on-finished: 2.4.1
+      qs: 6.15.2
+      raw-body: 3.0.2
+      type-is: 2.1.0
+    transitivePeerDependencies:
+      - supports-color
+
   boolbase@1.0.0: {}
 
   boolean@3.2.0: {}
@@ -6794,11 +12359,23 @@ snapshots:
     dependencies:
       balanced-match: 1.0.2
 
+  brace-expansion@5.0.5:
+    dependencies:
+      balanced-match: 4.0.4
+
   braces@3.0.3:
     dependencies:
       fill-range: 7.1.1
 
-  buffer-crc32@0.2.13: {}
+  browserslist@4.28.2:
+    dependencies:
+      baseline-browser-mapping: 2.10.34
+      caniuse-lite: 1.0.30001797
+      electron-to-chromium: 1.5.368
+      node-releases: 2.0.36
+      update-browserslist-db: 1.2.3(browserslist@4.28.2)
+
+  buffer-crc32@1.0.0: {}
 
   buffer-equal-constant-time@1.0.1: {}
 
@@ -6810,9 +12387,20 @@ snapshots:
       ieee754: 1.2.1
     optional: true
 
+  buffer@6.0.3:
+    dependencies:
+      base64-js: 1.5.1
+      ieee754: 1.2.1
+
+  builtin-modules@5.2.0: {}
+
   builtins@5.1.0:
     dependencies:
-      semver: 7.7.4
+      semver: 7.8.2
+
+  bundle-name@4.1.0:
+    dependencies:
+      run-applescript: 7.1.0
 
   bunyan@1.8.15:
     optionalDependencies:
@@ -6821,52 +12409,99 @@ snapshots:
       mv: 2.1.1
       safe-json-stringify: 1.2.0
 
+  byte-counter@0.1.0: {}
+
+  bytes@3.1.2: {}
+
+  c12@3.3.4(magicast@0.5.2):
+    dependencies:
+      chokidar: 5.0.0
+      confbox: 0.2.4
+      defu: 6.1.7
+      dotenv: 17.3.1
+      exsolve: 1.0.8
+      giget: 3.2.0
+      jiti: 2.7.0
+      ohash: 2.0.11
+      pathe: 2.0.3
+      perfect-debounce: 2.1.0
+      pkg-types: 2.3.1
+      rc9: 3.0.1
+    optionalDependencies:
+      magicast: 0.5.2
+
   cac@6.7.14: {}
 
-  cacache@20.0.3:
+  cac@7.0.0: {}
+
+  cacache@20.0.4:
     dependencies:
       '@npmcli/fs': 5.0.0
       fs-minipass: 3.0.3
-      glob: 13.0.1
-      lru-cache: 11.2.6
-      minipass: 7.1.2
+      glob: 13.0.6
+      lru-cache: 11.5.1
+      minipass: 7.1.3
       minipass-collect: 2.0.1
       minipass-flush: 1.0.5
       minipass-pipeline: 1.2.4
       p-map: 7.0.4
       ssri: 13.0.1
-      unique-filename: 5.0.0
 
   cacheable-lookup@5.0.4: {}
 
+  cacheable-lookup@7.0.0: {}
+
+  cacheable-request@13.0.18:
+    dependencies:
+      '@types/http-cache-semantics': 4.0.4
+      get-stream: 9.0.1
+      http-cache-semantics: 4.2.0
+      keyv: 5.6.0
+      mimic-response: 4.0.0
+      normalize-url: 8.1.1
+      responselike: 4.0.2
+
   cacheable-request@7.0.4:
     dependencies:
       clone-response: 1.0.3
       get-stream: 5.2.0
-      http-cache-semantics: 4.1.1
+      http-cache-semantics: 4.2.0
       keyv: 4.5.4
       lowercase-keys: 2.0.0
       normalize-url: 6.1.0
       responselike: 2.0.1
 
-  call-bind@1.0.7:
+  call-bind-apply-helpers@1.0.2:
     dependencies:
-      es-define-property: 1.0.0
       es-errors: 1.3.0
       function-bind: 1.1.2
-      get-intrinsic: 1.2.4
-      set-function-length: 1.2.2
 
-  camelcase-keys@6.2.2:
+  call-bound@1.0.4:
     dependencies:
-      camelcase: 5.3.1
-      map-obj: 4.3.0
-      quick-lru: 4.0.1
+      call-bind-apply-helpers: 1.0.2
+      get-intrinsic: 1.3.0
 
   camelcase@5.3.1: {}
 
+  caniuse-api@3.0.0:
+    dependencies:
+      browserslist: 4.28.2
+      caniuse-lite: 1.0.30001797
+      lodash.memoize: 4.1.2
+      lodash.uniq: 4.5.0
+
+  caniuse-lite@1.0.30001797: {}
+
   ccount@2.0.1: {}
 
+  chai@5.3.3:
+    dependencies:
+      assertion-error: 2.0.1
+      check-error: 2.1.3
+      deep-eql: 5.0.2
+      loupe: 3.2.1
+      pathval: 2.0.1
+
   chai@6.2.2: {}
 
   chalk@4.1.2:
@@ -6874,25 +12509,40 @@ snapshots:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
+  change-case@5.4.4: {}
+
   changelog-filename-regex@2.0.1: {}
 
+  character-entities-html4@2.1.0: {}
+
+  character-entities-legacy@3.0.0: {}
+
   character-entities@2.0.2: {}
 
-  chokidar@4.0.3:
+  character-parser@2.2.0:
     dependencies:
-      readdirp: 4.1.2
+      is-regex: 1.2.1
+
+  check-error@2.1.3: {}
+
+  chokidar@5.0.0:
+    dependencies:
+      readdirp: 5.0.0
 
   chownr@1.1.4:
     optional: true
 
-  chownr@2.0.0: {}
+  chownr@3.0.0: {}
 
-  chownr@3.0.0:
-    optional: true
+  chunk-data@0.1.0: {}
 
-  ci-info@4.0.0: {}
+  ci-info@4.4.0: {}
 
-  citty@0.2.1: {}
+  citty@0.1.6:
+    dependencies:
+      consola: 3.4.2
+
+  citty@0.2.2: {}
 
   cjs-module-lexer@2.2.0: {}
 
@@ -6902,49 +12552,110 @@ snapshots:
     dependencies:
       typanion: 3.14.0
 
+  cliui@9.0.1:
+    dependencies:
+      string-width: 7.2.0
+      strip-ansi: 7.1.0
+      wrap-ansi: 9.0.2
+
   clone-response@1.0.3:
     dependencies:
       mimic-response: 1.0.1
 
   cluster-key-slot@1.1.2: {}
 
+  code-block-writer@13.0.3: {}
+
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
 
   color-name@1.1.4: {}
 
+  comma-separated-tokens@2.0.3: {}
+
   commander@10.0.1: {}
 
+  commander@11.1.0: {}
+
   commander@14.0.3: {}
 
-  commander@2.20.3:
-    optional: true
+  commander@2.20.3: {}
+
+  comment-parser@1.4.7: {}
+
+  commondir@1.0.1: {}
+
+  compatx@0.2.0: {}
+
+  compress-commons@6.0.2:
+    dependencies:
+      crc-32: 1.2.2
+      crc32-stream: 6.0.0
+      is-stream: 2.0.1
+      normalize-path: 3.0.0
+      readable-stream: 4.7.0
 
   concat-map@0.0.1:
     optional: true
 
+  confbox@0.1.8: {}
+
+  confbox@0.2.4: {}
+
   config-chain@1.1.13:
     dependencies:
       ini: 1.3.8
       proto-list: 1.2.4
 
-  conventional-commits-detector@1.0.3:
+  consola@3.4.2: {}
+
+  constantinople@4.0.1:
     dependencies:
-      arrify: 1.0.1
-      git-raw-commits: 2.0.11
-      meow: 7.1.1
-      through2-concurrent: 2.0.0
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
+
+  content-disposition@1.1.0: {}
+
+  content-type@1.0.5: {}
+
+  content-type@2.0.0: {}
 
   convert-source-map@2.0.0: {}
 
+  cookie-es@1.2.3: {}
+
+  cookie-es@2.0.1: {}
+
+  cookie-es@3.1.1: {}
+
+  cookie-signature@1.2.2: {}
+
+  cookie@0.7.2: {}
+
+  core-js-compat@3.49.0:
+    dependencies:
+      browserslist: 4.28.2
+
   core-js-pure@3.37.0: {}
 
   core-util-is@1.0.3: {}
 
-  croner@9.1.0: {}
+  cors@2.8.6:
+    dependencies:
+      object-assign: 4.1.1
+      vary: 1.1.2
 
-  cronstrue@3.11.0: {}
+  crc-32@1.2.2: {}
+
+  crc32-stream@6.0.0:
+    dependencies:
+      crc-32: 1.2.2
+      readable-stream: 4.7.0
+
+  croner@10.0.1: {}
+
+  cronstrue@3.14.0: {}
 
   cross-spawn@7.0.6:
     dependencies:
@@ -6952,6 +12663,10 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
+  crossws@0.3.5:
+    dependencies:
+      uncrypto: 0.1.3
+
   css-select@5.1.0:
     dependencies:
       boolbase: 1.0.0
@@ -6960,6 +12675,11 @@ snapshots:
       domutils: 3.1.0
       nth-check: 2.1.1
 
+  css-tree@2.2.1:
+    dependencies:
+      mdn-data: 2.0.28
+      source-map-js: 1.2.1
+
   css-tree@3.2.1:
     dependencies:
       mdn-data: 2.27.1
@@ -6967,9 +12687,58 @@ snapshots:
 
   css-what@6.1.0: {}
 
-  csstype@3.2.3: {}
+  css.escape@1.5.1: {}
 
-  dargs@7.0.0: {}
+  cssesc@3.0.0: {}
+
+  cssnano-preset-default@8.0.1(postcss@8.5.15):
+    dependencies:
+      browserslist: 4.28.2
+      cssnano-utils: 6.0.0(postcss@8.5.15)
+      postcss: 8.5.15
+      postcss-calc: 10.1.1(postcss@8.5.15)
+      postcss-colormin: 8.0.0(postcss@8.5.15)
+      postcss-convert-values: 8.0.0(postcss@8.5.15)
+      postcss-discard-comments: 8.0.0(postcss@8.5.15)
+      postcss-discard-duplicates: 8.0.0(postcss@8.5.15)
+      postcss-discard-empty: 8.0.0(postcss@8.5.15)
+      postcss-discard-overridden: 8.0.0(postcss@8.5.15)
+      postcss-merge-longhand: 8.0.0(postcss@8.5.15)
+      postcss-merge-rules: 8.0.0(postcss@8.5.15)
+      postcss-minify-font-values: 8.0.0(postcss@8.5.15)
+      postcss-minify-gradients: 8.0.0(postcss@8.5.15)
+      postcss-minify-params: 8.0.0(postcss@8.5.15)
+      postcss-minify-selectors: 8.0.1(postcss@8.5.15)
+      postcss-normalize-charset: 8.0.0(postcss@8.5.15)
+      postcss-normalize-display-values: 8.0.0(postcss@8.5.15)
+      postcss-normalize-positions: 8.0.0(postcss@8.5.15)
+      postcss-normalize-repeat-style: 8.0.0(postcss@8.5.15)
+      postcss-normalize-string: 8.0.0(postcss@8.5.15)
+      postcss-normalize-timing-functions: 8.0.0(postcss@8.5.15)
+      postcss-normalize-unicode: 8.0.0(postcss@8.5.15)
+      postcss-normalize-url: 8.0.0(postcss@8.5.15)
+      postcss-normalize-whitespace: 8.0.0(postcss@8.5.15)
+      postcss-ordered-values: 8.0.0(postcss@8.5.15)
+      postcss-reduce-initial: 8.0.0(postcss@8.5.15)
+      postcss-reduce-transforms: 8.0.0(postcss@8.5.15)
+      postcss-svgo: 8.0.0(postcss@8.5.15)
+      postcss-unique-selectors: 8.0.0(postcss@8.5.15)
+
+  cssnano-utils@6.0.0(postcss@8.5.15):
+    dependencies:
+      postcss: 8.5.15
+
+  cssnano@8.0.1(postcss@8.5.15):
+    dependencies:
+      cssnano-preset-default: 8.0.1(postcss@8.5.15)
+      lilconfig: 3.1.3
+      postcss: 8.5.15
+
+  csso@5.0.5:
+    dependencies:
+      css-tree: 2.2.1
+
+  csstype@3.2.3: {}
 
   data-uri-to-buffer@4.0.1: {}
 
@@ -6980,43 +12749,55 @@ snapshots:
     transitivePeerDependencies:
       - '@noble/hashes'
 
-  debug@4.4.1:
-    dependencies:
-      ms: 2.1.3
+  db0@0.3.4(better-sqlite3@12.8.0):
+    optionalDependencies:
+      better-sqlite3: 12.8.0
+
+  de-indent@1.0.2: {}
 
   debug@4.4.3:
     dependencies:
       ms: 2.1.3
 
-  decamelize-keys@1.1.1:
-    dependencies:
-      decamelize: 1.2.0
-      map-obj: 1.0.1
-
-  decamelize@1.2.0: {}
-
   decimal.js@10.6.0: {}
 
   decode-named-character-reference@1.2.0:
     dependencies:
       character-entities: 2.0.2
 
+  decompress-response@10.0.0:
+    dependencies:
+      mimic-response: 4.0.0
+
   decompress-response@6.0.0:
     dependencies:
       mimic-response: 3.1.0
 
+  deep-eql@5.0.2: {}
+
   deep-extend@0.6.0:
     optional: true
 
+  deep-is@0.1.4: {}
+
   deepmerge@4.3.1: {}
 
+  default-browser-id@5.0.1: {}
+
+  default-browser@5.5.0:
+    dependencies:
+      bundle-name: 4.1.0
+      default-browser-id: 5.0.1
+
   defer-to-connect@2.0.1: {}
 
   define-data-property@1.1.4:
     dependencies:
-      es-define-property: 1.0.0
+      es-define-property: 1.0.1
       es-errors: 1.3.0
-      gopd: 1.0.1
+      gopd: 1.2.0
+
+  define-lazy-prop@3.0.0: {}
 
   define-properties@1.2.1:
     dependencies:
@@ -7024,7 +12805,11 @@ snapshots:
       has-property-descriptors: 1.0.2
       object-keys: 1.1.1
 
-  defu@6.1.4: {}
+  defu@6.1.7: {}
+
+  denque@2.1.0: {}
+
+  depd@2.0.0: {}
 
   dequal@2.0.3: {}
 
@@ -7033,13 +12818,16 @@ snapshots:
       inherits: 2.0.4
       minimalistic-assert: 1.0.1
 
+  destr@2.0.5: {}
+
   detect-indent@7.0.2: {}
 
-  detect-libc@2.0.3:
-    optional: true
+  detect-libc@2.0.3: {}
 
   detect-node@2.1.0: {}
 
+  devalue@5.8.1: {}
+
   devlop@1.1.0:
     dependencies:
       dequal: 2.0.3
@@ -7048,6 +12836,14 @@ snapshots:
 
   diff@8.0.3: {}
 
+  diff@9.0.0: {}
+
+  doctypes@1.1.0: {}
+
+  dom-accessibility-api@0.5.16: {}
+
+  dom-accessibility-api@0.6.3: {}
+
   dom-serializer@2.0.0:
     dependencies:
       domelementtype: 2.3.0
@@ -7066,14 +12862,30 @@ snapshots:
       domelementtype: 2.3.0
       domhandler: 5.0.3
 
+  dot-prop@10.1.0:
+    dependencies:
+      type-fest: 5.7.0
+
   dotenv@16.6.1: {}
 
+  dotenv@17.3.1: {}
+
   dtrace-provider@0.8.8:
     dependencies:
-      nan: 2.22.2
+      nan: 2.27.0
     optional: true
 
-  dts-resolver@2.1.3: {}
+  dts-resolver@3.0.0(oxc-resolver@11.20.0):
+    optionalDependencies:
+      oxc-resolver: 11.20.0
+
+  dunder-proto@1.0.1:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
+  duplexer@0.1.2: {}
 
   eastasianwidth@0.2.0: {}
 
@@ -7086,14 +12898,18 @@ snapshots:
       '@one-ini/wasm': 0.1.1
       commander: 10.0.1
       minimatch: 9.0.1
-      semver: 7.7.2
+      semver: 7.8.2
 
-  editorconfig@3.0.1:
+  editorconfig@3.0.2:
     dependencies:
-      '@one-ini/wasm': 0.2.0
+      '@one-ini/wasm': 0.2.1
       commander: 14.0.3
-      minimatch: 10.0.1
-      semver: 7.7.4
+      minimatch: 10.2.5
+      semver: 7.8.2
+
+  ee-first@1.1.1: {}
+
+  electron-to-chromium@1.5.368: {}
 
   email-addresses@5.0.0: {}
 
@@ -7103,11 +12919,13 @@ snapshots:
 
   emoji-regex@9.2.2: {}
 
-  emojibase-regex@16.0.0: {}
+  emojibase-regex@17.0.0: {}
 
-  emojibase@16.0.0: {}
+  emojibase@17.0.0: {}
 
-  empathic@2.0.0: {}
+  empathic@2.0.1: {}
+
+  encodeurl@2.0.0: {}
 
   encoding@0.1.13:
     dependencies:
@@ -7118,78 +12936,306 @@ snapshots:
     dependencies:
       once: 1.4.0
 
-  entities@4.5.0: {}
+  enhanced-resolve@5.23.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.3.3
 
-  entities@6.0.1: {}
+  entities@4.5.0: {}
 
   entities@7.0.1: {}
 
-  env-paths@2.2.1:
-    optional: true
+  entities@8.0.0: {}
 
-  err-code@2.0.3:
+  env-paths@2.2.1:
     optional: true
 
   error-ex@1.3.2:
     dependencies:
       is-arrayish: 0.2.1
 
-  es-define-property@1.0.0:
-    dependencies:
-      get-intrinsic: 1.2.4
+  error-stack-parser-es@1.0.5: {}
+
+  errx@0.1.0: {}
+
+  es-define-property@1.0.1: {}
 
   es-errors@1.3.0: {}
 
-  es-module-lexer@2.1.0: {}
+  es-module-lexer@2.0.0: {}
+
+  es-object-atoms@1.1.1:
+    dependencies:
+      es-errors: 1.3.0
 
   es-toolkit@1.39.10: {}
 
   es6-error@4.1.1: {}
 
-  esbuild@0.25.12:
+  esbuild@0.27.4:
     optionalDependencies:
-      '@esbuild/aix-ppc64': 0.25.12
-      '@esbuild/android-arm': 0.25.12
-      '@esbuild/android-arm64': 0.25.12
-      '@esbuild/android-x64': 0.25.12
-      '@esbuild/darwin-arm64': 0.25.12
-      '@esbuild/darwin-x64': 0.25.12
-      '@esbuild/freebsd-arm64': 0.25.12
-      '@esbuild/freebsd-x64': 0.25.12
-      '@esbuild/linux-arm': 0.25.12
-      '@esbuild/linux-arm64': 0.25.12
-      '@esbuild/linux-ia32': 0.25.12
-      '@esbuild/linux-loong64': 0.25.12
-      '@esbuild/linux-mips64el': 0.25.12
-      '@esbuild/linux-ppc64': 0.25.12
-      '@esbuild/linux-riscv64': 0.25.12
-      '@esbuild/linux-s390x': 0.25.12
-      '@esbuild/linux-x64': 0.25.12
-      '@esbuild/netbsd-arm64': 0.25.12
-      '@esbuild/netbsd-x64': 0.25.12
-      '@esbuild/openbsd-arm64': 0.25.12
-      '@esbuild/openbsd-x64': 0.25.12
-      '@esbuild/openharmony-arm64': 0.25.12
-      '@esbuild/sunos-x64': 0.25.12
-      '@esbuild/win32-arm64': 0.25.12
-      '@esbuild/win32-ia32': 0.25.12
-      '@esbuild/win32-x64': 0.25.12
+      '@esbuild/aix-ppc64': 0.27.4
+      '@esbuild/android-arm': 0.27.4
+      '@esbuild/android-arm64': 0.27.4
+      '@esbuild/android-x64': 0.27.4
+      '@esbuild/darwin-arm64': 0.27.4
+      '@esbuild/darwin-x64': 0.27.4
+      '@esbuild/freebsd-arm64': 0.27.4
+      '@esbuild/freebsd-x64': 0.27.4
+      '@esbuild/linux-arm': 0.27.4
+      '@esbuild/linux-arm64': 0.27.4
+      '@esbuild/linux-ia32': 0.27.4
+      '@esbuild/linux-loong64': 0.27.4
+      '@esbuild/linux-mips64el': 0.27.4
+      '@esbuild/linux-ppc64': 0.27.4
+      '@esbuild/linux-riscv64': 0.27.4
+      '@esbuild/linux-s390x': 0.27.4
+      '@esbuild/linux-x64': 0.27.4
+      '@esbuild/netbsd-arm64': 0.27.4
+      '@esbuild/netbsd-x64': 0.27.4
+      '@esbuild/openbsd-arm64': 0.27.4
+      '@esbuild/openbsd-x64': 0.27.4
+      '@esbuild/openharmony-arm64': 0.27.4
+      '@esbuild/sunos-x64': 0.27.4
+      '@esbuild/win32-arm64': 0.27.4
+      '@esbuild/win32-ia32': 0.27.4
+      '@esbuild/win32-x64': 0.27.4
+
+  esbuild@0.28.0:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.28.0
+      '@esbuild/android-arm': 0.28.0
+      '@esbuild/android-arm64': 0.28.0
+      '@esbuild/android-x64': 0.28.0
+      '@esbuild/darwin-arm64': 0.28.0
+      '@esbuild/darwin-x64': 0.28.0
+      '@esbuild/freebsd-arm64': 0.28.0
+      '@esbuild/freebsd-x64': 0.28.0
+      '@esbuild/linux-arm': 0.28.0
+      '@esbuild/linux-arm64': 0.28.0
+      '@esbuild/linux-ia32': 0.28.0
+      '@esbuild/linux-loong64': 0.28.0
+      '@esbuild/linux-mips64el': 0.28.0
+      '@esbuild/linux-ppc64': 0.28.0
+      '@esbuild/linux-riscv64': 0.28.0
+      '@esbuild/linux-s390x': 0.28.0
+      '@esbuild/linux-x64': 0.28.0
+      '@esbuild/netbsd-arm64': 0.28.0
+      '@esbuild/netbsd-x64': 0.28.0
+      '@esbuild/openbsd-arm64': 0.28.0
+      '@esbuild/openbsd-x64': 0.28.0
+      '@esbuild/openharmony-arm64': 0.28.0
+      '@esbuild/sunos-x64': 0.28.0
+      '@esbuild/win32-arm64': 0.28.0
+      '@esbuild/win32-ia32': 0.28.0
+      '@esbuild/win32-x64': 0.28.0
+
+  escalade@3.2.0: {}
+
+  escape-html@1.0.3: {}
 
   escape-string-regexp@4.0.0: {}
 
   escape-string-regexp@5.0.0: {}
 
+  eslint-compat-utils@0.5.1(eslint@10.4.1(jiti@2.7.0)):
+    dependencies:
+      eslint: 10.4.1(jiti@2.7.0)
+      semver: 7.8.2
+
+  eslint-import-context@0.1.9(unrs-resolver@1.12.2):
+    dependencies:
+      get-tsconfig: 4.13.6
+      stable-hash-x: 0.2.0
+    optionalDependencies:
+      unrs-resolver: 1.12.2
+
+  eslint-plugin-es-x@7.8.0(eslint@10.4.1(jiti@2.7.0)):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@10.4.1(jiti@2.7.0))
+      '@eslint-community/regexpp': 4.12.2
+      eslint: 10.4.1(jiti@2.7.0)
+      eslint-compat-utils: 0.5.1(eslint@10.4.1(jiti@2.7.0))
+
+  eslint-plugin-import-x@4.16.2(@typescript-eslint/utils@8.60.1(eslint@10.4.1(jiti@2.7.0))(typescript@6.0.3))(eslint@10.4.1(jiti@2.7.0)):
+    dependencies:
+      '@package-json/types': 0.0.12
+      '@typescript-eslint/types': 8.60.1
+      comment-parser: 1.4.7
+      debug: 4.4.3
+      eslint: 10.4.1(jiti@2.7.0)
+      eslint-import-context: 0.1.9(unrs-resolver@1.12.2)
+      is-glob: 4.0.3
+      minimatch: 10.2.5
+      semver: 7.8.2
+      stable-hash-x: 0.2.0
+      unrs-resolver: 1.12.2
+    optionalDependencies:
+      '@typescript-eslint/utils': 8.60.1(eslint@10.4.1(jiti@2.7.0))(typescript@6.0.3)
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-plugin-n@18.0.1(eslint@10.4.1(jiti@2.7.0))(typescript@6.0.3):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@10.4.1(jiti@2.7.0))
+      enhanced-resolve: 5.23.0
+      eslint: 10.4.1(jiti@2.7.0)
+      eslint-plugin-es-x: 7.8.0(eslint@10.4.1(jiti@2.7.0))
+      get-tsconfig: 4.13.6
+      globals: 15.15.0
+      globrex: 0.1.2
+      ignore: 5.3.2
+      semver: 7.8.2
+    optionalDependencies:
+      typescript: 6.0.3
+
+  eslint-plugin-regexp@3.1.0(eslint@10.4.1(jiti@2.7.0)):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@10.4.1(jiti@2.7.0))
+      '@eslint-community/regexpp': 4.12.2
+      comment-parser: 1.4.7
+      eslint: 10.4.1(jiti@2.7.0)
+      jsdoc-type-pratt-parser: 7.2.0
+      refa: 0.12.1
+      regexp-ast-analysis: 0.7.1
+      scslre: 0.3.0
+
+  eslint-plugin-unicorn@65.0.0(eslint@10.4.1(jiti@2.7.0)):
+    dependencies:
+      '@babel/helper-validator-identifier': 7.29.7
+      '@eslint-community/eslint-utils': 4.9.1(eslint@10.4.1(jiti@2.7.0))
+      change-case: 5.4.4
+      ci-info: 4.4.0
+      core-js-compat: 3.49.0
+      detect-indent: 7.0.2
+      eslint: 10.4.1(jiti@2.7.0)
+      find-up-simple: 1.0.1
+      globals: 17.6.0
+      indent-string: 5.0.0
+      is-builtin-module: 5.0.0
+      jsesc: 3.1.0
+      pluralize: 8.0.0
+      regjsparser: 0.13.1
+      semver: 7.8.2
+      strip-indent: 4.1.1
+
+  eslint-plugin-vue@10.9.2(@stylistic/eslint-plugin@5.10.0(eslint@10.4.1(jiti@2.7.0)))(@typescript-eslint/parser@8.60.1(eslint@10.4.1(jiti@2.7.0))(typescript@6.0.3))(eslint@10.4.1(jiti@2.7.0))(vue-eslint-parser@10.4.1(eslint@10.4.1(jiti@2.7.0))):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@10.4.1(jiti@2.7.0))
+      eslint: 10.4.1(jiti@2.7.0)
+      natural-compare: 1.4.0
+      nth-check: 2.1.1
+      postcss-selector-parser: 7.1.1
+      semver: 7.8.2
+      vue-eslint-parser: 10.4.1(eslint@10.4.1(jiti@2.7.0))
+      xml-name-validator: 4.0.0
+    optionalDependencies:
+      '@stylistic/eslint-plugin': 5.10.0(eslint@10.4.1(jiti@2.7.0))
+      '@typescript-eslint/parser': 8.60.1(eslint@10.4.1(jiti@2.7.0))(typescript@6.0.3)
+
+  eslint-scope@9.1.2:
+    dependencies:
+      '@types/esrecurse': 4.3.1
+      '@types/estree': 1.0.9
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+
   eslint-visitor-keys@3.4.3: {}
 
+  eslint-visitor-keys@4.2.1: {}
+
+  eslint-visitor-keys@5.0.1: {}
+
+  eslint@10.4.1(jiti@2.7.0):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@10.4.1(jiti@2.7.0))
+      '@eslint-community/regexpp': 4.12.2
+      '@eslint/config-array': 0.23.5
+      '@eslint/config-helpers': 0.6.0
+      '@eslint/core': 1.2.1
+      '@eslint/plugin-kit': 0.7.2
+      '@humanfs/node': 0.16.7
+      '@humanwhocodes/module-importer': 1.0.1
+      '@humanwhocodes/retry': 0.4.3
+      '@types/estree': 1.0.9
+      ajv: 6.14.0
+      cross-spawn: 7.0.6
+      debug: 4.4.3
+      escape-string-regexp: 4.0.0
+      eslint-scope: 9.1.2
+      eslint-visitor-keys: 5.0.1
+      espree: 11.2.0
+      esquery: 1.7.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 8.0.0
+      find-up: 5.0.0
+      glob-parent: 6.0.2
+      ignore: 5.3.2
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      json-stable-stringify-without-jsonify: 1.0.1
+      minimatch: 10.2.5
+      natural-compare: 1.4.0
+      optionator: 0.9.4
+    optionalDependencies:
+      jiti: 2.7.0
+    transitivePeerDependencies:
+      - supports-color
+
+  esm-resolve@1.0.11: {}
+
+  espree@10.4.0:
+    dependencies:
+      acorn: 8.16.0
+      acorn-jsx: 5.3.2(acorn@8.16.0)
+      eslint-visitor-keys: 4.2.1
+
+  espree@11.2.0:
+    dependencies:
+      acorn: 8.16.0
+      acorn-jsx: 5.3.2(acorn@8.16.0)
+      eslint-visitor-keys: 5.0.1
+
   esprima@4.0.1: {}
 
+  esquery@1.7.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  esrecurse@4.3.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  estraverse@5.3.0: {}
+
   estree-walker@2.0.2: {}
 
   estree-walker@3.0.3:
     dependencies:
       '@types/estree': 1.0.9
 
-  eventemitter3@5.0.1: {}
+  esutils@2.0.3: {}
+
+  etag@1.8.1: {}
+
+  event-target-shim@5.0.1: {}
+
+  eventemitter3@5.0.4: {}
+
+  events-universal@1.0.1:
+    dependencies:
+      bare-events: 2.8.2
+    transitivePeerDependencies:
+      - bare-abort-controller
+
+  events@3.3.0: {}
+
+  eventsource-parser@3.1.0: {}
+
+  eventsource@3.0.7:
+    dependencies:
+      eventsource-parser: 3.1.0
 
   execa@8.0.1:
     dependencies:
@@ -7211,20 +13257,52 @@ snapshots:
   exponential-backoff@3.1.1:
     optional: true
 
-  extend@3.0.2: {}
-
-  extract-zip@2.0.1:
+  express-rate-limit@8.5.2(express@5.2.1):
     dependencies:
-      debug: 4.4.1
-      get-stream: 5.2.0
-      yauzl: 2.10.0
-    optionalDependencies:
-      '@types/yauzl': 2.10.3
+      express: 5.2.1
+      ip-address: 10.2.0
+
+  express@5.2.1:
+    dependencies:
+      accepts: 2.0.0
+      body-parser: 2.2.2
+      content-disposition: 1.1.0
+      content-type: 1.0.5
+      cookie: 0.7.2
+      cookie-signature: 1.2.2
+      debug: 4.4.3
+      depd: 2.0.0
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      finalhandler: 2.1.1
+      fresh: 2.0.0
+      http-errors: 2.0.1
+      merge-descriptors: 2.0.0
+      mime-types: 3.0.2
+      on-finished: 2.4.1
+      once: 1.4.0
+      parseurl: 1.3.3
+      proxy-addr: 2.0.7
+      qs: 6.15.2
+      range-parser: 1.2.1
+      router: 2.2.0
+      send: 1.2.1
+      serve-static: 2.2.1
+      statuses: 2.0.2
+      type-is: 2.1.0
+      vary: 1.1.2
     transitivePeerDependencies:
       - supports-color
 
+  exsolve@1.0.8: {}
+
+  extend@3.0.2: {}
+
   fast-deep-equal@3.1.3: {}
 
+  fast-fifo@1.3.2: {}
+
   fast-glob@3.3.3:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -7233,18 +13311,40 @@ snapshots:
       merge2: 1.4.1
       micromatch: 4.0.8
 
-  fast-xml-parser@5.3.4:
+  fast-json-stable-stringify@2.1.0: {}
+
+  fast-levenshtein@2.0.6: {}
+
+  fast-npm-meta@1.4.2: {}
+
+  fast-string-truncated-width@3.0.3: {}
+
+  fast-string-width@3.0.2:
     dependencies:
-      strnum: 2.1.1
+      fast-string-truncated-width: 3.0.3
+
+  fast-uri@3.1.2: {}
+
+  fast-wrap-ansi@0.2.2:
+    dependencies:
+      fast-string-width: 3.0.2
+
+  fast-xml-builder@1.2.0:
+    dependencies:
+      path-expression-matcher: 1.5.0
+      xml-naming: 0.1.0
+
+  fast-xml-parser@5.7.3:
+    dependencies:
+      '@nodable/entities': 2.1.1
+      fast-xml-builder: 1.2.0
+      path-expression-matcher: 1.5.0
+      strnum: 2.3.0
 
   fastq@1.17.1:
     dependencies:
       reusify: 1.0.4
 
-  fd-slicer@1.1.0:
-    dependencies:
-      pend: 1.2.0
-
   fdir@6.5.0(picomatch@4.0.4):
     optionalDependencies:
       picomatch: 4.0.4
@@ -7256,13 +13356,27 @@ snapshots:
 
   fflate@0.8.2: {}
 
-  file-uri-to-path@1.0.0:
-    optional: true
+  file-entry-cache@8.0.0:
+    dependencies:
+      flat-cache: 4.0.1
+
+  file-uri-to-path@1.0.0: {}
 
   fill-range@7.1.1:
     dependencies:
       to-regex-range: 5.0.1
 
+  finalhandler@2.1.1:
+    dependencies:
+      debug: 4.4.3
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      on-finished: 2.4.1
+      parseurl: 1.3.3
+      statuses: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
   find-packages@10.0.4:
     dependencies:
       '@pnpm/read-project-manifest': 4.1.1
@@ -7271,9 +13385,11 @@ snapshots:
       fast-glob: 3.3.3
       p-filter: 2.1.0
 
-  find-up@4.1.0:
+  find-up-simple@1.0.1: {}
+
+  find-up@5.0.0:
     dependencies:
-      locate-path: 5.0.0
+      locate-path: 6.0.0
       path-exists: 4.0.0
 
   find-up@8.0.0:
@@ -7281,23 +13397,84 @@ snapshots:
       locate-path: 8.0.0
       unicorn-magic: 0.3.0
 
-  flatted@3.3.3: {}
-
-  for-each@0.3.3:
+  flat-cache@4.0.1:
     dependencies:
-      is-callable: 1.2.7
+      flatted: 3.4.2
+      keyv: 4.5.4
+
+  flatted@3.4.2: {}
+
+  fontaine@0.8.0:
+    dependencies:
+      '@capsizecss/unpack': 4.0.0
+      css-tree: 3.2.1
+      magic-regexp: 0.10.0
+      magic-string: 0.30.21
+      pathe: 2.0.3
+      ufo: 1.6.4
+      unplugin: 2.3.11
+
+  fontkitten@1.0.3:
+    dependencies:
+      tiny-inflate: 1.0.3
+
+  fontless@0.2.1(db0@0.3.4(better-sqlite3@12.8.0))(ioredis@5.10.1)(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0)):
+    dependencies:
+      consola: 3.4.2
+      css-tree: 3.2.1
+      defu: 6.1.7
+      esbuild: 0.27.4
+      fontaine: 0.8.0
+      jiti: 2.7.0
+      lightningcss: 1.32.0
+      magic-string: 0.30.21
+      ohash: 2.0.11
+      pathe: 2.0.3
+      ufo: 1.6.4
+      unifont: 0.7.4
+      unstorage: 1.17.5(db0@0.3.4(better-sqlite3@12.8.0))(ioredis@5.10.1)
+    optionalDependencies:
+      vite: 8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0)
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/functions'
+      - '@vercel/kv'
+      - aws4fetch
+      - db0
+      - idb-keyval
+      - ioredis
+      - uploadthing
 
   foreground-child@3.3.1:
     dependencies:
       cross-spawn: 7.0.6
       signal-exit: 4.1.0
 
+  form-data-encoder@4.1.0: {}
+
   formdata-polyfill@4.0.10:
     dependencies:
       fetch-blob: 3.2.0
 
   forwarded-parse@2.1.2: {}
 
+  forwarded@0.2.0: {}
+
+  fraction.js@5.3.4: {}
+
+  fresh@2.0.0: {}
+
   fs-constants@1.0.0:
     optional: true
 
@@ -7307,37 +13484,29 @@ snapshots:
       jsonfile: 6.1.0
       universalify: 2.0.1
 
-  fs-extra@11.3.3:
+  fs-extra@11.3.5:
     dependencies:
       graceful-fs: 4.2.11
       jsonfile: 6.1.0
       universalify: 2.0.1
 
-  fs-minipass@2.1.0:
-    dependencies:
-      minipass: 3.3.6
-
   fs-minipass@3.0.3:
     dependencies:
-      minipass: 7.1.2
+      minipass: 7.1.3
+
+  fsevents@2.3.2:
+    optional: true
 
   fsevents@2.3.3:
     optional: true
 
   function-bind@1.1.2: {}
 
-  gaxios@6.5.0(encoding@0.1.13):
-    dependencies:
-      extend: 3.0.2
-      https-proxy-agent: 7.0.6
-      is-stream: 2.0.1
-      node-fetch: 2.7.0(encoding@0.1.13)
-      uuid: 9.0.1
-    transitivePeerDependencies:
-      - encoding
-      - supports-color
+  fuse.js@7.4.2: {}
 
-  gaxios@7.1.1:
+  fzf@0.5.2: {}
+
+  gaxios@7.1.4:
     dependencies:
       extend: 3.0.2
       https-proxy-agent: 7.0.6
@@ -7345,29 +13514,39 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  gcp-metadata@6.1.0(encoding@0.1.13):
-    dependencies:
-      gaxios: 6.5.0(encoding@0.1.13)
-      json-bigint: 1.0.0
-    transitivePeerDependencies:
-      - encoding
-      - supports-color
-
   gcp-metadata@8.1.2:
     dependencies:
-      gaxios: 7.1.1
-      google-logging-utils: 1.1.1
+      gaxios: 7.1.4
+      google-logging-utils: 1.1.3
       json-bigint: 1.0.0
     transitivePeerDependencies:
       - supports-color
 
-  get-intrinsic@1.2.4:
+  gensync@1.0.0-beta.2: {}
+
+  get-caller-file@2.0.5: {}
+
+  get-east-asian-width@1.5.0: {}
+
+  get-intrinsic@1.3.0:
     dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
       es-errors: 1.3.0
+      es-object-atoms: 1.1.1
       function-bind: 1.1.2
-      has-proto: 1.0.3
-      has-symbols: 1.0.3
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-symbols: 1.1.0
       hasown: 2.0.2
+      math-intrinsics: 1.1.0
+
+  get-port-please@3.2.0: {}
+
+  get-proto@1.0.1:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-object-atoms: 1.1.1
 
   get-stream@5.2.0:
     dependencies:
@@ -7375,17 +13554,20 @@ snapshots:
 
   get-stream@8.0.1: {}
 
+  get-stream@9.0.1:
+    dependencies:
+      '@sec-ant/readable-stream': 0.4.1
+      is-stream: 4.0.1
+
   get-tsconfig@4.13.6:
     dependencies:
       resolve-pkg-maps: 1.0.0
 
-  git-raw-commits@2.0.11:
+  get-tsconfig@5.0.0-beta.5:
     dependencies:
-      dargs: 7.0.0
-      lodash: 4.17.21
-      meow: 8.1.2
-      split2: 3.2.2
-      through2: 4.0.2
+      resolve-pkg-maps: 1.0.0
+
+  giget@3.2.0: {}
 
   git-up@8.1.1:
     dependencies:
@@ -7405,20 +13587,24 @@ snapshots:
     dependencies:
       is-glob: 4.0.3
 
+  glob-parent@6.0.2:
+    dependencies:
+      is-glob: 4.0.3
+
   glob@10.4.5:
     dependencies:
       foreground-child: 3.3.1
       jackspeak: 3.1.2
       minimatch: 9.0.5
-      minipass: 7.1.2
+      minipass: 7.1.3
       package-json-from-dist: 1.0.0
       path-scurry: 1.11.1
 
-  glob@13.0.1:
+  glob@13.0.6:
     dependencies:
-      minimatch: 10.1.2
-      minipass: 7.1.2
-      path-scurry: 2.0.0
+      minimatch: 10.2.5
+      minipass: 7.1.3
+      path-scurry: 2.0.2
 
   glob@6.0.4:
     dependencies:
@@ -7435,30 +13621,46 @@ snapshots:
       es6-error: 4.1.1
       matcher: 3.0.0
       roarr: 2.15.4
-      semver: 7.7.4
+      semver: 7.8.2
       serialize-error: 7.0.1
 
+  global-directory@4.0.1:
+    dependencies:
+      ini: 4.1.1
+
+  globals@15.15.0: {}
+
+  globals@17.6.0: {}
+
   globalthis@1.0.3:
     dependencies:
       define-properties: 1.2.1
 
-  google-auth-library@10.5.0:
+  globby@16.2.0:
+    dependencies:
+      '@sindresorhus/merge-streams': 4.0.0
+      fast-glob: 3.3.3
+      ignore: 7.0.5
+      is-path-inside: 4.0.0
+      slash: 5.1.0
+      unicorn-magic: 0.4.0
+
+  globrex@0.1.2: {}
+
+  google-auth-library@10.6.2:
     dependencies:
       base64-js: 1.5.1
       ecdsa-sig-formatter: 1.0.11
-      gaxios: 7.1.1
+      gaxios: 7.1.4
       gcp-metadata: 8.1.2
-      google-logging-utils: 1.1.1
-      gtoken: 8.0.0
+      google-logging-utils: 1.1.3
       jws: 4.0.0
     transitivePeerDependencies:
       - supports-color
 
-  google-logging-utils@1.1.1: {}
+  google-logging-utils@1.1.3: {}
 
-  gopd@1.0.1:
-    dependencies:
-      get-intrinsic: 1.2.4
+  gopd@1.2.0: {}
 
   got@11.8.6:
     dependencies:
@@ -7474,20 +13676,59 @@ snapshots:
       p-cancelable: 2.1.1
       responselike: 2.0.1
 
+  got@14.6.6:
+    dependencies:
+      '@sindresorhus/is': 7.2.0
+      byte-counter: 0.1.0
+      cacheable-lookup: 7.0.0
+      cacheable-request: 13.0.18
+      decompress-response: 10.0.0
+      form-data-encoder: 4.1.0
+      http2-wrapper: 2.2.1
+      keyv: 5.6.0
+      lowercase-keys: 3.0.0
+      p-cancelable: 4.0.1
+      responselike: 4.0.2
+      type-fest: 4.41.0
+
+  got@15.0.5:
+    dependencies:
+      '@sindresorhus/is': 8.1.0
+      byte-counter: 0.1.0
+      cacheable-lookup: 7.0.0
+      cacheable-request: 13.0.18
+      chunk-data: 0.1.0
+      decompress-response: 10.0.0
+      http2-wrapper: 2.2.1
+      keyv: 5.6.0
+      lowercase-keys: 4.0.1
+      responselike: 4.0.2
+      type-fest: 5.7.0
+      uint8array-extras: 1.5.0
+
   graceful-fs@4.2.11: {}
 
   graph-data-structure@4.5.0: {}
 
   grapheme-splitter@1.0.4: {}
 
-  gtoken@8.0.0:
+  gzip-size@7.0.0:
     dependencies:
-      gaxios: 7.1.1
-      jws: 4.0.0
-    transitivePeerDependencies:
-      - supports-color
+      duplexer: 0.1.2
 
-  handlebars@4.7.8:
+  h3@1.15.11:
+    dependencies:
+      cookie-es: 1.2.3
+      crossws: 0.3.5
+      defu: 6.1.7
+      destr: 2.0.5
+      iron-webcrypto: 1.2.1
+      node-mock-http: 1.0.4
+      radix3: 1.1.2
+      ufo: 1.6.4
+      uncrypto: 0.1.3
+
+  handlebars@4.7.9:
     dependencies:
       minimist: 1.2.8
       neo-async: 2.6.2
@@ -7496,35 +13737,49 @@ snapshots:
     optionalDependencies:
       uglify-js: 3.17.4
 
-  hard-rejection@2.1.0: {}
-
   has-flag@4.0.0: {}
 
   has-property-descriptors@1.0.2:
     dependencies:
-      es-define-property: 1.0.0
+      es-define-property: 1.0.1
 
-  has-proto@1.0.3: {}
-
-  has-symbols@1.0.3: {}
+  has-symbols@1.1.0: {}
 
   has-tostringtag@1.0.2:
     dependencies:
-      has-symbols: 1.0.3
+      has-symbols: 1.1.0
+
+  hash-sum@2.0.0: {}
 
   hasown@2.0.2:
     dependencies:
       function-bind: 1.1.2
 
+  hast-util-to-html@9.0.5:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      comma-separated-tokens: 2.0.3
+      hast-util-whitespace: 3.0.0
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.2.1
+      property-information: 7.1.0
+      space-separated-tokens: 2.0.2
+      stringify-entities: 4.0.4
+      zwitch: 2.0.4
+
+  hast-util-whitespace@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
   he@1.2.0: {}
 
+  hono@4.12.23: {}
+
   hookable@5.5.3: {}
 
-  hosted-git-info@2.8.9: {}
-
-  hosted-git-info@4.1.0:
-    dependencies:
-      lru-cache: 6.0.0
+  hookable@6.1.1: {}
 
   hpagent@1.2.0: {}
 
@@ -7536,28 +13791,39 @@ snapshots:
 
   html-escaper@2.0.2: {}
 
-  http-cache-semantics@4.1.1: {}
+  html-void-elements@3.0.0: {}
 
-  http-proxy-agent@7.0.2:
+  http-cache-semantics@4.2.0: {}
+
+  http-errors@2.0.1:
     dependencies:
-      agent-base: 7.1.3
-      debug: 4.4.1
-    transitivePeerDependencies:
-      - supports-color
-    optional: true
+      depd: 2.0.0
+      inherits: 2.0.4
+      setprototypeof: 1.2.0
+      statuses: 2.0.2
+      toidentifier: 1.0.1
+
+  http-shutdown@1.2.2: {}
 
   http2-wrapper@1.0.3:
     dependencies:
       quick-lru: 5.1.1
       resolve-alpn: 1.2.1
 
+  http2-wrapper@2.2.1:
+    dependencies:
+      quick-lru: 5.1.1
+      resolve-alpn: 1.2.1
+
   https-proxy-agent@7.0.6:
     dependencies:
       agent-base: 7.1.3
-      debug: 4.4.1
+      debug: 4.4.3
     transitivePeerDependencies:
       - supports-color
 
+  httpxy@0.5.3: {}
+
   human-signals@5.0.0: {}
 
   humanize-ms@1.2.1:
@@ -7569,24 +13835,41 @@ snapshots:
       safer-buffer: 2.1.2
     optional: true
 
-  ieee754@1.2.1:
-    optional: true
+  iconv-lite@0.7.2:
+    dependencies:
+      safer-buffer: 2.1.2
+
+  ieee754@1.2.1: {}
+
+  ignore@5.3.2: {}
 
   ignore@7.0.5: {}
 
-  immediate@3.0.6: {}
+  image-meta@0.2.2: {}
 
-  import-in-the-middle@2.0.6:
+  import-in-the-middle@3.0.0:
     dependencies:
-      acorn: 8.15.0
-      acorn-import-attributes: 1.9.5(acorn@8.15.0)
+      acorn: 8.16.0
+      acorn-import-attributes: 1.9.5(acorn@8.16.0)
       cjs-module-lexer: 2.2.0
       module-details-from-path: 1.0.4
 
+  import-without-cache@0.4.0: {}
+
+  impound@1.1.5:
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      es-module-lexer: 2.0.0
+      pathe: 2.0.3
+      unplugin: 3.0.0
+      unplugin-utils: 0.3.1
+
   imurmurhash@0.1.4: {}
 
   indent-string@4.0.0: {}
 
+  indent-string@5.0.0: {}
+
   inflight@1.0.6:
     dependencies:
       once: 1.4.0
@@ -7597,45 +13880,74 @@ snapshots:
 
   ini@1.3.8: {}
 
+  ini@4.1.1: {}
+
   ini@6.0.0: {}
 
-  install-artifact-from-github@1.4.0:
+  install-artifact-from-github@1.6.0:
     optional: true
 
-  ip-address@9.0.5:
+  ioredis@5.10.1:
     dependencies:
-      jsbn: 1.1.0
-      sprintf-js: 1.1.3
-    optional: true
+      '@ioredis/commands': 1.5.1
+      cluster-key-slot: 1.1.2
+      debug: 4.4.3
+      denque: 2.1.0
+      lodash.defaults: 4.2.0
+      lodash.isarguments: 3.1.0
+      redis-errors: 1.2.0
+      redis-parser: 3.0.0
+      standard-as-callback: 2.1.0
+    transitivePeerDependencies:
+      - supports-color
 
-  is-arguments@1.1.1:
-    dependencies:
-      call-bind: 1.0.7
-      has-tostringtag: 1.0.2
+  ip-address@10.2.0: {}
+
+  ipaddr.js@1.9.1: {}
+
+  iron-webcrypto@1.2.1: {}
 
   is-arrayish@0.2.1: {}
 
-  is-callable@1.2.7: {}
+  is-builtin-module@5.0.0:
+    dependencies:
+      builtin-modules: 5.2.0
 
   is-core-module@2.13.1:
     dependencies:
       hasown: 2.0.2
 
+  is-docker@3.0.0: {}
+
+  is-expression@4.0.0:
+    dependencies:
+      acorn: 7.4.1
+      object-assign: 4.1.1
+
   is-extglob@2.1.1: {}
 
   is-fullwidth-code-point@3.0.0: {}
 
-  is-generator-function@1.0.10:
-    dependencies:
-      has-tostringtag: 1.0.2
-
   is-glob@4.0.3:
     dependencies:
       is-extglob: 2.1.1
 
+  is-in-ssh@1.0.0: {}
+
+  is-inside-container@1.0.0:
+    dependencies:
+      is-docker: 3.0.0
+
+  is-installed-globally@1.0.0:
+    dependencies:
+      global-directory: 4.0.1
+      is-path-inside: 4.0.0
+
+  is-module@1.0.0: {}
+
   is-number@7.0.0: {}
 
-  is-plain-obj@1.1.0: {}
+  is-path-inside@4.0.0: {}
 
   is-plain-obj@2.1.0: {}
 
@@ -7643,6 +13955,21 @@ snapshots:
 
   is-potential-custom-element-name@1.0.1: {}
 
+  is-promise@2.2.2: {}
+
+  is-promise@4.0.0: {}
+
+  is-reference@1.2.1:
+    dependencies:
+      '@types/estree': 1.0.9
+
+  is-regex@1.2.1:
+    dependencies:
+      call-bound: 1.0.4
+      gopd: 1.2.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+
   is-ssh@1.4.0:
     dependencies:
       protocols: 2.0.1
@@ -7651,20 +13978,21 @@ snapshots:
 
   is-stream@3.0.0: {}
 
-  is-typed-array@1.1.13:
-    dependencies:
-      which-typed-array: 1.1.15
+  is-stream@4.0.1: {}
 
   is-typedarray@1.0.0: {}
 
   is-windows@1.0.2: {}
 
+  is-wsl@3.1.1:
+    dependencies:
+      is-inside-container: 1.0.0
+
   isarray@1.0.0: {}
 
   isexe@2.0.0: {}
 
-  isexe@4.0.0:
-    optional: true
+  isexe@4.0.0: {}
 
   istanbul-lib-coverage@3.2.2: {}
 
@@ -7685,7 +14013,9 @@ snapshots:
     optionalDependencies:
       '@pkgjs/parseargs': 0.11.0
 
-  jiti@2.6.1: {}
+  jiti@2.7.0: {}
+
+  jose@6.2.3: {}
 
   js-beautify@1.15.1:
     dependencies:
@@ -7699,10 +14029,14 @@ snapshots:
 
   js-md4@0.3.2: {}
 
+  js-stringify@1.0.2: {}
+
   js-tokens@10.0.0: {}
 
   js-tokens@4.0.0: {}
 
+  js-tokens@9.0.1: {}
+
   js-yaml@3.14.1:
     dependencies:
       argparse: 1.0.10
@@ -7712,27 +14046,26 @@ snapshots:
     dependencies:
       argparse: 2.0.1
 
-  jsbn@1.1.0:
-    optional: true
+  jsdoc-type-pratt-parser@7.2.0: {}
 
-  jsdom@29.0.1:
+  jsdom@29.1.1:
     dependencies:
-      '@asamuzakjp/css-color': 5.0.1
-      '@asamuzakjp/dom-selector': 7.0.4
+      '@asamuzakjp/css-color': 5.1.11
+      '@asamuzakjp/dom-selector': 7.1.1
       '@bramus/specificity': 2.4.2
-      '@csstools/css-syntax-patches-for-csstree': 1.1.1(css-tree@3.2.1)
+      '@csstools/css-syntax-patches-for-csstree': 1.1.5(css-tree@3.2.1)
       '@exodus/bytes': 1.15.0
       css-tree: 3.2.1
       data-urls: 7.0.0
       decimal.js: 10.6.0
       html-encoding-sniffer: 6.0.0
       is-potential-custom-element-name: 1.0.1
-      lru-cache: 11.2.7
-      parse5: 8.0.0
+      lru-cache: 11.5.1
+      parse5: 8.0.1
       saxes: 6.0.0
       symbol-tree: 3.2.4
       tough-cookie: 6.0.1
-      undici: 7.24.5
+      undici: 7.27.2
       w3c-xmlserializer: 5.0.0
       webidl-conversions: 8.0.1
       whatwg-mimetype: 5.0.0
@@ -7755,15 +14088,27 @@ snapshots:
 
   json-parse-even-better-errors@2.3.1: {}
 
+  json-schema-traverse@0.4.1: {}
+
+  json-schema-traverse@1.0.0: {}
+
+  json-schema-typed@8.0.2: {}
+
+  json-stable-stringify-without-jsonify@1.0.1: {}
+
   json-stringify-pretty-compact@4.0.0: {}
 
   json-stringify-safe@5.0.1: {}
 
   json5@2.2.3: {}
 
-  jsonata@2.1.0: {}
+  jsonata@2.2.1: {}
 
-  jsonc-parser@3.3.1: {}
+  jsonc-morph@0.3.4: {}
+
+  jsonc-weaver@0.2.4:
+    dependencies:
+      jsonc-morph: 0.3.4
 
   jsonfile@6.1.0:
     dependencies:
@@ -7771,6 +14116,11 @@ snapshots:
     optionalDependencies:
       graceful-fs: 4.2.11
 
+  jstransformer@1.0.0:
+    dependencies:
+      is-promise: 2.2.2
+      promise: 7.3.1
+
   jwa@2.0.0:
     dependencies:
       buffer-equal-constant-time: 1.0.1
@@ -7786,102 +14136,212 @@ snapshots:
     dependencies:
       json-buffer: 3.0.1
 
-  kind-of@6.0.3: {}
+  keyv@5.6.0:
+    dependencies:
+      '@keyv/serialize': 1.1.1
+
+  kleur@4.1.5: {}
 
   klona@2.0.6: {}
 
-  lie@3.1.1:
+  knitwork@1.3.0: {}
+
+  launch-editor@2.13.2:
     dependencies:
-      immediate: 3.0.6
+      picocolors: 1.1.1
+      shell-quote: 1.8.3
+
+  lazystream@1.0.1:
+    dependencies:
+      readable-stream: 2.3.8
+
+  levn@0.4.1:
+    dependencies:
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+
+  lightningcss-android-arm64@1.32.0:
+    optional: true
+
+  lightningcss-darwin-arm64@1.32.0:
+    optional: true
+
+  lightningcss-darwin-x64@1.32.0:
+    optional: true
+
+  lightningcss-freebsd-x64@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.32.0:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.32.0:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.32.0:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.32.0:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.32.0:
+    optional: true
+
+  lightningcss@1.32.0:
+    dependencies:
+      detect-libc: 2.0.3
+    optionalDependencies:
+      lightningcss-android-arm64: 1.32.0
+      lightningcss-darwin-arm64: 1.32.0
+      lightningcss-darwin-x64: 1.32.0
+      lightningcss-freebsd-x64: 1.32.0
+      lightningcss-linux-arm-gnueabihf: 1.32.0
+      lightningcss-linux-arm64-gnu: 1.32.0
+      lightningcss-linux-arm64-musl: 1.32.0
+      lightningcss-linux-x64-gnu: 1.32.0
+      lightningcss-linux-x64-musl: 1.32.0
+      lightningcss-win32-arm64-msvc: 1.32.0
+      lightningcss-win32-x64-msvc: 1.32.0
+
+  lilconfig@3.1.3: {}
 
   lines-and-columns@1.2.4: {}
 
-  linkify-it@5.0.0:
+  linkify-it@5.0.1:
     dependencies:
       uc.micro: 2.1.0
 
-  localforage@1.10.0:
+  listhen@1.10.0:
     dependencies:
-      lie: 3.1.1
+      '@parcel/watcher': 2.5.6
+      '@parcel/watcher-wasm': 2.5.6
+      citty: 0.2.2
+      consola: 3.4.2
+      crossws: 0.3.5
+      defu: 6.1.7
+      get-port-please: 3.2.0
+      h3: 1.15.11
+      http-shutdown: 1.2.2
+      jiti: 2.7.0
+      mlly: 1.8.2
+      node-forge: 1.4.0
+      pathe: 2.0.3
+      std-env: 4.1.0
+      tinyclip: 0.1.12
+      ufo: 1.6.4
+      untun: 0.1.3
+      uqr: 0.1.3
 
-  locate-path@5.0.0:
+  local-pkg@1.1.2:
     dependencies:
-      p-locate: 4.1.0
+      mlly: 1.8.2
+      pkg-types: 2.3.1
+      quansync: 0.2.11
+
+  locate-path@6.0.0:
+    dependencies:
+      p-locate: 5.0.0
 
   locate-path@8.0.0:
     dependencies:
       p-locate: 6.0.0
 
+  lodash.defaults@4.2.0: {}
+
+  lodash.isarguments@3.1.0: {}
+
+  lodash.memoize@4.1.2: {}
+
+  lodash.uniq@4.5.0: {}
+
   lodash@4.17.21: {}
 
-  long@5.2.3: {}
+  long@5.3.2: {}
 
   longest-streak@3.1.0: {}
 
+  loupe@3.2.1: {}
+
   lowercase-keys@2.0.0: {}
 
+  lowercase-keys@3.0.0: {}
+
+  lowercase-keys@4.0.1: {}
+
   lru-cache@10.4.3: {}
 
-  lru-cache@11.2.6: {}
+  lru-cache@11.5.1: {}
 
-  lru-cache@11.2.7: {}
-
-  lru-cache@6.0.0:
+  lru-cache@5.1.1:
     dependencies:
-      yallist: 4.0.0
+      yallist: 3.1.1
+
+  lru-cache@8.0.5: {}
 
   luxon@3.7.2: {}
 
+  lz-string@1.5.0: {}
+
+  magic-regexp@0.10.0:
+    dependencies:
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+      mlly: 1.8.2
+      regexp-tree: 0.1.27
+      type-level-regexp: 0.1.17
+      ufo: 1.6.4
+      unplugin: 2.3.11
+
+  magic-regexp@0.11.0:
+    dependencies:
+      magic-string: 0.30.21
+      regexp-tree: 0.1.27
+      type-level-regexp: 0.1.17
+      unplugin: 3.0.0
+
+  magic-string-ast@1.0.3:
+    dependencies:
+      magic-string: 0.30.21
+
   magic-string@0.30.21:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
 
   magicast@0.5.2:
     dependencies:
-      '@babel/parser': 7.29.0
-      '@babel/types': 7.29.0
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
       source-map-js: 1.2.1
 
   make-dir@4.0.0:
     dependencies:
-      semver: 7.7.2
+      semver: 7.8.2
 
-  make-fetch-happen@15.0.3:
-    dependencies:
-      '@npmcli/agent': 4.0.0
-      cacache: 20.0.3
-      http-cache-semantics: 4.1.1
-      minipass: 7.1.2
-      minipass-fetch: 5.0.1
-      minipass-flush: 1.0.5
-      minipass-pipeline: 1.2.4
-      negotiator: 1.0.0
-      proc-log: 6.1.0
-      promise-retry: 2.0.1
-      ssri: 13.0.1
-    transitivePeerDependencies:
-      - supports-color
-    optional: true
-
-  map-obj@1.0.1: {}
-
-  map-obj@4.3.0: {}
-
-  markdown-it@14.1.0:
+  markdown-it@14.2.0:
     dependencies:
       argparse: 2.0.1
       entities: 4.5.0
-      linkify-it: 5.0.0
+      linkify-it: 5.0.1
       mdurl: 2.0.0
       punycode.js: 2.3.1
       uc.micro: 2.1.0
 
   markdown-table@3.0.4: {}
 
+  marked@18.0.5: {}
+
   matcher@3.0.0:
     dependencies:
       escape-string-regexp: 4.0.0
 
+  math-intrinsics@1.1.0: {}
+
   mdast-util-find-and-replace@3.0.2:
     dependencies:
       '@types/mdast': 4.0.4
@@ -7968,6 +14428,18 @@ snapshots:
       '@types/mdast': 4.0.4
       unist-util-is: 6.0.0
 
+  mdast-util-to-hast@13.2.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@ungap/structured-clone': 1.3.0
+      devlop: 1.1.0
+      micromark-util-sanitize-uri: 2.0.1
+      trim-lines: 3.0.1
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.0.0
+      vfile: 6.0.3
+
   mdast-util-to-markdown@2.1.2:
     dependencies:
       '@types/mdast': 4.0.4
@@ -7984,37 +14456,15 @@ snapshots:
     dependencies:
       '@types/mdast': 4.0.4
 
+  mdn-data@2.0.28: {}
+
   mdn-data@2.27.1: {}
 
   mdurl@2.0.0: {}
 
-  meow@7.1.1:
-    dependencies:
-      '@types/minimist': 1.2.5
-      camelcase-keys: 6.2.2
-      decamelize-keys: 1.1.1
-      hard-rejection: 2.1.0
-      minimist-options: 4.1.0
-      normalize-package-data: 2.5.0
-      read-pkg-up: 7.0.1
-      redent: 3.0.0
-      trim-newlines: 3.0.1
-      type-fest: 0.13.1
-      yargs-parser: 18.1.3
+  media-typer@1.1.0: {}
 
-  meow@8.1.2:
-    dependencies:
-      '@types/minimist': 1.2.5
-      camelcase-keys: 6.2.2
-      decamelize-keys: 1.1.1
-      hard-rejection: 2.1.0
-      minimist-options: 4.1.0
-      normalize-package-data: 3.0.3
-      read-pkg-up: 7.0.1
-      redent: 3.0.0
-      trim-newlines: 3.0.1
-      type-fest: 0.18.1
-      yargs-parser: 20.2.9
+  merge-descriptors@2.0.0: {}
 
   merge-stream@2.0.0: {}
 
@@ -8192,7 +14642,7 @@ snapshots:
   micromark@4.0.2:
     dependencies:
       '@types/debug': 4.1.12
-      debug: 4.4.1
+      debug: 4.4.3
       decode-named-character-reference: 1.2.0
       devlop: 1.1.0
       micromark-core-commonmark: 2.0.3
@@ -8214,7 +14664,15 @@ snapshots:
   micromatch@4.0.8:
     dependencies:
       braces: 3.0.3
-      picomatch: 2.3.2
+      picomatch: 2.3.1
+
+  mime-db@1.54.0: {}
+
+  mime-types@3.0.2:
+    dependencies:
+      mime-db: 1.54.0
+
+  mime@4.1.0: {}
 
   mimic-fn@4.0.0: {}
 
@@ -8222,23 +14680,25 @@ snapshots:
 
   mimic-response@3.1.0: {}
 
+  mimic-response@4.0.0: {}
+
   min-indent@1.0.1: {}
 
   minimalistic-assert@1.0.1: {}
 
-  minimatch@10.0.1:
+  minimatch@10.2.5:
     dependencies:
-      brace-expansion: 2.0.1
-
-  minimatch@10.1.2:
-    dependencies:
-      '@isaacs/brace-expansion': 5.0.1
+      brace-expansion: 5.0.5
 
   minimatch@3.1.2:
     dependencies:
       brace-expansion: 1.1.11
     optional: true
 
+  minimatch@5.1.9:
+    dependencies:
+      brace-expansion: 2.0.1
+
   minimatch@9.0.1:
     dependencies:
       brace-expansion: 2.0.1
@@ -8247,26 +14707,11 @@ snapshots:
     dependencies:
       brace-expansion: 2.0.1
 
-  minimist-options@4.1.0:
-    dependencies:
-      arrify: 1.0.1
-      is-plain-obj: 1.1.0
-      kind-of: 6.0.3
-
   minimist@1.2.8: {}
 
   minipass-collect@2.0.1:
     dependencies:
-      minipass: 7.1.2
-
-  minipass-fetch@5.0.1:
-    dependencies:
-      minipass: 7.1.2
-      minipass-sized: 2.0.0
-      minizlib: 3.0.1
-    optionalDependencies:
-      encoding: 0.1.13
-    optional: true
+      minipass: 7.1.3
 
   minipass-flush@1.0.5:
     dependencies:
@@ -8276,34 +14721,15 @@ snapshots:
     dependencies:
       minipass: 3.3.6
 
-  minipass-sized@2.0.0:
-    dependencies:
-      minipass: 7.1.2
-    optional: true
-
   minipass@3.3.6:
     dependencies:
       yallist: 4.0.0
 
-  minipass@5.0.0: {}
-
-  minipass@7.1.2: {}
-
-  minizlib@2.1.2:
-    dependencies:
-      minipass: 3.3.6
-      yallist: 4.0.0
-
-  minizlib@3.0.1:
-    dependencies:
-      minipass: 7.1.2
-      rimraf: 5.0.10
-    optional: true
+  minipass@7.1.3: {}
 
   minizlib@3.1.0:
     dependencies:
-      minipass: 7.1.2
-    optional: true
+      minipass: 7.1.3
 
   mkdirp-classic@0.5.3:
     optional: true
@@ -8313,21 +14739,28 @@ snapshots:
       minimist: 1.2.8
     optional: true
 
-  mkdirp@1.0.4: {}
+  mlly@1.8.2:
+    dependencies:
+      acorn: 8.16.0
+      pathe: 2.0.3
+      pkg-types: 1.3.1
+      ufo: 1.6.4
 
-  module-details-from-path@1.0.3: {}
+  mocked-exports@0.1.1: {}
 
   module-details-from-path@1.0.4: {}
 
   moment@2.30.1:
     optional: true
 
-  moo@0.5.2: {}
+  moo@0.5.3: {}
 
   mrmime@2.0.1: {}
 
   ms@2.1.3: {}
 
+  muggle-string@0.4.1: {}
+
   mv@2.1.1:
     dependencies:
       mkdirp: 0.5.6
@@ -8335,36 +14768,144 @@ snapshots:
       rimraf: 2.4.5
     optional: true
 
-  nan@2.22.2:
+  nan@2.27.0:
     optional: true
 
-  nan@2.25.0:
-    optional: true
-
-  nanoid@3.3.11: {}
-
   nanoid@3.3.12: {}
 
+  nanotar@0.3.0: {}
+
   napi-build-utils@1.0.2:
     optional: true
 
+  napi-postinstall@0.3.4: {}
+
+  natural-compare@1.4.0: {}
+
   ncp@2.0.0:
     optional: true
 
-  negotiator@1.0.0:
-    optional: true
+  negotiator@1.0.0: {}
 
   neo-async@2.6.2: {}
 
   neotraverse@0.6.18: {}
 
+  nitropack@2.13.4(better-sqlite3@12.8.0)(encoding@0.1.13)(oxc-parser@0.133.0)(rolldown@1.1.0):
+    dependencies:
+      '@cloudflare/kv-asset-handler': 0.4.2
+      '@rollup/plugin-alias': 6.0.0(rollup@4.61.1)
+      '@rollup/plugin-commonjs': 29.0.2(rollup@4.61.1)
+      '@rollup/plugin-inject': 5.0.5(rollup@4.61.1)
+      '@rollup/plugin-json': 6.1.0(rollup@4.61.1)
+      '@rollup/plugin-node-resolve': 16.0.3(rollup@4.61.1)
+      '@rollup/plugin-replace': 6.0.3(rollup@4.61.1)
+      '@rollup/plugin-terser': 1.0.0(rollup@4.61.1)
+      '@vercel/nft': 1.5.0(encoding@0.1.13)(rollup@4.61.1)
+      archiver: 7.0.1
+      c12: 3.3.4(magicast@0.5.2)
+      chokidar: 5.0.0
+      citty: 0.2.2
+      compatx: 0.2.0
+      confbox: 0.2.4
+      consola: 3.4.2
+      cookie-es: 2.0.1
+      croner: 10.0.1
+      crossws: 0.3.5
+      db0: 0.3.4(better-sqlite3@12.8.0)
+      defu: 6.1.7
+      destr: 2.0.5
+      dot-prop: 10.1.0
+      esbuild: 0.28.0
+      escape-string-regexp: 5.0.0
+      etag: 1.8.1
+      exsolve: 1.0.8
+      globby: 16.2.0
+      gzip-size: 7.0.0
+      h3: 1.15.11
+      hookable: 5.5.3
+      httpxy: 0.5.3
+      ioredis: 5.10.1
+      jiti: 2.7.0
+      klona: 2.0.6
+      knitwork: 1.3.0
+      listhen: 1.10.0
+      magic-string: 0.30.21
+      magicast: 0.5.2
+      mime: 4.1.0
+      mlly: 1.8.2
+      node-fetch-native: 1.6.7
+      node-mock-http: 1.0.4
+      ofetch: 1.5.1
+      ohash: 2.0.11
+      pathe: 2.0.3
+      perfect-debounce: 2.1.0
+      pkg-types: 2.3.1
+      pretty-bytes: 7.1.0
+      radix3: 1.1.2
+      rollup: 4.61.1
+      rollup-plugin-visualizer: 7.0.1(rolldown@1.1.0)(rollup@4.61.1)
+      scule: 1.3.0
+      semver: 7.8.2
+      serve-placeholder: 2.0.2
+      serve-static: 2.2.1
+      source-map: 0.7.6
+      std-env: 4.1.0
+      ufo: 1.6.4
+      ultrahtml: 1.6.0
+      uncrypto: 0.1.3
+      unctx: 2.5.0
+      unenv: 2.0.0-rc.24
+      unimport: 6.3.0(oxc-parser@0.133.0)(rolldown@1.1.0)
+      unplugin-utils: 0.3.1
+      unstorage: 1.17.5(db0@0.3.4(better-sqlite3@12.8.0))(ioredis@5.10.1)
+      untyped: 2.0.0
+      unwasm: 0.5.3
+      youch: 4.1.1
+      youch-core: 0.3.3
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@electric-sql/pglite'
+      - '@libsql/client'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/functions'
+      - '@vercel/kv'
+      - aws4fetch
+      - bare-abort-controller
+      - bare-buffer
+      - better-sqlite3
+      - drizzle-orm
+      - encoding
+      - idb-keyval
+      - mysql2
+      - oxc-parser
+      - react-native-b4a
+      - rolldown
+      - sqlite3
+      - supports-color
+      - uploadthing
+
   node-abi@3.62.0:
     dependencies:
-      semver: 7.7.4
+      semver: 7.8.2
     optional: true
 
+  node-addon-api@7.1.1: {}
+
   node-domexception@1.0.0: {}
 
+  node-fetch-native@1.6.7: {}
+
   node-fetch@2.7.0(encoding@0.1.13):
     dependencies:
       whatwg-url: 5.0.0
@@ -8377,66 +14918,223 @@ snapshots:
       fetch-blob: 3.2.0
       formdata-polyfill: 4.0.10
 
-  node-gyp@12.2.0:
+  node-forge@1.4.0: {}
+
+  node-gyp-build@4.8.4: {}
+
+  node-gyp@12.4.0:
     dependencies:
       env-paths: 2.2.1
       exponential-backoff: 3.1.1
       graceful-fs: 4.2.11
-      make-fetch-happen: 15.0.3
       nopt: 9.0.0
       proc-log: 6.1.0
-      semver: 7.7.4
+      semver: 7.8.2
       tar: 7.5.7
       tinyglobby: 0.2.17
+      undici: 6.26.0
       which: 6.0.1
-    transitivePeerDependencies:
-      - supports-color
     optional: true
 
-  node-html-parser@7.0.2:
+  node-html-parser@7.1.0:
     dependencies:
       css-select: 5.1.0
       he: 1.2.0
 
+  node-mock-http@1.0.4: {}
+
+  node-releases@2.0.36: {}
+
   nopt@7.2.0:
     dependencies:
       abbrev: 2.0.0
 
+  nopt@8.1.0:
+    dependencies:
+      abbrev: 3.0.1
+
   nopt@9.0.0:
     dependencies:
       abbrev: 4.0.0
     optional: true
 
-  normalize-package-data@2.5.0:
-    dependencies:
-      hosted-git-info: 2.8.9
-      resolve: 1.22.8
-      semver: 5.7.2
-      validate-npm-package-license: 3.0.4
-
-  normalize-package-data@3.0.3:
-    dependencies:
-      hosted-git-info: 4.1.0
-      is-core-module: 2.13.1
-      semver: 7.7.4
-      validate-npm-package-license: 3.0.4
+  normalize-path@3.0.0: {}
 
   normalize-url@6.1.0: {}
 
+  normalize-url@8.1.1: {}
+
   npm-run-path@5.3.0:
     dependencies:
       path-key: 4.0.0
 
+  npm-run-path@6.0.0:
+    dependencies:
+      path-key: 4.0.0
+      unicorn-magic: 0.3.0
+
   nth-check@2.1.1:
     dependencies:
       boolbase: 1.0.0
 
-  object-inspect@1.13.1: {}
+  nuxt@4.4.7(@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.29.0))(@babel/plugin-syntax-typescript@7.28.6(@babel/core@7.29.0))(@parcel/watcher@2.5.6)(@types/node@25.9.2)(@vue/compiler-sfc@3.5.35)(better-sqlite3@12.8.0)(cac@6.7.14)(db0@0.3.4(better-sqlite3@12.8.0))(encoding@0.1.13)(eslint@10.4.1(jiti@2.7.0))(ioredis@5.10.1)(lightningcss@1.32.0)(magicast@0.5.2)(optionator@0.9.4)(oxlint@1.57.0)(rolldown@1.1.0)(rollup-plugin-visualizer@7.0.1(rolldown@1.1.0)(rollup@4.61.1))(rollup@4.61.1)(terser@5.44.0)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))(vue-tsc@3.3.4(typescript@6.0.3))(yaml@2.9.0):
+    dependencies:
+      '@dxup/nuxt': 0.4.1(magicast@0.5.2)(typescript@6.0.3)
+      '@nuxt/cli': 3.35.2(@nuxt/schema@4.4.7)(cac@6.7.14)(magicast@0.5.2)
+      '@nuxt/devtools': 3.2.4(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))(vue@3.5.35(typescript@6.0.3))
+      '@nuxt/kit': 4.4.7(magicast@0.5.2)
+      '@nuxt/nitro-server': 4.4.7(@babel/plugin-syntax-typescript@7.28.6(@babel/core@7.29.0))(better-sqlite3@12.8.0)(db0@0.3.4(better-sqlite3@12.8.0))(encoding@0.1.13)(ioredis@5.10.1)(magicast@0.5.2)(nuxt@4.4.7(@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.29.0))(@babel/plugin-syntax-typescript@7.28.6(@babel/core@7.29.0))(@parcel/watcher@2.5.6)(@types/node@25.9.2)(@vue/compiler-sfc@3.5.35)(better-sqlite3@12.8.0)(cac@6.7.14)(db0@0.3.4(better-sqlite3@12.8.0))(encoding@0.1.13)(eslint@10.4.1(jiti@2.7.0))(ioredis@5.10.1)(lightningcss@1.32.0)(magicast@0.5.2)(optionator@0.9.4)(oxlint@1.57.0)(rolldown@1.1.0)(rollup-plugin-visualizer@7.0.1(rolldown@1.1.0)(rollup@4.61.1))(rollup@4.61.1)(terser@5.44.0)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))(vue-tsc@3.3.4(typescript@6.0.3))(yaml@2.9.0))(oxc-parser@0.133.0)(rolldown@1.1.0)(typescript@6.0.3)
+      '@nuxt/schema': 4.4.7
+      '@nuxt/telemetry': 2.8.0(@nuxt/kit@4.4.7(magicast@0.5.2))
+      '@nuxt/vite-builder': 4.4.7(01d9006e6f33ee22c805b8f2349663c0)
+      '@unhead/vue': 2.1.15(vue@3.5.35(typescript@6.0.3))
+      '@vue/shared': 3.5.35
+      chokidar: 5.0.0
+      compatx: 0.2.0
+      consola: 3.4.2
+      cookie-es: 3.1.1
+      defu: 6.1.7
+      devalue: 5.8.1
+      errx: 0.1.0
+      escape-string-regexp: 5.0.0
+      exsolve: 1.0.8
+      hookable: 6.1.1
+      ignore: 7.0.5
+      impound: 1.1.5
+      jiti: 2.7.0
+      klona: 2.0.6
+      knitwork: 1.3.0
+      magic-string: 0.30.21
+      mlly: 1.8.2
+      nanotar: 0.3.0
+      nypm: 0.6.6
+      ofetch: 1.5.1
+      ohash: 2.0.11
+      on-change: 6.0.2
+      oxc-minify: 0.133.0
+      oxc-parser: 0.133.0
+      oxc-transform: 0.133.0
+      oxc-walker: 1.0.0(oxc-parser@0.133.0)(rolldown@1.1.0)
+      pathe: 2.0.3
+      perfect-debounce: 2.1.0
+      picomatch: 4.0.4
+      pkg-types: 2.3.1
+      rou3: 0.8.1
+      scule: 1.3.0
+      semver: 7.8.2
+      std-env: 4.1.0
+      tinyglobby: 0.2.17
+      ufo: 1.6.4
+      ultrahtml: 1.6.0
+      uncrypto: 0.1.3
+      unctx: 2.5.0
+      unhead: 3.1.3(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))
+      unimport: 6.3.0(oxc-parser@0.133.0)(rolldown@1.1.0)
+      unplugin: 3.0.0
+      unrouting: 0.1.7
+      untyped: 2.0.0
+      vue: 3.5.35(typescript@6.0.3)
+      vue-router: 5.1.0(@vue/compiler-sfc@3.5.35)(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))(vue@3.5.35(typescript@6.0.3))
+    optionalDependencies:
+      '@parcel/watcher': 2.5.6
+      '@types/node': 25.9.2
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@babel/plugin-proposal-decorators'
+      - '@babel/plugin-syntax-jsx'
+      - '@babel/plugin-syntax-typescript'
+      - '@biomejs/biome'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@electric-sql/pglite'
+      - '@libsql/client'
+      - '@netlify/blobs'
+      - '@pinia/colada'
+      - '@planetscale/database'
+      - '@rollup/plugin-babel'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/functions'
+      - '@vercel/kv'
+      - '@vitejs/devtools'
+      - '@vue/compiler-sfc'
+      - aws4fetch
+      - bare-abort-controller
+      - bare-buffer
+      - better-sqlite3
+      - bufferutil
+      - cac
+      - commander
+      - db0
+      - drizzle-orm
+      - encoding
+      - eslint
+      - idb-keyval
+      - ioredis
+      - less
+      - lightningcss
+      - magicast
+      - meow
+      - mysql2
+      - optionator
+      - oxlint
+      - pinia
+      - react-native-b4a
+      - rolldown
+      - rollup
+      - rollup-plugin-visualizer
+      - sass
+      - sass-embedded
+      - sqlite3
+      - stylelint
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - typescript
+      - uploadthing
+      - utf-8-validate
+      - vite
+      - vue-tsc
+      - xml2js
+      - yaml
+
+  nypm@0.6.6:
+    dependencies:
+      citty: 0.2.2
+      pathe: 2.0.3
+      tinyexec: 1.2.4
+
+  object-assign@4.1.1: {}
+
+  object-inspect@1.13.4: {}
 
   object-keys@1.1.1: {}
 
   obug@2.1.1: {}
 
+  ofetch@1.5.1:
+    dependencies:
+      destr: 2.0.5
+      node-fetch-native: 1.6.7
+      ufo: 1.6.4
+
+  ofetch@2.0.0-alpha.3: {}
+
+  ohash@2.0.11: {}
+
+  on-change@6.0.2: {}
+
+  on-finished@2.4.1:
+    dependencies:
+      ee-first: 1.1.1
+
   once@1.4.0:
     dependencies:
       wrappy: 1.0.2
@@ -8445,30 +15143,189 @@ snapshots:
     dependencies:
       mimic-fn: 4.0.0
 
+  oniguruma-parser@0.12.2: {}
+
+  oniguruma-to-es@4.3.6:
+    dependencies:
+      oniguruma-parser: 0.12.2
+      regex: 6.1.0
+      regex-recursion: 6.0.2
+
+  open@10.2.0:
+    dependencies:
+      default-browser: 5.5.0
+      define-lazy-prop: 3.0.0
+      is-inside-container: 1.0.0
+      wsl-utils: 0.1.0
+
+  open@11.0.0:
+    dependencies:
+      default-browser: 5.5.0
+      define-lazy-prop: 3.0.0
+      is-in-ssh: 1.0.0
+      is-inside-container: 1.0.0
+      powershell-utils: 0.1.0
+      wsl-utils: 0.3.1
+
   openpgp@6.3.0:
     optional: true
 
-  oxlint@1.47.0:
+  optionator@0.9.4:
+    dependencies:
+      deep-is: 0.1.4
+      fast-levenshtein: 2.0.6
+      levn: 0.4.1
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+      word-wrap: 1.2.5
+
+  oxc-minify@0.133.0:
     optionalDependencies:
-      '@oxlint/binding-android-arm-eabi': 1.47.0
-      '@oxlint/binding-android-arm64': 1.47.0
-      '@oxlint/binding-darwin-arm64': 1.47.0
-      '@oxlint/binding-darwin-x64': 1.47.0
-      '@oxlint/binding-freebsd-x64': 1.47.0
-      '@oxlint/binding-linux-arm-gnueabihf': 1.47.0
-      '@oxlint/binding-linux-arm-musleabihf': 1.47.0
-      '@oxlint/binding-linux-arm64-gnu': 1.47.0
-      '@oxlint/binding-linux-arm64-musl': 1.47.0
-      '@oxlint/binding-linux-ppc64-gnu': 1.47.0
-      '@oxlint/binding-linux-riscv64-gnu': 1.47.0
-      '@oxlint/binding-linux-riscv64-musl': 1.47.0
-      '@oxlint/binding-linux-s390x-gnu': 1.47.0
-      '@oxlint/binding-linux-x64-gnu': 1.47.0
-      '@oxlint/binding-linux-x64-musl': 1.47.0
-      '@oxlint/binding-openharmony-arm64': 1.47.0
-      '@oxlint/binding-win32-arm64-msvc': 1.47.0
-      '@oxlint/binding-win32-ia32-msvc': 1.47.0
-      '@oxlint/binding-win32-x64-msvc': 1.47.0
+      '@oxc-minify/binding-android-arm-eabi': 0.133.0
+      '@oxc-minify/binding-android-arm64': 0.133.0
+      '@oxc-minify/binding-darwin-arm64': 0.133.0
+      '@oxc-minify/binding-darwin-x64': 0.133.0
+      '@oxc-minify/binding-freebsd-x64': 0.133.0
+      '@oxc-minify/binding-linux-arm-gnueabihf': 0.133.0
+      '@oxc-minify/binding-linux-arm-musleabihf': 0.133.0
+      '@oxc-minify/binding-linux-arm64-gnu': 0.133.0
+      '@oxc-minify/binding-linux-arm64-musl': 0.133.0
+      '@oxc-minify/binding-linux-ppc64-gnu': 0.133.0
+      '@oxc-minify/binding-linux-riscv64-gnu': 0.133.0
+      '@oxc-minify/binding-linux-riscv64-musl': 0.133.0
+      '@oxc-minify/binding-linux-s390x-gnu': 0.133.0
+      '@oxc-minify/binding-linux-x64-gnu': 0.133.0
+      '@oxc-minify/binding-linux-x64-musl': 0.133.0
+      '@oxc-minify/binding-openharmony-arm64': 0.133.0
+      '@oxc-minify/binding-wasm32-wasi': 0.133.0
+      '@oxc-minify/binding-win32-arm64-msvc': 0.133.0
+      '@oxc-minify/binding-win32-ia32-msvc': 0.133.0
+      '@oxc-minify/binding-win32-x64-msvc': 0.133.0
+
+  oxc-parser@0.127.0:
+    dependencies:
+      '@oxc-project/types': 0.127.0
+    optionalDependencies:
+      '@oxc-parser/binding-android-arm-eabi': 0.127.0
+      '@oxc-parser/binding-android-arm64': 0.127.0
+      '@oxc-parser/binding-darwin-arm64': 0.127.0
+      '@oxc-parser/binding-darwin-x64': 0.127.0
+      '@oxc-parser/binding-freebsd-x64': 0.127.0
+      '@oxc-parser/binding-linux-arm-gnueabihf': 0.127.0
+      '@oxc-parser/binding-linux-arm-musleabihf': 0.127.0
+      '@oxc-parser/binding-linux-arm64-gnu': 0.127.0
+      '@oxc-parser/binding-linux-arm64-musl': 0.127.0
+      '@oxc-parser/binding-linux-ppc64-gnu': 0.127.0
+      '@oxc-parser/binding-linux-riscv64-gnu': 0.127.0
+      '@oxc-parser/binding-linux-riscv64-musl': 0.127.0
+      '@oxc-parser/binding-linux-s390x-gnu': 0.127.0
+      '@oxc-parser/binding-linux-x64-gnu': 0.127.0
+      '@oxc-parser/binding-linux-x64-musl': 0.127.0
+      '@oxc-parser/binding-openharmony-arm64': 0.127.0
+      '@oxc-parser/binding-wasm32-wasi': 0.127.0
+      '@oxc-parser/binding-win32-arm64-msvc': 0.127.0
+      '@oxc-parser/binding-win32-ia32-msvc': 0.127.0
+      '@oxc-parser/binding-win32-x64-msvc': 0.127.0
+
+  oxc-parser@0.133.0:
+    dependencies:
+      '@oxc-project/types': 0.133.0
+    optionalDependencies:
+      '@oxc-parser/binding-android-arm-eabi': 0.133.0
+      '@oxc-parser/binding-android-arm64': 0.133.0
+      '@oxc-parser/binding-darwin-arm64': 0.133.0
+      '@oxc-parser/binding-darwin-x64': 0.133.0
+      '@oxc-parser/binding-freebsd-x64': 0.133.0
+      '@oxc-parser/binding-linux-arm-gnueabihf': 0.133.0
+      '@oxc-parser/binding-linux-arm-musleabihf': 0.133.0
+      '@oxc-parser/binding-linux-arm64-gnu': 0.133.0
+      '@oxc-parser/binding-linux-arm64-musl': 0.133.0
+      '@oxc-parser/binding-linux-ppc64-gnu': 0.133.0
+      '@oxc-parser/binding-linux-riscv64-gnu': 0.133.0
+      '@oxc-parser/binding-linux-riscv64-musl': 0.133.0
+      '@oxc-parser/binding-linux-s390x-gnu': 0.133.0
+      '@oxc-parser/binding-linux-x64-gnu': 0.133.0
+      '@oxc-parser/binding-linux-x64-musl': 0.133.0
+      '@oxc-parser/binding-openharmony-arm64': 0.133.0
+      '@oxc-parser/binding-wasm32-wasi': 0.133.0
+      '@oxc-parser/binding-win32-arm64-msvc': 0.133.0
+      '@oxc-parser/binding-win32-ia32-msvc': 0.133.0
+      '@oxc-parser/binding-win32-x64-msvc': 0.133.0
+
+  oxc-resolver@11.20.0:
+    optionalDependencies:
+      '@oxc-resolver/binding-android-arm-eabi': 11.20.0
+      '@oxc-resolver/binding-android-arm64': 11.20.0
+      '@oxc-resolver/binding-darwin-arm64': 11.20.0
+      '@oxc-resolver/binding-darwin-x64': 11.20.0
+      '@oxc-resolver/binding-freebsd-x64': 11.20.0
+      '@oxc-resolver/binding-linux-arm-gnueabihf': 11.20.0
+      '@oxc-resolver/binding-linux-arm-musleabihf': 11.20.0
+      '@oxc-resolver/binding-linux-arm64-gnu': 11.20.0
+      '@oxc-resolver/binding-linux-arm64-musl': 11.20.0
+      '@oxc-resolver/binding-linux-ppc64-gnu': 11.20.0
+      '@oxc-resolver/binding-linux-riscv64-gnu': 11.20.0
+      '@oxc-resolver/binding-linux-riscv64-musl': 11.20.0
+      '@oxc-resolver/binding-linux-s390x-gnu': 11.20.0
+      '@oxc-resolver/binding-linux-x64-gnu': 11.20.0
+      '@oxc-resolver/binding-linux-x64-musl': 11.20.0
+      '@oxc-resolver/binding-openharmony-arm64': 11.20.0
+      '@oxc-resolver/binding-wasm32-wasi': 11.20.0
+      '@oxc-resolver/binding-win32-arm64-msvc': 11.20.0
+      '@oxc-resolver/binding-win32-x64-msvc': 11.20.0
+
+  oxc-transform@0.133.0:
+    optionalDependencies:
+      '@oxc-transform/binding-android-arm-eabi': 0.133.0
+      '@oxc-transform/binding-android-arm64': 0.133.0
+      '@oxc-transform/binding-darwin-arm64': 0.133.0
+      '@oxc-transform/binding-darwin-x64': 0.133.0
+      '@oxc-transform/binding-freebsd-x64': 0.133.0
+      '@oxc-transform/binding-linux-arm-gnueabihf': 0.133.0
+      '@oxc-transform/binding-linux-arm-musleabihf': 0.133.0
+      '@oxc-transform/binding-linux-arm64-gnu': 0.133.0
+      '@oxc-transform/binding-linux-arm64-musl': 0.133.0
+      '@oxc-transform/binding-linux-ppc64-gnu': 0.133.0
+      '@oxc-transform/binding-linux-riscv64-gnu': 0.133.0
+      '@oxc-transform/binding-linux-riscv64-musl': 0.133.0
+      '@oxc-transform/binding-linux-s390x-gnu': 0.133.0
+      '@oxc-transform/binding-linux-x64-gnu': 0.133.0
+      '@oxc-transform/binding-linux-x64-musl': 0.133.0
+      '@oxc-transform/binding-openharmony-arm64': 0.133.0
+      '@oxc-transform/binding-wasm32-wasi': 0.133.0
+      '@oxc-transform/binding-win32-arm64-msvc': 0.133.0
+      '@oxc-transform/binding-win32-ia32-msvc': 0.133.0
+      '@oxc-transform/binding-win32-x64-msvc': 0.133.0
+
+  oxc-walker@1.0.0(oxc-parser@0.133.0)(rolldown@1.1.0):
+    dependencies:
+      magic-regexp: 0.11.0
+    optionalDependencies:
+      oxc-parser: 0.133.0
+      rolldown: 1.1.0
+
+  oxlint@1.57.0:
+    optionalDependencies:
+      '@oxlint/binding-android-arm-eabi': 1.57.0
+      '@oxlint/binding-android-arm64': 1.57.0
+      '@oxlint/binding-darwin-arm64': 1.57.0
+      '@oxlint/binding-darwin-x64': 1.57.0
+      '@oxlint/binding-freebsd-x64': 1.57.0
+      '@oxlint/binding-linux-arm-gnueabihf': 1.57.0
+      '@oxlint/binding-linux-arm-musleabihf': 1.57.0
+      '@oxlint/binding-linux-arm64-gnu': 1.57.0
+      '@oxlint/binding-linux-arm64-musl': 1.57.0
+      '@oxlint/binding-linux-ppc64-gnu': 1.57.0
+      '@oxlint/binding-linux-riscv64-gnu': 1.57.0
+      '@oxlint/binding-linux-riscv64-musl': 1.57.0
+      '@oxlint/binding-linux-s390x-gnu': 1.57.0
+      '@oxlint/binding-linux-x64-gnu': 1.57.0
+      '@oxlint/binding-linux-x64-musl': 1.57.0
+      '@oxlint/binding-openharmony-arm64': 1.57.0
+      '@oxlint/binding-win32-arm64-msvc': 1.57.0
+      '@oxlint/binding-win32-ia32-msvc': 1.57.0
+      '@oxlint/binding-win32-x64-msvc': 1.57.0
+    optional: true
 
   p-all@5.0.1:
     dependencies:
@@ -8476,6 +15333,8 @@ snapshots:
 
   p-cancelable@2.1.1: {}
 
+  p-cancelable@4.0.1: {}
+
   p-filter@2.1.0:
     dependencies:
       p-map: 2.1.0
@@ -8484,13 +15343,17 @@ snapshots:
     dependencies:
       p-try: 2.2.0
 
+  p-limit@3.1.0:
+    dependencies:
+      yocto-queue: 0.1.0
+
   p-limit@4.0.0:
     dependencies:
       yocto-queue: 1.2.1
 
-  p-locate@4.1.0:
+  p-locate@5.0.0:
     dependencies:
-      p-limit: 2.3.0
+      p-limit: 3.1.0
 
   p-locate@6.0.0:
     dependencies:
@@ -8502,9 +15365,9 @@ snapshots:
 
   p-map@7.0.4: {}
 
-  p-queue@9.1.0:
+  p-queue@9.3.0:
     dependencies:
-      eventemitter3: 5.0.1
+      eventemitter3: 5.0.4
       p-timeout: 7.0.1
 
   p-throttle@8.1.0: {}
@@ -8517,7 +15380,7 @@ snapshots:
 
   parse-json@5.2.0:
     dependencies:
-      '@babel/code-frame': 7.27.1
+      '@babel/code-frame': 7.29.0
       error-ex: 1.3.2
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
@@ -8535,12 +15398,18 @@ snapshots:
       '@types/parse-path': 7.0.3
       parse-path: 7.0.0
 
-  parse5@8.0.0:
+  parse5@8.0.1:
     dependencies:
-      entities: 6.0.1
+      entities: 8.0.0
+
+  parseurl@1.3.3: {}
+
+  path-browserify@1.0.1: {}
 
   path-exists@4.0.0: {}
 
+  path-expression-matcher@1.5.0: {}
+
   path-is-absolute@1.0.1:
     optional: true
 
@@ -8553,24 +15422,212 @@ snapshots:
   path-scurry@1.11.1:
     dependencies:
       lru-cache: 10.4.3
-      minipass: 7.1.2
+      minipass: 7.1.3
 
-  path-scurry@2.0.0:
+  path-scurry@2.0.2:
     dependencies:
-      lru-cache: 11.2.6
-      minipass: 7.1.2
+      lru-cache: 11.5.1
+      minipass: 7.1.3
+
+  path-to-regexp@8.4.2: {}
+
+  pathe@1.1.2: {}
 
   pathe@2.0.3: {}
 
-  pend@1.2.0: {}
+  pathval@2.0.1: {}
+
+  perfect-debounce@2.1.0: {}
 
   picocolors@1.1.1: {}
 
-  picomatch@2.3.2: {}
+  picomatch@2.3.1: {}
 
   picomatch@4.0.4: {}
 
-  possible-typed-array-names@1.0.0: {}
+  pkce-challenge@5.0.1: {}
+
+  pkg-types@1.3.1:
+    dependencies:
+      confbox: 0.1.8
+      mlly: 1.8.2
+      pathe: 2.0.3
+
+  pkg-types@2.3.1:
+    dependencies:
+      confbox: 0.2.4
+      exsolve: 1.0.8
+      pathe: 2.0.3
+
+  playwright-core@1.60.0: {}
+
+  playwright@1.60.0:
+    dependencies:
+      playwright-core: 1.60.0
+    optionalDependencies:
+      fsevents: 2.3.2
+
+  pluralize@8.0.0: {}
+
+  pngjs@7.0.0: {}
+
+  postcss-calc@10.1.1(postcss@8.5.15):
+    dependencies:
+      postcss: 8.5.15
+      postcss-selector-parser: 7.1.1
+      postcss-value-parser: 4.2.0
+
+  postcss-colormin@8.0.0(postcss@8.5.15):
+    dependencies:
+      '@colordx/core': 5.4.3
+      browserslist: 4.28.2
+      caniuse-api: 3.0.0
+      postcss: 8.5.15
+      postcss-value-parser: 4.2.0
+
+  postcss-convert-values@8.0.0(postcss@8.5.15):
+    dependencies:
+      browserslist: 4.28.2
+      postcss: 8.5.15
+      postcss-value-parser: 4.2.0
+
+  postcss-discard-comments@8.0.0(postcss@8.5.15):
+    dependencies:
+      postcss: 8.5.15
+      postcss-selector-parser: 7.1.1
+
+  postcss-discard-duplicates@8.0.0(postcss@8.5.15):
+    dependencies:
+      postcss: 8.5.15
+
+  postcss-discard-empty@8.0.0(postcss@8.5.15):
+    dependencies:
+      postcss: 8.5.15
+
+  postcss-discard-overridden@8.0.0(postcss@8.5.15):
+    dependencies:
+      postcss: 8.5.15
+
+  postcss-merge-longhand@8.0.0(postcss@8.5.15):
+    dependencies:
+      postcss: 8.5.15
+      postcss-value-parser: 4.2.0
+      stylehacks: 8.0.0(postcss@8.5.15)
+
+  postcss-merge-rules@8.0.0(postcss@8.5.15):
+    dependencies:
+      browserslist: 4.28.2
+      caniuse-api: 3.0.0
+      cssnano-utils: 6.0.0(postcss@8.5.15)
+      postcss: 8.5.15
+      postcss-selector-parser: 7.1.1
+
+  postcss-minify-font-values@8.0.0(postcss@8.5.15):
+    dependencies:
+      postcss: 8.5.15
+      postcss-value-parser: 4.2.0
+
+  postcss-minify-gradients@8.0.0(postcss@8.5.15):
+    dependencies:
+      '@colordx/core': 5.4.3
+      cssnano-utils: 6.0.0(postcss@8.5.15)
+      postcss: 8.5.15
+      postcss-value-parser: 4.2.0
+
+  postcss-minify-params@8.0.0(postcss@8.5.15):
+    dependencies:
+      browserslist: 4.28.2
+      cssnano-utils: 6.0.0(postcss@8.5.15)
+      postcss: 8.5.15
+      postcss-value-parser: 4.2.0
+
+  postcss-minify-selectors@8.0.1(postcss@8.5.15):
+    dependencies:
+      browserslist: 4.28.2
+      caniuse-api: 3.0.0
+      cssesc: 3.0.0
+      postcss: 8.5.15
+      postcss-selector-parser: 7.1.1
+
+  postcss-normalize-charset@8.0.0(postcss@8.5.15):
+    dependencies:
+      postcss: 8.5.15
+
+  postcss-normalize-display-values@8.0.0(postcss@8.5.15):
+    dependencies:
+      postcss: 8.5.15
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-positions@8.0.0(postcss@8.5.15):
+    dependencies:
+      postcss: 8.5.15
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-repeat-style@8.0.0(postcss@8.5.15):
+    dependencies:
+      postcss: 8.5.15
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-string@8.0.0(postcss@8.5.15):
+    dependencies:
+      postcss: 8.5.15
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-timing-functions@8.0.0(postcss@8.5.15):
+    dependencies:
+      postcss: 8.5.15
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-unicode@8.0.0(postcss@8.5.15):
+    dependencies:
+      browserslist: 4.28.2
+      postcss: 8.5.15
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-url@8.0.0(postcss@8.5.15):
+    dependencies:
+      postcss: 8.5.15
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-whitespace@8.0.0(postcss@8.5.15):
+    dependencies:
+      postcss: 8.5.15
+      postcss-value-parser: 4.2.0
+
+  postcss-ordered-values@8.0.0(postcss@8.5.15):
+    dependencies:
+      cssnano-utils: 6.0.0(postcss@8.5.15)
+      postcss: 8.5.15
+      postcss-value-parser: 4.2.0
+
+  postcss-reduce-initial@8.0.0(postcss@8.5.15):
+    dependencies:
+      browserslist: 4.28.2
+      caniuse-api: 3.0.0
+      postcss: 8.5.15
+
+  postcss-reduce-transforms@8.0.0(postcss@8.5.15):
+    dependencies:
+      postcss: 8.5.15
+      postcss-value-parser: 4.2.0
+
+  postcss-selector-parser@7.1.1:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
+  postcss-svgo@8.0.0(postcss@8.5.15):
+    dependencies:
+      postcss: 8.5.15
+      postcss-value-parser: 4.2.0
+      svgo: 4.0.1
+
+  postcss-unique-selectors@8.0.0(postcss@8.5.15):
+    dependencies:
+      postcss: 8.5.15
+      postcss-selector-parser: 7.1.1
+
+  postcss-value-parser@4.2.0: {}
 
   postcss@8.5.15:
     dependencies:
@@ -8578,11 +15635,7 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
-  postcss@8.5.6:
-    dependencies:
-      nanoid: 3.3.11
-      picocolors: 1.1.1
-      source-map-js: 1.2.1
+  powershell-utils@0.1.0: {}
 
   prebuild-install@7.1.2:
     dependencies:
@@ -8600,38 +15653,117 @@ snapshots:
       tunnel-agent: 0.6.0
     optional: true
 
-  prettier@3.6.2: {}
+  prelude-ls@1.2.1: {}
+
+  prettier@3.8.1: {}
+
+  pretty-bytes@7.1.0: {}
+
+  pretty-format@27.5.1:
+    dependencies:
+      ansi-regex: 5.0.1
+      ansi-styles: 5.2.0
+      react-is: 17.0.2
 
   proc-log@6.1.0:
     optional: true
 
   process-nextick-args@2.0.1: {}
 
-  promise-retry@2.0.1:
+  process@0.11.10: {}
+
+  promise@7.3.1:
     dependencies:
-      err-code: 2.0.3
+      asap: 2.0.6
+
+  proper-lockfile@4.1.2:
+    dependencies:
+      graceful-fs: 4.2.11
       retry: 0.12.0
-    optional: true
+      signal-exit: 3.0.7
+
+  property-information@7.1.0: {}
 
   proto-list@1.2.4: {}
 
-  protobufjs@8.0.0:
+  protobufjs@8.5.0:
     dependencies:
-      '@protobufjs/aspromise': 1.1.2
-      '@protobufjs/base64': 1.1.2
-      '@protobufjs/codegen': 2.0.4
-      '@protobufjs/eventemitter': 1.1.0
-      '@protobufjs/fetch': 1.1.0
-      '@protobufjs/float': 1.0.2
-      '@protobufjs/inquire': 1.1.0
-      '@protobufjs/path': 1.1.2
-      '@protobufjs/pool': 1.1.0
-      '@protobufjs/utf8': 1.1.0
-      '@types/node': 24.10.13
-      long: 5.2.3
+      long: 5.3.2
 
   protocols@2.0.1: {}
 
+  proxy-addr@2.0.7:
+    dependencies:
+      forwarded: 0.2.0
+      ipaddr.js: 1.9.1
+
+  pug-attrs@3.0.0:
+    dependencies:
+      constantinople: 4.0.1
+      js-stringify: 1.0.2
+      pug-runtime: 3.0.1
+
+  pug-code-gen@3.0.4:
+    dependencies:
+      constantinople: 4.0.1
+      doctypes: 1.1.0
+      js-stringify: 1.0.2
+      pug-attrs: 3.0.0
+      pug-error: 2.1.0
+      pug-runtime: 3.0.1
+      void-elements: 3.1.0
+      with: 7.0.2
+
+  pug-error@2.1.0: {}
+
+  pug-filters@4.0.0:
+    dependencies:
+      constantinople: 4.0.1
+      jstransformer: 1.0.0
+      pug-error: 2.1.0
+      pug-walk: 2.0.0
+      resolve: 1.22.8
+
+  pug-lexer@5.0.1:
+    dependencies:
+      character-parser: 2.2.0
+      is-expression: 4.0.0
+      pug-error: 2.1.0
+
+  pug-linker@4.0.0:
+    dependencies:
+      pug-error: 2.1.0
+      pug-walk: 2.0.0
+
+  pug-load@3.0.0:
+    dependencies:
+      object-assign: 4.1.1
+      pug-walk: 2.0.0
+
+  pug-parser@6.0.0:
+    dependencies:
+      pug-error: 2.1.0
+      token-stream: 1.0.0
+
+  pug-runtime@3.0.1: {}
+
+  pug-strip-comments@2.0.0:
+    dependencies:
+      pug-error: 2.1.0
+
+  pug-walk@2.0.0: {}
+
+  pug@3.0.4:
+    dependencies:
+      pug-code-gen: 3.0.4
+      pug-filters: 4.0.0
+      pug-lexer: 5.0.1
+      pug-linker: 4.0.0
+      pug-load: 3.0.0
+      pug-parser: 6.0.0
+      pug-runtime: 3.0.1
+      pug-strip-comments: 2.0.0
+
   pump@3.0.0:
     dependencies:
       end-of-stream: 1.4.4
@@ -8641,18 +15773,34 @@ snapshots:
 
   punycode@2.3.1: {}
 
-  qs@6.12.1:
+  qs@6.15.2:
     dependencies:
-      side-channel: 1.0.6
+      side-channel: 1.1.0
+
+  quansync@0.2.11: {}
 
   quansync@1.0.0: {}
 
   queue-microtask@1.2.3: {}
 
-  quick-lru@4.0.1: {}
-
   quick-lru@5.1.1: {}
 
+  radix3@1.1.2: {}
+
+  range-parser@1.2.1: {}
+
+  raw-body@3.0.2:
+    dependencies:
+      bytes: 3.1.2
+      http-errors: 2.0.1
+      iconv-lite: 0.7.2
+      unpipe: 1.0.0
+
+  rc9@3.0.1:
+    dependencies:
+      defu: 6.1.7
+      destr: 2.0.5
+
   rc@1.2.8:
     dependencies:
       deep-extend: 0.6.0
@@ -8661,27 +15809,21 @@ snapshots:
       strip-json-comments: 2.0.1
     optional: true
 
-  re2@1.23.2:
+  re2@1.24.1:
     dependencies:
-      install-artifact-from-github: 1.4.0
-      nan: 2.25.0
-      node-gyp: 12.2.0
-    transitivePeerDependencies:
-      - supports-color
+      install-artifact-from-github: 1.6.0
+      nan: 2.27.0
+      node-gyp: 12.4.0
     optional: true
 
-  read-pkg-up@7.0.1:
+  react-dom@19.2.5(react@19.2.5):
     dependencies:
-      find-up: 4.1.0
-      read-pkg: 5.2.0
-      type-fest: 0.8.1
+      react: 19.2.5
+      scheduler: 0.27.0
 
-  read-pkg@5.2.0:
-    dependencies:
-      '@types/normalize-package-data': 2.4.4
-      normalize-package-data: 2.5.0
-      parse-json: 5.2.0
-      type-fest: 0.6.0
+  react-is@17.0.2: {}
+
+  react@19.2.5: {}
 
   read-yaml-file@2.1.0:
     dependencies:
@@ -8703,24 +15845,68 @@ snapshots:
       inherits: 2.0.4
       string_decoder: 1.3.0
       util-deprecate: 1.0.2
+    optional: true
 
-  readdirp@4.1.2: {}
+  readable-stream@4.7.0:
+    dependencies:
+      abort-controller: 3.0.0
+      buffer: 6.0.3
+      events: 3.3.0
+      process: 0.11.10
+      string_decoder: 1.3.0
+
+  readdir-glob@1.1.3:
+    dependencies:
+      minimatch: 5.1.9
+
+  readdirp@5.0.0: {}
+
+  recast@0.23.11:
+    dependencies:
+      ast-types: 0.16.1
+      esprima: 4.0.1
+      source-map: 0.6.1
+      tiny-invariant: 1.3.3
+      tslib: 2.8.1
 
   redent@3.0.0:
     dependencies:
       indent-string: 4.0.0
       strip-indent: 3.0.0
 
-  redis@5.10.0:
+  redis-errors@1.2.0: {}
+
+  redis-parser@3.0.0:
     dependencies:
-      '@redis/bloom': 5.10.0(@redis/client@5.10.0)
-      '@redis/client': 5.10.0
-      '@redis/json': 5.10.0(@redis/client@5.10.0)
-      '@redis/search': 5.10.0(@redis/client@5.10.0)
-      '@redis/time-series': 5.10.0(@redis/client@5.10.0)
+      redis-errors: 1.2.0
+
+  refa@0.12.1:
+    dependencies:
+      '@eslint-community/regexpp': 4.12.2
 
   regenerator-runtime@0.14.1: {}
 
+  regex-recursion@6.0.2:
+    dependencies:
+      regex-utilities: 2.3.0
+
+  regex-utilities@2.3.0: {}
+
+  regex@6.1.0:
+    dependencies:
+      regex-utilities: 2.3.0
+
+  regexp-ast-analysis@0.7.1:
+    dependencies:
+      '@eslint-community/regexpp': 4.12.2
+      refa: 0.12.1
+
+  regexp-tree@0.1.27: {}
+
+  regjsparser@0.13.1:
+    dependencies:
+      jsesc: 3.1.0
+
   remark-gfm@4.0.1:
     dependencies:
       '@types/mdast': 4.0.4
@@ -8765,133 +15951,130 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  renovate@43.12.0(encoding@0.1.13)(typanion@3.14.0):
+  renovate@43.214.6(typanion@3.14.0):
     dependencies:
-      '@aws-sdk/client-codecommit': 3.980.0
-      '@aws-sdk/client-ec2': 3.980.0
-      '@aws-sdk/client-ecr': 3.980.0
-      '@aws-sdk/client-eks': 3.980.0
-      '@aws-sdk/client-rds': 3.980.0
-      '@aws-sdk/client-s3': 3.980.0
-      '@aws-sdk/credential-providers': 3.980.0
+      '@aws-sdk/client-codecommit': 3.1053.0
+      '@aws-sdk/client-ec2': 3.1053.0
+      '@aws-sdk/client-ecr': 3.1053.0
+      '@aws-sdk/client-eks': 3.1053.0
+      '@aws-sdk/client-rds': 3.1053.0
+      '@aws-sdk/client-s3': 3.1053.0
+      '@aws-sdk/credential-providers': 3.1053.0
       '@baszalmstra/rattler': 0.2.1
       '@breejs/later': 4.2.0
       '@cdktf/hcl2json': 0.21.0
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/context-async-hooks': 2.5.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/exporter-trace-otlp-http': 0.211.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.211.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-bunyan': 0.56.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-http': 0.211.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-redis': 0.59.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/resource-detector-aws': 2.11.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/resource-detector-azure': 0.19.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/resource-detector-gcp': 0.46.0(@opentelemetry/api@1.9.0)(encoding@0.1.13)
-      '@opentelemetry/resource-detector-github': 0.32.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/resources': 2.5.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/sdk-trace-base': 2.5.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/sdk-trace-node': 2.5.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.39.0
-      '@pnpm/parse-overrides': 1001.0.3
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/context-async-hooks': 2.7.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/exporter-trace-otlp-http': 0.218.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation': 0.218.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-bunyan': 0.63.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-http': 0.218.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-redis': 0.66.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/resource-detector-aws': 2.18.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/resource-detector-azure': 0.26.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/resource-detector-gcp': 0.53.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/resource-detector-github': 0.32.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/resources': 2.7.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/sdk-trace-base': 2.7.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/sdk-trace-node': 2.7.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.41.1
+      '@pnpm/parse-overrides': 1001.0.4
       '@qnighy/marshal': 0.1.3
-      '@renovatebot/detect-tools': 1.2.8
-      '@renovatebot/good-enough-parser': 1.2.0
-      '@renovatebot/osv-offline': 2.0.1
-      '@renovatebot/pep440': 4.2.1
-      '@renovatebot/pgp': 1.3.1
-      '@renovatebot/ruby-semver': 4.1.2
-      '@sindresorhus/is': 7.2.0
-      '@yarnpkg/core': 4.5.0(typanion@3.14.0)
+      '@redis/client': 5.12.1(@opentelemetry/api@1.9.1)
+      '@renovatebot/detect-tools': 4.0.8
+      '@renovatebot/good-enough-parser': 2.0.1
+      '@renovatebot/osv-offline': 3.0.3
+      '@renovatebot/pep440': 5.0.0
+      '@renovatebot/pgp': 1.3.12
+      '@renovatebot/ruby-semver': 5.0.0
+      '@sindresorhus/is': 8.1.0
+      '@yarnpkg/core': 4.8.0(typanion@3.14.0)
       '@yarnpkg/parsers': 3.0.3
-      ae-cvss-calculator: 1.0.9
+      adm-zip: 0.5.17
+      ae-cvss-calculator: 1.0.12
       agentkeepalive: 4.6.0
       async-mutex: 0.5.0
-      auth-header: 1.0.0
       aws4: 1.13.2
       azure-devops-node-api: 15.1.2
       bunyan: 1.8.15
-      cacache: 20.0.3
+      cacache: 20.0.4
       changelog-filename-regex: 2.0.1
       clean-git-ref: 2.0.1
       commander: 14.0.3
-      conventional-commits-detector: 1.0.3
-      croner: 9.1.0
-      cronstrue: 3.11.0
+      croner: 10.0.1
+      cronstrue: 3.14.0
       deepmerge: 4.3.1
       dequal: 2.0.3
       detect-indent: 7.0.2
-      diff: 8.0.3
-      editorconfig: 3.0.1
+      diff: 9.0.0
+      editorconfig: 3.0.2
       email-addresses: 5.0.0
       emoji-regex: 10.6.0
-      emojibase: 16.0.0
-      emojibase-regex: 16.0.0
+      emojibase: 17.0.0
+      emojibase-regex: 17.0.0
       execa: 8.0.1
-      extract-zip: 2.0.1
       find-packages: 10.0.4
       find-up: 8.0.0
-      fs-extra: 11.3.3
+      fs-extra: 11.3.5
       git-url-parse: 16.1.0
       github-url-from-git: 1.5.0
-      glob: 13.0.1
+      glob: 13.0.6
       global-agent: 3.0.0
-      google-auth-library: 10.5.0
-      got: 11.8.6
+      google-auth-library: 10.6.2
+      got: 14.6.6
       graph-data-structure: 4.5.0
-      handlebars: 4.7.8
+      handlebars: 4.7.9
       ignore: 7.0.5
       ini: 6.0.0
       json-dup-key-validator: 1.0.3
       json-stringify-pretty-compact: 4.0.0
       json5: 2.2.3
-      jsonata: 2.1.0
-      jsonc-parser: 3.3.1
+      jsonata: 2.2.1
+      jsonc-weaver: 0.2.4
       klona: 2.0.6
+      lru-cache: 11.5.1
       luxon: 3.7.2
-      markdown-it: 14.1.0
+      markdown-it: 14.2.0
       markdown-table: 3.0.4
-      minimatch: 10.1.2
-      moo: 0.5.2
+      minimatch: 10.2.5
+      moo: 0.5.3
       ms: 2.1.3
       neotraverse: 0.6.18
-      node-html-parser: 7.0.2
+      node-html-parser: 7.1.0
       p-all: 5.0.1
       p-map: 7.0.4
-      p-queue: 9.1.0
+      p-queue: 9.3.0
       p-throttle: 8.1.0
       parse-link-header: 2.0.0
-      prettier: 3.6.2
-      protobufjs: 8.0.0
+      prettier: 3.8.1
+      protobufjs: 8.5.0
       punycode: 2.3.1
-      redis: 5.10.0
       remark: 15.0.1
       remark-gfm: 4.0.1
       remark-github: 12.0.0
       safe-stable-stringify: 2.5.0
-      sax: 1.4.4
-      semver: 7.7.4
+      sax: 1.6.0
+      semver: 7.8.1
       semver-stable: 3.0.0
       semver-utils: 1.1.4
       shlex: 3.0.0
-      simple-git: 3.30.0
-      slugify: 1.6.6
+      simple-git: 3.36.0
+      slugify: 1.6.9
       source-map-support: 0.5.21
       strip-json-comments: 5.0.3
-      toml-eslint-parser: 0.12.0
+      toml-eslint-parser: 1.0.3
       tslib: 2.8.1
-      upath: 2.0.1
+      upath: 3.0.7
       url-join: 5.0.0
       validate-npm-package-name: 7.0.2
       xmldoc: 2.0.3
-      yaml: 2.8.2
-      zod: 3.25.76
+      yaml: 2.9.0
+      zod: 4.4.3
     optionalDependencies:
-      better-sqlite3: 12.6.2
       openpgp: 6.3.0
-      re2: 1.23.2
+      re2: 1.24.1
     transitivePeerDependencies:
-      - aws-crt
-      - encoding
+      - '@node-rs/xxhash'
       - supports-color
       - typanion
 
@@ -8899,13 +16082,15 @@ snapshots:
 
   require-in-the-middle@8.0.1:
     dependencies:
-      debug: 4.4.1
-      module-details-from-path: 1.0.3
+      debug: 4.4.3
+      module-details-from-path: 1.0.4
     transitivePeerDependencies:
       - supports-color
 
   resolve-alpn@1.2.1: {}
 
+  resolve-from@5.0.0: {}
+
   resolve-pkg-maps@1.0.0: {}
 
   resolve@1.22.8:
@@ -8918,8 +16103,11 @@ snapshots:
     dependencies:
       lowercase-keys: 2.0.0
 
-  retry@0.12.0:
-    optional: true
+  responselike@4.0.2:
+    dependencies:
+      lowercase-keys: 3.0.0
+
+  retry@0.12.0: {}
 
   reusify@1.0.4: {}
 
@@ -8928,11 +16116,6 @@ snapshots:
       glob: 6.0.4
     optional: true
 
-  rimraf@5.0.10:
-    dependencies:
-      glob: 10.4.5
-    optional: true
-
   roarr@2.15.4:
     dependencies:
       boolean: 3.2.0
@@ -8942,73 +16125,187 @@ snapshots:
       semver-compare: 1.0.0
       sprintf-js: 1.1.3
 
-  rolldown-plugin-dts@0.13.14(rolldown@1.0.0-rc.4)(typescript@5.8.3):
+  rolldown-plugin-dts@0.25.2(oxc-resolver@11.20.0)(rolldown@1.1.0)(typescript@6.0.3)(vue-tsc@3.2.6(typescript@6.0.3)):
     dependencies:
-      '@babel/generator': 7.29.1
-      '@babel/parser': 7.29.0
-      '@babel/types': 7.29.0
-      ast-kit: 2.2.0
-      birpc: 2.9.0
-      debug: 4.4.3
-      dts-resolver: 2.1.3
-      get-tsconfig: 4.13.6
-      rolldown: 1.0.0-rc.4
+      '@babel/generator': 8.0.0-rc.6
+      '@babel/helper-validator-identifier': 8.0.0-rc.6
+      '@babel/parser': 8.0.0-rc.6
+      ast-kit: 3.0.0-beta.1
+      birpc: 4.0.0
+      dts-resolver: 3.0.0(oxc-resolver@11.20.0)
+      get-tsconfig: 5.0.0-beta.5
+      obug: 2.1.1
+      rolldown: 1.1.0
     optionalDependencies:
-      typescript: 5.8.3
+      typescript: 6.0.3
+      vue-tsc: 3.2.6(typescript@6.0.3)
     transitivePeerDependencies:
       - oxc-resolver
-      - supports-color
 
-  rolldown@1.0.0-rc.4:
+  rolldown-plugin-dts@0.25.2(oxc-resolver@11.20.0)(rolldown@1.1.0)(typescript@6.0.3)(vue-tsc@3.3.4(typescript@6.0.3)):
     dependencies:
-      '@oxc-project/types': 0.113.0
-      '@rolldown/pluginutils': 1.0.0-rc.4
+      '@babel/generator': 8.0.0-rc.6
+      '@babel/helper-validator-identifier': 8.0.0-rc.6
+      '@babel/parser': 8.0.0-rc.6
+      ast-kit: 3.0.0-beta.1
+      birpc: 4.0.0
+      dts-resolver: 3.0.0(oxc-resolver@11.20.0)
+      get-tsconfig: 5.0.0-beta.5
+      obug: 2.1.1
+      rolldown: 1.1.0
     optionalDependencies:
-      '@rolldown/binding-android-arm64': 1.0.0-rc.4
-      '@rolldown/binding-darwin-arm64': 1.0.0-rc.4
-      '@rolldown/binding-darwin-x64': 1.0.0-rc.4
-      '@rolldown/binding-freebsd-x64': 1.0.0-rc.4
-      '@rolldown/binding-linux-arm-gnueabihf': 1.0.0-rc.4
-      '@rolldown/binding-linux-arm64-gnu': 1.0.0-rc.4
-      '@rolldown/binding-linux-arm64-musl': 1.0.0-rc.4
-      '@rolldown/binding-linux-x64-gnu': 1.0.0-rc.4
-      '@rolldown/binding-linux-x64-musl': 1.0.0-rc.4
-      '@rolldown/binding-openharmony-arm64': 1.0.0-rc.4
-      '@rolldown/binding-wasm32-wasi': 1.0.0-rc.4
-      '@rolldown/binding-win32-arm64-msvc': 1.0.0-rc.4
-      '@rolldown/binding-win32-x64-msvc': 1.0.0-rc.4
+      typescript: 6.0.3
+      vue-tsc: 3.3.4(typescript@6.0.3)
+    transitivePeerDependencies:
+      - oxc-resolver
 
-  rollup@4.61.0:
+  rolldown@1.0.0-rc.11:
+    dependencies:
+      '@oxc-project/types': 0.122.0
+      '@rolldown/pluginutils': 1.0.0-rc.11
+    optionalDependencies:
+      '@rolldown/binding-android-arm64': 1.0.0-rc.11
+      '@rolldown/binding-darwin-arm64': 1.0.0-rc.11
+      '@rolldown/binding-darwin-x64': 1.0.0-rc.11
+      '@rolldown/binding-freebsd-x64': 1.0.0-rc.11
+      '@rolldown/binding-linux-arm-gnueabihf': 1.0.0-rc.11
+      '@rolldown/binding-linux-arm64-gnu': 1.0.0-rc.11
+      '@rolldown/binding-linux-arm64-musl': 1.0.0-rc.11
+      '@rolldown/binding-linux-ppc64-gnu': 1.0.0-rc.11
+      '@rolldown/binding-linux-s390x-gnu': 1.0.0-rc.11
+      '@rolldown/binding-linux-x64-gnu': 1.0.0-rc.11
+      '@rolldown/binding-linux-x64-musl': 1.0.0-rc.11
+      '@rolldown/binding-openharmony-arm64': 1.0.0-rc.11
+      '@rolldown/binding-wasm32-wasi': 1.0.0-rc.11
+      '@rolldown/binding-win32-arm64-msvc': 1.0.0-rc.11
+      '@rolldown/binding-win32-x64-msvc': 1.0.0-rc.11
+    transitivePeerDependencies:
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+    optional: true
+
+  rolldown@1.0.0-rc.11(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0):
+    dependencies:
+      '@oxc-project/types': 0.122.0
+      '@rolldown/pluginutils': 1.0.0-rc.11
+    optionalDependencies:
+      '@rolldown/binding-android-arm64': 1.0.0-rc.11
+      '@rolldown/binding-darwin-arm64': 1.0.0-rc.11
+      '@rolldown/binding-darwin-x64': 1.0.0-rc.11
+      '@rolldown/binding-freebsd-x64': 1.0.0-rc.11
+      '@rolldown/binding-linux-arm-gnueabihf': 1.0.0-rc.11
+      '@rolldown/binding-linux-arm64-gnu': 1.0.0-rc.11
+      '@rolldown/binding-linux-arm64-musl': 1.0.0-rc.11
+      '@rolldown/binding-linux-ppc64-gnu': 1.0.0-rc.11
+      '@rolldown/binding-linux-s390x-gnu': 1.0.0-rc.11
+      '@rolldown/binding-linux-x64-gnu': 1.0.0-rc.11
+      '@rolldown/binding-linux-x64-musl': 1.0.0-rc.11
+      '@rolldown/binding-openharmony-arm64': 1.0.0-rc.11
+      '@rolldown/binding-wasm32-wasi': 1.0.0-rc.11(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+      '@rolldown/binding-win32-arm64-msvc': 1.0.0-rc.11
+      '@rolldown/binding-win32-x64-msvc': 1.0.0-rc.11
+    transitivePeerDependencies:
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+    optional: true
+
+  rolldown@1.0.3:
+    dependencies:
+      '@oxc-project/types': 0.133.0
+      '@rolldown/pluginutils': 1.0.1
+    optionalDependencies:
+      '@rolldown/binding-android-arm64': 1.0.3
+      '@rolldown/binding-darwin-arm64': 1.0.3
+      '@rolldown/binding-darwin-x64': 1.0.3
+      '@rolldown/binding-freebsd-x64': 1.0.3
+      '@rolldown/binding-linux-arm-gnueabihf': 1.0.3
+      '@rolldown/binding-linux-arm64-gnu': 1.0.3
+      '@rolldown/binding-linux-arm64-musl': 1.0.3
+      '@rolldown/binding-linux-ppc64-gnu': 1.0.3
+      '@rolldown/binding-linux-s390x-gnu': 1.0.3
+      '@rolldown/binding-linux-x64-gnu': 1.0.3
+      '@rolldown/binding-linux-x64-musl': 1.0.3
+      '@rolldown/binding-openharmony-arm64': 1.0.3
+      '@rolldown/binding-wasm32-wasi': 1.0.3
+      '@rolldown/binding-win32-arm64-msvc': 1.0.3
+      '@rolldown/binding-win32-x64-msvc': 1.0.3
+
+  rolldown@1.1.0:
+    dependencies:
+      '@oxc-project/types': 0.134.0
+      '@rolldown/pluginutils': 1.0.1
+    optionalDependencies:
+      '@rolldown/binding-android-arm64': 1.1.0
+      '@rolldown/binding-darwin-arm64': 1.1.0
+      '@rolldown/binding-darwin-x64': 1.1.0
+      '@rolldown/binding-freebsd-x64': 1.1.0
+      '@rolldown/binding-linux-arm-gnueabihf': 1.1.0
+      '@rolldown/binding-linux-arm64-gnu': 1.1.0
+      '@rolldown/binding-linux-arm64-musl': 1.1.0
+      '@rolldown/binding-linux-ppc64-gnu': 1.1.0
+      '@rolldown/binding-linux-s390x-gnu': 1.1.0
+      '@rolldown/binding-linux-x64-gnu': 1.1.0
+      '@rolldown/binding-linux-x64-musl': 1.1.0
+      '@rolldown/binding-openharmony-arm64': 1.1.0
+      '@rolldown/binding-wasm32-wasi': 1.1.0
+      '@rolldown/binding-win32-arm64-msvc': 1.1.0
+      '@rolldown/binding-win32-x64-msvc': 1.1.0
+
+  rollup-plugin-visualizer@7.0.1(rolldown@1.1.0)(rollup@4.61.1):
+    dependencies:
+      open: 11.0.0
+      picomatch: 4.0.4
+      source-map: 0.7.6
+      yargs: 18.0.0
+    optionalDependencies:
+      rolldown: 1.1.0
+      rollup: 4.61.1
+
+  rollup@4.61.1:
     dependencies:
       '@types/estree': 1.0.9
     optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.61.0
-      '@rollup/rollup-android-arm64': 4.61.0
-      '@rollup/rollup-darwin-arm64': 4.61.0
-      '@rollup/rollup-darwin-x64': 4.61.0
-      '@rollup/rollup-freebsd-arm64': 4.61.0
-      '@rollup/rollup-freebsd-x64': 4.61.0
-      '@rollup/rollup-linux-arm-gnueabihf': 4.61.0
-      '@rollup/rollup-linux-arm-musleabihf': 4.61.0
-      '@rollup/rollup-linux-arm64-gnu': 4.61.0
-      '@rollup/rollup-linux-arm64-musl': 4.61.0
-      '@rollup/rollup-linux-loong64-gnu': 4.61.0
-      '@rollup/rollup-linux-loong64-musl': 4.61.0
-      '@rollup/rollup-linux-ppc64-gnu': 4.61.0
-      '@rollup/rollup-linux-ppc64-musl': 4.61.0
-      '@rollup/rollup-linux-riscv64-gnu': 4.61.0
-      '@rollup/rollup-linux-riscv64-musl': 4.61.0
-      '@rollup/rollup-linux-s390x-gnu': 4.61.0
-      '@rollup/rollup-linux-x64-gnu': 4.61.0
-      '@rollup/rollup-linux-x64-musl': 4.61.0
-      '@rollup/rollup-openbsd-x64': 4.61.0
-      '@rollup/rollup-openharmony-arm64': 4.61.0
-      '@rollup/rollup-win32-arm64-msvc': 4.61.0
-      '@rollup/rollup-win32-ia32-msvc': 4.61.0
-      '@rollup/rollup-win32-x64-gnu': 4.61.0
-      '@rollup/rollup-win32-x64-msvc': 4.61.0
+      '@rollup/rollup-android-arm-eabi': 4.61.1
+      '@rollup/rollup-android-arm64': 4.61.1
+      '@rollup/rollup-darwin-arm64': 4.61.1
+      '@rollup/rollup-darwin-x64': 4.61.1
+      '@rollup/rollup-freebsd-arm64': 4.61.1
+      '@rollup/rollup-freebsd-x64': 4.61.1
+      '@rollup/rollup-linux-arm-gnueabihf': 4.61.1
+      '@rollup/rollup-linux-arm-musleabihf': 4.61.1
+      '@rollup/rollup-linux-arm64-gnu': 4.61.1
+      '@rollup/rollup-linux-arm64-musl': 4.61.1
+      '@rollup/rollup-linux-loong64-gnu': 4.61.1
+      '@rollup/rollup-linux-loong64-musl': 4.61.1
+      '@rollup/rollup-linux-ppc64-gnu': 4.61.1
+      '@rollup/rollup-linux-ppc64-musl': 4.61.1
+      '@rollup/rollup-linux-riscv64-gnu': 4.61.1
+      '@rollup/rollup-linux-riscv64-musl': 4.61.1
+      '@rollup/rollup-linux-s390x-gnu': 4.61.1
+      '@rollup/rollup-linux-x64-gnu': 4.61.1
+      '@rollup/rollup-linux-x64-musl': 4.61.1
+      '@rollup/rollup-openbsd-x64': 4.61.1
+      '@rollup/rollup-openharmony-arm64': 4.61.1
+      '@rollup/rollup-win32-arm64-msvc': 4.61.1
+      '@rollup/rollup-win32-ia32-msvc': 4.61.1
+      '@rollup/rollup-win32-x64-gnu': 4.61.1
+      '@rollup/rollup-win32-x64-msvc': 4.61.1
       fsevents: 2.3.3
 
+  rou3@0.8.1: {}
+
+  router@2.2.0:
+    dependencies:
+      debug: 4.4.3
+      depd: 2.0.0
+      is-promise: 4.0.0
+      parseurl: 1.3.3
+      path-to-regexp: 8.4.2
+    transitivePeerDependencies:
+      - supports-color
+
+  run-applescript@7.1.0: {}
+
   run-parallel@1.2.0:
     dependencies:
       queue-microtask: 1.2.3
@@ -9022,15 +16319,22 @@ snapshots:
 
   safe-stable-stringify@2.5.0: {}
 
-  safer-buffer@2.1.2:
-    optional: true
+  safer-buffer@2.1.2: {}
 
-  sax@1.4.4: {}
+  sax@1.6.0: {}
 
   saxes@6.0.0:
     dependencies:
       xmlchars: 2.2.0
 
+  scheduler@0.27.0: {}
+
+  scslre@0.3.0:
+    dependencies:
+      '@eslint-community/regexpp': 4.12.2
+      refa: 0.12.1
+      regexp-ast-analysis: 0.7.1
+
   scule@1.3.0: {}
 
   semver-compare@1.0.0: {}
@@ -9041,26 +16345,50 @@ snapshots:
 
   semver-utils@1.1.4: {}
 
-  semver@5.7.2: {}
-
   semver@6.3.1: {}
 
-  semver@7.7.2: {}
+  semver@7.8.1: {}
 
-  semver@7.7.4: {}
+  semver@7.8.2: {}
+
+  send@1.2.1:
+    dependencies:
+      debug: 4.4.3
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      fresh: 2.0.0
+      http-errors: 2.0.1
+      mime-types: 3.0.2
+      ms: 2.1.3
+      on-finished: 2.4.1
+      range-parser: 1.2.1
+      statuses: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
 
   serialize-error@7.0.1:
     dependencies:
       type-fest: 0.13.1
 
-  set-function-length@1.2.2:
+  serialize-javascript@7.0.5: {}
+
+  seroval@1.5.4: {}
+
+  serve-placeholder@2.0.2:
     dependencies:
-      define-data-property: 1.1.4
-      es-errors: 1.3.0
-      function-bind: 1.1.2
-      get-intrinsic: 1.2.4
-      gopd: 1.0.1
-      has-property-descriptors: 1.0.2
+      defu: 6.1.7
+
+  serve-static@2.2.1:
+    dependencies:
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      parseurl: 1.3.3
+      send: 1.2.1
+    transitivePeerDependencies:
+      - supports-color
+
+  setprototypeof@1.2.0: {}
 
   shebang-command@2.0.0:
     dependencies:
@@ -9068,14 +16396,48 @@ snapshots:
 
   shebang-regex@3.0.0: {}
 
+  shell-quote@1.8.3: {}
+
+  shiki@4.2.0:
+    dependencies:
+      '@shikijs/core': 4.2.0
+      '@shikijs/engine-javascript': 4.2.0
+      '@shikijs/engine-oniguruma': 4.2.0
+      '@shikijs/langs': 4.2.0
+      '@shikijs/themes': 4.2.0
+      '@shikijs/types': 4.2.0
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
   shlex@3.0.0: {}
 
-  side-channel@1.0.6:
+  side-channel-list@1.0.1:
     dependencies:
-      call-bind: 1.0.7
       es-errors: 1.3.0
-      get-intrinsic: 1.2.4
-      object-inspect: 1.13.1
+      object-inspect: 1.13.4
+
+  side-channel-map@1.0.1:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-weakmap@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-map: 1.0.1
+
+  side-channel@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-list: 1.0.1
+      side-channel-map: 1.0.1
+      side-channel-weakmap: 1.0.2
 
   siginfo@2.0.0: {}
 
@@ -9093,11 +16455,13 @@ snapshots:
       simple-concat: 1.0.1
     optional: true
 
-  simple-git@3.30.0:
+  simple-git@3.36.0:
     dependencies:
       '@kwsites/file-exists': 1.1.1
       '@kwsites/promise-deferred': 1.1.1
-      debug: 4.4.1
+      '@simple-git/args-pathspec': 1.0.3
+      '@simple-git/argv-parser': 1.1.1
+      debug: 4.4.3
     transitivePeerDependencies:
       - supports-color
 
@@ -9107,25 +16471,13 @@ snapshots:
       mrmime: 2.0.1
       totalist: 3.0.1
 
-  slugify@1.6.6: {}
+  sisteransi@1.0.5: {}
 
-  smart-buffer@4.2.0:
-    optional: true
+  slash@5.1.0: {}
 
-  socks-proxy-agent@8.0.3:
-    dependencies:
-      agent-base: 7.1.3
-      debug: 4.4.1
-      socks: 2.8.3
-    transitivePeerDependencies:
-      - supports-color
-    optional: true
+  slugify@1.6.9: {}
 
-  socks@2.8.3:
-    dependencies:
-      ip-address: 9.0.5
-      smart-buffer: 4.2.0
-    optional: true
+  smob@1.6.1: {}
 
   sort-keys@4.2.0:
     dependencies:
@@ -9140,38 +16492,66 @@ snapshots:
 
   source-map@0.6.1: {}
 
-  spdx-correct@3.2.0:
-    dependencies:
-      spdx-expression-parse: 3.0.1
-      spdx-license-ids: 3.0.17
+  source-map@0.7.6: {}
 
-  spdx-exceptions@2.5.0: {}
-
-  spdx-expression-parse@3.0.1:
-    dependencies:
-      spdx-exceptions: 2.5.0
-      spdx-license-ids: 3.0.17
-
-  spdx-license-ids@3.0.17: {}
-
-  split2@3.2.2:
-    dependencies:
-      readable-stream: 3.6.2
+  space-separated-tokens@2.0.2: {}
 
   sprintf-js@1.0.3: {}
 
   sprintf-js@1.1.3: {}
 
+  srvx@0.11.16: {}
+
   ssri@13.0.1:
     dependencies:
-      minipass: 7.1.2
+      minipass: 7.1.3
+
+  stable-hash-x@0.2.0: {}
 
   stackback@0.0.2: {}
 
-  std-env@3.10.0: {}
+  standard-as-callback@2.1.0: {}
+
+  statuses@2.0.2: {}
 
   std-env@4.1.0: {}
 
+  storybook@10.4.2(@testing-library/dom@10.4.1)(@types/react@19.2.14)(prettier@3.8.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5):
+    dependencies:
+      '@storybook/global': 5.0.0
+      '@storybook/icons': 2.0.2(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@testing-library/jest-dom': 6.9.1
+      '@testing-library/user-event': 14.6.1(@testing-library/dom@10.4.1)
+      '@vitest/expect': 3.2.4
+      '@vitest/spy': 3.2.4
+      '@webcontainer/env': 1.1.1
+      esbuild: 0.27.4
+      open: 10.2.0
+      oxc-parser: 0.127.0
+      oxc-resolver: 11.20.0
+      recast: 0.23.11
+      semver: 7.8.2
+      use-sync-external-store: 1.6.0(react@19.2.5)
+      ws: 8.20.0
+    optionalDependencies:
+      '@types/react': 19.2.14
+      prettier: 3.8.1
+    transitivePeerDependencies:
+      - '@testing-library/dom'
+      - bufferutil
+      - react
+      - react-dom
+      - utf-8-validate
+
+  streamx@2.25.0:
+    dependencies:
+      events-universal: 1.0.1
+      fast-fifo: 1.3.2
+      text-decoder: 1.2.7
+    transitivePeerDependencies:
+      - bare-abort-controller
+      - react-native-b4a
+
   string-width@4.2.3:
     dependencies:
       emoji-regex: 8.0.0
@@ -9184,6 +16564,12 @@ snapshots:
       emoji-regex: 9.2.2
       strip-ansi: 7.1.0
 
+  string-width@7.2.0:
+    dependencies:
+      emoji-regex: 10.6.0
+      get-east-asian-width: 1.5.0
+      strip-ansi: 7.1.0
+
   string_decoder@1.1.1:
     dependencies:
       safe-buffer: 5.1.2
@@ -9192,6 +16578,11 @@ snapshots:
     dependencies:
       safe-buffer: 5.2.1
 
+  stringify-entities@4.0.4:
+    dependencies:
+      character-entities-html4: 2.1.0
+      character-entities-legacy: 3.0.0
+
   strip-ansi@6.0.1:
     dependencies:
       ansi-regex: 5.0.1
@@ -9210,12 +16601,28 @@ snapshots:
     dependencies:
       min-indent: 1.0.1
 
+  strip-indent@4.1.1: {}
+
   strip-json-comments@2.0.1:
     optional: true
 
   strip-json-comments@5.0.3: {}
 
-  strnum@2.1.1: {}
+  strip-literal@3.1.0:
+    dependencies:
+      js-tokens: 9.0.1
+
+  strnum@2.3.0: {}
+
+  structured-clone-es@2.0.0: {}
+
+  stylehacks@8.0.0(postcss@8.5.15):
+    dependencies:
+      browserslist: 4.28.2
+      postcss: 8.5.15
+      postcss-selector-parser: 7.1.1
+
+  supports-color@10.2.2: {}
 
   supports-color@7.2.0:
     dependencies:
@@ -9223,8 +16630,24 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  svgo@4.0.1:
+    dependencies:
+      commander: 11.1.0
+      css-select: 5.1.0
+      css-tree: 3.2.1
+      css-what: 6.1.0
+      csso: 5.0.5
+      picocolors: 1.1.1
+      sax: 1.6.0
+
   symbol-tree@3.2.4: {}
 
+  tagged-tag@1.0.0: {}
+
+  tailwindcss@4.3.0: {}
+
+  tapable@2.3.3: {}
+
   tar-fs@2.1.1:
     dependencies:
       chownr: 1.1.4
@@ -9242,23 +16665,31 @@ snapshots:
       readable-stream: 3.6.2
     optional: true
 
-  tar@6.2.1:
+  tar-stream@3.1.8:
     dependencies:
-      chownr: 2.0.0
-      fs-minipass: 2.1.0
-      minipass: 5.0.0
-      minizlib: 2.1.2
-      mkdirp: 1.0.4
-      yallist: 4.0.0
+      b4a: 1.8.0
+      bare-fs: 4.5.6
+      fast-fifo: 1.3.2
+      streamx: 2.25.0
+    transitivePeerDependencies:
+      - bare-abort-controller
+      - bare-buffer
+      - react-native-b4a
 
   tar@7.5.7:
     dependencies:
       '@isaacs/fs-minipass': 4.0.1
       chownr: 3.0.0
-      minipass: 7.1.2
+      minipass: 7.1.3
       minizlib: 3.1.0
       yallist: 5.0.0
-    optional: true
+
+  teex@1.0.1:
+    dependencies:
+      streamx: 2.25.0
+    transitivePeerDependencies:
+      - bare-abort-controller
+      - react-native-b4a
 
   terser@5.44.0:
     dependencies:
@@ -9266,32 +16697,23 @@ snapshots:
       acorn: 8.16.0
       commander: 2.20.3
       source-map-support: 0.5.21
-    optional: true
 
-  through2-concurrent@2.0.0:
+  text-decoder@1.2.7:
     dependencies:
-      through2: 2.0.5
+      b4a: 1.8.0
+    transitivePeerDependencies:
+      - react-native-b4a
 
-  through2@2.0.5:
-    dependencies:
-      readable-stream: 2.3.8
-      xtend: 4.0.2
+  tiny-inflate@1.0.3: {}
 
-  through2@4.0.2:
-    dependencies:
-      readable-stream: 3.6.2
+  tiny-invariant@1.3.3: {}
 
   tinybench@2.9.0: {}
 
-  tinyexec@1.0.2: {}
+  tinyclip@0.1.12: {}
 
   tinyexec@1.2.4: {}
 
-  tinyglobby@0.2.15:
-    dependencies:
-      fdir: 6.5.0(picomatch@4.0.4)
-      picomatch: 4.0.4
-
   tinyglobby@0.2.17:
     dependencies:
       fdir: 6.5.0(picomatch@4.0.4)
@@ -9299,10 +16721,12 @@ snapshots:
 
   tinylogic@2.0.0: {}
 
-  tinyrainbow@3.0.3: {}
+  tinyrainbow@2.0.0: {}
 
   tinyrainbow@3.1.0: {}
 
+  tinyspy@4.0.4: {}
+
   tldts-core@7.0.23: {}
 
   tldts@7.0.23:
@@ -9317,9 +16741,13 @@ snapshots:
     dependencies:
       vfile: 6.0.3
 
-  toml-eslint-parser@0.12.0:
+  toidentifier@1.0.1: {}
+
+  token-stream@1.0.0: {}
+
+  toml-eslint-parser@1.0.3:
     dependencies:
-      eslint-visitor-keys: 3.4.3
+      eslint-visitor-keys: 5.0.1
 
   totalist@3.0.1: {}
 
@@ -9333,33 +16761,103 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
+  tree-kill@1.2.2: {}
+
   treeify@1.1.0: {}
 
-  trim-newlines@3.0.1: {}
+  trim-lines@3.0.1: {}
 
   trough@2.2.0: {}
 
-  tsdown@0.12.9(typescript@5.8.3):
+  ts-api-utils@2.5.0(typescript@6.0.3):
     dependencies:
-      ansis: 4.2.0
-      cac: 6.7.14
-      chokidar: 4.0.3
-      debug: 4.4.3
-      diff: 8.0.3
-      empathic: 2.0.0
-      hookable: 5.5.3
-      rolldown: 1.0.0-rc.4
-      rolldown-plugin-dts: 0.13.14(rolldown@1.0.0-rc.4)(typescript@5.8.3)
-      semver: 7.7.4
-      tinyexec: 1.0.2
-      tinyglobby: 0.2.15
-      unconfig: 7.4.2
+      typescript: 6.0.3
+
+  ts-dedent@2.2.0: {}
+
+  ts-map@1.0.3: {}
+
+  ts-morph@28.0.0:
+    dependencies:
+      '@ts-morph/common': 0.29.0
+      code-block-writer: 13.0.3
+
+  tsdown@0.22.2(oxc-resolver@11.20.0)(typescript@6.0.3)(unrun@0.2.33(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0))(vue-tsc@3.2.6(typescript@6.0.3)):
+    dependencies:
+      ansis: 4.3.1
+      cac: 7.0.0
+      defu: 6.1.7
+      empathic: 2.0.1
+      hookable: 6.1.1
+      import-without-cache: 0.4.0
+      obug: 2.1.1
+      picomatch: 4.0.4
+      rolldown: 1.1.0
+      rolldown-plugin-dts: 0.25.2(oxc-resolver@11.20.0)(rolldown@1.1.0)(typescript@6.0.3)(vue-tsc@3.2.6(typescript@6.0.3))
+      semver: 7.8.2
+      tinyexec: 1.2.4
+      tinyglobby: 0.2.17
+      tree-kill: 1.2.2
+      unconfig-core: 7.5.0
     optionalDependencies:
-      typescript: 5.8.3
+      typescript: 6.0.3
+      unrun: 0.2.33(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
     transitivePeerDependencies:
+      - '@ts-macro/tsc'
+      - '@typescript/native-preview'
+      - oxc-resolver
+      - vue-tsc
+
+  tsdown@0.22.2(oxc-resolver@11.20.0)(typescript@6.0.3)(unrun@0.2.33)(vue-tsc@3.2.6(typescript@6.0.3)):
+    dependencies:
+      ansis: 4.3.1
+      cac: 7.0.0
+      defu: 6.1.7
+      empathic: 2.0.1
+      hookable: 6.1.1
+      import-without-cache: 0.4.0
+      obug: 2.1.1
+      picomatch: 4.0.4
+      rolldown: 1.1.0
+      rolldown-plugin-dts: 0.25.2(oxc-resolver@11.20.0)(rolldown@1.1.0)(typescript@6.0.3)(vue-tsc@3.2.6(typescript@6.0.3))
+      semver: 7.8.2
+      tinyexec: 1.2.4
+      tinyglobby: 0.2.17
+      tree-kill: 1.2.2
+      unconfig-core: 7.5.0
+    optionalDependencies:
+      typescript: 6.0.3
+      unrun: 0.2.33
+    transitivePeerDependencies:
+      - '@ts-macro/tsc'
+      - '@typescript/native-preview'
+      - oxc-resolver
+      - vue-tsc
+
+  tsdown@0.22.2(oxc-resolver@11.20.0)(typescript@6.0.3)(unrun@0.2.33)(vue-tsc@3.3.4(typescript@6.0.3)):
+    dependencies:
+      ansis: 4.3.1
+      cac: 7.0.0
+      defu: 6.1.7
+      empathic: 2.0.1
+      hookable: 6.1.1
+      import-without-cache: 0.4.0
+      obug: 2.1.1
+      picomatch: 4.0.4
+      rolldown: 1.1.0
+      rolldown-plugin-dts: 0.25.2(oxc-resolver@11.20.0)(rolldown@1.1.0)(typescript@6.0.3)(vue-tsc@3.3.4(typescript@6.0.3))
+      semver: 7.8.2
+      tinyexec: 1.2.4
+      tinyglobby: 0.2.17
+      tree-kill: 1.2.2
+      unconfig-core: 7.5.0
+    optionalDependencies:
+      typescript: 6.0.3
+      unrun: 0.2.33
+    transitivePeerDependencies:
+      - '@ts-macro/tsc'
       - '@typescript/native-preview'
       - oxc-resolver
-      - supports-color
       - vue-tsc
 
   tslib@2.8.1: {}
@@ -9373,19 +16871,31 @@ snapshots:
 
   typanion@3.14.0: {}
 
+  type-check@0.4.0:
+    dependencies:
+      prelude-ls: 1.2.1
+
   type-fest@0.13.1: {}
 
-  type-fest@0.18.1: {}
+  type-fest@4.41.0: {}
 
-  type-fest@0.6.0: {}
+  type-fest@5.7.0:
+    dependencies:
+      tagged-tag: 1.0.0
 
-  type-fest@0.8.1: {}
+  type-is@2.1.0:
+    dependencies:
+      content-type: 2.0.0
+      media-typer: 1.1.0
+      mime-types: 3.0.2
+
+  type-level-regexp@0.1.17: {}
 
   typed-rest-client@2.1.0:
     dependencies:
       des.js: 1.1.0
       js-md4: 0.3.2
-      qs: 6.12.1
+      qs: 6.15.2
       tunnel: 0.0.6
       underscore: 1.13.6
 
@@ -9393,35 +16903,74 @@ snapshots:
     dependencies:
       is-typedarray: 1.0.0
 
-  typescript@5.8.3:
-    optional: true
+  typescript-eslint@8.60.1(eslint@10.4.1(jiti@2.7.0))(typescript@6.0.3):
+    dependencies:
+      '@typescript-eslint/eslint-plugin': 8.60.1(@typescript-eslint/parser@8.60.1(eslint@10.4.1(jiti@2.7.0))(typescript@6.0.3))(eslint@10.4.1(jiti@2.7.0))(typescript@6.0.3)
+      '@typescript-eslint/parser': 8.60.1(eslint@10.4.1(jiti@2.7.0))(typescript@6.0.3)
+      '@typescript-eslint/typescript-estree': 8.60.1(typescript@6.0.3)
+      '@typescript-eslint/utils': 8.60.1(eslint@10.4.1(jiti@2.7.0))(typescript@6.0.3)
+      eslint: 10.4.1(jiti@2.7.0)
+      typescript: 6.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  typescript@5.9.3: {}
+
+  typescript@6.0.3: {}
 
   uc.micro@2.1.0: {}
 
+  ufo@1.6.4: {}
+
   uglify-js@3.17.4:
     optional: true
 
-  unconfig-core@7.4.2:
+  uint8array-extras@1.5.0: {}
+
+  ultrahtml@1.6.0: {}
+
+  unconfig-core@7.5.0:
     dependencies:
       '@quansync/fs': 1.0.0
       quansync: 1.0.0
 
-  unconfig@7.4.2:
+  uncrypto@0.1.3: {}
+
+  unctx@2.5.0:
     dependencies:
-      '@quansync/fs': 1.0.0
-      defu: 6.1.4
-      jiti: 2.6.1
-      quansync: 1.0.0
-      unconfig-core: 7.4.2
+      acorn: 8.16.0
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+      unplugin: 2.3.11
 
   underscore@1.13.6: {}
 
-  undici-types@7.16.0: {}
+  undici-types@7.24.6: {}
 
-  undici@7.24.5: {}
+  undici@6.26.0:
+    optional: true
+
+  undici@7.27.2: {}
+
+  unenv@2.0.0-rc.24:
+    dependencies:
+      pathe: 2.0.3
+
+  unhead@2.1.15:
+    dependencies:
+      hookable: 6.1.1
+
+  unhead@3.1.3(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0)):
+    dependencies:
+      hookable: 6.1.1
+      unplugin: 3.0.0
+    optionalDependencies:
+      vite: 8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0)
 
   unicorn-magic@0.3.0: {}
 
+  unicorn-magic@0.4.0: {}
+
   unified@11.0.5:
     dependencies:
       '@types/unist': 3.0.3
@@ -9432,18 +16981,40 @@ snapshots:
       trough: 2.2.0
       vfile: 6.0.3
 
-  unique-filename@5.0.0:
+  unifont@0.7.4:
     dependencies:
-      unique-slug: 6.0.0
+      css-tree: 3.2.1
+      ofetch: 1.5.1
+      ohash: 2.0.11
 
-  unique-slug@6.0.0:
+  unimport@6.3.0(oxc-parser@0.133.0)(rolldown@1.1.0):
     dependencies:
-      imurmurhash: 0.1.4
+      acorn: 8.16.0
+      escape-string-regexp: 5.0.0
+      estree-walker: 3.0.3
+      local-pkg: 1.1.2
+      magic-string: 0.30.21
+      mlly: 1.8.2
+      pathe: 2.0.3
+      picomatch: 4.0.4
+      pkg-types: 2.3.1
+      scule: 1.3.0
+      strip-literal: 3.1.0
+      tinyglobby: 0.2.17
+      unplugin: 3.0.0
+      unplugin-utils: 0.3.1
+    optionalDependencies:
+      oxc-parser: 0.133.0
+      rolldown: 1.1.0
 
   unist-util-is@6.0.0:
     dependencies:
       '@types/unist': 3.0.3
 
+  unist-util-position@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
   unist-util-stringify-position@4.0.0:
     dependencies:
       '@types/unist': 3.0.3
@@ -9461,33 +17032,164 @@ snapshots:
 
   universalify@2.0.1: {}
 
-  upath@2.0.1: {}
+  unpipe@1.0.0: {}
+
+  unplugin-utils@0.3.1:
+    dependencies:
+      pathe: 2.0.3
+      picomatch: 4.0.4
+
+  unplugin-vue@7.2.0(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(vue@3.5.35(typescript@6.0.3))(yaml@2.9.0):
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+      '@vue/reactivity': 3.5.35
+      obug: 2.1.1
+      unplugin: 3.0.0
+      vite: 8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0)
+      vue: 3.5.35(typescript@6.0.3)
+    transitivePeerDependencies:
+      - '@types/node'
+      - '@vitejs/devtools'
+      - esbuild
+      - jiti
+      - less
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - terser
+      - tsx
+      - yaml
+
+  unplugin@2.3.11:
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      acorn: 8.16.0
+      picomatch: 4.0.4
+      webpack-virtual-modules: 0.6.2
+
+  unplugin@3.0.0:
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      picomatch: 4.0.4
+      webpack-virtual-modules: 0.6.2
+
+  unrouting@0.1.7:
+    dependencies:
+      escape-string-regexp: 5.0.0
+      ufo: 1.6.4
+
+  unrs-resolver@1.12.2:
+    dependencies:
+      napi-postinstall: 0.3.4
+    optionalDependencies:
+      '@unrs/resolver-binding-android-arm-eabi': 1.12.2
+      '@unrs/resolver-binding-android-arm64': 1.12.2
+      '@unrs/resolver-binding-darwin-arm64': 1.12.2
+      '@unrs/resolver-binding-darwin-x64': 1.12.2
+      '@unrs/resolver-binding-freebsd-x64': 1.12.2
+      '@unrs/resolver-binding-linux-arm-gnueabihf': 1.12.2
+      '@unrs/resolver-binding-linux-arm-musleabihf': 1.12.2
+      '@unrs/resolver-binding-linux-arm64-gnu': 1.12.2
+      '@unrs/resolver-binding-linux-arm64-musl': 1.12.2
+      '@unrs/resolver-binding-linux-loong64-gnu': 1.12.2
+      '@unrs/resolver-binding-linux-loong64-musl': 1.12.2
+      '@unrs/resolver-binding-linux-ppc64-gnu': 1.12.2
+      '@unrs/resolver-binding-linux-riscv64-gnu': 1.12.2
+      '@unrs/resolver-binding-linux-riscv64-musl': 1.12.2
+      '@unrs/resolver-binding-linux-s390x-gnu': 1.12.2
+      '@unrs/resolver-binding-linux-x64-gnu': 1.12.2
+      '@unrs/resolver-binding-linux-x64-musl': 1.12.2
+      '@unrs/resolver-binding-openharmony-arm64': 1.12.2
+      '@unrs/resolver-binding-wasm32-wasi': 1.12.2
+      '@unrs/resolver-binding-win32-arm64-msvc': 1.12.2
+      '@unrs/resolver-binding-win32-ia32-msvc': 1.12.2
+      '@unrs/resolver-binding-win32-x64-msvc': 1.12.2
+
+  unrun@0.2.33:
+    dependencies:
+      rolldown: 1.0.0-rc.11
+    transitivePeerDependencies:
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+    optional: true
+
+  unrun@0.2.33(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0):
+    dependencies:
+      rolldown: 1.0.0-rc.11(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+    transitivePeerDependencies:
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+    optional: true
+
+  unstorage@1.17.5(db0@0.3.4(better-sqlite3@12.8.0))(ioredis@5.10.1):
+    dependencies:
+      anymatch: 3.1.3
+      chokidar: 5.0.0
+      destr: 2.0.5
+      h3: 1.15.11
+      lru-cache: 11.5.1
+      node-fetch-native: 1.6.7
+      ofetch: 1.5.1
+      ufo: 1.6.4
+    optionalDependencies:
+      db0: 0.3.4(better-sqlite3@12.8.0)
+      ioredis: 5.10.1
+
+  untun@0.1.3:
+    dependencies:
+      citty: 0.1.6
+      consola: 3.4.2
+      pathe: 1.1.2
+
+  untyped@2.0.0:
+    dependencies:
+      citty: 0.1.6
+      defu: 6.1.7
+      jiti: 2.7.0
+      knitwork: 1.3.0
+      scule: 1.3.0
+
+  unwasm@0.5.3:
+    dependencies:
+      exsolve: 1.0.8
+      knitwork: 1.3.0
+      magic-string: 0.30.21
+      mlly: 1.8.2
+      pathe: 2.0.3
+      pkg-types: 2.3.1
+
+  upath@3.0.7: {}
+
+  update-browserslist-db@1.2.3(browserslist@4.28.2):
+    dependencies:
+      browserslist: 4.28.2
+      escalade: 3.2.0
+      picocolors: 1.1.1
+
+  uqr@0.1.3: {}
+
+  uri-js@4.4.1:
+    dependencies:
+      punycode: 2.3.1
 
   url-join@5.0.0: {}
 
+  use-sync-external-store@1.6.0(react@19.2.5):
+    dependencies:
+      react: 19.2.5
+
   util-deprecate@1.0.2: {}
 
-  util@0.12.5:
-    dependencies:
-      inherits: 2.0.4
-      is-arguments: 1.1.1
-      is-generator-function: 1.0.10
-      is-typed-array: 1.1.13
-      which-typed-array: 1.1.15
-
-  uuid@9.0.1: {}
-
-  validate-npm-package-license@3.0.4:
-    dependencies:
-      spdx-correct: 3.2.0
-      spdx-expression-parse: 3.0.1
-
   validate-npm-package-name@5.0.0:
     dependencies:
       builtins: 5.1.0
 
   validate-npm-package-name@7.0.2: {}
 
+  vary@1.1.2: {}
+
   vfile-message@4.0.2:
     dependencies:
       '@types/unist': 3.0.3
@@ -9498,31 +17200,130 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.2
 
-  vite@7.1.4(@types/node@24.10.13)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.2):
+  vite-dev-rpc@1.1.0(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0)):
     dependencies:
-      esbuild: 0.25.12
+      birpc: 2.9.0
+      vite: 8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0)
+      vite-hot-client: 2.1.0(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))
+
+  vite-hot-client@2.1.0(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0)):
+    dependencies:
+      vite: 8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0)
+
+  vite-node@5.3.0(@types/node@25.9.2)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.9.0):
+    dependencies:
+      cac: 6.7.14
+      es-module-lexer: 2.0.0
+      obug: 2.1.1
+      pathe: 2.0.3
+      vite: 7.3.5(@types/node@25.9.2)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.9.0)
+    transitivePeerDependencies:
+      - '@types/node'
+      - jiti
+      - less
+      - lightningcss
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - terser
+      - tsx
+      - yaml
+
+  vite-plugin-checker@0.14.1(eslint@10.4.1(jiti@2.7.0))(optionator@0.9.4)(oxlint@1.57.0)(typescript@6.0.3)(vite@7.3.5(@types/node@25.9.2)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.9.0))(vue-tsc@3.3.4(typescript@6.0.3)):
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      chokidar: 5.0.0
+      npm-run-path: 6.0.0
+      picocolors: 1.1.1
+      picomatch: 4.0.4
+      proper-lockfile: 4.1.2
+      tiny-invariant: 1.3.3
+      vite: 7.3.5(@types/node@25.9.2)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.9.0)
+    optionalDependencies:
+      eslint: 10.4.1(jiti@2.7.0)
+      optionator: 0.9.4
+      oxlint: 1.57.0
+      typescript: 6.0.3
+      vue-tsc: 3.3.4(typescript@6.0.3)
+
+  vite-plugin-inspect@11.3.3(@nuxt/kit@4.4.7(magicast@0.5.2))(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0)):
+    dependencies:
+      ansis: 4.3.1
+      debug: 4.4.3
+      error-stack-parser-es: 1.0.5
+      ohash: 2.0.11
+      open: 10.2.0
+      perfect-debounce: 2.1.0
+      sirv: 3.0.2
+      unplugin-utils: 0.3.1
+      vite: 8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0)
+      vite-dev-rpc: 1.1.0(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))
+    optionalDependencies:
+      '@nuxt/kit': 4.4.7(magicast@0.5.2)
+    transitivePeerDependencies:
+      - supports-color
+
+  vite-plugin-vue-tracer@1.3.0(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))(vue@3.5.35(typescript@6.0.3)):
+    dependencies:
+      estree-walker: 3.0.3
+      exsolve: 1.0.8
+      magic-string: 0.30.21
+      pathe: 2.0.3
+      source-map-js: 1.2.1
+      vite: 8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0)
+      vue: 3.5.35(typescript@6.0.3)
+
+  vite@7.3.5(@types/node@25.9.2)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.9.0):
+    dependencies:
+      esbuild: 0.27.4
       fdir: 6.5.0(picomatch@4.0.4)
       picomatch: 4.0.4
       postcss: 8.5.15
-      rollup: 4.61.0
+      rollup: 4.61.1
       tinyglobby: 0.2.17
     optionalDependencies:
-      '@types/node': 24.10.13
+      '@types/node': 25.9.2
       fsevents: 2.3.3
-      jiti: 2.6.1
+      jiti: 2.7.0
+      lightningcss: 1.32.0
       terser: 5.44.0
-      yaml: 2.8.2
+      yaml: 2.9.0
 
-  vitest@4.1.0(@opentelemetry/api@1.9.0)(@types/node@24.10.13)(@vitest/ui@4.0.18)(jsdom@29.0.1)(vite@7.1.4(@types/node@24.10.13)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.2)):
+  vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0):
     dependencies:
-      '@vitest/expect': 4.1.0
-      '@vitest/mocker': 4.1.0(vite@7.1.4(@types/node@24.10.13)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.2))
-      '@vitest/pretty-format': 4.1.0
-      '@vitest/runner': 4.1.0
-      '@vitest/snapshot': 4.1.0
-      '@vitest/spy': 4.1.0
-      '@vitest/utils': 4.1.0
-      es-module-lexer: 2.1.0
+      lightningcss: 1.32.0
+      picomatch: 4.0.4
+      postcss: 8.5.15
+      rolldown: 1.0.3
+      tinyglobby: 0.2.17
+    optionalDependencies:
+      '@types/node': 25.9.2
+      esbuild: 0.28.0
+      fsevents: 2.3.3
+      jiti: 2.7.0
+      terser: 5.44.0
+      yaml: 2.9.0
+
+  vitest-browser-vue@2.1.0(@vue/compiler-dom@3.5.35)(@vue/server-renderer@3.5.35(vue@3.5.35(typescript@6.0.3)))(vitest@4.1.8)(vue@3.5.35(typescript@6.0.3)):
+    dependencies:
+      '@vue/test-utils': 2.4.11(@vue/compiler-dom@3.5.35)(@vue/server-renderer@3.5.35(vue@3.5.35(typescript@6.0.3)))(vue@3.5.35(typescript@6.0.3))
+      vitest: 4.1.8(@opentelemetry/api@1.9.1)(@types/node@25.9.2)(@vitest/browser-playwright@4.1.8)(@vitest/coverage-v8@4.1.8)(@vitest/ui@4.1.8)(jsdom@29.1.1)(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))
+      vue: 3.5.35(typescript@6.0.3)
+    transitivePeerDependencies:
+      - '@vue/compiler-dom'
+      - '@vue/server-renderer'
+
+  vitest@4.1.8(@opentelemetry/api@1.9.1)(@types/node@25.9.2)(@vitest/browser-playwright@4.1.8)(@vitest/coverage-v8@4.1.8)(@vitest/ui@4.1.8)(jsdom@29.1.1)(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0)):
+    dependencies:
+      '@vitest/expect': 4.1.8
+      '@vitest/mocker': 4.1.8(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))
+      '@vitest/pretty-format': 4.1.8
+      '@vitest/runner': 4.1.8
+      '@vitest/snapshot': 4.1.8
+      '@vitest/spy': 4.1.8
+      '@vitest/utils': 4.1.8
+      es-module-lexer: 2.0.0
       expect-type: 1.3.0
       magic-string: 0.30.21
       obug: 2.1.1
@@ -9533,27 +17334,133 @@ snapshots:
       tinyexec: 1.2.4
       tinyglobby: 0.2.17
       tinyrainbow: 3.1.0
-      vite: 7.1.4(@types/node@24.10.13)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.2)
+      vite: 8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
-      '@opentelemetry/api': 1.9.0
-      '@types/node': 24.10.13
-      '@vitest/ui': 4.0.18(vitest@4.1.0)
-      jsdom: 29.0.1
+      '@opentelemetry/api': 1.9.1
+      '@types/node': 25.9.2
+      '@vitest/browser-playwright': 4.1.8(playwright@1.60.0)(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))(vitest@4.1.8)
+      '@vitest/coverage-v8': 4.1.8(@vitest/browser@4.1.8)(vitest@4.1.8)
+      '@vitest/ui': 4.1.8(vitest@4.1.8)
+      jsdom: 29.1.1
     transitivePeerDependencies:
       - msw
 
-  vue-component-type-helpers@2.1.6: {}
+  void-elements@3.1.0: {}
 
-  vue@3.5.28(typescript@5.8.3):
+  vscode-uri@3.1.0: {}
+
+  vue-bundle-renderer@2.2.0:
     dependencies:
-      '@vue/compiler-dom': 3.5.28
-      '@vue/compiler-sfc': 3.5.28
-      '@vue/runtime-dom': 3.5.28
-      '@vue/server-renderer': 3.5.28(vue@3.5.28(typescript@5.8.3))
-      '@vue/shared': 3.5.28
+      ufo: 1.6.4
+
+  vue-component-meta@2.2.12(typescript@5.9.3):
+    dependencies:
+      '@volar/typescript': 2.4.15
+      '@vue/language-core': 2.2.12(typescript@5.9.3)
+      path-browserify: 1.0.1
+      vue-component-type-helpers: 2.2.12
     optionalDependencies:
-      typescript: 5.8.3
+      typescript: 5.9.3
+
+  vue-component-type-helpers@2.2.12: {}
+
+  vue-component-type-helpers@3.3.4: {}
+
+  vue-demi@0.14.10(vue@3.5.35(typescript@6.0.3)):
+    dependencies:
+      vue: 3.5.35(typescript@6.0.3)
+
+  vue-devtools-stub@0.1.0: {}
+
+  vue-docgen-api@4.79.2(vue@3.5.35(typescript@5.9.3)):
+    dependencies:
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
+      '@vue/compiler-dom': 3.5.35
+      '@vue/compiler-sfc': 3.5.35
+      ast-types: 0.16.1
+      esm-resolve: 1.0.11
+      hash-sum: 2.0.0
+      lru-cache: 8.0.5
+      pug: 3.0.4
+      recast: 0.23.11
+      ts-map: 1.0.3
+      vue: 3.5.35(typescript@5.9.3)
+      vue-inbrowser-compiler-independent-utils: 4.71.1(vue@3.5.35(typescript@5.9.3))
+
+  vue-eslint-parser@10.4.1(eslint@10.4.1(jiti@2.7.0)):
+    dependencies:
+      debug: 4.4.3
+      eslint: 10.4.1(jiti@2.7.0)
+      eslint-scope: 9.1.2
+      eslint-visitor-keys: 5.0.1
+      espree: 11.2.0
+      esquery: 1.7.0
+      semver: 7.8.2
+    transitivePeerDependencies:
+      - supports-color
+
+  vue-inbrowser-compiler-independent-utils@4.71.1(vue@3.5.35(typescript@5.9.3)):
+    dependencies:
+      vue: 3.5.35(typescript@5.9.3)
+
+  vue-router@5.1.0(@vue/compiler-sfc@3.5.35)(vite@8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0))(vue@3.5.35(typescript@6.0.3)):
+    dependencies:
+      '@babel/generator': 8.0.0-rc.6
+      '@vue-macros/common': 3.1.2(vue@3.5.35(typescript@6.0.3))
+      '@vue/devtools-api': 8.1.2
+      ast-walker-scope: 0.9.0
+      chokidar: 5.0.0
+      json5: 2.2.3
+      local-pkg: 1.1.2
+      magic-string: 0.30.21
+      mlly: 1.8.2
+      muggle-string: 0.4.1
+      pathe: 2.0.3
+      picomatch: 4.0.4
+      scule: 1.3.0
+      tinyglobby: 0.2.17
+      unplugin: 3.0.0
+      unplugin-utils: 0.3.1
+      vue: 3.5.35(typescript@6.0.3)
+      yaml: 2.9.0
+    optionalDependencies:
+      '@vue/compiler-sfc': 3.5.35
+      vite: 8.0.16(@types/node@25.9.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.44.0)(yaml@2.9.0)
+
+  vue-tsc@3.2.6(typescript@6.0.3):
+    dependencies:
+      '@volar/typescript': 2.4.28
+      '@vue/language-core': 3.2.6
+      typescript: 6.0.3
+    optional: true
+
+  vue-tsc@3.3.4(typescript@6.0.3):
+    dependencies:
+      '@volar/typescript': 2.4.28
+      '@vue/language-core': 3.3.4
+      typescript: 6.0.3
+
+  vue@3.5.35(typescript@5.9.3):
+    dependencies:
+      '@vue/compiler-dom': 3.5.35
+      '@vue/compiler-sfc': 3.5.35
+      '@vue/runtime-dom': 3.5.35
+      '@vue/server-renderer': 3.5.35(vue@3.5.35(typescript@5.9.3))
+      '@vue/shared': 3.5.35
+    optionalDependencies:
+      typescript: 5.9.3
+
+  vue@3.5.35(typescript@6.0.3):
+    dependencies:
+      '@vue/compiler-dom': 3.5.35
+      '@vue/compiler-sfc': 3.5.35
+      '@vue/runtime-dom': 3.5.35
+      '@vue/server-renderer': 3.5.35(vue@3.5.35(typescript@6.0.3))
+      '@vue/shared': 3.5.35
+    optionalDependencies:
+      typescript: 6.0.3
 
   w3c-xmlserializer@5.0.0:
     dependencies:
@@ -9565,6 +17472,8 @@ snapshots:
 
   webidl-conversions@8.0.1: {}
 
+  webpack-virtual-modules@0.6.2: {}
+
   whatwg-mimetype@5.0.0: {}
 
   whatwg-url@16.0.1:
@@ -9580,14 +17489,6 @@ snapshots:
       tr46: 0.0.3
       webidl-conversions: 3.0.1
 
-  which-typed-array@1.1.15:
-    dependencies:
-      available-typed-arrays: 1.0.7
-      call-bind: 1.0.7
-      for-each: 0.3.3
-      gopd: 1.0.1
-      has-tostringtag: 1.0.2
-
   which@2.0.2:
     dependencies:
       isexe: 2.0.0
@@ -9595,13 +17496,21 @@ snapshots:
   which@6.0.1:
     dependencies:
       isexe: 4.0.0
-    optional: true
 
   why-is-node-running@2.3.0:
     dependencies:
       siginfo: 2.0.0
       stackback: 0.0.2
 
+  with@7.0.2:
+    dependencies:
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
+      assert-never: 1.4.0
+      babel-walk: 3.0.0-canary-5
+
+  word-wrap@1.2.5: {}
+
   wordwrap@1.0.0: {}
 
   wrap-ansi@7.0.0:
@@ -9616,6 +17525,12 @@ snapshots:
       string-width: 5.1.2
       strip-ansi: 7.1.0
 
+  wrap-ansi@9.0.2:
+    dependencies:
+      ansi-styles: 6.2.1
+      string-width: 7.2.0
+      strip-ansi: 7.1.0
+
   wrappy@1.0.2: {}
 
   write-file-atomic@3.0.3:
@@ -9635,37 +17550,79 @@ snapshots:
       js-yaml: 4.1.0
       write-file-atomic: 3.0.3
 
+  ws@8.20.0: {}
+
+  wsl-utils@0.1.0:
+    dependencies:
+      is-wsl: 3.1.1
+
+  wsl-utils@0.3.1:
+    dependencies:
+      is-wsl: 3.1.1
+      powershell-utils: 0.1.0
+
+  xml-name-validator@4.0.0: {}
+
   xml-name-validator@5.0.0: {}
 
+  xml-naming@0.1.0: {}
+
   xmlchars@2.2.0: {}
 
   xmldoc@2.0.3:
     dependencies:
-      sax: 1.4.4
+      sax: 1.6.0
 
   xtend@4.0.2: {}
 
+  y18n@5.0.8: {}
+
+  yallist@3.1.1: {}
+
   yallist@4.0.0: {}
 
-  yallist@5.0.0:
-    optional: true
+  yallist@5.0.0: {}
 
-  yaml@2.8.2: {}
+  yaml@2.9.0: {}
 
-  yargs-parser@18.1.3:
+  yargs-parser@22.0.0: {}
+
+  yargs@18.0.0:
     dependencies:
-      camelcase: 5.3.1
-      decamelize: 1.2.0
+      cliui: 9.0.1
+      escalade: 3.2.0
+      get-caller-file: 2.0.5
+      string-width: 7.2.0
+      y18n: 5.0.8
+      yargs-parser: 22.0.0
 
-  yargs-parser@20.2.9: {}
-
-  yauzl@2.10.0:
-    dependencies:
-      buffer-crc32: 0.2.13
-      fd-slicer: 1.1.0
+  yocto-queue@0.1.0: {}
 
   yocto-queue@1.2.1: {}
 
-  zod@3.25.76: {}
+  youch-core@0.3.3:
+    dependencies:
+      '@poppinss/exception': 1.2.3
+      error-stack-parser-es: 1.0.5
+
+  youch@4.1.1:
+    dependencies:
+      '@poppinss/colors': 4.1.6
+      '@poppinss/dumper': 0.7.0
+      '@speed-highlight/core': 1.2.15
+      cookie-es: 3.1.1
+      youch-core: 0.3.3
+
+  zip-stream@6.0.1:
+    dependencies:
+      archiver-utils: 5.0.2
+      compress-commons: 6.0.2
+      readable-stream: 4.7.0
+
+  zod-to-json-schema@3.25.2(zod@4.4.3):
+    dependencies:
+      zod: 4.4.3
+
+  zod@4.4.3: {}
 
   zwitch@2.0.4: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 1eed83b..5d6e3cb 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -2,16 +2,24 @@ packages:
   - configs/*
   - core/*
   - infra/*
-  - web/*
+  - vue/*
+  - vue/*/playground
   - docs
 
 catalog:
-  '@vitest/coverage-v8': ^4.0.18
-  '@vue/test-utils': ^2.4.6
-  jsdom: ^29.0.1
-  oxlint: ^1.2.0
-  tsdown: ^0.12.5
-  vitest: ^4.0.18
-  '@vitest/ui': ^4.0.18
-  vue: ^3.5.28
-  nuxt: ^4.3.1
+  '@stylistic/eslint-plugin': ^5.10.0
+  '@vitest/browser': ^4.1.8
+  '@vitest/coverage-v8': ^4.1.8
+  '@vitest/ui': ^4.1.8
+  '@vue/shared': ^3.5.35
+  '@vue/test-utils': ^2.4.11
+  eslint: ^10.4.1
+  jsdom: ^29.1.1
+  nuxt: ^4.4.7
+  tsdown: ^0.22.2
+  vitest: ^4.1.8
+  vue: ^3.5.35
+
+ignoredBuiltDependencies:
+  - '@parcel/watcher'
+  - esbuild
diff --git a/tools.code-workspace b/tools.code-workspace
index fbed2a5..e09a96f 100644
--- a/tools.code-workspace
+++ b/tools.code-workspace
@@ -16,7 +16,10 @@
 			"path": "infra/renovate"
 		},
 		{
-			"path": "web/vue"
+			"path": "vue/toolkit"
+		},
+		{
+			"path": "vue/primitives"
 		}
 	]
 }
\ No newline at end of file
diff --git a/vitest.config.ts b/vitest.config.ts
index e4c02f0..b03e97d 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -3,14 +3,17 @@ import { defineConfig } from 'vitest/config';
 export default defineConfig({
   test: {
     projects: [
-      'configs/oxlint/vitest.config.ts',
+      'configs/eslint/vitest.config.ts',
+      'core/fetch/vitest.config.ts',
       'core/stdlib/vitest.config.ts',
       'core/platform/vitest.config.ts',
-      'web/vue/vitest.config.ts',
+      'vue/toolkit/vitest.config.ts',
+      'vue/primitives/vitest.config.ts',
+      'docs/vitest.config.ts',
     ],
     coverage: {
       provider: 'v8',
-      include: ['core/*', 'web/*'],
+      include: ['core/*', 'vue/*'],
       exclude: ['**/node_modules/**', '**/dist/**'],
     },
   },
diff --git a/vue/editor/AGENTS.md b/vue/editor/AGENTS.md
new file mode 100644
index 0000000..cf3ebb6
--- /dev/null
+++ b/vue/editor/AGENTS.md
@@ -0,0 +1,73 @@
+# AGENTS.md — @robonen/editor
+
+Architecture and conventions for working in this package. Read this before editing.
+
+## What it is
+
+A headless block rich-text editor for Vue with a hand-built CRDT. **Do not reach for Yjs/Loro/Automerge** — collaboration is built on `@robonen/crdt` (sibling package in `core/crdt`).
+
+## Editing model: single contenteditable
+
+There is **one** `contenteditable` element — `EditorContent`. Blocks are plain child elements inside it; atom blocks (image, divider) are `contenteditable="false"` islands. We deliberately do **not** use per-block contenteditable: separate editing hosts make native cross-block mouse selection and arrow navigation impossible, which breaks the Word-like behavior we require.
+
+Consequence: cross-block selection and caret navigation are handled natively by the browser; the model only mirrors the DOM selection as `{ blockId, offset }`. The cross-block arrow *commands* were intentionally deleted — don't re-add them.
+
+## Layers (data flow is one-directional)
+
+```
+input/command → Transaction (steps) → dispatch → new EditorState → view reacts (+ CRDT)
+```
+
+All of these are **DOM-free and Vue-free** (typecheck/test under plain Node):
+
+- `model/` — pure data: `EditorDocument`, `Node`, `Inline` (marked **runs**: `InlineNode[]`), `Mark`, `Position`, `Selection`. Inline formatting is *marked runs*, not flat-text-plus-ranges; every `applyStep` calls `normalizeInline` to merge adjacent equal-marks runs.
+- `schema/` — `NodeSpec`/`MarkSpec`/`ContentKind` (3-variant union: text | container | atom), validation, normalization, `toDOM`/`parseDOM` descriptors.
+- `registry/` — SSOT. `defineBlock`/`defineMark` are identity factories; `createRegistry` builds an immutable registry that **projects** the `Schema`. Adding a block/mark = a module + a line in a barrel — zero core changes.
+- `state/` — `EditorState`, `Step` (atomic, invertible, serializable — the unit of undo **and** the CRDT contract), `Transaction` (fluent builder), `applyStep`/`applyTransaction`, `history`, `createEditor` (controller + `PubSub`).
+- `commands/` — `(state, dispatch?, view?) => boolean`. One implementation, three consumers (keymap, UI, programmatic). `dispatch` omitted = dry run.
+- `keymap/` — combo→command table, `Mod` normalization, one capture-phase keydown dispatcher on the root.
+
+Vue layer (only this knows about the DOM):
+
+- `view/` — `EditorRoot` (provider + keydown/selectionchange owner), `EditorContent` (THE contenteditable; owns beforeinput/input/composition), `BlockView` (resolves the block def; text → `TextBlockHost`, atom → the def's component), `TextBlockHost` (renders runs **imperatively** for caret stability), `inline-content/` (render/parse runs ↔ DOM), `selection/` (DOM ↔ model selection bridge), `ui/` (slash menu, bubble menu, remote cursors).
+- `blocks/` — concrete blocks (+ `.vue` for atoms). `marks/` — concrete marks (data-only `toDOM`/`parseDOM`).
+- `crdt/` — CRDT-agnostic `CrdtProvider` + `bindCrdt`; `native/` = the adapter over `@robonen/crdt`.
+- `preset.ts` — `createDefaultRegistry()` / `createBasicRegistry()`.
+
+## Caret stability (the #1 contenteditable risk)
+
+`TextBlockHost` is **not** Vue-managed inside: children are written imperatively. While the user types, the **DOM is the source of truth** — on `input` we parse the DOM → a transaction tagged `meta('origin', blockId)`. We repaint a block only for *foreign* changes (undo/redo, command, remote CRDT), never for the block that originated the edit. Guards: skip while `composing`, skip on self-origin, save/restore the model selection across a repaint in `nextTick`.
+
+When touching the view, preserve: `:key="block.id"`, the imperative inner render, and the origin/composing guards.
+
+## CRDT mapping (`crdt/native/document-crdt.ts`)
+
+`DocumentCrdt` maps the editor's **offset-based** steps ↔ **id-based** CRDT ops, and materializes an `EditorDocument`:
+
+- Block list → fractional-indexed set: each block has `LwwRegister`s for `present`/`posKey`/`type`/`attrs` + an `Rga<string>` (text) + a `MarkStore`. `moveBlock` = change `posKey` (cheap).
+- Text → `Rga` (one node per **UTF-16 code unit** — must match the editor's offset space; do not iterate code points).
+- Marks → `MarkStore` (Peritext-ish spans anchored to char ids, LWW per char/type).
+
+Invariants that have already bitten us — keep them:
+
+- Block removal only sets `present=false`; the RGA chars stay. So **re-inserting an existing (tombstoned) block must reactivate it, not re-add content** (else it duplicates). `insertBlock`/`splitBlock` of an existing id take the reactivate path.
+- `applyOp` returns `false` when a causal dependency is missing (block absent, RGA origin/char absent) so the `Replica` buffers and retries. `text-delete` must propagate `integrateDelete`'s result — don't hard-return `true`.
+- Remote application flows through a single `setDoc` step (`REMOTE_ORIGIN`, `addToHistory:false`). `bindCrdt` never echoes a remote-origin transaction back into the provider. It runs `reconcileDoc` first (`crdt/reconcile.ts`) so unchanged blocks keep their node identity — only touched blocks repaint, and untouched carets are undisturbed. Preserve that deep-equal reuse.
+- Tombstone GC (`Rga.gc` / `DocumentCrdt.gc` / `provider.gc()`) is safe **only at quiescence** (all peers synced, nothing in flight) — there's no stability protocol. It must keep mark-span endpoint chars (pass them via the `keep` predicate) or formatting on live chars between them is lost.
+
+When changing the adapter, add/extend a two-replica convergence test in `crdt/__test__/convergence.test.ts` (dispatch → sync → assert documents equal, no duplication).
+
+## Conventions
+
+- TS strict, `noUncheckedIndexedAccess`, `verbatimModuleSyntax`. Use `!`/guards on indexed access.
+- ESLint (`compose(base, typescript, vue, imports, stylistic, …)`). `sort-imports` warnings are tolerated; **errors must be zero**. Run `pnpm --filter @robonen/editor lint:fix`.
+  - Gotcha: the `prefer-includes` autofix once rewrote a private `indexOf` method into `this.includes(...)` (broken). If you have an array-like helper, avoid naming it `indexOf`.
+- Build: `tsdown` (`tsconfig: ./tsconfig.src.json`), dual ESM/CJS + dts, subpath entries (`./crdt`, `./blocks`, …).
+- Tests: vitest, two projects — `logic` (jsdom: model/schema/state/commands/crdt) and `view` (Playwright chromium: real contenteditable). **Chromium can't launch in the sandbox** — write a jsdom proof when possible; browser tests run locally.
+- `Primitive`/`Slot`/`getRawChildren` and `useContextFactory`/`useEventListener` are **copied locally** under `view/` (we don't depend on `@robonen/vue`, whose dts build is currently broken).
+
+## Milestones
+
+M1 core + single-CE pivot · M2 rich blocks/marks · M2-UI slash/bubble/input-rules/drag · M3 own CRDT (`core/crdt` + native provider + awareness + collab demo) · M4 a11y + docs + CRDT optimizations (per-block patching, tombstone GC) — all done. Remaining: the Playwright `view` tests run locally only (chromium can't launch in the sandbox); run-length compression is still deferred.
+
+The full plan lives at `~/.claude/plans/vue-memoized-torvalds.md`.
diff --git a/vue/editor/README.md b/vue/editor/README.md
new file mode 100644
index 0000000..edbb328
--- /dev/null
+++ b/vue/editor/README.md
@@ -0,0 +1,143 @@
+# @robonen/editor
+
+A headless, block-based rich-text editor for Vue 3 — in the spirit of Tiptap / ProseMirror / Editor.js, but with a **hand-built CRDT** for collaboration (no Yjs/Loro/Automerge).
+
+- **Block registry + schema** — blocks and inline marks are modular, registered through a registry that projects an immutable schema.
+- **Single contenteditable** — one editable surface (ProseMirror/Tiptap model), so native cross-block mouse selection and arrow navigation behave like a normal document.
+- **Framework-agnostic core** — the model, schema, registry, state, commands and keymap are DOM-free and Vue-free; the Vue layer is only rendering + input.
+- **Step-based transactions** with exact inverses → real undo/redo, and the same steps drive the CRDT.
+- **Own CRDT** (`@robonen/crdt`) behind a pluggable `CrdtProvider` — RGA text, fractional-indexed blocks, Peritext-style marks, version-vector sync, presence/cursors.
+
+> Status: v0 / work in progress. Logic is covered by unit + convergence tests; the contenteditable/Playwright tests run locally (not in CI sandboxes).
+
+## Install
+
+```bash
+pnpm add @robonen/editor @robonen/crdt vue
+```
+
+## Quick start
+
+```vue
+<script setup lang="ts">
+import { createDefaultRegistry, createEditor, createEditorState, EditorRoot } from '@robonen/editor';
+
+const registry = createDefaultRegistry();
+const editor = createEditor({ state: createEditorState({ registry }) });
+</script>
+
+<template>
+  <EditorRoot :editor="editor" autofocus class="editor" />
+</template>
+```
+
+`EditorRoot`'s default slot renders `EditorContent` (the single contenteditable). Provide your own slot to add UI around it:
+
+```vue
+<EditorRoot :editor="editor" autofocus>
+  <EditorContent />
+  <EditorBubbleMenu />   <!-- formatting toolbar on selection -->
+  <EditorSlashMenu />    <!-- `/` to insert blocks -->
+</EditorRoot>
+```
+
+The package is **headless**: it ships behavior and DOM structure (`data-block-*`, `data-editor-*` hooks), not styling. See `playground/src/App.vue` for a complete stylesheet.
+
+## Blocks & marks
+
+Built-in blocks (via `createDefaultRegistry()`): `paragraph`, `heading` (1–6), `bulleted-list` / `numbered-list` / `todo-list` (flat-with-indent), `blockquote`, `code-block`, `callout`, `divider`, `image`. Built-in marks: `bold`, `italic`, `underline`, `strike`, `highlight`, `code`, `link`.
+
+Add your own — no core changes needed:
+
+```ts
+import { createRegistry, defineBlock, defineMark, defaultBlocks, defaultMarks } from '@robonen/editor';
+
+const spoiler = defineMark({
+  type: 'spoiler',
+  spec: { toDOM: () => ['span', { 'data-spoiler': '' }, 0], parseDOM: [{ tag: 'span[data-spoiler]' }] },
+});
+
+const registry = createRegistry({ blocks: defaultBlocks, marks: [...defaultMarks, spoiler] });
+```
+
+## Editing UX
+
+- **Slash menu** — `EditorSlashMenu`: type `/` at the start of a line; items come from each block's `meta`.
+- **Bubble toolbar** — `EditorBubbleMenu`: floats over a text selection (positioned with `@floating-ui/vue`); override the buttons via its default slot (`#default="{ active, toggle }"`).
+- **Markdown input rules** — `# `→heading, `- `/`* `→bulleted list, `1. `→numbered list, `> `→quote, `[] `→to-do.
+- **Drag to reorder** — pass `draggable` to `EditorRoot` for per-block drag handles.
+- **Hotkeys** — `Mod-b/i/u`, `Mod-Shift-s` (strike), `Mod-e` (code), `Mod-z` / `Mod-Shift-z`, `Enter` (split), `Shift-Enter` (hard break), `Backspace`/`Delete` at edges (merge), `Mod-a` (progressive select), `Mod-Alt-1..6` (heading), `Tab`/`Shift-Tab` (list indent).
+
+## Commands
+
+Commands are `(state, dispatch?, view?) => boolean` and power the keymap, UI, and programmatic edits:
+
+```ts
+import { toggleMark, setBlockType } from '@robonen/editor';
+
+editor.command(toggleMark('bold'));
+editor.command(setBlockType('heading', { level: 2 }));
+```
+
+Called without `dispatch` they are a dry run (for disabled/active toolbar state).
+
+## Collaboration (own CRDT)
+
+The editor is CRDT-agnostic behind `CrdtProvider`. The built-in provider maps editor steps to CRDT ops (blocks → fractional-indexed set, text → RGA, formatting → mark store) and syncs op batches over any transport.
+
+```ts
+import { bindCrdt, createNativeProvider } from '@robonen/editor';
+
+// First peer seeds the document.
+const provider = createNativeProvider({ schema: registry.schema, doc: editor.state.doc, user: { name: 'Alice', color: '#2563eb' } });
+const binding = bindCrdt(editor, provider);
+
+// Wire a transport (BroadcastChannel / WebSocket / …):
+provider.onLocalOps(bytes => channel.postMessage(bytes));
+channel.onmessage = e => provider.applyUpdate(e.data);
+
+// A joining peer starts empty and syncs:
+//   const provider = createNativeProvider({ schema });
+//   provider.applyUpdate(remoteFullState);   // = peerA.encodeDelta()
+```
+
+Presence/cursors travel on a separate ephemeral channel and render with `EditorRemoteCursors`:
+
+```ts
+provider.onLocalAwareness(bytes => channel.postMessage(bytes));
+const cursors = ref([]);
+provider.onAwareness(next => cursors.value = next);
+```
+
+```vue
+<EditorRoot :editor="editor">
+  <EditorContent />
+  <EditorRemoteCursors :cursors="cursors" />
+</EditorRoot>
+```
+
+See the **Collaboration** demo in the playground for a full two-replica example.
+
+Applying a remote change is **per-block**: `bindCrdt` reuses the node identity of every block a remote edit didn't touch, so only changed blocks repaint and the local caret in untouched blocks is undisturbed.
+
+For long-lived sessions, compact tombstones once the replicas are quiesced and fully synced:
+
+```ts
+provider.gc(); // drops deleted characters / removed blocks safe to forget
+```
+
+### Known limitations (documented, deferred)
+
+- A local caret does not auto-shift when a remote peer inserts text *before* it (the caret keeps its offset).
+- Concurrent split/merge of the exact same range can drop a mark recreated on the moved tail.
+- `gc()` is only safe at quiescence (no in-flight ops) — it has no built-in stability protocol; drive it from your sync layer.
+
+## Development
+
+```bash
+pnpm --filter @robonen/editor test          # logic (jsdom) + CRDT convergence
+pnpm --filter @robonen/editor build         # tsdown (ESM + CJS + dts)
+pnpm --filter @robonen/editor-playground dev
+```
+
+See [AGENTS.md](./AGENTS.md) for the architecture and contributor notes.
diff --git a/vue/editor/docs/intro.vue b/vue/editor/docs/intro.vue
new file mode 100644
index 0000000..df98678
--- /dev/null
+++ b/vue/editor/docs/intro.vue
@@ -0,0 +1,174 @@
+<script setup lang="ts">
+const quickStart = `<script setup lang="ts">
+import { createDefaultRegistry, createEditor, createEditorState, EditorRoot } from '@robonen/editor';
+
+const registry = createDefaultRegistry();
+const editor = createEditor({ state: createEditorState({ registry }) });
+<\/script>
+
+<template>
+  <EditorRoot :editor="editor" autofocus class="editor" />
+<\/template>`;
+
+const composeSlots = `<EditorRoot :editor="editor" autofocus>
+  <EditorContent />
+  <EditorBubbleMenu />  <!-- formatting toolbar on selection -->
+  <EditorSlashMenu />   <!-- type \`/\` to insert blocks -->
+</EditorRoot>`;
+
+const commands = `import { setBlockType, toggleMark } from '@robonen/editor';
+
+editor.command(toggleMark('bold'));
+editor.command(setBlockType('heading', { level: 2 }));
+
+// Called without a dispatch they run dry — perfect for
+// computing disabled / active toolbar state.
+const canBold = editor.command(toggleMark('bold'));`;
+</script>
+
+<template>
+  <div class="docs-section">
+    <div class="prose-docs">
+      <h1>@robonen/editor</h1>
+      <p>
+        A <strong>headless, block-based rich-text editor for Vue 3</strong> — in the spirit of
+        Tiptap / ProseMirror / Editor.js, but with a registry-driven schema and a
+        <strong>hand-built CRDT</strong> for collaboration (no Yjs / Loro / Automerge).
+      </p>
+    </div>
+
+    <div class="prose-docs">
+      <p>
+        Most editors force a trade: the structured, block-first authoring of Editor.js, or the
+        document fidelity of ProseMirror where native cross-block selection and arrow navigation
+        just work. <code>@robonen/editor</code> takes the ProseMirror route — a single
+        <code>contenteditable</code> surface — and layers a modular block registry on top, so blocks
+        and inline marks are added without touching the core. The model, schema, state, commands and
+        keymap are entirely DOM-free and Vue-free; the Vue layer only renders and handles input.
+        Every edit is a step-based transaction with an exact inverse, which gives you real undo/redo
+        and — because the same steps drive the CRDT — conflict-free collaboration for free.
+      </p>
+    </div>
+
+    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="mb-1.5 text-sm font-semibold text-(--fg)">Headless by design</h3>
+        <p class="text-sm leading-relaxed text-(--fg-muted)">
+          Ships behavior and DOM structure (<code class="text-(--accent-text)">data-block-*</code>
+          hooks), never styling. Bring your own CSS and own the look completely.
+        </p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="mb-1.5 text-sm font-semibold text-(--fg)">Registry-driven schema</h3>
+        <p class="text-sm leading-relaxed text-(--fg-muted)">
+          <code class="text-(--accent-text)">defineBlock</code> /
+          <code class="text-(--accent-text)">defineMark</code> register into an immutable schema —
+          add a custom block or mark with no core changes.
+        </p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="mb-1.5 text-sm font-semibold text-(--fg)">Step-based transactions</h3>
+        <p class="text-sm leading-relaxed text-(--fg-muted)">
+          Every edit is a step with an exact inverse, powering reliable undo/redo and a single source
+          of truth for both local edits and sync.
+        </p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="mb-1.5 text-sm font-semibold text-(--fg)">Own CRDT, pluggable</h3>
+        <p class="text-sm leading-relaxed text-(--fg-muted)">
+          RGA text, fractional-indexed blocks, Peritext-style marks and presence behind a
+          <code class="text-(--accent-text)">CrdtProvider</code> — over any transport.
+        </p>
+      </div>
+    </div>
+
+    <div class="prose-docs">
+      <h2>Install</h2>
+      <p>
+        The editor depends on <code>@robonen/crdt</code> for the built-in collaboration provider, and
+        on <code>vue</code> as a peer.
+      </p>
+    </div>
+    <DocsCode :code="`pnpm add @robonen/editor @robonen/crdt vue`" lang="bash" />
+
+    <div class="prose-docs">
+      <h2>Quick start</h2>
+      <p>
+        Create a registry, build an editor around its state, and mount <code>EditorRoot</code>. Its
+        default slot renders <code>EditorContent</code> (the single <code>contenteditable</code>), so
+        this is a fully working editor with all built-in blocks and marks.
+      </p>
+    </div>
+    <DocsCode :code="quickStart" lang="vue" />
+
+    <div class="prose-docs">
+      <p>
+        Provide your own slot to add UI around the editable surface — the bubble toolbar floats over a
+        selection, and the slash menu opens when you type <code>/</code> at the start of a line.
+      </p>
+    </div>
+    <DocsCode :code="composeSlots" lang="vue" />
+
+    <div class="prose-docs">
+      <h2>Commands</h2>
+      <p>
+        Commands are <code>(state, dispatch?, view?) =&gt; boolean</code> functions that power the
+        keymap, the UI, and programmatic edits. Run one with <code>editor.command(...)</code>; omit
+        the dispatch to dry-run it for active/disabled state.
+      </p>
+    </div>
+    <DocsCode :code="commands" lang="ts" />
+
+    <div class="prose-docs">
+      <h2>Built-in blocks &amp; marks</h2>
+      <p>
+        <code>createDefaultRegistry()</code> wires up a full set out of the box —
+        <strong>blocks:</strong> <code>paragraph</code>, <code>heading</code> (1–6),
+        <code>bulleted-list</code> / <code>numbered-list</code> / <code>todo-list</code>,
+        <code>blockquote</code>, <code>code-block</code>, <code>callout</code>, <code>divider</code>,
+        <code>image</code>; <strong>marks:</strong> <code>bold</code>, <code>italic</code>,
+        <code>underline</code>, <code>strike</code>, <code>highlight</code>, <code>code</code>,
+        <code>link</code>. Markdown input rules (<code># </code>, <code>- </code>, <code>1. </code>,
+        <code>&gt; </code>, <code>[] </code>) and hotkeys (<code>Mod-b/i/u</code>,
+        <code>Mod-z</code>, …) are included.
+      </p>
+    </div>
+
+    <div class="rounded-lg border border-amber-500/30 bg-amber-500/10 p-4">
+      <p class="text-sm leading-relaxed text-(--fg-muted)">
+        <strong class="text-amber-700 dark:text-amber-400">Status: v0, work in progress.</strong>
+        Core logic is covered by unit + convergence tests; the contenteditable / Playwright suite
+        runs locally. The collaboration layer has a few documented, deferred limitations.
+      </p>
+    </div>
+
+    <div class="prose-docs">
+      <h2>Where to next</h2>
+      <p>Jump into the pieces you'll reach for first:</p>
+      <ul>
+        <li>
+          <code>EditorRoot</code> and <code>EditorContent</code> — the mount
+          surface and the single contenteditable.
+        </li>
+        <li>
+          <NuxtLink to="/editor/create-default-registry"><code>createDefaultRegistry</code></NuxtLink>,
+          <NuxtLink to="/editor/define-block"><code>defineBlock</code></NuxtLink> and
+          <NuxtLink to="/editor/define-mark"><code>defineMark</code></NuxtLink> — extend the schema.
+        </li>
+        <li>
+          <NuxtLink to="/editor/toggle-mark"><code>toggleMark</code></NuxtLink> /
+          <NuxtLink to="/editor/set-block-type"><code>setBlockType</code></NuxtLink> — the commands
+          API for programmatic and toolbar edits.
+        </li>
+        <li>
+          <NuxtLink to="/editor/bind-crdt"><code>bindCrdt</code></NuxtLink> and
+          <NuxtLink to="/editor/create-native-provider"><code>createNativeProvider</code></NuxtLink>
+          — wire up real-time collaboration with the built-in CRDT.
+        </li>
+      </ul>
+      <p>
+        The full API reference for every export is listed right below.
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/vue/editor/eslint.config.ts b/vue/editor/eslint.config.ts
new file mode 100644
index 0000000..a80a3ee
--- /dev/null
+++ b/vue/editor/eslint.config.ts
@@ -0,0 +1,9 @@
+import { base, compose, imports, stylistic, typescript, vue } from '@robonen/eslint';
+
+export default compose(base, typescript, vue, imports, stylistic, {
+  name: 'editor/overrides',
+  files: ['**/*.vue'],
+  rules: {
+    '@stylistic/no-multiple-empty-lines': 'off',
+  },
+});
diff --git a/vue/editor/package.json b/vue/editor/package.json
new file mode 100644
index 0000000..e4d974a
--- /dev/null
+++ b/vue/editor/package.json
@@ -0,0 +1,83 @@
+{
+  "name": "@robonen/editor",
+  "version": "0.0.1",
+  "license": "Apache-2.0",
+  "description": "Headless block-based rich-text editor for Vue with a registry-driven schema and pluggable CRDT",
+  "keywords": [
+    "editor",
+    "rich-text",
+    "wysiwyg",
+    "block-editor",
+    "crdt",
+    "collaborative",
+    "vue",
+    "tools"
+  ],
+  "author": "Robonen Andrew <robonenandrew@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/robonen/tools.git",
+    "directory": "vue/editor"
+  },
+  "packageManager": "pnpm@10.33.2",
+  "engines": {
+    "node": ">=24.13.1"
+  },
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./*": {
+      "import": {
+        "types": "./dist/*/index.d.mts",
+        "default": "./dist/*/index.mjs"
+      },
+      "require": {
+        "types": "./dist/*/index.d.cts",
+        "default": "./dist/*/index.cjs"
+      }
+    }
+  },
+  "scripts": {
+    "lint:check": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "test": "vitest run",
+    "bench": "vitest bench",
+    "dev": "vitest dev",
+    "build": "tsdown"
+  },
+  "devDependencies": {
+    "@robonen/eslint": "workspace:*",
+    "@robonen/tsconfig": "workspace:*",
+    "@robonen/tsdown": "workspace:*",
+    "@vitest/browser": "catalog:",
+    "@vitest/browser-playwright": "^4.1.8",
+    "@vue/test-utils": "catalog:",
+    "eslint": "catalog:",
+    "jsdom": "catalog:",
+    "playwright": "^1.60.0",
+    "tsdown": "catalog:",
+    "unplugin-vue": "^7.2.0",
+    "vitest-browser-vue": "^2.1.0",
+    "vue-tsc": "^3.3.4"
+  },
+  "dependencies": {
+    "@floating-ui/vue": "^1.1.11",
+    "@robonen/crdt": "workspace:*",
+    "@robonen/platform": "workspace:*",
+    "@robonen/stdlib": "workspace:*",
+    "@vue/shared": "catalog:",
+    "vue": "catalog:"
+  }
+}
diff --git a/vue/editor/playground/index.html b/vue/editor/playground/index.html
new file mode 100644
index 0000000..6593fd6
--- /dev/null
+++ b/vue/editor/playground/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@robonen/editor playground</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/vue/editor/playground/package.json b/vue/editor/playground/package.json
new file mode 100644
index 0000000..2693eae
--- /dev/null
+++ b/vue/editor/playground/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@robonen/editor-playground",
+  "version": "0.0.0",
+  "private": true,
+  "license": "Apache-2.0",
+  "description": "Minimal playground for @robonen/editor — eyeball, debug, hack on hypotheses",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@robonen/editor": "workspace:*",
+    "vue": "catalog:"
+  },
+  "devDependencies": {
+    "@robonen/tsconfig": "workspace:*",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "vite": "^8.0.16",
+    "vue-tsc": "^3.3.4"
+  }
+}
diff --git a/vue/editor/playground/src/App.vue b/vue/editor/playground/src/App.vue
new file mode 100644
index 0000000..7a92b52
--- /dev/null
+++ b/vue/editor/playground/src/App.vue
@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue';
+import CollabDemo from './demos/CollabDemo.vue';
+import CommandsDemo from './demos/CommandsDemo.vue';
+import ComplexBlocksDemo from './demos/ComplexBlocksDemo.vue';
+import CustomKeymapDemo from './demos/CustomKeymapDemo.vue';
+import ManyBlocksDemo from './demos/ManyBlocksDemo.vue';
+import MarksDemo from './demos/MarksDemo.vue';
+import MultiEditorDemo from './demos/MultiEditorDemo.vue';
+import ReadOnlyDemo from './demos/ReadOnlyDemo.vue';
+import RichTextDemo from './demos/RichTextDemo.vue';
+
+const demos = [
+  { id: 'rich', title: 'Rich text', component: RichTextDemo },
+  { id: 'complex', title: 'Complex blocks', component: ComplexBlocksDemo },
+  { id: 'collab', title: 'Collaboration', component: CollabDemo },
+  { id: 'marks', title: 'Inline marks', component: MarksDemo },
+  { id: 'many', title: 'Many blocks', component: ManyBlocksDemo },
+  { id: 'multi', title: 'Multiple editors', component: MultiEditorDemo },
+  { id: 'readonly', title: 'Read-only', component: ReadOnlyDemo },
+  { id: 'commands', title: 'Commands API', component: CommandsDemo },
+  { id: 'keymap', title: 'Custom keymap', component: CustomKeymapDemo },
+];
+
+const current = shallowRef(demos[0]!);
+</script>
+
+<template>
+  <div class="layout">
+    <nav class="sidebar">
+      <h1>@robonen/editor</h1>
+      <button
+        v-for="demo in demos"
+        :key="demo.id"
+        :class="{ active: demo.id === current.id }"
+        @click="current = demo"
+      >
+        {{ demo.title }}
+      </button>
+    </nav>
+    <main class="content">
+      <component :is="current.component" :key="current.id" />
+    </main>
+  </div>
+</template>
+
+<style>
+:root { color-scheme: light; }
+* { box-sizing: border-box; }
+body { margin: 0; font-family: system-ui, -apple-system, sans-serif; color: #1a1a1a; background: #fafafa; }
+
+.layout { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
+.sidebar { border-right: 1px solid #e5e5e5; padding: 1rem; background: #fff; position: sticky; top: 0; height: 100vh; }
+.sidebar h1 { font-size: 14px; margin: 0 0 1rem; color: #666; }
+.sidebar button { display: block; width: 100%; text-align: left; padding: 8px 10px; margin-bottom: 2px; border: 0; background: transparent; border-radius: 6px; cursor: pointer; font-size: 14px; color: #333; }
+.sidebar button:hover { background: #f0f0f0; }
+.sidebar button.active { background: #1a1a1a; color: #fff; }
+
+.content { padding: 2rem; max-width: 880px; }
+.content section > h2 { margin: 0 0 0.25rem; }
+.hint { color: #888; font-size: 13px; margin: 0 0 1rem; }
+
+.toolbar { display: flex; gap: 4px; align-items: center; margin-bottom: 0.75rem; }
+.toolbar.wrap { flex-wrap: wrap; }
+.toolbar button { min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid #ddd; background: #fff; border-radius: 6px; cursor: pointer; font-size: 13px; }
+.toolbar button:hover { border-color: #bbb; }
+.toolbar button:disabled { opacity: 0.4; cursor: default; }
+.toolbar button[data-active] { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
+.toolbar .sep { width: 1px; height: 20px; background: #ddd; margin: 0 4px; }
+
+.editor { border: 1px solid #e5e5e5; border-radius: 8px; padding: 1rem 1.25rem; min-height: 120px; background: #fff; }
+.editor:focus-within { border-color: #999; }
+.editor.scroll { max-height: 420px; overflow: auto; }
+.editor [data-block-content] { outline: none; margin: 0.4em 0; line-height: 1.6; }
+.editor [data-block-content]:is(h1, h2, h3, h4, h5, h6) { margin: 0.6em 0 0.3em; line-height: 1.3; }
+.editor [data-block-type='heading'] [data-block-content] { font-weight: 700; }
+.editor [data-block-content][data-empty]::before { content: attr(data-placeholder); color: #bbb; pointer-events: none; }
+.editor [data-block-content] strong { font-weight: 700; }
+.editor [data-block-content] em { font-style: italic; }
+.editor ::selection { background: #b3d4fc; }
+
+.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
+
+details { margin-top: 1rem; }
+summary { cursor: pointer; color: #666; font-size: 13px; }
+details pre { background: #f6f6f6; padding: 1rem; border-radius: 8px; overflow: auto; font-size: 12px; max-height: 300px; }
+
+/* inline marks */
+.editor [data-block-content] mark { background: #fde68a; border-radius: 2px; }
+.editor [data-block-content] code { background: #eef0f2; padding: 0.1em 0.35em; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }
+.editor [data-block-content] a { color: #2563eb; text-decoration: underline; cursor: pointer; }
+
+/* blockquote */
+.editor blockquote[data-block-content] { border-left: 3px solid #ddd; padding-left: 1rem; color: #555; font-style: italic; }
+
+/* code block */
+.editor pre[data-block-content] { background: #f6f8fa; border: 1px solid #eaecef; border-radius: 6px; padding: 0.75rem 1rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; white-space: pre-wrap; }
+
+/* callout */
+.editor [data-callout] { position: relative; border-radius: 8px; margin: 0.5em 0; padding: 0.6rem 0.8rem 0.6rem 2.4rem; }
+.editor [data-callout]::before { position: absolute; left: 0.8rem; }
+.editor [data-callout='info'] { background: #eef4ff; } .editor [data-callout='info']::before { content: 'ℹ️'; }
+.editor [data-callout='warn'] { background: #fff6e6; } .editor [data-callout='warn']::before { content: '⚠️'; }
+.editor [data-callout='success'] { background: #ecfdf3; } .editor [data-callout='success']::before { content: '✅'; }
+
+/* lists (flat-with-indent; marker in the gutter, indent via inline margin-left) */
+.editor { counter-reset: editor-ol; }
+.editor [data-list] { position: relative; }
+.editor [data-list]::before { position: absolute; left: 0.1em; color: #555; }
+.editor [data-list='bullet']::before { content: '•'; }
+.editor [data-list='ordered'] { counter-increment: editor-ol; }
+.editor [data-list='ordered']::before { content: counter(editor-ol) '.'; }
+.editor [data-list='todo']::before { content: '☐'; }
+.editor [data-list='todo'][data-checked='true']::before { content: '☑'; }
+.editor [data-list='todo'][data-checked='true'] { color: #999; text-decoration: line-through; }
+
+/* atoms: image + divider */
+.editor [data-editor-image] { margin: 0.8em 0; text-align: center; }
+.editor [data-editor-image] img { max-width: 100%; border-radius: 8px; }
+.editor [data-editor-image] figcaption { color: #888; font-size: 13px; margin-top: 4px; }
+.editor [data-editor-image] .image-placeholder { background: #f3f3f3; border: 1px dashed #ccc; border-radius: 8px; padding: 1.5rem; color: #999; }
+.editor [data-editor-image] .image-fields { display: flex; flex-direction: column; gap: 4px; margin: 6px auto 0; max-width: 360px; }
+.editor [data-editor-image] .image-fields input { padding: 4px 8px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; }
+.editor [data-editor-divider] { border: 0; border-top: 2px solid #e5e5e5; margin: 1em 0; }
+
+/* node selection highlight */
+.editor [data-block-type='image'][data-selected], .editor [data-block-type='divider'][data-selected] { outline: 2px solid #2563eb; outline-offset: 2px; border-radius: 6px; }
+.editor [data-block-content][data-selected], .editor [data-block-id][data-selected]:not([data-block-type='image']):not([data-block-type='divider']) { background: rgba(37, 99, 235, 0.08); border-radius: 4px; }
+
+/* floating menus (teleported to body) */
+.editor-bubble-menu { display: flex; gap: 2px; background: #1a1a1a; border-radius: 8px; padding: 4px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); z-index: 50; }
+.editor-bubble-menu button { min-width: 30px; height: 28px; padding: 0 8px; border: 0; background: transparent; color: #fff; border-radius: 5px; cursor: pointer; font-size: 13px; text-transform: capitalize; }
+.editor-bubble-menu button:hover { background: rgba(255, 255, 255, 0.15); }
+.editor-bubble-menu button[data-active] { background: #fff; color: #1a1a1a; }
+
+.editor-slash-menu { background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; padding: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); width: 230px; max-height: 280px; overflow: auto; z-index: 50; }
+.editor-slash-menu button { display: flex; justify-content: space-between; align-items: baseline; width: 100%; text-align: left; border: 0; background: transparent; padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; color: #333; }
+.editor-slash-menu button[data-highlighted] { background: #f0f0f0; }
+.editor-slash-menu .slash-group { font-size: 11px; color: #aaa; text-transform: capitalize; }
+
+kbd { background: #eee; border: 1px solid #ddd; border-radius: 4px; padding: 1px 5px; font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+
+/* drag-to-reorder handle */
+.editor [data-block-id] { position: relative; }
+.editor-drag-handle { position: absolute; left: -1.2em; top: 0.25em; cursor: grab; color: #ccc; user-select: none; opacity: 0; transition: opacity 0.1s; line-height: 1.4; }
+.editor [data-block-id]:hover > .editor-drag-handle { opacity: 1; }
+.editor-drag-handle:hover { color: #888; }
+.editor-drag-handle:active { cursor: grabbing; }
+
+/* remote collaboration cursors */
+.editor.collab { position: relative; }
+.editor-remote-cursors { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 4; }
+.editor-remote-selection { position: absolute; background: var(--cursor-color); opacity: 0.22; border-radius: 2px; }
+.editor-remote-caret { position: absolute; width: 2px; background: var(--cursor-color); }
+.editor-remote-caret-label { position: absolute; top: -1.05em; left: -1px; font-size: 10px; line-height: 1; white-space: nowrap; color: #fff; background: var(--cursor-color); padding: 1px 4px; border-radius: 3px 3px 3px 0; }
+</style>
diff --git a/vue/editor/playground/src/Toolbar.vue b/vue/editor/playground/src/Toolbar.vue
new file mode 100644
index 0000000..d6fe6df
--- /dev/null
+++ b/vue/editor/playground/src/Toolbar.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref } from 'vue';
+import type { Editor } from '@editor';
+import { isBlockActive, isMarkActive, setBlockType, toggleBlockType, toggleMark } from '@editor';
+
+const { editor } = defineProps<{ editor: Editor }>();
+
+// Re-evaluate active-states on every transaction.
+const rev = ref(0);
+const bump = (): void => void (rev.value += 1);
+editor.on('transaction', bump);
+onBeforeUnmount(() => editor.off('transaction', bump));
+
+const boldActive = computed(() => (rev.value, isMarkActive(editor.state, 'bold')));
+const italicActive = computed(() => (rev.value, isMarkActive(editor.state, 'italic')));
+const h1Active = computed(() => (rev.value, isBlockActive(editor.state, 'heading', { level: 1 })));
+const h2Active = computed(() => (rev.value, isBlockActive(editor.state, 'heading', { level: 2 })));
+const canUndo = computed(() => (rev.value, editor.canUndo()));
+const canRedo = computed(() => (rev.value, editor.canRedo()));
+</script>
+
+<template>
+  <div class="toolbar">
+    <button :data-active="boldActive || undefined" @mousedown.prevent="editor.command(toggleMark('bold'))"><b>B</b></button>
+    <button :data-active="italicActive || undefined" @mousedown.prevent="editor.command(toggleMark('italic'))"><i>I</i></button>
+    <span class="sep" />
+    <button :data-active="h1Active || undefined" @mousedown.prevent="editor.command(toggleBlockType('heading', { level: 1 }))">H1</button>
+    <button :data-active="h2Active || undefined" @mousedown.prevent="editor.command(toggleBlockType('heading', { level: 2 }))">H2</button>
+    <button @mousedown.prevent="editor.command(setBlockType('paragraph'))">P</button>
+    <span class="sep" />
+    <button :disabled="!canUndo" @mousedown.prevent="editor.undo()">Undo</button>
+    <button :disabled="!canRedo" @mousedown.prevent="editor.redo()">Redo</button>
+  </div>
+</template>
diff --git a/vue/editor/playground/src/demos/CollabDemo.vue b/vue/editor/playground/src/demos/CollabDemo.vue
new file mode 100644
index 0000000..d8b8a6e
--- /dev/null
+++ b/vue/editor/playground/src/demos/CollabDemo.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { onBeforeUnmount, ref } from 'vue';
+import type { RemoteCursor } from '@editor';
+import {
+  EditorBubbleMenu,
+  EditorContent,
+  EditorRemoteCursors,
+  EditorRoot,
+  EditorSlashMenu,
+  bindCrdt,
+  createDefaultRegistry,
+  createDoc,
+  createEditor,
+  createEditorState,
+  createNativeProvider,
+} from '@editor';
+import { h, p } from '../lib';
+
+const registry = createDefaultRegistry();
+const seed = createDoc([
+  h(1, 'Shared document'),
+  p('Edit in either pane — changes sync to the other through its own CRDT replica.'),
+  p(''),
+]);
+
+// Peer A owns the initial document.
+const editorA = createEditor({ state: createEditorState({ registry, doc: seed }) });
+const providerA = createNativeProvider({ schema: registry.schema, doc: editorA.state.doc, user: { name: 'Alice', color: '#2563eb' } });
+
+// Peer B starts empty and joins by syncing A's full state.
+const editorB = createEditor({ state: createEditorState({ registry }) });
+const providerB = createNativeProvider({ schema: registry.schema, user: { name: 'Bob', color: '#db2777' } });
+
+const bindingA = bindCrdt(editorA, providerA);
+const bindingB = bindCrdt(editorB, providerB);
+
+providerB.applyUpdate(providerA.encodeDelta());
+
+// Live two-way transport, in memory (stand-in for a BroadcastChannel/WebSocket).
+const offOpsA = providerA.onLocalOps(bytes => providerB.applyUpdate(bytes));
+const offOpsB = providerB.onLocalOps(bytes => providerA.applyUpdate(bytes));
+
+// Awareness (cursors) over the same in-memory channel.
+const cursorsA = ref<RemoteCursor[]>([]);
+const cursorsB = ref<RemoteCursor[]>([]);
+const offCurA = providerA.onAwareness((cursors) => {
+  cursorsA.value = cursors;
+});
+const offCurB = providerB.onAwareness((cursors) => {
+  cursorsB.value = cursors;
+});
+const offAwA = providerA.onLocalAwareness(bytes => providerB.applyAwareness(bytes));
+const offAwB = providerB.onLocalAwareness(bytes => providerA.applyAwareness(bytes));
+
+onBeforeUnmount(() => {
+  for (const off of [offOpsA, offOpsB, offCurA, offCurB, offAwA, offAwB])
+    off();
+  bindingA.detach();
+  bindingB.detach();
+});
+</script>
+
+<template>
+  <section>
+    <h2>Collaboration (own CRDT)</h2>
+    <p class="hint">Two independent editors, each backed by a separate <code>@robonen/crdt</code> replica, synced in memory. Type in either pane — concurrent edits converge live and you'll see the other peer's cursor; no Yjs.</p>
+    <div class="cols">
+      <div>
+        <div class="peer-label"><span class="peer-dot" style="background: #2563eb" />Alice</div>
+        <EditorRoot :editor="editorA" autofocus class="editor collab">
+          <EditorContent />
+          <EditorRemoteCursors :cursors="cursorsA" />
+          <EditorBubbleMenu />
+          <EditorSlashMenu />
+        </EditorRoot>
+      </div>
+      <div>
+        <div class="peer-label"><span class="peer-dot" style="background: #db2777" />Bob</div>
+        <EditorRoot :editor="editorB" class="editor collab">
+          <EditorContent />
+          <EditorRemoteCursors :cursors="cursorsB" />
+          <EditorBubbleMenu />
+          <EditorSlashMenu />
+        </EditorRoot>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.peer-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #888; margin-bottom: 4px; }
+.peer-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
+</style>
diff --git a/vue/editor/playground/src/demos/CommandsDemo.vue b/vue/editor/playground/src/demos/CommandsDemo.vue
new file mode 100644
index 0000000..6c7cc4a
--- /dev/null
+++ b/vue/editor/playground/src/demos/CommandsDemo.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import {
+  EditorRoot,
+  createNode,
+  createTransaction,
+  moveBlockDown,
+  moveBlockUp,
+  removeBlock,
+  setBlockType,
+  toggleMark,
+} from '@editor';
+import { h, makeEditor, p } from '../lib';
+
+const editor = makeEditor([
+  h(1, 'Commands API'),
+  p('Drive the editor programmatically with the buttons below. Put the caret in a block first.'),
+  p('Second block.'),
+  p('Third block.'),
+]);
+
+const rev = ref(0);
+editor.on('transaction', () => (rev.value += 1));
+const docJson = computed(() => (rev.value, JSON.stringify(editor.state.doc, null, 2)));
+const canDelete = computed(() => (rev.value, editor.state.doc.content.length > 1));
+
+function focusId(): string | undefined {
+  const sel = editor.state.selection;
+  return sel.kind === 'text' ? sel.focus.blockId : sel.ids[0];
+}
+
+function appendParagraph(): void {
+  const node = createNode('paragraph', { content: [{ text: 'Appended block', marks: [] }] });
+  editor.dispatch(createTransaction(editor.state).insertBlock(node, editor.state.doc.content.length));
+}
+
+function deleteFocused(): void {
+  const id = focusId();
+  if (id && editor.state.doc.content.length > 1)
+    editor.command(removeBlock(id));
+}
+</script>
+
+<template>
+  <section>
+    <h2>Commands API</h2>
+    <p class="hint">Programmatic control — every button is a command or transaction on the editor.</p>
+
+    <div class="toolbar wrap">
+      <button @mousedown.prevent="appendParagraph">Append paragraph</button>
+      <button @mousedown.prevent="editor.command(moveBlockUp)">Move block ↑</button>
+      <button @mousedown.prevent="editor.command(moveBlockDown)">Move block ↓</button>
+      <button @mousedown.prevent="editor.command(setBlockType('heading', { level: 1 }))">→ H1</button>
+      <button @mousedown.prevent="editor.command(setBlockType('paragraph'))">→ Paragraph</button>
+      <button @mousedown.prevent="editor.command(toggleMark('bold'))">Toggle bold</button>
+      <button :disabled="!canDelete" @mousedown.prevent="deleteFocused">Delete block</button>
+    </div>
+
+    <EditorRoot :editor="editor" class="editor" />
+    <details><summary>document JSON</summary><pre>{{ docJson }}</pre></details>
+  </section>
+</template>
diff --git a/vue/editor/playground/src/demos/ComplexBlocksDemo.vue b/vue/editor/playground/src/demos/ComplexBlocksDemo.vue
new file mode 100644
index 0000000..cb303f0
--- /dev/null
+++ b/vue/editor/playground/src/demos/ComplexBlocksDemo.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import type { Node } from '@editor';
+import {
+  EditorBubbleMenu,
+  EditorContent,
+  EditorRoot,
+  EditorSlashMenu,
+  addMark,
+  createTransaction,
+  nodeSelection,
+  setBlockType,
+  toggleChecked,
+  toggleMark,
+} from '@editor';
+import { bullet, callout, code, divider, h, image, makeEditor, numbered, p, quote, t, todo } from '../lib';
+
+const editor = makeEditor([
+  h(1, 'Complex blocks'),
+  p([t('A document with '), t('many', 'bold'), t(' block types. Put the caret in a block and use the controls to convert it, or insert media.')]),
+  quote('“The block is the unit of composition.” — a registry-driven editor.'),
+  callout('info', 'Callouts carry a variant attribute. This one is "info".'),
+  callout('warn', 'And this is a "warn" callout.'),
+  code('function hello() {\n  // Enter inserts a newline here, not a block split\n  return \'code block\';\n}'),
+  h(2, 'Lists'),
+  bullet('Bulleted item one'),
+  bullet('Nested bullet (indent = 1) — Tab / Shift+Tab changes indent', 1),
+  bullet('Bulleted item two'),
+  numbered('Numbered item (counter via CSS)'),
+  numbered('Numbered item'),
+  todo('A finished task', true),
+  todo('A pending task', false),
+  h(2, 'Media (atoms)'),
+  image('https://picsum.photos/seed/robonen/520/240', 'A random sample image'),
+  divider(),
+  p('Click an image or divider to select it, then Backspace/Delete removes it. Selecting an image reveals its URL / alt / caption fields.'),
+]);
+
+const rev = ref(0);
+editor.on('transaction', () => (rev.value += 1));
+const docJson = computed(() => (rev.value, JSON.stringify(editor.state.doc, null, 2)));
+
+function focusIndex(): number {
+  const sel = editor.state.selection;
+  const id = sel.kind === 'text' ? sel.focus.blockId : sel.ids[0];
+  const index = id ? editor.state.doc.content.findIndex(block => block.id === id) : -1;
+  return index === -1 ? editor.state.doc.content.length - 1 : index;
+}
+
+function insertAfterFocus(node: Node): void {
+  editor.dispatch(createTransaction(editor.state).insertBlock(node, focusIndex() + 1).setSelection(nodeSelection([node.id])));
+}
+
+function addLink(): void {
+  const href = globalThis.prompt('Link URL', 'https://');
+  if (href)
+    editor.command(addMark('link', { href }));
+}
+</script>
+
+<template>
+  <section>
+    <h2>Complex blocks</h2>
+    <p class="hint">Quote, callout, code block, lists (bulleted / numbered / to-do), image &amp; divider atoms, plus the full mark set. Everything is registry-driven.</p>
+
+    <div class="toolbar wrap">
+      <button @mousedown.prevent="editor.command(toggleMark('bold'))"><b>B</b></button>
+      <button @mousedown.prevent="editor.command(toggleMark('italic'))"><i>I</i></button>
+      <button @mousedown.prevent="editor.command(toggleMark('underline'))"><u>U</u></button>
+      <button @mousedown.prevent="editor.command(toggleMark('strike'))"><s>S</s></button>
+      <button @mousedown.prevent="editor.command(toggleMark('code'))">&lt;/&gt;</button>
+      <button @mousedown.prevent="editor.command(toggleMark('highlight'))">HL</button>
+      <button @mousedown.prevent="addLink">Link</button>
+      <span class="sep" />
+      <button @mousedown.prevent="editor.command(setBlockType('paragraph'))">P</button>
+      <button @mousedown.prevent="editor.command(setBlockType('heading', { level: 1 }))">H1</button>
+      <button @mousedown.prevent="editor.command(setBlockType('heading', { level: 2 }))">H2</button>
+      <button @mousedown.prevent="editor.command(setBlockType('blockquote'))">Quote</button>
+      <button @mousedown.prevent="editor.command(setBlockType('code-block'))">Code</button>
+      <button @mousedown.prevent="editor.command(setBlockType('callout', { variant: 'info' }))">Callout</button>
+      <span class="sep" />
+      <button @mousedown.prevent="editor.command(setBlockType('bulleted-list'))">• List</button>
+      <button @mousedown.prevent="editor.command(setBlockType('numbered-list'))">1. List</button>
+      <button @mousedown.prevent="editor.command(setBlockType('todo-list', { checked: false, indent: 0 }))">☐ Todo</button>
+      <button @mousedown.prevent="editor.command(toggleChecked)">Toggle ✓</button>
+      <span class="sep" />
+      <button @mousedown.prevent="insertAfterFocus(image('', ''))">+ Image</button>
+      <button @mousedown.prevent="insertAfterFocus(divider())">+ Divider</button>
+      <span class="sep" />
+      <button @mousedown.prevent="editor.undo()">Undo</button>
+      <button @mousedown.prevent="editor.redo()">Redo</button>
+    </div>
+
+    <p class="hint">Type <kbd>/</kbd> to insert a block; select text for the bubble toolbar; hover a block and drag the <span aria-hidden="true">⠿</span> handle to reorder. Markdown shortcuts work too: <kbd># </kbd>, <kbd>- </kbd>, <kbd>&gt; </kbd>, <kbd>1. </kbd>, <kbd>[] </kbd>.</p>
+    <EditorRoot :editor="editor" autofocus draggable class="editor">
+      <EditorContent />
+      <EditorBubbleMenu />
+      <EditorSlashMenu />
+    </EditorRoot>
+    <details><summary>document JSON</summary><pre>{{ docJson }}</pre></details>
+  </section>
+</template>
diff --git a/vue/editor/playground/src/demos/CustomKeymapDemo.vue b/vue/editor/playground/src/demos/CustomKeymapDemo.vue
new file mode 100644
index 0000000..8bd5bb4
--- /dev/null
+++ b/vue/editor/playground/src/demos/CustomKeymapDemo.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { EditorRoot, createNode, createTransaction } from '@editor';
+import type { Command, Keymap } from '@editor';
+import { makeEditor, p } from '../lib';
+import Toolbar from '../Toolbar.vue';
+
+const editor = makeEditor([
+  p('Press Cmd/Ctrl+Enter to insert an italic note below the current block.'),
+  p('The default keymap (Enter, Backspace, Cmd/Ctrl+B, …) still works — user keymaps merge over it.'),
+]);
+
+const insertNote: Command = (state, dispatch) => {
+  const sel = state.selection;
+  if (sel.kind !== 'text')
+    return false;
+
+  if (dispatch) {
+    const index = state.doc.content.findIndex(block => block.id === sel.focus.blockId);
+    const node = createNode('paragraph', { content: [{ text: '— note —', marks: [{ type: 'italic' }] }] });
+    dispatch(createTransaction(state).insertBlock(node, index + 1));
+  }
+
+  return true;
+};
+
+const keymaps: Keymap[] = [{ 'Mod-Enter': insertNote }];
+</script>
+
+<template>
+  <section>
+    <h2>Custom keymap</h2>
+    <p class="hint">A user keymap merged over the defaults: Cmd/Ctrl+Enter inserts a note.</p>
+    <Toolbar :editor="editor" />
+    <EditorRoot :editor="editor" :keymaps="keymaps" class="editor" />
+  </section>
+</template>
diff --git a/vue/editor/playground/src/demos/ManyBlocksDemo.vue b/vue/editor/playground/src/demos/ManyBlocksDemo.vue
new file mode 100644
index 0000000..9ed2771
--- /dev/null
+++ b/vue/editor/playground/src/demos/ManyBlocksDemo.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { Node } from '@editor';
+import { EditorRoot } from '@editor';
+import { h, makeEditor, p } from '../lib';
+import Toolbar from '../Toolbar.vue';
+
+const blocks: Node[] = [];
+for (let i = 1; i <= 60; i++) {
+  if (i % 10 === 1)
+    blocks.push(h(2, `Section ${Math.ceil(i / 10)}`));
+  else
+    blocks.push(p(`Block ${i}: the quick brown fox jumps over the lazy dog.`));
+}
+
+const editor = makeEditor(blocks);
+</script>
+
+<template>
+  <section>
+    <h2>Many blocks</h2>
+    <p class="hint">60 blocks — test cross-block drag over a long range, ↑/↓ navigation, and Cmd/Ctrl+A (once = current block, twice = whole document).</p>
+    <Toolbar :editor="editor" />
+    <EditorRoot :editor="editor" class="editor scroll" />
+  </section>
+</template>
diff --git a/vue/editor/playground/src/demos/MarksDemo.vue b/vue/editor/playground/src/demos/MarksDemo.vue
new file mode 100644
index 0000000..bc37bd1
--- /dev/null
+++ b/vue/editor/playground/src/demos/MarksDemo.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { EditorRoot } from '@editor';
+import { makeEditor, p, t } from '../lib';
+import Toolbar from '../Toolbar.vue';
+
+const editor = makeEditor([
+  p([t('Adjacent runs: '), t('bold', 'bold'), t(' '), t('italic', 'italic'), t(' '), t('bold+italic', 'bold', 'italic'), t(' plain.')]),
+  p([t('boldAtStart', 'bold'), t(' then plain then '), t('boldAtEnd', 'bold')]),
+  p('Select part of a word and toggle Cmd/Ctrl+B — the mark splits the run mid-word; toggle again to remove. With a collapsed caret, toggling sets the mark for the next typed character (stored marks).'),
+]);
+</script>
+
+<template>
+  <section>
+    <h2>Inline marks</h2>
+    <p class="hint">Adjacent / overlapping marks, marks at run boundaries, partial-word toggling, stored marks.</p>
+    <Toolbar :editor="editor" />
+    <EditorRoot :editor="editor" class="editor" />
+  </section>
+</template>
diff --git a/vue/editor/playground/src/demos/MultiEditorDemo.vue b/vue/editor/playground/src/demos/MultiEditorDemo.vue
new file mode 100644
index 0000000..6f955af
--- /dev/null
+++ b/vue/editor/playground/src/demos/MultiEditorDemo.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { EditorRoot } from '@editor';
+import { h, makeEditor, p } from '../lib';
+import Toolbar from '../Toolbar.vue';
+
+const left = makeEditor([h(2, 'Editor A'), p('Type and select here.')]);
+const right = makeEditor([h(2, 'Editor B'), p('This editor is fully independent.')]);
+</script>
+
+<template>
+  <section>
+    <h2>Multiple editors</h2>
+    <p class="hint">Two independent editors on one page — selection and editing in one must never affect the other.</p>
+    <div class="cols">
+      <div>
+        <Toolbar :editor="left" />
+        <EditorRoot :editor="left" class="editor" />
+      </div>
+      <div>
+        <Toolbar :editor="right" />
+        <EditorRoot :editor="right" class="editor" />
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/vue/editor/playground/src/demos/ReadOnlyDemo.vue b/vue/editor/playground/src/demos/ReadOnlyDemo.vue
new file mode 100644
index 0000000..f690608
--- /dev/null
+++ b/vue/editor/playground/src/demos/ReadOnlyDemo.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { EditorRoot } from '@editor';
+import { h, makeEditor, p, t } from '../lib';
+
+const editor = makeEditor([
+  h(2, 'Read-only'),
+  p([t('You can '), t('select', 'bold'), t(' and copy this text, but typing and shortcuts do nothing.')]),
+  p('Mouse selection and arrow navigation still work across blocks.'),
+]);
+</script>
+
+<template>
+  <section>
+    <h2>Read-only</h2>
+    <p class="hint">editable=false — selection/navigation work; edits and shortcuts are blocked.</p>
+    <EditorRoot :editor="editor" :editable="false" class="editor" />
+  </section>
+</template>
diff --git a/vue/editor/playground/src/demos/RichTextDemo.vue b/vue/editor/playground/src/demos/RichTextDemo.vue
new file mode 100644
index 0000000..9f1eb92
--- /dev/null
+++ b/vue/editor/playground/src/demos/RichTextDemo.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { EditorBubbleMenu, EditorContent, EditorRoot, EditorSlashMenu } from '@editor';
+import { h, makeEditor, p, t } from '../lib';
+import Toolbar from '../Toolbar.vue';
+
+const editor = makeEditor([
+  h(1, 'Welcome to the editor'),
+  p([t('This paragraph mixes '), t('bold', 'bold'), t(', '), t('italic', 'italic'), t(', and '), t('both at once', 'bold', 'italic'), t('.')]),
+  p('Drag with the mouse across these two paragraphs — the selection spans both, just like Word. Use ↑/↓ to move between blocks and Shift+↑/↓ to extend across them.'),
+  p(''),
+  h(2, 'Editing'),
+  p('Press Enter to split a block. Press Backspace at the very start of a block to merge it into the previous one. Cmd/Ctrl+Z undoes, Cmd/Ctrl+Shift+Z redoes.'),
+]);
+
+const rev = ref(0);
+editor.on('transaction', () => (rev.value += 1));
+const docJson = computed(() => (rev.value, JSON.stringify(editor.state.doc, null, 2)));
+</script>
+
+<template>
+  <section>
+    <h2>Rich text</h2>
+    <p class="hint">Mixed marks, headings, an empty block (placeholder), cross-block selection &amp; navigation.</p>
+    <Toolbar :editor="editor" />
+    <EditorRoot :editor="editor" autofocus class="editor">
+      <EditorContent />
+      <EditorBubbleMenu />
+      <EditorSlashMenu />
+    </EditorRoot>
+    <details><summary>document JSON</summary><pre>{{ docJson }}</pre></details>
+  </section>
+</template>
diff --git a/vue/editor/playground/src/env.d.ts b/vue/editor/playground/src/env.d.ts
new file mode 100644
index 0000000..71bd41b
--- /dev/null
+++ b/vue/editor/playground/src/env.d.ts
@@ -0,0 +1,9 @@
+export {};
+
+declare global {
+  const __DEV__: boolean;
+}
+
+declare module 'vue' {
+  type HTMLAttributes = Record<`data-${string}`, unknown>;
+}
diff --git a/vue/editor/playground/src/lib.ts b/vue/editor/playground/src/lib.ts
new file mode 100644
index 0000000..dbe8763
--- /dev/null
+++ b/vue/editor/playground/src/lib.ts
@@ -0,0 +1,39 @@
+import type { Editor, Inline, InlineNode, Node } from '@editor';
+import {
+  createDefaultRegistry,
+  createDoc,
+  createEditor,
+  createEditorState,
+  createNode,
+} from '@editor';
+
+/** A styled inline run: `t('hello', 'bold', 'italic')`. */
+export function t(text: string, ...markTypes: string[]): InlineNode {
+  return { text, marks: markTypes.map(type => ({ type })) };
+}
+
+/** A paragraph block from a string or inline runs. */
+export function p(content: string | Inline = ''): Node {
+  const inline = typeof content === 'string' ? (content ? [t(content)] : []) : content;
+  return createNode('paragraph', { content: inline });
+}
+
+/** A heading block. */
+export function h(level: number, text: string): Node {
+  return createNode('heading', { attrs: { level }, content: text ? [t(text)] : [] });
+}
+
+export const quote = (text: string): Node => createNode('blockquote', { content: text ? [t(text)] : [] });
+export const code = (text: string): Node => createNode('code-block', { content: text ? [t(text)] : [] });
+export const callout = (variant: string, text: string): Node => createNode('callout', { attrs: { variant }, content: [t(text)] });
+export const bullet = (text: string, indent = 0): Node => createNode('bulleted-list', { attrs: { indent }, content: [t(text)] });
+export const numbered = (text: string, indent = 0): Node => createNode('numbered-list', { attrs: { indent }, content: [t(text)] });
+export const todo = (text: string, checked = false): Node => createNode('todo-list', { attrs: { checked, indent: 0 }, content: [t(text)] });
+export const divider = (): Node => createNode('divider');
+export const image = (src: string, caption = ''): Node => createNode('image', { attrs: { src, alt: caption, caption } });
+
+/** Create an editor over the given blocks with the default registry. */
+export function makeEditor(content: Node[]): Editor {
+  const registry = createDefaultRegistry();
+  return createEditor({ state: createEditorState({ registry, doc: createDoc(content) }) });
+}
diff --git a/vue/editor/playground/src/main.ts b/vue/editor/playground/src/main.ts
new file mode 100644
index 0000000..684d042
--- /dev/null
+++ b/vue/editor/playground/src/main.ts
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+
+createApp(App).mount('#app');
diff --git a/vue/editor/playground/tsconfig.json b/vue/editor/playground/tsconfig.json
new file mode 100644
index 0000000..966ac28
--- /dev/null
+++ b/vue/editor/playground/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "@robonen/tsconfig/tsconfig.vue.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@editor": ["../src/index.ts"],
+      "@editor/*": ["../src/*"]
+    }
+  },
+  "include": ["src", "vite.config.ts"]
+}
diff --git a/vue/editor/playground/vite.config.ts b/vue/editor/playground/vite.config.ts
new file mode 100644
index 0000000..b3507e9
--- /dev/null
+++ b/vue/editor/playground/vite.config.ts
@@ -0,0 +1,28 @@
+import { URL, fileURLToPath } from 'node:url';
+import vue from '@vitejs/plugin-vue';
+import { defineConfig } from 'vite';
+
+export default defineConfig(({ mode }) => ({
+  plugins: [vue()],
+  define: {
+    __DEV__: JSON.stringify(mode !== 'production'),
+  },
+  resolve: {
+    alias: [
+      {
+        find: /^@editor\/(.*)$/,
+        replacement: fileURLToPath(new URL('../src/$1', import.meta.url)),
+      },
+      {
+        find: /^@editor$/,
+        replacement: fileURLToPath(new URL('../src/index.ts', import.meta.url)),
+      },
+    ],
+  },
+  server: {
+    port: 5181,
+    fs: {
+      allow: [fileURLToPath(new URL('../', import.meta.url))],
+    },
+  },
+}));
diff --git a/vue/editor/src/__test__/interactive.test.ts b/vue/editor/src/__test__/interactive.test.ts
new file mode 100644
index 0000000..83ca4b0
--- /dev/null
+++ b/vue/editor/src/__test__/interactive.test.ts
@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vitest';
+import { isInteractiveTarget } from '../view/interactive';
+
+describe('isInteractiveTarget', () => {
+  it('matches atom controls and contenteditable=false islands, not editor text', () => {
+    const root = document.createElement('div');
+    root.setAttribute('contenteditable', 'true');
+    root.innerHTML = '<p class="text">hi</p><figure contenteditable="false"><input class="cap"></figure>';
+    document.body.append(root);
+
+    expect(isInteractiveTarget(root.querySelector('input.cap'))).toBe(true);
+    expect(isInteractiveTarget(root.querySelector('figure'))).toBe(true);
+    expect(isInteractiveTarget(root.querySelector('p.text'))).toBe(false);
+    expect(isInteractiveTarget(root)).toBe(false);
+    expect(isInteractiveTarget(null)).toBe(false);
+
+    root.remove();
+  });
+});
diff --git a/vue/editor/src/__test__/selection-bridge.test.ts b/vue/editor/src/__test__/selection-bridge.test.ts
new file mode 100644
index 0000000..41620ca
--- /dev/null
+++ b/vue/editor/src/__test__/selection-bridge.test.ts
@@ -0,0 +1,61 @@
+import { describe, expect, it } from 'vitest';
+import { createBlockElementRegistry, createSelectionBridge } from '../view/selection';
+
+/**
+ * Builds the single-contenteditable DOM shape the view produces: one
+ * `[data-editor-content]` root containing plain `[data-block-content]` block
+ * elements. Runs in jsdom (logic project) to prove the cross-block selection
+ * mapping without a real browser.
+ */
+function buildDoc() {
+  const root = document.createElement('div');
+  root.setAttribute('data-editor-content', '');
+
+  const a = document.createElement('p');
+  a.setAttribute('data-block-content', '');
+  a.setAttribute('data-block-id', 'a');
+  a.textContent = 'hello';
+
+  const b = document.createElement('p');
+  b.setAttribute('data-block-content', '');
+  b.setAttribute('data-block-id', 'b');
+  b.textContent = 'world';
+
+  root.append(a, b);
+  document.body.replaceChildren(root);
+
+  const registry = createBlockElementRegistry();
+  registry.set('a', a);
+  registry.set('b', b);
+
+  return { root, a, b, registry };
+}
+
+describe('selection bridge (jsdom)', () => {
+  it('round-trips offset ↔ DOM point within a block', () => {
+    const { root, a, registry } = buildDoc();
+    const bridge = createSelectionBridge(() => root, registry);
+
+    const point = bridge.offsetToDomPoint(a, 3);
+    expect(bridge.domPointToOffset(a, point.node, point.offset)).toBe(3);
+  });
+
+  it('reads a cross-block native selection as a cross-block model range', () => {
+    const { root, a, b, registry } = buildDoc();
+    const bridge = createSelectionBridge(() => root, registry);
+
+    const sel = globalThis.getSelection!()!;
+    sel.removeAllRanges();
+    const range = document.createRange();
+    range.setStart(a.firstChild!, 1);
+    range.setEnd(b.firstChild!, 3);
+    sel.addRange(range);
+
+    const model = bridge.read();
+    expect(model?.kind).toBe('text');
+    if (model?.kind === 'text') {
+      expect(model.anchor).toEqual({ blockId: 'a', offset: 1 });
+      expect(model.focus).toEqual({ blockId: 'b', offset: 3 });
+    }
+  });
+});
diff --git a/vue/editor/src/__test__/slash-items.test.ts b/vue/editor/src/__test__/slash-items.test.ts
new file mode 100644
index 0000000..5970122
--- /dev/null
+++ b/vue/editor/src/__test__/slash-items.test.ts
@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vitest';
+import { createDefaultRegistry } from '../preset';
+import { getSlashItems } from '../view/ui';
+
+describe('getSlashItems', () => {
+  it('returns every block with meta when the query is empty', () => {
+    const items = getSlashItems(createDefaultRegistry());
+    const types = items.map(item => item.type);
+    expect(types).toContain('heading');
+    expect(types).toContain('image');
+    expect(items.length).toBeGreaterThan(5);
+  });
+
+  it('filters by title and keywords', () => {
+    const registry = createDefaultRegistry();
+    expect(getSlashItems(registry, 'quote').some(item => item.type === 'blockquote')).toBe(true);
+    expect(getSlashItems(registry, 'h1').some(item => item.type === 'heading')).toBe(true);
+    expect(getSlashItems(registry, 'zzzz')).toEqual([]);
+  });
+});
diff --git a/vue/editor/src/blocks/DividerBlock.vue b/vue/editor/src/blocks/DividerBlock.vue
new file mode 100644
index 0000000..c6d5352
--- /dev/null
+++ b/vue/editor/src/blocks/DividerBlock.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import type { BlockComponentProps } from '../registry';
+
+defineProps<BlockComponentProps>();
+</script>
+
+<template>
+  <hr data-editor-divider="" />
+</template>
diff --git a/vue/editor/src/blocks/ImageBlock.vue b/vue/editor/src/blocks/ImageBlock.vue
new file mode 100644
index 0000000..9c2aad3
--- /dev/null
+++ b/vue/editor/src/blocks/ImageBlock.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { BlockComponentProps } from '../registry';
+
+const props = defineProps<BlockComponentProps>();
+
+const src = computed(() => String(props.node.attrs['src'] ?? ''));
+const alt = computed(() => String(props.node.attrs['alt'] ?? ''));
+const caption = computed(() => String(props.node.attrs['caption'] ?? ''));
+const editing = computed(() => props.editable && props.selected);
+
+function set(key: string, event: Event): void {
+  props.update({ [key]: (event.target as HTMLInputElement).value });
+}
+</script>
+
+<template>
+  <figure data-editor-image="" :data-selected="selected ? '' : undefined">
+    <img v-if="src" :src="src" :alt="alt" draggable="false" />
+    <div v-else class="image-placeholder">No image — add a URL below</div>
+
+    <figcaption v-if="caption && !editing">{{ caption }}</figcaption>
+
+    <div v-if="editing" class="image-fields" contenteditable="false">
+      <input :value="src" placeholder="Image URL" @input="set('src', $event)" >
+      <input :value="alt" placeholder="Alt text" @input="set('alt', $event)" >
+      <input :value="caption" placeholder="Caption" @input="set('caption', $event)" >
+    </div>
+  </figure>
+</template>
diff --git a/vue/editor/src/blocks/__test__/blocks.test.ts b/vue/editor/src/blocks/__test__/blocks.test.ts
new file mode 100644
index 0000000..02cb27a
--- /dev/null
+++ b/vue/editor/src/blocks/__test__/blocks.test.ts
@@ -0,0 +1,104 @@
+import { describe, expect, it } from 'vitest';
+import { caret, createDoc, createNode, nodeInline, nodeText, textSelection } from '../../model';
+import { applyInputRule, joinBackward, splitBlock, toggleMark } from '../../commands';
+import { createDefaultRegistry } from '../../preset';
+import { createEditor, createEditorState } from '../../state';
+
+function editorWith(node: ReturnType<typeof createNode>, selection?: ReturnType<typeof caret>) {
+  const registry = createDefaultRegistry();
+  return createEditor({ state: createEditorState({ registry, doc: createDoc([node]), selection }) });
+}
+
+describe('default registry', () => {
+  it('registers the full block and mark set', () => {
+    const registry = createDefaultRegistry();
+    for (const type of ['paragraph', 'heading', 'blockquote', 'code-block', 'callout', 'bulleted-list', 'numbered-list', 'todo-list', 'divider', 'image'])
+      expect(registry.hasBlock(type)).toBe(true);
+    for (const mark of ['bold', 'italic', 'underline', 'strike', 'highlight', 'code', 'link'])
+      expect(registry.hasMark(mark)).toBe(true);
+  });
+
+  it('marks the list blocks as group "list" and gives to-do a checked attr', () => {
+    const registry = createDefaultRegistry();
+    expect(registry.getBlock('bulleted-list')?.spec.group).toBe('list');
+    expect(registry.getBlock('todo-list')?.spec.attrs?.['checked']).toBeDefined();
+  });
+
+  it('inline code mark excludes all others', () => {
+    expect(createDefaultRegistry().getMark('code')?.spec.excludes).toBe('_all');
+  });
+});
+
+describe('code block', () => {
+  it('Enter inserts a newline instead of splitting', () => {
+    const editor = editorWith(createNode('code-block', { id: 'c', content: [{ text: 'ab', marks: [] }] }), caret('c', 2));
+    expect(editor.command(splitBlock)).toBe(true);
+    expect(editor.state.doc.content.length).toBe(1);
+    expect(nodeText(editor.state.doc.content[0]!)).toBe('ab\n');
+  });
+
+  it('disallows inline marks', () => {
+    const editor = editorWith(
+      createNode('code-block', { id: 'c', content: [{ text: 'abc', marks: [] }] }),
+      textSelection({ blockId: 'c', offset: 0 }, { blockId: 'c', offset: 3 }),
+    );
+    expect(editor.command(toggleMark('bold'))).toBe(false);
+  });
+
+  it('does not absorb disallowed marks when another block merges into it', () => {
+    const registry = createDefaultRegistry();
+    const editor = createEditor({
+      state: createEditorState({
+        registry,
+        doc: createDoc([
+          createNode('code-block', { id: 'c', content: [{ text: 'x', marks: [] }] }),
+          createNode('paragraph', { id: 'p', content: [{ text: 'B', marks: [{ type: 'bold' }] }] }),
+        ]),
+        selection: caret('p', 0),
+      }),
+    });
+
+    expect(editor.command(joinBackward)).toBe(true);
+    const merged = editor.state.doc.content[0]!;
+    expect(merged.type).toBe('code-block');
+    expect(nodeText(merged)).toBe('xB');
+    expect(nodeInline(merged).every(run => run.marks.length === 0)).toBe(true);
+  });
+});
+
+describe('input rules', () => {
+  it('"# " converts a paragraph to a level-1 heading and strips the marker', () => {
+    const editor = editorWith(createNode('paragraph', { id: 'p', content: [{ text: '# ', marks: [] }] }), caret('p', 2));
+    expect(editor.command(applyInputRule)).toBe(true);
+    const block = editor.state.doc.content[0]!;
+    expect(block.type).toBe('heading');
+    expect(block.attrs['level']).toBe(1);
+    expect(nodeText(block)).toBe('');
+  });
+
+  it('"- " converts a paragraph to a bulleted list', () => {
+    const editor = editorWith(createNode('paragraph', { id: 'p', content: [{ text: '- ', marks: [] }] }), caret('p', 2));
+    expect(editor.command(applyInputRule)).toBe(true);
+    expect(editor.state.doc.content[0]!.type).toBe('bulleted-list');
+  });
+
+  it('does not re-fire when the block is already the target type', () => {
+    const editor = editorWith(createNode('blockquote', { id: 'q', content: [{ text: '> ', marks: [] }] }), caret('q', 2));
+    expect(editor.command(applyInputRule)).toBe(false);
+  });
+});
+
+describe('to-do list', () => {
+  it('starts a new item unchecked when splitting a checked one', () => {
+    const editor = editorWith(
+      createNode('todo-list', { id: 't', attrs: { checked: true, indent: 0 }, content: [{ text: 'done', marks: [] }] }),
+      caret('t', 4),
+    );
+
+    expect(editor.command(splitBlock)).toBe(true);
+    expect(editor.state.doc.content.length).toBe(2);
+    const created = editor.state.doc.content[1]!;
+    expect(created.type).toBe('todo-list');
+    expect(created.attrs['checked']).toBe(false);
+  });
+});
diff --git a/vue/editor/src/blocks/blockquote.ts b/vue/editor/src/blocks/blockquote.ts
new file mode 100644
index 0000000..c1e8df5
--- /dev/null
+++ b/vue/editor/src/blocks/blockquote.ts
@@ -0,0 +1,13 @@
+import { defineBlock } from '../registry';
+
+export const blockquote = defineBlock({
+  type: 'blockquote',
+  spec: {
+    content: { kind: 'text' },
+    group: 'block',
+    toDOM: () => ['blockquote', 0],
+    parseDOM: [{ tag: 'blockquote' }],
+  },
+  inputRules: [{ match: /^>\s$/ }],
+  meta: { title: 'Quote', icon: 'quote', keywords: ['quote', 'blockquote', 'citation'], group: 'basic' },
+});
diff --git a/vue/editor/src/blocks/callout.ts b/vue/editor/src/blocks/callout.ts
new file mode 100644
index 0000000..4fcdb59
--- /dev/null
+++ b/vue/editor/src/blocks/callout.ts
@@ -0,0 +1,17 @@
+import type { Node } from '../model';
+import { defineBlock } from '../registry';
+
+export const callout = defineBlock({
+  type: 'callout',
+  spec: {
+    content: { kind: 'text' },
+    group: 'block',
+    attrs: { variant: { default: 'info' } },
+    toDOM: (node: Node) => ['div', { 'data-callout': String(node.attrs['variant'] ?? 'info') }, 0],
+    parseDOM: [{
+      tag: 'div[data-callout]',
+      getAttrs: (el: HTMLElement) => ({ variant: el.getAttribute('data-callout') ?? 'info' }),
+    }],
+  },
+  meta: { title: 'Callout', icon: 'info', keywords: ['callout', 'note', 'info', 'warning'], group: 'basic' },
+});
diff --git a/vue/editor/src/blocks/code-block.ts b/vue/editor/src/blocks/code-block.ts
new file mode 100644
index 0000000..23ef279
--- /dev/null
+++ b/vue/editor/src/blocks/code-block.ts
@@ -0,0 +1,16 @@
+import type { Node } from '../model';
+import { defineBlock } from '../registry';
+
+export const codeBlock = defineBlock({
+  type: 'code-block',
+  spec: {
+    content: { kind: 'text', marks: 'none' }, // raw text, no inline formatting
+    group: 'block',
+    code: true, // Enter inserts a newline instead of splitting
+    defining: true,
+    attrs: { language: { default: 'plain' } },
+    toDOM: (node: Node) => ['pre', { 'data-language': String(node.attrs['language'] ?? 'plain') }, 0],
+    parseDOM: [{ tag: 'pre' }],
+  },
+  meta: { title: 'Code block', icon: 'code', keywords: ['code', 'pre', 'snippet'], group: 'basic' },
+});
diff --git a/vue/editor/src/blocks/divider.ts b/vue/editor/src/blocks/divider.ts
new file mode 100644
index 0000000..23cfd3c
--- /dev/null
+++ b/vue/editor/src/blocks/divider.ts
@@ -0,0 +1,14 @@
+import { defineBlock } from '../registry';
+import DividerBlock from './DividerBlock.vue';
+
+export const divider = defineBlock({
+  type: 'divider',
+  spec: {
+    content: { kind: 'atom' },
+    group: 'block',
+    toDOM: () => ['hr'],
+    parseDOM: [{ tag: 'hr' }],
+  },
+  component: DividerBlock,
+  meta: { title: 'Divider', icon: 'minus', keywords: ['divider', 'hr', 'rule', 'separator'], group: 'media' },
+});
diff --git a/vue/editor/src/blocks/heading.ts b/vue/editor/src/blocks/heading.ts
new file mode 100644
index 0000000..89bdeb1
--- /dev/null
+++ b/vue/editor/src/blocks/heading.ts
@@ -0,0 +1,18 @@
+import { defineBlock } from '../registry';
+
+const LEVELS = [1, 2, 3, 4, 5, 6] as const;
+
+export const heading = defineBlock({
+  type: 'heading',
+  spec: {
+    content: { kind: 'text' },
+    group: 'block',
+    attrs: {
+      level: { default: 1, validate: value => typeof value === 'number' && value >= 1 && value <= 6 },
+    },
+    toDOM: node => [`h${node.attrs['level'] ?? 1}`, 0],
+    parseDOM: LEVELS.map(level => ({ tag: `h${level}`, attrs: { level } })),
+  },
+  inputRules: LEVELS.map(level => ({ match: new RegExp(`^#{${level}}\\s$`), attrs: { level } })),
+  meta: { title: 'Heading', icon: 'heading', keywords: ['heading', 'title', 'h1', 'h2', 'h3'], group: 'basic' },
+});
diff --git a/vue/editor/src/blocks/image.ts b/vue/editor/src/blocks/image.ts
new file mode 100644
index 0000000..5d016d8
--- /dev/null
+++ b/vue/editor/src/blocks/image.ts
@@ -0,0 +1,27 @@
+import type { Node } from '../model';
+import { defineBlock } from '../registry';
+import ImageBlock from './ImageBlock.vue';
+
+export const image = defineBlock({
+  type: 'image',
+  spec: {
+    content: { kind: 'atom' },
+    group: 'block',
+    attrs: {
+      src: { default: '' },
+      alt: { default: '' },
+      caption: { default: '' },
+    },
+    toDOM: (node: Node) => [
+      'figure',
+      ['img', { src: String(node.attrs['src'] ?? ''), alt: String(node.attrs['alt'] ?? '') }],
+      ['figcaption', String(node.attrs['caption'] ?? '')],
+    ],
+    parseDOM: [{
+      tag: 'img',
+      getAttrs: (el: HTMLElement) => ({ src: el.getAttribute('src') ?? '', alt: el.getAttribute('alt') ?? '' }),
+    }],
+  },
+  component: ImageBlock,
+  meta: { title: 'Image', icon: 'image', keywords: ['image', 'img', 'picture', 'photo'], group: 'media' },
+});
diff --git a/vue/editor/src/blocks/index.ts b/vue/editor/src/blocks/index.ts
new file mode 100644
index 0000000..6afa4d5
--- /dev/null
+++ b/vue/editor/src/blocks/index.ts
@@ -0,0 +1,8 @@
+export { paragraph } from './paragraph';
+export { heading } from './heading';
+export { blockquote } from './blockquote';
+export { codeBlock } from './code-block';
+export { callout } from './callout';
+export { bulletedList, numberedList, todoList } from './list';
+export { divider } from './divider';
+export { image } from './image';
diff --git a/vue/editor/src/blocks/list.ts b/vue/editor/src/blocks/list.ts
new file mode 100644
index 0000000..6869924
--- /dev/null
+++ b/vue/editor/src/blocks/list.ts
@@ -0,0 +1,52 @@
+import type { Node } from '../model';
+import type { AttrsSpec } from '../schema';
+import { defineBlock } from '../registry';
+
+type ListType = 'bullet' | 'ordered' | 'todo';
+
+function indentOf(node: Node): number {
+  return typeof node.attrs['indent'] === 'number' ? node.attrs['indent'] : 0;
+}
+
+/**
+ * DRY factory for the three list variants. Lists are **flat-with-indent**: each
+ * item is its own top-level text block carrying an `indent` attribute (and
+ * `checked` for to-dos). Markers/numbering and indentation are presentation
+ * (CSS), so the model stays a simple flat block list that maps cleanly to a CRDT.
+ */
+function defineListBlock(options: { type: string; listType: ListType; title: string; keywords: readonly string[] }) {
+  const todo = options.listType === 'todo';
+
+  const attrs: AttrsSpec = {
+    indent: { default: 0 },
+    ...(todo ? { checked: { default: false } } : {}),
+  };
+
+  const inputRules = options.listType === 'bullet'
+    ? [{ match: /^[-*]\s$/ }]
+    : options.listType === 'ordered'
+      ? [{ match: /^\d+\.\s$/ }]
+      : [{ match: /^\[\s?\]\s$/ }];
+
+  return defineBlock({
+    type: options.type,
+    spec: {
+      content: { kind: 'text' },
+      group: 'list',
+      attrs,
+      toDOM: (node: Node) => ['div', {
+        'data-list': options.listType,
+        // margin shifts the item per indent level; padding leaves a gutter for the marker.
+        style: `margin-left:${indentOf(node) * 1.5}em;padding-left:1.5em`,
+        ...(todo ? { 'data-checked': node.attrs['checked'] ? 'true' : 'false' } : {}),
+      }, 0],
+      parseDOM: [{ tag: `[data-list='${options.listType}']` }],
+    },
+    inputRules,
+    meta: { title: options.title, icon: 'list', keywords: options.keywords, group: 'lists' },
+  });
+}
+
+export const bulletedList = defineListBlock({ type: 'bulleted-list', listType: 'bullet', title: 'Bulleted list', keywords: ['ul', 'bullet', 'unordered', 'list'] });
+export const numberedList = defineListBlock({ type: 'numbered-list', listType: 'ordered', title: 'Numbered list', keywords: ['ol', 'number', 'ordered', 'list'] });
+export const todoList = defineListBlock({ type: 'todo-list', listType: 'todo', title: 'To-do list', keywords: ['todo', 'task', 'checkbox', 'check'] });
diff --git a/vue/editor/src/blocks/paragraph.ts b/vue/editor/src/blocks/paragraph.ts
new file mode 100644
index 0000000..d8a033b
--- /dev/null
+++ b/vue/editor/src/blocks/paragraph.ts
@@ -0,0 +1,13 @@
+import { defineBlock } from '../registry';
+
+export const paragraph = defineBlock({
+  type: 'paragraph',
+  spec: {
+    content: { kind: 'text' },
+    group: 'block',
+    toDOM: () => ['p', 0],
+    parseDOM: [{ tag: 'p' }],
+  },
+  placeholder: 'Write something…',
+  meta: { title: 'Paragraph', icon: 'text', keywords: ['paragraph', 'text', 'p'], group: 'basic' },
+});
diff --git a/vue/editor/src/commands/__test__/commands.test.ts b/vue/editor/src/commands/__test__/commands.test.ts
new file mode 100644
index 0000000..0a2b009
--- /dev/null
+++ b/vue/editor/src/commands/__test__/commands.test.ts
@@ -0,0 +1,54 @@
+import { describe, expect, it } from 'vitest';
+import { caret, createDoc, createNode, nodeInline, nodeText, textSelection } from '../../model';
+import { createDefaultRegistry } from '../../preset';
+import { createEditor, createEditorState } from '../../state';
+import { joinBackward, splitBlock, toggleMark } from '..';
+
+function para(id: string, text: string) {
+  return createNode('paragraph', { id, content: text ? [{ text, marks: [] }] : [] });
+}
+
+function editorWith(blocks: Array<ReturnType<typeof para>>, selection?: ReturnType<typeof caret>) {
+  const registry = createDefaultRegistry();
+  return createEditor({ state: createEditorState({ registry, doc: createDoc(blocks), selection }) });
+}
+
+describe('commands', () => {
+  it('toggleMark applies then removes bold on a range', () => {
+    const registry = createDefaultRegistry();
+    const editor = createEditor({
+      state: createEditorState({
+        registry,
+        doc: createDoc([para('a', 'abc')]),
+        selection: textSelection({ blockId: 'a', offset: 0 }, { blockId: 'a', offset: 3 }),
+      }),
+    });
+
+    expect(editor.command(toggleMark('bold'))).toBe(true);
+    expect(nodeInline(editor.state.doc.content[0]!)).toEqual([{ text: 'abc', marks: [{ type: 'bold' }] }]);
+
+    editor.command(toggleMark('bold'));
+    expect(nodeInline(editor.state.doc.content[0]!)).toEqual([{ text: 'abc', marks: [] }]);
+  });
+
+  it('splitBlock splits at the caret', () => {
+    const editor = editorWith([para('a', 'hello')], caret('a', 2));
+    expect(editor.command(splitBlock)).toBe(true);
+    expect(editor.state.doc.content.map(block => nodeText(block))).toEqual(['he', 'llo']);
+    expect(editor.state.selection.kind).toBe('text');
+  });
+
+  it('joinBackward merges into the previous block', () => {
+    const editor = editorWith([para('a', 'foo'), para('b', 'bar')], caret('b', 0));
+    expect(editor.command(joinBackward)).toBe(true);
+    expect(editor.state.doc.content.map(block => nodeText(block))).toEqual(['foobar']);
+  });
+
+  it('undo restores the document after a split', () => {
+    const editor = editorWith([para('a', 'hello')], caret('a', 2));
+    editor.command(splitBlock);
+    expect(editor.state.doc.content.length).toBe(2);
+    expect(editor.undo()).toBe(true);
+    expect(editor.state.doc.content.map(block => nodeText(block))).toEqual(['hello']);
+  });
+});
diff --git a/vue/editor/src/commands/blocks.ts b/vue/editor/src/commands/blocks.ts
new file mode 100644
index 0000000..8ff5389
--- /dev/null
+++ b/vue/editor/src/commands/blocks.ts
@@ -0,0 +1,133 @@
+import type { Attrs } from '../model';
+import { blockById, blockIndex } from '../model';
+import type { Command } from '../state';
+import { createTransaction } from '../state';
+import { focusBlock, isBlockActive, selectionBlockId } from './util';
+
+/** Convert the focused block to `type` (preserving inline content). */
+export function setBlockType(type: string, attrs?: Attrs): Command {
+  return (state, dispatch) => {
+    const blockId = selectionBlockId(state);
+
+    if (!blockId || !state.registry.hasBlock(type))
+      return false;
+
+    if (dispatch)
+      dispatch(createTransaction(state).setBlockType(blockId, type, attrs).setSelection(state.selection));
+
+    return true;
+  };
+}
+
+/**
+ * Toggle the focused block between `type` (with `attrs`) and a fallback type
+ * (default `paragraph`). Powers heading shortcuts and conversion toggles.
+ */
+export function toggleBlockType(type: string, attrs?: Attrs, fallback = 'paragraph'): Command {
+  return (state, dispatch) => {
+    const blockId = selectionBlockId(state);
+
+    if (!blockId)
+      return false;
+
+    const active = isBlockActive(state, type, attrs);
+    const target = active ? fallback : type;
+    const targetAttrs = active ? undefined : attrs;
+
+    if (!state.registry.hasBlock(target))
+      return false;
+
+    if (dispatch)
+      dispatch(createTransaction(state).setBlockType(blockId, target, targetAttrs).setSelection(state.selection));
+
+    return true;
+  };
+}
+
+function moveFocusedBlock(delta: number): Command {
+  return (state, dispatch) => {
+    const block = focusBlock(state);
+
+    if (!block)
+      return false;
+
+    const index = blockIndex(state.doc, block.id);
+    const target = index + delta;
+
+    if (index === -1 || target < 0 || target >= state.doc.content.length)
+      return false;
+
+    if (dispatch)
+      dispatch(createTransaction(state).moveBlock(block.id, target).setSelection(state.selection));
+
+    return true;
+  };
+}
+
+/** Move the focused block one position earlier. */
+export const moveBlockUp: Command = moveFocusedBlock(-1);
+
+/** Move the focused block one position later. */
+export const moveBlockDown: Command = moveFocusedBlock(1);
+
+/** Indent a list item by raising its `indent` attr (lists only). */
+export const indentListItem: Command = (state, dispatch) => {
+  const block = focusBlock(state);
+
+  if (!block || state.schema.nodeSpec(block.type)?.group !== 'list')
+    return false;
+
+  const indent = typeof block.attrs.indent === 'number' ? block.attrs.indent : 0;
+
+  if (indent >= 8)
+    return false;
+
+  if (dispatch)
+    dispatch(createTransaction(state).setAttrs(block.id, { indent: indent + 1 }).setSelection(state.selection));
+
+  return true;
+};
+
+/** Outdent a list item by lowering its `indent` attr (lists only). */
+export const outdentListItem: Command = (state, dispatch) => {
+  const block = focusBlock(state);
+
+  if (!block || state.schema.nodeSpec(block.type)?.group !== 'list')
+    return false;
+
+  const indent = typeof block.attrs.indent === 'number' ? block.attrs.indent : 0;
+
+  if (indent <= 0)
+    return false;
+
+  if (dispatch)
+    dispatch(createTransaction(state).setAttrs(block.id, { indent: indent - 1 }).setSelection(state.selection));
+
+  return true;
+};
+
+/** Toggle the `checked` attribute of the focused to-do item. */
+export const toggleChecked: Command = (state, dispatch) => {
+  const block = focusBlock(state);
+
+  if (!block || !('checked' in block.attrs))
+    return false;
+
+  if (dispatch)
+    dispatch(createTransaction(state).setAttrs(block.id, { checked: !block.attrs['checked'] }).setSelection(state.selection));
+
+  return true;
+};
+
+/** Delete a specific block by id (used by atom-block UIs). */
+export function removeBlock(blockId: string): Command {
+  return (state, dispatch) => {
+    if (!blockById(state.doc, blockId))
+      return false;
+
+    if (dispatch)
+      dispatch(createTransaction(state).removeBlock(blockId));
+
+    return true;
+  };
+}
diff --git a/vue/editor/src/commands/chain.ts b/vue/editor/src/commands/chain.ts
new file mode 100644
index 0000000..cc28f57
--- /dev/null
+++ b/vue/editor/src/commands/chain.ts
@@ -0,0 +1,16 @@
+import type { Command } from '../state';
+
+/**
+ * Combine commands into one that runs them in order and stops at the first that
+ * applies (returns `true`). The standard way to bind several fallbacks to a key.
+ */
+export function chainCommands(...commands: readonly Command[]): Command {
+  return (state, dispatch, view) => {
+    for (const command of commands) {
+      if (command(state, dispatch, view))
+        return true;
+    }
+
+    return false;
+  };
+}
diff --git a/vue/editor/src/commands/index.ts b/vue/editor/src/commands/index.ts
new file mode 100644
index 0000000..c77b8ec
--- /dev/null
+++ b/vue/editor/src/commands/index.ts
@@ -0,0 +1,7 @@
+export * from './util';
+export * from './chain';
+export * from './marks';
+export * from './structure';
+export * from './blocks';
+export * from './selection';
+export * from './input-rules';
diff --git a/vue/editor/src/commands/input-rules.ts b/vue/editor/src/commands/input-rules.ts
new file mode 100644
index 0000000..4ce32e9
--- /dev/null
+++ b/vue/editor/src/commands/input-rules.ts
@@ -0,0 +1,48 @@
+import { blockById, caret, inlineText, isCollapsed, nodeInline } from '../model';
+import type { Command } from '../state';
+import { createTransaction } from '../state';
+
+/**
+ * Apply the first matching block input-rule at the caret. Rules live on block
+ * definitions (`inputRules`) and match the text from the block start to the
+ * caret — e.g. `'# '` → heading, `'- '` → bulleted list, `'> '` → quote. Run
+ * from the input flow after each text change.
+ */
+export const applyInputRule: Command = (state, dispatch) => {
+  const sel = state.selection;
+
+  if (sel.kind !== 'text' || !isCollapsed(sel))
+    return false;
+
+  const block = blockById(state.doc, sel.focus.blockId);
+  const spec = block && state.schema.nodeSpec(block.type);
+
+  if (!block || spec?.content.kind !== 'text' || spec.code)
+    return false;
+
+  const before = inlineText(nodeInline(block)).slice(0, sel.focus.offset);
+
+  for (const def of state.registry.listBlocks()) {
+    for (const rule of def.inputRules ?? []) {
+      const match = rule.match.exec(before);
+
+      if (!match)
+        continue;
+
+      const targetType = rule.type ?? def.type;
+      if (block.type === targetType)
+        return false; // already that type — leave the typed text alone
+
+      if (dispatch) {
+        dispatch(createTransaction(state)
+          .deleteText(block.id, 0, match[0].length)
+          .setBlockType(block.id, targetType, rule.attrs ?? state.schema.defaultAttrs(targetType))
+          .setSelection(caret(block.id, 0)));
+      }
+
+      return true;
+    }
+  }
+
+  return false;
+};
diff --git a/vue/editor/src/commands/marks.ts b/vue/editor/src/commands/marks.ts
new file mode 100644
index 0000000..e399976
--- /dev/null
+++ b/vue/editor/src/commands/marks.ts
@@ -0,0 +1,122 @@
+import type { Attrs, Mark } from '../model';
+import { blockById, isCollapsed, marksAt, nodeInline, normalizeMarks, orderedSelection, rangeHasMarkType } from '../model';
+import { marksAllowed } from '../schema';
+import type { Command, EditorState } from '../state';
+import { createTransaction } from '../state';
+
+/** Whether the focused block permits a mark of `type` (false for code blocks, etc.). */
+function markAllowedAtFocus(state: EditorState, type: string): boolean {
+  if (state.selection.kind !== 'text')
+    return false;
+
+  const block = blockById(state.doc, state.selection.focus.blockId);
+  const spec = block && state.schema.nodeSpec(block.type);
+  return spec ? marksAllowed(spec, type) : false;
+}
+
+function excludedTypes(state: Parameters<Command>[0], type: string): readonly string[] {
+  const excludes = state.schema.markSpec(type)?.excludes;
+
+  if (excludes === '_all')
+    return state.registry.listMarks().map(def => def.type).filter(other => other !== type);
+
+  return excludes ?? [];
+}
+
+/**
+ * Toggle a mark. On a collapsed caret it flips the stored marks (applied to the
+ * next typed character); on a range it adds/removes the mark across it, honoring
+ * the mark's `excludes`. Cross-block ranges are deferred to M2 (returns false).
+ */
+export function toggleMark(type: string, attrs?: Attrs): Command {
+  return (state, dispatch) => {
+    if (!state.registry.hasMark(type) || !markAllowedAtFocus(state, type))
+      return false;
+
+    const sel = state.selection;
+    if (sel.kind !== 'text')
+      return false;
+
+    const mark: Mark = attrs ? { type, attrs } : { type };
+
+    if (isCollapsed(sel)) {
+      if (dispatch) {
+        const block = blockById(state.doc, sel.focus.blockId);
+        const current = state.storedMarks ?? (block ? marksAt(nodeInline(block), sel.focus.offset) : []);
+        const has = current.some(m => m.type === type);
+        const next = has
+          ? current.filter(m => m.type !== type)
+          : normalizeMarks([...current.filter(m => !excludedTypes(state, type).includes(m.type)), mark]);
+        dispatch(createTransaction(state).setStoredMarks(next));
+      }
+
+      return true;
+    }
+
+    if (sel.anchor.blockId !== sel.focus.blockId)
+      return false;
+
+    const block = blockById(state.doc, sel.focus.blockId);
+    if (!block)
+      return false;
+
+    const { from, to } = orderedSelection(sel, state.doc);
+    const active = rangeHasMarkType(nodeInline(block), from.offset, to.offset, type);
+
+    if (dispatch) {
+      const tr = createTransaction(state);
+
+      if (active) {
+        tr.removeMark(block.id, from.offset, to.offset, mark);
+      }
+      else {
+        for (const ex of excludedTypes(state, type))
+          tr.removeMark(block.id, from.offset, to.offset, { type: ex });
+        tr.addMark(block.id, from.offset, to.offset, mark);
+      }
+
+      tr.setSelection(sel);
+      dispatch(tr);
+    }
+
+    return true;
+  };
+}
+
+/** Add a mark across the current (same-block) range. */
+export function addMark(type: string, attrs?: Attrs): Command {
+  return (state, dispatch) => {
+    const sel = state.selection;
+
+    if (!state.registry.hasMark(type) || !markAllowedAtFocus(state, type) || sel.kind !== 'text' || isCollapsed(sel) || sel.anchor.blockId !== sel.focus.blockId)
+      return false;
+
+    if (dispatch) {
+      const { from, to } = orderedSelection(sel, state.doc);
+      dispatch(createTransaction(state)
+        .addMark(from.blockId, from.offset, to.offset, attrs ? { type, attrs } : { type })
+        .setSelection(sel));
+    }
+
+    return true;
+  };
+}
+
+/** Remove a mark across the current (same-block) range. */
+export function removeMark(type: string): Command {
+  return (state, dispatch) => {
+    const sel = state.selection;
+
+    if (sel.kind !== 'text' || isCollapsed(sel) || sel.anchor.blockId !== sel.focus.blockId)
+      return false;
+
+    if (dispatch) {
+      const { from, to } = orderedSelection(sel, state.doc);
+      dispatch(createTransaction(state)
+        .removeMark(from.blockId, from.offset, to.offset, { type })
+        .setSelection(sel));
+    }
+
+    return true;
+  };
+}
diff --git a/vue/editor/src/commands/selection.ts b/vue/editor/src/commands/selection.ts
new file mode 100644
index 0000000..f5d8279
--- /dev/null
+++ b/vue/editor/src/commands/selection.ts
@@ -0,0 +1,135 @@
+import {
+  blockById,
+  blockIndex,
+  caret,
+  createNode,
+  inlineLength,
+  isAcrossBlocks,
+  isCollapsed,
+  nodeInline,
+  nodeSelection,
+  orderedSelection,
+  previousBlock,
+  textSelection,
+} from '../model';
+import type { Command, EditorState } from '../state';
+import { createTransaction } from '../state';
+
+function defaultTextType(state: EditorState): string {
+  if (state.registry.hasBlock('paragraph'))
+    return 'paragraph';
+
+  for (const def of state.registry.listBlocks()) {
+    if (def.spec.content.kind === 'text')
+      return def.type;
+  }
+
+  return state.registry.listBlocks()[0]?.type ?? 'paragraph';
+}
+
+/**
+ * Delete the current selection. Handles a node (block-level) selection, a
+ * same-block range, and a cross-block range (delete the partial ends, drop the
+ * blocks in between, merge the last block into the first). Never leaves an empty
+ * document — a fresh paragraph is inserted if everything was removed.
+ */
+export const deleteSelection: Command = (state, dispatch) => {
+  const sel = state.selection;
+
+  if (sel.kind === 'node') {
+    if (sel.ids.length === 0)
+      return false;
+
+    if (dispatch) {
+      const before = previousBlock(state.doc, sel.ids[0]!);
+      const tr = createTransaction(state);
+
+      for (const id of sel.ids)
+        tr.removeBlock(id);
+
+      if (tr.doc.content.length === 0) {
+        const type = defaultTextType(state);
+        const node = createNode(type, { attrs: state.schema.defaultAttrs(type) });
+        tr.insertBlock(node, 0).setSelection(caret(node.id, 0));
+      }
+      else if (before) {
+        tr.setSelection(caret(before.id, inlineLength(nodeInline(before))));
+      }
+      else {
+        tr.setSelection(caret(tr.doc.content[0]!.id, 0));
+      }
+
+      dispatch(tr);
+    }
+
+    return true;
+  }
+
+  if (isCollapsed(sel))
+    return false;
+
+  const { from, to } = orderedSelection(sel, state.doc);
+
+  if (!isAcrossBlocks(sel)) {
+    if (dispatch)
+      dispatch(createTransaction(state).deleteText(from.blockId, from.offset, to.offset).setSelection(caret(from.blockId, from.offset)));
+    return true;
+  }
+
+  const a = blockById(state.doc, from.blockId);
+  const b = blockById(state.doc, to.blockId);
+
+  if (!a || !b || state.schema.nodeSpec(a.type)?.content.kind !== 'text' || state.schema.nodeSpec(b.type)?.content.kind !== 'text')
+    return false;
+
+  if (dispatch) {
+    const tr = createTransaction(state);
+    tr.deleteText(a.id, from.offset, inlineLength(nodeInline(a)));
+    tr.deleteText(b.id, 0, to.offset);
+
+    const ai = blockIndex(state.doc, a.id);
+    const bi = blockIndex(state.doc, b.id);
+    for (const mid of state.doc.content.slice(ai + 1, bi))
+      tr.removeBlock(mid.id);
+
+    tr.mergeBlock(b.id, a.id).setSelection(caret(a.id, from.offset));
+    dispatch(tr);
+  }
+
+  return true;
+};
+
+/**
+ * Progressive select-all (Mod+A): first press selects the current block's text,
+ * a second press selects every block.
+ */
+export const selectAll: Command = (state, dispatch) => {
+  const sel = state.selection;
+
+  if (sel.kind === 'text' && !isAcrossBlocks(sel)) {
+    const block = blockById(state.doc, sel.focus.blockId);
+
+    if (block) {
+      const length = inlineLength(nodeInline(block));
+      const { from, to } = orderedSelection(sel, state.doc);
+      const wholeBlock = from.offset === 0 && to.offset === length;
+
+      if (!wholeBlock && length > 0) {
+        if (dispatch) {
+          dispatch(createTransaction(state).setSelection(
+            textSelection({ blockId: block.id, offset: 0 }, { blockId: block.id, offset: length }),
+          ));
+        }
+        return true;
+      }
+    }
+  }
+
+  if (state.doc.content.length === 0)
+    return false;
+
+  if (dispatch)
+    dispatch(createTransaction(state).setSelection(nodeSelection(state.doc.content.map(block => block.id))));
+
+  return true;
+};
diff --git a/vue/editor/src/commands/structure.ts b/vue/editor/src/commands/structure.ts
new file mode 100644
index 0000000..ecb6b1e
--- /dev/null
+++ b/vue/editor/src/commands/structure.ts
@@ -0,0 +1,180 @@
+import type { Attrs, Node } from '../model';
+import {
+  blockById,
+  caret,
+  inlineLength,
+  isAcrossBlocks,
+  isCollapsed,
+  nextBlock,
+  nodeInline,
+  nodeSelection,
+  orderedSelection,
+  previousBlock,
+} from '../model';
+import type { Command, EditorState } from '../state';
+import { createTransaction } from '../state';
+
+/** Type/attrs for the block created when splitting `block` at `offset`. */
+function continuation(state: EditorState, block: Node, offset: number): { type?: string; attrs?: Attrs } {
+  const spec = state.schema.nodeSpec(block.type);
+
+  // Defining blocks (e.g. code-block) keep their identity across a split.
+  if (spec?.defining)
+    return { type: block.type, attrs: block.attrs };
+
+  // Pressing Enter at the end of a heading starts a fresh paragraph.
+  if (block.type === 'heading' && offset >= inlineLength(nodeInline(block)) && state.registry.hasBlock('paragraph'))
+    return { type: 'paragraph' };
+
+  // A new to-do item always starts unchecked (don't inherit the checked state).
+  if (block.type === 'todo-list')
+    return { type: block.type, attrs: { ...block.attrs, checked: false } };
+
+  // Otherwise continue the same type (lists keep their indent/listType attrs).
+  return { type: block.type, attrs: block.attrs };
+}
+
+/**
+ * Split the current text block at the caret (Enter). A non-collapsed same-block
+ * selection is deleted first. Caret lands at the start of the new block.
+ */
+export const splitBlock: Command = (state, dispatch) => {
+  const sel = state.selection;
+
+  if (sel.kind !== 'text' || isAcrossBlocks(sel))
+    return false;
+
+  const block = blockById(state.doc, sel.focus.blockId);
+  const spec = block && state.schema.nodeSpec(block.type);
+
+  if (!block || spec?.content.kind !== 'text')
+    return false;
+
+  // Code blocks never split — Enter inserts a literal newline.
+  if (spec.code) {
+    if (dispatch) {
+      const tr = createTransaction(state);
+      let pos = sel.focus;
+
+      if (!isCollapsed(sel)) {
+        const { from, to } = orderedSelection(sel, state.doc);
+        tr.deleteText(block.id, from.offset, to.offset);
+        pos = from;
+      }
+
+      tr.insertText(pos, '\n', []).setSelection(caret(block.id, pos.offset + 1));
+      dispatch(tr);
+    }
+
+    return true;
+  }
+
+  if (dispatch) {
+    const tr = createTransaction(state);
+    let pos = sel.focus;
+
+    if (!isCollapsed(sel)) {
+      const { from, to } = orderedSelection(sel, state.doc);
+      tr.deleteText(block.id, from.offset, to.offset);
+      pos = from;
+    }
+
+    const cont = continuation(state, block, pos.offset);
+    tr.splitBlock(pos, cont.type, cont.attrs);
+    tr.setSelection(caret(tr.lastSplitId!, 0));
+    dispatch(tr);
+  }
+
+  return true;
+};
+
+/** Insert a hard line break (Shift+Enter) inside the current block. */
+export const insertHardBreak: Command = (state, dispatch) => {
+  const sel = state.selection;
+
+  if (sel.kind !== 'text' || !isCollapsed(sel))
+    return false;
+
+  const block = blockById(state.doc, sel.focus.blockId);
+  const spec = block && state.schema.nodeSpec(block.type);
+
+  if (!block || spec?.content.kind !== 'text')
+    return false;
+
+  if (dispatch) {
+    dispatch(createTransaction(state)
+      .insertText(sel.focus, '\n', state.storedMarks ?? [])
+      .setSelection(caret(block.id, sel.focus.offset + 1)));
+  }
+
+  return true;
+};
+
+/**
+ * Backspace at the start of a block: merge it into the previous text block, or
+ * select a preceding atom block (image/divider) so a second Backspace deletes it.
+ */
+export const joinBackward: Command = (state, dispatch) => {
+  const sel = state.selection;
+
+  if (sel.kind !== 'text' || !isCollapsed(sel) || sel.focus.offset !== 0)
+    return false;
+
+  const current = blockById(state.doc, sel.focus.blockId);
+  const prev = previousBlock(state.doc, sel.focus.blockId);
+
+  if (!current || !prev)
+    return false;
+
+  const currentSpec = state.schema.nodeSpec(current.type);
+  const prevSpec = state.schema.nodeSpec(prev.type);
+
+  if (currentSpec?.isolating || prevSpec?.isolating)
+    return false;
+
+  if (prevSpec?.content.kind !== 'text') {
+    if (dispatch)
+      dispatch(createTransaction(state).setSelection(nodeSelection([prev.id])));
+    return true;
+  }
+
+  if (currentSpec?.content.kind !== 'text')
+    return false;
+
+  if (dispatch) {
+    const caretOffset = inlineLength(nodeInline(prev));
+    dispatch(createTransaction(state).mergeBlock(current.id, prev.id).setSelection(caret(prev.id, caretOffset)));
+  }
+
+  return true;
+};
+
+/** Delete at the end of a block: merge the next text block into it. */
+export const joinForward: Command = (state, dispatch) => {
+  const sel = state.selection;
+
+  if (sel.kind !== 'text' || !isCollapsed(sel))
+    return false;
+
+  const current = blockById(state.doc, sel.focus.blockId);
+
+  if (!current || sel.focus.offset !== inlineLength(nodeInline(current)))
+    return false;
+
+  const next = nextBlock(state.doc, current.id);
+  if (!next)
+    return false;
+
+  const currentSpec = state.schema.nodeSpec(current.type);
+  const nextSpec = state.schema.nodeSpec(next.type);
+
+  if (currentSpec?.isolating || nextSpec?.isolating || currentSpec?.content.kind !== 'text' || nextSpec?.content.kind !== 'text')
+    return false;
+
+  if (dispatch) {
+    const caretOffset = inlineLength(nodeInline(current));
+    dispatch(createTransaction(state).mergeBlock(next.id, current.id).setSelection(caret(current.id, caretOffset)));
+  }
+
+  return true;
+};
diff --git a/vue/editor/src/commands/util.ts b/vue/editor/src/commands/util.ts
new file mode 100644
index 0000000..fe4c47c
--- /dev/null
+++ b/vue/editor/src/commands/util.ts
@@ -0,0 +1,59 @@
+import type { Attrs, Node } from '../model';
+import { blockById, isCollapsed, marksAt, nodeInline, orderedSelection, rangeHasMarkType } from '../model';
+import type { EditorState } from '../state';
+
+/** Block id the selection's focus is in (or the first node-selected block). */
+export function selectionBlockId(state: EditorState): string | undefined {
+  const sel = state.selection;
+  return sel.kind === 'text' ? sel.focus.blockId : sel.ids[0];
+}
+
+/** The block the selection currently focuses, or `null`. */
+export function focusBlock(state: EditorState): Node | null {
+  const id = selectionBlockId(state);
+  return id ? blockById(state.doc, id) : null;
+}
+
+/** Whether a block type holds inline (text) content. */
+export function isTextBlockType(state: EditorState, type: string): boolean {
+  return state.schema.nodeSpec(type)?.content.kind === 'text';
+}
+
+/**
+ * Whether a mark is active for the current selection — used by `toggleMark` and
+ * by toolbars (call a command without `dispatch` for the same answer).
+ */
+export function isMarkActive(state: EditorState, type: string): boolean {
+  const sel = state.selection;
+
+  if (sel.kind !== 'text')
+    return false;
+
+  if (isCollapsed(sel)) {
+    if (state.storedMarks)
+      return state.storedMarks.some(mark => mark.type === type);
+
+    const block = blockById(state.doc, sel.focus.blockId);
+    return block ? marksAt(nodeInline(block), sel.focus.offset).some(mark => mark.type === type) : false;
+  }
+
+  if (sel.anchor.blockId !== sel.focus.blockId)
+    return false;
+
+  const { from, to } = orderedSelection(sel, state.doc);
+  const block = blockById(state.doc, sel.focus.blockId);
+  return block ? rangeHasMarkType(nodeInline(block), from.offset, to.offset, type) : false;
+}
+
+/** Whether the focused block matches a type (and optionally a subset of attrs). */
+export function isBlockActive(state: EditorState, type: string, attrs?: Attrs): boolean {
+  const block = focusBlock(state);
+
+  if (!block || block.type !== type)
+    return false;
+
+  if (!attrs)
+    return true;
+
+  return Object.keys(attrs).every(key => block.attrs[key] === attrs[key]);
+}
diff --git a/vue/editor/src/crdt/__test__/convergence.test.ts b/vue/editor/src/crdt/__test__/convergence.test.ts
new file mode 100644
index 0000000..fb9a4f1
--- /dev/null
+++ b/vue/editor/src/crdt/__test__/convergence.test.ts
@@ -0,0 +1,175 @@
+import { describe, expect, it } from 'vitest';
+import { caret, createDoc, createNode, nodeSelection, nodeText } from '../../model';
+import { deleteSelection } from '../../commands';
+import { createDefaultRegistry } from '../../preset';
+import { createEditor, createEditorState, createTransaction } from '../../state';
+import { bindCrdt } from '../binding';
+import type { RemoteCursor } from '../types';
+import { createNativeProvider } from '../native/provider';
+
+function makePeer(seedDoc?: ReturnType<typeof createDoc>) {
+  const registry = createDefaultRegistry();
+  const editor = createEditor({ state: createEditorState({ registry, doc: seedDoc }) });
+  const provider = createNativeProvider({ schema: registry.schema, doc: seedDoc ? editor.state.doc : undefined });
+  bindCrdt(editor, provider);
+  return { editor, provider };
+}
+
+/** Live two-way, in-memory transport between two providers. */
+function connect(a: ReturnType<typeof makePeer>, b: ReturnType<typeof makePeer>) {
+  a.provider.onLocalOps(bytes => b.provider.applyUpdate(bytes));
+  b.provider.onLocalOps(bytes => a.provider.applyUpdate(bytes));
+}
+
+function text(peer: ReturnType<typeof makePeer>): string {
+  return peer.editor.state.doc.content.map(block => nodeText(block)).join('\n');
+}
+
+describe('crdt convergence (two editors)', () => {
+  it('a joining peer syncs the initial document, then concurrent edits converge', () => {
+    const doc = createDoc([createNode('paragraph', { id: 'p', content: [{ text: 'Hello', marks: [] }] })]);
+
+    const a = makePeer(doc);
+    const b = makePeer(); // empty; joins by syncing A's full state
+    b.provider.applyUpdate(a.provider.encodeDelta());
+
+    expect(text(b)).toBe('Hello');
+
+    connect(a, b);
+
+    // Concurrent edits at opposite ends of the same block.
+    a.editor.dispatch(createTransaction(a.editor.state).insertText({ blockId: 'p', offset: 5 }, '!', []).setSelection(caret('p', 6)));
+    b.editor.dispatch(createTransaction(b.editor.state).insertText({ blockId: 'p', offset: 0 }, '>', []).setSelection(caret('p', 1)));
+
+    expect(text(a)).toBe(text(b));
+    expect(text(a)).toBe('>Hello!');
+  });
+
+  it('keeps offsets aligned for astral characters (emoji) across replicas', () => {
+    const doc = createDoc([createNode('paragraph', { id: 'p', content: [{ text: 'a👍b', marks: [] }] })]);
+    const a = makePeer(doc);
+    const b = makePeer();
+    b.provider.applyUpdate(a.provider.encodeDelta());
+    connect(a, b);
+
+    // 'b' sits at UTF-16 offset 3 (the emoji occupies offsets 1..3).
+    a.editor.dispatch(createTransaction(a.editor.state).deleteText('p', 3, 4).setSelection(caret('p', 3)));
+
+    expect(text(a)).toBe('a👍');
+    expect(text(b)).toBe('a👍');
+  });
+
+  it('undo of a select-all delete does not duplicate content on the other replica', () => {
+    const doc = createDoc([
+      createNode('paragraph', { id: 'a', content: [{ text: 'AAA', marks: [] }] }),
+      createNode('paragraph', { id: 'b', content: [{ text: 'BBB', marks: [] }] }),
+    ]);
+    const a = makePeer(doc);
+    const b = makePeer();
+    b.provider.applyUpdate(a.provider.encodeDelta());
+    connect(a, b);
+    expect(text(b)).toBe('AAA\nBBB');
+
+    // Select every block and delete (inserts one fresh empty paragraph).
+    a.editor.dispatch(createTransaction(a.editor.state).setSelection(nodeSelection(['a', 'b'])));
+    expect(a.editor.command(deleteSelection)).toBe(true);
+    expect(text(a)).toBe('');
+
+    // Undo must restore the blocks without duplicating them on either replica.
+    expect(a.editor.undo()).toBe(true);
+    expect(text(a)).toBe('AAA\nBBB');
+    expect(text(b)).toBe('AAA\nBBB');
+  });
+
+  it('awareness: a remote cursor anchor stays on its character when text is inserted before it', () => {
+    const doc = createDoc([createNode('paragraph', { id: 'p', content: [{ text: 'Hello', marks: [] }] })]);
+    const a = makePeer(doc);
+    const b = makePeer();
+    b.provider.applyUpdate(a.provider.encodeDelta());
+
+    let cursors: RemoteCursor[] = [];
+    a.provider.onAwareness((next) => {
+      cursors = next;
+    });
+    b.provider.onLocalAwareness(bytes => a.provider.applyAwareness(bytes));
+
+    // B places its caret after "Hello" (offset 5).
+    b.editor.dispatch(createTransaction(b.editor.state).setSelection(caret('p', 5)));
+    expect(cursors[0]?.selection?.kind).toBe('text');
+    expect(cursors[0]?.selection?.kind === 'text' && cursors[0].selection.focus.offset).toBe(5);
+
+    // A edits locally; A's view of B's cursor (anchored after 'o') re-resolves to offset 7.
+    a.editor.dispatch(createTransaction(a.editor.state).insertText({ blockId: 'p', offset: 0 }, '>>', []).setSelection(caret('p', 2)));
+    expect(cursors[0]?.selection?.kind === 'text' && cursors[0].selection.focus.offset).toBe(7);
+  });
+
+  it('converges across splits, bold, and a second block', () => {
+    const doc = createDoc([createNode('paragraph', { id: 'p', content: [{ text: 'abcdef', marks: [] }] })]);
+    const a = makePeer(doc);
+    const b = makePeer();
+    b.provider.applyUpdate(a.provider.encodeDelta());
+    connect(a, b);
+
+    // A bolds "ab" (stays in the head block); B splits after "abc" — concurrently.
+    a.editor.dispatch(createTransaction(a.editor.state).addMark('p', 0, 2, { type: 'bold' }).setSelection(caret('p', 2)));
+    b.editor.dispatch(createTransaction(b.editor.state).splitBlock({ blockId: 'p', offset: 3 }, undefined, undefined, 'p2').setSelection(caret('p2', 0)));
+
+    expect(text(a)).toBe(text(b));
+    // Document text is preserved across both edits (split inserts a block boundary).
+    expect(text(a).replace('\n', '')).toBe('abcdef');
+
+    // The bold mark survived on both replicas (somewhere in the doc).
+    const hasBold = (peer: ReturnType<typeof makePeer>) =>
+      peer.editor.state.doc.content.some(block =>
+        Array.isArray(block.content) && block.content.some(run => 'marks' in run && run.marks.some((m: { type: string }) => m.type === 'bold')));
+    expect(hasBold(a)).toBe(true);
+    expect(hasBold(b)).toBe(true);
+  });
+
+  it('per-block patching: a remote edit keeps untouched block node identities', () => {
+    const doc = createDoc([
+      createNode('paragraph', { id: 'a', content: [{ text: 'AAA', marks: [] }] }),
+      createNode('paragraph', { id: 'b', content: [{ text: 'BBB', marks: [] }] }),
+    ]);
+    const a = makePeer(doc);
+    const b = makePeer();
+    b.provider.applyUpdate(a.provider.encodeDelta());
+    connect(a, b);
+
+    const bBefore = b.editor.state.doc.content.find(node => node.id === 'b')!;
+
+    a.editor.dispatch(createTransaction(a.editor.state).insertText({ blockId: 'a', offset: 3 }, '!', []).setSelection(caret('a', 4)));
+
+    expect(nodeText(b.editor.state.doc.content.find(node => node.id === 'a')!)).toBe('AAA!'); // changed block updated
+    expect(b.editor.state.doc.content.find(node => node.id === 'b')!).toBe(bBefore); // untouched block reused identity
+  });
+
+  it('tombstone GC compacts deleted content, preserving the document and convergence', () => {
+    const doc = createDoc([createNode('paragraph', { id: 'p', content: [{ text: 'Hello World', marks: [] }] })]);
+    const a = makePeer(doc);
+    const b = makePeer();
+    b.provider.applyUpdate(a.provider.encodeDelta());
+    connect(a, b);
+
+    a.editor.dispatch(createTransaction(a.editor.state).deleteText('p', 5, 11).setSelection(caret('p', 5)));
+    a.editor.dispatch(createTransaction(a.editor.state).addMark('p', 0, 5, { type: 'bold' }).setSelection(caret('p', 5)));
+    expect(text(a)).toBe('Hello');
+    expect(text(b)).toBe('Hello');
+
+    // Quiesced + fully synced → GC is safe on both replicas.
+    const removed = a.provider.gc();
+    b.provider.gc();
+    expect(removed.chars).toBeGreaterThanOrEqual(6); // the deleted " World"
+
+    // The compacted CRDT still materializes the right content and formatting.
+    const reloaded = a.provider.load();
+    expect(nodeText(reloaded.content[0]!)).toBe('Hello');
+    const runs = reloaded.content[0]!.content;
+    expect(Array.isArray(runs) && runs.length > 0 && 'marks' in runs[0]! && runs[0]!.marks.some((m: { type: string }) => m.type === 'bold')).toBe(true);
+
+    // A further edit still converges across replicas.
+    a.editor.dispatch(createTransaction(a.editor.state).insertText({ blockId: 'p', offset: 5 }, '!', []).setSelection(caret('p', 6)));
+    expect(text(a)).toBe('Hello!');
+    expect(text(b)).toBe('Hello!');
+  });
+});
diff --git a/vue/editor/src/crdt/__test__/document-crdt.test.ts b/vue/editor/src/crdt/__test__/document-crdt.test.ts
new file mode 100644
index 0000000..8641519
--- /dev/null
+++ b/vue/editor/src/crdt/__test__/document-crdt.test.ts
@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vitest';
+import { opId } from '@robonen/crdt';
+import { createDoc, createNode } from '../../model';
+import { createDefaultRegistry } from '../../preset';
+import { DocumentCrdt } from '../native/document-crdt';
+
+describe('documentCrdt.applyOp', () => {
+  it('buffers (returns false for) a text-delete whose dependency is missing', () => {
+    const registry = createDefaultRegistry();
+    const doc = new DocumentCrdt(registry.schema);
+    let counter = 0;
+    doc.setIdFactory(() => opId('x', ++counter));
+
+    for (const op of doc.seedFromDocument(createDoc([createNode('paragraph', { id: 'p', content: [{ text: 'ab', marks: [] }] })])))
+      doc.applyOp(op);
+
+    // Delete referencing a char id we've never seen → not ready (must buffer).
+    expect(doc.applyOp({ id: opId('r', 1), kind: 'text-delete', blockId: 'p', charId: opId('r', 99) })).toBe(false);
+    // Delete referencing a missing block → also not ready.
+    expect(doc.applyOp({ id: opId('r', 2), kind: 'text-delete', blockId: 'gone', charId: opId('x', 1) })).toBe(false);
+  });
+});
diff --git a/vue/editor/src/crdt/binding.ts b/vue/editor/src/crdt/binding.ts
new file mode 100644
index 0000000..e84796e
--- /dev/null
+++ b/vue/editor/src/crdt/binding.ts
@@ -0,0 +1,47 @@
+import type { Editor, Transaction } from '../state';
+import { createTransaction } from '../state';
+import { reconcileDoc } from './reconcile';
+import type { CrdtProvider } from './types';
+import { REMOTE_ORIGIN } from './types';
+
+export interface CrdtBinding {
+  detach: () => void;
+}
+
+/**
+ * Wire a {@link CrdtProvider} to an {@link Editor}: local transactions flow into
+ * the CRDT, and remote ops are reflected back as a single history-bypassing
+ * `setDoc` transaction. The provider's `onLocalOps`/`applyUpdate` are connected
+ * to a transport by the caller.
+ */
+export function bindCrdt(editor: Editor, provider: CrdtProvider): CrdtBinding {
+  function onTransaction(tr: Transaction): void {
+    if (tr.getMeta('origin') !== REMOTE_ORIGIN)
+      provider.applyLocal(tr); // never echo a remote-sourced change back into the CRDT
+    provider.setLocalSelection(editor.state.selection); // presence (local edits + remapped remote)
+  }
+
+  editor.on('transaction', onTransaction);
+  provider.setLocalSelection(editor.state.selection);
+
+  const offRemote = provider.onRemoteApplied(() => {
+    // Reuse unchanged block identities so only the blocks a remote edit touched
+    // repaint (and the local caret in untouched blocks stays put).
+    const next = reconcileDoc(editor.state.doc, provider.load());
+    if (next === editor.state.doc)
+      return; // remote ops didn't change the visible document
+
+    editor.dispatch(createTransaction(editor.state)
+      .setDoc(next)
+      .setMeta('origin', REMOTE_ORIGIN)
+      .setMeta('addToHistory', false));
+  });
+
+  return {
+    detach: () => {
+      editor.off('transaction', onTransaction);
+      offRemote();
+      provider.destroy();
+    },
+  };
+}
diff --git a/vue/editor/src/crdt/index.ts b/vue/editor/src/crdt/index.ts
new file mode 100644
index 0000000..06ff499
--- /dev/null
+++ b/vue/editor/src/crdt/index.ts
@@ -0,0 +1,7 @@
+export * from './types';
+export * from './binding';
+export * from './reconcile';
+export { createNativeProvider } from './native/provider';
+export type { NativeProviderOptions } from './native/provider';
+export { DocumentCrdt } from './native/document-crdt';
+export type { EditorOp } from './native/document-crdt';
diff --git a/vue/editor/src/crdt/native/document-crdt.ts b/vue/editor/src/crdt/native/document-crdt.ts
new file mode 100644
index 0000000..350f5c5
--- /dev/null
+++ b/vue/editor/src/crdt/native/document-crdt.ts
@@ -0,0 +1,488 @@
+import type { MarkValue, OpId, VersionVector } from '@robonen/crdt';
+import { LwwRegister, MarkStore, Rga, keyBetween, opIdEq, opIdToString } from '@robonen/crdt';
+import type { Attrs, EditorDocument, Inline, InlineNode, Mark, Node, Selection } from '../../model';
+import { createDoc, nodeSelection, normalizeInline, normalizeMarks, textSelection } from '../../model';
+import type { Schema } from '../../schema';
+import type { Step } from '../../state';
+import type { SelectionAnchor } from '../types';
+
+/**
+ * The CRDT operation log entry. Each carries an op id for the oplog; structural
+ * ops address blocks by their stable string id, text ops by character op ids.
+ */
+export type EditorOp
+  = | { readonly id: OpId; readonly kind: 'block-insert'; readonly blockId: string; readonly blockType: string; readonly attrs: Attrs; readonly posKey: string; readonly isText: boolean }
+    | { readonly id: OpId; readonly kind: 'block-remove'; readonly blockId: string }
+    | { readonly id: OpId; readonly kind: 'block-move'; readonly blockId: string; readonly posKey: string }
+    | { readonly id: OpId; readonly kind: 'block-attrs'; readonly blockId: string; readonly attrs: Attrs }
+    | { readonly id: OpId; readonly kind: 'block-type'; readonly blockId: string; readonly blockType: string; readonly attrs: Attrs }
+    | { readonly id: OpId; readonly kind: 'text-insert'; readonly blockId: string; readonly afterId: OpId | null; readonly ch: string }
+    | { readonly id: OpId; readonly kind: 'text-delete'; readonly blockId: string; readonly charId: OpId }
+    | { readonly id: OpId; readonly kind: 'mark-add'; readonly blockId: string; readonly markType: string; readonly value: MarkValue; readonly startId: OpId; readonly endId: OpId };
+
+interface BlockState {
+  present: LwwRegister<boolean>;
+  posKey: LwwRegister<string>;
+  type: LwwRegister<string>;
+  attrs: LwwRegister<Attrs>;
+  isText: boolean;
+  rga: Rga<string>;
+  marks: MarkStore;
+}
+
+function markToValue(mark: Mark): MarkValue {
+  return mark.attrs && Object.keys(mark.attrs).length > 0 ? (mark.attrs as MarkValue) : true;
+}
+
+function valueToMark(type: string, value: MarkValue): Mark {
+  return value && typeof value === 'object' ? { type, attrs: value as Attrs } : { type };
+}
+
+/**
+ * The editor's document CRDT: a fractional-ordered set of blocks, each a text
+ * RGA + a mark store (or an attribute-only atom). It translates the editor's
+ * offset-based {@link Step}s into id-based CRDT ops ({@link translateStep}),
+ * integrates ops from any replica ({@link applyOp}), and materializes an
+ * {@link EditorDocument} ({@link toDocument}).
+ */
+export class DocumentCrdt {
+  private readonly blocks = new Map<string, BlockState>();
+  private nextId: () => OpId = () => { throw new Error('DocumentCrdt: id factory not set'); };
+
+  constructor(private readonly schema: Schema) {}
+
+  /** Wire the replica's id generator (called once by the provider). */
+  setIdFactory(factory: () => OpId): void {
+    this.nextId = factory;
+  }
+
+  // ---------------------------------------------------------------- integrate
+
+  /** Apply one op (local or remote). Returns false if a causal dependency is missing. */
+  applyOp(op: EditorOp): boolean {
+    switch (op.kind) {
+      case 'block-insert': {
+        if (!this.blocks.has(op.blockId)) {
+          this.blocks.set(op.blockId, {
+            present: register(true, op.id),
+            posKey: register(op.posKey, op.id),
+            type: register(op.blockType, op.id),
+            attrs: register(op.attrs, op.id),
+            isText: op.isText,
+            rga: new Rga<string>(),
+            marks: new MarkStore(),
+          });
+        }
+        else {
+          // Re-activating a tombstoned block (e.g. undo of a removal): its RGA
+          // and marks are intact, so we only restore presence/position/attrs.
+          const block = this.blocks.get(op.blockId)!;
+          block.present.set(true, op.id);
+          block.posKey.set(op.posKey, op.id);
+          block.type.set(op.blockType, op.id);
+          block.attrs.set(op.attrs, op.id);
+        }
+        return true;
+      }
+      case 'block-remove': {
+        const block = this.blocks.get(op.blockId);
+        if (!block)
+          return false;
+        block.present.set(false, op.id);
+        return true;
+      }
+      case 'block-move': {
+        const block = this.blocks.get(op.blockId);
+        if (!block)
+          return false;
+        block.posKey.set(op.posKey, op.id);
+        return true;
+      }
+      case 'block-attrs': {
+        const block = this.blocks.get(op.blockId);
+        if (!block)
+          return false;
+        block.attrs.set(op.attrs, op.id);
+        return true;
+      }
+      case 'block-type': {
+        const block = this.blocks.get(op.blockId);
+        if (!block)
+          return false;
+        block.type.set(op.blockType, op.id);
+        block.attrs.set(op.attrs, op.id);
+        return true;
+      }
+      case 'text-insert': {
+        const block = this.blocks.get(op.blockId);
+        if (!block)
+          return false;
+        return block.rga.integrateInsert(op.id, op.ch, op.afterId);
+      }
+      case 'text-delete': {
+        const block = this.blocks.get(op.blockId);
+        if (!block)
+          return false;
+        // Propagate false so the Replica buffers a delete that arrives before its
+        // target insert (deleting an already-tombstoned id still returns true).
+        return block.rga.integrateDelete(op.charId);
+      }
+      case 'mark-add': {
+        const block = this.blocks.get(op.blockId);
+        if (!block)
+          return false;
+        block.marks.add({ id: op.id, type: op.markType, value: op.value, start: op.startId, end: op.endId });
+        return true;
+      }
+    }
+  }
+
+  // --------------------------------------------------------------- materialize
+
+  toDocument(): EditorDocument {
+    const content: Node[] = [];
+    for (const blockId of this.orderedBlockIds()) {
+      const block = this.blocks.get(blockId)!;
+      content.push({
+        id: blockId,
+        type: block.type.get(),
+        attrs: block.attrs.get(),
+        content: block.isText ? this.materialize(block) : null,
+      });
+    }
+    return createDoc(content);
+  }
+
+  private orderedBlockIds(): string[] {
+    return [...this.blocks.entries()]
+      .filter(([, block]) => block.present.get())
+      .sort(([idA, a], [idB, b]) => {
+        const ka = a.posKey.get();
+        const kb = b.posKey.get();
+        if (ka !== kb)
+          return ka < kb ? -1 : 1;
+        return idA < idB ? -1 : idA > idB ? 1 : 0;
+      })
+      .map(([id]) => id);
+  }
+
+  private materialize(block: BlockState): Inline {
+    const nodes = block.rga.visible();
+    const marksPerChar = block.marks.resolve(nodes.map(node => node.id));
+    const runs: InlineNode[] = [];
+
+    for (let i = 0; i < nodes.length; i++) {
+      const marks = normalizeMarks([...marksPerChar[i]!].map(([type, value]) => valueToMark(type, value)));
+      runs.push({ text: nodes[i]!.value, marks });
+    }
+
+    return normalizeInline(runs);
+  }
+
+  // ----------------------------------------------------------------- maintenance
+
+  /**
+   * Compact the CRDT: drop tombstoned characters and fully-removed blocks that
+   * are covered by `stable`. Mark-span endpoints are preserved so formatting
+   * survives. Call ONLY at quiescence — every replica fully synced, nothing in
+   * flight — or a late op referencing dropped content can no longer integrate.
+   */
+  gc(stable: VersionVector): { blocks: number; chars: number } {
+    let blocks = 0;
+    let chars = 0;
+
+    for (const [id, block] of this.blocks) {
+      const removedAt = block.present.timestamp;
+      if (!block.present.get() && removedAt && stable.has(removedAt)) {
+        this.blocks.delete(id);
+        blocks += 1;
+        continue;
+      }
+
+      const keep = new Set<string>();
+      for (const span of block.marks.all()) {
+        keep.add(opIdToString(span.start));
+        keep.add(opIdToString(span.end));
+      }
+      chars += block.rga.gc(stable, charId => keep.has(opIdToString(charId)));
+    }
+
+    return { blocks, chars };
+  }
+
+  // ------------------------------------------------------------------ awareness
+
+  /** Whether a block currently exists and is visible. */
+  hasBlock(blockId: string): boolean {
+    return this.blocks.get(blockId)?.present.get() ?? false;
+  }
+
+  /** The char id a caret at `offset` sits after (null at block start) — a stable cursor anchor. */
+  private anchorAt(blockId: string, offset: number): OpId | null {
+    const block = this.blocks.get(blockId);
+    return block?.isText ? block.rga.idAt(offset - 1) : null;
+  }
+
+  /** Resolve a char-id anchor back to an offset in the current state. */
+  private offsetOf(blockId: string, afterCharId: OpId | null): number {
+    const block = this.blocks.get(blockId);
+    if (!block?.isText)
+      return 0;
+    if (afterCharId === null)
+      return 0;
+    const visible = block.rga.visible();
+    const index = visible.findIndex(node => opIdEq(node.id, afterCharId));
+    return index === -1 ? visible.length : index + 1;
+  }
+
+  /** Convert a model selection into a char-id anchor (for presence broadcast). */
+  toAnchor(selection: Selection): SelectionAnchor {
+    if (selection.kind === 'node')
+      return { kind: 'node', ids: selection.ids };
+    return {
+      kind: 'text',
+      anchor: { blockId: selection.anchor.blockId, afterCharId: this.anchorAt(selection.anchor.blockId, selection.anchor.offset) },
+      focus: { blockId: selection.focus.blockId, afterCharId: this.anchorAt(selection.focus.blockId, selection.focus.offset) },
+    };
+  }
+
+  /** Resolve an anchor back into a model selection against the current document. */
+  resolveAnchor(anchor: SelectionAnchor | null): Selection | null {
+    if (!anchor)
+      return null;
+    if (anchor.kind === 'node')
+      return anchor.ids.length > 0 ? nodeSelection(anchor.ids) : null;
+    if (!this.hasBlock(anchor.anchor.blockId) || !this.hasBlock(anchor.focus.blockId))
+      return null;
+    return textSelection(
+      { blockId: anchor.anchor.blockId, offset: this.offsetOf(anchor.anchor.blockId, anchor.anchor.afterCharId) },
+      { blockId: anchor.focus.blockId, offset: this.offsetOf(anchor.focus.blockId, anchor.focus.afterCharId) },
+    );
+  }
+
+  // ----------------------------------------------------------------- translate
+
+  /** Generate the ops for a local step, reading current state for ids/positions. */
+  translateStep(step: Step): EditorOp[] {
+    switch (step.type) {
+      case 'insertInline':
+        return this.insertInlineOps(step.blockId, step.offset, step.content);
+      case 'deleteText':
+        return this.deleteTextOps(step.blockId, step.from, step.to);
+      case 'replaceInline':
+        return [...this.deleteTextOps(step.blockId, step.from, step.to), ...this.insertInlineOps(step.blockId, step.from, step.content)];
+      case 'addMark':
+        return this.markOps(step.blockId, step.from, step.to, step.mark.type, markToValue(step.mark));
+      case 'removeMark':
+        return this.markOps(step.blockId, step.from, step.to, step.mark.type, null);
+      case 'setAttrs':
+        return this.blocks.has(step.blockId) ? [{ id: this.nextId(), kind: 'block-attrs', blockId: step.blockId, attrs: step.attrs }] : [];
+      case 'setType':
+        return this.blocks.has(step.blockId) ? [{ id: this.nextId(), kind: 'block-type', blockId: step.blockId, blockType: step.blockType, attrs: step.attrs }] : [];
+      case 'insertBlock':
+        return this.insertBlockOps(step.node, step.index);
+      case 'removeBlock':
+        return this.blocks.has(step.blockId) ? [{ id: this.nextId(), kind: 'block-remove', blockId: step.blockId }] : [];
+      case 'moveBlock':
+        return this.moveOps(step.blockId, step.toIndex);
+      case 'splitBlock':
+        return this.splitOps(step.blockId, step.offset, step.newId, step.newType, step.newAttrs);
+      case 'mergeBlock':
+        return this.mergeOps(step.blockId, step.intoId);
+      case 'setDoc':
+        return []; // whole-doc replace is local-only (e.g. applying a remote snapshot); not re-emitted
+    }
+  }
+
+  /** Ops to seed the CRDT from an initial document. */
+  seedFromDocument(doc: EditorDocument): EditorOp[] {
+    const ops: EditorOp[] = [];
+    let prevKey: string | null = null;
+
+    for (const node of doc.content) {
+      const posKey = keyBetween(prevKey, null);
+      prevKey = posKey;
+      ops.push(...this.blockOps(node, posKey));
+    }
+
+    return ops;
+  }
+
+  // ------------------------------------------------------------------ op builders
+
+  /** Ops for an `insertBlock` step: reactivate if the block already exists (undo), else create. */
+  private insertBlockOps(node: Node, index: number): EditorOp[] {
+    const posKey = this.posKeyForIndex(index);
+
+    if (this.blocks.has(node.id)) {
+      const isText = this.schema.nodeSpec(node.type)?.content.kind === 'text';
+      return [{ id: this.nextId(), kind: 'block-insert', blockId: node.id, blockType: node.type, attrs: node.attrs, posKey, isText }];
+    }
+
+    return this.blockOps(node, posKey);
+  }
+
+  private blockOps(node: Node, posKey: string): EditorOp[] {
+    const isText = this.schema.nodeSpec(node.type)?.content.kind === 'text';
+    const ops: EditorOp[] = [{
+      id: this.nextId(),
+      kind: 'block-insert',
+      blockId: node.id,
+      blockType: node.type,
+      attrs: node.attrs,
+      posKey,
+      isText,
+    }];
+
+    if (isText && Array.isArray(node.content))
+      ops.push(...this.inlineOps(node.id, node.content as Inline, null));
+
+    return ops;
+  }
+
+  /** Insert inline `content` after the char at `afterId` (null = block start). */
+  private inlineOps(blockId: string, content: Inline, afterId: OpId | null): EditorOp[] {
+    const ops: EditorOp[] = [];
+    let after = afterId;
+
+    for (const run of content) {
+      const charIds: OpId[] = [];
+      // Iterate UTF-16 code units (not code points) to match the editor's
+      // offset space — one RGA node per unit keeps offsets aligned for astral chars.
+      for (let i = 0; i < run.text.length; i++) {
+        const id = this.nextId();
+        ops.push({ id, kind: 'text-insert', blockId, afterId: after, ch: run.text[i]! });
+        after = id;
+        charIds.push(id);
+      }
+
+      if (charIds.length > 0) {
+        for (const mark of run.marks)
+          ops.push({ id: this.nextId(), kind: 'mark-add', blockId, markType: mark.type, value: markToValue(mark), startId: charIds[0]!, endId: charIds[charIds.length - 1]! });
+      }
+    }
+
+    return ops;
+  }
+
+  private insertInlineOps(blockId: string, offset: number, content: Inline): EditorOp[] {
+    const block = this.blocks.get(blockId);
+    if (!block || !block.isText)
+      return [];
+    return this.inlineOps(blockId, content, block.rga.idAt(offset - 1));
+  }
+
+  private deleteTextOps(blockId: string, from: number, to: number): EditorOp[] {
+    const block = this.blocks.get(blockId);
+    if (!block || !block.isText)
+      return [];
+    return block.rga.visible().slice(from, to)
+      .map(node => ({ id: this.nextId(), kind: 'text-delete' as const, blockId, charId: node.id }));
+  }
+
+  private markOps(blockId: string, from: number, to: number, markType: string, value: MarkValue): EditorOp[] {
+    const block = this.blocks.get(blockId);
+    if (!block || !block.isText || from >= to)
+      return [];
+
+    const visible = block.rga.visible();
+    const start = visible[from]?.id;
+    const end = visible[to - 1]?.id;
+    if (!start || !end)
+      return [];
+
+    return [{ id: this.nextId(), kind: 'mark-add', blockId, markType, value, startId: start, endId: end }];
+  }
+
+  private posKeyForIndex(index: number): string {
+    const order = this.orderedBlockIds();
+    const before = index > 0 ? this.blocks.get(order[index - 1]!)?.posKey.get() ?? null : null;
+    const after = index < order.length ? this.blocks.get(order[index]!)?.posKey.get() ?? null : null;
+    return keyBetween(before, after);
+  }
+
+  private moveOps(blockId: string, toIndex: number): EditorOp[] {
+    if (!this.blocks.has(blockId))
+      return [];
+
+    const order = this.orderedBlockIds().filter(id => id !== blockId);
+    const before = toIndex > 0 ? this.blocks.get(order[toIndex - 1]!)?.posKey.get() ?? null : null;
+    const after = toIndex < order.length ? this.blocks.get(order[toIndex]!)?.posKey.get() ?? null : null;
+    return [{ id: this.nextId(), kind: 'block-move', blockId, posKey: keyBetween(before, after) }];
+  }
+
+  private splitOps(blockId: string, offset: number, newId: string, newType?: string, newAttrs?: Attrs): EditorOp[] {
+    const block = this.blocks.get(blockId);
+    if (!block || !block.isText)
+      return [];
+
+    const order = this.orderedBlockIds();
+    const index = order.indexOf(blockId);
+    const nextKey = index >= 0 && index + 1 < order.length ? this.blocks.get(order[index + 1]!)!.posKey.get() : null;
+    const posKey = keyBetween(block.posKey.get(), nextKey);
+
+    // Undo of a merge: the split's target block already exists (tombstoned) with
+    // its original content intact. Reactivate it and drop the merged-in tail from
+    // the source instead of recreating content (which would duplicate it).
+    const existing = this.blocks.get(newId);
+    if (existing) {
+      const reactivate: EditorOp[] = [{ id: this.nextId(), kind: 'block-insert', blockId: newId, blockType: existing.type.get(), attrs: existing.attrs.get(), posKey, isText: existing.isText }];
+      for (const node of block.rga.visible().slice(offset))
+        reactivate.push({ id: this.nextId(), kind: 'text-delete', blockId, charId: node.id });
+      return reactivate;
+    }
+
+    const type = newType ?? block.type.get();
+    const attrs = newAttrs ?? (newType ? this.schema.defaultAttrs(newType) : block.attrs.get());
+    const isText = this.schema.nodeSpec(type)?.content.kind === 'text';
+
+    const ops: EditorOp[] = [{ id: this.nextId(), kind: 'block-insert', blockId: newId, blockType: type, attrs, posKey, isText }];
+
+    // Re-create the tail (offset..end) in the new block, then tombstone it in the old.
+    const tail = block.rga.visible().slice(offset);
+    const marksPerChar = block.marks.resolve(block.rga.visible().map(node => node.id));
+    let after: OpId | null = null;
+
+    for (let k = 0; k < tail.length; k++) {
+      const id = this.nextId();
+      ops.push({ id, kind: 'text-insert', blockId: newId, afterId: after, ch: tail[k]!.value });
+      after = id;
+      for (const [markType, value] of marksPerChar[offset + k]!)
+        ops.push({ id: this.nextId(), kind: 'mark-add', blockId: newId, markType, value, startId: id, endId: id });
+    }
+
+    for (const node of tail)
+      ops.push({ id: this.nextId(), kind: 'text-delete', blockId, charId: node.id });
+
+    return ops;
+  }
+
+  private mergeOps(blockId: string, intoId: string): EditorOp[] {
+    const source = this.blocks.get(blockId);
+    const target = this.blocks.get(intoId);
+    if (!source || !target || !source.isText || !target.isText)
+      return [];
+
+    const ops: EditorOp[] = [];
+    const sourceChars = source.rga.visible();
+    const marksPerChar = source.marks.resolve(sourceChars.map(node => node.id));
+    let after = target.rga.idAt(target.rga.length - 1);
+
+    for (let k = 0; k < sourceChars.length; k++) {
+      const id = this.nextId();
+      ops.push({ id, kind: 'text-insert', blockId: intoId, afterId: after, ch: sourceChars[k]!.value });
+      after = id;
+      for (const [markType, value] of marksPerChar[k]!)
+        ops.push({ id: this.nextId(), kind: 'mark-add', blockId: intoId, markType, value, startId: id, endId: id });
+    }
+
+    ops.push({ id: this.nextId(), kind: 'block-remove', blockId });
+    return ops;
+  }
+}
+
+function register<T>(value: T, id: OpId): LwwRegister<T> {
+  const reg = new LwwRegister<T>(value);
+  reg.set(value, id);
+  return reg;
+}
diff --git a/vue/editor/src/crdt/native/provider.ts b/vue/editor/src/crdt/native/provider.ts
new file mode 100644
index 0000000..7450a8d
--- /dev/null
+++ b/vue/editor/src/crdt/native/provider.ts
@@ -0,0 +1,139 @@
+import { Replica, VersionVector, createSiteId, decodeJson, decodeOps, decodeStateVector, encodeJson, encodeOps, encodeStateVector } from '@robonen/crdt';
+import type { EditorDocument, Selection } from '../../model';
+import type { Schema } from '../../schema';
+import type { Transaction } from '../../state';
+import type { AwarenessState, CrdtProvider, CursorUser, RemoteCursor } from '../types';
+import type { EditorOp } from './document-crdt';
+import { DocumentCrdt } from './document-crdt';
+
+export interface NativeProviderOptions {
+  /** Schema (block/mark specs) — needed to know which blocks hold text. */
+  schema: Schema;
+  /** Seed the CRDT from this document (use for the FIRST replica only; joiners sync instead). */
+  doc?: EditorDocument;
+  /** Replica/site id (defaults to a random one). */
+  site?: string;
+  /** Identity broadcast with this replica's cursor. */
+  user?: CursorUser;
+}
+
+/**
+ * The built-in CRDT provider backed by `@robonen/crdt`: a fractional-ordered set
+ * of blocks, each a text RGA + mark store. Editor steps map to CRDT ops via
+ * {@link DocumentCrdt}; ops sync as op batches over any transport.
+ */
+export function createNativeProvider(options: NativeProviderOptions): CrdtProvider {
+  const document = new DocumentCrdt(options.schema);
+  const site = options.site ?? createSiteId();
+  const replica = new Replica<EditorOp>({ integrate: op => document.applyOp(op) }, site);
+  document.setIdFactory(() => replica.nextId());
+
+  const localListeners = new Set<(bytes: Uint8Array) => void>();
+  const remoteListeners = new Set<() => void>();
+  const localAwarenessListeners = new Set<(bytes: Uint8Array) => void>();
+  const awarenessListeners = new Set<(cursors: RemoteCursor[]) => void>();
+  const remoteStates = new Map<string, AwarenessState>();
+
+  if (options.doc) {
+    for (const op of document.seedFromDocument(options.doc))
+      replica.commitLocal(op);
+  }
+
+  function resolveCursors(): RemoteCursor[] {
+    const cursors: RemoteCursor[] = [];
+    for (const state of remoteStates.values()) {
+      if (state.clientId === site)
+        continue;
+      cursors.push({ clientId: state.clientId, user: state.user, selection: document.resolveAnchor(state.anchor) });
+    }
+    return cursors;
+  }
+
+  return {
+    name: 'native',
+
+    load: () => document.toDocument(),
+
+    applyLocal: (tr: Transaction) => {
+      const ops: EditorOp[] = [];
+      for (const step of tr.steps) {
+        for (const op of document.translateStep(step)) {
+          replica.commitLocal(op);
+          ops.push(op);
+        }
+      }
+      if (ops.length > 0) {
+        const bytes = encodeOps(ops);
+        for (const listener of localListeners)
+          listener(bytes);
+        // Local edits shifted the document — re-resolve remote cursor positions.
+        if (remoteStates.size > 0) {
+          const cursors = resolveCursors();
+          for (const listener of awarenessListeners)
+            listener(cursors);
+        }
+      }
+    },
+
+    applyUpdate: (bytes) => {
+      const applied = replica.receive(decodeOps<EditorOp>(bytes));
+      if (applied.length > 0) {
+        for (const listener of remoteListeners)
+          listener();
+        // Remote ops shifted the document — re-resolve cursors against new positions.
+        if (remoteStates.size > 0) {
+          const cursors = resolveCursors();
+          for (const listener of awarenessListeners)
+            listener(cursors);
+        }
+      }
+    },
+
+    encodeStateVector: () => encodeStateVector(replica.version),
+    encodeDelta: remote => encodeOps(replica.delta(remote ? decodeStateVector(remote) : new VersionVector())),
+
+    onLocalOps: (listener) => {
+      localListeners.add(listener);
+      return () => localListeners.delete(listener);
+    },
+    onRemoteApplied: (listener) => {
+      remoteListeners.add(listener);
+      return () => remoteListeners.delete(listener);
+    },
+
+    setLocalSelection: (selection: Selection | null) => {
+      const state: AwarenessState = { clientId: site, user: options.user, anchor: selection ? document.toAnchor(selection) : null };
+      const bytes = encodeJson(state);
+      for (const listener of localAwarenessListeners)
+        listener(bytes);
+    },
+
+    onLocalAwareness: (listener) => {
+      localAwarenessListeners.add(listener);
+      return () => localAwarenessListeners.delete(listener);
+    },
+
+    applyAwareness: (bytes) => {
+      const state = decodeJson<AwarenessState>(bytes);
+      remoteStates.set(state.clientId, state);
+      const cursors = resolveCursors();
+      for (const listener of awarenessListeners)
+        listener(cursors);
+    },
+
+    onAwareness: (listener) => {
+      awarenessListeners.add(listener);
+      return () => awarenessListeners.delete(listener);
+    },
+
+    gc: stable => document.gc(stable ? decodeStateVector(stable) : replica.version),
+
+    destroy: () => {
+      localListeners.clear();
+      remoteListeners.clear();
+      localAwarenessListeners.clear();
+      awarenessListeners.clear();
+      remoteStates.clear();
+    },
+  };
+}
diff --git a/vue/editor/src/crdt/reconcile.ts b/vue/editor/src/crdt/reconcile.ts
new file mode 100644
index 0000000..9546e08
--- /dev/null
+++ b/vue/editor/src/crdt/reconcile.ts
@@ -0,0 +1,49 @@
+import type { Content, EditorDocument, Node } from '../model';
+import { attrsEq, createDoc, isInlineContent, marksEq } from '../model';
+
+function contentEq(a: Content, b: Content): boolean {
+  if (a === b)
+    return true;
+  if (a === null || b === null)
+    return false;
+
+  if (isInlineContent(a) && isInlineContent(b)) {
+    if (a.length !== b.length)
+      return false;
+    for (let i = 0; i < a.length; i++) {
+      if (a[i]!.text !== b[i]!.text || !marksEq(a[i]!.marks, b[i]!.marks))
+        return false;
+    }
+    return true;
+  }
+
+  return false; // container Node[] — unused in the flat model; treat as changed
+}
+
+function nodeEq(a: Node, b: Node): boolean {
+  return a.id === b.id && a.type === b.type && attrsEq(a.attrs, b.attrs) && contentEq(a.content, b.content);
+}
+
+/**
+ * Build a document equal to `next` but reusing block-node identities from `prev`
+ * wherever a block is deep-equal — so applying a remote change repaints only the
+ * blocks that actually changed (others keep their reference, and the local caret
+ * in them is undisturbed). Returns `prev` unchanged when nothing differs.
+ */
+export function reconcileDoc(prev: EditorDocument, next: EditorDocument): EditorDocument {
+  const prevById = new Map(prev.content.map(node => [node.id, node]));
+  let changed = prev.content.length !== next.content.length;
+
+  const content = next.content.map((node, index) => {
+    const before = prevById.get(node.id);
+    if (before && nodeEq(before, node)) {
+      if (prev.content[index]?.id !== node.id)
+        changed = true; // same block, new position
+      return before; // reuse identity → no repaint
+    }
+    changed = true;
+    return node;
+  });
+
+  return changed ? createDoc(content) : prev;
+}
diff --git a/vue/editor/src/crdt/types.ts b/vue/editor/src/crdt/types.ts
new file mode 100644
index 0000000..b35d110
--- /dev/null
+++ b/vue/editor/src/crdt/types.ts
@@ -0,0 +1,78 @@
+import type { OpId } from '@robonen/crdt';
+import type { EditorDocument, Selection } from '../model';
+import type { Transaction } from '../state';
+
+/** Marks transactions that apply remote CRDT changes (so they bypass local history). */
+export const REMOTE_ORIGIN = 'crdt-remote';
+
+export interface CursorUser {
+  readonly name?: string;
+  readonly color?: string;
+}
+
+/** A caret point anchored to the character op id it sits after (stable under remote edits). */
+export interface PointAnchor {
+  readonly blockId: string;
+  readonly afterCharId: OpId | null;
+}
+
+/** A selection anchored to char ids rather than offsets, for awareness. */
+export type SelectionAnchor
+  = | { readonly kind: 'text'; readonly anchor: PointAnchor; readonly focus: PointAnchor }
+    | { readonly kind: 'node'; readonly ids: readonly string[] };
+
+/** Ephemeral per-client presence (cursor + identity), sent over the awareness channel. */
+export interface AwarenessState {
+  readonly clientId: string;
+  readonly user?: CursorUser;
+  readonly anchor: SelectionAnchor | null;
+}
+
+/** A remote participant's cursor, resolved back into local model coordinates. */
+export interface RemoteCursor {
+  readonly clientId: string;
+  readonly user?: CursorUser;
+  readonly selection: Selection | null;
+}
+
+/**
+ * A pluggable CRDT backend. The editor core stays CRDT-agnostic behind this
+ * interface; {@link bindCrdt} wires it to an {@link Editor}, and any transport
+ * (BroadcastChannel, WebSocket, …) is layered on via the op + awareness hooks.
+ */
+export interface CrdtProvider {
+  readonly name: string;
+  /** The current document materialized from CRDT state. */
+  load: () => EditorDocument;
+  /** Translate a local transaction's steps into CRDT ops and apply them. */
+  applyLocal: (tr: Transaction) => void;
+  /** Merge a remote update (encoded ops) into the CRDT. */
+  applyUpdate: (bytes: Uint8Array, origin?: unknown) => void;
+  /** Encode this replica's version vector for a sync handshake. */
+  encodeStateVector: () => Uint8Array;
+  /** Encode ops a remote is missing (by its state vector); omit for a full snapshot. */
+  encodeDelta: (remoteStateVector?: Uint8Array) => Uint8Array;
+  /** Subscribe to locally-produced op batches (to broadcast). Returns unsubscribe. */
+  onLocalOps: (listener: (bytes: Uint8Array) => void) => () => void;
+  /** Subscribe to "remote ops were applied" (to reflect into editor state). Returns unsubscribe. */
+  onRemoteApplied: (listener: () => void) => () => void;
+
+  // --- awareness (ephemeral; not part of the persistent document) ---
+  /** Publish the local selection as presence (anchored to char ids). */
+  setLocalSelection: (selection: Selection | null) => void;
+  /** Subscribe to locally-produced awareness frames (to broadcast). Returns unsubscribe. */
+  onLocalAwareness: (listener: (bytes: Uint8Array) => void) => () => void;
+  /** Merge a remote awareness frame. */
+  applyAwareness: (bytes: Uint8Array) => void;
+  /** Subscribe to the resolved set of remote cursors. Returns unsubscribe. */
+  onAwareness: (listener: (cursors: RemoteCursor[]) => void) => () => void;
+
+  /**
+   * Compact tombstones and removed blocks covered by `stableStateVector` (or this
+   * replica's version when omitted). Safe only at quiescence — all peers fully
+   * synced, nothing in flight. Returns how much was dropped.
+   */
+  gc: (stableStateVector?: Uint8Array) => { blocks: number; chars: number };
+
+  destroy: () => void;
+}
diff --git a/vue/editor/src/env.d.ts b/vue/editor/src/env.d.ts
new file mode 100644
index 0000000..71a152f
--- /dev/null
+++ b/vue/editor/src/env.d.ts
@@ -0,0 +1,13 @@
+export {};
+
+declare global {
+  const __DEV__: boolean;
+}
+
+declare module 'vue' {
+  type ComponentCustomProps = Record<`data${string}`, unknown>;
+}
+
+declare module 'vue' {
+  type HTMLAttributes = Record<`data-${string}`, unknown>;
+}
diff --git a/vue/editor/src/index.ts b/vue/editor/src/index.ts
new file mode 100644
index 0000000..23b974d
--- /dev/null
+++ b/vue/editor/src/index.ts
@@ -0,0 +1,11 @@
+export * from './model';
+export * from './schema';
+export * from './registry';
+export * from './state';
+export * from './commands';
+export * from './keymap';
+export * from './view';
+export * from './blocks';
+export * from './marks';
+export * from './preset';
+export * from './crdt';
diff --git a/vue/editor/src/keymap/compile.ts b/vue/editor/src/keymap/compile.ts
new file mode 100644
index 0000000..bdc5a48
--- /dev/null
+++ b/vue/editor/src/keymap/compile.ts
@@ -0,0 +1,22 @@
+import type { Command } from '../state';
+import type { Platform } from '../view/config';
+import type { Keymap } from './types';
+import { normalizeCombo } from './normalize';
+
+/**
+ * Merge ordered keymaps into a single normalized lookup. Earlier keymaps win, so
+ * pass user overrides before the defaults: `compileKeymaps([user, defaults], …)`.
+ */
+export function compileKeymaps(keymaps: readonly Keymap[], platform: Platform): Map<string, Command> {
+  const compiled = new Map<string, Command>();
+
+  for (const keymap of keymaps) {
+    for (const combo in keymap) {
+      const normalized = normalizeCombo(combo, platform);
+      if (!compiled.has(normalized))
+        compiled.set(normalized, keymap[combo]!);
+    }
+  }
+
+  return compiled;
+}
diff --git a/vue/editor/src/keymap/defaults.ts b/vue/editor/src/keymap/defaults.ts
new file mode 100644
index 0000000..68c8350
--- /dev/null
+++ b/vue/editor/src/keymap/defaults.ts
@@ -0,0 +1,55 @@
+import {
+  chainCommands,
+  deleteSelection,
+  indentListItem,
+  insertHardBreak,
+  joinBackward,
+  joinForward,
+  moveBlockDown,
+  moveBlockUp,
+  outdentListItem,
+  selectAll,
+  setBlockType,
+  splitBlock,
+  toggleBlockType,
+  toggleMark,
+} from '../commands';
+import type { Command, Editor } from '../state';
+import type { Keymap } from './types';
+
+/**
+ * The standard editor keymap. Mark/heading shortcuts are no-ops when the mark or
+ * block type isn't registered. Enter/Backspace/Delete are no-ops except at block
+ * boundaries, so ordinary intra-block editing stays native. Arrow navigation and
+ * cross-block selection are fully native (one contenteditable spans the doc).
+ */
+export function defaultKeymap(editor: Editor): Keymap {
+  const undo: Command = () => editor.undo();
+  const redo: Command = () => editor.redo();
+
+  const keymap: Keymap = {
+    'Mod-b': toggleMark('bold'),
+    'Mod-i': toggleMark('italic'),
+    'Mod-u': toggleMark('underline'),
+    'Mod-Shift-s': toggleMark('strike'),
+    'Mod-e': toggleMark('code'),
+    'Mod-z': undo,
+    'Mod-Shift-z': redo,
+    'Mod-y': redo,
+    Enter: splitBlock,
+    'Shift-Enter': insertHardBreak,
+    Backspace: chainCommands(deleteSelection, joinBackward),
+    Delete: chainCommands(deleteSelection, joinForward),
+    'Mod-a': selectAll,
+    Tab: indentListItem,
+    'Shift-Tab': outdentListItem,
+    'Mod-Shift-ArrowUp': moveBlockUp,
+    'Mod-Shift-ArrowDown': moveBlockDown,
+    'Mod-Alt-0': setBlockType('paragraph'),
+  };
+
+  for (let level = 1; level <= 6; level++)
+    keymap[`Mod-Alt-${level}`] = toggleBlockType('heading', { level });
+
+  return keymap;
+}
diff --git a/vue/editor/src/keymap/dispatcher.ts b/vue/editor/src/keymap/dispatcher.ts
new file mode 100644
index 0000000..56089cd
--- /dev/null
+++ b/vue/editor/src/keymap/dispatcher.ts
@@ -0,0 +1,17 @@
+import type { Command, CommandView, Dispatch, EditorState } from '../state';
+import { eventToCombo } from './normalize';
+
+/**
+ * Look up and run the command bound to a keydown event. Returns `true` when a
+ * command handled it (the caller should then `preventDefault`).
+ */
+export function runKeydown(
+  event: KeyboardEvent,
+  compiled: Map<string, Command>,
+  state: EditorState,
+  dispatch: Dispatch,
+  view: CommandView,
+): boolean {
+  const command = compiled.get(eventToCombo(event));
+  return command ? command(state, dispatch, view) : false;
+}
diff --git a/vue/editor/src/keymap/index.ts b/vue/editor/src/keymap/index.ts
new file mode 100644
index 0000000..008fb8b
--- /dev/null
+++ b/vue/editor/src/keymap/index.ts
@@ -0,0 +1,5 @@
+export * from './types';
+export * from './normalize';
+export * from './compile';
+export * from './defaults';
+export * from './dispatcher';
diff --git a/vue/editor/src/keymap/normalize.ts b/vue/editor/src/keymap/normalize.ts
new file mode 100644
index 0000000..2260668
--- /dev/null
+++ b/vue/editor/src/keymap/normalize.ts
@@ -0,0 +1,52 @@
+import type { Platform } from '../view/config';
+
+const MOD_ORDER = ['Ctrl', 'Alt', 'Shift', 'Meta'] as const;
+
+function modAlias(token: string, platform: Platform): string | null {
+  switch (token.toLowerCase()) {
+    case 'mod': return platform === 'mac' ? 'Meta' : 'Ctrl';
+    case 'cmd':
+    case 'command':
+    case 'meta': return 'Meta';
+    case 'ctrl':
+    case 'control': return 'Ctrl';
+    case 'alt':
+    case 'option': return 'Alt';
+    case 'shift': return 'Shift';
+    default: return null;
+  }
+}
+
+/**
+ * Normalize a human combo (`'Mod-Shift-z'`) to a canonical, platform-resolved
+ * form (`'Shift-Meta-z'` on mac). Modifiers are ordered deterministically so a
+ * keydown event maps to the same string via {@link eventToCombo}.
+ */
+export function normalizeCombo(combo: string, platform: Platform): string {
+  const parts = combo.split(/[-+]/).map(part => part.trim()).filter(Boolean);
+  const key = parts.pop() ?? '';
+  const mods = new Set<string>();
+
+  for (const part of parts) {
+    const mod = modAlias(part, platform);
+    if (mod)
+      mods.add(mod);
+  }
+
+  const order = MOD_ORDER.filter(mod => mods.has(mod));
+  const normalizedKey = key.length === 1 ? key.toLowerCase() : key;
+  return [...order, normalizedKey].join('-');
+}
+
+/** Canonical combo string for a keydown event (matches {@link normalizeCombo}). */
+export function eventToCombo(event: KeyboardEvent): string {
+  const mods: string[] = [];
+
+  if (event.ctrlKey) mods.push('Ctrl');
+  if (event.altKey) mods.push('Alt');
+  if (event.shiftKey) mods.push('Shift');
+  if (event.metaKey) mods.push('Meta');
+
+  const key = event.key.length === 1 ? event.key.toLowerCase() : event.key;
+  return [...mods, key].join('-');
+}
diff --git a/vue/editor/src/keymap/types.ts b/vue/editor/src/keymap/types.ts
new file mode 100644
index 0000000..654adbc
--- /dev/null
+++ b/vue/editor/src/keymap/types.ts
@@ -0,0 +1,4 @@
+import type { Command } from '../state';
+
+/** A keymap: normalized (or human) key-combos mapped to commands. */
+export type Keymap = Record<string, Command>;
diff --git a/vue/editor/src/marks/bold.ts b/vue/editor/src/marks/bold.ts
new file mode 100644
index 0000000..e38a4f8
--- /dev/null
+++ b/vue/editor/src/marks/bold.ts
@@ -0,0 +1,12 @@
+import { defineMark } from '../registry';
+
+export const bold = defineMark({
+  type: 'bold',
+  spec: {
+    inclusive: true,
+    rank: 1,
+    toDOM: () => ['strong', 0],
+    parseDOM: [{ tag: 'strong' }, { tag: 'b' }],
+  },
+  meta: { title: 'Bold', icon: 'bold', hotkey: 'Mod-b' },
+});
diff --git a/vue/editor/src/marks/code.ts b/vue/editor/src/marks/code.ts
new file mode 100644
index 0000000..01b762a
--- /dev/null
+++ b/vue/editor/src/marks/code.ts
@@ -0,0 +1,13 @@
+import { defineMark } from '../registry';
+
+export const code = defineMark({
+  type: 'code',
+  spec: {
+    inclusive: false,
+    rank: 9,
+    excludes: '_all', // inline code wins: it strips every other mark on the range
+    toDOM: () => ['code', 0],
+    parseDOM: [{ tag: 'code' }],
+  },
+  meta: { title: 'Inline code', icon: 'code', hotkey: 'Mod-e' },
+});
diff --git a/vue/editor/src/marks/highlight.ts b/vue/editor/src/marks/highlight.ts
new file mode 100644
index 0000000..cf3eb6a
--- /dev/null
+++ b/vue/editor/src/marks/highlight.ts
@@ -0,0 +1,12 @@
+import { defineMark } from '../registry';
+
+export const highlight = defineMark({
+  type: 'highlight',
+  spec: {
+    inclusive: true,
+    rank: 5,
+    toDOM: () => ['mark', 0],
+    parseDOM: [{ tag: 'mark' }],
+  },
+  meta: { title: 'Highlight', icon: 'highlighter' },
+});
diff --git a/vue/editor/src/marks/index.ts b/vue/editor/src/marks/index.ts
new file mode 100644
index 0000000..dbd6a9a
--- /dev/null
+++ b/vue/editor/src/marks/index.ts
@@ -0,0 +1,7 @@
+export { bold } from './bold';
+export { italic } from './italic';
+export { underline } from './underline';
+export { strike } from './strike';
+export { highlight } from './highlight';
+export { code } from './code';
+export { link } from './link';
diff --git a/vue/editor/src/marks/italic.ts b/vue/editor/src/marks/italic.ts
new file mode 100644
index 0000000..bbd10b6
--- /dev/null
+++ b/vue/editor/src/marks/italic.ts
@@ -0,0 +1,12 @@
+import { defineMark } from '../registry';
+
+export const italic = defineMark({
+  type: 'italic',
+  spec: {
+    inclusive: true,
+    rank: 2,
+    toDOM: () => ['em', 0],
+    parseDOM: [{ tag: 'em' }, { tag: 'i' }],
+  },
+  meta: { title: 'Italic', icon: 'italic', hotkey: 'Mod-i' },
+});
diff --git a/vue/editor/src/marks/link.ts b/vue/editor/src/marks/link.ts
new file mode 100644
index 0000000..f8dca72
--- /dev/null
+++ b/vue/editor/src/marks/link.ts
@@ -0,0 +1,31 @@
+import type { Mark } from '../model';
+import { defineMark } from '../registry';
+
+export const link = defineMark({
+  type: 'link',
+  spec: {
+    inclusive: false, // typing past a link's end does not extend it
+    rank: 10,
+    attrs: {
+      href: { default: '' },
+      target: { default: '_blank' },
+    },
+    toDOM: (mark: Mark) => [
+      'a',
+      {
+        href: String(mark.attrs?.['href'] ?? ''),
+        target: String(mark.attrs?.['target'] ?? '_blank'),
+        rel: 'noopener noreferrer',
+      },
+      0,
+    ],
+    parseDOM: [{
+      tag: 'a[href]',
+      getAttrs: (el: HTMLElement) => ({
+        href: el.getAttribute('href') ?? '',
+        target: el.getAttribute('target') ?? '_blank',
+      }),
+    }],
+  },
+  meta: { title: 'Link', icon: 'link', hotkey: 'Mod-k' },
+});
diff --git a/vue/editor/src/marks/strike.ts b/vue/editor/src/marks/strike.ts
new file mode 100644
index 0000000..a9aedcc
--- /dev/null
+++ b/vue/editor/src/marks/strike.ts
@@ -0,0 +1,12 @@
+import { defineMark } from '../registry';
+
+export const strike = defineMark({
+  type: 'strike',
+  spec: {
+    inclusive: true,
+    rank: 4,
+    toDOM: () => ['s', 0],
+    parseDOM: [{ tag: 's' }, { tag: 'del' }],
+  },
+  meta: { title: 'Strikethrough', icon: 'strikethrough', hotkey: 'Mod-Shift-s' },
+});
diff --git a/vue/editor/src/marks/underline.ts b/vue/editor/src/marks/underline.ts
new file mode 100644
index 0000000..e3a15f4
--- /dev/null
+++ b/vue/editor/src/marks/underline.ts
@@ -0,0 +1,12 @@
+import { defineMark } from '../registry';
+
+export const underline = defineMark({
+  type: 'underline',
+  spec: {
+    inclusive: true,
+    rank: 3,
+    toDOM: () => ['u', 0],
+    parseDOM: [{ tag: 'u' }],
+  },
+  meta: { title: 'Underline', icon: 'underline', hotkey: 'Mod-u' },
+});
diff --git a/vue/editor/src/model/__test__/inline.test.ts b/vue/editor/src/model/__test__/inline.test.ts
new file mode 100644
index 0000000..60a61a6
--- /dev/null
+++ b/vue/editor/src/model/__test__/inline.test.ts
@@ -0,0 +1,46 @@
+import { describe, expect, it } from 'vitest';
+import type { Inline } from '../inline';
+import {
+  addMarkInline,
+  deleteTextInline,
+  inlineText,
+  insertTextInline,
+  marksAt,
+  normalizeInline,
+  removeMarkInline,
+} from '../inline';
+
+const bold = { type: 'bold' };
+
+describe('inline', () => {
+  it('merges adjacent equal-mark runs and drops empties', () => {
+    const input: Inline = [{ text: 'a', marks: [] }, { text: '', marks: [] }, { text: 'b', marks: [] }];
+    expect(normalizeInline(input)).toEqual([{ text: 'ab', marks: [] }]);
+  });
+
+  it('inserts text at an offset', () => {
+    expect(inlineText(insertTextInline([{ text: 'ac', marks: [] }], 1, 'b', []))).toBe('abc');
+  });
+
+  it('adds a mark over a range, splitting runs', () => {
+    expect(addMarkInline([{ text: 'abc', marks: [] }], 1, 2, bold)).toEqual([
+      { text: 'a', marks: [] },
+      { text: 'b', marks: [bold] },
+      { text: 'c', marks: [] },
+    ]);
+  });
+
+  it('removes a mark over a range', () => {
+    expect(removeMarkInline([{ text: 'abc', marks: [bold] }], 0, 3, 'bold')).toEqual([{ text: 'abc', marks: [] }]);
+  });
+
+  it('deletes a range', () => {
+    expect(inlineText(deleteTextInline([{ text: 'abcd', marks: [] }], 1, 3))).toBe('ad');
+  });
+
+  it('reads marks at a caret as the preceding character marks', () => {
+    const marked: Inline = [{ text: 'ab', marks: [bold] }, { text: 'c', marks: [] }];
+    expect(marksAt(marked, 2)).toEqual([bold]);
+    expect(marksAt(marked, 3)).toEqual([]);
+  });
+});
diff --git a/vue/editor/src/model/attrs.ts b/vue/editor/src/model/attrs.ts
new file mode 100644
index 0000000..7eab546
--- /dev/null
+++ b/vue/editor/src/model/attrs.ts
@@ -0,0 +1,57 @@
+/**
+ * Attribute values are JSON-serializable so documents round-trip losslessly and
+ * a CRDT adapter can map them onto its own primitives without special-casing.
+ */
+export type AttrValue
+  = | string
+    | number
+    | boolean
+    | null
+    | readonly AttrValue[]
+    | { readonly [key: string]: AttrValue };
+
+export type Attrs = Readonly<Record<string, AttrValue>>;
+
+/**
+ * Structural equality for two attribute values. Order-insensitive for object
+ * keys, deep for arrays/objects. Used by mark/attr deduplication and tests.
+ */
+export function attrValueEq(a: AttrValue | undefined, b: AttrValue | undefined): boolean {
+  if (a === b)
+    return true;
+
+  if (a === null || b === null || a === undefined || b === undefined)
+    return a === b;
+
+  const aArr = Array.isArray(a);
+  const bArr = Array.isArray(b);
+
+  if (aArr || bArr) {
+    if (!aArr || !bArr || a.length !== b.length)
+      return false;
+
+    return a.every((v, i) => attrValueEq(v, b[i]));
+  }
+
+  if (typeof a === 'object' && typeof b === 'object')
+    return attrsEq(a as Attrs, b as Attrs);
+
+  return false;
+}
+
+/**
+ * Structural equality for attribute bags. `undefined` and `{}` are equivalent
+ * so `{ type: 'bold' }` equals `{ type: 'bold', attrs: {} }`.
+ */
+export function attrsEq(a?: Attrs, b?: Attrs): boolean {
+  if (a === b)
+    return true;
+
+  const aKeys = a ? Object.keys(a) : [];
+  const bKeys = b ? Object.keys(b) : [];
+
+  if (aKeys.length !== bKeys.length)
+    return false;
+
+  return aKeys.every(key => attrValueEq(a![key], b?.[key]));
+}
diff --git a/vue/editor/src/model/document.ts b/vue/editor/src/model/document.ts
new file mode 100644
index 0000000..ab6a223
--- /dev/null
+++ b/vue/editor/src/model/document.ts
@@ -0,0 +1,59 @@
+import type { Node } from './node';
+
+/**
+ * The editor document: an ordered list of top-level blocks. Default blocks are
+ * flat (lists use indent attributes, not nesting), so document helpers operate
+ * on the top-level array.
+ */
+export interface EditorDocument {
+  readonly type: 'doc';
+  readonly content: readonly Node[];
+}
+
+/** Construct a document from blocks. */
+export function createDoc(content: readonly Node[] = []): EditorDocument {
+  return { type: 'doc', content };
+}
+
+/** Index of a block by id, or `-1` if absent. */
+export function blockIndex(doc: EditorDocument, id: string): number {
+  return doc.content.findIndex(block => block.id === id);
+}
+
+/** A block and its index, or `null` if absent. */
+export function findBlock(doc: EditorDocument, id: string): { node: Node; index: number } | null {
+  const index = blockIndex(doc, id);
+  return index === -1 ? null : { node: doc.content[index]!, index };
+}
+
+/** A block by id, or `null`. */
+export function blockById(doc: EditorDocument, id: string): Node | null {
+  return doc.content.find(block => block.id === id) ?? null;
+}
+
+/** The block before `id` in document order, or `null`. */
+export function previousBlock(doc: EditorDocument, id: string): Node | null {
+  const index = blockIndex(doc, id);
+  return index > 0 ? doc.content[index - 1]! : null;
+}
+
+/** The block after `id` in document order, or `null`. */
+export function nextBlock(doc: EditorDocument, id: string): Node | null {
+  const index = blockIndex(doc, id);
+  return index !== -1 && index < doc.content.length - 1 ? doc.content[index + 1]! : null;
+}
+
+/** First block, or `null` for an empty document. */
+export function firstBlock(doc: EditorDocument): Node | null {
+  return doc.content[0] ?? null;
+}
+
+/** Last block, or `null` for an empty document. */
+export function lastBlock(doc: EditorDocument): Node | null {
+  return doc.content[doc.content.length - 1] ?? null;
+}
+
+/** Return a copy of `doc` with a different block list. */
+export function replaceBlocks(doc: EditorDocument, content: readonly Node[]): EditorDocument {
+  return { ...doc, content };
+}
diff --git a/vue/editor/src/model/id.ts b/vue/editor/src/model/id.ts
new file mode 100644
index 0000000..d7cc02b
--- /dev/null
+++ b/vue/editor/src/model/id.ts
@@ -0,0 +1,13 @@
+/**
+ * Stable, collision-resistant identifier for blocks. Block ids survive
+ * split/merge/move and are how positions, selections, and the CRDT address a
+ * block — so they must be unique and never reused.
+ */
+export function createId(): string {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function')
+    return crypto.randomUUID();
+
+  // Fallback for exotic runtimes without WebCrypto (Node >= 19 and all target
+  // browsers provide `crypto.randomUUID`, so this is effectively dead code).
+  return `b-${Math.random().toString(36).slice(2)}-${Date.now().toString(36)}`;
+}
diff --git a/vue/editor/src/model/index.ts b/vue/editor/src/model/index.ts
new file mode 100644
index 0000000..3542a3e
--- /dev/null
+++ b/vue/editor/src/model/index.ts
@@ -0,0 +1,8 @@
+export * from './attrs';
+export * from './marks';
+export * from './inline';
+export * from './id';
+export * from './node';
+export * from './document';
+export * from './position';
+export * from './selection';
diff --git a/vue/editor/src/model/inline.ts b/vue/editor/src/model/inline.ts
new file mode 100644
index 0000000..53490d2
--- /dev/null
+++ b/vue/editor/src/model/inline.ts
@@ -0,0 +1,177 @@
+import type { Mark, Marks } from './marks';
+import { marksEq, normalizeMarks } from './marks';
+
+/**
+ * A run of text sharing the same marks. The chosen inline representation
+ * ("marked runs") renders to per-block contenteditable as a span list and maps
+ * isomorphically onto a character-sequence CRDT with formatting.
+ */
+export interface InlineNode {
+  readonly text: string;
+  readonly marks: Marks;
+}
+
+/** A block's inline content: an ordered, normalized list of runs. */
+export type Inline = readonly InlineNode[];
+
+/** Total length of inline content in UTF-16 code units (DOM-offset compatible). */
+export function inlineLength(inline: Inline): number {
+  let length = 0;
+
+  for (const run of inline)
+    length += run.text.length;
+
+  return length;
+}
+
+/** Concatenated plain text of inline content. */
+export function inlineText(inline: Inline): string {
+  let text = '';
+
+  for (const run of inline)
+    text += run.text;
+
+  return text;
+}
+
+/**
+ * One UTF-16 code unit carrying its marks. Operations explode inline content to
+ * chars, splice, then regroup — obviously correct and cheap for small blocks.
+ * UTF-16 units (not code points) keep offsets aligned with the DOM.
+ */
+interface Char {
+  readonly ch: string;
+  readonly marks: Marks;
+}
+
+function toChars(inline: Inline): Char[] {
+  const chars: Char[] = [];
+
+  for (const run of inline) {
+    const marks = normalizeMarks(run.marks);
+
+    for (let i = 0; i < run.text.length; i++)
+      chars.push({ ch: run.text[i]!, marks });
+  }
+
+  return chars;
+}
+
+function fromChars(chars: readonly Char[]): Inline {
+  const runs: InlineNode[] = [];
+
+  for (const { ch, marks } of chars) {
+    const last = runs[runs.length - 1];
+
+    if (last && marksEq(last.marks, marks))
+      runs[runs.length - 1] = { text: last.text + ch, marks: last.marks };
+    else
+      runs.push({ text: ch, marks });
+  }
+
+  return runs;
+}
+
+/**
+ * Canonical form: drop empty runs, merge adjacent runs with equal mark sets,
+ * normalize each run's marks. Must be applied after every inline mutation so the
+ * model stays diff-stable and equality stays cheap.
+ */
+export function normalizeInline(inline: Inline): Inline {
+  return fromChars(toChars(inline));
+}
+
+/** Inline slice between two character offsets `[from, to)`. */
+export function sliceInline(inline: Inline, from: number, to: number): Inline {
+  return fromChars(toChars(inline).slice(from, to));
+}
+
+/** Insert `text` (carrying `marks`) at character `offset`. */
+export function insertTextInline(inline: Inline, offset: number, text: string, marks: Marks): Inline {
+  if (text.length === 0)
+    return normalizeInline(inline);
+
+  const chars = toChars(inline);
+  const normalized = normalizeMarks(marks);
+  const inserted: Char[] = [];
+
+  for (let i = 0; i < text.length; i++)
+    inserted.push({ ch: text[i]!, marks: normalized });
+
+  chars.splice(offset, 0, ...inserted);
+  return fromChars(chars);
+}
+
+/** Insert inline `content` (preserving its marks) at character `offset`. */
+export function insertInline(inline: Inline, offset: number, content: Inline): Inline {
+  const chars = toChars(inline);
+  chars.splice(offset, 0, ...toChars(content));
+  return fromChars(chars);
+}
+
+/** Replace the character range `[from, to)` with inline `content`. */
+export function replaceInline(inline: Inline, from: number, to: number, content: Inline): Inline {
+  const chars = toChars(inline);
+  chars.splice(from, to - from, ...toChars(content));
+  return fromChars(chars);
+}
+
+/** Delete the character range `[from, to)`. */
+export function deleteTextInline(inline: Inline, from: number, to: number): Inline {
+  const chars = toChars(inline);
+  chars.splice(from, to - from);
+  return fromChars(chars);
+}
+
+/** Add `mark` across `[from, to)`, replacing any existing mark of the same type. */
+export function addMarkInline(inline: Inline, from: number, to: number, mark: Mark): Inline {
+  const chars = toChars(inline);
+
+  for (let i = from; i < to && i < chars.length; i++) {
+    const current = chars[i]!;
+    chars[i] = { ch: current.ch, marks: normalizeMarks([...current.marks.filter(m => m.type !== mark.type), mark]) };
+  }
+
+  return fromChars(chars);
+}
+
+/** Remove every mark of `markType` across `[from, to)`. */
+export function removeMarkInline(inline: Inline, from: number, to: number, markType: string): Inline {
+  const chars = toChars(inline);
+
+  for (let i = from; i < to && i < chars.length; i++) {
+    const current = chars[i]!;
+    chars[i] = { ch: current.ch, marks: current.marks.filter(m => m.type !== markType) };
+  }
+
+  return fromChars(chars);
+}
+
+/**
+ * Marks active at a collapsed caret `offset` — used to seed stored marks and to
+ * decide toggle state. Defaults to the marks of the character before the caret.
+ */
+export function marksAt(inline: Inline, offset: number): Marks {
+  const chars = toChars(inline);
+
+  if (chars.length === 0)
+    return [];
+
+  const index = offset > 0 ? offset - 1 : 0;
+  return chars[Math.min(index, chars.length - 1)]?.marks ?? [];
+}
+
+/** Whether the whole range `[from, to)` carries a mark of `markType`. */
+export function rangeHasMarkType(inline: Inline, from: number, to: number, markType: string): boolean {
+  const chars = toChars(inline);
+
+  if (from >= to)
+    return false;
+
+  for (let i = from; i < to && i < chars.length; i++) {
+    if (!chars[i]!.marks.some(m => m.type === markType))
+      return false;
+  }
+
+  return true;
+}
diff --git a/vue/editor/src/model/marks.ts b/vue/editor/src/model/marks.ts
new file mode 100644
index 0000000..281e937
--- /dev/null
+++ b/vue/editor/src/model/marks.ts
@@ -0,0 +1,57 @@
+import type { Attrs } from './attrs';
+import { attrsEq } from './attrs';
+
+/**
+ * An inline formatting mark applied to a run of text (bold, italic, link, ...).
+ * `type` is the registry key; `attrs` holds mark-specific data (e.g. link href).
+ */
+export interface Mark {
+  readonly type: string;
+  readonly attrs?: Attrs;
+}
+
+/** A normalized set of marks: at most one per type, sorted by `type`. */
+export type Marks = readonly Mark[];
+
+/** Structural equality for two marks (type + attrs). */
+export function markEq(a: Mark, b: Mark): boolean {
+  return a.type === b.type && attrsEq(a.attrs, b.attrs);
+}
+
+/** Ordered structural equality for two normalized mark sets. */
+export function marksEq(a: Marks, b: Marks): boolean {
+  if (a === b)
+    return true;
+
+  if (a.length !== b.length)
+    return false;
+
+  return a.every((mark, i) => markEq(mark, b[i]!));
+}
+
+/**
+ * Canonicalize a mark set: keep the last occurrence per `type` (so a re-applied
+ * mark with new attrs wins) and sort by `type`. The deterministic order is what
+ * makes {@link marksEq} an O(n) comparison and keeps the model diff-stable.
+ */
+export function normalizeMarks(marks: Marks): Marks {
+  if (marks.length <= 1)
+    return marks;
+
+  const byType = new Map<string, Mark>();
+
+  for (const mark of marks)
+    byType.set(mark.type, mark);
+
+  return [...byType.values()].sort((a, b) => (a.type < b.type ? -1 : a.type > b.type ? 1 : 0));
+}
+
+/** Whether `marks` contains a mark structurally equal to `mark`. */
+export function hasMark(marks: Marks, mark: Mark): boolean {
+  return marks.some(m => markEq(m, mark));
+}
+
+/** Whether `marks` contains any mark of the given `type`. */
+export function hasMarkType(marks: Marks, type: string): boolean {
+  return marks.some(m => m.type === type);
+}
diff --git a/vue/editor/src/model/node.ts b/vue/editor/src/model/node.ts
new file mode 100644
index 0000000..78eb1cb
--- /dev/null
+++ b/vue/editor/src/model/node.ts
@@ -0,0 +1,69 @@
+import type { Attrs } from './attrs';
+import type { Inline } from './inline';
+import { inlineText } from './inline';
+import { createId } from './id';
+
+/**
+ * A block's content. Three shapes, chosen by the block's schema:
+ * - `Inline` for text blocks (paragraph, heading, list item),
+ * - `readonly Node[]` for container blocks (reserved; no default block uses it),
+ * - `null` for atom/void blocks (image, divider).
+ */
+export type Content = Inline | readonly Node[] | null;
+
+/** A document block. `id` is stable across split/merge/move. */
+export interface Node {
+  readonly id: string;
+  readonly type: string;
+  readonly attrs: Attrs;
+  readonly content: Content;
+}
+
+export interface CreateNodeOptions {
+  readonly id?: string;
+  readonly attrs?: Attrs;
+  readonly content?: Content;
+}
+
+/** Construct a {@link Node}, generating an id when not supplied. */
+export function createNode(type: string, options: CreateNodeOptions = {}): Node {
+  return {
+    id: options.id ?? createId(),
+    type,
+    attrs: options.attrs ?? {},
+    content: options.content ?? null,
+  };
+}
+
+/**
+ * Best-effort runtime check for inline (text-block) content. The authoritative
+ * answer comes from the schema; this is a convenience for model-level helpers.
+ */
+export function isInlineContent(content: Content): content is Inline {
+  return Array.isArray(content) && (content.length === 0 || 'text' in (content[0] as object));
+}
+
+/** Inline content of a node, or `[]` when the node is not a text block. */
+export function nodeInline(node: Node): Inline {
+  return isInlineContent(node.content) ? node.content : [];
+}
+
+/** Plain text of a node, or `''` when the node has no inline content. */
+export function nodeText(node: Node): string {
+  return isInlineContent(node.content) ? inlineText(node.content) : '';
+}
+
+/** Return a copy of `node` with new content. */
+export function withContent(node: Node, content: Content): Node {
+  return { ...node, content };
+}
+
+/** Return a copy of `node` with new attrs. */
+export function withAttrs(node: Node, attrs: Attrs): Node {
+  return { ...node, attrs };
+}
+
+/** Return a copy of `node` with a new type (and optionally new attrs). */
+export function withType(node: Node, type: string, attrs?: Attrs): Node {
+  return { ...node, type, attrs: attrs ?? node.attrs };
+}
diff --git a/vue/editor/src/model/position.ts b/vue/editor/src/model/position.ts
new file mode 100644
index 0000000..3d94c57
--- /dev/null
+++ b/vue/editor/src/model/position.ts
@@ -0,0 +1,19 @@
+/**
+ * A position inside the document, addressed by block id + a UTF-16 character
+ * offset into that block's inline content. Offsets are UTF-16 code units to line
+ * up with the DOM `Selection`/`Range` API, so the view bridge maps 1:1.
+ */
+export interface Position {
+  readonly blockId: string;
+  readonly offset: number;
+}
+
+/** Construct a {@link Position}. */
+export function position(blockId: string, offset: number): Position {
+  return { blockId, offset };
+}
+
+/** Whether two positions address the same block and offset. */
+export function positionEq(a: Position, b: Position): boolean {
+  return a.blockId === b.blockId && a.offset === b.offset;
+}
diff --git a/vue/editor/src/model/selection.ts b/vue/editor/src/model/selection.ts
new file mode 100644
index 0000000..5a9f930
--- /dev/null
+++ b/vue/editor/src/model/selection.ts
@@ -0,0 +1,82 @@
+import type { Position } from './position';
+import { positionEq } from './position';
+import type { EditorDocument } from './document';
+import { blockIndex } from './document';
+
+/** A text selection: caret when `anchor === focus`, range otherwise. May span blocks. */
+export interface TextSelection {
+  readonly kind: 'text';
+  readonly anchor: Position;
+  readonly focus: Position;
+}
+
+/** A block-level selection of one or more whole blocks (atoms, Mod+A stage 2). */
+export interface NodeSelection {
+  readonly kind: 'node';
+  readonly ids: readonly string[];
+}
+
+export type Selection = TextSelection | NodeSelection;
+
+/** Construct a text selection (focus defaults to anchor → collapsed caret). */
+export function textSelection(anchor: Position, focus: Position = anchor): TextSelection {
+  return { kind: 'text', anchor, focus };
+}
+
+/** Construct a collapsed caret selection. */
+export function caret(blockId: string, offset: number): TextSelection {
+  const point: Position = { blockId, offset };
+  return { kind: 'text', anchor: point, focus: point };
+}
+
+/** Construct a block-level selection. */
+export function nodeSelection(ids: readonly string[]): NodeSelection {
+  return { kind: 'node', ids };
+}
+
+export function isTextSelection(sel: Selection): sel is TextSelection {
+  return sel.kind === 'text';
+}
+
+export function isNodeSelection(sel: Selection): sel is NodeSelection {
+  return sel.kind === 'node';
+}
+
+/** Whether the selection is a collapsed caret. */
+export function isCollapsed(sel: Selection): boolean {
+  return sel.kind === 'text' && positionEq(sel.anchor, sel.focus);
+}
+
+/** Whether the selection spans more than one block. */
+export function isAcrossBlocks(sel: Selection): boolean {
+  return sel.kind === 'text' && sel.anchor.blockId !== sel.focus.blockId;
+}
+
+/**
+ * Endpoints of a text selection in document order (`from` before `to`). Within
+ * one block they are ordered by offset; across blocks by block index.
+ */
+export function orderedSelection(sel: TextSelection, doc: EditorDocument): { from: Position; to: Position } {
+  const { anchor, focus } = sel;
+
+  if (anchor.blockId === focus.blockId)
+    return anchor.offset <= focus.offset ? { from: anchor, to: focus } : { from: focus, to: anchor };
+
+  return blockIndex(doc, anchor.blockId) <= blockIndex(doc, focus.blockId)
+    ? { from: anchor, to: focus }
+    : { from: focus, to: anchor };
+}
+
+/** Structural equality for two selections. */
+export function selectionEq(a: Selection, b: Selection): boolean {
+  if (a.kind !== b.kind)
+    return false;
+
+  if (a.kind === 'text' && b.kind === 'text')
+    return positionEq(a.anchor, b.anchor) && positionEq(a.focus, b.focus);
+
+  if (a.kind === 'node' && b.kind === 'node')
+    return a.ids.length === b.ids.length && a.ids.every((id, i) => id === b.ids[i]);
+
+  return false;
+}
diff --git a/vue/editor/src/preset.ts b/vue/editor/src/preset.ts
new file mode 100644
index 0000000..c703be3
--- /dev/null
+++ b/vue/editor/src/preset.ts
@@ -0,0 +1,44 @@
+import { createRegistry } from './registry';
+import {
+  blockquote,
+  bulletedList,
+  callout,
+  codeBlock,
+  divider,
+  heading,
+  image,
+  numberedList,
+  paragraph,
+  todoList,
+} from './blocks';
+import { bold, code, highlight, italic, link, strike, underline } from './marks';
+
+/** The block definitions bundled in the default preset (registration order = menu order). */
+export const defaultBlocks = [
+  paragraph,
+  heading,
+  blockquote,
+  codeBlock,
+  callout,
+  bulletedList,
+  numberedList,
+  todoList,
+  divider,
+  image,
+];
+
+/** The mark definitions bundled in the default preset. */
+export const defaultMarks = [bold, italic, underline, strike, highlight, code, link];
+
+/** Batteries-included registry with the default blocks and marks. */
+export function createDefaultRegistry() {
+  return createRegistry({ blocks: defaultBlocks, marks: defaultMarks });
+}
+
+/** Lightweight registry — basic text blocks and the common marks only. */
+export function createBasicRegistry() {
+  return createRegistry({
+    blocks: [paragraph, heading, blockquote, bulletedList, numberedList],
+    marks: [bold, italic, link],
+  });
+}
diff --git a/vue/editor/src/registry/__test__/registry.test.ts b/vue/editor/src/registry/__test__/registry.test.ts
new file mode 100644
index 0000000..9c835be
--- /dev/null
+++ b/vue/editor/src/registry/__test__/registry.test.ts
@@ -0,0 +1,18 @@
+import { describe, expect, it } from 'vitest';
+import { heading, paragraph } from '../../blocks';
+import { bold } from '../../marks';
+import { createRegistry } from '../registry';
+
+describe('registry', () => {
+  it('projects a schema from definitions', () => {
+    const registry = createRegistry({ blocks: [paragraph, heading], marks: [bold] });
+    expect(registry.schema.nodeSpec('paragraph')).toBeDefined();
+    expect(registry.schema.markSpec('bold')).toBeDefined();
+    expect(registry.getBlock('heading')?.meta?.title).toBe('Heading');
+    expect(registry.listBlocks().map(block => block.type)).toEqual(['paragraph', 'heading']);
+  });
+
+  it('throws on a duplicate type by default', () => {
+    expect(() => createRegistry({ blocks: [paragraph, paragraph] })).toThrow();
+  });
+});
diff --git a/vue/editor/src/registry/define-block.ts b/vue/editor/src/registry/define-block.ts
new file mode 100644
index 0000000..f87dd89
--- /dev/null
+++ b/vue/editor/src/registry/define-block.ts
@@ -0,0 +1,57 @@
+import type { Component } from 'vue';
+import type { Attrs, Content, Node } from '../model';
+import type { NodeSpec } from '../schema';
+import type { CommandFactory } from '../state/command';
+import type { InputRuleSpec } from './input-rule';
+
+/** Props passed to an atom/void block's Vue `component`. */
+export interface BlockComponentProps {
+  /** The block's model node (read its `attrs`). */
+  node: Node;
+  /** Whether the block is currently node-selected. */
+  selected: boolean;
+  /** Editor-level editable flag. */
+  editable: boolean;
+  /** Merge new attrs into the block (e.g. image src/caption). */
+  update: (attrs: Attrs) => void;
+}
+
+/** Presentational/discovery metadata: powers slash menu, conversion, toolbars. */
+export interface BlockMeta {
+  readonly title: string;
+  readonly icon?: string;
+  readonly keywords?: readonly string[];
+  readonly group?: string;
+}
+
+/** Optional block-specific behaviors used by core commands. */
+export interface BlockBehavior {
+  /** Content for a fresh empty block of this type (defaults to empty inline). */
+  readonly empty?: () => Content;
+  /** Plain-text extraction (defaults to inline text). */
+  readonly toText?: (node: Node) => string;
+}
+
+/**
+ * A block definition: schema contribution + behavior + an opaque Vue component.
+ * Non-view layers treat `component` as an opaque value; only the view resolves
+ * it. The type is `Component` purely for authoring ergonomics (type-only import).
+ */
+export interface BlockDefinition {
+  readonly type: string;
+  readonly spec: NodeSpec;
+  readonly component?: Component;
+  readonly meta?: BlockMeta;
+  readonly behavior?: BlockBehavior;
+  readonly commands?: Record<string, CommandFactory>;
+  /** Wrapper element tag for the block (default `'div'`). */
+  readonly as?: string;
+  /** Placeholder text shown when an empty text block has focus. */
+  readonly placeholder?: string;
+  readonly inputRules?: readonly InputRuleSpec[];
+}
+
+/** Identity factory that narrows a block definition's literal type (cf. `definePlugin`). */
+export function defineBlock<const D extends BlockDefinition>(def: D): D {
+  return def;
+}
diff --git a/vue/editor/src/registry/define-mark.ts b/vue/editor/src/registry/define-mark.ts
new file mode 100644
index 0000000..cfb9b1e
--- /dev/null
+++ b/vue/editor/src/registry/define-mark.ts
@@ -0,0 +1,26 @@
+import type { MarkSpec } from '../schema';
+import type { InputRuleSpec } from './input-rule';
+
+/** Presentational/discovery metadata for a mark (toolbar label, shortcut hint). */
+export interface MarkMeta {
+  readonly title: string;
+  readonly icon?: string;
+  readonly hotkey?: string;
+}
+
+/**
+ * A mark definition: schema contribution (attrs, exclusivity, rank, toDOM,
+ * parseDOM) + metadata. Marks are data-only — the view renders/parses them via
+ * the spec, which is what makes them fully modular through the registry.
+ */
+export interface MarkDefinition {
+  readonly type: string;
+  readonly spec: MarkSpec;
+  readonly meta?: MarkMeta;
+  readonly inputRules?: readonly InputRuleSpec[];
+}
+
+/** Identity factory that narrows a mark definition's literal type (cf. `definePlugin`). */
+export function defineMark<const D extends MarkDefinition>(def: D): D {
+  return def;
+}
diff --git a/vue/editor/src/registry/index.ts b/vue/editor/src/registry/index.ts
new file mode 100644
index 0000000..3f8fa13
--- /dev/null
+++ b/vue/editor/src/registry/index.ts
@@ -0,0 +1,4 @@
+export * from './input-rule';
+export * from './define-block';
+export * from './define-mark';
+export * from './registry';
diff --git a/vue/editor/src/registry/input-rule.ts b/vue/editor/src/registry/input-rule.ts
new file mode 100644
index 0000000..fd68df3
--- /dev/null
+++ b/vue/editor/src/registry/input-rule.ts
@@ -0,0 +1,15 @@
+import type { Attrs } from '../model';
+
+/**
+ * A pattern that transforms the current block or marks when typed (e.g. `'# '`
+ * → heading, `'**x**'` → bold). The matching engine lands in M2; the type is
+ * declared now so block/mark definitions can carry their rules as data.
+ */
+export interface InputRuleSpec {
+  /** Pattern tested against the text ending at the caret. */
+  readonly match: RegExp;
+  /** Target block/mark type to apply on match. */
+  readonly type?: string;
+  /** Attrs to apply with the transformation. */
+  readonly attrs?: Attrs;
+}
diff --git a/vue/editor/src/registry/registry.ts b/vue/editor/src/registry/registry.ts
new file mode 100644
index 0000000..0199d49
--- /dev/null
+++ b/vue/editor/src/registry/registry.ts
@@ -0,0 +1,99 @@
+import type { MarkSpec, NodeSpec, Schema } from '../schema';
+import { createSchema } from '../schema';
+import type { BlockDefinition } from './define-block';
+import type { MarkDefinition } from './define-mark';
+
+/** How to resolve two definitions registered under the same type. */
+export type ConflictPolicy = 'throw' | 'last-wins' | 'first-wins';
+
+/**
+ * The single source of truth for which block and mark types exist and how they
+ * behave. Immutable: built once via {@link createRegistry}; {@link extendRegistry}
+ * returns a new registry. The {@link Schema} is projected from the definitions.
+ */
+export interface Registry {
+  readonly blocks: ReadonlyMap<string, BlockDefinition>;
+  readonly marks: ReadonlyMap<string, MarkDefinition>;
+  readonly schema: Schema;
+  getBlock: (type: string) => BlockDefinition | undefined;
+  getMark: (type: string) => MarkDefinition | undefined;
+  /** Definitions in registration order (drives slash menu / toolbars). */
+  listBlocks: () => readonly BlockDefinition[];
+  listMarks: () => readonly MarkDefinition[];
+  /** Alias of {@link listMarks}, for the inline renderer/parser. */
+  allMarks: () => readonly MarkDefinition[];
+  hasBlock: (type: string) => boolean;
+  hasMark: (type: string) => boolean;
+}
+
+export interface CreateRegistryOptions {
+  readonly blocks?: readonly BlockDefinition[];
+  readonly marks?: readonly MarkDefinition[];
+  readonly onConflict?: ConflictPolicy;
+}
+
+function buildMap<D extends { readonly type: string }>(
+  items: readonly D[],
+  onConflict: ConflictPolicy,
+  kind: string,
+): Map<string, D> {
+  const map = new Map<string, D>();
+
+  for (const item of items) {
+    if (map.has(item.type)) {
+      if (onConflict === 'throw')
+        throw new Error(`Editor registry: duplicate ${kind} type '${item.type}'`);
+
+      if (onConflict === 'first-wins')
+        continue;
+    }
+
+    map.set(item.type, item);
+  }
+
+  return map;
+}
+
+/** Build an immutable {@link Registry} from block and mark definitions. */
+export function createRegistry(options: CreateRegistryOptions = {}): Registry {
+  const onConflict = options.onConflict ?? 'throw';
+  const blocks = buildMap(options.blocks ?? [], onConflict, 'block');
+  const marks = buildMap(options.marks ?? [], onConflict, 'mark');
+
+  const nodeSpecs = new Map<string, NodeSpec>();
+  for (const [type, def] of blocks)
+    nodeSpecs.set(type, def.spec);
+
+  const markSpecs = new Map<string, MarkSpec>();
+  for (const [type, def] of marks)
+    markSpecs.set(type, def.spec);
+
+  const schema = createSchema({ nodes: nodeSpecs, marks: markSpecs });
+  const blockList = [...blocks.values()];
+  const markList = [...marks.values()];
+
+  return {
+    blocks,
+    marks,
+    schema,
+    getBlock: type => blocks.get(type),
+    getMark: type => marks.get(type),
+    listBlocks: () => blockList,
+    listMarks: () => markList,
+    allMarks: () => markList,
+    hasBlock: type => blocks.has(type),
+    hasMark: type => marks.has(type),
+  };
+}
+
+/** Return a new registry extending `base` with extra blocks/marks (override wins). */
+export function extendRegistry(
+  base: Registry,
+  add: { blocks?: readonly BlockDefinition[]; marks?: readonly MarkDefinition[]; onConflict?: ConflictPolicy },
+): Registry {
+  return createRegistry({
+    blocks: [...base.listBlocks(), ...(add.blocks ?? [])],
+    marks: [...base.listMarks(), ...(add.marks ?? [])],
+    onConflict: add.onConflict ?? 'last-wins',
+  });
+}
diff --git a/vue/editor/src/schema/attr-spec.ts b/vue/editor/src/schema/attr-spec.ts
new file mode 100644
index 0000000..1976bea
--- /dev/null
+++ b/vue/editor/src/schema/attr-spec.ts
@@ -0,0 +1,11 @@
+import type { AttrValue } from '../model';
+
+/** Specification for a single attribute: default, requiredness, validation. */
+export interface AttrSpec<V extends AttrValue = AttrValue> {
+  readonly default?: V;
+  readonly required?: boolean;
+  readonly validate?: (value: unknown) => boolean;
+}
+
+/** Map of attribute name → {@link AttrSpec}. */
+export type AttrsSpec = Readonly<Record<string, AttrSpec>>;
diff --git a/vue/editor/src/schema/content-kind.ts b/vue/editor/src/schema/content-kind.ts
new file mode 100644
index 0000000..0e627a5
--- /dev/null
+++ b/vue/editor/src/schema/content-kind.ts
@@ -0,0 +1,12 @@
+/**
+ * The content model of a block — a deliberately small, closed union instead of
+ * ProseMirror's content-expression grammar (KISS).
+ *
+ * - `text`: holds inline content; `marks` whitelists which marks may apply,
+ * - `container`: holds child blocks (reserved; no default block uses it yet),
+ * - `atom`: holds no editable content (image, divider).
+ */
+export type ContentKind
+  = | { readonly kind: 'text'; readonly marks?: 'all' | 'none' | readonly string[] }
+    | { readonly kind: 'container'; readonly allow?: readonly string[]; readonly group?: string }
+    | { readonly kind: 'atom' };
diff --git a/vue/editor/src/schema/dom.ts b/vue/editor/src/schema/dom.ts
new file mode 100644
index 0000000..4d02295
--- /dev/null
+++ b/vue/editor/src/schema/dom.ts
@@ -0,0 +1,39 @@
+import type { Attrs } from '../model';
+
+/** Placeholder marking where a node/mark's content should be spliced in. */
+export type DOMOutputHole = 0;
+
+export type DOMOutputChild = DOMOutputSpec | DOMOutputHole;
+
+/**
+ * A serializable description of DOM output (ProseMirror-style), kept free of
+ * real DOM so the schema layer stays pure. The view realizes it into elements.
+ *
+ * - `'text'` → a text node,
+ * - `['tag', { attr: 'v' }, 0]` → `<tag attr="v">…content…</tag>`,
+ * - the attrs object is optional; `0` is the content hole.
+ *
+ * The array part is an interface so the recursion (an element may contain nested
+ * elements) is well-founded for the type checker.
+ */
+export type DOMOutputSpec = string | DOMOutputArray;
+
+export interface DOMOutputArray extends ReadonlyArray<string | Record<string, string> | DOMOutputChild> {}
+
+/**
+ * A rule for parsing DOM (paste / HTML import) into a block or mark.
+ * `getAttrs` receives a real `HTMLElement` (only ever called by the view); the
+ * type reference is compile-time only and introduces no runtime DOM dependency.
+ */
+export interface ParseRule {
+  /** CSS selector to match, e.g. `'a[href]'`, `'strong'`, `'h1'`. */
+  readonly tag?: string;
+  /** Inline-style match, e.g. `'font-weight=700'` (reserved for M2). */
+  readonly style?: string;
+  /** Static attrs applied when the rule matches. */
+  readonly attrs?: Attrs;
+  /** Derive attrs from the matched element; `false`/`null` rejects the match. */
+  readonly getAttrs?: (el: HTMLElement) => Attrs | false | null;
+  /** Higher priority rules are tried first. */
+  readonly priority?: number;
+}
diff --git a/vue/editor/src/schema/index.ts b/vue/editor/src/schema/index.ts
new file mode 100644
index 0000000..d20fa93
--- /dev/null
+++ b/vue/editor/src/schema/index.ts
@@ -0,0 +1,8 @@
+export * from './attr-spec';
+export * from './content-kind';
+export * from './dom';
+export * from './node-spec';
+export * from './mark-spec';
+export * from './schema';
+export * from './validate';
+export * from './normalize';
diff --git a/vue/editor/src/schema/mark-spec.ts b/vue/editor/src/schema/mark-spec.ts
new file mode 100644
index 0000000..e000e98
--- /dev/null
+++ b/vue/editor/src/schema/mark-spec.ts
@@ -0,0 +1,19 @@
+import type { Mark } from '../model';
+import type { AttrsSpec } from './attr-spec';
+import type { DOMOutputSpec, ParseRule } from './dom';
+
+/** Schema contribution of a mark type. */
+export interface MarkSpec {
+  /** Attribute specs (defaults + validation), e.g. link `href`. */
+  readonly attrs?: AttrsSpec;
+  /** Whether typing at the mark's boundary extends it (bold yes, link no). */
+  readonly inclusive?: boolean;
+  /** Marks that cannot coexist with this one; `'_all'` excludes every other. */
+  readonly excludes?: readonly string[] | '_all';
+  /** Nesting order in {@link DOMOutputSpec}: lower = outer wrapper. */
+  readonly rank?: number;
+  /** Serialize the mark to a DOM description wrapping its content. */
+  readonly toDOM: (mark: Mark) => DOMOutputSpec;
+  /** Rules for parsing DOM into this mark (paste / import). */
+  readonly parseDOM: readonly ParseRule[];
+}
diff --git a/vue/editor/src/schema/node-spec.ts b/vue/editor/src/schema/node-spec.ts
new file mode 100644
index 0000000..ab721da
--- /dev/null
+++ b/vue/editor/src/schema/node-spec.ts
@@ -0,0 +1,24 @@
+import type { Node } from '../model';
+import type { AttrsSpec } from './attr-spec';
+import type { ContentKind } from './content-kind';
+import type { DOMOutputSpec, ParseRule } from './dom';
+
+/** Schema contribution of a block type. */
+export interface NodeSpec {
+  /** Content model (text / container / atom). */
+  readonly content: ContentKind;
+  /** Attribute specs (defaults + validation). */
+  readonly attrs?: AttrsSpec;
+  /** Group name for membership tests (e.g. `'block'`, `'list'`). */
+  readonly group?: string;
+  /** Keep this block's type/identity when merged into (e.g. code-block). */
+  readonly defining?: boolean;
+  /** Raw multiline text: Enter inserts a newline instead of splitting (code-block). */
+  readonly code?: boolean;
+  /** Selection and merge cannot cross this block's boundary. */
+  readonly isolating?: boolean;
+  /** Serialize a node of this type to a DOM description (HTML export). */
+  readonly toDOM?: (node: Node) => DOMOutputSpec;
+  /** Rules for parsing DOM into a node of this type (paste / import). */
+  readonly parseDOM?: readonly ParseRule[];
+}
diff --git a/vue/editor/src/schema/normalize.ts b/vue/editor/src/schema/normalize.ts
new file mode 100644
index 0000000..857763b
--- /dev/null
+++ b/vue/editor/src/schema/normalize.ts
@@ -0,0 +1,44 @@
+import type { EditorDocument, Inline, Node } from '../model';
+import { isInlineContent, normalizeInline, replaceBlocks } from '../model';
+import type { NodeSpec } from './node-spec';
+import type { Schema } from './schema';
+import { marksAllowed } from './schema';
+
+function filterRunMarks(inline: Inline, spec: NodeSpec, schema: Schema): Inline {
+  return inline.map(run => ({
+    text: run.text,
+    marks: run.marks.filter(mark => schema.markSpec(mark.type) !== undefined && marksAllowed(spec, mark.type)),
+  }));
+}
+
+/**
+ * Bring a document to canonical form against a schema: coerce attrs, normalize
+ * inline content, drop marks that are unknown or disallowed in their block, and
+ * drop blocks of unknown type. This is the single funnel every document passes
+ * through before it becomes editor state.
+ */
+export function normalizeDocument(doc: EditorDocument, schema: Schema): EditorDocument {
+  const content: Node[] = [];
+
+  for (const block of doc.content) {
+    const spec = schema.nodeSpec(block.type);
+
+    if (!spec)
+      continue; // drop unknown block types
+
+    const attrs = schema.coerceAttrs(block.type, block.attrs);
+
+    if (spec.content.kind === 'text') {
+      const inline = isInlineContent(block.content) ? block.content : [];
+      content.push({ ...block, attrs, content: normalizeInline(filterRunMarks(inline, spec, schema)) });
+    }
+    else if (spec.content.kind === 'atom') {
+      content.push({ ...block, attrs, content: block.content ?? null });
+    }
+    else {
+      content.push({ ...block, attrs });
+    }
+  }
+
+  return replaceBlocks(doc, content);
+}
diff --git a/vue/editor/src/schema/schema.ts b/vue/editor/src/schema/schema.ts
new file mode 100644
index 0000000..3abaade
--- /dev/null
+++ b/vue/editor/src/schema/schema.ts
@@ -0,0 +1,91 @@
+import type { AttrValue, Attrs } from '../model';
+import type { AttrsSpec } from './attr-spec';
+import type { NodeSpec } from './node-spec';
+import type { MarkSpec } from './mark-spec';
+
+/**
+ * The compiled schema: the set of known node/mark specs plus attribute
+ * coercion helpers. Projected from the registry (the registry is the SSOT).
+ */
+export interface Schema {
+  readonly nodes: ReadonlyMap<string, NodeSpec>;
+  readonly marks: ReadonlyMap<string, MarkSpec>;
+  nodeSpec: (type: string) => NodeSpec | undefined;
+  markSpec: (type: string) => MarkSpec | undefined;
+  /** Default attrs for a block type (all defaults applied). */
+  defaultAttrs: (type: string) => Attrs;
+  /** Fill defaults and drop unknown keys for a block type. */
+  coerceAttrs: (type: string, attrs?: Attrs) => Attrs;
+  /** Default attrs for a mark type. */
+  defaultMarkAttrs: (type: string) => Attrs;
+  /** Fill defaults and drop unknown keys for a mark type. */
+  coerceMarkAttrs: (type: string, attrs?: Attrs) => Attrs;
+}
+
+function coerceWithSpec(spec: AttrsSpec | undefined, attrs?: Attrs): Attrs {
+  if (!spec)
+    return {};
+
+  const result: Record<string, AttrValue> = {};
+
+  for (const key in spec) {
+    const provided = attrs?.[key];
+
+    if (provided !== undefined)
+      result[key] = provided;
+    else if (spec[key]!.default !== undefined)
+      result[key] = spec[key]!.default!;
+  }
+
+  return result;
+}
+
+/** Build a {@link Schema} from node and mark spec maps. */
+export function createSchema(input: {
+  nodes: ReadonlyMap<string, NodeSpec>;
+  marks: ReadonlyMap<string, MarkSpec>;
+}): Schema {
+  const { nodes, marks } = input;
+
+  return {
+    nodes,
+    marks,
+    nodeSpec: type => nodes.get(type),
+    markSpec: type => marks.get(type),
+    defaultAttrs: type => coerceWithSpec(nodes.get(type)?.attrs),
+    coerceAttrs: (type, attrs) => coerceWithSpec(nodes.get(type)?.attrs, attrs),
+    defaultMarkAttrs: type => coerceWithSpec(marks.get(type)?.attrs),
+    coerceMarkAttrs: (type, attrs) => coerceWithSpec(marks.get(type)?.attrs, attrs),
+  };
+}
+
+/** Whether a block spec holds inline (text) content. */
+export function isTextBlock(spec: NodeSpec): boolean {
+  return spec.content.kind === 'text';
+}
+
+/** Whether a block spec is an atom/void block. */
+export function isAtomBlock(spec: NodeSpec): boolean {
+  return spec.content.kind === 'atom';
+}
+
+/** Whether a block spec is a container of child blocks. */
+export function isContainerBlock(spec: NodeSpec): boolean {
+  return spec.content.kind === 'container';
+}
+
+/** Whether a mark of `markType` is allowed inside a block with this spec. */
+export function marksAllowed(spec: NodeSpec, markType: string): boolean {
+  if (spec.content.kind !== 'text')
+    return false;
+
+  const allowed = spec.content.marks;
+
+  if (allowed === undefined || allowed === 'all')
+    return true;
+
+  if (allowed === 'none')
+    return false;
+
+  return allowed.includes(markType);
+}
diff --git a/vue/editor/src/schema/validate.ts b/vue/editor/src/schema/validate.ts
new file mode 100644
index 0000000..4aad8f0
--- /dev/null
+++ b/vue/editor/src/schema/validate.ts
@@ -0,0 +1,42 @@
+import type { EditorDocument } from '../model';
+import type { Schema } from './schema';
+
+export interface ValidationResult {
+  readonly valid: boolean;
+  readonly errors: readonly string[];
+}
+
+/**
+ * Structural validation of a document against a schema. Reports unknown block
+ * types, missing required attrs, and failed attr validators. Used in tests and
+ * as a guard around untrusted input; runtime mutation paths rely on
+ * {@link normalizeDocument} instead.
+ */
+export function validateDocument(doc: EditorDocument, schema: Schema): ValidationResult {
+  const errors: string[] = [];
+
+  for (const block of doc.content) {
+    const spec = schema.nodeSpec(block.type);
+
+    if (!spec) {
+      errors.push(`unknown block type: '${block.type}'`);
+      continue;
+    }
+
+    if (!spec.attrs)
+      continue;
+
+    for (const key in spec.attrs) {
+      const attr = spec.attrs[key]!;
+      const value = block.attrs[key];
+
+      if (attr.required && value === undefined && attr.default === undefined)
+        errors.push(`block '${block.type}' is missing required attr '${key}'`);
+
+      if (attr.validate && value !== undefined && !attr.validate(value))
+        errors.push(`block '${block.type}' has invalid attr '${key}'`);
+    }
+  }
+
+  return { valid: errors.length === 0, errors };
+}
diff --git a/vue/editor/src/state/__test__/step.test.ts b/vue/editor/src/state/__test__/step.test.ts
new file mode 100644
index 0000000..5e52d16
--- /dev/null
+++ b/vue/editor/src/state/__test__/step.test.ts
@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest';
+import { createDoc, createNode, nodeText } from '../../model';
+import { createDefaultRegistry } from '../../preset';
+import { applyStep } from '../step';
+
+const schema = createDefaultRegistry().schema;
+
+function para(id: string, text: string) {
+  return createNode('paragraph', { id, content: text ? [{ text, marks: [] }] : [] });
+}
+
+describe('applyStep', () => {
+  it('inserts and inverts to the original', () => {
+    const doc = createDoc([para('a', 'hi')]);
+    const inserted = applyStep(doc, { type: 'insertInline', blockId: 'a', offset: 2, content: [{ text: '!', marks: [] }] }, schema);
+    expect(nodeText(inserted.doc.content[0]!)).toBe('hi!');
+
+    const back = applyStep(inserted.doc, inserted.inverted, schema);
+    expect(nodeText(back.doc.content[0]!)).toBe('hi');
+  });
+
+  it('splits a block, and its inverse merges back', () => {
+    const doc = createDoc([para('a', 'hello')]);
+    const split = applyStep(doc, { type: 'splitBlock', blockId: 'a', offset: 2, newId: 'b' }, schema);
+    expect(split.doc.content.map(block => nodeText(block))).toEqual(['he', 'llo']);
+
+    const merged = applyStep(split.doc, split.inverted, schema);
+    expect(merged.doc.content.map(block => nodeText(block))).toEqual(['hello']);
+  });
+
+  it('moves a block, and its inverse restores order', () => {
+    const doc = createDoc([para('a', '1'), para('b', '2'), para('c', '3')]);
+    const moved = applyStep(doc, { type: 'moveBlock', blockId: 'a', toIndex: 2 }, schema);
+    expect(moved.doc.content.map(block => block.id)).toEqual(['b', 'c', 'a']);
+
+    const back = applyStep(moved.doc, moved.inverted, schema);
+    expect(back.doc.content.map(block => block.id)).toEqual(['a', 'b', 'c']);
+  });
+
+  it('adds a mark and inverts to the prior inline state', () => {
+    const doc = createDoc([para('a', 'abc')]);
+    const marked = applyStep(doc, { type: 'addMark', blockId: 'a', from: 0, to: 3, mark: { type: 'bold' } }, schema);
+    expect(marked.doc.content[0]!.content).toEqual([{ text: 'abc', marks: [{ type: 'bold' }] }]);
+
+    const back = applyStep(marked.doc, marked.inverted, schema);
+    expect(back.doc.content[0]!.content).toEqual([{ text: 'abc', marks: [] }]);
+  });
+});
diff --git a/vue/editor/src/state/command.ts b/vue/editor/src/state/command.ts
new file mode 100644
index 0000000..f98375c
--- /dev/null
+++ b/vue/editor/src/state/command.ts
@@ -0,0 +1,25 @@
+import type { EditorState } from './editor-state';
+import type { Transaction } from './transaction';
+
+/** Applies a transaction, updating editor state and notifying subscribers. */
+export type Dispatch = (tr: Transaction) => void;
+
+/**
+ * Minimal view surface a command may use to move real DOM focus across blocks.
+ * The Vue `EditorContext` is structurally compatible; pure logic/tests can pass
+ * a stub. Keeps the command layer free of any Vue/DOM dependency.
+ */
+export interface CommandView {
+  focusBlock: (blockId: string, offset: number | 'start' | 'end') => void;
+}
+
+/**
+ * A command in the ProseMirror style: returns `true` when applicable (and
+ * dispatches when `dispatch` is provided), `false` otherwise so the keymap can
+ * fall through to native behavior. Called without `dispatch` it is a dry run for
+ * computing UI enabled/active state.
+ */
+export type Command = (state: EditorState, dispatch?: Dispatch, view?: CommandView) => boolean;
+
+/** A parameterized command constructor. */
+export type CommandFactory<Args extends readonly unknown[] = readonly unknown[]> = (...args: Args) => Command;
diff --git a/vue/editor/src/state/editor-state.ts b/vue/editor/src/state/editor-state.ts
new file mode 100644
index 0000000..a646086
--- /dev/null
+++ b/vue/editor/src/state/editor-state.ts
@@ -0,0 +1,55 @@
+import type { EditorDocument, Marks, Selection } from '../model';
+import { caret, createDoc, createNode, firstBlock, nodeSelection } from '../model';
+import type { Registry } from '../registry';
+import type { Schema } from '../schema';
+import { normalizeDocument } from '../schema';
+
+/** Immutable snapshot of everything the editor renders and commands read. */
+export interface EditorState {
+  readonly doc: EditorDocument;
+  readonly selection: Selection;
+  readonly schema: Schema;
+  readonly registry: Registry;
+  /** Marks to apply to the next typed character (toggle-before-type). */
+  readonly storedMarks: Marks | null;
+}
+
+export interface CreateEditorStateOptions {
+  readonly registry: Registry;
+  readonly doc?: EditorDocument;
+  readonly selection?: Selection;
+}
+
+function defaultBlockType(registry: Registry): string | undefined {
+  if (registry.hasBlock('paragraph'))
+    return 'paragraph';
+
+  for (const def of registry.listBlocks()) {
+    if (def.spec.content.kind === 'text')
+      return def.type;
+  }
+
+  return registry.listBlocks()[0]?.type;
+}
+
+/**
+ * Build the initial editor state: normalize the document against the schema and
+ * ensure it has at least one editable block to place the caret in.
+ */
+export function createEditorState(options: CreateEditorStateOptions): EditorState {
+  const { registry } = options;
+  const schema = registry.schema;
+
+  let doc = normalizeDocument(options.doc ?? createDoc(), schema);
+
+  if (doc.content.length === 0) {
+    const type = defaultBlockType(registry);
+    if (type)
+      doc = createDoc([createNode(type, { attrs: schema.defaultAttrs(type) })]);
+  }
+
+  const first = firstBlock(doc);
+  const selection = options.selection ?? (first ? caret(first.id, 0) : nodeSelection([]));
+
+  return { doc, selection, schema, registry, storedMarks: null };
+}
diff --git a/vue/editor/src/state/editor.ts b/vue/editor/src/state/editor.ts
new file mode 100644
index 0000000..a39ad31
--- /dev/null
+++ b/vue/editor/src/state/editor.ts
@@ -0,0 +1,119 @@
+import { PubSub } from '@robonen/stdlib';
+import { selectionEq } from '../model';
+import type { Command, Dispatch } from './command';
+import type { EditorState } from './editor-state';
+import type { HistoryOptions } from './history';
+import { createHistory } from './history';
+import type { Transaction } from './transaction';
+import { applyTransaction, createTransaction } from './transaction';
+
+/**
+ * Editor event map. A `type` (not `interface`) so it satisfies the
+ * `Record<string, ...>` constraint of {@link PubSub}.
+ */
+export interface EditorEvents {
+  /** Fired for every applied transaction (local, undo/redo, or remote). */
+  transaction: (tr: Transaction, next: EditorState, prev: EditorState) => void;
+  /** Fired when the document changed. */
+  docChange: (next: EditorState, prev: EditorState) => void;
+  /** Fired when the selection changed. */
+  selectionChange: (next: EditorState, prev: EditorState) => void;
+}
+
+/**
+ * The headless editor controller: owns live state, the undo history, and a
+ * typed event bus. The Vue layer wraps it; the CRDT adapter subscribes to it.
+ */
+export interface Editor {
+  readonly state: EditorState;
+  dispatch: Dispatch;
+  /** Run a command against the current state, dispatching if it applies. */
+  command: (cmd: Command) => boolean;
+  undo: () => boolean;
+  redo: () => boolean;
+  canUndo: () => boolean;
+  canRedo: () => boolean;
+  on: <K extends keyof EditorEvents>(event: K, listener: EditorEvents[K]) => void;
+  off: <K extends keyof EditorEvents>(event: K, listener: EditorEvents[K]) => void;
+  destroy: () => void;
+}
+
+export interface CreateEditorOptions {
+  readonly state: EditorState;
+  readonly history?: HistoryOptions;
+}
+
+/** Create an {@link Editor} around an initial state. */
+export function createEditor(options: CreateEditorOptions): Editor {
+  let state = options.state;
+  // A mapped type (not the `interface`) satisfies PubSub's `Record<string, …>` constraint.
+  const bus = new PubSub<{ [K in keyof EditorEvents]: EditorEvents[K] }>();
+  const history = createHistory(options.history);
+
+  const dispatch: Dispatch = (tr) => {
+    const prev = state;
+    const next = applyTransaction(prev, tr);
+    state = next;
+
+    if (tr.meta.get('addToHistory') !== false && tr.steps.length > 0) {
+      history.record({
+        steps: tr.steps,
+        inverted: tr.inverted,
+        selectionBefore: prev.selection,
+        selectionAfter: next.selection,
+      });
+    }
+
+    bus.emit('transaction', tr, next, prev);
+    if (next.doc !== prev.doc)
+      bus.emit('docChange', next, prev);
+    if (!selectionEq(next.selection, prev.selection))
+      bus.emit('selectionChange', next, prev);
+  };
+
+  return {
+    get state() {
+      return state;
+    },
+    dispatch,
+    command: cmd => cmd(state, dispatch),
+    undo() {
+      const entry = history.undo();
+      if (!entry)
+        return false;
+
+      const tr = createTransaction(state);
+      for (let i = entry.inverted.length - 1; i >= 0; i--)
+        tr.step(entry.inverted[i]!);
+
+      tr.setSelection(entry.selectionBefore).setMeta('addToHistory', false).setMeta('history', 'undo');
+      dispatch(tr);
+      return true;
+    },
+    redo() {
+      const entry = history.redo();
+      if (!entry)
+        return false;
+
+      const tr = createTransaction(state);
+      for (const step of entry.steps)
+        tr.step(step);
+
+      tr.setSelection(entry.selectionAfter).setMeta('addToHistory', false).setMeta('history', 'redo');
+      dispatch(tr);
+      return true;
+    },
+    canUndo: history.canUndo,
+    canRedo: history.canRedo,
+    on(event, listener) {
+      bus.on(event, listener);
+    },
+    off(event, listener) {
+      bus.off(event, listener);
+    },
+    destroy() {
+      bus.clear('transaction').clear('docChange').clear('selectionChange');
+      history.clear();
+    },
+  };
+}
diff --git a/vue/editor/src/state/history.ts b/vue/editor/src/state/history.ts
new file mode 100644
index 0000000..395e11e
--- /dev/null
+++ b/vue/editor/src/state/history.ts
@@ -0,0 +1,69 @@
+import type { Selection } from '../model';
+import type { Step } from './step';
+
+/**
+ * One undoable change: the steps it applied, their inverses, and the selection
+ * before and after. Undo replays `inverted` (reversed); redo replays `steps`.
+ */
+export interface HistoryEntry {
+  readonly steps: readonly Step[];
+  readonly inverted: readonly Step[];
+  readonly selectionBefore: Selection;
+  readonly selectionAfter: Selection;
+}
+
+export interface HistoryOptions {
+  /** Maximum number of undo entries to retain (default 200). */
+  readonly maxSize?: number;
+}
+
+/**
+ * Undo/redo stacks of inverse-step entries. Borrows the ergonomics of stdlib's
+ * command history (bounded size, redo cleared on a new edit) but stores data
+ * (inverse steps) rather than closures — which is what makes it serializable and
+ * collab-friendly.
+ */
+export interface History {
+  /** Record a new edit, clearing the redo stack. */
+  record: (entry: HistoryEntry) => void;
+  /** Pop the latest undo entry (and push it onto the redo stack). */
+  undo: () => HistoryEntry | undefined;
+  /** Pop the latest redo entry (and push it back onto the undo stack). */
+  redo: () => HistoryEntry | undefined;
+  canUndo: () => boolean;
+  canRedo: () => boolean;
+  clear: () => void;
+}
+
+export function createHistory(options: HistoryOptions = {}): History {
+  const maxSize = options.maxSize ?? 200;
+  const undoStack: HistoryEntry[] = [];
+  const redoStack: HistoryEntry[] = [];
+
+  return {
+    record(entry) {
+      undoStack.push(entry);
+      if (undoStack.length > maxSize)
+        undoStack.shift();
+      redoStack.length = 0;
+    },
+    undo() {
+      const entry = undoStack.pop();
+      if (entry)
+        redoStack.push(entry);
+      return entry;
+    },
+    redo() {
+      const entry = redoStack.pop();
+      if (entry)
+        undoStack.push(entry);
+      return entry;
+    },
+    canUndo: () => undoStack.length > 0,
+    canRedo: () => redoStack.length > 0,
+    clear() {
+      undoStack.length = 0;
+      redoStack.length = 0;
+    },
+  };
+}
diff --git a/vue/editor/src/state/index.ts b/vue/editor/src/state/index.ts
new file mode 100644
index 0000000..e11a72d
--- /dev/null
+++ b/vue/editor/src/state/index.ts
@@ -0,0 +1,6 @@
+export * from './command';
+export * from './editor-state';
+export * from './step';
+export * from './transaction';
+export * from './history';
+export * from './editor';
diff --git a/vue/editor/src/state/step.ts b/vue/editor/src/state/step.ts
new file mode 100644
index 0000000..9e65da9
--- /dev/null
+++ b/vue/editor/src/state/step.ts
@@ -0,0 +1,225 @@
+import type { Attrs, EditorDocument, Inline, Mark, Node } from '../model';
+import {
+  addMarkInline,
+  blockById,
+  blockIndex,
+  createNode,
+  deleteTextInline,
+  findBlock,
+  inlineLength,
+  insertInline,
+  nodeInline,
+  normalizeInline,
+  removeMarkInline,
+  replaceBlocks,
+  replaceInline,
+  sliceInline,
+  withAttrs,
+  withContent,
+  withType,
+} from '../model';
+import type { Schema } from '../schema';
+import { marksAllowed } from '../schema';
+
+/**
+ * The atomic, invertible, serializable unit of change. Steps are the contract
+ * shared by the undo history (each carries its exact inverse) and the CRDT
+ * adapter (each maps to a CRDT operation). Keeping the set small (~12) means a
+ * new block type never needs a new step.
+ */
+export type Step
+  = | { readonly type: 'insertInline'; readonly blockId: string; readonly offset: number; readonly content: Inline }
+    | { readonly type: 'deleteText'; readonly blockId: string; readonly from: number; readonly to: number }
+    | { readonly type: 'replaceInline'; readonly blockId: string; readonly from: number; readonly to: number; readonly content: Inline }
+    | { readonly type: 'addMark'; readonly blockId: string; readonly from: number; readonly to: number; readonly mark: Mark }
+    | { readonly type: 'removeMark'; readonly blockId: string; readonly from: number; readonly to: number; readonly mark: Mark }
+    | { readonly type: 'setAttrs'; readonly blockId: string; readonly attrs: Attrs }
+    | { readonly type: 'setType'; readonly blockId: string; readonly blockType: string; readonly attrs: Attrs }
+    | { readonly type: 'splitBlock'; readonly blockId: string; readonly offset: number; readonly newId: string; readonly newType?: string; readonly newAttrs?: Attrs }
+    | { readonly type: 'mergeBlock'; readonly blockId: string; readonly intoId: string }
+    | { readonly type: 'insertBlock'; readonly node: Node; readonly index: number }
+    | { readonly type: 'removeBlock'; readonly blockId: string }
+    | { readonly type: 'moveBlock'; readonly blockId: string; readonly toIndex: number }
+    | { readonly type: 'setDoc'; readonly doc: EditorDocument };
+
+export interface StepResult {
+  readonly doc: EditorDocument;
+  readonly inverted: Step;
+}
+
+function mapBlock(doc: EditorDocument, blockId: string, fn: (node: Node) => Node): EditorDocument {
+  return replaceBlocks(doc, doc.content.map(block => (block.id === blockId ? fn(block) : block)));
+}
+
+/**
+ * Apply a single step to a document, returning the next document and the exact
+ * inverse step (so undo is correct by construction). Pure: never mutates input.
+ * If the addressed block is missing the step is a no-op (defends against remote
+ * steps referencing concurrently-removed blocks).
+ */
+export function applyStep(doc: EditorDocument, step: Step, schema: Schema): StepResult {
+  switch (step.type) {
+    case 'insertInline': {
+      const block = blockById(doc, step.blockId);
+      if (!block)
+        return { doc, inverted: step };
+
+      const next = normalizeInline(insertInline(nodeInline(block), step.offset, step.content));
+      return {
+        doc: mapBlock(doc, step.blockId, b => withContent(b, next)),
+        inverted: { type: 'deleteText', blockId: step.blockId, from: step.offset, to: step.offset + inlineLength(step.content) },
+      };
+    }
+
+    case 'deleteText': {
+      const block = blockById(doc, step.blockId);
+      if (!block)
+        return { doc, inverted: step };
+
+      const inline = nodeInline(block);
+      const removed = sliceInline(inline, step.from, step.to);
+      return {
+        doc: mapBlock(doc, step.blockId, b => withContent(b, normalizeInline(deleteTextInline(inline, step.from, step.to)))),
+        inverted: { type: 'insertInline', blockId: step.blockId, offset: step.from, content: removed },
+      };
+    }
+
+    case 'replaceInline': {
+      const block = blockById(doc, step.blockId);
+      if (!block)
+        return { doc, inverted: step };
+
+      const inline = nodeInline(block);
+      const removed = sliceInline(inline, step.from, step.to);
+      return {
+        doc: mapBlock(doc, step.blockId, b => withContent(b, normalizeInline(replaceInline(inline, step.from, step.to, step.content)))),
+        inverted: { type: 'replaceInline', blockId: step.blockId, from: step.from, to: step.from + inlineLength(step.content), content: removed },
+      };
+    }
+
+    case 'addMark':
+    case 'removeMark': {
+      const block = blockById(doc, step.blockId);
+      if (!block)
+        return { doc, inverted: step };
+
+      const inline = nodeInline(block);
+      const removed = sliceInline(inline, step.from, step.to); // exact prior state of the range
+      const next = step.type === 'addMark'
+        ? addMarkInline(inline, step.from, step.to, step.mark)
+        : removeMarkInline(inline, step.from, step.to, step.mark.type);
+      return {
+        doc: mapBlock(doc, step.blockId, b => withContent(b, normalizeInline(next))),
+        // Length is unchanged, so restoring the saved slice over [from, to) is an exact inverse.
+        inverted: { type: 'replaceInline', blockId: step.blockId, from: step.from, to: step.to, content: removed },
+      };
+    }
+
+    case 'setAttrs': {
+      const block = blockById(doc, step.blockId);
+      if (!block)
+        return { doc, inverted: step };
+
+      return {
+        doc: mapBlock(doc, step.blockId, b => withAttrs(b, step.attrs)),
+        inverted: { type: 'setAttrs', blockId: step.blockId, attrs: block.attrs },
+      };
+    }
+
+    case 'setType': {
+      const block = blockById(doc, step.blockId);
+      if (!block)
+        return { doc, inverted: step };
+
+      return {
+        doc: mapBlock(doc, step.blockId, b => withType(b, step.blockType, step.attrs)),
+        inverted: { type: 'setType', blockId: step.blockId, blockType: block.type, attrs: block.attrs },
+      };
+    }
+
+    case 'splitBlock': {
+      const found = findBlock(doc, step.blockId);
+      if (!found)
+        return { doc, inverted: step };
+
+      const { node, index } = found;
+      const inline = nodeInline(node);
+      const head = normalizeInline(sliceInline(inline, 0, step.offset));
+      const tail = normalizeInline(sliceInline(inline, step.offset, inlineLength(inline)));
+      const newAttrs = step.newAttrs ?? (step.newType ? schema.defaultAttrs(step.newType) : node.attrs);
+      const newNode = createNode(step.newType ?? node.type, { id: step.newId, attrs: newAttrs, content: tail });
+      const content = [...doc.content.slice(0, index), withContent(node, head), newNode, ...doc.content.slice(index + 1)];
+      return {
+        doc: replaceBlocks(doc, content),
+        inverted: { type: 'mergeBlock', blockId: step.newId, intoId: step.blockId },
+      };
+    }
+
+    case 'mergeBlock': {
+      const source = findBlock(doc, step.blockId);
+      const target = findBlock(doc, step.intoId);
+      if (!source || !target)
+        return { doc, inverted: step };
+
+      const targetInline = nodeInline(target.node);
+      const splitOffset = inlineLength(targetInline);
+      // Drop source marks the target block disallows (e.g. merging styled text
+      // into a code-block must not smuggle in marks past `marks: 'none'`).
+      const targetSpec = schema.nodeSpec(target.node.type);
+      const sourceInline = targetSpec
+        ? nodeInline(source.node).map(run => ({ text: run.text, marks: run.marks.filter(m => marksAllowed(targetSpec, m.type)) }))
+        : nodeInline(source.node);
+      const mergedInline = normalizeInline([...targetInline, ...sourceInline]);
+      const content = doc.content
+        .map(block => (block.id === step.intoId ? withContent(target.node, mergedInline) : block))
+        .filter(block => block.id !== step.blockId);
+      return {
+        doc: replaceBlocks(doc, content),
+        inverted: { type: 'splitBlock', blockId: step.intoId, offset: splitOffset, newId: source.node.id, newType: source.node.type, newAttrs: source.node.attrs },
+      };
+    }
+
+    case 'insertBlock': {
+      const index = Math.max(0, Math.min(step.index, doc.content.length));
+      const content = [...doc.content.slice(0, index), step.node, ...doc.content.slice(index)];
+      return {
+        doc: replaceBlocks(doc, content),
+        inverted: { type: 'removeBlock', blockId: step.node.id },
+      };
+    }
+
+    case 'removeBlock': {
+      const found = findBlock(doc, step.blockId);
+      if (!found)
+        return { doc, inverted: step };
+
+      return {
+        doc: replaceBlocks(doc, doc.content.filter(block => block.id !== step.blockId)),
+        inverted: { type: 'insertBlock', node: found.node, index: found.index },
+      };
+    }
+
+    case 'moveBlock': {
+      const from = blockIndex(doc, step.blockId);
+      if (from === -1)
+        return { doc, inverted: step };
+
+      const arr = [...doc.content];
+      const [moved] = arr.splice(from, 1);
+      const to = Math.max(0, Math.min(step.toIndex, arr.length));
+      arr.splice(to, 0, moved!);
+      return {
+        doc: replaceBlocks(doc, arr),
+        inverted: { type: 'moveBlock', blockId: step.blockId, toIndex: from },
+      };
+    }
+
+    case 'setDoc': {
+      // Replace the whole document (used to apply a remote CRDT snapshot).
+      return {
+        doc: step.doc,
+        inverted: { type: 'setDoc', doc },
+      };
+    }
+  }
+}
diff --git a/vue/editor/src/state/transaction.ts b/vue/editor/src/state/transaction.ts
new file mode 100644
index 0000000..da5d0f5
--- /dev/null
+++ b/vue/editor/src/state/transaction.ts
@@ -0,0 +1,180 @@
+import type { Attrs, EditorDocument, Inline, Mark, Marks, Node, Position, Selection } from '../model';
+import { blockById, caret, createId, firstBlock, inlineLength, nodeInline } from '../model';
+import type { Schema } from '../schema';
+import type { EditorState } from './editor-state';
+import type { Step } from './step';
+import { applyStep } from './step';
+
+/**
+ * A mutable builder that accumulates atomic {@link Step}s over a working copy of
+ * the document. Each builder method applies its step immediately (so later
+ * builders see prior effects) and records the exact inverse for undo. Dispatch
+ * turns the finished transaction into a new {@link EditorState}.
+ */
+export class Transaction {
+  readonly before: EditorState;
+  readonly steps: Step[] = [];
+  /** Inverse of each step, in application order (reversed when undoing). */
+  readonly inverted: Step[] = [];
+  readonly meta = new Map<string, unknown>();
+  /** Working document after the steps applied so far. */
+  doc: EditorDocument;
+  /** Selection to apply after this transaction. */
+  selection: Selection;
+  /** `undefined` = leave stored marks to default handling; otherwise set them. */
+  storedMarks: Marks | null | undefined = undefined;
+  /** Id of the block created by the most recent {@link splitBlock}. */
+  lastSplitId: string | undefined;
+
+  private readonly schema: Schema;
+
+  constructor(state: EditorState) {
+    this.before = state;
+    this.doc = state.doc;
+    this.selection = state.selection;
+    this.schema = state.schema;
+  }
+
+  /** Apply a raw step (also used by undo/redo to replay stored steps). */
+  step(step: Step): this {
+    const result = applyStep(this.doc, step, this.schema);
+    this.doc = result.doc;
+    this.steps.push(step);
+    this.inverted.push(result.inverted);
+    return this;
+  }
+
+  insertText(pos: Position, text: string, marks: Marks = []): this {
+    return this.step({ type: 'insertInline', blockId: pos.blockId, offset: pos.offset, content: text ? [{ text, marks }] : [] });
+  }
+
+  insertInline(pos: Position, content: Inline): this {
+    return this.step({ type: 'insertInline', blockId: pos.blockId, offset: pos.offset, content });
+  }
+
+  deleteText(blockId: string, from: number, to: number): this {
+    return this.step({ type: 'deleteText', blockId, from, to });
+  }
+
+  replaceInline(blockId: string, from: number, to: number, content: Inline): this {
+    return this.step({ type: 'replaceInline', blockId, from, to, content });
+  }
+
+  /** Replace a block's entire inline content (used by the input flush path). */
+  setBlockContent(blockId: string, content: Inline): this {
+    const block = blockById(this.doc, blockId);
+    const length = block ? inlineLength(nodeInline(block)) : 0;
+    return this.step({ type: 'replaceInline', blockId, from: 0, to: length, content });
+  }
+
+  addMark(blockId: string, from: number, to: number, mark: Mark): this {
+    return this.step({ type: 'addMark', blockId, from, to, mark });
+  }
+
+  removeMark(blockId: string, from: number, to: number, mark: Mark): this {
+    return this.step({ type: 'removeMark', blockId, from, to, mark });
+  }
+
+  /** Merge `attrs` into the block's existing attrs. */
+  setAttrs(blockId: string, attrs: Attrs): this {
+    const block = blockById(this.doc, blockId);
+    return this.step({ type: 'setAttrs', blockId, attrs: { ...(block?.attrs ?? {}), ...attrs } });
+  }
+
+  /** Convert a block to another type, preserving its inline content. */
+  setBlockType(blockId: string, type: string, attrs?: Attrs): this {
+    return this.step({ type: 'setType', blockId, blockType: type, attrs: attrs ?? this.schema.defaultAttrs(type) });
+  }
+
+  splitBlock(pos: Position, newType?: string, newAttrs?: Attrs, newId: string = createId()): this {
+    this.lastSplitId = newId;
+    return this.step({ type: 'splitBlock', blockId: pos.blockId, offset: pos.offset, newId, newType, newAttrs });
+  }
+
+  mergeBlock(blockId: string, intoId: string): this {
+    return this.step({ type: 'mergeBlock', blockId, intoId });
+  }
+
+  insertBlock(node: Node, index: number): this {
+    return this.step({ type: 'insertBlock', node, index });
+  }
+
+  removeBlock(blockId: string): this {
+    return this.step({ type: 'removeBlock', blockId });
+  }
+
+  moveBlock(blockId: string, toIndex: number): this {
+    return this.step({ type: 'moveBlock', blockId, toIndex });
+  }
+
+  /** Replace the whole document (used to apply a remote CRDT snapshot). */
+  setDoc(doc: EditorDocument): this {
+    return this.step({ type: 'setDoc', doc });
+  }
+
+  setSelection(selection: Selection): this {
+    this.selection = selection;
+    return this;
+  }
+
+  setStoredMarks(marks: Marks | null): this {
+    this.storedMarks = marks;
+    return this;
+  }
+
+  setMeta(key: string, value: unknown): this {
+    this.meta.set(key, value);
+    return this;
+  }
+
+  getMeta(key: string): unknown {
+    return this.meta.get(key);
+  }
+}
+
+/** Start a transaction from the current editor state. */
+export function createTransaction(state: EditorState): Transaction {
+  return new Transaction(state);
+}
+
+function clampPoint(point: Position, doc: EditorDocument): Position | null {
+  const block = blockById(doc, point.blockId);
+
+  if (!block)
+    return null;
+
+  const length = inlineLength(nodeInline(block));
+  return { blockId: point.blockId, offset: Math.max(0, Math.min(point.offset, length)) };
+}
+
+function clampSelection(selection: Selection, doc: EditorDocument): Selection {
+  if (selection.kind === 'node')
+    return selection;
+
+  const anchor = clampPoint(selection.anchor, doc);
+  const focus = clampPoint(selection.focus, doc);
+
+  if (!anchor || !focus) {
+    const first = firstBlock(doc);
+    return first ? caret(first.id, 0) : selection;
+  }
+
+  return { kind: 'text', anchor, focus };
+}
+
+/**
+ * Produce the next editor state from a transaction. Stored marks are kept when
+ * explicitly set, cleared on any content change, and otherwise preserved.
+ */
+export function applyTransaction(state: EditorState, tr: Transaction): EditorState {
+  const storedMarks = tr.storedMarks !== undefined
+    ? tr.storedMarks
+    : (tr.steps.length > 0 ? null : state.storedMarks);
+
+  return {
+    ...state,
+    doc: tr.doc,
+    selection: clampSelection(tr.selection, tr.doc),
+    storedMarks,
+  };
+}
diff --git a/vue/editor/src/view/BlockView.vue b/vue/editor/src/view/BlockView.vue
new file mode 100644
index 0000000..edc1f4c
--- /dev/null
+++ b/vue/editor/src/view/BlockView.vue
@@ -0,0 +1,109 @@
+<script lang="ts">
+import type { Attrs, Node } from '../model';
+</script>
+
+<script setup lang="ts">
+import type { IntrinsicElementAttributes } from 'vue';
+import { computed } from 'vue';
+import { nodeSelection } from '../model';
+import { createTransaction } from '../state';
+import { Primitive } from './primitive';
+import { useEditorContext } from './context';
+import TextBlockHost from './TextBlockHost.vue';
+
+export interface BlockViewProps {
+  block: Node;
+}
+
+const { block } = defineProps<BlockViewProps>();
+const ctx = useEditorContext();
+
+const def = computed(() => ctx.registry.getBlock(block.type));
+const wrapperTag = computed<keyof IntrinsicElementAttributes>(() => (def.value?.as ?? 'div') as keyof IntrinsicElementAttributes);
+const isText = computed(() => def.value?.spec.content.kind === 'text');
+const atomComponent = computed(() => def.value?.component);
+const isSelected = computed(() => {
+  const sel = ctx.state.value.selection;
+  return sel.kind === 'node' && sel.ids.includes(block.id);
+});
+
+function updateAttrs(attrs: Attrs): void {
+  ctx.dispatch(createTransaction(ctx.editor.state).setAttrs(block.id, attrs).setSelection(ctx.editor.state.selection));
+}
+
+/** Clicking an atom block selects it as a node (so Backspace/Delete remove it). */
+function onMousedown(event: MouseEvent): void {
+  if (isText.value)
+    return;
+
+  // Don't hijack interactive controls inside the atom (e.g. image fields).
+  if ((event.target as HTMLElement).closest('input, textarea, button, a, select'))
+    return;
+
+  event.preventDefault();
+  ctx.dispatch(createTransaction(ctx.editor.state).setSelection(nodeSelection([block.id])));
+  ctx.contentRoot.value?.focus({ preventScroll: true });
+}
+
+const DND_TYPE = 'application/x-robonen-editor-block';
+
+function onDragStart(event: DragEvent): void {
+  event.dataTransfer?.setData(DND_TYPE, block.id);
+  if (event.dataTransfer)
+    event.dataTransfer.effectAllowed = 'move';
+}
+
+function onDragOver(event: DragEvent): void {
+  if (event.dataTransfer?.types.includes(DND_TYPE))
+    event.preventDefault(); // allow drop
+}
+
+function onDrop(event: DragEvent): void {
+  const draggedId = event.dataTransfer?.getData(DND_TYPE);
+  if (!draggedId || draggedId === block.id)
+    return;
+
+  event.preventDefault();
+  const toIndex = ctx.editor.state.doc.content.findIndex(candidate => candidate.id === block.id);
+  if (toIndex !== -1)
+    ctx.dispatch(createTransaction(ctx.editor.state).moveBlock(draggedId, toIndex).setSelection(ctx.editor.state.selection));
+}
+</script>
+
+<template>
+  <Primitive
+    :as="wrapperTag"
+    :data-block-id="block.id"
+    :data-block-type="block.type"
+    :data-selected="isSelected ? '' : undefined"
+    :data-draggable="ctx.config.draggable ? '' : undefined"
+    :contenteditable="isText ? undefined : 'false'"
+    @mousedown="onMousedown"
+    @dragover="onDragOver"
+    @drop="onDrop"
+  >
+    <span
+      v-if="ctx.config.draggable"
+      class="editor-drag-handle"
+      data-editor-drag-handle=""
+      contenteditable="false"
+      draggable="true"
+      aria-label="Drag to reorder"
+      @mousedown.stop
+      @dragstart="onDragStart"
+    >⠿</span>
+    <TextBlockHost
+      v-if="isText && def"
+      :block="block"
+      :definition="def"
+    />
+    <component
+      :is="atomComponent || 'div'"
+      v-else-if="atomComponent"
+      :node="block"
+      :selected="isSelected"
+      :editable="ctx.config.editable"
+      :update="updateAttrs"
+    />
+  </Primitive>
+</template>
diff --git a/vue/editor/src/view/EditorContent.vue b/vue/editor/src/view/EditorContent.vue
new file mode 100644
index 0000000..2733f2b
--- /dev/null
+++ b/vue/editor/src/view/EditorContent.vue
@@ -0,0 +1,155 @@
+<script lang="ts">
+import type { PrimitiveProps } from './primitive';
+</script>
+
+<script setup lang="ts">
+import { blockById, caret, inlineLength, isCollapsed, nodeInline } from '../model';
+import { applyInputRule, deleteSelection, insertHardBreak, joinBackward, joinForward, splitBlock } from '../commands';
+import { createTransaction } from '../state';
+import { Primitive } from './primitive';
+import { useEditorContext } from './context';
+import { isInteractiveTarget } from './interactive';
+import { parseRuns } from './inline-content';
+import BlockView from './BlockView.vue';
+
+export interface EditorContentProps extends PrimitiveProps {}
+
+const { as = 'div' } = defineProps<EditorContentProps>();
+const ctx = useEditorContext();
+
+function setContentRoot(el: unknown): void {
+  ctx.contentRoot.value = (el as HTMLElement | null) ?? null;
+}
+
+/**
+ * Intercept content mutations that the browser would handle incorrectly across
+ * the single editable root: ranged edits (which could corrupt cross-block DOM)
+ * and structural edits at block boundaries. Plain intra-block typing/deletion is
+ * left to the browser and synced from the DOM on `input`.
+ */
+function onBeforeInput(event: InputEvent): void {
+  if (ctx.composing.value || isInteractiveTarget(event.target))
+    return;
+
+  const type = event.inputType;
+  if (!type.startsWith('insert') && !type.startsWith('delete'))
+    return;
+
+  const sel = ctx.selection.read();
+  if (!sel || sel.kind !== 'text')
+    return;
+
+  // Ranged selection — we own it so cross-block deletes/inserts stay consistent.
+  if (!isCollapsed(sel)) {
+    event.preventDefault();
+    ctx.editor.command(deleteSelection);
+
+    const after = ctx.editor.state.selection;
+    if (after.kind !== 'text')
+      return;
+
+    if ((type === 'insertText' || type === 'insertReplacementText' || type === 'insertCompositionText') && event.data) {
+      ctx.editor.dispatch(createTransaction(ctx.editor.state)
+        .insertText(after.focus, event.data, ctx.editor.state.storedMarks ?? [])
+        .setSelection(caret(after.focus.blockId, after.focus.offset + event.data.length)));
+    }
+    else if (type === 'insertParagraph') {
+      ctx.editor.command(splitBlock);
+    }
+    else if (type === 'insertLineBreak') {
+      ctx.editor.command(insertHardBreak);
+    }
+    return;
+  }
+
+  // Collapsed — take over only structural edits and block-boundary deletions.
+  const block = blockById(ctx.editor.state.doc, sel.focus.blockId);
+  const atStart = sel.focus.offset === 0;
+  const atEnd = block ? sel.focus.offset === inlineLength(nodeInline(block)) : false;
+
+  switch (type) {
+    case 'insertParagraph':
+      event.preventDefault();
+      ctx.editor.command(splitBlock);
+      break;
+    case 'insertLineBreak':
+      event.preventDefault();
+      ctx.editor.command(insertHardBreak);
+      break;
+    case 'deleteContentBackward':
+      if (atStart) {
+        event.preventDefault();
+        ctx.editor.command(joinBackward);
+      }
+      break; // else: native deletes within the block, synced on `input`
+    case 'deleteContentForward':
+      if (atEnd) {
+        event.preventDefault();
+        ctx.editor.command(joinForward);
+      }
+      break;
+    default:
+      break; // insertText etc. → native, synced on `input`
+  }
+}
+
+/** Sync the model from the DOM after a native intra-block edit (one block only). */
+function onInput(event?: Event): void {
+  if (ctx.composing.value || (event && isInteractiveTarget(event.target)))
+    return;
+
+  const sel = ctx.selection.read();
+  if (!sel || sel.kind !== 'text')
+    return;
+
+  const host = ctx.blockElements.get(sel.focus.blockId);
+  const block = blockById(ctx.editor.state.doc, sel.focus.blockId);
+  if (!host || !block || ctx.editor.state.schema.nodeSpec(block.type)?.content.kind !== 'text')
+    return;
+
+  const runs = parseRuns(host, ctx.registry);
+  ctx.editor.dispatch(createTransaction(ctx.editor.state)
+    .setBlockContent(sel.focus.blockId, runs)
+    .setSelection(sel)
+    .setMeta('origin', sel.focus.blockId)); // suppress repaint of the block we just typed in
+
+  // Markdown-style shortcuts: '# ' → heading, '- ' → list, '> ' → quote, …
+  ctx.editor.command(applyInputRule);
+}
+
+function onCompositionStart(event: CompositionEvent): void {
+  if (isInteractiveTarget(event.target))
+    return;
+  ctx.composing.value = true;
+}
+
+function onCompositionEnd(event: CompositionEvent): void {
+  if (isInteractiveTarget(event.target))
+    return;
+  ctx.composing.value = false;
+  onInput();
+}
+</script>
+
+<template>
+  <Primitive
+    :ref="setContentRoot"
+    :as="as"
+    role="textbox"
+    aria-multiline="true"
+    :aria-readonly="!ctx.config.editable || undefined"
+    data-editor-content=""
+    :contenteditable="ctx.config.editable ? 'true' : 'false'"
+    :spellcheck="ctx.config.spellcheck"
+    @beforeinput="onBeforeInput"
+    @input="onInput"
+    @compositionstart="onCompositionStart"
+    @compositionend="onCompositionEnd"
+  >
+    <BlockView
+      v-for="block in ctx.state.value.doc.content"
+      :key="block.id"
+      :block="block"
+    />
+  </Primitive>
+</template>
diff --git a/vue/editor/src/view/EditorRoot.vue b/vue/editor/src/view/EditorRoot.vue
new file mode 100644
index 0000000..915de3a
--- /dev/null
+++ b/vue/editor/src/view/EditorRoot.vue
@@ -0,0 +1,168 @@
+<script lang="ts">
+import type { PrimitiveProps } from './primitive';
+import type { Keymap } from '../keymap';
+import type { Command, CommandView, Editor, EditorState, Transaction } from '../state';
+import type { Platform } from './config';
+</script>
+
+<script setup lang="ts">
+import { nextTick, onBeforeUnmount, ref, shallowRef } from 'vue';
+import { blockById, caret, inlineLength, nodeInline, selectionEq } from '../model';
+import { compileKeymaps, defaultKeymap, runKeydown } from '../keymap';
+import { createTransaction } from '../state';
+import { Primitive } from './primitive';
+import { provideEditorContext } from './context';
+import { resolveConfig } from './config';
+import { createBlockElementRegistry, createSelectionBridge } from './selection';
+import { useEventListener } from './composables';
+import { isInteractiveTarget } from './interactive';
+import EditorContent from './EditorContent.vue';
+
+export interface EditorRootProps extends PrimitiveProps {
+  /** The headless controller (create with `createEditor(createEditorState(...))`). */
+  editor: Editor;
+  /** User keymaps, merged over the defaults (earlier wins). */
+  keymaps?: Keymap[];
+  editable?: boolean;
+  dir?: 'ltr' | 'rtl';
+  spellcheck?: boolean;
+  platform?: Platform;
+  /** Show per-block drag handles for reordering. */
+  draggable?: boolean;
+  /** Focus the start of the document on mount. */
+  autofocus?: boolean;
+}
+
+const {
+  editor,
+  keymaps,
+  as = 'div',
+  editable = true,
+  dir = 'ltr',
+  spellcheck = true,
+  platform,
+  draggable = false,
+  autofocus = false,
+} = defineProps<EditorRootProps>();
+
+const root = ref<HTMLElement | null>(null);
+const contentRoot = shallowRef<HTMLElement | null>(null);
+const state = shallowRef<EditorState>(editor.state);
+const composing = ref(false);
+const lastOrigin = ref<string | undefined>(undefined);
+const blockElements = createBlockElementRegistry();
+const selection = createSelectionBridge(() => contentRoot.value, blockElements);
+const config = resolveConfig({ editable, dir, spellcheck, platform, draggable });
+const compiled = compileKeymaps([...(keymaps ?? []), defaultKeymap(editor)], config.platform);
+
+let suppressSelectionSync = false;
+
+function focusBlock(blockId: string, offset: number | 'start' | 'end'): void {
+  const block = blockById(editor.state.doc, blockId);
+  const length = block ? inlineLength(nodeInline(block)) : 0;
+  const resolved = offset === 'start' ? 0 : offset === 'end' ? length : offset;
+  selection.write(caret(blockId, resolved));
+}
+
+const view: CommandView = { focusBlock };
+
+provideEditorContext({
+  editor,
+  state,
+  registry: editor.state.registry,
+  config,
+  contentRoot,
+  blockElements,
+  selection,
+  composing,
+  lastOrigin,
+  dispatch: editor.dispatch,
+  exec: (command: Command) => editor.command(command),
+  focusBlock,
+});
+
+/** After a transaction, reflect the model selection back into the DOM caret. */
+function reconcileSelection(): void {
+  if (composing.value)
+    return;
+
+  // The user is editing an atom's control (e.g. an image caption input); writing
+  // the model selection here would focus the editor and yank focus out of it.
+  if (typeof document !== 'undefined' && isInteractiveTarget(document.activeElement))
+    return;
+
+  const current = selection.read();
+  if (current && selectionEq(current, editor.state.selection))
+    return;
+
+  suppressSelectionSync = true;
+  selection.write(editor.state.selection);
+  nextTick(() => {
+    suppressSelectionSync = false;
+  });
+}
+
+function onTransaction(tr: Transaction, next: EditorState): void {
+  state.value = next;
+  lastOrigin.value = tr.getMeta('origin') as string | undefined;
+  // Defer to nextTick so block content re-renders (TextBlockHost) run first.
+  nextTick(reconcileSelection);
+}
+
+editor.on('transaction', onTransaction);
+onBeforeUnmount(() => editor.off('transaction', onTransaction));
+
+function onKeydown(event: KeyboardEvent): void {
+  if (composing.value || event.isComposing || !editable || isInteractiveTarget(event.target))
+    return; // let atom controls (e.g. image caption inputs) handle their own keys
+
+  if (runKeydown(event, compiled, editor.state, editor.dispatch, view)) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+}
+
+function onSelectionChange(): void {
+  if (composing.value || suppressSelectionSync)
+    return;
+
+  // Ignore selection changes that belong to an atom's own control (e.g. an image
+  // caption input) — reading/writing them would steal focus back into the editor.
+  if (typeof document !== 'undefined' && isInteractiveTarget(document.activeElement))
+    return;
+
+  const sel = selection.read();
+  if (!sel || selectionEq(sel, editor.state.selection))
+    return;
+
+  editor.dispatch(createTransaction(editor.state).setSelection(sel).setMeta('selectionOnly', true));
+}
+
+useEventListener(root, 'keydown', onKeydown as (event: Event) => void, { capture: true });
+useEventListener(() => (typeof document === 'undefined' ? undefined : document), 'selectionchange', onSelectionChange);
+
+if (autofocus) {
+  nextTick(() => {
+    const first = editor.state.doc.content[0];
+    if (first)
+      focusBlock(first.id, 'start');
+  });
+}
+
+function setRoot(el: unknown): void {
+  root.value = (el as HTMLElement | null) ?? null;
+}
+</script>
+
+<template>
+  <Primitive
+    :ref="setRoot"
+    :as="as"
+    role="group"
+    data-editor-root=""
+    :data-editable="editable ? '' : undefined"
+    :dir="dir"
+  >
+    <slot><EditorContent /></slot>
+  </Primitive>
+</template>
diff --git a/vue/editor/src/view/TextBlockHost.vue b/vue/editor/src/view/TextBlockHost.vue
new file mode 100644
index 0000000..84f114f
--- /dev/null
+++ b/vue/editor/src/view/TextBlockHost.vue
@@ -0,0 +1,89 @@
+<script lang="ts">
+import type { Node } from '../model';
+import type { BlockDefinition } from '../registry';
+</script>
+
+<script setup lang="ts">
+import type { IntrinsicElementAttributes } from 'vue';
+import { computed, onBeforeUnmount, watch } from 'vue';
+import { inlineLength, nodeInline } from '../model';
+import { Primitive } from './primitive';
+import { useEditorContext } from './context';
+import { renderRuns } from './inline-content';
+
+export interface TextBlockHostProps {
+  block: Node;
+  definition: BlockDefinition;
+}
+
+const { block, definition } = defineProps<TextBlockHostProps>();
+const ctx = useEditorContext();
+
+let hostEl: HTMLElement | null = null;
+
+/** The element's tag — derived from the block's `toDOM` (h1, p, …). */
+const tag = computed<keyof IntrinsicElementAttributes>(() => {
+  const out = definition.spec.toDOM?.(block);
+  if (typeof out === 'string')
+    return out as keyof IntrinsicElementAttributes;
+  if (Array.isArray(out) && typeof out[0] === 'string')
+    return out[0] as keyof IntrinsicElementAttributes;
+  return (definition.as ?? 'div') as keyof IntrinsicElementAttributes;
+});
+
+const isEmpty = computed(() => inlineLength(nodeInline(block)) === 0);
+
+/** Element attributes contributed by the block's `toDOM` (e.g. callout/list styling). */
+const hostAttrs = computed<Record<string, string>>(() => {
+  const out = definition.spec.toDOM?.(block);
+  if (Array.isArray(out) && out.length > 1) {
+    const second = out[1];
+    if (second && typeof second === 'object' && !Array.isArray(second))
+      return second as Record<string, string>;
+  }
+  return {};
+});
+
+/**
+ * Function ref: fires when the element is created or replaced (e.g. a heading
+ * level change swaps the tag). Registers the element and paints its inline
+ * content imperatively. The element is NOT itself contenteditable — the single
+ * editable root is the ancestor EditorContent — but Vue must never diff this
+ * inner DOM, which is what keeps the caret stable.
+ */
+function setHost(el: unknown): void {
+  const node = (el as HTMLElement | null) ?? null;
+  hostEl = node;
+
+  if (node) {
+    ctx.blockElements.set(block.id, node);
+    renderRuns(node, nodeInline(block), ctx.registry);
+  }
+}
+
+onBeforeUnmount(() => ctx.blockElements.delete(block.id));
+
+// Re-paint only for foreign changes (undo/redo, commands, remote, another block)
+// — never for our own keystrokes (origin === block.id), where the DOM is current.
+watch(
+  () => block.content,
+  () => {
+    if (ctx.composing.value || ctx.lastOrigin.value === block.id || !hostEl)
+      return;
+    renderRuns(hostEl, nodeInline(block), ctx.registry);
+  },
+  { flush: 'post' },
+);
+</script>
+
+<template>
+  <Primitive
+    :ref="setHost"
+    :as="tag"
+    v-bind="hostAttrs"
+    data-block-content=""
+    :data-block-id="block.id"
+    :data-empty="isEmpty ? '' : undefined"
+    :data-placeholder="definition.placeholder"
+  />
+</template>
diff --git a/vue/editor/src/view/__test__/editor.browser.test.ts b/vue/editor/src/view/__test__/editor.browser.test.ts
new file mode 100644
index 0000000..d01e865
--- /dev/null
+++ b/vue/editor/src/view/__test__/editor.browser.test.ts
@@ -0,0 +1,136 @@
+import { render } from 'vitest-browser-vue';
+import { describe, expect, it, vi } from 'vitest';
+import { nextTick } from 'vue';
+import { createDoc, createNode, textSelection } from '../../model';
+import { createDefaultRegistry } from '../../preset';
+import { createEditor, createEditorState, createTransaction } from '../../state';
+import EditorRoot from '../EditorRoot.vue';
+
+function para(id: string, text: string) {
+  return createNode('paragraph', { id, content: text ? [{ text, marks: [] }] : [] });
+}
+
+function mount(blocks: Array<ReturnType<typeof para>>) {
+  const registry = createDefaultRegistry();
+  const editor = createEditor({ state: createEditorState({ registry, doc: createDoc(blocks) }) });
+  render(EditorRoot, { props: { editor, platform: 'mac' } });
+  return editor;
+}
+
+function selectNative(anchor: { node: Node; offset: number }, focus: { node: Node; offset: number }) {
+  const sel = getSelection()!;
+  sel.removeAllRanges();
+  const range = document.createRange();
+  range.setStart(anchor.node, anchor.offset);
+  range.setEnd(focus.node, focus.offset);
+  sel.addRange(range);
+}
+
+describe('EditorRoot (single contenteditable)', () => {
+  it('renders ONE editable root containing non-editable block elements', async () => {
+    mount([para('a', 'hello')]);
+    await nextTick();
+
+    const ce = document.querySelector('[data-editor-content]')!;
+    expect(ce.getAttribute('contenteditable')).toBe('true');
+
+    const host = document.querySelector('[data-block-content]') as HTMLElement;
+    expect(host.textContent).toBe('hello');
+    // The block element itself is NOT a separate editing host.
+    expect(host.getAttribute('contenteditable')).toBeNull();
+  });
+
+  it('maps a cross-block native selection to a cross-block model range', async () => {
+    const editor = mount([para('a', 'hello'), para('b', 'world')]);
+    await nextTick();
+
+    const hosts = document.querySelectorAll('[data-block-content]');
+    const aText = hosts[0]!.firstChild!; // text node "hello"
+    const bText = hosts[1]!.firstChild!; // text node "world"
+
+    selectNative({ node: aText, offset: 1 }, { node: bText, offset: 3 });
+
+    // `selectionchange` is dispatched on a macrotask, so awaiting microtasks
+    // (nextTick) isn't enough — poll until the editor has synced the model.
+    const sel = await vi.waitFor(() => {
+      const s = editor.state.selection;
+      if (s.kind !== 'text' || s.anchor.offset !== 1)
+        throw new Error('selection not synced yet');
+      return s;
+    });
+
+    expect(sel.anchor.blockId).toBe('a');
+    expect(sel.anchor.offset).toBe(1);
+    expect(sel.focus.blockId).toBe('b');
+    expect(sel.focus.offset).toBe(3);
+  });
+
+  it('writes a cross-block model selection back to a native range spanning blocks', async () => {
+    const editor = mount([para('a', 'hello'), para('b', 'world')]);
+    await nextTick();
+
+    editor.dispatch(createTransaction(editor.state).setSelection(
+      textSelection({ blockId: 'a', offset: 2 }, { blockId: 'b', offset: 4 }),
+    ));
+    await nextTick();
+    await nextTick();
+
+    const sel = getSelection()!;
+    const hosts = document.querySelectorAll('[data-block-content]');
+    expect(hosts[0]!.contains(sel.anchorNode)).toBe(true);
+    expect(hosts[1]!.contains(sel.focusNode)).toBe(true);
+    expect(sel.isCollapsed).toBe(false);
+  });
+
+  it('applies bold via Mod-b to a selected range', async () => {
+    const editor = mount([para('a', 'hello')]);
+    await nextTick();
+
+    editor.dispatch(createTransaction(editor.state).setSelection(
+      textSelection({ blockId: 'a', offset: 0 }, { blockId: 'a', offset: 5 }),
+    ));
+    await nextTick();
+
+    const root = document.querySelector<HTMLElement>('[data-editor-root]')!;
+    root.dispatchEvent(new KeyboardEvent('keydown', { key: 'b', metaKey: true, bubbles: true, cancelable: true }));
+    await nextTick();
+    await nextTick();
+
+    expect(document.querySelector('[data-block-content] strong')?.textContent).toBe('hello');
+  });
+
+  it('splits a block on Enter', async () => {
+    const editor = mount([para('a', 'hello')]);
+    await nextTick();
+
+    editor.dispatch(createTransaction(editor.state).setSelection(textSelection({ blockId: 'a', offset: 2 })));
+    await nextTick();
+
+    const root = document.querySelector<HTMLElement>('[data-editor-root]')!;
+    root.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true }));
+    await nextTick();
+    await nextTick();
+
+    const hosts = document.querySelectorAll('[data-block-content]');
+    expect(hosts.length).toBe(2);
+    expect(hosts[0]!.textContent).toBe('he');
+    expect(hosts[1]!.textContent).toBe('llo');
+  });
+
+  it('merges into the previous block on Backspace at block start', async () => {
+    const editor = mount([para('a', 'foo'), para('b', 'bar')]);
+    await nextTick();
+
+    editor.dispatch(createTransaction(editor.state).setSelection(textSelection({ blockId: 'b', offset: 0 })));
+    await nextTick();
+
+    const root = document.querySelector<HTMLElement>('[data-editor-root]')!;
+    root.dispatchEvent(new KeyboardEvent('keydown', { key: 'Backspace', bubbles: true, cancelable: true }));
+    await nextTick();
+    await nextTick();
+
+    const hosts = document.querySelectorAll('[data-block-content]');
+    expect(hosts.length).toBe(1);
+    expect(hosts[0]!.textContent).toBe('foobar');
+  });
+});
diff --git a/vue/editor/src/view/composables/index.ts b/vue/editor/src/view/composables/index.ts
new file mode 100644
index 0000000..32077b1
--- /dev/null
+++ b/vue/editor/src/view/composables/index.ts
@@ -0,0 +1,2 @@
+export { useContextFactory } from './useContextFactory';
+export { useEventListener } from './useEventListener';
diff --git a/vue/editor/src/view/composables/useContextFactory.ts b/vue/editor/src/view/composables/useContextFactory.ts
new file mode 100644
index 0000000..637cd4e
--- /dev/null
+++ b/vue/editor/src/view/composables/useContextFactory.ts
@@ -0,0 +1,31 @@
+import type { App, InjectionKey } from 'vue';
+import { inject as vueInject, provide as vueProvide } from 'vue';
+
+/**
+ * Factory for a strongly-typed provide/inject pair keyed by a unique Symbol.
+ * Local copy of the `@robonen/vue` helper so the editor stays self-contained.
+ */
+export function useContextFactory<ContextValue>(name: string) {
+  const injectionKey: InjectionKey<ContextValue> = Symbol(name);
+
+  const inject = <Fallback extends ContextValue = ContextValue>(fallback?: Fallback) => {
+    const context = vueInject(injectionKey, fallback);
+
+    if (context !== undefined)
+      return context;
+
+    throw new Error(`useContextFactory: '${name}' context is not provided`);
+  };
+
+  const provide = (context: ContextValue) => {
+    vueProvide(injectionKey, context);
+    return context;
+  };
+
+  const appProvide = (app: App) => (context: ContextValue) => {
+    app.provide(injectionKey, context);
+    return context;
+  };
+
+  return { inject, provide, appProvide, key: injectionKey };
+}
diff --git a/vue/editor/src/view/composables/useEventListener.ts b/vue/editor/src/view/composables/useEventListener.ts
new file mode 100644
index 0000000..8efcd7d
--- /dev/null
+++ b/vue/editor/src/view/composables/useEventListener.ts
@@ -0,0 +1,38 @@
+import type { MaybeRefOrGetter } from 'vue';
+import { onScopeDispose, toValue, watch } from 'vue';
+
+type ListenerTarget = Window | Document | HTMLElement | null | undefined;
+
+/**
+ * Attach an event listener to a (possibly reactive) target, re-binding when the
+ * target changes and cleaning up on scope dispose. Minimal local replacement for
+ * the `@robonen/vue` composable.
+ */
+export function useEventListener(
+  target: MaybeRefOrGetter<ListenerTarget>,
+  event: string,
+  handler: (event: Event) => void,
+  options?: boolean | AddEventListenerOptions,
+): () => void {
+  let detach = (): void => {};
+
+  const stopWatch = watch(
+    () => toValue(target),
+    (el) => {
+      detach();
+      if (!el)
+        return;
+      el.addEventListener(event, handler, options);
+      detach = () => el.removeEventListener(event, handler, options);
+    },
+    { immediate: true, flush: 'post' },
+  );
+
+  const stop = (): void => {
+    detach();
+    stopWatch();
+  };
+
+  onScopeDispose(stop);
+  return stop;
+}
diff --git a/vue/editor/src/view/config.ts b/vue/editor/src/view/config.ts
new file mode 100644
index 0000000..7385e0a
--- /dev/null
+++ b/vue/editor/src/view/config.ts
@@ -0,0 +1,35 @@
+export type Platform = 'mac' | 'other';
+
+/** Editor-wide configuration provided through the editor context. */
+export interface EditorConfig {
+  /** Whether content is editable (false renders read-only). */
+  editable: boolean;
+  /** Platform for keybinding normalization (`Mod` → Cmd/Ctrl). */
+  platform: Platform;
+  /** Text direction. */
+  dir: 'ltr' | 'rtl';
+  /** Native spellcheck on the contenteditable hosts. */
+  spellcheck: boolean;
+  /** Show per-block drag handles for reordering. */
+  draggable: boolean;
+}
+
+/** Detect the platform from the user agent (defaults to `'other'` off-browser). */
+export function detectPlatform(): Platform {
+  if (typeof navigator === 'undefined')
+    return 'other';
+
+  const probe = navigator.userAgent || '';
+  return /Mac|iPhone|iPad|iPod/.test(probe) ? 'mac' : 'other';
+}
+
+/** Build a config with sensible defaults. */
+export function resolveConfig(partial?: Partial<EditorConfig>): EditorConfig {
+  return {
+    editable: partial?.editable ?? true,
+    platform: partial?.platform ?? detectPlatform(),
+    dir: partial?.dir ?? 'ltr',
+    spellcheck: partial?.spellcheck ?? true,
+    draggable: partial?.draggable ?? false,
+  };
+}
diff --git a/vue/editor/src/view/context.ts b/vue/editor/src/view/context.ts
new file mode 100644
index 0000000..5a8d87c
--- /dev/null
+++ b/vue/editor/src/view/context.ts
@@ -0,0 +1,36 @@
+import type { Ref, ShallowRef } from 'vue';
+import type { Registry } from '../registry';
+import { useContextFactory } from './composables';
+import type { Command, Dispatch, Editor, EditorState } from '../state';
+import type { EditorConfig } from './config';
+import type { BlockElementRegistry, SelectionBridge } from './selection';
+
+/** Everything child components and the input/selection plumbing need. */
+export interface EditorContextValue {
+  /** The headless controller. */
+  editor: Editor;
+  /** Reactive mirror of `editor.state`, replaced wholesale per transaction. */
+  state: ShallowRef<EditorState>;
+  registry: Registry;
+  config: EditorConfig;
+  /** The single contenteditable root element (set by EditorContent). */
+  contentRoot: ShallowRef<HTMLElement | null>;
+  /** Block id → its (non-editable) block-content element. */
+  blockElements: BlockElementRegistry;
+  /** DOM ↔ model selection mapping. */
+  selection: SelectionBridge;
+  /** True while an IME composition is in flight (suppresses model sync). */
+  composing: Ref<boolean>;
+  /** Origin (`meta('origin')`) of the most recent transaction, if any. */
+  lastOrigin: Ref<string | undefined>;
+  dispatch: Dispatch;
+  /** Run a command against the current state. */
+  exec: (command: Command) => boolean;
+  /** Move real DOM focus + caret into a block. */
+  focusBlock: (blockId: string, offset: number | 'start' | 'end') => void;
+}
+
+export const {
+  inject: useEditorContext,
+  provide: provideEditorContext,
+} = useContextFactory<EditorContextValue>('EditorContext');
diff --git a/vue/editor/src/view/index.ts b/vue/editor/src/view/index.ts
new file mode 100644
index 0000000..e4409b9
--- /dev/null
+++ b/vue/editor/src/view/index.ts
@@ -0,0 +1,15 @@
+export * from './primitive';
+export * from './config';
+export * from './context';
+export * from './inline-content';
+export * from './selection';
+export * from './ui';
+
+export { default as EditorRoot } from './EditorRoot.vue';
+export type { EditorRootProps } from './EditorRoot.vue';
+export { default as EditorContent } from './EditorContent.vue';
+export type { EditorContentProps } from './EditorContent.vue';
+export { default as BlockView } from './BlockView.vue';
+export type { BlockViewProps } from './BlockView.vue';
+export { default as TextBlockHost } from './TextBlockHost.vue';
+export type { TextBlockHostProps } from './TextBlockHost.vue';
diff --git a/vue/editor/src/view/inline-content/index.ts b/vue/editor/src/view/inline-content/index.ts
new file mode 100644
index 0000000..6ca0506
--- /dev/null
+++ b/vue/editor/src/view/inline-content/index.ts
@@ -0,0 +1,2 @@
+export { renderRuns, FILLER_ATTR } from './render';
+export { parseRuns } from './parse';
diff --git a/vue/editor/src/view/inline-content/parse.ts b/vue/editor/src/view/inline-content/parse.ts
new file mode 100644
index 0000000..8d3a9b1
--- /dev/null
+++ b/vue/editor/src/view/inline-content/parse.ts
@@ -0,0 +1,67 @@
+import type { Inline, InlineNode, Mark } from '../../model';
+import { normalizeInline, normalizeMarks } from '../../model';
+import type { Registry } from '../../registry';
+import { FILLER_ATTR } from './render';
+
+// Zero-width space, built without embedding the literal character in source.
+const ZWSP = new RegExp(String.fromCharCode(0x200B), 'g');
+
+/** Marks contributed by a single element, via each mark's `parseDOM` rules. */
+function marksForElement(el: HTMLElement, registry: Registry): Mark[] {
+  const marks: Mark[] = [];
+
+  for (const def of registry.allMarks()) {
+    for (const rule of def.spec.parseDOM) {
+      if (!rule.tag || !el.matches(rule.tag))
+        continue;
+
+      let attrs = rule.attrs;
+
+      if (rule.getAttrs) {
+        const got = rule.getAttrs(el);
+        if (got === false || got === null)
+          continue;
+        attrs = { ...(rule.attrs ?? {}), ...got };
+      }
+
+      marks.push(attrs && Object.keys(attrs).length > 0 ? { type: def.type, attrs } : { type: def.type });
+      break; // first matching rule wins for this mark
+    }
+  }
+
+  return marks;
+}
+
+function walk(node: Node, marks: readonly Mark[], out: InlineNode[], registry: Registry): void {
+  for (const child of Array.from(node.childNodes)) {
+    if (child.nodeType === Node.TEXT_NODE) {
+      const text = (child.nodeValue ?? '').replaceAll(ZWSP, '');
+      if (text)
+        out.push({ text, marks });
+      continue;
+    }
+
+    if (child.nodeType !== Node.ELEMENT_NODE)
+      continue;
+
+    const el = child as HTMLElement;
+
+    if (el.tagName === 'BR') {
+      if (!el.hasAttribute(FILLER_ATTR))
+        out.push({ text: '\n', marks }); // hard break
+      continue;
+    }
+
+    walk(el, normalizeMarks([...marks, ...marksForElement(el, registry)]), out, registry);
+  }
+}
+
+/**
+ * Parse a contenteditable host (or any DOM subtree, e.g. pasted HTML) back into
+ * normalized inline runs, resolving marks from the registry's `parseDOM` rules.
+ */
+export function parseRuns(host: HTMLElement, registry: Registry): Inline {
+  const out: InlineNode[] = [];
+  walk(host, [], out, registry);
+  return normalizeInline(out);
+}
diff --git a/vue/editor/src/view/inline-content/render.ts b/vue/editor/src/view/inline-content/render.ts
new file mode 100644
index 0000000..5ab99e7
--- /dev/null
+++ b/vue/editor/src/view/inline-content/render.ts
@@ -0,0 +1,90 @@
+import type { Inline, Mark } from '../../model';
+import type { Registry } from '../../registry';
+import type { DOMOutputSpec } from '../../schema';
+
+/** Attribute marking the filler `<br>` of an empty block (not a real newline). */
+export const FILLER_ATTR = 'data-editor-br-filler';
+
+function markRank(registry: Registry, mark: Mark): number {
+  return registry.getMark(mark.type)?.spec.rank ?? 0;
+}
+
+function isAttrsObject(value: unknown): value is Record<string, string> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+/** Realize a mark's `toDOM` spec into a wrapper element (content appended later). */
+function createWrapper(spec: DOMOutputSpec, markType: string): HTMLElement {
+  if (typeof spec === 'string') {
+    const el = document.createElement(spec);
+    el.setAttribute('data-mark', markType);
+    return el;
+  }
+
+  const [tag, ...rest] = spec as readonly unknown[];
+  const el = document.createElement(typeof tag === 'string' ? tag : 'span');
+
+  if (rest.length > 0 && isAttrsObject(rest[0])) {
+    for (const [key, value] of Object.entries(rest[0]))
+      el.setAttribute(key, String(value));
+  }
+
+  el.setAttribute('data-mark', markType);
+  return el;
+}
+
+/** Build the innermost content for a run, turning `\n` into hard-break `<br>`. */
+function buildInner(text: string): DocumentFragment {
+  const frag = document.createDocumentFragment();
+  const segments = text.split('\n');
+
+  segments.forEach((segment, index) => {
+    if (index > 0)
+      frag.appendChild(document.createElement('br'));
+    if (segment.length > 0)
+      frag.appendChild(document.createTextNode(segment));
+  });
+
+  return frag;
+}
+
+function wrapWithMarks(inner: Node, marks: readonly Mark[], registry: Registry): Node {
+  let node = inner;
+
+  for (let i = marks.length - 1; i >= 0; i--) {
+    const def = registry.getMark(marks[i]!.type);
+    if (!def)
+      continue;
+
+    const wrapper = createWrapper(def.spec.toDOM(marks[i]!), marks[i]!.type);
+    wrapper.appendChild(node);
+    node = wrapper;
+  }
+
+  return node;
+}
+
+/**
+ * Render inline content into a contenteditable host imperatively (never via
+ * Vue's template diff, which would fight the caret). Marks nest by `rank`
+ * (lower = outer) for stable, deterministic output. An empty block gets a single
+ * filler `<br>` so it has height and a caret target.
+ */
+export function renderRuns(host: HTMLElement, inline: Inline, registry: Registry): void {
+  const frag = document.createDocumentFragment();
+  let total = 0;
+
+  for (const run of inline) {
+    total += run.text.length;
+    const marks = [...run.marks].sort((a, b) => markRank(registry, a) - markRank(registry, b));
+    frag.appendChild(wrapWithMarks(buildInner(run.text), marks, registry));
+  }
+
+  if (total === 0) {
+    const filler = document.createElement('br');
+    filler.setAttribute(FILLER_ATTR, '');
+    frag.appendChild(filler);
+  }
+
+  host.replaceChildren(frag);
+}
diff --git a/vue/editor/src/view/interactive.ts b/vue/editor/src/view/interactive.ts
new file mode 100644
index 0000000..94b486b
--- /dev/null
+++ b/vue/editor/src/view/interactive.ts
@@ -0,0 +1,11 @@
+/**
+ * Whether a node is (inside) an atom's interactive control — a form field or a
+ * `contenteditable="false"` island. Events from these must NOT be treated as
+ * editor input: e.g. typing in an image's caption `<input>` bubbles up to the
+ * single contenteditable, and without this guard the editor would re-sync a text
+ * block and yank the caret to the start of the document.
+ */
+export function isInteractiveTarget(node: EventTarget | null): boolean {
+  return node instanceof Element
+    && node.closest('input, textarea, select, button, [contenteditable="false"]') !== null;
+}
diff --git a/vue/editor/src/view/primitive/Primitive.ts b/vue/editor/src/view/primitive/Primitive.ts
new file mode 100644
index 0000000..1d2726e
--- /dev/null
+++ b/vue/editor/src/view/primitive/Primitive.ts
@@ -0,0 +1,30 @@
+import type { AllowedComponentProps, Component, IntrinsicElementAttributes, SetupContext, VNodeProps } from 'vue';
+import { h } from 'vue';
+import { renderSlotChild } from './Slot';
+
+type FunctionalComponentContext = Omit<SetupContext, 'expose'>;
+
+export interface PrimitiveProps {
+  as?: keyof IntrinsicElementAttributes | Component;
+}
+
+/**
+ * Polymorphic element renderer: renders `as` (a tag or component), or the single
+ * slotted child when `as === 'template'`. Local copy of the primitives helper.
+ */
+export function Primitive(props: PrimitiveProps & VNodeProps & AllowedComponentProps & Record<string, unknown>, ctx: FunctionalComponentContext) {
+  const as = props.as;
+
+  return as === 'template'
+    ? renderSlotChild(ctx.slots, ctx.attrs)
+    : h(as!, ctx.attrs, ctx.slots);
+}
+
+Primitive.inheritAttrs = false;
+
+Primitive.props = {
+  as: {
+    type: [String, Object],
+    default: 'div' as const,
+  },
+};
diff --git a/vue/editor/src/view/primitive/Slot.ts b/vue/editor/src/view/primitive/Slot.ts
new file mode 100644
index 0000000..04ab41e
--- /dev/null
+++ b/vue/editor/src/view/primitive/Slot.ts
@@ -0,0 +1,50 @@
+import type { SetupContext, Slots, VNode } from 'vue';
+import { Comment, Fragment, cloneVNode, warn } from 'vue';
+import { getRawChildren } from './getRawChildren';
+
+type FunctionalComponentContext = Omit<SetupContext, 'expose'>;
+
+/**
+ * Renders a single child from the provided default slot, applying attrs to it.
+ * Shared between `<Slot>` and `<Primitive as="template">`.
+ *
+ * @param slots - Component slots
+ * @param attrs - Attrs to apply to the slotted child
+ * @returns Cloned VNode with merged attrs or null
+ */
+export function renderSlotChild(slots: Slots, attrs: Record<string, unknown>): VNode | null {
+  if (!slots.default) return null;
+
+  const raw = slots.default();
+
+  if (raw.length === 1) {
+    const only = raw[0] as VNode;
+    const t = only.type;
+    if (t !== Fragment && t !== Comment)
+      return cloneVNode(only, attrs, true);
+  }
+
+  const children = getRawChildren(raw);
+
+  if (!children.length) return null;
+
+  if (__DEV__ && children.length > 1) {
+    warn('<Slot> can only be used on a single element or component.');
+  }
+
+  return cloneVNode(children[0]!, attrs, true);
+}
+
+/**
+ * A component that renders a single child from its default slot, applying the
+ * provided attributes to it.
+ *
+ * @param _ - Props (unused)
+ * @param context - Setup context containing slots and attrs
+ * @returns Cloned VNode with merged attrs or null
+ */
+export function Slot(_: Record<string, unknown>, { slots, attrs }: FunctionalComponentContext) {
+  return renderSlotChild(slots, attrs);
+}
+
+Slot.inheritAttrs = false;
diff --git a/vue/editor/src/view/primitive/getRawChildren.ts b/vue/editor/src/view/primitive/getRawChildren.ts
new file mode 100644
index 0000000..836ee67
--- /dev/null
+++ b/vue/editor/src/view/primitive/getRawChildren.ts
@@ -0,0 +1,43 @@
+import type { VNode } from 'vue';
+import { Comment, Fragment } from 'vue';
+import { PatchFlags } from '@vue/shared';
+
+/**
+ * Recursively extracts and flattens VNodes from potentially nested Fragments
+ * while filtering out Comment nodes. Local copy of the primitives helper to keep
+ * `@robonen/editor` self-contained.
+ *
+ * @param children - Array of VNodes to process
+ * @returns Flattened array of non-Comment VNodes
+ */
+export function getRawChildren(children: VNode[]): VNode[] {
+  const result: VNode[] = [];
+  flatten(children, result);
+  return result;
+}
+
+function flatten(children: VNode[], result: VNode[]): void {
+  let keyedFragmentCount = 0;
+  const startIdx = result.length;
+
+  for (let i = 0, len = children.length; i < len; i++) {
+    const child = children[i]!;
+
+    if (child.type === Fragment) {
+      if (child.patchFlag & PatchFlags.KEYED_FRAGMENT) {
+        keyedFragmentCount++;
+      }
+
+      flatten(child.children as VNode[], result);
+    }
+    else if (child.type !== Comment) {
+      result.push(child);
+    }
+  }
+
+  if (keyedFragmentCount > 1) {
+    for (let i = startIdx; i < result.length; i++) {
+      result[i]!.patchFlag = PatchFlags.BAIL;
+    }
+  }
+}
diff --git a/vue/editor/src/view/primitive/index.ts b/vue/editor/src/view/primitive/index.ts
new file mode 100644
index 0000000..c88baf4
--- /dev/null
+++ b/vue/editor/src/view/primitive/index.ts
@@ -0,0 +1,4 @@
+export { Primitive } from './Primitive';
+export type { PrimitiveProps } from './Primitive';
+export { Slot, renderSlotChild } from './Slot';
+export { getRawChildren } from './getRawChildren';
diff --git a/vue/editor/src/view/selection/block-host.ts b/vue/editor/src/view/selection/block-host.ts
new file mode 100644
index 0000000..6bbc1e7
--- /dev/null
+++ b/vue/editor/src/view/selection/block-host.ts
@@ -0,0 +1,25 @@
+/** Maps block ids to their contenteditable host elements for selection/focus. */
+export interface BlockElementRegistry {
+  set: (blockId: string, el: HTMLElement) => void;
+  delete: (blockId: string) => void;
+  get: (blockId: string) => HTMLElement | undefined;
+}
+
+export function createBlockElementRegistry(): BlockElementRegistry {
+  const map = new Map<string, HTMLElement>();
+
+  return {
+    set: (blockId, el) => void map.set(blockId, el),
+    delete: blockId => void map.delete(blockId),
+    get: blockId => map.get(blockId),
+  };
+}
+
+/** The nearest contenteditable block host containing `node`, or `null`. */
+export function closestBlockHost(node: Node | null): HTMLElement | null {
+  if (!node)
+    return null;
+
+  const el = node.nodeType === Node.ELEMENT_NODE ? (node as HTMLElement) : node.parentElement;
+  return el?.closest<HTMLElement>('[data-block-content]') ?? null;
+}
diff --git a/vue/editor/src/view/selection/index.ts b/vue/editor/src/view/selection/index.ts
new file mode 100644
index 0000000..9c621bc
--- /dev/null
+++ b/vue/editor/src/view/selection/index.ts
@@ -0,0 +1,2 @@
+export * from './block-host';
+export * from './selection-bridge';
diff --git a/vue/editor/src/view/selection/selection-bridge.ts b/vue/editor/src/view/selection/selection-bridge.ts
new file mode 100644
index 0000000..5349543
--- /dev/null
+++ b/vue/editor/src/view/selection/selection-bridge.ts
@@ -0,0 +1,195 @@
+import type { Selection } from '../../model';
+import { textSelection } from '../../model';
+import { FILLER_ATTR } from '../inline-content';
+import type { BlockElementRegistry } from './block-host';
+import { closestBlockHost } from './block-host';
+
+/** Maps the native `Selection`/`Range` (over the single editable root) to model coordinates and back. */
+export interface SelectionBridge {
+  /** Read the native selection as a model selection (null if outside editor). */
+  read: () => Selection | null;
+  /** Apply a model selection to the native selection (focusing the root). */
+  write: (selection: Selection) => void;
+  /** Snapshot the current model selection. */
+  save: () => Selection | null;
+  /** Restore a previously saved selection. */
+  restore: (selection: Selection | null) => void;
+  domPointToOffset: (host: HTMLElement, node: Node, offset: number) => number;
+  offsetToDomPoint: (host: HTMLElement, offset: number) => { node: Node; offset: number };
+}
+
+function isFillerBr(node: Node): boolean {
+  return node.nodeType === Node.ELEMENT_NODE
+    && (node as HTMLElement).tagName === 'BR'
+    && (node as HTMLElement).hasAttribute(FILLER_ATTR);
+}
+
+/** Count model characters in a DOM subtree: text length + 1 per hard-break. */
+function measureLength(node: Node): number {
+  let length = 0;
+
+  for (const child of Array.from(node.childNodes)) {
+    if (child.nodeType === Node.TEXT_NODE) {
+      length += (child.nodeValue ?? '').length;
+    }
+    else if (child.nodeType === Node.ELEMENT_NODE) {
+      if ((child as HTMLElement).tagName === 'BR')
+        length += isFillerBr(child) ? 0 : 1;
+      else
+        length += measureLength(child);
+    }
+  }
+
+  return length;
+}
+
+function indexInParent(el: Node): number {
+  return el.parentNode ? Array.from(el.parentNode.childNodes).indexOf(el as ChildNode) : 0;
+}
+
+function getWindow(): Window | null {
+  return globalThis.window === undefined ? null : globalThis.window;
+}
+
+export function createSelectionBridge(
+  getRoot: () => HTMLElement | null,
+  blockElements: BlockElementRegistry,
+): SelectionBridge {
+  /** DOM point → model character offset within one block-content element. */
+  function domPointToOffset(host: HTMLElement, node: Node, offset: number): number {
+    const range = host.ownerDocument.createRange();
+    range.selectNodeContents(host);
+
+    try {
+      range.setEnd(node, offset);
+    }
+    catch {
+      return measureLength(host);
+    }
+
+    return measureLength(range.cloneContents());
+  }
+
+  /** Model character offset → DOM point within one block-content element. */
+  function offsetToDomPoint(host: HTMLElement, offset: number): { node: Node; offset: number } {
+    let remaining = offset;
+
+    function search(node: Node): { node: Node; offset: number } | null {
+      for (const child of Array.from(node.childNodes)) {
+        if (child.nodeType === Node.TEXT_NODE) {
+          const length = (child.nodeValue ?? '').length;
+          if (remaining <= length)
+            return { node: child, offset: remaining };
+          remaining -= length;
+        }
+        else if (child.nodeType === Node.ELEMENT_NODE) {
+          const el = child as HTMLElement;
+
+          if (el.tagName === 'BR') {
+            if (isFillerBr(el))
+              continue;
+            if (remaining === 0)
+              return { node: el.parentNode!, offset: indexInParent(el) };
+            remaining -= 1;
+            if (remaining === 0)
+              return { node: el.parentNode!, offset: indexInParent(el) + 1 };
+          }
+          else {
+            const found = search(el);
+            if (found)
+              return found;
+          }
+        }
+      }
+
+      return null;
+    }
+
+    return search(host) ?? { node: host, offset: 0 };
+  }
+
+  function hostFor(blockId: string): HTMLElement | null {
+    return blockElements.get(blockId) ?? null;
+  }
+
+  function read(): Selection | null {
+    const root = getRoot();
+    const domSel = getWindow()?.getSelection();
+
+    if (!root || !domSel || domSel.rangeCount === 0 || !domSel.anchorNode)
+      return null;
+
+    // Both endpoints must live inside our single editable root.
+    if (!root.contains(domSel.anchorNode))
+      return null;
+
+    const anchorHost = closestBlockHost(domSel.anchorNode);
+    const focusHost = closestBlockHost(domSel.focusNode) ?? anchorHost;
+
+    if (!anchorHost || !focusHost)
+      return null;
+
+    const anchorId = anchorHost.dataset['blockId'];
+    const focusId = focusHost.dataset['blockId'];
+
+    if (!anchorId || !focusId)
+      return null;
+
+    const anchorOffset = domPointToOffset(anchorHost, domSel.anchorNode, domSel.anchorOffset);
+    const focusOffset = domSel.focusNode
+      ? domPointToOffset(focusHost, domSel.focusNode, domSel.focusOffset)
+      : anchorOffset;
+
+    return textSelection({ blockId: anchorId, offset: anchorOffset }, { blockId: focusId, offset: focusOffset });
+  }
+
+  function write(selection: Selection): void {
+    const root = getRoot();
+    const domSel = getWindow()?.getSelection();
+
+    if (!root || !domSel)
+      return;
+
+    if (selection.kind === 'node') {
+      // Block-level selection has no native text range; the visual highlight
+      // comes from [data-selected] on the block wrapper. Keep the editable root
+      // focused so keyboard commands (Backspace/Delete on the node) still reach it.
+      domSel.removeAllRanges();
+      if (root.isContentEditable && root.ownerDocument.activeElement !== root)
+        root.focus({ preventScroll: true });
+      return;
+    }
+
+    const anchorHost = hostFor(selection.anchor.blockId);
+    const focusHost = hostFor(selection.focus.blockId);
+
+    if (!anchorHost || !focusHost)
+      return;
+
+    // Focus the ONE editable root (not the block) so the caret renders.
+    if (root.isContentEditable && root.ownerDocument.activeElement !== root)
+      root.focus({ preventScroll: true });
+
+    const anchorPoint = offsetToDomPoint(anchorHost, selection.anchor.offset);
+    const focusPoint = offsetToDomPoint(focusHost, selection.focus.offset);
+
+    try {
+      domSel.setBaseAndExtent(anchorPoint.node, anchorPoint.offset, focusPoint.node, focusPoint.offset);
+    }
+    catch {
+      // Invalid DOM points (e.g. mid-reconcile) — ignore; the next reconcile fixes it.
+    }
+  }
+
+  return {
+    read,
+    write,
+    save: read,
+    restore: (selection) => {
+      if (selection)
+        write(selection);
+    },
+    domPointToOffset,
+    offsetToDomPoint,
+  };
+}
diff --git a/vue/editor/src/view/ui/EditorBubbleMenu.vue b/vue/editor/src/view/ui/EditorBubbleMenu.vue
new file mode 100644
index 0000000..3fc8eb7
--- /dev/null
+++ b/vue/editor/src/view/ui/EditorBubbleMenu.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { onBeforeUnmount, ref } from 'vue';
+import { autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/vue';
+import { isCollapsed } from '../../model';
+import { isMarkActive, toggleMark } from '../../commands';
+import { useEditorContext } from '../context';
+import { useEventListener } from '../composables';
+
+export interface EditorBubbleMenuProps {
+  /** Marks shown in the default toolbar (ignored when the default slot is used). */
+  marks?: string[];
+}
+
+const { marks = ['bold', 'italic', 'underline', 'strike', 'code'] } = defineProps<EditorBubbleMenuProps>();
+
+const ctx = useEditorContext();
+const reference = ref<{ getBoundingClientRect: () => DOMRect } | null>(null);
+const floatingEl = ref<HTMLElement | null>(null);
+const open = ref(false);
+const rev = ref(0);
+
+const { floatingStyles, update } = useFloating(reference, floatingEl, {
+  placement: 'top',
+  middleware: [offset(8), flip(), shift({ padding: 8 })],
+  whileElementsMounted: autoUpdate,
+});
+
+function selectionRect(): DOMRect | null {
+  const selection = globalThis.window === undefined ? null : globalThis.getSelection();
+  if (!selection || selection.rangeCount === 0)
+    return null;
+
+  const rect = selection.getRangeAt(0).getBoundingClientRect();
+  return rect.width || rect.height ? rect : null;
+}
+
+function refresh(): void {
+  rev.value += 1;
+  const sel = ctx.editor.state.selection;
+  const rect = selectionRect();
+  open.value = sel.kind === 'text' && !isCollapsed(sel) && !ctx.composing.value && rect !== null;
+
+  if (open.value) {
+    reference.value = { getBoundingClientRect: () => selectionRect() ?? new DOMRect() };
+    void update();
+  }
+}
+
+ctx.editor.on('transaction', refresh);
+useEventListener(() => (typeof document === 'undefined' ? undefined : document), 'selectionchange', refresh);
+onBeforeUnmount(() => ctx.editor.off('transaction', refresh));
+
+function active(type: string): boolean {
+  return Boolean(rev.value >= 0 && isMarkActive(ctx.editor.state, type));
+}
+
+function toggle(type: string): void {
+  ctx.editor.command(toggleMark(type));
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="open"
+      ref="floatingEl"
+      :style="floatingStyles"
+      class="editor-bubble-menu"
+      role="toolbar"
+      data-editor-bubble-menu=""
+    >
+      <slot :active="active" :toggle="toggle" :editor="ctx.editor">
+        <button
+          v-for="mark in marks"
+          :key="mark"
+          type="button"
+          :data-mark="mark"
+          :data-active="active(mark) || undefined"
+          @mousedown.prevent="toggle(mark)"
+        >
+          {{ mark }}
+        </button>
+      </slot>
+    </div>
+  </Teleport>
+</template>
diff --git a/vue/editor/src/view/ui/EditorRemoteCursors.vue b/vue/editor/src/view/ui/EditorRemoteCursors.vue
new file mode 100644
index 0000000..9389f49
--- /dev/null
+++ b/vue/editor/src/view/ui/EditorRemoteCursors.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import type { RemoteCursor } from '../../crdt';
+import { useEditorContext } from '../context';
+
+export interface EditorRemoteCursorsProps {
+  cursors: readonly RemoteCursor[];
+}
+
+const props = defineProps<EditorRemoteCursorsProps>();
+const ctx = useEditorContext();
+
+interface Box {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+}
+
+interface RenderedCursor {
+  clientId: string;
+  name: string;
+  color: string;
+  caret: Box | null;
+  highlights: Box[];
+}
+
+const container = ref<HTMLElement | null>(null);
+const rendered = ref<RenderedCursor[]>([]);
+
+function domPoint(blockId: string, offset: number): { node: Node; offset: number } | null {
+  const host = ctx.blockElements.get(blockId);
+  return host ? ctx.selection.offsetToDomPoint(host, offset) : null;
+}
+
+function relativize(rect: DOMRect, base: DOMRect): Box {
+  return { top: rect.top - base.top, left: rect.left - base.left, width: rect.width, height: rect.height || 18 };
+}
+
+function recompute(): void {
+  const root = container.value;
+  if (!root || typeof document === 'undefined') {
+    rendered.value = [];
+    return;
+  }
+
+  // Measure against the overlay itself — it is the positioned ancestor the
+  // caret/highlight children are laid out in, so coordinates line up exactly.
+  const base = root.getBoundingClientRect();
+  const next: RenderedCursor[] = [];
+
+  for (const cursor of props.cursors) {
+    const selection = cursor.selection;
+    if (!selection || selection.kind !== 'text')
+      continue;
+
+    const focusPoint = domPoint(selection.focus.blockId, selection.focus.offset);
+    if (!focusPoint)
+      continue;
+
+    const caretRange = document.createRange();
+    caretRange.setStart(focusPoint.node, focusPoint.offset);
+    caretRange.collapse(true);
+    const caret = relativize(caretRange.getBoundingClientRect(), base);
+
+    const highlights: Box[] = [];
+    const anchorPoint = domPoint(selection.anchor.blockId, selection.anchor.offset);
+    const collapsed = selection.anchor.blockId === selection.focus.blockId && selection.anchor.offset === selection.focus.offset;
+
+    if (anchorPoint && !collapsed) {
+      const range = document.createRange();
+      range.setStart(anchorPoint.node, anchorPoint.offset);
+      range.setEnd(focusPoint.node, focusPoint.offset);
+      if (range.collapsed) {
+        // Selection runs backwards (focus before anchor) — swap the ends.
+        range.setStart(focusPoint.node, focusPoint.offset);
+        range.setEnd(anchorPoint.node, anchorPoint.offset);
+      }
+      for (const rect of Array.from(range.getClientRects())) {
+        if (rect.width > 0)
+          highlights.push(relativize(rect, base));
+      }
+    }
+
+    next.push({
+      clientId: cursor.clientId,
+      name: cursor.user?.name ?? 'Anon',
+      color: cursor.user?.color ?? '#ef4444',
+      caret,
+      highlights,
+    });
+  }
+
+  rendered.value = next;
+}
+
+function schedule(): void {
+  void nextTick(recompute);
+}
+
+watch(() => props.cursors, schedule, { deep: true });
+ctx.editor.on('transaction', schedule);
+onMounted(recompute);
+onBeforeUnmount(() => ctx.editor.off('transaction', schedule));
+</script>
+
+<template>
+  <div ref="container" class="editor-remote-cursors" aria-hidden="true">
+    <template v-for="cursor in rendered" :key="cursor.clientId">
+      <div
+        v-for="(hl, i) in cursor.highlights"
+        :key="`${cursor.clientId}-hl-${i}`"
+        class="editor-remote-selection"
+        :style="{ top: `${hl.top}px`, left: `${hl.left}px`, width: `${hl.width}px`, height: `${hl.height}px`, '--cursor-color': cursor.color }"
+      />
+      <div
+        v-if="cursor.caret"
+        class="editor-remote-caret"
+        :style="{ top: `${cursor.caret.top}px`, left: `${cursor.caret.left}px`, height: `${cursor.caret.height}px`, '--cursor-color': cursor.color }"
+      >
+        <span class="editor-remote-caret-label">{{ cursor.name }}</span>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/vue/editor/src/view/ui/EditorSlashMenu.vue b/vue/editor/src/view/ui/EditorSlashMenu.vue
new file mode 100644
index 0000000..65e2153
--- /dev/null
+++ b/vue/editor/src/view/ui/EditorSlashMenu.vue
@@ -0,0 +1,187 @@
+<script setup lang="ts">
+import { onBeforeUnmount, ref } from 'vue';
+import { autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/vue';
+import { blockById, caret, createNode, inlineText, isCollapsed, nodeInline, nodeSelection } from '../../model';
+import { createTransaction } from '../../state';
+import { useEditorContext } from '../context';
+import { useEventListener } from '../composables';
+import type { SlashItem } from './slash-items';
+import { getSlashItems } from './slash-items';
+
+export interface EditorSlashMenuProps {
+  /** Character that opens the menu (default `'/'`). */
+  trigger?: string;
+}
+
+const { trigger = '/' } = defineProps<EditorSlashMenuProps>();
+
+const ctx = useEditorContext();
+const open = ref(false);
+const items = ref<SlashItem[]>([]);
+const highlighted = ref(0);
+const reference = ref<{ getBoundingClientRect: () => DOMRect } | null>(null);
+const floatingEl = ref<HTMLElement | null>(null);
+
+let triggerBlockId = '';
+let triggerStart = 0;
+let caretOffset = 0;
+
+const { floatingStyles, update } = useFloating(reference, floatingEl, {
+  placement: 'bottom-start',
+  middleware: [offset(6), flip(), shift({ padding: 8 })],
+  whileElementsMounted: autoUpdate,
+});
+
+function escapeRegExp(value: string): string {
+  return value.replaceAll(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function caretRect(): DOMRect | null {
+  const selection = globalThis.window === undefined ? null : globalThis.getSelection();
+  if (!selection || selection.rangeCount === 0)
+    return null;
+
+  const range = selection.getRangeAt(0);
+  const rects = range.getClientRects();
+  const rect = rects.length > 0 ? rects[0]! : range.getBoundingClientRect();
+  return rect.width || rect.height ? rect : null;
+}
+
+function close(): void {
+  open.value = false;
+}
+
+function refresh(): void {
+  const sel = ctx.editor.state.selection;
+
+  if (sel.kind !== 'text' || !isCollapsed(sel) || ctx.composing.value) {
+    close();
+    return;
+  }
+
+  const block = blockById(ctx.editor.state.doc, sel.focus.blockId);
+  const spec = block && ctx.editor.state.schema.nodeSpec(block.type);
+
+  if (!block || spec?.content.kind !== 'text' || spec.code) {
+    close();
+    return;
+  }
+
+  const before = inlineText(nodeInline(block)).slice(0, sel.focus.offset);
+  const match = new RegExp(`(?:^|\\s)${escapeRegExp(trigger)}([\\p{L}\\p{N}]*)$`, 'u').exec(before);
+
+  if (!match) {
+    close();
+    return;
+  }
+
+  const query = match[1] ?? '';
+  const next = getSlashItems(ctx.editor.state.registry, query);
+
+  if (next.length === 0) {
+    close();
+    return;
+  }
+
+  triggerBlockId = block.id;
+  caretOffset = sel.focus.offset;
+  triggerStart = caretOffset - query.length - trigger.length;
+  items.value = next;
+  highlighted.value = open.value ? Math.min(highlighted.value, next.length - 1) : 0;
+
+  if (!caretRect()) {
+    close();
+    return;
+  }
+
+  reference.value = { getBoundingClientRect: () => caretRect() ?? new DOMRect() };
+  open.value = true;
+  void update();
+}
+
+function selectItem(item: SlashItem): void {
+  const editor = ctx.editor;
+  const block = blockById(editor.state.doc, triggerBlockId);
+
+  if (!block) {
+    close();
+    return;
+  }
+
+  const def = editor.state.registry.getBlock(item.type);
+  const tr = createTransaction(editor.state).deleteText(triggerBlockId, triggerStart, caretOffset);
+
+  if (def?.spec.content.kind === 'atom') {
+    const node = createNode(item.type, { attrs: editor.state.schema.defaultAttrs(item.type) });
+    const index = editor.state.doc.content.findIndex(candidate => candidate.id === triggerBlockId);
+    tr.insertBlock(node, index + 1).setSelection(nodeSelection([node.id]));
+  }
+  else {
+    tr.setBlockType(triggerBlockId, item.type, editor.state.schema.defaultAttrs(item.type));
+    tr.setSelection(caret(triggerBlockId, triggerStart));
+  }
+
+  editor.dispatch(tr);
+  close();
+}
+
+function onKeydownCapture(event: KeyboardEvent): void {
+  if (!open.value || items.value.length === 0)
+    return;
+
+  switch (event.key) {
+    case 'ArrowDown':
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      highlighted.value = (highlighted.value + 1) % items.value.length;
+      break;
+    case 'ArrowUp':
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      highlighted.value = (highlighted.value - 1 + items.value.length) % items.value.length;
+      break;
+    case 'Enter':
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      selectItem(items.value[highlighted.value]!);
+      break;
+    case 'Escape':
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      close();
+      break;
+  }
+}
+
+ctx.editor.on('transaction', refresh);
+useEventListener(() => (typeof document === 'undefined' ? undefined : document), 'selectionchange', refresh);
+useEventListener(() => (typeof document === 'undefined' ? undefined : document), 'keydown', onKeydownCapture as (event: Event) => void, { capture: true });
+onBeforeUnmount(() => ctx.editor.off('transaction', refresh));
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="open"
+      ref="floatingEl"
+      :style="floatingStyles"
+      class="editor-slash-menu"
+      role="listbox"
+      data-editor-slash-menu=""
+    >
+      <button
+        v-for="(item, index) in items"
+        :key="item.type"
+        type="button"
+        role="option"
+        :data-highlighted="index === highlighted || undefined"
+        :aria-selected="index === highlighted"
+        @mousedown.prevent="selectItem(item)"
+        @mousemove="highlighted = index"
+      >
+        <span class="slash-title">{{ item.title }}</span>
+        <span class="slash-group">{{ item.group }}</span>
+      </button>
+    </div>
+  </Teleport>
+</template>
diff --git a/vue/editor/src/view/ui/index.ts b/vue/editor/src/view/ui/index.ts
new file mode 100644
index 0000000..ff705e4
--- /dev/null
+++ b/vue/editor/src/view/ui/index.ts
@@ -0,0 +1,8 @@
+export * from './slash-items';
+
+export { default as EditorBubbleMenu } from './EditorBubbleMenu.vue';
+export type { EditorBubbleMenuProps } from './EditorBubbleMenu.vue';
+export { default as EditorSlashMenu } from './EditorSlashMenu.vue';
+export type { EditorSlashMenuProps } from './EditorSlashMenu.vue';
+export { default as EditorRemoteCursors } from './EditorRemoteCursors.vue';
+export type { EditorRemoteCursorsProps } from './EditorRemoteCursors.vue';
diff --git a/vue/editor/src/view/ui/slash-items.ts b/vue/editor/src/view/ui/slash-items.ts
new file mode 100644
index 0000000..912b2fd
--- /dev/null
+++ b/vue/editor/src/view/ui/slash-items.ts
@@ -0,0 +1,33 @@
+import type { Registry } from '../../registry';
+
+/** A slash-menu entry derived from a block definition's metadata. */
+export interface SlashItem {
+  type: string;
+  title: string;
+  group: string;
+  keywords: readonly string[];
+}
+
+/**
+ * Build slash-menu items from the registry, filtered by `query` against each
+ * block's title and keywords. Data-driven: any newly registered block with
+ * `meta` shows up automatically.
+ */
+export function getSlashItems(registry: Registry, query = ''): SlashItem[] {
+  const items: SlashItem[] = registry.listBlocks()
+    .filter(def => def.meta !== undefined)
+    .map(def => ({
+      type: def.type,
+      title: def.meta!.title,
+      group: def.meta!.group ?? 'blocks',
+      keywords: def.meta!.keywords ?? [],
+    }));
+
+  const q = query.trim().toLowerCase();
+  if (!q)
+    return items;
+
+  return items.filter(item =>
+    item.title.toLowerCase().includes(q) || item.keywords.some(keyword => keyword.toLowerCase().includes(q)),
+  );
+}
diff --git a/vue/editor/tsconfig.json b/vue/editor/tsconfig.json
new file mode 100644
index 0000000..2781e66
--- /dev/null
+++ b/vue/editor/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.src.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/vue/editor/tsconfig.node.json b/vue/editor/tsconfig.node.json
new file mode 100644
index 0000000..edc474f
--- /dev/null
+++ b/vue/editor/tsconfig.node.json
@@ -0,0 +1,8 @@
+{
+  "extends": "@robonen/tsconfig/tsconfig.node.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo"
+  },
+  "include": ["*.config.ts"]
+}
diff --git a/vue/editor/tsconfig.src.json b/vue/editor/tsconfig.src.json
new file mode 100644
index 0000000..522e7c7
--- /dev/null
+++ b/vue/editor/tsconfig.src.json
@@ -0,0 +1,12 @@
+{
+  "extends": "@robonen/tsconfig/tsconfig.vue.json",
+  "compilerOptions": {
+    "composite": true,
+    "types": [],
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.src.tsbuildinfo"
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue"]
+}
diff --git a/vue/editor/tsdown.config.ts b/vue/editor/tsdown.config.ts
new file mode 100644
index 0000000..c315bda
--- /dev/null
+++ b/vue/editor/tsdown.config.ts
@@ -0,0 +1,29 @@
+import { defineConfig } from 'tsdown';
+import { sharedConfig } from '@robonen/tsdown';
+import Vue from 'unplugin-vue/rolldown';
+
+export default defineConfig({
+  ...sharedConfig,
+  tsconfig: './tsconfig.src.json',
+  entry: ['src/index.ts', 'src/*/index.ts'],
+  plugins: [Vue({ isProduction: true })],
+  dts: { vue: true },
+  deps: {
+    neverBundle: ['vue'],
+    alwaysBundle: [/^@robonen\//, '@vue/shared'],
+  },
+  inputOptions: {
+    resolve: {
+      alias: {
+        '@vue/shared': '@vue/shared/dist/shared.esm-bundler.js',
+      },
+    },
+  },
+  outputOptions: {
+    ...sharedConfig.outputOptions,
+    chunkFileNames: 'shared/[name]-[hash].js',
+  },
+  define: {
+    __DEV__: 'false',
+  },
+});
diff --git a/vue/editor/vitest.config.ts b/vue/editor/vitest.config.ts
new file mode 100644
index 0000000..0589dcc
--- /dev/null
+++ b/vue/editor/vitest.config.ts
@@ -0,0 +1,42 @@
+import { resolve } from 'node:path';
+import { playwright } from '@vitest/browser-playwright';
+import Vue from 'unplugin-vue/vite';
+import { defineConfig } from 'vitest/config';
+
+const alias = { '@': resolve(__dirname, './src') };
+
+export default defineConfig({
+  plugins: [Vue()],
+  define: {
+    __DEV__: 'true',
+  },
+  resolve: { alias },
+  test: {
+    projects: [
+      {
+        // Pure logic: model, schema, registry, state, commands.
+        extends: true,
+        test: {
+          name: 'logic',
+          environment: 'jsdom',
+          include: ['src/**/*.test.ts'],
+          exclude: ['src/view/**', 'src/keymap/**'],
+        },
+      },
+      {
+        // DOM-heavy: view rendering, selection, hotkeys.
+        extends: true,
+        test: {
+          name: 'view',
+          include: ['src/view/**/*.test.ts', 'src/keymap/**/*.test.ts'],
+          browser: {
+            enabled: true,
+            provider: playwright(),
+            headless: true,
+            instances: [{ browser: 'chromium' }],
+          },
+        },
+      },
+    ],
+  },
+});
diff --git a/vue/primitives/AGENTS.md b/vue/primitives/AGENTS.md
new file mode 100644
index 0000000..c57db2b
--- /dev/null
+++ b/vue/primitives/AGENTS.md
@@ -0,0 +1,447 @@
+# AGENTS.md — UI Primitives
+
+Руководство по работе с UI-пакетом примитивов. Описывает правила создания **новых компонентов** и **доработки существующих**. Применимо только к этому пакету (`vue/primitives/`).
+
+> Прочитай этот файл **до** того, как трогать код в `src/`.
+
+---
+
+## 0. Tooling и команды
+
+- **Менеджер пакетов:** `pnpm` (workspaces + catalogs).
+- **Линтер и форматтер:** `eslint` (flat config, пресеты `@robonen/eslint`). Prettier/Biome не использовать.
+- **Сборка:** `tsdown`.
+- **Тесты:** `vitest` (jsdom + browser mode на `@vitest/browser-playwright` + Chromium).
+
+```bash
+pnpm exec vitest run                # jsdom-сьют
+pnpm exec vitest run src/<name>     # один компонент
+pnpm run test:browser               # browser mode (Playwright)
+pnpm exec tsdown                    # сборка ESM + CJS + .d.ts
+pnpm lint:check / pnpm lint:fix     # eslint
+```
+
+---
+
+## 1. Структура пакета
+
+```
+src/
+  <component>/                # kebab-case
+    <Component>Root.vue       # PascalCase, корневой провайдер контекста
+    <Component><Part>.vue     # части (Trigger / Content / Item / Indicator…)
+    context.ts                # фабрика + типы контекста
+    index.ts                  # барель
+    __test__/
+      <Component>.test.ts     # jsdom-тесты
+      <Component>.browser.test.ts   # опционально, если нужен реальный браузер
+  utils/                      # общие хелперы (roving-focus, getRawChildren …)
+  primitive/                  # polymorphic <Primitive :as="…">
+  index.ts                    # реэкспорт всех компонентов
+```
+
+**Правила структуры:**
+
+- Каждый примитив = отдельная папка. Никаких «всё в одном файле».
+- Имя папки — `kebab-case`, файлы — `PascalCase.vue`.
+- Корневой компонент **обязан** называться `<Name>Root.vue` и быть провайдером контекста.
+- Никаких циклических зависимостей между примитивами. Общий код — в `src/utils/`.
+- `index.ts` примитива экспортирует **все** компоненты + контекст-хук + типы.
+- После создания примитива добавь `export * from './<name>';` в `src/index.ts`.
+
+---
+
+## 2. Нейминг и data-атрибуты
+
+В коде, комментариях, доках, тестах и коммитах **не должно быть имён сторонних UI-библиотек** и внутренних кодовых названий бренда/форка. Описывай компоненты через их роль (`dialog`, `radio-group`, `spinbutton`) и паттерн (`roving-focus`, `dismissable-layer`).
+
+| Артефакт | Формат |
+|---|---|
+| Имя контекста | `'<component>'` — аргумент в `useContextFactory('<component>')` |
+| ID-префикс | `'<component>-<part>'` — аргумент в `useId(undefined, '<component>-<part>')` |
+| Data-атрибуты состояния | `data-state`, `data-disabled`, `data-orientation`, `data-side`, `data-align` |
+
+`data-state` — каноническое отражение состояния:
+- toggle/checkbox: `"checked" | "unchecked" | "indeterminate"`
+- collapsible/dialog/popover: `"open" | "closed"`
+- progress: `"complete" | "loading" | "indeterminate"`
+
+Любая интерактивная часть с `disabled` получает `data-disabled=""` (без значения), чтобы CSS-селектор `[data-disabled]` работал одинаково.
+
+---
+
+## 3. Архитектурные паттерны
+
+### 3.1. Контекст — только через фабрику
+
+**Ручные `Symbol`, `InjectionKey`, `provide()`/`inject()` в коде примитивов запрещены.** Контекст создаётся **только** через `useContextFactory` из тулкита. Фабрика:
+
+- единообразно генерирует ключ (`Symbol(name)` внутри неё),
+- типизирует `provide` и `inject` одним generic-аргументом,
+- бросает консистентную ошибку, если `inject` делается без предка-провайдера,
+- поддерживает `appProvide(app)` для глобальных провайдеров (config, dir, и т.п.).
+
+```ts
+// context.ts
+import type { ComputedRef, Ref } from 'vue';
+import { useContextFactory } from '<toolkit>';
+
+export interface FooContext {
+  open: Ref<boolean>;
+  disabled: ComputedRef<boolean>;
+  onToggle: () => void;
+}
+
+export const {
+  inject: useFooContext,
+  provide: provideFooContext,
+} = useContextFactory<FooContext>('foo');
+```
+
+```ts
+// FooRoot.vue
+provideFooContext({ open, disabled, onToggle });
+
+// FooTrigger.vue
+const ctx = useFooContext();            // кидает, если нет <FooRoot>
+const ctx = useFooContext(fallback);    // опционально: дефолт без ошибки
+```
+
+**Правила:**
+
+- Никаких ручных `Symbol(...)` / `InjectionKey<...>` в папке примитива.
+- Имя фабрики описательное (`'foo'`, `'foo-item'`, `'dialog'`), без префиксов брендов.
+- Контекст хранит **`Ref` / `ComputedRef`** для реактивных полей и **функции** для действий. Не передавай голые значения — потеряешь реактивность у потребителей.
+- Для per-item данных (например, `RadioGroupIndicator` смотрит на свой `RadioGroupItem`) создавай **item sub-context** отдельной фабрикой (`useContextFactory<ItemCtx>('foo-item')`). Не ходи по DOM ради `data-*`.
+- Контекст-хук и типы экспортируются из `index.ts` примитива.
+
+### 3.2. v-model: продвинутая работа с `defineModel`
+
+`defineModel` — первичный инструмент для любой двусторонней связи со state. Используем его продвинутые возможности.
+
+#### 3.2.1. Контролируемый + неконтролируемый режим через get/set
+
+Вместо ручного `ref + computed`-обёртки используй **`defineModel({ get, set })`** — встроенный способ навесить преобразование/нормализацию прямо на модель:
+
+```ts
+interface Props {
+  defaultOpen?: boolean;
+}
+const { defaultOpen = false } = defineProps<Props>();
+const local = ref<boolean>(defaultOpen);
+
+const open = defineModel<boolean>('open', {
+  // когда родитель не связал v-model — читаем локальный стейт
+  get: (external) => external ?? local.value,
+  // пишем и наружу (emit), и в локальный стейт
+  set: (value) => {
+    local.value = value;
+    return value;
+  },
+});
+```
+
+- Если `v-model` не привязан снаружи — `defineModel` эмитит `update:open` в пустоту, а локальный ref обеспечивает работу компонента. Это и есть «uncontrolled» режим.
+- Если привязан — родитель writable source of truth, локальный ref просто зеркалит его через `get`.
+- Никаких отдельных `computed({ get, set })` поверх `defineModel` — всё делается в одном месте.
+
+#### 3.2.2. Модификаторы v-model
+
+Поддерживай пользовательские модификаторы, если это осмысленно для примитива (`trim`, `lazy`, `number`, кастомные):
+
+```ts
+const [model, modifiers] = defineModel<string>({
+  set: (value) => (modifiers.trim ? value.trim() : value),
+});
+```
+
+Любой кастомный модификатор документируется в README примитива.
+
+#### 3.2.3. Нормализация union-значений
+
+Для union-типов (`string | string[]`, `number | null`, …) ставь преобразование в `set`, а наружу эмить нормализованный вид. Если Vue не может вывести тип модели или теряет записи — **fallback: explicit `modelValue` prop + `emit('update:modelValue', …)` + `watch(() => props.modelValue, …)`**:
+
+```ts
+interface Props { modelValue?: string | string[] }
+const props = withDefaults(defineProps<Props>(), { modelValue: undefined });
+const emit = defineEmits<{ 'update:modelValue': [v: string[] | string | undefined] }>();
+
+const local = shallowRef<string[]>(normalize(props.modelValue));
+watch(() => props.modelValue, (v) => { local.value = normalize(v); });
+
+function commit(next: string[]) {
+  local.value = next;
+  emit('update:modelValue', serialize(next));
+}
+```
+
+Это обход, а не правило — **сначала попробуй `defineModel({ get, set })`**.
+
+### 3.3. Продвинутая реактивность
+
+Используй реактивность по полной — она бесплатная и устраняет ручной оркестр watch-ей.
+
+| Задача | Инструмент |
+|---|---|
+| Ссылка на элемент шаблона | `useTemplateRef('name')` (Vue 3.5+), не `ref<HTMLElement>()` |
+| Развернуть `MaybeRef<T>` | `toValue(source)` — работает и с функциями, и с refs |
+| Реактивное значение из пропса | `toRef(() => props.foo)` (getter-форма, не строковая) |
+| Большой список/мап, не нужна глубокая реактивность | `shallowRef` / `shallowReactive` |
+| Гонки с внешним state | `watchSyncEffect` / `watch(..., { flush: 'sync' })` (осторожно) |
+| «Один раз при создании» | `computed` с кэшированием, **не** вызов функции в template |
+| Escape-hatch от трекинга | `markRaw`, `readonly`, `customRef` (если реально нужен дебаунс/throttle) |
+| Очистка эффектов у регистров | `effectScope` + `onScopeDispose`, не `onBeforeUnmount` в циклах |
+| DOM-измерения при ресайзе/скролле | `useResizeObserver`, `useEventListener`, `useMutationObserver` |
+
+Типовые практики:
+
+- **Props через getter.** `watch(() => props.value, …)` и `toRef(() => props.value)` — не деструктурируй пропсы в локальные переменные (сломаешь реактивность).
+- **Computed для derived state.** Любой `data-state` / `aria-*` / классовая строка — `computed`, не вычисление в `<template>`.
+- **Effect scope для регистров.** Если корень хранит массив дочерних элементов (`items: Ref<HTMLElement[]>`), регистрация/снятие идёт через пару `register(el) + onScopeDispose(() => unregister(el))` в child — scope снимет подписку автоматически при размонтировании ветки.
+- **`watch` с `immediate: true`** — когда sync-реакция нужна сразу; иначе первая синхронизация делается отдельно.
+- **`watchEffect` vs `watch`.** `watchEffect` — для реактивных деревьев без явного источника; `watch` — когда важна старая-новая пара и источник известен.
+- **`shallowRef` для ссылок на массивы/объекты**, которые меняются целиком (replace), — меньше лишних триггеров.
+
+### 3.4. Roving focus
+
+Для коллекций фокусируемых элементов (Toolbar, RadioGroup, ToggleGroup, NavigationMenu …) используй `src/utils/roving-focus.ts`:
+
+- `rovingKeyToAction(event, { orientation, dir, loop })` → `{ delta, absolute? } | null`
+- `resolveNextIndex(current, delta, count, loop)` — wrap-or-clamp
+
+Items сами регистрируются в Root через item sub-context (`useContextFactory`). Root хранит `Ref<HTMLElement[]>` и `activeIndex`. Фильтрация disabled:
+
+```ts
+const enabled = items.value.filter(x => !x.hasAttribute('data-disabled'));
+```
+
+`tabindex`: активный/выбранный = `0`, остальные = `-1`.
+
+### 3.5. ID и ARIA
+
+- ID генерируй через `useId(undefined, '<component>-<part>')` из тулкита. Один ID — один reactive ref.
+- Роли — по WAI-ARIA APG (`role="dialog"`, `role="radiogroup"`, `role="spinbutton"`, …).
+- `Title` / `Description` регистрируют свой ID в контексте Root; Root прокидывает их в `aria-labelledby` / `aria-describedby` контента.
+
+### 3.6. Slots, polymorphism, forwarding
+
+- Корень обычно не рендерит DOM, кроме `<slot>` со scope-параметрами:
+  ```vue
+  <template><slot :open="open" :close="() => open = false" /></template>
+  ```
+- **`Primitive` из `src/primitive/`** — базовый polymorphic-рендерер. Любая часть, рендерящая DOM, обязана прокидывать `as` через `Primitive`, а не рендерить тег напрямую. `as="template"` включает режим slot-merging (merged props + один дочерний элемент из слота — аналог `asChild`).
+- **Доступ к элементу + проброс ref** — `useForwardExpose` из тулкита. Он даёт `{ forwardRef, currentElement }`: `forwardRef` привязывается к `Primitive` (`:ref="forwardRef"`), `currentElement` — реактивный `Ref<HTMLElement>`, работает даже при `as="template"` и условных рендерах (`v-if`/`v-else`).
+- **`inheritAttrs: false`** на Root (через `defineOptions`), если Root не рендерит DOM — attrs не должны утекать на `<slot>`.
+- **Минимум DOM:** не оборачивай контент лишними `<div>`-обёртками.
+
+### 3.7. Утилиты — выноси, а не копируй
+
+Паттерн повторяется в ≥2 примитивах → в `src/utils/`. Уже доступно:
+
+- `roving-focus.ts` — клавиатурная навигация по коллекции
+- `getRawChildren.ts` — VNode walk для slotted children
+
+Не дублируй helper'ы внутри папок примитивов.
+
+### 3.8. Composition-слои внутри одного примитива
+
+Сложные примитивы (Dialog / Popover / Select) разбиваются на слои композиции, а не ветвятся внутри одного компонента.
+
+- **`<Name>Content.vue`** — публичный wrapper: решает, какой внутренний импл рендерить на основе `modal`/`nonModal`/`forceMount`.
+- **`<Name>ContentImpl.vue`** — общая часть (focus scope, dismiss layer, ариа-связки).
+- **`<Name>ContentModal.vue` / `<Name>ContentNonModal.vue`** — ветки, отличающиеся только scroll-lock / `aria-hidden` соседей / трап фокуса.
+- **`<Name>Overlay.vue` + `<Name>OverlayImpl.vue`** — такая же пара, если overlay нужен только в модальном режиме.
+
+Результат: каждый файл плоский, без `v-if`-деревьев веток по режиму, и легко тестируется по отдельности.
+
+### 3.9. Ordered collection вместо ручного реестра
+
+Когда порядок элементов важен (roving focus, typeahead, indexOf), **не держи ручной `items: Ref<HTMLElement[]>` с push/splice** — порядок ломается при перепаковке детей. Используй паттерн:
+
+1. Каждый item выставляет дата-атрибут (например `data-collection-item=""`).
+2. `itemMap: Ref<Map<HTMLElement, ItemData>>` в контексте — регистрация через `watchEffect(cleanup)` в child:
+   ```ts
+   watchEffect((onCleanup) => {
+     const el = currentElement.value
+     if (!el) return
+     const key = markRaw(el)
+     ctx.itemMap.value.set(key, { ref: el, value: props.value })
+     onCleanup(() => ctx.itemMap.value.delete(key))
+   })
+   ```
+3. `getItems()` считывает текущий DOM-порядок через `querySelectorAll('[data-collection-item]')` и сортирует значения мапы по `indexOf`.
+4. `markRaw(el)` обязательно — иначе Vue сделает DOM-узел реактивным и сломает производительность.
+
+### 3.10. Presence и анимации выхода
+
+Для любого примитива, у которого часть может иметь exit-анимацию (Dialog.Content, Collapsible.Content, Popover.Content, …) рендер идёт через `Presence` из `src/presence/`:
+
+- `<Presence :present="open">` монтирует слот при `present=true` и удерживает его, пока CSS-анимация не завершилась после `present=false`.
+- Пропс `forceMount` — обязательный escape-hatch, для случаев, когда пользователь хочет держать DOM в дереве принудительно (например, для measurement).
+- Императивный малый FSM для состояний `mounted` / `unmountSuspended` / `unmounted` — через `useStateMachine` (если добавим) или локально, но кратко и декларативно.
+
+### 3.11. Single-or-multiple абстракция
+
+Компоненты типа `Accordion` / `ToggleGroup` / `Combobox`, поддерживающие оба режима, делают это **через единый хелпер**, а не двумя ветками. Правила:
+
+- Тип выводится из фактического `modelValue`/`defaultValue` (`Array` → multiple, иначе single).
+- Явный `type="single" | "multiple"` перекрывает вывод, но если значение конфликтует — логируем warning и следуем типу значения.
+- Единая функция `change(v)`: в single — переключает/сбрасывает; в multiple — добавляет/удаляет из массива.
+- Сравнение значений — через deep equality (`ohash.isEqual` или аналог), а не `===`, иначе объектные значения не будут тоглиться.
+
+### 3.12. Shared composables для глобальных стеков
+
+Состояния уровня документа (scroll-lock, focus-scope stack, dismissable-layer stack, aria-hide других узлов) должны быть **одним экземпляром на приложение**, иначе два Dialog'а записывают `overflow: hidden` поверх друг друга и теряют исходное значение.
+
+- Используй `createSharedComposable` (VueUse) для таких хелперов.
+- Храни внутри counter / Map по ID лайера — фактический lock/hide включается, пока хотя бы один потребитель активен.
+- Снимай побочные эффекты на эффект-скоупе последнего подписчика, не в `onBeforeUnmount` каждой копии.
+- SSR: все такие композаблы guards'ят на `isClient` / `typeof document !== 'undefined'`.
+
+### 3.13. ConfigProvider и глобальные настройки
+
+Всё, что логично задавать раз на дерево (направление `dir`, кастомный `useId`, `nonce` для CSP, `scrollBody` конфиг), живёт в `ConfigProvider`. Правила:
+
+- Примитив читает такие настройки через `inject` с **фолбэком-дефолтом** (`inject(fallback)`), а не бросает, если provider не стоит.
+- Личный проп на Root перекрывает глобальную настройку (локальный `dir` на Popover > глобальный `dir`).
+- `useId` из тулкита уже учитывает `ConfigProvider.useId` — не дублируй логику внутри компонента.
+
+### 3.14. Focus и dismiss — всегда через примитивы, не ручной код
+
+- **`FocusScope`** — любой modal/popover/menu оборачивает `Content` в `FocusScope` с `trapped` и/или `loop`. Ручный trap-код в компоненте запрещён.
+- **`DismissableLayer`** — все escape/pointer-outside/focus-outside диспетчеры идут через этот компонент и его stack — иначе вложенный Popover закроет оба уровня по Esc.
+- **`FocusGuards` / visually-hidden sentinel'ы** — в краях portaled-контента, чтобы tab не убегал в URL-бар браузера.
+- **`useHideOthers`** (aria-hidden соседних деревьев) — для modal-Content, чтобы screen reader не уходил за пределы.
+
+---
+
+## 4. Стиль кода (eslint + @stylistic)
+
+- Всегда `<script setup lang="ts">`. Composition API. Options API запрещён.
+- Отдельный `<script lang="ts">` блок допускается **только** для экспорта типов/интерфейсов пропсов наружу.
+- Импорты типов — через `import type { … }`.
+- Не пиши docstring/комментарии к коду, который не меняешь. Не добавляй type-аннотации сверх необходимого.
+- Не добавляй ненужный error handling «на всякий случай» — валидируй только на границах (props, входные DOM events).
+- Без default exports в `.ts`. В `.vue` — только дефолтный экспорт компонента (через `<script setup>`).
+
+После любых правок: `pnpm lint:fix`.
+
+---
+
+## 5. Тесты
+
+### 5.1. Структура
+
+- jsdom-тесты: `src/<component>/__test__/<Component>.test.ts`.
+- `@vue/test-utils` (`mount`) + `vitest`.
+- Требуется реальный focus-менеджмент / pointer events / scroll-lock / `inert` / IntersectionObserver → добавь browser-сьют.
+
+### 5.2. Минимум сценариев для нового примитива
+
+1. Корректный ARIA-каркас (`role`, `aria-*`, `data-state`).
+2. Контролируемый режим (`v-model` обновляется → DOM реагирует).
+3. Неконтролируемый режим (`default*` пропс задаёт начальное состояние).
+4. Все интерактивные действия (click / keyboard).
+5. Клавиатура: Enter/Space/Arrow*/Home/End/Esc — в зависимости от паттерна.
+6. `disabled` блокирует мутации.
+7. Edge-cases: пустые массивы, null, экстремальные min/max.
+8. Модификаторы v-model, если поддерживаются (`trim`, кастомные).
+
+### 5.3. Хелперы и гочи jsdom
+
+```ts
+function press(el: Element, key: string) {
+  el.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
+}
+
+// jsdom: DataTransfer не определён — стабь clipboardData вручную:
+const event = new Event('paste', { bubbles: true, cancelable: true }) as unknown as ClipboardEvent;
+Object.defineProperty(event, 'clipboardData', { value: { getData: () => 'text' } });
+```
+
+- Всегда `attachTo: document.body`, иначе focus-тесты ломаются.
+- После каждого теста `wrapper.unmount()`.
+- `await nextTick()` после программных мутаций перед assert'ом.
+- Не используй `vi.useFakeTimers()` без необходимости.
+
+### 5.4. Browser mode
+
+- Файл: `src/<component>/__test__/<Component>.browser.test.ts`.
+- Запуск: `pnpm run test:browser`.
+- Перед коммитом прогоняй оба сьюта, если затронут focus/inert/scroll.
+
+---
+
+## 6. Workflow для нового примитива
+
+1. **Спецификация.** WAI-ARIA APG для паттерна — единственный источник истины по ARIA/клавиатуре.
+2. **Скаффолдинг папки** (`<name>/context.ts`, `<Name>Root.vue`, парты, `__test__/`, `index.ts`).
+3. **Контекст** через `useContextFactory` — сначала определи поля и действия, потом пиши компоненты.
+4. **Root** — модель состояния (`defineModel` с `get/set` или fallback-паттерн), `provide*Context`.
+5. **Parts** — каждая часть тонкая, без дублирующего state.
+6. **Тесты** пиши параллельно с кодом, не «потом».
+7. **Регистрация в `src/index.ts`.**
+8. **Локальный прогон:** `pnpm exec vitest run src/<name>` → 0 fail.
+9. **Полный прогон:** `pnpm exec vitest run` (+ `test:browser` при необходимости).
+10. **Сборка:** `pnpm exec tsdown` — проверь, что bundle не вырос аномально и `.d.ts` валиден.
+11. **Линт:** `pnpm lint:fix`.
+12. **Обнови session-память** (`/memories/session/progress-log.md`), если идёт многошаговая работа.
+
+---
+
+## 7. Доработка существующего компонента
+
+- **Не ломай публичный API без миграции.** Имена пропсов/событий/контекстных полей — semver'но значимы.
+- **Не добавляй фичи «попутно».** Меняй только то, что просили.
+- **Сначала прочитай тесты** — они описывают контракт.
+- **Расширил поведение → добавь тест.** Любое новое условие/ветка покрывается.
+- **Удалил поведение → удали тест** и упомяни в PR-описании.
+- **Баг в shared-утилите** (`utils/roving-focus`, `utils/getRawChildren`) — фикси в утилите, а не локально.
+- **Регрессии:** при правке логики прогоняй **весь** sweep пакета.
+
+---
+
+## 8. Что **не** делать
+
+- ❌ Тянуть внешние UI-зависимости (Radix, Headless UI, Ark, floating-vue, …). Все примитивы — свои.
+- ❌ Создавать `Symbol(...)` / `InjectionKey<...>` вручную в папке примитива — только `useContextFactory`.
+- ❌ Вызывать `provide()` / `inject()` из `vue` напрямую — только через `useContextFactory`.
+- ❌ Писать имена сторонних UI-библиотек и внутренние кодовые имена бренда/форка в коде/доках/тестах.
+- ❌ Деструктурировать пропсы в переменные (теряется реактивность); используй getter-форму и `toRef(() => props.x)`.
+- ❌ Дублировать стейт между `defineModel` и локальным ref — используй `get/set` на модели.
+- ❌ Класть бизнес-логику в `<template>` — выноси в `computed` / функции.
+- ❌ Полагаться на DOM-walk для чтения данных у соседей — используй context / sub-context.
+- ❌ `pnpm install <pkg>` без согласования: новые рантайм-зависимости должны проходить через catalog.
+- ❌ Создавать markdown-документацию по компоненту без запроса.
+- ❌ `git push --force`, `git reset --hard`, удалять файлы без подтверждения.
+- ❌ `--no-verify` и обход pre-commit хуков.
+
+---
+
+## 9. Memory-протокол для агентов
+
+- Большая задача (≥3 шага) — план в `/memories/session/plan.md`.
+- Этап завершён — прогресс в `/memories/session/progress-log.md`.
+- Repo-факты, верифицированные на практике (команды, версии, гочи) — в `/memories/repo/`.
+- Встретил гочу, которая проявится снова — добавь её в этот `AGENTS.md` (§3 или §5.3).
+
+---
+
+## 10. Чеклист перед PR
+
+- [ ] Папка примитива оформлена по §1.
+- [ ] Контекст только через `useContextFactory`, 0 ручных `Symbol` / `InjectionKey`.
+- [ ] v-model через `defineModel({ get, set })` (или обоснованный fallback по §3.2.3).
+- [ ] Реактивность: `toValue` / `toRef(() => props.x)` / `useTemplateRef` вместо ручных паттернов.
+- [ ] Полиморфизм через `Primitive` + `useForwardExpose`, не ручные teg-свитчи.
+- [ ] Для анимируемых частей (Content/Overlay) использован `Presence`.
+- [ ] Modal/popover-примитивы завёрнуты в `FocusScope` + `DismissableLayer`, не ручные листенеры.
+- [ ] Глобальные стеки (scroll-lock, hide-others, focus-stack) — через shared composables, 0 дублирующегося state.
+- [ ] Roving-focus через `src/utils/roving-focus.ts`, если применимо.
+- [ ] ARIA-роли и `data-state` — соответствуют APG.
+- [ ] Тесты: минимум из §5.2, всё зелёное.
+- [ ] Browser-сьют не сломан (если затронут focus/inert/scroll).
+- [ ] `pnpm exec tsdown` собирается, `.d.ts` валиден.
+- [ ] `pnpm lint:fix` без diff'а.
+- [ ] Никаких имён сторонних UI-либ и внутренних кодовых имён бренда.
+- [ ] `src/index.ts` обновлён.
diff --git a/vue/primitives/README.md b/vue/primitives/README.md
new file mode 100644
index 0000000..997312b
--- /dev/null
+++ b/vue/primitives/README.md
@@ -0,0 +1,15 @@
+# @robonen/primitives
+
+Collection of reusable UI primitives.
+
+## Install
+
+```bash
+pnpm install @robonen/primitives
+```
+
+## Usage
+
+```ts
+import {} from '@robonen/primitives';
+```
\ No newline at end of file
diff --git a/vue/primitives/REKA_COMPARISON.md b/vue/primitives/REKA_COMPARISON.md
new file mode 100644
index 0000000..fdd03b2
--- /dev/null
+++ b/vue/primitives/REKA_COMPARISON.md
@@ -0,0 +1,2056 @@
+# @robonen/primitives vs reka-ui v2.9.7 — full comparison
+
+> Generated by a 50-primitive fan-out: each primitive compared file-by-file against its reka-ui analogue, every claimed gap re-checked by an independent adversarial verifier.
+
+## Headline
+
+- **50 primitives** compared (every exported primitive; `command` has no reka analogue and was compared vs Combobox/Listbox).
+- **0 primitives are strictly better than reka today.** Verdicts: **11 reka-better**, **39 robonen-better-with-gaps**, **0 robonen-strictly-better**.
+- Across all primitives the comparison raised **463 gaps**; the adversarial verifier **confirmed 430, downgraded 30 to partial, refuted 3** (~93% confirmed, 0.6% false-positive).
+- So robonen is competitive/close everywhere but **reka currently wins or ties on features in every single primitive** — to hit "better in everything" each list below must be cleared.
+
+**3 refuted false-positives (ignore these):** dialog content-ref forwarding (robonen has it via `useForwardExpose`); popper `SIDE_OPTIONS`/`ALIGN_OPTIONS` runtime export (reka doesn't export them either); popper imperative `update` (reka destructures but never uses it).
+
+## Ranking — most work needed first
+
+| Primitive | Verdict | Gaps (C/M/m) | Verifier (conf/part/ref) | robonen wins |
+|---|---|---|---|---|
+| **toast** | reka better | 3/9/7 | 19/0/0 | 4 |
+| **date-picker** | reka better | 3/5/4 | 12/0/0 | 6 |
+| **select** | reka better | 2/9/6 | 17/0/0 | 3 |
+| **menu** | reka better | 2/8/8 | 18/0/0 | 4 |
+| **tabs** | reka better | 2/4/6 | 11/1/0 | 5 |
+| **toolbar** | reka better | 1/5/7 | 12/1/0 | 4 |
+| **checkbox** | reka better | 1/4/6 | 11/0/0 | 3 |
+| **toggle-group** | reka better | 1/4/6 | 11/0/0 | 4 |
+| **number-field** | reka better | 0/11/6 | 15/2/0 | 5 |
+| **radio-group** | reka better | 0/7/9 | 15/1/0 | 5 |
+| **aspect-ratio** | reka better | 0/4/2 | 6/0/0 | 3 |
+| **scroll-area** | better with gaps | 2/3/7 | 12/0/0 | 7 |
+| **dropdown-menu** | better with gaps | 1/5/6 | 11/1/0 | 3 |
+| **tree** | better with gaps | 1/5/6 | 11/1/0 | 7 |
+| **popover** | better with gaps | 1/4/3 | 8/0/0 | 6 |
+| **menubar** | better with gaps | 1/3/7 | 10/1/0 | 5 |
+| **accordion** | better with gaps | 1/3/6 | 9/1/0 | 5 |
+| **editable** | better with gaps | 1/3/4 | 7/1/0 | 6 |
+| **tooltip** | better with gaps | 1/3/2 | 6/0/0 | 5 |
+| **pin-input** | better with gaps | 1/2/10 | 12/1/0 | 6 |
+| **collapsible** | better with gaps | 1/2/5 | 8/0/0 | 5 |
+| **primitive** | better with gaps | 1/2/5 | 6/2/0 | 5 |
+| **hover-card** | better with gaps | 1/2/4 | 6/1/0 | 7 |
+| **tags-input** | better with gaps | 1/2/3 | 6/0/0 | 6 |
+| **roving-focus** | better with gaps | 1/1/1 | 3/0/0 | 5 |
+| **collection** | better with gaps | 1/0/1 | 2/0/0 | 5 |
+| **dismissable-layer** | better with gaps | 0/7/4 | 11/0/0 | 5 |
+| **navigation-menu** | better with gaps | 0/7/4 | 11/0/0 | 6 |
+| **listbox** | better with gaps | 0/6/4 | 10/0/0 | 7 |
+| **calendar** | better with gaps | 0/5/8 | 13/0/0 | 7 |
+| **dialog** | better with gaps | 0/5/6 | 9/1/1 | 6 |
+| **combobox** | better with gaps | 0/4/14 | 16/2/0 | 8 |
+| **context-menu** | better with gaps | 0/4/10 | 12/2/0 | 4 |
+| **slider** | better with gaps | 0/4/5 | 6/3/0 | 7 |
+| **stepper** | better with gaps | 0/4/4 | 7/1/0 | 6 |
+| **config-provider** | better with gaps | 0/4/3 | 7/0/0 | 6 |
+| **avatar** | better with gaps | 0/3/5 | 8/0/0 | 6 |
+| **visually-hidden** | better with gaps | 0/3/5 | 8/0/0 | 4 |
+| **alert-dialog** | better with gaps | 0/2/5 | 7/0/0 | 4 |
+| **toggle** | better with gaps | 0/2/4 | 6/0/0 | 5 |
+| **focus-scope** | better with gaps | 0/2/2 | 4/0/0 | 4 |
+| **progress** | better with gaps | 0/2/2 | 4/0/0 | 5 |
+| **command** | better with gaps | 0/1/12 | 12/1/0 | 6 |
+| **popper** | better with gaps | 0/1/6 | 4/1/2 | 6 |
+| **label** | better with gaps | 0/1/4 | 4/1/0 | 4 |
+| **separator** | better with gaps | 0/0/5 | 4/1/0 | 4 |
+| **pagination** | better with gaps | 0/0/4 | 3/1/0 | 6 |
+| **teleport** | better with gaps | 0/0/2 | 0/2/0 | 6 |
+| **presence** | better with gaps | 0/0/0 | 0/0/0 | 5 |
+| **switch** | better with gaps | 0/0/0 | 0/0/0 | 5 |
+
+---
+## Per-primitive detail
+
+### toast  —  _reka-better_
+
+**Parts reka has that robonen lacks:** ToastPortal, ToastRootImpl (impl split from ToastRoot), ToastAnnounce (visually-hidden live region), ToastAnnounceExclude, FocusProxy (head/tail focus sentinels)
+
+robonen's toast is a clean but heavily reduced reimplementation of Radix/reka toast. It correctly covers the basics — provider/viewport/root/title/description/action/close parts, polite/assertive aria-live, a label region, hotkey-to-focus (with two genuinely better bug fixes vs reka: empty-hotkey guard and reactive-duration timer restart, both regression-tested), and pause/resume on hover/focus. However it is missing most of the hard parts that make a toast accessible and production-grade: there is NO swipe-to-dismiss at all (the swipeDirection/swipeThreshold props are declared but never used — dead API), NO dedicated screen-reader announce region (ToastAnnounce/ToastAnnounceExclude with deferred double-rAF text harvesting), NO focus-order management or FocusProxy guards for the portaled viewport, NO Teleport/Collection so toasts can't be authored outside the viewport, NO focus return on close, NO elapsed-time-preserving pause (it restarts the full duration so hovering resets the countdown), NO remaining/duration slot props, NO forceMount/defaultOpen, NO DismissableLayer integration, NO window blur/focus pause, and a weaker Escape story (escapeKeyDown is emitted but never closes, and isFocusedToastEscapeKeyDownRef is dead). reka also has ToastPortal, type='button' on close, label {hotkey} interpolation, and author-error validation. Net: reka is currently materially better on accessibility, keyboard/focus, and features. The good news is robonen already ships the supporting primitives (collection, dismissable-layer, visually-hidden, focus-scope, teleport, presence), so every gap is implementable.
+
+**Critical gaps:**
+- ⛔ (features) No swipe-to-dismiss gesture support at all. reka implements full pointer swipe handling on the toast: pointerdown/pointermove/pointerup with direction clamping, threshold detection, pointer capture, and emits swipeStart/swipeMove/swipeCancel/swipeEnd, plus sets data-swipe and --reka-toast-swipe-move-x/y / --reka-toast-swipe-end-x/y CSS vars for animation.
+  - _evidence:_ reka ToastRootImpl.vue pointerdown/pointermove/pointerup handlers (lines 218-280) + ToastRoot.vue swipe emit wrappers (lines 69-108) + utils.ts isDeltaInDirection/handleAndDispatchCustomEvent/SwipeEvent. robonen declares swipeDirection/swipeThreshold in ToastProvider but NEVER consumes them — there is zero pointer/swipe handling anywhere in robonen/toast. The props are dead.
+- ⛔ (accessibility) No screen-reader announce region. reka renders a separate visually-hidden ToastAnnounce live region with double-rAF deferred text injection (to force NVDA to announce) and harvests toast text via getAnnounceTextContent, honoring aria-hidden/hidden/display:none and ToastAnnounceExclude.
+  - _evidence:_ reka ToastAnnounce.vue (double requestAnimationFrame + useTimeout(1000)), ToastRootImpl.vue lines 120,181-200, utils.ts getAnnounceTextContent. robonen instead puts role=status + aria-live directly on the visible toast li (ToastRoot.vue lines 129-131) with no deferred-render trick and no separate hidden announce node, so NVDA/VoiceOver announcement reliability is worse and there is no text-harvesting for SR.
+- ⛔ (keyboard) No focus-order management / tab reversal across toasts and no FocusProxy guards. reka programmatically reverses tab order (newest-to-oldest), uses head/tail FocusProxy VisuallyHidden sentinels to proxy focus out of the portaled viewport back into document order, and on Tab navigates between toast tabbable candidates.
+  - _evidence:_ reka ToastViewport.vue handleKeyDown (lines 97-128), getSortedTabbableCandidates (lines 150-161), FocusProxy.vue, focusFirst/getTabbableCandidates imports. robonen ToastViewport.vue has NO keydown/Tab handling and no focus proxies at all; tabbing through portaled toasts will follow DOM order and can escape the viewport unexpectedly.
+
+**Major gaps:**
+- 🔶 (accessibility) No ToastAnnounceExclude part and no altText harvesting on ToastAction. reka's ToastAction wraps ToastClose in ToastAnnounceExclude so the action's altText is read by SR (and the button's own visible text is excluded). robonen's ToastAction only sets aria-label=altText on the button and provides no exclude mechanism, so action content cannot be excluded from / substituted in the SR announcement.
+- 🔶 (features) Toast is not teleported into the viewport and there is no Collection registration. reka teleports each ToastRootImpl into providerContext.viewport via <Teleport> and wraps it in CollectionItem/CollectionSlot so toasts authored anywhere in the tree render inside the viewport and are enumerable for focus ordering.
+- 🔶 (accessibility) On programmatic/keyboard close, focus is not returned to the viewport. reka's handleClose focuses the viewport when the toast being closed contained focus (so SR users keep context and focus isn't lost), and resets isClosePausedRef.
+- 🔶 (api-surface) No remaining-time / duration slot props. reka exposes a default slot with { open, remaining, duration } driven by a useRafFn countdown, enabling progress bars/countdowns. robonen's ToastRoot default slot is empty <slot/> with no scope.
+- 🔶 (api-surface) No forceMount prop and no defaultOpen prop. reka ToastRoot supports forceMount (force render for animation libs) and defaultOpen (uncontrolled initial state distinct from the v-model). robonen only has defineModel('open', {default:true}) with no forceMount and no separate defaultOpen.
+- 🔶 (features) No DismissableLayer integration on the viewport. reka wraps the viewport in DismissableLayerBranch so toasts participate in the global dismissable-layer stack (correct Escape/outside-interaction layering with dialogs/popovers). robonen's viewport is a plain Primitive region with no layer participation.
+- 🔶 (edge-cases) No window blur/focus pause-resume and no pointermove-based pause. reka pauses the dismiss timer on window blur and resumes on window focus, and uses pointermove (not just pointerenter) plus pointerleave-with-active-element checks. robonen only pauses on pointerenter/focusin and resumes on pointerleave/focusout.
+- 🔶 (edge-cases) Pause does not preserve elapsed/remaining time; timer restarts from full duration on resume. reka tracks closeTimerStartTimeRef/closeTimerRemainingTimeRef and on resume continues from the remaining time. robonen's resumeTimer calls startTimer(full duration) again, so hovering repeatedly can keep a toast alive far longer than its duration and the countdown effectively resets.
+- 🔶 (keyboard) Escape handling differs and is weaker. reka uses onKeyStroke('Escape') globally on the root, sets isFocusedToastEscapeKeyDownRef, and closes unless event.defaultPrevented. robonen only emits escapeKeyDown on @keydown.escape bound to the toast element (must be focused), never closes on Escape, and never sets isFocusedToastEscapeKeyDownRef (the provider ref exists but is dead).
+
+**Minor gaps (7):**
+- ▫️ (api-surface) No disableSwipe prop. reka ToastProvider exposes disableSwipe to turn off swipe gestures (and adjusts userSelect/touchAction styles). robonen has no equivalent (and no swipe at all).
+- ▫️ (accessibility) ToastViewport label loses the {hotkey} placeholder feature and the function-form label. reka label supports '{hotkey}' interpolation (auto-replaced, e.g. 'Notifications (F8)') and a (hotkey)=>string function form, improving SR landmark context. robonen viewport label is a plain string with no hotkey interpolation.
+- ▫️ (api-surface) No ToastPortal part. reka exports a ToastPortal (TeleportPrimitive wrapper) for placing the viewport in an arbitrary container. robonen exports no Portal.
+- ▫️ (code-quality) ToastProvider does not validate a non-empty label and does not validate type. reka throws on empty/whitespace label and on invalid type values, catching author mistakes early. robonen performs no such validation.
+- ▫️ (forms) ToastClose does not set type='button'. reka's ToastClose sets type='button' when as==='button' to avoid implicit form submit. robonen ToastClose renders a button with no explicit type.
+- ▫️ (accessibility) ToastRoot default type differs and may be less appropriate. reka defaults type='foreground' (ToastRoot.vue line 28) for user-action toasts (assertive). robonen defaults type='background' (ToastRoot.vue line 32, polite). A behavioral/aria-live divergence worth a deliberate decision.
+- ▫️ (code-quality) Components do not set inheritAttrs:false where reka does, which blocks precise attribute placement around wrappers (FocusProxy/DismissableLayerBranch/Teleport). reka uses defineOptions({inheritAttrs:false}) + v-bind="$attrs".
+
+**Recommendations to make robonen strictly better:**
+- Implement swipe-to-dismiss: port reka's pointerdown/pointermove/pointerup logic and isDeltaInDirection/handleAndDispatchCustomEvent into ToastRoot, add swipeStart/swipeMove/swipeCancel/swipeEnd emits, set data-swipe + --primitives-toast-swipe-move-x/y / -end-x/y CSS vars, and actually consume the existing swipeDirection/swipeThreshold provider props (currently dead). Add a disableSwipe provider prop.
+- Add a dedicated screen-reader announce region: create a ToastAnnounce visually-hidden component (robonen already ships a visually-hidden primitive) that defers text injection with double requestAnimationFrame, and a getAnnounceTextContent util that walks the toast harvesting text while honoring aria-hidden/hidden/display:none and a new ToastAnnounceExclude (data-primitives-toast-announce-exclude / -alt). Move aria-live off the visible li into this hidden region.
+- Add ToastAnnounceExclude and wire ToastAction to wrap its button in it (passing altText) so SR reads altText instead of the button label, matching reka.
+- Teleport each ToastRoot into the provider viewport and integrate the existing collection primitive (useCollection isProvider on provider, CollectionItem on root, CollectionSlot on viewport) so toasts can be authored anywhere and are enumerable.
+- Implement viewport focus management: add a keydown Tab handler that reverses tab order newest-to-oldest using collection items + getTabbableCandidates, and add head/tail FocusProxy sentinels (VisuallyHidden tabindex=0) to proxy focus out of the portaled viewport. Export focusFirst/getTabbableCandidates from focus-scope for reuse.
+- On keyboard close, focus the viewport when the closing toast contained focus, and reset isClosePausedRef (currently isFocusedToastEscapeKeyDownRef and the focus-return behavior are missing).
+- Preserve elapsed time across pause/resume: track closeTimerStartTime and closeTimerRemainingTime and resume from remaining (not full duration). Add a useRafFn-based remaining countdown and expose { open, remaining, duration } as ToastRoot slot props.
+- Add forceMount and defaultOpen props to ToastRoot (Presence :present="forceMount || open"; defaultOpen seeds the uncontrolled model).
+- Wrap ToastViewport in a DismissableLayerBranch (add a Branch export to the dismissable-layer primitive) so toasts join the dismissable-layer stack; add window blur/focus pause-resume and pointermove-based pause to the viewport.
+- Implement global Escape handling on ToastRoot via a keydown listener: emit escapeKeyDown, set isFocusedToastEscapeKeyDownRef, and close unless defaultPrevented.
+- Add a ToastPortal part (Teleport wrapper) and support {hotkey} placeholder + function-form label on ToastViewport.
+- Add author-error validation (non-empty label in ToastProvider, valid type in ToastRoot), set type='button' on ToastClose when as==='button', and reconsider defaulting ToastRoot type to 'foreground' to match the common user-action semantics.
+
+**Where robonen is already better:**
+- ✅ ToastViewport hotkey matching is more correct than reka's: robonen guards against an empty hotkey array (ToastViewport.vue line 47, `if (!hotkey || hotkey.length === 0) return`) and supports modifier-key tokens ('altKey'/'ctrlKey'/'shiftKey'/'metaKey') in the hotkey array. reka's `onKeyStroke(hotkey.value, ...)` (ToastViewport.vue line 55) is registered once with the initial value (not reactive to hotkey changes) and an empty array would match every keystroke. robonen has explicit regression tests for both bugs.
+- ✅ ToastRoot restarts the auto-dismiss timer reactively when `duration` (root or provider) changes while open and not paused (ToastRoot.vue watch lines 83-91), backed by a dedicated regression test. reka resets closeTimerRemainingTimeRef on duration change (ToastRootImpl.vue lines 154-160) but robonen's restart behavior here is explicitly tested.
+- ✅ robonen normalizes the disable case more defensively in startTimer: `if (ms === Infinity || ms <= 0 || !Number.isFinite(ms)) return` (ToastRoot.vue line 57) also handles NaN, whereas reka only checks `duration <= 0 || duration === Number.POSITIVE_INFINITY` (ToastRootImpl.vue line 90).
+- ✅ robonen's context layer uses a typed useContextFactory and shallowRef for the viewport element (ToastProvider.vue line 34), marginally more efficient for a DOM-node ref than reka's plain ref (ToastProvider.vue line 71).
+
+
+### date-picker  —  _reka-better_
+
+**Parts reka has that robonen lacks:** DatePickerField backed by a true segmented DateFieldRoot (role=group, segments slot, VisuallyHidden focusable form input), DatePickerInput as an individual editable segment part (role=spinbutton, part: SegmentPart) — robonen's DatePickerInput is just an alias of the plain DatePickerField
+**Parts robonen has that reka lacks:** DatePickerCalendar wrapper component (reka has DatePickerCalendar too, but robonen's is a thin Primitive div; functionally parity), DatePickerField with editable/format/placeholderText plain-input ergonomics (no reka equivalent because reka is always segmented), valueFormat serializer on Root
+
+Both libraries structure DatePicker as a composition over Popover + Calendar + a Field, and robonen has real parity (or better) on the calendar grid: CalendarCellTrigger.vue implements full RTL-aware Arrow/Home/End/PageUp/PageDown(+Shift for year)/Enter/Space keyboard nav, roving tabindex, data-* states, initialFocus, and aria-selected/aria-disabled — matching reka's CalendarCellTrigger. robonen also wins on smaller surface (native Date, no @internationalized/date dependency), a valueFormat hidden-input serializer, and a friendlier closeOnSelect=true default. However, the verdict is reka-better because reka's DatePicker centers on a segmented, editable DateField (DateFieldRoot/DateFieldInput) that robonen completely lacks: robonen's DatePickerField is a single plain <input> doing new Date(text) parsing. That single architectural gap cascades into many missing features: per-segment spinbutton keyboard editing (Arrow increment, numeric type-ahead with auto-advance, Backspace, a/p for AM/PM), RTL-aware inter-segment Left/Right navigation, time support (granularity/hourCycle/step/hideTimeZone), segment-level ARIA (role=group, role=spinbutton, aria-valuemin/max/now/valuetext). Additionally reka has preventDeselect toggle-off, a focusable VisuallyHidden native input enabling real form constraint validation (required/min/max) where robonen uses a non-validatable display:none input, required/id forwarding, a trigger that honors disabled (robonen's does not), and DatePickerContent that auto-portals with a portal prop (robonen requires manual DatePickerPortal). To become strictly better, robonen must implement a segmented DateField with full segment keyboard + ARIA, add time/granularity support, preventDeselect, a focusable hidden form input with required, disabled trigger forwarding, and content auto-portalling — then it would surpass reka given its lighter dependency profile and better defaults. Relevant files: /Users/robonen/Projects/tools/vue/primitives/src/date-picker/DatePickerRoot.vue, /Users/robonen/Projects/tools/vue/primitives/src/date-picker/DatePickerField.vue, /Users/robonen/Projects/tools/vue/primitives/src/date-picker/DatePickerTrigger.vue, /Users/robonen/Projects/tools/vue/primitives/src/date-picker/DatePickerContent.vue, /Users/robonen/Projects/tools/vue/primitives/src/calendar/CalendarCellTrigger.vue; reka: /Users/robonen/Projects/external/reka-ui/packages/core/src/DatePicker/DatePickerRoot.vue, /Users/robonen/Projects/external/reka-ui/packages/core/src/DateField/DateFieldRoot.vue, /Users/robonen/Projects/external/reka-ui/packages/core/src/DateField/DateFieldInput.vue, /Users/robonen/Projects/external/reka-ui/packages/core/src/shared/date/useDateField.ts, /Users/robonen/Projects/external/reka-ui/packages/core/src/DatePicker/DatePickerContent.vue.
+
+**Critical gaps:**
+- ⛔ (features) Segmented, editable date field. reka's DatePickerField renders a DateFieldRoot (role=group) whose DatePickerInput parts (DateFieldInput.vue, part: SegmentPart) are individually-focusable contenteditable segments (day/month/year/hour/minute/second/dayPeriod/literal) with role=spinbutton. robonen's DatePickerField is a single plain <input> that does new Date(text) parsing (DatePickerField.vue:45-47). robonen has no per-segment editing, no SegmentPart model, no segments slot, no DateFieldRoot/DateFieldInput.
+  - _evidence:_ reka DateFieldRoot.vue (segmentValues/segmentContents, role=group) + DateFieldInput.vue (data-reka-date-field-segment, role=spinbutton via useDateField commonSegmentAttrs); robonen DatePickerField.vue is a single <input> with no segment support.
+- ⛔ (keyboard) Per-segment keyboard interaction. reka's useDateField.ts handles ArrowUp/ArrowDown to increment/decrement each segment, numeric type-ahead with auto-advance to next segment (focusNext), Backspace to clear, and 'a'/'p' to set AM/PM (handleDayPeriodSegmentKeydown:846-871). robonen's field only handles Enter to commit a full parsed string (DatePickerField.vue:52-54) — no arrow increment, no type-ahead, no backspace-per-segment, no AM/PM keys.
+  - _evidence:_ reka useDateField.ts handleDay/Month/Year/Hour/Minute/Second/DayPeriodSegmentKeydown (lines 635-871) vs robonen DatePickerField.vue handleKeydown only checking e.key === 'Enter'.
+- ⛔ (features) Time / granularity support. reka exposes granularity ('day'|'hour'|'minute'|'second'), hourCycle (12/24), step (DateStep), and hideTimeZone on DatePickerRootProps (via DateFieldRootProps) and renders time segments accordingly (DatePickerRoot.vue:104-112 destructures granularity/hideTimeZone/hourCycle/step; DatePickerGranular.story.vue). robonen's DatePickerRoot has NO granularity/hourCycle/step/hideTimeZone props — it is date-only (toDateOnly strips time everywhere, DatePickerRoot.vue:105,183,198).
+  - _evidence:_ reka DatePickerRoot.vue context fields hourCycle/granularity/hideTimeZone/step (lines 21-23,44) + DateFieldRoot.vue inferredGranularity/hasTime; robonen DatePickerRoot.vue exposes no time props and calls toDateOnly throughout.
+
+**Major gaps:**
+- 🔶 (rtl-i18n) RTL-aware segment navigation with ArrowLeft/ArrowRight between field segments. reka DateFieldRoot.vue handleKeydown (253-260) moves focus to prev/next focusable segment, with sign flipped for dir==='rtl' (nextFocusableSegment/prevFocusableSegment:227-244). robonen's plain field has no inter-segment Left/Right navigation at all (single input). (robonen's calendar grid is RTL-aware, but the field is not.)
+- 🔶 (features) preventDeselect / toggle-off behavior. reka's onDateChange (DatePickerRoot.vue:180-190) deselects (sets modelValue=undefined) when the already-selected date is clicked again unless preventDeselect is set; preventDeselect is a real prop. robonen's setDate (DatePickerRoot.vue:180-185) always sets the date and never deselects on re-click, and there is no preventDeselect prop.
+- 🔶 (forms) Form constraint validation via a focusable native input. reka renders a VisuallyHidden as="input" with feature="focusable", real type (date/datetime-local), :value, :min, :max, :required (DateFieldRoot.vue:310-323), so browser-level required/min/max validation and form participation work, and focusing it forwards focus to the first segment. robonen's hidden input is type=hidden with style="display:none" (DatePickerRoot.vue:322-331) — no required, no min/max, not focusable, and display:none inputs are excluded from constraint validation.
+- 🔶 (edge-cases) Trigger does not honor disabled. reka DatePickerTrigger binds :disabled="rootContext.disabled.value" (DatePickerTrigger.vue:20) so the open button is disabled with the picker. robonen DatePickerTrigger.vue never reads ctx disabled — the trigger stays clickable and ctx.onOpenToggle fires even when the picker is disabled (no disabled binding, no guard).
+- 🔶 (accessibility) Field-level ARIA group/state semantics. reka DateFieldRoot sets role="group", aria-disabled, data-readonly, data-invalid (DateFieldRoot.vue:294-301) and each segment carries role=spinbutton, aria-valuemin/max/now/valuetext and aria-label (useDateField commonSegmentAttrs + per-part attrs:48-189). robonen's field is a bare <input readonly> with only data-primitives-date-picker-field and no aria-invalid/aria-disabled/group semantics.
+
+**Minor gaps (4):**
+- ▫️ (forms) required prop and id forwarding. reka DatePickerRoot forwards required and id into the field/native input (DatePickerRoot.vue:103,170,173; DateFieldRoot props required/id). robonen DatePickerRootProps has name but no required and no user-supplied id prop for the field/form control.
+- ▫️ (features) Content auto-portals and exposes a portal prop. reka DatePickerContent wraps children in PopoverPortal automatically and accepts portal?: PopoverPortalProps (DatePickerContent.vue:7-12,28). robonen DatePickerContent.vue does NOT portal — it renders inline; consumers must manually add DatePickerPortal around it, and there is no portal prop on Content.
+- ▫️ (edge-cases) closeOnSelect is reactive in reka via a watcher on modelValue (DatePickerRoot.vue:143-150) and is provided as a Ref in context, so changes apply consistently from any selection source (field or calendar). robonen only closes inside setDate (DatePickerRoot.vue:184) which is the calendar path; selecting/committing via the editable DatePickerField sets ctx.modelValue directly (DatePickerField.vue:47) and does NOT trigger closeOnSelect.
+- ▫️ (rtl-i18n) Locale-change segment re-ordering. reka re-collects segment elements on locale change so Left/Right order matches the new locale (DateFieldRoot.vue:192-202). robonen has no segments, so changing locale only reformats the single input string — a non-issue for plain input but a real capability gap if segmented editing is added.
+
+**Recommendations to make robonen strictly better:**
+- Build a segmented DateField (DateFieldRoot + DateFieldInput with a SegmentPart model) and have DatePickerField/DatePickerInput render it. Each segment should be role=spinbutton, contenteditable, with aria-valuemin/valuemax/valuenow/valuetext and aria-label, replacing the single plain <input> in DatePickerField.vue. This is the central gap.
+- Add per-segment keyboard handling to the field: ArrowUp/ArrowDown to increment/decrement, numeric type-ahead with auto-advance to the next segment, Backspace to clear a segment, and 'a'/'p' for AM/PM, plus RTL-aware ArrowLeft/ArrowRight to move between segments (mirror reka useDateField.ts and DateFieldRoot.vue handleKeydown).
+- Add time support: granularity ('day'|'hour'|'minute'|'second'), hourCycle (12/24), step, and hideTimeZone props on DatePickerRoot; stop unconditionally calling toDateOnly so time-of-day can be preserved and rendered as hour/minute/second/dayPeriod segments.
+- Add preventDeselect prop and make setDate deselect (set modelValue=undefined) when the currently-selected date is re-selected, unless preventDeselect is true (match reka onDateChange).
+- Replace the display:none hidden input with a focusable VisuallyHidden native input (type date/datetime-local, with :value/:min/:max/:required), so the control participates in browser constraint validation and focusing it forwards focus into the field. Add required and id props to DatePickerRootProps.
+- Forward root disabled to DatePickerTrigger (bind :disabled and guard onClick/onOpenToggle) so a disabled picker cannot be opened.
+- Make DatePickerContent auto-wrap its children in DatePickerPortal and accept a portal?: prop (like reka DatePickerContent.portal), so portalling is the default and DatePickerPortal becomes opt-out rather than required boilerplate.
+- Make closeOnSelect fire for ALL selection sources by watching modelValue at the Root (like reka) instead of only inside setDate, so committing via the field also closes the popover.
+- Add field-level ARIA: role=group, aria-disabled, aria-readonly, data-invalid/data-readonly/data-disabled on the field wrapper, and aria-invalid wiring driven by the existing isInvalid computed.
+
+**Where robonen is already better:**
+- ✅ Zero-dependency value model: robonen uses native JS Date throughout (DatePickerRoot.vue modelValue: Date | undefined) whereas reka hard-depends on @internationalized/date (DateValue, .compare/.copy/.set). Smaller bundle and no extra peer dep.
+- ✅ Custom hidden-input serialization: robonen exposes valueFormat?: 'iso' | ((d: Date) => string) (DatePickerRoot.vue:13-14, hiddenValue computed:256-260) for controlling the submitted string. reka has no equivalent serializer hook — it relies on the VisuallyHidden native input's normalized value only.
+- ✅ Better default UX for closeOnSelect: robonen defaults closeOnSelect = true (DatePickerRoot.vue:16,57) so the popover closes after picking a date; reka defaults closeOnSelect: false (DatePickerRoot.vue:85), requiring opt-in.
+- ✅ DatePickerField offers a simple plain-input mode with ergonomic props editable/format/placeholderText (DatePickerField.vue:4-11) plus Enter/blur commit — lower barrier for the common 'one text input' use case than reka's mandatory multi-segment composition.
+- ✅ modal popover support is wired end-to-end in robonen (DatePickerContent.vue FocusScope :trapped=ctx.modal, DismissableLayer :disable-outside-pointer-events=ctx.modal) and surfaced as a first-class DatePicker concern; reka delegates entirely to PopoverRoot.
+- ✅ Explicit isInvalid is computed and provided to the calendar context (DatePickerRoot.vue:175-178), giving day cells/styling access to validity, in addition to per-field checks.
+
+
+### select  —  _reka-better_
+
+**Parts reka has that robonen lacks:** BubbleSelect.vue (native VisuallyHidden <select> for real form submission, multiple, autofill, native change bubbling), SelectProvider.vue (re-provides root+default content context so items can mount in a detached DocumentFragment while closed)
+
+robonen's select is a structurally complete single-value port (all the same visible parts exist: Root/Trigger/Value/Icon/Portal/Content/Viewport/ScrollButtons/Group/Label/Item/ItemText/ItemIndicator/Separator/Arrow plus item-aligned and popper positioners), but it is materially behind reka on substance. Critical gaps: it supports only string values with no multiple/by/object support; and its SelectValue cannot render the initially-selected label until the dropdown is opened once, because items unmount when closed (reka renders them in a detached fragment via SelectProvider). Major gaps: it never focuses the selected item on open; its item-aligned positioning is a thin stub missing the entire Radix centering/collision/expand-on-scroll/RTL/resize algorithm; typeahead is primitive (no cycling/repeated-char/wrap) and absent on the closed trigger; it omits useHideOthers/useFocusGuards (both available in-repo); it has no native <select> form bubbling (only a plain hidden input, so no autofill, no multiple, no object values); ARIA is mis-wired (role=listbox on the viewport not the content, content id missing so trigger aria-controls dangles, items lack aria-labelledby/data-highlighted/select event). Minor gaps include no Tab/contextmenu prevention, no viewport nonce/scrollbar hiding, an always-rendered arrow, an unset content-available-height CSS var (broken viewport sizing), no forceMount, no SelectValue slot, and missing touch/pointer hardening. robonen's only genuine edges are a smoother rAF auto-scroll and a slightly broader set of exported per-part types. Verdict: reka-better; substantial work is required for robonen to reach, let alone exceed, parity.
+
+**Critical gaps:**
+- ⛔ (features) robonen only supports a single string value (export type SelectValue = string; modelValue typed string|undefined). reka supports any value type (AcceptableValue: string|number|boolean|object|null) AND multiple selection via the `multiple` prop, with array model values, by-field/by-fn object comparison, and toggle-on-reselect logic.
+  - _evidence:_ reka SelectRoot.vue: props `multiple`, `by`, `modelValue?: T|Array<T>`, `defaultValue?: T|Array<T>`, handleValueChange() toggles array membership and keeps open when multiple; isEmptyModelValue computed; utils.ts valueComparator/compare. robonen context.ts `SelectValue = string`, SelectRoot has no multiple/by, handleValueChange always closes and assigns scalar.
+- ⛔ (edge-cases) robonen's SelectValue cannot show the initially-selected option's label until the dropdown has been opened at least once, because items only register into optionsSet when SelectItemText mounts, and the items are unmounted by `Presence :present=open` while closed.
+  - _evidence:_ robonen SelectContent.vue wraps SelectContentImpl (items) in `<Presence :present="rootCtx.open.value">`; SelectItem registers via onMounted/onItemTextChange only. reka SelectContent.vue renders a `<Teleport :to="fragment">` with SelectProvider when closed so SelectItemText still mounts in a detached DocumentFragment and registers options, so SelectValue shows the correct label on first paint.
+
+**Major gaps:**
+- 🔶 (accessibility) robonen never focuses the currently selected item when the listbox opens; it tracks selectedItemRef but no code calls .focus() on it after positioning. So opening a select with an existing value lands focus on the content container, not the selected option.
+- 🔶 (features) robonen's item-aligned positioning is a stub: it only pins content to triggerRect.bottom/left with a fixed minWidth. It omits the entire Radix MacOS-style algorithm: vertical centering of the selected item against the trigger, collision clamping to viewport (CONTENT_MARGIN), min/max height computation, dir=rtl horizontal math, expand-on-scroll, ResizeObserver reposition, and content-wrapper z-index copy.
+- 🔶 (keyboard) robonen offers no type-to-select on the closed trigger; pressing letter keys on the trigger does nothing. reka runs typeahead on the trigger so you can select an option without opening.
+- 🔶 (keyboard) robonen's typeahead matching is primitive: it always picks the first item whose text startsWith the buffer from the top of the list, with no forward-cycling from the current item, no repeated-character cycling, and no wrap-around. So pressing the same letter repeatedly cannot cycle through same-letter options.
+- 🔶 (accessibility) robonen does not isolate the rest of the page from assistive tech while the listbox is open (no aria-hidden on siblings) and installs no focus guards, so screen-reader users and Tab can escape past the listbox boundary inconsistently.
+- 🔶 (forms) robonen does not provide native form submission for arbitrary/multiple values. It renders a single hidden <input type=hidden> that stringifies value, so non-string values and multiple selections cannot be submitted, autofill cannot work, and no native change event bubbles.
+- 🔶 (accessibility) robonen's SelectItem does not associate the option with its label for AT and lacks a highlighted-state hook; it also has no cancelable select event or empty-value guard.
+- 🔶 (accessibility) robonen's listbox role wiring is on the wrong element and inconsistent with reka. Content has no role; the viewport carries role=listbox. reka puts role=listbox on the content element and role=presentation on the viewport, which is the correct mapping for option grouping/labelling.
+- 🔶 (api-surface) robonen's SelectValue has no slot and cannot render selected label(s) for object/multiple values; it renders a single persisted displayValue string only and has no data-placeholder attribute.
+
+**Minor gaps (6):**
+- ▫️ (keyboard) robonen's content keydown handler does not prevent Tab from moving focus out of the open listbox, and does not block contextmenu, so Tab can break the roving-focus model inside the listbox.
+- ▫️ (features) robonen's SelectViewport lacks a `nonce` prop and does not hide scrollbars / enable touch momentum scrolling, hurting CSP support and visual polish.
+- ▫️ (edge-cases) robonen's SelectArrow renders regardless of position mode, so an arrow can appear in item-aligned mode where it is meaningless; and SelectPopperPosition does not map popper CSS vars, so the viewport's max-height var is never set.
+- ▫️ (features) robonen's SelectContent has no forceMount option for externally controlled animation libraries, and does not implement the delayed-render-presence workaround for state-based exit transitions.
+- ▫️ (edge-cases) robonen's pointer handling lacks touch-device support and the open/select race protections reka added for issue #804: it opens on pointerdown for all pointer types and has no pointer-move-threshold guard before selecting on pointerup.
+- ▫️ (code-quality) robonen's data hooks differ from reka's conventional attributes and it does not use a Collection abstraction, reducing robustness of keyboard nav and scroll-into-view ordering.
+
+**Recommendations to make robonen strictly better:**
+- Generalize the value model: change SelectValue from `string` to an AcceptableValue union and add `multiple`, `by`, array model/defaultValue support in SelectRoot, mirroring reka's handleValueChange toggle logic and valueComparator/compare utils. Keep open on select when multiple.
+- Fix initial label display: render SelectContent children into a detached DocumentFragment (or forceMount) while closed, like reka's SelectProvider/Teleport branch, so SelectItemText registers options and SelectValue shows the selected label before the dropdown is ever opened.
+- Focus the selected item on open: add `watch(isPositioned, () => focusFirst([selectedItemRef.value, contentEl]))` in SelectContentImpl, and re-run it after the scroll-up button mounts in item-aligned mode.
+- Port the full Radix item-aligned positioning algorithm into SelectItemAlignedPosition (vertical centering on selected item, CONTENT_MARGIN collision clamping, min/max height, dir=rtl math, expand-on-scroll via a context, useResizeObserver, z-index copy).
+- Add typeahead on the closed Trigger and replace the naive startsWith matcher with a cycling matcher (wrapArray + getNextMatch: forward from current item, repeated-char cycling, single-char exclusion, wrap-around). Reuse a shared useTypeahead.
+- Wire ARIA correctly: put role=listbox + the content id on the content element (so trigger aria-controls resolves), set viewport role=presentation, add aria-labelledby=textId and data-highlighted to SelectItem, and add a cancelable `select` emit plus an empty-string value guard.
+- Add native form support via a VisuallyHidden <select> (BubbleSelect equivalent) gated by useFormControl: support multiple, options from the registry, autofill @input, native change dispatch through the value setter, and a nativeSelectKey for re-render.
+- Use the already-present useHideOthers(content) and add focus guards in SelectContentImpl; prevent Tab and contextmenu inside the open listbox.
+- Add a `nonce` prop to SelectViewport and inject a scrollbar-hiding style tag with touch momentum; only render SelectArrow when position==='popper'; map popper CSS vars in SelectPopperPosition (--*-content-available-height, --*-trigger-width/height) and align the viewport max-height var name so collision-aware sizing actually works.
+- Add `forceMount` to SelectContent and a delayed renderPresence to keep state-based exit transitions accurate; add a slot to SelectValue exposing { selectedLabel, modelValue } and a data-placeholder attribute.
+- Adopt touch/pointer hardening from reka issue #804: skip opening on touch pointerdown (open on pointerup), release implicit pointer capture, track trigger pointer-down position, and add a pointer-move threshold before selecting on pointerup.
+
+**Where robonen is already better:**
+- ✅ robonen's SelectScrollButtonImpl uses requestAnimationFrame for smooth auto-scroll on pointerenter/pointerleave, whereas reka uses a setInterval(50ms) timer driven by an `autoScroll` emit; rAF is generally smoother and self-throttling (SelectScrollButtonImpl.vue startAutoScroll vs reka handlePointerDown/handlePointerMove setInterval).
+- ✅ robonen explicitly exposes per-component prop/emit types from index.ts for nearly every part (SelectContentImplProps/Emits, SelectItemAlignedPositionProps/Emits, SelectPopperPositionProps/Emits, SelectScrollUpButtonProps, etc.), giving a broader public typed surface than reka's index.ts which omits several (e.g. it does not export SelectContentImpl, SelectItemAlignedPosition, SelectPopperPosition, SelectViewport types/components at all).
+- ✅ robonen's SelectScrollUpButton/SelectScrollDownButton compute can-scroll state both on mount and via a passive scroll listener with proper cleanup, and the down-button uses a +1px tolerance (scrollHeight - scrollTop > clientHeight + 1) to avoid sub-pixel flicker; this is a small robustness edge reka's button does not special-case.
+
+
+### menu  —  _reka-better_
+
+
+robonen's Menu mirrors reka-ui's full part set (Root, Anchor, Arrow, Portal, Content + modal/nonmodal Impl, Item/ItemImpl, CheckboxItem, RadioGroup/RadioItem, ItemIndicator, Group, Label, Separator, Sub/SubTrigger/SubContent) and matches it on Anchor/Arrow/Portal/Separator/ItemIndicator and basic ARIA roles, modal isolation (useHideOthers + useBodyScrollLock + useFocusGuard present in MenuRootContentModal), and roving-tabindex navigation (Arrow/Home/End/PageUp/PageDown/RTL/loop via RovingFocus). It is genuinely better in one area: MenuItem dispatches a real bubbling ITEM_SELECT CustomEvent on the DOM, and uses preventScroll focusing. However it is currently NOT strictly better. The submenu pointer grace-area is dead code (provided in context but never invoked, and MenuSub never tracks its content element), so diagonal mouse movement to a submenu closes it; there is no pointer-direction tracking; ArrowLeft/close-key cannot return focus from an open submenu (MenuSubContent has no keydown/open-auto-focus handlers); the content container does not focus first/last on FIRST_LAST keys; Tab is not trapped; Space selects during type-ahead; pointer-up drag-select and the Firefox text-selection workaround are missing; Group/Label aria-labelledby wiring is broken (MenuLabel never injects the group context); submenus don't auto-close with the parent and don't support uncontrolled open; and Root/Sub are controlled-only so they won't open without an explicit v-model. Verdict: reka-better until the submenu grace-area, sub-content close-key handling, FIRST_LAST/Tab content handling, group/label wiring, and controllable open are implemented.
+
+**Critical gaps:**
+- ⛔ (edge-cases) Submenu pointer 'grace area' (safe diagonal triangle to the open submenu) is completely non-functional in robonen. reka's MenuSubTrigger.handlePointerLeave builds a 5-point polygon from `menuContext.content.value.getBoundingClientRect()` plus a directional bleed and calls `contentContext.onPointerGraceIntentChange({area, side})` with a 300ms `pointerGraceTimerRef` reset. robonen's MenuSubTrigger.handlePointerLeave does none of this — it only calls onTriggerLeave then close(). `onPointerGraceIntentChange`/`pointerGraceTimerRef` are provided in robonen's content context but NEVER called by any component, so pointerGraceIntentRef is always null and onItemEnter/onItemLeave/onTriggerLeave grace checks are dead code. Result: moving the mouse diagonally from a sub-trigger toward its open submenu closes the submenu, the classic menu UX bug reka fixes.
+  - _evidence:_ reka MenuSubTrigger.vue handlePointerLeave (contentRect polygon + onPointerGraceIntentChange + pointerGraceTimerRef 300ms) vs robonen MenuSubTrigger.vue handlePointerLeave (only close()); robonen onPointerGraceIntentChange has zero callers.
+- ⛔ (keyboard) Closing a submenu with the close key (ArrowLeft in LTR / ArrowRight in RTL) from inside the open sub-content is not handled. reka's MenuSubContent has a `@keydown` that on SUB_CLOSE_KEYS calls `menuContext.onOpenChange(false)` and refocuses the trigger (trigger.focus + scrollIntoView), and an `@open-auto-focus` that focuses sub-content for keyboard users. robonen's MenuSubContent has NO keydown/open-auto-focus handlers at all — close-key handling only exists on the SubTrigger, so once focus is inside the submenu, ArrowLeft cannot return to the parent.
+  - _evidence:_ reka MenuSubContent.vue @keydown (SUB_CLOSE_KEYS -> onOpenChange(false) + trigger.focus) and @open-auto-focus.prevent; robonen MenuSubContent.vue has no @keydown and no @open-auto-focus.
+
+**Major gaps:**
+- 🔶 (edge-cases) Pointer-direction tracking is missing. reka's MenuContentImpl tracks `pointerDirRef`/`lastPointerXRef` via handlePointerMove and `isPointerMovingToSubmenu(event)` requires BOTH the cursor be inside the grace area AND moving toward the submenu side. robonen has no pointermove handler on PopperContent and no pointer-direction state, so even if a grace area existed it could not gate on movement direction.
+- 🔶 (keyboard) When the menu content container itself is focused (e.g. opened via mouse with no highlighted item), pressing a FIRST_LAST key does not move focus to the first/last item. reka's handleKeyDown does `if (event.target === contentElement && FIRST_LAST_KEYS.includes(key)) { event.preventDefault(); focusFirst(candidateNodes) }` (reversing for LAST_KEYS). robonen's MenuContentImpl.handleKeyDown only calls `event.stopPropagation()` for FIRST_LAST_KEYS and never focuses an item from the container.
+- 🔶 (keyboard) Tab inside the menu is not prevented. reka's handleKeyDown does `if (event.key === 'Tab') event.preventDefault()` when the key originates inside content, so Tab cannot move focus out of an open menu (ARIA menu pattern requirement). robonen never prevents Tab in MenuContentImpl; it only relies on RovingFocusItem shift+Tab handling, leaving forward Tab able to escape the menu.
+- 🔶 (edge-cases) Selecting via pointer is fragile. reka's MenuItem tracks `isPointerDownRef` and on `pointerup` (if pointer started elsewhere) dispatches a synthetic click so pointer-down-then-move-to-another-item selects on release, and explicitly prevents Firefox text-selection lock when the menu closes. robonen's MenuItem/MenuItemImpl only handle plain `@click`; there is no pointerdown/pointerup logic, so drag-select across items and the Firefox text-selection edge case are unhandled.
+- 🔶 (keyboard) Space during type-ahead incorrectly selects in robonen. reka's MenuItem keydown guards `if (disabled || (isTypingAhead && event.key === ' ')) return` so Space extends the search string instead of activating the item while typing. robonen's MenuItemImpl.handleKeyDown treats Enter/Space identically (`if (event.key === 'Enter' || event.key === ' ') click()`) with no typeahead check, so pressing Space mid-search selects the focused item instead of continuing the search.
+- 🔶 (accessibility) Group/Label accessible name relationship is broken in robonen. reka's MenuGroup renders `:aria-labelledby="id"` and MenuLabel injects the group context to render `:id="groupContext.id"`, wiring the group to its label for screen readers. robonen's MenuGroup renders `:id="id"` (not aria-labelledby) and MenuLabel does NOT inject MenuGroupContext at all — it renders a bare Primitive with no id — so the group is never labelled by the label. The provided MenuGroupContext has no consumer.
+- 🔶 (edge-cases) Submenu does not auto-close when the parent menu closes, and the sub-menu's content element is never tracked. reka's MenuSub has `watchEffect` closing the sub when `parentMenuContext.open` is false (plus cleanup), and provides a reactive `content` ref + working `onContentChange`. robonen's MenuSub provides `content: shallowRef(null)` with a no-op `onContentChange: () => {}`, so `menuContext.content` for a submenu is permanently null (breaking any grace/positioning logic that reads sub content), and there is no parent-close watcher to dismiss orphaned submenus.
+- 🔶 (api-surface) Root and Sub support only controlled `open` (no uncontrolled/passive mode). reka's MenuRoot and MenuSub use `useVModel` (MenuSub with `defaultValue:false, passive` so it self-manages open state when no v-model is bound). robonen's MenuRoot/MenuSub use `open = openRef = toRef(() => open)` and only emit `update:open`; if the consumer does not bind v-model:open, the menu can never open because props.open stays at its default false.
+
+**Minor gaps (8):**
+- ▫️ (types) RadioGroup/RadioItem value is restricted to string. reka uses `AcceptableValue` (any serializable value) for MenuRadioGroup.modelValue and MenuRadioItem.value. robonen types both as `string`, so number/object radio values are not supported.
+- ▫️ (accessibility) MenuRadioGroup does not render through MenuGroup. reka's MenuRadioGroup extends MenuGroupProps and renders `<MenuGroup>`, inheriting the group role + label-id wiring. robonen's MenuRadioGroup renders a bare `Primitive role="group"` and never provides MenuGroupContext, so a MenuLabel inside a radio group cannot be associated.
+- ▫️ (accessibility) Modal content does not prevent focus from leaving the layer, and there is no disableOutsideScroll prop. reka's MenuRootContentModal uses `@focus-outside.prevent` so a modal menu keeps focus inside even on programmatic focus-outside; reka also exposes a `disableOutsideScroll` prop (modal passes true, nonmodal false). robonen's MenuRootContentModal forwards focus-outside without `.prevent` and has no disableOutsideScroll prop (it just calls useBodyScrollLock() unconditionally with no opt-out and no way for nonmodal to enable it).
+- ▫️ (edge-cases) Submenu keydown does not bubble-guard across portals. reka's MenuContentImpl and MenuSubContent both compute `isKeyDownInside = target.closest('[data-reka-menu-content]') === event.currentTarget` to ignore key events that bubble up from a nested submenu through the portal. robonen has no such guard, so a key handled in a submenu can be re-processed by the parent content's handleKeyDown (double navigation/typeahead).
+- ▫️ (edge-cases) Typeahead does not exclude input/textarea fields. reka's handleKeyDown computes `isKeyDownInTextField` and skips typeahead when typing in an input/textarea inside the menu (filter/combobox-in-menu support, also reflected in onItemEnter/onItemLeave checking INPUT/TEXTAREA active element). robonen's typeahead fires on any single character key with no text-field exclusion, so typing in a menu-embedded input also drives item typeahead.
+- ▫️ (code-quality) isMouseEvent precision. reka's isMouseEvent uses `event.pointerType === 'mouse'`, correctly excluding pen and touch from mouse-only hover logic. robonen's isMouseEvent checks `event.type` against mouse event names (mousedown/up/move/click) and elsewhere only negates `pointerType === 'touch'`, treating pen as mouse.
+- ▫️ (api-surface) CheckboxItem/RadioItem do not expose checked state via default slot. reka's MenuCheckboxItem/MenuRadioGroup expose `modelValue` as a slot prop (`<slot :model-value=...>`), letting consumers render based on state without re-reading. robonen's MenuCheckboxItem/MenuRadioItem render `<slot />` with no slot props.
+- ▫️ (code-quality) MenuItemImpl does not set inheritAttrs:false / forward fallthrough attrs explicitly. reka's MenuItemImpl declares `defineOptions({inheritAttrs:false})` and binds `v-bind="$attrs"` onto the Primitive, giving precise control of attribute placement (needed since it is wrapped by CheckboxItem/RadioItem/SubTrigger that add role/aria). robonen's MenuItemImpl relies on default attr fallthrough, which can mis-place attrs when wrappers add their own.
+
+**Recommendations to make robonen strictly better:**
+- Implement the submenu grace-area in MenuSubTrigger.handlePointerLeave: read menuCtx.content (which first requires fixing MenuSub to provide a real reactive content ref + working onContentChange), build the 5-point polygon from getBoundingClientRect() with a directional bleed, call onPointerGraceIntentChange({area, side}) and set pointerGraceTimerRef to a 300ms reset. Without callers, the existing grace plumbing in MenuContentImpl is dead code.
+- Add pointer-direction tracking to MenuContentImpl: @pointermove handler maintaining pointerDirRef/lastPointerXRef and an isPointerMovingToSubmenu(event) gate that requires both grace-area containment AND movement toward the submenu side; use it in onItemEnter/onItemLeave/onTriggerLeave.
+- Add a @keydown handler to MenuSubContent that on SUB_CLOSE_KEYS closes the submenu and refocuses the trigger (trigger.focus + scrollIntoView), and an @open-auto-focus.prevent that focuses the sub-content for keyboard users only. Currently ArrowLeft cannot return focus to the parent once inside a submenu.
+- In MenuContentImpl.handleKeyDown, when event.target === contentElement and the key is in FIRST_LAST_KEYS, preventDefault and focusFirst the items (reversed for LAST_KEYS) so opening via mouse + ArrowDown/Home/End moves focus into the list. Also add `if (event.key === 'Tab') event.preventDefault()` to trap Tab inside the menu.
+- Fix MenuSub: provide a real `content = shallowRef(null)` with a functional onContentChange, and add a watchEffect/watch to close the submenu when the parent menu closes (with cleanup), mirroring reka's parent-close protection.
+- Switch MenuRoot and MenuSub from emit-only `toRef(() => open)` to a controllable/uncontrolled model (useControllableState or useVModel with passive defaulting to false) so the menu works without an explicit v-model:open binding.
+- Add isTypingAhead Space guard to MenuItemImpl/MenuItem and MenuSubTrigger keydown (`if (isTypingAhead && key === ' ') return`) so Space extends type-ahead instead of selecting, and route Space through the typeahead path rather than activation while searching.
+- Add pointerdown/pointerup selection logic to MenuItem (isPointerDownRef + synthetic click on pointerup when pointer started elsewhere) to support drag-to-select across items and avoid the Firefox text-selection lock on close.
+- Fix Group/Label a11y: make MenuGroup render aria-labelledby=id and make MenuLabel inject MenuGroupContext to set its id; have MenuRadioGroup render through MenuGroup so radio groups get the same label wiring.
+- Widen MenuRadioGroup.modelValue and MenuRadioItem.value to AcceptableValue (not just string) to support non-string values.
+- Add isKeyDownInside (target.closest('[data-primitives-menu-content]') === currentTarget) guards in MenuContentImpl/MenuSubContent to stop submenu key events that bubble through portals from being double-processed, and add isKeyDownInTextField exclusion so embedded inputs don't trigger typeahead.
+- Expose modelValue/checked as default slot props on MenuCheckboxItem and MenuRadioItem/MenuRadioGroup; add `@focus-outside.prevent` to MenuRootContentModal and a `disableOutsideScroll` prop on MenuContentImpl for parity and opt-out control; tighten isMouseEvent to pointerType==='mouse'; and set inheritAttrs:false + explicit v-bind=$attrs on MenuItemImpl.
+
+**Where robonen is already better:**
+- ✅ MenuItem select composition uses a real DOM CustomEvent dispatched on the item element (MenuItem.vue handleSelect dispatches `new CustomEvent(ITEM_SELECT, {bubbles:true,cancelable:true})` on currentTarget), so the ITEM_SELECT event genuinely bubbles through the DOM tree and any ancestor listener can preventDefault to keep the menu open. reka only emits the CustomEvent to the Vue `select` emit and awaits nextTick, so the event never actually traverses the DOM.
+- ✅ Architecturally relies on a dedicated RovingFocusGroup/RovingFocusItem (roving tabindex managed declaratively with `tabindex` toggling, `onItemShiftTab`, focusable-item counting) instead of reka's imperative useArrowNavigation scanning `[data-reka-collection-item]` on every keystroke; the roving model keeps a real DOM tab order and shift+Tab-out handling that reka's content-level approach implements ad hoc.
+- ✅ Type-ahead match reads an explicit `data-primitive-menu-item-text-value` data attribute set from the `textValue` prop on every item (MenuItemImpl + getNextMatch), giving deterministic typeahead text even for complex/icon content without depending on a Collection value object.
+- ✅ focusFirst (utils.ts) snapshots `getActiveElement()` before each candidate via `preventScroll: true`, avoiding scroll jumps when programmatically focusing items; reka's focusFirst calls plain `candidate.focus()` without preventScroll.
+
+
+### tabs  —  _reka-better_
+
+**Parts reka has that robonen lacks:** TabsIndicator (animated active-tab indicator via CSS vars + ResizeObserver)
+
+robonen Tabs is a clean, self-contained implementation (Root/List/Trigger/Content) with good DOM-order navigation via its Collection primitive, real root-level `disabled` gating, root-owned loop/orientation/dir context, and lean toRef passthroughs. However it is NOT yet strictly better than reka-ui and currently regresses on two critical axes. Accessibility: it emits no id/aria-controls on triggers and no id/aria-labelledby on panels, so screen readers cannot link a tab to its panel (reka does this via makeTriggerId/makeContentId + a contentIds registry that even suppresses aria-controls when no panel exists). Keyboard: there is no Enter/Space activation path at all (TabsTrigger has no enter/space handler and rovingKeyToAction ignores them), which makes activationMode='manual' unusable from the keyboard. Beyond these, reka adds a TabsIndicator part, Presence-based exit animations + unmountOnHide + mount-animation suppression, ConfigProvider dir inheritance (robonen ignores its own config-provider dir), PageUp/PageDown navigation, StringOrNumber generic value typing, guarded mousedown.left activation (ctrl-click defense), and group entry-focus management. robonen has no sub-components or features reka lacks. Verdict: reka-better until the critical a11y wiring and Enter/Space activation are added; the indicator, presence/unmountOnHide, dir inheritance, and generic value type close the remaining gaps.
+
+**Critical gaps:**
+- ⛔ (accessibility) No ARIA relationship wiring between triggers and panels. reka generates stable ids (utils.ts makeTriggerId/makeContentId), sets `:id=triggerId` + `:aria-controls=contentId` on TabsTrigger and `:id=contentId` + `:aria-labelledby=triggerId` on TabsContent, and only emits aria-controls when a matching panel is registered (rootContext.contentIds + registerContent/unregisterContent). robonen TabsTrigger has NO id and NO aria-controls; TabsContent has NO id and NO aria-labelledby. Screen readers cannot associate a tab with its panel.
+  - _evidence:_ reka Tabs/utils.ts + TabsTrigger.vue lines 29-30,42-50 (aria-controls/id) + TabsContent.vue lines 28-29,53-61 (id/aria-labelledby) + TabsRoot.vue contentIds/registerContent. robonen TabsTrigger.vue and TabsContent.vue emit neither id nor aria-controls nor aria-labelledby.
+- ⛔ (keyboard) Keyboard activation (Enter/Space) on a focused trigger is not implemented. reka TabsTrigger has `@keydown.enter.space="rootContext.changeModelValue(value)"`. robonen TabsTrigger only has `@keydown` delegating to ctx.onTriggerKeyDown, and onTriggerKeyDown (TabsRoot.vue rovingKeyToAction) returns null for Enter/Space, so it does nothing. In `activationMode='manual'` a keyboard user can move focus with arrows but CANNOT activate the focused tab via Enter or Space — manual mode is effectively unusable by keyboard.
+  - _evidence:_ reka TabsTrigger.vue line 65 `@keydown.enter.space`. robonen TabsTrigger.vue lines 33-36 only forward to onTriggerKeyDown; src/utils/roving-focus.ts rovingKeyToAction has no Enter/Space case (default: return null).
+
+**Major gaps:**
+- 🔶 (features) No TabsIndicator sub-component. reka ships TabsIndicator.vue which tracks the active tab via ResizeObserver/watchPostEffect and exposes `--reka-tabs-indicator-size` and `--reka-tabs-indicator-position` CSS vars (plus an exposed updateIndicatorStyle method) for animated underlines. robonen has no indicator part at all.
+- 🔶 (features) No exit-animation / Presence support on content. reka wraps TabsContent in `<Presence force-mount>` so panels can play leave transitions before unmount and respects `unmountOnHide` for slot rendering; it also suppresses the mount animation on first render via isMountAnimationPreventedRef + `animationDuration:'0s'`. robonen TabsContent uses a raw `v-if="forceMount || isSelected"`, so inactive panels are removed immediately with no exit animation and no mount-animation guard.
+- 🔶 (api-surface) No `unmountOnHide` prop. reka TabsRoot exposes `unmountOnHide` (default true) and TabsContent uses it to decide whether the slot stays rendered while hidden (forceMount keeps the element but unmountOnHide controls slot content). robonen only has the per-panel `forceMount` boolean and always renders slot content when mounted; there is no way to keep an element mounted (hidden) while still tearing down its slot subtree, nor a root-level toggle.
+- 🔶 (rtl-i18n) dir does not inherit from a global ConfigProvider. reka resolves direction with `useDirection(propDir)` so it falls back to the ConfigProvider/global dir when the prop is omitted. robonen TabsRoot hardcodes `dir = 'ltr'` default and never consults useConfig()/ConfigContext, despite robonen HAVING a config-provider with a reactive `dir`. RTL apps using ConfigProvider get LTR tab navigation unless dir is repeated on every TabsRoot.
+
+**Minor gaps (6):**
+- ▫️ (keyboard) PageUp/PageDown navigation not handled. reka RovingFocus MAP_KEY_TO_FOCUS_INTENT maps PageUp->first and PageDown->last (used by Tabs via RovingFocusGroup). robonen rovingKeyToAction only handles Arrow/Home/End and returns null for PageUp/PageDown.
+- ▫️ (types) value type is narrower. reka TabsRoot/Trigger/Content are generic over `T extends StringOrNumber` (string | number) with the v-model payload typed as T. robonen types value as `string` only (TabsRootProps.defaultValue: string, defineModel<string|undefined>, TabsTriggerProps.value: string), so numeric tab values are not first-class and the model is not generically inferred.
+- ▫️ (keyboard) No entry-focus / group-tabindex management when tabbing INTO the tablist. reka RovingFocusGroup toggles the group tabindex (0/-1) and on focus dispatches an entryFocus event then focuses the active/highlighted/current item (handleFocus + focusFirst), with `preventScrollOnEntryFocus` and shift+Tab tab-out tracking. robonen sets per-trigger roving tabindex (selected=0 else -1) which covers the common case, but has no group-level entry focus, no preventScrollOnEntryFocus, and no shift+Tab 'tab back out' handling.
+- ▫️ (edge-cases) Pointer activation uses click, not guarded mousedown. reka activates on `@mousedown.left` and explicitly guards ctrlKey (avoids MacOS ctrl-click context menu accidentally activating) and calls event.preventDefault() to avoid accidental activation for disabled. robonen uses `@click` with no ctrl-click guard; activation therefore fires later (on click) and does not defend against ctrl+left-click.
+- ▫️ (accessibility) focusFirst scroll-fallback behavior absent. reka focusFirst iterates candidate nodes and supports `{ preventScroll }`, bailing when focus already on target and trying the next candidate if focus did not move (e.g. element became unfocusable). robonen just calls `target.focus()` on the single resolved index with no preventScroll and no fallback if that element refuses focus.
+- ▫️ (edge-cases) Root keydown still navigates focus even when root is disabled. robonen onTriggerKeyDown does not check ctx.disabled, so with `disabled: true` on root, Arrow keys still move focus between triggers (only selection is blocked). reka's disabled handling is per-item via RovingFocus focusable, keeping disabled items out of the candidate set consistently. Minor because robonen does filter [data-disabled] items, but a fully-disabled root should arguably not roam focus.
+
+**Recommendations to make robonen strictly better:**
+- Add ARIA wiring: generate stable ids (e.g. via config-provider useId) for triggers and panels; set id+aria-controls on TabsTrigger and id+aria-labelledby on TabsContent. Mirror reka's contentIds registry (registerContent/unregisterContent in TabsRoot) so aria-controls is only emitted when a matching TabsContent is mounted (reka covers this exact case in Tabs.test.ts).
+- Implement Enter/Space activation on TabsTrigger (add `@keydown.enter.space` calling ctx.select(value), or add Enter/Space handling to onTriggerKeyDown). Without it, activationMode='manual' is broken for keyboard users.
+- Add a TabsIndicator sub-component exposing --robonen-tabs-indicator-size/position CSS vars, tracking the active tab via ResizeObserver, with an exposed updateIndicatorStyle() method (port reka TabsIndicator.vue).
+- Wrap TabsContent in the existing Presence primitive (src/presence) and add an `unmountOnHide` prop on TabsRoot so panels can play exit animations and optionally keep elements mounted-but-hidden; add a mount-animation guard (animationDuration:'0s' on first frame) like reka's isMountAnimationPreventedRef.
+- Inherit direction from ConfigProvider: in TabsRoot resolve `dir` via useConfig().dir when the dir prop is omitted (robonen already has config-provider/context.ts with a reactive dir).
+- Extend rovingKeyToAction to map PageUp->home and PageDown->end (and consider Enter/Space) so Tabs gets PageUp/PageDown navigation for free.
+- Make the components generic over `T extends string | number` (StringOrNumber) for value/defaultValue/model to support numeric tab values and proper v-model inference.
+- Add guarded pointer activation: switch TabsTrigger to `@mousedown.left` with an `event.ctrlKey === false` guard (and preventDefault on disabled) to match reka and avoid ctrl-click activation on macOS.
+- Optionally add group entry-focus behavior (focus the active/highlighted item when Tab enters the tablist, preventScrollOnEntryFocus, shift+Tab tab-out) — robonen already has a roving-focus/ RovingFocusGroup that could be reused by TabsList instead of the hand-rolled root keydown.
+- Guard onTriggerKeyDown with `if (disabled) return` so a fully disabled root does not roam focus; and use a focusFirst-style helper with {preventScroll} and a next-candidate fallback when the target refuses focus.
+
+**Where robonen is already better:**
+- ✅ DOM-order navigation via Collection: TabsRoot derives `tabElements` from `useCollectionProvider().getItems(true)` and filters `[data-disabled]` at keydown time, so reordered/portaled triggers and dynamic disabled state are handled from live DOM order. reka relies on RovingFocus + Collection too, but robonen keeps it self-contained without the extra RovingFocus indirection.
+- ✅ Keyboard handler centralized in TabsRoot.onTriggerKeyDown with explicit `resolveNextIndex(... , loop)` clamp-vs-wrap logic and a single source of truth, vs reka splitting logic across RovingFocusGroup/RovingFocusItem/utils.
+- ✅ Root-level `disabled` prop genuinely gates selection (`select()` early-returns when `ctx.disabled`) and merges into each trigger's `isDisabled`/`data-disabled`; reka Tabs has no root-level `disabled` prop at all (only per-trigger disabled).
+- ✅ `loop` is configured on TabsRoot (root-owned) and threaded through context; reka places `loop` on TabsList only, which is arguably less discoverable.
+- ✅ Uses `toRef(() => prop)` identity passthroughs for orientation/dir/loop/disabled/activationMode instead of `computed`, avoiding effect/cache overhead for plain pass-throughs.
+
+
+### toolbar  —  _reka-better_
+
+**Parts reka has that robonen lacks:** ToolbarLink, ToolbarToggleGroup, ToolbarToggleItem
+
+reka-ui's Toolbar is currently more complete and more correct than robonen's. Sub-component coverage: reka ships ToolbarLink, ToolbarToggleGroup, and ToolbarToggleItem in addition to Root/Button/Separator; robonen has only Root/Button/Separator and exports no integration for its existing toggle-group, and naive nesting would create two competing roving controllers. Critically, robonen's arrow navigation does not skip disabled items (it builds the item list with includeDisabled=true and calls .focus() on disabled buttons, which silently fails and traps focus) - robonen's own ToggleGroupRoot already filters disabled, so the toolbar simply omitted it. robonen is also missing PageUp/PageDown navigation, Shift+Tab tab-back-out tracking + group entry-focus (so a toolbar with all-disabled items can fall out of the tab order entirely), modifier-key and event.target guards, preventScrollOnEntryFocus, ConfigProvider dir inheritance, controlled current-tab-stop, and ToolbarLink's Space-to-click. robonen does have genuine wins: its ToolbarSeparator auto-inverts orientation (horizontal toolbar -> vertical separator) whereas reka passes orientation straight through, and its standalone Separator (not yet reused by the toolbar) already supports decorative + conditional aria-orientation. Verdict: reka-better; the disabled-skip bug is the highest-priority fix, followed by adding the missing toggle/link parts and the group-level focus/tab-out semantics.
+
+**Critical gaps:**
+- ⛔ (keyboard) robonen arrow navigation does NOT skip disabled items and will silently fail to move focus when the next item is disabled. ToolbarRoot builds `items = getItems(true)` (includeDisabled=TRUE), and onItemKeyDown/focusIndex operate over that full list with no data-disabled filter, then call el.focus() on a disabled <button> which cannot receive focus, so focus stays stuck. Reka's RovingFocusItem.handleKeydown filters `getItems().map(i => i.ref).filter(i => i.dataset.disabled !== '')` before navigating. robonen's own ToggleGroupRoot DOES filter (`items.value.filter(x => !x.hasAttribute('data-disabled'))`) - the Toolbar simply forgot to.
+  - _evidence:_ reka RovingFocusItem.vue line 68 `.filter(i => i.dataset.disabled !== '')`; robonen ToolbarRoot.vue line 27 `getItems(true)` + lines 39-48 onItemKeyDown have no disabled filter, contrast robonen ToggleGroupRoot.vue line 106
+
+**Major gaps:**
+- 🔶 (keyboard) Missing PageUp/PageDown keys. Reka maps PageUp->'first' and PageDown->'last' (MAP_KEY_TO_FOCUS_INTENT), so they jump to first/last item. robonen's rovingKeyToAction only handles Arrow*/Home/End and returns null for PageUp/PageDown.
+- 🔶 (features) No ToolbarToggleGroup / ToolbarToggleItem sub-components. Reka ships both, wrapping ToggleGroupRoot/ToggleGroupItem with `:roving-focus="false"` so the toolbar's roving group owns navigation while toggle single|multiple v-model still works. robonen has a standalone toggle-group primitive but the toolbar exports nothing to integrate it, and naively nesting robonen's ToggleGroupRoot inside ToolbarRoot would create TWO competing roving-focus controllers (both register their own Collection + arrow handlers), breaking navigation.
+- 🔶 (features) No ToolbarLink sub-component. Reka ToolbarLink renders an <a> as a roving item AND adds Space-to-click behavior (`if (event.key === ' ') currentTarget.click()`) because anchors don't activate on Space natively. robonen has no Link part, so toolbar links lose roving participation and Space activation.
+- 🔶 (keyboard) No Shift+Tab tab-back-out handling and no group-level entry tabindex. Reka's RovingFocusGroup tracks isTabbingBackOut (set by RovingFocusItem on Shift+Tab) and renders the GROUP element with `:tabindex="isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0"`, plus an @focus entry-focus handler that focuses the active/highlighted/current candidate via focusFirst. robonen ToolbarRoot has no group tabindex, no entryFocus, no Shift+Tab tracking.
+- 🔶 (accessibility) Toolbar can become unreachable when the active item is disabled or all items are disabled. Reka keeps the group focusable (tabindex 0 with entry focus to first enabled item) and filters disabled from candidates. robonen pins tabindex=0 to the isActive item only; if that item is disabled it renders tabindex=-1, so the toolbar can have ZERO tabbable elements and drop out of the tab sequence with no fallback.
+
+**Minor gaps (7):**
+- ▫️ (accessibility) Separator: no `decorative` prop and always emits aria-orientation even for horizontal. Reka routes through BaseSeparator which supports decorative (role='none', removed from a11y tree) and only sets aria-orientation when vertical (horizontal is the ARIA default). robonen ToolbarSeparator hardcodes role="separator" and always renders :aria-orientation. robonen's OWN standalone Separator.vue already does both correctly - the toolbar separator just doesn't reuse it.
+- ▫️ (keyboard) No modifier-key guard. Reka RovingFocusItem ignores arrow nav when metaKey/ctrlKey/altKey (or shiftKey unless allowShiftKey) is held: `if (event.metaKey || event.ctrlKey || event.altKey || (props.allowShiftKey ? false : event.shiftKey)) return`. robonen calls preventDefault and navigates on any matching arrow key regardless of modifiers, hijacking e.g. Ctrl+Home.
+- ▫️ (keyboard) No `event.target === event.currentTarget` guard before handling keys. Reka RovingFocusItem returns early if the keydown originated from a descendant (lines 55-56), so keys typed inside a nested input aren't hijacked for roving. robonen ToolbarButton.onKeyDown forwards every keydown to ctx regardless of target.
+- ▫️ (edge-cases) No preventScrollOnEntryFocus; focus uses default scroll behavior. Reka exposes preventScrollOnEntryFocus and calls `.focus({ preventScroll })` via focusFirst. robonen focusIndex calls plain el.focus() with no preventScroll option and no prop to control it.
+- ▫️ (api-surface) No currentTabStopId v-model / defaultCurrentTabStopId / entryFocus emit. Reka's RovingFocusGroup supports controlled+uncontrolled current tab stop and emits entryFocus. robonen toolbar exposes no way to control or observe which item currently holds the tab stop.
+- ▫️ (api-surface) ToolbarButton does not forward arbitrary PrimitiveProps/asChild as deliberately as reka. Reka ToolbarButton does `v-bind="props"` spreading all PrimitiveProps (incl. asChild) onto the Primitive; robonen ToolbarButton only wires as/type/tabindex/disabled/data-disabled, so the asChild composition pattern reka relies on for ToolbarToggleItem is not surfaced.
+- ▫️ (rtl-i18n) No ConfigProvider/global dir inheritance. Reka resolves dir via useDirection(propDir) which falls back to the global ConfigProvider direction when dir is omitted. robonen takes dir only as a local prop defaulting to 'ltr', so app-wide RTL config won't reach the toolbar automatically.
+
+**Recommendations to make robonen strictly better:**
+- Filter disabled items out of roving navigation: in ToolbarRoot use `getItems()` (which already drops data-disabled) for the navigable list, or filter `items.value.filter(el => el.dataset.disabled !== '')` inside onItemKeyDown before computing the next index - mirror what robonen's own ToggleGroupRoot already does. This fixes the critical 'focus stuck on disabled' bug.
+- Add PageUp/PageDown to rovingKeyToAction: map PageUp -> {absolute:'home'} and PageDown -> {absolute:'end'} so the shared util matches reka (also benefits ToggleGroup/RadioGroup reusing it).
+- Add a ToolbarLink component (default as:'a', participates in roving as a Collection item, with a keydown handler `if (e.key === ' ') currentTarget.click()` to give anchors Space activation).
+- Add ToolbarToggleGroup + ToolbarToggleItem that wrap robonen's existing ToggleGroupRoot/ToggleGroupItem with roving-focus=false (forwarding orientation/dir from toolbar context), so toggle state works without spawning a second competing roving controller; wrap ToolbarToggleItem as-child so it joins the toolbar's Collection.
+- Make the toolbar reachable when items are disabled: track focusableItemsCount and isTabbingBackOut at Root, render group tabindex=`(tabbingBackOut || focusableCount===0) ? -1 : 0`, add an entry-focus handler that focuses the first enabled/active/current item, and re-point the active tab stop to the first ENABLED item rather than a fixed index 0.
+- Add modifier-key and target guards in keydown: bail when metaKey/ctrlKey/altKey (and shiftKey unless an allowShiftKey opt) is held, and when `event.target !== event.currentTarget`, so nested inputs and browser shortcuts aren't hijacked.
+- Reuse robonen's own Separator.vue (already supports decorative + conditional aria-orientation) for ToolbarSeparator while keeping the orientation auto-inversion, adding a decorative prop, and omitting aria-orientation when horizontal.
+- Add preventScrollOnEntryFocus and call el.focus({ preventScroll }); consider exposing controlled/uncontrolled current tab stop (modelValue) and an entryFocus emit for parity with reka's RovingFocusGroup.
+- Resolve dir through ConfigProvider (a useDirection equivalent) instead of a hardcoded 'ltr' default so global RTL config propagates.
+- Support asChild on ToolbarButton (and document the pattern) so consumers can compose custom interactive elements, matching reka's v-bind=props + as-child usage required by ToolbarToggleItem.
+
+**Where robonen is already better:**
+- ✅ Separator orientation auto-inversion: robonen ToolbarSeparator computes `effective = orientation ?? (ctx.orientation === 'horizontal' ? 'vertical' : 'horizontal')`, so a horizontal toolbar yields a vertical separator automatically. Reka's ToolbarSeparator passes `rootContext.orientation.value` straight through to BaseSeparator (NO inversion), so a horizontal reka toolbar renders a horizontal separator with aria-orientation matching the toolbar axis, which is less correct visually/semantically. Genuine robonen correctness win.
+- ✅ `toRef`-based context passthroughs (`toRef(() => orientation)`) avoid the extra effect/cache overhead of `computed`, a minor reactivity-perf nicety over reka's `toRefs(props)`.
+- ✅ robonen keeps the roving math in a small pure, testable util (`resolveNextIndex`, `rovingKeyToAction`) rather than reka's per-keystroke array reverse + `wrapArray` slicing; slightly cheaper per keydown (no array clone/reverse).
+- ✅ robonen ToolbarButton sets `data-disabled=''` and correct aria/tabindex for the active roving item, matching reka conventions.
+
+
+### checkbox  —  _reka-better_
+
+**Parts reka has that robonen lacks:** CheckboxGroupRoot.vue — multi-checkbox group with array model, roving-focus keyboard nav, group-level disabled/name/required, utils.ts — shared isIndeterminate/getState helpers (robonen inlines this logic in both components, duplicated)
+
+reka-ui's Checkbox is a meaningfully larger primitive: it ships a full CheckboxGroupRoot with array v-model and roving-focus keyboard navigation, generic value typing via trueValue/falseValue, Presence-backed indicator exit animations, SSR-safe form-control gating, native-event-dispatching hidden inputs (VisuallyHiddenInput), and auto aria-label derivation from associated labels. robonen's Checkbox covers only the standalone single-boolean case competently (correct role/aria-checked=mixed/data-state, controlled+uncontrolled via defineModel, defaultChecked, disabled, Enter-preventDefault, hidden input for name, and forceMount prop) and is slightly leaner in reactivity for that case, but it is missing the group component, roving focus, arbitrary value modeling, working exit animations, SSR/form-event fidelity, and label-based aria-label. Notably robonen already owns RovingFocusGroup, Presence, and VisuallyHidden primitives but does not wire any of them into Checkbox. Verdict: reka-better; closing the listed gaps (especially CheckboxGroupRoot + roving focus, trueValue/falseValue, and Presence in the indicator) would move robonen to parity or better.
+
+**Critical gaps:**
+- ⛔ (features) No CheckboxGroupRoot component at all. reka ships CheckboxGroupRoot.vue providing a v-model array of selected values, group-level disabled, name, required, and roving-focus wiring (injectCheckboxGroupRootContext). robonen has zero group concept, so consumers cannot build a managed checkbox group with shared state/keyboard nav.
+  - _evidence:_ reka CheckboxGroupRoot.vue (provideCheckboxGroupRootContext with modelValue: Ref<AcceptableValue[]>, rovingFocus, disabled); CheckboxRoot.vue lines 80-122 read checkboxGroupContext to push/splice into the array. robonen/checkbox has no CheckboxGroupRoot file or context.
+
+**Major gaps:**
+- 🔶 (keyboard) No roving-focus / arrow-key navigation. In a group, reka renders RovingFocusItem instead of Primitive (CheckboxRoot.vue line 138, :focusable bound at line 151) inside RovingFocusGroup, giving ArrowLeft/Right/Up/Down, Home/End, loop, and dir/RTL-aware navigation. robonen's checkbox is always a standalone Primitive with no roving focus, so a set of robonen checkboxes has no managed arrow-key traversal even though robonen HAS a RovingFocusGroup/RovingFocusItem primitive available it could wire in.
+- 🔶 (api-surface) No trueValue/falseValue and no generic value typing. reka's CheckboxRoot is generic <T = boolean> with trueValue/falseValue (props lines 27-31, defaults lines 64-65) so v-model can hold arbitrary values (e.g. 'yes'/'no', objects) using isEqual comparison (line 89). robonen hardcodes CheckedState = boolean | 'indeterminate' and toggles only true/false; the `value` prop is merely the hidden-input value, never the model value.
+- 🔶 (features) Indicator does not use Presence, so the documented forceMount-for-exit-animations use case does not actually work. reka wraps the indicator in <Presence :present=...> (CheckboxIndicator.vue lines 29-31) enabling enter/exit animation hooks; robonen uses a bare `v-if` (CheckboxIndicator.vue line 25), which unmounts instantly with no exit animation, even though robonen ships a Presence primitive and even though its forceMount prop's JSDoc says 'for CSS exit animations'.
+- 🔶 (forms) Hidden form input does not emit native input/change events on programmatic value change, so listeners on the hidden input / some form libraries relying on real DOM events will not fire. reka's VisuallyHiddenInputBubble dispatches bubbling input+change Events via the native value setter when the value changes (watch in VisuallyHiddenInputBubble.vue). robonen binds :checked declaratively only.
+
+**Minor gaps (6):**
+- ▫️ (ssr) No SSR-safe form-control gating. reka uses useFormControl(currentElement) which returns true during SSR and only renders the hidden input when inside a <form> (CheckboxRoot.vue line 163, useFormControl defaults true so events bubble without JS on SSR). robonen renders the hidden input whenever `name` is set regardless of being in a form, and has no SSR-aware default — minor functional divergence and a stray hidden input outside forms.
+- ▫️ (accessibility) No automatic aria-label derivation from an associated label. reka derives aria-label from document.querySelector(`[for="${id}"]`).innerText when an id is provided (CheckboxRoot.vue lines 125-127, bound line 147), improving SR naming when a visual <label for> is used. robonen has no id prop and no aria-label wiring.
+- ▫️ (api-surface) No `id` prop on the root. reka exposes id (props line 23) and binds it (template line 140), which both anchors the aria-label lookup and gives a stable hook for external <label for>. robonen's CheckboxRoot has no id prop (relies entirely on fall-through attrs).
+- ▫️ (types) `value` prop is narrowly typed to string. reka types value as AcceptableValue (string | number | boolean | Record | null) (props line 21) and the hidden input serializes arrays/objects/required-empty-arrays via VisuallyHiddenInput. robonen types value?: string only and cannot serialize non-string values.
+- ▫️ (api-surface) Slot contract is thinner. reka's default slot exposes both modelValue and state (defineSlots lines 69-76; provided at template lines 157-160). robonen exposes only `checked` (CheckboxRoot.vue line 85, CheckboxIndicator line 30). With trueValue/falseValue, reka's modelValue slot prop is meaningfully distinct from state; robonen cannot express that.
+- ▫️ (code-quality) Duplicated indeterminate/state logic instead of shared util. reka centralizes isIndeterminate/getState in utils.ts and reuses across Root + Indicator. robonen inlines the same ternary in CheckboxRoot.vue (lines 76,79) and CheckboxIndicator.vue (line 26), risking drift.
+
+**Recommendations to make robonen strictly better:**
+- Add a CheckboxGroupRoot component mirroring reka: provide a group context with an array modelValue (v-model), group-level disabled/name/required, and rovingFocus toggle; have CheckboxRoot inject it and, when present, render robonen's existing RovingFocusItem instead of Primitive (wrapped by RovingFocusGroup in the group root) to get arrow/Home/End/loop/RTL navigation for free.
+- Make CheckboxRoot generic over the value type and add trueValue/falseValue props (defaults true/false) so v-model can hold arbitrary values; use a structural-equality helper (or shallow compare) to derive isChecked and toggle between trueValue/falseValue, with 'indeterminate' -> trueValue on click as reka does.
+- Wrap CheckboxIndicator's content in robonen's Presence component (present = forceMount || checked is indeterminate || checked === true) so the existing forceMount prop actually enables CSS exit animations, instead of the current instant-unmount v-if.
+- Replace the inline hidden <input> with robonen's VisuallyHidden as=input (or a VisuallyHiddenInput-style helper) that dispatches native bubbling input+change events on value change via the native value setter, and gate it behind an SSR-safe useFormControl(currentElement) check (default true on SSR; otherwise el.closest('form')).
+- Add aria-label auto-derivation: accept an id prop, bind it on the root, and compute aria-label from document.querySelector(`[for=id]`).innerText when no explicit aria-label is supplied (guard for SSR).
+- Widen the value prop type to an AcceptableValue equivalent and serialize array/object/required-empty values in the hidden input the way reka's VisuallyHiddenInput does.
+- Extract isIndeterminate/getState into a checkbox utils.ts and reuse in Root + Indicator to remove the duplicated state ternaries.
+- Expand the default slot to expose both modelValue and state (not just checked) to match reka's richer slot contract, especially once trueValue/falseValue land.
+
+**Where robonen is already better:**
+- ✅ No runtime dependency on ohash isEqual for the common boolean case; robonen's toggle is a plain boolean flip, so it is lighter when only boolean checkboxes are used.
+- ✅ Micro-optimization: provides disabled via toRef(() => disabled) instead of a computed, and forwards the existing localChecked Ref directly to context without an extra computed wrapper (CheckboxRoot.vue lines 60-65) — slightly fewer reactive effects than reka's two computeds (disabled, checkboxState).
+- ✅ Hidden input is rendered with a concrete inline style that visually hides without an extra component layer; the markup is simpler than reka's VisuallyHiddenInput -> VisuallyHiddenInputBubble -> VisuallyHidden chain for the trivial single-boolean case.
+
+
+### toggle-group  —  _reka-better_
+
+**Parts reka has that robonen lacks:** VisuallyHiddenInput (form-submission hidden input rendered by Root), Composed RovingFocusGroup/RovingFocusItem wrappers, Composed Toggle base component for items
+
+reka's ToggleGroup is currently better. Both cover the core single/multiple toggle behavior, click/Arrow/Home/End navigation, loop, orientation, disabled, RTL-aware Left/Right, controlled+uncontrolled state, and roving tab-stop. But reka is meaningfully ahead on: (1) native form integration via a VisuallyHiddenInput + useFormControl (robonen has none, package-wide) - critical; (2) AcceptableValue (string/number/bigint/object/null) with deep equality vs robonen's string-only identity comparison; (3) automatic single/multiple type inference + dev validation vs robonen's explicit-only, unsoundly-typed `type`; (4) inherited global `dir` from ConfigProvider; and (5) far deeper roving focus (PageUp/PageDown, modifier-key guards, Shift+Tab tab-out, entry-focus prioritization, Safari mousedown, group tabindex) because reka composes its RovingFocusGroup/RovingFocusItem and Toggle primitives. Ironically robonen already ships an equivalent RovingFocusGroup/RovingFocusItem and Toggle primitive but the toggle-group reimplements a thinner version inline and uses none of them. robonen is genuinely better in two narrow areas: it uses proper radiogroup/radio ARIA semantics for single-select (reka uses group + aria-pressed even in single mode), and it adds a convenience `valueChange` emit and a normalized array slot value. Closing the form, value-type, type-inference, dir-inheritance, and roving-focus gaps (largely by composing robonen's own existing primitives) would make it strictly better.
+
+**Critical gaps:**
+- ⛔ (forms) No form integration whatsoever. reka renders a VisuallyHiddenInput (gated by useFormControl) with the selected value(s) when `name` is set, so the toggle group participates in native form submission (including array-name encoding name[0], name[1] and a required-empty-array fallback input). robonen's ToggleGroupRootProps has no `name`/`required` props, no hidden input, and there is no useFormControl/VisuallyHiddenInput utility anywhere in the primitives package.
+  - _evidence:_ reka ToggleGroupRoot.vue lines 96-101 render <VisuallyHiddenInput :name :required :value=modelValue> guarded by `isFormControl = useFormControl(currentElement)`; FormFieldProps adds name/required (shared/types.ts). robonen ToggleGroupRoot.vue has no name/required props and grep for useFormControl/VisuallyHiddenInput/closest('form') across src returns nothing.
+
+**Major gaps:**
+- 🔶 (api-surface) Values are restricted to `string` only and compared by identity. reka supports AcceptableValue = string | number | bigint | Record<string,any> | null for both single and multiple, and compares with deep `isEqual` (ohash) via isValueEqualOrExist, so object/number/bigint values and value-based equality work.
+- 🔶 (types) No automatic single/multiple type inference or coherence validation. reka infers `type` from whether modelValue/defaultValue is an array and emits dev-time errors when type and value shape disagree; robonen requires an explicit `type` prop (defaults to 'single') and performs no validation. Worse, robonen's typing lets `modelValue: string | string[]` be passed with type 'single', which silently breaks.
+- 🔶 (rtl-i18n) Global/inherited direction is ignored. reka resolves `dir` via useDirection(propDir) so it inherits from ConfigProvider when the prop is omitted; robonen hardcodes the default to 'ltr' and never consults useConfig().dir even though a config-provider with a reactive `dir` exists in the package.
+- 🔶 (code-quality) robonen does not reuse its own RovingFocusGroup/RovingFocusItem primitive (which already implements entry-focus, Shift+Tab, mousedown, PageUp/PageDown, modifier guards, data-active prioritization). The toggle-group reimplements a thinner roving algorithm inline, so it permanently lags the dedicated primitive. reka composes RovingFocusGroup/RovingFocusItem and gets all of that for free.
+
+**Minor gaps (6):**
+- ▫️ (keyboard) Keyboard navigation is missing PageUp/PageDown (jump to first/last). reka's RovingFocus maps PageUp->first and PageDown->last in MAP_KEY_TO_FOCUS_INTENT; robonen's inline rovingKeyToAction only handles Arrow keys + Home/End.
+- ▫️ (keyboard) Navigation does not guard against modifier keys, so Ctrl/Meta/Alt/Shift + Arrow still hijack focus and call preventDefault. reka returns early on event.metaKey/ctrlKey/altKey (and shiftKey unless allowShiftKey).
+- ▫️ (keyboard) No Shift+Tab tab-out handling or group-level entry focus. reka's RovingFocusGroup tracks isTabbingBackOut (onItemShiftTab) and sets the group container tabindex to -1 while tabbing out, plus an onEntryFocus mechanism that focuses the active/highlighted/current item with preventScrollOnEntryFocus support when focus enters the group. robonen has none of this — focus only moves between items, the group container is not part of the tab sequence, and there is no entry-focus prioritization.
+- ▫️ (edge-cases) Mousedown focus handling for Safari is absent. reka's RovingFocusItem focuses on mousedown (Safari does not focus buttons on click) and prevents focusing non-focusable items on mousedown; robonen's Item only has @click and @keydown.
+- ▫️ (code-quality) ToggleGroupItem is not composed from a Toggle primitive, so it does not inherit Toggle's slot props or future Toggle features. reka's item wraps the Toggle component and forwards its slot props (modelValue/state/pressed/disabled). robonen's item only exposes `:pressed` and reimplements the toggle button inline, duplicating logic and diverging from its own existing Toggle primitive.
+- ▫️ (edge-cases) The deep watch on modelValue does a manual shallow array diff and returns early when v is undefined, which means an external reset to undefined cannot clear the controlled value. reka uses useVModel (passive/deep) which correctly tracks controlled undefined and deep object changes.
+
+**Recommendations to make robonen strictly better:**
+- Add form integration: introduce `name`/`required` props (FormFieldProps-equivalent) on ToggleGroupRoot, a `useFormControl(currentElement)` composable (closest('form'), default true for SSR), and a VisuallyHiddenInput bubble component that emits the selected value(s) with array-name encoding and a required-empty fallback. Grab `currentElement` from useForwardExpose in the Root to feed useFormControl.
+- Generalize value type from `string` to an AcceptableValue (string | number | bigint | Record<string,any> | null) and replace identity comparisons (.includes / ===) with a deep-equality helper (port reka's isValueEqualOrExist + isEqual). Update ToggleGroupItemProps.value and the context value type accordingly.
+- Replace the explicit-only `type` with discriminated SingleOrMultipleProps<T> typing and add a useSingleOrMultipleValue-style composable that infers type from modelValue/defaultValue and logs dev-time coherence errors; this also fixes the unsound `modelValue: string | string[]` typing for single mode.
+- Consume the global direction: default `dir` to useConfig().dir (via a useDirection-style wrapper) instead of the hardcoded 'ltr' literal so RTL inherits from ConfigProvider.
+- Refactor ToggleGroupRoot/Item to compose the existing RovingFocusGroup/RovingFocusItem primitives (conditionally on `rovingFocus`) instead of the inline utils/roving-focus algorithm. This instantly adds PageUp/PageDown, modifier-key guards, Shift+Tab tab-out, entry-focus prioritization (data-active/highlighted/current), Safari mousedown focus, preventScrollOnEntryFocus, and group-level tabindex management, and removes duplicated logic.
+- Compose ToggleGroupItem from the existing Toggle primitive and forward its slot props (modelValue/state/pressed/disabled) so the item stays in sync with Toggle and exposes richer slot data.
+- Fix the controlled watch so an external reset of modelValue to undefined clears the value (do not early-return on undefined), and use deep equality when diffing object values.
+- Add PageUp/PageDown handling (and modifier-key guards) to utils/roving-focus.rovingKeyToAction if the inline path is retained instead of migrating to the primitive.
+
+**Where robonen is already better:**
+- ✅ Items are sourced from a real Collection (useCollectionProvider/getItems(true)) so DOM order survives v-for reorders, and the Root computes the enabled-items list once and reuses it for both navigation and tab-stop resolution. reka's RovingFocus also uses a Collection, so this is parity, but robonen keeps it self-contained without the extra RovingFocusGroup component overhead.
+- ✅ ToggleGroupRoot exposes a `valueChange` emit in addition to `update:modelValue`. reka only emits `update:modelValue` (ToggleGroupRoot.vue ToggleGroupRootEmits), so robonen gives consumers a dedicated change event without needing a watcher.
+- ✅ The Root default slot is given `:value="localValue"` (always the normalized string[] of selected values), and each Item slot receives `:pressed`. reka's Root slot gives `model-value` (raw) and the Item slot just forwards Toggle's slot props; robonen's normalized array slot is slightly more predictable to consume.
+- ✅ robonen sets `role="radiogroup"` on the Root and `role="radio"` for single-type items, which is the more semantically correct ARIA pattern for single-select. reka hardcodes `role="group"` on the Root for both single and multiple and relies on Toggle's `aria-pressed` even in single mode (no radio semantics), so robonen's single-mode accessibility semantics are actually better here.
+
+
+### number-field  —  _reka-better_
+
+**Parts reka has that robonen lacks:** VisuallyHiddenInput (form submission, rendered inside Root), usePressedHold composable (press-and-hold auto-repeat), useNumberFormatter / useNumberParser (Intl formatting/parsing), handleDecimalOperation (decimal-safe arithmetic), injectNumberFieldRootContext exported from index for external composition
+**Parts robonen has that reka lacks:** Exposed imperative methods (increment/decrement/setValue) on Root via defineExpose
+
+Both libraries ship the same four parts (Root, Input, Increment, Decrement) and cover core keyboard handling (Arrow/Page/Home/End) and ARIA spinbutton wiring. robonen is genuinely leaner in its reactivity model, exposes imperative methods on Root, and has a cleaner null empty-state contract. However reka-ui is currently materially ahead on substance: it has real form integration via a VisuallyHiddenInput plus name/required/id FormFieldProps; full Intl number formatting/parsing with locale and formatOptions; beforeinput keystroke validation; press-and-hold auto-repeat steppers; mouse-wheel support with invert/disable options; step snapping with decimal-safe arithmetic; at-boundary isIncrease/DecreaseDisabled with per-button disabled; commit-on-blur/Enter reformatting; focusOnChange; role='group'; labeled (not aria-hidden) stepper buttons; and proper Primitive/asChild polymorphism plus inheritAttrs handling. robonen also drops asChild on Root and hardcodes the Input as a literal <input>, and it hides the stepper buttons from assistive tech. Net: reka-better today, with a clear, concrete path to make robonen strictly better.
+
+
+**Major gaps:**
+- 🔶 (forms) No form integration / hidden input. reka renders <VisuallyHiddenInput> when isFormControl && name, submitting the value with the surrounding form. robonen's NumberFieldInput is the actual focusable spinbutton with role=spinbutton, type defaults to nothing/input — but it puts name/required on a role=spinbutton input, and there is NO hidden native number input for reliable form submission, and Root has no name/required/id FormFieldProps at all.
+- 🔶 (features) No internationalized number formatting/parsing. reka supports formatOptions: Intl.NumberFormatOptions and locale, using @internationalized/number NumberFormatter/NumberParser for currency, percent, grouping separators, decimal localization, and computing inputMode (numeric vs decimal) from resolved fraction digits.
+- 🔶 (edge-cases) No input validation on keystroke. reka uses @beforeinput with numberParser.isValidPartialNumber(nextValue, min, max) to reject invalid characters before they enter the field; robonen lets any text be typed and only nulls it out after the fact.
+- 🔶 (features) No press-and-hold auto-repeat on increment/decrement buttons. reka's usePressedHold repeats every 60ms after a 400ms initial delay while the pointer is held, and exposes data-pressed and userSelect:none. robonen buttons only fire once per click.
+- 🔶 (features) No mouse-wheel support. reka increments/decrements on wheel scroll when focused, with disableWheelChange and invertWheelChange props and trackpad axis-magnitude heuristics. robonen has no wheel handling.
+- 🔶 (edge-cases) No step snapping. reka snaps the value to the nearest valid step boundary (snapValueToStep) with a stepSnapping prop to disable it; robonen only clamps to min/max and never snaps off-grid values to the step grid.
+- 🔶 (edge-cases) Decimal-safe arithmetic missing. reka uses handleDecimalOperation to avoid floating-point drift (e.g. 0.1+0.2) when stepping and when computing isIncrease/DecreaseDisabled. robonen does base + delta directly, so step=0.1 accumulates 0.30000000000000004.
+- 🔶 (features) Increment/Decrement buttons cannot reflect at-boundary disabled state and have no per-button disabled prop. reka computes isIncreaseDisabled/isDecreaseDisabled (value at max/min) and accepts a local disabled prop, disabling the button and exposing data-disabled when the next step would exceed the bound. robonen buttons are only disabled by global disabled/readonly.
+- 🔶 (accessibility) Buttons are aria-hidden='true' in robonen, removing them entirely from the accessibility tree, whereas reka exposes them with aria-label='Increase'/'Decrease'. Hiding interactive controls from AT is worse for SR users who navigate by control.
+- 🔶 (api-surface) as-child not forwarded on Root in robonen. reka passes :as-child="asChild" to its Primitive; robonen Root passes :as only and never forwards asChild from PrimitiveProps, so polymorphic asChild rendering on the group is broken.
+- 🔶 (api-surface) Input/Increment/Decrement do not forward asChild either, and the Input is a hardcoded <input> element rather than Primitive, so as/asChild on the Input is ignored. reka's Input is a Primitive (as='input' default) supporting polymorphism.
+
+**Minor gaps (6):**
+- ▫️ (accessibility) Input is not natively focusable/tabbable with explicit tabindex=0, and lacks autocorrect/spellcheck/aria-roledescription. reka sets tabindex=0, autocorrect='off', spellcheck='false', aria-roledescription='Number field' for better SR/typing behavior.
+- ▫️ (accessibility) Root is missing role='group'. reka sets role='group' on the Root container so the spinbutton + buttons are exposed as a labeled group. robonen Root renders a bare Primitive with only data-* attributes.
+- ▫️ (edge-cases) No commit-on-blur / commit-on-Enter reformatting. reka calls applyInputValue on @change, @keydown.enter and @blur to re-clamp, snap, and reformat the displayed text; robonen commits live on every input and never reformats/snaps on blur.
+- ▫️ (keyboard) No focusOnChange behavior. reka refocuses the input when value changes via buttons (focusOnChange default true) so keyboard users keep context after clicking a stepper. robonen does not refocus.
+- ▫️ (edge-cases) contextmenu suppression on hold missing. reka adds @contextmenu.prevent on the stepper buttons so a long press does not pop the context menu mid-hold. robonen buttons have no such handler.
+- ▫️ (api-surface) Root does not forward $attrs with inheritAttrs:false, and Input does not v-bind merge external props cleanly. reka sets defineOptions({inheritAttrs:false}) and v-bind="$attrs" on Root so attrs land on the primitive group rather than being lost/duplicated. robonen Root uses default attr inheritance with a manual slot only.
+
+**Recommendations to make robonen strictly better:**
+- Render a VisuallyHiddenInput (robonen already has a VisuallyHidden component to build on) inside Root gated on form presence, and add name/required/id FormFieldProps to NumberFieldRoot so the value participates in native form submission; move name/required off the spinbutton input.
+- Add a usePressedHold-style composable (400ms initial, ~60ms repeat, pointerdown/up/cancel) to NumberFieldIncrement/Decrement, expose data-pressed and set userSelect:none while held, and add @contextmenu.prevent.
+- Add beforeinput validation that parses the prospective value and preventDefaults invalid characters, plus commit-on-blur and commit-on-Enter that re-clamp, snap, and reformat the display.
+- Introduce decimal-safe arithmetic (handleDecimalOperation equivalent) for increment/decrement and add snapValueToStep with a stepSnapping prop so values align to the step grid.
+- Compute isIncreaseDisabled/isDecreaseDisabled in Root (value at/over bound for next step), provide them via context, add a per-button disabled prop, and disable/data-disabled the buttons accordingly.
+- Add wheel support with disableWheelChange and invertWheelChange props and trackpad axis-magnitude heuristics on the input.
+- Add Intl number formatting/parsing: formatOptions and locale props, a textValue derived from a formatter, and derive inputmode (numeric vs decimal) from resolved maximumFractionDigits instead of hardcoding 'decimal'. Pair with a useLocale that respects RTL/dir from ConfigProvider.
+- Improve a11y: set role='group' on Root; stop aria-hidden on the stepper buttons and give them aria-label='Increase'/'Decrease' (configurable); add aria-roledescription='Number field', autocorrect='off', spellcheck='false', and explicit tabindex='0' on the input.
+- Make NumberFieldInput a Primitive (as default 'input') and forward asChild on Root/Input/Increment/Decrement; set inheritAttrs:false + v-bind=$attrs on Root so attrs land on the group.
+- Add focusOnChange (default true) so clicking the steppers returns focus to the input.
+
+**Where robonen is already better:**
+- ✅ Leaner reactivity: toRef identity passthroughs and a single guarded value ref, with no @vueuse/core useVModel dependency.
+- ✅ Exposes increment/decrement/setValue as an imperative API via defineExpose on Root (reka exposes nothing on its Root).
+- ✅ Deterministic null empty-state contract (number | null) instead of reka's undefined/NaN mixing.
+- ✅ Auto-generates and wires a stable inputId via useId so label association works without consumer-supplied id.
+- ✅ Root slot exposes increment/decrement action callbacks for render-prop consumers (reka exposes only modelValue/textValue/readonly).
+
+
+### radio-group  —  _reka-better_
+
+**Parts reka has that robonen lacks:** Radio.vue (standalone radio usable outside a group, with its own value/name/required/checked v-model + form input + select event)
+
+reka-ui's RadioGroup is currently more capable than robonen's on several real axes. Biggest gaps: (1) value typing — reka supports AcceptableValue (number/bigint/object/null with structural isEqual) while robonen is string-only with ===; (2) keyboard — reka handles PageUp/PageDown (first/last), robonen does not; (3) RTL/i18n — reka resolves dir via ConfigProvider (useDirection) while robonen hardcodes 'ltr' and ignores its own config-provider; (4) focus management — reka composes a battle-tested RovingFocusGroup/RovingFocusItem (entry-focus prioritization, Shift+Tab tab-out, Safari mousedown workaround) whereas robonen re-implements roving focus inline and does NOT reuse the RovingFocusGroup it already ships; (5) selection extensibility — reka emits a cancelable select event and routes selection through the element's native click (so change/click events fire), robonen calls setValue directly; (6) forms — reka uses VisuallyHiddenInput with synthetic input/change dispatch, useFormControl gating, and array/object serialization, while robonen renders a plain styled input with no change events and only when name is set; (7) Indicator animation — reka wraps in Presence, robonen uses bare v-if despite having Presence available; plus minor a11y gaps (group-level required not merged into items, no aria-label derivation, Enter not suppressed) and DX gaps (no exported context injectors, thinner defineSlots, no standalone Radio). robonen is genuinely better in a few places: modern defineModel v-model, group-level data-orientation and aria-disabled on the root, a flatter single-element item (no RovingFocusItem+Radio wrapping), and fewer runtime deps / no per-item global window listeners. Net verdict: reka-better until the gaps (especially value types, RovingFocusGroup reuse, dir/ConfigProvider, PageUp/Down, select event, and Presence indicator) are closed.
+
+
+**Major gaps:**
+- 🔶 (api-surface) reka supports non-string values (string | number | bigint | Record<string,any> | null via AcceptableValue) for both Root modelValue/defaultValue and Item value, using ohash isEqual for comparison. robonen hard-codes value: string on the Item and string|undefined on Root, so number/boolean/object option values are impossible.
+- 🔶 (keyboard) reka handles PageUp -> first and PageDown -> last keyboard navigation. robonen's roving-focus util (rovingKeyToAction) only maps ArrowUp/Down/Left/Right + Home/End and returns null for PageUp/PageDown, so those keys do nothing in robonen's RadioGroup.
+- 🔶 (rtl-i18n) reka's dir resolves through useDirection(propDir) which falls back to the global ConfigProvider dir; robonen's RadioGroupRoot hardcodes dir = 'ltr' default and never consults useConfig().dir, even though robonen HAS a config-provider exposing dir (and its own RovingFocusGroup already uses useConfig().dir). So an app-wide RTL ConfigProvider is ignored by RadioGroup.
+- 🔶 (api-surface) reka emits a cancelable 'select' CustomEvent (RADIO_SELECT) per item before checking, allowing consumers to preventDefault and block selection; robonen has no select emit/hook on RadioGroupItem at all.
+- 🔶 (forms) reka wires form integration through VisuallyHiddenInput which dispatches synthetic input/change events on value change (VisuallyHiddenInputBubble watch -> native setter + dispatch 'input'/'change'), enabling native form validation and event-driven listeners; it also supports array/object/required-empty value serialization. robonen renders a plain <input type=radio> via inline styles, mirrors value but dispatches no input/change events and cannot serialize non-primitive values.
+- 🔶 (features) reka's RadioGroupIndicator wraps content in <Presence> with the present prop, enabling exit/enter animations and forceMount-controlled animated unmount. robonen's RadioGroupIndicator uses a plain v-if (forceMount || item.checked.value) with no Presence, so it cannot animate the indicator out (it unmounts immediately) despite robonen having a Presence component available.
+- 🔶 (features) reka's roving focus is provided by a shared RovingFocusGroup/RovingFocusItem that handles entry-focus candidate prioritization (active/highlighted/current/first), Shift+Tab tabbing-out (isTabbingBackOut), focusableItemsCount-driven group tabindex, and a Safari mousedown focus workaround. robonen's RadioGroup re-implements roving focus inline (onItemKeyDown + isTabStop computed) and does NOT use its own RovingFocusGroup, so it lacks entry-focus prioritization, Shift+Tab tab-out handling, and the Safari mousedown focus workaround that reka inherits.
+
+**Minor gaps (9):**
+- ▫️ (accessibility) reka's RadioGroupItem.required = computed(() => rootContext.required.value || props.required) so the group-level required propagates to each radio's aria-required and the native input. robonen's RadioGroupItem applies only its own props.required (:aria-required="required || undefined") and never reads ctx.required, so a group-level required does NOT mark items as required for AT.
+- ▫️ (accessibility) reka computes an aria-label for the radio from an associated <label for=id> innerText when an id is provided (ariaLabel computed in Radio.vue), improving SR naming for icon-only radios. robonen has no aria-label derivation.
+- ▫️ (forms) reka guards the hidden form input behind useFormControl(currentElement) so it only renders when actually inside a <form> (and bubbles correctly under SSR); robonen renders the hidden input whenever name is set regardless of whether the group is inside a form, adding a stray focusable-by-name radio input to the document.
+- ▫️ (edge-cases) reka's RadioGroupItem only fires selection-on-focus when an arrow key actually drove the focus (isArrowKeyPressed gate + handleFocus -> click), and routes selection through the element's native .click() so the radio change/click event fires for downstream listeners. robonen's focusIndex calls setValue directly and never routes through the element's click, so arrow selection bypasses the native click/change pathway entirely.
+- ▫️ (features) reka provides a standalone Radio.vue component (a self-contained radio with its own value/name/required/checked v-model and form input) usable independently; robonen exposes no standalone Radio part — only Root/Item/Indicator.
+- ▫️ (code-quality) reka's RadioGroupIndicator and RadioGroupItem set inheritAttrs:false and forward $attrs onto the Primitive, giving precise attribute placement; robonen's RadioGroupIndicator/Item rely on default attr inheritance and do not declare inheritAttrs handling, which can mis-place attrs when the Primitive renders fragments or multiple roots.
+- ▫️ (api-surface) reka exposes injectRadioGroupRootContext and injectRadioGroupItemContext from the package index for advanced composition; robonen's context (provideRadioGroupContext/useRadioGroupContext, item context) is defined in context.ts but NOT re-exported from radio-group/index.ts, so consumers cannot build custom parts against the context.
+- ▫️ (types) reka declares typed defineSlots for Root (modelValue), Item (checked/required/disabled), and Indicator, giving full slot-prop type inference. robonen's Root slot exposes only value, Item slot exposes only checked, and neither declares defineSlots, so slot props are less typed and reka surfaces required/disabled to the item slot which robonen omits.
+- ▫️ (keyboard) reka's RadioGroupItem suppresses Enter from submitting/activating via @keydown.enter.prevent (radios should not respond to Enter per WAI-ARIA). robonen's RadioGroupItem has no Enter handling, so when as='button', pressing Enter triggers the native button click -> selection, which is non-conformant radio behavior.
+
+**Recommendations to make robonen strictly better:**
+- Generalize value types to an AcceptableValue-style union (string | number | bigint | boolean | Record<string,any> | null) on both RadioGroupRootProps (modelValue/defaultValue) and RadioGroupItemProps.value, and compare with a deep/structural equality helper instead of === so object and numeric option values work.
+- Add PageUp -> first and PageDown -> last to src/utils/roving-focus.ts rovingKeyToAction (return { delta: 0, absolute: 'home' } / 'end'), then they will flow through onItemKeyDown automatically.
+- Make RadioGroupRoot resolve dir via useConfig().dir as a fallback (toRef(() => dir ?? config.dir.value)) so a global ConfigProvider RTL setting is honored, matching the existing RovingFocusGroup behavior.
+- Refactor RadioGroupRoot/Item to compose the existing RovingFocusGroup + RovingFocusItem (as-child) instead of re-implementing roving focus inline; this gains entry-focus prioritization, Shift+Tab tab-out handling, focusableItemsCount group tabindex, PageUp/PageDown, and the Safari mousedown workaround for free.
+- Add a cancelable 'select' event to RadioGroupItem (emit before setValue, honor defaultPrevented) so consumers can intercept/veto selection.
+- Merge group-level required into each item: in RadioGroupItem compute required = ctx.required.value || props.required and use it for aria-required and the form input.
+- Add @keydown.enter.prevent (or explicit Enter no-op) to RadioGroupItem so Enter does not activate radios when as='button'.
+- Wrap RadioGroupIndicator content in the existing Presence component (:present="forceMount || item.checked.value") instead of v-if so the indicator can animate out.
+- Gate the hidden form input behind a useFormControl(currentElement)-style check so it only renders inside a <form>, and dispatch native input/change events (or reuse a VisuallyHiddenInput-style synthetic-setter approach) so native validation and change listeners fire; support non-primitive value serialization.
+- Add an optional id prop to RadioGroupItem and derive aria-label from an associated <label for=id> for icon-only radios, matching reka's Radio.vue.
+- Set inheritAttrs:false and forward $attrs in RadioGroupItem and RadioGroupIndicator for precise attribute placement.
+- Re-export the context injectors (useRadioGroupContext/useRadioGroupItemContext) and add defineSlots typing exposing checked/required/disabled (item) and modelValue (root) for advanced composition and better slot types.
+- Drop the redundant custom valueChange emit (or keep it but also document update:modelValue) — defineModel already emits update:modelValue; align the emits declaration so the public event surface is clear, and consider offering a standalone Radio part for use outside a group.
+
+**Where robonen is already better:**
+- ✅ Root uses defineModel<string|undefined>() for v-model, which is the modern idiomatic Vue 3.4+ API; reka still wires v-model manually through useVModel from @vueuse/core.
+- ✅ Root provides data-orientation on the radiogroup element (:data-orientation="orientation"); reka's RadioGroupRoot only sets data-orientation on items (via RovingFocusItem), not on the group element itself, so robonen gives more styling hooks at the group level.
+- ✅ Root sets aria-disabled on the radiogroup element when disabled; reka's RadioGroupRoot only emits data-disabled and never sets aria-disabled on the group (it relies on per-item disabled), so robonen exposes group-level disabled state to AT slightly better at the root.
+- ✅ Item sets data-disabled on the radio element itself (:data-disabled="isDisabled ? '' : undefined"); reka's RadioGroupItem delegates disabled rendering to the inner Radio.vue but the RovingFocusItem layer adds extra DOM/indirection — robonen keeps a flatter single-element structure (no wrapping RovingFocusItem + Radio split), which is less DOM and fewer components per item.
+- ✅ No external runtime dependency on ohash (isEqual) or @vueuse/core useVModel/useEventListener for core behavior; robonen's keydown handling is a single delegated handler rather than reka attaching global window keydown/keyup listeners per item (reka's RadioGroupItem registers useEventListener('keydown'/'keyup') on window for every item, which is O(n) global listeners).
+
+
+### aspect-ratio  —  _reka-better_
+
+
+Both expose a single AspectRatio component (no sub-parts) with the same `ratio` prop and identical wrapper/inner box technique (relative wrapper with paddingBottom, absolutely-positioned inner). robonen is marginally leaner in two micro-ways: it hoists the static inner style to a shared module constant and adds a data-aspect-ratio hook on the content element. However reka is currently better on substance: (1) reka actually forwards the element ref via :ref=\"forwardRef\" while robonen leaves forwardRef unbound and dead; (2) reka supports asChild/composition while robonen's AspectRatio neither types nor forwards asChild; (3) reka routes $attrs (class/style/id/handlers/ARIA) onto the inner content element via inheritAttrs:false + v-bind, whereas robonen leaks fallthrough attrs onto the outer wrapper; (4) reka's aspect is a computed so runtime ratio changes work, while robonen builds wrapperStyle as a one-time non-reactive object; (5) reka exposes an `aspect` slot prop and (6) ships an axe a11y test, both absent in robonen. The ref-forwarding, attrs routing, and reactivity issues are functional regressions, so the honest verdict is reka-better until those are addressed.
+
+
+**Major gaps:**
+- 🔶 (api-surface) robonen does NOT forward the underlying DOM element ref to consumers. It calls useForwardExpose() and destructures forwardRef (AspectRatio.vue:17) but never binds :ref="forwardRef" on the <Primitive>. The forwardRef is dead code, so the component's exposed $el/currentElement chain is never populated from the inner element and template-ref consumers cannot reach the content node.
+- 🔶 (api-surface) No asChild support. robonen's PrimitiveProps (primitive/Primitive.ts:7-9) only declares `as` and never declares/forwards `asChild`, so consumers cannot do <AspectRatio as-child> to merge props onto a provided child. (robonen's Primitive technically supports as="template" slot-merging, but AspectRatio neither documents nor forwards an asChild prop, and the type surface lacks it.)
+- 🔶 (edge-cases) Fallthrough attributes ($attrs: class, style, id, event handlers, ARIA) are applied to the OUTER wrapper div instead of the inner content element. robonen sets no inheritAttrs:false and never v-binds $attrs onto the inner Primitive, so Vue auto-forwards consumer attrs to the plain wrapper <div data-aspect-ratio-wrapper>, not to the element wrapping the actual content.
+- 🔶 (performance) Dynamic ratio is not reactive. robonen computes wrapperStyle as a plain object literal once during setup using the destructured `ratio` (AspectRatio.vue:21-25); the paddingBottom string is evaluated a single time and never recomputes, so changing :ratio at runtime will not update the box.
+
+**Minor gaps (2):**
+- ▫️ (api-surface) No slot prop exposing the resolved aspect value. reka exposes the computed aspect percentage to the default slot so consumers can react to it; robonen renders a bare <slot /> with no slot props.
+- ▫️ (accessibility) No accessibility regression test. reka ships a vitest-axe assertion (toHaveNoViolations) guarding the rendered structure; robonen's tests only check padding/position/data-attr and never run an a11y audit.
+
+**Recommendations to make robonen strictly better:**
+- Bind the inner Primitive with :ref="forwardRef" so useForwardExpose actually forwards the content element and exposed API; right now the call is dead code. (AspectRatio.vue: add :ref="forwardRef" on the <Primitive>.)
+- Make the wrapper style reactive: replace the const wrapperStyle object with a computed (e.g. computed(() => ({ position: 'relative', width: '100%', paddingBottom: `${(1 / ratio) * 100}%` }))) so runtime ratio changes re-render the box.
+- Add asChild to PrimitiveProps (or at minimum forward an asChild prop on AspectRatio that maps to the inner Primitive's template/Slot path) so consumers can merge the ratio container onto a provided child element, matching reka's composition model.
+- Set inheritAttrs: false (via defineOptions) and v-bind="$attrs" on the inner Primitive so consumer class/style/id/event/ARIA attrs land on the content element rather than the outer wrapper div.
+- Expose the resolved aspect percentage as a slot prop (defineSlots + <slot :aspect="aspect" />) for parity and to let consumers react to the computed ratio.
+- Add a vitest-axe accessibility test mirroring reka's, asserting toHaveNoViolations on a typical img-in-AspectRatio render.
+
+**Where robonen is already better:**
+- ✅ Hoists the inner element's static style into a single module-level constant INNER_STYLE (AspectRatio.vue:29-32), so the absolute/inset:0 style object is allocated once and shared across all instances instead of being re-created per render. reka inlines the inner style as a string literal each render (AspectRatio.vue:48).
+- ✅ Adds a data-aspect-ratio="true" attribute on the inner content element (AspectRatio.vue:37), giving a styling/test hook on the actual content box. reka only emits a data attribute on the outer wrapper (data-reka-aspect-ratio-wrapper) and nothing on the inner element.
+- ✅ Uses an object style binding (:style="wrapperStyle") for the wrapper rather than reka's hand-built CSS string template literal (`position: relative; width: 100%; padding-bottom: ${aspect}%`), which avoids string-to-style re-parsing and is less error prone — though see the reactivity caveat in the gaps.
+
+
+### scroll-area  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** ScrollAreaScrollbarGlimpse.vue (glimpse visibility behavior + state machine), ScrollAreaScrollbarX.vue and ScrollAreaScrollbarY.vue (axis-specific layers that register scrollbar element to root and set thumb-size + RTL position CSS vars), ScrollAreaCornerImpl.vue (RTL-aware corner impl, split from Corner)
+**Parts robonen has that reka lacks:** ScrollAreaScrollbarImpl.vue carries the ARIA scrollbar role/state and onKeyDown keyboard handler (reka's Impl has neither), context.ts second context (ScrollAreaScrollbarContext) with onThumbChange/onThumbPointerDown/onThumbPositionChange exported publicly, viewportId in root context for aria-controls wiring (no reka equivalent)
+
+robonen's scroll-area is architecturally close to reka-ui and is meaningfully more accessible: it adds the full WAI-ARIA scrollbar pattern (role=scrollbar, aria-orientation/valuemin/max/now, aria-controls to the viewport, aria-disabled, roving tabindex) and a complete keyboard handler (Arrow ±5%, PageUp/Down, Home/End, RTL-aware horizontal) — reka has zero ARIA and no keyboard support, only tabindex=0 on the viewport. However robonen currently ships several real functional regressions versus reka: (1) the thumb has no size along the track because nothing sets the --scroll-area-thumb-width/height CSS vars (getThumbSize is exported but never used for sizing); (2) the Corner can never render because ctx.scrollbarX/scrollbarY are never populated; (3) wheel-over-scrollbar can't stop page scroll because the listener is @wheel.passive while the code calls preventDefault; (4) no RTL flip for scrollbar position; (5) no ref forwarding through scrollbar wrappers; plus missing 'glimpse' type, no viewport tabindex, no scrollBehavior handling during drag, broken text-ellipsis case, static thumb data-state, and no useNonce inheritance. Verdict: robonen-better-with-gaps — it wins decisively on a11y/keyboard but must fix the thumb-size, corner-wiring, wheel, and RTL bugs (the first two are essentially broken core behavior) before it can be called strictly better.
+
+**Critical gaps:**
+- ⛔ (features) Thumb size along the scroll axis is never set. ScrollAreaThumb.vue styles width/height with var(--scroll-area-thumb-width)/var(--scroll-area-thumb-height), but NO component ever defines those CSS vars (getThumbSize in utils.ts is exported yet never called to set them). In reka, ScrollAreaScrollbarX.vue sets --reka-scroll-area-thumb-width and ScrollAreaScrollbarY.vue sets --reka-scroll-area-thumb-height from getThumbSize(sizes) on the scrollbar element. Result: robonen's thumb collapses to 0 length along the track unless the user hand-styles it.
+  - _evidence:_ reka ScrollAreaScrollbarX.vue/ScrollAreaScrollbarY.vue style binding `--reka-scroll-area-thumb-width/height = getThumbSize(sizes)`; robonen ScrollAreaThumb.vue uses var(--scroll-area-thumb-width/height) but grep shows getThumbSize is never invoked to set them.
+- ⛔ (features) ScrollAreaCorner never renders because its required inputs are never populated. Corner.measure() reads ctx.scrollbarX.value / ctx.scrollbarY.value to compute width/height, but nothing ever assigns ctx.scrollbarX / ctx.scrollbarY in robonen (they stay null forever; the registerScrollbar emit only feeds a LOCAL scrollbarEl in ScrollAreaScrollbarVisible.vue, never the root context). So width/height stay 0, hasSize is always false, and the corner is never displayed.
+  - _evidence:_ reka ScrollAreaScrollbarX.vue onMounted calls rootContext.onScrollbarXChange(el) and ScrollbarY calls onScrollbarYChange(el); robonen context.ts defines scrollbarX/scrollbarY refs and Root provides them, but grep shows no assignment of ctx.scrollbarX/scrollbarY anywhere. ScrollAreaCorner.vue measure() depends on them.
+
+**Major gaps:**
+- 🔶 (edge-cases) Wheel-over-scrollbar cannot prevent page scroll. ScrollAreaScrollbarImpl.vue binds @wheel.passive, so the listener is passive:true and the event.preventDefault() inside onWheelScroll (ScrollAreaScrollbarVisible.vue, guarded by isScrollingWithinScrollbarBounds) is a no-op and logs a console warning. reka adds the wheel listener on document with { passive: false } and gates on scrollbar.contains(target), so it can actually preventDefault and stop the window from scrolling.
+- 🔶 (rtl-i18n) RTL scrollbar positioning is not handled. robonen ScrollAreaScrollbarImpl.vue hardcodes horizontal { left:0, right:var(--corner-width) } and vertical { right:0 } regardless of dir. reka's ScrollAreaScrollbarX.vue and ScrollAreaScrollbarY.vue flip left/right based on rootContext.dir (vertical bar moves to the left in RTL; horizontal corner gap swaps sides). robonen keeps the vertical scrollbar on the right even in RTL, which is visually wrong.
+- 🔶 (api-surface) Template ref on <ScrollAreaScrollbar> does not forward to the DOM element. reka forwards a ref through every wrapper (forwardRef + :ref on ScrollbarHover/Scroll/Auto/Glimpse/Visible/X/Y), so a ref on ScrollAreaScrollbar resolves to the real scrollbar element. In robonen none of the wrappers (ScrollAreaScrollbar.vue, ScrollAreaScrollbarHover/Auto/Scroll/Visible.vue) call useForwardExpose/forwardRef — only the leaf Impl does — so consumers placing a ref on ScrollAreaScrollbar get nothing useful.
+
+**Minor gaps (7):**
+- ▫️ (features) No 'glimpse' visibility type. reka adds ScrollType 'glimpse' (types.ts), a dedicated ScrollAreaScrollbarGlimpse.vue (state machine that briefly reveals scrollbars on pointer enter then auto-hides), and a branch in ScrollAreaScrollbar.vue. robonen's ScrollAreaType is only 'auto'|'always'|'scroll'|'hover' and has no Glimpse component.
+- ▫️ (keyboard) Viewport is not keyboard-focusable. reka ScrollAreaViewport.vue sets :tabindex="0" on the scrollable viewport so keyboard users can focus the scroll region and use native arrow-key scrolling (works even when no visible scrollbar is rendered). robonen's ScrollAreaViewport.vue sets no tabindex; robonen instead makes the scrollbar focusable, but when a scrollbar is hidden/non-interactive there is no focusable element to drive scrolling, and the common 'focus the panel and scroll' pattern is lost.
+- ▫️ (edge-cases) During thumb drag reka sets viewport.style.scrollBehavior='auto' (and restores it on pointerup) so a user's CSS scroll-behavior: smooth doesn't lag/jank the thumb. robonen instead sets viewport.style.pointerEvents='none' and never touches scrollBehavior, so dragging a smooth-scroll viewport will be janky.
+- ▫️ (edge-cases) Viewport content wrapper does not enable text-overflow: ellipsis when horizontal scrolling is off. reka conditionally applies minWidth: scrollbarXEnabled ? 'fit-content' : undefined so a no-horizontal-scroll viewport can ellipsize text. robonen hardcodes the inner wrapper to { minWidth: '100%', display: 'table' } always, which forces width and breaks text-overflow: ellipsis in the common vertical-only case.
+- ▫️ (features) ScrollAreaThumb data-state is static. reka ScrollAreaThumb.vue binds :data-state="hasThumb ? 'visible' : 'hidden'"; robonen ScrollAreaThumb.vue hardcodes data-state="visible", so styling/animation hooks that key off the hidden state on the thumb won't work.
+- ▫️ (ssr) reka inherits nonce from ConfigProvider via useNonce(propNonce). robonen ScrollAreaViewport.vue accepts a nonce prop but uses it raw (:nonce="nonce") with no ConfigProvider fallback, so a globally-configured CSP nonce is not picked up automatically.
+- ▫️ (edge-cases) reka's Corner respects type: hasCorner = type !== 'scroll' && bothScrollbarsVisible, so no corner is shown for type='scroll' (where scrollbars overlay). robonen ScrollAreaCorner.vue gates only on hasBoth (both enabled) && hasSize, with no type check, so it would attempt a corner even for type='scroll'.
+
+**Recommendations to make robonen strictly better:**
+- Set the thumb-size CSS vars: in the scrollbar layer (split into ScrollAreaScrollbarX/Y or compute in ScrollAreaScrollbarVisible/Impl), bind style --scroll-area-thumb-width = `${getThumbSize(sizes)}px` for horizontal and --scroll-area-thumb-height for vertical, so ScrollAreaThumb actually gets a length along the track. This is the single most important fix.
+- Wire scrollbar elements into the root context: have the scrollbar (Visible/X/Y or via Impl's registerScrollbar) call ctx-level onScrollbarXChange/onScrollbarYChange (add these to ScrollAreaRootContext like reka) so ScrollAreaCorner.measure() can read real elements and the corner renders.
+- Fix wheel: remove @wheel.passive and instead attach a document-level wheel listener with { passive: false } gated on scrollbar.contains(target) (like reka ScrollAreaScrollbarImpl), so onWheelScroll's preventDefault actually stops page scroll. Remove the no-op preventDefault under a passive listener.
+- Make scrollbar positioning RTL-aware in ScrollAreaScrollbarImpl: branch left/right on ctx.dir.value for both vertical (bar on left in RTL) and horizontal (swap the corner gap side), mirroring reka ScrollAreaScrollbarX/Y.
+- Add forwardRef chaining: call useForwardExpose() and bind :ref="forwardRef" on ScrollAreaScrollbar and each wrapper (Hover/Auto/Scroll/Visible) so a template ref on ScrollAreaScrollbar resolves to the underlying scrollbar element, matching reka.
+- Add tabindex=0 to the viewport (and/or expose a configurable tabindex) so keyboard users can focus the scroll region and arrow-scroll natively even when no scrollbar is interactive — keep the existing scrollbar ARIA/keyboard support on top of it.
+- Add a 'glimpse' ScrollAreaType and a ScrollAreaScrollbarGlimpse component (port reka's state machine) for feature parity, plus a small useStateMachine helper to clean up the ad-hoc state in ScrollAreaScrollbarScroll.
+- During thumb drag, set viewport.style.scrollBehavior='auto' on pointerdown and restore on pointerup (in addition to or instead of toggling pointerEvents) to avoid jank when consumers use scroll-behavior: smooth.
+- Make the inner viewport wrapper minWidth conditional (fit-content only when scrollbarXEnabled, otherwise undefined) and drop the unconditional display:table so text-overflow: ellipsis works in vertical-only scroll areas.
+- Bind ScrollAreaThumb :data-state to hasThumb ('visible'/'hidden') instead of hardcoding 'visible'.
+- Route the Viewport nonce through useNonce / ConfigProvider so a globally configured CSP nonce is inherited.
+- Add a type !== 'scroll' guard to ScrollAreaCorner's render condition to match reka and avoid a corner under overlay-style scroll.
+
+**Where robonen is already better:**
+- ✅ Full WAI-ARIA scrollbar pattern: ScrollAreaScrollbarImpl.vue sets role="scrollbar", aria-orientation, aria-valuemin=0, aria-valuemax=100, dynamic aria-valuenow (computed from scrollPos/maxScroll), aria-disabled, and aria-controls pointing to the viewport id. reka-ui has NONE of these (grep of reka ScrollArea/*.vue shows zero role/aria-* attributes) — robonen is dramatically more accessible to screen readers here.
+- ✅ Complete keyboard support on the scrollbar (ScrollAreaScrollbarImpl.vue onKeyDown): ArrowUp/Down (vertical), RTL-aware ArrowLeft/Right (horizontal), PageUp/PageDown (full viewport jump), Home/End (extremes), Arrow step = 5% of viewport, all with preventDefault. reka-ui implements NO keyboard handler at all for scrollbars.
+- ✅ viewportId + aria-controls relationship (context.ts viewportId, Root assigns useId, Viewport applies it, Impl references it) explicitly links scrollbar to the region it controls. reka has no such id wiring.
+- ✅ Roving/conditional tabindex on the scrollbar: tabindex=0 only when isInteractive (hasThumb && maxScroll>0), else -1, so non-overflowing scrollbars are not tab stops. reka has nothing equivalent.
+- ✅ More robust utils: toInt() returns `|| 0` so NaN can't leak (reka's toInt can return NaN); getThumbRatio guards viewport>=content and Number.isFinite (reka can return Infinity when content is 0).
+- ✅ debounceCallback exposes a .cancel() and every component cleans it up in onScopeDispose (ScrollbarAuto/Scroll), giving deterministic teardown; reka relies on VueUse useDebounceFn without explicit cancel-on-dispose in some paths.
+- ✅ Exposes a typed scrollbar context (onThumbChange/onThumbPointerDown/onThumbPositionChange) and ScrollAreaSizes type publicly via index.ts, plus context provide/inject helpers — slightly richer public surface for extension.
+
+
+### dropdown-menu  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** DropdownMenuFilter (filterable menu searchbox part)
+
+Both libraries implement DropdownMenu as a thin wrapper over an internal Menu primitive with the same part set (Root, Trigger, Portal, Content, Item, CheckboxItem, RadioGroup/RadioItem, ItemIndicator, Label, Separator, Group, Arrow, Sub/SubTrigger/SubContent). robonen covers the core behavior well: controlled/uncontrolled open, modal/non-modal content, roving focus with Arrow/Home/End/PageUp/PageDown, RTL-aware sub open/close keys, type-ahead, dismissable layer, body scroll lock, focus guards, item select->close via cancelable ITEM_SELECT, and it even exposes a couple of extra Popper props (sideFlip/alignFlip). However reka is currently better in several concrete, verifiable ways. Most important: (1) robonen's @select preventDefault contract is broken because the emitted event (raw MouseEvent) is not the cancelable ITEM_SELECT event it inspects, so consumers cannot prevent close; (2) the trigger lacks type=\"button\", risking form submission inside a <form>; (3) there is no DropdownMenuFilter and the Menu layer lacks the content-context plumbing for one; (4) typeahead Space handling prematurely selects multi-word items; (5) the submenu safe-triangle has no pointer-direction intent; (6) focus-return to the trigger is unconditional rather than suppressed on outside/right-click interaction. Minor gaps: conditional aria-controls, Sub defaultOpen + open slot prop, dropdown-level CSS sizing vars, useForwardExpose on sub-components, a richer root context, and pointerup drag-select. The only missing PART is Filter; the rest are behavioral/forms/a11y refinements. Net: robonen is close and in places ahead, but not yet strictly better.
+
+**Critical gaps:**
+- ⛔ (api-surface) @select preventDefault does not prevent menu close because the emitted event is not the inspected cancelable event
+  - _evidence:_ robonen menu/MenuItem.vue handleSelect: dispatches a CustomEvent ITEM_SELECT, then emit('select', event) with the raw MouseEvent, then checks selectEvent.defaultPrevented; reka MenuItem.vue emits the same itemSelectEvent it later inspects
+
+**Major gaps:**
+- 🔶 (forms) DropdownMenuTrigger missing type=button -> form submission risk
+- 🔶 (features) No DropdownMenuFilter part nor Menu content-context filter hooks
+- 🔶 (keyboard) Space selects multi-word items during typeahead
+- 🔶 (edge-cases) Submenu safe-triangle lacks pointer-direction intent
+- 🔶 (accessibility) Focus-return to trigger is unconditional, ignoring outside/right-click interaction
+
+**Minor gaps (6):**
+- ▫️ (accessibility) Unconditional aria-controls even when menu is closed
+- ▫️ (api-surface) DropdownMenuSub lacks defaultOpen and open slot prop
+- ▫️ (features) No dropdown-level CSS sizing/animation vars (trigger-width/height/transform-origin)
+- ▫️ (api-surface) Sub-component wrappers don't call useForwardExpose
+- ▫️ (edge-cases) No pointerup drag-select / Firefox text-selection fix on items
+- ▫️ (api-surface) Root context exposes less than reka
+
+**Recommendations to make robonen strictly better:**
+- Add :type="as === 'button' ? 'button' : undefined" to DropdownMenuTrigger's Primitive (and verify MenuSubTrigger) to prevent accidental form submission when the trigger is a default <button> inside a <form>.
+- Fix the select-cancel contract in menu/MenuItem.vue: construct a single cancelable ITEM_SELECT CustomEvent, emit THAT via emit('select', selectEvent), then check selectEvent.defaultPrevented before rootCtx.onClose(). Mirror for keyboard selection so event.preventDefault() in @select reliably keeps the menu open; apply equivalently in MenuCheckboxItem/MenuRadioItem.
+- Implement trigger focus-return in DropdownMenuContent (port reka's handleCloseAutoFocus + handleInteractOutside): focus the trigger on closeAutoFocus only when the user did not interact outside / right-click / non-modal-dismiss, otherwise preventDefault and let the UA keep focus. Track a hasInteractedOutsideRef flag wired through @interact-outside.
+- Add a typing-ahead Space guard to MenuItemImpl.handleKeyDown (skip selection when searchRef !== '' and key === ' ') so item labels containing spaces remain searchable via typeahead.
+- Add directional safe-triangle intent for submenus: track pointer X movement (pointerDirRef/lastPointerXRef) via @pointermove on MenuContentImpl and gate onItemEnter/onTriggerLeave on 'pointer moving toward submenu side' in addition to isPointerInGraceArea.
+- Add a DropdownMenuFilter part. First extend menu/MenuContentImpl's content-context with highlightedElement, onKeydownNavigation, onKeydownEnter, filterElement and onFilterElementChange (plus pointerenter-to-focus-filter), then add a Filter wrapper with role=searchbox, v-model, autoFocus, disabled, aria-activedescendant and Escape-to-clear.
+- Make DropdownMenuTrigger's aria-controls conditional on open (set contentId only while open) to match the WAI-ARIA menu-button pattern.
+- Add defaultOpen (uncontrolled) support and an `open` slot prop to DropdownMenuSub, mirroring DropdownMenuRoot's controlled/uncontrolled pattern.
+- Expose dropdown-level CSS custom properties on DropdownMenuContent and DropdownMenuSubContent: --primitives-dropdown-menu-trigger-width/-height mapped from --popper-anchor-width/-height (already computed in PopperContent), plus transform-origin and available-width/height, so consumers can size menus to the trigger and animate.
+- Call useForwardExpose() (and forward the ref) in all DropdownMenu* sub-component wrappers so template refs/exposed methods of the inner element are accessible, matching reka.
+- Enrich DropdownMenuRootContext to also expose open, onOpenChange, onOpenToggle, modal and dir (derived from MenuContext/MenuRootContext) for parity and easier composition.
+- Add pointerdown/pointerup drag-select handling to MenuItem(Impl) (re-dispatch click on pointerup when pointerdown started on a different item) to fix drag-across-items selection and the Firefox text-selection edge case.
+
+**Where robonen is already better:**
+- ✅ robonen's DropdownMenuTrigger opens on ArrowUp in addition to ArrowDown/Enter/Space, one more opening affordance than reka.
+- ✅ robonen surfaces sideFlip/alignFlip (and prioritizePosition) Popper props through MenuContentImplProps that reka's Menu does not expose.
+- ✅ robonen cleans up the typeahead search buffer via onScopeDispose plus an explicit content @blur handler, not just a timer.
+
+
+### tree  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** TreeVirtualizer (TanStack vue-virtual windowing with keyboard + type-ahead hooks)
+
+Both libraries implement a flatten-on-root tree: TreeRoot flattens visible items and TreeItem renders role=treeitem with aria-level/expanded/selected, click + Arrow/Home/End + RTL-aware Left/Right + Enter/Space. robonen's core is leaner and faster (O(1) Set lookups, iterative flatten, hoisted roving opts, stable string keys, data-state/data-level hooks, cleaner v-model). However reka is currently better on several real, verifiable axes that block 'strictly better': it uses RovingFocusGroup for the WAI-ARIA single-tabstop roving tabindex (robonen wrongly puts tabindex=0 on every item - the biggest gap, critical), implements type-ahead, emits aria-setsize/aria-posinset, handles PageUp/PageDown, supports Shift+arrow range selection, selectionBehavior toggle/replace, bubbleSelect with indeterminate tri-state, cancelable select/toggle emits + defineExpose + slot action callbacks, and ships a virtualizer. Fixing the roving tabindex, type-ahead, set/pos a11y attrs, PageUp/Down, range selection, intercept events, and indeterminate/bubble support would make robonen strictly better while keeping its performance edge.
+
+**Critical gaps:**
+- ⛔ (keyboard) No single-tabstop roving tabindex. robonen hardcodes tabindex = isDisabled ? -1 : 0 on EVERY treeitem, so Tab steps through every node and there is no single tab entry point - violating the WAI-ARIA tree pattern. reka wraps items in RovingFocusGroup/RovingFocusItem which sets tabindex 0 only on the current tab stop and -1 on all others, plus handles Shift+Tab to leave the group.
+  - _evidence:_ robonen TreeItem.vue :tabindex="isDisabled ? -1 : 0"; reka TreeItem.vue uses <RovingFocusItem> and RovingFocusItem.vue :tabindex="isCurrentTabStop ? 0 : -1" with context.onItemShiftTab().
+
+**Major gaps:**
+- 🔶 (keyboard) No type-ahead: robonen has no type-to-focus. reka wires useTypeahead/getNextMatch on the root keydown (TreeRoot.vue handleKeydown -> handleTypeaheadSearch, useTypeahead.ts getNextMatch) so pressing letters focuses the next item whose textContent/textValue matches. Type-ahead is part of the WAI-ARIA Tree View keyboard pattern.
+- 🔶 (accessibility) Missing aria-setsize and aria-posinset on treeitems. reka computes them per item (aria-setsize = siblings length, aria-posinset = index+1) and binds them. robonen's TreeItem sets aria-level only, so screen readers cannot announce "item N of M" within a group.
+- 🔶 (keyboard) No Shift+Arrow / Shift+Home/End range selection. reka maintains a firstValue anchor and implements handleMultipleReplace + findValuesBetween to extend a multi-selection across a contiguous range with Shift+arrows. robonen has no anchor and no range selection at all.
+- 🔶 (features) No bubbleSelect (child->parent state propagation) and no indeterminate state. reka supports bubbleSelect (selecting all children selects the parent, deselecting unsets it) and exposes isIndeterminate to render tri-state checkboxes. robonen has propagateSelect (parent->child) but no upward bubbling and no indeterminate concept.
+- 🔶 (api-surface) TreeItem emits no cancelable select/toggle events. reka dispatches cancelable CustomEvents (tree.select/tree.toggle) and emits 'select'/'toggle' that callers can event.preventDefault() to intercept before state changes. robonen's TreeItem has no defineEmits, so consumers cannot intercept or veto selection/expansion.
+
+**Minor gaps (6):**
+- ▫️ (keyboard) PageUp/PageDown not handled. reka maps PageUp->first and PageDown->last via MAP_KEY_TO_FOCUS_INTENT, so those keys jump to first/last item. robonen's rovingKeyToAction only recognizes Home/End (Arrow*, Home, End) and never PageUp/PageDown.
+- ▫️ (api-surface) No selectionBehavior 'toggle' | 'replace' prop. reka lets consumers choose whether selecting replaces the current selection or toggles. robonen only supports toggle semantics.
+- ▫️ (api-surface) TreeItem exposes nothing via defineExpose, and the item slot provides no action callbacks. reka exposes isExpanded/isSelected/isIndeterminate/handleToggle/handleSelect and passes handleSelect/handleToggle into the slot, so a custom node (e.g. a chevron or checkbox) can trigger select/toggle independently. robonen's item slot only passes read-only state.
+- ▫️ (performance) No virtualization. reka ships TreeVirtualizer (TanStack vue-virtual) with overscan/estimateSize/textContent props and keyboard/type-ahead integration for huge trees. robonen has no virtualizer, so very large flat lists render every visible node.
+- ▫️ (code-quality) Root keydown navigation in robonen relies on reading the DOM aria-level attribute for Left/Right parent/child resolution (next.getAttribute('aria-level')), which is fragile if a consumer overrides as/markup or aria-level. reka resolves parent/child via the in-memory FlattenedItem.level/data-indent collection, decoupling navigation from rendered ARIA attributes.
+- ▫️ (keyboard) No focus-entry guard / onEntryFocus behavior. reka's RovingFocusGroup centralizes which item receives focus on group entry; robonen has no entry-focus management, so initial Tab/click focus is whatever the browser picks among the many tabindex=0 items.
+
+**Recommendations to make robonen strictly better:**
+- Adopt single-tabstop roving tabindex for treeitems: reuse the existing robonen RovingFocusGroup/RovingFocusItem (src/roving-focus) or maintain a currentTabStopId so only one item has tabindex=0 and the rest get -1; handle Shift+Tab to exit the tree. This is the most important correctness/a11y fix (currently every item is tabbable).
+- Add type-ahead: on root keydown for printable single characters, match against item textContent (or an opt-in getLabel/textValue accessor) using a getNextMatch-style wrap-around search with a 1s reset, then focus the match. Add an optional getLabel?: (item) => string prop for non-text nodes/virtualized cases.
+- Emit aria-setsize and aria-posinset: extend FlatItem (utils.ts) with setsize and posinset (siblings length and 1-based index within the sibling group) and bind them in TreeItem.vue so SRs announce position within group.
+- Add PageUp/PageDown to rovingKeyToAction (map to absolute 'home'/'end') so the Tree gets first/last jump on those keys; or handle them explicitly in onItemKeyDown.
+- Add Shift+Arrow and Shift+Home/End range selection for multiple mode: keep a firstValue/anchor key and a findValuesBetween-style helper over flatItems to set the selected range; respect disabled items.
+- Add selectionBehavior?: 'toggle' | 'replace' to TreeRootProps and thread it through select() so consumers can choose replace-on-click semantics.
+- Add bubbleSelect (child->parent) plus an indeterminate concept: compute and expose is-indeterminate in the TreeItem slot for tri-state checkbox trees (parent partially selected). Pair it with the existing propagateSelect.
+- Make TreeItem emit cancelable select/toggle events (or expose handleSelect/handleToggle and pass them into the slot) so consumers can intercept/preventDefault and trigger actions from custom sub-nodes (chevron/checkbox). Also defineExpose isExpanded/isSelected/(is-indeterminate)/handleToggle/handleSelect.
+- Decouple Left/Right navigation from aria-level: add a private data-indent (or read FlatItem.level via the collection) for parent/child resolution instead of parsing the public aria-level attribute, so consumer markup overrides don't break keyboard nav.
+- Optionally add a TreeVirtualizer companion (TanStack vue-virtual) with overscan/estimateSize/getLabel and keyboard+type-ahead integration to match reka for very large trees.
+- Add a focus-entry strategy (onEntryFocus) so first focus into the tree lands on the selected item or the first item, consistent with the roving tabstop.
+
+**Where robonen is already better:**
+- ✅ Performance: robonen builds an O(1) selectedSet/expandedSet (computed Set) so each TreeItem's isSelected/isExpanded is a Set.has() instead of reka's per-item Array.includes() on selectedKeys.value (TreeItem.vue isSelected/isExpanded), avoiding O(n^2) on selection change. propagateSelect in robonen also collects cascade keys into a Set and filters with Set.has (TreeRoot.vue select()), whereas reka uses repeated Array.some/find (O(n*m)).
+- ✅ Flattening is iterative (explicit stack in flattenVisible/utils.ts) so it cannot blow the call stack on deeply nested trees; reka's flattenItems and flatten() are recursive (TreeRoot.vue flattenItems, utils.ts flatten).
+- ✅ Roving-key handling reuses hoisted ROVING_OPTS_LTR/RTL constants per keydown to keep the rovingKeyToAction call site monomorphic and avoid per-event object allocation (TreeRoot.vue lines 48-49) - a deliberate perf detail reka does not have.
+- ✅ Richer data-* hooks for styling/animation: robonen exposes data-state="open|closed" and data-level on each item (TreeItem.vue), while reka only exposes data-expanded/data-selected/data-indent and no open/closed state attribute.
+- ✅ TreeRoot default slot exposes a clean, typed payload { flatItems, selectedKeys, expandedKeys } and the FlatItem type is minimal and well-documented (utils.ts). reka's FlattenedItem carries an extra bind object the consumer must spread.
+- ✅ More explicit, readable controlled/uncontrolled handling with a normalize() helper and equality-guarded watchers (TreeRoot.vue), versus reka leaning on useVModel with @ts-expect-error casts and passive flags.
+- ✅ reka's single-select onSelectItem does modelValue.value = { ...val } (shallow-clones the item object), which breaks referential identity of the selected item; robonen stores stable string keys and emits the key, avoiding identity loss.
+
+
+### popover  —  _robonen-better-with-gaps_
+
+
+Both libraries implement the same set of Popover parts (Root, Trigger, Anchor, Content + Impl/Modal/NonModal, Portal, Arrow, Close) with essentially identical architecture (Popper + DismissableLayer + FocusScope + Presence, modal/non-modal split, controlled+uncontrolled open via `open`/`defaultOpen` and an `{open, close}` slot, role=dialog, aria-haspopup=dialog/aria-expanded/aria-controls/aria-labelledby, data-state, identical close/interact-outside trigger-reentry guards, and the same CSS custom-property exposure). robonen is genuinely better in several areas: a superior reference-counted scrollbar-compensating useBodyScrollLock, always-valid aria-controls via eager IDs, cleaner forceMount-vs-present separation in Presence, and a larger forwarded Popper positioning API (reference/positionStrategy/hideShiftedArrow/disableUpdateOnLayoutShift). However robonen has real, fixable gaps versus reka: (1) modal popover omits useHideOthers, so background content is not hidden from screen readers, despite robonen shipping that util and using it in Dialog/Menu (critical a11y inconsistency); (2) no focus guards in content (reka uses useFocusGuards) despite robonen having useFocusGuard and using it in Menu; (3) the content element is never exposed via template ref (reka threads forwardRef through the whole content chain); (4) PopoverArrow drops all props except width/height and exposes no ref; (5) the default arrow renders an empty span with no triangle and no rounded variant, while reka renders a working SVG triangle out of the box. Net: robonen wins on plumbing/perf but is currently NOT strictly better — it has a critical modal-a11y omission, a major focus-guard omission, missing ref/prop forwarding, and an invisible default arrow. Fixing the listed items (most reuse utilities robonen already has) would make it strictly better.
+
+**Critical gaps:**
+- ⛔ (accessibility) Modal popover does NOT hide sibling/background content from assistive tech. reka's PopoverContentModal calls useHideOthers(currentElement) to aria-hide everything outside the content; robonen's PopoverContentModal.vue omits this entirely (only calls useBodyScrollLock()). robonen already ships an equivalent useHideOthers (src/utils/useHideOthers.ts) and uses it in DialogContentModal.vue and MenuRootContentModal.vue, so this is an inconsistent omission specific to popover.
+  - _evidence:_ reka PopoverContentModal.vue line 19 `useHideOthers(currentElement)` vs robonen PopoverContentModal.vue (never imports/calls useHideOthers); cf. robonen DialogContentModal.vue:20 and MenuRootContentModal.vue:21 which DO call it.
+
+**Major gaps:**
+- 🔶 (accessibility) No focus guards injected around content. reka's PopoverContentImpl calls useFocusGuards() to insert tabbable [data-reka-focus-guard] spans at the body edges so focusin/focusout are caught consistently (important for Tab-out behavior and focus-scope boundary detection). robonen's PopoverContentImpl.vue never calls a focus-guards util, even though robonen exports useFocusGuard from @robonen/vue and uses it in MenuRootContentModal.vue:19.
+- 🔶 (api-surface) Content element/instance is not exposed via template ref. reka threads forwardRef end-to-end: PopoverContent (forwardRef) -> ContentModal/NonModal (:ref=forwardRef) -> ContentImpl (forwardRef) -> PopperContent (:ref=forwardRef), so `<PopoverContent ref=...>` yields the content DOM element. robonen's PopoverContent, PopoverContentModal, PopoverContentNonModal, and PopoverContentImpl never call useForwardExpose nor bind a ref, so consumers cannot obtain the content element/instance.
+- 🔶 (api-surface) PopoverArrow does not forward its props and has no exposed ref. reka's PopoverArrow does `v-bind="props"` (forwarding as/asChild/rounded/width/height) and calls useForwardExpose(). robonen's PopoverArrow.vue only binds :width and :height to PopperArrow and drops everything else (as, custom attrs), and never exposes a ref.
+- 🔶 (features) Default arrow renders nothing visible. reka's Arrow (shared/component/Arrow.vue) defaults as='svg', sets viewBox '0 0 12 6', preserveAspectRatio, and renders a default triangle <path d="M0 0L6 6L12 0"> plus a rounded variant. robonen's PopperArrow renders a plain <span> wrapping a Primitive as='span' with no default geometry, so out-of-the-box `<PopoverArrow/>` is an empty/invisible element unless the consumer supplies their own SVG via the slot.
+
+**Minor gaps (3):**
+- ▫️ (features) No rounded arrow option. reka exposes ArrowProps.rounded to switch to a rounded arrow path; robonen PopperArrowProps only has width/height, so PopoverArrow can never render the rounded variant.
+- ▫️ (api-surface) PopoverAnchor does not expose its element via ref. reka calls useForwardExpose() in PopoverAnchor; robonen's PopoverAnchor.vue does not, so a template ref on PopoverAnchor won't resolve to the anchor element/instance.
+- ▫️ (edge-cases) interactOutside handler is synchronous. reka's PopoverContentNonModal uses an async interact-outside handler (allowing awaited guards before deciding to prevent); robonen's is synchronous. Minor, but reka's signature is more future-proof for async dismissal guards.
+
+**Recommendations to make robonen strictly better:**
+- In PopoverContentModal.vue, add `import { useHideOthers } from '../utils/useHideOthers'`, obtain the content element via useForwardExpose's currentElement, then call `useHideOthers(currentElement)` so modal popovers aria-hide background content for screen readers (match DialogContentModal/MenuRootContentModal).
+- In PopoverContentImpl.vue, import and call `useFocusGuard` from '@robonen/vue' (as MenuRootContentModal does) so edge focus guards are injected for consistent focusin/focusout handling and Tab-out behavior.
+- Thread a forwardRef through the content chain: call useForwardExpose() in PopoverContent and bind `:ref="forwardRef"` on PopoverContentModal/NonModal; forward it to PopoverContentImpl; in PopoverContentImpl call useForwardExpose() and bind `:ref="forwardRef"` on PopperContent — so `<PopoverContent ref>` exposes the content element (also needed to wire useHideOthers in the modal).
+- Fix PopoverArrow.vue to `v-bind="props"` onto PopperArrow (forward as/attrs), add useForwardExpose(), and keep the width/height defaults; this restores the standard arrow API surface.
+- Give PopperArrow a real default rendering: default `as='svg'`, set viewBox/preserveAspectRatio, render a default triangle <path d="M0 0L6 6L12 0"> as slot fallback, and add a `rounded?: boolean` prop with the rounded path — so `<PopoverArrow/>` is visible out of the box (and default PopoverArrow as='svg' like reka).
+- Add useForwardExpose() to PopoverAnchor.vue so the anchor element is accessible via template ref.
+- Optional: make PopoverContentNonModal's interact-outside handler async to match reka and allow awaited dismissal guards.
+- Keep robonen's eager IDs (always-valid aria-controls) and the separate forceMount/present Presence wiring — these are genuine improvements over reka; document them as intentional.
+
+**Where robonen is already better:**
+- ✅ Superior body scroll lock: robonen's useBodyScrollLock (toolkit/.../useBodyScrollLock/index.ts) is reference-counted, auto-disposes via tryOnScopeDispose, preserves original overflow/paddingRight/touchAction, and compensates for scrollbar width to prevent layout shift. reka's PopoverContentModal just calls useBodyScrollLock(true) with a simpler shared util.
+- ✅ Eager, always-valid id wiring: robonen generates triggerId/contentId in PopoverRoot via useId, so PopoverTrigger's aria-controls always references a valid contentId. reka lazily sets rootContext.contentId only when PopoverContent mounts, so the trigger's aria-controls is '' (empty) until content has mounted at least once.
+- ✅ Cleaner forceMount semantics: robonen PopoverContent passes forceMount separately to <Presence :present=open :force-mount=forceMount>, whereas reka conflates them with <Presence :present="forceMount || open">, which makes present===true permanently when forceMount is set (Presence then can't distinguish forced-mount from real-open for exit transitions).
+- ✅ Richer Popper positioning surface forwarded through content: robonen PopperContentProps adds hideShiftedArrow, disableUpdateOnLayoutShift, reference (custom ReferenceElement), and exposes positionStrategy 'absolute'|'fixed' (default fixed) with documented defaults — a strictly larger positioning API than what flows through reka's PopoverContent.
+- ✅ Documented, typed context and props with JSDoc (PopoverRootProps.modal/defaultOpen, all DismissableLayerEmits); useContextFactory gives a typed inject with a clear provider-missing error.
+- ✅ Performance-minded reactivity: PopoverRoot uses toRef(() => modal) for identity passthrough instead of computed, PopperArrow/useHideOthers constants are hoisted to module scope, and isInClosedPopover is isolated so its try/catch doesn't deopt the watcher callback.
+
+
+### menubar  —  _robonen-better-with-gaps_
+
+
+Both libraries expose an identical set of 17 menubar parts and the wrapper sub-components (Item/CheckboxItem/RadioGroup/RadioItem/Indicator/Group/Label/Separator/Arrow/Portal/Sub*) are equivalent thin forwarders. Robonen is genuinely ahead on a few points: it adds trigger-level typeahead (reka has none), opens the menu on ArrowUp at the trigger, types the modelValue emit correctly (reka's is a buggy boolean), and uses safer eager id generation. However robonen has several real gaps versus reka: (1) CRITICAL — no cross-menu ArrowLeft/ArrowRight navigation while a menu's content is open (reka's MenubarContent/SubContent handleArrowNavigation), the central APG menubar interaction; (2) MAJOR — no roving tabindex, so every trigger is a tab stop instead of the menubar being a single tab stop (reka uses RovingFocusGroup/Item; robonen even has the module but doesn't use it); (3) MAJOR — MenubarSub has no defaultOpen/uncontrolled mode (MenuSub is controlled-only, default false); (4) MAJOR — closeAutoFocus always yanks focus back to the trigger even after clicking outside (reka guards with hasInteractedOutsideRef). Minor gaps: align is hard-forced and can't be overridden, aria-controls dangles when closed, no data-highlighted/data-value on the trigger, no macOS ctrl+click guard, missing trigger-width/height CSS vars, and slots don't expose modelValue/open. Net: robonen is better in places but not yet strictly better; fixing the roving tabindex, cross-menu arrow nav, sub uncontrolled mode, and focus-return behavior would make it strictly superior.
+
+**Critical gaps:**
+- ⛔ (keyboard) No cross-menu Arrow navigation while a menu is open: when a MenubarContent (or SubContent) is open and focus is inside it, pressing ArrowRight/ArrowLeft should open the adjacent menubar menu (core APG menubar behavior). Robonen's MenubarContent has no such handler and MenuContentImpl's RovingFocusGroup is orientation=vertical so horizontal arrows just bubble and do nothing. Reka implements handleArrowNavigation on MenubarContent (@keydown.arrow-right.arrow-left) and MenubarSubContent (@keydown.arrow-right), computing the next menu value from collection data-value (RTL-aware via dir, loop-aware via wrapArray) and calling rootContext.onMenuOpen.
+  - _evidence:_ reka MenubarContent.vue handleArrowNavigation + @keydown.arrow-right.arrow-left, MenubarSubContent.vue @keydown.arrow-right. robonen MenubarContent.vue has no arrow handler; grep arrow/onMenuOpen in robonen MenuContentImpl/MenuContent = none.
+
+**Major gaps:**
+- 🔶 (keyboard) No roving tabindex on menubar triggers: robonen's MenubarTrigger renders a plain <button> with no tabindex management, so EVERY trigger is in the tab order. This violates the WAI-ARIA menubar pattern where the menubar is a single tab stop and Arrow keys move between triggers. Reka wraps each trigger in RovingFocusItem (:tab-stop-id=value, :focusable=!disabled) under a RovingFocusGroup with v-model:current-tab-stop-id, so RovingFocusItem.vue sets :tabindex="isCurrentTabStop ? 0 : -1" — exactly one tabbable trigger. Robonen even already has a roving-focus module (src/roving-focus) but does not use it here.
+- 🔶 (api-surface) MenubarSub has no uncontrolled mode / defaultOpen. Robonen MenubarSub forwards to MenuSub, whose only prop is `open` (controlled, default false) with no defaultOpen and no internal useVModel — so a submenu cannot be uncontrolled. Reka's MenubarSub adds defaultOpen and wires useVModel(open, ..., passive) so the submenu works uncontrolled out of the box and exposes :open to the slot.
+- 🔶 (edge-cases) closeAutoFocus always yanks focus back to the trigger. Robonen's MenubarContent close-auto-focus handler unconditionally calls menuCtx.triggerRef.value?.focus() on every close — including when the user clicked/focused outside the menu (e.g. into an input). Reka tracks hasInteractedOutsideRef (set on interact-outside) and only refocuses the trigger when (!menubarOpen && !hasInteractedOutsideRef), letting focus stay where the user clicked. Robonen also has no interact-outside tracking for this.
+
+**Minor gaps (7):**
+- ▫️ (api-surface) align prop cannot be overridden. In robonen MenubarContent the template does v-bind="props" THEN align="start"; the static attribute wins, so any consumer-supplied align is ignored and content is always start-aligned. Reka uses withDefaults(defineProps, { align: 'start' }) and forwards via useForwardPropsEmits, so consumers can override align.
+- ▫️ (accessibility) aria-controls is a dangling reference when the menu is closed. Robonen MenubarTrigger always sets :aria-controls="menuCtx.contentId.value", but the content is conditionally rendered via Presence (only when open), so when closed aria-controls points to a non-existent id. Reka guards :aria-controls="open ? menuContext.contentId : undefined".
+- ▫️ (features) No data-highlighted styling hook on the focused trigger. Reka tracks isFocused via @focus/@blur and sets :data-highlighted on the trigger, letting consumers style the keyboard-focused trigger. Robonen's MenubarTrigger has no data-highlighted/focus tracking.
+- ▫️ (edge-cases) No macOS ctrl+click guard on the trigger pointerdown. Robonen handlePointerDown only checks event.button !== 0. Reka additionally checks event.ctrlKey === false to avoid treating a macOS ctrl+click (context-menu) as a left click that opens the menu.
+- ▫️ (features) No data-value on the trigger and no subtrigger marker attribute. Reka sets :data-value on the trigger (used by content arrow navigation to identify the next menu) and data-reka-menubar-subtrigger on MenubarSubTrigger (used to suppress cross-menu nav while opening a submenu). Robonen omits both, which is also why the cross-menu nav (above) cannot work without adding them.
+- ▫️ (features) Missing trigger-width/height CSS custom properties on content. Reka sets --reka-menubar-trigger-width: var(--reka-popper-anchor-width) and -trigger-height on MenubarContent/SubContent for convenient content sizing. Robonen's content only exposes --primitives-menu-content-transform-origin/-available-width/-available-height (no anchor/trigger width alias at the menubar layer). The underlying --popper-anchor-width exists, so this is only a convenience-API gap.
+- ▫️ (api-surface) Root slot does not expose modelValue and Sub slot does not expose open. Reka MenubarRoot exposes <slot :model-value> and MenubarSub exposes <slot :open>, letting consumers reactively read the open menu / submenu state in the template. Robonen MenubarRoot's <slot /> passes nothing and MenubarSub's slot passes nothing.
+
+**Recommendations to make robonen strictly better:**
+- Add roving tabindex to MenubarTrigger by wrapping it in the existing src/roving-focus RovingFocusItem (focusable=!disabled, tabStopId=menuValue) under a RovingFocusGroup in MenubarRoot (orientation=horizontal, loop, dir, v-model:currentTabStopId). Drive currentTabStopId from onMenuOpen/onMenuToggle (as reka does) so the menubar is a single tab stop. This also lets you delete the hand-rolled focusByIndex/Home/End logic.
+- Implement cross-menu Arrow navigation: add @keydown.arrow-left.arrow-right on MenubarContent (and @keydown.arrow-right on MenubarSubContent) that reads the trigger collection (add :data-value to MenubarTrigger), filters disabled, computes the next/prev menu value (RTL-aware via rootCtx.dir, loop-aware), and calls rootCtx.onMenuOpen. Add a data-* marker on MenubarSubTrigger so opening a submenu is not hijacked by the next-menu navigation.
+- Give MenubarSub an uncontrolled mode: add a defaultOpen prop and use the repo's useVModel-equivalent so open is passive when `open` is undefined; pass :open to the default slot. Propagate the same into MenuSub or handle it in the menubar wrapper.
+- Stop unconditionally refocusing the trigger on close: track a hasInteractedOutside ref (set in @interact-outside) and only call triggerRef.focus() in close-auto-focus when the menubar is fully closed and the user did NOT interact outside (mirror reka). Always preventDefault to control focus deterministically.
+- Let consumers override align: switch MenubarContent to withDefaults({ align: 'start' }) and forward props (place v-bind AFTER, or merge align into props) instead of a static align="start" that clobbers the user value.
+- Guard aria-controls on MenubarTrigger so it is only set when the menu is open (e.g. :aria-controls="open ? contentId : undefined") to avoid a dangling IDREF while the Presence-gated content is unmounted.
+- Add :data-highlighted on MenubarTrigger driven by @focus/@blur (isFocused) for keyboard-focus styling parity.
+- Add the macOS guard: ignore pointerdown when event.ctrlKey is true in handlePointerDown.
+- Expose --primitives-menubar-trigger-width/height (aliasing --popper-anchor-width/height) on MenubarContent/SubContent, and expose modelValue from the MenubarRoot slot and open from the MenubarSub slot for parity and DX.
+- Keep robonen's genuine wins (trigger typeahead, ArrowUp-opens-menu, correct emit types, toggle-on-click) and add tests covering the new roving tabindex single-tab-stop, cross-menu arrow switching, and submenu uncontrolled defaultOpen.
+
+**Where robonen is already better:**
+- ✅ Trigger-level typeahead: MenubarRoot wires a keydown.capture handler that fills a shared searchRef, and MenubarTrigger watches it + uses getNextMatch to jump focus to the matching trigger (e.g. type 'v' -> focus 'View'). Reka's menubar has NO trigger typeahead at all (it only imports wrapArray, an array-rotation helper, not useTypeahead). This is a WAI-ARIA APG recommended behavior reka omits.
+- ✅ MenubarTrigger opens the menu on ArrowUp in addition to Enter/Space/ArrowDown (MenubarTrigger.vue handleKeyDown checks 'ArrowUp'). Reka's trigger only handles Enter/Space/ArrowDown (@keydown.enter.space.arrow-down), so ArrowUp does nothing on a reka trigger.
+- ✅ Correct emit typing: MenubarRootEmits is typed as ['update:modelValue': [value: string | undefined]]. Reka's MenubarRootEmits is mistyped as [value: boolean] (a real bug in reka-ui MenubarRoot.vue), which would mislead consumers using v-model.
+- ✅ contentId/triggerId are generated eagerly and deterministically via useId in MenubarMenu and provided through context; reka lazily mutates menuContext.contentId via ||= inside MenubarContent and even assigns triggerId = value (the user-supplied menu value), which can collide/duplicate ids if two menus share a value. Robonen's id wiring is cleaner and collision-safe.
+- ✅ Clicking an already-open trigger closes it: handlePointerDown calls rootCtx.onMenuToggle. Reka's pointerdown calls onMenuOpen (not toggle), so clicking the open trigger again does not close it via pointer (only via dismiss), which is arguably worse UX for a menubar.
+
+
+### accordion  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** AccordionHeader
+
+Both libraries cover the core accordion behavior (single/multiple, collapsible, controlled+uncontrolled v-model, disabled root+item, RTL/orientation-aware Arrow/Home/End keyboard nav, role=region + aria-labelledby + aria-expanded/controls, data-state/data-disabled/data-orientation). robonen is genuinely better in a few areas: it uses a real Collection instead of querySelectorAll('[data-reka-collection-item]'), it exposes a configurable `loop` prop the reka Accordion lacks, its keyboard logic is a clean testable util, and it avoids the ohash/useVModel deps with a cheap Set-equality guard. However reka is currently better in several concrete, verifiable ways that block 'strictly better': (1) reka has an AccordionHeader part required by the ARIA accordion pattern — robonen has none (critical a11y gap); (2) reka supports asChild everywhere, robonen only has `as`; (3) reka exposes measured --reka-accordion-content-height/width CSS vars enabling animate-to-auto, robonen exposes none; (4) reka supports hidden=until-found + beforematch find-in-page reveal, robonen uses plain hidden; (5) reka has Root+per-item unmountOnHide, type inference/validation of single vs multiple, a modelValue Root slot prop, item defineExpose, and type-generic emits — all absent in robonen. Verdict: robonen-better-with-gaps; closing the Header, asChild, content-dimension-vars, and beforematch gaps would make it strictly better.
+
+**Critical gaps:**
+- ⛔ (accessibility) reka ships an AccordionHeader part (AccordionHeader.vue, defaults to `as: 'h3'`, wires data-state/data-disabled/data-orientation) so the trigger is wrapped in a real heading element — the WAI-ARIA Accordion pattern REQUIRES each trigger button to live inside a heading element (h1-h6) for screen-reader heading navigation. robonen has NO Header part; consumers must hand-roll the heading and lose the data-* wiring.
+  - _evidence:_ reka Accordion/AccordionHeader.vue + index.ts exports AccordionHeader; robonen src/accordion/index.ts exports only Root/Item/Trigger/Content — no Header, violating the ARIA accordion heading requirement.
+
+**Major gaps:**
+- 🔶 (api-surface) reka supports `asChild` (render-as-child / polymorphic merge onto an existing child element) on every part via PrimitiveProps. robonen's PrimitiveProps only has `as` (primitive/Primitive.ts: `export interface PrimitiveProps { as?: ... }`) with no `asChild`/`as-child`. Consumers cannot merge accordion behavior onto an arbitrary child component; they are limited to the `as` element swap.
+- 🔶 (features) reka exposes `--reka-accordion-content-height` and `--reka-accordion-content-width` CSS custom properties (AccordionContent.vue style block, fed by CollapsibleContent measuring getBoundingClientRect). This is what lets users animate height/width from 0 to auto with pure CSS. robonen's AccordionContent renders <Presence> directly and provides NO measured dimension vars — animating to auto-height is impossible without user JS.
+- 🔶 (accessibility) reka supports `hidden="until-found"` + `beforematch` find-in-page expansion: when the browser's in-page find lands on collapsed content, CollapsibleContent fires `contentFound` and AccordionContent.vue auto-opens the item (`@content-found="rootContext.changeModelValue(...)"`). robonen AccordionContent uses `:hidden="!item.open.value || undefined"` (plain boolean hidden) and has no beforematch listener, so collapsed panels are invisible to Ctrl+F.
+
+**Minor gaps (6):**
+- ▫️ (api-surface) reka offers `unmountOnHide` at the Root (default true) AND a per-Item override (AccordionItem.vue `:unmount-on-hide="props.unmountOnHide ?? rootContext.unmountOnHide.value"`), letting consumers keep closed content in the DOM globally. robonen only has a per-Content `forceMount` boolean; there is no Root-level `unmountOnHide` and no per-item inheritance/override.
+- ▫️ (edge-cases) reka infers `type` from the shape of modelValue/defaultValue and validates coherence, logging a dev error on mismatch (useSingleOrMultipleValue.ts validateProps: single+array → error, multiple+non-array → error). robonen trusts the explicit `type` prop and silently coerces via toArray; passing defaultValue: ['a','b'] with type:'single' will not warn and will misbehave on emit (toEmitValue returns only the first value).
+- ▫️ (api-surface) reka's Root default slot exposes `modelValue` (AccordionRoot.vue defineSlots + `<slot :model-value="modelValue" />`), so consumers can render based on current open value(s) without re-deriving. robonen's Root slot exposes nothing (AccordionRoot.vue:150 `<slot />`).
+- ▫️ (api-surface) reka's AccordionItem calls `defineExpose({ open, dataDisabled })` so template refs / parent code can read an item's open state. robonen's AccordionItem (and Root) expose nothing beyond the forwarded element ref — no programmatic open/disabled introspection.
+- ▫️ (types) reka explicitly types Root emits generic on single vs multiple (`AccordionRootEmits<T extends SingleOrMultipleType>` → value is `string | undefined` for single, `string[] | undefined` for multiple). robonen's emit is the looser union `update:modelValue: [value: string | string[] | undefined]` regardless of type, so v-model is less type-safe in single mode.
+- ▫️ (edge-cases) reka guards the no-collapse case inside the Trigger as well as Root (AccordionTrigger.vue:21 `triggerDisabled = isSingle && open && !collapsible`) ensuring the click is a true early no-op. robonen relies solely on Root.toggle's nextOpenSet returning the same Set reference to skip commit (AccordionRoot.vue:82,108) — functionally correct but the trigger still always invokes ctx.toggle.
+
+**Recommendations to make robonen strictly better:**
+- Add an AccordionHeader.vue part (default `as: 'h3'`, forwarding data-state/data-disabled/data-orientation) and export it from index.ts, then update docs/stories to wrap AccordionTrigger inside AccordionHeader — this is required by the WAI-ARIA accordion pattern for heading-level screen-reader navigation.
+- Add `asChild`/`as-child` support to PrimitiveProps and the Primitive/Slot implementation so all accordion parts can merge onto a consumer-provided child element, matching reka's polymorphism.
+- Make AccordionContent measure its content box (getBoundingClientRect with animations temporarily disabled, like reka's CollapsibleContent) and expose `--accordion-content-height` / `--accordion-content-width` (or reuse collapsible vars) so consumers can animate open/close to auto height in pure CSS.
+- Implement `hidden="until-found"` + a `beforematch` listener that auto-opens the item, so collapsed panels are reachable by browser find-in-page; ideally route AccordionContent through CollapsibleContent and add the contentFound emit there.
+- Add a Root-level `unmountOnHide` prop (default true) with a per-item override that falls back to the root value, and have AccordionContent honor it instead of relying only on per-content forceMount.
+- Expose `modelValue` from the Root default slot, and `defineExpose({ open, disabled })` from AccordionItem for programmatic introspection.
+- Tighten the Root emit type to be generic over `type` (string|undefined for single, string[]|undefined for multiple) and add dev-time validation/inference of `type` from the modelValue/defaultValue shape (warn on single+array or multiple+non-array), mirroring reka's useSingleOrMultipleValue.
+- Add an explicit trigger-side no-op guard for the single+open+!collapsible case so clicks short-circuit before reaching Root.toggle (parity with reka's triggerDisabled), and consider routing each item through the existing Collapsible primitive to share content/animation logic instead of using Presence directly.
+
+**Where robonen is already better:**
+- ✅ Uses a real internal Collection (useCollectionProvider/CollectionInjector) for DOM-ordered trigger discovery. AccordionRoot.vue:111-112 `getItems(true).map(i => i.ref)`. reka instead does `rootContext.parentElement.value?.querySelectorAll('[data-reka-collection-item]')` on every keydown (AccordionItem.vue:95), which is slower, leaks a magic DOM attribute, and breaks if the trigger is teleported/portaled out of the root subtree.
+- ✅ Exposes a configurable `loop` prop on the Root (AccordionRoot.vue:28, threaded into rovingKeyToAction/resolveNextIndex). reka's Accordion does NOT expose loop at all — it always inherits useArrowNavigation's default `loop: true` with no way to disable wrap-around at first/last trigger.
+- ✅ Keyboard handling is centralized in the Root via a pure, unit-testable roving-focus util (utils/roving-focus.ts: rovingKeyToAction + resolveNextIndex). reka scatters nav into each Item's `handleArrowKey` and re-queries the DOM each time; robonen computes `triggerElements` once reactively.
+- ✅ openSet membership uses a Set with an O(n) early-exit `setEqualsArray` guard before reassigning (AccordionRoot.vue:63-74), avoiding the deep `isEqual`/`ohash` dependency reka pulls in via useSingleOrMultipleValue, and avoiding redundant writes on no-op model updates.
+- ✅ No external dependency on @vueuse/core useVModel or ohash for the controlled/uncontrolled logic — robonen implements it with a single shallowRef + watch, which is lighter weight.
+
+
+### editable  —  _robonen-better-with-gaps_
+
+
+Both libraries implement the same 7-part Editable (Root, Area, Preview, Input, Edit/Submit/Cancel triggers) with the same activationMode/submitMode/selectOnFocus/autoResize/maxLength/disabled/readonly/startWithEditMode props, identical placeholder resolution, the same Enter-submit / Escape-cancel keyboard model, and the same controlled+uncontrolled (modelValue/defaultValue) + update:state/submit emits. robonen is genuinely better in several places: a unified data-state hook across all parts (reka has none), correct data-placeholder-shown semantics tied to emptiness rather than edit mode, an edit() guard that also respects readonly, change-gated v-model emission, stricter string-only typing, and lighter reactivity (no deep watch). However robonen has real gaps versus reka: (1) CRITICAL — zero form integration; reka renders a VisuallyHiddenInput driven by name/required/useFormControl so the field submits with a form, while robonen has no name/required and no hidden input. (2) No dir/RTL support, despite robonen having a ConfigProvider used elsewhere. (3) Root does not defineExpose edit/cancel/submit (reka does), so the imperative API is context-only. (4) No id prop. (5) Outside-dismiss relies on a single focusout.capture rather than reka's pointerdown-outside + focus-outside DismissableLayer wiring, missing pointer-outside dismissal and nested-layer coordination. (6) Triggers lack aria-disabled. (7) No axe a11y test. Closing the form-integration, dir, and defineExpose gaps would make robonen strictly better, since it already wins on data-attribute design, semantics, and types.
+
+**Critical gaps:**
+- ⛔ (forms) No form integration at all. reka's EditableRootProps extends FormFieldProps (name, required) and renders a <VisuallyHiddenInput type="text" :value="modelValue" :name :disabled :required> inside the Root when useFormControl detects a surrounding form (EditableRoot.vue:241-248). robonen's EditableRootProps has no name/required props and renders no hidden input, so an Editable cannot participate in native form submission. robonen already ships a VisuallyHidden component (src/visually-hidden/) and a ConfigProvider, so the primitive is simply not wired up.
+  - _evidence:_ reka EditableRoot.vue:32 (FormFieldProps), :142 useFormControl(currentElement), :241-248 VisuallyHiddenInput; robonen EditableRoot.vue has no name/required/VisuallyHiddenInput
+
+**Major gaps:**
+- 🔶 (rtl-i18n) No RTL / direction support. reka accepts a dir prop, resolves it via useDirection(propDir) (falling back to ConfigProvider), and binds :dir on the Root Primitive (EditableRoot.vue:39,132,224). robonen's EditableRoot has no dir prop and binds no dir attribute, even though other robonen primitives (ListboxRoot.vue) already use config.dir. Editable cannot inherit or override reading direction.
+- 🔶 (api-surface) Root does not expose imperative methods. reka calls defineExpose({ submit, cancel, edit }) (EditableRoot.vue:188-195) so a template ref / parent can drive the editable programmatically. robonen's EditableRoot relies on useForwardExpose (which only forwards props and $el, not local functions) and never calls defineExpose, so edit/cancel/submit are reachable only via the injected context, not from a ref to <EditableRoot>.
+- 🔶 (edge-cases) Outside-dismiss is weaker. reka commits/cancels via BOTH usePointerDownOutside and useFocusOutside wired through the DismissableLayer system with data-dismissable-layer and layer-nesting awareness (EditableRoot.vue:183-184,227-230). robonen only listens to a single native @focusout.capture and checks root.contains(relatedTarget) (EditableRoot.vue:114-121). This misses pointerdown-outside dismissal (e.g. clicking a non-focusable area outside, or browsers where blur relatedTarget is null), and has no nested-layer coordination.
+
+**Minor gaps (4):**
+- ▫️ (api-surface) No id prop. reka exposes an id prop and threads it through context (EditableRoot.vue:57-58, context id: Ref<string|undefined>), enabling stable ids / aria wiring. robonen has neither an id prop nor id in its context (context.ts).
+- ▫️ (accessibility) Triggers omit aria-disabled. reka sets BOTH :aria-disabled and :disabled on Edit/Submit/Cancel triggers (e.g. EditableEditTrigger.vue:20-21). robonen sets only :disabled and :data-disabled (EditableEditTrigger.vue:24-25). When a consumer renders a trigger as a non-button element (as prop), the disabled attribute is inert and there is no aria-disabled to convey state to assistive tech.
+- ▫️ (keyboard) Input keydown also binds Space. reka's input handler is @keydown.enter.space (EditableInput.vue:68) so the submit path is evaluated on Space too (still gated by submitMode + key check inside). robonen only listens for Enter/Escape (EditableInput.vue:47-59). This is a minor behavioral divergence; reka's intent is to also intercept Space-driven submit semantics on non-input as targets.
+- ▫️ (accessibility) No documented axe accessibility test. reka's Editable.test.ts:29-32 runs axe(root) and asserts no violations, guarding the a11y contract. robonen's __test__/Editable.test.ts covers behavior but has no automated accessibility assertion.
+
+**Recommendations to make robonen strictly better:**
+- Add form integration to EditableRoot: extend props with name and required, add useFormControl(currentElement) (robonen already has a ConfigProvider/VisuallyHidden), and render a VisuallyHiddenInput type="text" :value="modelValue" :name :disabled :required inside the Root when inside a form and name is set. Mirror reka EditableRoot.vue:241-248. This is the only critical gap.
+- Add a dir prop to EditableRoot, resolve it against the existing ConfigProvider (computed(() => dir ?? config.dir.value), the pattern already used in ListboxRoot.vue:63), and bind :dir on the Root Primitive so reading direction is inheritable/overridable.
+- Call defineExpose({ edit, cancel, submit }) in EditableRoot so the imperative API is reachable from a template ref, matching reka EditableRoot.vue:188-195. (useForwardExpose alone does not forward local functions.)
+- Add an id prop to EditableRoot and thread it through context for stable ids; consider using useId fallback from config-provider/useId.
+- Strengthen outside-dismiss: in addition to focusout.capture, also handle pointerdown-outside (or adopt robonen's DismissableLayer equivalent if one exists) so clicking a non-focusable region outside while editing still commits/cancels per submitMode. Guard the focusout path for relatedTarget === null.
+- Add :aria-disabled="ctx.disabled.value || undefined" alongside :disabled on EditableEditTrigger/EditableSubmitTrigger/EditableCancelTrigger so disabled state is conveyed when rendered as a non-button element.
+- Tighten the modelValue type union: robonen already uses string-only which is good; keep it, but ensure the submit emit and v-model stay string (do not regress to reka's string|null|undefined).
+- Add an axe accessibility assertion to __test__/Editable.test.ts to lock in the a11y contract, matching reka Editable.test.ts:29.
+- Optional: also intercept Space in EditableInput keydown if you want parity with reka's @keydown.enter.space, though for a real <input> Enter-only is arguably more correct.
+
+**Where robonen is already better:**
+- ✅ Richer data-attribute surface on Root and sub-components: robonen exposes data-state="edit"|"preview" on Root (EditableRoot.vue:149), Area, Preview AND Input, plus data-disabled/data-readonly/data-empty consistently. reka only ever emits data-placeholder-shown / data-focus / data-focused / data-empty / data-readonly / data-disabled and never a unified data-state, and its Input lacks any state attribute. robonen's data-state is a better styling hook.
+- ✅ EditablePreview adds data-placeholder-shown using a dedicated showPlaceholder computed driven by isEmpty (EditablePreview.vue:19,36), so it is only set when the value is genuinely empty. reka sets data-placeholder-shown purely from !isEditing (EditablePreview.vue:32), so a non-empty preview that is not editing still reports data-placeholder-shown='' — robonen's semantics are more correct.
+- ✅ robonen's edit() guards against both disabled AND readonly before entering edit mode (EditableRoot.vue:95), preventing edit activation while readonly. reka's edit() has no such guard and will enter edit mode even when readonly (it only blocks the actual text mutation via the input's readonly attribute).
+- ✅ commitModel only emits update:modelValue when the value actually changed (EditableRoot.vue:88-92), avoiding redundant v-model emissions and a spurious submit-with-no-change write. reka's submit() always assigns modelValue.value = inputValue.value unconditionally (EditableRoot.vue:167).
+- ✅ Cleaner reactivity: robonen uses toRef(() => prop) getters for context refs and a shallowRef for the input element. reka's watch on modelValue uses { immediate: true, deep: true } (EditableRoot.vue:150-152) — deep:true on a plain string ref is unnecessary overhead.
+- ✅ modelValue typed strictly as string end-to-end (context.ts:14, EditableRoot.vue:7). reka types it as string | null | undefined (EditableRoot.vue:15-16) which leaks null/undefined into modelValue, inputValue, and the submit emit, weakening type guarantees for consumers.
+
+
+### tooltip  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** TooltipContentHoverable.vue (grace-area hoverable content wrapper)
+
+robonen's tooltip is a faithful, slightly cleaner port (better SSR guards, explicit timer disposal, richer JSDoc, and it uniquely surfaces sideFlip/alignFlip props that reka's tooltip hides). However it has one critical regression and several real API gaps versus reka. CRITICAL: there is no TooltipContentHoverable equivalent, so the entire hoverable-content / grace-area feature is dead — `isPointerInTransitRef` is read in the trigger but never set true, and with disableHoverableContent defaulting to false the content cannot be safely hovered and the skip-delay handoff between adjacent triggers is broken. robonen already ships src/utils/useGraceArea (used by hover-card), so this is purely un-wired. Additional gaps: the trigger does not accept/forward a `reference` anchor prop (reka extends PopperAnchorProps), the provider lacks the `content` default-props mechanism, the trigger uses data-tooltip-trigger instead of data-grace-area-trigger, no TooltipRootEmits type is exported, and controlled-only open changes bypass provider bookkeeping/broadcast. Verdict: robonen-better-with-gaps — strong foundation but NOT yet strictly better until at least the hoverable-content and reference/provider-content gaps are closed.
+
+**Critical gaps:**
+- ⛔ (features) robonen tooltip has NO hoverable-content support at all. reka ships a dedicated TooltipContentHoverable.vue that wires useGraceArea(trigger, content): it sets providerContext.isPointerInTransitRef and calls onClose() on pointer-exit of the safe-area polygon. robonen's TooltipContent.vue ALWAYS renders TooltipContentImpl directly and never branches on disableHoverableContent. Consequently `isPointerInTransitRef` (read in TooltipTrigger.vue:30) is initialized false in TooltipProvider.vue:54 and is NEVER set to true anywhere in the tooltip, and when disableHoverableContent is false (the DEFAULT), onTriggerLeave only does clearOpenTimer() (TooltipRoot.vue:145-147) with no grace-area tracking and no mechanism to close the tooltip once the pointer actually leaves toward/past the content. The whole hoverable feature and the skip-delay-between-adjacent-triggers protection are dead. Note: robonen ALREADY has src/utils/useGraceArea.ts and uses it in hover-card, so this is purely un-wired.
+  - _evidence:_ reka Tooltip/TooltipContent.vue:33 `:is="rootContext.disableHoverableContent.value ? TooltipContentImpl : TooltipContentHoverable"` + TooltipContentHoverable.vue:15-19 (useGraceArea + onPointerExit->onClose + isPointerInTransitRef assignment). robonen TooltipContent.vue:24-31 always mounts TooltipContentImpl; TooltipProvider.vue:54 isPointerInTransitRef never set true; useGraceArea exists at src/utils/useGraceArea.ts but tooltip never imports it.
+
+**Major gaps:**
+- 🔶 (api-surface) TooltipTrigger does not accept or forward a custom `reference` (anchor) element. reka's TooltipTriggerProps extends PopperAnchorProps and passes `:reference="reference"` to PopperAnchor, letting users position the tooltip against an arbitrary virtual/real element instead of the trigger DOM node. robonen's TooltipTriggerProps extends only PrimitiveProps and renders `<PopperAnchor as="template">` with no reference passthrough, even though robonen's own PopperAnchor supports a `reference` prop.
+- 🔶 (api-surface) TooltipProvider has no `content` default-props mechanism. reka's TooltipProviderProps exposes `content?: TooltipContentProps`, stored in provider context and merged into every tooltip's PopperContent via defu (provider defaults < per-content props). This lets an app set e.g. default side/sideOffset for all tooltips once. robonen's provider has no `content` prop or any provider-level content defaults.
+- 🔶 (edge-cases) The trigger marker attribute is `data-tooltip-trigger` instead of the convention `data-grace-area-trigger` that robonen's own useGraceArea looks for (`target.closest('[data-grace-area-trigger]')`). Even once hoverable content is wired, moving the pointer from one tooltip trigger directly onto an adjacent tooltip trigger would not be detected as 'another grace-area trigger', so the in-transit grace area would not be torn down/handed off correctly. reka tags its trigger `data-grace-area-trigger` precisely so useGraceArea recognizes it.
+
+**Minor gaps (2):**
+- ▫️ (types) TooltipRoot does not export a TooltipRootEmits type. reka exports `TooltipRootEmits = { 'update:open': [value: boolean] }` for explicit typing of the emit. robonen relies solely on defineModel('open') with no exported emits type, so consumers typing `@update:open` handlers have no named type to import.
+- ▫️ (edge-cases) robonen's open watcher / provider notification is driven imperatively inside handleOpen/handleClose/handleDelayedOpen, whereas reka centralizes provider onOpen/onClose + the TOOLTIP_OPEN dispatch in a single `watch(open)` so any external/controlled change to `open` also triggers provider skip-delay bookkeeping and the single-tooltip-open broadcast. In robonen, a purely controlled `open` flip (e.g. parent sets v-model true without going through onOpen) will NOT call providerCtx.onOpen() nor dispatch TOOLTIP_OPEN, so controlled-mode opens skip the skip-delay window update and won't auto-close other open tooltips.
+
+**Recommendations to make robonen strictly better:**
+- CRITICAL: Add a TooltipContentHoverable.vue (mirroring src/hover-card/HoverCardContentImpl.vue's usage of src/utils/useGraceArea) and make TooltipContent.vue render `<component :is="ctx.disableHoverableContent.value ? TooltipContentImpl : TooltipContentHoverable">`. Inside the hoverable variant, call `useGraceArea(ctx.trigger, currentElement)`, push isPointerInTransit into ctx.isPointerInTransitRef via watchEffect, and call ctx.onClose() in onPointerExit. This activates the existing-but-dead isPointerInTransitRef read in TooltipTrigger.vue:30 and makes disableHoverableContent meaningful.
+- Change the trigger marker from `data-tooltip-trigger` to `data-grace-area-trigger` (or add it alongside) so useGraceArea's `[data-grace-area-trigger]` lookup detects adjacent tooltip triggers; update the test selector in __test__/Tooltip.test.ts:80 accordingly.
+- Make TooltipTriggerProps extend PopperAnchorProps and forward `:reference` to PopperAnchor (the robonen PopperAnchor already supports it), enabling custom/virtual anchor elements.
+- Add a `content?: TooltipContentProps` prop to TooltipProvider, store it in TooltipProviderContext, and merge it as defaults in TooltipContentImpl (provider defaults < per-content props), matching reka's defu behavior for app-wide tooltip positioning defaults.
+- Export a `TooltipRootEmits` type (`{ 'update:open': [value: boolean] }`) from TooltipRoot.vue and re-export it from index.ts for typed @update:open handlers.
+- Drive provider.onOpen/onClose and the TOOLTIP_OPEN broadcast from a single `watch(open, ...)` (in addition to or instead of the imperative handlers) so externally/controlled open changes also update the skip-delay window and close other open tooltips.
+
+**Where robonen is already better:**
+- ✅ Exposes additional Popper positioning props in TooltipContentImplProps that reka's tooltip does NOT surface: `sideFlip` and `alignFlip` (reka's PopperContent supports them, but reka's TooltipContentImpl `Pick<PopperContentProps, ...>` omits them, so reka tooltip users cannot independently toggle main/cross-axis flipping). robonen forwards both to PopperContent (TooltipContentImpl.vue:9-21,116-120).
+- ✅ More robust SSR/teardown safety: TooltipRoot.dispatchOpenEvent guards `typeof document === 'undefined'`, TooltipContentImpl guards `typeof globalThis === 'undefined'` for scroll listeners, and both TooltipRoot/TooltipProvider use explicit onScopeDispose to clear open/skip timers (TooltipRoot.vue:91, TooltipProvider.vue:63). reka relies on useTimeoutFn/useEventListener auto-cleanup but does not guard the `document.dispatchEvent` in its open watcher beyond a lifecycle comment.
+- ✅ Cleaner uncontrolled-state model: TooltipRoot keeps a dedicated `local` ref and a defineModel get/set bridge (TooltipRoot.vue:53-61) instead of reka's useVModel `passive` cast trick (`passive: (props.open === undefined) as false`), which is more type-honest.
+- ✅ Richer JSDoc on every prop in TooltipProviderProps/TooltipRootProps describing a11y consequences and timing semantics, improving DX over reka's terser docs.
+- ✅ TooltipPortal forwards full TeleportPrimitiveProps via `v-bind="props"`, on par with reka.
+
+
+### pin-input  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** VisuallyHiddenInput (hidden form input rendered inside PinInputRoot for native form submission)
+
+Both libraries implement the same two parts (Root + Input) with the same core behavior: render-your-own N inputs, type-to-advance, Backspace-to-previous, paste-fills-across, mask (password), otp autocomplete, and a complete event. robonen is genuinely cleaner in some areas — it sets role=\"group\" on the root (reka sets no role anywhere), exposes isComplete in the slot, emits complete as a joined string, owns a `length` prop as a single source of truth with defensive single-char normalization, and avoids reka's deep watchers. However robonen has real gaps that prevent it from being strictly better. The critical one is the total absence of native form integration: reka renders a focusable VisuallyHiddenInput and supports name/required/id, while robonen cannot be submitted in a form. Other notable misses: no dir/RTL-aware arrow navigation, no per-input aria-label (a11y), no per-input disabled prop, no disabled-skipping navigation, no OTP sequential-fill focus guard, no placeholder-hide-on-focus, no as/asChild on the input, no numeric (number[]) typing, and no data-complete styling hooks. None of these are invented — each maps to a concrete reka symbol. Verdict: robonen-better-with-gaps; closing the form-integration, RTL, and aria-label items (the critical/major ones) is the path to strictly-better.
+
+**Critical gaps:**
+- ⛔ (forms) No native form integration at all: robonen renders no hidden input and PinInputRoot exposes no name/required/id props. reka renders <VisuallyHiddenInput :id :name :value=currentModelValue.join('') :disabled :required feature="focusable" tabindex=-1 @focus=focus-first-input> (PinInputRoot.vue:143-153) and extends FormFieldProps (name, required). A robonen pin-input cannot be submitted in a plain HTML <form>, cannot participate in required validation, and has no id for label association.
+  - _evidence:_ reka PinInputRoot.vue:28 (extends FormFieldProps), :47 (id prop), :143-153 (VisuallyHiddenInput with name/required/disabled/value); robonen PinInputRoot.vue has no name/required/id props and no hidden input.
+
+**Major gaps:**
+- 🔶 (rtl-i18n) No RTL/dir support. robonen hardcodes ArrowLeft=>previous and ArrowRight=>next (PinInputInput.vue:74-85) regardless of reading direction. reka passes dir into useArrowNavigation so in RTL ArrowRight moves to the previous logical input and ArrowLeft to the next (correct RTL behavior).
+- 🔶 (accessibility) Inputs have no aria-label, so screen readers announce N anonymous edit fields. reka sets a per-input label.
+
+**Minor gaps (10):**
+- ▫️ (api-surface) PinInputInput has no per-input `disabled` prop; only the root-level disabled is honored. reka lets each input be individually disabled and merges it with context disabled.
+- ▫️ (keyboard) Arrow navigation does not skip disabled inputs. robonen focusIndex(i±1) lands on an adjacent input even if it is disabled. reka's findNextFocusableElement recursively skips disabled elements.
+- ▫️ (keyboard) No OTP sequential-fill focus guard. In otp mode robonen lets the user focus and fill any input out of order. reka's handleFocus redirects focus to the first empty input so OTP is entered left-to-right without gaps.
+- ▫️ (features) Placeholder is always shown; it is not hidden on the focused/active input. reka clears the placeholder of the focused empty input for a cleaner UX.
+- ▫️ (api-surface) PinInputInput is a hardcoded raw <input> with no as/asChild polymorphism, so it cannot be rendered as a custom element or composed with asChild. reka's input extends PrimitiveProps (as:'input', asChild) and renders <Primitive>.
+- ▫️ (types) No typed numeric model. reka uses a generic PinInputValue<Type> producing number[] when type==='number' and stores numbers in the model. robonen always stores string[] regardless of type.
+- ▫️ (features) No data-complete state attribute exposed for styling on root or inputs, and inputs lack data-disabled. reka exposes data-complete on root (PinInputRoot.vue:138) and on each input plus data-disabled on each input (PinInputInput.vue:216-217).
+- ▫️ (edge-cases) Missing input hardening attributes for numeric/mobile UX: reka sets autocapitalize="none" and pattern="[0-9]*" (helps numeric soft-keyboards and iOS). robonen sets neither.
+- ▫️ (edge-cases) Caret/selection on user focus is not normalized. reka calls target.setSelectionRange(1,1) on focus so typing replaces the existing char predictably; robonen only calls el.select() during programmatic focusIndex and does nothing on real user focus/click.
+- ▫️ (code-quality) Root does not control attribute forwarding (no inheritAttrs:false). reka sets inheritAttrs:false and v-bind="$attrs" on the Primitive so attrs land on the wrapper predictably while the hidden form input is excluded; robonen relies on default attr inheritance with no explicit placement control.
+
+**Recommendations to make robonen strictly better:**
+- Add native form support: extend PinInputRoot props with name, required, id; render a focusable VisuallyHiddenInput (robonen already ships VisuallyHidden in src/visually-hidden) with :value=value.join(''), :name, :required, :disabled, tabindex=-1, and @focus forwarding to inputs.value[0].focus(). This closes the only critical gap.
+- Add `dir` prop + useDirection to PinInputRoot, expose dir in PinInputContext, and make ArrowLeft/ArrowRight direction-aware in PinInputInput.onKeyDown (in RTL, ArrowRight => previous, ArrowLeft => next).
+- Add :aria-label="`pin input ${index + 1} of ${length}`" to PinInputInput; keep the root role="group" advantage and consider an aria-label/aria-labelledby on the group.
+- Add a per-input `disabled` prop to PinInputInput merged with context.disabled, and make focusIndex skip disabled inputs (recursively find the next non-disabled index).
+- Add an @focus handler on PinInputInput implementing OTP sequential-fill (redirect focus to first empty input when otp is true) and setSelectionRange(1,1) for predictable caret/overwrite on user focus.
+- Hide the placeholder on the focused empty input (clear it on focus, restore on blur / when value changes).
+- Convert PinInputInput to render <Primitive :as="as" :as-child="asChild"> with PrimitiveProps so it supports as/asChild polymorphism instead of a hardcoded <input>.
+- Make the model generic over type: PinInputValue<Type> => number[] when type==='number', and store numbers accordingly (or explicitly document string[]-only as a deliberate choice).
+- Expose styling hooks: add :data-complete on the root and :data-disabled/:data-complete on each input.
+- Add autocapitalize="none" and :pattern="[0-9]*" (numeric) to the input element for better mobile/soft-keyboard behavior.
+- Set inheritAttrs:false + v-bind="$attrs" on the root Primitive so attribute forwarding is explicit and does not leak onto the (future) hidden form input.
+
+**Where robonen is already better:**
+- ✅ Root sets role="group" (PinInputRoot.vue:145) — reka sets NO role on its root or inputs, so robonen groups the inputs semantically for screen readers where reka does not.
+- ✅ Exposes isComplete to the default slot (PinInputRoot.vue:138/146: slot props { value, isComplete }) — reka's slot only exposes { modelValue } (PinInputRoot.vue:82-87), so robonen consumers can render completion UI without recomputing.
+- ✅ 'complete' event emits a ready-to-use joined string (PinInputRoot.vue:84 emit('complete', v.join(''))) — reka emits the raw array (PinInputRoot.vue:114), so robonen is slightly more ergonomic for the common case.
+- ✅ First-class `length` prop with normalize() clamping each cell to a single char and truncating overflow, plus a watcher that re-sizes the value array when length changes (PinInputRoot.vue:39-67). reka has no length prop and derives count purely from how many PinInputInput are mounted, so it has no single source of truth and no defensive clamping of incoming model values.
+- ✅ Defensive single-char enforcement: setAt slices to 1 char and re-syncs the DOM input after overwrite (PinInputInput.vue:48) preventing the native input from showing a stale/extra character.
+- ✅ Cleaner, lighter reactivity: no deep watcher on modelValue for completion. reka uses watch(modelValue, ..., { deep: true }) (PinInputRoot.vue:112-115) plus passive deep useVModel (deep:true) — robonen computes isComplete cheaply and emits complete inline in emitValue (PinInputRoot.vue:81-85).
+
+
+### collapsible  —  _robonen-better-with-gaps_
+
+
+Both libraries ship the same three parts (Root, Trigger, Content) with controlled+uncontrolled open state, disabled handling, aria-expanded/aria-controls wiring, data-state/data-disabled, and Presence-based mounting, so they are at structural parity on the basics. robonen is genuinely better in several places: its Trigger slot exposes `open`, its context offers onToggle/onOpen/onClose (vs reka's toggle-only), it publicly exports the provide/use context and context type for extensibility, and it only applies `disabled` to real button triggers. However, reka is clearly ahead on the animation and accessibility surface that defines a production Collapsible: it measures content and exposes `--reka-collapsible-content-height/width` CSS variables (critical for CSS height animations), supports `unmountOnHide` with `hidden=\"until-found\"` plus a `beforematch` listener and `contentFound` emit for find-in-page discoverability, suppresses the initial-mount animation, exposes `open` via defineExpose, and types its slots/emits. robonen lacks all of these. Verdict: robonen-better-with-gaps — it has a cleaner, more extensible API but is not yet strictly better because it is missing the content-size CSS variables (critical), unmountOnHide/until-found + beforematch (major a11y), and mount-animation suppression. Closing the listed gaps while keeping robonen's existing advantages would make it strictly better.
+
+**Critical gaps:**
+- ⛔ (features) No content size CSS variables. reka measures the content element via getBoundingClientRect in a watcher and exposes `--reka-collapsible-content-height` and `--reka-collapsible-content-width` as inline styles, which is the standard mechanism for CSS height/width transitions on collapse/expand. robonen's CollapsibleContent.vue exposes NO such variables and performs no measurement, so consumers cannot do the canonical CSS-driven height animation.
+  - _evidence:_ reka CollapsibleContent.vue lines 40-78,112-115 (width/height refs, getBoundingClientRect watcher, `--reka-collapsible-content-height/width` style binding). robonen CollapsibleContent.vue has nothing equivalent.
+
+**Major gaps:**
+- 🔶 (accessibility) No `unmountOnHide` prop and no `hidden="until-found"`. reka supports keeping content mounted while hidden and emits `hidden="until-found"` so the browser's find-in-page can locate and reveal collapsed text. robonen always unmounts via Presence and always sets plain `hidden`, breaking find-in-page discoverability and any keep-mounted use case. Notably robonen already implements `unmountOnHide` in its navigation-menu primitive, so this is an inconsistency, not a missing capability.
+- 🔶 (accessibility) No `beforematch` handling / `contentFound` emit. reka listens for the browser `beforematch` event (fired when find-in-page is about to reveal a `hidden=until-found` element) and auto-opens the collapsible plus emits `contentFound`. robonen has neither the listener nor the event, so even if it added until-found, search would not sync the open state.
+
+**Minor gaps (5):**
+- ▫️ (edge-cases) No initial-mount animation suppression. reka prevents the open/close animation from firing on first mount (so a defaultOpen collapsible does not animate in) by tracking `isMountAnimationPrevented` and computing `skipAnimation`, which nulls out `data-state` on the very first frame. robonen always renders `data-state` immediately, so a default-open collapsible can play its enter animation on page load.
+- ▫️ (api-surface) Root does not expose `open` via template ref. reka calls `defineExpose({ open })` so a parent holding a ref to CollapsibleRoot can read the live open state. robonen's CollapsibleRoot does not defineExpose `open` (it only forwards the element ref via useForwardExpose), so the open state is not reachable from a component ref.
+- ▫️ (types) Root default slot is untyped. reka declares `defineSlots<{ default?: (props: { open: boolean }) => any }>()`, giving consumers typed slot props in templates. robonen's CollapsibleRoot has no defineSlots, so the `open` slot prop is untyped for consumers.
+- ▫️ (types) No exported emit type for the open event. reka exports `CollapsibleRootEmits` (`update:open`). robonen relies on defineModel('open'), which works at runtime and types the model, but exports no emit type from index.ts, so consumers wrapping the component (e.g. useForwardPropsEmits-style) have no named emit contract to import.
+- ▫️ (api-surface) No explicit asChild API on parts. reka threads `:as-child="props.asChild"` to every Primitive (Root/Trigger/Content), offering the conventional asChild boolean for composition. robonen's Primitive (primitive/Primitive.ts) has no `asChild` prop at all and relies on `as="template"` instead. This is an architectural choice rather than a pure bug, but it is an API-surface and ecosystem-familiarity gap for users migrating from Radix/reka.
+
+**Recommendations to make robonen strictly better:**
+- Add content measurement and expose `--collapsible-content-height` / `--collapsible-content-width` CSS variables on CollapsibleContent, mirroring reka's getBoundingClientRect watcher (reka CollapsibleContent.vue lines 40-78,112-115). This is the highest-impact gap: without it consumers cannot do CSS height/width animations, the primary reason a Collapsible exists.
+- Add an `unmountOnHide?: boolean` prop to CollapsibleRoot (reuse the exact pattern already in robonen NavigationMenuRoot) and thread it through context. When `unmountOnHide` is false, keep the content mounted and render `hidden="until-found"` instead of `hidden=true` so browser find-in-page can reveal collapsed content.
+- Add a `beforematch` listener on the content element that auto-opens the collapsible (call onOpen/onToggle) and add a `contentFound` emit to CollapsibleContent so find-in-page reveals stay in sync with open state.
+- Add initial-mount animation suppression: track an `isMountAnimationPrevented` flag reset on requestAnimationFrame after mount and null out `data-state` for the first frame (reka skipAnimation) so a defaultOpen collapsible does not animate on load.
+- Call `defineExpose({ open })` in CollapsibleRoot so parents can read open via a template ref, matching reka.
+- Add `defineSlots<{ default?: (props: { open: boolean }) => any }>()` to CollapsibleRoot (and a typed slot for Trigger/Content) for typed slot props.
+- Export a `CollapsibleRootEmits` (`update:open`) type from index.ts for consumers who wrap and forward emits, even though defineModel is used internally.
+- Consider adding an explicit `asChild` boolean to Primitive (or document the `as="template"` equivalence prominently) to match the conventional Radix/reka composition API and ease migration.
+- Keep robonen's wins: retain the onOpen/onClose context methods, the open-aware Trigger slot, the public provide/use context exports, and the button-only :disabled guard — these are genuine improvements over reka and should not be regressed.
+
+**Where robonen is already better:**
+- ✅ Trigger slot is data-rich: robonen passes `<slot :open="ctx.open.value" />` (CollapsibleTrigger.vue line 30), so consumers can render trigger UI based on open state. reka's CollapsibleTrigger.vue line 32 renders a bare `<slot />` with no slot props.
+- ✅ More granular context control surface: robonen's CollapsibleContext (context.ts) exposes `onToggle`, `onOpen`, and `onClose`. reka's CollapsibleRootContext (CollapsibleRoot.vue) exposes only `onOpenToggle`. robonen lets advanced consumers force-open or force-close, not just toggle.
+- ✅ Public, extensible context API: robonen's index.ts exports `provideCollapsibleContext`, `useCollapsibleContext`, and the `CollapsibleContext` type. reka's index.ts exports only `injectCollapsibleRootContext` (no provide function and no exported context type), so reka consumers cannot re-provide or strongly type the context for custom parts.
+- ✅ Safer disabled attribute on non-button triggers: robonen's CollapsibleTrigger.vue line 27 sets `:disabled="as === 'button' ? ctx.disabled.value : undefined"`, avoiding an invalid `disabled` attribute when `as` is a non-button element. reka's CollapsibleTrigger.vue line 29 sets `:disabled="rootContext.disabled?.value"` unconditionally, which would emit a `disabled` attribute on a div/anchor when disabled.
+- ✅ Lighter reactivity for disabled: robonen uses `toRef(() => disabled)` (CollapsibleRoot.vue line 34, identity passthrough without computed caching). reka uses `toRefs(props)` which is comparable, but robonen's intent/comment is explicit and avoids any over-subscription.
+
+
+### primitive  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** usePrimitiveElement composable (element ref normalization), asChild prop, SELF_CLOSING_TAGS handling, exported AsTag type
+**Parts robonen has that reka lacks:** renderSlotChild shared helper (dedup between Slot and template path), getRawChildren with keyed-fragment BAIL handling, Primitive.bench.ts benchmark suite, DEV warning on multiple children
+
+robonen's Primitive is leaner and faster on the common path (raw functional component, shared renderSlotChild, no extra instance for as=\"template\"), adds a DEV multi-child warning, smarter keyed-fragment BAIL flattening, and a dedicated benchmark suite — genuine wins over reka. However it is NOT strictly better: it has a critical regression because it omits the `asChild` prop entirely while its own consuming components (Menubar/HoverCard/DropdownMenu) pass :as-child, which currently leaks as a literal DOM attribute and does nothing. It also lacks reka's self-closing/void-tag hydration handling (img/input/area), uses attrs-win merge order instead of reka's child-props-win mergeProps (failing reka's 'child overrides parent' contract), renders only the first slot child vs reka's multi-child passthrough, does not strip the child's incoming ref before cloning, ships no colocated element-ref composable (usePrimitiveElement), and exports a broader/less-curated `as` type with no AsTag alias. Verdict: robonen-better-with-gaps — fix asChild (critical), void-tag handling, and merge precedence to reach strictly-better.
+
+**Critical gaps:**
+- ⛔ (api-surface) robonen's Primitive does NOT declare an `asChild` prop at all (Primitive.props only contains `as`). Yet robonen's own consuming components pass `:as-child="asChild"` to <Primitive> (MenubarTrigger.vue:129, MenubarRoot.vue:93, HoverCardTrigger.vue:38, HoverCardContentImpl.vue:141, DropdownMenuTrigger.vue, etc.). Because `asChild` is undeclared and inheritAttrs=false, it falls into ctx.attrs and is rendered via h(as!, ctx.attrs, ...) as a literal `as-child` DOM attribute when `as` is a string tag, instead of switching to Slot/template merge mode. So asChild is silently broken across robonen's library and leaks an invalid attribute to the DOM.
+  - _evidence:_ reka Primitive.ts declares `asChild: { type: Boolean, default: false }` and computes `const asTag = props.asChild ? 'template' : props.as`. robonen Primitive.ts has no asChild prop; Primitive.props = { as: {...} } only; render is `as === 'template' ? renderSlotChild(...) : h(as!, ctx.attrs, ctx.slots)`.
+
+**Major gaps:**
+- 🔶 (ssr) No self-closing/void-tag handling. robonen always passes ctx.slots as the 3rd arg to h() for any non-template tag, including void elements like img/input/area. Passing children/default slot to void tags causes SSR hydration mismatches and invalid DOM.
+- 🔶 (edge-cases) Slot attr/prop merge priority differs. reka's Slot deletes the child's incoming ref and uses mergeProps(attrs, childProps) so the CHILD's props (e.g. id, data-type) override the parent attrs, then cloneVNode(child, mergedProps). robonen's renderSlotChild does cloneVNode(only, attrs, true): Vue's cloneVNode gives the passed `attrs` priority for plain props (id, data-*), so a parent id/data-attr would override the child's same-named prop rather than the child winning. reka's test 'should replace parent attributes with child's attributes' asserts the child wins (id=child, data-type=primary).
+
+**Minor gaps (5):**
+- ▫️ (api-surface) No element-ref forwarding composable colocated with the Primitive. reka exports usePrimitiveElement from the Primitive module, giving a normalized currentElement that resolves the real HTMLElement even when the root vnode is a #text/#comment node (uses nextElementSibling). robonen's Primitive folder exports only Primitive and Slot; consumers rely on useForwardExpose from a separate @robonen/vue package, so the Primitive package itself does not provide a ref-normalization primitive and there is no exported usePrimitiveElement equivalent here.
+- ▫️ (edge-cases) Slot only ever renders ONE child. reka's Slot returns the full children array (cloning attrs onto the first non-comment child but keeping the rest), so <Primitive as="template"> with multiple siblings renders them all. robonen's renderSlotChild returns just children[0], discarding any subsequent siblings.
+- ▫️ (edge-cases) Child incoming `ref` is not stripped before merge. reka explicitly `delete firstNonCommentChildren.props?.ref` so a ref already on the slotted child does not get double-applied/conflict when attrs (which may carry a forwarded ref) are merged. robonen's renderSlotChild does not delete the child's ref before cloneVNode, which can cause ref conflicts in asChild/template ref-forwarding scenarios.
+- ▫️ (types) Less curated `as` type and no exported AsTag. reka exports an `AsTag` union (a|button|div|form|h2|h3|img|input|label|li|nav|ol|p|span|svg|ul|template|({}&string)) giving good autocomplete plus open-ended strings. robonen types `as` as `keyof IntrinsicElementAttributes | Component`, which is broader/noisier for autocomplete, has no exported reusable tag alias, and notably the tests note h() struggles with the broad union (@ts-expect-error in Primitive.test.ts line 334).
+- ▫️ (edge-cases) No onUpdated-driven ref re-sync for conditional rendering. reka's element resolution (useForwardExpose/usePrimitiveElement consumers) handles the case where $el changes across v-if/v-else while the component instance ref stays the same, by triggering a ref update on update. The Primitive package in robonen ships no such ref-normalization at all (delegated entirely to external @robonen/vue), so the Primitive module alone cannot guarantee a stable resolved element across conditional root swaps.
+
+**Recommendations to make robonen strictly better:**
+- Add an `asChild?: boolean` prop to robonen's Primitive (declare it in Primitive.props as { type: Boolean, default: false } and in PrimitiveProps), and compute the effective tag as `const tag = props.asChild ? 'template' : props.as`. This is urgent: MenubarTrigger/MenubarRoot/HoverCardTrigger/HoverCardContentImpl/DropdownMenuTrigger all pass :as-child today and it currently leaks as a literal DOM attribute / does nothing.
+- Add self-closing/void tag handling: define SELF_CLOSING_TAGS = ['area','img','input','br','hr','wbr','source','track','col','embed', ...] and when `as` is one of them render `h(as, ctx.attrs)` WITHOUT passing ctx.slots, to avoid SSR hydration mismatches (parity with reka, ideally a more complete void-element list).
+- In renderSlotChild, switch from `cloneVNode(child, attrs, true)` to merging with child precedence: strip the child's incoming ref (`delete child.props?.ref`) and use `mergeProps(attrs, child.props)` so child props (id, data-*, etc.) override parent attrs — matching reka's documented behavior and its 'replace parent attributes with child's attributes' test.
+- Decide on multi-child semantics: either keep single-child + DEV warning (current) OR match reka by returning all children with attrs applied to the first non-comment child. If staying single-child, document it as an intentional stricter contract; if matching reka, return the full children array.
+- Export an AsTag union type (curated common tags plus `({} & string)`) from primitive/index.ts and use it for PrimitiveProps['as'] to improve autocomplete and remove the @ts-expect-error in the tests around h() + broad union.
+- Provide a colocated element-ref composable in the primitive package (e.g. usePrimitiveElement) that normalizes $el for #text/#comment roots via nextElementSibling and re-syncs on onUpdated/triggerRef for v-if/v-else root swaps, so the Primitive package is self-contained rather than depending solely on @robonen/vue's useForwardExpose.
+- Add tests covering: asChild=true switching to Slot mode, void-tag rendering without slots (no hydration warning), child-prop-overrides-parent-attr precedence, child ref not double-applied, and multi-child behavior — to lock in the above fixes and prevent regressions like the current silent asChild leak.
+
+**Where robonen is already better:**
+- ✅ Lower runtime overhead on the common path: robonen's Primitive is a raw functional component (export function Primitive(...) with Primitive.props/inheritAttrs), so the non-template path is a single h(as, ctx.attrs, ctx.slots) call with NO extra component instance. reka uses defineComponent + a setup() that returns a render fn, and for template/asChild mode wraps in a second component h(Slot, attrs, ...), adding an extra instance. robonen's Slot.ts even shares renderSlotChild between <Slot> and <Primitive as="template"> specifically to avoid an extra functional component instance on the template path (see comment in Slot.ts).
+- ✅ Dedicated benchmark suite: robonen ships Primitive.bench.ts measuring Primitive vs raw h(), Slot scaling by attr count, edge cases, and mount+update via render(). reka has no perf benchmarks for Primitive.
+- ✅ DEV-mode diagnostics: robonen's renderSlotChild warns via Vue's warn() when multiple valid children are passed to Slot/template mode ('<Slot> can only be used on a single element or component.'), guarded by __DEV__. reka's Slot silently renders multiple children with no warning.
+- ✅ More correct fragment flattening for keyed lists: robonen's getRawChildren detects multiple KEYED_FRAGMENTs and sets PatchFlags.BAIL on the resulting vnodes to force full diff (avoids stale keyed-list patching). reka's renderSlotFragments just flatMaps fragments recursively with no keyed-fragment BAIL handling.
+- ✅ Explicit Fragment AND Comment filtering in the single-child fast path: robonen checks t !== Fragment && t !== Comment before the one-child cloneVNode shortcut, so a lone Fragment/Comment correctly falls through to flattening. reka's single-child handling relies only on findIndex(child.type !== Comment).
+
+
+### hover-card  —  _robonen-better-with-gaps_
+
+
+Parts are 1:1 (Root, Trigger, Portal, Content, ContentImpl, Arrow) and core behavior (open/close delays, grace-area transit, selection containment, scroll-dismiss, DismissableLayer wiring, Popper positioning, controlled/uncontrolled open) matches reka closely. robonen is genuinely better in several spots: it clears Root timers on scope dispose (reka leaks a pending timer past unmount), short-circuits zero delays, actually forwards the interactOutside emit (reka declares it but never wires it), and has a cleaner first-class forceMount on Presence. The decisive gap is accessibility: reka strips its hover-card content out of the tab sequence by setting tabindex=-1 on tabbable descendants on mount, while robonen ships getTabbableNodes as dead code and never neutralizes tab order — a critical regression for keyboard users. Secondary gaps are API-surface: robonen's HoverCardContent Pick drops prioritizePosition, disableUpdateOnLayoutShift, reference, and hideShiftedArrow (all supported by its own PopperContent), does not forward a ref from HoverCardContent, and exports no HoverCardRootEmits type. Fixing the tabindex behavior and widening the content prop forwarding would make robonen strictly better than reka.
+
+**Critical gaps:**
+- ⛔ (accessibility) Hover-card content is NOT removed from the tab sequence. Reka, in HoverCardContentImpl onMounted (lines 65-71), calls getTabbableNodes(contentElement) and sets tabindex="-1" on every tabbable descendant, because a hover-triggered card must not become a keyboard tab stop (its focusable children would otherwise be reachable while the card is invisible/positioned off the reading flow). robonen DEFINES getTabbableNodes in utils.ts (lines 9-20) but NEVER calls it anywhere — it is dead code, and HoverCardContentImpl performs no tabindex neutralization. Result: focusable elements inside robonen's hover card stay in the tab order.
+  - _evidence:_ reka HoverCardContentImpl.vue:65-71 (getTabbableNodes + setAttribute('tabindex','-1')); robonen utils.ts:9-20 getTabbableNodes is exported/unused, HoverCardContentImpl.vue has no equivalent onMounted tabindex handling
+
+**Major gaps:**
+- 🔶 (api-surface) Content omits the prioritizePosition positioning option. Reka's HoverCardContentImplProps extends the full PopperContentProps, so prioritizePosition (force content within viewport, overriding side/align) is passable. robonen's HoverCardContentImplProps Pick<PopperContentProps, ...> (HoverCardContentImpl.vue:5-21) does not include prioritizePosition, even though robonen's own PopperContent supports it (PopperContent.vue:40,87,169-185).
+- 🔶 (api-surface) Content omits disableUpdateOnLayoutShift. Same root cause: reka forwards the whole PopperContentProps; robonen's Pick list does not include disableUpdateOnLayoutShift, although robonen PopperContent implements it (PopperContent.vue:38,86,208).
+
+**Minor gaps (4):**
+- ▫️ (api-surface) Content omits the custom reference (virtual/anchor) element prop. Reka's ContentImpl extends PopperContentProps which includes reference (PopperContent.vue:175), so a custom anchor can be set directly on the content. robonen's Content Pick does not include reference (only the Trigger exposes reference via PopperAnchor), so you cannot point the content at a custom reference element the way reka allows.
+- ▫️ (api-surface) Content does not forward a ref / expose its element, and does not use a forward-props-emits helper. Reka's HoverCardContent uses useForwardExpose + :ref="forwardRef" on HoverCardContentImpl (HoverCardContent.vue:25,35) and useForwardPropsEmits (line 24), so consumers can templateRef the content. robonen's HoverCardContent (HoverCardContent.vue) neither forwards a ref to ContentImpl nor exposes currentElement, so the content element is not reachable from a parent ref on <HoverCardContent>.
+- ▫️ (types) No exported Root emits type. Reka exports HoverCardRootEmits ({ 'update:open': [boolean] }) from HoverCardRoot.vue and re-exports it from index.ts, giving consumers a named emit contract. robonen relies on defineModel('open') and exports no emits type, so there is no HoverCardRootEmits in its public index.ts.
+- ▫️ (features) Content omits hideShiftedArrow. robonen's own PopperContent supports hideShiftedArrow (PopperContent.vue:'Hide arrow when it cant be centered'), but the HoverCardContentImpl Pick list does not forward it, so users cannot control that arrow behavior through the hover card. (reka uses a different arrow model, so this is a self-consistency gap rather than strict parity.)
+
+**Recommendations to make robonen strictly better:**
+- Wire up getTabbableNodes: in HoverCardContentImpl onMounted, walk getTabbableNodes(currentElement.value) and set tabindex="-1" on each, matching reka HoverCardContentImpl.vue:65-71. This removes hover-card content from the tab order (critical a11y) and eliminates the dead export in utils.ts.
+- Replace the Pick<PopperContentProps, ...> in HoverCardContentImpl with `extends PopperContentProps` (or extend the Pick to also include 'prioritizePosition', 'disableUpdateOnLayoutShift', 'reference', and 'hideShiftedArrow'), and forward all of them (or v-bind the forwarded props + $attrs) to <PopperContent>. This restores full positioning surface parity with reka.
+- Add ref forwarding to HoverCardContent: use useForwardExpose() and bind :ref="forwardRef" on HoverCardContentImpl, and forward props/emits via a useForwardPropsEmits-style helper so a parent ref on <HoverCardContent> resolves to the content element.
+- Export a named HoverCardRootEmits type ({ 'update:open': [value: boolean] }) from HoverCardRoot.vue and index.ts so consumers have an explicit emit contract like reka.
+- Simplify HoverCardTrigger.onPointerLeave: both branches call ctx.onClose() when !isPointerInTransit, so collapse to a single `if (!ctx.isPointerInTransit.value) ctx.onClose()`; then decide deliberately whether to keep reka's extra `&& !open` guard (reka only cancels a pending open on trigger-leave and lets the content grace area handle close-while-open). Current robonen code is redundant and diverges from reka without a documented reason.
+- Keep robonen's wins (timer cleanup, <=0 fast path, interactOutside forwarding, first-class forceMount) — they already exceed reka; just close the gaps above to reach strictly-better.
+
+**Where robonen is already better:**
+- ✅ Root clears its open/close timers on teardown via onScopeDispose (HoverCardRoot.vue:84-87), preventing a late setOpen() firing after unmount. Reka's HoverCardRoot never clears openTimerRef/closeTimerRef on unmount (no onUnmounted/onScopeDispose), so a pending timer can call open.value=... after teardown.
+- ✅ Root short-circuits the delay when openDelay<=0 / closeDelay<=0 by calling setOpen synchronously (HoverCardRoot.vue:55-58,68-71), avoiding a needless setTimeout(0) round-trip. Reka always schedules a window.setTimeout regardless of delay (HoverCardRoot.vue:73,79).
+- ✅ robonen actually forwards the interactOutside event to consumers (HoverCardContentImpl.vue:135 emits('interactOutside') and HoverCardContent.vue:29 re-emits it). Reka declares interactOutside in HoverCardContentImplEmits (=DismissableLayerEmits) but its HoverCardContentImpl template (lines 88-95) only wires escapeKeyDown/pointerDownOutside/focusOutside/dismiss and never forwards interactOutside — a type-vs-runtime mismatch robonen avoids.
+- ✅ Presence integration is cleaner: robonen passes a first-class :force-mount prop to <Presence> (HoverCardContent.vue:23), whereas reka folds it into :present="forceMount || open" (HoverCardContent.vue:31-33).
+- ✅ robonen adds a data-hover-card-trigger hook attribute on the trigger (HoverCardTrigger.vue:40) for easier querying/testing; reka only emits data-grace-area-trigger.
+- ✅ useGraceArea is self-contained with an explicit POINTER_TRANSIT_TIMEOUT reset timer and onScopeDispose cleanup (useGraceArea.ts), and syncs state with a plain watchEffect (HoverCardContentImpl.vue:66-68) instead of pulling in @vueuse/shared syncRef like reka (HoverCardContentImpl.vue:28).
+- ✅ Every prop carries JSDoc (HoverCardRootProps, PopperContentProps picks), improving editor hints over reka's sparser comments.
+
+
+### tags-input  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** VisuallyHiddenInput rendered inside Root for native form submission (imported from @/VisuallyHidden, supports primitive/array/object values + empty-required edge case)
+
+Both libraries ship the same six parts (Root, Input, Item, ItemText, ItemDelete, Clear) with near-identical keyboard handling (Backspace/Delete to select-then-remove last tag, RTL-aware ArrowLeft/Right, Home/End jump within an active selection, ArrowUp/Down prevented while a tag is selected), composition (Enter/Tab/blur/paste/delimiter), v-model + uncontrolled defaultValue, duplicate/max/disabled handling, dir inheritance from ConfigProvider, convertValue/displayValue, and the same data-state/aria-labelledby/aria-current wiring on items. robonen is genuinely better on reactivity (shallowRef + manual equality watch vs reka's deep useVModel), display-aware duplicate detection, trimmed/empty-skipping paste, correct removeTag value emission (reka has a latent disabled-index desync bug), and tighter generics. However robonen has real, fixable gaps versus reka: it has NO native form integration (no name/required/id, no useFormControl, no VisuallyHiddenInput bubbling) — the single critical miss; object/complex tag values are unsafe (no convertValue guard, identity-based delete instead of deep isEqual); addOnBlur lacks the aria-controls relatedTarget guard needed for Combobox composition; and it lacks the data-focused state and the Root id-to-input wiring. Net: robonen is the stronger core implementation but is NOT yet strictly better because of the missing form layer and weaker object-value support.
+
+**Critical gaps:**
+- ⛔ (forms) No native form integration whatsoever. reka Root extends FormFieldProps (name, required), accepts an `id` prop, calls useFormControl(currentElement), and renders <VisuallyHiddenInput :name :value :required :disabled> when inside a form (TagsInputRoot.vue lines 10, 92, 103, 252-258). This bubbles the tag array (and even object/array-of-object values, plus an empty-required hidden input) into native form submission and constraint validation. robonen Root has no name/required/id props, no useFormControl, and renders no hidden input — tags cannot be submitted with a plain HTML form.
+  - _evidence:_ reka TagsInputRoot.vue FormFieldProps + VisuallyHiddenInput block (lines 252-258) and VisuallyHidden/VisuallyHiddenInput.vue parsedValue logic; robonen TagsInputRoot.vue has no name/required/id and no VisuallyHidden import.
+
+**Major gaps:**
+- 🔶 (edge-cases) Object/complex tag values are not safely supported. reka throws an explicit Error ('You must provide a `convertValue` function when using objects as values.') when objects are used without convertValue (TagsInputRoot.vue lines 124-130), and TagsInputItemDelete compares with deep `isEqual` from ohash (TagsInputItemDelete.vue lines 3, 28). robonen has no such guard (convert just casts `raw as unknown as T`, line 100) and TagsInputItemDelete finds the index with strict identity `v === item.value.value` (TagsInputItemDelete.vue line 20), so deleting an object tag by clicking its delete button fails whenever the stored object is not the same reference, and duplicate-checking objects is broken.
+- 🔶 (features) addOnBlur does not skip blurs into associated popup content. reka's handleBlur reads the input's `aria-controls` id and, if the blur's relatedTarget is inside that controlled element, returns early so it does NOT commit the typed value (TagsInputInput.vue lines 36-41) — essential when TagsInput is composed with a Combobox/listbox so clicking an option adds the option, not the raw text. robonen's onBlur (TagsInputInput.vue lines 65-71) has no relatedTarget/aria-controls check and will wrongly commit the current input text when focus moves into popup content.
+
+**Minor gaps (3):**
+- ▫️ (features) No `data-focused` state on the Root. reka uses useFocusWithin(currentElement) and sets `:data-focused="focused ? '' : undefined"` on the Root primitive (TagsInputRoot.vue lines 102, 248), letting consumers style the whole control while focus is anywhere inside. robonen exposes only data-disabled and data-invalid on Root (TagsInputRoot.vue lines 243-244) — no focus-within styling hook.
+- ▫️ (api-surface) No `id` prop on Root forwarded to the input. reka accepts Root `id` and passes it to the input element via context (`:id="context.id?.value"`, TagsInputInput.vue line 147; Root id prop line 31). This is the wiring point for label `for=` / aria-controls in composed widgets. robonen has no id prop on Root and never sets an id on the input, so associating an external <label for> or aria-controls requires manual attribute passthrough.
+- ▫️ (types) modelValue type is narrower for the controlled/null case. reka types modelValue as `Array<T> | null` and normalizes non-arrays to [] via currentModelValue (TagsInputRoot.vue lines 11, 110). robonen types modelValue as `U[]` only (TagsInputRoot.vue line 7); passing null/undefined as a controlled value is not part of the contract and there is no Array.isArray normalization guard, so a non-array slip-through would throw.
+
+**Recommendations to make robonen strictly better:**
+- Add native form integration to TagsInputRoot: extend props with FormFieldProps-style `name?: string`, `required?: boolean`, and `id?: string`; detect form ancestry (a useFormControl equivalent) and render a hidden form-bubbling input (build/expose a VisuallyHiddenInput in src/visually-hidden that serializes arrays and object values like reka's VisuallyHiddenInputBubble, including the empty-required case). Forward `id` from Root through context to the <input> (`:id`).
+- Guard object/complex values: throw a descriptive error in onAddValue when the model contains objects but no convertValue is supplied, and switch TagsInputItemDelete's index lookup (and the root duplicate check) to a deep-equality helper (ohash isEqual or an internal structural compare) instead of strict `===`, so object tags can be deleted and de-duplicated correctly.
+- Harden addOnBlur: in TagsInputInput.onBlur, read the input's aria-controls id and bail out when event.relatedTarget is inside that controlled element (use CSS.escape), matching reka, so composing TagsInput with a Combobox/listbox does not commit the raw text when an option is clicked.
+- Add focus-within state: wire a useFocusWithin (VueUse) on the Root element and emit `:data-focused=""` when focus is inside, giving consumers a styling hook parity with reka.
+- Widen the controlled contract: type modelValue as `U[] | null` and add an Array.isArray normalization in the watch/init so null/undefined controlled values resolve to [] instead of risking a throw.
+- Optional polish: skip emitting `update:modelValue` from Clear/onRemoveValue when the array is already empty (already partly done in Clear) and consider exposing the focused/selected state and an imported VisuallyHiddenInput from the package index for downstream composition.
+
+**Where robonen is already better:**
+- ✅ Reactivity/perf: Root uses shallowRef + a manual length+identity equality watch on modelValue (TagsInputRoot.vue lines 72-88) instead of reka's useVModel with deep:true. reka's deep:true watcher on the tags array is more expensive on large lists; robonen avoids deep proxying entirely.
+- ✅ Duplicate detection is display-aware: onAddValue dedups via `v === payload || display(v) === display(payload)` (TagsInputRoot.vue line 114), so two distinct objects that render to the same display string are caught. reka only uses `array.includes(payload)` (reference/primitive equality) and misses display-equal duplicates.
+- ✅ Paste handling is cleaner: onPaste trims each part and skips empty strings (`if (trimmed) ctx.onAddValue(trimmed)`, TagsInputInput.vue lines 96-99). reka's handlePaste calls onAddValue on every split segment including empty strings and untrimmed whitespace, which can create blank/whitespace tags.
+- ✅ Tag removal emits the correct value directly: onRemoveValue reads `cur[index]` from the actual model array (TagsInputRoot.vue line 130). reka's handleRemoveTag emits `collection[index].value` where collection is the disabled-FILTERED list indexed by a modelValue index (TagsInputRoot.vue lines 112-118) — a latent desync bug when disabled tags exist.
+- ✅ Strict, generic-preserving types end-to-end: TagValue generic <T extends TagValue> flows through Root, Item, emits and context, and onAddValue returns boolean with typed payloads. Slightly tighter than reka where AcceptableInputValue includes bigint but context is cast to AcceptableInputValue in places.
+- ✅ Clear button guards against empty model (`if (ctx.modelValue.value.length === 0) return`, TagsInputClear.vue line 19) and respects disabled before clearing, avoiding a redundant empty update emit that reka would still trigger by assigning `modelValue.value = []`.
+
+
+### roving-focus  —  _robonen-better-with-gaps_
+
+
+robonen's roving-focus is a close, high-quality port of reka-ui's RovingFocus with the same two parts (RovingFocusGroup, RovingFocusItem), identical keyboard model (Arrow/Home/End/PageUp/PageDown with orientation gating and RTL Left/Right swap via getDirectionAwareKey), identical roving-tabindex, isTabbingBackOut/isClickFocus Safari handling, entry-focus CustomEvent, loop/wrapArray, allowShiftKey, focusable/disabled handling, and collection-based DOM-ordered item discovery. robonen is genuinely better in a few places: it exports its utils/types/context publicly, its wrapArray guards the empty-array (NaN/undefined) edge case reka misses, and its docs/types are stronger. However there are three real gaps versus reka. (1) CRITICAL: robonen has no v-model / controlled support for currentTabStopId — it is a one-shot ref with no update:currentTabStopId emit and no re-sync from the prop, whereas reka uses useVModel with passive controlled/uncontrolled. (2) MAJOR: robonen's entry-focus candidate list omits the data-highlighted item that reka prioritizes, even though robonen's own listbox/combobox/menu items emit data-highlighted. (3) MINOR: robonen ships no tests for the primitive while reka does. Note: the missing :as-child binding in robonen templates is NOT a gap — robonen's Primitive intentionally uses an as=\"template\" model instead of reka's asChild. Verdict: robonen-better-with-gaps; fixing the three items above makes it strictly better.
+
+**Critical gaps:**
+- ⛔ (api-surface) No two-way binding / controlled support for currentTabStopId. robonen initializes `currentTabStopId = ref(currentTabStopIdProp ?? defaultCurrentTabStopId)` exactly once (RovingFocusGroup.vue:74-76) and `onItemFocus` mutates this local ref directly without ever emitting. Its RovingFocusGroupEmits only declares `entryFocus` (RovingFocusGroup.vue:29-31). A parent passing `:currentTabStopId` (controlled mode) can neither push new values in after mount nor observe internal changes — the prop is read once and then ignored. reka uses `useVModel(props,'currentTabStopId',emits,{ defaultValue, passive })` (RovingFocusGroup.vue:75-78) and declares `'update:currentTabStopId': [value]` (RovingFocusGroup.vue:39-42), giving real v-model plus proper controlled vs uncontrolled (passive) behavior.
+  - _evidence:_ reka RovingFocusGroup.vue:39-42 (update:currentTabStopId emit) + :75-78 (useVModel passive controlled/uncontrolled); robonen RovingFocusGroup.vue:29-31 emits lack update:currentTabStopId, and :74-76 is a one-shot ref with no watch/emit.
+
+**Major gaps:**
+- 🔶 (edge-cases) Entry-focus does not consider highlighted items. reka's handleFocus builds candidates as `[activeItem, highlightedItem, currentItem, ...items]`, where highlightedItem matches `data-highlighted=''` (RovingFocusGroup.vue:105,109). robonen omits the highlighted lookup entirely: candidates are `[activeItem, currentItem, ...items]` (RovingFocusGroup.vue:101-105). This is a real behavioral regression because robonen's own ListboxItem, ComboboxItem, and MenuItemImpl all render `data-highlighted` (listbox/ListboxItem.vue:75, combobox/ComboboxItem.vue:108, menu/MenuItemImpl.vue:82). When such a group regains focus, robonen will not prioritize focusing the highlighted item the way reka does.
+
+**Minor gaps (1):**
+- ▫️ (code-quality) No unit tests ship with the primitive. reka includes RovingFocus.test.ts covering single-entry tab focus, defaultValue selection, loop=false stop-at-last, loop=true wrap, and disabled-item skipping. robonen's roving-focus directory contains no .test.ts/.spec file at all, so none of these behaviors (especially the controlled/v-model and entry-focus paths above) are regression-guarded.
+
+**Recommendations to make robonen strictly better:**
+- Make currentTabStopId a real v-model: add `'update:currentTabStopId': [value: string | null | undefined]` to RovingFocusGroupEmits, and back the state with a passive controlled/uncontrolled ref (e.g. the repo's useVModel/useControllableState equivalent) initialized from `currentTabStopId ?? defaultCurrentTabStopId` with `passive: currentTabStopId === undefined`. Have onItemFocus assign through it so it emits and respects an externally controlled prop.
+- Restore highlighted-item priority in handleFocus: compute `const highlightedItem = items.find(item => item.getAttribute('data-highlighted') === '')` and build candidates as `[activeItem, highlightedItem, currentItem, ...items].filter(Boolean)` to match reka and to actually use the data-highlighted attribute that robonen's listbox/combobox/menu items already emit.
+- Add a RovingFocus test suite mirroring reka's: single tab-entry then tab-out, defaultCurrentTabStopId -> data-active, loop=false stops at last, loop=true wraps, disabled (data-disabled) items skipped, plus new coverage for currentTabStopId v-model (controlled push + update emit) and entry-focus highlighted prioritization.
+- Optional robustness wins to keep robonen strictly ahead: drop the redundant `.filter(i => i.dataset['disabled'] !== '')` in handleFocus/handleKeydown since getItems() already filters disabled by default (RovingFocusGroup.vue:98-100, RovingFocusItem.vue:75-77 vs collection getItems default filter), and consider exposing currentTabStopId on defineExpose alongside getItems for parity-plus.
+
+**Where robonen is already better:**
+- ✅ Richer public API surface from index.ts: robonen exports the utility helpers (focusFirst, getFocusIntent, getDirectionAwareKey, wrapArray) and types (FocusIntent, Orientation) plus the group context (RovingFocusGroupCtx, RovingFocusGroupContext type). reka-ui's index.ts only exports the two components and their Props/Emits types, keeping utils/context internal. This makes robonen more composable for downstream primitives.
+- ✅ wrapArray is safer: robonen's wrapArray (utils.ts:74-78) guards `len === 0` and returns the array unchanged, and uses a non-null assertion on a defined index. reka's wrapArray (utils.ts:61-63) does `array[(startIndex + index) % array.length]` with no length guard, so on an empty array it computes `% 0` => NaN and would yield `undefined` entries; robonen avoids that NaN/undefined edge case.
+- ✅ Stronger documentation/types: every robonen prop and the entire context interface carry precise JSDoc (RovingFocusGroup.vue:8-46, RovingFocusItem.vue:4-19, utils.ts), and getItems/getFocusIntent/focusFirst have explanatory doc comments. reka has minimal prop docs and almost none on utils.
+- ✅ getFocusIntent uses direct key equality (`key === 'ArrowLeft' || key === 'ArrowRight'`) instead of reka's `['ArrowLeft','ArrowRight'].includes(key)` array allocation per keystroke (utils.ts:47-50 vs reka utils.ts:38-41) — a minor hot-path allocation win.
+- ✅ RovingFocusItem extracts a named handleMousedown function (RovingFocusItem.vue:95-98) rather than reka's inline arrow handler in the template, slightly improving readability/testability.
+
+
+### collection  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** `key` option on useCollection to namespace/isolate multiple coexisting collections (Collection.ts:12, `injectionKey = `${key}CollectionProvider``)
+**Parts robonen has that reka lacks:** Exported public types `CollectionContext<Value>` and `CollectionItemData<Value>` (index.ts), Distinct `useCollectionProvider` / `useCollectionInjector` entry points instead of a single `useCollection({isProvider})`, Exposed `collectionRef` and `itemMap` on the returned context object (reka returns only getItems/reactiveItems/itemMapSize/CollectionSlot/CollectionItem; it keeps collectionRef/itemMap inside the context but does not surface itemMap typed publicly)
+
+Both libraries implement collection identically in spirit: a `CollectionSlot` marks the root, `CollectionItem` registers each child via a `data-*` attribute and a markRaw'd element->data Map, and `getItems()` returns items sorted by live DOM order (querySelectorAll) with an optional disabled filter. robonen is the better implementation on code quality: shallowRef+triggerRef+markRaw avoids deep-proxying the Map and element keys (a real perf win over reka's plain `ref(new Map())`), it exports proper generic types (`CollectionContext<Value>`, `CollectionItemData<Value>`) with no `@ts-expect-error`, splits provider/injector with a missing-provider guard, and is well documented. However robonen has ONE critical functional gap: it lacks reka's `key` option for namespacing multiple coexisting collections. Because robonen provides under a single fixed Symbol, a nested second collection provider shadows the outer one — and this actually breaks robonen's own NavigationMenu, where the RovingFocusGroup collection inside NavigationMenuList shadows the NavigationMenuRoot collection, leaving NavigationMenuRoot.getItems() empty and breaking modelValue->activeTrigger activation. There is also a minor robustness gap: reka falls back to nextElementSibling when the resolved element is a comment/text node, which robonen does not. Verdict: robonen is better-engineered but has a critical scoping gap that must be closed (and the resulting NavigationMenu bug fixed) before it is strictly better.
+
+**Critical gaps:**
+- ⛔ (features) reka supports a `key` option (`useCollection({ key: 'NavigationMenu' })`) to create multiple INDEPENDENT, disjoint collection contexts that can coexist in the same DOM/provide subtree. robonen's collection is provided under a single fixed `Symbol('CollectionContext')` (useContextFactory, useCollection.ts:160) with no per-call key, so two collection providers in the same subtree cannot coexist — the inner one shadows the outer for everything below it. This is not just theoretical: in robonen's own NavigationMenu, `NavigationMenuRoot` calls `useCollectionProvider()` and wraps children in `<CollectionSlot>`, but `NavigationMenuList` renders `<RovingFocusGroup>` which ALSO calls `useCollectionProvider()` under the same key. `NavigationMenuTrigger`'s `<CollectionItem>` sits inside the RovingFocusGroup subtree, so it registers into the RovingFocus collection — leaving `NavigationMenuRoot.getItems()` empty. As a result NavigationMenuRoot.vue:144-149 (`watchEffect` that maps `modelValue` to `activeTrigger` via `getItems().find(... id.includes('-trigger-'+value))`) never matches, breaking auto-activation of the trigger from the model value. reka avoids exactly this by keying the NavigationMenu collection separately (NavigationMenuRoot.vue:137 `key:'NavigationMenu'`, NavigationMenuTrigger.vue:35, NavigationMenuLink.vue:30) so it stays disjoint from the inner RovingFocus collection.
+  - _evidence:_ reka Collection.ts:12-29 `key`/`injectionKey` mechanism + NavigationMenu/Menubar using `key:'NavigationMenu'`/`key:'Menubar'`; robonen useCollection.ts:160 single `useContextFactory('CollectionContext')` with no key param, and the broken nesting in NavigationMenuList.vue:30 (RovingFocusGroup) + NavigationMenuTrigger.vue:117 (<CollectionItem> inside it) + NavigationMenuRoot.vue:146 getItems().
+
+**Minor gaps (1):**
+- ▫️ (edge-cases) Comment/text-node fallback when resolving the registered element. reka resolves the collection element through `usePrimitiveElement().currentElement`, a computed that detects when the ref's `$el` is a `#text` or `#comment` node and falls back to `nextElementSibling` (usePrimitiveElement.ts:7). robonen's CollectionSlot/CollectionItem call `unrefElement(el)` which returns `instance.$el` verbatim (toolkit unrefElement/index.ts:32) and then only registers `if (element instanceof HTMLElement)` (useCollection.ts:88,136). When a slotted child is a component whose root renders as a Fragment/comment placeholder (e.g. conditional/async root), `$el` is a comment node, the instanceof check fails, and the item is silently never registered. reka still registers the correct sibling element. robonen's <Slot> pre-filters a single Comment/Fragment vnode child, which mitigates the common case, so impact is partial.
+
+**Recommendations to make robonen strictly better:**
+- Add a `key`/scope parameter to `useCollectionProvider`/`useCollectionInjector` (or accept an explicit injection key/Symbol) so multiple independent collections can coexist in one subtree. Mirror reka's `{ key }` -> per-key injection symbol. Concretely: change `CollectionCtx` from a single module-level `useContextFactory('CollectionContext')` into a small registry that maps a string key to a memoized `useContextFactory('Collection:'+key)` (or pass a provided InjectionKey through).
+- Fix robonen's NavigationMenu (and audit Menubar/Toolbar/Listbox/Tabs/etc.) to use a dedicated keyed collection (e.g. key 'NavigationMenu') so the NavigationMenuRoot collection is not shadowed by the nested RovingFocusGroup collection. Add a test asserting `NavigationMenuRoot.getItems()` returns the triggers when a RovingFocusGroup is nested, and that modelValue -> activeTrigger auto-activation (NavigationMenuRoot.vue:144-149) actually matches.
+- Harden element resolution to match reka: when `unrefElement` yields a `#comment`/`#text` node, fall back to `nextElementSibling` before the `instanceof HTMLElement` check in both CollectionSlot and CollectionItem (useCollection.ts:87-90, 135-138). Either inline the check or add the fallback to the shared `unrefElement` helper.
+- Add a thrown/dev-warning guard analogous to reka-less behavior so that calling `useCollectionInjector` outside a provider gives a clear collection-specific error (already partly covered by useContextFactory, but ensure the message references collection).
+- Add dedicated tests for the collection primitive (the directory currently has none): cover DOM-order sorting via querySelectorAll across Teleport/v-for reorder, disabled filtering semantics (`dataset.disabled !== ''`), re-registration on `value` change, and coexistence of two keyed collections in one subtree.
+- Document the `dataset.disabled !== ''` filter semantics in getItems (an item is treated as enabled only when it does NOT have an empty-string data-disabled attribute) — this is subtle and shared with reka; a comment/test prevents regressions.
+
+**Where robonen is already better:**
+- ✅ Performance: robonen uses `shallowRef(new Map())` + manual `triggerRef` (useCollection.ts:56,118,123) and `markRaw(el)` on the map key (line 116), avoiding wrapping the Map and its element keys in a deep reactive Proxy. reka uses plain `ref(new Map())` (Collection.ts:18) which makes the whole Map deeply reactive and proxies every HTMLElement key — measurably more expensive for large lists/menus/listboxes.
+- ✅ Public, typed API surface: robonen exports `CollectionContext<Value>` and `CollectionItemData<Value>` as documented interfaces (index.ts) and threads a real `Value` generic through `getItems`, `itemMap`, `reactiveItems`. reka's `CollectionContext<ItemData = {}>` is internal/not exported, and item `value` is typed `any` (Collection.ts:7), with a `@ts-expect-error` swallowing the assignment (line 74). robonen has no such suppressed type error.
+- ✅ Clearer provider/injector split: robonen splits into `useCollectionProvider()` and `useCollectionInjector()` (useCollection.ts:171,183) with an explicit throw when injected outside a provider (via useContextFactory). reka overloads a single `useCollection({ isProvider })` and silently `inject(...) as CollectionContext` with no guard (Collection.ts:28) — a missing provider yields `undefined` and a later runtime crash with no helpful message.
+- ✅ Documentation quality: robonen has thorough JSDoc on the context, each field, and both composables explaining the querySelectorAll-based DOM ordering, the shallowRef/triggerRef rationale, and markRaw intent; reka's file is essentially uncommented.
+- ✅ Item registration watcher is explicit about value changes: robonen uses `watch([currentElement, () => props.value], ..., { immediate: true })` with a typed `onCleanup` (useCollection.ts:110-126), which is easier to reason about than reka's `watchEffect((cleanupFn) => {...})` (Collection.ts:71).
+
+
+### dismissable-layer  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** DismissableLayerBranch.vue (branch registration for non-dismissing related subtrees), usePointerDownOutside composable (exported, with touch handling), useFocusOutside composable (exported, with capture-flag inside-tracking), isLayerExist util (document-order layer-aware outside detection), handleAndDispatchCustomEvent-based cancelable CustomEvent dispatch, Exported PointerDownOutsideEvent / FocusOutsideEvent CustomEvent types
+**Parts robonen has that reka lacks:** dismissableLayerStack module (exported push/remove/isTopmost/anyDisabling/hasDisablingLayerAbove helper), data-dismissable-blocking attribute on body as a CSS hook
+
+robonen's DismissableLayer is leaner and its module-level escape/dismiss stack is a genuinely cleaner, cheaper topmost-layer mechanism than reka's per-layer index-from-Set computation, and it adds a useful `data-dismissable-blocking` body hook. However it is NOT yet strictly better: it lacks reka's DismissableLayerBranch (no way to exclude portaled/related subtrees), has no iframe/ownerDocument support, no touch-device pointer deferral (radix #2171), no defer-on-mount guard against open-then-instant-self-dismiss, and weaker focus-outside debouncing (synchronous focusin with no inside-focus capture flags, risking spurious dismiss on internal focus moves). Most importantly its nested pointer-events handling is incomplete: it only sets `pointer-events: auto` on self-disabling layers, so a non-disabling layer stacked above a disabling one becomes non-interactive — the stack even defines hasDisablingLayerAbove but never uses it. It also drops reka's layer-order-aware outside detection (isLayerExist) and reka's cancelable CustomEvent contract (detail.originalEvent + exported event types). Closing the listed gaps — Branch support, ownerDocument, touch handling, listener defer, focus-outside debounce, per-layer pointer-events via the existing stack helper, layer-order-aware detection, and CustomEvent wrapping — would make robonen strictly better.
+
+
+**Major gaps:**
+- 🔶 (features) reka exposes a `DismissableLayerBranch` component (DismissableLayerBranch.vue) backed by `context.branches: Set<HTMLElement>`. Pointer-down and focus events whose target is inside a registered branch are NOT treated as outside interactions (DismissableLayer.vue lines 106-110 and 120-124). This lets a related-but-DOM-separate subtree (e.g. a portaled trigger, anchor, or sibling control) avoid dismissing the layer. robonen has NO Branch component and no branches concept; its useClickOutside has an `ignore` option but DismissableLayer never forwards it, so there is no way for a consumer to register a non-dismissing related subtree.
+- 🔶 (edge-cases) reka supports iframe / multi-document via `ownerDocument = layerElement.value?.ownerDocument ?? globalThis.document` (DismissableLayer.vue line 81-83; utils.ts line 52-53, 155-156) and attaches listeners and reads/writes body.style on that owner document. robonen hardcodes the global `document` (focusin listener and body-blocking effect) and the global `window` (useClickOutside/useEscapeKey via defaultWindow), so a layer rendered into an iframe document will not receive outside-pointer/focus/escape events nor block the correct body.
+- 🔶 (edge-cases) reka has dedicated touch-device handling for pointerDownOutside: on `event.pointerType === 'touch'` it defers dispatch to a one-shot `click` listener to account for the ~350ms touch delay and to auto-cancel on scroll/drag/long-press, continuously removing the prior click listener (utils.ts lines 95-110). robonen reacts immediately on `pointerdown` for all pointer types with no touch deferral, so a touch scroll/drag that starts outside can incorrectly dismiss and pointer-events may be re-enabled before the browser fires the deferred click (the exact radix-ui/primitives#2171 case reka cites).
+- 🔶 (features) Per-layer pointer-events granularity for nested layers. reka computes `isPointerEventsEnabled` by comparing this layer's index against the index of the highest layer with outside-pointer-events disabled, and renders `pointer-events: 'none'` for layers below the disabling layer while keeping the body blocked (DismissableLayer.vue lines 97-103, 180-186). robonen only sets `pointer-events: 'auto'` on a layer if THAT layer itself has `disableOutsidePointerEvents` (template line 128). Consequence: a non-disabling layer stacked ABOVE a disabling layer never gets `pointer-events: auto`, so while the body is `none` that upper layer becomes non-interactive — a real nested-modal bug robonen's stack has `hasDisablingLayerAbove` for but never uses in the template.
+- 🔶 (edge-cases) Focus-outside debounce against transient focus churn. reka's useFocusOutside awaits `nextTick()` twice before resolving the target (utils.ts lines 166-167) and uses focus/blur capture flags (onFocusCapture/onBlurCapture) to know whether focus is currently inside, avoiding false `focusOutside` during internal focus reshuffles (e.g. focus moving between two children, or a momentary body focus). robonen's focusin handler (lines 84-96) fires synchronously on any focusin whose target is outside the layer with no inside-focus flag and no tick delay, so transient/relayed focus events can spuriously emit focusOutside and dismiss.
+- 🔶 (edge-cases) Layer-aware outside detection across portals/nested layers. reka's `isLayerExist` (utils.ts lines 16-40) treats a pointer/focus on a layer that is later in document order (a layer rendered above this one) as NOT outside, using `[data-dismissable-layer]` ordering in the document. robonen's useClickOutside only checks `el.contains(target)` plus the optional ignore list, so interacting with a sibling/nested dismissable layer that is not a DOM descendant is considered outside and can dismiss the lower layer even though it should be excluded.
+- 🔶 (edge-cases) reka defers the pointerdown document listener registration by one `setTimeout(..., 0)` to avoid the layer's own mounting pointerdown immediately bubbling to the document and self-dismissing (utils.ts lines 113-128). robonen registers the capture-phase window pointerdown listener immediately on mount with no defer, so a layer opened by the very pointerdown that mounts it can receive that same pointerdown as 'outside' and dismiss instantly (a classic open-then-instant-close bug).
+
+**Minor gaps (4):**
+- ▫️ (api-surface) reka wraps outside interactions as cancelable DOM CustomEvents dispatched on the actual target via handleAndDispatchCustomEvent (utils.ts + shared/handleAndDispatchCustomEvent.ts): `pointerDownOutside`/`focusOutside` carry `detail.originalEvent` and `preventDefault()` is real DOM prevention observable by other listeners and by the dispatching element. robonen emits raw PointerEvent/FocusEvent and fakes cancellation only for `interactOutside` via a temporary preventDefault override (createInteractEvent lines 55-66); the typed event detail wrapper (`PointerDownOutsideEvent`/`FocusOutsideEvent` = CustomEvent<{originalEvent}>) that reka exports is absent, so cross-library/consumer code expecting `.detail.originalEvent` will break.
+- ▫️ (api-surface) reka exports the reusable composables `usePointerDownOutside` and `useFocusOutside` (and types) from the package index (DismissableLayer/index.ts line 7), letting consumers build their own dismiss logic. robonen's index.ts exports only the component, `dismissableLayerStack`, and the two types — there is no exported focus-outside/pointer-down-outside composable from this module (the underlying useClickOutside lives in a different package, not surfaced here).
+- ▫️ (api-surface) Emit ordering of interactOutside vs specific events differs and reka's contract is the one consumers (Dialog/Menu/Popover) are written against. reka emits the specific event first then `interactOutside` (lines 112-113, 126-127), sharing the SAME cancelable CustomEvent so a preventDefault in either handler blocks dismiss. robonen emits `interactOutside` FIRST and only for pointer/focus paths via createInteractEvent, an ordering that can surprise consumers who expect to read the specific event's prevented state, and the temporary preventDefault override means a preventDefault in the interactOutside handler does not flow into the same object the specific handler later inspects.
+- ▫️ (edge-cases) reka awaits `nextTick()` before the post-pointerDownOutside dismiss check (DismissableLayer.vue line 114) so a consumer that asynchronously calls preventDefault (or reacts in a microtask) is still honored. robonen checks `event.defaultPrevented` synchronously immediately after emit (line 79), so any async/deferred preventDefault is missed.
+
+**Recommendations to make robonen strictly better:**
+- Add a `DismissableLayerBranch` component plus a branches Set in stack.ts; in the pointerdown/focusin handlers, ignore events whose target is contained in any registered branch. Forward this through the `ignore` option of useClickOutside as well. This fixes portaled-trigger and related-control false dismissals.
+- Use `currentElement.ownerDocument` (falling back to globalThis.document) for the focusin listener, the body pointer-events mutation, and pass an owner document/window to useClickOutside/useEscapeKey so layers inside iframes work. Do not hardcode global `document`/`window`.
+- Add touch-device handling in the outside-pointer path: when `event.pointerType === 'touch'`, defer dispatch to a one-shot `click` listener (and continuously remove the previous one) to respect the ~350ms touch delay and auto-cancel on scroll/long-press. Cite radix-ui/primitives#2171.
+- Defer registration of the outside-pointerdown listener by one macrotask (setTimeout 0) after mount to prevent the opening pointerdown from immediately self-dismissing the layer.
+- Use the already-defined `dismissableLayerStack.hasDisablingLayerAbove`/index ordering to compute per-layer pointer-events in the template: a layer should be `pointer-events: auto` if it is at or above the highest disabling layer, and `none` if it is below one, mirroring reka's isPointerEventsEnabled. Today only self-disabling layers get `auto`, breaking non-disabling layers stacked above a disabling one.
+- Harden focus-outside: track inside-focus via focus/blur capture flags on the Primitive and await one or two ticks before deciding the focus truly left, to avoid spurious focusOutside/dismiss during internal focus moves.
+- Implement layer-ordering-aware outside detection (equivalent to reka's isLayerExist) so interactions on a higher/sibling dismissable layer are not treated as outside for lower layers — relying on contains() alone is insufficient for portaled nested layers.
+- Wrap outside interactions in cancelable CustomEvents carrying `detail.originalEvent`, dispatched on the target, and export `PointerDownOutsideEvent`/`FocusOutsideEvent` types for parity with reka so consumer code reading `.detail.originalEvent` and using real DOM preventDefault works.
+- Emit the specific event (pointerDownOutside/focusOutside) and interactOutside as the SAME event object with the specific one first, and await nextTick() before the dismiss check so async preventDefault is honored.
+- Export reusable `usePointerDownOutside`/`useFocusOutside` style composables from the dismissable-layer index so consumers can build custom dismiss logic, matching reka's exported API surface.
+
+**Where robonen is already better:**
+- ✅ Escape handling uses a dedicated module-level stack composable (useEscapeKey + dismissableLayerStack.isTopmost) so only the genuine topmost layer fires, and the listener is installed once globally and torn down when empty. reka instead recomputes `index.value === layers.value.size - 1` from a reactive Set on every keystroke per-layer, which is O(layers) and re-derives ordering from Set insertion order.
+- ✅ Cleaner, smaller surface: a single `DismissableLayer.vue` (133 lines) plus a tiny 40-line `stack.ts` vs reka's component + 207-line `utils.ts` with custom-event dispatch machinery. The stack abstraction (push/remove/isTopmost/anyDisabling/hasDisablingLayerAbove) is reusable and self-documenting.
+- ✅ Body pointer-events teardown is guarded by `dismissableLayerStack.anyDisabling()` so it only restores the original value when no other disabling layer remains; reka's teardown only fires when `size === 1` inside that layer's own cleanup, which is correct but more fragile.
+- ✅ Adds a `data-dismissable-blocking` attribute on `<body>` while blocking, giving consumers a clean CSS hook (`[data-dismissable-blocking] *:not([data-dismissable-layer])`) that reka does not provide.
+- ✅ SSR safety is explicit and centralized: the underlying useClickOutside/useEscapeKey/useEventListener composables early-return `noop` when `defaultWindow` is falsy, and the body-blocking effect guards `typeof document === 'undefined'`.
+
+
+### navigation-menu  —  _robonen-better-with-gaps_
+
+
+Both libraries implement the same 10 parts (Root, Sub, List, Item, Trigger, Link, Content, ContentImpl, Viewport, Indicator) and the architecture is near-identical (robonen is clearly a port of reka's NavigationMenu). robonen has a few genuine improvements: a sensible default aria-label='Main' landmark, explicit timer teardown via onScopeDispose, and a more precise active-trigger match (`-trigger-${value}` vs reka's substring includes). However robonen currently has several real regressions that prevent 'strictly better': (1) none of the structural parts support as/asChild (reka extends PrimitiveProps everywhere); (2) the Indicator lacks aria-hidden; (3) animating-out content/viewport are never made hidden/pointer-events:none; (4) arrow nav inside content hijacks INPUT/TEXTAREA (reka uses enableIgnoredElement); (5) declared DismissableLayerProps on ContentImpl are dropped instead of forwarded and disableOutsidePointerEvents is hardcoded; (6) the root-content-dismiss path does not return focus to the trigger; (7) viewport positioning is weaker (horizontal-only clamping, no vertical align, no window/root resize reposition); plus minor keyboard (no nested-menu guard, no item-level Enter/Space focus-return) and Link select payload gaps. Implementing the recommendations — especially as/asChild, aria-hidden on indicator, hidden/pointer-events on closed panels, the INPUT/TEXTAREA arrow-nav bail-out, prop forwarding on ContentImpl, focus-return on dismiss, and richer viewport positioning — would make robonen strictly better than reka.
+
+
+**Major gaps:**
+- 🔶 (api-surface) All structural parts support `as`/`asChild` polymorphism in reka but NOT in robonen. reka's Root, Sub, List, Item, Trigger, Viewport and Indicator all `extends PrimitiveProps` and render `:as`/`:as-child`. robonen's equivalents do not extend PrimitiveProps and hardcode the element (Root forced as='nav', Item as='li', List inner as='ul', Trigger as='button', Viewport/Indicator have no as forwarding). Consumers cannot render the root as a custom element, render the trigger asChild around their own button, etc.
+- 🔶 (accessibility) Indicator is not hidden from assistive tech in robonen. reka sets `aria-hidden="true"` on the indicator Primitive; the indicator is purely decorative. robonen's NavigationMenuIndicator renders the Primitive WITHOUT aria-hidden, exposing the decorative indicator to AT.
+- 🔶 (edge-cases) Closed/animating-out content and viewport are not made non-interactive in robonen. reka applies `:hidden="!present"` to both NavigationMenuContentImpl and NavigationMenuViewport, and `pointer-events: none` while closed (`pointerEvents: !open && isRootMenu ? 'none' : undefined`). robonen passes neither, so during the keep-mounted exit animation (isLastActiveValue / viewport exit) stale content remains interactive and visible to AT.
+- 🔶 (forms) Arrow-key navigation inside content hijacks text fields in robonen. reka's content keydown passes `enableIgnoredElement: true` to useArrowNavigation (ignore list ['INPUT','TEXTAREA']), so arrow keys with focus in an input/textarea inside the panel move the caret. robonen's NavigationMenuContentImpl.handleKeydown always focuses the next link with no INPUT/TEXTAREA bail-out, stealing focus from form fields.
+- 🔶 (api-surface) Declared DismissableLayer props are dropped instead of forwarded in robonen content. reka's NavigationMenuContentImpl binds `v-bind="props"` so user-supplied DismissableLayerProps reach DismissableLayer. robonen declares `defineProps<NavigationMenuContentImplProps>()` (extends DismissableLayerProps) but the template binds only `v-bind="$attrs"` and hardcodes `:disable-outside-pointer-events="false"`, so declared props are consumed by the component and never forwarded.
+- 🔶 (features) Viewport positioning is weaker: no vertical alignment and no right/bottom collision handling. reka computes both left AND top relative to the root, applies align to both axes, and clamps against all four screen edges with re-checks, plus re-positions on body/root ResizeObserver. robonen computes only `left` from align and a fixed `top = triggerRect.bottom`, clamps only horizontally, ignores vertical-orientation alignment and bottom/top collision, and only observes the content ResizeObserver.
+- 🔶 (keyboard) Root content dismiss does not refocus the trigger in robonen, so focus can be lost. reka's NavigationMenuContentImpl EVENT_ROOT_CONTENT_DISMISS handler runs onItemDismiss(), onRootContentClose(), and `if (content.contains(getActiveElement())) triggerRef.value?.focus()`. robonen's ContentImpl dismiss listener only calls itemContext.onRootContentClose() (tab-order restore) and never re-focuses the trigger, so after selecting a link that closes the menu focus can fall to <body>.
+
+**Minor gaps (4):**
+- ▫️ (keyboard) Nested-submenu content keydown lacks the parent-vs-self guard reka has. reka's content handleKeydown begins with `if (ev.target.closest('[data-reka-navigation-menu]') !== menuContext.rootNavigationMenu.value) return` so a parent menu's content does not handle keydown bubbling from a nested submenu's content. robonen's handleKeydown has no such guard.
+- ▫️ (keyboard) Item-level Enter/Space handling and focus-return is absent in robonen. reka's NavigationMenuItem.handleKeydown intercepts Enter/Space: if open it dismisses and returns focus to the trigger (handleClose -> triggerRef.focus()), else clicks the focused element. robonen relies on native <button> click and never re-focuses the trigger after a keyboard-driven close.
+- ▫️ (api-surface) Link select event payload is less informative in robonen. reka emits the select CustomEvent with `detail: { originalEvent }` (typed CustomEvent<{ originalEvent: Event }>), letting consumers inspect the originating click. robonen dispatches LINK_SELECT_EVENT with no detail and re-emits the raw event, so the typed select payload carries no originalEvent.
+- ▫️ (edge-cases) Link dismiss target divergence: reka dispatches EVENT_ROOT_CONTENT_DISMISS on `ev.target` (actual clicked element, the documented Radix behavior) whereas robonen dispatches on `event.currentTarget`. Minor behavioral divergence in nested-link scenarios.
+
+**Recommendations to make robonen strictly better:**
+- Add `extends PrimitiveProps` (as/asChild) to NavigationMenuRoot, Sub, List, Item, Trigger, Viewport and Indicator, and forward `:as`/`:as-child` to the underlying Primitive (default Root 'nav', Item 'li', List 'ul', Trigger 'button'). Restores polymorphism parity.
+- Add `aria-hidden="true"` to the NavigationMenuIndicator Primitive — it is decorative and must not be exposed to AT.
+- Set `:hidden="!present"` on NavigationMenuContentImpl and NavigationMenuViewport (use the Presence slot's `present`) and apply `pointer-events: none` while `!open && isRootMenu` so animating-out panels are inert and hidden from AT.
+- In NavigationMenuContentImpl.handleKeydown, bail out of arrow navigation when the focused element is an INPUT or TEXTAREA (mirror reka's enableIgnoredElement) so form fields inside the panel keep native caret movement.
+- Forward the declared DismissableLayerProps to DismissableLayer (bind the captured props, not just $attrs) instead of dropping them; keep disableOutsidePointerEvents user-overridable rather than hardcoded to false.
+- Add the nested-menu guard `if (ev.target.closest('[data-primitives-navigation-menu]') !== menuContext.rootNavigationMenu.value) return` at the top of content handleKeydown so parent content does not double-handle nested submenu keydown.
+- In the root EVENT_ROOT_CONTENT_DISMISS handler inside NavigationMenuContentImpl, also call onItemDismiss() and re-focus itemContext.triggerRef when the content still contains the active element, so link-select-driven closes return focus to the trigger.
+- Strengthen NavigationMenuViewport positioning: compute both left and top relative to the root, apply align to the cross axis for vertical orientation, clamp against all four screen edges with re-checks, and re-run updatePosition on body/root ResizeObserver (window/root resize).
+- Add explicit Enter/Space handling at the item or trigger level that returns focus to the trigger after a keyboard-driven close (reka's handleClose pattern) for deterministic focus restoration.
+- Enrich the NavigationMenuLink select payload with `detail: { originalEvent }` and type the emit as CustomEvent<{ originalEvent: Event }> for parity and better consumer ergonomics.
+- Dispatch the root-content-dismiss event on the actual clicked target (event.target) rather than currentTarget to match reka/Radix behavior for nested links.
+
+**Where robonen is already better:**
+- ✅ Sensible default landmark label: NavigationMenuRoot defaults aria-label to 'Main' when the user supplies none, and still lets a user-supplied aria-label win (verified by NavigationMenu.landmark.test.ts). reka never sets a default aria-label on its nav, so reka's root is an unlabeled <nav> landmark by default.
+- ✅ Cleaner debounce + skip-delay timer management with explicit teardown: NavigationMenuRoot uses manual setTimeout-based debounce plus onScopeDispose(clearDebounce/clearSkipDelay), so all timers are guaranteed cleared on unmount; reka relies on @vueuse useDebounceFn/refAutoReset whose cancellation on unmount is implicit.
+- ✅ More robust active-trigger matching: robonen matches the trigger by the specific pattern `-trigger-${modelValue}` (makeTriggerId), whereas reka matches with a loose `item.id.includes(modelValue.value)` which can mis-match when one item value is a substring of another (e.g. value 'a' matching id of value 'ab').
+- ✅ Indicator size/position tracking observes BOTH the active trigger AND the indicator track via two ResizeObservers and recomputes on either change (watch on [activeTrigger, indicatorTrack, isHorizontal]) with explicit disconnect in onScopeDispose.
+- ✅ JSDoc on every prop in the props interfaces (delayDuration, skipDelayDuration, disable* flags, unmountOnHide, align) gives better editor IntelliSense than reka's terser doc comments.
+- ✅ Trigger keydown explicitly stopPropagation()s the entry-key (Arrow into content) so the inner RovingFocusItem doesn't also act on it — matches reka's intent and is cleanly scoped.
+
+
+### listbox  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** ListboxVirtualizer
+
+robonen's Listbox covers the core surface (Root, Content, Item, ItemIndicator, Group, GroupLabel, Filter) with the same roles, ARIA wiring (role=listbox/option/group, aria-selected, aria-multiselectable, aria-activedescendant, aria-orientation), controlled+uncontrolled modelValue, multiple + selectionBehavior toggle/replace, RTL/dir via ConfigProvider, highlightOnHover, by-comparator, entryFocus/leave/highlight emits, type-ahead, Home/End/Arrow navigation, Enter/Space activation, and Ctrl/Cmd+A select-all — and it is genuinely leaner and more performance-conscious than reka (inlined loops, shallowRef, module-scoped Sets, nextTick over setTimeout, cleaner aria-multiselectable, full types/JSDoc). However it is NOT yet strictly better: it is missing reka's ListboxVirtualizer (virtual scrolling), native form integration (name/required + VisuallyHiddenInput), shift-range selection (firstValue + findValuesBetween), PageUp/PageDown paging keys, IME composition guards, buffered multi-character type-ahead, an imperative defineExpose API (highlightItem/getItems/etc.), and deep object equality fallback. The virtualizer, form integration, shift-range, PageUp/PageDown, IME, and richer type-ahead are the load-bearing gaps to close.
+
+
+**Major gaps:**
+- 🔶 (features) No virtualization. Reka ships ListboxVirtualizer.vue (TanStack vue-virtual) wiring isVirtual + virtualFocusHook/virtualKeydownHook/virtualHighlightHook into Root, enabling large lists with aria-setsize/aria-posinset and virtual scroll-to-index navigation/typeahead. Robonen has no equivalent component or virtual hooks at all.
+- 🔶 (forms) No form integration. Reka Root extends FormFieldProps (name, required) and renders <VisuallyHiddenInput :name :value :disabled :required> when inside a form, so the listbox submits with a form. Robonen items carry a `value` but Root has no name/required props and renders no hidden input, so it cannot participate in native form submission.
+- 🔶 (keyboard) No shift-range selection. Reka supports range selection in multiple+replace mode: Shift+Arrow/Home/End selects a contiguous range via firstValue tracking + handleMultipleReplace + findValuesBetween. Robonen tracks no firstValue and never handles event.shiftKey, so Shift-range selection is impossible.
+- 🔶 (keyboard) PageUp/PageDown keys not handled. Reka maps PageUp->first and PageDown->last (MAP_KEY_TO_FOCUS_INTENT) so those keys jump to the first/last item. Robonen's rovingKeyToAction only handles Arrow/Home/End and returns null for PageUp/PageDown, and ListboxContent's NAV_KEYS set excludes them, so they do nothing.
+- 🔶 (edge-cases) No IME composition handling. Reka guards Enter while composing (isComposing) and wires @compositionstart/@compositionend on both Root flow and Filter, preventing premature selection during CJK/IME input. Robonen has no isComposing, no onCompositionStart/End, and the Filter has no composition listeners — Enter mid-composition can select.
+- 🔶 (features) Weaker type-ahead. Reka uses useTypeahead/getNextMatch: a 1s-reset search buffer supporting multi-character prefix matching, repeated-character normalization (cycling), and item-supplied textValue. Robonen only matches a single event.key letter via textContent.startsWith(letter) with no accumulation buffer, no multi-char prefixes, and no textValue override.
+
+**Minor gaps (4):**
+- ▫️ (api-surface) No imperative API exposed on Root. Reka defineExpose exposes highlightItem(value), highlightFirstItem(), highlightSelected(), getItems(), and highlightedElement for programmatic control. Robonen's Root exposes nothing beyond forwardRef; there is no highlightItem(value) to programmatically highlight by value, and no exposed getItems/highlightedElement.
+- ▫️ (edge-cases) Object comparison without `by` differs. Reka's compare falls back to ohash isEqual for deep structural equality when no comparator/string-key is given (and value isn't a string). Robonen's compare falls back to reference equality `a === b`, so two structurally-equal object values won't be treated as selected unless the consumer passes `by`.
+- ▫️ (edge-cases) Filter onValueChange/typeahead does not set isUserAction. Reka's onKeydownTypeAhead sets isUserAction=true so the programmatic highlightSelected watcher does not fight the typeahead highlight. Robonen's onKeydownTypeAhead never sets isUserAction, so a programmatic modelValue change racing with typeahead could re-run the checked-item scan and override the typeahead highlight.
+- ▫️ (types) Filter slot/v-model typing: reka declares defineSlots with typed modelValue slot prop on both Root and Filter. Robonen passes :model-value to the slot but does not declare defineSlots, so slot prop types are not surfaced to consumers (weaker DX/types).
+
+**Recommendations to make robonen strictly better:**
+- Add a ListboxVirtualizer component (or virtual hooks on the context: isVirtual + focus/keydown/highlight EventHooks) so large collections can be virtualized with aria-setsize/aria-posinset and scrollToIndex navigation, matching reka ListboxVirtualizer.vue. Without it, robonen cannot claim parity for large lists.
+- Add form integration to ListboxRoot: extend props with name?/required?, detect form context (a useFormControl equivalent), and render the existing src/visually-hidden VisuallyHidden as a hidden input mirroring modelValue/disabled/required so the listbox submits with native forms (reka ListboxRoot.vue:415-421).
+- Implement shift-range selection for multiple+selectionBehavior='replace': track a firstValue ref, handle event.shiftKey in onKeydownNavigation, and add a findValuesBetween util to select contiguous ranges on Shift+Arrow/Home/End (reka handleMultipleReplace + arrays.ts findValuesBetween).
+- Extend utils/roving-focus.ts rovingKeyToAction to map PageUp->{absolute:'home'} and PageDown->{absolute:'end'}, and add 'PageUp'/'PageDown' to ListboxContent NAV_KEYS, so paging keys jump to first/last like reka MAP_KEY_TO_FOCUS_INTENT.
+- Add IME composition guards: an isComposing ref set via onCompositionStart/onCompositionEnd on the context, consulted in onKeydownEnter, and wire @compositionstart/@compositionend on ListboxFilter (and the listbox content) to avoid selecting mid-composition (reka ListboxRoot.vue:230-237).
+- Upgrade type-ahead to a multi-character buffered search with ~1s reset and repeated-character normalization (port getNextMatch/useTypeahead semantics), and support an item-level textValue override instead of only textContent.startsWith on a single key (reka shared/useTypeahead.ts).
+- defineExpose on ListboxRoot: expose highlightItem(value), highlightFirstItem(), highlightSelected(), getItems(), and highlightedElement so consumers can drive highlighting programmatically; add a highlightItem(value) helper that resolves the element by value (reka ListboxRoot.vue:358-364).
+- Make compare() fall back to a deep structural equality (e.g. a small isEqual) when by is undefined and the value is a non-primitive object, so structurally-equal object values are recognized as selected without forcing consumers to pass `by` (reka utils.ts:29).
+- Set isUserAction=true inside onKeydownTypeAhead (reset on nextTick) to prevent the programmatic highlightSelected watcher from clobbering type-ahead highlights (reka ListboxRoot.vue:203).
+- Declare defineSlots on ListboxRoot and ListboxFilter to type the modelValue slot prop, improving consumer DX/types (reka ListboxRoot.vue:94-99, ListboxFilter.vue:29-34).
+
+**Where robonen is already better:**
+- ✅ Performance hygiene in hot paths: enabledEls() is an inlined manual loop avoiding the .map().filter() double-allocation + two closures that reka's getCollectionItem() incurs on every keydown/typeahead/navigation; NAV_KEYS is a module-scoped Set instead of being re-evaluated per event; includes()/compare() use manual for-loops instead of .some(). (ListboxRoot.vue:103-111, utils.ts:23-26)
+- ✅ Uses nextTick() instead of setTimeout(...,1) to reset isUserAction, avoiding a timer-handle allocation and the 1ms latency window reka has in onValueChange/onKeydownTypeAhead (ListboxRoot.vue:144-147 vs reka ListboxRoot.vue:144-146,225-227).
+- ✅ shallowRef for localValue with an explicit comment that the value is always replaced on commit (never mutated in place), avoiding reka's deep:true watcher on modelValue (reka ListboxRoot.vue:117 deep:true, line 356 deep watch). Robonen's programmatic watch is a plain watch(localValue,...) with a manual element scan, cheaper than reka's deep diff.
+- ✅ Cleaner aria-multiselectable: emits the attribute only when multiple is true (`ctx.multiple.value ? true : undefined`) instead of reka always rendering aria-multiselectable="false" via `!!rootContext.multiple.value` (ListboxContent.vue:63 vs reka ListboxContent.vue:29).
+- ✅ Explicit return types on every function and full JSDoc on props/emits; reka relies on inference and has a `// @ts-expect-error ignoring` on onValueChange in the provide call (reka ListboxRoot.vue:368).
+- ✅ Item Space activation calls event.preventDefault() before handleSelect via a dedicated onKeyDown guard (ListboxItem.vue:51-55), equivalent to reka but written as typed handler rather than inline template expression; overall robonen keeps logic in <script> rather than large inline template arrow functions (reka ListboxContent.vue:32-57 has multi-line inline handlers).
+- ✅ ListboxItem disabled attribute is gated with `|| undefined` so disabled is omitted entirely when false; data-disabled uses '' sentinel consistently — matches reka but robonen also sets the real `disabled` attribute (reka only sets data-disabled='' string, never the boolean attribute on line 85-86).
+
+
+### calendar  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** SR-only role=heading aria-level=2 live label inside CalendarRoot, isPlaceholderFocusable / firstFocusableDate / hasSelectedDate / isSelectedDateDisabled context state, disableDaysOutsideCurrentView wiring in CalendarCell and CalendarCellTrigger, outsideVisibleView slot prop + data-outside-visible-view on CalendarCellTrigger, aria-hidden thead in CalendarGridHead
+**Parts robonen has that reka lacks:** nextYear/prevYear exposed via context, CalendarHeadCell `day` prop with localized long aria-label
+
+Both libraries ship the same 12-part component set with very similar APIs. robonen is genuinely better on keyboard breadth (Home/End/PageUp/PageDown/Shift+PageUp-Down — reka has none of these) and avoids the @internationalized/date dependency. However robonen has several real, fixable gaps: fixedWeeks is a non-functional no-op (always renders 6 weeks); no multiple selection, preventDeselect, deselect-on-reclick, or disableDaysOutsideCurrentView; keyboard navigation can land on and stop at disabled days (reka skips them); arrow-shift doesn't sync the placeholder within the view; there is no SR-exposed heading (CalendarHeading is aria-hidden with no replacement, unlike reka's hidden role=heading); no locale-aware default weekStartsOn; the roving fallback can target a disabled first-of-month; and thead isn't aria-hidden. Net: robonen leads on keyboard and bundle size but trails on feature completeness (multiple/deselect/fixedWeeks), i18n defaults, and a couple of a11y details — so it is not yet strictly better.
+
+
+**Major gaps:**
+- 🔶 (features) robonen's `fixedWeeks` prop is non-functional. getWeeks() in date-utils.ts always loops `for (w = 0; w < 6)` and unconditionally returns a 6×7 (42-cell) grid; the fixedWeeks ref is provided to context but never consumed when building the grid. So fixedWeeks={false} is a silent no-op and the calendar ALWAYS renders 6 weeks. Reka's createMonth (date/calendar.ts lines 61-101) builds the real number of weeks and only pads to 42 when fixedWeeks is true.
+- 🔶 (features) No multiple-date selection. robonen modelValue is strictly `Date | undefined` and setDate replaces the single value. Reka supports `multiple` prop with modelValue `DateValue | DateValue[]`, toggling membership (add/remove) in onDateChange.
+- 🔶 (features) No deselect-on-reclick and no preventDeselect option. In reka, clicking an already-selected date deselects it (onDateChange lines 272-276) unless preventDeselect is set. robonen's setDate has no deselect path — clicking a selected date just re-sets the same date, and there is no preventDeselect prop.
+- 🔶 (keyboard) Keyboard navigation does not skip disabled days. robonen shiftFocus() focuses the candidate cell even if it is disabled (focusByDataValue query is `:not([data-outside-view])` only, NOT `:not([data-disabled])`), so arrow keys can land focus on a disabled day and stop. Reka recurses past disabled cells: `if (candidateDay.hasAttribute('data-disabled')) return shiftFocus(candidateDayValue, add)`.
+- 🔶 (accessibility) No SR-only live heading. Reka renders a visually-hidden `<div role="heading" aria-level="2">{{ fullCalendarLabel }}</div>` inside the root so screen readers announce the current month/year as a heading. robonen's CalendarRoot has no such element; its CalendarHeading is explicitly aria-hidden="true", so the heading text is hidden from AT with no SR-exposed replacement.
+
+**Minor gaps (8):**
+- ▫️ (features) No disableDaysOutsideCurrentView. Reka can disable days that belong to adjacent months (affects isDisabled, aria-disabled, data-disabled, tabindex). robonen has no such prop; outside-view days remain enabled/clickable.
+- ▫️ (keyboard) Arrow-key focus shift does not move the placeholder/displayed month context. Reka calls rootContext.onPlaceholderChange(candidateDayValue) on every successful shift (CalendarCellTrigger.vue line 165), keeping placeholder in sync with the focused day. robonen only updates placeholder when crossing the visible page boundary (shiftFocus lines 91-99), leaving placeholder stale relative to the focused cell within the same view.
+- ▫️ (rtl-i18n) No locale-aware default weekStartsOn. Reka defaults weekStartsOn to getWeekStartsOn(locale) so e.g. 'en-US' starts Sunday, 'fr' starts Monday automatically. robonen hard-defaults weekStartsOn=0 (Sunday) regardless of locale.
+- ▫️ (rtl-i18n) No non-Gregorian calendar / era / timezone support. Reka uses @internationalized/date (DateValue) supporting BC era display (headingFormatOptions era handling in useCalendar.ts lines 128-137), arbitrary calendar systems, and timezone-correct 'today' via getLocalTimeZone(). robonen uses native Date with isToday computed as isSameDay(day, new Date()) (no tz control) and Intl formatting only against Gregorian.
+- ▫️ (edge-cases) Roving-tabindex fallback can land on a disabled date. robonen isFocusedDate fallback returns the first-of-month (day.getDate() === 1) when neither selection nor today is in view, without checking disabled/unavailable/min-max (CalendarCellTrigger.vue lines 49-59). Reka computes firstFocusableDate by scanning for the first non-disabled, non-unavailable date respecting minValue (useCalendar.ts lines 360-375) so the initial tab stop is always actionable.
+- ▫️ (accessibility) GridHead is not aria-hidden. Reka's CalendarGridHead sets aria-hidden="true" on the <thead> (it relies on cell aria-labels for SR), avoiding double-announcement of weekday columns. robonen's CalendarGridHead is a bare passthrough with no aria-hidden.
+- ▫️ (rtl-i18n) Grid week boundaries use JS Date.getDay() rather than locale-aware getDayOfWeek. robonen startOfWeek/getWeeks compute day-of-week from native (date-utils.ts), which is correct for Gregorian but not driven by the locale's calendar; reka uses getLastFirstDayOfWeek/getNextLastDayOfWeek with locale + getDayOfWeek (date/comparators.ts) for calendar-correct week alignment.
+- ▫️ (accessibility) CalendarGrid role differs: reka sets role="application" on the grid table (CalendarGrid.vue) while the root is just a labeled container; robonen sets role="application" on the root AND role="grid" on the table. Reka's split (root = region with hidden heading, grid = application) is the documented WAI pattern for keyboard-grid calendars; robonen's role=grid on a non-roving-managed table plus role=application on root is a less conventional combination worth reconciling.
+
+**Recommendations to make robonen strictly better:**
+- Make fixedWeeks actually work: change getWeeks (date-utils.ts) to build only the real number of weeks (start-of-week of month start through end-of-week of month end) and pad to 42 cells ONLY when fixedWeeks is true; thread fixedWeeks into createMonths/getWeeks so fixedWeeks={false} renders 4-6 weeks.
+- Add multiple-selection support: allow modelValue to be `Date | Date[]`, add a `multiple` prop, and implement add/remove toggle logic in setDate mirroring reka's onDateChange array branch; update isDateSelected to check array membership.
+- Implement deselect-on-reclick plus a `preventDeselect` prop: in setDate, if the clicked date equals the current single value and !preventDeselect, set modelValue=undefined (and move placeholder to that date).
+- Add `disableDaysOutsideCurrentView` prop and fold it into isDateDisabled in CalendarCell and CalendarCellTrigger (affecting aria-disabled, data-disabled, tabindex) like reka.
+- Skip disabled days during keyboard navigation: in CalendarCellTrigger.shiftFocus/focusByDataValue, exclude [data-disabled] from the query and recurse to the next candidate in the same direction (reka pattern) so arrows never park focus on a disabled cell.
+- Call setPlaceholder(target) on every successful shiftFocus (not only on page-boundary crossings) so the displayed month context tracks the focused day.
+- Add a visually-hidden `role="heading" aria-level="2"` element inside CalendarRoot rendering fullCalendarLabel, so the current month/year is exposed to screen readers (CalendarHeading remains aria-hidden for the visible UI).
+- Derive a locale-aware default weekStartsOn (e.g. compute from Intl/locale) when the prop is not supplied, instead of hard-coding 0.
+- Harden the roving-tabindex fallback: compute a firstFocusableDate that skips disabled/unavailable dates and honors minValue, and use it instead of the unconditional first-of-month fallback in isFocusedDate.
+- Set aria-hidden="true" on CalendarGridHead's thead to avoid double weekday announcements.
+- Consider isToday timezone correctness (allow a timezone or use a single 'now' source) and optionally support non-Gregorian calendars/era display for full i18n parity, or document the Gregorian-only limitation.
+- Reconcile ARIA roles to the WAI calendar pattern: keep role=application on the interactive grid and a labeled region/heading on the root, matching reka, to avoid an unusual role=application-on-root + role=grid-on-table pairing.
+
+**Where robonen is already better:**
+- ✅ Richer keyboard support: CalendarCellTrigger.handleKeyDown handles Home, End, PageUp, PageDown, and Shift+PageUp/PageDown (year jump) in addition to arrows/Enter/Space. Reka's CalendarCellTrigger.handleArrowKey only binds @keydown.up.down.left.right.space.enter and has NO Home/End/PageUp/PageDown handling at all — this is a genuine a11y/keyboard advantage for robonen.
+- ✅ Home/End are correctly week-relative using weekStartsOn offset math (CalendarCellTrigger.vue lines 122-135), giving WAI-ARIA grid-pattern conformance that reka lacks entirely.
+- ✅ Exposes nextYear()/prevYear() in the root context (CalendarRoot.vue, context.ts) enabling year-stepping UI; reka's context exposes only nextPage/prevPage.
+- ✅ CalendarHeadCell accepts a `day` prop and emits a localized long weekday `aria-label` (CalendarHeadCell.vue), improving SR output for the column header; reka's CalendarHeadCell is a bare passthrough with no aria-label.
+- ✅ No heavy @internationalized/date runtime dependency — robonen uses native Date + Intl only (date-utils.ts), giving a smaller bundle and zero extra deps versus reka's hard dependency on @internationalized/date.
+- ✅ initialFocus selector also targets ':not([data-outside-view]):not([data-disabled])' as a final fallback (CalendarRoot.vue lines 255-259), so it won't focus a disabled/outside cell; reka's handleCalendarInitialFocus falls back to a '[data-reka-calendar-day]' selector that does not even exist on the trigger (it sets data-reka-calendar-cell-trigger), so reka's third fallback is effectively dead.
+- ✅ Per-prop reactive refs via toRef(() => ...) (CalendarRoot.vue lines 136-146) keep destructured props reactive in context without toRefs of the whole props object.
+
+
+### dialog  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** DialogOverlayImpl.vue (overlay split where body-scroll-lock lives), Dialog/utils.ts useWarning (dev a11y warnings)
+**Parts robonen has that reka lacks:** DialogPortal forceMount + Presence wrapper (reka portal is a bare teleport)
+
+robonen's Dialog mirrors reka's architecture (Root/Trigger/Portal/Overlay/Content+Impl+Modal/NonModal/Title/Description/Close) and is genuinely better in several areas: it sets aria-modal on modal content (reka does not), supports a role prop for alertdialog reuse, locks body scroll in ContentModal independent of whether an Overlay is rendered (reka's lock lives in OverlayImpl and is skipped without an overlay), wraps the Portal in Presence with forceMount, and special-cases closed-popover siblings in useHideOthers. However robonen is missing real behaviors reka ships: the modal right-click-outside guard, the defensive focus-outside-while-trapped guard, the non-modal conditional focus-return + trigger-containment + Safari focusin workaround (robonen's NonModal forwards events but adds zero outside-interaction logic), programmatic-open trigger preservation (triggerElement is only ever set by DialogTrigger), and dev-time a11y warnings for a missing Title/Description. Smaller gaps: no close helper in the Root slot, no ref forwarding on the public DialogContent, unconditional trigger aria-controls, and no scrollBody/nonce config. Fixing the four focus/edge-case items (right-click guard, non-modal focus handling, focus-outside guard, programmatic trigger capture) plus the dev warnings would make robonen strictly better.
+
+
+**Major gaps:**
+- 🔶 (keyboard) Non-modal close does not conditionally suppress focus-return: reka DialogContentNonModal tracks hasInteractedOutsideRef and only refocuses the trigger on closeAutoFocus when the user did NOT interact outside (DialogContentNonModal.vue lines 24-35). robonen's DialogContentNonModal.vue has NO closeAutoFocus/interactOutside handlers — it relies on FocusScope's default unmount which always refocuses previouslyFocusedElement, stealing focus back to the trigger even when the user clicked elsewhere in a non-modal flow.
+- 🔶 (edge-cases) Non-modal dialog does not prevent dismissing when the click target is the trigger itself, so clicking the trigger while open dismisses-then-toggles (close immediately followed by re-open). reka guards this in interactOutside via targetIsTrigger = rootContext.triggerElement.value?.contains(target) -> event.preventDefault().
+- 🔶 (edge-cases) Modal content does not ignore right-click outside. reka DialogContentModal.vue pointerDownOutside detects originalEvent.button===2 or ctrl+left and calls event.preventDefault() so right-clicking the overlay does not close the dialog. robonen DialogContentModal forwards pointer-down-outside straight to dismiss with no right-click guard, so a context-menu right-click on the overlay closes the modal.
+- 🔶 (keyboard) Programmatic-open trigger preservation is missing. reka DialogContentImpl.vue onMounted captures getActiveElement() into rootContext.triggerElement when the dialog is opened without a DialogTrigger (lines 56-58), so focus returns to whatever was focused and the NonModal trigger-containment guard works. robonen only ever sets ctx.triggerElement from DialogTrigger's currentElement (DialogTrigger.vue lines 17-19); a dialog opened via v-model with no DialogTrigger has triggerElement=undefined, so the (planned) conditional refocus and trigger-dismiss guard cannot work.
+- 🔶 (accessibility) No dev-time accessibility warnings. reka ships useWarning (Dialog/utils.ts) wired in DialogContentImpl under NODE_ENV!=='production' to console.warn when a DialogTitle is missing (label) or when aria-describedby points to a nonexistent description. robonen has no such guard, so a content with no Title silently ships an unlabeled dialog.
+
+**Minor gaps (6):**
+- ▫️ (edge-cases) Modal content does not defensively prevent focusOutside-driven dismiss while trapped. reka DialogContentModal.vue focusOutside handler always event.preventDefault() because a focusout can still fire under a focus trap. robonen DialogContentModal forwards focus-outside to emit only, and robonen's DismissableLayer focusin listener can emit('dismiss') on a focusOutside; the focus trap usually re-focuses inward, but reka's explicit guard removes the race entirely.
+- ▫️ (api-surface) Root default slot does not expose a close helper. reka DialogRoot.vue slot provides { open, close } (lines 54-61, 92-96, close = () => open=false) for ergonomic inline close without DialogClose. robonen DialogRoot.vue template only exposes :open (line 65).
+- ▫️ (api-surface) Public DialogContent does not forward a ref/expose the content element. reka DialogContent.vue uses useForwardExpose and binds :ref="forwardRef" onto Content(Modal|NonModal) so a consumer template ref resolves to the content element. robonen DialogContent.vue has no useForwardExpose/forwardRef; a ref on <DialogContent> resolves to the Presence wrapper, not the dialog element (only the internal Modal/NonModal forward to context).
+- ▫️ (features) No scrollBody config integration. reka useBodyScrollLock honors ConfigProvider scrollBody (padding/margin compensation for scrollbar width). robonen's useBodyScrollLock call in DialogContentModal takes no config and there is no scrollBody plumbing, so layout shift from scrollbar removal is not compensated.
+- ▫️ (ssr) No nonce propagation. reka ConfigProvider exposes nonce (ConfigProvider.vue lines 34-66) consumable by injected style layers. robonen config-provider has no nonce, so any injected <style> (e.g. for pointer-events blocking) cannot carry a CSP nonce.
+- ▫️ (accessibility) Trigger aria-controls is always emitted even when closed. reka DialogTrigger.vue sets :aria-controls="rootContext.open.value ? rootContext.contentId : undefined" so it only references content that exists in the DOM. robonen DialogTrigger.vue line 30 always sets aria-controls to contentId even when content is unmounted, referencing a non-existent id (minor a11y validation nit).
+
+**Recommendations to make robonen strictly better:**
+- In DialogContentModal forward pointer-down-outside through a handler that calls event.preventDefault() for right-clicks (originalEvent.button===2 || (button===0 && ctrlKey)) before re-emitting, mirroring reka DialogContentModal.vue lines 32-43, so right-clicking the overlay no longer closes the modal.
+- In DialogContentModal add a focus-outside handler that calls event.preventDefault() while trapped (reka DialogContentModal.vue lines 44-50) to remove the focusin->dismiss race in DismissableLayer.vue.
+- In DialogContentNonModal add hasInteractedOutsideRef/hasPointerDownOutsideRef state and a close-auto-focus handler that only refocuses ctx.triggerElement when no outside interaction occurred, plus an interact-outside handler that preventDefaults when the target is inside ctx.triggerElement and handles the Safari focusin-after-pointerdown case (reka DialogContentNonModal.vue lines 24-58).
+- In DialogContentImpl onMounted, when ctx.triggerElement is empty, capture getActiveElement() (if not document.body) so programmatic v-model opens with no DialogTrigger still restore focus correctly and feed the NonModal trigger-containment guard (reka DialogContentImpl.vue lines 56-58).
+- Add an explicit close-auto-focus default on the modal path that preventDefaults and focuses ctx.triggerElement, instead of relying solely on FocusScope's previouslyFocusedElement restore (reka DialogContentModal.vue lines 24-31).
+- Add a dev-only useWarning (gated on import.meta.env.DEV / NODE_ENV) wired into DialogContentImpl that warns when no DialogTitle id is registered (titleId undefined) and when descriptionId is set but the element is missing — port reka Dialog/utils.ts.
+- Expose a close helper from the DialogRoot default slot (<slot :open="open" :close="onClose" />) for parity with reka DialogRoot.vue.
+- Add useForwardExpose to the public DialogContent and bind :ref="forwardRef" to the rendered Modal/NonModal so a consumer template ref on <DialogContent> resolves to the content element (reka DialogContent.vue).
+- Make DialogTrigger aria-controls conditional on ctx.open.value so it does not reference an unmounted content id (reka DialogTrigger.vue line 32).
+- Add scrollBody (and nonce) to config-provider and pass scrollBody options into the modal useBodyScrollLock call to compensate scrollbar-width layout shift (reka shared/useBodyScrollLock.ts).
+
+**Where robonen is already better:**
+- ✅ Sets aria-modal="true" on modal content (DialogContentImpl.vue line 55, gated on disableOutsidePointerEvents). reka-ui's Dialog never sets aria-modal at all — robonen is more correct for screen readers in modal mode.
+- ✅ Supports role prop on content: role?: 'dialog' | 'alertdialog' (DialogContentImpl.vue lines 11-12, plumbed through Content/Modal/NonModal). reka hardcodes role="dialog" in DialogContentImpl and pushes alertdialog into a separate package, so robonen's single Content is more flexible.
+- ✅ Body-scroll lock lives in DialogContentModal (lines 22-34) keyed off ctx.open, with explicit release on close and onBeforeUnmount cleanup. reka puts useBodyScrollLock in DialogOverlayImpl, so a modal dialog rendered WITHOUT a DialogOverlay does not lock scroll in reka; robonen always locks for modal regardless of overlay presence.
+- ✅ useHideOthers skips elements inside a closed native [popover] via isInClosedPopover with a Safari-safe try/catch (useHideOthers.ts lines 8-22) — a real edge case reka's plain useHideOthers does not special-case.
+- ✅ DialogPortal exposes forceMount and wraps the teleport in Presence (DialogPortal.vue lines 29-34) and a present slot prop, giving portal-level exit-animation control. reka's DialogPortal is a bare TeleportPrimitive pass-through with no Presence/forceMount.
+- ✅ Performance: modal flag forwarded via toRef getter (GetterRefImpl) instead of computed (DialogRoot.vue lines 45-47), and stable useId-based ids created eagerly rather than reka's mutate-context-string-on-mount pattern (rootContext.contentId ||= ... in DialogTrigger/Impl).
+
+
+### combobox  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** ComboboxVirtualizer (virtualized rendering via @tanstack/vue-virtual + ListboxVirtualizer)
+
+robonen's combobox covers the full part set (Root, Anchor, Trigger, Input, Cancel, Content, ContentImpl, Viewport, Empty, Group, Label, Item, ItemIndicator, Separator, Arrow, Portal) and is in several respects cleaner than reka: a self-contained state machine instead of reka's Listbox/Collection/RovingFocus coupling, a pluggable `filterFunction`, a shipped+tested 'N results available' live region, fresh (non-stale) filterState, and modern shallowRef/triggerRef reactivity. Keyboard coverage on the input (Arrow Up/Down, Home, End, Enter, Escape, Tab, plus OPEN_KEYS to open) and the activedescendant ARIA pattern are at parity. However reka is currently better on real, verifiable axes: it has a ComboboxVirtualizer part (robonen has none), a cancelable Item `select` event, Root-level openOnFocus/openOnClick/resetModelValueOnClear/highlightOnHover and a `highlight` emit, Content-level forceMount/hideWhenEmpty/bodyLock/data-empty/interactOutside, useFocusGuards on content, a nonce-able scrollbar-hiding Viewport, accent-insensitive default filtering, IME composition guards, v-if (unmount) filtering vs robonen's v-show, an empty-value guard on Item, and more graceful group labelling. Closing the listed gaps (especially virtualization, the Item select event, focus guards, and the Root open/highlight props) would make robonen strictly better. Verdict: robonen-better-with-gaps.
+
+
+**Major gaps:**
+- 🔶 (features) No virtualization part. reka ships ComboboxVirtualizer.vue (wrapping ListboxVirtualizer via @tanstack/vue-virtual) and threads `isVirtual` through ComboboxRoot/ComboboxItem/ComboboxInput/ComboboxViewport to support large/async option lists. robonen has no ComboboxVirtualizer and no isVirtual concept; rendering thousands of items will mount them all.
+- 🔶 (accessibility) No focus guards around the content. reka's ComboboxContentImpl calls useFocusGuards() to insert focus sentinels so Tab/Shift-Tab out of a portalled listbox behaves correctly. robonen's ComboboxContentImpl never calls focus guards (the repo only has focus-guard logic in menu's modal content).
+- 🔶 (api-surface) No `openOnFocus`/`openOnClick`/`resetModelValueOnClear`/`highlightOnHover` on Root. reka centralizes these on ComboboxRoot (and threads them through context). robonen only puts openOnFocus/openOnClick on ComboboxInput (per-input) and has no resetModelValueOnClear or highlightOnHover at all — its Cancel never clears the model value, and hover-highlight is always-on via pointermove with no opt-out.
+- 🔶 (api-surface) Item lacks a cancelable `select` event. reka's ComboboxItem forwards a `select` SelectEvent that consumers can preventDefault to block selection/auto-close. robonen's ComboboxItem has no emits at all — selection is hardwired in handleClick with no interception point.
+
+**Minor gaps (14):**
+- ▫️ (features) No body scroll lock option on content. reka's ComboboxContentImpl accepts `bodyLock` and calls useBodyScrollLock(props.bodyLock). robonen's ComboboxContentImpl has no bodyLock prop and never locks scroll, even though the repo already has a body-scroll-lock util (used in dialog/popover/select).
+- ▫️ (api-surface) No `hideWhenEmpty` content prop. reka's ComboboxContentImpl exposes `hideWhenEmpty` (default false) and sets display:none when no items match, plus a `data-empty` attribute on the content. robonen has neither the prop nor a data-empty marker on content.
+- ▫️ (features) No `forceMount` on Content. reka's ComboboxContent has `forceMount` to keep content mounted for external animation libraries (`:present="forceMount || open"`). robonen's ComboboxContent only does `:present="rootCtx.open.value"` with no forceMount.
+- ▫️ (api-surface) Missing `interactOutside` emit on Content. reka forwards DismissableLayer's full emit set including `interactOutside` (ComboboxContentImplEmits = DismissableLayerEmits). robonen's ComboboxContentImplEmits only declares closeAutoFocus/escapeKeyDown/pointerDownOutside/focusOutside — no interactOutside.
+- ▫️ (features) No `disableOutsidePointerEvents` plumbing parity / Content does not pass it cleanly. reka passes `disable-outside-pointer-events` from DismissableLayerProps. robonen declares `disableOutsidePointerEvents` on ContentImplProps but defaults to false and there is no documented way to fully block outside interaction with pointer-events:none on body as reka's DismissableLayer supports.
+- ▫️ (ssr) No `nonce` support / no scrollbar-hiding style in Viewport. reka's ComboboxViewport accepts `nonce` (useNonce) and injects a `<style nonce>` that hides scrollbars cross-browser. robonen's ComboboxViewport has no nonce prop and only inline overflow style — under strict CSP a consumer cannot supply a nonce, and scrollbars are not hidden.
+- ▫️ (api-surface) No `highlight` emit / programmatic highlight event. reka's ComboboxRoot emits `highlight` ({ ref, value }) whenever the active item changes, enabling consumers to react to navigation. robonen has no highlight emit (RootEmits is only update:modelValue/update:open).
+- ▫️ (performance) Items are filtered with v-show, not unmounted. reka's ComboboxItem uses `v-if="isRender"` so non-matching items are removed from the DOM (lighter DOM, better for big lists). robonen's ComboboxItem uses `v-show="isVisible"`, keeping every item element in the DOM permanently.
+- ▫️ (edge-cases) Empty-string item value is not guarded. reka's ComboboxItem throws if `value === ''` (to keep '' reserved for clearing). robonen's ComboboxItem performs no such validation, so an empty-string value can silently collide with the cleared state.
+- ▫️ (rtl-i18n) No accent/diacritic-insensitive default filtering. reka uses Intl-based useFilter({ sensitivity: 'base' }) so 'cafe' matches 'café'. robonen's defaultFilter is a plain lowercase substring `includes`, so accents/locale folding are not handled.
+- ▫️ (accessibility) Group label relationship is fragile. reka separates group `id` and `labelId`: the group's `aria-labelledby` is empty until a ComboboxLabel mounts and sets labelId. robonen's ComboboxGroup always sets `aria-labelledby={id}` and ComboboxLabel sets its element `id={groupCtx.id}` — if no Label is rendered, aria-labelledby points to a non-existent id (broken SR relationship).
+- ▫️ (features) No multiple-selection display in input. robonen's ComboboxInput.displayString explicitly returns '' for arrays, so multi-select has no built-in input display even when a custom displayValue is provided for arrays. reka pairs Combobox with TagsInput stories for multi display.
+- ▫️ (forms) Form value serialization differs and may not round-trip. robonen submits the hidden input as `JSON.stringify(value)` for arrays / `String(value)` otherwise via a raw <input type=hidden>. reka uses VisuallyHiddenInput (in ListboxRoot) which serializes each value as a proper form control entry. robonen's JSON-encoded single field is less conventional for server form parsing and won't produce repeated name entries for multiple.
+- ▫️ (rtl-i18n) No composition (IME) handling on the navigation path. reka's ListboxRoot wires onCompositionStart/onCompositionEnd and guards Enter while composing (isComposing). robonen's ComboboxInput handleKeyDown does not check compositionend/isComposing, so pressing Enter to confirm an IME candidate can prematurely select a combobox item.
+
+**Recommendations to make robonen strictly better:**
+- Add a ComboboxVirtualizer part (and `isVirtual` in context) wrapping the existing robonen listbox virtualizer or @tanstack/vue-virtual; thread isVirtual through Root/Item/Input/Viewport so filterState skips per-item work and items aren't all mounted. Mirror reka Combobox/ComboboxVirtualizer.vue.
+- Switch ComboboxItem from `v-show="isVisible"` to `v-if` (with a first-render registration guard like reka's `filteredCurrentItem === undefined ? true`) so filtered-out items leave the DOM.
+- Add a cancelable `select` emit to ComboboxItem (CustomEvent with value+originalEvent); only auto-close/commit when not defaultPrevented, matching reka ComboboxItem.vue. This unlocks create-on-enter and custom selection flows.
+- Add Root-level props: `openOnFocus`, `openOnClick`, `resetModelValueOnClear`, and `highlightOnHover` (opt-out of pointermove highlight). Implement resetModelValueOnClear in ComboboxCancel (set model to [] or undefined). Emit a `highlight` event from Root when selectedValueId changes.
+- Add `forceMount` to ComboboxContent and `hideWhenEmpty` + `data-empty` to ComboboxContentImpl; set display:none when empty and hideWhenEmpty is true.
+- Add `useFocusGuards()` and an optional `bodyLock` prop (reusing the existing body-scroll-lock util) to ComboboxContentImpl for correct Tab-out and scroll-locking when portalled.
+- Add a `nonce` prop to ComboboxViewport (via a config-provider useNonce) and inject the cross-browser scrollbar-hiding `<style :nonce>` like reka ComboboxViewport.vue; also expose nonce on Root/ConfigProvider for CSP.
+- Add `interactOutside` to ComboboxContentImplEmits and forward it from DismissableLayer for full parity with DismissableLayerEmits.
+- Replace the plain lowercase substring defaultFilter with an Intl.Collator/useFilter-based accent-insensitive matcher (sensitivity: 'base') so diacritics match; keep filterFunction as the override.
+- Fix group labelling: keep an empty `labelId` in ComboboxGroupContext that ComboboxLabel sets on mount, and only emit `aria-labelledby` on the group when a label is present (avoid dangling ids when no Label is rendered).
+- Throw (or warn) in ComboboxItem when `value === ''` to reserve empty-string for the cleared state, matching reka.
+- Add IME composition handling to ComboboxInput (compositionstart/compositionend + isComposing guard) so Enter does not select an item while composing.
+- Reconsider hidden-input serialization: emit repeated `name` entries (or use a VisuallyHiddenInput-style control) for multiple values instead of JSON.stringify so standard form backends parse selections.
+- Verify highlightFirstItem re-runs after the search is cleared so the first item is re-highlighted on the clear-to-all transition (robonen has the oldState.count===0 watcher in ComboboxInput — ensure it also covers clearing back to all items).
+
+**Where robonen is already better:**
+- ✅ Self-contained architecture: robonen's combobox owns its full state machine (registration, filterState, highlight, keyboard) in ComboboxRoot + ComboboxInput rather than delegating to a separate Listbox/Collection/RovingFocus stack. Fewer indirection layers and no cross-primitive coupling (reka's combobox is tightly bound to ListboxRoot/ListboxFilter/ListboxContent/useCollection, so any Listbox change risks the combobox).
+- ✅ Pluggable filtering: ComboboxRoot exposes `filterFunction` (ComboboxFilterFunction) so consumers can fully replace the matching algorithm and reorder results. reka hardcodes `useFilter({ sensitivity: 'base' }).contains` in ComboboxRoot and only offers `ignoreFilter`; there is no per-instance custom filter hook.
+- ✅ Richer filterState typing/semantics: robonen's `ComboboxFilterState` uses `items: Set<string>` of visible ids plus `groups: Set<string>`, computed freshly each time. reka uses `items: Map<string,number>` (score 0/1) and, on the empty-search branch, returns the *previous* oldValue.items/oldValue.groups (ComboboxRoot.vue filterState computed), which can leave a stale items map after clearing the search.
+- ✅ Live-region announcement is shipped and tested: ComboboxContentImpl renders a VisuallyHidden `role=status aria-live=polite` node announcing 'N results available.' with dedicated tests (Combobox.live-region.test.ts). reka's Combobox has no built-in results-count live region.
+- ✅ ComboboxEmpty `always` prop lets consumers force-render the empty slot even when items exist; reka's ComboboxEmpty only renders when count===0 with no override.
+- ✅ More precise default `by`/value comparison utilities (compare/valueComparator in utils.ts) are local and tree-shakeable rather than importing the whole Listbox comparison stack.
+- ✅ displayValue is wired through context to the input with explicit guards for undefined/array/object values (ComboboxInput.displayString), keeping single-select display deterministic.
+- ✅ Modern reactivity: shallowRef + triggerRef for the item/group registries and toRef-based provided refs in ComboboxRoot reduce deep-reactive overhead compared to reka's plain `ref(new Map())` registries mutated in place.
+
+
+### context-menu  —  _robonen-better-with-gaps_
+
+
+Both libraries ship the identical set of 16 ContextMenu parts, all thin wrappers over a shared Menu primitive, so there is no missing sub-component on either side. robonen's wrappers are clean and slightly leaner in a few spots (onScopeDispose timer cleanup, shared context factory, typed virtual rect, reactive modal without an extra watcher). However reka's ContextMenu layer carries several behaviors robonen has dropped. The most impactful are the right-click-on-trigger interact-outside guard (requires tracking triggerElement in root context, which robonen does not store), the nested-trigger / defaultPrevented handling in handleContextMenu (robonen opens unconditionally, so nested context menus and consumer suppression break), and the @pointermove long-press cancellation plus pen-input support. Smaller gaps: configurable pressOpenDelay, sideOffset:2, non-modal closeAutoFocus focus preservation, WebkitTouchCallout/pointerEvents trigger styles + $attrs forwarding, ContextMenuSub defaultOpen/uncontrolled support, locking down ContextMenuContent props via Omit + explicit collision defaults, ContextMenuArrow defaults, and context-menu/trigger-size CSS custom properties (robonen never even aliases the popper anchor size). None of these are present in robonen today, so robonen is currently better-organized but not strictly better; closing the listed items (especially the four major edge-case/a11y gaps) would make it strictly superior.
+
+
+**Major gaps:**
+- 🔶 (edge-cases) robonen ContextMenuContent has no interact-outside guard for right-clicking the trigger while the menu is open. reka's ContextMenuContent intercepts @interact-outside and, when originalEvent.button === 2 && event.target === triggerElement, calls event.preventDefault() so the dismiss layer does not close-then-reopen (prevents flicker / lost focus when re-triggering via right click). robonen omits this entirely.
+- 🔶 (api-surface) robonen ContextMenuRoot does not track the trigger element. reka stores triggerElement: Ref<HTMLElement> in ContextMenuRootContext and sets it onMounted in ContextMenuTrigger; this is required for the right-click interact-outside guard above and is generally useful for consumers. robonen's ContextMenuRootContext has only { open, onOpenChange, modal } — no triggerElement, no dir, no pressOpenDelay.
+- 🔶 (edge-cases) robonen ContextMenuTrigger fires the context menu unconditionally on contextmenu (only gated by `disabled`). It does not await nextTick nor check event.defaultPrevented, so a nested ContextMenuTrigger cannot suppress the outer one and right-click bubbling opens BOTH menus. reka awaits nextTick and bails if event.defaultPrevented, enabling correct nested context-menu behavior.
+- 🔶 (edge-cases) robonen ContextMenuTrigger never cancels the touch long-press on pointermove. reka registers @pointermove -> handlePointerEvent which clearLongPress() so a scroll/drag gesture cancels the pending open. In robonen a touch that starts a scroll still opens the menu after 700ms.
+
+**Minor gaps (10):**
+- ▫️ (edge-cases) robonen long-press opens only for pointerType === 'touch', excluding pen input. reka uses isTouchOrPen (pointerType !== 'mouse'), so pen long-press also opens the context menu. robonen pen users get no long-press affordance.
+- ▫️ (api-surface) pressOpenDelay is not configurable in robonen. reka exposes pressOpenDelay?: number (default 700) on ContextMenuRoot, provides it via context, and uses rootContext.pressOpenDelay.value for the long-press timeout. robonen hard-codes LONG_PRESS_DELAY = 700 in the trigger with no prop.
+- ▫️ (features) robonen ContextMenuContent does not set sideOffset, so it falls through to MenuContentImpl's default of 0. reka explicitly sets :side-offset="2" giving a small gap between the cursor and the menu, the documented context-menu default.
+- ▫️ (accessibility) robonen ContextMenuContent does not preserve focus when the menu is dismissed by an outside interaction in non-modal mode. reka tracks hasInteractedOutside and, in @close-auto-focus, calls event.preventDefault() so focus is not yanked back to the trigger after an outside interaction. robonen just re-emits closeAutoFocus with no such handling.
+- ▫️ (edge-cases) robonen ContextMenuTrigger lacks the defensive inline styles reka applies: WebkitTouchCallout: 'none' (suppresses the iOS native callout on long-press) and pointerEvents: 'auto'. Without WebkitTouchCallout iOS Safari may show the native callout competing with the custom long-press menu.
+- ▫️ (code-quality) robonen ContextMenuTrigger does not disable inheritAttrs nor forward $attrs, and the Primitive sits INSIDE MenuAnchor (which is as-child with reference=virtualEl). reka sets inheritAttrs:false, renders MenuAnchor as a separate template node (as="template", virtual reference) and the Primitive separately with v-bind="$attrs", giving cleaner attribute fallthrough and avoiding the anchor wrapping the trigger DOM.
+- ▫️ (forms) robonen ContextMenuSub has no defaultOpen / uncontrolled support. reka ContextMenuSub adds defaultOpen?: boolean and uses useVModel with passive mode so the submenu can be used uncontrolled. robonen ContextMenuSub merely extends MenuSubProps ({ open?: boolean }) and forwards open, so submenu open state is controlled-only.
+- ▫️ (features) robonen does not expose context-menu-specific CSS custom properties, and the underlying Menu layer never aliases the anchor/trigger size. reka's ContextMenuContent and ContextMenuSubContent emit --reka-context-menu-content-transform-origin/-available-width/-available-height plus --reka-context-menu-trigger-width and --reka-context-menu-trigger-height. robonen MenuContentImpl only aliases transform-origin/available-width/available-height (as --primitives-menu-content-*) and never exposes the popper anchor-width/height, so consumers cannot size the menu to the trigger.
+- ▫️ (api-surface) robonen ContextMenuContent omits the collision/positioning default overrides reka declares (alignOffset:0, avoidCollisions:true, collisionBoundary:[], collisionPadding:0, sticky:'partial', hideWhenDetached:false) and does not Omit those props from the public type to lock side/align. Defaults fall through to Popper, which may differ (e.g. sticky default) and side/sideOffset/align remain settable by consumers (reka Omits side|sideOffset|align|arrowPadding|updatePositionStrategy from ContextMenuContentProps to prevent overriding the cursor-anchored positioning).
+- ▫️ (api-surface) robonen ContextMenuArrow does not set the documented arrow defaults. reka ContextMenuArrow withDefaults width:10, height:5, as:'svg'. robonen ContextMenuArrow forwards props with no defaults, so a bare <ContextMenuArrow/> renders with undefined dimensions/as unless MenuArrow supplies them.
+
+**Recommendations to make robonen strictly better:**
+- Add triggerElement: Ref<HTMLElement | undefined> to ContextMenuRootContext, set it onMounted in ContextMenuTrigger via useForwardExpose().currentElement, then implement the @interact-outside guard in ContextMenuContent: if (originalEvent.button === 2 && event.target === ctx.triggerElement.value) event.preventDefault(); also track hasInteractedOutside and preventDefault on @close-auto-focus for non-modal mode.
+- In ContextMenuTrigger.handleContextMenu, await nextTick() and bail if event.defaultPrevented before opening, so nested ContextMenu triggers and consumer preventDefault work correctly (port reka's nested-trigger semantics).
+- Add an @pointermove handler that clears the long-press timer (and gate by isTouchOrPen), so scrolling/dragging cancels the pending touch open.
+- Broaden the long-press gate from pointerType === 'touch' to pointerType !== 'mouse' (add a small isTouchOrPen util like reka) so pen long-press also opens the menu.
+- Add pressOpenDelay?: number (default 700) to ContextMenuRootProps, provide it through ContextMenuRootContext, and consume it in the trigger instead of the hard-coded LONG_PRESS_DELAY.
+- Set :side-offset="2" on ContextMenuContent's MenuContent (or default it) to match the standard cursor gap.
+- Add the defensive trigger styles WebkitTouchCallout: 'none' and pointerEvents: 'auto', set defineOptions({ inheritAttrs: false }) and forward $attrs onto the Primitive, and render MenuAnchor as a template with the virtual reference rather than wrapping the trigger DOM.
+- Tighten ContextMenuContentProps to Omit<MenuContentProps,'side'|'sideOffset'|'align'|'arrowPadding'|'updatePositionStrategy'> and add withDefaults for alignOffset/avoidCollisions/collisionBoundary/collisionPadding/sticky/hideWhenDetached so cursor-anchored positioning cannot be accidentally overridden and defaults are explicit.
+- Add defaultOpen?: boolean to ContextMenuSub (and uncontrolled support) so submenus can be used without controlling open state.
+- Expose context-menu CSS custom properties on ContextMenuContent/ContextMenuSubContent (transform-origin/available-width/available-height) and, importantly, alias the popper anchor size as a trigger-width/-height var (add --popper-anchor-height + a menu-level alias) so consumers can size the menu to the trigger.
+- Add withDefaults to ContextMenuArrow (width:10, height:5, as:'svg').
+- Store dir in ContextMenuRootContext (via useDirection) for consistency with reka and so consumers/sub-parts can read the resolved direction.
+
+**Where robonen is already better:**
+- ✅ robonen ContextMenuTrigger uses onScopeDispose(clearLongPress) to guarantee the long-press timer is cleared when the component unmounts; reka's ContextMenuTrigger never clears longPressTimer on unmount, so a pending touch long-press timer can fire after teardown (robonen avoids this leak).
+- ✅ robonen's context.ts uses the shared useContextFactory helper giving a single, consistently-named injector (useContextMenuRootContext) reused across the repo, vs reka's per-file createContext duplication.
+- ✅ robonen ContextMenuTrigger's virtualEl getBoundingClientRect returns an explicit, fully-typed rect object with toJSON; reka spreads ...point.value over the literal and casts `as DOMRect`, which is slightly looser typing (robonen is marginally cleaner/type-safe here).
+- ✅ robonen ContextMenuRoot keeps the open state minimal and provides modal as toRef(() => modal), so the modal flag stays reactive without a watcher; functionally equivalent to reka but with no extra watch(open) indirection (reka uses an explicit watch(open) to re-emit update:open).
+
+
+### slider  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** SliderImpl.vue (shared pointer/keyboard impl layer), SliderHorizontal.vue (orientation-specific positioning), SliderVertical.vue (orientation-specific positioning), SliderThumbImpl.vue (thumb impl with Collection + size), Collection integration (useCollection/CollectionSlot/CollectionItem for thumb indexing), VisuallyHiddenInput-based form serialization, SliderOrientationContext (startEdge/endEdge/direction/size)
+**Parts robonen has that reka lacks:** utils.ts hasMinStepsBetweenSortedValues (order-preserving min-gap check), SliderTrack owns its own pointerdown drag-start logic directly (no separate Impl layer), [min,max] bounds-change re-clamp watcher in SliderRoot
+
+robonen's slider is a leaner, more performance-conscious implementation (GetterRefImpl context, cached step decimals, monomorphic style objects, single-pass utils, no Collection dependency, packed-array bounds clamping) and covers the core API: controlled/uncontrolled via modelValue+defaultValue, valueCommit, min/max/step/minStepsBetweenThumbs, horizontal/vertical, RTL, inverted, disabled, Arrow/Page/Home/End keys, range with neighbour clamping, hidden form inputs, and proper ARIA slider role/valuemin/valuemax/valuenow/orientation. However it is not yet strictly better than reka: it lacks Shift+Arrow large steps, automatic per-thumb accessible labels (Minimum/Maximum/Value n of m), ConfigProvider-based global direction inheritance, thumbAlignment/in-bounds thumb offset, the robust VisuallyHiddenInput+useFormControl form path, null modelValue support, and inheritAttrs routing. Closing the listed gaps (especially the three major ones: Shift+Arrow, default thumb labels, and global dir inheritance) would make robonen strictly better.
+
+
+**Major gaps:**
+- 🔶 (keyboard) No Shift+Arrow large-step support. reka treats Shift+ArrowLeft/Right/Up/Down as a 10x step (SliderRoot step-key-down handler: isSkipKey = isPageKey || (event.shiftKey && ARROW_KEYS.includes(event.key)); multiplier = isSkipKey ? 10 : 1). robonen's SliderThumb.onKeyDown only multiplies for PageUp/PageDown and ignores event.shiftKey entirely, so Shift+Arrow does a normal single step.
+- 🔶 (accessibility) No automatic accessible thumb labels. reka derives an aria-label per thumb when no explicit label is given: getLabel(index,total) returns 'Minimum'/'Maximum' for 2 thumbs and 'Value n of m' for >2 (SliderThumbImpl: :aria-label="$attrs['aria-label'] || label"). robonen only forwards a manually-supplied aria-label prop and provides no default, so multi-thumb sliders are unlabeled by default for screen readers.
+- 🔶 (rtl-i18n) Does not inherit global direction from ConfigProvider. reka's SliderRoot calls useDirection(propDir) so dir falls back to the ConfigProvider context dir then 'ltr'. robonen's SliderRoot reads dir directly from the prop (default 'ltr') and never consults useConfig()/the ConfigProvider context, even though robonen ships a config-provider with a reactive global dir. RTL apps must set dir on every slider.
+- 🔶 (features) No thumbAlignment ('contain' vs 'overflow') support. reka offsets the thumb so it stays within the track bounds at the edges via getThumbInBoundsOffset + useSize and exposes a --reka-slider-thumb-transform CSS var; robonen positions thumbs purely by percentage with no edge inset, so at 0%/100% half the thumb overflows the track with no opt-out/opt-in.
+
+**Minor gaps (5):**
+- ▫️ (forms) Form integration is weaker. reka uses VisuallyHiddenInput (a properly visually-hidden, accessibility-safe input) gated by useFormControl so the hidden input only renders when actually inside a <form>, supports disabled, passes step, and serializes arrays/objects robustly. robonen renders raw <input type="hidden"> unconditionally whenever name is set (even with no surrounding form), does not pass disabled to the input, omits step, and hand-rolls the name[] suffix.
+- ▫️ (api-surface) No data-slider-impl / consistent data hooks and no aria-disabled on thumb is fine but reka also forwards $attrs through inheritAttrs:false on Root/ThumbImpl giving precise attribute placement. robonen Root uses default attr inheritance (no inheritAttrs:false), so consumer-passed attributes/listeners land on the Root span rather than being routed, and Root does not v-bind $attrs to an inner element.
+- ▫️ (edge-cases) Disabled thumbs remain in the tab order. reka sets :tabindex="disabled ? undefined : 0" (no tabindex when disabled => not tabbable). robonen sets :tabindex="disabled ? -1 : 0". tabindex=-1 still makes the element programmatically focusable and is arguably acceptable, but reka's removal from tab order plus its overall disabled semantics differ; minor divergence worth aligning.
+- ▫️ (api-surface) Controlled/uncontrolled mode is hand-rolled and slightly lossy. reka uses useVModel with passive detection so null modelValue is supported (modelValue?: number[] | null) and defaultValue defaults to [0]. robonen's modelValue watcher early-returns on undefined and does manual sync; it does not support null, and a value-commit on programmatic min/max clamp path is inconsistent (commit only fires on pointer/keyboard, not on the bounds-clamp watcher). Edge: passing modelValue=null is a type/behavior gap vs reka.
+- ▫️ (accessibility) No aria-valuetext support and no slot/prop to humanize the value for screen readers. Neither library wires aria-valuetext, but reka's getLabel at least disambiguates multiple thumbs; robonen has neither default labels nor valuetext, so the gap is purely additive for robonen to close.
+
+**Recommendations to make robonen strictly better:**
+- Add Shift+Arrow large-step handling in SliderThumb.onKeyDown: when event.shiftKey is set on an Arrow key, use largeStep() (the 10x multiplier) just like PageUp/PageDown, matching reka's behavior.
+- Provide default accessible thumb labels: port reka's getLabel(index, total) so two-thumb sliders default to 'Minimum'/'Maximum' and >2 to 'Value n of m', used as a fallback when no aria-label prop is supplied. Expose aria-label fallback on the SliderThumb Primitive.
+- Make SliderRoot inherit global direction: resolve dir via useConfig()/a useDirection-style computed (prop dir || ConfigProvider dir || 'ltr') instead of reading the prop directly, so the existing config-provider dir actually propagates to the slider.
+- Add a thumbAlignment prop ('contain' | 'overflow', default 'contain') and an in-bounds offset (port getThumbInBoundsOffset + measure thumb size) so thumbs do not overflow the track at the extremes; expose a CSS var for the transform.
+- Harden form integration: render via the existing VisuallyHidden primitive instead of raw <input type=hidden>, gate rendering on an inside-a-form check (useFormControl-style), and forward disabled and step to the input.
+- Support null modelValue and consider useVModel-style controlled/uncontrolled handling; align defaultValue semantics and make valueCommit also fire (or document why not) on programmatic bounds clamping.
+- Set inheritAttrs:false on SliderRoot (and route $attrs explicitly) so consumer attributes/listeners land predictably, matching reka's attribute routing.
+- Add optional aria-valuetext support (e.g. a formatter prop or slot) so screen readers announce human-friendly values; also consider tabindex=undefined when disabled to match reka and remove disabled thumbs from the tab order.
+- Add focus-on-keyboard-change parity: reka focuses the active thumb whenever the value changes via keyboard (thumbElements[index].focus() in updateValues); ensure robonen keeps the active thumb focused after programmatic value changes for consistent SR/keyboard behavior.
+
+**Where robonen is already better:**
+- ✅ Performance: scalar context props are exposed via toRef(() => prop) (GetterRefImpl) instead of toRefs, avoiding redundant ReactiveEffect allocations per prop. Style objects in SliderThumb/SliderRange use a stable monomorphic shape (always same keys, explicit undefined) for V8 hidden-class stability and Vue's style patcher. Decimal count is cached per-step in a watcher (stepDecimals) out of the pointermove hot path, while reka recomputes getDecimalCount(step) on every updateValues call.
+- ✅ Change detection: setValue() does an element-by-element numeric comparison to skip no-op updates, whereas reka's updateValues uses String(nextValues) !== String(modelValue) stringification for equality and re-sorts the whole array (getNextSortedValues calls .sort) on every keystroke/move. robonen preserves order via neighbour clamping with a single array copy.
+- ✅ Hot-path allocation: getValueFromPointer / scaleLinear are plain non-curried functions with no per-call closure, whereas reka's linearScale(input, output) returns a new closure on every call. getClosestValueIndex is single-pass with no intermediate distances array (reka allocates values.map(...) then Math.min(...distances)).
+- ✅ Pointer dragging is global (window pointermove/pointerup added on slide start, removed on up), so dragging keeps tracking even if the pointer leaves the track element; reka relies on setPointerCapture and target.hasPointerCapture checks.
+- ✅ SliderTrack is interactive (its own pointerdown starts a drag and focuses the closest thumb via startDragFromTrack). This is comparable to reka but co-located more simply without a 3-file Impl/Horizontal/Vertical indirection chain.
+- ✅ Simpler architecture: 4 components (Root/Track/Range/Thumb) + context + utils vs reka's 8-file chain (Root -> Horizontal|Vertical -> Impl -> ThumbImpl) plus a Collection dependency. Lower bundle/indirection while still RTL/vertical/inverted-aware.
+- ✅ Bounds-change safety: a watcher on [min,max] re-clamps existing values when bounds shrink (packed-array friendly). reka has no equivalent watcher; if max shrinks below a current value the value stays out of range until next interaction.
+
+
+### stepper  —  _robonen-better-with-gaps_
+
+
+Both libraries ship the same 7 parts (Root, Item, Trigger, Indicator, Separator, Title, Description). robonen is genuinely better on several axes: it adds Home/End keyboard navigation (reka stepper omits both), uses the spec-correct aria-current=\"step\" (reka uses \"true\"), supports a root-level `disabled` prop (reka has none), registers items through an ordered Collection rather than reka's brittle insertion-order Set with off-by-one index math, and is more performance-conscious (single-pass packed arrays, shared roving helpers, no duplicated nextTick watchers). However robonen has real gaps that block 'strictly better': (1) it has NO screen-reader live region — reka announces 'Step X of N' via an off-screen role=status/aria-live=polite node, so robonen silently changes steps for SR users; (2) it exposes no imperative API (defineExpose is effectively empty) whereas reka exposes goToStep/nextStep/prevStep/hasNext/hasPrev/isFirstStep/isLastStep/isNextDisabled/isPrevDisabled/modelValue/totalSteps; (3) it has no nextStep/prevStep relative navigation at all; (4) its Root slot exposes only value/total/goToStep vs reka's full set of nav helpers/flags; (5) StepperSeparator hardcodes a bare div instead of reusing robonen's own Separator primitive (reka wraps the real Separator with decorative+orientation). Closing the live-region, imperative-API, nav-helper, and Separator-reuse gaps (while keeping robonen's existing edge over reka) would make robonen strictly better.
+
+
+**Major gaps:**
+- 🔶 (accessibility) reka renders a visually-hidden live region inside StepperRoot — <div aria-live="polite" aria-atomic="true" role="status"> with text 'Step {{modelValue}} of {{totalSteps}}' — so screen readers announce step changes. robonen's StepperRoot has NO live region/status element, so SR users get no announcement when the active step changes.
+- 🔶 (api-surface) reka exposes imperative API via defineExpose: goToStep, nextStep, prevStep, modelValue, totalSteps, isNextDisabled, isPrevDisabled, isFirstStep, isLastStep, hasNext, hasPrev. robonen's StepperRoot calls useForwardExpose() but defineExpose's nothing, so a template ref gets no stepper methods.
+- 🔶 (features) reka provides rich default slot props: modelValue, totalSteps, isNextDisabled, isPrevDisabled, isFirstStep, isLastStep, goToStep, nextStep, prevStep, hasNext, hasPrev (typed via defineSlots). robonen's Root slot only exposes value, total, goToStep — no nextStep/prevStep/isFirstStep/isLastStep/hasNext/hasPrev/isNextDisabled/isPrevDisabled.
+- 🔶 (api-surface) reka has nextStep()/prevStep() convenience navigation built on goToStep. robonen has only goToStep(step) — there is no relative step navigation method anywhere (not in context, not exposed, not in slot).
+
+**Minor gaps (4):**
+- ▫️ (features) reka derives isNextDisabled/isPrevDisabled (computed from the actual next/prev trigger's disabled attribute) and hasNext/hasPrev. robonen exposes none of these derived navigation-availability states, forcing consumers to reimplement boundary/disabled logic.
+- ▫️ (code-quality) reka's StepperSeparator wraps the real Separator primitive (SeparatorProps, decorative, orientation forwarded from root) so it inherits proper separator sizing/role semantics. robonen's StepperSeparator hardcodes a bare Primitive div with role="separator" aria-hidden="true" and does NOT reuse its own existing src/separator/Separator.vue primitive, nor accept SeparatorProps (e.g. decorative/orientation override).
+- ▫️ (api-surface) reka StepperIndicator and StepperSeparator forward extra DOM props via v-bind="props" on the Primitive (PrimitiveProps spread). robonen's StepperIndicator/Title/Description/Separator only forward :ref/:as and do not v-bind the full props object, so additional PrimitiveProps like asChild are not explicitly spread (they rely on fallthrough only).
+- ▫️ (types) reka explicitly types the default slot of StepperItem (defineSlots state) and StepperIndicator (defineSlots step). robonen does not declare defineSlots in any stepper part, so slot prop types are inferred/loose rather than documented.
+
+**Recommendations to make robonen strictly better:**
+- Add a visually-hidden live region to StepperRoot: render an element (reuse VisuallyHidden primitive) with role="status" aria-live="polite" aria-atomic="true" containing localized 'Step {value} of {total}', so screen readers announce step changes. Consider making the message customizable via a prop/slot for i18n.
+- Add nextStep() and prevStep() to StepperRootContext (built on goToStep), and add derived state: isFirstStep, isLastStep, hasNext, hasPrev, and (optionally) isNextDisabled/isPrevDisabled computed from the next/prev item's disabled status.
+- Call defineExpose on StepperRoot to expose goToStep, nextStep, prevStep, value/modelValue, total, isFirstStep, isLastStep, hasNext, hasPrev so template refs can drive the stepper imperatively (currently useForwardExpose is called but nothing is exposed).
+- Expand the Root default slot props to match/exceed reka: add nextStep, prevStep, isFirstStep, isLastStep, hasNext, hasPrev, isNextDisabled, isPrevDisabled alongside existing value/total/goToStep.
+- Rewrite StepperSeparator to wrap robonen's own Separator primitive (src/separator) with decorative=true and root orientation forwarded, and accept SeparatorProps so consumers can override orientation/decorative — instead of hardcoding role=separator aria-hidden div.
+- Add defineSlots type declarations to StepperItem (state, step), StepperIndicator (step, state), and StepperRoot for first-class slot typing.
+- v-bind the full props object on StepperIndicator/Title/Description/Separator Primitives (or otherwise ensure asChild and other PrimitiveProps are forwarded), matching reka's v-bind="props" pattern.
+- Keep robonen's advantages explicitly: retain aria-current="step", Home/End handling, root-level disabled, and Collection-based ordering — these already beat reka; do not regress them when adding the above.
+
+**Where robonen is already better:**
+- ✅ Keyboard: robonen handles Home/End to jump to first/last enabled trigger (StepperRoot.vue onTriggerKeyDown via rovingKeyToAction 'home'/'end'). reka's StepperTrigger only binds @keydown.enter.space.left.right.up.down and useArrowNavigation handles arrows only — reka has NO Home/End support.
+- ✅ Correct ARIA value: robonen sets aria-current="step" on the active StepperItem (StepperItem.vue), which is the spec-correct token. reka uses aria-current="true" (StepperItem.vue line 89), a weaker/less-specific value.
+- ✅ Ordered, deterministic registration: robonen uses Collection (useCollectionProvider/useCollectionInjector + CollectionSlot/CollectionItem) which yields DOM-ordered items via getItems(true). reka tracks triggers in a plain Set<HTMLElement> (totalStepperItems) and indexes it with Array.from — order is insertion order and its index math (totalStepperItemsArray[step], [step-2]) is brittle/off-by-one-prone.
+- ✅ Root-level disable: robonen exposes a `disabled` prop on StepperRoot that disables the whole stepper (gates goToStep, propagates into item.disabled and focusable, emits data-disabled on root). reka has no root-level disabled prop at all.
+- ✅ Performance-conscious focus traversal: robonen builds a PACKED enabled-triggers array in a single for-loop (no filter closure) and reuses shared resolveNextIndex/rovingKeyToAction helpers. reka recomputes Array.from(totalStepperItems) per keydown and runs two duplicate watch(nextTick) blocks (on modelValue and on totalStepperItemsArray) to maintain prev/next refs.
+- ✅ RTL handled through the shared roving helper (rovingKeyToAction flips delta for dir==='rtl') and direction falls back to ConfigProvider via useConfig; dir is also reflected onto the root element (:dir="direction").
+
+
+### config-provider  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** ConfigProvider.vue (declarative SFC component with slot), ScrollBodyOption type + scrollBody config field, nonce config field (+ useNonce shared composable), locale config field (+ useLocale shared composable), useDirection shared composable resolving local-or-config dir, Vue <3.5 useId fallback path
+**Parts robonen has that reka lacks:** provideAppConfig (app-level plugin provisioning), teleportTarget config field (+ Teleport.vue consumer), Pluggable UseIdFn with (deterministic?, prefix?) signature, Local useId.ts that routes through active config, Non-optional, always-resolved ConfigContext fields
+
+robonen's config-provider is a lean composable-first design (provideConfig/provideAppConfig/useConfig + a config-routed useId) that genuinely beats reka in a few areas: app-level plugin provisioning (provideAppConfig), a centralized teleportTarget knob consumed by Teleport.vue, a richer pluggable UseIdFn that forwards deterministic/prefix, and an always-resolved non-optional context that avoids reka's per-consumer fallback duplication. However reka's ConfigProvider currently carries three first-class global features robonen's config entirely lacks: scrollBody (body-scroll-lock padding/margin/--scrollbar-width tuning), nonce (app-wide CSP nonce inheritance), and locale (inherited by all date/calendar primitives). In robonen these are either hardcoded (scroll lock in @robonen/vue useBodyScrollLock) or only available as per-component props (nonce on ScrollAreaViewport, locale on CalendarRoot/DatePickerRoot), so they cannot be set once app-wide. There is also a real reactivity bug: resolveContext snapshots a MaybeRefOrGetter dir/teleportTarget into a fresh ref, so a reactive source disconnects from the context (reka's toRefs(props) keeps them live), and the default useId has no Vue<3.5 fallback that reka provides. Net: robonen is better on provisioning/teleport/useId ergonomics but has clear, fixable feature gaps (scrollBody/nonce/locale) plus a reactivity defect that prevent it from being strictly better today.
+
+
+**Major gaps:**
+- 🔶 (features) reka provides a global `scrollBody` config (boolean | ScrollBodyOption{padding,margin}) consumed by useBodyScrollLock to compute body padding/margin compensation and --scrollbar-width on lock. robonen's ConfigContext has NO scrollBody field; robonen's @robonen/vue useBodyScrollLock (used by DialogContentModal.vue:24, PopoverContentModal, MenuRootContentModal, SelectContentImpl) hardcodes scrollbar compensation and offers no global config knob to disable/customize padding vs margin per app.
+- 🔶 (features) reka provides a global `nonce` config (CSP) inherited by every primitive that injects a <style> tag, via useNonce() which falls back to context.nonce. robonen has NO nonce field in config; robonen exposes nonce only as a LOCAL prop on ScrollAreaViewport.vue:6 (`nonce?: string`) and nowhere else, so there is no app-wide CSP nonce inheritance — every style-injecting primitive must be passed nonce manually.
+- 🔶 (rtl-i18n) reka provides a global `locale` config (default 'en') inherited by all date/calendar primitives via useLocale(). robonen has NO locale in config; robonen's CalendarRoot.vue:91 and DatePickerRoot.vue default `locale='en'` as a PER-COMPONENT prop with no global inheritance, forcing the locale to be repeated on every Calendar/DatePicker/DateField instance.
+- 🔶 (performance) robonen's provideConfig does NOT keep the context reactive to a reactive source option. resolveContext() reads `toValue(options.dir)` ONCE and wraps the snapshot in a brand-new ref, so passing a ref/getter for dir or teleportTarget (which ConfigOptions types as MaybeRefOrGetter) silently disconnects future updates from the source. reka uses toRefs(props) so the provided dir/locale/scrollBody/nonce refs ARE the live prop refs and propagate parent updates automatically.
+
+**Minor gaps (3):**
+- ▫️ (ssr) reka's useId has a built-in Vue-version fallback path: when Vue 3.5's `useId` is unavailable it uses an injected `context.useId?.()` plus an internal incrementing counter so SSR hydration still works on Vue <3.5. robonen's toolkit useId (toolkit useId/index.ts:29) calls Vue's `useId()` unconditionally with no <3.5 fallback, so on older Vue it would break; the config-provider's useId override exists but the DEFAULT path has no graceful degradation.
+- ▫️ (api-surface) reka ConfigProvider sets `inheritAttrs: false` and renders a real component boundary, allowing it to be used directly in templates (e.g. <ConfigProvider dir="rtl">). robonen ships NO ConfigProvider component at all — consumers must call provideConfig() inside a setup() of a component they author, which is less ergonomic for template-only/no-build or simple app-shell usage and gives no declarative props-with-JSDoc surface.
+- ▫️ (code-quality) reka documents each prop with rich JSDoc (@defaultValue, @type, descriptions of inheritance semantics) on ConfigProviderProps, surfacing in IDE tooltips and the docs generator. robonen's ConfigOptions interface (context.ts:18-22) has no per-field JSDoc, reducing discoverability of dir/teleportTarget/useId semantics and defaults.
+
+**Recommendations to make robonen strictly better:**
+- Add `scrollBody?: MaybeRefOrGetter<boolean | ScrollBodyOption>` to ConfigOptions/ConfigContext and wire @robonen/vue's useBodyScrollLock to read it from useConfig() so the global padding/margin/--scrollbar-width behavior is configurable app-wide (match reka shared/useBodyScrollLock.ts). Define ScrollBodyOption = { padding?: boolean|number|string; margin?: boolean|number|string }.
+- Add `nonce?: MaybeRefOrGetter<string>` to config and introduce a useNonce(localNonce?) composable that resolves localNonce ?? config.nonce; have ScrollAreaViewport and every style-injecting primitive default their nonce prop to it, giving app-wide CSP nonce inheritance.
+- Add `locale?: MaybeRefOrGetter<string>` (default 'en') to config and a useLocale(localLocale?) composable; default CalendarRoot/DatePickerRoot/DateField `locale` props to the config value so locale is inherited globally instead of repeated per instance.
+- Fix the reactivity leak in resolveContext: instead of `ref(toValue(options.dir))`, preserve reactivity from the source — e.g. use `toRef`/a computed-backed ref (or accept a ref and reuse it) so a MaybeRefOrGetter source stays live, matching reka's toRefs(props) behavior. Add a test that passes a ref/getter and asserts context updates when the source changes.
+- Make the default useId degrade gracefully on Vue <3.5 (feature-detect `'useId' in vue`, fall back to an injected useId override + internal counter) as reka does, or document the hard Vue 3.5 requirement explicitly.
+- Ship an optional thin <ConfigProvider> SFC (wrapping provideConfig in setup, inheritAttrs:false, <slot/>) for declarative/template usage, keeping the composable API as the primary path. Add JSDoc (@defaultValue/@type) to each ConfigOptions field for IDE discoverability.
+- Consider exposing a forceMount/global flag and documenting that provideAppConfig shares a single context instance app-wide so per-component overrides via nested provideConfig still work.
+
+**Where robonen is already better:**
+- ✅ App-level provisioning: robonen exposes provideAppConfig(app, options) so config can be installed as a Vue plugin (app.provide) without a wrapping component. reka ONLY ships a <ConfigProvider> SFC and provideConfigProviderContext is internal/not re-exported, so reka cannot provide config at the app root without rendering a component. (robonen context.ts:43-45, index.ts re-exports provideAppConfig)
+- ✅ Composable-first API with zero render overhead: robonen's provider is pure composables (provideConfig / useConfig) with no SFC, no slot wrapper, no inheritAttrs handling. reka must mount a component whose template is <slot/>, adding a (thin) component instance to the tree. robonen integrates anywhere in setup().
+- ✅ Safer default-on-inject ergonomics: robonen's useConfig() returns a FULLY-formed ConfigContext (via resolveContext()) when no provider exists, so all fields (dir, teleportTarget, useId) are always present and typed non-optional (ConfigContext.dir: Ref<Direction>, not optional). reka's ConfigProviderContextValue makes every field optional (dir?, locale?, useId?) and each consumer (useDirection, useNonce, useLocale) must re-inject with its own ad-hoc fallback ref, duplicating defaults across files and risking drift.
+- ✅ teleportTarget config field: robonen centralizes the global teleport/portal destination in config (ConfigContext.teleportTarget, consumed by Teleport.vue:53 as `to ?? config.teleportTarget.value`). reka's ConfigProvider has NO teleport-target config; reka primitives hardcode 'body' or require per-Portal `to` props.
+- ✅ Typed pluggable useId with prefix + deterministic passthrough: robonen's UseIdFn signature is (deterministic?, prefix?) => ComputedRef<string> and the local useId.ts forwards both args through the active config (useId.ts:11-16). reka's ConfigProvider.useId is `() => string` (no args), so a user-injected useId cannot receive deterministic id or prefix.
+- ✅ useConfig() throws a descriptive VueToolsError via useContextFactory only on genuinely-absent symbol injection but always supplies a resolved fallback, avoiding the silent-undefined-field footguns reka's optional context invites.
+
+
+### avatar  —  _robonen-better-with-gaps_
+
+
+Both libraries implement the same three parts (Root, Image, Fallback) with identical loading-status state machines ('idle'|'loading'|'loaded'|'error') shared via context, so there is full structural parity and no missing sub-components on either side. robonen is genuinely better in several areas: it puts data-status on the Root for styling, its Fallback delayMs logic is reactive and self-correcting (reka's canRender latches once and never resets), it guards against stale in-flight image loads when src changes, it has an explicit SSR branch, and it gracefully handles missing/empty src. However robonen has real gaps versus reka, mostly concentrated in AvatarImage: it does not forward referrerPolicy or crossOrigin (major — affects CORS, privacy, and cache reuse between the off-DOM preload and the displayed img), it lacks reka's synchronous cached-image detection so cached avatars flash the fallback, it doesn't validate naturalWidth>0 before declaring 'loaded', it omits role=\"img\", it has no default slot on the image, it uses v-if (remount) instead of v-show, and it surfaces loading status only via a prop callback rather than a Vue emit. None of these are structural; all are additive fixes. With the referrerPolicy/crossOrigin forwarding, cached/naturalWidth detection, role=\"img\", a slot, v-show, and a loadingStatusChange emit added, robonen would be strictly better than reka while retaining its existing advantages. Verdict: robonen-better-with-gaps.
+
+
+**Major gaps:**
+- 🔶 (api-surface) AvatarImage does not forward referrerPolicy. reka exposes a referrerPolicy prop that is applied both to the preloading Image (utils.ts:56-57 img.referrerPolicy = referrerPolicy.value) and to the rendered element (AvatarImage.vue:54 :referrerpolicy). robonen's AvatarImageProps has no referrerPolicy, so privacy-sensitive avatar requests cannot set Referrer-Policy, and the displayed <img> may issue a second request with different policy than the preload.
+- 🔶 (api-surface) AvatarImage does not forward crossOrigin. reka exposes crossOrigin applied to the preload Image (utils.ts:58-59) and the rendered img (AvatarImage.vue:55 :crossorigin). Because robonen preloads via `new Image()` with no crossOrigin and then renders a separate <img> (also without crossOrigin), CORS-required avatars (canvas tainting, credentialed CDNs) cannot be configured, and the displayed image may not reuse the preload cache entry.
+- 🔶 (performance) No synchronous cached-image detection. reka's resolveLoadingStatus returns 'loaded' immediately when image.complete && image.naturalWidth > 0 (utils.ts:17), so a browser-cached avatar shows instantly with no fallback flash. robonen always calls setStatus('loading') then waits for an async onload (AvatarImage.vue:50-59), so even a fully cached image produces a fallback flash before swapping in the image.
+
+**Minor gaps (5):**
+- ▫️ (edge-cases) No naturalWidth validation of a 'loaded' image. reka requires image.naturalWidth > 0 to count as loaded (utils.ts:17), rejecting broken/zero-dimension responses that still fire onload. robonen treats any onload as 'loaded' (AvatarImage.vue:53-54) regardless of dimensions, so a degenerate image can suppress the fallback.
+- ▫️ (accessibility) AvatarImage sets no explicit role. reka renders role="img" on the image Primitive (AvatarImage.vue:50), which preserves image semantics even when `as`/asChild changes the element to a non-<img> tag. robonen renders a bare Primitive with as='img' and no role (AvatarImage.vue:76-82); if a consumer sets as to a span/div the accessibility role is lost.
+- ▫️ (features) AvatarImage renders no default slot. reka's AvatarImage forwards a <slot/> (AvatarImage.vue:57), allowing content/children inside the image element (relevant when as/asChild renders a non-void wrapper). robonen's AvatarImage template (AvatarImage.vue:76-82) is a self-closing Primitive with no slot, so it cannot host children.
+- ▫️ (performance) Image visibility uses v-if (unmount) instead of v-show. reka keeps the <img> mounted and toggles visibility with v-show display:none (AvatarImage.vue:49), so the actual <img> participates in the browser's image pipeline and is not torn down/recreated on status changes. robonen unmounts the img entirely with v-if (AvatarImage.vue:79), meaning the displayed image element is created only after the off-DOM preload completes, increasing the chance of a separate fetch and a remount.
+- ▫️ (api-surface) Loading status is exposed as a prop callback only, not a Vue emit. reka defines AvatarImageEmits loadingStatusChange via defineEmits (AvatarImage.vue:6-12,28,39), so consumers can use @loading-status-change and it integrates with Vue's emit tooling/types. robonen only offers an onLoadingStatusChange prop callback (AvatarImage.vue:10,20,31); there is no defineEmits, so template @-handler ergonomics and emit typing differ from the ecosystem convention.
+
+**Recommendations to make robonen strictly better:**
+- Add referrerPolicy and crossOrigin props to AvatarImageProps and apply them both to the preloading `new Image()` (img.referrerPolicy / img.crossOrigin before setting src) and to the rendered <img> Primitive (:referrerpolicy / :crossorigin), matching reka utils.ts:56-59 and AvatarImage.vue:54-55, so the displayed image reuses the preload cache and CORS/privacy can be configured.
+- Detect already-loaded/cached images synchronously to avoid a fallback flash: when creating the loader Image (or by reading the rendered img), if img.complete && img.naturalWidth > 0 set status to 'loaded' immediately instead of unconditionally going through 'loading' (mirror reka resolveLoadingStatus, utils.ts:14-17).
+- Require img.naturalWidth > 0 in the onload handler before treating the image as 'loaded' (AvatarImage.vue:53-54), so zero-dimension/broken-but-onload responses fall through to 'error' and the fallback stays visible.
+- Add role="img" to the AvatarImage Primitive (AvatarImage.vue:76-82) so image semantics survive when consumers override `as`/use as='template'.
+- Add a default <slot/> to AvatarImage's Primitive so children can be rendered when `as` is a non-void element (parity with reka AvatarImage.vue:57).
+- Switch the image render from v-if to v-show (keep the <img> mounted, toggle display) to avoid remounting the displayed element and to let the browser image pipeline drive load detection, as reka does (AvatarImage.vue:49).
+- Introduce a defineEmits-based loadingStatusChange emit on AvatarImage in addition to (or instead of) the onLoadingStatusChange prop, so consumers get idiomatic @loading-status-change handlers and proper emit typing (reka AvatarImage.vue:6-12).
+- Consider preserving robonen's strengths while adopting the above: keep data-status on Root, the self-correcting delayMs fallback, the in-flight load cancellation guards, and the explicit SSR branch — these are real advantages over reka and should not be regressed.
+
+**Where robonen is already better:**
+- ✅ Root exposes a data-status attribute reflecting imageLoadingStatus (AvatarRoot.vue:27 :data-status="imageLoadingStatus"), giving consumers a CSS/style hook (e.g. [data-status=loading]). reka's AvatarRoot.vue renders no status attribute at all.
+- ✅ Fallback delay logic is reactive and self-correcting: on every status change it re-evaluates, re-hides when the image becomes 'loaded' (AvatarFallback.vue:26-44 sets canShow=false and clears the timer), and re-arms the delay if status reverts. reka's AvatarFallback canRender (AvatarFallback.vue:24,26-36) only ever latches true once via a one-shot timer and is never reset when the image later loads or src changes.
+- ✅ AvatarImage cancels stale in-flight loads via identity guards (AvatarImage.vue:53-57 `if (currentImage === img)`) so a rapid src change cannot let an older image's onload/onerror clobber the newer status. reka relies on watchEffect cleanup removing listeners but reuses a single persistent Image element (utils.ts:22-31), which is functional but less explicit about race ordering.
+- ✅ Explicit SSR branch in the loader: when typeof window === 'undefined' robonen sets status to 'loading' and skips constructing an Image (AvatarImage.vue:46-49). reka's useImageLoadingStatus guards new window.Image() with isClient (utils.ts:27) but still computes resolveLoadingStatus against a null image, which is fine but robonen's intent is clearer.
+- ✅ AvatarImage explicitly emits 'error' when src is falsy/undefined (AvatarImage.vue:42-44), and the src prop is optional, so passing no/empty src cleanly shows the fallback. reka types src as required (AvatarImage.vue:14 `src: string`).
+- ✅ onBeforeUnmount detaches the loader image's onload/onerror and drops the reference (AvatarImage.vue:64-70), avoiding any lingering callback firing after unmount.
+
+
+### visually-hidden  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** VisuallyHiddenInput.vue (form-integration input that serializes primitive/array/object values into native hidden inputs), VisuallyHiddenInputBubble.vue (single native input that fires synthetic input/change events via the native HTMLInputElement.prototype value setter, plus checked/required/disabled props)
+
+Robonen's core VisuallyHidden display component is at parity-or-better than reka's on the pure visual-hiding job: it has the same correct sr-only style block (including reka's #2127 container-scroll fix), it forwards the inner element/exposed API via useForwardExpose (which reka's VisuallyHidden does not), it emits a richer data-visually-hidden attribute, and crucially its default 'focusable' mode keeps content announced — fixing reka's footgun where the default feature='focusable' silently sets aria-hidden='true' and hides the label from screen readers. The decisive gap is scope: reka's VisuallyHidden package also ships VisuallyHiddenInput + VisuallyHiddenInputBubble, a reusable native-form-integration layer (value serialization for primitives/arrays/objects, required+empty-array handling, checked/required/disabled props, and programmatic value sync via the native prototype setter + synthetic input/change events) that is consumed across ~10 reka form primitives. Robonen ships none of that here and instead hand-rolls inline hidden inputs per primitive (e.g. CheckboxRoot). Robonen also lacks a hidden-but-focusable proxy mode (reka separates aria-hidden from tabindex), lacks an asChild boolean on the component, and has a misleading JSDoc on the feature prop. To be strictly better, robonen should add the form-input component pair, separate the focus/a11y-tree concerns, add asChild, and fix the prop docs.
+
+
+**Major gaps:**
+- 🔶 (forms) Reka ships a full native-form-integration component pair (VisuallyHiddenInput + VisuallyHiddenInputBubble) inside the VisuallyHidden package; robonen's visually-hidden package ships only the display component with no form-input analogue.
+- 🔶 (forms) Reka's input serializes complex values: primitives, arrays with `name[index]` keys, arrays-of-objects with `name[index][key]`, and plain objects with `name[key]`, rendering one native input per leaf. Robonen has no equivalent value-serialization helper.
+- 🔶 (forms) Reka programmatically sets the input value using the native HTMLInputElement.prototype 'value' setter and dispatches bubbling synthetic input + change events, so third-party form libraries / event listeners detect changes. Robonen has no such mechanism in this package.
+
+**Minor gaps (5):**
+- ▫️ (edge-cases) Reka handles the 'required + empty array' edge case by still rendering one input so native HTML required validation fires on empty multi-selects.
+- ▫️ (forms) Reka supports a `checked` prop on the bubble input (for checkbox/radio submission) distinct from `value`. Robonen's package exposes nothing of the sort.
+- ▫️ (api-surface) Reka provides a distinct 'hidden-but-focusable proxy' mode (feature='focusable' => aria-hidden=true, element stays in tab/focus order). Robonen has no mode that keeps the element focusable while removing it from the accessibility tree; robonen's two modes are 'focusable' (announced, in tab order) and 'hidden' (aria-hidden AND tabindex=-1), which conflates a11y-tree removal with focus-order removal.
+- ▫️ (api-surface) Reka's VisuallyHidden binds :as-child='asChild', so consumers can merge the hidden styles onto an existing child element/component (e.g. BubbleSelect.vue uses `<VisuallyHidden as-child>`). Robonen's VisuallyHiddenProps/Primitive expose no asChild boolean for this component.
+- ▫️ (code-quality) JSDoc on robonen's `feature` prop is inaccurate/misleading: it is documented as 'Exclude the element from the accessibility tree entirely ... @default false' even though the type is 'focusable' | 'hidden' and the real default is 'focusable'. Reka's prop has no such doc mismatch.
+
+**Recommendations to make robonen strictly better:**
+- Add a VisuallyHiddenInput (+ inner bubble) component to robonen's visually-hidden package mirroring reka: serialize primitive/array/array-of-object/object values into one native hidden input per leaf using `name[index][key]` conventions, support name/value/checked/required/disabled props, and handle the required+empty-array case by still rendering one input.
+- Implement programmatic value sync in that input using the native HTMLInputElement.prototype 'value' setter plus bubbling synthetic 'input' and 'change' events, so external form libraries detect changes (port reka VisuallyHiddenInputBubble.vue watch logic).
+- Refactor robonen's form primitives (CheckboxRoot, Switch, RadioGroup, Slider, ToggleGroup, Select, TagsInput, PinInput) to reuse the new VisuallyHiddenInput instead of hand-rolling inline <input> elements, eliminating duplicated ad-hoc hidden-input markup.
+- Separate the two orthogonal concerns into distinct/composable behavior so a hidden-but-focusable proxy is expressible: e.g. keep 'focusable' (announced, in tab order) and 'hidden' (aria-hidden + tabindex=-1), but add a third mode or boolean so an element can be aria-hidden while staying focusable (reka's focus-proxy use case).
+- Add an asChild boolean to VisuallyHiddenProps (or document the as='template' equivalent) so consumers can merge sr-only styles onto an existing child element/component the way reka's BubbleSelect uses `<VisuallyHidden as-child>`.
+- Fix the JSDoc on the `feature` prop: it currently says '@default false' / 'exclude from accessibility tree entirely' for a 'focusable' | 'hidden' union whose real default is 'focusable'. Document each enum value's exact aria-hidden/tabindex effect.
+- Export the new VisuallyHiddenInput from src/visually-hidden/index.ts (and consider a top-level export) so form integration is reusable by consumers, matching reka VisuallyHidden/index.ts.
+
+**Where robonen is already better:**
+- ✅ Default feature='focusable' does NOT set aria-hidden, so the common screen-reader-only-label use case (the one shown in reka's own docs: <VisuallyHidden>Settings</VisuallyHidden>) actually gets announced. Reka's default feature='focusable' sets aria-hidden='true' (VisuallyHidden.vue:19), meaning the naive default use of reka's component is NOT announced to screen readers unless the author explicitly passes feature='fully-hidden' — a real footgun that robonen avoids.
+- ✅ Forwards the underlying element/exposed API to consumers via useForwardExpose() + :ref='forwardRef' (VisuallyHidden.vue:20,41). Reka's VisuallyHidden.vue does NOT call useForwardExpose / forwardRef, so a parent placing a template ref on reka's VisuallyHidden does not transparently get the inner $el/exposed API.
+- ✅ Exposes a single readable data-visually-hidden attribute carrying the active feature value ('focusable' | 'hidden') for styling/testing hooks (VisuallyHidden.vue:46). Reka only emits a value-less data-hidden='' and only for the fully-hidden case (VisuallyHidden.vue:20), so reka's focusable mode has no styling/test hook at all.
+- ✅ Identical, correct sr-only style block including the top/-1px / left/-1px container-scroll fix from reka issue #2127 — robonen has parity on the styling itself with no regression.
+
+
+### alert-dialog  —  _robonen-better-with-gaps_
+
+
+Both libraries build alert-dialog as a thin specialization of Dialog: force modal=true, set role='alertdialog', block outside-pointer/interaction dismissal, and redirect open auto-focus to the Cancel button. robonen reaches functional parity on the load-bearing behaviors — role='alertdialog', modal focus trap, focus return to trigger (via FocusScope useAutoFocus restoring the previously-focused element), body scroll lock, aria-labelledby/aria-describedby wiring, and blocking of outside-click/escape-driven dismissal (it prevents both pointerDownOutside and focusOutside, equivalent to reka's interactOutside.prevent). robonen is genuinely better on dependency hygiene (defineModel vs vueuse useVModel) and adds data-alert-dialog-* hooks reka lacks. However, several real gaps remain. The most significant: robonen focuses Cancel by global document.querySelector instead of a per-instance context, which is incorrect for nested/multiple alert dialogs (reka uses provide/inject + the cancel element's own ref); robonen omits the dev-mode missing-Title/Description accessibility warning reka ships; and robonen does not call useForwardExpose on any alert-dialog part, so template refs do not resolve. Minor gaps: cancel focus without preventScroll, missing { close } slot prop, and an incomplete public type-export surface (no AlertDialogEmits, no per-part Props aliases for Description/Overlay/Portal/Title/Trigger). Files: /Users/robonen/Projects/tools/vue/primitives/src/alert-dialog/AlertDialogContent.vue, AlertDialogCancel.vue, AlertDialogRoot.vue, index.ts. Verdict: robonen is better in places but not yet strictly better — fix the cancel-focus context, the a11y dev warning, and ref forwarding to close the gap.
+
+
+**Major gaps:**
+- 🔶 (edge-cases) Cancel auto-focus uses a global document.querySelector('[data-alert-dialog-content]') then querySelector('[data-alert-dialog-cancel]'), which returns the FIRST match in document order. With nested or multiple simultaneously-mounted alert dialogs, the wrong dialog's cancel button (or none) gets focused.
+- 🔶 (accessibility) No dev-mode accessibility warning when an alert dialog is missing a Title or Description. An alertdialog with no accessible name silently ships.
+
+**Minor gaps (5):**
+- ▫️ (accessibility) Cancel button is focused without preventScroll, so opening the alert dialog can scroll the page/container to the cancel button.
+- ▫️ (api-surface) No per-part ref forwarding/expose on AlertDialog parts. Consumers using template refs on AlertDialogContent/Action/Cancel/Root cannot reach the underlying element.
+- ▫️ (api-surface) Default slot of AlertDialogRoot exposes only { open }, missing the { close } slot prop.
+- ▫️ (types) No dedicated AlertDialog* type re-exports for several parts and no AlertDialogEmits type. Consumers must import DialogDescriptionProps/DialogOverlayProps/etc. from the dialog package and have no AlertDialogEmits alias.
+- ▫️ (api-surface) AlertDialogRoot does not forward arbitrary DialogRoot emits as a typed surface; it only wires update:open via defineModel.
+
+**Recommendations to make robonen strictly better:**
+- Replace the document.querySelector-based cancel lookup in AlertDialogContent.vue with a provide/inject context (mirror reka: an AlertDialogContentContext with onCancelElementChange, and have AlertDialogCancel.vue report its own currentElement via useForwardExpose + onMounted). This fixes nested/multiple-dialog focus correctness — the most important gap.
+- Change cancel.focus() to cancel.focus({ preventScroll: true }) to avoid scroll jumps on open.
+- Add useForwardExpose() to AlertDialogRoot/Content/Action/Cancel and bind :ref="forwardRef" so template refs reach the underlying elements (AlertDialogCancel especially needs its element ref for the context approach above).
+- Add a dev-only accessibility warning (NODE_ENV guard) in the Dialog content layer warning when no Title (aria-labelledby) or no Description (aria-describedby) is present, with a hint to use VisuallyHidden — port reka's useWarning. This benefits both Dialog and AlertDialog.
+- Expose { open, close } from AlertDialogRoot's default slot to match reka and improve ergonomics (e.g. <slot :open="openModel" :close="() => openModel = false" />).
+- Export an AlertDialogEmits type alias and dedicated AlertDialog{Description,Overlay,Portal,Title,Trigger}Props re-exports from alert-dialog/index.ts so the public type surface is complete and self-contained.
+- Consider forwarding DialogRoot emits generically in AlertDialogRoot (or document that update:open is the only emit) to future-proof the emit surface.
+
+**Where robonen is already better:**
+- ✅ Cleaner v-model: robonen AlertDialogRoot uses defineModel('open') with no external dependency, whereas reka relies on @vueuse/core's useVModel inside DialogRoot. Same controlled/uncontrolled support with a smaller dependency footprint.
+- ✅ Adds stable styling/test hooks reka lacks: robonen stamps data-alert-dialog-content, data-alert-dialog-cancel, and data-alert-dialog-action on the rendered parts (AlertDialogContent.vue, AlertDialogAction.vue, AlertDialogCancel.vue). Reka emits none of these, so consumers cannot target the alert-dialog parts by attribute.
+- ✅ Explicit, well-typed dismissal event ordering: robonen's DismissableLayer.createInteractEvent emits interactOutside first and lets it cancel before pointerDownOutside/focusOutside, and AlertDialogContent prevents both pointerDownOutside and focusOutside — functionally blocking every outside-dismiss path, equivalent to reka's @interact-outside.prevent + @pointer-down-outside.prevent.
+- ✅ AlertDialogContentProps is Omit<DialogContentProps,'role'> so a consumer cannot accidentally override role='alertdialog'; reka leaves role overridable in the prop type (AlertDialogContentProps extends full DialogContentProps) and only pins it in the template.
+
+
+### toggle  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** VisuallyHiddenInput (hidden form-bubble checkbox rendered inside Toggle)
+
+Both are single-component primitives (Toggle.vue + index.ts; no sub-parts). robonen is genuinely better on interaction robustness for non-button hosts: it adds Space/Enter keyboard activation, tabindex (0/-1) management, aria-disabled, and a logic-level disabled guard — all of which reka's Toggle entirely lacks (reka relies solely on the native <button>, so reka rendered as as='div'/asChild div is keyboard-inoperable and still toggles when 'disabled'). However, robonen is missing reka's form integration: reka extends FormFieldProps (name/required) and renders a VisuallyHiddenInput checkbox so the toggle participates in native form submission (SSR-safe via useFormControl), and it suppresses that input when nested in a ToggleGroup. robonen has no name/required props, no hidden input, no useFormControl, and no toggle-group context injection in the standalone Toggle. reka also exposes a richer slot scope (modelValue/state/disabled vs robonen's pressed-only) and exports an emits/state type. Net: robonen wins on a11y/keyboard for non-native hosts but has a real, fixable form-integration gap. Verdict: robonen-better-with-gaps.
+
+
+**Major gaps:**
+- 🔶 (forms) Form integration is entirely missing in robonen. reka's Toggle accepts FormFieldProps (name, required) and, when standalone in a form, renders a <VisuallyHiddenInput type='checkbox' :name :value=modelValue :required> so the toggle's value is submitted with the surrounding <form> as a name/value pair (and works without JS for SSR). robonen's ToggleProps only extends PrimitiveProps and has no name/required props and renders no hidden input, so a robonen Toggle contributes nothing to form submission.
+- 🔶 (ssr) No useFormControl-style detection of an enclosing <form>. reka uses useFormControl(currentElement) (computed Boolean(unrefElement(el)?.closest('form'))) so the hidden input is only rendered when actually inside a form, with an SSR-safe default of true. robonen has neither the composable nor the behavior.
+
+**Minor gaps (4):**
+- ▫️ (features) ToggleGroup awareness is missing. reka's standalone Toggle injects the ToggleGroup root context (injectToggleGroupRootContext(null)) and suppresses its own hidden form input when nested in a ToggleGroup (so the group owns the form value). robonen's Toggle has no injection of toggle-group context; a robonen Toggle placed inside a ToggleGroup would have no shared awareness (robonen's ToggleGroupItem is a separate component that does not reuse Toggle, confirmed by ToggleGroupItem.vue importing useToggleGroupContext directly).
+- ▫️ (api-surface) Slot scope exposes fewer props. reka's default slot exposes { modelValue, pressed, state ('on'|'off'), disabled }, letting consumers render based on disabled/state without recomputing. robonen's slot only exposes { pressed } — no disabled, no data-state string.
+- ▫️ (types) No exported emits type / explicit update event type. reka exports ToggleEmits ({ 'update:modelValue': [value: boolean] }) and a DataState type for consumers. robonen relies on defineModel('pressed') so the emit is 'update:pressed' (different name from reka's 'update:modelValue') and exports no emits/state type from index.ts (only ToggleProps).
+- ▫️ (types) modelValue typing allows null in reka (modelValue?: boolean | null) accommodating cleared/indeterminate-ish external state; robonen's model is strictly boolean | undefined.
+
+**Recommendations to make robonen strictly better:**
+- Add form integration to match reka: extend ToggleProps with FormFieldProps (name?: string; required?: boolean), add a useFormControl composable (computed Boolean(currentElement.closest('form')) with SSR default true) to @robonen/vue or src/utils, and build a VisuallyHiddenInput (hidden <input type='checkbox' :name :value=pressed :required>) bubble component. Render it in Toggle when isFormControl && name && no enclosing toggle-group, mirroring reka's `v-if="isFormControl && name && !toggleGroupContext"`. Use currentElement from the existing useForwardExpose return (already available).
+- Make standalone Toggle aware of the toggle-group context: inject the toggle-group context (with a null default) and suppress the hidden form input when nested, so the group can own the submitted value.
+- Enrich the default slot scope to expose { pressed, disabled, state: 'on'|'off' } (and optionally modelValue alias) so consumers can style/branch without recomputation. Export a DataState ('on'|'off') type.
+- Export an emits type from index.ts. Decide on v-model naming: reka uses 'modelValue'/'update:modelValue'. If cross-compat with reka matters, consider supporting/standardizing the model name; at minimum export ToggleEmits for the chosen 'update:pressed' event.
+- Consider widening the model type to boolean | null to tolerate externally-cleared controlled values like reka, or document the stricter boolean contract intentionally.
+- Add an aria-label/labeling note or test in docs since a toggle button needs an accessible name (reka's tests mount with aria-label='Toggle italic' and run axe); add a vitest-axe accessibility assertion to robonen's Toggle test to guard a11y regressions.
+
+**Where robonen is already better:**
+- ✅ Non-button host support is materially better. For as!='button', robonen synthesizes keyboard activation (onKeydown handles ' ' and 'Enter' with event.preventDefault + toggle), sets tabindex (0 enabled / -1 disabled), and sets aria-disabled. reka's Toggle.vue has NO @keydown handler, NO tabindex, and NO aria-disabled at all (grep confirms none present) — so a reka Toggle rendered as a non-button (as='div' / asChild on a div) is keyboard-inoperable and not properly exposed to AT. robonen explicitly skips synthesizing keys for native button (if (as === 'button') return) to avoid double-activation, which is correct.
+- ✅ Disabled is enforced in logic, not just via the native attribute. robonen's toggle() does `if (disabled) return` before flipping state, so a disabled non-button host (as='div', which has no native :disabled effect) still cannot be toggled by click or key. reka binds @click="togglePressed" unconditionally and relies solely on the native :disabled attribute; for as='div' the disabled attribute is inert, so a disabled reka Toggle rendered as a div WOULD still toggle on click. robonen closes this edge case (covered by its test 'does not toggle on keyboard when disabled (as=div)').
+- ✅ Controlled/uncontrolled handled with the native Vue 3 defineModel('pressed') API + a local ref fallback (get: v => v ?? localPressed.value). This is lighter than reka's dependency on @vueuse/core useVModel and avoids the passive-cast hack `(props.modelValue === undefined) as false`.
+- ✅ Slot prop naming uses `pressed` which matches the ARIA semantics of a toggle button (aria-pressed) and is concise.
+- ✅ Toggle button only emits the toggle on actual state change path and keeps the click/keydown separation explicit and readable.
+
+
+### focus-scope  —  _robonen-better-with-gaps_
+
+
+robonen's focus-scope is architecturally cleaner than reka's and matches its full public API (props loop/trapped, emits mountAutoFocus/unmountAutoFocus, Tab/Shift+Tab loop+trap keyboard handling, autofocus-on-mount, focus-return-on-unmount, focusin/focusout trap, MutationObserver re-focus, nested pause/resume stack, as/as=template passthrough, tabindex=-1, preventDefault on both autofocus events). It is genuinely better in three concrete ways: it avoids reka's array-mutating candidates.reverse() via a dedicated findLastVisible; it correctly removes the mount-autofocus listener (reka leaks it by passing a fresh arrow to removeEventListener); and it factors logic into reusable, independently-tested platform utilities with a stronger useForwardExpose. However, three real behavioral gaps keep it from being strictly better. (1) MAJOR: useFocusTrap's handleMutations lacks reka's two guards (null lastFocusedElement and anyNodesRemoved), so robonen steals focus to the container on pure node additions or before anything is focused (el.contains(null) is false). (2) MAJOR: unmount focus restore + stack.remove run synchronously in robonen vs reka's setTimeout(0) deferral, allowing focus to land on the wrong element during rapid nested scope unmount/mount. (3) MINOR: no explicit isClient SSR guard, and the stack is a bare module-level array rather than a true global singleton, so it can fork across duplicated module copies. There are no sub-component or part differences — FocusScope is a single component in both libraries; focus guards/hideOthers are Dialog-level concerns in both. Fixing the three gaps (notably the two MAJOR ones) makes robonen strictly better.
+
+
+**Major gaps:**
+- 🔶 (edge-cases) Unmount focus restore is synchronous in robonen vs reka's deferred setTimeout(0), risking focus landing on the wrong element during rapid nested scope unmount/remount.
+- 🔶 (edge-cases) useFocusTrap handleMutations lacks reka's null-lastFocusedElement and anyNodesRemoved guards, so it steals focus to the container on pure node additions or before any element is focused (el.contains(null)===false triggers focus(el)).
+
+**Minor gaps (2):**
+- ▫️ (ssr) No explicit isClient/SSR guard on the trap effect; relies solely on watchPostEffect not flushing server-side.
+- ▫️ (code-quality) Focus-scopes stack is a bare module-level array rather than a global singleton (reka uses createGlobalState), so it can fork across duplicated module copies and break nested pause/resume.
+
+**Recommendations to make robonen strictly better:**
+- Add reka's two guards to useFocusTrap handleMutations: pass MutationRecord[], return early if lastFocusedElement.value is null, and only refocus when a node was actually removed (mutations.some(m => m.removedNodes.length > 0)).
+- Defer unmount focus restore + stack.remove to setTimeout(0) in useAutoFocus onCleanup to match reka and avoid focus races during nested scope unmount/mount.
+- Add explicit client guards to useFocusTrap/useAutoFocus effects for SSR robustness instead of relying only on watchPostEffect timing.
+- Make the focus-scopes stack a true global singleton (createGlobalState or globalThis symbol) so nested pause/resume survives module duplication; optionally make it a ref for parity.
+- Add tests: trap must not steal focus on node additions, must not refocus before anything is focused, and rapid nested mount/unmount must restore to the correct previouslyFocusedElement.
+
+**Where robonen is already better:**
+- ✅ robonen avoids reka's in-place candidates.reverse() array mutation in getTabbableEdges by using a dedicated backward-iterating findLastVisible.
+- ✅ robonen correctly removes the AUTOFOCUS_ON_MOUNT listener (same handler reference in dispatchCancelableEvent); reka leaks it by calling removeEventListener with a new arrow function.
+- ✅ robonen decomposes into reusable useFocusTrap/useAutoFocus composables + an independently unit-tested @robonen/platform/browsers focus toolkit, vs reka inlining everything in the SFC.
+- ✅ robonen's useForwardExpose skips #text/#comment nodes and forwards the child's exposed API + $el, more robust for as='template' passthrough than reka's simpler version.
+
+
+### progress  —  _robonen-better-with-gaps_
+
+
+Both libraries implement Progress as a two-part Root + Indicator primitive with role=progressbar, aria-valuemin/max/now, data-state (indeterminate|loading|complete), and data-value/data-max — there is a direct reka analogue and subcomponent parity (no extra parts on either side; Progress has no keyboard/focus/RTL/form concerns). robonen is genuinely better in several places: a more correct `complete` state (`v >= max` vs reka's strict `===`), a richer slot scope on BOTH Root and Indicator (reka's Indicator exposes nothing and its Root only `modelValue`), lighter reactivity (toRef passthroughs vs reka's two useVModels + two immediate watchers), and cleaner non-optional context types. However robonen has real gaps to close to be strictly better: (1) ACCESSIBILITY — robonen exposes only one label function feeding `aria-valuetext` and never sets `aria-label`, while reka has BOTH `getValueLabel`->aria-label and `getValueText`->aria-valuetext, so reka's progressbar gets a proper accessible name and robonen's does not (major); (2) EDGE CASES — reka validates and self-corrects bad `value`/`max` (NaN, out-of-range, max<=0) with descriptive dev errors, while robonen passes everything through unguarded (max=0 yields Infinity% / aria-valuemax=0) (major); (3) reka guards `aria-valuenow` with an isNumber typeguard whereas robonen only filters null/undefined (minor); (4) reka supports passive/uncontrolled v-model and emits `update:modelValue`, while robonen's `modelValue` is a read-only passthrough that never emits, breaking the v-model naming contract (minor — though reka's emit type is itself buggy). Fixing the dual-label ARIA and adding input validation are the two changes required for robonen to be strictly better.
+
+
+**Major gaps:**
+- 🔶 (accessibility) reka exposes a SECOND accessible-label function and a distinct ARIA attribute. reka has both `getValueLabel` -> `aria-label` AND `getValueText` -> `aria-valuetext` (ProgressRoot.vue:23-27, 150-151). robonen has only `getValueLabel`, and it feeds `aria-valuetext` (ProgressRoot.vue:11,57). So robonen renders NO `aria-label` on the progressbar and gives consumers no way to set the accessible name of the widget separately from the value text. The default reka label `"50%"` becomes the accessible NAME of the progressbar; robonen's becomes only valuetext, leaving the widget effectively unnamed for screen readers unless the consumer supplies their own aria-label/aria-labelledby.
+- 🔶 (edge-cases) reka validates and self-corrects bad inputs at runtime with developer-facing errors. `validateValue` rejects NaN / out-of-range / negative values and coerces to null with a descriptive `console.error` (ProgressRoot.vue:45-60, watched at :105-115), and `validateMax` rejects non-positive/NaN max and falls back to 100 with an error (ProgressRoot.vue:62-72, watched at :117-125). robonen does NO validation: a negative value, NaN, max<=0, or value>max are passed straight through to aria attributes and `getValueLabel` (which divides by max). With max=0 robonen's default label computes `value/0` -> `Infinity%` and aria-valuemax=0; with NaN it emits `aria-valuenow` of NaN. robonen has no dev warnings for misuse.
+
+**Minor gaps (2):**
+- ▫️ (api-surface) reka supports controlled + uncontrolled (passive v-model) operation and emits `update:modelValue`. reka uses `useVModel(props,'modelValue',emit,{passive: props.modelValue===undefined})` (ProgressRoot.vue:96-98) and declares the emit (ProgressRoot.vue:8). robonen's `modelValue` is read-only (toRef passthrough, ProgressRoot.vue:31) with NO emit declared, so although the prop is named `modelValue` it cannot be used as a true two-way `v-model` and never fires `update:modelValue`. A progress bar is typically write-from-parent so this is low impact, but it is a missing API surface vs reka and breaks the `v-model` naming contract.
+- ▫️ (accessibility) reka guards `aria-valuenow` against non-number values via an `isNumber` typeguard: `:aria-valuenow="isNumber(modelValue) ? modelValue : undefined"` (ProgressRoot.vue:43,149). robonen uses `value ?? undefined` (ProgressRoot.vue:57), which only filters null/undefined — if a consumer passes `NaN` or a numeric string, robonen will emit an invalid `aria-valuenow`. (reka also still emits it but additionally validates/corrects upstream.)
+
+**Recommendations to make robonen strictly better:**
+- Add a second accessible-name pathway: introduce a `getValueLabel` -> `aria-label` mapping AND keep a separate `getValueText` -> `aria-valuetext`, matching reka. Concretely, rename robonen's current `getValueLabel` to `getValueText` (it currently feeds aria-valuetext), and add a new `getValueLabel?: (value, max) => string | undefined` bound to `:aria-label`, so the progressbar has a real accessible name for screen readers and consumers can customize both independently.
+- Add runtime validation + dev warnings mirroring reka's `validateValue`/`validateMax`: clamp/guard against NaN, value<0, value>max, and max<=0 (the last is critical because the default `getValueLabel` divides by `max` -> produces `Infinity%`/division issues, and `aria-valuemax=0` is invalid). Emit `console.error`/`@robonen/vue` warn in dev (tree-shaken in prod).
+- Harden `aria-valuenow` to only render for finite numbers: change `:aria-valuenow="value ?? undefined"` to use an `isNumber`/`Number.isFinite` guard so NaN or non-numeric inputs do not produce invalid ARIA. Apply the same finite-number guard inside the default `getValueText` so the percentage is only computed for valid numbers.
+- Decide and document the v-model story: either (a) declare `defineEmits<{ 'update:modelValue': [number | null] }>()` and make `modelValue` a true two-way model via `defineModel`/useVModel so the `modelValue` name is honest, or (b) rename the prop to `value` to signal it is one-way and avoid the broken v-model contract. Note reka's own emit type is buggy (`string[]`), so robonen can leapfrog by typing it correctly as `[number | null]`.
+- Consider passing the `getValueText`/`getValueLabel` strings into the slot scope as well (e.g. `:valueText`) so consumers rendering custom labels inside the bar do not have to recompute the percentage; this would extend robonen's already-superior slot scope.
+- Keep robonen's superior `v >= max` complete logic and richer slot scope — do not regress to reka's strict-equality `complete` check.
+
+**Where robonen is already better:**
+- ✅ robonen's `complete` state is more robust: it uses `v >= max` (ProgressRoot.vue:38) so a value that overshoots the max (e.g. 105/100) still reports `complete`. reka uses strict equality `modelValue.value === max.value` (ProgressRoot.vue:131), so an overshoot value would incorrectly report `loading` and never reach `complete`.
+- ✅ robonen passes a richer default slot scope: `{ value, max, state }` on both Root (ProgressRoot.vue:63) and Indicator (ProgressIndicator.vue:27). reka's Root slot exposes only `{ modelValue }` (ProgressRoot.vue:157-159) and its Indicator slot exposes nothing at all (ProgressIndicator.vue:25), so reka consumers must call `injectProgressRootContext()` to render the value/state inside the indicator.
+- ✅ robonen avoids reka's known double-vmodel hazard. reka wraps `max` in a second `useVModel` with a synthetically-typed `passive` flag and emits `update:max` (ProgressRoot.vue:100-102, 6-11), but the emit is typed wrongly: `'update:modelValue': [value: string[] | undefined]` declares a string[] payload for a numeric model (ProgressRoot.vue:8) — a real type bug. robonen sidesteps this entirely with read-only `toRef` passthroughs (ProgressRoot.vue:31-32).
+- ✅ robonen uses `toRef(() => ...)` identity passthroughs for value/max instead of `computed`, intentionally avoiding the effect/cache overhead of a computed for a pure passthrough (ProgressRoot.vue:30-32). reka runs two `useVModel` instances plus two `immediate` watchers (ProgressRoot.vue:96-125) for the same data, which is heavier.
+- ✅ robonen's context typing is cleaner and explicit (`value: Ref<number | null>`, `max: Ref<number>`, `state: Ref<ProgressState>` in context.ts:6-10), whereas reka's context marks `modelValue` optional/possibly-undefined (`modelValue?: Readonly<Ref<...>>`, ProgressRoot.vue:33) forcing optional-chaining at every use site (`rootContext.modelValue?.value`, ProgressIndicator.vue:23).
+
+
+### command  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** ItemIndicator (ComboboxItemIndicator / ListboxItemIndicator), Cancel/clear (ComboboxCancel), Trigger (ComboboxTrigger, aria-haspopup), Anchor (ComboboxAnchor), Arrow (ComboboxArrow), Portal (ComboboxPortal), Content + ContentImpl (Popper positioning, DismissableLayer, FocusScope, body-scroll-lock, hideWhenEmpty, position inline|popper), Viewport (scrollbar hiding + nonce-able style), Virtualizer (ComboboxVirtualizer / ListboxVirtualizer), GroupLabel as a dedicated part (ListboxGroupLabel / ComboboxLabel)
+**Parts robonen has that reka lacks:** CommandLoading (role=progressbar with progress), Built-in result-count live region inside CommandRoot, Built-in --list-height ResizeObserver in CommandList (cmdk-style auto height)
+
+robonen's `command` is a deliberate cmdk-style flat command palette and has no 1:1 reka equivalent; judged against reka's Combobox/Listbox it is genuinely better on the palette-specific axes it was built for: scoring + fuzzy + keyword filtering with ranked ordering, automatic best-result highlighting on every keystroke, a ResizeObserver-driven --list-height for smooth animated height, a built-in result-count live region, a role=progressbar Loading part, and a lean SSR-safe virtual-focus model that avoids reka's focus-shuffling. The most important real gap is an a11y-semantics bug: CommandItem applies aria-selected to the keyboard-highlighted option rather than to the committed modelValue, so screen readers mis-announce selection — reka separates aria-selected (checked) from data-highlighted correctly. Beyond that, command lacks several reka capabilities (PageUp/PageDown, IME/composition guarding on Enter, RTL/dir awareness, ItemIndicator, a clear/Cancel part, multiple-select, form integration, object values with a `by` comparator, a textValue distinct from the identity value, and virtualization), and getSelectableItems() re-queries the DOM on every keypress. Fixing the aria-selected semantics and adding PageUp/PageDown + composition guarding closes the only consequential a11y/keyboard gaps; the remaining items are feature-completeness niceties. Verdict: robonen-better-with-gaps.
+
+
+**Major gaps:**
+- 🔶 (accessibility) aria-selected is wired to the HIGHLIGHT, not the committed selection. CommandItem.vue sets :aria-selected="isHighlighted || undefined" (where isHighlighted = ctx.selectedValue === value, i.e. the roving active item), while the actual chosen value (isSelected = ctx.modelValue === value) is exposed only as a non-semantic :data-selected attribute. In an ARIA listbox, aria-selected must reflect selection state; the active option is conveyed via the input's aria-activedescendant. Conflating them means a screen reader announces every keyboard-highlighted option as 'selected' and never announces the truly committed item.
+
+**Minor gaps (12):**
+- ▫️ (features) No ItemIndicator part to render/announce which option is the committed selection. A palette that supports a persistent modelValue should be able to show a check on the selected row.
+- ▫️ (keyboard) No PageUp / PageDown keyboard support. A long command list cannot be paged, and PageUp/PageDown do not jump to first/last.
+- ▫️ (rtl-i18n) No RTL / dir awareness anywhere in the command tree. There is no dir prop, no useDirection, and no direction-aware key handling.
+- ▫️ (edge-cases) No IME / composition guarding. Pressing Enter while composing (e.g. CJK input) will commit the highlighted item instead of confirming the IME candidate.
+- ▫️ (features) No multiple-selection support. The palette can only ever commit a single string modelValue.
+- ▫️ (forms) No form integration (hidden input / name / required). The committed value cannot participate in native form submission.
+- ▫️ (types) Item value is constrained to string; cannot use object values with a custom equality comparator.
+- ▫️ (features) Filtering matches the item's `value` (also the data-value/key) rather than a separate display/text value, so the searchable text is coupled to the identity key.
+- ▫️ (performance) No virtualization option for very large command lists.
+- ▫️ (performance) getSelectableItems() performs a live DOM querySelectorAll on every call (every arrow keypress, every commit, and inside the auto-highlight watch).
+- ▫️ (features) selectedValue (highlight) is not exposed on the input for assistive recovery when the input is blurred, and there is no Cancel/clear affordance.
+- ▫️ (accessibility) Root uses role=application, which is a heavyweight ARIA role that tells screen readers to suppress their normal browse-mode/quick-nav handling for the entire subtree.
+
+**Recommendations to make robonen strictly better:**
+- Fix the core a11y semantics in CommandItem.vue: set :aria-selected from isSelected (committed modelValue match) instead of isHighlighted, and convey the highlighted/active option solely through the input's aria-activedescendant (already present) plus a data-highlighted attribute. This matches reka ListboxItem and the ARIA combobox/listbox pattern.
+- Add PageUp/PageDown handling to CommandInput.vue handleKeyDown (PageUp -> moveTo('first') or page jump, PageDown -> moveTo('last') or page jump) to match reka's MAP_KEY_TO_FOCUS_INTENT.
+- Guard Enter against IME composition: in handleKeyDown skip commit when event.isComposing (or wire compositionstart/compositionend), mirroring reka's isComposing check in ListboxRoot.onKeydownEnter.
+- Add a CommandItemIndicator sub-component (v-if on isSelected, aria-hidden=true) so consumers can render a check on the committed row, matching reka ComboboxItemIndicator.
+- Add a separate `textValue` prop on CommandItem so filtering can target display text while `value` stays an opaque identity key; pass textValue (falling back to rendered text) into the filter haystack instead of conflating with value.
+- Add an optional CommandCancel/clear part that resets searchTerm (and optionally modelValue) and refocuses the input, matching reka ComboboxCancel including a resetModelValueOnClear-style option.
+- Cache DOM order for getSelectableItems(): build the value->domIndex map once via MutationObserver (the list already has one in CommandList.vue) instead of running querySelectorAll on every keypress and inside the auto-highlight watch.
+- Add a `dir` prop (and propagate via useDirection / a dir attribute) for RTL correctness and future horizontal/orientation support, even if current navigation is vertical-only.
+- Reconsider role=application on CommandRoot; evaluate dropping it (or making it opt-out) to avoid suppressing screen-reader browse mode across the palette subtree.
+- Consider optional multiple-select support (modelValue as array + selectionBehavior) and native form integration (name/required + VisuallyHiddenInput) to reach feature parity with reka Listbox for cases where a palette doubles as a picker.
+- Optionally offer a virtualization adapter for very large command lists, analogous to reka's ListboxVirtualizer/ComboboxVirtualizer, since getSelectableItems currently scales linearly with DOM size.
+
+**Where robonen is already better:**
+- ✅ Scoring filter with fuzzy subsequence matching and per-item keywords: defaultFilter (command/utils.ts) returns 1 for substring/keyword match, 0.5 for in-order subsequence (loose fuzzy), 0 to hide, and getSelectableItems() in CommandRoot.vue sorts candidates by score desc then DOM order. reka's useFilter.contains (shared/useFilter.ts) is a binary Intl.Collator substring check with no fuzzy match, no scoring, and no keyword/alias support — so reka cannot rank results or match on hidden aliases.
+- ✅ Auto-highlight of the best result: CommandRoot.vue has a flush:'post' watch on [searchTerm, filteredItems, allItems] that keeps the highlight on the current item if still visible, otherwise highlights getSelectableItems()[0]. This is exactly the cmdk palette behavior. reka only calls highlightFirstItem() in ComboboxInput.vue when the previous filter count was 0, so a typed query that narrows from many->fewer results does not re-anchor the highlight to the top result.
+- ✅ List auto-height CSS variable: CommandList.vue uses a ResizeObserver + MutationObserver to publish --primitives-command-list-height tracking the first child's offsetHeight, enabling the smooth animated-height palette effect from cmdk. reka has no equivalent; ComboboxViewport.vue only sets overflow:auto and hides scrollbars.
+- ✅ Live-region result-count announcement: CommandRoot.vue renders a VisuallyHidden role=status aria-live=polite node with announceCount ('N results available.'). reka Combobox/Listbox have no built-in SR announcement of how many results remain after filtering.
+- ✅ Dedicated CommandLoading part with role=progressbar, aria-valuetext/valuenow/valuemin/valuemax and aria-live=polite (CommandLoading.vue) for async command palettes. reka has no Loading/progress part in Combobox or Listbox.
+- ✅ Simpler, dependency-light virtual-focus model: input keeps real DOM focus and drives aria-activedescendant (CommandInput.vue activeDescendant + aria-activedescendant), avoiding reka's heavier focus-shuffling (ListboxFilter sets rootContext.focusable=false on mount and restores on unmount; ListboxRoot juggles changeHighlight focus()/scrollIntoView). robonen's approach is less stateful and avoids focus-trap machinery for a flat palette.
+
+
+### popper  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** shared Arrow.vue component (renders default SVG arrow path, supports rounded)
+
+Popper is a pure positioning primitive (no ARIA roles, keyboard, focus trap, forms, RTL/loop logic — those live in consumers like Menu/Select/Tooltip), so the comparison centers on sub-parts, arrow rendering, exported API surface, types, and performance. The two implementations are structurally near-identical (same 4 parts: Root, Anchor, Content, Arrow; same floating-ui middleware pipeline; identical prop set on Content including side/align flip, collision, sticky, hideWhenDetached, positionStrategy, prioritizePosition, reference override; same data-side/data-align/--popper-* CSS vars; same 'placed' emit). robonen is genuinely better on micro-performance and code quality: hoisted lookup maps, stable style hidden-class, a more robust arrow ResizeObserver, useTemplateRef/shallowRef, and reactive-props-destructure. The one real, user-visible gap is the Arrow: reka's PopperArrow renders an actual default SVG arrow (with a `rounded` variant) via a shared Arrow.vue, while robonen's PopperArrow defaults to an empty `span` that draws nothing unless the consumer supplies their own SVG. Remaining reka advantages are exported helpers robonen lacks: PopperContentPropsDefaultValue, the Measurable interface, and SIDE_OPTIONS/ALIGN_OPTIONS runtime arrays, plus minor reactivity (computedEager) and `update` exposure. None are critical, but fixing the Arrow default and adding the exported helpers/types would make robonen strictly better than reka for this primitive.
+
+
+**Major gaps:**
+- 🔶 (features) reka's PopperArrow renders a real, visible SVG arrow by default. It delegates to a shared Arrow.vue whose default `as: 'svg'` outputs `<svg viewBox="0 0 12 6" preserveAspectRatio="none">` containing a default `<path d="M0 0L6 6L12 0"/>`. robonen's PopperArrow defaults to `as = 'span'` and renders an EMPTY Primitive with no SVG, no viewBox, and no path, so out of the box robonen's arrow draws nothing visible and the consumer must supply their own SVG via the slot.
+
+**Minor gaps (6):**
+- ▫️ (api-surface) reka exposes a `rounded` prop on PopperArrow (via ArrowProps) that switches to an alternate rounded SVG path (d="M0 0L4.58579 4.58579C5.36683..."). robonen's PopperArrowProps has only `width` and `height` and no `rounded` option.
+- ▫️ (api-surface) reka exports `PopperContentPropsDefaultValue` (the canonical defaults object) from PopperContent.vue and re-exports it from index.ts, so downstream primitives (Tooltip/Popover/Select etc.) can spread it into their own withDefaults. robonen inlines its defaults via destructuring in PopperContent.vue and does not export any shared defaults object, forcing each consumer to re-declare defaults.
+- ▫️ (types) reka exports a `Measurable` interface ({ getBoundingClientRect: () => DOMRect }) from PopperRoot.vue for typing virtual/anchor reference elements. robonen has no exported Measurable type; consumers passing a virtual reference must rely solely on floating-ui's ReferenceElement.
+- ▫️ (api-surface) reka exports the runtime arrays SIDE_OPTIONS (['top','right','bottom','left']) and ALIGN_OPTIONS (['start','center','end']) via `export * from './utils'`, useful for runtime prop validation, iteration, and Storybook controls. robonen's utils.ts only declares the Side/Align type unions with no runtime array equivalents.
+- ▫️ (performance) reka builds the middleware array with computedEager (from @vueuse/core), so the middleware list recomputes eagerly/synchronously when any dependency changes rather than lazily on first read. robonen uses a plain `computed`, which is lazy — it only recomputes when floating-ui reads `.value`, which can defer a middleware update by a microtask/tick in edge cases (e.g. arrow size change feeding offset.mainAxis).
+- ▫️ (api-surface) reka destructures `update` from useFloating, making the imperative reposition function available for potential exposure/use; robonen does not destructure or expose `update`, so there is no imperative way to force a reposition.
+
+**Recommendations to make robonen strictly better:**
+- Give PopperArrow a real default SVG arrow to reach visual parity: create a shared Arrow component (or inline default slot content) that defaults to `as = 'svg'` with `viewBox="0 0 12 6"`, `preserveAspectRatio="none"`, and a default `<path d="M0 0L6 6L12 0"/>`. Currently robonen renders an empty span so the arrow is invisible without a user-supplied SVG.
+- Add a `rounded?: boolean` prop to PopperArrowProps that swaps in the rounded path (d="M0 0L4.58579 4.58579C5.36683 5.36683 6.63316 5.36684 7.41421 4.58579L12 0") to match reka's Arrow feature set.
+- Export a shared defaults object (e.g. POPPER_CONTENT_DEFAULTS) equivalent to reka's PopperContentPropsDefaultValue, and re-export it from index.ts so downstream primitives (Tooltip/Popover/Select/Menu) can reuse canonical defaults instead of redeclaring them.
+- Export a `Measurable` interface ({ getBoundingClientRect: () => DOMRect }) from context.ts/index.ts for typing virtual reference elements passed to PopperAnchor.reference / PopperContent.reference.
+- Add runtime `SIDE_OPTIONS` and `ALIGN_OPTIONS` const arrays in utils.ts (with Side/Align derived from them via typeof[number]) and export them for prop validation, iteration, and story controls.
+- Switch computedMiddleware from `computed` to an eager computation (computedEager from @vueuse/core or a watchSyncEffect-driven shallowRef) so middleware updates synchronously when arrow size or options change, matching reka's eager behavior.
+- Consider destructuring and exposing `update` (and optionally `isPositioned`) from useFloating so consumers can imperatively force a reposition, e.g. on async content size changes.
+
+**Where robonen is already better:**
+- ✅ PopperArrow lookup maps hoisted to module scope (one allocation) vs reka allocating inline objects per render
+- ✅ PopperContent style object keeps stable V8 hidden class by always writing visibility/pointerEvents keys vs reka's shape-changing conditional spread
+- ✅ More robust arrow ResizeObserver that re-observes on element change and disconnects on unmount, vs reka useSize observing only once in onMounted
+- ✅ Uses useTemplateRef and shallowRef (modern Vue 3.5 reactivity) for floatingRef and contentZIndex
+- ✅ Reactive props destructure with inline defaults for cleaner code without withDefaults boilerplate
+- ✅ Exports both root and content context injectors plus their interface types, vs reka exporting only the root inject
+
+
+### label  —  _robonen-better-with-gaps_
+
+
+The Label primitive itself is essentially identical between the two libraries: both render a native `<label>` via Primitive with an `as` default of 'label', forward a `for` prop, and add a mousedown handler that prevents text selection on double-click (`detail > 1`). There are no extra sub-components on either side and no roving-tabindex/keyboard/focus-trap concerns for this primitive. The real differences live in the shared Primitive/PrimitiveProps layer that Label inherits. reka's Label is better in one meaningful way: it inherits and forwards a documented `asChild` composition prop (via `v-bind=\"props\"`), whereas robonen's Primitive has no `asChild` (composition only via `as=\"template\"`) and robonen's Label hard-codes `:as`/`:for`, so it would silently drop `asChild` and any future PrimitiveProps. reka also has stronger documentation/test surface (axe a11y test, negative focus edge-case tests, a story). robonen is better on small code-quality and micro-perf points (named handler, batched property descriptors in useForwardExpose, shallowRef, explicit two-directional mousedown tests) but has a dead `forwardRef` destructure. Verdict: robonen-better-with-gaps — robonen is marginally cleaner at the component level but is NOT strictly better because it lacks `asChild`/full prop forwarding and the a11y/edge-case test coverage reka provides.
+
+
+**Major gaps:**
+- 🔶 (api-surface) reka's Label inherits a documented `asChild` boolean prop from PrimitiveProps, enabling the standard composition pattern `<Label as-child><span>...</span></Label>` to merge label behavior (mousedown handler, `for`) onto a custom child element. robonen's Label has no `asChild`: robonen's PrimitiveProps only declares `as` (primitive/Primitive.ts:7-9), and composition is only possible via `as="template"`, which is undocumented on Label and is a different mental model than the rest of the headless ecosystem. A consumer who writes `<Label as-child>` against robonen gets a silently-ignored attribute. Note robonen's own MenubarRoot already binds `:as-child` (MenubarRoot.vue:93) against a Primitive that has no such prop, showing the API is inconsistent/incomplete repo-wide.
+
+**Minor gaps (4):**
+- ▫️ (api-surface) reka's Label forwards ALL props to Primitive via `v-bind="props"` (Label.vue:23), so any future PrimitiveProps additions (asChild today, anything later) propagate automatically. robonen's Label hard-codes `:as` and `:for` only (Label.vue:25), so it will silently drop any new PrimitiveProps member (e.g. asChild) without a code change. This makes robonen's Label brittle against Primitive API growth.
+- ▫️ (accessibility) reka ships an explicit accessibility test using `vitest-axe` that renders Label+input together and asserts `toHaveNoViolations()` (Label.test.ts:12-25). robonen's Label test file has no axe/a11y assertion. While the rendered markup is equivalent, robonen lacks an automated a11y regression guard for this primitive.
+- ▫️ (edge-cases) reka's Label test explicitly covers two negative focus edge cases: clicking a label with no `for`, and clicking a label whose `for` points to a non-existent id, asserting the input does NOT receive focus (Label.test.ts:50-77). robonen has no equivalent edge-case coverage for label/control association behavior.
+- ▫️ (code-quality) reka provides a Histoire story (Label.story.vue) demonstrating the documented Label+input pairing and styling, serving as live docs/usage reference. robonen's label/ directory has no story file (only Label.vue, index.ts, __test__). Lower discoverability/documentation surface.
+
+**Recommendations to make robonen strictly better:**
+- Add `asChild` support so robonen's Label matches the standard headless composition API. Easiest path: add `asChild?: boolean` to `PrimitiveProps` (primitive/Primitive.ts) and have Primitive map `asChild ? 'template' : as` internally (mirroring reka Primitive.ts:56); then in Label bind `v-bind="props"` (or forward `:as-child="asChild"`). This also fixes the existing repo inconsistency where MenubarRoot.vue:93 already binds `:as-child` to a Primitive that ignores it.
+- Change robonen Label to forward all props with `v-bind="props"` (and keep `@mousedown`) instead of hard-coding `:as`/`:for`, so future PrimitiveProps additions propagate automatically and don't get silently dropped.
+- Remove the dead `const { forwardRef } = useForwardExpose();` destructure in Label.vue:14 OR actually bind `:ref="forwardRef"` on the Primitive. Currently `forwardRef` is destructured but never used (the template has no `:ref`), so it is dead code; either wire it up to expose the underlying `<label>` element to consumers (better, matches the intent of useForwardExpose) or call `useForwardExpose()` bare like reka does for the side effect only.
+- Add a `vitest-axe` accessibility assertion to robonen's Label.test.ts (render Label `for="input"` next to `<input id="input">` and assert no violations) to match reka's automated a11y guard.
+- Add negative focus edge-case tests mirroring reka Label.test.ts:50-77 (label with no `for`, and `for` pointing to a missing id should not move focus) to lock in correct label/control association behavior.
+- Add a story/demo file (Label.story.vue or the repo's docs equivalent) showing the canonical Label+input pairing, matching reka's documentation surface.
+
+**Where robonen is already better:**
+- ✅ JSDoc on the `for` prop is slightly richer: robonen documents it as `(renders as 'for')` (Label.vue:5), clarifying the rendered output; reka just says 'The id of the element the label is associated with.' (Label.vue:6). Minor but a documentation edge.
+- ✅ robonen extracts the mousedown handler into a named top-level function `onMouseDown(event)` (Label.vue:18-21) instead of reka's inline arrow in the template (Label.vue:24-27). This is marginally better for readability, avoids recreating the handler closure on every render, and is easier to unit test.
+- ✅ robonen's test suite directly asserts the mousedown behavior in both directions (`detail > 1` prevents default, `detail === 1` does not — Label.test.ts:18-32), giving stronger behavioral coverage of the double-click-selection guard than reka, whose tests focus on rendering/`for`/click-focus and axe.
+- ✅ robonen's underlying `useForwardExpose` is implemented more efficiently: it batches all property definitions via a single `Object.defineProperties(ret, descriptors)` call (index.ts:85) and uses `shallowRef` instead of reka's per-key `Object.defineProperty` loop and plain `ref` (reka useForwardExpose.ts:33-61). This is shared infra Label benefits from indirectly.
+
+
+### separator  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** shared/component/BaseSeparator.vue (shared base layer reused by other primitives)
+
+Both libraries implement Separator as a single leaf primitive with the same core semantics: orientation (horizontal/vertical, default horizontal), decorative (role='none' when true, else role='separator'), and aria-orientation only emitted when vertical, plus a data-orientation attribute. There are no sub-components, keyboard interaction, focus management, forms, RTL, or presence concerns for this primitive, so the comparison reduces to props, a11y wiring, validation, and ergonomics. robonen is genuinely better in ref/expose forwarding (useForwardExpose) and renders one layer less than reka (which interposes a reusable BaseSeparator). reka is better in three concrete ways: (1) it exposes a documented asChild composition prop that robonen lacks (robonen only has the undocumented as='template' escape hatch), (2) it runtime-validates orientation and falls back to horizontal, whereas robonen passes any value straight into data-orientation, and (3) it ships an automated axe a11y test plus uses a shared DataOrientation type and a reusable BaseSeparator. None of reka's advantages are critical, but the asChild gap is a real API-surface shortfall. Verdict: robonen-better-with-gaps — close the asChild, orientation-validation, shared-type, and axe-test gaps to make robonen strictly better.
+
+
+**Minor gaps (5):**
+- ▫️ (api-surface) Explicit documented asChild prop for composition
+- ▫️ (edge-cases) Runtime orientation validation with horizontal fallback
+- ▫️ (code-quality) Reusable shared BaseSeparator consumed by other primitives
+- ▫️ (accessibility) Automated axe a11y test for both orientations
+- ▫️ (types) Shared DataOrientation type alias instead of inlined union
+
+**Recommendations to make robonen strictly better:**
+- Add an explicit, documented `asChild?: boolean` prop. Either add asChild to robonen's PrimitiveProps and wire it through (mapping to as='template' internally) so consumers get a discoverable, documented composition API matching reka, or document the as='template' pattern prominently on Separator. This closes the biggest API-surface gap.
+- Add runtime orientation validation/fallback in Separator.vue: compute a validated orientation (`isValidOrientation(orientation) ? orientation : 'horizontal'`) and use it for both :data-orientation and the aria-orientation/role logic, so invalid orientation values cannot produce an invalid data-orientation token or a missing aria-orientation.
+- Introduce a shared DataOrientation type (e.g. in a central types module) and use it for SeparatorProps.orientation instead of inlining the literal union, to match reka's single-source-of-truth typing and stay consistent across other robonen primitives that have an orientation.
+- Add an automated accessibility assertion to the Separator test (vitest-axe toHaveNoViolations) for both horizontal and vertical orientations, mirroring reka's Separator.test.ts, to guard against a11y regressions.
+- Consider extracting a shared Base separator (or at least a composable computing the role/aria-orientation/data-orientation semantics) so future robonen primitives (toolbar, toggle-group, menu) that need internal separators reuse identical semantics instead of reimplementing them.
+- Keep robonen's useForwardExpose ref-forwarding advantage (do not drop it) and ensure any asChild implementation continues to forward the ref correctly when rendering via template/Slot.
+
+**Where robonen is already better:**
+- ✅ Forwards underlying $el and child exposed API via useForwardExpose + forwardRef (reka's Separator does not forward refs)
+- ✅ Single-layer render (Separator -> Primitive) vs reka's extra BaseSeparator layer
+- ✅ Modern Vue 3.5 reactive props destructure with defaults instead of withDefaults
+- ✅ Stronger literal-typed aria/role attributes via `as const` in the computed
+
+
+### pagination  —  _robonen-better-with-gaps_
+
+
+Both libraries ship the identical 8-part pagination (Root, List, ListItem, Ellipsis, First, Last, Prev, Next) with the same ARIA wiring (data-type, aria-label per control, aria-current='page' + data-selected on the active page, type='button' guarded by as==='button', native disabled), the same controlled+uncontrolled v-model:page support, the same scoped slots (Root: page/pageCount; List: items), and the same disabled-gating of clicks. Pagination is a click-driven (not roving-tabindex) widget, so there is no keyboard/focus-trap surface to differ on, and neither has RTL/loop/form-input/portal/positioning concerns. Robonen is genuinely better in a few places: it auto-clamps currentPage to [1, totalPages] via useClamp (reka leaves page stale when total shrinks), returns pre-transformed PaginationItem[] from getRange (reka re-runs transform() each render), gives pageSize a default, and sits on a richer useOffsetPagination composable. I verified the suspected currentPage/page desync is NOT a bug — ref(ref) is idempotent in Vue so they share one ref. The remaining gaps are all minor and DX-oriented: robonen makes `total` required (reka defaults it to 0 and tests the empty state), robonen has no per-prop JSDoc and no exported emits type (reka documents both), and reka's showEdges windowing algorithm is the well-tested zag implementation with a stronger test matrix than robonen's home-grown variant. No structural/a11y/keyboard gaps; verdict is robonen-better-with-gaps once the four minor items are addressed.
+
+
+**Minor gaps (4):**
+- ▫️ (api-surface) Reka's `total` prop is optional with a default of 0 (PaginationRoot.vue props line 27 + withDefaults `total: 0`), and the 0-total state is explicitly supported/tested (Pagination.test.ts 'given 0 total value': page 1 shown, all First/Prev/Next/Last disabled). Robonen makes `total: number` REQUIRED (PaginationRootProps line 6) — consumers must always pass it, and there is no defined/tested behavior for an empty collection (total 0 -> totalPages clamps to 1, but this path is not part of the documented API the way reka tests it).
+- ▫️ (types) Every reka prop carries JSDoc documentation that surfaces in editor IntelliSense (PaginationRoot.vue lines 16-33: page, defaultPage, itemsPerPage, total, siblingCount, disabled, showEdges, plus the PaginationRootEmits update:page doc). Robonen's PaginationRootProps (lines 4-11) and all sub-component prop interfaces have zero JSDoc, so consumers get no hover documentation for total/pageSize/siblingCount/showEdges/disabled/defaultPage.
+- ▫️ (api-surface) Reka explicitly exports a named emits type `PaginationRootEmits` ({ 'update:page': [value] }) from the package index (index.ts line 8), documenting and typing the event for consumers. Robonen relies on defineModel('page') (auto-generates update:page) but exports no named emits type, so there is no public, documented emit type to import.
+- ▫️ (edge-cases) Reka's showEdges range algorithm (utils.ts getRange lines 27-77) is the zag-derived implementation with three guard conditions per side (default + towards-end + towards-middle checks using itemCount and lastPageIndex math) and is validated by an extensive matrix of presence/absence tests (Pagination.test.ts 'given show-edges' asserting exact pages 2/3/4 present, 8 absent, exactly one ellipsis). Robonen's getRange (utils.ts) is a simpler home-grown variant; its own utils.test.ts only checks coarse invariants (first/last present, ellipsis count >= 1) and does not pin the exact windowing reka guarantees, leaving more risk of off-by-one edge windows for specific (currentPage,totalPages,siblingCount,showEdges) combinations.
+
+**Recommendations to make robonen strictly better:**
+- Make `total` optional with a default of 0 in PaginationRootProps (mirror reka) and add explicit tests for the empty-collection state (total: 0 -> page 1 displayed, First/Prev/Next/Last all disabled) so the zero-total path is a documented, guaranteed behavior.
+- Add JSDoc comments to every prop in PaginationRootProps (total, pageSize, siblingCount, showEdges, disabled, defaultPage, page) and to sub-component props (PaginationListItemProps.value, etc.) so consumers get hover documentation parity with reka.
+- Export a named emits type (e.g. `export type PaginationRootEmits = { 'update:page': [value: number] }`) from index.ts for documentation/typing parity, even though defineModel is used internally.
+- Harden getRange: port reka's three-condition zag windowing logic (or add an exhaustive snapshot/matrix test over combinations of currentPage x totalPages x siblingCount x showEdges) to guarantee exact window output and eliminate off-by-one risk in the showEdges branch.
+- Consider adding ARIA niceties neither library has but which would make robonen strictly better: an optional aria-label on the nav Root (e.g. 'pagination') and aria-disabled mirroring disabled on the <a>-rendered controls (when as='a', the native `disabled` attr is inert, so disabled <a> elements remain clickable/focusable — guard with aria-disabled and pointer/keyboard suppression).
+- Keep pageSize as the public prop name but optionally alias itemsPerPage for drop-in reka migration ergonomics; document the naming difference.
+
+**Where robonen is already better:**
+- ✅ Automatic page clamping: robonen derives currentPage = useClamp(page, 1, totalPages) (PaginationRoot.vue line 53-57 via @robonen/vue useOffsetPagination). If `total` shrinks below the current page, currentPage is automatically clamped into [1, totalPages]. Reka's PaginationRoot.onPageChange just does `page.value = value` with no clamping (PaginationRoot.vue line 80-82), so after `total` decreases reka can hold a stale page (e.g. page 10 when only 2 pages exist) until the consumer fixes it.
+- ✅ Verified bidirectional sync between the page v-model and the internal currentPage: ref(ref) is idempotent in Vue, so useClamp(page, ...) shares the same underlying ref; both controlled and uncontrolled modes stay consistent. (Confirmed empirically.)
+- ✅ Cleaner item pipeline: robonen's getRange returns fully-formed PaginationItem[] objects, so PaginationList passes them straight to the slot (PaginationList.vue line 26-31). Reka's getRange returns raw (number|'ellipsis')[] and PaginationList must call transform() every recompute (reka PaginationList.vue line 26-35) — an extra map pass on every render.
+- ✅ Richer underlying composable: robonen's useOffsetPagination exposes next/previous/select and onPageChange/onPageSizeChange/onTotalPagesChange callbacks and currentPageSize, giving a stronger reusable foundation than reka's inline `pageCount` computed.
+- ✅ PaginationItemType enum is exported (utils.ts line 1-4) giving consumers named constants ('page'/'ellipsis') instead of bare string literals as in reka.
+- ✅ pageSize has a sensible default of 10 (PaginationRoot.vue line 23). Reka's equivalent `itemsPerPage` is a required prop with no default.
+
+
+### teleport  —  _robonen-better-with-gaps_
+
+
+Both Teleport primitives are intentionally thin wrappers around Vue's built-in `<Teleport>`; neither has sub-components, ARIA/a11y wiring, keyboard handling, focus management, forms, or RTL concerns (none of which apply to a portal primitive). robonen is broadly equal-or-better on API surface: it adds a globally configurable default target via `useConfig().teleportTarget` (reka hardcodes `'body'`), exports `Portal`/`PortalProps` aliases, declares `inheritAttrs: false`, allows `to: null`, and defaults `forceMount` to true for animation-friendliness with documented SSR reasoning (`disabled || !isClient`). The only respects where reka is arguably better are SSR/mount-gating defensiveness: reka uses a reactive `useMounted()` ref and gates the whole render with `v-if=\"isMounted || forceMount\"`, whereas robonen uses a module-level `isClient` constant (non-reactive, evaluated at import time) and always renders the Teleport node when forceMount is true. Both are minor and not hard bugs, but adopting a reactive mounted hook would make robonen strictly better with no downside. Verdict: robonen-better-with-gaps.
+
+
+**Minor gaps (2):**
+- ▫️ (ssr) reka uses `useMounted()` (a per-instance reactive ref from @vueuse) to gate rendering, so the mounted state is genuinely reactive within the component lifecycle. robonen uses the module-level constant `isClient` from @robonen/platform/multi, which is evaluated once at import time and never becomes reactive. In practice this is fine because `isClient` cannot change, but it means robonen's `effectiveDisabled` does not re-evaluate on the client-mount tick the way reka's `v-if` does; if a target is only attached during the parent's onMounted, robonen cannot react to that transition the way reka's mounted-gated render can, and would need the user-facing `defer` prop instead.
+- ▫️ (ssr) When `forceMount` is true and disabled is false but the page is still in SSR, robonen always renders the `<Teleport>` node (`v-if="forceMount || !effectiveDisabled"`, default forceMount=true) relying solely on `:disabled` to keep it inline. reka's approach of not rendering the Teleport node at all until mounted (when forceMount is unset) more conservatively avoids any chance of Vue attempting target resolution during hydration. This is a defensiveness trade-off rather than a hard bug, but reka's default is the safer of the two for the common (non-forceMount) case.
+
+**Recommendations to make robonen strictly better:**
+- Replace the module-level `isClient` constant with a per-instance reactive mounted hook (e.g. `useMounted()` from VueUse or an internal `const mounted = ref(false); onMounted(() => mounted.value = true)`), then compute `effectiveDisabled = computed(() => disabled || !mounted.value)`. This matches reka's reactive mounted gating, lets the component react to the client-mount transition, and removes any reliance on import-time evaluation that can be brittle under bundler/SSR edge cases.
+- Add a unit/integration test asserting SSR-then-hydration produces no mismatch and that content moves from inline to the target on client mount, to lock in the hydration-safe behavior that currently only `isClient` provides implicitly.
+- Document the interaction between `forceMount: true` (default) and `disabled` explicitly in the prop JSDoc — clarify that with forceMount the Teleport node is always rendered and only `disabled` controls inline-vs-teleported, so users understand the difference from reka's mount-gated default.
+- Consider mirroring reka by NOT rendering the `<Teleport>` node at all when `forceMount` is false AND not yet mounted, for maximum hydration defensiveness in the non-animation case, while keeping forceMount=true as the animation-friendly default.
+- Optionally expose the underlying behavior consistency by adding a test that `to` reactively updates the target (changing `to` re-resolves the computed target) to guarantee parity with reka's direct `:to` binding.
+- Keep the `Portal`/`PortalProps` aliases and the configurable `teleportTarget` — these are real advantages over reka; ensure they are surfaced in docs as differentiators.
+
+**Where robonen is already better:**
+- ✅ Configurable default teleport target: robonen resolves the target via `to ?? config.teleportTarget.value` from `useConfig()` (config-provider/context.ts), so an app can globally redirect all portals (e.g. to a custom root) and override per-instance. reka hardcodes the default to `'body'` via `withDefaults(..., { to: 'body' })` with no global override mechanism.
+- ✅ Explicit, documented SSR/hydration handling: robonen computes `effectiveDisabled = disabled || !isClient` (Teleport.vue:52) and passes it as `:disabled`, so during SSR children render inline and there is no attempt to teleport to a not-yet-existing target. reka relies on `useMounted()` gating the whole `v-if`, which renders nothing on the server unless `forceMount` is set (potential content flash on hydration).
+- ✅ Ergonomic dual naming: robonen exports both `Teleport`/`TeleportPrimitiveProps` and `Portal`/`PortalProps` aliases (index.ts), matching the Radix/portal mental model. reka only exports `TeleportPrimitive`/`TeleportProps`.
+- ✅ `inheritAttrs: false` is explicitly declared (Teleport.vue:30-32), making the no-DOM-element nature of the wrapper explicit and avoiding any stray attribute fallthrough surprises. reka does not declare `inheritAttrs`.
+- ✅ `to` type explicitly permits `null` (`string | HTMLElement | null`) with documented fallback to the configured target, giving a clear 'use default' signal. reka's `to` is `string | HTMLElement` only.
+- ✅ forceMount defaults to `true` and is documented as an animation-aware escape hatch (keeps children mounted), which is the more useful default for primitives wrapped in Presence/Transition. reka leaves `forceMount` undefined (effectively false).
+
+
+### presence  —  _robonen-better-with-gaps_
+
+
+Both libraries implement Presence as a single-component primitive (no sub-parts) that defers unmount until exit animations finish, exposing the same API surface: a `present` prop, a `forceMount` prop, a `{ present }` scoped slot, and an exposed `present` ref. robonen is genuinely better in several respects: it supports CSS transitions (reka only handles CSS animations and will instantly unmount transition-only children), it factors the animation lifecycle into reusable, independently-tested @robonen/platform helpers (getAnimationName/isAnimatable/shouldSuspendUnmount/dispatchAnimationEvent/onAnimationSettle) with passive listeners, and its usePresence has a cleaner signature (MaybeRefOrGetter input, internally-owned node ref, exposed setRef) versus reka forcing the caller to pass an external node Ref. However, reka still leads in a few edge cases: (1) MAJOR — it special-cases the Popper content wrapper (data-reka-popper-content-wrapper -> firstElementChild) so nested popper animations work, which robonen lacks entirely; (2) it throws a descriptive single-child validation error (robonen only warns generically via Slot); (3) it dispatches enter/after-enter lifecycle events on initial mount via immediate watcher (robonen reacts only to changes); (4) it resolves the owner window for its fill-mode timer (iframe/popup correctness); and (5) it explicitly isClient-guards CustomEvent construction. None of these make reka strictly better overall, but the popper-wrapper handling is a real functional gap worth closing. Verdict: robonen-better-with-gaps.
+
+
+**Recommendations to make robonen strictly better:**
+- Add the data-reka-popper-content-wrapper equivalent to robonen's setRef: when the resolved element carries the popper-wrapper data attribute, track el.firstElementChild instead. This is the only major behavioral gap and matters for any Popper/Tooltip/Menu content that animates a nested element.
+- Add explicit single-child validation in Presence.vue (count resolved VNodes via getRawChildren) and throw a descriptive, parent-named error in dev (mirroring reka Presence.ts:59-78) instead of relying on Slot's generic warn — Presence has stricter single-child semantics than a general Slot.
+- Make robonen's present watcher dispatch on initial mount (add immediate handling or an onMounted bootstrap) so the 'enter'/'after-enter' lifecycle events fire for an element that is present on first render, matching reka's { immediate: true } behavior.
+- Use the element's ownerDocument.defaultView for setTimeout/clearTimeout in onAnimationSettle (capture ownerWindow when the node is attached) so the fill-mode flash-prevention timer is correct inside iframes and detached popup windows.
+- Add an explicit client/environment guard (e.g. typeof CustomEvent !== 'undefined' or an isClient check) inside dispatchAnimationEvent so the helper is robust if ever called with a live element in an SSR/edge runtime, and document it like reka does.
+- Optional: consider a formal state-machine (mounted/unmountSuspended/unmounted) like reka's useStateMachine to make the unmount-during-enter (animationcancel) edge transitions explicit and self-documenting; robonen's isAnimating boolean + isCurrentAnimation check covers most cases but the state machine is easier to reason about and audit.
+- Keep and advertise the transition support advantage (transitionend/transitioncancel + hasTransition) since reka lacks it — ensure it is covered by tests using real CSS transitions, not just mocked animation events.
+
+**Where robonen is already better:**
+- ✅ Transition support beyond CSS animations (reka handles animations only)
+- ✅ Reusable, separately-tested platform animationLifecycle helpers
+- ✅ Passive event listeners
+- ✅ More ergonomic usePresence API (MaybeRefOrGetter input, owns node ref, exposes setRef)
+- ✅ Robust child extraction via getRawChildren with keyed-fragment BAIL handling
+
+
+### switch  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** SwitchThumb (separate part with own data-state/data-disabled)
+
+robonen's Switch is a single monolithic generic component that is genuinely stronger than reka on core interaction correctness: it uses Object.is+toRaw identity comparison, fully supports Space+Enter activation plus tabindex and aria-disabled synthesis for non-button hosts (reka does neither Space nor focusability for non-button hosts), guards against double-toggle on native buttons, and serializes complex truthy/falsy values into the hidden form input. However, reka is better on composition and form/a11y polish: it ships a dedicated SwitchThumb part exposing its own data-state/data-disabled (essential for thumb animations), supports asChild on both parts, gates the hidden input on actual form membership via useFormControl (with SSR-safe default), dispatches native input/change events on the hidden input so form libraries react, auto-derives aria-label from an associated <label for>, and exposes first-class id/value props plus a typed emits contract. The most impactful gap is the missing SwitchThumb subcomponent. Adding SwitchRoot+SwitchThumb with context, asChild support, form-control gating, native event dispatch on the hidden input, and accessible-name derivation would make robonen strictly better, since robonen already wins on interaction and identity semantics.
+
+
+**Recommendations to make robonen strictly better:**
+- Add a SwitchThumb (or SwitchIndicator) subcomponent that injects switch context and renders Primitive with its own data-state (checked/unchecked) and data-disabled attributes, mirroring reka SwitchThumb. Provide a context.ts exposing { checked: ComputedRef<boolean>, disabled: Ref<boolean> } and refactor Switch into SwitchRoot. This unlocks data-[state=checked] thumb animation styling, the single most common switch UI pattern.
+- Add asChild support to robonen's PrimitiveProps (or at minimum to the Switch) so the switch can merge onto a consumer-provided element while preserving all ARIA/data attrs, matching reka's polymorphism. If asChild is intentionally omitted repo-wide, document the as='template' equivalent in SwitchProps.
+- Only render the hidden form input when actually inside a <form>: add a useFormControl-style composable (closest('form'), defaulting true for SSR) and gate the input with `v-if=isFormControl && name` to avoid stray DOM nodes when used outside forms.
+- Dispatch native input and change events on the hidden input when the value changes (via the HTMLInputElement.prototype value setter), so third-party form libraries and direct change listeners on the hidden input react to programmatic toggles, matching reka's VisuallyHiddenInputBubble behavior.
+- Add accessible-name support: accept an `id` prop and derive aria-label from an associated <label for> (or, preferably, support aria-labelledby wiring) so a switch labeled only by a visual <label for> still has a robust accessible name. Prefer a reactive/lifecycle-safe lookup over a one-shot document.querySelector in setup.
+- Expose a typed emits contract for update:modelValue and consider modeling modelValue as T | null to document the controlled/uncontrolled contract; add a dedicated `value` prop (or document that truthy/falsy serialization is the form value) so the form-submission value is explicit.
+- Keep robonen's superior non-button keyboard/tabindex/aria-disabled synthesis and Object.is identity semantics — these are genuine wins over reka; ensure the new SwitchRoot/SwitchThumb refactor preserves them.
+
+**Where robonen is already better:**
+- ✅ Object.is + toRaw identity comparison for checked state (more correct than reka's === for proxies/NaN/-0)
+- ✅ Space + Enter activation and tabindex/aria-disabled synthesis for non-button hosts (reka handles neither Space nor focusability/disabled for non-button hosts)
+- ✅ Guards against double-toggle on native buttons by only synthesizing keyboard handling when as != 'button'
+- ✅ Hidden input value serialization for numbers/booleans/objects (reka submits an unrelated static `value` string for custom state types)
+- ✅ Fewer external dependencies for core behavior; no document.querySelector during setup (better SSR/hydration robustness)
+
diff --git a/vue/primitives/docs/intro.vue b/vue/primitives/docs/intro.vue
new file mode 100644
index 0000000..95fdea6
--- /dev/null
+++ b/vue/primitives/docs/intro.vue
@@ -0,0 +1,145 @@
+<script setup lang="ts">
+// Landing hero for @robonen/primitives. Static content only — no runtime
+// logic at setup top-level, so it prerenders and hydrates cleanly.
+</script>
+
+<template>
+  <div class="docs-section">
+    <div class="prose-docs">
+      <h1>@robonen/primitives</h1>
+      <p>
+        A collection of unstyled, accessible UI primitives for Vue 3 — the headless
+        building blocks for design systems and component libraries.
+      </p>
+    </div>
+
+    <p class="prose-docs">
+      Most component libraries bundle behavior and styling together, so the moment
+      your design diverges you end up fighting the framework. <code>@robonen/primitives</code>
+      ships the hard part — state, focus management, keyboard interaction, ARIA wiring,
+      portalling and positioning — and leaves the markup and styling entirely to you.
+      Every primitive is composed from small, controllable parts (a <code>Root</code>,
+      a <code>Trigger</code>, a <code>Content</code>, and so on) following the same
+      conventions, so once you learn one you know them all.
+    </p>
+
+    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-5">
+        <h3 class="m-0 text-sm font-semibold text-(--fg)">Unstyled by design</h3>
+        <p class="mt-2 mb-0 text-sm text-(--fg-muted)">
+          No CSS shipped. Primitives render the DOM you ask for and expose state via
+          data attributes, so you bring your own styles — Tailwind, vanilla CSS, anything.
+        </p>
+      </div>
+
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-5">
+        <h3 class="m-0 text-sm font-semibold text-(--fg)">Accessible out of the box</h3>
+        <p class="mt-2 mb-0 text-sm text-(--fg-muted)">
+          Focus scopes, roving tabindex, visually-hidden labels and correct ARIA roles
+          are handled for you. The suite is tested against
+          <code>axe-core</code> in a real browser.
+        </p>
+      </div>
+
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-5">
+        <h3 class="m-0 text-sm font-semibold text-(--fg)">Controlled or uncontrolled</h3>
+        <p class="mt-2 mb-0 text-sm text-(--fg-muted)">
+          Bind state with <code>v-model</code> when you need control, or set a
+          <code>defaultValue</code> / <code>defaultOpen</code> and let the primitive
+          manage itself.
+        </p>
+      </div>
+
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-5">
+        <h3 class="m-0 text-sm font-semibold text-(--fg)">Composable & polymorphic</h3>
+        <p class="mt-2 mb-0 text-sm text-(--fg-muted)">
+          Every part takes an <code>as</code> prop, or use <code>as="template"</code>
+          to merge behavior onto your own element. Floating UI powers positioning for
+          popovers, tooltips and menus.
+        </p>
+      </div>
+    </div>
+
+    <div class="prose-docs">
+      <h2>Install</h2>
+    </div>
+
+    <DocsCode :code="`pnpm add @robonen/primitives`" lang="bash" />
+
+    <div class="prose-docs">
+      <h2>Usage</h2>
+      <p>
+        Primitives are assembled from named parts. Here is a complete dialog — open
+        state is uncontrolled, focus is trapped, body scroll is locked, and the
+        content is portalled out of the DOM flow:
+      </p>
+    </div>
+
+    <DocsCode lang="vue" :code="`<script setup lang=&quot;ts&quot;>
+import {
+  DialogRoot,
+  DialogTrigger,
+  DialogPortal,
+  DialogOverlay,
+  DialogContent,
+  DialogTitle,
+  DialogDescription,
+  DialogClose,
+} from '@robonen/primitives';
+</scr&shy;ipt>
+
+<template>
+  <DialogRoot>
+    <DialogTrigger class=&quot;btn&quot;>Open</DialogTrigger>
+
+    <DialogPortal>
+      <DialogOverlay class=&quot;overlay&quot; />
+      <DialogContent class=&quot;dialog&quot;>
+        <DialogTitle>Delete project</DialogTitle>
+        <DialogDescription>This action cannot be undone.</DialogDescription>
+        <DialogClose class=&quot;btn&quot;>Cancel</DialogClose>
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
+</template>`" />
+
+    <div class="prose-docs">
+      <p>
+        Need full control over open state? Bind it directly — the same primitive works
+        either way:
+      </p>
+    </div>
+
+    <DocsCode lang="vue" :code="`<DialogRoot v-model:open=&quot;isOpen&quot;>
+  <!-- ... -->
+</DialogRoot>`" />
+
+    <div class="prose-docs">
+      <h2>The Primitive component</h2>
+      <p>
+        At the core of every part is <code>Primitive</code>, a polymorphic functional
+        component. Pass <code>as</code> to choose the element, or <code>as="template"</code>
+        to forward behavior onto a child of your own.
+      </p>
+    </div>
+
+    <DocsCode lang="ts" :code="`import { Primitive, Slot } from '@robonen/primitives';
+
+// <Primitive as=&quot;button&quot; /> renders a <button>
+// <Primitive as=&quot;template&quot;> merges props onto the slotted child`" />
+
+    <div class="prose-docs">
+      <h2>Where to next</h2>
+      <p>
+        The full primitive index is listed below. A few good starting points:
+      </p>
+      <ul>
+        <li><NuxtLink to="/primitives/dialog">Dialog</NuxtLink> and <NuxtLink to="/primitives/alert-dialog">Alert Dialog</NuxtLink> — modal layers with focus trapping.</li>
+        <li><NuxtLink to="/primitives/popover">Popover</NuxtLink>, <NuxtLink to="/primitives/tooltip">Tooltip</NuxtLink> and <NuxtLink to="/primitives/hover-card">Hover Card</NuxtLink> — Floating UI positioned surfaces.</li>
+        <li><NuxtLink to="/primitives/select">Select</NuxtLink>, <NuxtLink to="/primitives/combobox">Combobox</NuxtLink> and <NuxtLink to="/primitives/listbox">Listbox</NuxtLink> — keyboard-driven option pickers.</li>
+        <li><NuxtLink to="/primitives/switch">Switch</NuxtLink>, <NuxtLink to="/primitives/checkbox">Checkbox</NuxtLink> and <NuxtLink to="/primitives/slider">Slider</NuxtLink> — form controls that integrate with native inputs.</li>
+        <li><NuxtLink to="/primitives/focus-scope">Focus Scope</NuxtLink> and <NuxtLink to="/primitives/presence">Presence</NuxtLink> — the shared foundations every part builds on.</li>
+      </ul>
+    </div>
+  </div>
+</template>
diff --git a/vue/primitives/eslint.config.ts b/vue/primitives/eslint.config.ts
new file mode 100644
index 0000000..3f17b52
--- /dev/null
+++ b/vue/primitives/eslint.config.ts
@@ -0,0 +1,9 @@
+import { base, compose, imports, stylistic, typescript, vue } from '@robonen/eslint';
+
+export default compose(base, typescript, vue, imports, stylistic, {
+  name: 'primitives/overrides',
+  files: ['**/*.vue'],
+  rules: {
+    '@stylistic/no-multiple-empty-lines': 'off',
+  },
+});
diff --git a/vue/primitives/jsr.json b/vue/primitives/jsr.json
new file mode 100644
index 0000000..b458a1a
--- /dev/null
+++ b/vue/primitives/jsr.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "https://jsr.io/schema/config-file.v1.json",
+  "name": "@robonen/primitives",
+  "license": "Apache-2.0",
+  "version": "0.0.1",
+  "exports": "./src/index.ts"
+}
diff --git a/vue/primitives/package.json b/vue/primitives/package.json
new file mode 100644
index 0000000..8ecec21
--- /dev/null
+++ b/vue/primitives/package.json
@@ -0,0 +1,79 @@
+{
+  "name": "@robonen/primitives",
+  "version": "0.0.1",
+  "license": "Apache-2.0",
+  "description": "Collection of UI primitives",
+  "keywords": [
+    "ui",
+    "primitives",
+    "components",
+    "tools"
+  ],
+  "author": "Robonen Andrew <robonenandrew@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/robonen/tools.git",
+    "directory": "vue/primitives"
+  },
+  "packageManager": "pnpm@10.33.2",
+  "engines": {
+    "node": ">=24.13.1"
+  },
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./*": {
+      "import": {
+        "types": "./dist/*/index.d.mts",
+        "default": "./dist/*/index.mjs"
+      },
+      "require": {
+        "types": "./dist/*/index.d.cts",
+        "default": "./dist/*/index.cjs"
+      }
+    }
+  },
+  "scripts": {
+    "lint:check": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "test": "vitest run",
+    "bench": "vitest bench",
+    "dev": "vitest dev",
+    "build": "tsdown"
+  },
+  "devDependencies": {
+    "@robonen/eslint": "workspace:*",
+    "@robonen/tsconfig": "workspace:*",
+    "@robonen/tsdown": "workspace:*",
+    "@vitest/browser": "catalog:",
+    "@vitest/browser-playwright": "^4.1.8",
+    "@vue/test-utils": "catalog:",
+    "axe-core": "^4.12.0",
+    "eslint": "catalog:",
+    "playwright": "^1.60.0",
+    "tsdown": "catalog:",
+    "unplugin-vue": "^7.2.0",
+    "vitest-browser-vue": "^2.1.0",
+    "vue-tsc": "^3.3.4"
+  },
+  "dependencies": {
+    "@floating-ui/vue": "^1.1.11",
+    "@robonen/platform": "workspace:*",
+    "@robonen/stdlib": "workspace:*",
+    "@robonen/vue": "workspace:*",
+    "@vue/shared": "catalog:",
+    "vue": "catalog:"
+  }
+}
diff --git a/vue/primitives/playground/.gitignore b/vue/primitives/playground/.gitignore
new file mode 100644
index 0000000..b431156
--- /dev/null
+++ b/vue/primitives/playground/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+dist
+.vite
diff --git a/vue/primitives/playground/README.md b/vue/primitives/playground/README.md
new file mode 100644
index 0000000..e6eceb6
--- /dev/null
+++ b/vue/primitives/playground/README.md
@@ -0,0 +1,32 @@
+# @robonen/primitives playground
+
+Minimal Vite + Vue 3 sandbox for inspecting and debugging primitives from
+[`@robonen/primitives`](../). Imports source directly via the `@primitives/*`
+alias, so HMR works while editing components in `vue/primitives/src/`.
+
+## Usage
+
+```sh
+pnpm --filter @robonen/primitives-playground dev
+```
+
+Then open http://localhost:5180.
+
+## Adding a demo
+
+Drop a `.vue` file into `src/demos/`. It will be picked up automatically by the
+sidebar (`import.meta.glob('./demos/*.vue')`) and addressable via the URL hash
+(e.g. `#/Accordion`).
+
+```vue
+<script setup lang="ts">
+import { AccordionRoot } from '@primitives/accordion';
+// or: import { AccordionRoot } from '@primitives';
+</script>
+```
+
+## Notes
+
+- Imports resolve to `vue/primitives/src/` directly (not the built `dist/`), so
+  you can poke at primitives and see changes instantly.
+- The playground is `private: true` and is not published.
diff --git a/vue/primitives/playground/index.html b/vue/primitives/playground/index.html
new file mode 100644
index 0000000..4000fac
--- /dev/null
+++ b/vue/primitives/playground/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@robonen/primitives — playground</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/vue/primitives/playground/package.json b/vue/primitives/playground/package.json
new file mode 100644
index 0000000..283251e
--- /dev/null
+++ b/vue/primitives/playground/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@robonen/primitives-playground",
+  "version": "0.0.0",
+  "private": true,
+  "license": "Apache-2.0",
+  "description": "Minimal playground for @robonen/primitives — eyeball, debug, hack on hypotheses",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@robonen/primitives": "workspace:*",
+    "vue": "catalog:",
+    "vue-router": "^5.1.0"
+  },
+  "devDependencies": {
+    "@robonen/tsconfig": "workspace:*",
+    "@tailwindcss/vite": "^4.3.0",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "tailwindcss": "^4.3.0",
+    "vite": "^8.0.16",
+    "vue-tsc": "^3.3.4"
+  }
+}
diff --git a/vue/primitives/playground/src/App.vue b/vue/primitives/playground/src/App.vue
new file mode 100644
index 0000000..1161e4f
--- /dev/null
+++ b/vue/primitives/playground/src/App.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { demos } from './router';
+
+const route = useRoute();
+const query = ref('');
+
+const filtered = computed(() => {
+  const q = query.value.trim().toLowerCase();
+  return q ? demos.filter(d => d.name.toLowerCase().includes(q)) : demos;
+});
+
+const currentDemoName = computed(() => {
+  const n = route.meta.demoName;
+  return typeof n === 'string' ? n : '';
+});
+</script>
+
+<template>
+  <div class="grid h-screen grid-cols-[15rem_1fr]">
+    <aside class="flex min-h-0 flex-col border-r border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-900">
+      <header class="border-b border-neutral-200 px-4 py-3.5 font-semibold dark:border-neutral-800">
+        <RouterLink to="/" class="no-underline">
+          @robonen/primitives
+        </RouterLink>
+        <small class="mt-0.5 block font-normal text-neutral-500 dark:text-neutral-400">playground</small>
+      </header>
+
+      <input
+        v-model="query"
+        type="search"
+        placeholder="Filter demos…"
+        aria-label="Filter demos"
+        class="mx-3 my-2.5 rounded-md border border-neutral-200 bg-neutral-50 px-2 py-1.5 outline-none focus:border-blue-600 dark:border-neutral-800 dark:bg-neutral-950 dark:focus:border-blue-400"
+      >
+
+      <nav class="overflow-y-auto px-1.5 pb-3 pt-1">
+        <div class="px-2.5 pb-1 pt-3 text-[0.6875rem] uppercase tracking-wider text-neutral-500 dark:text-neutral-400">
+          Demos ({{ filtered.length }})
+        </div>
+        <RouterLink
+          v-for="demo in filtered"
+          :key="demo.name"
+          :to="demo.routePath"
+          custom
+        >
+          <template #default="{ href, navigate, isActive }">
+            <a
+              :href="href"
+              :aria-current="isActive ? 'page' : undefined"
+              class="block rounded-md px-2.5 py-1.5 no-underline hover:bg-neutral-900/5 aria-[current=page]:bg-blue-600 aria-[current=page]:text-white dark:hover:bg-neutral-100/5 dark:aria-[current=page]:bg-blue-500"
+              @click="navigate"
+            >
+              {{ demo.name }}
+            </a>
+          </template>
+        </RouterLink>
+
+        <div v-if="!demos.length" class="px-2.5 pb-1 pt-3 text-[0.6875rem] uppercase tracking-wider text-neutral-500 dark:text-neutral-400">
+          No demos yet
+        </div>
+      </nav>
+    </aside>
+
+    <main class="min-w-0 overflow-auto px-7 py-6">
+      <header
+        v-if="currentDemoName"
+        class="mb-4 flex items-baseline gap-3 border-b border-neutral-200 pb-3 dark:border-neutral-800"
+      >
+        <h1 class="m-0 text-lg font-semibold">
+          {{ currentDemoName }}
+        </h1>
+        <code class="text-xs text-neutral-500 dark:text-neutral-400">src/demos/{{ currentDemoName }}.vue</code>
+      </header>
+
+      <RouterView v-slot="{ Component }">
+        <Suspense>
+          <template #default>
+            <component :is="Component" v-if="Component" />
+          </template>
+          <template #fallback>
+            <div class="text-neutral-500 dark:text-neutral-400">
+              Loading…
+            </div>
+          </template>
+        </Suspense>
+      </RouterView>
+    </main>
+  </div>
+</template>
diff --git a/vue/primitives/playground/src/demos/Accordion.vue b/vue/primitives/playground/src/demos/Accordion.vue
new file mode 100644
index 0000000..c5f9156
--- /dev/null
+++ b/vue/primitives/playground/src/demos/Accordion.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import {
+  AccordionContent,
+  AccordionItem,
+  AccordionRoot,
+  AccordionTrigger,
+} from '@primitives/accordion';
+
+const value = ref<string | string[] | undefined>('a');
+const type = ref<'single' | 'multiple'>('single');
+const collapsible = ref(true);
+const disabled = ref(false);
+
+const items = [
+  { value: 'a', title: 'Item A', body: 'First panel content.' },
+  { value: 'b', title: 'Item B', body: 'Second panel content.' },
+  { value: 'c', title: 'Item C', body: 'Third panel content.' },
+];
+</script>
+
+<template>
+  <section class="grid max-w-xl gap-4">
+    <div class="flex flex-wrap items-center gap-3 rounded-lg border border-neutral-200 bg-white px-3 py-2.5 dark:border-neutral-800 dark:bg-neutral-900">
+      <label class="inline-flex items-center gap-2">
+        type
+        <select v-model="type" class="rounded border border-neutral-200 bg-neutral-50 px-1.5 py-0.5 dark:border-neutral-800 dark:bg-neutral-950">
+          <option value="single">single</option>
+          <option value="multiple">multiple</option>
+        </select>
+      </label>
+      <label class="inline-flex items-center gap-1.5">
+        <input v-model="collapsible" type="checkbox"> collapsible
+      </label>
+      <label class="inline-flex items-center gap-1.5">
+        <input v-model="disabled" type="checkbox"> disabled
+      </label>
+      <output class="ml-auto font-mono text-xs text-neutral-500 dark:text-neutral-400">value = {{ JSON.stringify(value) }}</output>
+    </div>
+
+    <AccordionRoot
+      v-model="value"
+      class="grid gap-1"
+      :type="type"
+      :collapsible="collapsible"
+      :disabled="disabled"
+    >
+      <AccordionItem
+        v-for="item in items"
+        :key="item.value"
+        :value="item.value"
+        class="overflow-hidden rounded-md border border-neutral-200 dark:border-neutral-800"
+      >
+        <AccordionTrigger
+          class="block w-full cursor-pointer bg-white px-3 py-2.5 text-left data-[state=open]:bg-neutral-900/5 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-600 dark:bg-neutral-900 dark:data-[state=open]:bg-neutral-100/5 dark:focus-visible:outline-blue-400"
+        >
+          {{ item.title }}
+        </AccordionTrigger>
+        <AccordionContent class="px-3 py-2.5 text-neutral-500 dark:text-neutral-400">
+          {{ item.body }}
+        </AccordionContent>
+      </AccordionItem>
+    </AccordionRoot>
+  </section>
+</template>
diff --git a/vue/primitives/playground/src/demos/Checkbox.vue b/vue/primitives/playground/src/demos/Checkbox.vue
new file mode 100644
index 0000000..a7e193e
--- /dev/null
+++ b/vue/primitives/playground/src/demos/Checkbox.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { CheckedState } from '@primitives/checkbox';
+import { CheckboxIndicator, CheckboxRoot } from '@primitives/checkbox';
+
+const checked = ref<CheckedState>(false);
+const disabled = ref(false);
+</script>
+
+<template>
+  <section class="grid max-w-md gap-4">
+    <div class="flex flex-wrap items-center gap-3 rounded-lg border border-neutral-200 bg-white px-3 py-2.5 dark:border-neutral-800 dark:bg-neutral-900">
+      <label class="inline-flex items-center gap-1.5">
+        <input v-model="disabled" type="checkbox"> disabled
+      </label>
+      <button
+        type="button"
+        class="rounded border border-neutral-200 bg-neutral-50 px-2 py-1 text-xs hover:border-blue-600 dark:border-neutral-800 dark:bg-neutral-950 dark:hover:border-blue-400"
+        @click="checked = 'indeterminate'"
+      >
+        set indeterminate
+      </button>
+      <output class="ml-auto font-mono text-xs text-neutral-500 dark:text-neutral-400">checked = {{ JSON.stringify(checked) }}</output>
+    </div>
+
+    <label class="inline-flex cursor-pointer items-center gap-2.5">
+      <CheckboxRoot
+        v-model:checked="checked"
+        :disabled="disabled"
+        class="inline-grid h-5 w-5 place-items-center rounded border border-neutral-200 bg-white data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white data-[state=indeterminate]:border-blue-600 data-[state=indeterminate]:bg-blue-600 data-[state=indeterminate]:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 dark:border-neutral-800 dark:bg-neutral-900 dark:data-[state=checked]:border-blue-500 dark:data-[state=checked]:bg-blue-500 dark:data-[state=indeterminate]:border-blue-500 dark:data-[state=indeterminate]:bg-blue-500 dark:focus-visible:outline-blue-400"
+      >
+        <CheckboxIndicator class="text-[0.8125rem] leading-none">
+          <span v-if="checked === 'indeterminate'">–</span>
+          <span v-else-if="checked">✓</span>
+        </CheckboxIndicator>
+      </CheckboxRoot>
+      Accept terms and conditions
+    </label>
+  </section>
+</template>
diff --git a/vue/primitives/playground/src/main.ts b/vue/primitives/playground/src/main.ts
new file mode 100644
index 0000000..fff041b
--- /dev/null
+++ b/vue/primitives/playground/src/main.ts
@@ -0,0 +1,10 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import { router } from './router';
+import './styles.css';
+
+const app = createApp(App).use(router);
+
+app.config.performance = true;
+
+app.mount('#app');
diff --git a/vue/primitives/playground/src/router.ts b/vue/primitives/playground/src/router.ts
new file mode 100644
index 0000000..22f9f3c
--- /dev/null
+++ b/vue/primitives/playground/src/router.ts
@@ -0,0 +1,37 @@
+import type { Component } from 'vue';
+import type { RouteRecordRaw } from 'vue-router';
+import { createRouter, createWebHistory } from 'vue-router';
+import HomeView from './views/Home.vue';
+import NotFoundView from './views/NotFound.vue';
+
+// Eager paths, lazy components → each demo ships as its own chunk.
+const demoModules = import.meta.glob<{ default: Component }>('./demos/*.vue');
+
+export interface DemoEntry {
+  name: string;
+  path: string;
+  routePath: string;
+}
+
+export const demos: DemoEntry[] = Object.keys(demoModules)
+  .map((path) => {
+    const name = path.replace(/^.*\/demos\//, '').replace(/\.vue$/, '');
+    return { name, path, routePath: `/demo/${encodeURIComponent(name)}` };
+  })
+  .sort((a, b) => a.name.localeCompare(b.name));
+
+const demoRoutes: RouteRecordRaw[] = demos.map(demo => ({
+  path: demo.routePath,
+  name: `demo:${demo.name}`,
+  component: demoModules[demo.path]!,
+  meta: { demoName: demo.name },
+}));
+
+export const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    { path: '/', name: 'home', component: HomeView },
+    ...demoRoutes,
+    { path: '/:pathMatch(.*)*', name: 'not-found', component: NotFoundView },
+  ],
+});
diff --git a/vue/primitives/playground/src/styles.css b/vue/primitives/playground/src/styles.css
new file mode 100644
index 0000000..6fc9c55
--- /dev/null
+++ b/vue/primitives/playground/src/styles.css
@@ -0,0 +1,12 @@
+@import "tailwindcss";
+
+@layer base {
+  html,
+  body,
+  #app {
+    @apply m-0 h-full bg-neutral-50 text-sm text-neutral-900 antialiased dark:bg-neutral-950 dark:text-neutral-100;
+    color-scheme: light dark;
+  }
+}
+
+
diff --git a/vue/primitives/playground/src/views/Home.vue b/vue/primitives/playground/src/views/Home.vue
new file mode 100644
index 0000000..fb46194
--- /dev/null
+++ b/vue/primitives/playground/src/views/Home.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { demos } from '../router';
+</script>
+
+<template>
+  <section class="max-w-3xl">
+    <h1 class="mb-2 mt-0 text-2xl font-semibold">
+      @robonen/primitives playground
+    </h1>
+    <p class="text-neutral-500 dark:text-neutral-400">
+      Pick a demo from the sidebar, or drop a new <code class="rounded border border-neutral-200 bg-white px-1.5 py-px text-xs dark:border-neutral-800 dark:bg-neutral-900">.vue</code> file into
+      <code class="rounded border border-neutral-200 bg-white px-1.5 py-px text-xs dark:border-neutral-800 dark:bg-neutral-900">src/demos/</code> — it will be picked up automatically and become
+      addressable at <code class="rounded border border-neutral-200 bg-white px-1.5 py-px text-xs dark:border-neutral-800 dark:bg-neutral-900">/demo/&lt;FileName&gt;</code>.
+    </p>
+
+    <div class="mt-4 grid gap-2 grid-cols-[repeat(auto-fill,minmax(11.25rem,1fr))]">
+      <RouterLink
+        v-for="demo in demos"
+        :key="demo.name"
+        :to="demo.routePath"
+        class="grid gap-1 rounded-lg border border-neutral-200 bg-white p-3 no-underline hover:border-blue-600 dark:border-neutral-800 dark:bg-neutral-900 dark:hover:border-blue-400"
+      >
+        <strong>{{ demo.name }}</strong>
+        <code class="text-neutral-500 dark:text-neutral-400">{{ demo.routePath }}</code>
+      </RouterLink>
+    </div>
+
+    <p v-if="!demos.length" class="text-neutral-500 dark:text-neutral-400">
+      No demos found yet.
+    </p>
+  </section>
+</template>
diff --git a/vue/primitives/playground/src/views/NotFound.vue b/vue/primitives/playground/src/views/NotFound.vue
new file mode 100644
index 0000000..98b250d
--- /dev/null
+++ b/vue/primitives/playground/src/views/NotFound.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+</script>
+
+<template>
+  <section class="grid max-w-md gap-2">
+    <h1 class="m-0 text-3xl font-semibold">
+      404
+    </h1>
+    <p>
+      No demo matches <code class="rounded border border-neutral-200 bg-white px-1.5 py-px dark:border-neutral-800 dark:bg-neutral-900">{{ route.fullPath }}</code>.
+    </p>
+    <RouterLink to="/" class="text-blue-600 hover:underline dark:text-blue-400">
+      ← Back to index
+    </RouterLink>
+  </section>
+</template>
diff --git a/vue/primitives/playground/tsconfig.json b/vue/primitives/playground/tsconfig.json
new file mode 100644
index 0000000..bb89bae
--- /dev/null
+++ b/vue/primitives/playground/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "@robonen/tsconfig/tsconfig.vue.json",
+  "compilerOptions": {
+    "types": ["vite/client", "node"],
+    "allowImportingTsExtensions": false,
+    "paths": {
+      "@primitives/*": ["../src/*"],
+      "@primitives": ["../src/index.ts"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue", "vite.config.ts"]
+}
diff --git a/vue/primitives/playground/vite.config.ts b/vue/primitives/playground/vite.config.ts
new file mode 100644
index 0000000..217533d
--- /dev/null
+++ b/vue/primitives/playground/vite.config.ts
@@ -0,0 +1,31 @@
+import { URL, fileURLToPath } from 'node:url';
+import tailwindcss from '@tailwindcss/vite';
+import vue from '@vitejs/plugin-vue';
+import { defineConfig } from 'vite';
+
+export default defineConfig(({ mode }) => ({
+  plugins: [vue(), tailwindcss()],
+  define: {
+    __DEV__: JSON.stringify(mode !== 'production'),
+  },
+  resolve: {
+    alias: [
+      // Order matters: subpath alias must come before the bare-specifier one.
+      {
+        find: /^@primitives\/(.*)$/,
+        replacement: fileURLToPath(new URL('../src/$1', import.meta.url)),
+      },
+      {
+        find: /^@primitives$/,
+        replacement: fileURLToPath(new URL('../src/index.ts', import.meta.url)),
+      },
+    ],
+  },
+  server: {
+    port: 5180,
+    fs: {
+      // Allow importing from primitives source one level up.
+      allow: [fileURLToPath(new URL('../', import.meta.url))],
+    },
+  },
+}));
diff --git a/vue/primitives/src/accordion/AccordionContent.vue b/vue/primitives/src/accordion/AccordionContent.vue
new file mode 100644
index 0000000..f2136ec
--- /dev/null
+++ b/vue/primitives/src/accordion/AccordionContent.vue
@@ -0,0 +1,39 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface AccordionContentProps extends PrimitiveProps {
+  /** Keep content mounted even when closed. */
+  forceMount?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { useAccordionContext, useAccordionItemContext } from './context';
+import { Presence } from '../presence';
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'div', forceMount = false } = defineProps<AccordionContentProps>();
+
+const { forwardRef } = useForwardExpose();
+const ctx = useAccordionContext();
+const item = useAccordionItemContext();
+</script>
+
+<template>
+  <Presence :present="forceMount || item.open.value">
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      role="region"
+      :id="item.contentId.value"
+      :aria-labelledby="item.triggerId.value"
+      :data-state="item.open.value ? 'open' : 'closed'"
+      :data-disabled="item.disabled.value ? '' : undefined"
+      :data-orientation="ctx.orientation.value"
+      :hidden="!item.open.value || undefined"
+    >
+      <slot :open="item.open.value" />
+    </Primitive>
+  </Presence>
+</template>
diff --git a/vue/primitives/src/accordion/AccordionItem.vue b/vue/primitives/src/accordion/AccordionItem.vue
new file mode 100644
index 0000000..3012b02
--- /dev/null
+++ b/vue/primitives/src/accordion/AccordionItem.vue
@@ -0,0 +1,49 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface AccordionItemProps extends PrimitiveProps {
+  /** Unique value for this item. */
+  value: string;
+  /** Disable this item. */
+  disabled?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { provideAccordionItemContext, useAccordionContext } from './context';
+import { Primitive } from '../primitive';
+import { computed } from 'vue';
+import { useForwardExpose } from '@robonen/vue';
+import { useId } from '../config-provider';
+
+const { value, disabled = false, as = 'div' } = defineProps<AccordionItemProps>();
+
+const { forwardRef } = useForwardExpose();
+
+const ctx = useAccordionContext();
+const isOpen = computed(() => ctx.isOpen(value));
+const isDisabled = computed(() => ctx.disabled.value || disabled);
+
+const triggerId = useId(undefined, 'accordion-trigger');
+const contentId = useId(undefined, 'accordion-content');
+
+provideAccordionItemContext({
+  value,
+  open: isOpen,
+  disabled: isDisabled,
+  triggerId,
+  contentId,
+});
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :data-state="isOpen ? 'open' : 'closed'"
+    :data-disabled="isDisabled ? '' : undefined"
+    :data-orientation="ctx.orientation.value"
+  >
+    <slot :open="isOpen" />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/accordion/AccordionRoot.vue b/vue/primitives/src/accordion/AccordionRoot.vue
new file mode 100644
index 0000000..db32339
--- /dev/null
+++ b/vue/primitives/src/accordion/AccordionRoot.vue
@@ -0,0 +1,153 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+import type { RovingDirection } from '../utils/roving-focus';
+
+export interface AccordionRootProps extends PrimitiveProps {
+  /** Current open value(s) for controlled mode. */
+  modelValue?: string | string[];
+
+  /** Initial value(s) for uncontrolled mode. */
+  defaultValue?: string | string[];
+
+  /** 'single' allows one panel; 'multiple' allows many. @default 'single' */
+  type?: 'single' | 'multiple';
+
+  /** Allow closing all panels in single mode. @default false */
+  collapsible?: boolean;
+
+  /** Disable all items. */
+  disabled?: boolean;
+
+  /** Orientation of the accordion. @default 'vertical' */
+  orientation?: 'horizontal' | 'vertical';
+
+  /** Writing direction. @default 'ltr' */
+  dir?: RovingDirection;
+
+  /** Wrap keyboard navigation. @default true */
+  loop?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, shallowRef, toRef, watch } from 'vue';
+import { resolveNextIndex, rovingKeyToAction } from '../utils/roving-focus';
+import { Primitive } from '../primitive';
+import { provideAccordionContext } from './context';
+import { toArray } from '@robonen/stdlib';
+import { useCollectionProvider } from '../collection';
+import { useForwardExpose } from '@robonen/vue';
+
+const {
+  type = 'single',
+  collapsible = false,
+  disabled = false,
+  orientation = 'vertical',
+  dir = 'ltr',
+  loop = true,
+  modelValue,
+  defaultValue,
+  as = 'div',
+} = defineProps<AccordionRootProps>();
+
+const { forwardRef } = useForwardExpose();
+
+const emit = defineEmits<{ 'update:modelValue': [value: string | string[] | undefined] }>();
+
+type RovingAction = NonNullable<ReturnType<typeof rovingKeyToAction>>;
+
+const openSet = shallowRef<Set<string>>(
+  new Set(toArray(modelValue ?? defaultValue)),
+);
+
+function setEqualsArray(set: Set<string>, arr: string[]): boolean {
+  if (arr.length !== set.size) return false;
+  for (let i = 0; i < arr.length; i++) if (!set.has(arr[i]!)) return false;
+  return true;
+}
+
+watch(() => modelValue, (v) => {
+  if (v === undefined) return;
+  const arr = toArray(v);
+  if (setEqualsArray(openSet.value, arr)) return;
+  openSet.value = new Set(arr);
+});
+
+
+function nextOpenSet(cur: Set<string>, value: string): Set<string> {
+  const present = cur.has(value);
+
+  if (type === 'single') {
+    if (!present) return new Set([value]);
+    return collapsible ? new Set() : cur;
+  }
+
+  const next = new Set(cur);
+  if (present) next.delete(value);
+  else next.add(value);
+  return next;
+}
+
+function toEmitValue(set: Set<string>): string | string[] | undefined {
+  return type === 'single' ? set.values().next().value : [...set];
+}
+
+function commit(next: Set<string>): void {
+  openSet.value = next;
+  emit('update:modelValue', toEmitValue(next));
+}
+
+function isOpen(value: string): boolean {
+  return openSet.value.has(value);
+}
+
+function toggle(value: string): void {
+  if (disabled) return;
+  const cur = openSet.value;
+  const next = nextOpenSet(cur, value);
+  if (next !== cur) commit(next);
+}
+
+const { getItems, CollectionSlot } = useCollectionProvider();
+const triggerElements = computed(() => getItems(true).map(i => i.ref));
+
+function resolveFocusIndex(action: RovingAction, current: number, count: number): number {
+  if (action.absolute === 'home') return 0;
+  if (action.absolute === 'end') return count - 1;
+  return resolveNextIndex(current === -1 ? 0 : current, action.delta, count, loop);
+}
+
+function onTriggerKeyDown(event: KeyboardEvent, el: HTMLElement): void {
+  const action = rovingKeyToAction(event, { orientation, dir, loop });
+  if (!action) return;
+  event.preventDefault();
+  const enabled = triggerElements.value.filter(x => !x.hasAttribute('data-disabled'));
+  if (enabled.length === 0) return;
+  enabled[resolveFocusIndex(action, enabled.indexOf(el), enabled.length)]!.focus();
+}
+
+provideAccordionContext({
+  disabled: toRef(() => disabled),
+  orientation: toRef(() => orientation),
+  direction: toRef(() => dir),
+  loop: toRef(() => loop),
+  collapsible: toRef(() => collapsible),
+  triggerElements,
+  isOpen,
+  toggle,
+  onTriggerKeyDown,
+});
+</script>
+
+<template>
+  <CollectionSlot>
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      :data-orientation="orientation"
+      :data-disabled="disabled ? '' : undefined"
+    >
+      <slot />
+    </Primitive>
+  </CollectionSlot>
+</template>
diff --git a/vue/primitives/src/accordion/AccordionTrigger.vue b/vue/primitives/src/accordion/AccordionTrigger.vue
new file mode 100644
index 0000000..b09f9d9
--- /dev/null
+++ b/vue/primitives/src/accordion/AccordionTrigger.vue
@@ -0,0 +1,52 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface AccordionTriggerProps extends PrimitiveProps {
+}
+</script>
+
+<script setup lang="ts">
+import { useAccordionContext, useAccordionItemContext } from './context';
+import { Primitive } from '../primitive';
+import { useCollectionInjector } from '../collection';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'button' } = defineProps<AccordionTriggerProps>();
+
+const ctx = useAccordionContext();
+const item = useAccordionItemContext();
+const { forwardRef, currentElement } = useForwardExpose();
+const { CollectionItem } = useCollectionInjector();
+
+function onClick(): void {
+  if (item.disabled.value) return;
+  ctx.toggle(item.value);
+}
+
+function onKeyDown(event: KeyboardEvent): void {
+  if (!currentElement.value) return;
+  ctx.onTriggerKeyDown(event, currentElement.value);
+}
+</script>
+
+<template>
+  <CollectionItem>
+    <Primitive
+      :as="as"
+      :ref="forwardRef"
+      :type="as === 'button' ? 'button' : undefined"
+      :id="item.triggerId.value"
+      :aria-expanded="item.open.value"
+      :aria-controls="item.contentId.value"
+      :aria-disabled="item.disabled.value || undefined"
+      :data-state="item.open.value ? 'open' : 'closed'"
+      :data-disabled="item.disabled.value ? '' : undefined"
+      :data-orientation="ctx.orientation.value"
+      :disabled="item.disabled.value || undefined"
+      @click="onClick"
+      @keydown="onKeyDown"
+    >
+      <slot :open="item.open.value" />
+    </Primitive>
+  </CollectionItem>
+</template>
diff --git a/vue/primitives/src/accordion/__test__/Accordion.test.ts b/vue/primitives/src/accordion/__test__/Accordion.test.ts
new file mode 100644
index 0000000..ed9d72e
--- /dev/null
+++ b/vue/primitives/src/accordion/__test__/Accordion.test.ts
@@ -0,0 +1,242 @@
+import { AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger } from '../index';
+import { defineComponent, h, nextTick, ref } from 'vue';
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+function createAccordion(rootProps: Record<string, unknown> = {}, itemCount = 3) {
+  return mount(
+    defineComponent({
+      setup() {
+        return () => h(AccordionRoot, { ...rootProps }, {
+          default: () => Array.from({ length: itemCount }, (_, i) => {
+            const val = String.fromCodePoint(97 + i); // 'a', 'b', 'c'
+            return h(AccordionItem, { value: val, key: val, disabled: i === 2 ? true : undefined }, {
+              default: () => [
+                h(AccordionTrigger, null, { default: () => `Trigger ${val.toUpperCase()}` }),
+                h(AccordionContent, null, { default: () => `Content ${val.toUpperCase()}` }),
+              ],
+            });
+          }),
+        });
+      },
+    }),
+    { attachTo: document.body },
+  );
+}
+
+function press(el: Element, key: string) {
+  el.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
+}
+
+describe('Accordion', () => {
+  it('renders items with correct structure', () => {
+    const w = createAccordion();
+    const triggers = w.findAll('button');
+    expect(triggers).toHaveLength(3);
+    triggers.forEach((t) => {
+      expect(t.attributes('aria-expanded')).toBeDefined();
+      expect(t.attributes('aria-controls')).toBeDefined();
+    });
+    w.unmount();
+  });
+
+  it('all panels closed by default (single, non-collapsible)', () => {
+    const w = createAccordion();
+    const regions = w.findAll('[role="region"]');
+    expect(regions).toHaveLength(0);
+    w.unmount();
+  });
+
+  it('defaultValue opens a panel', () => {
+    const w = createAccordion({ defaultValue: 'a' });
+    const regions = w.findAll('[role="region"]');
+    expect(regions).toHaveLength(1);
+    expect(regions[0]!.text()).toBe('Content A');
+    w.unmount();
+  });
+
+  it('click toggles panel open/closed (single, collapsible)', async () => {
+    const w = createAccordion({ collapsible: true });
+    const triggers = w.findAll('button');
+
+    await triggers[0]!.trigger('click');
+    await nextTick();
+    expect(w.findAll('[role="region"]')).toHaveLength(1);
+    expect(w.find('[role="region"]').text()).toBe('Content A');
+
+    // clicking again closes it (collapsible)
+    await triggers[0]!.trigger('click');
+    await nextTick();
+    expect(w.findAll('[role="region"]')).toHaveLength(0);
+    w.unmount();
+  });
+
+  it('single mode: opening one closes previous', async () => {
+    const w = createAccordion({ defaultValue: 'a' });
+    const triggers = w.findAll('button');
+
+    await triggers[1]!.trigger('click');
+    await nextTick();
+    const regions = w.findAll('[role="region"]');
+    expect(regions).toHaveLength(1);
+    expect(regions[0]!.text()).toBe('Content B');
+    w.unmount();
+  });
+
+  it('single mode: cannot close when not collapsible', async () => {
+    const w = createAccordion({ defaultValue: 'a', collapsible: false });
+    const triggers = w.findAll('button');
+
+    await triggers[0]!.trigger('click');
+    await nextTick();
+    // should stay open
+    expect(w.findAll('[role="region"]')).toHaveLength(1);
+    expect(w.find('[role="region"]').text()).toBe('Content A');
+    w.unmount();
+  });
+
+  it('multiple mode: multiple panels open', async () => {
+    const w = createAccordion({ type: 'multiple' });
+    const triggers = w.findAll('button');
+
+    await triggers[0]!.trigger('click');
+    await nextTick();
+    await triggers[1]!.trigger('click');
+    await nextTick();
+
+    const regions = w.findAll('[role="region"]');
+    expect(regions).toHaveLength(2);
+    w.unmount();
+  });
+
+  it('multiple mode: toggle individual items', async () => {
+    const w = createAccordion({ type: 'multiple', defaultValue: ['a', 'b'] });
+
+    expect(w.findAll('[role="region"]')).toHaveLength(2);
+
+    const triggers = w.findAll('button');
+    await triggers[0]!.trigger('click');
+    await nextTick();
+    // 'a' closed, 'b' still open
+    const regions = w.findAll('[role="region"]');
+    expect(regions).toHaveLength(1);
+    expect(regions[0]!.text()).toBe('Content B');
+    w.unmount();
+  });
+
+  it('v-model works (single)', async () => {
+    const value = ref<string | undefined>('a');
+    const w = mount(
+      defineComponent({
+        setup() {
+          return () => h(AccordionRoot, {
+            modelValue: value.value,
+            'onUpdate:modelValue': (v: string | string[] | undefined) => { value.value = v as string | undefined; },
+            collapsible: true,
+          }, {
+            default: () => [
+              h(AccordionItem, { value: 'a' }, {
+                default: () => [
+                  h(AccordionTrigger, null, { default: () => 'A' }),
+                  h(AccordionContent, null, { default: () => 'PA' }),
+                ],
+              }),
+              h(AccordionItem, { value: 'b' }, {
+                default: () => [
+                  h(AccordionTrigger, null, { default: () => 'B' }),
+                  h(AccordionContent, null, { default: () => 'PB' }),
+                ],
+              }),
+            ],
+          });
+        },
+      }),
+      { attachTo: document.body },
+    );
+
+    expect(w.find('[role="region"]').text()).toBe('PA');
+    const triggers = w.findAll('button');
+    await triggers[1]!.trigger('click');
+    await nextTick();
+    expect(value.value).toBe('b');
+    w.unmount();
+  });
+
+  it('keyboard navigation (vertical, ArrowDown/ArrowUp)', async () => {
+    const w = createAccordion({ defaultValue: 'a' });
+    await nextTick();
+    const triggers = w.findAll('button');
+    const trigA = triggers[0]!.element as HTMLElement;
+    trigA.focus();
+
+    press(trigA, 'ArrowDown');
+    await nextTick();
+    expect(document.activeElement).toBe(triggers[1]!.element);
+
+    press(triggers[1]!.element, 'ArrowUp');
+    await nextTick();
+    expect(document.activeElement).toBe(triggers[0]!.element);
+    w.unmount();
+  });
+
+  it('Home/End keys move focus', async () => {
+    const w = createAccordion({ defaultValue: 'a' });
+    await nextTick();
+    const triggers = w.findAll('button');
+    const trigA = triggers[0]!.element as HTMLElement;
+    trigA.focus();
+
+    press(trigA, 'End');
+    await nextTick();
+    // End goes to last enabled trigger (B, since C is disabled)
+    expect(document.activeElement).toBe(triggers[1]!.element);
+
+    press(triggers[1]!.element, 'Home');
+    await nextTick();
+    expect(document.activeElement).toBe(triggers[0]!.element);
+    w.unmount();
+  });
+
+  it('disabled item cannot be toggled', async () => {
+    const w = createAccordion({ type: 'multiple' });
+    const triggers = w.findAll('button');
+    await triggers[2]!.trigger('click');
+    await nextTick();
+    expect(w.findAll('[role="region"]')).toHaveLength(0);
+    w.unmount();
+  });
+
+  it('disabled root blocks all interaction', async () => {
+    const w = createAccordion({ disabled: true });
+    const triggers = w.findAll('button');
+    await triggers[0]!.trigger('click');
+    await nextTick();
+    expect(w.findAll('[role="region"]')).toHaveLength(0);
+    w.unmount();
+  });
+
+  it('data-state and aria-expanded reflect open state', async () => {
+    const w = createAccordion({ defaultValue: 'a' });
+    const triggers = w.findAll('button');
+    expect(triggers[0]!.attributes('aria-expanded')).toBe('true');
+    expect(triggers[0]!.attributes('data-state')).toBe('open');
+    expect(triggers[1]!.attributes('aria-expanded')).toBe('false');
+    expect(triggers[1]!.attributes('data-state')).toBe('closed');
+    w.unmount();
+  });
+
+  it('content has role=region with aria-labelledby', () => {
+    const w = createAccordion({ defaultValue: 'a' });
+    const region = w.find('[role="region"]');
+    expect(region.attributes('aria-labelledby')).toBeDefined();
+    const trigger = w.findAll('button')[0]!;
+    expect(region.attributes('aria-labelledby')).toBe(trigger.attributes('id'));
+    w.unmount();
+  });
+
+  it('orientation reflects in data-orientation', () => {
+    const w = createAccordion({ orientation: 'horizontal' });
+    expect(w.find('[data-orientation="horizontal"]').exists()).toBe(true);
+    w.unmount();
+  });
+});
diff --git a/vue/primitives/src/accordion/context.ts b/vue/primitives/src/accordion/context.ts
new file mode 100644
index 0000000..be8f067
--- /dev/null
+++ b/vue/primitives/src/accordion/context.ts
@@ -0,0 +1,33 @@
+import type { ComputedRef, Ref } from 'vue';
+import { useContextFactory } from '@robonen/vue';
+
+export interface AccordionContext {
+  disabled: Ref<boolean>;
+  orientation: Ref<'horizontal' | 'vertical'>;
+  direction: Ref<'ltr' | 'rtl'>;
+  loop: Ref<boolean>;
+  collapsible: Ref<boolean>;
+  /** DOM-ordered trigger elements, sourced from the internal Collection. */
+  triggerElements: ComputedRef<HTMLElement[]>;
+  isOpen: (value: string) => boolean;
+  toggle: (value: string) => void;
+  onTriggerKeyDown: (event: KeyboardEvent, el: HTMLElement) => void;
+}
+
+export const {
+  inject: useAccordionContext,
+  provide: provideAccordionContext,
+} = useContextFactory<AccordionContext>('AccordionContext');
+
+export interface AccordionItemContext {
+  value: string;
+  open: ComputedRef<boolean>;
+  disabled: ComputedRef<boolean>;
+  triggerId: ComputedRef<string>;
+  contentId: ComputedRef<string>;
+}
+
+export const {
+  inject: useAccordionItemContext,
+  provide: provideAccordionItemContext,
+} = useContextFactory<AccordionItemContext>('AccordionItemContext');
diff --git a/vue/primitives/src/accordion/index.ts b/vue/primitives/src/accordion/index.ts
new file mode 100644
index 0000000..fbdb0c6
--- /dev/null
+++ b/vue/primitives/src/accordion/index.ts
@@ -0,0 +1,12 @@
+export { default as AccordionRoot } from './AccordionRoot.vue';
+export { default as AccordionItem } from './AccordionItem.vue';
+export { default as AccordionTrigger } from './AccordionTrigger.vue';
+export { default as AccordionContent } from './AccordionContent.vue';
+
+export { provideAccordionContext, useAccordionContext, provideAccordionItemContext, useAccordionItemContext } from './context';
+
+export type { AccordionRootProps } from './AccordionRoot.vue';
+export type { AccordionItemProps } from './AccordionItem.vue';
+export type { AccordionTriggerProps } from './AccordionTrigger.vue';
+export type { AccordionContentProps } from './AccordionContent.vue';
+export type { AccordionContext, AccordionItemContext } from './context';
diff --git a/vue/primitives/src/alert-dialog/AlertDialogAction.vue b/vue/primitives/src/alert-dialog/AlertDialogAction.vue
new file mode 100644
index 0000000..23f30e3
--- /dev/null
+++ b/vue/primitives/src/alert-dialog/AlertDialogAction.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface AlertDialogActionProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { DialogClose } from '../dialog';
+
+const { as = 'button' } = defineProps<AlertDialogActionProps>();
+</script>
+
+<template>
+  <DialogClose :as="as" data-alert-dialog-action>
+    <slot />
+  </DialogClose>
+</template>
diff --git a/vue/primitives/src/alert-dialog/AlertDialogCancel.vue b/vue/primitives/src/alert-dialog/AlertDialogCancel.vue
new file mode 100644
index 0000000..cdeb110
--- /dev/null
+++ b/vue/primitives/src/alert-dialog/AlertDialogCancel.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface AlertDialogCancelProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { DialogClose } from '../dialog';
+
+const { as = 'button' } = defineProps<AlertDialogCancelProps>();
+</script>
+
+<template>
+  <DialogClose :as="as" data-alert-dialog-cancel>
+    <slot />
+  </DialogClose>
+</template>
diff --git a/vue/primitives/src/alert-dialog/AlertDialogContent.vue b/vue/primitives/src/alert-dialog/AlertDialogContent.vue
new file mode 100644
index 0000000..f5b7ee0
--- /dev/null
+++ b/vue/primitives/src/alert-dialog/AlertDialogContent.vue
@@ -0,0 +1,43 @@
+<script lang="ts">
+import type { DialogContentEmits, DialogContentProps } from '../dialog';
+
+export interface AlertDialogContentProps extends Omit<DialogContentProps, 'role'> {}
+export type AlertDialogContentEmits = DialogContentEmits;
+</script>
+
+<script setup lang="ts">
+import { DialogContent } from '../dialog';
+
+const props = defineProps<AlertDialogContentProps>();
+const emit = defineEmits<AlertDialogContentEmits>();
+
+function onOpenAutoFocus(event: Event) {
+  emit('openAutoFocus', event);
+  if (event.defaultPrevented) return;
+  queueMicrotask(() => {
+    const content = document.querySelector<HTMLElement>('[data-alert-dialog-content]');
+    const cancel = content?.querySelector<HTMLElement>('[data-alert-dialog-cancel]');
+    if (cancel) {
+      event.preventDefault();
+      cancel.focus();
+    }
+  });
+}
+</script>
+
+<template>
+  <DialogContent
+    v-bind="props"
+    role="alertdialog"
+    data-alert-dialog-content
+    @open-auto-focus="onOpenAutoFocus"
+    @close-auto-focus="emit('closeAutoFocus', $event)"
+    @escape-key-down="emit('escapeKeyDown', $event)"
+    @pointer-down-outside="(e: PointerEvent | MouseEvent) => { e.preventDefault(); emit('pointerDownOutside', e); }"
+    @focus-outside="(e: FocusEvent) => { e.preventDefault(); emit('focusOutside', e); }"
+    @interact-outside="emit('interactOutside', $event)"
+    @dismiss="emit('dismiss')"
+  >
+    <slot />
+  </DialogContent>
+</template>
diff --git a/vue/primitives/src/alert-dialog/AlertDialogRoot.vue b/vue/primitives/src/alert-dialog/AlertDialogRoot.vue
new file mode 100644
index 0000000..af3928c
--- /dev/null
+++ b/vue/primitives/src/alert-dialog/AlertDialogRoot.vue
@@ -0,0 +1,25 @@
+<script lang="ts">
+import type { DialogRootProps } from '../dialog';
+
+export interface AlertDialogRootProps extends Omit<DialogRootProps, 'modal'> {}
+</script>
+
+<script setup lang="ts">
+import { DialogRoot } from '../dialog';
+
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps<AlertDialogRootProps>();
+const openModel = defineModel<boolean | undefined>('open', { default: undefined });
+</script>
+
+<template>
+  <DialogRoot
+    :default-open="props.defaultOpen"
+    :modal="true"
+    :open="openModel"
+    @update:open="openModel = $event"
+  >
+    <slot :open="openModel" />
+  </DialogRoot>
+</template>
diff --git a/vue/primitives/src/alert-dialog/__test__/AlertDialog.test.ts b/vue/primitives/src/alert-dialog/__test__/AlertDialog.test.ts
new file mode 100644
index 0000000..a66c4c7
--- /dev/null
+++ b/vue/primitives/src/alert-dialog/__test__/AlertDialog.test.ts
@@ -0,0 +1,118 @@
+import { mount } from '@vue/test-utils';
+import type { VueWrapper } from '@vue/test-utils';
+import { afterEach, describe, expect, it } from 'vitest';
+import { defineComponent, h, nextTick, ref } from 'vue';
+import {
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogRoot,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '../index';
+
+const wrappers: Array<VueWrapper<any>> = [];
+
+afterEach(() => {
+  while (wrappers.length) wrappers.pop()!.unmount();
+  document.body.innerHTML = '';
+  document.body.removeAttribute('style');
+  delete document.body.dataset['dismissableBlocking'];
+});
+
+function track<T extends VueWrapper<any>>(w: T): T {
+  wrappers.push(w);
+  return w;
+}
+
+function mountAlert(initialOpen = true) {
+  const open = ref(initialOpen);
+  const Harness = defineComponent({
+    setup() {
+      return () => h(
+        AlertDialogRoot,
+        {
+          open: open.value,
+          'onUpdate:open': (v: boolean | undefined) => { open.value = v!; },
+        },
+        {
+          default: () => [
+            h(AlertDialogTrigger, null, { default: () => 'Open' }),
+            h(AlertDialogPortal, null, {
+              default: () => [
+                h(AlertDialogOverlay),
+                h(AlertDialogContent, null, {
+                  default: () => [
+                    h(AlertDialogTitle, null, { default: () => 'Are you sure?' }),
+                    h(AlertDialogDescription, null, { default: () => 'This cannot be undone.' }),
+                    h(AlertDialogCancel, null, { default: () => 'Cancel' }),
+                    h(AlertDialogAction, null, { default: () => 'OK' }),
+                  ],
+                }),
+              ],
+            }),
+          ],
+        },
+      );
+    },
+  });
+  const w = track(mount(Harness, { attachTo: document.body }));
+  return { wrapper: w, open };
+}
+
+describe('AlertDialog', () => {
+  it('renders content with role="alertdialog"', async () => {
+    mountAlert(true);
+    await nextTick();
+    await nextTick();
+    const content = document.querySelector('[data-alert-dialog-content]');
+    expect(content).toBeTruthy();
+    expect(content!.getAttribute('role')).toBe('alertdialog');
+  });
+
+  it('labels content via Title and describes via Description', async () => {
+    mountAlert(true);
+    await nextTick();
+    await nextTick();
+    const content = document.querySelector<HTMLElement>('[data-alert-dialog-content]')!;
+    const labelledby = content.getAttribute('aria-labelledby');
+    const describedby = content.getAttribute('aria-describedby');
+    expect(labelledby).toMatch(/dialog-title/);
+    expect(describedby).toMatch(/dialog-description/);
+    expect(document.getElementById(labelledby!)?.textContent).toBe('Are you sure?');
+    expect(document.getElementById(describedby!)?.textContent).toBe('This cannot be undone.');
+  });
+
+  it('Cancel button closes the dialog', async () => {
+    const { open } = mountAlert(true);
+    await nextTick();
+    await nextTick();
+    const cancel = document.querySelector<HTMLButtonElement>('[data-alert-dialog-cancel]')!;
+    cancel.click();
+    await nextTick();
+    await nextTick();
+    expect(open.value).toBe(false);
+  });
+
+  it('Action button closes the dialog', async () => {
+    const { open } = mountAlert(true);
+    await nextTick();
+    await nextTick();
+    const action = document.querySelector<HTMLButtonElement>('[data-alert-dialog-action]')!;
+    action.click();
+    await nextTick();
+    await nextTick();
+    expect(open.value).toBe(false);
+  });
+
+  it('Cancel and Action carry data attributes', async () => {
+    mountAlert(true);
+    await nextTick();
+    await nextTick();
+    expect(document.querySelector('[data-alert-dialog-cancel]')).toBeTruthy();
+    expect(document.querySelector('[data-alert-dialog-action]')).toBeTruthy();
+  });
+});
diff --git a/vue/primitives/src/alert-dialog/index.ts b/vue/primitives/src/alert-dialog/index.ts
new file mode 100644
index 0000000..761d675
--- /dev/null
+++ b/vue/primitives/src/alert-dialog/index.ts
@@ -0,0 +1,11 @@
+export { DialogDescription as AlertDialogDescription, DialogOverlay as AlertDialogOverlay, DialogPortal as AlertDialogPortal, DialogTitle as AlertDialogTitle, DialogTrigger as AlertDialogTrigger } from '../dialog';
+export { default as AlertDialogAction } from './AlertDialogAction.vue';
+export { default as AlertDialogCancel } from './AlertDialogCancel.vue';
+export { default as AlertDialogContent } from './AlertDialogContent.vue';
+
+export { default as AlertDialogRoot } from './AlertDialogRoot.vue';
+
+export type { AlertDialogActionProps } from './AlertDialogAction.vue';
+export type { AlertDialogCancelProps } from './AlertDialogCancel.vue';
+export type { AlertDialogContentEmits, AlertDialogContentProps } from './AlertDialogContent.vue';
+export type { AlertDialogRootProps } from './AlertDialogRoot.vue';
diff --git a/vue/primitives/src/aspect-ratio/AspectRatio.vue b/vue/primitives/src/aspect-ratio/AspectRatio.vue
new file mode 100644
index 0000000..940ed27
--- /dev/null
+++ b/vue/primitives/src/aspect-ratio/AspectRatio.vue
@@ -0,0 +1,41 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface AspectRatioProps extends PrimitiveProps {
+  /**
+   * Desired width-to-height ratio (e.g. `16 / 9`, `1`, `4 / 3`).
+   * @default 1
+   */
+  ratio?: number;
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+
+useForwardExpose();
+
+const { ratio = 1, as = 'div' } = defineProps<AspectRatioProps>();
+
+const wrapperStyle = {
+  position: 'relative' as const,
+  width: '100%',
+  paddingBottom: `${(1 / ratio) * 100}%`,
+};
+
+// Hoisted constant — the inner style never depends on props, so a single
+// module-level object is reused across all instances.
+const INNER_STYLE = {
+  position: 'absolute' as const,
+  inset: 0,
+};
+</script>
+
+<template>
+  <div :style="wrapperStyle" data-aspect-ratio-wrapper>
+    <Primitive :as="as" :style="INNER_STYLE" :data-aspect-ratio="true">
+      <slot />
+    </Primitive>
+  </div>
+</template>
diff --git a/vue/primitives/src/aspect-ratio/__test__/AspectRatio.test.ts b/vue/primitives/src/aspect-ratio/__test__/AspectRatio.test.ts
new file mode 100644
index 0000000..89eb302
--- /dev/null
+++ b/vue/primitives/src/aspect-ratio/__test__/AspectRatio.test.ts
@@ -0,0 +1,24 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import { AspectRatio } from '../index';
+
+describe('AspectRatio', () => {
+  it('renders with default 1:1 ratio', () => {
+    const wrapper = mount(AspectRatio);
+    const outer = wrapper.element as HTMLElement;
+    expect(outer.style.paddingBottom).toBe('100%');
+  });
+
+  it('computes padding-bottom from ratio', () => {
+    const wrapper = mount(AspectRatio, { props: { ratio: 16 / 9 } });
+    const outer = wrapper.element as HTMLElement;
+    expect(outer.style.paddingBottom).toMatch(/^56\.25%$/);
+  });
+
+  it('places inner element absolutely covering the wrapper', () => {
+    const wrapper = mount(AspectRatio, { props: { ratio: 4 / 3 }, slots: { default: '<img />' } });
+    const inner = wrapper.element.firstElementChild as HTMLElement;
+    expect(inner.style.position).toBe('absolute');
+    expect(inner.getAttribute('data-aspect-ratio')).toBe('true');
+  });
+});
diff --git a/vue/primitives/src/aspect-ratio/index.ts b/vue/primitives/src/aspect-ratio/index.ts
new file mode 100644
index 0000000..a900beb
--- /dev/null
+++ b/vue/primitives/src/aspect-ratio/index.ts
@@ -0,0 +1,2 @@
+export { default as AspectRatio } from './AspectRatio.vue';
+export type { AspectRatioProps } from './AspectRatio.vue';
diff --git a/vue/primitives/src/avatar/AvatarFallback.vue b/vue/primitives/src/avatar/AvatarFallback.vue
new file mode 100644
index 0000000..f8e80f7
--- /dev/null
+++ b/vue/primitives/src/avatar/AvatarFallback.vue
@@ -0,0 +1,57 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface AvatarFallbackProps extends PrimitiveProps {
+
+  /** Delay in ms before rendering the fallback (avoids flicker on fast networks). */
+  delayMs?: number;
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
+import { useAvatarContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'span', delayMs = 0 } = defineProps<AvatarFallbackProps>();
+
+const { forwardRef } = useForwardExpose();
+
+const ctx = useAvatarContext();
+
+const canShow = ref<boolean>(delayMs === 0);
+let timer: ReturnType<typeof setTimeout> | null = null;
+
+watch(() => ctx.imageLoadingStatus.value, (status) => {
+  if (status === 'loaded') {
+    canShow.value = false;
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+    return;
+  }
+  if (delayMs === 0) {
+    canShow.value = true;
+    return;
+  }
+  if (timer) clearTimeout(timer);
+  canShow.value = false;
+  timer = setTimeout(() => {
+    canShow.value = true;
+  }, delayMs);
+}, { immediate: true });
+
+onBeforeUnmount(() => {
+  if (timer) clearTimeout(timer);
+});
+
+const shouldRender = computed(() => canShow.value && ctx.imageLoadingStatus.value !== 'loaded');
+</script>
+
+<template>
+  <Primitive :ref="forwardRef" v-if="shouldRender" :as="as">
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/avatar/AvatarImage.vue b/vue/primitives/src/avatar/AvatarImage.vue
new file mode 100644
index 0000000..3f8b0f7
--- /dev/null
+++ b/vue/primitives/src/avatar/AvatarImage.vue
@@ -0,0 +1,83 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+import type { AvatarImageLoadingStatus } from './context';
+
+export interface AvatarImageProps extends PrimitiveProps {
+
+  src?: string;
+  alt?: string;
+  /** Optional hook to reject loaded images by their dimensions/src. */
+  onLoadingStatusChange?: (status: AvatarImageLoadingStatus) => void;
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
+import { useAvatarContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'img', src, alt, onLoadingStatusChange } = defineProps<AvatarImageProps>();
+
+const { forwardRef } = useForwardExpose();
+
+const ctx = useAvatarContext();
+
+const status = ref<AvatarImageLoadingStatus>('idle');
+
+function setStatus(next: AvatarImageLoadingStatus) {
+  status.value = next;
+  ctx.onImageLoadingStatusChange(next);
+  onLoadingStatusChange?.(next);
+}
+
+let currentImage: HTMLImageElement | null = null;
+
+function load(nextSrc: string | undefined) {
+  if (currentImage) {
+    currentImage.onload = null;
+    currentImage.onerror = null;
+    currentImage = null;
+  }
+  if (!nextSrc) {
+    setStatus('error');
+    return;
+  }
+  if (globalThis.window === undefined) {
+    setStatus('loading');
+    return;
+  }
+  setStatus('loading');
+  const img = new globalThis.Image();
+  currentImage = img;
+  img.onload = () => {
+    if (currentImage === img) setStatus('loaded');
+  };
+  img.onerror = () => {
+    if (currentImage === img) setStatus('error');
+  };
+  img.src = nextSrc;
+}
+
+watch(() => src, load, { immediate: true });
+
+onBeforeUnmount(() => {
+  if (currentImage) {
+    currentImage.onload = null;
+    currentImage.onerror = null;
+    currentImage = null;
+  }
+});
+
+const shouldRender = computed(() => status.value === 'loaded');
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    v-if="shouldRender"
+    :src="src"
+    :alt="alt"
+  />
+</template>
diff --git a/vue/primitives/src/avatar/AvatarRoot.vue b/vue/primitives/src/avatar/AvatarRoot.vue
new file mode 100644
index 0000000..4a3bc9a
--- /dev/null
+++ b/vue/primitives/src/avatar/AvatarRoot.vue
@@ -0,0 +1,30 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface AvatarRootProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import type { AvatarImageLoadingStatus } from './context';
+import { Primitive } from '../primitive';
+import { provideAvatarContext } from './context';
+import { ref } from 'vue';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'span' } = defineProps<AvatarRootProps>();
+
+const { forwardRef } = useForwardExpose();
+
+const imageLoadingStatus = ref<AvatarImageLoadingStatus>('idle');
+
+provideAvatarContext({
+  imageLoadingStatus,
+  onImageLoadingStatusChange: (status) => { imageLoadingStatus.value = status; },
+});
+</script>
+
+<template>
+  <Primitive :ref="forwardRef" :as="as" :data-status="imageLoadingStatus">
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/avatar/__test__/Avatar.test.ts b/vue/primitives/src/avatar/__test__/Avatar.test.ts
new file mode 100644
index 0000000..f2a15a8
--- /dev/null
+++ b/vue/primitives/src/avatar/__test__/Avatar.test.ts
@@ -0,0 +1,93 @@
+import { mount } from '@vue/test-utils';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { defineComponent, h, nextTick } from 'vue';
+import { AvatarFallback, AvatarImage, AvatarRoot } from '../index';
+
+class MockImage {
+  onload: (() => void) | null = null;
+  onerror: (() => void) | null = null;
+  private _src = '';
+  set src(value: string) {
+    this._src = value;
+    queueMicrotask(() => {
+      if (value.includes('broken')) this.onerror?.();
+      else this.onload?.();
+    });
+  }
+
+  get src() { return this._src; }
+}
+
+describe('Avatar', () => {
+  beforeEach(() => {
+    vi.stubGlobal('Image', MockImage as unknown as typeof Image);
+  });
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it('renders fallback until image loads', async () => {
+    const w = mount(defineComponent({
+      setup: () => () => h(AvatarRoot, null, {
+        default: () => [
+          h(AvatarImage, { src: '/ok.png', alt: 'user' }),
+          h(AvatarFallback, { class: 'fb' }, { default: () => 'AB' }),
+        ],
+      }),
+    }));
+    expect(w.find('.fb').exists()).toBe(true);
+    expect(w.find('img').exists()).toBe(false);
+    await new Promise(r => queueMicrotask(() => r(null)));
+    await nextTick();
+    expect(w.find('img').exists()).toBe(true);
+    expect(w.find('img').attributes('src')).toBe('/ok.png');
+    expect(w.find('.fb').exists()).toBe(false);
+  });
+
+  it('keeps fallback visible on error', async () => {
+    const w = mount(defineComponent({
+      setup: () => () => h(AvatarRoot, null, {
+        default: () => [
+          h(AvatarImage, { src: '/broken.png' }),
+          h(AvatarFallback, { class: 'fb' }, { default: () => 'AB' }),
+        ],
+      }),
+    }));
+    await new Promise(r => queueMicrotask(() => r(null)));
+    await nextTick();
+    expect(w.find('img').exists()).toBe(false);
+    expect(w.find('.fb').exists()).toBe(true);
+  });
+
+  it('delays fallback rendering when delayMs is set', async () => {
+    vi.useFakeTimers();
+    const w = mount(defineComponent({
+      setup: () => () => h(AvatarRoot, null, {
+        default: () => [
+          h(AvatarFallback, { class: 'fb', delayMs: 500 }, { default: () => 'AB' }),
+        ],
+      }),
+    }));
+    expect(w.find('.fb').exists()).toBe(false);
+    vi.advanceTimersByTime(500);
+    await nextTick();
+    expect(w.find('.fb').exists()).toBe(true);
+    vi.useRealTimers();
+  });
+
+  it('sets data-status on the root element', async () => {
+    const w = mount(defineComponent({
+      setup: () => () => h(AvatarRoot, null, {
+        default: () => [
+          h(AvatarImage, { src: '/ok.png' }),
+          h(AvatarFallback, null, { default: () => '?' }),
+        ],
+      }),
+    }));
+    await nextTick();
+    expect(w.element.getAttribute('data-status')).toBe('loading');
+    await new Promise(r => queueMicrotask(() => r(null)));
+    await nextTick();
+    expect(w.element.getAttribute('data-status')).toBe('loaded');
+  });
+});
diff --git a/vue/primitives/src/avatar/context.ts b/vue/primitives/src/avatar/context.ts
new file mode 100644
index 0000000..e054f60
--- /dev/null
+++ b/vue/primitives/src/avatar/context.ts
@@ -0,0 +1,14 @@
+import type { Ref } from 'vue';
+import { useContextFactory } from '@robonen/vue';
+
+export type AvatarImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
+
+export interface AvatarContext {
+  imageLoadingStatus: Ref<AvatarImageLoadingStatus>;
+  onImageLoadingStatusChange: (status: AvatarImageLoadingStatus) => void;
+}
+
+const ctx = useContextFactory<AvatarContext>('AvatarContext');
+
+export const provideAvatarContext = ctx.provide;
+export const useAvatarContext = ctx.inject;
diff --git a/vue/primitives/src/avatar/index.ts b/vue/primitives/src/avatar/index.ts
new file mode 100644
index 0000000..9508ce3
--- /dev/null
+++ b/vue/primitives/src/avatar/index.ts
@@ -0,0 +1,8 @@
+export { default as AvatarRoot } from './AvatarRoot.vue';
+export { default as AvatarImage } from './AvatarImage.vue';
+export { default as AvatarFallback } from './AvatarFallback.vue';
+export type { AvatarRootProps } from './AvatarRoot.vue';
+export type { AvatarImageProps } from './AvatarImage.vue';
+export type { AvatarFallbackProps } from './AvatarFallback.vue';
+export { provideAvatarContext, useAvatarContext } from './context';
+export type { AvatarContext, AvatarImageLoadingStatus } from './context';
diff --git a/vue/primitives/src/calendar/CalendarCell.vue b/vue/primitives/src/calendar/CalendarCell.vue
new file mode 100644
index 0000000..0ac4c79
--- /dev/null
+++ b/vue/primitives/src/calendar/CalendarCell.vue
@@ -0,0 +1,43 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CalendarCellProps extends PrimitiveProps {
+  /** The date this cell represents. */
+  date: Date;
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Primitive } from '../primitive';
+import { useCalendarGridContext, useCalendarRootContext } from './context';
+import { isSameDay, isSameMonth } from './utils';
+
+const { as = 'td', date } = defineProps<CalendarCellProps>();
+
+const ctx = useCalendarRootContext();
+const gridCtx = useCalendarGridContext();
+
+const isSelected = computed(() => ctx.isDateSelected(date));
+const isDisabled = computed(() => ctx.isDateDisabled(date));
+const isUnavailable = computed(() => ctx.isDateUnavailable(date));
+const isOutsideView = computed(() => !isSameMonth(date, gridCtx.month.value));
+const isToday = computed(() => isSameDay(date, new Date()));
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    role="gridcell"
+    :aria-selected="isSelected ? true : undefined"
+    :aria-disabled="(isDisabled || isUnavailable) ? true : undefined"
+    :data-primitives-calendar-cell="''"
+    :data-selected="isSelected ? '' : undefined"
+    :data-disabled="isDisabled ? '' : undefined"
+    :data-unavailable="isUnavailable ? '' : undefined"
+    :data-outside-view="isOutsideView ? '' : undefined"
+    :data-today="isToday ? '' : undefined"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/calendar/CalendarCellTrigger.vue b/vue/primitives/src/calendar/CalendarCellTrigger.vue
new file mode 100644
index 0000000..c8e1fb4
--- /dev/null
+++ b/vue/primitives/src/calendar/CalendarCellTrigger.vue
@@ -0,0 +1,198 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CalendarCellTriggerProps extends PrimitiveProps {
+  /** The day this trigger represents. */
+  day: Date;
+  /** The month this trigger's cell belongs to. Defaults to grid context. */
+  month?: Date;
+}
+
+export interface CalendarCellTriggerSlotProps {
+  dayValue: string;
+  disabled: boolean;
+  selected: boolean;
+  today: boolean;
+  outsideView: boolean;
+  unavailable: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '@robonen/vue';
+import { computed, nextTick } from 'vue';
+import { Primitive } from '../primitive';
+import { useCalendarGridContext, useCalendarRootContext } from './context';
+import { addDays, addMonths, addYears, formatFullDate, isSameDay, isSameMonth } from './utils';
+
+const { as = 'div', day, month } = defineProps<CalendarCellTriggerProps>();
+
+defineSlots<{
+  default?: (props: CalendarCellTriggerSlotProps) => unknown;
+}>();
+
+const ctx = useCalendarRootContext();
+const gridCtx = useCalendarGridContext();
+const { forwardRef, currentElement } = useForwardExpose();
+
+const monthValue = computed(() => month ?? gridCtx.month.value);
+
+const isOutsideView = computed(() => !isSameMonth(day, monthValue.value));
+const isDisabled = computed(() => ctx.isDateDisabled(day));
+const isUnavailable = computed(() => ctx.isDateUnavailable(day));
+const isSelected = computed(() => ctx.isDateSelected(day));
+const isToday = computed(() => isSameDay(day, new Date()));
+
+const dayValue = computed(() => day.getDate().toLocaleString(ctx.locale.value));
+const labelText = computed(() => formatFullDate(day, ctx.locale.value));
+
+const isFocusedDate = computed(() => {
+  if (isOutsideView.value || isDisabled.value) return false;
+  if (ctx.focusedDate.value) return isSameDay(day, ctx.focusedDate.value);
+  // Fallback focusable: selected, else today (if in view), else first day of month.
+  if (ctx.modelValue.value && isSameMonth(ctx.modelValue.value, monthValue.value))
+    return isSameDay(day, ctx.modelValue.value);
+  const today = new Date();
+  if (isSameMonth(today, monthValue.value))
+    return isSameDay(day, today);
+  return day.getDate() === 1 && isSameMonth(day, monthValue.value);
+});
+
+function selectIfAllowed() {
+  if (ctx.readonly.value) return;
+  if (isDisabled.value || isUnavailable.value) return;
+  ctx.setDate(day);
+  ctx.focusedDate.value = day;
+}
+
+function handleClick() {
+  selectIfAllowed();
+}
+
+function focusByDataValue(target: Date) {
+  const parent = ctx.parentElement.value;
+  if (!parent) return false;
+  const el = parent.querySelector<HTMLElement>(
+    `[data-primitives-calendar-cell-trigger][data-value="${target.toISOString().slice(0, 10)}"]:not([data-outside-view])`,
+  );
+  if (el) {
+    el.focus();
+    return true;
+  }
+  return false;
+}
+
+function shiftFocus(target: Date) {
+  if (ctx.minValue.value && target < ctx.minValue.value) return;
+  if (ctx.maxValue.value && target > ctx.maxValue.value) return;
+  ctx.focusedDate.value = target;
+  if (focusByDataValue(target)) return;
+  // Crossed visible range — page placeholder and retry.
+  if (target > ctx.placeholder.value) {
+    if (ctx.isNextButtonDisabled()) return;
+    ctx.nextPage();
+  }
+  else {
+    if (ctx.isPrevButtonDisabled()) return;
+    ctx.prevPage();
+  }
+  nextTick(() => focusByDataValue(target));
+}
+
+function handleKeyDown(e: KeyboardEvent) {
+  if (isDisabled.value) return;
+  const rtl = ctx.dir.value === 'rtl' ? -1 : 1;
+  switch (e.key) {
+    case 'ArrowRight':
+      e.preventDefault();
+      shiftFocus(addDays(day, rtl));
+      break;
+    case 'ArrowLeft':
+      e.preventDefault();
+      shiftFocus(addDays(day, -rtl));
+      break;
+    case 'ArrowUp':
+      e.preventDefault();
+      shiftFocus(addDays(day, -7));
+      break;
+    case 'ArrowDown':
+      e.preventDefault();
+      shiftFocus(addDays(day, 7));
+      break;
+    case 'Home': {
+      e.preventDefault();
+      const dow = day.getDay();
+      const offset = (dow - ctx.weekStartsOn.value + 7) % 7;
+      shiftFocus(addDays(day, -offset));
+      break;
+    }
+    case 'End': {
+      e.preventDefault();
+      const dow = day.getDay();
+      const offset = (dow - ctx.weekStartsOn.value + 7) % 7;
+      shiftFocus(addDays(day, 6 - offset));
+      break;
+    }
+    case 'PageUp':
+      e.preventDefault();
+      shiftFocus(e.shiftKey ? addYears(day, -1) : addMonths(day, -1));
+      break;
+    case 'PageDown':
+      e.preventDefault();
+      shiftFocus(e.shiftKey ? addYears(day, 1) : addMonths(day, 1));
+      break;
+    case 'Enter':
+    case ' ':
+      e.preventDefault();
+      selectIfAllowed();
+      break;
+  }
+}
+
+function handleFocus() {
+  ctx.focusedDate.value = day;
+}
+
+const dataValue = computed(() => day.toISOString().slice(0, 10));
+const tabindex = computed(() => {
+  if (isFocusedDate.value) return 0;
+  if (isOutsideView.value || isDisabled.value) return undefined;
+  return -1;
+});
+
+defineExpose({ currentElement });
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    role="button"
+    :aria-label="labelText"
+    :aria-disabled="(isDisabled || isUnavailable) ? true : undefined"
+    :aria-selected="isSelected ? true : undefined"
+    :tabindex="tabindex"
+    :data-primitives-calendar-cell-trigger="''"
+    :data-value="dataValue"
+    :data-selected="isSelected ? '' : undefined"
+    :data-disabled="isDisabled ? '' : undefined"
+    :data-unavailable="isUnavailable ? '' : undefined"
+    :data-outside-view="isOutsideView ? '' : undefined"
+    :data-today="isToday ? '' : undefined"
+    :data-focused="isFocusedDate ? '' : undefined"
+    @click="handleClick"
+    @focus="handleFocus"
+    @keydown="handleKeyDown"
+  >
+    <slot
+      :day-value="dayValue"
+      :disabled="isDisabled"
+      :selected="isSelected"
+      :today="isToday"
+      :outside-view="isOutsideView"
+      :unavailable="isUnavailable"
+    >
+      {{ dayValue }}
+    </slot>
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/calendar/CalendarGrid.vue b/vue/primitives/src/calendar/CalendarGrid.vue
new file mode 100644
index 0000000..57252b2
--- /dev/null
+++ b/vue/primitives/src/calendar/CalendarGrid.vue
@@ -0,0 +1,40 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CalendarGridProps extends PrimitiveProps {
+  /** The month this grid represents. Defaults to the root placeholder's month. */
+  month?: Date;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, toRef } from 'vue';
+import { Primitive } from '../primitive';
+import { provideCalendarGridContext, useCalendarRootContext } from './context';
+
+const { as = 'table', month } = defineProps<CalendarGridProps>();
+
+const ctx = useCalendarRootContext();
+const monthRef = toRef(() => month ?? ctx.placeholder.value);
+
+provideCalendarGridContext({ month: monthRef });
+
+const readonly = computed(() => ctx.readonly.value || undefined);
+const disabled = computed(() => ctx.disabled.value || undefined);
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    role="grid"
+    tabindex="-1"
+    :aria-label="ctx.fullCalendarLabel.value"
+    :aria-readonly="readonly ? true : undefined"
+    :aria-disabled="disabled ? true : undefined"
+    :data-primitives-calendar-grid="''"
+    :data-readonly="readonly ? '' : undefined"
+    :data-disabled="disabled ? '' : undefined"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/calendar/CalendarGridBody.vue b/vue/primitives/src/calendar/CalendarGridBody.vue
new file mode 100644
index 0000000..ead37d7
--- /dev/null
+++ b/vue/primitives/src/calendar/CalendarGridBody.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CalendarGridBodyProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+
+const { as = 'tbody' } = defineProps<CalendarGridBodyProps>();
+</script>
+
+<template>
+  <Primitive :as="as" :data-primitives-calendar-grid-body="''">
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/calendar/CalendarGridHead.vue b/vue/primitives/src/calendar/CalendarGridHead.vue
new file mode 100644
index 0000000..36e3ada
--- /dev/null
+++ b/vue/primitives/src/calendar/CalendarGridHead.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CalendarGridHeadProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+
+const { as = 'thead' } = defineProps<CalendarGridHeadProps>();
+</script>
+
+<template>
+  <Primitive :as="as" :data-primitives-calendar-grid-head="''">
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/calendar/CalendarGridRow.vue b/vue/primitives/src/calendar/CalendarGridRow.vue
new file mode 100644
index 0000000..efc887a
--- /dev/null
+++ b/vue/primitives/src/calendar/CalendarGridRow.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CalendarGridRowProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+
+const { as = 'tr' } = defineProps<CalendarGridRowProps>();
+</script>
+
+<template>
+  <Primitive :as="as" :data-primitives-calendar-grid-row="''">
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/calendar/CalendarHeadCell.vue b/vue/primitives/src/calendar/CalendarHeadCell.vue
new file mode 100644
index 0000000..110a3bc
--- /dev/null
+++ b/vue/primitives/src/calendar/CalendarHeadCell.vue
@@ -0,0 +1,31 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CalendarHeadCellProps extends PrimitiveProps {
+  /** The day this header cell represents — used for `aria-label`. */
+  day?: Date;
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Primitive } from '../primitive';
+import { useCalendarRootContext } from './context';
+import { formatWeekday } from './utils';
+
+const { as = 'th', day } = defineProps<CalendarHeadCellProps>();
+
+const ctx = useCalendarRootContext();
+const longLabel = computed(() => (day ? formatWeekday(day, ctx.locale.value, 'long') : undefined));
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    scope="col"
+    :aria-label="longLabel"
+    :data-primitives-calendar-head-cell="''"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/calendar/CalendarHeader.vue b/vue/primitives/src/calendar/CalendarHeader.vue
new file mode 100644
index 0000000..0bea929
--- /dev/null
+++ b/vue/primitives/src/calendar/CalendarHeader.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CalendarHeaderProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+
+const { as = 'div' } = defineProps<CalendarHeaderProps>();
+</script>
+
+<template>
+  <Primitive :as="as" :data-primitives-calendar-header="''">
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/calendar/CalendarHeading.vue b/vue/primitives/src/calendar/CalendarHeading.vue
new file mode 100644
index 0000000..0849a87
--- /dev/null
+++ b/vue/primitives/src/calendar/CalendarHeading.vue
@@ -0,0 +1,31 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CalendarHeadingProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useCalendarRootContext } from './context';
+
+const { as = 'div' } = defineProps<CalendarHeadingProps>();
+
+defineSlots<{
+  default?: (props: { headingValue: string }) => unknown;
+}>();
+
+const ctx = useCalendarRootContext();
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    aria-hidden="true"
+    :data-primitives-calendar-heading="''"
+    :data-disabled="ctx.disabled.value ? '' : undefined"
+  >
+    <slot :heading-value="ctx.headingValue.value">
+      {{ ctx.headingValue.value }}
+    </slot>
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/calendar/CalendarNext.vue b/vue/primitives/src/calendar/CalendarNext.vue
new file mode 100644
index 0000000..6491128
--- /dev/null
+++ b/vue/primitives/src/calendar/CalendarNext.vue
@@ -0,0 +1,45 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CalendarNextProps extends PrimitiveProps {
+  /** Override the root's `nextPage` for just this button. */
+  nextPage?: (placeholder: Date) => Date;
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Primitive } from '../primitive';
+import { useCalendarRootContext } from './context';
+
+const { as = 'button', nextPage: nextPageProp } = defineProps<CalendarNextProps>();
+
+defineSlots<{
+  default?: (props: { disabled: boolean }) => unknown;
+}>();
+
+const ctx = useCalendarRootContext();
+const disabled = computed(() => ctx.disabled.value || ctx.isNextButtonDisabled(nextPageProp));
+
+function handleClick() {
+  if (disabled.value) return;
+  ctx.nextPage(nextPageProp);
+}
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :type="as === 'button' ? 'button' : undefined"
+    aria-label="Next"
+    :aria-disabled="disabled || undefined"
+    :data-primitives-calendar-next="''"
+    :data-disabled="disabled ? '' : undefined"
+    :disabled="as === 'button' ? disabled : undefined"
+    @click="handleClick"
+  >
+    <slot :disabled="disabled">
+      Next
+    </slot>
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/calendar/CalendarPrev.vue b/vue/primitives/src/calendar/CalendarPrev.vue
new file mode 100644
index 0000000..f30f463
--- /dev/null
+++ b/vue/primitives/src/calendar/CalendarPrev.vue
@@ -0,0 +1,45 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CalendarPrevProps extends PrimitiveProps {
+  /** Override the root's `prevPage` for just this button. */
+  prevPage?: (placeholder: Date) => Date;
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Primitive } from '../primitive';
+import { useCalendarRootContext } from './context';
+
+const { as = 'button', prevPage: prevPageProp } = defineProps<CalendarPrevProps>();
+
+defineSlots<{
+  default?: (props: { disabled: boolean }) => unknown;
+}>();
+
+const ctx = useCalendarRootContext();
+const disabled = computed(() => ctx.disabled.value || ctx.isPrevButtonDisabled(prevPageProp));
+
+function handleClick() {
+  if (disabled.value) return;
+  ctx.prevPage(prevPageProp);
+}
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :type="as === 'button' ? 'button' : undefined"
+    aria-label="Previous"
+    :aria-disabled="disabled || undefined"
+    :data-primitives-calendar-prev="''"
+    :data-disabled="disabled ? '' : undefined"
+    :disabled="as === 'button' ? disabled : undefined"
+    @click="handleClick"
+  >
+    <slot :disabled="disabled">
+      Previous
+    </slot>
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/calendar/CalendarRoot.vue b/vue/primitives/src/calendar/CalendarRoot.vue
new file mode 100644
index 0000000..dd0e8b0
--- /dev/null
+++ b/vue/primitives/src/calendar/CalendarRoot.vue
@@ -0,0 +1,324 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+import type { CalendarMonth, WeekDayFormat } from './utils';
+
+export interface CalendarRootProps extends PrimitiveProps {
+  /** Uncontrolled default selected date. */
+  defaultValue?: Date;
+  /** Uncontrolled default placeholder (displayed month). */
+  defaultPlaceholder?: Date;
+  /** Minimum selectable date. */
+  minValue?: Date;
+  /** Maximum selectable date. */
+  maxValue?: Date;
+  /** Predicate marking a date as unavailable (not selectable). */
+  isDateUnavailable?: (date: Date) => boolean;
+  /** Predicate marking a date as disabled. */
+  isDateDisabled?: (date: Date) => boolean;
+  /** Prev/Next navigate by `numberOfMonths` instead of one month. @default false */
+  pagedNavigation?: boolean;
+  /** First day of week (0=Sun ... 6=Sat). @default 0 */
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  /** Width of localized weekday names. @default 'short' */
+  weekdayFormat?: WeekDayFormat;
+  /** Always render 6 weeks per month. @default true */
+  fixedWeeks?: boolean;
+  /** Number of months displayed simultaneously. @default 1 */
+  numberOfMonths?: number;
+  /** Disable the whole calendar. @default false */
+  disabled?: boolean;
+  /** Make the calendar read-only. @default false */
+  readonly?: boolean;
+  /** Auto-focus the calendar on mount. @default false */
+  initialFocus?: boolean;
+  /** Locale for `Intl` formatting. @default 'en' */
+  locale?: string;
+  /** Reading direction. */
+  dir?: 'ltr' | 'rtl';
+  /** Override "next page" navigation logic. */
+  nextPage?: (placeholder: Date) => Date;
+  /** Override "prev page" navigation logic. */
+  prevPage?: (placeholder: Date) => Date;
+  /** Calendar accessible label prefix. @default 'Calendar' */
+  calendarLabel?: string;
+}
+
+export interface CalendarRootEmits {
+  'update:modelValue': [date: Date | undefined];
+  'update:placeholder': [date: Date];
+}
+</script>
+
+<script setup lang="ts">
+import { useEventListener, useForwardExpose } from '@robonen/vue';
+import { computed, onMounted, ref, toRef, watch } from 'vue';
+import { Primitive } from '../primitive';
+import { provideCalendarRootContext } from './context';
+import {
+  addMonths,
+  addYears,
+  clamp,
+  createMonths,
+  formatMonthYear,
+  getWeekdayLabels,
+  isAfter,
+  isBefore,
+  isSameDay,
+  isSameMonth,
+  isDateUnavailable as isUnavailable,
+  toDateOnly,
+} from './utils';
+
+defineOptions({ inheritAttrs: false });
+
+const {
+  as = 'div',
+  defaultValue,
+  defaultPlaceholder,
+  minValue,
+  maxValue,
+  isDateUnavailable: propsIsDateUnavailable,
+  isDateDisabled: propsIsDateDisabled,
+  pagedNavigation = false,
+  weekStartsOn = 0,
+  weekdayFormat = 'short',
+  fixedWeeks = true,
+  numberOfMonths = 1,
+  disabled = false,
+  readonly = false,
+  initialFocus = false,
+  locale = 'en',
+  dir = 'ltr',
+  nextPage: propsNextPage,
+  prevPage: propsPrevPage,
+  calendarLabel = 'Calendar',
+} = defineProps<CalendarRootProps>();
+
+defineEmits<CalendarRootEmits>();
+
+defineSlots<{
+  default?: (props: {
+    date: Date;
+    grid: CalendarMonth[];
+    weekDays: string[];
+    weekStartsOn: number;
+    locale: string;
+    modelValue: Date | undefined;
+  }) => unknown;
+}>();
+
+const localValue = ref<Date | undefined>(defaultValue);
+const modelValue = defineModel<Date | undefined>('modelValue', {
+  default: undefined,
+  get: v => v ?? localValue.value,
+  set: (v) => {
+    localValue.value = v;
+    return v;
+  },
+});
+
+const localPlaceholder = ref<Date>(
+  toDateOnly(defaultPlaceholder ?? modelValue.value ?? new Date()),
+);
+const placeholder = defineModel<Date>('placeholder', {
+  default: undefined,
+  get: v => v ?? localPlaceholder.value,
+  set: (v) => {
+    localPlaceholder.value = toDateOnly(v);
+    return localPlaceholder.value;
+  },
+});
+
+const { forwardRef, currentElement: parentElement } = useForwardExpose();
+const focusedDate = ref<Date | undefined>();
+
+const localeRef = toRef(() => locale);
+const dirRef = toRef(() => dir);
+const weekStartsOnRef = toRef(() => weekStartsOn);
+const weekdayFormatRef = toRef(() => weekdayFormat);
+const fixedWeeksRef = toRef(() => fixedWeeks);
+const numberOfMonthsRef = toRef(() => numberOfMonths);
+const disabledRef = toRef(() => disabled);
+const readonlyRef = toRef(() => readonly);
+const pagedNavigationRef = toRef(() => pagedNavigation);
+const minValueRef = toRef(() => minValue);
+const maxValueRef = toRef(() => maxValue);
+
+const grid = computed<CalendarMonth[]>(() => createMonths({
+  date: placeholder.value,
+  numberOfMonths,
+  weekStartsOn,
+}));
+
+const weekDays = computed(() => getWeekdayLabels(weekStartsOn, locale, weekdayFormat));
+
+const headingValue = computed(() => {
+  const months = grid.value;
+  if (!months.length) return '';
+  if (months.length === 1) return formatMonthYear(months[0]!.value, locale);
+  const first = formatMonthYear(months[0]!.value, locale);
+  const last = formatMonthYear(months[months.length - 1]!.value, locale);
+  return `${first} - ${last}`;
+});
+
+const fullCalendarLabel = computed(() => `${calendarLabel}, ${headingValue.value}`);
+
+function isDateDisabled(date: Date): boolean {
+  if (disabled) return true;
+  if (propsIsDateDisabled?.(date)) return true;
+  if (minValue && isBefore(date, minValue)) return true;
+  if (maxValue && isAfter(date, maxValue)) return true;
+  return false;
+}
+
+function isDateUnavailableLocal(date: Date): boolean {
+  return isUnavailable(date, propsIsDateUnavailable, minValue, maxValue);
+}
+
+function isDateSelected(date: Date): boolean {
+  return modelValue.value ? isSameDay(modelValue.value, date) : false;
+}
+
+function isOutsideVisibleView(date: Date): boolean {
+  return !grid.value.some(m => isSameMonth(m.value, date));
+}
+
+const isInvalid = computed(() => {
+  if (!modelValue.value) return false;
+  return isDateDisabled(modelValue.value) || isDateUnavailableLocal(modelValue.value);
+});
+
+function setDate(date: Date | undefined) {
+  if (readonly) return;
+  if (date && (isDateDisabled(date) || isDateUnavailableLocal(date))) return;
+  modelValue.value = date ? toDateOnly(date) : undefined;
+}
+
+function setPlaceholder(date: Date) {
+  placeholder.value = clamp(date, minValue, maxValue);
+}
+
+function pageStep(): number {
+  return pagedNavigation ? numberOfMonths : 1;
+}
+
+function nextPage(fn?: (placeholder: Date) => Date) {
+  const fnToUse = fn ?? propsNextPage;
+  placeholder.value = fnToUse
+    ? toDateOnly(fnToUse(placeholder.value))
+    : addMonths(placeholder.value, pageStep());
+}
+function prevPage(fn?: (placeholder: Date) => Date) {
+  const fnToUse = fn ?? propsPrevPage;
+  placeholder.value = fnToUse
+    ? toDateOnly(fnToUse(placeholder.value))
+    : addMonths(placeholder.value, -pageStep());
+}
+function nextYear() {
+  placeholder.value = addYears(placeholder.value, 1);
+}
+function prevYear() {
+  placeholder.value = addYears(placeholder.value, -1);
+}
+
+function isNextButtonDisabled(fn?: (placeholder: Date) => Date): boolean {
+  if (disabled) return true;
+  if (!maxValue) return false;
+  const lastMonth = grid.value[grid.value.length - 1]?.value;
+  if (!lastMonth) return false;
+  const fnToUse = fn ?? propsNextPage;
+  const probe = fnToUse
+    ? toDateOnly(fnToUse(placeholder.value))
+    : addMonths(lastMonth, 1);
+  return isAfter(probe, maxValue);
+}
+function isPrevButtonDisabled(fn?: (placeholder: Date) => Date): boolean {
+  if (disabled) return true;
+  if (!minValue) return false;
+  const firstMonth = grid.value[0]?.value;
+  if (!firstMonth) return false;
+  const fnToUse = fn ?? propsPrevPage;
+  const probe = fnToUse
+    ? toDateOnly(fnToUse(placeholder.value))
+    : addMonths(firstMonth, -1);
+  return isBefore(probe, minValue);
+}
+
+watch(modelValue, (v) => {
+  if (v && !isSameMonth(v, placeholder.value))
+    placeholder.value = toDateOnly(v);
+});
+
+onMounted(() => {
+  if (!initialFocus || !parentElement.value) return;
+  const target = parentElement.value.querySelector<HTMLElement>(
+    '[data-primitives-calendar-cell-trigger][data-selected]'
+    + ',[data-primitives-calendar-cell-trigger][data-today]'
+    + ',[data-primitives-calendar-cell-trigger]:not([data-outside-view]):not([data-disabled])',
+  );
+  target?.focus();
+});
+
+useEventListener(parentElement, 'focusout', (e) => {
+  if (!parentElement.value?.contains(e.relatedTarget as Node | null))
+    focusedDate.value = undefined;
+});
+
+provideCalendarRootContext({
+  modelValue,
+  placeholder,
+  locale: localeRef,
+  dir: dirRef,
+  grid,
+  weekDays,
+  headingValue,
+  fullCalendarLabel,
+  weekStartsOn: weekStartsOnRef,
+  weekdayFormat: weekdayFormatRef,
+  fixedWeeks: fixedWeeksRef,
+  numberOfMonths: numberOfMonthsRef,
+  disabled: disabledRef,
+  readonly: readonlyRef,
+  pagedNavigation: pagedNavigationRef,
+  minValue: minValueRef,
+  maxValue: maxValueRef,
+  isDateDisabled,
+  isDateUnavailable: isDateUnavailableLocal,
+  isDateSelected,
+  isOutsideVisibleView,
+  isInvalid,
+  parentElement,
+  focusedDate,
+  setDate,
+  setPlaceholder,
+  nextPage,
+  prevPage,
+  nextYear,
+  prevYear,
+  isNextButtonDisabled,
+  isPrevButtonDisabled,
+});
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    role="application"
+    :aria-label="fullCalendarLabel"
+    :dir="dir"
+    :data-primitives-calendar-root="''"
+    :data-disabled="disabled ? '' : undefined"
+    :data-readonly="readonly ? '' : undefined"
+    :data-invalid="isInvalid ? '' : undefined"
+  >
+    <slot
+      :date="placeholder"
+      :grid="grid"
+      :week-days="weekDays"
+      :week-starts-on="weekStartsOn"
+      :locale="locale"
+      :model-value="modelValue"
+    />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/calendar/__test__/date-utils.test.ts b/vue/primitives/src/calendar/__test__/date-utils.test.ts
new file mode 100644
index 0000000..4ca9fc1
--- /dev/null
+++ b/vue/primitives/src/calendar/__test__/date-utils.test.ts
@@ -0,0 +1,46 @@
+import { describe, expect, it } from 'vitest';
+import {
+  addMonths,
+  getWeeks,
+  isDateUnavailable,
+  isSameDay,
+  startOfWeek,
+} from '../date-utils';
+
+describe('date-utils', () => {
+  it('getWeeks returns 6 rows × 7 cols', () => {
+    const weeks = getWeeks(new Date(2024, 0, 15), 0);
+    expect(weeks).toHaveLength(6);
+    for (const row of weeks)
+      expect(row).toHaveLength(7);
+  });
+
+  it('startOfWeek respects weekStartsOn', () => {
+    // 2024-01-10 is a Wednesday.
+    const wed = new Date(2024, 0, 10);
+    expect(startOfWeek(wed, 0).getDay()).toBe(0);
+    expect(startOfWeek(wed, 1).getDay()).toBe(1);
+  });
+
+  it('addMonths clamps Jan 31 → Feb 28/29', () => {
+    const r = addMonths(new Date(2023, 0, 31), 1);
+    expect(r.getMonth()).toBe(1);
+    expect(r.getDate()).toBe(28);
+  });
+
+  it('isSameDay ignores time component', () => {
+    const a = new Date(2024, 5, 1, 1, 2, 3);
+    const b = new Date(2024, 5, 1, 23, 59);
+    expect(isSameDay(a, b)).toBe(true);
+    expect(isSameDay(a, new Date(2024, 5, 2))).toBe(false);
+  });
+
+  it('isDateUnavailable honors min/max and predicate', () => {
+    const min = new Date(2024, 0, 5);
+    const max = new Date(2024, 0, 25);
+    expect(isDateUnavailable(new Date(2024, 0, 1), undefined, min, max)).toBe(true);
+    expect(isDateUnavailable(new Date(2024, 0, 31), undefined, min, max)).toBe(true);
+    expect(isDateUnavailable(new Date(2024, 0, 10), undefined, min, max)).toBe(false);
+    expect(isDateUnavailable(new Date(2024, 0, 10), d => d.getDate() === 10)).toBe(true);
+  });
+});
diff --git a/vue/primitives/src/calendar/context.ts b/vue/primitives/src/calendar/context.ts
new file mode 100644
index 0000000..81f462b
--- /dev/null
+++ b/vue/primitives/src/calendar/context.ts
@@ -0,0 +1,67 @@
+import type { ComputedRef, Ref } from 'vue';
+import type { CalendarMonth, WeekDayFormat } from './utils';
+import { useContextFactory } from '@robonen/vue';
+
+export interface CalendarRootContext {
+  /** Currently selected date (or undefined). */
+  modelValue: Ref<Date | undefined>;
+  /** Displayed month anchor. */
+  placeholder: Ref<Date>;
+  /** Locale identifier for `Intl` formatting. */
+  locale: Ref<string>;
+  /** Reading direction. */
+  dir: Ref<'ltr' | 'rtl'>;
+
+  /** Computed grid of months (each with 6×7 weeks). */
+  grid: ComputedRef<CalendarMonth[]>;
+  /** Localized weekday labels (length 7). */
+  weekDays: ComputedRef<string[]>;
+  /** Heading text (month + year). */
+  headingValue: ComputedRef<string>;
+  /** Full aria-label for the calendar region. */
+  fullCalendarLabel: ComputedRef<string>;
+
+  weekStartsOn: Ref<0 | 1 | 2 | 3 | 4 | 5 | 6>;
+  weekdayFormat: Ref<WeekDayFormat>;
+  fixedWeeks: Ref<boolean>;
+  numberOfMonths: Ref<number>;
+  disabled: Ref<boolean>;
+  readonly: Ref<boolean>;
+  pagedNavigation: Ref<boolean>;
+
+  minValue: Ref<Date | undefined>;
+  maxValue: Ref<Date | undefined>;
+
+  isDateDisabled: (date: Date) => boolean;
+  isDateUnavailable: (date: Date) => boolean;
+  isDateSelected: (date: Date) => boolean;
+  isOutsideVisibleView: (date: Date) => boolean;
+  isInvalid: ComputedRef<boolean>;
+
+  /** Element hosting the calendar grid(s); used for keyboard focus shifting. */
+  parentElement: Ref<HTMLElement | undefined>;
+  /** Currently focused day, drives `tabindex`. */
+  focusedDate: Ref<Date | undefined>;
+
+  setDate: (date: Date | undefined) => void;
+  setPlaceholder: (date: Date) => void;
+  nextPage: (fn?: (placeholder: Date) => Date) => void;
+  prevPage: (fn?: (placeholder: Date) => Date) => void;
+  nextYear: () => void;
+  prevYear: () => void;
+  isNextButtonDisabled: (fn?: (placeholder: Date) => Date) => boolean;
+  isPrevButtonDisabled: (fn?: (placeholder: Date) => Date) => boolean;
+}
+
+const ctx = useContextFactory<CalendarRootContext>('CalendarRoot');
+export const provideCalendarRootContext = ctx.provide;
+export const useCalendarRootContext = ctx.inject;
+
+export interface CalendarGridContext {
+  /** The month this `<table>` is rendering. */
+  month: Ref<Date>;
+}
+
+const gridCtx = useContextFactory<CalendarGridContext>('CalendarGrid');
+export const provideCalendarGridContext = gridCtx.provide;
+export const useCalendarGridContext = gridCtx.inject;
diff --git a/vue/primitives/src/calendar/date-utils.ts b/vue/primitives/src/calendar/date-utils.ts
new file mode 100644
index 0000000..941a427
--- /dev/null
+++ b/vue/primitives/src/calendar/date-utils.ts
@@ -0,0 +1,125 @@
+export type WeekDayFormat = 'narrow' | 'short' | 'long';
+
+export interface DateRange {
+  start?: Date;
+  end?: Date;
+}
+
+export function toDateOnly(d: Date): Date {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0, 0, 0, 0);
+}
+
+export function isSameDay(a: Date, b: Date): boolean {
+  return a.getFullYear() === b.getFullYear()
+    && a.getMonth() === b.getMonth()
+    && a.getDate() === b.getDate();
+}
+
+export function isSameMonth(a: Date, b: Date): boolean {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+}
+
+export function isBefore(a: Date, b: Date): boolean {
+  return toDateOnly(a).getTime() < toDateOnly(b).getTime();
+}
+
+export function isAfter(a: Date, b: Date): boolean {
+  return toDateOnly(a).getTime() > toDateOnly(b).getTime();
+}
+
+export function addDays(d: Date, n: number): Date {
+  const r = toDateOnly(d);
+  r.setDate(r.getDate() + n);
+  return r;
+}
+
+export function addMonths(d: Date, n: number): Date {
+  const r = toDateOnly(d);
+  const day = r.getDate();
+  // Move to first of month, shift, then clamp day to month length.
+  r.setDate(1);
+  r.setMonth(r.getMonth() + n);
+  const lastDay = new Date(r.getFullYear(), r.getMonth() + 1, 0).getDate();
+  r.setDate(Math.min(day, lastDay));
+  return r;
+}
+
+export function addYears(d: Date, n: number): Date {
+  return addMonths(d, n * 12);
+}
+
+export function startOfMonth(d: Date): Date {
+  return new Date(d.getFullYear(), d.getMonth(), 1, 0, 0, 0, 0);
+}
+
+export function endOfMonth(d: Date): Date {
+  return new Date(d.getFullYear(), d.getMonth() + 1, 0, 0, 0, 0, 0);
+}
+
+export function getDaysInMonth(d: Date): number {
+  return endOfMonth(d).getDate();
+}
+
+export function startOfWeek(d: Date, weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6 = 0): Date {
+  const r = toDateOnly(d);
+  const day = r.getDay();
+  const diff = (day - weekStartsOn + 7) % 7;
+  r.setDate(r.getDate() - diff);
+  return r;
+}
+
+/**
+ * Returns a 6×7 matrix of dates for the month containing `month`,
+ * padded with leading/trailing days from adjacent months.
+ */
+export function getWeeks(month: Date, weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6 = 0): Date[][] {
+  const first = startOfMonth(month);
+  const gridStart = startOfWeek(first, weekStartsOn);
+  const weeks: Date[][] = [];
+  for (let w = 0; w < 6; w++) {
+    const row: Date[] = [];
+    for (let i = 0; i < 7; i++)
+      row.push(addDays(gridStart, w * 7 + i));
+    weeks.push(row);
+  }
+  return weeks;
+}
+
+export function clamp(date: Date, min?: Date, max?: Date): Date {
+  if (min && isBefore(date, min))
+    return toDateOnly(min);
+  if (max && isAfter(date, max))
+    return toDateOnly(max);
+  return toDateOnly(date);
+}
+
+export function isDateUnavailable(
+  d: Date,
+  predicate?: (d: Date) => boolean,
+  min?: Date,
+  max?: Date,
+): boolean {
+  if (min && isBefore(d, min))
+    return true;
+  if (max && isAfter(d, max))
+    return true;
+  if (predicate?.(d))
+    return true;
+  return false;
+}
+
+export function formatDate(
+  d: Date,
+  opts: Intl.DateTimeFormatOptions,
+  locale: string,
+): string {
+  return new Intl.DateTimeFormat(locale, opts).format(d);
+}
+
+export function formatWeekday(
+  d: Date,
+  locale: string,
+  width: WeekDayFormat = 'short',
+): string {
+  return new Intl.DateTimeFormat(locale, { weekday: width }).format(d);
+}
diff --git a/vue/primitives/src/calendar/index.ts b/vue/primitives/src/calendar/index.ts
new file mode 100644
index 0000000..e56ba3d
--- /dev/null
+++ b/vue/primitives/src/calendar/index.ts
@@ -0,0 +1,42 @@
+export { default as CalendarRoot } from './CalendarRoot.vue';
+export { default as CalendarHeader } from './CalendarHeader.vue';
+export { default as CalendarHeading } from './CalendarHeading.vue';
+export { default as CalendarPrev } from './CalendarPrev.vue';
+export { default as CalendarNext } from './CalendarNext.vue';
+export { default as CalendarGrid } from './CalendarGrid.vue';
+export { default as CalendarGridHead } from './CalendarGridHead.vue';
+export { default as CalendarGridBody } from './CalendarGridBody.vue';
+export { default as CalendarGridRow } from './CalendarGridRow.vue';
+export { default as CalendarHeadCell } from './CalendarHeadCell.vue';
+export { default as CalendarCell } from './CalendarCell.vue';
+export { default as CalendarCellTrigger } from './CalendarCellTrigger.vue';
+
+export {
+  provideCalendarRootContext,
+  useCalendarRootContext,
+  provideCalendarGridContext,
+  useCalendarGridContext,
+} from './context';
+
+export type {
+  CalendarRootContext,
+  CalendarGridContext,
+} from './context';
+
+export * from './utils';
+
+export type { CalendarRootEmits, CalendarRootProps } from './CalendarRoot.vue';
+export type { CalendarHeaderProps } from './CalendarHeader.vue';
+export type { CalendarHeadingProps } from './CalendarHeading.vue';
+export type { CalendarPrevProps } from './CalendarPrev.vue';
+export type { CalendarNextProps } from './CalendarNext.vue';
+export type { CalendarGridProps } from './CalendarGrid.vue';
+export type { CalendarGridHeadProps } from './CalendarGridHead.vue';
+export type { CalendarGridBodyProps } from './CalendarGridBody.vue';
+export type { CalendarGridRowProps } from './CalendarGridRow.vue';
+export type { CalendarHeadCellProps } from './CalendarHeadCell.vue';
+export type { CalendarCellProps } from './CalendarCell.vue';
+export type {
+  CalendarCellTriggerProps,
+  CalendarCellTriggerSlotProps,
+} from './CalendarCellTrigger.vue';
diff --git a/vue/primitives/src/calendar/utils.ts b/vue/primitives/src/calendar/utils.ts
new file mode 100644
index 0000000..f3f347e
--- /dev/null
+++ b/vue/primitives/src/calendar/utils.ts
@@ -0,0 +1,64 @@
+import type { WeekDayFormat } from './date-utils';
+import {
+  addMonths,
+  formatDate,
+  formatWeekday,
+  getWeeks,
+  startOfMonth,
+  startOfWeek,
+} from './date-utils';
+
+export * from './date-utils';
+
+export interface CalendarMonth {
+  /** First day of this month (date-only). */
+  value: Date;
+  /** 6×7 grid of dates including leading/trailing adjacent-month days. */
+  weeks: Date[][];
+}
+
+export interface CreateMonthsOptions {
+  date: Date;
+  numberOfMonths: number;
+  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+}
+
+/** Build N consecutive months starting from `date`'s month. */
+export function createMonths(opts: CreateMonthsOptions): CalendarMonth[] {
+  const months: CalendarMonth[] = [];
+  for (let i = 0; i < opts.numberOfMonths; i++) {
+    const m = startOfMonth(addMonths(opts.date, i));
+    months.push({ value: m, weeks: getWeeks(m, opts.weekStartsOn) });
+  }
+  return months;
+}
+
+/** Localized short/narrow/long weekday names starting from `weekStartsOn`. */
+export function getWeekdayLabels(
+  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6,
+  locale: string,
+  width: WeekDayFormat,
+): string[] {
+  // Pick any known Sunday (1970-01-04 is a Sunday) as anchor.
+  const anchorSunday = new Date(1970, 0, 4);
+  const start = startOfWeek(anchorSunday, weekStartsOn);
+  const labels: string[] = [];
+  for (let i = 0; i < 7; i++) {
+    const d = new Date(start);
+    d.setDate(start.getDate() + i);
+    labels.push(formatWeekday(d, locale, width));
+  }
+  return labels;
+}
+
+export function formatMonthYear(d: Date, locale: string): string {
+  return formatDate(d, { month: 'long', year: 'numeric' }, locale);
+}
+
+export function formatFullDate(d: Date, locale: string): string {
+  return formatDate(
+    d,
+    { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' },
+    locale,
+  );
+}
diff --git a/vue/primitives/src/checkbox/CheckboxIndicator.vue b/vue/primitives/src/checkbox/CheckboxIndicator.vue
new file mode 100644
index 0000000..14baabd
--- /dev/null
+++ b/vue/primitives/src/checkbox/CheckboxIndicator.vue
@@ -0,0 +1,32 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+export interface CheckboxIndicatorProps extends PrimitiveProps {
+  /** Keep mounted even when unchecked (for CSS exit animations). */
+  forceMount?: boolean;
+
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useCheckboxContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'span', forceMount = false } = defineProps<CheckboxIndicatorProps>();
+const ctx = useCheckboxContext();
+
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    v-if="forceMount || ctx.checked.value !== false"
+    :data-state="ctx.checked.value === 'indeterminate' ? 'indeterminate' : (ctx.checked.value ? 'checked' : 'unchecked')"
+    :data-disabled="ctx.disabled.value ? '' : undefined"
+    style="pointer-events: none;"
+  >
+    <slot :checked="ctx.checked.value" />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/checkbox/CheckboxRoot.vue b/vue/primitives/src/checkbox/CheckboxRoot.vue
new file mode 100644
index 0000000..05654e4
--- /dev/null
+++ b/vue/primitives/src/checkbox/CheckboxRoot.vue
@@ -0,0 +1,99 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+import type { CheckedState } from './context';
+
+export interface CheckboxRootProps extends PrimitiveProps {
+  /** Uncontrolled initial checked state. */
+  defaultChecked?: CheckedState;
+  /** Disable interaction. */
+  disabled?: boolean;
+  /** Mark associated hidden input as required. */
+  required?: boolean;
+  /** Hidden input name attribute. */
+  name?: string;
+  /** Hidden input value attribute. @default 'on' */
+  value?: string;
+}
+
+export interface CheckboxRootEmits {
+  checkedChange: [value: CheckedState];
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { ref, toRef, watch } from 'vue';
+import { provideCheckboxContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+const { disabled = false, required = false, value = 'on', defaultChecked, name, as = 'button' } = defineProps<CheckboxRootProps>();
+
+const { forwardRef } = useForwardExpose();
+
+const emit = defineEmits<CheckboxRootEmits>();
+const model = defineModel<CheckedState | undefined>('checked', { default: undefined });
+
+const localChecked = ref<CheckedState>(model.value ?? defaultChecked ?? false);
+
+watch(model, (v) => {
+  if (v === undefined) return;
+  if (v !== localChecked.value) localChecked.value = v;
+});
+
+function setChecked(v: CheckedState): void {
+  localChecked.value = v;
+  model.value = v;
+  emit('checkedChange', v);
+}
+
+function toggle(): void {
+  if (disabled) return;
+  setChecked(localChecked.value !== true);
+}
+
+function onKeyDown(event: KeyboardEvent): void {
+  // Prevent form submit on Enter when inside a form.
+  if (event.key === 'Enter') event.preventDefault();
+}
+
+provideCheckboxContext({
+  // `localChecked` is already a `Ref<CheckedState>`; forward directly without
+  // wrapping in a computed. `toRef(() => disabled)` gives a reactive identity
+  // passthrough without `ReactiveEffect`/cache.
+  checked: localChecked,
+  disabled: toRef(() => disabled),
+});
+
+// Inlined in template — no need for a cached computed for a single call site.
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :type="as === 'button' ? 'button' : undefined"
+    role="checkbox"
+    :aria-checked="localChecked === 'indeterminate' ? 'mixed' : localChecked"
+    :aria-required="required || undefined"
+    :aria-disabled="disabled || undefined"
+    :data-state="localChecked === 'indeterminate' ? 'indeterminate' : (localChecked ? 'checked' : 'unchecked')"
+    :data-disabled="disabled ? '' : undefined"
+    :disabled="disabled || undefined"
+    @click="toggle"
+    @keydown="onKeyDown"
+  >
+    <slot :checked="localChecked" />
+    <input
+      v-if="name"
+      type="checkbox"
+      tabindex="-1"
+      aria-hidden="true"
+      :name="name"
+      :value="value"
+      :checked="localChecked === true"
+      :required="required"
+      :disabled="disabled"
+      style="position: absolute; pointer-events: none; opacity: 0; margin: 0; transform: translateX(-100%);"
+    >
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/checkbox/__test__/Checkbox.test.ts b/vue/primitives/src/checkbox/__test__/Checkbox.test.ts
new file mode 100644
index 0000000..f936041
--- /dev/null
+++ b/vue/primitives/src/checkbox/__test__/Checkbox.test.ts
@@ -0,0 +1,109 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import { defineComponent, h, nextTick, ref } from 'vue';
+import { CheckboxIndicator, CheckboxRoot } from '../index';
+
+function mountCheckbox(props: Record<string, unknown> = {}) {
+  return mount(CheckboxRoot, {
+    attachTo: document.body,
+    props,
+    slots: {
+      default: () => h(CheckboxIndicator, null, { default: () => '✓' }),
+    },
+  });
+}
+
+describe('Checkbox', () => {
+  it('renders role="checkbox" with aria-checked="false" initially', () => {
+    const w = mountCheckbox();
+    const el = w.element;
+    expect(el.getAttribute('role')).toBe('checkbox');
+    expect(el.getAttribute('aria-checked')).toBe('false');
+    expect(el.getAttribute('data-state')).toBe('unchecked');
+    w.unmount();
+  });
+
+  it('toggles on click', async () => {
+    const w = mountCheckbox();
+    const el = w.element as HTMLElement;
+    el.click();
+    await nextTick();
+    expect(el.getAttribute('aria-checked')).toBe('true');
+    expect(el.getAttribute('data-state')).toBe('checked');
+    el.click();
+    await nextTick();
+    expect(el.getAttribute('aria-checked')).toBe('false');
+    w.unmount();
+  });
+
+  it('honours defaultChecked', () => {
+    const w = mountCheckbox({ defaultChecked: true });
+    expect(w.element.getAttribute('aria-checked')).toBe('true');
+    w.unmount();
+  });
+
+  it('supports indeterminate state with aria-checked="mixed"', async () => {
+    const checked = ref<boolean | 'indeterminate'>('indeterminate');
+    const Harness = defineComponent({
+      setup: () => () => h(CheckboxRoot, {
+        checked: checked.value,
+        'onUpdate:checked': (v: boolean | 'indeterminate' | undefined) => { checked.value = v!; },
+      }, { default: () => h(CheckboxIndicator) }),
+    });
+    const w = mount(Harness, { attachTo: document.body });
+    expect(w.element.getAttribute('aria-checked')).toBe('mixed');
+    (w.element as HTMLElement).click();
+    await nextTick();
+    // Click from indeterminate → true
+    expect(checked.value).toBe(true);
+    w.unmount();
+  });
+
+  it('disabled: no toggle on click, aria-disabled set', async () => {
+    const w = mountCheckbox({ disabled: true });
+    const el = w.element as HTMLElement;
+    expect(el.getAttribute('aria-disabled')).toBe('true');
+    el.click();
+    await nextTick();
+    expect(el.getAttribute('aria-checked')).toBe('false');
+    w.unmount();
+  });
+
+  it('emits checkedChange', async () => {
+    const w = mountCheckbox();
+    (w.element as HTMLElement).click();
+    await nextTick();
+    expect(w.emitted('checkedChange')).toEqual([[true]]);
+    w.unmount();
+  });
+
+  it('renders hidden input when name is set', async () => {
+    const w = mountCheckbox({ name: 'agree', value: 'yes', defaultChecked: true });
+    const input = w.element.querySelector('input[type="checkbox"]') as HTMLInputElement;
+    expect(input).toBeTruthy();
+    expect(input.name).toBe('agree');
+    expect(input.value).toBe('yes');
+    expect(input.checked).toBe(true);
+    w.unmount();
+  });
+
+  it('CheckboxIndicator only renders when checked (or forceMount)', async () => {
+    const w = mountCheckbox();
+    expect(w.element.querySelector('span')).toBeNull();
+    (w.element as HTMLElement).click();
+    await nextTick();
+    expect(w.element.querySelector('span')).toBeTruthy();
+    w.unmount();
+  });
+
+  it('CheckboxIndicator forceMount stays mounted when unchecked', () => {
+    const w = mount(CheckboxRoot, {
+      attachTo: document.body,
+      slots: {
+        default: () => h(CheckboxIndicator, { forceMount: true }, { default: () => '✓' }),
+      },
+    });
+    expect(w.element.querySelector('span')).toBeTruthy();
+    w.unmount();
+  });
+});
diff --git a/vue/primitives/src/checkbox/context.ts b/vue/primitives/src/checkbox/context.ts
new file mode 100644
index 0000000..34d2014
--- /dev/null
+++ b/vue/primitives/src/checkbox/context.ts
@@ -0,0 +1,14 @@
+import type { Ref } from 'vue';
+import { useContextFactory } from '@robonen/vue';
+
+export type CheckedState = boolean | 'indeterminate';
+
+export interface CheckboxContext {
+  checked: Ref<CheckedState>;
+  disabled: Ref<boolean>;
+}
+
+const ctx = useContextFactory<CheckboxContext>('CheckboxContext');
+
+export const provideCheckboxContext = ctx.provide;
+export const useCheckboxContext = ctx.inject;
diff --git a/vue/primitives/src/checkbox/index.ts b/vue/primitives/src/checkbox/index.ts
new file mode 100644
index 0000000..d141a6e
--- /dev/null
+++ b/vue/primitives/src/checkbox/index.ts
@@ -0,0 +1,5 @@
+export { default as CheckboxIndicator } from './CheckboxIndicator.vue';
+export { default as CheckboxRoot } from './CheckboxRoot.vue';
+export type { CheckedState } from './context';
+export type { CheckboxIndicatorProps } from './CheckboxIndicator.vue';
+export type { CheckboxRootEmits, CheckboxRootProps } from './CheckboxRoot.vue';
diff --git a/vue/primitives/src/collapsible/CollapsibleContent.vue b/vue/primitives/src/collapsible/CollapsibleContent.vue
new file mode 100644
index 0000000..791346f
--- /dev/null
+++ b/vue/primitives/src/collapsible/CollapsibleContent.vue
@@ -0,0 +1,36 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CollapsibleContentProps extends PrimitiveProps {
+
+  /** Render the content even when closed (useful for animation control). */
+  forceMount?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { Presence } from '../presence';
+import { Primitive } from '../primitive';
+import { useCollapsibleContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'div', forceMount = false } = defineProps<CollapsibleContentProps>();
+
+const { forwardRef } = useForwardExpose();
+const ctx = useCollapsibleContext();
+</script>
+
+<template>
+  <Presence :present="forceMount || ctx.open.value">
+    <Primitive
+      :ref="forwardRef"
+      :id="ctx.contentId.value"
+      :as="as"
+      :data-state="ctx.open.value ? 'open' : 'closed'"
+      :data-disabled="ctx.disabled.value ? '' : undefined"
+      :hidden="!ctx.open.value ? true : undefined"
+    >
+      <slot :open="ctx.open.value" />
+    </Primitive>
+  </Presence>
+</template>
diff --git a/vue/primitives/src/collapsible/CollapsibleRoot.vue b/vue/primitives/src/collapsible/CollapsibleRoot.vue
new file mode 100644
index 0000000..d664ca5
--- /dev/null
+++ b/vue/primitives/src/collapsible/CollapsibleRoot.vue
@@ -0,0 +1,56 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CollapsibleRootProps extends PrimitiveProps {
+
+  defaultOpen?: boolean;
+  disabled?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { ref, toRef } from 'vue';
+import { provideCollapsibleContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+import { useId } from '../config-provider';
+
+const { defaultOpen = false, disabled = false, as = 'div' } = defineProps<CollapsibleRootProps>();
+
+const { forwardRef } = useForwardExpose();
+
+const localOpen = ref<boolean>(defaultOpen);
+
+const open = defineModel<boolean>('open', {
+  default: undefined,
+  get: v => v ?? localOpen.value,
+  set: (v) => {
+    localOpen.value = v;
+    return v;
+  },
+});
+
+// Identity passthrough via `toRef` — reactive without `computed`'s effect/cache.
+const disabledRef = toRef(() => disabled);
+const contentId = useId(undefined, 'collapsible-content');
+
+provideCollapsibleContext({
+  open,
+  disabled: disabledRef,
+  contentId,
+  onToggle: () => { if (!disabled) open.value = !open.value; },
+  onOpen: () => { if (!disabled) open.value = true; },
+  onClose: () => { if (!disabled) open.value = false; },
+});
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :data-state="open ? 'open' : 'closed'"
+    :data-disabled="disabled ? '' : undefined"
+  >
+    <slot :open="open" />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/collapsible/CollapsibleTrigger.vue b/vue/primitives/src/collapsible/CollapsibleTrigger.vue
new file mode 100644
index 0000000..20d3d91
--- /dev/null
+++ b/vue/primitives/src/collapsible/CollapsibleTrigger.vue
@@ -0,0 +1,32 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CollapsibleTriggerProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useCollapsibleContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'button' } = defineProps<CollapsibleTriggerProps>();
+
+const { forwardRef } = useForwardExpose();
+const ctx = useCollapsibleContext();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :type="as === 'button' ? 'button' : undefined"
+    :aria-expanded="ctx.open.value"
+    :aria-controls="ctx.contentId.value"
+    :data-state="ctx.open.value ? 'open' : 'closed'"
+    :data-disabled="ctx.disabled.value ? '' : undefined"
+    :disabled="as === 'button' ? ctx.disabled.value : undefined"
+    @click="ctx.onToggle"
+  >
+    <slot :open="ctx.open.value" />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/collapsible/__test__/Collapsible.test.ts b/vue/primitives/src/collapsible/__test__/Collapsible.test.ts
new file mode 100644
index 0000000..9b174ae
--- /dev/null
+++ b/vue/primitives/src/collapsible/__test__/Collapsible.test.ts
@@ -0,0 +1,65 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import { defineComponent, h, nextTick } from 'vue';
+import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from '../index';
+
+function mountCollapsible(props: Record<string, unknown> = {}) {
+  return mount(defineComponent({
+    setup: () => () => h(CollapsibleRoot, props, {
+      default: () => [
+        h(CollapsibleTrigger, { class: 'trig' }, { default: () => 'Toggle' }),
+        h(CollapsibleContent, { class: 'c' }, { default: () => 'Body' }),
+      ],
+    }),
+  }));
+}
+
+describe('Collapsible', () => {
+  it('starts closed by default; trigger toggles state', async () => {
+    const w = mountCollapsible();
+    const trigger = w.find('.trig');
+    expect(trigger.attributes('aria-expanded')).toBe('false');
+    expect(w.find('.c').exists()).toBe(false);
+    await trigger.trigger('click');
+    expect(trigger.attributes('aria-expanded')).toBe('true');
+    expect(w.find('.c').exists()).toBe(true);
+  });
+
+  it('opens via defaultOpen', async () => {
+    const w = mountCollapsible({ defaultOpen: true });
+    await nextTick();
+    expect(w.find('.trig').attributes('aria-expanded')).toBe('true');
+    expect(w.find('.c').exists()).toBe(true);
+    expect(w.find('.c').text()).toBe('Body');
+  });
+
+  it('wires aria-controls to content id', async () => {
+    const w = mountCollapsible({ defaultOpen: true });
+    await nextTick();
+    const id = w.find('.c').attributes('id');
+    expect(id).toMatch(/collapsible-content/);
+    expect(w.find('.trig').attributes('aria-controls')).toBe(id);
+  });
+
+  it('respects disabled', async () => {
+    const w = mountCollapsible({ disabled: true });
+    await w.find('.trig').trigger('click');
+    expect(w.find('.trig').attributes('aria-expanded')).toBe('false');
+    expect(w.find('.trig').attributes('data-disabled')).toBe('');
+  });
+
+  it('forceMount keeps content in DOM when closed', () => {
+    const w = mount(defineComponent({
+      setup: () => () => h(CollapsibleRoot, null, {
+        default: () => [
+          h(CollapsibleTrigger, { class: 'trig' }),
+          h(CollapsibleContent, { class: 'c', forceMount: true }, { default: () => 'Body' }),
+        ],
+      }),
+    }));
+    const content = w.find('.c');
+    expect(content.exists()).toBe(true);
+    expect(content.attributes('hidden')).toBeDefined();
+    expect(content.attributes('data-state')).toBe('closed');
+  });
+});
diff --git a/vue/primitives/src/collapsible/context.ts b/vue/primitives/src/collapsible/context.ts
new file mode 100644
index 0000000..db537df
--- /dev/null
+++ b/vue/primitives/src/collapsible/context.ts
@@ -0,0 +1,16 @@
+import type { ComputedRef, Ref } from 'vue';
+import { useContextFactory } from '@robonen/vue';
+
+export interface CollapsibleContext {
+  open: Ref<boolean>;
+  disabled: Ref<boolean>;
+  contentId: ComputedRef<string>;
+  onToggle: () => void;
+  onOpen: () => void;
+  onClose: () => void;
+}
+
+const ctx = useContextFactory<CollapsibleContext>('CollapsibleContext');
+
+export const provideCollapsibleContext = ctx.provide;
+export const useCollapsibleContext = ctx.inject;
diff --git a/vue/primitives/src/collapsible/index.ts b/vue/primitives/src/collapsible/index.ts
new file mode 100644
index 0000000..17578f2
--- /dev/null
+++ b/vue/primitives/src/collapsible/index.ts
@@ -0,0 +1,8 @@
+export { default as CollapsibleRoot } from './CollapsibleRoot.vue';
+export { default as CollapsibleTrigger } from './CollapsibleTrigger.vue';
+export { default as CollapsibleContent } from './CollapsibleContent.vue';
+export type { CollapsibleRootProps } from './CollapsibleRoot.vue';
+export type { CollapsibleTriggerProps } from './CollapsibleTrigger.vue';
+export type { CollapsibleContentProps } from './CollapsibleContent.vue';
+export { provideCollapsibleContext, useCollapsibleContext } from './context';
+export type { CollapsibleContext } from './context';
diff --git a/vue/primitives/src/collection/index.ts b/vue/primitives/src/collection/index.ts
new file mode 100644
index 0000000..82a19c5
--- /dev/null
+++ b/vue/primitives/src/collection/index.ts
@@ -0,0 +1,6 @@
+export {
+  useCollectionProvider,
+  useCollectionInjector,
+  type CollectionContext,
+  type CollectionItemData,
+} from './useCollection';
diff --git a/vue/primitives/src/collection/useCollection.ts b/vue/primitives/src/collection/useCollection.ts
new file mode 100644
index 0000000..014c557
--- /dev/null
+++ b/vue/primitives/src/collection/useCollection.ts
@@ -0,0 +1,185 @@
+import type { ComputedRef, DefineComponent, ShallowRef } from 'vue';
+import {
+  computed,
+  defineComponent,
+  h,
+  markRaw,
+  shallowRef,
+  triggerRef,
+  watch,
+} from 'vue';
+import { unrefElement, useContextFactory } from '@robonen/vue';
+import { Slot } from '../primitive';
+
+/**
+ * Data attribute used to locate items inside a collection via `querySelectorAll`.
+ * Rendered automatically by `<CollectionItem>`.
+ */
+const ITEM_DATA_ATTR = 'data-collection-item';
+
+export interface CollectionItemData<Value = unknown> {
+  /** DOM element that represents the item. */
+  ref: HTMLElement;
+  /** Arbitrary `value` associated with the item via `<CollectionItem :value>`. */
+  value?: Value;
+}
+
+export interface CollectionContext<Value = unknown> {
+  /** Root element of the collection (set by `<CollectionSlot>`). */
+  collectionRef: ShallowRef<HTMLElement | undefined>;
+  /** Raw element→data map. Mutated via `triggerRef` — do not rely on deep reactivity. */
+  itemMap: ShallowRef<Map<HTMLElement, CollectionItemData<Value>>>;
+  /**
+   * Returns items sorted by their DOM order. Items with `data-disabled` are
+   * skipped unless `includeDisabled` is `true`.
+   *
+   * The ordering comes from `collectionRef.querySelectorAll(...)`, which means
+   * it survives `<Teleport>`, `<Suspense>` and `v-for` reorders — unlike a
+   * mount-order based registry.
+   */
+  getItems: (includeDisabled?: boolean) => Array<CollectionItemData<Value>>;
+  /** Reactive snapshot of all items (unsorted). Invalidated when `itemMap` changes. */
+  reactiveItems: ComputedRef<Array<CollectionItemData<Value>>>;
+  /** Reactive count of items. */
+  itemMapSize: ComputedRef<number>;
+  /** Root marker component — render at the collection's root. */
+  CollectionSlot: DefineComponent;
+  /** Item marker component — wrap each focusable/selectable child. */
+  CollectionItem: DefineComponent<{ value?: unknown }>;
+}
+
+function createCollectionState<Value = unknown>(): CollectionContext<Value> {
+  // `shallowRef` + manual `triggerRef` avoids wrapping the Map in a deep Proxy.
+  // For collections with many items (large lists, menus, listboxes) this is
+  // measurably cheaper than `ref(new Map())`.
+  const collectionRef = shallowRef<HTMLElement>();
+  const itemMap = shallowRef(
+    new Map<HTMLElement, CollectionItemData<Value>>(),
+  );
+
+  const getItems = (includeDisabled = false) => {
+    const collectionNode = collectionRef.value;
+    if (!collectionNode) return [];
+
+    const orderedNodes = Array.from(
+      collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`),
+    );
+    const items = Array.from(itemMap.value.values());
+    items.sort(
+      (a, b) => orderedNodes.indexOf(a.ref) - orderedNodes.indexOf(b.ref),
+    );
+
+    return includeDisabled
+      ? items
+      : items.filter(i => i.ref.dataset['disabled'] !== '');
+  };
+
+  const CollectionSlot = defineComponent({
+    name: 'CollectionSlot',
+    inheritAttrs: false,
+    setup(_, { slots, attrs }) {
+      return () =>
+        h(
+          Slot,
+          {
+            ...attrs,
+            ref: (el: unknown) => {
+              const element = unrefElement(el as Parameters<typeof unrefElement>[0]);
+              if (element instanceof HTMLElement) {
+                collectionRef.value = element;
+              }
+            },
+          },
+          slots,
+        );
+    },
+  }) as DefineComponent;
+
+  const CollectionItem = defineComponent({
+    name: 'CollectionItem',
+    inheritAttrs: false,
+    props: {
+      value: {
+        // Accepts any value.
+        validator: () => true,
+      },
+    },
+    setup(props, { slots, attrs }) {
+      const currentElement = shallowRef<HTMLElement>();
+
+      watch(
+        [currentElement, () => props.value],
+        ([el], _prev, onCleanup) => {
+          if (!el) return;
+          // `markRaw` keeps Vue from trying to make the element reactive —
+          // we only care about identity as a Map key.
+          const key = markRaw(el);
+          itemMap.value.set(key, { ref: el, value: props.value as Value });
+          triggerRef(itemMap);
+
+          onCleanup(() => {
+            itemMap.value.delete(key);
+            triggerRef(itemMap);
+          });
+        },
+        { immediate: true },
+      );
+
+      return () =>
+        h(
+          Slot,
+          {
+            ...attrs,
+            [ITEM_DATA_ATTR]: '',
+            ref: (el: unknown) => {
+              const element = unrefElement(el as Parameters<typeof unrefElement>[0]);
+              if (element instanceof HTMLElement) {
+                currentElement.value = element;
+              }
+            },
+          },
+          slots,
+        );
+    },
+  }) as DefineComponent<{ value?: unknown }>;
+
+  const reactiveItems = computed(() => Array.from(itemMap.value.values()));
+  const itemMapSize = computed(() => itemMap.value.size);
+
+  return {
+    collectionRef,
+    itemMap,
+    getItems,
+    reactiveItems,
+    itemMapSize,
+    CollectionSlot,
+    CollectionItem,
+  };
+}
+
+const CollectionCtx = useContextFactory<CollectionContext>('CollectionContext');
+
+/**
+ * Creates a new collection state and provides it to descendants.
+ * Call this in the parent (e.g. `RovingFocusGroup`, `ListboxRoot`).
+ *
+ * @example
+ * ```ts
+ * const { getItems, CollectionSlot } = useCollectionProvider();
+ * ```
+ */
+export function useCollectionProvider<Value = unknown>(): CollectionContext<Value> {
+  const ctx = createCollectionState<Value>();
+  CollectionCtx.provide(ctx as CollectionContext);
+  return ctx;
+}
+
+/**
+ * Injects the collection context from the nearest `useCollectionProvider()`.
+ * Call this in children (e.g. `RovingFocusItem`, `ListboxItem`).
+ *
+ * @throws when used outside a provider.
+ */
+export function useCollectionInjector<Value = unknown>(): CollectionContext<Value> {
+  return CollectionCtx.inject() as CollectionContext<Value>;
+}
diff --git a/vue/primitives/src/combobox/ComboboxAnchor.vue b/vue/primitives/src/combobox/ComboboxAnchor.vue
new file mode 100644
index 0000000..b64d520
--- /dev/null
+++ b/vue/primitives/src/combobox/ComboboxAnchor.vue
@@ -0,0 +1,33 @@
+<script lang="ts">
+import type { PopperAnchorProps } from '../popper';
+
+export interface ComboboxAnchorProps extends PopperAnchorProps {}
+</script>
+
+<script setup lang="ts">
+import { onBeforeUnmount, watchPostEffect } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { PopperAnchor } from '../popper';
+import { Primitive } from '../primitive';
+import { useComboboxRootContext } from './context';
+
+const props = defineProps<ComboboxAnchorProps>();
+
+const { forwardRef, currentElement } = useForwardExpose();
+const rootCtx = useComboboxRootContext();
+
+watchPostEffect(() => rootCtx.onParentChange(currentElement.value));
+onBeforeUnmount(() => rootCtx.onParentChange(undefined));
+</script>
+
+<template>
+  <PopperAnchor :reference="props.reference">
+    <Primitive
+      :ref="forwardRef"
+      :as="props.as ?? 'div'"
+    >
+      <slot />
+    </Primitive>
+  </PopperAnchor>
+</template>
diff --git a/vue/primitives/src/combobox/ComboboxArrow.vue b/vue/primitives/src/combobox/ComboboxArrow.vue
new file mode 100644
index 0000000..7df8f87
--- /dev/null
+++ b/vue/primitives/src/combobox/ComboboxArrow.vue
@@ -0,0 +1,24 @@
+<script lang="ts">
+import type { PopperArrowProps } from '../popper';
+
+export type ComboboxArrowProps = PopperArrowProps;
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '@robonen/vue';
+
+import { PopperArrow } from '../popper';
+import { useComboboxRootContext } from './context';
+
+const props = defineProps<ComboboxArrowProps>();
+const { forwardRef } = useForwardExpose();
+const rootCtx = useComboboxRootContext();
+</script>
+
+<template>
+  <PopperArrow
+    v-if="rootCtx.open.value"
+    :ref="forwardRef"
+    v-bind="props"
+  />
+</template>
diff --git a/vue/primitives/src/combobox/ComboboxCancel.vue b/vue/primitives/src/combobox/ComboboxCancel.vue
new file mode 100644
index 0000000..7ae1746
--- /dev/null
+++ b/vue/primitives/src/combobox/ComboboxCancel.vue
@@ -0,0 +1,40 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ComboboxCancelProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '@robonen/vue';
+
+import { Primitive } from '../primitive';
+import { useComboboxRootContext } from './context';
+
+const { as = 'button' } = defineProps<ComboboxCancelProps>();
+
+const { forwardRef } = useForwardExpose();
+const rootCtx = useComboboxRootContext();
+
+function handleClick() {
+  rootCtx.onSearchTermChange('');
+  const input = rootCtx.inputElement.value;
+  if (input) {
+    input.value = '';
+    input.focus();
+  }
+  rootCtx.onUserInputtedChange(false);
+}
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :type="as === 'button' ? 'button' : undefined"
+    tabindex="-1"
+    aria-label="Clear"
+    @click="handleClick"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/combobox/ComboboxContent.vue b/vue/primitives/src/combobox/ComboboxContent.vue
new file mode 100644
index 0000000..646cf73
--- /dev/null
+++ b/vue/primitives/src/combobox/ComboboxContent.vue
@@ -0,0 +1,30 @@
+<script lang="ts">
+import type { ComboboxContentImplEmits, ComboboxContentImplProps } from './ComboboxContentImpl.vue';
+
+export type ComboboxContentProps = ComboboxContentImplProps;
+export type ComboboxContentEmits = ComboboxContentImplEmits;
+</script>
+
+<script setup lang="ts">
+import { Presence } from '../presence';
+import ComboboxContentImpl from './ComboboxContentImpl.vue';
+import { useComboboxRootContext } from './context';
+
+const props = defineProps<ComboboxContentProps>();
+const emit = defineEmits<ComboboxContentEmits>();
+const rootCtx = useComboboxRootContext();
+</script>
+
+<template>
+  <Presence :present="rootCtx.open.value">
+    <ComboboxContentImpl
+      v-bind="props"
+      @close-auto-focus="emit('closeAutoFocus', $event)"
+      @escape-key-down="emit('escapeKeyDown', $event)"
+      @pointer-down-outside="emit('pointerDownOutside', $event)"
+      @focus-outside="emit('focusOutside', $event)"
+    >
+      <slot />
+    </ComboboxContentImpl>
+  </Presence>
+</template>
diff --git a/vue/primitives/src/combobox/ComboboxContentImpl.vue b/vue/primitives/src/combobox/ComboboxContentImpl.vue
new file mode 100644
index 0000000..249aa2a
--- /dev/null
+++ b/vue/primitives/src/combobox/ComboboxContentImpl.vue
@@ -0,0 +1,139 @@
+<script lang="ts">
+import type { DismissableLayerEmits } from '../dismissable-layer';
+import type { FocusScopeEmits } from '../focus-scope';
+import type { PopperContentProps } from '../popper';
+import type { PrimitiveProps } from '../primitive';
+
+export interface ComboboxContentImplProps extends PrimitiveProps, /* @vue-ignore */ Partial<PopperContentProps> {
+  /** Position strategy. @default 'popper' */
+  position?: 'inline' | 'popper';
+  /** Block outside pointer events. @default false */
+  disableOutsidePointerEvents?: boolean;
+}
+
+export interface ComboboxContentImplEmits {
+  closeAutoFocus: FocusScopeEmits['unmountAutoFocus'];
+  escapeKeyDown: DismissableLayerEmits['escapeKeyDown'];
+  pointerDownOutside: DismissableLayerEmits['pointerDownOutside'];
+  focusOutside: FocusScopeEmits['unmountAutoFocus'];
+}
+</script>
+
+<script setup lang="ts">
+import { onBeforeUnmount, shallowRef, toRef, watchPostEffect } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { DismissableLayer } from '../dismissable-layer';
+import { FocusScope } from '../focus-scope';
+import { PopperContent } from '../popper';
+import { Primitive } from '../primitive';
+import { VisuallyHidden } from '../visually-hidden';
+import { useHideOthers } from '../utils/useHideOthers';
+import { provideComboboxContentContext, useComboboxRootContext } from './context';
+
+const props = defineProps<ComboboxContentImplProps>();
+const emit = defineEmits<ComboboxContentImplEmits>();
+
+const { forwardRef, currentElement } = useForwardExpose();
+const rootCtx = useComboboxRootContext();
+
+const viewportElement = shallowRef<HTMLElement | undefined>(undefined);
+
+watchPostEffect(() => rootCtx.onContentChange(currentElement.value));
+onBeforeUnmount(() => rootCtx.onContentChange(undefined));
+
+useHideOthers(toRef(() => rootCtx.parentElement.value));
+
+provideComboboxContentContext({
+  viewportElement,
+  onViewportChange: (el) => { viewportElement.value = el; },
+  position: toRef(() => props.position ?? 'popper'),
+});
+
+function handleEscape(event: KeyboardEvent) {
+  rootCtx.onOpenChange(false);
+  emit('escapeKeyDown', event);
+}
+
+function handlePointerDownOutside(event: any) {
+  const target = event.target as Element | null;
+  const input = rootCtx.inputElement.value;
+  const trigger = rootCtx.triggerElement.value;
+  if (target && (input?.contains(target) || trigger?.contains(target))) {
+    event.preventDefault();
+    return;
+  }
+  emit('pointerDownOutside', event);
+  if (!event.defaultPrevented) rootCtx.onOpenChange(false);
+}
+
+function handleFocusOutside(event: any) {
+  emit('focusOutside', event);
+}
+
+function handleCloseAutoFocus(event: Event) {
+  emit('closeAutoFocus', event);
+}
+</script>
+
+<template>
+  <FocusScope
+    as="template"
+    :loop="false"
+    :trapped="false"
+    @mount-auto-focus.prevent
+    @unmount-auto-focus="handleCloseAutoFocus"
+  >
+    <DismissableLayer
+      as="template"
+      :disable-outside-pointer-events="props.disableOutsidePointerEvents ?? false"
+      @escape-key-down="handleEscape"
+      @pointer-down-outside="handlePointerDownOutside"
+      @focus-outside="handleFocusOutside"
+      @dismiss="rootCtx.onOpenChange(false)"
+    >
+      <PopperContent
+        v-if="(props.position ?? 'popper') === 'popper'"
+        :ref="forwardRef"
+        :as="props.as ?? 'div'"
+        :side="props.side ?? 'bottom'"
+        :side-offset="props.sideOffset ?? 4"
+        :align="props.align ?? 'start'"
+        :align-offset="props.alignOffset"
+        :avoid-collisions="props.avoidCollisions"
+        :collision-boundary="props.collisionBoundary"
+        :collision-padding="props.collisionPadding"
+        :arrow-padding="props.arrowPadding"
+        :sticky="props.sticky"
+        :hide-when-detached="props.hideWhenDetached"
+        :update-position-strategy="props.updatePositionStrategy"
+        :id="rootCtx.contentId.value"
+        role="listbox"
+        :aria-multiselectable="rootCtx.multiple.value || undefined"
+        :data-state="rootCtx.open.value ? 'open' : 'closed'"
+        data-primitives-combobox-content
+      >
+        <VisuallyHidden role="status" aria-live="polite" data-primitives-combobox-announce>
+          {{ rootCtx.filterState.value.count === 1 ? '1 result available.' : `${rootCtx.filterState.value.count} results available.` }}
+        </VisuallyHidden>
+        <slot />
+      </PopperContent>
+
+      <Primitive
+        v-else
+        :ref="forwardRef"
+        :as="props.as ?? 'div'"
+        :id="rootCtx.contentId.value"
+        role="listbox"
+        :aria-multiselectable="rootCtx.multiple.value || undefined"
+        :data-state="rootCtx.open.value ? 'open' : 'closed'"
+        data-primitives-combobox-content
+      >
+        <VisuallyHidden role="status" aria-live="polite" data-primitives-combobox-announce>
+          {{ rootCtx.filterState.value.count === 1 ? '1 result available.' : `${rootCtx.filterState.value.count} results available.` }}
+        </VisuallyHidden>
+        <slot />
+      </Primitive>
+    </DismissableLayer>
+  </FocusScope>
+</template>
diff --git a/vue/primitives/src/combobox/ComboboxEmpty.vue b/vue/primitives/src/combobox/ComboboxEmpty.vue
new file mode 100644
index 0000000..f6ee9ea
--- /dev/null
+++ b/vue/primitives/src/combobox/ComboboxEmpty.vue
@@ -0,0 +1,37 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ComboboxEmptyProps extends PrimitiveProps {
+  /** Render even when items exist but none are filtered out. */
+  always?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { useComboboxRootContext } from './context';
+
+const { as = 'div', always = false } = defineProps<ComboboxEmptyProps>();
+
+const { forwardRef } = useForwardExpose();
+const rootCtx = useComboboxRootContext();
+
+const shouldRender = computed(() => {
+  if (always) return true;
+  return rootCtx.filterState.value.count === 0;
+});
+</script>
+
+<template>
+  <Primitive
+    v-if="shouldRender"
+    :ref="forwardRef"
+    :as="as"
+    role="presentation"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/combobox/ComboboxGroup.vue b/vue/primitives/src/combobox/ComboboxGroup.vue
new file mode 100644
index 0000000..be430d0
--- /dev/null
+++ b/vue/primitives/src/combobox/ComboboxGroup.vue
@@ -0,0 +1,39 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ComboboxGroupProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { useId } from '../config-provider';
+import { Primitive } from '../primitive';
+import { provideComboboxGroupContext, useComboboxRootContext } from './context';
+
+const { as = 'div' } = defineProps<ComboboxGroupProps>();
+
+const { forwardRef } = useForwardExpose();
+const rootCtx = useComboboxRootContext();
+const id = useId(undefined, 'combobox-group');
+
+const isVisible = computed(() => rootCtx.filterState.value.groups.has(id.value));
+
+onMounted(() => rootCtx.onGroupRegister(id.value));
+onBeforeUnmount(() => rootCtx.onGroupUnregister(id.value));
+
+provideComboboxGroupContext({ id });
+</script>
+
+<template>
+  <Primitive
+    v-show="isVisible"
+    :ref="forwardRef"
+    :as="as"
+    role="group"
+    :aria-labelledby="id"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/combobox/ComboboxInput.vue b/vue/primitives/src/combobox/ComboboxInput.vue
new file mode 100644
index 0000000..c73c55e
--- /dev/null
+++ b/vue/primitives/src/combobox/ComboboxInput.vue
@@ -0,0 +1,221 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ComboboxInputProps extends PrimitiveProps {
+  /** Disable the input. */
+  disabled?: boolean;
+  /** Focus the input on mount. */
+  autoFocus?: boolean;
+  /** Open the combobox when the input is focused. */
+  openOnFocus?: boolean;
+  /** Open the combobox when the input is clicked. */
+  openOnClick?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, watch } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { useComboboxRootContext } from './context';
+import { OPEN_KEYS } from './utils';
+
+const {
+  as = 'input',
+  disabled = false,
+  autoFocus = false,
+  openOnFocus = false,
+  openOnClick = false,
+} = defineProps<ComboboxInputProps>();
+
+const { forwardRef, currentElement } = useForwardExpose();
+const rootCtx = useComboboxRootContext();
+
+const isDisabled = computed(() => disabled || rootCtx.disabled.value);
+const activeDescendant = computed(() => rootCtx.selectedValueId.value);
+
+function displayString(value: unknown): string {
+  if (rootCtx.displayValue) return rootCtx.displayValue(value);
+  if (value === undefined || value === null) return '';
+  if (Array.isArray(value)) return '';
+  if (typeof value === 'object') return '';
+  return String(value);
+}
+
+function syncDisplayValue() {
+  const input = currentElement.value as HTMLInputElement | undefined;
+  if (!input) return;
+  const next = displayString(rootCtx.modelValue.value);
+  if (input.value !== next) input.value = next;
+}
+
+onMounted(() => {
+  const el = currentElement.value as HTMLInputElement | undefined;
+  rootCtx.onInputChange(el);
+  if (el) {
+    el.value = rootCtx.searchTerm.value || displayString(rootCtx.modelValue.value);
+  }
+  if (autoFocus) setTimeout(() => el?.focus(), 1);
+});
+
+onBeforeUnmount(() => rootCtx.onInputChange(undefined));
+
+watch(() => rootCtx.modelValue.value, () => {
+  if (rootCtx.isUserInputted.value) return;
+  if (!rootCtx.resetSearchTermOnSelect.value && rootCtx.searchTerm.value) return;
+  rootCtx.onSearchTermChange('');
+  syncDisplayValue();
+}, { deep: true });
+
+watch(() => rootCtx.searchTerm.value, (v) => {
+  const input = currentElement.value as HTMLInputElement | undefined;
+  if (!input) return;
+  if (!v && !rootCtx.isUserInputted.value) {
+    syncDisplayValue();
+    return;
+  }
+  if (input.value !== v) input.value = v;
+});
+
+watch(() => rootCtx.filterState.value, (newState, oldState) => {
+  if (oldState && oldState.count === 0 && newState.count > 0) {
+    rootCtx.highlightFirstItem();
+  }
+});
+
+function moveHighlight(delta: number) {
+  const els = rootCtx.getVisibleItemElements();
+  if (els.length === 0) return;
+  const curId = rootCtx.selectedValueId.value;
+  let idx = -1;
+  if (curId) {
+    for (let i = 0; i < els.length; i++) {
+      if (els[i]!.id === curId) {
+        idx = i;
+        break;
+      }
+    }
+  }
+  let nextIdx: number;
+  if (idx === -1) nextIdx = delta > 0 ? 0 : els.length - 1;
+  else nextIdx = (idx + delta + els.length) % els.length;
+  rootCtx.highlightItemById(els[nextIdx]!.id);
+}
+
+function commitHighlighted() {
+  const value = rootCtx.selectedValue.value;
+  if (value === undefined) return false;
+  rootCtx.onValueChange(value);
+  return true;
+}
+
+function handleInput(event: Event) {
+  const target = event.target as HTMLInputElement;
+  const next = target.value;
+  rootCtx.onUserInputtedChange(true);
+  rootCtx.onSearchTermChange(next);
+  if (!rootCtx.open.value) {
+    rootCtx.onOpenChange(true);
+    nextTick(() => rootCtx.highlightFirstItem());
+  }
+  else {
+    nextTick(() => rootCtx.highlightFirstItem());
+  }
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+  if (isDisabled.value) return;
+  const { key } = event;
+
+  if (!rootCtx.open.value && OPEN_KEYS.includes(key)) {
+    event.preventDefault();
+    rootCtx.onOpenChange(true);
+    return;
+  }
+
+  if (!rootCtx.open.value) return;
+
+  switch (key) {
+    case 'ArrowDown':
+      event.preventDefault();
+      moveHighlight(1);
+      break;
+    case 'ArrowUp':
+      event.preventDefault();
+      moveHighlight(-1);
+      break;
+    case 'Home': {
+      event.preventDefault();
+      const first = rootCtx.getVisibleItemElements()[0];
+      if (first) rootCtx.highlightItemById(first.id);
+      break;
+    }
+    case 'End': {
+      event.preventDefault();
+      const list = rootCtx.getVisibleItemElements();
+      const last = list[list.length - 1];
+      if (last) rootCtx.highlightItemById(last.id);
+      break;
+    }
+    case 'Enter':
+      if (commitHighlighted()) event.preventDefault();
+      break;
+    case 'Escape':
+      event.preventDefault();
+      rootCtx.onOpenChange(false);
+      if (rootCtx.resetSearchTermOnBlur.value) rootCtx.onSearchTermChange('');
+      break;
+    case 'Tab':
+      rootCtx.onOpenChange(false);
+      break;
+  }
+}
+
+function handleFocus() {
+  if (openOnFocus && !rootCtx.open.value) rootCtx.onOpenChange(true);
+}
+
+function handleClick() {
+  if (openOnClick && !rootCtx.open.value) rootCtx.onOpenChange(true);
+}
+
+function handleBlur(event: FocusEvent) {
+  if (!rootCtx.open.value) return;
+  const nextFocus = event.relatedTarget as Element | null;
+  if (!nextFocus) return;
+
+  const parent = rootCtx.parentElement.value;
+  const content = rootCtx.contentElement.value;
+  if (parent?.contains(nextFocus) || content?.contains(nextFocus)) return;
+
+  rootCtx.onOpenChange(false);
+}
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    type="text"
+    role="combobox"
+    autocomplete="off"
+    spellcheck="false"
+    aria-autocomplete="list"
+    :aria-expanded="rootCtx.open.value"
+    :aria-controls="rootCtx.contentId.value"
+    :aria-activedescendant="activeDescendant"
+    :aria-disabled="isDisabled || undefined"
+    :aria-required="rootCtx.required.value || undefined"
+    :disabled="isDisabled || undefined"
+    :data-state="rootCtx.open.value ? 'open' : 'closed'"
+    :data-disabled="isDisabled ? '' : undefined"
+    @input="handleInput"
+    @keydown="handleKeyDown"
+    @focus="handleFocus"
+    @click="handleClick"
+    @blur="handleBlur"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/combobox/ComboboxItem.vue b/vue/primitives/src/combobox/ComboboxItem.vue
new file mode 100644
index 0000000..22089b4
--- /dev/null
+++ b/vue/primitives/src/combobox/ComboboxItem.vue
@@ -0,0 +1,120 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+import type { AcceptableValue } from './utils';
+
+export interface ComboboxItemProps<T extends AcceptableValue = AcceptableValue> extends PrimitiveProps {
+  /** Item value. Selected/registered identity. */
+  value: T;
+  /** Optional explicit text for filter + typeahead. */
+  textValue?: string;
+  /** Disable this item. */
+  disabled?: boolean;
+}
+</script>
+
+<script setup lang="ts" generic="T extends AcceptableValue = AcceptableValue">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { useId } from '../config-provider';
+import { Primitive } from '../primitive';
+import { provideComboboxItemContext, useComboboxGroupContext, useComboboxRootContext } from './context';
+
+const props = defineProps<ComboboxItemProps<T>>();
+
+const { forwardRef, currentElement } = useForwardExpose();
+const rootCtx = useComboboxRootContext();
+let groupCtx: { id: { value: string } } | null = null;
+try {
+  groupCtx = useComboboxGroupContext() as any;
+}
+catch {
+  groupCtx = null;
+}
+
+const id = useId(undefined, 'combobox-item');
+const textValue = ref(props.textValue ?? '');
+
+const isDisabled = computed(() => rootCtx.disabled.value || !!props.disabled);
+const isSelected = computed(() => rootCtx.isSelected(props.value));
+const isHighlighted = computed(() => rootCtx.selectedValueId.value === id.value);
+const isVisible = computed(() => rootCtx.filterState.value.items.has(id.value));
+
+function syncRegistration() {
+  rootCtx.onItemRegister(id.value, {
+    value: props.value,
+    textValue: textValue.value,
+    disabled: isDisabled.value,
+  });
+}
+
+onMounted(() => {
+  const el = currentElement.value as HTMLElement | undefined;
+  if (el && !props.textValue) {
+    textValue.value = el.textContent?.trim() ?? '';
+  }
+  syncRegistration();
+  if (groupCtx) rootCtx.onGroupItemRegister(groupCtx.id.value, id.value);
+});
+
+watch(() => [props.value, props.textValue, isDisabled.value], () => {
+  if (props.textValue) textValue.value = props.textValue;
+  syncRegistration();
+});
+
+onBeforeUnmount(() => {
+  rootCtx.onItemUnregister(id.value);
+  if (groupCtx) rootCtx.onGroupItemUnregister(groupCtx.id.value, id.value);
+  if (rootCtx.selectedValueId.value === id.value) {
+    rootCtx.onSelectedValueChange(undefined, undefined);
+  }
+});
+
+function handleClick(event: MouseEvent) {
+  if (isDisabled.value) return;
+  event.preventDefault();
+  rootCtx.onValueChange(props.value);
+  if (rootCtx.resetSearchTermOnSelect.value && !rootCtx.multiple.value) {
+    rootCtx.onSearchTermChange('');
+    rootCtx.onUserInputtedChange(false);
+  }
+}
+
+function handlePointerMove() {
+  if (isDisabled.value) return;
+  if (rootCtx.selectedValueId.value !== id.value) {
+    rootCtx.onSelectedValueChange(props.value, id.value);
+  }
+}
+
+provideComboboxItemContext({
+  id,
+  value: props.value,
+  textValue,
+  isSelected,
+  isDisabled,
+});
+
+defineExpose({ id, isVisible, isHighlighted });
+</script>
+
+<template>
+  <Primitive
+    v-show="isVisible"
+    :ref="forwardRef"
+    :id="id"
+    :as="props.as ?? 'div'"
+    role="option"
+    :aria-selected="isSelected"
+    :aria-disabled="isDisabled || undefined"
+    :data-state="isSelected ? 'checked' : 'unchecked'"
+    :data-highlighted="isHighlighted ? '' : undefined"
+    :data-disabled="isDisabled ? '' : undefined"
+    :tabindex="-1"
+    data-primitives-combobox-item
+    @click="handleClick"
+    @pointermove="handlePointerMove"
+  >
+    <slot :selected="isSelected" :highlighted="isHighlighted" />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/combobox/ComboboxItemIndicator.vue b/vue/primitives/src/combobox/ComboboxItemIndicator.vue
new file mode 100644
index 0000000..ccb9326
--- /dev/null
+++ b/vue/primitives/src/combobox/ComboboxItemIndicator.vue
@@ -0,0 +1,27 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ComboboxItemIndicatorProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '@robonen/vue';
+
+import { Primitive } from '../primitive';
+import { useComboboxItemContext } from './context';
+
+const { as = 'span' } = defineProps<ComboboxItemIndicatorProps>();
+const { forwardRef } = useForwardExpose();
+const itemCtx = useComboboxItemContext();
+</script>
+
+<template>
+  <Primitive
+    v-if="itemCtx.isSelected.value"
+    :ref="forwardRef"
+    :as="as"
+    aria-hidden="true"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/combobox/ComboboxLabel.vue b/vue/primitives/src/combobox/ComboboxLabel.vue
new file mode 100644
index 0000000..c5248ed
--- /dev/null
+++ b/vue/primitives/src/combobox/ComboboxLabel.vue
@@ -0,0 +1,26 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ComboboxLabelProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '@robonen/vue';
+
+import { Primitive } from '../primitive';
+import { useComboboxGroupContext } from './context';
+
+const { as = 'div' } = defineProps<ComboboxLabelProps>();
+const { forwardRef } = useForwardExpose();
+const groupCtx = useComboboxGroupContext();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :id="groupCtx.id.value"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/combobox/ComboboxPortal.vue b/vue/primitives/src/combobox/ComboboxPortal.vue
new file mode 100644
index 0000000..9023819
--- /dev/null
+++ b/vue/primitives/src/combobox/ComboboxPortal.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { PortalProps } from '../teleport';
+
+export interface ComboboxPortalProps extends PortalProps {}
+</script>
+
+<script setup lang="ts">
+import { Portal } from '../teleport';
+
+const { to, defer, disabled } = defineProps<ComboboxPortalProps>();
+</script>
+
+<template>
+  <Portal :to="to" :defer="defer" :disabled="disabled">
+    <slot />
+  </Portal>
+</template>
diff --git a/vue/primitives/src/combobox/ComboboxRoot.vue b/vue/primitives/src/combobox/ComboboxRoot.vue
new file mode 100644
index 0000000..5b45c9b
--- /dev/null
+++ b/vue/primitives/src/combobox/ComboboxRoot.vue
@@ -0,0 +1,399 @@
+<script lang="ts">
+import type { Direction } from '../config-provider';
+import type { AcceptableValue, ComboboxFilterFunction, ComboboxFilterItem } from './utils';
+
+export interface ComboboxRootProps<T extends AcceptableValue = AcceptableValue> {
+  /** Controlled selected value. Use `v-model`. */
+  modelValue?: T | T[];
+  /** Uncontrolled initial value. */
+  defaultValue?: T | T[];
+  /** Uncontrolled default open state. */
+  defaultOpen?: boolean;
+  /** Allow selecting multiple values. */
+  multiple?: boolean;
+  /** Reading direction. Falls back to `ConfigProvider`. */
+  dir?: Direction;
+  /** Disable the whole combobox. */
+  disabled?: boolean;
+  /** Mark as required for native form validation. */
+  required?: boolean;
+  /** Native input name for form submission. */
+  name?: string;
+  /** Reset the search term when the input is blurred. @default true */
+  resetSearchTermOnBlur?: boolean;
+  /** Reset the search term when a value is selected (single mode). @default true */
+  resetSearchTermOnSelect?: boolean;
+  /** Skip the built-in filter; render every item regardless of search term. */
+  ignoreFilter?: boolean;
+  /** Custom filter implementation. Overrides the default substring match. */
+  filterFunction?: ComboboxFilterFunction;
+  /** Map the current model value to the input's display value. */
+  displayValue?: (value: T | T[] | undefined) => string;
+  /** Compare values by key, or via a custom comparator. */
+  by?: string | ((a: T, b: T) => boolean);
+}
+
+export interface ComboboxRootEmits<T extends AcceptableValue = AcceptableValue> {
+  'update:modelValue': [value: T | T[] | undefined];
+  'update:open': [open: boolean];
+}
+</script>
+
+<script setup lang="ts" generic="T extends AcceptableValue = AcceptableValue">
+import type { ShallowRef } from 'vue';
+import type { ComboboxFilterState, ComboboxItemInfo } from './context';
+
+import { computed, nextTick, ref, shallowRef, toRef, triggerRef, watch } from 'vue';
+
+import { useConfig, useId } from '../config-provider';
+import { PopperRoot } from '../popper';
+import { provideComboboxRootContext } from './context';
+import { defaultFilter, valueComparator } from './utils';
+
+defineOptions({ inheritAttrs: false });
+
+const {
+  modelValue,
+  defaultValue,
+  defaultOpen = false,
+  multiple = false,
+  dir,
+  disabled = false,
+  required = false,
+  name,
+  resetSearchTermOnBlur = true,
+  resetSearchTermOnSelect = true,
+  ignoreFilter = false,
+  filterFunction,
+  displayValue,
+  by,
+} = defineProps<ComboboxRootProps<T>>();
+
+const emit = defineEmits<ComboboxRootEmits<T>>();
+
+const config = useConfig();
+const direction = computed(() => dir ?? config.dir.value);
+
+const localOpen = ref<boolean>(defaultOpen);
+/** Controlled open state. Use `v-model:open`. */
+const open = defineModel<boolean>('open', {
+  default: undefined,
+  get: v => v ?? localOpen.value,
+  set: (v) => {
+    localOpen.value = v;
+    return v;
+  },
+});
+
+const initial = (modelValue ?? defaultValue) as T | T[] | undefined;
+const localValue = shallowRef<T | T[] | undefined>(
+  multiple
+    ? (Array.isArray(initial) ? initial.slice() : (initial === undefined ? [] : [initial]))
+    : (Array.isArray(initial) ? initial[0] : initial),
+);
+const value = defineModel<T | T[] | undefined>('modelValue', {
+  default: undefined,
+  get: v => v ?? localValue.value,
+  set: (v) => {
+    localValue.value = v;
+    return v;
+  },
+});
+
+const searchTerm = ref('');
+const isUserInputted = ref(false);
+
+const contentId = useId(undefined, 'combobox-content');
+
+const triggerElement = shallowRef<HTMLElement | undefined>(undefined);
+const inputElement = shallowRef<HTMLInputElement | undefined>(undefined);
+const contentElement = shallowRef<HTMLElement | undefined>(undefined);
+const parentElement = shallowRef<HTMLElement | undefined>(undefined);
+
+const selectedValue = shallowRef<T | undefined>(undefined) as ShallowRef<T | undefined>;
+const selectedValueId = ref<string | undefined>(undefined);
+
+const allItems = shallowRef(new Map<string, ComboboxItemInfo<T>>());
+const allGroups = shallowRef(new Map<string, Set<string>>());
+
+function onItemRegister(id: string, info: ComboboxItemInfo<T>) {
+  allItems.value.set(id, info);
+  triggerRef(allItems);
+}
+
+function onItemUnregister(id: string) {
+  allItems.value.delete(id);
+  triggerRef(allItems);
+}
+
+function onGroupRegister(groupId: string) {
+  if (!allGroups.value.has(groupId)) {
+    allGroups.value.set(groupId, new Set());
+    triggerRef(allGroups);
+  }
+}
+
+function onGroupUnregister(groupId: string) {
+  allGroups.value.delete(groupId);
+  triggerRef(allGroups);
+}
+
+function onGroupItemRegister(groupId: string, itemId: string) {
+  let set = allGroups.value.get(groupId);
+  if (!set) {
+    set = new Set();
+    allGroups.value.set(groupId, set);
+  }
+  set.add(itemId);
+  triggerRef(allGroups);
+}
+
+function onGroupItemUnregister(groupId: string, itemId: string) {
+  const set = allGroups.value.get(groupId);
+  if (set) {
+    set.delete(itemId);
+    triggerRef(allGroups);
+  }
+}
+
+const filterRef = toRef(() => filterFunction);
+const ignoreFilterRef = toRef(() => ignoreFilter);
+
+const filterState = computed<ComboboxFilterState>(() => {
+  const items = allItems.value;
+  const groups = allGroups.value;
+
+  if (!searchTerm.value || ignoreFilterRef.value || !isUserInputted.value) {
+    return {
+      count: items.size,
+      items: new Set(items.keys()),
+      groups: new Set(groups.keys()),
+    };
+  }
+
+  const candidates: ComboboxFilterItem[] = [];
+  for (const [id, info] of items) candidates.push({ id, textValue: info.textValue });
+
+  const fn = filterRef.value ?? defaultFilter;
+  const filtered = fn(candidates, searchTerm.value);
+
+  const visibleItems = new Set<string>();
+  for (let i = 0; i < filtered.length; i++) visibleItems.add(filtered[i]!.id);
+
+  const visibleGroups = new Set<string>();
+  for (const [groupId, set] of groups) {
+    for (const itemId of set) {
+      if (visibleItems.has(itemId)) {
+        visibleGroups.add(groupId);
+        break;
+      }
+    }
+  }
+
+  return {
+    count: visibleItems.size,
+    items: visibleItems,
+    groups: visibleGroups,
+  };
+});
+
+function isSelected(v: T): boolean {
+  return valueComparator(value.value as T | T[] | undefined, v, by);
+}
+
+function commitValue(next: T | T[] | undefined) {
+  value.value = next;
+  emit('update:modelValue', next);
+}
+
+function onValueChange(v: T) {
+  if (multiple) {
+    const cur = Array.isArray(value.value) ? [...(value.value as T[])] : [];
+    const idx = cur.findIndex(i => valueComparator(i, v, by));
+    if (idx === -1) cur.push(v);
+    else cur.splice(idx, 1);
+    commitValue(cur);
+    inputElement.value?.focus();
+  }
+  else {
+    commitValue(v);
+    open.value = false;
+  }
+}
+
+function onOpenChange(next: boolean) {
+  open.value = next;
+  if (next) {
+    isUserInputted.value = false;
+    searchTerm.value = '';
+    nextTick(() => {
+      inputElement.value?.focus();
+      highlightSelectedOrFirst();
+    });
+  }
+  else {
+    setTimeout(() => {
+      if (resetSearchTermOnBlur) searchTerm.value = '';
+      isUserInputted.value = false;
+    }, 1);
+  }
+}
+
+function onSelectedValueChange(v: T | undefined, id?: string) {
+  selectedValue.value = v;
+  selectedValueId.value = id;
+}
+
+function getVisibleItemElements(): HTMLElement[] {
+  const root = contentElement.value ?? parentElement.value;
+  if (!root) return [];
+  const all = Array.from(root.querySelectorAll<HTMLElement>('[data-primitives-combobox-item]'));
+  const visible: HTMLElement[] = [];
+  const filterIds = filterState.value.items;
+  for (let i = 0; i < all.length; i++) {
+    const el = all[i]!;
+    if (el.dataset['disabled'] === '') continue;
+    const id = el.id;
+    if (!id || filterIds.has(id)) visible.push(el);
+  }
+  return visible;
+}
+
+function readValueFromElement(el: HTMLElement): T | undefined {
+  const id = el.id;
+  if (!id) return undefined;
+  return allItems.value.get(id)?.value;
+}
+
+function highlightItemById(id: string | undefined) {
+  if (!id) {
+    selectedValue.value = undefined;
+    selectedValueId.value = undefined;
+    return;
+  }
+  const info = allItems.value.get(id);
+  if (!info) return;
+  selectedValue.value = info.value;
+  selectedValueId.value = id;
+  const root = contentElement.value ?? parentElement.value;
+  const el = root?.querySelector<HTMLElement>(`#${CSS.escape(id)}`);
+  el?.scrollIntoView({ block: 'nearest' });
+}
+
+function highlightFirstItem() {
+  const els = getVisibleItemElements();
+  if (els.length === 0) {
+    selectedValue.value = undefined;
+    selectedValueId.value = undefined;
+    return;
+  }
+  highlightItemById(els[0]!.id);
+}
+
+function highlightSelectedOrFirst() {
+  const cur = value.value;
+  if (cur !== undefined && !Array.isArray(cur)) {
+    for (const [id, info] of allItems.value) {
+      if (valueComparator(cur, info.value, by) && !info.disabled) {
+        highlightItemById(id);
+        return;
+      }
+    }
+  }
+  highlightFirstItem();
+}
+
+watch(open, (isOpen) => {
+  if (!isOpen) {
+    selectedValue.value = undefined;
+    selectedValueId.value = undefined;
+  }
+});
+
+function onSearchTermChange(v: string) {
+  searchTerm.value = v;
+}
+
+function onUserInputtedChange(v: boolean) {
+  isUserInputted.value = v;
+}
+
+provideComboboxRootContext({
+  modelValue: value,
+  onValueChange,
+  multiple: toRef(() => multiple),
+  open,
+  onOpenChange,
+  disabled: toRef(() => disabled),
+  dir: direction,
+  name: toRef(() => name),
+  required: toRef(() => required),
+  by,
+  isSelected,
+
+  searchTerm,
+  onSearchTermChange,
+  resetSearchTermOnBlur: toRef(() => resetSearchTermOnBlur),
+  resetSearchTermOnSelect: toRef(() => resetSearchTermOnSelect),
+  ignoreFilter: ignoreFilterRef,
+  filterFunction: filterRef,
+  displayValue: displayValue as ((v: unknown) => string) | undefined,
+
+  isUserInputted,
+  onUserInputtedChange,
+
+  contentId,
+  triggerElement,
+  onTriggerChange: (el) => { triggerElement.value = el; },
+  inputElement,
+  onInputChange: (el) => { inputElement.value = el; },
+  contentElement,
+  onContentChange: (el) => { contentElement.value = el; },
+  parentElement,
+  onParentChange: (el) => { parentElement.value = el; },
+
+  selectedValue,
+  selectedValueId,
+  onSelectedValueChange,
+
+  allItems,
+  onItemRegister,
+  onItemUnregister,
+  allGroups,
+  onGroupRegister,
+  onGroupUnregister,
+  onGroupItemRegister,
+  onGroupItemUnregister,
+
+  filterState,
+
+  getVisibleItemElements,
+  highlightItemById,
+  highlightFirstItem,
+});
+
+defineExpose({
+  filterState,
+  highlightFirstItem,
+  highlightItemById,
+  // Avoid unused warnings — surfaced for advanced consumers
+  readValueFromElement,
+});
+</script>
+
+<template>
+  <PopperRoot>
+    <slot :open="open" :model-value="value" />
+    <input
+      v-if="name"
+      type="hidden"
+      :name="name"
+      :value="Array.isArray(value) ? JSON.stringify(value) : (value ?? '')"
+      :required="required"
+      :disabled="disabled"
+      aria-hidden="true"
+      style="display: none"
+      tabindex="-1"
+    />
+  </PopperRoot>
+</template>
diff --git a/vue/primitives/src/combobox/ComboboxSeparator.vue b/vue/primitives/src/combobox/ComboboxSeparator.vue
new file mode 100644
index 0000000..7ff1fa6
--- /dev/null
+++ b/vue/primitives/src/combobox/ComboboxSeparator.vue
@@ -0,0 +1,26 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ComboboxSeparatorProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '@robonen/vue';
+
+import { Primitive } from '../primitive';
+
+const { as = 'div' } = defineProps<ComboboxSeparatorProps>();
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    role="separator"
+    aria-orientation="horizontal"
+    aria-hidden="true"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/combobox/ComboboxTrigger.vue b/vue/primitives/src/combobox/ComboboxTrigger.vue
new file mode 100644
index 0000000..8b16984
--- /dev/null
+++ b/vue/primitives/src/combobox/ComboboxTrigger.vue
@@ -0,0 +1,53 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ComboboxTriggerProps extends PrimitiveProps {
+  /** Disable the trigger independently from the root. */
+  disabled?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, watchPostEffect } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { useComboboxRootContext } from './context';
+import { getOpenState } from './utils';
+
+const { as = 'button', disabled = false } = defineProps<ComboboxTriggerProps>();
+
+const { forwardRef, currentElement } = useForwardExpose();
+const rootCtx = useComboboxRootContext();
+
+const isDisabled = computed(() => disabled || rootCtx.disabled.value);
+
+watchPostEffect(() => rootCtx.onTriggerChange(currentElement.value));
+onBeforeUnmount(() => rootCtx.onTriggerChange(undefined));
+
+function handleClick(event: MouseEvent) {
+  if (isDisabled.value) return;
+  event.preventDefault();
+  rootCtx.onOpenChange(!rootCtx.open.value);
+}
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :type="as === 'button' ? 'button' : undefined"
+    tabindex="-1"
+    aria-haspopup="listbox"
+    aria-label="Show options"
+    :aria-controls="rootCtx.contentId.value"
+    :aria-expanded="rootCtx.open.value"
+    :aria-disabled="isDisabled || undefined"
+    :disabled="isDisabled || undefined"
+    :data-state="getOpenState(rootCtx.open.value)"
+    :data-disabled="isDisabled ? '' : undefined"
+    @click="handleClick"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/combobox/ComboboxViewport.vue b/vue/primitives/src/combobox/ComboboxViewport.vue
new file mode 100644
index 0000000..0d54883
--- /dev/null
+++ b/vue/primitives/src/combobox/ComboboxViewport.vue
@@ -0,0 +1,32 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ComboboxViewportProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { watchPostEffect } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { useComboboxContentContext } from './context';
+
+const { as = 'div' } = defineProps<ComboboxViewportProps>();
+
+const { forwardRef, currentElement } = useForwardExpose();
+const contentCtx = useComboboxContentContext();
+
+watchPostEffect(() => contentCtx.onViewportChange(currentElement.value));
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    role="presentation"
+    data-primitives-combobox-viewport
+    style="position: relative; flex: 1 1 0%; overflow: hidden auto"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/combobox/__test__/Combobox.live-region.test.ts b/vue/primitives/src/combobox/__test__/Combobox.live-region.test.ts
new file mode 100644
index 0000000..465a4fe
--- /dev/null
+++ b/vue/primitives/src/combobox/__test__/Combobox.live-region.test.ts
@@ -0,0 +1,81 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import { userEvent } from 'vitest/browser';
+import { defineComponent, h, nextTick, ref } from 'vue';
+
+import {
+  ComboboxContent,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxPortal,
+  ComboboxRoot,
+  ComboboxTrigger,
+  ComboboxViewport,
+} from '../index';
+
+function mountCombobox() {
+  const search = ref('');
+  const Harness = defineComponent({
+    setup: () => () => h(ComboboxRoot, { defaultOpen: true, multiple: false }, {
+      default: () => [
+        h(ComboboxTrigger, { id: 'trigger' }, {
+          default: () => h(ComboboxInput, {
+            id: 'input',
+            'onUpdate:searchTerm': (v: string) => { search.value = v; },
+          }),
+        }),
+        h(ComboboxPortal, {}, {
+          default: () => h(ComboboxContent, {}, {
+            default: () => h(ComboboxViewport, {}, {
+              default: () => [
+                h(ComboboxItem, { value: 'apple', textValue: 'Apple' }, { default: () => 'Apple' }),
+                h(ComboboxItem, { value: 'banana', textValue: 'Banana' }, { default: () => 'Banana' }),
+                h(ComboboxItem, { value: 'cherry', textValue: 'Cherry' }, { default: () => 'Cherry' }),
+              ],
+            }),
+          }),
+        }),
+      ],
+    }),
+  });
+  return { wrapper: mount(Harness, { attachTo: document.body }), search };
+}
+
+function getLiveRegion(): HTMLElement | null {
+  return document.querySelector('[data-primitives-combobox-announce]');
+}
+
+describe('Combobox — filtered-results live region', () => {
+  it('announces "N results available." reflecting the unfiltered count on open', async () => {
+    const { wrapper } = mountCombobox();
+    await nextTick();
+    await nextTick();
+    await nextTick();
+    const live = getLiveRegion();
+    expect(live).toBeTruthy();
+    expect(live!.getAttribute('role')).toBe('status');
+    expect(live!.getAttribute('aria-live')).toBe('polite');
+    expect(live!.textContent?.trim()).toBe('3 results available.');
+    wrapper.unmount();
+  });
+
+  it('updates the count as the search term filters items', async () => {
+    const { wrapper } = mountCombobox();
+    await nextTick();
+    await nextTick();
+    await nextTick();
+    const input = document.querySelector<HTMLInputElement>('#input')!;
+    await userEvent.click(input);
+    await userEvent.type(input, 'app');
+    await nextTick();
+    await nextTick();
+    expect(getLiveRegion()!.textContent?.trim()).toBe('1 result available.');
+
+    await userEvent.clear(input);
+    await userEvent.type(input, 'zz');
+    await nextTick();
+    await nextTick();
+    expect(getLiveRegion()!.textContent?.trim()).toBe('0 results available.');
+    wrapper.unmount();
+  });
+});
diff --git a/vue/primitives/src/combobox/__test__/__screenshots__/Combobox.live-region.test.ts/Combobox---filtered-results-live-region-announces--N-results-available---reflecting-the-unfiltered-count-on-open-1.png b/vue/primitives/src/combobox/__test__/__screenshots__/Combobox.live-region.test.ts/Combobox---filtered-results-live-region-announces--N-results-available---reflecting-the-unfiltered-count-on-open-1.png
new file mode 100644
index 0000000..9561153
Binary files /dev/null and b/vue/primitives/src/combobox/__test__/__screenshots__/Combobox.live-region.test.ts/Combobox---filtered-results-live-region-announces--N-results-available---reflecting-the-unfiltered-count-on-open-1.png differ
diff --git a/vue/primitives/src/combobox/__test__/__screenshots__/Combobox.live-region.test.ts/Combobox---filtered-results-live-region-updates-the-count-as-the-search-term-filters-items-1.png b/vue/primitives/src/combobox/__test__/__screenshots__/Combobox.live-region.test.ts/Combobox---filtered-results-live-region-updates-the-count-as-the-search-term-filters-items-1.png
new file mode 100644
index 0000000..0792607
Binary files /dev/null and b/vue/primitives/src/combobox/__test__/__screenshots__/Combobox.live-region.test.ts/Combobox---filtered-results-live-region-updates-the-count-as-the-search-term-filters-items-1.png differ
diff --git a/vue/primitives/src/combobox/context.ts b/vue/primitives/src/combobox/context.ts
new file mode 100644
index 0000000..48a81f0
--- /dev/null
+++ b/vue/primitives/src/combobox/context.ts
@@ -0,0 +1,112 @@
+import type { ComputedRef, Ref, ShallowRef } from 'vue';
+import type { Direction } from '../config-provider';
+import type { AcceptableValue, ComboboxFilterFunction } from './utils';
+
+import { useContextFactory } from '@robonen/vue';
+
+export interface ComboboxItemInfo<T = AcceptableValue> {
+  value: T;
+  textValue: string;
+  disabled: boolean;
+}
+
+export interface ComboboxFilterState {
+  count: number;
+  items: Set<string>;
+  groups: Set<string>;
+}
+
+export interface ComboboxRootContext<T = AcceptableValue> {
+  modelValue: Ref<T | T[] | undefined>;
+  onValueChange: (value: T) => void;
+  multiple: Ref<boolean>;
+  open: Ref<boolean>;
+  onOpenChange: (open: boolean) => void;
+  disabled: Ref<boolean>;
+  dir: Ref<Direction>;
+  name: Ref<string | undefined>;
+  required: Ref<boolean>;
+  by?: string | ((a: T, b: T) => boolean);
+  isSelected: (value: T) => boolean;
+
+  searchTerm: Ref<string>;
+  onSearchTermChange: (value: string) => void;
+  resetSearchTermOnBlur: Ref<boolean>;
+  resetSearchTermOnSelect: Ref<boolean>;
+  ignoreFilter: Ref<boolean>;
+  filterFunction: Ref<ComboboxFilterFunction | undefined>;
+  displayValue?: (value: T | T[] | undefined) => string;
+
+  isUserInputted: Ref<boolean>;
+  onUserInputtedChange: (value: boolean) => void;
+
+  contentId: Ref<string>;
+  triggerElement: ShallowRef<HTMLElement | undefined>;
+  onTriggerChange: (el: HTMLElement | undefined) => void;
+  inputElement: ShallowRef<HTMLInputElement | undefined>;
+  onInputChange: (el: HTMLInputElement | undefined) => void;
+  contentElement: ShallowRef<HTMLElement | undefined>;
+  onContentChange: (el: HTMLElement | undefined) => void;
+  parentElement: ShallowRef<HTMLElement | undefined>;
+  onParentChange: (el: HTMLElement | undefined) => void;
+
+  selectedValue: ShallowRef<T | undefined>;
+  selectedValueId: Ref<string | undefined>;
+  onSelectedValueChange: (value: T | undefined, id?: string) => void;
+
+  allItems: ShallowRef<Map<string, ComboboxItemInfo<T>>>;
+  onItemRegister: (id: string, info: ComboboxItemInfo<T>) => void;
+  onItemUnregister: (id: string) => void;
+  allGroups: ShallowRef<Map<string, Set<string>>>;
+  onGroupRegister: (groupId: string) => void;
+  onGroupUnregister: (groupId: string) => void;
+  onGroupItemRegister: (groupId: string, itemId: string) => void;
+  onGroupItemUnregister: (groupId: string, itemId: string) => void;
+
+  filterState: ComputedRef<ComboboxFilterState>;
+
+  /** Returns visible, enabled item elements in DOM order. */
+  getVisibleItemElements: () => HTMLElement[];
+  /** Highlights an item element by its id. */
+  highlightItemById: (id: string | undefined) => void;
+  /** Highlights the first visible item. */
+  highlightFirstItem: () => void;
+}
+
+export interface ComboboxContentContext {
+  viewportElement: ShallowRef<HTMLElement | undefined>;
+  onViewportChange: (el: HTMLElement | undefined) => void;
+  position: Ref<'inline' | 'popper'>;
+}
+
+export interface ComboboxGroupContext {
+  id: Ref<string>;
+}
+
+export interface ComboboxItemContext<T = AcceptableValue> {
+  id: Ref<string>;
+  value: T;
+  textValue: Ref<string>;
+  isSelected: Ref<boolean>;
+  isDisabled: Ref<boolean>;
+}
+
+export const {
+  inject: useComboboxRootContext,
+  provide: provideComboboxRootContext,
+} = useContextFactory<ComboboxRootContext<any>>('ComboboxRoot');
+
+export const {
+  inject: useComboboxContentContext,
+  provide: provideComboboxContentContext,
+} = useContextFactory<ComboboxContentContext>('ComboboxContent');
+
+export const {
+  inject: useComboboxGroupContext,
+  provide: provideComboboxGroupContext,
+} = useContextFactory<ComboboxGroupContext>('ComboboxGroup');
+
+export const {
+  inject: useComboboxItemContext,
+  provide: provideComboboxItemContext,
+} = useContextFactory<ComboboxItemContext<any>>('ComboboxItem');
diff --git a/vue/primitives/src/combobox/index.ts b/vue/primitives/src/combobox/index.ts
new file mode 100644
index 0000000..12e8346
--- /dev/null
+++ b/vue/primitives/src/combobox/index.ts
@@ -0,0 +1,51 @@
+export { default as ComboboxAnchor } from './ComboboxAnchor.vue';
+export { default as ComboboxArrow } from './ComboboxArrow.vue';
+export { default as ComboboxCancel } from './ComboboxCancel.vue';
+export { default as ComboboxContent } from './ComboboxContent.vue';
+export { default as ComboboxContentImpl } from './ComboboxContentImpl.vue';
+export { default as ComboboxEmpty } from './ComboboxEmpty.vue';
+export { default as ComboboxGroup } from './ComboboxGroup.vue';
+export { default as ComboboxInput } from './ComboboxInput.vue';
+export { default as ComboboxItem } from './ComboboxItem.vue';
+export { default as ComboboxItemIndicator } from './ComboboxItemIndicator.vue';
+export { default as ComboboxLabel } from './ComboboxLabel.vue';
+export { default as ComboboxPortal } from './ComboboxPortal.vue';
+export { default as ComboboxRoot } from './ComboboxRoot.vue';
+export { default as ComboboxSeparator } from './ComboboxSeparator.vue';
+export { default as ComboboxTrigger } from './ComboboxTrigger.vue';
+export { default as ComboboxViewport } from './ComboboxViewport.vue';
+
+export {
+  useComboboxContentContext,
+  useComboboxGroupContext,
+  useComboboxItemContext,
+  useComboboxRootContext,
+} from './context';
+
+export type {
+  ComboboxContentContext,
+  ComboboxFilterState,
+  ComboboxGroupContext,
+  ComboboxItemContext,
+  ComboboxItemInfo,
+  ComboboxRootContext,
+} from './context';
+
+export type { AcceptableValue, ComboboxFilterFunction, ComboboxFilterItem } from './utils';
+
+export type { ComboboxAnchorProps } from './ComboboxAnchor.vue';
+export type { ComboboxArrowProps } from './ComboboxArrow.vue';
+export type { ComboboxCancelProps } from './ComboboxCancel.vue';
+export type { ComboboxContentEmits, ComboboxContentProps } from './ComboboxContent.vue';
+export type { ComboboxContentImplEmits, ComboboxContentImplProps } from './ComboboxContentImpl.vue';
+export type { ComboboxEmptyProps } from './ComboboxEmpty.vue';
+export type { ComboboxGroupProps } from './ComboboxGroup.vue';
+export type { ComboboxInputProps } from './ComboboxInput.vue';
+export type { ComboboxItemIndicatorProps } from './ComboboxItemIndicator.vue';
+export type { ComboboxItemProps } from './ComboboxItem.vue';
+export type { ComboboxLabelProps } from './ComboboxLabel.vue';
+export type { ComboboxPortalProps } from './ComboboxPortal.vue';
+export type { ComboboxRootEmits, ComboboxRootProps } from './ComboboxRoot.vue';
+export type { ComboboxSeparatorProps } from './ComboboxSeparator.vue';
+export type { ComboboxTriggerProps } from './ComboboxTrigger.vue';
+export type { ComboboxViewportProps } from './ComboboxViewport.vue';
diff --git a/vue/primitives/src/combobox/utils.ts b/vue/primitives/src/combobox/utils.ts
new file mode 100644
index 0000000..cca782d
--- /dev/null
+++ b/vue/primitives/src/combobox/utils.ts
@@ -0,0 +1,57 @@
+export type AcceptableValue = string | number | boolean | Record<string, unknown>;
+
+export const OPEN_KEYS = ['Enter', ' ', 'ArrowDown', 'ArrowUp', 'PageUp', 'PageDown', 'Home', 'End'];
+export const SELECTION_KEYS = ['Enter', ' '];
+
+export function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}
+
+export function getOpenState(open: boolean): 'open' | 'closed' {
+  return open ? 'open' : 'closed';
+}
+
+export function compare<T>(
+  a: T | undefined,
+  b: T | undefined,
+  by?: string | ((a: T, b: T) => boolean),
+): boolean {
+  if (a === undefined || b === undefined) return false;
+  if (by === undefined) return a === b;
+  if (typeof by === 'function') return by(a as T, b as T);
+  return (a as any)?.[by] === (b as any)?.[by];
+}
+
+export function valueComparator<T>(
+  value: T | T[] | undefined,
+  current: T,
+  by?: string | ((a: T, b: T) => boolean),
+): boolean {
+  if (value === undefined) return false;
+  if (!Array.isArray(value)) return compare(value, current, by);
+  for (const v of value) {
+    if (compare(v, current, by)) return true;
+  }
+  return false;
+}
+
+export interface ComboboxFilterItem {
+  id: string;
+  textValue: string;
+}
+
+export type ComboboxFilterFunction = (
+  items: ComboboxFilterItem[],
+  searchTerm: string,
+) => ComboboxFilterItem[];
+
+export const defaultFilter: ComboboxFilterFunction = (items, searchTerm) => {
+  const term = searchTerm.toLowerCase();
+  if (!term) return items;
+  const out: ComboboxFilterItem[] = [];
+  for (let i = 0; i < items.length; i++) {
+    const it = items[i]!;
+    if (it.textValue.toLowerCase().includes(term)) out.push(it);
+  }
+  return out;
+};
diff --git a/vue/primitives/src/command/CommandEmpty.vue b/vue/primitives/src/command/CommandEmpty.vue
new file mode 100644
index 0000000..6de4a4a
--- /dev/null
+++ b/vue/primitives/src/command/CommandEmpty.vue
@@ -0,0 +1,39 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CommandEmptyProps extends PrimitiveProps {
+  /** Render even while there is no active search term. */
+  always?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { useCommandContext } from './context';
+
+const { as = 'div', always = false } = defineProps<CommandEmptyProps>();
+
+const { forwardRef } = useForwardExpose();
+const ctx = useCommandContext();
+
+const shouldRender = computed(() => {
+  if (ctx.filteredItems.value.size !== 0) return false;
+  if (always) return true;
+  return ctx.searchTerm.value.length > 0;
+});
+</script>
+
+<template>
+  <Primitive
+    v-if="shouldRender"
+    :ref="forwardRef"
+    :as="as"
+    role="presentation"
+    data-primitives-command-empty
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/command/CommandGroup.vue b/vue/primitives/src/command/CommandGroup.vue
new file mode 100644
index 0000000..935c28a
--- /dev/null
+++ b/vue/primitives/src/command/CommandGroup.vue
@@ -0,0 +1,73 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CommandGroupProps extends PrimitiveProps {
+  /** Group heading text (rendered when the default slot doesn't override it). */
+  heading?: string;
+  /** Stable identifier for the group. Auto-generated when omitted. */
+  value?: string;
+  /** Render the group even when all of its items are filtered out. */
+  forceMount?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, toRef } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { useId } from '../config-provider';
+import { Primitive } from '../primitive';
+import { provideCommandGroupContext, useCommandContext } from './context';
+
+const {
+  as = 'div',
+  heading,
+  value,
+  forceMount = false,
+} = defineProps<CommandGroupProps>();
+
+const { forwardRef } = useForwardExpose();
+const ctx = useCommandContext();
+
+const id = useId(() => value, 'command-group');
+const headingId = useId(undefined, 'command-group-heading');
+
+const hasVisibleItem = computed(() => {
+  const set = ctx.allGroups.value.get(id.value);
+  if (!set || set.size === 0) return false;
+  for (const v of set) {
+    const info = ctx.allItems.value.get(v);
+    if (!info || info.disabled) continue;
+    if (ctx.filteredItems.value.has(v)) return true;
+  }
+  return false;
+});
+
+const isVisible = computed(() => forceMount || hasVisibleItem.value);
+
+onMounted(() => ctx.registerGroup(id.value));
+onBeforeUnmount(() => ctx.unregisterGroup(id.value));
+
+provideCommandGroupContext({
+  id,
+  forceMount: toRef(() => forceMount),
+});
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    role="presentation"
+    :data-primitives-state="isVisible ? 'visible' : 'hidden'"
+    :hidden="!isVisible || undefined"
+    data-primitives-command-group
+  >
+    <div v-if="heading" :id="headingId" data-primitives-command-group-heading>
+      {{ heading }}
+    </div>
+    <div role="group" :aria-labelledby="heading ? headingId : undefined">
+      <slot />
+    </div>
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/command/CommandInput.vue b/vue/primitives/src/command/CommandInput.vue
new file mode 100644
index 0000000..b135fbb
--- /dev/null
+++ b/vue/primitives/src/command/CommandInput.vue
@@ -0,0 +1,165 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CommandInputProps extends PrimitiveProps {
+  /** Controlled value; falls back to root `searchTerm`. */
+  modelValue?: string;
+  /** Disable the input. */
+  disabled?: boolean;
+  /** Focus the input on mount. */
+  autoFocus?: boolean;
+}
+
+export interface CommandInputEmits {
+  'update:modelValue': [value: string];
+  'update:searchTerm': [value: string];
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onMounted, watch } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { useCommandContext } from './context';
+
+const {
+  as = 'input',
+  modelValue,
+  disabled = false,
+  autoFocus = false,
+} = defineProps<CommandInputProps>();
+
+const emit = defineEmits<CommandInputEmits>();
+
+const { forwardRef, currentElement } = useForwardExpose();
+const ctx = useCommandContext();
+
+const activeDescendant = computed(() => {
+  const v = ctx.selectedValue.value;
+  return v === undefined ? undefined : ctx.getItemId(v);
+});
+
+onMounted(() => {
+  const el = currentElement.value as HTMLInputElement | undefined;
+  if (!el) return;
+  if (modelValue !== undefined && modelValue !== ctx.searchTerm.value) {
+    ctx.setSearchTerm(modelValue);
+  }
+  if (el.value !== ctx.searchTerm.value) el.value = ctx.searchTerm.value;
+  if (autoFocus) setTimeout(() => el.focus(), 0);
+});
+
+watch(
+  () => modelValue,
+  (v) => {
+    if (v === undefined) return;
+    if (v !== ctx.searchTerm.value) ctx.setSearchTerm(v);
+  },
+);
+
+watch(
+  () => ctx.searchTerm.value,
+  (v) => {
+    const el = currentElement.value as HTMLInputElement | undefined;
+    if (el && el.value !== v) el.value = v;
+  },
+);
+
+function moveBy(delta: number) {
+  const items = ctx.getSelectableItems();
+  if (items.length === 0) return;
+  const cur = ctx.selectedValue.value;
+  const idx = cur === undefined ? -1 : items.indexOf(cur);
+  let next: number;
+  if (idx === -1) {
+    next = delta > 0 ? 0 : items.length - 1;
+  }
+  else {
+    next = idx + delta;
+    if (ctx.loop.value) {
+      next = (next + items.length) % items.length;
+    }
+    else {
+      if (next < 0) next = 0;
+      if (next > items.length - 1) next = items.length - 1;
+    }
+  }
+  ctx.setSelectedValue(items[next]);
+  scrollSelectedIntoView();
+}
+
+function moveTo(position: 'first' | 'last') {
+  const items = ctx.getSelectableItems();
+  if (items.length === 0) return;
+  ctx.setSelectedValue(position === 'first' ? items[0] : items[items.length - 1]);
+  scrollSelectedIntoView();
+}
+
+function scrollSelectedIntoView() {
+  const v = ctx.selectedValue.value;
+  const root = ctx.listElement.value;
+  if (v === undefined || !root) return;
+  const id = ctx.getItemId(v);
+  const el = root.querySelector<HTMLElement>(`#${CSS.escape(id)}`);
+  el?.scrollIntoView({ block: 'nearest' });
+}
+
+function handleInput(event: Event) {
+  const next = (event.target as HTMLInputElement).value;
+  ctx.setSearchTerm(next);
+  emit('update:modelValue', next);
+  emit('update:searchTerm', next);
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+  if (disabled) return;
+  switch (event.key) {
+    case 'ArrowDown':
+      event.preventDefault();
+      moveBy(1);
+      break;
+    case 'ArrowUp':
+      event.preventDefault();
+      moveBy(-1);
+      break;
+    case 'Home':
+      event.preventDefault();
+      moveTo('first');
+      break;
+    case 'End':
+      event.preventDefault();
+      moveTo('last');
+      break;
+    case 'Enter':
+      if (ctx.selectedValue.value !== undefined) {
+        event.preventDefault();
+        ctx.commitSelected();
+      }
+      break;
+  }
+}
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    type="text"
+    role="combobox"
+    autocomplete="off"
+    spellcheck="false"
+    aria-autocomplete="list"
+    :aria-expanded="true"
+    :aria-controls="ctx.listId.value"
+    :aria-activedescendant="activeDescendant"
+    :aria-disabled="disabled || undefined"
+    :disabled="disabled || undefined"
+    :data-disabled="disabled ? '' : undefined"
+    data-primitives-command-input
+    @input="handleInput"
+    @keydown="handleKeyDown"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/command/CommandItem.vue b/vue/primitives/src/command/CommandItem.vue
new file mode 100644
index 0000000..d003845
--- /dev/null
+++ b/vue/primitives/src/command/CommandItem.vue
@@ -0,0 +1,127 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CommandItemProps extends PrimitiveProps {
+  /** Item value — used by filter, selection, and `data-value`. */
+  value: string;
+  /** Extra terms the default filter should match against. */
+  keywords?: string[];
+  /** Disable this item — it is skipped by keyboard nav and filtering. */
+  disabled?: boolean;
+  /** Render even when filtered out. */
+  forceMount?: boolean;
+}
+
+export interface CommandItemEmits {
+  select: [value: string];
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, watch } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { useCommandContext, useCommandGroupContext } from './context';
+
+const {
+  as = 'div',
+  value,
+  keywords,
+  disabled = false,
+  forceMount = false,
+} = defineProps<CommandItemProps>();
+
+const emit = defineEmits<CommandItemEmits>();
+
+const { forwardRef } = useForwardExpose();
+const ctx = useCommandContext();
+
+let groupCtx: ReturnType<typeof useCommandGroupContext> | null = null;
+try {
+  groupCtx = useCommandGroupContext();
+}
+catch {
+  groupCtx = null;
+}
+
+const itemId = computed(() => ctx.getItemId(value));
+const isVisible = computed(() => forceMount || ctx.filteredItems.value.has(value));
+const isHighlighted = computed(() => ctx.selectedValue.value === value);
+const isSelected = computed(() => ctx.modelValue.value === value);
+
+function syncRegistration() {
+  ctx.registerItem({
+    value,
+    keywords: keywords ?? [],
+    disabled,
+    onSelect: () => emit('select', value),
+  });
+}
+
+onMounted(() => {
+  syncRegistration();
+  if (groupCtx) ctx.registerGroupItem(groupCtx.id.value, value);
+});
+
+watch(
+  () => [value, disabled, (keywords ?? []).join('\u0001')] as const,
+  (_next, prev) => {
+    const [prevValue] = prev ?? [];
+    if (prevValue !== undefined && prevValue !== value) {
+      ctx.unregisterItem(prevValue);
+      if (groupCtx) ctx.unregisterGroupItem(groupCtx.id.value, prevValue);
+      syncRegistration();
+      if (groupCtx) ctx.registerGroupItem(groupCtx.id.value, value);
+    }
+    else {
+      syncRegistration();
+    }
+  },
+);
+
+onBeforeUnmount(() => {
+  ctx.unregisterItem(value);
+  if (groupCtx) ctx.unregisterGroupItem(groupCtx.id.value, value);
+});
+
+function handlePointerMove(event: PointerEvent) {
+  if (disabled) return;
+  // Only react to genuine mouse / pen movement; keyboard nav already manages highlight.
+  if (event.pointerType === 'touch') return;
+  if (ctx.selectedValue.value !== value) ctx.setSelectedValue(value);
+}
+
+function handleClick(event: MouseEvent) {
+  if (disabled) {
+    event.preventDefault();
+    return;
+  }
+  event.preventDefault();
+  ctx.setSelectedValue(value);
+  ctx.commitSelected();
+}
+</script>
+
+<template>
+  <Primitive
+    v-show="isVisible"
+    :ref="forwardRef"
+    :id="itemId"
+    :as="as"
+    role="option"
+    :aria-selected="isHighlighted || undefined"
+    :aria-disabled="disabled || undefined"
+    :data-state="isHighlighted ? 'selected' : ''"
+    :data-selected="isSelected ? '' : undefined"
+    :data-disabled="disabled ? '' : undefined"
+    :data-primitives-state="isVisible ? 'visible' : 'hidden'"
+    :tabindex="-1"
+    data-primitives-command-item
+    :data-value="value"
+    @click="handleClick"
+    @pointermove="handlePointerMove"
+  >
+    <slot :highlighted="isHighlighted" :selected="isSelected" :disabled="disabled" />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/command/CommandList.vue b/vue/primitives/src/command/CommandList.vue
new file mode 100644
index 0000000..e88f62e
--- /dev/null
+++ b/vue/primitives/src/command/CommandList.vue
@@ -0,0 +1,92 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CommandListProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, watch } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { useCommandContext } from './context';
+
+const { as = 'div' } = defineProps<CommandListProps>();
+
+const { forwardRef, currentElement } = useForwardExpose();
+const ctx = useCommandContext();
+
+let resizeObserver: ResizeObserver | undefined;
+let observedChild: Element | undefined;
+
+function setHeight(height: number) {
+  const list = currentElement.value as HTMLElement | undefined;
+  if (!list) return;
+  list.style.setProperty('--primitives-command-list-height', `${height}px`);
+}
+
+function observeFirstChild() {
+  const list = currentElement.value as HTMLElement | undefined;
+  if (!list) return;
+  const child = list.firstElementChild ?? undefined;
+  if (child === observedChild) return;
+
+  if (resizeObserver && observedChild) resizeObserver.unobserve(observedChild);
+  observedChild = child;
+
+  if (!child) {
+    setHeight(0);
+    return;
+  }
+  resizeObserver?.observe(child);
+  setHeight((child as HTMLElement).offsetHeight);
+}
+
+onMounted(() => {
+  const list = currentElement.value as HTMLElement | undefined;
+  if (!list) return;
+  ctx.setListElement(list);
+
+  if (typeof ResizeObserver !== 'undefined') {
+    resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const target = entry.target as HTMLElement;
+        setHeight(target.offsetHeight);
+      }
+    });
+  }
+
+  observeFirstChild();
+
+  // React to subtree changes (items added/removed/reordered).
+  const mo = new MutationObserver(observeFirstChild);
+  mo.observe(list, { childList: true });
+
+  onBeforeUnmount(() => {
+    mo.disconnect();
+    resizeObserver?.disconnect();
+    resizeObserver = undefined;
+    observedChild = undefined;
+    ctx.setListElement(undefined);
+  });
+});
+
+// Re-evaluate the observed child whenever the filter result changes (items hide/show).
+watch(
+  () => ctx.filteredItems.value,
+  () => observeFirstChild(),
+);
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :id="ctx.listId.value"
+    role="listbox"
+    :aria-labelledby="ctx.labelId.value"
+    data-primitives-command-list
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/command/CommandLoading.vue b/vue/primitives/src/command/CommandLoading.vue
new file mode 100644
index 0000000..3cc35fe
--- /dev/null
+++ b/vue/primitives/src/command/CommandLoading.vue
@@ -0,0 +1,40 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CommandLoadingProps extends PrimitiveProps {
+  /** Accessible label describing the loading state. */
+  label?: string;
+  /** Optional 0..100 progress value — published via `aria-valuenow`. */
+  progress?: number;
+}
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '@robonen/vue';
+
+import { Primitive } from '../primitive';
+
+const {
+  as = 'div',
+  label = 'Loading',
+  progress,
+} = defineProps<CommandLoadingProps>();
+
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    role="progressbar"
+    :aria-valuetext="label"
+    :aria-valuenow="progress"
+    :aria-valuemin="progress === undefined ? undefined : 0"
+    :aria-valuemax="progress === undefined ? undefined : 100"
+    aria-live="polite"
+    data-primitives-command-loading
+  >
+    <slot :progress="progress" />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/command/CommandRoot.vue b/vue/primitives/src/command/CommandRoot.vue
new file mode 100644
index 0000000..ad41aac
--- /dev/null
+++ b/vue/primitives/src/command/CommandRoot.vue
@@ -0,0 +1,287 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+import type { CommandFilterFunction } from './utils';
+
+export interface CommandRootProps extends PrimitiveProps {
+  /** Controlled selected value. Use `v-model`. */
+  modelValue?: string;
+  /** Uncontrolled initial selected value. */
+  defaultValue?: string;
+  /** Controlled search term. Use `v-model:searchTerm`. */
+  searchTerm?: string;
+  /** Uncontrolled initial search term. */
+  defaultSearchTerm?: string;
+  /** Custom scoring filter. Returns 0..1 (0 = hide). */
+  filter?: CommandFilterFunction;
+  /** Run the filter automatically. Set false to perform filtering yourself. @default true */
+  shouldFilter?: boolean;
+  /** Loop keyboard navigation at the ends of the list. @default false */
+  loop?: boolean;
+  /** Accessible label announced to assistive tech. */
+  label?: string;
+}
+
+export interface CommandRootEmits {
+  'update:modelValue': [value: string | undefined];
+  'update:searchTerm': [value: string];
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, shallowRef, toRef, triggerRef, watch } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { useId } from '../config-provider';
+import { Primitive } from '../primitive';
+import { VisuallyHidden } from '../visually-hidden';
+import { provideCommandContext } from './context';
+import type { CommandItemInfo } from './context';
+import { COMMAND_ITEM_ATTR, COMMAND_VALUE_ATTR, defaultFilter } from './utils';
+
+defineOptions({ inheritAttrs: false });
+
+const {
+  as = 'div',
+  defaultValue,
+  defaultSearchTerm = '',
+  filter,
+  shouldFilter = true,
+  loop = false,
+  label,
+} = defineProps<CommandRootProps>();
+
+const emit = defineEmits<CommandRootEmits>();
+
+const { forwardRef } = useForwardExpose();
+
+const localValue = ref<string | undefined>(defaultValue);
+const value = defineModel<string | undefined>('modelValue', {
+  default: undefined,
+  get: v => v ?? localValue.value,
+  set: (v) => {
+    localValue.value = v;
+    return v;
+  },
+});
+
+const localSearch = ref<string>(defaultSearchTerm);
+const search = defineModel<string>('searchTerm', {
+  default: undefined,
+  get: v => v ?? localSearch.value,
+  set: (v) => {
+    localSearch.value = v;
+    return v;
+  },
+});
+
+const selectedValue = ref<string | undefined>(undefined);
+
+const listId = useId(undefined, 'command-list');
+const labelId = useId(undefined, 'command-label');
+
+const listElement = shallowRef<HTMLElement | undefined>(undefined);
+
+const allItems = shallowRef(new Map<string, CommandItemInfo>());
+const allGroups = shallowRef(new Map<string, Set<string>>());
+
+function registerItem(info: CommandItemInfo) {
+  allItems.value.set(info.value, info);
+  triggerRef(allItems);
+}
+
+function unregisterItem(value: string) {
+  if (allItems.value.delete(value)) triggerRef(allItems);
+  if (selectedValue.value === value) selectedValue.value = undefined;
+}
+
+function registerGroup(groupId: string) {
+  if (!allGroups.value.has(groupId)) {
+    allGroups.value.set(groupId, new Set());
+    triggerRef(allGroups);
+  }
+}
+
+function unregisterGroup(groupId: string) {
+  if (allGroups.value.delete(groupId)) triggerRef(allGroups);
+}
+
+function registerGroupItem(groupId: string, val: string) {
+  let set = allGroups.value.get(groupId);
+  if (!set) {
+    set = new Set();
+    allGroups.value.set(groupId, set);
+  }
+  set.add(val);
+  triggerRef(allGroups);
+}
+
+function unregisterGroupItem(groupId: string, val: string) {
+  const set = allGroups.value.get(groupId);
+  if (set?.delete(val)) triggerRef(allGroups);
+}
+
+const filterRef = toRef(() => filter);
+const shouldFilterRef = toRef(() => shouldFilter);
+
+const filteredItems = computed<Map<string, number>>(() => {
+  const out = new Map<string, number>();
+  const term = search.value;
+  const useFilter = shouldFilterRef.value && term.length > 0;
+  const fn = filterRef.value ?? defaultFilter;
+
+  for (const [val, info] of allItems.value) {
+    const score = useFilter ? fn(val, term, info.keywords) : 1;
+    if (score > 0) out.set(val, score);
+  }
+  return out;
+});
+
+function escapeAttr(v: string): string {
+  if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') return CSS.escape(v);
+  return v.replaceAll(/["\\]/g, '\\$&');
+}
+
+function getSelectableItems(): string[] {
+  const filtered = filteredItems.value;
+  const root = listElement.value;
+
+  const candidates: Array<{ value: string; score: number; idx: number }> = [];
+
+  if (root) {
+    const els = Array.from(root.querySelectorAll<HTMLElement>(`[${COMMAND_ITEM_ATTR}]`));
+    const indexOf = new Map<string, number>();
+    for (let i = 0; i < els.length; i++) {
+      const v = els[i]!.getAttribute(COMMAND_VALUE_ATTR);
+      if (v !== null) indexOf.set(v, i);
+    }
+    for (const [val, score] of filtered) {
+      const info = allItems.value.get(val);
+      if (!info || info.disabled) continue;
+      candidates.push({ value: val, score, idx: indexOf.get(val) ?? Number.MAX_SAFE_INTEGER });
+    }
+  }
+  else {
+    let i = 0;
+    for (const [val, score] of filtered) {
+      const info = allItems.value.get(val);
+      if (!info || info.disabled) continue;
+      candidates.push({ value: val, score, idx: i++ });
+    }
+  }
+
+  candidates.sort((a, b) => b.score - a.score || a.idx - b.idx);
+  return candidates.map(c => c.value);
+}
+
+function getItemId(val: string): string {
+  return `${listId.value}-item-${escapeAttr(val)}`;
+}
+
+function setModelValue(v: string | undefined) {
+  value.value = v;
+  emit('update:modelValue', v);
+}
+
+function setSearchTerm(v: string) {
+  search.value = v;
+  emit('update:searchTerm', v);
+}
+
+function setSelectedValue(v: string | undefined) {
+  selectedValue.value = v;
+}
+
+function setListElement(el: HTMLElement | undefined) {
+  listElement.value = el;
+}
+
+function commitSelected() {
+  const v = selectedValue.value;
+  if (v === undefined) return;
+  const info = allItems.value.get(v);
+  if (!info || info.disabled) return;
+  setModelValue(v);
+  info.onSelect?.();
+}
+
+// Auto-highlight the highest-scored visible item when items or search change.
+watch(
+  [() => search.value, filteredItems, allItems],
+  () => {
+    const current = selectedValue.value;
+    if (current && filteredItems.value.has(current)) {
+      const info = allItems.value.get(current);
+      if (info && !info.disabled) return;
+    }
+    const items = getSelectableItems();
+    selectedValue.value = items[0];
+  },
+  { flush: 'post' },
+);
+
+const announceCount = computed(() => {
+  const n = filteredItems.value.size;
+  return n === 1 ? '1 result available.' : `${n} results available.`;
+});
+
+provideCommandContext({
+  modelValue: value,
+  setModelValue,
+  searchTerm: search,
+  setSearchTerm,
+  selectedValue,
+  setSelectedValue,
+  shouldFilter: toRef(() => shouldFilter),
+  loop: toRef(() => loop),
+  filterFunction: filterRef,
+  listId,
+  labelId,
+  getItemId,
+  allItems,
+  filteredItems,
+  registerItem,
+  unregisterItem,
+  allGroups,
+  registerGroup,
+  unregisterGroup,
+  registerGroupItem,
+  unregisterGroupItem,
+  listElement,
+  setListElement,
+  getSelectableItems,
+  commitSelected,
+});
+
+defineExpose({
+  filteredItems,
+  getSelectableItems,
+  selectedValue,
+  setSelectedValue,
+  commitSelected,
+});
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    role="application"
+    :aria-label="label"
+    :aria-labelledby="label ? undefined : labelId"
+    data-primitives-command-root
+    v-bind="$attrs"
+  >
+    <VisuallyHidden :id="labelId" aria-hidden="true">
+      {{ label ?? 'Command palette' }}
+    </VisuallyHidden>
+    <VisuallyHidden role="status" aria-live="polite">
+      {{ announceCount }}
+    </VisuallyHidden>
+    <slot
+      :search-term="search"
+      :selected-value="selectedValue"
+      :model-value="value"
+      :filtered-count="filteredItems.size"
+    />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/command/CommandSeparator.vue b/vue/primitives/src/command/CommandSeparator.vue
new file mode 100644
index 0000000..8c1de49
--- /dev/null
+++ b/vue/primitives/src/command/CommandSeparator.vue
@@ -0,0 +1,37 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CommandSeparatorProps extends PrimitiveProps {
+  /** Render the separator even while the search term is active. */
+  alwaysRender?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { useCommandContext } from './context';
+
+const { as = 'div', alwaysRender = false } = defineProps<CommandSeparatorProps>();
+
+const { forwardRef } = useForwardExpose();
+const ctx = useCommandContext();
+
+const isVisible = computed(() => alwaysRender || ctx.searchTerm.value.length === 0);
+</script>
+
+<template>
+  <Primitive
+    v-if="isVisible"
+    :ref="forwardRef"
+    :as="as"
+    role="separator"
+    aria-orientation="horizontal"
+    aria-hidden="true"
+    data-primitives-command-separator
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/command/context.ts b/vue/primitives/src/command/context.ts
new file mode 100644
index 0000000..68ad0d4
--- /dev/null
+++ b/vue/primitives/src/command/context.ts
@@ -0,0 +1,71 @@
+import type { ComputedRef, Ref, ShallowRef } from 'vue';
+import type { CommandFilterFunction } from './utils';
+
+import { useContextFactory } from '@robonen/vue';
+
+export interface CommandItemInfo {
+  value: string;
+  keywords: string[];
+  disabled: boolean;
+  onSelect?: () => void;
+}
+
+export interface CommandContext {
+  /** Committed selected value (v-model). */
+  modelValue: Ref<string | undefined>;
+  setModelValue: (value: string | undefined) => void;
+
+  /** Current search term (v-model:searchTerm). */
+  searchTerm: Ref<string>;
+  setSearchTerm: (value: string) => void;
+
+  /** Currently highlighted item value (keyboard / pointer focus). */
+  selectedValue: Ref<string | undefined>;
+  setSelectedValue: (value: string | undefined) => void;
+
+  /** Behavior flags. */
+  shouldFilter: Ref<boolean>;
+  loop: Ref<boolean>;
+  filterFunction: Ref<CommandFilterFunction | undefined>;
+
+  /** A11y identifiers. */
+  listId: Ref<string>;
+  labelId: Ref<string>;
+  getItemId: (value: string) => string;
+
+  /** Registries. */
+  allItems: ShallowRef<Map<string, CommandItemInfo>>;
+  filteredItems: ComputedRef<Map<string, number>>;
+  registerItem: (info: CommandItemInfo) => void;
+  unregisterItem: (value: string) => void;
+
+  allGroups: ShallowRef<Map<string, Set<string>>>;
+  registerGroup: (groupId: string) => void;
+  unregisterGroup: (groupId: string) => void;
+  registerGroupItem: (groupId: string, value: string) => void;
+  unregisterGroupItem: (groupId: string, value: string) => void;
+
+  /** DOM. */
+  listElement: ShallowRef<HTMLElement | undefined>;
+  setListElement: (el: HTMLElement | undefined) => void;
+
+  /** Returns selectable item values sorted by score desc, then DOM order. */
+  getSelectableItems: () => string[];
+  /** Commits the currently-highlighted item: updates modelValue + fires its select callback. */
+  commitSelected: () => void;
+}
+
+export interface CommandGroupContext {
+  id: Ref<string>;
+  forceMount: Ref<boolean>;
+}
+
+export const {
+  inject: useCommandContext,
+  provide: provideCommandContext,
+} = useContextFactory<CommandContext>('Command');
+
+export const {
+  inject: useCommandGroupContext,
+  provide: provideCommandGroupContext,
+} = useContextFactory<CommandGroupContext>('CommandGroup');
diff --git a/vue/primitives/src/command/index.ts b/vue/primitives/src/command/index.ts
new file mode 100644
index 0000000..9da1105
--- /dev/null
+++ b/vue/primitives/src/command/index.ts
@@ -0,0 +1,30 @@
+export { default as CommandEmpty } from './CommandEmpty.vue';
+export { default as CommandGroup } from './CommandGroup.vue';
+export { default as CommandInput } from './CommandInput.vue';
+export { default as CommandItem } from './CommandItem.vue';
+export { default as CommandList } from './CommandList.vue';
+export { default as CommandLoading } from './CommandLoading.vue';
+export { default as CommandRoot } from './CommandRoot.vue';
+export { default as CommandSeparator } from './CommandSeparator.vue';
+
+export {
+  useCommandContext,
+  useCommandGroupContext,
+} from './context';
+
+export type {
+  CommandContext,
+  CommandGroupContext,
+  CommandItemInfo,
+} from './context';
+
+export type { CommandFilterFunction } from './utils';
+
+export type { CommandEmptyProps } from './CommandEmpty.vue';
+export type { CommandGroupProps } from './CommandGroup.vue';
+export type { CommandInputEmits, CommandInputProps } from './CommandInput.vue';
+export type { CommandItemEmits, CommandItemProps } from './CommandItem.vue';
+export type { CommandListProps } from './CommandList.vue';
+export type { CommandLoadingProps } from './CommandLoading.vue';
+export type { CommandRootEmits, CommandRootProps } from './CommandRoot.vue';
+export type { CommandSeparatorProps } from './CommandSeparator.vue';
diff --git a/vue/primitives/src/command/utils.ts b/vue/primitives/src/command/utils.ts
new file mode 100644
index 0000000..ff08839
--- /dev/null
+++ b/vue/primitives/src/command/utils.ts
@@ -0,0 +1,34 @@
+export type CommandFilterFunction = (
+  value: string,
+  search: string,
+  keywords?: string[],
+) => number;
+
+export const COMMAND_ITEM_ATTR = 'data-primitives-command-item';
+export const COMMAND_VALUE_ATTR = 'data-value';
+
+/**
+ * Default scoring filter.
+ *
+ * - Empty search → score 1 (item visible).
+ * - Case-insensitive substring match across `value` + `keywords` → 1.
+ * - In-order subsequence (loose fuzzy) match → 0.5.
+ * - Otherwise → 0 (hide).
+ */
+export const defaultFilter: CommandFilterFunction = (value, search, keywords) => {
+  if (!search) return 1;
+
+  const needle = search.toLowerCase();
+  const haystackParts = keywords && keywords.length > 0 ? [value, ...keywords] : [value];
+  const haystack = haystackParts.join(' ').toLowerCase();
+
+  if (haystack.includes(needle)) return 1;
+
+  let i = 0;
+  for (let h = 0; h < haystack.length && i < needle.length; h++) {
+    if (haystack[h] === needle[i]) i++;
+  }
+  if (i === needle.length) return 0.5;
+
+  return 0;
+};
diff --git a/vue/primitives/src/config-provider/__test__/config-provider.test.ts b/vue/primitives/src/config-provider/__test__/config-provider.test.ts
new file mode 100644
index 0000000..3b0daf7
--- /dev/null
+++ b/vue/primitives/src/config-provider/__test__/config-provider.test.ts
@@ -0,0 +1,197 @@
+import { describe, expect, it } from 'vitest';
+import { computed, defineComponent, h } from 'vue';
+import { mount } from '@vue/test-utils';
+import {
+  provideAppConfig,
+  provideConfig,
+  useConfig,
+  useId,
+} from '..';
+
+// --- useConfig ---
+
+describe('useConfig', () => {
+  it('returns default config when no provider exists', () => {
+    const wrapper = mount(
+      defineComponent({
+        setup() {
+          const config = useConfig();
+          return { config };
+        },
+        render() {
+          return h('div', {
+            'data-dir': this.config.dir.value,
+            'data-target': this.config.teleportTarget.value,
+          });
+        },
+      }),
+    );
+
+    expect(wrapper.find('div').attributes('data-dir')).toBe('ltr');
+    expect(wrapper.find('div').attributes('data-target')).toBe('body');
+
+    wrapper.unmount();
+  });
+
+  it('returns custom config from provideConfig', () => {
+    const Child = defineComponent({
+      setup() {
+        const config = useConfig();
+        return { config };
+      },
+      render() {
+        return h('div', {
+          'data-dir': this.config.dir.value,
+          'data-target': this.config.teleportTarget.value,
+        });
+      },
+    });
+
+    const Parent = defineComponent({
+      setup() {
+        provideConfig({
+          dir: 'rtl',
+          teleportTarget: '#app',
+        });
+      },
+      render() {
+        return h(Child);
+      },
+    });
+
+    const wrapper = mount(Parent);
+
+    expect(wrapper.find('div').attributes('data-dir')).toBe('rtl');
+    expect(wrapper.find('div').attributes('data-target')).toBe('#app');
+
+    wrapper.unmount();
+  });
+
+  it('exposes mutable refs for runtime updates', async () => {
+    const Child = defineComponent({
+      setup() {
+        const config = useConfig();
+        return { config };
+      },
+      render() {
+        return h('div', { 'data-dir': this.config.dir.value });
+      },
+    });
+
+    const Parent = defineComponent({
+      setup() {
+        const config = provideConfig({ dir: 'ltr' });
+        return { config };
+      },
+      render() {
+        return h(Child);
+      },
+    });
+
+    const wrapper = mount(Parent);
+    expect(wrapper.find('div').attributes('data-dir')).toBe('ltr');
+
+    wrapper.vm.config.dir.value = 'rtl';
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.find('div').attributes('data-dir')).toBe('rtl');
+
+    wrapper.unmount();
+  });
+});
+
+// --- provideAppConfig ---
+
+describe('provideAppConfig', () => {
+  it('provides config at app level', () => {
+    const Child = defineComponent({
+      setup() {
+        const config = useConfig();
+        return { config };
+      },
+      render() {
+        return h('div', {
+          'data-dir': this.config.dir.value,
+        });
+      },
+    });
+
+    const wrapper = mount(Child, {
+      global: {
+        plugins: [
+          app => provideAppConfig(app, { dir: 'rtl' }),
+        ],
+      },
+    });
+
+    expect(wrapper.find('div').attributes('data-dir')).toBe('rtl');
+
+    wrapper.unmount();
+  });
+});
+
+// --- useId override ---
+
+describe('useId (config override)', () => {
+  it('uses the toolkit fallback when no override is provided', () => {
+    const Child = defineComponent({
+      setup() {
+        const id = useId();
+        return { id };
+      },
+      render() {
+        return h('div', { 'data-id': this.id });
+      },
+    });
+
+    const wrapper = mount(Child);
+    expect(wrapper.find('div').attributes('data-id')).toMatch(/^robonen-/);
+    wrapper.unmount();
+  });
+
+  it('routes through a provided useId override', () => {
+    let count = 0;
+    const customUseId = (_deterministic?: unknown, prefix = 'x') => {
+      count += 1;
+      const n = count;
+      return computed(() => `${prefix}-${n}`);
+    };
+
+    const Child = defineComponent({
+      setup() {
+        const a = useId();
+        const b = useId(undefined, 'custom');
+        return { a, b };
+      },
+      render() {
+        return h('div', { 'data-a': this.a, 'data-b': this.b });
+      },
+    });
+
+    const wrapper = mount(Child, {
+      global: {
+        plugins: [app => provideAppConfig(app, { useId: customUseId })],
+      },
+    });
+
+    expect(wrapper.find('div').attributes('data-a')).toBe('x-1');
+    expect(wrapper.find('div').attributes('data-b')).toBe('custom-2');
+    wrapper.unmount();
+  });
+
+  it('respects deterministic id passed through the override', () => {
+    const Child = defineComponent({
+      setup() {
+        const id = useId(() => 'fixed-id');
+        return { id };
+      },
+      render() {
+        return h('div', { 'data-id': this.id });
+      },
+    });
+
+    const wrapper = mount(Child);
+    expect(wrapper.find('div').attributes('data-id')).toBe('fixed-id');
+    wrapper.unmount();
+  });
+});
diff --git a/vue/primitives/src/config-provider/context.ts b/vue/primitives/src/config-provider/context.ts
new file mode 100644
index 0000000..2d829f2
--- /dev/null
+++ b/vue/primitives/src/config-provider/context.ts
@@ -0,0 +1,49 @@
+import type { App, ComputedRef, MaybeRefOrGetter, Ref, ShallowRef } from 'vue';
+import { ref, shallowRef, toValue } from 'vue';
+import { useId as toolkitUseId, useContextFactory } from '@robonen/vue';
+
+export type Direction = 'ltr' | 'rtl';
+
+export type UseIdFn = (
+  deterministic?: MaybeRefOrGetter<string | undefined>,
+  prefix?: string,
+) => ComputedRef<string>;
+
+export interface ConfigContext {
+  dir: Ref<Direction>;
+  teleportTarget: ShallowRef<string | HTMLElement>;
+  useId: UseIdFn;
+}
+
+export interface ConfigOptions {
+  dir?: MaybeRefOrGetter<Direction>;
+  teleportTarget?: MaybeRefOrGetter<string | HTMLElement>;
+  useId?: UseIdFn;
+}
+
+const DEFAULT_CONFIG = {
+  dir: 'ltr' as Direction,
+  teleportTarget: 'body' as string | HTMLElement,
+};
+
+const ConfigCtx = useContextFactory<ConfigContext>('ConfigContext');
+
+function resolveContext(options?: ConfigOptions): ConfigContext {
+  return {
+    dir: ref(toValue(options?.dir) ?? DEFAULT_CONFIG.dir),
+    teleportTarget: shallowRef(toValue(options?.teleportTarget) ?? DEFAULT_CONFIG.teleportTarget),
+    useId: options?.useId ?? toolkitUseId,
+  };
+}
+
+export function provideConfig(options?: ConfigOptions): ConfigContext {
+  return ConfigCtx.provide(resolveContext(options));
+}
+
+export function provideAppConfig(app: App, options?: ConfigOptions): ConfigContext {
+  return ConfigCtx.appProvide(app)(resolveContext(options));
+}
+
+export function useConfig(): ConfigContext {
+  return ConfigCtx.inject(resolveContext());
+}
diff --git a/vue/primitives/src/config-provider/index.ts b/vue/primitives/src/config-provider/index.ts
new file mode 100644
index 0000000..e6a7e0b
--- /dev/null
+++ b/vue/primitives/src/config-provider/index.ts
@@ -0,0 +1,10 @@
+export {
+  provideConfig,
+  provideAppConfig,
+  useConfig,
+  type ConfigContext,
+  type ConfigOptions,
+  type Direction,
+  type UseIdFn,
+} from './context';
+export { useId } from './useId';
diff --git a/vue/primitives/src/config-provider/useId.ts b/vue/primitives/src/config-provider/useId.ts
new file mode 100644
index 0000000..28087a6
--- /dev/null
+++ b/vue/primitives/src/config-provider/useId.ts
@@ -0,0 +1,16 @@
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+import { useConfig } from './context';
+
+/**
+ * Primitives-local `useId` that routes through the active `ConfigContext`.
+ * Falls back to the toolkit's default implementation when no override is
+ * configured via `provideConfig({ useId })`.
+ *
+ * Signature matches `@robonen/vue`'s `useId`: `(deterministic?, prefix?)`.
+ */
+export function useId(
+  deterministic?: MaybeRefOrGetter<string | undefined>,
+  prefix?: string,
+): ComputedRef<string> {
+  return useConfig().useId(deterministic, prefix);
+}
diff --git a/vue/primitives/src/context-menu/ContextMenuArrow.vue b/vue/primitives/src/context-menu/ContextMenuArrow.vue
new file mode 100644
index 0000000..bbc7866
--- /dev/null
+++ b/vue/primitives/src/context-menu/ContextMenuArrow.vue
@@ -0,0 +1,15 @@
+<script lang="ts">
+import type { MenuArrowProps } from '../menu';
+
+export interface ContextMenuArrowProps extends MenuArrowProps {}
+</script>
+
+<script setup lang="ts">
+import { MenuArrow } from '../menu';
+
+const props = defineProps<ContextMenuArrowProps>();
+</script>
+
+<template>
+  <MenuArrow v-bind="props"><slot /></MenuArrow>
+</template>
diff --git a/vue/primitives/src/context-menu/ContextMenuCheckboxItem.vue b/vue/primitives/src/context-menu/ContextMenuCheckboxItem.vue
new file mode 100644
index 0000000..c3e6eba
--- /dev/null
+++ b/vue/primitives/src/context-menu/ContextMenuCheckboxItem.vue
@@ -0,0 +1,21 @@
+<script lang="ts">
+import type { MenuCheckboxItemEmits, MenuCheckboxItemProps } from '../menu';
+
+export interface ContextMenuCheckboxItemProps extends MenuCheckboxItemProps {}
+export type ContextMenuCheckboxItemEmits = MenuCheckboxItemEmits;
+</script>
+
+<script setup lang="ts">
+import { MenuCheckboxItem } from '../menu';
+
+const props = defineProps<ContextMenuCheckboxItemProps>();
+const emit = defineEmits<ContextMenuCheckboxItemEmits>();
+</script>
+
+<template>
+  <MenuCheckboxItem
+    v-bind="props"
+    @select="emit('select', $event)"
+    @update:checked="emit('update:checked', $event)"
+  ><slot /></MenuCheckboxItem>
+</template>
diff --git a/vue/primitives/src/context-menu/ContextMenuContent.vue b/vue/primitives/src/context-menu/ContextMenuContent.vue
new file mode 100644
index 0000000..c996faa
--- /dev/null
+++ b/vue/primitives/src/context-menu/ContextMenuContent.vue
@@ -0,0 +1,32 @@
+<script lang="ts">
+import type { MenuContentEmits, MenuContentProps } from '../menu';
+
+export interface ContextMenuContentProps extends MenuContentProps {}
+export type ContextMenuContentEmits = MenuContentEmits;
+</script>
+
+<script setup lang="ts">
+import { MenuContent } from '../menu';
+
+const props = defineProps<ContextMenuContentProps>();
+const emit = defineEmits<ContextMenuContentEmits>();
+</script>
+
+<template>
+  <MenuContent
+    v-bind="props"
+    side="right"
+    align="start"
+    update-position-strategy="always"
+    @close-auto-focus="emit('closeAutoFocus', $event)"
+    @escape-key-down="emit('escapeKeyDown', $event)"
+    @pointer-down-outside="emit('pointerDownOutside', $event)"
+    @focus-outside="emit('focusOutside', $event)"
+    @interact-outside="emit('interactOutside', $event)"
+    @dismiss="emit('dismiss')"
+    @entry-focus="emit('entryFocus', $event)"
+    @open-auto-focus="emit('openAutoFocus', $event)"
+  >
+    <slot />
+  </MenuContent>
+</template>
diff --git a/vue/primitives/src/context-menu/ContextMenuGroup.vue b/vue/primitives/src/context-menu/ContextMenuGroup.vue
new file mode 100644
index 0000000..00b6c90
--- /dev/null
+++ b/vue/primitives/src/context-menu/ContextMenuGroup.vue
@@ -0,0 +1,15 @@
+<script lang="ts">
+import type { MenuGroupProps } from '../menu';
+
+export interface ContextMenuGroupProps extends MenuGroupProps {}
+</script>
+
+<script setup lang="ts">
+import { MenuGroup } from '../menu';
+
+const props = defineProps<ContextMenuGroupProps>();
+</script>
+
+<template>
+  <MenuGroup v-bind="props"><slot /></MenuGroup>
+</template>
diff --git a/vue/primitives/src/context-menu/ContextMenuItem.vue b/vue/primitives/src/context-menu/ContextMenuItem.vue
new file mode 100644
index 0000000..cddf23b
--- /dev/null
+++ b/vue/primitives/src/context-menu/ContextMenuItem.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { MenuItemEmits, MenuItemProps } from '../menu';
+
+export interface ContextMenuItemProps extends MenuItemProps {}
+export type ContextMenuItemEmits = MenuItemEmits;
+</script>
+
+<script setup lang="ts">
+import { MenuItem } from '../menu';
+
+const props = defineProps<ContextMenuItemProps>();
+const emit = defineEmits<ContextMenuItemEmits>();
+</script>
+
+<template>
+  <MenuItem v-bind="props" @select="emit('select', $event)"><slot /></MenuItem>
+</template>
diff --git a/vue/primitives/src/context-menu/ContextMenuItemIndicator.vue b/vue/primitives/src/context-menu/ContextMenuItemIndicator.vue
new file mode 100644
index 0000000..422c63c
--- /dev/null
+++ b/vue/primitives/src/context-menu/ContextMenuItemIndicator.vue
@@ -0,0 +1,15 @@
+<script lang="ts">
+import type { MenuItemIndicatorProps } from '../menu';
+
+export interface ContextMenuItemIndicatorProps extends MenuItemIndicatorProps {}
+</script>
+
+<script setup lang="ts">
+import { MenuItemIndicator } from '../menu';
+
+const props = defineProps<ContextMenuItemIndicatorProps>();
+</script>
+
+<template>
+  <MenuItemIndicator v-bind="props"><slot /></MenuItemIndicator>
+</template>
diff --git a/vue/primitives/src/context-menu/ContextMenuLabel.vue b/vue/primitives/src/context-menu/ContextMenuLabel.vue
new file mode 100644
index 0000000..6bf59b7
--- /dev/null
+++ b/vue/primitives/src/context-menu/ContextMenuLabel.vue
@@ -0,0 +1,15 @@
+<script lang="ts">
+import type { MenuLabelProps } from '../menu';
+
+export interface ContextMenuLabelProps extends MenuLabelProps {}
+</script>
+
+<script setup lang="ts">
+import { MenuLabel } from '../menu';
+
+const props = defineProps<ContextMenuLabelProps>();
+</script>
+
+<template>
+  <MenuLabel v-bind="props"><slot /></MenuLabel>
+</template>
diff --git a/vue/primitives/src/context-menu/ContextMenuPortal.vue b/vue/primitives/src/context-menu/ContextMenuPortal.vue
new file mode 100644
index 0000000..eed0027
--- /dev/null
+++ b/vue/primitives/src/context-menu/ContextMenuPortal.vue
@@ -0,0 +1,15 @@
+<script lang="ts">
+import type { MenuPortalProps } from '../menu';
+
+export interface ContextMenuPortalProps extends MenuPortalProps {}
+</script>
+
+<script setup lang="ts">
+import { MenuPortal } from '../menu';
+
+const props = defineProps<ContextMenuPortalProps>();
+</script>
+
+<template>
+  <MenuPortal v-bind="props"><slot /></MenuPortal>
+</template>
diff --git a/vue/primitives/src/context-menu/ContextMenuRadioGroup.vue b/vue/primitives/src/context-menu/ContextMenuRadioGroup.vue
new file mode 100644
index 0000000..0761c76
--- /dev/null
+++ b/vue/primitives/src/context-menu/ContextMenuRadioGroup.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { MenuRadioGroupEmits, MenuRadioGroupProps } from '../menu';
+
+export interface ContextMenuRadioGroupProps extends MenuRadioGroupProps {}
+export type ContextMenuRadioGroupEmits = MenuRadioGroupEmits;
+</script>
+
+<script setup lang="ts">
+import { MenuRadioGroup } from '../menu';
+
+const props = defineProps<ContextMenuRadioGroupProps>();
+const emit = defineEmits<ContextMenuRadioGroupEmits>();
+</script>
+
+<template>
+  <MenuRadioGroup v-bind="props" @update:model-value="emit('update:modelValue', $event)"><slot /></MenuRadioGroup>
+</template>
diff --git a/vue/primitives/src/context-menu/ContextMenuRadioItem.vue b/vue/primitives/src/context-menu/ContextMenuRadioItem.vue
new file mode 100644
index 0000000..3206fec
--- /dev/null
+++ b/vue/primitives/src/context-menu/ContextMenuRadioItem.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { MenuRadioItemEmits, MenuRadioItemProps } from '../menu';
+
+export interface ContextMenuRadioItemProps extends MenuRadioItemProps {}
+export type ContextMenuRadioItemEmits = MenuRadioItemEmits;
+</script>
+
+<script setup lang="ts">
+import { MenuRadioItem } from '../menu';
+
+const props = defineProps<ContextMenuRadioItemProps>();
+const emit = defineEmits<ContextMenuRadioItemEmits>();
+</script>
+
+<template>
+  <MenuRadioItem v-bind="props" @select="emit('select', $event)"><slot /></MenuRadioItem>
+</template>
diff --git a/vue/primitives/src/context-menu/ContextMenuRoot.vue b/vue/primitives/src/context-menu/ContextMenuRoot.vue
new file mode 100644
index 0000000..8448d1e
--- /dev/null
+++ b/vue/primitives/src/context-menu/ContextMenuRoot.vue
@@ -0,0 +1,44 @@
+<script lang="ts">
+import type { Direction } from '../config-provider';
+
+export interface ContextMenuRootProps {
+  dir?: Direction;
+  modal?: boolean;
+}
+export interface ContextMenuRootEmits {
+  'update:open': [value: boolean];
+}
+</script>
+
+<script setup lang="ts">
+import { ref, toRef } from 'vue';
+
+import { MenuRoot } from '../menu';
+import { provideContextMenuRootContext } from './context';
+
+const { dir, modal = true } = defineProps<ContextMenuRootProps>();
+const emit = defineEmits<ContextMenuRootEmits>();
+defineSlots<{ default?: (props: { open: boolean }) => unknown }>();
+
+const open = ref(false);
+
+provideContextMenuRootContext({
+  open,
+  onOpenChange: (v) => {
+    open.value = v;
+    emit('update:open', v);
+  },
+  modal: toRef(() => modal),
+});
+</script>
+
+<template>
+  <MenuRoot
+    :open="open"
+    :dir="dir"
+    :modal="modal"
+    @update:open="open = $event"
+  >
+    <slot :open="open" />
+  </MenuRoot>
+</template>
diff --git a/vue/primitives/src/context-menu/ContextMenuSeparator.vue b/vue/primitives/src/context-menu/ContextMenuSeparator.vue
new file mode 100644
index 0000000..f5e2f6c
--- /dev/null
+++ b/vue/primitives/src/context-menu/ContextMenuSeparator.vue
@@ -0,0 +1,15 @@
+<script lang="ts">
+import type { MenuSeparatorProps } from '../menu';
+
+export interface ContextMenuSeparatorProps extends MenuSeparatorProps {}
+</script>
+
+<script setup lang="ts">
+import { MenuSeparator } from '../menu';
+
+const props = defineProps<ContextMenuSeparatorProps>();
+</script>
+
+<template>
+  <MenuSeparator v-bind="props"><slot /></MenuSeparator>
+</template>
diff --git a/vue/primitives/src/context-menu/ContextMenuSub.vue b/vue/primitives/src/context-menu/ContextMenuSub.vue
new file mode 100644
index 0000000..f7c9203
--- /dev/null
+++ b/vue/primitives/src/context-menu/ContextMenuSub.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { MenuSubEmits, MenuSubProps } from '../menu';
+
+export interface ContextMenuSubProps extends MenuSubProps {}
+export type ContextMenuSubEmits = MenuSubEmits;
+</script>
+
+<script setup lang="ts">
+import { MenuSub } from '../menu';
+
+const props = defineProps<ContextMenuSubProps>();
+const emit = defineEmits<ContextMenuSubEmits>();
+</script>
+
+<template>
+  <MenuSub v-bind="props" @update:open="emit('update:open', $event)"><slot /></MenuSub>
+</template>
diff --git a/vue/primitives/src/context-menu/ContextMenuSubContent.vue b/vue/primitives/src/context-menu/ContextMenuSubContent.vue
new file mode 100644
index 0000000..210cb63
--- /dev/null
+++ b/vue/primitives/src/context-menu/ContextMenuSubContent.vue
@@ -0,0 +1,27 @@
+<script lang="ts">
+import type { MenuSubContentEmits, MenuSubContentProps } from '../menu';
+
+export interface ContextMenuSubContentProps extends MenuSubContentProps {}
+export type ContextMenuSubContentEmits = MenuSubContentEmits;
+</script>
+
+<script setup lang="ts">
+import { MenuSubContent } from '../menu';
+
+const props = defineProps<ContextMenuSubContentProps>();
+const emit = defineEmits<ContextMenuSubContentEmits>();
+</script>
+
+<template>
+  <MenuSubContent
+    v-bind="props"
+    @close-auto-focus="emit('closeAutoFocus', $event)"
+    @escape-key-down="emit('escapeKeyDown', $event)"
+    @pointer-down-outside="emit('pointerDownOutside', $event)"
+    @focus-outside="emit('focusOutside', $event)"
+    @interact-outside="emit('interactOutside', $event)"
+    @dismiss="emit('dismiss')"
+    @entry-focus="emit('entryFocus', $event)"
+    @open-auto-focus="emit('openAutoFocus', $event)"
+  ><slot /></MenuSubContent>
+</template>
diff --git a/vue/primitives/src/context-menu/ContextMenuSubTrigger.vue b/vue/primitives/src/context-menu/ContextMenuSubTrigger.vue
new file mode 100644
index 0000000..58b8bec
--- /dev/null
+++ b/vue/primitives/src/context-menu/ContextMenuSubTrigger.vue
@@ -0,0 +1,15 @@
+<script lang="ts">
+import type { MenuSubTriggerProps } from '../menu';
+
+export interface ContextMenuSubTriggerProps extends MenuSubTriggerProps {}
+</script>
+
+<script setup lang="ts">
+import { MenuSubTrigger } from '../menu';
+
+const props = defineProps<ContextMenuSubTriggerProps>();
+</script>
+
+<template>
+  <MenuSubTrigger v-bind="props"><slot /></MenuSubTrigger>
+</template>
diff --git a/vue/primitives/src/context-menu/ContextMenuTrigger.vue b/vue/primitives/src/context-menu/ContextMenuTrigger.vue
new file mode 100644
index 0000000..17ccb9b
--- /dev/null
+++ b/vue/primitives/src/context-menu/ContextMenuTrigger.vue
@@ -0,0 +1,89 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ContextMenuTriggerProps extends PrimitiveProps {
+  disabled?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onScopeDispose, shallowRef } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { MenuAnchor, useMenuContext } from '../menu';
+import { Primitive } from '../primitive';
+import { useContextMenuRootContext } from './context';
+
+const { disabled = false, as = 'span' } = defineProps<ContextMenuTriggerProps>();
+
+const menuCtx = useMenuContext();
+const ctxMenuCtx = useContextMenuRootContext();
+const { forwardRef } = useForwardExpose();
+
+const point = shallowRef({ x: 0, y: 0 });
+const virtualEl = computed(() => ({
+  getBoundingClientRect: () => ({
+    x: point.value.x,
+    y: point.value.y,
+    width: 0,
+    height: 0,
+    top: point.value.y,
+    right: point.value.x,
+    bottom: point.value.y,
+    left: point.value.x,
+    toJSON: () => {},
+  }),
+}));
+
+let longPressTimer: ReturnType<typeof setTimeout> | undefined;
+const LONG_PRESS_DELAY = 700;
+
+function clearLongPress() {
+  clearTimeout(longPressTimer);
+}
+
+onScopeDispose(clearLongPress);
+
+function handleContextMenu(event: MouseEvent) {
+  if (disabled) return;
+  clearLongPress();
+  point.value = { x: event.clientX, y: event.clientY };
+  event.preventDefault();
+  ctxMenuCtx.onOpenChange(true);
+}
+
+function handlePointerDown(event: PointerEvent) {
+  if (disabled || event.button !== 0) return;
+  if (event.pointerType !== 'touch') return;
+  clearLongPress();
+  longPressTimer = setTimeout(() => {
+    point.value = { x: event.clientX, y: event.clientY };
+    ctxMenuCtx.onOpenChange(true);
+  }, LONG_PRESS_DELAY);
+}
+
+function handlePointerCancel() {
+  clearLongPress();
+}
+
+function handlePointerUp() {
+  clearLongPress();
+}
+</script>
+
+<template>
+  <MenuAnchor :reference="virtualEl">
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      :data-state="menuCtx.open.value ? 'open' : 'closed'"
+      :data-disabled="disabled ? '' : undefined"
+      @contextmenu="handleContextMenu"
+      @pointerdown="handlePointerDown"
+      @pointercancel="handlePointerCancel"
+      @pointerup="handlePointerUp"
+    >
+      <slot />
+    </Primitive>
+  </MenuAnchor>
+</template>
diff --git a/vue/primitives/src/context-menu/context.ts b/vue/primitives/src/context-menu/context.ts
new file mode 100644
index 0000000..af2f918
--- /dev/null
+++ b/vue/primitives/src/context-menu/context.ts
@@ -0,0 +1,14 @@
+import type { Ref } from 'vue';
+
+import { useContextFactory } from '@robonen/vue';
+
+export interface ContextMenuRootContext {
+  open: Ref<boolean>;
+  onOpenChange: (open: boolean) => void;
+  modal: Ref<boolean>;
+}
+
+export const {
+  inject: useContextMenuRootContext,
+  provide: provideContextMenuRootContext,
+} = useContextFactory<ContextMenuRootContext>('ContextMenuRootContext');
diff --git a/vue/primitives/src/context-menu/index.ts b/vue/primitives/src/context-menu/index.ts
new file mode 100644
index 0000000..b0153f3
--- /dev/null
+++ b/vue/primitives/src/context-menu/index.ts
@@ -0,0 +1,17 @@
+export { useContextMenuRootContext } from './context';
+export { default as ContextMenuArrow, type ContextMenuArrowProps } from './ContextMenuArrow.vue';
+export { default as ContextMenuCheckboxItem, type ContextMenuCheckboxItemEmits, type ContextMenuCheckboxItemProps } from './ContextMenuCheckboxItem.vue';
+export { default as ContextMenuContent, type ContextMenuContentEmits, type ContextMenuContentProps } from './ContextMenuContent.vue';
+export { default as ContextMenuGroup, type ContextMenuGroupProps } from './ContextMenuGroup.vue';
+export { default as ContextMenuItem, type ContextMenuItemEmits, type ContextMenuItemProps } from './ContextMenuItem.vue';
+export { default as ContextMenuItemIndicator, type ContextMenuItemIndicatorProps } from './ContextMenuItemIndicator.vue';
+export { default as ContextMenuLabel, type ContextMenuLabelProps } from './ContextMenuLabel.vue';
+export { default as ContextMenuPortal, type ContextMenuPortalProps } from './ContextMenuPortal.vue';
+export { default as ContextMenuRadioGroup, type ContextMenuRadioGroupEmits, type ContextMenuRadioGroupProps } from './ContextMenuRadioGroup.vue';
+export { default as ContextMenuRadioItem, type ContextMenuRadioItemEmits, type ContextMenuRadioItemProps } from './ContextMenuRadioItem.vue';
+export { default as ContextMenuRoot, type ContextMenuRootEmits, type ContextMenuRootProps } from './ContextMenuRoot.vue';
+export { default as ContextMenuSeparator, type ContextMenuSeparatorProps } from './ContextMenuSeparator.vue';
+export { default as ContextMenuSub, type ContextMenuSubEmits, type ContextMenuSubProps } from './ContextMenuSub.vue';
+export { default as ContextMenuSubContent, type ContextMenuSubContentEmits, type ContextMenuSubContentProps } from './ContextMenuSubContent.vue';
+export { default as ContextMenuSubTrigger, type ContextMenuSubTriggerProps } from './ContextMenuSubTrigger.vue';
+export { default as ContextMenuTrigger, type ContextMenuTriggerProps } from './ContextMenuTrigger.vue';
diff --git a/vue/primitives/src/date-picker/DatePickerAnchor.vue b/vue/primitives/src/date-picker/DatePickerAnchor.vue
new file mode 100644
index 0000000..95dd4f0
--- /dev/null
+++ b/vue/primitives/src/date-picker/DatePickerAnchor.vue
@@ -0,0 +1,28 @@
+<script lang="ts">
+import type { PopperAnchorProps } from '../popper';
+
+export interface DatePickerAnchorProps extends PopperAnchorProps {}
+</script>
+
+<script setup lang="ts">
+import { onBeforeMount, onUnmounted } from 'vue';
+import { PopperAnchor } from '../popper';
+import { useDatePickerRootContext } from './context';
+
+const props = defineProps<DatePickerAnchorProps>();
+
+const ctx = useDatePickerRootContext();
+
+onBeforeMount(() => {
+  ctx.hasCustomAnchor.value = true;
+});
+onUnmounted(() => {
+  ctx.hasCustomAnchor.value = false;
+});
+</script>
+
+<template>
+  <PopperAnchor v-bind="props">
+    <slot />
+  </PopperAnchor>
+</template>
diff --git a/vue/primitives/src/date-picker/DatePickerArrow.vue b/vue/primitives/src/date-picker/DatePickerArrow.vue
new file mode 100644
index 0000000..c7cb296
--- /dev/null
+++ b/vue/primitives/src/date-picker/DatePickerArrow.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { PopperArrowProps } from '../popper';
+
+export interface DatePickerArrowProps extends PopperArrowProps {}
+</script>
+
+<script setup lang="ts">
+import { PopperArrow } from '../popper';
+
+const { width = 10, height = 5 } = defineProps<DatePickerArrowProps>();
+</script>
+
+<template>
+  <PopperArrow :width="width" :height="height">
+    <slot />
+  </PopperArrow>
+</template>
diff --git a/vue/primitives/src/date-picker/DatePickerCalendar.vue b/vue/primitives/src/date-picker/DatePickerCalendar.vue
new file mode 100644
index 0000000..830099a
--- /dev/null
+++ b/vue/primitives/src/date-picker/DatePickerCalendar.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface DatePickerCalendarProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+
+const { as = 'div' } = defineProps<DatePickerCalendarProps>();
+</script>
+
+<template>
+  <Primitive :as="as" :data-primitives-date-picker-calendar="''">
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/date-picker/DatePickerClose.vue b/vue/primitives/src/date-picker/DatePickerClose.vue
new file mode 100644
index 0000000..b4e02f5
--- /dev/null
+++ b/vue/primitives/src/date-picker/DatePickerClose.vue
@@ -0,0 +1,25 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface DatePickerCloseProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useDatePickerRootContext } from './context';
+
+const { as = 'button' } = defineProps<DatePickerCloseProps>();
+
+const ctx = useDatePickerRootContext();
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :type="as === 'button' ? 'button' : undefined"
+    :data-state="ctx.open.value ? 'open' : 'closed'"
+    @click="ctx.onOpenChange(false)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/date-picker/DatePickerContent.vue b/vue/primitives/src/date-picker/DatePickerContent.vue
new file mode 100644
index 0000000..240c4da
--- /dev/null
+++ b/vue/primitives/src/date-picker/DatePickerContent.vue
@@ -0,0 +1,75 @@
+<script lang="ts">
+import type { DismissableLayerEmits } from '../dismissable-layer';
+import type { FocusScopeEmits } from '../focus-scope';
+import type { PopperContentProps } from '../popper';
+
+export interface DatePickerContentProps extends PopperContentProps {
+  /** Keep mounted for CSS exit animations. */
+  forceMount?: boolean;
+}
+
+export interface DatePickerContentEmits {
+  openAutoFocus: FocusScopeEmits['mountAutoFocus'];
+  closeAutoFocus: FocusScopeEmits['unmountAutoFocus'];
+  escapeKeyDown: DismissableLayerEmits['escapeKeyDown'];
+  pointerDownOutside: DismissableLayerEmits['pointerDownOutside'];
+  focusOutside: DismissableLayerEmits['focusOutside'];
+  interactOutside: DismissableLayerEmits['interactOutside'];
+  dismiss: [];
+}
+</script>
+
+<script setup lang="ts">
+import { DismissableLayer } from '../dismissable-layer';
+import { FocusScope } from '../focus-scope';
+import { PopperContent } from '../popper';
+import { Presence } from '../presence';
+import { useDatePickerRootContext } from './context';
+
+const {
+  forceMount = false,
+  as = 'div',
+  ...popperProps
+} = defineProps<DatePickerContentProps>();
+
+const emit = defineEmits<DatePickerContentEmits>();
+
+const ctx = useDatePickerRootContext();
+</script>
+
+<template>
+  <Presence :present="ctx.open.value" :force-mount="forceMount">
+    <FocusScope
+      as="template"
+      :loop="true"
+      :trapped="ctx.modal.value"
+      @mount-auto-focus.prevent="emit('openAutoFocus', $event)"
+      @unmount-auto-focus="(event: Event) => {
+        emit('closeAutoFocus', event);
+        if (!event.defaultPrevented) ctx.triggerElement.value?.focus();
+      }"
+    >
+      <DismissableLayer
+        as="template"
+        :disable-outside-pointer-events="ctx.modal.value"
+        @escape-key-down="emit('escapeKeyDown', $event)"
+        @pointer-down-outside="emit('pointerDownOutside', $event)"
+        @focus-outside="emit('focusOutside', $event)"
+        @interact-outside="emit('interactOutside', $event)"
+        @dismiss="() => { ctx.onOpenChange(false); emit('dismiss'); }"
+      >
+        <PopperContent
+          :id="ctx.contentId.value"
+          :as="as"
+          v-bind="popperProps"
+          role="dialog"
+          :aria-labelledby="ctx.triggerId.value"
+          :data-state="ctx.open.value ? 'open' : 'closed'"
+          :data-primitives-date-picker-content="''"
+        >
+          <slot />
+        </PopperContent>
+      </DismissableLayer>
+    </FocusScope>
+  </Presence>
+</template>
diff --git a/vue/primitives/src/date-picker/DatePickerField.vue b/vue/primitives/src/date-picker/DatePickerField.vue
new file mode 100644
index 0000000..4df614f
--- /dev/null
+++ b/vue/primitives/src/date-picker/DatePickerField.vue
@@ -0,0 +1,67 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface DatePickerFieldProps extends PrimitiveProps {
+  /** Allow typing into the field. @default false (read-only display) */
+  editable?: boolean;
+  /** Display format for the rendered value. */
+  format?: Intl.DateTimeFormatOptions;
+  /** Placeholder text shown when no value is selected. */
+  placeholderText?: string;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { formatDate } from '../calendar';
+import { useDatePickerRootContext } from './context';
+
+const {
+  as: _as = 'input',
+  editable = false,
+  format = { year: 'numeric', month: '2-digit', day: '2-digit' },
+  placeholderText,
+} = defineProps<DatePickerFieldProps>();
+
+const ctx = useDatePickerRootContext();
+
+const displayValue = computed(() => {
+  if (!ctx.modelValue.value) return '';
+  return formatDate(ctx.modelValue.value, format, ctx.locale.value);
+});
+
+const draft = ref(displayValue.value);
+watch(displayValue, (v) => {
+  draft.value = v;
+});
+
+function commit() {
+  if (!editable) return;
+  const text = draft.value.trim();
+  if (!text) {
+    ctx.modelValue.value = undefined;
+    return;
+  }
+  const parsed = new Date(text);
+  if (!Number.isNaN(parsed.getTime()))
+    ctx.modelValue.value = new Date(parsed.getFullYear(), parsed.getMonth(), parsed.getDate());
+  else
+    draft.value = displayValue.value;
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === 'Enter') commit();
+}
+</script>
+
+<template>
+  <input
+    :value="editable ? draft : displayValue"
+    :readonly="!editable"
+    :placeholder="placeholderText"
+    :data-primitives-date-picker-field="''"
+    @input="(e) => { if (editable) draft = (e.target as HTMLInputElement).value; }"
+    @blur="commit"
+    @keydown="handleKeydown"
+  >
+</template>
diff --git a/vue/primitives/src/date-picker/DatePickerPortal.vue b/vue/primitives/src/date-picker/DatePickerPortal.vue
new file mode 100644
index 0000000..0cbb882
--- /dev/null
+++ b/vue/primitives/src/date-picker/DatePickerPortal.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { TeleportPrimitiveProps } from '../teleport';
+
+export interface DatePickerPortalProps extends TeleportPrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import PortalPrimitive from '../teleport/Teleport.vue';
+
+const props = defineProps<DatePickerPortalProps>();
+</script>
+
+<template>
+  <PortalPrimitive v-bind="props">
+    <slot />
+  </PortalPrimitive>
+</template>
diff --git a/vue/primitives/src/date-picker/DatePickerRoot.vue b/vue/primitives/src/date-picker/DatePickerRoot.vue
new file mode 100644
index 0000000..26a1ea3
--- /dev/null
+++ b/vue/primitives/src/date-picker/DatePickerRoot.vue
@@ -0,0 +1,333 @@
+<script lang="ts">
+import type { CalendarMonth, CalendarRootProps, WeekDayFormat } from '../calendar';
+import type { PrimitiveProps } from '../primitive';
+
+export interface DatePickerRootProps extends PrimitiveProps,
+  Omit<CalendarRootProps, 'as' | 'asChild'> {
+  /** Uncontrolled initial open state. */
+  defaultOpen?: boolean;
+  /** Modal popover (traps focus + blocks outside pointer). @default false */
+  modal?: boolean;
+  /** Hidden form input name for submission. */
+  name?: string;
+  /** Format used to serialize the hidden input value. @default 'iso' */
+  valueFormat?: 'iso' | ((d: Date) => string);
+  /** Close popover on selection. @default true */
+  closeOnSelect?: boolean;
+}
+
+export interface DatePickerRootEmits {
+  'update:modelValue': [date: Date | undefined];
+  'update:placeholder': [date: Date];
+  'update:open': [open: boolean];
+}
+</script>
+
+<script setup lang="ts">
+import { useEventListener, useForwardExpose } from '@robonen/vue';
+import { computed, onMounted, ref, toRef, watch } from 'vue';
+import {
+  addMonths,
+  addYears,
+  clamp,
+  createMonths,
+  formatMonthYear,
+  getWeekdayLabels,
+  isAfter,
+  isBefore,
+  isSameDay,
+  isSameMonth,
+  isDateUnavailable as isUnavailable,
+  provideCalendarRootContext,
+  toDateOnly,
+} from '../calendar';
+import { useId } from '../config-provider';
+import { PopperRoot } from '../popper';
+import { Primitive } from '../primitive';
+import { provideDatePickerRootContext } from './context';
+
+defineOptions({ inheritAttrs: false });
+
+const {
+  as = 'div',
+  defaultOpen = false,
+  modal = false,
+  name,
+  valueFormat = 'iso',
+  closeOnSelect = true,
+  defaultValue,
+  defaultPlaceholder,
+  minValue,
+  maxValue,
+  isDateUnavailable: propsIsDateUnavailable,
+  isDateDisabled: propsIsDateDisabled,
+  pagedNavigation = false,
+  weekStartsOn = 0,
+  weekdayFormat = 'short',
+  fixedWeeks = true,
+  numberOfMonths = 1,
+  disabled = false,
+  readonly = false,
+  initialFocus = false,
+  locale = 'en',
+  dir = 'ltr',
+  nextPage: propsNextPage,
+  prevPage: propsPrevPage,
+  calendarLabel = 'Calendar',
+} = defineProps<DatePickerRootProps>();
+
+defineEmits<DatePickerRootEmits>();
+
+const { forwardRef, currentElement: parentElement } = useForwardExpose();
+
+const localOpen = ref<boolean>(defaultOpen);
+const open = defineModel<boolean>('open', {
+  default: undefined,
+  get: v => v ?? localOpen.value,
+  set: (v) => {
+    localOpen.value = v;
+    return v;
+  },
+});
+
+const localValue = ref<Date | undefined>(defaultValue);
+const modelValue = defineModel<Date | undefined>('modelValue', {
+  default: undefined,
+  get: v => v ?? localValue.value,
+  set: (v) => {
+    localValue.value = v;
+    return v;
+  },
+});
+
+const localPlaceholder = ref<Date>(
+  toDateOnly(defaultPlaceholder ?? modelValue.value ?? new Date()),
+);
+const placeholder = defineModel<Date>('placeholder', {
+  default: undefined,
+  get: v => v ?? localPlaceholder.value,
+  set: (v) => {
+    localPlaceholder.value = toDateOnly(v);
+    return localPlaceholder.value;
+  },
+});
+
+const triggerId = useId(undefined, 'date-picker-trigger');
+const contentId = useId(undefined, 'date-picker-content');
+const triggerElement = ref<HTMLElement>();
+const hasCustomAnchor = ref(false);
+const focusedDate = ref<Date | undefined>();
+
+const localeRef = toRef(() => locale);
+const dirRef = toRef(() => dir);
+const modalRef = toRef(() => modal);
+const nameRef = toRef(() => name);
+const weekStartsOnRef = toRef(() => weekStartsOn);
+const weekdayFormatRef = toRef(() => weekdayFormat as WeekDayFormat);
+const fixedWeeksRef = toRef(() => fixedWeeks);
+const numberOfMonthsRef = toRef(() => numberOfMonths);
+const disabledRef = toRef(() => disabled);
+const readonlyRef = toRef(() => readonly);
+const pagedNavigationRef = toRef(() => pagedNavigation);
+const minValueRef = toRef(() => minValue);
+const maxValueRef = toRef(() => maxValue);
+
+const grid = computed<CalendarMonth[]>(() => createMonths({
+  date: placeholder.value,
+  numberOfMonths,
+  weekStartsOn,
+}));
+
+const weekDays = computed(() => getWeekdayLabels(weekStartsOn, locale, weekdayFormat));
+
+const headingValue = computed(() => {
+  const months = grid.value;
+  if (!months.length) return '';
+  if (months.length === 1) return formatMonthYear(months[0]!.value, locale);
+  const first = formatMonthYear(months[0]!.value, locale);
+  const last = formatMonthYear(months[months.length - 1]!.value, locale);
+  return `${first} - ${last}`;
+});
+
+const fullCalendarLabel = computed(() => `${calendarLabel}, ${headingValue.value}`);
+
+function isDateDisabled(date: Date): boolean {
+  if (disabled) return true;
+  if (propsIsDateDisabled?.(date)) return true;
+  if (minValue && isBefore(date, minValue)) return true;
+  if (maxValue && isAfter(date, maxValue)) return true;
+  return false;
+}
+
+function isDateUnavailableLocal(date: Date): boolean {
+  return isUnavailable(date, propsIsDateUnavailable, minValue, maxValue);
+}
+
+function isDateSelected(date: Date): boolean {
+  return modelValue.value ? isSameDay(modelValue.value, date) : false;
+}
+
+function isOutsideVisibleView(date: Date): boolean {
+  return !grid.value.some(m => isSameMonth(m.value, date));
+}
+
+const isInvalid = computed(() => {
+  if (!modelValue.value) return false;
+  return isDateDisabled(modelValue.value) || isDateUnavailableLocal(modelValue.value);
+});
+
+function setDate(date: Date | undefined) {
+  if (readonly) return;
+  if (date && (isDateDisabled(date) || isDateUnavailableLocal(date))) return;
+  modelValue.value = date ? toDateOnly(date) : undefined;
+  if (date && closeOnSelect) open.value = false;
+}
+
+function setPlaceholder(date: Date) {
+  placeholder.value = clamp(date, minValue, maxValue);
+}
+
+function pageStep(): number {
+  return pagedNavigation ? numberOfMonths : 1;
+}
+function nextPage(fn?: (placeholder: Date) => Date) {
+  const fnToUse = fn ?? propsNextPage;
+  placeholder.value = fnToUse
+    ? toDateOnly(fnToUse(placeholder.value))
+    : addMonths(placeholder.value, pageStep());
+}
+function prevPage(fn?: (placeholder: Date) => Date) {
+  const fnToUse = fn ?? propsPrevPage;
+  placeholder.value = fnToUse
+    ? toDateOnly(fnToUse(placeholder.value))
+    : addMonths(placeholder.value, -pageStep());
+}
+function nextYear() {
+  placeholder.value = addYears(placeholder.value, 1);
+}
+function prevYear() {
+  placeholder.value = addYears(placeholder.value, -1);
+}
+
+function isNextButtonDisabled(fn?: (placeholder: Date) => Date): boolean {
+  if (disabled) return true;
+  if (!maxValue) return false;
+  const lastMonth = grid.value[grid.value.length - 1]?.value;
+  if (!lastMonth) return false;
+  const fnToUse = fn ?? propsNextPage;
+  const probe = fnToUse
+    ? toDateOnly(fnToUse(placeholder.value))
+    : addMonths(lastMonth, 1);
+  return isAfter(probe, maxValue);
+}
+function isPrevButtonDisabled(fn?: (placeholder: Date) => Date): boolean {
+  if (disabled) return true;
+  if (!minValue) return false;
+  const firstMonth = grid.value[0]?.value;
+  if (!firstMonth) return false;
+  const fnToUse = fn ?? propsPrevPage;
+  const probe = fnToUse
+    ? toDateOnly(fnToUse(placeholder.value))
+    : addMonths(firstMonth, -1);
+  return isBefore(probe, minValue);
+}
+
+watch(modelValue, (v) => {
+  if (v && !isSameMonth(v, placeholder.value))
+    placeholder.value = toDateOnly(v);
+});
+
+onMounted(() => {
+  if (!initialFocus || !open.value || !parentElement.value) return;
+  const target = parentElement.value.querySelector<HTMLElement>(
+    '[data-primitives-calendar-cell-trigger][data-selected]'
+    + ',[data-primitives-calendar-cell-trigger][data-today]'
+    + ',[data-primitives-calendar-cell-trigger]:not([data-outside-view]):not([data-disabled])',
+  );
+  target?.focus();
+});
+
+useEventListener(parentElement, 'focusout', (e) => {
+  if (!parentElement.value?.contains(e.relatedTarget as Node | null))
+    focusedDate.value = undefined;
+});
+
+const hiddenValue = computed(() => {
+  if (!modelValue.value) return '';
+  if (typeof valueFormat === 'function') return valueFormat(modelValue.value);
+  return modelValue.value.toISOString().slice(0, 10);
+});
+
+provideDatePickerRootContext({
+  open,
+  modal: modalRef,
+  name: nameRef,
+  modelValue,
+  locale: localeRef,
+  triggerId,
+  contentId,
+  triggerElement,
+  hasCustomAnchor,
+  onOpenChange: (v) => { open.value = v; },
+  onOpenToggle: () => { open.value = !open.value; },
+});
+
+provideCalendarRootContext({
+  modelValue,
+  placeholder,
+  locale: localeRef,
+  dir: dirRef,
+  grid,
+  weekDays,
+  headingValue,
+  fullCalendarLabel,
+  weekStartsOn: weekStartsOnRef,
+  weekdayFormat: weekdayFormatRef,
+  fixedWeeks: fixedWeeksRef,
+  numberOfMonths: numberOfMonthsRef,
+  disabled: disabledRef,
+  readonly: readonlyRef,
+  pagedNavigation: pagedNavigationRef,
+  minValue: minValueRef,
+  maxValue: maxValueRef,
+  isDateDisabled,
+  isDateUnavailable: isDateUnavailableLocal,
+  isDateSelected,
+  isOutsideVisibleView,
+  isInvalid,
+  parentElement,
+  focusedDate,
+  setDate,
+  setPlaceholder,
+  nextPage,
+  prevPage,
+  nextYear,
+  prevYear,
+  isNextButtonDisabled,
+  isPrevButtonDisabled,
+});
+</script>
+
+<template>
+  <PopperRoot>
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      :data-primitives-date-picker-root="''"
+      :data-state="open ? 'open' : 'closed'"
+      :data-disabled="disabled ? '' : undefined"
+    >
+      <slot :open="open" :model-value="modelValue" />
+      <input
+        v-if="name"
+        type="hidden"
+        :name="name"
+        :value="hiddenValue"
+        :disabled="disabled"
+        aria-hidden="true"
+        tabindex="-1"
+        style="display: none"
+      >
+    </Primitive>
+  </PopperRoot>
+</template>
diff --git a/vue/primitives/src/date-picker/DatePickerTrigger.vue b/vue/primitives/src/date-picker/DatePickerTrigger.vue
new file mode 100644
index 0000000..989826c
--- /dev/null
+++ b/vue/primitives/src/date-picker/DatePickerTrigger.vue
@@ -0,0 +1,41 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface DatePickerTriggerProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '@robonen/vue';
+import { onMounted } from 'vue';
+import { PopperAnchor } from '../popper';
+import { Primitive } from '../primitive';
+import { useDatePickerRootContext } from './context';
+
+const { as = 'button' } = defineProps<DatePickerTriggerProps>();
+
+const ctx = useDatePickerRootContext();
+const { forwardRef, currentElement } = useForwardExpose();
+
+onMounted(() => {
+  ctx.triggerElement.value = currentElement.value;
+});
+</script>
+
+<template>
+  <component :is="ctx.hasCustomAnchor.value ? Primitive : PopperAnchor" as="template">
+    <Primitive
+      :id="ctx.triggerId.value"
+      :ref="forwardRef"
+      :as="as"
+      :type="as === 'button' ? 'button' : undefined"
+      aria-haspopup="dialog"
+      :aria-expanded="ctx.open.value"
+      :aria-controls="ctx.contentId.value"
+      :data-state="ctx.open.value ? 'open' : 'closed'"
+      :data-primitives-date-picker-trigger="''"
+      @click="ctx.onOpenToggle"
+    >
+      <slot />
+    </Primitive>
+  </component>
+</template>
diff --git a/vue/primitives/src/date-picker/context.ts b/vue/primitives/src/date-picker/context.ts
new file mode 100644
index 0000000..74b3d87
--- /dev/null
+++ b/vue/primitives/src/date-picker/context.ts
@@ -0,0 +1,20 @@
+import type { ComputedRef, Ref } from 'vue';
+import { useContextFactory } from '@robonen/vue';
+
+export interface DatePickerRootContext {
+  open: Ref<boolean>;
+  modal: Ref<boolean>;
+  name: Ref<string | undefined>;
+  modelValue: Ref<Date | undefined>;
+  locale: Ref<string>;
+  triggerId: ComputedRef<string>;
+  contentId: ComputedRef<string>;
+  triggerElement: Ref<HTMLElement | undefined>;
+  hasCustomAnchor: Ref<boolean>;
+  onOpenChange: (value: boolean) => void;
+  onOpenToggle: () => void;
+}
+
+const ctx = useContextFactory<DatePickerRootContext>('DatePickerRoot');
+export const provideDatePickerRootContext = ctx.provide;
+export const useDatePickerRootContext = ctx.inject;
diff --git a/vue/primitives/src/date-picker/index.ts b/vue/primitives/src/date-picker/index.ts
new file mode 100644
index 0000000..6e20b6c
--- /dev/null
+++ b/vue/primitives/src/date-picker/index.ts
@@ -0,0 +1,36 @@
+export { default as DatePickerRoot } from './DatePickerRoot.vue';
+export { default as DatePickerTrigger } from './DatePickerTrigger.vue';
+export { default as DatePickerAnchor } from './DatePickerAnchor.vue';
+export { default as DatePickerPortal } from './DatePickerPortal.vue';
+export { default as DatePickerContent } from './DatePickerContent.vue';
+export { default as DatePickerArrow } from './DatePickerArrow.vue';
+export { default as DatePickerClose } from './DatePickerClose.vue';
+export { default as DatePickerCalendar } from './DatePickerCalendar.vue';
+export { default as DatePickerField } from './DatePickerField.vue';
+export { default as DatePickerInput } from './DatePickerField.vue';
+
+// Calendar subparts re-exported as DatePicker* aliases (share CalendarRootContext provided by DatePickerRoot).
+export { default as DatePickerHeader } from '../calendar/CalendarHeader.vue';
+export { default as DatePickerHeading } from '../calendar/CalendarHeading.vue';
+export { default as DatePickerPrev } from '../calendar/CalendarPrev.vue';
+export { default as DatePickerNext } from '../calendar/CalendarNext.vue';
+export { default as DatePickerGrid } from '../calendar/CalendarGrid.vue';
+export { default as DatePickerGridHead } from '../calendar/CalendarGridHead.vue';
+export { default as DatePickerGridBody } from '../calendar/CalendarGridBody.vue';
+export { default as DatePickerGridRow } from '../calendar/CalendarGridRow.vue';
+export { default as DatePickerHeadCell } from '../calendar/CalendarHeadCell.vue';
+export { default as DatePickerCell } from '../calendar/CalendarCell.vue';
+export { default as DatePickerCellTrigger } from '../calendar/CalendarCellTrigger.vue';
+
+export { provideDatePickerRootContext, useDatePickerRootContext } from './context';
+export type { DatePickerRootContext } from './context';
+
+export type { DatePickerRootEmits, DatePickerRootProps } from './DatePickerRoot.vue';
+export type { DatePickerTriggerProps } from './DatePickerTrigger.vue';
+export type { DatePickerAnchorProps } from './DatePickerAnchor.vue';
+export type { DatePickerPortalProps } from './DatePickerPortal.vue';
+export type { DatePickerContentEmits, DatePickerContentProps } from './DatePickerContent.vue';
+export type { DatePickerArrowProps } from './DatePickerArrow.vue';
+export type { DatePickerCloseProps } from './DatePickerClose.vue';
+export type { DatePickerCalendarProps } from './DatePickerCalendar.vue';
+export type { DatePickerFieldProps } from './DatePickerField.vue';
diff --git a/vue/primitives/src/dialog/DialogClose.vue b/vue/primitives/src/dialog/DialogClose.vue
new file mode 100644
index 0000000..bb04b75
--- /dev/null
+++ b/vue/primitives/src/dialog/DialogClose.vue
@@ -0,0 +1,21 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface DialogCloseProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useDialogContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'button' } = defineProps<DialogCloseProps>();
+const { forwardRef } = useForwardExpose();
+const ctx = useDialogContext();
+</script>
+
+<template>
+  <Primitive :ref="forwardRef" :as="as" type="button" @click="ctx.onClose">
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/dialog/DialogContent.vue b/vue/primitives/src/dialog/DialogContent.vue
new file mode 100644
index 0000000..0bc656c
--- /dev/null
+++ b/vue/primitives/src/dialog/DialogContent.vue
@@ -0,0 +1,55 @@
+<script lang="ts">
+import type { DialogContentImplEmits, DialogContentImplProps } from './DialogContentImpl.vue';
+
+export interface DialogContentProps extends Omit<DialogContentImplProps, 'trapFocus' | 'disableOutsidePointerEvents'> {
+  /** Keep mounted for CSS exit animations. */
+  forceMount?: boolean;
+}
+
+export type DialogContentEmits = DialogContentImplEmits;
+</script>
+
+<script setup lang="ts">
+import { Presence } from '../presence';
+import { useDialogContext } from './context';
+import DialogContentModal from './DialogContentModal.vue';
+import DialogContentNonModal from './DialogContentNonModal.vue';
+
+const { as = 'div', forceMount = false, role = 'dialog' } = defineProps<DialogContentProps>();
+const emit = defineEmits<DialogContentEmits>();
+
+const ctx = useDialogContext();
+</script>
+
+<template>
+  <Presence :present="ctx.open.value" :force-mount="forceMount">
+    <DialogContentModal
+      v-if="ctx.modal.value"
+      :as="as"
+      :role="role"
+      @open-auto-focus="emit('openAutoFocus', $event)"
+      @close-auto-focus="emit('closeAutoFocus', $event)"
+      @escape-key-down="emit('escapeKeyDown', $event)"
+      @pointer-down-outside="emit('pointerDownOutside', $event)"
+      @focus-outside="emit('focusOutside', $event)"
+      @interact-outside="emit('interactOutside', $event)"
+      @dismiss="emit('dismiss')"
+    >
+      <slot />
+    </DialogContentModal>
+    <DialogContentNonModal
+      v-else
+      :as="as"
+      :role="role"
+      @open-auto-focus="emit('openAutoFocus', $event)"
+      @close-auto-focus="emit('closeAutoFocus', $event)"
+      @escape-key-down="emit('escapeKeyDown', $event)"
+      @pointer-down-outside="emit('pointerDownOutside', $event)"
+      @focus-outside="emit('focusOutside', $event)"
+      @interact-outside="emit('interactOutside', $event)"
+      @dismiss="emit('dismiss')"
+    >
+      <slot />
+    </DialogContentNonModal>
+  </Presence>
+</template>
diff --git a/vue/primitives/src/dialog/DialogContentImpl.vue b/vue/primitives/src/dialog/DialogContentImpl.vue
new file mode 100644
index 0000000..3358bad
--- /dev/null
+++ b/vue/primitives/src/dialog/DialogContentImpl.vue
@@ -0,0 +1,68 @@
+<script lang="ts">
+import type { DismissableLayerEmits } from '../dismissable-layer';
+import type { FocusScopeEmits } from '../focus-scope';
+import type { PrimitiveProps } from '../primitive';
+
+export interface DialogContentImplProps extends PrimitiveProps {
+  /** Trap focus inside the content (modal dialogs). */
+  trapFocus?: boolean;
+  /** Block outside pointer events (modal dialogs). */
+  disableOutsidePointerEvents?: boolean;
+  /** ARIA role on the content. Defaults to 'dialog'; use 'alertdialog' for AlertDialog. */
+  role?: 'dialog' | 'alertdialog';
+}
+
+export interface DialogContentImplEmits {
+  openAutoFocus: FocusScopeEmits['mountAutoFocus'];
+  closeAutoFocus: FocusScopeEmits['unmountAutoFocus'];
+  escapeKeyDown: DismissableLayerEmits['escapeKeyDown'];
+  pointerDownOutside: DismissableLayerEmits['pointerDownOutside'];
+  focusOutside: DismissableLayerEmits['focusOutside'];
+  interactOutside: DismissableLayerEmits['interactOutside'];
+  dismiss: [];
+}
+</script>
+
+<script setup lang="ts">
+import { DismissableLayer } from '../dismissable-layer';
+import { FocusScope } from '../focus-scope';
+import { useDialogContext } from './context';
+
+const {
+  as = 'div',
+  trapFocus = false,
+  disableOutsidePointerEvents = false,
+  role = 'dialog',
+} = defineProps<DialogContentImplProps>();
+
+const emit = defineEmits<DialogContentImplEmits>();
+const ctx = useDialogContext();
+</script>
+
+<template>
+  <FocusScope
+    as="template"
+    :loop="true"
+    :trapped="trapFocus"
+    @mount-auto-focus="emit('openAutoFocus', $event)"
+    @unmount-auto-focus="emit('closeAutoFocus', $event)"
+  >
+    <DismissableLayer
+      :id="ctx.contentId.value"
+      :as="as"
+      :disable-outside-pointer-events="disableOutsidePointerEvents"
+      :role="role"
+      :aria-modal="disableOutsidePointerEvents ? 'true' : undefined"
+      :aria-labelledby="ctx.titleId.value"
+      :aria-describedby="ctx.descriptionId.value"
+      :data-state="ctx.open.value ? 'open' : 'closed'"
+      @escape-key-down="emit('escapeKeyDown', $event)"
+      @pointer-down-outside="emit('pointerDownOutside', $event)"
+      @focus-outside="emit('focusOutside', $event)"
+      @interact-outside="emit('interactOutside', $event)"
+      @dismiss="ctx.onClose"
+    >
+      <slot />
+    </DismissableLayer>
+  </FocusScope>
+</template>
diff --git a/vue/primitives/src/dialog/DialogContentModal.vue b/vue/primitives/src/dialog/DialogContentModal.vue
new file mode 100644
index 0000000..9474323
--- /dev/null
+++ b/vue/primitives/src/dialog/DialogContentModal.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { DialogContentImplEmits, DialogContentImplProps } from './DialogContentImpl.vue';
+import type { VoidFunction } from '@robonen/stdlib';
+import { onBeforeUnmount, watch } from 'vue';
+import { useBodyScrollLock, useForwardExpose } from '@robonen/vue';
+import { useHideOthers } from '../utils/useHideOthers';
+import { useDialogContext } from './context';
+import DialogContentImpl from './DialogContentImpl.vue';
+
+const { as = 'div', role = 'dialog' } = defineProps<DialogContentImplProps>();
+const emit = defineEmits<DialogContentImplEmits>();
+
+const ctx = useDialogContext();
+const { forwardRef, currentElement } = useForwardExpose();
+
+watch(currentElement, (el) => {
+  ctx.contentElement.value = el as HTMLElement | undefined;
+}, { immediate: true, flush: 'post' });
+
+useHideOthers(currentElement);
+
+let release: VoidFunction | null = null;
+watch(() => ctx.open.value, (open) => {
+  if (open && !release) release = useBodyScrollLock();
+  else if (!open && release) {
+    release();
+    release = null;
+  }
+}, { immediate: true, flush: 'post' });
+
+onBeforeUnmount(() => {
+  release?.();
+  release = null;
+});
+</script>
+
+<template>
+  <DialogContentImpl
+    :ref="forwardRef"
+    :as="as"
+    :role="role"
+    :trap-focus="ctx.open.value"
+    :disable-outside-pointer-events="true"
+    @open-auto-focus="emit('openAutoFocus', $event)"
+    @close-auto-focus="emit('closeAutoFocus', $event)"
+    @escape-key-down="emit('escapeKeyDown', $event)"
+    @pointer-down-outside="emit('pointerDownOutside', $event)"
+    @focus-outside="emit('focusOutside', $event)"
+    @interact-outside="emit('interactOutside', $event)"
+    @dismiss="emit('dismiss')"
+  >
+    <slot />
+  </DialogContentImpl>
+</template>
diff --git a/vue/primitives/src/dialog/DialogContentNonModal.vue b/vue/primitives/src/dialog/DialogContentNonModal.vue
new file mode 100644
index 0000000..56cda19
--- /dev/null
+++ b/vue/primitives/src/dialog/DialogContentNonModal.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { DialogContentImplEmits, DialogContentImplProps } from './DialogContentImpl.vue';
+import { watch } from 'vue';
+import { useForwardExpose } from '@robonen/vue';
+import { useDialogContext } from './context';
+import DialogContentImpl from './DialogContentImpl.vue';
+
+const { as = 'div', role = 'dialog' } = defineProps<DialogContentImplProps>();
+const emit = defineEmits<DialogContentImplEmits>();
+
+const ctx = useDialogContext();
+const { forwardRef, currentElement } = useForwardExpose();
+
+watch(currentElement, (el) => {
+  ctx.contentElement.value = el as HTMLElement | undefined;
+}, { immediate: true, flush: 'post' });
+</script>
+
+<template>
+  <DialogContentImpl
+    :ref="forwardRef"
+    :as="as"
+    :role="role"
+    :trap-focus="false"
+    :disable-outside-pointer-events="false"
+    @open-auto-focus="emit('openAutoFocus', $event)"
+    @close-auto-focus="emit('closeAutoFocus', $event)"
+    @escape-key-down="emit('escapeKeyDown', $event)"
+    @pointer-down-outside="emit('pointerDownOutside', $event)"
+    @focus-outside="emit('focusOutside', $event)"
+    @interact-outside="emit('interactOutside', $event)"
+    @dismiss="emit('dismiss')"
+  >
+    <slot />
+  </DialogContentImpl>
+</template>
diff --git a/vue/primitives/src/dialog/DialogDescription.vue b/vue/primitives/src/dialog/DialogDescription.vue
new file mode 100644
index 0000000..3b07310
--- /dev/null
+++ b/vue/primitives/src/dialog/DialogDescription.vue
@@ -0,0 +1,32 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface DialogDescriptionProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { onBeforeUnmount, onMounted } from 'vue';
+import { useDialogContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+import { useId } from '../config-provider';
+
+const { as = 'p' } = defineProps<DialogDescriptionProps>();
+const { forwardRef } = useForwardExpose();
+const ctx = useDialogContext();
+
+const id = useId(undefined, 'dialog-description');
+
+onMounted(() => {
+  ctx.descriptionId.value = id.value;
+});
+onBeforeUnmount(() => {
+  if (ctx.descriptionId.value === id.value) ctx.descriptionId.value = undefined;
+});
+</script>
+
+<template>
+  <Primitive :ref="forwardRef" :id="id" :as="as">
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/dialog/DialogOverlay.vue b/vue/primitives/src/dialog/DialogOverlay.vue
new file mode 100644
index 0000000..55d1e4b
--- /dev/null
+++ b/vue/primitives/src/dialog/DialogOverlay.vue
@@ -0,0 +1,36 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface DialogOverlayProps extends PrimitiveProps {
+  /**
+   * Keep overlay mounted even when the dialog is closed — useful for CSS
+   * exit animations.
+   * @default false
+   */
+  forceMount?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { Presence } from '../presence';
+import { Primitive } from '../primitive';
+import { useDialogContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'div', forceMount = false } = defineProps<DialogOverlayProps>();
+const { forwardRef } = useForwardExpose();
+const ctx = useDialogContext();
+</script>
+
+<template>
+  <Presence v-if="ctx.modal.value" :present="ctx.open.value" :force-mount="forceMount">
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      :data-state="ctx.open.value ? 'open' : 'closed'"
+      :style="{ pointerEvents: 'auto' }"
+    >
+      <slot />
+    </Primitive>
+  </Presence>
+</template>
diff --git a/vue/primitives/src/dialog/DialogPortal.vue b/vue/primitives/src/dialog/DialogPortal.vue
new file mode 100644
index 0000000..38b9b49
--- /dev/null
+++ b/vue/primitives/src/dialog/DialogPortal.vue
@@ -0,0 +1,35 @@
+<script lang="ts">
+import type { TeleportPrimitiveProps } from '../teleport';
+
+export interface DialogPortalProps extends TeleportPrimitiveProps {
+  /**
+   * When true the Portal (and its descendants) remain mounted even when the
+   * dialog is closed. Consumers use this to drive exit animations via CSS.
+   * @default false
+   */
+  forceMount?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import PortalPrimitive from '../teleport/Teleport.vue';
+import { Presence } from '../presence';
+import { useDialogContext } from './context';
+
+const {
+  to,
+  disabled,
+  defer,
+  forceMount = false,
+} = defineProps<DialogPortalProps>();
+
+const ctx = useDialogContext();
+</script>
+
+<template>
+  <Presence :present="ctx.open.value" :force-mount="forceMount">
+    <PortalPrimitive :to="to" :disabled="disabled" :defer="defer">
+      <slot :present="ctx.open.value" />
+    </PortalPrimitive>
+  </Presence>
+</template>
diff --git a/vue/primitives/src/dialog/DialogRoot.vue b/vue/primitives/src/dialog/DialogRoot.vue
new file mode 100644
index 0000000..e3a8ddb
--- /dev/null
+++ b/vue/primitives/src/dialog/DialogRoot.vue
@@ -0,0 +1,66 @@
+<script lang="ts">
+export interface DialogRootProps {
+  /** Uncontrolled initial open state. Ignored once `v-model:open` is bound. */
+  defaultOpen?: boolean;
+  /**
+   * Modal mode traps focus inside the content, locks body scroll, and marks
+   * the rest of the document as inert.
+   * @default true
+   */
+  modal?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { ref, toRef } from 'vue';
+import { useId } from '../config-provider';
+import { provideDialogContext } from './context';
+
+defineOptions({ inheritAttrs: false });
+
+const { defaultOpen = false, modal = true } = defineProps<DialogRootProps>();
+
+// v-model:open — undefined means the parent hasn't bound a value; we fall
+// back to an internal ref (uncontrolled mode) and still forward writes.
+const localOpen = ref<boolean>(defaultOpen);
+
+const open = defineModel<boolean>('open', {
+  default: undefined,
+  get: v => v ?? localOpen.value,
+  set: (v) => {
+    localOpen.value = v;
+    return v;
+  },
+});
+
+const triggerId = useId(undefined, 'dialog-trigger');
+const contentId = useId(undefined, 'dialog-content');
+
+const titleId = ref<string | undefined>(undefined);
+const descriptionId = ref<string | undefined>(undefined);
+
+const triggerElement = ref<HTMLElement | undefined>(undefined);
+const contentElement = ref<HTMLElement | undefined>(undefined);
+
+// Identity passthrough — `toRef` with a getter returns a `GetterRefImpl`:
+// reactive `Ref` without the `ReactiveEffect`/cache that `computed` allocates.
+const modalRef = toRef(() => modal);
+
+provideDialogContext({
+  open,
+  modal: modalRef,
+  triggerId,
+  contentId,
+  titleId,
+  descriptionId,
+  triggerElement,
+  contentElement,
+  onOpen: () => { open.value = true; },
+  onClose: () => { open.value = false; },
+  onToggle: () => { open.value = !open.value; },
+});
+</script>
+
+<template>
+  <slot :open="open" />
+</template>
diff --git a/vue/primitives/src/dialog/DialogTitle.vue b/vue/primitives/src/dialog/DialogTitle.vue
new file mode 100644
index 0000000..6559807
--- /dev/null
+++ b/vue/primitives/src/dialog/DialogTitle.vue
@@ -0,0 +1,32 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface DialogTitleProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { onBeforeUnmount, onMounted } from 'vue';
+import { useDialogContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+import { useId } from '../config-provider';
+
+const { as = 'h2' } = defineProps<DialogTitleProps>();
+const { forwardRef } = useForwardExpose();
+const ctx = useDialogContext();
+
+const id = useId(undefined, 'dialog-title');
+
+onMounted(() => {
+  ctx.titleId.value = id.value;
+});
+onBeforeUnmount(() => {
+  if (ctx.titleId.value === id.value) ctx.titleId.value = undefined;
+});
+</script>
+
+<template>
+  <Primitive :ref="forwardRef" :id="id" :as="as">
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/dialog/DialogTrigger.vue b/vue/primitives/src/dialog/DialogTrigger.vue
new file mode 100644
index 0000000..c76de89
--- /dev/null
+++ b/vue/primitives/src/dialog/DialogTrigger.vue
@@ -0,0 +1,36 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface DialogTriggerProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { watch } from 'vue';
+import { Primitive } from '../primitive';
+import { useDialogContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'button' } = defineProps<DialogTriggerProps>();
+const { forwardRef, currentElement } = useForwardExpose();
+const ctx = useDialogContext();
+
+watch(currentElement, (el) => {
+  ctx.triggerElement.value = el as HTMLElement | undefined;
+}, { immediate: true, flush: 'post' });
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :id="ctx.triggerId.value"
+    :as="as"
+    type="button"
+    :aria-haspopup="'dialog'"
+    :aria-expanded="ctx.open.value"
+    :aria-controls="ctx.contentId.value"
+    :data-state="ctx.open.value ? 'open' : 'closed'"
+    @click="ctx.onToggle"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/dialog/__test__/Dialog.test.ts b/vue/primitives/src/dialog/__test__/Dialog.test.ts
new file mode 100644
index 0000000..724c4f7
--- /dev/null
+++ b/vue/primitives/src/dialog/__test__/Dialog.test.ts
@@ -0,0 +1,385 @@
+import type { VueWrapper } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { userEvent } from 'vitest/browser';
+import { render } from 'vitest-browser-vue';
+import { defineComponent, h, nextTick, ref } from 'vue';
+import {
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogOverlay,
+  DialogPortal,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from '../index';
+
+const wrappers: Array<VueWrapper<any>> = [];
+
+afterEach(() => {
+  while (wrappers.length) wrappers.pop()!.unmount();
+  document.body.innerHTML = '';
+  document.body.removeAttribute('style');
+  delete document.body.dataset['dismissableBlocking'];
+});
+
+function track<T extends VueWrapper<any>>(w: T): T {
+  wrappers.push(w);
+  return w;
+}
+
+/** Drains Vue's scheduler (including `flush: 'post'` watchers). */
+async function flush(): Promise<void> {
+  await nextTick();
+  await nextTick();
+  await nextTick();
+}
+
+function $<T extends Element = HTMLElement>(selector: string): T | null {
+  return document.querySelector<T>(selector);
+}
+
+function $content(): HTMLElement | null {
+  return $('[role="dialog"]');
+}
+
+function $trigger(): HTMLElement {
+  return $<HTMLElement>('[aria-haspopup="dialog"]')!;
+}
+
+function $close(): HTMLButtonElement | undefined {
+  return [...document.querySelectorAll('button')].find(b => b.textContent === 'Close');
+}
+
+interface MountOptions {
+  open?: boolean;
+  defaultOpen?: boolean;
+  modal?: boolean;
+  onUpdateOpen?: (v: boolean) => void;
+  withDescription?: boolean;
+}
+
+function injectBodySibling(id: string): HTMLElement {
+  const el = document.createElement('div');
+  el.id = id;
+  el.textContent = id;
+  document.body.appendChild(el);
+  return el;
+}
+
+function mountDialog(options: MountOptions = {}) {
+  const { withDescription = true } = options;
+
+  const Wrapper = defineComponent({
+    setup() {
+      return () => h(
+        DialogRoot,
+        {
+          open: options.open,
+          defaultOpen: options.defaultOpen,
+          modal: options.modal ?? true,
+          'onUpdate:open': options.onUpdateOpen,
+        },
+        {
+          default: () => [
+            h(DialogTrigger, null, { default: () => 'Open' }),
+            h(DialogPortal, null, {
+              default: () => [
+                h(DialogOverlay, { 'data-testid': 'overlay' }),
+                h(DialogContent, null, {
+                  default: () => [
+                    h(DialogTitle, null, { default: () => 'Title' }),
+                    withDescription ? h(DialogDescription, null, { default: () => 'Desc' }) : null,
+                    h(DialogClose, null, { default: () => 'Close' }),
+                  ],
+                }),
+              ],
+            }),
+          ],
+        },
+      );
+    },
+  });
+
+  return track(mount(Wrapper, { attachTo: document.body }));
+}
+
+describe('Dialog / markup', () => {
+  it('renders closed by default', () => {
+    mountDialog();
+    const trigger = $trigger();
+    expect(trigger.getAttribute('aria-expanded')).toBe('false');
+    expect(trigger.getAttribute('data-state')).toBe('closed');
+    expect($content()).toBeNull();
+  });
+
+  it('exposes data-state="open" on trigger and content when open', async () => {
+    mountDialog({ defaultOpen: true });
+    await flush();
+
+    const trigger = $trigger();
+    const content = $content()!;
+    expect(trigger.getAttribute('data-state')).toBe('open');
+    expect(content.getAttribute('data-state')).toBe('open');
+  });
+
+  it('resolves aria-labelledby / aria-describedby to the rendered title and description ids', async () => {
+    mountDialog({ defaultOpen: true });
+    await flush();
+
+    const content = $content()!;
+    const titleId = content.getAttribute('aria-labelledby');
+    const descId = content.getAttribute('aria-describedby');
+    expect(titleId && document.getElementById(titleId)?.textContent).toBe('Title');
+    expect(descId && document.getElementById(descId)?.textContent).toBe('Desc');
+  });
+
+  it('does not set aria-describedby when description is absent', async () => {
+    mountDialog({ defaultOpen: true, withDescription: false });
+    await flush();
+
+    const content = $content()!;
+    const descId = content.getAttribute('aria-describedby');
+    expect(!descId || !document.getElementById(descId)).toBe(true);
+  });
+
+  it('links trigger.aria-controls to the content id', async () => {
+    mountDialog({ defaultOpen: true });
+    await flush();
+
+    const trigger = $trigger();
+    const content = $content()!;
+    expect(trigger.getAttribute('aria-controls')).toBe(content.id);
+  });
+});
+
+describe('Dialog / open state', () => {
+  it('opens when trigger is clicked (uncontrolled)', async () => {
+    mountDialog();
+    $trigger().click();
+    await flush();
+    expect($content()).toBeTruthy();
+  });
+
+  it('closes when DialogClose is clicked', async () => {
+    mountDialog({ defaultOpen: true });
+    await flush();
+    $close()!.click();
+    await flush();
+    expect($content()).toBeNull();
+  });
+
+  it('closes on Escape key', async () => {
+    mountDialog({ defaultOpen: true });
+    await flush();
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', cancelable: true }));
+    await flush();
+    expect($content()).toBeNull();
+  });
+
+  it('supports a controlled open prop via v-model', async () => {
+    const open = ref(false);
+    const onUpdateOpen = vi.fn((v: boolean) => {
+      open.value = v;
+    });
+    const Wrapper = defineComponent({
+      setup() {
+        return () => h(
+          DialogRoot,
+          { open: open.value, 'onUpdate:open': onUpdateOpen },
+          {
+            default: () => [
+              h(DialogTrigger, null, { default: () => 'Open' }),
+              h(DialogPortal, null, {
+                default: () => h(DialogContent, null, {
+                  default: () => h(DialogTitle, null, { default: () => 'T' }),
+                }),
+              }),
+            ],
+          },
+        );
+      },
+    });
+    track(mount(Wrapper, { attachTo: document.body }));
+
+    $trigger().click();
+    await flush();
+    expect(onUpdateOpen).toHaveBeenCalledWith(true);
+    expect(open.value).toBe(true);
+    expect($content()).toBeTruthy();
+  });
+
+  it('re-opens cleanly after being closed', async () => {
+    mountDialog();
+    $trigger().click();
+    await flush();
+    expect($content()).toBeTruthy();
+
+    $close()!.click();
+    await flush();
+    expect($content()).toBeNull();
+
+    $trigger().click();
+    await flush();
+    expect($content()).toBeTruthy();
+  });
+});
+
+describe('Dialog / modal vs non-modal', () => {
+  it('modal: locks body scroll, aria-hides siblings, sets aria-modal', async () => {
+    const a = injectBodySibling('sibling-a');
+    const b = injectBodySibling('sibling-b');
+    mountDialog({ defaultOpen: true, modal: true });
+    await flush();
+
+    const content = $content()!;
+    expect(content.getAttribute('aria-modal')).toBe('true');
+    expect(document.body.style.overflow).toBe('hidden');
+
+    expect(a.getAttribute('aria-hidden')).toBe('true');
+    expect(b.getAttribute('aria-hidden')).toBe('true');
+  });
+
+  it('modal: restores sibling aria-hidden on close', async () => {
+    const a = injectBodySibling('sibling-a');
+    mountDialog({ defaultOpen: true, modal: true });
+    await flush();
+
+    expect(a.getAttribute('aria-hidden')).toBe('true');
+
+    $close()!.click();
+    await flush();
+
+    expect(a.getAttribute('aria-hidden')).toBeNull();
+    expect(a.getAttribute('data-aria-hidden')).toBeNull();
+  });
+
+  it('non-modal: no body-scroll lock, no aria-hidden on siblings, no aria-modal', async () => {
+    const a = injectBodySibling('sibling-a');
+    mountDialog({ defaultOpen: true, modal: false });
+    await flush();
+
+    const content = $content()!;
+    expect(content.getAttribute('aria-modal')).toBeNull();
+    expect(document.body.style.overflow).not.toBe('hidden');
+
+    expect(a.getAttribute('aria-hidden')).toBeNull();
+  });
+
+  it('non-modal: omits overlay', async () => {
+    mountDialog({ defaultOpen: true, modal: false });
+    await flush();
+
+    const overlays = [...document.querySelectorAll<HTMLElement>('[data-state="open"]')]
+      .filter(el => el.getAttribute('role') !== 'dialog' && !el.hasAttribute('aria-haspopup'));
+    expect(overlays).toHaveLength(0);
+  });
+
+  it('modal: renders overlay with data-state="open"', async () => {
+    mountDialog({ defaultOpen: true, modal: true });
+    await flush();
+
+    const overlay = document.querySelector<HTMLElement>('[data-testid="overlay"]');
+    expect(overlay).toBeTruthy();
+    expect(overlay!.getAttribute('data-state')).toBe('open');
+  });
+});
+
+// -----------------------------------------------------------------------------
+// Browser-only tests (real focus behaviour).
+// -----------------------------------------------------------------------------
+
+function settle() {
+  return new Promise((r) => {
+    requestAnimationFrame(() => requestAnimationFrame(() => r(null)));
+  });
+}
+
+function mountInDom<T>(component: T) {
+  const host = document.createElement('div');
+  document.body.appendChild(host);
+  return render(component, { container: host });
+}
+
+const DialogBrowserHarness = defineComponent({
+  setup() {
+    const open = ref(false);
+    return { open };
+  },
+  render() {
+    return h(DialogRoot, {
+      open: this.open,
+      'onUpdate:open': (v: boolean) => { this.open = v; },
+    }, {
+      default: () => [
+        h(DialogTrigger, { id: 'trigger' }, { default: () => 'Open' }),
+        h(DialogPortal, null, {
+          default: () => [
+            h(DialogOverlay, { id: 'overlay' }),
+            h(DialogContent, { id: 'content' }, {
+              default: () => [
+                h(DialogTitle, null, { default: () => 'Title' }),
+                h(DialogDescription, null, { default: () => 'Desc' }),
+                h('button', { id: 'first-inside' }, 'First'),
+                h('button', { id: 'second-inside' }, 'Second'),
+                h(DialogClose, { id: 'close' }, { default: () => 'Close' }),
+              ],
+            }),
+          ],
+        }),
+      ],
+    });
+  },
+});
+
+describe('Dialog / focus (browser)', () => {
+  it('moves focus into content on open and returns to trigger on close', async () => {
+    const { container } = mountInDom(DialogBrowserHarness);
+    const trigger = container.querySelector<HTMLButtonElement>('#trigger')!;
+    trigger.focus();
+    expect(document.activeElement).toBe(trigger);
+
+    await userEvent.click(trigger);
+    await settle();
+
+    const content = document.querySelector<HTMLElement>('#content')!;
+    expect(content.contains(document.activeElement)).toBe(true);
+
+    await userEvent.keyboard('{Escape}');
+    await settle();
+
+    expect(document.querySelector('#content')).toBeNull();
+    expect(document.activeElement).toBe(trigger);
+  });
+
+  it('close button closes dialog and restores focus to trigger', async () => {
+    const { container } = mountInDom(DialogBrowserHarness);
+    const trigger = container.querySelector<HTMLButtonElement>('#trigger')!;
+    trigger.focus();
+    await userEvent.click(trigger);
+    await settle();
+
+    await userEvent.click(document.querySelector<HTMLButtonElement>('#close')!);
+    await settle();
+
+    expect(document.querySelector('#content')).toBeNull();
+    expect(document.activeElement).toBe(trigger);
+  });
+
+  it('Tab cycles focus inside the content (focus trap)', async () => {
+    const { container } = mountInDom(DialogBrowserHarness);
+    const trigger = container.querySelector<HTMLButtonElement>('#trigger')!;
+    trigger.focus();
+    await userEvent.click(trigger);
+    await settle();
+
+    const content = document.querySelector<HTMLElement>('#content')!;
+
+    for (let i = 0; i < 6; i++) {
+      await userEvent.keyboard('{Tab}');
+      await settle();
+      expect(content.contains(document.activeElement)).toBe(true);
+    }
+  });
+});
diff --git a/vue/primitives/src/dialog/context.ts b/vue/primitives/src/dialog/context.ts
new file mode 100644
index 0000000..c33c0c3
--- /dev/null
+++ b/vue/primitives/src/dialog/context.ts
@@ -0,0 +1,32 @@
+import type { ComputedRef, Ref, WritableComputedRef } from 'vue';
+import { useContextFactory } from '@robonen/vue';
+
+export interface DialogContext {
+  /** Controlled open state. Write to toggle. */
+  open: WritableComputedRef<boolean> | Ref<boolean>;
+  /** Whether the dialog is modal (traps focus, locks scroll, inert outside). */
+  modal: Ref<boolean>;
+  /** Stable id for the trigger element (for aria-controls). */
+  triggerId: ComputedRef<string>;
+  /** Stable id applied to DialogContent (for aria-controls target). */
+  contentId: ComputedRef<string>;
+  /** Id of DialogTitle — when mounted — used as aria-labelledby. */
+  titleId: Ref<string | undefined>;
+  /** Id of DialogDescription — when mounted — used as aria-describedby. */
+  descriptionId: Ref<string | undefined>;
+  /** DOM node of DialogTrigger — used to restore focus and as a dismiss anchor. */
+  triggerElement: Ref<HTMLElement | undefined>;
+  /** DOM node of the currently mounted DialogContent. */
+  contentElement: Ref<HTMLElement | undefined>;
+  /** Programmatically open the dialog. */
+  onOpen: () => void;
+  /** Programmatically close the dialog. */
+  onClose: () => void;
+  /** Toggle the dialog. */
+  onToggle: () => void;
+}
+
+const ctx = useContextFactory<DialogContext>('DialogContext');
+
+export const provideDialogContext = ctx.provide;
+export const useDialogContext = ctx.inject;
diff --git a/vue/primitives/src/dialog/index.ts b/vue/primitives/src/dialog/index.ts
new file mode 100644
index 0000000..ec13a3a
--- /dev/null
+++ b/vue/primitives/src/dialog/index.ts
@@ -0,0 +1,20 @@
+export { default as DialogRoot } from './DialogRoot.vue';
+export { default as DialogTrigger } from './DialogTrigger.vue';
+export { default as DialogPortal } from './DialogPortal.vue';
+export { default as DialogOverlay } from './DialogOverlay.vue';
+export { default as DialogContent } from './DialogContent.vue';
+export { default as DialogTitle } from './DialogTitle.vue';
+export { default as DialogDescription } from './DialogDescription.vue';
+export { default as DialogClose } from './DialogClose.vue';
+
+export { useDialogContext } from './context';
+
+export type { DialogContext } from './context';
+export type { DialogRootProps } from './DialogRoot.vue';
+export type { DialogTriggerProps } from './DialogTrigger.vue';
+export type { DialogPortalProps } from './DialogPortal.vue';
+export type { DialogOverlayProps } from './DialogOverlay.vue';
+export type { DialogContentEmits, DialogContentProps } from './DialogContent.vue';
+export type { DialogTitleProps } from './DialogTitle.vue';
+export type { DialogDescriptionProps } from './DialogDescription.vue';
+export type { DialogCloseProps } from './DialogClose.vue';
diff --git a/vue/primitives/src/dismissable-layer/DismissableLayer.vue b/vue/primitives/src/dismissable-layer/DismissableLayer.vue
new file mode 100644
index 0000000..1f8e324
--- /dev/null
+++ b/vue/primitives/src/dismissable-layer/DismissableLayer.vue
@@ -0,0 +1,132 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface DismissableLayerProps extends PrimitiveProps {
+  /**
+   * When enabled, outside pointer events are blocked — the rest of the
+   * document becomes `pointer-events: none`, and the layer gains
+   * `pointer-events: auto` so it is still interactive.
+   * @default false
+   */
+  disableOutsidePointerEvents?: boolean;
+}
+
+export interface DismissableLayerEmits {
+  /** Escape key pressed while this layer is topmost. Call `event.preventDefault()` to suppress dismiss. */
+  escapeKeyDown: [event: KeyboardEvent];
+  /** Pointer down outside this layer. Preventable. */
+  pointerDownOutside: [event: PointerEvent | MouseEvent];
+  /** Focus moved outside this layer. Preventable. */
+  focusOutside: [event: FocusEvent];
+  /** Either pointer-outside or focus-outside. Preventable. */
+  interactOutside: [event: PointerEvent | MouseEvent | FocusEvent];
+  /** Fired after a non-prevented outside interaction or escape. */
+  dismiss: [];
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { onBeforeUnmount, onMounted, watchPostEffect } from 'vue';
+import { dismissableLayerStack } from './stack';
+import { useClickOutside, useEscapeKey, useEventListener, useForwardExpose } from '@robonen/vue';
+
+const { disableOutsidePointerEvents = false, as = 'div' } = defineProps<DismissableLayerProps>();
+const emit = defineEmits<DismissableLayerEmits>();
+
+const { forwardRef, currentElement: nodeRef } = useForwardExpose();
+
+const layer = { el: null as unknown as HTMLElement, disableOutsidePointerEvents: false };
+
+watchPostEffect(() => {
+  layer.disableOutsidePointerEvents = disableOutsidePointerEvents;
+});
+
+onMounted(() => {
+  if (!nodeRef.value) return;
+  layer.el = nodeRef.value;
+  dismissableLayerStack.push(layer);
+});
+
+onBeforeUnmount(() => {
+  dismissableLayerStack.remove(layer);
+});
+
+function createInteractEvent(event: PointerEvent | MouseEvent | FocusEvent): { defaultPrevented: boolean } {
+  // Emit `interactOutside` first so consumers can cancel before the specific event fires.
+  let prevented = false;
+  const original = event.preventDefault;
+  event.preventDefault = () => {
+    prevented = true;
+    original.call(event);
+  };
+  emit('interactOutside', event);
+  event.preventDefault = original;
+  return { defaultPrevented: prevented };
+}
+
+useEscapeKey((event) => {
+  if (!dismissableLayerStack.isTopmost(layer)) return;
+  emit('escapeKeyDown', event);
+  if (!event.defaultPrevented) emit('dismiss');
+});
+
+useClickOutside(nodeRef, (event) => {
+  if (!dismissableLayerStack.isTopmost(layer)) return;
+  const interact = createInteractEvent(event);
+  if (interact.defaultPrevented) return;
+  emit('pointerDownOutside', event);
+  if (!event.defaultPrevented) emit('dismiss');
+});
+
+// Focus outside detection — fires when focus leaves this layer to an element
+// outside it. We use the `focusin` event at document level.
+useEventListener(document, 'focusin', (event: FocusEvent) => {
+  const el = nodeRef.value;
+  const target = event.target as Node | null;
+  if (!el || !target) return;
+  if (el === target || el.contains(target)) return;
+  if (!dismissableLayerStack.isTopmost(layer)) return;
+
+  const interact = createInteractEvent(event);
+  if (interact.defaultPrevented) return;
+
+  emit('focusOutside', event);
+  if (!event.defaultPrevented) emit('dismiss');
+});
+
+// When this layer disables outside pointer events, the body gets a data
+// attribute so consumers can style `[data-dismissable-blocking] *:not([data-dismissable-layer]) { pointer-events: none }`.
+// We toggle via a style element approach for robustness.
+// `disableOutsidePointerEvents` is a reactive prop destructure — reading it
+// inside `watchPostEffect` already registers the dependency, no need for a
+// computed wrapper.
+
+watchPostEffect((onCleanup) => {
+  if (!disableOutsidePointerEvents) return;
+  if (typeof document === 'undefined') return;
+
+  const original = document.body.style.pointerEvents;
+  document.body.style.pointerEvents = 'none';
+  document.body.dataset['dismissableBlocking'] = 'true';
+
+  onCleanup(() => {
+    // Only clear if no other disabling layer remains
+    if (!dismissableLayerStack.anyDisabling()) {
+      document.body.style.pointerEvents = original;
+      delete document.body.dataset['dismissableBlocking'];
+    }
+  });
+});
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :data-dismissable-layer="true"
+    :style="disableOutsidePointerEvents ? { pointerEvents: 'auto' } : undefined"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/dismissable-layer/__test__/DismissableLayer.test.ts b/vue/primitives/src/dismissable-layer/__test__/DismissableLayer.test.ts
new file mode 100644
index 0000000..9c0bf0c
--- /dev/null
+++ b/vue/primitives/src/dismissable-layer/__test__/DismissableLayer.test.ts
@@ -0,0 +1,121 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import DismissableLayer from '../DismissableLayer.vue';
+
+describe('DismissableLayer', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+    document.body.style.pointerEvents = '';
+  });
+
+  it('emits escapeKeyDown and dismiss on Escape when topmost', async () => {
+    const w = mount(DismissableLayer, {
+      attachTo: document.body,
+      slots: { default: '<button>inside</button>' },
+    });
+    await nextTick();
+
+    globalThis.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+
+    expect(w.emitted('escapeKeyDown')).toBeTruthy();
+    expect(w.emitted('dismiss')).toBeTruthy();
+    w.unmount();
+  });
+
+  it('does not dismiss when escapeKeyDown.preventDefault() is called', async () => {
+    const w = mount(DismissableLayer, {
+      attachTo: document.body,
+      slots: { default: '<button>inside</button>' },
+      props: {
+        onEscapeKeyDown: (e: Event) => e.preventDefault(),
+      },
+    });
+    await nextTick();
+
+    globalThis.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', cancelable: true }));
+
+    expect(w.emitted('escapeKeyDown')).toBeTruthy();
+    expect(w.emitted('dismiss')).toBeFalsy();
+    w.unmount();
+  });
+
+  it('emits pointerDownOutside on outside pointerdown', async () => {
+    const outside = document.createElement('button');
+    document.body.appendChild(outside);
+
+    const w = mount(DismissableLayer, {
+      attachTo: document.body,
+      slots: { default: '<button data-testid="inside">in</button>' },
+    });
+    await nextTick();
+
+    outside.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, composed: true }));
+
+    expect(w.emitted('pointerDownOutside')).toBeTruthy();
+    expect(w.emitted('dismiss')).toBeTruthy();
+    w.unmount();
+  });
+
+  it('does not emit pointerDownOutside on inside pointerdown', async () => {
+    const w = mount(DismissableLayer, {
+      attachTo: document.body,
+      slots: { default: '<button data-testid="inside">in</button>' },
+    });
+    await nextTick();
+
+    const inside = w.find('[data-testid=inside]').element as HTMLElement;
+    inside.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, composed: true }));
+
+    expect(w.emitted('pointerDownOutside')).toBeFalsy();
+    expect(w.emitted('dismiss')).toBeFalsy();
+    w.unmount();
+  });
+
+  it('sets body pointer-events: none when disableOutsidePointerEvents is true', async () => {
+    const w = mount(DismissableLayer, {
+      attachTo: document.body,
+      props: { disableOutsidePointerEvents: true },
+      slots: { default: '<button>x</button>' },
+    });
+    await nextTick();
+
+    expect(document.body.style.pointerEvents).toBe('none');
+    expect(document.body.dataset['dismissableBlocking']).toBe('true');
+
+    w.unmount();
+    expect(document.body.style.pointerEvents).toBe('');
+    expect(document.body.dataset['dismissableBlocking']).toBeUndefined();
+  });
+
+  it('only topmost layer handles dismiss when nested', async () => {
+    const onDismissBottom = vi.fn();
+    const onDismissTop = vi.fn();
+
+    const bottom = mount(DismissableLayer, {
+      attachTo: document.body,
+      props: { onDismiss: onDismissBottom },
+      slots: { default: '<button>bottom</button>' },
+    });
+    await nextTick();
+
+    const top = mount(DismissableLayer, {
+      attachTo: document.body,
+      props: { onDismiss: onDismissTop },
+      slots: { default: '<button>top</button>' },
+    });
+    await nextTick();
+
+    globalThis.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+
+    expect(onDismissTop).toHaveBeenCalledTimes(1);
+    expect(onDismissBottom).not.toHaveBeenCalled();
+
+    top.unmount();
+
+    globalThis.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    expect(onDismissBottom).toHaveBeenCalledTimes(1);
+
+    bottom.unmount();
+  });
+});
diff --git a/vue/primitives/src/dismissable-layer/index.ts b/vue/primitives/src/dismissable-layer/index.ts
new file mode 100644
index 0000000..9f61932
--- /dev/null
+++ b/vue/primitives/src/dismissable-layer/index.ts
@@ -0,0 +1,7 @@
+export { default as DismissableLayer } from './DismissableLayer.vue';
+export { dismissableLayerStack } from './stack';
+
+export type {
+  DismissableLayerEmits,
+  DismissableLayerProps,
+} from './DismissableLayer.vue';
diff --git a/vue/primitives/src/dismissable-layer/stack.ts b/vue/primitives/src/dismissable-layer/stack.ts
new file mode 100644
index 0000000..69293d1
--- /dev/null
+++ b/vue/primitives/src/dismissable-layer/stack.ts
@@ -0,0 +1,40 @@
+export interface DismissableLayerElement {
+  el: HTMLElement;
+  disableOutsidePointerEvents: boolean;
+}
+
+const layers: DismissableLayerElement[] = [];
+
+/**
+ * Module-level stack of active DismissableLayers. The most recently-pushed
+ * non-disabled layer is considered the topmost and is the only one that
+ * should dispatch dismiss-style events (escape, pointer-outside, focus-outside).
+ */
+export const dismissableLayerStack = {
+  push(layer: DismissableLayerElement) {
+    layers.push(layer);
+  },
+
+  remove(layer: DismissableLayerElement) {
+    const i = layers.indexOf(layer);
+    if (i !== -1) layers.splice(i, 1);
+  },
+
+  isTopmost(layer: DismissableLayerElement): boolean {
+    return layers.at(-1) === layer;
+  },
+
+  hasDisablingLayerAbove(layer: DismissableLayerElement): boolean {
+    const i = layers.indexOf(layer);
+    if (i === -1) return false;
+    return layers.slice(i + 1).some(l => l.disableOutsidePointerEvents);
+  },
+
+  any(): boolean {
+    return layers.length > 0;
+  },
+
+  anyDisabling(): boolean {
+    return layers.some(l => l.disableOutsidePointerEvents);
+  },
+};
diff --git a/vue/primitives/src/dropdown-menu/DropdownMenuArrow.vue b/vue/primitives/src/dropdown-menu/DropdownMenuArrow.vue
new file mode 100644
index 0000000..98b2a80
--- /dev/null
+++ b/vue/primitives/src/dropdown-menu/DropdownMenuArrow.vue
@@ -0,0 +1,15 @@
+<script lang="ts">
+import type { MenuArrowProps } from '../menu';
+
+export interface DropdownMenuArrowProps extends MenuArrowProps {}
+</script>
+
+<script setup lang="ts">
+import { MenuArrow } from '../menu';
+
+const props = defineProps<DropdownMenuArrowProps>();
+</script>
+
+<template>
+  <MenuArrow v-bind="props"><slot /></MenuArrow>
+</template>
diff --git a/vue/primitives/src/dropdown-menu/DropdownMenuCheckboxItem.vue b/vue/primitives/src/dropdown-menu/DropdownMenuCheckboxItem.vue
new file mode 100644
index 0000000..d2ecbf9
--- /dev/null
+++ b/vue/primitives/src/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -0,0 +1,21 @@
+<script lang="ts">
+import type { MenuCheckboxItemEmits, MenuCheckboxItemProps } from '../menu';
+
+export interface DropdownMenuCheckboxItemProps extends MenuCheckboxItemProps {}
+export type DropdownMenuCheckboxItemEmits = MenuCheckboxItemEmits;
+</script>
+
+<script setup lang="ts">
+import { MenuCheckboxItem } from '../menu';
+
+const props = defineProps<DropdownMenuCheckboxItemProps>();
+const emit = defineEmits<DropdownMenuCheckboxItemEmits>();
+</script>
+
+<template>
+  <MenuCheckboxItem
+    v-bind="props"
+    @select="emit('select', $event)"
+    @update:checked="emit('update:checked', $event)"
+  ><slot /></MenuCheckboxItem>
+</template>
diff --git a/vue/primitives/src/dropdown-menu/DropdownMenuContent.vue b/vue/primitives/src/dropdown-menu/DropdownMenuContent.vue
new file mode 100644
index 0000000..1d5f622
--- /dev/null
+++ b/vue/primitives/src/dropdown-menu/DropdownMenuContent.vue
@@ -0,0 +1,33 @@
+<script lang="ts">
+import type { MenuContentEmits, MenuContentProps } from '../menu';
+
+export interface DropdownMenuContentProps extends MenuContentProps {}
+export type DropdownMenuContentEmits = MenuContentEmits;
+</script>
+
+<script setup lang="ts">
+import { MenuContent } from '../menu';
+import { useDropdownMenuRootContext } from './context';
+
+const props = defineProps<DropdownMenuContentProps>();
+const emit = defineEmits<DropdownMenuContentEmits>();
+const ddCtx = useDropdownMenuRootContext();
+</script>
+
+<template>
+  <MenuContent
+    v-bind="props"
+    :id="ddCtx.contentId.value"
+    :aria-labelledby="ddCtx.triggerId.value"
+    @close-auto-focus="emit('closeAutoFocus', $event)"
+    @escape-key-down="emit('escapeKeyDown', $event)"
+    @pointer-down-outside="emit('pointerDownOutside', $event)"
+    @focus-outside="emit('focusOutside', $event)"
+    @interact-outside="emit('interactOutside', $event)"
+    @dismiss="emit('dismiss')"
+    @entry-focus="emit('entryFocus', $event)"
+    @open-auto-focus="emit('openAutoFocus', $event)"
+  >
+    <slot />
+  </MenuContent>
+</template>
diff --git a/vue/primitives/src/dropdown-menu/DropdownMenuGroup.vue b/vue/primitives/src/dropdown-menu/DropdownMenuGroup.vue
new file mode 100644
index 0000000..355961e
--- /dev/null
+++ b/vue/primitives/src/dropdown-menu/DropdownMenuGroup.vue
@@ -0,0 +1,15 @@
+<script lang="ts">
+import type { MenuGroupProps } from '../menu';
+
+export interface DropdownMenuGroupProps extends MenuGroupProps {}
+</script>
+
+<script setup lang="ts">
+import { MenuGroup } from '../menu';
+
+const props = defineProps<DropdownMenuGroupProps>();
+</script>
+
+<template>
+  <MenuGroup v-bind="props"><slot /></MenuGroup>
+</template>
diff --git a/vue/primitives/src/dropdown-menu/DropdownMenuItem.vue b/vue/primitives/src/dropdown-menu/DropdownMenuItem.vue
new file mode 100644
index 0000000..db12231
--- /dev/null
+++ b/vue/primitives/src/dropdown-menu/DropdownMenuItem.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { MenuItemEmits, MenuItemProps } from '../menu';
+
+export interface DropdownMenuItemProps extends MenuItemProps {}
+export type DropdownMenuItemEmits = MenuItemEmits;
+</script>
+
+<script setup lang="ts">
+import { MenuItem } from '../menu';
+
+const props = defineProps<DropdownMenuItemProps>();
+const emit = defineEmits<DropdownMenuItemEmits>();
+</script>
+
+<template>
+  <MenuItem v-bind="props" @select="emit('select', $event)"><slot /></MenuItem>
+</template>
diff --git a/vue/primitives/src/dropdown-menu/DropdownMenuItemIndicator.vue b/vue/primitives/src/dropdown-menu/DropdownMenuItemIndicator.vue
new file mode 100644
index 0000000..bdab714
--- /dev/null
+++ b/vue/primitives/src/dropdown-menu/DropdownMenuItemIndicator.vue
@@ -0,0 +1,15 @@
+<script lang="ts">
+import type { MenuItemIndicatorProps } from '../menu';
+
+export interface DropdownMenuItemIndicatorProps extends MenuItemIndicatorProps {}
+</script>
+
+<script setup lang="ts">
+import { MenuItemIndicator } from '../menu';
+
+const props = defineProps<DropdownMenuItemIndicatorProps>();
+</script>
+
+<template>
+  <MenuItemIndicator v-bind="props"><slot /></MenuItemIndicator>
+</template>
diff --git a/vue/primitives/src/dropdown-menu/DropdownMenuLabel.vue b/vue/primitives/src/dropdown-menu/DropdownMenuLabel.vue
new file mode 100644
index 0000000..82a917a
--- /dev/null
+++ b/vue/primitives/src/dropdown-menu/DropdownMenuLabel.vue
@@ -0,0 +1,15 @@
+<script lang="ts">
+import type { MenuLabelProps } from '../menu';
+
+export interface DropdownMenuLabelProps extends MenuLabelProps {}
+</script>
+
+<script setup lang="ts">
+import { MenuLabel } from '../menu';
+
+const props = defineProps<DropdownMenuLabelProps>();
+</script>
+
+<template>
+  <MenuLabel v-bind="props"><slot /></MenuLabel>
+</template>
diff --git a/vue/primitives/src/dropdown-menu/DropdownMenuPortal.vue b/vue/primitives/src/dropdown-menu/DropdownMenuPortal.vue
new file mode 100644
index 0000000..7506f63
--- /dev/null
+++ b/vue/primitives/src/dropdown-menu/DropdownMenuPortal.vue
@@ -0,0 +1,15 @@
+<script lang="ts">
+import type { MenuPortalProps } from '../menu';
+
+export interface DropdownMenuPortalProps extends MenuPortalProps {}
+</script>
+
+<script setup lang="ts">
+import { MenuPortal } from '../menu';
+
+const props = defineProps<DropdownMenuPortalProps>();
+</script>
+
+<template>
+  <MenuPortal v-bind="props"><slot /></MenuPortal>
+</template>
diff --git a/vue/primitives/src/dropdown-menu/DropdownMenuRadioGroup.vue b/vue/primitives/src/dropdown-menu/DropdownMenuRadioGroup.vue
new file mode 100644
index 0000000..63a431e
--- /dev/null
+++ b/vue/primitives/src/dropdown-menu/DropdownMenuRadioGroup.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { MenuRadioGroupEmits, MenuRadioGroupProps } from '../menu';
+
+export interface DropdownMenuRadioGroupProps extends MenuRadioGroupProps {}
+export type DropdownMenuRadioGroupEmits = MenuRadioGroupEmits;
+</script>
+
+<script setup lang="ts">
+import { MenuRadioGroup } from '../menu';
+
+const props = defineProps<DropdownMenuRadioGroupProps>();
+const emit = defineEmits<DropdownMenuRadioGroupEmits>();
+</script>
+
+<template>
+  <MenuRadioGroup v-bind="props" @update:model-value="emit('update:modelValue', $event)"><slot /></MenuRadioGroup>
+</template>
diff --git a/vue/primitives/src/dropdown-menu/DropdownMenuRadioItem.vue b/vue/primitives/src/dropdown-menu/DropdownMenuRadioItem.vue
new file mode 100644
index 0000000..1c98568
--- /dev/null
+++ b/vue/primitives/src/dropdown-menu/DropdownMenuRadioItem.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { MenuRadioItemEmits, MenuRadioItemProps } from '../menu';
+
+export interface DropdownMenuRadioItemProps extends MenuRadioItemProps {}
+export type DropdownMenuRadioItemEmits = MenuRadioItemEmits;
+</script>
+
+<script setup lang="ts">
+import { MenuRadioItem } from '../menu';
+
+const props = defineProps<DropdownMenuRadioItemProps>();
+const emit = defineEmits<DropdownMenuRadioItemEmits>();
+</script>
+
+<template>
+  <MenuRadioItem v-bind="props" @select="emit('select', $event)"><slot /></MenuRadioItem>
+</template>
diff --git a/vue/primitives/src/dropdown-menu/DropdownMenuRoot.vue b/vue/primitives/src/dropdown-menu/DropdownMenuRoot.vue
new file mode 100644
index 0000000..e5d7686
--- /dev/null
+++ b/vue/primitives/src/dropdown-menu/DropdownMenuRoot.vue
@@ -0,0 +1,64 @@
+<script lang="ts">
+import type { Direction } from '../config-provider';
+
+export interface DropdownMenuRootProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  dir?: Direction;
+  modal?: boolean;
+}
+export interface DropdownMenuRootEmits {
+  'update:open': [value: boolean];
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, shallowRef } from 'vue';
+
+import { useId } from '../config-provider';
+import { MenuRoot } from '../menu';
+import { provideDropdownMenuRootContext } from './context';
+
+const {
+  open: openProp,
+  defaultOpen = false,
+  dir,
+  modal = true,
+} = defineProps<DropdownMenuRootProps>();
+
+const emit = defineEmits<DropdownMenuRootEmits>();
+defineSlots<{ default?: (props: { open: boolean }) => unknown }>();
+
+const local = ref(defaultOpen);
+const open = computed({
+  get: () => openProp !== undefined ? openProp : local.value,
+  set: (v) => {
+    local.value = v;
+    emit('update:open', v);
+  },
+});
+
+const triggerRef = shallowRef<HTMLElement | null>(null);
+const triggerId = useId(undefined, 'dropdown-trigger');
+const contentId = useId(undefined, 'dropdown-content');
+
+provideDropdownMenuRootContext({
+  triggerId,
+  contentId,
+  triggerRef,
+  onTriggerChange: (el) => {
+    triggerRef.value = el;
+  },
+});
+</script>
+
+<template>
+  <MenuRoot
+    :open="open"
+    :dir="dir"
+    :modal="modal"
+    @update:open="open = $event"
+  >
+    <slot :open="open" />
+  </MenuRoot>
+</template>
diff --git a/vue/primitives/src/dropdown-menu/DropdownMenuSeparator.vue b/vue/primitives/src/dropdown-menu/DropdownMenuSeparator.vue
new file mode 100644
index 0000000..4930a23
--- /dev/null
+++ b/vue/primitives/src/dropdown-menu/DropdownMenuSeparator.vue
@@ -0,0 +1,15 @@
+<script lang="ts">
+import type { MenuSeparatorProps } from '../menu';
+
+export interface DropdownMenuSeparatorProps extends MenuSeparatorProps {}
+</script>
+
+<script setup lang="ts">
+import { MenuSeparator } from '../menu';
+
+const props = defineProps<DropdownMenuSeparatorProps>();
+</script>
+
+<template>
+  <MenuSeparator v-bind="props"><slot /></MenuSeparator>
+</template>
diff --git a/vue/primitives/src/dropdown-menu/DropdownMenuSub.vue b/vue/primitives/src/dropdown-menu/DropdownMenuSub.vue
new file mode 100644
index 0000000..62648f6
--- /dev/null
+++ b/vue/primitives/src/dropdown-menu/DropdownMenuSub.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { MenuSubEmits, MenuSubProps } from '../menu';
+
+export interface DropdownMenuSubProps extends MenuSubProps {}
+export type DropdownMenuSubEmits = MenuSubEmits;
+</script>
+
+<script setup lang="ts">
+import { MenuSub } from '../menu';
+
+const props = defineProps<DropdownMenuSubProps>();
+const emit = defineEmits<DropdownMenuSubEmits>();
+</script>
+
+<template>
+  <MenuSub v-bind="props" @update:open="emit('update:open', $event)"><slot /></MenuSub>
+</template>
diff --git a/vue/primitives/src/dropdown-menu/DropdownMenuSubContent.vue b/vue/primitives/src/dropdown-menu/DropdownMenuSubContent.vue
new file mode 100644
index 0000000..891d270
--- /dev/null
+++ b/vue/primitives/src/dropdown-menu/DropdownMenuSubContent.vue
@@ -0,0 +1,27 @@
+<script lang="ts">
+import type { MenuSubContentEmits, MenuSubContentProps } from '../menu';
+
+export interface DropdownMenuSubContentProps extends MenuSubContentProps {}
+export type DropdownMenuSubContentEmits = MenuSubContentEmits;
+</script>
+
+<script setup lang="ts">
+import { MenuSubContent } from '../menu';
+
+const props = defineProps<DropdownMenuSubContentProps>();
+const emit = defineEmits<DropdownMenuSubContentEmits>();
+</script>
+
+<template>
+  <MenuSubContent
+    v-bind="props"
+    @close-auto-focus="emit('closeAutoFocus', $event)"
+    @escape-key-down="emit('escapeKeyDown', $event)"
+    @pointer-down-outside="emit('pointerDownOutside', $event)"
+    @focus-outside="emit('focusOutside', $event)"
+    @interact-outside="emit('interactOutside', $event)"
+    @dismiss="emit('dismiss')"
+    @entry-focus="emit('entryFocus', $event)"
+    @open-auto-focus="emit('openAutoFocus', $event)"
+  ><slot /></MenuSubContent>
+</template>
diff --git a/vue/primitives/src/dropdown-menu/DropdownMenuSubTrigger.vue b/vue/primitives/src/dropdown-menu/DropdownMenuSubTrigger.vue
new file mode 100644
index 0000000..ae0e888
--- /dev/null
+++ b/vue/primitives/src/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -0,0 +1,15 @@
+<script lang="ts">
+import type { MenuSubTriggerProps } from '../menu';
+
+export interface DropdownMenuSubTriggerProps extends MenuSubTriggerProps {}
+</script>
+
+<script setup lang="ts">
+import { MenuSubTrigger } from '../menu';
+
+const props = defineProps<DropdownMenuSubTriggerProps>();
+</script>
+
+<template>
+  <MenuSubTrigger v-bind="props"><slot /></MenuSubTrigger>
+</template>
diff --git a/vue/primitives/src/dropdown-menu/DropdownMenuTrigger.vue b/vue/primitives/src/dropdown-menu/DropdownMenuTrigger.vue
new file mode 100644
index 0000000..ea50ba9
--- /dev/null
+++ b/vue/primitives/src/dropdown-menu/DropdownMenuTrigger.vue
@@ -0,0 +1,66 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface DropdownMenuTriggerProps extends PrimitiveProps {
+  disabled?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { MenuAnchor, useMenuContext } from '../menu';
+import { Primitive } from '../primitive';
+import { useDropdownMenuRootContext } from './context';
+
+const { disabled = false, as = 'button' } = defineProps<DropdownMenuTriggerProps>();
+
+const menuCtx = useMenuContext();
+const ddCtx = useDropdownMenuRootContext();
+const { forwardRef, currentElement } = useForwardExpose();
+
+onMounted(() => {
+  ddCtx.onTriggerChange(currentElement.value ?? null);
+});
+onUnmounted(() => {
+  ddCtx.onTriggerChange(null);
+});
+
+function handlePointerDown(event: PointerEvent) {
+  if (disabled) return;
+  if (event.button !== 0 || event.ctrlKey) return;
+  if (!menuCtx.open.value) {
+    menuCtx.onOpenChange(true);
+    event.preventDefault();
+  }
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+  if (disabled) return;
+  if (['Enter', ' ', 'ArrowDown', 'ArrowUp'].includes(event.key)) {
+    event.preventDefault();
+    menuCtx.onOpenChange(true);
+  }
+}
+</script>
+
+<template>
+  <MenuAnchor>
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      :id="ddCtx.triggerId.value"
+      aria-haspopup="menu"
+      :aria-expanded="menuCtx.open.value"
+      :aria-controls="ddCtx.contentId.value"
+      :data-state="menuCtx.open.value ? 'open' : 'closed'"
+      :data-disabled="disabled ? '' : undefined"
+      :disabled="as === 'button' ? disabled : undefined"
+      @pointerdown="handlePointerDown"
+      @keydown="handleKeyDown"
+    >
+      <slot />
+    </Primitive>
+  </MenuAnchor>
+</template>
diff --git a/vue/primitives/src/dropdown-menu/context.ts b/vue/primitives/src/dropdown-menu/context.ts
new file mode 100644
index 0000000..b8304ac
--- /dev/null
+++ b/vue/primitives/src/dropdown-menu/context.ts
@@ -0,0 +1,15 @@
+import type { ComputedRef, ShallowRef } from 'vue';
+
+import { useContextFactory } from '@robonen/vue';
+
+export interface DropdownMenuRootContext {
+  triggerId: ComputedRef<string>;
+  triggerRef: ShallowRef<HTMLElement | null>;
+  contentId: ComputedRef<string>;
+  onTriggerChange: (el: HTMLElement | null) => void;
+}
+
+export const {
+  inject: useDropdownMenuRootContext,
+  provide: provideDropdownMenuRootContext,
+} = useContextFactory<DropdownMenuRootContext>('DropdownMenuRootContext');
diff --git a/vue/primitives/src/dropdown-menu/index.ts b/vue/primitives/src/dropdown-menu/index.ts
new file mode 100644
index 0000000..2b9989a
--- /dev/null
+++ b/vue/primitives/src/dropdown-menu/index.ts
@@ -0,0 +1,17 @@
+export { useDropdownMenuRootContext } from './context';
+export { default as DropdownMenuArrow, type DropdownMenuArrowProps } from './DropdownMenuArrow.vue';
+export { default as DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemEmits, type DropdownMenuCheckboxItemProps } from './DropdownMenuCheckboxItem.vue';
+export { default as DropdownMenuContent, type DropdownMenuContentEmits, type DropdownMenuContentProps } from './DropdownMenuContent.vue';
+export { default as DropdownMenuGroup, type DropdownMenuGroupProps } from './DropdownMenuGroup.vue';
+export { default as DropdownMenuItem, type DropdownMenuItemEmits, type DropdownMenuItemProps } from './DropdownMenuItem.vue';
+export { default as DropdownMenuItemIndicator, type DropdownMenuItemIndicatorProps } from './DropdownMenuItemIndicator.vue';
+export { default as DropdownMenuLabel, type DropdownMenuLabelProps } from './DropdownMenuLabel.vue';
+export { default as DropdownMenuPortal, type DropdownMenuPortalProps } from './DropdownMenuPortal.vue';
+export { default as DropdownMenuRadioGroup, type DropdownMenuRadioGroupEmits, type DropdownMenuRadioGroupProps } from './DropdownMenuRadioGroup.vue';
+export { default as DropdownMenuRadioItem, type DropdownMenuRadioItemEmits, type DropdownMenuRadioItemProps } from './DropdownMenuRadioItem.vue';
+export { default as DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps } from './DropdownMenuRoot.vue';
+export { default as DropdownMenuSeparator, type DropdownMenuSeparatorProps } from './DropdownMenuSeparator.vue';
+export { default as DropdownMenuSub, type DropdownMenuSubEmits, type DropdownMenuSubProps } from './DropdownMenuSub.vue';
+export { default as DropdownMenuSubContent, type DropdownMenuSubContentEmits, type DropdownMenuSubContentProps } from './DropdownMenuSubContent.vue';
+export { default as DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps } from './DropdownMenuSubTrigger.vue';
+export { default as DropdownMenuTrigger, type DropdownMenuTriggerProps } from './DropdownMenuTrigger.vue';
diff --git a/vue/primitives/src/editable/EditableArea.vue b/vue/primitives/src/editable/EditableArea.vue
new file mode 100644
index 0000000..76f5b44
--- /dev/null
+++ b/vue/primitives/src/editable/EditableArea.vue
@@ -0,0 +1,30 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface EditableAreaProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useEditableContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'div' } = defineProps<EditableAreaProps>();
+
+const ctx = useEditableContext();
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :data-state="ctx.isEditing.value ? 'edit' : 'preview'"
+    :data-empty="ctx.isEmpty.value ? '' : undefined"
+    :data-disabled="ctx.disabled.value ? '' : undefined"
+    :data-readonly="ctx.readonly.value ? '' : undefined"
+    :style="ctx.autoResize.value ? { display: 'inline-grid' } : undefined"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/editable/EditableCancelTrigger.vue b/vue/primitives/src/editable/EditableCancelTrigger.vue
new file mode 100644
index 0000000..ccd5672
--- /dev/null
+++ b/vue/primitives/src/editable/EditableCancelTrigger.vue
@@ -0,0 +1,31 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface EditableCancelTriggerProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useEditableContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'button' } = defineProps<EditableCancelTriggerProps>();
+
+const ctx = useEditableContext();
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :type="as === 'button' ? 'button' : undefined"
+    aria-label="cancel"
+    :disabled="ctx.disabled.value || undefined"
+    :data-disabled="ctx.disabled.value ? '' : undefined"
+    :hidden="ctx.isEditing.value ? undefined : ''"
+    @click="ctx.cancel"
+  >
+    <slot>Cancel</slot>
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/editable/EditableEditTrigger.vue b/vue/primitives/src/editable/EditableEditTrigger.vue
new file mode 100644
index 0000000..d43f4cb
--- /dev/null
+++ b/vue/primitives/src/editable/EditableEditTrigger.vue
@@ -0,0 +1,31 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface EditableEditTriggerProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useEditableContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'button' } = defineProps<EditableEditTriggerProps>();
+
+const ctx = useEditableContext();
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :type="as === 'button' ? 'button' : undefined"
+    aria-label="edit"
+    :disabled="ctx.disabled.value || undefined"
+    :data-disabled="ctx.disabled.value ? '' : undefined"
+    :hidden="ctx.isEditing.value ? '' : undefined"
+    @click="ctx.edit"
+  >
+    <slot>Edit</slot>
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/editable/EditableInput.vue b/vue/primitives/src/editable/EditableInput.vue
new file mode 100644
index 0000000..3046607
--- /dev/null
+++ b/vue/primitives/src/editable/EditableInput.vue
@@ -0,0 +1,85 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface EditableInputProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { nextTick, onMounted, watch } from 'vue';
+import { Primitive } from '../primitive';
+import { useEditableContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'input' } = defineProps<EditableInputProps>();
+
+const ctx = useEditableContext();
+const { forwardRef, currentElement } = useForwardExpose();
+
+function syncRef(): void {
+  const el = currentElement.value as HTMLInputElement | undefined;
+  ctx.inputRef.value = el;
+}
+
+function focusAndSelect(): void {
+  const el = ctx.inputRef.value;
+  if (!el) return;
+  el.focus({ preventScroll: true });
+  if (ctx.selectOnFocus.value) el.select();
+}
+
+onMounted(() => {
+  syncRef();
+  if (ctx.startWithEditMode.value) focusAndSelect();
+});
+
+watch(ctx.isEditing, (editing) => {
+  if (!editing) return;
+  nextTick(() => {
+    syncRef();
+    focusAndSelect();
+  });
+});
+
+function onInput(event: Event): void {
+  ctx.inputValue.value = (event.target as HTMLInputElement).value;
+}
+
+function onKeyDown(event: KeyboardEvent): void {
+  if (event.key === 'Escape') {
+    event.preventDefault();
+    ctx.cancel();
+    return;
+  }
+  if (event.key !== 'Enter' || event.shiftKey || event.metaKey || event.isComposing) return;
+  const mode = ctx.submitMode.value;
+  if (mode === 'enter' || mode === 'both') {
+    event.preventDefault();
+    ctx.submit();
+  }
+}
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :value="ctx.inputValue.value"
+    :placeholder="ctx.placeholder.value.edit"
+    :disabled="ctx.disabled.value"
+    :readonly="ctx.readonly.value"
+    :maxlength="ctx.maxLength.value"
+    :data-disabled="ctx.disabled.value ? '' : undefined"
+    :data-readonly="ctx.readonly.value ? '' : undefined"
+    :hidden="ctx.autoResize.value ? undefined : !ctx.isEditing.value"
+    :style="ctx.autoResize.value ? {
+      all: 'unset',
+      gridArea: '1 / 1 / auto / auto',
+      visibility: !ctx.isEditing.value ? 'hidden' : undefined,
+    } : undefined"
+    aria-label="editable input"
+    @input="onInput"
+    @keydown="onKeyDown"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/editable/EditablePreview.vue b/vue/primitives/src/editable/EditablePreview.vue
new file mode 100644
index 0000000..7eb7708
--- /dev/null
+++ b/vue/primitives/src/editable/EditablePreview.vue
@@ -0,0 +1,53 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface EditablePreviewProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { computed } from 'vue';
+import { useEditableContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'span' } = defineProps<EditablePreviewProps>();
+
+const ctx = useEditableContext();
+const { forwardRef } = useForwardExpose();
+
+const text = computed(() => ctx.modelValue.value || ctx.placeholder.value.preview);
+const showPlaceholder = computed(() => ctx.isEmpty.value);
+
+function onFocus(): void {
+  if (ctx.activationMode.value === 'focus') ctx.edit();
+}
+
+function onDoubleClick(): void {
+  if (ctx.activationMode.value === 'dblclick') ctx.edit();
+}
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    tabindex="0"
+    :hidden="ctx.autoResize.value ? undefined : ctx.isEditing.value"
+    :data-placeholder-shown="showPlaceholder ? '' : undefined"
+    :data-state="ctx.isEditing.value ? 'edit' : 'preview'"
+    :data-disabled="ctx.disabled.value ? '' : undefined"
+    :data-readonly="ctx.readonly.value ? '' : undefined"
+    :style="ctx.autoResize.value ? {
+      whiteSpace: 'pre',
+      userSelect: 'none',
+      gridArea: '1 / 1 / auto / auto',
+      visibility: ctx.isEditing.value ? 'hidden' : undefined,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+    } : undefined"
+    @focusin="onFocus"
+    @dblclick="onDoubleClick"
+  >
+    <slot>{{ text }}</slot>
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/editable/EditableRoot.vue b/vue/primitives/src/editable/EditableRoot.vue
new file mode 100644
index 0000000..2568059
--- /dev/null
+++ b/vue/primitives/src/editable/EditableRoot.vue
@@ -0,0 +1,164 @@
+<script lang="ts">
+import type { EditableActivationMode, EditablePlaceholder, EditableSubmitMode } from './context';
+import type { PrimitiveProps } from '../primitive';
+
+export interface EditableRootProps extends PrimitiveProps {
+  /** Controlled value. Use `v-model`. */
+  modelValue?: string;
+  /** Uncontrolled initial value. @default '' */
+  defaultValue?: string;
+  /** Placeholder for edit / preview. A single string applies to both. */
+  placeholder?: string | EditablePlaceholder;
+  /** When the preview should switch to edit mode. @default 'focus' */
+  activationMode?: EditableActivationMode;
+  /** How edits are committed. @default 'blur' */
+  submitMode?: EditableSubmitMode;
+  /** Mount in edit mode. */
+  startWithEditMode?: boolean;
+  /** Select the input content on focus. */
+  selectOnFocus?: boolean;
+  /** Grid-based auto resize mode — preview and input share a grid cell. */
+  autoResize?: boolean;
+  /** Max input length. */
+  maxLength?: number;
+  /** Disabled state. */
+  disabled?: boolean;
+  /** Read-only state. */
+  readonly?: boolean;
+}
+
+export interface EditableRootEmits {
+  'update:modelValue': [value: string];
+  'update:state': [state: 'edit' | 'submit' | 'cancel'];
+  submit: [value: string];
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, shallowRef, toRef, watch } from 'vue';
+import { Primitive } from '../primitive';
+import { provideEditableContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+defineOptions({ inheritAttrs: false });
+
+const {
+  as = 'div',
+  modelValue,
+  defaultValue = '',
+  placeholder = 'Enter text…',
+  activationMode = 'focus',
+  submitMode = 'blur',
+  startWithEditMode = false,
+  selectOnFocus = false,
+  autoResize = false,
+  maxLength,
+  disabled = false,
+  readonly = false,
+} = defineProps<EditableRootProps>();
+
+const emit = defineEmits<EditableRootEmits>();
+
+const { forwardRef, currentElement } = useForwardExpose();
+
+const localValue = ref<string>(modelValue ?? defaultValue);
+
+watch(() => modelValue, (v) => {
+  if (v === undefined || v === localValue.value) return;
+  localValue.value = v;
+});
+
+const inputValue = ref<string>(localValue.value);
+const isEditing = ref<boolean>(startWithEditMode);
+const inputRef = shallowRef<HTMLInputElement | undefined>();
+
+// Keep the draft in sync when modelValue changes from outside.
+watch(localValue, (v) => {
+  inputValue.value = v;
+});
+
+const resolvedPlaceholder = computed<EditablePlaceholder>(() =>
+  typeof placeholder === 'string'
+    ? { edit: placeholder, preview: placeholder }
+    : placeholder,
+);
+
+const isEmpty = computed(() => localValue.value === '');
+
+function commitModel(v: string): void {
+  if (v === localValue.value) return;
+  localValue.value = v;
+  emit('update:modelValue', v);
+}
+
+function edit(): void {
+  if (disabled || readonly) return;
+  inputValue.value = localValue.value;
+  isEditing.value = true;
+  emit('update:state', 'edit');
+}
+
+function cancel(): void {
+  isEditing.value = false;
+  inputValue.value = localValue.value;
+  emit('update:state', 'cancel');
+}
+
+function submit(): void {
+  commitModel(inputValue.value);
+  isEditing.value = false;
+  emit('update:state', 'submit');
+  emit('submit', inputValue.value);
+}
+
+function onFocusOutCapture(event: FocusEvent): void {
+  if (!isEditing.value) return;
+  const root = currentElement.value;
+  const next = event.relatedTarget as Node | null;
+  if (root && next && root.contains(next)) return;
+  if (submitMode === 'blur' || submitMode === 'both') submit();
+  else cancel();
+}
+
+provideEditableContext({
+  modelValue: localValue,
+  inputValue,
+  isEditing,
+  placeholder: resolvedPlaceholder,
+  isEmpty,
+  disabled: toRef(() => disabled),
+  readonly: toRef(() => readonly),
+  maxLength: toRef(() => maxLength),
+  activationMode: toRef(() => activationMode),
+  submitMode: toRef(() => submitMode),
+  selectOnFocus: toRef(() => selectOnFocus),
+  autoResize: toRef(() => autoResize),
+  startWithEditMode: toRef(() => startWithEditMode),
+  inputRef,
+  edit,
+  cancel,
+  submit,
+});
+</script>
+
+<template>
+  <Primitive
+    v-bind="$attrs"
+    :ref="forwardRef"
+    :as="as"
+    :data-state="isEditing ? 'edit' : 'preview'"
+    :data-empty="isEmpty ? '' : undefined"
+    :data-disabled="disabled ? '' : undefined"
+    :data-readonly="readonly ? '' : undefined"
+    @focusout.capture="onFocusOutCapture"
+  >
+    <slot
+      :model-value="localValue"
+      :is-editing="isEditing"
+      :is-empty="isEmpty"
+      :edit="edit"
+      :cancel="cancel"
+      :submit="submit"
+    />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/editable/EditableSubmitTrigger.vue b/vue/primitives/src/editable/EditableSubmitTrigger.vue
new file mode 100644
index 0000000..266cdb6
--- /dev/null
+++ b/vue/primitives/src/editable/EditableSubmitTrigger.vue
@@ -0,0 +1,31 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface EditableSubmitTriggerProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useEditableContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'button' } = defineProps<EditableSubmitTriggerProps>();
+
+const ctx = useEditableContext();
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :type="as === 'button' ? 'button' : undefined"
+    aria-label="submit"
+    :disabled="ctx.disabled.value || undefined"
+    :data-disabled="ctx.disabled.value ? '' : undefined"
+    :hidden="ctx.isEditing.value ? undefined : ''"
+    @click="ctx.submit"
+  >
+    <slot>Submit</slot>
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/editable/__test__/Editable.test.ts b/vue/primitives/src/editable/__test__/Editable.test.ts
new file mode 100644
index 0000000..3d1c819
--- /dev/null
+++ b/vue/primitives/src/editable/__test__/Editable.test.ts
@@ -0,0 +1,172 @@
+import {
+  EditableArea,
+  EditableCancelTrigger,
+  EditableEditTrigger,
+  EditableInput,
+  EditablePreview,
+  EditableRoot,
+  EditableSubmitTrigger,
+} from '../index';
+import { defineComponent, h, nextTick, ref } from 'vue';
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+function createEditable(rootProps: Record<string, unknown> = {}) {
+  return mount(
+    defineComponent({
+      setup() {
+        return () => h(
+          EditableRoot,
+          rootProps,
+          {
+            default: () => h(EditableArea, null, {
+              default: () => [
+                h(EditablePreview),
+                h(EditableInput),
+                h(EditableEditTrigger),
+                h(EditableSubmitTrigger),
+                h(EditableCancelTrigger),
+              ],
+            }),
+          },
+        );
+      },
+    }),
+    { attachTo: document.body },
+  );
+}
+
+function press(el: Element, key: string) {
+  el.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
+}
+
+describe('Editable', () => {
+  it('renders preview with default placeholder when empty', () => {
+    const w = createEditable({ placeholder: 'Click to edit' });
+    const preview = w.find('span');
+    expect(preview.text()).toBe('Click to edit');
+    expect(preview.attributes('data-placeholder-shown')).toBe('');
+    w.unmount();
+  });
+
+  it('renders model value in preview', () => {
+    const w = createEditable({ modelValue: 'Hello' });
+    expect(w.find('span').text()).toBe('Hello');
+    w.unmount();
+  });
+
+  it('focus activation enters edit mode', async () => {
+    const w = createEditable({ defaultValue: 'X', activationMode: 'focus' });
+    await w.find('span').trigger('focusin');
+    await nextTick();
+    const input = w.find('input').element as HTMLInputElement;
+    expect(input.hidden).toBe(false);
+    expect((w.find('span').element as HTMLElement).hidden).toBe(true);
+    w.unmount();
+  });
+
+  it('dblclick activation enters edit mode only on dblclick', async () => {
+    const w = createEditable({ activationMode: 'dblclick' });
+    await w.find('span').trigger('focusin');
+    await nextTick();
+    expect((w.find('input').element as HTMLInputElement).hidden).toBe(true);
+    await w.find('span').trigger('dblclick');
+    await nextTick();
+    expect((w.find('input').element as HTMLInputElement).hidden).toBe(false);
+    w.unmount();
+  });
+
+  it('edit trigger switches to edit mode', async () => {
+    const w = createEditable({ activationMode: 'none' });
+    const buttons = w.findAll('button');
+    const editBtn = buttons.find(b => b.attributes('aria-label') === 'edit')!;
+    await editBtn.trigger('click');
+    await nextTick();
+    expect((w.find('input').element as HTMLInputElement).hidden).toBe(false);
+    w.unmount();
+  });
+
+  it('Enter submits when submitMode includes enter', async () => {
+    const value = ref('initial');
+    const w = mount(
+      defineComponent({
+        setup() {
+          return () => h(
+            EditableRoot,
+            {
+              modelValue: value.value,
+              submitMode: 'enter',
+              startWithEditMode: true,
+              'onUpdate:modelValue': (v: string) => (value.value = v),
+            },
+            {
+              default: () => h(EditableArea, null, {
+                default: () => [h(EditablePreview), h(EditableInput)],
+              }),
+            },
+          );
+        },
+      }),
+      { attachTo: document.body },
+    );
+    await nextTick();
+    const input = w.find('input');
+    (input.element as HTMLInputElement).value = 'changed';
+    await input.trigger('input');
+    press(input.element, 'Enter');
+    await nextTick();
+    expect(value.value).toBe('changed');
+    w.unmount();
+  });
+
+  it('Escape cancels and restores model value', async () => {
+    const w = createEditable({ defaultValue: 'orig', submitMode: 'enter' });
+    const editBtn = w.findAll('button').find(b => b.attributes('aria-label') === 'edit')!;
+    await editBtn.trigger('click');
+    await nextTick();
+    const input = w.find('input');
+    (input.element as HTMLInputElement).value = 'new';
+    await input.trigger('input');
+    press(input.element, 'Escape');
+    await nextTick();
+    expect(w.find('span').text()).toBe('orig');
+    w.unmount();
+  });
+
+  it('submit trigger emits submit', async () => {
+    const w = createEditable({ defaultValue: 'v1', startWithEditMode: true });
+    await nextTick();
+    const input = w.find('input');
+    (input.element as HTMLInputElement).value = 'v2';
+    await input.trigger('input');
+    const submitBtn = w.findAll('button').find(b => b.attributes('aria-label') === 'submit')!;
+    await submitBtn.trigger('click');
+    await nextTick();
+    const root = w.findComponent(EditableRoot);
+    expect(root.emitted('update:modelValue')?.at(-1)).toEqual(['v2']);
+    expect(root.emitted('submit')?.at(-1)).toEqual(['v2']);
+    w.unmount();
+  });
+
+  it('cancel trigger reverts draft', async () => {
+    const w = createEditable({ defaultValue: 'v1', startWithEditMode: true });
+    await nextTick();
+    const input = w.find('input');
+    (input.element as HTMLInputElement).value = 'draft';
+    await input.trigger('input');
+    const cancelBtn = w.findAll('button').find(b => b.attributes('aria-label') === 'cancel')!;
+    await cancelBtn.trigger('click');
+    await nextTick();
+    expect(w.find('span').text()).toBe('v1');
+    expect(w.findComponent(EditableRoot).emitted('update:modelValue')).toBeUndefined();
+    w.unmount();
+  });
+
+  it('disabled blocks edit activation', async () => {
+    const w = createEditable({ defaultValue: 'v', disabled: true });
+    await w.find('span').trigger('focusin');
+    await nextTick();
+    expect((w.find('input').element as HTMLInputElement).hidden).toBe(true);
+    w.unmount();
+  });
+});
diff --git a/vue/primitives/src/editable/context.ts b/vue/primitives/src/editable/context.ts
new file mode 100644
index 0000000..e3ad163
--- /dev/null
+++ b/vue/primitives/src/editable/context.ts
@@ -0,0 +1,44 @@
+import type { Ref, ShallowRef } from 'vue';
+import { useContextFactory } from '@robonen/vue';
+
+export type EditableActivationMode = 'focus' | 'dblclick' | 'none';
+export type EditableSubmitMode = 'blur' | 'enter' | 'none' | 'both';
+
+export interface EditablePlaceholder {
+  edit: string;
+  preview: string;
+}
+
+export interface EditableContext {
+  /** Current committed value (mirrors v-model). */
+  modelValue: Ref<string>;
+  /** Draft value bound to the input while editing. */
+  inputValue: Ref<string>;
+  /** Whether the component is in edit mode. */
+  isEditing: Ref<boolean>;
+  /** Resolved placeholder per mode. */
+  placeholder: Ref<EditablePlaceholder>;
+  /** Whether `modelValue` is empty. */
+  isEmpty: Ref<boolean>;
+
+  disabled: Ref<boolean>;
+  readonly: Ref<boolean>;
+  maxLength: Ref<number | undefined>;
+  activationMode: Ref<EditableActivationMode>;
+  submitMode: Ref<EditableSubmitMode>;
+  selectOnFocus: Ref<boolean>;
+  autoResize: Ref<boolean>;
+  startWithEditMode: Ref<boolean>;
+
+  /** Reactive ref to the `<EditableInput>` element, used for focus/select. */
+  inputRef: ShallowRef<HTMLInputElement | undefined>;
+
+  edit: () => void;
+  cancel: () => void;
+  submit: () => void;
+}
+
+export const {
+  inject: useEditableContext,
+  provide: provideEditableContext,
+} = useContextFactory<EditableContext>('editable');
diff --git a/vue/primitives/src/editable/index.ts b/vue/primitives/src/editable/index.ts
new file mode 100644
index 0000000..48005ab
--- /dev/null
+++ b/vue/primitives/src/editable/index.ts
@@ -0,0 +1,24 @@
+export { default as EditableRoot } from './EditableRoot.vue';
+export { default as EditableArea } from './EditableArea.vue';
+export { default as EditablePreview } from './EditablePreview.vue';
+export { default as EditableInput } from './EditableInput.vue';
+export { default as EditableEditTrigger } from './EditableEditTrigger.vue';
+export { default as EditableSubmitTrigger } from './EditableSubmitTrigger.vue';
+export { default as EditableCancelTrigger } from './EditableCancelTrigger.vue';
+
+export {
+  provideEditableContext,
+  useEditableContext,
+  type EditableContext,
+  type EditableActivationMode,
+  type EditableSubmitMode,
+  type EditablePlaceholder,
+} from './context';
+
+export type { EditableRootProps, EditableRootEmits } from './EditableRoot.vue';
+export type { EditableAreaProps } from './EditableArea.vue';
+export type { EditablePreviewProps } from './EditablePreview.vue';
+export type { EditableInputProps } from './EditableInput.vue';
+export type { EditableEditTriggerProps } from './EditableEditTrigger.vue';
+export type { EditableSubmitTriggerProps } from './EditableSubmitTrigger.vue';
+export type { EditableCancelTriggerProps } from './EditableCancelTrigger.vue';
diff --git a/vue/primitives/src/env.d.ts b/vue/primitives/src/env.d.ts
new file mode 100644
index 0000000..71a152f
--- /dev/null
+++ b/vue/primitives/src/env.d.ts
@@ -0,0 +1,13 @@
+export {};
+
+declare global {
+  const __DEV__: boolean;
+}
+
+declare module 'vue' {
+  type ComponentCustomProps = Record<`data${string}`, unknown>;
+}
+
+declare module 'vue' {
+  type HTMLAttributes = Record<`data-${string}`, unknown>;
+}
diff --git a/vue/primitives/src/focus-scope/FocusScope.vue b/vue/primitives/src/focus-scope/FocusScope.vue
new file mode 100644
index 0000000..cf9bc1b
--- /dev/null
+++ b/vue/primitives/src/focus-scope/FocusScope.vue
@@ -0,0 +1,90 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface FocusScopeEmits {
+  /** Автофокус при монтировании. Можно предотвратить через `event.preventDefault()`. */
+  mountAutoFocus: [event: Event];
+  /** Автофокус при размонтировании. Можно предотвратить через `event.preventDefault()`. */
+  unmountAutoFocus: [event: Event];
+}
+
+export interface FocusScopeProps extends PrimitiveProps {
+  /**
+   * Зациклить Tab/Shift+Tab: с последнего элемента — на первый и наоборот.
+   * @default false
+   */
+  loop?: boolean;
+
+  /**
+   * Удерживать фокус внутри scope — фокус не может покинуть контейнер
+   * через клавиатуру, указатель или программный вызов.
+   * @default false
+   */
+  trapped?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import type { FocusScopeAPI } from './stack';
+import { Primitive } from '../primitive';
+import { focus, getActiveElement, getTabbableEdges } from '@robonen/platform/browsers';
+import { useAutoFocus } from './useAutoFocus';
+import { useFocusTrap } from './useFocusTrap';
+import { useForwardExpose } from '@robonen/vue';
+
+const { loop = false, trapped = false, as } = defineProps<FocusScopeProps>();
+
+const emit = defineEmits<FocusScopeEmits>();
+
+const { forwardRef, currentElement: containerRef } = useForwardExpose();
+
+const focusScope: FocusScopeAPI = {
+  paused: false,
+  pause() { this.paused = true; },
+  resume() { this.paused = false; },
+};
+
+useFocusTrap(containerRef, focusScope, () => trapped);
+useAutoFocus(
+  containerRef,
+  focusScope,
+  ev => emit('mountAutoFocus', ev),
+  ev => emit('unmountAutoFocus', ev),
+);
+
+function handleKeyDown(event: KeyboardEvent) {
+  if (!loop && !trapped) return;
+  if (focusScope.paused) return;
+
+  const isTabKey = event.key === 'Tab' && !event.altKey && !event.ctrlKey && !event.metaKey;
+  const focusedElement = getActiveElement();
+
+  if (!isTabKey || !focusedElement) return;
+
+  const container = event.currentTarget as HTMLElement;
+  const { first, last } = getTabbableEdges(container);
+
+  if (!first || !last) {
+    if (focusedElement === container) event.preventDefault();
+  }
+  else if (!event.shiftKey && focusedElement === last) {
+    event.preventDefault();
+    if (loop) focus(first, { select: true });
+  }
+  else if (event.shiftKey && focusedElement === first) {
+    event.preventDefault();
+    if (loop) focus(last, { select: true });
+  }
+}
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    tabindex="-1"
+    :as="as"
+    @keydown="handleKeyDown"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/focus-scope/__test__/FocusScope.test.ts b/vue/primitives/src/focus-scope/__test__/FocusScope.test.ts
new file mode 100644
index 0000000..ee63c25
--- /dev/null
+++ b/vue/primitives/src/focus-scope/__test__/FocusScope.test.ts
@@ -0,0 +1,589 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { userEvent } from 'vitest/browser';
+import { defineComponent, h, nextTick, ref } from 'vue';
+import { render } from 'vitest-browser-vue';
+import FocusScope from '../FocusScope.vue';
+import { mount } from '@vue/test-utils';
+
+function createFocusScope(props: Record<string, unknown> = {}, slots?: Record<string, () => any>) {
+  return mount(
+    defineComponent({
+      setup() {
+        return () =>
+          h(
+            FocusScope,
+            props,
+            slots ?? {
+              default: () => [
+                h('input', { type: 'text', 'data-testid': 'first' }),
+                h('input', { type: 'text', 'data-testid': 'second' }),
+                h('input', { type: 'text', 'data-testid': 'third' }),
+              ],
+            },
+          );
+      },
+    }),
+    { attachTo: document.body },
+  );
+}
+
+describe('FocusScope', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+    document.body.focus();
+  });
+
+  it('renders slot content inside a div with tabindex="-1"', () => {
+    const wrapper = createFocusScope();
+
+    expect(wrapper.find('[tabindex="-1"]').exists()).toBe(true);
+    expect(wrapper.findAll('input').length).toBe(3);
+
+    wrapper.unmount();
+  });
+
+  it('renders with custom element via as prop', () => {
+    const wrapper = createFocusScope({ as: 'section' });
+
+    expect(wrapper.find('section').exists()).toBe(true);
+    expect(wrapper.find('section').attributes('tabindex')).toBe('-1');
+
+    wrapper.unmount();
+  });
+
+  it('auto-focuses first tabbable element on mount', async () => {
+    const wrapper = createFocusScope();
+    await nextTick();
+    await nextTick();
+
+    const firstInput = wrapper.find('[data-testid="first"]').element as HTMLInputElement;
+    expect(document.activeElement).toBe(firstInput);
+
+    wrapper.unmount();
+  });
+
+  it('emits mountAutoFocus on mount', async () => {
+    const onMountAutoFocus = vi.fn();
+    const wrapper = createFocusScope({ onMountAutoFocus });
+
+    await nextTick();
+    await nextTick();
+
+    expect(onMountAutoFocus).toHaveBeenCalled();
+
+    wrapper.unmount();
+  });
+
+  it('emits unmountAutoFocus on unmount', async () => {
+    const onUnmountAutoFocus = vi.fn();
+    const wrapper = createFocusScope({ onUnmountAutoFocus });
+    await nextTick();
+    await nextTick();
+
+    wrapper.unmount();
+
+    expect(onUnmountAutoFocus).toHaveBeenCalled();
+  });
+
+  it('focuses container when no tabbable elements exist', async () => {
+    const wrapper = createFocusScope({}, {
+      default: () => h('span', 'no focusable elements'),
+    });
+    await nextTick();
+    await nextTick();
+
+    const container = wrapper.find('[tabindex="-1"]').element;
+    expect(document.activeElement).toBe(container);
+
+    wrapper.unmount();
+  });
+});
+
+describe('FocusScope loop', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+    document.body.focus();
+  });
+
+  it('wraps focus from last to first on Tab when loop=true', async () => {
+    const wrapper = createFocusScope({ loop: true });
+    await nextTick();
+    await nextTick();
+
+    const lastInput = wrapper.find('[data-testid="third"]').element as HTMLInputElement;
+    lastInput.focus();
+    await nextTick();
+
+    const container = wrapper.find('[tabindex="-1"]');
+    await container.trigger('keydown', { key: 'Tab' });
+
+    const firstInput = wrapper.find('[data-testid="first"]').element as HTMLInputElement;
+    expect(document.activeElement).toBe(firstInput);
+
+    wrapper.unmount();
+  });
+
+  it('wraps focus from first to last on Shift+Tab when loop=true', async () => {
+    const wrapper = createFocusScope({ loop: true });
+    await nextTick();
+    await nextTick();
+
+    const firstInput = wrapper.find('[data-testid="first"]').element as HTMLInputElement;
+    firstInput.focus();
+    await nextTick();
+
+    const container = wrapper.find('[tabindex="-1"]');
+    await container.trigger('keydown', { key: 'Tab', shiftKey: true });
+
+    const lastInput = wrapper.find('[data-testid="third"]').element as HTMLInputElement;
+    expect(document.activeElement).toBe(lastInput);
+
+    wrapper.unmount();
+  });
+
+  it('does not wrap focus when loop=false', async () => {
+    const wrapper = createFocusScope({ loop: false });
+    await nextTick();
+    await nextTick();
+
+    const lastInput = wrapper.find('[data-testid="third"]').element as HTMLInputElement;
+    lastInput.focus();
+    await nextTick();
+
+    const container = wrapper.find('[tabindex="-1"]');
+    await container.trigger('keydown', { key: 'Tab' });
+
+    // Focus should remain on the last element (no wrapping)
+    expect(document.activeElement).toBe(lastInput);
+
+    wrapper.unmount();
+  });
+
+  it('ignores non-Tab keys', async () => {
+    const wrapper = createFocusScope({ loop: true });
+    await nextTick();
+    await nextTick();
+
+    const lastInput = wrapper.find('[data-testid="third"]').element as HTMLInputElement;
+    lastInput.focus();
+    await nextTick();
+
+    const container = wrapper.find('[tabindex="-1"]');
+    await container.trigger('keydown', { key: 'Enter' });
+
+    expect(document.activeElement).toBe(lastInput);
+
+    wrapper.unmount();
+  });
+
+  it('ignores Tab with modifier keys', async () => {
+    const wrapper = createFocusScope({ loop: true });
+    await nextTick();
+    await nextTick();
+
+    const lastInput = wrapper.find('[data-testid="third"]').element as HTMLInputElement;
+    lastInput.focus();
+    await nextTick();
+
+    const container = wrapper.find('[tabindex="-1"]');
+    await container.trigger('keydown', { key: 'Tab', ctrlKey: true });
+
+    expect(document.activeElement).toBe(lastInput);
+
+    wrapper.unmount();
+  });
+});
+
+describe('FocusScope trapped', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+    document.body.focus();
+  });
+
+  it('returns focus to last focused element when focus leaves', async () => {
+    const wrapper = mount(
+      defineComponent({
+        setup() {
+          return () => [
+            h('button', { id: 'outside' }, 'outside'),
+            h(FocusScope, { trapped: true }, {
+              default: () => [
+                h('input', { type: 'text', 'data-testid': 'inside' }),
+              ],
+            }),
+          ];
+        },
+      }),
+      { attachTo: document.body },
+    );
+
+    await nextTick();
+    await nextTick();
+
+    const insideInput = wrapper.find('[data-testid="inside"]').element as HTMLInputElement;
+    expect(document.activeElement).toBe(insideInput);
+
+    // Simulate focus moving outside
+    const outsideButton = wrapper.find('#outside').element as HTMLButtonElement;
+    outsideButton.focus();
+
+    // The focusin event handler should bring focus back
+    await nextTick();
+    expect(document.activeElement).toBe(insideInput);
+
+    wrapper.unmount();
+  });
+
+  it('activates trap when trapped changes from false to true', async () => {
+    const trapped = ref(false);
+    const wrapper = mount(
+      defineComponent({
+        setup() {
+          return () => [
+            h('button', { id: 'outside' }, 'outside'),
+            h(FocusScope, { trapped: trapped.value }, {
+              default: () => [
+                h('input', { type: 'text', 'data-testid': 'inside' }),
+              ],
+            }),
+          ];
+        },
+      }),
+      { attachTo: document.body },
+    );
+
+    await nextTick();
+    await nextTick();
+
+    // Not trapped yet — focus can leave
+    const outsideButton = wrapper.find('#outside').element as HTMLButtonElement;
+    outsideButton.focus();
+    await nextTick();
+    expect(document.activeElement).toBe(outsideButton);
+
+    // Enable trap
+    trapped.value = true;
+    await nextTick();
+    await nextTick();
+
+    // Focus inside first
+    const insideInput = wrapper.find('[data-testid="inside"]').element as HTMLInputElement;
+    insideInput.focus();
+    await nextTick();
+
+    // Try to leave — should be pulled back
+    outsideButton.focus();
+    await nextTick();
+    expect(document.activeElement).toBe(insideInput);
+
+    wrapper.unmount();
+  });
+
+  it('deactivates trap when trapped changes from true to false', async () => {
+    const trapped = ref(true);
+    const wrapper = mount(
+      defineComponent({
+        setup() {
+          return () => [
+            h('button', { id: 'outside' }, 'outside'),
+            h(FocusScope, { trapped: trapped.value }, {
+              default: () => [
+                h('input', { type: 'text', 'data-testid': 'inside' }),
+              ],
+            }),
+          ];
+        },
+      }),
+      { attachTo: document.body },
+    );
+
+    await nextTick();
+    await nextTick();
+
+    const insideInput = wrapper.find('[data-testid="inside"]').element as HTMLInputElement;
+    expect(document.activeElement).toBe(insideInput);
+
+    // Disable trap
+    trapped.value = false;
+    await nextTick();
+    await nextTick();
+
+    // Focus can now leave
+    const outsideButton = wrapper.find('#outside').element as HTMLButtonElement;
+    outsideButton.focus();
+    await nextTick();
+    expect(document.activeElement).toBe(outsideButton);
+
+    wrapper.unmount();
+  });
+
+  it('refocuses container when focused element is removed from DOM', async () => {
+    const showChild = ref(true);
+    const wrapper = mount(
+      defineComponent({
+        setup() {
+          return () =>
+            h(FocusScope, { trapped: true }, {
+              default: () =>
+                showChild.value
+                  ? [h('input', { type: 'text', 'data-testid': 'removable' })]
+                  : [h('span', 'empty')],
+            });
+        },
+      }),
+      { attachTo: document.body },
+    );
+
+    await nextTick();
+    await nextTick();
+
+    const input = wrapper.find('[data-testid="removable"]').element as HTMLInputElement;
+    expect(document.activeElement).toBe(input);
+
+    // Remove the focused element
+    showChild.value = false;
+    await nextTick();
+    await nextTick();
+
+    // MutationObserver should refocus the container
+    const container = wrapper.find('[tabindex="-1"]').element;
+    await vi.waitFor(() => {
+      expect(document.activeElement).toBe(container);
+    });
+
+    wrapper.unmount();
+  });
+});
+
+describe('FocusScope preventAutoFocus', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+    document.body.focus();
+  });
+
+  it('prevents auto-focus on mount via event.preventDefault()', async () => {
+    const wrapper = createFocusScope({
+      onMountAutoFocus: (e: Event) => e.preventDefault(),
+    });
+    await nextTick();
+    await nextTick();
+
+    const firstInput = wrapper.find('[data-testid="first"]').element;
+    // Focus should not have been moved to the first input
+    expect(document.activeElement).not.toBe(firstInput);
+
+    wrapper.unmount();
+  });
+
+  it('prevents focus restore on unmount via event.preventDefault()', async () => {
+    const wrapper = createFocusScope({
+      onUnmountAutoFocus: (e: Event) => e.preventDefault(),
+    });
+    await nextTick();
+    await nextTick();
+
+    const firstInput = wrapper.find('[data-testid="first"]').element as HTMLInputElement;
+    expect(document.activeElement).toBe(firstInput);
+
+    wrapper.unmount();
+
+    // Focus should NOT have been restored to body
+    expect(document.activeElement).not.toBe(firstInput);
+  });
+});
+
+describe('FocusScope nested stacks', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+    document.body.focus();
+  });
+
+  it('pauses outer scope when inner scope mounts, resumes on inner unmount', async () => {
+    const showInner = ref(false);
+    const wrapper = mount(
+      defineComponent({
+        setup() {
+          return () =>
+            h(FocusScope, { trapped: true }, {
+              default: () => [
+                h('input', { type: 'text', 'data-testid': 'outer-input' }),
+                showInner.value
+                  ? h(FocusScope, { trapped: true }, {
+                      default: () => [
+                        h('input', { type: 'text', 'data-testid': 'inner-input' }),
+                      ],
+                    })
+                  : null,
+              ],
+            });
+        },
+      }),
+      { attachTo: document.body },
+    );
+
+    await nextTick();
+    await nextTick();
+
+    // Outer scope auto-focused
+    const outerInput = wrapper.find('[data-testid="outer-input"]').element as HTMLInputElement;
+    expect(document.activeElement).toBe(outerInput);
+
+    // Mount inner scope
+    showInner.value = true;
+    await nextTick();
+    await nextTick();
+
+    // Inner scope should auto-focus its content
+    const innerInput = wrapper.find('[data-testid="inner-input"]').element as HTMLInputElement;
+    expect(document.activeElement).toBe(innerInput);
+
+    // Unmount inner scope
+    showInner.value = false;
+    await nextTick();
+    await nextTick();
+
+    // Focus should return to outer scope's previously focused element
+    await vi.waitFor(() => {
+      expect(document.activeElement).toBe(outerInput);
+    });
+
+    wrapper.unmount();
+  });
+});
+
+function mountInDom<T>(component: T) {
+  const host = document.createElement('div');
+  document.body.appendChild(host);
+  return render(component, { container: host });
+}
+
+describe('focusScope (browser)', () => {
+  it('autofocuses first tabbable element on mount', async () => {
+    const Wrapper = defineComponent({
+      setup() {
+        const open = ref(false);
+        return { open };
+      },
+      render() {
+        return h('div', [
+          h('button', { id: 'outside', onClick: () => { this.open = true; } }, 'Open'),
+          this.open
+            ? h(FocusScope, { trapped: true }, {
+                default: () => [
+                  h('button', { id: 'inside-1' }, 'Inside 1'),
+                  h('button', { id: 'inside-2' }, 'Inside 2'),
+                ],
+              })
+            : null,
+        ]);
+      },
+    });
+
+    const { container } = mountInDom(Wrapper);
+    const outside = container.querySelector<HTMLButtonElement>('#outside')!;
+    outside.focus();
+    expect(document.activeElement).toBe(outside);
+
+    await userEvent.click(outside);
+    await nextTick();
+    await new Promise((r) => {
+      requestAnimationFrame(() => r(null));
+    });
+
+    const inside1 = container.querySelector<HTMLButtonElement>('#inside-1')!;
+    expect(document.activeElement).toBe(inside1);
+  });
+
+  it('traps Tab within scope (loop)', async () => {
+    const Wrapper = defineComponent({
+      render() {
+        return h(FocusScope, { trapped: true, loop: true }, {
+          default: () => [
+            h('button', { id: 'a' }, 'A'),
+            h('button', { id: 'b' }, 'B'),
+            h('button', { id: 'c' }, 'C'),
+          ],
+        });
+      },
+    });
+
+    const { container } = mountInDom(Wrapper);
+    await new Promise((r) => {
+      requestAnimationFrame(() => requestAnimationFrame(() => r(null)));
+    });
+    await nextTick();
+
+    const a = container.querySelector<HTMLButtonElement>('#a')!;
+    const b = container.querySelector<HTMLButtonElement>('#b')!;
+    const c = container.querySelector<HTMLButtonElement>('#c')!;
+
+    if (document.activeElement !== a) a.focus();
+    expect(document.activeElement).toBe(a);
+    await userEvent.keyboard('{Tab}');
+    expect(document.activeElement).toBe(b);
+    await userEvent.keyboard('{Tab}');
+    expect(document.activeElement).toBe(c);
+    await userEvent.keyboard('{Tab}');
+    expect(document.activeElement).toBe(a);
+    await userEvent.keyboard('{Shift>}{Tab}{/Shift}');
+    expect(document.activeElement).toBe(c);
+  });
+
+  it('returns focus to previously focused element on unmount', async () => {
+    const Wrapper = defineComponent({
+      setup() {
+        const open = ref(false);
+        return { open };
+      },
+      render() {
+        return h('div', [
+          h('button', {
+            id: 'trigger',
+            onClick: () => { this.open = !this.open; },
+          }, 'Toggle'),
+          this.open
+            ? h(FocusScope, { trapped: true }, {
+                default: () => [h('button', { id: 'inside' }, 'Inside')],
+              })
+            : null,
+        ]);
+      },
+    });
+
+    const { container } = mountInDom(Wrapper);
+    const trigger = container.querySelector<HTMLButtonElement>('#trigger')!;
+    trigger.focus();
+    await userEvent.click(trigger);
+    await new Promise((r) => {
+      requestAnimationFrame(() => r(null));
+    });
+
+    expect(document.activeElement?.id).toBe('inside');
+    await userEvent.click(trigger);
+    await new Promise((r) => {
+      requestAnimationFrame(() => r(null));
+    });
+
+    expect(document.activeElement).toBe(trigger);
+  });
+
+  it('honors preventDefault on mountAutoFocus', async () => {
+    const Wrapper = defineComponent({
+      render() {
+        return h(FocusScope, {
+          trapped: true,
+          onMountAutoFocus: (e: Event) => e.preventDefault(),
+        }, {
+          default: () => [h('button', { id: 'x' }, 'X')],
+        });
+      },
+    });
+
+    mountInDom(Wrapper);
+    await new Promise((r) => {
+      requestAnimationFrame(() => r(null));
+    });
+
+    expect(document.activeElement?.tagName).not.toBe('BUTTON');
+  });
+});
diff --git a/vue/primitives/src/focus-scope/__test__/a11y.test.ts b/vue/primitives/src/focus-scope/__test__/a11y.test.ts
new file mode 100644
index 0000000..73b4e90
--- /dev/null
+++ b/vue/primitives/src/focus-scope/__test__/a11y.test.ts
@@ -0,0 +1,67 @@
+import { defineComponent, h, nextTick } from 'vue';
+import { describe, expect, it } from 'vitest';
+import FocusScope from '../FocusScope.vue';
+import axe from 'axe-core';
+import { mount } from '@vue/test-utils';
+
+async function checkA11y(element: Element) {
+  const results = await axe.run(element);
+  return results.violations;
+}
+
+function createFocusScope(props: Record<string, unknown> = {}) {
+  return mount(
+    defineComponent({
+      setup() {
+        return () =>
+          h(
+            FocusScope,
+            props,
+            {
+              default: () => [
+                h('button', { type: 'button' }, 'First'),
+                h('button', { type: 'button' }, 'Second'),
+                h('button', { type: 'button' }, 'Third'),
+              ],
+            },
+          );
+      },
+    }),
+    { attachTo: document.body },
+  );
+}
+
+describe('FocusScope a11y', () => {
+  it('has no axe violations with default props', async () => {
+    const wrapper = createFocusScope();
+    await nextTick();
+    await nextTick();
+
+    const violations = await checkA11y(wrapper.element);
+    expect(violations).toEqual([]);
+
+    wrapper.unmount();
+  });
+
+  it('has no axe violations with loop enabled', async () => {
+    const wrapper = createFocusScope({ loop: true });
+    await nextTick();
+    await nextTick();
+
+    const violations = await checkA11y(wrapper.element);
+    expect(violations).toEqual([]);
+
+    wrapper.unmount();
+  });
+
+  it('has no axe violations with trapped enabled', async () => {
+    const wrapper = createFocusScope({ trapped: true });
+    await nextTick();
+    await nextTick();
+
+    const violations = await checkA11y(wrapper.element);
+    expect(violations).toEqual([]);
+
+    wrapper.unmount();
+  });
+});
diff --git a/vue/primitives/src/focus-scope/index.ts b/vue/primitives/src/focus-scope/index.ts
new file mode 100644
index 0000000..98a19d6
--- /dev/null
+++ b/vue/primitives/src/focus-scope/index.ts
@@ -0,0 +1,3 @@
+export { default as FocusScope } from './FocusScope.vue';
+
+export type { FocusScopeEmits, FocusScopeProps } from './FocusScope.vue';
diff --git a/vue/primitives/src/focus-scope/stack.ts b/vue/primitives/src/focus-scope/stack.ts
new file mode 100644
index 0000000..ce081f6
--- /dev/null
+++ b/vue/primitives/src/focus-scope/stack.ts
@@ -0,0 +1,29 @@
+export interface FocusScopeAPI {
+  paused: boolean;
+  pause: () => void;
+  resume: () => void;
+}
+
+const stack: FocusScopeAPI[] = [];
+
+export function createFocusScopesStack() {
+  return {
+    add(focusScope: FocusScopeAPI) {
+      const current = stack.at(-1);
+      if (focusScope !== current) current?.pause();
+
+      // Remove if already in stack (deduplicate), then push to top
+      const index = stack.indexOf(focusScope);
+      if (index !== -1) stack.splice(index, 1);
+
+      stack.push(focusScope);
+    },
+
+    remove(focusScope: FocusScopeAPI) {
+      const index = stack.indexOf(focusScope);
+      if (index !== -1) stack.splice(index, 1);
+
+      stack.at(-1)?.resume();
+    },
+  };
+}
diff --git a/vue/primitives/src/focus-scope/useAutoFocus.ts b/vue/primitives/src/focus-scope/useAutoFocus.ts
new file mode 100644
index 0000000..780fdb5
--- /dev/null
+++ b/vue/primitives/src/focus-scope/useAutoFocus.ts
@@ -0,0 +1,63 @@
+import {
+  AUTOFOCUS_ON_MOUNT,
+  AUTOFOCUS_ON_UNMOUNT,
+  EVENT_OPTIONS,
+  focus,
+  focusFirst,
+  getActiveElement,
+  getTabbableCandidates,
+} from '@robonen/platform/browsers';
+import type { FocusScopeAPI } from './stack';
+import type { Ref } from 'vue';
+import { createFocusScopesStack } from './stack';
+import { watchPostEffect } from 'vue';
+
+function dispatchCancelableEvent(
+  container: HTMLElement,
+  eventName: string,
+  handler: (ev: Event) => void,
+): CustomEvent {
+  const event = new CustomEvent(eventName, EVENT_OPTIONS);
+  container.addEventListener(eventName, handler);
+  container.dispatchEvent(event);
+  container.removeEventListener(eventName, handler);
+  return event;
+}
+
+export function useAutoFocus(
+  container: Readonly<Ref<HTMLElement | null | undefined>>,
+  focusScope: FocusScopeAPI,
+  onMountAutoFocus: (ev: Event) => void,
+  onUnmountAutoFocus: (ev: Event) => void,
+) {
+  const stack = createFocusScopesStack();
+
+  watchPostEffect((onCleanup) => {
+    const el = container.value;
+    if (!el) return;
+
+    stack.add(focusScope);
+    const previouslyFocusedElement = getActiveElement();
+
+    if (!el.contains(previouslyFocusedElement)) {
+      const event = dispatchCancelableEvent(el, AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
+
+      if (!event.defaultPrevented) {
+        focusFirst(getTabbableCandidates(el), { select: true });
+
+        if (getActiveElement() === previouslyFocusedElement)
+          focus(el);
+      }
+    }
+
+    onCleanup(() => {
+      const event = dispatchCancelableEvent(el, AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
+
+      if (!event.defaultPrevented) {
+        focus(previouslyFocusedElement ?? document.body, { select: true });
+      }
+
+      stack.remove(focusScope);
+    });
+  });
+}
diff --git a/vue/primitives/src/focus-scope/useFocusTrap.ts b/vue/primitives/src/focus-scope/useFocusTrap.ts
new file mode 100644
index 0000000..cb81dd1
--- /dev/null
+++ b/vue/primitives/src/focus-scope/useFocusTrap.ts
@@ -0,0 +1,60 @@
+import type { MaybeRefOrGetter, Ref } from 'vue';
+import { shallowRef, toValue, watchPostEffect } from 'vue';
+import type { FocusScopeAPI } from './stack';
+import { focus } from '@robonen/platform/browsers';
+
+export function useFocusTrap(
+  container: Readonly<Ref<HTMLElement | null | undefined>>,
+  focusScope: FocusScopeAPI,
+  trapped: MaybeRefOrGetter<boolean>,
+) {
+  const lastFocusedElement = shallowRef<HTMLElement | null>(null);
+
+  watchPostEffect((onCleanup) => {
+    const el = container.value;
+    if (!toValue(trapped) || !el) return;
+
+    function handleFocusIn(event: FocusEvent) {
+      if (focusScope.paused || !el) return;
+
+      const target = event.target as HTMLElement | null;
+
+      if (el.contains(target)) {
+        lastFocusedElement.value = target;
+      }
+      else {
+        focus(lastFocusedElement.value, { select: true });
+      }
+    }
+
+    function handleFocusOut(event: FocusEvent) {
+      if (focusScope.paused || !el) return;
+
+      const relatedTarget = event.relatedTarget as HTMLElement | null;
+
+      // null relatedTarget = браузер/вкладка потеряла фокус или элемент удалён из DOM.
+      if (relatedTarget === null) return;
+
+      if (!el.contains(relatedTarget)) {
+        focus(lastFocusedElement.value, { select: true });
+      }
+    }
+
+    function handleMutations() {
+      if (!el!.contains(lastFocusedElement.value))
+        focus(el!);
+    }
+
+    document.addEventListener('focusin', handleFocusIn);
+    document.addEventListener('focusout', handleFocusOut);
+
+    const observer = new MutationObserver(handleMutations);
+    observer.observe(el, { childList: true, subtree: true });
+
+    onCleanup(() => {
+      document.removeEventListener('focusin', handleFocusIn);
+      document.removeEventListener('focusout', handleFocusOut);
+      observer.disconnect();
+    });
+  });
+}
diff --git a/vue/primitives/src/hover-card/HoverCardArrow.vue b/vue/primitives/src/hover-card/HoverCardArrow.vue
new file mode 100644
index 0000000..2cde95b
--- /dev/null
+++ b/vue/primitives/src/hover-card/HoverCardArrow.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { PopperArrowProps } from '../popper';
+
+export interface HoverCardArrowProps extends PopperArrowProps {}
+</script>
+
+<script setup lang="ts">
+import { PopperArrow } from '../popper';
+
+const { width = 10, height = 5 } = defineProps<HoverCardArrowProps>();
+</script>
+
+<template>
+  <PopperArrow :width="width" :height="height">
+    <slot />
+  </PopperArrow>
+</template>
diff --git a/vue/primitives/src/hover-card/HoverCardContent.vue b/vue/primitives/src/hover-card/HoverCardContent.vue
new file mode 100644
index 0000000..e4dd274
--- /dev/null
+++ b/vue/primitives/src/hover-card/HoverCardContent.vue
@@ -0,0 +1,34 @@
+<script lang="ts">
+import type { HoverCardContentImplEmits, HoverCardContentImplProps } from './HoverCardContentImpl.vue';
+
+export interface HoverCardContentProps extends HoverCardContentImplProps {
+  /** Keep mounted for CSS exit animations. */
+  forceMount?: boolean;
+}
+
+export type HoverCardContentEmits = HoverCardContentImplEmits;
+</script>
+
+<script setup lang="ts">
+import HoverCardContentImpl from './HoverCardContentImpl.vue';
+import { Presence } from '../presence';
+import { useHoverCardContext } from './context';
+
+const { forceMount = false, ...contentProps } = defineProps<HoverCardContentProps>();
+const emit = defineEmits<HoverCardContentEmits>();
+const ctx = useHoverCardContext();
+</script>
+
+<template>
+  <Presence :present="ctx.open.value" :force-mount="forceMount">
+    <HoverCardContentImpl
+      v-bind="contentProps"
+      @escape-key-down="emit('escapeKeyDown', $event)"
+      @pointer-down-outside="emit('pointerDownOutside', $event)"
+      @focus-outside="emit('focusOutside', $event)"
+      @interact-outside="emit('interactOutside', $event)"
+    >
+      <slot />
+    </HoverCardContentImpl>
+  </Presence>
+</template>
diff --git a/vue/primitives/src/hover-card/HoverCardContentImpl.vue b/vue/primitives/src/hover-card/HoverCardContentImpl.vue
new file mode 100644
index 0000000..9d591ae
--- /dev/null
+++ b/vue/primitives/src/hover-card/HoverCardContentImpl.vue
@@ -0,0 +1,170 @@
+<script lang="ts">
+import type { PopperContentProps } from '../popper';
+import type { PrimitiveProps } from '../primitive';
+
+export interface HoverCardContentImplProps extends PrimitiveProps, Pick<
+  PopperContentProps,
+  | 'side'
+  | 'sideOffset'
+  | 'sideFlip'
+  | 'align'
+  | 'alignOffset'
+  | 'alignFlip'
+  | 'avoidCollisions'
+  | 'collisionBoundary'
+  | 'collisionPadding'
+  | 'arrowPadding'
+  | 'sticky'
+  | 'hideWhenDetached'
+  | 'positionStrategy'
+  | 'updatePositionStrategy'
+> {}
+
+export interface HoverCardContentImplEmits {
+  escapeKeyDown: [event: KeyboardEvent];
+  pointerDownOutside: [event: PointerEvent | MouseEvent];
+  focusOutside: [event: FocusEvent];
+  interactOutside: [event: Event];
+}
+</script>
+
+<script setup lang="ts">
+import { nextTick, onMounted, onScopeDispose, ref, watchEffect } from 'vue';
+import { DismissableLayer } from '../dismissable-layer';
+import { PopperContent } from '../popper';
+import { excludeTouch } from './utils';
+import { useForwardExpose } from '@robonen/vue';
+import { useGraceArea } from '../utils/useGraceArea';
+import { useHoverCardContext } from './context';
+
+const {
+  side = 'bottom',
+  sideOffset = 0,
+  sideFlip = true,
+  align = 'center',
+  alignOffset = 0,
+  alignFlip = true,
+  avoidCollisions = true,
+  collisionBoundary = [],
+  collisionPadding = 0,
+  arrowPadding = 0,
+  sticky = 'partial',
+  hideWhenDetached = false,
+  positionStrategy,
+  updatePositionStrategy,
+  as = 'div',
+} = defineProps<HoverCardContentImplProps>();
+
+const emit = defineEmits<HoverCardContentImplEmits>();
+
+const ctx = useHoverCardContext();
+const { forwardRef, currentElement } = useForwardExpose();
+
+const { isPointerInTransit, onPointerExit } = useGraceArea(ctx.trigger, currentElement);
+
+watchEffect(() => {
+  ctx.isPointerInTransit.value = isPointerInTransit.value;
+});
+
+onPointerExit(() => ctx.onClose());
+
+const containSelection = ref(false);
+let originalUserSelect: string | undefined;
+let originalWebkitUserSelect: string | undefined;
+
+watchEffect((cleanup) => {
+  if (!containSelection.value) return;
+  const body = document.body;
+  originalUserSelect = body.style.userSelect;
+  originalWebkitUserSelect = body.style.webkitUserSelect;
+  body.style.userSelect = 'none';
+  body.style.webkitUserSelect = 'none';
+  cleanup(() => {
+    body.style.userSelect = originalUserSelect ?? '';
+    body.style.webkitUserSelect = originalWebkitUserSelect ?? '';
+  });
+});
+
+function onPointerUp() {
+  containSelection.value = false;
+  ctx.isPointerDownOnContent.value = false;
+  nextTick(() => {
+    const hasSelection = document.getSelection()?.toString() !== '';
+    if (hasSelection) ctx.hasSelection.value = true;
+  });
+}
+
+function onScrollCapture(event: Event) {
+  const target = event.target as Node | null;
+  if (target && ctx.trigger.value && target.contains(ctx.trigger.value)) ctx.onDismiss();
+}
+
+onMounted(() => {
+  document.addEventListener('pointerup', onPointerUp);
+  globalThis.addEventListener('scroll', onScrollCapture, { capture: true });
+});
+
+onScopeDispose(() => {
+  document.removeEventListener('pointerup', onPointerUp);
+  globalThis.removeEventListener('scroll', onScrollCapture, { capture: true });
+  ctx.hasSelection.value = false;
+  ctx.isPointerDownOnContent.value = false;
+});
+
+function onContentPointerDown(event: PointerEvent) {
+  if ((event.currentTarget as HTMLElement).contains(event.target as HTMLElement)) {
+    containSelection.value = true;
+  }
+  ctx.hasSelection.value = false;
+  ctx.isPointerDownOnContent.value = true;
+}
+
+function onContentPointerEnter(event: PointerEvent) {
+  excludeTouch(() => ctx.onOpen())(event);
+}
+</script>
+
+<template>
+  <DismissableLayer
+    as="template"
+    :disable-outside-pointer-events="false"
+    @escape-key-down="emit('escapeKeyDown', $event)"
+    @pointer-down-outside="emit('pointerDownOutside', $event)"
+    @focus-outside.prevent="emit('focusOutside', $event)"
+    @interact-outside="emit('interactOutside', $event)"
+    @dismiss="ctx.onDismiss"
+  >
+    <PopperContent
+      :ref="forwardRef"
+      :as="as"
+      :side="side"
+      :side-offset="sideOffset"
+      :side-flip="sideFlip"
+      :align="align"
+      :align-offset="alignOffset"
+      :align-flip="alignFlip"
+      :avoid-collisions="avoidCollisions"
+      :collision-boundary="collisionBoundary"
+      :collision-padding="collisionPadding"
+      :arrow-padding="arrowPadding"
+      :sticky="sticky"
+      :hide-when-detached="hideWhenDetached"
+      :position-strategy="positionStrategy"
+      :update-position-strategy="updatePositionStrategy"
+      :data-state="ctx.open.value ? 'open' : 'closed'"
+      :style="{
+        'user-select': containSelection ? 'text' : undefined,
+        '-webkit-user-select': containSelection ? 'text' : undefined,
+        '--hover-card-content-transform-origin': 'var(--popper-transform-origin)',
+        '--hover-card-content-available-width': 'var(--popper-available-width)',
+        '--hover-card-content-available-height': 'var(--popper-available-height)',
+        '--hover-card-trigger-width': 'var(--popper-anchor-width)',
+        '--hover-card-trigger-height': 'var(--popper-anchor-height)',
+      }"
+      @pointerenter="onContentPointerEnter"
+      @pointerdown="onContentPointerDown"
+    >
+      <slot />
+    </PopperContent>
+  </DismissableLayer>
+</template>
diff --git a/vue/primitives/src/hover-card/HoverCardPortal.vue b/vue/primitives/src/hover-card/HoverCardPortal.vue
new file mode 100644
index 0000000..1ca353c
--- /dev/null
+++ b/vue/primitives/src/hover-card/HoverCardPortal.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { TeleportPrimitiveProps } from '../teleport';
+
+export interface HoverCardPortalProps extends TeleportPrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Portal } from '../teleport';
+
+const props = defineProps<HoverCardPortalProps>();
+</script>
+
+<template>
+  <Portal v-bind="props">
+    <slot />
+  </Portal>
+</template>
diff --git a/vue/primitives/src/hover-card/HoverCardRoot.vue b/vue/primitives/src/hover-card/HoverCardRoot.vue
new file mode 100644
index 0000000..402c063
--- /dev/null
+++ b/vue/primitives/src/hover-card/HoverCardRoot.vue
@@ -0,0 +1,116 @@
+<script lang="ts">
+export interface HoverCardRootProps {
+  /** Controlled open state. Bind with `v-model:open`. */
+  open?: boolean;
+  /** Initial open state for uncontrolled usage. */
+  defaultOpen?: boolean;
+  /** Delay (ms) before the content opens after pointer enters trigger. */
+  openDelay?: number;
+  /** Delay (ms) before the content closes after pointer leaves trigger/content. */
+  closeDelay?: number;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onScopeDispose, ref } from 'vue';
+import { PopperRoot } from '../popper';
+import { provideHoverCardContext } from './context';
+
+const { openDelay = 700, closeDelay = 300, defaultOpen = false } = defineProps<HoverCardRootProps>();
+
+const openModel = defineModel<boolean | undefined>('open', { default: undefined });
+const uncontrolled = ref(defaultOpen);
+
+// `open` intentionally shares the model name: it's a local read-only computed that
+// resolves the controlled model against the uncontrolled fallback. Safe in script-setup.
+// eslint-disable-next-line vue/no-dupe-keys
+const open = computed(() => openModel.value ?? uncontrolled.value);
+
+function setOpen(value: boolean) {
+  if (openModel.value === undefined) uncontrolled.value = value;
+  openModel.value = value;
+}
+
+let openTimer = 0;
+let closeTimer = 0;
+
+function clearOpenTimer() {
+  if (openTimer) {
+    clearTimeout(openTimer);
+    openTimer = 0;
+  }
+}
+
+function clearCloseTimer() {
+  if (closeTimer) {
+    clearTimeout(closeTimer);
+    closeTimer = 0;
+  }
+}
+
+const hasSelection = ref(false);
+const isPointerDownOnContent = ref(false);
+const isPointerInTransit = ref(false);
+const trigger = ref<HTMLElement | undefined>();
+
+function onOpen() {
+  clearCloseTimer();
+  if (openDelay <= 0) {
+    setOpen(true);
+    return;
+  }
+  openTimer = globalThis.setTimeout(() => {
+    setOpen(true);
+    openTimer = 0;
+  }, openDelay);
+}
+
+function onClose() {
+  clearOpenTimer();
+  if (hasSelection.value || isPointerDownOnContent.value) return;
+  if (closeDelay <= 0) {
+    setOpen(false);
+    return;
+  }
+  closeTimer = globalThis.setTimeout(() => {
+    setOpen(false);
+    closeTimer = 0;
+  }, closeDelay);
+}
+
+function onDismiss() {
+  clearOpenTimer();
+  clearCloseTimer();
+  setOpen(false);
+}
+
+onScopeDispose(() => {
+  clearOpenTimer();
+  clearCloseTimer();
+});
+
+provideHoverCardContext({
+  open,
+  onOpenChange: setOpen,
+  onOpen,
+  onClose,
+  onDismiss,
+  hasSelection,
+  isPointerDownOnContent,
+  isPointerInTransit,
+  trigger,
+  onTriggerChange(el) {
+    trigger.value = el;
+  },
+});
+
+defineSlots<{
+  default?: (props: { open: boolean }) => any;
+}>();
+</script>
+
+<template>
+  <PopperRoot>
+    <slot :open="open" />
+  </PopperRoot>
+</template>
diff --git a/vue/primitives/src/hover-card/HoverCardTrigger.vue b/vue/primitives/src/hover-card/HoverCardTrigger.vue
new file mode 100644
index 0000000..3c70ca9
--- /dev/null
+++ b/vue/primitives/src/hover-card/HoverCardTrigger.vue
@@ -0,0 +1,49 @@
+<script lang="ts">
+import type { PopperAnchorProps } from '../popper';
+import type { PrimitiveProps } from '../primitive';
+
+export interface HoverCardTriggerProps extends PrimitiveProps, Pick<PopperAnchorProps, 'reference'> {}
+</script>
+
+<script setup lang="ts">
+import { PopperAnchor } from '../popper';
+import { Primitive } from '../primitive';
+import { excludeTouch } from './utils';
+import { useForwardExpose } from '@robonen/vue';
+import { useHoverCardContext } from './context';
+import { watch } from 'vue';
+
+const { as = 'a', reference } = defineProps<HoverCardTriggerProps>();
+
+const ctx = useHoverCardContext();
+const { forwardRef, currentElement } = useForwardExpose();
+
+watch(currentElement, el => ctx.onTriggerChange(el));
+
+function onPointerLeave() {
+  // Defer so grace-area detection can mark the pointer as in transit before
+  // we decide to close.
+  setTimeout(() => {
+    if (!ctx.isPointerInTransit.value && !ctx.open.value) ctx.onClose();
+    else if (!ctx.isPointerInTransit.value) ctx.onClose();
+  }, 0);
+}
+</script>
+
+<template>
+  <PopperAnchor as="template" :reference="reference">
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      :data-state="ctx.open.value ? 'open' : 'closed'"
+      data-hover-card-trigger
+      data-grace-area-trigger
+      @pointerenter="excludeTouch(ctx.onOpen)($event)"
+      @pointerleave="excludeTouch(onPointerLeave)($event)"
+      @focus="ctx.onOpen()"
+      @blur="ctx.onClose()"
+    >
+      <slot />
+    </Primitive>
+  </PopperAnchor>
+</template>
diff --git a/vue/primitives/src/hover-card/__test__/HoverCard.test.ts b/vue/primitives/src/hover-card/__test__/HoverCard.test.ts
new file mode 100644
index 0000000..cd86ce5
--- /dev/null
+++ b/vue/primitives/src/hover-card/__test__/HoverCard.test.ts
@@ -0,0 +1,176 @@
+import {
+  HoverCardContent,
+  HoverCardRoot,
+  HoverCardTrigger,
+} from '../../index';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { defineComponent, h, nextTick } from 'vue';
+import type { VueWrapper } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+
+const wrappers: Array<VueWrapper<any>> = [];
+
+afterEach(() => {
+  while (wrappers.length) wrappers.pop()!.unmount();
+  document.body.innerHTML = '';
+  document.body.removeAttribute('style');
+  vi.useRealTimers();
+});
+
+function track<T extends VueWrapper<any>>(w: T): T {
+  wrappers.push(w);
+  return w;
+}
+
+function mountHoverCard(options: {
+  open?: boolean;
+  defaultOpen?: boolean;
+  openDelay?: number;
+  closeDelay?: number;
+  onUpdateOpen?: (v: boolean | undefined) => void;
+  forceMount?: boolean;
+} = {}) {
+  const Wrapper = defineComponent({
+    setup() {
+      return () =>
+        h(
+          HoverCardRoot,
+          {
+            open: options.open,
+            defaultOpen: options.defaultOpen,
+            openDelay: options.openDelay,
+            closeDelay: options.closeDelay,
+            'onUpdate:open': options.onUpdateOpen,
+          },
+          {
+            default: () => [
+              h(HoverCardTrigger, null, { default: () => 'Trigger' }),
+              h(
+                HoverCardContent,
+                { forceMount: options.forceMount },
+                { default: () => 'Card body' },
+              ),
+            ],
+          },
+        );
+    },
+  });
+
+  return track(mount(Wrapper, { attachTo: document.body }));
+}
+
+function getTrigger(): HTMLElement {
+  return document.querySelector('[data-hover-card-trigger]') as HTMLElement;
+}
+
+describe('HoverCard', () => {
+  it('renders trigger with closed state by default', () => {
+    mountHoverCard();
+    const trigger = getTrigger();
+    expect(trigger).toBeTruthy();
+    expect(trigger.getAttribute('data-state')).toBe('closed');
+    expect(trigger.hasAttribute('data-grace-area-trigger')).toBe(true);
+  });
+
+  it('opens with defaultOpen and renders content', async () => {
+    mountHoverCard({ defaultOpen: true });
+    await nextTick();
+    expect(getTrigger().getAttribute('data-state')).toBe('open');
+    expect(document.body.textContent).toContain('Card body');
+  });
+
+  it('opens after openDelay on pointer enter and closes after closeDelay on leave', async () => {
+    vi.useFakeTimers();
+    mountHoverCard({ openDelay: 200, closeDelay: 100 });
+    const trigger = getTrigger();
+
+    trigger.dispatchEvent(new PointerEvent('pointerenter', { pointerType: 'mouse' }));
+    expect(trigger.getAttribute('data-state')).toBe('closed');
+
+    vi.advanceTimersByTime(200);
+    await nextTick();
+    expect(trigger.getAttribute('data-state')).toBe('open');
+
+    trigger.dispatchEvent(new PointerEvent('pointerleave', { pointerType: 'mouse' }));
+    // pointerleave defers close via setTimeout(0) then closeDelay
+    vi.advanceTimersByTime(0);
+    vi.advanceTimersByTime(100);
+    await nextTick();
+    expect(trigger.getAttribute('data-state')).toBe('closed');
+  });
+
+  it('opens immediately on focus and closes on blur after closeDelay', async () => {
+    vi.useFakeTimers();
+    mountHoverCard({ openDelay: 500, closeDelay: 50 });
+    const trigger = getTrigger();
+
+    trigger.dispatchEvent(new FocusEvent('focus'));
+    // openDelay still applies for focus too (matches reka behavior)
+    vi.advanceTimersByTime(500);
+    await nextTick();
+    expect(trigger.getAttribute('data-state')).toBe('open');
+
+    trigger.dispatchEvent(new FocusEvent('blur'));
+    vi.advanceTimersByTime(50);
+    await nextTick();
+    expect(trigger.getAttribute('data-state')).toBe('closed');
+  });
+
+  it('ignores touch pointer events', async () => {
+    vi.useFakeTimers();
+    mountHoverCard({ openDelay: 50 });
+    const trigger = getTrigger();
+    trigger.dispatchEvent(new PointerEvent('pointerenter', { pointerType: 'touch' }));
+    vi.advanceTimersByTime(50);
+    await nextTick();
+    expect(trigger.getAttribute('data-state')).toBe('closed');
+  });
+
+  it('closes on Escape via dismissable layer', async () => {
+    mountHoverCard({ defaultOpen: true });
+    await nextTick();
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    await nextTick();
+    expect(getTrigger().getAttribute('data-state')).toBe('closed');
+  });
+
+  it('supports controlled v-model', async () => {
+    const onUpdate = vi.fn();
+    const Wrapper = defineComponent({
+      props: { open: { type: Boolean, default: false } },
+      emits: ['update:open'],
+      setup(props, { emit }) {
+        return () =>
+          h(
+            HoverCardRoot,
+            {
+              open: props.open,
+              openDelay: 0,
+              closeDelay: 0,
+              'onUpdate:open': (v: boolean | undefined) => {
+                onUpdate(v);
+                emit('update:open', v);
+              },
+            },
+            {
+              default: () => [
+                h(HoverCardTrigger, null, { default: () => 'T' }),
+                h(HoverCardContent, null, { default: () => 'B' }),
+              ],
+            },
+          );
+      },
+    });
+    const wrapper = track(mount(Wrapper, { attachTo: document.body, props: { open: false } }));
+    const trigger = getTrigger();
+
+    trigger.dispatchEvent(new PointerEvent('pointerenter', { pointerType: 'mouse' }));
+    await nextTick();
+    expect(onUpdate).toHaveBeenCalledWith(true);
+    expect(trigger.getAttribute('data-state')).toBe('closed');
+
+    await wrapper.setProps({ open: true });
+    await nextTick();
+    expect(trigger.getAttribute('data-state')).toBe('open');
+  });
+});
diff --git a/vue/primitives/src/hover-card/context.ts b/vue/primitives/src/hover-card/context.ts
new file mode 100644
index 0000000..33aa77a
--- /dev/null
+++ b/vue/primitives/src/hover-card/context.ts
@@ -0,0 +1,20 @@
+import type { ComputedRef, Ref } from 'vue';
+import { useContextFactory } from '@robonen/vue';
+
+export interface HoverCardContext {
+  open: ComputedRef<boolean>;
+  onOpenChange: (open: boolean) => void;
+  onOpen: () => void;
+  onClose: () => void;
+  onDismiss: () => void;
+  hasSelection: Ref<boolean>;
+  isPointerDownOnContent: Ref<boolean>;
+  isPointerInTransit: Ref<boolean>;
+  trigger: Ref<HTMLElement | undefined>;
+  onTriggerChange: (el: HTMLElement | undefined) => void;
+}
+
+const ctx = useContextFactory<HoverCardContext>('HoverCardContext');
+
+export const provideHoverCardContext = ctx.provide;
+export const useHoverCardContext = ctx.inject;
diff --git a/vue/primitives/src/hover-card/index.ts b/vue/primitives/src/hover-card/index.ts
new file mode 100644
index 0000000..745bc64
--- /dev/null
+++ b/vue/primitives/src/hover-card/index.ts
@@ -0,0 +1,17 @@
+export { default as HoverCardRoot } from './HoverCardRoot.vue';
+export { default as HoverCardTrigger } from './HoverCardTrigger.vue';
+export { default as HoverCardPortal } from './HoverCardPortal.vue';
+export { default as HoverCardContent } from './HoverCardContent.vue';
+export { default as HoverCardArrow } from './HoverCardArrow.vue';
+
+export { useHoverCardContext, type HoverCardContext } from './context';
+
+export type { HoverCardRootProps } from './HoverCardRoot.vue';
+export type { HoverCardTriggerProps } from './HoverCardTrigger.vue';
+export type { HoverCardPortalProps } from './HoverCardPortal.vue';
+export type { HoverCardContentProps, HoverCardContentEmits } from './HoverCardContent.vue';
+export type {
+  HoverCardContentImplProps,
+  HoverCardContentImplEmits,
+} from './HoverCardContentImpl.vue';
+export type { HoverCardArrowProps } from './HoverCardArrow.vue';
diff --git a/vue/primitives/src/hover-card/utils.ts b/vue/primitives/src/hover-card/utils.ts
new file mode 100644
index 0000000..0dab430
--- /dev/null
+++ b/vue/primitives/src/hover-card/utils.ts
@@ -0,0 +1,20 @@
+/** Filter out touch pointer events — they're handled by long-press behavior elsewhere. */
+export function excludeTouch<T extends (event: PointerEvent) => void>(handler: T) {
+  return (event: PointerEvent) => {
+    if (event.pointerType === 'touch') return;
+    handler(event);
+  };
+}
+
+/** Walk a subtree and collect elements that can receive focus via Tab. */
+export function getTabbableNodes(container: HTMLElement): HTMLElement[] {
+  const nodes: HTMLElement[] = [];
+  const walker = container.ownerDocument.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+    acceptNode: (node) => {
+      const el = node as HTMLElement;
+      return el.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+    },
+  });
+  while (walker.nextNode()) nodes.push(walker.currentNode as HTMLElement);
+  return nodes;
+}
diff --git a/vue/primitives/src/index.ts b/vue/primitives/src/index.ts
new file mode 100644
index 0000000..a5ead48
--- /dev/null
+++ b/vue/primitives/src/index.ts
@@ -0,0 +1,55 @@
+export * from './config-provider';
+export * from './primitive';
+export * from './presence';
+export * from './collection';
+export * from './roving-focus';
+export * from './pagination';
+export * from './focus-scope';
+export * from './visually-hidden';
+export * from './teleport';
+export * from './dismissable-layer';
+export * from './dialog';
+export * from './alert-dialog';
+export * from './scroll-area';
+export * from './separator';
+export * from './label';
+export * from './aspect-ratio';
+export * from './toggle';
+export * from './switch';
+export * from './progress';
+export * from './collapsible';
+export * from './avatar';
+export * from './slider';
+export * from './checkbox';
+export * from './toolbar';
+export * from './radio-group';
+export * from './toggle-group';
+export * from './number-field';
+export * from './pin-input';
+export * from './tabs';
+export * from './accordion';
+export * from './popper';
+export * from './hover-card';
+export * from './popover';
+export * from './tooltip';
+export * from './tree';
+export * from './stepper';
+export * from './editable';
+export * from './tags-input';
+export * from './listbox';
+
+export * from './menu';
+export * from './dropdown-menu';
+export * from './context-menu';
+export * from './menubar';
+
+export * from './select';
+export * from './toast';
+
+export * from './combobox';
+export * from './navigation-menu';
+
+export * from './command';
+
+export * from './calendar';
+export * from './date-picker';
diff --git a/vue/primitives/src/label/Label.vue b/vue/primitives/src/label/Label.vue
new file mode 100644
index 0000000..b17f57c
--- /dev/null
+++ b/vue/primitives/src/label/Label.vue
@@ -0,0 +1,28 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface LabelProps extends PrimitiveProps {
+  /** The id of the element the label is associated with (renders as `for`). */
+  for?: string;
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+
+useForwardExpose();
+
+const { as = 'label', for: htmlFor } = defineProps<LabelProps>();
+
+function onMouseDown(event: MouseEvent) {
+  // Prevent text selection when double-clicking a label.
+  if (!event.defaultPrevented && event.detail > 1) event.preventDefault();
+}
+</script>
+
+<template>
+  <Primitive :as="as" :for="htmlFor" @mousedown="onMouseDown">
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/label/__test__/Label.test.ts b/vue/primitives/src/label/__test__/Label.test.ts
new file mode 100644
index 0000000..166f099
--- /dev/null
+++ b/vue/primitives/src/label/__test__/Label.test.ts
@@ -0,0 +1,33 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import { defineComponent, h } from 'vue';
+import { Label } from '../index';
+
+describe('Label', () => {
+  it('renders a native <label>', () => {
+    const wrapper = mount(Label, { slots: { default: 'Name' } });
+    expect(wrapper.element.tagName).toBe('LABEL');
+    expect(wrapper.text()).toBe('Name');
+  });
+
+  it('forwards `for` to the `for` attribute', () => {
+    const wrapper = mount(Label, { props: { for: 'my-input' } });
+    expect(wrapper.attributes('for')).toBe('my-input');
+  });
+
+  it('prevents text selection on multi-click', () => {
+    const wrapper = mount(defineComponent({
+      setup: () => () => h(Label, null, { default: () => 'x' }),
+    }));
+    const event = new MouseEvent('mousedown', { bubbles: true, cancelable: true, detail: 2 });
+    wrapper.element.dispatchEvent(event);
+    expect(event.defaultPrevented).toBe(true);
+  });
+
+  it('does not prevent default on single click', () => {
+    const wrapper = mount(Label);
+    const event = new MouseEvent('mousedown', { bubbles: true, cancelable: true, detail: 1 });
+    wrapper.element.dispatchEvent(event);
+    expect(event.defaultPrevented).toBe(false);
+  });
+});
diff --git a/vue/primitives/src/label/index.ts b/vue/primitives/src/label/index.ts
new file mode 100644
index 0000000..ffad78a
--- /dev/null
+++ b/vue/primitives/src/label/index.ts
@@ -0,0 +1,2 @@
+export { default as Label } from './Label.vue';
+export type { LabelProps } from './Label.vue';
diff --git a/vue/primitives/src/listbox/ListboxContent.vue b/vue/primitives/src/listbox/ListboxContent.vue
new file mode 100644
index 0000000..68a425c
--- /dev/null
+++ b/vue/primitives/src/listbox/ListboxContent.vue
@@ -0,0 +1,72 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ListboxContentProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { ref } from 'vue';
+import { useCollectionInjector } from '../collection';
+import { useForwardExpose } from '@robonen/vue';
+import { useListboxRootContext } from './context';
+
+// Module-scoped to avoid re-allocating on every keydown.
+const NAV_KEYS = new Set(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End']);
+
+const { as = 'div' } = defineProps<ListboxContentProps>();
+
+const ctx = useListboxRootContext();
+const { forwardRef } = useForwardExpose();
+const { CollectionSlot } = useCollectionInjector();
+
+const isClickFocus = ref(false);
+
+function onMouseDown(event: MouseEvent): void {
+  if (event.button !== 0) return;
+  isClickFocus.value = true;
+  setTimeout(() => {
+    isClickFocus.value = false;
+  }, 10);
+}
+
+function onFocus(event: FocusEvent): void {
+  if (isClickFocus.value) return;
+  ctx.onEnter(event);
+}
+
+function onKeyDown(event: KeyboardEvent): void {
+  const { key } = event;
+  const o = ctx.orientation.value;
+  if ((o === 'vertical' && (key === 'ArrowLeft' || key === 'ArrowRight'))
+    || (o === 'horizontal' && (key === 'ArrowUp' || key === 'ArrowDown'))) return;
+
+  if (key === 'Enter') return ctx.onKeydownEnter(event);
+
+  if (NAV_KEYS.has(key)) {
+    event.preventDefault();
+    if (ctx.focusable.value) ctx.onKeydownNavigation(event);
+    return;
+  }
+  ctx.onKeydownTypeAhead(event);
+}
+</script>
+
+<template>
+  <CollectionSlot>
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      role="listbox"
+      :tabindex="ctx.focusable.value ? (ctx.highlightedElement.value ? '-1' : '0') : '-1'"
+      :aria-orientation="ctx.orientation.value"
+      :aria-multiselectable="ctx.multiple.value ? true : undefined"
+      :data-orientation="ctx.orientation.value"
+      @mousedown="onMouseDown"
+      @focus="onFocus"
+      @keydown="onKeyDown"
+    >
+      <slot />
+    </Primitive>
+  </CollectionSlot>
+</template>
diff --git a/vue/primitives/src/listbox/ListboxFilter.vue b/vue/primitives/src/listbox/ListboxFilter.vue
new file mode 100644
index 0000000..da86783
--- /dev/null
+++ b/vue/primitives/src/listbox/ListboxFilter.vue
@@ -0,0 +1,95 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ListboxFilterProps extends PrimitiveProps {
+  /** Controlled input value. */
+  modelValue?: string;
+  /** Focus on mount. */
+  autoFocus?: boolean;
+  /** Disable input. */
+  disabled?: boolean;
+}
+
+export interface ListboxFilterEmits {
+  'update:modelValue': [value: string];
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch, watchSyncEffect } from 'vue';
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { useListboxRootContext } from './context';
+
+// Module-scoped nav key set: avoids per-keydown array allocation.
+const NAV_KEYS = new Set(['ArrowUp', 'ArrowDown', 'Home', 'End']);
+
+const {
+  as = 'input',
+  modelValue,
+  autoFocus = false,
+  disabled = false,
+} = defineProps<ListboxFilterProps>();
+
+const emit = defineEmits<ListboxFilterEmits>();
+
+const ctx = useListboxRootContext();
+const { forwardRef, currentElement } = useForwardExpose();
+
+const localValue = ref<string>(modelValue ?? '');
+watch(() => modelValue, (v) => {
+  if (v === undefined || v === localValue.value) return;
+  localValue.value = v;
+});
+
+const isDisabled = computed(() => disabled || ctx.disabled.value);
+const activedescendant = ref<string | undefined>();
+watchSyncEffect(() => {
+  activedescendant.value = ctx.highlightedElement.value?.id;
+});
+
+onMounted(() => {
+  ctx.focusable.value = false;
+  if (!autoFocus) return;
+  setTimeout(() => {
+    (currentElement.value as HTMLInputElement | undefined)?.focus();
+  }, 1);
+});
+
+onUnmounted(() => {
+  ctx.focusable.value = true;
+});
+
+function onInput(event: Event): void {
+  const v = (event.target as HTMLInputElement).value;
+  localValue.value = v;
+  emit('update:modelValue', v);
+  ctx.highlightFirstItem();
+}
+
+function onKeyDown(event: KeyboardEvent): void {
+  const { key } = event;
+  if (key === 'Enter') return ctx.onKeydownEnter(event);
+  if (NAV_KEYS.has(key)) {
+    event.preventDefault();
+    ctx.onKeydownNavigation(event);
+  }
+}
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    type="text"
+    :value="localValue"
+    :disabled="isDisabled || undefined"
+    :aria-disabled="isDisabled ? true : undefined"
+    :aria-activedescendant="activedescendant"
+    :data-disabled="isDisabled ? '' : undefined"
+    @input="onInput"
+    @keydown="onKeyDown"
+  >
+    <slot :model-value="localValue" />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/listbox/ListboxGroup.vue b/vue/primitives/src/listbox/ListboxGroup.vue
new file mode 100644
index 0000000..a41650b
--- /dev/null
+++ b/vue/primitives/src/listbox/ListboxGroup.vue
@@ -0,0 +1,30 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ListboxGroupProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { provideListboxGroupContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+import { useId } from '../config-provider';
+
+const { as = 'div' } = defineProps<ListboxGroupProps>();
+
+const { forwardRef } = useForwardExpose();
+const id = useId(undefined, 'listbox-group').value;
+
+provideListboxGroupContext({ id });
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    role="group"
+    :aria-labelledby="id"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/listbox/ListboxGroupLabel.vue b/vue/primitives/src/listbox/ListboxGroupLabel.vue
new file mode 100644
index 0000000..82c7304
--- /dev/null
+++ b/vue/primitives/src/listbox/ListboxGroupLabel.vue
@@ -0,0 +1,26 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ListboxGroupLabelProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { useListboxGroupContext } from './context';
+
+const { as = 'div' } = defineProps<ListboxGroupLabelProps>();
+
+const group = useListboxGroupContext();
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :id="group.id"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/listbox/ListboxItem.vue b/vue/primitives/src/listbox/ListboxItem.vue
new file mode 100644
index 0000000..7fd2351
--- /dev/null
+++ b/vue/primitives/src/listbox/ListboxItem.vue
@@ -0,0 +1,85 @@
+<script lang="ts" generic="T extends ListboxValue = ListboxValue">
+import type { ListboxValue } from './utils';
+import type { PrimitiveProps } from '../primitive';
+
+export interface ListboxItemProps<U extends ListboxValue = ListboxValue> extends PrimitiveProps {
+  /** The value of the item. */
+  value: U;
+  /** Disable this item. */
+  disabled?: boolean;
+}
+
+export interface ListboxItemEmits<U extends ListboxValue = ListboxValue> {
+  /** Fired before the value change commits. Call `event.preventDefault()` to cancel. */
+  select: [event: CustomEvent<{ originalEvent: Event; value: U }>];
+}
+</script>
+
+<script setup lang="ts" generic="T extends ListboxValue = ListboxValue">
+import { provideListboxItemContext, useListboxRootContext } from './context';
+import { Primitive } from '../primitive';
+import { computed } from 'vue';
+import { useCollectionInjector } from '../collection';
+import { useForwardExpose } from '@robonen/vue';
+import { useId } from '../config-provider';
+
+const { as = 'div', value, disabled = false } = defineProps<ListboxItemProps<T>>();
+const emit = defineEmits<ListboxItemEmits<T>>();
+
+const ctx = useListboxRootContext();
+const { forwardRef, currentElement } = useForwardExpose();
+const { CollectionItem } = useCollectionInjector();
+
+const id = useId(undefined, 'listbox-item').value;
+const isHighlighted = computed(() => currentElement.value === ctx.highlightedElement.value);
+const isSelected = computed(() => ctx.isSelected(value));
+const isDisabled = computed(() => disabled || ctx.disabled.value);
+
+function handleSelect(originalEvent: Event): void {
+  if (isDisabled.value) return;
+  const detail = { originalEvent, value };
+  const custom = new CustomEvent('listbox.select', { bubbles: true, cancelable: true, detail });
+  emit('select', custom);
+  if (custom.defaultPrevented) return;
+  ctx.onValueChange(value);
+  if (currentElement.value) ctx.changeHighlight(currentElement.value);
+}
+
+function onClick(event: MouseEvent): void {
+  handleSelect(event);
+}
+function onKeyDown(event: KeyboardEvent): void {
+  if (event.key !== ' ') return;
+  event.preventDefault();
+  handleSelect(event);
+}
+function onPointerMove(): void {
+  if (!ctx.highlightOnHover.value) return;
+  if (!currentElement.value || ctx.highlightedElement.value === currentElement.value) return;
+  ctx.changeHighlight(currentElement.value, false, false);
+}
+
+provideListboxItemContext({ isSelected });
+</script>
+
+<template>
+  <CollectionItem :value="value">
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      :id="id"
+      role="option"
+      :tabindex="ctx.focusable.value ? (isHighlighted ? '0' : '-1') : '-1'"
+      :aria-selected="isSelected"
+      :data-state="isSelected ? 'checked' : 'unchecked'"
+      :data-highlighted="isHighlighted ? '' : undefined"
+      :data-disabled="isDisabled ? '' : undefined"
+      :disabled="isDisabled || undefined"
+      @click="onClick"
+      @keydown="onKeyDown"
+      @pointermove="onPointerMove"
+    >
+      <slot :is-selected="isSelected" :is-highlighted="isHighlighted" />
+    </Primitive>
+  </CollectionItem>
+</template>
diff --git a/vue/primitives/src/listbox/ListboxItemIndicator.vue b/vue/primitives/src/listbox/ListboxItemIndicator.vue
new file mode 100644
index 0000000..c0f065f
--- /dev/null
+++ b/vue/primitives/src/listbox/ListboxItemIndicator.vue
@@ -0,0 +1,27 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ListboxItemIndicatorProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { useListboxItemContext } from './context';
+
+const { as = 'span' } = defineProps<ListboxItemIndicatorProps>();
+
+const item = useListboxItemContext();
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <Primitive
+    v-if="item.isSelected.value"
+    :ref="forwardRef"
+    :as="as"
+    aria-hidden="true"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/listbox/ListboxRoot.vue b/vue/primitives/src/listbox/ListboxRoot.vue
new file mode 100644
index 0000000..bf8d80f
--- /dev/null
+++ b/vue/primitives/src/listbox/ListboxRoot.vue
@@ -0,0 +1,299 @@
+<script lang="ts" generic="T extends ListboxValue = ListboxValue">
+import type { ListboxDirection, ListboxOrientation, ListboxSelectionBehavior } from './context';
+import type { ListboxValue } from './utils';
+import type { PrimitiveProps } from '../primitive';
+
+export interface ListboxRootProps<U extends ListboxValue = ListboxValue> extends PrimitiveProps {
+  /** Controlled value. Use `v-model`. */
+  modelValue?: U | U[];
+  /** Uncontrolled initial value. */
+  defaultValue?: U | U[];
+  /** Allow multiple selection. */
+  multiple?: boolean;
+  /** Navigation orientation. @default 'vertical' */
+  orientation?: ListboxOrientation;
+  /** Reading direction. Falls back to `ConfigProvider`. */
+  dir?: ListboxDirection;
+  /** Disable the whole listbox. */
+  disabled?: boolean;
+  /** How selection behaves in `multiple` mode. @default 'toggle' */
+  selectionBehavior?: ListboxSelectionBehavior;
+  /** Highlight items on hover. */
+  highlightOnHover?: boolean;
+  /** Compare objects by key or custom comparator. */
+  by?: string | ((a: U, b: U) => boolean);
+}
+
+export interface ListboxRootEmits<U extends ListboxValue = ListboxValue> {
+  'update:modelValue': [value: U | U[] | undefined];
+  highlight: [payload: { ref: HTMLElement; value: U } | undefined];
+  entryFocus: [event: CustomEvent];
+  leave: [event: Event];
+}
+</script>
+
+<script setup lang="ts" generic="T extends ListboxValue = ListboxValue">
+import { compare, includes } from './utils';
+import { computed, nextTick, ref, shallowRef, toRef, watch } from 'vue';
+import { resolveNextIndex, rovingKeyToAction } from '../utils/roving-focus';
+import { Primitive } from '../primitive';
+import type { Ref } from 'vue';
+import { provideListboxRootContext } from './context';
+import { useCollectionProvider } from '../collection';
+import { useConfig } from '../config-provider';
+import { useForwardExpose } from '@robonen/vue';
+
+const {
+  as = 'div',
+  modelValue,
+  defaultValue,
+  multiple = false,
+  orientation = 'vertical',
+  dir,
+  disabled = false,
+  selectionBehavior = 'toggle',
+  highlightOnHover = false,
+  by,
+} = defineProps<ListboxRootProps<T>>();
+
+const emit = defineEmits<ListboxRootEmits<T>>();
+
+const { forwardRef, currentElement } = useForwardExpose();
+const config = useConfig();
+const direction = computed(() => dir ?? config.dir.value);
+
+const initial = (modelValue ?? defaultValue) as T | T[] | undefined;
+// shallowRef: value is always replaced on commit, never mutated in place.
+const localValue = shallowRef<T | T[] | undefined>(
+  multiple
+    ? (Array.isArray(initial) ? initial.slice() : (initial === undefined ? [] : [initial]))
+    : (Array.isArray(initial) ? initial[0] : initial),
+) as Ref<T | T[] | undefined>;
+
+watch(() => modelValue, (v) => {
+  if (v === undefined) return;
+  const cur = localValue.value;
+  if (Array.isArray(v)) {
+    if (Array.isArray(cur) && v.length === cur.length) {
+      let equal = true;
+      for (let i = 0; i < v.length; i++) {
+        if (v[i] !== cur[i]) {
+          equal = false;
+          break;
+        }
+      }
+      if (equal) return;
+    }
+    localValue.value = v.slice();
+  }
+  else if (v !== cur) {
+    localValue.value = v as any;
+  }
+});
+
+const highlightedElement = shallowRef<HTMLElement>();
+const previousElement = shallowRef<HTMLElement>();
+const focusable = ref(true);
+const isUserAction = ref(false);
+
+const { getItems } = useCollectionProvider();
+
+// Inlined to avoid two intermediate array allocations (.map + .filter) and two closures
+// on every call. Called in type-ahead / navigation / enter, which are hot paths.
+function enabledEls(): HTMLElement[] {
+  const items = getItems(true);
+  const out: HTMLElement[] = [];
+  for (let i = 0; i < items.length; i++) {
+    const el = items[i]!.ref;
+    if (el.dataset.disabled !== '') out.push(el);
+  }
+  return out;
+}
+
+function isSelected(value: T): boolean {
+  return includes(localValue.value, value, by);
+}
+
+function commit(next: T | T[] | undefined): void {
+  localValue.value = next;
+  emit('update:modelValue', next);
+}
+
+function onValueChange(val: T): void {
+  isUserAction.value = true;
+  if (multiple) {
+    const cur = Array.isArray(localValue.value) ? [...(localValue.value as T[])] : [];
+    if (selectionBehavior === 'toggle') {
+      const idx = cur.findIndex(i => compare(i, val, by));
+      if (idx === -1) cur.push(val);
+      else cur.splice(idx, 1);
+      commit(cur);
+    }
+    else {
+      commit([val]);
+    }
+  }
+  else if (selectionBehavior === 'toggle') {
+    commit(compare(localValue.value as T | undefined, val, by) ? undefined : val);
+  }
+  else {
+    commit(val);
+  }
+  // Reset after the commit-driven watcher flush rather than via a real timer
+  // (avoids allocating a timer handle and the 1ms latency).
+  nextTick(() => {
+    isUserAction.value = false;
+  });
+}
+
+function changeHighlight(el: HTMLElement | undefined, scrollIntoView = true, focus?: boolean): void {
+  if (!el) return;
+  highlightedElement.value = el;
+  if (focus ?? focusable.value) el.focus({ preventScroll: !scrollIntoView });
+  if (scrollIntoView) el.scrollIntoView({ block: 'nearest' });
+  const hit = getItems(true).find(i => i.ref === el);
+  emit('highlight', hit as any);
+}
+
+function onKeydownEnter(event: KeyboardEvent): void {
+  const el = highlightedElement.value;
+  if (!el || !el.isConnected) return;
+  event.preventDefault();
+  event.stopPropagation();
+  el.click();
+}
+
+function onKeydownNavigation(event: KeyboardEvent): void {
+  const intent = rovingKeyToAction(event, { orientation, dir: direction.value, loop: false });
+  if (!intent) return;
+  const els = enabledEls();
+  if (els.length === 0) return;
+
+  if (intent.absolute === 'home') return changeHighlight(els[0]);
+  if (intent.absolute === 'end') return changeHighlight(els[els.length - 1]);
+
+  const current = highlightedElement.value;
+  const idx = current ? els.indexOf(current) : -1;
+  if (idx === -1) {
+    changeHighlight(intent.delta < 0 ? els[els.length - 1] : els[0]);
+    return;
+  }
+  const next = resolveNextIndex(idx, intent.delta, els.length, false);
+  changeHighlight(els[next]);
+}
+
+function onKeydownTypeAhead(event: KeyboardEvent): void {
+  if (!focusable.value) return;
+  if (event.altKey || event.ctrlKey || event.metaKey) {
+    if (event.key.toLowerCase() === 'a' && multiple) {
+      const all = getItems(true).map(i => i.value) as T[];
+      commit(all);
+      event.preventDefault();
+      const last = enabledEls().at(-1);
+      if (last) changeHighlight(last);
+    }
+    return;
+  }
+  if (event.key.length !== 1) return;
+  const letter = event.key.toLowerCase();
+  const els = enabledEls();
+  const len = els.length;
+  if (len === 0) return;
+  const start = highlightedElement.value ? els.indexOf(highlightedElement.value) + 1 : 0;
+  for (let i = 0; i < len; i++) {
+    const el = els[(start + i) % len]!;
+    const text = el.textContent;
+    if (text && text.trim().toLowerCase().startsWith(letter)) {
+      changeHighlight(el);
+      return;
+    }
+  }
+}
+
+function highlightFirstItem(): void {
+  nextTick(() => {
+    const el = enabledEls()[0];
+    if (el) changeHighlight(el);
+  });
+}
+
+function onLeave(event: Event): void {
+  const el = highlightedElement.value;
+  if (el?.isConnected) previousElement.value = el;
+  highlightedElement.value = undefined;
+  emit('leave', event);
+}
+
+function onEnter(event: Event): void {
+  const entryFocusEvent = new CustomEvent('listbox.entryFocus', { bubbles: false, cancelable: true });
+  (event.currentTarget as HTMLElement | null)?.dispatchEvent(entryFocusEvent);
+  emit('entryFocus', entryFocusEvent);
+  if (entryFocusEvent.defaultPrevented) return;
+  if (previousElement.value?.isConnected) {
+    changeHighlight(previousElement.value);
+    return;
+  }
+  const els = enabledEls();
+  for (let i = 0; i < els.length; i++) {
+    if (els[i]!.dataset.state === 'checked') return changeHighlight(els[i]);
+  }
+  changeHighlight(els[0]);
+}
+
+async function onFocusOut(event: FocusEvent): Promise<void> {
+  const target = (event.relatedTarget || event.target) as HTMLElement | null;
+  await nextTick();
+  if (highlightedElement.value && currentElement.value && !currentElement.value.contains(target)) {
+    onLeave(event);
+  }
+}
+
+// localValue is always replaced on commit — no need for deep traversal.
+watch(localValue, () => {
+  if (isUserAction.value) return;
+  nextTick(() => {
+    const els = enabledEls();
+    for (let i = 0; i < els.length; i++) {
+      if (els[i]!.dataset.state === 'checked') {
+        changeHighlight(els[i], true, false);
+        return;
+      }
+    }
+  });
+}, { immediate: true });
+
+provideListboxRootContext({
+  modelValue: localValue,
+  multiple: toRef(() => multiple),
+  orientation: toRef(() => orientation),
+  direction,
+  disabled: toRef(() => disabled),
+  highlightOnHover: toRef(() => highlightOnHover),
+  selectionBehavior: toRef(() => selectionBehavior),
+  highlightedElement,
+  focusable,
+  by,
+  onValueChange,
+  isSelected,
+  changeHighlight,
+  onKeydownNavigation,
+  onKeydownEnter,
+  onKeydownTypeAhead,
+  highlightFirstItem,
+  onEnter,
+  onLeave,
+});
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :dir="direction"
+    :data-disabled="disabled ? '' : undefined"
+    @pointerleave="onLeave"
+    @focusout="onFocusOut"
+  >
+    <slot :model-value="localValue" />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/listbox/__test__/Listbox.test.ts b/vue/primitives/src/listbox/__test__/Listbox.test.ts
new file mode 100644
index 0000000..77048d1
--- /dev/null
+++ b/vue/primitives/src/listbox/__test__/Listbox.test.ts
@@ -0,0 +1,232 @@
+import {
+  ListboxContent,
+  ListboxFilter,
+  ListboxGroup,
+  ListboxGroupLabel,
+  ListboxItem,
+  ListboxItemIndicator,
+  ListboxRoot,
+
+} from '../index';
+import type { ListboxValue } from '../index';
+import { defineComponent, h, nextTick, ref } from 'vue';
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+function createListbox(
+  rootProps: Record<string, unknown> = {},
+  options: string[] = ['Apple', 'Banana', 'Cherry'],
+) {
+  return mount(
+    defineComponent({
+      setup() {
+        const value = ref(rootProps.modelValue ?? rootProps.defaultValue);
+        return () => h(
+          ListboxRoot,
+          {
+            modelValue: value.value as ListboxValue | ListboxValue[] | undefined,
+            'onUpdate:modelValue': (v: unknown) => (value.value = v),
+            ...rootProps,
+          },
+          {
+            default: () => h(ListboxContent, null, {
+              default: () => options.map(opt =>
+                h(ListboxItem, { key: opt, value: opt }, {
+                  default: () => [
+                    opt,
+                    h(ListboxItemIndicator, null, { default: () => '✓' }),
+                  ],
+                }),
+              ),
+            }),
+          },
+        );
+      },
+    }),
+    { attachTo: document.body },
+  );
+}
+
+function press(el: Element, key: string) {
+  el.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
+}
+
+describe('Listbox', () => {
+  it('renders role=listbox with options', () => {
+    const w = createListbox();
+    const list = w.find('[role="listbox"]');
+    expect(list.exists()).toBe(true);
+    expect(w.findAll('[role="option"]')).toHaveLength(3);
+    w.unmount();
+  });
+
+  it('click selects an item (single)', async () => {
+    const w = createListbox();
+    const items = w.findAll('[role="option"]');
+    await items[1]!.trigger('click');
+    await nextTick();
+    expect(items[1]!.attributes('aria-selected')).toBe('true');
+    expect(items[1]!.attributes('data-state')).toBe('checked');
+    w.unmount();
+  });
+
+  it('toggle deselects on second click in single mode', async () => {
+    const w = createListbox();
+    const items = w.findAll('[role="option"]');
+    await items[0]!.trigger('click');
+    await items[0]!.trigger('click');
+    await nextTick();
+    expect(items[0]!.attributes('data-state')).toBe('unchecked');
+    w.unmount();
+  });
+
+  it('multiple selection accumulates toggles', async () => {
+    const w = createListbox({ multiple: true });
+    const items = w.findAll('[role="option"]');
+    await items[0]!.trigger('click');
+    await items[2]!.trigger('click');
+    await nextTick();
+    expect(items[0]!.attributes('data-state')).toBe('checked');
+    expect(items[2]!.attributes('data-state')).toBe('checked');
+    expect(items[1]!.attributes('data-state')).toBe('unchecked');
+    w.unmount();
+  });
+
+  it('multiple selectionBehavior=replace keeps a single value in the array', async () => {
+    const w = createListbox({ multiple: true, selectionBehavior: 'replace' });
+    const items = w.findAll('[role="option"]');
+    await items[0]!.trigger('click');
+    await items[1]!.trigger('click');
+    await nextTick();
+    expect(items[0]!.attributes('data-state')).toBe('unchecked');
+    expect(items[1]!.attributes('data-state')).toBe('checked');
+    w.unmount();
+  });
+
+  it('ArrowDown on listbox highlights next enabled item', async () => {
+    const w = createListbox();
+    const list = w.find('[role="listbox"]').element as HTMLElement;
+    list.focus();
+    // entry focus highlights first item
+    await nextTick();
+    press(list, 'ArrowDown');
+    await nextTick();
+    const items = w.findAll('[role="option"]');
+    expect(items[1]!.attributes('data-highlighted')).toBe('');
+    w.unmount();
+  });
+
+  it('Home/End jump to first/last item', async () => {
+    const w = createListbox();
+    const list = w.find('[role="listbox"]').element as HTMLElement;
+    list.focus();
+    await nextTick();
+    press(list, 'End');
+    await nextTick();
+    const items = w.findAll('[role="option"]');
+    expect(items[2]!.attributes('data-highlighted')).toBe('');
+    press(list, 'Home');
+    await nextTick();
+    expect(items[0]!.attributes('data-highlighted')).toBe('');
+    w.unmount();
+  });
+
+  it('Enter activates the highlighted item', async () => {
+    const w = createListbox();
+    const list = w.find('[role="listbox"]').element as HTMLElement;
+    list.focus();
+    await nextTick();
+    press(list, 'End');
+    await nextTick();
+    press(list, 'Enter');
+    await nextTick();
+    const items = w.findAll('[role="option"]');
+    expect(items[2]!.attributes('data-state')).toBe('checked');
+    w.unmount();
+  });
+
+  it('typeahead jumps to first matching item by letter', async () => {
+    const w = createListbox();
+    const list = w.find('[role="listbox"]').element as HTMLElement;
+    list.focus();
+    await nextTick();
+    press(list, 'c');
+    await nextTick();
+    const items = w.findAll('[role="option"]');
+    expect(items[2]!.attributes('data-highlighted')).toBe('');
+    w.unmount();
+  });
+
+  it('ItemIndicator renders only for selected items', async () => {
+    const w = createListbox({ defaultValue: 'Banana' });
+    await nextTick();
+    const items = w.findAll('[role="option"]');
+    expect(items[0]!.text()).not.toContain('✓');
+    expect(items[1]!.text()).toContain('✓');
+    w.unmount();
+  });
+
+  it('disabled root prevents selection', async () => {
+    const w = createListbox({ disabled: true });
+    const items = w.findAll('[role="option"]');
+    await items[0]!.trigger('click');
+    await nextTick();
+    expect(items[0]!.attributes('data-state')).toBe('unchecked');
+    w.unmount();
+  });
+
+  it('group exposes role=group with aria-labelledby', () => {
+    const w = mount(
+      defineComponent({
+        setup: () => () =>
+          h(ListboxRoot, null, {
+            default: () => h(ListboxContent, null, {
+              default: () => h(ListboxGroup, null, {
+                default: () => [
+                  h(ListboxGroupLabel, null, { default: () => 'Fruits' }),
+                  h(ListboxItem, { value: 'x' }, { default: () => 'x' }),
+                ],
+              }),
+            }),
+          }),
+      }),
+      { attachTo: document.body },
+    );
+    const g = w.find('[role="group"]');
+    expect(g.exists()).toBe(true);
+    const labelledBy = g.attributes('aria-labelledby')!;
+    expect(w.find(`#${labelledBy}`).text()).toBe('Fruits');
+    w.unmount();
+  });
+
+  it('filter disables intrinsic focusability and mirrors highlight via aria-activedescendant', async () => {
+    const w = mount(
+      defineComponent({
+        setup() {
+          const q = ref('');
+          return () => h(ListboxRoot, null, {
+            default: () => [
+              h(ListboxFilter, {
+                modelValue: q.value,
+                'onUpdate:modelValue': (v: string) => (q.value = v),
+              }),
+              h(ListboxContent, null, {
+                default: () => ['a', 'b'].map(v =>
+                  h(ListboxItem, { key: v, value: v }, { default: () => v }),
+                ),
+              }),
+            ],
+          });
+        },
+      }),
+      { attachTo: document.body },
+    );
+    const input = w.find('input').element as HTMLInputElement;
+    input.focus();
+    press(input, 'ArrowDown');
+    await nextTick();
+    const firstItem = w.findAll('[role="option"]')[0]!;
+    expect(input.getAttribute('aria-activedescendant')).toBe(firstItem.attributes('id'));
+    w.unmount();
+  });
+});
diff --git a/vue/primitives/src/listbox/context.ts b/vue/primitives/src/listbox/context.ts
new file mode 100644
index 0000000..7234efc
--- /dev/null
+++ b/vue/primitives/src/listbox/context.ts
@@ -0,0 +1,53 @@
+import type { Ref, ShallowRef } from 'vue';
+import type { ListboxValue } from './utils';
+import { useContextFactory } from '@robonen/vue';
+
+export type ListboxOrientation = 'vertical' | 'horizontal';
+export type ListboxDirection = 'ltr' | 'rtl';
+export type ListboxSelectionBehavior = 'toggle' | 'replace';
+
+export interface ListboxRootContext<T extends ListboxValue = ListboxValue> {
+  modelValue: Ref<T | T[] | undefined>;
+  multiple: Ref<boolean>;
+  orientation: Ref<ListboxOrientation>;
+  direction: Ref<ListboxDirection>;
+  disabled: Ref<boolean>;
+  highlightOnHover: Ref<boolean>;
+  selectionBehavior: Ref<ListboxSelectionBehavior>;
+  highlightedElement: ShallowRef<HTMLElement | undefined>;
+  focusable: Ref<boolean>;
+  by?: string | ((a: T, b: T) => boolean);
+
+  onValueChange: (value: T) => void;
+  isSelected: (value: T) => boolean;
+  changeHighlight: (el: HTMLElement | undefined, scrollIntoView?: boolean, focus?: boolean) => void;
+  onKeydownNavigation: (event: KeyboardEvent) => void;
+  onKeydownEnter: (event: KeyboardEvent) => void;
+  onKeydownTypeAhead: (event: KeyboardEvent) => void;
+  highlightFirstItem: () => void;
+  onEnter: (event: Event) => void;
+  onLeave: (event: Event) => void;
+}
+
+export interface ListboxItemContext {
+  isSelected: Ref<boolean>;
+}
+
+export interface ListboxGroupContext {
+  id: string;
+}
+
+export const {
+  inject: useListboxRootContext,
+  provide: provideListboxRootContext,
+} = useContextFactory<ListboxRootContext<any>>('listbox');
+
+export const {
+  inject: useListboxItemContext,
+  provide: provideListboxItemContext,
+} = useContextFactory<ListboxItemContext>('listbox-item');
+
+export const {
+  inject: useListboxGroupContext,
+  provide: provideListboxGroupContext,
+} = useContextFactory<ListboxGroupContext>('listbox-group');
diff --git a/vue/primitives/src/listbox/index.ts b/vue/primitives/src/listbox/index.ts
new file mode 100644
index 0000000..c0a5981
--- /dev/null
+++ b/vue/primitives/src/listbox/index.ts
@@ -0,0 +1,32 @@
+export { default as ListboxRoot } from './ListboxRoot.vue';
+export { default as ListboxContent } from './ListboxContent.vue';
+export { default as ListboxItem } from './ListboxItem.vue';
+export { default as ListboxItemIndicator } from './ListboxItemIndicator.vue';
+export { default as ListboxGroup } from './ListboxGroup.vue';
+export { default as ListboxGroupLabel } from './ListboxGroupLabel.vue';
+export { default as ListboxFilter } from './ListboxFilter.vue';
+
+export {
+  provideListboxRootContext,
+  useListboxRootContext,
+  provideListboxItemContext,
+  useListboxItemContext,
+  provideListboxGroupContext,
+  useListboxGroupContext,
+  type ListboxRootContext,
+  type ListboxItemContext,
+  type ListboxGroupContext,
+  type ListboxOrientation,
+  type ListboxDirection,
+  type ListboxSelectionBehavior,
+} from './context';
+
+export { compare as compareListboxValues, includes as includesListboxValue, type ListboxValue } from './utils';
+
+export type { ListboxRootProps, ListboxRootEmits } from './ListboxRoot.vue';
+export type { ListboxContentProps } from './ListboxContent.vue';
+export type { ListboxItemProps, ListboxItemEmits } from './ListboxItem.vue';
+export type { ListboxItemIndicatorProps } from './ListboxItemIndicator.vue';
+export type { ListboxGroupProps } from './ListboxGroup.vue';
+export type { ListboxGroupLabelProps } from './ListboxGroupLabel.vue';
+export type { ListboxFilterProps, ListboxFilterEmits } from './ListboxFilter.vue';
diff --git a/vue/primitives/src/listbox/utils.ts b/vue/primitives/src/listbox/utils.ts
new file mode 100644
index 0000000..d708357
--- /dev/null
+++ b/vue/primitives/src/listbox/utils.ts
@@ -0,0 +1,27 @@
+export type ListboxValue = string | number | boolean | Record<string, unknown>;
+
+export function compare<T>(
+  a: T | undefined,
+  b: T | undefined,
+  by?: string | ((a: T, b: T) => boolean),
+): boolean {
+  if (a === undefined || b === undefined) return false;
+  if (by === undefined) return a === b;
+  if (typeof by === 'function') return by(a as T, b as T);
+  // string key lookup
+  return (a as any)?.[by] === (b as any)?.[by];
+}
+
+export function includes<T>(
+  value: T | T[] | undefined,
+  current: T,
+  by?: string | ((a: T, b: T) => boolean),
+): boolean {
+  if (value === undefined) return false;
+  if (!Array.isArray(value)) return compare(value, current, by);
+  // manual loop avoids the per-call closure allocation of .some()
+  for (const v of value) {
+    if (compare(v, current, by)) return true;
+  }
+  return false;
+}
diff --git a/vue/primitives/src/menu/MenuAnchor.vue b/vue/primitives/src/menu/MenuAnchor.vue
new file mode 100644
index 0000000..0a3f9ae
--- /dev/null
+++ b/vue/primitives/src/menu/MenuAnchor.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { PopperAnchorProps } from '../popper';
+
+export interface MenuAnchorProps extends PopperAnchorProps {}
+</script>
+
+<script setup lang="ts">
+import { PopperAnchor } from '../popper';
+
+const props = defineProps<MenuAnchorProps>();
+</script>
+
+<template>
+  <PopperAnchor v-bind="props">
+    <slot />
+  </PopperAnchor>
+</template>
diff --git a/vue/primitives/src/menu/MenuArrow.vue b/vue/primitives/src/menu/MenuArrow.vue
new file mode 100644
index 0000000..13d62f7
--- /dev/null
+++ b/vue/primitives/src/menu/MenuArrow.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { PopperArrowProps } from '../popper';
+
+export interface MenuArrowProps extends PopperArrowProps {}
+</script>
+
+<script setup lang="ts">
+import { PopperArrow } from '../popper';
+
+const props = defineProps<MenuArrowProps>();
+</script>
+
+<template>
+  <PopperArrow v-bind="props">
+    <slot />
+  </PopperArrow>
+</template>
diff --git a/vue/primitives/src/menu/MenuCheckboxItem.vue b/vue/primitives/src/menu/MenuCheckboxItem.vue
new file mode 100644
index 0000000..a91cfc8
--- /dev/null
+++ b/vue/primitives/src/menu/MenuCheckboxItem.vue
@@ -0,0 +1,57 @@
+<script lang="ts">
+import type { MenuItemImplEmits, MenuItemImplProps } from './MenuItemImpl.vue';
+import type { CheckedState } from './types';
+
+export interface MenuCheckboxItemProps extends MenuItemImplProps {
+  checked?: CheckedState;
+  defaultChecked?: CheckedState;
+}
+export interface MenuCheckboxItemEmits extends MenuItemImplEmits {
+  'update:checked': [value: CheckedState];
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { provideMenuItemIndicatorContext, useMenuRootContext } from './context';
+import MenuItemImpl from './MenuItemImpl.vue';
+import { ITEM_SELECT, getCheckedState, isIndeterminate } from './utils';
+
+const {
+  checked: checkedProp,
+  defaultChecked = false,
+  ...itemProps
+} = defineProps<MenuCheckboxItemProps>();
+
+const emit = defineEmits<MenuCheckboxItemEmits>();
+const rootCtx = useMenuRootContext();
+
+const local = ref<CheckedState>(defaultChecked);
+const checkedState = computed<CheckedState>(() => checkedProp !== undefined ? checkedProp : local.value);
+
+provideMenuItemIndicatorContext({ checkedState });
+
+function handleSelect(event: Event) {
+  const next: CheckedState = isIndeterminate(checkedState.value) ? true : !checkedState.value;
+  local.value = next;
+  emit('update:checked', next);
+
+  const selectEvent = new CustomEvent(ITEM_SELECT, { bubbles: true, cancelable: true })
+  ;(event.currentTarget as HTMLElement).dispatchEvent(selectEvent);
+  emit('select', event);
+  if (!selectEvent.defaultPrevented) rootCtx.onClose();
+}
+</script>
+
+<template>
+  <MenuItemImpl
+    v-bind="itemProps"
+    role="menuitemcheckbox"
+    :aria-checked="isIndeterminate(checkedState) ? 'mixed' : checkedState"
+    :data-state="getCheckedState(checkedState)"
+    @select="handleSelect"
+  >
+    <slot />
+  </MenuItemImpl>
+</template>
diff --git a/vue/primitives/src/menu/MenuContent.vue b/vue/primitives/src/menu/MenuContent.vue
new file mode 100644
index 0000000..1ff4dd6
--- /dev/null
+++ b/vue/primitives/src/menu/MenuContent.vue
@@ -0,0 +1,54 @@
+<script lang="ts">
+import type { MenuContentImplEmits, MenuContentImplProps } from './MenuContentImpl.vue';
+
+export interface MenuContentProps extends MenuContentImplProps {
+  forceMount?: boolean;
+}
+export type MenuContentEmits = MenuContentImplEmits;
+</script>
+
+<script setup lang="ts">
+import { Presence } from '../presence';
+import { useMenuContext, useMenuRootContext } from './context';
+import MenuRootContentModal from './MenuRootContentModal.vue';
+import MenuRootContentNonModal from './MenuRootContentNonModal.vue';
+
+const { forceMount = false, ...contentProps } = defineProps<MenuContentProps>();
+const emit = defineEmits<MenuContentEmits>();
+
+const menuCtx = useMenuContext();
+const rootCtx = useMenuRootContext();
+</script>
+
+<template>
+  <Presence :present="forceMount || menuCtx.open.value">
+    <MenuRootContentModal
+      v-if="rootCtx.modal.value"
+      v-bind="contentProps"
+      @close-auto-focus="emit('closeAutoFocus', $event)"
+      @escape-key-down="emit('escapeKeyDown', $event)"
+      @pointer-down-outside="emit('pointerDownOutside', $event)"
+      @focus-outside="emit('focusOutside', $event)"
+      @interact-outside="emit('interactOutside', $event)"
+      @dismiss="emit('dismiss')"
+      @entry-focus="emit('entryFocus', $event)"
+      @open-auto-focus="emit('openAutoFocus', $event)"
+    >
+      <slot />
+    </MenuRootContentModal>
+    <MenuRootContentNonModal
+      v-else
+      v-bind="contentProps"
+      @close-auto-focus="emit('closeAutoFocus', $event)"
+      @escape-key-down="emit('escapeKeyDown', $event)"
+      @pointer-down-outside="emit('pointerDownOutside', $event)"
+      @focus-outside="emit('focusOutside', $event)"
+      @interact-outside="emit('interactOutside', $event)"
+      @dismiss="emit('dismiss')"
+      @entry-focus="emit('entryFocus', $event)"
+      @open-auto-focus="emit('openAutoFocus', $event)"
+    >
+      <slot />
+    </MenuRootContentNonModal>
+  </Presence>
+</template>
diff --git a/vue/primitives/src/menu/MenuContentImpl.vue b/vue/primitives/src/menu/MenuContentImpl.vue
new file mode 100644
index 0000000..74cca31
--- /dev/null
+++ b/vue/primitives/src/menu/MenuContentImpl.vue
@@ -0,0 +1,183 @@
+<script lang="ts">
+import type { PopperContentProps } from '../popper';
+import type { PrimitiveProps } from '../primitive';
+
+export interface MenuContentImplProps extends PrimitiveProps, Pick<PopperContentProps,
+  | 'side' | 'sideOffset' | 'sideFlip' | 'align' | 'alignOffset' | 'alignFlip'
+  | 'avoidCollisions' | 'collisionBoundary' | 'collisionPadding' | 'arrowPadding'
+  | 'sticky' | 'hideWhenDetached' | 'positionStrategy' | 'updatePositionStrategy'
+  | 'reference' | 'prioritizePosition'
+> {
+  loop?: boolean;
+  trapFocus?: boolean;
+  disableOutsidePointerEvents?: boolean;
+}
+
+export interface MenuContentImplEmits {
+  closeAutoFocus: [event: Event];
+  escapeKeyDown: [event: KeyboardEvent];
+  pointerDownOutside: [event: PointerEvent | MouseEvent];
+  focusOutside: [event: FocusEvent];
+  interactOutside: [event: PointerEvent | MouseEvent | FocusEvent];
+  dismiss: [];
+  entryFocus: [event: Event];
+  openAutoFocus: [event: Event];
+}
+</script>
+
+<script setup lang="ts">
+import { onScopeDispose, ref } from 'vue';
+
+import { DismissableLayer } from '../dismissable-layer';
+import { FocusScope } from '../focus-scope';
+import { PopperContent } from '../popper';
+import { RovingFocusGroup } from '../roving-focus';
+import { useForwardExpose } from '@robonen/vue';
+import { provideMenuContentContext, useMenuContext, useMenuRootContext } from './context';
+import { FIRST_LAST_KEYS, getNextMatch, getOpenState, isPointerInGraceArea } from './utils';
+
+const {
+  loop = false,
+  trapFocus = false,
+  disableOutsidePointerEvents = false,
+  side = 'bottom',
+  sideOffset = 0,
+  align = 'start',
+  as = 'div',
+  ...popperProps
+} = defineProps<MenuContentImplProps>();
+
+const emit = defineEmits<MenuContentImplEmits>();
+
+const menuCtx = useMenuContext();
+const rootCtx = useMenuRootContext();
+const { forwardRef, currentElement: contentElement } = useForwardExpose();
+
+const searchRef = ref('');
+let searchTimer: ReturnType<typeof setTimeout> | undefined;
+
+function clearSearch() {
+  clearTimeout(searchTimer);
+  searchRef.value = '';
+}
+
+onScopeDispose(clearSearch);
+
+const pointerGraceTimerRef = ref<number>(0);
+const pointerGraceIntentRef = ref<{ area: Array<{ x: number; y: number }>; side: 'left' | 'right' } | null>(null);
+
+provideMenuContentContext({
+  onItemEnter: (event) => {
+    if (pointerGraceIntentRef.value) {
+      return isPointerInGraceArea(event, pointerGraceIntentRef.value.area);
+    }
+    return false;
+  },
+  onItemLeave: (_event) => {
+    contentElement.value?.focus({ preventScroll: true });
+  },
+  onTriggerLeave: (event) => {
+    if (pointerGraceIntentRef.value) {
+      return isPointerInGraceArea(event, pointerGraceIntentRef.value.area);
+    }
+    return false;
+  },
+  searchRef,
+  pointerGraceTimerRef,
+  onPointerGraceIntentChange: (intent) => {
+    pointerGraceIntentRef.value = intent;
+  },
+});
+
+function handleMountAutoFocus(event: Event) {
+  event.preventDefault();
+  if (rootCtx.isUsingKeyboardRef.value) {
+    contentElement.value?.focus({ preventScroll: true });
+  }
+  emit('openAutoFocus', event);
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+  const isCharKey = event.key.length === 1 && !event.ctrlKey && !event.altKey && !event.metaKey;
+  if (isCharKey) {
+    clearTimeout(searchTimer);
+    searchRef.value += event.key;
+    const content = contentElement.value;
+    if (!content) return;
+    const items = Array.from(
+      content.querySelectorAll<HTMLElement>('[data-primitives-menu-item]:not([data-disabled])'),
+    );
+    const currentItem = content.querySelector<HTMLElement>('[data-primitives-menu-item][data-highlighted]');
+    const match = getNextMatch(items, searchRef.value, currentItem);
+    if (match) match.focus({ preventScroll: true });
+    searchTimer = setTimeout(clearSearch, 1000);
+    event.stopPropagation();
+  }
+
+  if (FIRST_LAST_KEYS.includes(event.key)) {
+    event.stopPropagation();
+  }
+}
+
+function handleBlur(event: FocusEvent) {
+  const content = contentElement.value;
+  if (!content) return;
+  if (!content.contains(event.relatedTarget as Node)) {
+    clearSearch();
+  }
+}
+</script>
+
+<template>
+  <FocusScope
+    as="template"
+    :trapped="trapFocus"
+    :loop="loop"
+    @mount-auto-focus="handleMountAutoFocus"
+    @unmount-auto-focus="emit('closeAutoFocus', $event)"
+  >
+    <DismissableLayer
+      as="template"
+      :disable-outside-pointer-events="disableOutsidePointerEvents"
+      @escape-key-down="emit('escapeKeyDown', $event)"
+      @pointer-down-outside="emit('pointerDownOutside', $event)"
+      @focus-outside="emit('focusOutside', $event)"
+      @interact-outside="emit('interactOutside', $event)"
+      @dismiss="emit('dismiss')"
+    >
+      <RovingFocusGroup
+        as="template"
+        orientation="vertical"
+        :dir="rootCtx.dir.value"
+        :loop="loop"
+        @entry-focus="(event: Event) => {
+          emit('entryFocus', event)
+          if (!rootCtx.isUsingKeyboardRef.value) event.preventDefault()
+        }"
+      >
+        <PopperContent
+          :ref="forwardRef"
+          :as="as"
+          role="menu"
+          aria-orientation="vertical"
+          data-primitives-menu-content=""
+          :data-state="getOpenState(menuCtx.open.value)"
+          :dir="rootCtx.dir.value"
+          :side="side"
+          :side-offset="sideOffset"
+          :align="align"
+          :style="{
+            '--primitives-menu-content-transform-origin': 'var(--popper-transform-origin)',
+            '--primitives-menu-content-available-width': 'var(--popper-available-width)',
+            '--primitives-menu-content-available-height': 'var(--popper-available-height)',
+          }"
+          v-bind="popperProps"
+          @keydown="handleKeyDown"
+          @blur="handleBlur"
+        >
+          <slot />
+        </PopperContent>
+      </RovingFocusGroup>
+    </DismissableLayer>
+  </FocusScope>
+</template>
diff --git a/vue/primitives/src/menu/MenuGroup.vue b/vue/primitives/src/menu/MenuGroup.vue
new file mode 100644
index 0000000..c7e636b
--- /dev/null
+++ b/vue/primitives/src/menu/MenuGroup.vue
@@ -0,0 +1,21 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface MenuGroupProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { useId } from '../config-provider';
+import { Primitive } from '../primitive';
+import { provideMenuGroupContext } from './context';
+
+const { as = 'div' } = defineProps<MenuGroupProps>();
+const id = useId(undefined, 'menu-group');
+provideMenuGroupContext({ id: id.value });
+</script>
+
+<template>
+  <Primitive :as="as" role="group" :id="id">
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/menu/MenuItem.vue b/vue/primitives/src/menu/MenuItem.vue
new file mode 100644
index 0000000..97bc355
--- /dev/null
+++ b/vue/primitives/src/menu/MenuItem.vue
@@ -0,0 +1,32 @@
+<script lang="ts">
+import type { MenuItemImplEmits, MenuItemImplProps } from './MenuItemImpl.vue';
+
+export interface MenuItemProps extends MenuItemImplProps {}
+export type MenuItemEmits = MenuItemImplEmits;
+</script>
+
+<script setup lang="ts">
+import { useMenuRootContext } from './context';
+import MenuItemImpl from './MenuItemImpl.vue';
+import { ITEM_SELECT } from './utils';
+
+const props = defineProps<MenuItemProps>();
+const emit = defineEmits<MenuItemEmits>();
+
+const rootCtx = useMenuRootContext();
+
+function handleSelect(event: Event) {
+  const selectEvent = new CustomEvent(ITEM_SELECT, { bubbles: true, cancelable: true })
+  ;(event.currentTarget as HTMLElement).dispatchEvent(selectEvent);
+  emit('select', event);
+  if (!selectEvent.defaultPrevented) {
+    rootCtx.onClose();
+  }
+}
+</script>
+
+<template>
+  <MenuItemImpl v-bind="props" @select="handleSelect">
+    <slot />
+  </MenuItemImpl>
+</template>
diff --git a/vue/primitives/src/menu/MenuItemImpl.vue b/vue/primitives/src/menu/MenuItemImpl.vue
new file mode 100644
index 0000000..61383c7
--- /dev/null
+++ b/vue/primitives/src/menu/MenuItemImpl.vue
@@ -0,0 +1,94 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface MenuItemImplProps extends PrimitiveProps {
+  disabled?: boolean;
+  textValue?: string;
+}
+export interface MenuItemImplEmits {
+  select: [event: Event];
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, shallowRef } from 'vue';
+
+import { RovingFocusItem } from '../roving-focus';
+import { Primitive } from '../primitive';
+import { useMenuContentContext } from './context';
+
+const {
+  disabled = false,
+  textValue: textValueProp,
+  as = 'div',
+} = defineProps<MenuItemImplProps>();
+
+const emit = defineEmits<MenuItemImplEmits>();
+
+const contentCtx = useMenuContentContext();
+
+const itemRef = shallowRef<HTMLElement | null>(null);
+const isHighlighted = ref(false);
+
+const textValue = computed(() => textValueProp ?? itemRef.value?.textContent?.trim() ?? '');
+
+function handlePointerMove(event: PointerEvent) {
+  if (event.pointerType === 'touch') return;
+  if (disabled) return;
+  if (contentCtx.onItemEnter(event)) return;
+  const item = event.currentTarget as HTMLElement;
+  item.focus({ preventScroll: true });
+}
+
+function handlePointerLeave(event: PointerEvent) {
+  if (event.pointerType === 'touch') return;
+  if (disabled) return;
+  contentCtx.onItemLeave(event);
+}
+
+function handleFocus() {
+  isHighlighted.value = true;
+}
+
+function handleBlur() {
+  isHighlighted.value = false;
+}
+
+function handleClick(event: MouseEvent) {
+  if (disabled) return;
+  emit('select', event);
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+  if (disabled) return;
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault();
+    const el = event.currentTarget as HTMLElement;
+    el.click();
+  }
+}
+</script>
+
+<template>
+  <RovingFocusItem :focusable="!disabled" :active="isHighlighted">
+    <Primitive
+      :ref="(el: unknown) => { itemRef = el as HTMLElement | null }"
+      :as="as"
+      role="menuitem"
+      data-primitives-menu-item=""
+      :data-primitive-menu-item-text-value="textValue"
+      :data-highlighted="isHighlighted ? '' : undefined"
+      :data-disabled="disabled ? '' : undefined"
+      :aria-disabled="disabled || undefined"
+      :tabindex="isHighlighted ? 0 : -1"
+      @pointermove="handlePointerMove"
+      @pointerleave="handlePointerLeave"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @click="handleClick"
+      @keydown="handleKeyDown"
+    >
+      <slot />
+    </Primitive>
+  </RovingFocusItem>
+</template>
diff --git a/vue/primitives/src/menu/MenuItemIndicator.vue b/vue/primitives/src/menu/MenuItemIndicator.vue
new file mode 100644
index 0000000..e92c4d0
--- /dev/null
+++ b/vue/primitives/src/menu/MenuItemIndicator.vue
@@ -0,0 +1,31 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface MenuItemIndicatorProps extends PrimitiveProps {
+  forceMount?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { Presence } from '../presence';
+import { Primitive } from '../primitive';
+import { useMenuItemIndicatorContext } from './context';
+import { getCheckedState, isIndeterminate } from './utils';
+
+const { as = 'span', forceMount = false } = defineProps<MenuItemIndicatorProps>();
+const ctx = useMenuItemIndicatorContext();
+const isPresent = computed(() => ctx.checkedState.value === true || isIndeterminate(ctx.checkedState.value));
+</script>
+
+<template>
+  <Presence :present="forceMount || isPresent">
+    <Primitive
+      :as="as"
+      :data-state="getCheckedState(ctx.checkedState.value)"
+    >
+      <slot />
+    </Primitive>
+  </Presence>
+</template>
diff --git a/vue/primitives/src/menu/MenuLabel.vue b/vue/primitives/src/menu/MenuLabel.vue
new file mode 100644
index 0000000..cefc532
--- /dev/null
+++ b/vue/primitives/src/menu/MenuLabel.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface MenuLabelProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+
+const { as = 'div' } = defineProps<MenuLabelProps>();
+</script>
+
+<template>
+  <Primitive :as="as">
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/menu/MenuPortal.vue b/vue/primitives/src/menu/MenuPortal.vue
new file mode 100644
index 0000000..f27d2d6
--- /dev/null
+++ b/vue/primitives/src/menu/MenuPortal.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { PortalProps } from '../teleport';
+
+export interface MenuPortalProps extends PortalProps {}
+</script>
+
+<script setup lang="ts">
+import { Portal } from '../teleport';
+
+const { to, defer, disabled } = defineProps<MenuPortalProps>();
+</script>
+
+<template>
+  <Portal :to="to" :defer="defer" :disabled="disabled">
+    <slot />
+  </Portal>
+</template>
diff --git a/vue/primitives/src/menu/MenuRadioGroup.vue b/vue/primitives/src/menu/MenuRadioGroup.vue
new file mode 100644
index 0000000..07b5793
--- /dev/null
+++ b/vue/primitives/src/menu/MenuRadioGroup.vue
@@ -0,0 +1,38 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface MenuRadioGroupProps extends PrimitiveProps {
+  modelValue?: string;
+  defaultValue?: string;
+}
+export interface MenuRadioGroupEmits {
+  'update:modelValue': [value: string];
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { Primitive } from '../primitive';
+import { provideMenuRadioGroupContext } from './context';
+
+const { modelValue, defaultValue, as = 'div' } = defineProps<MenuRadioGroupProps>();
+const emit = defineEmits<MenuRadioGroupEmits>();
+
+const local = ref(defaultValue);
+const value = computed(() => modelValue !== undefined ? modelValue : local.value);
+
+provideMenuRadioGroupContext({
+  modelValue: value,
+  onValueChange: (v) => {
+    local.value = v;
+    emit('update:modelValue', v);
+  },
+});
+</script>
+
+<template>
+  <Primitive :as="as" role="group">
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/menu/MenuRadioItem.vue b/vue/primitives/src/menu/MenuRadioItem.vue
new file mode 100644
index 0000000..89f258e
--- /dev/null
+++ b/vue/primitives/src/menu/MenuRadioItem.vue
@@ -0,0 +1,45 @@
+<script lang="ts">
+import type { MenuItemImplEmits, MenuItemImplProps } from './MenuItemImpl.vue';
+
+export interface MenuRadioItemProps extends MenuItemImplProps {
+  value: string;
+}
+export type MenuRadioItemEmits = MenuItemImplEmits;
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { provideMenuItemIndicatorContext, useMenuRadioGroupContext, useMenuRootContext } from './context';
+import MenuItemImpl from './MenuItemImpl.vue';
+import { ITEM_SELECT, getCheckedState } from './utils';
+
+const { value, ...itemProps } = defineProps<MenuRadioItemProps>();
+const emit = defineEmits<MenuRadioItemEmits>();
+
+const radioCtx = useMenuRadioGroupContext();
+const rootCtx = useMenuRootContext();
+const checkedState = computed(() => radioCtx.modelValue.value === value);
+
+provideMenuItemIndicatorContext({ checkedState });
+
+function handleSelect(event: Event) {
+  radioCtx.onValueChange(value);
+  const selectEvent = new CustomEvent(ITEM_SELECT, { bubbles: true, cancelable: true })
+  ;(event.currentTarget as HTMLElement).dispatchEvent(selectEvent);
+  emit('select', event);
+  if (!selectEvent.defaultPrevented) rootCtx.onClose();
+}
+</script>
+
+<template>
+  <MenuItemImpl
+    v-bind="itemProps"
+    role="menuitemradio"
+    :aria-checked="checkedState"
+    :data-state="getCheckedState(checkedState)"
+    @select="handleSelect"
+  >
+    <slot />
+  </MenuItemImpl>
+</template>
diff --git a/vue/primitives/src/menu/MenuRoot.vue b/vue/primitives/src/menu/MenuRoot.vue
new file mode 100644
index 0000000..f845355
--- /dev/null
+++ b/vue/primitives/src/menu/MenuRoot.vue
@@ -0,0 +1,57 @@
+<script lang="ts">
+import type { Direction } from '../config-provider';
+
+export interface MenuRootProps {
+  open?: boolean;
+  dir?: Direction;
+  modal?: boolean;
+}
+export interface MenuRootEmits {
+  'update:open': [value: boolean];
+}
+</script>
+
+<script setup lang="ts">
+import { shallowRef, toRef } from 'vue';
+
+import { useConfig } from '../config-provider';
+import { PopperRoot } from '../popper';
+import { provideMenuContext, provideMenuRootContext } from './context';
+import { useIsUsingKeyboard } from './useIsUsingKeyboard';
+
+const {
+  open = false,
+  dir: dirProp,
+  modal = true,
+} = defineProps<MenuRootProps>();
+
+const emit = defineEmits<MenuRootEmits>();
+
+defineSlots<{ default?: () => unknown }>();
+
+const config = useConfig();
+const dirRef = toRef(() => dirProp ?? config.dir.value);
+const isUsingKeyboardRef = useIsUsingKeyboard();
+const content = shallowRef<HTMLElement | null>(null);
+const openRef = toRef(() => open);
+
+provideMenuContext({
+  open: openRef,
+  onOpenChange: v => emit('update:open', v),
+  content,
+  onContentChange: (el) => { content.value = el; },
+});
+
+provideMenuRootContext({
+  onClose: () => emit('update:open', false),
+  dir: dirRef,
+  isUsingKeyboardRef,
+  modal: toRef(() => modal),
+});
+</script>
+
+<template>
+  <PopperRoot>
+    <slot />
+  </PopperRoot>
+</template>
diff --git a/vue/primitives/src/menu/MenuRootContentModal.vue b/vue/primitives/src/menu/MenuRootContentModal.vue
new file mode 100644
index 0000000..140203b
--- /dev/null
+++ b/vue/primitives/src/menu/MenuRootContentModal.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { MenuContentImplEmits, MenuContentImplProps } from './MenuContentImpl.vue';
+
+import { shallowRef, watchEffect } from 'vue';
+
+import { useBodyScrollLock, useFocusGuard } from '@robonen/vue';
+import { useHideOthers } from '../utils/useHideOthers';
+import MenuContentImpl from './MenuContentImpl.vue';
+import { useMenuContext } from './context';
+
+const props = defineProps<MenuContentImplProps>();
+const emit = defineEmits<MenuContentImplEmits>();
+
+const menuCtx = useMenuContext();
+const contentRef = shallowRef<HTMLElement | null>(null);
+
+watchEffect(() => menuCtx.onContentChange(contentRef.value));
+
+useFocusGuard();
+useBodyScrollLock();
+useHideOthers(contentRef);
+</script>
+
+<template>
+  <MenuContentImpl
+    v-bind="props"
+    :ref="(comp: any) => { contentRef = comp?.$el ?? null }"
+    :trap-focus="menuCtx.open.value"
+    :disable-outside-pointer-events="menuCtx.open.value"
+    @close-auto-focus="emit('closeAutoFocus', $event)"
+    @escape-key-down="emit('escapeKeyDown', $event)"
+    @pointer-down-outside="emit('pointerDownOutside', $event)"
+    @focus-outside="emit('focusOutside', $event)"
+    @interact-outside="emit('interactOutside', $event)"
+    @dismiss="emit('dismiss')"
+    @entry-focus="emit('entryFocus', $event)"
+    @open-auto-focus="emit('openAutoFocus', $event)"
+  >
+    <slot />
+  </MenuContentImpl>
+</template>
diff --git a/vue/primitives/src/menu/MenuRootContentNonModal.vue b/vue/primitives/src/menu/MenuRootContentNonModal.vue
new file mode 100644
index 0000000..24bf5f2
--- /dev/null
+++ b/vue/primitives/src/menu/MenuRootContentNonModal.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { MenuContentImplEmits, MenuContentImplProps } from './MenuContentImpl.vue';
+
+import { shallowRef, watchEffect } from 'vue';
+
+import MenuContentImpl from './MenuContentImpl.vue';
+import { useMenuContext } from './context';
+
+const props = defineProps<MenuContentImplProps>();
+const emit = defineEmits<MenuContentImplEmits>();
+const menuCtx = useMenuContext();
+const contentRef = shallowRef<HTMLElement | null>(null);
+
+watchEffect(() => menuCtx.onContentChange(contentRef.value));
+</script>
+
+<template>
+  <MenuContentImpl
+    v-bind="props"
+    :ref="(comp: any) => { contentRef = comp?.$el ?? null }"
+    :trap-focus="false"
+    :disable-outside-pointer-events="false"
+    @close-auto-focus="emit('closeAutoFocus', $event)"
+    @escape-key-down="emit('escapeKeyDown', $event)"
+    @pointer-down-outside="emit('pointerDownOutside', $event)"
+    @focus-outside="emit('focusOutside', $event)"
+    @interact-outside="emit('interactOutside', $event)"
+    @dismiss="emit('dismiss')"
+    @entry-focus="emit('entryFocus', $event)"
+    @open-auto-focus="emit('openAutoFocus', $event)"
+  >
+    <slot />
+  </MenuContentImpl>
+</template>
diff --git a/vue/primitives/src/menu/MenuSeparator.vue b/vue/primitives/src/menu/MenuSeparator.vue
new file mode 100644
index 0000000..ef40b82
--- /dev/null
+++ b/vue/primitives/src/menu/MenuSeparator.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface MenuSeparatorProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+
+const { as = 'div' } = defineProps<MenuSeparatorProps>();
+</script>
+
+<template>
+  <Primitive :as="as" role="separator" aria-orientation="horizontal">
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/menu/MenuSub.vue b/vue/primitives/src/menu/MenuSub.vue
new file mode 100644
index 0000000..5f7c732
--- /dev/null
+++ b/vue/primitives/src/menu/MenuSub.vue
@@ -0,0 +1,45 @@
+<script lang="ts">
+export interface MenuSubProps {
+  open?: boolean;
+}
+export interface MenuSubEmits {
+  'update:open': [value: boolean];
+}
+</script>
+
+<script setup lang="ts">
+import { shallowRef, toRef } from 'vue';
+
+import { useId } from '../config-provider';
+import { PopperRoot } from '../popper';
+import { provideMenuContext, provideMenuSubContext } from './context';
+
+const { open = false } = defineProps<MenuSubProps>();
+const emit = defineEmits<MenuSubEmits>();
+defineSlots<{ default?: (props: { open: boolean }) => unknown }>();
+
+const openRef = toRef(() => open);
+const trigger = shallowRef<HTMLElement | null>(null);
+const contentId = useId(undefined, 'menu-sub-content');
+const triggerId = useId(undefined, 'menu-sub-trigger');
+
+provideMenuContext({
+  open: openRef,
+  onOpenChange: v => emit('update:open', v),
+  content: shallowRef<HTMLElement | null>(null),
+  onContentChange: () => {},
+});
+
+provideMenuSubContext({
+  contentId,
+  triggerId,
+  trigger,
+  onTriggerChange: (el) => { trigger.value = el; },
+});
+</script>
+
+<template>
+  <PopperRoot>
+    <slot :open="open" />
+  </PopperRoot>
+</template>
diff --git a/vue/primitives/src/menu/MenuSubContent.vue b/vue/primitives/src/menu/MenuSubContent.vue
new file mode 100644
index 0000000..889887d
--- /dev/null
+++ b/vue/primitives/src/menu/MenuSubContent.vue
@@ -0,0 +1,53 @@
+<script lang="ts">
+import type { MenuContentImplEmits, MenuContentImplProps } from './MenuContentImpl.vue';
+
+export interface MenuSubContentProps extends MenuContentImplProps {
+  forceMount?: boolean;
+}
+export type MenuSubContentEmits = MenuContentImplEmits;
+</script>
+
+<script setup lang="ts">
+import { Presence } from '../presence';
+import { useMenuContext, useMenuRootContext, useMenuSubContext } from './context';
+import MenuContentImpl from './MenuContentImpl.vue';
+
+const { forceMount = false, ...contentProps } = defineProps<MenuSubContentProps>();
+const emit = defineEmits<MenuSubContentEmits>();
+
+const menuCtx = useMenuContext();
+const subCtx = useMenuSubContext();
+const rootCtx = useMenuRootContext();
+</script>
+
+<template>
+  <Presence :present="forceMount || menuCtx.open.value">
+    <MenuContentImpl
+      :id="subCtx.contentId.value"
+      v-bind="contentProps"
+      :aria-labelledby="subCtx.triggerId.value"
+      :trap-focus="false"
+      :disable-outside-pointer-events="false"
+      :side="rootCtx.dir.value === 'rtl' ? 'left' : 'right'"
+      align="start"
+      :side-offset="2"
+      :align-offset="-5"
+      @close-auto-focus="(event: Event) => { event.preventDefault(); emit('closeAutoFocus', event) }"
+      @escape-key-down="(event: KeyboardEvent) => {
+        emit('escapeKeyDown', event)
+        menuCtx.onOpenChange(false)
+      }"
+      @pointer-down-outside="emit('pointerDownOutside', $event)"
+      @focus-outside="(event: FocusEvent) => {
+        if (subCtx.trigger.value?.contains(event.target as Node)) event.preventDefault()
+        emit('focusOutside', event)
+      }"
+      @interact-outside="emit('interactOutside', $event)"
+      @dismiss="menuCtx.onOpenChange(false)"
+      @entry-focus="emit('entryFocus', $event)"
+      @open-auto-focus="emit('openAutoFocus', $event)"
+    >
+      <slot />
+    </MenuContentImpl>
+  </Presence>
+</template>
diff --git a/vue/primitives/src/menu/MenuSubTrigger.vue b/vue/primitives/src/menu/MenuSubTrigger.vue
new file mode 100644
index 0000000..96ab83f
--- /dev/null
+++ b/vue/primitives/src/menu/MenuSubTrigger.vue
@@ -0,0 +1,83 @@
+<script lang="ts">
+import type { MenuItemImplProps } from './MenuItemImpl.vue';
+
+export interface MenuSubTriggerProps extends MenuItemImplProps {}
+</script>
+
+<script setup lang="ts">
+import { PopperAnchor } from '../popper';
+import { useMenuContentContext, useMenuContext, useMenuRootContext, useMenuSubContext } from './context';
+import MenuItemImpl from './MenuItemImpl.vue';
+import { SUB_CLOSE_KEYS, SUB_OPEN_KEYS, getOpenState } from './utils';
+
+const props = defineProps<MenuSubTriggerProps>();
+
+const menuCtx = useMenuContext();
+const subCtx = useMenuSubContext();
+const rootCtx = useMenuRootContext();
+const contentCtx = useMenuContentContext();
+
+let openTimer: ReturnType<typeof setTimeout> | undefined;
+
+function open() {
+  clearTimeout(openTimer);
+  menuCtx.onOpenChange(true);
+}
+
+function close() {
+  clearTimeout(openTimer);
+  menuCtx.onOpenChange(false);
+}
+
+function handlePointerMove(event: PointerEvent) {
+  if (event.pointerType === 'touch') return;
+  if (props.disabled) return;
+  if (contentCtx.onItemEnter(event)) return;
+  if (!menuCtx.open.value) {
+    clearTimeout(openTimer);
+    openTimer = setTimeout(() => menuCtx.onOpenChange(true), 100);
+  }
+}
+
+function handlePointerLeave(event: PointerEvent) {
+  if (event.pointerType === 'touch') return;
+  clearTimeout(openTimer);
+  if (contentCtx.onTriggerLeave(event)) return;
+  close();
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+  if (props.disabled) return;
+  const openKeys = SUB_OPEN_KEYS[rootCtx.dir.value]!;
+  const closeKeys = SUB_CLOSE_KEYS[rootCtx.dir.value]!;
+  if (openKeys.includes(event.key)) {
+    event.preventDefault();
+    open();
+  }
+  if (closeKeys.includes(event.key)) {
+    event.preventDefault();
+    close();
+  }
+}
+</script>
+
+<template>
+  <PopperAnchor>
+    <MenuItemImpl
+      v-bind="props"
+      :id="subCtx.triggerId.value"
+      :ref="(el: unknown) => subCtx.onTriggerChange((el as any)?.$el ?? null)"
+      aria-haspopup="menu"
+      :aria-expanded="menuCtx.open.value"
+      :aria-controls="subCtx.contentId.value"
+      :data-state="getOpenState(menuCtx.open.value)"
+      role="menuitem"
+      @pointermove="handlePointerMove"
+      @pointerleave="handlePointerLeave"
+      @keydown="handleKeyDown"
+      @select.prevent
+    >
+      <slot />
+    </MenuItemImpl>
+  </PopperAnchor>
+</template>
diff --git a/vue/primitives/src/menu/context.ts b/vue/primitives/src/menu/context.ts
new file mode 100644
index 0000000..aebb2f1
--- /dev/null
+++ b/vue/primitives/src/menu/context.ts
@@ -0,0 +1,62 @@
+import type { CheckedState } from './types';
+import type { ComputedRef, Ref, ShallowRef } from 'vue';
+import type { Direction } from '../config-provider';
+
+import { useContextFactory } from '@robonen/vue';
+
+export interface MenuContext {
+  open: Ref<boolean>;
+  onOpenChange: (open: boolean) => void;
+  content: Ref<HTMLElement | null>;
+  onContentChange: (el: HTMLElement | null) => void;
+}
+export const { inject: useMenuContext, provide: provideMenuContext }
+  = useContextFactory<MenuContext>('MenuContext');
+
+export interface MenuRootContext {
+  onClose: () => void;
+  dir: Ref<Direction>;
+  isUsingKeyboardRef: Ref<boolean>;
+  modal: Ref<boolean>;
+}
+export const { inject: useMenuRootContext, provide: provideMenuRootContext }
+  = useContextFactory<MenuRootContext>('MenuRootContext');
+
+export interface MenuContentContext {
+  onItemEnter: (event: PointerEvent) => boolean;
+  onItemLeave: (event: PointerEvent) => void;
+  onTriggerLeave: (event: PointerEvent) => boolean;
+  searchRef: Ref<string>;
+  pointerGraceTimerRef: Ref<number>;
+  onPointerGraceIntentChange: (intent: { area: Array<{ x: number; y: number }>; side: 'left' | 'right' } | null) => void;
+}
+export const { inject: useMenuContentContext, provide: provideMenuContentContext }
+  = useContextFactory<MenuContentContext>('MenuContentContext');
+
+export interface MenuSubContext {
+  contentId: ComputedRef<string>;
+  triggerId: ComputedRef<string>;
+  trigger: ShallowRef<HTMLElement | null>;
+  onTriggerChange: (el: HTMLElement | null) => void;
+}
+export const { inject: useMenuSubContext, provide: provideMenuSubContext }
+  = useContextFactory<MenuSubContext>('MenuSubContext');
+
+export interface MenuRadioGroupContext {
+  modelValue: Ref<string | undefined>;
+  onValueChange: (value: string) => void;
+}
+export const { inject: useMenuRadioGroupContext, provide: provideMenuRadioGroupContext }
+  = useContextFactory<MenuRadioGroupContext>('MenuRadioGroupContext');
+
+export interface MenuItemIndicatorContext {
+  checkedState: Ref<CheckedState>;
+}
+export const { inject: useMenuItemIndicatorContext, provide: provideMenuItemIndicatorContext }
+  = useContextFactory<MenuItemIndicatorContext>('MenuItemIndicatorContext');
+
+export interface MenuGroupContext {
+  id: string;
+}
+export const { inject: useMenuGroupContext, provide: provideMenuGroupContext }
+  = useContextFactory<MenuGroupContext>('MenuGroupContext');
diff --git a/vue/primitives/src/menu/index.ts b/vue/primitives/src/menu/index.ts
new file mode 100644
index 0000000..d3078e9
--- /dev/null
+++ b/vue/primitives/src/menu/index.ts
@@ -0,0 +1,20 @@
+export type { CheckedState } from './types';
+
+export { useMenuContext, useMenuContentContext, useMenuRootContext, useMenuSubContext } from './context';
+export { default as MenuAnchor, type MenuAnchorProps } from './MenuAnchor.vue';
+export { default as MenuArrow, type MenuArrowProps } from './MenuArrow.vue';
+export { default as MenuCheckboxItem, type MenuCheckboxItemEmits, type MenuCheckboxItemProps } from './MenuCheckboxItem.vue';
+export { default as MenuContent, type MenuContentEmits, type MenuContentProps } from './MenuContent.vue';
+export { default as MenuGroup, type MenuGroupProps } from './MenuGroup.vue';
+export { default as MenuItem, type MenuItemEmits, type MenuItemProps } from './MenuItem.vue';
+export { default as MenuItemImpl, type MenuItemImplEmits, type MenuItemImplProps } from './MenuItemImpl.vue';
+export { default as MenuItemIndicator, type MenuItemIndicatorProps } from './MenuItemIndicator.vue';
+export { default as MenuLabel, type MenuLabelProps } from './MenuLabel.vue';
+export { default as MenuPortal, type MenuPortalProps } from './MenuPortal.vue';
+export { default as MenuRadioGroup, type MenuRadioGroupEmits, type MenuRadioGroupProps } from './MenuRadioGroup.vue';
+export { default as MenuRadioItem, type MenuRadioItemEmits, type MenuRadioItemProps } from './MenuRadioItem.vue';
+export { default as MenuRoot, type MenuRootEmits, type MenuRootProps } from './MenuRoot.vue';
+export { default as MenuSeparator, type MenuSeparatorProps } from './MenuSeparator.vue';
+export { default as MenuSub, type MenuSubEmits, type MenuSubProps } from './MenuSub.vue';
+export { default as MenuSubContent, type MenuSubContentEmits, type MenuSubContentProps } from './MenuSubContent.vue';
+export { default as MenuSubTrigger, type MenuSubTriggerProps } from './MenuSubTrigger.vue';
diff --git a/vue/primitives/src/menu/types.ts b/vue/primitives/src/menu/types.ts
new file mode 100644
index 0000000..6df28d2
--- /dev/null
+++ b/vue/primitives/src/menu/types.ts
@@ -0,0 +1 @@
+export type CheckedState = boolean | 'indeterminate';
diff --git a/vue/primitives/src/menu/useIsUsingKeyboard.ts b/vue/primitives/src/menu/useIsUsingKeyboard.ts
new file mode 100644
index 0000000..c5c0b98
--- /dev/null
+++ b/vue/primitives/src/menu/useIsUsingKeyboard.ts
@@ -0,0 +1,23 @@
+import { ref } from 'vue';
+
+const isUsingKeyboard = ref(false);
+let initialized = false;
+
+function init() {
+  if (initialized || typeof document === 'undefined') return;
+  initialized = true;
+  document.addEventListener('keydown', () => {
+    isUsingKeyboard.value = true;
+  }, { capture: true, passive: true });
+  document.addEventListener('pointerdown', () => {
+    isUsingKeyboard.value = false;
+  }, { capture: true, passive: true });
+  document.addEventListener('pointermove', () => {
+    isUsingKeyboard.value = false;
+  }, { capture: true, passive: true });
+}
+
+export function useIsUsingKeyboard() {
+  init();
+  return isUsingKeyboard;
+}
diff --git a/vue/primitives/src/menu/utils.ts b/vue/primitives/src/menu/utils.ts
new file mode 100644
index 0000000..1b06501
--- /dev/null
+++ b/vue/primitives/src/menu/utils.ts
@@ -0,0 +1,86 @@
+import type { CheckedState } from './types';
+
+import { getActiveElement } from '@robonen/platform/browsers';
+
+export const ITEM_SELECT = 'menu.itemSelect';
+export const SELECTION_KEYS = ['Enter', ' '];
+export const FIRST_KEYS = ['ArrowDown', 'PageUp', 'Home'];
+export const LAST_KEYS = ['ArrowUp', 'PageDown', 'End'];
+export const FIRST_LAST_KEYS = [...FIRST_KEYS, ...LAST_KEYS];
+export const SUB_OPEN_KEYS: Record<string, string[]> = {
+  ltr: [...SELECTION_KEYS, 'ArrowRight'],
+  rtl: [...SELECTION_KEYS, 'ArrowLeft'],
+};
+export const SUB_CLOSE_KEYS: Record<string, string[]> = {
+  ltr: ['ArrowLeft'],
+  rtl: ['ArrowRight'],
+};
+
+export function getOpenState(open: boolean): 'open' | 'closed' {
+  return open ? 'open' : 'closed';
+}
+
+export function isIndeterminate(checked: CheckedState): checked is 'indeterminate' {
+  return checked === 'indeterminate';
+}
+
+export function getCheckedState(checked: CheckedState): 'checked' | 'unchecked' | 'indeterminate' {
+  if (isIndeterminate(checked)) return 'indeterminate';
+  return checked ? 'checked' : 'unchecked';
+}
+
+export function focusFirst(candidates: HTMLElement[]): void {
+  for (const candidate of candidates) {
+    const prev = getActiveElement();
+    candidate.focus({ preventScroll: true });
+    if (getActiveElement() !== prev) return;
+  }
+}
+
+export function getNextMatch(
+  items: HTMLElement[],
+  search: string,
+  currentItem?: HTMLElement | null,
+): HTMLElement | undefined {
+  const isRepeating = search.length > 1 && Array.from(search).every(c => c === search[0]);
+  const normalizedSearch = isRepeating ? search[0]! : search;
+
+  const currentIndex = currentItem ? items.indexOf(currentItem) : -1;
+  const wrappedItems = currentIndex !== -1
+    ? [...items.slice(currentIndex + 1), ...items.slice(0, currentIndex + 1)]
+    : items;
+
+  const getText = (el: HTMLElement) =>
+    el.dataset['primitiveMenuItemTextValue'] ?? el.textContent?.trim() ?? '';
+
+  return wrappedItems.find(item =>
+    getText(item).toLowerCase().startsWith(normalizedSearch.toLowerCase()),
+  );
+}
+
+export interface Point { x: number; y: number };
+export type Polygon = Point[];
+export type Side = 'left' | 'right';
+export interface GraceIntent { area: Polygon; side: Side }
+
+export function isPointInPolygon(point: Point, polygon: Polygon): boolean {
+  const { x, y } = point;
+  let inside = false;
+  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+    const xi = polygon[i]!.x;
+    const yi = polygon[i]!.y;
+    const xj = polygon[j]!.x;
+    const yj = polygon[j]!.y;
+    const intersects = (yi > y) !== (yj > y) && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi;
+    if (intersects) inside = !inside;
+  }
+  return inside;
+}
+
+export function isPointerInGraceArea(event: PointerEvent, area: Polygon): boolean {
+  return isPointInPolygon({ x: event.clientX, y: event.clientY }, area);
+}
+
+export function isMouseEvent(event: Event): event is MouseEvent {
+  return ['mousedown', 'mouseup', 'mousemove', 'click'].includes(event.type);
+}
diff --git a/vue/primitives/src/menubar/MenubarArrow.vue b/vue/primitives/src/menubar/MenubarArrow.vue
new file mode 100644
index 0000000..eb82864
--- /dev/null
+++ b/vue/primitives/src/menubar/MenubarArrow.vue
@@ -0,0 +1,15 @@
+<script lang="ts">
+import type { MenuArrowProps } from '../menu';
+
+export interface MenubarArrowProps extends MenuArrowProps {}
+</script>
+
+<script setup lang="ts">
+import { MenuArrow } from '../menu';
+
+const props = defineProps<MenubarArrowProps>();
+</script>
+
+<template>
+  <MenuArrow v-bind="props"><slot /></MenuArrow>
+</template>
diff --git a/vue/primitives/src/menubar/MenubarCheckboxItem.vue b/vue/primitives/src/menubar/MenubarCheckboxItem.vue
new file mode 100644
index 0000000..bd8fce4
--- /dev/null
+++ b/vue/primitives/src/menubar/MenubarCheckboxItem.vue
@@ -0,0 +1,21 @@
+<script lang="ts">
+import type { MenuCheckboxItemEmits, MenuCheckboxItemProps } from '../menu';
+
+export interface MenubarCheckboxItemProps extends MenuCheckboxItemProps {}
+export type MenubarCheckboxItemEmits = MenuCheckboxItemEmits;
+</script>
+
+<script setup lang="ts">
+import { MenuCheckboxItem } from '../menu';
+
+const props = defineProps<MenubarCheckboxItemProps>();
+const emit = defineEmits<MenubarCheckboxItemEmits>();
+</script>
+
+<template>
+  <MenuCheckboxItem
+    v-bind="props"
+    @select="emit('select', $event)"
+    @update:checked="emit('update:checked', $event)"
+  ><slot /></MenuCheckboxItem>
+</template>
diff --git a/vue/primitives/src/menubar/MenubarContent.vue b/vue/primitives/src/menubar/MenubarContent.vue
new file mode 100644
index 0000000..19fc7e6
--- /dev/null
+++ b/vue/primitives/src/menubar/MenubarContent.vue
@@ -0,0 +1,46 @@
+<script lang="ts">
+import type { MenuContentEmits, MenuContentProps } from '../menu';
+
+export interface MenubarContentProps extends MenuContentProps {}
+export type MenubarContentEmits = MenuContentEmits;
+</script>
+
+<script setup lang="ts">
+import { MenuContent } from '../menu';
+import { useMenubarMenuContext, useMenubarRootContext } from './context';
+
+const props = defineProps<MenubarContentProps>();
+const emit = defineEmits<MenubarContentEmits>();
+
+const rootCtx = useMenubarRootContext();
+const menuCtx = useMenubarMenuContext();
+</script>
+
+<template>
+  <MenuContent
+    :id="menuCtx.contentId.value"
+    v-bind="props"
+    align="start"
+    :aria-labelledby="menuCtx.triggerId.value"
+    @close-auto-focus="(event: Event) => {
+      if (!menuCtx.wasKeyboardTriggerOpenRef.value) event.preventDefault()
+      menuCtx.wasKeyboardTriggerOpenRef.value = false
+      menuCtx.triggerRef.value?.focus({ preventScroll: true })
+      emit('closeAutoFocus', event)
+    }"
+    @escape-key-down="emit('escapeKeyDown', $event)"
+    @pointer-down-outside="(event: PointerEvent | MouseEvent) => {
+      const target = event.target as Node
+      const isMenubarTrigger = menuCtx.triggerRef.value?.contains(target)
+      if (isMenubarTrigger) event.preventDefault()
+      emit('pointerDownOutside', event)
+    }"
+    @focus-outside="emit('focusOutside', $event)"
+    @interact-outside="emit('interactOutside', $event)"
+    @dismiss="rootCtx.onMenuClose()"
+    @entry-focus="emit('entryFocus', $event)"
+    @open-auto-focus="emit('openAutoFocus', $event)"
+  >
+    <slot />
+  </MenuContent>
+</template>
diff --git a/vue/primitives/src/menubar/MenubarGroup.vue b/vue/primitives/src/menubar/MenubarGroup.vue
new file mode 100644
index 0000000..aec69d7
--- /dev/null
+++ b/vue/primitives/src/menubar/MenubarGroup.vue
@@ -0,0 +1,15 @@
+<script lang="ts">
+import type { MenuGroupProps } from '../menu';
+
+export interface MenubarGroupProps extends MenuGroupProps {}
+</script>
+
+<script setup lang="ts">
+import { MenuGroup } from '../menu';
+
+const props = defineProps<MenubarGroupProps>();
+</script>
+
+<template>
+  <MenuGroup v-bind="props"><slot /></MenuGroup>
+</template>
diff --git a/vue/primitives/src/menubar/MenubarItem.vue b/vue/primitives/src/menubar/MenubarItem.vue
new file mode 100644
index 0000000..671cd8e
--- /dev/null
+++ b/vue/primitives/src/menubar/MenubarItem.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { MenuItemEmits, MenuItemProps } from '../menu';
+
+export interface MenubarItemProps extends MenuItemProps {}
+export type MenubarItemEmits = MenuItemEmits;
+</script>
+
+<script setup lang="ts">
+import { MenuItem } from '../menu';
+
+const props = defineProps<MenubarItemProps>();
+const emit = defineEmits<MenubarItemEmits>();
+</script>
+
+<template>
+  <MenuItem v-bind="props" @select="emit('select', $event)"><slot /></MenuItem>
+</template>
diff --git a/vue/primitives/src/menubar/MenubarItemIndicator.vue b/vue/primitives/src/menubar/MenubarItemIndicator.vue
new file mode 100644
index 0000000..dce9565
--- /dev/null
+++ b/vue/primitives/src/menubar/MenubarItemIndicator.vue
@@ -0,0 +1,15 @@
+<script lang="ts">
+import type { MenuItemIndicatorProps } from '../menu';
+
+export interface MenubarItemIndicatorProps extends MenuItemIndicatorProps {}
+</script>
+
+<script setup lang="ts">
+import { MenuItemIndicator } from '../menu';
+
+const props = defineProps<MenubarItemIndicatorProps>();
+</script>
+
+<template>
+  <MenuItemIndicator v-bind="props"><slot /></MenuItemIndicator>
+</template>
diff --git a/vue/primitives/src/menubar/MenubarLabel.vue b/vue/primitives/src/menubar/MenubarLabel.vue
new file mode 100644
index 0000000..d15ec5f
--- /dev/null
+++ b/vue/primitives/src/menubar/MenubarLabel.vue
@@ -0,0 +1,15 @@
+<script lang="ts">
+import type { MenuLabelProps } from '../menu';
+
+export interface MenubarLabelProps extends MenuLabelProps {}
+</script>
+
+<script setup lang="ts">
+import { MenuLabel } from '../menu';
+
+const props = defineProps<MenubarLabelProps>();
+</script>
+
+<template>
+  <MenuLabel v-bind="props"><slot /></MenuLabel>
+</template>
diff --git a/vue/primitives/src/menubar/MenubarMenu.vue b/vue/primitives/src/menubar/MenubarMenu.vue
new file mode 100644
index 0000000..80f29a3
--- /dev/null
+++ b/vue/primitives/src/menubar/MenubarMenu.vue
@@ -0,0 +1,50 @@
+<script lang="ts">
+export interface MenubarMenuProps {
+  value?: string;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, shallowRef } from 'vue';
+
+import { useId } from '../config-provider';
+import { MenuRoot } from '../menu';
+import { provideMenubarMenuContext, useMenubarRootContext } from './context';
+
+const { value: valueProp } = defineProps<MenubarMenuProps>();
+defineSlots<{ default?: (props: { open: boolean }) => unknown }>();
+
+const rootCtx = useMenubarRootContext();
+
+const autoValue = useId(undefined, 'menubar-menu');
+const menuValue = valueProp ?? autoValue.value;
+
+const triggerRef = shallowRef<HTMLElement | null>(null);
+const triggerId = useId(undefined, 'menubar-trigger');
+const contentId = useId(undefined, 'menubar-content');
+const wasKeyboardTriggerOpenRef = ref(false);
+
+const open = computed(() => rootCtx.value.value === menuValue);
+
+provideMenubarMenuContext({
+  value: menuValue,
+  triggerId,
+  contentId,
+  triggerRef,
+  onTriggerChange: (el) => { triggerRef.value = el; },
+  wasKeyboardTriggerOpenRef,
+});
+</script>
+
+<template>
+  <MenuRoot
+    :open="open"
+    :dir="rootCtx.dir.value"
+    :modal="false"
+    @update:open="(v) => {
+      if (!v) rootCtx.onMenuClose()
+    }"
+  >
+    <slot :open="open" />
+  </MenuRoot>
+</template>
diff --git a/vue/primitives/src/menubar/MenubarPortal.vue b/vue/primitives/src/menubar/MenubarPortal.vue
new file mode 100644
index 0000000..b2eb31a
--- /dev/null
+++ b/vue/primitives/src/menubar/MenubarPortal.vue
@@ -0,0 +1,15 @@
+<script lang="ts">
+import type { MenuPortalProps } from '../menu';
+
+export interface MenubarPortalProps extends MenuPortalProps {}
+</script>
+
+<script setup lang="ts">
+import { MenuPortal } from '../menu';
+
+const props = defineProps<MenubarPortalProps>();
+</script>
+
+<template>
+  <MenuPortal v-bind="props"><slot /></MenuPortal>
+</template>
diff --git a/vue/primitives/src/menubar/MenubarRadioGroup.vue b/vue/primitives/src/menubar/MenubarRadioGroup.vue
new file mode 100644
index 0000000..a82fe52
--- /dev/null
+++ b/vue/primitives/src/menubar/MenubarRadioGroup.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { MenuRadioGroupEmits, MenuRadioGroupProps } from '../menu';
+
+export interface MenubarRadioGroupProps extends MenuRadioGroupProps {}
+export type MenubarRadioGroupEmits = MenuRadioGroupEmits;
+</script>
+
+<script setup lang="ts">
+import { MenuRadioGroup } from '../menu';
+
+const props = defineProps<MenubarRadioGroupProps>();
+const emit = defineEmits<MenubarRadioGroupEmits>();
+</script>
+
+<template>
+  <MenuRadioGroup v-bind="props" @update:model-value="emit('update:modelValue', $event)"><slot /></MenuRadioGroup>
+</template>
diff --git a/vue/primitives/src/menubar/MenubarRadioItem.vue b/vue/primitives/src/menubar/MenubarRadioItem.vue
new file mode 100644
index 0000000..c206501
--- /dev/null
+++ b/vue/primitives/src/menubar/MenubarRadioItem.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { MenuRadioItemEmits, MenuRadioItemProps } from '../menu';
+
+export interface MenubarRadioItemProps extends MenuRadioItemProps {}
+export type MenubarRadioItemEmits = MenuRadioItemEmits;
+</script>
+
+<script setup lang="ts">
+import { MenuRadioItem } from '../menu';
+
+const props = defineProps<MenubarRadioItemProps>();
+const emit = defineEmits<MenubarRadioItemEmits>();
+</script>
+
+<template>
+  <MenuRadioItem v-bind="props" @select="emit('select', $event)"><slot /></MenuRadioItem>
+</template>
diff --git a/vue/primitives/src/menubar/MenubarRoot.vue b/vue/primitives/src/menubar/MenubarRoot.vue
new file mode 100644
index 0000000..f6dec19
--- /dev/null
+++ b/vue/primitives/src/menubar/MenubarRoot.vue
@@ -0,0 +1,101 @@
+<script lang="ts">
+import type { Direction } from '../config-provider';
+import type { PrimitiveProps } from '../primitive';
+
+export interface MenubarRootProps extends PrimitiveProps {
+  modelValue?: string;
+  defaultValue?: string;
+  dir?: Direction;
+  loop?: boolean;
+}
+export interface MenubarRootEmits {
+  'update:modelValue': [value: string | undefined];
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onScopeDispose, ref, toRef } from 'vue';
+
+import { Primitive } from '../primitive';
+import { provideMenubarRootContext } from './context';
+import { useCollectionProvider } from '../collection';
+import { useConfig } from '../config-provider';
+import { useForwardExpose } from '@robonen/vue';
+
+const {
+  modelValue,
+  defaultValue,
+  dir: dirProp,
+  loop = true,
+  as = 'div',
+} = defineProps<MenubarRootProps>();
+const emit = defineEmits<MenubarRootEmits>();
+
+const config = useConfig();
+const dirRef = toRef(() => dirProp ?? config.dir.value);
+const { forwardRef } = useForwardExpose();
+
+const { getItems, CollectionSlot } = useCollectionProvider<string>();
+
+const local = ref<string | undefined>(defaultValue);
+const value = computed({
+  get: () => modelValue !== undefined ? modelValue : local.value,
+  set: (v) => {
+    local.value = v;
+    emit('update:modelValue', v);
+  },
+});
+
+const searchRef = ref('');
+let searchTimer: ReturnType<typeof setTimeout> | undefined;
+
+function clearSearch() {
+  clearTimeout(searchTimer);
+  searchRef.value = '';
+}
+
+onScopeDispose(clearSearch);
+
+// Reset the typeahead buffer once after every keystroke (1s idle window).
+function bumpSearchIdleTimer() {
+  clearTimeout(searchTimer);
+  searchTimer = setTimeout(clearSearch, 1000);
+}
+
+provideMenubarRootContext({
+  value,
+  dir: dirRef,
+  loop: toRef(() => loop),
+  onMenuOpen: (v) => { value.value = v; },
+  onMenuClose: () => { value.value = undefined; },
+  onMenuToggle: (v) => { value.value = value.value === v ? undefined : v; },
+  getTriggers: (includeDisabled = false) => getItems(includeDisabled),
+  searchRef,
+});
+
+function onKeyDownCapture(event: KeyboardEvent) {
+  // Typeahead at the menubar level: alphanumeric single-character key when no modifiers.
+  // Browsers report printable keys as `event.key.length === 1`; Space/Enter/Arrows are
+  // longer or are non-printable.
+  if (event.ctrlKey || event.altKey || event.metaKey) return;
+  if (event.key.length !== 1) return;
+  searchRef.value += event.key;
+  bumpSearchIdleTimer();
+}
+</script>
+
+<template>
+  <CollectionSlot>
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      role="menubar"
+      aria-orientation="horizontal"
+      :data-orientation="'horizontal'"
+      :dir="dirRef"
+      @keydown.capture="onKeyDownCapture"
+    >
+      <slot />
+    </Primitive>
+  </CollectionSlot>
+</template>
diff --git a/vue/primitives/src/menubar/MenubarSeparator.vue b/vue/primitives/src/menubar/MenubarSeparator.vue
new file mode 100644
index 0000000..103e646
--- /dev/null
+++ b/vue/primitives/src/menubar/MenubarSeparator.vue
@@ -0,0 +1,15 @@
+<script lang="ts">
+import type { MenuSeparatorProps } from '../menu';
+
+export interface MenubarSeparatorProps extends MenuSeparatorProps {}
+</script>
+
+<script setup lang="ts">
+import { MenuSeparator } from '../menu';
+
+const props = defineProps<MenubarSeparatorProps>();
+</script>
+
+<template>
+  <MenuSeparator v-bind="props"><slot /></MenuSeparator>
+</template>
diff --git a/vue/primitives/src/menubar/MenubarSub.vue b/vue/primitives/src/menubar/MenubarSub.vue
new file mode 100644
index 0000000..d140014
--- /dev/null
+++ b/vue/primitives/src/menubar/MenubarSub.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { MenuSubEmits, MenuSubProps } from '../menu';
+
+export interface MenubarSubProps extends MenuSubProps {}
+export type MenubarSubEmits = MenuSubEmits;
+</script>
+
+<script setup lang="ts">
+import { MenuSub } from '../menu';
+
+const props = defineProps<MenubarSubProps>();
+const emit = defineEmits<MenubarSubEmits>();
+</script>
+
+<template>
+  <MenuSub v-bind="props" @update:open="emit('update:open', $event)"><slot /></MenuSub>
+</template>
diff --git a/vue/primitives/src/menubar/MenubarSubContent.vue b/vue/primitives/src/menubar/MenubarSubContent.vue
new file mode 100644
index 0000000..daf1e27
--- /dev/null
+++ b/vue/primitives/src/menubar/MenubarSubContent.vue
@@ -0,0 +1,27 @@
+<script lang="ts">
+import type { MenuSubContentEmits, MenuSubContentProps } from '../menu';
+
+export interface MenubarSubContentProps extends MenuSubContentProps {}
+export type MenubarSubContentEmits = MenuSubContentEmits;
+</script>
+
+<script setup lang="ts">
+import { MenuSubContent } from '../menu';
+
+const props = defineProps<MenubarSubContentProps>();
+const emit = defineEmits<MenubarSubContentEmits>();
+</script>
+
+<template>
+  <MenuSubContent
+    v-bind="props"
+    @close-auto-focus="emit('closeAutoFocus', $event)"
+    @escape-key-down="emit('escapeKeyDown', $event)"
+    @pointer-down-outside="emit('pointerDownOutside', $event)"
+    @focus-outside="emit('focusOutside', $event)"
+    @interact-outside="emit('interactOutside', $event)"
+    @dismiss="emit('dismiss')"
+    @entry-focus="emit('entryFocus', $event)"
+    @open-auto-focus="emit('openAutoFocus', $event)"
+  ><slot /></MenuSubContent>
+</template>
diff --git a/vue/primitives/src/menubar/MenubarSubTrigger.vue b/vue/primitives/src/menubar/MenubarSubTrigger.vue
new file mode 100644
index 0000000..2536df4
--- /dev/null
+++ b/vue/primitives/src/menubar/MenubarSubTrigger.vue
@@ -0,0 +1,15 @@
+<script lang="ts">
+import type { MenuSubTriggerProps } from '../menu';
+
+export interface MenubarSubTriggerProps extends MenuSubTriggerProps {}
+</script>
+
+<script setup lang="ts">
+import { MenuSubTrigger } from '../menu';
+
+const props = defineProps<MenubarSubTriggerProps>();
+</script>
+
+<template>
+  <MenuSubTrigger v-bind="props"><slot /></MenuSubTrigger>
+</template>
diff --git a/vue/primitives/src/menubar/MenubarTrigger.vue b/vue/primitives/src/menubar/MenubarTrigger.vue
new file mode 100644
index 0000000..732b2de
--- /dev/null
+++ b/vue/primitives/src/menubar/MenubarTrigger.vue
@@ -0,0 +1,145 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface MenubarTriggerProps extends PrimitiveProps {
+  disabled?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, watch } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { useCollectionInjector } from '../collection';
+import { MenuAnchor, useMenuContext } from '../menu';
+import { getNextMatch } from '../menu/utils';
+import { Primitive } from '../primitive';
+import { useMenubarMenuContext, useMenubarRootContext } from './context';
+
+const { disabled = false, as = 'button' } = defineProps<MenubarTriggerProps>();
+
+const rootCtx = useMenubarRootContext();
+const menuCtx = useMenubarMenuContext();
+const menuMenuCtx = useMenuContext();
+const collection = useCollectionInjector<string>();
+const { forwardRef, currentElement } = useForwardExpose();
+
+onMounted(() => menuCtx.onTriggerChange(currentElement.value ?? null));
+onUnmounted(() => menuCtx.onTriggerChange(null));
+
+function focusTrigger(el: HTMLElement | undefined) {
+  if (!el) return;
+  el.focus({ preventScroll: true });
+}
+
+function focusByIndex(items: HTMLElement[], from: number, delta: 1 | -1) {
+  if (items.length === 0) return;
+  const loop = rootCtx.loop.value;
+  let next = from + delta;
+  if (loop) {
+    next = (next + items.length) % items.length;
+  }
+  else {
+    next = Math.max(0, Math.min(items.length - 1, next));
+  }
+  focusTrigger(items[next]);
+}
+
+// Hover-switch: when a sibling menu is already open, hovering this trigger
+// (focused or not) opens this one and moves focus over.
+function handlePointerDown(event: PointerEvent) {
+  if (disabled || event.button !== 0) return;
+  event.preventDefault();
+  rootCtx.onMenuToggle(menuCtx.value);
+}
+
+function handlePointerEnter() {
+  if (disabled) return;
+  if (rootCtx.value.value !== undefined && rootCtx.value.value !== menuCtx.value) {
+    rootCtx.onMenuOpen(menuCtx.value);
+    menuCtx.triggerRef.value?.focus({ preventScroll: true });
+  }
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+  if (disabled) return;
+
+  // Open the menu on Enter / Space / ArrowDown / ArrowUp (per WAI-ARIA APG).
+  if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+    event.preventDefault();
+    menuCtx.wasKeyboardTriggerOpenRef.value = true;
+    rootCtx.onMenuOpen(menuCtx.value);
+    return;
+  }
+
+  // Move focus between sibling triggers.
+  const triggers = collection
+    .getItems(true)
+    .map(i => i.ref)
+    .filter(el => el.dataset['disabled'] !== '');
+  if (triggers.length === 0) return;
+  const currentIdx = triggers.indexOf(currentElement.value as HTMLElement);
+  const dir = rootCtx.dir.value;
+  const nextKey = dir === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
+  const prevKey = dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
+
+  if (event.key === nextKey) {
+    event.preventDefault();
+    focusByIndex(triggers, currentIdx, 1);
+    return;
+  }
+  if (event.key === prevKey) {
+    event.preventDefault();
+    focusByIndex(triggers, currentIdx, -1);
+    return;
+  }
+  if (event.key === 'Home') {
+    event.preventDefault();
+    focusTrigger(triggers[0]);
+    return;
+  }
+  if (event.key === 'End') {
+    event.preventDefault();
+    focusTrigger(triggers[triggers.length - 1]);
+  }
+}
+
+// Typeahead — driven by the shared `searchRef` filled by MenubarRoot's
+// keydown.capture. When it changes, jump focus to the matching trigger.
+watch(() => rootCtx.searchRef.value, (search) => {
+  if (!search) return;
+  // Only react when this trigger currently has focus — prevents every trigger
+  // from racing for the same match.
+  if (document.activeElement !== currentElement.value) return;
+  const triggers = collection
+    .getItems(true)
+    .map(i => i.ref)
+    .filter(el => el.dataset['disabled'] !== '');
+  const match = getNextMatch(triggers, search, currentElement.value as HTMLElement | null);
+  if (match && match !== currentElement.value) focusTrigger(match);
+});
+</script>
+
+<template>
+  <MenuAnchor>
+    <collection.CollectionItem :value="menuCtx.value">
+      <Primitive
+        :ref="forwardRef"
+        :as="as"
+        :id="menuCtx.triggerId.value"
+        role="menuitem"
+        aria-haspopup="menu"
+        :aria-expanded="menuMenuCtx.open.value"
+        :aria-controls="menuCtx.contentId.value"
+        :data-state="menuMenuCtx.open.value ? 'open' : 'closed'"
+        :data-disabled="disabled ? '' : undefined"
+        :disabled="as === 'button' ? disabled : undefined"
+        @pointerdown="handlePointerDown"
+        @pointerenter="handlePointerEnter"
+        @keydown="handleKeyDown"
+      >
+        <slot />
+      </Primitive>
+    </collection.CollectionItem>
+  </MenuAnchor>
+</template>
diff --git a/vue/primitives/src/menubar/__test__/Menubar.regression.test.ts b/vue/primitives/src/menubar/__test__/Menubar.regression.test.ts
new file mode 100644
index 0000000..f92b897
--- /dev/null
+++ b/vue/primitives/src/menubar/__test__/Menubar.regression.test.ts
@@ -0,0 +1,146 @@
+import type { VueWrapper } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+import { afterEach, describe, expect, it } from 'vitest';
+import { defineComponent, h, nextTick } from 'vue';
+
+import { MenubarMenu, MenubarRoot, MenubarTrigger } from '../index';
+
+const wrappers: Array<VueWrapper<any>> = [];
+
+afterEach(() => {
+  while (wrappers.length) wrappers.pop()!.unmount();
+  document.body.innerHTML = '';
+});
+
+function track<T extends VueWrapper<any>>(w: T): T {
+  wrappers.push(w);
+  return w;
+}
+
+function mountBar(opts: { dir?: 'ltr' | 'rtl'; loop?: boolean; labels?: string[] } = {}) {
+  const labels = opts.labels ?? ['File', 'Edit', 'View', 'Help'];
+  const Harness = defineComponent({
+    setup() {
+      return () => h(
+        MenubarRoot,
+        { dir: opts.dir, loop: opts.loop },
+        {
+          default: () =>
+            labels.map(label =>
+              h(MenubarMenu, { value: label.toLowerCase() }, {
+                default: () => h(MenubarTrigger, null, { default: () => label }),
+              }),
+            ),
+        },
+      );
+    },
+  });
+  return track(mount(Harness, { attachTo: document.body }));
+}
+
+function triggers(): HTMLElement[] {
+  return Array.from(document.querySelectorAll<HTMLElement>('[role="menuitem"]'));
+}
+
+describe('menubar — root a11y', () => {
+  it('exposes role=menubar with aria-orientation=horizontal', () => {
+    mountBar();
+    const bar = document.querySelector('[role="menubar"]') as HTMLElement;
+    expect(bar).toBeTruthy();
+    expect(bar.getAttribute('aria-orientation')).toBe('horizontal');
+  });
+
+  it('applies the dir attribute on the menubar root', () => {
+    mountBar({ dir: 'rtl' });
+    const bar = document.querySelector('[role="menubar"]') as HTMLElement;
+    expect(bar.getAttribute('dir')).toBe('rtl');
+  });
+});
+
+describe('menubar — keyboard navigation between triggers', () => {
+  it('ArrowRight moves focus to the next trigger (ltr)', async () => {
+    mountBar();
+    const [file, edit] = triggers();
+    file!.focus();
+    file!.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, cancelable: true }));
+    await nextTick();
+    expect(document.activeElement).toBe(edit);
+  });
+
+  it('ArrowLeft moves focus to the previous trigger (ltr)', async () => {
+    mountBar();
+    const [, edit, view] = triggers();
+    view!.focus();
+    view!.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true, cancelable: true }));
+    await nextTick();
+    expect(document.activeElement).toBe(edit);
+  });
+
+  it('ArrowRight on the last trigger loops to the first when loop=true', async () => {
+    mountBar({ loop: true });
+    const all = triggers();
+    const last = all.at(-1)!;
+    last.focus();
+    last.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, cancelable: true }));
+    await nextTick();
+    expect(document.activeElement).toBe(all[0]);
+  });
+
+  it('ArrowRight on the last trigger stays put when loop=false', async () => {
+    mountBar({ loop: false });
+    const all = triggers();
+    const last = all.at(-1)!;
+    last.focus();
+    last.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, cancelable: true }));
+    await nextTick();
+    expect(document.activeElement).toBe(last);
+  });
+
+  it('Home / End jump to the first / last trigger', async () => {
+    mountBar();
+    const all = triggers();
+    all[1]!.focus();
+    all[1]!.dispatchEvent(new KeyboardEvent('keydown', { key: 'End', bubbles: true, cancelable: true }));
+    await nextTick();
+    expect(document.activeElement).toBe(all.at(-1));
+
+    all.at(-1)!.dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', bubbles: true, cancelable: true }));
+    await nextTick();
+    expect(document.activeElement).toBe(all[0]);
+  });
+
+  it('reverses ArrowLeft/ArrowRight in RTL', async () => {
+    mountBar({ dir: 'rtl' });
+    const [file, edit] = triggers();
+    file!.focus();
+    // In RTL the "forward" key is ArrowLeft.
+    file!.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true, cancelable: true }));
+    await nextTick();
+    expect(document.activeElement).toBe(edit);
+  });
+});
+
+describe('menubar — typeahead', () => {
+  it('jumps focus to the trigger whose label starts with the typed letter', async () => {
+    mountBar();
+    const bar = document.querySelector('[role="menubar"]') as HTMLElement;
+    const [file, , view] = triggers();
+    file!.focus();
+    // Typeahead is wired on the menubar root via keydown.capture, so dispatching
+    // on the focused trigger (which bubbles up) is equivalent to the user typing
+    // while focus is in the bar.
+    bar.dispatchEvent(new KeyboardEvent('keydown', { key: 'v', bubbles: true }));
+    await nextTick();
+    expect(document.activeElement).toBe(view);
+  });
+
+  it('ignores modified key combinations for typeahead', async () => {
+    mountBar();
+    const bar = document.querySelector('[role="menubar"]') as HTMLElement;
+    const [file] = triggers();
+    file!.focus();
+    bar.dispatchEvent(new KeyboardEvent('keydown', { key: 'v', ctrlKey: true, bubbles: true }));
+    await nextTick();
+    expect(document.activeElement).toBe(file);
+  });
+});
diff --git a/vue/primitives/src/menubar/context.ts b/vue/primitives/src/menubar/context.ts
new file mode 100644
index 0000000..e0fa40c
--- /dev/null
+++ b/vue/primitives/src/menubar/context.ts
@@ -0,0 +1,37 @@
+import type { ComputedRef, Ref, ShallowRef } from 'vue';
+import type { Direction } from '../config-provider';
+import type { CollectionItemData } from '../collection';
+
+import { useContextFactory } from '@robonen/vue';
+
+export interface MenubarRootContext {
+  value: Ref<string | undefined>;
+  dir: Ref<Direction>;
+  loop: Ref<boolean>;
+  onMenuOpen: (value: string) => void;
+  onMenuClose: () => void;
+  onMenuToggle: (value: string) => void;
+  /** Ordered list of all currently-mounted menubar triggers (DOM order). */
+  getTriggers: (includeDisabled?: boolean) => Array<CollectionItemData<string>>;
+  /** Buffered typeahead search string (cleared after ~1000ms idle). */
+  searchRef: Ref<string>;
+}
+
+export const {
+  inject: useMenubarRootContext,
+  provide: provideMenubarRootContext,
+} = useContextFactory<MenubarRootContext>('MenubarRootContext');
+
+export interface MenubarMenuContext {
+  value: string;
+  triggerId: ComputedRef<string>;
+  contentId: ComputedRef<string>;
+  triggerRef: ShallowRef<HTMLElement | null>;
+  onTriggerChange: (el: HTMLElement | null) => void;
+  wasKeyboardTriggerOpenRef: Ref<boolean>;
+}
+
+export const {
+  inject: useMenubarMenuContext,
+  provide: provideMenubarMenuContext,
+} = useContextFactory<MenubarMenuContext>('MenubarMenuContext');
diff --git a/vue/primitives/src/menubar/index.ts b/vue/primitives/src/menubar/index.ts
new file mode 100644
index 0000000..490f39e
--- /dev/null
+++ b/vue/primitives/src/menubar/index.ts
@@ -0,0 +1,50 @@
+export { default as MenubarRoot } from './MenubarRoot.vue';
+export type { MenubarRootProps, MenubarRootEmits } from './MenubarRoot.vue';
+
+export { default as MenubarMenu } from './MenubarMenu.vue';
+export type { MenubarMenuProps } from './MenubarMenu.vue';
+
+export { default as MenubarTrigger } from './MenubarTrigger.vue';
+export type { MenubarTriggerProps } from './MenubarTrigger.vue';
+
+export { default as MenubarContent } from './MenubarContent.vue';
+export type { MenubarContentProps, MenubarContentEmits } from './MenubarContent.vue';
+
+export { default as MenubarPortal } from './MenubarPortal.vue';
+export type { MenubarPortalProps } from './MenubarPortal.vue';
+
+export { default as MenubarArrow } from './MenubarArrow.vue';
+export type { MenubarArrowProps } from './MenubarArrow.vue';
+
+export { default as MenubarSeparator } from './MenubarSeparator.vue';
+export type { MenubarSeparatorProps } from './MenubarSeparator.vue';
+
+export { default as MenubarLabel } from './MenubarLabel.vue';
+export type { MenubarLabelProps } from './MenubarLabel.vue';
+
+export { default as MenubarGroup } from './MenubarGroup.vue';
+export type { MenubarGroupProps } from './MenubarGroup.vue';
+
+export { default as MenubarItem } from './MenubarItem.vue';
+export type { MenubarItemProps, MenubarItemEmits } from './MenubarItem.vue';
+
+export { default as MenubarCheckboxItem } from './MenubarCheckboxItem.vue';
+export type { MenubarCheckboxItemProps, MenubarCheckboxItemEmits } from './MenubarCheckboxItem.vue';
+
+export { default as MenubarRadioGroup } from './MenubarRadioGroup.vue';
+export type { MenubarRadioGroupProps, MenubarRadioGroupEmits } from './MenubarRadioGroup.vue';
+
+export { default as MenubarRadioItem } from './MenubarRadioItem.vue';
+export type { MenubarRadioItemProps, MenubarRadioItemEmits } from './MenubarRadioItem.vue';
+
+export { default as MenubarItemIndicator } from './MenubarItemIndicator.vue';
+export type { MenubarItemIndicatorProps } from './MenubarItemIndicator.vue';
+
+export { default as MenubarSub } from './MenubarSub.vue';
+export type { MenubarSubProps, MenubarSubEmits } from './MenubarSub.vue';
+
+export { default as MenubarSubTrigger } from './MenubarSubTrigger.vue';
+export type { MenubarSubTriggerProps } from './MenubarSubTrigger.vue';
+
+export { default as MenubarSubContent } from './MenubarSubContent.vue';
+export type { MenubarSubContentProps, MenubarSubContentEmits } from './MenubarSubContent.vue';
diff --git a/vue/primitives/src/navigation-menu/NavigationMenuContent.vue b/vue/primitives/src/navigation-menu/NavigationMenuContent.vue
new file mode 100644
index 0000000..708ccf2
--- /dev/null
+++ b/vue/primitives/src/navigation-menu/NavigationMenuContent.vue
@@ -0,0 +1,72 @@
+<script lang="ts">
+import type { NavigationMenuContentImplEmits, NavigationMenuContentImplProps } from './NavigationMenuContentImpl.vue';
+
+export interface NavigationMenuContentProps extends NavigationMenuContentImplProps {
+  /** Keep mounted regardless of `present`. Useful for transition libraries. */
+  forceMount?: boolean;
+}
+
+export type NavigationMenuContentEmits = NavigationMenuContentImplEmits;
+</script>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+
+import { Presence } from '../presence';
+import { useNavigationMenuContext, useNavigationMenuItemContext } from './context';
+import NavigationMenuContentImpl from './NavigationMenuContentImpl.vue';
+
+defineOptions({ inheritAttrs: false });
+
+const { forceMount = false, ...rest } = defineProps<NavigationMenuContentProps>();
+void rest;
+
+const emit = defineEmits<NavigationMenuContentEmits>();
+
+const menuContext = useNavigationMenuContext();
+const itemContext = useNavigationMenuItemContext();
+
+const open = computed(() => itemContext.value === menuContext.modelValue.value);
+
+// Keep content mounted briefly during viewport animation: if this item was the
+// previously active one we keep present=true until model changes again.
+const isLastActiveValue = ref(false);
+watch(
+  () => menuContext.modelValue.value,
+  (next, prev) => {
+    if (prev === itemContext.value && next !== itemContext.value) isLastActiveValue.value = true;
+    if (next === itemContext.value) isLastActiveValue.value = false;
+  },
+);
+
+const present = computed(() => open.value || isLastActiveValue.value);
+
+function handlePointerEnter() {
+  menuContext.onContentEnter(itemContext.value);
+  emit('pointerEnterContent');
+}
+
+function handlePointerLeave() {
+  menuContext.onContentLeave();
+  emit('pointerLeaveContent');
+}
+</script>
+
+<template>
+  <Teleport :to="menuContext.viewport.value ?? 'body'" :disabled="!menuContext.viewport.value">
+    <Presence :present="present" :force-mount="forceMount || !menuContext.unmountOnHide.value">
+      <NavigationMenuContentImpl
+        v-bind="$attrs"
+        @escape-key-down="emit('escapeKeyDown', $event)"
+        @pointer-down-outside="emit('pointerDownOutside', $event)"
+        @focus-outside="emit('focusOutside', $event)"
+        @interact-outside="emit('interactOutside', $event)"
+        @dismiss="emit('dismiss')"
+        @pointerenter="handlePointerEnter"
+        @pointerleave="handlePointerLeave"
+      >
+        <slot />
+      </NavigationMenuContentImpl>
+    </Presence>
+  </Teleport>
+</template>
diff --git a/vue/primitives/src/navigation-menu/NavigationMenuContentImpl.vue b/vue/primitives/src/navigation-menu/NavigationMenuContentImpl.vue
new file mode 100644
index 0000000..f46cb91
--- /dev/null
+++ b/vue/primitives/src/navigation-menu/NavigationMenuContentImpl.vue
@@ -0,0 +1,171 @@
+<script lang="ts">
+import type { DismissableLayerEmits, DismissableLayerProps } from '../dismissable-layer';
+
+export interface NavigationMenuContentImplProps extends DismissableLayerProps {}
+
+export type NavigationMenuContentImplEmits = DismissableLayerEmits & {
+  pointerEnterContent: [];
+  pointerLeaveContent: [];
+};
+</script>
+
+<script setup lang="ts">
+import { computed, watchEffect } from 'vue';
+
+import { focusFirst, getActiveElement, getTabbableCandidates } from '@robonen/platform/browsers';
+import { useForwardExpose } from '@robonen/vue';
+import { DismissableLayer } from '../dismissable-layer';
+import { FocusScope } from '../focus-scope';
+import { getFocusIntent, wrapArray } from '../roving-focus/utils';
+import { useNavigationMenuContext, useNavigationMenuItemContext } from './context';
+import { COLLECTION_ITEM_ATTR, EVENT_ROOT_CONTENT_DISMISS, getOpenState } from './utils';
+
+defineOptions({ inheritAttrs: false });
+
+defineProps<NavigationMenuContentImplProps>();
+
+const emit = defineEmits<NavigationMenuContentImplEmits>();
+
+const menuContext = useNavigationMenuContext();
+const itemContext = useNavigationMenuItemContext();
+
+const { forwardRef, currentElement } = useForwardExpose();
+
+const motionAttribute = computed<'from-start' | 'from-end' | 'to-start' | 'to-end' | undefined>(() => {
+  const items = menuContext.rootNavigationMenu.value
+    ? Array.from(menuContext.rootNavigationMenu.value.querySelectorAll('[data-primitives-navigation-menu-trigger]'))
+    : [];
+  const values = items.map(el => el.id.split('-trigger-').pop()).filter(Boolean) as string[];
+  if (menuContext.dir.value === 'rtl') values.reverse();
+  const index = values.indexOf(itemContext.value);
+  const prevIndex = values.indexOf(menuContext.previousValue.value);
+  const isSelected = itemContext.value === menuContext.modelValue.value;
+  const wasSelected = prevIndex === values.indexOf(menuContext.modelValue.value) && prevIndex !== -1;
+  if (!isSelected && !wasSelected) return undefined;
+  if (index === -1) return undefined;
+  if (isSelected) {
+    return prevIndex === -1 ? undefined : index > prevIndex ? 'from-end' : 'from-start';
+  }
+  // we are leaving
+  const curIndex = values.indexOf(menuContext.modelValue.value);
+  if (curIndex === -1) return undefined;
+  return curIndex > index ? 'to-start' : 'to-end';
+});
+
+function handleKeydown(ev: KeyboardEvent) {
+  const isMetaKey = ev.altKey || ev.ctrlKey || ev.metaKey;
+
+  if (ev.key === 'Tab' && !isMetaKey) {
+    const root = currentElement.value;
+    if (!root) return;
+    const candidates = getTabbableCandidates(root);
+    const focused = getActiveElement(document) as HTMLElement | null;
+    const idx = focused ? candidates.indexOf(focused) : -1;
+    const isMovingBackwards = ev.shiftKey;
+    const nextCandidates = isMovingBackwards
+      ? candidates.slice(0, idx).reverse()
+      : candidates.slice(idx + 1);
+    if (focusFirst(nextCandidates)) {
+      ev.preventDefault();
+    }
+    else {
+      // edge — delegate to focus proxy
+      itemContext.focusProxyRef.value?.focus();
+    }
+    return;
+  }
+
+  const intent = getFocusIntent(ev, menuContext.orientation, menuContext.dir.value);
+  if (!intent) return;
+
+  const root = currentElement.value;
+  if (!root) return;
+
+  const linkItems = Array.from(root.querySelectorAll<HTMLElement>(`[${COLLECTION_ITEM_ATTR}]`));
+  const focused = getActiveElement(document) as HTMLElement | null;
+  const focusedIndex = focused ? linkItems.indexOf(focused) : -1;
+
+  if (intent === 'first') {
+    if (focusFirst(linkItems)) ev.preventDefault();
+    return;
+  }
+  if (intent === 'last') {
+    if (focusFirst([...linkItems].reverse())) ev.preventDefault();
+    return;
+  }
+  if (focusedIndex === -1) {
+    if (focusFirst(linkItems)) ev.preventDefault();
+    return;
+  }
+  const rotated = wrapArray(linkItems, focusedIndex);
+  const candidates = intent === 'prev' ? rotated.slice(1).reverse() : rotated.slice(1);
+  if (focusFirst(candidates)) ev.preventDefault();
+}
+
+function handleEscapeKeyDown(ev: KeyboardEvent) {
+  emit('escapeKeyDown', ev);
+  if (ev.defaultPrevented) return;
+  itemContext.wasEscapeCloseRef.value = true;
+  menuContext.onItemDismiss();
+  itemContext.triggerRef.value?.focus();
+}
+
+function handleFocusOutside(ev: FocusEvent) {
+  emit('focusOutside', ev);
+  if (ev.defaultPrevented) return;
+  itemContext.onContentFocusOutside();
+  const target = ev.target as Node | null;
+  if (menuContext.rootNavigationMenu.value?.contains(target)) ev.preventDefault();
+}
+
+function handlePointerDownOutside(ev: PointerEvent | MouseEvent) {
+  emit('pointerDownOutside', ev);
+  if (ev.defaultPrevented) return;
+  const target = ev.target as HTMLElement | null;
+  const isTrigger = menuContext.activeTrigger.value?.contains(target);
+  const isRootViewport = menuContext.isRootMenu && menuContext.viewport.value?.contains(target);
+  if (isTrigger || isRootViewport || !menuContext.isRootMenu) ev.preventDefault();
+}
+
+// Listen for sibling/global EVENT_ROOT_CONTENT_DISMISS for root menus so links
+// inside content can request the whole root close.
+watchEffect((onCleanup) => {
+  const el = currentElement.value;
+  if (!el || !menuContext.isRootMenu) return;
+  function onDismiss() {
+    itemContext.onRootContentClose();
+  }
+  el.addEventListener(EVENT_ROOT_CONTENT_DISMISS, onDismiss);
+  onCleanup(() => el.removeEventListener(EVENT_ROOT_CONTENT_DISMISS, onDismiss));
+});
+</script>
+
+<template>
+  <FocusScope
+    :trapped="false"
+    @mount-auto-focus.prevent
+    @unmount-auto-focus.prevent
+  >
+    <DismissableLayer
+      :id="itemContext.contentId"
+      :ref="forwardRef"
+      :aria-labelledby="itemContext.triggerId"
+      :data-motion="motionAttribute"
+      :data-state="getOpenState(menuContext.modelValue.value, itemContext.value)"
+      :data-orientation="menuContext.orientation"
+      :data-primitives-navigation-menu-content="itemContext.value"
+      :disable-outside-pointer-events="false"
+      v-bind="$attrs"
+      @keydown="handleKeydown"
+      @escape-key-down="handleEscapeKeyDown"
+      @pointer-down-outside="handlePointerDownOutside"
+      @focus-outside="handleFocusOutside"
+      @interact-outside="emit('interactOutside', $event)"
+      @dismiss="emit('dismiss')"
+      @pointerenter="emit('pointerEnterContent')"
+      @pointerleave="emit('pointerLeaveContent')"
+    >
+      <slot />
+    </DismissableLayer>
+  </FocusScope>
+</template>
diff --git a/vue/primitives/src/navigation-menu/NavigationMenuIndicator.vue b/vue/primitives/src/navigation-menu/NavigationMenuIndicator.vue
new file mode 100644
index 0000000..e982065
--- /dev/null
+++ b/vue/primitives/src/navigation-menu/NavigationMenuIndicator.vue
@@ -0,0 +1,87 @@
+<script lang="ts">
+export interface NavigationMenuIndicatorProps {
+  forceMount?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onScopeDispose, ref, watch } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { Presence } from '../presence';
+import { Primitive } from '../primitive';
+import { useNavigationMenuContext } from './context';
+
+defineOptions({ inheritAttrs: false });
+
+const { forceMount = false } = defineProps<NavigationMenuIndicatorProps>();
+
+const menuContext = useNavigationMenuContext();
+const { forwardRef } = useForwardExpose();
+
+const isVisible = computed(() => menuContext.modelValue.value !== '');
+const isHorizontal = computed(() => menuContext.orientation === 'horizontal');
+
+const rect = ref<{ size: number; position: number } | undefined>();
+
+let triggerObserver: ResizeObserver | undefined;
+let trackObserver: ResizeObserver | undefined;
+
+function recompute() {
+  const trigger = menuContext.activeTrigger.value;
+  if (!trigger) return;
+  if (isHorizontal.value) {
+    rect.value = { size: trigger.offsetWidth, position: trigger.offsetLeft };
+  }
+  else {
+    rect.value = { size: trigger.offsetHeight, position: trigger.offsetTop };
+  }
+}
+
+watch(
+  () => [menuContext.activeTrigger.value, menuContext.indicatorTrack.value, isHorizontal.value],
+  () => {
+    triggerObserver?.disconnect();
+    trackObserver?.disconnect();
+    const trigger = menuContext.activeTrigger.value;
+    const track = menuContext.indicatorTrack.value;
+    if (!trigger || !track) return;
+    triggerObserver = new ResizeObserver(recompute);
+    trackObserver = new ResizeObserver(recompute);
+    triggerObserver.observe(trigger);
+    trackObserver.observe(track);
+    recompute();
+  },
+  { immediate: true },
+);
+
+onScopeDispose(() => {
+  triggerObserver?.disconnect();
+  trackObserver?.disconnect();
+});
+
+const indicatorStyle = computed(() => {
+  if (!rect.value) return {};
+  return {
+    '--primitives-navigation-menu-indicator-size': `${rect.value.size}px`,
+    '--primitives-navigation-menu-indicator-position': `${rect.value.position}px`,
+  };
+});
+</script>
+
+<template>
+  <Teleport v-if="menuContext.indicatorTrack.value" :to="menuContext.indicatorTrack.value">
+    <Presence :present="isVisible" :force-mount="forceMount">
+      <Primitive
+        :ref="forwardRef"
+        :data-state="isVisible ? 'visible' : 'hidden'"
+        :data-orientation="menuContext.orientation"
+        data-primitives-navigation-menu-indicator
+        :style="indicatorStyle"
+        v-bind="$attrs"
+      >
+        <slot />
+      </Primitive>
+    </Presence>
+  </Teleport>
+</template>
diff --git a/vue/primitives/src/navigation-menu/NavigationMenuItem.vue b/vue/primitives/src/navigation-menu/NavigationMenuItem.vue
new file mode 100644
index 0000000..9326998
--- /dev/null
+++ b/vue/primitives/src/navigation-menu/NavigationMenuItem.vue
@@ -0,0 +1,80 @@
+<script lang="ts">
+export interface NavigationMenuItemProps {
+  /**
+   * Unique value associating this item with the active state. Generated
+   * automatically when omitted.
+   */
+  value?: string;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, shallowRef, toValue } from 'vue';
+
+import { focusFirst, getTabbableCandidates } from '@robonen/platform/browsers';
+import { useForwardExpose, useId } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { provideNavigationMenuItemContext, useNavigationMenuContext } from './context';
+import { makeContentId, makeTriggerId, removeFromTabOrder } from './utils';
+
+const { value: valueProp } = defineProps<NavigationMenuItemProps>();
+
+useForwardExpose();
+
+const context = useNavigationMenuContext();
+
+const autoId = useId(undefined, 'primitives-navigation-menu-item');
+const value = computed<string>(() => valueProp ?? autoId.value);
+
+const triggerRef = shallowRef<HTMLElement | undefined>(undefined);
+const focusProxyRef = shallowRef<HTMLElement | undefined>(undefined);
+const wasEscapeCloseRef = ref(false);
+
+const triggerId = computed(() => makeTriggerId(toValue(context.baseId), value.value));
+const contentId = computed(() => makeContentId(toValue(context.baseId), value.value));
+
+let restoreContentTabOrder: () => void = () => {};
+
+function handleContentEntry(side: 'start' | 'end' = 'start') {
+  const el = document.getElementById(contentId.value);
+  if (!el) return;
+  restoreContentTabOrder();
+  const candidates = getTabbableCandidates(el);
+  if (candidates.length) {
+    focusFirst(side === 'start' ? candidates : [...candidates].reverse());
+  }
+}
+
+function handleContentExit() {
+  const el = document.getElementById(contentId.value);
+  if (!el) return;
+  const candidates = getTabbableCandidates(el);
+  if (candidates.length) {
+    restoreContentTabOrder = removeFromTabOrder(candidates);
+  }
+}
+
+provideNavigationMenuItemContext({
+  get value() { return value.value; },
+  get contentId() { return contentId.value; },
+  get triggerId() { return triggerId.value; },
+  triggerRef,
+  onTriggerChange: (el) => { triggerRef.value = el; },
+  focusProxyRef,
+  onFocusProxyChange: (el) => { focusProxyRef.value = el; },
+  wasEscapeCloseRef,
+  onEntryKeyDown: () => handleContentEntry('start'),
+  onFocusProxyEnter: side => handleContentEntry(side),
+  onContentFocusOutside: handleContentExit,
+  onRootContentClose: handleContentExit,
+});
+</script>
+
+<template>
+  <Primitive
+    as="li"
+    data-primitives-navigation-menu-item
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/navigation-menu/NavigationMenuLink.vue b/vue/primitives/src/navigation-menu/NavigationMenuLink.vue
new file mode 100644
index 0000000..96c641d
--- /dev/null
+++ b/vue/primitives/src/navigation-menu/NavigationMenuLink.vue
@@ -0,0 +1,55 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface NavigationMenuLinkProps extends PrimitiveProps {
+  /** Marks the link as active for styling and aria-current. */
+  active?: boolean;
+}
+
+export interface NavigationMenuLinkEmits {
+  select: [event: CustomEvent];
+}
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { COLLECTION_ITEM_ATTR, EVENT_ROOT_CONTENT_DISMISS, LINK_SELECT_EVENT } from './utils';
+
+const { as = 'a', active = false } = defineProps<NavigationMenuLinkProps>();
+const emit = defineEmits<NavigationMenuLinkEmits>();
+
+const { forwardRef } = useForwardExpose();
+
+function handleClick(event: MouseEvent) {
+  const target = event.currentTarget as HTMLElement | null;
+  if (!target) return;
+  const linkSelectEvent = new CustomEvent(LINK_SELECT_EVENT, {
+    bubbles: true,
+    cancelable: true,
+  });
+  // Browser event handlers run synchronously; listen once for prevention semantics.
+  target.addEventListener(LINK_SELECT_EVENT, e => emit('select', e as CustomEvent), { once: true });
+  target.dispatchEvent(linkSelectEvent);
+  if (!linkSelectEvent.defaultPrevented && !event.metaKey) {
+    const rootContentDismissEvent = new CustomEvent(EVENT_ROOT_CONTENT_DISMISS, {
+      bubbles: true,
+      cancelable: true,
+    });
+    target.dispatchEvent(rootContentDismissEvent);
+  }
+}
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :data-active="active ? '' : undefined"
+    :aria-current="active ? 'page' : undefined"
+    :[COLLECTION_ITEM_ATTR]="''"
+    @click="handleClick"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/navigation-menu/NavigationMenuList.vue b/vue/primitives/src/navigation-menu/NavigationMenuList.vue
new file mode 100644
index 0000000..381d372
--- /dev/null
+++ b/vue/primitives/src/navigation-menu/NavigationMenuList.vue
@@ -0,0 +1,45 @@
+<script lang="ts">
+// This component takes no props of its own (it renders a fixed wrapper + RovingFocusGroup
+// and forwards $attrs). The empty interface is the intentional public prop contract.
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface NavigationMenuListProps {}
+</script>
+
+<script setup lang="ts">
+import { onMounted, watch } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { RovingFocusGroup } from '../roving-focus';
+import { useNavigationMenuContext } from './context';
+
+defineOptions({ inheritAttrs: false });
+
+defineProps<NavigationMenuListProps>();
+
+const menuContext = useNavigationMenuContext();
+const { forwardRef, currentElement } = useForwardExpose();
+
+onMounted(() => {
+  menuContext.onIndicatorTrackChange(currentElement.value);
+});
+
+watch(currentElement, (el) => {
+  menuContext.onIndicatorTrackChange(el);
+});
+</script>
+
+<template>
+  <div :ref="forwardRef" data-primitives-navigation-menu-list-wrapper style="position: relative">
+    <RovingFocusGroup
+      v-bind="$attrs"
+      as="ul"
+      :orientation="menuContext.orientation"
+      :dir="menuContext.dir.value"
+      :loop="false"
+      :data-orientation="menuContext.orientation"
+      data-primitives-navigation-menu-list
+    >
+      <slot />
+    </RovingFocusGroup>
+  </div>
+</template>
diff --git a/vue/primitives/src/navigation-menu/NavigationMenuRoot.vue b/vue/primitives/src/navigation-menu/NavigationMenuRoot.vue
new file mode 100644
index 0000000..c4f56b4
--- /dev/null
+++ b/vue/primitives/src/navigation-menu/NavigationMenuRoot.vue
@@ -0,0 +1,223 @@
+<script lang="ts">
+import type { Direction } from '../config-provider';
+import type { Orientation } from '../roving-focus';
+
+export interface NavigationMenuRootProps {
+  /** Uncontrolled initial value. */
+  defaultValue?: string;
+  /** Reading direction. Falls back to `ConfigProvider`. */
+  dir?: Direction;
+  /** Menu orientation. @default 'horizontal' */
+  orientation?: Orientation;
+  /**
+   * Time (ms) between pointer entering a trigger and the menu opening.
+   * @default 200
+   */
+  delayDuration?: number;
+  /**
+   * Window (ms) during which switching triggers skips `delayDuration`.
+   * @default 300
+   */
+  skipDelayDuration?: number;
+  /** Disable opening via click. @default false */
+  disableClickTrigger?: boolean;
+  /** Disable opening via hover. @default false */
+  disableHoverTrigger?: boolean;
+  /** Disable closing when pointer leaves the menu. @default false */
+  disablePointerLeaveClose?: boolean;
+  /** Unmount content when hidden. @default true */
+  unmountOnHide?: boolean;
+}
+
+export interface NavigationMenuRootEmits {
+  'update:modelValue': [value: string];
+}
+</script>
+
+<script setup lang="ts">
+import type { Ref } from 'vue';
+
+import { computed, onScopeDispose, ref, shallowRef, toRef, watchEffect } from 'vue';
+
+import { useForwardExpose, useId } from '@robonen/vue';
+import { useCollectionProvider } from '../collection';
+import { useConfig } from '../config-provider';
+import { Primitive } from '../primitive';
+import { provideNavigationMenuContext } from './context';
+import { EVENT_ROOT_CONTENT_DISMISS } from './utils';
+
+defineOptions({ inheritAttrs: false });
+
+const {
+  defaultValue,
+  dir,
+  orientation = 'horizontal',
+  delayDuration = 200,
+  skipDelayDuration = 300,
+  disableClickTrigger = false,
+  disableHoverTrigger = false,
+  disablePointerLeaveClose = false,
+  unmountOnHide = true,
+} = defineProps<NavigationMenuRootProps>();
+
+defineEmits<NavigationMenuRootEmits>();
+
+defineSlots<{
+  default?: (props: { modelValue: string }) => any;
+}>();
+
+const config = useConfig();
+const dirRef = computed<Direction>(() => dir ?? config.dir.value);
+
+const localValue = ref<string>(defaultValue ?? '');
+/** Controlled active item value. Use `v-model`. */
+const modelValue = defineModel<string | undefined>({
+  default: undefined,
+  get: v => v ?? localValue.value,
+  set: (v) => {
+    const next = v ?? '';
+    localValue.value = next;
+    return next;
+  },
+}) as unknown as Ref<string>;
+
+const previousValue = ref<string>('');
+
+const baseId = useId(undefined, 'primitives-navigation-menu');
+const { forwardRef, currentElement: rootNavigationMenu } = useForwardExpose();
+
+const indicatorTrack = shallowRef<HTMLElement | undefined>(undefined);
+const viewport = shallowRef<HTMLElement | undefined>(undefined);
+const activeTrigger = shallowRef<HTMLElement | undefined>(undefined);
+
+const { getItems, CollectionSlot } = useCollectionProvider<{ value: string }>();
+
+// Manual debounce — open delay shrinks to 150ms once the menu is open or while
+// the skip window is active (so moving between triggers feels instantaneous).
+let debounceTimer: ReturnType<typeof setTimeout> | undefined;
+let skipDelayTimer: ReturnType<typeof setTimeout> | undefined;
+const isDelaySkipped = ref(false);
+
+function clearDebounce() {
+  if (debounceTimer !== undefined) {
+    clearTimeout(debounceTimer);
+    debounceTimer = undefined;
+  }
+}
+
+function clearSkipDelay() {
+  if (skipDelayTimer !== undefined) {
+    clearTimeout(skipDelayTimer);
+    skipDelayTimer = undefined;
+  }
+}
+
+function triggerSkipDelay() {
+  clearSkipDelay();
+  isDelaySkipped.value = true;
+  skipDelayTimer = setTimeout(() => {
+    isDelaySkipped.value = false;
+    skipDelayTimer = undefined;
+  }, skipDelayDuration);
+}
+
+const computedDelay = computed(() => {
+  const isOpen = modelValue.value !== '';
+  if (isOpen || isDelaySkipped.value) return 150;
+  return delayDuration;
+});
+
+function debouncedSet(val: string) {
+  clearDebounce();
+  debounceTimer = setTimeout(() => {
+    previousValue.value = modelValue.value;
+    modelValue.value = val;
+    debounceTimer = undefined;
+  }, computedDelay.value);
+}
+
+function cancelDebounce() {
+  clearDebounce();
+}
+
+watchEffect(() => {
+  if (!modelValue.value) return;
+  const items = getItems().map(i => i.ref);
+  // Trigger id pattern: `${baseId}-trigger-${value}`
+  const matched = items.find(item => item.id.includes(`-trigger-${modelValue.value}`));
+  if (matched) activeTrigger.value = matched;
+});
+
+function onItemDismiss() {
+  previousValue.value = modelValue.value;
+  modelValue.value = '';
+}
+
+// Custom event isn't part of HTMLElementEventMap so wire it up manually.
+watchEffect((onCleanup) => {
+  const el = rootNavigationMenu.value;
+  if (!el) return;
+  el.addEventListener(EVENT_ROOT_CONTENT_DISMISS, onItemDismiss);
+  onCleanup(() => el.removeEventListener(EVENT_ROOT_CONTENT_DISMISS, onItemDismiss));
+});
+
+onScopeDispose(() => {
+  clearDebounce();
+  clearSkipDelay();
+});
+
+provideNavigationMenuContext({
+  isRootMenu: true,
+  modelValue,
+  previousValue,
+  baseId,
+  dir: dirRef,
+  orientation,
+  disableClickTrigger: toRef(() => disableClickTrigger),
+  disableHoverTrigger: toRef(() => disableHoverTrigger),
+  disablePointerLeaveClose: toRef(() => disablePointerLeaveClose),
+  unmountOnHide: toRef(() => unmountOnHide),
+  rootNavigationMenu,
+  activeTrigger,
+  onActiveTriggerChange: (el) => { activeTrigger.value = el; },
+  indicatorTrack,
+  onIndicatorTrackChange: (el) => { indicatorTrack.value = el; },
+  viewport,
+  onViewportChange: (el) => { viewport.value = el; },
+  onTriggerEnter: (val) => {
+    debouncedSet(val);
+  },
+  onTriggerLeave: () => {
+    triggerSkipDelay();
+    debouncedSet('');
+  },
+  onContentEnter: () => {
+    cancelDebounce();
+  },
+  onContentLeave: () => {
+    if (!disablePointerLeaveClose) debouncedSet('');
+  },
+  onItemSelect: (val) => {
+    previousValue.value = modelValue.value;
+    modelValue.value = val;
+  },
+  onItemDismiss,
+});
+
+</script>
+
+<template>
+  <CollectionSlot>
+    <Primitive
+      :ref="forwardRef"
+      as="nav"
+      :aria-label="($attrs['aria-label'] ?? 'Main') as string"
+      :data-orientation="orientation"
+      :dir="dirRef"
+      data-primitives-navigation-menu
+      v-bind="$attrs"
+    >
+      <slot :model-value="modelValue" />
+    </Primitive>
+  </CollectionSlot>
+</template>
diff --git a/vue/primitives/src/navigation-menu/NavigationMenuSub.vue b/vue/primitives/src/navigation-menu/NavigationMenuSub.vue
new file mode 100644
index 0000000..29ded50
--- /dev/null
+++ b/vue/primitives/src/navigation-menu/NavigationMenuSub.vue
@@ -0,0 +1,116 @@
+<script lang="ts">
+import type { Orientation } from '../roving-focus';
+
+export interface NavigationMenuSubProps {
+  /** Uncontrolled initial value. */
+  defaultValue?: string;
+  /** Submenu orientation. @default 'horizontal' */
+  orientation?: Orientation;
+}
+
+export interface NavigationMenuSubEmits {
+  'update:modelValue': [value: string];
+}
+</script>
+
+<script setup lang="ts">
+import type { Ref } from 'vue';
+
+import { ref, shallowRef, watchEffect } from 'vue';
+
+import { useForwardExpose, useId } from '@robonen/vue';
+import { useCollectionProvider } from '../collection';
+import { Primitive } from '../primitive';
+import { provideNavigationMenuContext, useNavigationMenuContext } from './context';
+
+defineOptions({ inheritAttrs: false });
+
+const { defaultValue, orientation = 'horizontal' } = defineProps<NavigationMenuSubProps>();
+
+defineEmits<NavigationMenuSubEmits>();
+
+defineSlots<{
+  default?: (props: { modelValue: string }) => any;
+}>();
+
+const localValue = ref<string>(defaultValue ?? '');
+/** Controlled active value of the submenu. Use `v-model`. */
+const modelValue = defineModel<string | undefined>({
+  default: undefined,
+  get: v => v ?? localValue.value,
+  set: (v) => {
+    const next = v ?? '';
+    localValue.value = next;
+    return next;
+  },
+}) as unknown as Ref<string>;
+
+const previousValue = ref<string>('');
+
+const parentContext = useNavigationMenuContext();
+const { forwardRef, currentElement } = useForwardExpose();
+
+const indicatorTrack = shallowRef<HTMLElement | undefined>(undefined);
+const viewport = shallowRef<HTMLElement | undefined>(undefined);
+const activeTrigger = shallowRef<HTMLElement | undefined>(undefined);
+
+const { getItems, CollectionSlot } = useCollectionProvider<{ value: string }>();
+
+const baseId = useId(undefined, 'primitives-navigation-menu-sub');
+
+watchEffect(() => {
+  if (!modelValue.value) return;
+  const items = getItems().map(i => i.ref);
+  const matched = items.find(item => item.id.includes(`-trigger-${modelValue.value}`));
+  if (matched) activeTrigger.value = matched;
+});
+
+provideNavigationMenuContext({
+  ...parentContext,
+  isRootMenu: false,
+  modelValue,
+  previousValue,
+  baseId,
+  orientation,
+  rootNavigationMenu: currentElement,
+  activeTrigger,
+  onActiveTriggerChange: (el) => { activeTrigger.value = el; },
+  indicatorTrack,
+  onIndicatorTrackChange: (el) => { indicatorTrack.value = el; },
+  viewport,
+  onViewportChange: (el) => { viewport.value = el; },
+  onTriggerEnter: (val) => {
+    modelValue.value = val;
+  },
+  onTriggerLeave: () => {
+    /* submenus don't auto-close on trigger leave */
+  },
+  onContentEnter: () => {
+    /* no-op for submenus */
+  },
+  onContentLeave: () => {
+    /* no-op for submenus */
+  },
+  onItemSelect: (val) => {
+    previousValue.value = modelValue.value;
+    modelValue.value = val;
+  },
+  onItemDismiss: () => {
+    previousValue.value = modelValue.value;
+    modelValue.value = '';
+  },
+});
+</script>
+
+<template>
+  <CollectionSlot>
+    <Primitive
+      :ref="forwardRef"
+      :data-orientation="orientation"
+      data-primitives-navigation-menu
+      v-bind="$attrs"
+    >
+      <slot :model-value="modelValue" />
+    </Primitive>
+  </CollectionSlot>
+</template>
diff --git a/vue/primitives/src/navigation-menu/NavigationMenuTrigger.vue b/vue/primitives/src/navigation-menu/NavigationMenuTrigger.vue
new file mode 100644
index 0000000..0bd716c
--- /dev/null
+++ b/vue/primitives/src/navigation-menu/NavigationMenuTrigger.vue
@@ -0,0 +1,152 @@
+<script lang="ts">
+import type { ComponentPublicInstance } from 'vue';
+
+export interface NavigationMenuTriggerProps {
+  /** Disables interaction with this trigger. */
+  disabled?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+
+import { unrefElement, useForwardExpose } from '@robonen/vue';
+import { useCollectionInjector } from '../collection';
+import { Primitive } from '../primitive';
+import { RovingFocusItem } from '../roving-focus';
+import { VisuallyHidden } from '../visually-hidden';
+import { useNavigationMenuContext, useNavigationMenuItemContext } from './context';
+import { getOpenState } from './utils';
+
+defineOptions({ inheritAttrs: false });
+
+const { disabled = false } = defineProps<NavigationMenuTriggerProps>();
+
+const menuContext = useNavigationMenuContext();
+const itemContext = useNavigationMenuItemContext();
+
+const { CollectionItem } = useCollectionInjector<{ value: string }>();
+const { forwardRef, currentElement: triggerElement } = useForwardExpose();
+
+// Auto-reset flag that suppresses click→toggle right after a pointermove open.
+const hasPointerMoveOpened = ref(false);
+let pointerMoveResetTimer: ReturnType<typeof setTimeout> | undefined;
+function markPointerMoveOpened() {
+  hasPointerMoveOpened.value = true;
+  if (pointerMoveResetTimer !== undefined) clearTimeout(pointerMoveResetTimer);
+  pointerMoveResetTimer = setTimeout(() => {
+    hasPointerMoveOpened.value = false;
+    pointerMoveResetTimer = undefined;
+  }, 300);
+}
+
+const wasClickClose = ref(false);
+
+const open = computed(() => itemContext.value === menuContext.modelValue.value);
+
+watch(triggerElement, (el) => {
+  itemContext.onTriggerChange(el ?? undefined);
+});
+
+onMounted(() => {
+  if (triggerElement.value) itemContext.onTriggerChange(triggerElement.value);
+});
+
+function handlePointerEnter() {
+  if (menuContext.disableHoverTrigger.value) return;
+  wasClickClose.value = false;
+  itemContext.wasEscapeCloseRef.value = false;
+}
+
+function handlePointerMove(ev: PointerEvent) {
+  if (menuContext.disableHoverTrigger.value) return;
+  if (ev.pointerType !== 'mouse') return;
+  if (disabled || wasClickClose.value || itemContext.wasEscapeCloseRef.value || hasPointerMoveOpened.value) return;
+  menuContext.onTriggerEnter(itemContext.value);
+  markPointerMoveOpened();
+}
+
+function handlePointerLeave(ev: PointerEvent) {
+  if (menuContext.disableHoverTrigger.value) return;
+  if (ev.pointerType !== 'mouse') return;
+  if (disabled) return;
+  menuContext.onTriggerLeave();
+  hasPointerMoveOpened.value = false;
+}
+
+function handleClick(event: MouseEvent | PointerEvent) {
+  const isMouse = !('pointerType' in event) || (event as PointerEvent).pointerType === 'mouse';
+  if (isMouse && menuContext.disableClickTrigger.value) return;
+  // If pointermove already opened the menu, ignore the resulting click.
+  if (hasPointerMoveOpened.value) return;
+  if (open.value) menuContext.onItemSelect('');
+  else menuContext.onItemSelect(itemContext.value);
+  wasClickClose.value = open.value;
+}
+
+function handleKeydown(ev: KeyboardEvent) {
+  const verticalEntryKey = menuContext.dir.value === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
+  const entryKey = menuContext.orientation === 'horizontal' ? 'ArrowDown' : verticalEntryKey;
+  if (open.value && ev.key === entryKey) {
+    itemContext.onEntryKeyDown();
+    ev.preventDefault();
+    ev.stopPropagation();
+  }
+}
+
+function setFocusProxyRef(node: Element | ComponentPublicInstance | null) {
+  if (!node) {
+    itemContext.onFocusProxyChange(undefined);
+    return;
+  }
+  const el = unrefElement(node as Parameters<typeof unrefElement>[0]);
+  if (el instanceof HTMLElement) itemContext.onFocusProxyChange(el);
+}
+
+function handleVisuallyHiddenFocus(ev: FocusEvent) {
+  const content = document.getElementById(itemContext.contentId);
+  const prevFocused = ev.relatedTarget as HTMLElement | null;
+  const wasTriggerFocused = prevFocused === triggerElement.value;
+  const wasFocusFromContent = !!content?.contains(prevFocused);
+  if (wasTriggerFocused || !wasFocusFromContent)
+    itemContext.onFocusProxyEnter(wasTriggerFocused ? 'start' : 'end');
+}
+</script>
+
+<template>
+  <CollectionItem :value="{ value: itemContext.value }">
+    <RovingFocusItem :focusable="!disabled">
+      <Primitive
+        :id="itemContext.triggerId"
+        :ref="forwardRef"
+        as="button"
+        type="button"
+        :disabled="disabled || undefined"
+        :data-disabled="disabled ? '' : undefined"
+        :data-state="getOpenState(menuContext.modelValue.value, itemContext.value)"
+        :aria-expanded="open"
+        :aria-controls="itemContext.contentId"
+        data-primitives-navigation-menu-trigger
+        data-primitives-collection-item
+        v-bind="$attrs"
+        @pointerenter="handlePointerEnter"
+        @pointermove="handlePointerMove"
+        @pointerleave="handlePointerLeave"
+        @click="handleClick"
+        @keydown="handleKeydown"
+      >
+        <slot />
+      </Primitive>
+    </RovingFocusItem>
+  </CollectionItem>
+
+  <template v-if="open">
+    <VisuallyHidden
+      :ref="setFocusProxyRef"
+      aria-hidden="true"
+      :tabindex="0"
+      @focus="handleVisuallyHiddenFocus"
+    />
+    <span v-if="menuContext.viewport.value" :aria-owns="itemContext.contentId" />
+  </template>
+</template>
diff --git a/vue/primitives/src/navigation-menu/NavigationMenuViewport.vue b/vue/primitives/src/navigation-menu/NavigationMenuViewport.vue
new file mode 100644
index 0000000..6d674ac
--- /dev/null
+++ b/vue/primitives/src/navigation-menu/NavigationMenuViewport.vue
@@ -0,0 +1,121 @@
+<script lang="ts">
+export interface NavigationMenuViewportProps {
+  /** Keep mounted regardless of open state. */
+  forceMount?: boolean;
+  /**
+   * Horizontal alignment of the viewport relative to the active trigger.
+   * @default 'center'
+   */
+  align?: 'start' | 'center' | 'end';
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onScopeDispose, ref, shallowRef, watch } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { Presence } from '../presence';
+import { Primitive } from '../primitive';
+import { useNavigationMenuContext } from './context';
+import { clamp, whenMouse } from './utils';
+
+defineOptions({ inheritAttrs: false });
+
+const { forceMount = false, align = 'center' } = defineProps<NavigationMenuViewportProps>();
+
+const menuContext = useNavigationMenuContext();
+const { forwardRef, currentElement } = useForwardExpose();
+
+const open = computed(() => menuContext.modelValue.value !== '');
+const present = computed(() => open.value);
+
+const size = ref<{ width: number; height: number } | undefined>();
+const activeContentEl = shallowRef<HTMLElement | undefined>(undefined);
+
+watch(currentElement, (el) => {
+  menuContext.onViewportChange(el);
+});
+
+// Track which content is currently open and observe its size.
+let contentObserver: ResizeObserver | undefined;
+function watchOpenContent() {
+  contentObserver?.disconnect();
+  const root = currentElement.value;
+  if (!root) return;
+  const openContent = root.querySelector<HTMLElement>('[data-state=open]');
+  activeContentEl.value = openContent ?? undefined;
+  if (!openContent) return;
+  contentObserver = new ResizeObserver(() => {
+    size.value = { width: openContent.offsetWidth, height: openContent.offsetHeight };
+  });
+  contentObserver.observe(openContent);
+  size.value = { width: openContent.offsetWidth, height: openContent.offsetHeight };
+}
+
+watch(() => menuContext.modelValue.value, () => {
+  // Defer to next microtask so the new content has mounted.
+  queueMicrotask(watchOpenContent);
+});
+
+watch(currentElement, () => {
+  if (currentElement.value) watchOpenContent();
+});
+
+onScopeDispose(() => {
+  contentObserver?.disconnect();
+});
+
+// Position based on active trigger, clamped to viewport edges.
+const positionStyle = computed(() => {
+  const viewport = currentElement.value;
+  const trigger = menuContext.activeTrigger.value;
+  if (!viewport || !trigger || !size.value) return {};
+  const triggerRect = trigger.getBoundingClientRect();
+  const viewportWidth = size.value.width;
+  let left: number;
+  switch (align) {
+    case 'start':
+      left = triggerRect.left;
+      break;
+    case 'end':
+      left = triggerRect.right - viewportWidth;
+      break;
+    default:
+      left = triggerRect.left + (triggerRect.width / 2) - (viewportWidth / 2);
+  }
+  const maxLeft = window.innerWidth - viewportWidth - 10;
+  left = clamp(left, 10, Math.max(10, maxLeft));
+  const top = triggerRect.bottom;
+  return {
+    '--primitives-navigation-menu-viewport-width': `${size.value.width}px`,
+    '--primitives-navigation-menu-viewport-height': `${size.value.height}px`,
+    '--primitives-navigation-menu-viewport-left': `${left}px`,
+    '--primitives-navigation-menu-viewport-top': `${top}px`,
+  };
+});
+
+function handlePointerEnter() {
+  menuContext.onContentEnter(menuContext.modelValue.value);
+}
+
+const handlePointerLeave = whenMouse(() => {
+  menuContext.onContentLeave();
+});
+</script>
+
+<template>
+  <Presence :present="present" :force-mount="forceMount || !menuContext.unmountOnHide.value">
+    <Primitive
+      :ref="forwardRef"
+      :data-state="open ? 'open' : 'closed'"
+      :data-orientation="menuContext.orientation"
+      data-primitives-navigation-menu-viewport
+      :style="positionStyle"
+      v-bind="$attrs"
+      @pointerenter="handlePointerEnter"
+      @pointerleave="handlePointerLeave"
+    >
+      <slot />
+    </Primitive>
+  </Presence>
+</template>
diff --git a/vue/primitives/src/navigation-menu/__test__/NavigationMenu.landmark.test.ts b/vue/primitives/src/navigation-menu/__test__/NavigationMenu.landmark.test.ts
new file mode 100644
index 0000000..373648d
--- /dev/null
+++ b/vue/primitives/src/navigation-menu/__test__/NavigationMenu.landmark.test.ts
@@ -0,0 +1,56 @@
+import type { VueWrapper } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+import { afterEach, describe, expect, it } from 'vitest';
+import { defineComponent, h } from 'vue';
+
+import { NavigationMenuList, NavigationMenuRoot } from '../index';
+
+const wrappers: Array<VueWrapper<any>> = [];
+
+afterEach(() => {
+  while (wrappers.length) wrappers.pop()!.unmount();
+  document.body.innerHTML = '';
+});
+
+function track<T extends VueWrapper<any>>(w: T): T {
+  wrappers.push(w);
+  return w;
+}
+
+function mountRoot(attrs: Record<string, unknown> = {}) {
+  const Harness = defineComponent({
+    setup() {
+      return () => h(NavigationMenuRoot, attrs, {
+        default: () => h(NavigationMenuList),
+      });
+    },
+  });
+  return track(mount(Harness, { attachTo: document.body }));
+}
+
+describe('navigation-menu — root landmark a11y', () => {
+  it('renders a <nav> element (implicit role=navigation)', () => {
+    mountRoot();
+    const nav = document.querySelector('nav');
+    expect(nav).toBeTruthy();
+    // <nav> has implicit role="navigation" — no explicit role attribute needed.
+  });
+
+  it('falls back to aria-label="Main" when no label is supplied', () => {
+    mountRoot();
+    const nav = document.querySelector('nav') as HTMLElement;
+    expect(nav.getAttribute('aria-label')).toBe('Main');
+  });
+
+  it('honours a user-supplied aria-label', () => {
+    mountRoot({ 'aria-label': 'Primary site navigation' });
+    const nav = document.querySelector('nav') as HTMLElement;
+    expect(nav.getAttribute('aria-label')).toBe('Primary site navigation');
+  });
+
+  it('exposes data-orientation matching the orientation prop', () => {
+    mountRoot({ orientation: 'vertical' });
+    const nav = document.querySelector('nav') as HTMLElement;
+    expect(nav.getAttribute('data-orientation')).toBe('vertical');
+  });
+});
diff --git a/vue/primitives/src/navigation-menu/context.ts b/vue/primitives/src/navigation-menu/context.ts
new file mode 100644
index 0000000..b936e16
--- /dev/null
+++ b/vue/primitives/src/navigation-menu/context.ts
@@ -0,0 +1,65 @@
+import type { ComputedRef, Ref, ShallowRef } from 'vue';
+import type { Direction } from '../config-provider';
+import type { Orientation } from '../roving-focus';
+
+import { useContextFactory } from '@robonen/vue';
+
+/**
+ * Context shared by `NavigationMenuRoot` and `NavigationMenuSub`. Children
+ * (item / list / trigger / content / viewport / indicator) read from this
+ * single context regardless of whether they are inside a root or a submenu.
+ */
+export interface NavigationMenuContext {
+  isRootMenu: boolean;
+  modelValue: Ref<string>;
+  previousValue: Ref<string>;
+  baseId: ComputedRef<string> | Ref<string>;
+  dir: Ref<Direction>;
+  orientation: Orientation;
+  disableClickTrigger: Ref<boolean>;
+  disableHoverTrigger: Ref<boolean>;
+  disablePointerLeaveClose: Ref<boolean>;
+  unmountOnHide: Ref<boolean>;
+
+  rootNavigationMenu: ShallowRef<HTMLElement | undefined>;
+  activeTrigger: ShallowRef<HTMLElement | undefined>;
+  onActiveTriggerChange: (el: HTMLElement | undefined) => void;
+
+  indicatorTrack: ShallowRef<HTMLElement | undefined>;
+  onIndicatorTrackChange: (el: HTMLElement | undefined) => void;
+
+  viewport: ShallowRef<HTMLElement | undefined>;
+  onViewportChange: (el: HTMLElement | undefined) => void;
+
+  onTriggerEnter: (itemValue: string) => void;
+  onTriggerLeave: () => void;
+  onContentEnter: (itemValue: string) => void;
+  onContentLeave: () => void;
+  onItemSelect: (itemValue: string) => void;
+  onItemDismiss: () => void;
+}
+
+export interface NavigationMenuItemContext {
+  value: string;
+  contentId: string;
+  triggerId: string;
+  triggerRef: ShallowRef<HTMLElement | undefined>;
+  onTriggerChange: (el: HTMLElement | undefined) => void;
+  focusProxyRef: ShallowRef<HTMLElement | undefined>;
+  onFocusProxyChange: (el: HTMLElement | undefined) => void;
+  wasEscapeCloseRef: Ref<boolean>;
+  onEntryKeyDown: () => void;
+  onFocusProxyEnter: (side: 'start' | 'end') => void;
+  onContentFocusOutside: () => void;
+  onRootContentClose: () => void;
+}
+
+export const {
+  inject: useNavigationMenuContext,
+  provide: provideNavigationMenuContext,
+} = useContextFactory<NavigationMenuContext>('NavigationMenu');
+
+export const {
+  inject: useNavigationMenuItemContext,
+  provide: provideNavigationMenuItemContext,
+} = useContextFactory<NavigationMenuItemContext>('NavigationMenuItem');
diff --git a/vue/primitives/src/navigation-menu/index.ts b/vue/primitives/src/navigation-menu/index.ts
new file mode 100644
index 0000000..b45f624
--- /dev/null
+++ b/vue/primitives/src/navigation-menu/index.ts
@@ -0,0 +1,31 @@
+export { default as NavigationMenuRoot } from './NavigationMenuRoot.vue';
+export { default as NavigationMenuSub } from './NavigationMenuSub.vue';
+export { default as NavigationMenuList } from './NavigationMenuList.vue';
+export { default as NavigationMenuItem } from './NavigationMenuItem.vue';
+export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue';
+export { default as NavigationMenuLink } from './NavigationMenuLink.vue';
+export { default as NavigationMenuContent } from './NavigationMenuContent.vue';
+export { default as NavigationMenuContentImpl } from './NavigationMenuContentImpl.vue';
+export { default as NavigationMenuViewport } from './NavigationMenuViewport.vue';
+export { default as NavigationMenuIndicator } from './NavigationMenuIndicator.vue';
+
+export {
+  useNavigationMenuContext,
+  useNavigationMenuItemContext,
+} from './context';
+
+export type {
+  NavigationMenuContext,
+  NavigationMenuItemContext,
+} from './context';
+
+export type { NavigationMenuRootProps, NavigationMenuRootEmits } from './NavigationMenuRoot.vue';
+export type { NavigationMenuSubProps, NavigationMenuSubEmits } from './NavigationMenuSub.vue';
+export type { NavigationMenuListProps } from './NavigationMenuList.vue';
+export type { NavigationMenuItemProps } from './NavigationMenuItem.vue';
+export type { NavigationMenuTriggerProps } from './NavigationMenuTrigger.vue';
+export type { NavigationMenuLinkProps, NavigationMenuLinkEmits } from './NavigationMenuLink.vue';
+export type { NavigationMenuContentProps, NavigationMenuContentEmits } from './NavigationMenuContent.vue';
+export type { NavigationMenuContentImplProps, NavigationMenuContentImplEmits } from './NavigationMenuContentImpl.vue';
+export type { NavigationMenuViewportProps } from './NavigationMenuViewport.vue';
+export type { NavigationMenuIndicatorProps } from './NavigationMenuIndicator.vue';
diff --git a/vue/primitives/src/navigation-menu/utils.ts b/vue/primitives/src/navigation-menu/utils.ts
new file mode 100644
index 0000000..cbfe734
--- /dev/null
+++ b/vue/primitives/src/navigation-menu/utils.ts
@@ -0,0 +1,51 @@
+/**
+ * Returns the open state string for the current item value vs the active menu value.
+ */
+export function getOpenState(value: string, itemValue: string): 'open' | 'closed' {
+  return value === itemValue ? 'open' : 'closed';
+}
+
+export function makeTriggerId(baseId: string, value: string): string {
+  return `${baseId}-trigger-${value}`;
+}
+
+export function makeContentId(baseId: string, value: string): string {
+  return `${baseId}-content-${value}`;
+}
+
+/** Only call `handler` when the pointer device is a mouse. */
+export function whenMouse<E extends PointerEvent>(handler: (event: E) => void): (event: E) => void {
+  return (event: E) => {
+    if (event.pointerType === 'mouse') handler(event);
+  };
+}
+
+/**
+ * Temporarily removes elements from the tab order while content is closed, returning
+ * a restore function. Used so background content keeps its tabindex when re-opened.
+ */
+export function removeFromTabOrder(candidates: HTMLElement[]): () => void {
+  for (const c of candidates) {
+    c.dataset['tabindex'] = c.getAttribute('tabindex') ?? '';
+    c.setAttribute('tabindex', '-1');
+  }
+  return () => {
+    for (const c of candidates) {
+      const prev = c.dataset['tabindex'] ?? '';
+      if (prev === '') c.removeAttribute('tabindex');
+      else c.setAttribute('tabindex', prev);
+    }
+  };
+}
+
+export function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}
+
+/** Selector identifying the link/item nodes for arrow navigation inside content. */
+export const COLLECTION_ITEM_ATTR = 'data-primitives-collection-item';
+
+/** Custom event dispatched by a `NavigationMenuLink` selection. */
+export const LINK_SELECT_EVENT = 'navigationMenu.linkSelect';
+/** Custom event bubbled to the root content when an item dismisses the menu. */
+export const EVENT_ROOT_CONTENT_DISMISS = 'navigationMenu.rootContentDismiss';
diff --git a/vue/primitives/src/number-field/NumberFieldDecrement.vue b/vue/primitives/src/number-field/NumberFieldDecrement.vue
new file mode 100644
index 0000000..fa7e10f
--- /dev/null
+++ b/vue/primitives/src/number-field/NumberFieldDecrement.vue
@@ -0,0 +1,33 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+export interface NumberFieldDecrementProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { useNumberFieldContext } from './context';
+
+const { as = 'button' } = defineProps<NumberFieldDecrementProps>();
+const { forwardRef } = useForwardExpose();
+const ctx = useNumberFieldContext();
+
+function onClick() {
+  ctx.decrement();
+}
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :type="as === 'button' ? 'button' : undefined"
+    tabindex="-1"
+    aria-hidden="true"
+    :disabled="ctx.disabled.value || ctx.readonly.value || undefined"
+    :data-disabled="(ctx.disabled.value || ctx.readonly.value) ? '' : undefined"
+    @click="onClick"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/number-field/NumberFieldIncrement.vue b/vue/primitives/src/number-field/NumberFieldIncrement.vue
new file mode 100644
index 0000000..6bca85d
--- /dev/null
+++ b/vue/primitives/src/number-field/NumberFieldIncrement.vue
@@ -0,0 +1,33 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+export interface NumberFieldIncrementProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { useNumberFieldContext } from './context';
+
+const { as = 'button' } = defineProps<NumberFieldIncrementProps>();
+const { forwardRef } = useForwardExpose();
+const ctx = useNumberFieldContext();
+
+function onClick() {
+  ctx.increment();
+}
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :type="as === 'button' ? 'button' : undefined"
+    tabindex="-1"
+    aria-hidden="true"
+    :disabled="ctx.disabled.value || ctx.readonly.value || undefined"
+    :data-disabled="(ctx.disabled.value || ctx.readonly.value) ? '' : undefined"
+    @click="onClick"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/number-field/NumberFieldInput.vue b/vue/primitives/src/number-field/NumberFieldInput.vue
new file mode 100644
index 0000000..8a80e45
--- /dev/null
+++ b/vue/primitives/src/number-field/NumberFieldInput.vue
@@ -0,0 +1,87 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+export interface NumberFieldInputProps extends PrimitiveProps {
+
+  placeholder?: string;
+  name?: string;
+  required?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useNumberFieldContext } from './context';
+
+const props = defineProps<NumberFieldInputProps>();
+const ctx = useNumberFieldContext();
+
+const displayValue = computed(() => ctx.value.value === null ? '' : String(ctx.value.value));
+
+function parse(raw: string): number | null {
+  const trimmed = raw.trim();
+  if (trimmed === '') return null;
+  const n = Number(trimmed);
+  return Number.isFinite(n) ? n : null;
+}
+
+function onInput(event: Event): void {
+  const target = event.target as HTMLInputElement;
+  ctx.setValue(parse(target.value));
+}
+
+function onKeyDown(event: KeyboardEvent): void {
+  if (ctx.disabled.value || ctx.readonly.value) return;
+  switch (event.key) {
+    case 'ArrowUp':
+      event.preventDefault();
+      ctx.increment();
+      break;
+    case 'ArrowDown':
+      event.preventDefault();
+      ctx.decrement();
+      break;
+    case 'PageUp':
+      event.preventDefault();
+      ctx.increment(ctx.step.value * 10);
+      break;
+    case 'PageDown':
+      event.preventDefault();
+      ctx.decrement(ctx.step.value * 10);
+      break;
+    case 'Home':
+      if (ctx.min.value !== undefined) {
+        event.preventDefault();
+        ctx.setValue(ctx.min.value);
+      }
+      break;
+    case 'End':
+      if (ctx.max.value !== undefined) {
+        event.preventDefault();
+        ctx.setValue(ctx.max.value);
+      }
+      break;
+  }
+}
+</script>
+
+<template>
+  <input
+    :id="ctx.inputId"
+    role="spinbutton"
+    inputmode="decimal"
+    autocomplete="off"
+    :aria-valuemin="ctx.min.value"
+    :aria-valuemax="ctx.max.value"
+    :aria-valuenow="ctx.value.value ?? undefined"
+    :aria-disabled="ctx.disabled.value || undefined"
+    :aria-readonly="ctx.readonly.value || undefined"
+    :disabled="ctx.disabled.value || undefined"
+    :readonly="ctx.readonly.value || undefined"
+    :placeholder="props.placeholder"
+    :name="props.name"
+    :required="props.required || undefined"
+    :value="displayValue"
+    @input="onInput"
+    @keydown="onKeyDown"
+  >
+</template>
diff --git a/vue/primitives/src/number-field/NumberFieldRoot.vue b/vue/primitives/src/number-field/NumberFieldRoot.vue
new file mode 100644
index 0000000..a598fc5
--- /dev/null
+++ b/vue/primitives/src/number-field/NumberFieldRoot.vue
@@ -0,0 +1,89 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+export interface NumberFieldRootProps extends PrimitiveProps {
+  modelValue?: number | null;
+  defaultValue?: number | null;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  readonly?: boolean;
+
+}
+
+export interface NumberFieldRootEmits {
+  'update:modelValue': [value: number | null];
+  valueChange: [value: number | null];
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { ref, toRef, watch } from 'vue';
+import { provideNumberFieldContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+import { clamp } from '@robonen/stdlib';
+import { useId } from '../config-provider';
+
+const { step = 1, disabled = false, readonly = false, min, max, modelValue, defaultValue, as = 'div' } = defineProps<NumberFieldRootProps>();
+
+const { forwardRef } = useForwardExpose();
+
+const emit = defineEmits<NumberFieldRootEmits>();
+
+const localValue = ref<number | null>(
+  modelValue !== undefined ? modelValue : (defaultValue ?? null),
+);
+
+watch(() => modelValue, (v) => {
+  if (v === undefined) return;
+  if (v === localValue.value) return;
+  localValue.value = v;
+});
+
+function setValue(v: number | null): void {
+  if (disabled || readonly) return;
+  const next = v === null ? null : clamp(v, min ?? -Infinity, max ?? Infinity);
+  if (next === localValue.value) return;
+  localValue.value = next;
+  emit('update:modelValue', next);
+  emit('valueChange', next);
+}
+
+function increment(delta = step): void {
+  const base = localValue.value ?? min ?? 0;
+  setValue(base + delta);
+}
+function decrement(delta = step): void {
+  const base = localValue.value ?? min ?? 0;
+  setValue(base - delta);
+}
+
+const inputId = useId(undefined, 'number-field-input').value;
+
+provideNumberFieldContext({
+  value: localValue,
+  // Identity passthroughs via `toRef` — reactive without `computed`'s effect/cache.
+  min: toRef(() => min),
+  max: toRef(() => max),
+  step: toRef(() => step),
+  disabled: toRef(() => disabled),
+  readonly: toRef(() => readonly),
+  increment,
+  decrement,
+  setValue,
+  inputId,
+});
+defineExpose({ value: localValue, increment, decrement, setValue });
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :data-disabled="disabled ? '' : undefined"
+    :data-readonly="readonly ? '' : undefined"
+  >
+    <slot :value="localValue" :increment="increment" :decrement="decrement" />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/number-field/__test__/NumberField.test.ts b/vue/primitives/src/number-field/__test__/NumberField.test.ts
new file mode 100644
index 0000000..0adbf89
--- /dev/null
+++ b/vue/primitives/src/number-field/__test__/NumberField.test.ts
@@ -0,0 +1,130 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import type { Component } from 'vue';
+import { defineComponent, h, nextTick, ref } from 'vue';
+import {
+  NumberFieldDecrement,
+  NumberFieldIncrement,
+  NumberFieldInput,
+  NumberFieldRoot,
+} from '../index';
+
+function mountField(props: Record<string, unknown> = {}) {
+  const model = ref<number | null | undefined>(undefined);
+  const Harness = defineComponent({
+    setup: () => () => h(NumberFieldRoot, {
+      modelValue: model.value,
+      'onUpdate:modelValue': (v: number | null) => { model.value = v; },
+      ...props,
+    }, {
+      default: () => [
+        h(NumberFieldInput as Component, { id: 'inp' }),
+        h(NumberFieldIncrement, { id: 'inc' }, { default: () => '+' }),
+        h(NumberFieldDecrement, { id: 'dec' }, { default: () => '−' }),
+      ],
+    }),
+  });
+  return { wrapper: mount(Harness, { attachTo: document.body }), model };
+}
+
+function press(el: Element, key: string): void {
+  el.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
+}
+
+describe('NumberField', () => {
+  it('input has role=spinbutton with ARIA attrs', () => {
+    const { wrapper } = mountField({ min: 0, max: 10, defaultValue: 5 });
+    const input = document.querySelector<HTMLInputElement>('#inp')!;
+    expect(input.getAttribute('role')).toBe('spinbutton');
+    expect(input.getAttribute('aria-valuemin')).toBe('0');
+    expect(input.getAttribute('aria-valuemax')).toBe('10');
+    expect(input.getAttribute('aria-valuenow')).toBe('5');
+    expect(input.value).toBe('5');
+    wrapper.unmount();
+  });
+
+  it('increment/decrement buttons change value', async () => {
+    const { wrapper, model } = mountField({ defaultValue: 0, step: 2 });
+    await nextTick();
+    (document.querySelector<HTMLButtonElement>('#inc')!).click();
+    await nextTick();
+    expect(model.value).toBe(2);
+    (document.querySelector<HTMLButtonElement>('#dec')!).click();
+    await nextTick();
+    expect(model.value).toBe(0);
+    wrapper.unmount();
+  });
+
+  it('ArrowUp / ArrowDown step, clamped by min/max', async () => {
+    const { wrapper, model } = mountField({ min: 0, max: 3, defaultValue: 2 });
+    await nextTick();
+    const input = document.querySelector<HTMLInputElement>('#inp')!;
+    press(input, 'ArrowUp');
+    await nextTick();
+    expect(model.value).toBe(3);
+    press(input, 'ArrowUp');
+    await nextTick();
+    expect(model.value).toBe(3);
+    press(input, 'ArrowDown');
+    press(input, 'ArrowDown');
+    press(input, 'ArrowDown');
+    press(input, 'ArrowDown');
+    await nextTick();
+    expect(model.value).toBe(0);
+    wrapper.unmount();
+  });
+
+  it('PageUp/PageDown step by 10×', async () => {
+    const { wrapper, model } = mountField({ defaultValue: 10, step: 1 });
+    await nextTick();
+    const input = document.querySelector<HTMLInputElement>('#inp')!;
+    press(input, 'PageUp');
+    await nextTick();
+    expect(model.value).toBe(20);
+    press(input, 'PageDown');
+    await nextTick();
+    expect(model.value).toBe(10);
+    wrapper.unmount();
+  });
+
+  it('Home/End jump to min/max when defined', async () => {
+    const { wrapper, model } = mountField({ min: 0, max: 100, defaultValue: 50 });
+    await nextTick();
+    const input = document.querySelector<HTMLInputElement>('#inp')!;
+    press(input, 'End');
+    await nextTick();
+    expect(model.value).toBe(100);
+    press(input, 'Home');
+    await nextTick();
+    expect(model.value).toBe(0);
+    wrapper.unmount();
+  });
+
+  it('typing updates value; invalid = null', async () => {
+    const { wrapper, model } = mountField({ defaultValue: 0 });
+    await nextTick();
+    const input = document.querySelector<HTMLInputElement>('#inp')!;
+    input.value = '42';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    await nextTick();
+    expect(model.value).toBe(42);
+    input.value = '';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    await nextTick();
+    expect(model.value).toBeNull();
+    input.value = 'abc';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    await nextTick();
+    expect(model.value).toBeNull();
+    wrapper.unmount();
+  });
+
+  it('disabled blocks changes', async () => {
+    const { wrapper, model } = mountField({ disabled: true, defaultValue: 5 });
+    await nextTick();
+    (document.querySelector<HTMLButtonElement>('#inc')!).click();
+    await nextTick();
+    expect(model.value).toBeUndefined();
+    wrapper.unmount();
+  });
+});
diff --git a/vue/primitives/src/number-field/context.ts b/vue/primitives/src/number-field/context.ts
new file mode 100644
index 0000000..aee578a
--- /dev/null
+++ b/vue/primitives/src/number-field/context.ts
@@ -0,0 +1,20 @@
+import type { Ref } from 'vue';
+import { useContextFactory } from '@robonen/vue';
+
+export interface NumberFieldContext {
+  value: Ref<number | null>;
+  min: Ref<number | undefined>;
+  max: Ref<number | undefined>;
+  step: Ref<number>;
+  disabled: Ref<boolean>;
+  readonly: Ref<boolean>;
+  increment: (delta?: number) => void;
+  decrement: (delta?: number) => void;
+  setValue: (v: number | null) => void;
+  inputId: string;
+}
+
+const ctx = useContextFactory<NumberFieldContext>('NumberFieldContext');
+
+export const provideNumberFieldContext = ctx.provide;
+export const useNumberFieldContext = ctx.inject;
diff --git a/vue/primitives/src/number-field/index.ts b/vue/primitives/src/number-field/index.ts
new file mode 100644
index 0000000..bee87c0
--- /dev/null
+++ b/vue/primitives/src/number-field/index.ts
@@ -0,0 +1,8 @@
+export { default as NumberFieldDecrement } from './NumberFieldDecrement.vue';
+export { default as NumberFieldIncrement } from './NumberFieldIncrement.vue';
+export { default as NumberFieldInput } from './NumberFieldInput.vue';
+export { default as NumberFieldRoot } from './NumberFieldRoot.vue';
+export type { NumberFieldDecrementProps } from './NumberFieldDecrement.vue';
+export type { NumberFieldIncrementProps } from './NumberFieldIncrement.vue';
+export type { NumberFieldInputProps } from './NumberFieldInput.vue';
+export type { NumberFieldRootEmits, NumberFieldRootProps } from './NumberFieldRoot.vue';
diff --git a/vue/primitives/src/pagination/PaginationEllipsis.vue b/vue/primitives/src/pagination/PaginationEllipsis.vue
new file mode 100644
index 0000000..d131ff9
--- /dev/null
+++ b/vue/primitives/src/pagination/PaginationEllipsis.vue
@@ -0,0 +1,24 @@
+<script lang="ts">
+import type { PrimitiveProps } from '@/primitive';
+
+export interface PaginationEllipsisProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '@/primitive';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'span' as const } = defineProps<PaginationEllipsisProps>();
+
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as
+    data-type="ellipsis"
+  >
+    <slot>&#8230;</slot>
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/pagination/PaginationFirst.vue b/vue/primitives/src/pagination/PaginationFirst.vue
new file mode 100644
index 0000000..888defe
--- /dev/null
+++ b/vue/primitives/src/pagination/PaginationFirst.vue
@@ -0,0 +1,42 @@
+<script lang="ts">
+import type { PrimitiveProps } from '@/primitive';
+
+export interface PaginationFirstProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '@/primitive';
+import { computed } from 'vue';
+import { injectPaginationContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'button' as const } = defineProps<PaginationFirstProps>();
+
+const { forwardRef } = useForwardExpose();
+const ctx = injectPaginationContext();
+
+const disabled = computed(() => ctx.isFirstPage.value || ctx.disabled.value);
+
+const attrs = computed(() => ({
+  'aria-label': 'First Page',
+  type: as === 'button' ? 'button' as const : undefined,
+  disabled: disabled.value,
+}));
+
+function handleClick() {
+  if (!disabled.value) {
+    ctx.onPageChange(1);
+  }
+}
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as
+    v-bind="attrs"
+    @click="handleClick"
+  >
+    <slot>First page</slot>
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/pagination/PaginationLast.vue b/vue/primitives/src/pagination/PaginationLast.vue
new file mode 100644
index 0000000..f74324a
--- /dev/null
+++ b/vue/primitives/src/pagination/PaginationLast.vue
@@ -0,0 +1,42 @@
+<script lang="ts">
+import type { PrimitiveProps } from '@/primitive';
+
+export interface PaginationLastProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '@/primitive';
+import { computed } from 'vue';
+import { injectPaginationContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'button' as const } = defineProps<PaginationLastProps>();
+
+const { forwardRef } = useForwardExpose();
+const ctx = injectPaginationContext();
+
+const disabled = computed(() => ctx.isLastPage.value || ctx.disabled.value);
+
+const attrs = computed(() => ({
+  'aria-label': 'Last Page',
+  type: as === 'button' ? 'button' as const : undefined,
+  disabled: disabled.value,
+}));
+
+function handleClick() {
+  if (!disabled.value) {
+    ctx.onPageChange(ctx.totalPages.value);
+  }
+}
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as
+    v-bind="attrs"
+    @click="handleClick"
+  >
+    <slot>Last page</slot>
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/pagination/PaginationList.vue b/vue/primitives/src/pagination/PaginationList.vue
new file mode 100644
index 0000000..5878bdb
--- /dev/null
+++ b/vue/primitives/src/pagination/PaginationList.vue
@@ -0,0 +1,41 @@
+<script lang="ts">
+import type { PrimitiveProps } from '@/primitive';
+
+export interface PaginationListProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import type { PaginationItem } from './utils';
+import { Primitive } from '@/primitive';
+import { computed } from 'vue';
+import { getRange } from './utils';
+import { injectPaginationContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'div' as const } = defineProps<PaginationListProps>();
+
+defineSlots<{
+  default?: (props: {
+    items: PaginationItem[];
+  }) => any;
+}>();
+
+const { forwardRef } = useForwardExpose();
+const ctx = injectPaginationContext();
+
+const items = computed<PaginationItem[]>(() => getRange(
+  ctx.currentPage.value,
+  ctx.totalPages.value,
+  ctx.siblingCount.value,
+  ctx.showEdges.value,
+));
+</script>
+
+<template>
+  <Primitive
+    :as
+    :ref="forwardRef"
+  >
+    <slot :items="items" />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/pagination/PaginationListItem.vue b/vue/primitives/src/pagination/PaginationListItem.vue
new file mode 100644
index 0000000..9333373
--- /dev/null
+++ b/vue/primitives/src/pagination/PaginationListItem.vue
@@ -0,0 +1,47 @@
+<script lang="ts">
+import type { PrimitiveProps } from '@/primitive';
+
+export interface PaginationListItemProps extends PrimitiveProps {
+  value: number;
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '@/primitive';
+import { computed } from 'vue';
+import { injectPaginationContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'button' as const, value } = defineProps<PaginationListItemProps>();
+
+const { forwardRef } = useForwardExpose();
+const ctx = injectPaginationContext();
+
+const isSelected = computed(() => ctx.currentPage.value === value);
+
+const attrs = computed(() => ({
+  'data-type': 'page',
+  'aria-label': `Page ${value}`,
+  'aria-current': isSelected.value ? 'page' as const : undefined,
+  'data-selected': isSelected.value ? 'true' : undefined,
+  disabled: ctx.disabled.value,
+  type: as === 'button' ? 'button' as const : undefined,
+}));
+
+function handleClick() {
+  if (!ctx.disabled.value) {
+    ctx.onPageChange(value);
+  }
+}
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as
+    v-bind="attrs"
+    @click="handleClick"
+  >
+    <slot>{{ value }}</slot>
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/pagination/PaginationNext.vue b/vue/primitives/src/pagination/PaginationNext.vue
new file mode 100644
index 0000000..6f4c438
--- /dev/null
+++ b/vue/primitives/src/pagination/PaginationNext.vue
@@ -0,0 +1,42 @@
+<script lang="ts">
+import type { PrimitiveProps } from '@/primitive';
+
+export interface PaginationNextProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '@/primitive';
+import { computed } from 'vue';
+import { injectPaginationContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'button' as const } = defineProps<PaginationNextProps>();
+
+const { forwardRef } = useForwardExpose();
+const ctx = injectPaginationContext();
+
+const disabled = computed(() => ctx.isLastPage.value || ctx.disabled.value);
+
+const attrs = computed(() => ({
+  'aria-label': 'Next Page',
+  type: as === 'button' ? 'button' as const : undefined,
+  disabled: disabled.value,
+}));
+
+function handleClick() {
+  if (!disabled.value) {
+    ctx.onPageChange(ctx.currentPage.value + 1);
+  }
+}
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as
+    v-bind="attrs"
+    @click="handleClick"
+  >
+    <slot>Next page</slot>
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/pagination/PaginationPrev.vue b/vue/primitives/src/pagination/PaginationPrev.vue
new file mode 100644
index 0000000..87b4082
--- /dev/null
+++ b/vue/primitives/src/pagination/PaginationPrev.vue
@@ -0,0 +1,42 @@
+<script lang="ts">
+import type { PrimitiveProps } from '@/primitive';
+
+export interface PaginationPrevProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '@/primitive';
+import { computed } from 'vue';
+import { injectPaginationContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'button' as const } = defineProps<PaginationPrevProps>();
+
+const { forwardRef } = useForwardExpose();
+const ctx = injectPaginationContext();
+
+const disabled = computed(() => ctx.isFirstPage.value || ctx.disabled.value);
+
+const attrs = computed(() => ({
+  'aria-label': 'Previous Page',
+  type: as === 'button' ? 'button' as const : undefined,
+  disabled: disabled.value,
+}));
+
+function handleClick() {
+  if (!disabled.value) {
+    ctx.onPageChange(ctx.currentPage.value - 1);
+  }
+}
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as
+    v-bind="attrs"
+    @click="handleClick"
+  >
+    <slot>Prev page</slot>
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/pagination/PaginationRoot.vue b/vue/primitives/src/pagination/PaginationRoot.vue
new file mode 100644
index 0000000..36feb45
--- /dev/null
+++ b/vue/primitives/src/pagination/PaginationRoot.vue
@@ -0,0 +1,89 @@
+<script lang="ts">
+import type { PrimitiveProps } from '@/primitive';
+
+export interface PaginationRootProps extends PrimitiveProps {
+  total: number;
+  pageSize?: number;
+  siblingCount?: number;
+  showEdges?: boolean;
+  disabled?: boolean;
+  defaultPage?: number;
+}
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose, useOffsetPagination } from '@robonen/vue';
+import { Primitive } from '@/primitive';
+import { providePaginationContext } from './context';
+import { toRef } from 'vue';
+
+const {
+  as = 'nav' as const,
+  total,
+  pageSize = 10,
+  siblingCount = 1,
+  showEdges = false,
+  disabled = false,
+  defaultPage = 1,
+} = defineProps<PaginationRootProps>();
+
+const page = defineModel<number>('page', { default: undefined });
+
+if (page.value === undefined) {
+  page.value = defaultPage;
+}
+
+defineSlots<{
+  default?: (props: {
+    page: number;
+    pageCount: number;
+  }) => any;
+}>();
+
+const { forwardRef } = useForwardExpose();
+
+const {
+  currentPage,
+  totalPages,
+  isFirstPage,
+  isLastPage,
+  next,
+  previous,
+  select,
+} = useOffsetPagination({
+  total: () => total,
+  page,
+  pageSize: toRef(() => pageSize),
+});
+
+function onPageChange(value: number) {
+  page.value = value;
+}
+
+providePaginationContext({
+  currentPage,
+  totalPages,
+  pageSize: toRef(() => pageSize),
+  siblingCount: toRef(() => siblingCount),
+  showEdges: toRef(() => showEdges),
+  disabled: toRef(() => disabled),
+  isFirstPage,
+  isLastPage,
+  onPageChange,
+  next,
+  prev: previous,
+  select,
+});
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as
+  >
+    <slot
+      :page="page!"
+      :page-count="totalPages"
+    />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/pagination/__test__/Pagination.test.ts b/vue/primitives/src/pagination/__test__/Pagination.test.ts
new file mode 100644
index 0000000..6979b76
--- /dev/null
+++ b/vue/primitives/src/pagination/__test__/Pagination.test.ts
@@ -0,0 +1,394 @@
+import { describe, expect, it } from 'vitest';
+import { defineComponent, h, nextTick, ref } from 'vue';
+import { mount } from '@vue/test-utils';
+import {
+  PaginationEllipsis,
+  PaginationFirst,
+  PaginationLast,
+  PaginationList,
+  PaginationListItem,
+  PaginationNext,
+  PaginationPrev,
+  PaginationRoot,
+} from '..';
+import type { PaginationItem } from '../utils';
+
+function createPagination(props: Record<string, unknown> = {}) {
+  return mount(
+    defineComponent({
+      setup() {
+        const page = ref((props.page as number) ?? 1);
+
+        return () =>
+          h(
+            PaginationRoot,
+            {
+              total: 100,
+              pageSize: 10,
+              ...props,
+              page: page.value,
+              'onUpdate:page': (v: number) => {
+                page.value = v;
+              },
+            },
+            {
+              default: () => [
+                h(PaginationList, null, {
+                  default: ({ items }: { items: PaginationItem[] }) =>
+                    items.map((item, i) =>
+                      item.type === 'page'
+                        ? h(PaginationListItem, { key: i, value: item.value })
+                        : h(PaginationEllipsis, { key: `ellipsis-${i}` }),
+                    ),
+                }),
+                h(PaginationFirst),
+                h(PaginationPrev),
+                h(PaginationNext),
+                h(PaginationLast),
+              ],
+            },
+          );
+      },
+    }),
+  );
+}
+
+describe('PaginationRoot', () => {
+  it('renders as <nav> by default', () => {
+    const wrapper = createPagination();
+
+    expect(wrapper.find('nav').exists()).toBe(true);
+
+    wrapper.unmount();
+  });
+
+  it('renders as custom element via as prop', () => {
+    const wrapper = mount(
+      defineComponent({
+        setup() {
+          return () =>
+            h(
+              PaginationRoot,
+              { total: 50, pageSize: 10, as: 'div' },
+              { default: () => h('span', 'content') },
+            );
+        },
+      }),
+    );
+
+    expect(wrapper.find('div').exists()).toBe(true);
+    expect(wrapper.find('nav').exists()).toBe(false);
+
+    wrapper.unmount();
+  });
+
+  it('uses defaultPage when no v-model page is provided', () => {
+    const wrapper = mount(
+      defineComponent({
+        setup() {
+          return () =>
+            h(
+              PaginationRoot,
+              { total: 100, pageSize: 10, defaultPage: 5 },
+              {
+                default: () =>
+                  h(PaginationList, null, {
+                    default: ({ items }: { items: PaginationItem[] }) =>
+                      items.map((item, i) =>
+                        item.type === 'page'
+                          ? h(PaginationListItem, { key: i, value: item.value })
+                          : h(PaginationEllipsis, { key: `e-${i}` }),
+                      ),
+                  }),
+              },
+            );
+        },
+      }),
+    );
+
+    const selected = wrapper.find('[data-selected]');
+    expect(selected.exists()).toBe(true);
+    expect(selected.text()).toBe('5');
+
+    wrapper.unmount();
+  });
+
+  it('exposes page and pageCount via scoped slot', () => {
+    let slotPage = 0;
+    let slotPageCount = 0;
+
+    const wrapper = mount(
+      defineComponent({
+        setup() {
+          return () =>
+            h(
+              PaginationRoot,
+              { total: 100, pageSize: 10, page: 3 },
+              {
+                default: ({ page, pageCount }: { page: number; pageCount: number }) => {
+                  slotPage = page;
+                  slotPageCount = pageCount;
+                  return h('span', `${page}/${pageCount}`);
+                },
+              },
+            );
+        },
+      }),
+    );
+
+    expect(slotPage).toBe(3);
+    expect(slotPageCount).toBe(10);
+
+    wrapper.unmount();
+  });
+});
+
+describe('PaginationList', () => {
+  it('exposes items via scoped slot', () => {
+    let capturedItems: PaginationItem[] = [];
+
+    const wrapper = mount(
+      defineComponent({
+        setup() {
+          return () =>
+            h(
+              PaginationRoot,
+              { total: 50, pageSize: 10 },
+              {
+                default: () =>
+                  h(PaginationList, null, {
+                    default: ({ items }: { items: PaginationItem[] }) => {
+                      capturedItems = items;
+
+                      return items.map((item, i) =>
+                        item.type === 'page'
+                          ? h('span', { key: i }, String(item.value))
+                          : h('span', { key: `e-${i}` }, '...'),
+                      );
+                    },
+                  }),
+              },
+            );
+        },
+      }),
+    );
+
+    expect(capturedItems.length).toBeGreaterThan(0);
+    expect(capturedItems.every(i => i.type === 'page' || i.type === 'ellipsis')).toBe(true);
+
+    wrapper.unmount();
+  });
+});
+
+describe('PaginationListItem', () => {
+  it('renders as button by default', () => {
+    const wrapper = createPagination();
+
+    const pageButtons = wrapper.findAll('[data-type="page"]');
+    expect(pageButtons.length).toBeGreaterThan(0);
+    expect(pageButtons[0]!.element.tagName).toBe('BUTTON');
+
+    wrapper.unmount();
+  });
+
+  it('marks current page with data-selected', () => {
+    const wrapper = createPagination({ page: 1 });
+
+    const selected = wrapper.find('[data-selected]');
+    expect(selected.exists()).toBe(true);
+    expect(selected.text()).toBe('1');
+
+    wrapper.unmount();
+  });
+
+  it('renders page number as default slot', () => {
+    const wrapper = createPagination({ page: 1 });
+
+    const pageButtons = wrapper.findAll('[data-type="page"]');
+    pageButtons.forEach((btn) => {
+      expect(Number(btn.text())).toBeGreaterThan(0);
+    });
+
+    wrapper.unmount();
+  });
+
+  it('navigates on click', async () => {
+    const wrapper = createPagination({ page: 1 });
+
+    const page2 = wrapper.findAll('[data-type="page"]').find(el => el.text() === '2');
+    await page2?.trigger('click');
+    await nextTick();
+
+    expect(wrapper.find('[data-selected]').text()).toBe('2');
+
+    wrapper.unmount();
+  });
+
+  it('does not navigate when disabled', async () => {
+    const wrapper = createPagination({ page: 1, disabled: true });
+
+    const page2 = wrapper.findAll('[data-type="page"]').find(el => el.text() === '2');
+    await page2?.trigger('click');
+    await nextTick();
+
+    expect(wrapper.find('[data-selected]').text()).toBe('1');
+
+    wrapper.unmount();
+  });
+});
+
+describe('PaginationFirst', () => {
+  it('navigates to first page on click', async () => {
+    const wrapper = createPagination({ page: 5 });
+
+    await wrapper.find('[aria-label="First Page"]').trigger('click');
+    await nextTick();
+
+    expect(wrapper.find('[data-selected]').text()).toBe('1');
+
+    wrapper.unmount();
+  });
+
+  it('is disabled on first page', () => {
+    const wrapper = createPagination({ page: 1 });
+
+    expect(wrapper.find('[aria-label="First Page"]').attributes('disabled')).toBeDefined();
+
+    wrapper.unmount();
+  });
+
+  it('does not navigate when disabled', async () => {
+    const wrapper = createPagination({ page: 5, disabled: true });
+
+    await wrapper.find('[aria-label="First Page"]').trigger('click');
+    await nextTick();
+
+    expect(wrapper.find('[data-selected]').text()).toBe('5');
+
+    wrapper.unmount();
+  });
+});
+
+describe('PaginationPrev', () => {
+  it('navigates to previous page on click', async () => {
+    const wrapper = createPagination({ page: 3 });
+
+    await wrapper.find('[aria-label="Previous Page"]').trigger('click');
+    await nextTick();
+
+    expect(wrapper.find('[data-selected]').text()).toBe('2');
+
+    wrapper.unmount();
+  });
+
+  it('is disabled on first page', () => {
+    const wrapper = createPagination({ page: 1 });
+
+    expect(wrapper.find('[aria-label="Previous Page"]').attributes('disabled')).toBeDefined();
+
+    wrapper.unmount();
+  });
+
+  it('does not navigate when disabled', async () => {
+    const wrapper = createPagination({ page: 5, disabled: true });
+
+    await wrapper.find('[aria-label="Previous Page"]').trigger('click');
+    await nextTick();
+
+    expect(wrapper.find('[data-selected]').text()).toBe('5');
+
+    wrapper.unmount();
+  });
+});
+
+describe('PaginationNext', () => {
+  it('navigates to next page on click', async () => {
+    const wrapper = createPagination({ page: 1 });
+
+    await wrapper.find('[aria-label="Next Page"]').trigger('click');
+    await nextTick();
+
+    expect(wrapper.find('[data-selected]').text()).toBe('2');
+
+    wrapper.unmount();
+  });
+
+  it('is disabled on last page', () => {
+    const wrapper = createPagination({ page: 10 });
+
+    expect(wrapper.find('[aria-label="Next Page"]').attributes('disabled')).toBeDefined();
+
+    wrapper.unmount();
+  });
+
+  it('does not navigate when disabled', async () => {
+    const wrapper = createPagination({ page: 1, disabled: true });
+
+    await wrapper.find('[aria-label="Next Page"]').trigger('click');
+    await nextTick();
+
+    expect(wrapper.find('[data-selected]').text()).toBe('1');
+
+    wrapper.unmount();
+  });
+});
+
+describe('PaginationLast', () => {
+  it('navigates to last page on click', async () => {
+    const wrapper = createPagination({ page: 1 });
+
+    await wrapper.find('[aria-label="Last Page"]').trigger('click');
+    await nextTick();
+
+    expect(wrapper.find('[data-selected]').text()).toBe('10');
+
+    wrapper.unmount();
+  });
+
+  it('is disabled on last page', () => {
+    const wrapper = createPagination({ page: 10 });
+
+    expect(wrapper.find('[aria-label="Last Page"]').attributes('disabled')).toBeDefined();
+
+    wrapper.unmount();
+  });
+
+  it('does not navigate when disabled', async () => {
+    const wrapper = createPagination({ page: 1, disabled: true });
+
+    await wrapper.find('[aria-label="Last Page"]').trigger('click');
+    await nextTick();
+
+    expect(wrapper.find('[data-selected]').text()).toBe('1');
+
+    wrapper.unmount();
+  });
+});
+
+describe('PaginationEllipsis', () => {
+  it('renders for large page ranges', () => {
+    const wrapper = createPagination({ page: 5, total: 200, pageSize: 10 });
+
+    expect(wrapper.find('[data-type="ellipsis"]').exists()).toBe(true);
+
+    wrapper.unmount();
+  });
+
+  it('renders as <span> by default', () => {
+    const wrapper = createPagination({ page: 5, total: 200, pageSize: 10 });
+
+    const ellipsis = wrapper.find('[data-type="ellipsis"]');
+    expect(ellipsis.element.tagName).toBe('SPAN');
+
+    wrapper.unmount();
+  });
+
+  it('renders \u2026 as default content', () => {
+    const wrapper = createPagination({ page: 5, total: 200, pageSize: 10 });
+
+    const ellipsis = wrapper.find('[data-type="ellipsis"]');
+    expect(ellipsis.text()).toBe('\u2026');
+
+    wrapper.unmount();
+  });
+});
diff --git a/vue/primitives/src/pagination/__test__/a11y.test.ts b/vue/primitives/src/pagination/__test__/a11y.test.ts
new file mode 100644
index 0000000..fd65c3b
--- /dev/null
+++ b/vue/primitives/src/pagination/__test__/a11y.test.ts
@@ -0,0 +1,429 @@
+import { describe, expect, it } from 'vitest';
+import { defineComponent, h, ref } from 'vue';
+import { mount } from '@vue/test-utils';
+import axe from 'axe-core';
+import {
+  PaginationEllipsis,
+  PaginationFirst,
+  PaginationLast,
+  PaginationList,
+  PaginationListItem,
+  PaginationNext,
+  PaginationPrev,
+  PaginationRoot,
+} from '..';
+import type { PaginationItem } from '../utils';
+
+async function checkA11y(element: Element) {
+  const results = await axe.run(element);
+
+  return results.violations;
+}
+
+function createPagination(props: Record<string, unknown> = {}) {
+  return mount(
+    defineComponent({
+      setup() {
+        const page = ref((props.page as number) ?? 1);
+
+        return () =>
+          h(
+            PaginationRoot,
+            {
+              total: 100,
+              pageSize: 10,
+              ...props,
+              page: page.value,
+              'onUpdate:page': (v: number) => {
+                page.value = v;
+              },
+            },
+            {
+              default: () => [
+                h(PaginationList, null, {
+                  default: ({ items }: { items: PaginationItem[] }) =>
+                    items.map((item, i) =>
+                      item.type === 'page'
+                        ? h(PaginationListItem, { key: i, value: item.value })
+                        : h(PaginationEllipsis, { key: `ellipsis-${i}` }),
+                    ),
+                }),
+                h(PaginationFirst),
+                h(PaginationPrev),
+                h(PaginationNext),
+                h(PaginationLast),
+              ],
+            },
+          );
+      },
+    }),
+    { attachTo: document.body },
+  );
+}
+
+describe('PaginationListItem a11y', () => {
+  it('has data-type="page"', () => {
+    const wrapper = createPagination();
+
+    expect(wrapper.findAll('[data-type="page"]').length).toBeGreaterThan(0);
+
+    wrapper.unmount();
+  });
+
+  it('has aria-label with page number', () => {
+    const wrapper = createPagination();
+
+    const pageButton = wrapper.find('[data-type="page"]');
+    expect(pageButton.attributes('aria-label')).toMatch(/^Page \d+$/);
+
+    wrapper.unmount();
+  });
+
+  it('has aria-current="page" only on selected page', () => {
+    const wrapper = createPagination({ page: 1 });
+
+    const selected = wrapper.find('[aria-current="page"]');
+    expect(selected.exists()).toBe(true);
+    expect(selected.text()).toBe('1');
+
+    const nonSelected = wrapper.findAll('[data-type="page"]').filter(el => el.text() !== '1');
+    nonSelected.forEach((el) => {
+      expect(el.attributes('aria-current')).toBeUndefined();
+    });
+
+    wrapper.unmount();
+  });
+
+  it('has type="button"', () => {
+    const wrapper = createPagination();
+
+    wrapper.findAll('[data-type="page"]').forEach((btn) => {
+      expect(btn.attributes('type')).toBe('button');
+    });
+
+    wrapper.unmount();
+  });
+
+  it('is disabled when context disabled', () => {
+    const wrapper = createPagination({ disabled: true });
+
+    wrapper.findAll('[data-type="page"]').forEach((btn) => {
+      expect(btn.attributes('disabled')).toBeDefined();
+    });
+
+    wrapper.unmount();
+  });
+
+  it('has no axe violations when selected', async () => {
+    const wrapper = createPagination({ page: 1 });
+    const violations = await checkA11y(wrapper.find('[data-selected="true"]').element);
+
+    expect(violations).toEqual([]);
+
+    wrapper.unmount();
+  });
+
+  it('has no axe violations when not selected', async () => {
+    const wrapper = createPagination({ page: 1 });
+    const nonSelected = wrapper.findAll('[data-type="page"]').find(el => el.text() !== '1');
+    const violations = await checkA11y(nonSelected!.element);
+
+    expect(violations).toEqual([]);
+
+    wrapper.unmount();
+  });
+
+  it('has no axe violations when disabled', async () => {
+    const wrapper = createPagination({ page: 1, disabled: true });
+    const violations = await checkA11y(wrapper.find('[data-type="page"]').element);
+
+    expect(violations).toEqual([]);
+
+    wrapper.unmount();
+  });
+});
+
+describe('PaginationFirst a11y', () => {
+  it('has aria-label="First Page"', () => {
+    const wrapper = createPagination();
+
+    expect(wrapper.find('[aria-label="First Page"]').exists()).toBe(true);
+
+    wrapper.unmount();
+  });
+
+  it('has type="button"', () => {
+    const wrapper = createPagination();
+
+    expect(wrapper.find('[aria-label="First Page"]').attributes('type')).toBe('button');
+
+    wrapper.unmount();
+  });
+
+  it('renders default slot text', () => {
+    const wrapper = createPagination();
+
+    expect(wrapper.find('[aria-label="First Page"]').text()).toBe('First page');
+
+    wrapper.unmount();
+  });
+
+  it('is disabled when context disabled', () => {
+    const wrapper = createPagination({ page: 5, disabled: true });
+
+    expect(wrapper.find('[aria-label="First Page"]').attributes('disabled')).toBeDefined();
+
+    wrapper.unmount();
+  });
+
+  it('has no axe violations when enabled', async () => {
+    const wrapper = createPagination({ page: 5 });
+    const violations = await checkA11y(wrapper.find('[aria-label="First Page"]').element);
+
+    expect(violations).toEqual([]);
+
+    wrapper.unmount();
+  });
+
+  it('has no axe violations when disabled', async () => {
+    const wrapper = createPagination({ page: 1 });
+    const violations = await checkA11y(wrapper.find('[aria-label="First Page"]').element);
+
+    expect(violations).toEqual([]);
+
+    wrapper.unmount();
+  });
+});
+
+describe('PaginationPrev a11y', () => {
+  it('has aria-label="Previous Page"', () => {
+    const wrapper = createPagination();
+
+    expect(wrapper.find('[aria-label="Previous Page"]').exists()).toBe(true);
+
+    wrapper.unmount();
+  });
+
+  it('has type="button"', () => {
+    const wrapper = createPagination();
+
+    expect(wrapper.find('[aria-label="Previous Page"]').attributes('type')).toBe('button');
+
+    wrapper.unmount();
+  });
+
+  it('renders default slot text', () => {
+    const wrapper = createPagination();
+
+    expect(wrapper.find('[aria-label="Previous Page"]').text()).toBe('Prev page');
+
+    wrapper.unmount();
+  });
+
+  it('is disabled when context disabled', () => {
+    const wrapper = createPagination({ page: 5, disabled: true });
+
+    expect(wrapper.find('[aria-label="Previous Page"]').attributes('disabled')).toBeDefined();
+
+    wrapper.unmount();
+  });
+
+  it('has no axe violations when enabled', async () => {
+    const wrapper = createPagination({ page: 5 });
+    const violations = await checkA11y(wrapper.find('[aria-label="Previous Page"]').element);
+
+    expect(violations).toEqual([]);
+
+    wrapper.unmount();
+  });
+
+  it('has no axe violations when disabled', async () => {
+    const wrapper = createPagination({ page: 1 });
+    const violations = await checkA11y(wrapper.find('[aria-label="Previous Page"]').element);
+
+    expect(violations).toEqual([]);
+
+    wrapper.unmount();
+  });
+});
+
+describe('PaginationNext a11y', () => {
+  it('has aria-label="Next Page"', () => {
+    const wrapper = createPagination();
+
+    expect(wrapper.find('[aria-label="Next Page"]').exists()).toBe(true);
+
+    wrapper.unmount();
+  });
+
+  it('has type="button"', () => {
+    const wrapper = createPagination();
+
+    expect(wrapper.find('[aria-label="Next Page"]').attributes('type')).toBe('button');
+
+    wrapper.unmount();
+  });
+
+  it('renders default slot text', () => {
+    const wrapper = createPagination();
+
+    expect(wrapper.find('[aria-label="Next Page"]').text()).toBe('Next page');
+
+    wrapper.unmount();
+  });
+
+  it('is disabled when context disabled', () => {
+    const wrapper = createPagination({ page: 1, disabled: true });
+
+    expect(wrapper.find('[aria-label="Next Page"]').attributes('disabled')).toBeDefined();
+
+    wrapper.unmount();
+  });
+
+  it('has no axe violations when enabled', async () => {
+    const wrapper = createPagination({ page: 1 });
+    const violations = await checkA11y(wrapper.find('[aria-label="Next Page"]').element);
+
+    expect(violations).toEqual([]);
+
+    wrapper.unmount();
+  });
+
+  it('has no axe violations when disabled', async () => {
+    const wrapper = createPagination({ page: 10 });
+    const violations = await checkA11y(wrapper.find('[aria-label="Next Page"]').element);
+
+    expect(violations).toEqual([]);
+
+    wrapper.unmount();
+  });
+});
+
+describe('PaginationLast a11y', () => {
+  it('has aria-label="Last Page"', () => {
+    const wrapper = createPagination();
+
+    expect(wrapper.find('[aria-label="Last Page"]').exists()).toBe(true);
+
+    wrapper.unmount();
+  });
+
+  it('has type="button"', () => {
+    const wrapper = createPagination();
+
+    expect(wrapper.find('[aria-label="Last Page"]').attributes('type')).toBe('button');
+
+    wrapper.unmount();
+  });
+
+  it('renders default slot text', () => {
+    const wrapper = createPagination();
+
+    expect(wrapper.find('[aria-label="Last Page"]').text()).toBe('Last page');
+
+    wrapper.unmount();
+  });
+
+  it('is disabled when context disabled', () => {
+    const wrapper = createPagination({ page: 1, disabled: true });
+
+    expect(wrapper.find('[aria-label="Last Page"]').attributes('disabled')).toBeDefined();
+
+    wrapper.unmount();
+  });
+
+  it('has no axe violations when enabled', async () => {
+    const wrapper = createPagination({ page: 1 });
+    const violations = await checkA11y(wrapper.find('[aria-label="Last Page"]').element);
+
+    expect(violations).toEqual([]);
+
+    wrapper.unmount();
+  });
+
+  it('has no axe violations when disabled', async () => {
+    const wrapper = createPagination({ page: 10 });
+    const violations = await checkA11y(wrapper.find('[aria-label="Last Page"]').element);
+
+    expect(violations).toEqual([]);
+
+    wrapper.unmount();
+  });
+});
+
+describe('PaginationEllipsis a11y', () => {
+  it('is non-interactive (no button role)', () => {
+    const wrapper = createPagination({ page: 5, total: 200, pageSize: 10 });
+
+    const ellipsis = wrapper.find('[data-type="ellipsis"]');
+    expect(ellipsis.attributes('type')).toBeUndefined();
+    expect(ellipsis.attributes('role')).toBeUndefined();
+
+    wrapper.unmount();
+  });
+
+  it('has no axe violations', async () => {
+    const wrapper = createPagination({ page: 5, total: 200, pageSize: 10 });
+    const violations = await checkA11y(wrapper.find('[data-type="ellipsis"]').element);
+
+    expect(violations).toEqual([]);
+
+    wrapper.unmount();
+  });
+});
+
+describe('Pagination composed a11y', () => {
+  it('has no axe violations on first page', async () => {
+    const wrapper = createPagination({ page: 1 });
+    const violations = await checkA11y(wrapper.element);
+
+    expect(violations).toEqual([]);
+
+    wrapper.unmount();
+  });
+
+  it('has no axe violations on middle page', async () => {
+    const wrapper = createPagination({ page: 5 });
+    const violations = await checkA11y(wrapper.element);
+
+    expect(violations).toEqual([]);
+
+    wrapper.unmount();
+  });
+
+  it('has no axe violations on last page', async () => {
+    const wrapper = createPagination({ page: 10 });
+    const violations = await checkA11y(wrapper.element);
+
+    expect(violations).toEqual([]);
+
+    wrapper.unmount();
+  });
+
+  it('has no axe violations with many pages', async () => {
+    const wrapper = createPagination({ page: 10, total: 500, pageSize: 10 });
+    const violations = await checkA11y(wrapper.element);
+
+    expect(violations).toEqual([]);
+
+    wrapper.unmount();
+  });
+
+  it('has no axe violations when fully disabled', async () => {
+    const wrapper = createPagination({ page: 5, disabled: true });
+    const violations = await checkA11y(wrapper.element);
+
+    expect(violations).toEqual([]);
+
+    wrapper.unmount();
+  });
+
+  it('has no axe violations with showEdges', async () => {
+    const wrapper = createPagination({ page: 5, total: 200, pageSize: 10, showEdges: true });
+    const violations = await checkA11y(wrapper.element);
+
+    expect(violations).toEqual([]);
+
+    wrapper.unmount();
+  });
+});
diff --git a/vue/primitives/src/pagination/__test__/utils.test.ts b/vue/primitives/src/pagination/__test__/utils.test.ts
new file mode 100644
index 0000000..26088b3
--- /dev/null
+++ b/vue/primitives/src/pagination/__test__/utils.test.ts
@@ -0,0 +1,145 @@
+import { describe, expect, it } from 'vitest';
+import { PaginationItemType, getRange, transform } from '../utils';
+
+describe(getRange, () => {
+  it('returns empty array for zero total pages', () => {
+    expect(getRange(1, 0, 1, false)).toEqual([]);
+  });
+
+  it('returns single page when totalPages is 1', () => {
+    expect(getRange(1, 1, 1, false)).toEqual([
+      { type: 'page', value: 1 },
+    ]);
+  });
+
+  it('returns all pages when totalPages fits within visible window', () => {
+    expect(getRange(1, 5, 1, false)).toEqual([
+      { type: 'page', value: 1 },
+      { type: 'page', value: 2 },
+      { type: 'page', value: 3 },
+      { type: 'page', value: 4 },
+      { type: 'page', value: 5 },
+    ]);
+  });
+
+  it('returns all pages when totalPages equals the threshold', () => {
+    // siblingCount=1: totalWithEllipsis = 1*2+3+2 = 7
+    expect(getRange(1, 7, 1, false)).toEqual([
+      { type: 'page', value: 1 },
+      { type: 'page', value: 2 },
+      { type: 'page', value: 3 },
+      { type: 'page', value: 4 },
+      { type: 'page', value: 5 },
+      { type: 'page', value: 6 },
+      { type: 'page', value: 7 },
+    ]);
+  });
+
+  it('shows right ellipsis when current page is near the start', () => {
+    const items = getRange(1, 10, 1, false);
+
+    expect(items[0]).toEqual({ type: 'page', value: 1 });
+    expect(items).toContainEqual({ type: 'ellipsis' });
+    expect(items[items.length - 1]).toEqual({ type: 'page', value: 10 });
+  });
+
+  it('shows left ellipsis when current page is near the end', () => {
+    const items = getRange(10, 10, 1, false);
+
+    expect(items[0]).toEqual({ type: 'page', value: 1 });
+    expect(items).toContainEqual({ type: 'ellipsis' });
+    expect(items[items.length - 1]).toEqual({ type: 'page', value: 10 });
+  });
+
+  it('shows both ellipses when current page is in the middle', () => {
+    const items = getRange(5, 10, 1, false);
+    const ellipses = items.filter(i => i.type === 'ellipsis');
+
+    expect(ellipses).toHaveLength(2);
+    expect(items[0]).toEqual({ type: 'page', value: 1 });
+    expect(items[items.length - 1]).toEqual({ type: 'page', value: 10 });
+    // Should include current page and siblings
+    expect(items).toContainEqual({ type: 'page', value: 4 });
+    expect(items).toContainEqual({ type: 'page', value: 5 });
+    expect(items).toContainEqual({ type: 'page', value: 6 });
+  });
+
+  it('respects siblingCount when generating range', () => {
+    const items = getRange(10, 20, 2, false);
+    const ellipses = items.filter(i => i.type === 'ellipsis');
+
+    expect(ellipses).toHaveLength(2);
+    // Current page ± 2 siblings
+    expect(items).toContainEqual({ type: 'page', value: 8 });
+    expect(items).toContainEqual({ type: 'page', value: 9 });
+    expect(items).toContainEqual({ type: 'page', value: 10 });
+    expect(items).toContainEqual({ type: 'page', value: 11 });
+    expect(items).toContainEqual({ type: 'page', value: 12 });
+  });
+
+  it('shows edge pages when showEdges is true', () => {
+    const items = getRange(5, 10, 1, true);
+
+    // First and last pages should always be present
+    expect(items[0]).toEqual({ type: 'page', value: 1 });
+    expect(items[items.length - 1]).toEqual({ type: 'page', value: 10 });
+
+    // Should have ellipses
+    const ellipses = items.filter(i => i.type === 'ellipsis');
+    expect(ellipses.length).toBeGreaterThanOrEqual(1);
+  });
+
+  it('does not duplicate first/last page with showEdges at boundaries', () => {
+    const items = getRange(1, 10, 1, true);
+    const firstPages = items.filter(i => i.type === 'page' && i.value === 1);
+
+    expect(firstPages).toHaveLength(1);
+  });
+
+  it('handles large siblingCount gracefully', () => {
+    const items = getRange(1, 3, 10, false);
+
+    expect(items).toEqual([
+      { type: 'page', value: 1 },
+      { type: 'page', value: 2 },
+      { type: 'page', value: 3 },
+    ]);
+  });
+
+  it('always includes current page in the result', () => {
+    for (let page = 1; page <= 20; page++) {
+      const items = getRange(page, 20, 1, false);
+      const pages = items.filter(i => i.type === 'page').map(i => (i as { type: 'page'; value: number }).value);
+
+      expect(pages).toContain(page);
+    }
+  });
+});
+
+describe(transform, () => {
+  it('converts numbers to page items', () => {
+    expect(transform([1, 2, 3])).toEqual([
+      { type: PaginationItemType.Page, value: 1 },
+      { type: PaginationItemType.Page, value: 2 },
+      { type: PaginationItemType.Page, value: 3 },
+    ]);
+  });
+
+  it('converts strings to ellipsis items', () => {
+    expect(transform(['...'])).toEqual([
+      { type: PaginationItemType.Ellipsis },
+    ]);
+  });
+
+  it('converts mixed array', () => {
+    expect(transform([1, '...', 5])).toEqual([
+      { type: PaginationItemType.Page, value: 1 },
+      { type: PaginationItemType.Ellipsis },
+      { type: PaginationItemType.Page, value: 5 },
+    ]);
+  });
+
+  it('returns empty array for empty input', () => {
+    expect(transform([])).toEqual([]);
+  });
+});
diff --git a/vue/primitives/src/pagination/context.ts b/vue/primitives/src/pagination/context.ts
new file mode 100644
index 0000000..6a36bfc
--- /dev/null
+++ b/vue/primitives/src/pagination/context.ts
@@ -0,0 +1,22 @@
+import type { Ref } from 'vue';
+import { useContextFactory } from '@robonen/vue';
+
+export interface PaginationContext {
+  currentPage: Readonly<Ref<number>>;
+  totalPages: Readonly<Ref<number>>;
+  pageSize: Readonly<Ref<number>>;
+  siblingCount: Readonly<Ref<number>>;
+  showEdges: Readonly<Ref<boolean>>;
+  disabled: Readonly<Ref<boolean>>;
+  isFirstPage: Readonly<Ref<boolean>>;
+  isLastPage: Readonly<Ref<boolean>>;
+  onPageChange: (value: number) => void;
+  next: () => void;
+  prev: () => void;
+  select: (page: number) => void;
+}
+
+export const PaginationCtx = useContextFactory<PaginationContext>('PaginationContext');
+
+export const providePaginationContext = PaginationCtx.provide;
+export const injectPaginationContext = PaginationCtx.inject;
diff --git a/vue/primitives/src/pagination/index.ts b/vue/primitives/src/pagination/index.ts
new file mode 100644
index 0000000..addda62
--- /dev/null
+++ b/vue/primitives/src/pagination/index.ts
@@ -0,0 +1,20 @@
+export { default as PaginationRoot } from './PaginationRoot.vue';
+export { default as PaginationList } from './PaginationList.vue';
+export { default as PaginationListItem } from './PaginationListItem.vue';
+export { default as PaginationEllipsis } from './PaginationEllipsis.vue';
+export { default as PaginationFirst } from './PaginationFirst.vue';
+export { default as PaginationLast } from './PaginationLast.vue';
+export { default as PaginationPrev } from './PaginationPrev.vue';
+export { default as PaginationNext } from './PaginationNext.vue';
+
+export { PaginationCtx, type PaginationContext } from './context';
+export { PaginationItemType, getRange, transform, type PaginationItem, type Pages } from './utils';
+
+export type { PaginationRootProps } from './PaginationRoot.vue';
+export type { PaginationListProps } from './PaginationList.vue';
+export type { PaginationListItemProps } from './PaginationListItem.vue';
+export type { PaginationEllipsisProps } from './PaginationEllipsis.vue';
+export type { PaginationFirstProps } from './PaginationFirst.vue';
+export type { PaginationLastProps } from './PaginationLast.vue';
+export type { PaginationPrevProps } from './PaginationPrev.vue';
+export type { PaginationNextProps } from './PaginationNext.vue';
diff --git a/vue/primitives/src/pagination/utils.ts b/vue/primitives/src/pagination/utils.ts
new file mode 100644
index 0000000..c7c6d32
--- /dev/null
+++ b/vue/primitives/src/pagination/utils.ts
@@ -0,0 +1,90 @@
+export enum PaginationItemType {
+  Page = 'page',
+  Ellipsis = 'ellipsis',
+}
+
+export type PaginationItem
+  = | { type: 'page'; value: number }
+    | { type: 'ellipsis' };
+
+export type Pages = PaginationItem[];
+
+export function transform(items: Array<string | number>): Pages {
+  return items.map((value) => {
+    if (typeof value === 'number')
+      return { type: PaginationItemType.Page, value };
+    return { type: PaginationItemType.Ellipsis };
+  });
+}
+
+const ELLIPSIS: PaginationItem = { type: 'ellipsis' };
+
+function page(value: number): PaginationItem {
+  return { type: 'page', value };
+}
+
+function range(start: number, end: number): PaginationItem[] {
+  const items: PaginationItem[] = [];
+
+  for (let i = start; i <= end; i++)
+    items.push(page(i));
+
+  return items;
+}
+
+export function getRange(
+  currentPage: number,
+  totalPages: number,
+  siblingCount: number,
+  showEdges: boolean,
+): PaginationItem[] {
+  if (totalPages <= 0)
+    return [];
+
+  // If total pages fit within the visible window, show all pages
+  const totalVisible = siblingCount * 2 + 3; // siblings + current + 2 edges
+  const totalWithEllipsis = totalVisible + 2; // + 2 ellipsis slots
+
+  if (totalPages <= totalWithEllipsis)
+    return range(1, totalPages);
+
+  const leftSiblingStart = Math.max(currentPage - siblingCount, 1);
+  const rightSiblingEnd = Math.min(currentPage + siblingCount, totalPages);
+
+  const leftEdgeOffset = showEdges ? 1 : 0;
+  const showLeftEllipsis = leftSiblingStart > 2 + leftEdgeOffset;
+  const showRightEllipsis = rightSiblingEnd < totalPages - 1 - leftEdgeOffset;
+
+  const items: PaginationItem[] = [];
+
+  // Always show first page (either as edge or as part of the sequence)
+  items.push(page(1));
+
+  if (showLeftEllipsis) {
+    items.push(ELLIPSIS);
+  }
+  else {
+    // Show all pages from 2 to leftSiblingStart - 1
+    for (let i = 2; i < leftSiblingStart; i++)
+      items.push(page(i));
+  }
+
+  // Sibling pages including current (skip 1 since already added)
+  for (let i = Math.max(leftSiblingStart, 2); i <= Math.min(rightSiblingEnd, totalPages - 1); i++)
+    items.push(page(i));
+
+  if (showRightEllipsis) {
+    items.push(ELLIPSIS);
+  }
+  else {
+    // Show all pages from rightSiblingEnd + 1 to totalPages - 1
+    for (let i = rightSiblingEnd + 1; i < totalPages; i++)
+      items.push(page(i));
+  }
+
+  // Always show last page (if more than 1 page)
+  if (totalPages > 1)
+    items.push(page(totalPages));
+
+  return items;
+}
diff --git a/vue/primitives/src/pin-input/PinInputInput.vue b/vue/primitives/src/pin-input/PinInputInput.vue
new file mode 100644
index 0000000..814d8a5
--- /dev/null
+++ b/vue/primitives/src/pin-input/PinInputInput.vue
@@ -0,0 +1,133 @@
+<script lang="ts">
+const DIGIT_RE = /\d/;
+const NON_DIGIT_G = /\D/g;
+</script>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, useTemplateRef, watch } from 'vue';
+import { usePinInputContext } from './context';
+
+interface Props {
+  index: number;
+}
+
+const props = defineProps<Props>();
+const ctx = usePinInputContext();
+const el = useTemplateRef<HTMLInputElement>('el');
+
+watch(el, (curr, prev) => {
+  if (prev)
+    ctx.unregister(prev);
+  if (curr)
+    ctx.register(curr);
+});
+
+onBeforeUnmount(() => {
+  if (el.value)
+    ctx.unregister(el.value);
+});
+
+const displayed = computed(() => {
+  const ch = ctx.value.value[props.index] ?? '';
+  if (!ch)
+    return '';
+  return ctx.mask.value ? '•' : ch;
+});
+
+// `inputType` / `inputMode` were thin ternary wrappers — inline in template.
+
+function onInput(e: Event): void {
+  const target = e.target as HTMLInputElement;
+  const raw = target.value;
+  // keep only the last typed character
+  let ch = raw.length > 0 ? raw[raw.length - 1]! : '';
+  if (ctx.type.value === 'number' && ch && !DIGIT_RE.test(ch))
+    ch = '';
+  ctx.setAt(props.index, ch);
+  // re-sync DOM input since we overwrite with displayed
+  target.value = ch ? (ctx.mask.value ? '•' : ch) : '';
+  if (ch && props.index < ctx.length.value - 1)
+    ctx.focusIndex(props.index + 1);
+}
+
+function onKeyDown(e: KeyboardEvent): void {
+  const i = props.index;
+  const n = ctx.length.value;
+  switch (e.key) {
+    case 'Backspace': {
+      const current = ctx.value.value[i] ?? '';
+      if (current) {
+        ctx.clearAt(i);
+      }
+      else if (i > 0) {
+        ctx.focusIndex(i - 1);
+        ctx.clearAt(i - 1);
+      }
+      e.preventDefault();
+      break;
+    }
+    case 'Delete': {
+      ctx.clearAt(i);
+      e.preventDefault();
+      break;
+    }
+    case 'ArrowLeft': {
+      if (i > 0)
+        ctx.focusIndex(i - 1);
+      e.preventDefault();
+      break;
+    }
+    case 'ArrowRight': {
+      if (i < n - 1)
+        ctx.focusIndex(i + 1);
+      e.preventDefault();
+      break;
+    }
+    case 'Home': {
+      ctx.focusIndex(0);
+      e.preventDefault();
+      break;
+    }
+    case 'End': {
+      ctx.focusIndex(n - 1);
+      e.preventDefault();
+      break;
+    }
+  }
+}
+
+function onPaste(e: ClipboardEvent): void {
+  const data = e.clipboardData?.getData('text') ?? '';
+  if (!data)
+    return;
+  e.preventDefault();
+  const chars = ctx.type.value === 'number'
+    ? data.replaceAll(NON_DIGIT_G, '').split('')
+    : data.split('');
+  let idx = props.index;
+  for (const ch of chars) {
+    if (idx >= ctx.length.value)
+      break;
+    ctx.setAt(idx, ch);
+    idx++;
+  }
+  ctx.focusIndex(Math.min(idx, ctx.length.value - 1));
+}
+</script>
+
+<template>
+  <input
+    ref="el"
+    :type="ctx.mask.value ? 'password' : 'text'"
+    :inputmode="ctx.type.value === 'number' ? 'numeric' : 'text'"
+    :value="displayed"
+    :placeholder="ctx.placeholder.value"
+    :disabled="ctx.disabled.value"
+    :autocomplete="ctx.otp.value ? 'one-time-code' : 'off'"
+    :data-index="props.index"
+    maxlength="1"
+    @input="onInput"
+    @keydown="onKeyDown"
+    @paste="onPaste"
+  >
+</template>
diff --git a/vue/primitives/src/pin-input/PinInputRoot.vue b/vue/primitives/src/pin-input/PinInputRoot.vue
new file mode 100644
index 0000000..bdf54b2
--- /dev/null
+++ b/vue/primitives/src/pin-input/PinInputRoot.vue
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from '../primitive';
+import { Primitive } from '../primitive';
+import { computed, ref, toRef, watch } from 'vue';
+import { providePinInputContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+interface Props extends PrimitiveProps {
+  modelValue?: string[];
+  defaultValue?: string[];
+  length?: number;
+  mask?: boolean;
+  otp?: boolean;
+  type?: 'text' | 'number';
+  disabled?: boolean;
+  placeholder?: string;
+
+}
+
+const {
+  modelValue,
+  defaultValue,
+  length = 4,
+  mask = false,
+  otp = false,
+  type = 'text',
+  disabled = false,
+  placeholder = '',
+  as = 'div',
+} = defineProps<Props>();
+
+const { forwardRef } = useForwardExpose();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: string[]): void;
+  (e: 'complete', v: string): void;
+}>();
+
+const lengthRef = computed(() => Math.max(1, length | 0));
+
+function normalize(v: readonly string[] | undefined): string[] {
+  const out = Array.from<string>({ length: lengthRef.value }, () => '');
+  if (!v)
+    return out;
+  for (let i = 0; i < Math.min(v.length, lengthRef.value); i++)
+    out[i] = (v[i] ?? '').slice(0, 1);
+  return out;
+}
+
+const value = ref<string[]>(normalize(modelValue ?? defaultValue));
+
+watch(() => modelValue, (v) => {
+  if (v === undefined)
+    return;
+  const nv = normalize(v);
+  if (nv.join('\u0000') !== value.value.join('\u0000'))
+    value.value = nv;
+});
+
+watch(lengthRef, (n) => {
+  if (value.value.length === n)
+    return;
+  const next = Array.from<string>({ length: n }, () => '');
+  for (let i = 0; i < Math.min(value.value.length, n); i++)
+    next[i] = value.value[i]!;
+  value.value = next;
+});
+
+const inputs = ref<HTMLInputElement[]>([]);
+
+function register(el: HTMLInputElement): void {
+  if (!inputs.value.includes(el))
+    inputs.value.push(el);
+}
+function unregister(el: HTMLInputElement): void {
+  const i = inputs.value.indexOf(el);
+  if (i !== -1)
+    inputs.value.splice(i, 1);
+}
+
+function emitValue(v: string[]): void {
+  emit('update:modelValue', v);
+  if (v.every(ch => ch.length === 1))
+    emit('complete', v.join(''));
+}
+
+function setAt(index: number, char: string): void {
+  if (disabled)
+    return;
+  const ch = char.slice(0, 1);
+  if (ch && type === 'number' && !/\d/.test(ch))
+    return;
+  const next = value.value.slice();
+  next[index] = ch;
+  value.value = next;
+  emitValue(next);
+}
+
+function clearAt(index: number): void {
+  if (disabled)
+    return;
+  const next = value.value.slice();
+  next[index] = '';
+  value.value = next;
+  emitValue(next);
+}
+
+function focusIndex(index: number): void {
+  const el = inputs.value[index];
+  if (el) {
+    el.focus();
+    try {
+      el.select();
+    }
+    catch {
+      /* noop */
+    }
+  }
+}
+
+providePinInputContext({
+  value,
+  length: lengthRef,
+  mask: toRef(() => mask),
+  otp: toRef(() => otp),
+  type: toRef(() => type),
+  disabled: toRef(() => disabled),
+  placeholder: toRef(() => placeholder),
+  inputs,
+  register,
+  unregister,
+  setAt,
+  clearAt,
+  focusIndex,
+});
+
+defineSlots<{
+  default: (props: { value: string[]; isComplete: boolean }) => unknown;
+}>();
+
+const isComplete = computed(() => value.value.every(ch => ch.length === 1));
+</script>
+
+<template>
+  <Primitive :ref="forwardRef" :as="as" role="group" :data-disabled="disabled ? '' : undefined">
+    <slot :value="value" :is-complete="isComplete" />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/pin-input/__test__/PinInput.test.ts b/vue/primitives/src/pin-input/__test__/PinInput.test.ts
new file mode 100644
index 0000000..1259942
--- /dev/null
+++ b/vue/primitives/src/pin-input/__test__/PinInput.test.ts
@@ -0,0 +1,125 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import type { Component } from 'vue';
+import { defineComponent, h, nextTick, ref } from 'vue';
+import { PinInputInput, PinInputRoot } from '../index';
+
+function mountPin(props: Record<string, unknown> = {}) {
+  const model = ref<string[] | undefined>(undefined);
+  const completed = ref<string | null>(null);
+  const Harness = defineComponent({
+    setup: () => () => h(PinInputRoot, {
+      modelValue: model.value,
+      length: 4,
+      'onUpdate:modelValue': (v: string[]) => { model.value = v; },
+      onComplete: (v: string) => { completed.value = v; },
+      ...props,
+    }, {
+      default: () => [0, 1, 2, 3].map(i => h(PinInputInput as Component, { key: i, index: i })),
+    }),
+  });
+  const wrapper = mount(Harness, { attachTo: document.body });
+  return { wrapper, model, completed };
+}
+
+function inputs(): HTMLInputElement[] {
+  return Array.from(document.querySelectorAll<HTMLInputElement>('input[data-index]'));
+}
+
+function type(el: HTMLInputElement, ch: string): void {
+  el.value = ch;
+  el.dispatchEvent(new Event('input', { bubbles: true }));
+}
+
+function key(el: Element, k: string): void {
+  el.dispatchEvent(new KeyboardEvent('keydown', { key: k, bubbles: true, cancelable: true }));
+}
+
+describe('PinInput', () => {
+  it('renders N inputs based on length', () => {
+    const { wrapper } = mountPin();
+    expect(inputs().length).toBe(4);
+    wrapper.unmount();
+  });
+
+  it('typing auto-advances focus and fires complete', async () => {
+    const { wrapper, model, completed } = mountPin();
+    await nextTick();
+    const [a, b, c, d] = inputs();
+    type(a!, '1');
+    await nextTick();
+    expect(document.activeElement).toBe(b);
+    type(b!, '2');
+    type(c!, '3');
+    type(d!, '4');
+    await nextTick();
+    expect(model.value).toEqual(['1', '2', '3', '4']);
+    expect(completed.value).toBe('1234');
+    wrapper.unmount();
+  });
+
+  it('Backspace on empty moves to previous and clears', async () => {
+    const { wrapper, model } = mountPin();
+    await nextTick();
+    const [a, b] = inputs();
+    type(a!, '1');
+    await nextTick();
+    b!.focus();
+    key(b!, 'Backspace');
+    await nextTick();
+    expect(document.activeElement).toBe(a);
+    expect(model.value![0]).toBe('');
+    wrapper.unmount();
+  });
+
+  it('ArrowLeft/ArrowRight navigate', async () => {
+    const { wrapper } = mountPin();
+    await nextTick();
+    const [a, b, c] = inputs();
+    b!.focus();
+    key(b!, 'ArrowLeft');
+    expect(document.activeElement).toBe(a);
+    key(a!, 'ArrowRight');
+    expect(document.activeElement).toBe(b);
+    key(b!, 'ArrowRight');
+    expect(document.activeElement).toBe(c);
+    wrapper.unmount();
+  });
+
+  it('type=number rejects non-digit input', async () => {
+    const { wrapper, model } = mountPin({ type: 'number' });
+    await nextTick();
+    const [a] = inputs();
+    type(a!, 'x');
+    await nextTick();
+    expect(model.value?.[0] ?? '').toBe('');
+    type(a!, '7');
+    await nextTick();
+    expect(model.value![0]).toBe('7');
+    wrapper.unmount();
+  });
+
+  it('paste fills across inputs', async () => {
+    const { wrapper, model, completed } = mountPin();
+    await nextTick();
+    const [a] = inputs();
+    a!.focus();
+    const event = new Event('paste', { bubbles: true, cancelable: true }) as unknown as ClipboardEvent;
+    Object.defineProperty(event, 'clipboardData', {
+      value: { getData: (_type: string) => '9876' },
+    });
+    a!.dispatchEvent(event);
+    await nextTick();
+    expect(model.value).toEqual(['9', '8', '7', '6']);
+    expect(completed.value).toBe('9876');
+    wrapper.unmount();
+  });
+
+  it('mask renders password type for each input', async () => {
+    const { wrapper } = mountPin({ mask: true });
+    await nextTick();
+    for (const el of inputs())
+      expect(el.getAttribute('type')).toBe('password');
+    wrapper.unmount();
+  });
+});
diff --git a/vue/primitives/src/pin-input/context.ts b/vue/primitives/src/pin-input/context.ts
new file mode 100644
index 0000000..c1bb67b
--- /dev/null
+++ b/vue/primitives/src/pin-input/context.ts
@@ -0,0 +1,23 @@
+import type { ComputedRef, Ref } from 'vue';
+import { useContextFactory } from '@robonen/vue';
+
+export interface PinInputContext {
+  value: Ref<string[]>;
+  length: ComputedRef<number>;
+  mask: ComputedRef<boolean>;
+  otp: ComputedRef<boolean>;
+  type: ComputedRef<'text' | 'number'>;
+  disabled: ComputedRef<boolean>;
+  placeholder: ComputedRef<string>;
+  inputs: Ref<HTMLInputElement[]>;
+  register: (el: HTMLInputElement) => void;
+  unregister: (el: HTMLInputElement) => void;
+  setAt: (index: number, char: string) => void;
+  clearAt: (index: number) => void;
+  focusIndex: (index: number) => void;
+}
+
+const ctx = useContextFactory<PinInputContext>('PinInputContext');
+
+export const providePinInputContext = ctx.provide;
+export const usePinInputContext = ctx.inject;
diff --git a/vue/primitives/src/pin-input/index.ts b/vue/primitives/src/pin-input/index.ts
new file mode 100644
index 0000000..51f8601
--- /dev/null
+++ b/vue/primitives/src/pin-input/index.ts
@@ -0,0 +1,3 @@
+export { default as PinInputInput } from './PinInputInput.vue';
+export { default as PinInputRoot } from './PinInputRoot.vue';
+export * from './context';
diff --git a/vue/primitives/src/popover/PopoverAnchor.vue b/vue/primitives/src/popover/PopoverAnchor.vue
new file mode 100644
index 0000000..6542f0a
--- /dev/null
+++ b/vue/primitives/src/popover/PopoverAnchor.vue
@@ -0,0 +1,28 @@
+<script lang="ts">
+import type { PopperAnchorProps } from '../popper';
+
+export interface PopoverAnchorProps extends PopperAnchorProps {}
+</script>
+
+<script setup lang="ts">
+import { onBeforeMount, onUnmounted } from 'vue';
+import { PopperAnchor } from '../popper';
+import { usePopoverContext } from './context';
+
+const props = defineProps<PopoverAnchorProps>();
+
+const ctx = usePopoverContext();
+
+onBeforeMount(() => {
+  ctx.hasCustomAnchor.value = true;
+});
+onUnmounted(() => {
+  ctx.hasCustomAnchor.value = false;
+});
+</script>
+
+<template>
+  <PopperAnchor v-bind="props">
+    <slot />
+  </PopperAnchor>
+</template>
diff --git a/vue/primitives/src/popover/PopoverArrow.vue b/vue/primitives/src/popover/PopoverArrow.vue
new file mode 100644
index 0000000..5517e9c
--- /dev/null
+++ b/vue/primitives/src/popover/PopoverArrow.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { PopperArrowProps } from '../popper';
+
+export interface PopoverArrowProps extends PopperArrowProps {}
+</script>
+
+<script setup lang="ts">
+import { PopperArrow } from '../popper';
+
+const { width = 10, height = 5 } = defineProps<PopoverArrowProps>();
+</script>
+
+<template>
+  <PopperArrow :width="width" :height="height">
+    <slot />
+  </PopperArrow>
+</template>
diff --git a/vue/primitives/src/popover/PopoverClose.vue b/vue/primitives/src/popover/PopoverClose.vue
new file mode 100644
index 0000000..2d2d564
--- /dev/null
+++ b/vue/primitives/src/popover/PopoverClose.vue
@@ -0,0 +1,26 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface PopoverCloseProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { usePopoverContext } from './context';
+
+const { as = 'button' } = defineProps<PopoverCloseProps>();
+const { forwardRef } = useForwardExpose();
+const ctx = usePopoverContext();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :type="as === 'button' ? 'button' : undefined"
+    @click="ctx.onOpenChange(false)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/popover/PopoverContent.vue b/vue/primitives/src/popover/PopoverContent.vue
new file mode 100644
index 0000000..2520b54
--- /dev/null
+++ b/vue/primitives/src/popover/PopoverContent.vue
@@ -0,0 +1,53 @@
+<script lang="ts">
+import type { PopoverContentImplEmits, PopoverContentImplProps } from './PopoverContentImpl.vue';
+
+export interface PopoverContentProps extends PopoverContentImplProps {
+  /** Keep mounted for CSS exit animations. */
+  forceMount?: boolean;
+}
+
+export type PopoverContentEmits = PopoverContentImplEmits;
+</script>
+
+<script setup lang="ts">
+import PopoverContentModal from './PopoverContentModal.vue';
+import PopoverContentNonModal from './PopoverContentNonModal.vue';
+import { Presence } from '../presence';
+import { usePopoverContext } from './context';
+
+const { forceMount = false, ...contentProps } = defineProps<PopoverContentProps>();
+const emit = defineEmits<PopoverContentEmits>();
+
+const ctx = usePopoverContext();
+</script>
+
+<template>
+  <Presence :present="ctx.open.value" :force-mount="forceMount">
+    <PopoverContentModal
+      v-if="ctx.modal.value"
+      v-bind="contentProps"
+      @open-auto-focus="emit('openAutoFocus', $event)"
+      @close-auto-focus="emit('closeAutoFocus', $event)"
+      @escape-key-down="emit('escapeKeyDown', $event)"
+      @pointer-down-outside="emit('pointerDownOutside', $event)"
+      @focus-outside="emit('focusOutside', $event)"
+      @interact-outside="emit('interactOutside', $event)"
+      @dismiss="emit('dismiss')"
+    >
+      <slot />
+    </PopoverContentModal>
+    <PopoverContentNonModal
+      v-else
+      v-bind="contentProps"
+      @open-auto-focus="emit('openAutoFocus', $event)"
+      @close-auto-focus="emit('closeAutoFocus', $event)"
+      @escape-key-down="emit('escapeKeyDown', $event)"
+      @pointer-down-outside="emit('pointerDownOutside', $event)"
+      @focus-outside="emit('focusOutside', $event)"
+      @interact-outside="emit('interactOutside', $event)"
+      @dismiss="emit('dismiss')"
+    >
+      <slot />
+    </PopoverContentNonModal>
+  </Presence>
+</template>
diff --git a/vue/primitives/src/popover/PopoverContentImpl.vue b/vue/primitives/src/popover/PopoverContentImpl.vue
new file mode 100644
index 0000000..7912c93
--- /dev/null
+++ b/vue/primitives/src/popover/PopoverContentImpl.vue
@@ -0,0 +1,78 @@
+<script lang="ts">
+import type { DismissableLayerEmits } from '../dismissable-layer';
+import type { FocusScopeEmits } from '../focus-scope';
+import type { PopperContentProps } from '../popper';
+
+export interface PopoverContentImplProps extends PopperContentProps {
+  /** Trap focus inside the content (modal popovers). */
+  trapFocus?: boolean;
+  /** Block outside pointer events (modal popovers). */
+  disableOutsidePointerEvents?: boolean;
+}
+
+export interface PopoverContentImplEmits {
+  openAutoFocus: FocusScopeEmits['mountAutoFocus'];
+  closeAutoFocus: FocusScopeEmits['unmountAutoFocus'];
+  escapeKeyDown: DismissableLayerEmits['escapeKeyDown'];
+  pointerDownOutside: DismissableLayerEmits['pointerDownOutside'];
+  focusOutside: DismissableLayerEmits['focusOutside'];
+  interactOutside: DismissableLayerEmits['interactOutside'];
+  dismiss: [];
+}
+</script>
+
+<script setup lang="ts">
+import { DismissableLayer } from '../dismissable-layer';
+import { FocusScope } from '../focus-scope';
+import { PopperContent } from '../popper';
+import { usePopoverContext } from './context';
+
+const {
+  trapFocus = false,
+  disableOutsidePointerEvents = false,
+  as = 'div',
+  ...popperProps
+} = defineProps<PopoverContentImplProps>();
+
+const emit = defineEmits<PopoverContentImplEmits>();
+
+const ctx = usePopoverContext();
+</script>
+
+<template>
+  <FocusScope
+    as="template"
+    :loop="true"
+    :trapped="trapFocus"
+    @mount-auto-focus="emit('openAutoFocus', $event)"
+    @unmount-auto-focus="emit('closeAutoFocus', $event)"
+  >
+    <DismissableLayer
+      as="template"
+      :disable-outside-pointer-events="disableOutsidePointerEvents"
+      @escape-key-down="emit('escapeKeyDown', $event)"
+      @pointer-down-outside="emit('pointerDownOutside', $event)"
+      @focus-outside="emit('focusOutside', $event)"
+      @interact-outside="emit('interactOutside', $event)"
+      @dismiss="ctx.onOpenChange(false)"
+    >
+      <PopperContent
+        :id="ctx.contentId.value"
+        :as="as"
+        v-bind="popperProps"
+        :data-state="ctx.open.value ? 'open' : 'closed'"
+        :aria-labelledby="ctx.triggerId.value"
+        role="dialog"
+        :style="{
+          '--popover-content-transform-origin': 'var(--popper-transform-origin)',
+          '--popover-content-available-width': 'var(--popper-available-width)',
+          '--popover-content-available-height': 'var(--popper-available-height)',
+          '--popover-trigger-width': 'var(--popper-anchor-width)',
+          '--popover-trigger-height': 'var(--popper-anchor-height)',
+        }"
+      >
+        <slot />
+      </PopperContent>
+    </DismissableLayer>
+  </FocusScope>
+</template>
diff --git a/vue/primitives/src/popover/PopoverContentModal.vue b/vue/primitives/src/popover/PopoverContentModal.vue
new file mode 100644
index 0000000..fac0124
--- /dev/null
+++ b/vue/primitives/src/popover/PopoverContentModal.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { PopoverContentImplEmits, PopoverContentImplProps } from './PopoverContentImpl.vue';
+import PopoverContentImpl from './PopoverContentImpl.vue';
+import { ref } from 'vue';
+import { useBodyScrollLock } from '@robonen/vue';
+import { usePopoverContext } from './context';
+
+const props = defineProps<PopoverContentImplProps>();
+const emit = defineEmits<PopoverContentImplEmits>();
+
+const ctx = usePopoverContext();
+const isRightClickOutsideRef = ref(false);
+
+useBodyScrollLock();
+</script>
+
+<template>
+  <PopoverContentImpl
+    v-bind="props"
+    :trap-focus="ctx.open.value"
+    disable-outside-pointer-events
+    @close-auto-focus.prevent="(event: Event) => {
+      emit('closeAutoFocus', event);
+      if (!isRightClickOutsideRef) ctx.triggerElement.value?.focus();
+    }"
+    @pointer-down-outside="(event: PointerEvent | MouseEvent) => {
+      emit('pointerDownOutside', event);
+      const ctrlLeftClick = event.button === 0 && event.ctrlKey === true;
+      isRightClickOutsideRef = event.button === 2 || ctrlLeftClick;
+    }"
+    @focus-outside.prevent
+    @escape-key-down="emit('escapeKeyDown', $event)"
+    @interact-outside="emit('interactOutside', $event)"
+    @dismiss="emit('dismiss')"
+    @open-auto-focus="emit('openAutoFocus', $event)"
+  >
+    <slot />
+  </PopoverContentImpl>
+</template>
diff --git a/vue/primitives/src/popover/PopoverContentNonModal.vue b/vue/primitives/src/popover/PopoverContentNonModal.vue
new file mode 100644
index 0000000..e7a7d39
--- /dev/null
+++ b/vue/primitives/src/popover/PopoverContentNonModal.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { PopoverContentImplEmits, PopoverContentImplProps } from './PopoverContentImpl.vue';
+import PopoverContentImpl from './PopoverContentImpl.vue';
+import { ref } from 'vue';
+import { usePopoverContext } from './context';
+
+const props = defineProps<PopoverContentImplProps>();
+const emit = defineEmits<PopoverContentImplEmits>();
+
+const ctx = usePopoverContext();
+const hasInteractedOutsideRef = ref(false);
+const hasPointerDownOutsideRef = ref(false);
+</script>
+
+<template>
+  <PopoverContentImpl
+    v-bind="props"
+    :trap-focus="false"
+    :disable-outside-pointer-events="false"
+    @close-auto-focus="(event: Event) => {
+      emit('closeAutoFocus', event);
+      if (!event.defaultPrevented) {
+        if (!hasInteractedOutsideRef) ctx.triggerElement.value?.focus();
+        event.preventDefault();
+      }
+      hasInteractedOutsideRef = false;
+      hasPointerDownOutsideRef = false;
+    }"
+    @interact-outside="(event: PointerEvent | MouseEvent | FocusEvent) => {
+      emit('interactOutside', event);
+      if (!event.defaultPrevented) {
+        hasInteractedOutsideRef = true;
+        if (event.type === 'pointerdown') hasPointerDownOutsideRef = true;
+      }
+      const target = event.target as HTMLElement;
+      if (ctx.triggerElement.value?.contains(target)) event.preventDefault();
+      if (event.type === 'focusin' && hasPointerDownOutsideRef) event.preventDefault();
+    }"
+    @escape-key-down="emit('escapeKeyDown', $event)"
+    @pointer-down-outside="emit('pointerDownOutside', $event)"
+    @focus-outside="emit('focusOutside', $event)"
+    @dismiss="emit('dismiss')"
+    @open-auto-focus="emit('openAutoFocus', $event)"
+  >
+    <slot />
+  </PopoverContentImpl>
+</template>
diff --git a/vue/primitives/src/popover/PopoverPortal.vue b/vue/primitives/src/popover/PopoverPortal.vue
new file mode 100644
index 0000000..2ef8a8e
--- /dev/null
+++ b/vue/primitives/src/popover/PopoverPortal.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { TeleportPrimitiveProps } from '../teleport';
+
+export interface PopoverPortalProps extends TeleportPrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import PortalPrimitive from '../teleport/Teleport.vue';
+
+const props = defineProps<PopoverPortalProps>();
+</script>
+
+<template>
+  <PortalPrimitive v-bind="props">
+    <slot />
+  </PortalPrimitive>
+</template>
diff --git a/vue/primitives/src/popover/PopoverRoot.vue b/vue/primitives/src/popover/PopoverRoot.vue
new file mode 100644
index 0000000..ee92449
--- /dev/null
+++ b/vue/primitives/src/popover/PopoverRoot.vue
@@ -0,0 +1,56 @@
+<script lang="ts">
+export interface PopoverRootProps {
+  /** Uncontrolled initial open state. Ignored once `v-model:open` is bound. */
+  defaultOpen?: boolean;
+  /**
+   * Modal mode traps focus, locks scroll, and disables outside pointer events.
+   * @default false
+   */
+  modal?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { ref, toRef } from 'vue';
+import { PopperRoot } from '../popper';
+import { providePopoverContext } from './context';
+import { useId } from '../config-provider';
+
+defineOptions({ inheritAttrs: false });
+
+const { defaultOpen = false, modal = false } = defineProps<PopoverRootProps>();
+
+const localOpen = ref<boolean>(defaultOpen);
+
+const open = defineModel<boolean>('open', {
+  default: undefined,
+  get: v => v ?? localOpen.value,
+  set: (v) => {
+    localOpen.value = v;
+    return v;
+  },
+});
+
+const triggerId = useId(undefined, 'popover-trigger');
+const contentId = useId(undefined, 'popover-content');
+const triggerElement = ref<HTMLElement>();
+const hasCustomAnchor = ref(false);
+
+providePopoverContext({
+  open,
+  // Identity passthrough via `toRef` — reactive without `computed`'s effect/cache.
+  modal: toRef(() => modal),
+  triggerId,
+  contentId,
+  triggerElement,
+  hasCustomAnchor,
+  onOpenChange: (value) => { open.value = value; },
+  onOpenToggle: () => { open.value = !open.value; },
+});
+</script>
+
+<template>
+  <PopperRoot>
+    <slot :open="open" :close="() => open = false" />
+  </PopperRoot>
+</template>
diff --git a/vue/primitives/src/popover/PopoverTrigger.vue b/vue/primitives/src/popover/PopoverTrigger.vue
new file mode 100644
index 0000000..8e87221
--- /dev/null
+++ b/vue/primitives/src/popover/PopoverTrigger.vue
@@ -0,0 +1,40 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface PopoverTriggerProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { PopperAnchor } from '../popper';
+import { Primitive } from '../primitive';
+import { onMounted } from 'vue';
+import { useForwardExpose } from '@robonen/vue';
+import { usePopoverContext } from './context';
+
+const { as = 'button' } = defineProps<PopoverTriggerProps>();
+
+const ctx = usePopoverContext();
+const { forwardRef, currentElement: triggerElement } = useForwardExpose();
+
+onMounted(() => {
+  ctx.triggerElement.value = triggerElement.value;
+});
+</script>
+
+<template>
+  <component :is="ctx.hasCustomAnchor.value ? Primitive : PopperAnchor" as="template">
+    <Primitive
+      :id="ctx.triggerId.value"
+      :ref="forwardRef"
+      :as="as"
+      :type="as === 'button' ? 'button' : undefined"
+      aria-haspopup="dialog"
+      :aria-expanded="ctx.open.value"
+      :aria-controls="ctx.contentId.value"
+      :data-state="ctx.open.value ? 'open' : 'closed'"
+      @click="ctx.onOpenToggle"
+    >
+      <slot />
+    </Primitive>
+  </component>
+</template>
diff --git a/vue/primitives/src/popover/__test__/Popover.test.ts b/vue/primitives/src/popover/__test__/Popover.test.ts
new file mode 100644
index 0000000..f9ccb2c
--- /dev/null
+++ b/vue/primitives/src/popover/__test__/Popover.test.ts
@@ -0,0 +1,169 @@
+import {
+  PopoverClose,
+  PopoverContent,
+  PopoverRoot,
+  PopoverTrigger,
+} from '../index';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { defineComponent, h, nextTick, ref } from 'vue';
+import type { VueWrapper } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+import { userEvent } from 'vitest/browser';
+
+const wrappers: Array<VueWrapper<any>> = [];
+
+afterEach(() => {
+  while (wrappers.length) wrappers.pop()!.unmount();
+  document.body.innerHTML = '';
+  document.body.removeAttribute('style');
+});
+
+function track<T extends VueWrapper<any>>(w: T): T {
+  wrappers.push(w);
+  return w;
+}
+
+function mountPopover(options: {
+  open?: boolean;
+  defaultOpen?: boolean;
+  modal?: boolean;
+  onUpdateOpen?: (v: boolean) => void;
+} = {}) {
+  const Wrapper = defineComponent({
+    setup() {
+      return () => h(
+        PopoverRoot,
+        {
+          open: options.open,
+          defaultOpen: options.defaultOpen,
+          modal: options.modal,
+          'onUpdate:open': options.onUpdateOpen,
+        },
+        {
+          default: () => [
+            h(PopoverTrigger, null, { default: () => 'Toggle' }),
+            h(PopoverContent, { forceMount: true }, {
+              default: () => [
+                h('p', 'Popover body'),
+                h(PopoverClose, null, { default: () => 'Close' }),
+              ],
+            }),
+          ],
+        },
+      );
+    },
+  });
+
+  return track(mount(Wrapper, { attachTo: document.body }));
+}
+
+describe('Popover', () => {
+  it('renders trigger', () => {
+    const wrapper = mountPopover();
+    const trigger = wrapper.find('button');
+    expect(trigger.text()).toBe('Toggle');
+    expect(trigger.attributes('aria-haspopup')).toBe('dialog');
+    expect(trigger.attributes('data-state')).toBe('closed');
+  });
+
+  it('opens on trigger click', async () => {
+    const wrapper = mountPopover();
+    const trigger = wrapper.find('button');
+
+    await trigger.trigger('click');
+    await nextTick();
+
+    expect(trigger.attributes('aria-expanded')).toBe('true');
+    expect(trigger.attributes('data-state')).toBe('open');
+  });
+
+  it('toggles with v-model:open', async () => {
+    const onUpdate = vi.fn();
+    const wrapper = mountPopover({ onUpdateOpen: onUpdate });
+    const trigger = wrapper.find('button');
+
+    await trigger.trigger('click');
+    await nextTick();
+
+    expect(onUpdate).toHaveBeenCalledWith(true);
+  });
+
+  it('opens with defaultOpen', async () => {
+    const wrapper = mountPopover({ defaultOpen: true });
+    await nextTick();
+
+    const trigger = wrapper.find('button');
+    expect(trigger.attributes('data-state')).toBe('open');
+  });
+
+  it('close button closes the popover', async () => {
+    const onUpdate = vi.fn();
+    const wrapper = mountPopover({ defaultOpen: true, onUpdateOpen: onUpdate });
+    await nextTick();
+
+    const closeBtn = wrapper.findAll('button').find(b => b.text() === 'Close');
+    expect(closeBtn).toBeDefined();
+
+    await closeBtn!.trigger('click');
+    await nextTick();
+
+    expect(onUpdate).toHaveBeenCalledWith(false);
+  });
+
+  it('content has role="dialog"', async () => {
+    const wrapper = mountPopover({ defaultOpen: true });
+    await nextTick();
+
+    const content = wrapper.find('[role="dialog"]');
+    expect(content.exists()).toBe(true);
+    expect(content.attributes('data-state')).toBe('open');
+  });
+
+  it('closes on Escape key', async () => {
+    const onUpdate = vi.fn();
+    mountPopover({ defaultOpen: true, onUpdateOpen: onUpdate });
+    await nextTick();
+
+    await userEvent.keyboard('{Escape}');
+    await nextTick();
+
+    expect(onUpdate).toHaveBeenCalledWith(false);
+  });
+
+  it('supports controlled open', async () => {
+    const Wrapper = defineComponent({
+      setup() {
+        const open = ref(false);
+        return () => h(
+          PopoverRoot,
+          { open: open.value, 'onUpdate:open': (v: boolean) => { open.value = v; } },
+          {
+            default: () => [
+              h(PopoverTrigger, null, { default: () => 'Toggle' }),
+              h(PopoverContent, { forceMount: true }, { default: () => 'Body' }),
+            ],
+          },
+        );
+      },
+    });
+
+    const wrapper = track(mount(Wrapper, { attachTo: document.body }));
+    await nextTick();
+
+    expect(wrapper.find('button').attributes('data-state')).toBe('closed');
+
+    await wrapper.find('button').trigger('click');
+    await nextTick();
+
+    expect(wrapper.find('button').attributes('data-state')).toBe('open');
+  });
+
+  it('trigger has aria-controls pointing to content id', async () => {
+    const wrapper = mountPopover({ defaultOpen: true });
+    await nextTick();
+
+    const trigger = wrapper.find('button');
+    const contentId = wrapper.find('[role="dialog"]').attributes('id');
+    expect(trigger.attributes('aria-controls')).toBe(contentId);
+  });
+});
diff --git a/vue/primitives/src/popover/__test__/__screenshots__/Popover.test.ts/Popover-closes-on-Escape-key-1.png b/vue/primitives/src/popover/__test__/__screenshots__/Popover.test.ts/Popover-closes-on-Escape-key-1.png
new file mode 100644
index 0000000..d1c5f08
Binary files /dev/null and b/vue/primitives/src/popover/__test__/__screenshots__/Popover.test.ts/Popover-closes-on-Escape-key-1.png differ
diff --git a/vue/primitives/src/popover/context.ts b/vue/primitives/src/popover/context.ts
new file mode 100644
index 0000000..a0fd270
--- /dev/null
+++ b/vue/primitives/src/popover/context.ts
@@ -0,0 +1,18 @@
+import type { ComputedRef, Ref } from 'vue';
+import { useContextFactory } from '@robonen/vue';
+
+export interface PopoverContext {
+  open: Ref<boolean>;
+  modal: Ref<boolean>;
+  triggerId: ComputedRef<string>;
+  contentId: ComputedRef<string>;
+  triggerElement: Ref<HTMLElement | undefined>;
+  hasCustomAnchor: Ref<boolean>;
+  onOpenChange: (value: boolean) => void;
+  onOpenToggle: () => void;
+}
+
+const ctx = useContextFactory<PopoverContext>('PopoverContext');
+
+export const providePopoverContext = ctx.provide;
+export const usePopoverContext = ctx.inject;
diff --git a/vue/primitives/src/popover/index.ts b/vue/primitives/src/popover/index.ts
new file mode 100644
index 0000000..2c870cf
--- /dev/null
+++ b/vue/primitives/src/popover/index.ts
@@ -0,0 +1,18 @@
+export { default as PopoverRoot } from './PopoverRoot.vue';
+export { default as PopoverTrigger } from './PopoverTrigger.vue';
+export { default as PopoverAnchor } from './PopoverAnchor.vue';
+export { default as PopoverContent } from './PopoverContent.vue';
+export { default as PopoverPortal } from './PopoverPortal.vue';
+export { default as PopoverArrow } from './PopoverArrow.vue';
+export { default as PopoverClose } from './PopoverClose.vue';
+
+export { usePopoverContext } from './context';
+
+export type { PopoverContext } from './context';
+export type { PopoverRootProps } from './PopoverRoot.vue';
+export type { PopoverTriggerProps } from './PopoverTrigger.vue';
+export type { PopoverAnchorProps } from './PopoverAnchor.vue';
+export type { PopoverContentEmits, PopoverContentProps } from './PopoverContent.vue';
+export type { PopoverPortalProps } from './PopoverPortal.vue';
+export type { PopoverArrowProps } from './PopoverArrow.vue';
+export type { PopoverCloseProps } from './PopoverClose.vue';
diff --git a/vue/primitives/src/popper/PopperAnchor.vue b/vue/primitives/src/popper/PopperAnchor.vue
new file mode 100644
index 0000000..18ca7d2
--- /dev/null
+++ b/vue/primitives/src/popper/PopperAnchor.vue
@@ -0,0 +1,31 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+import type { ReferenceElement } from '@floating-ui/vue';
+
+export interface PopperAnchorProps extends PrimitiveProps {
+  /** Custom reference element for positioning. If not provided, uses the rendered element. */
+  reference?: ReferenceElement;
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { usePopperRootContext } from './context';
+import { watchPostEffect } from 'vue';
+
+const props = defineProps<PopperAnchorProps>();
+
+const { forwardRef, currentElement } = useForwardExpose();
+const rootContext = usePopperRootContext();
+
+watchPostEffect(() => {
+  rootContext.onAnchorChange(props.reference ?? currentElement.value);
+});
+</script>
+
+<template>
+  <Primitive :ref="forwardRef" :as="as">
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/popper/PopperArrow.vue b/vue/primitives/src/popper/PopperArrow.vue
new file mode 100644
index 0000000..8fb2a49
--- /dev/null
+++ b/vue/primitives/src/popper/PopperArrow.vue
@@ -0,0 +1,76 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+import type { Side } from './utils';
+
+const OPPOSITE_SIDE: Record<Side, Side> = {
+  top: 'bottom',
+  right: 'left',
+  bottom: 'top',
+  left: 'right',
+};
+
+// Hoisted to module scope — one allocation per module load instead of one per
+// render. Values are primitive strings, so objects are frozen-in-practice.
+const TRANSFORM_ORIGIN: Record<Side, string> = {
+  top: '',
+  right: '0 0',
+  bottom: 'center 0',
+  left: '100% 0',
+};
+
+const TRANSFORM: Record<Side, string> = {
+  top: 'translateY(100%)',
+  right: 'translateY(50%) rotate(90deg) translateX(-50%)',
+  bottom: 'rotate(180deg)',
+  left: 'translateY(50%) rotate(-90deg) translateX(50%)',
+};
+
+export interface PopperArrowProps extends PrimitiveProps {
+  /** Arrow width in pixels. @default 10 */
+  width?: number;
+  /** Arrow height in pixels. @default 5 */
+  height?: number;
+}
+</script>
+
+<script setup lang="ts">
+import type { ComponentPublicInstance } from 'vue';
+import { Primitive } from '../primitive';
+import { computed } from 'vue';
+import { useForwardExpose } from '@robonen/vue';
+import { usePopperContentContext } from './context';
+
+const { as = 'span', width = 10, height = 5 } = defineProps<PopperArrowProps>();
+
+const { forwardRef } = useForwardExpose();
+const contentContext = usePopperContentContext();
+const baseSide = computed(() => OPPOSITE_SIDE[contentContext.placedSide.value]);
+</script>
+
+<template>
+  <span
+    :ref="(el: Element | ComponentPublicInstance | null) => {
+      contentContext.onArrowChange((el as HTMLElement) ?? undefined);
+      return undefined;
+    }"
+    :style="{
+      position: 'absolute',
+      left: contentContext.arrowX.value ? `${contentContext.arrowX.value}px` : undefined,
+      top: contentContext.arrowY.value ? `${contentContext.arrowY.value}px` : undefined,
+      [baseSide]: 0,
+      transformOrigin: TRANSFORM_ORIGIN[contentContext.placedSide.value],
+      transform: TRANSFORM[contentContext.placedSide.value],
+      visibility: contentContext.shouldHideArrow.value ? 'hidden' : undefined,
+    }"
+  >
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      :style="{ display: 'block' }"
+      :width="width"
+      :height="height"
+    >
+      <slot />
+    </Primitive>
+  </span>
+</template>
diff --git a/vue/primitives/src/popper/PopperContent.vue b/vue/primitives/src/popper/PopperContent.vue
new file mode 100644
index 0000000..62695f9
--- /dev/null
+++ b/vue/primitives/src/popper/PopperContent.vue
@@ -0,0 +1,280 @@
+<script lang="ts">
+import type { Align, Side } from './utils';
+import type { Middleware, Placement, ReferenceElement } from '@floating-ui/vue';
+import type { PrimitiveProps } from '../primitive';
+
+export interface PopperContentProps extends PrimitiveProps {
+  /** Preferred side of the anchor. @default 'bottom' */
+  side?: Side;
+  /** Distance in pixels from the anchor. @default 0 */
+  sideOffset?: number;
+  /** Flip to the opposite side on collision. @default true */
+  sideFlip?: boolean;
+  /** Preferred alignment against the anchor. @default 'center' */
+  align?: Align;
+  /** Offset in pixels from the alignment edge. @default 0 */
+  alignOffset?: number;
+  /** Flip alignment on collision. @default true */
+  alignFlip?: boolean;
+  /** Reposition to prevent boundary overflow. @default true */
+  avoidCollisions?: boolean;
+  /** Collision boundary element(s). @default [] */
+  collisionBoundary?: Array<Element | null> | Element | null;
+  /** Distance from boundary for collision detection. @default 0 */
+  collisionPadding?: number | Partial<Record<Side, number>>;
+  /** Padding between arrow and content edges. @default 0 */
+  arrowPadding?: number;
+  /** Hide arrow when it can't be centered. @default true */
+  hideShiftedArrow?: boolean;
+  /** Sticky behavior on the align axis. @default 'partial' */
+  sticky?: 'always' | 'partial';
+  /** Hide when anchor is fully occluded. @default false */
+  hideWhenDetached?: boolean;
+  /** CSS position strategy. @default 'fixed' */
+  positionStrategy?: 'absolute' | 'fixed';
+  /** Position update strategy. @default 'optimized' */
+  updatePositionStrategy?: 'always' | 'optimized';
+  /** Disable layout-shift-based position update. @default false */
+  disableUpdateOnLayoutShift?: boolean;
+  /** Force content to stay within the viewport. @default false */
+  prioritizePosition?: boolean;
+  /** Custom reference element, overrides the anchor. */
+  reference?: ReferenceElement;
+}
+
+export interface PopperContentEmits {
+  placed: [];
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import {
+  autoUpdate,
+  flip,
+  arrow as floatingUIArrow,
+  hide,
+  limitShift,
+  offset,
+  shift,
+  size,
+  useFloating,
+} from '@floating-ui/vue';
+import { computed, onBeforeUnmount, ref, shallowRef, useTemplateRef, watchEffect, watchPostEffect } from 'vue';
+import { getSideAndAlignFromPlacement, isNotNull, transformOrigin } from './utils';
+import { providePopperContentContext, usePopperRootContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+defineOptions({ inheritAttrs: false });
+
+const {
+  side = 'bottom',
+  sideOffset = 0,
+  sideFlip = true,
+  align = 'center',
+  alignOffset = 0,
+  alignFlip = true,
+  avoidCollisions = true,
+  collisionBoundary = [],
+  collisionPadding: collisionPaddingProp = 0,
+  arrowPadding = 0,
+  hideShiftedArrow = true,
+  sticky = 'partial',
+  hideWhenDetached = false,
+  positionStrategy = 'fixed',
+  updatePositionStrategy = 'optimized',
+  disableUpdateOnLayoutShift = false,
+  prioritizePosition = false,
+  reference: referenceProp,
+  as,
+} = defineProps<PopperContentProps>();
+
+const emit = defineEmits<PopperContentEmits>();
+
+const rootContext = usePopperRootContext();
+const { forwardRef, currentElement: contentElement } = useForwardExpose();
+
+const floatingRef = useTemplateRef<HTMLElement>('floatingRef');
+const arrow = ref<HTMLElement>();
+
+// Arrow size tracking via ResizeObserver (replaces useSize)
+const arrowWidth = ref(0);
+const arrowHeight = ref(0);
+let arrowObserver: ResizeObserver | null = null;
+
+watchEffect((onCleanup) => {
+  arrowObserver?.disconnect();
+  arrowObserver = null;
+
+  const el = arrow.value;
+  if (!el) return;
+
+  arrowObserver = new ResizeObserver(([entry]) => {
+    if (entry) {
+      const borderBox = entry.borderBoxSize[0];
+      if (borderBox) {
+        arrowWidth.value = borderBox.inlineSize;
+        arrowHeight.value = borderBox.blockSize;
+      }
+      else {
+        const rect = el.getBoundingClientRect();
+        arrowWidth.value = rect.width;
+        arrowHeight.value = rect.height;
+      }
+    }
+  });
+  arrowObserver.observe(el);
+
+  onCleanup(() => {
+    arrowObserver?.disconnect();
+  });
+});
+
+onBeforeUnmount(() => {
+  arrowObserver?.disconnect();
+});
+
+const desiredPlacement = computed<Placement>(
+  () => (side + (align !== 'center' ? `-${align}` : '')) as Placement,
+);
+
+const collisionPadding = computed(() => {
+  return typeof collisionPaddingProp === 'number'
+    ? collisionPaddingProp
+    : { top: 0, right: 0, bottom: 0, left: 0, ...collisionPaddingProp };
+});
+
+const boundary = computed(() => {
+  return Array.isArray(collisionBoundary)
+    ? collisionBoundary
+    : [collisionBoundary];
+});
+
+const detectOverflowOptions = computed(() => ({
+  padding: collisionPadding.value,
+  boundary: boundary.value.filter(isNotNull),
+  altBoundary: boundary.value.length > 0,
+}));
+
+const flipOptions = computed(() => ({
+  mainAxis: sideFlip,
+  crossAxis: alignFlip,
+}));
+
+const computedMiddleware = computed<Middleware[]>(() => [
+  offset({
+    mainAxis: sideOffset + arrowHeight.value,
+    alignmentAxis: alignOffset,
+  }),
+  prioritizePosition
+  && avoidCollisions
+  && flip({ ...detectOverflowOptions.value, ...flipOptions.value }),
+  avoidCollisions
+  && shift({
+    mainAxis: true,
+    crossAxis: !!prioritizePosition,
+    limiter: sticky === 'partial' ? limitShift() : undefined,
+    ...detectOverflowOptions.value,
+  }),
+  !prioritizePosition
+  && avoidCollisions
+  && flip({ ...detectOverflowOptions.value, ...flipOptions.value }),
+  size({
+    ...detectOverflowOptions.value,
+    apply: ({ elements, rects, availableWidth, availableHeight }) => {
+      const { width: anchorWidth, height: anchorHeight } = rects.reference;
+      const contentStyle = elements.floating.style;
+      contentStyle.setProperty('--popper-available-width', `${availableWidth}px`);
+      contentStyle.setProperty('--popper-available-height', `${availableHeight}px`);
+      contentStyle.setProperty('--popper-anchor-width', `${anchorWidth}px`);
+      contentStyle.setProperty('--popper-anchor-height', `${anchorHeight}px`);
+    },
+  }),
+  arrow.value && floatingUIArrow({ element: arrow.value, padding: arrowPadding }),
+  transformOrigin({ arrowWidth: arrowWidth.value, arrowHeight: arrowHeight.value }),
+  hideWhenDetached && hide({ strategy: 'referenceHidden', ...detectOverflowOptions.value }),
+] as Middleware[]);
+
+const reference = computed(() => referenceProp ?? rootContext.anchor.value);
+
+const { floatingStyles, placement, isPositioned, middlewareData } = useFloating(
+  reference,
+  floatingRef,
+  {
+    strategy: positionStrategy,
+    placement: desiredPlacement,
+    whileElementsMounted: (...args) => {
+      return autoUpdate(...args, {
+        layoutShift: !disableUpdateOnLayoutShift,
+        animationFrame: updatePositionStrategy === 'always',
+      });
+    },
+    middleware: computedMiddleware,
+  },
+);
+
+const placedSide = computed(() => getSideAndAlignFromPlacement(placement.value)[0]);
+const placedAlign = computed(() => getSideAndAlignFromPlacement(placement.value)[1]);
+
+watchPostEffect(() => {
+  if (isPositioned.value) emit('placed');
+});
+
+const shouldHideArrow = computed(() => {
+  const cannotCenterArrow = middlewareData.value.arrow?.centerOffset !== 0;
+  return hideShiftedArrow && cannotCenterArrow;
+});
+
+const contentZIndex = shallowRef('');
+watchEffect(() => {
+  if (contentElement.value) {
+    contentZIndex.value = globalThis.getComputedStyle(contentElement.value).zIndex;
+  }
+});
+
+const arrowX = computed(() => middlewareData.value.arrow?.x ?? 0);
+const arrowY = computed(() => middlewareData.value.arrow?.y ?? 0);
+
+providePopperContentContext({
+  placedSide,
+  onArrowChange: (element: HTMLElement | undefined) => { arrow.value = element; },
+  arrowX,
+  arrowY,
+  shouldHideArrow,
+});
+</script>
+
+<template>
+  <div
+    ref="floatingRef"
+    data-popper-content-wrapper=""
+    :style="{
+      ...floatingStyles,
+      transform: isPositioned ? floatingStyles.transform : 'translate(0, -200%)',
+      minWidth: 'max-content',
+      zIndex: contentZIndex,
+      ['--popper-transform-origin' as any]: [
+        middlewareData.transformOrigin?.x,
+        middlewareData.transformOrigin?.y,
+      ].join(' '),
+      // Always set both keys so V8 keeps a single hidden class for the style
+      // object across renders, instead of allocating a new shape when the
+      // conditional spread kicks in.
+      visibility: middlewareData.hide?.referenceHidden ? ('hidden' as const) : undefined,
+      pointerEvents: middlewareData.hide?.referenceHidden ? ('none' as const) : undefined,
+    }"
+  >
+    <Primitive
+      :ref="forwardRef"
+      v-bind="$attrs"
+      :as="as"
+      :data-side="placedSide"
+      :data-align="placedAlign"
+      :style="{
+        animation: isPositioned ? undefined : 'none',
+      }"
+    >
+      <slot />
+    </Primitive>
+  </div>
+</template>
diff --git a/vue/primitives/src/popper/PopperRoot.vue b/vue/primitives/src/popper/PopperRoot.vue
new file mode 100644
index 0000000..174a148
--- /dev/null
+++ b/vue/primitives/src/popper/PopperRoot.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { ReferenceElement } from '@floating-ui/vue';
+import { providePopperRootContext } from './context';
+import { ref } from 'vue';
+
+defineOptions({ inheritAttrs: false });
+
+const anchor = ref<ReferenceElement>();
+
+providePopperRootContext({
+  anchor,
+  onAnchorChange: (element: ReferenceElement | undefined) => { anchor.value = element; },
+});
+</script>
+
+<template>
+  <slot />
+</template>
diff --git a/vue/primitives/src/popper/__test__/Popper.test.ts b/vue/primitives/src/popper/__test__/Popper.test.ts
new file mode 100644
index 0000000..5d43a0c
--- /dev/null
+++ b/vue/primitives/src/popper/__test__/Popper.test.ts
@@ -0,0 +1,108 @@
+import {
+  PopperAnchor,
+  PopperContent,
+  PopperRoot,
+} from '../index';
+import { afterEach, describe, expect, it } from 'vitest';
+import { defineComponent, h, nextTick } from 'vue';
+import type { VueWrapper } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+
+const wrappers: Array<VueWrapper<any>> = [];
+
+afterEach(() => {
+  while (wrappers.length) wrappers.pop()!.unmount();
+  document.body.innerHTML = '';
+});
+
+function track<T extends VueWrapper<any>>(w: T): T {
+  wrappers.push(w);
+  return w;
+}
+
+describe('Popper', () => {
+  it('renders root with anchor and content', async () => {
+    const Wrapper = defineComponent({
+      setup() {
+        return () => h(PopperRoot, null, {
+          default: () => [
+            h(PopperAnchor, { as: 'button' }, { default: () => 'Anchor' }),
+            h(PopperContent, { as: 'div' }, { default: () => 'Content' }),
+          ],
+        });
+      },
+    });
+
+    const wrapper = track(mount(Wrapper, { attachTo: document.body }));
+    await nextTick();
+
+    expect(wrapper.find('button').text()).toBe('Anchor');
+    expect(wrapper.find('[data-popper-content-wrapper]').exists()).toBe(true);
+  });
+
+  it('positions content with default placement (bottom)', async () => {
+    const Wrapper = defineComponent({
+      setup() {
+        return () => h(PopperRoot, null, {
+          default: () => [
+            h(PopperAnchor, { as: 'button' }, { default: () => 'Anchor' }),
+            h(PopperContent, null, { default: () => 'Content' }),
+          ],
+        });
+      },
+    });
+
+    const wrapper = track(mount(Wrapper, { attachTo: document.body }));
+    await nextTick();
+    await nextTick();
+
+    const content = wrapper.find('[data-side]');
+    expect(content.exists()).toBe(true);
+  });
+
+  it('exposes data-side and data-align attributes', async () => {
+    const Wrapper = defineComponent({
+      setup() {
+        return () => h(PopperRoot, null, {
+          default: () => [
+            h(PopperAnchor, { as: 'button' }, { default: () => 'Anchor' }),
+            h(PopperContent, { side: 'top', align: 'start' }, { default: () => 'Content' }),
+          ],
+        });
+      },
+    });
+
+    const wrapper = track(mount(Wrapper, { attachTo: document.body }));
+    await nextTick();
+    await nextTick();
+
+    const content = wrapper.find('[data-side]');
+    expect(content.exists()).toBe(true);
+  });
+
+  it('passes custom reference to anchor', async () => {
+    const customRef = {
+      getBoundingClientRect: () => ({
+        x: 100, y: 100, width: 50, height: 50,
+        top: 100, right: 150, bottom: 150, left: 100,
+        toJSON: () => {},
+      }),
+    };
+
+    const Wrapper = defineComponent({
+      setup() {
+        return () => h(PopperRoot, null, {
+          default: () => [
+            h(PopperAnchor, { reference: customRef }, { default: () => 'Anchor' }),
+            h(PopperContent, null, { default: () => 'Content' }),
+          ],
+        });
+      },
+    });
+
+    const wrapper = track(mount(Wrapper, { attachTo: document.body }));
+    await nextTick();
+
+    expect(wrapper.find('[data-popper-content-wrapper]').exists()).toBe(true);
+  });
+});
diff --git a/vue/primitives/src/popper/context.ts b/vue/primitives/src/popper/context.ts
new file mode 100644
index 0000000..57ee494
--- /dev/null
+++ b/vue/primitives/src/popper/context.ts
@@ -0,0 +1,25 @@
+import type { Ref } from 'vue';
+import type { ReferenceElement } from '@floating-ui/vue';
+import type { Side } from './utils';
+import { useContextFactory } from '@robonen/vue';
+
+export interface PopperRootContext {
+  anchor: Ref<ReferenceElement | undefined>;
+  onAnchorChange: (element: ReferenceElement | undefined) => void;
+}
+
+export interface PopperContentContext {
+  placedSide: Ref<Side>;
+  onArrowChange: (arrow: HTMLElement | undefined) => void;
+  arrowX: Ref<number>;
+  arrowY: Ref<number>;
+  shouldHideArrow: Ref<boolean>;
+}
+
+const rootCtx = useContextFactory<PopperRootContext>('PopperRootContext');
+export const providePopperRootContext = rootCtx.provide;
+export const usePopperRootContext = rootCtx.inject;
+
+const contentCtx = useContextFactory<PopperContentContext>('PopperContentContext');
+export const providePopperContentContext = contentCtx.provide;
+export const usePopperContentContext = contentCtx.inject;
diff --git a/vue/primitives/src/popper/index.ts b/vue/primitives/src/popper/index.ts
new file mode 100644
index 0000000..c49ffca
--- /dev/null
+++ b/vue/primitives/src/popper/index.ts
@@ -0,0 +1,12 @@
+export { default as PopperRoot } from './PopperRoot.vue';
+export { default as PopperAnchor } from './PopperAnchor.vue';
+export { default as PopperContent } from './PopperContent.vue';
+export { default as PopperArrow } from './PopperArrow.vue';
+
+export { usePopperRootContext, usePopperContentContext } from './context';
+
+export type { PopperRootContext, PopperContentContext } from './context';
+export type { PopperAnchorProps } from './PopperAnchor.vue';
+export type { PopperContentEmits, PopperContentProps } from './PopperContent.vue';
+export type { PopperArrowProps } from './PopperArrow.vue';
+export type { Align, Side } from './utils';
diff --git a/vue/primitives/src/popper/utils.ts b/vue/primitives/src/popper/utils.ts
new file mode 100644
index 0000000..3d1baa1
--- /dev/null
+++ b/vue/primitives/src/popper/utils.ts
@@ -0,0 +1,59 @@
+import type { Middleware, Placement } from '@floating-ui/vue';
+
+export type Side = 'bottom' | 'left' | 'right' | 'top';
+export type Align = 'center' | 'end' | 'start';
+
+export function isNotNull<T>(value: T | null): value is T {
+  return value !== null;
+}
+
+export function getSideAndAlignFromPlacement(placement: Placement) {
+  const [side, align = 'center'] = placement.split('-');
+  return [side as Side, align as Align] as const;
+}
+
+export function transformOrigin(options: {
+  arrowWidth: number;
+  arrowHeight: number;
+}): Middleware {
+  return {
+    name: 'transformOrigin',
+    options,
+    fn(data) {
+      const { placement, rects, middlewareData } = data;
+
+      const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
+      const isArrowHidden = cannotCenterArrow;
+      const arrowWidth = isArrowHidden ? 0 : options.arrowWidth;
+      const arrowHeight = isArrowHidden ? 0 : options.arrowHeight;
+
+      const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
+      const noArrowAlign = { start: '0%', center: '50%', end: '100%' }[placedAlign];
+
+      const arrowXCenter = (middlewareData.arrow?.x ?? 0) + arrowWidth / 2;
+      const arrowYCenter = (middlewareData.arrow?.y ?? 0) + arrowHeight / 2;
+
+      let x = '';
+      let y = '';
+
+      if (placedSide === 'bottom') {
+        x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
+        y = `${-arrowHeight}px`;
+      }
+      else if (placedSide === 'top') {
+        x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
+        y = `${rects.floating.height + arrowHeight}px`;
+      }
+      else if (placedSide === 'right') {
+        x = `${-arrowHeight}px`;
+        y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
+      }
+      else if (placedSide === 'left') {
+        x = `${rects.floating.width + arrowHeight}px`;
+        y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
+      }
+
+      return { data: { x, y } };
+    },
+  };
+}
diff --git a/vue/primitives/src/presence/Presence.vue b/vue/primitives/src/presence/Presence.vue
new file mode 100644
index 0000000..9ff0fd4
--- /dev/null
+++ b/vue/primitives/src/presence/Presence.vue
@@ -0,0 +1,34 @@
+<script lang="ts">
+export interface PresenceProps {
+  present: boolean;
+  forceMount?: boolean;
+}
+
+export default {
+  inheritAttrs: false,
+};
+</script>
+
+<script setup lang="ts">
+import { Slot } from '../primitive/Slot';
+import { usePresence } from './usePresence';
+
+const {
+  present,
+  forceMount = false,
+} = defineProps<PresenceProps>();
+
+defineSlots<{
+  default?: (props: { present: boolean }) => any;
+}>();
+
+const { isPresent, setRef } = usePresence(() => present);
+
+defineExpose({ present: isPresent });
+</script>
+
+<template>
+  <Slot v-if="forceMount || isPresent" :ref="setRef" v-bind="$attrs">
+    <slot :present="isPresent" />
+  </Slot>
+</template>
diff --git a/vue/primitives/src/presence/__test__/Presence.test.ts b/vue/primitives/src/presence/__test__/Presence.test.ts
new file mode 100644
index 0000000..9d44a47
--- /dev/null
+++ b/vue/primitives/src/presence/__test__/Presence.test.ts
@@ -0,0 +1,417 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import type { Ref } from 'vue';
+import { defineComponent, h, nextTick, ref } from 'vue';
+import { mount } from '@vue/test-utils';
+import { usePresence } from '../usePresence';
+import Presence from '../Presence.vue';
+import {
+  dispatchAnimationEvent,
+  getAnimationName,
+  onAnimationSettle,
+  shouldSuspendUnmount,
+} from '@robonen/platform/browsers';
+
+vi.mock('@robonen/platform/browsers', () => ({
+  getAnimationName: vi.fn(() => 'none'),
+  shouldSuspendUnmount: vi.fn(() => false),
+  dispatchAnimationEvent: vi.fn((el, name) => {
+    el?.dispatchEvent(new CustomEvent(name, { bubbles: false, cancelable: false }));
+  }),
+  onAnimationSettle: vi.fn(() => vi.fn()),
+}));
+
+const mockGetAnimationName = vi.mocked(getAnimationName);
+const mockShouldSuspend = vi.mocked(shouldSuspendUnmount);
+const mockDispatchEvent = vi.mocked(dispatchAnimationEvent);
+const mockOnSettle = vi.mocked(onAnimationSettle);
+
+function mountUsePresence(initial: boolean) {
+  const present = ref(initial);
+
+  const wrapper = mount(defineComponent({
+    setup() {
+      const { isPresent } = usePresence(present);
+      return { isPresent };
+    },
+    render() {
+      return h('div', this.isPresent ? 'visible' : 'hidden');
+    },
+  }));
+
+  return { wrapper, present };
+}
+
+function mountPresenceWithAnimation(present: Ref<boolean>) {
+  return mount(defineComponent({
+    setup() {
+      const { isPresent, setRef } = usePresence(present);
+      return { isPresent, setRef };
+    },
+    render() {
+      if (!this.isPresent) return h('div', 'hidden');
+
+      return h('div', {
+        ref: (el: any) => this.setRef(el),
+      }, 'visible');
+    },
+  }));
+}
+
+function findDispatchCall(name: string) {
+  return mockDispatchEvent.mock.calls.find(([, n]) => n === name);
+}
+
+describe('usePresence', () => {
+  it('returns isPresent=true when present is true', () => {
+    const { wrapper } = mountUsePresence(true);
+    expect(wrapper.text()).toBe('visible');
+    wrapper.unmount();
+  });
+
+  it('returns isPresent=false when present is false', () => {
+    const { wrapper } = mountUsePresence(false);
+    expect(wrapper.text()).toBe('hidden');
+    wrapper.unmount();
+  });
+
+  it('transitions to unmounted immediately when no animation', async () => {
+    const { wrapper, present } = mountUsePresence(true);
+    expect(wrapper.text()).toBe('visible');
+
+    present.value = false;
+    await nextTick();
+
+    expect(wrapper.text()).toBe('hidden');
+    wrapper.unmount();
+  });
+
+  it('transitions to mounted when present becomes true', async () => {
+    const { wrapper, present } = mountUsePresence(false);
+    expect(wrapper.text()).toBe('hidden');
+
+    present.value = true;
+    await nextTick();
+
+    expect(wrapper.text()).toBe('visible');
+    wrapper.unmount();
+  });
+});
+
+describe('Presence', () => {
+  it('renders child when present is true', () => {
+    const wrapper = mount(Presence, {
+      props: { present: true },
+      slots: { default: () => h('div', 'content') },
+    });
+
+    expect(wrapper.html()).toContain('content');
+    expect(wrapper.find('div').exists()).toBe(true);
+    wrapper.unmount();
+  });
+
+  it('does not render child when present is false', () => {
+    const wrapper = mount(Presence, {
+      props: { present: false },
+      slots: { default: () => h('div', 'content') },
+    });
+
+    expect(wrapper.html()).not.toContain('content');
+    wrapper.unmount();
+  });
+
+  it('removes child when present becomes false (no animation)', async () => {
+    const present = ref(true);
+
+    const wrapper = mount(defineComponent({
+      setup() {
+        return () => h(Presence, { present: present.value }, {
+          default: () => h('span', 'hello'),
+        });
+      },
+    }));
+
+    expect(wrapper.find('span').exists()).toBe(true);
+
+    present.value = false;
+    await nextTick();
+
+    expect(wrapper.find('span').exists()).toBe(false);
+    wrapper.unmount();
+  });
+
+  it('adds child when present becomes true', async () => {
+    const present = ref(false);
+
+    const wrapper = mount(defineComponent({
+      setup() {
+        return () => h(Presence, { present: present.value }, {
+          default: () => h('span', 'hello'),
+        });
+      },
+    }));
+
+    expect(wrapper.find('span').exists()).toBe(false);
+
+    present.value = true;
+    await nextTick();
+
+    expect(wrapper.find('span').exists()).toBe(true);
+    wrapper.unmount();
+  });
+
+  it('always renders child when forceMount is true', () => {
+    const wrapper = mount(Presence, {
+      props: { present: false, forceMount: true },
+      slots: { default: () => h('span', 'always') },
+    });
+
+    expect(wrapper.find('span').exists()).toBe(true);
+    expect(wrapper.find('span').text()).toBe('always');
+    wrapper.unmount();
+  });
+
+  it('exposes present state via scoped slot', () => {
+    let slotPresent: boolean | undefined;
+
+    const wrapper = mount(Presence, {
+      props: { present: true },
+      slots: {
+        default: (props: { present: boolean }) => {
+          slotPresent = props.present;
+          return h('div', 'content');
+        },
+      },
+    });
+
+    expect(slotPresent).toBe(true);
+    wrapper.unmount();
+  });
+
+  it('exposes present=false via scoped slot when forceMount and not present', () => {
+    let slotPresent: boolean | undefined;
+
+    const wrapper = mount(Presence, {
+      props: { present: false, forceMount: true },
+      slots: {
+        default: (props: { present: boolean }) => {
+          slotPresent = props.present;
+          return h('div', 'content');
+        },
+      },
+    });
+
+    expect(slotPresent).toBe(false);
+    wrapper.unmount();
+  });
+
+  it('forwards attrs to slot child', () => {
+    const wrapper = mount(Presence, {
+      props: { present: true },
+      attrs: { class: 'fade', 'data-testid': 'box' },
+      slots: { default: () => h('div', 'content') },
+    });
+
+    const div = wrapper.find('div');
+    expect(div.classes()).toContain('fade');
+    expect(div.attributes('data-testid')).toBe('box');
+    wrapper.unmount();
+  });
+
+  it('forwards style to slot child', () => {
+    const wrapper = mount(Presence, {
+      props: { present: true },
+      attrs: { style: 'color: red' },
+      slots: { default: () => h('div', 'content') },
+    });
+
+    expect(wrapper.find('div').attributes('style')).toContain('color: red');
+    wrapper.unmount();
+  });
+
+  it('merges attrs when child already has attrs', () => {
+    const wrapper = mount(Presence, {
+      props: { present: true },
+      attrs: { class: 'outer' },
+      slots: { default: () => h('div', { class: 'inner' }, 'content') },
+    });
+
+    const div = wrapper.find('div');
+    expect(div.classes()).toContain('outer');
+    expect(div.classes()).toContain('inner');
+    wrapper.unmount();
+  });
+
+  it('does not render attrs when not present', () => {
+    const wrapper = mount(Presence, {
+      props: { present: false },
+      attrs: { class: 'fade' },
+      slots: { default: () => h('div', 'content') },
+    });
+
+    expect(wrapper.find('div').exists()).toBe(false);
+    wrapper.unmount();
+  });
+
+  it('forwards attrs with forceMount', () => {
+    const wrapper = mount(Presence, {
+      props: { present: false, forceMount: true },
+      attrs: { class: 'fade', 'data-testid': 'forced' },
+      slots: { default: () => h('div', 'content') },
+    });
+
+    const div = wrapper.find('div');
+    expect(div.classes()).toContain('fade');
+    expect(div.attributes('data-testid')).toBe('forced');
+    wrapper.unmount();
+  });
+});
+
+describe('usePresence (animation)', () => {
+  beforeEach(() => {
+    mockGetAnimationName.mockReturnValue('none');
+    mockShouldSuspend.mockReturnValue(false);
+    mockOnSettle.mockImplementation(() => vi.fn());
+    mockDispatchEvent.mockClear();
+  });
+
+  it('dispatches enter and after-enter when present becomes true (no animation)', async () => {
+    const present = ref(false);
+    const wrapper = mountPresenceWithAnimation(present);
+    mockDispatchEvent.mockClear();
+
+    present.value = true;
+    await nextTick();
+
+    expect(findDispatchCall('enter')).toBeTruthy();
+    expect(findDispatchCall('after-enter')).toBeTruthy();
+    wrapper.unmount();
+  });
+
+  it('dispatches leave and after-leave when no animation on leave', async () => {
+    const present = ref(true);
+    const wrapper = mountPresenceWithAnimation(present);
+    await nextTick();
+    mockDispatchEvent.mockClear();
+
+    present.value = false;
+    await nextTick();
+
+    expect(findDispatchCall('leave')).toBeTruthy();
+    expect(findDispatchCall('after-leave')).toBeTruthy();
+    expect(wrapper.text()).toBe('hidden');
+    wrapper.unmount();
+  });
+
+  it('suspends unmount when shouldSuspendUnmount returns true', async () => {
+    mockShouldSuspend.mockReturnValue(true);
+
+    const present = ref(true);
+    const wrapper = mountPresenceWithAnimation(present);
+    await nextTick();
+    mockDispatchEvent.mockClear();
+
+    present.value = false;
+    await nextTick();
+
+    expect(findDispatchCall('leave')).toBeTruthy();
+    expect(findDispatchCall('after-leave')).toBeUndefined();
+    expect(wrapper.text()).toBe('visible');
+    wrapper.unmount();
+  });
+
+  it('dispatches after-leave and unmounts when animation settles', async () => {
+    mockShouldSuspend.mockReturnValue(true);
+
+    let settleCallback: (() => void) | undefined;
+    mockOnSettle.mockImplementation((_el: any, callbacks: any) => {
+      settleCallback = callbacks.onSettle;
+      return vi.fn();
+    });
+
+    const present = ref(true);
+    const wrapper = mountPresenceWithAnimation(present);
+    await nextTick();
+    mockDispatchEvent.mockClear();
+
+    present.value = false;
+    await nextTick();
+    expect(wrapper.text()).toBe('visible');
+
+    settleCallback!();
+    await nextTick();
+
+    expect(findDispatchCall('after-leave')).toBeTruthy();
+    expect(wrapper.text()).toBe('hidden');
+    wrapper.unmount();
+  });
+
+  it('tracks animation name on start via onAnimationSettle', async () => {
+    let startCallback: ((name: string) => void) | undefined;
+    mockOnSettle.mockImplementation((_el: any, callbacks: any) => {
+      startCallback = callbacks.onStart;
+      return vi.fn();
+    });
+
+    const present = ref(true);
+    const wrapper = mountPresenceWithAnimation(present);
+    await nextTick();
+
+    expect(startCallback).toBeDefined();
+    wrapper.unmount();
+  });
+
+  it('calls cleanup returned by onAnimationSettle on unmount', async () => {
+    const cleanupFn = vi.fn();
+    mockOnSettle.mockReturnValue(cleanupFn);
+
+    const present = ref(true);
+    const wrapper = mountPresenceWithAnimation(present);
+    await nextTick();
+    wrapper.unmount();
+  });
+
+  it('setRef connects DOM element for animation tracking', async () => {
+    const present = ref(true);
+    const wrapper = mountPresenceWithAnimation(present);
+    await nextTick();
+
+    expect(wrapper.text()).toBe('visible');
+    expect(mockOnSettle).toHaveBeenCalled();
+    expect(mockOnSettle.mock.calls[0]![0]).toBeInstanceOf(HTMLElement);
+    wrapper.unmount();
+  });
+
+  it('resets isAnimating when node ref becomes undefined', async () => {
+    mockShouldSuspend.mockReturnValue(true);
+
+    mockOnSettle.mockImplementation(() => vi.fn());
+
+    const present = ref(true);
+    const showEl = ref(true);
+
+    const wrapper = mount(defineComponent({
+      setup() {
+        const { isPresent, setRef } = usePresence(present);
+        return { isPresent, setRef, showEl };
+      },
+      render() {
+        if (!showEl.value) {
+          this.setRef(undefined);
+          return h('div', 'no-el');
+        }
+
+        return h('div', {
+          ref: (el: any) => this.setRef(el),
+        }, this.isPresent ? 'visible' : 'hidden');
+      },
+    }));
+
+    await nextTick();
+    expect(wrapper.text()).toBe('visible');
+
+    showEl.value = false;
+    await nextTick();
+    expect(wrapper.text()).toBe('no-el');
+    wrapper.unmount();
+  });
+});
diff --git a/vue/primitives/src/presence/index.ts b/vue/primitives/src/presence/index.ts
new file mode 100644
index 0000000..33a9ee9
--- /dev/null
+++ b/vue/primitives/src/presence/index.ts
@@ -0,0 +1,5 @@
+export { default as Presence } from './Presence.vue';
+export { usePresence } from './usePresence';
+
+export type { PresenceProps } from './Presence.vue';
+export type { UsePresenceReturn } from './usePresence';
diff --git a/vue/primitives/src/presence/usePresence.ts b/vue/primitives/src/presence/usePresence.ts
new file mode 100644
index 0000000..674e132
--- /dev/null
+++ b/vue/primitives/src/presence/usePresence.ts
@@ -0,0 +1,84 @@
+import type { MaybeRefOrGetter, Ref } from 'vue';
+import { computed, readonly, shallowRef, toValue, watch } from 'vue';
+import {
+  dispatchAnimationEvent,
+  getAnimationName,
+  onAnimationSettle,
+  shouldSuspendUnmount,
+} from '@robonen/platform/browsers';
+import { tryOnScopeDispose, unrefElement } from '@robonen/vue';
+import type { MaybeElement } from '@robonen/vue';
+
+export interface UsePresenceReturn {
+  isPresent: Readonly<Ref<boolean>>;
+  setRef: (v: unknown) => void;
+}
+
+export function usePresence(
+  present: MaybeRefOrGetter<boolean>,
+): UsePresenceReturn {
+  const node = shallowRef<HTMLElement>();
+  const isAnimating = shallowRef(false);
+  let prevAnimationName = 'none';
+
+  const isPresent = computed(() => toValue(present) || isAnimating.value);
+
+  watch(isPresent, (current) => {
+    prevAnimationName = current ? getAnimationName(node.value) : 'none';
+  });
+
+  watch(() => toValue(present), (value, oldValue) => {
+    if (value === oldValue) return;
+
+    if (value) {
+      isAnimating.value = false;
+      dispatchAnimationEvent(node.value, 'enter');
+
+      if (getAnimationName(node.value) === 'none') {
+        dispatchAnimationEvent(node.value, 'after-enter');
+      }
+    }
+    else {
+      isAnimating.value = shouldSuspendUnmount(node.value, prevAnimationName);
+      dispatchAnimationEvent(node.value, 'leave');
+
+      if (!isAnimating.value) {
+        dispatchAnimationEvent(node.value, 'after-leave');
+      }
+    }
+  }, { flush: 'sync' });
+
+  watch(node, (el, _oldEl, onCleanup) => {
+    if (el) {
+      const cleanup = onAnimationSettle(el, {
+        onSettle: () => {
+          const direction = toValue(present) ? 'enter' : 'leave';
+          dispatchAnimationEvent(el, `after-${direction}`);
+          isAnimating.value = false;
+        },
+        onStart: (animationName) => {
+          prevAnimationName = animationName;
+        },
+      });
+
+      onCleanup(cleanup);
+    }
+    else {
+      isAnimating.value = false;
+    }
+  });
+
+  tryOnScopeDispose(() => {
+    isAnimating.value = false;
+  });
+
+  function setRef(v: unknown) {
+    const el = unrefElement(v as MaybeElement);
+    node.value = el instanceof HTMLElement ? el : undefined;
+  }
+
+  return {
+    isPresent: readonly(isPresent),
+    setRef,
+  };
+}
diff --git a/vue/primitives/src/primitive/Primitive.ts b/vue/primitives/src/primitive/Primitive.ts
new file mode 100644
index 0000000..0592d53
--- /dev/null
+++ b/vue/primitives/src/primitive/Primitive.ts
@@ -0,0 +1,26 @@
+import type { AllowedComponentProps, Component, IntrinsicElementAttributes, SetupContext, VNodeProps } from 'vue';
+import { h } from 'vue';
+import { renderSlotChild } from './Slot';
+
+type FunctionalComponentContext = Omit<SetupContext, 'expose'>;
+
+export interface PrimitiveProps {
+  as?: keyof IntrinsicElementAttributes | Component;
+}
+
+export function Primitive(props: PrimitiveProps & VNodeProps & AllowedComponentProps & Record<string, unknown>, ctx: FunctionalComponentContext) {
+  const as = props.as;
+
+  return as === 'template'
+    ? renderSlotChild(ctx.slots, ctx.attrs)
+    : h(as!, ctx.attrs, ctx.slots);
+}
+
+Primitive.inheritAttrs = false;
+
+Primitive.props = {
+  as: {
+    type: [String, Object],
+    default: 'div' as const,
+  },
+};
diff --git a/vue/primitives/src/primitive/Slot.ts b/vue/primitives/src/primitive/Slot.ts
new file mode 100644
index 0000000..2bd4e27
--- /dev/null
+++ b/vue/primitives/src/primitive/Slot.ts
@@ -0,0 +1,51 @@
+import type { SetupContext, Slots, VNode } from 'vue';
+import { Comment, Fragment, cloneVNode, warn } from 'vue';
+import { getRawChildren } from '../utils/getRawChildren';
+
+type FunctionalComponentContext = Omit<SetupContext, 'expose'>;
+
+/**
+ * Renders a single child from the provided default slot, applying attrs to it.
+ * Shared between `<Slot>` and `<Primitive as="template">` to avoid an extra
+ * functional component instance on the template path.
+ *
+ * @param slots - Component slots
+ * @param attrs - Attrs to apply to the slotted child
+ * @returns Cloned VNode with merged attrs or null
+ */
+export function renderSlotChild(slots: Slots, attrs: Record<string, unknown>): VNode | null {
+  if (!slots.default) return null;
+
+  const raw = slots.default();
+
+  if (raw.length === 1) {
+    const only = raw[0] as VNode;
+    const t = only.type;
+    if (t !== Fragment && t !== Comment)
+      return cloneVNode(only, attrs, true);
+  }
+
+  const children = getRawChildren(raw);
+
+  if (!children.length) return null;
+
+  if (__DEV__ && children.length > 1) {
+    warn('<Slot> can only be used on a single element or component.');
+  }
+
+  return cloneVNode(children[0]!, attrs, true);
+}
+
+/**
+ * A component that renders a single child from its default slot,
+ * applying the provided attributes to it.
+ *
+ * @param _ - Props (unused)
+ * @param context - Setup context containing slots and attrs
+ * @returns Cloned VNode with merged attrs or null
+ */
+export function Slot(_: Record<string, unknown>, { slots, attrs }: FunctionalComponentContext) {
+  return renderSlotChild(slots, attrs);
+}
+
+Slot.inheritAttrs = false;
diff --git a/vue/primitives/src/primitive/__test__/Primitive.bench.ts b/vue/primitives/src/primitive/__test__/Primitive.bench.ts
new file mode 100644
index 0000000..148624e
--- /dev/null
+++ b/vue/primitives/src/primitive/__test__/Primitive.bench.ts
@@ -0,0 +1,155 @@
+import { bench, describe } from 'vitest';
+import { Comment, cloneVNode, createVNode, h, render } from 'vue';
+import { Primitive, Slot } from '..';
+
+const attrs1 = { class: 'a' };
+
+const attrs5 = { class: 'a', id: 'b', role: 'button', tabindex: '0', title: 'tip' };
+
+const attrs15 = {
+  class: 'a',
+  id: 'b',
+  style: { color: 'red' },
+  onClick: () => {},
+  role: 'button',
+  tabindex: '0',
+  title: 'tip',
+  'data-a': '1',
+  'data-b': '2',
+  'data-c': '3',
+  'data-d': '4',
+  'data-e': '5',
+  'data-f': '6',
+  'data-g': '7',
+  'data-h': '8',
+};
+
+const defaultSlot = { default: () => [h('span', 'content')] };
+const noop = () => {};
+
+// ---- Baselines (raw Vue calls) ----
+
+describe('baseline: raw h()', () => {
+  bench('h() — 1 attr', () => {
+    h('div', attrs1, defaultSlot);
+  });
+
+  bench('h() — 5 attrs', () => {
+    h('div', attrs5, defaultSlot);
+  });
+
+  bench('h() — 15 attrs', () => {
+    h('div', attrs15, defaultSlot);
+  });
+});
+
+describe('baseline: raw cloneVNode()', () => {
+  const child = h('div', 'content');
+
+  bench('cloneVNode — 1 attr', () => {
+    cloneVNode(child, attrs1, true);
+  });
+
+  bench('cloneVNode — 5 attrs', () => {
+    cloneVNode(child, attrs5, true);
+  });
+
+  bench('cloneVNode — 15 attrs', () => {
+    cloneVNode(child, attrs15, true);
+  });
+});
+
+// ---- Primitive overhead vs raw h() ----
+
+describe('Primitive vs h()', () => {
+  bench('h("div") — baseline', () => {
+    h('div', attrs5, defaultSlot);
+  });
+
+  bench('Primitive({ as: "div" })', () => {
+    Primitive({ as: 'div' }, { attrs: attrs5, slots: defaultSlot, emit: noop });
+  });
+
+  bench('Primitive({ as: "template" }) — Slot mode', () => {
+    Primitive({ as: 'template' }, { attrs: attrs5, slots: defaultSlot, emit: noop });
+  });
+});
+
+// ---- Slot scaling by attribute count ----
+
+describe('Slot — scaling by attrs', () => {
+  bench('1 attr', () => {
+    Slot({} as never, { attrs: attrs1, slots: defaultSlot, emit: noop });
+  });
+
+  bench('5 attrs', () => {
+    Slot({} as never, { attrs: attrs5, slots: defaultSlot, emit: noop });
+  });
+
+  bench('15 attrs (mixed types)', () => {
+    Slot({} as never, { attrs: attrs15, slots: defaultSlot, emit: noop });
+  });
+});
+
+// ---- Slot edge cases ----
+
+describe('Slot — edge cases', () => {
+  bench('child with comments to skip', () => {
+    Slot({} as never, {
+      attrs: attrs5,
+      slots: {
+        default: () => [
+          createVNode(Comment, null, 'skip'),
+          createVNode(Comment, null, 'skip'),
+          h('span', 'content'),
+        ],
+      },
+      emit: noop,
+    });
+  });
+
+  bench('no default slot', () => {
+    Slot({} as never, { attrs: attrs5, slots: {}, emit: noop });
+  });
+});
+
+// ---- Slot — realistic attrs (fresh object per iteration) ----
+
+describe('Slot — fresh attrs per call', () => {
+  bench('5 attrs (stable ref)', () => {
+    Slot({} as never, { attrs: attrs5, slots: defaultSlot, emit: noop });
+  });
+
+  bench('5 attrs (new object)', () => {
+    Slot({} as never, {
+      attrs: { class: 'a', id: 'b', role: 'button', tabindex: '0', title: 'tip' },
+      slots: defaultSlot,
+      emit: noop,
+    });
+  });
+});
+
+// ---- Realistic runtime: mount + update via render() ----
+
+describe('Primitive — mount + update via render()', () => {
+  bench('h("div") — mount + update', () => {
+    const container = document.createElement('div');
+    render(h('div', attrs5, [h('span', 'content')]), container);
+    render(h('div', attrs15, [h('span', 'content')]), container);
+    render(null, container);
+  });
+
+  bench('Primitive({ as: "div" }) — mount + update', () => {
+    const container = document.createElement('div');
+    render(h(Primitive, { as: 'div', ...attrs5 }, defaultSlot), container);
+    render(h(Primitive, { as: 'div', ...attrs15 }, defaultSlot), container);
+    render(null, container);
+  });
+
+  bench('Primitive({ as: "template" }) — mount + update', () => {
+    const container = document.createElement('div');
+    render(h(Primitive, { as: 'template', ...attrs5 }, defaultSlot), container);
+    render(h(Primitive, { as: 'template', ...attrs15 }, defaultSlot), container);
+    render(null, container);
+  });
+});
diff --git a/vue/primitives/src/primitive/__test__/Primitive.test.ts b/vue/primitives/src/primitive/__test__/Primitive.test.ts
new file mode 100644
index 0000000..a395493
--- /dev/null
+++ b/vue/primitives/src/primitive/__test__/Primitive.test.ts
@@ -0,0 +1,482 @@
+import type { PrimitiveProps } from '..';
+import { describe, expect, it, vi } from 'vitest';
+import { Comment, createVNode, defineComponent, h, markRaw, nextTick, ref, shallowRef } from 'vue';
+import { mount } from '@vue/test-utils';
+import { Primitive, Slot } from '..';
+
+// --- Slot ---
+
+describe(Slot, () => {
+  it('returns null when no default slot is provided', () => {
+    const wrapper = mount(
+      defineComponent({
+        setup() {
+          return () => h(Slot);
+        },
+      }),
+    );
+
+    expect(wrapper.html()).toBe('');
+
+    wrapper.unmount();
+  });
+
+  it('renders the first valid child from the slot', () => {
+    const wrapper = mount(
+      defineComponent({
+        setup() {
+          return () => h(Slot, null, { default: () => [h('span', 'hello')] });
+        },
+      }),
+    );
+
+    expect(wrapper.html()).toBe('<span>hello</span>');
+
+    wrapper.unmount();
+  });
+
+  it('applies attrs to the slotted child', () => {
+    const wrapper = mount(
+      defineComponent({
+        setup() {
+          return () =>
+            h(Slot, { class: 'custom', id: 'test' }, { default: () => [h('div')] });
+        },
+      }),
+    );
+
+    expect(wrapper.find('div').classes()).toContain('custom');
+    expect(wrapper.find('div').attributes('id')).toBe('test');
+
+    wrapper.unmount();
+  });
+
+  it('skips Comment nodes and picks the first element', () => {
+    const wrapper = mount(
+      defineComponent({
+        setup() {
+          return () =>
+            h(Slot, null, {
+              default: () => [createVNode(Comment, null, 'skip'), h('em', 'content')],
+            });
+        },
+      }),
+    );
+
+    expect(wrapper.html()).toBe('<em>content</em>');
+
+    wrapper.unmount();
+  });
+
+  it('warns in DEV mode when multiple valid children are provided', () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+    const wrapper = mount(
+      defineComponent({
+        setup() {
+          return () =>
+            h(Slot, null, {
+              default: () => [h('div', 'a'), h('span', 'b')],
+            });
+        },
+      }),
+    );
+
+    expect(warnSpy).toHaveBeenCalled();
+    expect(warnSpy.mock.calls.some(args =>
+      args.some(arg => typeof arg === 'string' && arg.includes('<Slot>')),
+    )).toBe(true);
+
+    warnSpy.mockRestore();
+    wrapper.unmount();
+  });
+
+  it('renders null when slot has only comments', () => {
+    const wrapper = mount(
+      defineComponent({
+        setup() {
+          return () =>
+            h(Slot, null, {
+              default: () => [
+                createVNode(Comment, null, 'a'),
+                createVNode(Comment, null, 'b'),
+              ],
+            });
+        },
+      }),
+    );
+
+    expect(wrapper.html()).toBe('');
+
+    wrapper.unmount();
+  });
+});
+
+// --- Primitive ---
+
+describe(Primitive, () => {
+  it('renders a div by default', () => {
+    const wrapper = mount(Primitive, {
+      slots: { default: () => 'content' },
+    });
+
+    expect(wrapper.element.tagName).toBe('DIV');
+    expect(wrapper.text()).toBe('content');
+
+    wrapper.unmount();
+  });
+
+  it('renders the element specified by "as" prop', () => {
+    const wrapper = mount(Primitive, {
+      props: { as: 'button' },
+      slots: { default: () => 'click me' },
+    });
+
+    expect(wrapper.element.tagName).toBe('BUTTON');
+    expect(wrapper.text()).toBe('click me');
+
+    wrapper.unmount();
+  });
+
+  it('renders a span element', () => {
+    const wrapper = mount(Primitive, {
+      props: { as: 'span' },
+      slots: { default: () => 'text' },
+    });
+
+    expect(wrapper.element.tagName).toBe('SPAN');
+
+    wrapper.unmount();
+  });
+
+  it('passes attributes to the rendered element', () => {
+    const wrapper = mount(Primitive, {
+      props: { as: 'input' },
+      attrs: { type: 'text', placeholder: 'enter' },
+    });
+
+    expect(wrapper.attributes('type')).toBe('text');
+    expect(wrapper.attributes('placeholder')).toBe('enter');
+
+    wrapper.unmount();
+  });
+
+  it('passes class and style attributes', () => {
+    const wrapper = mount(Primitive, {
+      props: { as: 'div' },
+      attrs: { class: 'my-class', style: 'color: red' },
+      slots: { default: () => 'styled' },
+    });
+
+    expect(wrapper.classes()).toContain('my-class');
+    expect(wrapper.attributes('style')).toBe('color: red;');
+
+    wrapper.unmount();
+  });
+
+  it('forwards event listeners', async () => {
+    const onClick = vi.fn();
+
+    const wrapper = mount(Primitive, {
+      props: { as: 'button' },
+      attrs: { onClick },
+      slots: { default: () => 'click' },
+    });
+
+    await wrapper.trigger('click');
+
+    expect(onClick).toHaveBeenCalledOnce();
+
+    wrapper.unmount();
+  });
+
+  it('renders a custom Vue component via "as"', () => {
+    const Custom = markRaw(defineComponent({
+      props: { label: String },
+      setup(props) {
+        return () => h('span', { class: 'custom' }, props.label);
+      },
+    }));
+
+    const wrapper = mount(Primitive, {
+      props: { as: Custom },
+      attrs: { label: 'hello' },
+    });
+
+    expect(wrapper.find('.custom').exists()).toBe(true);
+    expect(wrapper.text()).toBe('hello');
+
+    wrapper.unmount();
+  });
+
+  it('renders in Slot mode when as="template"', () => {
+    const wrapper = mount(Primitive, {
+      props: { as: 'template' },
+      slots: { default: () => h('section', 'slot content') },
+    });
+
+    expect(wrapper.element.tagName).toBe('SECTION');
+    expect(wrapper.text()).toBe('slot content');
+
+    wrapper.unmount();
+  });
+
+  it('merges attrs onto the slotted child in template mode', () => {
+    const wrapper = mount(Primitive, {
+      props: { as: 'template' },
+      attrs: { class: 'merged', 'data-testid': 'slot' },
+      slots: { default: () => h('div', 'child') },
+    });
+
+    expect(wrapper.classes()).toContain('merged');
+    expect(wrapper.attributes('data-testid')).toBe('slot');
+
+    wrapper.unmount();
+  });
+
+  it('forwards event listeners in template mode', async () => {
+    const onClick = vi.fn();
+
+    const wrapper = mount(Primitive, {
+      props: { as: 'template' },
+      attrs: { onClick },
+      slots: { default: () => h('button', 'click me') },
+    });
+
+    await wrapper.trigger('click');
+
+    expect(onClick).toHaveBeenCalledOnce();
+
+    wrapper.unmount();
+  });
+
+  it('renders empty when template mode has no slot', () => {
+    const wrapper = mount(Primitive, {
+      props: { as: 'template' },
+    });
+
+    expect(wrapper.html()).toBe('');
+
+    wrapper.unmount();
+  });
+
+  it('can switch element via reactive "as" prop', async () => {
+    const Wrapper = defineComponent({
+      props: { tag: { type: String, default: 'div' } },
+      setup(props) {
+        return () => h(Primitive, { as: props.tag as PrimitiveProps['as'] }, { default: () => 'test' });
+      },
+    });
+
+    const wrapper = mount(Wrapper, { props: { tag: 'div' } });
+
+    expect(wrapper.element.tagName).toBe('DIV');
+
+    await wrapper.setProps({ tag: 'span' });
+    await nextTick();
+
+    expect(wrapper.element.tagName).toBe('SPAN');
+
+    wrapper.unmount();
+  });
+
+  it('exposes root element via template ref', async () => {
+    const primitiveRef = shallowRef<Element | null>(null);
+
+    const wrapper = mount(
+      defineComponent({
+        setup() {
+          return () =>
+            h(Primitive, { ref: primitiveRef, as: 'button' }, { default: () => 'click' });
+        },
+      }),
+    );
+
+    await nextTick();
+
+    expect(primitiveRef.value).toBeInstanceOf(HTMLButtonElement);
+
+    wrapper.unmount();
+  });
+
+  it('exposes slotted element via template ref in template mode', async () => {
+    const primitiveRef = shallowRef<Element | null>(null);
+
+    const wrapper = mount(
+      defineComponent({
+        setup() {
+          return () =>
+            h(
+              Primitive,
+              { ref: primitiveRef, as: 'template' },
+              { default: () => h('section', 'content') },
+            );
+        },
+      }),
+    );
+
+    await nextTick();
+
+    expect(primitiveRef.value).toBeInstanceOf(HTMLElement);
+    expect((primitiveRef.value as HTMLElement).tagName).toBe('SECTION');
+
+    wrapper.unmount();
+  });
+
+  it('updates template ref when element changes', async () => {
+    const primitiveRef = shallowRef<Element | null>(null);
+    const tag = ref<PrimitiveProps['as']>('div');
+
+    const wrapper = mount(
+      defineComponent({
+        setup() {
+          return () =>
+            // @ts-expect-error — h() struggles with ref + broad PrimitiveProps['as'] union type
+            h(Primitive, { ref: primitiveRef, as: tag.value }, { default: () => 'test' });
+        },
+      }),
+    );
+
+    await nextTick();
+
+    expect(primitiveRef.value).toBeInstanceOf(HTMLDivElement);
+
+    tag.value = 'span';
+    await nextTick();
+
+    expect(primitiveRef.value).toBeInstanceOf(HTMLSpanElement);
+
+    wrapper.unmount();
+  });
+});
+
+// --- Nested as="template" ---
+
+describe.each([1, 2, 3])('Primitive nested as="template" (depth=%i)', (depth) => {
+  function wrapInTemplate(attrs: Array<Record<string, unknown>>, slot: () => ReturnType<typeof h>) {
+    let current = slot;
+
+    for (let i = attrs.length - 1; i >= 0; i--) {
+      const inner = current;
+      current = () => h(Primitive, { as: 'template', ...attrs[i] }, { default: inner });
+    }
+
+    return current();
+  }
+
+  function makeAttrsPerLevel(base: string, depth: number): Array<Record<string, unknown>> {
+    return Array.from({ length: depth }, (_, i) => ({ [`data-level-${i}`]: `${base}-${i}` }));
+  }
+
+  it('renders the inner child element', () => {
+    const attrs = makeAttrsPerLevel('v', depth);
+
+    const wrapper = mount(
+      defineComponent({
+        setup() {
+          return () => wrapInTemplate(attrs, () => h('section', 'leaf'));
+        },
+      }),
+    );
+
+    expect(wrapper.element.tagName).toBe('SECTION');
+    expect(wrapper.text()).toBe('leaf');
+
+    wrapper.unmount();
+  });
+
+  it('merges data attrs from all levels onto the leaf', () => {
+    const attrs = makeAttrsPerLevel('v', depth);
+
+    const wrapper = mount(
+      defineComponent({
+        setup() {
+          return () => wrapInTemplate(attrs, () => h('div', 'child'));
+        },
+      }),
+    );
+
+    for (let i = 0; i < depth; i++) {
+      expect(wrapper.attributes(`data-level-${i}`)).toBe(`v-${i}`);
+    }
+
+    wrapper.unmount();
+  });
+
+  it('merges classes from all levels', () => {
+    const attrs = Array.from({ length: depth }, (_, i) => ({ class: `level-${i}` }));
+
+    const wrapper = mount(
+      defineComponent({
+        setup() {
+          return () => wrapInTemplate(attrs, () => h('div', { class: 'leaf' }, 'child'));
+        },
+      }),
+    );
+
+    for (let i = 0; i < depth; i++) {
+      expect(wrapper.classes()).toContain(`level-${i}`);
+    }
+    expect(wrapper.classes()).toContain('leaf');
+
+    wrapper.unmount();
+  });
+
+  it('forwards event listeners from all levels', async () => {
+    const handlers = Array.from({ length: depth }, () => vi.fn());
+    const attrs = handlers.map(fn => ({ onClick: fn }));
+
+    const wrapper = mount(
+      defineComponent({
+        setup() {
+          return () => wrapInTemplate(attrs, () => h('button', 'click'));
+        },
+      }),
+    );
+
+    await wrapper.trigger('click');
+
+    for (const handler of handlers) {
+      expect(handler).toHaveBeenCalledOnce();
+    }
+
+    wrapper.unmount();
+  });
+
+  it('exposes inner element via template ref', async () => {
+    const primitiveRef = shallowRef<Element | null>(null);
+    const attrs = makeAttrsPerLevel('v', depth);
+    attrs[0] = { ...attrs[0], ref: primitiveRef };
+
+    const wrapper = mount(
+      defineComponent({
+        setup() {
+          return () => wrapInTemplate(attrs, () => h('section', 'content'));
+        },
+      }),
+    );
+
+    await nextTick();
+
+    expect(primitiveRef.value).toBeInstanceOf(HTMLElement);
+    expect((primitiveRef.value as HTMLElement).tagName).toBe('SECTION');
+
+    wrapper.unmount();
+  });
+
+  it('renders empty when innermost slot is missing', () => {
+    const attrs = makeAttrsPerLevel('v', depth);
+
+    const wrapper = mount(
+      defineComponent({
+        setup() {
+          return () => wrapInTemplate(attrs, () => h(Slot));
+        },
+      }),
+    );
+
+    expect(wrapper.html()).toBe('');
+
+    wrapper.unmount();
+  });
+});
diff --git a/vue/primitives/src/primitive/index.ts b/vue/primitives/src/primitive/index.ts
new file mode 100644
index 0000000..3bae4eb
--- /dev/null
+++ b/vue/primitives/src/primitive/index.ts
@@ -0,0 +1,2 @@
+export { Primitive, type PrimitiveProps } from './Primitive';
+export { Slot } from './Slot';
diff --git a/vue/primitives/src/progress/ProgressIndicator.vue b/vue/primitives/src/progress/ProgressIndicator.vue
new file mode 100644
index 0000000..a9724eb
--- /dev/null
+++ b/vue/primitives/src/progress/ProgressIndicator.vue
@@ -0,0 +1,29 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ProgressIndicatorProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { useProgressContext } from './context';
+
+const { as = 'div' } = defineProps<ProgressIndicatorProps>();
+
+const { forwardRef } = useForwardExpose();
+
+const ctx = useProgressContext();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :data-state="ctx.state.value"
+    :data-value="ctx.value.value ?? undefined"
+    :data-max="ctx.max.value"
+  >
+    <slot :value="ctx.value.value" :max="ctx.max.value" :state="ctx.state.value" />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/progress/ProgressRoot.vue b/vue/primitives/src/progress/ProgressRoot.vue
new file mode 100644
index 0000000..d1eb04a
--- /dev/null
+++ b/vue/primitives/src/progress/ProgressRoot.vue
@@ -0,0 +1,65 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+import type { ProgressState } from './context';
+
+export interface ProgressRootProps extends PrimitiveProps {
+  /** Current value. `null` denotes an indeterminate progress bar. */
+  modelValue?: number | null;
+  /** Maximum value. @default 100 */
+  max?: number;
+  /** Accessible label (use when no external label is provided). */
+  getValueLabel?: (value: number, max: number) => string;
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { computed, toRef } from 'vue';
+import { provideProgressContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+const {
+  modelValue = null,
+  max = 100,
+  getValueLabel = (v: number, m: number) => `${Math.round((v / m) * 100)}%`,
+  as = 'div',
+} = defineProps<ProgressRootProps>();
+
+const { forwardRef } = useForwardExpose();
+
+// Identity passthroughs via `toRef` — reactive without `computed`'s effect/cache.
+const value = toRef(() => modelValue);
+const maxRef = toRef(() => max);
+
+const state = computed<ProgressState>(() => {
+  const v = modelValue;
+  if (v === null || v === undefined) return 'indeterminate';
+  if (v >= max) return 'complete';
+  return 'loading';
+});
+
+const valueLabel = computed(() => value.value === null || value.value === undefined ? undefined : getValueLabel(value.value, max));
+
+provideProgressContext({
+  value,
+  max: maxRef,
+  state,
+});
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    role="progressbar"
+    :aria-valuemin="0"
+    :aria-valuemax="max"
+    :aria-valuenow="value ?? undefined"
+    :aria-valuetext="valueLabel"
+    :data-state="state"
+    :data-value="value ?? undefined"
+    :data-max="max"
+  >
+    <slot :value="value" :max="max" :state="state" />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/progress/__test__/Progress.test.ts b/vue/primitives/src/progress/__test__/Progress.test.ts
new file mode 100644
index 0000000..a7e5b3c
--- /dev/null
+++ b/vue/primitives/src/progress/__test__/Progress.test.ts
@@ -0,0 +1,50 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import { defineComponent, h } from 'vue';
+import { ProgressIndicator, ProgressRoot } from '../index';
+
+function mountProgress(props: Record<string, unknown> = {}) {
+  return mount(defineComponent({
+    setup: () => () => h(ProgressRoot, props, { default: () => h(ProgressIndicator, { class: 'ind' }) }),
+  }));
+}
+
+describe('Progress', () => {
+  it('has role="progressbar" with aria attributes', () => {
+    const wrapper = mountProgress({ modelValue: 40 });
+    expect(wrapper.attributes('role')).toBe('progressbar');
+    expect(wrapper.attributes('aria-valuemin')).toBe('0');
+    expect(wrapper.attributes('aria-valuemax')).toBe('100');
+    expect(wrapper.attributes('aria-valuenow')).toBe('40');
+    expect(wrapper.attributes('aria-valuetext')).toBe('40%');
+  });
+
+  it('is indeterminate when value is null', () => {
+    const wrapper = mountProgress({ modelValue: null });
+    expect(wrapper.attributes('data-state')).toBe('indeterminate');
+    expect(wrapper.attributes('aria-valuenow')).toBeUndefined();
+  });
+
+  it('is complete when value reaches max', () => {
+    const wrapper = mountProgress({ modelValue: 100 });
+    expect(wrapper.attributes('data-state')).toBe('complete');
+  });
+
+  it('custom max', () => {
+    const wrapper = mountProgress({ modelValue: 5, max: 10 });
+    expect(wrapper.attributes('aria-valuemax')).toBe('10');
+    expect(wrapper.attributes('aria-valuetext')).toBe('50%');
+  });
+
+  it('indicator receives matching data-state', () => {
+    const wrapper = mountProgress({ modelValue: 70 });
+    const ind = wrapper.find('.ind');
+    expect(ind.attributes('data-state')).toBe('loading');
+    expect(ind.attributes('data-value')).toBe('70');
+  });
+
+  it('getValueLabel override', () => {
+    const wrapper = mountProgress({ modelValue: 3, max: 10, getValueLabel: (v: number, m: number) => `${v} of ${m}` });
+    expect(wrapper.attributes('aria-valuetext')).toBe('3 of 10');
+  });
+});
diff --git a/vue/primitives/src/progress/context.ts b/vue/primitives/src/progress/context.ts
new file mode 100644
index 0000000..171e28e
--- /dev/null
+++ b/vue/primitives/src/progress/context.ts
@@ -0,0 +1,15 @@
+import type { Ref } from 'vue';
+import { useContextFactory } from '@robonen/vue';
+
+export type ProgressState = 'indeterminate' | 'loading' | 'complete';
+
+export interface ProgressContext {
+  value: Ref<number | null>;
+  max: Ref<number>;
+  state: Ref<ProgressState>;
+}
+
+const ctx = useContextFactory<ProgressContext>('ProgressContext');
+
+export const provideProgressContext = ctx.provide;
+export const useProgressContext = ctx.inject;
diff --git a/vue/primitives/src/progress/index.ts b/vue/primitives/src/progress/index.ts
new file mode 100644
index 0000000..fbd2217
--- /dev/null
+++ b/vue/primitives/src/progress/index.ts
@@ -0,0 +1,6 @@
+export { default as ProgressRoot } from './ProgressRoot.vue';
+export { default as ProgressIndicator } from './ProgressIndicator.vue';
+export type { ProgressRootProps } from './ProgressRoot.vue';
+export type { ProgressIndicatorProps } from './ProgressIndicator.vue';
+export { provideProgressContext, useProgressContext } from './context';
+export type { ProgressState, ProgressContext } from './context';
diff --git a/vue/primitives/src/radio-group/RadioGroupIndicator.vue b/vue/primitives/src/radio-group/RadioGroupIndicator.vue
new file mode 100644
index 0000000..124a880
--- /dev/null
+++ b/vue/primitives/src/radio-group/RadioGroupIndicator.vue
@@ -0,0 +1,30 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+export interface RadioGroupIndicatorProps extends PrimitiveProps {
+  forceMount?: boolean;
+
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { useRadioGroupItemContext } from './context';
+
+const { as = 'span', forceMount = false } = defineProps<RadioGroupIndicatorProps>();
+const { forwardRef } = useForwardExpose();
+const item = useRadioGroupItemContext();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    v-if="forceMount || item.checked.value"
+    :data-state="item.checked.value ? 'checked' : 'unchecked'"
+    :data-disabled="item.disabled.value ? '' : undefined"
+    style="pointer-events: none;"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/radio-group/RadioGroupItem.vue b/vue/primitives/src/radio-group/RadioGroupItem.vue
new file mode 100644
index 0000000..042a5e0
--- /dev/null
+++ b/vue/primitives/src/radio-group/RadioGroupItem.vue
@@ -0,0 +1,76 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+export interface RadioGroupItemProps extends PrimitiveProps {
+  value: string;
+  disabled?: boolean;
+  required?: boolean;
+
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Primitive } from '../primitive';
+import { useCollectionInjector } from '../collection';
+import { useForwardExpose } from '@robonen/vue';
+import { provideRadioGroupItemContext, useRadioGroupContext } from './context';
+
+const { value, disabled = false, as = 'button' } = defineProps<RadioGroupItemProps>();
+
+const ctx = useRadioGroupContext();
+const { CollectionItem } = useCollectionInjector();
+const { forwardRef, currentElement } = useForwardExpose();
+
+const isChecked = computed(() => ctx.value.value === value);
+const isDisabled = computed(() => ctx.disabled.value || disabled);
+const dataState = computed(() => isChecked.value ? 'checked' : 'unchecked');
+
+provideRadioGroupItemContext({
+  value,
+  checked: isChecked,
+  disabled: isDisabled,
+});
+
+// Only one item should be in the tab order:
+// - the checked one, or
+// - the first enabled one if nothing is checked.
+const isTabStop = computed(() => {
+  if (isDisabled.value) return false;
+  if (ctx.value.value !== undefined) return isChecked.value;
+  const firstEnabled = ctx.items.value.find(x => !x.hasAttribute('data-disabled'));
+  return currentElement.value ? firstEnabled === currentElement.value : false;
+});
+
+function onClick(): void {
+  if (isDisabled.value) return;
+  ctx.setValue(value);
+  currentElement.value?.focus();
+}
+function onKeyDown(event: KeyboardEvent): void {
+  if (!currentElement.value) return;
+  ctx.onItemKeyDown(event, currentElement.value);
+}
+</script>
+
+<template>
+  <CollectionItem>
+    <Primitive
+      :as="as"
+      :ref="forwardRef"
+      :type="as === 'button' ? 'button' : undefined"
+      role="radio"
+      :aria-checked="isChecked"
+      :aria-required="required || undefined"
+      :aria-disabled="isDisabled || undefined"
+      :data-state="dataState"
+      :data-disabled="isDisabled ? '' : undefined"
+      :data-value="value"
+      :tabindex="isTabStop ? 0 : -1"
+      :disabled="isDisabled || undefined"
+      @click="onClick"
+      @keydown="onKeyDown"
+    >
+      <slot :checked="isChecked" />
+    </Primitive>
+  </CollectionItem>
+</template>
diff --git a/vue/primitives/src/radio-group/RadioGroupRoot.vue b/vue/primitives/src/radio-group/RadioGroupRoot.vue
new file mode 100644
index 0000000..df0820e
--- /dev/null
+++ b/vue/primitives/src/radio-group/RadioGroupRoot.vue
@@ -0,0 +1,137 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+import type { RovingDirection } from '../utils/roving-focus';
+
+export interface RadioGroupRootProps extends PrimitiveProps {
+  defaultValue?: string;
+  disabled?: boolean;
+  required?: boolean;
+  name?: string;
+  orientation?: 'horizontal' | 'vertical';
+  dir?: RovingDirection;
+  loop?: boolean;
+
+}
+
+export interface RadioGroupRootEmits {
+  valueChange: [value: string];
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, toRef, watch } from 'vue';
+import { resolveNextIndex, rovingKeyToAction } from '../utils/roving-focus';
+import { useCollectionProvider } from '../collection';
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { provideRadioGroupContext } from './context';
+
+const {
+  disabled = false,
+  required = false,
+  orientation = 'vertical',
+  dir = 'ltr',
+  loop = true,
+  defaultValue,
+  name,
+  as = 'div',
+} = defineProps<RadioGroupRootProps>();
+
+const { forwardRef } = useForwardExpose();
+
+const emit = defineEmits<RadioGroupRootEmits>();
+const model = defineModel<string | undefined>({ default: undefined });
+
+const localValue = ref<string | undefined>(model.value ?? defaultValue);
+
+watch(model, (v) => {
+  if (v === undefined) return;
+  if (v !== localValue.value) localValue.value = v;
+});
+
+function setValue(v: string): void {
+  if (disabled) return;
+  localValue.value = v;
+  model.value = v;
+  emit('valueChange', v);
+}
+
+// DOM-order items via Collection primitive — survives `v-for` reorders.
+const { getItems, CollectionSlot } = useCollectionProvider();
+const items = computed(() => getItems(true).map(i => i.ref));
+
+function focusIndex(i: number): void {
+  const el = items.value[i];
+  if (!el || el.hasAttribute('data-disabled')) {
+    // Skip disabled items when looping forward.
+    return;
+  }
+  el.focus();
+  const v = el.getAttribute('data-value');
+  if (v !== null) setValue(v);
+}
+
+function onItemKeyDown(event: KeyboardEvent, el: HTMLElement): void {
+  // Space selects without moving focus.
+  if (event.key === ' ') {
+    event.preventDefault();
+    const v = el.getAttribute('data-value');
+    if (v !== null) setValue(v);
+    return;
+  }
+  const action = rovingKeyToAction(event, { orientation, dir, loop });
+  if (!action) return;
+  event.preventDefault();
+  const enabled = items.value.filter(x => !x.hasAttribute('data-disabled'));
+  if (enabled.length === 0) return;
+  const current = enabled.indexOf(el);
+  if (action.absolute === 'home') return focusIndex(items.value.indexOf(enabled[0]!));
+  if (action.absolute === 'end') return focusIndex(items.value.indexOf(enabled[enabled.length - 1]!));
+  const nextIdx = resolveNextIndex(current === -1 ? 0 : current, action.delta, enabled.length, loop);
+  focusIndex(items.value.indexOf(enabled[nextIdx]!));
+}
+
+provideRadioGroupContext({
+  value: localValue,
+  setValue,
+  // Identity passthroughs via `toRef` — reactive without `computed`'s effect/cache.
+  orientation: toRef(() => orientation),
+  direction: toRef(() => dir),
+  loop: toRef(() => loop),
+  disabled: toRef(() => disabled),
+  required: toRef(() => required),
+  name: toRef(() => name),
+  items,
+  onItemKeyDown,
+});
+</script>
+
+<template>
+  <CollectionSlot>
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      role="radiogroup"
+      :aria-orientation="orientation"
+      :aria-required="required || undefined"
+      :aria-disabled="disabled || undefined"
+      :dir="dir"
+      :data-orientation="orientation"
+      :data-disabled="disabled ? '' : undefined"
+    >
+      <slot :value="localValue" />
+      <input
+        v-if="name"
+        type="radio"
+        tabindex="-1"
+        aria-hidden="true"
+        :name="name"
+        :value="localValue ?? ''"
+        :checked="localValue !== undefined"
+        :required="required"
+        :disabled="disabled"
+        style="position: absolute; pointer-events: none; opacity: 0; margin: 0; transform: translateX(-100%);"
+      >
+    </Primitive>
+  </CollectionSlot>
+</template>
diff --git a/vue/primitives/src/radio-group/__test__/RadioGroup.form.test.ts b/vue/primitives/src/radio-group/__test__/RadioGroup.form.test.ts
new file mode 100644
index 0000000..606e17e
--- /dev/null
+++ b/vue/primitives/src/radio-group/__test__/RadioGroup.form.test.ts
@@ -0,0 +1,75 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import { defineComponent, h, nextTick, ref } from 'vue';
+
+import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from '../index';
+
+function mountInForm(props: Record<string, unknown> = {}) {
+  const model = ref<string | undefined>(undefined);
+  const submitted = ref<FormData | null>(null);
+  const Harness = defineComponent({
+    setup: () => () => h(
+      'form',
+      {
+        onSubmit: (e: SubmitEvent) => {
+          e.preventDefault();
+          submitted.value = new FormData(e.target as HTMLFormElement);
+        },
+      },
+      [
+        h(RadioGroupRoot, {
+          modelValue: model.value,
+          'onUpdate:modelValue': (v: string | undefined) => { model.value = v; },
+          ...props,
+        }, {
+          default: () => [
+            h(RadioGroupItem, { value: 'apple', id: 'a' }, { default: () => h(RadioGroupIndicator) }),
+            h(RadioGroupItem, { value: 'banana', id: 'b' }, { default: () => h(RadioGroupIndicator) }),
+          ],
+        }),
+        h('button', { type: 'submit', id: 'submit' }, 'Submit'),
+      ],
+    ),
+  });
+  return { wrapper: mount(Harness, { attachTo: document.body }), model, submitted };
+}
+
+describe('RadioGroup — form submission', () => {
+  it('does not render a hidden input when `name` is omitted', async () => {
+    const { wrapper } = mountInForm();
+    await nextTick();
+    expect(wrapper.element.querySelector('input[type="radio"]')).toBeNull();
+    wrapper.unmount();
+  });
+
+  it('renders a hidden, accessibility-hidden input when `name` is set', async () => {
+    const { wrapper } = mountInForm({ name: 'fruit' });
+    await nextTick();
+    const input = wrapper.element.querySelector('input[type="radio"][name="fruit"]') as HTMLInputElement;
+    expect(input).toBeTruthy();
+    expect(input.getAttribute('aria-hidden')).toBe('true');
+    expect(input.tabIndex).toBe(-1);
+    wrapper.unmount();
+  });
+
+  it('hidden input forwards the selected value into FormData on submit', async () => {
+    const { wrapper, submitted } = mountInForm({ name: 'fruit' });
+    await nextTick();
+    document.querySelector<HTMLButtonElement>('#a')!.click();
+    await nextTick();
+    (wrapper.element as HTMLFormElement).requestSubmit();
+    await nextTick();
+    expect(submitted.value).not.toBeNull();
+    expect(submitted.value!.get('fruit')).toBe('apple');
+    wrapper.unmount();
+  });
+
+  it('hidden input mirrors `required`/`disabled`', async () => {
+    const { wrapper } = mountInForm({ name: 'fruit', required: true, disabled: true });
+    await nextTick();
+    const input = wrapper.element.querySelector('input[type="radio"][name="fruit"]') as HTMLInputElement;
+    expect(input.required).toBe(true);
+    expect(input.disabled).toBe(true);
+    wrapper.unmount();
+  });
+});
diff --git a/vue/primitives/src/radio-group/__test__/RadioGroup.test.ts b/vue/primitives/src/radio-group/__test__/RadioGroup.test.ts
new file mode 100644
index 0000000..4fd76ea
--- /dev/null
+++ b/vue/primitives/src/radio-group/__test__/RadioGroup.test.ts
@@ -0,0 +1,118 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import { defineComponent, h, nextTick, ref } from 'vue';
+import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from '../index';
+
+function mountGroup(opts: Record<string, unknown> = {}) {
+  const model = ref<string | undefined>(undefined);
+  const Harness = defineComponent({
+    setup: () => () => h(RadioGroupRoot, {
+      modelValue: model.value,
+      'onUpdate:modelValue': (v: string | undefined) => { model.value = v; },
+      ...opts,
+    }, {
+      default: () => [
+        h(RadioGroupItem, { value: 'a', id: 'a' }, { default: () => h(RadioGroupIndicator) }),
+        h(RadioGroupItem, { value: 'b', id: 'b' }, { default: () => h(RadioGroupIndicator) }),
+        h(RadioGroupItem, { value: 'c', id: 'c', disabled: true }, { default: () => h(RadioGroupIndicator) }),
+      ],
+    }),
+  });
+  return { wrapper: mount(Harness, { attachTo: document.body }), model };
+}
+
+function press(el: Element, key: string): void {
+  el.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
+}
+
+describe('RadioGroup', () => {
+  it('renders role="radiogroup" and items with role="radio"', () => {
+    const { wrapper } = mountGroup();
+    const root = wrapper.element as HTMLElement;
+    expect(root.getAttribute('role')).toBe('radiogroup');
+    expect(document.querySelectorAll('[role="radio"]')).toHaveLength(3);
+    wrapper.unmount();
+  });
+
+  it('click selects and emits valueChange', async () => {
+    const { wrapper, model } = mountGroup();
+    await nextTick();
+    const a = document.querySelector<HTMLButtonElement>('#a')!;
+    a.click();
+    await nextTick();
+    expect(model.value).toBe('a');
+    expect(a.getAttribute('aria-checked')).toBe('true');
+    wrapper.unmount();
+  });
+
+  it('ArrowDown moves focus+selection to next enabled item', async () => {
+    const { wrapper, model } = mountGroup({ defaultValue: 'a' });
+    await nextTick();
+    const a = document.querySelector<HTMLButtonElement>('#a')!;
+    const b = document.querySelector<HTMLButtonElement>('#b')!;
+    a.focus();
+    press(a, 'ArrowDown');
+    await nextTick();
+    expect(document.activeElement).toBe(b);
+    expect(model.value).toBe('b');
+    wrapper.unmount();
+  });
+
+  it('skips disabled items on arrow', async () => {
+    const { wrapper, model } = mountGroup({ defaultValue: 'b' });
+    await nextTick();
+    const b = document.querySelector<HTMLButtonElement>('#b')!;
+    const a = document.querySelector<HTMLButtonElement>('#a')!;
+    b.focus();
+    press(b, 'ArrowDown');
+    await nextTick();
+    // Loops past disabled 'c' to 'a'
+    expect(document.activeElement).toBe(a);
+    expect(model.value).toBe('a');
+    wrapper.unmount();
+  });
+
+  it('only checked (or first enabled) has tabindex 0', async () => {
+    const { wrapper } = mountGroup();
+    await nextTick();
+    const [a, b] = document.querySelectorAll<HTMLButtonElement>('[role="radio"]');
+    expect(a!.tabIndex).toBe(0);
+    expect(b!.tabIndex).toBe(-1);
+    a!.click();
+    await nextTick();
+    expect(a!.tabIndex).toBe(0);
+    wrapper.unmount();
+  });
+
+  it('disabled item: aria-disabled=true, not clickable', async () => {
+    const { wrapper, model } = mountGroup();
+    await nextTick();
+    const c = document.querySelector<HTMLButtonElement>('#c')!;
+    expect(c.getAttribute('aria-disabled')).toBe('true');
+    c.click();
+    await nextTick();
+    expect(model.value).toBeUndefined();
+    wrapper.unmount();
+  });
+
+  it('RadioGroupIndicator renders only for checked item', async () => {
+    const { wrapper } = mountGroup({ defaultValue: 'b' });
+    await nextTick();
+    const b = document.querySelector<HTMLButtonElement>('#b')!;
+    expect(b.querySelector('span')).toBeTruthy();
+    const a = document.querySelector<HTMLButtonElement>('#a')!;
+    expect(a.querySelector('span')).toBeNull();
+    wrapper.unmount();
+  });
+
+  it('Space selects the focused item', async () => {
+    const { wrapper, model } = mountGroup();
+    await nextTick();
+    const b = document.querySelector<HTMLButtonElement>('#b')!;
+    b.focus();
+    press(b, ' ');
+    await nextTick();
+    expect(model.value).toBe('b');
+    wrapper.unmount();
+  });
+});
diff --git a/vue/primitives/src/radio-group/__test__/__screenshots__/RadioGroup.form.test.ts/RadioGroup---form-submission-hidden-input-forwards-the-selected-value-into-FormData-on-submit-1.png b/vue/primitives/src/radio-group/__test__/__screenshots__/RadioGroup.form.test.ts/RadioGroup---form-submission-hidden-input-forwards-the-selected-value-into-FormData-on-submit-1.png
new file mode 100644
index 0000000..7e22607
Binary files /dev/null and b/vue/primitives/src/radio-group/__test__/__screenshots__/RadioGroup.form.test.ts/RadioGroup---form-submission-hidden-input-forwards-the-selected-value-into-FormData-on-submit-1.png differ
diff --git a/vue/primitives/src/radio-group/context.ts b/vue/primitives/src/radio-group/context.ts
new file mode 100644
index 0000000..f7c0874
--- /dev/null
+++ b/vue/primitives/src/radio-group/context.ts
@@ -0,0 +1,33 @@
+import type { ComputedRef, Ref } from 'vue';
+import type { RovingDirection, RovingOrientation } from '../utils/roving-focus';
+import { useContextFactory } from '@robonen/vue';
+
+export interface RadioGroupContext {
+  value: Ref<string | undefined>;
+  setValue: (v: string) => void;
+  orientation: Ref<RovingOrientation>;
+  direction: Ref<RovingDirection>;
+  loop: Ref<boolean>;
+  disabled: Ref<boolean>;
+  required: Ref<boolean>;
+  name: Ref<string | undefined>;
+  /** DOM-ordered items, sourced from the internal Collection. */
+  items: ComputedRef<HTMLElement[]>;
+  onItemKeyDown: (event: KeyboardEvent, el: HTMLElement) => void;
+}
+
+const rootCtx = useContextFactory<RadioGroupContext>('RadioGroupContext');
+
+export const provideRadioGroupContext = rootCtx.provide;
+export const useRadioGroupContext = rootCtx.inject;
+
+export interface RadioGroupItemContext {
+  value: string;
+  checked: ComputedRef<boolean>;
+  disabled: ComputedRef<boolean>;
+}
+
+const itemCtx = useContextFactory<RadioGroupItemContext>('RadioGroupItemContext');
+
+export const provideRadioGroupItemContext = itemCtx.provide;
+export const useRadioGroupItemContext = itemCtx.inject;
diff --git a/vue/primitives/src/radio-group/index.ts b/vue/primitives/src/radio-group/index.ts
new file mode 100644
index 0000000..25c039c
--- /dev/null
+++ b/vue/primitives/src/radio-group/index.ts
@@ -0,0 +1,6 @@
+export { default as RadioGroupIndicator } from './RadioGroupIndicator.vue';
+export { default as RadioGroupItem } from './RadioGroupItem.vue';
+export { default as RadioGroupRoot } from './RadioGroupRoot.vue';
+export type { RadioGroupIndicatorProps } from './RadioGroupIndicator.vue';
+export type { RadioGroupItemProps } from './RadioGroupItem.vue';
+export type { RadioGroupRootEmits, RadioGroupRootProps } from './RadioGroupRoot.vue';
diff --git a/vue/primitives/src/roving-focus/RovingFocusGroup.vue b/vue/primitives/src/roving-focus/RovingFocusGroup.vue
new file mode 100644
index 0000000..3448bbb
--- /dev/null
+++ b/vue/primitives/src/roving-focus/RovingFocusGroup.vue
@@ -0,0 +1,156 @@
+<script lang="ts">
+import type { Direction } from '../config-provider';
+import type { Orientation } from './utils';
+import type { PrimitiveProps } from '../primitive';
+import type { Ref } from 'vue';
+import { useContextFactory } from '@robonen/vue';
+
+export interface RovingFocusGroupProps extends PrimitiveProps {
+  /** Navigation orientation — decides which arrow keys move focus. */
+  orientation?: Orientation;
+  /** Writing direction (LTR / RTL). Falls back to `useConfig().dir`. */
+  dir?: Direction;
+  /**
+   * Wrap around at the ends.
+   * @default false
+   */
+  loop?: boolean;
+  /** Controlled current tab-stop id. */
+  currentTabStopId?: string | null;
+  /** Initial current tab-stop id (uncontrolled). */
+  defaultCurrentTabStopId?: string;
+  /**
+   * Prevent scroll when focus enters the group.
+   * @default false
+   */
+  preventScrollOnEntryFocus?: boolean;
+}
+
+export interface RovingFocusGroupEmits {
+  entryFocus: [event: Event];
+}
+
+export interface RovingFocusGroupContext {
+  orientation: Ref<Orientation | undefined>;
+  dir: Ref<Direction>;
+  loop: Ref<boolean>;
+  currentTabStopId: Ref<string | null | undefined>;
+  onItemFocus: (tabStopId: string) => void;
+  onItemShiftTab: () => void;
+  onFocusableItemAdd: () => void;
+  onFocusableItemRemove: () => void;
+}
+
+export const RovingFocusGroupCtx = useContextFactory<RovingFocusGroupContext>(
+  'RovingFocusGroupContext',
+);
+</script>
+
+<script setup lang="ts">
+import { ENTRY_FOCUS, EVENT_OPTIONS, focusFirst } from './utils';
+import { ref, toRef } from 'vue';
+import { Primitive } from '../primitive';
+import { useCollectionProvider } from '../collection';
+import { useConfig } from '../config-provider';
+
+const {
+  orientation,
+  dir,
+  loop = false,
+  currentTabStopId: currentTabStopIdProp,
+  defaultCurrentTabStopId,
+  preventScrollOnEntryFocus = false,
+  as = 'div',
+} = defineProps<RovingFocusGroupProps>();
+
+const emit = defineEmits<RovingFocusGroupEmits>();
+
+const config = useConfig();
+// `dir` falls back to the provider's configured direction when not given as prop.
+const dirRef = toRef(() => dir ?? config.dir.value);
+const orientationRef = toRef(() => orientation);
+const loopRef = toRef(() => loop);
+
+const currentTabStopId = ref<string | null | undefined>(
+  currentTabStopIdProp ?? defaultCurrentTabStopId,
+);
+
+const isTabbingBackOut = ref(false);
+const isClickFocus = ref(false);
+const focusableItemsCount = ref(0);
+
+const { getItems, CollectionSlot } = useCollectionProvider();
+
+function handleFocus(event: FocusEvent): void {
+  const isKeyboardFocus = !isClickFocus.value;
+
+  if (
+    event.currentTarget
+    && event.target === event.currentTarget
+    && isKeyboardFocus
+    && !isTabbingBackOut.value
+  ) {
+    const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
+    event.currentTarget.dispatchEvent(entryFocusEvent);
+    emit('entryFocus', entryFocusEvent);
+
+    if (!entryFocusEvent.defaultPrevented) {
+      const items = getItems()
+        .map(i => i.ref)
+        .filter(i => i.dataset['disabled'] !== '');
+      const activeItem = items.find(item => item.getAttribute('data-active') === '');
+      const currentItem = items.find(item => item.id === currentTabStopId.value);
+      const candidateItems = [activeItem, currentItem, ...items].filter(
+        Boolean,
+      ) as HTMLElement[];
+      focusFirst(candidateItems, preventScrollOnEntryFocus);
+    }
+  }
+  isClickFocus.value = false;
+}
+
+function handleMouseUp(): void {
+  setTimeout(() => {
+    isClickFocus.value = false;
+  }, 1);
+}
+
+defineExpose({ getItems });
+
+RovingFocusGroupCtx.provide({
+  loop: loopRef,
+  dir: dirRef,
+  orientation: orientationRef,
+  currentTabStopId,
+  onItemFocus: (tabStopId: string) => {
+    currentTabStopId.value = tabStopId;
+  },
+  onItemShiftTab: () => {
+    isTabbingBackOut.value = true;
+  },
+  onFocusableItemAdd: () => {
+    focusableItemsCount.value++;
+  },
+  onFocusableItemRemove: () => {
+    focusableItemsCount.value--;
+  },
+});
+</script>
+
+<template>
+  <CollectionSlot>
+    <Primitive
+      :tabindex="isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0"
+      :data-orientation="orientation"
+      :as="as"
+      :dir="dirRef"
+      style="outline: none"
+      @mousedown="isClickFocus = true"
+      @mouseup="handleMouseUp"
+      @focus="handleFocus"
+      @blur="isTabbingBackOut = false"
+    >
+      <slot />
+    </Primitive>
+  </CollectionSlot>
+</template>
diff --git a/vue/primitives/src/roving-focus/RovingFocusItem.vue b/vue/primitives/src/roving-focus/RovingFocusItem.vue
new file mode 100644
index 0000000..c014934
--- /dev/null
+++ b/vue/primitives/src/roving-focus/RovingFocusItem.vue
@@ -0,0 +1,116 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface RovingFocusItemProps extends PrimitiveProps {
+  /** Unique tab-stop id. Auto-generated via config `useId` when omitted. */
+  tabStopId?: string;
+  /**
+   * Whether this item is focusable.
+   * @default true
+   */
+  focusable?: boolean;
+  /** Marks the item as active (current selection). */
+  active?: boolean;
+  /**
+   * Allow `Shift+Arrow` for navigation.
+   * @default false
+   */
+  allowShiftKey?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted } from 'vue';
+import { focusFirst, getFocusIntent, wrapArray } from './utils';
+import { Primitive } from '../primitive';
+import { RovingFocusGroupCtx } from './RovingFocusGroup.vue';
+import { useCollectionInjector } from '../collection';
+import { useId } from '../config-provider';
+
+const {
+  tabStopId,
+  focusable = true,
+  active = false,
+  allowShiftKey = false,
+  as = 'span',
+} = defineProps<RovingFocusItemProps>();
+
+const context = RovingFocusGroupCtx.inject();
+// `useId` returns a `ComputedRef<string>` in this repo — unwrap where needed.
+const autoId = useId();
+const id = computed(() => tabStopId ?? autoId.value);
+const isCurrentTabStop = computed(() => context.currentTabStopId.value === id.value);
+
+const { getItems, CollectionItem } = useCollectionInjector();
+
+onMounted(() => {
+  if (focusable) context.onFocusableItemAdd();
+});
+
+onUnmounted(() => {
+  if (focusable) context.onFocusableItemRemove();
+});
+
+function handleKeydown(event: KeyboardEvent): void {
+  if (event.key === 'Tab' && event.shiftKey) {
+    context.onItemShiftTab();
+    return;
+  }
+
+  if (event.target !== event.currentTarget) return;
+
+  const focusIntent = getFocusIntent(event, context.orientation.value, context.dir.value);
+  if (focusIntent === undefined) return;
+
+  if (
+    event.metaKey
+    || event.ctrlKey
+    || event.altKey
+    || (allowShiftKey ? false : event.shiftKey)
+  )
+    return;
+
+  event.preventDefault();
+
+  let candidateNodes = getItems()
+    .map(i => i.ref)
+    .filter(i => i.dataset['disabled'] !== '');
+
+  if (focusIntent === 'last') {
+    candidateNodes.reverse();
+  }
+  else if (focusIntent === 'prev' || focusIntent === 'next') {
+    if (focusIntent === 'prev') candidateNodes.reverse();
+
+    const currentIndex = candidateNodes.indexOf(event.currentTarget as HTMLElement);
+
+    candidateNodes = context.loop.value
+      ? wrapArray(candidateNodes, currentIndex + 1)
+      : candidateNodes.slice(currentIndex + 1);
+  }
+
+  nextTick(() => focusFirst(candidateNodes));
+}
+
+function handleMousedown(event: MouseEvent): void {
+  if (!focusable) event.preventDefault();
+  else context.onItemFocus(id.value);
+}
+</script>
+
+<template>
+  <CollectionItem>
+    <Primitive
+      :tabindex="isCurrentTabStop ? 0 : -1"
+      :data-orientation="context.orientation.value"
+      :data-active="active ? '' : undefined"
+      :data-disabled="!focusable ? '' : undefined"
+      :as="as"
+      @mousedown="handleMousedown"
+      @focus="context.onItemFocus(id)"
+      @keydown="handleKeydown"
+    >
+      <slot />
+    </Primitive>
+  </CollectionItem>
+</template>
diff --git a/vue/primitives/src/roving-focus/index.ts b/vue/primitives/src/roving-focus/index.ts
new file mode 100644
index 0000000..ee2ec50
--- /dev/null
+++ b/vue/primitives/src/roving-focus/index.ts
@@ -0,0 +1,20 @@
+export { default as RovingFocusGroup, RovingFocusGroupCtx } from './RovingFocusGroup.vue';
+export { default as RovingFocusItem } from './RovingFocusItem.vue';
+
+export type {
+  RovingFocusGroupProps,
+  RovingFocusGroupEmits,
+  RovingFocusGroupContext,
+} from './RovingFocusGroup.vue';
+export type { RovingFocusItemProps } from './RovingFocusItem.vue';
+
+export {
+  ENTRY_FOCUS,
+  EVENT_OPTIONS,
+  focusFirst,
+  getFocusIntent,
+  getDirectionAwareKey,
+  wrapArray,
+  type FocusIntent,
+  type Orientation,
+} from './utils';
diff --git a/vue/primitives/src/roving-focus/utils.ts b/vue/primitives/src/roving-focus/utils.ts
new file mode 100644
index 0000000..18f052a
--- /dev/null
+++ b/vue/primitives/src/roving-focus/utils.ts
@@ -0,0 +1,78 @@
+import type { Direction } from '../config-provider';
+import { getActiveElement } from '@robonen/platform/browsers';
+
+export type Orientation = 'horizontal' | 'vertical';
+
+/** Custom event dispatched when focus enters a `RovingFocusGroup` for the first time. */
+export const ENTRY_FOCUS = 'rovingFocusGroup.onEntryFocus';
+
+/** Event options for `ENTRY_FOCUS` — non-bubbling, cancelable. */
+export const EVENT_OPTIONS = { bubbles: false, cancelable: true } as const;
+
+export type FocusIntent = 'first' | 'last' | 'prev' | 'next';
+
+const MAP_KEY_TO_FOCUS_INTENT: Record<string, FocusIntent> = {
+  ArrowLeft: 'prev',
+  ArrowUp: 'prev',
+  ArrowRight: 'next',
+  ArrowDown: 'next',
+  PageUp: 'first',
+  Home: 'first',
+  PageDown: 'last',
+  End: 'last',
+};
+
+/**
+ * For RTL: swaps `ArrowLeft`/`ArrowRight`. Leaves other keys untouched.
+ */
+export function getDirectionAwareKey(key: string, dir?: Direction): string {
+  if (dir !== 'rtl') return key;
+  if (key === 'ArrowLeft') return 'ArrowRight';
+  if (key === 'ArrowRight') return 'ArrowLeft';
+  return key;
+}
+
+/**
+ * Resolves a `FocusIntent` from a keyboard event, respecting `orientation`
+ * and `dir`. Returns `undefined` if the key has no mapping or conflicts with
+ * the orientation (e.g. `ArrowUp` in a horizontal group).
+ */
+export function getFocusIntent(
+  event: KeyboardEvent,
+  orientation?: Orientation,
+  dir?: Direction,
+): FocusIntent | undefined {
+  const key = getDirectionAwareKey(event.key, dir);
+
+  if (orientation === 'vertical' && (key === 'ArrowLeft' || key === 'ArrowRight'))
+    return undefined;
+  if (orientation === 'horizontal' && (key === 'ArrowUp' || key === 'ArrowDown'))
+    return undefined;
+
+  return MAP_KEY_TO_FOCUS_INTENT[key];
+}
+
+/**
+ * Focuses the first element from `candidates` that actually accepts focus.
+ * No-op if the currently focused element is already a candidate.
+ */
+export function focusFirst(candidates: HTMLElement[], preventScroll = false): void {
+  const previouslyFocused = getActiveElement();
+  for (const candidate of candidates) {
+    if (candidate === previouslyFocused) return;
+    candidate.focus({ preventScroll });
+    if (getActiveElement() !== previouslyFocused) return;
+  }
+}
+
+/**
+ * Rotates `array` so that the element at `startIndex` becomes first.
+ *
+ * @example
+ * wrapArray(['a','b','c','d'], 2) // => ['c','d','a','b']
+ */
+export function wrapArray<T>(array: T[], startIndex: number): T[] {
+  const len = array.length;
+  if (len === 0) return array;
+  return Array.from({ length: len }, (_, i) => array[(startIndex + i) % len]!);
+}
diff --git a/vue/primitives/src/scroll-area/ScrollAreaCorner.vue b/vue/primitives/src/scroll-area/ScrollAreaCorner.vue
new file mode 100644
index 0000000..019341d
--- /dev/null
+++ b/vue/primitives/src/scroll-area/ScrollAreaCorner.vue
@@ -0,0 +1,78 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export type ScrollAreaCornerProps = PrimitiveProps;
+</script>
+
+<script setup lang="ts">
+import { computed, onMounted, onScopeDispose, ref, watch } from 'vue';
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { useScrollAreaRootContext } from './context';
+
+defineOptions({ inheritAttrs: false });
+
+defineProps<ScrollAreaCornerProps>();
+
+const ctx = useScrollAreaRootContext();
+const { forwardRef } = useForwardExpose();
+
+const width = ref(0);
+const height = ref(0);
+
+const hasSize = computed(() => width.value > 0 && height.value > 0);
+const hasBoth = computed(() => ctx.scrollbarXEnabled.value && ctx.scrollbarYEnabled.value);
+
+function measure() {
+  const x = ctx.scrollbarX.value;
+  const y = ctx.scrollbarY.value;
+  width.value = y ? y.offsetWidth : 0;
+  height.value = x ? x.offsetHeight : 0;
+  ctx.onCornerWidthChange(width.value);
+  ctx.onCornerHeightChange(height.value);
+}
+
+let xObs: ResizeObserver | null = null;
+let yObs: ResizeObserver | null = null;
+
+function attach() {
+  xObs?.disconnect();
+  yObs?.disconnect();
+  const x = ctx.scrollbarX.value;
+  const y = ctx.scrollbarY.value;
+  if (x) {
+    xObs = new ResizeObserver(measure);
+    xObs.observe(x);
+  }
+  if (y) {
+    yObs = new ResizeObserver(measure);
+    yObs.observe(y);
+  }
+  measure();
+}
+
+onMounted(attach);
+watch([() => ctx.scrollbarX.value, () => ctx.scrollbarY.value], attach);
+onScopeDispose(() => {
+  xObs?.disconnect();
+  yObs?.disconnect();
+});
+</script>
+
+<template>
+  <Primitive
+    v-if="hasBoth && hasSize"
+    :ref="forwardRef"
+    :as="as ?? 'div'"
+    :style="{
+      width: `${width}px`,
+      height: `${height}px`,
+      position: 'absolute',
+      right: 0,
+      bottom: 0,
+    }"
+    v-bind="$attrs"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/scroll-area/ScrollAreaRoot.vue b/vue/primitives/src/scroll-area/ScrollAreaRoot.vue
new file mode 100644
index 0000000..2ff0d62
--- /dev/null
+++ b/vue/primitives/src/scroll-area/ScrollAreaRoot.vue
@@ -0,0 +1,97 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+import type { ScrollAreaType } from './types';
+
+export interface ScrollAreaRootProps extends PrimitiveProps {
+  /**
+   * Visibility behaviour for scrollbars.
+   * - `auto`: visible whenever content overflows.
+   * - `always`: always visible.
+   * - `scroll`: visible while the user is scrolling, then hides after `scrollHideDelay`.
+   * - `hover`: visible while the pointer is over the root, then hides after `scrollHideDelay`.
+   * @default 'hover'
+   */
+  type?: ScrollAreaType;
+  /** Reading direction. Inherits from `ConfigProvider` when omitted. */
+  dir?: 'ltr' | 'rtl';
+  /**
+   * For `type='scroll'` and `type='hover'`, the time in ms before scrollbars hide
+   * after the user stops interacting.
+   * @default 600
+   */
+  scrollHideDelay?: number;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, toRef } from 'vue';
+import { Primitive } from '../primitive';
+import { provideScrollAreaRootContext } from './context';
+import { useConfig, useId } from '../config-provider';
+import { useForwardExpose } from '@robonen/vue';
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<ScrollAreaRootProps>(), {
+  type: 'hover',
+  scrollHideDelay: 600,
+});
+
+const config = useConfig();
+
+const viewport = ref<HTMLElement | null>(null);
+const content = ref<HTMLElement | null>(null);
+const scrollbarX = ref<HTMLElement | null>(null);
+const scrollbarY = ref<HTMLElement | null>(null);
+const scrollbarXEnabled = ref(false);
+const scrollbarYEnabled = ref(false);
+const cornerWidth = ref(0);
+const cornerHeight = ref(0);
+const viewportId = useId(undefined, 'scroll-area-viewport');
+
+const dir = computed(() => props.dir ?? config.dir.value);
+
+const { forwardRef, currentElement: scrollArea } = useForwardExpose();
+
+provideScrollAreaRootContext({
+  type: toRef(props, 'type'),
+  dir,
+  scrollHideDelay: toRef(props, 'scrollHideDelay'),
+  scrollArea,
+  viewport,
+  content,
+  scrollbarX,
+  scrollbarY,
+  scrollbarXEnabled,
+  scrollbarYEnabled,
+  cornerWidth,
+  cornerHeight,
+  viewportId,
+  onScrollbarXEnabledChange: (v) => { scrollbarXEnabled.value = v; },
+  onScrollbarYEnabledChange: (v) => { scrollbarYEnabled.value = v; },
+  onCornerWidthChange: (n) => { cornerWidth.value = n; },
+  onCornerHeightChange: (n) => { cornerHeight.value = n; },
+});
+
+defineExpose({
+  viewport,
+  scrollTop: () => viewport.value?.scrollTo({ top: 0 }),
+  scrollTopLeft: () => viewport.value?.scrollTo({ top: 0, left: 0 }),
+});
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :dir="dir"
+    :style="{
+      position: 'relative',
+      '--scroll-area-corner-width': `${cornerWidth}px`,
+      '--scroll-area-corner-height': `${cornerHeight}px`,
+    }"
+    v-bind="$attrs"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/scroll-area/ScrollAreaScrollbar.vue b/vue/primitives/src/scroll-area/ScrollAreaScrollbar.vue
new file mode 100644
index 0000000..442b2d8
--- /dev/null
+++ b/vue/primitives/src/scroll-area/ScrollAreaScrollbar.vue
@@ -0,0 +1,81 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ScrollAreaScrollbarProps extends PrimitiveProps {
+  /** @default 'vertical' */
+  orientation?: 'horizontal' | 'vertical';
+  /** Keep mounted regardless of visibility state. */
+  forceMount?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, watch } from 'vue';
+import ScrollAreaScrollbarAuto from './ScrollAreaScrollbarAuto.vue';
+import ScrollAreaScrollbarHover from './ScrollAreaScrollbarHover.vue';
+import ScrollAreaScrollbarScroll from './ScrollAreaScrollbarScroll.vue';
+import ScrollAreaScrollbarVisible from './ScrollAreaScrollbarVisible.vue';
+import { useScrollAreaRootContext } from './context';
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<ScrollAreaScrollbarProps>(), {
+  orientation: 'vertical',
+});
+
+const ctx = useScrollAreaRootContext();
+const isHorizontal = computed(() => props.orientation === 'horizontal');
+
+watch(isHorizontal, (h) => {
+  if (h)
+    ctx.onScrollbarXEnabledChange(true);
+  else
+    ctx.onScrollbarYEnabledChange(true);
+}, { immediate: true });
+
+onBeforeUnmount(() => {
+  if (isHorizontal.value)
+    ctx.onScrollbarXEnabledChange(false);
+  else
+    ctx.onScrollbarYEnabledChange(false);
+});
+</script>
+
+<template>
+  <ScrollAreaScrollbarHover
+    v-if="ctx.type.value === 'hover'"
+    v-bind="$attrs"
+    :orientation="orientation"
+    :force-mount="forceMount"
+    :as="as"
+  >
+    <slot />
+  </ScrollAreaScrollbarHover>
+  <ScrollAreaScrollbarScroll
+    v-else-if="ctx.type.value === 'scroll'"
+    v-bind="$attrs"
+    :orientation="orientation"
+    :force-mount="forceMount"
+    :as="as"
+  >
+    <slot />
+  </ScrollAreaScrollbarScroll>
+  <ScrollAreaScrollbarAuto
+    v-else-if="ctx.type.value === 'auto'"
+    v-bind="$attrs"
+    :orientation="orientation"
+    :force-mount="forceMount"
+    :as="as"
+  >
+    <slot />
+  </ScrollAreaScrollbarAuto>
+  <ScrollAreaScrollbarVisible
+    v-else
+    v-bind="$attrs"
+    :orientation="orientation"
+    :as="as"
+    data-state="visible"
+  >
+    <slot />
+  </ScrollAreaScrollbarVisible>
+</template>
diff --git a/vue/primitives/src/scroll-area/ScrollAreaScrollbarAuto.vue b/vue/primitives/src/scroll-area/ScrollAreaScrollbarAuto.vue
new file mode 100644
index 0000000..21ac6c0
--- /dev/null
+++ b/vue/primitives/src/scroll-area/ScrollAreaScrollbarAuto.vue
@@ -0,0 +1,80 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ScrollAreaScrollbarAutoProps extends PrimitiveProps {
+  orientation?: 'horizontal' | 'vertical';
+  forceMount?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onMounted, onScopeDispose, ref, watch } from 'vue';
+import { Presence } from '../presence';
+import ScrollAreaScrollbarVisible from './ScrollAreaScrollbarVisible.vue';
+import { debounceCallback } from './utils';
+import { useScrollAreaRootContext } from './context';
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<ScrollAreaScrollbarAutoProps>(), {
+  orientation: 'vertical',
+});
+
+const ctx = useScrollAreaRootContext();
+const visible = ref(false);
+const isHorizontal = computed(() => props.orientation === 'horizontal');
+
+const handleResize = debounceCallback(() => {
+  const vp = ctx.viewport.value;
+  if (!vp)
+    return;
+  const overflowX = vp.offsetWidth < vp.scrollWidth;
+  const overflowY = vp.offsetHeight < vp.scrollHeight;
+  visible.value = isHorizontal.value ? overflowX : overflowY;
+}, 10);
+
+let viewportObserver: ResizeObserver | null = null;
+let contentObserver: ResizeObserver | null = null;
+
+function attach() {
+  detach();
+  const vp = ctx.viewport.value;
+  const co = ctx.content.value;
+  if (vp) {
+    viewportObserver = new ResizeObserver(handleResize);
+    viewportObserver.observe(vp);
+  }
+  if (co) {
+    contentObserver = new ResizeObserver(handleResize);
+    contentObserver.observe(co);
+  }
+  handleResize();
+}
+
+function detach() {
+  viewportObserver?.disconnect();
+  viewportObserver = null;
+  contentObserver?.disconnect();
+  contentObserver = null;
+}
+
+onMounted(attach);
+watch([() => ctx.viewport.value, () => ctx.content.value], attach);
+onScopeDispose(() => {
+  handleResize.cancel();
+  detach();
+});
+</script>
+
+<template>
+  <Presence :present="forceMount || visible">
+    <ScrollAreaScrollbarVisible
+      v-bind="$attrs"
+      :orientation="orientation"
+      :as="as"
+      :data-state="visible ? 'visible' : 'hidden'"
+    >
+      <slot />
+    </ScrollAreaScrollbarVisible>
+  </Presence>
+</template>
diff --git a/vue/primitives/src/scroll-area/ScrollAreaScrollbarHover.vue b/vue/primitives/src/scroll-area/ScrollAreaScrollbarHover.vue
new file mode 100644
index 0000000..6b22000
--- /dev/null
+++ b/vue/primitives/src/scroll-area/ScrollAreaScrollbarHover.vue
@@ -0,0 +1,80 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ScrollAreaScrollbarHoverProps extends PrimitiveProps {
+  orientation?: 'horizontal' | 'vertical';
+  forceMount?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { onScopeDispose, ref, watch } from 'vue';
+import { Presence } from '../presence';
+import ScrollAreaScrollbarAuto from './ScrollAreaScrollbarAuto.vue';
+import { useScrollAreaRootContext } from './context';
+
+defineOptions({ inheritAttrs: false });
+
+withDefaults(defineProps<ScrollAreaScrollbarHoverProps>(), {
+  orientation: 'vertical',
+});
+
+const ctx = useScrollAreaRootContext();
+const visible = ref(false);
+let hideTimer: ReturnType<typeof setTimeout> | null = null;
+let scrollArea: HTMLElement | null = null;
+
+function clearTimer() {
+  if (hideTimer !== null) {
+    globalThis.clearTimeout(hideTimer);
+    hideTimer = null;
+  }
+}
+
+function onEnter() {
+  clearTimer();
+  visible.value = true;
+}
+function onLeave() {
+  clearTimer();
+  hideTimer = globalThis.setTimeout(() => {
+    visible.value = false;
+  }, ctx.scrollHideDelay.value);
+}
+
+function attach(el: HTMLElement | null) {
+  detach();
+  if (!el)
+    return;
+  scrollArea = el;
+  el.addEventListener('pointerenter', onEnter);
+  el.addEventListener('pointerleave', onLeave);
+}
+function detach() {
+  if (!scrollArea)
+    return;
+  scrollArea.removeEventListener('pointerenter', onEnter);
+  scrollArea.removeEventListener('pointerleave', onLeave);
+  scrollArea = null;
+}
+
+watch(() => ctx.scrollArea.value, attach, { immediate: true });
+onScopeDispose(() => {
+  clearTimer();
+  detach();
+});
+</script>
+
+<template>
+  <Presence :present="forceMount || visible">
+    <ScrollAreaScrollbarAuto
+      v-bind="$attrs"
+      :orientation="orientation"
+      :as="as"
+      :data-state="visible ? 'visible' : 'hidden'"
+      force-mount
+    >
+      <slot />
+    </ScrollAreaScrollbarAuto>
+  </Presence>
+</template>
diff --git a/vue/primitives/src/scroll-area/ScrollAreaScrollbarImpl.vue b/vue/primitives/src/scroll-area/ScrollAreaScrollbarImpl.vue
new file mode 100644
index 0000000..8f0748d
--- /dev/null
+++ b/vue/primitives/src/scroll-area/ScrollAreaScrollbarImpl.vue
@@ -0,0 +1,246 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+import type { ScrollAreaSizes } from './types';
+
+export interface ScrollAreaScrollbarImplProps extends PrimitiveProps {
+  orientation: 'horizontal' | 'vertical';
+  sizes: ScrollAreaSizes;
+  hasThumb: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onMounted, onScopeDispose, ref, watch } from 'vue';
+import { Primitive } from '../primitive';
+import { toInt } from './utils';
+import { useForwardExpose } from '@robonen/vue';
+import { useScrollAreaRootContext } from './context';
+
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps<ScrollAreaScrollbarImplProps>();
+const emit = defineEmits<{
+  sizesChange: [sizes: ScrollAreaSizes];
+  wheelScroll: [event: WheelEvent, maxScroll: number];
+  dragScroll: [pointerPos: number];
+  thumbPositionChange: [];
+  registerScrollbar: [el: HTMLElement | null];
+}>();
+
+const ctx = useScrollAreaRootContext();
+const { forwardRef, currentElement } = useForwardExpose();
+
+const isHorizontal = computed(() => props.orientation === 'horizontal');
+const rectRef = ref<DOMRect | null>(null);
+const prevWebkitUserSelect = ref('');
+const prevPointerEvents = ref('');
+
+/** Live viewport scroll position along this scrollbar's axis. */
+const scrollPos = ref(0);
+
+const maxScroll = computed(() =>
+  Math.max(0, props.sizes.content - props.sizes.viewport),
+);
+
+const ariaValueNow = computed(() => {
+  if (maxScroll.value <= 0) return 0;
+  const pct = (scrollPos.value / maxScroll.value) * 100;
+  return Math.round(Math.min(100, Math.max(0, pct)));
+});
+
+/** Scrollbar is interactive only when content actually overflows. */
+const isInteractive = computed(() => props.hasThumb && maxScroll.value > 0);
+
+function updateScrollPos() {
+  const vp = ctx.viewport.value;
+  if (!vp) return;
+  scrollPos.value = isHorizontal.value ? vp.scrollLeft : vp.scrollTop;
+}
+
+function getPointerPosition(event: PointerEvent): number {
+  const rect = rectRef.value;
+  if (!rect)
+    return 0;
+  return isHorizontal.value ? event.clientX - rect.left : event.clientY - rect.top;
+}
+
+function onPointerDown(event: PointerEvent) {
+  if (event.button !== 0)
+    return;
+  const target = event.target as HTMLElement;
+  target.setPointerCapture(event.pointerId);
+  rectRef.value = currentElement.value?.getBoundingClientRect() ?? null;
+  prevWebkitUserSelect.value = document.body.style.webkitUserSelect;
+  document.body.style.webkitUserSelect = 'none';
+  if (ctx.viewport.value) {
+    prevPointerEvents.value = ctx.viewport.value.style.pointerEvents;
+    ctx.viewport.value.style.pointerEvents = 'none';
+  }
+  emit('dragScroll', getPointerPosition(event));
+}
+
+function onPointerMove(event: PointerEvent) {
+  emit('dragScroll', getPointerPosition(event));
+}
+
+function onPointerUp(event: PointerEvent) {
+  const target = event.target as HTMLElement;
+  if (target.hasPointerCapture(event.pointerId))
+    target.releasePointerCapture(event.pointerId);
+  document.body.style.webkitUserSelect = prevWebkitUserSelect.value;
+  if (ctx.viewport.value)
+    ctx.viewport.value.style.pointerEvents = prevPointerEvents.value;
+  rectRef.value = null;
+}
+
+function onWheel(event: WheelEvent) {
+  emit('wheelScroll', event, maxScroll.value);
+}
+
+/**
+ * WAI-ARIA scrollbar pattern — Arrow ±5% of the viewport size, PageUp/Down
+ * jump a full viewport, Home/End to the extremes. In RTL the horizontal
+ * arrow keys are visually reversed.
+ */
+function onKeyDown(event: KeyboardEvent) {
+  if (!isInteractive.value) return;
+  const vp = ctx.viewport.value;
+  if (!vp) return;
+
+  const step = Math.max(1, Math.round(props.sizes.viewport * 0.05));
+  const page = Math.max(step, props.sizes.viewport);
+  const dir = ctx.dir.value;
+
+  let delta = 0;
+  let absolute: number | null = null;
+
+  if (isHorizontal.value) {
+    const forwardKey = dir === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
+    const backwardKey = dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
+    if (event.key === forwardKey) delta = step;
+    else if (event.key === backwardKey) delta = -step;
+    else if (event.key === 'PageDown' || event.key === 'PageUp')
+      delta = event.key === 'PageDown' ? page : -page;
+    else if (event.key === 'Home') absolute = 0;
+    else if (event.key === 'End') absolute = maxScroll.value;
+    else return;
+  }
+  else if (event.key === 'ArrowDown') delta = step;
+  else if (event.key === 'ArrowUp') delta = -step;
+  else if (event.key === 'PageDown') delta = page;
+  else if (event.key === 'PageUp') delta = -page;
+  else if (event.key === 'Home') absolute = 0;
+  else if (event.key === 'End') absolute = maxScroll.value;
+  else return;
+
+  event.preventDefault();
+  const current = isHorizontal.value ? vp.scrollLeft : vp.scrollTop;
+  const next = absolute !== null
+    ? absolute
+    : Math.max(0, Math.min(maxScroll.value, current + delta));
+  if (isHorizontal.value) vp.scrollLeft = next;
+  else vp.scrollTop = next;
+}
+
+function measure() {
+  const sb = currentElement.value;
+  const vp = ctx.viewport.value;
+  const co = ctx.content.value;
+  if (!sb || !vp)
+    return;
+  const cs = globalThis.getComputedStyle(sb);
+  emit('sizesChange', {
+    content: co ? (isHorizontal.value ? co.scrollWidth : co.scrollHeight) : (isHorizontal.value ? vp.scrollWidth : vp.scrollHeight),
+    viewport: isHorizontal.value ? vp.offsetWidth : vp.offsetHeight,
+    scrollbar: {
+      size: isHorizontal.value ? sb.clientWidth : sb.clientHeight,
+      paddingStart: isHorizontal.value ? toInt(cs.paddingLeft) : toInt(cs.paddingTop),
+      paddingEnd: isHorizontal.value ? toInt(cs.paddingRight) : toInt(cs.paddingBottom),
+    },
+  });
+}
+
+let sbObs: ResizeObserver | null = null;
+let vpObs: ResizeObserver | null = null;
+let coObs: ResizeObserver | null = null;
+
+function attach() {
+  detach();
+  if (currentElement.value) {
+    sbObs = new ResizeObserver(measure);
+    sbObs.observe(currentElement.value);
+  }
+  if (ctx.viewport.value) {
+    vpObs = new ResizeObserver(measure);
+    vpObs.observe(ctx.viewport.value);
+  }
+  if (ctx.content.value) {
+    coObs = new ResizeObserver(measure);
+    coObs.observe(ctx.content.value);
+  }
+  measure();
+  updateScrollPos();
+  emit('thumbPositionChange');
+}
+
+function detach() {
+  sbObs?.disconnect();
+  sbObs = null;
+  vpObs?.disconnect();
+  vpObs = null;
+  coObs?.disconnect();
+  coObs = null;
+}
+
+onMounted(() => {
+  emit('registerScrollbar', currentElement.value ?? null);
+  attach();
+});
+
+watch([() => ctx.viewport.value, () => ctx.content.value, currentElement], attach);
+
+function onViewportScroll() {
+  updateScrollPos();
+  emit('thumbPositionChange');
+}
+
+watch(() => ctx.viewport.value, (vp, prev) => {
+  prev?.removeEventListener('scroll', onViewportScroll);
+  vp?.addEventListener('scroll', onViewportScroll);
+}, { immediate: true });
+
+onScopeDispose(() => {
+  detach();
+  ctx.viewport.value?.removeEventListener('scroll', onViewportScroll);
+  emit('registerScrollbar', null);
+});
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as ?? 'div'"
+    role="scrollbar"
+    :aria-orientation="orientation"
+    :aria-controls="ctx.viewportId.value"
+    aria-valuemin="0"
+    aria-valuemax="100"
+    :aria-valuenow="ariaValueNow"
+    :tabindex="isInteractive ? 0 : -1"
+    :aria-disabled="isInteractive ? undefined : true"
+    :data-orientation="orientation"
+    :style="{
+      position: 'absolute',
+      ...(isHorizontal
+        ? { bottom: 0, left: 0, right: 'var(--scroll-area-corner-width)' }
+        : { top: 0, right: 0, bottom: 'var(--scroll-area-corner-height)' }),
+    }"
+    @pointerdown="onPointerDown"
+    @pointermove="onPointerMove"
+    @pointerup="onPointerUp"
+    @wheel.passive="onWheel"
+    @keydown="onKeyDown"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/scroll-area/ScrollAreaScrollbarScroll.vue b/vue/primitives/src/scroll-area/ScrollAreaScrollbarScroll.vue
new file mode 100644
index 0000000..f84bebd
--- /dev/null
+++ b/vue/primitives/src/scroll-area/ScrollAreaScrollbarScroll.vue
@@ -0,0 +1,88 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ScrollAreaScrollbarScrollProps extends PrimitiveProps {
+  orientation?: 'horizontal' | 'vertical';
+  forceMount?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onMounted, onScopeDispose, ref, watch } from 'vue';
+import { Presence } from '../presence';
+import { useScrollAreaRootContext } from './context';
+import ScrollAreaScrollbarVisible from './ScrollAreaScrollbarVisible.vue';
+import { addUnlinkedScrollListener, debounceCallback } from './utils';
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<ScrollAreaScrollbarScrollProps>(), {
+  orientation: 'vertical',
+});
+
+const ctx = useScrollAreaRootContext();
+const isHorizontal = computed(() => props.orientation === 'horizontal');
+const state = ref<'hidden' | 'scrolling' | 'interacting' | 'idle'>('hidden');
+
+const debouncedScrollEnd = debounceCallback(() => {
+  state.value = 'idle';
+}, 100);
+
+const debouncedHide = debounceCallback(() => {
+  state.value = 'hidden';
+}, ctx.scrollHideDelay.value);
+
+watch(state, (s, prev) => {
+  if (s === 'idle')
+    debouncedHide();
+  if (s !== 'idle' && prev === 'idle')
+    debouncedHide.cancel();
+});
+
+let last = { left: 0, top: 0 };
+let stop: (() => void) | null = null;
+
+function attach() {
+  stop?.();
+  const vp = ctx.viewport.value;
+  if (!vp)
+    return;
+  last = { left: vp.scrollLeft, top: vp.scrollTop };
+  stop = addUnlinkedScrollListener(vp, () => {
+    const next = { left: vp.scrollLeft, top: vp.scrollTop };
+    const horiz = last.left !== next.left;
+    const vert = last.top !== next.top;
+    const matches = isHorizontal.value ? horiz : vert;
+    if (matches) {
+      state.value = 'scrolling';
+      debouncedScrollEnd();
+    }
+    last = next;
+  });
+}
+
+onMounted(attach);
+watch(() => ctx.viewport.value, attach);
+onScopeDispose(() => {
+  stop?.();
+  debouncedScrollEnd.cancel();
+  debouncedHide.cancel();
+});
+
+const isVisible = computed(() => state.value !== 'hidden');
+</script>
+
+<template>
+  <Presence :present="forceMount || isVisible">
+    <ScrollAreaScrollbarVisible
+      v-bind="$attrs"
+      :orientation="orientation"
+      :as="as"
+      :data-state="isVisible ? 'visible' : 'hidden'"
+      @pointerenter="state = 'interacting'"
+      @pointerleave="state = 'idle'"
+    >
+      <slot />
+    </ScrollAreaScrollbarVisible>
+  </Presence>
+</template>
diff --git a/vue/primitives/src/scroll-area/ScrollAreaScrollbarVisible.vue b/vue/primitives/src/scroll-area/ScrollAreaScrollbarVisible.vue
new file mode 100644
index 0000000..1655a61
--- /dev/null
+++ b/vue/primitives/src/scroll-area/ScrollAreaScrollbarVisible.vue
@@ -0,0 +1,117 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+</script>
+
+<script setup lang="ts">
+import type { ScrollAreaSizes } from './types';
+import { computed, ref } from 'vue';
+import { provideScrollAreaScrollbarContext, useScrollAreaRootContext } from './context';
+import ScrollAreaScrollbarImpl from './ScrollAreaScrollbarImpl.vue';
+import { getScrollPositionFromPointer, getThumbOffsetFromScroll, getThumbRatio, isScrollingWithinScrollbarBounds } from './utils';
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<PrimitiveProps & { orientation?: 'horizontal' | 'vertical' }>(), {
+  orientation: 'vertical',
+});
+
+const ctx = useScrollAreaRootContext();
+const sizes = ref<ScrollAreaSizes>({
+  content: 0,
+  viewport: 0,
+  scrollbar: { size: 0, paddingStart: 0, paddingEnd: 0 },
+});
+
+const isHorizontal = computed(() => props.orientation === 'horizontal');
+const hasThumb = computed(() => {
+  const r = getThumbRatio(sizes.value.viewport, sizes.value.content);
+  return r > 0 && r < 1;
+});
+
+const thumbEl = ref<HTMLElement | null>(null);
+const scrollbarEl = ref<HTMLElement | null>(null);
+const pointerOffset = ref(0);
+
+function onSizesChange(s: ScrollAreaSizes) {
+  sizes.value = s;
+}
+
+function onThumbPointerDown(point: { x: number; y: number }) {
+  pointerOffset.value = isHorizontal.value ? point.x : point.y;
+}
+function onThumbPointerUp() {
+  pointerOffset.value = 0;
+}
+
+function onWheelScroll(event: WheelEvent, maxScroll: number) {
+  const vp = ctx.viewport.value;
+  if (!vp)
+    return;
+  if (isHorizontal.value) {
+    const next = vp.scrollLeft + event.deltaY;
+    vp.scrollLeft = next;
+    if (isScrollingWithinScrollbarBounds(next, maxScroll))
+      event.preventDefault();
+  }
+  else {
+    const next = vp.scrollTop + event.deltaY;
+    vp.scrollTop = next;
+    if (isScrollingWithinScrollbarBounds(next, maxScroll))
+      event.preventDefault();
+  }
+}
+
+function onDragScroll(pointerPos: number) {
+  const vp = ctx.viewport.value;
+  if (!vp)
+    return;
+  if (isHorizontal.value) {
+    vp.scrollLeft = getScrollPositionFromPointer(pointerPos, pointerOffset.value, sizes.value, ctx.dir.value);
+  }
+  else {
+    vp.scrollTop = getScrollPositionFromPointer(pointerPos, pointerOffset.value, sizes.value);
+  }
+}
+
+function onThumbPositionChange() {
+  const vp = ctx.viewport.value;
+  const thumb = thumbEl.value;
+  if (!vp || !thumb)
+    return;
+  if (isHorizontal.value) {
+    const offset = getThumbOffsetFromScroll(vp.scrollLeft, sizes.value, ctx.dir.value);
+    thumb.style.transform = `translate3d(${offset}px, 0, 0)`;
+  }
+  else {
+    const offset = getThumbOffsetFromScroll(vp.scrollTop, sizes.value);
+    thumb.style.transform = `translate3d(0, ${offset}px, 0)`;
+  }
+}
+
+provideScrollAreaScrollbarContext({
+  orientation: props.orientation,
+  hasThumb,
+  scrollbar: scrollbarEl,
+  onThumbChange: (el) => { thumbEl.value = el; },
+  onThumbPointerUp,
+  onThumbPointerDown,
+  onThumbPositionChange,
+});
+</script>
+
+<template>
+  <ScrollAreaScrollbarImpl
+    v-bind="$attrs"
+    :orientation="orientation"
+    :as="as"
+    :sizes="sizes"
+    :has-thumb="hasThumb"
+    @sizes-change="onSizesChange"
+    @wheel-scroll="onWheelScroll"
+    @drag-scroll="onDragScroll"
+    @thumb-position-change="onThumbPositionChange"
+    @register-scrollbar="(el) => { scrollbarEl = el; }"
+  >
+    <slot />
+  </ScrollAreaScrollbarImpl>
+</template>
diff --git a/vue/primitives/src/scroll-area/ScrollAreaThumb.vue b/vue/primitives/src/scroll-area/ScrollAreaThumb.vue
new file mode 100644
index 0000000..5f8c046
--- /dev/null
+++ b/vue/primitives/src/scroll-area/ScrollAreaThumb.vue
@@ -0,0 +1,82 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+</script>
+
+<script setup lang="ts">
+import { computed, onMounted, onScopeDispose, ref, watch } from 'vue';
+import { Presence } from '../presence';
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { useScrollAreaRootContext, useScrollAreaScrollbarContext } from './context';
+import { addUnlinkedScrollListener } from './utils';
+
+export interface ScrollAreaThumbProps extends PrimitiveProps {
+  /** Keep mounted regardless of `hasThumb`. */
+  forceMount?: boolean;
+}
+
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps<ScrollAreaThumbProps>();
+const root = useScrollAreaRootContext();
+const sb = useScrollAreaScrollbarContext();
+
+const removeUnlinkedScrollListenerRef = ref<(() => void) | null>(null);
+const { forwardRef, currentElement } = useForwardExpose();
+
+function handlePointerDown(event: PointerEvent) {
+  const target = event.target as HTMLElement;
+  const rect = target.getBoundingClientRect();
+  sb.onThumbPointerDown({ x: event.clientX - rect.left, y: event.clientY - rect.top });
+}
+
+function handlePointerUp() {
+  sb.onThumbPointerUp();
+}
+
+function attachScroll() {
+  removeUnlinkedScrollListenerRef.value?.();
+  const vp = root.viewport.value;
+  if (!vp)
+    return;
+  sb.onThumbPositionChange();
+  removeUnlinkedScrollListenerRef.value = addUnlinkedScrollListener(vp, () => {
+    sb.onThumbPositionChange();
+  });
+}
+
+onMounted(() => {
+  attachScroll();
+  if (currentElement.value)
+    sb.onThumbChange(currentElement.value);
+});
+
+watch(currentElement, el => sb.onThumbChange(el ?? null));
+watch(() => root.viewport.value, attachScroll);
+watch(() => sb.hasThumb.value, () => {
+  sb.onThumbPositionChange();
+});
+
+onScopeDispose(() => {
+  removeUnlinkedScrollListenerRef.value?.();
+  sb.onThumbChange(null);
+});
+
+const present = computed(() => props.forceMount || sb.hasThumb.value);
+</script>
+
+<template>
+  <Presence :present="present">
+    <Primitive
+      :ref="forwardRef"
+      :as="as ?? 'div'"
+      data-state="visible"
+      :style="{ width: 'var(--scroll-area-thumb-width)', height: 'var(--scroll-area-thumb-height)' }"
+      v-bind="$attrs"
+      @pointerdowncapture="handlePointerDown"
+      @pointerup="handlePointerUp"
+    >
+      <slot />
+    </Primitive>
+  </Presence>
+</template>
diff --git a/vue/primitives/src/scroll-area/ScrollAreaViewport.vue b/vue/primitives/src/scroll-area/ScrollAreaViewport.vue
new file mode 100644
index 0000000..6d39c47
--- /dev/null
+++ b/vue/primitives/src/scroll-area/ScrollAreaViewport.vue
@@ -0,0 +1,67 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ScrollAreaViewportProps extends PrimitiveProps {
+  /** Inline `nonce` attribute applied to the injected style tag (CSP support). */
+  nonce?: string;
+}
+</script>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { useScrollAreaRootContext } from './context';
+
+defineOptions({ inheritAttrs: false });
+
+defineProps<ScrollAreaViewportProps>();
+
+const ctx = useScrollAreaRootContext();
+const { forwardRef, currentElement } = useForwardExpose();
+
+const contentRef = ref<HTMLElement | null>(null);
+
+watch(currentElement, (el) => {
+  ctx.viewport.value = el ?? null;
+}, { immediate: true });
+
+watch(contentRef, (el) => {
+  ctx.content.value = el ?? null;
+}, { immediate: true });
+
+onMounted(() => {
+  ctx.viewport.value = currentElement.value ?? null;
+  ctx.content.value = contentRef.value ?? null;
+});
+</script>
+
+<template>
+  <!-- Hide native scrollbars while preserving native scrolling behaviour. -->
+  <component
+    :is="'style'"
+    :nonce="nonce"
+  >
+    [data-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-scroll-area-viewport]::-webkit-scrollbar{display:none;}
+  </component>
+
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :id="($attrs.id as string | undefined) ?? ctx.viewportId.value"
+    data-scroll-area-viewport=""
+    :style="{
+      overflowX: ctx.scrollbarXEnabled.value ? 'scroll' : 'hidden',
+      overflowY: ctx.scrollbarYEnabled.value ? 'scroll' : 'hidden',
+    }"
+    v-bind="$attrs"
+  >
+    <!-- A `min-width: fit-content` inner ensures horizontal content is measurable. -->
+    <div
+      :ref="(el: any) => { contentRef = el; }"
+      :style="{ minWidth: '100%', display: 'table' }"
+    >
+      <slot />
+    </div>
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/scroll-area/__test__/ScrollArea.a11y.test.ts b/vue/primitives/src/scroll-area/__test__/ScrollArea.a11y.test.ts
new file mode 100644
index 0000000..f9129cf
--- /dev/null
+++ b/vue/primitives/src/scroll-area/__test__/ScrollArea.a11y.test.ts
@@ -0,0 +1,200 @@
+import type { VueWrapper } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+import { afterEach, describe, expect, it } from 'vitest';
+import { defineComponent, h, nextTick } from 'vue';
+
+import {
+  ScrollAreaRoot,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  ScrollAreaViewport,
+} from '../../index';
+
+const wrappers: Array<VueWrapper<any>> = [];
+
+afterEach(() => {
+  while (wrappers.length) wrappers.pop()!.unmount();
+  document.body.innerHTML = '';
+});
+
+function track<T extends VueWrapper<any>>(w: T): T {
+  wrappers.push(w);
+  return w;
+}
+
+function makeApp({
+  rootProps = {},
+  innerSize = '500px',
+}: { rootProps?: Record<string, unknown>; innerSize?: string } = {}) {
+  return defineComponent({
+    setup() {
+      return () => h(
+        ScrollAreaRoot,
+        { ...rootProps, type: 'always', style: { width: '100px', height: '100px' } },
+        {
+          default: () => [
+            h(ScrollAreaViewport, { style: { width: '100%', height: '100%' } }, {
+              default: () => h('div', { style: { width: innerSize, height: innerSize } }, 'content'),
+            }),
+            h(ScrollAreaScrollbar, { orientation: 'vertical' }, {
+              default: () => h(ScrollAreaThumb),
+            }),
+            h(ScrollAreaScrollbar, { orientation: 'horizontal' }, {
+              default: () => h(ScrollAreaThumb),
+            }),
+          ],
+        },
+      );
+    },
+  });
+}
+
+function mountApp(options?: { rootProps?: Record<string, unknown>; innerSize?: string }) {
+  return track(mount(makeApp(options), { attachTo: document.body }));
+}
+
+function getScrollbar(orientation: 'horizontal' | 'vertical'): HTMLElement {
+  return document.querySelector(`[role="scrollbar"][aria-orientation="${orientation}"]`) as HTMLElement;
+}
+
+function getViewport(): HTMLElement {
+  return document.querySelector('[data-scroll-area-viewport]') as HTMLElement;
+}
+
+async function waitFrames(n = 3) {
+  for (let i = 0; i < n; i++) {
+    await new Promise<void>(r => requestAnimationFrame(() => r()));
+    await nextTick();
+  }
+}
+
+describe('scroll-area — scrollbar ARIA', () => {
+  it('exposes role=scrollbar with full ARIA contract', async () => {
+    mountApp();
+    await waitFrames();
+    const v = getScrollbar('vertical');
+    const h = getScrollbar('horizontal');
+    expect(v).toBeTruthy();
+    expect(h).toBeTruthy();
+    for (const sb of [v, h]) {
+      expect(sb.getAttribute('aria-valuemin')).toBe('0');
+      expect(sb.getAttribute('aria-valuemax')).toBe('100');
+      expect(sb.getAttribute('aria-valuenow')).toBe('0');
+    }
+    expect(v.getAttribute('aria-orientation')).toBe('vertical');
+    expect(h.getAttribute('aria-orientation')).toBe('horizontal');
+  });
+
+  it('wires aria-controls to the viewport id', async () => {
+    mountApp();
+    await waitFrames();
+    const v = getScrollbar('vertical');
+    const vp = getViewport();
+    expect(vp.id).toBeTruthy();
+    expect(v.getAttribute('aria-controls')).toBe(vp.id);
+  });
+
+  it('marks scrollbar interactive (tabindex=0) when content overflows', async () => {
+    mountApp({ innerSize: '500px' });
+    await waitFrames();
+    const v = getScrollbar('vertical');
+    expect(v.getAttribute('tabindex')).toBe('0');
+    expect(v.hasAttribute('aria-disabled')).toBe(false);
+  });
+
+  it('marks scrollbar non-interactive (tabindex=-1, aria-disabled) when content fits', async () => {
+    mountApp({ innerSize: '50px' });
+    await waitFrames();
+    const v = getScrollbar('vertical');
+    expect(v.getAttribute('tabindex')).toBe('-1');
+    expect(v.getAttribute('aria-disabled')).toBe('true');
+  });
+});
+
+describe('scroll-area — scrollbar keyboard support', () => {
+  it('End scrolls the vertical viewport to the bottom and updates aria-valuenow', async () => {
+    mountApp({ innerSize: '500px' });
+    await waitFrames();
+    const v = getScrollbar('vertical');
+    const vp = getViewport();
+    expect(vp.scrollTop).toBe(0);
+    const ev = new KeyboardEvent('keydown', { key: 'End', bubbles: true, cancelable: true });
+    v.dispatchEvent(ev);
+    await waitFrames();
+    expect(ev.defaultPrevented).toBe(true);
+    expect(vp.scrollTop).toBeGreaterThan(0);
+    expect(v.getAttribute('aria-valuenow')).toBe('100');
+  });
+
+  it('Home scrolls to the top', async () => {
+    mountApp({ innerSize: '500px' });
+    await waitFrames();
+    const v = getScrollbar('vertical');
+    const vp = getViewport();
+    vp.scrollTop = 9999;
+    await waitFrames();
+    v.dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', bubbles: true, cancelable: true }));
+    await waitFrames();
+    expect(vp.scrollTop).toBe(0);
+    expect(v.getAttribute('aria-valuenow')).toBe('0');
+  });
+
+  it('ArrowDown moves the vertical viewport forward by ~5% of viewport size', async () => {
+    mountApp({ innerSize: '500px' });
+    await waitFrames();
+    const v = getScrollbar('vertical');
+    const vp = getViewport();
+    const expectedStep = Math.max(1, Math.round(vp.offsetHeight * 0.05));
+    v.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true, cancelable: true }));
+    await waitFrames();
+    expect(vp.scrollTop).toBe(expectedStep);
+  });
+
+  it('PageDown moves the vertical viewport by a full viewport', async () => {
+    mountApp({ innerSize: '500px' });
+    await waitFrames();
+    const v = getScrollbar('vertical');
+    const vp = getViewport();
+    const page = vp.offsetHeight;
+    v.dispatchEvent(new KeyboardEvent('keydown', { key: 'PageDown', bubbles: true, cancelable: true }));
+    await waitFrames();
+    expect(vp.scrollTop).toBe(page);
+  });
+
+  it('LTR: ArrowRight scrolls the horizontal viewport forward', async () => {
+    mountApp({ innerSize: '500px' });
+    await waitFrames();
+    const h = getScrollbar('horizontal');
+    const vp = getViewport();
+    const expectedStep = Math.max(1, Math.round(vp.offsetWidth * 0.05));
+    h.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, cancelable: true }));
+    await waitFrames();
+    expect(vp.scrollLeft).toBe(expectedStep);
+  });
+
+  it('RTL: ArrowLeft on the horizontal scrollbar engages the handler (visually reversed)', async () => {
+    mountApp({ rootProps: { dir: 'rtl' }, innerSize: '500px' });
+    await waitFrames();
+    const h = getScrollbar('horizontal');
+    const ev = new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true, cancelable: true });
+    h.dispatchEvent(ev);
+    await waitFrames();
+    // In RTL the visually-forward arrow is ArrowLeft; we assert the handler
+    // claimed the event (browser RTL scrollLeft semantics vary, so direction
+    // of the delta itself is asserted indirectly via preventDefault here).
+    expect(ev.defaultPrevented).toBe(true);
+  });
+
+  it('keydown is a no-op when the scrollbar is non-interactive', async () => {
+    mountApp({ innerSize: '50px' });
+    await waitFrames();
+    const v = getScrollbar('vertical');
+    const vp = getViewport();
+    const before = vp.scrollTop;
+    const ev = new KeyboardEvent('keydown', { key: 'End', bubbles: true, cancelable: true });
+    v.dispatchEvent(ev);
+    await waitFrames();
+    expect(ev.defaultPrevented).toBe(false);
+    expect(vp.scrollTop).toBe(before);
+  });
+});
diff --git a/vue/primitives/src/scroll-area/__test__/ScrollArea.test.ts b/vue/primitives/src/scroll-area/__test__/ScrollArea.test.ts
new file mode 100644
index 0000000..878e3ab
--- /dev/null
+++ b/vue/primitives/src/scroll-area/__test__/ScrollArea.test.ts
@@ -0,0 +1,182 @@
+import {
+  ScrollAreaCorner,
+  ScrollAreaRoot,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  ScrollAreaViewport,
+} from '../../index';
+import {
+  clamp,
+  getScrollPositionFromPointer,
+  getThumbOffsetFromScroll,
+  getThumbRatio,
+  getThumbSize,
+  isScrollingWithinScrollbarBounds,
+  toInt,
+} from '../utils';
+import { afterEach, describe, expect, it } from 'vitest';
+import { defineComponent, h, nextTick, ref } from 'vue';
+import type { VueWrapper } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+
+const wrappers: Array<VueWrapper<any>> = [];
+
+afterEach(() => {
+  while (wrappers.length) wrappers.pop()!.unmount();
+  document.body.innerHTML = '';
+  document.body.removeAttribute('style');
+});
+
+function track<T extends VueWrapper<any>>(w: T): T {
+  wrappers.push(w);
+  return w;
+}
+
+function makeApp(rootProps: Record<string, unknown> = {}) {
+  return defineComponent({
+    setup(_, { expose }) {
+      const rootRef = ref<any>(null);
+      expose({ rootRef });
+      return () => h(ScrollAreaRoot, { ref: rootRef, ...rootProps, style: { width: '100px', height: '100px' } }, {
+        default: () => [
+          h(ScrollAreaViewport, { style: { width: '100%', height: '100%' } }, {
+            default: () => h('div', { style: { width: '500px', height: '500px' } }, 'content'),
+          }),
+          h(ScrollAreaScrollbar, { orientation: 'vertical' }, {
+            default: () => h(ScrollAreaThumb),
+          }),
+          h(ScrollAreaScrollbar, { orientation: 'horizontal' }, {
+            default: () => h(ScrollAreaThumb),
+          }),
+          h(ScrollAreaCorner),
+        ],
+      });
+    },
+  });
+}
+
+describe('scrollArea utils', () => {
+  it('clamp constrains value to range', () => {
+    expect(clamp(5, 0, 10)).toBe(5);
+    expect(clamp(-1, 0, 10)).toBe(0);
+    expect(clamp(99, 0, 10)).toBe(10);
+  });
+
+  it('toInt parses pixel strings', () => {
+    expect(toInt('12px')).toBe(12);
+    expect(toInt('')).toBe(0);
+    expect(toInt(undefined)).toBe(0);
+    expect(toInt(null)).toBe(0);
+  });
+
+  it('getThumbRatio is 1 when viewport >= content', () => {
+    expect(getThumbRatio(100, 100)).toBe(1);
+    expect(getThumbRatio(200, 100)).toBe(1);
+    expect(getThumbRatio(0, 0)).toBe(1);
+  });
+
+  it('getThumbRatio is fraction when content exceeds viewport', () => {
+    expect(getThumbRatio(100, 200)).toBe(0.5);
+    expect(getThumbRatio(50, 200)).toBe(0.25);
+  });
+
+  it('getThumbSize enforces 18px minimum', () => {
+    const sizes = {
+      content: 100000,
+      viewport: 100,
+      scrollbar: { size: 100, paddingStart: 0, paddingEnd: 0 },
+    };
+    expect(getThumbSize(sizes)).toBe(18);
+  });
+
+  it('getThumbSize scales with ratio', () => {
+    const sizes = {
+      content: 200,
+      viewport: 100,
+      scrollbar: { size: 100, paddingStart: 0, paddingEnd: 0 },
+    };
+    expect(getThumbSize(sizes)).toBe(50);
+  });
+
+  it('getThumbOffsetFromScroll maps 0 → 0 and max → maxThumbPos (LTR)', () => {
+    const sizes = {
+      content: 200,
+      viewport: 100,
+      scrollbar: { size: 100, paddingStart: 0, paddingEnd: 0 },
+    };
+    expect(getThumbOffsetFromScroll(0, sizes)).toBe(0);
+    expect(getThumbOffsetFromScroll(100, sizes)).toBe(50);
+    expect(getThumbOffsetFromScroll(50, sizes)).toBe(25);
+  });
+
+  it('getThumbOffsetFromScroll handles RTL negative scroll', () => {
+    const sizes = {
+      content: 200,
+      viewport: 100,
+      scrollbar: { size: 100, paddingStart: 0, paddingEnd: 0 },
+    };
+    expect(getThumbOffsetFromScroll(0, sizes, 'rtl')).toBe(50);
+    expect(getThumbOffsetFromScroll(-100, sizes, 'rtl')).toBe(0);
+  });
+
+  it('getScrollPositionFromPointer maps min/max pointer to scroll range', () => {
+    const sizes = {
+      content: 200,
+      viewport: 100,
+      scrollbar: { size: 100, paddingStart: 0, paddingEnd: 0 },
+    };
+    expect(getScrollPositionFromPointer(25, 25, sizes)).toBe(0);
+    expect(getScrollPositionFromPointer(75, 25, sizes)).toBe(100);
+    expect(getScrollPositionFromPointer(50, 25, sizes)).toBe(50);
+  });
+
+  it('isScrollingWithinScrollbarBounds detects intermediate scroll positions', () => {
+    expect(isScrollingWithinScrollbarBounds(0, 100)).toBe(false);
+    expect(isScrollingWithinScrollbarBounds(100, 100)).toBe(false);
+    expect(isScrollingWithinScrollbarBounds(50, 100)).toBe(true);
+  });
+});
+
+describe('scrollArea components', () => {
+  it('renders root with viewport and scrollbars', async () => {
+    const w = track(mount(makeApp({ type: 'always' }), { attachTo: document.body }));
+    await nextTick();
+    expect(w.find('[data-scroll-area-viewport]').exists()).toBe(true);
+    expect(w.findAll('[data-orientation="vertical"]').length).toBeGreaterThan(0);
+    expect(w.findAll('[data-orientation="horizontal"]').length).toBeGreaterThan(0);
+  });
+
+  it('viewport hides native scrollbars via injected stylesheet', () => {
+    const w = track(mount(makeApp({ type: 'always' }), { attachTo: document.body }));
+    expect(w.html()).toContain('-webkit-scrollbar');
+  });
+
+  it('honours `dir` prop', () => {
+    const w = track(mount(makeApp({ dir: 'rtl' }), { attachTo: document.body }));
+    expect(w.find('[dir="rtl"]').exists()).toBe(true);
+  });
+
+  it('forwards `as` to Primitive', () => {
+    const w = track(mount(makeApp({ as: 'section' }), { attachTo: document.body }));
+    expect(w.find('section').exists()).toBe(true);
+  });
+
+  it('hover mode keeps scrollbar mounted while pointer is over root', async () => {
+    const w = track(mount(makeApp({ type: 'hover', scrollHideDelay: 1 }), { attachTo: document.body }));
+    await nextTick();
+    const root = w.find('[dir]').element as HTMLElement;
+    root.dispatchEvent(new PointerEvent('pointerenter'));
+    await nextTick();
+    expect(w.findAll('[data-state="visible"]').length).toBeGreaterThan(0);
+  });
+
+  it('exposes scrollTop / scrollTopLeft', async () => {
+    const w = track(mount(makeApp({ type: 'always' }), { attachTo: document.body }));
+    await nextTick();
+    const root = (w.vm as any).rootRef;
+    expect(typeof root.scrollTop).toBe('function');
+    expect(typeof root.scrollTopLeft).toBe('function');
+    root.scrollTop();
+    root.scrollTopLeft();
+  });
+});
diff --git a/vue/primitives/src/scroll-area/__test__/__screenshots__/ScrollArea.a11y.test.ts/scroll-area---scrollbar-keyboard-support-RTL--ArrowLeft-scrolls-the-horizontal-viewport-forward--visually-reversed--1.png b/vue/primitives/src/scroll-area/__test__/__screenshots__/ScrollArea.a11y.test.ts/scroll-area---scrollbar-keyboard-support-RTL--ArrowLeft-scrolls-the-horizontal-viewport-forward--visually-reversed--1.png
new file mode 100644
index 0000000..d529fcb
Binary files /dev/null and b/vue/primitives/src/scroll-area/__test__/__screenshots__/ScrollArea.a11y.test.ts/scroll-area---scrollbar-keyboard-support-RTL--ArrowLeft-scrolls-the-horizontal-viewport-forward--visually-reversed--1.png differ
diff --git a/vue/primitives/src/scroll-area/__test__/__screenshots__/ScrollArea.a11y.test.ts/scroll-area---scrollbar-keyboard-support-keydown-handler-does-not-call-preventDefault-when-scrollbar-is-non-interactive-1.png b/vue/primitives/src/scroll-area/__test__/__screenshots__/ScrollArea.a11y.test.ts/scroll-area---scrollbar-keyboard-support-keydown-handler-does-not-call-preventDefault-when-scrollbar-is-non-interactive-1.png
new file mode 100644
index 0000000..47767d2
Binary files /dev/null and b/vue/primitives/src/scroll-area/__test__/__screenshots__/ScrollArea.a11y.test.ts/scroll-area---scrollbar-keyboard-support-keydown-handler-does-not-call-preventDefault-when-scrollbar-is-non-interactive-1.png differ
diff --git a/vue/primitives/src/scroll-area/__test__/__screenshots__/ScrollArea.a11y.test.ts/scroll-area---scrollbar-keyboard-support-keydown-handler-is-a-no-op-when-content-does-not-overflow-1.png b/vue/primitives/src/scroll-area/__test__/__screenshots__/ScrollArea.a11y.test.ts/scroll-area---scrollbar-keyboard-support-keydown-handler-is-a-no-op-when-content-does-not-overflow-1.png
new file mode 100644
index 0000000..47767d2
Binary files /dev/null and b/vue/primitives/src/scroll-area/__test__/__screenshots__/ScrollArea.a11y.test.ts/scroll-area---scrollbar-keyboard-support-keydown-handler-is-a-no-op-when-content-does-not-overflow-1.png differ
diff --git a/vue/primitives/src/scroll-area/context.ts b/vue/primitives/src/scroll-area/context.ts
new file mode 100644
index 0000000..718c074
--- /dev/null
+++ b/vue/primitives/src/scroll-area/context.ts
@@ -0,0 +1,42 @@
+import type { Ref } from 'vue';
+import type { ScrollAreaType, ScrollDirection } from './types';
+import { useContextFactory } from '@robonen/vue';
+
+export interface ScrollAreaRootContext {
+  type: Ref<ScrollAreaType>;
+  dir: Ref<ScrollDirection>;
+  scrollHideDelay: Ref<number>;
+  scrollArea: Ref<HTMLElement | null>;
+  viewport: Ref<HTMLElement | null>;
+  content: Ref<HTMLElement | null>;
+  scrollbarX: Ref<HTMLElement | null>;
+  scrollbarY: Ref<HTMLElement | null>;
+  scrollbarXEnabled: Ref<boolean>;
+  scrollbarYEnabled: Ref<boolean>;
+  cornerWidth: Ref<number>;
+  cornerHeight: Ref<number>;
+  /** Unique id assigned to the Viewport so scrollbars can `aria-controls` it. */
+  viewportId: Ref<string>;
+  onScrollbarXEnabledChange: (enabled: boolean) => void;
+  onScrollbarYEnabledChange: (enabled: boolean) => void;
+  onCornerWidthChange: (n: number) => void;
+  onCornerHeightChange: (n: number) => void;
+}
+
+const RootCtx = useContextFactory<ScrollAreaRootContext>('ScrollAreaRootContext');
+export const provideScrollAreaRootContext = RootCtx.provide;
+export const useScrollAreaRootContext = RootCtx.inject;
+
+export interface ScrollAreaScrollbarContext {
+  orientation: 'horizontal' | 'vertical';
+  hasThumb: Ref<boolean>;
+  scrollbar: Ref<HTMLElement | null>;
+  onThumbChange: (el: HTMLElement | null) => void;
+  onThumbPointerUp: () => void;
+  onThumbPointerDown: (point: { x: number; y: number }) => void;
+  onThumbPositionChange: () => void;
+}
+
+const ScrollbarCtx = useContextFactory<ScrollAreaScrollbarContext>('ScrollAreaScrollbarContext');
+export const provideScrollAreaScrollbarContext = ScrollbarCtx.provide;
+export const useScrollAreaScrollbarContext = ScrollbarCtx.inject;
diff --git a/vue/primitives/src/scroll-area/index.ts b/vue/primitives/src/scroll-area/index.ts
new file mode 100644
index 0000000..bd7851a
--- /dev/null
+++ b/vue/primitives/src/scroll-area/index.ts
@@ -0,0 +1,14 @@
+export { default as ScrollAreaCorner, type ScrollAreaCornerProps } from './ScrollAreaCorner.vue';
+export { default as ScrollAreaRoot, type ScrollAreaRootProps } from './ScrollAreaRoot.vue';
+export { default as ScrollAreaScrollbar, type ScrollAreaScrollbarProps } from './ScrollAreaScrollbar.vue';
+export { default as ScrollAreaThumb, type ScrollAreaThumbProps } from './ScrollAreaThumb.vue';
+export { default as ScrollAreaViewport, type ScrollAreaViewportProps } from './ScrollAreaViewport.vue';
+export {
+  provideScrollAreaRootContext,
+  provideScrollAreaScrollbarContext,
+  type ScrollAreaRootContext,
+  type ScrollAreaScrollbarContext,
+  useScrollAreaRootContext,
+  useScrollAreaScrollbarContext,
+} from './context';
+export type { ScrollAreaSizes, ScrollAreaType, ScrollDirection } from './types';
diff --git a/vue/primitives/src/scroll-area/types.ts b/vue/primitives/src/scroll-area/types.ts
new file mode 100644
index 0000000..5cdf72d
--- /dev/null
+++ b/vue/primitives/src/scroll-area/types.ts
@@ -0,0 +1,13 @@
+export type ScrollDirection = 'ltr' | 'rtl';
+
+export type ScrollAreaType = 'auto' | 'always' | 'scroll' | 'hover';
+
+export interface ScrollAreaSizes {
+  content: number;
+  viewport: number;
+  scrollbar: {
+    size: number;
+    paddingStart: number;
+    paddingEnd: number;
+  };
+}
diff --git a/vue/primitives/src/scroll-area/utils.ts b/vue/primitives/src/scroll-area/utils.ts
new file mode 100644
index 0000000..bbfa7ef
--- /dev/null
+++ b/vue/primitives/src/scroll-area/utils.ts
@@ -0,0 +1,98 @@
+import type { ScrollAreaSizes, ScrollDirection } from './types';
+
+export function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}
+
+export function toInt(value?: string | null): number {
+  return value ? Number.parseInt(value, 10) || 0 : 0;
+}
+
+export function getThumbRatio(viewport: number, content: number): number {
+  if (!content || viewport >= content)
+    return 1;
+  const r = viewport / content;
+  return Number.isFinite(r) ? r : 0;
+}
+
+export function getThumbSize(sizes: ScrollAreaSizes): number {
+  const ratio = getThumbRatio(sizes.viewport, sizes.content);
+  const trackPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
+  const trackSize = sizes.scrollbar.size - trackPadding;
+  const thumb = trackSize * ratio;
+  return Math.max(thumb, 18);
+}
+
+function mapLinear(input: readonly [number, number], output: readonly [number, number]) {
+  return (value: number) => {
+    if (input[0] === input[1] || output[0] === output[1])
+      return output[0];
+    const ratio = (output[1] - output[0]) / (input[1] - input[0]);
+    return output[0] + ratio * (value - input[0]);
+  };
+}
+
+export function getThumbOffsetFromScroll(
+  scrollPos: number,
+  sizes: ScrollAreaSizes,
+  dir: ScrollDirection = 'ltr',
+): number {
+  const thumbSize = getThumbSize(sizes);
+  const trackPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
+  const trackSize = sizes.scrollbar.size - trackPadding;
+  const maxScroll = sizes.content - sizes.viewport;
+  const maxThumbPos = trackSize - thumbSize;
+  const range: [number, number] = dir === 'ltr' ? [0, maxScroll] : [-maxScroll, 0];
+  const clamped = clamp(scrollPos, range[0], range[1]);
+  return mapLinear([0, maxScroll], [0, maxThumbPos])(dir === 'ltr' ? clamped : clamped + maxScroll);
+}
+
+export function getScrollPositionFromPointer(
+  pointerPos: number,
+  pointerOffset: number,
+  sizes: ScrollAreaSizes,
+  dir: ScrollDirection = 'ltr',
+): number {
+  const thumbSize = getThumbSize(sizes);
+  const offset = pointerOffset || thumbSize / 2;
+  const remainder = thumbSize - offset;
+  const minPointer = sizes.scrollbar.paddingStart + offset;
+  const maxPointer = sizes.scrollbar.size - sizes.scrollbar.paddingEnd - remainder;
+  const maxScroll = sizes.content - sizes.viewport;
+  const range: [number, number] = dir === 'ltr' ? [0, maxScroll] : [-maxScroll, 0];
+  return mapLinear([minPointer, maxPointer], range)(pointerPos);
+}
+
+export function isScrollingWithinScrollbarBounds(scrollPos: number, maxScrollPos: number): boolean {
+  return scrollPos > 0 && scrollPos < maxScrollPos;
+}
+
+export function addUnlinkedScrollListener(node: HTMLElement, handler: () => void): () => void {
+  let prev = { left: node.scrollLeft, top: node.scrollTop };
+  let raf = 0;
+  const loop = () => {
+    const pos = { left: node.scrollLeft, top: node.scrollTop };
+    if (prev.left !== pos.left || prev.top !== pos.top)
+      handler();
+    prev = pos;
+    raf = globalThis.requestAnimationFrame(loop);
+  };
+  raf = globalThis.requestAnimationFrame(loop);
+  return () => globalThis.cancelAnimationFrame(raf);
+}
+
+export function debounceCallback<T extends (...args: never[]) => void>(fn: T, ms: number) {
+  let id: ReturnType<typeof setTimeout> | null = null;
+  const debounced = ((...args: Parameters<T>) => {
+    if (id !== null)
+      globalThis.clearTimeout(id);
+    id = globalThis.setTimeout(() => fn(...args), ms);
+  }) as T & { cancel: () => void };
+  debounced.cancel = () => {
+    if (id !== null) {
+      globalThis.clearTimeout(id);
+      id = null;
+    }
+  };
+  return debounced;
+}
diff --git a/vue/primitives/src/select/SelectArrow.vue b/vue/primitives/src/select/SelectArrow.vue
new file mode 100644
index 0000000..185d059
--- /dev/null
+++ b/vue/primitives/src/select/SelectArrow.vue
@@ -0,0 +1,21 @@
+<script lang="ts">
+import type { PopperArrowProps } from '../popper';
+
+export type SelectArrowProps = PopperArrowProps;
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '@robonen/vue';
+
+import { PopperArrow } from '../popper';
+
+const props = defineProps<SelectArrowProps>();
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <PopperArrow
+    :ref="forwardRef"
+    v-bind="props"
+  />
+</template>
diff --git a/vue/primitives/src/select/SelectContent.vue b/vue/primitives/src/select/SelectContent.vue
new file mode 100644
index 0000000..4fb47ae
--- /dev/null
+++ b/vue/primitives/src/select/SelectContent.vue
@@ -0,0 +1,27 @@
+<script lang="ts">
+import type { SelectContentImplEmits, SelectContentImplProps } from './SelectContentImpl.vue';
+
+export type SelectContentProps = SelectContentImplProps;
+export type SelectContentEmits = SelectContentImplEmits;
+</script>
+
+<script setup lang="ts">
+import { Presence } from '../presence';
+import { useSelectRootContext } from './context';
+import SelectContentImpl from './SelectContentImpl.vue';
+
+const props = defineProps<SelectContentProps>();
+const emit = defineEmits<SelectContentEmits>();
+const rootCtx = useSelectRootContext();
+</script>
+
+<template>
+  <Presence :present="rootCtx.open.value">
+    <SelectContentImpl
+      v-bind="props"
+      @close-auto-focus="emit('closeAutoFocus', $event)"
+      @escape-key-down="emit('escapeKeyDown', $event)"
+      @pointer-down-outside="emit('pointerDownOutside', $event)"
+    />
+  </Presence>
+</template>
diff --git a/vue/primitives/src/select/SelectContentImpl.vue b/vue/primitives/src/select/SelectContentImpl.vue
new file mode 100644
index 0000000..d6549a5
--- /dev/null
+++ b/vue/primitives/src/select/SelectContentImpl.vue
@@ -0,0 +1,151 @@
+<script lang="ts">
+import type { DismissableLayerEmits } from '../dismissable-layer';
+import type { FocusScopeEmits } from '../focus-scope';
+import type { PrimitiveProps } from '../primitive';
+
+export interface SelectContentImplProps extends PrimitiveProps {
+  /** Position mode. @default 'item-aligned' */
+  position?: 'item-aligned' | 'popper';
+  /** Block outside pointer events. @default true */
+  disableOutsidePointerEvents?: boolean;
+}
+
+export interface SelectContentImplEmits {
+  closeAutoFocus: FocusScopeEmits['unmountAutoFocus'];
+  escapeKeyDown: DismissableLayerEmits['escapeKeyDown'];
+  pointerDownOutside: DismissableLayerEmits['pointerDownOutside'];
+}
+</script>
+
+<script setup lang="ts">
+import { ref, shallowRef } from 'vue';
+
+import { useBodyScrollLock, useForwardExpose } from '@robonen/vue';
+import { DismissableLayer } from '../dismissable-layer';
+import { FocusScope } from '../focus-scope';
+import { provideSelectContentContext, useSelectRootContext } from './context';
+import SelectItemAlignedPosition from './SelectItemAlignedPosition.vue';
+import SelectPopperPosition from './SelectPopperPosition.vue';
+
+const {
+  as = 'div',
+  position = 'item-aligned',
+  disableOutsidePointerEvents = true,
+} = defineProps<SelectContentImplProps>();
+
+const emit = defineEmits<SelectContentImplEmits>();
+
+const { forwardRef, currentElement } = useForwardExpose();
+const rootCtx = useSelectRootContext();
+
+useBodyScrollLock();
+
+const isPositioned = ref(false);
+const searchRef = ref('');
+const viewportRef = shallowRef<HTMLElement | undefined>(undefined);
+let searchTimer: ReturnType<typeof setTimeout> | null = null;
+
+function handleTypeahead(key: string) {
+  searchRef.value += key;
+  if (searchTimer) clearTimeout(searchTimer);
+  searchTimer = setTimeout(() => {
+    searchRef.value = '';
+  }, 1000);
+
+  const viewport = viewportRef.value;
+  if (!viewport) return;
+  const items = Array.from(viewport.querySelectorAll<HTMLElement>(
+    '[data-primitives-select-item]:not([data-disabled])',
+  ));
+  const match = items.find(item =>
+    item.textContent?.trim().toLowerCase().startsWith(searchRef.value.toLowerCase()),
+  );
+  match?.focus();
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+  const viewport = viewportRef.value;
+  if (!viewport) return;
+
+  const items = Array.from(viewport.querySelectorAll<HTMLElement>(
+    '[data-primitives-select-item]:not([data-disabled])',
+  ));
+  const currentIdx = items.indexOf(document.activeElement as HTMLElement);
+
+  if (event.key === 'ArrowDown') {
+    event.preventDefault();
+    const next = items[currentIdx + 1] ?? items[0];
+    next?.focus();
+  }
+  else if (event.key === 'ArrowUp') {
+    event.preventDefault();
+    const prev = items[currentIdx - 1] ?? items[items.length - 1];
+    prev?.focus();
+  }
+  else if (event.key === 'Home') {
+    event.preventDefault();
+    items[0]?.focus();
+  }
+  else if (event.key === 'End') {
+    event.preventDefault();
+    items[items.length - 1]?.focus();
+  }
+  else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+    handleTypeahead(event.key);
+  }
+}
+
+provideSelectContentContext({
+  viewportRef,
+  onViewportChange: (el) => { viewportRef.value = el; },
+  selectedItemRef: rootCtx.selectedItemRef,
+  selectedItemTextRef: rootCtx.selectedItemTextRef,
+  onItemLeave: () => { currentElement.value?.focus(); },
+  itemRefCallback: rootCtx.itemRefCallback,
+  itemTextRefCallback: rootCtx.itemTextRefCallback,
+  isPositioned,
+  searchRef,
+  position,
+});
+</script>
+
+<template>
+  <FocusScope
+    as="template"
+    :loop="true"
+    :trapped="true"
+    @unmount-auto-focus="emit('closeAutoFocus', $event)"
+  >
+    <DismissableLayer
+      as="template"
+      :disable-outside-pointer-events="disableOutsidePointerEvents"
+      @escape-key-down="emit('escapeKeyDown', $event)"
+      @pointer-down-outside="emit('pointerDownOutside', $event)"
+      @dismiss="rootCtx.onOpenChange(false)"
+    >
+      <SelectItemAlignedPosition
+        v-if="position === 'item-aligned'"
+        :ref="forwardRef"
+        :as="as"
+        :data-state="rootCtx.open.value ? 'open' : 'closed'"
+        :dir="rootCtx.dir.value"
+        @placed="isPositioned = true"
+        @keydown="handleKeyDown"
+      >
+        <slot />
+      </SelectItemAlignedPosition>
+
+      <SelectPopperPosition
+        v-else
+        :ref="forwardRef"
+        :as="as"
+        :data-state="rootCtx.open.value ? 'open' : 'closed'"
+        :dir="rootCtx.dir.value"
+        @placed="isPositioned = true"
+        @keydown="handleKeyDown"
+      >
+        <slot />
+      </SelectPopperPosition>
+    </DismissableLayer>
+  </FocusScope>
+</template>
diff --git a/vue/primitives/src/select/SelectGroup.vue b/vue/primitives/src/select/SelectGroup.vue
new file mode 100644
index 0000000..8fb59c7
--- /dev/null
+++ b/vue/primitives/src/select/SelectGroup.vue
@@ -0,0 +1,31 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface SelectGroupProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '@robonen/vue';
+
+import { useId } from '../config-provider';
+import { Primitive } from '../primitive';
+import { provideSelectGroupContext } from './context';
+
+const { as = 'div' } = defineProps<SelectGroupProps>();
+const { forwardRef } = useForwardExpose();
+
+const groupId = useId(undefined, 'select-group');
+
+provideSelectGroupContext({ id: groupId });
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    role="group"
+    :aria-labelledby="groupId"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/select/SelectIcon.vue b/vue/primitives/src/select/SelectIcon.vue
new file mode 100644
index 0000000..1f78029
--- /dev/null
+++ b/vue/primitives/src/select/SelectIcon.vue
@@ -0,0 +1,24 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface SelectIconProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '@robonen/vue';
+
+import { Primitive } from '../primitive';
+
+const { as = 'span' } = defineProps<SelectIconProps>();
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    aria-hidden="true"
+  >
+    <slot>▼</slot>
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/select/SelectItem.vue b/vue/primitives/src/select/SelectItem.vue
new file mode 100644
index 0000000..92d3d5d
--- /dev/null
+++ b/vue/primitives/src/select/SelectItem.vue
@@ -0,0 +1,95 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface SelectItemProps extends PrimitiveProps {
+  /** The option value. */
+  value: string;
+  /** Disable this item. */
+  disabled?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, shallowRef } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { useId } from '../config-provider';
+import { Primitive } from '../primitive';
+import { provideSelectItemContext, useSelectContentContext, useSelectRootContext } from './context';
+
+const { as = 'div', value, disabled = false } = defineProps<SelectItemProps>();
+
+const { forwardRef, currentElement } = useForwardExpose();
+const rootCtx = useSelectRootContext();
+const contentCtx = useSelectContentContext();
+
+const textId = useId(undefined, 'select-item-text');
+const isSelected = computed(() => rootCtx.value.value === value);
+const isDisabled = computed(() => rootCtx.disabled.value || disabled);
+
+const itemTextElement = shallowRef<HTMLElement | undefined>(undefined);
+
+function onItemTextChange(el: HTMLElement | undefined) {
+  itemTextElement.value = el;
+  contentCtx.itemTextRefCallback(el, value);
+  if (el) rootCtx.onOptionAdd(value, el.textContent?.trim() ?? '');
+}
+
+onMounted(() => {
+  contentCtx.itemRefCallback(currentElement.value, value, isDisabled.value);
+});
+
+onBeforeUnmount(() => {
+  rootCtx.onOptionRemove(value);
+  contentCtx.itemRefCallback(undefined, value, isDisabled.value);
+});
+
+function handleSelect() {
+  if (isDisabled.value) return;
+  rootCtx.onValueChange(value);
+}
+
+function handlePointerEnter() {
+  if (isDisabled.value) return;
+  currentElement.value?.focus();
+}
+
+function handlePointerLeave() {
+  contentCtx.onItemLeave();
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault();
+    handleSelect();
+  }
+}
+
+provideSelectItemContext({
+  value,
+  isSelected,
+  isDisabled,
+  textId,
+  onItemTextChange,
+});
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    role="option"
+    :aria-selected="isSelected"
+    :aria-disabled="isDisabled || undefined"
+    :data-state="isSelected ? 'checked' : 'unchecked'"
+    :data-disabled="isDisabled ? '' : undefined"
+    :tabindex="isDisabled ? undefined : -1"
+    data-primitives-select-item
+    @click="handleSelect"
+    @pointerenter="handlePointerEnter"
+    @pointerleave="handlePointerLeave"
+    @keydown="handleKeyDown"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/select/SelectItemAlignedPosition.vue b/vue/primitives/src/select/SelectItemAlignedPosition.vue
new file mode 100644
index 0000000..a1b658e
--- /dev/null
+++ b/vue/primitives/src/select/SelectItemAlignedPosition.vue
@@ -0,0 +1,58 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface SelectItemAlignedPositionProps extends PrimitiveProps {
+  dir?: string;
+}
+
+export interface SelectItemAlignedPositionEmits {
+  placed: [];
+}
+</script>
+
+<script setup lang="ts">
+import { onMounted } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { useSelectContentContext, useSelectRootContext } from './context';
+
+const { as = 'div' } = defineProps<SelectItemAlignedPositionProps>();
+const emit = defineEmits<SelectItemAlignedPositionEmits>();
+
+const { forwardRef, currentElement } = useForwardExpose();
+const rootCtx = useSelectRootContext();
+const contentCtx = useSelectContentContext();
+
+onMounted(() => {
+  const trigger = rootCtx.triggerElement.value;
+  const content = currentElement.value;
+  if (!trigger || !content) {
+    emit('placed');
+    return;
+  }
+
+  const triggerRect = trigger.getBoundingClientRect();
+
+  Object.assign(content.style, {
+    position: 'fixed',
+    top: `${triggerRect.bottom}px`,
+    left: `${triggerRect.left}px`,
+    minWidth: `${triggerRect.width}px`,
+    zIndex: '50',
+  });
+
+  contentCtx.isPositioned.value = true;
+  emit('placed');
+});
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    data-primitives-select-content
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/select/SelectItemIndicator.vue b/vue/primitives/src/select/SelectItemIndicator.vue
new file mode 100644
index 0000000..8bf9804
--- /dev/null
+++ b/vue/primitives/src/select/SelectItemIndicator.vue
@@ -0,0 +1,27 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface SelectItemIndicatorProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '@robonen/vue';
+
+import { Primitive } from '../primitive';
+import { useSelectItemContext } from './context';
+
+const { as = 'span' } = defineProps<SelectItemIndicatorProps>();
+const { forwardRef } = useForwardExpose();
+const itemCtx = useSelectItemContext();
+</script>
+
+<template>
+  <Primitive
+    v-if="itemCtx.isSelected.value"
+    :ref="forwardRef"
+    :as="as"
+    aria-hidden="true"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/select/SelectItemText.vue b/vue/primitives/src/select/SelectItemText.vue
new file mode 100644
index 0000000..1633bec
--- /dev/null
+++ b/vue/primitives/src/select/SelectItemText.vue
@@ -0,0 +1,32 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface SelectItemTextProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { watchPostEffect } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { useSelectItemContext } from './context';
+
+const { as = 'span' } = defineProps<SelectItemTextProps>();
+
+const { forwardRef, currentElement } = useForwardExpose();
+const itemCtx = useSelectItemContext();
+
+watchPostEffect(() => {
+  itemCtx.onItemTextChange(currentElement.value);
+});
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :id="itemCtx.textId.value"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/select/SelectLabel.vue b/vue/primitives/src/select/SelectLabel.vue
new file mode 100644
index 0000000..10b8b16
--- /dev/null
+++ b/vue/primitives/src/select/SelectLabel.vue
@@ -0,0 +1,26 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface SelectLabelProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '@robonen/vue';
+
+import { Primitive } from '../primitive';
+import { useSelectGroupContext } from './context';
+
+const { as = 'div' } = defineProps<SelectLabelProps>();
+const { forwardRef } = useForwardExpose();
+const groupCtx = useSelectGroupContext();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :id="groupCtx.id.value"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/select/SelectPopperPosition.vue b/vue/primitives/src/select/SelectPopperPosition.vue
new file mode 100644
index 0000000..d7c0186
--- /dev/null
+++ b/vue/primitives/src/select/SelectPopperPosition.vue
@@ -0,0 +1,30 @@
+<script lang="ts">
+import type { PopperContentEmits, PopperContentProps } from '../popper';
+
+export type SelectPopperPositionProps = PopperContentProps;
+export type SelectPopperPositionEmits = PopperContentEmits;
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '@robonen/vue';
+
+import { PopperContent } from '../popper';
+
+const props = defineProps<SelectPopperPositionProps>();
+const emit = defineEmits<SelectPopperPositionEmits>();
+
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <PopperContent
+    :ref="forwardRef"
+    v-bind="props"
+    :side="props.side ?? 'bottom'"
+    :side-offset="props.sideOffset ?? 4"
+    :align="props.align ?? 'start'"
+    @placed="emit('placed')"
+  >
+    <slot />
+  </PopperContent>
+</template>
diff --git a/vue/primitives/src/select/SelectPortal.vue b/vue/primitives/src/select/SelectPortal.vue
new file mode 100644
index 0000000..5ae3945
--- /dev/null
+++ b/vue/primitives/src/select/SelectPortal.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { PortalProps } from '../teleport';
+
+export interface SelectPortalProps extends PortalProps {}
+</script>
+
+<script setup lang="ts">
+import { Portal } from '../teleport';
+
+const { to, defer, disabled } = defineProps<SelectPortalProps>();
+</script>
+
+<template>
+  <Portal :to="to" :defer="defer" :disabled="disabled">
+    <slot />
+  </Portal>
+</template>
diff --git a/vue/primitives/src/select/SelectRoot.vue b/vue/primitives/src/select/SelectRoot.vue
new file mode 100644
index 0000000..173000d
--- /dev/null
+++ b/vue/primitives/src/select/SelectRoot.vue
@@ -0,0 +1,159 @@
+<script lang="ts">
+import type { Direction } from '../config-provider';
+
+export interface SelectRootProps {
+  /** Reading direction. Falls back to ConfigProvider. */
+  dir?: Direction;
+  /** Disable the whole select. */
+  disabled?: boolean;
+  /** Mark field as required for native form validation. */
+  required?: boolean;
+  /** Native input name for form submission. */
+  name?: string;
+  /** Uncontrolled default value. */
+  defaultValue?: string;
+  /** Uncontrolled default open state. */
+  defaultOpen?: boolean;
+  /** Native autocomplete attribute forwarded to the hidden input. */
+  autocomplete?: string;
+}
+
+export interface SelectRootEmits {
+  'update:modelValue': [value: string | undefined];
+  'update:open': [open: boolean];
+}
+</script>
+
+<script setup lang="ts">
+import { ref, shallowRef, toRef, watch } from 'vue';
+
+import { useId } from '../config-provider';
+import { PopperRoot } from '../popper';
+import { provideSelectRootContext } from './context';
+import type { SelectValue } from './context';
+
+defineOptions({ inheritAttrs: false });
+
+const {
+  dir,
+  disabled = false,
+  required = false,
+  name,
+  defaultValue,
+  defaultOpen = false,
+  autocomplete,
+} = defineProps<SelectRootProps>();
+
+const emit = defineEmits<SelectRootEmits>();
+
+const localOpen = ref<boolean>(defaultOpen);
+const open = defineModel<boolean>('open', {
+  default: undefined,
+  get: v => v ?? localOpen.value,
+  set: (v) => {
+    localOpen.value = v;
+    return v;
+  },
+});
+
+const localValue = ref<SelectValue | undefined>(defaultValue);
+const value = defineModel<SelectValue | undefined>('modelValue', {
+  default: undefined,
+  get: v => v ?? localValue.value,
+  set: (v) => {
+    localValue.value = v;
+    return v;
+  },
+});
+
+const contentId = useId(undefined, 'select-content');
+const dirRef = toRef(() => dir);
+const disabledRef = toRef(() => disabled);
+const requiredRef = toRef(() => required);
+const nameRef = toRef(() => name);
+
+const triggerElement = shallowRef<HTMLElement | undefined>(undefined);
+const selectedItemRef = shallowRef<HTMLElement | undefined>(undefined);
+const selectedItemTextRef = shallowRef<HTMLElement | undefined>(undefined);
+const displayValue = ref<string | undefined>(undefined);
+const optionsSet = shallowRef(new Map<SelectValue, string>());
+
+function onOptionAdd(v: SelectValue, textContent: string) {
+  optionsSet.value = new Map(optionsSet.value).set(v, textContent);
+}
+
+function onOptionRemove(v: SelectValue) {
+  const m = new Map(optionsSet.value);
+  m.delete(v);
+  optionsSet.value = m;
+}
+
+// Update displayValue whenever optionsSet or value changes.
+// When content is open, optionsSet contains the text; we persist the last
+// known text so SelectValue keeps showing after content closes.
+watch([optionsSet, value], () => {
+  if (value.value !== undefined) {
+    const text = optionsSet.value.get(value.value);
+    if (text !== undefined) displayValue.value = text;
+  }
+}, { immediate: true });
+
+function handleValueChange(newValue: SelectValue) {
+  value.value = newValue;
+  displayValue.value = optionsSet.value.get(newValue);
+  emit('update:modelValue', newValue);
+  open.value = false;
+}
+
+function itemRefCallback(el: HTMLElement | undefined, itemValue: SelectValue, isDisabled: boolean) {
+  if (itemValue === value.value && !isDisabled) {
+    selectedItemRef.value = el;
+  }
+}
+
+function itemTextRefCallback(el: HTMLElement | undefined, itemValue: SelectValue) {
+  if (itemValue === value.value) {
+    selectedItemTextRef.value = el;
+  }
+}
+
+provideSelectRootContext({
+  value,
+  onValueChange: handleValueChange,
+  open,
+  onOpenChange: (v) => { open.value = v; },
+  dir: dirRef,
+  disabled: disabledRef,
+  required: requiredRef,
+  name: nameRef,
+  triggerElement,
+  onTriggerChange: (el) => { triggerElement.value = el; },
+  contentId,
+  displayValue,
+  optionsSet,
+  onOptionAdd,
+  onOptionRemove,
+  itemRefCallback,
+  itemTextRefCallback,
+  selectedItemRef,
+  selectedItemTextRef,
+});
+</script>
+
+<template>
+  <PopperRoot>
+    <slot />
+    <input
+      v-if="name"
+      type="hidden"
+      :name="name"
+      :value="value ?? ''"
+      :required="required"
+      :disabled="disabled"
+      :autocomplete="autocomplete"
+      aria-hidden="true"
+      style="display: none"
+      tabindex="-1"
+    />
+  </PopperRoot>
+</template>
diff --git a/vue/primitives/src/select/SelectScrollButtonImpl.vue b/vue/primitives/src/select/SelectScrollButtonImpl.vue
new file mode 100644
index 0000000..d13d6c3
--- /dev/null
+++ b/vue/primitives/src/select/SelectScrollButtonImpl.vue
@@ -0,0 +1,55 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface SelectScrollButtonImplProps extends PrimitiveProps {
+  direction: 1 | -1;
+}
+</script>
+
+<script setup lang="ts">
+import { onBeforeUnmount } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { useSelectContentContext } from './context';
+
+const { as = 'div', direction } = defineProps<SelectScrollButtonImplProps>();
+
+const { forwardRef } = useForwardExpose();
+const contentCtx = useSelectContentContext();
+
+let rafId: number | null = null;
+
+function startAutoScroll() {
+  const viewport = contentCtx.viewportRef.value;
+  if (!viewport) return;
+
+  function scroll() {
+    viewport!.scrollTop += direction * 8;
+    rafId = requestAnimationFrame(scroll);
+  }
+  rafId = requestAnimationFrame(scroll);
+}
+
+function stopAutoScroll() {
+  if (rafId !== null) {
+    cancelAnimationFrame(rafId);
+    rafId = null;
+  }
+}
+
+onBeforeUnmount(stopAutoScroll);
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    aria-hidden="true"
+    style="cursor: default; flex-shrink: 0; display: flex; align-items: center; justify-content: center"
+    @pointerenter="startAutoScroll"
+    @pointerleave="stopAutoScroll"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/select/SelectScrollDownButton.vue b/vue/primitives/src/select/SelectScrollDownButton.vue
new file mode 100644
index 0000000..b2183c2
--- /dev/null
+++ b/vue/primitives/src/select/SelectScrollDownButton.vue
@@ -0,0 +1,55 @@
+<script lang="ts">
+import type { SelectScrollButtonImplProps } from './SelectScrollButtonImpl.vue';
+
+export type SelectScrollDownButtonProps = Omit<SelectScrollButtonImplProps, 'direction'>;
+</script>
+
+<script setup lang="ts">
+import { onMounted, ref, watchEffect } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { useSelectContentContext } from './context';
+import SelectScrollButtonImpl from './SelectScrollButtonImpl.vue';
+
+const props = defineProps<SelectScrollDownButtonProps>();
+
+const { forwardRef } = useForwardExpose();
+const contentCtx = useSelectContentContext();
+
+const canScrollDown = ref(false);
+let cleanupFn: (() => void) | null = null;
+
+watchEffect(() => {
+  if (cleanupFn) {
+    cleanupFn();
+    cleanupFn = null;
+  }
+  const viewport = contentCtx.viewportRef.value;
+  if (!viewport) return;
+
+  const update = () => {
+    canScrollDown.value = viewport.scrollHeight - viewport.scrollTop > viewport.clientHeight + 1;
+  };
+  viewport.addEventListener('scroll', update, { passive: true });
+  update();
+  cleanupFn = () => viewport.removeEventListener('scroll', update);
+});
+
+onMounted(() => {
+  const viewport = contentCtx.viewportRef.value;
+  if (viewport) {
+    canScrollDown.value = viewport.scrollHeight - viewport.scrollTop > viewport.clientHeight + 1;
+  }
+});
+</script>
+
+<template>
+  <SelectScrollButtonImpl
+    v-if="canScrollDown"
+    v-bind="props"
+    :ref="forwardRef"
+    :direction="1"
+  >
+    <slot />
+  </SelectScrollButtonImpl>
+</template>
diff --git a/vue/primitives/src/select/SelectScrollUpButton.vue b/vue/primitives/src/select/SelectScrollUpButton.vue
new file mode 100644
index 0000000..cc07868
--- /dev/null
+++ b/vue/primitives/src/select/SelectScrollUpButton.vue
@@ -0,0 +1,53 @@
+<script lang="ts">
+import type { SelectScrollButtonImplProps } from './SelectScrollButtonImpl.vue';
+
+export type SelectScrollUpButtonProps = Omit<SelectScrollButtonImplProps, 'direction'>;
+</script>
+
+<script setup lang="ts">
+import { onMounted, ref, watchEffect } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { useSelectContentContext } from './context';
+import SelectScrollButtonImpl from './SelectScrollButtonImpl.vue';
+
+const props = defineProps<SelectScrollUpButtonProps>();
+
+const { forwardRef } = useForwardExpose();
+const contentCtx = useSelectContentContext();
+
+const canScrollUp = ref(false);
+let cleanupFn: (() => void) | null = null;
+
+watchEffect(() => {
+  if (cleanupFn) {
+    cleanupFn();
+    cleanupFn = null;
+  }
+  const viewport = contentCtx.viewportRef.value;
+  if (!viewport) return;
+
+  const update = () => {
+    canScrollUp.value = viewport.scrollTop > 0;
+  };
+  viewport.addEventListener('scroll', update, { passive: true });
+  update();
+  cleanupFn = () => viewport.removeEventListener('scroll', update);
+});
+
+onMounted(() => {
+  const viewport = contentCtx.viewportRef.value;
+  if (viewport) canScrollUp.value = viewport.scrollTop > 0;
+});
+</script>
+
+<template>
+  <SelectScrollButtonImpl
+    v-if="canScrollUp"
+    v-bind="props"
+    :ref="forwardRef"
+    :direction="-1"
+  >
+    <slot />
+  </SelectScrollButtonImpl>
+</template>
diff --git a/vue/primitives/src/select/SelectSeparator.vue b/vue/primitives/src/select/SelectSeparator.vue
new file mode 100644
index 0000000..e238760
--- /dev/null
+++ b/vue/primitives/src/select/SelectSeparator.vue
@@ -0,0 +1,25 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface SelectSeparatorProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '@robonen/vue';
+
+import { Primitive } from '../primitive';
+
+const { as = 'div' } = defineProps<SelectSeparatorProps>();
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    role="separator"
+    aria-orientation="horizontal"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/select/SelectTrigger.vue b/vue/primitives/src/select/SelectTrigger.vue
new file mode 100644
index 0000000..9f85168
--- /dev/null
+++ b/vue/primitives/src/select/SelectTrigger.vue
@@ -0,0 +1,65 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface SelectTriggerProps extends PrimitiveProps {
+  /** Disable this trigger independently from the root. */
+  disabled?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, watchEffect } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { PopperAnchor } from '../popper';
+import { Primitive } from '../primitive';
+import { useSelectRootContext } from './context';
+import { getOpenState } from './utils';
+
+const { as = 'button', disabled = false } = defineProps<SelectTriggerProps>();
+
+const { forwardRef, currentElement } = useForwardExpose();
+const rootCtx = useSelectRootContext();
+
+const isDisabled = computed(() => rootCtx.disabled.value || disabled);
+
+watchEffect(() => rootCtx.onTriggerChange(currentElement.value));
+onBeforeUnmount(() => rootCtx.onTriggerChange(undefined));
+
+function handlePointerDown(event: PointerEvent) {
+  if (isDisabled.value) return;
+  if (event.button !== 0 || event.ctrlKey) return;
+  event.preventDefault();
+  rootCtx.onOpenChange(true);
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+  if (isDisabled.value) return;
+  if (['Enter', ' ', 'ArrowUp', 'ArrowDown'].includes(event.key)) {
+    event.preventDefault();
+    rootCtx.onOpenChange(true);
+  }
+}
+</script>
+
+<template>
+  <PopperAnchor>
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      role="combobox"
+      type="button"
+      :aria-controls="rootCtx.contentId.value"
+      :aria-expanded="rootCtx.open.value"
+      :aria-required="rootCtx.required.value || undefined"
+      :data-state="getOpenState(rootCtx.open.value)"
+      :disabled="isDisabled || undefined"
+      :data-disabled="isDisabled ? '' : undefined"
+      :data-placeholder="!rootCtx.value.value ? '' : undefined"
+      @pointerdown="handlePointerDown"
+      @keydown="handleKeyDown"
+    >
+      <slot />
+    </Primitive>
+  </PopperAnchor>
+</template>
diff --git a/vue/primitives/src/select/SelectValue.vue b/vue/primitives/src/select/SelectValue.vue
new file mode 100644
index 0000000..1b37bde
--- /dev/null
+++ b/vue/primitives/src/select/SelectValue.vue
@@ -0,0 +1,35 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface SelectValueProps extends PrimitiveProps {
+  /** Text shown when no option is selected. */
+  placeholder?: string;
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { useSelectRootContext } from './context';
+import { shouldShowPlaceholder } from './utils';
+
+const { as = 'span', placeholder } = defineProps<SelectValueProps>();
+
+const { forwardRef } = useForwardExpose();
+const rootCtx = useSelectRootContext();
+
+const showPlaceholder = computed(() => shouldShowPlaceholder(rootCtx.value.value));
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    style="pointer-events: none"
+  >
+    <template v-if="showPlaceholder">{{ placeholder }}</template>
+    <template v-else>{{ rootCtx.displayValue.value }}</template>
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/select/SelectViewport.vue b/vue/primitives/src/select/SelectViewport.vue
new file mode 100644
index 0000000..d9b3e1a
--- /dev/null
+++ b/vue/primitives/src/select/SelectViewport.vue
@@ -0,0 +1,32 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface SelectViewportProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { watchPostEffect } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { useSelectContentContext } from './context';
+
+const { as = 'div' } = defineProps<SelectViewportProps>();
+
+const { forwardRef, currentElement } = useForwardExpose();
+const contentCtx = useSelectContentContext();
+
+watchPostEffect(() => contentCtx.onViewportChange(currentElement.value));
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    role="listbox"
+    data-primitives-select-viewport
+    style="overflow: auto; max-height: var(--primitives-select-content-available-height, 300px)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/select/context.ts b/vue/primitives/src/select/context.ts
new file mode 100644
index 0000000..d17721c
--- /dev/null
+++ b/vue/primitives/src/select/context.ts
@@ -0,0 +1,84 @@
+import type { Ref, ShallowRef } from 'vue';
+import type { Direction } from '../config-provider';
+
+import { useContextFactory } from '@robonen/vue';
+
+export type SelectValue = string;
+
+export interface SelectRootContext {
+  value: Ref<SelectValue | undefined>;
+  onValueChange: (value: SelectValue) => void;
+  open: Ref<boolean>;
+  onOpenChange: (open: boolean) => void;
+  dir: Ref<Direction | undefined>;
+  disabled: Ref<boolean>;
+  required: Ref<boolean>;
+  name: Ref<string | undefined>;
+  triggerElement: ShallowRef<HTMLElement | undefined>;
+  onTriggerChange: (el: HTMLElement | undefined) => void;
+  contentId: Ref<string>;
+  displayValue: Ref<string | undefined>;
+  optionsSet: ShallowRef<Map<SelectValue, string>>;
+  onOptionAdd: (value: SelectValue, textContent: string) => void;
+  onOptionRemove: (value: SelectValue) => void;
+  itemRefCallback: (el: HTMLElement | undefined, value: SelectValue, disabled: boolean) => void;
+  itemTextRefCallback: (el: HTMLElement | undefined, value: SelectValue) => void;
+  selectedItemRef: ShallowRef<HTMLElement | undefined>;
+  selectedItemTextRef: ShallowRef<HTMLElement | undefined>;
+}
+
+export interface SelectContentContext {
+  viewportRef: ShallowRef<HTMLElement | undefined>;
+  onViewportChange: (el: HTMLElement | undefined) => void;
+  selectedItemRef: ShallowRef<HTMLElement | undefined>;
+  selectedItemTextRef: ShallowRef<HTMLElement | undefined>;
+  onItemLeave: () => void;
+  itemRefCallback: SelectRootContext['itemRefCallback'];
+  itemTextRefCallback: SelectRootContext['itemTextRefCallback'];
+  isPositioned: Ref<boolean>;
+  searchRef: Ref<string>;
+  position: 'item-aligned' | 'popper';
+}
+
+export interface SelectGroupContext {
+  id: Ref<string>;
+}
+
+export interface SelectItemContext {
+  value: SelectValue;
+  isSelected: Ref<boolean>;
+  isDisabled: Ref<boolean>;
+  textId: Ref<string>;
+  onItemTextChange: (el: HTMLElement | undefined) => void;
+}
+
+const {
+  inject: useSelectRootContext,
+  provide: provideSelectRootContext,
+} = useContextFactory<SelectRootContext>('SelectRootContext');
+
+const {
+  inject: useSelectContentContext,
+  provide: provideSelectContentContext,
+} = useContextFactory<SelectContentContext>('SelectContentContext');
+
+const {
+  inject: useSelectGroupContext,
+  provide: provideSelectGroupContext,
+} = useContextFactory<SelectGroupContext>('SelectGroupContext');
+
+const {
+  inject: useSelectItemContext,
+  provide: provideSelectItemContext,
+} = useContextFactory<SelectItemContext>('SelectItemContext');
+
+export {
+  useSelectRootContext,
+  provideSelectRootContext,
+  useSelectContentContext,
+  provideSelectContentContext,
+  useSelectGroupContext,
+  provideSelectGroupContext,
+  useSelectItemContext,
+  provideSelectItemContext,
+};
diff --git a/vue/primitives/src/select/index.ts b/vue/primitives/src/select/index.ts
new file mode 100644
index 0000000..0ecc65b
--- /dev/null
+++ b/vue/primitives/src/select/index.ts
@@ -0,0 +1,47 @@
+export { default as SelectRoot } from './SelectRoot.vue';
+export { default as SelectTrigger } from './SelectTrigger.vue';
+export { default as SelectValue } from './SelectValue.vue';
+export { default as SelectIcon } from './SelectIcon.vue';
+export { default as SelectPortal } from './SelectPortal.vue';
+export { default as SelectContent } from './SelectContent.vue';
+export { default as SelectContentImpl } from './SelectContentImpl.vue';
+export { default as SelectItemAlignedPosition } from './SelectItemAlignedPosition.vue';
+export { default as SelectPopperPosition } from './SelectPopperPosition.vue';
+export { default as SelectViewport } from './SelectViewport.vue';
+export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue';
+export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue';
+export { default as SelectGroup } from './SelectGroup.vue';
+export { default as SelectLabel } from './SelectLabel.vue';
+export { default as SelectItem } from './SelectItem.vue';
+export { default as SelectItemText } from './SelectItemText.vue';
+export { default as SelectItemIndicator } from './SelectItemIndicator.vue';
+export { default as SelectSeparator } from './SelectSeparator.vue';
+export { default as SelectArrow } from './SelectArrow.vue';
+
+export {
+  useSelectRootContext,
+  useSelectContentContext,
+  useSelectGroupContext,
+  useSelectItemContext,
+} from './context';
+
+export type { SelectValue, SelectRootContext, SelectContentContext, SelectGroupContext, SelectItemContext } from './context';
+export type { SelectRootProps, SelectRootEmits } from './SelectRoot.vue';
+export type { SelectTriggerProps } from './SelectTrigger.vue';
+export type { SelectValueProps } from './SelectValue.vue';
+export type { SelectIconProps } from './SelectIcon.vue';
+export type { SelectPortalProps } from './SelectPortal.vue';
+export type { SelectContentProps, SelectContentEmits } from './SelectContent.vue';
+export type { SelectContentImplProps, SelectContentImplEmits } from './SelectContentImpl.vue';
+export type { SelectItemAlignedPositionProps, SelectItemAlignedPositionEmits } from './SelectItemAlignedPosition.vue';
+export type { SelectPopperPositionProps, SelectPopperPositionEmits } from './SelectPopperPosition.vue';
+export type { SelectViewportProps } from './SelectViewport.vue';
+export type { SelectScrollUpButtonProps } from './SelectScrollUpButton.vue';
+export type { SelectScrollDownButtonProps } from './SelectScrollDownButton.vue';
+export type { SelectGroupProps } from './SelectGroup.vue';
+export type { SelectLabelProps } from './SelectLabel.vue';
+export type { SelectItemProps } from './SelectItem.vue';
+export type { SelectItemTextProps } from './SelectItemText.vue';
+export type { SelectItemIndicatorProps } from './SelectItemIndicator.vue';
+export type { SelectSeparatorProps } from './SelectSeparator.vue';
+export type { SelectArrowProps } from './SelectArrow.vue';
diff --git a/vue/primitives/src/select/utils.ts b/vue/primitives/src/select/utils.ts
new file mode 100644
index 0000000..15fb63d
--- /dev/null
+++ b/vue/primitives/src/select/utils.ts
@@ -0,0 +1,7 @@
+export function getOpenState(open: boolean): 'open' | 'closed' {
+  return open ? 'open' : 'closed';
+}
+
+export function shouldShowPlaceholder(value: string | undefined): boolean {
+  return value === undefined || value === '';
+}
diff --git a/vue/primitives/src/separator/Separator.vue b/vue/primitives/src/separator/Separator.vue
new file mode 100644
index 0000000..26dcd6d
--- /dev/null
+++ b/vue/primitives/src/separator/Separator.vue
@@ -0,0 +1,38 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface SeparatorProps extends PrimitiveProps {
+  /** The orientation of the separator. */
+  orientation?: 'horizontal' | 'vertical';
+  /**
+   * When `true` the separator is purely decorative and is hidden from
+   * assistive technology (no role, `aria-hidden`). Otherwise it exposes
+   * `role="separator"` and the correct `aria-orientation`.
+   * @default false
+   */
+  decorative?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { computed } from 'vue';
+import { useForwardExpose } from '@robonen/vue';
+
+const { orientation = 'horizontal', decorative = false, as = 'div' } = defineProps<SeparatorProps>();
+
+const { forwardRef } = useForwardExpose();
+
+const ariaProps = computed(() => decorative
+  ? { role: 'none' as const }
+  : {
+      role: 'separator' as const,
+      'aria-orientation': orientation === 'vertical' ? 'vertical' as const : undefined,
+    });
+</script>
+
+<template>
+  <Primitive :ref="forwardRef" :as="as" :data-orientation="orientation" v-bind="ariaProps">
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/separator/__test__/Separator.test.ts b/vue/primitives/src/separator/__test__/Separator.test.ts
new file mode 100644
index 0000000..30b91d0
--- /dev/null
+++ b/vue/primitives/src/separator/__test__/Separator.test.ts
@@ -0,0 +1,29 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import { Separator } from '../index';
+
+describe('Separator', () => {
+  it('renders with role="separator" by default', () => {
+    const wrapper = mount(Separator);
+    expect(wrapper.attributes('role')).toBe('separator');
+    expect(wrapper.attributes('data-orientation')).toBe('horizontal');
+    expect(wrapper.attributes('aria-orientation')).toBeUndefined();
+  });
+
+  it('sets aria-orientation="vertical" for vertical', () => {
+    const wrapper = mount(Separator, { props: { orientation: 'vertical' } });
+    expect(wrapper.attributes('aria-orientation')).toBe('vertical');
+    expect(wrapper.attributes('data-orientation')).toBe('vertical');
+  });
+
+  it('is decorative when requested', () => {
+    const wrapper = mount(Separator, { props: { decorative: true } });
+    expect(wrapper.attributes('role')).toBe('none');
+    expect(wrapper.attributes('aria-orientation')).toBeUndefined();
+  });
+
+  it('supports custom element via `as`', () => {
+    const wrapper = mount(Separator, { props: { as: 'hr' } });
+    expect(wrapper.element.tagName).toBe('HR');
+  });
+});
diff --git a/vue/primitives/src/separator/index.ts b/vue/primitives/src/separator/index.ts
new file mode 100644
index 0000000..64e1822
--- /dev/null
+++ b/vue/primitives/src/separator/index.ts
@@ -0,0 +1,2 @@
+export { default as Separator } from './Separator.vue';
+export type { SeparatorProps } from './Separator.vue';
diff --git a/vue/primitives/src/slider/SliderRange.vue b/vue/primitives/src/slider/SliderRange.vue
new file mode 100644
index 0000000..3b144eb
--- /dev/null
+++ b/vue/primitives/src/slider/SliderRange.vue
@@ -0,0 +1,75 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+export interface SliderRangeProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { computed } from 'vue';
+import { useForwardExpose } from '@robonen/vue';
+import { useSliderContext } from './context';
+
+const { as = 'span' } = defineProps<SliderRangeProps>();
+const { forwardRef } = useForwardExpose();
+const ctx = useSliderContext();
+
+// Single-pass min/max over values normalized to percent; no spread, no `.map`.
+const percentages = computed<[number, number]>(() => {
+  const values = ctx.values.value;
+  const min = ctx.min.value;
+  const range = ctx.max.value - min;
+  if (range === 0 || values.length === 0) return [0, 0];
+  const first = ((values[0]! - min) / range) * 100;
+  if (values.length === 1) return [0, first];
+  let lo = first;
+  let hi = first;
+  for (let i = 1; i < values.length; i++) {
+    const p = ((values[i]! - min) / range) * 100;
+    if (p < lo) lo = p;
+    else if (p > hi) hi = p;
+  }
+  return [lo, hi];
+});
+
+// Stable shape: always the same keys in the same order. Unused sides explicitly
+// `undefined` so V8 (and Vue's style patcher) sees a monomorphic object.
+const style = computed<{
+  left: string | undefined;
+  right: string | undefined;
+  top: string | undefined;
+  bottom: string | undefined;
+}>(() => {
+  const [start, end] = percentages.value;
+  const startPct = `${start}%`;
+  const endPct = `${100 - end}%`;
+  const horizontal = ctx.orientation.value === 'horizontal';
+  if (horizontal) {
+    const flip = (ctx.direction.value === 'rtl') !== ctx.inverted.value;
+    return {
+      left: flip ? endPct : startPct,
+      right: flip ? startPct : endPct,
+      top: undefined,
+      bottom: undefined,
+    };
+  }
+  const flip = ctx.inverted.value;
+  return {
+    left: undefined,
+    right: undefined,
+    top: flip ? startPct : endPct,
+    bottom: flip ? endPct : startPct,
+  };
+});
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :style="style"
+    :data-disabled="ctx.disabled.value ? '' : undefined"
+    :data-orientation="ctx.orientation.value"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/slider/SliderRoot.vue b/vue/primitives/src/slider/SliderRoot.vue
new file mode 100644
index 0000000..be7f0ed
--- /dev/null
+++ b/vue/primitives/src/slider/SliderRoot.vue
@@ -0,0 +1,263 @@
+<script lang="ts">
+import type { SliderDirection, SliderOrientation } from './context';
+import type { PrimitiveProps } from '../primitive';
+
+export interface SliderRootProps extends PrimitiveProps {
+  /** Current value(s) for controlled mode. */
+  modelValue?: number[];
+  /** Min value. @default 0 */
+  min?: number;
+  /** Max value. @default 100 */
+  max?: number;
+  /** Step granularity. @default 1 */
+  step?: number;
+  /** Minimum step count between adjacent thumbs in range mode. @default 0 */
+  minStepsBetweenThumbs?: number;
+  /** Orientation. @default 'horizontal' */
+  orientation?: SliderOrientation;
+  /** Writing direction. @default 'ltr' */
+  dir?: SliderDirection;
+  /** Invert the direction of interaction. @default false */
+  inverted?: boolean;
+  /** Disable all interaction. */
+  disabled?: boolean;
+  /** Uncontrolled initial value(s). Accepts single number or array. */
+  defaultValue?: number | number[];
+  /** Hidden input `name` attribute. */
+  name?: string;
+  /** Mark hidden inputs as required. */
+  required?: boolean;
+}
+
+export interface SliderRootEmits {
+  valueCommit: [value: number[]];
+}
+</script>
+
+<script setup lang="ts">
+import {
+  getClosestValueIndex,
+  getStepDecimals,
+  hasMinStepsBetweenSortedValues,
+  roundToStep,
+  scaleLinear,
+} from './utils';
+import { computed, nextTick, shallowRef, toRef, watch } from 'vue';
+import { Primitive } from '../primitive';
+import { provideSliderContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+import { clamp } from '@robonen/stdlib';
+
+const {
+  min = 0,
+  max = 100,
+  step = 1,
+  minStepsBetweenThumbs = 0,
+  orientation = 'horizontal',
+  dir = 'ltr',
+  inverted = false,
+  disabled = false,
+  modelValue,
+  defaultValue,
+  name,
+  required,
+  as = 'span',
+} = defineProps<SliderRootProps>();
+
+const { forwardRef } = useForwardExpose();
+
+const emit = defineEmits<SliderRootEmits & { 'update:modelValue': [value: number[]] }>();
+
+function toArray(v: number | number[] | undefined): number[] {
+  if (Array.isArray(v)) return v.slice();
+  if (typeof v === 'number') return [v];
+  return [];
+}
+
+const d = toArray(defaultValue);
+// `shallowRef` — the array is always replaced wholesale; no need to proxy items.
+const localValues = shallowRef<number[]>(d.length > 0 ? d : [min]);
+
+// Cache decimals per `step` — `String(step).split('.')` out of the pointermove path.
+let stepDecimals = getStepDecimals(step);
+watch(() => step, (s) => {
+  stepDecimals = getStepDecimals(s);
+});
+
+watch(() => modelValue, (v) => {
+  if (v === undefined) return;
+  // Ref-level check is enough; the setter below guards on deep equality again.
+  if (v === localValues.value) return;
+  localValues.value = v.slice();
+}, { immediate: true });
+
+const values = computed<number[]>({
+  get: () => localValues.value,
+  set: (v) => {
+    localValues.value = v;
+    emit('update:modelValue', v);
+  },
+});
+
+const trackRef = shallowRef<HTMLElement | null>(null);
+const thumbEls: HTMLElement[] = [];
+
+function registerThumb(el: HTMLElement): number {
+  const existing = thumbEls.indexOf(el);
+  if (existing !== -1) return existing;
+  thumbEls.push(el);
+  return thumbEls.length - 1;
+}
+function unregisterThumb(el: HTMLElement): void {
+  const i = thumbEls.indexOf(el);
+  if (i !== -1) thumbEls.splice(i, 1);
+}
+function getThumbIndex(el: HTMLElement): number {
+  return thumbEls.indexOf(el);
+}
+
+function setValue(next: number[]): void {
+  const prev = localValues.value;
+  if (prev.length === next.length) {
+    let equal = true;
+    for (let i = 0; i < next.length; i++) {
+      if (prev[i] !== next[i]) {
+        equal = false;
+        break;
+      }
+    }
+    if (equal) return;
+  }
+  values.value = next;
+}
+
+function commit(): void {
+  emit('valueCommit', localValues.value.slice());
+}
+
+function updateValue(index: number, raw: number): void {
+  if (disabled) return;
+  const prev = localValues.value;
+  // Snap to step & clamp to bounds.
+  let v = clamp(roundToStep(raw, step, min, stepDecimals), min, max);
+  // Clamp to neighbours (prev/next) to preserve sort order & minStepsBetweenThumbs.
+  const minGap = minStepsBetweenThumbs * step;
+  const prevVal = prev[index - 1];
+  const nextVal = prev[index + 1];
+  if (prevVal !== undefined) v = Math.max(v, prevVal + minGap);
+  if (nextVal !== undefined) v = Math.min(v, nextVal - minGap);
+  v = clamp(v, min, max);
+  if (v === prev[index]) return;
+  // Single allocation: copy + assign. Sort order is preserved by neighbour-clamp.
+  const candidate = prev.slice();
+  candidate[index] = v;
+  if (!hasMinStepsBetweenSortedValues(candidate, minStepsBetweenThumbs, step)) return;
+  setValue(candidate);
+}
+
+function getValueFromPointer(event: PointerEvent): number {
+  const track = trackRef.value;
+  if (!track) return min;
+  const rect = track.getBoundingClientRect();
+  const horizontal = orientation === 'horizontal';
+  const size = horizontal ? rect.width : rect.height;
+  if (size === 0) return min;
+  let offset = horizontal ? event.clientX - rect.left : event.clientY - rect.top;
+  // ltr horizontal: left = min. rtl or inverted flip.
+  // For vertical we invert by default (top = max visually); `inverted` flips back.
+  const flip = (horizontal ? dir === 'rtl' : true) !== inverted;
+  if (flip) offset = size - offset;
+  return scaleLinear(offset, 0, size, min, max);
+}
+
+let activeIndex = -1;
+
+function handlePointerMove(event: PointerEvent): void {
+  if (activeIndex === -1) return;
+  updateValue(activeIndex, getValueFromPointer(event));
+}
+
+function handlePointerUp(): void {
+  if (activeIndex === -1) return;
+  activeIndex = -1;
+  globalThis.removeEventListener('pointermove', handlePointerMove);
+  globalThis.removeEventListener('pointerup', handlePointerUp);
+  commit();
+}
+
+function startDragFromTrack(event: PointerEvent): void {
+  if (disabled) return;
+  const raw = getValueFromPointer(event);
+  const index = getClosestValueIndex(localValues.value, raw);
+  activeIndex = index;
+  updateValue(index, raw);
+  // Focus the thumb we just grabbed.
+  nextTick(() => thumbEls[index]?.focus());
+  globalThis.addEventListener('pointermove', handlePointerMove);
+  globalThis.addEventListener('pointerup', handlePointerUp);
+}
+
+// Keep values clamped if bounds change.
+watch([() => min, () => max], ([nmin, nmax]) => {
+  const cur = localValues.value;
+  // Packed array: push into `[]` rather than `new Array(n)` (holey SMI → can't
+  // transition back). Small array, V8 keeps it PACKED_DOUBLE/SMI_ELEMENTS.
+  const clamped: number[] = [];
+  let changed = false;
+  for (let i = 0; i < cur.length; i++) {
+    const c = clamp(cur[i]!, nmin, nmax);
+    clamped.push(c);
+    if (c !== cur[i]) changed = true;
+  }
+  if (changed) setValue(clamped);
+});
+
+function contextUpdateValue(i: number, v: number): void {
+  updateValue(i, v);
+  commit();
+}
+
+provideSliderContext({
+  values,
+  // `toRef(() => prop)` → `GetterRefImpl`: reactive `Ref` without a
+  // `ReactiveEffect`/cache, since these are identity passthroughs.
+  min: toRef(() => min),
+  max: toRef(() => max),
+  step: toRef(() => step),
+  orientation: toRef(() => orientation),
+  direction: toRef(() => dir),
+  disabled: toRef(() => disabled),
+  inverted: toRef(() => inverted),
+  trackRef,
+  registerThumb,
+  unregisterThumb,
+  getThumbIndex,
+  updateValue: contextUpdateValue,
+  startDragFromTrack,
+});
+
+defineExpose({ values });
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :aria-disabled="disabled || undefined"
+    :data-disabled="disabled ? '' : undefined"
+    :data-orientation="orientation"
+    :dir="dir"
+  >
+    <slot :values="values" />
+    <template v-if="name">
+      <input
+        v-for="(v, i) in values"
+        :key="i"
+        type="hidden"
+        :name="values.length > 1 ? `${name}[]` : name"
+        :value="v"
+        :required="required"
+      >
+    </template>
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/slider/SliderThumb.vue b/vue/primitives/src/slider/SliderThumb.vue
new file mode 100644
index 0000000..2ba59c5
--- /dev/null
+++ b/vue/primitives/src/slider/SliderThumb.vue
@@ -0,0 +1,137 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface SliderThumbProps extends PrimitiveProps {
+  /** Accessible label for this thumb. */
+  'aria-label'?: string;
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
+import { useForwardExpose } from '@robonen/vue';
+import { useSliderContext } from './context';
+
+const { as = 'span' } = defineProps<SliderThumbProps>();
+const ctx = useSliderContext();
+
+const { forwardRef, currentElement } = useForwardExpose();
+const index = ref(-1);
+
+watch(currentElement, (node) => {
+  if (node) index.value = ctx.registerThumb(node);
+  else index.value = -1;
+});
+
+onBeforeUnmount(() => {
+  if (currentElement.value) ctx.unregisterThumb(currentElement.value);
+});
+
+const value = computed(() => ctx.values.value[index.value] ?? ctx.min.value);
+
+const percentage = computed(() => {
+  const min = ctx.min.value;
+  const range = ctx.max.value - min;
+  if (range === 0) return 0;
+  return ((value.value - min) / range) * 100;
+});
+
+// Stable shape: always return the same keys in the same order so V8 keeps
+// one hidden class for this object and the style patcher sees a monomorphic
+// input. Unused sides are explicit `undefined`.
+const positionStyle = computed<{
+  left: string | undefined;
+  right: string | undefined;
+  top: string | undefined;
+  bottom: string | undefined;
+}>(() => {
+  const pct = `${percentage.value}%`;
+  const horizontal = ctx.orientation.value === 'horizontal';
+  const rtl = ctx.direction.value === 'rtl';
+  const inverted = ctx.inverted.value;
+  if (horizontal) {
+    const flip = rtl !== inverted;
+    return {
+      left: flip ? undefined : pct,
+      right: flip ? pct : undefined,
+      top: undefined,
+      bottom: undefined,
+    };
+  }
+  return {
+    left: undefined,
+    right: undefined,
+    top: inverted ? pct : undefined,
+    bottom: inverted ? undefined : pct,
+  };
+});
+
+function largeStep(): number {
+  const step = ctx.step.value;
+  return Math.max(step * 10, step);
+}
+
+function onKeyDown(event: KeyboardEvent): void {
+  if (ctx.disabled.value || index.value === -1) return;
+  const horizontal = ctx.orientation.value === 'horizontal';
+  const rtl = ctx.direction.value === 'rtl';
+  const step = ctx.step.value;
+  const big = largeStep();
+  const current = ctx.values.value[index.value] ?? ctx.min.value;
+  let delta: number;
+  switch (event.key) {
+    case 'ArrowRight':
+      delta = horizontal ? (rtl ? -step : step) : 0;
+      break;
+    case 'ArrowLeft':
+      delta = horizontal ? (rtl ? step : -step) : 0;
+      break;
+    case 'ArrowUp':
+      delta = horizontal ? 0 : step;
+      break;
+    case 'ArrowDown':
+      delta = horizontal ? 0 : -step;
+      break;
+    case 'PageUp':
+      delta = big;
+      break;
+    case 'PageDown':
+      delta = -big;
+      break;
+    case 'Home':
+      event.preventDefault();
+      ctx.updateValue(index.value, ctx.min.value);
+      return;
+    case 'End':
+      event.preventDefault();
+      ctx.updateValue(index.value, ctx.max.value);
+      return;
+    default:
+      return;
+  }
+  if (delta === 0) return;
+  event.preventDefault();
+  ctx.updateValue(index.value, current + delta);
+}
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :ref="forwardRef"
+    role="slider"
+    :tabindex="ctx.disabled.value ? -1 : 0"
+    :aria-valuemin="ctx.min.value"
+    :aria-valuemax="ctx.max.value"
+    :aria-valuenow="value"
+    :aria-orientation="ctx.orientation.value"
+    :aria-disabled="ctx.disabled.value || undefined"
+    :data-disabled="ctx.disabled.value ? '' : undefined"
+    :data-orientation="ctx.orientation.value"
+    :style="positionStyle"
+    @keydown="onKeyDown"
+  >
+    <slot :value="value" :percent="percentage" />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/slider/SliderTrack.vue b/vue/primitives/src/slider/SliderTrack.vue
new file mode 100644
index 0000000..894c1fe
--- /dev/null
+++ b/vue/primitives/src/slider/SliderTrack.vue
@@ -0,0 +1,41 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+export interface SliderTrackProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { onBeforeUnmount, watch } from 'vue';
+import { useForwardExpose } from '@robonen/vue';
+import { useSliderContext } from './context';
+
+const { as = 'span' } = defineProps<SliderTrackProps>();
+const ctx = useSliderContext();
+const { forwardRef, currentElement } = useForwardExpose();
+
+watch(currentElement, (node) => {
+  ctx.trackRef.value = node ?? null;
+});
+onBeforeUnmount(() => {
+  ctx.trackRef.value = null;
+});
+
+function onPointerDown(event: PointerEvent): void {
+  if (ctx.disabled.value) return;
+  event.preventDefault();
+  (event.target as HTMLElement).setPointerCapture?.(event.pointerId);
+  ctx.startDragFromTrack(event);
+}
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :ref="forwardRef"
+    :data-disabled="ctx.disabled.value ? '' : undefined"
+    :data-orientation="ctx.orientation.value"
+    @pointerdown="onPointerDown"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/slider/__test__/Slider.test.ts b/vue/primitives/src/slider/__test__/Slider.test.ts
new file mode 100644
index 0000000..1df9130
--- /dev/null
+++ b/vue/primitives/src/slider/__test__/Slider.test.ts
@@ -0,0 +1,227 @@
+import { mount } from '@vue/test-utils';
+import type { VueWrapper } from '@vue/test-utils';
+import { afterEach, describe, expect, it } from 'vitest';
+import { defineComponent, h, nextTick, ref } from 'vue';
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from '../index';
+
+const wrappers: Array<VueWrapper<any>> = [];
+
+afterEach(() => {
+  while (wrappers.length) wrappers.pop()!.unmount();
+  document.body.innerHTML = '';
+});
+
+function track<T extends VueWrapper<any>>(w: T): T {
+  wrappers.push(w);
+  return w;
+}
+
+function mountSingle(opts: Partial<{ min: number; max: number; step: number; defaultValue: number; disabled: boolean; orientation: 'horizontal' | 'vertical'; dir: 'ltr' | 'rtl' }> = {}) {
+  const model = ref<number[] | undefined>(undefined);
+  const Harness = defineComponent({
+    setup() {
+      return () => h(SliderRoot, {
+        modelValue: model.value,
+        'onUpdate:modelValue': (v: number[]) => { model.value = v; },
+        ...opts,
+      }, {
+        default: () => [
+          h(SliderTrack, null, { default: () => h(SliderRange) }),
+          h(SliderThumb, { 'aria-label': 'Volume' }),
+        ],
+      });
+    },
+  });
+  const w = track(mount(Harness, { attachTo: document.body }));
+  return { wrapper: w, model };
+}
+
+function mountRange(opts: Partial<{ min: number; max: number; step: number; defaultValue: number[]; minStepsBetweenThumbs: number }> = {}) {
+  const model = ref<number[] | undefined>(undefined);
+  const Harness = defineComponent({
+    setup() {
+      return () => h(SliderRoot, {
+        modelValue: model.value,
+        'onUpdate:modelValue': (v: number[]) => { model.value = v; },
+        ...opts,
+      }, {
+        default: () => [
+          h(SliderTrack, null, { default: () => h(SliderRange) }),
+          h(SliderThumb, { id: 'thumb-0' }),
+          h(SliderThumb, { id: 'thumb-1' }),
+        ],
+      });
+    },
+  });
+  const w = track(mount(Harness, { attachTo: document.body }));
+  return { wrapper: w, model };
+}
+
+function keydown(el: Element, key: string): void {
+  const event = new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true });
+  el.dispatchEvent(event);
+}
+
+describe('Slider — single thumb', () => {
+  it('renders with role="slider" and ARIA attrs', async () => {
+    mountSingle({ defaultValue: 40, min: 0, max: 100 });
+    await nextTick();
+    const thumb = document.querySelector<HTMLElement>('[role="slider"]')!;
+    expect(thumb).toBeTruthy();
+    expect(thumb.getAttribute('aria-valuemin')).toBe('0');
+    expect(thumb.getAttribute('aria-valuemax')).toBe('100');
+    expect(thumb.getAttribute('aria-valuenow')).toBe('40');
+    expect(thumb.getAttribute('aria-orientation')).toBe('horizontal');
+    expect(thumb.tabIndex).toBe(0);
+  });
+
+  it('ArrowRight/ArrowLeft adjust by step', async () => {
+    const { model } = mountSingle({ defaultValue: 50, step: 5 });
+    await nextTick();
+    const thumb = document.querySelector<HTMLElement>('[role="slider"]')!;
+    keydown(thumb, 'ArrowRight');
+    await nextTick();
+    expect(model.value).toEqual([55]);
+    keydown(thumb, 'ArrowLeft');
+    keydown(thumb, 'ArrowLeft');
+    await nextTick();
+    expect(model.value).toEqual([45]);
+  });
+
+  it('ArrowLeft is reversed in RTL', async () => {
+    const { model } = mountSingle({ defaultValue: 50, step: 5, dir: 'rtl' });
+    await nextTick();
+    const thumb = document.querySelector<HTMLElement>('[role="slider"]')!;
+    keydown(thumb, 'ArrowLeft');
+    await nextTick();
+    expect(model.value).toEqual([55]);
+  });
+
+  it('Home/End clamp to min/max', async () => {
+    const { model } = mountSingle({ defaultValue: 50, min: 0, max: 100 });
+    await nextTick();
+    const thumb = document.querySelector<HTMLElement>('[role="slider"]')!;
+    keydown(thumb, 'Home');
+    await nextTick();
+    expect(model.value).toEqual([0]);
+    keydown(thumb, 'End');
+    await nextTick();
+    expect(model.value).toEqual([100]);
+  });
+
+  it('PageUp / PageDown step by 10×', async () => {
+    const { model } = mountSingle({ defaultValue: 50, step: 1 });
+    await nextTick();
+    const thumb = document.querySelector<HTMLElement>('[role="slider"]')!;
+    keydown(thumb, 'PageUp');
+    await nextTick();
+    expect(model.value).toEqual([60]);
+    keydown(thumb, 'PageDown');
+    keydown(thumb, 'PageDown');
+    await nextTick();
+    expect(model.value).toEqual([40]);
+  });
+
+  it('clamps at min / max', async () => {
+    const { model } = mountSingle({ defaultValue: 95, min: 0, max: 100, step: 10 });
+    await nextTick();
+    const thumb = document.querySelector<HTMLElement>('[role="slider"]')!;
+    keydown(thumb, 'ArrowRight');
+    await nextTick();
+    expect(model.value).toEqual([100]);
+    keydown(thumb, 'End');
+    await nextTick();
+    expect(model.value).toEqual([100]);
+    keydown(thumb, 'Home');
+    await nextTick();
+    expect(model.value).toEqual([0]);
+    keydown(thumb, 'ArrowLeft');
+    await nextTick();
+    expect(model.value).toEqual([0]);
+  });
+
+  it('disabled: tabindex=-1 and keys do nothing', async () => {
+    const { model } = mountSingle({ defaultValue: 50, disabled: true });
+    await nextTick();
+    const thumb = document.querySelector<HTMLElement>('[role="slider"]')!;
+    expect(thumb.tabIndex).toBe(-1);
+    expect(thumb.getAttribute('aria-disabled')).toBe('true');
+    keydown(thumb, 'ArrowRight');
+    await nextTick();
+    expect(model.value).toBeUndefined();
+  });
+
+  it('vertical orientation reports aria-orientation', async () => {
+    mountSingle({ defaultValue: 50, orientation: 'vertical' });
+    await nextTick();
+    const thumb = document.querySelector<HTMLElement>('[role="slider"]')!;
+    expect(thumb.getAttribute('aria-orientation')).toBe('vertical');
+  });
+
+  it('writes hidden input when name is set', async () => {
+    const Harness = defineComponent({
+      setup: () => () => h(SliderRoot, { defaultValue: 30, name: 'volume' }, {
+        default: () => [
+          h(SliderTrack, null, { default: () => h(SliderRange) }),
+          h(SliderThumb),
+        ],
+      }),
+    });
+    track(mount(Harness, { attachTo: document.body }));
+    await nextTick();
+    const input = document.querySelector<HTMLInputElement>('input[type="hidden"][name="volume"]')!;
+    expect(input).toBeTruthy();
+    expect(input.value).toBe('30');
+  });
+});
+
+describe('Slider — range (two thumbs)', () => {
+  it('renders two thumbs with independent aria-valuenow', async () => {
+    mountRange({ defaultValue: [20, 80] });
+    await nextTick();
+    const thumbs = document.querySelectorAll<HTMLElement>('[role="slider"]');
+    expect(thumbs).toHaveLength(2);
+    expect(thumbs[0]!.getAttribute('aria-valuenow')).toBe('20');
+    expect(thumbs[1]!.getAttribute('aria-valuenow')).toBe('80');
+  });
+
+  it('preserves order by clamping against neighbour', async () => {
+    const { model } = mountRange({ defaultValue: [40, 50], step: 1 });
+    await nextTick();
+    const thumbs = document.querySelectorAll<HTMLElement>('[role="slider"]');
+    // Push first thumb right past second
+    for (let i = 0; i < 20; i++) keydown(thumbs[0]!, 'ArrowRight');
+    await nextTick();
+    expect(model.value![0]).toBeLessThanOrEqual(model.value![1]!);
+    expect(model.value![0]).toBe(50);
+  });
+
+  it('respects minStepsBetweenThumbs', async () => {
+    const { model } = mountRange({ defaultValue: [30, 50], step: 1, minStepsBetweenThumbs: 10 });
+    await nextTick();
+    const thumbs = document.querySelectorAll<HTMLElement>('[role="slider"]');
+    // Try to move first thumb up; should stop 10 below second.
+    for (let i = 0; i < 30; i++) keydown(thumbs[0]!, 'ArrowRight');
+    await nextTick();
+    expect(model.value![0]).toBe(40);
+    expect(model.value![1]).toBe(50);
+  });
+
+  it('writes hidden inputs with [] suffix for range', async () => {
+    const Harness = defineComponent({
+      setup: () => () => h(SliderRoot, { defaultValue: [10, 90], name: 'range' }, {
+        default: () => [
+          h(SliderTrack, null, { default: () => h(SliderRange) }),
+          h(SliderThumb),
+          h(SliderThumb),
+        ],
+      }),
+    });
+    track(mount(Harness, { attachTo: document.body }));
+    await nextTick();
+    const inputs = document.querySelectorAll<HTMLInputElement>('input[type="hidden"][name="range[]"]');
+    expect(inputs).toHaveLength(2);
+    expect(inputs[0]!.value).toBe('10');
+    expect(inputs[1]!.value).toBe('90');
+  });
+});
diff --git a/vue/primitives/src/slider/context.ts b/vue/primitives/src/slider/context.ts
new file mode 100644
index 0000000..d11be03
--- /dev/null
+++ b/vue/primitives/src/slider/context.ts
@@ -0,0 +1,36 @@
+import type { Ref } from 'vue';
+import { useContextFactory } from '@robonen/vue';
+
+export type SliderOrientation = 'horizontal' | 'vertical';
+export type SliderDirection = 'ltr' | 'rtl';
+
+/**
+ * Context shared between `SliderRoot` and its descendants.
+ *
+ * Scalar props are exposed as plain `Ref<T>` values, but `SliderRoot` builds
+ * them with `toRef(() => prop)` — a `GetterRefImpl` that is reactive without
+ * allocating a `ReactiveEffect` / cache (unlike `computed`). For identity
+ * passthrough of scalar props this avoids seven redundant effects per
+ * instance while keeping template auto-unwrap and `.value` ergonomics.
+ */
+export interface SliderContext {
+  values: Ref<number[]>;
+  min: Ref<number>;
+  max: Ref<number>;
+  step: Ref<number>;
+  orientation: Ref<SliderOrientation>;
+  direction: Ref<SliderDirection>;
+  disabled: Ref<boolean>;
+  inverted: Ref<boolean>;
+  trackRef: Ref<HTMLElement | null>;
+  registerThumb: (el: HTMLElement) => number;
+  unregisterThumb: (el: HTMLElement) => void;
+  getThumbIndex: (el: HTMLElement) => number;
+  updateValue: (index: number, next: number) => void;
+  startDragFromTrack: (event: PointerEvent) => void;
+}
+
+const ctx = useContextFactory<SliderContext>('SliderContext');
+
+export const provideSliderContext = ctx.provide;
+export const useSliderContext = ctx.inject;
diff --git a/vue/primitives/src/slider/index.ts b/vue/primitives/src/slider/index.ts
new file mode 100644
index 0000000..ecc31b2
--- /dev/null
+++ b/vue/primitives/src/slider/index.ts
@@ -0,0 +1,9 @@
+export { default as SliderRange } from './SliderRange.vue';
+export { default as SliderRoot } from './SliderRoot.vue';
+export { default as SliderThumb } from './SliderThumb.vue';
+export { default as SliderTrack } from './SliderTrack.vue';
+export type { SliderDirection, SliderOrientation } from './context';
+export type { SliderRangeProps } from './SliderRange.vue';
+export type { SliderRootEmits, SliderRootProps } from './SliderRoot.vue';
+export type { SliderThumbProps } from './SliderThumb.vue';
+export type { SliderTrackProps } from './SliderTrack.vue';
diff --git a/vue/primitives/src/slider/utils.ts b/vue/primitives/src/slider/utils.ts
new file mode 100644
index 0000000..e6e8c39
--- /dev/null
+++ b/vue/primitives/src/slider/utils.ts
@@ -0,0 +1,70 @@
+/**
+ * Returns the number of decimal digits in a numeric `step`.
+ *
+ * Used by {@link roundToStep} to compensate floating-point drift without
+ * allocating strings on every invocation (the cost is paid once per `step`
+ * change and cached by the caller).
+ */
+export function getStepDecimals(step: number): number {
+  if (!Number.isFinite(step)) return 0;
+  const str = String(step);
+  const dot = str.indexOf('.');
+  if (dot === -1) return 0;
+  return str.length - dot - 1;
+}
+
+/**
+ * Snap `value` to the nearest multiple of `step` anchored at `min`.
+ *
+ * `decimals` must be pre-computed by the caller via {@link getStepDecimals}
+ * and cached per-`step` — this function is on the pointermove hot path.
+ */
+export function roundToStep(value: number, step: number, min: number, decimals: number): number {
+  const nearest = Math.round((value - min) / step) * step + min;
+  return decimals > 0 ? Number(nearest.toFixed(decimals)) : nearest;
+}
+
+/**
+ * Linear projection of `value` from the input domain onto the output range.
+ *
+ * Plain (non-curried) form — no per-call closure allocation.
+ */
+export function scaleLinear(value: number, d0: number, d1: number, r0: number, r1: number): number {
+  if (d0 === d1 || r0 === r1) return r0;
+  return r0 + ((r1 - r0) / (d1 - d0)) * (value - d0);
+}
+
+/**
+ * Verify that adjacent values in an already-sorted `values` array differ by
+ * at least `minStepsBetween * step`.
+ *
+ * The caller is expected to maintain the invariant that `values` is sorted
+ * ascending (the slider Root guarantees this by construction).
+ */
+export function hasMinStepsBetweenSortedValues(values: number[], minStepsBetween: number, step: number): boolean {
+  if (minStepsBetween <= 0 || values.length < 2) return true;
+  const minGap = minStepsBetween * step;
+  for (let i = 1; i < values.length; i++) {
+    if (values[i]! - values[i - 1]! < minGap) return false;
+  }
+  return true;
+}
+
+/**
+ * Index of the value in `values` closest to `nextValue`.
+ *
+ * Single-pass — no intermediate distance array.
+ */
+export function getClosestValueIndex(values: number[], nextValue: number): number {
+  if (values.length <= 1) return 0;
+  let bestIdx = 0;
+  let bestDist = Math.abs(values[0]! - nextValue);
+  for (let i = 1; i < values.length; i++) {
+    const d = Math.abs(values[i]! - nextValue);
+    if (d < bestDist) {
+      bestDist = d;
+      bestIdx = i;
+    }
+  }
+  return bestIdx;
+}
diff --git a/vue/primitives/src/stepper/StepperDescription.vue b/vue/primitives/src/stepper/StepperDescription.vue
new file mode 100644
index 0000000..ff68887
--- /dev/null
+++ b/vue/primitives/src/stepper/StepperDescription.vue
@@ -0,0 +1,26 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface StepperDescriptionProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { useStepperItemContext } from './context';
+
+const { as = 'p' } = defineProps<StepperDescriptionProps>();
+
+const item = useStepperItemContext();
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :id="item.descriptionId"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/stepper/StepperIndicator.vue b/vue/primitives/src/stepper/StepperIndicator.vue
new file mode 100644
index 0000000..f47b722
--- /dev/null
+++ b/vue/primitives/src/stepper/StepperIndicator.vue
@@ -0,0 +1,28 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface StepperIndicatorProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { useStepperItemContext } from './context';
+
+const { as = 'div' } = defineProps<StepperIndicatorProps>();
+
+const item = useStepperItemContext();
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :data-state="item.state.value"
+  >
+    <slot :step="item.step.value" :state="item.state.value">
+      {{ item.step.value }}
+    </slot>
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/stepper/StepperItem.vue b/vue/primitives/src/stepper/StepperItem.vue
new file mode 100644
index 0000000..4351a74
--- /dev/null
+++ b/vue/primitives/src/stepper/StepperItem.vue
@@ -0,0 +1,63 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface StepperItemProps extends PrimitiveProps {
+  /** 1-based index associating this item with a step. */
+  step: number;
+  /** Disable this specific step. */
+  disabled?: boolean;
+  /** Mark the step as completed regardless of current `modelValue`. */
+  completed?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, toRef } from 'vue';
+import { provideStepperItemContext, useStepperRootContext } from './context';
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { useId } from '../config-provider';
+
+const { as = 'div', step, disabled = false, completed = false } = defineProps<StepperItemProps>();
+
+const root = useStepperRootContext();
+const { forwardRef } = useForwardExpose();
+
+const state = computed(() => {
+  if (completed) return 'completed' as const;
+  if (root.value.value === step) return 'active' as const;
+  if (root.value.value > step) return 'completed' as const;
+  return 'inactive' as const;
+});
+
+const focusable = computed(() => {
+  if (disabled || root.disabled.value) return false;
+  if (!root.linear.value) return true;
+  return step <= root.value.value + 1;
+});
+
+const titleId = useId(undefined, 'stepper-item-title').value;
+const descriptionId = useId(undefined, 'stepper-item-description').value;
+
+provideStepperItemContext({
+  step: toRef(() => step),
+  state,
+  disabled: toRef(() => disabled || root.disabled.value),
+  focusable,
+  titleId,
+  descriptionId,
+});
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :aria-current="state === 'active' ? 'step' : undefined"
+    :data-state="state"
+    :data-orientation="root.orientation.value"
+    :data-disabled="disabled || root.disabled.value || !focusable ? '' : undefined"
+  >
+    <slot :state="state" :step="step" />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/stepper/StepperRoot.vue b/vue/primitives/src/stepper/StepperRoot.vue
new file mode 100644
index 0000000..497839a
--- /dev/null
+++ b/vue/primitives/src/stepper/StepperRoot.vue
@@ -0,0 +1,140 @@
+<script lang="ts">
+import type { StepperDirection, StepperOrientation } from './context';
+import type { PrimitiveProps } from '../primitive';
+
+export interface StepperRootProps extends PrimitiveProps {
+  /** Controlled active step (1-based). Use `v-model`. */
+  modelValue?: number;
+  /** Uncontrolled initial step. @default 1 */
+  defaultValue?: number;
+  /** Orientation. @default 'horizontal' */
+  orientation?: StepperOrientation;
+  /** Writing direction. Falls back to `ConfigProvider` when omitted. */
+  dir?: StepperDirection;
+  /** Require steps to be completed in order. @default true */
+  linear?: boolean;
+  /** Disable the entire stepper. */
+  disabled?: boolean;
+}
+
+export interface StepperRootEmits {
+  'update:modelValue': [value: number];
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, toRef, watch } from 'vue';
+import { resolveNextIndex, rovingKeyToAction } from '../utils/roving-focus';
+import { Primitive } from '../primitive';
+import { provideStepperRootContext } from './context';
+import { useCollectionProvider } from '../collection';
+import { useConfig } from '../config-provider';
+import { useForwardExpose } from '@robonen/vue';
+
+const {
+  as = 'div',
+  modelValue,
+  defaultValue = 1,
+  orientation = 'horizontal',
+  linear = true,
+  disabled = false,
+  dir,
+} = defineProps<StepperRootProps>();
+
+const emit = defineEmits<StepperRootEmits>();
+
+const { forwardRef } = useForwardExpose();
+const config = useConfig();
+
+const direction = computed(() => dir ?? config.dir.value);
+
+const localValue = ref<number>(modelValue ?? defaultValue);
+
+watch(() => modelValue, (v) => {
+  if (v === undefined || v === localValue.value) return;
+  localValue.value = v;
+});
+
+const { getItems, CollectionSlot } = useCollectionProvider();
+const total = computed(() => getItems(true).length);
+
+function commit(next: number): void {
+  if (next === localValue.value) return;
+  localValue.value = next;
+  emit('update:modelValue', next);
+}
+
+function goToStep(step: number): void {
+  if (disabled || step < 1) return;
+  const items = getItems(true);
+  const count = items.length;
+  if (count > 0 && step > count) return;
+  // respect linear gate — at most one step ahead of current.
+  if (linear && step > localValue.value + 1) return;
+  // skip if target item is marked disabled in DOM.
+  const target = items[step - 1]?.ref;
+  if (target?.hasAttribute('data-disabled')) return;
+  commit(step);
+}
+
+function onTriggerKeyDown(event: KeyboardEvent, el: HTMLElement): void {
+  const action = rovingKeyToAction(event, {
+    orientation,
+    dir: direction.value,
+    loop: false,
+  });
+  if (!action) return;
+  event.preventDefault();
+  // Collect enabled triggers with a single pass (PACKED array via push — no filter closure).
+  const items = getItems(true);
+  const enabled: HTMLElement[] = [];
+  for (let i = 0; i < items.length; i++) {
+    const ref = items[i]!.ref;
+    if (!ref.hasAttribute('data-disabled')) enabled.push(ref);
+  }
+  if (enabled.length === 0) return;
+  if (action.absolute === 'home') {
+    enabled[0]!.focus();
+    return;
+  }
+  if (action.absolute === 'end') {
+    enabled[enabled.length - 1]!.focus();
+    return;
+  }
+  const current = enabled.indexOf(el);
+  const nextIdx = resolveNextIndex(current === -1 ? 0 : current, action.delta, enabled.length, false);
+  enabled[nextIdx]!.focus();
+}
+
+provideStepperRootContext({
+  value: localValue,
+  total,
+  orientation: toRef(() => orientation),
+  direction,
+  linear: toRef(() => linear),
+  disabled: toRef(() => disabled),
+  goToStep,
+  onTriggerKeyDown,
+});
+</script>
+
+<template>
+  <CollectionSlot>
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      role="group"
+      aria-label="progress"
+      :data-orientation="orientation"
+      :data-linear="linear ? '' : undefined"
+      :data-disabled="disabled ? '' : undefined"
+      :dir="direction"
+    >
+      <slot
+        :value="localValue"
+        :total="total"
+        :go-to-step="goToStep"
+      />
+    </Primitive>
+  </CollectionSlot>
+</template>
diff --git a/vue/primitives/src/stepper/StepperSeparator.vue b/vue/primitives/src/stepper/StepperSeparator.vue
new file mode 100644
index 0000000..089848e
--- /dev/null
+++ b/vue/primitives/src/stepper/StepperSeparator.vue
@@ -0,0 +1,30 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface StepperSeparatorProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { useStepperItemContext, useStepperRootContext } from './context';
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'div' } = defineProps<StepperSeparatorProps>();
+
+const root = useStepperRootContext();
+const item = useStepperItemContext();
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    role="separator"
+    aria-hidden="true"
+    :data-orientation="root.orientation.value"
+    :data-state="item.state.value"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/stepper/StepperTitle.vue b/vue/primitives/src/stepper/StepperTitle.vue
new file mode 100644
index 0000000..850a5e8
--- /dev/null
+++ b/vue/primitives/src/stepper/StepperTitle.vue
@@ -0,0 +1,26 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface StepperTitleProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { useStepperItemContext } from './context';
+
+const { as = 'h4' } = defineProps<StepperTitleProps>();
+
+const item = useStepperItemContext();
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :id="item.titleId"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/stepper/StepperTrigger.vue b/vue/primitives/src/stepper/StepperTrigger.vue
new file mode 100644
index 0000000..b672fdf
--- /dev/null
+++ b/vue/primitives/src/stepper/StepperTrigger.vue
@@ -0,0 +1,59 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface StepperTriggerProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { useStepperItemContext, useStepperRootContext } from './context';
+import { Primitive } from '../primitive';
+import { useCollectionInjector } from '../collection';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'button' } = defineProps<StepperTriggerProps>();
+
+const root = useStepperRootContext();
+const item = useStepperItemContext();
+const { forwardRef, currentElement } = useForwardExpose();
+const { CollectionItem } = useCollectionInjector();
+
+function onMouseDown(event: MouseEvent): void {
+  if (!item.focusable.value || event.ctrlKey) {
+    event.preventDefault();
+    return;
+  }
+  root.goToStep(item.step.value);
+}
+
+function onKeyDown(event: KeyboardEvent): void {
+  if (item.disabled.value) return;
+  if ((event.key === 'Enter' || event.key === ' ') && !event.ctrlKey && !event.shiftKey) {
+    event.preventDefault();
+    root.goToStep(item.step.value);
+    return;
+  }
+  if (!currentElement.value) return;
+  root.onTriggerKeyDown(event, currentElement.value);
+}
+</script>
+
+<template>
+  <CollectionItem>
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      :type="as === 'button' ? 'button' : undefined"
+      :tabindex="item.focusable.value ? 0 : -1"
+      :disabled="item.disabled.value || !item.focusable.value || undefined"
+      :data-state="item.state.value"
+      :data-orientation="root.orientation.value"
+      :data-disabled="item.disabled.value || !item.focusable.value ? '' : undefined"
+      :aria-labelledby="item.titleId"
+      :aria-describedby="item.descriptionId"
+      @mousedown.left="onMouseDown"
+      @keydown="onKeyDown"
+    >
+      <slot :state="item.state.value" :step="item.step.value" />
+    </Primitive>
+  </CollectionItem>
+</template>
diff --git a/vue/primitives/src/stepper/__test__/Stepper.test.ts b/vue/primitives/src/stepper/__test__/Stepper.test.ts
new file mode 100644
index 0000000..bf8a73f
--- /dev/null
+++ b/vue/primitives/src/stepper/__test__/Stepper.test.ts
@@ -0,0 +1,176 @@
+import {
+  StepperDescription,
+  StepperIndicator,
+  StepperItem,
+  StepperRoot,
+  StepperSeparator,
+  StepperTitle,
+  StepperTrigger,
+} from '../index';
+import { defineComponent, h, nextTick, ref } from 'vue';
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+function createStepper(rootProps: Record<string, unknown> = {}, stepCount = 3, itemProps: Record<number, Record<string, unknown>> = {}) {
+  return mount(
+    defineComponent({
+      setup() {
+        return () => h(
+          StepperRoot,
+          rootProps,
+          {
+            default: () => Array.from({ length: stepCount }, (_, i) => {
+              const step = i + 1;
+              return h(
+                StepperItem,
+                { key: step, step, ...itemProps[step] },
+                {
+                  default: () => [
+                    h(StepperTrigger, null, { default: () => [
+                      h(StepperIndicator),
+                      h(StepperTitle, null, { default: () => `Step ${step}` }),
+                      h(StepperDescription, null, { default: () => `Description ${step}` }),
+                    ] }),
+                    i < stepCount - 1 ? h(StepperSeparator) : null,
+                  ],
+                },
+              );
+            }),
+          },
+        );
+      },
+    }),
+    { attachTo: document.body },
+  );
+}
+
+function press(el: Element, key: string) {
+  el.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
+}
+
+describe('Stepper', () => {
+  it('renders with role=group', () => {
+    const w = createStepper();
+    const root = w.find('[role="group"]');
+    expect(root.exists()).toBe(true);
+    expect(root.attributes('aria-label')).toBe('progress');
+    w.unmount();
+  });
+
+  it('first item is active by default (step=1)', () => {
+    const w = createStepper();
+    const items = w.findAllComponents(StepperItem);
+    expect(items[0]!.attributes('data-state')).toBe('active');
+    expect(items[0]!.attributes('aria-current')).toBe('step');
+    expect(items[1]!.attributes('data-state')).toBe('inactive');
+    w.unmount();
+  });
+
+  it('honors defaultValue', () => {
+    const w = createStepper({ defaultValue: 2 });
+    const items = w.findAllComponents(StepperItem);
+    expect(items[0]!.attributes('data-state')).toBe('completed');
+    expect(items[1]!.attributes('data-state')).toBe('active');
+    expect(items[2]!.attributes('data-state')).toBe('inactive');
+    w.unmount();
+  });
+
+  it('v-model moves the active step', async () => {
+    const value = ref(1);
+    const w = mount(
+      defineComponent({
+        setup() {
+          return () => h(
+            StepperRoot,
+            { modelValue: value.value, 'onUpdate:modelValue': (v: number) => (value.value = v) },
+            {
+              default: () => [1, 2, 3].map(step =>
+                h(StepperItem, { key: step, step }, { default: () => h(StepperTrigger, null, { default: () => `S${step}` }) }),
+              ),
+            },
+          );
+        },
+      }),
+      { attachTo: document.body },
+    );
+    const triggers = w.findAll('button');
+    await triggers[1]!.trigger('mousedown');
+    await nextTick();
+    expect(value.value).toBe(2);
+    w.unmount();
+  });
+
+  it('linear mode blocks skipping ahead', async () => {
+    const w = createStepper();
+    const triggers = w.findAll('button');
+    await triggers[2]!.trigger('mousedown'); // try to skip to 3
+    await nextTick();
+    const items = w.findAllComponents(StepperItem);
+    expect(items[0]!.attributes('data-state')).toBe('active'); // unchanged
+    w.unmount();
+  });
+
+  it('non-linear mode allows arbitrary step', async () => {
+    const w = createStepper({ linear: false });
+    const triggers = w.findAll('button');
+    await triggers[2]!.trigger('mousedown');
+    await nextTick();
+    const items = w.findAllComponents(StepperItem);
+    expect(items[2]!.attributes('data-state')).toBe('active');
+    w.unmount();
+  });
+
+  it('disabled item is not focusable and cannot be activated', async () => {
+    const w = createStepper({ linear: false }, 3, { 2: { disabled: true } });
+    const items = w.findAllComponents(StepperItem);
+    expect(items[1]!.attributes('data-disabled')).toBe('');
+    const triggers = w.findAll('button');
+    expect(triggers[1]!.attributes('tabindex')).toBe('-1');
+    await triggers[1]!.trigger('mousedown');
+    await nextTick();
+    expect(items[0]!.attributes('data-state')).toBe('active'); // unchanged
+    w.unmount();
+  });
+
+  it('Enter/Space on trigger activates step', async () => {
+    const w = createStepper({ linear: false });
+    const triggers = w.findAll('button');
+    (triggers[1]!.element as HTMLElement).focus();
+    press(triggers[1]!.element, 'Enter');
+    await nextTick();
+    const items = w.findAllComponents(StepperItem);
+    expect(items[1]!.attributes('data-state')).toBe('active');
+    w.unmount();
+  });
+
+  it('ArrowRight / ArrowLeft move focus between triggers', () => {
+    const w = createStepper({ linear: false });
+    const triggers = w.findAll('button').map(t => t.element as HTMLElement);
+    triggers[0]!.focus();
+    press(triggers[0]!, 'ArrowRight');
+    expect(document.activeElement).toBe(triggers[1]);
+    press(triggers[1]!, 'ArrowRight');
+    expect(document.activeElement).toBe(triggers[2]);
+    press(triggers[2]!, 'ArrowLeft');
+    expect(document.activeElement).toBe(triggers[1]);
+    w.unmount();
+  });
+
+  it('Home / End jump to first / last trigger', () => {
+    const w = createStepper({ linear: false });
+    const triggers = w.findAll('button').map(t => t.element as HTMLElement);
+    triggers[1]!.focus();
+    press(triggers[1]!, 'End');
+    expect(document.activeElement).toBe(triggers[2]);
+    press(triggers[2]!, 'Home');
+    expect(document.activeElement).toBe(triggers[0]);
+    w.unmount();
+  });
+
+  it('completed prop forces completed state', () => {
+    const w = createStepper({}, 3, { 1: { completed: true } });
+    const items = w.findAllComponents(StepperItem);
+    expect(items[0]!.attributes('data-state')).toBe('completed');
+    w.unmount();
+  });
+});
diff --git a/vue/primitives/src/stepper/context.ts b/vue/primitives/src/stepper/context.ts
new file mode 100644
index 0000000..44f04b8
--- /dev/null
+++ b/vue/primitives/src/stepper/context.ts
@@ -0,0 +1,43 @@
+import type { ComputedRef, Ref } from 'vue';
+import { useContextFactory } from '@robonen/vue';
+
+export type StepperOrientation = 'horizontal' | 'vertical';
+export type StepperDirection = 'ltr' | 'rtl';
+export type StepperState = 'completed' | 'active' | 'inactive';
+
+export interface StepperRootContext {
+  /** Currently active step (1-based). */
+  value: Ref<number>;
+  /** Total registered items, tracked through the Collection. */
+  total: ComputedRef<number>;
+  /** Orientation of the stepper — drives arrow-key axis. */
+  orientation: Ref<StepperOrientation>;
+  /** Writing direction. */
+  direction: Ref<StepperDirection>;
+  /** When `true`, steps must be completed in order. */
+  linear: Ref<boolean>;
+  /** Whether the whole stepper is disabled. */
+  disabled: Ref<boolean>;
+
+  goToStep: (step: number) => void;
+  onTriggerKeyDown: (event: KeyboardEvent, el: HTMLElement) => void;
+}
+
+export interface StepperItemContext {
+  step: Ref<number>;
+  state: Ref<StepperState>;
+  disabled: Ref<boolean>;
+  focusable: Ref<boolean>;
+  titleId: string;
+  descriptionId: string;
+}
+
+export const {
+  inject: useStepperRootContext,
+  provide: provideStepperRootContext,
+} = useContextFactory<StepperRootContext>('stepper');
+
+export const {
+  inject: useStepperItemContext,
+  provide: provideStepperItemContext,
+} = useContextFactory<StepperItemContext>('stepper-item');
diff --git a/vue/primitives/src/stepper/index.ts b/vue/primitives/src/stepper/index.ts
new file mode 100644
index 0000000..97c6ce6
--- /dev/null
+++ b/vue/primitives/src/stepper/index.ts
@@ -0,0 +1,27 @@
+export { default as StepperRoot } from './StepperRoot.vue';
+export { default as StepperItem } from './StepperItem.vue';
+export { default as StepperTrigger } from './StepperTrigger.vue';
+export { default as StepperIndicator } from './StepperIndicator.vue';
+export { default as StepperTitle } from './StepperTitle.vue';
+export { default as StepperDescription } from './StepperDescription.vue';
+export { default as StepperSeparator } from './StepperSeparator.vue';
+
+export {
+  provideStepperRootContext,
+  provideStepperItemContext,
+  useStepperRootContext,
+  useStepperItemContext,
+  type StepperRootContext,
+  type StepperItemContext,
+  type StepperState,
+  type StepperOrientation,
+  type StepperDirection,
+} from './context';
+
+export type { StepperRootProps, StepperRootEmits } from './StepperRoot.vue';
+export type { StepperItemProps } from './StepperItem.vue';
+export type { StepperTriggerProps } from './StepperTrigger.vue';
+export type { StepperIndicatorProps } from './StepperIndicator.vue';
+export type { StepperTitleProps } from './StepperTitle.vue';
+export type { StepperDescriptionProps } from './StepperDescription.vue';
+export type { StepperSeparatorProps } from './StepperSeparator.vue';
diff --git a/vue/primitives/src/switch/Switch.vue b/vue/primitives/src/switch/Switch.vue
new file mode 100644
index 0000000..dc1f24a
--- /dev/null
+++ b/vue/primitives/src/switch/Switch.vue
@@ -0,0 +1,114 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface SwitchProps<T = boolean> extends PrimitiveProps {
+
+  /** Value representing the "on" state. Defaults to `true`. */
+  truthy?: T;
+  /** Value representing the "off" state. Defaults to `false`. */
+  falsy?: T;
+  /** Initial uncontrolled value. Defaults to `falsy`. */
+  defaultValue?: T;
+  disabled?: boolean;
+  required?: boolean;
+  /** Name for the hidden form input. If provided, a hidden input mirrors state. */
+  name?: string;
+}
+</script>
+
+<script setup lang="ts" generic="T = boolean">
+import type { Ref } from 'vue';
+import { Primitive } from '../primitive';
+import { computed, ref, toRaw } from 'vue';
+import { useForwardExpose } from '@robonen/vue';
+
+const {
+  truthy = true as unknown as T,
+  falsy = false as unknown as T,
+  defaultValue,
+  disabled = false,
+  required = false,
+  name,
+  as = 'button',
+} = defineProps<SwitchProps<T>>();
+
+const { forwardRef } = useForwardExpose();
+
+const local = ref<T>((defaultValue ?? falsy) as T) as Ref<T>;
+
+const value = defineModel<T>({
+  get: v => (v ?? local.value) as T,
+  set: (v) => {
+    local.value = v as T;
+    return v;
+  },
+});
+
+const checked = computed<boolean>(() => Object.is(toRaw(value.value), toRaw(truthy)));
+
+function toggle() {
+  if (disabled) return;
+  value.value = checked.value ? falsy : truthy;
+}
+
+function onClick() {
+  toggle();
+}
+
+function onKeydown(event: KeyboardEvent) {
+  // <button> handles Space/Enter natively; only synthesize for non-button hosts.
+  if (as === 'button') return;
+  if (event.key !== ' ' && event.key !== 'Enter') return;
+  event.preventDefault();
+  toggle();
+}
+
+function serialize(v: T): string {
+  if (v === null || v === undefined) return '';
+  if (typeof v === 'string') return v;
+  if (typeof v === 'number' || typeof v === 'boolean') return String(v);
+  try {
+    return JSON.stringify(v);
+  }
+  catch {
+    return String(v);
+  }
+}
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :type="as === 'button' ? 'button' : undefined"
+    role="switch"
+    :tabindex="as === 'button' ? undefined : (disabled ? -1 : 0)"
+    :aria-checked="checked"
+    :aria-required="required ? true : undefined"
+    :aria-disabled="as === 'button' ? undefined : (disabled ? true : undefined)"
+    :data-state="checked ? 'checked' : 'unchecked'"
+    :data-disabled="disabled ? '' : undefined"
+    :disabled="as === 'button' ? disabled : undefined"
+    @click="onClick"
+    @keydown="onKeydown"
+  >
+    <slot :checked="checked" :value="value" />
+    <input
+      v-if="name"
+      type="checkbox"
+      tabindex="-1"
+      aria-hidden="true"
+      :name="name"
+      :value="serialize(checked ? truthy : falsy)"
+      :checked="checked"
+      :disabled="disabled"
+      :required="required"
+      :style="{
+        position: 'absolute',
+        pointerEvents: 'none',
+        opacity: 0,
+        margin: 0,
+      }"
+    >
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/switch/__test__/Switch.test.ts b/vue/primitives/src/switch/__test__/Switch.test.ts
new file mode 100644
index 0000000..a9d8e05
--- /dev/null
+++ b/vue/primitives/src/switch/__test__/Switch.test.ts
@@ -0,0 +1,188 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import { defineComponent, h, ref } from 'vue';
+import { Switch } from '../index';
+
+describe('switch (generic)', () => {
+  describe('boolean (default)', () => {
+    it('has role="switch" and toggles on click', async () => {
+      const wrapper = mount(Switch);
+      expect(wrapper.attributes('role')).toBe('switch');
+      expect(wrapper.attributes('aria-checked')).toBe('false');
+      await wrapper.trigger('click');
+      expect(wrapper.attributes('aria-checked')).toBe('true');
+      expect(wrapper.attributes('data-state')).toBe('checked');
+    });
+
+    it('respects defaultValue', () => {
+      const wrapper = mount(Switch, { props: { defaultValue: true } });
+      expect(wrapper.attributes('aria-checked')).toBe('true');
+    });
+
+    it('renders a hidden input when name is provided', () => {
+      const wrapper = mount(Switch, { props: { name: 'agree', defaultValue: true } });
+      const input = wrapper.find('input[type="checkbox"]');
+      expect(input.exists()).toBe(true);
+      expect(input.attributes('name')).toBe('agree');
+      expect(input.attributes('value')).toBe('true');
+      expect((input.element as HTMLInputElement).checked).toBe(true);
+    });
+
+    it('does not render input without name', () => {
+      const wrapper = mount(Switch);
+      expect(wrapper.find('input').exists()).toBe(false);
+    });
+
+    it('skips toggle when disabled', async () => {
+      const wrapper = mount(Switch, { props: { disabled: true } });
+      await wrapper.trigger('click');
+      expect(wrapper.attributes('aria-checked')).toBe('false');
+    });
+
+    it('sets aria-required when required', () => {
+      const wrapper = mount(Switch, { props: { required: true } });
+      expect(wrapper.attributes('aria-required')).toBe('true');
+    });
+  });
+
+  describe('string pair ("on" / "off")', () => {
+    it('derives checked via Object.is with truthy', async () => {
+      const wrapper = mount(Switch, { props: { truthy: 'on', falsy: 'off' } });
+      expect(wrapper.attributes('aria-checked')).toBe('false');
+      await wrapper.trigger('click');
+      expect(wrapper.attributes('aria-checked')).toBe('true');
+    });
+
+    it('hidden input serializes to current truthy/falsy', async () => {
+      const wrapper = mount(Switch, {
+        props: { truthy: 'on', falsy: 'off', name: 'mode', defaultValue: 'on' },
+      });
+      const input = wrapper.find('input[type="checkbox"]');
+      expect(input.attributes('value')).toBe('on');
+      await wrapper.trigger('click');
+      expect(wrapper.find('input[type="checkbox"]').attributes('value')).toBe('off');
+    });
+
+    it('v-model emits truthy/falsy, not booleans', async () => {
+      const parent = defineComponent({
+        components: { Switch },
+        setup() {
+          const val = ref<'on' | 'off'>('off');
+          return { val };
+        },
+        render() {
+          return h(Switch, {
+            truthy: 'on',
+            falsy: 'off',
+            modelValue: this.val,
+            'onUpdate:modelValue': (v: unknown) => { this.val = v as 'on' | 'off'; },
+          });
+        },
+      });
+      const wrapper = mount(parent);
+      await wrapper.find('[role="switch"]').trigger('click');
+      expect(wrapper.vm.val).toBe('on');
+      await wrapper.find('[role="switch"]').trigger('click');
+      expect(wrapper.vm.val).toBe('off');
+    });
+  });
+
+  describe('object pair (generic)', () => {
+    it('toggles between two distinct object identities', async () => {
+      const ON = { kind: 'on' as const };
+      const OFF = { kind: 'off' as const };
+      const parent = defineComponent({
+        components: { Switch },
+        setup() {
+          const val = ref<typeof ON | typeof OFF>(OFF);
+          return { val, ON, OFF };
+        },
+        render() {
+          return h(Switch, {
+            truthy: this.ON,
+            falsy: this.OFF,
+            modelValue: this.val,
+            'onUpdate:modelValue': (v: unknown) => { this.val = v as typeof ON | typeof OFF; },
+          });
+        },
+      });
+      const wrapper = mount(parent);
+      expect(wrapper.vm.val.kind).toBe('off');
+      await wrapper.find('[role="switch"]').trigger('click');
+      expect(wrapper.vm.val.kind).toBe('on');
+      await wrapper.find('[role="switch"]').trigger('click');
+      expect(wrapper.vm.val.kind).toBe('off');
+    });
+  });
+
+  describe('keyboard activation', () => {
+    it('toggles on Space (native button)', async () => {
+      const wrapper = mount(Switch);
+      await wrapper.trigger('keydown', { key: ' ' });
+      // <button> handles Space natively; jsdom dispatches click on Space-keyup, not keydown.
+      // We verify our keydown synth does NOT double-toggle on button.
+      expect(wrapper.attributes('aria-checked')).toBe('false');
+      await wrapper.trigger('click');
+      expect(wrapper.attributes('aria-checked')).toBe('true');
+    });
+
+    it('toggles on Space when as is not a button', async () => {
+      const wrapper = mount(Switch, { props: { as: 'div' } });
+      expect(wrapper.attributes('aria-checked')).toBe('false');
+      await wrapper.trigger('keydown', { key: ' ' });
+      expect(wrapper.attributes('aria-checked')).toBe('true');
+      await wrapper.trigger('keydown', { key: ' ' });
+      expect(wrapper.attributes('aria-checked')).toBe('false');
+    });
+
+    it('toggles on Enter when as is not a button', async () => {
+      const wrapper = mount(Switch, { props: { as: 'div' } });
+      await wrapper.trigger('keydown', { key: 'Enter' });
+      expect(wrapper.attributes('aria-checked')).toBe('true');
+    });
+
+    it('does not toggle on other keys', async () => {
+      const wrapper = mount(Switch, { props: { as: 'div' } });
+      await wrapper.trigger('keydown', { key: 'a' });
+      await wrapper.trigger('keydown', { key: 'Tab' });
+      expect(wrapper.attributes('aria-checked')).toBe('false');
+    });
+  });
+
+  describe('non-button host (as="div")', () => {
+    it('sets aria-disabled when disabled', () => {
+      const wrapper = mount(Switch, { props: { as: 'div', disabled: true } });
+      expect(wrapper.attributes('aria-disabled')).toBe('true');
+    });
+
+    it('does not set aria-disabled when not disabled', () => {
+      const wrapper = mount(Switch, { props: { as: 'div' } });
+      expect(wrapper.attributes('aria-disabled')).toBeUndefined();
+    });
+
+    it('does not toggle on keyboard when disabled', async () => {
+      const wrapper = mount(Switch, { props: { as: 'div', disabled: true } });
+      await wrapper.trigger('keydown', { key: ' ' });
+      await wrapper.trigger('keydown', { key: 'Enter' });
+      expect(wrapper.attributes('aria-checked')).toBe('false');
+    });
+
+    it('does not toggle on click when disabled', async () => {
+      const wrapper = mount(Switch, { props: { as: 'div', disabled: true } });
+      await wrapper.trigger('click');
+      expect(wrapper.attributes('aria-checked')).toBe('false');
+    });
+
+    it('has tabindex=0 when enabled, -1 when disabled', () => {
+      const enabled = mount(Switch, { props: { as: 'div' } });
+      expect(enabled.attributes('tabindex')).toBe('0');
+      const disabled = mount(Switch, { props: { as: 'div', disabled: true } });
+      expect(disabled.attributes('tabindex')).toBe('-1');
+    });
+
+    it('button host has no synthesized tabindex (native focusability)', () => {
+      const wrapper = mount(Switch);
+      expect(wrapper.attributes('tabindex')).toBeUndefined();
+    });
+  });
+});
diff --git a/vue/primitives/src/switch/index.ts b/vue/primitives/src/switch/index.ts
new file mode 100644
index 0000000..0a5aa7d
--- /dev/null
+++ b/vue/primitives/src/switch/index.ts
@@ -0,0 +1,2 @@
+export { default as Switch } from './Switch.vue';
+export type { SwitchProps } from './Switch.vue';
diff --git a/vue/primitives/src/tabs/TabsContent.vue b/vue/primitives/src/tabs/TabsContent.vue
new file mode 100644
index 0000000..3b156f4
--- /dev/null
+++ b/vue/primitives/src/tabs/TabsContent.vue
@@ -0,0 +1,38 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface TabsContentProps extends PrimitiveProps {
+  /** Value that links this panel to a trigger. */
+  value: string;
+  /** Keep content mounted even when inactive. */
+  forceMount?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { computed } from 'vue';
+import { useForwardExpose } from '@robonen/vue';
+import { useTabsContext } from './context';
+
+const { value, forceMount = false, as = 'div' } = defineProps<TabsContentProps>();
+
+const { forwardRef } = useForwardExpose();
+const ctx = useTabsContext();
+const isSelected = computed(() => ctx.value.value === value);
+</script>
+
+<template>
+  <Primitive
+    v-if="forceMount || isSelected"
+    :ref="forwardRef"
+    :as="as"
+    role="tabpanel"
+    :data-state="isSelected ? 'active' : 'inactive'"
+    :data-orientation="ctx.orientation.value"
+    :tabindex="0"
+    :hidden="forceMount && !isSelected ? true : undefined"
+  >
+    <slot :selected="isSelected" />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/tabs/TabsList.vue b/vue/primitives/src/tabs/TabsList.vue
new file mode 100644
index 0000000..20c0d2a
--- /dev/null
+++ b/vue/primitives/src/tabs/TabsList.vue
@@ -0,0 +1,28 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface TabsListProps extends PrimitiveProps {
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { useTabsContext } from './context';
+
+const { as = 'div' } = defineProps<TabsListProps>();
+const { forwardRef } = useForwardExpose();
+const ctx = useTabsContext();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    role="tablist"
+    :aria-orientation="ctx.orientation.value"
+    :data-orientation="ctx.orientation.value"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/tabs/TabsRoot.vue b/vue/primitives/src/tabs/TabsRoot.vue
new file mode 100644
index 0000000..11fd445
--- /dev/null
+++ b/vue/primitives/src/tabs/TabsRoot.vue
@@ -0,0 +1,111 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+import type { RovingDirection } from '../utils/roving-focus';
+
+export interface TabsRootProps extends PrimitiveProps {
+  /** Uncontrolled initial value. */
+  defaultValue?: string;
+  /** Orientation of the tab list. @default 'horizontal' */
+  orientation?: 'horizontal' | 'vertical';
+  /** Writing direction. @default 'ltr' */
+  dir?: RovingDirection;
+  /** Wrap keyboard navigation. @default true */
+  loop?: boolean;
+  /** Disable all tabs. */
+  disabled?: boolean;
+  /** How tabs are activated. @default 'automatic' */
+  activationMode?: 'automatic' | 'manual';
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, toRef } from 'vue';
+import { resolveNextIndex, rovingKeyToAction } from '../utils/roving-focus';
+import { useCollectionProvider } from '../collection';
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { provideTabsContext } from './context';
+
+const {
+  orientation = 'horizontal',
+  dir = 'ltr',
+  loop = true,
+  disabled = false,
+  activationMode = 'automatic',
+  defaultValue,
+  as = 'div',
+} = defineProps<TabsRootProps>();
+
+const { forwardRef } = useForwardExpose();
+
+const localValue = ref<string | undefined>(defaultValue);
+
+const value = defineModel<string | undefined>({
+  get: v => v ?? localValue.value,
+  set: (v) => {
+    localValue.value = v;
+    return v;
+  },
+});
+
+function select(v: string): void {
+  if (disabled) return;
+  value.value = v;
+}
+
+// DOM-order tabs via Collection primitive — survives `v-for` reorders and
+// teleport/portal children, unlike a mount-order array.
+const { getItems, CollectionSlot } = useCollectionProvider();
+const tabElements = computed(() => getItems(true).map(i => i.ref));
+
+function onTriggerKeyDown(event: KeyboardEvent, el: HTMLElement): void {
+  const action = rovingKeyToAction(event, { orientation, dir, loop });
+  if (!action) return;
+  event.preventDefault();
+  const enabled = tabElements.value.filter(x => !x.hasAttribute('data-disabled'));
+  if (enabled.length === 0) return;
+  const current = enabled.indexOf(el);
+  if (action.absolute === 'home') {
+    enabled[0]!.focus();
+    return;
+  }
+  if (action.absolute === 'end') {
+    enabled[enabled.length - 1]!.focus();
+    return;
+  }
+  const nextIdx = resolveNextIndex(current === -1 ? 0 : current, action.delta, enabled.length, loop);
+  const target = enabled[nextIdx]!;
+  target.focus();
+  if (activationMode === 'automatic') {
+    const val = target.getAttribute('data-value');
+    if (val !== null) select(val);
+  }
+}
+
+provideTabsContext({
+  value,
+  // Identity passthroughs via `toRef` — reactive without `computed`'s effect/cache.
+  orientation: toRef(() => orientation),
+  direction: toRef(() => dir),
+  loop: toRef(() => loop),
+  disabled: toRef(() => disabled),
+  activationMode: toRef(() => activationMode),
+  tabElements,
+  select,
+  onTriggerKeyDown,
+});
+</script>
+
+<template>
+  <CollectionSlot>
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      :dir="dir"
+      :data-orientation="orientation"
+      :data-disabled="disabled ? '' : undefined"
+    >
+      <slot :value="value" />
+    </Primitive>
+  </CollectionSlot>
+</template>
diff --git a/vue/primitives/src/tabs/TabsTrigger.vue b/vue/primitives/src/tabs/TabsTrigger.vue
new file mode 100644
index 0000000..9b35e23
--- /dev/null
+++ b/vue/primitives/src/tabs/TabsTrigger.vue
@@ -0,0 +1,59 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface TabsTriggerProps extends PrimitiveProps {
+  /** Value that links this trigger to a content panel. */
+  value: string;
+  /** Disable this trigger. */
+  disabled?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { computed } from 'vue';
+import { useCollectionInjector } from '../collection';
+import { useForwardExpose } from '@robonen/vue';
+import { useTabsContext } from './context';
+
+const { value, disabled = false, as = 'button' } = defineProps<TabsTriggerProps>();
+
+const ctx = useTabsContext();
+const { forwardRef, currentElement } = useForwardExpose();
+const { CollectionItem } = useCollectionInjector();
+
+const isSelected = computed(() => ctx.value.value === value);
+const isDisabled = computed(() => ctx.disabled.value || disabled);
+
+function onClick(): void {
+  if (isDisabled.value) return;
+  ctx.select(value);
+}
+
+function onKeyDown(event: KeyboardEvent): void {
+  if (!currentElement.value) return;
+  ctx.onTriggerKeyDown(event, currentElement.value);
+}
+</script>
+
+<template>
+  <CollectionItem>
+    <Primitive
+      :as="as"
+      :ref="forwardRef"
+      role="tab"
+      :type="as === 'button' ? 'button' : undefined"
+      :aria-selected="isSelected"
+      :aria-disabled="isDisabled || undefined"
+      :data-state="isSelected ? 'active' : 'inactive'"
+      :data-disabled="isDisabled ? '' : undefined"
+      :data-value="value"
+      :tabindex="isSelected ? 0 : -1"
+      :disabled="isDisabled || undefined"
+      @click="onClick"
+      @keydown="onKeyDown"
+    >
+      <slot :selected="isSelected" />
+    </Primitive>
+  </CollectionItem>
+</template>
diff --git a/vue/primitives/src/tabs/__test__/Tabs.test.ts b/vue/primitives/src/tabs/__test__/Tabs.test.ts
new file mode 100644
index 0000000..f31b87e
--- /dev/null
+++ b/vue/primitives/src/tabs/__test__/Tabs.test.ts
@@ -0,0 +1,225 @@
+import { TabsContent, TabsList, TabsRoot, TabsTrigger } from '../index';
+import { defineComponent, h, nextTick, ref } from 'vue';
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+function createTabs(props: Record<string, unknown> = {}) {
+  return mount(
+    defineComponent({
+      setup() {
+        return () => h(TabsRoot, { ...props }, {
+          default: () => [
+            h(TabsList, null, {
+              default: () => [
+                h(TabsTrigger, { value: 'a' }, { default: () => 'Tab A' }),
+                h(TabsTrigger, { value: 'b' }, { default: () => 'Tab B' }),
+                h(TabsTrigger, { value: 'c', disabled: true }, { default: () => 'Tab C' }),
+              ],
+            }),
+            h(TabsContent, { value: 'a' }, { default: () => 'Panel A' }),
+            h(TabsContent, { value: 'b' }, { default: () => 'Panel B' }),
+            h(TabsContent, { value: 'c' }, { default: () => 'Panel C' }),
+          ],
+        });
+      },
+    }),
+    { attachTo: document.body },
+  );
+}
+
+function press(el: Element, key: string, opts: Record<string, unknown> = {}) {
+  el.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true, ...opts }));
+}
+
+describe('Tabs', () => {
+  it('renders tablist with correct roles', () => {
+    const w = createTabs({ defaultValue: 'a' });
+    expect(w.find('[role="tablist"]').exists()).toBe(true);
+    expect(w.findAll('[role="tab"]')).toHaveLength(3);
+    expect(w.find('[role="tabpanel"]').exists()).toBe(true);
+    w.unmount();
+  });
+
+  it('shows correct panel based on defaultValue', () => {
+    const w = createTabs({ defaultValue: 'b' });
+    const panels = w.findAll('[role="tabpanel"]');
+    expect(panels).toHaveLength(1);
+    expect(panels[0]!.text()).toBe('Panel B');
+    w.unmount();
+  });
+
+  it('selects tab on click', async () => {
+    const w = createTabs({ defaultValue: 'a' });
+    const tabs = w.findAll('[role="tab"]');
+    await tabs[1]!.trigger('click');
+    await nextTick();
+    expect(w.find('[role="tabpanel"]').text()).toBe('Panel B');
+    const tabB = tabs[1]!.element;
+    expect(tabB.getAttribute('aria-selected')).toBe('true');
+    expect(tabB.getAttribute('data-state')).toBe('active');
+    w.unmount();
+  });
+
+  it('supports v-model', async () => {
+    const value = ref('a');
+    const w = mount(
+      defineComponent({
+        setup() {
+          return () => h(TabsRoot, {
+            modelValue: value.value,
+            'onUpdate:modelValue': (v: string | undefined) => { value.value = v!; },
+          }, {
+            default: () => [
+              h(TabsList, null, {
+                default: () => [
+                  h(TabsTrigger, { value: 'a' }, { default: () => 'A' }),
+                  h(TabsTrigger, { value: 'b' }, { default: () => 'B' }),
+                ],
+              }),
+              h(TabsContent, { value: 'a' }, { default: () => 'PA' }),
+              h(TabsContent, { value: 'b' }, { default: () => 'PB' }),
+            ],
+          });
+        },
+      }),
+      { attachTo: document.body },
+    );
+
+    expect(w.find('[role="tabpanel"]').text()).toBe('PA');
+    const tabs = w.findAll('[role="tab"]');
+    await tabs[1]!.trigger('click');
+    await nextTick();
+    expect(value.value).toBe('b');
+    w.unmount();
+  });
+
+  it('navigates with arrow keys (horizontal)', async () => {
+    const w = createTabs({ defaultValue: 'a' });
+    await nextTick();
+    const tabs = w.findAll('[role="tab"]');
+    const tabA = tabs[0]!.element as HTMLElement;
+    tabA.focus();
+
+    press(tabA, 'ArrowRight');
+    await nextTick();
+    expect(document.activeElement).toBe(tabs[1]!.element);
+    // automatic mode → panel also switches
+    expect(w.find('[role="tabpanel"]').text()).toBe('Panel B');
+
+    // ArrowRight from B should skip disabled C and loop to A
+    press(tabs[1]!.element, 'ArrowRight');
+    await nextTick();
+    expect(document.activeElement).toBe(tabs[0]!.element);
+
+    w.unmount();
+  });
+
+  it('navigates with arrow keys (vertical)', async () => {
+    const w = createTabs({ defaultValue: 'a', orientation: 'vertical' });
+    await nextTick();
+    const tabs = w.findAll('[role="tab"]');
+    const tabA = tabs[0]!.element as HTMLElement;
+    tabA.focus();
+
+    press(tabA, 'ArrowDown');
+    await nextTick();
+    expect(document.activeElement).toBe(tabs[1]!.element);
+    w.unmount();
+  });
+
+  it('Home/End keys', async () => {
+    const w = createTabs({ defaultValue: 'a' });
+    await nextTick();
+    const tabs = w.findAll('[role="tab"]');
+    const tabB = tabs[1]!.element as HTMLElement;
+    tabB.focus();
+
+    press(tabB, 'Home');
+    await nextTick();
+    expect(document.activeElement).toBe(tabs[0]!.element);
+
+    press(tabs[0]!.element, 'End');
+    await nextTick();
+    // End goes to last enabled — B (C is disabled)
+    expect(document.activeElement).toBe(tabs[1]!.element);
+    w.unmount();
+  });
+
+  it('does not select disabled tabs', async () => {
+    const w = createTabs({ defaultValue: 'a' });
+    const tabs = w.findAll('[role="tab"]');
+    await tabs[2]!.trigger('click');
+    await nextTick();
+    // Should remain on panel A
+    expect(w.find('[role="tabpanel"]').text()).toBe('Panel A');
+    w.unmount();
+  });
+
+  it('disabled root blocks all interaction', async () => {
+    const w = createTabs({ defaultValue: 'a', disabled: true });
+    const tabs = w.findAll('[role="tab"]');
+    await tabs[1]!.trigger('click');
+    await nextTick();
+    expect(w.find('[role="tabpanel"]').text()).toBe('Panel A');
+    w.unmount();
+  });
+
+  it('manual activation mode: arrow keys move focus but do not select', async () => {
+    const w = createTabs({ defaultValue: 'a', activationMode: 'manual' });
+    await nextTick();
+    const tabs = w.findAll('[role="tab"]');
+    const tabA = tabs[0]!.element as HTMLElement;
+    tabA.focus();
+
+    press(tabA, 'ArrowRight');
+    await nextTick();
+    expect(document.activeElement).toBe(tabs[1]!.element);
+    // panel stays on A until explicit Enter/Space
+    expect(w.find('[role="tabpanel"]').text()).toBe('Panel A');
+    w.unmount();
+  });
+
+  it('sets correct tabindex: selected=0, others=-1', () => {
+    const w = createTabs({ defaultValue: 'b' });
+    const tabs = w.findAll('[role="tab"]');
+    expect(tabs[0]!.attributes('tabindex')).toBe('-1');
+    expect(tabs[1]!.attributes('tabindex')).toBe('0');
+    expect(tabs[2]!.attributes('tabindex')).toBe('-1');
+    w.unmount();
+  });
+
+  it('forceMount keeps panels in DOM', () => {
+    const w = mount(
+      defineComponent({
+        setup() {
+          return () => h(TabsRoot, { defaultValue: 'a' }, {
+            default: () => [
+              h(TabsList, null, {
+                default: () => [
+                  h(TabsTrigger, { value: 'a' }, { default: () => 'A' }),
+                  h(TabsTrigger, { value: 'b' }, { default: () => 'B' }),
+                ],
+              }),
+              h(TabsContent, { value: 'a', forceMount: true }, { default: () => 'PA' }),
+              h(TabsContent, { value: 'b', forceMount: true }, { default: () => 'PB' }),
+            ],
+          });
+        },
+      }),
+      { attachTo: document.body },
+    );
+
+    const panels = w.findAll('[role="tabpanel"]');
+    expect(panels).toHaveLength(2);
+    // inactive panel has hidden attribute
+    expect(panels[1]!.attributes('hidden')).toBeDefined();
+    w.unmount();
+  });
+
+  it('orientation reflects in data-orientation and aria-orientation', () => {
+    const w = createTabs({ defaultValue: 'a', orientation: 'vertical' });
+    expect(w.find('[role="tablist"]').attributes('aria-orientation')).toBe('vertical');
+    expect(w.find('[role="tablist"]').attributes('data-orientation')).toBe('vertical');
+    w.unmount();
+  });
+});
diff --git a/vue/primitives/src/tabs/context.ts b/vue/primitives/src/tabs/context.ts
new file mode 100644
index 0000000..150d1ba
--- /dev/null
+++ b/vue/primitives/src/tabs/context.ts
@@ -0,0 +1,20 @@
+import type { ComputedRef, Ref } from 'vue';
+import { useContextFactory } from '@robonen/vue';
+
+export interface TabsContext {
+  value: Ref<string | undefined>;
+  orientation: Ref<'horizontal' | 'vertical'>;
+  direction: Ref<'ltr' | 'rtl'>;
+  loop: Ref<boolean>;
+  disabled: Ref<boolean>;
+  activationMode: Ref<'automatic' | 'manual'>;
+  /** DOM-ordered tab elements, sourced from the internal Collection. */
+  tabElements: ComputedRef<HTMLElement[]>;
+  select: (value: string) => void;
+  onTriggerKeyDown: (event: KeyboardEvent, el: HTMLElement) => void;
+}
+
+export const {
+  inject: useTabsContext,
+  provide: provideTabsContext,
+} = useContextFactory<TabsContext>('TabsContext');
diff --git a/vue/primitives/src/tabs/index.ts b/vue/primitives/src/tabs/index.ts
new file mode 100644
index 0000000..706045a
--- /dev/null
+++ b/vue/primitives/src/tabs/index.ts
@@ -0,0 +1,12 @@
+export { default as TabsRoot } from './TabsRoot.vue';
+export { default as TabsList } from './TabsList.vue';
+export { default as TabsTrigger } from './TabsTrigger.vue';
+export { default as TabsContent } from './TabsContent.vue';
+
+export { provideTabsContext, useTabsContext } from './context';
+
+export type { TabsRootProps } from './TabsRoot.vue';
+export type { TabsListProps } from './TabsList.vue';
+export type { TabsTriggerProps } from './TabsTrigger.vue';
+export type { TabsContentProps } from './TabsContent.vue';
+export type { TabsContext } from './context';
diff --git a/vue/primitives/src/tags-input/TagsInputClear.vue b/vue/primitives/src/tags-input/TagsInputClear.vue
new file mode 100644
index 0000000..196def2
--- /dev/null
+++ b/vue/primitives/src/tags-input/TagsInputClear.vue
@@ -0,0 +1,38 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface TagsInputClearProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { useTagsInputContext } from './context';
+
+const { as = 'button' } = defineProps<TagsInputClearProps>();
+
+const ctx = useTagsInputContext();
+const { forwardRef } = useForwardExpose();
+
+function onClick(): void {
+  if (ctx.disabled.value) return;
+  if (ctx.modelValue.value.length === 0) return;
+  // Drop everything; reuse root's commit path by replaying removals in reverse.
+  while (ctx.modelValue.value.length > 0) {
+    ctx.onRemoveValue(ctx.modelValue.value.length - 1);
+  }
+}
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :type="as === 'button' ? 'button' : undefined"
+    :disabled="ctx.disabled.value || undefined"
+    :data-disabled="ctx.disabled.value ? '' : undefined"
+    @click="onClick"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/tags-input/TagsInputInput.vue b/vue/primitives/src/tags-input/TagsInputInput.vue
new file mode 100644
index 0000000..6cbe560
--- /dev/null
+++ b/vue/primitives/src/tags-input/TagsInputInput.vue
@@ -0,0 +1,136 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface TagsInputInputProps extends PrimitiveProps {
+  /** Placeholder text. */
+  placeholder?: string;
+  /** Focus on mount. */
+  autoFocus?: boolean;
+  /** Max input length. */
+  maxLength?: number;
+}
+</script>
+
+<script setup lang="ts">
+import { nextTick, onMounted, ref } from 'vue';
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { useTagsInputContext } from './context';
+
+const {
+  as = 'input',
+  placeholder,
+  autoFocus = false,
+  maxLength,
+} = defineProps<TagsInputInputProps>();
+
+const ctx = useTagsInputContext();
+const { forwardRef, currentElement } = useForwardExpose();
+
+const isComposing = ref(false);
+
+function onCompositionStart(): void {
+  isComposing.value = true;
+}
+function onCompositionEnd(): void {
+  nextTick(() => {
+    isComposing.value = false;
+  });
+}
+
+function commitCurrent(target: HTMLInputElement): void {
+  if (!target.value) return;
+  const ok = ctx.onAddValue(target.value);
+  if (ok) target.value = '';
+}
+
+async function onEnter(event: KeyboardEvent): Promise<void> {
+  if (isComposing.value) return;
+  await nextTick();
+  if (event.defaultPrevented) return;
+  const target = event.target as HTMLInputElement;
+  if (!target.value) return;
+  event.preventDefault();
+  commitCurrent(target);
+}
+
+function onTab(event: KeyboardEvent): void {
+  if (!ctx.addOnTab.value) return;
+  const target = event.target as HTMLInputElement;
+  if (!target.value) return;
+  event.preventDefault();
+  commitCurrent(target);
+}
+
+function onBlur(event: FocusEvent): void {
+  ctx.selectedElement.value = undefined;
+  if (!ctx.addOnBlur.value) return;
+  const target = event.target as HTMLInputElement;
+  if (!target.value) return;
+  commitCurrent(target);
+}
+
+function onInput(event: Event): void {
+  ctx.isInvalidInput.value = false;
+  const ev = event as InputEvent;
+  if (ev.data === null || ev.data === undefined) return;
+  const delim = ctx.delimiter.value;
+  const matches = typeof delim === 'string' ? ev.data === delim : delim.test(ev.data);
+  if (!matches) return;
+  const target = event.target as HTMLInputElement;
+  target.value = target.value.replace(delim, '');
+  if (target.value.trim() === '') {
+    target.value = '';
+    return;
+  }
+  commitCurrent(target);
+}
+
+function onPaste(event: ClipboardEvent): void {
+  if (!ctx.addOnPaste.value) return;
+  const data = event.clipboardData?.getData('text');
+  if (!data) return;
+  event.preventDefault();
+  const delim = ctx.delimiter.value;
+  const parts = delim ? data.split(delim) : [data];
+  for (const part of parts) {
+    const trimmed = part.trim();
+    if (trimmed) ctx.onAddValue(trimmed);
+  }
+}
+
+onMounted(() => {
+  if (!autoFocus) return;
+  const el = currentElement.value;
+  const input = el?.nodeName === 'INPUT' ? el : el?.querySelector('input');
+  // Defer to let the surrounding DOM settle before stealing focus.
+  setTimeout(() => {
+    (input as HTMLInputElement | null)?.focus();
+  }, 0);
+});
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    type="text"
+    autocomplete="off"
+    autocorrect="off"
+    autocapitalize="off"
+    :placeholder="placeholder"
+    :maxlength="maxLength"
+    :disabled="ctx.disabled.value || undefined"
+    :data-invalid="ctx.isInvalidInput.value ? '' : undefined"
+    @input="onInput"
+    @keydown.enter="onEnter"
+    @keydown.tab="onTab"
+    @keydown="ctx.onInputKeyDown"
+    @blur="onBlur"
+    @compositionstart="onCompositionStart"
+    @compositionend="onCompositionEnd"
+    @paste="onPaste"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/tags-input/TagsInputItem.vue b/vue/primitives/src/tags-input/TagsInputItem.vue
new file mode 100644
index 0000000..52133a6
--- /dev/null
+++ b/vue/primitives/src/tags-input/TagsInputItem.vue
@@ -0,0 +1,54 @@
+<script lang="ts" generic="T extends TagValue = string">
+import type { PrimitiveProps } from '../primitive';
+import type { TagValue } from './context';
+
+export interface TagsInputItemProps<U extends TagValue = string> extends PrimitiveProps {
+  /** The value associated with this tag. */
+  value: U;
+  /** Disable this specific tag. */
+  disabled?: boolean;
+}
+</script>
+
+<script setup lang="ts" generic="T extends TagValue = string">
+import { computed, ref, toRef } from 'vue';
+import { provideTagsInputItemContext, useTagsInputContext } from './context';
+import { Primitive } from '../primitive';
+import { useCollectionInjector } from '../collection';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'div', value, disabled = false } = defineProps<TagsInputItemProps<T>>();
+
+const ctx = useTagsInputContext();
+const { forwardRef, currentElement } = useForwardExpose();
+const { CollectionItem } = useCollectionInjector();
+
+const isSelected = computed(() => ctx.selectedElement.value === currentElement.value);
+const isDisabled = computed(() => disabled || ctx.disabled.value);
+const display = computed(() => ctx.displayValue(value));
+
+const textId = ref<string>('');
+
+provideTagsInputItemContext({
+  value: toRef(() => value) as any,
+  displayValue: display,
+  isSelected,
+  disabled: isDisabled,
+  textId,
+});
+</script>
+
+<template>
+  <CollectionItem :value="value">
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      :aria-labelledby="textId.value || undefined"
+      :aria-current="isSelected ? 'true' : undefined"
+      :data-state="isSelected ? 'active' : 'inactive'"
+      :data-disabled="isDisabled ? '' : undefined"
+    >
+      <slot :value="value" :display-value="display" :is-selected="isSelected" />
+    </Primitive>
+  </CollectionItem>
+</template>
diff --git a/vue/primitives/src/tags-input/TagsInputItemDelete.vue b/vue/primitives/src/tags-input/TagsInputItemDelete.vue
new file mode 100644
index 0000000..ee5b05d
--- /dev/null
+++ b/vue/primitives/src/tags-input/TagsInputItemDelete.vue
@@ -0,0 +1,40 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface TagsInputItemDeleteProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { useTagsInputContext, useTagsInputItemContext } from './context';
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'button' } = defineProps<TagsInputItemDeleteProps>();
+
+const ctx = useTagsInputContext();
+const item = useTagsInputItemContext();
+const { forwardRef } = useForwardExpose();
+
+function onClick(): void {
+  if (item.disabled.value) return;
+  const idx = ctx.modelValue.value.indexOf(item.value.value);
+  if (idx !== -1) ctx.onRemoveValue(idx);
+}
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :type="as === 'button' ? 'button' : undefined"
+    tabindex="-1"
+    :aria-labelledby="item.textId.value || undefined"
+    :aria-current="item.isSelected.value"
+    :data-state="item.isSelected.value ? 'active' : 'inactive'"
+    :data-disabled="item.disabled.value ? '' : undefined"
+    :disabled="item.disabled.value || undefined"
+    @click="onClick"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/tags-input/TagsInputItemText.vue b/vue/primitives/src/tags-input/TagsInputItemText.vue
new file mode 100644
index 0000000..3a8b733
--- /dev/null
+++ b/vue/primitives/src/tags-input/TagsInputItemText.vue
@@ -0,0 +1,32 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface TagsInputItemTextProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { useId } from '../config-provider';
+import { useTagsInputItemContext } from './context';
+
+const { as = 'span' } = defineProps<TagsInputItemTextProps>();
+
+const item = useTagsInputItemContext();
+const { forwardRef } = useForwardExpose();
+
+// Lazily assign an id the first time the text part is mounted — kept on the
+// shared context so the sibling `<TagsInputItem>` / `<TagsInputItemDelete>` can
+// point `aria-labelledby` at it without us generating an id per tag eagerly.
+if (!item.textId.value) item.textId.value = useId(undefined, 'tags-input-item-text').value;
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :id="item.textId.value"
+  >
+    <slot>{{ item.displayValue.value }}</slot>
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/tags-input/TagsInputRoot.vue b/vue/primitives/src/tags-input/TagsInputRoot.vue
new file mode 100644
index 0000000..0c206f7
--- /dev/null
+++ b/vue/primitives/src/tags-input/TagsInputRoot.vue
@@ -0,0 +1,249 @@
+<script lang="ts" generic="T extends TagValue = string">
+import type { PrimitiveProps } from '../primitive';
+import type { TagValue } from './context';
+
+export interface TagsInputRootProps<U extends TagValue = string> extends PrimitiveProps {
+  /** Controlled value. Use `v-model`. */
+  modelValue?: U[];
+  /** Uncontrolled initial value. @default [] */
+  defaultValue?: U[];
+  /** Add on paste (respects `delimiter`). */
+  addOnPaste?: boolean;
+  /** Add on Tab. */
+  addOnTab?: boolean;
+  /** Add on blur. */
+  addOnBlur?: boolean;
+  /** Allow duplicate tags. */
+  duplicate?: boolean;
+  /** Disable the whole component. */
+  disabled?: boolean;
+  /** Character or regex that splits/commits input. @default ',' */
+  delimiter?: string | RegExp;
+  /** Writing direction. Falls back to `ConfigProvider` when omitted. */
+  dir?: 'ltr' | 'rtl';
+  /** Maximum number of tags. `0` disables the cap. @default 0 */
+  max?: number;
+  /** Map a raw input string to a tag. Required for non-string tag values. */
+  convertValue?: (raw: string) => U;
+  /** Render a tag value as text. @default `String(v)` */
+  displayValue?: (value: U) => string;
+}
+
+export interface TagsInputRootEmits<U extends TagValue = string> {
+  'update:modelValue': [value: U[]];
+  addTag: [value: U];
+  removeTag: [value: U];
+  invalid: [value: U];
+}
+</script>
+
+<script setup lang="ts" generic="T extends TagValue = string">
+import { computed, ref, shallowRef, toRef, watch } from 'vue';
+import { Primitive } from '../primitive';
+import type { Ref } from 'vue';
+import { provideTagsInputContext } from './context';
+import { useCollectionProvider } from '../collection';
+import { useConfig } from '../config-provider';
+import { useForwardExpose } from '@robonen/vue';
+
+const {
+  as = 'div',
+  modelValue,
+  defaultValue,
+  addOnPaste = false,
+  addOnTab = false,
+  addOnBlur = false,
+  duplicate = false,
+  disabled = false,
+  delimiter = ',',
+  dir,
+  max = 0,
+  convertValue,
+  displayValue,
+} = defineProps<TagsInputRootProps<T>>();
+
+const emit = defineEmits<TagsInputRootEmits<T>>();
+
+const { forwardRef } = useForwardExpose();
+const config = useConfig();
+const direction = computed(() => dir ?? config.dir.value);
+
+// shallowRef: array is always replaced via commit(), never mutated in place.
+const localValue = shallowRef<T[]>((modelValue ?? defaultValue ?? []).slice()) as Ref<T[]>;
+
+watch(() => modelValue, (v) => {
+  if (v === undefined) return;
+  const cur = localValue.value;
+  if (v.length === cur.length) {
+    let equal = true;
+    for (let i = 0; i < v.length; i++) {
+      if (v[i] !== cur[i]) {
+        equal = false;
+        break;
+      }
+    }
+    if (equal) return;
+  }
+  localValue.value = v.slice();
+});
+
+const selectedElement = shallowRef<HTMLElement>();
+const isInvalidInput = ref(false);
+
+const { getItems, CollectionSlot } = useCollectionProvider();
+
+function commit(next: T[]): void {
+  localValue.value = next;
+  emit('update:modelValue', next);
+}
+
+const convert: (raw: string) => T = convertValue ?? ((raw: string) => raw as unknown as T);
+const display: (value: T) => string = displayValue ?? ((value: T) => String(value));
+
+function onAddValue(raw: string): boolean {
+  if (disabled) return false;
+  const cur = localValue.value;
+  if (max > 0 && cur.length >= max) {
+    const payload = convert(raw);
+    isInvalidInput.value = true;
+    emit('invalid', payload);
+    return false;
+  }
+  const payload = convert(raw);
+  if (!duplicate) {
+    const exists = cur.some(v => v === payload || display(v) === display(payload));
+    if (exists) {
+      isInvalidInput.value = true;
+      emit('invalid', payload);
+      return false;
+    }
+  }
+  commit([...cur, payload]);
+  emit('addTag', payload);
+  return true;
+}
+
+function onRemoveValue(index: number): void {
+  if (disabled || index < 0) return;
+  const cur = localValue.value;
+  if (index >= cur.length) return;
+  const removed = cur[index]!;
+  const next = cur.slice();
+  next.splice(index, 1);
+  commit(next);
+  emit('removeTag', removed);
+}
+
+function collectTagEls(): HTMLElement[] {
+  return getItems(false).map(i => i.ref);
+}
+
+function onInputKeyDown(event: KeyboardEvent): void {
+  const target = event.target as HTMLInputElement;
+  const tags = collectTagEls();
+  if (tags.length === 0) return;
+  const lastTag = tags[tags.length - 1]!;
+  const atCaretStart = target.selectionStart === 0 && target.selectionEnd === 0;
+
+  switch (event.key) {
+    case 'Delete':
+    case 'Backspace': {
+      if (!atCaretStart) return;
+      if (selectedElement.value) {
+        const idx = tags.indexOf(selectedElement.value);
+        if (idx === -1) return;
+        onRemoveValue(idx);
+        // After removal, focus the neighbouring tag or clear.
+        const after = collectTagEls();
+        const nextEl = event.key === 'Backspace'
+          ? (after[idx - 1] ?? after[after.length - 1])
+          : (after[idx] ?? after[after.length - 1]);
+        selectedElement.value = nextEl;
+        event.preventDefault();
+      }
+      else if (event.key === 'Backspace') {
+        selectedElement.value = lastTag;
+        event.preventDefault();
+      }
+      return;
+    }
+    case 'ArrowLeft':
+    case 'ArrowRight': {
+      if (!atCaretStart) return;
+      const ltr = direction.value !== 'rtl';
+      const isBack = (event.key === 'ArrowLeft' && ltr) || (event.key === 'ArrowRight' && !ltr);
+      const isForward = !isBack;
+      if (isBack && !selectedElement.value) {
+        selectedElement.value = lastTag;
+        event.preventDefault();
+        return;
+      }
+      if (isForward && selectedElement.value === lastTag) {
+        selectedElement.value = undefined;
+        target.focus();
+        event.preventDefault();
+        return;
+      }
+      if (selectedElement.value) {
+        const idx = tags.indexOf(selectedElement.value);
+        if (idx === -1) return;
+        const delta = isBack ? -1 : 1;
+        const nextIdx = Math.max(0, Math.min(tags.length - 1, idx + delta));
+        selectedElement.value = tags[nextIdx]!;
+        event.preventDefault();
+      }
+      return;
+    }
+    case 'Home':
+    case 'End': {
+      if (!atCaretStart) return;
+      if (selectedElement.value) {
+        selectedElement.value = event.key === 'Home' ? tags[0]! : lastTag;
+        event.preventDefault();
+      }
+      return;
+    }
+    case 'ArrowUp':
+    case 'ArrowDown': {
+      if (selectedElement.value) event.preventDefault();
+      return;
+    }
+    default: {
+      selectedElement.value = undefined;
+    }
+  }
+}
+
+provideTagsInputContext({
+  modelValue: localValue,
+  selectedElement,
+  isInvalidInput,
+  addOnPaste: toRef(() => addOnPaste),
+  addOnTab: toRef(() => addOnTab),
+  addOnBlur: toRef(() => addOnBlur),
+  disabled: toRef(() => disabled),
+  delimiter: toRef(() => delimiter),
+  direction,
+  max: toRef(() => max),
+  duplicate: toRef(() => duplicate),
+  convertValue: convert,
+  displayValue: display,
+  onAddValue,
+  onRemoveValue,
+  onInputKeyDown,
+});
+</script>
+
+<template>
+  <CollectionSlot>
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      :dir="direction"
+      :data-disabled="disabled ? '' : undefined"
+      :data-invalid="isInvalidInput ? '' : undefined"
+    >
+      <slot :model-value="localValue" />
+    </Primitive>
+  </CollectionSlot>
+</template>
diff --git a/vue/primitives/src/tags-input/__test__/TagsInput.test.ts b/vue/primitives/src/tags-input/__test__/TagsInput.test.ts
new file mode 100644
index 0000000..d53918c
--- /dev/null
+++ b/vue/primitives/src/tags-input/__test__/TagsInput.test.ts
@@ -0,0 +1,171 @@
+import {
+
+  TagsInputClear,
+  TagsInputInput,
+  TagsInputItem,
+  TagsInputItemDelete,
+  TagsInputItemText,
+  TagsInputRoot,
+} from '../index';
+import type { TagValue } from '../index';
+import type { Component } from 'vue';
+import { defineComponent, h, nextTick, ref } from 'vue';
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+function createTagsInput(rootProps: Record<string, unknown> = {}) {
+  return mount(
+    defineComponent({
+      setup() {
+        const tags = ref<string[]>(
+          (rootProps.modelValue as string[] | undefined) ?? (rootProps.defaultValue as string[] | undefined) ?? [],
+        );
+        return () => h(
+          TagsInputRoot,
+          {
+            modelValue: tags.value,
+            'onUpdate:modelValue': (v: TagValue[]) => (tags.value = v as string[]),
+            ...rootProps,
+          },
+          {
+            default: ({ modelValue }: { modelValue: string[] }) => [
+              ...modelValue.map(tag =>
+                h(TagsInputItem, { key: tag, value: tag }, {
+                  default: () => [
+                    h(TagsInputItemText, null, { default: () => tag }),
+                    h(TagsInputItemDelete, null, { default: () => '×' }),
+                  ],
+                }),
+              ),
+              h(TagsInputInput, { placeholder: 'add tag' }),
+              h(TagsInputClear, null, { default: () => 'Clear' }),
+            ],
+          },
+        );
+      },
+    }),
+    { attachTo: document.body },
+  );
+}
+
+function press(el: Element, key: string) {
+  el.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
+}
+
+describe('TagsInput', () => {
+  it('renders initial tags from defaultValue', () => {
+    const w = createTagsInput({ defaultValue: ['a', 'b'] });
+    expect(w.findAllComponents(TagsInputItem as Component)).toHaveLength(2);
+    w.unmount();
+  });
+
+  it('Enter adds a tag from input', async () => {
+    const w = createTagsInput();
+    const input = w.find('input');
+    (input.element as HTMLInputElement).value = 'hello';
+    await input.trigger('keydown', { key: 'Enter' });
+    await nextTick();
+    await nextTick();
+    expect(w.findAllComponents(TagsInputItem as Component)).toHaveLength(1);
+    expect(w.findComponent(TagsInputItem as Component).text()).toContain('hello');
+    expect((input.element as HTMLInputElement).value).toBe('');
+    w.unmount();
+  });
+
+  it('delimiter commits a tag on input', async () => {
+    const w = createTagsInput({ delimiter: ',' });
+    const input = w.find('input');
+    (input.element as HTMLInputElement).value = 'x,';
+    await input.trigger('input', { data: ',' });
+    await nextTick();
+    expect(w.findAllComponents(TagsInputItem as Component)).toHaveLength(1);
+    expect(w.findComponent(TagsInputItem as Component).text()).toContain('x');
+    w.unmount();
+  });
+
+  it('rejects duplicates by default and emits invalid', async () => {
+    const w = createTagsInput({ defaultValue: ['foo'] });
+    const input = w.find('input');
+    (input.element as HTMLInputElement).value = 'foo';
+    await input.trigger('keydown', { key: 'Enter' });
+    await nextTick();
+    await nextTick();
+    expect(w.findAllComponents(TagsInputItem as Component)).toHaveLength(1);
+    expect(w.findComponent(TagsInputRoot as Component).emitted('invalid')).toBeTruthy();
+    w.unmount();
+  });
+
+  it('duplicate: true allows duplicates', async () => {
+    const w = createTagsInput({ defaultValue: ['foo'], duplicate: true });
+    const input = w.find('input');
+    (input.element as HTMLInputElement).value = 'foo';
+    await input.trigger('keydown', { key: 'Enter' });
+    await nextTick();
+    await nextTick();
+    expect(w.findAllComponents(TagsInputItem as Component)).toHaveLength(2);
+    w.unmount();
+  });
+
+  it('max caps tag count and emits invalid', async () => {
+    const w = createTagsInput({ defaultValue: ['a', 'b'], max: 2 });
+    const input = w.find('input');
+    (input.element as HTMLInputElement).value = 'c';
+    await input.trigger('keydown', { key: 'Enter' });
+    await nextTick();
+    await nextTick();
+    expect(w.findAllComponents(TagsInputItem as Component)).toHaveLength(2);
+    expect(w.findComponent(TagsInputRoot as Component).emitted('invalid')).toBeTruthy();
+    w.unmount();
+  });
+
+  it('delete trigger removes its tag', async () => {
+    const w = createTagsInput({ defaultValue: ['a', 'b'] });
+    const deleteBtn = w.findAll('button').find(b => b.text() === '×');
+    await deleteBtn!.trigger('click');
+    await nextTick();
+    const items = w.findAllComponents(TagsInputItem as Component);
+    expect(items).toHaveLength(1);
+    expect(items[0]!.text()).toContain('b');
+    w.unmount();
+  });
+
+  it('Clear removes all tags', async () => {
+    const w = createTagsInput({ defaultValue: ['a', 'b', 'c'] });
+    const clearBtn = w.findAll('button').find(b => b.text() === 'Clear')!;
+    await clearBtn.trigger('click');
+    await nextTick();
+    expect(w.findAllComponents(TagsInputItem as Component)).toHaveLength(0);
+    w.unmount();
+  });
+
+  it('Backspace on empty input selects last tag; second Backspace deletes it', async () => {
+    const w = createTagsInput({ defaultValue: ['a', 'b'] });
+    const input = w.find('input').element as HTMLInputElement;
+    input.focus();
+    press(input, 'Backspace');
+    await nextTick();
+    press(input, 'Backspace');
+    await nextTick();
+    const items = w.findAllComponents(TagsInputItem as Component);
+    expect(items).toHaveLength(1);
+    expect(items[0]!.text()).toContain('a');
+    w.unmount();
+  });
+
+  it('addOnBlur commits pending value on blur', async () => {
+    const w = createTagsInput({ addOnBlur: true });
+    const input = w.find('input');
+    (input.element as HTMLInputElement).value = 'done';
+    await input.trigger('blur');
+    await nextTick();
+    expect(w.findAllComponents(TagsInputItem as Component)).toHaveLength(1);
+    w.unmount();
+  });
+
+  it('disabled blocks adding tags', async () => {
+    const w = createTagsInput({ disabled: true });
+    const input = w.find('input');
+    expect((input.element as HTMLInputElement).disabled).toBe(true);
+    w.unmount();
+  });
+});
diff --git a/vue/primitives/src/tags-input/context.ts b/vue/primitives/src/tags-input/context.ts
new file mode 100644
index 0000000..38a477a
--- /dev/null
+++ b/vue/primitives/src/tags-input/context.ts
@@ -0,0 +1,53 @@
+import type { Ref, ShallowRef } from 'vue';
+import { useContextFactory } from '@robonen/vue';
+
+export type TagValue = string | number | Record<string, unknown>;
+
+export interface TagsInputContext<T extends TagValue = TagValue> {
+  /** Current list of tags. */
+  modelValue: Ref<T[]>;
+  /** Currently focused tag element (for keyboard selection in the strip). */
+  selectedElement: ShallowRef<HTMLElement | undefined>;
+  /** Whether the last input attempt was rejected (duplicate or over max). */
+  isInvalidInput: Ref<boolean>;
+
+  addOnPaste: Ref<boolean>;
+  addOnTab: Ref<boolean>;
+  addOnBlur: Ref<boolean>;
+  disabled: Ref<boolean>;
+  delimiter: Ref<string | RegExp>;
+  direction: Ref<'ltr' | 'rtl'>;
+  max: Ref<number>;
+  /** Allow duplicate tags. */
+  duplicate: Ref<boolean>;
+
+  /** Normalize a raw string into a tag value. */
+  convertValue: (raw: string) => T;
+  /** Format a tag value for display. */
+  displayValue: (value: T) => string;
+
+  /** Append a tag from a raw string. Returns `true` on success. */
+  onAddValue: (raw: string) => boolean;
+  /** Remove the tag at `index`. */
+  onRemoveValue: (index: number) => void;
+  /** Keyboard handler wired from `<TagsInputInput>` to the root. */
+  onInputKeyDown: (event: KeyboardEvent) => void;
+}
+
+export interface TagsInputItemContext<T extends TagValue = TagValue> {
+  value: Ref<T>;
+  displayValue: Ref<string>;
+  isSelected: Ref<boolean>;
+  disabled: Ref<boolean>;
+  textId: { value: string };
+}
+
+export const {
+  inject: useTagsInputContext,
+  provide: provideTagsInputContext,
+} = useContextFactory<TagsInputContext<any>>('tags-input');
+
+export const {
+  inject: useTagsInputItemContext,
+  provide: provideTagsInputItemContext,
+} = useContextFactory<TagsInputItemContext<any>>('tags-input-item');
diff --git a/vue/primitives/src/tags-input/index.ts b/vue/primitives/src/tags-input/index.ts
new file mode 100644
index 0000000..6b67bd5
--- /dev/null
+++ b/vue/primitives/src/tags-input/index.ts
@@ -0,0 +1,23 @@
+export { default as TagsInputRoot } from './TagsInputRoot.vue';
+export { default as TagsInputItem } from './TagsInputItem.vue';
+export { default as TagsInputItemText } from './TagsInputItemText.vue';
+export { default as TagsInputItemDelete } from './TagsInputItemDelete.vue';
+export { default as TagsInputInput } from './TagsInputInput.vue';
+export { default as TagsInputClear } from './TagsInputClear.vue';
+
+export {
+  provideTagsInputContext,
+  useTagsInputContext,
+  provideTagsInputItemContext,
+  useTagsInputItemContext,
+  type TagsInputContext,
+  type TagsInputItemContext,
+  type TagValue,
+} from './context';
+
+export type { TagsInputRootProps, TagsInputRootEmits } from './TagsInputRoot.vue';
+export type { TagsInputItemProps } from './TagsInputItem.vue';
+export type { TagsInputItemTextProps } from './TagsInputItemText.vue';
+export type { TagsInputItemDeleteProps } from './TagsInputItemDelete.vue';
+export type { TagsInputInputProps } from './TagsInputInput.vue';
+export type { TagsInputClearProps } from './TagsInputClear.vue';
diff --git a/vue/primitives/src/teleport/Teleport.vue b/vue/primitives/src/teleport/Teleport.vue
new file mode 100644
index 0000000..650f6b7
--- /dev/null
+++ b/vue/primitives/src/teleport/Teleport.vue
@@ -0,0 +1,65 @@
+<script lang="ts">
+export interface TeleportPrimitiveProps {
+  /**
+   * Target DOM node or CSS selector. When `null`/`undefined`, Vue's built-in
+   * `<Teleport>` is rendered with its default behavior (body).
+   */
+  to?: string | HTMLElement | null;
+
+  /**
+   * Defer teleport rendering until after the parent has mounted.
+   * Useful when the target node is rendered by the same component tree.
+   * @default false
+   */
+  defer?: boolean;
+
+  /**
+   * Disable teleport — children render in place. SSR-safe default.
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Forcibly keep children mounted even when Teleport is disabled/removed.
+   * Opt-in escape hatch for animation-aware primitives.
+   * @default true
+   */
+  forceMount?: boolean;
+}
+
+export default {
+  inheritAttrs: false,
+};
+</script>
+
+<script setup lang="ts">
+import { isClient } from '@robonen/platform/multi';
+import { useConfig } from '../config-provider';
+import { computed } from 'vue';
+
+const {
+  to,
+  defer = false,
+  disabled = false,
+  forceMount = true,
+} = defineProps<TeleportPrimitiveProps>();
+
+const config = useConfig();
+
+// On the server, Vue's Teleport is a no-op for most targets; we also opt-out
+// explicitly when `isClient` is false to avoid hydration mismatches when the
+// target hasn't mounted yet.
+const effectiveDisabled = computed(() => disabled || !isClient);
+const target = computed(() => to ?? config.teleportTarget.value);
+</script>
+
+<template>
+  <Teleport
+    v-if="forceMount || !effectiveDisabled"
+    :to="target"
+    :defer="defer"
+    :disabled="effectiveDisabled"
+  >
+    <slot />
+  </Teleport>
+</template>
diff --git a/vue/primitives/src/teleport/__test__/Teleport.test.ts b/vue/primitives/src/teleport/__test__/Teleport.test.ts
new file mode 100644
index 0000000..de8b674
--- /dev/null
+++ b/vue/primitives/src/teleport/__test__/Teleport.test.ts
@@ -0,0 +1,73 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { defineComponent, h, nextTick } from 'vue';
+import Teleport from '../Teleport.vue';
+
+describe('Teleport primitive', () => {
+  let host: HTMLElement;
+
+  beforeEach(() => {
+    host = document.createElement('div');
+    host.id = 'teleport-target';
+    document.body.appendChild(host);
+  });
+
+  afterEach(() => {
+    host.remove();
+  });
+
+  it('teleports default slot content to `to` target', async () => {
+    const w = mount(Teleport, {
+      props: { to: '#teleport-target' },
+      slots: { default: () => h('span', { 'data-testid': 'child' }, 'hello') },
+      attachTo: document.body,
+    });
+
+    await nextTick();
+    expect(host.querySelector('[data-testid=child]')?.textContent).toBe('hello');
+    w.unmount();
+  });
+
+  it('accepts an HTMLElement as `to`', async () => {
+    const w = mount(Teleport, {
+      props: { to: host },
+      slots: { default: () => h('span', { 'data-testid': 'child' }, 'x') },
+      attachTo: document.body,
+    });
+
+    await nextTick();
+    expect(host.querySelector('[data-testid=child]')).toBeTruthy();
+    w.unmount();
+  });
+
+  it('renders children in place when disabled', async () => {
+    const Parent = defineComponent({
+      render() {
+        return h('div', { id: 'parent' }, [
+          h(Teleport, { to: '#teleport-target', disabled: true }, {
+            default: () => h('span', { 'data-testid': 'child' }, 'inline'),
+          }),
+        ]);
+      },
+    });
+
+    const w = mount(Parent, { attachTo: document.body });
+    await nextTick();
+
+    expect(document.querySelector('#parent [data-testid=child]')).toBeTruthy();
+    expect(host.querySelector('[data-testid=child]')).toBeFalsy();
+
+    w.unmount();
+  });
+
+  it('defaults to body when `to` is omitted', async () => {
+    const w = mount(Teleport, {
+      slots: { default: () => h('span', { 'data-testid': 'body-child' }, 'hi') },
+      attachTo: document.body,
+    });
+
+    await nextTick();
+    expect(document.body.querySelector('[data-testid=body-child]')).toBeTruthy();
+    w.unmount();
+  });
+});
diff --git a/vue/primitives/src/teleport/index.ts b/vue/primitives/src/teleport/index.ts
new file mode 100644
index 0000000..8b83641
--- /dev/null
+++ b/vue/primitives/src/teleport/index.ts
@@ -0,0 +1,2 @@
+export { default as Teleport, default as Portal } from './Teleport.vue';
+export type { TeleportPrimitiveProps, TeleportPrimitiveProps as PortalProps } from './Teleport.vue';
diff --git a/vue/primitives/src/toast/ToastAction.vue b/vue/primitives/src/toast/ToastAction.vue
new file mode 100644
index 0000000..b8423d4
--- /dev/null
+++ b/vue/primitives/src/toast/ToastAction.vue
@@ -0,0 +1,31 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ToastActionProps extends PrimitiveProps {
+  /**
+   * Accessible description for screen readers (required).
+   * Describes what happens when the user triggers the action.
+   */
+  altText: string;
+}
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '@robonen/vue';
+
+import { Primitive } from '../primitive';
+
+const { as = 'button', altText } = defineProps<ToastActionProps>();
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :aria-label="altText"
+    data-primitives-toast-action
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/toast/ToastClose.vue b/vue/primitives/src/toast/ToastClose.vue
new file mode 100644
index 0000000..23caa47
--- /dev/null
+++ b/vue/primitives/src/toast/ToastClose.vue
@@ -0,0 +1,27 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ToastCloseProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '@robonen/vue';
+
+import { Primitive } from '../primitive';
+import { useToastContext } from './context';
+
+const { as = 'button' } = defineProps<ToastCloseProps>();
+const { forwardRef } = useForwardExpose();
+const toastCtx = useToastContext();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    data-primitives-toast-close
+    @click="toastCtx.onClose()"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/toast/ToastDescription.vue b/vue/primitives/src/toast/ToastDescription.vue
new file mode 100644
index 0000000..52f23e4
--- /dev/null
+++ b/vue/primitives/src/toast/ToastDescription.vue
@@ -0,0 +1,24 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ToastDescriptionProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '@robonen/vue';
+
+import { Primitive } from '../primitive';
+
+const { as = 'div' } = defineProps<ToastDescriptionProps>();
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    data-primitives-toast-description
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/toast/ToastProvider.vue b/vue/primitives/src/toast/ToastProvider.vue
new file mode 100644
index 0000000..6ee0489
--- /dev/null
+++ b/vue/primitives/src/toast/ToastProvider.vue
@@ -0,0 +1,55 @@
+<script lang="ts">
+import type { SwipeDirection } from './context';
+
+export interface ToastProviderProps {
+  /** Accessible label for the toast region. @default 'Notifications' */
+  label?: string;
+  /** Auto-dismiss duration in ms. Use `Infinity` to disable auto-dismiss. @default 5000 */
+  duration?: number;
+  /** Swipe direction to dismiss. @default 'right' */
+  swipeDirection?: SwipeDirection;
+  /** Minimum swipe distance before a dismiss gesture is recognised. @default 50 */
+  swipeThreshold?: number;
+}
+</script>
+
+<script setup lang="ts">
+import { ref, shallowRef, toRef } from 'vue';
+
+import { provideToastProviderContext } from './context';
+
+const {
+  label = 'Notifications',
+  duration = 5000,
+  swipeDirection = 'right',
+  swipeThreshold = 50,
+} = defineProps<ToastProviderProps>();
+
+const labelRef = toRef(() => label);
+const durationRef = toRef(() => duration);
+const swipeDirectionRef = toRef(() => swipeDirection);
+const swipeThresholdRef = toRef(() => swipeThreshold);
+
+const toastCount = ref(0);
+const viewportRef = shallowRef<HTMLElement | undefined>(undefined);
+const isFocusedToastEscapeKeyDownRef = ref(false);
+const isClosePausedRef = ref(false);
+
+provideToastProviderContext({
+  label: labelRef,
+  duration: durationRef,
+  swipeDirection: swipeDirectionRef,
+  swipeThreshold: swipeThresholdRef,
+  toastCount,
+  viewportRef,
+  onViewportChange: (el) => { viewportRef.value = el; },
+  onToastAdd: () => { toastCount.value++; },
+  onToastRemove: () => { toastCount.value--; },
+  isFocusedToastEscapeKeyDownRef,
+  isClosePausedRef,
+});
+</script>
+
+<template>
+  <slot />
+</template>
diff --git a/vue/primitives/src/toast/ToastRoot.vue b/vue/primitives/src/toast/ToastRoot.vue
new file mode 100644
index 0000000..4f7fe00
--- /dev/null
+++ b/vue/primitives/src/toast/ToastRoot.vue
@@ -0,0 +1,140 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ToastRootProps extends PrimitiveProps {
+  /** Override the provider's auto-dismiss duration. Use `Infinity` to disable. */
+  duration?: number;
+  /** Toast type — controls the `aria-live` politeness. @default 'background' */
+  type?: 'foreground' | 'background';
+}
+
+export interface ToastRootEmits {
+  'update:open': [open: boolean];
+  escapeKeyDown: [event: KeyboardEvent];
+  pause: [];
+  resume: [];
+}
+</script>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, toRef, watch } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { useId } from '../config-provider';
+import { Presence } from '../presence';
+import { Primitive } from '../primitive';
+import { provideToastContext, useToastProviderContext } from './context';
+import { VIEWPORT_PAUSE, VIEWPORT_RESUME } from './utils';
+
+const {
+  as = 'li',
+  duration,
+  type = 'background',
+} = defineProps<ToastRootProps>();
+
+const emit = defineEmits<ToastRootEmits>();
+
+const { forwardRef } = useForwardExpose();
+const providerCtx = useToastProviderContext();
+const toastId = useId(undefined, 'toast');
+const durationRef = toRef(() => duration);
+
+const open = defineModel<boolean>('open', {
+  default: true,
+});
+
+let closeTimer: ReturnType<typeof setTimeout> | null = null;
+
+function clearTimer() {
+  if (closeTimer) {
+    clearTimeout(closeTimer);
+    closeTimer = null;
+  }
+}
+
+function startTimer(ms: number) {
+  clearTimer();
+  if (ms === Infinity || ms <= 0 || !Number.isFinite(ms)) return;
+  closeTimer = setTimeout(() => {
+    open.value = false;
+    emit('update:open', false);
+  }, ms);
+}
+
+function handleClose() {
+  open.value = false;
+  emit('update:open', false);
+}
+
+function pauseTimer() {
+  clearTimer();
+  providerCtx.isClosePausedRef.value = true;
+  emit('pause');
+}
+
+function resumeTimer() {
+  providerCtx.isClosePausedRef.value = false;
+  const ms = durationRef.value ?? providerCtx.duration.value;
+  startTimer(ms);
+  emit('resume');
+}
+
+// Restart timer when reactive duration changes (and we are not paused).
+watch(
+  [durationRef, () => providerCtx.duration.value],
+  () => {
+    if (!open.value) return;
+    if (providerCtx.isClosePausedRef.value) return;
+    const ms = durationRef.value ?? providerCtx.duration.value;
+    startTimer(ms);
+  },
+);
+
+onMounted(() => {
+  providerCtx.onToastAdd();
+  const ms = durationRef.value ?? providerCtx.duration.value;
+  startTimer(ms);
+
+  const viewport = providerCtx.viewportRef.value;
+  if (viewport) {
+    viewport.addEventListener(VIEWPORT_PAUSE, pauseTimer);
+    viewport.addEventListener(VIEWPORT_RESUME, resumeTimer);
+  }
+});
+
+onBeforeUnmount(() => {
+  providerCtx.onToastRemove();
+  clearTimer();
+
+  const viewport = providerCtx.viewportRef.value;
+  if (viewport) {
+    viewport.removeEventListener(VIEWPORT_PAUSE, pauseTimer);
+    viewport.removeEventListener(VIEWPORT_RESUME, resumeTimer);
+  }
+});
+
+provideToastContext({
+  onClose: handleClose,
+  duration: durationRef,
+  open,
+  toastId,
+});
+</script>
+
+<template>
+  <Presence :present="open">
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      role="status"
+      :aria-live="type === 'foreground' ? 'assertive' : 'polite'"
+      :aria-atomic="true"
+      :data-state="open ? 'open' : 'closed'"
+      :data-type="type"
+      tabindex="-1"
+      @keydown.escape="emit('escapeKeyDown', $event)"
+    >
+      <slot />
+    </Primitive>
+  </Presence>
+</template>
diff --git a/vue/primitives/src/toast/ToastTitle.vue b/vue/primitives/src/toast/ToastTitle.vue
new file mode 100644
index 0000000..e78021e
--- /dev/null
+++ b/vue/primitives/src/toast/ToastTitle.vue
@@ -0,0 +1,24 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ToastTitleProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '@robonen/vue';
+
+import { Primitive } from '../primitive';
+
+const { as = 'div' } = defineProps<ToastTitleProps>();
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    data-primitives-toast-title
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/toast/ToastViewport.vue b/vue/primitives/src/toast/ToastViewport.vue
new file mode 100644
index 0000000..810110c
--- /dev/null
+++ b/vue/primitives/src/toast/ToastViewport.vue
@@ -0,0 +1,84 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ToastViewportProps extends PrimitiveProps {
+  /** Accessible label for the toast region. Overrides the provider label. */
+  label?: string;
+  /** Keyboard shortcut to focus the viewport. @default ['F8'] */
+  hotkey?: string[];
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, watchPostEffect } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { useToastProviderContext } from './context';
+import { VIEWPORT_PAUSE, VIEWPORT_RESUME } from './utils';
+
+const { as = 'ol', hotkey = ['F8'], label } = defineProps<ToastViewportProps>();
+
+const { forwardRef, currentElement } = useForwardExpose();
+const providerCtx = useToastProviderContext();
+
+watchPostEffect(() => providerCtx.onViewportChange(currentElement.value));
+
+const viewportLabel = computed(() => label ?? providerCtx.label.value);
+
+function handlePointerEnter() {
+  currentElement.value?.dispatchEvent(new CustomEvent(VIEWPORT_PAUSE, { bubbles: true }));
+}
+
+function handlePointerLeave() {
+  currentElement.value?.dispatchEvent(new CustomEvent(VIEWPORT_RESUME, { bubbles: true }));
+}
+
+function handleFocusIn() {
+  currentElement.value?.dispatchEvent(new CustomEvent(VIEWPORT_PAUSE, { bubbles: true }));
+}
+
+function handleFocusOut(event: FocusEvent) {
+  if (currentElement.value?.contains(event.relatedTarget as Node)) return;
+  currentElement.value?.dispatchEvent(new CustomEvent(VIEWPORT_RESUME, { bubbles: true }));
+}
+
+function handleGlobalKeyDown(event: KeyboardEvent) {
+  if (!hotkey || hotkey.length === 0) return;
+  const isHotkey = hotkey.every((key) => {
+    if (key === event.key) return true;
+    if (key === 'altKey') return event.altKey;
+    if (key === 'ctrlKey') return event.ctrlKey;
+    if (key === 'shiftKey') return event.shiftKey;
+    if (key === 'metaKey') return event.metaKey;
+    return false;
+  });
+  if (isHotkey) currentElement.value?.focus();
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', handleGlobalKeyDown);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener('keydown', handleGlobalKeyDown);
+});
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    role="region"
+    :aria-label="viewportLabel"
+    tabindex="-1"
+    style="outline: none"
+    data-primitives-toast-viewport
+    @pointerenter="handlePointerEnter"
+    @pointerleave="handlePointerLeave"
+    @focusin="handleFocusIn"
+    @focusout="handleFocusOut"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/toast/__test__/Toast.regression.test.ts b/vue/primitives/src/toast/__test__/Toast.regression.test.ts
new file mode 100644
index 0000000..05833d4
--- /dev/null
+++ b/vue/primitives/src/toast/__test__/Toast.regression.test.ts
@@ -0,0 +1,103 @@
+// Regression tests for confirmed bugs from Phase 1 audit:
+//   1. ToastRoot tabindex must be -1 (programmatic only), not 0 (conflicts with roving focus).
+//   2. ToastViewport hotkey must validate against empty array (otherwise vacuous-truth
+//      focuses the viewport on every keystroke).
+//   3. ToastRoot must restart the auto-dismiss timer when `duration` changes reactively.
+
+import { mount } from '@vue/test-utils';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { defineComponent, h, nextTick, ref } from 'vue';
+import { ToastProvider, ToastRoot, ToastViewport } from '../index';
+
+function createHarness(props: {
+  duration?: number;
+  hotkey?: string[];
+} = {}) {
+  return defineComponent({
+    components: { ToastProvider, ToastViewport, ToastRoot },
+    setup() {
+      const duration = ref(props.duration);
+      return { duration, hotkey: props.hotkey };
+    },
+    render() {
+      return h(ToastProvider, {}, {
+        default: () => [
+          h(ToastViewport, { hotkey: this.hotkey ?? ['F8'] }),
+          h(ToastRoot, { duration: this.duration }, { default: () => 'Toast body' }),
+        ],
+      });
+    },
+  });
+}
+
+describe('toast — bug regression', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('ToastRoot has tabindex="-1" (programmatic focus only)', () => {
+    const wrapper = mount(createHarness({ duration: Infinity }), { attachTo: document.body });
+    const toast = wrapper.find('[role="status"]');
+    expect(toast.exists()).toBe(true);
+    expect(toast.attributes('tabindex')).toBe('-1');
+    wrapper.unmount();
+  });
+
+  it('ToastViewport ignores empty hotkey array (does not focus on every keypress)', async () => {
+    const wrapper = mount(createHarness({ duration: Infinity, hotkey: [] }), { attachTo: document.body });
+    const viewport = wrapper.find('[role="region"]').element as HTMLElement;
+    const focusSpy = vi.spyOn(viewport, 'focus');
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'a' }));
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'F8' }));
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+
+    expect(focusSpy).not.toHaveBeenCalled();
+    wrapper.unmount();
+  });
+
+  it('ToastViewport responds to F8 when hotkey=["F8"]', () => {
+    const wrapper = mount(createHarness({ duration: Infinity }), { attachTo: document.body });
+    const viewport = wrapper.find('[role="region"]').element as HTMLElement;
+    const focusSpy = vi.spyOn(viewport, 'focus');
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'F8' }));
+
+    expect(focusSpy).toHaveBeenCalledOnce();
+    wrapper.unmount();
+  });
+
+  it('ToastRoot restarts auto-dismiss timer when duration prop changes reactively', async () => {
+    const Harness = createHarness({ duration: 1000 });
+    const wrapper = mount(Harness, { attachTo: document.body });
+
+    // Bump duration to 5000ms BEFORE original 1000ms elapses.
+    vi.advanceTimersByTime(500);
+    wrapper.vm.duration = 5000;
+    await nextTick();
+
+    // Original 1000ms total would have fired by 1100ms — but the watcher restarted the
+    // timer with the new duration. Toast must still be open.
+    vi.advanceTimersByTime(600); // 1100ms elapsed total
+    await nextTick();
+    expect(wrapper.find('[role="status"]').exists()).toBe(true);
+
+    // Now advance the full new duration (5000ms) — toast should close.
+    vi.advanceTimersByTime(5000);
+    await nextTick();
+    await nextTick();
+    expect(wrapper.find('[role="status"]').exists()).toBe(false);
+    wrapper.unmount();
+  });
+
+  it('ToastRoot timer does not fire when duration=Infinity', () => {
+    const wrapper = mount(createHarness({ duration: Infinity }), { attachTo: document.body });
+    vi.advanceTimersByTime(60_000);
+    expect(wrapper.find('[role="status"]').exists()).toBe(true);
+    wrapper.unmount();
+  });
+});
diff --git a/vue/primitives/src/toast/context.ts b/vue/primitives/src/toast/context.ts
new file mode 100644
index 0000000..296851b
--- /dev/null
+++ b/vue/primitives/src/toast/context.ts
@@ -0,0 +1,43 @@
+import type { Ref, ShallowRef } from 'vue';
+
+import { useContextFactory } from '@robonen/vue';
+
+export type SwipeDirection = 'up' | 'down' | 'left' | 'right';
+
+export interface ToastProviderContext {
+  label: Ref<string>;
+  duration: Ref<number>;
+  swipeDirection: Ref<SwipeDirection>;
+  swipeThreshold: Ref<number>;
+  toastCount: Ref<number>;
+  viewportRef: ShallowRef<HTMLElement | undefined>;
+  onViewportChange: (el: HTMLElement | undefined) => void;
+  onToastAdd: () => void;
+  onToastRemove: () => void;
+  isFocusedToastEscapeKeyDownRef: Ref<boolean>;
+  isClosePausedRef: Ref<boolean>;
+}
+
+export interface ToastContext {
+  onClose: () => void;
+  duration: Ref<number | undefined>;
+  open: Ref<boolean>;
+  toastId: Ref<string>;
+}
+
+const {
+  inject: useToastProviderContext,
+  provide: provideToastProviderContext,
+} = useContextFactory<ToastProviderContext>('ToastProviderContext');
+
+const {
+  inject: useToastContext,
+  provide: provideToastContext,
+} = useContextFactory<ToastContext>('ToastContext');
+
+export {
+  useToastProviderContext,
+  provideToastProviderContext,
+  useToastContext,
+  provideToastContext,
+};
diff --git a/vue/primitives/src/toast/index.ts b/vue/primitives/src/toast/index.ts
new file mode 100644
index 0000000..90e5511
--- /dev/null
+++ b/vue/primitives/src/toast/index.ts
@@ -0,0 +1,21 @@
+export { default as ToastProvider } from './ToastProvider.vue';
+export { default as ToastRoot } from './ToastRoot.vue';
+export { default as ToastTitle } from './ToastTitle.vue';
+export { default as ToastDescription } from './ToastDescription.vue';
+export { default as ToastAction } from './ToastAction.vue';
+export { default as ToastClose } from './ToastClose.vue';
+export { default as ToastViewport } from './ToastViewport.vue';
+
+export {
+  useToastProviderContext,
+  useToastContext,
+} from './context';
+
+export type { SwipeDirection, ToastProviderContext, ToastContext } from './context';
+export type { ToastProviderProps } from './ToastProvider.vue';
+export type { ToastRootProps, ToastRootEmits } from './ToastRoot.vue';
+export type { ToastTitleProps } from './ToastTitle.vue';
+export type { ToastDescriptionProps } from './ToastDescription.vue';
+export type { ToastActionProps } from './ToastAction.vue';
+export type { ToastCloseProps } from './ToastClose.vue';
+export type { ToastViewportProps } from './ToastViewport.vue';
diff --git a/vue/primitives/src/toast/utils.ts b/vue/primitives/src/toast/utils.ts
new file mode 100644
index 0000000..54b8da5
--- /dev/null
+++ b/vue/primitives/src/toast/utils.ts
@@ -0,0 +1,2 @@
+export const VIEWPORT_PAUSE = 'toast.viewportPause';
+export const VIEWPORT_RESUME = 'toast.viewportResume';
diff --git a/vue/primitives/src/toggle-group/ToggleGroupItem.vue b/vue/primitives/src/toggle-group/ToggleGroupItem.vue
new file mode 100644
index 0000000..adaa293
--- /dev/null
+++ b/vue/primitives/src/toggle-group/ToggleGroupItem.vue
@@ -0,0 +1,66 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+export interface ToggleGroupItemProps extends PrimitiveProps {
+  value: string;
+  disabled?: boolean;
+
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Primitive } from '../primitive';
+import { useCollectionInjector } from '../collection';
+import { useForwardExpose } from '@robonen/vue';
+import { useToggleGroupContext } from './context';
+
+const { value, disabled = false, as = 'button' } = defineProps<ToggleGroupItemProps>();
+
+const ctx = useToggleGroupContext();
+const { CollectionItem } = useCollectionInjector();
+const { forwardRef, currentElement } = useForwardExpose();
+
+const isDisabled = computed(() => ctx.disabled.value || disabled);
+const isPressed = computed(() => ctx.isPressed(value));
+
+// Roving focus: only one enabled item is the tabstop (first pressed, else first enabled).
+const isTabStop = computed(() => {
+  if (!ctx.rovingFocus.value || isDisabled.value) return !ctx.rovingFocus.value && !isDisabled.value;
+  const enabled = ctx.items.value.filter(x => !x.hasAttribute('data-disabled'));
+  if (enabled.length === 0) return false;
+  const firstPressed = enabled.find(n => n.getAttribute('aria-pressed') === 'true' || n.getAttribute('aria-checked') === 'true');
+  const target = firstPressed ?? enabled[0];
+  return currentElement.value === target;
+});
+
+function onClick(): void {
+  if (isDisabled.value) return;
+  ctx.toggle(value);
+}
+function onKeyDown(event: KeyboardEvent): void {
+  if (!currentElement.value) return;
+  ctx.onItemKeyDown(event, currentElement.value);
+}
+</script>
+
+<template>
+  <CollectionItem>
+    <Primitive
+      :as="as"
+      :ref="forwardRef"
+      :type="as === 'button' ? 'button' : undefined"
+      :role="ctx.type.value === 'single' ? 'radio' : undefined"
+      :aria-pressed="ctx.type.value === 'multiple' ? isPressed : undefined"
+      :aria-checked="ctx.type.value === 'single' ? isPressed : undefined"
+      :aria-disabled="isDisabled || undefined"
+      :data-state="isPressed ? 'on' : 'off'"
+      :data-disabled="isDisabled ? '' : undefined"
+      :tabindex="isDisabled ? -1 : (ctx.rovingFocus.value ? (isTabStop ? 0 : -1) : 0)"
+      :disabled="isDisabled || undefined"
+      @click="onClick"
+      @keydown="onKeyDown"
+    >
+      <slot :pressed="isPressed" />
+    </Primitive>
+  </CollectionItem>
+</template>
diff --git a/vue/primitives/src/toggle-group/ToggleGroupRoot.vue b/vue/primitives/src/toggle-group/ToggleGroupRoot.vue
new file mode 100644
index 0000000..d08587a
--- /dev/null
+++ b/vue/primitives/src/toggle-group/ToggleGroupRoot.vue
@@ -0,0 +1,149 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+import type { RovingDirection } from '../utils/roving-focus';
+import type { ToggleGroupType } from './context';
+
+export interface ToggleGroupRootProps extends PrimitiveProps {
+  type?: ToggleGroupType;
+  modelValue?: string | string[];
+  defaultValue?: string | string[];
+  disabled?: boolean;
+  orientation?: 'horizontal' | 'vertical';
+  dir?: RovingDirection;
+  loop?: boolean;
+  rovingFocus?: boolean;
+}
+
+export interface ToggleGroupRootEmits {
+  'update:modelValue': [value: string | string[] | undefined];
+  valueChange: [value: string | string[]];
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, toRef, watch } from 'vue';
+import { resolveNextIndex, rovingKeyToAction } from '../utils/roving-focus';
+import { useCollectionProvider } from '../collection';
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { provideToggleGroupContext } from './context';
+
+const {
+  type = 'single',
+  disabled = false,
+  orientation = 'horizontal',
+  dir = 'ltr',
+  loop = true,
+  rovingFocus = true,
+  modelValue,
+  defaultValue,
+  as = 'div',
+} = defineProps<ToggleGroupRootProps>();
+
+const { forwardRef } = useForwardExpose();
+
+const emit = defineEmits<ToggleGroupRootEmits>();
+
+function normalize(v: string | string[] | undefined): string[] {
+  if (v === undefined) return [];
+  if (Array.isArray(v)) return v.slice();
+  return [v];
+}
+
+const localValue = ref<string[]>(
+  normalize(modelValue).length > 0 ? normalize(modelValue) : normalize(defaultValue),
+);
+
+watch(() => modelValue, (v) => {
+  if (v === undefined) return;
+  const n = normalize(v);
+  if (n.length === localValue.value.length && n.every((x, i) => x === localValue.value[i])) return;
+  localValue.value = n;
+});
+
+function emitValue(next: string[]): void {
+  localValue.value = next;
+  if (type === 'single') {
+    const v = next[0];
+    emit('update:modelValue', v);
+    emit('valueChange', v ?? '');
+  }
+  else {
+    emit('update:modelValue', next);
+    emit('valueChange', next);
+  }
+}
+
+function toggle(v: string): void {
+  if (disabled) return;
+  if (type === 'single') {
+    if (localValue.value[0] === v) emitValue([]);
+    else emitValue([v]);
+  }
+  else if (localValue.value.includes(v)) {
+    emitValue(localValue.value.filter(x => x !== v));
+  }
+  else {
+    emitValue([...localValue.value, v]);
+  }
+}
+
+function isPressed(v: string): boolean {
+  return localValue.value.includes(v);
+}
+
+// DOM-order items via Collection primitive — survives v-for reorders.
+const { getItems, CollectionSlot } = useCollectionProvider();
+const items = computed(() => getItems(true).map(i => i.ref));
+
+function onItemKeyDown(event: KeyboardEvent, el: HTMLElement): void {
+  if (!rovingFocus) return;
+  const action = rovingKeyToAction(event, { orientation, dir, loop });
+  if (!action) return;
+  event.preventDefault();
+  const enabled = items.value.filter(x => !x.hasAttribute('data-disabled'));
+  if (enabled.length === 0) return;
+  const current = enabled.indexOf(el);
+  if (action.absolute === 'home') {
+    enabled[0]!.focus();
+    return;
+  }
+  if (action.absolute === 'end') {
+    enabled[enabled.length - 1]!.focus();
+    return;
+  }
+  const nextIdx = resolveNextIndex(current === -1 ? 0 : current, action.delta, enabled.length, loop);
+  enabled[nextIdx]!.focus();
+}
+
+provideToggleGroupContext({
+  type: toRef(() => type),
+  value: localValue,
+  toggle,
+  isPressed,
+  orientation: toRef(() => orientation),
+  direction: toRef(() => dir),
+  loop: toRef(() => loop),
+  disabled: toRef(() => disabled),
+  rovingFocus: toRef(() => rovingFocus),
+  items,
+  onItemKeyDown,
+});
+</script>
+
+<template>
+  <CollectionSlot>
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      :role="type === 'single' ? 'radiogroup' : 'group'"
+      :aria-orientation="orientation"
+      :aria-disabled="disabled || undefined"
+      :dir="dir"
+      :data-orientation="orientation"
+      :data-disabled="disabled ? '' : undefined"
+    >
+      <slot :value="localValue" />
+    </Primitive>
+  </CollectionSlot>
+</template>
diff --git a/vue/primitives/src/toggle-group/__test__/ToggleGroup.test.ts b/vue/primitives/src/toggle-group/__test__/ToggleGroup.test.ts
new file mode 100644
index 0000000..a97f175
--- /dev/null
+++ b/vue/primitives/src/toggle-group/__test__/ToggleGroup.test.ts
@@ -0,0 +1,104 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import { defineComponent, h, nextTick, ref } from 'vue';
+import { ToggleGroupItem, ToggleGroupRoot } from '../index';
+
+function mountGroup(opts: Record<string, unknown> = {}) {
+  const model = ref<string | string[] | undefined>(undefined);
+  const Harness = defineComponent({
+    setup: () => () => h(ToggleGroupRoot, {
+      modelValue: model.value,
+      'onUpdate:modelValue': (v: string | string[] | undefined) => { model.value = v; },
+      ...opts,
+    }, {
+      default: () => [
+        h(ToggleGroupItem, { value: 'a', id: 'a' }, { default: () => 'A' }),
+        h(ToggleGroupItem, { value: 'b', id: 'b' }, { default: () => 'B' }),
+        h(ToggleGroupItem, { value: 'c', id: 'c', disabled: true }, { default: () => 'C' }),
+      ],
+    }),
+  });
+  return { wrapper: mount(Harness, { attachTo: document.body }), model };
+}
+
+function press(el: Element, key: string): void {
+  el.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
+}
+
+describe('ToggleGroup (single)', () => {
+  it('role="radiogroup" and items role="radio"', () => {
+    const { wrapper } = mountGroup();
+    expect(wrapper.element.getAttribute('role')).toBe('radiogroup');
+    expect(document.querySelectorAll('[role="radio"]')).toHaveLength(3);
+    wrapper.unmount();
+  });
+
+  it('click selects; clicking selected deselects', async () => {
+    const { wrapper, model } = mountGroup();
+    await nextTick();
+    const a = document.querySelector<HTMLButtonElement>('#a')!;
+    a.click();
+    await nextTick();
+    expect(model.value).toBe('a');
+    expect(a.getAttribute('aria-checked')).toBe('true');
+    a.click();
+    await nextTick();
+    expect(model.value).toBeUndefined();
+    wrapper.unmount();
+  });
+
+  it('selecting another replaces', async () => {
+    const { wrapper, model } = mountGroup({ defaultValue: 'a' });
+    await nextTick();
+    const b = document.querySelector<HTMLButtonElement>('#b')!;
+    b.click();
+    await nextTick();
+    expect(model.value).toBe('b');
+    wrapper.unmount();
+  });
+
+  it('ArrowRight cycles focus (roving)', async () => {
+    const { wrapper } = mountGroup();
+    await nextTick();
+    const a = document.querySelector<HTMLButtonElement>('#a')!;
+    const b = document.querySelector<HTMLButtonElement>('#b')!;
+    a.focus();
+    press(a, 'ArrowRight');
+    await nextTick();
+    expect(document.activeElement).toBe(b);
+    wrapper.unmount();
+  });
+
+  it('disabled item aria-disabled=true, not toggleable', async () => {
+    const { wrapper, model } = mountGroup();
+    await nextTick();
+    const c = document.querySelector<HTMLButtonElement>('#c')!;
+    expect(c.getAttribute('aria-disabled')).toBe('true');
+    c.click();
+    await nextTick();
+    expect(model.value).toBeUndefined();
+    wrapper.unmount();
+  });
+});
+
+describe('ToggleGroup (multiple)', () => {
+  it('role="group" and items with aria-pressed', async () => {
+    const { wrapper, model } = mountGroup({ type: 'multiple' });
+    await nextTick();
+    expect(wrapper.element.getAttribute('role')).toBe('group');
+    const a = document.querySelector<HTMLButtonElement>('#a')!;
+    const b = document.querySelector<HTMLButtonElement>('#b')!;
+    a.click();
+    await nextTick();
+    expect(a.getAttribute('aria-pressed')).toBe('true');
+    expect(model.value).toEqual(['a']);
+    b.click();
+    await nextTick();
+    expect(model.value).toEqual(['a', 'b']);
+    // Toggle off a:
+    a.click();
+    await nextTick();
+    expect(model.value).toEqual(['b']);
+    wrapper.unmount();
+  });
+});
diff --git a/vue/primitives/src/toggle-group/context.ts b/vue/primitives/src/toggle-group/context.ts
new file mode 100644
index 0000000..4b78769
--- /dev/null
+++ b/vue/primitives/src/toggle-group/context.ts
@@ -0,0 +1,25 @@
+import type { ComputedRef, Ref } from 'vue';
+import type { RovingDirection, RovingOrientation } from '../utils/roving-focus';
+import { useContextFactory } from '@robonen/vue';
+
+export type ToggleGroupType = 'single' | 'multiple';
+
+export interface ToggleGroupContext {
+  type: Ref<ToggleGroupType>;
+  value: Ref<string[]>;
+  toggle: (v: string) => void;
+  isPressed: (v: string) => boolean;
+  orientation: Ref<RovingOrientation>;
+  direction: Ref<RovingDirection>;
+  loop: Ref<boolean>;
+  disabled: Ref<boolean>;
+  rovingFocus: Ref<boolean>;
+  /** DOM-ordered items, sourced from the internal Collection. */
+  items: ComputedRef<HTMLElement[]>;
+  onItemKeyDown: (event: KeyboardEvent, el: HTMLElement) => void;
+}
+
+const ctx = useContextFactory<ToggleGroupContext>('ToggleGroupContext');
+
+export const provideToggleGroupContext = ctx.provide;
+export const useToggleGroupContext = ctx.inject;
diff --git a/vue/primitives/src/toggle-group/index.ts b/vue/primitives/src/toggle-group/index.ts
new file mode 100644
index 0000000..b553bdc
--- /dev/null
+++ b/vue/primitives/src/toggle-group/index.ts
@@ -0,0 +1,5 @@
+export { default as ToggleGroupItem } from './ToggleGroupItem.vue';
+export { default as ToggleGroupRoot } from './ToggleGroupRoot.vue';
+export type { ToggleGroupType } from './context';
+export type { ToggleGroupItemProps } from './ToggleGroupItem.vue';
+export type { ToggleGroupRootEmits, ToggleGroupRootProps } from './ToggleGroupRoot.vue';
diff --git a/vue/primitives/src/toggle/Toggle.vue b/vue/primitives/src/toggle/Toggle.vue
new file mode 100644
index 0000000..a148a61
--- /dev/null
+++ b/vue/primitives/src/toggle/Toggle.vue
@@ -0,0 +1,67 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ToggleProps extends PrimitiveProps {
+
+  /** Uncontrolled initial pressed state. */
+  defaultPressed?: boolean;
+  /** Disables the toggle. */
+  disabled?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { ref } from 'vue';
+import { useForwardExpose } from '@robonen/vue';
+
+const { defaultPressed = false, disabled = false, as = 'button' } = defineProps<ToggleProps>();
+
+const { forwardRef } = useForwardExpose();
+
+const localPressed = ref<boolean>(defaultPressed);
+
+const pressed = defineModel<boolean>('pressed', {
+  default: undefined,
+  get: v => v ?? localPressed.value,
+  set: (v) => {
+    localPressed.value = v;
+    return v;
+  },
+});
+
+function toggle() {
+  if (disabled) return;
+  pressed.value = !pressed.value;
+}
+
+function onClick() {
+  toggle();
+}
+
+function onKeydown(event: KeyboardEvent) {
+  // <button> handles Space/Enter natively; synthesize only for non-button hosts.
+  if (as === 'button') return;
+  if (event.key !== ' ' && event.key !== 'Enter') return;
+  event.preventDefault();
+  toggle();
+}
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :type="as === 'button' ? 'button' : undefined"
+    :tabindex="as === 'button' ? undefined : (disabled ? -1 : 0)"
+    :aria-pressed="pressed"
+    :aria-disabled="as === 'button' ? undefined : (disabled ? true : undefined)"
+    :data-state="pressed ? 'on' : 'off'"
+    :data-disabled="disabled ? '' : undefined"
+    :disabled="as === 'button' ? disabled : undefined"
+    @click="onClick"
+    @keydown="onKeydown"
+  >
+    <slot :pressed="pressed" />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/toggle/__test__/Toggle.test.ts b/vue/primitives/src/toggle/__test__/Toggle.test.ts
new file mode 100644
index 0000000..e061ade
--- /dev/null
+++ b/vue/primitives/src/toggle/__test__/Toggle.test.ts
@@ -0,0 +1,101 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import { ref } from 'vue';
+import { Toggle } from '../index';
+
+describe('Toggle', () => {
+  it('defaults to unpressed and toggles on click', async () => {
+    const wrapper = mount(Toggle);
+    expect(wrapper.attributes('aria-pressed')).toBe('false');
+    expect(wrapper.attributes('data-state')).toBe('off');
+    await wrapper.trigger('click');
+    expect(wrapper.attributes('aria-pressed')).toBe('true');
+    expect(wrapper.attributes('data-state')).toBe('on');
+  });
+
+  it('respects defaultPressed', () => {
+    const wrapper = mount(Toggle, { props: { defaultPressed: true } });
+    expect(wrapper.attributes('aria-pressed')).toBe('true');
+  });
+
+  it('syncs with v-model', async () => {
+    const pressed = ref(false);
+    const wrapper = mount(Toggle, {
+      props: { pressed: pressed.value, 'onUpdate:pressed': (v: boolean) => { pressed.value = v; } },
+    });
+    await wrapper.trigger('click');
+    expect(pressed.value).toBe(true);
+  });
+
+  it('does not toggle when disabled', async () => {
+    const wrapper = mount(Toggle, { props: { disabled: true } });
+    await wrapper.trigger('click');
+    expect(wrapper.attributes('aria-pressed')).toBe('false');
+    expect(wrapper.attributes('data-disabled')).toBe('');
+  });
+
+  it('sets type="button" on button element', () => {
+    const wrapper = mount(Toggle);
+    expect(wrapper.attributes('type')).toBe('button');
+  });
+
+  describe('keyboard activation', () => {
+    it('toggles on Space when as is not a button', async () => {
+      const wrapper = mount(Toggle, { props: { as: 'div' } });
+      await wrapper.trigger('keydown', { key: ' ' });
+      expect(wrapper.attributes('aria-pressed')).toBe('true');
+      await wrapper.trigger('keydown', { key: ' ' });
+      expect(wrapper.attributes('aria-pressed')).toBe('false');
+    });
+
+    it('toggles on Enter when as is not a button', async () => {
+      const wrapper = mount(Toggle, { props: { as: 'div' } });
+      await wrapper.trigger('keydown', { key: 'Enter' });
+      expect(wrapper.attributes('aria-pressed')).toBe('true');
+    });
+
+    it('ignores other keys', async () => {
+      const wrapper = mount(Toggle, { props: { as: 'div' } });
+      await wrapper.trigger('keydown', { key: 'a' });
+      await wrapper.trigger('keydown', { key: 'Tab' });
+      expect(wrapper.attributes('aria-pressed')).toBe('false');
+    });
+
+    it('does not synthesize keyboard toggle on native button', async () => {
+      const wrapper = mount(Toggle);
+      await wrapper.trigger('keydown', { key: ' ' });
+      expect(wrapper.attributes('aria-pressed')).toBe('false');
+    });
+
+    it('does not toggle on keyboard when disabled (as=div)', async () => {
+      const wrapper = mount(Toggle, { props: { as: 'div', disabled: true } });
+      await wrapper.trigger('keydown', { key: ' ' });
+      await wrapper.trigger('keydown', { key: 'Enter' });
+      expect(wrapper.attributes('aria-pressed')).toBe('false');
+    });
+  });
+
+  describe('non-button host (as="div")', () => {
+    it('sets aria-disabled when disabled', () => {
+      const wrapper = mount(Toggle, { props: { as: 'div', disabled: true } });
+      expect(wrapper.attributes('aria-disabled')).toBe('true');
+    });
+
+    it('does not set aria-disabled when enabled', () => {
+      const wrapper = mount(Toggle, { props: { as: 'div' } });
+      expect(wrapper.attributes('aria-disabled')).toBeUndefined();
+    });
+
+    it('has tabindex=0 when enabled, -1 when disabled', () => {
+      const enabled = mount(Toggle, { props: { as: 'div' } });
+      expect(enabled.attributes('tabindex')).toBe('0');
+      const disabled = mount(Toggle, { props: { as: 'div', disabled: true } });
+      expect(disabled.attributes('tabindex')).toBe('-1');
+    });
+
+    it('button host has no synthesized tabindex', () => {
+      const wrapper = mount(Toggle);
+      expect(wrapper.attributes('tabindex')).toBeUndefined();
+    });
+  });
+});
diff --git a/vue/primitives/src/toggle/index.ts b/vue/primitives/src/toggle/index.ts
new file mode 100644
index 0000000..112bc61
--- /dev/null
+++ b/vue/primitives/src/toggle/index.ts
@@ -0,0 +1,2 @@
+export { default as Toggle } from './Toggle.vue';
+export type { ToggleProps } from './Toggle.vue';
diff --git a/vue/primitives/src/toolbar/ToolbarButton.vue b/vue/primitives/src/toolbar/ToolbarButton.vue
new file mode 100644
index 0000000..9f6f5eb
--- /dev/null
+++ b/vue/primitives/src/toolbar/ToolbarButton.vue
@@ -0,0 +1,48 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+export interface ToolbarButtonProps extends PrimitiveProps {
+
+  disabled?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { computed } from 'vue';
+import { useCollectionInjector } from '../collection';
+import { useForwardExpose } from '@robonen/vue';
+import { useToolbarContext } from './context';
+
+const { as = 'button', disabled = false } = defineProps<ToolbarButtonProps>();
+const ctx = useToolbarContext();
+const { forwardRef, currentElement } = useForwardExpose();
+const { CollectionItem } = useCollectionInjector();
+
+const index = computed(() => (currentElement.value ? ctx.items.value.indexOf(currentElement.value) : -1));
+const isActive = computed(() => index.value === ctx.activeIndex.value);
+
+function onKeyDown(event: KeyboardEvent): void {
+  if (!currentElement.value) return;
+  ctx.onItemKeyDown(event, currentElement.value);
+}
+function onFocus(): void {
+  if (index.value !== -1) ctx.activeIndex.value = index.value;
+}
+</script>
+
+<template>
+  <CollectionItem>
+    <Primitive
+      :as="as"
+      :ref="forwardRef"
+      :type="as === 'button' ? 'button' : undefined"
+      :tabindex="disabled ? -1 : (isActive ? 0 : -1)"
+      :disabled="disabled || undefined"
+      :data-disabled="disabled ? '' : undefined"
+      @keydown="onKeyDown"
+      @focus="onFocus"
+    >
+      <slot />
+    </Primitive>
+  </CollectionItem>
+</template>
diff --git a/vue/primitives/src/toolbar/ToolbarRoot.vue b/vue/primitives/src/toolbar/ToolbarRoot.vue
new file mode 100644
index 0000000..984debf
--- /dev/null
+++ b/vue/primitives/src/toolbar/ToolbarRoot.vue
@@ -0,0 +1,75 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+import type { RovingDirection } from '../utils/roving-focus';
+
+export interface ToolbarRootProps extends PrimitiveProps {
+  orientation?: 'horizontal' | 'vertical';
+  dir?: RovingDirection;
+  loop?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, toRef } from 'vue';
+import { resolveNextIndex, rovingKeyToAction } from '../utils/roving-focus';
+import { useCollectionProvider } from '../collection';
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { provideToolbarContext } from './context';
+
+const { orientation = 'horizontal', dir = 'ltr', loop = true, as = 'div' } = defineProps<ToolbarRootProps>();
+
+const { forwardRef } = useForwardExpose();
+
+// DOM-order items via Collection primitive. Survives `v-for` reorders and
+// teleport/portal children, unlike a mount-order array.
+const { getItems, CollectionSlot } = useCollectionProvider();
+const items = computed(() => getItems(true).map(i => i.ref));
+
+const activeIndex = ref(0);
+
+function focusIndex(i: number): void {
+  const el = items.value[i];
+  if (el) {
+    activeIndex.value = i;
+    el.focus();
+  }
+}
+
+function onItemKeyDown(event: KeyboardEvent, el: HTMLElement): void {
+  const action = rovingKeyToAction(event, { orientation, dir, loop });
+  if (!action) return;
+  event.preventDefault();
+  const list = items.value;
+  const idx = list.indexOf(el);
+  if (action.absolute === 'home') return focusIndex(0);
+  if (action.absolute === 'end') return focusIndex(list.length - 1);
+  focusIndex(resolveNextIndex(idx, action.delta, list.length, loop));
+}
+
+provideToolbarContext({
+  // Identity passthroughs via `toRef` — reactive without `computed`'s effect/cache.
+  orientation: toRef(() => orientation),
+  direction: toRef(() => dir),
+  loop: toRef(() => loop),
+  items,
+  activeIndex,
+  focusIndex,
+  onItemKeyDown,
+});
+</script>
+
+<template>
+  <CollectionSlot>
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      role="toolbar"
+      :aria-orientation="orientation"
+      :dir="dir"
+      :data-orientation="orientation"
+    >
+      <slot />
+    </Primitive>
+  </CollectionSlot>
+</template>
diff --git a/vue/primitives/src/toolbar/ToolbarSeparator.vue b/vue/primitives/src/toolbar/ToolbarSeparator.vue
new file mode 100644
index 0000000..15c3b28
--- /dev/null
+++ b/vue/primitives/src/toolbar/ToolbarSeparator.vue
@@ -0,0 +1,31 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+export interface ToolbarSeparatorProps extends PrimitiveProps {
+  orientation?: 'horizontal' | 'vertical';
+
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { useToolbarContext } from './context';
+
+const { as = 'span', orientation } = defineProps<ToolbarSeparatorProps>();
+const { forwardRef } = useForwardExpose();
+const ctx = useToolbarContext();
+// If no orientation passed, inherit from toolbar — but invert (horizontal toolbar needs vertical separator).
+const effective = orientation ?? (ctx.orientation.value === 'horizontal' ? 'vertical' : 'horizontal');
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    role="separator"
+    :aria-orientation="effective"
+    :data-orientation="effective"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/toolbar/__test__/Toolbar.test.ts b/vue/primitives/src/toolbar/__test__/Toolbar.test.ts
new file mode 100644
index 0000000..fe28d42
--- /dev/null
+++ b/vue/primitives/src/toolbar/__test__/Toolbar.test.ts
@@ -0,0 +1,102 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import { defineComponent, h, nextTick } from 'vue';
+import { ToolbarButton, ToolbarRoot, ToolbarSeparator } from '../index';
+
+function mountToolbar(opts: { orientation?: 'horizontal' | 'vertical'; dir?: 'ltr' | 'rtl'; loop?: boolean } = {}) {
+  const Harness = defineComponent({
+    setup: () => () => h(ToolbarRoot, opts, {
+      default: () => [
+        h(ToolbarButton, { id: 'b1' }, { default: () => 'One' }),
+        h(ToolbarButton, { id: 'b2' }, { default: () => 'Two' }),
+        h(ToolbarSeparator),
+        h(ToolbarButton, { id: 'b3' }, { default: () => 'Three' }),
+      ],
+    }),
+  });
+  return mount(Harness, { attachTo: document.body });
+}
+
+function press(el: Element, key: string): void {
+  el.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
+}
+
+describe('Toolbar', () => {
+  it('renders role="toolbar" with aria-orientation', () => {
+    const w = mountToolbar();
+    const root = w.element as HTMLElement;
+    expect(root.getAttribute('role')).toBe('toolbar');
+    expect(root.getAttribute('aria-orientation')).toBe('horizontal');
+    w.unmount();
+  });
+
+  it('first item has tabindex 0, rest -1', async () => {
+    const w = mountToolbar();
+    await nextTick();
+    const btns = document.querySelectorAll<HTMLElement>('button');
+    expect(btns[0]!.tabIndex).toBe(0);
+    expect(btns[1]!.tabIndex).toBe(-1);
+    expect(btns[2]!.tabIndex).toBe(-1);
+    w.unmount();
+  });
+
+  it('ArrowRight moves focus forward; wraps', async () => {
+    const w = mountToolbar();
+    await nextTick();
+    const btns = document.querySelectorAll<HTMLElement>('button');
+    btns[0]!.focus();
+    press(btns[0]!, 'ArrowRight');
+    await nextTick();
+    expect(document.activeElement).toBe(btns[1]);
+    press(btns[1]!, 'ArrowRight');
+    await nextTick();
+    expect(document.activeElement).toBe(btns[2]);
+    press(btns[2]!, 'ArrowRight');
+    await nextTick();
+    expect(document.activeElement).toBe(btns[0]);
+    w.unmount();
+  });
+
+  it('ArrowLeft reverses in RTL', async () => {
+    const w = mountToolbar({ dir: 'rtl' });
+    await nextTick();
+    const btns = document.querySelectorAll<HTMLElement>('button');
+    btns[0]!.focus();
+    press(btns[0]!, 'ArrowLeft');
+    await nextTick();
+    expect(document.activeElement).toBe(btns[1]);
+    w.unmount();
+  });
+
+  it('Home/End jump to first/last', async () => {
+    const w = mountToolbar();
+    await nextTick();
+    const btns = document.querySelectorAll<HTMLElement>('button');
+    btns[0]!.focus();
+    press(btns[0]!, 'End');
+    await nextTick();
+    expect(document.activeElement).toBe(btns[2]);
+    press(btns[2]!, 'Home');
+    await nextTick();
+    expect(document.activeElement).toBe(btns[0]);
+    w.unmount();
+  });
+
+  it('separator has role=separator with inverse orientation', () => {
+    const w = mountToolbar({ orientation: 'horizontal' });
+    const sep = document.querySelector<HTMLElement>('[role="separator"]')!;
+    expect(sep.getAttribute('aria-orientation')).toBe('vertical');
+    w.unmount();
+  });
+
+  it('loop=false clamps at ends', async () => {
+    const w = mountToolbar({ loop: false });
+    await nextTick();
+    const btns = document.querySelectorAll<HTMLElement>('button');
+    btns[0]!.focus();
+    press(btns[0]!, 'ArrowLeft');
+    await nextTick();
+    expect(document.activeElement).toBe(btns[0]);
+    w.unmount();
+  });
+});
diff --git a/vue/primitives/src/toolbar/context.ts b/vue/primitives/src/toolbar/context.ts
new file mode 100644
index 0000000..56d4af8
--- /dev/null
+++ b/vue/primitives/src/toolbar/context.ts
@@ -0,0 +1,19 @@
+import type { ComputedRef, Ref } from 'vue';
+import type { RovingDirection, RovingOrientation } from '../utils/roving-focus';
+import { useContextFactory } from '@robonen/vue';
+
+export interface ToolbarContext {
+  orientation: Ref<RovingOrientation>;
+  direction: Ref<RovingDirection>;
+  loop: Ref<boolean>;
+  /** DOM-ordered items, sourced from the internal Collection. */
+  items: ComputedRef<HTMLElement[]>;
+  activeIndex: Ref<number>;
+  focusIndex: (i: number) => void;
+  onItemKeyDown: (event: KeyboardEvent, el: HTMLElement) => void;
+}
+
+const ctx = useContextFactory<ToolbarContext>('ToolbarContext');
+
+export const provideToolbarContext = ctx.provide;
+export const useToolbarContext = ctx.inject;
diff --git a/vue/primitives/src/toolbar/index.ts b/vue/primitives/src/toolbar/index.ts
new file mode 100644
index 0000000..2d42e25
--- /dev/null
+++ b/vue/primitives/src/toolbar/index.ts
@@ -0,0 +1,6 @@
+export { default as ToolbarButton } from './ToolbarButton.vue';
+export { default as ToolbarRoot } from './ToolbarRoot.vue';
+export { default as ToolbarSeparator } from './ToolbarSeparator.vue';
+export type { ToolbarButtonProps } from './ToolbarButton.vue';
+export type { ToolbarRootProps } from './ToolbarRoot.vue';
+export type { ToolbarSeparatorProps } from './ToolbarSeparator.vue';
diff --git a/vue/primitives/src/tooltip/TooltipArrow.vue b/vue/primitives/src/tooltip/TooltipArrow.vue
new file mode 100644
index 0000000..9c2bb22
--- /dev/null
+++ b/vue/primitives/src/tooltip/TooltipArrow.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { PopperArrowProps } from '../popper';
+
+export interface TooltipArrowProps extends PopperArrowProps {}
+</script>
+
+<script setup lang="ts">
+import { PopperArrow } from '../popper';
+
+const { width = 10, height = 5 } = defineProps<TooltipArrowProps>();
+</script>
+
+<template>
+  <PopperArrow :width="width" :height="height">
+    <slot />
+  </PopperArrow>
+</template>
diff --git a/vue/primitives/src/tooltip/TooltipContent.vue b/vue/primitives/src/tooltip/TooltipContent.vue
new file mode 100644
index 0000000..5d52e97
--- /dev/null
+++ b/vue/primitives/src/tooltip/TooltipContent.vue
@@ -0,0 +1,33 @@
+<script lang="ts">
+import type { TooltipContentImplEmits, TooltipContentImplProps } from './TooltipContentImpl.vue';
+
+export interface TooltipContentProps extends TooltipContentImplProps {
+  /** Keep mounted for CSS exit animations. */
+  forceMount?: boolean;
+}
+
+export type TooltipContentEmits = TooltipContentImplEmits;
+</script>
+
+<script setup lang="ts">
+import { Presence } from '../presence';
+import TooltipContentImpl from './TooltipContentImpl.vue';
+import { useTooltipContext } from './context';
+
+const { forceMount = false, ...contentProps } = defineProps<TooltipContentProps>();
+const emit = defineEmits<TooltipContentEmits>();
+
+const ctx = useTooltipContext();
+</script>
+
+<template>
+  <Presence :present="ctx.open.value" :force-mount="forceMount">
+    <TooltipContentImpl
+      v-bind="contentProps"
+      @escape-key-down="emit('escapeKeyDown', $event)"
+      @pointer-down-outside="emit('pointerDownOutside', $event)"
+    >
+      <slot />
+    </TooltipContentImpl>
+  </Presence>
+</template>
diff --git a/vue/primitives/src/tooltip/TooltipContentImpl.vue b/vue/primitives/src/tooltip/TooltipContentImpl.vue
new file mode 100644
index 0000000..44d769e
--- /dev/null
+++ b/vue/primitives/src/tooltip/TooltipContentImpl.vue
@@ -0,0 +1,149 @@
+<script lang="ts">
+import type { PopperContentProps } from '../popper';
+import type { PrimitiveProps } from '../primitive';
+
+export interface TooltipContentImplProps extends PrimitiveProps, Pick<
+  PopperContentProps,
+  | 'side'
+  | 'sideOffset'
+  | 'sideFlip'
+  | 'align'
+  | 'alignOffset'
+  | 'alignFlip'
+  | 'avoidCollisions'
+  | 'collisionBoundary'
+  | 'collisionPadding'
+  | 'arrowPadding'
+  | 'sticky'
+  | 'hideWhenDetached'
+  | 'positionStrategy'
+  | 'updatePositionStrategy'
+> {
+  /**
+   * Accessible label for screen readers when the visible content is not descriptive
+   * enough (e.g. icon-only). Falls back to the rendered `textContent`.
+   */
+  ariaLabel?: string;
+}
+
+export interface TooltipContentImplEmits {
+  /** Escape pressed while this tooltip is topmost. Preventable. */
+  escapeKeyDown: [event: KeyboardEvent];
+  /** Pointer down outside the tooltip. Preventable. */
+  pointerDownOutside: [event: PointerEvent | MouseEvent];
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onMounted, onScopeDispose } from 'vue';
+import { DismissableLayer } from '../dismissable-layer';
+import { PopperContent } from '../popper';
+import { TOOLTIP_OPEN_EVENT } from './utils';
+import { VisuallyHidden } from '../visually-hidden';
+import { useForwardExpose } from '@robonen/vue';
+import { useTooltipContext } from './context';
+
+const {
+  side = 'top',
+  sideOffset = 0,
+  sideFlip = true,
+  align = 'center',
+  alignOffset = 0,
+  alignFlip = true,
+  avoidCollisions = true,
+  collisionBoundary = [],
+  collisionPadding = 0,
+  arrowPadding = 0,
+  sticky = 'partial',
+  hideWhenDetached = false,
+  positionStrategy,
+  updatePositionStrategy,
+  ariaLabel,
+  as = 'div',
+} = defineProps<TooltipContentImplProps>();
+
+const emit = defineEmits<TooltipContentImplEmits>();
+
+const ctx = useTooltipContext();
+const { forwardRef, currentElement } = useForwardExpose();
+
+const computedAriaLabel = computed(() => ariaLabel ?? currentElement.value?.textContent ?? '');
+
+function onDocumentTooltipOpen() {
+  ctx.onClose();
+}
+
+function onScrollCapture(event: Event) {
+  const target = event.target as Node | null;
+  if (target && ctx.trigger.value && target.contains(ctx.trigger.value)) ctx.onClose();
+}
+
+onMounted(() => {
+  if (typeof globalThis === 'undefined') return;
+  globalThis.addEventListener('scroll', onScrollCapture, { capture: true });
+  document.addEventListener(TOOLTIP_OPEN_EVENT, onDocumentTooltipOpen);
+});
+
+onScopeDispose(() => {
+  if (typeof globalThis === 'undefined') return;
+  globalThis.removeEventListener('scroll', onScrollCapture, { capture: true });
+  document.removeEventListener(TOOLTIP_OPEN_EVENT, onDocumentTooltipOpen);
+});
+
+function onPointerDownOutside(event: PointerEvent | MouseEvent) {
+  if (
+    ctx.disableClosingTrigger.value
+    && ctx.trigger.value
+    && ctx.trigger.value.contains(event.target as Node)
+  ) {
+    event.preventDefault();
+  }
+  emit('pointerDownOutside', event);
+}
+</script>
+
+<template>
+  <DismissableLayer
+    as="template"
+    :disable-outside-pointer-events="false"
+    @escape-key-down="emit('escapeKeyDown', $event)"
+    @pointer-down-outside="onPointerDownOutside"
+    @focus-outside.prevent
+    @dismiss="ctx.onClose"
+  >
+    <PopperContent
+      :ref="forwardRef"
+      :as="as"
+      :side="side"
+      :side-offset="sideOffset"
+      :side-flip="sideFlip"
+      :align="align"
+      :align-offset="alignOffset"
+      :align-flip="alignFlip"
+      :avoid-collisions="avoidCollisions"
+      :collision-boundary="collisionBoundary"
+      :collision-padding="collisionPadding"
+      :arrow-padding="arrowPadding"
+      :sticky="sticky"
+      :hide-when-detached="hideWhenDetached"
+      :position-strategy="positionStrategy"
+      :update-position-strategy="updatePositionStrategy"
+      :data-state="ctx.stateAttribute.value"
+      :style="{
+        '--tooltip-content-transform-origin': 'var(--popper-transform-origin)',
+        '--tooltip-content-available-width': 'var(--popper-available-width)',
+        '--tooltip-content-available-height': 'var(--popper-available-height)',
+        '--tooltip-trigger-width': 'var(--popper-anchor-width)',
+        '--tooltip-trigger-height': 'var(--popper-anchor-height)',
+      }"
+    >
+      <slot />
+      <VisuallyHidden
+        :id="ctx.contentId.value"
+        role="tooltip"
+      >
+        {{ computedAriaLabel }}
+      </VisuallyHidden>
+    </PopperContent>
+  </DismissableLayer>
+</template>
diff --git a/vue/primitives/src/tooltip/TooltipPortal.vue b/vue/primitives/src/tooltip/TooltipPortal.vue
new file mode 100644
index 0000000..45bfc25
--- /dev/null
+++ b/vue/primitives/src/tooltip/TooltipPortal.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { TeleportPrimitiveProps } from '../teleport';
+
+export interface TooltipPortalProps extends TeleportPrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Portal } from '../teleport';
+
+const props = defineProps<TooltipPortalProps>();
+</script>
+
+<template>
+  <Portal v-bind="props">
+    <slot />
+  </Portal>
+</template>
diff --git a/vue/primitives/src/tooltip/TooltipProvider.vue b/vue/primitives/src/tooltip/TooltipProvider.vue
new file mode 100644
index 0000000..a4ebade
--- /dev/null
+++ b/vue/primitives/src/tooltip/TooltipProvider.vue
@@ -0,0 +1,89 @@
+<script lang="ts">
+export interface TooltipProviderProps {
+  /**
+   * Hover delay before opening, in ms.
+   * @default 700
+   */
+  delayDuration?: number;
+  /**
+   * After a tooltip closes, subsequent tooltips open without delay for this many ms.
+   * @default 300
+   */
+  skipDelayDuration?: number;
+  /**
+   * When `true`, the tooltip closes as soon as the pointer leaves the trigger
+   * (hoverable content disabled). Has a11y consequences.
+   * @default false
+   */
+  disableHoverableContent?: boolean;
+  /**
+   * When `true`, clicking the trigger does not close the tooltip.
+   * @default false
+   */
+  disableClosingTrigger?: boolean;
+  /**
+   * Disable all tooltips inside this provider.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Skip opening on focus that did not come from the keyboard
+   * (matched via `:focus-visible`).
+   * @default false
+   */
+  ignoreNonKeyboardFocus?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { onScopeDispose, ref, toRef } from 'vue';
+import { provideTooltipProviderContext } from './context';
+
+defineOptions({ inheritAttrs: false });
+
+const {
+  delayDuration = 700,
+  skipDelayDuration = 300,
+  disableHoverableContent = false,
+  disableClosingTrigger = false,
+  disabled = false,
+  ignoreNonKeyboardFocus = false,
+} = defineProps<TooltipProviderProps>();
+
+const isOpenDelayed = ref(true);
+const isPointerInTransitRef = ref(false);
+
+let skipTimer: ReturnType<typeof setTimeout> | undefined;
+function clearSkipTimer() {
+  if (skipTimer !== undefined) {
+    clearTimeout(skipTimer);
+    skipTimer = undefined;
+  }
+}
+onScopeDispose(clearSkipTimer);
+
+provideTooltipProviderContext({
+  isOpenDelayed,
+  delayDuration: toRef(() => delayDuration),
+  skipDelayDuration: toRef(() => skipDelayDuration),
+  disableHoverableContent: toRef(() => disableHoverableContent),
+  disableClosingTrigger: toRef(() => disableClosingTrigger),
+  disabled: toRef(() => disabled),
+  ignoreNonKeyboardFocus: toRef(() => ignoreNonKeyboardFocus),
+  isPointerInTransitRef,
+  onOpen() {
+    clearSkipTimer();
+    isOpenDelayed.value = false;
+  },
+  onClose() {
+    clearSkipTimer();
+    skipTimer = setTimeout(() => {
+      isOpenDelayed.value = true;
+    }, skipDelayDuration);
+  },
+});
+</script>
+
+<template>
+  <slot />
+</template>
diff --git a/vue/primitives/src/tooltip/TooltipRoot.vue b/vue/primitives/src/tooltip/TooltipRoot.vue
new file mode 100644
index 0000000..fa784cb
--- /dev/null
+++ b/vue/primitives/src/tooltip/TooltipRoot.vue
@@ -0,0 +1,157 @@
+<script lang="ts">
+export interface TooltipRootProps {
+  /** Initial open state in uncontrolled mode. */
+  defaultOpen?: boolean;
+  /**
+   * Per-tooltip override for the provider's `delayDuration`.
+   * @default 700
+   */
+  delayDuration?: number;
+  /**
+   * Per-tooltip override for the provider's `disableHoverableContent`.
+   */
+  disableHoverableContent?: boolean;
+  /**
+   * Per-tooltip override for the provider's `disableClosingTrigger`.
+   */
+  disableClosingTrigger?: boolean;
+  /**
+   * Per-tooltip override for the provider's `disabled`.
+   */
+  disabled?: boolean;
+  /**
+   * Per-tooltip override for the provider's `ignoreNonKeyboardFocus`.
+   */
+  ignoreNonKeyboardFocus?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onScopeDispose, ref } from 'vue';
+import { provideTooltipContext, useTooltipProviderContext } from './context';
+import { PopperRoot } from '../popper';
+import { TOOLTIP_OPEN_EVENT } from './utils';
+import { useId } from '../config-provider';
+
+defineOptions({ inheritAttrs: false });
+
+const {
+  defaultOpen = false,
+  delayDuration: delayDurationProp,
+  disableHoverableContent: disableHoverableContentProp,
+  disableClosingTrigger: disableClosingTriggerProp,
+  disabled: disabledProp,
+  ignoreNonKeyboardFocus: ignoreNonKeyboardFocusProp,
+} = defineProps<TooltipRootProps>();
+
+defineSlots<{
+  default?: (props: { open: boolean }) => unknown;
+}>();
+
+const providerCtx = useTooltipProviderContext();
+
+const local = ref<boolean>(defaultOpen);
+const open = defineModel<boolean>('open', {
+  default: undefined,
+  get: external => external ?? local.value,
+  set: (value) => {
+    local.value = value;
+    return value;
+  },
+});
+
+const delayDuration = computed(() => delayDurationProp ?? providerCtx.delayDuration.value);
+const disableHoverableContent = computed(
+  () => disableHoverableContentProp ?? providerCtx.disableHoverableContent.value,
+);
+const disableClosingTrigger = computed(
+  () => disableClosingTriggerProp ?? providerCtx.disableClosingTrigger.value,
+);
+const disabled = computed(() => disabledProp ?? providerCtx.disabled.value);
+const ignoreNonKeyboardFocus = computed(
+  () => ignoreNonKeyboardFocusProp ?? providerCtx.ignoreNonKeyboardFocus.value,
+);
+
+const wasOpenDelayed = ref(false);
+const trigger = ref<HTMLElement>();
+const contentId = useId(undefined, 'tooltip-content');
+
+const stateAttribute = computed<'closed' | 'delayed-open' | 'instant-open'>(() => {
+  if (!open.value) return 'closed';
+  return wasOpenDelayed.value ? 'delayed-open' : 'instant-open';
+});
+
+let openTimer: ReturnType<typeof setTimeout> | undefined;
+function clearOpenTimer() {
+  if (openTimer !== undefined) {
+    clearTimeout(openTimer);
+    openTimer = undefined;
+  }
+}
+onScopeDispose(clearOpenTimer);
+
+function dispatchOpenEvent() {
+  if (typeof document === 'undefined') return;
+  document.dispatchEvent(new CustomEvent(TOOLTIP_OPEN_EVENT));
+}
+
+function handleOpen() {
+  clearOpenTimer();
+  wasOpenDelayed.value = false;
+  if (!open.value) {
+    open.value = true;
+    providerCtx.onOpen();
+    dispatchOpenEvent();
+  }
+}
+
+function handleClose() {
+  clearOpenTimer();
+  if (open.value) {
+    open.value = false;
+    providerCtx.onClose();
+  }
+}
+
+function handleDelayedOpen() {
+  clearOpenTimer();
+  openTimer = setTimeout(() => {
+    wasOpenDelayed.value = true;
+    if (!open.value) {
+      open.value = true;
+      providerCtx.onOpen();
+      dispatchOpenEvent();
+    }
+  }, delayDuration.value);
+}
+
+provideTooltipContext({
+  contentId,
+  open,
+  stateAttribute,
+  trigger,
+  disableHoverableContent,
+  disableClosingTrigger,
+  disabled,
+  ignoreNonKeyboardFocus,
+  onTriggerChange(el) {
+    trigger.value = el;
+  },
+  onTriggerEnter() {
+    if (providerCtx.isOpenDelayed.value) handleDelayedOpen();
+    else handleOpen();
+  },
+  onTriggerLeave() {
+    if (disableHoverableContent.value) handleClose();
+    else clearOpenTimer();
+  },
+  onOpen: handleOpen,
+  onClose: handleClose,
+});
+</script>
+
+<template>
+  <PopperRoot>
+    <slot :open="open" />
+  </PopperRoot>
+</template>
diff --git a/vue/primitives/src/tooltip/TooltipTrigger.vue b/vue/primitives/src/tooltip/TooltipTrigger.vue
new file mode 100644
index 0000000..6326d66
--- /dev/null
+++ b/vue/primitives/src/tooltip/TooltipTrigger.vue
@@ -0,0 +1,95 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface TooltipTriggerProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { useTooltipContext, useTooltipProviderContext } from './context';
+import { PopperAnchor } from '../popper';
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'button' } = defineProps<TooltipTriggerProps>();
+
+const ctx = useTooltipContext();
+const providerCtx = useTooltipProviderContext();
+const { forwardRef, currentElement } = useForwardExpose();
+
+const isPointerDown = ref(false);
+const hasPointerMoveOpened = ref(false);
+
+onMounted(() => {
+  ctx.onTriggerChange(currentElement.value);
+});
+
+function onPointerMove(event: PointerEvent) {
+  if (ctx.disabled.value) return;
+  if (event.pointerType === 'touch') return;
+  if (hasPointerMoveOpened.value || providerCtx.isPointerInTransitRef.value) return;
+  ctx.onTriggerEnter();
+  hasPointerMoveOpened.value = true;
+}
+
+function onPointerLeave() {
+  if (ctx.disabled.value) return;
+  ctx.onTriggerLeave();
+  hasPointerMoveOpened.value = false;
+}
+
+function onPointerUp() {
+  // Defer reset by one tick so `focus` handlers can see the latest `isPointerDown`.
+  setTimeout(() => {
+    isPointerDown.value = false;
+  }, 1);
+}
+
+function onPointerDown() {
+  if (ctx.disabled.value) return;
+  if (ctx.open.value && !ctx.disableClosingTrigger.value) ctx.onClose();
+  isPointerDown.value = true;
+  document.addEventListener('pointerup', onPointerUp, { once: true });
+}
+
+function onFocus(event: FocusEvent) {
+  if (ctx.disabled.value) return;
+  if (isPointerDown.value) return;
+  if (
+    ctx.ignoreNonKeyboardFocus.value
+    && !(event.target as HTMLElement | null)?.matches?.(':focus-visible')
+  ) return;
+  ctx.onOpen();
+}
+
+function onBlur() {
+  if (ctx.disabled.value) return;
+  ctx.onClose();
+}
+
+function onClick() {
+  if (ctx.disabled.value) return;
+  if (!ctx.disableClosingTrigger.value) ctx.onClose();
+}
+</script>
+
+<template>
+  <PopperAnchor as="template">
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      :type="as === 'button' ? 'button' : undefined"
+      :aria-describedby="ctx.open.value ? ctx.contentId.value : undefined"
+      :data-state="ctx.stateAttribute.value"
+      data-tooltip-trigger
+      @pointermove="onPointerMove"
+      @pointerleave="onPointerLeave"
+      @pointerdown="onPointerDown"
+      @focus="onFocus"
+      @blur="onBlur"
+      @click="onClick"
+    >
+      <slot />
+    </Primitive>
+  </PopperAnchor>
+</template>
diff --git a/vue/primitives/src/tooltip/__test__/Tooltip.test.ts b/vue/primitives/src/tooltip/__test__/Tooltip.test.ts
new file mode 100644
index 0000000..e1626f5
--- /dev/null
+++ b/vue/primitives/src/tooltip/__test__/Tooltip.test.ts
@@ -0,0 +1,291 @@
+import {
+  TooltipContent,
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
+} from '../../index';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { defineComponent, h, nextTick } from 'vue';
+import type { VueWrapper } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+
+const wrappers: Array<VueWrapper<any>> = [];
+
+afterEach(() => {
+  while (wrappers.length) wrappers.pop()!.unmount();
+  document.body.innerHTML = '';
+  document.body.removeAttribute('style');
+  vi.useRealTimers();
+});
+
+function track<T extends VueWrapper<any>>(w: T): T {
+  wrappers.push(w);
+  return w;
+}
+
+function mountTooltip(options: {
+  open?: boolean;
+  defaultOpen?: boolean;
+  delayDuration?: number;
+  skipDelayDuration?: number;
+  disabled?: boolean;
+  disableHoverableContent?: boolean;
+  disableClosingTrigger?: boolean;
+  ignoreNonKeyboardFocus?: boolean;
+  onUpdateOpen?: (v: boolean) => void;
+  forceMount?: boolean;
+} = {}) {
+  const Wrapper = defineComponent({
+    setup() {
+      return () =>
+        h(
+          TooltipProvider,
+          {
+            delayDuration: options.delayDuration,
+            skipDelayDuration: options.skipDelayDuration,
+          },
+          {
+            default: () =>
+              h(
+                TooltipRoot,
+                {
+                  open: options.open,
+                  defaultOpen: options.defaultOpen,
+                  disabled: options.disabled,
+                  disableHoverableContent: options.disableHoverableContent,
+                  disableClosingTrigger: options.disableClosingTrigger,
+                  ignoreNonKeyboardFocus: options.ignoreNonKeyboardFocus,
+                  'onUpdate:open': options.onUpdateOpen,
+                },
+                {
+                  default: () => [
+                    h(TooltipTrigger, null, { default: () => 'Trigger' }),
+                    h(
+                      TooltipContent,
+                      { forceMount: options.forceMount },
+                      { default: () => 'Tooltip body' },
+                    ),
+                  ],
+                },
+              ),
+          },
+        );
+    },
+  });
+
+  return track(mount(Wrapper, { attachTo: document.body }));
+}
+
+function getTrigger(): HTMLButtonElement {
+  return document.querySelector('[data-tooltip-trigger]') as HTMLButtonElement;
+}
+
+function getTooltip(): HTMLElement | null {
+  return document.querySelector('[role="tooltip"]');
+}
+
+describe('Tooltip', () => {
+  it('renders trigger with closed state by default', () => {
+    mountTooltip();
+    const trigger = getTrigger();
+    expect(trigger).toBeTruthy();
+    expect(trigger.getAttribute('data-state')).toBe('closed');
+    expect(trigger.getAttribute('aria-describedby')).toBe(null);
+    expect(getTooltip()).toBeNull();
+  });
+
+  it('opens with defaultOpen and exposes aria-describedby', async () => {
+    mountTooltip({ defaultOpen: true });
+    await nextTick();
+
+    const trigger = getTrigger();
+    expect(trigger.getAttribute('data-state')).toBe('instant-open');
+    expect(trigger.getAttribute('aria-describedby')).toBeTruthy();
+
+    const tip = getTooltip();
+    expect(tip).toBeTruthy();
+    expect(tip!.id).toBe(trigger.getAttribute('aria-describedby'));
+  });
+
+  it('opens on focus and closes on blur', async () => {
+    mountTooltip();
+    const trigger = getTrigger();
+
+    trigger.dispatchEvent(new FocusEvent('focus'));
+    await nextTick();
+    expect(trigger.getAttribute('data-state')).toBe('instant-open');
+
+    trigger.dispatchEvent(new FocusEvent('blur'));
+    await nextTick();
+    expect(trigger.getAttribute('data-state')).toBe('closed');
+  });
+
+  it('respects controlled v-model', async () => {
+    const onUpdate = vi.fn();
+    const Wrapper = defineComponent({
+      props: { open: { type: Boolean, default: false } },
+      emits: ['update:open'],
+      setup(props, { emit }) {
+        return () =>
+          h(
+            TooltipProvider,
+            null,
+            {
+              default: () =>
+                h(
+                  TooltipRoot,
+                  {
+                    open: props.open,
+                    'onUpdate:open': (v: boolean) => {
+                      onUpdate(v);
+                      emit('update:open', v);
+                    },
+                  },
+                  {
+                    default: () => [
+                      h(TooltipTrigger, null, { default: () => 'T' }),
+                      h(TooltipContent, null, { default: () => 'body' }),
+                    ],
+                  },
+                ),
+            },
+          );
+      },
+    });
+    const wrapper = track(mount(Wrapper, { attachTo: document.body, props: { open: false } }));
+    const trigger = getTrigger();
+
+    trigger.dispatchEvent(new FocusEvent('focus'));
+    await nextTick();
+    expect(onUpdate).toHaveBeenCalledWith(true);
+    expect(trigger.getAttribute('data-state')).toBe('closed');
+
+    await wrapper.setProps({ open: true });
+    await nextTick();
+    expect(trigger.getAttribute('data-state')).toBe('instant-open');
+  });
+
+  it('does not open when disabled', async () => {
+    mountTooltip({ disabled: true });
+    const trigger = getTrigger();
+
+    trigger.dispatchEvent(new FocusEvent('focus'));
+    await nextTick();
+    expect(trigger.getAttribute('data-state')).toBe('closed');
+    expect(getTooltip()).toBeNull();
+  });
+
+  it('uses delayed-open after delay window via pointer', async () => {
+    vi.useFakeTimers();
+    mountTooltip({ delayDuration: 100, skipDelayDuration: 50 });
+    const trigger = getTrigger();
+
+    trigger.dispatchEvent(new PointerEvent('pointermove', { pointerType: 'mouse' }));
+    // Not opened yet.
+    expect(trigger.getAttribute('data-state')).toBe('closed');
+
+    vi.advanceTimersByTime(100);
+    await nextTick();
+    expect(trigger.getAttribute('data-state')).toBe('delayed-open');
+  });
+
+  it('skips delay for second tooltip within skipDelayDuration window', async () => {
+    vi.useFakeTimers();
+
+    const Wrapper = defineComponent({
+      setup() {
+        return () =>
+          h(
+            TooltipProvider,
+            { delayDuration: 500, skipDelayDuration: 300 },
+            {
+              default: () => [
+                h(
+                  TooltipRoot,
+                  null,
+                  {
+                    default: () => [
+                      h(TooltipTrigger, { 'data-id': 'a' }, { default: () => 'A' }),
+                      h(TooltipContent, null, { default: () => 'A body' }),
+                    ],
+                  },
+                ),
+                h(
+                  TooltipRoot,
+                  null,
+                  {
+                    default: () => [
+                      h(TooltipTrigger, { 'data-id': 'b' }, { default: () => 'B' }),
+                      h(TooltipContent, null, { default: () => 'B body' }),
+                    ],
+                  },
+                ),
+              ],
+            },
+          );
+      },
+    });
+
+    track(mount(Wrapper, { attachTo: document.body }));
+
+    const a = document.querySelector('[data-id="a"]') as HTMLElement;
+    const b = document.querySelector('[data-id="b"]') as HTMLElement;
+
+    // Open A with delay.
+    a.dispatchEvent(new PointerEvent('pointermove', { pointerType: 'mouse' }));
+    vi.advanceTimersByTime(500);
+    await nextTick();
+    expect(a.getAttribute('data-state')).toBe('delayed-open');
+
+    // Close A via blur-equivalent: pointerleave + disableHoverable would do it,
+    // but here we just close via focus loss simulation through trigger event.
+    a.dispatchEvent(new FocusEvent('blur'));
+    await nextTick();
+    expect(a.getAttribute('data-state')).toBe('closed');
+
+    // Within the skip window — moving over B should open it instantly.
+    vi.advanceTimersByTime(100);
+    b.dispatchEvent(new PointerEvent('pointermove', { pointerType: 'mouse' }));
+    await nextTick();
+    expect(b.getAttribute('data-state')).toBe('instant-open');
+  });
+
+  it('does not open on touch pointers (handled by long-press elsewhere)', async () => {
+    mountTooltip({ delayDuration: 0 });
+    const trigger = getTrigger();
+
+    trigger.dispatchEvent(new PointerEvent('pointermove', { pointerType: 'touch' }));
+    await nextTick();
+    expect(trigger.getAttribute('data-state')).toBe('closed');
+  });
+
+  it('closes on Escape via dismissable layer', async () => {
+    mountTooltip({ defaultOpen: true });
+    await nextTick();
+    expect(getTrigger().getAttribute('data-state')).toBe('instant-open');
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    await nextTick();
+    expect(getTrigger().getAttribute('data-state')).toBe('closed');
+  });
+
+  it('closes when clicked unless disableClosingTrigger', async () => {
+    mountTooltip({ defaultOpen: true });
+    await nextTick();
+    const trigger = getTrigger();
+
+    trigger.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    await nextTick();
+    expect(trigger.getAttribute('data-state')).toBe('closed');
+  });
+
+  it('keeps tooltip open on click when disableClosingTrigger is set', async () => {
+    mountTooltip({ defaultOpen: true, disableClosingTrigger: true });
+    await nextTick();
+    const trigger = getTrigger();
+
+    trigger.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    await nextTick();
+    expect(trigger.getAttribute('data-state')).toBe('instant-open');
+  });
+});
diff --git a/vue/primitives/src/tooltip/context.ts b/vue/primitives/src/tooltip/context.ts
new file mode 100644
index 0000000..b6e9c3a
--- /dev/null
+++ b/vue/primitives/src/tooltip/context.ts
@@ -0,0 +1,50 @@
+import type { ComputedRef, Ref } from 'vue';
+import type { TooltipState } from './utils';
+import { useContextFactory } from '@robonen/vue';
+
+export interface TooltipProviderContext {
+  /** Whether the next tooltip open should wait for the full `delayDuration`. */
+  isOpenDelayed: Ref<boolean>;
+  /** Hover delay before opening when `isOpenDelayed` is `true`. */
+  delayDuration: Ref<number>;
+  /** Skip-delay window after a tooltip closes — used for "menu-like" hover groups. */
+  skipDelayDuration: Ref<number>;
+  /** Set to `true` while the pointer is in the safe-area between trigger and content. */
+  isPointerInTransitRef: Ref<boolean>;
+  /** Globally disable hoverable content (pointer leaving trigger immediately closes). */
+  disableHoverableContent: Ref<boolean>;
+  /** Globally disable closing the tooltip by clicking the trigger. */
+  disableClosingTrigger: Ref<boolean>;
+  /** Globally disable all tooltips inside this provider. */
+  disabled: Ref<boolean>;
+  /** Skip opening on non-keyboard focus (avoids tooltips after closing dialogs / switching tabs). */
+  ignoreNonKeyboardFocus: Ref<boolean>;
+  onOpen: () => void;
+  onClose: () => void;
+}
+
+export const {
+  inject: useTooltipProviderContext,
+  provide: provideTooltipProviderContext,
+} = useContextFactory<TooltipProviderContext>('TooltipProviderContext');
+
+export interface TooltipContext {
+  contentId: ComputedRef<string>;
+  open: Ref<boolean>;
+  stateAttribute: ComputedRef<TooltipState>;
+  trigger: Ref<HTMLElement | undefined>;
+  disableHoverableContent: ComputedRef<boolean>;
+  disableClosingTrigger: ComputedRef<boolean>;
+  disabled: ComputedRef<boolean>;
+  ignoreNonKeyboardFocus: ComputedRef<boolean>;
+  onTriggerChange: (el: HTMLElement | undefined) => void;
+  onTriggerEnter: () => void;
+  onTriggerLeave: () => void;
+  onOpen: () => void;
+  onClose: () => void;
+}
+
+export const {
+  inject: useTooltipContext,
+  provide: provideTooltipContext,
+} = useContextFactory<TooltipContext>('TooltipContext');
diff --git a/vue/primitives/src/tooltip/index.ts b/vue/primitives/src/tooltip/index.ts
new file mode 100644
index 0000000..8f6dd54
--- /dev/null
+++ b/vue/primitives/src/tooltip/index.ts
@@ -0,0 +1,26 @@
+export { default as TooltipProvider } from './TooltipProvider.vue';
+export { default as TooltipRoot } from './TooltipRoot.vue';
+export { default as TooltipTrigger } from './TooltipTrigger.vue';
+export { default as TooltipPortal } from './TooltipPortal.vue';
+export { default as TooltipContent } from './TooltipContent.vue';
+export { default as TooltipArrow } from './TooltipArrow.vue';
+
+export {
+  useTooltipContext,
+  useTooltipProviderContext,
+  type TooltipContext,
+  type TooltipProviderContext,
+} from './context';
+
+export { TOOLTIP_OPEN_EVENT, type TooltipState } from './utils';
+
+export type { TooltipProviderProps } from './TooltipProvider.vue';
+export type { TooltipRootProps } from './TooltipRoot.vue';
+export type { TooltipTriggerProps } from './TooltipTrigger.vue';
+export type { TooltipPortalProps } from './TooltipPortal.vue';
+export type { TooltipContentProps, TooltipContentEmits } from './TooltipContent.vue';
+export type {
+  TooltipContentImplProps,
+  TooltipContentImplEmits,
+} from './TooltipContentImpl.vue';
+export type { TooltipArrowProps } from './TooltipArrow.vue';
diff --git a/vue/primitives/src/tooltip/utils.ts b/vue/primitives/src/tooltip/utils.ts
new file mode 100644
index 0000000..cdbc4dd
--- /dev/null
+++ b/vue/primitives/src/tooltip/utils.ts
@@ -0,0 +1,8 @@
+/**
+ * Custom DOM event dispatched on `document` whenever any tooltip opens.
+ * Other open tooltips listen for it and close themselves so that only one
+ * tooltip is visible at a time without coupling them via a global registry.
+ */
+export const TOOLTIP_OPEN_EVENT = 'tooltip.open';
+
+export type TooltipState = 'closed' | 'delayed-open' | 'instant-open';
diff --git a/vue/primitives/src/tree/TreeItem.vue b/vue/primitives/src/tree/TreeItem.vue
new file mode 100644
index 0000000..82891b6
--- /dev/null
+++ b/vue/primitives/src/tree/TreeItem.vue
@@ -0,0 +1,69 @@
+<script lang="ts" generic="T">
+import type { FlatItem } from './utils';
+import type { PrimitiveProps } from '../primitive';
+
+export interface TreeItemProps<U = unknown> extends PrimitiveProps {
+  /** Flattened item produced by `TreeRoot` (from its default slot). */
+  item: FlatItem<U>;
+  /** Disable this specific item. */
+  disabled?: boolean;
+}
+</script>
+
+<script setup lang="ts" generic="T">
+import { computed } from 'vue';
+import { useCollectionInjector } from '../collection';
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { useTreeContext } from './context';
+
+const { as = 'li', item, disabled = false } = defineProps<TreeItemProps<T>>();
+
+const ctx = useTreeContext();
+const { forwardRef, currentElement } = useForwardExpose();
+const { CollectionItem } = useCollectionInjector();
+
+const isDisabled = computed(() => ctx.disabled.value || disabled);
+const isExpanded = computed(() => item.hasChildren && ctx.isExpanded(item.key));
+const isSelected = computed(() => ctx.isSelected(item.key));
+
+function onClick(event: MouseEvent): void {
+  if (isDisabled.value) return;
+  event.stopPropagation();
+  ctx.select(item.value as T);
+  if (item.hasChildren) ctx.toggleExpanded(item.value as T);
+}
+
+function onKeyDown(event: KeyboardEvent): void {
+  if (isDisabled.value || !currentElement.value) return;
+  ctx.onItemKeyDown(event, currentElement.value, item);
+}
+</script>
+
+<template>
+  <CollectionItem>
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      role="treeitem"
+      :tabindex="isDisabled ? -1 : 0"
+      :aria-level="item.level"
+      :aria-selected="isSelected"
+      :aria-expanded="item.hasChildren ? isExpanded : undefined"
+      :aria-disabled="isDisabled || undefined"
+      :data-state="item.hasChildren ? (isExpanded ? 'open' : 'closed') : undefined"
+      :data-selected="isSelected ? '' : undefined"
+      :data-disabled="isDisabled ? '' : undefined"
+      :data-level="item.level"
+      @click="onClick"
+      @keydown="onKeyDown"
+    >
+      <slot
+        :item="item"
+        :is-expanded="isExpanded"
+        :is-selected="isSelected"
+        :is-disabled="isDisabled"
+      />
+    </Primitive>
+  </CollectionItem>
+</template>
diff --git a/vue/primitives/src/tree/TreeRoot.vue b/vue/primitives/src/tree/TreeRoot.vue
new file mode 100644
index 0000000..4726f8f
--- /dev/null
+++ b/vue/primitives/src/tree/TreeRoot.vue
@@ -0,0 +1,341 @@
+<script lang="ts" generic="T">
+import type { FlatItem } from './utils';
+import type { PrimitiveProps } from '../primitive';
+
+export interface TreeRootProps<U = unknown> extends PrimitiveProps {
+  /** Flat or nested item list — children are resolved via `getChildren`. */
+  items: readonly U[];
+  /** Extract a stable unique string key from an item. */
+  getKey: (item: U) => string;
+  /** Return the children of an item, or `undefined` if it is a leaf. */
+  getChildren?: (item: U) => readonly U[] | undefined | null;
+  /** Controlled selected key(s). Use `v-model`. */
+  modelValue?: string | string[];
+  /** Uncontrolled initial selected key(s). */
+  defaultValue?: string | string[];
+  /** Controlled expanded keys. Use `v-model:expanded`. */
+  expanded?: string[];
+  /** Uncontrolled initial expanded keys. */
+  defaultExpanded?: string[];
+  /** Allow selecting multiple items. @default false */
+  multiple?: boolean;
+  /** Disable the entire tree. */
+  disabled?: boolean;
+  /** Writing direction. @default 'ltr' */
+  dir?: 'ltr' | 'rtl';
+  /** When `true`, selecting a parent also selects all of its descendants (requires `multiple`). */
+  propagateSelect?: boolean;
+}
+
+export interface TreeRootEmits {
+  'update:modelValue': [value: string | string[] | undefined];
+  'update:expanded': [value: string[]];
+}
+</script>
+
+<script setup lang="ts" generic="T">
+import { computed, ref, toRef, watch } from 'vue';
+import { resolveNextIndex, rovingKeyToAction } from '../utils/roving-focus';
+import { flattenVisible } from './utils';
+import { useCollectionProvider } from '../collection';
+import { useConfig } from '../config-provider';
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { provideTreeContext } from './context';
+
+// Hoisted roving-focus options — reused on every keydown to avoid per-event
+// object allocation (keeps the IC at `rovingKeyToAction` monomorphic).
+const ROVING_OPTS_LTR = { orientation: 'vertical', dir: 'ltr', loop: false } as const;
+const ROVING_OPTS_RTL = { orientation: 'vertical', dir: 'rtl', loop: false } as const;
+
+const {
+  as = 'ul',
+  items,
+  getKey,
+  getChildren = ((item: any) => item?.children) as (item: T) => readonly T[] | undefined | null,
+  modelValue,
+  defaultValue,
+  expanded,
+  defaultExpanded,
+  multiple = false,
+  disabled = false,
+  dir,
+  propagateSelect = false,
+} = defineProps<TreeRootProps<T>>();
+
+const emit = defineEmits<TreeRootEmits>();
+
+const { forwardRef } = useForwardExpose();
+const config = useConfig();
+
+// Writing direction — local prop wins, else inherit from <ConfigProvider>.
+const direction = computed(() => dir ?? config.dir.value);
+
+function normalize(v: string | string[] | undefined): string[] {
+  if (v === undefined) return [];
+  return Array.isArray(v) ? v : [v];
+}
+
+// --- Selection state ------------------------------------------------------
+
+const localSelected = ref<string[]>(
+  modelValue !== undefined ? normalize(modelValue) : normalize(defaultValue),
+);
+
+watch(() => modelValue, (v) => {
+  if (v === undefined) return;
+  const arr = normalize(v);
+  const cur = localSelected.value;
+  if (arr.length === cur.length && arr.every((x, i) => x === cur[i])) return;
+  localSelected.value = arr;
+});
+
+function commitSelected(next: string[]): void {
+  localSelected.value = next;
+  emit('update:modelValue', multiple ? next : next[0]);
+}
+
+// O(1) membership lookup — replaces linear `.includes()` that was called once
+// per TreeItem's `isSelected` computed, causing O(n²) work on selection change.
+const selectedSet = computed(() => new Set(localSelected.value));
+
+function isSelected(key: string): boolean {
+  return selectedSet.value.has(key);
+}
+
+function select(value: T): void {
+  if (disabled) return;
+  const key = getKey(value);
+  const current = localSelected.value;
+
+  if (multiple) {
+    const alreadySelected = selectedSet.value.has(key);
+
+    if (propagateSelect) {
+      // Collect `key` + all descendant keys iteratively (avoids flattenAll's
+      // intermediate {key,value}[] allocation — we only need the keys here).
+      const cascadeKeys = new Set<string>();
+      cascadeKeys.add(key);
+      const stack: Array<readonly T[]> = [];
+      const firstChildren = getChildren(value);
+      if (firstChildren && firstChildren.length > 0) stack.push(firstChildren);
+      while (stack.length > 0) {
+        const nodes = stack.pop()!;
+        for (let i = 0; i < nodes.length; i++) {
+          const node = nodes[i]!;
+          cascadeKeys.add(getKey(node));
+          const ch = getChildren(node);
+          if (ch && ch.length > 0) stack.push(ch);
+        }
+      }
+
+      if (alreadySelected) {
+        // O(n) filter with Set lookup (was O(n*m) via Array.includes).
+        const next: string[] = [];
+        for (let i = 0; i < current.length; i++) {
+          const k = current[i]!;
+          if (!cascadeKeys.has(k)) next.push(k);
+        }
+        commitSelected(next);
+      }
+      else {
+        const merged = new Set(current);
+        cascadeKeys.forEach(k => merged.add(k));
+        commitSelected([...merged]);
+      }
+      return;
+    }
+
+    if (alreadySelected) {
+      const next: string[] = [];
+      for (let i = 0; i < current.length; i++) {
+        const k = current[i]!;
+        if (k !== key) next.push(k);
+      }
+      commitSelected(next);
+    }
+    else {
+      commitSelected([...current, key]);
+    }
+    return;
+  }
+
+  // single select — toggle off if already selected
+  if (current[0] === key) commitSelected([]);
+  else commitSelected([key]);
+}
+
+// --- Expanded state -------------------------------------------------------
+
+const localExpanded = ref<string[]>(
+  expanded !== undefined ? [...expanded] : [...(defaultExpanded ?? [])],
+);
+
+watch(() => expanded, (v) => {
+  if (v === undefined) return;
+  const cur = localExpanded.value;
+  if (v.length === cur.length && v.every((x, i) => x === cur[i])) return;
+  localExpanded.value = [...v];
+});
+
+const expandedSet = computed(() => new Set(localExpanded.value));
+
+function isExpanded(key: string): boolean {
+  return expandedSet.value.has(key);
+}
+
+function commitExpanded(next: string[]): void {
+  localExpanded.value = next;
+  emit('update:expanded', next);
+}
+
+function toggleExpanded(value: T): void {
+  const children = getChildren(value);
+  if (!children || children.length === 0) return;
+  const key = getKey(value);
+  const current = localExpanded.value;
+  if (expandedSet.value.has(key)) {
+    const next: string[] = [];
+    for (let i = 0; i < current.length; i++) {
+      const k = current[i]!;
+      if (k !== key) next.push(k);
+    }
+    commitExpanded(next);
+  }
+  else {
+    commitExpanded([...current, key]);
+  }
+}
+
+// --- Flattened visible items ---------------------------------------------
+
+const flatItems = computed<Array<FlatItem<T>>>(() =>
+  flattenVisible(items, getKey, getChildren, expandedSet.value),
+);
+
+// --- Keyboard navigation --------------------------------------------------
+
+const { getItems, CollectionSlot } = useCollectionProvider();
+const treeItemElements = computed(() => getItems(true).map(i => i.ref));
+
+function collectEnabled(): HTMLElement[] {
+  const all = treeItemElements.value;
+  const out: HTMLElement[] = [];
+  for (let i = 0; i < all.length; i++) {
+    const el = all[i]!;
+    if (!el.hasAttribute('data-disabled')) out.push(el);
+  }
+  return out;
+}
+
+function onItemKeyDown(event: KeyboardEvent, el: HTMLElement, item: FlatItem<T>): void {
+  // Enter / Space → select (tree-specific, not covered by roving-focus helper)
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault();
+    select(item.value);
+    return;
+  }
+
+  const enabled = collectEnabled();
+  if (enabled.length === 0) return;
+  const idx = enabled.indexOf(el);
+
+  // Up / Down / Home / End → delegate to shared roving-focus helper.
+  const action = rovingKeyToAction(
+    event,
+    direction.value === 'rtl' ? ROVING_OPTS_RTL : ROVING_OPTS_LTR,
+  );
+  if (action) {
+    event.preventDefault();
+    if (action.absolute === 'home') {
+      enabled[0]!.focus();
+      return;
+    }
+    if (action.absolute === 'end') {
+      enabled[enabled.length - 1]!.focus();
+      return;
+    }
+    const nextIdx = resolveNextIndex(idx, action.delta, enabled.length, false);
+    enabled[nextIdx]!.focus();
+    return;
+  }
+
+  // Left / Right have tree-specific semantics beyond roving focus:
+  //   forward  — expand collapsed parent, else move to first child
+  //   back     — collapse expanded parent, else move to parent item
+  const ltr = direction.value !== 'rtl';
+  const forwardKey = ltr ? 'ArrowRight' : 'ArrowLeft';
+  const backKey = ltr ? 'ArrowLeft' : 'ArrowRight';
+
+  if (event.key === forwardKey) {
+    event.preventDefault();
+    if (!item.hasChildren) return;
+    if (!isExpanded(item.key)) {
+      toggleExpanded(item.value);
+      return;
+    }
+    const next = enabled[idx + 1];
+    if (next && Number(next.getAttribute('aria-level')) === item.level + 1) next.focus();
+    return;
+  }
+
+  if (event.key === backKey) {
+    event.preventDefault();
+    if (item.hasChildren && isExpanded(item.key)) {
+      toggleExpanded(item.value);
+      return;
+    }
+    const parentLevel = item.level - 1;
+    for (let i = idx - 1; i >= 0; i--) {
+      const candidate = enabled[i]!;
+      if (Number(candidate.getAttribute('aria-level')) === parentLevel) {
+        candidate.focus();
+        return;
+      }
+    }
+  }
+}
+
+provideTreeContext({
+  flatItems,
+  expandedKeys: localExpanded,
+  selectedKeys: localSelected,
+  multiple: toRef(() => multiple),
+  disabled: toRef(() => disabled),
+  direction,
+  propagateSelect: toRef(() => propagateSelect),
+  isExpanded,
+  isSelected,
+  toggleExpanded,
+  select,
+  treeItemElements,
+  onItemKeyDown,
+});
+
+defineSlots<{
+  default?: (props: {
+    flatItems: Array<FlatItem<T>>;
+    selectedKeys: string[];
+    expandedKeys: string[];
+  }) => unknown;
+}>();
+</script>
+
+<template>
+  <CollectionSlot>
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      role="tree"
+      :aria-multiselectable="multiple ? true : undefined"
+      :aria-disabled="disabled || undefined"
+      :dir="direction"
+    >
+      <slot
+        :flat-items="flatItems"
+        :selected-keys="localSelected"
+        :expanded-keys="localExpanded"
+      />
+    </Primitive>
+  </CollectionSlot>
+</template>
diff --git a/vue/primitives/src/tree/__test__/Tree.test.ts b/vue/primitives/src/tree/__test__/Tree.test.ts
new file mode 100644
index 0000000..c647bfa
--- /dev/null
+++ b/vue/primitives/src/tree/__test__/Tree.test.ts
@@ -0,0 +1,262 @@
+import { TreeItem, TreeRoot } from '../index';
+import { defineComponent, h, nextTick } from 'vue';
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+interface Node {
+  id: string;
+  label: string;
+  children?: Node[];
+}
+
+const TREE: Node[] = [
+  {
+    id: 'a',
+    label: 'A',
+    children: [
+      { id: 'a-1', label: 'A.1' },
+      {
+        id: 'a-2',
+        label: 'A.2',
+        children: [
+          { id: 'a-2-1', label: 'A.2.1' },
+          { id: 'a-2-2', label: 'A.2.2' },
+        ],
+      },
+    ],
+  },
+  { id: 'b', label: 'B' },
+  {
+    id: 'c',
+    label: 'C',
+    children: [{ id: 'c-1', label: 'C.1' }],
+  },
+];
+
+function createTree(rootProps: Record<string, unknown> = {}, items: Node[] = TREE) {
+  return mount(
+    defineComponent({
+      setup() {
+        return () => h(
+          TreeRoot,
+          {
+            items,
+            getKey: (n: unknown) => (n as Node).id,
+            getChildren: (n: unknown) => (n as Node).children,
+            ...rootProps,
+          },
+          {
+            default: ({ flatItems }: { flatItems: Array<{ key: string; value: Node; level: number; hasChildren: boolean }> }) =>
+              flatItems.map(item =>
+                h(TreeItem, { key: item.key, item }, { default: () => item.value.label }),
+              ),
+          },
+        );
+      },
+    }),
+    { attachTo: document.body },
+  );
+}
+
+function press(el: Element, key: string) {
+  el.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
+}
+
+async function flush() {
+  await nextTick();
+  await nextTick();
+}
+
+describe('Tree', () => {
+  it('renders only top-level items when nothing is expanded', () => {
+    const w = createTree();
+    const items = w.findAll('[role="treeitem"]');
+    expect(items).toHaveLength(3);
+    expect(items.map(i => i.text())).toEqual(['A', 'B', 'C']);
+    w.unmount();
+  });
+
+  it('sets role="tree" on root', () => {
+    const w = createTree();
+    expect(w.find('[role="tree"]').exists()).toBe(true);
+    w.unmount();
+  });
+
+  it('wires aria-level and aria-expanded', () => {
+    const w = createTree({ defaultExpanded: ['a'] });
+    const items = w.findAll('[role="treeitem"]');
+    // A (has children, expanded), A.1 (leaf), A.2 (has children, closed), B, C
+    expect(items[0]!.attributes('aria-level')).toBe('1');
+    expect(items[0]!.attributes('aria-expanded')).toBe('true');
+    expect(items[0]!.attributes('data-state')).toBe('open');
+
+    expect(items[1]!.attributes('aria-level')).toBe('2');
+    expect(items[1]!.attributes('aria-expanded')).toBeUndefined();
+    expect(items[1]!.attributes('data-state')).toBeUndefined();
+
+    expect(items[2]!.attributes('aria-level')).toBe('2');
+    expect(items[2]!.attributes('aria-expanded')).toBe('false');
+    expect(items[2]!.attributes('data-state')).toBe('closed');
+    w.unmount();
+  });
+
+  it('click toggles expansion of a parent node', async () => {
+    const w = createTree();
+    const a = w.findAll('[role="treeitem"]')[0]!;
+    await a.trigger('click');
+    await flush();
+    // now A is expanded, A.1 + A.2 visible
+    const items = w.findAll('[role="treeitem"]');
+    expect(items).toHaveLength(5);
+    expect(items.map(i => i.text())).toEqual(['A', 'A.1', 'A.2', 'B', 'C']);
+    w.unmount();
+  });
+
+  it('click selects a node (single-select)', async () => {
+    const w = createTree();
+    const b = w.findAll('[role="treeitem"]')[1]!;
+    await b.trigger('click');
+    await flush();
+    expect(b.attributes('aria-selected')).toBe('true');
+    expect(b.attributes('data-selected')).toBe('');
+    w.unmount();
+  });
+
+  it('single-select: selecting another item replaces the previous selection', async () => {
+    const w = createTree({ defaultValue: 'b' });
+    const items = w.findAll('[role="treeitem"]');
+    expect(items[1]!.attributes('aria-selected')).toBe('true');
+
+    await items[0]!.trigger('click');
+    await flush();
+
+    const after = w.findAll('[role="treeitem"]');
+    expect(after[0]!.attributes('aria-selected')).toBe('true');
+    expect(after.find(i => i.text() === 'B')!.attributes('aria-selected')).toBe('false');
+    w.unmount();
+  });
+
+  it('multiple-select: selections accumulate', async () => {
+    const w = createTree({ multiple: true });
+    const items = w.findAll('[role="treeitem"]');
+    await items[0]!.trigger('click'); // A (also expands)
+    await flush();
+    await w.findAll('[role="treeitem"]').find(i => i.text() === 'B')!.trigger('click');
+    await flush();
+    const all = w.findAll('[role="treeitem"]');
+    const selected = all.filter(i => i.attributes('aria-selected') === 'true').map(i => i.text());
+    expect(selected).toContain('A');
+    expect(selected).toContain('B');
+    w.unmount();
+  });
+
+  it('ArrowDown / ArrowUp move focus through visible items', async () => {
+    const w = createTree({ defaultExpanded: ['a'] });
+    const items = w.findAll('[role="treeitem"]').map(i => i.element as HTMLElement);
+    items[0]!.focus();
+    expect(document.activeElement).toBe(items[0]);
+    press(items[0]!, 'ArrowDown');
+    expect(document.activeElement).toBe(items[1]); // A.1
+    press(items[1]!, 'ArrowDown');
+    expect(document.activeElement).toBe(items[2]); // A.2
+    press(items[2]!, 'ArrowUp');
+    expect(document.activeElement).toBe(items[1]);
+    w.unmount();
+  });
+
+  it('Home / End jump to first / last visible item', () => {
+    const w = createTree({ defaultExpanded: ['a'] });
+    const items = w.findAll('[role="treeitem"]').map(i => i.element as HTMLElement);
+    items[2]!.focus();
+    press(items[2]!, 'End');
+    expect(document.activeElement).toBe(items[items.length - 1]);
+    press(items[items.length - 1]!, 'Home');
+    expect(document.activeElement).toBe(items[0]);
+    w.unmount();
+  });
+
+  it('ArrowRight expands a collapsed parent; ArrowRight again moves to first child', async () => {
+    const w = createTree();
+    const items = w.findAll('[role="treeitem"]').map(i => i.element as HTMLElement);
+    items[0]!.focus();
+    press(items[0]!, 'ArrowRight');
+    await flush();
+    const next = w.findAll('[role="treeitem"]').map(i => i.element as HTMLElement);
+    expect(next[0]!.getAttribute('aria-expanded')).toBe('true');
+    press(next[0]!, 'ArrowRight');
+    expect(document.activeElement).toBe(next[1]); // A.1
+    w.unmount();
+  });
+
+  it('ArrowLeft collapses an expanded parent; ArrowLeft on a leaf jumps to its parent', async () => {
+    const w = createTree({ defaultExpanded: ['a'] });
+    const items = w.findAll('[role="treeitem"]').map(i => i.element as HTMLElement);
+    const a1 = items[1]!; // leaf
+    a1.focus();
+    press(a1, 'ArrowLeft');
+    expect(document.activeElement).toBe(items[0]); // back to A
+
+    // Now collapse A with another ArrowLeft
+    press(items[0]!, 'ArrowLeft');
+    await flush();
+    const updated = w.findAll('[role="treeitem"]');
+    expect(updated).toHaveLength(3);
+    w.unmount();
+  });
+
+  it('Enter / Space select the focused item', async () => {
+    const w = createTree();
+    const first = w.find('[role="treeitem"]').element as HTMLElement;
+    first.focus();
+    press(first, 'Enter');
+    await flush();
+    expect(first.getAttribute('aria-selected')).toBe('true');
+    w.unmount();
+  });
+
+  it('emits update:modelValue and update:expanded', async () => {
+    const onModel: string[][] = [];
+    const onExpanded: string[][] = [];
+    const w = createTree({
+      'onUpdate:modelValue': (v: string | string[] | undefined) => {
+        onModel.push(Array.isArray(v) ? v : v === undefined ? [] : [v]);
+      },
+      'onUpdate:expanded': (v: string[]) => {
+        onExpanded.push(v);
+      },
+    });
+    const first = w.find('[role="treeitem"]');
+    await first.trigger('click');
+    await flush();
+    expect(onModel[0]).toEqual(['a']);
+    expect(onExpanded[0]).toEqual(['a']);
+    w.unmount();
+  });
+
+  it('disabled tree ignores clicks and keyboard selection', async () => {
+    const onModel: unknown[] = [];
+    const w = createTree({ disabled: true, 'onUpdate:modelValue': (v: unknown) => onModel.push(v) });
+    const first = w.find('[role="treeitem"]');
+    await first.trigger('click');
+    await flush();
+    expect(first.attributes('aria-selected')).toBe('false');
+    expect(onModel).toHaveLength(0);
+    w.unmount();
+  });
+
+  it('propagateSelect cascades selection to all descendants', async () => {
+    const captured: string[][] = [];
+    const w = createTree({
+      multiple: true,
+      propagateSelect: true,
+      defaultExpanded: ['a', 'a-2'],
+      'onUpdate:modelValue': (v: string[]) => captured.push(v),
+    });
+    const a = w.findAll('[role="treeitem"]')[0]!; // A
+    await a.trigger('click');
+    await flush();
+    const emitted = captured.at(-1)!;
+    expect(emitted).toEqual(expect.arrayContaining(['a', 'a-1', 'a-2', 'a-2-1', 'a-2-2']));
+    w.unmount();
+  });
+});
diff --git a/vue/primitives/src/tree/context.ts b/vue/primitives/src/tree/context.ts
new file mode 100644
index 0000000..43b9552
--- /dev/null
+++ b/vue/primitives/src/tree/context.ts
@@ -0,0 +1,35 @@
+import type { ComputedRef, Ref } from 'vue';
+import type { FlatItem } from './utils';
+import { useContextFactory } from '@robonen/vue';
+
+export interface TreeContext<T = unknown> {
+  /** Reactive flattened visible items (only descendants of expanded nodes). */
+  flatItems: ComputedRef<Array<FlatItem<T>>>;
+  /** Current expanded keys. */
+  expandedKeys: Ref<string[]>;
+  /** Current selected keys. */
+  selectedKeys: Ref<string[]>;
+  /** Whether multiple selection is enabled. */
+  multiple: Ref<boolean>;
+  /** Whether the whole tree is disabled. */
+  disabled: Ref<boolean>;
+  /** Writing direction — affects Left/Right semantics. */
+  direction: Ref<'ltr' | 'rtl'>;
+  /** When `true`, selecting a parent cascades selection to all descendants. */
+  propagateSelect: Ref<boolean>;
+
+  isExpanded: (key: string) => boolean;
+  isSelected: (key: string) => boolean;
+  toggleExpanded: (value: T) => void;
+  select: (value: T) => void;
+
+  /** DOM-ordered list of rendered treeitem elements (from the internal Collection). */
+  treeItemElements: ComputedRef<HTMLElement[]>;
+  /** Keyboard handler wired from items to the root. */
+  onItemKeyDown: (event: KeyboardEvent, el: HTMLElement, item: FlatItem<T>) => void;
+}
+
+export const {
+  inject: useTreeContext,
+  provide: provideTreeContext,
+} = useContextFactory<TreeContext<any>>('TreeContext');
diff --git a/vue/primitives/src/tree/index.ts b/vue/primitives/src/tree/index.ts
new file mode 100644
index 0000000..5578b13
--- /dev/null
+++ b/vue/primitives/src/tree/index.ts
@@ -0,0 +1,10 @@
+export { default as TreeRoot } from './TreeRoot.vue';
+export { default as TreeItem } from './TreeItem.vue';
+
+export { useTreeContext, provideTreeContext } from './context';
+
+export type { TreeRootProps, TreeRootEmits } from './TreeRoot.vue';
+export type { TreeItemProps } from './TreeItem.vue';
+export type { TreeContext } from './context';
+export type { FlatItem } from './utils';
+export { flattenAll, flattenVisible } from './utils';
diff --git a/vue/primitives/src/tree/utils.ts b/vue/primitives/src/tree/utils.ts
new file mode 100644
index 0000000..ab6190c
--- /dev/null
+++ b/vue/primitives/src/tree/utils.ts
@@ -0,0 +1,87 @@
+/**
+ * Shared Tree helpers. Pure, no Vue imports.
+ */
+
+export interface FlatItem<T = unknown> {
+  /** Unique string key produced by `getKey(value)`. */
+  key: string;
+  /** Original item value. */
+  value: T;
+  /** 1-based depth — top-level is 1. */
+  level: number;
+  /** Whether the item has a non-empty children array. */
+  hasChildren: boolean;
+  /** Parent key, or `undefined` for root-level items. */
+  parentKey?: string;
+}
+
+/**
+ * Depth-first flattening of a tree into a visible list, honoring `expandedKeys`.
+ * Collapsed subtrees are skipped entirely. Iterative implementation to avoid
+ * deep recursion on large trees.
+ */
+export function flattenVisible<T>(
+  items: readonly T[],
+  getKey: (item: T) => string,
+  getChildren: (item: T) => readonly T[] | undefined | null,
+  expandedKeys: ReadonlySet<string>,
+): Array<FlatItem<T>> {
+  const out: Array<FlatItem<T>> = [];
+  // Stack holds frames to expand. Seed in reverse so first child pops first.
+  interface Frame { nodes: readonly T[]; index: number; level: number; parentKey?: string }
+  const stack: Frame[] = [{ nodes: items, index: 0, level: 1, parentKey: undefined }];
+
+  while (stack.length > 0) {
+    const frame = stack[stack.length - 1]!;
+    if (frame.index >= frame.nodes.length) {
+      stack.pop();
+      continue;
+    }
+    const node = frame.nodes[frame.index]!;
+    frame.index += 1;
+
+    const key = getKey(node);
+    const children = getChildren(node);
+    const hasChildren = Array.isArray(children) && children.length > 0;
+    out.push({
+      key,
+      value: node,
+      level: frame.level,
+      hasChildren,
+      parentKey: frame.parentKey,
+    });
+
+    if (hasChildren && expandedKeys.has(key)) {
+      stack.push({
+        nodes: children as readonly T[],
+        index: 0,
+        level: frame.level + 1,
+        parentKey: key,
+      });
+    }
+  }
+
+  return out;
+}
+
+/**
+ * Flattens all descendants (regardless of expansion) — used for cascade
+ * select/deselect operations.
+ */
+export function flattenAll<T>(
+  items: readonly T[],
+  getKey: (item: T) => string,
+  getChildren: (item: T) => readonly T[] | undefined | null,
+): Array<{ key: string; value: T }> {
+  const out: Array<{ key: string; value: T }> = [];
+  const stack: Array<readonly T[]> = [items];
+  while (stack.length > 0) {
+    const nodes = stack.pop()!;
+    for (const node of nodes) {
+      out.push({ key: getKey(node), value: node });
+      const children = getChildren(node);
+      if (Array.isArray(children) && children.length > 0) stack.push(children);
+    }
+  }
+  return out;
+}
diff --git a/vue/primitives/src/utils/__test__/getRawChildren.bench.ts b/vue/primitives/src/utils/__test__/getRawChildren.bench.ts
new file mode 100644
index 0000000..ca0d15c
--- /dev/null
+++ b/vue/primitives/src/utils/__test__/getRawChildren.bench.ts
@@ -0,0 +1,142 @@
+import { bench, describe } from 'vitest';
+import { Comment, Fragment, createVNode, h, render } from 'vue';
+import { PatchFlags } from '@vue/shared';
+import { getRawChildren } from '../getRawChildren';
+
+// -- Helpers --
+
+function keyedFragment(children: Array<ReturnType<typeof h>>) {
+  return createVNode(Fragment, null, children, PatchFlags.KEYED_FRAGMENT);
+}
+
+const flatChildren = [h('div'), h('span'), h('p')];
+
+const keyedChildren = Array.from({ length: 10 }, (_, i) =>
+  h('div', { key: i }, `child-${i}`),
+);
+
+// ---- Processing cost ----
+
+describe('getRawChildren', () => {
+  bench('flat elements', () => {
+    getRawChildren(flatChildren);
+  });
+
+  bench('mixed elements and comments', () => {
+    getRawChildren([
+      createVNode(Comment, null, 'c'),
+      h('div'),
+      createVNode(Comment, null, 'c'),
+      h('span'),
+      createVNode(Comment, null, 'c'),
+    ]);
+  });
+
+  bench('single fragment with children', () => {
+    getRawChildren([createVNode(Fragment, null, [h('a'), h('b'), h('c')])]);
+  });
+
+  bench('nested fragments (depth 5)', () => {
+    let current: ReturnType<typeof h> = h('div');
+    for (let i = 0; i < 5; i++) {
+      current = createVNode(Fragment, null, [current, h('span')]);
+    }
+    getRawChildren([current]);
+  });
+
+  bench('wide fragment (50 children)', () => {
+    const children = Array.from({ length: 50 }, (_, i) => h('div', `child-${i}`));
+    getRawChildren([createVNode(Fragment, null, children)]);
+  });
+});
+
+// ---- BAIL path cost ----
+
+describe('getRawChildren — BAIL path', () => {
+  bench('1 keyed fragment (no BAIL)', () => {
+    getRawChildren([keyedFragment([...keyedChildren])]);
+  });
+
+  bench('2 keyed fragments (BAIL triggered)', () => {
+    getRawChildren([
+      keyedFragment(keyedChildren.slice(0, 5)),
+      keyedFragment(keyedChildren.slice(5)),
+    ]);
+  });
+
+  bench('3 keyed fragments (BAIL triggered)', () => {
+    getRawChildren([
+      keyedFragment(keyedChildren.slice(0, 3)),
+      keyedFragment(keyedChildren.slice(3, 7)),
+      keyedFragment(keyedChildren.slice(7)),
+    ]);
+  });
+});
+
+// ---- Render impact: optimized patchFlags vs BAIL ----
+
+describe('patch — optimized vs BAIL patchFlag', () => {
+  bench('patch with TEXT patchFlag', () => {
+    const container = document.createElement('div');
+    const initial = h('div', null, [
+      createVNode('span', null, 'a', PatchFlags.TEXT),
+      createVNode('span', null, 'b', PatchFlags.TEXT),
+      createVNode('span', null, 'c', PatchFlags.TEXT),
+    ]);
+    const updated = h('div', null, [
+      createVNode('span', null, 'x', PatchFlags.TEXT),
+      createVNode('span', null, 'y', PatchFlags.TEXT),
+      createVNode('span', null, 'z', PatchFlags.TEXT),
+    ]);
+    render(initial, container);
+    render(updated, container);
+  });
+
+  bench('patch with BAIL patchFlag', () => {
+    const container = document.createElement('div');
+    const initial = h('div', null, [
+      createVNode('span', null, 'a', PatchFlags.BAIL),
+      createVNode('span', null, 'b', PatchFlags.BAIL),
+      createVNode('span', null, 'c', PatchFlags.BAIL),
+    ]);
+    const updated = h('div', null, [
+      createVNode('span', null, 'x', PatchFlags.BAIL),
+      createVNode('span', null, 'y', PatchFlags.BAIL),
+      createVNode('span', null, 'z', PatchFlags.BAIL),
+    ]);
+    render(initial, container);
+    render(updated, container);
+  });
+
+  bench('patch with CLASS patchFlag', () => {
+    const container = document.createElement('div');
+    const initial = h('div', null, [
+      createVNode('span', { class: 'a' }, null, PatchFlags.CLASS),
+      createVNode('span', { class: 'b' }, null, PatchFlags.CLASS),
+      createVNode('span', { class: 'c' }, null, PatchFlags.CLASS),
+    ]);
+    const updated = h('div', null, [
+      createVNode('span', { class: 'x' }, null, PatchFlags.CLASS),
+      createVNode('span', { class: 'y' }, null, PatchFlags.CLASS),
+      createVNode('span', { class: 'z' }, null, PatchFlags.CLASS),
+    ]);
+    render(initial, container);
+    render(updated, container);
+  });
+
+  bench('patch with CLASS→BAIL patchFlag', () => {
+    const container = document.createElement('div');
+    const initial = h('div', null, [
+      createVNode('span', { class: 'a' }, null, PatchFlags.BAIL),
+      createVNode('span', { class: 'b' }, null, PatchFlags.BAIL),
+      createVNode('span', { class: 'c' }, null, PatchFlags.BAIL),
+    ]);
+    const updated = h('div', null, [
+      createVNode('span', { class: 'x' }, null, PatchFlags.BAIL),
+      createVNode('span', { class: 'y' }, null, PatchFlags.BAIL),
+      createVNode('span', { class: 'z' }, null, PatchFlags.BAIL),
+    ]);
+    render(initial, container);
+    render(updated, container);
+  });
+});
diff --git a/vue/primitives/src/utils/__test__/getRawChildren.test.ts b/vue/primitives/src/utils/__test__/getRawChildren.test.ts
new file mode 100644
index 0000000..134c124
--- /dev/null
+++ b/vue/primitives/src/utils/__test__/getRawChildren.test.ts
@@ -0,0 +1,63 @@
+import { describe, expect, it } from 'vitest';
+import { Comment, Fragment, createVNode, h } from 'vue';
+import { getRawChildren } from '../getRawChildren';
+
+describe(getRawChildren, () => {
+  it('returns empty array for empty input', () => {
+    expect(getRawChildren([])).toEqual([]);
+  });
+
+  it('returns element vnodes as-is', () => {
+    const div = h('div');
+    const span = h('span');
+
+    const result = getRawChildren([div, span]);
+
+    expect(result).toHaveLength(2);
+    expect(result[0]!.type).toBe('div');
+    expect(result[1]!.type).toBe('span');
+  });
+
+  it('filters out Comment vnodes', () => {
+    const div = h('div');
+    const comment = createVNode(Comment, null, 'comment');
+
+    const result = getRawChildren([comment, div, comment]);
+
+    expect(result).toHaveLength(1);
+    expect(result[0]!.type).toBe('div');
+  });
+
+  it('flattens Fragment children', () => {
+    const fragment = createVNode(Fragment, null, [h('a'), h('b')]);
+
+    const result = getRawChildren([fragment]);
+
+    expect(result).toHaveLength(2);
+    expect(result[0]!.type).toBe('a');
+    expect(result[1]!.type).toBe('b');
+  });
+
+  it('recursively flattens nested Fragment children', () => {
+    const innerFragment = createVNode(Fragment, null, [h('span')]);
+    const outerFragment = createVNode(Fragment, null, [innerFragment, h('div')]);
+
+    const result = getRawChildren([outerFragment]);
+
+    expect(result).toHaveLength(2);
+    expect(result[0]!.type).toBe('span');
+    expect(result[1]!.type).toBe('div');
+  });
+
+  it('filters comments inside fragments', () => {
+    const fragment = createVNode(Fragment, null, [
+      createVNode(Comment, null, 'skip'),
+      h('p'),
+    ]);
+
+    const result = getRawChildren([fragment]);
+
+    expect(result).toHaveLength(1);
+    expect(result[0]!.type).toBe('p');
+  });
+});
diff --git a/vue/primitives/src/utils/getRawChildren.ts b/vue/primitives/src/utils/getRawChildren.ts
new file mode 100644
index 0000000..4c4fda3
--- /dev/null
+++ b/vue/primitives/src/utils/getRawChildren.ts
@@ -0,0 +1,42 @@
+import type { VNode } from 'vue';
+import { Comment, Fragment } from 'vue';
+import { PatchFlags } from '@vue/shared';
+
+/**
+ * Recursively extracts and flattens VNodes from potentially nested Fragments
+ * while filtering out Comment nodes.
+ *
+ * @param children - Array of VNodes to process
+ * @returns Flattened array of non-Comment VNodes
+ */
+export function getRawChildren(children: VNode[]): VNode[] {
+  const result: VNode[] = [];
+  flatten(children, result);
+  return result;
+}
+
+function flatten(children: VNode[], result: VNode[]): void {
+  let keyedFragmentCount = 0;
+  const startIdx = result.length;
+
+  for (let i = 0, len = children.length; i < len; i++) {
+    const child = children[i]!;
+
+    if (child.type === Fragment) {
+      if (child.patchFlag & PatchFlags.KEYED_FRAGMENT) {
+        keyedFragmentCount++;
+      }
+
+      flatten(child.children as VNode[], result);
+    }
+    else if (child.type !== Comment) {
+      result.push(child);
+    }
+  }
+
+  if (keyedFragmentCount > 1) {
+    for (let i = startIdx; i < result.length; i++) {
+      result[i]!.patchFlag = PatchFlags.BAIL;
+    }
+  }
+}
diff --git a/vue/primitives/src/utils/roving-focus.ts b/vue/primitives/src/utils/roving-focus.ts
new file mode 100644
index 0000000..bc827da
--- /dev/null
+++ b/vue/primitives/src/utils/roving-focus.ts
@@ -0,0 +1,58 @@
+/**
+ * Shared roving-focus helpers used by RadioGroup, Toolbar, ToggleGroup, etc.
+ * Items register themselves; Root owns the current "tabStop" index and responds
+ * to arrow/Home/End keys.
+ */
+
+export type RovingOrientation = 'horizontal' | 'vertical' | 'both';
+export type RovingDirection = 'ltr' | 'rtl';
+
+export interface RovingKeyOptions {
+  orientation?: RovingOrientation;
+  dir?: RovingDirection;
+  loop?: boolean;
+}
+
+/** Map a keyboard event to a direction delta (-1 / 0 / +1) or 'home'/'end'. */
+export function rovingKeyToAction(
+  event: KeyboardEvent,
+  { orientation = 'both', dir = 'ltr', loop = true }: RovingKeyOptions = {},
+): { delta: number; absolute?: 'home' | 'end' } | null {
+  const horizontal = orientation === 'horizontal' || orientation === 'both';
+  const vertical = orientation === 'vertical' || orientation === 'both';
+  switch (event.key) {
+    case 'ArrowRight':
+      if (!horizontal) return null;
+      return { delta: dir === 'rtl' ? -1 : 1 };
+    case 'ArrowLeft':
+      if (!horizontal) return null;
+      return { delta: dir === 'rtl' ? 1 : -1 };
+    case 'ArrowDown':
+      if (!vertical) return null;
+      return { delta: 1 };
+    case 'ArrowUp':
+      if (!vertical) return null;
+      return { delta: -1 };
+    case 'Home':
+      return { delta: 0, absolute: 'home' };
+    case 'End':
+      return { delta: 0, absolute: 'end' };
+    default:
+      return null;
+  }
+  // loop used by caller to decide clamp vs wrap.
+  void loop;
+}
+
+/** Resolve next index given current, delta and items count with optional loop. */
+export function resolveNextIndex(current: number, delta: number, count: number, loop: boolean): number {
+  if (count <= 0) return -1;
+  let next = current + delta;
+  if (loop) {
+    next = ((next % count) + count) % count;
+  }
+  else {
+    next = Math.max(0, Math.min(count - 1, next));
+  }
+  return next;
+}
diff --git a/vue/primitives/src/utils/useGraceArea.ts b/vue/primitives/src/utils/useGraceArea.ts
new file mode 100644
index 0000000..1d92f99
--- /dev/null
+++ b/vue/primitives/src/utils/useGraceArea.ts
@@ -0,0 +1,227 @@
+import { onScopeDispose, ref, watchEffect } from 'vue';
+import type { Ref } from 'vue';
+
+interface Point { x: number; y: number }
+type Polygon = Point[];
+type Side = 'top' | 'right' | 'bottom' | 'left';
+
+const POINTER_TRANSIT_TIMEOUT = 300;
+
+/**
+ * Tracks pointer transit between a trigger and a floating container using
+ * a convex-hull "safe area" polygon so the floating content doesn't close
+ * when the pointer briefly leaves the trigger en route to it.
+ *
+ * Reference behavior: a hull is computed from the exit point (padded outward
+ * from the side the pointer leaves) plus the four corners of the hover target.
+ * While the pointer remains inside that hull, it's considered "in transit".
+ */
+export function useGraceArea(
+  triggerElement: Ref<HTMLElement | undefined>,
+  containerElement: Ref<HTMLElement | undefined>,
+) {
+  const isPointerInTransit = ref(false);
+  const pointerGraceArea = ref<Polygon | null>(null);
+
+  let resetTimer = 0;
+  const exitListeners = new Set<() => void>();
+
+  function clearResetTimer() {
+    if (resetTimer) {
+      clearTimeout(resetTimer);
+      resetTimer = 0;
+    }
+  }
+
+  function scheduleTransitReset() {
+    clearResetTimer();
+    resetTimer = globalThis.setTimeout(() => {
+      isPointerInTransit.value = false;
+      resetTimer = 0;
+    }, POINTER_TRANSIT_TIMEOUT);
+  }
+
+  function handleRemoveGraceArea() {
+    pointerGraceArea.value = null;
+    isPointerInTransit.value = false;
+    clearResetTimer();
+  }
+
+  function handleCreateGraceArea(event: PointerEvent, hoverTarget: HTMLElement | undefined) {
+    if (!hoverTarget) return;
+    const currentTarget = event.currentTarget as HTMLElement;
+    const exitPoint = { x: event.clientX, y: event.clientY };
+    const exitSide = getExitSideFromRect(exitPoint, currentTarget.getBoundingClientRect());
+    const paddedExitPoints = getPaddedExitPoints(exitPoint, exitSide, 1);
+    const hoverTargetPoints = getPointsFromRect(hoverTarget.getBoundingClientRect());
+    pointerGraceArea.value = getHull([...paddedExitPoints, ...hoverTargetPoints]);
+    isPointerInTransit.value = true;
+    scheduleTransitReset();
+  }
+
+  watchEffect((cleanup) => {
+    const trigger = triggerElement.value;
+    const container = containerElement.value;
+    if (!trigger || !container) return;
+
+    const onTriggerLeave = (event: PointerEvent) => handleCreateGraceArea(event, containerElement.value);
+    const onContentLeave = (event: PointerEvent) => handleCreateGraceArea(event, triggerElement.value);
+
+    trigger.addEventListener('pointerleave', onTriggerLeave);
+    container.addEventListener('pointerleave', onContentLeave);
+
+    cleanup(() => {
+      trigger.removeEventListener('pointerleave', onTriggerLeave);
+      container.removeEventListener('pointerleave', onContentLeave);
+    });
+  });
+
+  watchEffect((cleanup) => {
+    if (!pointerGraceArea.value) return;
+    const doc = triggerElement.value?.ownerDocument;
+    if (!doc) return;
+
+    const onMove = (event: PointerEvent) => {
+      if (!pointerGraceArea.value || !(event.target instanceof Element)) return;
+      const target = event.target;
+      const point = { x: event.clientX, y: event.clientY };
+      const hasEnteredTarget
+        = triggerElement.value?.contains(target) || containerElement.value?.contains(target);
+      const outside = !isPointInPolygon(point, pointerGraceArea.value);
+      const isAnotherGraceTrigger = !!target.closest('[data-grace-area-trigger]');
+
+      if (hasEnteredTarget) {
+        handleRemoveGraceArea();
+      }
+      else if (outside || isAnotherGraceTrigger) {
+        handleRemoveGraceArea();
+        for (const fn of exitListeners) fn();
+      }
+    };
+
+    doc.addEventListener('pointermove', onMove);
+    cleanup(() => doc.removeEventListener('pointermove', onMove));
+  });
+
+  onScopeDispose(() => {
+    clearResetTimer();
+    isPointerInTransit.value = false;
+    exitListeners.clear();
+  });
+
+  return {
+    isPointerInTransit,
+    onPointerExit(fn: () => void) {
+      exitListeners.add(fn);
+      return () => exitListeners.delete(fn);
+    },
+  };
+}
+
+function getExitSideFromRect(point: Point, rect: DOMRect): Side {
+  const top = Math.abs(rect.top - point.y);
+  const bottom = Math.abs(rect.bottom - point.y);
+  const right = Math.abs(rect.right - point.x);
+  const left = Math.abs(rect.left - point.x);
+  const min = Math.min(top, bottom, right, left);
+  if (min === left) return 'left';
+  if (min === right) return 'right';
+  if (min === top) return 'top';
+  return 'bottom';
+}
+
+function getPaddedExitPoints(exitPoint: Point, exitSide: Side, padding = 5): Point[] {
+  switch (exitSide) {
+    case 'top':
+      return [
+        { x: exitPoint.x - padding, y: exitPoint.y + padding },
+        { x: exitPoint.x + padding, y: exitPoint.y + padding },
+      ];
+    case 'bottom':
+      return [
+        { x: exitPoint.x - padding, y: exitPoint.y - padding },
+        { x: exitPoint.x + padding, y: exitPoint.y - padding },
+      ];
+    case 'left':
+      return [
+        { x: exitPoint.x + padding, y: exitPoint.y - padding },
+        { x: exitPoint.x + padding, y: exitPoint.y + padding },
+      ];
+    case 'right':
+      return [
+        { x: exitPoint.x - padding, y: exitPoint.y - padding },
+        { x: exitPoint.x - padding, y: exitPoint.y + padding },
+      ];
+  }
+}
+
+function getPointsFromRect(rect: DOMRect): Point[] {
+  const { top, right, bottom, left } = rect;
+  return [
+    { x: left, y: top },
+    { x: right, y: top },
+    { x: right, y: bottom },
+    { x: left, y: bottom },
+  ];
+}
+
+function isPointInPolygon(point: Point, polygon: Polygon): boolean {
+  const { x, y } = point;
+  let inside = false;
+  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+    const xi = polygon[i]!.x;
+    const yi = polygon[i]!.y;
+    const xj = polygon[j]!.x;
+    const yj = polygon[j]!.y;
+    const intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
+    if (intersect) inside = !inside;
+  }
+  return inside;
+}
+
+function getHull<P extends Point>(points: readonly P[]): P[] {
+  const sorted = points.slice().sort((a, b) => {
+    if (a.x !== b.x) return a.x - b.x;
+    return a.y - b.y;
+  });
+  return getHullPresorted(sorted);
+}
+
+function getHullPresorted<P extends Point>(points: readonly P[]): P[] {
+  if (points.length <= 1) return points.slice();
+
+  const upper: P[] = [];
+  for (const p of points) {
+    while (upper.length >= 2) {
+      const q = upper[upper.length - 1]!;
+      const r = upper[upper.length - 2]!;
+      if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) upper.pop();
+      else break;
+    }
+    upper.push(p);
+  }
+  upper.pop();
+
+  const lower: P[] = [];
+  for (let i = points.length - 1; i >= 0; i--) {
+    const p = points[i]!;
+    while (lower.length >= 2) {
+      const q = lower[lower.length - 1]!;
+      const r = lower[lower.length - 2]!;
+      if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) lower.pop();
+      else break;
+    }
+    lower.push(p);
+  }
+  lower.pop();
+
+  if (
+    upper.length === 1
+    && lower.length === 1
+    && upper[0]!.x === lower[0]!.x
+    && upper[0]!.y === lower[0]!.y
+  ) {
+    return upper;
+  }
+  return upper.concat(lower);
+}
diff --git a/vue/primitives/src/utils/useHideOthers.ts b/vue/primitives/src/utils/useHideOthers.ts
new file mode 100644
index 0000000..d8e25d1
--- /dev/null
+++ b/vue/primitives/src/utils/useHideOthers.ts
@@ -0,0 +1,59 @@
+import type { MaybeComputedElementRef } from '@robonen/vue';
+import { defaultWindow, tryOnScopeDispose, unrefElement } from '@robonen/vue';
+import { hideOthers } from '@robonen/platform/browsers';
+import { watch } from 'vue';
+
+type Undo = () => void;
+
+const CLOSED_POPOVER_SELECTOR = '[popover]:not(:popover-open)';
+
+/**
+ * Isolated so the try/catch doesn't inhibit Turbofan optimization of the
+ * watcher callback. `:popover-open` throws in browsers that don't support it
+ * (e.g. Safari 18).
+ */
+function isInClosedPopover(el: Element): boolean {
+  try {
+    return el.closest(CLOSED_POPOVER_SELECTOR) !== null;
+  }
+  catch {
+    return false;
+  }
+}
+
+/**
+ * @name useHideOthers
+ * @category Browser
+ * @description Hides every sibling element of `target` from assistive technologies
+ * by setting `aria-hidden="true"`. Automatically restores the original state when
+ * the target is removed or the component scope is disposed. Skips elements living
+ * inside a closed native `[popover]` to avoid double-hiding.
+ *
+ * @param {MaybeComputedElementRef} target Element whose siblings should be aria-hidden
+ *
+ * @since 0.0.14
+ */
+export function useHideOthers(target: MaybeComputedElementRef): void {
+  if (!defaultWindow) return;
+
+  let undo: Undo | undefined;
+
+  watch(() => unrefElement(target), (raw) => {
+    if (undo) {
+      undo();
+      undo = undefined;
+    }
+
+    const el = raw as HTMLElement | undefined;
+    if (!el || isInClosedPopover(el)) return;
+
+    undo = hideOthers(el);
+  }, { flush: 'post' });
+
+  tryOnScopeDispose(() => {
+    if (undo) {
+      undo();
+      undo = undefined;
+    }
+  });
+}
diff --git a/vue/primitives/src/visually-hidden/VisuallyHidden.vue b/vue/primitives/src/visually-hidden/VisuallyHidden.vue
new file mode 100644
index 0000000..80357bd
--- /dev/null
+++ b/vue/primitives/src/visually-hidden/VisuallyHidden.vue
@@ -0,0 +1,50 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface VisuallyHiddenProps extends PrimitiveProps {
+  /**
+   * Exclude the element from the accessibility tree entirely.
+   * Useful when the content is purely decorative and must not be announced.
+   * @default false
+   */
+  feature?: 'focusable' | 'hidden';
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'span', feature = 'focusable' } = defineProps<VisuallyHiddenProps>();
+
+const { forwardRef } = useForwardExpose();
+
+const style = {
+  position: 'absolute',
+  top: '-1px',
+  left: '-1px',
+  width: '1px',
+  height: '1px',
+  padding: '0',
+  margin: '-1px',
+  overflow: 'hidden',
+  clip: 'rect(0, 0, 0, 0)',
+  clipPath: 'inset(50%)',
+  whiteSpace: 'nowrap',
+  wordWrap: 'normal',
+  border: '0',
+} as const;
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :style="style"
+    :tabindex="feature === 'hidden' ? -1 : undefined"
+    :aria-hidden="feature === 'hidden' ? true : undefined"
+    :data-visually-hidden="feature"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/visually-hidden/__test__/VisuallyHidden.test.ts b/vue/primitives/src/visually-hidden/__test__/VisuallyHidden.test.ts
new file mode 100644
index 0000000..21878e6
--- /dev/null
+++ b/vue/primitives/src/visually-hidden/__test__/VisuallyHidden.test.ts
@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+import VisuallyHidden from '../VisuallyHidden.vue';
+
+describe('VisuallyHidden', () => {
+  it('renders a span with sr-only style by default', () => {
+    const w = mount(VisuallyHidden, { slots: { default: 'Screen reader only' } });
+
+    const el = w.element as HTMLElement;
+    expect(el.tagName).toBe('SPAN');
+    expect(el.style.position).toBe('absolute');
+    expect(el.style.width).toBe('1px');
+    expect(el.style.height).toBe('1px');
+    expect(el.style.overflow).toBe('hidden');
+    expect(w.text()).toBe('Screen reader only');
+  });
+
+  it('does not set aria-hidden by default (content is announced)', () => {
+    const w = mount(VisuallyHidden, { slots: { default: 'x' } });
+    expect(w.element.getAttribute('aria-hidden')).toBeNull();
+  });
+
+  it('sets aria-hidden when feature="hidden"', () => {
+    const w = mount(VisuallyHidden, {
+      props: { feature: 'hidden' },
+      slots: { default: 'x' },
+    });
+
+    expect(w.element.getAttribute('aria-hidden')).toBe('true');
+  });
+
+  it('exposes a data attribute describing the feature', () => {
+    const w = mount(VisuallyHidden, { slots: { default: 'x' } });
+    expect(w.element.getAttribute('data-visually-hidden')).toBe('focusable');
+  });
+});
diff --git a/vue/primitives/src/visually-hidden/index.ts b/vue/primitives/src/visually-hidden/index.ts
new file mode 100644
index 0000000..c9a2ee5
--- /dev/null
+++ b/vue/primitives/src/visually-hidden/index.ts
@@ -0,0 +1,2 @@
+export { default as VisuallyHidden } from './VisuallyHidden.vue';
+export type { VisuallyHiddenProps } from './VisuallyHidden.vue';
diff --git a/vue/primitives/tsconfig.json b/vue/primitives/tsconfig.json
new file mode 100644
index 0000000..2781e66
--- /dev/null
+++ b/vue/primitives/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.src.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/vue/primitives/tsconfig.node.json b/vue/primitives/tsconfig.node.json
new file mode 100644
index 0000000..edc474f
--- /dev/null
+++ b/vue/primitives/tsconfig.node.json
@@ -0,0 +1,8 @@
+{
+  "extends": "@robonen/tsconfig/tsconfig.node.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo"
+  },
+  "include": ["*.config.ts"]
+}
diff --git a/vue/primitives/tsconfig.src.json b/vue/primitives/tsconfig.src.json
new file mode 100644
index 0000000..522e7c7
--- /dev/null
+++ b/vue/primitives/tsconfig.src.json
@@ -0,0 +1,12 @@
+{
+  "extends": "@robonen/tsconfig/tsconfig.vue.json",
+  "compilerOptions": {
+    "composite": true,
+    "types": [],
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.src.tsbuildinfo"
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue"]
+}
diff --git a/vue/primitives/tsdown.config.ts b/vue/primitives/tsdown.config.ts
new file mode 100644
index 0000000..c315bda
--- /dev/null
+++ b/vue/primitives/tsdown.config.ts
@@ -0,0 +1,29 @@
+import { defineConfig } from 'tsdown';
+import { sharedConfig } from '@robonen/tsdown';
+import Vue from 'unplugin-vue/rolldown';
+
+export default defineConfig({
+  ...sharedConfig,
+  tsconfig: './tsconfig.src.json',
+  entry: ['src/index.ts', 'src/*/index.ts'],
+  plugins: [Vue({ isProduction: true })],
+  dts: { vue: true },
+  deps: {
+    neverBundle: ['vue'],
+    alwaysBundle: [/^@robonen\//, '@vue/shared'],
+  },
+  inputOptions: {
+    resolve: {
+      alias: {
+        '@vue/shared': '@vue/shared/dist/shared.esm-bundler.js',
+      },
+    },
+  },
+  outputOptions: {
+    ...sharedConfig.outputOptions,
+    chunkFileNames: 'shared/[name]-[hash].js',
+  },
+  define: {
+    __DEV__: 'false',
+  },
+});
diff --git a/vue/primitives/vitest.config.ts b/vue/primitives/vitest.config.ts
new file mode 100644
index 0000000..56f5779
--- /dev/null
+++ b/vue/primitives/vitest.config.ts
@@ -0,0 +1,24 @@
+import { resolve } from 'node:path';
+import { playwright } from '@vitest/browser-playwright';
+import Vue from 'unplugin-vue/vite';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  plugins: [Vue()],
+  define: {
+    __DEV__: 'true',
+  },
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+    },
+  },
+  test: {
+    browser: {
+      enabled: true,
+      provider: playwright(),
+      headless: true,
+      instances: [{ browser: 'chromium' }],
+    },
+  },
+});
diff --git a/vue/stories/.gitignore b/vue/stories/.gitignore
new file mode 100644
index 0000000..4fee689
--- /dev/null
+++ b/vue/stories/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+storybook-static
+*.log
diff --git a/vue/stories/.storybook/main.ts b/vue/stories/.storybook/main.ts
new file mode 100644
index 0000000..438a142
--- /dev/null
+++ b/vue/stories/.storybook/main.ts
@@ -0,0 +1,21 @@
+import type { StorybookConfig } from '@storybook/vue3-vite';
+
+const config: StorybookConfig = {
+  stories: ['../stories/**/*.stories.ts'],
+  addons: [
+    '@storybook/addon-docs',
+    '@storybook/addon-a11y',
+  ],
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {},
+  },
+  docs: {
+    defaultName: 'Docs',
+  },
+  typescript: {
+    check: false,
+  },
+};
+
+export default config;
diff --git a/vue/stories/.storybook/preview-styles.css b/vue/stories/.storybook/preview-styles.css
new file mode 100644
index 0000000..84c5a98
--- /dev/null
+++ b/vue/stories/.storybook/preview-styles.css
@@ -0,0 +1,110 @@
+.sb-dialog-trigger,
+.sb-dialog-close,
+.sb-toggle {
+  font: inherit;
+  padding: 0.5rem 1rem;
+  border-radius: 6px;
+  border: 1px solid #888;
+  background: #fff;
+  cursor: pointer;
+}
+
+.sb-toggle[aria-pressed='true'] { background: #222; color: #fff; }
+.sb-toggle[data-disabled] { opacity: 0.5; cursor: not-allowed; }
+
+.sb-dialog-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); }
+
+.sb-dialog-content {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: #fff;
+  padding: 1.5rem;
+  border-radius: 8px;
+  min-width: 320px;
+  max-width: 90vw;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+  display: grid;
+  gap: 0.75rem;
+}
+
+.sb-dialog-title { margin: 0; font-size: 1.125rem; font-weight: 600; }
+.sb-dialog-desc { margin: 0; color: #555; }
+
+.sb-switch {
+  position: relative;
+  width: 44px;
+  height: 24px;
+  padding: 0;
+  border-radius: 999px;
+  border: 1px solid #888;
+  background: #ddd;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.sb-switch[aria-checked='true'] { background: #10b981; border-color: #10b981; }
+.sb-switch-thumb {
+  display: block;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  transform: translateX(2px);
+  transition: transform 0.15s;
+}
+.sb-switch[aria-checked='true'] .sb-switch-thumb { transform: translateX(22px); }
+
+.sb-progress {
+  position: relative;
+  width: 240px;
+  height: 8px;
+  background: #eee;
+  border-radius: 999px;
+  overflow: hidden;
+}
+.sb-progress-ind { height: 100%; background: #3b82f6; transition: width 0.2s; }
+.sb-progress[data-state='indeterminate'] .sb-progress-ind {
+  animation: sb-progress-indeterminate 1.2s ease-in-out infinite;
+  background: linear-gradient(90deg, transparent, #3b82f6, transparent);
+}
+@keyframes sb-progress-indeterminate {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(100%); }
+}
+
+.sb-collapsible { font-family: system-ui; max-width: 320px; }
+.sb-collapsible-trigger {
+  font: inherit;
+  padding: 0.5rem 0.75rem;
+  border-radius: 6px;
+  border: 1px solid #888;
+  background: #fff;
+  cursor: pointer;
+  width: 100%;
+  text-align: left;
+}
+.sb-collapsible-content {
+  padding: 0.5rem 0.75rem;
+  border: 1px dashed #bbb;
+  border-top: none;
+  border-radius: 0 0 6px 6px;
+}
+
+.sb-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  overflow: hidden;
+  background: #e5e7eb;
+  font-family: system-ui;
+  font-weight: 600;
+  color: #374151;
+  vertical-align: middle;
+}
+.sb-avatar-img { width: 100%; height: 100%; object-fit: cover; }
+.sb-avatar-fallback { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
diff --git a/vue/stories/.storybook/preview.ts b/vue/stories/.storybook/preview.ts
new file mode 100644
index 0000000..97a79cd
--- /dev/null
+++ b/vue/stories/.storybook/preview.ts
@@ -0,0 +1,19 @@
+import type { Preview } from '@storybook/vue3-vite';
+import './preview-styles.css';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    a11y: {
+      test: 'todo',
+    },
+  },
+  tags: ['autodocs'],
+};
+
+export default preview;
diff --git a/vue/stories/eslint.config.ts b/vue/stories/eslint.config.ts
new file mode 100644
index 0000000..940a7b6
--- /dev/null
+++ b/vue/stories/eslint.config.ts
@@ -0,0 +1,9 @@
+import { base, compose, imports, stylistic, typescript } from '@robonen/eslint';
+
+export default compose(base, typescript, imports, stylistic, {
+  name: 'stories/overrides',
+  files: ['**/*.vue', '**/*.stories.ts'],
+  rules: {
+    '@stylistic/no-multiple-empty-lines': 'off',
+  },
+});
diff --git a/vue/stories/package.json b/vue/stories/package.json
new file mode 100644
index 0000000..f13db68
--- /dev/null
+++ b/vue/stories/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "@robonen/stories",
+  "version": "0.0.1",
+  "private": true,
+  "license": "Apache-2.0",
+  "description": "Storybook for @robonen/primitives",
+  "type": "module",
+  "scripts": {
+    "lint:check": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "dev": "storybook dev -p 6006 --no-open",
+    "build": "storybook build -o storybook-static"
+  },
+  "dependencies": {
+    "@robonen/primitives": "workspace:*",
+    "@robonen/vue": "workspace:*",
+    "vue": "catalog:"
+  },
+  "devDependencies": {
+    "@robonen/eslint": "workspace:*",
+    "@robonen/tsconfig": "workspace:*",
+    "@storybook/addon-a11y": "^10.4.2",
+    "@storybook/addon-docs": "^10.4.2",
+    "@storybook/vue3-vite": "^10.4.2",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "eslint": "catalog:",
+    "storybook": "^10.4.2",
+    "vite": "^8.0.16"
+  }
+}
diff --git a/vue/stories/stories/AspectRatio.stories.ts b/vue/stories/stories/AspectRatio.stories.ts
new file mode 100644
index 0000000..27bf9d7
--- /dev/null
+++ b/vue/stories/stories/AspectRatio.stories.ts
@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { AspectRatio } from '@robonen/primitives';
+
+const meta = {
+  title: 'Layout/AspectRatio',
+  component: AspectRatio,
+  tags: ['autodocs'],
+  argTypes: {
+    ratio: { control: { type: 'number', min: 0.1, step: 0.1 } },
+  },
+  args: { ratio: 16 / 9 },
+} satisfies Meta<typeof AspectRatio>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Widescreen: Story = {
+  render: args => ({
+    components: { AspectRatio },
+    setup: () => ({ args }),
+    template: `
+      <div style="width: 400px; border-radius: 8px; overflow: hidden">
+        <AspectRatio v-bind="args">
+          <img
+            src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=800"
+            alt="landscape"
+            style="width:100%;height:100%;object-fit:cover"
+          />
+        </AspectRatio>
+      </div>
+    `,
+  }),
+};
+
+export const Square: Story = {
+  args: { ratio: 1 },
+  render: args => ({
+    components: { AspectRatio },
+    setup: () => ({ args }),
+    template: `
+      <div style="width: 200px; background: #eee; border-radius: 8px; overflow: hidden">
+        <AspectRatio v-bind="args">
+          <div style="display:flex;align-items:center;justify-content:center;height:100%;font-family:system-ui">1 : 1</div>
+        </AspectRatio>
+      </div>
+    `,
+  }),
+};
diff --git a/vue/stories/stories/Avatar.stories.ts b/vue/stories/stories/Avatar.stories.ts
new file mode 100644
index 0000000..8d40e49
--- /dev/null
+++ b/vue/stories/stories/Avatar.stories.ts
@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { AvatarFallback, AvatarImage, AvatarRoot } from '@robonen/primitives';
+
+const meta = {
+  title: 'Media/Avatar',
+  component: AvatarRoot,
+  tags: ['autodocs'],
+} satisfies Meta<typeof AvatarRoot>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Loaded: Story = {
+  render: () => ({
+    components: { AvatarRoot, AvatarImage, AvatarFallback },
+    template: `
+      <AvatarRoot class="sb-avatar">
+        <AvatarImage src="https://i.pravatar.cc/96?img=5" alt="User" class="sb-avatar-img" />
+        <AvatarFallback class="sb-avatar-fallback" :delayMs="300">CT</AvatarFallback>
+      </AvatarRoot>
+    `,
+  }),
+};
+
+export const Fallback: Story = {
+  render: () => ({
+    components: { AvatarRoot, AvatarImage, AvatarFallback },
+    template: `
+      <AvatarRoot class="sb-avatar">
+        <AvatarImage src="https://invalid.example.com/missing.png" alt="User" class="sb-avatar-img" />
+        <AvatarFallback class="sb-avatar-fallback">AB</AvatarFallback>
+      </AvatarRoot>
+    `,
+  }),
+};
diff --git a/vue/stories/stories/Collapsible.stories.ts b/vue/stories/stories/Collapsible.stories.ts
new file mode 100644
index 0000000..1e67913
--- /dev/null
+++ b/vue/stories/stories/Collapsible.stories.ts
@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from '@robonen/primitives';
+
+const meta = {
+  title: 'Disclosure/Collapsible',
+  component: CollapsibleRoot,
+  tags: ['autodocs'],
+  args: { defaultOpen: false, disabled: false },
+} satisfies Meta<typeof CollapsibleRoot>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: args => ({
+    components: { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent },
+    setup: () => ({ args }),
+    template: `
+      <CollapsibleRoot v-bind="args" class="sb-collapsible">
+        <CollapsibleTrigger class="sb-collapsible-trigger">
+          <template #default="{ open }">{{ open ? 'Hide' : 'Show' }} details</template>
+        </CollapsibleTrigger>
+        <CollapsibleContent class="sb-collapsible-content">
+          <p style="margin:0.5rem 0 0">Hidden content revealed when the trigger is activated.</p>
+        </CollapsibleContent>
+      </CollapsibleRoot>
+    `,
+  }),
+};
+
+export const OpenByDefault: Story = { args: { defaultOpen: true }, render: Default.render };
+export const Disabled: Story = { args: { disabled: true }, render: Default.render };
diff --git a/vue/stories/stories/Dialog.stories.ts b/vue/stories/stories/Dialog.stories.ts
new file mode 100644
index 0000000..02c86fd
--- /dev/null
+++ b/vue/stories/stories/Dialog.stories.ts
@@ -0,0 +1,94 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import {
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogOverlay,
+  DialogPortal,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from '@robonen/primitives';
+
+const meta = {
+  title: 'Overlays/Dialog',
+  component: DialogRoot,
+  tags: ['autodocs'],
+  argTypes: {
+    modal: { control: 'boolean' },
+    defaultOpen: { control: 'boolean' },
+  },
+  args: {
+    modal: true,
+    defaultOpen: false,
+  },
+} satisfies Meta<typeof DialogRoot>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const render = (args: Record<string, unknown>) => ({
+  components: {
+    DialogRoot,
+    DialogTrigger,
+    DialogPortal,
+    DialogOverlay,
+    DialogContent,
+    DialogTitle,
+    DialogDescription,
+    DialogClose,
+  },
+  setup: () => ({ args }),
+  template: `
+    <DialogRoot v-bind="args">
+      <DialogTrigger class="sb-dialog-trigger">Open Dialog</DialogTrigger>
+      <DialogPortal>
+        <DialogOverlay class="sb-dialog-overlay" />
+        <DialogContent class="sb-dialog-content">
+          <DialogTitle class="sb-dialog-title">Dialog Title</DialogTitle>
+          <DialogDescription class="sb-dialog-desc">
+            Traps focus, locks scroll, and dismisses on Escape or outside click.
+          </DialogDescription>
+          <DialogClose class="sb-dialog-close">Close</DialogClose>
+        </DialogContent>
+      </DialogPortal>
+    </DialogRoot>
+  `,
+});
+
+export const Default: Story = { render };
+
+export const OpenByDefault: Story = {
+  args: { defaultOpen: true },
+  render,
+};
+
+export const NonModal: Story = {
+  args: { modal: false },
+  render: args => ({
+    components: {
+      DialogRoot,
+      DialogTrigger,
+      DialogPortal,
+      DialogContent,
+      DialogTitle,
+      DialogDescription,
+      DialogClose,
+    },
+    setup: () => ({ args }),
+    template: `
+      <DialogRoot v-bind="args">
+        <DialogTrigger class="sb-dialog-trigger">Open non-modal</DialogTrigger>
+        <DialogPortal>
+          <DialogContent class="sb-dialog-content">
+            <DialogTitle class="sb-dialog-title">Non-modal dialog</DialogTitle>
+            <DialogDescription class="sb-dialog-desc">
+              No overlay, no scroll lock, no focus trap.
+            </DialogDescription>
+            <DialogClose class="sb-dialog-close">Close</DialogClose>
+          </DialogContent>
+        </DialogPortal>
+      </DialogRoot>
+    `,
+  }),
+};
diff --git a/vue/stories/stories/Label.stories.ts b/vue/stories/stories/Label.stories.ts
new file mode 100644
index 0000000..412191e
--- /dev/null
+++ b/vue/stories/stories/Label.stories.ts
@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { Label } from '@robonen/primitives';
+
+const meta = {
+  title: 'Forms/Label',
+  component: Label,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Label>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => ({
+    components: { Label },
+    template: `
+      <div style="font-family: system-ui; display: grid; gap: 0.25rem; max-width: 300px">
+        <Label for="email">Email address</Label>
+        <input id="email" type="email" placeholder="you@example.com" style="padding:0.5rem;border:1px solid #888;border-radius:4px" />
+      </div>
+    `,
+  }),
+};
+
+export const WithCheckbox: Story = {
+  render: () => ({
+    components: { Label },
+    template: `
+      <div style="font-family: system-ui">
+        <Label style="display:flex;align-items:center;gap:0.5rem;cursor:pointer">
+          <input type="checkbox" />
+          Subscribe to the newsletter
+        </Label>
+      </div>
+    `,
+  }),
+};
diff --git a/vue/stories/stories/Progress.stories.ts b/vue/stories/stories/Progress.stories.ts
new file mode 100644
index 0000000..fa501a6
--- /dev/null
+++ b/vue/stories/stories/Progress.stories.ts
@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { ProgressIndicator, ProgressRoot } from '@robonen/primitives';
+
+const meta = {
+  title: 'Feedback/Progress',
+  component: ProgressRoot,
+  tags: ['autodocs'],
+  argTypes: {
+    modelValue: { control: { type: 'number', min: 0, max: 100, step: 1 } },
+    max: { control: { type: 'number', min: 1 } },
+  },
+  args: { modelValue: 40, max: 100 },
+} satisfies Meta<typeof ProgressRoot>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Determinate: Story = {
+  render: args => ({
+    components: { ProgressRoot, ProgressIndicator },
+    setup: () => ({ args }),
+    template: `
+      <ProgressRoot v-bind="args" class="sb-progress">
+        <template #default="{ value, max }">
+          <ProgressIndicator
+            class="sb-progress-ind"
+            :style="{ width: value == null ? '100%' : (value / max * 100) + '%' }"
+          />
+        </template>
+      </ProgressRoot>
+    `,
+  }),
+};
+
+export const Indeterminate: Story = {
+  args: { modelValue: null },
+  render: Determinate.render,
+};
+
+export const Complete: Story = {
+  args: { modelValue: 100 },
+  render: Determinate.render,
+};
diff --git a/vue/stories/stories/Separator.stories.ts b/vue/stories/stories/Separator.stories.ts
new file mode 100644
index 0000000..a1c4c22
--- /dev/null
+++ b/vue/stories/stories/Separator.stories.ts
@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { Separator } from '@robonen/primitives';
+
+const meta = {
+  title: 'Layout/Separator',
+  component: Separator,
+  tags: ['autodocs'],
+  argTypes: {
+    orientation: { control: 'radio', options: ['horizontal', 'vertical'] },
+    decorative: { control: 'boolean' },
+  },
+  args: { orientation: 'horizontal', decorative: false },
+} satisfies Meta<typeof Separator>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const baseStyle = `
+  background: #888;
+  display: block;
+`;
+const horizontal = `${baseStyle} height: 1px; width: 100%;`;
+const vertical = `${baseStyle} height: 24px; width: 1px; display: inline-block; margin: 0 0.75rem;`;
+
+export const Horizontal: Story = {
+  render: args => ({
+    components: { Separator },
+    setup: () => ({ args, horizontal }),
+    template: `
+      <div style="max-width: 320px; font-family: system-ui">
+        <p style="margin:0 0 0.5rem">Section one</p>
+        <Separator v-bind="args" :style="horizontal" />
+        <p style="margin:0.5rem 0 0">Section two</p>
+      </div>
+    `,
+  }),
+};
+
+export const Vertical: Story = {
+  args: { orientation: 'vertical' },
+  render: args => ({
+    components: { Separator },
+    setup: () => ({ args, vertical }),
+    template: `
+      <nav style="font-family: system-ui">
+        <a href="#">Home</a>
+        <Separator v-bind="args" :style="vertical" />
+        <a href="#">About</a>
+        <Separator v-bind="args" :style="vertical" />
+        <a href="#">Contact</a>
+      </nav>
+    `,
+  }),
+};
diff --git a/vue/stories/stories/Switch.stories.ts b/vue/stories/stories/Switch.stories.ts
new file mode 100644
index 0000000..0cba12b
--- /dev/null
+++ b/vue/stories/stories/Switch.stories.ts
@@ -0,0 +1,94 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { Label, Switch } from '@robonen/primitives';
+import { ref } from 'vue';
+
+const meta = {
+  title: 'Forms/Switch',
+  component: Switch,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Switch>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const BooleanDefault: Story = {
+  name: 'Boolean (default)',
+  render: () => ({
+    components: { Switch, Label },
+    template: `
+      <div style="display:flex;align-items:center;gap:0.5rem;font-family:system-ui">
+        <Switch id="airplane" class="sb-switch">
+          <span class="sb-switch-thumb" />
+        </Switch>
+        <Label for="airplane">Airplane mode</Label>
+      </div>
+    `,
+  }),
+};
+
+export const StringPair: Story = {
+  name: 'String pair ("on" / "off")',
+  render: () => ({
+    components: { Switch, Label },
+    setup() {
+      const value = ref<'on' | 'off'>('off');
+      return { value };
+    },
+    template: `
+      <div style="display:flex;align-items:center;gap:0.5rem;font-family:system-ui">
+        <Switch
+          v-model="value"
+          truthy="on"
+          falsy="off"
+          id="mode"
+          class="sb-switch"
+        >
+          <span class="sb-switch-thumb" />
+        </Switch>
+        <Label for="mode">Mode: {{ value }}</Label>
+      </div>
+    `,
+  }),
+};
+
+export const ObjectPair: Story = {
+  name: 'Object pair (generic)',
+  render: () => ({
+    components: { Switch, Label },
+    setup() {
+      const LIGHT = { theme: 'light' as const };
+      const DARK = { theme: 'dark' as const };
+      const value = ref<typeof LIGHT | typeof DARK>(LIGHT);
+      return { value, LIGHT, DARK };
+    },
+    template: `
+      <div style="display:flex;align-items:center;gap:0.5rem;font-family:system-ui">
+        <Switch
+          v-model="value"
+          :truthy="DARK"
+          :falsy="LIGHT"
+          id="theme"
+          class="sb-switch"
+        >
+          <span class="sb-switch-thumb" />
+        </Switch>
+        <Label for="theme">Theme: {{ value.theme }}</Label>
+      </div>
+    `,
+  }),
+};
+
+export const Disabled: Story = {
+  name: 'Disabled',
+  render: () => ({
+    components: { Switch, Label },
+    template: `
+      <div style="display:flex;align-items:center;gap:0.5rem;font-family:system-ui">
+        <Switch id="disabled-sw" class="sb-switch" disabled :default-value="true">
+          <span class="sb-switch-thumb" />
+        </Switch>
+        <Label for="disabled-sw">Disabled (checked)</Label>
+      </div>
+    `,
+  }),
+};
diff --git a/vue/stories/stories/Toggle.stories.ts b/vue/stories/stories/Toggle.stories.ts
new file mode 100644
index 0000000..9dd8415
--- /dev/null
+++ b/vue/stories/stories/Toggle.stories.ts
@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { Toggle } from '@robonen/primitives';
+
+const meta = {
+  title: 'Forms/Toggle',
+  component: Toggle,
+  tags: ['autodocs'],
+  argTypes: { disabled: { control: 'boolean' }, defaultPressed: { control: 'boolean' } },
+  args: { disabled: false, defaultPressed: false },
+} satisfies Meta<typeof Toggle>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const template = `
+  <Toggle v-bind="args" class="sb-toggle">
+    <template #default="{ pressed }">{{ pressed ? 'Bold ●' : 'Bold' }}</template>
+  </Toggle>
+`;
+
+export const Default: Story = {
+  render: args => ({ components: { Toggle }, setup: () => ({ args }), template }),
+};
+
+export const Pressed: Story = {
+  args: { defaultPressed: true },
+  render: args => ({ components: { Toggle }, setup: () => ({ args }), template }),
+};
+
+export const Disabled: Story = {
+  args: { disabled: true },
+  render: args => ({ components: { Toggle }, setup: () => ({ args }), template }),
+};
diff --git a/vue/stories/tsconfig.json b/vue/stories/tsconfig.json
new file mode 100644
index 0000000..2781e66
--- /dev/null
+++ b/vue/stories/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.src.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/vue/stories/tsconfig.node.json b/vue/stories/tsconfig.node.json
new file mode 100644
index 0000000..43827e8
--- /dev/null
+++ b/vue/stories/tsconfig.node.json
@@ -0,0 +1,8 @@
+{
+  "extends": "@robonen/tsconfig/tsconfig.node.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo"
+  },
+  "include": ["*.config.ts", ".storybook/**/*.ts"]
+}
diff --git a/vue/stories/tsconfig.src.json b/vue/stories/tsconfig.src.json
new file mode 100644
index 0000000..11f772b
--- /dev/null
+++ b/vue/stories/tsconfig.src.json
@@ -0,0 +1,10 @@
+{
+  "extends": "@robonen/tsconfig/tsconfig.vue.json",
+  "compilerOptions": {
+    "composite": true,
+    "types": ["vite/client"],
+    "allowImportingTsExtensions": false,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.src.tsbuildinfo"
+  },
+  "include": ["stories/**/*.ts", "stories/**/*.vue"]
+}
diff --git a/vue/toolkit/README.md b/vue/toolkit/README.md
new file mode 100644
index 0000000..638ca49
--- /dev/null
+++ b/vue/toolkit/README.md
@@ -0,0 +1,48 @@
+# @robonen/vue
+
+Collection of composables and utilities for Vue 3 — 213+ tree-shakeable, SSR-safe composables.
+
+## Install
+
+```bash
+pnpm install @robonen/vue
+```
+
+## Composables
+
+| Category | Composables |
+| -------------- | ----------- |
+| **animation** | `useAnimate`, `useCountdown`, `useDateFormat`, `useInterval`, `useIntervalFn`, `useNow`, `useRafFn`, `useTimeAgo`, `useTimeout`, `useTimeoutFn`, `useTimestamp`, `useTransition` |
+| **array** | `useArrayDifference`, `useArrayEvery`, `useArrayFilter`, `useArrayFind`, `useArrayFindIndex`, `useArrayFindLast`, `useArrayIncludes`, `useArrayJoin`, `useArrayMap`, `useArrayReduce`, `useArraySome`, `useArrayUnique`, `useSorted` |
+| **browser** | `broadcastedRef`, `useBreakpoints`, `useClipboard`, `useClipboardItems`, `useCloseWatcher`, `useColorMode`, `useCssVar`, `useDark`, `useDocumentPiP`, `useEventListener`, `useEyeDropper`, `useFavicon`, `useFileDialog`, `useFileSystemAccess`, `useFullscreen`, `useImage`, `useLocalFonts`, `useMediaQuery`, `useObjectUrl`, `usePermission`, `usePreferredColorScheme`, `usePreferredContrast`, `usePreferredDark`, `usePreferredLanguages`, `usePreferredReducedMotion`, `usePreferredReducedTransparency`, `useScriptTag`, `useShare`, `useStyleTag`, `useTabLeader`, `useTextareaAutosize`, `useTitle`, `useUrlSearchParams`, `useVibrate`, `useWakeLock`, `useWebNotification` |
+| **component** | `createReusableTemplate`, `unrefElement`, `useCurrentElement`, `useForwardExpose`, `useTemplateRefsList`, `useVirtualList` |
+| **debug** | `useRenderCount`, `useRenderInfo` |
+| **elements** | `onElementRemoval`, `useActiveElement`, `useDocumentReadyState`, `useDocumentVisibility`, `useDraggable`, `useDropZone`, `useElementBounding`, `useElementSize`, `useElementVisibility`, `useFocusGuard`, `useIntersectionObserver`, `useMutationObserver`, `useParentElement`, `useResizeObserver`, `useWindowFocus`, `useWindowScroll`, `useWindowSize` |
+| **forms** | `useField`, `useFieldArray`, `useForm`, `useFormContext` |
+| **lifecycle** | `tryOnBeforeMount`, `tryOnMounted`, `tryOnScopeDispose`, `useMounted` |
+| **math** | `logicAnd`, `logicNot`, `logicOr`, `useAbs`, `useAverage`, `useCeil`, `useClamp`, `useFloor`, `useMath`, `useMax`, `useMin`, `usePrecision`, `useProjection`, `useRound`, `useSum`, `useTrunc` |
+| **media** | `useBluetooth`, `useDisplayMedia`, `useMediaControls`, `useMemory`, `usePerformanceObserver`, `useSpeechRecognition`, `useSpeechSynthesis`, `useUserMedia`, `useWebWorker`, `useWebWorkerFn` |
+| **reactivity** | `computedAsync`, `computedEager`, `computedWithControl`, `extendRef`, `reactiveComputed`, `reactiveOmit`, `reactivePick`, `refAutoReset`, `refDebounced`, `refDefault`, `refThrottled`, `refWithControl`, `syncRef`, `toReactive`, `useCached`, `useCloned`, `useDebounceFn`, `usePrevious`, `useSyncRefs`, `useThrottleFn`, `useToNumber`, `useToString` |
+| **sensors** | `onKeyStroke`, `onLongPress`, `onStartTyping`, `useBattery`, `useBodyScrollLock`, `useClickOutside`, `useDeviceMotion`, `useDeviceOrientation`, `useDevicePixelRatio`, `useDevicesList`, `useElementByPoint`, `useElementHover`, `useEscapeKey`, `useFocus`, `useFocusWithin`, `useFps`, `useGamepad`, `useGeolocation`, `useIdle`, `useInfiniteScroll`, `useKeyModifier`, `useMagicKeys`, `useMouse`, `useMouseInElement`, `useMousePressed`, `useNetwork`, `useOnline`, `usePageLeave`, `useParallax`, `usePointer`, `usePointerLock`, `usePointerSwipe`, `useScreenOrientation`, `useScroll`, `useScrollLock`, `useSwipe`, `useTextSelection` |
+| **state** | `createSharedComposable`, `useAppSharedState`, `useAsyncState`, `useContextFactory`, `useCounter`, `useCycleList`, `useDebouncedRefHistory`, `useId`, `useInjectionStore`, `useLastChanged`, `useManualRefHistory`, `useOffsetPagination`, `useRefHistory`, `useStepper`, `useThrottledRefHistory`, `useToggle` |
+| **storage** | `useLocalStorage`, `useSessionStorage`, `useStorage`, `useStorageAsync` |
+| **utilities** | `createEventHook`, `get`, `isDefined`, `set`, `useEventBus`, `useMemoize`, `useSupported` |
+| **watch** | `until`, `watchDebounced`, `watchIgnorable`, `watchOnce`, `watchPausable`, `watchThrottled`, `whenever` |
+
+The package also exports event-filter helpers (`debounceFilter`, `throttleFilter`, `pausableFilter`, `createFilterWrapper`) and shared types (`ConfigurableWindow`, `ConfigurableDocument`, `ConfigurableNavigator`, `ConfigurableFlush`, `MaybeComputedElementRef`, …).
+
+## Usage
+
+```ts
+import { useEventListener, useMagicKeys, useToggle } from @robonen/vue;
+
+const { value, toggle } = useToggle();
+
+useEventListener(scroll, () => {/* … */}, { passive: true });
+
+const keys = useMagicKeys();
+watchEffect(() => {
+  if (keys[ctrl+s].value)
+    save();
+});
+```
diff --git a/vue/toolkit/docs/intro.vue b/vue/toolkit/docs/intro.vue
new file mode 100644
index 0000000..b66005b
--- /dev/null
+++ b/vue/toolkit/docs/intro.vue
@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { useCounter } from '../src';
+
+const { count, increment, decrement, reset } = useCounter(0, { min: 0, max: 10 });
+</script>
+
+<template>
+  <div class="docs-section">
+    <!-- Hero -->
+    <div class="prose-docs">
+      <h1>@robonen/vue</h1>
+      <p>
+        A collection of <strong>213+ tree-shakeable, SSR-safe composables</strong> for Vue 3 —
+        reactive primitives for state, sensors, the DOM, browser APIs, animation, forms and more.
+      </p>
+    </div>
+
+    <div class="prose-docs">
+      <p>
+        Every Vue app ends up re-implementing the same building blocks: a toggle, a debounced ref,
+        an event listener that cleans itself up, a media query, local-storage state. @robonen/vue
+        ships those building blocks as small, composable functions with a consistent API. Each one
+        is independently tree-shakeable, written in TypeScript with full inference, and safe to call
+        during server-side rendering — guards for <code>window</code>, <code>document</code> and
+        <code>navigator</code> are built in, so the same code runs on the server and hydrates cleanly
+        on the client.
+      </p>
+    </div>
+
+    <!-- Feature highlights -->
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="text-sm font-semibold text-(--fg) mb-1.5">Tree-shakeable by design</h3>
+        <p class="text-sm text-(--fg-muted) leading-relaxed">
+          Import only what you use. Each composable lives on its own and pulls in nothing it
+          doesn't need — your bundle stays exactly as small as your usage.
+        </p>
+      </div>
+
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="text-sm font-semibold text-(--fg) mb-1.5">SSR-safe out of the box</h3>
+        <p class="text-sm text-(--fg-muted) leading-relaxed">
+          Browser-only access is guarded behind lifecycle hooks and configurable
+          <code>window</code>/<code>document</code> targets, so Nuxt and SSR setups just work.
+        </p>
+      </div>
+
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="text-sm font-semibold text-(--fg) mb-1.5">Fully typed</h3>
+        <p class="text-sm text-(--fg-muted) leading-relaxed">
+          Written in TypeScript with precise return types and generics. <code>MaybeRefOrGetter</code>
+          arguments mean you can pass plain values, refs or getters interchangeably.
+        </p>
+      </div>
+
+      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
+        <h3 class="text-sm font-semibold text-(--fg) mb-1.5">Broad coverage</h3>
+        <p class="text-sm text-(--fg-muted) leading-relaxed">
+          From state and reactivity to sensors, elements, storage, math and form handling —
+          one cohesive toolkit spanning the whole surface of a Vue app.
+        </p>
+      </div>
+    </div>
+
+    <!-- Install -->
+    <div class="prose-docs">
+      <h2>Install</h2>
+    </div>
+    <DocsCode :code="`pnpm add @robonen/vue`" lang="bash" />
+
+    <!-- Usage -->
+    <div class="prose-docs">
+      <h2>Quick start</h2>
+      <p>
+        Import the composables you need and use them inside <code>&lt;script setup&gt;</code>.
+        Here's a counter clamped to a range, with auto-cleaning keyboard shortcuts:
+      </p>
+    </div>
+    <DocsCode
+      :code="`import { useCounter, useEventListener, useToggle } from '@robonen/vue';
+
+// Clamped, reactive counter
+const { count, increment, decrement, reset } = useCounter(0, { min: 0, max: 10 });
+
+// A boolean toggle with custom truthy/falsy values
+const { value: theme, toggle } = useToggle('light', {
+  truthyValue: 'dark',
+  falsyValue: 'light',
+});
+
+// Listener is removed automatically on unmount
+useEventListener('keydown', (e) => {
+  if (e.key === 'ArrowUp') increment();
+  if (e.key === 'ArrowDown') decrement();
+});`"
+      lang="ts"
+    />
+
+    <!-- Live demo -->
+    <div class="prose-docs">
+      <p>The same <code>useCounter</code> running live:</p>
+    </div>
+    <ClientOnly>
+      <div class="flex items-center gap-3 rounded-lg border border-(--border) bg-(--bg-subtle) p-4">
+        <button
+          type="button"
+          class="size-9 rounded-md border border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) focus:outline-none focus:ring-2 focus:ring-(--ring) disabled:opacity-40"
+          :disabled="count <= 0"
+          @click="decrement()"
+        >
+          −
+        </button>
+        <span class="min-w-12 text-center text-lg font-medium tabular-nums text-(--fg)">{{ count }}</span>
+        <button
+          type="button"
+          class="size-9 rounded-md border border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) focus:outline-none focus:ring-2 focus:ring-(--ring) disabled:opacity-40"
+          :disabled="count >= 10"
+          @click="increment()"
+        >
+          +
+        </button>
+        <button
+          type="button"
+          class="ml-auto rounded-md px-3 py-1.5 text-sm text-(--fg-muted) hover:text-(--fg) hover:bg-(--bg-inset) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          @click="reset()"
+        >
+          Reset
+        </button>
+      </div>
+    </ClientOnly>
+
+    <!-- Where to next -->
+    <div class="prose-docs">
+      <h2>Where to next</h2>
+      <p>
+        The full API reference is listed right below. A few good starting points:
+      </p>
+      <ul>
+        <li>
+          <NuxtLink to="/vue/use-counter">useCounter</NuxtLink> — a clamped, reactive counter
+          with increment / decrement / set / reset.
+        </li>
+        <li>
+          <NuxtLink to="/vue/use-toggle">useToggle</NuxtLink> — a boolean toggle with
+          customizable truthy / falsy values.
+        </li>
+        <li>
+          <NuxtLink to="/vue/use-event-listener">useEventListener</NuxtLink> — declarative
+          event listeners that clean up on unmount.
+        </li>
+        <li>
+          <NuxtLink to="/vue/use-storage">useStorage</NuxtLink> — reactive state synced to
+          <code>localStorage</code> / <code>sessionStorage</code>.
+        </li>
+        <li>
+          <NuxtLink to="/vue/use-magic-keys">useMagicKeys</NuxtLink> — reactive keyboard
+          state for building shortcuts.
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/eslint.config.ts b/vue/toolkit/eslint.config.ts
new file mode 100644
index 0000000..c86da2b
--- /dev/null
+++ b/vue/toolkit/eslint.config.ts
@@ -0,0 +1,3 @@
+import { base, compose, imports, stylistic, typescript, vitest, vue } from '@robonen/eslint';
+
+export default compose(base, typescript, vue, vitest, imports, stylistic);
diff --git a/web/vue/jsr.json b/vue/toolkit/jsr.json
similarity index 100%
rename from web/vue/jsr.json
rename to vue/toolkit/jsr.json
diff --git a/web/vue/package.json b/vue/toolkit/package.json
similarity index 68%
rename from web/vue/package.json
rename to vue/toolkit/package.json
index 6521ec2..f9f70c0 100644
--- a/web/vue/package.json
+++ b/vue/toolkit/package.json
@@ -14,9 +14,9 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/robonen/tools.git",
-    "directory": "./packages/vue"
+    "directory": "vue/toolkit"
   },
-  "packageManager": "pnpm@10.29.3",
+  "packageManager": "pnpm@10.33.2",
   "engines": {
     "node": ">=24.13.1"
   },
@@ -26,23 +26,29 @@
   ],
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
     }
   },
   "scripts": {
-    "lint": "oxlint -c oxlint.config.ts",
+    "lint:check": "eslint .",
+    "lint:fix": "eslint . --fix",
     "test": "vitest run",
     "dev": "vitest dev",
     "build": "tsdown"
   },
   "devDependencies": {
-    "@robonen/oxlint": "workspace:*",
+    "@robonen/eslint": "workspace:*",
     "@robonen/tsconfig": "workspace:*",
     "@robonen/tsdown": "workspace:*",
     "@vue/test-utils": "catalog:",
-    "oxlint": "catalog:",
+    "eslint": "catalog:",
     "tsdown": "catalog:"
   },
   "dependencies": {
diff --git a/vue/toolkit/src/composables/animation/index.ts b/vue/toolkit/src/composables/animation/index.ts
new file mode 100644
index 0000000..1110f45
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/index.ts
@@ -0,0 +1,12 @@
+export * from './useAnimate';
+export * from './useCountdown';
+export * from './useDateFormat';
+export * from './useInterval';
+export * from './useIntervalFn';
+export * from './useNow';
+export * from './useRafFn';
+export * from './useTimeAgo';
+export * from './useTimeout';
+export * from './useTimeoutFn';
+export * from './useTimestamp';
+export * from './useTransition';
diff --git a/vue/toolkit/src/composables/animation/useAnimate/demo.vue b/vue/toolkit/src/composables/animation/useAnimate/demo.vue
new file mode 100644
index 0000000..3e3e953
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useAnimate/demo.vue
@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { computed, useTemplateRef } from 'vue';
+import { useAnimate } from './index';
+
+const target = useTemplateRef<HTMLElement>('target');
+
+const {
+  isSupported,
+  play,
+  pause,
+  reverse,
+  finish,
+  cancel,
+  playState,
+  currentTime,
+  playbackRate,
+} = useAnimate(
+  target,
+  [
+    { transform: 'translateX(-3.5rem) rotate(0deg)', borderRadius: '0.75rem' },
+    { transform: 'translateX(0) rotate(180deg)', borderRadius: '50%' },
+    { transform: 'translateX(3.5rem) rotate(360deg)', borderRadius: '0.75rem' },
+  ],
+  {
+    duration: 2000,
+    iterations: Infinity,
+    direction: 'alternate',
+    easing: 'ease-in-out',
+    immediate: false,
+  },
+);
+
+const elapsed = computed(() => {
+  const t = currentTime.value;
+  return typeof t === 'number' ? `${(t / 1000).toFixed(2)}s` : '—';
+});
+
+const stateColor = computed(() => {
+  switch (playState.value) {
+    case 'running': return 'bg-emerald-500';
+    case 'paused': return 'bg-amber-500';
+    case 'finished': return 'bg-sky-500';
+    default: return 'bg-(--border-strong)';
+  }
+});
+
+const rates = [0.5, 1, 2] as const;
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      v-if="!isSupported"
+      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-600 dark:text-amber-400"
+    >
+      The Web Animations API is not supported in this browser.
+    </div>
+
+    <template v-else>
+      <div class="flex h-28 items-center justify-center overflow-hidden rounded-xl border border-(--border) bg-(--bg-inset)">
+        <div
+          ref="target"
+          class="size-12 bg-(--accent) shadow-lg"
+        />
+      </div>
+
+      <div class="grid grid-cols-2 gap-3">
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+          <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+            State
+          </div>
+          <div class="mt-1 flex items-center gap-2">
+            <span class="inline-block size-2 rounded-full transition" :class="stateColor" />
+            <span class="font-mono text-sm text-(--fg)">{{ playState }}</span>
+          </div>
+        </div>
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+          <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+            Current time
+          </div>
+          <div class="mt-1 font-mono text-sm tabular-nums text-(--fg)">
+            {{ elapsed }}
+          </div>
+        </div>
+      </div>
+
+      <div class="grid grid-cols-3 gap-2">
+        <button
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+          @click="play"
+        >
+          Play
+        </button>
+        <button
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="pause"
+        >
+          Pause
+        </button>
+        <button
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="reverse"
+        >
+          Reverse
+        </button>
+        <button
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="finish"
+        >
+          Finish
+        </button>
+        <button
+          class="col-span-2 inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="cancel"
+        >
+          Cancel
+        </button>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Playback rate
+        </div>
+        <div class="flex gap-2">
+          <button
+            v-for="rate in rates"
+            :key="rate"
+            class="flex-1 rounded-lg border px-3 py-1.5 text-sm font-medium tabular-nums transition active:scale-[0.98] cursor-pointer"
+            :class="playbackRate === rate
+              ? 'border-transparent bg-(--accent) text-(--accent-fg)'
+              : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+            @click="playbackRate = rate"
+          >
+            {{ rate }}×
+          </button>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/animation/useAnimate/index.test.ts b/vue/toolkit/src/composables/animation/useAnimate/index.test.ts
new file mode 100644
index 0000000..b250b9b
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useAnimate/index.test.ts
@@ -0,0 +1,355 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, ref } from 'vue';
+import { useAnimate } from '.';
+
+// --- Stub Animation -------------------------------------------------------
+
+type Listener = (ev: any) => void;
+
+class StubAnimation {
+  effect: any;
+  timeline: any = { kind: 'document' };
+  startTime: number | null = null;
+  currentTime: number | null = 0;
+  playbackRate = 1;
+  pending = false;
+  playState: AnimationPlayState = 'idle';
+  replaceState: AnimationReplaceState = 'active';
+
+  play = vi.fn(() => {
+    this.playState = 'running';
+  });
+
+  pause = vi.fn(() => {
+    this.playState = 'paused';
+  });
+
+  reverse = vi.fn(() => {
+    this.playbackRate = -1;
+    this.playState = 'running';
+  });
+
+  finish = vi.fn(() => {
+    this.playState = 'finished';
+  });
+
+  cancel = vi.fn(() => {
+    this.playState = 'idle';
+  });
+
+  persist = vi.fn();
+  commitStyles = vi.fn();
+
+  private listeners = new Map<string, Set<Listener>>();
+
+  addEventListener = vi.fn((type: string, listener: Listener) => {
+    if (!this.listeners.has(type))
+      this.listeners.set(type, new Set());
+    this.listeners.get(type)!.add(listener);
+  });
+
+  removeEventListener = vi.fn((type: string, listener: Listener) => {
+    this.listeners.get(type)?.delete(listener);
+  });
+
+  dispatch(type: string) {
+    this.listeners.get(type)?.forEach(l => l({ type }));
+  }
+
+  constructor(public keyframes: any, public options: any) {
+    instances.push(this);
+  }
+}
+
+let instances: StubAnimation[] = [];
+let animateSpy: ReturnType<typeof vi.fn>;
+
+// Flush enough rAF + microtasks for the useRafFn store sync to run.
+async function flushFrames(count = 3) {
+  for (let i = 0; i < count; i++) {
+    await new Promise<void>(resolve => requestAnimationFrame(() => resolve()));
+    await nextTick();
+  }
+}
+
+describe(useAnimate, () => {
+  beforeEach(() => {
+    instances = [];
+    animateSpy = vi.fn(function (this: HTMLElement, keyframes: any, options: any) {
+      return new StubAnimation(keyframes, options) as unknown as Animation;
+    });
+    // jsdom does not implement the Web Animations API
+    Object.defineProperty(HTMLElement.prototype, 'animate', {
+      configurable: true,
+      writable: true,
+      value: animateSpy,
+    });
+    vi.stubGlobal('KeyframeEffect', class {
+      constructor(public el: any, public kf: any, public opts: any) {}
+    });
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    delete (HTMLElement.prototype as any).animate;
+  });
+
+  it('reports support when Element.animate exists', () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let api!: ReturnType<typeof useAnimate>;
+    scope.run(() => {
+      api = useAnimate(ref(el), [{ opacity: 0 }, { opacity: 1 }], 1000);
+    });
+
+    expect(api.isSupported.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('creates the animation immediately for a resolved target', async () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let api!: ReturnType<typeof useAnimate>;
+    scope.run(() => {
+      api = useAnimate(ref(el), [{ opacity: 0 }, { opacity: 1 }], 1000);
+    });
+
+    await flushFrames();
+
+    expect(animateSpy).toHaveBeenCalledTimes(1);
+    expect(animateSpy).toHaveBeenCalledWith([{ opacity: 0 }, { opacity: 1 }], 1000);
+    expect(api.animate.value).toBe(instances[0] as unknown as Animation);
+    scope.stop();
+  });
+
+  it('passes an options object through to animate, stripping reserved keys', async () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    scope.run(() => {
+      useAnimate(ref(el), { opacity: [0, 1] }, {
+        duration: 500,
+        easing: 'ease-in',
+        immediate: true,
+        commitStyles: true,
+      });
+    });
+
+    await flushFrames();
+
+    expect(animateSpy).toHaveBeenCalledWith({ opacity: [0, 1] }, { duration: 500, easing: 'ease-in' });
+    expect(instances[0]!.options).not.toHaveProperty('immediate');
+    expect(instances[0]!.options).not.toHaveProperty('commitStyles');
+    scope.stop();
+  });
+
+  it('does not auto-play when immediate is false', async () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let api!: ReturnType<typeof useAnimate>;
+    scope.run(() => {
+      api = useAnimate(ref(el), [{ opacity: 0 }], { duration: 1000, immediate: false });
+    });
+
+    await flushFrames();
+
+    expect(instances[0]!.pause).toHaveBeenCalled();
+    expect(api.animate.value).toBeDefined();
+    scope.stop();
+  });
+
+  it('play / pause / reverse / finish / cancel delegate to the Animation', async () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let api!: ReturnType<typeof useAnimate>;
+    scope.run(() => {
+      api = useAnimate(ref(el), [{ opacity: 0 }], 1000);
+    });
+
+    await flushFrames();
+    const inst = instances[0]!;
+
+    api.pause();
+    expect(inst.pause).toHaveBeenCalled();
+
+    api.play();
+    expect(inst.play).toHaveBeenCalled();
+
+    api.reverse();
+    expect(inst.reverse).toHaveBeenCalled();
+
+    api.finish();
+    expect(inst.finish).toHaveBeenCalled();
+
+    api.cancel();
+    expect(inst.cancel).toHaveBeenCalled();
+    scope.stop();
+  });
+
+  it('syncs reactive playState from the live animation', async () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let api!: ReturnType<typeof useAnimate>;
+    scope.run(() => {
+      api = useAnimate(ref(el), [{ opacity: 0 }], 1000);
+    });
+
+    await flushFrames();
+    const inst = instances[0]!;
+
+    inst.playState = 'running';
+    inst.currentTime = 42;
+    api.play();
+    await flushFrames();
+
+    expect(api.playState.value).toBe('running');
+    expect(api.currentTime.value).toBe(42);
+    scope.stop();
+  });
+
+  it('writes currentTime back to the animation', async () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let api!: ReturnType<typeof useAnimate>;
+    scope.run(() => {
+      api = useAnimate(ref(el), [{ opacity: 0 }], 1000);
+    });
+
+    await flushFrames();
+    const inst = instances[0]!;
+
+    api.currentTime.value = 250;
+    expect(inst.currentTime).toBe(250);
+    expect(api.currentTime.value).toBe(250);
+    scope.stop();
+  });
+
+  it('writes playbackRate back to the animation', async () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let api!: ReturnType<typeof useAnimate>;
+    scope.run(() => {
+      api = useAnimate(ref(el), [{ opacity: 0 }], 1000);
+    });
+
+    await flushFrames();
+    const inst = instances[0]!;
+
+    api.playbackRate.value = 2;
+    expect(inst.playbackRate).toBe(2);
+    expect(api.playbackRate.value).toBe(2);
+    scope.stop();
+  });
+
+  it('applies persist and initial playbackRate options', async () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    scope.run(() => {
+      useAnimate(ref(el), [{ opacity: 0 }], { duration: 1000, persist: true, playbackRate: 3 });
+    });
+
+    await flushFrames();
+    const inst = instances[0]!;
+
+    expect(inst.persist).toHaveBeenCalled();
+    expect(inst.playbackRate).toBe(3);
+    scope.stop();
+  });
+
+  it('commits styles on finish when commitStyles is set', async () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    scope.run(() => {
+      useAnimate(ref(el), [{ opacity: 0 }], { duration: 1000, commitStyles: true });
+    });
+
+    await flushFrames();
+    const inst = instances[0]!;
+
+    inst.dispatch('finish');
+    expect(inst.commitStyles).toHaveBeenCalled();
+    scope.stop();
+  });
+
+  it('calls onReady with the created animation', async () => {
+    const el = document.createElement('div');
+    const onReady = vi.fn();
+    const scope = effectScope();
+    scope.run(() => {
+      useAnimate(ref(el), [{ opacity: 0 }], { duration: 1000, onReady });
+    });
+
+    await flushFrames();
+
+    expect(onReady).toHaveBeenCalledWith(instances[0]);
+    scope.stop();
+  });
+
+  it('routes thrown errors to onError instead of throwing', async () => {
+    const el = document.createElement('div');
+    const onError = vi.fn();
+    const scope = effectScope();
+    let api!: ReturnType<typeof useAnimate>;
+    scope.run(() => {
+      api = useAnimate(ref(el), [{ opacity: 0 }], { duration: 1000, onError });
+    });
+
+    await flushFrames();
+    const inst = instances[0]!;
+    const boom = new Error('boom');
+    inst.play.mockImplementationOnce(() => {
+      throw boom;
+    });
+
+    expect(() => api.play()).not.toThrow();
+    expect(onError).toHaveBeenCalledWith(boom);
+    scope.stop();
+  });
+
+  it('clears the animation when the target becomes null', async () => {
+    const el = document.createElement('div');
+    const target = ref<HTMLElement | null>(el);
+    const scope = effectScope();
+    let api!: ReturnType<typeof useAnimate>;
+    scope.run(() => {
+      api = useAnimate(target, [{ opacity: 0 }], 1000);
+    });
+
+    await flushFrames();
+    expect(api.animate.value).toBeDefined();
+
+    target.value = null;
+    await nextTick();
+    expect(api.animate.value).toBeUndefined();
+    scope.stop();
+  });
+
+  it('cancels the animation on scope dispose', async () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    scope.run(() => {
+      useAnimate(ref(el), [{ opacity: 0 }], 1000);
+    });
+
+    await flushFrames();
+    const inst = instances[0]!;
+
+    scope.stop();
+    expect(inst.cancel).toHaveBeenCalled();
+  });
+
+  it('is not supported and never animates when window is undefined (SSR)', async () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let api!: ReturnType<typeof useAnimate>;
+    scope.run(() => {
+      api = useAnimate(ref(el), [{ opacity: 0 }], { duration: 1000, window: undefined });
+    });
+
+    await flushFrames();
+
+    expect(api.isSupported.value).toBeFalsy();
+    expect(animateSpy).not.toHaveBeenCalled();
+    expect(api.animate.value).toBeUndefined();
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/animation/useAnimate/index.ts b/vue/toolkit/src/composables/animation/useAnimate/index.ts
new file mode 100644
index 0000000..c466b38
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useAnimate/index.ts
@@ -0,0 +1,417 @@
+import { computed, shallowReactive, shallowRef, toValue, watch } from 'vue';
+import type { ComputedRef, MaybeRef, Ref, ShallowRef, WritableComputedRef } from 'vue';
+import { isObject, noop, omit } from '@robonen/stdlib';
+import { defaultWindow } from '@/types';
+import type { ConfigurableWindow } from '@/types';
+import { unrefElement } from '@/composables/component/unrefElement';
+import type { MaybeComputedElementRef } from '@/composables/component/unrefElement';
+import { useSupported } from '@/composables/utilities/useSupported';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import { useRafFn } from '@/composables/animation/useRafFn';
+import { tryOnMounted } from '@/composables/lifecycle/tryOnMounted';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+
+export interface UseAnimateOptions extends KeyframeAnimationOptions, ConfigurableWindow {
+  /**
+   * Automatically call `play()` once the target element is resolved.
+   *
+   * @default true
+   */
+  immediate?: boolean;
+
+  /**
+   * Commit the end styling state of the animation to the element when it finishes.
+   * Usually paired with the `fill` option.
+   *
+   * @default false
+   */
+  commitStyles?: boolean;
+
+  /**
+   * Persist the animation so it is not automatically removed by the browser.
+   *
+   * @default false
+   */
+  persist?: boolean;
+
+  /**
+   * Called once the underlying `Animation` instance has been created.
+   */
+  onReady?: (animation: Animation) => void;
+
+  /**
+   * Called when an error is thrown while controlling the animation.
+   *
+   * @default noop
+   */
+  onError?: (error: unknown) => void;
+}
+
+export type UseAnimateKeyframes
+  = MaybeRef<Keyframe[] | PropertyIndexedKeyframes | null>;
+
+export interface UseAnimateReturn {
+  /**
+   * Whether the Web Animations API is supported in the current environment
+   */
+  isSupported: Readonly<Ref<boolean>>;
+
+  /**
+   * The underlying `Animation` instance, or `undefined` before it is created
+   */
+  animate: ShallowRef<Animation | undefined>;
+
+  /**
+   * Start or resume the animation
+   */
+  play: () => void;
+
+  /**
+   * Suspend playback of the animation
+   */
+  pause: () => void;
+
+  /**
+   * Reverse the playback direction of the animation
+   */
+  reverse: () => void;
+
+  /**
+   * Seek the animation to the end of its active duration
+   */
+  finish: () => void;
+
+  /**
+   * Abort the animation, clearing its effects
+   */
+  cancel: () => void;
+
+  /**
+   * Whether the animation is currently waiting for an asynchronous operation
+   */
+  pending: ComputedRef<boolean>;
+
+  /**
+   * The current playback state of the animation
+   */
+  playState: ComputedRef<AnimationPlayState>;
+
+  /**
+   * The current replace state of the animation
+   */
+  replaceState: ComputedRef<AnimationReplaceState>;
+
+  /**
+   * The scheduled time at which the animation should begin (writable)
+   */
+  startTime: WritableComputedRef<CSSNumberish | number | null>;
+
+  /**
+   * The current time value of the animation in milliseconds (writable)
+   */
+  currentTime: WritableComputedRef<CSSNumberish | null>;
+
+  /**
+   * The timeline associated with the animation (writable)
+   */
+  timeline: WritableComputedRef<AnimationTimeline | null>;
+
+  /**
+   * The playback rate of the animation (writable)
+   */
+  playbackRate: WritableComputedRef<number>;
+}
+
+interface AnimateStore {
+  startTime: CSSNumberish | number | null;
+  currentTime: CSSNumberish | null;
+  timeline: AnimationTimeline | null;
+  playbackRate: number;
+  pending: boolean;
+  playState: AnimationPlayState;
+  replaceState: AnimationReplaceState;
+}
+
+const RESERVED_KEYS = [
+  'window',
+  'immediate',
+  'commitStyles',
+  'persist',
+  'onReady',
+  'onError',
+] as const;
+
+/**
+ * @name useAnimate
+ * @category Animation
+ * @description Reactive [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API)
+ * wrapper for a single element. Exposes imperative controls (`play`, `pause`, `reverse`,
+ * `finish`, `cancel`) alongside reactive state (`playState`, `currentTime`, `playbackRate`, ...).
+ * The reactive state is synced via `requestAnimationFrame` only while the animation is running,
+ * so an idle animation costs nothing. SSR-safe: nothing touches the DOM until the element resolves.
+ *
+ * @param {MaybeComputedElementRef} target Element to animate (reactive ref, getter, or element)
+ * @param {UseAnimateKeyframes} keyframes Keyframes to animate, reactive
+ * @param {number | UseAnimateOptions} [options] Duration in ms, or full options object
+ * @returns {UseAnimateReturn} Support flag, the `Animation` instance, controls, and reactive state
+ *
+ * @example
+ * const el = useTemplateRef<HTMLElement>('el');
+ * const { playState, play, pause } = useAnimate(
+ *   el,
+ *   [{ transform: 'rotate(0)' }, { transform: 'rotate(360deg)' }],
+ *   { duration: 1000, iterations: Infinity },
+ * );
+ *
+ * @example
+ * // Shorthand: third argument is the duration in milliseconds
+ * useAnimate(el, { opacity: [0, 1] }, 500);
+ *
+ * @since 0.0.15
+ */
+export function useAnimate(
+  target: MaybeComputedElementRef,
+  keyframes: UseAnimateKeyframes,
+  options?: number | UseAnimateOptions,
+): UseAnimateReturn {
+  let config: UseAnimateOptions;
+  let animateOptions: number | KeyframeAnimationOptions | undefined;
+
+  if (isObject(options)) {
+    config = options;
+    animateOptions = omit(options, RESERVED_KEYS as unknown as Array<keyof UseAnimateOptions>);
+  }
+  else {
+    config = { duration: options };
+    animateOptions = options;
+  }
+
+  const {
+    immediate = true,
+    commitStyles = false,
+    persist = false,
+    playbackRate: initialPlaybackRate = 1,
+    onReady,
+    onError = noop,
+  } = config;
+
+  // Honor an explicit `window: undefined` (SSR / opt-out) rather than letting a
+  // default parameter silently restore `defaultWindow`.
+  const window = 'window' in config ? config.window : defaultWindow;
+
+  const isSupported = useSupported(() =>
+    Boolean(window) && typeof HTMLElement !== 'undefined' && 'animate' in HTMLElement.prototype);
+
+  const animate = shallowRef<Animation | undefined>(undefined);
+
+  const store = shallowReactive<AnimateStore>({
+    startTime: null,
+    currentTime: null,
+    timeline: null,
+    playbackRate: initialPlaybackRate,
+    pending: false,
+    playState: immediate ? 'idle' : 'paused',
+    replaceState: 'active',
+  });
+
+  const pending = computed(() => store.pending);
+  const playState = computed(() => store.playState);
+  const replaceState = computed(() => store.replaceState);
+
+  const startTime = computed<CSSNumberish | number | null>({
+    get: () => store.startTime,
+    set(value) {
+      store.startTime = value;
+      if (animate.value)
+        animate.value.startTime = value;
+    },
+  });
+
+  const currentTime = computed<CSSNumberish | null>({
+    get: () => store.currentTime,
+    set(value) {
+      store.currentTime = value;
+      if (animate.value) {
+        animate.value.currentTime = value;
+        syncResume();
+      }
+    },
+  });
+
+  const timeline = computed<AnimationTimeline | null>({
+    get: () => store.timeline,
+    set(value) {
+      store.timeline = value;
+      if (animate.value)
+        animate.value.timeline = value;
+    },
+  });
+
+  const playbackRate = computed<number>({
+    get: () => store.playbackRate,
+    set(value) {
+      store.playbackRate = value;
+      if (animate.value)
+        animate.value.playbackRate = value;
+    },
+  });
+
+  function update(init?: boolean): void {
+    const el = unrefElement(target);
+    if (!isSupported.value || !el)
+      return;
+
+    if (!animate.value)
+      animate.value = (el as HTMLElement).animate(toValue(keyframes), animateOptions);
+
+    if (persist)
+      animate.value.persist();
+
+    if (initialPlaybackRate !== 1)
+      animate.value.playbackRate = initialPlaybackRate;
+
+    if (init && !immediate)
+      animate.value.pause();
+    else
+      syncResume();
+
+    onReady?.(animate.value);
+  }
+
+  function play(): void {
+    if (!animate.value) {
+      update();
+      return;
+    }
+
+    try {
+      animate.value.play();
+      syncResume();
+    }
+    catch (error) {
+      syncPause();
+      onError(error);
+    }
+  }
+
+  function pause(): void {
+    try {
+      animate.value?.pause();
+      syncPause();
+    }
+    catch (error) {
+      onError(error);
+    }
+  }
+
+  function reverse(): void {
+    if (!animate.value)
+      update();
+
+    try {
+      animate.value?.reverse();
+      syncResume();
+    }
+    catch (error) {
+      syncPause();
+      onError(error);
+    }
+  }
+
+  function finish(): void {
+    try {
+      animate.value?.finish();
+      syncPause();
+    }
+    catch (error) {
+      onError(error);
+    }
+  }
+
+  function cancel(): void {
+    try {
+      animate.value?.cancel();
+      syncPause();
+    }
+    catch (error) {
+      onError(error);
+    }
+  }
+
+  // Sync the reactive store from the live Animation on every frame. The loop is
+  // paused by default and only resumed while the animation is actually playing,
+  // so an idle (or finished) animation incurs zero per-frame cost.
+  const { resume: resumeRaf, pause: pauseRaf } = useRafFn(() => {
+    const a = animate.value;
+    if (!a)
+      return;
+
+    store.pending = a.pending;
+    store.playState = a.playState;
+    store.replaceState = a.replaceState;
+    store.startTime = a.startTime;
+    store.currentTime = a.currentTime;
+    store.timeline = a.timeline;
+    store.playbackRate = a.playbackRate;
+  }, { immediate: false, window });
+
+  function syncResume(): void {
+    if (isSupported.value)
+      resumeRaf();
+  }
+
+  function syncPause(): void {
+    // Defer the stop by one frame so the final state (e.g. 'finished') is captured
+    // before the loop halts.
+    if (isSupported.value && window)
+      window.requestAnimationFrame(pauseRaf);
+  }
+
+  watch(() => unrefElement(target), (el) => {
+    if (el)
+      update(true);
+    else
+      animate.value = undefined;
+  });
+
+  watch(() => keyframes, (value) => {
+    if (!animate.value)
+      return;
+
+    update();
+
+    const el = unrefElement(target);
+    if (el && typeof KeyframeEffect !== 'undefined')
+      animate.value.effect = new KeyframeEffect(el as HTMLElement, toValue(value), animateOptions);
+  }, { deep: true });
+
+  const listenerOptions = { passive: true };
+  useEventListener(animate, ['cancel', 'finish', 'remove'], syncPause, listenerOptions);
+  useEventListener(animate, 'finish', () => {
+    if (commitStyles)
+      animate.value?.commitStyles();
+  }, listenerOptions);
+
+  tryOnMounted(() => update(true), { sync: false });
+
+  tryOnScopeDispose(cancel);
+
+  return {
+    isSupported,
+    animate,
+
+    play,
+    pause,
+    reverse,
+    finish,
+    cancel,
+
+    pending,
+    playState,
+    replaceState,
+    startTime,
+    currentTime,
+    timeline,
+    playbackRate,
+  };
+}
diff --git a/vue/toolkit/src/composables/animation/useCountdown/demo.vue b/vue/toolkit/src/composables/animation/useCountdown/demo.vue
new file mode 100644
index 0000000..652bc45
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useCountdown/demo.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useCountdown } from './index';
+
+const initial = ref(60);
+const justFinished = ref(false);
+
+const { remaining, isActive, start, stop, pause, resume } = useCountdown(initial, {
+  onComplete: () => {
+    justFinished.value = true;
+  },
+  onTick: () => {
+    justFinished.value = false;
+  },
+});
+
+const minutes = computed(() => String(Math.floor(remaining.value / 60)).padStart(2, '0'));
+const seconds = computed(() => String(remaining.value % 60).padStart(2, '0'));
+
+const progress = computed(() =>
+  initial.value > 0 ? Math.max(0, Math.min(1, remaining.value / initial.value)) : 0,
+);
+
+const presets = [30, 60, 300] as const;
+
+function setPreset(value: number) {
+  initial.value = value;
+  start(value);
+}
+
+function toggle() {
+  if (isActive.value)
+    pause();
+  else
+    resume();
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-5 text-center">
+      <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Time remaining
+      </div>
+      <div
+        class="mt-2 font-mono text-5xl font-bold tabular-nums transition-colors"
+        :class="justFinished
+          ? 'text-emerald-600 dark:text-emerald-400'
+          : remaining <= 10 && remaining > 0
+            ? 'text-amber-600 dark:text-amber-400'
+            : 'text-(--fg)'"
+      >
+        {{ minutes }}:{{ seconds }}
+      </div>
+
+      <div class="mt-4 h-1.5 w-full overflow-hidden rounded-full bg-(--bg-inset)">
+        <div
+          class="h-full rounded-full bg-(--accent) transition-[width] duration-300 ease-linear"
+          :style="{ width: `${progress * 100}%` }"
+        />
+      </div>
+
+      <div class="mt-3 flex items-center justify-center gap-2 text-xs text-(--fg-subtle)">
+        <span
+          class="inline-block size-2 rounded-full transition"
+          :class="isActive ? 'bg-emerald-500' : justFinished ? 'bg-sky-500' : 'bg-(--border-strong)'"
+        />
+        {{ justFinished ? 'Completed' : isActive ? 'Counting down' : 'Paused' }}
+      </div>
+    </div>
+
+    <div class="grid grid-cols-3 gap-2">
+      <button
+        v-for="preset in presets"
+        :key="preset"
+        class="rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium tabular-nums text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="setPreset(preset)"
+      >
+        {{ preset < 60 ? `${preset}s` : `${preset / 60}m` }}
+      </button>
+    </div>
+
+    <div class="flex items-center gap-2">
+      <button
+        class="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="remaining === 0 && isActive"
+        @click="toggle"
+      >
+        {{ isActive ? 'Pause' : 'Resume' }}
+      </button>
+      <button
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="start()"
+      >
+        Restart
+      </button>
+      <button
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="stop"
+      >
+        Stop
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/animation/useCountdown/index.test.ts b/vue/toolkit/src/composables/animation/useCountdown/index.test.ts
new file mode 100644
index 0000000..1461f81
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useCountdown/index.test.ts
@@ -0,0 +1,187 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, isReadonly, ref } from 'vue';
+import { useCountdown } from '.';
+
+describe(useCountdown, () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+
+  it('does not start until start/resume is called (immediate defaults to false)', () => {
+    const { remaining } = useCountdown(5);
+
+    expect(remaining.value).toBe(5);
+    vi.advanceTimersByTime(3000);
+    expect(remaining.value).toBe(5);
+  });
+
+  it('decrements remaining on each tick', () => {
+    const { remaining, start } = useCountdown(5);
+
+    start();
+    expect(remaining.value).toBe(5);
+    vi.advanceTimersByTime(1000);
+    expect(remaining.value).toBe(4);
+    vi.advanceTimersByTime(2000);
+    expect(remaining.value).toBe(2);
+  });
+
+  it('starts immediately when immediate is true', () => {
+    const { remaining } = useCountdown(3, { immediate: true });
+
+    vi.advanceTimersByTime(1000);
+    expect(remaining.value).toBe(2);
+  });
+
+  it('exposes a read-only remaining ref', () => {
+    const { remaining } = useCountdown(5);
+    expect(isReadonly(remaining)).toBeTruthy();
+  });
+
+  it('stops at zero and never goes negative', () => {
+    const { remaining, start } = useCountdown(2);
+
+    start();
+    vi.advanceTimersByTime(5000);
+    expect(remaining.value).toBe(0);
+  });
+
+  it('calls onComplete exactly once when reaching zero', () => {
+    const onComplete = vi.fn();
+    const { start } = useCountdown(2, { onComplete });
+
+    start();
+    vi.advanceTimersByTime(2000);
+    expect(onComplete).toHaveBeenCalledTimes(1);
+
+    vi.advanceTimersByTime(2000);
+    expect(onComplete).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onTick with the current remaining value', () => {
+    const onTick = vi.fn();
+    const { start } = useCountdown(3, { onTick });
+
+    start();
+    vi.advanceTimersByTime(1000);
+    expect(onTick).toHaveBeenLastCalledWith(2);
+    vi.advanceTimersByTime(1000);
+    expect(onTick).toHaveBeenLastCalledWith(1);
+  });
+
+  it('pauses and resumes from where it left off', () => {
+    const { remaining, start, pause, resume, isActive } = useCountdown(10);
+
+    start();
+    vi.advanceTimersByTime(2000);
+    expect(remaining.value).toBe(8);
+
+    pause();
+    expect(isActive.value).toBeFalsy();
+    vi.advanceTimersByTime(3000);
+    expect(remaining.value).toBe(8);
+
+    resume();
+    expect(isActive.value).toBeTruthy();
+    vi.advanceTimersByTime(2000);
+    expect(remaining.value).toBe(6);
+  });
+
+  it('does not resume when remaining is already zero', () => {
+    const { remaining, start, resume, isActive } = useCountdown(1);
+
+    start();
+    vi.advanceTimersByTime(1000);
+    expect(remaining.value).toBe(0);
+    expect(isActive.value).toBeFalsy();
+
+    resume();
+    expect(isActive.value).toBeFalsy();
+  });
+
+  it('stop pauses and resets remaining to the initial value', () => {
+    const { remaining, start, stop, isActive } = useCountdown(5);
+
+    start();
+    vi.advanceTimersByTime(2000);
+    expect(remaining.value).toBe(3);
+
+    stop();
+    expect(isActive.value).toBeFalsy();
+    expect(remaining.value).toBe(5);
+  });
+
+  it('reset restores the initial value without changing the running state', () => {
+    const { remaining, start, reset, isActive } = useCountdown(5);
+
+    start();
+    vi.advanceTimersByTime(2000);
+    expect(remaining.value).toBe(3);
+
+    reset();
+    expect(remaining.value).toBe(5);
+    expect(isActive.value).toBeTruthy();
+
+    vi.advanceTimersByTime(1000);
+    expect(remaining.value).toBe(4);
+  });
+
+  it('reset and start accept an explicit countdown override', () => {
+    const { remaining, start, reset } = useCountdown(5);
+
+    reset(8);
+    expect(remaining.value).toBe(8);
+
+    start(3);
+    expect(remaining.value).toBe(3);
+    vi.advanceTimersByTime(1000);
+    expect(remaining.value).toBe(2);
+  });
+
+  it('honours a custom tick interval', () => {
+    const { remaining, start } = useCountdown(5, { interval: 500 });
+
+    start();
+    vi.advanceTimersByTime(500);
+    expect(remaining.value).toBe(4);
+    vi.advanceTimersByTime(1000);
+    expect(remaining.value).toBe(2);
+  });
+
+  it('resolves a reactive initial countdown', () => {
+    const initial = ref(4);
+    const { remaining, reset } = useCountdown(initial);
+
+    expect(remaining.value).toBe(4);
+
+    initial.value = 9;
+    reset();
+    expect(remaining.value).toBe(9);
+  });
+
+  it('toggle flips the active state', () => {
+    const { start, toggle, isActive } = useCountdown(10);
+
+    start();
+    expect(isActive.value).toBeTruthy();
+    toggle();
+    expect(isActive.value).toBeFalsy();
+    toggle();
+    expect(isActive.value).toBeTruthy();
+  });
+
+  it('cleans up the interval when the scope is disposed', () => {
+    const scope = effectScope();
+    let api: ReturnType<typeof useCountdown> | undefined;
+
+    scope.run(() => {
+      api = useCountdown(10, { immediate: true });
+    });
+
+    vi.advanceTimersByTime(2000);
+    expect(api!.remaining.value).toBe(8);
+
+    scope.stop();
+    vi.advanceTimersByTime(5000);
+    expect(api!.remaining.value).toBe(8);
+  });
+});
diff --git a/vue/toolkit/src/composables/animation/useCountdown/index.ts b/vue/toolkit/src/composables/animation/useCountdown/index.ts
new file mode 100644
index 0000000..0c5259d
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useCountdown/index.ts
@@ -0,0 +1,147 @@
+import { shallowReadonly, shallowRef, toValue } from 'vue';
+import type { MaybeRefOrGetter, ShallowRef } from 'vue';
+import type { ResumableActions } from '@/types';
+import { useIntervalFn } from '@/composables/animation/useIntervalFn';
+import type { UseIntervalFnReturn } from '@/composables/animation/useIntervalFn';
+
+export interface UseCountdownOptions {
+  /**
+   * Tick interval in milliseconds. Each tick decrements `remaining` by one.
+   *
+   * @default 1000
+   */
+  interval?: MaybeRefOrGetter<number>;
+
+  /**
+   * Start the countdown immediately when the composable is created
+   *
+   * @default false
+   */
+  immediate?: boolean;
+
+  /**
+   * Callback invoked on every tick with the current remaining value
+   */
+  onTick?: (remaining: number) => void;
+
+  /**
+   * Callback invoked once when the countdown reaches zero
+   */
+  onComplete?: () => void;
+}
+
+export interface UseCountdownReturn extends ResumableActions {
+  /**
+   * The remaining seconds, read-only (use `reset`/`start` to change it)
+   */
+  remaining: Readonly<ShallowRef<number>>;
+
+  /**
+   * Whether the countdown is currently running
+   */
+  isActive: UseIntervalFnReturn['isActive'];
+
+  /**
+   * Reset `remaining` (defaults to the initial value) without changing the
+   * running state
+   */
+  reset: (countdown?: MaybeRefOrGetter<number>) => void;
+
+  /**
+   * Pause the countdown and reset `remaining` to the initial value
+   */
+  stop: () => void;
+
+  /**
+   * Reset `remaining` (defaults to the initial value) and start counting down
+   */
+  start: (countdown?: MaybeRefOrGetter<number>) => void;
+}
+
+/**
+ * @name useCountdown
+ * @category Animation
+ * @description Reactive countdown timer exposing the remaining seconds plus
+ * `start`/`stop`/`pause`/`resume`/`reset` controls and `onTick`/`onComplete`
+ * callbacks. Built on `useIntervalFn`, so it is SSR-safe and cleans up on scope
+ * dispose.
+ *
+ * @param {MaybeRefOrGetter<number>} initialCountdown The starting value, in seconds (can be reactive)
+ * @param {UseCountdownOptions} [options={}] Options
+ * @returns {UseCountdownReturn} The reactive remaining value and countdown controls
+ *
+ * @example
+ * const { remaining, start, pause, resume, stop } = useCountdown(60);
+ * start();
+ *
+ * @example
+ * useCountdown(10, {
+ *   immediate: true,
+ *   onTick: (n) => console.log(n),
+ *   onComplete: () => console.log('done'),
+ * });
+ *
+ * @since 0.0.15
+ */
+export function useCountdown(
+  initialCountdown: MaybeRefOrGetter<number>,
+  options: UseCountdownOptions = {},
+): UseCountdownReturn {
+  const {
+    interval = 1000,
+    immediate = false,
+    onTick,
+    onComplete,
+  } = options;
+
+  const remaining = shallowRef(toValue(initialCountdown));
+
+  const controls = useIntervalFn(() => {
+    const next = remaining.value - 1;
+    remaining.value = next < 0 ? 0 : next;
+
+    onTick?.(remaining.value);
+
+    if (remaining.value <= 0) {
+      controls.pause();
+      onComplete?.();
+    }
+  }, interval, { immediate });
+
+  const reset = (countdown?: MaybeRefOrGetter<number>): void => {
+    remaining.value = toValue(countdown) ?? toValue(initialCountdown);
+  };
+
+  const stop = (): void => {
+    controls.pause();
+    reset();
+  };
+
+  const resume = (): void => {
+    if (!controls.isActive.value && remaining.value > 0)
+      controls.resume();
+  };
+
+  const start = (countdown?: MaybeRefOrGetter<number>): void => {
+    reset(countdown);
+    controls.resume();
+  };
+
+  const toggle = (): void => {
+    if (controls.isActive.value)
+      controls.pause();
+    else
+      resume();
+  };
+
+  return {
+    remaining: shallowReadonly(remaining),
+    isActive: controls.isActive,
+    reset,
+    stop,
+    start,
+    pause: controls.pause,
+    resume,
+    toggle,
+  };
+}
diff --git a/vue/toolkit/src/composables/animation/useDateFormat/demo.vue b/vue/toolkit/src/composables/animation/useDateFormat/demo.vue
new file mode 100644
index 0000000..54a5dcd
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useDateFormat/demo.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useDateFormat } from './index';
+
+// A fixed, real-looking moment so the demo is deterministic across renders.
+const date = ref('2026-06-08T14:37:09');
+const format = ref('dddd, MMMM Do YYYY — hh:mm:ss a');
+const locale = ref('en-US');
+
+const formatted = useDateFormat(date, format, { locales: locale });
+
+const formats = [
+  'YYYY-MM-DD HH:mm:ss',
+  'dddd, MMMM Do YYYY — hh:mm:ss a',
+  'ddd D MMM \'YY',
+  'h:mm A',
+] as const;
+
+const locales = [
+  { value: 'en-US', label: 'English' },
+  { value: 'fr-FR', label: 'Français' },
+  { value: 'de-DE', label: 'Deutsch' },
+  { value: 'ja-JP', label: '日本語' },
+] as const;
+
+const isValid = computed(() => formatted.value !== 'Invalid Date');
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Formatted output
+      </div>
+      <div
+        class="mt-2 font-mono text-lg font-semibold tabular-nums"
+        :class="isValid ? 'text-(--fg)' : 'text-red-600 dark:text-red-400'"
+      >
+        {{ formatted }}
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-1.5">
+      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Date input
+      </label>
+      <input
+        v-model="date"
+        type="datetime-local"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+    </div>
+
+    <div class="flex flex-col gap-1.5">
+      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Format token string
+      </label>
+      <input
+        v-model="format"
+        type="text"
+        spellcheck="false"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 font-mono text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+      <div class="flex flex-wrap gap-1.5 pt-1">
+        <button
+          v-for="f in formats"
+          :key="f"
+          class="rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 font-mono text-xs text-(--fg-muted) transition hover:bg-(--bg-elevated) hover:text-(--fg) active:scale-[0.98] cursor-pointer"
+          :class="{ 'border-(--accent) text-(--accent-text)': format === f }"
+          @click="format = f"
+        >
+          {{ f }}
+        </button>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-1.5">
+      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Locale
+      </label>
+      <div class="flex flex-wrap gap-2">
+        <button
+          v-for="loc in locales"
+          :key="loc.value"
+          class="rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+          :class="locale === loc.value
+            ? 'border-transparent bg-(--accent) text-(--accent-fg)'
+            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+          @click="locale = loc.value"
+        >
+          {{ loc.label }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/animation/useDateFormat/index.test.ts b/vue/toolkit/src/composables/animation/useDateFormat/index.test.ts
new file mode 100644
index 0000000..0e8c371
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useDateFormat/index.test.ts
@@ -0,0 +1,157 @@
+import { describe, expect, it } from 'vitest';
+import { effectScope, ref } from 'vue';
+import { formatDate, normalizeDate, useDateFormat } from '.';
+
+// A fixed local date: 2024-03-09 18:07:05.042 (a Saturday).
+function fixture(): Date {
+  return new Date(2024, 2, 9, 18, 7, 5, 42);
+}
+
+describe(useDateFormat, () => {
+  it('defaults to HH:mm:ss', () => {
+    const formatted = useDateFormat(fixture());
+    expect(formatted.value).toBe('18:07:05');
+  });
+
+  it('formats year/month/day tokens', () => {
+    const date = fixture();
+    expect(useDateFormat(date, 'YYYY-MM-DD').value).toBe('2024-03-09');
+    expect(useDateFormat(date, 'YY/M/D').value).toBe('24/3/9');
+  });
+
+  it('formats time tokens including milliseconds and 12-hour', () => {
+    const date = fixture();
+    expect(useDateFormat(date, 'HH:mm:ss.SSS').value).toBe('18:07:05.042');
+    expect(useDateFormat(date, 'h:mm').value).toBe('6:07');
+    expect(useDateFormat(date, 'hh').value).toBe('06');
+  });
+
+  it('handles 12 -> 12 and 0 -> 12 for the h token', () => {
+    expect(useDateFormat(new Date(2024, 0, 1, 0, 0, 0), 'h A').value).toBe('12 AM');
+    expect(useDateFormat(new Date(2024, 0, 1, 12, 0, 0), 'h A').value).toBe('12 PM');
+  });
+
+  it('formats the meridiem variants', () => {
+    const pm = fixture();
+    expect(useDateFormat(pm, 'A').value).toBe('PM');
+    expect(useDateFormat(pm, 'AA').value).toBe('P.M.');
+    expect(useDateFormat(pm, 'a').value).toBe('pm');
+    expect(useDateFormat(pm, 'aa').value).toBe('p.m.');
+
+    const am = new Date(2024, 0, 1, 6, 0, 0);
+    expect(useDateFormat(am, 'A').value).toBe('AM');
+  });
+
+  it('formats ordinal tokens', () => {
+    const date = new Date(2024, 0, 1, 3, 0, 0); // Jan 1st, 3 o'clock
+    expect(useDateFormat(date, 'Do').value).toBe('1st');
+    expect(useDateFormat(date, 'Mo').value).toBe('1st');
+    expect(useDateFormat(new Date(2024, 1, 22), 'Do').value).toBe('22nd');
+    expect(useDateFormat(new Date(2024, 1, 23), 'Do').value).toBe('23rd');
+    expect(useDateFormat(new Date(2024, 1, 11), 'Do').value).toBe('11th');
+  });
+
+  it('formats localized weekday and month with the locales option', () => {
+    const date = fixture(); // a Saturday in March
+    expect(useDateFormat(date, 'dddd', { locales: 'en-US' }).value).toBe('Saturday');
+    expect(useDateFormat(date, 'ddd', { locales: 'en-US' }).value).toBe('Sat');
+    expect(useDateFormat(date, 'MMMM', { locales: 'en-US' }).value).toBe('March');
+    expect(useDateFormat(date, 'MMM', { locales: 'en-US' }).value).toBe('Mar');
+    expect(useDateFormat(date, 'd', { locales: 'en-US' }).value).toBe('6'); // Saturday
+  });
+
+  it('uses a custom meridiem function', () => {
+    const date = fixture();
+    const formatted = useDateFormat(date, 'h:mm a', {
+      customMeridiem: hours => (hours < 12 ? 'morning' : 'evening'),
+    });
+    expect(formatted.value).toBe('6:07 evening');
+  });
+
+  it('emits [literal] escapes verbatim', () => {
+    const date = fixture();
+    expect(useDateFormat(date, '[Year:] YYYY').value).toBe('Year: 2024');
+    expect(useDateFormat(date, '[YYYY] YYYY').value).toBe('YYYY 2024');
+  });
+
+  it('is reactive to the date, format, and locale', () => {
+    const date = ref<Date>(fixture());
+    const format = ref('YYYY');
+    const locale = ref('en-US');
+    const formatted = useDateFormat(date, format, { locales: locale });
+
+    expect(formatted.value).toBe('2024');
+
+    date.value = new Date(2025, 0, 1);
+    expect(formatted.value).toBe('2025');
+
+    format.value = 'MMMM';
+    expect(formatted.value).toBe('January');
+
+    locale.value = 'fr-FR';
+    expect(formatted.value).toBe('janvier');
+  });
+
+  it('accepts a numeric timestamp and a getter', () => {
+    const date = fixture();
+    expect(useDateFormat(date.getTime(), 'YYYY-MM-DD').value).toBe('2024-03-09');
+    expect(useDateFormat(() => date, 'YYYY').value).toBe('2024');
+  });
+
+  it('parses loose date strings without a trailing Z', () => {
+    expect(useDateFormat('2024-03-09', 'YYYY-MM-DD').value).toBe('2024-03-09');
+    expect(useDateFormat('2024-3', 'YYYY-MM-DD').value).toBe('2024-03-01');
+    expect(useDateFormat('2024-03-09 18:07:05', 'HH:mm:ss').value).toBe('18:07:05');
+  });
+
+  it('handles null/undefined by resolving to now without throwing', () => {
+    expect(useDateFormat(undefined, 'YYYY').value).toMatch(/^\d{4}$/);
+    expect(useDateFormat(null, 'YYYY').value).toMatch(/^\d{4}$/);
+  });
+
+  it('returns "Invalid Date" for unparseable input instead of NaN tokens', () => {
+    expect(useDateFormat('not a date', 'YYYY-MM-DD').value).toBe('Invalid Date');
+    expect(useDateFormat(Number.NaN, 'HH:mm:ss').value).toBe('Invalid Date');
+  });
+
+  it('constructs inside an effect scope without throwing (SSR-safe, no global access)', () => {
+    const scope = effectScope();
+    let formatted: ReturnType<typeof useDateFormat> | undefined;
+
+    scope.run(() => {
+      formatted = useDateFormat(fixture(), 'YYYY-MM-DD');
+    });
+
+    expect(formatted?.value).toBe('2024-03-09');
+    scope.stop();
+  });
+});
+
+describe(formatDate, () => {
+  it('formats a date one-shot', () => {
+    expect(formatDate(fixture(), 'YYYY/MM/DD')).toBe('2024/03/09');
+  });
+
+  it('returns "Invalid Date" for an invalid date', () => {
+    expect(formatDate(new Date(Number.NaN), 'YYYY')).toBe('Invalid Date');
+  });
+});
+
+describe(normalizeDate, () => {
+  it('returns a fresh Date for a Date input', () => {
+    const date = fixture();
+    const normalized = normalizeDate(date);
+    expect(normalized).not.toBe(date);
+    expect(normalized.getTime()).toBe(date.getTime());
+  });
+
+  it('resolves null/undefined to a valid current Date', () => {
+    expect(Number.isNaN(normalizeDate(undefined).getTime())).toBeFalsy();
+    expect(Number.isNaN(normalizeDate(null).getTime())).toBeFalsy();
+  });
+
+  it('parses a numeric timestamp', () => {
+    const date = fixture();
+    expect(normalizeDate(date.getTime()).getTime()).toBe(date.getTime());
+  });
+});
diff --git a/vue/toolkit/src/composables/animation/useDateFormat/index.ts b/vue/toolkit/src/composables/animation/useDateFormat/index.ts
new file mode 100644
index 0000000..bd8938b
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useDateFormat/index.ts
@@ -0,0 +1,217 @@
+import { computed, toValue } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+import { isDate, isString } from '@robonen/stdlib';
+
+/**
+ * Accepted input for {@link useDateFormat}: a `Date`, a millisecond timestamp,
+ * a parseable date string, or `null`/`undefined` (resolves to "now").
+ */
+export type DateLike = Date | number | string | null | undefined;
+
+/**
+ * Signature for a custom meridiem (AM/PM) formatter.
+ *
+ * @param hours The hour of the day, 0-23
+ * @param minutes The minute of the hour, 0-59
+ * @param isLowercase Whether the token requested a lowercase form (`a`/`aa`)
+ * @param hasPeriod Whether the token requested period separators (`AA`/`aa`)
+ */
+export type CustomMeridiem
+  = (hours: number, minutes: number, isLowercase?: boolean, hasPeriod?: boolean) => string;
+
+export interface UseDateFormatOptions {
+  /**
+   * The locale(s) used for the `dd`/`ddd`/`dddd`/`MMM`/`MMMM`/`z` tokens.
+   *
+   * Accepts a reactive value (ref or getter); the output recomputes when it
+   * changes.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument
+   */
+  locales?: MaybeRefOrGetter<Intl.LocalesArgument>;
+
+  /**
+   * A custom function controlling how the meridiem (`A`/`AA`/`a`/`aa`) is
+   * rendered.
+   */
+  customMeridiem?: CustomMeridiem;
+}
+
+/**
+ * Reactive formatted date string.
+ */
+export type UseDateFormatReturn = ComputedRef<string>;
+
+// Matches a token, or a `[literal]` escape that is emitted verbatim.
+const REGEX_FORMAT
+  = /* #__PURE__ */ /[YMDHhms]o|\[([^\]]+)\]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a{1,2}|A{1,2}|m{1,2}|s{1,2}|z{1,4}|SSS/g;
+
+// Loose ISO-ish parser used for date strings without a trailing `Z`. The optional
+// separators make adjacent digit groups technically "misleading" to the linter,
+// but this is the deliberate lenient dayjs parser (accepts `2024-01-01` and
+// `20240101`); JS lacks possessive quantifiers to disambiguate it.
+// eslint-disable-next-line regexp/no-misleading-capturing-group
+const REGEX_PARSE = /* #__PURE__ */ /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[T\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/i;
+
+const ORDINAL_SUFFIXES = ['th', 'st', 'nd', 'rd'] as const;
+
+function defaultMeridiem(
+  hours: number,
+  _minutes: number,
+  isLowercase?: boolean,
+  hasPeriod?: boolean,
+): string {
+  let m = hours < 12 ? 'AM' : 'PM';
+  if (hasPeriod) m = `${m[0]}.${m[1]}.`;
+  return isLowercase ? m.toLowerCase() : m;
+}
+
+function formatOrdinal(num: number): string {
+  const v = num % 100;
+  return num + (ORDINAL_SUFFIXES[(v - 20) % 10] || ORDINAL_SUFFIXES[v] || ORDINAL_SUFFIXES[0]);
+}
+
+/**
+ * Coerce a {@link DateLike} into a `Date`. `null`/`undefined` become the
+ * current time; a non-UTC string is parsed leniently so partial dates such as
+ * `'2024-3'` are accepted.
+ *
+ * @param date The value to coerce
+ * @returns A `Date` instance (possibly `Invalid Date`)
+ */
+export function normalizeDate(date: DateLike): Date {
+  if (date === null || date === undefined) return new Date();
+  if (isDate(date)) return new Date(date.getTime());
+  if (isString(date) && !/z$/i.test(date)) {
+    const d = REGEX_PARSE.exec(date);
+    if (d) {
+      const month = d[2] ? Number(d[2]) - 1 : 0;
+      const ms = (d[7] || '0').slice(0, 3);
+      return new Date(
+        Number(d[1]),
+        month,
+        Number(d[3]) || 1,
+        Number(d[4]) || 0,
+        Number(d[5]) || 0,
+        Number(d[6]) || 0,
+        Number(ms),
+      );
+    }
+  }
+
+  return new Date(date);
+}
+
+/**
+ * Format a `Date` against a token string. Exposed for one-shot, non-reactive
+ * formatting; {@link useDateFormat} wraps this in a `computed`.
+ *
+ * @param date The date to format
+ * @param formatStr The combination of tokens (e.g. `'YYYY-MM-DD HH:mm:ss'`)
+ * @param options Locale and meridiem options
+ * @returns The formatted string
+ */
+export function formatDate(
+  date: Date,
+  formatStr: string,
+  options: UseDateFormatOptions = {},
+): string {
+  // Invalid dates round-trip to the literal "Invalid Date" rather than
+  // emitting `NaN` for every numeric token.
+  if (Number.isNaN(date.getTime())) return 'Invalid Date';
+
+  const years = date.getFullYear();
+  const month = date.getMonth();
+  const days = date.getDate();
+  const hours = date.getHours();
+  const minutes = date.getMinutes();
+  const seconds = date.getSeconds();
+  const milliseconds = date.getMilliseconds();
+  const day = date.getDay();
+  const hour12 = hours % 12 || 12;
+
+  const locales = toValue(options.locales);
+  const meridiem = options.customMeridiem ?? defaultMeridiem;
+  // The timeZoneName lands after the date in the localized string; grab it.
+  const offsetName = (style: 'shortOffset' | 'longOffset'): string =>
+    date.toLocaleDateString(locales, { timeZoneName: style }).split(' ')[1] ?? '';
+
+  const matches: Record<string, () => string | number> = {
+    Yo: () => formatOrdinal(years),
+    YY: () => String(years).slice(-2),
+    YYYY: () => years,
+    M: () => month + 1,
+    Mo: () => formatOrdinal(month + 1),
+    MM: () => String(month + 1).padStart(2, '0'),
+    MMM: () => date.toLocaleDateString(locales, { month: 'short' }),
+    MMMM: () => date.toLocaleDateString(locales, { month: 'long' }),
+    D: () => String(days),
+    Do: () => formatOrdinal(days),
+    DD: () => String(days).padStart(2, '0'),
+    H: () => String(hours),
+    Ho: () => formatOrdinal(hours),
+    HH: () => String(hours).padStart(2, '0'),
+    h: () => String(hour12),
+    ho: () => formatOrdinal(hour12),
+    hh: () => String(hour12).padStart(2, '0'),
+    m: () => String(minutes),
+    mo: () => formatOrdinal(minutes),
+    mm: () => String(minutes).padStart(2, '0'),
+    s: () => String(seconds),
+    so: () => formatOrdinal(seconds),
+    ss: () => String(seconds).padStart(2, '0'),
+    SSS: () => String(milliseconds).padStart(3, '0'),
+    d: () => day,
+    dd: () => date.toLocaleDateString(locales, { weekday: 'narrow' }),
+    ddd: () => date.toLocaleDateString(locales, { weekday: 'short' }),
+    dddd: () => date.toLocaleDateString(locales, { weekday: 'long' }),
+    A: () => meridiem(hours, minutes),
+    AA: () => meridiem(hours, minutes, false, true),
+    a: () => meridiem(hours, minutes, true),
+    aa: () => meridiem(hours, minutes, true, true),
+    z: () => offsetName('shortOffset'),
+    zz: () => offsetName('shortOffset'),
+    zzz: () => offsetName('shortOffset'),
+    zzzz: () => offsetName('longOffset'),
+  };
+
+  return formatStr.replaceAll(REGEX_FORMAT, (match, literal) =>
+    literal ?? String(matches[match]?.() ?? match),
+  );
+}
+
+/**
+ * @name useDateFormat
+ * @category Animation
+ * @description Reactively format a `Date`, timestamp, or date string against a
+ * token string (`YYYY MM DD HH mm ss SSS dddd A` etc.). Recomputes when the
+ * date, format, or locale changes.
+ *
+ * @param {MaybeRefOrGetter<DateLike>} date The date to format
+ * @param {MaybeRefOrGetter<string>} [formatStr='HH:mm:ss'] The token string
+ * @param {UseDateFormatOptions} [options={}] Locale and meridiem options
+ * @returns {ComputedRef<string>} The reactive formatted string
+ *
+ * @example
+ * const formatted = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss');
+ *
+ * @example
+ * // Localized weekday + month, reactive locale
+ * const locale = ref('fr-FR');
+ * const label = useDateFormat(date, 'dddd, MMMM D', { locales: locale });
+ *
+ * @example
+ * // Custom meridiem
+ * const t = useDateFormat(date, 'hh:mm a', {
+ *   customMeridiem: (h) => (h < 12 ? 'morning' : 'evening'),
+ * });
+ *
+ * @since 0.0.15
+ */
+export function useDateFormat(
+  date: MaybeRefOrGetter<DateLike>,
+  formatStr: MaybeRefOrGetter<string> = 'HH:mm:ss',
+  options: UseDateFormatOptions = {},
+): UseDateFormatReturn {
+  return computed(() => formatDate(normalizeDate(toValue(date)), toValue(formatStr), options));
+}
diff --git a/vue/toolkit/src/composables/animation/useInterval/demo.vue b/vue/toolkit/src/composables/animation/useInterval/demo.vue
new file mode 100644
index 0000000..a28d92a
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useInterval/demo.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useInterval } from './index';
+
+const interval = ref(1000);
+
+const { counter, isActive, pause, resume, reset } = useInterval(interval, {
+  controls: true,
+  immediate: true,
+});
+
+// A simple visual pulse driven purely off the reactive tick counter.
+const beats = computed(() => Array.from({ length: 8 }, (_, i) => i === counter.value % 8));
+
+const speeds = [
+  { value: 2000, label: 'Slow' },
+  { value: 1000, label: 'Normal' },
+  { value: 400, label: 'Fast' },
+] as const;
+
+function toggle() {
+  if (isActive.value)
+    pause();
+  else
+    resume();
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-5 text-center">
+      <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Ticks elapsed
+      </div>
+      <div class="mt-2 font-mono text-5xl font-bold tabular-nums text-(--fg)">
+        {{ counter }}
+      </div>
+
+      <div class="mt-4 flex items-center justify-center gap-1.5">
+        <span
+          v-for="(on, i) in beats"
+          :key="i"
+          class="size-2.5 rounded-full transition-colors duration-200"
+          :class="on ? 'bg-(--accent)' : 'bg-(--bg-inset)'"
+        />
+      </div>
+
+      <div class="mt-4 flex items-center justify-center gap-2 text-xs text-(--fg-subtle)">
+        <span
+          class="inline-block size-2 rounded-full transition"
+          :class="isActive ? 'bg-emerald-500' : 'bg-(--border-strong)'"
+        />
+        {{ isActive ? `Ticking every ${interval}ms` : 'Paused' }}
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-1.5">
+      <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Interval speed
+      </div>
+      <div class="flex gap-2">
+        <button
+          v-for="speed in speeds"
+          :key="speed.value"
+          class="flex-1 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+          :class="interval === speed.value
+            ? 'border-transparent bg-(--accent) text-(--accent-fg)'
+            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+          @click="interval = speed.value"
+        >
+          {{ speed.label }}
+        </button>
+      </div>
+    </div>
+
+    <div class="flex items-center gap-2">
+      <button
+        class="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="toggle"
+      >
+        {{ isActive ? 'Pause' : 'Resume' }}
+      </button>
+      <button
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="counter === 0"
+        @click="reset"
+      >
+        Reset
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/animation/useInterval/index.test.ts b/vue/toolkit/src/composables/animation/useInterval/index.test.ts
new file mode 100644
index 0000000..0c483c9
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useInterval/index.test.ts
@@ -0,0 +1,108 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { isReadonly } from 'vue';
+import { useInterval } from '.';
+
+describe(useInterval, () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+
+  it('increments the counter on every tick', () => {
+    const counter = useInterval(100);
+
+    expect(counter.value).toBe(0);
+    vi.advanceTimersByTime(100);
+    expect(counter.value).toBe(1);
+    vi.advanceTimersByTime(200);
+    expect(counter.value).toBe(3);
+  });
+
+  it('returns a read-only counter', () => {
+    const counter = useInterval(100);
+    expect(isReadonly(counter)).toBeTruthy();
+  });
+
+  it('does not tick when immediate is false', () => {
+    const counter = useInterval(100, { immediate: false });
+    vi.advanceTimersByTime(300);
+    expect(counter.value).toBe(0);
+  });
+
+  it('exposes controls and reset when controls: true', () => {
+    const { counter, pause, reset } = useInterval(100, { controls: true });
+
+    vi.advanceTimersByTime(200);
+    expect(counter.value).toBe(2);
+
+    pause();
+    vi.advanceTimersByTime(200);
+    expect(counter.value).toBe(2);
+
+    reset();
+    expect(counter.value).toBe(0);
+  });
+
+  it('exposes a read-only counter in controls mode', () => {
+    const { counter } = useInterval(100, { controls: true });
+    expect(isReadonly(counter)).toBeTruthy();
+  });
+
+  it('exposes isActive reflecting the running state', () => {
+    const { isActive, pause, resume } = useInterval(100, { controls: true });
+
+    expect(isActive.value).toBeTruthy();
+
+    pause();
+    expect(isActive.value).toBeFalsy();
+
+    resume();
+    expect(isActive.value).toBeTruthy();
+  });
+
+  it('resumes after a pause and keeps counting from where it left off', () => {
+    const { counter, pause, resume } = useInterval(100, { controls: true });
+
+    vi.advanceTimersByTime(100);
+    expect(counter.value).toBe(1);
+
+    pause();
+    vi.advanceTimersByTime(300);
+    expect(counter.value).toBe(1);
+
+    resume();
+    vi.advanceTimersByTime(200);
+    expect(counter.value).toBe(3);
+  });
+
+  it('toggle flips the active state', () => {
+    const { isActive, toggle } = useInterval(100, { controls: true });
+
+    expect(isActive.value).toBeTruthy();
+    toggle();
+    expect(isActive.value).toBeFalsy();
+    toggle();
+    expect(isActive.value).toBeTruthy();
+  });
+
+  it('invokes the callback with the incremented counter value', () => {
+    const callback = vi.fn();
+    useInterval(100, { callback });
+
+    vi.advanceTimersByTime(100);
+    expect(callback).toHaveBeenCalledWith(1);
+    vi.advanceTimersByTime(100);
+    expect(callback).toHaveBeenLastCalledWith(2);
+  });
+
+  it('reset keeps the interval running', () => {
+    const { counter, reset } = useInterval(100, { controls: true });
+
+    vi.advanceTimersByTime(200);
+    expect(counter.value).toBe(2);
+
+    reset();
+    expect(counter.value).toBe(0);
+
+    vi.advanceTimersByTime(100);
+    expect(counter.value).toBe(1);
+  });
+});
diff --git a/vue/toolkit/src/composables/animation/useInterval/index.ts b/vue/toolkit/src/composables/animation/useInterval/index.ts
new file mode 100644
index 0000000..6c9ccf6
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useInterval/index.ts
@@ -0,0 +1,96 @@
+import { shallowReadonly, shallowRef } from 'vue';
+import type { MaybeRefOrGetter, ShallowRef } from 'vue';
+import type { ResumableActions } from '@/types';
+import { useIntervalFn } from '@/composables/animation/useIntervalFn';
+import type { UseIntervalFnReturn } from '@/composables/animation/useIntervalFn';
+
+export interface UseIntervalOptions<Controls extends boolean> {
+  /**
+   * Expose pause/resume controls alongside the counter
+   *
+   * @default false
+   */
+  controls?: Controls;
+
+  /**
+   * Start the interval immediately
+   *
+   * @default true
+   */
+  immediate?: boolean;
+
+  /**
+   * Callback invoked on every tick with the current counter value
+   */
+  callback?: (count: number) => void;
+}
+
+export interface UseIntervalControls extends ResumableActions {
+  /**
+   * The current counter value (read-only; use `reset` to set it back to 0)
+   */
+  counter: Readonly<ShallowRef<number>>;
+
+  /**
+   * Whether the interval is currently active
+   */
+  isActive: UseIntervalFnReturn['isActive'];
+
+  /**
+   * Reset the counter back to 0
+   */
+  reset: () => void;
+}
+
+export type UseIntervalReturn = Readonly<ShallowRef<number>> | UseIntervalControls;
+
+/**
+ * @name useInterval
+ * @category Animation
+ * @description Reactive counter that increments on every interval tick.
+ *
+ * @param {MaybeRefOrGetter<number>} [interval=1000] Interval in milliseconds (can be reactive)
+ * @param {UseIntervalOptions} [options={}] Options
+ * @returns {Readonly<ShallowRef<number>> | UseIntervalControls} The read-only counter, or controls when `controls: true`
+ *
+ * @example
+ * const counter = useInterval(1000);
+ *
+ * @example
+ * const { counter, isActive, pause, resume, reset } = useInterval(1000, { controls: true });
+ *
+ * @since 0.0.15
+ */
+export function useInterval(interval?: MaybeRefOrGetter<number>, options?: UseIntervalOptions<false>): Readonly<ShallowRef<number>>;
+export function useInterval(interval: MaybeRefOrGetter<number>, options: UseIntervalOptions<true>): UseIntervalControls;
+export function useInterval(
+  interval: MaybeRefOrGetter<number> = 1000,
+  options: UseIntervalOptions<boolean> = {},
+): UseIntervalReturn {
+  const {
+    controls = false,
+    immediate = true,
+    callback,
+  } = options;
+
+  const counter = shallowRef(0);
+  const reset = (): void => {
+    counter.value = 0;
+  };
+
+  const update = callback
+    ? () => callback(++counter.value)
+    : () => void counter.value++;
+
+  const intervalControls = useIntervalFn(update, interval, { immediate });
+
+  if (controls) {
+    return {
+      counter: shallowReadonly(counter),
+      reset,
+      ...intervalControls,
+    };
+  }
+
+  return shallowReadonly(counter);
+}
diff --git a/vue/toolkit/src/composables/animation/useIntervalFn/demo.vue b/vue/toolkit/src/composables/animation/useIntervalFn/demo.vue
new file mode 100644
index 0000000..bee5607
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useIntervalFn/demo.vue
@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useIntervalFn } from './index';
+
+const interval = ref(800);
+const logs = ref<{ id: number; time: string }[]>([]);
+let nextId = 0;
+
+const { isActive, pause, resume, toggle } = useIntervalFn(
+  () => {
+    logs.value.unshift({
+      id: nextId++,
+      time: new Date().toLocaleTimeString(undefined, { hour12: false }),
+    });
+    if (logs.value.length > 6)
+      logs.value.length = 6;
+  },
+  interval,
+  { immediate: false },
+);
+
+const speeds = [
+  { value: 1500, label: 'Slow' },
+  { value: 800, label: 'Normal' },
+  { value: 300, label: 'Fast' },
+] as const;
+
+function clear() {
+  logs.value = [];
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div>
+        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Interval callback
+        </div>
+        <div class="mt-1 flex items-center gap-2 text-sm text-(--fg-muted)">
+          <span
+            class="inline-block size-2 rounded-full transition"
+            :class="isActive ? 'bg-emerald-500' : 'bg-(--border-strong)'"
+          />
+          {{ isActive ? `Firing every ${interval}ms` : 'Stopped' }}
+        </div>
+      </div>
+      <button
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="toggle"
+      >
+        {{ isActive ? 'Pause' : 'Start' }}
+      </button>
+    </div>
+
+    <div class="flex flex-col gap-1.5">
+      <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Interval
+      </div>
+      <div class="flex gap-2">
+        <button
+          v-for="speed in speeds"
+          :key="speed.value"
+          class="flex-1 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+          :class="interval === speed.value
+            ? 'border-transparent bg-(--accent) text-(--accent-fg)'
+            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+          @click="interval = speed.value"
+        >
+          {{ speed.label }}
+        </button>
+      </div>
+      <p class="text-xs text-(--fg-subtle)">
+        Changing the interval while running restarts the timer with the new duration.
+      </p>
+    </div>
+
+    <div class="flex items-center justify-between">
+      <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Tick log
+      </div>
+      <button
+        class="text-xs text-(--accent-text) transition hover:underline disabled:cursor-not-allowed disabled:opacity-40 cursor-pointer"
+        :disabled="logs.length === 0"
+        @click="clear"
+      >
+        Clear
+      </button>
+    </div>
+
+    <div class="min-h-32 rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+      <p v-if="logs.length === 0" class="py-6 text-center text-sm text-(--fg-subtle)">
+        No ticks yet — press Start.
+      </p>
+      <ul v-else class="flex flex-col gap-1.5">
+        <li
+          v-for="log in logs"
+          :key="log.id"
+          class="flex items-center gap-2 font-mono text-sm tabular-nums text-(--fg)"
+        >
+          <span class="inline-block size-1.5 rounded-full bg-(--accent)" />
+          {{ log.time }}
+        </li>
+      </ul>
+    </div>
+
+    <div class="flex items-center gap-2">
+      <button
+        class="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="isActive"
+        @click="resume"
+      >
+        Resume
+      </button>
+      <button
+        class="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="!isActive"
+        @click="pause"
+      >
+        Pause
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/animation/useIntervalFn/index.test.ts b/vue/toolkit/src/composables/animation/useIntervalFn/index.test.ts
new file mode 100644
index 0000000..7f64965
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useIntervalFn/index.test.ts
@@ -0,0 +1,259 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { defineComponent, effectScope, nextTick, ref } from 'vue';
+import { mount } from '@vue/test-utils';
+import { useIntervalFn } from '.';
+
+beforeEach(() => {
+  vi.useFakeTimers();
+});
+
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+const ComponentStub = defineComponent({
+  props: {
+    callback: {
+      type: Function,
+      required: true,
+    },
+    interval: {
+      type: Number,
+      default: 1000,
+    },
+    options: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  setup(props) {
+    const result = useIntervalFn(props.callback as () => void, props.interval, props.options);
+    return { ...result };
+  },
+  template: '<div>{{ isActive }}</div>',
+});
+
+describe(useIntervalFn, () => {
+  it('starts immediately by default', () => {
+    const callback = vi.fn();
+    const wrapper = mount(ComponentStub, {
+      props: { callback },
+    });
+
+    expect(wrapper.text()).toBe('true');
+  });
+
+  it('does not start when immediate is false', () => {
+    const callback = vi.fn();
+    mount(ComponentStub, {
+      props: {
+        callback,
+        options: { immediate: false },
+      },
+    });
+
+    expect(callback).not.toHaveBeenCalled();
+    vi.advanceTimersByTime(5000);
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it('calls callback on each interval', () => {
+    const callback = vi.fn();
+    mount(ComponentStub, {
+      props: { callback, interval: 500 },
+    });
+
+    expect(callback).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(500);
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    vi.advanceTimersByTime(500);
+    expect(callback).toHaveBeenCalledTimes(2);
+
+    vi.advanceTimersByTime(1500);
+    expect(callback).toHaveBeenCalledTimes(5);
+  });
+
+  it('calls callback immediately when immediateCallback is true', () => {
+    const callback = vi.fn();
+    mount(ComponentStub, {
+      props: {
+        callback,
+        interval: 1000,
+        options: { immediateCallback: true },
+      },
+    });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    vi.advanceTimersByTime(1000);
+    expect(callback).toHaveBeenCalledTimes(2);
+  });
+
+  it('pauses and resumes', async () => {
+    const callback = vi.fn();
+    const wrapper = mount(ComponentStub, {
+      props: { callback, interval: 100 },
+    });
+
+    vi.advanceTimersByTime(300);
+    expect(callback).toHaveBeenCalledTimes(3);
+
+    wrapper.vm.pause();
+    await nextTick();
+
+    expect(wrapper.text()).toBe('false');
+    vi.advanceTimersByTime(500);
+    expect(callback).toHaveBeenCalledTimes(3);
+
+    wrapper.vm.resume();
+    await nextTick();
+
+    expect(wrapper.text()).toBe('true');
+    vi.advanceTimersByTime(200);
+    expect(callback).toHaveBeenCalledTimes(5);
+  });
+
+  it('toggles the interval', async () => {
+    const callback = vi.fn();
+    const wrapper = mount(ComponentStub, {
+      props: { callback },
+    });
+
+    expect(wrapper.text()).toBe('true');
+
+    wrapper.vm.toggle();
+    await nextTick();
+    expect(wrapper.text()).toBe('false');
+
+    wrapper.vm.toggle();
+    await nextTick();
+    expect(wrapper.text()).toBe('true');
+  });
+
+  it('supports reactive interval', async () => {
+    const callback = vi.fn();
+    const interval = ref(1000);
+    const scope = effectScope();
+
+    scope.run(() => {
+      useIntervalFn(callback, interval);
+    });
+
+    vi.advanceTimersByTime(1000);
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    // Change interval to 200ms — watcher triggers async
+    interval.value = 200;
+    await nextTick();
+
+    vi.advanceTimersByTime(200);
+    expect(callback).toHaveBeenCalledTimes(2);
+
+    vi.advanceTimersByTime(200);
+    expect(callback).toHaveBeenCalledTimes(3);
+
+    scope.stop();
+  });
+
+  it('does not fire with interval <= 0', () => {
+    const callback = vi.fn();
+    const scope = effectScope();
+
+    scope.run(() => {
+      const { isActive } = useIntervalFn(callback, 0);
+      expect(isActive.value).toBeFalsy();
+    });
+
+    vi.advanceTimersByTime(5000);
+    expect(callback).not.toHaveBeenCalled();
+
+    scope.stop();
+  });
+
+  it('cleans up on scope dispose', () => {
+    const callback = vi.fn();
+    const scope = effectScope();
+
+    scope.run(() => {
+      useIntervalFn(callback, 100);
+    });
+
+    vi.advanceTimersByTime(300);
+    expect(callback).toHaveBeenCalledTimes(3);
+
+    scope.stop();
+
+    vi.advanceTimersByTime(500);
+    expect(callback).toHaveBeenCalledTimes(3);
+  });
+
+  it('cleans up on component unmount', () => {
+    const callback = vi.fn();
+    const wrapper = mount(ComponentStub, {
+      props: { callback, interval: 100 },
+    });
+
+    vi.advanceTimersByTime(300);
+    expect(callback).toHaveBeenCalledTimes(3);
+
+    wrapper.unmount();
+
+    vi.advanceTimersByTime(500);
+    expect(callback).toHaveBeenCalledTimes(3);
+  });
+
+  it('resume is idempotent when already active', () => {
+    const callback = vi.fn();
+    const scope = effectScope();
+    let result: ReturnType<typeof useIntervalFn>;
+
+    scope.run(() => {
+      result = useIntervalFn(callback, 100);
+    });
+
+    expect(result!.isActive.value).toBeTruthy();
+    result!.resume();
+    expect(result!.isActive.value).toBeTruthy();
+
+    // Should still tick normally — no double interval
+    vi.advanceTimersByTime(100);
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    scope.stop();
+  });
+
+  it('pause is idempotent when already paused', () => {
+    const callback = vi.fn();
+    const scope = effectScope();
+    let result: ReturnType<typeof useIntervalFn>;
+
+    scope.run(() => {
+      result = useIntervalFn(callback, 100, { immediate: false });
+    });
+
+    expect(result!.isActive.value).toBeFalsy();
+    result!.pause();
+    expect(result!.isActive.value).toBeFalsy();
+
+    scope.stop();
+  });
+
+  it('uses default interval of 1000ms', () => {
+    const callback = vi.fn();
+    const scope = effectScope();
+
+    scope.run(() => {
+      useIntervalFn(callback);
+    });
+
+    vi.advanceTimersByTime(999);
+    expect(callback).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(1);
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/animation/useIntervalFn/index.ts b/vue/toolkit/src/composables/animation/useIntervalFn/index.ts
new file mode 100644
index 0000000..c6155be
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useIntervalFn/index.ts
@@ -0,0 +1,112 @@
+import { readonly, ref, toValue, watch } from 'vue';
+import type { MaybeRefOrGetter, Ref } from 'vue';
+import type { ResumableActions, ResumableOptions } from '@/types';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+
+export interface UseIntervalFnOptions extends ResumableOptions {
+  /**
+   * Whether to invoke the callback immediately on start.
+   *
+   * @default false
+   */
+  immediateCallback?: boolean;
+}
+
+export interface UseIntervalFnReturn extends ResumableActions {
+  /**
+   * Whether the interval is currently active
+   */
+  isActive: Readonly<Ref<boolean>>;
+}
+
+/**
+ * Call a function on every interval. Supports reactive interval duration,
+ * pause/resume, and automatic cleanup on scope dispose.
+ *
+ * @param callback - Function to call on every interval tick
+ * @param interval - Interval duration in milliseconds (can be reactive)
+ * @param options - Configuration options
+ *
+ * @example
+ * ```ts
+ * const { pause, resume, isActive } = useIntervalFn(() => {
+ *   console.log('tick');
+ * }, 1000);
+ * ```
+ *
+ * @example
+ * ```ts
+ * // Reactive interval
+ * const delay = ref(1000);
+ * useIntervalFn(() => console.log('tick'), delay);
+ * delay.value = 500; // interval restarts with new duration
+ * ```
+ */
+export function useIntervalFn(
+  callback: () => void,
+  interval: MaybeRefOrGetter<number> = 1000,
+  options: UseIntervalFnOptions = {},
+): UseIntervalFnReturn {
+  const {
+    immediate = true,
+    immediateCallback = false,
+  } = options;
+
+  const isActive = ref(false);
+
+  let timerId: ReturnType<typeof setInterval> | null = null;
+
+  function clean() {
+    if (timerId !== null) {
+      clearInterval(timerId);
+      timerId = null;
+    }
+  }
+
+  function resume() {
+    const ms = toValue(interval);
+
+    if (ms <= 0)
+      return;
+
+    isActive.value = true;
+
+    if (immediateCallback)
+      callback();
+
+    clean();
+    timerId = setInterval(callback, ms);
+  }
+
+  function pause() {
+    isActive.value = false;
+    clean();
+  }
+
+  function toggle() {
+    if (isActive.value)
+      pause();
+    else
+      resume();
+  }
+
+  // Re-start when interval changes reactively
+  watch(() => toValue(interval), () => {
+    if (isActive.value) {
+      clean();
+      resume();
+    }
+  });
+
+  if (immediate)
+    resume();
+
+  tryOnScopeDispose(pause);
+
+  return {
+    isActive: readonly(isActive),
+    pause,
+    resume,
+    toggle,
+  };
+}
diff --git a/vue/toolkit/src/composables/animation/useNow/demo.vue b/vue/toolkit/src/composables/animation/useNow/demo.vue
new file mode 100644
index 0000000..d4ec1ba
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useNow/demo.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useNow } from './index';
+
+const { now, isActive, pause, resume, toggle } = useNow({ controls: true, interval: 'requestAnimationFrame' });
+
+const time = computed(() =>
+  now.value.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' }),
+);
+const millis = computed(() => now.value.getMilliseconds().toString().padStart(3, '0'));
+const date = computed(() =>
+  now.value.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' }),
+);
+
+// A sweeping second hand driven entirely by the reactive `now`.
+const secondAngle = computed(() => {
+  const seconds = now.value.getSeconds() + now.value.getMilliseconds() / 1000;
+  return seconds / 60 * 360;
+});
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col items-center gap-3">
+      <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Reactive now</div>
+
+      <div class="flex items-baseline gap-1">
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ time }}</span>
+        <span class="font-mono text-lg font-semibold tabular-nums text-(--fg-subtle)">.{{ millis }}</span>
+      </div>
+
+      <div class="text-sm text-(--fg-muted)">{{ date }}</div>
+
+      <div class="relative mt-1 size-24 rounded-full border-2 border-(--border-strong) bg-(--bg-inset)">
+        <div class="absolute inset-0 flex items-center justify-center">
+          <div class="size-1.5 rounded-full bg-(--accent)" />
+        </div>
+        <div
+          class="absolute bottom-1/2 left-1/2 h-9 w-0.5 origin-bottom rounded-full bg-(--accent)"
+          :style="{ transform: `translateX(-50%) rotate(${secondAngle}deg)` }"
+        />
+      </div>
+    </div>
+
+    <div class="flex items-center justify-between gap-3">
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+      >
+        <span
+          class="size-1.5 rounded-full transition"
+          :class="isActive ? 'bg-emerald-500' : 'bg-(--fg-subtle)'"
+        />
+        {{ isActive ? 'Ticking (RAF)' : 'Paused' }}
+      </span>
+
+      <div class="flex items-center gap-2">
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="toggle"
+        >
+          {{ isActive ? 'Pause' : 'Resume' }}
+        </button>
+        <button
+          type="button"
+          :disabled="isActive"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          @click="resume"
+        >
+          Resume
+        </button>
+        <button
+          type="button"
+          :disabled="!isActive"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          @click="pause"
+        >
+          Pause
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/animation/useNow/index.test.ts b/vue/toolkit/src/composables/animation/useNow/index.test.ts
new file mode 100644
index 0000000..7a081d8
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useNow/index.test.ts
@@ -0,0 +1,140 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope } from 'vue';
+import type { Ref } from 'vue';
+import { useNow } from '.';
+import type { UseNowControls } from '.';
+
+describe(useNow, () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(1000);
+  });
+  afterEach(() => vi.useRealTimers());
+
+  it('returns the current date', () => {
+    const now = useNow({ interval: 100 });
+    expect(now.value).toBeInstanceOf(Date);
+    expect(now.value.getTime()).toBe(1000);
+  });
+
+  it('updates on the interval', () => {
+    const now = useNow({ interval: 100 });
+
+    // advanceTimersByTime also advances the mocked clock, so the tick fires at 1100
+    vi.advanceTimersByTime(100);
+    expect(now.value.getTime()).toBe(1100);
+
+    vi.advanceTimersByTime(100);
+    expect(now.value.getTime()).toBe(1200);
+  });
+
+  it('exposes controls when controls: true', () => {
+    const { now, pause } = useNow({ controls: true, interval: 100 });
+
+    expect(now.value).toBeInstanceOf(Date);
+
+    vi.advanceTimersByTime(100);
+    expect(now.value.getTime()).toBe(1100);
+
+    pause();
+    vi.advanceTimersByTime(100);
+    expect(now.value.getTime()).toBe(1100);
+  });
+
+  it('exposes isActive and reflects pause/resume/toggle', () => {
+    const { isActive, pause, resume, toggle } = useNow({ controls: true, interval: 100 });
+
+    expect(isActive.value).toBeTruthy();
+
+    pause();
+    expect(isActive.value).toBeFalsy();
+
+    resume();
+    expect(isActive.value).toBeTruthy();
+
+    toggle();
+    expect(isActive.value).toBeFalsy();
+  });
+
+  it('does not start updating when immediate is false', () => {
+    const { now, isActive } = useNow({ controls: true, interval: 100, immediate: false });
+
+    expect(isActive.value).toBeFalsy();
+
+    vi.advanceTimersByTime(100);
+    expect(now.value.getTime()).toBe(1000);
+  });
+
+  it('invokes the callback on every update with the current date', () => {
+    const callback = vi.fn();
+    useNow({ interval: 100, callback });
+
+    vi.advanceTimersByTime(100);
+    expect(callback).toHaveBeenCalledTimes(1);
+    expect(callback.mock.lastCall?.[0]).toBeInstanceOf(Date);
+    expect((callback.mock.lastCall?.[0] as Date).getTime()).toBe(1100);
+
+    vi.advanceTimersByTime(100);
+    expect(callback).toHaveBeenCalledTimes(2);
+    expect((callback.mock.lastCall?.[0] as Date).getTime()).toBe(1200);
+  });
+
+  it('produces a fresh Date instance on each update', () => {
+    const now = useNow({ interval: 100 });
+    const first = now.value;
+
+    vi.advanceTimersByTime(100);
+    expect(now.value).not.toBe(first);
+    expect(now.value.getTime()).toBe(1100);
+  });
+
+  it('defaults to the requestAnimationFrame strategy', () => {
+    const raf = vi.fn().mockReturnValue(1);
+    const caf = vi.fn();
+    vi.stubGlobal('requestAnimationFrame', raf);
+    vi.stubGlobal('cancelAnimationFrame', caf);
+
+    try {
+      const scope = effectScope();
+      let result: UseNowControls | undefined;
+
+      scope.run(() => {
+        result = useNow({ controls: true });
+      });
+
+      // RAF strategy starts the loop immediately
+      expect(result?.isActive.value).toBeTruthy();
+      expect(raf).toHaveBeenCalled();
+
+      scope.stop();
+    }
+    finally {
+      vi.unstubAllGlobals();
+    }
+  });
+
+  it('cleans up the updater when the scope is disposed', () => {
+    const scope = effectScope();
+    let now: Ref<Date> | undefined;
+
+    scope.run(() => {
+      now = useNow({ interval: 100 });
+    });
+
+    vi.advanceTimersByTime(100);
+    expect(now?.value.getTime()).toBe(1100);
+
+    scope.stop();
+
+    vi.advanceTimersByTime(100);
+    expect(now?.value.getTime()).toBe(1100);
+  });
+
+  it('does not update when interval mode runs without a callback firing (SSR-safe construction)', () => {
+    // useNow must construct without throwing even before any tick; the initial
+    // value is always a valid Date regardless of environment.
+    const now = useNow({ interval: 100, immediate: false });
+    expect(now.value).toBeInstanceOf(Date);
+    expect(now.value.getTime()).toBe(1000);
+  });
+});
diff --git a/vue/toolkit/src/composables/animation/useNow/index.ts b/vue/toolkit/src/composables/animation/useNow/index.ts
new file mode 100644
index 0000000..f5a8df5
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useNow/index.ts
@@ -0,0 +1,110 @@
+import { shallowRef } from 'vue';
+import type { Ref } from 'vue';
+import type { ResumableActions } from '@/types';
+import { useRafFn } from '@/composables/animation/useRafFn';
+import { useIntervalFn } from '@/composables/animation/useIntervalFn';
+
+export interface UseNowOptions<Controls extends boolean> {
+  /**
+   * Expose pause/resume controls alongside the date
+   *
+   * @default false
+   */
+  controls?: Controls;
+
+  /**
+   * Start updating immediately
+   *
+   * @default true
+   */
+  immediate?: boolean;
+
+  /**
+   * Update strategy. `'requestAnimationFrame'` updates every frame; a number
+   * updates on a fixed interval (ms).
+   *
+   * @default 'requestAnimationFrame'
+   */
+  interval?: 'requestAnimationFrame' | number;
+
+  /**
+   * Callback invoked on every update with the current date
+   */
+  callback?: (now: Date) => void;
+}
+
+/**
+ * Pause/resume controls returned when `controls: true`.
+ */
+export interface UseNowControls extends ResumableActions {
+  /**
+   * The reactive current date
+   */
+  now: Ref<Date>;
+
+  /**
+   * Whether the updater (RAF loop or interval) is currently active
+   */
+  isActive: Readonly<Ref<boolean>>;
+}
+
+export type UseNowReturn<Controls extends boolean>
+  = Controls extends true ? UseNowControls : Ref<Date>;
+
+/**
+ * @name useNow
+ * @category Animation
+ * @description Reactive current `Date`, updated via `requestAnimationFrame`
+ * or a fixed interval.
+ *
+ * @param {UseNowOptions} [options={}] Options
+ * @returns {Ref<Date> | UseNowControls} The date, or controls when `controls: true`
+ *
+ * @example
+ * const now = useNow();
+ *
+ * @example
+ * const { now, pause, resume, isActive } = useNow({ controls: true, interval: 1000 });
+ *
+ * @example
+ * // Run a callback on every update
+ * useNow({ interval: 1000, callback: date => console.log(date.toISOString()) });
+ *
+ * @since 0.0.15
+ */
+export function useNow(options?: UseNowOptions<false>): Ref<Date>;
+export function useNow(options: UseNowOptions<true>): UseNowControls;
+export function useNow(
+  options: UseNowOptions<boolean> = {},
+): Ref<Date> | UseNowControls {
+  const {
+    controls = false,
+    immediate = true,
+    interval = 'requestAnimationFrame',
+    callback,
+  } = options;
+
+  const now = shallowRef(new Date());
+
+  const update = callback
+    ? () => {
+        now.value = new Date();
+        callback(now.value);
+      }
+    : () => {
+        now.value = new Date();
+      };
+
+  const resumableControls = interval === 'requestAnimationFrame'
+    ? useRafFn(update, { immediate })
+    : useIntervalFn(update, interval, { immediate });
+
+  if (controls) {
+    return {
+      now,
+      ...resumableControls,
+    };
+  }
+
+  return now;
+}
diff --git a/vue/toolkit/src/composables/animation/useRafFn/demo.vue b/vue/toolkit/src/composables/animation/useRafFn/demo.vue
new file mode 100644
index 0000000..ca754a0
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useRafFn/demo.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { computed, ref, shallowRef } from 'vue';
+import { useRafFn } from './index';
+
+const fpsLimit = ref(0);
+
+const position = ref(0);
+const direction = ref(1);
+const delta = shallowRef(0);
+const fps = shallowRef(0);
+const frames = ref(0);
+
+const { isActive, pause, resume, toggle } = useRafFn(
+  ({ delta: d }) => {
+    delta.value = d;
+    fps.value = d > 0 ? Math.round(1000 / d) : 0;
+    frames.value++;
+
+    // Bounce a marker across the track using real frame delta (px per second).
+    position.value += direction.value * (d / 1000) * 120;
+
+    if (position.value >= 100) {
+      position.value = 100;
+      direction.value = -1;
+    }
+    else if (position.value <= 0) {
+      position.value = 0;
+      direction.value = 1;
+    }
+  },
+  { fpsLimit: fpsLimit.value || undefined },
+);
+
+const limitLabel = computed(() => (fpsLimit.value === 0 ? 'Unlimited' : `${fpsLimit.value} fps`));
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">requestAnimationFrame</span>
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+        >
+          <span class="size-1.5 rounded-full transition" :class="isActive ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+          {{ isActive ? 'Running' : 'Paused' }}
+        </span>
+      </div>
+
+      <!-- The animated track: marker position is updated every frame -->
+      <div class="relative mx-2.5 h-8 rounded-lg border border-(--border) bg-(--bg-inset)">
+        <div
+          class="absolute top-1/2 size-5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-(--accent) shadow"
+          :style="{ left: `${position}%` }"
+        />
+      </div>
+
+      <div class="grid grid-cols-3 gap-2">
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
+          <div class="font-mono text-lg font-bold tabular-nums text-(--fg)">{{ fps }}</div>
+          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">fps</div>
+        </div>
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
+          <div class="font-mono text-lg font-bold tabular-nums text-(--fg)">{{ delta.toFixed(1) }}</div>
+          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">delta ms</div>
+        </div>
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
+          <div class="font-mono text-lg font-bold tabular-nums text-(--fg)">{{ frames }}</div>
+          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">frames</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="fps-limit">FPS limit</label>
+        <span class="font-mono text-xs tabular-nums text-(--fg-muted)">{{ limitLabel }}</span>
+      </div>
+      <input
+        id="fps-limit"
+        v-model.number="fpsLimit"
+        type="range"
+        min="0"
+        max="60"
+        step="5"
+        class="w-full accent-(--accent) cursor-pointer"
+      >
+      <p class="text-xs text-(--fg-subtle)">Changing the limit takes effect on the next mount; toggle below to see it live.</p>
+    </div>
+
+    <button
+      type="button"
+      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+      @click="toggle"
+    >
+      {{ isActive ? 'Pause loop' : 'Resume loop' }}
+    </button>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/animation/useRafFn/index.test.ts b/vue/toolkit/src/composables/animation/useRafFn/index.test.ts
new file mode 100644
index 0000000..803c5c7
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useRafFn/index.test.ts
@@ -0,0 +1,252 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { defineComponent, effectScope, nextTick } from 'vue';
+import { mount } from '@vue/test-utils';
+import { useRafFn } from '.';
+
+let rafCallbacks: Array<(time: number) => void> = [];
+let rafIdCounter = 0;
+let currentTime = 0;
+
+beforeEach(() => {
+  rafCallbacks = [];
+  rafIdCounter = 0;
+  currentTime = 0;
+
+  vi.stubGlobal('requestAnimationFrame', (cb: (time: number) => void) => {
+    const id = ++rafIdCounter;
+    rafCallbacks.push(cb);
+    return id;
+  });
+
+  vi.stubGlobal('cancelAnimationFrame', vi.fn());
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+function triggerFrame(time: number) {
+  currentTime = time;
+  const cbs = [...rafCallbacks];
+  rafCallbacks = [];
+  cbs.forEach(cb => cb(currentTime));
+}
+
+const ComponentStub = defineComponent({
+  props: {
+    callback: {
+      type: Function,
+      required: true,
+    },
+    options: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  setup(props) {
+    const result = useRafFn(props.callback as any, props.options);
+    return { ...result };
+  },
+  template: '<div>{{ isActive }}</div>',
+});
+
+describe(useRafFn, () => {
+  it('starts immediately by default', () => {
+    const callback = vi.fn();
+    const wrapper = mount(ComponentStub, {
+      props: { callback },
+    });
+
+    expect(wrapper.text()).toBe('true');
+  });
+
+  it('does not start when immediate is false', () => {
+    const callback = vi.fn();
+    const wrapper = mount(ComponentStub, {
+      props: {
+        callback,
+        options: { immediate: false },
+      },
+    });
+
+    expect(wrapper.text()).toBe('false');
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it('calls the callback on animation frame with delta and timestamp', () => {
+    const callback = vi.fn();
+    mount(ComponentStub, {
+      props: { callback },
+    });
+
+    triggerFrame(100);
+    expect(callback).toHaveBeenCalledWith({ delta: 0, timestamp: 100 });
+  });
+
+  it('provides correct delta between frames', () => {
+    const callback = vi.fn();
+    mount(ComponentStub, {
+      props: { callback },
+    });
+
+    triggerFrame(100);
+    triggerFrame(116.67);
+
+    expect(callback).toHaveBeenCalledTimes(2);
+    expect(callback.mock.calls[1]![0]!.delta).toBeCloseTo(16.67, 1);
+  });
+
+  it('pauses and resumes the loop', async () => {
+    const callback = vi.fn();
+    const wrapper = mount(ComponentStub, {
+      props: { callback },
+    });
+
+    triggerFrame(100);
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    wrapper.vm.pause();
+    await nextTick();
+
+    expect(wrapper.text()).toBe('false');
+    triggerFrame(200);
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    wrapper.vm.resume();
+    await nextTick();
+
+    expect(wrapper.text()).toBe('true');
+    triggerFrame(300);
+    expect(callback).toHaveBeenCalledTimes(2);
+  });
+
+  it('resets delta after resume', () => {
+    const callback = vi.fn();
+    const wrapper = mount(ComponentStub, {
+      props: { callback },
+    });
+
+    triggerFrame(100);
+    wrapper.vm.pause();
+
+    wrapper.vm.resume();
+    triggerFrame(500);
+
+    // After resume, first frame delta resets to 0
+    const lastCall = callback.mock.calls[callback.mock.calls.length - 1]![0]!;
+    expect(lastCall.delta).toBe(0);
+    expect(lastCall.timestamp).toBe(500);
+  });
+
+  it('toggles the loop', async () => {
+    const callback = vi.fn();
+    const wrapper = mount(ComponentStub, {
+      props: { callback },
+    });
+
+    expect(wrapper.text()).toBe('true');
+
+    wrapper.vm.toggle();
+    await nextTick();
+    expect(wrapper.text()).toBe('false');
+
+    wrapper.vm.toggle();
+    await nextTick();
+    expect(wrapper.text()).toBe('true');
+  });
+
+  it('limits frame rate with fpsLimit', () => {
+    const callback = vi.fn();
+    mount(ComponentStub, {
+      props: {
+        callback,
+        options: { fpsLimit: 30 },
+      },
+    });
+
+    // First frame always fires (delta is 0)
+    triggerFrame(100);
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    // 30fps = ~33.33ms per frame — too soon, skipped
+    triggerFrame(110);
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    // Enough time passed (~40ms > 33.33ms)
+    triggerFrame(140);
+    expect(callback).toHaveBeenCalledTimes(2);
+  });
+
+  it('cleans up on scope dispose', () => {
+    const callback = vi.fn();
+    const scope = effectScope();
+
+    scope.run(() => {
+      useRafFn(callback);
+    });
+
+    triggerFrame(100);
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    scope.stop();
+    triggerFrame(200);
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
+  it('cleans up on component unmount', () => {
+    const callback = vi.fn();
+    const wrapper = mount(ComponentStub, {
+      props: { callback },
+    });
+
+    triggerFrame(100);
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    wrapper.unmount();
+    triggerFrame(200);
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
+  it('does nothing when window is undefined (SSR)', () => {
+    const callback = vi.fn();
+    const scope = effectScope();
+
+    scope.run(() => {
+      const { isActive } = useRafFn(callback, { window: undefined as any });
+      expect(isActive.value).toBeFalsy();
+    });
+
+    expect(callback).not.toHaveBeenCalled();
+    scope.stop();
+  });
+
+  it('resume is idempotent when already active', () => {
+    const scope = effectScope();
+    let result: ReturnType<typeof useRafFn>;
+
+    scope.run(() => {
+      result = useRafFn(vi.fn());
+    });
+
+    expect(result!.isActive.value).toBeTruthy();
+    result!.resume();
+    expect(result!.isActive.value).toBeTruthy();
+
+    scope.stop();
+  });
+
+  it('pause is idempotent when already paused', () => {
+    const scope = effectScope();
+    let result: ReturnType<typeof useRafFn>;
+
+    scope.run(() => {
+      result = useRafFn(vi.fn(), { immediate: false });
+    });
+
+    expect(result!.isActive.value).toBeFalsy();
+    result!.pause();
+    expect(result!.isActive.value).toBeFalsy();
+
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/animation/useRafFn/index.ts b/vue/toolkit/src/composables/animation/useRafFn/index.ts
new file mode 100644
index 0000000..95e376b
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useRafFn/index.ts
@@ -0,0 +1,120 @@
+import { readonly, ref } from 'vue';
+import type { Ref } from 'vue';
+import { defaultWindow } from '@/types';
+import type { ConfigurableWindow, ResumableActions, ResumableOptions } from '@/types';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+
+export interface UseRafFnCallbackArgs {
+  /**
+   * Time elapsed since the last frame in milliseconds
+   */
+  delta: number;
+
+  /**
+   * `DOMHighResTimeStamp` passed by `requestAnimationFrame`
+   */
+  timestamp: DOMHighResTimeStamp;
+}
+
+export interface UseRafFnOptions extends ResumableOptions, ConfigurableWindow {
+  /**
+   * Maximum frames per second. Set to `0` or `undefined` to disable the limit.
+   *
+   * @default undefined
+   */
+  fpsLimit?: number;
+}
+
+export interface UseRafFnReturn extends ResumableActions {
+  /**
+   * Whether the RAF loop is currently active
+   */
+  isActive: Readonly<Ref<boolean>>;
+}
+
+/**
+ * Call a function on every `requestAnimationFrame` with delta time tracking.
+ * Automatically cleans up when the component scope is disposed.
+ *
+ * @param callback - Function to call on every animation frame
+ * @param options - Configuration options
+ *
+ * @example
+ * ```ts
+ * const { pause, resume, isActive } = useRafFn(({ delta, timestamp }) => {
+ *   console.log(`${delta}ms since last frame`);
+ * });
+ * ```
+ */
+export function useRafFn(
+  callback: (args: UseRafFnCallbackArgs) => void,
+  options: UseRafFnOptions = {},
+): UseRafFnReturn {
+  const {
+    immediate = true,
+    fpsLimit,
+  } = options;
+
+  const window = 'window' in options ? options.window : defaultWindow;
+
+  const isActive = ref(false);
+  const intervalLimit = fpsLimit ? 1000 / fpsLimit : null;
+
+  let previousFrameTimestamp = 0;
+  let rafId: number | null = null;
+
+  function loop(timestamp: DOMHighResTimeStamp) {
+    if (!isActive.value || !window)
+      return;
+
+    if (!previousFrameTimestamp)
+      previousFrameTimestamp = timestamp;
+
+    const delta = timestamp - previousFrameTimestamp;
+
+    if (intervalLimit && delta && delta < intervalLimit) {
+      rafId = window.requestAnimationFrame(loop);
+      return;
+    }
+
+    previousFrameTimestamp = timestamp;
+    callback({ delta, timestamp });
+    rafId = window.requestAnimationFrame(loop);
+  }
+
+  function resume() {
+    if (!isActive.value && window) {
+      isActive.value = true;
+      previousFrameTimestamp = 0;
+      rafId = window.requestAnimationFrame(loop);
+    }
+  }
+
+  function pause() {
+    isActive.value = false;
+
+    if (rafId !== null && window) {
+      window.cancelAnimationFrame(rafId);
+      rafId = null;
+    }
+  }
+
+  function toggle() {
+    if (isActive.value)
+      pause();
+    else
+      resume();
+  }
+
+  if (immediate)
+    resume();
+
+  tryOnScopeDispose(pause);
+
+  return {
+    isActive: readonly(isActive),
+    pause,
+    resume,
+    toggle,
+  };
+}
diff --git a/vue/toolkit/src/composables/animation/useTimeAgo/demo.vue b/vue/toolkit/src/composables/animation/useTimeAgo/demo.vue
new file mode 100644
index 0000000..1d97257
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useTimeAgo/demo.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useTimeAgo } from './index';
+
+interface Preset {
+  label: string;
+  offset: number;
+}
+
+// Offsets in ms relative to now; negative = past, positive = future.
+const presets: Preset[] = [
+  { label: '15 s ago', offset: -15_000 },
+  { label: '3 min ago', offset: -3 * 60_000 },
+  { label: '2 h ago', offset: -2 * 3_600_000 },
+  { label: 'Yesterday', offset: -86_400_000 },
+  { label: 'Last week', offset: -7 * 86_400_000 },
+  { label: '5 months ago', offset: -5 * 2_592_000_000 },
+  { label: 'In 45 min', offset: 45 * 60_000 },
+  { label: 'Next year', offset: 31_536_000_000 },
+];
+
+const offset = ref(presets[1]!.offset);
+
+// Reactive getter recomputed each tick so the string stays live.
+const target = computed(() => Date.now() + offset.value);
+
+const { timeAgo, isActive, toggle } = useTimeAgo(target, {
+  controls: true,
+  updateInterval: 1000,
+  showSecond: true,
+});
+
+const absolute = computed(() =>
+  new Date(target.value).toLocaleString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  }),
+);
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col items-center gap-2">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Relative time</span>
+      <span class="font-mono text-3xl font-bold tabular-nums text-(--fg) text-center">{{ timeAgo }}</span>
+      <span class="text-xs text-(--fg-muted)">{{ absolute }}</span>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Pick an instant</span>
+      <div class="grid grid-cols-2 gap-2">
+        <button
+          v-for="preset in presets"
+          :key="preset.label"
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+          :class="offset === preset.offset
+            ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
+            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+          @click="offset = preset.offset"
+        >
+          {{ preset.label }}
+        </button>
+      </div>
+    </div>
+
+    <div class="flex items-center justify-between gap-3">
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+      >
+        <span class="size-1.5 rounded-full transition" :class="isActive ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+        {{ isActive ? 'Updating every 1s' : 'Updates paused' }}
+      </span>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="toggle"
+      >
+        {{ isActive ? 'Pause' : 'Resume' }}
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/animation/useTimeAgo/index.test.ts b/vue/toolkit/src/composables/animation/useTimeAgo/index.test.ts
new file mode 100644
index 0000000..d87b11f
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useTimeAgo/index.test.ts
@@ -0,0 +1,295 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, shallowRef } from 'vue';
+import type { ComputedRef } from 'vue';
+import { formatTimeAgo, useTimeAgo } from '.';
+import type { UseTimeAgoControls, UseTimeAgoMessages } from '.';
+
+const BASE = 1_700_000_000_000; // fixed epoch for deterministic diffs
+
+const SECOND = 1000;
+const MINUTE = 60 * SECOND;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+const WEEK = 7 * DAY;
+
+describe(formatTimeAgo, () => {
+  it('returns justNow when under a minute by default', () => {
+    expect(formatTimeAgo(new Date(BASE - 30 * SECOND), {}, BASE)).toBe('just now');
+  });
+
+  it('shows seconds when showSecond is true', () => {
+    expect(formatTimeAgo(new Date(BASE - 30 * SECOND), { showSecond: true }, BASE)).toBe('30 seconds ago');
+  });
+
+  it('formats minutes in the past', () => {
+    expect(formatTimeAgo(new Date(BASE - 3 * MINUTE), {}, BASE)).toBe('3 minutes ago');
+  });
+
+  it('formats a single minute (no pluralization)', () => {
+    expect(formatTimeAgo(new Date(BASE - 1 * MINUTE), {}, BASE)).toBe('1 minute ago');
+  });
+
+  it('formats future minutes', () => {
+    expect(formatTimeAgo(new Date(BASE + 5 * MINUTE), {}, BASE)).toBe('in 5 minutes');
+  });
+
+  it('formats hours', () => {
+    expect(formatTimeAgo(new Date(BASE - 2 * HOUR), {}, BASE)).toBe('2 hours ago');
+  });
+
+  it('uses the special yesterday/tomorrow forms for a single day', () => {
+    expect(formatTimeAgo(new Date(BASE - 1 * DAY), {}, BASE)).toBe('yesterday');
+    expect(formatTimeAgo(new Date(BASE + 1 * DAY), {}, BASE)).toBe('tomorrow');
+  });
+
+  it('uses last week / next week for a single week', () => {
+    expect(formatTimeAgo(new Date(BASE - 1 * WEEK), {}, BASE)).toBe('last week');
+    expect(formatTimeAgo(new Date(BASE + 1 * WEEK), {}, BASE)).toBe('next week');
+  });
+
+  it('falls back to the full date when a numeric max is exceeded', () => {
+    const from = new Date(BASE - 10 * DAY);
+    expect(formatTimeAgo(from, { max: 5 * DAY }, BASE)).toBe(from.toISOString().slice(0, 10));
+  });
+
+  it('falls back to the full date when a named-unit max is exceeded', () => {
+    const from = new Date(BASE - 3 * WEEK);
+    expect(formatTimeAgo(from, { max: 'day' }, BASE)).toBe(from.toISOString().slice(0, 10));
+  });
+
+  it('respects a custom fullDateFormatter', () => {
+    const from = new Date(BASE - 10 * DAY);
+    expect(formatTimeAgo(from, { max: 'day', fullDateFormatter: () => 'CUSTOM' }, BASE)).toBe('CUSTOM');
+  });
+
+  it('honors a ceil rounding strategy', () => {
+    // 90 seconds -> 1.5 minutes -> ceil = 2
+    expect(formatTimeAgo(new Date(BASE - 90 * SECOND), { rounding: 'ceil' }, BASE)).toBe('2 minutes ago');
+  });
+
+  it('honors floor rounding', () => {
+    // 119 seconds -> 1.98 minutes -> floor = 1
+    expect(formatTimeAgo(new Date(BASE - 119 * SECOND), { rounding: 'floor' }, BASE)).toBe('1 minute ago');
+  });
+
+  it('honors numeric (decimal-place) rounding', () => {
+    // 90 seconds -> 1.5 minutes, rounded to 1 dp = 1.5
+    expect(formatTimeAgo(new Date(BASE - 90 * SECOND), { rounding: 1 }, BASE)).toBe('1.5 minutes ago');
+  });
+
+  it('returns the invalid message for an unparseable date', () => {
+    expect(formatTimeAgo(new Date('not a date'), {}, BASE)).toBe('');
+  });
+
+  it('supports custom i18n messages', () => {
+    const messages: UseTimeAgoMessages = {
+      justNow: 'à l\'instant',
+      past: n => `il y a ${n}`,
+      future: n => `dans ${n}`,
+      invalid: 'invalide',
+      second: n => `${n} seconde${n > 1 ? 's' : ''}`,
+      minute: n => `${n} minute${n > 1 ? 's' : ''}`,
+      hour: n => `${n} heure${n > 1 ? 's' : ''}`,
+      day: n => `${n} jour${n > 1 ? 's' : ''}`,
+      week: n => `${n} semaine${n > 1 ? 's' : ''}`,
+      month: n => `${n} mois`,
+      year: n => `${n} an${n > 1 ? 's' : ''}`,
+    };
+
+    expect(formatTimeAgo(new Date(BASE - 3 * MINUTE), { messages }, BASE)).toBe('il y a 3 minutes');
+    expect(formatTimeAgo(new Date(BASE + 3 * MINUTE), { messages }, BASE)).toBe('dans 3 minutes');
+  });
+
+  it('supports string-template (i18n) past/future with {0} placeholder', () => {
+    const messages: UseTimeAgoMessages = {
+      justNow: 'now',
+      past: '{0} ago',
+      future: 'in {0}',
+      invalid: '',
+      second: '{0}s',
+      minute: '{0}m',
+      hour: '{0}h',
+      day: '{0}d',
+      week: '{0}w',
+      month: '{0}mo',
+      year: '{0}y',
+    };
+
+    expect(formatTimeAgo(new Date(BASE - 3 * MINUTE), { messages }, BASE)).toBe('3m ago');
+  });
+});
+
+describe(useTimeAgo, () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(BASE);
+  });
+  afterEach(() => vi.useRealTimers());
+
+  it('returns a computed string by default', () => {
+    const scope = effectScope();
+    let timeAgo: ComputedRef<string> | undefined;
+
+    scope.run(() => {
+      timeAgo = useTimeAgo(new Date(BASE - 3 * MINUTE));
+    });
+
+    expect(timeAgo?.value).toBe('3 minutes ago');
+    scope.stop();
+  });
+
+  it('recomputes as the clock advances on the interval', () => {
+    const scope = effectScope();
+    let timeAgo: ComputedRef<string> | undefined;
+
+    scope.run(() => {
+      timeAgo = useTimeAgo(new Date(BASE - 5 * SECOND), { updateInterval: 1000, showSecond: true });
+    });
+
+    expect(timeAgo?.value).toBe('5 seconds ago');
+
+    vi.advanceTimersByTime(55 * SECOND);
+    expect(timeAgo?.value).toBe('1 minute ago');
+
+    scope.stop();
+  });
+
+  it('reacts to a changing reactive time source', () => {
+    const scope = effectScope();
+    const time = shallowRef(new Date(BASE - 1 * MINUTE));
+    let timeAgo: ComputedRef<string> | undefined;
+
+    scope.run(() => {
+      timeAgo = useTimeAgo(time);
+    });
+
+    expect(timeAgo?.value).toBe('1 minute ago');
+
+    time.value = new Date(BASE - 2 * HOUR);
+    expect(timeAgo?.value).toBe('2 hours ago');
+
+    scope.stop();
+  });
+
+  it('accepts a numeric timestamp and a string date', () => {
+    const scope = effectScope();
+    let fromNumber: ComputedRef<string> | undefined;
+    let fromString: ComputedRef<string> | undefined;
+
+    scope.run(() => {
+      fromNumber = useTimeAgo(BASE - 3 * MINUTE);
+      fromString = useTimeAgo(new Date(BASE - 3 * MINUTE).toISOString());
+    });
+
+    expect(fromNumber?.value).toBe('3 minutes ago');
+    expect(fromString?.value).toBe('3 minutes ago');
+
+    scope.stop();
+  });
+
+  it('exposes controls when controls: true', () => {
+    const scope = effectScope();
+    let ctrl: UseTimeAgoControls | undefined;
+
+    scope.run(() => {
+      ctrl = useTimeAgo(new Date(BASE - 5 * SECOND), { controls: true, updateInterval: 1000, showSecond: true });
+    });
+
+    if (!ctrl)
+      throw new Error('controls not created');
+
+    expect(ctrl.timeAgo.value).toBe('5 seconds ago');
+    expect(ctrl.isActive.value).toBeTruthy();
+
+    vi.advanceTimersByTime(55 * SECOND);
+    expect(ctrl.timeAgo.value).toBe('1 minute ago');
+
+    // pausing stops further recomputation
+    ctrl.pause();
+    expect(ctrl.isActive.value).toBeFalsy();
+
+    vi.advanceTimersByTime(60 * SECOND);
+    expect(ctrl.timeAgo.value).toBe('1 minute ago');
+
+    ctrl.resume();
+    expect(ctrl.isActive.value).toBeTruthy();
+    // resume does not fire the callback immediately; the next tick refreshes now
+    vi.advanceTimersByTime(1 * SECOND);
+    expect(ctrl.timeAgo.value).toBe('2 minutes ago');
+
+    ctrl.toggle();
+    expect(ctrl.isActive.value).toBeFalsy();
+
+    scope.stop();
+  });
+
+  it('does not start ticking when immediate is false', () => {
+    const scope = effectScope();
+    let result: { timeAgo: { value: string }; isActive: { value: boolean } } | undefined;
+
+    scope.run(() => {
+      result = useTimeAgo(new Date(BASE - 5 * SECOND), {
+        controls: true,
+        updateInterval: 1000,
+        immediate: false,
+        showSecond: true,
+      });
+    });
+
+    expect(result?.isActive.value).toBeFalsy();
+
+    vi.advanceTimersByTime(60 * SECOND);
+    // value reflects construction-time "now" since no tick fired
+    expect(result?.timeAgo.value).toBe('5 seconds ago');
+
+    scope.stop();
+  });
+
+  it('stops updating once the scope is disposed (cleanup)', () => {
+    const scope = effectScope();
+    let timeAgo: ComputedRef<string> | undefined;
+
+    scope.run(() => {
+      timeAgo = useTimeAgo(new Date(BASE), { updateInterval: 1000, showSecond: true });
+    });
+
+    vi.advanceTimersByTime(60 * SECOND);
+    expect(timeAgo?.value).toBe('1 minute ago');
+
+    scope.stop();
+
+    vi.advanceTimersByTime(120 * SECOND);
+    expect(timeAgo?.value).toBe('1 minute ago');
+  });
+
+  it('constructs without touching window/document/navigator (SSR-safe)', () => {
+    // useTimeAgo is pure date math + an interval; it must build with no DOM
+    // globals present. We simulate an SSR-ish absence and assert no throw.
+    const originalWindow = (globalThis as Record<string, unknown>).window;
+    const originalDocument = (globalThis as Record<string, unknown>).document;
+    const originalNavigator = (globalThis as Record<string, unknown>).navigator;
+
+    vi.stubGlobal('window', undefined);
+    vi.stubGlobal('document', undefined);
+    vi.stubGlobal('navigator', undefined);
+
+    try {
+      const scope = effectScope();
+      let timeAgo: ComputedRef<string> | undefined;
+
+      scope.run(() => {
+        timeAgo = useTimeAgo(new Date(BASE - 3 * MINUTE), { immediate: false });
+      });
+
+      expect(timeAgo?.value).toBe('3 minutes ago');
+      scope.stop();
+    }
+    finally {
+      vi.unstubAllGlobals();
+      // restore (vi.unstubAllGlobals already does, but keep references used)
+      void originalWindow;
+      void originalDocument;
+      void originalNavigator;
+    }
+  });
+});
diff --git a/vue/toolkit/src/composables/animation/useTimeAgo/index.ts b/vue/toolkit/src/composables/animation/useTimeAgo/index.ts
new file mode 100644
index 0000000..7895210
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useTimeAgo/index.ts
@@ -0,0 +1,345 @@
+import { computed, shallowRef, toValue } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';
+import { isFunction, isNumber, isString } from '@robonen/stdlib';
+import type { ResumableActions } from '@/types';
+import { useIntervalFn } from '@/composables/animation/useIntervalFn';
+
+/**
+ * Formatter for a single unit value. Receives the rounded numeric value and
+ * whether the instant is in the past, and returns the localized fragment.
+ */
+export type UseTimeAgoFormatter<T = number> = (value: T, isPast: boolean) => string;
+
+/**
+ * The default set of unit names recognized by `useTimeAgo`.
+ */
+export type UseTimeAgoUnitName
+  = 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year';
+
+/**
+ * A single time unit used while resolving the most appropriate granularity.
+ */
+export interface UseTimeAgoUnit<Unit extends string = UseTimeAgoUnitName> {
+  /**
+   * Upper bound (exclusive) of the absolute diff (ms) this unit applies to
+   */
+  max: number;
+
+  /**
+   * Length of one unit in milliseconds
+   */
+  value: number;
+
+  /**
+   * Unit name; used to look up the matching message formatter
+   */
+  name: Unit;
+}
+
+/**
+ * Built-in (non-unit) message slots.
+ */
+export interface UseTimeAgoMessagesBuiltIn {
+  /**
+   * Shown when the diff is below the smallest displayed unit
+   */
+  justNow: string;
+
+  /**
+   * Wraps a past fragment (e.g. `'3 minutes'` -> `'3 minutes ago'`)
+   */
+  past: string | UseTimeAgoFormatter<string>;
+
+  /**
+   * Wraps a future fragment (e.g. `'3 minutes'` -> `'in 3 minutes'`)
+   */
+  future: string | UseTimeAgoFormatter<string>;
+
+  /**
+   * Shown when the provided time cannot be parsed into a valid date
+   */
+  invalid: string;
+}
+
+/**
+ * Full message map: the built-in slots plus a formatter per unit name.
+ */
+export type UseTimeAgoMessages<UnitNames extends string = UseTimeAgoUnitName>
+  = UseTimeAgoMessagesBuiltIn & Record<UnitNames, string | UseTimeAgoFormatter<number>>;
+
+/**
+ * Options shared by the pure `formatTimeAgo` and the reactive `useTimeAgo`.
+ */
+export interface FormatTimeAgoOptions<UnitNames extends string = UseTimeAgoUnitName> {
+  /**
+   * Maximum unit (or absolute ms diff) to display before falling back to
+   * `fullDateFormatter`.
+   */
+  max?: UnitNames | number;
+
+  /**
+   * Formatter applied when the diff exceeds `max`.
+   *
+   * @default (date) => date.toISOString().slice(0, 10)
+   */
+  fullDateFormatter?: (date: Date) => string;
+
+  /**
+   * Localized messages.
+   */
+  messages?: UseTimeAgoMessages<UnitNames>;
+
+  /**
+   * Show seconds (i.e. allow sub-minute granularity) instead of `justNow`.
+   *
+   * @default false
+   */
+  showSecond?: boolean;
+
+  /**
+   * Rounding strategy applied to unit values. A string maps to the matching
+   * `Math` method; a number rounds to that many decimal places.
+   *
+   * @default 'round'
+   */
+  rounding?: 'round' | 'ceil' | 'floor' | number;
+
+  /**
+   * Custom ordered list of units (ascending by `value`).
+   */
+  units?: Array<UseTimeAgoUnit<UnitNames>>;
+}
+
+/**
+ * Options for `useTimeAgo`.
+ */
+export interface UseTimeAgoOptions<Controls extends boolean, UnitNames extends string = UseTimeAgoUnitName>
+  extends FormatTimeAgoOptions<UnitNames> {
+  /**
+   * Expose pause/resume controls alongside the time string.
+   *
+   * @default false
+   */
+  controls?: Controls;
+
+  /**
+   * Interval (ms) at which the relative string is recomputed.
+   *
+   * @default 30000
+   */
+  updateInterval?: number;
+
+  /**
+   * Start the update interval immediately.
+   *
+   * @default true
+   */
+  immediate?: boolean;
+}
+
+/**
+ * Controls returned when `controls: true`.
+ */
+export interface UseTimeAgoControls extends ResumableActions {
+  /**
+   * The reactive relative-time string
+   */
+  timeAgo: ComputedRef<string>;
+
+  /**
+   * Whether the update interval is currently active
+   */
+  isActive: Readonly<Ref<boolean>>;
+}
+
+export type UseTimeAgoReturn<Controls extends boolean = false>
+  = Controls extends true ? UseTimeAgoControls : ComputedRef<string>;
+
+const DEFAULT_UNITS: Array<UseTimeAgoUnit<UseTimeAgoUnitName>> = [
+  { max: 60000, value: 1000, name: 'second' },
+  { max: 2760000, value: 60000, name: 'minute' },
+  { max: 72000000, value: 3600000, name: 'hour' },
+  { max: 518400000, value: 86400000, name: 'day' },
+  { max: 2419200000, value: 604800000, name: 'week' },
+  { max: 28512000000, value: 2592000000, name: 'month' },
+  { max: Number.POSITIVE_INFINITY, value: 31536000000, name: 'year' },
+];
+
+const DEFAULT_MESSAGES: UseTimeAgoMessages<UseTimeAgoUnitName> = {
+  justNow: 'just now',
+  past: n => /\d/.test(n) ? `${n} ago` : n,
+  future: n => /\d/.test(n) ? `in ${n}` : n,
+  month: (n, past) => n === 1 ? (past ? 'last month' : 'next month') : `${n} month${n > 1 ? 's' : ''}`,
+  year: (n, past) => n === 1 ? (past ? 'last year' : 'next year') : `${n} year${n > 1 ? 's' : ''}`,
+  day: (n, past) => n === 1 ? (past ? 'yesterday' : 'tomorrow') : `${n} day${n > 1 ? 's' : ''}`,
+  week: (n, past) => n === 1 ? (past ? 'last week' : 'next week') : `${n} week${n > 1 ? 's' : ''}`,
+  hour: n => `${n} hour${n > 1 ? 's' : ''}`,
+  minute: n => `${n} minute${n > 1 ? 's' : ''}`,
+  second: n => `${n} second${n > 1 ? 's' : ''}`,
+  invalid: '',
+};
+
+function defaultFullDateFormatter(date: Date): string {
+  return date.toISOString().slice(0, 10);
+}
+
+/**
+ * Pure (non-reactive) relative-time formatter. Useful on its own and reused by
+ * `useTimeAgo` on every tick.
+ *
+ * @param {Date} from The instant to describe
+ * @param {FormatTimeAgoOptions} [options={}] Formatting options
+ * @param {Date | number} [now=Date.now()] The reference "now"
+ * @returns {string} The localized relative-time string
+ *
+ * @example
+ * formatTimeAgo(new Date(Date.now() - 3 * 60_000)); // '3 minutes ago'
+ *
+ * @since 0.0.15
+ */
+export function formatTimeAgo<UnitNames extends string = UseTimeAgoUnitName>(
+  from: Date,
+  options: FormatTimeAgoOptions<UnitNames> = {},
+  now: Date | number = Date.now(),
+): string {
+  const {
+    max,
+    messages = DEFAULT_MESSAGES as UseTimeAgoMessages<UnitNames>,
+    fullDateFormatter = defaultFullDateFormatter,
+    units = DEFAULT_UNITS as Array<UseTimeAgoUnit<UnitNames>>,
+    showSecond = false,
+    rounding = 'round',
+  } = options;
+
+  const fromMs = +from;
+
+  if (Number.isNaN(fromMs))
+    return messages.invalid;
+
+  const roundFn = isNumber(rounding)
+    ? (n: number): number => +n.toFixed(rounding)
+    : Math[rounding];
+
+  const diff = +now - fromMs;
+  const absDiff = Math.abs(diff);
+
+  function getValue(unit: UseTimeAgoUnit<UnitNames>): number {
+    return roundFn(absDiff / unit.value);
+  }
+
+  function applyFormat(
+    name: UnitNames | keyof UseTimeAgoMessagesBuiltIn,
+    val: number | string,
+    isPast: boolean,
+  ): string {
+    const formatter = messages[name];
+
+    if (isFunction(formatter))
+      return formatter(val as never, isPast);
+
+    return formatter.replace('{0}', val.toString());
+  }
+
+  function format(unit: UseTimeAgoUnit<UnitNames>): string {
+    const val = getValue(unit);
+    const past = diff > 0;
+    const str = applyFormat(unit.name, val, past);
+
+    return applyFormat(past ? 'past' : 'future', str, past);
+  }
+
+  if (absDiff < 60000 && !showSecond)
+    return messages.justNow;
+
+  if (isNumber(max) && absDiff > max)
+    return fullDateFormatter(new Date(from));
+
+  if (isString(max)) {
+    const unitMax = units.find(unit => unit.name === max)?.max;
+
+    if (unitMax && absDiff > unitMax)
+      return fullDateFormatter(new Date(from));
+  }
+
+  for (let idx = 0; idx < units.length; idx++) {
+    const unit = units[idx]!;
+    const prev = units[idx - 1];
+
+    if (getValue(unit) <= 0 && prev)
+      return format(prev);
+
+    if (absDiff < unit.max)
+      return format(unit);
+  }
+
+  return messages.invalid;
+}
+
+/**
+ * @name useTimeAgo
+ * @category Animation
+ * @description Reactive relative time string (e.g. `'3 minutes ago'`) that
+ * ticks on a fixed interval. Fully customizable messages (i18n), units,
+ * rounding, and an automatic fallback to a full date once `max` is exceeded.
+ *
+ * @param {MaybeRefOrGetter<Date | number | string>} time The instant to describe (reactive)
+ * @param {UseTimeAgoOptions} [options={}] Options
+ * @returns {ComputedRef<string> | UseTimeAgoControls} The reactive string, or controls when `controls: true`
+ *
+ * @example
+ * const timeAgo = useTimeAgo(new Date(Date.now() - 60_000)); // '1 minute ago'
+ *
+ * @example
+ * // With pause/resume controls and a custom update cadence
+ * const { timeAgo, pause, resume } = useTimeAgo(date, { controls: true, updateInterval: 1000 });
+ *
+ * @example
+ * // i18n + full-date fallback past one month
+ * const timeAgo = useTimeAgo(date, {
+ *   max: 'month',
+ *   messages: { ...customMessages },
+ *   fullDateFormatter: d => d.toLocaleDateString('fr-FR'),
+ * });
+ *
+ * @since 0.0.15
+ */
+export function useTimeAgo<UnitNames extends string = UseTimeAgoUnitName>(
+  time: MaybeRefOrGetter<Date | number | string>,
+  options?: UseTimeAgoOptions<false, UnitNames>,
+): ComputedRef<string>;
+export function useTimeAgo<UnitNames extends string = UseTimeAgoUnitName>(
+  time: MaybeRefOrGetter<Date | number | string>,
+  options: UseTimeAgoOptions<true, UnitNames>,
+): UseTimeAgoControls;
+export function useTimeAgo<UnitNames extends string = UseTimeAgoUnitName>(
+  time: MaybeRefOrGetter<Date | number | string>,
+  options: UseTimeAgoOptions<boolean, UnitNames> = {},
+): ComputedRef<string> | UseTimeAgoControls {
+  const {
+    controls = false,
+    updateInterval = 30000,
+    immediate = true,
+  } = options;
+
+  // A single ticking ref drives recomputation; the heavy formatting stays in
+  // a computed so it only runs when `now` or `time` actually change.
+  const now = shallowRef(Date.now());
+
+  const resumable = useIntervalFn(() => {
+    now.value = Date.now();
+  }, updateInterval, { immediate });
+
+  const timeAgo = computed(() => formatTimeAgo(new Date(toValue(time)), options, now.value));
+
+  if (controls) {
+    return {
+      timeAgo,
+      isActive: resumable.isActive,
+      pause: resumable.pause,
+      resume: resumable.resume,
+      toggle: resumable.toggle,
+    };
+  }
+
+  return timeAgo;
+}
diff --git a/vue/toolkit/src/composables/animation/useTimeout/demo.vue b/vue/toolkit/src/composables/animation/useTimeout/demo.vue
new file mode 100644
index 0000000..cc5be1c
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useTimeout/demo.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTimeout } from './index';
+
+const delay = ref(3000);
+const firedAt = ref<string | null>(null);
+
+const { ready, start, stop } = useTimeout(delay, {
+  controls: true,
+  immediate: false,
+  callback: () => {
+    firedAt.value = new Date().toLocaleTimeString('en-US', { hour12: false });
+  },
+});
+
+function restart() {
+  firedAt.value = null;
+  start();
+}
+
+function cancel() {
+  stop();
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col items-center gap-3">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Status</span>
+
+      <div
+        class="flex size-20 items-center justify-center rounded-full border-2 transition"
+        :class="ready
+          ? 'border-emerald-500/40 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-(--accent) bg-(--accent-subtle) text-(--accent-text)'"
+      >
+        <span class="text-sm font-semibold">{{ ready ? 'Ready' : 'Pending' }}</span>
+      </div>
+
+      <p class="text-center text-sm text-(--fg-muted)">
+        <template v-if="ready && firedAt">Fired at <span class="font-mono tabular-nums text-(--fg)">{{ firedAt }}</span></template>
+        <template v-else-if="ready">Idle — start the timer below</template>
+        <template v-else>Counting down… stays pending until the delay elapses</template>
+      </p>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="delay">Delay</label>
+        <span class="font-mono text-xs tabular-nums text-(--fg-muted)">{{ (delay / 1000).toFixed(1) }}s</span>
+      </div>
+      <input
+        id="delay"
+        v-model.number="delay"
+        type="range"
+        min="500"
+        max="5000"
+        step="500"
+        class="w-full accent-(--accent) cursor-pointer"
+      >
+    </div>
+
+    <div class="flex items-center gap-2">
+      <button
+        type="button"
+        class="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="restart"
+      >
+        {{ ready ? 'Start' : 'Restart' }}
+      </button>
+      <button
+        type="button"
+        :disabled="ready"
+        class="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="cancel"
+      >
+        Cancel
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/animation/useTimeout/index.test.ts b/vue/toolkit/src/composables/animation/useTimeout/index.test.ts
new file mode 100644
index 0000000..73c6cec
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useTimeout/index.test.ts
@@ -0,0 +1,131 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, isReadonly, ref } from 'vue';
+import { useTimeout } from '.';
+
+describe(useTimeout, () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+
+  it('flips ready to true after the interval', () => {
+    const ready = useTimeout(100);
+
+    expect(ready.value).toBeFalsy();
+    vi.advanceTimersByTime(100);
+    expect(ready.value).toBeTruthy();
+  });
+
+  it('defaults the interval to 1000ms', () => {
+    const ready = useTimeout();
+
+    vi.advanceTimersByTime(999);
+    expect(ready.value).toBeFalsy();
+    vi.advanceTimersByTime(1);
+    expect(ready.value).toBeTruthy();
+  });
+
+  it('returns a read-only computed by default', () => {
+    const ready = useTimeout(100);
+
+    expect(isReadonly(ready)).toBeTruthy();
+  });
+
+  it('starts ready when immediate is false', () => {
+    const ready = useTimeout(100, { immediate: false });
+
+    expect(ready.value).toBeTruthy();
+    vi.advanceTimersByTime(100);
+    expect(ready.value).toBeTruthy();
+  });
+
+  it('invokes the callback when the timeout elapses', () => {
+    const callback = vi.fn();
+    useTimeout(100, { callback });
+
+    expect(callback).not.toHaveBeenCalled();
+    vi.advanceTimersByTime(100);
+    expect(callback).toHaveBeenCalledOnce();
+  });
+
+  it('reads the interval reactively each time it starts', () => {
+    const delay = ref(100);
+    const { ready, start } = useTimeout(delay, { controls: true, immediate: false });
+
+    delay.value = 200;
+    start();
+    expect(ready.value).toBeFalsy();
+    vi.advanceTimersByTime(100);
+    expect(ready.value).toBeFalsy();
+    vi.advanceTimersByTime(100);
+    expect(ready.value).toBeTruthy();
+  });
+
+  describe('controls', () => {
+    it('exposes ready, start and stop', () => {
+      const controls = useTimeout(100, { controls: true });
+
+      expect(controls).toHaveProperty('ready');
+      expect(controls).toHaveProperty('start');
+      expect(controls).toHaveProperty('stop');
+    });
+
+    it('start restarts the pending timeout', () => {
+      const { ready, start } = useTimeout(100, { controls: true });
+
+      vi.advanceTimersByTime(50);
+      start();
+      vi.advanceTimersByTime(50);
+      expect(ready.value).toBeFalsy();
+      vi.advanceTimersByTime(50);
+      expect(ready.value).toBeTruthy();
+    });
+
+    it('start re-arms the timeout after it has elapsed', () => {
+      const callback = vi.fn();
+      const { ready, start } = useTimeout(100, { controls: true, callback });
+
+      vi.advanceTimersByTime(100);
+      expect(ready.value).toBeTruthy();
+      expect(callback).toHaveBeenCalledOnce();
+
+      start();
+      expect(ready.value).toBeFalsy();
+      vi.advanceTimersByTime(100);
+      expect(ready.value).toBeTruthy();
+      expect(callback).toHaveBeenCalledTimes(2);
+    });
+
+    it('stop cancels the pending callback', () => {
+      const callback = vi.fn();
+      const { stop } = useTimeout(100, { controls: true, callback });
+
+      stop();
+      vi.advanceTimersByTime(100);
+      expect(callback).not.toHaveBeenCalled();
+    });
+  });
+
+  it('cleans up on scope dispose', () => {
+    const callback = vi.fn();
+    const scope = effectScope();
+    scope.run(() => {
+      useTimeout(100, { callback });
+    });
+
+    scope.stop();
+    vi.advanceTimersByTime(100);
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it('does not auto-start the real timer in a non-client (SSR) environment', () => {
+    // `useTimeoutFn` is guarded by `isClient`; with immediate auto-start it
+    // marks the timeout pending but only schedules a timer on the client.
+    // We assert the SSR-safe contract: no callback fires without timers running.
+    const callback = vi.fn();
+    const { ready } = useTimeout(100, { controls: true, immediate: false, callback });
+
+    // immediate:false means never auto-armed -> ready stays true, callback never fires
+    expect(ready.value).toBeTruthy();
+    vi.advanceTimersByTime(1000);
+    expect(callback).not.toHaveBeenCalled();
+  });
+});
diff --git a/vue/toolkit/src/composables/animation/useTimeout/index.ts b/vue/toolkit/src/composables/animation/useTimeout/index.ts
new file mode 100644
index 0000000..e829511
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useTimeout/index.ts
@@ -0,0 +1,90 @@
+import { computed } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+import type { VoidFunction } from '@robonen/stdlib';
+import { noop } from '@robonen/stdlib';
+import { useTimeoutFn } from '@/composables/animation/useTimeoutFn';
+import type { UseTimeoutFnOptions, UseTimeoutFnReturn } from '@/composables/animation/useTimeoutFn';
+
+export interface UseTimeoutOptions<Controls extends boolean> extends UseTimeoutFnOptions {
+  /**
+   * Expose `start`/`stop` controls alongside the `ready` flag
+   *
+   * @default false
+   */
+  controls?: Controls;
+
+  /**
+   * Callback invoked when the timeout elapses
+   */
+  callback?: VoidFunction;
+}
+
+export interface UseTimeoutControls {
+  /**
+   * Reactive flag that is `false` while the timeout is pending and flips to
+   * `true` once the delay has elapsed
+   */
+  ready: ComputedRef<boolean>;
+
+  /**
+   * Start (or restart) the timeout
+   */
+  start: UseTimeoutFnReturn<[]>['start'];
+
+  /**
+   * Cancel the pending timeout (leaves `ready` at its current value)
+   */
+  stop: UseTimeoutFnReturn<[]>['stop'];
+}
+
+export type UseTimeoutReturn
+  = ComputedRef<boolean> | UseTimeoutControls;
+
+/**
+ * @name useTimeout
+ * @category Animation
+ * @description Reactive boolean that flips to `true` after a given delay.
+ * Built on `useTimeoutFn`; optionally exposes `start`/`stop` controls. SSR-safe.
+ *
+ * @param {MaybeRefOrGetter<number>} [interval=1000] Delay in milliseconds (resolved each time the timeout starts, can be reactive)
+ * @param {UseTimeoutOptions} [options={}] Options
+ * @returns {ComputedRef<boolean> | UseTimeoutControls} The read-only `ready` flag, or controls when `controls: true`
+ *
+ * @example
+ * const ready = useTimeout(1000);
+ * // `ready.value` becomes true after 1s
+ *
+ * @example
+ * const { ready, start, stop } = useTimeout(1000, { controls: true });
+ *
+ * @example
+ * // Run a callback when the timeout elapses
+ * useTimeout(5000, { callback: refresh });
+ *
+ * @since 0.0.15
+ */
+export function useTimeout(interval?: MaybeRefOrGetter<number>, options?: UseTimeoutOptions<false>): ComputedRef<boolean>;
+export function useTimeout(interval: MaybeRefOrGetter<number>, options: UseTimeoutOptions<true>): UseTimeoutControls;
+export function useTimeout(
+  interval: MaybeRefOrGetter<number> = 1000,
+  options: UseTimeoutOptions<boolean> = {},
+): UseTimeoutReturn {
+  const {
+    controls: exposeControls = false,
+    callback = noop,
+  } = options;
+
+  const { isPending, start, stop } = useTimeoutFn(callback, interval, options);
+
+  const ready = computed(() => !isPending.value);
+
+  if (exposeControls) {
+    return {
+      ready,
+      start,
+      stop,
+    };
+  }
+
+  return ready;
+}
diff --git a/vue/toolkit/src/composables/animation/useTimeoutFn/demo.vue b/vue/toolkit/src/composables/animation/useTimeoutFn/demo.vue
new file mode 100644
index 0000000..a75029c
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useTimeoutFn/demo.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTimeoutFn } from './index';
+
+interface Mail {
+  id: number;
+  from: string;
+  subject: string;
+}
+
+const inbox = ref<Mail[]>([
+  { id: 1, from: 'Ada Lovelace', subject: 'Notes on the Analytical Engine' },
+  { id: 2, from: 'Grace Hopper', subject: 'Found a bug in the relay' },
+  { id: 3, from: 'Alan Turing', subject: 'Re: Halting problem' },
+]);
+
+const pendingDelete = ref<Mail | null>(null);
+
+// After the grace period elapses the mail is permanently removed.
+const { isPending, start, stop } = useTimeoutFn(
+  () => {
+    if (pendingDelete.value)
+      inbox.value = inbox.value.filter(m => m.id !== pendingDelete.value!.id);
+
+    pendingDelete.value = null;
+  },
+  5000,
+  { immediate: false },
+);
+
+function archive(mail: Mail) {
+  stop();
+  pendingDelete.value = mail;
+  start();
+}
+
+function undo() {
+  stop();
+  pendingDelete.value = null;
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-3">
+    <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Inbox · undo with grace period</span>
+
+    <ul v-if="inbox.length" class="flex flex-col gap-2">
+      <li
+        v-for="mail in inbox"
+        :key="mail.id"
+        class="flex items-center justify-between gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-3 transition"
+        :class="{ 'opacity-40': pendingDelete?.id === mail.id }"
+      >
+        <div class="min-w-0">
+          <div class="truncate text-sm font-medium text-(--fg)">{{ mail.subject }}</div>
+          <div class="truncate text-xs text-(--fg-muted)">{{ mail.from }}</div>
+        </div>
+        <button
+          type="button"
+          :disabled="isPending"
+          class="shrink-0 inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          @click="archive(mail)"
+        >
+          Archive
+        </button>
+      </li>
+    </ul>
+
+    <div v-else class="rounded-xl border border-dashed border-(--border) bg-(--bg-inset) p-6 text-center text-sm text-(--fg-subtle)">
+      Inbox zero — everything archived.
+    </div>
+
+    <Transition
+      enter-active-class="transition duration-200" enter-from-class="opacity-0 translate-y-1"
+      leave-active-class="transition duration-150" leave-to-class="opacity-0 translate-y-1"
+    >
+      <div
+        v-if="isPending && pendingDelete"
+        class="flex items-center justify-between gap-3 rounded-lg border border-amber-500/30 bg-amber-500/10 px-3 py-2"
+      >
+        <span class="flex items-center gap-2 text-sm text-amber-700 dark:text-amber-400">
+          <span class="size-1.5 animate-pulse rounded-full bg-amber-500" />
+          Archiving “{{ pendingDelete.subject }}”…
+        </span>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-md px-2 py-0.5 text-sm font-semibold text-amber-700 underline-offset-2 transition hover:underline dark:text-amber-400 cursor-pointer"
+          @click="undo"
+        >
+          Undo
+        </button>
+      </div>
+    </Transition>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/animation/useTimeoutFn/index.test.ts b/vue/toolkit/src/composables/animation/useTimeoutFn/index.test.ts
new file mode 100644
index 0000000..9d8b71e
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useTimeoutFn/index.test.ts
@@ -0,0 +1,117 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, ref } from 'vue';
+import { useTimeoutFn } from '.';
+
+describe(useTimeoutFn, () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+
+  it('calls the callback after the interval', () => {
+    const cb = vi.fn();
+    const { isPending } = useTimeoutFn(cb, 100);
+
+    expect(isPending.value).toBeTruthy();
+    expect(cb).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(100);
+    expect(cb).toHaveBeenCalledOnce();
+    expect(isPending.value).toBeFalsy();
+  });
+
+  it('does not start when immediate is false', () => {
+    const cb = vi.fn();
+    const { isPending } = useTimeoutFn(cb, 100, { immediate: false });
+
+    expect(isPending.value).toBeFalsy();
+    vi.advanceTimersByTime(100);
+    expect(cb).not.toHaveBeenCalled();
+  });
+
+  it('start forwards arguments to the callback', () => {
+    const cb = vi.fn();
+    const { start } = useTimeoutFn(cb, 100, { immediate: false });
+
+    start('x', 1);
+    vi.advanceTimersByTime(100);
+    expect(cb).toHaveBeenCalledWith('x', 1);
+  });
+
+  it('restarting before the timeout fires only invokes the callback once with the latest args', () => {
+    const cb = vi.fn();
+    const { start } = useTimeoutFn(cb, 100, { immediate: false });
+
+    start('first');
+    vi.advanceTimersByTime(50);
+    start('second');
+    vi.advanceTimersByTime(50);
+    expect(cb).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(50);
+    expect(cb).toHaveBeenCalledOnce();
+    expect(cb).toHaveBeenCalledWith('second');
+  });
+
+  it('reads the interval reactively each time start runs', () => {
+    const cb = vi.fn();
+    const delay = ref(100);
+    const { start } = useTimeoutFn(cb, delay, { immediate: false });
+
+    start();
+    vi.advanceTimersByTime(100);
+    expect(cb).toHaveBeenCalledOnce();
+
+    delay.value = 500;
+    start();
+    vi.advanceTimersByTime(100);
+    expect(cb).toHaveBeenCalledOnce();
+    vi.advanceTimersByTime(400);
+    expect(cb).toHaveBeenCalledTimes(2);
+  });
+
+  describe('immediateCallback', () => {
+    it('invokes the callback synchronously on start and again after the delay', () => {
+      const cb = vi.fn();
+      const { start } = useTimeoutFn(cb, 100, {
+        immediate: false,
+        immediateCallback: true,
+      });
+
+      start('a');
+      expect(cb).toHaveBeenCalledOnce();
+      expect(cb).toHaveBeenCalledWith('a');
+
+      vi.advanceTimersByTime(100);
+      expect(cb).toHaveBeenCalledTimes(2);
+      expect(cb).toHaveBeenLastCalledWith('a');
+    });
+
+    it('fires synchronously during immediate auto-start', () => {
+      const cb = vi.fn();
+      useTimeoutFn(cb, 100, { immediateCallback: true });
+
+      expect(cb).toHaveBeenCalledOnce();
+      vi.advanceTimersByTime(100);
+      expect(cb).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  it('stop cancels a pending timeout', () => {
+    const cb = vi.fn();
+    const { stop, isPending } = useTimeoutFn(cb, 100);
+
+    stop();
+    expect(isPending.value).toBeFalsy();
+    vi.advanceTimersByTime(100);
+    expect(cb).not.toHaveBeenCalled();
+  });
+
+  it('cleans up on scope dispose', () => {
+    const cb = vi.fn();
+    const scope = effectScope();
+    scope.run(() => useTimeoutFn(cb, 100));
+
+    scope.stop();
+    vi.advanceTimersByTime(100);
+    expect(cb).not.toHaveBeenCalled();
+  });
+});
diff --git a/vue/toolkit/src/composables/animation/useTimeoutFn/index.ts b/vue/toolkit/src/composables/animation/useTimeoutFn/index.ts
new file mode 100644
index 0000000..ab769f6
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useTimeoutFn/index.ts
@@ -0,0 +1,117 @@
+import { readonly, ref, toValue } from 'vue';
+import type { MaybeRefOrGetter, Ref } from 'vue';
+import type { AnyFunction } from '@robonen/stdlib';
+import { isClient } from '@robonen/platform/multi';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+
+export interface UseTimeoutFnOptions {
+  /**
+   * Start the timeout immediately when the composable is created
+   *
+   * @default true
+   */
+  immediate?: boolean;
+
+  /**
+   * Invoke the callback synchronously the moment `start` is called,
+   * in addition to the scheduled invocation after the delay elapses
+   *
+   * @default false
+   */
+  immediateCallback?: boolean;
+}
+
+export interface UseTimeoutFnReturn<Args extends any[]> {
+  /**
+   * Whether the timeout is currently pending
+   */
+  isPending: Readonly<Ref<boolean>>;
+
+  /**
+   * Start (or restart) the timeout
+   */
+  start: (...args: Args) => void;
+
+  /**
+   * Cancel the pending timeout
+   */
+  stop: () => void;
+}
+
+/**
+ * @name useTimeoutFn
+ * @category Animation
+ * @description Call a function after a given delay, with manual `start`/`stop`
+ * control and a reactive `isPending` flag. SSR-safe and cleans up on scope dispose.
+ *
+ * @param {T} cb The function to call after the timeout
+ * @param {MaybeRefOrGetter<number>} interval Delay in milliseconds (resolved each time `start` runs, can be reactive)
+ * @param {UseTimeoutFnOptions} [options={}] Options
+ * @returns {UseTimeoutFnReturn} Timeout controls
+ *
+ * @example
+ * const { isPending, start, stop } = useTimeoutFn(() => {
+ *   console.log('fired');
+ * }, 1000);
+ *
+ * @example
+ * // Fire once now and again after the delay
+ * useTimeoutFn(refresh, 5000, { immediateCallback: true });
+ *
+ * @since 0.0.15
+ */
+export function useTimeoutFn<T extends AnyFunction>(
+  cb: T,
+  interval: MaybeRefOrGetter<number>,
+  options: UseTimeoutFnOptions = {},
+): UseTimeoutFnReturn<Parameters<T>> {
+  const {
+    immediate = true,
+    immediateCallback = false,
+  } = options;
+
+  const isPending = ref(false);
+
+  let timer: ReturnType<typeof setTimeout> | null = null;
+
+  function clear() {
+    if (timer !== null) {
+      clearTimeout(timer);
+      timer = null;
+    }
+  }
+
+  function stop() {
+    isPending.value = false;
+    clear();
+  }
+
+  function start(...args: Parameters<T>) {
+    if (immediateCallback)
+      cb(...args);
+
+    clear();
+    isPending.value = true;
+
+    timer = setTimeout(() => {
+      isPending.value = false;
+      timer = null;
+      cb(...args);
+    }, toValue(interval));
+  }
+
+  if (immediate) {
+    isPending.value = true;
+
+    if (isClient)
+      start(...([] as unknown as Parameters<T>));
+  }
+
+  tryOnScopeDispose(stop);
+
+  return {
+    isPending: readonly(isPending),
+    start,
+    stop,
+  };
+}
diff --git a/vue/toolkit/src/composables/animation/useTimestamp/demo.vue b/vue/toolkit/src/composables/animation/useTimestamp/demo.vue
new file mode 100644
index 0000000..826edea
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useTimestamp/demo.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useTimestamp } from './index';
+
+const interval = ref(1000);
+const offset = ref(0);
+
+const { timestamp, isActive, pause, resume } = useTimestamp({
+  controls: true,
+  interval: 1000,
+  offset,
+});
+
+const clockTime = computed(() =>
+  new Date(timestamp.value).toLocaleTimeString(undefined, {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false,
+  }),
+);
+
+const clockDate = computed(() =>
+  new Date(timestamp.value).toLocaleDateString(undefined, {
+    weekday: 'short',
+    month: 'short',
+    day: 'numeric',
+  }),
+);
+
+function toggle() {
+  if (isActive.value)
+    pause();
+  else
+    resume();
+}
+
+function shift(ms: number) {
+  offset.value += ms;
+}
+
+function resetOffset() {
+  offset.value = 0;
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 text-center">
+      <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Reactive timestamp
+      </div>
+      <div class="mt-2 font-mono text-3xl font-bold tabular-nums text-(--fg)">
+        {{ clockTime }}
+      </div>
+      <div class="mt-1 text-sm text-(--fg-muted)">
+        {{ clockDate }}
+      </div>
+      <div class="mt-3 flex items-center justify-center gap-2 text-xs text-(--fg-subtle)">
+        <span
+          class="inline-block size-2 rounded-full transition"
+          :class="isActive ? 'bg-emerald-500' : 'bg-(--border-strong)'"
+        />
+        {{ isActive ? 'Updating every second' : 'Paused' }}
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+      {{ Math.round(timestamp) }} ms
+    </div>
+
+    <div class="flex items-center justify-between gap-2">
+      <button
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="toggle"
+      >
+        {{ isActive ? 'Pause' : 'Resume' }}
+      </button>
+
+      <div class="flex items-center gap-2">
+        <button
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="shift(-3600_000)"
+        >
+          -1h
+        </button>
+        <button
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="shift(3600_000)"
+        >
+          +1h
+        </button>
+      </div>
+    </div>
+
+    <div class="flex items-center justify-between text-sm text-(--fg-muted)">
+      <span>
+        Offset:
+        <span class="font-mono text-(--fg) tabular-nums">{{ (offset / 3600_000).toFixed(0) }}h</span>
+      </span>
+      <button
+        class="text-(--accent-text) transition hover:underline disabled:cursor-not-allowed disabled:opacity-40 cursor-pointer"
+        :disabled="offset === 0"
+        @click="resetOffset"
+      >
+        Reset offset
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/animation/useTimestamp/index.test.ts b/vue/toolkit/src/composables/animation/useTimestamp/index.test.ts
new file mode 100644
index 0000000..9c0c0d0
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useTimestamp/index.test.ts
@@ -0,0 +1,96 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { ref } from 'vue';
+import { useTimestamp } from '.';
+
+describe(useTimestamp, () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(1000);
+  });
+  afterEach(() => vi.useRealTimers());
+
+  it('returns the current timestamp', () => {
+    const ts = useTimestamp({ interval: 100 });
+    expect(ts.value).toBe(1000);
+  });
+
+  it('applies the offset', () => {
+    const ts = useTimestamp({ interval: 100, offset: 500 });
+    expect(ts.value).toBe(1500);
+  });
+
+  it('updates on the interval', () => {
+    const ts = useTimestamp({ interval: 100 });
+
+    // advanceTimersByTime also advances the mocked clock, so the tick fires at 1100
+    vi.advanceTimersByTime(100);
+    expect(ts.value).toBe(1100);
+  });
+
+  it('exposes controls when controls: true', () => {
+    const { timestamp, pause } = useTimestamp({ controls: true, interval: 100 });
+
+    vi.advanceTimersByTime(100);
+    expect(timestamp.value).toBe(1100);
+
+    pause();
+    vi.advanceTimersByTime(100);
+    expect(timestamp.value).toBe(1100);
+  });
+
+  it('exposes isActive in the controls and reflects pause/resume', () => {
+    const { isActive, pause, resume } = useTimestamp({ controls: true, interval: 100 });
+
+    expect(isActive.value).toBeTruthy();
+
+    pause();
+    expect(isActive.value).toBeFalsy();
+
+    resume();
+    expect(isActive.value).toBeTruthy();
+  });
+
+  it('does not start updating when immediate is false', () => {
+    const { timestamp, isActive } = useTimestamp({ controls: true, interval: 100, immediate: false });
+
+    expect(isActive.value).toBeFalsy();
+
+    vi.advanceTimersByTime(100);
+    expect(timestamp.value).toBe(1000);
+  });
+
+  it('invokes the callback on every update with the current timestamp', () => {
+    const callback = vi.fn();
+    useTimestamp({ interval: 100, callback });
+
+    vi.advanceTimersByTime(100);
+    expect(callback).toHaveBeenCalledTimes(1);
+    expect(callback).toHaveBeenLastCalledWith(1100);
+
+    vi.advanceTimersByTime(100);
+    expect(callback).toHaveBeenCalledTimes(2);
+    expect(callback).toHaveBeenLastCalledWith(1200);
+  });
+
+  it('supports a reactive offset that recomputes on the next update', () => {
+    const offset = ref(0);
+    const ts = useTimestamp({ interval: 100, offset });
+
+    expect(ts.value).toBe(1000);
+
+    offset.value = 500;
+    vi.advanceTimersByTime(100);
+    expect(ts.value).toBe(1600);
+  });
+
+  it('supports a getter offset', () => {
+    let extra = 0;
+    const ts = useTimestamp({ interval: 100, offset: () => extra });
+
+    expect(ts.value).toBe(1000);
+
+    extra = 250;
+    vi.advanceTimersByTime(100);
+    expect(ts.value).toBe(1350);
+  });
+});
diff --git a/vue/toolkit/src/composables/animation/useTimestamp/index.ts b/vue/toolkit/src/composables/animation/useTimestamp/index.ts
new file mode 100644
index 0000000..189be41
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useTimestamp/index.ts
@@ -0,0 +1,123 @@
+import { shallowRef, toValue } from 'vue';
+import type { MaybeRefOrGetter, Ref } from 'vue';
+import { timestamp } from '@robonen/stdlib';
+import type { ResumableActions } from '@/types';
+import { useRafFn } from '@/composables/animation/useRafFn';
+import { useIntervalFn } from '@/composables/animation/useIntervalFn';
+
+export interface UseTimestampOptions<Controls extends boolean> {
+  /**
+   * Expose pause/resume controls alongside the timestamp
+   *
+   * @default false
+   */
+  controls?: Controls;
+
+  /**
+   * Offset added to the timestamp in milliseconds. Accepts a reactive value
+   * (ref or getter); the timestamp recomputes with the latest offset on the
+   * next update.
+   *
+   * @default 0
+   */
+  offset?: MaybeRefOrGetter<number>;
+
+  /**
+   * Start updating immediately
+   *
+   * @default true
+   */
+  immediate?: boolean;
+
+  /**
+   * Update strategy. `'requestAnimationFrame'` updates every frame; a number
+   * updates on a fixed interval (ms).
+   *
+   * @default 'requestAnimationFrame'
+   */
+  interval?: 'requestAnimationFrame' | number;
+
+  /**
+   * Callback invoked on every update with the current timestamp
+   */
+  callback?: (timestamp: number) => void;
+}
+
+/**
+ * Pause/resume controls returned when `controls: true`.
+ */
+export interface UseTimestampControls extends ResumableActions {
+  /**
+   * The reactive timestamp
+   */
+  timestamp: Ref<number>;
+
+  /**
+   * Whether the updater (RAF loop or interval) is currently active
+   */
+  isActive: Readonly<Ref<boolean>>;
+}
+
+export type UseTimestampReturn<Controls extends boolean> = Controls extends true
+  ? UseTimestampControls
+  : Ref<number>;
+
+/**
+ * @name useTimestamp
+ * @category Animation
+ * @description Reactive current timestamp, updated via `requestAnimationFrame`
+ * or a fixed interval.
+ *
+ * @param {UseTimestampOptions} [options={}] Options
+ * @returns {Ref<number> | UseTimestampControls} The timestamp, or controls when `controls: true`
+ *
+ * @example
+ * const now = useTimestamp();
+ *
+ * @example
+ * const { timestamp, pause, resume, isActive } = useTimestamp({ controls: true, interval: 1000 });
+ *
+ * @example
+ * // Reactive offset
+ * const offset = ref(0);
+ * const now = useTimestamp({ offset });
+ *
+ * @since 0.0.15
+ */
+export function useTimestamp(options?: UseTimestampOptions<false>): Ref<number>;
+export function useTimestamp(options: UseTimestampOptions<true>): UseTimestampControls;
+export function useTimestamp(
+  options: UseTimestampOptions<boolean> = {},
+): Ref<number> | UseTimestampControls {
+  const {
+    controls = false,
+    offset = 0,
+    immediate = true,
+    interval = 'requestAnimationFrame',
+    callback,
+  } = options;
+
+  const ts = shallowRef(timestamp() + toValue(offset));
+
+  const update = callback
+    ? () => {
+        ts.value = timestamp() + toValue(offset);
+        callback(ts.value);
+      }
+    : () => {
+        ts.value = timestamp() + toValue(offset);
+      };
+
+  const resumableControls = interval === 'requestAnimationFrame'
+    ? useRafFn(update, { immediate })
+    : useIntervalFn(update, interval, { immediate });
+
+  if (controls) {
+    return {
+      timestamp: ts,
+      ...resumableControls,
+    };
+  }
+
+  return ts;
+}
diff --git a/vue/toolkit/src/composables/animation/useTransition/demo.vue b/vue/toolkit/src/composables/animation/useTransition/demo.vue
new file mode 100644
index 0000000..a94bcf9
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useTransition/demo.vue
@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { TransitionPresets, useTransition } from './index';
+
+type PresetName = keyof typeof TransitionPresets;
+
+const presetNames = Object.keys(TransitionPresets) as PresetName[];
+const preset = ref<PresetName>('easeOutCubic');
+const duration = ref(800);
+
+// Animated progress value (0–100).
+const target = ref(72);
+const value = useTransition(target, {
+  duration,
+  transition: computed(() => TransitionPresets[preset.value]),
+});
+
+// Animated color tuple (RGB).
+const swatches: Array<[string, [number, number, number]]> = [
+  ['Indigo', [99, 102, 241]],
+  ['Emerald', [16, 185, 129]],
+  ['Amber', [245, 158, 11]],
+  ['Rose', [244, 63, 94]],
+];
+const colorTarget = ref<[number, number, number]>([99, 102, 241]);
+const color = useTransition(colorTarget, {
+  duration: 600,
+  transition: TransitionPresets.easeInOutQuad,
+});
+
+const colorCss = computed(() => {
+  const [r, g, b] = color.value;
+  return `rgb(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)})`;
+});
+
+function randomize() {
+  target.value = Math.round(Math.random() * 100);
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-5">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex items-baseline justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Eased value
+        </span>
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">
+          {{ value.toFixed(1) }}
+        </span>
+      </div>
+
+      <div class="mt-3 h-2.5 w-full overflow-hidden rounded-full bg-(--bg-inset)">
+        <div
+          class="h-full rounded-full bg-(--accent)"
+          :style="{ width: `${Math.max(0, Math.min(100, value))}%` }"
+        />
+      </div>
+
+      <div class="mt-4 flex items-center gap-3">
+        <input
+          v-model.number="target"
+          type="range"
+          min="0"
+          max="100"
+          class="h-1.5 flex-1 cursor-pointer accent-(--accent)"
+        >
+        <button
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="randomize"
+        >
+          Random
+        </button>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Easing preset
+      </label>
+      <select
+        v-model="preset"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+        <option v-for="name in presetNames" :key="name" :value="name">
+          {{ name }}
+        </option>
+      </select>
+
+      <label class="mt-1 flex items-center justify-between text-sm text-(--fg-muted)">
+        <span>Duration</span>
+        <span class="font-mono text-(--fg) tabular-nums">{{ duration }}ms</span>
+      </label>
+      <input
+        v-model.number="duration"
+        type="range"
+        min="100"
+        max="2000"
+        step="100"
+        class="h-1.5 w-full cursor-pointer accent-(--accent)"
+      >
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex items-center gap-3">
+        <div
+          class="size-12 shrink-0 rounded-lg border border-(--border)"
+          :style="{ backgroundColor: colorCss }"
+        />
+        <div class="min-w-0">
+          <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+            Animated tuple
+          </div>
+          <div class="font-mono text-sm text-(--fg) tabular-nums">
+            {{ colorCss }}
+          </div>
+        </div>
+      </div>
+
+      <div class="mt-3 flex flex-wrap gap-2">
+        <button
+          v-for="[label, rgb] in swatches"
+          :key="label"
+          class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted) transition hover:border-(--border-strong) cursor-pointer"
+          @click="colorTarget = [...rgb]"
+        >
+          <span class="size-2.5 rounded-full" :style="{ backgroundColor: `rgb(${rgb.join(',')})` }" />
+          {{ label }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/animation/useTransition/index.test.ts b/vue/toolkit/src/composables/animation/useTransition/index.test.ts
new file mode 100644
index 0000000..531f066
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useTransition/index.test.ts
@@ -0,0 +1,315 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, ref } from 'vue';
+import {
+  TransitionPresets,
+  useTransition,
+} from '@/composables/animation/useTransition';
+
+// A controllable window stub: requestAnimationFrame frames are flushed
+// manually via `frame()`, and timers are driven by vitest fake timers.
+function createWindowStub() {
+  let rafId = 0;
+  const callbacks = new Map<number, FrameRequestCallback>();
+
+  const win = {
+    requestAnimationFrame: (cb: FrameRequestCallback) => {
+      const id = ++rafId;
+      callbacks.set(id, cb);
+      return id;
+    },
+    cancelAnimationFrame: (id: number) => {
+      callbacks.delete(id);
+    },
+    setTimeout: (fn: (...args: unknown[]) => void, ms?: number) =>
+      setTimeout(fn, ms) as unknown as number,
+    clearTimeout: (id: number) => clearTimeout(id),
+  } as unknown as Window;
+
+  function frame() {
+    const pending = [...callbacks.entries()];
+    callbacks.clear();
+    for (const [, cb] of pending)
+      cb(Date.now());
+  }
+
+  return { win, frame, get pending() {
+    return callbacks.size;
+  } };
+}
+
+describe(useTransition, () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  it('seeds output with the initial source value', () => {
+    const { win } = createWindowStub();
+    const scope = effectScope();
+
+    scope.run(() => {
+      const output = useTransition(ref(5), { window: win });
+      expect(output.value).toBe(5);
+    });
+
+    scope.stop();
+  });
+
+  it('transitions a number from old to new over the duration', async () => {
+    const { win, frame } = createWindowStub();
+    vi.setSystemTime(0);
+    const scope = effectScope();
+    const source = ref(0);
+    let output!: ReturnType<typeof useTransition<number>>;
+
+    scope.run(() => {
+      output = useTransition(source, { duration: 100, window: win });
+    });
+
+    source.value = 100;
+    await nextTick();
+
+    // Halfway through.
+    vi.setSystemTime(50);
+    frame();
+    expect(output.value).toBeCloseTo(50, 5);
+
+    // End.
+    vi.setSystemTime(100);
+    frame();
+    expect(output.value).toBe(100);
+
+    scope.stop();
+  });
+
+  it('fires onStarted and onFinished', async () => {
+    const { win, frame } = createWindowStub();
+    vi.setSystemTime(0);
+    const onStarted = vi.fn();
+    const onFinished = vi.fn();
+    const scope = effectScope();
+    const source = ref(0);
+
+    scope.run(() => {
+      useTransition(source, { duration: 100, window: win, onStarted, onFinished });
+    });
+
+    source.value = 10;
+    await nextTick();
+
+    expect(onStarted).toHaveBeenCalledTimes(1);
+    expect(onFinished).not.toHaveBeenCalled();
+
+    vi.setSystemTime(100);
+    frame();
+
+    expect(onFinished).toHaveBeenCalledTimes(1);
+
+    scope.stop();
+  });
+
+  it('transitions numeric arrays element-wise', async () => {
+    const { win, frame } = createWindowStub();
+    vi.setSystemTime(0);
+    const scope = effectScope();
+    const source = ref([0, 100]);
+    let output!: ReturnType<typeof useTransition<number[]>>;
+
+    scope.run(() => {
+      output = useTransition(source, { duration: 100, window: win });
+    });
+
+    source.value = [100, 0];
+    await nextTick();
+
+    vi.setSystemTime(50);
+    frame();
+    expect(output.value[0]).toBeCloseTo(50, 5);
+    expect(output.value[1]).toBeCloseTo(50, 5);
+
+    vi.setSystemTime(100);
+    frame();
+    expect(output.value).toEqual([100, 0]);
+
+    scope.stop();
+  });
+
+  it('applies an easing preset (eased value differs from linear midpoint)', async () => {
+    const { win, frame } = createWindowStub();
+    vi.setSystemTime(0);
+    const scope = effectScope();
+    const source = ref(0);
+    let output!: ReturnType<typeof useTransition<number>>;
+
+    scope.run(() => {
+      output = useTransition(source, {
+        duration: 100,
+        transition: TransitionPresets.easeInCubic,
+        window: win,
+      });
+    });
+
+    source.value = 100;
+    await nextTick();
+
+    vi.setSystemTime(50);
+    frame();
+    // easeInCubic at t=0.5 is well below the linear midpoint of 50.
+    expect(output.value).toBeLessThan(50);
+    expect(output.value).toBeGreaterThan(0);
+
+    scope.stop();
+  });
+
+  it('accepts a custom easing function', async () => {
+    const { win, frame } = createWindowStub();
+    vi.setSystemTime(0);
+    const scope = effectScope();
+    const source = ref(0);
+    const easing = vi.fn((n: number) => n);
+    let output!: ReturnType<typeof useTransition<number>>;
+
+    scope.run(() => {
+      output = useTransition(source, { duration: 100, transition: easing, window: win });
+    });
+
+    source.value = 100;
+    await nextTick();
+
+    vi.setSystemTime(50);
+    frame();
+
+    expect(easing).toHaveBeenCalled();
+    expect(output.value).toBeCloseTo(50, 5);
+
+    scope.stop();
+  });
+
+  it('delays the start of a transition', async () => {
+    const { win, frame } = createWindowStub();
+    vi.setSystemTime(0);
+    const onStarted = vi.fn();
+    const scope = effectScope();
+    const source = ref(0);
+
+    scope.run(() => {
+      useTransition(source, { duration: 100, delay: 200, window: win, onStarted });
+    });
+
+    source.value = 100;
+    await nextTick();
+
+    // Still in the delay window: not started yet.
+    expect(onStarted).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(200);
+    expect(onStarted).toHaveBeenCalledTimes(1);
+
+    vi.setSystemTime(200);
+    frame();
+    expect(onStarted).toHaveBeenCalledTimes(1);
+
+    scope.stop();
+  });
+
+  it('snaps instantly when disabled and tracks the source', async () => {
+    const { win, frame, pending } = createWindowStub();
+    const scope = effectScope();
+    const source = ref(0);
+    let output!: ReturnType<typeof useTransition<number>>;
+
+    scope.run(() => {
+      output = useTransition(source, { duration: 100, disabled: true, window: win });
+    });
+
+    source.value = 42;
+    await nextTick();
+
+    expect(output.value).toBe(42);
+    expect(pending).toBe(0);
+    frame();
+    expect(output.value).toBe(42);
+
+    scope.stop();
+  });
+
+  it('disabling mid-transition snaps to the source', async () => {
+    const { win, frame } = createWindowStub();
+    vi.setSystemTime(0);
+    const scope = effectScope();
+    const source = ref(0);
+    const disabled = ref(false);
+    let output!: ReturnType<typeof useTransition<number>>;
+
+    scope.run(() => {
+      output = useTransition(source, { duration: 100, disabled, window: win });
+    });
+
+    source.value = 100;
+    await nextTick();
+
+    vi.setSystemTime(50);
+    frame();
+    expect(output.value).toBeCloseTo(50, 5);
+
+    disabled.value = true;
+    await nextTick();
+
+    expect(output.value).toBe(100);
+
+    scope.stop();
+  });
+
+  it('jumps immediately when duration is zero', async () => {
+    const { win } = createWindowStub();
+    vi.setSystemTime(0);
+    const onFinished = vi.fn();
+    const scope = effectScope();
+    const source = ref(0);
+    let output!: ReturnType<typeof useTransition<number>>;
+
+    scope.run(() => {
+      output = useTransition(source, { duration: 0, window: win, onFinished });
+    });
+
+    source.value = 100;
+    await nextTick();
+
+    expect(output.value).toBe(100);
+    expect(onFinished).toHaveBeenCalledTimes(1);
+
+    scope.stop();
+  });
+
+  it('is SSR-safe: without a window it mirrors the source synchronously', async () => {
+    const onFinished = vi.fn();
+    const scope = effectScope();
+    const source = ref(0);
+    let output!: ReturnType<typeof useTransition<number>>;
+
+    scope.run(() => {
+      output = useTransition(source, { duration: 100, window: undefined, onFinished });
+    });
+
+    expect(output.value).toBe(0);
+
+    source.value = 100;
+    await nextTick();
+
+    // No RAF available: transition resolves immediately to the target.
+    expect(output.value).toBe(100);
+    expect(onFinished).toHaveBeenCalledTimes(1);
+
+    scope.stop();
+  });
+
+  it('exposes the documented easing presets', () => {
+    expect(TransitionPresets.linear).toEqual([0, 0, 1, 1]);
+    expect(TransitionPresets.easeInOutCubic).toEqual([0.65, 0, 0.35, 1]);
+    expect(Object.keys(TransitionPresets)).toContain('easeOutBack');
+  });
+});
diff --git a/vue/toolkit/src/composables/animation/useTransition/index.ts b/vue/toolkit/src/composables/animation/useTransition/index.ts
new file mode 100644
index 0000000..23f6b48
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useTransition/index.ts
@@ -0,0 +1,360 @@
+import { computed, ref, toValue, watch } from 'vue';
+import type { MaybeRefOrGetter, Ref } from 'vue';
+import { clamp, isFunction, isNumber, lerp, noop } from '@robonen/stdlib';
+import { defaultWindow } from '@/types';
+import type { ConfigurableWindow } from '@/types';
+import { useRafFn } from '@/composables/animation/useRafFn';
+
+/**
+ * Cubic bezier control points `[x1, y1, x2, y2]` (the implied endpoints are
+ * `(0, 0)` and `(1, 1)`), matching the CSS `cubic-bezier()` argument order.
+ */
+export type CubicBezierPoints = [number, number, number, number];
+
+/**
+ * An easing function mapping linear progress in `[0, 1]` to eased progress.
+ */
+export type EasingFunction = (n: number) => number;
+
+/**
+ * Interpolates between two values of `T` given an eased progress `alpha`.
+ */
+export type TransitionInterpolation<T> = (from: T, to: T, alpha: number) => T;
+
+/**
+ * The transition easing: either a cubic bezier tuple or a custom easing function.
+ */
+export type TransitionEasing = CubicBezierPoints | EasingFunction;
+
+/**
+ * Values that can be transitioned: a single number or a fixed-length number array.
+ */
+export type TransitionValue = number | number[];
+
+/**
+ * Common cubic bezier easing presets (same curves as CSS / VueUse).
+ */
+export const TransitionPresets = {
+  linear: [0, 0, 1, 1],
+  easeInSine: [0.12, 0, 0.39, 0],
+  easeOutSine: [0.61, 1, 0.88, 1],
+  easeInOutSine: [0.37, 0, 0.63, 1],
+  easeInQuad: [0.11, 0, 0.5, 0],
+  easeOutQuad: [0.5, 1, 0.89, 1],
+  easeInOutQuad: [0.45, 0, 0.55, 1],
+  easeInCubic: [0.32, 0, 0.67, 0],
+  easeOutCubic: [0.33, 1, 0.68, 1],
+  easeInOutCubic: [0.65, 0, 0.35, 1],
+  easeInQuart: [0.5, 0, 0.75, 0],
+  easeOutQuart: [0.25, 1, 0.5, 1],
+  easeInOutQuart: [0.76, 0, 0.24, 1],
+  easeInQuint: [0.64, 0, 0.78, 0],
+  easeOutQuint: [0.22, 1, 0.36, 1],
+  easeInOutQuint: [0.83, 0, 0.17, 1],
+  easeInExpo: [0.7, 0, 0.84, 0],
+  easeOutExpo: [0.16, 1, 0.3, 1],
+  easeInOutExpo: [0.87, 0, 0.13, 1],
+  easeInCirc: [0.55, 0, 1, 0.45],
+  easeOutCirc: [0, 0.55, 0.45, 1],
+  easeInOutCirc: [0.85, 0, 0.15, 1],
+  easeInBack: [0.36, 0, 0.66, -0.56],
+  easeOutBack: [0.34, 1.56, 0.64, 1],
+  easeInOutBack: [0.68, -0.6, 0.32, 1.6],
+} satisfies Record<string, CubicBezierPoints>;
+
+export interface UseTransitionOptions {
+  /**
+   * Transition duration in milliseconds. Accepts a reactive value (resolved
+   * at the start of each transition).
+   *
+   * @default 1000
+   */
+  duration?: MaybeRefOrGetter<number>;
+
+  /**
+   * Easing applied to the progress: a cubic bezier tuple (e.g. one of
+   * {@link TransitionPresets}) or a custom easing function.
+   *
+   * @default identity (linear)
+   */
+  transition?: MaybeRefOrGetter<TransitionEasing>;
+
+  /**
+   * Delay in milliseconds before a transition begins after the source changes.
+   *
+   * @default 0
+   */
+  delay?: MaybeRefOrGetter<number>;
+
+  /**
+   * When `true`, transitions are skipped and the output tracks the source
+   * value directly (no animation). Reactive.
+   *
+   * @default false
+   */
+  disabled?: MaybeRefOrGetter<boolean>;
+
+  /**
+   * Called when a transition starts.
+   */
+  onStarted?: () => void;
+
+  /**
+   * Called when a transition finishes (not called when aborted by a new change).
+   */
+  onFinished?: () => void;
+}
+
+export type UseTransitionReturn<T> = Readonly<Ref<T>>;
+
+const identity: EasingFunction = n => n;
+
+interface BezierCoefficients {
+  a: (a1: number, a2: number) => number;
+  b: (a1: number, a2: number) => number;
+  c: (a1: number) => number;
+}
+
+function createEasingFunction(points: CubicBezierPoints): EasingFunction {
+  const [p0, p1, p2, p3] = points;
+
+  const coeffs: BezierCoefficients = {
+    a: (a1, a2) => 1 - 3 * a2 + 3 * a1,
+    b: (a1, a2) => 3 * a2 - 6 * a1,
+    c: a1 => 3 * a1,
+  };
+
+  const calcBezier = (t: number, a1: number, a2: number): number =>
+    ((coeffs.a(a1, a2) * t + coeffs.b(a1, a2)) * t + coeffs.c(a1)) * t;
+
+  const getSlope = (t: number, a1: number, a2: number): number =>
+    3 * coeffs.a(a1, a2) * t * t + 2 * coeffs.b(a1, a2) * t + coeffs.c(a1);
+
+  const getTForX = (x: number): number => {
+    let guess = x;
+
+    for (let i = 0; i < 4; ++i) {
+      const slope = getSlope(guess, p0, p2);
+
+      if (slope === 0)
+        return guess;
+
+      const currentX = calcBezier(guess, p0, p2) - x;
+      guess -= currentX / slope;
+    }
+
+    return guess;
+  };
+
+  return n => (p0 === p1 && p2 === p3) ? n : calcBezier(getTForX(n), p1, p3);
+}
+
+function resolveEasing(transition: TransitionEasing | undefined): EasingFunction {
+  if (!transition)
+    return identity;
+
+  if (isFunction(transition))
+    return transition;
+
+  return createEasingFunction(transition);
+}
+
+// Interpolate a single number or a (fixed-length) numeric array.
+function interpolate(from: TransitionValue, to: TransitionValue, alpha: number): TransitionValue {
+  if (isNumber(from) && isNumber(to))
+    return lerp(from, to, alpha);
+
+  const source = from as number[];
+  const target = to as number[];
+
+  return source.map((value, index) => lerp(value, target[index] ?? value, alpha));
+}
+
+function snapshot<T extends TransitionValue>(value: T): T {
+  return (isNumber(value) ? value : (value as number[]).slice()) as T;
+}
+
+function valuesEqual(a: TransitionValue, b: TransitionValue): boolean {
+  if (isNumber(a) && isNumber(b))
+    return a === b;
+
+  if (isNumber(a) || isNumber(b))
+    return false;
+
+  if (a.length !== b.length)
+    return false;
+
+  for (let i = 0; i < a.length; ++i) {
+    if (a[i] !== b[i])
+      return false;
+  }
+
+  return true;
+}
+
+/**
+ * @name useTransition
+ * @category Animation
+ * @description Reactively transition between numeric values (or numeric arrays)
+ * over a duration with configurable easing. Wraps a single, paused
+ * `requestAnimationFrame` loop that only runs while a transition is in flight,
+ * so it is cheaper than re-creating an RAF loop per change. SSR-safe: without a
+ * `window` the output tracks the source synchronously.
+ *
+ * @param {MaybeRefOrGetter<T>} source The reactive source value (number or number[])
+ * @param {UseTransitionOptions & ConfigurableWindow} [options={}] Transition options
+ * @returns {UseTransitionReturn<T>} A readonly ref of the transitioned value
+ *
+ * @example
+ * const progress = ref(0);
+ * const output = useTransition(progress, {
+ *   duration: 500,
+ *   transition: TransitionPresets.easeOutCubic,
+ * });
+ *
+ * @example
+ * // Transition a tuple (e.g. an RGB color)
+ * const color = ref([0, 0, 0]);
+ * const animated = useTransition(color, { duration: 1000 });
+ *
+ * @since 0.0.15
+ */
+export function useTransition<T extends TransitionValue>(
+  source: MaybeRefOrGetter<T>,
+  options: UseTransitionOptions & ConfigurableWindow = {},
+): UseTransitionReturn<T> {
+  const {
+    duration = 1000,
+    transition = identity,
+    delay = 0,
+    disabled = false,
+    onStarted = noop,
+    onFinished = noop,
+  } = options;
+
+  const window = 'window' in options ? options.window : defaultWindow;
+
+  // The animated output. Seeded with a snapshot of the current source.
+  const outputRef = ref(snapshot(toValue(source))) as Ref<T>;
+
+  // Active-transition state. `endpoints` are detached snapshots so that later
+  // source mutations cannot bleed into an in-flight transition.
+  let fromValue: T = outputRef.value;
+  let toValue_: T = outputRef.value;
+  let startedAt = 0;
+  let durationMs = 0;
+  let easing: EasingFunction = identity;
+  let delayTimer: ReturnType<typeof setTimeout> | null = null;
+  let finishPending = false;
+
+  const { pause, resume, isActive } = useRafFn(tick, { immediate: false, window });
+
+  function clearDelay() {
+    if (delayTimer !== null && window) {
+      window.clearTimeout(delayTimer);
+      delayTimer = null;
+    }
+  }
+
+  function settle(value: T) {
+    outputRef.value = snapshot(value);
+
+    if (isActive.value)
+      pause();
+
+    if (finishPending) {
+      finishPending = false;
+      onFinished();
+    }
+  }
+
+  function tick() {
+    const now = Date.now();
+    const alpha = durationMs <= 0 ? 1 : clamp((now - startedAt) / durationMs, 0, 1);
+
+    outputRef.value = interpolate(fromValue, toValue_, easing(alpha)) as T;
+
+    if (alpha >= 1)
+      settle(toValue_);
+  }
+
+  function begin(target: T) {
+    fromValue = snapshot(outputRef.value);
+    toValue_ = snapshot(target);
+
+    durationMs = Math.max(0, toValue(duration));
+    easing = resolveEasing(toValue(transition));
+    startedAt = Date.now();
+    finishPending = true;
+
+    onStarted();
+
+    if (durationMs <= 0 || !window) {
+      settle(toValue_);
+      return;
+    }
+
+    if (!isActive.value)
+      resume();
+  }
+
+  function start(target: T) {
+    clearDelay();
+
+    const delayMs = Math.max(0, toValue(delay));
+
+    if (delayMs > 0 && window) {
+      delayTimer = window.setTimeout(() => {
+        delayTimer = null;
+        begin(target);
+      }, delayMs);
+
+      return;
+    }
+
+    begin(target);
+  }
+
+  watch(
+    () => toValue(source),
+    (value) => {
+      // When disabled, mirror the source instantly and abort any animation.
+      if (toValue(disabled)) {
+        clearDelay();
+
+        if (isActive.value)
+          pause();
+
+        finishPending = false;
+        outputRef.value = snapshot(value);
+
+        return;
+      }
+
+      // Skip no-op changes so we don't restart an identical transition.
+      if (valuesEqual(value, outputRef.value) && !isActive.value && delayTimer === null)
+        return;
+
+      start(value);
+    },
+    { deep: true },
+  );
+
+  // Reacting to `disabled` flipping to true mid-transition: snap to source.
+  watch(
+    () => toValue(disabled),
+    (off) => {
+      if (off) {
+        clearDelay();
+
+        if (isActive.value)
+          pause();
+
+        finishPending = false;
+        outputRef.value = snapshot(toValue(source));
+      }
+    },
+  );
+
+  return computed(() => outputRef.value);
+}
diff --git a/vue/toolkit/src/composables/array/index.ts b/vue/toolkit/src/composables/array/index.ts
new file mode 100644
index 0000000..3620861
--- /dev/null
+++ b/vue/toolkit/src/composables/array/index.ts
@@ -0,0 +1,13 @@
+export * from './useArrayDifference';
+export * from './useArrayEvery';
+export * from './useArrayFilter';
+export * from './useArrayFind';
+export * from './useArrayFindIndex';
+export * from './useArrayFindLast';
+export * from './useArrayIncludes';
+export * from './useArrayJoin';
+export * from './useArrayMap';
+export * from './useArrayReduce';
+export * from './useArraySome';
+export * from './useArrayUnique';
+export * from './useSorted';
diff --git a/vue/toolkit/src/composables/array/useArrayDifference/demo.vue b/vue/toolkit/src/composables/array/useArrayDifference/demo.vue
new file mode 100644
index 0000000..ca2d492
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayDifference/demo.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useArrayDifference } from './index';
+
+interface Track {
+  id: number;
+  title: string;
+}
+
+const library: Track[] = [
+  { id: 1, title: 'Midnight City' },
+  { id: 2, title: 'Strobe' },
+  { id: 3, title: 'Open Eye Signal' },
+  { id: 4, title: 'Innerbloom' },
+  { id: 5, title: 'Teardrop' },
+  { id: 6, title: 'Resonance' },
+];
+
+const list = ref<Track[]>([...library]);
+const playlist = ref<Track[]>([library[1], library[3]]);
+const symmetric = ref(false);
+
+// Compare tracks by their `id` key.
+const diff = useArrayDifference(list, playlist, 'id', {
+  get symmetric() {
+    return symmetric.value;
+  },
+});
+
+function inPlaylist(track: Track) {
+  return playlist.value.some(t => t.id === track.id);
+}
+
+function toggle(track: Track) {
+  if (inPlaylist(track))
+    playlist.value = playlist.value.filter(t => t.id !== track.id);
+  else
+    playlist.value = [...playlist.value, track];
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Library — tap to add / remove from playlist
+      </span>
+      <label class="inline-flex cursor-pointer items-center gap-2 text-sm text-(--fg-muted)">
+        <input
+          v-model="symmetric"
+          type="checkbox"
+          class="size-4 cursor-pointer accent-(--accent)"
+        >
+        Symmetric
+      </label>
+    </div>
+
+    <div class="grid grid-cols-2 gap-2">
+      <button
+        v-for="track in library"
+        :key="track.id"
+        class="inline-flex items-center justify-between gap-2 rounded-lg border px-3 py-2 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+        :class="inPlaylist(track)
+          ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
+          : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+        @click="toggle(track)"
+      >
+        <span class="truncate">{{ track.title }}</span>
+        <span class="shrink-0 text-xs opacity-70">{{ inPlaylist(track) ? '−' : '+' }}</span>
+      </button>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex items-baseline justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          {{ symmetric ? 'In exactly one (XOR)' : 'Not in playlist' }}
+        </span>
+        <span class="font-mono text-sm tabular-nums text-(--fg-muted)">
+          {{ diff.length }}
+        </span>
+      </div>
+
+      <ul v-if="diff.length" class="mt-3 flex flex-wrap gap-2">
+        <li
+          v-for="track in diff"
+          :key="track.id"
+          class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+        >
+          {{ track.title }}
+        </li>
+      </ul>
+      <p v-else class="mt-3 text-sm text-(--fg-subtle)">
+        No difference — every track matches.
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/array/useArrayDifference/index.test.ts b/vue/toolkit/src/composables/array/useArrayDifference/index.test.ts
new file mode 100644
index 0000000..a788ab1
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayDifference/index.test.ts
@@ -0,0 +1,121 @@
+import { describe, expect, it } from 'vitest';
+import { ref } from 'vue';
+import { useArrayDifference } from '.';
+
+describe(useArrayDifference, () => {
+  it('returns the asymmetric difference of two arrays', () => {
+    const list = ref([1, 2, 3, 4, 5]);
+    const values = ref([2, 4]);
+    const diff = useArrayDifference(list, values);
+    expect(diff.value).toEqual([1, 3, 5]);
+  });
+
+  it('returns an empty array when all items are subtracted', () => {
+    const list = ref([1, 2, 3]);
+    const values = ref([1, 2, 3, 4]);
+    const diff = useArrayDifference(list, values);
+    expect(diff.value).toEqual([]);
+  });
+
+  it('returns the full list when values is empty', () => {
+    const list = ref([1, 2, 3]);
+    const values = ref<number[]>([]);
+    const diff = useArrayDifference(list, values);
+    expect(diff.value).toEqual([1, 2, 3]);
+  });
+
+  it('reacts to changes in the source array', () => {
+    const list = ref([1, 2, 3]);
+    const values = ref([2]);
+    const diff = useArrayDifference(list, values);
+    expect(diff.value).toEqual([1, 3]);
+
+    list.value = [1, 2, 3, 4];
+    expect(diff.value).toEqual([1, 3, 4]);
+  });
+
+  it('reacts to changes in the values array', () => {
+    const list = ref([1, 2, 3]);
+    const values = ref([2]);
+    const diff = useArrayDifference(list, values);
+    expect(diff.value).toEqual([1, 3]);
+
+    values.value = [1, 2];
+    expect(diff.value).toEqual([3]);
+  });
+
+  it('accepts getters as sources', () => {
+    const a = ref(1);
+    const b = ref(2);
+    const diff = useArrayDifference(() => [a.value, b.value, 3], () => [b.value]);
+    expect(diff.value).toEqual([1, 3]);
+
+    b.value = 1;
+    expect(diff.value).toEqual([3]);
+  });
+
+  it('compares by key (positional argument)', () => {
+    const list = ref([{ id: 1 }, { id: 2 }, { id: 3 }]);
+    const values = ref([{ id: 2 }]);
+    const diff = useArrayDifference(list, values, 'id');
+    expect(diff.value).toEqual([{ id: 1 }, { id: 3 }]);
+  });
+
+  it('compares with a custom comparator function', () => {
+    const list = ref([1, 2, 3, 4, 5, 6]);
+    const values = ref([2]);
+    // Treat numbers with the same parity as equal.
+    const diff = useArrayDifference(list, values, (a, b) => a % 2 === b % 2);
+    expect(diff.value).toEqual([1, 3, 5]);
+  });
+
+  it('returns the symmetric difference via options', () => {
+    const a = ref([1, 2, 3]);
+    const b = ref([2, 3, 4]);
+    const diff = useArrayDifference(a, b, { symmetric: true });
+    expect(diff.value).toEqual([1, 4]);
+  });
+
+  it('returns the symmetric difference via the trailing options argument', () => {
+    const a = ref([{ id: 1 }, { id: 2 }]);
+    const b = ref([{ id: 2 }, { id: 3 }]);
+    const diff = useArrayDifference(a, b, 'id', { symmetric: true });
+    expect(diff.value).toEqual([{ id: 1 }, { id: 3 }]);
+  });
+
+  it('accepts a comparator inside the options object', () => {
+    const list = ref([1, 2, 3, 4]);
+    const values = ref([20, 30]);
+    const diff = useArrayDifference(list, values, {
+      comparator: (a, b) => a === b / 10,
+    });
+    expect(diff.value).toEqual([1, 4]);
+  });
+
+  it('reacts to source changes when symmetric', () => {
+    const a = ref([1, 2]);
+    const b = ref([2, 3]);
+    const diff = useArrayDifference(a, b, { symmetric: true });
+    expect(diff.value).toEqual([1, 3]);
+
+    a.value = [1, 2, 3];
+    expect(diff.value).toEqual([1]);
+  });
+
+  it('does not mutate the source arrays in symmetric mode', () => {
+    const a = ref([1, 2]);
+    const b = ref([2, 3]);
+    const diff = useArrayDifference(a, b, { symmetric: true });
+    expect(diff.value).toEqual([1, 3]);
+    expect(a.value).toEqual([1, 2]);
+    expect(b.value).toEqual([2, 3]);
+  });
+
+  it('is SSR-safe: never touches window/document/navigator', () => {
+    // Pure computed wrapper — evaluating it relies on no browser globals.
+    const list = ref([1, 2, 3]);
+    const values = ref([2]);
+    const diff = useArrayDifference(list, values);
+    expect(diff.value).toEqual([1, 3]);
+  });
+});
diff --git a/vue/toolkit/src/composables/array/useArrayDifference/index.ts b/vue/toolkit/src/composables/array/useArrayDifference/index.ts
new file mode 100644
index 0000000..96394b9
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayDifference/index.ts
@@ -0,0 +1,133 @@
+import { computed, toValue } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+import { isObject, isString } from '@robonen/stdlib';
+
+/**
+ * Comparator deciding whether two array elements are considered equal.
+ */
+export type UseArrayDifferenceComparatorFn<T>
+  = (value: T, othVal: T) => boolean;
+
+export interface UseArrayDifferenceOptions<T> {
+  /**
+   * When `true`, returns the symmetric difference: items present in exactly one
+   * of the two arrays (`list` XOR `values`). When `false`, returns the
+   * asymmetric difference: items in `list` that are not in `values`.
+   *
+   * @see https://en.wikipedia.org/wiki/Symmetric_difference
+   * @default false
+   */
+  symmetric?: boolean;
+  /**
+   * Custom comparator function, or a key of `T` to compare a single property by.
+   */
+  comparator?: UseArrayDifferenceComparatorFn<T> | keyof T;
+}
+
+export type UseArrayDifferenceReturn<T = any>
+  = ComputedRef<T[]>;
+
+function isArrayDifferenceOptions<T>(value: unknown): value is UseArrayDifferenceOptions<T> {
+  // isObject matches PLAIN objects only, so comparator functions/keys never reach here.
+  return isObject(value) && ('symmetric' in value || 'comparator' in value);
+}
+
+/**
+ * @name useArrayDifference
+ * @category Array
+ * @description Reactive difference of two arrays. Returns items in `list` that are not in `values` (asymmetric), or items in exactly one array (symmetric). Both arrays may be reactive (refs or getters).
+ *
+ * @param {MaybeRefOrGetter<T[]>} list The source array
+ * @param {MaybeRefOrGetter<T[]>} values The array of values to subtract from `list`
+ * @param {UseArrayDifferenceComparatorFn<T> | keyof T | UseArrayDifferenceOptions<T>} [comparator] A comparator function, a key of `T` to compare by, or an options object with `comparator`/`symmetric`
+ * @param {UseArrayDifferenceOptions<T>} [options] Extra options when `comparator` is a function or key
+ * @returns {UseArrayDifferenceReturn<T>} A computed array of the difference
+ *
+ * @example
+ * const list = ref([1, 2, 3, 4, 5]);
+ * const values = ref([2, 4]);
+ * const diff = useArrayDifference(list, values); // [1, 3, 5]
+ *
+ * @example
+ * const list = ref([{ id: 1 }, { id: 2 }, { id: 3 }]);
+ * const values = ref([{ id: 2 }]);
+ * const diff = useArrayDifference(list, values, 'id'); // [{ id: 1 }, { id: 3 }]
+ *
+ * @example
+ * const a = ref([1, 2, 3]);
+ * const b = ref([2, 3, 4]);
+ * const symmetric = useArrayDifference(a, b, { symmetric: true }); // [1, 4]
+ *
+ * @since 0.0.15
+ */
+export function useArrayDifference<T>(
+  list: MaybeRefOrGetter<T[]>,
+  values: MaybeRefOrGetter<T[]>,
+  comparator?: UseArrayDifferenceComparatorFn<T>,
+  options?: UseArrayDifferenceOptions<T>,
+): UseArrayDifferenceReturn<T>;
+export function useArrayDifference<T>(
+  list: MaybeRefOrGetter<T[]>,
+  values: MaybeRefOrGetter<T[]>,
+  comparator?: keyof T,
+  options?: UseArrayDifferenceOptions<T>,
+): UseArrayDifferenceReturn<T>;
+export function useArrayDifference<T>(
+  list: MaybeRefOrGetter<T[]>,
+  values: MaybeRefOrGetter<T[]>,
+  options?: UseArrayDifferenceOptions<T>,
+): UseArrayDifferenceReturn<T>;
+export function useArrayDifference<T>(
+  list: MaybeRefOrGetter<T[]>,
+  values: MaybeRefOrGetter<T[]>,
+  comparator?: UseArrayDifferenceComparatorFn<T> | keyof T | UseArrayDifferenceOptions<T>,
+  options?: UseArrayDifferenceOptions<T>,
+): UseArrayDifferenceReturn<T> {
+  let symmetric = false;
+  let resolved: UseArrayDifferenceComparatorFn<T> | keyof T | undefined;
+
+  if (isArrayDifferenceOptions<T>(comparator)) {
+    symmetric = comparator.symmetric ?? false;
+    resolved = comparator.comparator;
+  }
+  else {
+    resolved = comparator;
+    symmetric = options?.symmetric ?? false;
+    // An explicit comparator/key in `options` wins over the positional argument.
+    if (options?.comparator !== undefined)
+      resolved = options.comparator;
+  }
+
+  // Resolve the comparator once instead of rebuilding it on every recompute.
+  let compare: UseArrayDifferenceComparatorFn<T>;
+
+  if (isString(resolved) || typeof resolved === 'symbol' || typeof resolved === 'number') {
+    const key = resolved as keyof T;
+    compare = (value, othVal) => value[key] === othVal[key];
+  }
+  else if (typeof resolved === 'function') {
+    compare = resolved;
+  }
+  else {
+    compare = (value, othVal) => value === othVal;
+  }
+
+  return computed(() => {
+    const source = toValue(list);
+    const other = toValue(values);
+
+    // Items in `source` absent from `other`.
+    const diff = source.filter(value => !other.some(othVal => compare(value, othVal)));
+
+    if (!symmetric)
+      return diff;
+
+    // Items in `other` absent from `source`, appended for the symmetric difference.
+    for (const value of other) {
+      if (!source.some(srcVal => compare(value, srcVal)))
+        diff.push(value);
+    }
+
+    return diff;
+  });
+}
diff --git a/vue/toolkit/src/composables/array/useArrayEvery/demo.vue b/vue/toolkit/src/composables/array/useArrayEvery/demo.vue
new file mode 100644
index 0000000..5c44e50
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayEvery/demo.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useArrayEvery } from './index';
+
+interface Check {
+  id: number;
+  label: string;
+  done: boolean;
+}
+
+const checklist = ref<Check[]>([
+  { id: 1, label: 'Build passes', done: true },
+  { id: 2, label: 'Tests green', done: true },
+  { id: 3, label: 'Types check', done: false },
+  { id: 4, label: 'Docs updated', done: false },
+]);
+
+// True only when every item is done.
+const allDone = useArrayEvery(checklist, item => item.done);
+
+const completed = computed(() => checklist.value.filter(c => c.done).length);
+
+function toggle(item: Check) {
+  item.done = !item.done;
+}
+
+function reset() {
+  checklist.value.forEach(c => (c.done = false));
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      class="rounded-xl border p-4 transition"
+      :class="allDone
+        ? 'border-emerald-500/30 bg-emerald-500/10'
+        : 'border-(--border) bg-(--bg-elevated)'"
+    >
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Release readiness
+        </span>
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+          :class="allDone
+            ? 'border-emerald-500/30 text-emerald-600 dark:text-emerald-400'
+            : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+        >
+          <span
+            class="size-2 rounded-full"
+            :class="allDone ? 'bg-emerald-500' : 'bg-amber-500'"
+          />
+          {{ allDone ? 'Ready to ship' : 'Blocked' }}
+        </span>
+      </div>
+      <div class="mt-2 font-mono text-sm tabular-nums text-(--fg-muted)">
+        {{ completed }} / {{ checklist.length }} complete
+      </div>
+    </div>
+
+    <ul class="flex flex-col gap-2">
+      <li v-for="item in checklist" :key="item.id">
+        <button
+          class="flex w-full items-center gap-3 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2 text-left text-sm text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.99] cursor-pointer"
+          @click="toggle(item)"
+        >
+          <span
+            class="flex size-5 shrink-0 items-center justify-center rounded-md border text-xs transition"
+            :class="item.done
+              ? 'border-transparent bg-(--accent) text-(--accent-fg)'
+              : 'border-(--border-strong) text-transparent'"
+          >
+            ✓
+          </span>
+          <span :class="item.done ? 'line-through text-(--fg-subtle)' : ''">
+            {{ item.label }}
+          </span>
+        </button>
+      </li>
+    </ul>
+
+    <button
+      class="inline-flex items-center justify-center gap-1.5 self-start rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+      @click="reset"
+    >
+      Reset
+    </button>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/array/useArrayEvery/index.test.ts b/vue/toolkit/src/composables/array/useArrayEvery/index.test.ts
new file mode 100644
index 0000000..9a331ea
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayEvery/index.test.ts
@@ -0,0 +1,67 @@
+import { describe, expect, it } from 'vitest';
+import { ref } from 'vue';
+import { useArrayEvery } from '.';
+
+describe(useArrayEvery, () => {
+  it('returns true when every element passes', () => {
+    const list = ref([1, 2, 3, 4]);
+    const allPositive = useArrayEvery(list, n => n > 0);
+    expect(allPositive.value).toBeTruthy();
+  });
+
+  it('returns false when some element fails', () => {
+    const list = ref([1, -2, 3, 4]);
+    const allPositive = useArrayEvery(list, n => n > 0);
+    expect(allPositive.value).toBeFalsy();
+  });
+
+  it('reacts to source array changes', () => {
+    const list = ref([2, 4, 6]);
+    const allEven = useArrayEvery(list, n => n % 2 === 0);
+    expect(allEven.value).toBeTruthy();
+
+    list.value = [2, 4, 5];
+    expect(allEven.value).toBeFalsy();
+  });
+
+  it('unwraps reactive items', () => {
+    const items = [ref(2), ref(4), ref(6)];
+    const allEven = useArrayEvery(items, n => n % 2 === 0);
+    expect(allEven.value).toBeTruthy();
+
+    items[1]!.value = 5;
+    expect(allEven.value).toBeFalsy();
+  });
+
+  it('accepts a getter as the list source', () => {
+    const a = ref(1);
+    const b = ref(2);
+    const allPositive = useArrayEvery(() => [a.value, b.value], n => n > 0);
+    expect(allPositive.value).toBeTruthy();
+
+    b.value = -1;
+    expect(allPositive.value).toBeFalsy();
+  });
+
+  it('passes index and array to the predicate', () => {
+    const list = ref([0, 1, 2, 3]);
+    const matchesIndex = useArrayEvery(list, (element, index, array) => {
+      expect(array).toBe(list.value);
+      return element === index;
+    });
+    expect(matchesIndex.value).toBeTruthy();
+  });
+
+  it('returns true for an empty array (vacuous truth)', () => {
+    const list = ref<number[]>([]);
+    const result = useArrayEvery(list, n => n > 0);
+    expect(result.value).toBeTruthy();
+  });
+
+  it('is SSR-safe: never touches window/document/navigator', () => {
+    const list = ref([1, 2, 3]);
+    // Pure computed wrapper — evaluating it relies on no browser globals.
+    const result = useArrayEvery(list, n => n > 0);
+    expect(result.value).toBeTruthy();
+  });
+});
diff --git a/vue/toolkit/src/composables/array/useArrayEvery/index.ts b/vue/toolkit/src/composables/array/useArrayEvery/index.ts
new file mode 100644
index 0000000..ec9056b
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayEvery/index.ts
@@ -0,0 +1,30 @@
+import { computed, toValue } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+
+export type UseArrayEveryReturn = ComputedRef<boolean>;
+
+/**
+ * @name useArrayEvery
+ * @category Array
+ * @description Reactive `Array.prototype.every`. The source array and its items may be reactive.
+ *
+ * @param {MaybeRefOrGetter<MaybeRefOrGetter<T>[]>} list The source array (items can be reactive)
+ * @param {(element: T, index: number, array: MaybeRefOrGetter<T>[]) => unknown} fn Predicate to test each element
+ * @returns {UseArrayEveryReturn} A computed boolean that is `true` if `fn` returns a truthy value for every element, otherwise `false`
+ *
+ * @example
+ * const list = ref([1, 2, 3, 4]);
+ * const allPositive = useArrayEvery(list, n => n > 0); // true
+ *
+ * @example
+ * const items = [ref(2), ref(4), ref(6)];
+ * const allEven = useArrayEvery(items, n => n % 2 === 0); // true
+ *
+ * @since 0.0.15
+ */
+export function useArrayEvery<T>(
+  list: MaybeRefOrGetter<Array<MaybeRefOrGetter<T>>>,
+  fn: (element: T, index: number, array: Array<MaybeRefOrGetter<T>>) => unknown,
+): UseArrayEveryReturn {
+  return computed(() => toValue(list).every((element, index, array) => fn(toValue(element), index, array)));
+}
diff --git a/vue/toolkit/src/composables/array/useArrayFilter/demo.vue b/vue/toolkit/src/composables/array/useArrayFilter/demo.vue
new file mode 100644
index 0000000..32080ea
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayFilter/demo.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useArrayFilter } from './index';
+
+interface Product {
+  name: string;
+  price: number;
+  inStock: boolean;
+}
+
+const products = ref<Product[]>([
+  { name: 'Mechanical Keyboard', price: 129, inStock: true },
+  { name: 'USB-C Hub', price: 49, inStock: false },
+  { name: '4K Monitor', price: 399, inStock: true },
+  { name: 'Webcam', price: 79, inStock: true },
+  { name: 'Desk Mat', price: 25, inStock: false },
+  { name: 'Wireless Mouse', price: 59, inStock: true },
+]);
+
+const query = ref('');
+const maxPrice = ref(400);
+const inStockOnly = ref(true);
+
+// Reactive filter: name match + price ceiling + stock toggle.
+const visible = useArrayFilter(products, (product) => {
+  const matchesName = product.name.toLowerCase().includes(query.value.trim().toLowerCase());
+  const matchesPrice = product.price <= maxPrice.value;
+  const matchesStock = !inStockOnly.value || product.inStock;
+  return matchesName && matchesPrice && matchesStock;
+});
+
+const formatted = computed(() =>
+  visible.value.map(p => ({ ...p, priceLabel: `$${p.price}` })),
+);
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <input
+      v-model="query"
+      type="text"
+      placeholder="Search products…"
+      class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+    >
+
+    <div class="flex flex-col gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <label class="flex items-center justify-between text-sm text-(--fg-muted)">
+        <span>Max price</span>
+        <span class="font-mono text-(--fg) tabular-nums">${{ maxPrice }}</span>
+      </label>
+      <input
+        v-model.number="maxPrice"
+        type="range"
+        min="25"
+        max="400"
+        step="5"
+        class="h-1.5 w-full cursor-pointer accent-(--accent)"
+      >
+      <label class="inline-flex cursor-pointer items-center gap-2 text-sm text-(--fg-muted)">
+        <input
+          v-model="inStockOnly"
+          type="checkbox"
+          class="size-4 cursor-pointer accent-(--accent)"
+        >
+        In stock only
+      </label>
+    </div>
+
+    <div class="flex items-center justify-between text-xs">
+      <span class="font-medium uppercase tracking-wide text-(--fg-subtle)">Results</span>
+      <span class="font-mono tabular-nums text-(--fg-muted)">
+        {{ formatted.length }} / {{ products.length }}
+      </span>
+    </div>
+
+    <ul v-if="formatted.length" class="flex flex-col gap-2">
+      <li
+        v-for="product in formatted"
+        :key="product.name"
+        class="flex items-center justify-between gap-3 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2"
+      >
+        <div class="flex items-center gap-2">
+          <span class="text-sm font-medium text-(--fg)">{{ product.name }}</span>
+          <span
+            v-if="!product.inStock"
+            class="inline-flex items-center rounded-md border border-amber-500/30 bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-medium uppercase text-amber-600 dark:text-amber-400"
+          >
+            Out
+          </span>
+        </div>
+        <span class="font-mono text-sm tabular-nums text-(--fg-muted)">{{ product.priceLabel }}</span>
+      </li>
+    </ul>
+    <div
+      v-else
+      class="rounded-lg border border-dashed border-(--border) bg-(--bg-inset) px-3 py-6 text-center text-sm text-(--fg-subtle)"
+    >
+      No products match your filters.
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/array/useArrayFilter/index.test.ts b/vue/toolkit/src/composables/array/useArrayFilter/index.test.ts
new file mode 100644
index 0000000..502c108
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayFilter/index.test.ts
@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vitest';
+import { ref } from 'vue';
+import { useArrayFilter } from '.';
+
+describe(useArrayFilter, () => {
+  it('filters reactively', () => {
+    const list = ref([1, 2, 3, 4]);
+    const even = useArrayFilter(list, n => n % 2 === 0);
+    expect(even.value).toEqual([2, 4]);
+
+    list.value = [1, 3, 5, 6];
+    expect(even.value).toEqual([6]);
+  });
+
+  it('unwraps reactive items', () => {
+    const list = [ref(1), ref(2), ref(3)];
+    const odd = useArrayFilter(list, n => n % 2 === 1);
+    expect(odd.value).toEqual([1, 3]);
+  });
+});
diff --git a/vue/toolkit/src/composables/array/useArrayFilter/index.ts b/vue/toolkit/src/composables/array/useArrayFilter/index.ts
new file mode 100644
index 0000000..2fb43d0
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayFilter/index.ts
@@ -0,0 +1,24 @@
+import { computed, toValue } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+
+/**
+ * @name useArrayFilter
+ * @category Array
+ * @description Reactive `Array.prototype.filter`.
+ *
+ * @param {MaybeRefOrGetter<MaybeRefOrGetter<T>[]>} list The source array (items can be reactive)
+ * @param {(element: T, index: number, array: T[]) => boolean} fn Predicate
+ * @returns {ComputedRef<T[]>} The filtered array
+ *
+ * @example
+ * const list = ref([1, 2, 3, 4]);
+ * const even = useArrayFilter(list, n => n % 2 === 0); // [2, 4]
+ *
+ * @since 0.0.15
+ */
+export function useArrayFilter<T>(
+  list: MaybeRefOrGetter<Array<MaybeRefOrGetter<T>>>,
+  fn: (element: T, index: number, array: T[]) => boolean,
+): ComputedRef<T[]> {
+  return computed(() => toValue(list).map(i => toValue(i)).filter(fn));
+}
diff --git a/vue/toolkit/src/composables/array/useArrayFind/demo.vue b/vue/toolkit/src/composables/array/useArrayFind/demo.vue
new file mode 100644
index 0000000..aa60657
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayFind/demo.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useArrayFind } from './index';
+
+interface Product {
+  id: number;
+  name: string;
+  price: number;
+  inStock: boolean;
+}
+
+const catalog = ref<Product[]>([
+  { id: 1, name: 'Mechanical Keyboard', price: 129, inStock: false },
+  { id: 2, name: 'USB-C Hub', price: 49, inStock: true },
+  { id: 3, name: 'Desk Mat', price: 24, inStock: true },
+  { id: 4, name: '4K Monitor', price: 399, inStock: true },
+  { id: 5, name: 'Webcam', price: 89, inStock: false },
+]);
+
+const maxPrice = ref(100);
+const inStockOnly = ref(true);
+
+// Reactive Array.prototype.find — re-evaluates when the list, the price
+// threshold or the toggle change.
+const firstMatch = useArrayFind(
+  catalog,
+  product =>
+    product.price <= maxPrice.value
+    && (!inStockOnly.value || product.inStock),
+);
+
+const matchIndex = computed(() =>
+  firstMatch.value ? catalog.value.indexOf(firstMatch.value) : -1,
+);
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="space-y-3">
+      <div class="flex items-center justify-between">
+        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="maxPrice">
+          Max price
+        </label>
+        <span class="font-mono text-sm tabular-nums text-(--fg)">${{ maxPrice }}</span>
+      </div>
+      <input
+        id="maxPrice"
+        v-model.number="maxPrice"
+        type="range"
+        min="20"
+        max="400"
+        step="5"
+        class="w-full accent-(--accent)"
+      >
+      <label class="flex cursor-pointer items-center gap-2 text-sm text-(--fg-muted)">
+        <input v-model="inStockOnly" type="checkbox" class="accent-(--accent)">
+        In stock only
+      </label>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+      <p class="mb-1 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        First match
+      </p>
+      <template v-if="firstMatch">
+        <div class="flex items-baseline justify-between">
+          <span class="text-sm font-medium text-(--fg)">{{ firstMatch.name }}</span>
+          <span class="font-mono text-sm tabular-nums text-(--fg)">${{ firstMatch.price }}</span>
+        </div>
+        <p class="mt-1 font-mono text-xs text-(--fg-subtle)">
+          index {{ matchIndex }} · id {{ firstMatch.id }}
+        </p>
+      </template>
+      <p v-else class="text-sm text-(--fg-subtle)">
+        No product matches the filters
+      </p>
+    </div>
+
+    <ul class="flex flex-col gap-1.5">
+      <li
+        v-for="product in catalog"
+        :key="product.id"
+        class="flex items-center justify-between rounded-lg border px-3 py-2 text-sm transition"
+        :class="product.id === firstMatch?.id
+          ? 'border-(--accent) bg-(--accent-subtle) text-(--accent-text)'
+          : 'border-(--border) bg-(--bg-elevated) text-(--fg-muted)'"
+      >
+        <span class="flex items-center gap-2">
+          {{ product.name }}
+          <span
+            v-if="!product.inStock"
+            class="inline-flex items-center rounded-md border border-amber-500/30 bg-amber-500/10 px-1.5 py-0.5 text-xs font-medium text-amber-600 dark:text-amber-400"
+          >
+            out of stock
+          </span>
+        </span>
+        <span class="font-mono tabular-nums">${{ product.price }}</span>
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/array/useArrayFind/index.test.ts b/vue/toolkit/src/composables/array/useArrayFind/index.test.ts
new file mode 100644
index 0000000..ae55903
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayFind/index.test.ts
@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vitest';
+import { ref } from 'vue';
+import { useArrayFind } from '.';
+
+describe(useArrayFind, () => {
+  it('finds reactively', () => {
+    const list = ref([1, 2, 3]);
+    const found = useArrayFind(list, n => n > 1);
+    expect(found.value).toBe(2);
+
+    list.value = [10, 20];
+    expect(found.value).toBe(10);
+  });
+
+  it('returns undefined when nothing matches', () => {
+    const found = useArrayFind(ref([1, 2]), n => n > 5);
+    expect(found.value).toBeUndefined();
+  });
+});
diff --git a/vue/toolkit/src/composables/array/useArrayFind/index.ts b/vue/toolkit/src/composables/array/useArrayFind/index.ts
new file mode 100644
index 0000000..57a920e
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayFind/index.ts
@@ -0,0 +1,24 @@
+import { computed, toValue } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+
+/**
+ * @name useArrayFind
+ * @category Array
+ * @description Reactive `Array.prototype.find`.
+ *
+ * @param {MaybeRefOrGetter<MaybeRefOrGetter<T>[]>} list The source array (items can be reactive)
+ * @param {(element: T, index: number, array: T[]) => boolean} fn Predicate
+ * @returns {ComputedRef<T | undefined>} The first matching element
+ *
+ * @example
+ * const list = ref([1, 2, 3]);
+ * const found = useArrayFind(list, n => n > 1); // 2
+ *
+ * @since 0.0.15
+ */
+export function useArrayFind<T>(
+  list: MaybeRefOrGetter<Array<MaybeRefOrGetter<T>>>,
+  fn: (element: T, index: number, array: T[]) => boolean,
+): ComputedRef<T | undefined> {
+  return computed(() => toValue(list).map(i => toValue(i)).find(fn));
+}
diff --git a/vue/toolkit/src/composables/array/useArrayFindIndex/demo.vue b/vue/toolkit/src/composables/array/useArrayFindIndex/demo.vue
new file mode 100644
index 0000000..219f1d3
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayFindIndex/demo.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useArrayFindIndex } from './index';
+
+interface Step {
+  label: string;
+  done: boolean;
+}
+
+const steps = ref<Step[]>([
+  { label: 'Clone repository', done: true },
+  { label: 'Install dependencies', done: true },
+  { label: 'Run database migrations', done: false },
+  { label: 'Seed sample data', done: false },
+  { label: 'Start dev server', done: false },
+]);
+
+// Reactive Array.prototype.findIndex — points at the first step still pending.
+const nextIndex = useArrayFindIndex(steps, step => !step.done);
+
+function toggle(index: number) {
+  steps.value[index]!.done = !steps.value[index]!.done;
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Next pending index
+      </p>
+      <p class="mt-1 font-mono text-3xl font-bold tabular-nums text-(--fg)">
+        {{ nextIndex }}
+      </p>
+      <p class="mt-1 text-sm text-(--fg-subtle)">
+        {{ nextIndex === -1 ? 'All steps complete' : `“${steps[nextIndex]!.label}”` }}
+      </p>
+    </div>
+
+    <ol class="flex flex-col gap-1.5">
+      <li
+        v-for="(step, index) in steps"
+        :key="step.label"
+        class="flex items-center justify-between rounded-lg border px-3 py-2 text-sm transition"
+        :class="index === nextIndex
+          ? 'border-(--accent) bg-(--accent-subtle) text-(--accent-text)'
+          : 'border-(--border) bg-(--bg-elevated) text-(--fg-muted)'"
+      >
+        <span class="flex items-center gap-2">
+          <span class="font-mono text-xs tabular-nums text-(--fg-subtle)">{{ index }}</span>
+          <span :class="step.done ? 'line-through opacity-60' : ''">{{ step.label }}</span>
+        </span>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="toggle(index)"
+        >
+          {{ step.done ? 'Undo' : 'Done' }}
+        </button>
+      </li>
+    </ol>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/array/useArrayFindIndex/index.test.ts b/vue/toolkit/src/composables/array/useArrayFindIndex/index.test.ts
new file mode 100644
index 0000000..573fd07
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayFindIndex/index.test.ts
@@ -0,0 +1,69 @@
+import { describe, expect, it } from 'vitest';
+import { ref } from 'vue';
+import { useArrayFindIndex } from '.';
+
+describe(useArrayFindIndex, () => {
+  it('finds the index reactively', () => {
+    const list = ref([1, 2, 3]);
+    const index = useArrayFindIndex(list, n => n > 1);
+    expect(index.value).toBe(1);
+
+    list.value = [10, 20];
+    expect(index.value).toBe(0);
+  });
+
+  it('returns -1 when nothing matches', () => {
+    const index = useArrayFindIndex(ref([1, 2]), n => n > 5);
+    expect(index.value).toBe(-1);
+  });
+
+  it('returns -1 for an empty array', () => {
+    const index = useArrayFindIndex(ref<number[]>([]), () => true);
+    expect(index.value).toBe(-1);
+  });
+
+  it('passes element, index and the resolved array to the predicate', () => {
+    const calls: Array<[number, number, number[]]> = [];
+    const index = useArrayFindIndex(ref([5, 6, 7]), (element, idx, array) => {
+      calls.push([element, idx, array]);
+      return element === 7;
+    });
+
+    expect(index.value).toBe(2);
+    expect(calls).toEqual([
+      [5, 0, [5, 6, 7]],
+      [6, 1, [5, 6, 7]],
+      [7, 2, [5, 6, 7]],
+    ]);
+  });
+
+  it('unwraps reactive items inside the list', () => {
+    const a = ref(1);
+    const b = ref(2);
+    const index = useArrayFindIndex([a, b], n => n === 2);
+    expect(index.value).toBe(1);
+
+    b.value = 0;
+    a.value = 0;
+    expect(index.value).toBe(-1);
+  });
+
+  it('accepts a getter as the source list', () => {
+    const source = ref([3, 4, 5]);
+    const index = useArrayFindIndex(() => source.value, n => n % 2 === 0);
+    expect(index.value).toBe(1);
+
+    source.value = [1, 3, 5];
+    expect(index.value).toBe(-1);
+  });
+
+  it('accepts a plain (non-reactive) array', () => {
+    const index = useArrayFindIndex([10, 20, 30], n => n === 30);
+    expect(index.value).toBe(2);
+  });
+
+  it('returns the FIRST matching index', () => {
+    const index = useArrayFindIndex(ref([2, 4, 6, 8]), n => n % 2 === 0);
+    expect(index.value).toBe(0);
+  });
+});
diff --git a/vue/toolkit/src/composables/array/useArrayFindIndex/index.ts b/vue/toolkit/src/composables/array/useArrayFindIndex/index.ts
new file mode 100644
index 0000000..013da51
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayFindIndex/index.ts
@@ -0,0 +1,29 @@
+import { computed, toValue } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+
+export type UseArrayFindIndexReturn = ComputedRef<number>;
+
+/**
+ * @name useArrayFindIndex
+ * @category Array
+ * @description Reactive `Array.prototype.findIndex`.
+ *
+ * @param {MaybeRefOrGetter<MaybeRefOrGetter<T>[]>} list The source array (items can be reactive)
+ * @param {(element: T, index: number, array: T[]) => unknown} fn Predicate testing each element
+ * @returns {UseArrayFindIndexReturn} The index of the first matching element, or `-1` if none match
+ *
+ * @example
+ * const list = ref([1, 2, 3]);
+ * const index = useArrayFindIndex(list, n => n > 1); // 1
+ *
+ * @since 0.0.15
+ */
+export function useArrayFindIndex<T>(
+  list: MaybeRefOrGetter<Array<MaybeRefOrGetter<T>>>,
+  fn: (element: T, index: number, array: T[]) => unknown,
+): UseArrayFindIndexReturn {
+  return computed(() => {
+    const resolved = toValue(list).map(item => toValue(item));
+    return resolved.findIndex(fn);
+  });
+}
diff --git a/vue/toolkit/src/composables/array/useArrayFindLast/demo.vue b/vue/toolkit/src/composables/array/useArrayFindLast/demo.vue
new file mode 100644
index 0000000..771490b
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayFindLast/demo.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useArrayFindLast } from './index';
+
+interface LogEntry {
+  id: number;
+  level: 'info' | 'warn' | 'error';
+  message: string;
+}
+
+let nextId = 6;
+const log = ref<LogEntry[]>([
+  { id: 1, level: 'info', message: 'Server started on :3000' },
+  { id: 2, level: 'warn', message: 'Cache miss for key "user:42"' },
+  { id: 3, level: 'error', message: 'Failed to reach payments API' },
+  { id: 4, level: 'info', message: 'Request handled in 12ms' },
+  { id: 5, level: 'warn', message: 'Deprecated header received' },
+]);
+
+const filter = ref<LogEntry['level']>('warn');
+
+// Reactive Array.prototype.findLast — the most recent entry at this level.
+const latest = useArrayFindLast(log, entry => entry.level === filter.value);
+
+const samples: LogEntry['message'][] = [
+  'Disk usage at 82%',
+  'New WebSocket connection',
+  'Token refresh failed',
+];
+
+function append(level: LogEntry['level']) {
+  const message = samples[Math.floor(Math.random() * samples.length)]!;
+  log.value.push({ id: nextId++, level, message });
+}
+
+const levels: LogEntry['level'][] = ['info', 'warn', 'error'];
+const tone: Record<LogEntry['level'], string> = {
+  info: 'text-sky-600 dark:text-sky-400',
+  warn: 'text-amber-600 dark:text-amber-400',
+  error: 'text-red-600 dark:text-red-400',
+};
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex gap-1.5">
+      <button
+        v-for="level in levels"
+        :key="level"
+        type="button"
+        class="flex-1 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+        :class="filter === level
+          ? 'border-transparent bg-(--accent) text-(--accent-fg)'
+          : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset)'"
+        @click="filter = level"
+      >
+        {{ level }}
+      </button>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Latest “{{ filter }}” entry
+      </p>
+      <template v-if="latest">
+        <p class="mt-1 font-mono text-sm text-(--fg)">{{ latest.message }}</p>
+        <p class="mt-1 font-mono text-xs text-(--fg-subtle)">#{{ latest.id }}</p>
+      </template>
+      <p v-else class="mt-1 text-sm text-(--fg-subtle)">
+        No “{{ filter }}” entries yet
+      </p>
+    </div>
+
+    <ul class="flex max-h-44 flex-col gap-1 overflow-y-auto rounded-lg border border-(--border) bg-(--bg-elevated) p-2">
+      <li
+        v-for="entry in log"
+        :key="entry.id"
+        class="flex items-center gap-2 rounded-md px-2 py-1 font-mono text-xs transition"
+        :class="entry.id === latest?.id ? 'bg-(--accent-subtle)' : ''"
+      >
+        <span class="w-10 shrink-0 font-semibold uppercase" :class="tone[entry.level]">
+          {{ entry.level }}
+        </span>
+        <span class="truncate text-(--fg-muted)">{{ entry.message }}</span>
+      </li>
+    </ul>
+
+    <div class="flex gap-1.5">
+      <button
+        v-for="level in levels"
+        :key="level"
+        type="button"
+        class="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="append(level)"
+      >
+        + {{ level }}
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/array/useArrayFindLast/index.test.ts b/vue/toolkit/src/composables/array/useArrayFindLast/index.test.ts
new file mode 100644
index 0000000..f72746d
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayFindLast/index.test.ts
@@ -0,0 +1,91 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { ref } from 'vue';
+import { useArrayFindLast } from '.';
+
+describe(useArrayFindLast, () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('finds the last matching element reactively', () => {
+    const list = ref([1, 2, 3, 4]);
+    const found = useArrayFindLast(list, n => n % 2 === 0);
+    expect(found.value).toBe(4);
+
+    list.value = [10, 20, 21];
+    expect(found.value).toBe(20);
+  });
+
+  it('returns undefined when nothing matches', () => {
+    const found = useArrayFindLast(ref([1, 2]), n => n > 5);
+    expect(found.value).toBeUndefined();
+  });
+
+  it('returns undefined for an empty array', () => {
+    const found = useArrayFindLast(ref<number[]>([]), () => true);
+    expect(found.value).toBeUndefined();
+  });
+
+  it('returns the LAST matching element', () => {
+    const found = useArrayFindLast(ref([2, 4, 6, 8]), n => n % 2 === 0);
+    expect(found.value).toBe(8);
+  });
+
+  it('passes element, index and the resolved array to the predicate', () => {
+    const calls: Array<[number, number, number[]]> = [];
+    const found = useArrayFindLast(ref([5, 6, 7]), (element, idx, array) => {
+      calls.push([element, idx, array]);
+      return element === 7;
+    });
+
+    expect(found.value).toBe(7);
+    // findLast iterates from the end; the match at index 2 stops it immediately.
+    expect(calls).toEqual([
+      [7, 2, [5, 6, 7]],
+    ]);
+  });
+
+  it('unwraps reactive items inside the list', () => {
+    const a = ref(1);
+    const b = ref(2);
+    const found = useArrayFindLast([a, b], n => n < 5);
+    expect(found.value).toBe(2);
+
+    b.value = 9;
+    expect(found.value).toBe(1);
+  });
+
+  it('accepts a getter as the source list', () => {
+    const source = ref([3, 4, 5, 6]);
+    const found = useArrayFindLast(() => source.value, n => n % 2 === 0);
+    expect(found.value).toBe(6);
+
+    source.value = [1, 3, 5];
+    expect(found.value).toBeUndefined();
+  });
+
+  it('accepts a plain (non-reactive) array', () => {
+    const found = useArrayFindLast([10, 20, 30], n => n < 25);
+    expect(found.value).toBe(20);
+  });
+
+  it('works via the polyfill when Array.prototype.findLast is unavailable', () => {
+    const native = Array.prototype.findLast;
+    try {
+      // Simulate a runtime older than ES2023.
+      (Array.prototype as { findLast?: unknown }).findLast = undefined;
+      vi.resetModules();
+      // The presence check runs at module import time, so re-import here.
+      return import('.').then(({ useArrayFindLast: useArrayFindLastFresh }) => {
+        const found = useArrayFindLastFresh(ref([1, 2, 3, 4]), n => n % 2 === 0);
+        expect(found.value).toBe(4);
+
+        const none = useArrayFindLastFresh(ref([1, 3, 5]), n => n % 2 === 0);
+        expect(none.value).toBeUndefined();
+      });
+    }
+    finally {
+      (Array.prototype as { findLast?: unknown }).findLast = native;
+    }
+  });
+});
diff --git a/vue/toolkit/src/composables/array/useArrayFindLast/index.ts b/vue/toolkit/src/composables/array/useArrayFindLast/index.ts
new file mode 100644
index 0000000..5981b49
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayFindLast/index.ts
@@ -0,0 +1,48 @@
+import { computed, toValue } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+
+export type UseArrayFindLastReturn<T = unknown>
+  = ComputedRef<T | undefined>;
+
+/**
+ * `Array.prototype.findLast` polyfill for runtimes older than ES2023.
+ */
+function findLast<T>(
+  array: T[],
+  fn: (element: T, index: number, array: T[]) => unknown,
+): T | undefined {
+  let index = array.length;
+  while (index-- > 0) {
+    const element = array[index]!;
+    if (fn(element, index, array))
+      return element;
+  }
+  return undefined;
+}
+
+const hasNativeFindLast = typeof Array.prototype.findLast === 'function';
+
+/**
+ * @name useArrayFindLast
+ * @category Array
+ * @description Reactive `Array.prototype.findLast`.
+ *
+ * @param {MaybeRefOrGetter<MaybeRefOrGetter<T>[]>} list The source array (items can be reactive)
+ * @param {(element: T, index: number, array: T[]) => unknown} fn Predicate testing each element
+ * @returns {UseArrayFindLastReturn<T>} The last matching element, or `undefined` if none match
+ *
+ * @example
+ * const list = ref([1, 2, 3, 4]);
+ * const found = useArrayFindLast(list, n => n % 2 === 0); // 4
+ *
+ * @since 0.0.15
+ */
+export function useArrayFindLast<T>(
+  list: MaybeRefOrGetter<Array<MaybeRefOrGetter<T>>>,
+  fn: (element: T, index: number, array: T[]) => unknown,
+): UseArrayFindLastReturn<T> {
+  return computed(() => {
+    const resolved = toValue(list).map(item => toValue(item));
+    return hasNativeFindLast ? resolved.findLast(fn) : findLast(resolved, fn);
+  });
+}
diff --git a/vue/toolkit/src/composables/array/useArrayIncludes/demo.vue b/vue/toolkit/src/composables/array/useArrayIncludes/demo.vue
new file mode 100644
index 0000000..6cdd6be
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayIncludes/demo.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useArrayIncludes } from './index';
+
+interface User {
+  id: number;
+  name: string;
+}
+
+const team = ref<User[]>([
+  { id: 11, name: 'Ada' },
+  { id: 22, name: 'Linus' },
+  { id: 33, name: 'Grace' },
+  { id: 44, name: 'Dennis' },
+]);
+
+// Search by an object key — `id` is compared against the searched value.
+const searchId = ref(33);
+const isMember = useArrayIncludes(team, searchId, 'id');
+
+// Plain primitive membership with a reactive `fromIndex` option.
+const tags = ref(['vue', 'reactive', 'composable', 'reactive']);
+const query = ref('reactive');
+const fromIndex = ref(2);
+const hasTag = useArrayIncludes(tags, query, { fromIndex: fromIndex.value });
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <p class="mb-2 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Member by key
+      </p>
+      <div class="flex flex-wrap gap-1.5">
+        <span
+          v-for="user in team"
+          :key="user.id"
+          class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
+          :class="user.id === searchId
+            ? 'border-(--accent) bg-(--accent-subtle) text-(--accent-text)'
+            : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+        >
+          {{ user.name }}
+          <span class="font-mono text-(--fg-subtle)">#{{ user.id }}</span>
+        </span>
+      </div>
+
+      <div class="mt-3 flex items-center gap-2">
+        <input
+          v-model.number="searchId"
+          type="number"
+          class="w-24 rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium"
+          :class="isMember
+            ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+            : 'bg-(--bg-inset) text-(--fg-subtle)'"
+        >
+          {{ isMember ? 'includes id' : 'not found' }}
+        </span>
+      </div>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <p class="mb-2 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Primitive search (fromIndex 2)
+      </p>
+      <div class="flex flex-wrap gap-1.5">
+        <span
+          v-for="(tag, i) in tags"
+          :key="i"
+          class="inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-xs font-medium"
+          :class="i < 2
+            ? 'border-(--border) bg-(--bg-inset) text-(--fg-subtle) opacity-50 line-through'
+            : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+        >
+          {{ tag }}
+        </span>
+      </div>
+
+      <input
+        v-model="query"
+        type="text"
+        placeholder="search a tag…"
+        class="mt-3 w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+      <p class="mt-2 text-sm text-(--fg-muted)">
+        Searching from index 2 →
+        <span
+          class="font-mono font-semibold"
+          :class="hasTag ? 'text-emerald-600 dark:text-emerald-400' : 'text-(--fg-subtle)'"
+        >{{ hasTag }}</span>
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/array/useArrayIncludes/index.test.ts b/vue/toolkit/src/composables/array/useArrayIncludes/index.test.ts
new file mode 100644
index 0000000..33226c6
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayIncludes/index.test.ts
@@ -0,0 +1,168 @@
+import { describe, expect, it } from 'vitest';
+import { ref } from 'vue';
+import { useArrayIncludes } from '.';
+
+describe(useArrayIncludes, () => {
+  it('returns true when the value is present', () => {
+    const list = ref([1, 2, 3, 4]);
+    const has = useArrayIncludes(list, 3);
+    expect(has.value).toBeTruthy();
+  });
+
+  it('returns false when the value is absent', () => {
+    const list = ref([1, 2, 3, 4]);
+    const has = useArrayIncludes(list, 5);
+    expect(has.value).toBeFalsy();
+  });
+
+  it('returns false for an empty array', () => {
+    const list = ref<number[]>([]);
+    const has = useArrayIncludes(list, 1);
+    expect(has.value).toBeFalsy();
+  });
+
+  it('updates reactively when the source array changes', () => {
+    const list = ref([1, 2, 3]);
+    const has = useArrayIncludes(list, 4);
+    expect(has.value).toBeFalsy();
+
+    list.value = [1, 4, 5];
+    expect(has.value).toBeTruthy();
+
+    list.value = [1, 2];
+    expect(has.value).toBeFalsy();
+  });
+
+  it('updates reactively when the searched value changes', () => {
+    const list = ref([1, 2, 3]);
+    const target = ref(2);
+    const has = useArrayIncludes(list, target);
+    expect(has.value).toBeTruthy();
+
+    target.value = 9;
+    expect(has.value).toBeFalsy();
+  });
+
+  it('unwraps reactive items', () => {
+    const list = [ref(1), ref(2), ref(3)];
+    const has = useArrayIncludes(list, 2);
+    expect(has.value).toBeTruthy();
+  });
+
+  it('reacts to changes in reactive items', () => {
+    const a = ref(1);
+    const b = ref(2);
+    const has = useArrayIncludes([a, b], 9);
+    expect(has.value).toBeFalsy();
+
+    b.value = 9;
+    expect(has.value).toBeTruthy();
+  });
+
+  it('accepts a getter as the source', () => {
+    const source = ref([1, 2, 3]);
+    const has = useArrayIncludes(() => source.value, 3);
+    expect(has.value).toBeTruthy();
+
+    source.value = [1, 2];
+    expect(has.value).toBeFalsy();
+  });
+
+  it('supports a custom comparator function', () => {
+    const list = ref([{ id: 1 }, { id: 2 }, { id: 3 }]);
+    const has = useArrayIncludes(list, 2, (element, value) => element.id === value);
+    expect(has.value).toBeTruthy();
+
+    const missing = useArrayIncludes(list, 9, (element, value) => element.id === value);
+    expect(missing.value).toBeFalsy();
+  });
+
+  it('passes index and array to the comparator', () => {
+    const list = ref(['a', 'b', 'c']);
+    const calls: Array<[string, string, number, number]> = [];
+    const has = useArrayIncludes(list, 'z', (element, value, index, array) => {
+      calls.push([element, value, index, array.length]);
+      return false;
+    });
+    expect(has.value).toBeFalsy();
+    expect(calls).toEqual([
+      ['a', 'z', 0, 3],
+      ['b', 'z', 1, 3],
+      ['c', 'z', 2, 3],
+    ]);
+  });
+
+  it('supports a key of T as the comparator', () => {
+    const list = ref([{ id: 1 }, { id: 2 }, { id: 3 }]);
+    const has = useArrayIncludes(list, 2, 'id');
+    expect(has.value).toBeTruthy();
+
+    const missing = useArrayIncludes(list, 9, 'id');
+    expect(missing.value).toBeFalsy();
+  });
+
+  it('reacts to changes when comparing by key', () => {
+    const list = ref([{ id: 1 }, { id: 2 }]);
+    const target = ref(2);
+    const has = useArrayIncludes(list, target, 'id');
+    expect(has.value).toBeTruthy();
+
+    target.value = 5;
+    expect(has.value).toBeFalsy();
+
+    list.value = [{ id: 5 }];
+    expect(has.value).toBeTruthy();
+  });
+
+  it('honors a positive fromIndex', () => {
+    const list = ref(['a', 'b', 'a']);
+    const fromZero = useArrayIncludes(list, 'a', { fromIndex: 0 });
+    expect(fromZero.value).toBeTruthy();
+
+    const fromTwo = useArrayIncludes(list, 'a', { fromIndex: 2 });
+    expect(fromTwo.value).toBeTruthy();
+
+    const fromThree = useArrayIncludes(list, 'a', { fromIndex: 3 });
+    expect(fromThree.value).toBeFalsy();
+  });
+
+  it('honors a negative fromIndex like Array.includes', () => {
+    const list = ref([1, 2, 3, 4, 5]);
+    const lastTwo = useArrayIncludes(list, 3, { fromIndex: -2 });
+    expect(lastTwo.value).toBeFalsy();
+
+    const lastThree = useArrayIncludes(list, 3, { fromIndex: -3 });
+    expect(lastThree.value).toBeTruthy();
+
+    // Negative index beyond the start clamps to 0.
+    const wayBack = useArrayIncludes(list, 1, { fromIndex: -100 });
+    expect(wayBack.value).toBeTruthy();
+  });
+
+  it('combines comparator and fromIndex in the options object', () => {
+    const list = ref([{ id: 1 }, { id: 2 }, { id: 1 }]);
+    const has = useArrayIncludes(list, 1, {
+      comparator: 'id',
+      fromIndex: 1,
+    });
+    expect(has.value).toBeTruthy();
+
+    const missing = useArrayIncludes(list, 2, {
+      comparator: 'id',
+      fromIndex: 2,
+    });
+    expect(missing.value).toBeFalsy();
+  });
+
+  it('uses strict equality by default', () => {
+    const list = ref<Array<number | string>>([1, 2, 3]);
+    const has = useArrayIncludes(list, '2');
+    expect(has.value).toBeFalsy();
+  });
+
+  it('matches the searched value when it is a reactive getter', () => {
+    const list = ref([10, 20, 30]);
+    const has = useArrayIncludes(list, () => 20);
+    expect(has.value).toBeTruthy();
+  });
+});
diff --git a/vue/toolkit/src/composables/array/useArrayIncludes/index.ts b/vue/toolkit/src/composables/array/useArrayIncludes/index.ts
new file mode 100644
index 0000000..1f7a407
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayIncludes/index.ts
@@ -0,0 +1,115 @@
+import { computed, toValue } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+import { isObject, isString } from '@robonen/stdlib';
+
+/**
+ * Comparator deciding whether an array element equals the searched value.
+ */
+export type UseArrayIncludesComparatorFn<T, V>
+  = (element: T, value: V, index: number, array: T[]) => boolean;
+
+export interface UseArrayIncludesOptions<T, V> {
+  /**
+   * Index at which to start searching (negative counts from the end, like `Array.prototype.includes`).
+   *
+   * @default 0
+   */
+  fromIndex?: number;
+  /**
+   * Custom comparator function, or a key of `T` to compare a single property by.
+   */
+  comparator?: UseArrayIncludesComparatorFn<T, V> | keyof T;
+}
+
+export type UseArrayIncludesReturn = ComputedRef<boolean>;
+
+function isArrayIncludesOptions<T, V>(value: unknown): value is UseArrayIncludesOptions<T, V> {
+  // isObject matches PLAIN objects only, so functions/keys never reach here.
+  return isObject(value) && ('fromIndex' in value || 'comparator' in value);
+}
+
+/**
+ * @name useArrayIncludes
+ * @category Array
+ * @description Reactive `Array.prototype.includes` with an optional comparator and `fromIndex`. The source array and its items may be reactive.
+ *
+ * @param {MaybeRefOrGetter<MaybeRefOrGetter<T>[]>} list The source array (items can be reactive)
+ * @param {MaybeRefOrGetter<V>} value The value to search for (may be reactive)
+ * @param {UseArrayIncludesComparatorFn<T, V> | keyof T | UseArrayIncludesOptions<T, V>} [comparator] A comparator function, a key of `T` to compare by, or an options object with `comparator`/`fromIndex`
+ * @returns {UseArrayIncludesReturn} A computed boolean that is `true` when the value is found
+ *
+ * @example
+ * const list = ref([1, 2, 3, 4]);
+ * const hasThree = useArrayIncludes(list, 3); // true
+ *
+ * @example
+ * const list = ref([{ id: 1 }, { id: 2 }]);
+ * const hasTwo = useArrayIncludes(list, 2, 'id'); // compare by key
+ *
+ * @example
+ * const list = ref(['a', 'b', 'a']);
+ * const fromSecond = useArrayIncludes(list, 'a', { fromIndex: 1 }); // true
+ *
+ * @since 0.0.15
+ */
+export function useArrayIncludes<T, V = T>(
+  list: MaybeRefOrGetter<Array<MaybeRefOrGetter<T>>>,
+  value: MaybeRefOrGetter<V>,
+  comparator?: UseArrayIncludesComparatorFn<T, V>,
+): UseArrayIncludesReturn;
+export function useArrayIncludes<T, V = T>(
+  list: MaybeRefOrGetter<Array<MaybeRefOrGetter<T>>>,
+  value: MaybeRefOrGetter<V>,
+  comparator?: keyof T,
+): UseArrayIncludesReturn;
+export function useArrayIncludes<T, V = T>(
+  list: MaybeRefOrGetter<Array<MaybeRefOrGetter<T>>>,
+  value: MaybeRefOrGetter<V>,
+  options?: UseArrayIncludesOptions<T, V>,
+): UseArrayIncludesReturn;
+export function useArrayIncludes<T, V = T>(
+  list: MaybeRefOrGetter<Array<MaybeRefOrGetter<T>>>,
+  value: MaybeRefOrGetter<V>,
+  comparator?: UseArrayIncludesComparatorFn<T, V> | keyof T | UseArrayIncludesOptions<T, V>,
+): UseArrayIncludesReturn {
+  let fromIndex = 0;
+  let resolved = comparator;
+
+  if (isArrayIncludesOptions<T, V>(resolved)) {
+    fromIndex = resolved.fromIndex ?? 0;
+    resolved = resolved.comparator;
+  }
+
+  // Resolve the comparator once instead of on every recompute.
+  let compare: UseArrayIncludesComparatorFn<T, V>;
+
+  if (isString(resolved) || typeof resolved === 'symbol' || typeof resolved === 'number') {
+    const key = resolved as keyof T;
+    compare = (element, searched) => element[key] === (searched as unknown);
+  }
+  else if (typeof resolved === 'function') {
+    compare = resolved;
+  }
+  else {
+    compare = (element, searched) => (element as unknown) === searched;
+  }
+
+  return computed(() => {
+    const array = toValue(list);
+    const searched = toValue(value);
+    const length = array.length;
+
+    // Resolve a negative / out-of-range fromIndex the same way Array.includes does.
+    let start = fromIndex < 0 ? length + fromIndex : fromIndex;
+    if (start < 0)
+      start = 0;
+
+    for (let index = start; index < length; index++) {
+      // `index` is bounded by `length`; `!` drops the index-access undefined.
+      if (compare(toValue(array[index]!), searched, index, array as T[]))
+        return true;
+    }
+
+    return false;
+  });
+}
diff --git a/vue/toolkit/src/composables/array/useArrayJoin/demo.vue b/vue/toolkit/src/composables/array/useArrayJoin/demo.vue
new file mode 100644
index 0000000..3058c1b
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayJoin/demo.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useArrayJoin } from './index';
+
+const segments = ref<string[]>(['users', 'robonen', 'projects', 'tools']);
+const separator = ref('/');
+const draft = ref('');
+
+// Reactive Array.prototype.join — recomputes on item edits and separator change.
+const joined = useArrayJoin(segments, separator);
+
+const separators: { label: string; value: string }[] = [
+  { label: 'slash', value: '/' },
+  { label: 'comma', value: ', ' },
+  { label: 'dash', value: ' - ' },
+  { label: 'none', value: '' },
+];
+
+function add() {
+  const value = draft.value.trim();
+  if (!value)
+    return;
+  segments.value.push(value);
+  draft.value = '';
+}
+
+function remove(index: number) {
+  segments.value.splice(index, 1);
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+      <p class="mb-1 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Joined result
+      </p>
+      <p class="break-all font-mono text-sm text-(--fg) tabular-nums">
+        <span v-if="joined">{{ joined }}</span>
+        <span v-else class="text-(--fg-subtle)">empty</span>
+      </p>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Separator</span>
+      <div class="flex gap-1.5">
+        <button
+          v-for="sep in separators"
+          :key="sep.label"
+          type="button"
+          class="flex-1 rounded-lg border px-2 py-1.5 text-xs font-medium transition active:scale-[0.98] cursor-pointer"
+          :class="separator === sep.value
+            ? 'border-transparent bg-(--accent) text-(--accent-fg)'
+            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset)'"
+          @click="separator = sep.value"
+        >
+          {{ sep.label }}
+        </button>
+      </div>
+    </div>
+
+    <ul class="flex flex-col gap-1.5">
+      <li
+        v-for="(segment, index) in segments"
+        :key="index"
+        class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm text-(--fg)"
+      >
+        <span class="flex items-center gap-2">
+          <span class="font-mono text-xs text-(--fg-subtle)">{{ index }}</span>
+          {{ segment }}
+        </span>
+        <button
+          type="button"
+          aria-label="Remove segment"
+          class="rounded-md px-2 py-0.5 text-xs font-medium text-(--fg-subtle) transition hover:bg-(--bg-inset) hover:text-(--fg) cursor-pointer"
+          @click="remove(index)"
+        >
+          ✕
+        </button>
+      </li>
+    </ul>
+
+    <form class="flex gap-2" @submit.prevent="add">
+      <input
+        v-model="draft"
+        type="text"
+        placeholder="add a segment…"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+      <button
+        type="submit"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40"
+        :disabled="!draft.trim()"
+      >
+        Add
+      </button>
+    </form>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/array/useArrayJoin/index.test.ts b/vue/toolkit/src/composables/array/useArrayJoin/index.test.ts
new file mode 100644
index 0000000..3ff87bd
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayJoin/index.test.ts
@@ -0,0 +1,103 @@
+import { describe, expect, it } from 'vitest';
+import { ref } from 'vue';
+import { useArrayJoin } from '.';
+
+describe(useArrayJoin, () => {
+  it('joins with the default comma separator', () => {
+    const list = ref(['a', 'b', 'c']);
+    const joined = useArrayJoin(list);
+    expect(joined.value).toBe('a,b,c');
+  });
+
+  it('joins with a static separator', () => {
+    const list = ref(['a', 'b', 'c']);
+    const joined = useArrayJoin(list, '-');
+    expect(joined.value).toBe('a-b-c');
+  });
+
+  it('recomputes when the source array changes', () => {
+    const list = ref(['a', 'b']);
+    const joined = useArrayJoin(list, '/');
+    expect(joined.value).toBe('a/b');
+
+    list.value = ['x', 'y', 'z'];
+    expect(joined.value).toBe('x/y/z');
+  });
+
+  it('reacts to a reactive separator', () => {
+    const list = ref(['a', 'b', 'c']);
+    const sep = ref('-');
+    const joined = useArrayJoin(list, sep);
+    expect(joined.value).toBe('a-b-c');
+
+    sep.value = ' | ';
+    expect(joined.value).toBe('a | b | c');
+  });
+
+  it('unwraps reactive items', () => {
+    const list = [ref('a'), ref('b'), ref('c')];
+    const joined = useArrayJoin(list, '-');
+    expect(joined.value).toBe('a-b-c');
+  });
+
+  it('reacts to changes in reactive items', () => {
+    const a = ref('a');
+    const list = [a, ref('b')];
+    const joined = useArrayJoin(list, '-');
+    expect(joined.value).toBe('a-b');
+
+    a.value = 'z';
+    expect(joined.value).toBe('z-b');
+  });
+
+  it('accepts a getter as the source list', () => {
+    const a = ref('a');
+    const b = ref('b');
+    const joined = useArrayJoin(() => [a.value, b.value], '-');
+    expect(joined.value).toBe('a-b');
+
+    a.value = 'z';
+    expect(joined.value).toBe('z-b');
+  });
+
+  it('returns an empty string for an empty array', () => {
+    const list = ref<string[]>([]);
+    const joined = useArrayJoin(list, '-');
+    expect(joined.value).toBe('');
+  });
+
+  it('returns the single element with no separator applied', () => {
+    const list = ref(['only']);
+    const joined = useArrayJoin(list, '-');
+    expect(joined.value).toBe('only');
+  });
+
+  it('stringifies non-string elements like native join', () => {
+    const list = ref([1, 2, 3]);
+    const joined = useArrayJoin(list, '+');
+    expect(joined.value).toBe('1+2+3');
+  });
+
+  it('renders null and undefined as empty strings like native join', () => {
+    const list = ref([null, 'a', undefined, 'b']);
+    const joined = useArrayJoin(list, ',');
+    expect(joined.value).toBe(',a,,b');
+  });
+
+  it('treats an empty-string separator as concatenation', () => {
+    const list = ref(['a', 'b', 'c']);
+    const joined = useArrayJoin(list, '');
+    expect(joined.value).toBe('abc');
+  });
+
+  it('joins a getter list of reactive items', () => {
+    const a = ref('a');
+    const b = ref('b');
+    const list = ref([a, b]);
+    const joined = useArrayJoin(() => list.value, '-');
+    expect(joined.value).toBe('a-b');
+
+    b.value = 'z';
+    expect(joined.value).toBe('a-z');
+  });
+});
diff --git a/vue/toolkit/src/composables/array/useArrayJoin/index.ts b/vue/toolkit/src/composables/array/useArrayJoin/index.ts
new file mode 100644
index 0000000..c156e43
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayJoin/index.ts
@@ -0,0 +1,42 @@
+import { computed, toValue } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+
+export type UseArrayJoinReturn = ComputedRef<string>;
+
+/**
+ * @name useArrayJoin
+ * @category Array
+ * @description Reactive `Array.prototype.join`, with an optional reactive separator.
+ *
+ * @param {MaybeRefOrGetter<MaybeRefOrGetter<unknown>[]>} list The source array (items can be reactive)
+ * @param {MaybeRefOrGetter<string>} [separator] A reactive separator placed between adjacent elements (defaults to `,`)
+ * @returns {UseArrayJoinReturn} A computed string of all elements joined; empty string when the array is empty
+ *
+ * @example
+ * const list = ref(['a', 'b', 'c']);
+ * const sep = ref('-');
+ * const joined = useArrayJoin(list, sep); // 'a-b-c'
+ *
+ * @since 0.0.15
+ */
+export function useArrayJoin(
+  list: MaybeRefOrGetter<Array<MaybeRefOrGetter<unknown>>>,
+  separator?: MaybeRefOrGetter<string>,
+): UseArrayJoinReturn {
+  return computed(() => {
+    const resolved = toValue(list);
+
+    // `Array.prototype.join` already stringifies each element, but resolving
+    // reactive items first lets the computed track per-item ref dependencies.
+    let needsUnwrap = false;
+    for (const item of resolved) {
+      if (typeof item === 'function' || (typeof item === 'object' && item !== null && 'value' in item)) {
+        needsUnwrap = true;
+        break;
+      }
+    }
+
+    const source = needsUnwrap ? resolved.map(item => toValue(item)) : resolved;
+    return source.join(toValue(separator));
+  });
+}
diff --git a/vue/toolkit/src/composables/array/useArrayMap/demo.vue b/vue/toolkit/src/composables/array/useArrayMap/demo.vue
new file mode 100644
index 0000000..9ac6c9f
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayMap/demo.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useArrayMap } from './index';
+
+interface Product {
+  name: string;
+  price: number;
+}
+
+const products = ref<Product[]>([
+  { name: 'Mechanical keyboard', price: 129 },
+  { name: 'Ultrawide monitor', price: 549 },
+  { name: 'Noise-cancelling headset', price: 299 },
+  { name: 'Standing desk', price: 419 },
+]);
+
+const taxRate = ref(8);
+
+// Reactive Array.prototype.map — recomputes when products or taxRate change.
+const priced = useArrayMap(products, (product) => {
+  const gross = product.price * (1 + taxRate.value / 100);
+  return { ...product, gross };
+});
+
+const formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
+
+const total = computed(() => priced.value.reduce((sum, p) => sum + p.gross, 0));
+
+function bump(index: number, delta: number) {
+  const next = products.value.slice();
+  next[index] = { ...next[index], price: Math.max(0, next[index].price + delta) };
+  products.value = next;
+}
+</script>
+
+<template>
+  <div class="w-full max-w-md flex flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Cart</span>
+      <label class="flex items-center gap-2 text-sm text-(--fg-muted)">
+        Tax {{ taxRate }}%
+        <input
+          v-model.number="taxRate"
+          type="range"
+          min="0"
+          max="25"
+          class="accent-(--accent)"
+        >
+      </label>
+    </div>
+
+    <ul class="flex flex-col gap-2">
+      <li
+        v-for="(item, index) in priced"
+        :key="item.name"
+        class="flex items-center justify-between gap-3 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2"
+      >
+        <div class="min-w-0 flex-1">
+          <p class="truncate text-sm font-medium text-(--fg)">
+            {{ item.name }}
+          </p>
+          <p class="text-xs text-(--fg-subtle)">
+            base {{ formatter.format(item.price) }}
+          </p>
+        </div>
+        <div class="flex items-center gap-1.5">
+          <button
+            class="inline-flex size-7 items-center justify-center rounded-md border border-(--border) bg-(--bg-elevated) text-(--fg) transition hover:bg-(--bg-inset) active:scale-[0.98] cursor-pointer"
+            aria-label="Decrease price"
+            @click="bump(index, -10)"
+          >
+            &minus;
+          </button>
+          <button
+            class="inline-flex size-7 items-center justify-center rounded-md border border-(--border) bg-(--bg-elevated) text-(--fg) transition hover:bg-(--bg-inset) active:scale-[0.98] cursor-pointer"
+            aria-label="Increase price"
+            @click="bump(index, 10)"
+          >
+            +
+          </button>
+        </div>
+        <span class="w-20 text-right font-mono text-sm tabular-nums text-(--fg)">
+          {{ formatter.format(item.gross) }}
+        </span>
+      </li>
+    </ul>
+
+    <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Total with tax</span>
+      <span class="font-mono text-xl font-bold tabular-nums text-(--fg)">
+        {{ formatter.format(total) }}
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/array/useArrayMap/index.test.ts b/vue/toolkit/src/composables/array/useArrayMap/index.test.ts
new file mode 100644
index 0000000..b025156
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayMap/index.test.ts
@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vitest';
+import { ref } from 'vue';
+import { useArrayMap } from '.';
+
+describe(useArrayMap, () => {
+  it('maps reactively', () => {
+    const list = ref([1, 2, 3]);
+    const doubled = useArrayMap(list, n => n * 2);
+    expect(doubled.value).toEqual([2, 4, 6]);
+
+    list.value = [4, 5];
+    expect(doubled.value).toEqual([8, 10]);
+  });
+
+  it('unwraps reactive items', () => {
+    const list = [ref(1), ref(2)];
+    const mapped = useArrayMap(list, n => n + 1);
+    expect(mapped.value).toEqual([2, 3]);
+  });
+});
diff --git a/vue/toolkit/src/composables/array/useArrayMap/index.ts b/vue/toolkit/src/composables/array/useArrayMap/index.ts
new file mode 100644
index 0000000..f8691f3
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayMap/index.ts
@@ -0,0 +1,24 @@
+import { computed, toValue } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+
+/**
+ * @name useArrayMap
+ * @category Array
+ * @description Reactive `Array.prototype.map`.
+ *
+ * @param {MaybeRefOrGetter<MaybeRefOrGetter<T>[]>} list The source array (items can be reactive)
+ * @param {(element: T, index: number, array: T[]) => U} fn Mapper
+ * @returns {ComputedRef<U[]>} The mapped array
+ *
+ * @example
+ * const list = ref([1, 2, 3]);
+ * const doubled = useArrayMap(list, n => n * 2); // [2, 4, 6]
+ *
+ * @since 0.0.15
+ */
+export function useArrayMap<T, U = T>(
+  list: MaybeRefOrGetter<Array<MaybeRefOrGetter<T>>>,
+  fn: (element: T, index: number, array: T[]) => U,
+): ComputedRef<U[]> {
+  return computed(() => toValue(list).map(i => toValue(i)).map(fn));
+}
diff --git a/vue/toolkit/src/composables/array/useArrayReduce/demo.vue b/vue/toolkit/src/composables/array/useArrayReduce/demo.vue
new file mode 100644
index 0000000..800a60f
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayReduce/demo.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useArrayReduce } from './index';
+
+interface Expense {
+  label: string;
+  amount: number;
+}
+
+const expenses = ref<Expense[]>([
+  { label: 'Cloud hosting', amount: 86 },
+  { label: 'Domain renewal', amount: 18 },
+  { label: 'Design assets', amount: 42 },
+  { label: 'Coffee', amount: 7 },
+]);
+
+// A reactive seed: the running balance grows as you raise the starting budget.
+const startingBudget = ref(500);
+
+// Reactive Array.prototype.reduce with a reactive initial value.
+const remaining = useArrayReduce(
+  expenses,
+  (balance, expense) => balance - expense.amount,
+  startingBudget,
+);
+
+const formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
+
+function add() {
+  expenses.value = [...expenses.value, { label: 'New charge', amount: 25 }];
+}
+
+function removeAt(index: number) {
+  expenses.value = expenses.value.filter((_, i) => i !== index);
+}
+</script>
+
+<template>
+  <div class="w-full max-w-md flex flex-col gap-4">
+    <label class="flex items-center justify-between gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Starting budget</span>
+      <input
+        v-model.number="startingBudget"
+        type="number"
+        step="50"
+        class="w-28 rounded-lg border border-(--border) bg-(--bg) px-3 py-1.5 text-right font-mono text-sm tabular-nums text-(--fg) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+    </label>
+
+    <ul class="flex flex-col gap-2">
+      <li
+        v-for="(expense, index) in expenses"
+        :key="index"
+        class="flex items-center justify-between gap-3 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2"
+      >
+        <span class="flex-1 truncate text-sm text-(--fg)">{{ expense.label }}</span>
+        <span class="font-mono text-sm tabular-nums text-rose-600 dark:text-rose-400">
+          &minus;{{ formatter.format(expense.amount) }}
+        </span>
+        <button
+          class="inline-flex size-6 items-center justify-center rounded-md text-(--fg-subtle) transition hover:bg-(--bg-inset) hover:text-(--fg) active:scale-[0.98] cursor-pointer"
+          aria-label="Remove expense"
+          @click="removeAt(index)"
+        >
+          &times;
+        </button>
+      </li>
+      <li v-if="expenses.length === 0" class="rounded-lg border border-dashed border-(--border) px-3 py-4 text-center text-sm text-(--fg-subtle)">
+        No expenses — full budget remains.
+      </li>
+    </ul>
+
+    <button
+      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+      @click="add"
+    >
+      + Add charge
+    </button>
+
+    <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Remaining</span>
+      <span
+        class="font-mono text-2xl font-bold tabular-nums"
+        :class="remaining < 0 ? 'text-rose-600 dark:text-rose-400' : 'text-emerald-600 dark:text-emerald-400'"
+      >
+        {{ formatter.format(remaining) }}
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/array/useArrayReduce/index.test.ts b/vue/toolkit/src/composables/array/useArrayReduce/index.test.ts
new file mode 100644
index 0000000..fe24332
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayReduce/index.test.ts
@@ -0,0 +1,103 @@
+import { describe, expect, it } from 'vitest';
+import { ref } from 'vue';
+import { useArrayReduce } from '.';
+
+describe(useArrayReduce, () => {
+  it('reduces without an initial value', () => {
+    const list = ref([1, 2, 3, 4]);
+    const sum = useArrayReduce(list, (acc, n) => acc + n);
+    expect(sum.value).toBe(10);
+  });
+
+  it('reduces with an initial value', () => {
+    const list = ref([1, 2, 3, 4]);
+    const sum = useArrayReduce(list, (acc, n) => acc + n, 100);
+    expect(sum.value).toBe(110);
+  });
+
+  it('recomputes when the source array changes', () => {
+    const list = ref([1, 2, 3]);
+    const sum = useArrayReduce(list, (acc, n) => acc + n, 0);
+    expect(sum.value).toBe(6);
+
+    list.value = [10, 20];
+    expect(sum.value).toBe(30);
+  });
+
+  it('unwraps reactive items', () => {
+    const list = [ref(1), ref(2), ref(3)];
+    const sum = useArrayReduce(list, (acc, n) => acc + n, 0);
+    expect(sum.value).toBe(6);
+  });
+
+  it('reacts to a reactive initial value', () => {
+    const list = ref([1, 2, 3]);
+    const seed = ref(10);
+    const sum = useArrayReduce(list, (acc, n) => acc + n, seed);
+    expect(sum.value).toBe(16);
+
+    seed.value = 100;
+    expect(sum.value).toBe(106);
+  });
+
+  it('passes the current index to the reducer', () => {
+    const list = ref(['a', 'b', 'c']);
+    const indexed = useArrayReduce(
+      list,
+      (acc, value, index) => `${acc}${index}:${value};`,
+      '',
+    );
+    expect(indexed.value).toBe('0:a;1:b;2:c;');
+  });
+
+  it('supports a different accumulator type via initial value', () => {
+    const list = ref(['a', 'b', 'a', 'c', 'b']);
+    const counts = useArrayReduce(
+      list,
+      (acc: Record<string, number>, key) => {
+        acc[key] = (acc[key] ?? 0) + 1;
+        return acc;
+      },
+      () => ({}) as Record<string, number>,
+    );
+    expect(counts.value).toEqual({ a: 2, b: 2, c: 1 });
+  });
+
+  it('treats undefined as a valid initial value (not a missing seed)', () => {
+    const list = ref([1, 2]);
+    // With a real seed of `undefined`, the reducer runs for every element.
+    const calls: Array<[unknown, number]> = [];
+    const result = useArrayReduce<number, number | undefined>(
+      list,
+      (acc, n) => {
+        calls.push([acc, n]);
+        return n;
+      },
+      undefined,
+    );
+    expect(result.value).toBe(2);
+    expect(calls).toEqual([[undefined, 1], [1, 2]]);
+  });
+
+  it('throws on an empty array with no initial value (native reduce semantics)', () => {
+    const list = ref<number[]>([]);
+    const sum = useArrayReduce(list, (acc, n) => acc + n);
+    expect(() => sum.value).toThrow(TypeError);
+  });
+
+  it('returns the initial value for an empty array', () => {
+    const list = ref<number[]>([]);
+    const sum = useArrayReduce(list, (acc, n) => acc + n, 42);
+    expect(sum.value).toBe(42);
+  });
+
+  it('accepts a getter as the source list', () => {
+    const a = ref(1);
+    const b = ref(2);
+    const product = useArrayReduce(() => [a.value, b.value], (acc, n) => acc * n, 1);
+    expect(product.value).toBe(2);
+
+    a.value = 5;
+    expect(product.value).toBe(10);
+  });
+});
diff --git a/vue/toolkit/src/composables/array/useArrayReduce/index.ts b/vue/toolkit/src/composables/array/useArrayReduce/index.ts
new file mode 100644
index 0000000..645a688
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayReduce/index.ts
@@ -0,0 +1,73 @@
+import { computed, toValue } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+
+export type UseArrayReducer<PV, CV, R>
+  = (accumulator: PV, currentValue: CV, currentIndex: number) => R;
+
+export type UseArrayReduceReturn<T> = ComputedRef<T>;
+
+/**
+ * @name useArrayReduce
+ * @category Array
+ * @description Reactive `Array.prototype.reduce`, with an optional initial value.
+ *
+ * @param {MaybeRefOrGetter<MaybeRefOrGetter<T>[]>} list The source array (items can be reactive)
+ * @param {UseArrayReducer<T, T, T>} reducer A reducer callback applied to each element
+ * @returns {UseArrayReduceReturn<T>} The reduced value
+ *
+ * @example
+ * const list = ref([1, 2, 3, 4]);
+ * const sum = useArrayReduce(list, (acc, n) => acc + n); // 10
+ *
+ * @since 0.0.15
+ */
+export function useArrayReduce<T>(
+  list: MaybeRefOrGetter<Array<MaybeRefOrGetter<T>>>,
+  reducer: UseArrayReducer<T, T, T>,
+): UseArrayReduceReturn<T>;
+
+/**
+ * @name useArrayReduce
+ * @category Array
+ * @description Reactive `Array.prototype.reduce`, with an optional initial value.
+ *
+ * @param {MaybeRefOrGetter<MaybeRefOrGetter<T>[]>} list The source array (items can be reactive)
+ * @param {UseArrayReducer<U, T, U>} reducer A reducer callback applied to each element
+ * @param {MaybeRefOrGetter<U>} initialValue A reactive value to seed the accumulator with
+ * @returns {UseArrayReduceReturn<U>} The reduced value
+ *
+ * @example
+ * const list = ref([1, 2, 3, 4]);
+ * const sum = useArrayReduce(list, (acc, n) => acc + n, 100); // 110
+ *
+ * @since 0.0.15
+ */
+export function useArrayReduce<T, U>(
+  list: MaybeRefOrGetter<Array<MaybeRefOrGetter<T>>>,
+  reducer: UseArrayReducer<U, T, U>,
+  initialValue: MaybeRefOrGetter<U>,
+): UseArrayReduceReturn<U>;
+
+export function useArrayReduce<T, U>(
+  list: MaybeRefOrGetter<Array<MaybeRefOrGetter<T>>>,
+  reducer: UseArrayReducer<U, T, U>,
+  initialValue?: MaybeRefOrGetter<U>,
+): UseArrayReduceReturn<U> {
+  const step = (
+    accumulator: U,
+    current: MaybeRefOrGetter<T>,
+    index: number,
+  ): U => reducer(accumulator, toValue(current), index);
+
+  // Capture presence here (arguments.length, not a default value) so that an
+  // explicitly-passed `undefined` is still honoured as a real initial value.
+  const hasInitial = arguments.length >= 3;
+
+  return computed(() => {
+    const resolved = toValue(list);
+
+    return hasInitial
+      ? resolved.reduce(step, toValue(initialValue as MaybeRefOrGetter<U>))
+      : (resolved as unknown as U[]).reduce(step as unknown as (a: U, c: U, i: number) => U);
+  });
+}
diff --git a/vue/toolkit/src/composables/array/useArraySome/demo.vue b/vue/toolkit/src/composables/array/useArraySome/demo.vue
new file mode 100644
index 0000000..0de38a9
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArraySome/demo.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useArraySome } from './index';
+
+interface Server {
+  name: string;
+  cpu: number;
+}
+
+const servers = ref<Server[]>([
+  { name: 'api-west-1', cpu: 32 },
+  { name: 'api-east-1', cpu: 54 },
+  { name: 'worker-1', cpu: 71 },
+  { name: 'db-primary', cpu: 48 },
+]);
+
+const threshold = ref(80);
+
+// Reactive Array.prototype.some — true if ANY server is over the threshold.
+const hasOverloaded = useArraySome(servers, server => server.cpu > threshold.value);
+
+function load(index: number, delta: number) {
+  const next = servers.value.slice();
+  next[index] = { ...next[index], cpu: Math.min(100, Math.max(0, next[index].cpu + delta)) };
+  servers.value = next;
+}
+</script>
+
+<template>
+  <div class="w-full max-w-md flex flex-col gap-4">
+    <div
+      class="flex items-center gap-3 rounded-xl border p-4 transition"
+      :class="hasOverloaded
+        ? 'border-amber-500/30 bg-amber-500/10'
+        : 'border-emerald-500/30 bg-emerald-500/10'"
+    >
+      <span
+        class="inline-flex size-2.5 rounded-full"
+        :class="hasOverloaded ? 'bg-amber-500' : 'bg-emerald-500'"
+      />
+      <p class="text-sm font-medium" :class="hasOverloaded ? 'text-amber-700 dark:text-amber-300' : 'text-emerald-700 dark:text-emerald-300'">
+        {{ hasOverloaded ? 'At least one server is overloaded' : 'All servers within limits' }}
+      </p>
+    </div>
+
+    <label class="flex items-center justify-between gap-3 text-sm text-(--fg-muted)">
+      <span>Alert threshold</span>
+      <span class="flex items-center gap-2">
+        <input
+          v-model.number="threshold"
+          type="range"
+          min="40"
+          max="100"
+          class="accent-(--accent)"
+        >
+        <span class="w-10 text-right font-mono tabular-nums text-(--fg)">{{ threshold }}%</span>
+      </span>
+    </label>
+
+    <ul class="flex flex-col gap-2">
+      <li
+        v-for="(server, index) in servers"
+        :key="server.name"
+        class="rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2.5"
+      >
+        <div class="mb-1.5 flex items-center justify-between">
+          <span class="font-mono text-sm text-(--fg)">{{ server.name }}</span>
+          <span class="flex items-center gap-2">
+            <span
+              class="font-mono text-sm tabular-nums"
+              :class="server.cpu > threshold ? 'text-amber-600 dark:text-amber-400' : 'text-(--fg-muted)'"
+            >{{ server.cpu }}%</span>
+            <button
+              class="inline-flex size-6 items-center justify-center rounded-md border border-(--border) bg-(--bg-elevated) text-(--fg) transition hover:bg-(--bg-inset) active:scale-[0.98] cursor-pointer"
+              aria-label="Decrease load"
+              @click="load(index, -10)"
+            >&minus;</button>
+            <button
+              class="inline-flex size-6 items-center justify-center rounded-md border border-(--border) bg-(--bg-elevated) text-(--fg) transition hover:bg-(--bg-inset) active:scale-[0.98] cursor-pointer"
+              aria-label="Increase load"
+              @click="load(index, 10)"
+            >+</button>
+          </span>
+        </div>
+        <div class="h-1.5 w-full overflow-hidden rounded-full bg-(--bg-inset)">
+          <div
+            class="h-full rounded-full transition-all"
+            :class="server.cpu > threshold ? 'bg-amber-500' : 'bg-(--accent)'"
+            :style="{ width: `${server.cpu}%` }"
+          />
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/array/useArraySome/index.test.ts b/vue/toolkit/src/composables/array/useArraySome/index.test.ts
new file mode 100644
index 0000000..e75a19e
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArraySome/index.test.ts
@@ -0,0 +1,83 @@
+import { describe, expect, it } from 'vitest';
+import { ref } from 'vue';
+import { useArraySome } from '.';
+
+describe(useArraySome, () => {
+  it('returns true when any element matches', () => {
+    const list = ref([1, 2, 3, 4]);
+    const hasEven = useArraySome(list, n => n % 2 === 0);
+    expect(hasEven.value).toBeTruthy();
+  });
+
+  it('returns false when no element matches', () => {
+    const list = ref([1, 3, 5, 7]);
+    const hasEven = useArraySome(list, n => n % 2 === 0);
+    expect(hasEven.value).toBeFalsy();
+  });
+
+  it('returns false for an empty array', () => {
+    const list = ref<number[]>([]);
+    const result = useArraySome(list, () => true);
+    expect(result.value).toBeFalsy();
+  });
+
+  it('updates reactively when the source array changes', () => {
+    const list = ref([1, 3, 5]);
+    const hasEven = useArraySome(list, n => n % 2 === 0);
+    expect(hasEven.value).toBeFalsy();
+
+    list.value = [1, 2, 5];
+    expect(hasEven.value).toBeTruthy();
+
+    list.value = [7, 9];
+    expect(hasEven.value).toBeFalsy();
+  });
+
+  it('unwraps reactive items', () => {
+    const list = [ref(1), ref(3), ref(4)];
+    const hasEven = useArraySome(list, n => n % 2 === 0);
+    expect(hasEven.value).toBeTruthy();
+  });
+
+  it('reacts to changes in reactive items', () => {
+    const a = ref(1);
+    const b = ref(3);
+    const list = [a, b];
+    const hasEven = useArraySome(list, n => n % 2 === 0);
+    expect(hasEven.value).toBeFalsy();
+
+    b.value = 4;
+    expect(hasEven.value).toBeTruthy();
+  });
+
+  it('accepts a getter as the source', () => {
+    const source = ref([1, 2, 3]);
+    const hasThree = useArraySome(() => source.value, n => n === 3);
+    expect(hasThree.value).toBeTruthy();
+
+    source.value = [1, 2];
+    expect(hasThree.value).toBeFalsy();
+  });
+
+  it('passes index and array to the predicate', () => {
+    const list = ref(['a', 'b', 'c']);
+    const calls: Array<[string, number, number]> = [];
+    const result = useArraySome(list, (element, index, array) => {
+      calls.push([element, index, array.length]);
+      return false;
+    });
+    expect(result.value).toBeFalsy();
+    expect(calls).toEqual([['a', 0, 3], ['b', 1, 3], ['c', 2, 3]]);
+  });
+
+  it('short-circuits on the first truthy result', () => {
+    const list = ref([1, 2, 3, 4]);
+    let visited = 0;
+    const result = useArraySome(list, (n) => {
+      visited++;
+      return n === 2;
+    });
+    expect(result.value).toBeTruthy();
+    expect(visited).toBe(2);
+  });
+});
diff --git a/vue/toolkit/src/composables/array/useArraySome/index.ts b/vue/toolkit/src/composables/array/useArraySome/index.ts
new file mode 100644
index 0000000..c488b24
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArraySome/index.ts
@@ -0,0 +1,30 @@
+import { computed, toValue } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+
+export type UseArraySomeReturn = ComputedRef<boolean>;
+
+/**
+ * @name useArraySome
+ * @category Array
+ * @description Reactive `Array.prototype.some`. The source array and its items may be reactive.
+ *
+ * @param {MaybeRefOrGetter<MaybeRefOrGetter<T>[]>} list The source array (items can be reactive)
+ * @param {(element: T, index: number, array: MaybeRefOrGetter<T>[]) => unknown} fn Predicate to test each element
+ * @returns {UseArraySomeReturn} A computed boolean that is `true` if `fn` returns a truthy value for any element, otherwise `false`
+ *
+ * @example
+ * const list = ref([1, 2, 3, 4]);
+ * const hasEven = useArraySome(list, n => n % 2 === 0); // true
+ *
+ * @example
+ * const items = [ref(1), ref(3), ref(5)];
+ * const hasEven = useArraySome(items, n => n % 2 === 0); // false
+ *
+ * @since 0.0.15
+ */
+export function useArraySome<T>(
+  list: MaybeRefOrGetter<Array<MaybeRefOrGetter<T>>>,
+  fn: (element: T, index: number, array: Array<MaybeRefOrGetter<T>>) => unknown,
+): UseArraySomeReturn {
+  return computed(() => toValue(list).some((element, index, array) => fn(toValue(element), index, array)));
+}
diff --git a/vue/toolkit/src/composables/array/useArrayUnique/demo.vue b/vue/toolkit/src/composables/array/useArrayUnique/demo.vue
new file mode 100644
index 0000000..6db2374
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayUnique/demo.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useArrayUnique } from './index';
+
+const raw = ref<string[]>([
+  'design',
+  'Design',
+  'frontend',
+  'design',
+  'FRONTEND',
+  'vue',
+  'Vue',
+  'a11y',
+]);
+
+const caseInsensitive = ref(true);
+
+// Switch de-dup strategy reactively:
+//  - identity (===): "Design" and "design" are distinct
+//  - comparator: case-insensitive equality folds them together
+const exact = useArrayUnique(raw);
+const folded = useArrayUnique(raw, (a, b) => a.toLowerCase() === b.toLowerCase());
+
+const unique = computed(() => (caseInsensitive.value ? folded.value : exact.value));
+
+const draft = ref('');
+
+function addTag() {
+  const value = draft.value.trim();
+  if (!value)
+    return;
+  raw.value = [...raw.value, value];
+  draft.value = '';
+}
+</script>
+
+<template>
+  <div class="w-full max-w-md flex flex-col gap-4">
+    <form class="flex gap-2" @submit.prevent="addTag">
+      <input
+        v-model="draft"
+        type="text"
+        placeholder="Add a tag, e.g. TypeScript"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+      <button
+        type="submit"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+      >
+        Add
+      </button>
+    </form>
+
+    <label class="flex items-center justify-between gap-3 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2.5 text-sm text-(--fg)">
+      <span>Case-insensitive comparator</span>
+      <input
+        v-model="caseInsensitive"
+        type="checkbox"
+        class="size-4 accent-(--accent) cursor-pointer"
+      >
+    </label>
+
+    <div class="flex flex-col gap-1.5">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Source ({{ raw.length }})
+      </span>
+      <div class="flex flex-wrap gap-1.5 rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <span
+          v-for="(tag, index) in raw"
+          :key="`${tag}-${index}`"
+          class="inline-flex items-center rounded-md border border-(--border) bg-(--bg-elevated) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+        >
+          {{ tag }}
+        </span>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-1.5">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Unique ({{ unique.length }})
+      </span>
+      <div class="flex flex-wrap gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) p-3">
+        <span
+          v-for="tag in unique"
+          :key="tag"
+          class="inline-flex items-center gap-1.5 rounded-md border border-(--accent) bg-(--accent-subtle) px-2 py-0.5 text-xs font-medium text-(--accent-text)"
+        >
+          {{ tag }}
+        </span>
+        <span v-if="unique.length === 0" class="text-xs text-(--fg-subtle)">No tags yet.</span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/array/useArrayUnique/index.test.ts b/vue/toolkit/src/composables/array/useArrayUnique/index.test.ts
new file mode 100644
index 0000000..0134305
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayUnique/index.test.ts
@@ -0,0 +1,147 @@
+import { describe, expect, it } from 'vitest';
+import { effectScope, ref } from 'vue';
+import { useArrayUnique } from '.';
+
+describe(useArrayUnique, () => {
+  it('de-duplicates primitive values using strict identity', () => {
+    const list = ref([1, 2, 2, 3, 3, 3]);
+    const result = useArrayUnique(list);
+    expect(result.value).toEqual([1, 2, 3]);
+  });
+
+  it('preserves first-seen insertion order', () => {
+    const list = ref([3, 1, 3, 2, 1]);
+    const result = useArrayUnique(list);
+    expect(result.value).toEqual([3, 1, 2]);
+  });
+
+  it('distinguishes values of different types with === semantics', () => {
+    const list = ref<Array<number | string>>([1, '1', 1, '1']);
+    const result = useArrayUnique(list);
+    expect(result.value).toEqual([1, '1']);
+  });
+
+  it('treats NaN occurrences as a single unique value', () => {
+    const list = ref([Number.NaN, Number.NaN, 1]);
+    const result = useArrayUnique(list);
+    expect(result.value).toEqual([Number.NaN, 1]);
+  });
+
+  it('returns an empty array for an empty source', () => {
+    const list = ref<number[]>([]);
+    const result = useArrayUnique(list);
+    expect(result.value).toEqual([]);
+  });
+
+  it('updates reactively when the source array changes', () => {
+    const list = ref([1, 1, 2]);
+    const result = useArrayUnique(list);
+    expect(result.value).toEqual([1, 2]);
+
+    list.value = [3, 3, 3, 4];
+    expect(result.value).toEqual([3, 4]);
+  });
+
+  it('accepts a getter as the source', () => {
+    const source = ref([1, 2, 2]);
+    const result = useArrayUnique(() => source.value);
+    expect(result.value).toEqual([1, 2]);
+
+    source.value = [5, 5, 6];
+    expect(result.value).toEqual([5, 6]);
+  });
+
+  it('unwraps reactive items', () => {
+    const list = [ref(1), ref(1), ref(2)];
+    const result = useArrayUnique(list);
+    expect(result.value).toEqual([1, 2]);
+  });
+
+  it('reacts to changes in reactive items', () => {
+    const a = ref(1);
+    const b = ref(2);
+    const result = useArrayUnique([a, b]);
+    expect(result.value).toEqual([1, 2]);
+
+    b.value = 1;
+    expect(result.value).toEqual([1]);
+  });
+
+  it('de-duplicates by a key of T', () => {
+    const list = ref([{ id: 1 }, { id: 2 }, { id: 1 }]);
+    const result = useArrayUnique(list, 'id');
+    expect(result.value).toEqual([{ id: 1 }, { id: 2 }]);
+  });
+
+  it('keeps the first occurrence when de-duplicating by key', () => {
+    const list = ref([
+      { id: 1, label: 'a' },
+      { id: 1, label: 'b' },
+      { id: 2, label: 'c' },
+    ]);
+    const result = useArrayUnique(list, 'id');
+    expect(result.value).toEqual([
+      { id: 1, label: 'a' },
+      { id: 2, label: 'c' },
+    ]);
+  });
+
+  it('de-duplicates by a key extractor function', () => {
+    const list = ref([
+      { name: 'Ann' },
+      { name: 'Bob' },
+      { name: 'Ann' },
+    ]);
+    const result = useArrayUnique(list, item => item.name);
+    expect(result.value).toEqual([{ name: 'Ann' }, { name: 'Bob' }]);
+  });
+
+  it('de-duplicates with a custom comparator function', () => {
+    const list = ref([1.1, 1.4, 2.2, 2.9, 3.0]);
+    const result = useArrayUnique(list, (a: number, b: number) => Math.floor(a) === Math.floor(b));
+    expect(result.value).toEqual([1.1, 2.2, 3.0]);
+  });
+
+  it('passes the resolved array to the comparator', () => {
+    const list = ref([1, 2, 2]);
+    const seen: number[] = [];
+    const result = useArrayUnique(list, (a: number, b: number, array: number[]) => {
+      seen.push(array.length);
+      return a === b;
+    });
+    expect(result.value).toEqual([1, 2]);
+    expect(seen.every(length => length === 3)).toBeTruthy();
+  });
+
+  it('reacts to changes when comparing by key', () => {
+    const list = ref([{ id: 1 }, { id: 2 }, { id: 1 }]);
+    const result = useArrayUnique(list, 'id');
+    expect(result.value).toEqual([{ id: 1 }, { id: 2 }]);
+
+    list.value = [{ id: 3 }, { id: 3 }, { id: 4 }];
+    expect(result.value).toEqual([{ id: 3 }, { id: 4 }]);
+  });
+
+  it('reacts to changes when using a comparator function', () => {
+    const list = ref([1.1, 1.9]);
+    const result = useArrayUnique(list, (a: number, b: number) => Math.floor(a) === Math.floor(b));
+    expect(result.value).toEqual([1.1]);
+
+    list.value = [1.1, 2.2, 2.9];
+    expect(result.value).toEqual([1.1, 2.2]);
+  });
+
+  it('works outside of a component instance (SSR-safe, no global access)', () => {
+    // The composable must not touch window/document/navigator: running it inside
+    // a bare effectScope (no component, no DOM globals needed) must succeed.
+    const scope = effectScope();
+    let result: ReturnType<typeof useArrayUnique<number>> | undefined;
+
+    scope.run(() => {
+      result = useArrayUnique(ref([1, 1, 2, 3, 3]));
+    });
+
+    expect(result?.value).toEqual([1, 2, 3]);
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/array/useArrayUnique/index.ts b/vue/toolkit/src/composables/array/useArrayUnique/index.ts
new file mode 100644
index 0000000..25bf683
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayUnique/index.ts
@@ -0,0 +1,127 @@
+import { computed, toValue } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+import { isString, unique } from '@robonen/stdlib';
+
+/**
+ * Equality comparator deciding whether two array elements are duplicates.
+ */
+export type UseArrayUniqueComparatorFn<T>
+  = (a: T, b: T, array: T[]) => boolean;
+
+/**
+ * Extracts the comparison key for an element. Two elements that produce the
+ * same key (via `===`/`Set` identity) are considered duplicates.
+ */
+export type UseArrayUniqueKeyFn<T>
+  = (element: T) => PropertyKey;
+
+export type UseArrayUniqueReturn<T = unknown> = ComputedRef<T[]>;
+
+/**
+ * @name useArrayUnique
+ * @category Array
+ * @description Reactive de-duplicated array. By default uses `Set` identity (`===`); an optional key of `T`, key extractor (both O(n)), or full comparator (O(n²)) customizes equality. The source array and its items may be reactive. First-seen insertion order is preserved.
+ *
+ * @param {MaybeRefOrGetter<MaybeRefOrGetter<T>[]>} list The source array (items can be reactive)
+ * @param {UseArrayUniqueComparatorFn<T> | UseArrayUniqueKeyFn<T> | keyof T} [comparator] A custom equality comparator, a key extractor, or a key of `T` to de-duplicate by
+ * @returns {UseArrayUniqueReturn<T>} A computed array containing only the first occurrence of each unique element
+ *
+ * @example
+ * const list = ref([1, 2, 2, 3, 3, 3]);
+ * const uniq = useArrayUnique(list); // [1, 2, 3]
+ *
+ * @example
+ * const list = ref([{ id: 1 }, { id: 2 }, { id: 1 }]);
+ * const byId = useArrayUnique(list, 'id'); // [{ id: 1 }, { id: 2 }]
+ *
+ * @example
+ * const list = ref([{ id: 1 }, { id: 2 }, { id: 1 }]);
+ * const byKey = useArrayUnique(list, item => item.id); // [{ id: 1 }, { id: 2 }]
+ *
+ * @example
+ * const list = ref([1.1, 1.4, 2.2]);
+ * const byFloor = useArrayUnique(list, (a, b) => Math.floor(a) === Math.floor(b)); // [1.1, 2.2]
+ *
+ * @since 0.0.15
+ */
+export function useArrayUnique<T>(
+  list: MaybeRefOrGetter<Array<MaybeRefOrGetter<T>>>,
+): UseArrayUniqueReturn<T>;
+export function useArrayUnique<T>(
+  list: MaybeRefOrGetter<Array<MaybeRefOrGetter<T>>>,
+  comparator: keyof T,
+): UseArrayUniqueReturn<T>;
+export function useArrayUnique<T>(
+  list: MaybeRefOrGetter<Array<MaybeRefOrGetter<T>>>,
+  comparator: UseArrayUniqueKeyFn<T>,
+): UseArrayUniqueReturn<T>;
+export function useArrayUnique<T>(
+  list: MaybeRefOrGetter<Array<MaybeRefOrGetter<T>>>,
+  comparator: UseArrayUniqueComparatorFn<T>,
+): UseArrayUniqueReturn<T>;
+export function useArrayUnique<T>(
+  list: MaybeRefOrGetter<Array<MaybeRefOrGetter<T>>>,
+  comparator?: UseArrayUniqueComparatorFn<T> | UseArrayUniqueKeyFn<T> | keyof T,
+): UseArrayUniqueReturn<T> {
+  // Resolve the comparison strategy once, not on every recompute.
+
+  // Key of T (string | number | symbol) -> O(n) first-seen-wins key de-dup.
+  if (isString(comparator) || typeof comparator === 'symbol' || typeof comparator === 'number') {
+    const key = comparator as keyof T;
+    return computed<T[]>(() => uniqueByKey(resolve(list), element => element[key] as PropertyKey));
+  }
+
+  if (typeof comparator === 'function') {
+    // A unary key extractor stays O(n); a binary comparator falls back to O(n²)
+    // pairwise comparison (unavoidable for arbitrary equality). Branch on arity.
+    if (comparator.length <= 1) {
+      const extractor = comparator as UseArrayUniqueKeyFn<T>;
+      return computed<T[]>(() => uniqueByKey(resolve(list), extractor));
+    }
+
+    const compare = comparator as UseArrayUniqueComparatorFn<T>;
+    return computed<T[]>(() => {
+      const array = resolve(list);
+      const result: T[] = [];
+
+      for (const value of array) {
+        if (!result.some(kept => compare(value, kept, array)))
+          result.push(value);
+      }
+
+      return result;
+    });
+  }
+
+  // Default: identity (`===`) de-dup via stdlib unique's Set fast path.
+  return computed<T[]>(() => unique(resolve(list)));
+}
+
+/**
+ * Resolves the (possibly reactive) list and each (possibly reactive) item.
+ */
+function resolve<T>(list: MaybeRefOrGetter<Array<MaybeRefOrGetter<T>>>): T[] {
+  return toValue(list).map(element => toValue(element));
+}
+
+/**
+ * O(n) de-duplication that keeps the FIRST element seen per extracted key
+ * (matching VueUse's first-occurrence semantics). stdlib `unique` is
+ * last-write-wins per key, so we track seen keys in a Set here instead.
+ */
+function uniqueByKey<T>(array: T[], extractor: UseArrayUniqueKeyFn<T>): T[] {
+  const seen = new Set<PropertyKey>();
+  const result: T[] = [];
+
+  for (const element of array) {
+    const key = extractor(element);
+
+    if (seen.has(key))
+      continue;
+
+    seen.add(key);
+    result.push(element);
+  }
+
+  return result;
+}
diff --git a/vue/toolkit/src/composables/array/useSorted/demo.vue b/vue/toolkit/src/composables/array/useSorted/demo.vue
new file mode 100644
index 0000000..082bbd2
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useSorted/demo.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useSorted } from './index';
+
+interface Player {
+  name: string;
+  score: number;
+  level: number;
+}
+
+const players = ref<Player[]>([
+  { name: 'Nova', score: 1840, level: 12 },
+  { name: 'Echo', score: 2310, level: 9 },
+  { name: 'Pixel', score: 1840, level: 7 },
+  { name: 'Drift', score: 990, level: 14 },
+  { name: 'Sable', score: 2310, level: 11 },
+]);
+
+type SortKey = 'score' | 'level' | 'name';
+
+const sortKey = ref<SortKey>('score');
+const descending = ref(true);
+
+// Reactive, stable sorted copy — the source `players` is never mutated.
+// Stable ordering means ties (equal score) keep their original relative order.
+const sorted = useSorted(players, (a, b) => {
+  const direction = descending.value ? -1 : 1;
+  if (sortKey.value === 'name')
+    return a.name.localeCompare(b.name) * direction;
+  return (a[sortKey.value] - b[sortKey.value]) * direction;
+});
+
+const keys: { id: SortKey; label: string }[] = [
+  { id: 'score', label: 'Score' },
+  { id: 'level', label: 'Level' },
+  { id: 'name', label: 'Name' },
+];
+</script>
+
+<template>
+  <div class="w-full max-w-md flex flex-col gap-4">
+    <div class="flex items-center justify-between gap-2">
+      <div class="inline-flex rounded-lg border border-(--border) bg-(--bg-elevated) p-0.5">
+        <button
+          v-for="key in keys"
+          :key="key.id"
+          class="rounded-md px-3 py-1 text-sm font-medium transition cursor-pointer"
+          :class="sortKey === key.id
+            ? 'bg-(--accent) text-(--accent-fg)'
+            : 'text-(--fg-muted) hover:text-(--fg)'"
+          @click="sortKey = key.id"
+        >
+          {{ key.label }}
+        </button>
+      </div>
+      <button
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="descending = !descending"
+      >
+        {{ descending ? 'Desc ↓' : 'Asc ↑' }}
+      </button>
+    </div>
+
+    <ol class="flex flex-col gap-2">
+      <li
+        v-for="(player, index) in sorted"
+        :key="player.name"
+        class="flex items-center gap-3 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2.5"
+      >
+        <span class="w-6 text-center font-mono text-sm tabular-nums text-(--fg-subtle)">
+          {{ index + 1 }}
+        </span>
+        <span class="flex-1 text-sm font-medium text-(--fg)">{{ player.name }}</span>
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+          Lv {{ player.level }}
+        </span>
+        <span class="w-16 text-right font-mono text-sm font-semibold tabular-nums text-(--fg)">
+          {{ player.score.toLocaleString() }}
+        </span>
+      </li>
+    </ol>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Stable sort — players with an equal {{ sortKey }} keep their original order. The source array is left untouched.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/array/useSorted/index.test.ts b/vue/toolkit/src/composables/array/useSorted/index.test.ts
new file mode 100644
index 0000000..74ae9eb
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useSorted/index.test.ts
@@ -0,0 +1,150 @@
+import { describe, expect, it } from 'vitest';
+import { isReactive, nextTick, reactive, ref } from 'vue';
+import type { Ref } from 'vue';
+import { useSorted } from '.';
+
+describe(useSorted, () => {
+  it('returns a sorted copy with the default numeric compare', () => {
+    const source = ref([3, 1, 2]);
+    const sorted = useSorted(source);
+    expect(sorted.value).toEqual([1, 2, 3]);
+  });
+
+  it('does not mutate the source by default', () => {
+    const original = [3, 1, 2];
+    const source = ref(original);
+    const sorted = useSorted(source);
+    expect(sorted.value).toEqual([1, 2, 3]);
+    expect(source.value).toEqual([3, 1, 2]);
+    expect(sorted.value).not.toBe(source.value);
+  });
+
+  it('reacts to source changes', () => {
+    const source = ref([3, 1, 2]);
+    const sorted = useSorted(source);
+    expect(sorted.value).toEqual([1, 2, 3]);
+    source.value = [9, 5, 7, 1];
+    expect(sorted.value).toEqual([1, 5, 7, 9]);
+  });
+
+  it('supports a custom compare function as the second argument', () => {
+    const source = ref([{ age: 30 }, { age: 18 }, { age: 25 }]);
+    const sorted = useSorted(source, (a, b) => a.age - b.age);
+    expect(sorted.value.map(u => u.age)).toEqual([18, 25, 30]);
+  });
+
+  it('supports descending order via compare function', () => {
+    const source = ref([1, 2, 3]);
+    const sorted = useSorted(source, (a, b) => b - a);
+    expect(sorted.value).toEqual([3, 2, 1]);
+  });
+
+  it('accepts an options object as the second argument', () => {
+    const source = ref([3, 1, 2]);
+    const sorted = useSorted(source, { compareFn: (a, b) => b - a });
+    expect(sorted.value).toEqual([3, 2, 1]);
+  });
+
+  it('accepts a compare function plus an options object', () => {
+    const calls: number[] = [];
+    const sortFn = <T>(arr: T[], compareFn: (a: T, b: T) => number): T[] => {
+      calls.push(arr.length);
+      return [...arr].sort(compareFn);
+    };
+    const source = ref([3, 1, 2]);
+    const sorted = useSorted(source, (a, b) => a - b, { sortFn });
+    expect(sorted.value).toEqual([1, 2, 3]);
+    expect(calls.length).toBeGreaterThan(0);
+  });
+
+  it('is stable: equal elements keep their original relative order', () => {
+    const source = ref([
+      { k: 1, id: 'a' },
+      { k: 1, id: 'b' },
+      { k: 0, id: 'c' },
+      { k: 1, id: 'd' },
+    ]);
+    const sorted = useSorted(source, (a, b) => a.k - b.k);
+    expect(sorted.value.map(x => x.id)).toEqual(['c', 'a', 'b', 'd']);
+  });
+
+  it('works with getter sources', () => {
+    const base = ref([5, 3, 4]);
+    const sorted = useSorted(() => base.value);
+    expect(sorted.value).toEqual([3, 4, 5]);
+    base.value = [2, 1];
+    expect(sorted.value).toEqual([1, 2]);
+  });
+
+  it('works with a plain (non-reactive) array source', () => {
+    const sorted = useSorted([3, 1, 2]);
+    expect(sorted.value).toEqual([1, 2, 3]);
+  });
+
+  it('handles empty and single-element arrays', () => {
+    expect(useSorted(ref<number[]>([])).value).toEqual([]);
+    expect(useSorted(ref([42])).value).toEqual([42]);
+  });
+
+  describe('dirty mode', () => {
+    it('sorts the source ref in place', async () => {
+      const source = ref([3, 1, 2]);
+      const result = useSorted(source, { dirty: true });
+      await nextTick();
+      expect(source.value).toEqual([1, 2, 3]);
+      expect(result).toBe(source);
+    });
+
+    it('re-sorts when the source changes', async () => {
+      const source = ref([3, 1, 2]);
+      useSorted(source, { dirty: true });
+      await nextTick();
+      expect(source.value).toEqual([1, 2, 3]);
+      source.value = [9, 4, 6];
+      await nextTick();
+      expect(source.value).toEqual([4, 6, 9]);
+    });
+
+    it('honors a custom compare function in dirty mode', async () => {
+      const source = ref([1, 2, 3]);
+      useSorted(source, (a, b) => b - a, { dirty: true });
+      await nextTick();
+      expect(source.value).toEqual([3, 2, 1]);
+    });
+
+    it('mutates a reactive array source in place via a getter', async () => {
+      const source = reactive([3, 1, 2]);
+      useSorted(() => source, { dirty: true });
+      await nextTick();
+      expect(isReactive(source)).toBeTruthy();
+      expect([...source]).toEqual([1, 2, 3]);
+    });
+  });
+
+  describe('writable result', () => {
+    it('writes back to the source ref when assigned (non-dirty)', () => {
+      const source = ref([3, 1, 2]);
+      const sorted = useSorted(source);
+      sorted.value = [10, 20];
+      expect(source.value).toEqual([10, 20]);
+    });
+
+    it('silently ignores writes when the source is a getter', () => {
+      const base = ref([3, 1, 2]);
+      const sorted = useSorted(() => base.value) as unknown as Ref<number[]>;
+      expect(() => {
+        sorted.value = [10, 20];
+      }).not.toThrow();
+      // getter source is unchanged
+      expect(base.value).toEqual([3, 1, 2]);
+    });
+  });
+
+  describe('SSR safety', () => {
+    it('does not touch any DOM global and works without a document', () => {
+      // useSorted is pure reactive computation; it must run identically in SSR.
+      const sorted = useSorted(ref([3, 1, 2]));
+      expect(sorted.value).toEqual([1, 2, 3]);
+    });
+  });
+});
diff --git a/vue/toolkit/src/composables/array/useSorted/index.ts b/vue/toolkit/src/composables/array/useSorted/index.ts
new file mode 100644
index 0000000..59fb566
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useSorted/index.ts
@@ -0,0 +1,151 @@
+import { computed, isRef, toValue, watchEffect } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';
+import { isFunction } from '@robonen/stdlib';
+
+export type UseSortedCompareFn<T = any>
+  = (a: T, b: T) => number;
+
+export type UseSortedFn<T = any>
+  = (arr: T[], compareFn: UseSortedCompareFn<T>) => T[];
+
+export interface UseSortedOptions<T = any> {
+  /**
+   * The sort algorithm to apply. Receives a copy of the array (or the source
+   * itself in `dirty` mode) and the resolved compare function.
+   *
+   * Defaults to a guaranteed-stable merge sort, so equal elements always keep
+   * their original relative order regardless of the JS engine.
+   */
+  sortFn?: UseSortedFn<T>;
+  /**
+   * The compare function used to order two elements, matching the signature of
+   * `Array.prototype.sort`.
+   *
+   * @default (a, b) => a - b
+   */
+  compareFn?: UseSortedCompareFn<T>;
+  /**
+   * Sort the source array in place instead of returning a sorted copy.
+   *
+   * When `true`, the returned ref is the source itself and its values are
+   * re-sorted whenever the source changes.
+   *
+   * @default false
+   */
+  dirty?: boolean;
+}
+
+const defaultCompare: UseSortedCompareFn<number> = (a, b) => a - b;
+
+/**
+ * Guaranteed-stable merge sort. Equal elements keep their original order on
+ * every engine, unlike the historically engine-dependent `Array.prototype.sort`.
+ */
+function stableSort<T>(array: T[], compareFn: UseSortedCompareFn<T>): T[] {
+  const length = array.length;
+  if (length < 2)
+    return array;
+
+  const middle = length >> 1;
+  const left = stableSort(array.slice(0, middle), compareFn);
+  const right = stableSort(array.slice(middle), compareFn);
+
+  const result: T[] = Array.from({ length });
+  let i = 0;
+  let l = 0;
+  let r = 0;
+
+  while (l < left.length && r < right.length) {
+    // Bounds are guaranteed by the loop condition; `!` drops the index-access undefined.
+    // `<= 0` keeps left (earlier) element first -> stability.
+    if (compareFn(left[l]!, right[r]!) <= 0)
+      result[i++] = left[l++]!;
+    else
+      result[i++] = right[r++]!;
+  }
+
+  while (l < left.length)
+    result[i++] = left[l++]!;
+  while (r < right.length)
+    result[i++] = right[r++]!;
+
+  return result;
+}
+
+const defaultSortFn: UseSortedFn = <T>(source: T[], compareFn: UseSortedCompareFn<T>): T[] => stableSort(source, compareFn);
+
+/**
+ * @name useSorted
+ * @category Array
+ * @description Reactive, stable sorted copy of an array. Mirrors `Array.prototype.sort` but never mutates the source by default and guarantees stable ordering.
+ *
+ * @param {MaybeRefOrGetter<T[]>} source The source array (ref, getter, or plain array)
+ * @param {UseSortedCompareFn<T> | UseSortedOptions<T>} [compareFn] A compare function, or an options object
+ * @param {Omit<UseSortedOptions<T>, 'compareFn'>} [options] Extra options when the second argument is a compare function
+ * @returns {ComputedRef<T[]> | Ref<T[]>} A computed sorted copy (default), or the source ref when `dirty` is `true`
+ *
+ * @example
+ * const list = ref([3, 1, 2]);
+ * const sorted = useSorted(list); // [1, 2, 3]
+ *
+ * @example
+ * // custom compare function
+ * const users = ref([{ age: 30 }, { age: 18 }]);
+ * const byAge = useSorted(users, (a, b) => a.age - b.age);
+ *
+ * @example
+ * // sort the source in place
+ * const list = ref([3, 1, 2]);
+ * useSorted(list, { dirty: true });
+ * // list.value is now [1, 2, 3]
+ *
+ * @since 0.0.15
+ */
+export function useSorted<T = any>(source: Ref<T[]>, compareFn?: UseSortedCompareFn<T>): Ref<T[]>;
+export function useSorted<T = any>(source: MaybeRefOrGetter<T[]>, compareFn?: UseSortedCompareFn<T>): ComputedRef<T[]>;
+export function useSorted<T = any>(source: Ref<T[]>, options?: UseSortedOptions<T>): Ref<T[]>;
+export function useSorted<T = any>(source: MaybeRefOrGetter<T[]>, options?: UseSortedOptions<T>): ComputedRef<T[]>;
+export function useSorted<T = any>(source: Ref<T[]>, compareFn?: UseSortedCompareFn<T>, options?: Omit<UseSortedOptions<T>, 'compareFn'>): Ref<T[]>;
+export function useSorted<T = any>(source: MaybeRefOrGetter<T[]>, compareFn?: UseSortedCompareFn<T>, options?: Omit<UseSortedOptions<T>, 'compareFn'>): ComputedRef<T[]>;
+export function useSorted<T = any>(
+  source: MaybeRefOrGetter<T[]>,
+  compareFnOrOptions?: UseSortedCompareFn<T> | UseSortedOptions<T>,
+  maybeOptions?: Omit<UseSortedOptions<T>, 'compareFn'>,
+): ComputedRef<T[]> | Ref<T[]> {
+  let compareFn: UseSortedCompareFn<T> = defaultCompare as UseSortedCompareFn<T>;
+  let options: UseSortedOptions<T> = {};
+
+  if (isFunction(compareFnOrOptions)) {
+    compareFn = compareFnOrOptions;
+    options = maybeOptions ?? {};
+  }
+  else if (compareFnOrOptions) {
+    options = compareFnOrOptions;
+    compareFn = options.compareFn ?? (defaultCompare as UseSortedCompareFn<T>);
+  }
+
+  const {
+    dirty = false,
+    sortFn = defaultSortFn,
+  } = options;
+
+  if (!dirty) {
+    return computed<T[]>({
+      get: () => sortFn([...toValue(source)], compareFn),
+      set: (value) => {
+        if (isRef(source))
+          (source as Ref<T[]>).value = value;
+      },
+    });
+  }
+
+  watchEffect(() => {
+    const result = sortFn(toValue(source), compareFn);
+    if (isRef(source))
+      (source as Ref<T[]>).value = result;
+    else
+      (toValue(source)).splice(0, toValue(source).length, ...result);
+  });
+
+  return source as Ref<T[]>;
+}
diff --git a/vue/toolkit/src/composables/browser/broadcastedRef/demo.vue b/vue/toolkit/src/composables/browser/broadcastedRef/demo.vue
new file mode 100644
index 0000000..d87dfff
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/broadcastedRef/demo.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { broadcastedRef } from './index';
+
+interface CartState {
+  item: string;
+  quantity: number;
+}
+
+const products = ['Mechanical Keyboard', 'USB-C Hub', 'Desk Mat', 'Wrist Rest'];
+
+// Synced across every open tab via BroadcastChannel
+const cart = broadcastedRef<CartState>('docs-demo-cart', { item: products[0], quantity: 1 }, { immediate: true });
+const theme = broadcastedRef<'light' | 'dark'>('docs-demo-theme', 'light');
+
+const supported = typeof BroadcastChannel !== 'undefined';
+
+const subtotal = computed(() => cart.value.quantity * 49);
+
+function pick(item: string): void {
+  cart.value = { ...cart.value, item };
+}
+
+function setQuantity(delta: number): void {
+  cart.value = { ...cart.value, quantity: Math.max(1, cart.value.quantity + delta) };
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Shared cart</span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+        :class="supported
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'"
+      >
+        <span class="h-1.5 w-1.5 rounded-full" :class="supported ? 'bg-emerald-500' : 'bg-amber-500'" />
+        {{ supported ? 'Broadcasting' : 'Not supported' }}
+      </span>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex flex-wrap gap-2">
+        <button
+          v-for="product in products"
+          :key="product"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+          :class="cart.item === product
+            ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
+            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+          @click="pick(product)"
+        >
+          {{ product }}
+        </button>
+      </div>
+
+      <div class="mt-4 flex items-center justify-between">
+        <span class="text-sm text-(--fg-muted)">Quantity</span>
+        <div class="flex items-center gap-2">
+          <button
+            class="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-(--border) bg-(--bg-elevated) text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40"
+            :disabled="cart.quantity <= 1"
+            @click="setQuantity(-1)"
+          >
+            &minus;
+          </button>
+          <span class="w-8 text-center font-mono text-lg font-bold tabular-nums text-(--fg)">{{ cart.quantity }}</span>
+          <button
+            class="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-(--border) bg-(--bg-elevated) text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+            @click="setQuantity(1)"
+          >
+            +
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+      <div class="flex justify-between">
+        <span class="text-(--fg-muted)">{{ cart.item }} &times; {{ cart.quantity }}</span>
+        <span class="font-bold">${{ subtotal }}</span>
+      </div>
+    </div>
+
+    <button
+      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+      @click="theme = theme === 'light' ? 'dark' : 'light'"
+    >
+      Toggle shared theme: <span class="font-mono">{{ theme }}</span>
+    </button>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Open this page in a second tab. Every change you make here is broadcast and mirrored instantly in the other tab.
+    </p>
+  </div>
+</template>
diff --git a/web/vue/src/composables/reactivity/broadcastedRef/index.test.ts b/vue/toolkit/src/composables/browser/broadcastedRef/index.test.ts
similarity index 98%
rename from web/vue/src/composables/reactivity/broadcastedRef/index.test.ts
rename to vue/toolkit/src/composables/browser/broadcastedRef/index.test.ts
index 1aaedaa..224d7f2 100644
--- a/web/vue/src/composables/reactivity/broadcastedRef/index.test.ts
+++ b/vue/toolkit/src/composables/browser/broadcastedRef/index.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { defineComponent, effectScope, nextTick, watch } from 'vue';
 import { mount } from '@vue/test-utils';
 import { broadcastedRef } from '.';
diff --git a/web/vue/src/composables/reactivity/broadcastedRef/index.ts b/vue/toolkit/src/composables/browser/broadcastedRef/index.ts
similarity index 98%
rename from web/vue/src/composables/reactivity/broadcastedRef/index.ts
rename to vue/toolkit/src/composables/browser/broadcastedRef/index.ts
index 6102b07..d4bc485 100644
--- a/web/vue/src/composables/reactivity/broadcastedRef/index.ts
+++ b/vue/toolkit/src/composables/browser/broadcastedRef/index.ts
@@ -13,7 +13,7 @@ export interface BroadcastedRefOptions {
 
 /**
  * @name broadcastedRef
- * @category Reactivity
+ * @category Browser
  * @description Creates a custom ref that syncs its value across browser tabs via the BroadcastChannel API
  *
  * @param {string} key The channel key to use for broadcasting
@@ -65,4 +65,4 @@ export function broadcastedRef<T>(key: string, initialValue: T, options: Broadca
   tryOnScopeDispose(() => channel.close());
 
   return data;
-}
\ No newline at end of file
+}
diff --git a/vue/toolkit/src/composables/browser/index.ts b/vue/toolkit/src/composables/browser/index.ts
new file mode 100644
index 0000000..83395d7
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/index.ts
@@ -0,0 +1,36 @@
+export * from './broadcastedRef';
+export * from './useBreakpoints';
+export * from './useClipboard';
+export * from './useClipboardItems';
+export * from './useCloseWatcher';
+export * from './useColorMode';
+export * from './useCssVar';
+export * from './useDark';
+export * from './useDocumentPiP';
+export * from './useEventListener';
+export * from './useEyeDropper';
+export * from './useFavicon';
+export * from './useFileDialog';
+export * from './useFileSystemAccess';
+export * from './useFullscreen';
+export * from './useImage';
+export * from './useLocalFonts';
+export * from './useMediaQuery';
+export * from './useObjectUrl';
+export * from './usePermission';
+export * from './usePreferredColorScheme';
+export * from './usePreferredContrast';
+export * from './usePreferredDark';
+export * from './usePreferredLanguages';
+export * from './usePreferredReducedMotion';
+export * from './usePreferredReducedTransparency';
+export * from './useScriptTag';
+export * from './useShare';
+export * from './useStyleTag';
+export * from './useTabLeader';
+export * from './useTextareaAutosize';
+export * from './useTitle';
+export * from './useUrlSearchParams';
+export * from './useVibrate';
+export * from './useWakeLock';
+export * from './useWebNotification';
diff --git a/vue/toolkit/src/composables/browser/useBreakpoints/demo.vue b/vue/toolkit/src/composables/browser/useBreakpoints/demo.vue
new file mode 100644
index 0000000..c573b73
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useBreakpoints/demo.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { useBreakpoints, breakpointsTailwind } from './index';
+
+const bp = useBreakpoints(breakpointsTailwind);
+
+const active = bp.active();
+const current = bp.current();
+
+const isMobile = bp.smaller('md');
+const isDesktop = bp.greaterOrEqual('lg');
+
+const rows: { key: 'sm' | 'md' | 'lg' | 'xl' | '2xl'; width: string }[] = [
+  { key: 'sm', width: '640px' },
+  { key: 'md', width: '768px' },
+  { key: 'lg', width: '1024px' },
+  { key: 'xl', width: '1280px' },
+  { key: '2xl', width: '1536px' },
+];
+
+const device = (): string => (isDesktop.value ? 'Desktop' : isMobile.value ? 'Mobile' : 'Tablet');
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Active breakpoint</span>
+      <div class="mt-1 flex items-baseline gap-2">
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ active || 'none' }}</span>
+        <span class="rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">{{ device() }}</span>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-1.5">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Tailwind breakpoints</span>
+      <div
+        v-for="row in rows"
+        :key="row.key"
+        class="flex items-center justify-between rounded-lg border px-3 py-2 text-sm transition"
+        :class="bp[row.key].value
+          ? 'border-(--accent) bg-(--accent-subtle) text-(--accent-text)'
+          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        <span class="font-mono font-medium">{{ row.key }}</span>
+        <span class="font-mono tabular-nums text-(--fg-subtle)">&ge; {{ row.width }}</span>
+        <span
+          class="h-2 w-2 rounded-full transition"
+          :class="bp[row.key].value ? 'bg-(--accent)' : 'bg-(--border-strong)'"
+        />
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+      <div class="flex justify-between">
+        <span class="text-(--fg-muted)">current()</span>
+        <span>[{{ current.length ? current.join(', ') : '—' }}]</span>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Resize your browser window — the matched breakpoints update live.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useBreakpoints/index.test.ts b/vue/toolkit/src/composables/browser/useBreakpoints/index.test.ts
new file mode 100644
index 0000000..534bab7
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useBreakpoints/index.test.ts
@@ -0,0 +1,343 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, ref } from 'vue';
+import {
+  breakpointsAntDesign,
+  breakpointsBootstrapV5,
+  breakpointsTailwind,
+  breakpointsVuetifyV3,
+  useBreakpoints,
+} from '.';
+
+type Listener = (event: { matches: boolean }) => void;
+
+interface StubMql {
+  readonly matches: boolean;
+  media: string;
+  addEventListener: (type: string, cb: Listener) => void;
+  removeEventListener: (type: string, cb: Listener) => void;
+}
+
+/**
+ * A `matchMedia` stub backed by a mutable viewport width. It parses
+ * `(min-width: Npx)` / `(max-width: Npx)` (optionally joined by `and`) so each
+ * query evaluates against the current `width`. Calling `setWidth` re-dispatches
+ * `change` to every live MediaQueryList, mimicking a real viewport resize.
+ */
+function stubViewport(initialWidth: number) {
+  let width = initialWidth;
+  const lists = new Set<{ media: string; matches: boolean; listeners: Set<Listener> }>();
+
+  function toPx(value: string): number {
+    const n = Number.parseFloat(value);
+    return /(?:em|rem)$/i.test(value) ? n * 16 : n;
+  }
+
+  function evaluate(media: string): boolean {
+    return media.split(' and ').every((part) => {
+      const min = part.match(/min-width:\s*(-?\d+(?:\.\d+)?(?:px|r?em)?)/);
+      const max = part.match(/max-width:\s*(-?\d+(?:\.\d+)?(?:px|r?em)?)/);
+
+      if (min) return width >= toPx(min[1]!);
+      if (max) return width <= toPx(max[1]!);
+
+      return false;
+    });
+  }
+
+  const matchMedia = vi.fn((media: string): StubMql => {
+    const entry = { media, matches: evaluate(media), listeners: new Set<Listener>() };
+    lists.add(entry);
+
+    return {
+      get matches() {
+        return entry.matches;
+      },
+      media,
+      addEventListener: (_: string, cb: Listener) => entry.listeners.add(cb),
+      removeEventListener: (_: string, cb: Listener) => entry.listeners.delete(cb),
+    };
+  });
+
+  vi.stubGlobal('matchMedia', matchMedia);
+
+  return {
+    matchMedia,
+    setWidth(next: number) {
+      width = next;
+
+      for (const entry of lists) {
+        const matches = evaluate(entry.media);
+
+        if (matches !== entry.matches) {
+          entry.matches = matches;
+
+          for (const cb of entry.listeners) cb({ matches });
+        }
+      }
+    },
+  };
+}
+
+describe(useBreakpoints, () => {
+  beforeEach(() => {
+    vi.stubGlobal('matchMedia', undefined);
+  });
+
+  afterEach(() => vi.unstubAllGlobals());
+
+  it('exposes a reactive shortcut ref per breakpoint (min-width strategy)', async () => {
+    stubViewport(800);
+    const scope = effectScope();
+    let bp: ReturnType<typeof useBreakpoints<'sm' | 'md' | 'lg'>>;
+
+    scope.run(() => {
+      bp = useBreakpoints({ sm: 640, md: 768, lg: 1024 });
+    });
+    await nextTick();
+
+    // 800px: >= sm (640), >= md (768), < lg (1024)
+    expect(bp!.sm.value).toBeTruthy();
+    expect(bp!.md.value).toBeTruthy();
+    expect(bp!.lg.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('uses max-width semantics for shortcuts under the max-width strategy', async () => {
+    stubViewport(800);
+    const scope = effectScope();
+    let bp: ReturnType<typeof useBreakpoints<'sm' | 'md' | 'lg'>>;
+
+    scope.run(() => {
+      bp = useBreakpoints({ sm: 640, md: 768, lg: 1024 }, { strategy: 'max-width' });
+    });
+    await nextTick();
+
+    // 800px: <= lg (1024) only; not <= sm/md
+    expect(bp!.sm.value).toBeFalsy();
+    expect(bp!.md.value).toBeFalsy();
+    expect(bp!.lg.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('reacts to viewport changes', async () => {
+    const vp = stubViewport(500);
+    const scope = effectScope();
+    let bp: ReturnType<typeof useBreakpoints<'sm' | 'lg'>>;
+
+    scope.run(() => {
+      bp = useBreakpoints({ sm: 640, lg: 1024 });
+    });
+    await nextTick();
+
+    expect(bp!.greaterOrEqual('sm').value).toBeFalsy();
+
+    vp.setWidth(700);
+    await nextTick();
+    expect(bp!.greaterOrEqual('sm').value).toBeTruthy();
+    expect(bp!.greaterOrEqual('lg').value).toBeFalsy();
+
+    vp.setWidth(1100);
+    await nextTick();
+    expect(bp!.greaterOrEqual('lg').value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('greater/smaller apply the strict (exclusive) delta', async () => {
+    // Exactly at the md breakpoint (768).
+    const vp = stubViewport(768);
+    const scope = effectScope();
+    let bp: ReturnType<typeof useBreakpoints<'md'>>;
+
+    scope.run(() => {
+      bp = useBreakpoints({ md: 768 });
+    });
+    await nextTick();
+
+    // At exactly 768: greaterOrEqual true, greater false, smallerOrEqual true, smaller false.
+    expect(bp!.greaterOrEqual('md').value).toBeTruthy();
+    expect(bp!.greater('md').value).toBeFalsy();
+    expect(bp!.smallerOrEqual('md').value).toBeTruthy();
+    expect(bp!.smaller('md').value).toBeFalsy();
+
+    vp.setWidth(900);
+    await nextTick();
+    expect(bp!.greater('md').value).toBeTruthy();
+    expect(bp!.smaller('md').value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('between is half-open [a, b)', async () => {
+    const vp = stubViewport(768);
+    const scope = effectScope();
+    let bp: ReturnType<typeof useBreakpoints<'sm' | 'md' | 'lg'>>;
+
+    scope.run(() => {
+      bp = useBreakpoints({ sm: 640, md: 768, lg: 1024 });
+    });
+    await nextTick();
+
+    // 768 is in [sm, lg) and in [md, lg); the upper bound (md) is exclusive in [sm, md).
+    expect(bp!.between('sm', 'lg').value).toBeTruthy();
+    expect(bp!.between('sm', 'md').value).toBeFalsy();
+    expect(bp!.between('md', 'lg').value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('current() returns active breakpoints ordered small to large; active() picks per strategy', async () => {
+    stubViewport(800);
+    const scope = effectScope();
+    let bp: ReturnType<typeof useBreakpoints<'sm' | 'md' | 'lg'>>;
+
+    scope.run(() => {
+      bp = useBreakpoints({ lg: 1024, sm: 640, md: 768 });
+    });
+    await nextTick();
+
+    // 800px: sm and md active, sorted ascending.
+    expect(bp!.current().value).toEqual(['sm', 'md']);
+    // min-width strategy → largest active breakpoint.
+    expect(bp!.active().value).toBe('md');
+    scope.stop();
+  });
+
+  it('active() picks the smallest active breakpoint under max-width strategy', async () => {
+    stubViewport(800);
+    const scope = effectScope();
+    let bp: ReturnType<typeof useBreakpoints<'sm' | 'md' | 'lg'>>;
+
+    scope.run(() => {
+      bp = useBreakpoints({ sm: 640, md: 768, lg: 1024 }, { strategy: 'max-width' });
+    });
+    await nextTick();
+
+    expect(bp!.active().value).toBe('lg');
+    scope.stop();
+  });
+
+  it('synchronous is* helpers read the current match', async () => {
+    stubViewport(800);
+    const scope = effectScope();
+    let bp: ReturnType<typeof useBreakpoints<'sm' | 'md' | 'lg'>>;
+
+    scope.run(() => {
+      bp = useBreakpoints({ sm: 640, md: 768, lg: 1024 });
+    });
+    await nextTick();
+
+    expect(bp!.isGreaterOrEqual('md')).toBeTruthy();
+    expect(bp!.isGreater('md')).toBeTruthy();
+    expect(bp!.isGreaterOrEqual('lg')).toBeFalsy();
+    expect(bp!.isSmallerOrEqual('lg')).toBeTruthy();
+    expect(bp!.isSmaller('sm')).toBeFalsy();
+    expect(bp!.isInBetween('sm', 'lg')).toBeTruthy();
+    expect(bp!.isInBetween('sm', 'md')).toBeFalsy();
+    scope.stop();
+  });
+
+  it('supports reactive breakpoint values', async () => {
+    const vp = stubViewport(700);
+    const threshold = ref(640);
+    const scope = effectScope();
+    let bp: ReturnType<typeof useBreakpoints<'point'>>;
+
+    scope.run(() => {
+      bp = useBreakpoints({ point: threshold });
+    });
+    await nextTick();
+
+    expect(bp!.greaterOrEqual('point').value).toBeTruthy();
+
+    threshold.value = 900;
+    await nextTick();
+    expect(bp!.greaterOrEqual('point').value).toBeFalsy();
+
+    vp.setWidth(1000);
+    await nextTick();
+    expect(bp!.greaterOrEqual('point').value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('handles string unit breakpoint values', async () => {
+    stubViewport(800); // 800px, 48em = 768px
+    const scope = effectScope();
+    let bp: ReturnType<typeof useBreakpoints<'md'>>;
+
+    scope.run(() => {
+      bp = useBreakpoints({ md: '48em' });
+    });
+    await nextTick();
+
+    expect(bp!.greaterOrEqual('md').value).toBeTruthy();
+    expect(bp!.isGreaterOrEqual('md')).toBeTruthy();
+    scope.stop();
+  });
+
+  describe('SSR / unsupported path', () => {
+    it('resolves width queries from ssrWidth when matchMedia is unavailable', () => {
+      // matchMedia stays undefined (beforeEach), window has no matchMedia path used by match().
+      const scope = effectScope();
+      let bp: ReturnType<typeof useBreakpoints<'sm' | 'lg'>>;
+
+      scope.run(() => {
+        bp = useBreakpoints({ sm: 640, lg: 1024 }, { ssrWidth: 800 });
+      });
+
+      // Synchronous helpers resolve against ssrWidth.
+      expect(bp!.isGreaterOrEqual('sm')).toBeTruthy();
+      expect(bp!.isGreaterOrEqual('lg')).toBeFalsy();
+      expect(bp!.isSmallerOrEqual('lg')).toBeTruthy();
+      scope.stop();
+    });
+
+    it('returns false for snapshot helpers with no window and no ssrWidth', () => {
+      const scope = effectScope();
+      let bp: ReturnType<typeof useBreakpoints<'sm'>>;
+
+      scope.run(() => {
+        bp = useBreakpoints({ sm: 640 }, { window: undefined });
+      });
+
+      expect(bp!.isGreaterOrEqual('sm')).toBeFalsy();
+      expect(bp!.isSmallerOrEqual('sm')).toBeFalsy();
+      scope.stop();
+    });
+
+    it('does not throw when constructed without a window (SSR)', () => {
+      const scope = effectScope();
+
+      expect(() => {
+        scope.run(() => {
+          const bp = useBreakpoints(breakpointsTailwind, { window: undefined });
+          // Accessing reactive refs should be safe and default to false.
+          expect(bp.lg.value).toBeFalsy();
+        });
+      }).not.toThrow();
+      scope.stop();
+    });
+  });
+
+  describe('presets', () => {
+    it('exports the expected preset values', () => {
+      expect(breakpointsTailwind).toMatchObject({ sm: 640, md: 768, lg: 1024, xl: 1280, '2xl': 1536 });
+      expect(breakpointsBootstrapV5).toMatchObject({ xs: 0, sm: 576, md: 768, lg: 992, xl: 1200, xxl: 1400 });
+      expect(breakpointsAntDesign).toMatchObject({ xs: 480, sm: 576, md: 768, lg: 992, xl: 1200, xxl: 1600 });
+      expect(breakpointsVuetifyV3).toMatchObject({ xs: 0, sm: 600, md: 960, lg: 1280, xl: 1920, xxl: 2560 });
+    });
+
+    it('works with a preset', async () => {
+      stubViewport(1300);
+      const scope = effectScope();
+      let bp: ReturnType<typeof useBreakpoints<keyof typeof breakpointsTailwind & string>>;
+
+      scope.run(() => {
+        bp = useBreakpoints(breakpointsTailwind);
+      });
+      await nextTick();
+
+      expect(bp!.greaterOrEqual('xl').value).toBeTruthy();
+      expect(bp!.greaterOrEqual('2xl').value).toBeFalsy();
+      expect(bp!.active().value).toBe('xl');
+      scope.stop();
+    });
+  });
+});
diff --git a/vue/toolkit/src/composables/browser/useBreakpoints/index.ts b/vue/toolkit/src/composables/browser/useBreakpoints/index.ts
new file mode 100644
index 0000000..5a57602
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useBreakpoints/index.ts
@@ -0,0 +1,266 @@
+import { computed, toValue } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+import { isFunction, isNumber } from '@robonen/stdlib';
+import { defaultWindow } from '@/types';
+import type { ConfigurableWindow } from '@/types';
+import { useMediaQuery } from '@/composables/browser/useMediaQuery';
+import type { UseMediaQueryOptions } from '@/composables/browser/useMediaQuery';
+
+/**
+ * A breakpoints map: name → viewport width. Numbers are treated as pixels;
+ * strings keep their unit (`"48em"`, `"30rem"`, `"1024px"`). Values may be
+ * reactive (refs or getters).
+ */
+export type Breakpoints<K extends string = string>
+  = Record<K, MaybeRefOrGetter<number | string>>;
+
+/**
+ * Which edge a generated shortcut property (e.g. `breakpoints.lg`) reacts to.
+ *
+ * - `'min-width'` (mobile-first) — `lg` is `true` when the viewport is at least
+ *   the `lg` width.
+ * - `'max-width'` (desktop-first) — `lg` is `true` when the viewport is at most
+ *   the `lg` width.
+ */
+export type UseBreakpointsStrategy = 'min-width' | 'max-width';
+
+export interface UseBreakpointsOptions extends ConfigurableWindow, Pick<UseMediaQueryOptions, 'ssrWidth'> {
+  /**
+   * The query strategy used by the generated shortcut properties.
+   *
+   * @default 'min-width'
+   */
+  strategy?: UseBreakpointsStrategy;
+}
+
+export type UseBreakpointsReturn<K extends string = string>
+  = Record<K, ComputedRef<boolean>> & {
+    /** Reactive: viewport width is greater than or equal to breakpoint `k` (`min-width`). */
+    greaterOrEqual: (k: MaybeRefOrGetter<K>) => ComputedRef<boolean>;
+    /** Reactive: viewport width is smaller than or equal to breakpoint `k` (`max-width`). */
+    smallerOrEqual: (k: MaybeRefOrGetter<K>) => ComputedRef<boolean>;
+    /** Reactive: viewport width is strictly greater than breakpoint `k`. */
+    greater: (k: MaybeRefOrGetter<K>) => ComputedRef<boolean>;
+    /** Reactive: viewport width is strictly smaller than breakpoint `k`. */
+    smaller: (k: MaybeRefOrGetter<K>) => ComputedRef<boolean>;
+    /** Reactive: viewport width is within `[a, b)`. */
+    between: (a: MaybeRefOrGetter<K>, b: MaybeRefOrGetter<K>) => ComputedRef<boolean>;
+    /** Snapshot: viewport width is strictly greater than breakpoint `k`. */
+    isGreater: (k: MaybeRefOrGetter<K>) => boolean;
+    /** Snapshot: viewport width is greater than or equal to breakpoint `k`. */
+    isGreaterOrEqual: (k: MaybeRefOrGetter<K>) => boolean;
+    /** Snapshot: viewport width is strictly smaller than breakpoint `k`. */
+    isSmaller: (k: MaybeRefOrGetter<K>) => boolean;
+    /** Snapshot: viewport width is smaller than or equal to breakpoint `k`. */
+    isSmallerOrEqual: (k: MaybeRefOrGetter<K>) => boolean;
+    /** Snapshot: viewport width is within `[a, b)`. */
+    isInBetween: (a: MaybeRefOrGetter<K>, b: MaybeRefOrGetter<K>) => boolean;
+    /** Reactive: all currently active breakpoints, ordered small → large. */
+    current: () => ComputedRef<K[]>;
+    /** Reactive: the single active breakpoint per `strategy` (largest for `min-width`, smallest for `max-width`), or `''` when none. */
+    active: () => ComputedRef<K | ''>;
+  };
+
+/**
+ * Parse a CSS length token (`"1024px"`, `"48em"`, `"30rem"`, `"50%"`) into a
+ * pixel number. `em`/`rem` use the conventional 16px root size.
+ */
+function pxValue(value: string): number {
+  const number = Number.parseFloat(value);
+
+  if (Number.isNaN(number))
+    return Number.NaN;
+
+  if (/(?:em|rem)\s*$/i.test(value))
+    return number * 16;
+
+  return number;
+}
+
+/**
+ * Add `delta` to the numeric portion of a CSS length, preserving its unit.
+ * Used to build the strict (`> / <`) variants from inclusive media queries via
+ * a small ±0.1 nudge.
+ */
+function increaseWithUnit(target: number | string, delta: number): number | string {
+  if (isNumber(target))
+    return target + delta;
+
+  const value = target.match(/^-?\d+(?:\.\d+)?/)?.[0] ?? '';
+  const unit = target.slice(value.length);
+  const result = Number.parseFloat(value) + delta;
+
+  if (Number.isNaN(result))
+    return target;
+
+  return result + unit;
+}
+
+/**
+ * @name useBreakpoints
+ * @category Browser
+ * @description Reactive viewport breakpoints derived from a breakpoints map.
+ * SSR-safe (resolves width queries from `ssrWidth` before `matchMedia` exists),
+ * reactive to breakpoint values, and built on a single `useMediaQuery` per
+ * comparison. Comes with presets: `breakpointsTailwind`, `breakpointsBootstrapV5`,
+ * `breakpointsAntDesign`, `breakpointsVuetifyV3`.
+ *
+ * @param {Breakpoints<K>} breakpoints The breakpoints map (`name → width`)
+ * @param {UseBreakpointsOptions} [options={}] Options (`strategy`, custom `window`, `ssrWidth`)
+ * @returns {UseBreakpointsReturn<K>} Shortcut refs per breakpoint plus comparison helpers
+ *
+ * @example
+ * const bp = useBreakpoints(breakpointsTailwind);
+ * const isDesktop = bp.greaterOrEqual('lg');
+ * const isMobile = bp.smaller('md');
+ * bp.lg; // ComputedRef<boolean> — true when viewport >= 1024px
+ *
+ * @example
+ * const bp = useBreakpoints({ mobile: 0, tablet: 640, desktop: 1024 });
+ * const active = bp.active(); // ComputedRef<'mobile' | 'tablet' | 'desktop' | ''>
+ *
+ * @since 0.0.15
+ */
+export function useBreakpoints<K extends string>(
+  breakpoints: Breakpoints<K>,
+  options: UseBreakpointsOptions = {},
+): UseBreakpointsReturn<K> {
+  const { window = defaultWindow, strategy = 'min-width', ssrWidth } = options;
+  const mediaOptions: UseMediaQueryOptions = { window, ssrWidth };
+  const ssrSupport = isNumber(ssrWidth);
+
+  function getValue(k: MaybeRefOrGetter<K>, delta?: number): string {
+    let v = toValue(breakpoints[toValue(k)]);
+
+    if (delta !== undefined)
+      v = increaseWithUnit(v, delta);
+
+    return isNumber(v) ? `${v}px` : v;
+  }
+
+  // Synchronous (non-reactive) match for the `is*` snapshot helpers.
+  function match(edge: 'min' | 'max', size: string): boolean {
+    const supported = window && isFunction(window.matchMedia);
+
+    if (!supported)
+      return ssrSupport
+        ? (edge === 'min' ? ssrWidth >= pxValue(size) : ssrWidth <= pxValue(size))
+        : false;
+
+    return window.matchMedia(`(${edge}-width: ${size})`).matches;
+  }
+
+  const greaterOrEqual = (k: MaybeRefOrGetter<K>): ComputedRef<boolean> =>
+    useMediaQuery(() => `(min-width: ${getValue(k)})`, mediaOptions);
+
+  const smallerOrEqual = (k: MaybeRefOrGetter<K>): ComputedRef<boolean> =>
+    useMediaQuery(() => `(max-width: ${getValue(k)})`, mediaOptions);
+
+  const greater = (k: MaybeRefOrGetter<K>): ComputedRef<boolean> =>
+    useMediaQuery(() => `(min-width: ${getValue(k, 0.1)})`, mediaOptions);
+
+  const smaller = (k: MaybeRefOrGetter<K>): ComputedRef<boolean> =>
+    useMediaQuery(() => `(max-width: ${getValue(k, -0.1)})`, mediaOptions);
+
+  const between = (a: MaybeRefOrGetter<K>, b: MaybeRefOrGetter<K>): ComputedRef<boolean> =>
+    useMediaQuery(() => `(min-width: ${getValue(a)}) and (max-width: ${getValue(b, -0.1)})`, mediaOptions);
+
+  const keys = Object.keys(breakpoints) as K[];
+
+  // Generated shortcut properties (`bp.lg`). Lazily created getters so we only
+  // spin up a `useMediaQuery` watcher for the breakpoints actually accessed.
+  const shortcuts = keys.reduce((acc, k) => {
+    Object.defineProperty(acc, k, {
+      get: () => strategy === 'min-width' ? greaterOrEqual(k) : smallerOrEqual(k),
+      enumerable: true,
+      configurable: true,
+    });
+
+    return acc;
+  }, {} as Record<K, ComputedRef<boolean>>);
+
+  function current(): ComputedRef<K[]> {
+    const points = keys
+      .map(k => [k, shortcuts[k], pxValue(getValue(k))] as const)
+      .sort((a, b) => a[2] - b[2]);
+
+    return computed(() => points.filter(([, matches]) => matches.value).map(([k]) => k));
+  }
+
+  return Object.assign(shortcuts, {
+    greaterOrEqual,
+    smallerOrEqual,
+    greater,
+    smaller,
+    between,
+    isGreater: (k: MaybeRefOrGetter<K>): boolean => match('min', getValue(k, 0.1)),
+    isGreaterOrEqual: (k: MaybeRefOrGetter<K>): boolean => match('min', getValue(k)),
+    isSmaller: (k: MaybeRefOrGetter<K>): boolean => match('max', getValue(k, -0.1)),
+    isSmallerOrEqual: (k: MaybeRefOrGetter<K>): boolean => match('max', getValue(k)),
+    isInBetween: (a: MaybeRefOrGetter<K>, b: MaybeRefOrGetter<K>): boolean =>
+      match('min', getValue(a)) && match('max', getValue(b, -0.1)),
+    current,
+    active(): ComputedRef<K | ''> {
+      const bps = current();
+
+      return computed(() => bps.value.length === 0
+        ? ''
+        : bps.value.at(strategy === 'min-width' ? -1 : 0)!);
+    },
+  });
+}
+
+/**
+ * Tailwind CSS default breakpoints.
+ *
+ * @see https://tailwindcss.com/docs/responsive-design
+ */
+export const breakpointsTailwind = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  '2xl': 1536,
+};
+
+/**
+ * Bootstrap v5 default breakpoints.
+ *
+ * @see https://getbootstrap.com/docs/5.0/layout/breakpoints/
+ */
+export const breakpointsBootstrapV5 = {
+  xs: 0,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+  xxl: 1400,
+};
+
+/**
+ * Ant Design default breakpoints.
+ *
+ * @see https://ant.design/components/grid#col
+ */
+export const breakpointsAntDesign = {
+  xs: 480,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+  xxl: 1600,
+};
+
+/**
+ * Vuetify v3 default breakpoints.
+ *
+ * @see https://vuetifyjs.com/en/features/display-and-platform/
+ */
+export const breakpointsVuetifyV3 = {
+  xs: 0,
+  sm: 600,
+  md: 960,
+  lg: 1280,
+  xl: 1920,
+  xxl: 2560,
+};
diff --git a/vue/toolkit/src/composables/browser/useClipboard/demo.vue b/vue/toolkit/src/composables/browser/useClipboard/demo.vue
new file mode 100644
index 0000000..b229387
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useClipboard/demo.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useClipboard } from './index';
+
+const { text, copied, copyPending, isSupported, copy } = useClipboard({ copiedDuring: 1500 });
+
+const draft = ref('npm install @robonen/toolkit');
+
+const snippets = [
+  'git switch -c feature/clipboard',
+  'sk-live-9f2a4c7e1b8d6033',
+  'https://robonen.dev/docs/useClipboard',
+];
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Clipboard API</span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+        :class="isSupported
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-red-500/30 bg-red-500/10 text-red-600 dark:text-red-400'"
+      >
+        {{ isSupported ? 'Supported' : 'Not supported' }}
+      </span>
+    </div>
+
+    <template v-if="isSupported">
+      <div class="flex flex-col gap-2">
+        <input
+          v-model="draft"
+          type="text"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          placeholder="Type something to copy…"
+        >
+        <button
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          :disabled="copyPending || !draft"
+          @click="copy(draft)"
+        >
+          {{ copyPending ? 'Copying…' : copied ? 'Copied!' : 'Copy to clipboard' }}
+        </button>
+      </div>
+
+      <div class="flex flex-col gap-1.5">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Quick copy</span>
+        <button
+          v-for="snippet in snippets"
+          :key="snippet"
+          class="inline-flex items-center justify-between gap-2 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2 text-left text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.99] cursor-pointer"
+          @click="copy(snippet)"
+        >
+          <span class="truncate font-mono text-xs text-(--fg-muted)">{{ snippet }}</span>
+          <span class="shrink-0 text-xs text-(--fg-subtle)">Copy</span>
+        </button>
+      </div>
+
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Last copied</span>
+        <p class="mt-1 break-all font-mono text-sm text-(--fg)">{{ text || '—' }}</p>
+      </div>
+    </template>
+
+    <div
+      v-else
+      class="rounded-lg border border-amber-500/30 bg-amber-500/10 p-3 text-sm text-amber-600 dark:text-amber-400"
+    >
+      The Clipboard API is not available in this browser.
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useClipboard/index.test.ts b/vue/toolkit/src/composables/browser/useClipboard/index.test.ts
new file mode 100644
index 0000000..77e77c0
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useClipboard/index.test.ts
@@ -0,0 +1,169 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick } from 'vue';
+import type { UseClipboardReturn } from '.';
+import { useClipboard } from '.';
+
+function stubClipboard() {
+  const writeText = vi.fn(async () => {});
+  const readText = vi.fn(async () => 'pasted');
+  const navigator = {
+    clipboard: { writeText, readText },
+  } as unknown as Navigator;
+  return { navigator, writeText, readText };
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe(useClipboard, () => {
+  it('reports support when the clipboard API exists', () => {
+    const { navigator } = stubClipboard();
+    const scope = effectScope();
+    let clip: UseClipboardReturn<false>;
+    scope.run(() => {
+      clip = useClipboard({ navigator });
+    });
+    expect(clip!.isSupported.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('is not supported without the clipboard API', () => {
+    const navigator = {} as unknown as Navigator;
+    const scope = effectScope();
+    let clip: UseClipboardReturn<false>;
+    scope.run(() => {
+      clip = useClipboard({ navigator });
+    });
+    expect(clip!.isSupported.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('copies text and sets copied flag', async () => {
+    const { navigator, writeText } = stubClipboard();
+    const scope = effectScope();
+    let clip: UseClipboardReturn<false>;
+    scope.run(() => {
+      clip = useClipboard({ navigator });
+    });
+
+    await clip!.copy('hello');
+    expect(writeText).toHaveBeenCalledWith('hello');
+    expect(clip!.text.value).toBe('hello');
+    expect(clip!.copied.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('copies the configured source when called without args', async () => {
+    const { navigator, writeText } = stubClipboard();
+    const scope = effectScope();
+    let clip: any;
+    scope.run(() => {
+      clip = useClipboard({ navigator, source: 'from-source' });
+    });
+
+    await clip.copy();
+    expect(writeText).toHaveBeenCalledWith('from-source');
+    scope.stop();
+  });
+
+  it('copies a value resolved from an async getter', async () => {
+    const { navigator, writeText } = stubClipboard();
+    const scope = effectScope();
+    let clip: UseClipboardReturn<false>;
+    scope.run(() => {
+      clip = useClipboard({ navigator });
+    });
+
+    await clip!.copy(async () => 'lazy');
+    expect(writeText).toHaveBeenCalledWith('lazy');
+    expect(clip!.text.value).toBe('lazy');
+    scope.stop();
+  });
+
+  it('skips when an async getter resolves to null', async () => {
+    const { navigator, writeText } = stubClipboard();
+    const scope = effectScope();
+    let clip: UseClipboardReturn<false>;
+    scope.run(() => {
+      clip = useClipboard({ navigator });
+    });
+
+    await clip!.copy(async () => undefined);
+    expect(writeText).not.toHaveBeenCalled();
+    expect(clip!.copied.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('exposes copyPending around an in-flight async copy', async () => {
+    const { navigator } = stubClipboard();
+    const scope = effectScope();
+    let clip: UseClipboardReturn<false>;
+    scope.run(() => {
+      clip = useClipboard({ navigator });
+    });
+
+    let release: (v: string) => void = () => {};
+    const promise = clip!.copy(() => new Promise<string>((resolve) => {
+      release = resolve;
+    }));
+    expect(clip!.copyPending.value).toBeTruthy();
+    release('done');
+    await promise;
+    expect(clip!.copyPending.value).toBeFalsy();
+    expect(clip!.text.value).toBe('done');
+    scope.stop();
+  });
+
+  it('ignores a stale async copy superseded by a newer one', async () => {
+    const { navigator, writeText } = stubClipboard();
+    const scope = effectScope();
+    let clip: UseClipboardReturn<false>;
+    scope.run(() => {
+      clip = useClipboard({ navigator });
+    });
+
+    let releaseSlow: (v: string) => void = () => {};
+    const slow = clip!.copy(() => new Promise<string>((resolve) => {
+      releaseSlow = resolve;
+    }));
+    const fast = clip!.copy(async () => 'fast');
+    await fast;
+    releaseSlow('slow');
+    await slow;
+
+    expect(clip!.text.value).toBe('fast');
+    expect(writeText).toHaveBeenCalledTimes(1);
+    expect(writeText).toHaveBeenCalledWith('fast');
+    scope.stop();
+  });
+
+  it('does nothing when unsupported', async () => {
+    const navigator = {} as unknown as Navigator;
+    const scope = effectScope();
+    let clip: UseClipboardReturn<false>;
+    scope.run(() => {
+      clip = useClipboard({ navigator });
+    });
+
+    await clip!.copy('x');
+    expect(clip!.copied.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('syncs text on copy/cut events when read is enabled', async () => {
+    const { navigator, readText } = stubClipboard();
+    const scope = effectScope();
+    let clip: UseClipboardReturn<false>;
+    scope.run(() => {
+      clip = useClipboard({ navigator, read: true });
+    });
+
+    globalThis.dispatchEvent(new Event('copy'));
+    await nextTick();
+    await Promise.resolve();
+    expect(readText).toHaveBeenCalled();
+    expect(clip!.text.value).toBe('pasted');
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/browser/useClipboard/index.ts b/vue/toolkit/src/composables/browser/useClipboard/index.ts
new file mode 100644
index 0000000..cb05383
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useClipboard/index.ts
@@ -0,0 +1,152 @@
+import { shallowReadonly, shallowRef, toValue } from 'vue';
+import type { MaybeRefOrGetter, Ref } from 'vue';
+import { isString } from '@robonen/stdlib';
+import { defaultNavigator } from '@/types';
+import type { ConfigurableNavigator } from '@/types';
+import { useSupported } from '@/composables/utilities/useSupported';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import { useTimeoutFn } from '@/composables/animation/useTimeoutFn';
+
+/**
+ * A value to copy: either a string or an (optionally async) getter that resolves to one.
+ */
+export type ClipboardValue = string | (() => Promise<string | undefined> | string | undefined);
+
+export interface UseClipboardOptions<Source> extends ConfigurableNavigator {
+  /**
+   * Sync `text` with the system clipboard by listening to copy/cut events
+   *
+   * @default false
+   */
+  read?: boolean;
+
+  /**
+   * Default source value to copy when `copy()` is called without an argument
+   */
+  source?: Source;
+
+  /**
+   * Milliseconds the `copied` flag stays `true` after a copy
+   *
+   * @default 1500
+   */
+  copiedDuring?: number;
+}
+
+export interface UseClipboardReturn<Optional extends boolean> {
+  /**
+   * Whether the async Clipboard API is available
+   */
+  isSupported: Readonly<Ref<boolean>>;
+
+  /**
+   * The current clipboard text (kept in sync when `read` is enabled)
+   */
+  text: Readonly<Ref<string>>;
+
+  /**
+   * `true` for `copiedDuring` ms after a successful copy
+   */
+  copied: Readonly<Ref<boolean>>;
+
+  /**
+   * `true` while an async `copy()` is in flight
+   */
+  copyPending: Readonly<Ref<boolean>>;
+
+  /**
+   * Copy a value to the clipboard
+   */
+  copy: Optional extends true ? (text?: ClipboardValue) => Promise<void> : (text: ClipboardValue) => Promise<void>;
+}
+
+/**
+ * @name useClipboard
+ * @category Browser
+ * @description Reactive async Clipboard API.
+ *
+ * @param {UseClipboardOptions} [options={}] Options
+ * @returns {UseClipboardReturn} `isSupported`, `text`, `copied`, `copyPending`, and `copy`
+ *
+ * @example
+ * const { text, copy, copied, isSupported } = useClipboard();
+ * copy('hello');
+ *
+ * @example
+ * // Copy a lazily/asynchronously resolved value
+ * copy(async () => (await fetch('/token').then(r => r.text())));
+ *
+ * @since 0.0.15
+ */
+export function useClipboard(options?: UseClipboardOptions<undefined>): UseClipboardReturn<false>;
+export function useClipboard(options: UseClipboardOptions<MaybeRefOrGetter<string>>): UseClipboardReturn<true>;
+export function useClipboard(
+  options: UseClipboardOptions<MaybeRefOrGetter<string> | undefined> = {},
+): UseClipboardReturn<boolean> {
+  const {
+    navigator = defaultNavigator,
+    read = false,
+    source,
+    copiedDuring = 1500,
+  } = options;
+
+  const isSupported = useSupported(() => navigator && 'clipboard' in navigator);
+
+  const text = shallowRef('');
+  const copied = shallowRef(false);
+  const copyPending = shallowRef(false);
+
+  // Guards against a slow async copy clobbering the result of a newer one
+  let lastResolveId = 0;
+
+  const timeout = useTimeoutFn(() => {
+    copied.value = false;
+  }, copiedDuring, { immediate: false });
+
+  async function updateText(): Promise<void> {
+    text.value = await navigator!.clipboard.readText();
+  }
+
+  if (isSupported.value && read)
+    useEventListener(['copy', 'cut'], updateText, { passive: true });
+
+  async function copy(value: ClipboardValue | undefined = toValue(source)): Promise<void> {
+    if (!isSupported.value || value === null || value === undefined)
+      return;
+
+    copyPending.value = true;
+
+    try {
+      let resolved: string | undefined;
+
+      if (isString(value)) {
+        resolved = value;
+      }
+      else {
+        const currentId = ++lastResolveId;
+        resolved = await value();
+
+        // Drop a stale async resolution superseded by a newer copy
+        if (resolved === null || resolved === undefined || currentId !== lastResolveId)
+          return;
+      }
+
+      await navigator!.clipboard.writeText(resolved);
+
+      text.value = resolved;
+      copied.value = true;
+      timeout.start();
+    }
+    finally {
+      copyPending.value = false;
+    }
+  }
+
+  return {
+    isSupported,
+    text: shallowReadonly(text),
+    copied: shallowReadonly(copied),
+    copyPending: shallowReadonly(copyPending),
+    copy,
+  };
+}
diff --git a/vue/toolkit/src/composables/browser/useClipboardItems/demo.vue b/vue/toolkit/src/composables/browser/useClipboardItems/demo.vue
new file mode 100644
index 0000000..485ab6f
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useClipboardItems/demo.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useClipboardItems } from './index';
+
+const errorMessage = ref('');
+
+const { content, copied, copyPending, isSupported, copy, read } = useClipboardItems({
+  onError: (error) => {
+    errorMessage.value = error instanceof Error ? error.message : String(error);
+  },
+});
+
+const plain = 'Ada Lovelace — first computer programmer';
+const html = '<strong>Ada Lovelace</strong> — <em>first computer programmer</em>';
+
+function copyRich(): void {
+  errorMessage.value = '';
+  copy([
+    new ClipboardItem({
+      'text/plain': new Blob([plain], { type: 'text/plain' }),
+      'text/html': new Blob([html], { type: 'text/html' }),
+    }),
+  ]);
+}
+
+async function readClipboard(): Promise<void> {
+  errorMessage.value = '';
+  await read();
+}
+
+function typesOf(item: ClipboardItem): string {
+  return item.types.join(', ');
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">ClipboardItem API</span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+        :class="isSupported
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-red-500/30 bg-red-500/10 text-red-600 dark:text-red-400'"
+      >
+        {{ isSupported ? 'Supported' : 'Not supported' }}
+      </span>
+    </div>
+
+    <template v-if="isSupported">
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Rich payload</span>
+        <p class="mt-1 text-sm text-(--fg)" v-html="html" />
+        <p class="mt-1 font-mono text-xs text-(--fg-subtle)">text/plain &middot; text/html</p>
+      </div>
+
+      <div class="flex gap-2">
+        <button
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          :disabled="copyPending"
+          @click="copyRich"
+        >
+          {{ copyPending ? 'Copying…' : copied ? 'Copied!' : 'Copy rich content' }}
+        </button>
+        <button
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="readClipboard"
+        >
+          Read clipboard
+        </button>
+      </div>
+
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          content ({{ content.length }} {{ content.length === 1 ? 'item' : 'items' }})
+        </span>
+        <ul v-if="content.length" class="mt-2 flex flex-col gap-1">
+          <li
+            v-for="(item, i) in content"
+            :key="i"
+            class="font-mono text-xs text-(--fg)"
+          >
+            #{{ i + 1 }}: {{ typesOf(item) }}
+          </li>
+        </ul>
+        <p v-else class="mt-2 font-mono text-xs text-(--fg-subtle)">No items read yet</p>
+      </div>
+
+      <div
+        v-if="errorMessage"
+        class="rounded-lg border border-red-500/30 bg-red-500/10 p-3 text-xs text-red-600 dark:text-red-400"
+      >
+        {{ errorMessage }}
+      </div>
+    </template>
+
+    <div
+      v-else
+      class="rounded-lg border border-amber-500/30 bg-amber-500/10 p-3 text-sm text-amber-600 dark:text-amber-400"
+    >
+      The async ClipboardItem API is not available in this browser.
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useClipboardItems/index.test.ts b/vue/toolkit/src/composables/browser/useClipboardItems/index.test.ts
new file mode 100644
index 0000000..697171a
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useClipboardItems/index.test.ts
@@ -0,0 +1,228 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick } from 'vue';
+import type { UseClipboardItemsReturn } from '.';
+import { useClipboardItems } from '.';
+
+function makeItems(label: string): ClipboardItems {
+  // jsdom may lack ClipboardItem; a tagged plain object is enough for assertions.
+  return [{ types: [label] } as unknown as ClipboardItem];
+}
+
+function stubClipboard(readItems: ClipboardItems = makeItems('read')) {
+  const write = vi.fn(async () => {});
+  const read = vi.fn(async () => readItems);
+  const navigator = {
+    clipboard: { write, read },
+  } as unknown as Navigator;
+  return { navigator, write, read };
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe(useClipboardItems, () => {
+  it('reports support when the clipboard API exists', () => {
+    const { navigator } = stubClipboard();
+    const scope = effectScope();
+    let clip: UseClipboardItemsReturn<false>;
+    scope.run(() => {
+      clip = useClipboardItems({ navigator });
+    });
+    expect(clip!.isSupported.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('is not supported without the clipboard API', () => {
+    const navigator = {} as unknown as Navigator;
+    const scope = effectScope();
+    let clip: UseClipboardItemsReturn<false>;
+    scope.run(() => {
+      clip = useClipboardItems({ navigator });
+    });
+    expect(clip!.isSupported.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('is not supported when navigator is undefined (SSR)', () => {
+    const scope = effectScope();
+    let clip: UseClipboardItemsReturn<false>;
+    scope.run(() => {
+      clip = useClipboardItems({ navigator: undefined });
+    });
+    expect(clip!.isSupported.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('copies items and sets copied flag', async () => {
+    const { navigator, write } = stubClipboard();
+    const items = makeItems('copy');
+    const scope = effectScope();
+    let clip: UseClipboardItemsReturn<false>;
+    scope.run(() => {
+      clip = useClipboardItems({ navigator });
+    });
+
+    await clip!.copy(items);
+    expect(write).toHaveBeenCalledWith(items);
+    expect(clip!.content.value).toBe(items);
+    expect(clip!.copied.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('copies the configured source when called without args', async () => {
+    const { navigator, write } = stubClipboard();
+    const items = makeItems('source');
+    const scope = effectScope();
+    let clip: any;
+    scope.run(() => {
+      clip = useClipboardItems({ navigator, source: items });
+    });
+
+    await clip.copy();
+    expect(write).toHaveBeenCalledWith(items);
+    scope.stop();
+  });
+
+  it('copies a value resolved from an async getter', async () => {
+    const { navigator, write } = stubClipboard();
+    const items = makeItems('lazy');
+    const scope = effectScope();
+    let clip: UseClipboardItemsReturn<false>;
+    scope.run(() => {
+      clip = useClipboardItems({ navigator });
+    });
+
+    await clip!.copy(async () => items);
+    expect(write).toHaveBeenCalledWith(items);
+    expect(clip!.content.value).toBe(items);
+    scope.stop();
+  });
+
+  it('skips when an async getter resolves to undefined', async () => {
+    const { navigator, write } = stubClipboard();
+    const scope = effectScope();
+    let clip: UseClipboardItemsReturn<false>;
+    scope.run(() => {
+      clip = useClipboardItems({ navigator });
+    });
+
+    await clip!.copy(async () => undefined);
+    expect(write).not.toHaveBeenCalled();
+    expect(clip!.copied.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('exposes copyPending around an in-flight async copy', async () => {
+    const { navigator } = stubClipboard();
+    const items = makeItems('done');
+    const scope = effectScope();
+    let clip: UseClipboardItemsReturn<false>;
+    scope.run(() => {
+      clip = useClipboardItems({ navigator });
+    });
+
+    let release: (v: ClipboardItems) => void = () => {};
+    const promise = clip!.copy(() => new Promise<ClipboardItems>((resolve) => {
+      release = resolve;
+    }));
+    expect(clip!.copyPending.value).toBeTruthy();
+    release(items);
+    await promise;
+    expect(clip!.copyPending.value).toBeFalsy();
+    expect(clip!.content.value).toBe(items);
+    scope.stop();
+  });
+
+  it('ignores a stale async copy superseded by a newer one', async () => {
+    const { navigator, write } = stubClipboard();
+    const fastItems = makeItems('fast');
+    const slowItems = makeItems('slow');
+    const scope = effectScope();
+    let clip: UseClipboardItemsReturn<false>;
+    scope.run(() => {
+      clip = useClipboardItems({ navigator });
+    });
+
+    let releaseSlow: (v: ClipboardItems) => void = () => {};
+    const slow = clip!.copy(() => new Promise<ClipboardItems>((resolve) => {
+      releaseSlow = resolve;
+    }));
+    const fast = clip!.copy(async () => fastItems);
+    await fast;
+    releaseSlow(slowItems);
+    await slow;
+
+    expect(clip!.content.value).toBe(fastItems);
+    expect(write).toHaveBeenCalledTimes(1);
+    expect(write).toHaveBeenCalledWith(fastItems);
+    scope.stop();
+  });
+
+  it('does nothing when unsupported', async () => {
+    const navigator = {} as unknown as Navigator;
+    const scope = effectScope();
+    let clip: UseClipboardItemsReturn<false>;
+    scope.run(() => {
+      clip = useClipboardItems({ navigator });
+    });
+
+    await clip!.copy(makeItems('x'));
+    expect(clip!.copied.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('reads the clipboard via read()', async () => {
+    const readItems = makeItems('from-clipboard');
+    const { navigator, read } = stubClipboard(readItems);
+    const scope = effectScope();
+    let clip: UseClipboardItemsReturn<false>;
+    scope.run(() => {
+      clip = useClipboardItems({ navigator });
+    });
+
+    await clip!.read();
+    expect(read).toHaveBeenCalled();
+    expect(clip!.content.value).toBe(readItems);
+    scope.stop();
+  });
+
+  it('syncs content on copy/cut events when read is enabled', async () => {
+    const readItems = makeItems('synced');
+    const { navigator, read } = stubClipboard(readItems);
+    const scope = effectScope();
+    let clip: UseClipboardItemsReturn<false>;
+    scope.run(() => {
+      clip = useClipboardItems({ navigator, read: true });
+    });
+
+    globalThis.dispatchEvent(new Event('copy'));
+    await nextTick();
+    await Promise.resolve();
+    expect(read).toHaveBeenCalled();
+    expect(clip!.content.value).toBe(readItems);
+    scope.stop();
+  });
+
+  it('routes a rejected write to onError instead of throwing', async () => {
+    const error = new Error('denied');
+    const write = vi.fn(async () => {
+      throw error;
+    });
+    const navigator = {
+      clipboard: { write, read: vi.fn() },
+    } as unknown as Navigator;
+    const onError = vi.fn();
+    const scope = effectScope();
+    let clip: UseClipboardItemsReturn<false>;
+    scope.run(() => {
+      clip = useClipboardItems({ navigator, onError });
+    });
+
+    await clip!.copy(makeItems('boom'));
+    expect(onError).toHaveBeenCalledWith(error);
+    expect(clip!.copied.value).toBeFalsy();
+    expect(clip!.copyPending.value).toBeFalsy();
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/browser/useClipboardItems/index.ts b/vue/toolkit/src/composables/browser/useClipboardItems/index.ts
new file mode 100644
index 0000000..d9a96e8
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useClipboardItems/index.ts
@@ -0,0 +1,185 @@
+import { shallowReadonly, shallowRef, toValue } from 'vue';
+import type { MaybeRefOrGetter, Ref } from 'vue';
+import { isFunction, noop } from '@robonen/stdlib';
+import { defaultNavigator } from '@/types';
+import type { ConfigurableNavigator } from '@/types';
+import { useSupported } from '@/composables/utilities/useSupported';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import { useTimeoutFn } from '@/composables/animation/useTimeoutFn';
+
+/**
+ * A value to copy: either concrete `ClipboardItems` or an (optionally async)
+ * getter that resolves to them.
+ */
+export type ClipboardItemsValue
+  = | ClipboardItems
+    | (() => Promise<ClipboardItems | undefined> | ClipboardItems | undefined);
+
+export interface UseClipboardItemsOptions<Source> extends ConfigurableNavigator {
+  /**
+   * Sync `content` with the system clipboard by listening to copy/cut events
+   *
+   * @default false
+   */
+  read?: boolean;
+
+  /**
+   * Default source value to copy when `copy()` is called without an argument
+   */
+  source?: Source;
+
+  /**
+   * Milliseconds the `copied` flag stays `true` after a copy
+   *
+   * @default 1500
+   */
+  copiedDuring?: number;
+
+  /**
+   * Called when a read/write rejects, instead of throwing
+   *
+   * @default noop
+   */
+  onError?: (error: unknown) => void;
+}
+
+export interface UseClipboardItemsReturn<Optional extends boolean> {
+  /**
+   * Whether the async Clipboard API (with `ClipboardItem`) is available
+   */
+  isSupported: Readonly<Ref<boolean>>;
+
+  /**
+   * The current clipboard items (kept in sync when `read` is enabled)
+   */
+  content: Readonly<Ref<ClipboardItems>>;
+
+  /**
+   * `true` for `copiedDuring` ms after a successful copy
+   */
+  copied: Readonly<Ref<boolean>>;
+
+  /**
+   * `true` while an async `copy()` is in flight
+   */
+  copyPending: Readonly<Ref<boolean>>;
+
+  /**
+   * Copy clipboard items to the system clipboard
+   */
+  copy: Optional extends true
+    ? (content?: ClipboardItemsValue) => Promise<void>
+    : (content: ClipboardItemsValue) => Promise<void>;
+
+  /**
+   * Manually read the system clipboard into `content`
+   */
+  read: () => Promise<void>;
+}
+
+/**
+ * @name useClipboardItems
+ * @category Browser
+ * @description Reactive async Clipboard API with rich `ClipboardItem` support
+ * (read/write images, HTML, and arbitrary MIME types — not just text).
+ * SSR-safe; uses passive `copy`/`cut` listeners and guards stale async writes.
+ *
+ * @param {UseClipboardItemsOptions} [options={}] Options
+ * @returns {UseClipboardItemsReturn} `isSupported`, `content`, `copied`, `copyPending`, `copy`, and `read`
+ *
+ * @example
+ * const { content, copy, copied, isSupported } = useClipboardItems();
+ * copy([new ClipboardItem({ 'text/plain': new Blob(['hello'], { type: 'text/plain' }) })]);
+ *
+ * @example
+ * // Copy a lazily/asynchronously resolved value, kept in sync with the system clipboard
+ * const { content } = useClipboardItems({ read: true });
+ * copy(async () => buildClipboardItems());
+ *
+ * @since 0.0.15
+ */
+export function useClipboardItems(options?: UseClipboardItemsOptions<undefined>): UseClipboardItemsReturn<false>;
+export function useClipboardItems(options: UseClipboardItemsOptions<MaybeRefOrGetter<ClipboardItems>>): UseClipboardItemsReturn<true>;
+export function useClipboardItems(
+  options: UseClipboardItemsOptions<MaybeRefOrGetter<ClipboardItems> | undefined> = {},
+): UseClipboardItemsReturn<boolean> {
+  const {
+    navigator = defaultNavigator,
+    read = false,
+    source,
+    copiedDuring = 1500,
+    onError = noop,
+  } = options;
+
+  const isSupported = useSupported(() => navigator && 'clipboard' in navigator);
+
+  const content = shallowRef<ClipboardItems>([]);
+  const copied = shallowRef(false);
+  const copyPending = shallowRef(false);
+
+  // Guards against a slow async copy clobbering the result of a newer one
+  let lastResolveId = 0;
+
+  const timeout = useTimeoutFn(() => {
+    copied.value = false;
+  }, copiedDuring, { immediate: false });
+
+  async function updateContent(): Promise<void> {
+    if (!isSupported.value)
+      return;
+
+    try {
+      content.value = await navigator!.clipboard.read();
+    }
+    catch (error) {
+      onError(error);
+    }
+  }
+
+  if (isSupported.value && read)
+    useEventListener(['copy', 'cut'], updateContent, { passive: true });
+
+  async function copy(value: ClipboardItemsValue | undefined = toValue(source)): Promise<void> {
+    if (!isSupported.value || value === null || value === undefined)
+      return;
+
+    copyPending.value = true;
+
+    try {
+      let resolved: ClipboardItems | undefined;
+
+      if (isFunction(value)) {
+        const currentId = ++lastResolveId;
+        resolved = await value();
+
+        // Drop a stale async resolution superseded by a newer copy
+        if (resolved === null || resolved === undefined || currentId !== lastResolveId)
+          return;
+      }
+      else {
+        resolved = value;
+      }
+
+      await navigator!.clipboard.write(resolved);
+
+      content.value = resolved;
+      copied.value = true;
+      timeout.start();
+    }
+    catch (error) {
+      onError(error);
+    }
+    finally {
+      copyPending.value = false;
+    }
+  }
+
+  return {
+    isSupported,
+    content: shallowReadonly(content),
+    copied: shallowReadonly(copied),
+    copyPending: shallowReadonly(copyPending),
+    copy,
+    read: updateContent,
+  };
+}
diff --git a/vue/toolkit/src/composables/browser/useCloseWatcher/demo.vue b/vue/toolkit/src/composables/browser/useCloseWatcher/demo.vue
new file mode 100644
index 0000000..475391e
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useCloseWatcher/demo.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { useCloseWatcher } from './index';
+
+const { isSupported, onClose, close } = useCloseWatcher();
+
+const open = ref(false);
+const lastClosedAt = ref<string | null>(null);
+const closeCount = ref(0);
+
+onMounted(() => {
+  onClose(() => {
+    if (!open.value)
+      return;
+    open.value = false;
+    closeCount.value++;
+    lastClosedAt.value = new Date().toLocaleTimeString();
+  });
+});
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">CloseWatcher API</span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+        :class="isSupported
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'"
+      >
+        {{ isSupported ? 'Native' : 'Esc fallback' }}
+      </span>
+    </div>
+
+    <button
+      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40"
+      :disabled="open"
+      @click="open = true"
+    >
+      Open dialog
+    </button>
+
+    <Transition
+      enter-active-class="transition duration-150 ease-out"
+      enter-from-class="opacity-0 translate-y-1"
+      leave-active-class="transition duration-100 ease-in"
+      leave-to-class="opacity-0 translate-y-1"
+    >
+      <div v-if="open" class="rounded-xl border border-(--border-strong) bg-(--bg-elevated) p-4 shadow-lg">
+        <div class="flex items-start justify-between gap-3">
+          <div>
+            <p class="text-sm font-semibold text-(--fg)">Unsaved changes</p>
+            <p class="mt-1 text-sm text-(--fg-muted)">
+              Press <kbd class="rounded border border-(--border) bg-(--bg-inset) px-1.5 py-0.5 font-mono text-xs text-(--fg)">Esc</kbd>
+              (or the Android back gesture) to dismiss.
+            </p>
+          </div>
+        </div>
+        <div class="mt-4 flex justify-end gap-2">
+          <button
+            class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+            @click="close()"
+          >
+            Dismiss via close()
+          </button>
+        </div>
+      </div>
+    </Transition>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+      <div class="flex justify-between">
+        <span class="text-(--fg-muted)">closes</span>
+        <span class="font-bold">{{ closeCount }}</span>
+      </div>
+      <div class="mt-1 flex justify-between">
+        <span class="text-(--fg-muted)">last</span>
+        <span>{{ lastClosedAt ?? '—' }}</span>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Open the dialog, then dismiss it with Esc, the system back gesture, or the programmatic <code class="font-mono">close()</code> call.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useCloseWatcher/index.test.ts b/vue/toolkit/src/composables/browser/useCloseWatcher/index.test.ts
new file mode 100644
index 0000000..1c7583a
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useCloseWatcher/index.test.ts
@@ -0,0 +1,348 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { effectScope } from 'vue';
+import { useCloseWatcher } from '.';
+
+/**
+ * Minimal fake of the native `CloseWatcher`: tracks instances so tests can drive
+ * close/destroy and assert recreation behaviour.
+ */
+function createCloseWatcherStub() {
+  const instances: FakeCloseWatcher[] = [];
+
+  class FakeCloseWatcher {
+    listeners = new Map<string, Set<(event: Event) => void>>();
+    destroyed = false;
+    requestCloseCalls = 0;
+    closeCalls = 0;
+
+    constructor() {
+      instances.push(this);
+    }
+
+    addEventListener(type: string, listener: (event: Event) => void) {
+      if (!this.listeners.has(type))
+        this.listeners.set(type, new Set());
+      this.listeners.get(type)!.add(listener);
+    }
+
+    removeEventListener(type: string, listener: (event: Event) => void) {
+      this.listeners.get(type)?.delete(listener);
+    }
+
+    requestClose() {
+      this.requestCloseCalls++;
+      this.fireClose();
+    }
+
+    close() {
+      this.closeCalls++;
+      this.fireClose();
+    }
+
+    destroy() {
+      this.destroyed = true;
+    }
+
+    private fireClose() {
+      const event = new Event('close');
+      this.listeners.get('close')?.forEach(fn => fn(event));
+    }
+
+    oncancel: ((event: Event) => void) | null = null;
+    onclose: ((event: Event) => void) | null = null;
+  }
+
+  // A window-like object that exposes CloseWatcher and basic event listening
+  const eventTarget = new EventTarget();
+  const win = {
+    CloseWatcher: FakeCloseWatcher,
+    addEventListener: eventTarget.addEventListener.bind(eventTarget),
+    removeEventListener: eventTarget.removeEventListener.bind(eventTarget),
+    dispatchEvent: eventTarget.dispatchEvent.bind(eventTarget),
+  } as unknown as Window;
+
+  return { win, instances };
+}
+
+/** A window-like object WITHOUT CloseWatcher (fallback path). */
+function createFallbackWindow() {
+  const eventTarget = new EventTarget();
+  const win = {
+    addEventListener: eventTarget.addEventListener.bind(eventTarget),
+    removeEventListener: eventTarget.removeEventListener.bind(eventTarget),
+    dispatchEvent: eventTarget.dispatchEvent.bind(eventTarget),
+  } as unknown as Window;
+
+  const dispatchKey = (key: string) =>
+    win.dispatchEvent(new KeyboardEvent('keydown', { key }));
+
+  return { win, dispatchKey };
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe(useCloseWatcher, () => {
+  it('reports support when CloseWatcher exists on window', () => {
+    const { win } = createCloseWatcherStub();
+    const scope = effectScope();
+    let cw: ReturnType<typeof useCloseWatcher>;
+    scope.run(() => {
+      cw = useCloseWatcher({ window: win });
+    });
+    expect(cw!.isSupported.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('reports unsupported when CloseWatcher is absent', () => {
+    const { win } = createFallbackWindow();
+    const scope = effectScope();
+    let cw: ReturnType<typeof useCloseWatcher>;
+    scope.run(() => {
+      cw = useCloseWatcher({ window: win });
+    });
+    expect(cw!.isSupported.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('is a safe no-op when there is no window (SSR)', () => {
+    // Force the SSR branch with an explicit falsy (non-undefined) window so the
+    // default-parameter fallback to `defaultWindow` does not kick in: only
+    // `undefined` triggers a parameter default, `null` survives the destructure.
+    const scope = effectScope();
+    let cw: ReturnType<typeof useCloseWatcher>;
+    scope.run(() => {
+      cw = useCloseWatcher({ window: null as unknown as Window });
+    });
+
+    expect(cw!.isSupported.value).toBeFalsy();
+
+    const handler = vi.fn();
+    const stop = cw!.onClose(handler);
+    expect(() => cw!.close()).not.toThrow();
+    expect(handler).not.toHaveBeenCalled();
+    expect(() => stop()).not.toThrow();
+    expect(() => cw!.destroy()).not.toThrow();
+    scope.stop();
+  });
+
+  describe('native CloseWatcher path', () => {
+    it('fires registered handler when close() is requested', () => {
+      const { win, instances } = createCloseWatcherStub();
+      const scope = effectScope();
+      let cw: ReturnType<typeof useCloseWatcher>;
+      scope.run(() => {
+        cw = useCloseWatcher({ window: win });
+      });
+
+      const handler = vi.fn();
+      cw!.onClose(handler);
+      expect(instances).toHaveLength(1);
+
+      cw!.close();
+      expect(instances[0]!.requestCloseCalls).toBe(1);
+      expect(handler).toHaveBeenCalledTimes(1);
+      expect(handler.mock.calls[0]![0]).toBeInstanceOf(Event);
+      scope.stop();
+    });
+
+    it('fires handler when the native close event occurs (Esc / back)', () => {
+      const { win, instances } = createCloseWatcherStub();
+      const scope = effectScope();
+      let cw: ReturnType<typeof useCloseWatcher>;
+      scope.run(() => {
+        cw = useCloseWatcher({ window: win });
+      });
+
+      const handler = vi.fn();
+      cw!.onClose(handler);
+
+      // Simulate the platform firing the close event (e.g. Esc / Android back)
+      instances[0]!.close();
+      expect(handler).toHaveBeenCalledTimes(1);
+      scope.stop();
+    });
+
+    it('recreates the watcher after a close so it keeps working', () => {
+      const { win, instances } = createCloseWatcherStub();
+      const scope = effectScope();
+      let cw: ReturnType<typeof useCloseWatcher>;
+      scope.run(() => {
+        cw = useCloseWatcher({ window: win });
+      });
+
+      const handler = vi.fn();
+      cw!.onClose(handler);
+      expect(instances).toHaveLength(1);
+
+      cw!.close();
+      // a fresh watcher is created after the close fired
+      expect(instances).toHaveLength(2);
+
+      cw!.close();
+      expect(handler).toHaveBeenCalledTimes(2);
+      scope.stop();
+    });
+
+    it('fires all registered handlers with a single watcher', () => {
+      const { win, instances } = createCloseWatcherStub();
+      const scope = effectScope();
+      let cw: ReturnType<typeof useCloseWatcher>;
+      scope.run(() => {
+        cw = useCloseWatcher({ window: win });
+      });
+
+      const a = vi.fn();
+      const b = vi.fn();
+      cw!.onClose(a);
+      cw!.onClose(b);
+      // both handlers share one native watcher
+      expect(instances).toHaveLength(1);
+
+      cw!.close();
+      expect(a).toHaveBeenCalledTimes(1);
+      expect(b).toHaveBeenCalledTimes(1);
+      scope.stop();
+    });
+
+    it('stop handle removes only its own handler', () => {
+      const { win } = createCloseWatcherStub();
+      const scope = effectScope();
+      let cw: ReturnType<typeof useCloseWatcher>;
+      scope.run(() => {
+        cw = useCloseWatcher({ window: win });
+      });
+
+      const a = vi.fn();
+      const b = vi.fn();
+      const stopA = cw!.onClose(a);
+      cw!.onClose(b);
+
+      stopA();
+      cw!.close();
+      expect(a).not.toHaveBeenCalled();
+      expect(b).toHaveBeenCalledTimes(1);
+      scope.stop();
+    });
+
+    it('destroy() tears down the watcher and clears handlers', () => {
+      const { win, instances } = createCloseWatcherStub();
+      const scope = effectScope();
+      let cw: ReturnType<typeof useCloseWatcher>;
+      scope.run(() => {
+        cw = useCloseWatcher({ window: win });
+      });
+
+      const handler = vi.fn();
+      cw!.onClose(handler);
+      cw!.destroy();
+
+      expect(instances[0]!.destroyed).toBeTruthy();
+      cw!.close();
+      expect(handler).not.toHaveBeenCalled();
+      scope.stop();
+    });
+
+    it('survives a handler calling destroy() during dispatch', () => {
+      const { win } = createCloseWatcherStub();
+      const scope = effectScope();
+      let cw: ReturnType<typeof useCloseWatcher>;
+      scope.run(() => {
+        cw = useCloseWatcher({ window: win });
+      });
+
+      const other = vi.fn();
+      cw!.onClose(() => cw!.destroy());
+      cw!.onClose(other);
+
+      // dispatch must not throw even though destroy() clears the set mid-loop
+      expect(() => cw!.close()).not.toThrow();
+      // the snapshot means the second handler still runs for this dispatch
+      expect(other).toHaveBeenCalledTimes(1);
+      scope.stop();
+    });
+  });
+
+  describe('fallback (keydown) path', () => {
+    it('fires handler on Escape keydown', () => {
+      const { win, dispatchKey } = createFallbackWindow();
+      const scope = effectScope();
+      let cw: ReturnType<typeof useCloseWatcher>;
+      scope.run(() => {
+        cw = useCloseWatcher({ window: win });
+      });
+
+      const handler = vi.fn();
+      cw!.onClose(handler);
+
+      dispatchKey('Escape');
+      expect(handler).toHaveBeenCalledTimes(1);
+      scope.stop();
+    });
+
+    it('ignores non-Escape keys', () => {
+      const { win, dispatchKey } = createFallbackWindow();
+      const scope = effectScope();
+      let cw: ReturnType<typeof useCloseWatcher>;
+      scope.run(() => {
+        cw = useCloseWatcher({ window: win });
+      });
+
+      const handler = vi.fn();
+      cw!.onClose(handler);
+
+      dispatchKey('Enter');
+      expect(handler).not.toHaveBeenCalled();
+      scope.stop();
+    });
+
+    it('close() synthesizes a close event in the fallback path', () => {
+      const { win } = createFallbackWindow();
+      const scope = effectScope();
+      let cw: ReturnType<typeof useCloseWatcher>;
+      scope.run(() => {
+        cw = useCloseWatcher({ window: win });
+      });
+
+      const handler = vi.fn();
+      cw!.onClose(handler);
+
+      cw!.close();
+      expect(handler).toHaveBeenCalledTimes(1);
+      scope.stop();
+    });
+
+    it('destroy() removes the keydown listener', () => {
+      const { win, dispatchKey } = createFallbackWindow();
+      const scope = effectScope();
+      let cw: ReturnType<typeof useCloseWatcher>;
+      scope.run(() => {
+        cw = useCloseWatcher({ window: win });
+      });
+
+      const handler = vi.fn();
+      cw!.onClose(handler);
+      cw!.destroy();
+
+      dispatchKey('Escape');
+      expect(handler).not.toHaveBeenCalled();
+      scope.stop();
+    });
+  });
+
+  it('disposes when the effect scope stops', () => {
+    const { win, instances } = createCloseWatcherStub();
+    const scope = effectScope();
+    let cw: ReturnType<typeof useCloseWatcher>;
+    scope.run(() => {
+      cw = useCloseWatcher({ window: win });
+    });
+
+    cw!.onClose(vi.fn());
+    expect(instances[0]!.destroyed).toBeFalsy();
+
+    scope.stop();
+    expect(instances[0]!.destroyed).toBeTruthy();
+  });
+});
diff --git a/vue/toolkit/src/composables/browser/useCloseWatcher/index.ts b/vue/toolkit/src/composables/browser/useCloseWatcher/index.ts
new file mode 100644
index 0000000..d80c731
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useCloseWatcher/index.ts
@@ -0,0 +1,175 @@
+import type { VoidFunction } from '@robonen/stdlib';
+import { noop } from '@robonen/stdlib';
+import type { Ref } from 'vue';
+import { defaultWindow } from '@/types';
+import type { ConfigurableWindow } from '@/types';
+import { useSupported } from '@/composables/utilities/useSupported';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+
+/**
+ * Subset of the native `CloseWatcher` instance surface we rely on.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/CloseWatcher
+ */
+interface CloseWatcherInstance {
+  requestClose: () => void;
+  close: () => void;
+  destroy: () => void;
+  addEventListener: (type: string, listener: (event: Event) => void) => void;
+  removeEventListener: (type: string, listener: (event: Event) => void) => void;
+  oncancel: ((event: Event) => void) | null;
+  onclose: ((event: Event) => void) | null;
+}
+
+type CloseWatcherConstructor = new (options?: { signal?: AbortSignal }) => CloseWatcherInstance;
+
+/**
+ * Handler invoked when a close request is received.
+ *
+ * The argument is the native `close` event when the platform `CloseWatcher`
+ * is used, or the `Escape` `KeyboardEvent` when falling back to keydown.
+ */
+export type CloseWatcherHandler = (event: Event) => void;
+
+export interface UseCloseWatcherOptions extends ConfigurableWindow {}
+
+export interface UseCloseWatcherReturn {
+  /**
+   * Whether the native `CloseWatcher` API is available.
+   */
+  isSupported: Readonly<Ref<boolean>>;
+
+  /**
+   * Register a handler for close requests (Esc key / Android back / `close()`).
+   *
+   * @returns A stop handle that removes this handler.
+   */
+  onClose: (handler: CloseWatcherHandler) => VoidFunction;
+
+  /**
+   * Request a close, firing every registered handler.
+   */
+  close: VoidFunction;
+
+  /**
+   * Tear down the watcher and remove all registered handlers.
+   */
+  destroy: VoidFunction;
+}
+
+/**
+ * @name useCloseWatcher
+ * @category Browser
+ * @description Wrap the native `CloseWatcher` API to handle close requests
+ * (the `Esc` key or the Android back gesture). Falls back to listening for
+ * `Escape` keydown when `CloseWatcher` is unavailable. SSR-safe.
+ *
+ * @param {UseCloseWatcherOptions} [options={}] Configuration options
+ * @returns {UseCloseWatcherReturn} `isSupported`, `onClose`, `close`, and `destroy`
+ *
+ * @example
+ * const { onClose, close, isSupported } = useCloseWatcher();
+ * onClose(() => { dialogOpen.value = false; });
+ *
+ * @example
+ * // Programmatically request a close
+ * close();
+ *
+ * @since 0.0.15
+ */
+export function useCloseWatcher(options: UseCloseWatcherOptions = {}): UseCloseWatcherReturn {
+  const { window = defaultWindow } = options;
+
+  const isSupported = useSupported(() => !!window && 'CloseWatcher' in window);
+
+  const handlers = new Set<CloseWatcherHandler>();
+  let watcher: CloseWatcherInstance | undefined;
+  let stopFallback: VoidFunction = noop;
+
+  const dispatch = (event: Event): void => {
+    // Snapshot so a handler that calls destroy()/onClose() can't mutate mid-loop
+    // eslint-disable-next-line unicorn/no-useless-spread
+    for (const handler of [...handlers])
+      handler(event);
+  };
+
+  const teardownWatcher = (): void => {
+    watcher?.destroy();
+    watcher = undefined;
+    stopFallback();
+    stopFallback = noop;
+  };
+
+  const ensureWatcher = (): void => {
+    if (!window)
+      return;
+
+    if (isSupported.value) {
+      if (watcher)
+        return;
+
+      const CloseWatcherCtor = (window as unknown as { CloseWatcher: CloseWatcherConstructor }).CloseWatcher;
+      watcher = new CloseWatcherCtor();
+      // The native watcher deactivates after a single close; recreate it so the
+      // returned `close()`/Esc keep working across multiple close requests.
+      watcher.addEventListener('close', (event: Event) => {
+        watcher = undefined;
+        dispatch(event);
+        ensureWatcher();
+      });
+      return;
+    }
+
+    // Fallback: only one keydown listener regardless of handler count
+    if (stopFallback !== noop)
+      return;
+
+    stopFallback = useEventListener(
+      window,
+      'keydown',
+      (event: KeyboardEvent) => {
+        if (event.key === 'Escape')
+          dispatch(event);
+      },
+      { passive: true },
+    );
+  };
+
+  const onClose = (handler: CloseWatcherHandler): VoidFunction => {
+    handlers.add(handler);
+    ensureWatcher();
+
+    return () => {
+      handlers.delete(handler);
+    };
+  };
+
+  const close = (): void => {
+    if (!window)
+      return;
+
+    if (watcher) {
+      watcher.requestClose();
+      return;
+    }
+
+    // No active native watcher (unsupported, torn down, or none registered yet):
+    // synthesize a close event so handlers still fire.
+    dispatch(new Event('close'));
+  };
+
+  const destroy = (): void => {
+    handlers.clear();
+    teardownWatcher();
+  };
+
+  tryOnScopeDispose(destroy);
+
+  return {
+    isSupported,
+    onClose,
+    close,
+    destroy,
+  };
+}
diff --git a/vue/toolkit/src/composables/browser/useColorMode/demo.vue b/vue/toolkit/src/composables/browser/useColorMode/demo.vue
new file mode 100644
index 0000000..0b58ce9
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useColorMode/demo.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useColorMode } from './index';
+
+// Scope the applied class/attribute to the demo card so it does not
+// fight the docs site's own theme. `emitAuto` keeps the tri-state value.
+const target = ref<HTMLElement>();
+
+const mode = useColorMode({
+  selector: target,
+  attribute: 'data-demo-theme',
+  storageKey: null,
+  emitAuto: true,
+  modes: {
+    auto: '',
+    light: 'light',
+    dark: 'dark',
+    sepia: 'sepia',
+  },
+});
+
+const options = [
+  { value: 'auto', label: 'Auto', icon: '◐' },
+  { value: 'light', label: 'Light', icon: '☀' },
+  { value: 'dark', label: 'Dark', icon: '☾' },
+  { value: 'sepia', label: 'Sepia', icon: '✦' },
+] as const;
+</script>
+
+<template>
+  <div
+    ref="target"
+    class="flex w-full max-w-sm flex-col gap-4"
+  >
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Color mode</span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        system: {{ mode.system.value }}
+      </span>
+    </div>
+
+    <div class="grid grid-cols-4 gap-2">
+      <button
+        v-for="opt in options"
+        :key="opt.value"
+        type="button"
+        class="inline-flex flex-col items-center justify-center gap-1 rounded-lg border px-2 py-3 text-xs font-medium transition active:scale-[0.98] cursor-pointer"
+        :class="mode === opt.value
+          ? 'border-transparent bg-(--accent) text-(--accent-fg)'
+          : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+        @click="mode = opt.value"
+      >
+        <span class="text-base leading-none">{{ opt.icon }}</span>
+        {{ opt.label }}
+      </button>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <p class="mb-3 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Reactive state</p>
+      <dl class="space-y-2 text-sm">
+        <div class="flex items-center justify-between">
+          <dt class="text-(--fg-muted)">selected (emitAuto)</dt>
+          <dd class="font-mono tabular-nums text-(--fg)">{{ mode }}</dd>
+        </div>
+        <div class="flex items-center justify-between">
+          <dt class="text-(--fg-muted)">resolved state</dt>
+          <dd class="font-mono tabular-nums text-(--fg)">{{ mode.state.value }}</dd>
+        </div>
+        <div class="flex items-center justify-between">
+          <dt class="text-(--fg-muted)">store</dt>
+          <dd class="font-mono tabular-nums text-(--fg)">{{ mode.store.value }}</dd>
+        </div>
+      </dl>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      The chosen mode is applied as <code class="font-mono text-(--fg-muted)">data-demo-theme</code> on this card.
+      Pick "Auto" to follow your OS preference.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useColorMode/index.test.ts b/vue/toolkit/src/composables/browser/useColorMode/index.test.ts
new file mode 100644
index 0000000..5a184da
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useColorMode/index.test.ts
@@ -0,0 +1,372 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, ref } from 'vue';
+import { useColorMode } from '.';
+
+type Listener = (event: { matches: boolean }) => void;
+
+interface StubMql {
+  readonly matches: boolean;
+  media: string;
+  addEventListener: (type: string, cb: Listener) => void;
+  removeEventListener: (type: string, cb: Listener) => void;
+  dispatch: (value: boolean) => void;
+}
+
+function makeMql(initialMatches: boolean, media = ''): StubMql {
+  const listeners = new Set<Listener>();
+  let matches = initialMatches;
+
+  return {
+    get matches() {
+      return matches;
+    },
+    media,
+    addEventListener: (_: string, cb: Listener) => listeners.add(cb),
+    removeEventListener: (_: string, cb: Listener) => listeners.delete(cb),
+    dispatch(value: boolean) {
+      matches = value;
+      for (const cb of listeners) cb({ matches: value });
+    },
+  };
+}
+
+/**
+ * Build a stub `window` that reuses the real jsdom `document` (so DOM updates
+ * applied to `<html>` are observable) but with a controllable `matchMedia` for
+ * `prefers-color-scheme: dark`, an isolated in-memory `localStorage`, and a
+ * `getComputedStyle` shim for the transition-disabling reflow.
+ */
+function makeWindow(prefersDark: StubMql) {
+  const map = new Map<string, string>();
+
+  const storage: Storage = {
+    getItem: (key: string) => (map.has(key) ? map.get(key)! : null),
+    setItem: (key: string, value: string) => { map.set(key, String(value)); },
+    removeItem: (key: string) => { map.delete(key); },
+    clear: () => map.clear(),
+    key: (index: number) => [...map.keys()][index] ?? null,
+    get length() {
+      return map.size;
+    },
+  };
+
+  const win = {
+    document: globalThis.document,
+    matchMedia: vi.fn((query: string) =>
+      query.includes('dark') ? prefersDark : makeMql(false, query)),
+    localStorage: storage,
+    getComputedStyle: () => ({ opacity: '1' }),
+    dispatchEvent: () => true,
+    addEventListener: () => {},
+    removeEventListener: () => {},
+  } as unknown as Window & typeof globalThis;
+
+  return { win, storage, map };
+}
+
+function reset() {
+  document.documentElement.className = '';
+  document.documentElement.removeAttribute('data-theme');
+}
+
+describe(useColorMode, () => {
+  beforeEach(() => {
+    reset();
+    // Ensure module-captured defaultWindow.matchMedia is undefined so the
+    // composable must use the injected window.
+    vi.stubGlobal('matchMedia', undefined);
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    reset();
+  });
+
+  it('applies the system class when in auto mode (dark)', async () => {
+    const prefersDark = makeMql(true);
+    const { win } = makeWindow(prefersDark);
+    const scope = effectScope();
+    let mode: ReturnType<typeof useColorMode>;
+
+    scope.run(() => {
+      mode = useColorMode({ window: win });
+    });
+    await nextTick();
+
+    expect(mode!.value).toBe('dark');
+    expect(mode!.system.value).toBe('dark');
+    expect(mode!.state.value).toBe('dark');
+    expect(document.documentElement.classList.contains('dark')).toBeTruthy();
+    expect(document.documentElement.classList.contains('light')).toBeFalsy();
+
+    scope.stop();
+  });
+
+  it('applies the system class when in auto mode (light)', async () => {
+    const prefersDark = makeMql(false);
+    const { win } = makeWindow(prefersDark);
+    const scope = effectScope();
+    let mode: ReturnType<typeof useColorMode>;
+
+    scope.run(() => {
+      mode = useColorMode({ window: win });
+    });
+    await nextTick();
+
+    expect(mode!.system.value).toBe('light');
+    expect(mode!.state.value).toBe('light');
+    expect(document.documentElement.classList.contains('light')).toBeTruthy();
+    expect(document.documentElement.classList.contains('dark')).toBeFalsy();
+
+    scope.stop();
+  });
+
+  it('writing the ref switches the applied class and removes the previous one', async () => {
+    const prefersDark = makeMql(false);
+    const { win } = makeWindow(prefersDark);
+    const scope = effectScope();
+    let mode: ReturnType<typeof useColorMode>;
+
+    scope.run(() => {
+      mode = useColorMode({ window: win });
+    });
+    await nextTick();
+
+    expect(document.documentElement.classList.contains('light')).toBeTruthy();
+
+    mode!.value = 'dark';
+    await nextTick();
+
+    expect(document.documentElement.classList.contains('dark')).toBeTruthy();
+    expect(document.documentElement.classList.contains('light')).toBeFalsy();
+    expect(mode!.value).toBe('dark');
+    expect(mode!.store.value).toBe('dark');
+
+    scope.stop();
+  });
+
+  it('reacts to system preference changes while in auto mode', async () => {
+    const prefersDark = makeMql(false);
+    const { win } = makeWindow(prefersDark);
+    const scope = effectScope();
+    let mode: ReturnType<typeof useColorMode>;
+
+    scope.run(() => {
+      mode = useColorMode({ window: win });
+    });
+    await nextTick();
+
+    expect(mode!.state.value).toBe('light');
+
+    prefersDark.dispatch(true);
+    await nextTick();
+
+    expect(mode!.system.value).toBe('dark');
+    expect(mode!.state.value).toBe('dark');
+    expect(document.documentElement.classList.contains('dark')).toBeTruthy();
+
+    scope.stop();
+  });
+
+  it('persists the value to storage and reads it back', async () => {
+    const prefersDark = makeMql(false);
+    const { win, storage } = makeWindow(prefersDark);
+    const scope = effectScope();
+    let mode: ReturnType<typeof useColorMode>;
+
+    scope.run(() => {
+      mode = useColorMode({ window: win });
+    });
+    await nextTick();
+
+    mode!.value = 'dark';
+    await nextTick();
+
+    expect(storage.getItem('vuetools-color-scheme')).toBe('dark');
+
+    // A second instance backed by the same storage should hydrate from it.
+    let restored: ReturnType<typeof useColorMode>;
+    scope.run(() => {
+      restored = useColorMode({ window: win });
+    });
+    await nextTick();
+
+    expect(restored!.value).toBe('dark');
+
+    scope.stop();
+  });
+
+  it('honours a custom storageKey', async () => {
+    const prefersDark = makeMql(false);
+    const { win, storage } = makeWindow(prefersDark);
+    const scope = effectScope();
+    let mode: ReturnType<typeof useColorMode>;
+
+    scope.run(() => {
+      mode = useColorMode({ window: win, storageKey: 'my-theme' });
+    });
+    await nextTick();
+
+    mode!.value = 'dark';
+    await nextTick();
+
+    expect(storage.getItem('my-theme')).toBe('dark');
+    expect(storage.getItem('vuetools-color-scheme')).toBeNull();
+
+    scope.stop();
+  });
+
+  it('does not persist when storageKey is null', async () => {
+    const prefersDark = makeMql(false);
+    const { win, map } = makeWindow(prefersDark);
+    const scope = effectScope();
+    let mode: ReturnType<typeof useColorMode>;
+
+    scope.run(() => {
+      mode = useColorMode({ window: win, storageKey: null });
+    });
+    await nextTick();
+
+    mode!.value = 'dark';
+    await nextTick();
+
+    expect(map.size).toBe(0);
+    expect(mode!.value).toBe('dark');
+
+    scope.stop();
+  });
+
+  it('emitAuto keeps the ref value as "auto" while resolving state', async () => {
+    const prefersDark = makeMql(true);
+    const { win } = makeWindow(prefersDark);
+    const scope = effectScope();
+    let mode: ReturnType<typeof useColorMode>;
+
+    scope.run(() => {
+      mode = useColorMode({ window: win, emitAuto: true });
+    });
+    await nextTick();
+
+    expect(mode!.value).toBe('auto');
+    expect(mode!.state.value).toBe('dark');
+
+    scope.stop();
+  });
+
+  it('writes to a custom attribute instead of class', async () => {
+    const prefersDark = makeMql(true);
+    const { win } = makeWindow(prefersDark);
+    const scope = effectScope();
+    let mode: ReturnType<typeof useColorMode>;
+
+    scope.run(() => {
+      mode = useColorMode({ window: win, attribute: 'data-theme' });
+    });
+    await nextTick();
+
+    expect(document.documentElement.getAttribute('data-theme')).toBe('dark');
+
+    mode!.value = 'light';
+    await nextTick();
+
+    expect(document.documentElement.getAttribute('data-theme')).toBe('light');
+    // Classes should not be touched in attribute mode.
+    expect(document.documentElement.classList.contains('dark')).toBeFalsy();
+
+    scope.stop();
+  });
+
+  it('supports custom modes', async () => {
+    const prefersDark = makeMql(false);
+    const { win } = makeWindow(prefersDark);
+    const scope = effectScope();
+    let mode: ReturnType<typeof useColorMode<'cafe' | 'dim'>>;
+
+    scope.run(() => {
+      mode = useColorMode<'cafe' | 'dim'>({
+        window: win,
+        modes: { cafe: 'cafe', dim: 'dim' },
+        initialValue: 'cafe',
+      });
+    });
+    await nextTick();
+
+    expect(document.documentElement.classList.contains('cafe')).toBeTruthy();
+
+    mode!.value = 'dim';
+    await nextTick();
+
+    expect(document.documentElement.classList.contains('dim')).toBeTruthy();
+    expect(document.documentElement.classList.contains('cafe')).toBeFalsy();
+
+    scope.stop();
+  });
+
+  it('invokes a custom onChanged handler instead of the default', async () => {
+    const prefersDark = makeMql(true);
+    const { win } = makeWindow(prefersDark);
+    const onChanged = vi.fn();
+    const scope = effectScope();
+
+    scope.run(() => {
+      useColorMode({ window: win, onChanged });
+    });
+    await nextTick();
+
+    expect(onChanged).toHaveBeenCalled();
+    const [firstMode, firstHandler] = onChanged.mock.calls[0]!;
+    expect(firstMode).toBe('dark');
+    expect(typeof firstHandler).toBe('function');
+    // Default handler suppressed: no class applied.
+    expect(document.documentElement.classList.contains('dark')).toBeFalsy();
+
+    scope.stop();
+  });
+
+  it('uses a custom storageRef when provided', async () => {
+    const prefersDark = makeMql(false);
+    const { win, map } = makeWindow(prefersDark);
+    const storageRef = ref<'auto' | 'dark' | 'light'>('dark');
+    const scope = effectScope();
+    let mode: ReturnType<typeof useColorMode>;
+
+    scope.run(() => {
+      mode = useColorMode({ window: win, storageRef });
+    });
+    await nextTick();
+
+    expect(mode!.value).toBe('dark');
+    expect(document.documentElement.classList.contains('dark')).toBeTruthy();
+    // storageRef bypasses useStorage, so nothing is written to localStorage.
+    expect(map.size).toBe(0);
+
+    storageRef.value = 'light';
+    await nextTick();
+
+    expect(document.documentElement.classList.contains('light')).toBeTruthy();
+
+    scope.stop();
+  });
+
+  it('does not throw on the SSR/unsupported path (no window)', async () => {
+    const scope = effectScope();
+    let mode: ReturnType<typeof useColorMode>;
+
+    expect(() => {
+      scope.run(() => {
+        mode = useColorMode({ window: undefined });
+      });
+    }).not.toThrow();
+    await nextTick();
+
+    // System detection unavailable -> defaults to light; state resolves to it.
+    expect(mode!.system.value).toBe('light');
+    expect(mode!.state.value).toBe('light');
+    // In-memory store still writable.
+    mode!.value = 'dark';
+    await nextTick();
+    expect(mode!.store.value).toBe('dark');
+
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/browser/useColorMode/index.ts b/vue/toolkit/src/composables/browser/useColorMode/index.ts
new file mode 100644
index 0000000..46ca5d6
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useColorMode/index.ts
@@ -0,0 +1,256 @@
+import { computed, toRef, watch } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter, Ref, WritableComputedRef } from 'vue';
+import { isString } from '@robonen/stdlib';
+import { defaultWindow } from '@/types';
+import type { ConfigurableWindow } from '@/types';
+import { unrefElement } from '@/composables/component/unrefElement';
+import type { MaybeElementRef } from '@/composables/component/unrefElement';
+import { usePreferredDark } from '@/composables/browser/usePreferredDark';
+import { useStorage } from '@/composables/storage/useStorage';
+import type { UseStorageOptions } from '@/composables/storage/useStorage';
+import { tryOnMounted } from '@/composables/lifecycle/tryOnMounted';
+
+export type BasicColorMode = 'light' | 'dark';
+export type BasicColorSchema = BasicColorMode | 'auto';
+
+export interface UseColorModeOptions<T extends string = BasicColorMode> extends UseStorageOptions<T | BasicColorMode>, ConfigurableWindow {
+  /**
+   * CSS selector (or element ref) for the target element the mode is applied to.
+   *
+   * @default 'html'
+   */
+  selector?: string | MaybeElementRef;
+
+  /**
+   * HTML attribute applied to the target element. Use `'class'` to toggle
+   * classes, or any attribute name (e.g. `'data-theme'`) to set its value.
+   *
+   * @default 'class'
+   */
+  attribute?: string;
+
+  /**
+   * The initial color mode used when no value is stored.
+   *
+   * @default 'auto'
+   */
+  initialValue?: MaybeRefOrGetter<T | BasicColorSchema>;
+
+  /**
+   * Map of color mode to the value applied to the target element. Extend this
+   * to support custom modes beyond `light`/`dark`/`auto`.
+   *
+   * @default { auto: '', light: 'light', dark: 'dark' }
+   */
+  modes?: Partial<Record<T | BasicColorSchema, string>>;
+
+  /**
+   * Custom handler called whenever the resolved mode changes. Receives the
+   * resolved mode and the default handler, allowing you to opt out of (or
+   * extend) the default DOM update.
+   */
+  onChanged?: (mode: T | BasicColorMode, defaultHandler: (mode: T | BasicColorMode) => void) => void;
+
+  /**
+   * Use a custom ref as the storage backing instead of `useStorage`.
+   */
+  storageRef?: Ref<T | BasicColorSchema>;
+
+  /**
+   * The key persisted into storage. Pass `null` to disable persistence
+   * (the mode lives only in memory).
+   *
+   * @default 'vuetools-color-scheme'
+   */
+  storageKey?: string | null;
+
+  /**
+   * Custom storage backend. Defaults to `window.localStorage`.
+   */
+  storage?: Storage;
+
+  /**
+   * Emit `'auto'` as the writable ref value when in auto mode, instead of the
+   * resolved `'light'`/`'dark'`. Useful for binding a tri-state UI.
+   *
+   * @default false
+   */
+  emitAuto?: boolean;
+
+  /**
+   * Briefly disable CSS transitions while the mode is applied, preventing a
+   * flash of transitioning colors during the switch.
+   *
+   * @default true
+   */
+  disableTransition?: boolean;
+}
+
+export type UseColorModeReturn<T extends string = BasicColorMode>
+  = WritableComputedRef<T | BasicColorSchema> & {
+    store: Ref<T | BasicColorSchema>;
+    system: ComputedRef<BasicColorMode>;
+    state: ComputedRef<T | BasicColorMode>;
+  };
+
+const CSS_DISABLE_TRANS = '*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
+
+/**
+ * @name useColorMode
+ * @category Browser
+ * @description Reactive color mode (`light` / `dark` / `auto`) with system
+ * detection, storage persistence, and automatic application of a class or
+ * attribute to a target element.
+ *
+ * @param {UseColorModeOptions<T>} [options={}] Options
+ * @returns {UseColorModeReturn<T>} A writable ref of the mode, augmented with `{ store, system, state }`
+ *
+ * @example
+ * const mode = useColorMode();
+ * mode.value = 'dark';
+ *
+ * @example
+ * // Custom modes and a data attribute
+ * const mode = useColorMode({
+ *   attribute: 'data-theme',
+ *   modes: { dim: 'dim', cafe: 'cafe' },
+ * });
+ *
+ * @example
+ * // Read the resolved system + effective state
+ * const { system, state } = useColorMode();
+ *
+ * @since 0.0.15
+ */
+export function useColorMode<T extends string = BasicColorMode>(
+  options: UseColorModeOptions<T> = {},
+): UseColorModeReturn<T> {
+  const {
+    selector = 'html',
+    attribute = 'class',
+    initialValue = 'auto',
+    window = defaultWindow,
+    storage,
+    storageKey = 'vuetools-color-scheme',
+    listenToStorageChanges = true,
+    storageRef,
+    emitAuto = false,
+    disableTransition = true,
+  } = options;
+
+  const modes = {
+    auto: '',
+    light: 'light',
+    dark: 'dark',
+    ...options.modes,
+  } as Record<BasicColorSchema | T, string>;
+
+  const preferredDark = usePreferredDark({ window });
+  const system = computed<BasicColorMode>(() => preferredDark.value ? 'dark' : 'light');
+
+  const resolveStore = (): Ref<T | BasicColorSchema> => {
+    if (storageRef)
+      return storageRef;
+
+    if (storageKey === null || storageKey === undefined)
+      return toRef(initialValue) as Ref<T | BasicColorSchema>;
+
+    const backend = storage ?? window?.localStorage;
+
+    if (!backend)
+      return toRef(initialValue) as Ref<T | BasicColorSchema>;
+
+    return useStorage<T | BasicColorSchema>(storageKey, initialValue, backend, {
+      window,
+      listenToStorageChanges,
+    });
+  };
+
+  const store = resolveStore();
+
+  const state = computed<T | BasicColorMode>(() =>
+    store.value === 'auto'
+      ? system.value
+      : store.value as T | BasicColorMode);
+
+  const updateHTMLAttrs = (target: string | MaybeElementRef, attr: string, value: string): void => {
+    const element = isString(target)
+      ? window?.document?.querySelector(target)
+      : unrefElement(target);
+
+    if (!element)
+      return;
+
+    const classesToAdd = new Set<string>();
+    const classesToRemove = new Set<string>();
+    let attributeToChange: { key: string; value: string } | null = null;
+
+    if (attr === 'class') {
+      const next = new Set(value.split(/\s/g));
+
+      // Toggle only the classes this composable owns (derived from `modes`),
+      // so unrelated classes on the element are left untouched.
+      for (const owned of Object.values<string>(modes).flatMap(mode => (mode || '').split(/\s/g)).filter(Boolean)) {
+        if (next.has(owned))
+          classesToAdd.add(owned);
+        else
+          classesToRemove.add(owned);
+      }
+    }
+    else {
+      attributeToChange = { key: attr, value };
+    }
+
+    if (classesToAdd.size === 0 && classesToRemove.size === 0 && attributeToChange === null)
+      return;
+
+    let style: HTMLStyleElement | undefined;
+
+    if (disableTransition && window?.document) {
+      style = window.document.createElement('style');
+      style.append(window.document.createTextNode(CSS_DISABLE_TRANS));
+      window.document.head.append(style);
+    }
+
+    for (const className of classesToAdd)
+      element.classList.add(className);
+
+    for (const className of classesToRemove)
+      element.classList.remove(className);
+
+    if (attributeToChange)
+      element.setAttribute(attributeToChange.key, attributeToChange.value);
+
+    if (style && window?.document) {
+      // Force a reflow so the no-transition style is flushed before removal.
+      void window.getComputedStyle(style).opacity;
+      style.remove();
+    }
+  };
+
+  const defaultOnChanged = (mode: T | BasicColorMode): void => {
+    updateHTMLAttrs(selector, attribute, modes[mode] ?? mode);
+  };
+
+  const onChanged = (mode: T | BasicColorMode): void => {
+    if (options.onChanged)
+      options.onChanged(mode, defaultOnChanged);
+    else
+      defaultOnChanged(mode);
+  };
+
+  watch(state, onChanged, { flush: 'post', immediate: true });
+
+  tryOnMounted(() => onChanged(state.value));
+
+  const mode = computed<T | BasicColorSchema>({
+    get() {
+      return emitAuto ? store.value : state.value;
+    },
+    set(value) {
+      store.value = value;
+    },
+  });
+
+  return Object.assign(mode, { store, system, state }) as UseColorModeReturn<T>;
+}
diff --git a/vue/toolkit/src/composables/browser/useCssVar/demo.vue b/vue/toolkit/src/composables/browser/useCssVar/demo.vue
new file mode 100644
index 0000000..8858fa0
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useCssVar/demo.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useCssVar } from './index';
+
+const target = ref<HTMLElement>();
+
+// Read/write live CSS custom properties on the preview box.
+const hue = useCssVar('--demo-hue', target, { initialValue: '210' });
+const radius = useCssVar('--demo-radius', target, { initialValue: '16' });
+const size = useCssVar('--demo-size', target, { initialValue: '96' });
+
+const swatches = ['12', '90', '150', '210', '270', '330'];
+
+const accent = computed(() => `hsl(${hue.value} 80% 55%)`);
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      ref="target"
+      class="flex items-center justify-center rounded-xl border border-(--border) bg-(--bg-inset) p-6"
+    >
+      <div
+        class="shadow-lg transition-all duration-300 ease-out"
+        :style="{
+          width: 'calc(var(--demo-size) * 1px)',
+          height: 'calc(var(--demo-size) * 1px)',
+          borderRadius: 'calc(var(--demo-radius) * 1px)',
+          background: 'hsl(var(--demo-hue) 80% 55%)',
+        }"
+      />
+    </div>
+
+    <div class="flex flex-col gap-4 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex flex-col gap-2">
+        <div class="flex items-center justify-between">
+          <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="hue">Hue</label>
+          <span class="font-mono text-sm tabular-nums text-(--fg)">--demo-hue: {{ hue }}</span>
+        </div>
+        <input
+          id="hue"
+          v-model="hue"
+          type="range"
+          min="0"
+          max="360"
+          class="w-full accent-(--accent) cursor-pointer"
+        >
+        <div class="flex gap-1.5">
+          <button
+            v-for="s in swatches"
+            :key="s"
+            type="button"
+            class="h-6 w-6 rounded-md border border-(--border) transition hover:scale-110 active:scale-95 cursor-pointer"
+            :style="{ background: `hsl(${s} 80% 55%)` }"
+            :aria-label="`Set hue ${s}`"
+            @click="hue = s"
+          />
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <div class="flex items-center justify-between">
+          <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="radius">Radius</label>
+          <span class="font-mono text-sm tabular-nums text-(--fg)">--demo-radius: {{ radius }}</span>
+        </div>
+        <input
+          id="radius"
+          v-model="radius"
+          type="range"
+          min="0"
+          max="48"
+          class="w-full accent-(--accent) cursor-pointer"
+        >
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <div class="flex items-center justify-between">
+          <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="size">Size</label>
+          <span class="font-mono text-sm tabular-nums text-(--fg)">--demo-size: {{ size }}</span>
+        </div>
+        <input
+          id="size"
+          v-model="size"
+          type="range"
+          min="48"
+          max="140"
+          class="w-full accent-(--accent) cursor-pointer"
+        >
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+      background: {{ accent }};
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useCssVar/index.test.ts b/vue/toolkit/src/composables/browser/useCssVar/index.test.ts
new file mode 100644
index 0000000..eaacbe5
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useCssVar/index.test.ts
@@ -0,0 +1,237 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, ref } from 'vue';
+import { useCssVar } from '.';
+
+let mutationInstances: Array<{ cb: MutationCallback; observe: ReturnType<typeof vi.fn>; disconnect: ReturnType<typeof vi.fn> }> = [];
+
+class StubMutationObserver {
+  observe = vi.fn();
+  disconnect = vi.fn();
+  takeRecords = vi.fn(() => []);
+  cb: MutationCallback;
+  constructor(cb: MutationCallback) {
+    this.cb = cb;
+    mutationInstances.push(this);
+  }
+}
+
+describe(useCssVar, () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    mutationInstances = [];
+  });
+
+  it('reads the existing custom property from the target', () => {
+    const el = document.createElement('div');
+    el.style.setProperty('--color', 'red');
+    document.body.appendChild(el);
+
+    const scope = effectScope();
+    let color: ReturnType<typeof useCssVar>;
+    scope.run(() => {
+      color = useCssVar('--color', el);
+    });
+
+    expect(color!.value).toBe('red');
+    scope.stop();
+  });
+
+  it('writes the property to the element when set', async () => {
+    const el = document.createElement('div');
+    document.body.appendChild(el);
+
+    const scope = effectScope();
+    let color: ReturnType<typeof useCssVar>;
+    scope.run(() => {
+      color = useCssVar('--color', el);
+    });
+
+    color!.value = 'blue';
+    await nextTick();
+
+    expect(el.style.getPropertyValue('--color')).toBe('blue');
+    expect(color!.value).toBe('blue');
+    scope.stop();
+  });
+
+  it('removes the property when set to null', () => {
+    const el = document.createElement('div');
+    el.style.setProperty('--color', 'green');
+    document.body.appendChild(el);
+
+    const scope = effectScope();
+    let color: ReturnType<typeof useCssVar>;
+    scope.run(() => {
+      color = useCssVar('--color', el);
+    });
+
+    color!.value = null;
+
+    expect(el.style.getPropertyValue('--color')).toBe('');
+    expect(color!.value).toBeNull();
+    scope.stop();
+  });
+
+  it('falls back to initialValue when the property is unset', () => {
+    const el = document.createElement('div');
+    document.body.appendChild(el);
+
+    const scope = effectScope();
+    let color: ReturnType<typeof useCssVar>;
+    scope.run(() => {
+      color = useCssVar('--missing', el, { initialValue: 'gray' });
+    });
+
+    expect(color!.value).toBe('gray');
+    scope.stop();
+  });
+
+  it('defaults the target to document.documentElement', () => {
+    document.documentElement.style.setProperty('--root-var', 'rootval');
+
+    const scope = effectScope();
+    let v: ReturnType<typeof useCssVar>;
+    scope.run(() => {
+      v = useCssVar('--root-var');
+    });
+
+    expect(v!.value).toBe('rootval');
+    v!.value = 'changed';
+    expect(document.documentElement.style.getPropertyValue('--root-var')).toBe('changed');
+
+    document.documentElement.style.removeProperty('--root-var');
+    scope.stop();
+  });
+
+  it('removes the old property and re-reads when the prop name changes', async () => {
+    const el = document.createElement('div');
+    el.style.setProperty('--a', 'one');
+    el.style.setProperty('--b', 'two');
+    document.body.appendChild(el);
+
+    const prop = ref('--a');
+    const scope = effectScope();
+    let v: ReturnType<typeof useCssVar>;
+    scope.run(() => {
+      v = useCssVar(prop, el);
+    });
+
+    expect(v!.value).toBe('one');
+
+    prop.value = '--b';
+    await nextTick();
+
+    expect(el.style.getPropertyValue('--a')).toBe('');
+    expect(v!.value).toBe('two');
+    scope.stop();
+  });
+
+  it('re-reads when a reactive target changes', async () => {
+    const a = document.createElement('div');
+    a.style.setProperty('--c', 'fromA');
+    const b = document.createElement('div');
+    b.style.setProperty('--c', 'fromB');
+    document.body.append(a, b);
+
+    const target = ref<HTMLElement>(a);
+    const scope = effectScope();
+    let v: ReturnType<typeof useCssVar>;
+    scope.run(() => {
+      v = useCssVar('--c', target);
+    });
+
+    expect(v!.value).toBe('fromA');
+
+    target.value = b;
+    await nextTick();
+
+    expect(v!.value).toBe('fromB');
+    scope.stop();
+  });
+
+  it('attaches a MutationObserver only when observe is true', () => {
+    vi.stubGlobal('MutationObserver', StubMutationObserver);
+    const el = document.createElement('div');
+    document.body.appendChild(el);
+
+    const scopeOff = effectScope();
+    scopeOff.run(() => useCssVar('--x', el));
+    expect(mutationInstances).toHaveLength(0);
+    scopeOff.stop();
+
+    const scopeOn = effectScope();
+    scopeOn.run(() => useCssVar('--x', el, { observe: true }));
+    expect(mutationInstances).toHaveLength(1);
+    expect(mutationInstances[0]!.observe).toHaveBeenCalledWith(
+      el,
+      expect.objectContaining({ attributeFilter: ['style', 'class'] }),
+    );
+    scopeOn.stop();
+  });
+
+  it('updates the ref when an observed mutation fires', () => {
+    vi.stubGlobal('MutationObserver', StubMutationObserver);
+    const el = document.createElement('div');
+    // NB: use a normal token, not a CSS-wide keyword like `initial` — per spec
+    // (and jsdom 29+) a custom property set to `initial` computes to the
+    // guaranteed-invalid value, so getComputedStyle returns an empty string.
+    el.style.setProperty('--y', 'start');
+    document.body.appendChild(el);
+
+    const scope = effectScope();
+    let v: ReturnType<typeof useCssVar>;
+    scope.run(() => {
+      v = useCssVar('--y', el, { observe: true });
+    });
+
+    expect(v!.value).toBe('start');
+
+    // Simulate an external change followed by a mutation record.
+    el.style.setProperty('--y', 'external');
+    mutationInstances[0]!.cb([{ type: 'attributes' } as MutationRecord], mutationInstances[0] as unknown as MutationObserver);
+
+    expect(v!.value).toBe('external');
+    scope.stop();
+  });
+
+  it('does not throw and keeps initialValue under SSR (no window)', () => {
+    const scope = effectScope();
+    let v: ReturnType<typeof useCssVar>;
+    scope.run(() => {
+      v = useCssVar('--ssr', null, {
+        initialValue: 'fallback',
+        window: undefined as unknown as Window,
+      });
+    });
+
+    expect(v!.value).toBe('fallback');
+    // Writing is a no-op on the (missing) element but still updates the store.
+    v!.value = 'next';
+    expect(v!.value).toBe('next');
+    scope.stop();
+  });
+
+  it('uses a custom window from options for getComputedStyle', () => {
+    const el = document.createElement('div');
+    document.body.appendChild(el);
+
+    const getComputedStyle = vi.fn(() => ({
+      getPropertyValue: () => '  spaced  ',
+    })) as unknown as Window['getComputedStyle'];
+
+    const fakeWindow = {
+      getComputedStyle,
+      document: { documentElement: el },
+    } as unknown as Window;
+
+    const scope = effectScope();
+    let v: ReturnType<typeof useCssVar>;
+    scope.run(() => {
+      v = useCssVar('--z', el, { window: fakeWindow });
+    });
+
+    expect(getComputedStyle).toHaveBeenCalledWith(el);
+    expect(v!.value).toBe('spaced');
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/browser/useCssVar/index.ts b/vue/toolkit/src/composables/browser/useCssVar/index.ts
new file mode 100644
index 0000000..9cb7181
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useCssVar/index.ts
@@ -0,0 +1,112 @@
+import { computed, shallowRef, toValue, watch } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter, WritableComputedRef } from 'vue';
+import type { ConfigurableWindow } from '@/types';
+import { defaultWindow } from '@/types';
+import type { MaybeComputedElementRef } from '@/composables/component/unrefElement';
+import { unrefElement } from '@/composables/component/unrefElement';
+import { useMutationObserver } from '@/composables/elements/useMutationObserver';
+
+export interface UseCssVarOptions extends ConfigurableWindow {
+  /**
+   * Value used before the variable resolves (and the fallback when the
+   * computed value is empty).
+   */
+  initialValue?: string;
+  /**
+   * Watch the target with a `MutationObserver` (filtered to `style`/`class`)
+   * so the ref reflects external changes to the variable.
+   *
+   * @default false
+   */
+  observe?: boolean;
+}
+
+export interface UseCssVarReturn extends WritableComputedRef<string | null | undefined> {}
+
+/**
+ * @name useCssVar
+ * @category Browser
+ * @description Read and write a CSS custom property on an element as a reactive ref.
+ * Defaults to `document.documentElement`. Set `observe` to react to external
+ * changes via a `MutationObserver`.
+ *
+ * @param {MaybeRefOrGetter<string | null | undefined>} prop The CSS variable name (e.g. `--color`)
+ * @param {MaybeComputedElementRef} [target] Element to read/write the variable on (defaults to `documentElement`)
+ * @param {UseCssVarOptions} [options={}] `initialValue`, `observe`, and a configurable `window`
+ * @returns {UseCssVarReturn} A writable ref; reading returns the current value, writing updates the property
+ *
+ * @example
+ * const color = useCssVar('--color', el);
+ * color.value = 'red';
+ *
+ * @example
+ * const theme = useCssVar('--theme', null, { initialValue: 'light', observe: true });
+ *
+ * @since 0.0.15
+ */
+export function useCssVar(
+  prop: MaybeRefOrGetter<string | null | undefined>,
+  target?: MaybeComputedElementRef,
+  options: UseCssVarOptions = {},
+): UseCssVarReturn {
+  const { window = defaultWindow, initialValue, observe = false } = options;
+
+  // Backing store: only mutated on explicit reads / observed changes,
+  // so consumers reading `.value` never pay for `getComputedStyle`.
+  const store = shallowRef<string | null | undefined>(initialValue);
+
+  const elRef: ComputedRef<HTMLElement | SVGElement | undefined> = computed(
+    () => (unrefElement(target) as HTMLElement | SVGElement | undefined) ?? window?.document?.documentElement,
+  );
+
+  const read = (): void => {
+    const el = elRef.value;
+    const key = toValue(prop);
+
+    if (!el || !window || !key)
+      return;
+
+    const value = window.getComputedStyle(el).getPropertyValue(key)?.trim();
+    store.value = value || store.value || initialValue;
+  };
+
+  const write = (value: string | null | undefined): void => {
+    const el = elRef.value;
+    const key = toValue(prop);
+
+    store.value = value;
+
+    if (!el?.style || !key)
+      return;
+
+    if (value === null || value === undefined)
+      el.style.removeProperty(key);
+    else
+      el.style.setProperty(key, value);
+  };
+
+  if (observe) {
+    useMutationObserver(elRef, read, {
+      attributeFilter: ['style', 'class'],
+      window,
+    });
+  }
+
+  // Single watcher: when the element or prop changes, drop the old custom
+  // property and re-read the current value.
+  watch(
+    () => [elRef.value, toValue(prop)] as const,
+    ([el, key], old) => {
+      const [oldEl, oldKey] = old ?? [];
+      if (oldEl?.style && oldKey && (oldEl !== el || oldKey !== key))
+        oldEl.style.removeProperty(oldKey);
+      read();
+    },
+    { immediate: true },
+  );
+
+  return computed<string | null | undefined>({
+    get: () => store.value,
+    set: write,
+  });
+}
diff --git a/vue/toolkit/src/composables/browser/useDark/demo.vue b/vue/toolkit/src/composables/browser/useDark/demo.vue
new file mode 100644
index 0000000..bc261de
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useDark/demo.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useDark } from './index';
+
+const target = ref<HTMLElement>();
+
+// Scope the toggle to the demo card via a data attribute so it does not
+// override the docs site's own theme. `storageKey: null` keeps it in memory.
+const isDark = useDark({
+  selector: target,
+  attribute: 'data-demo-mode',
+  valueDark: 'dark',
+  valueLight: 'light',
+  storageKey: null,
+});
+
+function toggle() {
+  isDark.value = !isDark.value;
+}
+</script>
+
+<template>
+  <div
+    ref="target"
+    data-demo-mode
+    class="flex w-full max-w-sm flex-col gap-4"
+  >
+    <div class="flex items-center justify-between rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex items-center gap-3">
+        <span
+          class="flex h-10 w-10 items-center justify-center rounded-lg text-lg transition-colors"
+          :class="isDark
+            ? 'bg-indigo-500/15 text-indigo-400'
+            : 'bg-amber-500/15 text-amber-600 dark:text-amber-400'"
+        >
+          {{ isDark ? '☾' : '☀' }}
+        </span>
+        <div>
+          <p class="text-sm font-medium text-(--fg)">{{ isDark ? 'Dark mode' : 'Light mode' }}</p>
+          <p class="text-xs text-(--fg-subtle)">isDark = {{ isDark }}</p>
+        </div>
+      </div>
+
+      <button
+        type="button"
+        role="switch"
+        :aria-checked="isDark"
+        class="relative inline-flex h-7 w-12 items-center rounded-full border border-(--border) transition focus:outline-none focus:ring-2 focus:ring-(--ring) cursor-pointer"
+        :class="isDark ? 'bg-(--accent)' : 'bg-(--bg-inset)'"
+        @click="toggle"
+      >
+        <span
+          class="inline-block h-5 w-5 transform rounded-full bg-(--bg) shadow transition-transform"
+          :class="isDark ? 'translate-x-6' : 'translate-x-1'"
+        />
+      </button>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+      <p class="mb-2 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Preview surface</p>
+      <div class="flex items-center gap-2">
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+          data-demo-mode = "{{ isDark ? 'dark' : 'light' }}"
+        </span>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Writing the boolean toggles the attribute on this card. When the requested state
+      matches your OS preference, <code class="font-mono text-(--fg-muted)">useDark</code>
+      falls back to <code class="font-mono text-(--fg-muted)">auto</code> to keep tracking it.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useDark/index.test.ts b/vue/toolkit/src/composables/browser/useDark/index.test.ts
new file mode 100644
index 0000000..96a5359
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useDark/index.test.ts
@@ -0,0 +1,330 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick } from 'vue';
+import { useDark } from '.';
+
+type Listener = (event: { matches: boolean }) => void;
+
+interface StubMql {
+  readonly matches: boolean;
+  media: string;
+  addEventListener: (type: string, cb: Listener) => void;
+  removeEventListener: (type: string, cb: Listener) => void;
+  dispatch: (value: boolean) => void;
+}
+
+function makeMql(initialMatches: boolean, media = ''): StubMql {
+  const listeners = new Set<Listener>();
+  let matches = initialMatches;
+
+  return {
+    get matches() {
+      return matches;
+    },
+    media,
+    addEventListener: (_: string, cb: Listener) => listeners.add(cb),
+    removeEventListener: (_: string, cb: Listener) => listeners.delete(cb),
+    dispatch(value: boolean) {
+      matches = value;
+      for (const cb of listeners) cb({ matches: value });
+    },
+  };
+}
+
+/**
+ * Build a stub `window` that reuses the real jsdom `document` (so DOM updates
+ * applied to `<html>` are observable) but with a controllable `matchMedia` for
+ * `prefers-color-scheme: dark`, an isolated in-memory `localStorage`, and a
+ * `getComputedStyle` shim for the transition-disabling reflow.
+ */
+function makeWindow(prefersDark: StubMql) {
+  const map = new Map<string, string>();
+
+  const storage: Storage = {
+    getItem: (key: string) => (map.has(key) ? map.get(key)! : null),
+    setItem: (key: string, value: string) => { map.set(key, String(value)); },
+    removeItem: (key: string) => { map.delete(key); },
+    clear: () => map.clear(),
+    key: (index: number) => [...map.keys()][index] ?? null,
+    get length() {
+      return map.size;
+    },
+  };
+
+  const win = {
+    document: globalThis.document,
+    matchMedia: vi.fn((query: string) =>
+      query.includes('dark') ? prefersDark : makeMql(false, query)),
+    localStorage: storage,
+    getComputedStyle: () => ({ opacity: '1' }),
+    dispatchEvent: () => true,
+    addEventListener: () => {},
+    removeEventListener: () => {},
+  } as unknown as Window & typeof globalThis;
+
+  return { win, storage, map };
+}
+
+function reset() {
+  document.documentElement.className = '';
+  document.documentElement.removeAttribute('data-theme');
+}
+
+describe(useDark, () => {
+  beforeEach(() => {
+    reset();
+    // Ensure module-captured defaultWindow.matchMedia is undefined so the
+    // composable must use the injected window.
+    vi.stubGlobal('matchMedia', undefined);
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    reset();
+  });
+
+  it('reflects the system preference in auto mode (dark)', async () => {
+    const prefersDark = makeMql(true);
+    const { win } = makeWindow(prefersDark);
+    const scope = effectScope();
+    let isDark: ReturnType<typeof useDark>;
+
+    scope.run(() => {
+      isDark = useDark({ window: win });
+    });
+    await nextTick();
+
+    expect(isDark!.value).toBeTruthy();
+    expect(document.documentElement.classList.contains('dark')).toBeTruthy();
+
+    scope.stop();
+  });
+
+  it('reflects the system preference in auto mode (light)', async () => {
+    const prefersDark = makeMql(false);
+    const { win } = makeWindow(prefersDark);
+    const scope = effectScope();
+    let isDark: ReturnType<typeof useDark>;
+
+    scope.run(() => {
+      isDark = useDark({ window: win });
+    });
+    await nextTick();
+
+    expect(isDark!.value).toBeFalsy();
+    // Default valueLight is '' so no light class is applied.
+    expect(document.documentElement.classList.contains('dark')).toBeFalsy();
+
+    scope.stop();
+  });
+
+  it('writing true while the system prefers light applies the dark class', async () => {
+    const prefersDark = makeMql(false);
+    const { win } = makeWindow(prefersDark);
+    const scope = effectScope();
+    let isDark: ReturnType<typeof useDark>;
+
+    scope.run(() => {
+      isDark = useDark({ window: win });
+    });
+    await nextTick();
+
+    expect(isDark!.value).toBeFalsy();
+
+    isDark!.value = true;
+    await nextTick();
+
+    expect(isDark!.value).toBeTruthy();
+    expect(document.documentElement.classList.contains('dark')).toBeTruthy();
+
+    scope.stop();
+  });
+
+  it('writing true while the system prefers dark falls back to auto', async () => {
+    const prefersDark = makeMql(true);
+    const { win, storage } = makeWindow(prefersDark);
+    const scope = effectScope();
+    let isDark: ReturnType<typeof useDark>;
+
+    scope.run(() => {
+      // Start from an explicit light value so the store is not already auto.
+      isDark = useDark({ window: win });
+    });
+    await nextTick();
+
+    isDark!.value = false;
+    await nextTick();
+    expect(storage.getItem('vuetools-color-scheme')).toBe('light');
+
+    // System prefers dark, so requesting dark should resolve to 'auto'.
+    isDark!.value = true;
+    await nextTick();
+
+    expect(isDark!.value).toBeTruthy();
+    expect(storage.getItem('vuetools-color-scheme')).toBe('auto');
+
+    scope.stop();
+  });
+
+  it('writing false while the system prefers dark falls back to auto', async () => {
+    const prefersDark = makeMql(false);
+    const { win, storage } = makeWindow(prefersDark);
+    const scope = effectScope();
+    let isDark: ReturnType<typeof useDark>;
+
+    scope.run(() => {
+      isDark = useDark({ window: win });
+    });
+    await nextTick();
+
+    // System prefers light, so requesting light resolves to 'auto'.
+    isDark!.value = false;
+    await nextTick();
+
+    expect(isDark!.value).toBeFalsy();
+    expect(storage.getItem('vuetools-color-scheme')).toBe('auto');
+
+    scope.stop();
+  });
+
+  it('reacts to system preference changes while in auto mode', async () => {
+    const prefersDark = makeMql(false);
+    const { win } = makeWindow(prefersDark);
+    const scope = effectScope();
+    let isDark: ReturnType<typeof useDark>;
+
+    scope.run(() => {
+      isDark = useDark({ window: win });
+    });
+    await nextTick();
+
+    expect(isDark!.value).toBeFalsy();
+
+    prefersDark.dispatch(true);
+    await nextTick();
+
+    expect(isDark!.value).toBeTruthy();
+    expect(document.documentElement.classList.contains('dark')).toBeTruthy();
+
+    scope.stop();
+  });
+
+  it('honours custom valueDark / valueLight on a custom attribute', async () => {
+    const prefersDark = makeMql(false);
+    const { win } = makeWindow(prefersDark);
+    const scope = effectScope();
+    let isDark: ReturnType<typeof useDark>;
+
+    scope.run(() => {
+      isDark = useDark({
+        window: win,
+        attribute: 'data-theme',
+        valueDark: 'night',
+        valueLight: 'day',
+      });
+    });
+    await nextTick();
+
+    expect(document.documentElement.getAttribute('data-theme')).toBe('day');
+
+    isDark!.value = true;
+    await nextTick();
+
+    expect(document.documentElement.getAttribute('data-theme')).toBe('night');
+
+    scope.stop();
+  });
+
+  it('persists to a custom storageKey', async () => {
+    const prefersDark = makeMql(false);
+    const { win, storage } = makeWindow(prefersDark);
+    const scope = effectScope();
+    let isDark: ReturnType<typeof useDark>;
+
+    scope.run(() => {
+      isDark = useDark({ window: win, storageKey: 'my-dark' });
+    });
+    await nextTick();
+
+    isDark!.value = true;
+    await nextTick();
+
+    expect(storage.getItem('my-dark')).toBe('dark');
+    expect(storage.getItem('vuetools-color-scheme')).toBeNull();
+
+    scope.stop();
+  });
+
+  it('uses a custom storage backend', async () => {
+    const prefersDark = makeMql(false);
+    const { win } = makeWindow(prefersDark);
+    const map = new Map<string, string>();
+    const storage: Storage = {
+      getItem: (key: string) => (map.has(key) ? map.get(key)! : null),
+      setItem: (key: string, value: string) => { map.set(key, String(value)); },
+      removeItem: (key: string) => { map.delete(key); },
+      clear: () => map.clear(),
+      key: (index: number) => [...map.keys()][index] ?? null,
+      get length() {
+        return map.size;
+      },
+    };
+    const scope = effectScope();
+    let isDark: ReturnType<typeof useDark>;
+
+    scope.run(() => {
+      isDark = useDark({ window: win, storage });
+    });
+    await nextTick();
+
+    isDark!.value = true;
+    await nextTick();
+
+    expect(map.get('vuetools-color-scheme')).toBe('dark');
+
+    scope.stop();
+  });
+
+  it('invokes a custom onChanged handler with the boolean state', async () => {
+    const prefersDark = makeMql(true);
+    const { win } = makeWindow(prefersDark);
+    const onChanged = vi.fn();
+    const scope = effectScope();
+
+    scope.run(() => {
+      useDark({ window: win, onChanged });
+    });
+    await nextTick();
+
+    expect(onChanged).toHaveBeenCalled();
+    const [boolValue, handler, mode] = onChanged.mock.calls[0]!;
+    expect(boolValue).toBeTruthy();
+    expect(typeof handler).toBe('function');
+    expect(mode).toBe('dark');
+    // Default handler suppressed: no class applied.
+    expect(document.documentElement.classList.contains('dark')).toBeFalsy();
+
+    scope.stop();
+  });
+
+  it('does not throw on the SSR/unsupported path (no window)', async () => {
+    const scope = effectScope();
+    let isDark: ReturnType<typeof useDark>;
+
+    expect(() => {
+      scope.run(() => {
+        isDark = useDark({ window: undefined });
+      });
+    }).not.toThrow();
+    await nextTick();
+
+    // System detection unavailable -> defaults to light -> isDark false.
+    expect(isDark!.value).toBeFalsy();
+
+    // Still writable in memory.
+    isDark!.value = true;
+    await nextTick();
+    expect(isDark!.value).toBeTruthy();
+
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/browser/useDark/index.ts b/vue/toolkit/src/composables/browser/useDark/index.ts
new file mode 100644
index 0000000..5f0ec41
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useDark/index.ts
@@ -0,0 +1,97 @@
+import { computed } from 'vue';
+import type { WritableComputedRef } from 'vue';
+import { useColorMode } from '@/composables/browser/useColorMode';
+import type { BasicColorSchema, UseColorModeOptions } from '@/composables/browser/useColorMode';
+
+export interface UseDarkOptions extends Omit<UseColorModeOptions<BasicColorSchema>, 'modes' | 'onChanged'> {
+  /**
+   * Value applied to the target element when `isDark` is `true`.
+   *
+   * @default 'dark'
+   */
+  valueDark?: string;
+
+  /**
+   * Value applied to the target element when `isDark` is `false`.
+   *
+   * @default ''
+   */
+  valueLight?: string;
+
+  /**
+   * Custom handler called whenever the resolved mode changes. When specified,
+   * the default DOM update is overridden (call `defaultHandler` to keep it).
+   *
+   * @default undefined
+   */
+  onChanged?: (isDark: boolean, defaultHandler: (mode: BasicColorSchema) => void, mode: BasicColorSchema) => void;
+}
+
+export type UseDarkReturn = WritableComputedRef<boolean>;
+
+/**
+ * @name useDark
+ * @category Browser
+ * @description Reactive dark mode boolean with system detection and storage
+ * persistence, built on `useColorMode`. Writing `false` while the system
+ * already prefers light (or `true` while it prefers dark) falls back to
+ * `'auto'`, so the mode keeps tracking the OS preference.
+ *
+ * @param {UseDarkOptions} [options={}] Options
+ * @returns {UseDarkReturn} A writable boolean ref; `true` when dark mode is active
+ *
+ * @example
+ * const isDark = useDark();
+ * isDark.value = true;
+ *
+ * @example
+ * // Toggle a data attribute instead of a class
+ * const isDark = useDark({
+ *   attribute: 'data-theme',
+ *   valueDark: 'dark',
+ *   valueLight: 'light',
+ * });
+ *
+ * @example
+ * import { useToggle } from '@/composables/state/useToggle';
+ *
+ * const isDark = useDark();
+ * const toggleDark = useToggle(isDark);
+ *
+ * @since 0.0.15
+ */
+export function useDark(options: UseDarkOptions = {}): UseDarkReturn {
+  const {
+    valueDark = 'dark',
+    valueLight = '',
+  } = options;
+
+  const mode = useColorMode({
+    ...options,
+    onChanged: (resolved, defaultHandler) => {
+      if (options.onChanged)
+        options.onChanged(resolved === 'dark', defaultHandler, resolved);
+      else
+        defaultHandler(resolved);
+    },
+    modes: {
+      dark: valueDark,
+      light: valueLight,
+    },
+  });
+
+  const isDark = computed<boolean>({
+    get() {
+      return mode.state.value === 'dark';
+    },
+    set(value) {
+      const next = value ? 'dark' : 'light';
+
+      // When the requested state already matches the system preference, fall
+      // back to `'auto'` so the mode keeps following the OS going forward.
+      mode.value = mode.system.value === next ? 'auto' : next;
+    },
+  });
+
+  return isDark;
+}
diff --git a/vue/toolkit/src/composables/browser/useDocumentPiP/demo.vue b/vue/toolkit/src/composables/browser/useDocumentPiP/demo.vue
new file mode 100644
index 0000000..64c433e
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useDocumentPiP/demo.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { useDocumentPiP } from './index';
+
+const { isSupported, isOpen, error, open, close } = useDocumentPiP();
+
+// A live element we move into (and back out of) the PiP window.
+const player = ref<HTMLElement>();
+const host = ref<HTMLElement>();
+const elapsed = ref(0);
+
+let timer: ReturnType<typeof setInterval> | undefined;
+
+onMounted(() => {
+  timer = setInterval(() => {
+    elapsed.value += 1;
+  }, 1000);
+});
+
+onUnmounted(() => {
+  if (timer)
+    clearInterval(timer);
+});
+
+async function popOut() {
+  const win = await open({ width: 320, height: 180 });
+
+  if (win && player.value) {
+    // Carry over the document styles so the moved DOM keeps its look.
+    for (const sheet of Array.from(document.styleSheets)) {
+      try {
+        const css = Array.from(sheet.cssRules).map(r => r.cssText).join('');
+        const style = win.document.createElement('style');
+        style.textContent = css;
+        win.document.head.append(style);
+      }
+      catch {
+        // Cross-origin stylesheet — skip.
+      }
+    }
+    win.document.body.style.margin = '0';
+    win.document.body.append(player.value);
+  }
+}
+
+// When the PiP window closes, pull the element back into the page.
+watch(isOpen, (openNow) => {
+  if (!openNow && player.value && host.value)
+    host.value.append(player.value);
+});
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      v-if="!isSupported"
+      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-700 dark:text-amber-400"
+    >
+      Document Picture-in-Picture is not supported in this browser.
+    </div>
+
+    <template v-else>
+      <div
+        ref="host"
+        class="min-h-[7rem] rounded-xl border border-(--border) bg-(--bg-inset) p-1"
+      >
+        <div
+          ref="player"
+          class="flex h-full flex-col items-center justify-center gap-1 rounded-lg bg-(--bg-elevated) p-6"
+        >
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Live timer</span>
+          <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">
+            {{ String(Math.floor(elapsed / 60)).padStart(2, '0') }}:{{ String(elapsed % 60).padStart(2, '0') }}
+          </span>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <button
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          :disabled="isOpen"
+          @click="popOut"
+        >
+          Pop out
+        </button>
+        <button
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          :disabled="!isOpen"
+          @click="close"
+        >
+          Close window
+        </button>
+      </div>
+
+      <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-sm">
+        <span class="text-(--fg-muted)">isOpen</span>
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+          :class="isOpen
+            ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+            : 'border-(--border) bg-(--bg) text-(--fg-muted)'"
+        >
+          <span
+            class="h-1.5 w-1.5 rounded-full"
+            :class="isOpen ? 'bg-emerald-500' : 'bg-(--fg-subtle)'"
+          />
+          {{ isOpen ? 'floating' : 'docked' }}
+        </span>
+      </div>
+
+      <p
+        v-if="error"
+        class="text-xs text-red-600 dark:text-red-400"
+      >
+        {{ String(error) }}
+      </p>
+      <p
+        v-else
+        class="text-xs text-(--fg-subtle)"
+      >
+        "Pop out" moves the live timer into an always-on-top window. Closing it returns the element to the page.
+      </p>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useDocumentPiP/index.test.ts b/vue/toolkit/src/composables/browser/useDocumentPiP/index.test.ts
new file mode 100644
index 0000000..d456fde
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useDocumentPiP/index.test.ts
@@ -0,0 +1,179 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick } from 'vue';
+import { useDocumentPiP } from '.';
+import type { DocumentPictureInPictureOptions } from '.';
+
+/**
+ * Build a fake Picture-in-Picture `Window` that records its listeners and
+ * `close()` call. Passed through options so it reaches the import-time-captured
+ * `defaultWindow` substitute (see test gotcha).
+ */
+function createPipWindow() {
+  const listeners = new Map<string, EventListener>();
+
+  const pip = {
+    addEventListener: vi.fn((type: string, listener: EventListener) => {
+      listeners.set(type, listener);
+    }),
+    close: vi.fn(),
+  } as unknown as Window;
+
+  function firePagehide() {
+    listeners.get('pagehide')?.(new Event('pagehide'));
+  }
+
+  return { pip, firePagehide, close: pip.close as ReturnType<typeof vi.fn> };
+}
+
+function createWindow(pip: Window) {
+  const requestWindow = vi.fn(async (_options?: DocumentPictureInPictureOptions) => pip);
+  const win = {
+    documentPictureInPicture: { window: null, requestWindow },
+  } as unknown as Window & typeof globalThis;
+
+  return { window: win, requestWindow };
+}
+
+describe(useDocumentPiP, () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('reports supported when documentPictureInPicture exists on window', () => {
+    const scope = effectScope();
+    const { pip } = createPipWindow();
+    const { window } = createWindow(pip);
+
+    let result: ReturnType<typeof useDocumentPiP>;
+    scope.run(() => {
+      result = useDocumentPiP({ window });
+    });
+
+    expect(result!.isSupported.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('reports unsupported when the API is absent', () => {
+    const scope = effectScope();
+    const win = {} as unknown as Window & typeof globalThis;
+
+    let result: ReturnType<typeof useDocumentPiP>;
+    scope.run(() => {
+      result = useDocumentPiP({ window: win });
+    });
+
+    expect(result!.isSupported.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('is SSR safe when window is undefined', async () => {
+    const scope = effectScope();
+
+    let result: ReturnType<typeof useDocumentPiP>;
+    scope.run(() => {
+      result = useDocumentPiP({ window: undefined as unknown as Window });
+    });
+
+    expect(result!.isSupported.value).toBeFalsy();
+    await expect(result!.open()).resolves.toBeUndefined();
+    scope.stop();
+  });
+
+  it('opens a PiP window, tracks it, and forwards options', async () => {
+    const scope = effectScope();
+    const { pip } = createPipWindow();
+    const { window, requestWindow } = createWindow(pip);
+
+    let result: ReturnType<typeof useDocumentPiP>;
+    scope.run(() => {
+      result = useDocumentPiP({ window });
+    });
+
+    const returned = await result!.open({ width: 320, height: 240 });
+    await nextTick();
+
+    expect(requestWindow).toHaveBeenCalledWith({ width: 320, height: 240 });
+    expect(returned).toBe(pip);
+    expect(result!.pipWindow.value).toBe(pip);
+    expect(result!.isOpen.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('clears the reference when the PiP window emits pagehide', async () => {
+    const scope = effectScope();
+    const { pip, firePagehide } = createPipWindow();
+    const { window } = createWindow(pip);
+
+    let result: ReturnType<typeof useDocumentPiP>;
+    scope.run(() => {
+      result = useDocumentPiP({ window });
+    });
+
+    await result!.open();
+    expect(result!.isOpen.value).toBeTruthy();
+
+    firePagehide();
+    await nextTick();
+
+    expect(result!.pipWindow.value).toBeNull();
+    expect(result!.isOpen.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('close() closes the window and clears state', async () => {
+    const scope = effectScope();
+    const { pip, close } = createPipWindow();
+    const { window } = createWindow(pip);
+
+    let result: ReturnType<typeof useDocumentPiP>;
+    scope.run(() => {
+      result = useDocumentPiP({ window });
+    });
+
+    await result!.open();
+    result!.close();
+
+    expect(close).toHaveBeenCalledTimes(1);
+    expect(result!.pipWindow.value).toBeNull();
+    scope.stop();
+  });
+
+  it('closes the PiP window when the scope is disposed', async () => {
+    const scope = effectScope();
+    const { pip, close } = createPipWindow();
+    const { window } = createWindow(pip);
+
+    let result: ReturnType<typeof useDocumentPiP>;
+    scope.run(() => {
+      result = useDocumentPiP({ window });
+    });
+
+    await result!.open();
+    scope.stop();
+
+    expect(close).toHaveBeenCalledTimes(1);
+  });
+
+  it('stores the error and invokes onError when open() rejects', async () => {
+    const scope = effectScope();
+    const error = new DOMException('gesture required', 'NotAllowedError');
+    const requestWindow = vi.fn(async () => {
+      throw error;
+    });
+    const win = {
+      documentPictureInPicture: { window: null, requestWindow },
+    } as unknown as Window & typeof globalThis;
+    const onError = vi.fn();
+
+    let result: ReturnType<typeof useDocumentPiP>;
+    scope.run(() => {
+      result = useDocumentPiP({ window: win, onError });
+    });
+
+    await expect(result!.open()).resolves.toBeUndefined();
+    expect(onError).toHaveBeenCalledWith(error);
+    expect(result!.error.value).toBe(error);
+    expect(result!.isOpen.value).toBeFalsy();
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/browser/useDocumentPiP/index.ts b/vue/toolkit/src/composables/browser/useDocumentPiP/index.ts
new file mode 100644
index 0000000..4ecd098
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useDocumentPiP/index.ts
@@ -0,0 +1,169 @@
+import { computed, shallowRef } from 'vue';
+import type { ComputedRef, ShallowRef } from 'vue';
+import { noop } from '@robonen/stdlib';
+import { defaultWindow } from '@/types';
+import type { ConfigurableWindow } from '@/types';
+import { useSupported } from '@/composables/utilities/useSupported';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+
+export interface DocumentPictureInPictureOptions {
+  /**
+   * The initial width of the Picture-in-Picture window, in pixels.
+   */
+  width?: number;
+
+  /**
+   * The initial height of the Picture-in-Picture window, in pixels.
+   */
+  height?: number;
+
+  /**
+   * Hide the "back to tab" button in the Picture-in-Picture window.
+   *
+   * @default false
+   */
+  disallowReturnToOpener?: boolean;
+
+  /**
+   * Open the window in its default position/size rather than reusing the last one.
+   *
+   * @default false
+   */
+  preferInitialWindowPlacement?: boolean;
+}
+
+interface DocumentPictureInPicture {
+  readonly window: Window | null;
+  requestWindow: (options?: DocumentPictureInPictureOptions) => Promise<Window>;
+}
+
+interface WindowWithDocumentPiP {
+  documentPictureInPicture: DocumentPictureInPicture;
+}
+
+export interface UseDocumentPiPOptions extends ConfigurableWindow {
+  /**
+   * Called when `open()` rejects (e.g. not triggered by a user gesture) instead
+   * of throwing. The same value is also stored in the returned `error` ref.
+   *
+   * @default noop
+   */
+  onError?: (error: unknown) => void;
+}
+
+export interface UseDocumentPiPReturn {
+  /**
+   * Whether the [Document Picture-in-Picture API](https://developer.mozilla.org/en-US/docs/Web/API/DocumentPictureInPicture) is supported
+   */
+  isSupported: ComputedRef<boolean>;
+
+  /**
+   * The active Picture-in-Picture `Window`, or `null` when none is open
+   */
+  pipWindow: ShallowRef<Window | null>;
+
+  /**
+   * Whether a Picture-in-Picture window is currently open
+   */
+  isOpen: ComputedRef<boolean>;
+
+  /**
+   * The last error thrown by `open()`, or `null`
+   */
+  error: ShallowRef<unknown | null>;
+
+  /**
+   * Open a Picture-in-Picture window. Must be called from a user gesture.
+   * Resolves with the new `Window`, or `undefined` when unsupported.
+   */
+  open: (pipOptions?: DocumentPictureInPictureOptions) => Promise<Window | undefined>;
+
+  /**
+   * Close the active Picture-in-Picture window, if any
+   */
+  close: () => void;
+}
+
+/**
+ * @name useDocumentPiP
+ * @category Browser
+ * @description Reactive wrapper around the [Document Picture-in-Picture API](https://developer.mozilla.org/en-US/docs/Web/API/DocumentPictureInPicture) for rendering arbitrary DOM in an always-on-top window.
+ *
+ * @param {UseDocumentPiPOptions} [options={}] Options
+ * @param {Function} [options.onError=noop] Error callback invoked instead of throwing
+ * @param {Window} [options.window=defaultWindow] Custom `window` instance
+ * @returns {UseDocumentPiPReturn} `isSupported`, `pipWindow`, `isOpen`, `error`, `open()`, and `close()`
+ *
+ * @example
+ * const { isSupported, pipWindow, open } = useDocumentPiP();
+ * async function popOut(content: HTMLElement) {
+ *   const win = await open({ width: 320, height: 240 });
+ *   win?.document.body.append(content);
+ * }
+ *
+ * @example
+ * // Move a player into the PiP window and track open state
+ * const { isOpen, pipWindow, open, close } = useDocumentPiP();
+ * watchEffect(() => {
+ *   if (pipWindow.value)
+ *     pipWindow.value.document.body.append(playerEl);
+ * });
+ *
+ * @since 0.0.15
+ */
+export function useDocumentPiP(options: UseDocumentPiPOptions = {}): UseDocumentPiPReturn {
+  const {
+    window = defaultWindow,
+    onError = noop,
+  } = options;
+
+  const isSupported = useSupported(() => !!window && 'documentPictureInPicture' in window);
+  const pipWindow = shallowRef<Window | null>(null);
+  const error = shallowRef<unknown | null>(null);
+
+  const isOpen = computed<boolean>(() => pipWindow.value !== null);
+
+  function handleClose(): void {
+    pipWindow.value = null;
+  }
+
+  async function open(pipOptions?: DocumentPictureInPictureOptions): Promise<Window | undefined> {
+    if (!isSupported.value || !window)
+      return undefined;
+
+    error.value = null;
+
+    try {
+      const controller = (window as unknown as WindowWithDocumentPiP).documentPictureInPicture;
+      const pip = await controller.requestWindow(pipOptions);
+
+      // The PiP window closing (user or programmatic) clears our reference.
+      pip.addEventListener('pagehide', handleClose, { once: true });
+      pipWindow.value = pip;
+
+      return pip;
+    }
+    catch (err) {
+      error.value = err;
+      onError(err);
+
+      return undefined;
+    }
+  }
+
+  function close(): void {
+    pipWindow.value?.close();
+    pipWindow.value = null;
+  }
+
+  tryOnScopeDispose(close);
+
+  return {
+    isSupported,
+    pipWindow,
+    isOpen,
+    error,
+    open,
+    close,
+  };
+}
diff --git a/vue/toolkit/src/composables/browser/useEventListener/demo.vue b/vue/toolkit/src/composables/browser/useEventListener/demo.vue
new file mode 100644
index 0000000..7cfd334
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useEventListener/demo.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { ref, shallowRef } from 'vue';
+import { useEventListener } from './index';
+
+// 1. Element target via template ref — track pointer position over the pad.
+const pad = ref<HTMLElement>();
+const pos = ref({ x: 0, y: 0 });
+const inside = ref(false);
+
+useEventListener(pad, 'pointermove', (e: PointerEvent) => {
+  const rect = pad.value?.getBoundingClientRect();
+  if (!rect)
+    return;
+  pos.value = {
+    x: Math.round(e.clientX - rect.left),
+    y: Math.round(e.clientY - rect.top),
+  };
+});
+useEventListener(pad, 'pointerenter', () => (inside.value = true));
+useEventListener(pad, 'pointerleave', () => (inside.value = false));
+
+// 2. Global window target with a stoppable listener — capture last key.
+const lastKey = shallowRef<string>('');
+const keyCount = ref(0);
+const listening = ref(true);
+
+const stop = useEventListener('keydown', (e: KeyboardEvent) => {
+  lastKey.value = e.key === ' ' ? 'Space' : e.key;
+  keyCount.value += 1;
+});
+
+function toggleListening() {
+  if (listening.value) {
+    stop();
+    listening.value = false;
+  }
+  else {
+    // Re-arm by registering a fresh listener.
+    useEventListener('keydown', (e: KeyboardEvent) => {
+      lastKey.value = e.key === ' ' ? 'Space' : e.key;
+      keyCount.value += 1;
+    });
+    listening.value = true;
+  }
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex flex-col gap-2">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">pointermove on element</span>
+      <div
+        ref="pad"
+        class="relative h-32 overflow-hidden rounded-xl border border-(--border) bg-(--bg-inset) touch-none"
+      >
+        <div
+          class="pointer-events-none absolute h-5 w-5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-(--accent) transition-opacity"
+          :class="inside ? 'opacity-100' : 'opacity-0'"
+          :style="{ left: `${pos.x}px`, top: `${pos.y}px` }"
+        />
+        <div class="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <span class="text-xs text-(--fg-subtle)">{{ inside ? '' : 'Hover here' }}</span>
+        </div>
+        <div class="pointer-events-none absolute bottom-2 left-2 rounded-md border border-(--border) bg-(--bg) px-2 py-0.5 font-mono text-xs tabular-nums text-(--fg-muted)">
+          x: {{ pos.x }} · y: {{ pos.y }}
+        </div>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-2 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">keydown on window</span>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-xs font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="toggleListening"
+        >
+          {{ listening ? 'Stop listening' : 'Start listening' }}
+        </button>
+      </div>
+
+      <div class="flex items-center gap-3">
+        <kbd
+          class="flex min-w-[3.5rem] items-center justify-center rounded-lg border border-(--border-strong) bg-(--bg-inset) px-3 py-2 font-mono text-sm font-medium text-(--fg)"
+        >
+          {{ lastKey || '—' }}
+        </kbd>
+        <div class="flex flex-col">
+          <span class="text-xs text-(--fg-subtle)">presses captured</span>
+          <span class="font-mono text-lg font-bold tabular-nums text-(--fg)">{{ keyCount }}</span>
+        </div>
+        <span
+          class="ml-auto inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+          :class="listening
+            ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+            : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+        >
+          <span
+            class="h-1.5 w-1.5 rounded-full"
+            :class="listening ? 'bg-emerald-500 animate-pulse' : 'bg-(--fg-subtle)'"
+          />
+          {{ listening ? 'active' : 'stopped' }}
+        </span>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Listeners auto-detach on unmount. The returned stop function lets you detach early — press any key, then toggle listening.
+    </p>
+  </div>
+</template>
diff --git a/web/vue/src/composables/browser/useEventListener/index.test.ts b/vue/toolkit/src/composables/browser/useEventListener/index.test.ts
similarity index 91%
rename from web/vue/src/composables/browser/useEventListener/index.test.ts
rename to vue/toolkit/src/composables/browser/useEventListener/index.test.ts
index d1adf3f..9e4ac83 100644
--- a/web/vue/src/composables/browser/useEventListener/index.test.ts
+++ b/vue/toolkit/src/composables/browser/useEventListener/index.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect, vi, afterEach } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 import { defineComponent, effectScope, nextTick, ref } from 'vue';
 import { mount } from '@vue/test-utils';
 import { useEventListener } from '.';
@@ -372,4 +372,31 @@ describe(useEventListener, () => {
     el.dispatchEvent(new Event('click'));
     expect(listener).toHaveBeenCalledOnce();
   });
+
+  it('register listener synchronously for static target', () => {
+    const listener = vi.fn();
+    const target = document.createElement('div');
+
+    component = mountWithEventListener(() => {
+      useEventListener(target, 'click', listener);
+    });
+
+    // No nextTick needed — listener is registered synchronously for static targets
+    target.dispatchEvent(new Event('click'));
+    expect(listener).toHaveBeenCalledOnce();
+  });
+
+  it('register listener synchronously for default window target', () => {
+    const listener = vi.fn();
+    const addSpy = vi.spyOn(globalThis, 'addEventListener');
+
+    component = mountWithEventListener(() => {
+      useEventListener('click', listener);
+    });
+
+    // No nextTick needed — registered synchronously
+    expect(addSpy).toHaveBeenCalledWith('click', expect.any(Function), undefined);
+
+    addSpy.mockRestore();
+  });
 });
diff --git a/web/vue/src/composables/browser/useEventListener/index.ts b/vue/toolkit/src/composables/browser/useEventListener/index.ts
similarity index 58%
rename from web/vue/src/composables/browser/useEventListener/index.ts
rename to vue/toolkit/src/composables/browser/useEventListener/index.ts
index ecb459c..93b0910 100644
--- a/web/vue/src/composables/browser/useEventListener/index.ts
+++ b/vue/toolkit/src/composables/browser/useEventListener/index.ts
@@ -1,8 +1,8 @@
-import { first, isArray, isObject, isString, noop } from '@robonen/stdlib';
 import type { Arrayable, VoidFunction } from '@robonen/stdlib';
-import { toValue, watch } from 'vue';
-import type { MaybeRefOrGetter } from 'vue';
+import { first, isArray, isFunction, isObject, isString, noop } from '@robonen/stdlib';
+import { isRef, toValue, watch } from 'vue';
 import { defaultWindow } from '@/types';
+import type { MaybeRefOrGetter } from 'vue';
 import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
 
 interface InferEventTarget<Events> {
@@ -16,152 +16,165 @@ export type WindowEventName = keyof WindowEventMap;
 export type DocumentEventName = keyof DocumentEventMap;
 export type ElementEventName = keyof HTMLElementEventMap;
 
+type ListenerOptions = boolean | AddEventListenerOptions;
+
 /**
  * @name useEventListener
  * @category Browser
  * @description Registers an event listener using the `addEventListener` on mounted and removes it automatically on unmounted
- * 
+ *
  * Overload 1: Omitted window target
  */
 export function useEventListener<E extends WindowEventName>(
   event: Arrayable<E>,
   listener: Arrayable<(this: Window, ev: WindowEventMap[E]) => any>,
-  options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>
+  options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>,
 ): VoidFunction;
 
 /**
  * @name useEventListener
  * @category Browser
  * @description Registers an event listener using the `addEventListener` on mounted and removes it automatically on unmounted
- * 
+ *
  * Overload 2: Explicit window target
  */
 export function useEventListener<E extends WindowEventName>(
   target: Window,
   event: Arrayable<E>,
   listener: Arrayable<(this: Window, ev: WindowEventMap[E]) => any>,
-  options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>
+  options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>,
 ): VoidFunction;
 
 /**
  * @name useEventListener
  * @category Browser
  * @description Registers an event listener using the `addEventListener` on mounted and removes it automatically on unmounted
- * 
+ *
  * Overload 3: Explicit document target
  */
 export function useEventListener<E extends DocumentEventName>(
   target: Document,
   event: Arrayable<E>,
   listener: Arrayable<(this: Document, ev: DocumentEventMap[E]) => any>,
-  options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>
+  options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>,
 ): VoidFunction;
 
 /**
  * @name useEventListener
  * @category Browser
  * @description Registers an event listener using the `addEventListener` on mounted and removes it automatically on unmounted
- * 
+ *
  * Overload 4: Explicit HTMLElement target
  */
 export function useEventListener<E extends ElementEventName>(
   target: MaybeRefOrGetter<HTMLElement | null | undefined>,
   event: Arrayable<E>,
   listener: Arrayable<(this: HTMLElement, ev: HTMLElementEventMap[E]) => any>,
-  options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>
+  options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>,
 ): VoidFunction;
 
 /**
  * @name useEventListener
  * @category Browser
  * @description Registers an event listener using the `addEventListener` on mounted and removes it automatically on unmounted
- * 
+ *
  * Overload 5: Custom target with inferred event type
  */
 export function useEventListener<Names extends string, EventType = Event>(
   target: MaybeRefOrGetter<InferEventTarget<Names> | null | undefined>,
   event: Arrayable<Names>,
   listener: Arrayable<GeneralEventListener<EventType>>,
-  options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>
+  options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>,
 ): VoidFunction;
 
 /**
  * @name useEventListener
  * @category Browser
  * @description Registers an event listener using the `addEventListener` on mounted and removes it automatically on unmounted
- * 
+ *
  * Overload 6: Custom event target fallback
  */
 export function useEventListener<EventType = Event>(
   target: MaybeRefOrGetter<EventTarget | null | undefined>,
   event: Arrayable<string>,
   listener: Arrayable<GeneralEventListener<EventType>>,
-  options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>
+  options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>,
 ): VoidFunction;
 
 export function useEventListener(...args: any[]) {
-  let target: MaybeRefOrGetter<EventTarget> | undefined;
-  let events: Arrayable<string>;
-  let listeners: Arrayable<Function>;
-  let _options: MaybeRefOrGetter<boolean | AddEventListenerOptions> | undefined;
+  let target: MaybeRefOrGetter<EventTarget> | undefined = defaultWindow;
+  let _events: Arrayable<string>;
+  let _listeners: Arrayable<EventListener>;
+  let _options: MaybeRefOrGetter<ListenerOptions> | undefined;
 
   if (isString(first(args)) || isArray(first(args))) {
-    [events, listeners, _options] = args;
-    target = defaultWindow;
-  } else {
-    [target, events, listeners, _options] = args;
+    [_events, _listeners, _options] = args;
+  }
+  else {
+    [target, _events, _listeners, _options] = args;
   }
 
   if (!target)
     return noop;
 
-  if (!isArray(events))
-    events = [events];
+  const events = isArray(_events) ? _events : [_events];
+  const listeners = isArray(_listeners) ? _listeners : [_listeners];
 
-  if (!isArray(listeners))
-    listeners = [listeners];
+  const cleanups: VoidFunction[] = [];
 
-  const cleanups: Function[] = [];
-  
   const _cleanup = () => {
     cleanups.forEach(fn => fn());
     cleanups.length = 0;
-  }
+  };
 
-  const _register = (el: EventTarget, event: string, listener: Function, options: boolean | AddEventListenerOptions | undefined) => {
-    el.addEventListener(event, listener as EventListener, options);
-    return () => el.removeEventListener(event, listener as EventListener, options);
-  }
+  const _register = (el: EventTarget, event: string, listener: EventListener, options: ListenerOptions | undefined) => {
+    el.addEventListener(event, listener, options);
+    return () => el.removeEventListener(event, listener, options);
+  };
 
-  const stopWatch = watch(
-    () => [toValue(target), toValue(_options)] as const,
-    ([el, options]) => {
+  const _registerAll = (el: EventTarget, options: ListenerOptions | undefined) => {
+    // Clone object options to avoid reactive mutation between add/remove
+    const optionsClone = isObject(options) ? { ...options } : options;
+
+    for (const event of events) {
+      for (const listener of listeners) {
+        cleanups.push(_register(el, event, listener, optionsClone));
+      }
+    }
+  };
+
+  const isTargetReactive = isRef(target) || isFunction(target);
+  const isOptionsReactive = isRef(_options) || isFunction(_options);
+
+  // Reactive path: use watch for ref/getter targets (e.g., template refs)
+  if (isTargetReactive || isOptionsReactive) {
+    const stopWatch = watch(
+      () => [toValue(target), toValue(_options)] as const,
+      ([el, options]) => {
+        _cleanup();
+
+        if (!el)
+          return;
+
+        _registerAll(el, options);
+      },
+      { immediate: true, flush: 'post' },
+    );
+
+    const stop = () => {
+      stopWatch();
       _cleanup();
+    };
 
-      if (!el)
-        return;
+    tryOnScopeDispose(stop);
 
-      // Clone object options to avoid reactive mutation between add/remove
-      const optionsClone = isObject(options) ? { ...options } : options;
-
-      const eventsArray = events as string[];
-      const listenersArray = listeners as Function[];
-
-      cleanups.push(
-        ...eventsArray.flatMap((event) =>
-          listenersArray.map((listener) => _register(el, event, listener, optionsClone)),
-        ),
-      );
-    },
-    { immediate: true, flush: 'post' },
-  );
-
-  const stop = () => {
-    stopWatch();
-    _cleanup();
+    return stop;
   }
 
-  tryOnScopeDispose(stop);
+  // Fast path: static target — register synchronously, no watch overhead
+  _registerAll(target as EventTarget, _options as ListenerOptions);
 
-  return stop;
-}
\ No newline at end of file
+  tryOnScopeDispose(_cleanup);
+
+  return _cleanup;
+}
diff --git a/vue/toolkit/src/composables/browser/useEyeDropper/demo.vue b/vue/toolkit/src/composables/browser/useEyeDropper/demo.vue
new file mode 100644
index 0000000..0e51395
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useEyeDropper/demo.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useEyeDropper } from './index';
+
+const { isSupported, sRGBHex, open } = useEyeDropper({ initialValue: '#6366f1' });
+
+const history = ref<string[]>([]);
+const error = ref('');
+
+const hex = computed(() => sRGBHex.value || '#000000');
+
+function relativeLuminance(color: string): number {
+  const value = color.replace('#', '');
+  const r = Number.parseInt(value.slice(0, 2), 16) / 255;
+  const g = Number.parseInt(value.slice(2, 4), 16) / 255;
+  const b = Number.parseInt(value.slice(4, 6), 16) / 255;
+  const lin = (c: number) => (c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
+  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+}
+
+const readableText = computed(() => (relativeLuminance(hex.value) > 0.5 ? '#000000' : '#ffffff'));
+
+async function pick() {
+  error.value = '';
+  try {
+    const result = await open();
+    if (result && !history.value.includes(result.sRGBHex))
+      history.value = [result.sRGBHex, ...history.value].slice(0, 6);
+  }
+  catch {
+    error.value = 'Selection cancelled';
+  }
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      v-if="!isSupported"
+      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-center text-sm text-amber-600 dark:text-amber-400"
+    >
+      The EyeDropper API is not supported in this browser.
+    </div>
+
+    <template v-else>
+      <div
+        class="flex h-32 items-center justify-center rounded-xl border border-(--border) transition-colors duration-300"
+        :style="{ backgroundColor: hex, color: readableText }"
+      >
+        <span class="font-mono text-2xl font-bold tabular-nums">{{ hex }}</span>
+      </div>
+
+      <button class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer" @click="pick">
+        <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="m2 22 1-1h3l9-9" /><path d="M3 21v-3l9-9" /><path d="m15 6 3.4-3.4a2.1 2.1 0 1 1 3 3L21 6l3 3-3 3-3-3-9 9" />
+        </svg>
+        Pick a color from screen
+      </button>
+
+      <p v-if="error" class="text-center text-xs text-(--fg-subtle)">
+        {{ error }}
+      </p>
+
+      <div v-if="history.length" class="flex flex-col gap-2">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Recent</span>
+        <div class="flex flex-wrap gap-2">
+          <button
+            v-for="color in history"
+            :key="color"
+            class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted) transition hover:border-(--border-strong) cursor-pointer"
+            @click="sRGBHex = color"
+          >
+            <span class="size-3 rounded-full border border-(--border)" :style="{ backgroundColor: color }" />
+            {{ color }}
+          </button>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useEyeDropper/index.test.ts b/vue/toolkit/src/composables/browser/useEyeDropper/index.test.ts
new file mode 100644
index 0000000..30a4286
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useEyeDropper/index.test.ts
@@ -0,0 +1,169 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick } from 'vue';
+import { useEyeDropper } from '.';
+
+/**
+ * Build a fake `window` carrying an `EyeDropper` constructor whose `open()`
+ * resolves with the supplied hex. Passed through options so it reaches the
+ * import-time-captured `defaultWindow` substitute (see test gotcha).
+ */
+function createWindowWithEyeDropper(hex = '#ff0000') {
+  const open = vi.fn(async (_options?: { signal?: AbortSignal }) => ({ sRGBHex: hex }));
+
+  class EyeDropper {
+    open = open;
+    get [Symbol.toStringTag]() {
+      return 'EyeDropper' as const;
+    }
+  }
+
+  const win = { EyeDropper } as unknown as Window & typeof globalThis;
+
+  return { window: win, open };
+}
+
+describe(useEyeDropper, () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    vi.restoreAllMocks();
+  });
+
+  it('reports supported when EyeDropper exists on window', () => {
+    const scope = effectScope();
+    const { window } = createWindowWithEyeDropper();
+
+    let result: ReturnType<typeof useEyeDropper>;
+    scope.run(() => {
+      result = useEyeDropper({ window });
+    });
+
+    expect(result!.isSupported.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('reports unsupported when EyeDropper is absent', () => {
+    const scope = effectScope();
+    const win = {} as unknown as Window & typeof globalThis;
+
+    let result: ReturnType<typeof useEyeDropper>;
+    scope.run(() => {
+      result = useEyeDropper({ window: win });
+    });
+
+    expect(result!.isSupported.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('is SSR safe when window is undefined', async () => {
+    const scope = effectScope();
+
+    let result: ReturnType<typeof useEyeDropper>;
+    scope.run(() => {
+      result = useEyeDropper({ window: undefined as unknown as Window });
+    });
+
+    expect(result!.isSupported.value).toBeFalsy();
+    await expect(result!.open()).resolves.toBeUndefined();
+    scope.stop();
+  });
+
+  it('defaults sRGBHex to an empty string', () => {
+    const scope = effectScope();
+    const { window } = createWindowWithEyeDropper();
+
+    let result: ReturnType<typeof useEyeDropper>;
+    scope.run(() => {
+      result = useEyeDropper({ window });
+    });
+
+    expect(result!.sRGBHex.value).toBe('');
+    scope.stop();
+  });
+
+  it('honors the initialValue option', () => {
+    const scope = effectScope();
+    const { window } = createWindowWithEyeDropper();
+
+    let result: ReturnType<typeof useEyeDropper>;
+    scope.run(() => {
+      result = useEyeDropper({ window, initialValue: '#123456' });
+    });
+
+    expect(result!.sRGBHex.value).toBe('#123456');
+    scope.stop();
+  });
+
+  it('updates sRGBHex and returns the result when open() succeeds', async () => {
+    const scope = effectScope();
+    const { window, open } = createWindowWithEyeDropper('#00ff00');
+
+    let result: ReturnType<typeof useEyeDropper>;
+    scope.run(() => {
+      result = useEyeDropper({ window });
+    });
+
+    const picked = await result!.open();
+
+    expect(open).toHaveBeenCalledTimes(1);
+    expect(picked).toEqual({ sRGBHex: '#00ff00' });
+
+    await nextTick();
+    expect(result!.sRGBHex.value).toBe('#00ff00');
+    scope.stop();
+  });
+
+  it('forwards open options (e.g. AbortSignal) to the native open()', async () => {
+    const scope = effectScope();
+    const { window, open } = createWindowWithEyeDropper();
+
+    let result: ReturnType<typeof useEyeDropper>;
+    scope.run(() => {
+      result = useEyeDropper({ window });
+    });
+
+    const controller = new AbortController();
+    await result!.open({ signal: controller.signal });
+
+    expect(open).toHaveBeenCalledWith({ signal: controller.signal });
+    scope.stop();
+  });
+
+  it('returns undefined and does not call the API when unsupported', async () => {
+    const scope = effectScope();
+    const win = {} as unknown as Window & typeof globalThis;
+
+    let result: ReturnType<typeof useEyeDropper>;
+    scope.run(() => {
+      result = useEyeDropper({ window: win });
+    });
+
+    await expect(result!.open()).resolves.toBeUndefined();
+    expect(result!.sRGBHex.value).toBe('');
+    scope.stop();
+  });
+
+  it('propagates rejection when the user cancels the picker', async () => {
+    const scope = effectScope();
+    const error = new DOMException('aborted', 'AbortError');
+
+    class EyeDropper {
+      open = vi.fn(async () => {
+        throw error;
+      });
+
+      get [Symbol.toStringTag]() {
+        return 'EyeDropper' as const;
+      }
+    }
+    const win = { EyeDropper } as unknown as Window & typeof globalThis;
+
+    let result: ReturnType<typeof useEyeDropper>;
+    scope.run(() => {
+      result = useEyeDropper({ window: win });
+    });
+
+    await expect(result!.open()).rejects.toThrow(error);
+    expect(result!.sRGBHex.value).toBe('');
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/browser/useEyeDropper/index.ts b/vue/toolkit/src/composables/browser/useEyeDropper/index.ts
new file mode 100644
index 0000000..9fe9d79
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useEyeDropper/index.ts
@@ -0,0 +1,98 @@
+import { shallowRef } from 'vue';
+import type { ComputedRef, ShallowRef } from 'vue';
+import { defaultWindow } from '@/types';
+import type { ConfigurableWindow } from '@/types';
+import { useSupported } from '@/composables/utilities/useSupported';
+
+export interface EyeDropperOpenOptions {
+  /**
+   * An `AbortSignal` that can be used to cancel the operation.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal
+   */
+  signal?: AbortSignal;
+}
+
+export interface EyeDropperResult {
+  /**
+   * The selected color, in sRGB hexadecimal format (e.g. `#a1b2c3`).
+   */
+  sRGBHex: string;
+}
+
+export interface EyeDropper {
+  open: (options?: EyeDropperOpenOptions) => Promise<EyeDropperResult>;
+  [Symbol.toStringTag]: 'EyeDropper';
+}
+
+export type EyeDropperConstructor = new () => EyeDropper;
+
+export interface UseEyeDropperOptions extends ConfigurableWindow {
+  /**
+   * Initial `sRGBHex` value before any color has been picked.
+   *
+   * @default ''
+   */
+  initialValue?: string;
+}
+
+export interface UseEyeDropperReturn {
+  /**
+   * Whether the [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper) is supported
+   */
+  isSupported: ComputedRef<boolean>;
+
+  /**
+   * The most recently picked color, in sRGB hexadecimal format
+   */
+  sRGBHex: ShallowRef<string>;
+
+  /**
+   * Open the eyedropper and let the user pick a color. Resolves with the
+   * result, or `undefined` when the API is unsupported.
+   */
+  open: (openOptions?: EyeDropperOpenOptions) => Promise<EyeDropperResult | undefined>;
+}
+
+/**
+ * @name useEyeDropper
+ * @category Browser
+ * @description Reactive wrapper around the [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper) for picking colors from the screen.
+ *
+ * @param {UseEyeDropperOptions} [options={}] Options
+ * @returns {UseEyeDropperReturn} `isSupported`, `sRGBHex`, and `open()`
+ *
+ * @example
+ * const { isSupported, sRGBHex, open } = useEyeDropper();
+ * if (isSupported.value)
+ *   await open();
+ *
+ * @since 0.0.15
+ */
+export function useEyeDropper(options: UseEyeDropperOptions = {}): UseEyeDropperReturn {
+  const {
+    window = defaultWindow,
+    initialValue = '',
+  } = options;
+
+  const isSupported = useSupported(() => !!window && 'EyeDropper' in window);
+  const sRGBHex = shallowRef(initialValue);
+
+  async function open(openOptions?: EyeDropperOpenOptions): Promise<EyeDropperResult | undefined> {
+    if (!isSupported.value || !window)
+      return;
+
+    const EyeDropperCtor = (window as unknown as { EyeDropper: EyeDropperConstructor }).EyeDropper;
+    const eyeDropper = new EyeDropperCtor();
+    const result = await eyeDropper.open(openOptions);
+    sRGBHex.value = result.sRGBHex;
+
+    return result;
+  }
+
+  return {
+    isSupported,
+    sRGBHex,
+    open,
+  };
+}
diff --git a/vue/toolkit/src/composables/browser/useFavicon/demo.vue b/vue/toolkit/src/composables/browser/useFavicon/demo.vue
new file mode 100644
index 0000000..ef57387
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useFavicon/demo.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useFavicon } from './index';
+
+interface Preset {
+  label: string;
+  href: string;
+  emoji: string;
+}
+
+// Tiny inline SVG data-URIs so the demo needs no network/assets.
+function emojiFavicon(emoji: string): string {
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">${emoji}</text></svg>`;
+  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+}
+
+const presets: Preset[] = [
+  { label: 'Rocket', emoji: '🚀', href: emojiFavicon('🚀') },
+  { label: 'Fire', emoji: '🔥', href: emojiFavicon('🔥') },
+  { label: 'Heart', emoji: '💜', href: emojiFavicon('💜') },
+  { label: 'Star', emoji: '⭐', href: emojiFavicon('⭐') },
+];
+
+const favicon = useFavicon(presets[0].href);
+const active = ref(presets[0].label);
+
+function select(preset: Preset) {
+  active.value = preset.label;
+  favicon.value = preset.href;
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex items-center gap-2 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2">
+        <div class="flex gap-1.5">
+          <span class="size-2.5 rounded-full bg-red-500/70" />
+          <span class="size-2.5 rounded-full bg-amber-500/70" />
+          <span class="size-2.5 rounded-full bg-emerald-500/70" />
+        </div>
+        <div class="ml-2 flex flex-1 items-center gap-2 rounded-md bg-(--bg) px-2 py-1">
+          <span class="text-base leading-none">{{ presets.find(p => p.label === active)?.emoji }}</span>
+          <span class="truncate text-xs text-(--fg-muted)">My Awesome App</span>
+        </div>
+      </div>
+      <p class="mt-2 text-center text-xs text-(--fg-subtle)">
+        Look at the real browser tab — its favicon updates live.
+      </p>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Choose a favicon</span>
+      <div class="grid grid-cols-2 gap-2">
+        <button
+          v-for="preset in presets"
+          :key="preset.label"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+          :class="active === preset.label
+            ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
+            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+          @click="select(preset)"
+        >
+          <span class="text-base leading-none">{{ preset.emoji }}</span>
+          {{ preset.label }}
+        </button>
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs text-(--fg) break-all">
+      favicon.value = "{{ presets.find(p => p.label === active)?.emoji }} svg"
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useFavicon/index.test.ts b/vue/toolkit/src/composables/browser/useFavicon/index.test.ts
new file mode 100644
index 0000000..bcbc2d5
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useFavicon/index.test.ts
@@ -0,0 +1,141 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { effectScope, nextTick, ref } from 'vue';
+import { useFavicon } from '.';
+
+describe(useFavicon, () => {
+  beforeEach(() => {
+    document.head.querySelectorAll('link[rel*="icon"]').forEach(el => el.remove());
+  });
+
+  it('creates a link element with the icon href', () => {
+    const scope = effectScope();
+    scope.run(() => useFavicon('/icon.png'));
+
+    const link = document.head.querySelector<HTMLLinkElement>('link[rel*="icon"]');
+    expect(link).not.toBeNull();
+    expect(link!.href).toContain('/icon.png');
+    scope.stop();
+  });
+
+  it('updates the href when the ref changes', async () => {
+    const scope = effectScope();
+    let favicon: ReturnType<typeof useFavicon>;
+    scope.run(() => {
+      favicon = useFavicon('/a.png');
+    });
+
+    favicon!.value = '/b.png';
+    await nextTick();
+
+    const link = document.head.querySelector<HTMLLinkElement>('link[rel*="icon"]');
+    expect(link!.href).toContain('/b.png');
+    scope.stop();
+  });
+
+  it('prepends the baseUrl', () => {
+    const scope = effectScope();
+    scope.run(() => useFavicon('icon.png', { baseUrl: 'https://cdn.example.com/' }));
+
+    const link = document.head.querySelector<HTMLLinkElement>('link[rel*="icon"]');
+    expect(link!.href).toBe('https://cdn.example.com/icon.png');
+    scope.stop();
+  });
+
+  it('sets the MIME type from the file extension', () => {
+    const scope = effectScope();
+    scope.run(() => useFavicon('/icon.svg'));
+
+    const link = document.head.querySelector<HTMLLinkElement>('link[rel*="icon"]');
+    expect(link!.type).toBe('image/svg');
+    scope.stop();
+  });
+
+  it('does not set a bogus MIME type for query-string or data hrefs', () => {
+    const scope = effectScope();
+    scope.run(() => useFavicon('/icon.png?v=2'));
+
+    const link = document.head.querySelector<HTMLLinkElement>('link[rel*="icon"]');
+    expect(link!.href).toContain('/icon.png?v=2');
+    expect(link!.type).toBe('');
+    scope.stop();
+  });
+
+  it('does not set a bogus MIME type for extensionless hrefs', () => {
+    const scope = effectScope();
+    scope.run(() => useFavicon('/favicon'));
+
+    const link = document.head.querySelector<HTMLLinkElement>('link[rel*="icon"]');
+    expect(link!.type).toBe('');
+    scope.stop();
+  });
+
+  it('tracks a getter source reactively', async () => {
+    const scope = effectScope();
+    const dark = ref(false);
+    scope.run(() => useFavicon(() => (dark.value ? '/dark.png' : '/light.png')));
+
+    let link = document.head.querySelector<HTMLLinkElement>('link[rel*="icon"]');
+    expect(link!.href).toContain('/light.png');
+
+    dark.value = true;
+    await nextTick();
+
+    link = document.head.querySelector<HTMLLinkElement>('link[rel*="icon"]');
+    expect(link!.href).toContain('/dark.png');
+    scope.stop();
+  });
+
+  it('follows an external writable ref passed as source', async () => {
+    const scope = effectScope();
+    const source = ref('/one.png');
+    let favicon: ReturnType<typeof useFavicon>;
+    scope.run(() => {
+      favicon = useFavicon(source);
+    });
+
+    // returned ref reflects the source
+    expect(favicon!.value).toBe('/one.png');
+
+    source.value = '/two.png';
+    await nextTick();
+
+    const link = document.head.querySelector<HTMLLinkElement>('link[rel*="icon"]');
+    expect(link!.href).toContain('/two.png');
+    scope.stop();
+  });
+
+  it('respects a custom rel attribute', () => {
+    const scope = effectScope();
+    scope.run(() => useFavicon('/apple.png', { rel: 'apple-touch-icon' }));
+
+    const link = document.head.querySelector<HTMLLinkElement>('link[rel*="apple-touch-icon"]');
+    expect(link).not.toBeNull();
+    expect(link!.href).toContain('/apple.png');
+    link!.remove();
+    scope.stop();
+  });
+
+  it('reuses existing matching link elements instead of creating new ones', async () => {
+    const scope = effectScope();
+    let favicon: ReturnType<typeof useFavicon>;
+    scope.run(() => {
+      favicon = useFavicon('/first.png');
+    });
+
+    favicon!.value = '/second.png';
+    await nextTick();
+
+    const links = document.head.querySelectorAll('link[rel*="icon"]');
+    expect(links).toHaveLength(1);
+    expect((links[0] as HTMLLinkElement).href).toContain('/second.png');
+    scope.stop();
+  });
+
+  it('is SSR-safe when no document is available', () => {
+    const scope = effectScope();
+    expect(() => {
+      scope.run(() => useFavicon('/icon.png', { document: undefined }));
+    }).not.toThrow();
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/browser/useFavicon/index.ts b/vue/toolkit/src/composables/browser/useFavicon/index.ts
new file mode 100644
index 0000000..050d026
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useFavicon/index.ts
@@ -0,0 +1,109 @@
+import { toRef, watch } from 'vue';
+import type { ComputedRef, MaybeRef, MaybeRefOrGetter, Ref } from 'vue';
+import { isString } from '@robonen/stdlib';
+import { defaultDocument } from '@/types';
+import type { ConfigurableDocument } from '@/types';
+
+export interface UseFaviconOptions extends ConfigurableDocument {
+  /**
+   * Base URL prepended to the icon href
+   *
+   * @default ''
+   */
+  baseUrl?: string;
+
+  /**
+   * The `rel` attribute of the favicon link element
+   *
+   * @default 'icon'
+   */
+  rel?: string;
+}
+
+export type UseFaviconReturn = ComputedRef<string | null | undefined> | Ref<string | null | undefined>;
+
+// Matches a real file extension at the very end of the path portion of the href,
+// e.g. `/foo.png` -> `png`, but NOT `/foo.png?v=2`, `data:...`, or extensionless hrefs.
+const FILE_EXTENSION_RE = /\.([a-z0-9]+)$/i;
+
+/**
+ * @name useFavicon
+ * @category Browser
+ * @description Reactive favicon.
+ *
+ * @param {MaybeRefOrGetter<string | null | undefined>} [newIcon] Initial icon href. A getter or readonly ref yields a read-only `ComputedRef`; a writable ref or plain value yields a writable `Ref`.
+ * @param {UseFaviconOptions} [options={}] Options
+ * @returns {UseFaviconReturn} A ref bound to the favicon href
+ *
+ * @example
+ * const favicon = useFavicon();
+ * favicon.value = '/new-icon.png';
+ *
+ * @example
+ * // Track an existing reactive source (read-only result)
+ * const isDark = useDark();
+ * const favicon = useFavicon(() => isDark.value ? '/dark.png' : '/light.png');
+ *
+ * @since 0.0.15
+ */
+export function useFavicon(
+  newIcon: MaybeRefOrGetter<string | null | undefined>,
+  options?: UseFaviconOptions,
+): ComputedRef<string | null | undefined>;
+export function useFavicon(
+  newIcon?: MaybeRef<string | null | undefined>,
+  options?: UseFaviconOptions,
+): Ref<string | null | undefined>;
+export function useFavicon(
+  newIcon: MaybeRefOrGetter<string | null | undefined> = null,
+  options: UseFaviconOptions = {},
+): UseFaviconReturn {
+  const {
+    baseUrl = '',
+    rel = 'icon',
+    document = defaultDocument,
+  } = options;
+
+  const favicon = toRef(newIcon);
+  const selector = `link[rel*="${rel}"]`;
+
+  const applyIcon = (icon: string) => {
+    if (!document)
+      return;
+
+    const href = `${baseUrl}${icon}`;
+    const elements = document.head.querySelectorAll<HTMLLinkElement>(selector);
+
+    if (!elements.length) {
+      const link = document.createElement('link');
+
+      link.rel = rel;
+      link.href = href;
+
+      // Only set a MIME type when the icon actually ends in a file extension;
+      // otherwise we'd emit garbage like `image/png?v=2` or `image/` for
+      // query-string, extensionless, or data: hrefs.
+      const extension = FILE_EXTENSION_RE.exec(icon)?.[1];
+      if (extension)
+        link.type = `image/${extension}`;
+
+      document.head.append(link);
+
+      return;
+    }
+
+    for (const element of elements)
+      element.href = href;
+  };
+
+  watch(
+    favicon,
+    (icon, oldIcon) => {
+      if (isString(icon) && icon !== oldIcon)
+        applyIcon(icon);
+    },
+    { immediate: true },
+  );
+
+  return favicon;
+}
diff --git a/vue/toolkit/src/composables/browser/useFileDialog/demo.vue b/vue/toolkit/src/composables/browser/useFileDialog/demo.vue
new file mode 100644
index 0000000..b1e3e3b
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useFileDialog/demo.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useFileDialog } from './index';
+
+const { files, open, reset, onChange, onCancel } = useFileDialog({
+  accept: 'image/*',
+  multiple: true,
+});
+
+const status = ref('Idle');
+const multiple = ref(true);
+
+const selected = computed(() => (files.value ? Array.from(files.value) : []));
+const totalBytes = computed(() => selected.value.reduce((sum, file) => sum + file.size, 0));
+
+function formatBytes(bytes: number): string {
+  if (bytes === 0)
+    return '0 B';
+  const units = ['B', 'KB', 'MB', 'GB'];
+  const index = Math.floor(Math.log(bytes) / Math.log(1024));
+  return `${(bytes / 1024 ** index).toFixed(1)} ${units[index]}`;
+}
+
+onChange((list) => {
+  status.value = list && list.length ? `Selected ${list.length} file(s)` : 'Cleared';
+});
+
+onCancel(() => {
+  status.value = 'Dialog dismissed';
+});
+
+function pick() {
+  open({ multiple: multiple.value });
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <div class="flex items-center justify-between gap-3">
+      <label class="inline-flex cursor-pointer items-center gap-2 text-sm text-(--fg-muted)">
+        <input v-model="multiple" type="checkbox" class="size-4 rounded border-(--border) accent-(--accent)">
+        Allow multiple
+      </label>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        {{ status }}
+      </span>
+    </div>
+
+    <div class="flex gap-2">
+      <button class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer" @click="pick">
+        <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="17 8 12 3 7 8" /><line x1="12" y1="3" x2="12" y2="15" />
+        </svg>
+        Choose images
+      </button>
+      <button
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="!selected.length"
+        @click="reset"
+      >
+        Clear
+      </button>
+    </div>
+
+    <div
+      v-if="!selected.length"
+      class="flex flex-col items-center justify-center gap-1 rounded-xl border border-dashed border-(--border) bg-(--bg-inset) p-6 text-center"
+    >
+      <span class="text-sm text-(--fg-muted)">No files selected</span>
+      <span class="text-xs text-(--fg-subtle)">Click “Choose images” to open the native dialog</span>
+    </div>
+
+    <div v-else class="flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">{{ selected.length }} file(s)</span>
+        <span class="font-mono text-xs tabular-nums text-(--fg-muted)">{{ formatBytes(totalBytes) }} total</span>
+      </div>
+      <ul class="flex max-h-44 flex-col gap-1.5 overflow-auto">
+        <li
+          v-for="file in selected"
+          :key="file.name + file.lastModified"
+          class="flex items-center justify-between gap-3 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2"
+        >
+          <span class="truncate text-sm text-(--fg)">{{ file.name }}</span>
+          <span class="shrink-0 font-mono text-xs tabular-nums text-(--fg-subtle)">{{ formatBytes(file.size) }}</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useFileDialog/index.test.ts b/vue/toolkit/src/composables/browser/useFileDialog/index.test.ts
new file mode 100644
index 0000000..a528dbc
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useFileDialog/index.test.ts
@@ -0,0 +1,211 @@
+import { describe, expect, it, vi } from 'vitest';
+import { effectScope, ref } from 'vue';
+import { useFileDialog } from '.';
+
+function makeFile(name = 'a.txt'): File {
+  return new File(['content'], name, { type: 'text/plain' });
+}
+
+function makeFileList(files: File[]): FileList {
+  const list = {
+    length: files.length,
+    item: (index: number) => files[index] ?? null,
+    [Symbol.iterator]: () => files[Symbol.iterator](),
+  } as unknown as FileList;
+  files.forEach((file, index) => {
+    (list as unknown as Record<number, File>)[index] = file;
+  });
+  return list;
+}
+
+function withScope<T>(fn: () => T): { result: T; stop: () => void } {
+  const scope = effectScope();
+  const result = scope.run(fn)!;
+  return { result, stop: () => scope.stop() };
+}
+
+describe(useFileDialog, () => {
+  it('exposes files, open, reset, onChange, onCancel', () => {
+    const { result, stop } = withScope(() => useFileDialog());
+    expect(result.files.value).toBeNull();
+    expect(typeof result.open).toBe('function');
+    expect(typeof result.reset).toBe('function');
+    expect(typeof result.onChange).toBe('function');
+    expect(typeof result.onCancel).toBe('function');
+    stop();
+  });
+
+  it('seeds files from initialFiles (array)', () => {
+    const file = makeFile();
+    const { result, stop } = withScope(() => useFileDialog({ initialFiles: [file] }));
+    expect(result.files.value).not.toBeNull();
+    expect(result.files.value!).toHaveLength(1);
+    expect(result.files.value![0]).toBe(file);
+    stop();
+  });
+
+  it('seeds files from initialFiles (FileList)', () => {
+    const list = makeFileList([makeFile('x.txt'), makeFile('y.txt')]);
+    const { result, stop } = withScope(() => useFileDialog({ initialFiles: list }));
+    expect(result.files.value!).toHaveLength(2);
+    stop();
+  });
+
+  it('clicks the input element when open() is called', () => {
+    const input = document.createElement('input');
+    const click = vi.spyOn(input, 'click').mockImplementation(() => {});
+    const { result, stop } = withScope(() => useFileDialog({ input }));
+
+    result.open();
+    expect(click).toHaveBeenCalledTimes(1);
+    stop();
+  });
+
+  it('applies options to the input element on open()', () => {
+    const input = document.createElement('input');
+    vi.spyOn(input, 'click').mockImplementation(() => {});
+    const { result, stop } = withScope(() => useFileDialog({
+      input,
+      accept: 'image/*',
+      multiple: false,
+      directory: true,
+    }));
+
+    result.open();
+    expect(input.accept).toBe('image/*');
+    expect(input.multiple).toBeFalsy();
+    expect(input.webkitdirectory).toBeTruthy();
+    stop();
+  });
+
+  it('merges local options on open(), overriding instance options for that call', () => {
+    const input = document.createElement('input');
+    vi.spyOn(input, 'click').mockImplementation(() => {});
+    const { result, stop } = withScope(() => useFileDialog({ input, accept: 'image/*' }));
+
+    result.open({ accept: '.pdf', multiple: false });
+    expect(input.accept).toBe('.pdf');
+    expect(input.multiple).toBeFalsy();
+    stop();
+  });
+
+  it('sets capture attribute only when provided', () => {
+    const input = document.createElement('input');
+    vi.spyOn(input, 'click').mockImplementation(() => {});
+    const { result, stop } = withScope(() => useFileDialog({ input, capture: 'user' }));
+
+    result.open();
+    expect(input.capture).toBe('user');
+    stop();
+  });
+
+  it('reads reactive options via getters/refs', () => {
+    const input = document.createElement('input');
+    vi.spyOn(input, 'click').mockImplementation(() => {});
+    const accept = ref('image/*');
+    const { result, stop } = withScope(() => useFileDialog({ input, accept }));
+
+    result.open();
+    expect(input.accept).toBe('image/*');
+
+    accept.value = 'video/*';
+    result.open();
+    expect(input.accept).toBe('video/*');
+    stop();
+  });
+
+  it('updates files and triggers onChange when the input changes', () => {
+    const input = document.createElement('input');
+    const { result, stop } = withScope(() => useFileDialog({ input }));
+
+    const onChange = vi.fn();
+    result.onChange(onChange);
+
+    const list = makeFileList([makeFile()]);
+    // jsdom does not let you assign input.files via real selection, so override the getter.
+    Object.defineProperty(input, 'files', { configurable: true, get: () => list });
+    input.dispatchEvent(new Event('change'));
+
+    expect(result.files.value).toBe(list);
+    expect(result.files.value!).toHaveLength(1);
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(list);
+    stop();
+  });
+
+  it('triggers onCancel when the dialog is dismissed', () => {
+    const input = document.createElement('input');
+    const { result, stop } = withScope(() => useFileDialog({ input }));
+
+    const onCancel = vi.fn();
+    result.onCancel(onCancel);
+
+    input.dispatchEvent(new Event('cancel'));
+    expect(onCancel).toHaveBeenCalledTimes(1);
+    stop();
+  });
+
+  it('reset() clears files and fires onChange(null) when the input had a value', () => {
+    const input = document.createElement('input');
+    // jsdom forbids assigning a non-empty value to a file input, so stub value with a settable getter/setter.
+    let internalValue = 'a.txt';
+    Object.defineProperty(input, 'value', {
+      configurable: true,
+      get: () => internalValue,
+      set: (v: string) => { internalValue = v; },
+    });
+    const { result, stop } = withScope(() => useFileDialog({ input }));
+
+    const onChange = vi.fn();
+    result.onChange(onChange);
+
+    const list = makeFileList([makeFile()]);
+    Object.defineProperty(input, 'files', { configurable: true, get: () => list });
+    input.dispatchEvent(new Event('change'));
+    onChange.mockClear();
+
+    result.reset();
+    expect(result.files.value).toBeNull();
+    expect(input.value).toBe('');
+    expect(onChange).toHaveBeenCalledWith(null);
+    stop();
+  });
+
+  it('open({ reset: true }) clears the previous selection before opening', () => {
+    const input = document.createElement('input');
+    vi.spyOn(input, 'click').mockImplementation(() => {});
+    const { result, stop } = withScope(() => useFileDialog({ input }));
+
+    const list = makeFileList([makeFile()]);
+    Object.defineProperty(input, 'files', { configurable: true, get: () => list });
+    input.dispatchEvent(new Event('change'));
+    expect(result.files.value).not.toBeNull();
+
+    result.open({ reset: true });
+    expect(result.files.value).toBeNull();
+    stop();
+  });
+
+  it('onChange returns an off() that unsubscribes', () => {
+    const input = document.createElement('input');
+    const { result, stop } = withScope(() => useFileDialog({ input }));
+
+    const onChange = vi.fn();
+    const { off } = result.onChange(onChange);
+    off();
+
+    Object.defineProperty(input, 'files', { configurable: true, value: makeFileList([makeFile()]) });
+    input.dispatchEvent(new Event('change'));
+    expect(onChange).not.toHaveBeenCalled();
+    stop();
+  });
+
+  it('files ref is readonly (no input element created in SSR)', () => {
+    // document undefined simulates SSR; no input is created so open() is a no-op.
+    const { result, stop } = withScope(() => useFileDialog({ document: undefined }));
+    expect(result.files.value).toBeNull();
+    expect(() => result.open()).not.toThrow();
+    expect(() => result.reset()).not.toThrow();
+    stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/browser/useFileDialog/index.ts b/vue/toolkit/src/composables/browser/useFileDialog/index.ts
new file mode 100644
index 0000000..73015a3
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useFileDialog/index.ts
@@ -0,0 +1,244 @@
+import { computed, shallowRef, toValue, watchEffect } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+import { defaultDocument } from '@/types';
+import type { ConfigurableDocument } from '@/types';
+import { unrefElement } from '@/composables/component/unrefElement';
+import type { MaybeComputedElementRef } from '@/composables/component/unrefElement';
+
+export interface UseFileDialogOptions extends ConfigurableDocument {
+  /**
+   * Allow selecting multiple files
+   *
+   * @default true
+   */
+  multiple?: MaybeRefOrGetter<boolean>;
+
+  /**
+   * Comma-separated list of accepted file types (the input's `accept` attribute)
+   *
+   * @default '*'
+   */
+  accept?: MaybeRefOrGetter<string>;
+
+  /**
+   * Hint for which camera/microphone to use on mobile capture (the input's `capture` attribute)
+   */
+  capture?: MaybeRefOrGetter<string>;
+
+  /**
+   * Reset the selected files each time `open()` is called
+   *
+   * @default false
+   */
+  reset?: MaybeRefOrGetter<boolean>;
+
+  /**
+   * Select directories instead of files (sets `webkitdirectory`)
+   *
+   * @default false
+   */
+  directory?: MaybeRefOrGetter<boolean>;
+
+  /**
+   * Initial files to seed `files` with before any dialog is opened
+   */
+  initialFiles?: File[] | FileList;
+
+  /**
+   * Use a custom `<input type="file">` element instead of an internally created one
+   */
+  input?: MaybeComputedElementRef<HTMLInputElement>;
+}
+
+/**
+ * Subscribe to an event; returns an unsubscribe function.
+ */
+export type FileDialogEventHookOn<T = void> = (callback: (param: T) => void) => { off: () => void };
+
+export interface UseFileDialogReturn {
+  /**
+   * The currently selected files, or `null` when none are selected
+   */
+  files: ComputedRef<FileList | null>;
+
+  /**
+   * Open the file dialog, optionally overriding options for this call only
+   */
+  open: (localOptions?: Partial<UseFileDialogOptions>) => void;
+
+  /**
+   * Clear the current selection
+   */
+  reset: () => void;
+
+  /**
+   * Register a callback fired when the selection changes
+   */
+  onChange: FileDialogEventHookOn<FileList | null>;
+
+  /**
+   * Register a callback fired when the dialog is dismissed without a selection
+   */
+  onCancel: FileDialogEventHookOn;
+}
+
+const DEFAULT_OPTIONS: UseFileDialogOptions = {
+  multiple: true,
+  accept: '*',
+  reset: false,
+  directory: false,
+};
+
+interface EventHook<T> {
+  on: FileDialogEventHookOn<T>;
+  trigger: (param: T) => void;
+}
+
+function createEventHook<T = void>(): EventHook<T> {
+  const callbacks = new Set<(param: T) => void>();
+
+  const on: FileDialogEventHookOn<T> = (callback) => {
+    callbacks.add(callback);
+    return {
+      off: () => {
+        callbacks.delete(callback);
+      },
+    };
+  };
+
+  const trigger = (param: T): void => {
+    callbacks.forEach(cb => cb(param));
+  };
+
+  return { on, trigger };
+}
+
+function toFileList(files: File[] | FileList | undefined): FileList | null {
+  if (!files)
+    return null;
+
+  if (typeof FileList !== 'undefined' && files instanceof FileList)
+    return files;
+
+  // Materialize a plain array into a FileList via DataTransfer when available.
+  if (typeof DataTransfer !== 'undefined') {
+    const dt = new DataTransfer();
+    for (const file of files)
+      dt.items.add(file);
+    return dt.files;
+  }
+
+  // Fallback: build a FileList-like object (environments without DataTransfer, e.g. jsdom).
+  const array = Array.from(files);
+  const list = {
+    length: array.length,
+    item: (index: number) => array[index] ?? null,
+    [Symbol.iterator]: () => array[Symbol.iterator](),
+  } as unknown as FileList;
+  array.forEach((file, index) => {
+    (list as unknown as Record<number, File>)[index] = file;
+  });
+  return list;
+}
+
+/**
+ * @name useFileDialog
+ * @category Browser
+ * @description Open a native file dialog programmatically and reactively track the selected files.
+ *
+ * @param {UseFileDialogOptions} [options={}] Options
+ * @returns {UseFileDialogReturn} `files`, `open`, `reset`, `onChange`, and `onCancel`
+ *
+ * @example
+ * const { files, open, onChange } = useFileDialog({ accept: 'image/*' });
+ * onChange((selected) => console.log(selected));
+ * open();
+ *
+ * @example
+ * // Override options for a single call
+ * const { open } = useFileDialog();
+ * open({ multiple: false, accept: '.pdf' });
+ *
+ * @since 0.0.15
+ */
+export function useFileDialog(options: UseFileDialogOptions = {}): UseFileDialogReturn {
+  const {
+    document = defaultDocument,
+  } = options;
+
+  const files = shallowRef<FileList | null>(toFileList(options.initialFiles));
+
+  const { on: onChange, trigger: changeTrigger } = createEventHook<FileList | null>();
+  const { on: onCancel, trigger: cancelTrigger } = createEventHook();
+
+  const inputRef = shallowRef<HTMLInputElement | undefined>();
+
+  // Eagerly resolve the input element (custom or internally created) and wire its
+  // handlers, re-running if a reactive `options.input` target changes.
+  watchEffect(() => {
+    const input = unrefElement(options.input)
+      ?? (document ? document.createElement('input') : undefined);
+
+    if (input) {
+      input.type = 'file';
+      input.onchange = (event: Event) => {
+        const result = event.target as HTMLInputElement;
+        files.value = result.files;
+        changeTrigger(files.value);
+      };
+      input.oncancel = () => {
+        cancelTrigger();
+      };
+    }
+
+    inputRef.value = input;
+  });
+
+  const reset = (): void => {
+    files.value = null;
+    const el = inputRef.value;
+    if (el && el.value) {
+      el.value = '';
+      changeTrigger(null);
+    }
+  };
+
+  const applyOptions = (opts: UseFileDialogOptions): void => {
+    const el = inputRef.value;
+    if (!el)
+      return;
+
+    el.multiple = toValue(opts.multiple)!;
+    el.accept = toValue(opts.accept)!;
+    el.webkitdirectory = toValue(opts.directory)!;
+    if ('capture' in opts)
+      el.capture = toValue(opts.capture)!;
+  };
+
+  const open = (localOptions?: Partial<UseFileDialogOptions>): void => {
+    const el = inputRef.value;
+    if (!el)
+      return;
+
+    const mergedOptions: UseFileDialogOptions = {
+      ...DEFAULT_OPTIONS,
+      ...options,
+      ...localOptions,
+    };
+
+    applyOptions(mergedOptions);
+
+    if (toValue(mergedOptions.reset))
+      reset();
+
+    el.click();
+  };
+
+  return {
+    files: computed(() => files.value),
+    open,
+    reset,
+    onChange,
+    onCancel,
+  };
+}
diff --git a/vue/toolkit/src/composables/browser/useFileSystemAccess/demo.vue b/vue/toolkit/src/composables/browser/useFileSystemAccess/demo.vue
new file mode 100644
index 0000000..29a100f
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useFileSystemAccess/demo.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useFileSystemAccess } from './index';
+
+const lastError = ref('');
+
+const {
+  isSupported,
+  data,
+  fileName,
+  fileMIME,
+  fileSize,
+  open,
+  create,
+  save,
+  saveAs,
+} = useFileSystemAccess({
+  dataType: 'Text',
+  types: [{ description: 'Text files', accept: { 'text/plain': ['.txt', '.md'] } }],
+  onError: (error) => {
+    lastError.value = error instanceof Error && error.name === 'AbortError'
+      ? 'Cancelled'
+      : 'Something went wrong';
+  },
+});
+
+// Writable string proxy so the textarea can v-model the (union-typed) data ref.
+const text = computed({
+  get: () => (typeof data.value === 'string' ? data.value : ''),
+  set: (value: string) => { data.value = value; },
+});
+
+function formatBytes(bytes: number): string {
+  if (bytes === 0)
+    return '0 B';
+  const units = ['B', 'KB', 'MB'];
+  const index = Math.floor(Math.log(bytes) / Math.log(1024));
+  return `${(bytes / 1024 ** index).toFixed(1)} ${units[index]}`;
+}
+
+async function newFile() {
+  lastError.value = '';
+  await create({ suggestedName: 'untitled.txt' });
+  if (typeof data.value !== 'string')
+    data.value = 'Hello from the File System Access API!\n';
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <div
+      v-if="!isSupported"
+      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-center text-sm text-amber-600 dark:text-amber-400"
+    >
+      The File System Access API is not supported in this browser. Try Chrome or Edge.
+    </div>
+
+    <template v-else>
+      <div class="flex flex-wrap gap-2">
+        <button class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer" @click="open()">
+          Open…
+        </button>
+        <button class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer" @click="newFile">
+          New…
+        </button>
+        <button class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100" :disabled="data === undefined" @click="save()">
+          Save
+        </button>
+        <button class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100" :disabled="data === undefined" @click="saveAs()">
+          Save As…
+        </button>
+      </div>
+
+      <div v-if="fileName" class="flex flex-wrap items-center gap-2">
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+          {{ fileName }}
+        </span>
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+          {{ fileMIME || 'text/plain' }}
+        </span>
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-mono tabular-nums text-(--fg-muted)">
+          {{ formatBytes(fileSize) }}
+        </span>
+      </div>
+
+      <textarea
+        v-if="data !== undefined"
+        v-model="text"
+        rows="6"
+        spellcheck="false"
+        class="w-full resize-none rounded-lg border border-(--border) bg-(--bg) px-3 py-2 font-mono text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        placeholder="File contents…"
+      />
+
+      <div
+        v-else
+        class="flex flex-col items-center justify-center gap-1 rounded-xl border border-dashed border-(--border) bg-(--bg-inset) p-6 text-center"
+      >
+        <span class="text-sm text-(--fg-muted)">No file open</span>
+        <span class="text-xs text-(--fg-subtle)">Open an existing file or create a new one, edit it, then save back to disk.</span>
+      </div>
+
+      <p v-if="lastError" class="text-center text-xs text-(--fg-subtle)">
+        {{ lastError }}
+      </p>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useFileSystemAccess/index.test.ts b/vue/toolkit/src/composables/browser/useFileSystemAccess/index.test.ts
new file mode 100644
index 0000000..ba09b05
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useFileSystemAccess/index.test.ts
@@ -0,0 +1,314 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, ref } from 'vue';
+import type { FileSystemFileHandle, UseFileSystemAccessReturn } from '.';
+import { useFileSystemAccess } from '.';
+
+interface WritableSpy {
+  write: ReturnType<typeof vi.fn>;
+  close: ReturnType<typeof vi.fn>;
+}
+
+function makeFile(contents = 'hello world', name = 'demo.txt', type = 'text/plain'): File {
+  const file = {
+    name,
+    type,
+    size: contents.length,
+    lastModified: 1234,
+    text: vi.fn(async () => contents),
+    arrayBuffer: vi.fn(async () => new ArrayBuffer(contents.length)),
+  };
+  return file as unknown as File;
+}
+
+function makeHandle(file: File): { handle: FileSystemFileHandle; writable: WritableSpy } {
+  const writable: WritableSpy = {
+    write: vi.fn(async () => {}),
+    close: vi.fn(async () => {}),
+  };
+  const handle = {
+    getFile: vi.fn(async () => file),
+    createWritable: vi.fn(async () => writable),
+  } as unknown as FileSystemFileHandle;
+  return { handle, writable };
+}
+
+function stubWindow(handle?: FileSystemFileHandle) {
+  const showOpenFilePicker = vi.fn(async () => (handle ? [handle] : []));
+  const showSaveFilePicker = vi.fn(async () => handle);
+  const window = {
+    showOpenFilePicker,
+    showSaveFilePicker,
+  } as unknown as Window;
+  return { window, showOpenFilePicker, showSaveFilePicker };
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe(useFileSystemAccess, () => {
+  it('reports support when the picker APIs exist', () => {
+    const { window } = stubWindow();
+    const scope = effectScope();
+    let fsa: UseFileSystemAccessReturn;
+    scope.run(() => {
+      fsa = useFileSystemAccess({ window });
+    });
+    expect(fsa!.isSupported.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('is not supported without the picker APIs', () => {
+    const window = {} as unknown as Window;
+    const scope = effectScope();
+    let fsa: UseFileSystemAccessReturn;
+    scope.run(() => {
+      fsa = useFileSystemAccess({ window });
+    });
+    expect(fsa!.isSupported.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('is not supported and is a no-op under SSR (no window)', async () => {
+    const scope = effectScope();
+    let fsa: UseFileSystemAccessReturn;
+    scope.run(() => {
+      fsa = useFileSystemAccess({ window: undefined });
+    });
+    expect(fsa!.isSupported.value).toBeFalsy();
+    await expect(fsa!.open()).resolves.toBeUndefined();
+    await expect(fsa!.save()).resolves.toBeUndefined();
+    expect(fsa!.fileName.value).toBe('');
+    expect(fsa!.fileSize.value).toBe(0);
+    expect(fsa!.data.value).toBeUndefined();
+    scope.stop();
+  });
+
+  it('opens a file and reads it as text by default', async () => {
+    const file = makeFile('content');
+    const { handle } = makeHandle(file);
+    const { window, showOpenFilePicker } = stubWindow(handle);
+    const scope = effectScope();
+    let fsa: UseFileSystemAccessReturn<string>;
+    scope.run(() => {
+      fsa = useFileSystemAccess({ window, dataType: 'Text' });
+    });
+
+    await fsa!.open();
+    expect(showOpenFilePicker).toHaveBeenCalledOnce();
+    expect(fsa!.data.value).toBe('content');
+    expect(fsa!.file.value).toBe(file);
+    expect(fsa!.fileName.value).toBe('demo.txt');
+    expect(fsa!.fileMIME.value).toBe('text/plain');
+    expect(fsa!.fileSize.value).toBe(7);
+    expect(fsa!.fileLastModified.value).toBe(1234);
+    scope.stop();
+  });
+
+  it('reads as ArrayBuffer when dataType is ArrayBuffer', async () => {
+    const file = makeFile('abc');
+    const { handle } = makeHandle(file);
+    const { window } = stubWindow(handle);
+    const scope = effectScope();
+    let fsa: UseFileSystemAccessReturn<ArrayBuffer>;
+    scope.run(() => {
+      fsa = useFileSystemAccess({ window, dataType: 'ArrayBuffer' });
+    });
+
+    await fsa!.open();
+    expect(fsa!.data.value).toBeInstanceOf(ArrayBuffer);
+    expect(file.arrayBuffer).toHaveBeenCalled();
+    scope.stop();
+  });
+
+  it('exposes the File itself when dataType is Blob', async () => {
+    const file = makeFile('abc');
+    const { handle } = makeHandle(file);
+    const { window } = stubWindow(handle);
+    const scope = effectScope();
+    let fsa: UseFileSystemAccessReturn<Blob>;
+    scope.run(() => {
+      fsa = useFileSystemAccess({ window, dataType: 'Blob' });
+    });
+
+    await fsa!.open();
+    expect(fsa!.data.value).toBe(file);
+    scope.stop();
+  });
+
+  it('passes types and excludeAcceptAllOption to the open picker', async () => {
+    const file = makeFile();
+    const { handle } = makeHandle(file);
+    const { window, showOpenFilePicker } = stubWindow(handle);
+    const types = [{ description: 'text', accept: { 'text/plain': ['.txt'] } }];
+    const scope = effectScope();
+    let fsa: UseFileSystemAccessReturn;
+    scope.run(() => {
+      fsa = useFileSystemAccess({ window, types, excludeAcceptAllOption: true });
+    });
+
+    await fsa!.open();
+    expect(showOpenFilePicker).toHaveBeenCalledWith({ types, excludeAcceptAllOption: true });
+    scope.stop();
+  });
+
+  it('lets per-call open options override the defaults', async () => {
+    const file = makeFile();
+    const { handle } = makeHandle(file);
+    const { window, showOpenFilePicker } = stubWindow(handle);
+    const scope = effectScope();
+    let fsa: UseFileSystemAccessReturn;
+    scope.run(() => {
+      fsa = useFileSystemAccess({ window, excludeAcceptAllOption: false });
+    });
+
+    await fsa!.open({ excludeAcceptAllOption: true });
+    expect(showOpenFilePicker).toHaveBeenCalledWith({ types: undefined, excludeAcceptAllOption: true });
+    scope.stop();
+  });
+
+  it('creates a new empty handle and clears prior data', async () => {
+    const file = makeFile('');
+    const { handle } = makeHandle(file);
+    const { window, showSaveFilePicker } = stubWindow(handle);
+    const scope = effectScope();
+    let fsa: UseFileSystemAccessReturn;
+    scope.run(() => {
+      fsa = useFileSystemAccess({ window });
+    });
+
+    await fsa!.create({ suggestedName: 'new.txt' });
+    expect(showSaveFilePicker).toHaveBeenCalledWith({ types: undefined, excludeAcceptAllOption: undefined, suggestedName: 'new.txt' });
+    expect(fsa!.file.value).toBe(file);
+    scope.stop();
+  });
+
+  it('save writes current data to the existing handle', async () => {
+    const file = makeFile('original');
+    const { handle, writable } = makeHandle(file);
+    const { window } = stubWindow(handle);
+    const scope = effectScope();
+    let fsa: UseFileSystemAccessReturn<string>;
+    scope.run(() => {
+      fsa = useFileSystemAccess({ window, dataType: 'Text' });
+    });
+
+    await fsa!.open();
+    fsa!.data.value = 'edited';
+    await fsa!.save();
+
+    expect(writable.write).toHaveBeenCalledWith('edited');
+    expect(writable.close).toHaveBeenCalledOnce();
+    scope.stop();
+  });
+
+  it('save falls back to saveAs when there is no handle', async () => {
+    const file = makeFile('');
+    const { handle, writable } = makeHandle(file);
+    const { window, showSaveFilePicker, showOpenFilePicker } = stubWindow(handle);
+    const scope = effectScope();
+    let fsa: UseFileSystemAccessReturn<string>;
+    scope.run(() => {
+      fsa = useFileSystemAccess({ window, dataType: 'Text' });
+    });
+
+    fsa!.data.value = 'fresh';
+    await fsa!.save();
+
+    expect(showOpenFilePicker).not.toHaveBeenCalled();
+    expect(showSaveFilePicker).toHaveBeenCalledOnce();
+    expect(writable.write).toHaveBeenCalledWith('fresh');
+    scope.stop();
+  });
+
+  it('saveAs requests a new handle and writes data', async () => {
+    const file = makeFile('');
+    const { handle, writable } = makeHandle(file);
+    const { window, showSaveFilePicker } = stubWindow(handle);
+    const scope = effectScope();
+    let fsa: UseFileSystemAccessReturn<string>;
+    scope.run(() => {
+      fsa = useFileSystemAccess({ window, dataType: 'Text' });
+    });
+
+    fsa!.data.value = 'payload';
+    await fsa!.saveAs({ suggestedName: 'out.txt' });
+
+    expect(showSaveFilePicker).toHaveBeenCalledWith({ types: undefined, excludeAcceptAllOption: undefined, suggestedName: 'out.txt' });
+    expect(writable.write).toHaveBeenCalledWith('payload');
+    scope.stop();
+  });
+
+  it('does not write when there is no data', async () => {
+    const file = makeFile('');
+    const { handle, writable } = makeHandle(file);
+    const { window } = stubWindow(handle);
+    const scope = effectScope();
+    let fsa: UseFileSystemAccessReturn<string>;
+    scope.run(() => {
+      fsa = useFileSystemAccess({ window, dataType: 'Text' });
+    });
+
+    await fsa!.saveAs();
+    expect(writable.write).not.toHaveBeenCalled();
+    scope.stop();
+  });
+
+  it('updateData re-reads the current file', async () => {
+    const file = makeFile('v1');
+    const { handle } = makeHandle(file);
+    const { window } = stubWindow(handle);
+    const scope = effectScope();
+    let fsa: UseFileSystemAccessReturn<string>;
+    scope.run(() => {
+      fsa = useFileSystemAccess({ window, dataType: 'Text' });
+    });
+
+    await fsa!.open();
+    expect(fsa!.data.value).toBe('v1');
+
+    (file.text as ReturnType<typeof vi.fn>).mockResolvedValueOnce('v2');
+    await fsa!.updateData();
+    expect(fsa!.data.value).toBe('v2');
+    scope.stop();
+  });
+
+  it('re-reads data when a reactive dataType changes', async () => {
+    const file = makeFile('reactive');
+    const { handle } = makeHandle(file);
+    const { window } = stubWindow(handle);
+    const dataType = ref<'Text' | 'Blob'>('Text');
+    const scope = effectScope();
+    let fsa: UseFileSystemAccessReturn;
+    scope.run(() => {
+      fsa = useFileSystemAccess({ window, dataType });
+    });
+
+    await fsa!.open();
+    expect(fsa!.data.value).toBe('reactive');
+
+    dataType.value = 'Blob';
+    await nextTick();
+    await Promise.resolve();
+    expect(fsa!.data.value).toBe(file);
+    scope.stop();
+  });
+
+  it('routes picker errors to onError instead of throwing', async () => {
+    const abort = new DOMException('cancelled', 'AbortError');
+    const window = {
+      showOpenFilePicker: vi.fn(async () => { throw abort; }),
+      showSaveFilePicker: vi.fn(async () => { throw abort; }),
+    } as unknown as Window;
+    const onError = vi.fn();
+    const scope = effectScope();
+    let fsa: UseFileSystemAccessReturn;
+    scope.run(() => {
+      fsa = useFileSystemAccess({ window, onError });
+    });
+
+    await expect(fsa!.open()).resolves.toBeUndefined();
+    expect(onError).toHaveBeenCalledWith(abort);
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/browser/useFileSystemAccess/index.ts b/vue/toolkit/src/composables/browser/useFileSystemAccess/index.ts
new file mode 100644
index 0000000..0655e5c
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useFileSystemAccess/index.ts
@@ -0,0 +1,332 @@
+import { computed, shallowRef, toValue, watch } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter, ShallowRef } from 'vue';
+import { noop } from '@robonen/stdlib';
+import { defaultWindow } from '@/types';
+import type { ConfigurableWindow } from '@/types';
+import { useSupported } from '@/composables/utilities/useSupported';
+
+/**
+ * `window.showOpenFilePicker` parameters.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/showOpenFilePicker#parameters
+ */
+export interface FileSystemAccessShowOpenFileOptions {
+  multiple?: boolean;
+  types?: Array<{
+    description?: string;
+    accept: Record<string, string[]>;
+  }>;
+  excludeAcceptAllOption?: boolean;
+}
+
+/**
+ * `window.showSaveFilePicker` parameters.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/showSaveFilePicker#parameters
+ */
+export interface FileSystemAccessShowSaveFileOptions {
+  suggestedName?: string;
+  types?: Array<{
+    description?: string;
+    accept: Record<string, string[]>;
+  }>;
+  excludeAcceptAllOption?: boolean;
+}
+
+/**
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/FileSystemWritableFileStream/write
+ */
+export interface FileSystemWritableFileStreamWrite {
+  (data: string | BufferSource | Blob): Promise<void>;
+  (options: { type: 'write'; position: number; data: string | BufferSource | Blob }): Promise<void>;
+  (options: { type: 'seek'; position: number }): Promise<void>;
+  (options: { type: 'truncate'; size: number }): Promise<void>;
+}
+
+/**
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/FileSystemWritableFileStream
+ */
+export interface FileSystemWritableFileStream extends WritableStream {
+  write: FileSystemWritableFileStreamWrite;
+  seek: (position: number) => Promise<void>;
+  truncate: (size: number) => Promise<void>;
+}
+
+/**
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/FileSystemFileHandle
+ */
+export interface FileSystemFileHandle {
+  getFile: () => Promise<File>;
+  createWritable: () => Promise<FileSystemWritableFileStream>;
+}
+
+/**
+ * A `window` augmented with the File System Access API entry points.
+ */
+export type FileSystemAccessWindow
+  = Window & {
+    showSaveFilePicker: (options: FileSystemAccessShowSaveFileOptions) => Promise<FileSystemFileHandle>;
+    showOpenFilePicker: (options: FileSystemAccessShowOpenFileOptions) => Promise<FileSystemFileHandle[]>;
+  };
+
+/**
+ * The supported file data types.
+ */
+export type UseFileSystemAccessDataType = 'Text' | 'ArrayBuffer' | 'Blob';
+
+/**
+ * Picker options shared between open/create/save operations.
+ */
+export type UseFileSystemAccessCommonOptions
+  = Pick<FileSystemAccessShowOpenFileOptions, 'types' | 'excludeAcceptAllOption'>;
+
+/**
+ * Picker options accepted by save-style operations.
+ */
+export type UseFileSystemAccessShowSaveFileOptions
+  = Pick<FileSystemAccessShowSaveFileOptions, 'suggestedName'> & UseFileSystemAccessCommonOptions;
+
+export type UseFileSystemAccessOptions
+  = ConfigurableWindow & UseFileSystemAccessCommonOptions & {
+    /**
+     * How the file contents are read into `data`.
+     *
+     * @default 'Text'
+     */
+    dataType?: MaybeRefOrGetter<UseFileSystemAccessDataType>;
+
+    /**
+     * Called when a picker or file operation fails.
+     *
+     * User-cancelled pickers reject with an `AbortError`; route them here to
+     * keep them out of the global unhandled-rejection channel.
+     *
+     * @default noop
+     */
+    onError?: (error: unknown) => void;
+  };
+
+export interface UseFileSystemAccessReturn<T = string | ArrayBuffer | Blob> {
+  /**
+   * Whether the File System Access API is available.
+   */
+  isSupported: ComputedRef<boolean>;
+
+  /**
+   * The current file contents, read according to `dataType`.
+   */
+  data: ShallowRef<T | undefined>;
+
+  /**
+   * The currently bound `File`, or `undefined` when no file is open.
+   */
+  file: ShallowRef<File | undefined>;
+
+  /**
+   * The current file name (empty string when no file is open).
+   */
+  fileName: ComputedRef<string>;
+
+  /**
+   * The current file MIME type (empty string when no file is open).
+   */
+  fileMIME: ComputedRef<string>;
+
+  /**
+   * The current file size in bytes (`0` when no file is open).
+   */
+  fileSize: ComputedRef<number>;
+
+  /**
+   * The current file's last-modified timestamp (`0` when no file is open).
+   */
+  fileLastModified: ComputedRef<number>;
+
+  /**
+   * Show the open-file picker and load the chosen file.
+   */
+  open: (options?: UseFileSystemAccessCommonOptions) => Promise<void>;
+
+  /**
+   * Show the save-file picker to create a new, empty file handle.
+   */
+  create: (options?: UseFileSystemAccessShowSaveFileOptions) => Promise<void>;
+
+  /**
+   * Write `data` back to the current handle (falls back to `saveAs` when none).
+   */
+  save: (options?: UseFileSystemAccessShowSaveFileOptions) => Promise<void>;
+
+  /**
+   * Show the save-file picker, then write `data` to the chosen handle.
+   */
+  saveAs: (options?: UseFileSystemAccessShowSaveFileOptions) => Promise<void>;
+
+  /**
+   * Re-read `data` (and metadata) from the current handle.
+   */
+  updateData: () => Promise<void>;
+}
+
+/**
+ * @name useFileSystemAccess
+ * @category Browser
+ * @description Create, read, and write local files via the File System Access API.
+ *
+ * @param {UseFileSystemAccessOptions} [options={}] Options including `dataType`, `types`, `excludeAcceptAllOption`, and `onError`
+ * @returns {UseFileSystemAccessReturn} `isSupported`, `data`, `file`, `fileName`, `fileMIME`, `fileSize`, `fileLastModified`, `open`, `create`, `save`, `saveAs`, `updateData`
+ *
+ * @example
+ * const { isSupported, data, open, save } = useFileSystemAccess({ dataType: 'Text' });
+ * await open();
+ * data.value += '\nappended';
+ * await save();
+ *
+ * @example
+ * // Read raw bytes
+ * const { data } = useFileSystemAccess({ dataType: 'ArrayBuffer' });
+ *
+ * @since 0.0.15
+ */
+export function useFileSystemAccess(): UseFileSystemAccessReturn<string | ArrayBuffer | Blob>;
+export function useFileSystemAccess(options: UseFileSystemAccessOptions & { dataType: 'Text' }): UseFileSystemAccessReturn<string>;
+export function useFileSystemAccess(options: UseFileSystemAccessOptions & { dataType: 'ArrayBuffer' }): UseFileSystemAccessReturn<ArrayBuffer>;
+export function useFileSystemAccess(options: UseFileSystemAccessOptions & { dataType: 'Blob' }): UseFileSystemAccessReturn<Blob>;
+export function useFileSystemAccess(options: UseFileSystemAccessOptions): UseFileSystemAccessReturn<string | ArrayBuffer | Blob>;
+export function useFileSystemAccess(
+  options: UseFileSystemAccessOptions = {},
+): UseFileSystemAccessReturn<string | ArrayBuffer | Blob> {
+  const {
+    window: win = defaultWindow,
+    dataType = 'Text',
+    types,
+    excludeAcceptAllOption,
+    onError = noop,
+  } = options;
+
+  const fsWindow = win as FileSystemAccessWindow | undefined;
+  const isSupported = useSupported(() => fsWindow && 'showSaveFilePicker' in fsWindow && 'showOpenFilePicker' in fsWindow);
+
+  const fileHandle = shallowRef<FileSystemFileHandle>();
+  const data = shallowRef<string | ArrayBuffer | Blob>();
+  const file = shallowRef<File>();
+
+  const fileName = computed(() => file.value?.name ?? '');
+  const fileMIME = computed(() => file.value?.type ?? '');
+  const fileSize = computed(() => file.value?.size ?? 0);
+  const fileLastModified = computed(() => file.value?.lastModified ?? 0);
+
+  // Resolve the picker defaults once per call rather than spreading the full
+  // options bag (which carries `window`/`onError`) into the native picker.
+  function pickerDefaults(): UseFileSystemAccessCommonOptions {
+    return { types, excludeAcceptAllOption };
+  }
+
+  async function updateFile(): Promise<void> {
+    file.value = await fileHandle.value?.getFile();
+  }
+
+  async function updateData(): Promise<void> {
+    await updateFile();
+
+    const type = toValue(dataType);
+
+    if (type === 'Text')
+      data.value = await file.value?.text();
+    else if (type === 'ArrayBuffer')
+      data.value = await file.value?.arrayBuffer();
+    else if (type === 'Blob')
+      data.value = file.value;
+  }
+
+  async function writeData(): Promise<void> {
+    if (!fileHandle.value || data.value === undefined || data.value === null)
+      return;
+
+    const stream = await fileHandle.value.createWritable();
+    await stream.write(data.value);
+    await stream.close();
+  }
+
+  async function open(_options: UseFileSystemAccessCommonOptions = {}): Promise<void> {
+    if (!isSupported.value || !fsWindow)
+      return;
+
+    try {
+      const [handle] = await fsWindow.showOpenFilePicker({ ...pickerDefaults(), ..._options });
+      if (!handle)
+        return;
+      fileHandle.value = handle;
+      await updateData();
+    }
+    catch (error) {
+      onError(error);
+    }
+  }
+
+  async function create(_options: UseFileSystemAccessShowSaveFileOptions = {}): Promise<void> {
+    if (!isSupported.value || !fsWindow)
+      return;
+
+    try {
+      fileHandle.value = await fsWindow.showSaveFilePicker({ ...pickerDefaults(), ..._options });
+      data.value = undefined;
+      await updateData();
+    }
+    catch (error) {
+      onError(error);
+    }
+  }
+
+  async function saveAs(_options: UseFileSystemAccessShowSaveFileOptions = {}): Promise<void> {
+    if (!isSupported.value || !fsWindow)
+      return;
+
+    try {
+      fileHandle.value = await fsWindow.showSaveFilePicker({ ...pickerDefaults(), ..._options });
+      await writeData();
+      await updateFile();
+    }
+    catch (error) {
+      onError(error);
+    }
+  }
+
+  async function save(_options: UseFileSystemAccessShowSaveFileOptions = {}): Promise<void> {
+    if (!isSupported.value)
+      return;
+
+    if (!fileHandle.value)
+      return saveAs(_options);
+
+    try {
+      await writeData();
+      await updateFile();
+    }
+    catch (error) {
+      onError(error);
+    }
+  }
+
+  // Re-read with the new strategy whenever `dataType` changes; skip the redundant
+  // initial run since nothing is open yet.
+  watch(() => toValue(dataType), () => {
+    if (fileHandle.value)
+      void updateData();
+  });
+
+  return {
+    isSupported,
+    data,
+    file,
+    fileName,
+    fileMIME,
+    fileSize,
+    fileLastModified,
+    open,
+    create,
+    save,
+    saveAs,
+    updateData,
+  };
+}
diff --git a/vue/toolkit/src/composables/browser/useFullscreen/demo.vue b/vue/toolkit/src/composables/browser/useFullscreen/demo.vue
new file mode 100644
index 0000000..2e8bd21
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useFullscreen/demo.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { useTemplateRef } from 'vue';
+import { useFullscreen } from './index';
+
+const target = useTemplateRef<HTMLElement>('target');
+const { isSupported, isFullscreen, enter, exit, toggle } = useFullscreen(target);
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      v-if="!isSupported"
+      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-center text-sm text-amber-600 dark:text-amber-400"
+    >
+      The Fullscreen API is not supported in this browser.
+    </div>
+
+    <div
+      ref="target"
+      class="relative flex h-44 flex-col items-center justify-center gap-3 overflow-hidden rounded-xl border border-(--border) bg-(--bg-elevated) transition-colors"
+      :class="isFullscreen && 'bg-(--bg-inset)'"
+    >
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+        :class="isFullscreen
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        <span class="size-1.5 rounded-full" :class="isFullscreen ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+        {{ isFullscreen ? 'Fullscreen' : 'Windowed' }}
+      </span>
+
+      <p class="px-6 text-center text-sm text-(--fg-muted)">
+        This panel becomes the fullscreen target. Press
+        <kbd class="rounded border border-(--border) bg-(--bg) px-1.5 py-0.5 font-mono text-xs text-(--fg)">Esc</kbd>
+        to leave.
+      </p>
+
+      <button
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="!isSupported"
+        @click="toggle"
+      >
+        <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <template v-if="isFullscreen">
+            <path d="M8 3v3a2 2 0 0 1-2 2H3" /><path d="M21 8h-3a2 2 0 0 1-2-2V3" /><path d="M3 16h3a2 2 0 0 1 2 2v3" /><path d="M16 21v-3a2 2 0 0 1 2-2h3" />
+          </template>
+          <template v-else>
+            <path d="M8 3H5a2 2 0 0 0-2 2v3" /><path d="M21 8V5a2 2 0 0 0-2-2h-3" /><path d="M3 16v3a2 2 0 0 0 2 2h3" /><path d="M16 21h3a2 2 0 0 0 2-2v-3" />
+          </template>
+        </svg>
+        {{ isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen' }}
+      </button>
+    </div>
+
+    <div class="flex gap-2">
+      <button
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="!isSupported || isFullscreen"
+        @click="enter"
+      >
+        Enter
+      </button>
+      <button
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="!isSupported || !isFullscreen"
+        @click="exit"
+      >
+        Exit
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useFullscreen/index.test.ts b/vue/toolkit/src/composables/browser/useFullscreen/index.test.ts
new file mode 100644
index 0000000..08e4f5f
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useFullscreen/index.test.ts
@@ -0,0 +1,311 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, shallowRef } from 'vue';
+import { useFullscreen } from '.';
+
+type Listener = (ev: Event) => void;
+
+interface FakeEl {
+  requestFullscreen: ReturnType<typeof vi.fn>;
+  addEventListener: ReturnType<typeof vi.fn>;
+  removeEventListener: ReturnType<typeof vi.fn>;
+}
+
+interface FakeDoc {
+  documentElement: FakeEl;
+  exitFullscreen: ReturnType<typeof vi.fn>;
+  fullscreenElement: Element | null;
+  fullScreen: boolean;
+  addEventListener: (event: string, cb: Listener) => void;
+  removeEventListener: (event: string, cb: Listener) => void;
+  dispatch: (event: string) => void;
+}
+
+function createFakeElement(): FakeEl {
+  return {
+    requestFullscreen: vi.fn(async () => {}),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+  };
+}
+
+function createFakeDocument(el?: FakeEl): FakeDoc {
+  const listeners = new Map<string, Set<Listener>>();
+  const documentElement = el ?? createFakeElement();
+
+  const doc: FakeDoc = {
+    documentElement,
+    exitFullscreen: vi.fn(async () => {}),
+    fullscreenElement: null,
+    fullScreen: false,
+    addEventListener(event, cb) {
+      if (!listeners.has(event))
+        listeners.set(event, new Set());
+      listeners.get(event)!.add(cb);
+    },
+    removeEventListener(event, cb) {
+      listeners.get(event)?.delete(cb);
+    },
+    dispatch(event) {
+      listeners.get(event)?.forEach(cb => cb(new Event(event)));
+    },
+  };
+
+  return doc;
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe(useFullscreen, () => {
+  it('reports support when request/exit/flag methods exist', () => {
+    const document = createFakeDocument();
+    const scope = effectScope();
+    let fs: ReturnType<typeof useFullscreen>;
+    scope.run(() => {
+      fs = useFullscreen(undefined, { document: document as unknown as Document });
+    });
+    expect(fs!.isSupported.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('is not supported when the Fullscreen API is absent (SSR/unsupported)', () => {
+    const document = {
+      documentElement: { addEventListener: vi.fn(), removeEventListener: vi.fn() },
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    } as unknown as Document;
+    const scope = effectScope();
+    let fs: ReturnType<typeof useFullscreen>;
+    scope.run(() => {
+      fs = useFullscreen(undefined, { document });
+    });
+    expect(fs!.isSupported.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('is not supported when no document is available (SSR)', () => {
+    const scope = effectScope();
+    let fs: ReturnType<typeof useFullscreen>;
+    // No document and no defaultDocument in jsdom-less branch — pass an explicit undefined.
+    scope.run(() => {
+      fs = useFullscreen(undefined, { document: undefined });
+    });
+    expect(fs!.isSupported.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('starts not fullscreen', () => {
+    const document = createFakeDocument();
+    const scope = effectScope();
+    let fs: ReturnType<typeof useFullscreen>;
+    scope.run(() => {
+      fs = useFullscreen(undefined, { document: document as unknown as Document });
+    });
+    expect(fs!.isFullscreen.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('enter() requests fullscreen on the target element and sets the flag', async () => {
+    const el = createFakeElement();
+    const document = createFakeDocument(el);
+    const scope = effectScope();
+    let fs: ReturnType<typeof useFullscreen>;
+    scope.run(() => {
+      fs = useFullscreen(undefined, { document: document as unknown as Document });
+    });
+
+    await fs!.enter();
+    expect(el.requestFullscreen).toHaveBeenCalledTimes(1);
+    expect(fs!.isFullscreen.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('enter() requests fullscreen on a provided target element', async () => {
+    const target = createFakeElement();
+    const document = createFakeDocument();
+    const scope = effectScope();
+    let fs: ReturnType<typeof useFullscreen>;
+    scope.run(() => {
+      fs = useFullscreen(target as unknown as HTMLElement, { document: document as unknown as Document });
+    });
+
+    await fs!.enter();
+    expect(target.requestFullscreen).toHaveBeenCalledTimes(1);
+    expect(document.documentElement.requestFullscreen).not.toHaveBeenCalled();
+    expect(fs!.isFullscreen.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('enter() is a no-op when already fullscreen', async () => {
+    const el = createFakeElement();
+    const document = createFakeDocument(el);
+    const scope = effectScope();
+    let fs: ReturnType<typeof useFullscreen>;
+    scope.run(() => {
+      fs = useFullscreen(undefined, { document: document as unknown as Document });
+    });
+
+    await fs!.enter();
+    el.requestFullscreen.mockClear();
+    await fs!.enter();
+    expect(el.requestFullscreen).not.toHaveBeenCalled();
+    scope.stop();
+  });
+
+  it('exit() calls exitFullscreen and clears the flag', async () => {
+    const el = createFakeElement();
+    const document = createFakeDocument(el);
+    const scope = effectScope();
+    let fs: ReturnType<typeof useFullscreen>;
+    scope.run(() => {
+      fs = useFullscreen(undefined, { document: document as unknown as Document });
+    });
+
+    await fs!.enter();
+    await fs!.exit();
+    expect(document.exitFullscreen).toHaveBeenCalledTimes(1);
+    expect(fs!.isFullscreen.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('exit() is a no-op when not fullscreen', async () => {
+    const document = createFakeDocument();
+    const scope = effectScope();
+    let fs: ReturnType<typeof useFullscreen>;
+    scope.run(() => {
+      fs = useFullscreen(undefined, { document: document as unknown as Document });
+    });
+
+    await fs!.exit();
+    expect(document.exitFullscreen).not.toHaveBeenCalled();
+    scope.stop();
+  });
+
+  it('toggle() flips between enter and exit', async () => {
+    const el = createFakeElement();
+    const document = createFakeDocument(el);
+    const scope = effectScope();
+    let fs: ReturnType<typeof useFullscreen>;
+    scope.run(() => {
+      fs = useFullscreen(undefined, { document: document as unknown as Document });
+    });
+
+    await fs!.toggle();
+    expect(fs!.isFullscreen.value).toBeTruthy();
+    expect(el.requestFullscreen).toHaveBeenCalledTimes(1);
+
+    await fs!.toggle();
+    expect(fs!.isFullscreen.value).toBeFalsy();
+    expect(document.exitFullscreen).toHaveBeenCalledTimes(1);
+    scope.stop();
+  });
+
+  it('does nothing when unsupported', async () => {
+    const document = {
+      documentElement: { addEventListener: vi.fn(), removeEventListener: vi.fn() },
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    } as unknown as Document;
+    const scope = effectScope();
+    let fs: ReturnType<typeof useFullscreen>;
+    scope.run(() => {
+      fs = useFullscreen(undefined, { document });
+    });
+
+    await fs!.enter();
+    expect(fs!.isFullscreen.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('syncs isFullscreen to true on fullscreenchange when our element is the fullscreen element', async () => {
+    const document = createFakeDocument();
+    const scope = effectScope();
+    let fs: ReturnType<typeof useFullscreen>;
+    scope.run(() => {
+      fs = useFullscreen(undefined, { document: document as unknown as Document });
+    });
+
+    // Simulate the browser entering fullscreen for the document element.
+    document.fullScreen = true;
+    document.fullscreenElement = document.documentElement as unknown as Element;
+    document.dispatch('fullscreenchange');
+    await nextTick();
+
+    expect(fs!.isFullscreen.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('syncs isFullscreen to false on fullscreenchange when fullscreen ends', async () => {
+    const el = createFakeElement();
+    const document = createFakeDocument(el);
+    const scope = effectScope();
+    let fs: ReturnType<typeof useFullscreen>;
+    scope.run(() => {
+      fs = useFullscreen(undefined, { document: document as unknown as Document });
+    });
+
+    await fs!.enter();
+    expect(fs!.isFullscreen.value).toBeTruthy();
+
+    // Browser exits fullscreen (e.g. user pressed Escape).
+    document.fullScreen = false;
+    document.fullscreenElement = null;
+    document.dispatch('fullscreenchange');
+    await nextTick();
+
+    expect(fs!.isFullscreen.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('resolves the target from a getter ref', async () => {
+    const target = createFakeElement();
+    const elRef = shallowRef<FakeEl | null>(null);
+    const document = createFakeDocument();
+    const scope = effectScope();
+    let fs: ReturnType<typeof useFullscreen>;
+    scope.run(() => {
+      fs = useFullscreen(() => elRef.value as unknown as HTMLElement, { document: document as unknown as Document });
+    });
+
+    elRef.value = target;
+    await nextTick();
+
+    await fs!.enter();
+    expect(target.requestFullscreen).toHaveBeenCalledTimes(1);
+    scope.stop();
+  });
+
+  it('autoExit exits fullscreen when the scope is disposed', async () => {
+    const el = createFakeElement();
+    const document = createFakeDocument(el);
+    const scope = effectScope();
+    let fs: ReturnType<typeof useFullscreen>;
+    scope.run(() => {
+      fs = useFullscreen(undefined, { document: document as unknown as Document, autoExit: true });
+    });
+
+    await fs!.enter();
+    expect(fs!.isFullscreen.value).toBeTruthy();
+
+    scope.stop();
+    // onScopeDispose triggers exit() (fire-and-forget); allow the microtask to flush.
+    await Promise.resolve();
+    expect(document.exitFullscreen).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not autoExit by default', async () => {
+    const el = createFakeElement();
+    const document = createFakeDocument(el);
+    const scope = effectScope();
+    let fs: ReturnType<typeof useFullscreen>;
+    scope.run(() => {
+      fs = useFullscreen(undefined, { document: document as unknown as Document });
+    });
+
+    await fs!.enter();
+    scope.stop();
+    await Promise.resolve();
+    expect(document.exitFullscreen).not.toHaveBeenCalled();
+  });
+});
diff --git a/vue/toolkit/src/composables/browser/useFullscreen/index.ts b/vue/toolkit/src/composables/browser/useFullscreen/index.ts
new file mode 100644
index 0000000..b7dfd8b
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useFullscreen/index.ts
@@ -0,0 +1,231 @@
+import { computed, shallowRef } from 'vue';
+import type { ComputedRef, ShallowRef } from 'vue';
+import { isFunction } from '@robonen/stdlib';
+import type { ConfigurableDocument } from '@/types';
+import { defaultDocument } from '@/types';
+import type { MaybeComputedElementRef } from '@/composables/component/unrefElement';
+import { unrefElement } from '@/composables/component/unrefElement';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import { useSupported } from '@/composables/utilities/useSupported';
+import { tryOnMounted } from '@/composables/lifecycle/tryOnMounted';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+
+export interface UseFullscreenOptions extends ConfigurableDocument {
+  /**
+   * Automatically exit fullscreen when the component is unmounted
+   *
+   * @default false
+   */
+  autoExit?: boolean;
+}
+
+export interface UseFullscreenReturn {
+  /**
+   * Whether the Fullscreen API is supported for the target element
+   */
+  isSupported: ComputedRef<boolean>;
+  /**
+   * Whether the target element is currently in fullscreen mode
+   */
+  isFullscreen: ShallowRef<boolean>;
+  /**
+   * Request fullscreen mode for the target element
+   */
+  enter: () => Promise<void>;
+  /**
+   * Exit fullscreen mode
+   */
+  exit: () => Promise<void>;
+  /**
+   * Toggle fullscreen mode for the target element
+   */
+  toggle: () => Promise<void>;
+}
+
+// Vendor-prefixed `fullscreenchange` event names across engines.
+const eventHandlers = [
+  'fullscreenchange',
+  'webkitfullscreenchange',
+  'webkitendfullscreen',
+  'mozfullscreenchange',
+  'MSFullscreenChange',
+] as unknown as Array<'fullscreenchange'>;
+
+const requestMethods = [
+  'requestFullscreen',
+  'webkitRequestFullscreen',
+  'webkitEnterFullscreen',
+  'webkitEnterFullScreen',
+  'webkitRequestFullScreen',
+  'mozRequestFullScreen',
+  'msRequestFullscreen',
+] as const;
+
+const exitMethods = [
+  'exitFullscreen',
+  'webkitExitFullscreen',
+  'webkitExitFullScreen',
+  'webkitCancelFullScreen',
+  'mozCancelFullScreen',
+  'msExitFullscreen',
+] as const;
+
+const fullscreenFlags = [
+  'fullScreen',
+  'webkitIsFullScreen',
+  'webkitDisplayingFullscreen',
+  'mozFullScreen',
+  'msFullscreenElement',
+] as const;
+
+const fullscreenElements = [
+  'fullscreenElement',
+  'webkitFullscreenElement',
+  'mozFullScreenElement',
+  'msFullscreenElement',
+] as const;
+
+const listenerOptions = { capture: false, passive: true } as const;
+
+/**
+ * @name useFullscreen
+ * @category Browser
+ * @description Reactive Fullscreen API for an element (or the document element).
+ * Handles vendor-prefixed fallbacks for request/exit/state detection and syncs
+ * `isFullscreen` from `fullscreenchange` events. SSR-safe.
+ *
+ * @param {MaybeComputedElementRef} [target] Element to display fullscreen (ref, getter, or component instance). Defaults to `document.documentElement`
+ * @param {UseFullscreenOptions} [options={}] Options (`document`, `autoExit`)
+ * @returns {UseFullscreenReturn} `{ isSupported, isFullscreen, enter, exit, toggle }`
+ *
+ * @example
+ * const el = useTemplateRef('el');
+ * const { isFullscreen, enter, exit, toggle } = useFullscreen(el);
+ *
+ * @example
+ * // Fullscreen the whole page
+ * const { toggle } = useFullscreen();
+ *
+ * @since 0.0.15
+ */
+export function useFullscreen(
+  target?: MaybeComputedElementRef,
+  options: UseFullscreenOptions = {},
+): UseFullscreenReturn {
+  const {
+    document = defaultDocument,
+    autoExit = false,
+  } = options;
+
+  const targetRef = computed(() => unrefElement(target) ?? document?.documentElement);
+  const isFullscreen = shallowRef(false);
+
+  const has = (method: string): boolean =>
+    Boolean((document && method in document) || (targetRef.value && method in targetRef.value));
+
+  const requestMethod = computed<typeof requestMethods[number] | undefined>(
+    () => requestMethods.find(has),
+  );
+
+  const exitMethod = computed<typeof exitMethods[number] | undefined>(
+    () => exitMethods.find(has),
+  );
+
+  const fullscreenFlag = computed<typeof fullscreenFlags[number] | undefined>(
+    () => fullscreenFlags.find(has),
+  );
+
+  const fullscreenElementMethod = fullscreenElements.find(m => document && m in document);
+
+  const isSupported = useSupported(() =>
+    targetRef.value
+    && document
+    && requestMethod.value !== undefined
+    && exitMethod.value !== undefined
+    && fullscreenFlag.value !== undefined);
+
+  const isCurrentElementFullScreen = (): boolean => {
+    if (fullscreenElementMethod)
+      return (document as any)?.[fullscreenElementMethod] === targetRef.value;
+    return false;
+  };
+
+  const isElementFullScreen = (): boolean => {
+    const flag = fullscreenFlag.value;
+    if (!flag)
+      return false;
+
+    const docFlag = document && (document as any)[flag];
+    if (docFlag !== null && docFlag !== undefined)
+      return Boolean(docFlag);
+
+    // Fallback for WebKit / iOS Safari, where the flag lives on the element itself.
+    const elFlag = (targetRef.value as any)?.[flag];
+    if (elFlag !== null && elFlag !== undefined)
+      return Boolean(elFlag);
+
+    return false;
+  };
+
+  async function exit(): Promise<void> {
+    if (!isSupported.value || !isFullscreen.value)
+      return;
+
+    const method = exitMethod.value;
+    if (method) {
+      if (typeof (document as any)?.[method] === 'function')
+        await (document as any)[method]();
+      else {
+        // Fallback for Safari iOS, where exit lives on the element.
+        const el = targetRef.value as any;
+        if (isFunction(el?.[method]))
+          await el[method]();
+      }
+    }
+
+    isFullscreen.value = false;
+  }
+
+  async function enter(): Promise<void> {
+    if (!isSupported.value || isFullscreen.value)
+      return;
+
+    if (isElementFullScreen())
+      await exit();
+
+    const el = targetRef.value as any;
+    const method = requestMethod.value;
+    if (method && isFunction(el?.[method])) {
+      await el[method]();
+      isFullscreen.value = true;
+    }
+  }
+
+  async function toggle(): Promise<void> {
+    await (isFullscreen.value ? exit() : enter());
+  }
+
+  const handlerCallback = (): void => {
+    const elementFullScreen = isElementFullScreen();
+    // Only sync to `false`, or to `true` when *our* element is the fullscreen one,
+    // so multiple instances on the page don't clobber each other.
+    if (!elementFullScreen || (elementFullScreen && isCurrentElementFullScreen()))
+      isFullscreen.value = elementFullScreen;
+  };
+
+  useEventListener(document, eventHandlers, handlerCallback, listenerOptions);
+  useEventListener(() => targetRef.value, eventHandlers, handlerCallback, listenerOptions);
+
+  tryOnMounted(handlerCallback, { sync: false });
+
+  if (autoExit)
+    tryOnScopeDispose(exit);
+
+  return {
+    isSupported,
+    isFullscreen,
+    enter,
+    exit,
+    toggle,
+  };
+}
diff --git a/vue/toolkit/src/composables/browser/useImage/demo.vue b/vue/toolkit/src/composables/browser/useImage/demo.vue
new file mode 100644
index 0000000..d73c318
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useImage/demo.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useImage } from './index';
+
+const samples = [
+  { label: 'Mountains', src: 'https://picsum.photos/id/1018/640/400' },
+  { label: 'Forest', src: 'https://picsum.photos/id/1015/640/400' },
+  { label: 'Broken URL', src: 'https://picsum.photos/this-image-does-not-exist.jpg' },
+];
+
+const current = ref(0);
+const src = computed(() => samples[current.value]!.src);
+
+// Reactive getter source: useImage reloads whenever `src` changes.
+const { isLoading, isReady, error, state, execute } = useImage(
+  () => ({ src: src.value, alt: samples[current.value]!.label }),
+);
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex flex-wrap gap-2">
+      <button
+        v-for="(sample, index) in samples"
+        :key="sample.src"
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+        :class="current === index
+          ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
+          : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+        @click="current = index"
+      >
+        {{ sample.label }}
+      </button>
+    </div>
+
+    <div class="relative aspect-[8/5] w-full overflow-hidden rounded-xl border border-(--border) bg-(--bg-inset)">
+      <Transition
+        enter-active-class="transition duration-300"
+        enter-from-class="opacity-0 scale-[1.02]"
+        leave-active-class="transition duration-200"
+        leave-to-class="opacity-0"
+      >
+        <img
+          v-if="isReady && state"
+          :key="src"
+          :src="state.src"
+          :alt="state.alt"
+          class="h-full w-full object-cover"
+        >
+        <div
+          v-else-if="error"
+          class="absolute inset-0 flex flex-col items-center justify-center gap-2 p-4 text-center"
+        >
+          <span class="text-2xl">⚠️</span>
+          <p class="text-sm font-medium text-red-600 dark:text-red-400">
+            Failed to load image
+          </p>
+        </div>
+        <div
+          v-else
+          class="absolute inset-0 flex flex-col items-center justify-center gap-3"
+        >
+          <span class="h-7 w-7 animate-spin rounded-full border-2 border-(--border-strong) border-t-(--accent)" />
+          <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+            Loading…
+          </p>
+        </div>
+      </Transition>
+    </div>
+
+    <div class="flex items-center justify-between gap-3">
+      <div class="flex items-center gap-2">
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+          :class="isLoading
+            ? 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'
+            : isReady
+              ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+              : 'border-red-500/30 bg-red-500/10 text-red-600 dark:text-red-400'"
+        >
+          {{ isLoading ? 'loading' : isReady ? 'ready' : 'error' }}
+        </span>
+        <span
+          v-if="isReady && state"
+          class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted) tabular-nums"
+        >
+          {{ state.naturalWidth }}×{{ state.naturalHeight }}
+        </span>
+      </div>
+
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="isLoading"
+        @click="execute()"
+      >
+        Reload
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useImage/index.test.ts b/vue/toolkit/src/composables/browser/useImage/index.test.ts
new file mode 100644
index 0000000..712a690
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useImage/index.test.ts
@@ -0,0 +1,254 @@
+import { effectScope, nextTick, ref } from 'vue';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { useImage } from '.';
+
+interface FakeImage {
+  src: string;
+  srcset: string;
+  sizes: string;
+  alt: string;
+  className: string;
+  loading: string;
+  crossOrigin: string | null;
+  referrerPolicy: string;
+  width: number;
+  height: number;
+  decoding: string;
+  fetchPriority: string;
+  isMap: boolean;
+  useMap: string;
+  onload: (() => void) | null;
+  onerror: ((err: unknown) => void) | null;
+}
+
+let lastImage: FakeImage | undefined;
+// Decides whether the next constructed image "loads" or "errors".
+let shouldFail = false;
+
+function createImage(): FakeImage {
+  const img: FakeImage = {
+    src: '',
+    srcset: '',
+    sizes: '',
+    alt: '',
+    className: '',
+    loading: '',
+    crossOrigin: null,
+    referrerPolicy: '',
+    width: 0,
+    height: 0,
+    decoding: '',
+    fetchPriority: '',
+    isMap: false,
+    useMap: '',
+    onload: null,
+    onerror: null,
+  };
+
+  lastImage = img;
+
+  // Mimic the browser firing load/error asynchronously after src is set.
+  queueMicrotask(() => {
+    if (shouldFail)
+      img.onerror?.(new Error('load-error'));
+    else
+      img.onload?.();
+  });
+
+  return img;
+}
+
+function createFakeWindow(): Window {
+  const Image = function Image(): FakeImage {
+    return createImage();
+  } as unknown as new () => HTMLImageElement;
+
+  return { Image } as unknown as Window;
+}
+
+describe(useImage, () => {
+  let window: Window;
+
+  beforeEach(() => {
+    lastImage = undefined;
+    shouldFail = false;
+    window = createFakeWindow();
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it('loads an image and exposes the element as state', async () => {
+    const scope = effectScope();
+    let result!: ReturnType<typeof useImage>;
+    scope.run(() => {
+      result = useImage({ src: '/cat.png' }, { window });
+    });
+
+    expect(result.isLoading.value).toBeTruthy();
+    expect(result.isReady.value).toBeFalsy();
+    expect(result.error.value).toBe(null);
+
+    await nextTick();
+    await nextTick();
+
+    expect(result.isLoading.value).toBeFalsy();
+    expect(result.isReady.value).toBeTruthy();
+    expect(result.error.value).toBe(null);
+    expect(result.state.value).toBe(lastImage);
+    expect(lastImage?.src).toBe('/cat.png');
+
+    scope.stop();
+  });
+
+  it('applies the provided image attributes', async () => {
+    const scope = effectScope();
+    scope.run(() => {
+      useImage(
+        {
+          src: '/cat.png',
+          srcset: '/cat-2x.png 2x',
+          sizes: '100vw',
+          alt: 'a cat',
+          class: 'rounded',
+          loading: 'lazy',
+          crossorigin: 'anonymous',
+          referrerPolicy: 'no-referrer',
+          width: 320,
+          height: 240,
+          decoding: 'async',
+          fetchPriority: 'high',
+          ismap: true,
+          usemap: '#map',
+        },
+        { window },
+      );
+    });
+
+    await nextTick();
+    await nextTick();
+
+    expect(lastImage).toBeDefined();
+    expect(lastImage!.src).toBe('/cat.png');
+    expect(lastImage!.srcset).toBe('/cat-2x.png 2x');
+    expect(lastImage!.sizes).toBe('100vw');
+    expect(lastImage!.alt).toBe('a cat');
+    expect(lastImage!.className).toBe('rounded');
+    expect(lastImage!.loading).toBe('lazy');
+    expect(lastImage!.crossOrigin).toBe('anonymous');
+    expect(lastImage!.referrerPolicy).toBe('no-referrer');
+    expect(lastImage!.width).toBe(320);
+    expect(lastImage!.height).toBe(240);
+    expect(lastImage!.decoding).toBe('async');
+    expect(lastImage!.fetchPriority).toBe('high');
+    expect(lastImage!.isMap).toBeTruthy();
+    expect(lastImage!.useMap).toBe('#map');
+
+    scope.stop();
+  });
+
+  it('captures load errors', async () => {
+    shouldFail = true;
+
+    const scope = effectScope();
+    let result!: ReturnType<typeof useImage>;
+    scope.run(() => {
+      result = useImage({ src: '/missing.png' }, { window });
+    });
+
+    await nextTick();
+    await nextTick();
+
+    expect(result.isLoading.value).toBeFalsy();
+    expect(result.isReady.value).toBeFalsy();
+    expect(result.error.value).toBeInstanceOf(Error);
+    expect(result.state.value).toBe(undefined);
+
+    scope.stop();
+  });
+
+  it('reloads when a reactive source changes', async () => {
+    const src = ref('/a.png');
+
+    const scope = effectScope();
+    let result!: ReturnType<typeof useImage>;
+    scope.run(() => {
+      result = useImage(() => ({ src: src.value }), { window });
+    });
+
+    await nextTick();
+    await nextTick();
+    expect(lastImage?.src).toBe('/a.png');
+    expect(result.isReady.value).toBeTruthy();
+
+    src.value = '/b.png';
+    await nextTick();
+
+    // resetOnExecute clears state and flips loading back on
+    expect(result.isLoading.value).toBeTruthy();
+    expect(result.state.value).toBe(undefined);
+
+    await nextTick();
+    await nextTick();
+    expect(lastImage?.src).toBe('/b.png');
+    expect(result.isReady.value).toBeTruthy();
+
+    scope.stop();
+  });
+
+  it('does not set up a watcher for a plain options object', async () => {
+    const watchSpy = vi.fn();
+    const scope = effectScope();
+    scope.run(() => {
+      const result = useImage({ src: '/static.png' }, { window });
+      // execute is the only thing a reload would call; spy after initial run
+      result.execute = watchSpy;
+    });
+
+    await nextTick();
+    await nextTick();
+
+    expect(watchSpy).not.toHaveBeenCalled();
+
+    scope.stop();
+  });
+
+  it('does not call execute immediately when immediate is false', async () => {
+    const scope = effectScope();
+    let result!: ReturnType<typeof useImage>;
+    scope.run(() => {
+      result = useImage({ src: '/cat.png' }, { window, immediate: false });
+    });
+
+    expect(result.isLoading.value).toBeFalsy();
+    expect(lastImage).toBeUndefined();
+
+    await result.execute();
+    expect(lastImage?.src).toBe('/cat.png');
+    expect(result.isReady.value).toBeTruthy();
+
+    scope.stop();
+  });
+
+  it('rejects when no Image constructor is available (SSR path)', async () => {
+    const onError = vi.fn();
+    // A window without an Image constructor stands in for a non-DOM environment.
+    const ssrWindow = {} as unknown as Window;
+
+    const scope = effectScope();
+    let result!: ReturnType<typeof useImage>;
+    scope.run(() => {
+      result = useImage({ src: '/cat.png' }, { window: ssrWindow, onError });
+    });
+
+    await nextTick();
+    await nextTick();
+
+    expect(result.isReady.value).toBeFalsy();
+    expect(result.error.value).toBeInstanceOf(Error);
+    expect(onError).toHaveBeenCalledTimes(1);
+
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/browser/useImage/index.ts b/vue/toolkit/src/composables/browser/useImage/index.ts
new file mode 100644
index 0000000..487c875
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useImage/index.ts
@@ -0,0 +1,144 @@
+import { isRef, toValue, watch } from 'vue';
+import type { MaybeRefOrGetter } from 'vue';
+import { isFunction } from '@robonen/stdlib';
+import { defaultWindow } from '@/types';
+import type { ConfigurableWindow } from '@/types';
+import { useAsyncState } from '@/composables/state/useAsyncState';
+import type { UseAsyncStateOptions, UseAsyncStateReturn } from '@/composables/state/useAsyncState';
+
+export interface UseImageOptions {
+  /** Address of the resource */
+  src: string;
+  /** Images to use in different situations, e.g. high-resolution displays, small monitors, etc. */
+  srcset?: string;
+  /** Image sizes for different page layouts */
+  sizes?: string;
+  /** Image alternative information */
+  alt?: string;
+  /** Image classes */
+  class?: string;
+  /** Image loading strategy */
+  loading?: HTMLImageElement['loading'];
+  /** Image CORS settings */
+  crossorigin?: string;
+  /** Referrer policy for fetch — https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy */
+  referrerPolicy?: HTMLImageElement['referrerPolicy'];
+  /** Image width */
+  width?: HTMLImageElement['width'];
+  /** Image height */
+  height?: HTMLImageElement['height'];
+  /** Image decoding hint — https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#decoding */
+  decoding?: HTMLImageElement['decoding'];
+  /** Relative priority hint for fetching the image */
+  fetchPriority?: HTMLImageElement['fetchPriority'];
+  /** Whether the image is a server-side image map */
+  ismap?: HTMLImageElement['isMap'];
+  /** Partial URL (starting with #) of an image map associated with the element */
+  usemap?: HTMLImageElement['useMap'];
+}
+
+export interface UseImageAsyncStateOptions
+  extends UseAsyncStateOptions<true, HTMLImageElement | undefined>, ConfigurableWindow {}
+
+export type UseImageReturn = UseAsyncStateReturn<HTMLImageElement | undefined, any[], true>;
+
+interface LoadImageContext {
+  window?: Window;
+}
+
+function loadImage(options: UseImageOptions, ctx: LoadImageContext): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    // `Image` is a global constructor on `typeof globalThis`, not the `Window` interface.
+    const ImageCtor = (ctx.window as (Window & typeof globalThis) | undefined)?.Image;
+
+    if (!ImageCtor) {
+      reject(new Error('useImage: no Image constructor available (are you running on the server?)'));
+      return;
+    }
+
+    const img = new ImageCtor();
+    const {
+      src,
+      srcset,
+      sizes,
+      alt,
+      class: className,
+      loading,
+      crossorigin,
+      referrerPolicy,
+      width,
+      height,
+      decoding,
+      fetchPriority,
+      ismap,
+      usemap,
+    } = options;
+
+    if (alt !== undefined) img.alt = alt;
+    if (className !== undefined) img.className = className;
+    if (loading !== undefined) img.loading = loading;
+    if (crossorigin !== undefined) img.crossOrigin = crossorigin;
+    if (referrerPolicy !== undefined) img.referrerPolicy = referrerPolicy;
+    if (width !== undefined) img.width = width;
+    if (height !== undefined) img.height = height;
+    if (decoding !== undefined) img.decoding = decoding;
+    if (fetchPriority !== undefined) img.fetchPriority = fetchPriority;
+    if (ismap !== undefined) img.isMap = ismap;
+    if (usemap !== undefined) img.useMap = usemap;
+
+    // Setting srcset/sizes before src lets the browser pick the right candidate up-front.
+    if (sizes !== undefined) img.sizes = sizes;
+    if (srcset !== undefined) img.srcset = srcset;
+    img.src = src;
+
+    img.onload = () => resolve(img);
+    img.onerror = reject;
+  });
+}
+
+/**
+ * @name useImage
+ * @category Browser
+ * @description Reactively load an image in the browser; await the result to render it or show a fallback.
+ *
+ * @param {MaybeRefOrGetter<UseImageOptions>} options Image attributes (as used on the `<img>` tag); pass a ref/getter to reload reactively
+ * @param {UseImageAsyncStateOptions} [asyncStateOptions={}] `useAsyncState` options (`delay`, `immediate`, `onError`, …) plus a configurable `window`
+ * @returns {UseImageReturn} `useAsyncState`-shaped `{ isLoading, isReady, error, state, execute, … }` for an `HTMLImageElement`
+ *
+ * @example
+ * const { isLoading, error, state: image } = useImage({ src: '/cat.png' });
+ *
+ * @example
+ * // Reactive source: reloads whenever `src` changes
+ * const src = ref('/a.png');
+ * const { state } = useImage(() => ({ src: src.value, alt: 'photo' }));
+ *
+ * @since 0.0.15
+ */
+export function useImage(
+  options: MaybeRefOrGetter<UseImageOptions>,
+  asyncStateOptions: UseImageAsyncStateOptions = {},
+): UseImageReturn {
+  const { window = defaultWindow, ...stateOptions } = asyncStateOptions;
+
+  const state = useAsyncState<HTMLImageElement | undefined>(
+    () => loadImage(toValue(options), { window }),
+    undefined,
+    {
+      resetOnExecute: true,
+      ...stateOptions,
+    },
+  );
+
+  // A plain (non-ref, non-getter) options object can never change, so we skip
+  // the watcher entirely — no needless deep traversal on every tick.
+  if (isRef(options) || isFunction(options)) {
+    watch(
+      () => toValue(options),
+      () => state.execute(stateOptions.delay),
+      { deep: true },
+    );
+  }
+
+  return state;
+}
diff --git a/vue/toolkit/src/composables/browser/useLocalFonts/demo.vue b/vue/toolkit/src/composables/browser/useLocalFonts/demo.vue
new file mode 100644
index 0000000..3000cfa
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useLocalFonts/demo.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useLocalFonts } from './index';
+
+const { isSupported, fonts, error, query } = useLocalFonts();
+
+const loading = ref(false);
+const filter = ref('');
+
+async function pickFonts() {
+  loading.value = true;
+  try {
+    await query();
+  }
+  finally {
+    loading.value = false;
+  }
+}
+
+const filtered = computed(() => {
+  const term = filter.value.trim().toLowerCase();
+  if (!term)
+    return fonts.value;
+  return fonts.value.filter(font => font.fullName.toLowerCase().includes(term));
+});
+
+// Unique families for the summary readout.
+const familyCount = computed(() => new Set(fonts.value.map(font => font.family)).size);
+
+// Render each face in its own font (quotes kept out of the template attribute).
+function familyStyle(name: string) {
+  return { fontFamily: `'${name}', sans-serif` };
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <div class="flex items-center justify-between gap-3">
+      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Local Font Access
+      </p>
+      <span
+        v-if="fonts.length"
+        class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted) tabular-nums"
+      >
+        {{ fonts.length }} faces · {{ familyCount }} families
+      </span>
+    </div>
+
+    <div
+      v-if="!isSupported"
+      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-700 dark:text-amber-300"
+    >
+      The Local Font Access API is not supported in this browser. Try a recent Chromium-based desktop browser.
+    </div>
+
+    <template v-else>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="loading"
+        @click="pickFonts"
+      >
+        {{ loading ? 'Requesting permission…' : fonts.length ? 'Re-query fonts' : 'Enumerate installed fonts' }}
+      </button>
+
+      <p
+        v-if="error"
+        class="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-sm text-red-600 dark:text-red-400"
+      >
+        Query failed — permission was likely denied.
+      </p>
+
+      <template v-if="fonts.length">
+        <input
+          v-model="filter"
+          type="search"
+          placeholder="Filter by name…"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+
+        <ul class="max-h-56 divide-y divide-(--border) overflow-y-auto rounded-xl border border-(--border) bg-(--bg-elevated)">
+          <li
+            v-for="font in filtered"
+            :key="font.postscriptName"
+            class="flex items-baseline justify-between gap-3 px-3 py-2"
+          >
+            <span
+              class="truncate text-base text-(--fg)"
+              :style="familyStyle(font.fullName)"
+            >
+              {{ font.fullName }}
+            </span>
+            <span class="shrink-0 font-mono text-xs text-(--fg-subtle)">
+              {{ font.style }}
+            </span>
+          </li>
+          <li
+            v-if="!filtered.length"
+            class="px-3 py-6 text-center text-sm text-(--fg-subtle)"
+          >
+            No fonts match "{{ filter }}"
+          </li>
+        </ul>
+      </template>
+
+      <p
+        v-else-if="!error && !loading"
+        class="rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-6 text-center text-sm text-(--fg-subtle)"
+      >
+        Click above to grant the <code class="font-mono">local-fonts</code> permission and list your fonts.
+      </p>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useLocalFonts/index.test.ts b/vue/toolkit/src/composables/browser/useLocalFonts/index.test.ts
new file mode 100644
index 0000000..5526917
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useLocalFonts/index.test.ts
@@ -0,0 +1,151 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { effectScope } from 'vue';
+import { useLocalFonts } from '.';
+import type { FontData, QueryLocalFontsOptions } from '.';
+
+function makeFont(overrides: Partial<FontData> = {}): FontData {
+  return {
+    postscriptName: 'Arial-BoldMT',
+    fullName: 'Arial Bold',
+    family: 'Arial',
+    style: 'Bold',
+    blob: async () => new Blob(),
+    ...overrides,
+  };
+}
+
+/**
+ * Build a fake `window` exposing `queryLocalFonts`. Passed through options so it
+ * reaches the import-time-captured `defaultWindow` substitute (see test gotcha).
+ */
+function createWindow(fonts: FontData[] = [makeFont()]) {
+  const queryLocalFonts = vi.fn(async (_options?: QueryLocalFontsOptions) => fonts);
+  const win = { queryLocalFonts } as unknown as Window & typeof globalThis;
+
+  return { window: win, queryLocalFonts };
+}
+
+describe(useLocalFonts, () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('reports supported when queryLocalFonts exists on window', () => {
+    const scope = effectScope();
+    const { window } = createWindow();
+
+    let result: ReturnType<typeof useLocalFonts>;
+    scope.run(() => {
+      result = useLocalFonts({ window });
+    });
+
+    expect(result!.isSupported.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('reports unsupported when the API is absent', () => {
+    const scope = effectScope();
+    const win = {} as unknown as Window & typeof globalThis;
+
+    let result: ReturnType<typeof useLocalFonts>;
+    scope.run(() => {
+      result = useLocalFonts({ window: win });
+    });
+
+    expect(result!.isSupported.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('is SSR safe when window is undefined', async () => {
+    const scope = effectScope();
+
+    let result: ReturnType<typeof useLocalFonts>;
+    scope.run(() => {
+      result = useLocalFonts({ window: undefined as unknown as Window });
+    });
+
+    expect(result!.isSupported.value).toBeFalsy();
+    await expect(result!.query()).resolves.toBeUndefined();
+    scope.stop();
+  });
+
+  it('defaults fonts to an empty array', () => {
+    const scope = effectScope();
+    const { window } = createWindow();
+
+    let result: ReturnType<typeof useLocalFonts>;
+    scope.run(() => {
+      result = useLocalFonts({ window });
+    });
+
+    expect(result!.fonts.value).toEqual([]);
+    scope.stop();
+  });
+
+  it('populates fonts and returns the list on a successful query', async () => {
+    const scope = effectScope();
+    const fonts = [makeFont(), makeFont({ postscriptName: 'Times', fullName: 'Times New Roman' })];
+    const { window, queryLocalFonts } = createWindow(fonts);
+
+    let result: ReturnType<typeof useLocalFonts>;
+    scope.run(() => {
+      result = useLocalFonts({ window });
+    });
+
+    const returned = await result!.query();
+
+    expect(queryLocalFonts).toHaveBeenCalledTimes(1);
+    expect(returned).toEqual(fonts);
+    expect(result!.fonts.value).toEqual(fonts);
+    scope.stop();
+  });
+
+  it('forwards query options to the native API', async () => {
+    const scope = effectScope();
+    const { window, queryLocalFonts } = createWindow();
+
+    let result: ReturnType<typeof useLocalFonts>;
+    scope.run(() => {
+      result = useLocalFonts({ window });
+    });
+
+    await result!.query({ postscriptNames: ['Arial-BoldMT'] });
+
+    expect(queryLocalFonts).toHaveBeenCalledWith({ postscriptNames: ['Arial-BoldMT'] });
+    scope.stop();
+  });
+
+  it('stores the error and invokes onError when the query rejects', async () => {
+    const scope = effectScope();
+    const error = new DOMException('denied', 'NotAllowedError');
+    const queryLocalFonts = vi.fn(async () => {
+      throw error;
+    });
+    const win = { queryLocalFonts } as unknown as Window & typeof globalThis;
+    const onError = vi.fn();
+
+    let result: ReturnType<typeof useLocalFonts>;
+    scope.run(() => {
+      result = useLocalFonts({ window: win, onError });
+    });
+
+    await expect(result!.query()).resolves.toBeUndefined();
+    expect(onError).toHaveBeenCalledWith(error);
+    expect(result!.error.value).toBe(error);
+    expect(result!.fonts.value).toEqual([]);
+    scope.stop();
+  });
+
+  it('returns undefined and does not call the API when unsupported', async () => {
+    const scope = effectScope();
+    const win = {} as unknown as Window & typeof globalThis;
+
+    let result: ReturnType<typeof useLocalFonts>;
+    scope.run(() => {
+      result = useLocalFonts({ window: win });
+    });
+
+    await expect(result!.query()).resolves.toBeUndefined();
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/browser/useLocalFonts/index.ts b/vue/toolkit/src/composables/browser/useLocalFonts/index.ts
new file mode 100644
index 0000000..cc84221
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useLocalFonts/index.ts
@@ -0,0 +1,158 @@
+import { shallowRef } from 'vue';
+import type { ComputedRef, ShallowRef } from 'vue';
+import { noop } from '@robonen/stdlib';
+import { defaultWindow } from '@/types';
+import type { ConfigurableWindow } from '@/types';
+import { useSupported } from '@/composables/utilities/useSupported';
+import { tryOnMounted } from '@/composables/lifecycle/tryOnMounted';
+
+/**
+ * A single font face exposed by the [Local Font Access API](https://developer.mozilla.org/en-US/docs/Web/API/FontData).
+ */
+export interface FontData {
+  /**
+   * The PostScript name of the font (e.g. `"Arial-BoldMT"`)
+   */
+  readonly postscriptName: string;
+
+  /**
+   * The full, human-readable name of the font (e.g. `"Arial Bold"`)
+   */
+  readonly fullName: string;
+
+  /**
+   * The font family (e.g. `"Arial"`)
+   */
+  readonly family: string;
+
+  /**
+   * The font style/subfamily (e.g. `"Bold"`)
+   */
+  readonly style: string;
+
+  /**
+   * Resolve the raw font file as a `Blob` (the full SFNT binary)
+   */
+  blob: () => Promise<Blob>;
+}
+
+export interface QueryLocalFontsOptions {
+  /**
+   * Restrict the results to the fonts whose PostScript names appear in this list.
+   */
+  postscriptNames?: string[];
+}
+
+interface WindowWithLocalFonts {
+  queryLocalFonts: (options?: QueryLocalFontsOptions) => Promise<FontData[]>;
+}
+
+export interface UseLocalFontsOptions extends ConfigurableWindow {
+  /**
+   * Query the local fonts immediately on mount. The Local Font Access API
+   * requires the `local-fonts` permission (which may prompt the user), so this
+   * is disabled by default — call `query()` from a user gesture instead.
+   *
+   * @default false
+   */
+  immediate?: boolean;
+
+  /**
+   * Called when a query rejects (e.g. the permission is denied) instead of
+   * throwing. The same value is also stored in the returned `error` ref.
+   *
+   * @default noop
+   */
+  onError?: (error: unknown) => void;
+}
+
+export interface UseLocalFontsReturn {
+  /**
+   * Whether the [Local Font Access API](https://developer.mozilla.org/en-US/docs/Web/API/Local_Font_Access_API) is supported
+   */
+  isSupported: ComputedRef<boolean>;
+
+  /**
+   * The fonts returned by the most recent successful `query()`
+   */
+  fonts: ShallowRef<FontData[]>;
+
+  /**
+   * The last error thrown by `query()`, or `null`
+   */
+  error: ShallowRef<unknown | null>;
+
+  /**
+   * Enumerate the locally installed fonts. Resolves with the font list, or
+   * `undefined` when the API is unsupported. Pass `postscriptNames` to filter.
+   */
+  query: (queryOptions?: QueryLocalFontsOptions) => Promise<FontData[] | undefined>;
+}
+
+/**
+ * @name useLocalFonts
+ * @category Browser
+ * @description Reactive wrapper around the [Local Font Access API](https://developer.mozilla.org/en-US/docs/Web/API/Local_Font_Access_API) for enumerating the user's locally installed fonts.
+ *
+ * @param {UseLocalFontsOptions} [options={}] Options
+ * @param {boolean} [options.immediate=false] Query immediately on mount (requires the `local-fonts` permission)
+ * @param {Function} [options.onError=noop] Error callback invoked instead of throwing
+ * @param {Window} [options.window=defaultWindow] Custom `window` instance
+ * @returns {UseLocalFontsReturn} `isSupported`, `fonts`, `error`, and `query()`
+ *
+ * @example
+ * const { isSupported, fonts, query } = useLocalFonts();
+ * // Call from a click handler so the permission prompt is allowed
+ * async function pickFonts() {
+ *   await query();
+ *   console.log(fonts.value.map(font => font.fullName));
+ * }
+ *
+ * @example
+ * // Query only specific fonts by PostScript name
+ * const { fonts, query } = useLocalFonts();
+ * await query({ postscriptNames: ['Arial-BoldMT'] });
+ *
+ * @since 0.0.15
+ */
+export function useLocalFonts(options: UseLocalFontsOptions = {}): UseLocalFontsReturn {
+  const {
+    window = defaultWindow,
+    immediate = false,
+    onError = noop,
+  } = options;
+
+  const isSupported = useSupported(() => !!window && 'queryLocalFonts' in window);
+  const fonts = shallowRef<FontData[]>([]);
+  const error = shallowRef<unknown | null>(null);
+
+  async function query(queryOptions?: QueryLocalFontsOptions): Promise<FontData[] | undefined> {
+    if (!isSupported.value || !window)
+      return undefined;
+
+    error.value = null;
+
+    try {
+      const result = await (window as unknown as WindowWithLocalFonts).queryLocalFonts(queryOptions);
+      fonts.value = result;
+
+      return result;
+    }
+    catch (err) {
+      error.value = err;
+      onError(err);
+
+      return undefined;
+    }
+  }
+
+  if (immediate)
+    tryOnMounted(() => query());
+
+  return {
+    isSupported,
+    fonts,
+    error,
+    query,
+  };
+}
diff --git a/vue/toolkit/src/composables/browser/useMediaQuery/demo.vue b/vue/toolkit/src/composables/browser/useMediaQuery/demo.vue
new file mode 100644
index 0000000..0915dbf
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useMediaQuery/demo.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { useMediaQuery } from './index';
+
+// useMediaQuery returns a single ComputedRef<boolean> — bind it directly.
+const isWide = useMediaQuery('(min-width: 1024px)');
+const isMedium = useMediaQuery('(min-width: 640px)');
+const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
+const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
+const isPortrait = useMediaQuery('(orientation: portrait)');
+const isFinePointer = useMediaQuery('(pointer: fine)');
+
+const breakpoint = isWide;
+
+const queries = [
+  { label: 'min-width: 1024px', match: isWide },
+  { label: 'min-width: 640px', match: isMedium },
+  { label: 'prefers-color-scheme: dark', match: prefersDark },
+  { label: 'prefers-reduced-motion', match: prefersReducedMotion },
+  { label: 'orientation: portrait', match: isPortrait },
+  { label: 'pointer: fine', match: isFinePointer },
+];
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 text-center">
+      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Current layout
+      </p>
+      <p class="mt-1 font-mono text-3xl font-bold tabular-nums text-(--fg)">
+        {{ breakpoint ? 'desktop' : isMedium ? 'tablet' : 'mobile' }}
+      </p>
+      <p class="mt-1 text-sm text-(--fg-muted)">
+        Resize the window to watch these queries flip live.
+      </p>
+    </div>
+
+    <ul class="divide-y divide-(--border) rounded-xl border border-(--border) bg-(--bg-elevated)">
+      <li
+        v-for="query in queries"
+        :key="query.label"
+        class="flex items-center justify-between gap-3 px-3 py-2.5"
+      >
+        <code class="font-mono text-sm text-(--fg)">{{ query.label }}</code>
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
+          :class="query.match.value
+            ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+            : 'border-(--border) bg-(--bg-inset) text-(--fg-subtle)'"
+        >
+          <span
+            class="h-1.5 w-1.5 rounded-full"
+            :class="query.match.value ? 'bg-emerald-500' : 'bg-(--border-strong)'"
+          />
+          {{ query.match.value ? 'matches' : 'no match' }}
+        </span>
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useMediaQuery/index.test.ts b/vue/toolkit/src/composables/browser/useMediaQuery/index.test.ts
new file mode 100644
index 0000000..7f887ca
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useMediaQuery/index.test.ts
@@ -0,0 +1,251 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { defineComponent, effectScope, isReadonly, nextTick, ref } from 'vue';
+import { mount } from '@vue/test-utils';
+import { useMediaQuery } from '.';
+
+type Listener = (event: { matches: boolean }) => void;
+
+interface StubMql {
+  readonly matches: boolean;
+  media: string;
+  addEventListener: (type: string, cb: Listener) => void;
+  removeEventListener: (type: string, cb: Listener) => void;
+  dispatch: (value: boolean) => void;
+}
+
+function makeMql(initialMatches: boolean, media = ''): StubMql {
+  const listeners = new Set<Listener>();
+  let matches = initialMatches;
+
+  return {
+    get matches() {
+      return matches;
+    },
+    media,
+    addEventListener: (_: string, cb: Listener) => listeners.add(cb),
+    removeEventListener: (_: string, cb: Listener) => listeners.delete(cb),
+    dispatch(value: boolean) {
+      matches = value;
+      for (const cb of listeners) cb({ matches: value });
+    },
+  };
+}
+
+function stubMatchMedia(initialMatches: boolean) {
+  const mql = makeMql(initialMatches);
+  vi.stubGlobal('matchMedia', vi.fn(() => mql));
+  return mql;
+}
+
+/** Returns a different MediaQueryList per query string, so reactive query swaps can be exercised. */
+function stubMatchMediaByQuery(map: Record<string, StubMql>, fallbackMatches = false) {
+  const spy = vi.fn((query: string) => map[query] ?? makeMql(fallbackMatches, query));
+  vi.stubGlobal('matchMedia', spy);
+  return spy;
+}
+
+describe(useMediaQuery, () => {
+  beforeEach(() => {
+    vi.stubGlobal('matchMedia', undefined);
+  });
+  afterEach(() => vi.unstubAllGlobals());
+
+  it('reflects the initial match', async () => {
+    stubMatchMedia(true);
+    const scope = effectScope();
+    let matches: ReturnType<typeof useMediaQuery>;
+    scope.run(() => {
+      matches = useMediaQuery('(min-width: 100px)');
+    });
+    await nextTick();
+    expect(matches!.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('updates when the media query changes', async () => {
+    const mql = stubMatchMedia(false);
+    const scope = effectScope();
+    let matches: ReturnType<typeof useMediaQuery>;
+    scope.run(() => {
+      matches = useMediaQuery('(min-width: 100px)');
+    });
+    await nextTick();
+
+    expect(matches!.value).toBeFalsy();
+    mql.dispatch(true);
+    expect(matches!.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('returns false when matchMedia is unsupported (SSR)', async () => {
+    const scope = effectScope();
+    let matches: ReturnType<typeof useMediaQuery>;
+    scope.run(() => {
+      matches = useMediaQuery('(min-width: 100px)');
+    });
+    await nextTick();
+    expect(matches!.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('returns a readonly ref', async () => {
+    stubMatchMedia(true);
+    const scope = effectScope();
+    let matches: ReturnType<typeof useMediaQuery>;
+    scope.run(() => {
+      matches = useMediaQuery('(min-width: 100px)');
+    });
+    await nextTick();
+    expect(isReadonly(matches!)).toBeTruthy();
+    scope.stop();
+  });
+
+  it('reacts to a changing query ref by re-binding to the new MediaQueryList', async () => {
+    const small = makeMql(false, '(min-width: 100px)');
+    const large = makeMql(true, '(min-width: 1000px)');
+    stubMatchMediaByQuery({
+      '(min-width: 100px)': small,
+      '(min-width: 1000px)': large,
+    });
+
+    const scope = effectScope();
+    const query = ref('(min-width: 100px)');
+    let matches: ReturnType<typeof useMediaQuery>;
+    scope.run(() => {
+      matches = useMediaQuery(query);
+    });
+    await nextTick();
+    expect(matches!.value).toBeFalsy();
+
+    query.value = '(min-width: 1000px)';
+    await nextTick();
+    expect(matches!.value).toBeTruthy();
+
+    // The listener should follow the new MediaQueryList, not the old one.
+    large.dispatch(false);
+    expect(matches!.value).toBeFalsy();
+    // The old MediaQueryList should no longer affect the result.
+    small.dispatch(true);
+    expect(matches!.value).toBeFalsy();
+
+    scope.stop();
+  });
+
+  it('also accepts a getter for the query', async () => {
+    stubMatchMedia(true);
+    const scope = effectScope();
+    let matches: ReturnType<typeof useMediaQuery>;
+    scope.run(() => {
+      matches = useMediaQuery(() => '(min-width: 100px)');
+    });
+    await nextTick();
+    expect(matches!.value).toBeTruthy();
+    scope.stop();
+  });
+
+  describe('ssrWidth', () => {
+    it('resolves min-width against ssrWidth when matchMedia is unsupported', async () => {
+      const scope = effectScope();
+      let wide: ReturnType<typeof useMediaQuery>;
+      let narrow: ReturnType<typeof useMediaQuery>;
+      scope.run(() => {
+        wide = useMediaQuery('(min-width: 1024px)', { ssrWidth: 1280 });
+        narrow = useMediaQuery('(min-width: 1024px)', { ssrWidth: 800 });
+      });
+      await nextTick();
+      expect(wide!.value).toBeTruthy();
+      expect(narrow!.value).toBeFalsy();
+      scope.stop();
+    });
+
+    it('resolves max-width against ssrWidth', async () => {
+      const scope = effectScope();
+      let matches: ReturnType<typeof useMediaQuery>;
+      scope.run(() => {
+        matches = useMediaQuery('(max-width: 768px)', { ssrWidth: 500 });
+      });
+      await nextTick();
+      expect(matches!.value).toBeTruthy();
+      scope.stop();
+    });
+
+    it('handles a min-width/max-width range', async () => {
+      const scope = effectScope();
+      let inRange: ReturnType<typeof useMediaQuery>;
+      let outOfRange: ReturnType<typeof useMediaQuery>;
+      scope.run(() => {
+        inRange = useMediaQuery('(min-width: 600px) and (max-width: 1200px)', { ssrWidth: 900 });
+        outOfRange = useMediaQuery('(min-width: 600px) and (max-width: 1200px)', { ssrWidth: 1500 });
+      });
+      await nextTick();
+      expect(inRange!.value).toBeTruthy();
+      expect(outOfRange!.value).toBeFalsy();
+      scope.stop();
+    });
+
+    it('respects `not all` negation', async () => {
+      const scope = effectScope();
+      let matches: ReturnType<typeof useMediaQuery>;
+      scope.run(() => {
+        matches = useMediaQuery('not all and (min-width: 1024px)', { ssrWidth: 1280 });
+      });
+      await nextTick();
+      expect(matches!.value).toBeFalsy();
+      scope.stop();
+    });
+
+    it('OR-combines comma-separated queries', async () => {
+      const scope = effectScope();
+      let matches: ReturnType<typeof useMediaQuery>;
+      scope.run(() => {
+        matches = useMediaQuery('(min-width: 2000px), (max-width: 900px)', { ssrWidth: 800 });
+      });
+      await nextTick();
+      expect(matches!.value).toBeTruthy();
+      scope.stop();
+    });
+
+    it('converts em/rem units using a 16px root', async () => {
+      const scope = effectScope();
+      let matches: ReturnType<typeof useMediaQuery>;
+      // 48em === 768px; ssrWidth 800 >= 768 → matches
+      scope.run(() => {
+        matches = useMediaQuery('(min-width: 48em)', { ssrWidth: 800 });
+      });
+      await nextTick();
+      expect(matches!.value).toBeTruthy();
+      scope.stop();
+    });
+
+    it('prefers the real matchMedia over ssrWidth once mounted', async () => {
+      // matchMedia reports false even though ssrWidth would resolve true.
+      stubMatchMedia(false);
+      let matches: ReturnType<typeof useMediaQuery>;
+      const wrapper = mount(defineComponent({
+        setup() {
+          matches = useMediaQuery('(min-width: 1024px)', { ssrWidth: 1280 });
+          return () => null;
+        },
+      }));
+      await nextTick();
+      // After mount, isSupported becomes true and the real (false) result wins.
+      expect(matches!.value).toBeFalsy();
+      wrapper.unmount();
+    });
+
+    it('uses ssrWidth on the first render before mount, then re-evaluates', async () => {
+      // Real matchMedia is available, but the very first synchronous effect
+      // run (pre-mount) should still resolve via ssrWidth to avoid flicker.
+      stubMatchMedia(false);
+      let matches: ReturnType<typeof useMediaQuery>;
+      const scope = effectScope();
+      // Without a mounted component, isSupported stays false, so ssrWidth wins.
+      scope.run(() => {
+        matches = useMediaQuery('(min-width: 1024px)', { ssrWidth: 1280 });
+      });
+      await nextTick();
+      expect(matches!.value).toBeTruthy();
+      scope.stop();
+    });
+  });
+});
diff --git a/vue/toolkit/src/composables/browser/useMediaQuery/index.ts b/vue/toolkit/src/composables/browser/useMediaQuery/index.ts
new file mode 100644
index 0000000..6c5304f
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useMediaQuery/index.ts
@@ -0,0 +1,120 @@
+import { computed, shallowRef, toValue, watchEffect } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+import { isFunction, isNumber } from '@robonen/stdlib';
+import { defaultWindow } from '@/types';
+import type { ConfigurableWindow } from '@/types';
+import { useSupported } from '@/composables/utilities/useSupported';
+import { useEventListener } from '@/composables/browser/useEventListener';
+
+export interface UseMediaQueryOptions extends ConfigurableWindow {
+  /**
+   * The viewport width (in pixels) assumed during SSR, used to resolve
+   * `min-width` / `max-width` queries before `window.matchMedia` is available.
+   *
+   * When provided, the composable returns a best-effort match on the server
+   * (and the first client render) instead of always `false`, avoiding hydration
+   * flicker for width-based queries. Ignored once `matchMedia` is supported.
+   *
+   * @default undefined
+   */
+  ssrWidth?: number;
+}
+
+/**
+ * Convert a CSS length token (e.g. `"1024px"`, `"48em"`, `"30rem"`) to pixels.
+ * Falls back to treating `em`/`rem` as the conventional 16px root size.
+ */
+function pxValue(value: string): number {
+  const number = Number.parseFloat(value);
+
+  if (Number.isNaN(number))
+    return Number.NaN;
+
+  if (/(?:em|rem)\s*$/i.test(value))
+    return number * 16;
+
+  return number;
+}
+
+/**
+ * Best-effort evaluation of `min-width` / `max-width` media queries against a
+ * known viewport width, for SSR. Comma-separated queries are OR-combined and
+ * `not all` negation is respected. Returns `false` for queries we can't resolve.
+ */
+function matchSsrWidth(query: string, width: number): boolean {
+  return query.split(',').some((part) => {
+    const not = part.includes('not all');
+    const minWidth = part.match(/\(\s*min-width:\s*(-?\d+(?:\.\d*)?[a-z%]+\s*)\)/);
+    const maxWidth = part.match(/\(\s*max-width:\s*(-?\d+(?:\.\d*)?[a-z%]+\s*)\)/);
+
+    let result = Boolean(minWidth || maxWidth);
+
+    if (minWidth && result)
+      result = width >= pxValue(minWidth[1]!);
+
+    if (maxWidth && result)
+      result = width <= pxValue(maxWidth[1]!);
+
+    return not ? !result : result;
+  });
+}
+
+/**
+ * @name useMediaQuery
+ * @category Browser
+ * @description Reactive `window.matchMedia`. SSR-safe, reactive to the query, and
+ * with optional SSR width resolution for `min-width` / `max-width` queries.
+ *
+ * @param {MaybeRefOrGetter<string>} query The media query (can be reactive)
+ * @param {UseMediaQueryOptions} [options={}] Options (custom `window`, `ssrWidth`)
+ * @returns {ComputedRef<boolean>} Readonly ref of whether the query currently matches
+ *
+ * @example
+ * const isLarge = useMediaQuery('(min-width: 1024px)');
+ *
+ * @example
+ * // Resolve width queries during SSR to avoid hydration flicker
+ * const isWide = useMediaQuery('(min-width: 1024px)', { ssrWidth: 1280 });
+ *
+ * @since 0.0.15
+ */
+export function useMediaQuery(
+  query: MaybeRefOrGetter<string>,
+  options: UseMediaQueryOptions = {},
+): ComputedRef<boolean> {
+  const { window = defaultWindow, ssrWidth } = options;
+
+  const isSupported = useSupported(() =>
+    window && 'matchMedia' in window && isFunction(window.matchMedia));
+
+  const ssrSupport = shallowRef(isNumber(ssrWidth));
+
+  const mediaQuery = shallowRef<MediaQueryList | undefined>();
+  const matches = shallowRef(false);
+
+  const handler = (event: MediaQueryListEvent) => {
+    matches.value = event.matches;
+  };
+
+  watchEffect(() => {
+    // Resolve width-based queries from `ssrWidth` until the real API is ready.
+    if (ssrSupport.value) {
+      ssrSupport.value = !isSupported.value;
+      matches.value = matchSsrWidth(toValue(query), ssrWidth!);
+      return;
+    }
+
+    if (!isSupported.value)
+      return;
+
+    mediaQuery.value = window!.matchMedia(toValue(query));
+    matches.value = mediaQuery.value.matches;
+  });
+
+  // Reactive target: re-binds automatically when the query (and thus the
+  // MediaQueryList) changes, and auto-cleans on scope dispose. Passive since
+  // we never call preventDefault.
+  useEventListener(mediaQuery, 'change', handler, { passive: true });
+
+  return computed(() => matches.value);
+}
diff --git a/vue/toolkit/src/composables/browser/useObjectUrl/demo.vue b/vue/toolkit/src/composables/browser/useObjectUrl/demo.vue
new file mode 100644
index 0000000..be76b54
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useObjectUrl/demo.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { computed, ref, shallowRef } from 'vue';
+import { useObjectUrl } from './index';
+
+const file = shallowRef<File>();
+// useObjectUrl returns a single read-only ShallowRef<string | undefined>.
+const url = useObjectUrl(file);
+
+const isImage = computed(() => file.value?.type.startsWith('image/') ?? false);
+
+const sizeLabel = computed(() => {
+  const bytes = file.value?.size ?? 0;
+  if (bytes < 1024)
+    return `${bytes} B`;
+  if (bytes < 1024 * 1024)
+    return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+});
+
+const dragging = ref(false);
+
+function onFiles(list: FileList | null | undefined) {
+  if (list && list.length)
+    file.value = list[0];
+}
+
+function onDrop(event: DragEvent) {
+  dragging.value = false;
+  onFiles(event.dataTransfer?.files);
+}
+
+function clear() {
+  file.value = undefined;
+}
+
+// A synthetic blob so the demo works even without a file at hand.
+function generateSample() {
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="240" height="160">`
+    + `<rect width="240" height="160" fill="#6366f1"/>`
+    + `<text x="120" y="90" font-size="22" font-family="sans-serif" fill="white" text-anchor="middle">useObjectUrl</text>`
+    + `</svg>`;
+  file.value = new File([svg], 'sample.svg', { type: 'image/svg+xml' });
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <label
+      class="flex cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed p-6 text-center transition"
+      :class="dragging
+        ? 'border-(--accent) bg-(--accent-subtle)'
+        : 'border-(--border) bg-(--bg-inset) hover:border-(--border-strong)'"
+      @dragover.prevent="dragging = true"
+      @dragleave.prevent="dragging = false"
+      @drop.prevent="onDrop"
+    >
+      <span class="text-2xl">📎</span>
+      <span class="text-sm font-medium text-(--fg)">Drop a file or click to choose</span>
+      <span class="text-xs text-(--fg-subtle)">An object URL is created instantly</span>
+      <input
+        type="file"
+        class="hidden"
+        @change="onFiles(($event.target as HTMLInputElement).files)"
+      >
+    </label>
+
+    <div class="flex gap-2">
+      <button
+        type="button"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="generateSample"
+      >
+        Use sample image
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="!file"
+        @click="clear"
+      >
+        Clear
+      </button>
+    </div>
+
+    <div
+      v-if="file"
+      class="flex flex-col gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4"
+    >
+      <img
+        v-if="isImage && url"
+        :src="url"
+        alt="Selected file preview"
+        class="mx-auto max-h-40 rounded-lg border border-(--border) object-contain"
+      >
+      <div class="flex items-center justify-between gap-3 text-sm">
+        <span class="truncate font-medium text-(--fg)">{{ file.name }}</span>
+        <span class="shrink-0 font-mono text-xs text-(--fg-muted) tabular-nums">{{ sizeLabel }}</span>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs text-(--fg) break-all">
+        {{ url }}
+      </div>
+    </div>
+
+    <p
+      v-else
+      class="rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-6 text-center text-sm text-(--fg-subtle)"
+    >
+      No source — the URL ref is <code class="font-mono">undefined</code>
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useObjectUrl/index.test.ts b/vue/toolkit/src/composables/browser/useObjectUrl/index.test.ts
new file mode 100644
index 0000000..a362535
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useObjectUrl/index.test.ts
@@ -0,0 +1,169 @@
+import { describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, shallowRef } from 'vue';
+import { useObjectUrl } from '.';
+
+function createUrlStub() {
+  let counter = 0;
+  const createObjectURL = vi.fn((_object: Blob | MediaSource) => `blob:mock/${counter++}`);
+  const revokeObjectURL = vi.fn((_url: string) => {});
+  const window = { URL: { createObjectURL, revokeObjectURL } } as unknown as Window;
+
+  return { window, createObjectURL, revokeObjectURL };
+}
+
+function makeBlob(content = 'hello') {
+  return new Blob([content], { type: 'text/plain' });
+}
+
+describe(useObjectUrl, () => {
+  it('creates an object URL for an initial value', () => {
+    const { window, createObjectURL } = createUrlStub();
+    const blob = makeBlob();
+    const scope = effectScope();
+
+    let url: ReturnType<typeof useObjectUrl>;
+    scope.run(() => {
+      url = useObjectUrl(shallowRef(blob), { window });
+    });
+
+    expect(createObjectURL).toHaveBeenCalledTimes(1);
+    expect(createObjectURL).toHaveBeenCalledWith(blob);
+    expect(url!.value).toBe('blob:mock/0');
+
+    scope.stop();
+  });
+
+  it('returns undefined when the source is null/undefined', () => {
+    const { window, createObjectURL } = createUrlStub();
+    const scope = effectScope();
+
+    let url: ReturnType<typeof useObjectUrl>;
+    scope.run(() => {
+      url = useObjectUrl(shallowRef<Blob | undefined>(undefined), { window });
+    });
+
+    expect(createObjectURL).not.toHaveBeenCalled();
+    expect(url!.value).toBeUndefined();
+
+    scope.stop();
+  });
+
+  it('revokes the previous URL and creates a new one when the source changes', async () => {
+    const { window, createObjectURL, revokeObjectURL } = createUrlStub();
+    const source = shallowRef<Blob | undefined>(makeBlob('a'));
+    const scope = effectScope();
+
+    let url: ReturnType<typeof useObjectUrl>;
+    scope.run(() => {
+      url = useObjectUrl(source, { window });
+    });
+
+    expect(url!.value).toBe('blob:mock/0');
+
+    source.value = makeBlob('b');
+    await nextTick();
+
+    expect(revokeObjectURL).toHaveBeenCalledTimes(1);
+    expect(revokeObjectURL).toHaveBeenCalledWith('blob:mock/0');
+    expect(createObjectURL).toHaveBeenCalledTimes(2);
+    expect(url!.value).toBe('blob:mock/1');
+
+    scope.stop();
+  });
+
+  it('revokes and clears when the source becomes null', async () => {
+    const { window, revokeObjectURL } = createUrlStub();
+    const source = shallowRef<Blob | null>(makeBlob());
+    const scope = effectScope();
+
+    let url: ReturnType<typeof useObjectUrl>;
+    scope.run(() => {
+      url = useObjectUrl(source, { window });
+    });
+
+    expect(url!.value).toBe('blob:mock/0');
+
+    source.value = null;
+    await nextTick();
+
+    expect(revokeObjectURL).toHaveBeenCalledWith('blob:mock/0');
+    expect(url!.value).toBeUndefined();
+
+    scope.stop();
+  });
+
+  it('revokes the active URL on scope dispose', () => {
+    const { window, revokeObjectURL } = createUrlStub();
+    const scope = effectScope();
+
+    let url: ReturnType<typeof useObjectUrl>;
+    scope.run(() => {
+      url = useObjectUrl(shallowRef(makeBlob()), { window });
+    });
+
+    expect(url!.value).toBe('blob:mock/0');
+    expect(revokeObjectURL).not.toHaveBeenCalled();
+
+    scope.stop();
+
+    expect(revokeObjectURL).toHaveBeenCalledTimes(1);
+    expect(revokeObjectURL).toHaveBeenCalledWith('blob:mock/0');
+  });
+
+  it('accepts a getter source', async () => {
+    const { window, createObjectURL } = createUrlStub();
+    const source = shallowRef<Blob | undefined>(undefined);
+    const scope = effectScope();
+
+    let url: ReturnType<typeof useObjectUrl>;
+    scope.run(() => {
+      url = useObjectUrl(() => source.value, { window });
+    });
+
+    expect(url!.value).toBeUndefined();
+
+    source.value = makeBlob();
+    await nextTick();
+
+    expect(createObjectURL).toHaveBeenCalledTimes(1);
+    expect(url!.value).toBe('blob:mock/0');
+
+    scope.stop();
+  });
+
+  it('returns a read-only ref', () => {
+    const { window } = createUrlStub();
+    const scope = effectScope();
+
+    let url: ReturnType<typeof useObjectUrl>;
+    scope.run(() => {
+      url = useObjectUrl(shallowRef(makeBlob()), { window });
+    });
+
+    // shallowReadonly should warn and not mutate when written to
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    // @ts-expect-error read-only ref
+    url!.value = 'mutated';
+    expect(url!.value).toBe('blob:mock/0');
+    warn.mockRestore();
+
+    scope.stop();
+  });
+
+  it('does nothing in an unsupported / SSR environment (no window)', () => {
+    const scope = effectScope();
+
+    // Simulate SSR: no `window` available. Destructuring defaults only kick in
+    // for `undefined`, so pass an explicit `null` to mirror `defaultWindow`
+    // being `undefined` on the server (the guard treats any falsy window the same).
+    let url: ReturnType<typeof useObjectUrl>;
+    scope.run(() => {
+      url = useObjectUrl(shallowRef(makeBlob()), { window: null as unknown as Window });
+    });
+
+    expect(url!.value).toBeUndefined();
+
+    // disposing must not throw even though there is no window
+    expect(() => scope.stop()).not.toThrow();
+  });
+});
diff --git a/vue/toolkit/src/composables/browser/useObjectUrl/index.ts b/vue/toolkit/src/composables/browser/useObjectUrl/index.ts
new file mode 100644
index 0000000..492aae2
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useObjectUrl/index.ts
@@ -0,0 +1,55 @@
+import { shallowReadonly, shallowRef, toValue, watch } from 'vue';
+import type { MaybeRefOrGetter, ShallowRef } from 'vue';
+import { defaultWindow } from '@/types';
+import type { ConfigurableWindow } from '@/types';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+
+export interface UseObjectUrlOptions extends ConfigurableWindow {}
+
+export type UseObjectUrlReturn = Readonly<ShallowRef<string | undefined>>;
+
+/**
+ * @name useObjectUrl
+ * @category Browser
+ * @description Create and auto-revoke an object URL for a `Blob`, `File`, or `MediaSource`. The previous URL is revoked whenever the source changes, and the active URL is revoked on scope dispose.
+ *
+ * @param {MaybeRefOrGetter<Blob | MediaSource | null | undefined>} object The reactive source to create an object URL for
+ * @param {UseObjectUrlOptions} [options={}] Options
+ * @returns {UseObjectUrlReturn} A read-only ref holding the current object URL, or `undefined` when there is no source (or in unsupported/SSR environments)
+ *
+ * @example
+ * const file = shallowRef<File>();
+ * const url = useObjectUrl(file);
+ *
+ * @since 0.0.15
+ */
+export function useObjectUrl(
+  object: MaybeRefOrGetter<Blob | MediaSource | null | undefined>,
+  options: UseObjectUrlOptions = {},
+): UseObjectUrlReturn {
+  const { window = defaultWindow } = options;
+
+  const url = shallowRef<string | undefined>();
+
+  const release = (): void => {
+    if (url.value)
+      (window as (Window & typeof globalThis) | undefined)?.URL.revokeObjectURL(url.value);
+
+    url.value = undefined;
+  };
+
+  watch(
+    () => toValue(object),
+    (newObject) => {
+      release();
+
+      if (newObject && window)
+        url.value = (window as Window & typeof globalThis).URL.createObjectURL(newObject);
+    },
+    { immediate: true },
+  );
+
+  tryOnScopeDispose(release);
+
+  return shallowReadonly(url);
+}
diff --git a/vue/toolkit/src/composables/browser/usePermission/demo.vue b/vue/toolkit/src/composables/browser/usePermission/demo.vue
new file mode 100644
index 0000000..23651a7
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/usePermission/demo.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { usePermission } from './index';
+import type { GeneralPermissionDescriptor } from './index';
+
+const names: GeneralPermissionDescriptor['name'][] = [
+  'geolocation',
+  'camera',
+  'microphone',
+  'notifications',
+  'clipboard-read',
+];
+
+// usePermission takes a static descriptor, so instantiate one per permission
+// up-front and switch which reactive state we read via the dropdown.
+const permissions = names.map(name => ({
+  name,
+  ...usePermission(name, { controls: true }),
+}));
+
+const selected = ref<GeneralPermissionDescriptor['name']>('geolocation');
+
+const active = computed(() => permissions.find(perm => perm.name === selected.value)!);
+const isSupported = active.value.isSupported;
+
+const meta = computed(() => {
+  switch (active.value.state.value) {
+    case 'granted':
+      return { label: 'granted', dot: 'bg-emerald-500', text: 'text-emerald-600 dark:text-emerald-400', ring: 'border-emerald-500/30 bg-emerald-500/10' };
+    case 'denied':
+      return { label: 'denied', dot: 'bg-red-500', text: 'text-red-600 dark:text-red-400', ring: 'border-red-500/30 bg-red-500/10' };
+    case 'prompt':
+      return { label: 'prompt', dot: 'bg-amber-500', text: 'text-amber-600 dark:text-amber-400', ring: 'border-amber-500/30 bg-amber-500/10' };
+    default:
+      return { label: 'unknown', dot: 'bg-(--border-strong)', text: 'text-(--fg-subtle)', ring: 'border-(--border) bg-(--bg-inset)' };
+  }
+});
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      v-if="!isSupported"
+      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-700 dark:text-amber-300"
+    >
+      The Permissions API is not supported in this browser.
+    </div>
+
+    <template v-else>
+      <div class="flex flex-col gap-1.5">
+        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Permission
+        </label>
+        <select
+          v-model="selected"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+          <option v-for="name in names" :key="name" :value="name">
+            {{ name }}
+          </option>
+        </select>
+      </div>
+
+      <ul class="divide-y divide-(--border) rounded-xl border border-(--border) bg-(--bg-elevated)">
+        <li
+          v-for="perm in permissions"
+          :key="perm.name"
+          class="flex items-center justify-between gap-3 px-3 py-2.5"
+        >
+          <code class="font-mono text-sm text-(--fg)">{{ perm.name }}</code>
+          <span class="font-mono text-xs text-(--fg-muted)">{{ perm.state.value ?? 'unknown' }}</span>
+        </li>
+      </ul>
+
+      <div class="flex flex-col items-center gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-5">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          {{ selected }}
+        </span>
+        <span
+          class="inline-flex items-center gap-2 rounded-md border px-3 py-1 text-sm font-semibold transition"
+          :class="[meta.ring, meta.text]"
+        >
+          <span class="h-2 w-2 rounded-full" :class="meta.dot" />
+          {{ meta.label }}
+        </span>
+      </div>
+
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="active.query()"
+      >
+        Re-check "{{ selected }}"
+      </button>
+
+      <p class="text-center text-xs text-(--fg-subtle)">
+        Status updates live if you change a permission in your browser settings.
+      </p>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/usePermission/index.test.ts b/vue/toolkit/src/composables/browser/usePermission/index.test.ts
new file mode 100644
index 0000000..43bc094
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/usePermission/index.test.ts
@@ -0,0 +1,175 @@
+import { describe, expect, it, vi } from 'vitest';
+import { effectScope } from 'vue';
+import type { UsePermissionReturn } from '.';
+import { usePermission } from '.';
+
+function stubPermissions(state: PermissionState) {
+  let changeHandler: ((this: PermissionStatus, ev: Event) => any) | undefined;
+  const status = {
+    state,
+    addEventListener: vi.fn((_: string, handler: any) => { changeHandler = handler; }),
+    removeEventListener: vi.fn(() => { changeHandler = undefined; }),
+  };
+  const query = vi.fn(async () => status);
+  const navigator = { permissions: { query } } as unknown as Navigator;
+  const emitChange = (next: PermissionState) => {
+    status.state = next;
+    changeHandler?.call(status as unknown as PermissionStatus, new Event('change'));
+  };
+  return { navigator, status, query, emitChange, getChangeHandler: () => changeHandler };
+}
+
+describe(usePermission, () => {
+  it('resolves the permission state', async () => {
+    const { navigator } = stubPermissions('granted');
+    const scope = effectScope();
+    let state: UsePermissionReturn;
+    scope.run(() => {
+      state = usePermission('geolocation', { navigator });
+    });
+
+    await vi.waitFor(() => expect(state!.value).toBe('granted'));
+    scope.stop();
+  });
+
+  it('exposes controls when controls: true', async () => {
+    const { navigator, query } = stubPermissions('prompt');
+    const scope = effectScope();
+    let result: any;
+    scope.run(() => {
+      result = usePermission('camera', { controls: true, navigator });
+    });
+
+    expect(result.isSupported.value).toBeTruthy();
+    await result.query();
+    expect(query).toHaveBeenCalled();
+    scope.stop();
+  });
+
+  it('returns undefined state when unsupported', () => {
+    const navigator = {} as Navigator;
+    const scope = effectScope();
+    let state: UsePermissionReturn;
+    scope.run(() => {
+      state = usePermission('geolocation', { navigator });
+    });
+    expect(state!.value).toBeUndefined();
+    scope.stop();
+  });
+
+  it('reacts to the status change event', async () => {
+    const { navigator, emitChange } = stubPermissions('prompt');
+    const scope = effectScope();
+    let state: UsePermissionReturn;
+    scope.run(() => {
+      state = usePermission('notifications', { navigator });
+    });
+
+    await vi.waitFor(() => expect(state!.value).toBe('prompt'));
+
+    emitChange('granted');
+    await vi.waitFor(() => expect(state!.value).toBe('granted'));
+
+    emitChange('denied');
+    await vi.waitFor(() => expect(state!.value).toBe('denied'));
+    scope.stop();
+  });
+
+  it('binds the change listener exactly once after resolution', async () => {
+    const { navigator, status } = stubPermissions('granted');
+    const scope = effectScope();
+    let state: UsePermissionReturn;
+    scope.run(() => {
+      state = usePermission('camera', { navigator });
+    });
+
+    await vi.waitFor(() => expect(state!.value).toBe('granted'));
+    expect(status.addEventListener).toHaveBeenCalledTimes(1);
+    expect(status.addEventListener).toHaveBeenCalledWith('change', expect.any(Function), { passive: true });
+    scope.stop();
+  });
+
+  it('removes the change listener when the scope is disposed', async () => {
+    const { navigator, status } = stubPermissions('granted');
+    const scope = effectScope();
+    let state: UsePermissionReturn;
+    scope.run(() => {
+      state = usePermission('camera', { navigator });
+    });
+
+    await vi.waitFor(() => expect(state!.value).toBe('granted'));
+    scope.stop();
+    expect(status.removeEventListener).toHaveBeenCalledWith('change', expect.any(Function), { passive: true });
+  });
+
+  it('dedupes concurrent and repeated queries', async () => {
+    const { navigator, query } = stubPermissions('granted');
+    const scope = effectScope();
+    let result: any;
+    scope.run(() => {
+      result = usePermission('microphone', { controls: true, navigator });
+    });
+
+    // initial query() call from setup + two more concurrent calls
+    await Promise.all([result.query(), result.query()]);
+    // once resolved, subsequent calls reuse the cached status
+    await result.query();
+
+    expect(query).toHaveBeenCalledTimes(1);
+    scope.stop();
+  });
+
+  it('query resolves to the raw PermissionStatus with controls', async () => {
+    const { navigator, status } = stubPermissions('granted');
+    const scope = effectScope();
+    let result: any;
+    scope.run(() => {
+      result = usePermission('geolocation', { controls: true, navigator });
+    });
+
+    const resolved = await result.query();
+    expect(resolved).toBe(status);
+    scope.stop();
+  });
+
+  it('query resolves to undefined when unsupported', async () => {
+    const navigator = {} as Navigator;
+    const scope = effectScope();
+    let result: any;
+    scope.run(() => {
+      result = usePermission('geolocation', { controls: true, navigator });
+    });
+
+    expect(result.isSupported.value).toBeFalsy();
+    await expect(result.query()).resolves.toBeUndefined();
+    scope.stop();
+  });
+
+  it('falls back to "prompt" when the query rejects', async () => {
+    const query = vi.fn(async () => {
+      throw new TypeError('denied descriptor');
+    });
+    const navigator = { permissions: { query } } as unknown as Navigator;
+    const scope = effectScope();
+    let state: UsePermissionReturn;
+    scope.run(() => {
+      state = usePermission('push', { navigator });
+    });
+
+    await vi.waitFor(() => expect(state!.value).toBe('prompt'));
+    scope.stop();
+  });
+
+  it('accepts a descriptor object', async () => {
+    const { navigator, query } = stubPermissions('granted');
+    const scope = effectScope();
+    let state: UsePermissionReturn;
+    scope.run(() => {
+      state = usePermission({ name: 'push', userVisibleOnly: true } as PermissionDescriptor, { navigator });
+    });
+
+    await vi.waitFor(() => expect(state!.value).toBe('granted'));
+    expect(query).toHaveBeenCalledWith({ name: 'push', userVisibleOnly: true });
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/browser/usePermission/index.ts b/vue/toolkit/src/composables/browser/usePermission/index.ts
new file mode 100644
index 0000000..f7dce7f
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/usePermission/index.ts
@@ -0,0 +1,159 @@
+import { shallowRef, toRaw } from 'vue';
+import type { Ref, ShallowRef } from 'vue';
+import { isString } from '@robonen/stdlib';
+import { defaultNavigator } from '@/types';
+import type { ConfigurableNavigator } from '@/types';
+import { useSupported } from '@/composables/utilities/useSupported';
+import { useEventListener } from '@/composables/browser/useEventListener';
+
+/**
+ * Permission names not yet present in the lib DOM `PermissionName` union but
+ * supported by browsers behind the Permissions API.
+ */
+export type PermissionDescriptorNamePolyfill
+  = | 'accelerometer'
+    | 'accessibility-events'
+    | 'ambient-light-sensor'
+    | 'background-sync'
+    | 'camera'
+    | 'clipboard-read'
+    | 'clipboard-write'
+    | 'geolocation'
+    | 'gyroscope'
+    | 'local-fonts'
+    | 'magnetometer'
+    | 'microphone'
+    | 'midi'
+    | 'notifications'
+    | 'payment-handler'
+    | 'persistent-storage'
+    | 'push'
+    | 'screen-wake-lock'
+    | 'speaker'
+    | 'speaker-selection'
+    | 'storage-access'
+    | 'window-management';
+
+export type GeneralPermissionDescriptor
+  = | PermissionDescriptor
+    | { name: PermissionDescriptorNamePolyfill };
+
+export interface UsePermissionOptions<Controls extends boolean> extends ConfigurableNavigator {
+  /**
+   * Expose the `isSupported` flag and a `query` method that returns the raw `PermissionStatus`
+   *
+   * @default false
+   */
+  controls?: Controls;
+}
+
+export type UsePermissionReturn = Readonly<Ref<PermissionState | undefined>>;
+
+export interface UsePermissionReturnWithControls {
+  /**
+   * Reactive permission state (`granted` | `denied` | `prompt`), or `undefined` while unsupported/unresolved
+   */
+  state: UsePermissionReturn;
+  /**
+   * Whether the Permissions API is available
+   */
+  isSupported: Readonly<Ref<boolean>>;
+  /**
+   * Query (or re-query) the permission, resolving to the raw `PermissionStatus`
+   */
+  query: () => Promise<PermissionStatus | undefined>;
+}
+
+/**
+ * @name usePermission
+ * @category Browser
+ * @description Reactive Permissions API state.
+ *
+ * @param {GeneralPermissionDescriptor | string} permissionDesc The permission to query
+ * @param {UsePermissionOptions} [options={}] Options
+ * @returns {UsePermissionReturn | UsePermissionReturnWithControls} The permission state, or controls when `controls: true`
+ *
+ * @example
+ * const microphone = usePermission('microphone');
+ *
+ * @example
+ * const { state, isSupported, query } = usePermission('camera', { controls: true });
+ *
+ * @since 0.0.15
+ */
+export function usePermission(
+  permissionDesc: GeneralPermissionDescriptor | GeneralPermissionDescriptor['name'],
+  options?: UsePermissionOptions<false>,
+): UsePermissionReturn;
+export function usePermission(
+  permissionDesc: GeneralPermissionDescriptor | GeneralPermissionDescriptor['name'],
+  options: UsePermissionOptions<true>,
+): UsePermissionReturnWithControls;
+export function usePermission(
+  permissionDesc: GeneralPermissionDescriptor | GeneralPermissionDescriptor['name'],
+  options: UsePermissionOptions<boolean> = {},
+): UsePermissionReturn | UsePermissionReturnWithControls {
+  const { controls = false, navigator = defaultNavigator } = options;
+
+  const isSupported = useSupported(() => !!navigator && 'permissions' in navigator);
+
+  const desc = (isString(permissionDesc)
+    ? { name: permissionDesc }
+    : permissionDesc) as PermissionDescriptor;
+
+  // Shallow refs: `PermissionStatus` is a host object, deep reactivity is wasteful.
+  const permissionStatus: ShallowRef<PermissionStatus | undefined> = shallowRef();
+  const state: ShallowRef<PermissionState | undefined> = shallowRef();
+
+  const update = (): void => {
+    state.value = permissionStatus.value?.state ?? 'prompt';
+  };
+
+  // Register the `change` listener synchronously against the reactive ref so it
+  // auto-rebinds when the status resolves and auto-cleans on scope dispose.
+  useEventListener(permissionStatus, 'change', update, { passive: true });
+
+  // Dedupe concurrent/repeat calls: once a query is in flight we reuse it.
+  let queryPromise: Promise<PermissionStatus | undefined> | undefined;
+
+  const query = (): Promise<PermissionStatus | undefined> => {
+    if (!isSupported.value)
+      return Promise.resolve(undefined);
+
+    if (permissionStatus.value)
+      return Promise.resolve(permissionStatus.value);
+
+    if (queryPromise)
+      return queryPromise;
+
+    queryPromise = navigator!.permissions
+      .query(desc)
+      .then((status) => {
+        permissionStatus.value = status;
+        return status;
+      })
+      .catch(() => {
+        permissionStatus.value = undefined;
+        return undefined;
+      })
+      .finally(() => {
+        update();
+        queryPromise = undefined;
+      });
+
+    return queryPromise;
+  };
+
+  query();
+
+  if (controls) {
+    return {
+      state: state as UsePermissionReturn,
+      isSupported,
+      // `toRaw` so callers get the underlying `PermissionStatus`, not a reactive proxy.
+      query: () => query().then(status => (status ? toRaw(status) : undefined)),
+    };
+  }
+
+  return state as UsePermissionReturn;
+}
diff --git a/vue/toolkit/src/composables/browser/usePreferredColorScheme/demo.vue b/vue/toolkit/src/composables/browser/usePreferredColorScheme/demo.vue
new file mode 100644
index 0000000..7106197
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/usePreferredColorScheme/demo.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { usePreferredColorScheme } from './index';
+
+const scheme = usePreferredColorScheme();
+
+const options = [
+  { value: 'light', label: 'Light', icon: '☀️', hint: 'prefers-color-scheme: light' },
+  { value: 'dark', label: 'Dark', icon: '🌙', hint: 'prefers-color-scheme: dark' },
+  { value: 'no-preference', label: 'No preference', icon: '🌓', hint: 'no explicit preference' },
+] as const;
+
+const active = computed(() => options.find(o => o.value === scheme.value));
+
+// A tiny live preview that flips its own palette based on the OS preference,
+// independent of the docs site theme.
+const previewClass = computed(() =>
+  scheme.value === 'dark'
+    ? 'bg-zinc-900 text-zinc-100 border-zinc-700'
+    : 'bg-white text-zinc-900 border-zinc-200',
+);
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Preferred color scheme
+      </span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        <span class="size-1.5 rounded-full bg-emerald-500" />
+        live
+      </span>
+    </div>
+
+    <ul class="flex flex-col gap-2">
+      <li
+        v-for="option in options"
+        :key="option.value"
+        class="flex items-center gap-3 rounded-lg border px-3 py-2.5 transition"
+        :class="scheme === option.value
+          ? 'border-(--accent) bg-(--accent-subtle)'
+          : 'border-(--border) bg-(--bg-elevated)'"
+      >
+        <span class="text-lg leading-none">{{ option.icon }}</span>
+        <span class="flex flex-1 flex-col">
+          <span
+            class="text-sm font-medium"
+            :class="scheme === option.value ? 'text-(--accent-text)' : 'text-(--fg)'"
+          >
+            {{ option.label }}
+          </span>
+          <span class="font-mono text-xs text-(--fg-subtle)">{{ option.hint }}</span>
+        </span>
+        <span
+          v-if="scheme === option.value"
+          class="text-(--accent-text)"
+          aria-hidden="true"
+        >✓</span>
+      </li>
+    </ul>
+
+    <div
+      class="flex items-center gap-3 rounded-xl border p-4 transition-colors"
+      :class="previewClass"
+    >
+      <span class="text-2xl">{{ active?.icon }}</span>
+      <div class="flex flex-col">
+        <span class="text-sm font-semibold">Self-themed preview</span>
+        <span class="text-xs opacity-70">
+          Resolved to <span class="font-mono">{{ scheme }}</span>
+        </span>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Read-only: change your OS appearance setting to see this update instantly.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/usePreferredColorScheme/index.test.ts b/vue/toolkit/src/composables/browser/usePreferredColorScheme/index.test.ts
new file mode 100644
index 0000000..b9a1fa8
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/usePreferredColorScheme/index.test.ts
@@ -0,0 +1,53 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick } from 'vue';
+import { usePreferredColorScheme } from '.';
+
+function stubScheme(scheme: 'dark' | 'light' | 'none') {
+  vi.stubGlobal('matchMedia', vi.fn((media: string) => ({
+    matches: scheme !== 'none' && media.includes(scheme),
+    media,
+    addEventListener: () => {},
+    removeEventListener: () => {},
+  })));
+}
+
+describe(usePreferredColorScheme, () => {
+  beforeEach(() => vi.stubGlobal('matchMedia', undefined));
+  afterEach(() => vi.unstubAllGlobals());
+
+  it('returns dark when dark is preferred', async () => {
+    stubScheme('dark');
+    const scope = effectScope();
+    let scheme: ReturnType<typeof usePreferredColorScheme>;
+    scope.run(() => {
+      scheme = usePreferredColorScheme();
+    });
+    await nextTick();
+    expect(scheme!.value).toBe('dark');
+    scope.stop();
+  });
+
+  it('returns light when light is preferred', async () => {
+    stubScheme('light');
+    const scope = effectScope();
+    let scheme: ReturnType<typeof usePreferredColorScheme>;
+    scope.run(() => {
+      scheme = usePreferredColorScheme();
+    });
+    await nextTick();
+    expect(scheme!.value).toBe('light');
+    scope.stop();
+  });
+
+  it('returns no-preference when neither matches', async () => {
+    stubScheme('none');
+    const scope = effectScope();
+    let scheme: ReturnType<typeof usePreferredColorScheme>;
+    scope.run(() => {
+      scheme = usePreferredColorScheme();
+    });
+    await nextTick();
+    expect(scheme!.value).toBe('no-preference');
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/browser/usePreferredColorScheme/index.ts b/vue/toolkit/src/composables/browser/usePreferredColorScheme/index.ts
new file mode 100644
index 0000000..4d773c7
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/usePreferredColorScheme/index.ts
@@ -0,0 +1,36 @@
+import { computed } from 'vue';
+import type { ComputedRef } from 'vue';
+import type { ConfigurableWindow } from '@/types';
+import { useMediaQuery } from '@/composables/browser/useMediaQuery';
+
+export type ColorSchemePreference = 'dark' | 'light' | 'no-preference';
+
+/**
+ * @name usePreferredColorScheme
+ * @category Browser
+ * @description Reactive `prefers-color-scheme` media query.
+ *
+ * @param {ConfigurableWindow} [options={}] Options
+ * @returns {ComputedRef<ColorSchemePreference>} `'dark'`, `'light'`, or `'no-preference'`
+ *
+ * @example
+ * const scheme = usePreferredColorScheme();
+ *
+ * @since 0.0.15
+ */
+export function usePreferredColorScheme(
+  options: ConfigurableWindow = {},
+): ComputedRef<ColorSchemePreference> {
+  const isLight = useMediaQuery('(prefers-color-scheme: light)', options);
+  const isDark = useMediaQuery('(prefers-color-scheme: dark)', options);
+
+  return computed(() => {
+    if (isDark.value)
+      return 'dark';
+
+    if (isLight.value)
+      return 'light';
+
+    return 'no-preference';
+  });
+}
diff --git a/vue/toolkit/src/composables/browser/usePreferredContrast/demo.vue b/vue/toolkit/src/composables/browser/usePreferredContrast/demo.vue
new file mode 100644
index 0000000..637cea6
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/usePreferredContrast/demo.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { usePreferredContrast } from './index';
+
+const contrast = usePreferredContrast({ ssrContrast: 'no-preference' });
+
+const levels = [
+  { value: 'more', label: 'More', desc: 'Heavier borders, stronger separation', query: 'prefers-contrast: more' },
+  { value: 'less', label: 'Less', desc: 'Softer, lower-contrast surfaces', query: 'prefers-contrast: less' },
+  { value: 'custom', label: 'Custom', desc: 'A user-defined contrast scheme', query: 'prefers-contrast: custom' },
+  { value: 'no-preference', label: 'No preference', desc: 'Default system contrast', query: 'prefers-contrast: no-preference' },
+] as const;
+
+const active = computed(() => levels.find(l => l.value === contrast.value));
+
+// Demonstrate adapting UI intensity to the reported contrast level.
+const cardClass = computed(() => {
+  switch (contrast.value) {
+    case 'more':
+      return 'border-(--border-strong) bg-(--bg-inset)';
+    case 'less':
+      return 'border-(--border) bg-(--bg-subtle) opacity-90';
+    default:
+      return 'border-(--border) bg-(--bg-elevated)';
+  }
+});
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Preferred contrast
+      </span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        {{ contrast }}
+      </span>
+    </div>
+
+    <div class="grid grid-cols-2 gap-2">
+      <div
+        v-for="level in levels"
+        :key="level.value"
+        class="flex flex-col gap-1 rounded-lg border px-3 py-2.5 transition"
+        :class="contrast === level.value
+          ? 'border-(--accent) bg-(--accent-subtle)'
+          : 'border-(--border) bg-(--bg-elevated)'"
+      >
+        <span
+          class="text-sm font-medium"
+          :class="contrast === level.value ? 'text-(--accent-text)' : 'text-(--fg)'"
+        >
+          {{ level.label }}
+        </span>
+        <span class="text-xs leading-snug text-(--fg-muted)">{{ level.desc }}</span>
+      </div>
+    </div>
+
+    <div class="rounded-xl border p-4 transition-colors" :class="cardClass">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Adaptive surface
+      </span>
+      <p class="mt-1 text-sm text-(--fg)">
+        This card adjusts its borders and fill to match the
+        <span class="font-mono text-(--fg-muted)">{{ active?.query }}</span> level.
+      </p>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Read-only: toggle your OS accessibility "increase / reduce contrast" setting to update.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/usePreferredContrast/index.test.ts b/vue/toolkit/src/composables/browser/usePreferredContrast/index.test.ts
new file mode 100644
index 0000000..627e9cd
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/usePreferredContrast/index.test.ts
@@ -0,0 +1,93 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick } from 'vue';
+import { usePreferredContrast } from '.';
+
+function stubMatchMedia(matching: string): void {
+  vi.stubGlobal('matchMedia', vi.fn((media: string) => ({
+    matches: media.includes(matching),
+    media,
+    addEventListener: () => {},
+    removeEventListener: () => {},
+  })));
+}
+
+describe(usePreferredContrast, () => {
+  beforeEach(() => vi.stubGlobal('matchMedia', undefined));
+  afterEach(() => vi.unstubAllGlobals());
+
+  it.each([
+    ['more'],
+    ['less'],
+    ['custom'],
+    ['no-preference'],
+  ] as const)('resolves the "%s" contrast preference', async (preference) => {
+    stubMatchMedia(`prefers-contrast: ${preference}`);
+
+    const scope = effectScope();
+    let contrast: ReturnType<typeof usePreferredContrast>;
+    scope.run(() => {
+      contrast = usePreferredContrast();
+    });
+    await nextTick();
+
+    expect(contrast!.value).toBe(preference);
+    scope.stop();
+  });
+
+  it('prioritizes "more" over the other preferences', async () => {
+    // Match everything; the resolution order must win.
+    vi.stubGlobal('matchMedia', vi.fn((media: string) => ({
+      matches: true,
+      media,
+      addEventListener: () => {},
+      removeEventListener: () => {},
+    })));
+
+    const scope = effectScope();
+    let contrast: ReturnType<typeof usePreferredContrast>;
+    scope.run(() => {
+      contrast = usePreferredContrast();
+    });
+    await nextTick();
+
+    expect(contrast!.value).toBe('more');
+    scope.stop();
+  });
+
+  it('falls back to "no-preference" when matchMedia is unsupported (SSR)', async () => {
+    // matchMedia is undefined (stubbed in beforeEach).
+    const scope = effectScope();
+    let contrast: ReturnType<typeof usePreferredContrast>;
+    scope.run(() => {
+      contrast = usePreferredContrast();
+    });
+    await nextTick();
+
+    expect(contrast!.value).toBe('no-preference');
+    scope.stop();
+  });
+
+  it('honors a custom ssrContrast fallback when unsupported', async () => {
+    const scope = effectScope();
+    let contrast: ReturnType<typeof usePreferredContrast>;
+    scope.run(() => {
+      contrast = usePreferredContrast({ ssrContrast: 'more' });
+    });
+    await nextTick();
+
+    expect(contrast!.value).toBe('more');
+    scope.stop();
+  });
+
+  it('returns "no-preference" with no window provided', async () => {
+    const scope = effectScope();
+    let contrast: ReturnType<typeof usePreferredContrast>;
+    scope.run(() => {
+      contrast = usePreferredContrast({ window: undefined });
+    });
+    await nextTick();
+
+    expect(contrast!.value).toBe('no-preference');
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/browser/usePreferredContrast/index.ts b/vue/toolkit/src/composables/browser/usePreferredContrast/index.ts
new file mode 100644
index 0000000..8254bd0
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/usePreferredContrast/index.ts
@@ -0,0 +1,61 @@
+import { computed } from 'vue';
+import type { ComputedRef } from 'vue';
+import { useMediaQuery } from '@/composables/browser/useMediaQuery';
+import type { UseMediaQueryOptions } from '@/composables/browser/useMediaQuery';
+
+export type ContrastType
+  = 'more' | 'less' | 'custom' | 'no-preference';
+
+export interface UsePreferredContrastOptions extends UseMediaQueryOptions {
+  /**
+   * The contrast preference assumed during SSR (and the first client render),
+   * before `window.matchMedia` is available, to avoid hydration flicker.
+   *
+   * @default 'no-preference'
+   */
+  ssrContrast?: ContrastType;
+}
+
+/**
+ * @name usePreferredContrast
+ * @category Browser
+ * @description Reactive `prefers-contrast` media query, resolving to the user's
+ * preferred contrast level. SSR-safe with an optional SSR fallback value.
+ *
+ * @param {UsePreferredContrastOptions} [options={}] Options (custom `window`, `ssrContrast`)
+ * @returns {ComputedRef<ContrastType>} Readonly ref of the preferred contrast: `'more' | 'less' | 'custom' | 'no-preference'`
+ *
+ * @example
+ * const contrast = usePreferredContrast();
+ *
+ * @example
+ * // Provide an SSR fallback to avoid hydration flicker
+ * const contrast = usePreferredContrast({ ssrContrast: 'more' });
+ *
+ * @since 0.0.15
+ */
+export function usePreferredContrast(
+  options: UsePreferredContrastOptions = {},
+): ComputedRef<ContrastType> {
+  const { ssrContrast = 'no-preference', ...mediaOptions } = options;
+
+  const isMore = useMediaQuery('(prefers-contrast: more)', mediaOptions);
+  const isLess = useMediaQuery('(prefers-contrast: less)', mediaOptions);
+  const isCustom = useMediaQuery('(prefers-contrast: custom)', mediaOptions);
+  const isNoPreference = useMediaQuery('(prefers-contrast: no-preference)', mediaOptions);
+
+  return computed<ContrastType>(() => {
+    if (isMore.value)
+      return 'more';
+    if (isLess.value)
+      return 'less';
+    if (isCustom.value)
+      return 'custom';
+    // When no `prefers-contrast` query matches we're either on a browser that
+    // does not report a preference, or rendering on the server. Distinguish the
+    // explicit `no-preference` match from the unknown/SSR case via the fallback.
+    if (isNoPreference.value)
+      return 'no-preference';
+    return ssrContrast;
+  });
+}
diff --git a/vue/toolkit/src/composables/browser/usePreferredDark/demo.vue b/vue/toolkit/src/composables/browser/usePreferredDark/demo.vue
new file mode 100644
index 0000000..c190cd2
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/usePreferredDark/demo.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { usePreferredDark } from './index';
+
+const isDark = usePreferredDark();
+
+const label = computed(() => (isDark.value ? 'Dark' : 'Light'));
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        prefers-color-scheme: dark
+      </span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition-colors"
+        :class="isDark
+          ? 'border-indigo-500/30 bg-indigo-500/10 text-indigo-600 dark:text-indigo-300'
+          : 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'"
+      >
+        {{ isDark ? 'true' : 'false' }}
+      </span>
+    </div>
+
+    <!-- A miniature sky scene that flips between day and night. -->
+    <div
+      class="relative flex h-40 items-end overflow-hidden rounded-xl border border-(--border) p-4 transition-colors duration-500"
+      :class="isDark
+        ? 'bg-gradient-to-b from-slate-900 to-slate-700'
+        : 'bg-gradient-to-b from-sky-300 to-sky-100'"
+    >
+      <!-- Sun / Moon -->
+      <div
+        class="absolute right-5 top-5 size-12 rounded-full transition-all duration-500"
+        :class="isDark
+          ? 'bg-zinc-200 shadow-[0_0_28px_6px_rgba(228,228,231,0.4)]'
+          : 'bg-amber-300 shadow-[0_0_36px_10px_rgba(252,211,77,0.6)]'"
+      />
+      <!-- Stars, only at night -->
+      <Transition
+        enter-active-class="transition-opacity duration-700"
+        enter-from-class="opacity-0"
+        leave-active-class="transition-opacity duration-300"
+        leave-to-class="opacity-0"
+      >
+        <div v-if="isDark" class="absolute inset-0">
+          <span class="absolute left-6 top-7 size-1 rounded-full bg-white" />
+          <span class="absolute left-20 top-12 size-0.5 rounded-full bg-white" />
+          <span class="absolute left-32 top-6 size-1 rounded-full bg-white" />
+          <span class="absolute left-12 top-16 size-0.5 rounded-full bg-white" />
+          <span class="absolute left-40 top-16 size-1 rounded-full bg-white" />
+        </div>
+      </Transition>
+      <span
+        class="relative z-10 text-2xl font-bold tabular-nums transition-colors duration-500"
+        :class="isDark ? 'text-zinc-100' : 'text-slate-800'"
+      >
+        {{ label }}
+      </span>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+      const isDark = usePreferredDark()
+      <span class="text-(--fg-subtle)"> // </span>{{ isDark }}
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Read-only: switch your OS to dark/light mode to watch the scene change.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/usePreferredDark/index.test.ts b/vue/toolkit/src/composables/browser/usePreferredDark/index.test.ts
new file mode 100644
index 0000000..e889184
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/usePreferredDark/index.test.ts
@@ -0,0 +1,27 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick } from 'vue';
+import { usePreferredDark } from '.';
+
+describe(usePreferredDark, () => {
+  beforeEach(() => vi.stubGlobal('matchMedia', undefined));
+  afterEach(() => vi.unstubAllGlobals());
+
+  it('reflects the prefers-color-scheme: dark query', async () => {
+    vi.stubGlobal('matchMedia', vi.fn((media: string) => ({
+      matches: media.includes('dark'),
+      media,
+      addEventListener: () => {},
+      removeEventListener: () => {},
+    })));
+
+    const scope = effectScope();
+    let isDark: ReturnType<typeof usePreferredDark>;
+    scope.run(() => {
+      isDark = usePreferredDark();
+    });
+    await nextTick();
+
+    expect(isDark!.value).toBeTruthy();
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/browser/usePreferredDark/index.ts b/vue/toolkit/src/composables/browser/usePreferredDark/index.ts
new file mode 100644
index 0000000..85a9a19
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/usePreferredDark/index.ts
@@ -0,0 +1,20 @@
+import type { Ref } from 'vue';
+import type { ConfigurableWindow } from '@/types';
+import { useMediaQuery } from '@/composables/browser/useMediaQuery';
+
+/**
+ * @name usePreferredDark
+ * @category Browser
+ * @description Reactive `prefers-color-scheme: dark` media query.
+ *
+ * @param {ConfigurableWindow} [options={}] Options
+ * @returns {Ref<boolean>} Whether the user prefers a dark color scheme
+ *
+ * @example
+ * const isDark = usePreferredDark();
+ *
+ * @since 0.0.15
+ */
+export function usePreferredDark(options: ConfigurableWindow = {}): Ref<boolean> {
+  return useMediaQuery('(prefers-color-scheme: dark)', options);
+}
diff --git a/vue/toolkit/src/composables/browser/usePreferredLanguages/demo.vue b/vue/toolkit/src/composables/browser/usePreferredLanguages/demo.vue
new file mode 100644
index 0000000..28820be
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/usePreferredLanguages/demo.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { usePreferredLanguages } from './index';
+
+const languages = usePreferredLanguages();
+
+// Resolve a human-friendly name + flag for each BCP-47 tag where possible.
+const displayNames = computed(() => {
+  try {
+    return new Intl.DisplayNames(['en'], { type: 'language' });
+  }
+  catch {
+    return undefined;
+  }
+});
+
+function nameOf(tag: string): string {
+  return displayNames.value?.of(tag) ?? tag;
+}
+
+function flagOf(tag: string): string {
+  const region = tag.split('-')[1]?.toUpperCase();
+  if (!region || region.length !== 2)
+    return '🌐';
+  // Convert a 2-letter region code to a flag emoji.
+  return String.fromCodePoint(...[...region].map(c => 0x1F1E6 + c.charCodeAt(0) - 65));
+}
+
+const primary = computed(() => languages.value[0] ?? 'en');
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        navigator.languages
+      </span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        {{ languages.length }} {{ languages.length === 1 ? 'locale' : 'locales' }}
+      </span>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Primary language
+      </span>
+      <div class="mt-1 flex items-center gap-2.5">
+        <span class="text-2xl leading-none">{{ flagOf(primary) }}</span>
+        <span class="flex flex-col">
+          <span class="text-base font-semibold text-(--fg)">{{ nameOf(primary) }}</span>
+          <span class="font-mono text-xs text-(--fg-subtle)">{{ primary }}</span>
+        </span>
+      </div>
+    </div>
+
+    <ol class="flex flex-col gap-2">
+      <li
+        v-for="(lang, index) in languages"
+        :key="`${lang}-${index}`"
+        class="flex items-center gap-3 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2"
+      >
+        <span class="w-5 text-center font-mono text-xs text-(--fg-subtle) tabular-nums">
+          {{ index + 1 }}
+        </span>
+        <span class="text-lg leading-none">{{ flagOf(lang) }}</span>
+        <span class="flex flex-1 flex-col">
+          <span class="text-sm font-medium text-(--fg)">{{ nameOf(lang) }}</span>
+          <span class="font-mono text-xs text-(--fg-subtle)">{{ lang }}</span>
+        </span>
+        <span
+          v-if="index === 0"
+          class="inline-flex items-center rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+        >
+          preferred
+        </span>
+      </li>
+    </ol>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Read-only: updates automatically on the browser's <span class="font-mono">languagechange</span> event.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/usePreferredLanguages/index.test.ts b/vue/toolkit/src/composables/browser/usePreferredLanguages/index.test.ts
new file mode 100644
index 0000000..a8cbad8
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/usePreferredLanguages/index.test.ts
@@ -0,0 +1,131 @@
+import { describe, expect, it, vi } from 'vitest';
+import { effectScope } from 'vue';
+import { usePreferredLanguages } from '.';
+import type * as Types from '@/types';
+
+type Listener = (event: Event) => void;
+
+interface StubWindow {
+  navigator: { languages: readonly string[] };
+  addEventListener: (type: string, cb: Listener, options?: unknown) => void;
+  removeEventListener: (type: string, cb: Listener) => void;
+  dispatch: () => void;
+  listenerCount: () => number;
+  lastOptions: () => unknown;
+}
+
+/**
+ * Build a minimal stub `window` whose `navigator.languages` is mutable and that
+ * records its `languagechange` listeners so we can simulate the browser event.
+ */
+function makeWindow(initial: string[]): StubWindow {
+  const listeners = new Set<Listener>();
+  let languages: readonly string[] = initial;
+  let captured: unknown;
+
+  const stub: StubWindow = {
+    navigator: {
+      get languages() {
+        return languages;
+      },
+    },
+    addEventListener(type, cb, options) {
+      if (type === 'languagechange') {
+        listeners.add(cb);
+        captured = options;
+      }
+    },
+    removeEventListener(type, cb) {
+      if (type === 'languagechange') listeners.delete(cb);
+    },
+    dispatch() {
+      for (const cb of listeners) cb(new Event('languagechange'));
+    },
+    listenerCount: () => listeners.size,
+    lastOptions: () => captured,
+  };
+
+  // Allow tests to mutate languages before dispatching.
+  Object.defineProperty(stub, 'setLanguages', {
+    value: (next: string[]) => { languages = next; },
+  });
+
+  return stub;
+}
+
+describe(usePreferredLanguages, () => {
+  it('reads the initial navigator.languages', () => {
+    const win = makeWindow(['en-US', 'en']);
+    const scope = effectScope();
+    let langs: ReturnType<typeof usePreferredLanguages>;
+    scope.run(() => {
+      langs = usePreferredLanguages({ window: win as unknown as Window });
+    });
+
+    expect(langs!.value).toEqual(['en-US', 'en']);
+    scope.stop();
+  });
+
+  it('updates on languagechange', () => {
+    const win = makeWindow(['en']);
+    const scope = effectScope();
+    let langs: ReturnType<typeof usePreferredLanguages>;
+    scope.run(() => {
+      langs = usePreferredLanguages({ window: win as unknown as Window });
+    });
+
+    (win as unknown as { setLanguages: (n: string[]) => void }).setLanguages(['fr-FR', 'fr', 'en']);
+    win.dispatch();
+
+    expect(langs!.value).toEqual(['fr-FR', 'fr', 'en']);
+    scope.stop();
+  });
+
+  it('registers the listener with a passive option', () => {
+    const win = makeWindow(['en']);
+    const scope = effectScope();
+    scope.run(() => {
+      usePreferredLanguages({ window: win as unknown as Window });
+    });
+
+    expect(win.listenerCount()).toBe(1);
+    expect(win.lastOptions()).toEqual({ passive: true });
+    scope.stop();
+  });
+
+  it('removes the listener when the scope is disposed', () => {
+    const win = makeWindow(['en']);
+    const scope = effectScope();
+    scope.run(() => {
+      usePreferredLanguages({ window: win as unknown as Window });
+    });
+
+    expect(win.listenerCount()).toBe(1);
+    scope.stop();
+    expect(win.listenerCount()).toBe(0);
+  });
+
+  it('falls back to ["en"] when no window is available (SSR)', async () => {
+    // `defaultWindow` is import-time captured, so override it via a module mock
+    // to simulate a server environment where no window exists.
+    vi.resetModules();
+    vi.doMock('@/types', async () => {
+      const actual = await vi.importActual<typeof Types>('@/types');
+      return { ...actual, defaultWindow: undefined };
+    });
+
+    const { usePreferredLanguages: ssrUsePreferredLanguages } = await import('.');
+
+    const scope = effectScope();
+    let langs: ReturnType<typeof ssrUsePreferredLanguages>;
+    scope.run(() => {
+      langs = ssrUsePreferredLanguages();
+    });
+
+    expect(langs!.value).toEqual(['en']);
+    scope.stop();
+
+    vi.doUnmock('@/types');
+    vi.resetModules();
+  });
+});
diff --git a/vue/toolkit/src/composables/browser/usePreferredLanguages/index.ts b/vue/toolkit/src/composables/browser/usePreferredLanguages/index.ts
new file mode 100644
index 0000000..1e4c584
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/usePreferredLanguages/index.ts
@@ -0,0 +1,43 @@
+import type { ShallowRef } from 'vue';
+import { shallowRef } from 'vue';
+import { defaultWindow } from '@/types';
+import type { ConfigurableWindow } from '@/types';
+import { useEventListener } from '@/composables/browser/useEventListener';
+
+/**
+ * @name usePreferredLanguages
+ * @category Browser
+ * @description Reactive `navigator.languages`. Tracks the user's preferred languages and
+ * updates automatically whenever the browser emits a `languagechange` event.
+ *
+ * Falls back to `['en']` during SSR or when no `window` is available, so the returned
+ * value is always a non-empty array.
+ *
+ * @param {ConfigurableWindow} [options={}] Options
+ * @returns {ShallowRef<readonly string[]>} Reactive list of the user's preferred languages
+ *
+ * @example
+ * const languages = usePreferredLanguages();
+ * // -> ['en-US', 'en', 'fr']
+ *
+ * @example
+ * // Pass a custom window (e.g. an iframe)
+ * const languages = usePreferredLanguages({ window: iframe.contentWindow });
+ *
+ * @since 0.0.15
+ */
+export function usePreferredLanguages(options: ConfigurableWindow = {}): ShallowRef<readonly string[]> {
+  const { window = defaultWindow } = options;
+
+  if (!window)
+    return shallowRef<readonly string[]>(['en']);
+
+  const navigator = window.navigator;
+  const value = shallowRef<readonly string[]>(navigator.languages);
+
+  useEventListener(window, 'languagechange', () => {
+    value.value = navigator.languages;
+  }, { passive: true });
+
+  return value;
+}
diff --git a/vue/toolkit/src/composables/browser/usePreferredReducedMotion/demo.vue b/vue/toolkit/src/composables/browser/usePreferredReducedMotion/demo.vue
new file mode 100644
index 0000000..3324d2d
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/usePreferredReducedMotion/demo.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { usePreferredReducedMotion } from './index';
+
+const motion = usePreferredReducedMotion();
+
+const reduced = computed(() => motion.value === 'reduce');
+
+// Mirror the recommended pattern: derive a transition duration from the
+// preference so animations are disabled when the user asks for reduced motion.
+const duration = computed(() => (reduced.value ? 0 : 1.2));
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        prefers-reduced-motion
+      </span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition-colors"
+        :class="reduced
+          ? 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'
+          : 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'"
+      >
+        {{ motion }}
+      </span>
+    </div>
+
+    <!-- Animated demo box: the orbiting dot pauses when motion is reduced. -->
+    <div class="flex h-40 items-center justify-center rounded-xl border border-(--border) bg-(--bg-inset)">
+      <div class="relative size-24">
+        <div class="absolute inset-0 rounded-full border-2 border-dashed border-(--border-strong)" />
+        <div
+          class="orbit absolute left-1/2 top-1/2 size-24"
+          :style="{ animationDuration: `${duration}s`, animationPlayState: reduced ? 'paused' : 'running' }"
+        >
+          <span class="absolute -left-2 -top-2 size-4 rounded-full bg-(--accent) shadow-lg" />
+        </div>
+        <div class="absolute inset-0 flex items-center justify-center">
+          <span class="text-2xl">{{ reduced ? '⏸' : '🎞️' }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Derived setting
+      </span>
+      <div class="mt-1 flex items-baseline gap-2">
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">
+          {{ reduced ? 0 : 1200 }}
+        </span>
+        <span class="text-sm text-(--fg-muted)">ms transition</span>
+      </div>
+      <p class="mt-2 text-sm text-(--fg-muted)">
+        {{ reduced
+          ? 'Reduced motion requested — animations are disabled.'
+          : 'Full motion — animations run at normal speed.' }}
+      </p>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Read-only: enable "Reduce motion" in your OS accessibility settings to pause the orbit.
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.orbit {
+  animation-name: spin;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/vue/toolkit/src/composables/browser/usePreferredReducedMotion/index.test.ts b/vue/toolkit/src/composables/browser/usePreferredReducedMotion/index.test.ts
new file mode 100644
index 0000000..cb22262
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/usePreferredReducedMotion/index.test.ts
@@ -0,0 +1,101 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick } from 'vue';
+import { usePreferredReducedMotion } from '.';
+
+describe(usePreferredReducedMotion, () => {
+  beforeEach(() => vi.stubGlobal('matchMedia', undefined));
+  afterEach(() => vi.unstubAllGlobals());
+
+  it('resolves to "reduce" when the query matches', async () => {
+    vi.stubGlobal('matchMedia', vi.fn((media: string) => ({
+      matches: media.includes('reduce'),
+      media,
+      addEventListener: () => {},
+      removeEventListener: () => {},
+    })));
+
+    const scope = effectScope();
+    let motion: ReturnType<typeof usePreferredReducedMotion>;
+    scope.run(() => {
+      motion = usePreferredReducedMotion();
+    });
+    await nextTick();
+
+    expect(motion!.value).toBe('reduce');
+    scope.stop();
+  });
+
+  it('resolves to "no-preference" when the query does not match', async () => {
+    vi.stubGlobal('matchMedia', vi.fn((media: string) => ({
+      matches: false,
+      media,
+      addEventListener: () => {},
+      removeEventListener: () => {},
+    })));
+
+    const scope = effectScope();
+    let motion: ReturnType<typeof usePreferredReducedMotion>;
+    scope.run(() => {
+      motion = usePreferredReducedMotion();
+    });
+    await nextTick();
+
+    expect(motion!.value).toBe('no-preference');
+    scope.stop();
+  });
+
+  it('reacts to media query changes', async () => {
+    const listeners = new Set<(event: { matches: boolean }) => void>();
+    let currentMatches = false;
+
+    vi.stubGlobal('matchMedia', vi.fn((media: string) => ({
+      get matches() {
+        return currentMatches;
+      },
+      media,
+      addEventListener: (_: string, handler: (event: { matches: boolean }) => void) => listeners.add(handler),
+      removeEventListener: (_: string, handler: (event: { matches: boolean }) => void) => listeners.delete(handler),
+    })));
+
+    const scope = effectScope();
+    let motion: ReturnType<typeof usePreferredReducedMotion>;
+    scope.run(() => {
+      motion = usePreferredReducedMotion();
+    });
+    await nextTick();
+
+    expect(motion!.value).toBe('no-preference');
+
+    currentMatches = true;
+    listeners.forEach(handler => handler({ matches: true }));
+    await nextTick();
+
+    expect(motion!.value).toBe('reduce');
+    scope.stop();
+  });
+
+  it('falls back to "no-preference" when matchMedia is unsupported (SSR)', async () => {
+    // matchMedia is left undefined from beforeEach.
+    const scope = effectScope();
+    let motion: ReturnType<typeof usePreferredReducedMotion>;
+    scope.run(() => {
+      motion = usePreferredReducedMotion();
+    });
+    await nextTick();
+
+    expect(motion!.value).toBe('no-preference');
+    scope.stop();
+  });
+
+  it('returns "no-preference" when window is explicitly undefined (SSR)', async () => {
+    const scope = effectScope();
+    let motion: ReturnType<typeof usePreferredReducedMotion>;
+    scope.run(() => {
+      motion = usePreferredReducedMotion({ window: undefined });
+    });
+    await nextTick();
+
+    expect(motion!.value).toBe('no-preference');
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/browser/usePreferredReducedMotion/index.ts b/vue/toolkit/src/composables/browser/usePreferredReducedMotion/index.ts
new file mode 100644
index 0000000..e5d7222
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/usePreferredReducedMotion/index.ts
@@ -0,0 +1,41 @@
+import { computed } from 'vue';
+import type { ComputedRef } from 'vue';
+import { useMediaQuery } from '@/composables/browser/useMediaQuery';
+import type { UseMediaQueryOptions } from '@/composables/browser/useMediaQuery';
+
+export type ReducedMotionType
+  = | 'reduce'
+    | 'no-preference';
+
+export type UsePreferredReducedMotionOptions = UseMediaQueryOptions;
+
+export type UsePreferredReducedMotionReturn = ComputedRef<ReducedMotionType>;
+
+/**
+ * @name usePreferredReducedMotion
+ * @category Browser
+ * @description Reactive `prefers-reduced-motion` media query, resolving to
+ * `'reduce'` when the user requests reduced motion and `'no-preference'`
+ * otherwise. SSR-safe via {@link useMediaQuery}.
+ *
+ * @param {UsePreferredReducedMotionOptions} [options={}] Options (custom `window`)
+ * @returns {UsePreferredReducedMotionReturn} Readonly ref of the current motion preference
+ *
+ * @example
+ * const motion = usePreferredReducedMotion();
+ * // motion.value === 'reduce' | 'no-preference'
+ *
+ * @example
+ * watchEffect(() => {
+ *   transitionDuration.value = motion.value === 'reduce' ? 0 : 200;
+ * });
+ *
+ * @since 0.0.15
+ */
+export function usePreferredReducedMotion(
+  options: UsePreferredReducedMotionOptions = {},
+): UsePreferredReducedMotionReturn {
+  const isReduced = useMediaQuery('(prefers-reduced-motion: reduce)', options);
+
+  return computed<ReducedMotionType>(() => isReduced.value ? 'reduce' : 'no-preference');
+}
diff --git a/vue/toolkit/src/composables/browser/usePreferredReducedTransparency/demo.vue b/vue/toolkit/src/composables/browser/usePreferredReducedTransparency/demo.vue
new file mode 100644
index 0000000..3924f18
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/usePreferredReducedTransparency/demo.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { usePreferredReducedTransparency } from './index';
+
+const transparency = usePreferredReducedTransparency();
+
+const isReduced = computed(() => transparency.value === 'reduce');
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        prefers-reduced-transparency
+      </span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+        :class="isReduced
+          ? 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'
+          : 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'"
+      >
+        <span
+          class="size-1.5 rounded-full"
+          :class="isReduced ? 'bg-amber-500' : 'bg-emerald-500'"
+        />
+        {{ transparency }}
+      </span>
+    </div>
+
+    <!-- Live preview: a frosted glass panel that flattens when reduce is preferred -->
+    <div class="relative overflow-hidden rounded-xl border border-(--border) bg-(--bg-inset) p-4">
+      <div
+        class="pointer-events-none absolute -left-6 -top-8 size-28 rounded-full bg-(--accent) opacity-60 blur-xl"
+      />
+      <div
+        class="pointer-events-none absolute -bottom-10 right-2 size-24 rounded-full bg-sky-500 opacity-50 blur-xl"
+      />
+      <div
+        class="relative rounded-lg border border-(--border) p-4 transition"
+        :class="isReduced
+          ? 'bg-(--bg-elevated)'
+          : 'bg-(--bg-elevated)/60 backdrop-blur-md'"
+      >
+        <p class="text-sm font-medium text-(--fg)">
+          Glass card
+        </p>
+        <p class="mt-1 text-sm text-(--fg-muted)">
+          {{ isReduced
+            ? 'Translucency removed for clarity.'
+            : 'Background blurs through the panel.' }}
+        </p>
+      </div>
+    </div>
+
+    <p class="text-xs leading-relaxed text-(--fg-subtle)">
+      Toggle <span class="font-mono text-(--fg-muted)">Reduce transparency</span> in your OS
+      accessibility settings to see this update live.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/usePreferredReducedTransparency/index.test.ts b/vue/toolkit/src/composables/browser/usePreferredReducedTransparency/index.test.ts
new file mode 100644
index 0000000..2cbb0b6
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/usePreferredReducedTransparency/index.test.ts
@@ -0,0 +1,58 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick } from 'vue';
+import { usePreferredReducedTransparency } from '.';
+
+describe(usePreferredReducedTransparency, () => {
+  beforeEach(() => vi.stubGlobal('matchMedia', undefined));
+  afterEach(() => vi.unstubAllGlobals());
+
+  it('resolves to "reduce" when the media query matches', async () => {
+    vi.stubGlobal('matchMedia', vi.fn((media: string) => ({
+      matches: media.includes('reduce'),
+      media,
+      addEventListener: () => {},
+      removeEventListener: () => {},
+    })));
+
+    const scope = effectScope();
+    let transparency: ReturnType<typeof usePreferredReducedTransparency>;
+    scope.run(() => {
+      transparency = usePreferredReducedTransparency();
+    });
+    await nextTick();
+
+    expect(transparency!.value).toBe('reduce');
+    scope.stop();
+  });
+
+  it('resolves to "no-preference" when the media query does not match', async () => {
+    vi.stubGlobal('matchMedia', vi.fn((media: string) => ({
+      matches: false,
+      media,
+      addEventListener: () => {},
+      removeEventListener: () => {},
+    })));
+
+    const scope = effectScope();
+    let transparency: ReturnType<typeof usePreferredReducedTransparency>;
+    scope.run(() => {
+      transparency = usePreferredReducedTransparency();
+    });
+    await nextTick();
+
+    expect(transparency!.value).toBe('no-preference');
+    scope.stop();
+  });
+
+  it('defaults to "no-preference" when matchMedia is unsupported (SSR)', async () => {
+    const scope = effectScope();
+    let transparency: ReturnType<typeof usePreferredReducedTransparency>;
+    scope.run(() => {
+      transparency = usePreferredReducedTransparency({ window: undefined });
+    });
+    await nextTick();
+
+    expect(transparency!.value).toBe('no-preference');
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/browser/usePreferredReducedTransparency/index.ts b/vue/toolkit/src/composables/browser/usePreferredReducedTransparency/index.ts
new file mode 100644
index 0000000..0722414
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/usePreferredReducedTransparency/index.ts
@@ -0,0 +1,30 @@
+import { computed } from 'vue';
+import type { ComputedRef } from 'vue';
+import type { ConfigurableWindow } from '@/types';
+import { useMediaQuery } from '@/composables/browser/useMediaQuery';
+
+export type ReducedTransparencyType
+  = 'reduce' | 'no-preference';
+
+/**
+ * @name usePreferredReducedTransparency
+ * @category Browser
+ * @description Reactive `prefers-reduced-transparency` media query, resolving to
+ * `'reduce'` or `'no-preference'`. SSR-safe (defaults to `'no-preference'`).
+ *
+ * @param {ConfigurableWindow} [options={}] Options (custom `window`)
+ * @returns {ComputedRef<ReducedTransparencyType>} Readonly ref of the user's transparency preference
+ *
+ * @example
+ * const transparency = usePreferredReducedTransparency();
+ * // transparency.value === 'reduce' | 'no-preference'
+ *
+ * @since 0.0.15
+ */
+export function usePreferredReducedTransparency(
+  options: ConfigurableWindow = {},
+): ComputedRef<ReducedTransparencyType> {
+  const isReduced = useMediaQuery('(prefers-reduced-transparency: reduce)', options);
+
+  return computed<ReducedTransparencyType>(() => isReduced.value ? 'reduce' : 'no-preference');
+}
diff --git a/vue/toolkit/src/composables/browser/useScriptTag/demo.vue b/vue/toolkit/src/composables/browser/useScriptTag/demo.vue
new file mode 100644
index 0000000..8e4d142
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useScriptTag/demo.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { ref, shallowRef } from 'vue';
+import { useScriptTag } from './index';
+
+// A tiny, well-known public UMD script (no side effects beyond defining a global).
+const src = 'https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js';
+
+const status = ref<'idle' | 'loading' | 'loaded' | 'error'>('idle');
+const loadedAt = shallowRef<string | null>(null);
+
+const { scriptTag, load, unload } = useScriptTag(
+  src,
+  () => {
+    status.value = 'loaded';
+    loadedAt.value = new Date().toLocaleTimeString();
+  },
+  { manual: true },
+);
+
+async function onLoad() {
+  if (status.value === 'loading') return;
+  status.value = 'loading';
+  try {
+    await load();
+  }
+  catch {
+    status.value = 'error';
+  }
+}
+
+function onUnload() {
+  unload();
+  status.value = 'idle';
+  loadedAt.value = null;
+}
+
+const statusStyles = {
+  idle: 'border-(--border) bg-(--bg-inset) text-(--fg-muted)',
+  loading: 'border-sky-500/30 bg-sky-500/10 text-sky-600 dark:text-sky-400',
+  loaded: 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',
+  error: 'border-red-500/30 bg-red-500/10 text-red-600 dark:text-red-400',
+} as const;
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex items-center justify-between gap-3">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Script status
+        </span>
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium capitalize"
+          :class="statusStyles[status]"
+        >
+          <span
+            class="size-1.5 rounded-full"
+            :class="{
+              'bg-(--fg-subtle)': status === 'idle',
+              'bg-sky-500 animate-pulse': status === 'loading',
+              'bg-emerald-500': status === 'loaded',
+              'bg-red-500': status === 'error',
+            }"
+          />
+          {{ status }}
+        </span>
+      </div>
+
+      <div class="mt-3 truncate rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs text-(--fg-muted)">
+        {{ src }}
+      </div>
+
+      <dl class="mt-3 grid grid-cols-2 gap-2 text-sm">
+        <div>
+          <dt class="text-xs text-(--fg-subtle)">
+            &lt;script&gt; element
+          </dt>
+          <dd class="font-mono text-(--fg)">
+            {{ scriptTag ? 'present' : 'null' }}
+          </dd>
+        </div>
+        <div>
+          <dt class="text-xs text-(--fg-subtle)">
+            Loaded at
+          </dt>
+          <dd class="font-mono text-(--fg)">
+            {{ loadedAt ?? '—' }}
+          </dd>
+        </div>
+      </dl>
+    </div>
+
+    <div class="flex gap-2">
+      <button
+        type="button"
+        :disabled="status === 'loading' || status === 'loaded'"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="onLoad"
+      >
+        {{ status === 'loading' ? 'Loading…' : 'Load script' }}
+      </button>
+      <button
+        type="button"
+        :disabled="status !== 'loaded'"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="onUnload"
+      >
+        Unload
+      </button>
+    </div>
+
+    <p class="text-xs leading-relaxed text-(--fg-subtle)">
+      Manual mode — the tag is injected into <span class="font-mono text-(--fg-muted)">&lt;head&gt;</span>
+      only when you click, and removed on unload.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useScriptTag/index.test.ts b/vue/toolkit/src/composables/browser/useScriptTag/index.test.ts
new file mode 100644
index 0000000..44172a8
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useScriptTag/index.test.ts
@@ -0,0 +1,261 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { effectScope } from 'vue';
+import { useScriptTag } from '.';
+
+const SRC = 'https://example.com/sdk.js';
+
+function flushAll(): void {
+  // Fire `load` on every script tag currently in the head so awaited promises resolve.
+  document.head.querySelectorAll('script').forEach((el) => {
+    el.setAttribute('data-loaded', 'true');
+    el.dispatchEvent(new Event('load'));
+  });
+}
+
+describe(useScriptTag, () => {
+  afterEach(() => {
+    document.head.querySelectorAll('script').forEach(el => el.remove());
+    vi.unstubAllGlobals();
+  });
+
+  it('injects a script tag with the configured attributes', async () => {
+    const scope = effectScope();
+    let result!: ReturnType<typeof useScriptTag>;
+    scope.run(() => {
+      result = useScriptTag(SRC, undefined, {
+        manual: true,
+        type: 'module',
+        defer: true,
+        crossOrigin: 'anonymous',
+        referrerPolicy: 'no-referrer',
+        noModule: true,
+        nonce: 'abc123',
+        attrs: { 'data-test': 'yes', id: 'my-script' },
+      });
+    });
+
+    const promise = result.load();
+    const el = document.querySelector<HTMLScriptElement>(`script[src="${SRC}"]`)!;
+    expect(el).toBeInstanceOf(HTMLScriptElement);
+    expect(el.type).toBe('module');
+    expect(el.defer).toBeTruthy();
+    expect(el.crossOrigin).toBe('anonymous');
+    expect(el.referrerPolicy).toBe('no-referrer');
+    expect(el.noModule).toBeTruthy();
+    expect(el.nonce).toBe('abc123');
+    expect(el.getAttribute('data-test')).toBe('yes');
+    expect(el.getAttribute('id')).toBe('my-script');
+    expect(el.parentElement).toBe(document.head);
+
+    flushAll();
+    await promise;
+    expect(result.scriptTag.value).toBe(el);
+
+    scope.stop();
+  });
+
+  it('defaults to async and text/javascript', async () => {
+    const scope = effectScope();
+    let result!: ReturnType<typeof useScriptTag>;
+    scope.run(() => {
+      result = useScriptTag(SRC, undefined, { manual: true });
+    });
+
+    const promise = result.load(false);
+    const el = await promise as HTMLScriptElement;
+    expect(el.async).toBeTruthy();
+    expect(el.type).toBe('text/javascript');
+
+    scope.stop();
+  });
+
+  it('calls onLoaded and resolves with the element when the script loads', async () => {
+    const onLoaded = vi.fn();
+    const scope = effectScope();
+    let result!: ReturnType<typeof useScriptTag>;
+    scope.run(() => {
+      result = useScriptTag(SRC, onLoaded, { manual: true });
+    });
+
+    const promise = result.load();
+    flushAll();
+    const el = await promise;
+
+    expect(onLoaded).toHaveBeenCalledTimes(1);
+    expect(onLoaded).toHaveBeenCalledWith(el);
+    expect(result.scriptTag.value).toBe(el);
+
+    scope.stop();
+  });
+
+  it('resolves immediately when waitForScriptLoad is false', async () => {
+    const scope = effectScope();
+    let result!: ReturnType<typeof useScriptTag>;
+    scope.run(() => {
+      result = useScriptTag(SRC, undefined, { manual: true });
+    });
+
+    const el = await result.load(false);
+    expect(el).toBeInstanceOf(HTMLScriptElement);
+    expect(result.scriptTag.value).toBe(el);
+
+    scope.stop();
+  });
+
+  it('de-duplicates concurrent load calls into a single promise', () => {
+    const scope = effectScope();
+    let result!: ReturnType<typeof useScriptTag>;
+    scope.run(() => {
+      result = useScriptTag(SRC, undefined, { manual: true });
+    });
+
+    const a = result.load();
+    const b = result.load();
+    expect(a).toBe(b);
+    expect(document.querySelectorAll(`script[src="${SRC}"]`)).toHaveLength(1);
+
+    scope.stop();
+  });
+
+  it('reuses an existing already-loaded script tag', async () => {
+    // Pre-existing, already-loaded tag in the DOM.
+    const existing = document.createElement('script');
+    existing.src = SRC;
+    existing.setAttribute('data-loaded', 'true');
+    document.head.appendChild(existing);
+
+    const onLoaded = vi.fn();
+    const scope = effectScope();
+    let result!: ReturnType<typeof useScriptTag>;
+    scope.run(() => {
+      result = useScriptTag(SRC, onLoaded, { manual: true });
+    });
+
+    const el = await result.load();
+    expect(el).toBe(existing);
+    expect(result.scriptTag.value).toBe(existing);
+    // Only the original tag is present (no duplicate appended).
+    expect(document.querySelectorAll(`script[src="${SRC}"]`)).toHaveLength(1);
+    // onLoaded should not fire for the short-circuit path.
+    expect(onLoaded).not.toHaveBeenCalled();
+
+    scope.stop();
+  });
+
+  it('unload removes the tag and clears the ref', async () => {
+    const scope = effectScope();
+    let result!: ReturnType<typeof useScriptTag>;
+    scope.run(() => {
+      result = useScriptTag(SRC, undefined, { manual: true });
+    });
+
+    await result.load(false);
+    expect(document.querySelector(`script[src="${SRC}"]`)).not.toBeNull();
+
+    result.unload();
+    expect(document.querySelector(`script[src="${SRC}"]`)).toBeNull();
+    expect(result.scriptTag.value).toBeNull();
+
+    scope.stop();
+  });
+
+  it('unload resets the load promise so the script can be re-loaded', async () => {
+    const scope = effectScope();
+    let result!: ReturnType<typeof useScriptTag>;
+    scope.run(() => {
+      result = useScriptTag(SRC, undefined, { manual: true });
+    });
+
+    const first = result.load();
+    result.unload();
+    const second = result.load();
+    expect(first).not.toBe(second);
+    expect(document.querySelector(`script[src="${SRC}"]`)).not.toBeNull();
+
+    scope.stop();
+  });
+
+  it('removes the tag on scope dispose (non-manual)', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      useScriptTag(SRC);
+    });
+
+    // Outside a component instance, tryOnMounted runs synchronously -> tag injected.
+    expect(document.querySelector(`script[src="${SRC}"]`)).not.toBeNull();
+
+    scope.stop();
+    expect(document.querySelector(`script[src="${SRC}"]`)).toBeNull();
+  });
+
+  it('manual mode does not auto-load on mount', () => {
+    const scope = effectScope();
+    let result!: ReturnType<typeof useScriptTag>;
+    scope.run(() => {
+      result = useScriptTag(SRC, undefined, { manual: true });
+    });
+
+    expect(document.querySelector(`script[src="${SRC}"]`)).toBeNull();
+    expect(result.scriptTag.value).toBeNull();
+
+    scope.stop();
+  });
+
+  it('immediate: false defers loading until load() is called', () => {
+    const scope = effectScope();
+    let result!: ReturnType<typeof useScriptTag>;
+    scope.run(() => {
+      result = useScriptTag(SRC, undefined, { immediate: false });
+    });
+
+    expect(document.querySelector(`script[src="${SRC}"]`)).toBeNull();
+
+    result.load(false);
+    expect(document.querySelector(`script[src="${SRC}"]`)).not.toBeNull();
+
+    scope.stop();
+  });
+
+  it('rejects when the script errors', async () => {
+    const scope = effectScope();
+    let result!: ReturnType<typeof useScriptTag>;
+    scope.run(() => {
+      result = useScriptTag(SRC, undefined, { manual: true });
+    });
+
+    const promise = result.load();
+    const el = document.querySelector<HTMLScriptElement>(`script[src="${SRC}"]`)!;
+    el.dispatchEvent(new Event('error'));
+
+    await expect(promise).rejects.toBeInstanceOf(Event);
+
+    scope.stop();
+  });
+
+  it('SSR / unsupported path: resolves false and never throws when document is absent', async () => {
+    // Note: `defaultDocument` is import-time captured and the destructuring default
+    // `= defaultDocument` only triggers for `undefined`, so we force a falsy document
+    // (mirroring a real SSR environment where `defaultDocument` itself is undefined).
+    const scope = effectScope();
+    let result!: ReturnType<typeof useScriptTag>;
+    expect(() => {
+      scope.run(() => {
+        result = useScriptTag(SRC, undefined, { document: null as unknown as Document, manual: true });
+      });
+    }).not.toThrow();
+
+    // eslint-disable-next-line vitest/prefer-to-be-falsy -- assert the exact boolean `false`, not any falsy value
+    await expect(result.load()).resolves.toBe(false);
+    expect(() => result.unload()).not.toThrow();
+    expect(result.scriptTag.value).toBeNull();
+
+    scope.stop();
+  });
+
+  it('returns the documented shape', () => {
+    const result = useScriptTag(SRC, undefined, { manual: true });
+    expect(result.scriptTag.value).toBeNull();
+    expect(typeof result.load).toBe('function');
+    expect(typeof result.unload).toBe('function');
+  });
+});
diff --git a/vue/toolkit/src/composables/browser/useScriptTag/index.ts b/vue/toolkit/src/composables/browser/useScriptTag/index.ts
new file mode 100644
index 0000000..3781623
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useScriptTag/index.ts
@@ -0,0 +1,254 @@
+import { shallowRef, toValue } from 'vue';
+import type { MaybeRefOrGetter, ShallowRef } from 'vue';
+import { noop } from '@robonen/stdlib';
+import { defaultDocument } from '@/types';
+import type { ConfigurableDocument } from '@/types';
+import { tryOnMounted } from '@/composables/lifecycle/tryOnMounted';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+import { useEventListener } from '@/composables/browser/useEventListener';
+
+export type ScriptReferrerPolicy
+  = | 'no-referrer'
+    | 'no-referrer-when-downgrade'
+    | 'origin'
+    | 'origin-when-cross-origin'
+    | 'same-origin'
+    | 'strict-origin'
+    | 'strict-origin-when-cross-origin'
+    | 'unsafe-url';
+
+export interface UseScriptTagOptions extends ConfigurableDocument {
+  /**
+   * Load the script immediately on mount.
+   *
+   * @default true
+   */
+  immediate?: boolean;
+
+  /**
+   * Add the `async` attribute to the script tag.
+   *
+   * @default true
+   */
+  async?: boolean;
+
+  /**
+   * Script `type` attribute.
+   *
+   * @default 'text/javascript'
+   */
+  type?: string;
+
+  /**
+   * Take manual control of the timing of loading and unloading. When `true`,
+   * the script is neither loaded on mount nor unloaded on scope dispose — call
+   * `load()` / `unload()` yourself.
+   *
+   * @default false
+   */
+  manual?: boolean;
+
+  /**
+   * CORS setting for the script tag.
+   */
+  crossOrigin?: 'anonymous' | 'use-credentials';
+
+  /**
+   * Referrer policy for the script request.
+   */
+  referrerPolicy?: ScriptReferrerPolicy;
+
+  /**
+   * Add the `nomodule` attribute, so the script is skipped by browsers that
+   * support ES modules.
+   */
+  noModule?: boolean;
+
+  /**
+   * Add the `defer` attribute to the script tag.
+   */
+  defer?: boolean;
+
+  /**
+   * Nonce value for CSP (Content Security Policy).
+   *
+   * @default undefined
+   */
+  nonce?: string;
+
+  /**
+   * Custom attributes applied to the script tag via `setAttribute`.
+   *
+   * @default {}
+   */
+  attrs?: Record<string, string>;
+}
+
+export interface UseScriptTagReturn {
+  /**
+   * Reactive reference to the underlying `<script>` element, or `null` when not loaded.
+   */
+  scriptTag: ShallowRef<HTMLScriptElement | null>;
+
+  /**
+   * Load the script into the document `<head>`.
+   *
+   * @param waitForScriptLoad Resolve once the `load` event fires (default `true`)
+   * rather than immediately after appending the element to the DOM.
+   */
+  load: (waitForScriptLoad?: boolean) => Promise<HTMLScriptElement | boolean>;
+
+  /**
+   * Remove the `<script>` element from the document `<head>`.
+   */
+  unload: () => void;
+}
+
+/**
+ * @name useScriptTag
+ * @category Browser
+ * @description Dynamically inject and manage a `<script>` tag. The returned
+ * `load`/`unload` controls append the element to the document `<head>` (reusing
+ * an existing tag with the same `src`) and resolve once the script has loaded.
+ * Loading is de-duplicated, listeners are passive, and everything is SSR-safe.
+ *
+ * @param {MaybeRefOrGetter<string>} src Reactive source URL for the script
+ * @param {(el: HTMLScriptElement) => void} [onLoaded=noop] Called when the script finishes loading
+ * @param {UseScriptTagOptions} [options={}] Options
+ * @param {boolean} [options.immediate=true] Load the script on mount
+ * @param {boolean} [options.async=true] Add the `async` attribute
+ * @param {string} [options.type='text/javascript'] Script `type` attribute
+ * @param {boolean} [options.manual=false] Take manual control of load/unload timing
+ * @param {'anonymous' | 'use-credentials'} [options.crossOrigin] CORS setting
+ * @param {ScriptReferrerPolicy} [options.referrerPolicy] Referrer policy
+ * @param {boolean} [options.noModule] Add the `nomodule` attribute
+ * @param {boolean} [options.defer] Add the `defer` attribute
+ * @param {string} [options.nonce] CSP nonce value
+ * @param {Record<string, string>} [options.attrs={}] Custom attributes for the tag
+ * @param {Document} [options.document=defaultDocument] Custom document instance
+ * @returns {UseScriptTagReturn} `{ scriptTag, load, unload }`
+ *
+ * @example
+ * const { scriptTag, load, unload } = useScriptTag(
+ *   'https://example.com/sdk.js',
+ *   (el) => console.log('loaded', el),
+ * );
+ *
+ * @example
+ * // Manual control
+ * const { load, unload } = useScriptTag('https://example.com/a.js', undefined, { manual: true });
+ * await load();
+ * unload();
+ *
+ * @since 0.0.15
+ */
+export function useScriptTag(
+  src: MaybeRefOrGetter<string>,
+  onLoaded: (el: HTMLScriptElement) => void = noop,
+  options: UseScriptTagOptions = {},
+): UseScriptTagReturn {
+  const {
+    immediate = true,
+    manual = false,
+    type = 'text/javascript',
+    async = true,
+    crossOrigin,
+    referrerPolicy,
+    noModule,
+    defer,
+    document = defaultDocument,
+    attrs = {},
+    nonce,
+  } = options;
+
+  const scriptTag = shallowRef<HTMLScriptElement | null>(null);
+
+  let _promise: Promise<HTMLScriptElement | boolean> | null = null;
+
+  const loadScript = (waitForScriptLoad: boolean): Promise<HTMLScriptElement | boolean> =>
+    new Promise<HTMLScriptElement | boolean>((resolve, reject) => {
+      const resolveWithElement = (el: HTMLScriptElement): void => {
+        scriptTag.value = el;
+        resolve(el);
+      };
+
+      // SSR / unsupported: no document to append to.
+      if (!document) {
+        resolve(false);
+        return;
+      }
+
+      const url = toValue(src);
+      let shouldAppend = false;
+      let el = document.querySelector<HTMLScriptElement>(`script[src="${url}"]`);
+
+      if (!el) {
+        el = document.createElement('script');
+        el.type = type;
+        el.async = async;
+        el.src = url;
+
+        if (defer) el.defer = defer;
+        if (crossOrigin) el.crossOrigin = crossOrigin;
+        if (noModule) el.noModule = noModule;
+        if (referrerPolicy) el.referrerPolicy = referrerPolicy;
+        if (nonce) el.nonce = nonce;
+
+        for (const [name, value] of Object.entries(attrs))
+          el.setAttribute(name, value);
+
+        shouldAppend = true;
+      }
+      else if (el.hasAttribute('data-loaded')) {
+        // Already loaded — short-circuit.
+        resolveWithElement(el);
+        return;
+      }
+
+      const listenerOptions = { passive: true } as const;
+
+      useEventListener(el, 'error', event => reject(event), listenerOptions);
+      useEventListener(el, 'abort', event => reject(event), listenerOptions);
+      useEventListener(el, 'load', () => {
+        el!.setAttribute('data-loaded', 'true');
+        onLoaded(el!);
+        resolveWithElement(el!);
+      }, listenerOptions);
+
+      if (shouldAppend)
+        el = document.head.appendChild(el);
+
+      if (!waitForScriptLoad)
+        resolveWithElement(el);
+    });
+
+  const load = (waitForScriptLoad = true): Promise<HTMLScriptElement | boolean> => {
+    if (!_promise)
+      _promise = loadScript(waitForScriptLoad);
+
+    return _promise;
+  };
+
+  const unload = (): void => {
+    if (!document) return;
+
+    _promise = null;
+    scriptTag.value = null;
+
+    const el = document.querySelector<HTMLScriptElement>(`script[src="${toValue(src)}"]`);
+    if (el)
+      document.head.removeChild(el);
+  };
+
+  if (immediate && !manual)
+    tryOnMounted(load);
+
+  if (!manual)
+    tryOnScopeDispose(unload);
+
+  return {
+    scriptTag,
+    load,
+    unload,
+  };
+}
diff --git a/vue/toolkit/src/composables/browser/useShare/demo.vue b/vue/toolkit/src/composables/browser/useShare/demo.vue
new file mode 100644
index 0000000..a42d352
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useShare/demo.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import { useShare } from './index';
+
+const payload = reactive({
+  title: 'Vue Toolkit',
+  text: 'A collection of essential Vue composables.',
+  url: 'https://vuejs.org',
+});
+
+const { share, isSupported } = useShare(payload);
+
+const lastResult = ref<'shared' | 'dismissed' | null>(null);
+
+async function onShare() {
+  lastResult.value = null;
+  try {
+    await share();
+    lastResult.value = 'shared';
+  }
+  catch {
+    // User dismissed the share sheet (AbortError) — treat as a non-error.
+    lastResult.value = 'dismissed';
+  }
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Web Share API
+      </span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+        :class="isSupported
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        <span
+          class="size-1.5 rounded-full"
+          :class="isSupported ? 'bg-emerald-500' : 'bg-(--fg-subtle)'"
+        />
+        {{ isSupported ? 'Supported' : 'Unsupported' }}
+      </span>
+    </div>
+
+    <div class="flex flex-col gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <label class="flex flex-col gap-1.5">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Title</span>
+        <input
+          v-model="payload.title"
+          type="text"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+      </label>
+      <label class="flex flex-col gap-1.5">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Text</span>
+        <input
+          v-model="payload.text"
+          type="text"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+      </label>
+      <label class="flex flex-col gap-1.5">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">URL</span>
+        <input
+          v-model="payload.url"
+          type="url"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+      </label>
+    </div>
+
+    <button
+      type="button"
+      :disabled="!isSupported"
+      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+      @click="onShare"
+    >
+      <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <circle cx="18" cy="5" r="3" />
+        <circle cx="6" cy="12" r="3" />
+        <circle cx="18" cy="19" r="3" />
+        <line x1="8.59" y1="13.51" x2="15.42" y2="17.49" />
+        <line x1="15.41" y1="6.51" x2="8.59" y2="10.49" />
+      </svg>
+      Share
+    </button>
+
+    <p v-if="!isSupported" class="text-xs leading-relaxed text-(--fg-subtle)">
+      The Web Share API is not available in this browser. It works on most mobile
+      browsers and Safari.
+    </p>
+    <p
+      v-else-if="lastResult"
+      class="text-xs font-medium"
+      :class="lastResult === 'shared'
+        ? 'text-emerald-600 dark:text-emerald-400'
+        : 'text-(--fg-muted)'"
+    >
+      {{ lastResult === 'shared' ? 'Content shared.' : 'Share sheet dismissed.' }}
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useShare/index.test.ts b/vue/toolkit/src/composables/browser/useShare/index.test.ts
new file mode 100644
index 0000000..62f5b45
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useShare/index.test.ts
@@ -0,0 +1,119 @@
+import { describe, expect, it, vi } from 'vitest';
+import { effectScope, ref } from 'vue';
+import { useShare } from '.';
+import type { UseShareOptions } from '.';
+
+function stubShareNavigator(canShareResult = true) {
+  const share = vi.fn(async (_data?: UseShareOptions) => {});
+  const canShare = vi.fn((_data?: UseShareOptions) => canShareResult);
+  const navigator = { share, canShare } as unknown as Navigator;
+  return { navigator, share, canShare };
+}
+
+function withScope<T>(fn: () => T): { result: T; stop: () => void } {
+  const scope = effectScope();
+  let result!: T;
+  scope.run(() => {
+    result = fn();
+  });
+  return { result, stop: () => scope.stop() };
+}
+
+describe(useShare, () => {
+  it('reports supported when the Web Share API is present', () => {
+    const { navigator } = stubShareNavigator();
+    const { result, stop } = withScope(() => useShare({}, { navigator }));
+    expect(result.isSupported.value).toBeTruthy();
+    stop();
+  });
+
+  it('reports unsupported when canShare is missing', () => {
+    const navigator = {} as Navigator;
+    const { result, stop } = withScope(() => useShare({}, { navigator }));
+    expect(result.isSupported.value).toBeFalsy();
+    stop();
+  });
+
+  it('calls navigator.share with the default share options', async () => {
+    const { navigator, share, canShare } = stubShareNavigator();
+    const data = { title: 'Hello', text: 'World', url: 'https://example.com' };
+    const { result, stop } = withScope(() => useShare(data, { navigator }));
+
+    await result.share();
+
+    expect(canShare).toHaveBeenCalledWith(data);
+    expect(share).toHaveBeenCalledWith(data);
+    stop();
+  });
+
+  it('merges overrideData over the default options', async () => {
+    const { navigator, share } = stubShareNavigator();
+    const { result, stop } = withScope(() =>
+      useShare({ title: 'Default', text: 'Default text' }, { navigator }),
+    );
+
+    await result.share({ text: 'Override text', url: 'https://override.dev' });
+
+    expect(share).toHaveBeenCalledWith({
+      title: 'Default',
+      text: 'Override text',
+      url: 'https://override.dev',
+    });
+    stop();
+  });
+
+  it('resolves reactive/getter share options at call time', async () => {
+    const { navigator, share } = stubShareNavigator();
+    const title = ref('first');
+    const { result, stop } = withScope(() => useShare(() => ({ title: title.value }), { navigator }));
+
+    await result.share();
+    expect(share).toHaveBeenLastCalledWith({ title: 'first' });
+
+    title.value = 'second';
+    await result.share();
+    expect(share).toHaveBeenLastCalledWith({ title: 'second' });
+    stop();
+  });
+
+  it('does not call share when canShare rejects the payload', async () => {
+    const { navigator, share, canShare } = stubShareNavigator(false);
+    const { result, stop } = withScope(() => useShare({ title: 'Nope' }, { navigator }));
+
+    await result.share();
+
+    expect(canShare).toHaveBeenCalled();
+    expect(share).not.toHaveBeenCalled();
+    stop();
+  });
+
+  it('skips canShare gating when canShare is unavailable', async () => {
+    const share = vi.fn(async () => {});
+    // No canShare -> isSupported is false, so share is a no-op.
+    const navigator = { share } as unknown as Navigator;
+    const { result, stop } = withScope(() => useShare({ title: 'Hi' }, { navigator }));
+
+    expect(result.isSupported.value).toBeFalsy();
+    await result.share();
+    expect(share).not.toHaveBeenCalled();
+    stop();
+  });
+
+  it('is a no-op when unsupported (SSR / missing navigator)', async () => {
+    const navigator = undefined as unknown as Navigator;
+    const { result, stop } = withScope(() => useShare({ title: 'Hi' }, { navigator }));
+
+    expect(result.isSupported.value).toBeFalsy();
+    await expect(result.share()).resolves.toBeUndefined();
+    stop();
+  });
+
+  it('returns the share promise from navigator.share', async () => {
+    const { navigator, share } = stubShareNavigator();
+    share.mockResolvedValueOnce(undefined);
+    const { result, stop } = withScope(() => useShare({ title: 'Hi' }, { navigator }));
+
+    await expect(result.share()).resolves.toBeUndefined();
+    stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/browser/useShare/index.ts b/vue/toolkit/src/composables/browser/useShare/index.ts
new file mode 100644
index 0000000..950ffa0
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useShare/index.ts
@@ -0,0 +1,102 @@
+import { toValue } from 'vue';
+import type { MaybeRefOrGetter, Ref } from 'vue';
+import { defaultNavigator } from '@/types';
+import type { ConfigurableNavigator } from '@/types';
+import { useSupported } from '@/composables/utilities/useSupported';
+
+export interface UseShareOptions {
+  /**
+   * Title of the shared content
+   */
+  title?: string;
+
+  /**
+   * Arbitrary text that forms the body of the message being shared
+   */
+  text?: string;
+
+  /**
+   * URL string referring to a resource being shared
+   */
+  url?: string;
+
+  /**
+   * Array of `File` objects representing files to be shared
+   */
+  files?: File[];
+}
+
+/**
+ * Subset of `Navigator` exposing the Web Share API surface, which is not yet in
+ * every lib DOM target.
+ */
+interface NavigatorWithShare {
+  share?: (data?: UseShareOptions) => Promise<void>;
+  canShare?: (data?: UseShareOptions) => boolean;
+}
+
+export interface UseShareReturn {
+  /**
+   * Whether the Web Share API is available
+   */
+  isSupported: Readonly<Ref<boolean>>;
+
+  /**
+   * Invoke the native share sheet, optionally merging `overrideData` over the
+   * default share options. Resolves once sharing finishes (or is skipped when
+   * unsupported / the payload cannot be shared).
+   */
+  share: (overrideData?: MaybeRefOrGetter<UseShareOptions>) => Promise<void>;
+}
+
+/**
+ * @name useShare
+ * @category Browser
+ * @description Reactive Web Share API wrapper to invoke the native share sheet.
+ *
+ * @param {MaybeRefOrGetter<UseShareOptions>} [shareOptions={}] Default share payload (title, text, url, files)
+ * @param {UseShareOptions} [options={}] Options
+ * @returns {UseShareReturn} `isSupported` flag and a `share` method
+ *
+ * @example
+ * const { share, isSupported } = useShare({ title: 'Hello', url: location.href });
+ * share();
+ *
+ * @example
+ * // Override the default payload per call
+ * const { share } = useShare({ title: 'Default' });
+ * share({ text: 'One-off message' });
+ *
+ * @since 0.0.15
+ */
+export function useShare(
+  shareOptions: MaybeRefOrGetter<UseShareOptions> = {},
+  options: ConfigurableNavigator = {},
+): UseShareReturn {
+  const { navigator = defaultNavigator } = options;
+
+  const _navigator = navigator as NavigatorWithShare | undefined;
+  const isSupported = useSupported(() => !!_navigator && 'canShare' in _navigator);
+
+  const share = async (overrideData: MaybeRefOrGetter<UseShareOptions> = {}): Promise<void> => {
+    if (!isSupported.value || !_navigator)
+      return;
+
+    const data: UseShareOptions = {
+      ...toValue(shareOptions),
+      ...toValue(overrideData),
+    };
+
+    // `canShare` gates the payload (e.g. file types / size); only proceed when it
+    // accepts the data to avoid a guaranteed-to-reject `share()` call.
+    if (_navigator.canShare && !_navigator.canShare(data))
+      return;
+
+    return _navigator.share?.(data);
+  };
+
+  return {
+    isSupported,
+    share,
+  };
+}
diff --git a/vue/toolkit/src/composables/browser/useStyleTag/demo.vue b/vue/toolkit/src/composables/browser/useStyleTag/demo.vue
new file mode 100644
index 0000000..b3d1c43
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useStyleTag/demo.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { useStyleTag } from './index';
+
+const initialCss = `.styletag-demo-box {
+  background: linear-gradient(135deg, #6366f1, #ec4899);
+  color: white;
+  letter-spacing: 0.05em;
+}`;
+
+const { id, css, isLoaded, load, unload } = useStyleTag(initialCss, { immediate: false });
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Injected style tag
+      </span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+        :class="isLoaded
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        <span
+          class="size-1.5 rounded-full"
+          :class="isLoaded ? 'bg-emerald-500' : 'bg-(--fg-subtle)'"
+        />
+        {{ isLoaded ? 'Loaded' : 'Unloaded' }}
+      </span>
+    </div>
+
+    <!-- Live target affected by the injected stylesheet -->
+    <div class="rounded-xl border border-(--border) bg-(--bg-inset) p-4">
+      <div
+        class="styletag-demo-box rounded-lg border border-(--border) bg-(--bg-elevated) px-4 py-6 text-center text-sm font-semibold text-(--fg) transition-all"
+      >
+        Styled by &lt;style id="{{ id }}"&gt;
+      </div>
+    </div>
+
+    <label class="flex flex-col gap-1.5">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">CSS source</span>
+      <textarea
+        v-model="css"
+        rows="5"
+        spellcheck="false"
+        class="w-full resize-none rounded-lg border border-(--border) bg-(--bg) px-3 py-2 font-mono text-xs leading-relaxed text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      />
+    </label>
+
+    <div class="flex gap-2">
+      <button
+        type="button"
+        :disabled="isLoaded"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="load"
+      >
+        Load
+      </button>
+      <button
+        type="button"
+        :disabled="!isLoaded"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="unload"
+      >
+        Unload
+      </button>
+    </div>
+
+    <p class="text-xs leading-relaxed text-(--fg-subtle)">
+      Editing the CSS updates the live stylesheet instantly while loaded.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useStyleTag/index.test.ts b/vue/toolkit/src/composables/browser/useStyleTag/index.test.ts
new file mode 100644
index 0000000..ad52341
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useStyleTag/index.test.ts
@@ -0,0 +1,176 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import { effectScope, nextTick, ref } from 'vue';
+import { useStyleTag } from '.';
+
+describe(useStyleTag, () => {
+  afterEach(() => {
+    // Clean up any leaked style tags between tests.
+    document.head.querySelectorAll('style[id^="vuetools_styletag_"]').forEach(el => el.remove());
+    document.head.querySelectorAll('style#shared, style#manual, style#mediaq, style#csp').forEach(el => el.remove());
+  });
+
+  it('injects a style tag with the given css', () => {
+    const scope = effectScope();
+    let result!: ReturnType<typeof useStyleTag>;
+    scope.run(() => {
+      result = useStyleTag('body { color: red }');
+    });
+
+    const el = document.getElementById(result.id) as HTMLStyleElement;
+    expect(el).toBeInstanceOf(HTMLStyleElement);
+    expect(el.textContent).toBe('body { color: red }');
+    expect(el.parentElement).toBe(document.head);
+    expect(result.isLoaded.value).toBeTruthy();
+
+    scope.stop();
+  });
+
+  it('updates the stylesheet when css ref changes', async () => {
+    const scope = effectScope();
+    let result!: ReturnType<typeof useStyleTag>;
+    scope.run(() => {
+      result = useStyleTag('a { color: red }');
+    });
+
+    result.css.value = 'a { color: blue }';
+    await nextTick();
+
+    const el = document.getElementById(result.id) as HTMLStyleElement;
+    expect(el.textContent).toBe('a { color: blue }');
+
+    scope.stop();
+  });
+
+  it('accepts a ref / getter as the css source', async () => {
+    const scope = effectScope();
+    const source = ref('p { margin: 0 }');
+    let result!: ReturnType<typeof useStyleTag>;
+    scope.run(() => {
+      result = useStyleTag(source);
+    });
+
+    const el = document.getElementById(result.id) as HTMLStyleElement;
+    expect(el.textContent).toBe('p { margin: 0 }');
+
+    source.value = 'p { margin: 1px }';
+    await nextTick();
+    expect(el.textContent).toBe('p { margin: 1px }');
+
+    scope.stop();
+  });
+
+  it('applies media and nonce attributes', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      useStyleTag('.q {}', { id: 'mediaq', media: 'screen and (max-width: 600px)' });
+      useStyleTag('.c {}', { id: 'csp', nonce: 'abc123' });
+    });
+
+    const mediaEl = document.getElementById('mediaq') as HTMLStyleElement;
+    const cspEl = document.getElementById('csp') as HTMLStyleElement;
+    expect(mediaEl.media).toBe('screen and (max-width: 600px)');
+    expect(cspEl.nonce).toBe('abc123');
+
+    scope.stop();
+  });
+
+  it('removes the tag on scope dispose', () => {
+    const scope = effectScope();
+    let result!: ReturnType<typeof useStyleTag>;
+    scope.run(() => {
+      result = useStyleTag('.x {}');
+    });
+
+    expect(document.getElementById(result.id)).not.toBeNull();
+    scope.stop();
+    expect(document.getElementById(result.id)).toBeNull();
+  });
+
+  it('reference-counts a shared id and only removes when last is unloaded', () => {
+    const a = useStyleTag('.shared { color: red }', { id: 'shared', manual: true });
+    const b = useStyleTag('.shared { color: red }', { id: 'shared', manual: true });
+
+    a.load();
+    b.load();
+    expect(document.getElementById('shared')).not.toBeNull();
+
+    a.unload();
+    // Still present — b holds a reference.
+    expect(document.getElementById('shared')).not.toBeNull();
+    expect(b.isLoaded.value).toBeTruthy();
+
+    b.unload();
+    expect(document.getElementById('shared')).toBeNull();
+  });
+
+  it('manual mode does not auto-load', () => {
+    const scope = effectScope();
+    let result!: ReturnType<typeof useStyleTag>;
+    scope.run(() => {
+      result = useStyleTag('.manual {}', { id: 'manual', manual: true });
+    });
+
+    expect(result.isLoaded.value).toBeFalsy();
+    expect(document.getElementById('manual')).toBeNull();
+
+    result.load();
+    expect(result.isLoaded.value).toBeTruthy();
+    expect(document.getElementById('manual')).not.toBeNull();
+
+    result.unload();
+    scope.stop();
+  });
+
+  it('load is idempotent (does not double reference-count)', () => {
+    const result = useStyleTag('.dup {}', { manual: true });
+    result.load();
+    result.load();
+    result.load();
+
+    // A single unload removes it because the ref count was incremented only once.
+    result.unload();
+    expect(document.getElementById(result.id)).toBeNull();
+  });
+
+  it('immediate: false defers loading until load() is called outside a component', () => {
+    const scope = effectScope();
+    let result!: ReturnType<typeof useStyleTag>;
+    scope.run(() => {
+      result = useStyleTag('.imm {}', { immediate: false });
+    });
+
+    // Without a component instance, tryOnMounted runs synchronously; immediate: false
+    // means load is not registered, so nothing is injected yet.
+    expect(result.isLoaded.value).toBeFalsy();
+
+    result.load();
+    expect(result.isLoaded.value).toBeTruthy();
+
+    scope.stop();
+  });
+
+  it('is SSR-safe / unsupported path: never throws when document is absent', () => {
+    // Passing `document: undefined` exercises the configurable-document fallback
+    // path; in a real SSR environment `defaultDocument` is itself undefined and
+    // `load`/`unload` early-return. We assert the construction never throws and a
+    // stable id is still produced.
+    const scope = effectScope();
+    let result!: ReturnType<typeof useStyleTag>;
+    expect(() => {
+      scope.run(() => {
+        result = useStyleTag('.ssr {}', { document: undefined });
+      });
+    }).not.toThrow();
+    expect(result.id).toMatch(/^vuetools_styletag_/);
+    scope.stop();
+  });
+
+  it('returns the documented shape', () => {
+    const result = useStyleTag('.shape {}', { manual: true });
+    expect(typeof result.id).toBe('string');
+    expect(typeof result.css.value).toBe('string');
+    expect(typeof result.load).toBe('function');
+    expect(typeof result.unload).toBe('function');
+    expect(typeof result.isLoaded.value).toBe('boolean');
+  });
+});
diff --git a/vue/toolkit/src/composables/browser/useStyleTag/index.ts b/vue/toolkit/src/composables/browser/useStyleTag/index.ts
new file mode 100644
index 0000000..a207fe2
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useStyleTag/index.ts
@@ -0,0 +1,185 @@
+import { shallowReadonly, shallowRef, toRef, watch } from 'vue';
+import type { MaybeRefOrGetter, ShallowRef } from 'vue';
+import { defaultDocument } from '@/types';
+import type { ConfigurableDocument } from '@/types';
+import { tryOnMounted } from '@/composables/lifecycle/tryOnMounted';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+
+export interface UseStyleTagOptions extends ConfigurableDocument {
+  /**
+   * Media query applied to the `<style>` element (e.g. `'screen and (max-width: 600px)'`).
+   */
+  media?: string;
+
+  /**
+   * Load the style immediately on mount.
+   *
+   * @default true
+   */
+  immediate?: boolean;
+
+  /**
+   * Take manual control of the timing of loading and unloading. When `true`,
+   * the style is neither loaded on mount nor unloaded on scope dispose — call
+   * `load()` / `unload()` yourself.
+   *
+   * @default false
+   */
+  manual?: boolean;
+
+  /**
+   * DOM `id` of the `<style>` tag. Sharing an `id` across instances reuses the
+   * same element and reference-counts it.
+   *
+   * @default auto-incremented (`vuetools_styletag_N`)
+   */
+  id?: string;
+
+  /**
+   * Nonce value for CSP (Content Security Policy).
+   *
+   * @default undefined
+   */
+  nonce?: string;
+}
+
+export interface UseStyleTagReturn {
+  /**
+   * DOM `id` of the injected `<style>` tag.
+   */
+  id: string;
+
+  /**
+   * Reactive, writable CSS text content of the tag.
+   */
+  css: ShallowRef<string>;
+
+  /**
+   * Inject the `<style>` tag into `<head>` (or reuse an existing one).
+   */
+  load: () => void;
+
+  /**
+   * Remove the `<style>` tag from `<head>` when no other instance references it.
+   */
+  unload: () => void;
+
+  /**
+   * Whether the tag is currently loaded.
+   */
+  isLoaded: Readonly<ShallowRef<boolean>>;
+}
+
+let _id = 0;
+const _refCount = new WeakMap<HTMLStyleElement, number>();
+
+/**
+ * @name useStyleTag
+ * @category Browser
+ * @description Inject a reactive `<style>` tag into the document `<head>`. The
+ * CSS is a writable ref — assigning to it updates the live stylesheet. Multiple
+ * instances sharing an `id` reuse a single element via reference counting, and
+ * everything is SSR-safe.
+ *
+ * @param {MaybeRefOrGetter<string>} css Reactive CSS source for the tag
+ * @param {UseStyleTagOptions} [options={}] Options
+ * @param {string} [options.media] Media query applied to the tag
+ * @param {boolean} [options.immediate=true] Load the style on mount
+ * @param {boolean} [options.manual=false] Take manual control of load/unload timing
+ * @param {string} [options.id] DOM id of the tag (default auto-incremented)
+ * @param {string} [options.nonce] CSP nonce value
+ * @param {Document} [options.document=defaultDocument] Custom document instance
+ * @returns {UseStyleTagReturn} `{ id, css, load, unload, isLoaded }`
+ *
+ * @example
+ * const { css, isLoaded } = useStyleTag('body { color: red }');
+ * css.value = 'body { color: blue }';
+ *
+ * @example
+ * // Manual control
+ * const { load, unload } = useStyleTag('.a { color: red }', { manual: true });
+ * load();
+ * unload();
+ *
+ * @since 0.0.15
+ */
+export function useStyleTag(
+  css: MaybeRefOrGetter<string>,
+  options: UseStyleTagOptions = {},
+): UseStyleTagReturn {
+  const {
+    document = defaultDocument,
+    immediate = true,
+    manual = false,
+    id = `vuetools_styletag_${++_id}`,
+    media,
+    nonce,
+  } = options;
+
+  const cssRef = toRef(css);
+  const isLoaded = shallowRef(false);
+
+  let stop = (): void => {};
+
+  const load = (): void => {
+    if (!document) return;
+
+    const el = (document.getElementById(id) ?? document.createElement('style')) as HTMLStyleElement;
+
+    if (!el.isConnected) {
+      el.id = id;
+      if (nonce) el.nonce = nonce;
+      if (media) el.media = media;
+      document.head.appendChild(el);
+    }
+
+    if (isLoaded.value) return;
+
+    _refCount.set(el, (_refCount.get(el) ?? 0) + 1);
+
+    stop = watch(
+      cssRef,
+      (value) => {
+        el.textContent = value;
+      },
+      { immediate: true },
+    );
+
+    isLoaded.value = true;
+  };
+
+  const unload = (): void => {
+    if (!document || !isLoaded.value) return;
+
+    stop();
+    stop = (): void => {};
+
+    const el = document.getElementById(id) as HTMLStyleElement | null;
+    if (el) {
+      const count = (_refCount.get(el) ?? 1) - 1;
+      if (count <= 0) {
+        _refCount.delete(el);
+        document.head.removeChild(el);
+      }
+      else {
+        _refCount.set(el, count);
+      }
+    }
+
+    isLoaded.value = false;
+  };
+
+  if (immediate && !manual)
+    tryOnMounted(load);
+
+  if (!manual)
+    tryOnScopeDispose(unload);
+
+  return {
+    id,
+    css: cssRef,
+    load,
+    unload,
+    isLoaded: shallowReadonly(isLoaded),
+  };
+}
diff --git a/vue/toolkit/src/composables/browser/useTabLeader/demo.vue b/vue/toolkit/src/composables/browser/useTabLeader/demo.vue
new file mode 100644
index 0000000..cab81c2
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useTabLeader/demo.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { useTabLeader } from './index';
+
+const { isLeader, isSupported, acquire, release } = useTabLeader('vue-toolkit-demo-leader');
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Web Locks election
+      </span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+        :class="isSupported
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        <span
+          class="size-1.5 rounded-full"
+          :class="isSupported ? 'bg-emerald-500' : 'bg-(--fg-subtle)'"
+        />
+        {{ isSupported ? 'Supported' : 'Unsupported' }}
+      </span>
+    </div>
+
+    <!-- Primary leader state -->
+    <div
+      class="flex flex-col items-center gap-2 rounded-xl border p-6 transition-colors"
+      :class="isLeader
+        ? 'border-(--accent) bg-(--accent-subtle)'
+        : 'border-(--border) bg-(--bg-elevated)'"
+    >
+      <div
+        class="flex size-12 items-center justify-center rounded-full transition-colors"
+        :class="isLeader
+          ? 'bg-(--accent) text-(--accent-fg)'
+          : 'bg-(--bg-inset) text-(--fg-subtle)'"
+      >
+        <svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="m12 2 3 7h7l-5.5 4.5L18.5 21 12 16.5 5.5 21 7.5 13.5 2 9h7z" />
+        </svg>
+      </div>
+      <p
+        class="text-lg font-bold"
+        :class="isLeader ? 'text-(--accent-text)' : 'text-(--fg)'"
+      >
+        {{ isLeader ? 'Leader tab' : 'Follower tab' }}
+      </p>
+      <p class="text-center text-xs text-(--fg-muted)">
+        {{ isLeader
+          ? 'This tab holds the lock and would run exclusive work.'
+          : 'Another tab is the leader, or leadership was released.' }}
+      </p>
+    </div>
+
+    <div class="flex gap-2">
+      <button
+        type="button"
+        :disabled="!isSupported || isLeader"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="acquire"
+      >
+        Acquire
+      </button>
+      <button
+        type="button"
+        :disabled="!isSupported || !isLeader"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="release"
+      >
+        Release
+      </button>
+    </div>
+
+    <p v-if="!isSupported" class="text-xs leading-relaxed text-(--fg-subtle)">
+      The Web Locks API is not available in this browser.
+    </p>
+    <p v-else class="text-xs leading-relaxed text-(--fg-subtle)">
+      Open this page in a second tab — only one tab is the leader at a time. Release
+      here and watch another tab take over.
+    </p>
+  </div>
+</template>
diff --git a/web/vue/src/composables/browser/useTabLeader/index.test.ts b/vue/toolkit/src/composables/browser/useTabLeader/index.test.ts
similarity index 97%
rename from web/vue/src/composables/browser/useTabLeader/index.test.ts
rename to vue/toolkit/src/composables/browser/useTabLeader/index.test.ts
index f7d6a67..4541483 100644
--- a/web/vue/src/composables/browser/useTabLeader/index.test.ts
+++ b/vue/toolkit/src/composables/browser/useTabLeader/index.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { defineComponent, effectScope, nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
 import { useTabLeader } from '.';
@@ -59,7 +59,7 @@ function setupLocksMock() {
 }
 
 function grantNextLock(key: string) {
-  const index = pendingRequests.findIndex((r) => r.key === key);
+  const index = pendingRequests.findIndex(r => r.key === key);
   if (index === -1) return;
 
   const [request] = pendingRequests.splice(index, 1);
diff --git a/web/vue/src/composables/browser/useTabLeader/index.ts b/vue/toolkit/src/composables/browser/useTabLeader/index.ts
similarity index 94%
rename from web/vue/src/composables/browser/useTabLeader/index.ts
rename to vue/toolkit/src/composables/browser/useTabLeader/index.ts
index 42f0e6e..9b436c5 100644
--- a/web/vue/src/composables/browser/useTabLeader/index.ts
+++ b/vue/toolkit/src/composables/browser/useTabLeader/index.ts
@@ -1,6 +1,6 @@
-import { ref, readonly } from 'vue';
-import type { Ref, DeepReadonly, ComputedRef } from 'vue';
-import { useSupported } from '@/composables/browser/useSupported';
+import { readonly, ref } from 'vue';
+import type { ComputedRef, DeepReadonly, Ref } from 'vue';
+import { useSupported } from '@/composables/utilities/useSupported';
 import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
 
 export interface UseTabLeaderOptions {
diff --git a/vue/toolkit/src/composables/browser/useTextareaAutosize/demo.vue b/vue/toolkit/src/composables/browser/useTextareaAutosize/demo.vue
new file mode 100644
index 0000000..66b2940
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useTextareaAutosize/demo.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTextareaAutosize } from './index';
+
+const maxHeight = ref(220);
+const resizes = ref(0);
+
+const { textarea, input, triggerResize } = useTextareaAutosize({
+  maxHeight,
+  onResize: () => resizes.value++,
+});
+
+input.value = 'Type here and watch the textarea grow with your content.\n\nIt re-fits on every keystroke, on programmatic changes, and when the available width changes (try resizing the panel).';
+
+function loadSample(): void {
+  input.value = [
+    'Release notes — v0.0.15',
+    '',
+    '- useTextareaAutosize now reacts to width reflow',
+    '- Title sync is SSR-safe',
+    '- URL params decode repeated keys to arrays',
+  ].join('\n');
+}
+
+function clear(): void {
+  input.value = '';
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <div class="flex flex-col gap-1.5">
+      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Auto-growing textarea
+      </label>
+      <textarea
+        ref="textarea"
+        v-model="input"
+        placeholder="Start typing…"
+        rows="1"
+        class="w-full resize-none overflow-y-auto rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm leading-relaxed text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      />
+    </div>
+
+    <div class="flex flex-col gap-2 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Max height
+        </span>
+        <span class="font-mono text-sm tabular-nums text-(--fg)">{{ maxHeight }}px</span>
+      </div>
+      <input
+        v-model.number="maxHeight"
+        type="range"
+        min="80"
+        max="400"
+        step="20"
+        class="w-full accent-(--accent)"
+      >
+      <div class="flex items-center justify-between border-t border-(--border) pt-2 text-xs">
+        <span class="text-(--fg-muted)">{{ input.length }} chars</span>
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 font-medium text-(--fg-muted)">
+          {{ resizes }} resizes
+        </span>
+      </div>
+    </div>
+
+    <div class="flex flex-wrap gap-2">
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="loadSample"
+      >
+        Load sample
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="triggerResize"
+      >
+        Trigger resize
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="!input"
+        @click="clear"
+      >
+        Clear
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useTextareaAutosize/index.test.ts b/vue/toolkit/src/composables/browser/useTextareaAutosize/index.test.ts
new file mode 100644
index 0000000..6f93e0b
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useTextareaAutosize/index.test.ts
@@ -0,0 +1,231 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, ref } from 'vue';
+import { useTextareaAutosize } from '.';
+
+let instances: Array<{ cb: ResizeObserverCallback; observe: ReturnType<typeof vi.fn>; disconnect: ReturnType<typeof vi.fn> }> = [];
+
+class StubResizeObserver {
+  observe = vi.fn();
+  disconnect = vi.fn();
+  unobserve = vi.fn();
+  cb: ResizeObserverCallback;
+  constructor(cb: ResizeObserverCallback) {
+    this.cb = cb;
+    instances.push(this);
+  }
+}
+
+// jsdom returns 0 for scrollHeight; force a deterministic value
+function makeTextarea(scrollHeight = 42): HTMLTextAreaElement {
+  const el = document.createElement('textarea');
+  Object.defineProperty(el, 'scrollHeight', { configurable: true, get: () => scrollHeight });
+  return el;
+}
+
+// A window whose rAF runs synchronously so resize callbacks are observable
+function syncWindow(): Window {
+  return {
+    requestAnimationFrame: (fn: FrameRequestCallback) => {
+      fn(0);
+      return 1;
+    },
+  } as unknown as Window;
+}
+
+describe(useTextareaAutosize, () => {
+  beforeEach(() => {
+    instances = [];
+    vi.stubGlobal('ResizeObserver', StubResizeObserver);
+  });
+  afterEach(() => vi.unstubAllGlobals());
+
+  it('returns textarea, input, and triggerResize', () => {
+    const scope = effectScope();
+    let result!: ReturnType<typeof useTextareaAutosize>;
+    scope.run(() => {
+      result = useTextareaAutosize();
+    });
+
+    expect(result.textarea.value).toBeUndefined();
+    expect(result.input.value).toBe('');
+    expect(typeof result.triggerResize).toBe('function');
+    scope.stop();
+  });
+
+  it('seeds input and element from options', () => {
+    const el = makeTextarea();
+    const scope = effectScope();
+    let result!: ReturnType<typeof useTextareaAutosize>;
+    scope.run(() => {
+      result = useTextareaAutosize({ element: el, input: 'hello' });
+    });
+
+    expect(result.textarea.value).toBe(el);
+    expect(result.input.value).toBe('hello');
+    scope.stop();
+  });
+
+  it('sizes the textarea height to its scrollHeight on resize', () => {
+    const el = makeTextarea(80);
+    const scope = effectScope();
+    let result!: ReturnType<typeof useTextareaAutosize>;
+    scope.run(() => {
+      result = useTextareaAutosize({ element: el });
+    });
+
+    result.triggerResize();
+    expect(el.style.height).toBe('80px');
+    scope.stop();
+  });
+
+  it('clamps the height to maxHeight', () => {
+    const el = makeTextarea(500);
+    const scope = effectScope();
+    let result!: ReturnType<typeof useTextareaAutosize>;
+    scope.run(() => {
+      result = useTextareaAutosize({ element: el, maxHeight: 200 });
+    });
+
+    result.triggerResize();
+    expect(el.style.height).toBe('200px');
+    scope.stop();
+  });
+
+  it('applies the configured styleProp', () => {
+    const el = makeTextarea(64);
+    const scope = effectScope();
+    let result!: ReturnType<typeof useTextareaAutosize>;
+    scope.run(() => {
+      result = useTextareaAutosize({ element: el, styleProp: 'minHeight' });
+    });
+
+    result.triggerResize();
+    expect(el.style.minHeight).toBe('64px');
+    scope.stop();
+  });
+
+  it('sizes the styleTarget instead of the textarea when provided', () => {
+    const el = makeTextarea(70);
+    const wrapper = document.createElement('div');
+    const scope = effectScope();
+    let result!: ReturnType<typeof useTextareaAutosize>;
+    scope.run(() => {
+      result = useTextareaAutosize({ element: el, styleTarget: wrapper });
+    });
+
+    result.triggerResize();
+    expect(wrapper.style.height).toBe('70px');
+    expect(el.style.height).toBe('');
+    scope.stop();
+  });
+
+  it('resizes on textarea input event', async () => {
+    const el = makeTextarea(90);
+    const scope = effectScope();
+    scope.run(() => useTextareaAutosize({ element: el }));
+    await nextTick();
+
+    el.style.height = '';
+    el.dispatchEvent(new Event('input'));
+    expect(el.style.height).toBe('90px');
+    scope.stop();
+  });
+
+  it('resizes when the bound input ref changes', async () => {
+    const el = makeTextarea(55);
+    const input = ref('a');
+    const scope = effectScope();
+    scope.run(() => useTextareaAutosize({ element: el, input }));
+    await nextTick();
+
+    el.style.height = '';
+    input.value = 'a longer value';
+    // post-flush watch schedules nextTick(triggerResize): flush both
+    await nextTick();
+    await nextTick();
+    expect(el.style.height).toBe('55px');
+    scope.stop();
+  });
+
+  it('invokes onResize when the content height changes', async () => {
+    const el = makeTextarea(40);
+    const onResize = vi.fn();
+    const scope = effectScope();
+    let result!: ReturnType<typeof useTextareaAutosize>;
+    scope.run(() => {
+      result = useTextareaAutosize({ element: el, onResize });
+    });
+    await nextTick();
+
+    onResize.mockClear();
+    result.triggerResize();
+    // height unchanged -> no extra onResize
+    expect(onResize).not.toHaveBeenCalled();
+    scope.stop();
+  });
+
+  it('observes the textarea via ResizeObserver and resizes on width change', async () => {
+    const el = makeTextarea(60);
+    const scope = effectScope();
+    scope.run(() => useTextareaAutosize({ element: el, window: syncWindow() }));
+    await nextTick();
+
+    expect(instances).toHaveLength(1);
+    expect(instances[0]!.observe).toHaveBeenCalledWith(el, undefined);
+
+    el.style.height = '';
+    instances[0]!.cb([{ contentRect: { width: 123 } } as ResizeObserverEntry], instances[0] as unknown as ResizeObserver);
+    expect(el.style.height).toBe('60px');
+    scope.stop();
+  });
+
+  it('ignores ResizeObserver callbacks with an unchanged width', async () => {
+    const el = makeTextarea(60);
+    const scope = effectScope();
+    scope.run(() => useTextareaAutosize({ element: el, window: syncWindow() }));
+    await nextTick();
+
+    const entry = [{ contentRect: { width: 200 } } as ResizeObserverEntry];
+    instances[0]!.cb(entry, instances[0] as unknown as ResizeObserver);
+    el.style.height = '';
+    // same width again -> should not re-size
+    instances[0]!.cb(entry, instances[0] as unknown as ResizeObserver);
+    expect(el.style.height).toBe('');
+    scope.stop();
+  });
+
+  it('resizes on a custom watch source', async () => {
+    const el = makeTextarea(33);
+    const dep = ref(0);
+    const scope = effectScope();
+    scope.run(() => useTextareaAutosize({ element: el, watch: dep }));
+    await nextTick();
+
+    el.style.height = '';
+    dep.value = 1;
+    await nextTick();
+    expect(el.style.height).toBe('33px');
+    scope.stop();
+  });
+
+  it('triggerResize is a no-op without a textarea (SSR / unmounted path)', () => {
+    const scope = effectScope();
+    let result!: ReturnType<typeof useTextareaAutosize>;
+    scope.run(() => {
+      result = useTextareaAutosize({ window: undefined });
+    });
+
+    // No textarea bound: must not throw
+    expect(() => result.triggerResize()).not.toThrow();
+    expect(instances).toHaveLength(0);
+    scope.stop();
+  });
+
+  it('does not throw when constructed with no DOM globals supplied via options', () => {
+    const scope = effectScope();
+    expect(() => {
+      scope.run(() => useTextareaAutosize({ window: undefined }));
+    }).not.toThrow();
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/browser/useTextareaAutosize/index.ts b/vue/toolkit/src/composables/browser/useTextareaAutosize/index.ts
new file mode 100644
index 0000000..933fd16
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useTextareaAutosize/index.ts
@@ -0,0 +1,178 @@
+import type { MaybeRef, MultiWatchSources, Ref, WatchSource } from 'vue';
+import { nextTick, toRef, toValue, watch } from 'vue';
+import type { VoidFunction } from '@robonen/stdlib';
+import { noop } from '@robonen/stdlib';
+import type { ConfigurableWindow } from '@/types';
+import { defaultWindow } from '@/types';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import { useResizeObserver } from '@/composables/elements/useResizeObserver';
+
+export interface UseTextareaAutosizeOptions extends ConfigurableWindow {
+  /**
+   * The textarea element to autosize. May also be bound via the returned `textarea` ref
+   */
+  element?: MaybeRef<HTMLTextAreaElement | undefined | null>;
+
+  /**
+   * The textarea content. May also be bound via the returned `input` ref
+   */
+  input?: MaybeRef<string>;
+
+  /**
+   * Cap the resulting height (in pixels). Beyond this the textarea scrolls
+   */
+  maxHeight?: number;
+
+  /**
+   * Additional reactive sources that should trigger a resize when they change
+   */
+  watch?: WatchSource | MultiWatchSources;
+
+  /**
+   * Invoked after each resize once the textarea height settles
+   *
+   * @default noop
+   */
+  onResize?: VoidFunction;
+
+  /**
+   * Apply the computed height to this element instead of the textarea itself.
+   * Useful when the textarea is wrapped (e.g. for a CSS grid auto-grow trick)
+   */
+  styleTarget?: MaybeRef<HTMLElement | undefined | null>;
+
+  /**
+   * Which style property carries the computed height
+   *
+   * @default 'height'
+   */
+  styleProp?: 'height' | 'minHeight';
+}
+
+export interface UseTextareaAutosizeReturn {
+  /**
+   * The textarea element being autosized. Bind it with `ref` in the template
+   */
+  textarea: Ref<HTMLTextAreaElement | undefined | null>;
+
+  /**
+   * Two-way bound textarea content
+   */
+  input: Ref<string>;
+
+  /**
+   * Force a resize on demand (e.g. after a programmatic value change)
+   */
+  triggerResize: VoidFunction;
+}
+
+/**
+ * @name useTextareaAutosize
+ * @category Browser
+ * @description Auto-resizes a `<textarea>` to fit its content. Reacts to user
+ * input, programmatic content changes, and element resize. Reuses
+ * `useEventListener` for a passive, auto-cleaned `input` listener and
+ * `useResizeObserver` to re-measure when the textarea's width changes (so
+ * reflowed text is re-fitted). SSR safe.
+ *
+ * @param {UseTextareaAutosizeOptions} [options={}] Options
+ * @returns {UseTextareaAutosizeReturn} `textarea`, `input`, and `triggerResize`
+ *
+ * @example
+ * const { textarea, input } = useTextareaAutosize();
+ * // <textarea ref="textarea" v-model="input" />
+ *
+ * @example
+ * const { textarea, input, triggerResize } = useTextareaAutosize({ maxHeight: 320 });
+ *
+ * @since 0.0.15
+ */
+export function useTextareaAutosize(options: UseTextareaAutosizeOptions = {}): UseTextareaAutosizeReturn {
+  const {
+    window = defaultWindow,
+    maxHeight,
+    styleProp = 'height',
+    onResize = noop,
+  } = options;
+
+  const textarea = toRef(options.element) as Ref<HTMLTextAreaElement | undefined | null>;
+  const input = toRef(options.input ?? '') as Ref<string>;
+
+  // Cached, non-reactive — only used to skip redundant resizes on height-only
+  // ResizeObserver callbacks (we resize on width changes, not our own height edits)
+  let lastWidth = -1;
+  let lastScrollHeight = -1;
+
+  const triggerResize: VoidFunction = () => {
+    const el = textarea.value;
+
+    if (!el)
+      return;
+
+    const target = (toValue(options.styleTarget) ?? el) as HTMLElement;
+
+    // Collapse to a single line so scrollHeight reports the true content height
+    el.style[styleProp] = '1px';
+
+    const scrollHeight = el.scrollHeight;
+    const height = maxHeight !== undefined ? Math.min(scrollHeight, maxHeight) : scrollHeight;
+
+    if (target === el)
+      el.style[styleProp] = `${height}px`;
+    else {
+      // Restore the textarea to its natural value and size the wrapper instead
+      el.style[styleProp] = '';
+      target.style[styleProp] = `${height}px`;
+    }
+
+    if (scrollHeight !== lastScrollHeight) {
+      lastScrollHeight = scrollHeight;
+      onResize();
+    }
+  };
+
+  // React to programmatic content changes and to the element binding itself.
+  // flush 'post' guarantees the DOM (and v-model'd value) is updated before we measure
+  watch(
+    [input, textarea],
+    () => nextTick(triggerResize),
+    { immediate: true, flush: 'post' },
+  );
+
+  // React to direct user typing without waiting for the bound model to round-trip.
+  // Passive: we never call preventDefault here
+  useEventListener(textarea, 'input', triggerResize, { passive: true });
+
+  // React to width changes (font/box reflow). Ignore pure height deltas — those
+  // are usually our own edits and would otherwise loop
+  useResizeObserver(textarea, (entries) => {
+    const entry = entries[0];
+
+    if (!entry)
+      return;
+
+    const width = entry.contentRect.width;
+
+    if (width === lastWidth)
+      return;
+
+    const run = () => {
+      lastWidth = width;
+      triggerResize();
+    };
+
+    if (window && typeof window.requestAnimationFrame === 'function')
+      window.requestAnimationFrame(run);
+    else
+      run();
+  });
+
+  if (options.watch)
+    watch(options.watch, triggerResize, { immediate: true, deep: true });
+
+  return {
+    textarea,
+    input,
+    triggerResize,
+  };
+}
diff --git a/vue/toolkit/src/composables/browser/useTitle/demo.vue b/vue/toolkit/src/composables/browser/useTitle/demo.vue
new file mode 100644
index 0000000..793fd98
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useTitle/demo.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useTitle } from './index';
+
+const appName = ref('Toolkit');
+
+// Two-way bound to document.title, formatted through the template.
+const title = useTitle('Dashboard', {
+  titleTemplate: (t) => `${t} · ${appName.value}`,
+});
+
+const presets = ['Dashboard', 'Inbox', 'Settings', 'Billing'];
+
+// Re-apply the template when the app name changes by re-writing the title.
+watch(appName, () => {
+  // eslint-disable-next-line no-self-assign
+  title.value = title.value;
+});
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Live document title
+      </span>
+      <div class="mt-2 flex items-center gap-2 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2.5">
+        <svg viewBox="0 0 24 24" fill="none" class="size-4 shrink-0 text-(--fg-subtle)">
+          <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.5" />
+          <path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" stroke="currentColor" stroke-width="1.5" />
+        </svg>
+        <span class="truncate font-mono text-sm text-(--fg)">
+          {{ title || 'Untitled' }} · {{ appName }}
+        </span>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-1.5">
+      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Page title
+      </label>
+      <input
+        v-model="title"
+        type="text"
+        placeholder="Enter a page title"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+    </div>
+
+    <div class="flex flex-col gap-1.5">
+      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        App name (template suffix)
+      </label>
+      <input
+        v-model="appName"
+        type="text"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+    </div>
+
+    <div class="flex flex-wrap gap-2">
+      <button
+        v-for="preset in presets"
+        :key="preset"
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        :class="title === preset ? 'border-(--accent) text-(--accent-text)' : ''"
+        @click="title = preset"
+      >
+        {{ preset }}
+      </button>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Check your browser tab — it updates in real time.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useTitle/index.test.ts b/vue/toolkit/src/composables/browser/useTitle/index.test.ts
new file mode 100644
index 0000000..606cd3c
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useTitle/index.test.ts
@@ -0,0 +1,141 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { effectScope, nextTick, ref } from 'vue';
+import { useTitle } from '.';
+
+describe(useTitle, () => {
+  beforeEach(() => {
+    document.title = 'initial';
+  });
+
+  it('reads the current document title', () => {
+    const scope = effectScope();
+    let title: ReturnType<typeof useTitle>;
+    scope.run(() => {
+      title = useTitle();
+    });
+    expect(title!.value).toBe('initial');
+    scope.stop();
+  });
+
+  it('writes the document title when the ref changes', async () => {
+    const scope = effectScope();
+    let title: ReturnType<typeof useTitle>;
+    scope.run(() => {
+      title = useTitle();
+    });
+
+    title!.value = 'updated';
+    await nextTick();
+    expect(document.title).toBe('updated');
+    scope.stop();
+  });
+
+  it('applies a title template', () => {
+    const scope = effectScope();
+    scope.run(() => useTitle('Page', { titleTemplate: '%s | App' }));
+    expect(document.title).toBe('Page | App');
+    scope.stop();
+  });
+
+  it('replaces every %s occurrence in the template', () => {
+    const scope = effectScope();
+    scope.run(() => useTitle('X', { titleTemplate: '%s - %s' }));
+    expect(document.title).toBe('X - X');
+    scope.stop();
+  });
+
+  it('supports a function title template', () => {
+    const scope = effectScope();
+    scope.run(() => useTitle('Home', { titleTemplate: t => `[${t}]` }));
+    expect(document.title).toBe('[Home]');
+    scope.stop();
+  });
+
+  it('reacts to a writable ref source', async () => {
+    const scope = effectScope();
+    const source = ref('one');
+    scope.run(() => useTitle(source));
+    await nextTick();
+    expect(document.title).toBe('one');
+    scope.stop();
+  });
+
+  it('returns a read-only ref when a getter source is passed and tracks it', async () => {
+    const scope = effectScope();
+    const count = ref(0);
+    let title: ReturnType<typeof useTitle>;
+    scope.run(() => {
+      title = useTitle(() => `Count ${count.value}`);
+    });
+
+    expect(document.title).toBe('Count 0');
+    expect(title!.value).toBe('Count 0');
+
+    count.value = 5;
+    await nextTick();
+    expect(document.title).toBe('Count 5');
+    expect(title!.value).toBe('Count 5');
+    scope.stop();
+  });
+
+  it('restores the original title on scope dispose', async () => {
+    const scope = effectScope();
+    scope.run(() => useTitle('Temp', { restoreOnUnmount: original => original }));
+    await nextTick();
+    expect(document.title).toBe('Temp');
+
+    scope.stop();
+    await nextTick();
+    expect(document.title).toBe('initial');
+  });
+
+  it('keeps the last title when restoreOnUnmount is omitted', async () => {
+    const scope = effectScope();
+    scope.run(() => useTitle('Sticky'));
+    await nextTick();
+    expect(document.title).toBe('Sticky');
+
+    scope.stop();
+    await nextTick();
+    expect(document.title).toBe('Sticky');
+  });
+
+  it('does not restore when restoreOnUnmount returns null', async () => {
+    const scope = effectScope();
+    scope.run(() => useTitle('Kept', { restoreOnUnmount: () => null }));
+    await nextTick();
+    expect(document.title).toBe('Kept');
+
+    scope.stop();
+    await nextTick();
+    expect(document.title).toBe('Kept');
+  });
+
+  it('syncs external title changes back to the ref when observing', async () => {
+    const scope = effectScope();
+    let title: ReturnType<typeof useTitle>;
+    scope.run(() => {
+      title = useTitle(null, { observe: true });
+    });
+    await nextTick();
+
+    const titleEl = document.head.querySelector('title');
+    expect(titleEl).not.toBeNull();
+
+    document.title = 'external';
+    // Wait for the MutationObserver callback to flush
+    await new Promise(resolve => setTimeout(resolve, 0));
+    expect(title!.value).toBe('external');
+    scope.stop();
+  });
+
+  it('is a no-op without a document (SSR-safe)', () => {
+    const scope = effectScope();
+    let title: ReturnType<typeof useTitle>;
+    scope.run(() => {
+      title = useTitle('SSR', { document: undefined });
+    });
+    expect(title!.value).toBe('SSR');
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/browser/useTitle/index.ts b/vue/toolkit/src/composables/browser/useTitle/index.ts
new file mode 100644
index 0000000..4cae287
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useTitle/index.ts
@@ -0,0 +1,145 @@
+import { computed, ref, toValue, watch } from 'vue';
+import type { ComputedRef, MaybeRef, MaybeRefOrGetter, Ref } from 'vue';
+import { isFunction, isString } from '@robonen/stdlib';
+import { defaultDocument } from '@/types';
+import type { ConfigurableDocument } from '@/types';
+import { useMutationObserver } from '@/composables/elements/useMutationObserver';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+
+export interface UseTitleOptionsBase extends ConfigurableDocument {
+  /**
+   * Observe the `<title>` element for external changes and sync them back to the ref.
+   * Ignored when `titleTemplate` is provided, to avoid a write/observe feedback loop.
+   *
+   * @default false
+   */
+  observe?: boolean;
+
+  /**
+   * Template used to format the title. Every `%s` is replaced with the value.
+   *
+   * @default '%s'
+   */
+  titleTemplate?: MaybeRef<string> | ((title: string) => string);
+
+  /**
+   * Restore the original document title when the active scope is disposed.
+   * Pass a function to compute the title to restore, or `false` to keep the
+   * last value in place.
+   *
+   * @default false
+   */
+  restoreOnUnmount?: false | ((originalTitle: string, currentTitle: string) => string | null | undefined);
+}
+
+export type UseTitleOptions = UseTitleOptionsBase;
+
+export type UseTitleReturn = Ref<string | null | undefined> | ComputedRef<string | null | undefined>;
+
+/**
+ * @name useTitle
+ * @category Browser
+ * @description Reactive `document.title`. Pass a getter to derive the title from
+ * other reactive state (returns a read-only ref), or a plain value/ref for two-way binding.
+ *
+ * @param {MaybeRefOrGetter<string | null | undefined>} [newTitle] Initial title (getter source returns a read-only ref)
+ * @param {UseTitleOptions} [options={}] Options
+ * @returns {UseTitleReturn} A ref bound to the document title (read-only when a getter source is passed)
+ *
+ * @example
+ * const title = useTitle();
+ * title.value = 'New title';
+ *
+ * @example
+ * useTitle('Dashboard', { titleTemplate: '%s | My App' });
+ *
+ * @example
+ * // Derive from reactive state (read-only result)
+ * useTitle(() => `Inbox (${count.value})`);
+ *
+ * @example
+ * // Restore the previous title when the component unmounts
+ * useTitle('Checkout', { restoreOnUnmount: (original) => original });
+ *
+ * @since 0.0.15
+ */
+export function useTitle(
+  newTitle: () => string | null | undefined,
+  options?: UseTitleOptions,
+): ComputedRef<string | null | undefined>;
+export function useTitle(
+  newTitle?: MaybeRef<string | null | undefined>,
+  options?: UseTitleOptions,
+): Ref<string | null | undefined>;
+export function useTitle(
+  newTitle: MaybeRefOrGetter<string | null | undefined> = null,
+  options: UseTitleOptions = {},
+): UseTitleReturn {
+  const {
+    document = defaultDocument,
+    observe = false,
+    titleTemplate = '%s',
+    restoreOnUnmount = false,
+  } = options;
+
+  const originalTitle = document?.title ?? '';
+  const hasTemplate = 'titleTemplate' in options;
+
+  const isReadonly = isFunction(newTitle);
+
+  const title = ref<string | null | undefined>(toValue(newTitle) ?? document?.title ?? null);
+
+  const format = (value: string): string => {
+    if (!hasTemplate)
+      return value;
+
+    return isFunction(titleTemplate)
+      ? titleTemplate(value)
+      : toValue(titleTemplate).split('%s').join(value);
+  };
+
+  watch(
+    title,
+    (value, oldValue) => {
+      if (value !== oldValue && document)
+        document.title = format(isString(value) ? value : '');
+    },
+    { immediate: true },
+  );
+
+  // Keep a read-only ref in sync when the getter source changes
+  if (isReadonly) {
+    watch(
+      () => toValue(newTitle),
+      (value) => {
+        title.value = value;
+      },
+    );
+  }
+
+  // Observing only makes sense without a template, otherwise the formatted
+  // write would feed back through the observer.
+  if (observe && !hasTemplate && document && !isReadonly) {
+    useMutationObserver(
+      document.head?.querySelector('title'),
+      () => {
+        if (document && document.title !== title.value)
+          title.value = document.title;
+      },
+      { childList: true },
+    );
+  }
+
+  if (restoreOnUnmount) {
+    tryOnScopeDispose(() => {
+      const restored = restoreOnUnmount(originalTitle, isString(title.value) ? title.value : '');
+      if (restored !== null && restored !== undefined && document)
+        document.title = restored;
+    });
+  }
+
+  if (isReadonly)
+    return computed(() => title.value);
+
+  return title;
+}
diff --git a/vue/toolkit/src/composables/browser/useUrlSearchParams/demo.vue b/vue/toolkit/src/composables/browser/useUrlSearchParams/demo.vue
new file mode 100644
index 0000000..e0dfca7
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useUrlSearchParams/demo.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useUrlSearchParams } from './index';
+
+interface Filters {
+  q: string;
+  sort: string;
+  tags: string[];
+}
+
+// Reactive object mirrored to the URL query string. Mutate it to update the URL.
+const params = useUrlSearchParams<Filters>('history', {
+  initialValue: { q: 'vue', sort: 'recent', tags: ['ui'] },
+  removeFalsyValues: true,
+});
+
+const sorts = ['recent', 'popular', 'name'];
+const allTags = ['ui', 'browser', 'animation', 'sensors'];
+
+const activeTags = computed<string[]>(() =>
+  Array.isArray(params.tags) ? params.tags : params.tags ? [params.tags] : [],
+);
+
+function toggleTag(tag: string): void {
+  const next = new Set(activeTags.value);
+  if (next.has(tag))
+    next.delete(tag);
+  else
+    next.add(tag);
+  params.tags = [...next];
+}
+
+const queryString = computed(() => {
+  const usp = new URLSearchParams();
+  if (params.q)
+    usp.set('q', params.q);
+  if (params.sort)
+    usp.set('sort', params.sort);
+  for (const t of activeTags.value)
+    usp.append('tags', t);
+  const s = usp.toString();
+  return s ? `?${s}` : '(empty)';
+});
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <div class="flex flex-col gap-1.5">
+      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Search query
+      </label>
+      <input
+        v-model="params.q"
+        type="text"
+        placeholder="Search…"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Sort by</span>
+      <div class="flex flex-wrap gap-2">
+        <button
+          v-for="s in sorts"
+          :key="s"
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+          :class="params.sort === s
+            ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
+            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+          @click="params.sort = s"
+        >
+          {{ s }}
+        </button>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Tags (repeated keys → array)
+      </span>
+      <div class="flex flex-wrap gap-2">
+        <button
+          v-for="tag in allTags"
+          :key="tag"
+          type="button"
+          class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition cursor-pointer"
+          :class="activeTags.includes(tag)
+            ? 'border-(--accent) bg-(--accent-subtle) text-(--accent-text)'
+            : 'border-(--border) bg-(--bg-inset) text-(--fg-muted) hover:border-(--border-strong)'"
+          @click="toggleTag(tag)"
+        >
+          #{{ tag }}
+        </button>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-1.5">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Live URL query
+      </span>
+      <div class="overflow-x-auto rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+        <span class="whitespace-nowrap">{{ queryString }}</span>
+      </div>
+      <p class="text-xs text-(--fg-subtle)">
+        The browser address bar updates as you edit. Falsy values are dropped.
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useUrlSearchParams/index.test.ts b/vue/toolkit/src/composables/browser/useUrlSearchParams/index.test.ts
new file mode 100644
index 0000000..c4e7249
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useUrlSearchParams/index.test.ts
@@ -0,0 +1,293 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { effectScope, nextTick } from 'vue';
+import { useUrlSearchParams } from '.';
+import type { UrlSearchParamsMode, UseUrlSearchParamsOptions } from '.';
+
+function mockWindow(href: string): Window {
+  const url = new URL(href);
+  const location = {
+    get pathname() {
+      return url.pathname;
+    },
+    get search() {
+      return url.search;
+    },
+    get hash() {
+      return url.hash;
+    },
+  };
+
+  const listeners = new Map<string, Set<(ev: any) => void>>();
+
+  const win = {
+    location,
+    document: { title: 'test' },
+    history: {
+      state: null as any,
+      replaceState(state: any, _title: string, nextUrl: string) {
+        this.state = state;
+        const resolved = new URL(nextUrl, url.origin);
+        url.pathname = resolved.pathname;
+        url.search = resolved.search;
+        url.hash = resolved.hash;
+      },
+      pushState(state: any, _title: string, nextUrl: string) {
+        this.state = state;
+        const resolved = new URL(nextUrl, url.origin);
+        url.pathname = resolved.pathname;
+        url.search = resolved.search;
+        url.hash = resolved.hash;
+      },
+    },
+    addEventListener(type: string, listener: (ev: any) => void) {
+      if (!listeners.has(type))
+        listeners.set(type, new Set());
+      listeners.get(type)!.add(listener);
+    },
+    removeEventListener(type: string, listener: (ev: any) => void) {
+      listeners.get(type)?.delete(listener);
+    },
+    dispatch(type: string) {
+      listeners.get(type)?.forEach(fn => fn({ type }));
+    },
+    // Allow tests to simulate external URL changes
+    navigate(nextHref: string) {
+      const resolved = new URL(nextHref, url.origin);
+      url.pathname = resolved.pathname;
+      url.search = resolved.search;
+      url.hash = resolved.hash;
+    },
+    currentSearch() {
+      return url.search;
+    },
+    currentHash() {
+      return url.hash;
+    },
+  };
+
+  return win as unknown as Window & {
+    dispatch: (type: string) => void;
+    navigate: (href: string) => void;
+    currentSearch: () => string;
+    currentHash: () => string;
+  };
+}
+
+function run<T extends Record<string, any>>(
+  mode: UrlSearchParamsMode,
+  options: UseUrlSearchParamsOptions<T>,
+): { scope: ReturnType<typeof effectScope>; params: T } {
+  const scope = effectScope();
+  let params!: T;
+  scope.run(() => {
+    params = useUrlSearchParams<T>(mode, options);
+  });
+  return { scope, params };
+}
+
+describe(useUrlSearchParams, () => {
+  let scopes: Array<ReturnType<typeof effectScope>> = [];
+
+  beforeEach(() => {
+    scopes = [];
+  });
+
+  afterEach(() => {
+    scopes.forEach(scope => scope.stop());
+  });
+
+  function track(scope: ReturnType<typeof effectScope>) {
+    scopes.push(scope);
+    return scope;
+  }
+
+  it('reads existing history params', () => {
+    const window = mockWindow('http://localhost/?foo=bar&count=1');
+    const { scope, params } = run('history', { window });
+    track(scope);
+    expect(params.foo).toBe('bar');
+    expect(params.count).toBe('1');
+  });
+
+  it('decodes repeated keys into arrays', () => {
+    const window = mockWindow('http://localhost/?id=1&id=2&id=3');
+    const { scope, params } = run<{ id: string[] }>('history', { window });
+    track(scope);
+    expect(params.id).toEqual(['1', '2', '3']);
+  });
+
+  it('writes back to the URL when the state mutates', async () => {
+    const window = mockWindow('http://localhost/') as any;
+    const { scope, params } = run('history', { window });
+    track(scope);
+
+    params.foo = 'bar';
+    await nextTick();
+    expect(window.currentSearch()).toBe('?foo=bar');
+  });
+
+  it('writes array values as repeated keys', async () => {
+    const window = mockWindow('http://localhost/') as any;
+    const { scope, params } = run<{ id: string[] }>('history', { window });
+    track(scope);
+
+    params.id = ['1', '2'];
+    await nextTick();
+    expect(window.currentSearch()).toBe('?id=1&id=2');
+  });
+
+  it('seeds initialValue when the URL has no params', () => {
+    const window = mockWindow('http://localhost/');
+    const { scope, params } = run('history', { window, initialValue: { tab: 'home' } });
+    track(scope);
+    expect(params.tab).toBe('home');
+  });
+
+  it('ignores initialValue when the URL already has params', () => {
+    const window = mockWindow('http://localhost/?tab=settings');
+    const { scope, params } = run('history', { window, initialValue: { tab: 'home' } });
+    track(scope);
+    expect(params.tab).toBe('settings');
+  });
+
+  it('removes nullish values by default', async () => {
+    const window = mockWindow('http://localhost/?foo=bar') as any;
+    const { scope, params } = run<{ foo: any }>('history', { window });
+    track(scope);
+
+    params.foo = null;
+    await nextTick();
+    expect(window.currentSearch()).toBe('');
+  });
+
+  it('keeps falsy values unless removeFalsyValues is set', async () => {
+    const windowKeep = mockWindow('http://localhost/') as any;
+    const kept = run<{ foo: any }>('history', { window: windowKeep });
+    track(kept.scope);
+    kept.params.foo = '';
+    await nextTick();
+    expect(windowKeep.currentSearch()).toBe('?foo=');
+
+    const windowDrop = mockWindow('http://localhost/') as any;
+    const dropped = run<{ foo: any }>('history', { window: windowDrop, removeFalsyValues: true });
+    track(dropped.scope);
+    dropped.params.foo = '';
+    await nextTick();
+    expect(windowDrop.currentSearch()).toBe('');
+  });
+
+  it('syncs state when popstate fires', () => {
+    const window = mockWindow('http://localhost/?foo=bar') as any;
+    const { scope, params } = run('history', { window });
+    track(scope);
+    expect(params.foo).toBe('bar');
+
+    window.navigate('http://localhost/?foo=baz&extra=1');
+    window.dispatch('popstate');
+    expect(params.foo).toBe('baz');
+    expect(params.extra).toBe('1');
+  });
+
+  it('does not write back when write is disabled', () => {
+    const window = mockWindow('http://localhost/?foo=bar') as any;
+    const { scope, params } = run('history', { window, write: false });
+    track(scope);
+
+    window.navigate('http://localhost/?foo=changed');
+    window.dispatch('popstate');
+    // write:false short-circuits onChanged, so state is not updated from the event
+    expect(params.foo).toBe('bar');
+  });
+
+  it('reads hash mode params', () => {
+    const window = mockWindow('http://localhost/#/page?foo=bar');
+    const { scope, params } = run('hash', { window });
+    track(scope);
+    expect(params.foo).toBe('bar');
+  });
+
+  it('writes hash mode params while preserving the hash path', async () => {
+    const window = mockWindow('http://localhost/#/page') as any;
+    const { scope, params } = run('hash', { window });
+    track(scope);
+
+    params.foo = 'bar';
+    await nextTick();
+    expect(window.currentHash()).toBe('#/page?foo=bar');
+  });
+
+  it('reads hash-params mode', () => {
+    const window = mockWindow('http://localhost/#foo=bar&count=2');
+    const { scope, params } = run('hash-params', { window });
+    track(scope);
+    expect(params.foo).toBe('bar');
+    expect(params.count).toBe('2');
+  });
+
+  it('writes hash-params mode', async () => {
+    const window = mockWindow('http://localhost/') as any;
+    const { scope, params } = run('hash-params', { window });
+    track(scope);
+
+    params.foo = 'bar';
+    await nextTick();
+    expect(window.currentHash()).toBe('#foo=bar');
+  });
+
+  it('uses pushState when writeMode is push', async () => {
+    const window = mockWindow('http://localhost/') as any;
+    let pushed = 0;
+    const originalPush = window.history.pushState.bind(window.history);
+    window.history.pushState = function (state: any, title: string, url: string) {
+      pushed++;
+      return originalPush(state, title, url);
+    };
+
+    const { scope, params } = run('history', { window, writeMode: 'push' });
+    track(scope);
+
+    params.foo = 'bar';
+    await nextTick();
+    expect(pushed).toBe(1);
+    expect(window.currentSearch()).toBe('?foo=bar');
+  });
+
+  it('applies a custom stringify', async () => {
+    const window = mockWindow('http://localhost/') as any;
+    const { scope, params } = run('history', {
+      window,
+      stringify: p => p.toString().toUpperCase(),
+    });
+    track(scope);
+
+    params.foo = 'bar';
+    await nextTick();
+    expect(window.currentSearch()).toBe('?FOO=BAR');
+  });
+
+  it('removes deleted keys from the URL', async () => {
+    const window = mockWindow('http://localhost/?a=1&b=2') as any;
+    const { scope, params } = run<{ a?: string; b?: string }>('history', { window });
+    track(scope);
+
+    delete params.b;
+    await nextTick();
+    expect(window.currentSearch()).toBe('?a=1');
+  });
+
+  it('returns a reactive seeded object when window is unavailable (SSR)', () => {
+    const scope = effectScope();
+    track(scope);
+    let params!: { foo: string };
+    scope.run(() => {
+      params = useUrlSearchParams<{ foo: string }>('history', {
+        window: undefined,
+        initialValue: { foo: 'bar' },
+      });
+    });
+    expect(params.foo).toBe('bar');
+    // Mutations are still reactive even without a window
+    params.foo = 'baz';
+    expect(params.foo).toBe('baz');
+  });
+});
diff --git a/vue/toolkit/src/composables/browser/useUrlSearchParams/index.ts b/vue/toolkit/src/composables/browser/useUrlSearchParams/index.ts
new file mode 100644
index 0000000..072e920
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useUrlSearchParams/index.ts
@@ -0,0 +1,212 @@
+import { nextTick, reactive } from 'vue';
+import { defaultWindow } from '@/types';
+import type { ConfigurableWindow } from '@/types';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import { watchPausable } from '@/composables/watch/watchPausable';
+
+export type UrlSearchParamsMode = 'history' | 'hash' | 'hash-params';
+
+export type UrlParams = Record<string, string[] | string>;
+
+export interface UseUrlSearchParamsOptions<T> extends ConfigurableWindow {
+  /**
+   * Remove keys whose value is `null` or `undefined` from the URL.
+   *
+   * @default true
+   */
+  removeNullishValues?: boolean;
+
+  /**
+   * Remove keys whose value is falsy (`''`, `0`, `false`, `null`, `undefined`) from the URL.
+   *
+   * @default false
+   */
+  removeFalsyValues?: boolean;
+
+  /**
+   * Seed values applied when the URL has no params on initialization.
+   *
+   * @default {}
+   */
+  initialValue?: T;
+
+  /**
+   * Write changes back to the URL when the reactive state mutates.
+   *
+   * @default true
+   */
+  write?: boolean;
+
+  /**
+   * History method used when writing back to the URL.
+   * - `replace` rewrites the current entry via `history.replaceState`
+   * - `push` adds a new entry via `history.pushState`
+   *
+   * @default 'replace'
+   */
+  writeMode?: 'replace' | 'push';
+
+  /**
+   * Serialize the params into a query string. Override to control ordering or encoding.
+   *
+   * @default (params) => params.toString()
+   */
+  stringify?: (params: URLSearchParams) => string;
+}
+
+export type UseUrlSearchParamsReturn<T extends Record<string, any> = UrlParams>
+  = T;
+
+/**
+ * @name useUrlSearchParams
+ * @category Browser
+ * @description Reactive `URLSearchParams` exposed as a plain reactive object. Reads from and
+ * (optionally) writes back to the URL using the `history`, `hash`, or `hash-params` location source.
+ * Listens for `popstate`/`hashchange` with passive listeners and pauses its own writer while syncing
+ * to avoid feedback loops. SSR-safe: returns the seeded reactive object when no `window` is available.
+ *
+ * @param {UrlSearchParamsMode} [mode='history'] Where the params live: `history` (`?a=1`), `hash` (`#/path?a=1`), or `hash-params` (`#a=1`)
+ * @param {UseUrlSearchParamsOptions<T>} [options={}] Behavior options
+ * @returns {UseUrlSearchParamsReturn<T>} A reactive object mirroring the URL params; mutate it to update the URL
+ *
+ * @example
+ * const params = useUrlSearchParams('history');
+ * params.foo = 'bar'; // -> ?foo=bar
+ *
+ * @example
+ * // Hash mode with seeded values and push-history writes
+ * const params = useUrlSearchParams('hash', {
+ *   initialValue: { tab: 'home' },
+ *   writeMode: 'push',
+ * });
+ *
+ * @example
+ * // Repeated keys decode to arrays
+ * const params = useUrlSearchParams<{ ids: string[] }>('history');
+ * params.ids = ['1', '2']; // -> ?ids=1&ids=2
+ *
+ * @since 0.0.15
+ */
+export function useUrlSearchParams<T extends Record<string, any> = UrlParams>(
+  mode: UrlSearchParamsMode = 'history',
+  options: UseUrlSearchParamsOptions<T> = {},
+): UseUrlSearchParamsReturn<T> {
+  const {
+    initialValue = {} as T,
+    removeNullishValues = true,
+    removeFalsyValues = false,
+    write: enableWrite = true,
+    writeMode = 'replace',
+    window = defaultWindow,
+    stringify = (params: URLSearchParams) => params.toString(),
+  } = options;
+
+  if (!window)
+    return reactive({ ...initialValue }) as UseUrlSearchParamsReturn<T>;
+
+  const state = reactive<Record<string, any>>({});
+
+  const getRawParams = (): string => {
+    if (mode === 'history')
+      return window.location.search || '';
+
+    if (mode === 'hash') {
+      const hash = window.location.hash || '';
+      const index = hash.indexOf('?');
+      return index > 0 ? hash.slice(index) : '';
+    }
+
+    return (window.location.hash || '').replace(/^#/, '');
+  };
+
+  const constructQuery = (params: URLSearchParams): string => {
+    const stringified = stringify(params);
+
+    if (mode === 'history')
+      return `${stringified ? `?${stringified}` : ''}${window.location.hash || ''}`;
+
+    if (mode === 'hash-params')
+      return `${window.location.search || ''}${stringified ? `#${stringified}` : ''}`;
+
+    const hash = window.location.hash || '#';
+    const index = hash.indexOf('?');
+    if (index > 0)
+      return `${window.location.search || ''}${hash.slice(0, index)}${stringified ? `?${stringified}` : ''}`;
+
+    return `${window.location.search || ''}${hash}${stringified ? `?${stringified}` : ''}`;
+  };
+
+  const read = (): URLSearchParams => new URLSearchParams(getRawParams());
+
+  const updateState = (params: URLSearchParams): void => {
+    const unusedKeys = new Set(Object.keys(state));
+    for (const key of params.keys()) {
+      const valuesForKey = params.getAll(key);
+      state[key] = valuesForKey.length > 1 ? valuesForKey : (params.get(key) || '');
+      unusedKeys.delete(key);
+    }
+    for (const key of unusedKeys)
+      delete state[key];
+  };
+
+  const serializeState = (): URLSearchParams => {
+    const params = new URLSearchParams('');
+    for (const key of Object.keys(state)) {
+      const value = state[key];
+      if (Array.isArray(value))
+        value.forEach(item => params.append(key, item));
+      else if (removeNullishValues && (value === null || value === undefined))
+        params.delete(key);
+      else if (removeFalsyValues && !value)
+        params.delete(key);
+      else
+        params.set(key, value);
+    }
+    return params;
+  };
+
+  const write = (params: URLSearchParams, shouldUpdateState: boolean, shouldWriteHistory = true): void => {
+    pause();
+
+    if (shouldUpdateState)
+      updateState(params);
+
+    const url = window.location.pathname + constructQuery(params);
+
+    if (writeMode === 'replace')
+      window.history.replaceState(window.history.state, window.document.title, url);
+    else if (shouldWriteHistory)
+      window.history.pushState(window.history.state, window.document.title, url);
+
+    nextTick(() => resume());
+  };
+
+  const { pause, resume } = watchPausable(
+    state,
+    () => write(serializeState(), false),
+    { deep: true, initialState: 'paused' },
+  );
+
+  const onChanged = (): void => {
+    if (!enableWrite)
+      return;
+
+    write(read(), true, false);
+  };
+
+  const listenerOptions = { passive: true };
+
+  useEventListener(window, 'popstate', onChanged, listenerOptions);
+  if (mode !== 'history')
+    useEventListener(window, 'hashchange', onChanged, listenerOptions);
+
+  const initial = read();
+  if (!initial.keys().next().done)
+    updateState(initial);
+  else
+    Object.assign(state, initialValue);
+
+  resume();
+
+  return state as UseUrlSearchParamsReturn<T>;
+}
diff --git a/vue/toolkit/src/composables/browser/useVibrate/demo.vue b/vue/toolkit/src/composables/browser/useVibrate/demo.vue
new file mode 100644
index 0000000..bbea540
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useVibrate/demo.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useVibrate } from './index';
+
+const presets: Record<string, number[]> = {
+  Pulse: [200],
+  Double: [100, 60, 100],
+  SOS: [100, 60, 100, 60, 100, 200, 250, 60, 250, 60, 250, 200, 100, 60, 100, 60, 100],
+  Heartbeat: [120, 100, 120, 500],
+};
+
+const { isSupported, pattern, vibrate, stop, intervalControls } = useVibrate({
+  pattern: presets.Double,
+  interval: 1500,
+});
+
+const activePreset = ref('Double');
+const looping = intervalControls?.isActive;
+
+function applyPreset(name: string): void {
+  activePreset.value = name;
+  pattern.value = presets[name];
+  vibrate();
+}
+
+function toggleLoop(): void {
+  if (intervalControls?.isActive.value)
+    stop();
+  else
+    intervalControls?.resume();
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      v-if="!isSupported"
+      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-700 dark:text-amber-300"
+    >
+      The Vibration API is not supported in this browser. Try a mobile device.
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Current pattern (ms)
+        </span>
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+          :class="isSupported
+            ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+            : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+        >
+          {{ isSupported ? 'supported' : 'unsupported' }}
+        </span>
+      </div>
+      <div class="mt-2 overflow-x-auto rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+        [{{ Array.isArray(pattern) ? pattern.join(', ') : pattern }}]
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Presets</span>
+      <div class="grid grid-cols-2 gap-2">
+        <button
+          v-for="(_, name) in presets"
+          :key="name"
+          type="button"
+          :disabled="!isSupported"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          :class="activePreset === name
+            ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
+            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+          @click="applyPreset(name)"
+        >
+          {{ name }}
+        </button>
+      </div>
+    </div>
+
+    <div class="flex flex-wrap gap-2">
+      <button
+        type="button"
+        :disabled="!isSupported"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="vibrate()"
+      >
+        Vibrate now
+      </button>
+      <button
+        type="button"
+        :disabled="!isSupported"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="toggleLoop"
+      >
+        {{ looping ? 'Stop loop' : 'Loop every 1.5s' }}
+      </button>
+      <button
+        type="button"
+        :disabled="!isSupported"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="stop"
+      >
+        Stop
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useVibrate/index.test.ts b/vue/toolkit/src/composables/browser/useVibrate/index.test.ts
new file mode 100644
index 0000000..e3d53f4
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useVibrate/index.test.ts
@@ -0,0 +1,198 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, ref } from 'vue';
+import { useVibrate } from '.';
+
+function stubNavigator() {
+  const vibrate = vi.fn(() => true);
+  const navigator = { vibrate } as unknown as Navigator;
+  return { navigator, vibrate };
+}
+
+describe(useVibrate, () => {
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.unstubAllGlobals();
+  });
+
+  it('reports support based on the provided navigator', () => {
+    const { navigator } = stubNavigator();
+    const scope = effectScope();
+    let result: ReturnType<typeof useVibrate>;
+    scope.run(() => {
+      result = useVibrate({ navigator });
+    });
+
+    expect(result!.isSupported.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('reports unsupported when navigator lacks vibrate', () => {
+    const navigator = {} as Navigator;
+    const scope = effectScope();
+    let result: ReturnType<typeof useVibrate>;
+    scope.run(() => {
+      result = useVibrate({ navigator });
+    });
+
+    expect(result!.isSupported.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('reports unsupported when navigator is undefined (SSR path)', () => {
+    const scope = effectScope();
+    let result: ReturnType<typeof useVibrate>;
+    scope.run(() => {
+      result = useVibrate({ navigator: undefined });
+    });
+
+    expect(result!.isSupported.value).toBeFalsy();
+    // vibrate/stop must not throw when unsupported
+    expect(() => result!.vibrate()).not.toThrow();
+    expect(() => result!.stop()).not.toThrow();
+    scope.stop();
+  });
+
+  it('vibrates with the configured pattern by default', () => {
+    const { navigator, vibrate } = stubNavigator();
+    const scope = effectScope();
+    let result: ReturnType<typeof useVibrate>;
+    scope.run(() => {
+      result = useVibrate({ pattern: [200, 100, 200], navigator });
+    });
+
+    result!.vibrate();
+    expect(vibrate).toHaveBeenCalledWith([200, 100, 200]);
+    scope.stop();
+  });
+
+  it('vibrates with a one-off pattern argument', () => {
+    const { navigator, vibrate } = stubNavigator();
+    const scope = effectScope();
+    let result: ReturnType<typeof useVibrate>;
+    scope.run(() => {
+      result = useVibrate({ pattern: [200], navigator });
+    });
+
+    result!.vibrate(500);
+    expect(vibrate).toHaveBeenCalledWith(500);
+    scope.stop();
+  });
+
+  it('exposes a reactive pattern that controls default vibration', () => {
+    const { navigator, vibrate } = stubNavigator();
+    const scope = effectScope();
+    let result: ReturnType<typeof useVibrate>;
+    scope.run(() => {
+      result = useVibrate({ pattern: [100], navigator });
+    });
+
+    result!.pattern.value = [300, 50, 300];
+    result!.vibrate();
+    expect(vibrate).toHaveBeenCalledWith([300, 50, 300]);
+    scope.stop();
+  });
+
+  it('accepts a ref pattern', () => {
+    const { navigator, vibrate } = stubNavigator();
+    const pattern = ref<number[]>([10]);
+    const scope = effectScope();
+    let result: ReturnType<typeof useVibrate>;
+    scope.run(() => {
+      result = useVibrate({ pattern, navigator });
+    });
+
+    pattern.value = [20, 30];
+    result!.vibrate();
+    expect(vibrate).toHaveBeenCalledWith([20, 30]);
+    scope.stop();
+  });
+
+  it('stop() cancels any ongoing vibration', () => {
+    const { navigator, vibrate } = stubNavigator();
+    const scope = effectScope();
+    let result: ReturnType<typeof useVibrate>;
+    scope.run(() => {
+      result = useVibrate({ pattern: [200], navigator });
+    });
+
+    result!.stop();
+    expect(vibrate).toHaveBeenCalledWith(0);
+    scope.stop();
+  });
+
+  it('does not expose interval controls when interval is 0', () => {
+    const { navigator } = stubNavigator();
+    const scope = effectScope();
+    let result: ReturnType<typeof useVibrate>;
+    scope.run(() => {
+      result = useVibrate({ navigator });
+    });
+
+    expect(result!.intervalControls).toBeUndefined();
+    scope.stop();
+  });
+
+  it('exposes interval controls when interval > 0 and loops the pattern', () => {
+    vi.useFakeTimers();
+    const { navigator, vibrate } = stubNavigator();
+    const scope = effectScope();
+    let result: ReturnType<typeof useVibrate>;
+    scope.run(() => {
+      result = useVibrate({ pattern: [100], interval: 1000, navigator });
+    });
+
+    expect(result!.intervalControls).toBeDefined();
+    expect(result!.intervalControls!.isActive.value).toBeFalsy();
+
+    result!.intervalControls!.resume();
+    expect(result!.intervalControls!.isActive.value).toBeTruthy();
+
+    vi.advanceTimersByTime(2500);
+    expect(vibrate).toHaveBeenCalledTimes(2);
+    expect(vibrate).toHaveBeenCalledWith([100]);
+
+    scope.stop();
+  });
+
+  it('stop() pauses the interval loop', () => {
+    vi.useFakeTimers();
+    const { navigator, vibrate } = stubNavigator();
+    const scope = effectScope();
+    let result: ReturnType<typeof useVibrate>;
+    scope.run(() => {
+      result = useVibrate({ pattern: [100], interval: 1000, navigator });
+    });
+
+    result!.intervalControls!.resume();
+    vi.advanceTimersByTime(1000);
+    expect(vibrate).toHaveBeenCalledTimes(1);
+
+    result!.stop();
+    expect(result!.intervalControls!.isActive.value).toBeFalsy();
+
+    // vibrate(0) from stop plus the single loop tick
+    vibrate.mockClear();
+    vi.advanceTimersByTime(3000);
+    expect(vibrate).not.toHaveBeenCalled();
+
+    scope.stop();
+  });
+
+  it('stops the interval loop when the scope is disposed', async () => {
+    vi.useFakeTimers();
+    const { navigator, vibrate } = stubNavigator();
+    const scope = effectScope();
+    let result: ReturnType<typeof useVibrate>;
+    scope.run(() => {
+      result = useVibrate({ pattern: [100], interval: 1000, navigator });
+    });
+
+    result!.intervalControls!.resume();
+    scope.stop();
+    await nextTick();
+
+    vibrate.mockClear();
+    vi.advanceTimersByTime(3000);
+    expect(vibrate).not.toHaveBeenCalled();
+  });
+});
diff --git a/vue/toolkit/src/composables/browser/useVibrate/index.ts b/vue/toolkit/src/composables/browser/useVibrate/index.ts
new file mode 100644
index 0000000..559df33
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useVibrate/index.ts
@@ -0,0 +1,115 @@
+import { toRef } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';
+import type { Arrayable } from '@robonen/stdlib';
+import type { ConfigurableNavigator } from '@/types';
+import { defaultNavigator } from '@/types';
+import { useSupported } from '@/composables/utilities/useSupported';
+import { useIntervalFn } from '@/composables/animation/useIntervalFn';
+import type { UseIntervalFnReturn } from '@/composables/animation/useIntervalFn';
+
+export interface UseVibrateOptions extends ConfigurableNavigator {
+  /**
+   * The pattern of vibrations and pauses (in milliseconds).
+   *
+   * A single number vibrates for that many milliseconds; an array alternates
+   * between vibration and pause durations.
+   *
+   * @default []
+   */
+  pattern?: MaybeRefOrGetter<Arrayable<number>>;
+
+  /**
+   * Interval (in milliseconds) to automatically run the vibration pattern on a loop.
+   *
+   * When greater than `0`, an `intervalControls` object is returned so the loop can
+   * be paused/resumed. The loop does not start automatically; call `vibrate()` once
+   * or use `intervalControls.resume()`.
+   *
+   * @default 0
+   */
+  interval?: number;
+}
+
+export interface UseVibrateReturn {
+  /**
+   * Whether the Vibration API is supported in the current environment.
+   */
+  isSupported: ComputedRef<boolean>;
+
+  /**
+   * The reactive vibration pattern. Mutating it changes what `vibrate()` plays by default.
+   */
+  pattern: Ref<Arrayable<number>>;
+
+  /**
+   * Pause/resume controls for the interval loop. Only present when `interval > 0`.
+   */
+  intervalControls?: UseIntervalFnReturn;
+
+  /**
+   * Trigger a vibration. Falls back to the configured `pattern` when called without arguments.
+   *
+   * @param pattern - Optional one-off pattern to play instead of the configured one
+   */
+  vibrate: (pattern?: Arrayable<number>) => void;
+
+  /**
+   * Stop any ongoing vibration and pause the interval loop (if any).
+   */
+  stop: () => void;
+}
+
+/**
+ * @name useVibrate
+ * @category Browser
+ * @description Reactive wrapper around the `navigator.vibrate` Vibration API.
+ *
+ * @param {UseVibrateOptions} [options] Configuration options
+ * @returns {UseVibrateReturn} Support flag, reactive pattern, vibrate/stop actions, and optional interval controls
+ *
+ * @example
+ * const { vibrate, stop, isSupported } = useVibrate({ pattern: [200, 100, 200] });
+ * vibrate();
+ *
+ * @example
+ * // Loop a pattern on an interval
+ * const { vibrate, stop, intervalControls } = useVibrate({ pattern: [300, 100], interval: 2000 });
+ * intervalControls?.resume();
+ *
+ * @since 0.0.15
+ */
+export function useVibrate(options: UseVibrateOptions = {}): UseVibrateReturn {
+  const {
+    pattern = [],
+    interval = 0,
+    navigator = defaultNavigator,
+  } = options;
+
+  const isSupported = useSupported(() => navigator !== undefined && !!navigator && 'vibrate' in navigator);
+
+  const patternRef = toRef(pattern);
+
+  function vibrate(pattern: Arrayable<number> = patternRef.value): void {
+    if (isSupported.value)
+      navigator!.vibrate(pattern);
+  }
+
+  const intervalControls: UseIntervalFnReturn | undefined = interval > 0
+    ? useIntervalFn(vibrate, interval, { immediate: false })
+    : undefined;
+
+  function stop(): void {
+    if (isSupported.value)
+      navigator!.vibrate(0);
+
+    intervalControls?.pause();
+  }
+
+  return {
+    isSupported,
+    pattern: patternRef,
+    intervalControls,
+    vibrate,
+    stop,
+  };
+}
diff --git a/vue/toolkit/src/composables/browser/useWakeLock/demo.vue b/vue/toolkit/src/composables/browser/useWakeLock/demo.vue
new file mode 100644
index 0000000..26f9c05
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useWakeLock/demo.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useWakeLock } from './index';
+
+const { isSupported, isActive, sentinel, request, release } = useWakeLock();
+
+const error = ref<string | null>(null);
+
+async function toggle(): Promise<void> {
+  error.value = null;
+  try {
+    if (sentinel.value)
+      await release();
+    else
+      await request('screen');
+  }
+  catch (e) {
+    error.value = e instanceof Error ? e.message : String(e);
+  }
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      v-if="!isSupported"
+      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-700 dark:text-amber-300"
+    >
+      The Screen Wake Lock API is not supported in this browser.
+    </div>
+
+    <div class="flex flex-col items-center gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-6">
+      <div
+        class="flex size-16 items-center justify-center rounded-full border transition"
+        :class="isActive
+          ? 'border-emerald-500/40 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-(--border) bg-(--bg-inset) text-(--fg-subtle)'"
+      >
+        <svg viewBox="0 0 24 24" fill="none" class="size-7">
+          <rect x="4" y="3" width="16" height="14" rx="2" stroke="currentColor" stroke-width="1.5" />
+          <path d="M8 21h8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+          <path v-if="isActive" d="m9 9 2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+      </div>
+      <div class="text-center">
+        <p class="font-mono text-3xl font-bold tabular-nums text-(--fg)">
+          {{ isActive ? 'AWAKE' : 'IDLE' }}
+        </p>
+        <p class="mt-1 text-xs text-(--fg-muted)">
+          {{ isActive ? 'Screen will stay on' : 'Screen may sleep normally' }}
+        </p>
+      </div>
+    </div>
+
+    <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2.5 text-sm">
+      <span class="text-(--fg-muted)">Lock held</span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-elevated) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        {{ sentinel ? 'yes' : 'none' }}
+      </span>
+    </div>
+
+    <button
+      type="button"
+      :disabled="!isSupported"
+      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+      @click="toggle"
+    >
+      {{ sentinel ? 'Release wake lock' : 'Request wake lock' }}
+    </button>
+
+    <p v-if="error" class="text-xs text-red-600 dark:text-red-400">
+      {{ error }}
+    </p>
+    <p v-else class="text-xs text-(--fg-subtle)">
+      The lock auto-releases when the tab is hidden and re-acquires when visible again.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useWakeLock/index.test.ts b/vue/toolkit/src/composables/browser/useWakeLock/index.test.ts
new file mode 100644
index 0000000..25f5ef2
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useWakeLock/index.test.ts
@@ -0,0 +1,224 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick } from 'vue';
+import { useWakeLock } from '.';
+import type { WakeLockSentinel, WakeLockType } from '.';
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+interface FakeSentinel extends WakeLockSentinel {
+  dispatchRelease: () => void;
+}
+
+function createFakeSentinel(type: WakeLockType): FakeSentinel {
+  const target = new EventTarget();
+  const sentinel = target as unknown as FakeSentinel;
+  sentinel.type = type;
+  sentinel.released = false;
+  sentinel.release = vi.fn(async () => {
+    sentinel.released = true;
+  });
+  sentinel.dispatchRelease = () => {
+    sentinel.released = true;
+    target.dispatchEvent(new Event('release'));
+  };
+  return sentinel;
+}
+
+interface FakeEnv {
+  navigator: Navigator;
+  request: ReturnType<typeof vi.fn>;
+  sentinels: FakeSentinel[];
+}
+
+function createFakeNavigator(): FakeEnv {
+  const sentinels: FakeSentinel[] = [];
+  const request = vi.fn(async (type: WakeLockType) => {
+    const sentinel = createFakeSentinel(type);
+    sentinels.push(sentinel);
+    return sentinel;
+  });
+  const navigator = { wakeLock: { request } } as unknown as Navigator;
+  return { navigator, request, sentinels };
+}
+
+function createFakeDocument(state: DocumentVisibilityState = 'visible') {
+  const target = new EventTarget();
+  const doc = {
+    visibilityState: state,
+    addEventListener: target.addEventListener.bind(target),
+    removeEventListener: target.removeEventListener.bind(target),
+  } as unknown as Document & { visibilityState: DocumentVisibilityState };
+  const setVisibility = (next: DocumentVisibilityState) => {
+    doc.visibilityState = next;
+    target.dispatchEvent(new Event('visibilitychange'));
+  };
+  return { document: doc, setVisibility };
+}
+
+describe(useWakeLock, () => {
+  it('reports supported when navigator.wakeLock exists', () => {
+    const { navigator } = createFakeNavigator();
+    const scope = effectScope();
+    let api: ReturnType<typeof useWakeLock>;
+    scope.run(() => {
+      api = useWakeLock({ navigator });
+    });
+
+    expect(api!.isSupported.value).toBeTruthy();
+    expect(api!.isActive.value).toBeFalsy();
+    expect(api!.sentinel.value).toBeNull();
+    scope.stop();
+  });
+
+  it('reports unsupported when wakeLock is missing', () => {
+    const navigator = {} as Navigator;
+    const scope = effectScope();
+    let api: ReturnType<typeof useWakeLock>;
+    scope.run(() => {
+      api = useWakeLock({ navigator });
+    });
+
+    expect(api!.isSupported.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('requests a wake lock and becomes active', async () => {
+    const { navigator, request } = createFakeNavigator();
+    const { document } = createFakeDocument('visible');
+    const scope = effectScope();
+    let api: ReturnType<typeof useWakeLock>;
+    scope.run(() => {
+      api = useWakeLock({ navigator, document });
+    });
+
+    await api!.request('screen');
+
+    expect(request).toHaveBeenCalledWith('screen');
+    expect(api!.sentinel.value).not.toBeNull();
+    expect(api!.isActive.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('releases the wake lock and clears the sentinel', async () => {
+    const { navigator, sentinels } = createFakeNavigator();
+    const { document } = createFakeDocument('visible');
+    const scope = effectScope();
+    let api: ReturnType<typeof useWakeLock>;
+    scope.run(() => {
+      api = useWakeLock({ navigator, document });
+    });
+
+    await api!.request('screen');
+    await api!.release();
+
+    expect(sentinels[0]!.release).toHaveBeenCalledTimes(1);
+    expect(api!.sentinel.value).toBeNull();
+    expect(api!.isActive.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('forceRequest releases the previous lock before acquiring a new one', async () => {
+    const { navigator, sentinels, request } = createFakeNavigator();
+    const { document } = createFakeDocument('visible');
+    const scope = effectScope();
+    let api: ReturnType<typeof useWakeLock>;
+    scope.run(() => {
+      api = useWakeLock({ navigator, document });
+    });
+
+    await api!.forceRequest('screen');
+    await api!.forceRequest('screen');
+
+    expect(request).toHaveBeenCalledTimes(2);
+    expect(sentinels[0]!.release).toHaveBeenCalledTimes(1);
+    expect(api!.sentinel.value).toBe(sentinels[1]);
+    scope.stop();
+  });
+
+  it('defers the request while hidden and re-acquires on visible', async () => {
+    const { navigator, request } = createFakeNavigator();
+    const { document, setVisibility } = createFakeDocument('hidden');
+    const scope = effectScope();
+    let api: ReturnType<typeof useWakeLock>;
+    scope.run(() => {
+      api = useWakeLock({ navigator, document });
+    });
+
+    await api!.request('screen');
+
+    // Hidden: nothing acquired yet
+    expect(request).not.toHaveBeenCalled();
+    expect(api!.sentinel.value).toBeNull();
+
+    setVisibility('visible');
+    await nextTick();
+    await nextTick();
+
+    expect(request).toHaveBeenCalledWith('screen');
+    expect(api!.sentinel.value).not.toBeNull();
+    expect(api!.isActive.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('re-acquires after the browser releases the lock on the next visible transition', async () => {
+    const { navigator, sentinels, request } = createFakeNavigator();
+    const { document, setVisibility } = createFakeDocument('visible');
+    const scope = effectScope();
+    let api: ReturnType<typeof useWakeLock>;
+    scope.run(() => {
+      api = useWakeLock({ navigator, document });
+    });
+
+    await api!.request('screen');
+    expect(request).toHaveBeenCalledTimes(1);
+
+    // Browser auto-releases the sentinel (e.g. the tab was hidden)
+    setVisibility('hidden');
+    await nextTick();
+    sentinels[0]!.dispatchRelease();
+    await nextTick();
+
+    // Becoming visible again should re-acquire
+    setVisibility('visible');
+    await nextTick();
+    await nextTick();
+
+    expect(request).toHaveBeenCalledTimes(2);
+    scope.stop();
+  });
+
+  it('is SSR-safe with no navigator/document', async () => {
+    const scope = effectScope();
+    let api: ReturnType<typeof useWakeLock>;
+    scope.run(() => {
+      api = useWakeLock({ navigator: undefined, document: undefined });
+    });
+
+    expect(api!.isSupported.value).toBeFalsy();
+
+    // Should not throw on the unsupported path
+    await api!.request('screen');
+    expect(api!.sentinel.value).toBeNull();
+    expect(api!.isActive.value).toBeFalsy();
+    await api!.release();
+    scope.stop();
+  });
+
+  it('releases on scope dispose', async () => {
+    const { navigator, sentinels } = createFakeNavigator();
+    const { document } = createFakeDocument('visible');
+    const scope = effectScope();
+    let api: ReturnType<typeof useWakeLock>;
+    scope.run(() => {
+      api = useWakeLock({ navigator, document });
+    });
+
+    await api!.request('screen');
+    scope.stop();
+    await nextTick();
+
+    expect(sentinels[0]!.release).toHaveBeenCalled();
+  });
+});
diff --git a/vue/toolkit/src/composables/browser/useWakeLock/index.ts b/vue/toolkit/src/composables/browser/useWakeLock/index.ts
new file mode 100644
index 0000000..312fd91
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useWakeLock/index.ts
@@ -0,0 +1,143 @@
+import { computed, shallowRef, watch } from 'vue';
+import type { ComputedRef, ShallowRef } from 'vue';
+import { defaultDocument, defaultNavigator } from '@/types';
+import type { ConfigurableDocument, ConfigurableNavigator } from '@/types';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import { useSupported } from '@/composables/utilities/useSupported';
+import { useDocumentVisibility } from '@/composables/elements/useDocumentVisibility';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+
+export type WakeLockType = 'screen';
+
+export interface WakeLockSentinel extends EventTarget {
+  type: WakeLockType;
+  released: boolean;
+  release: () => Promise<void>;
+}
+
+type NavigatorWithWakeLock
+  = Navigator & {
+    wakeLock: { request: (type: WakeLockType) => Promise<WakeLockSentinel> };
+  };
+
+export type UseWakeLockOptions
+  = ConfigurableNavigator & ConfigurableDocument;
+
+export interface UseWakeLockReturn {
+  /**
+   * Whether the Screen Wake Lock API is supported.
+   */
+  isSupported: ComputedRef<boolean>;
+  /**
+   * The current `WakeLockSentinel`, or `null` when no lock is held.
+   */
+  sentinel: ShallowRef<WakeLockSentinel | null>;
+  /**
+   * Whether a wake lock is currently held AND the document is visible.
+   */
+  isActive: ComputedRef<boolean>;
+  /**
+   * Request a wake lock. If the document is hidden, the request is deferred
+   * and automatically (re)acquired once the document becomes visible again.
+   */
+  request: (type: WakeLockType) => Promise<void>;
+  /**
+   * Request a wake lock immediately, releasing any existing one first.
+   * Will reject (via `onError`) if the document is hidden.
+   */
+  forceRequest: (type: WakeLockType) => Promise<void>;
+  /**
+   * Release the current wake lock and cancel any deferred request.
+   */
+  release: () => Promise<void>;
+}
+
+/**
+ * @name useWakeLock
+ * @category Browser
+ * @description Reactive wrapper over the Screen Wake Lock API to keep the screen awake.
+ * Re-acquires a deferred lock automatically when the document returns to visible.
+ *
+ * @param {UseWakeLockOptions} [options={}] Options (custom `navigator`, `document`)
+ * @returns {UseWakeLockReturn} `{ isSupported, sentinel, isActive, request, forceRequest, release }`
+ *
+ * @example
+ * const { isSupported, isActive, request, release } = useWakeLock();
+ * await request('screen');
+ * // ...later
+ * await release();
+ *
+ * @example
+ * // forceRequest re-acquires immediately, dropping any existing lock
+ * const { forceRequest } = useWakeLock();
+ * await forceRequest('screen');
+ *
+ * @since 0.0.15
+ */
+export function useWakeLock(options: UseWakeLockOptions = {}): UseWakeLockReturn {
+  const {
+    navigator = defaultNavigator,
+    document = defaultDocument,
+  } = options;
+
+  // Type to re-acquire once the document becomes visible again, or `false` when none pending.
+  const requestedType = shallowRef<WakeLockType | false>(false);
+  const sentinel = shallowRef<WakeLockSentinel | null>(null);
+  const visibility = useDocumentVisibility({ document });
+
+  const isSupported = useSupported(() => !!navigator && 'wakeLock' in navigator);
+  const isActive = computed(() => !!sentinel.value && visibility.value === 'visible');
+
+  async function forceRequest(type: WakeLockType): Promise<void> {
+    await sentinel.value?.release();
+    sentinel.value = isSupported.value
+      ? await (navigator as NavigatorWithWakeLock).wakeLock.request(type)
+      : null;
+  }
+
+  async function request(type: WakeLockType): Promise<void> {
+    if (visibility.value === 'visible')
+      await forceRequest(type);
+    else
+      requestedType.value = type;
+  }
+
+  async function release(): Promise<void> {
+    requestedType.value = false;
+    const current = sentinel.value;
+    sentinel.value = null;
+    await current?.release();
+  }
+
+  if (isSupported.value) {
+    // The browser auto-releases the lock when the document is hidden;
+    // remember the type so we can re-acquire on the next visible transition.
+    useEventListener(sentinel, 'release', () => {
+      requestedType.value = sentinel.value?.type ?? false;
+    }, { passive: true });
+
+    watch(
+      () => visibility.value === 'visible' && requestedType.value,
+      (type) => {
+        if (!type)
+          return;
+
+        requestedType.value = false;
+        forceRequest(type);
+      },
+    );
+  }
+
+  tryOnScopeDispose(() => {
+    release();
+  });
+
+  return {
+    isSupported,
+    sentinel,
+    isActive,
+    request,
+    forceRequest,
+    release,
+  };
+}
diff --git a/vue/toolkit/src/composables/browser/useWebNotification/demo.vue b/vue/toolkit/src/composables/browser/useWebNotification/demo.vue
new file mode 100644
index 0000000..16103ad
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useWebNotification/demo.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useWebNotification } from './index';
+
+const title = ref('New message from Ada');
+const body = ref('Hey — the deploy is green. Ship it whenever you are ready.');
+const lastEvent = ref<string>('');
+
+const {
+  isSupported,
+  notification,
+  permissionGranted,
+  show,
+  close,
+  ensurePermissionGranted,
+  onClick,
+  onShow,
+  onClose,
+  onError,
+} = useWebNotification({
+  // Don't prompt on mount — wait for an explicit user gesture below.
+  requestPermissions: false,
+  icon: 'https://vuejs.org/images/logo.png',
+  requireInteraction: false,
+});
+
+onShow(() => (lastEvent.value = 'shown'));
+onClick(() => (lastEvent.value = 'clicked'));
+onClose(() => (lastEvent.value = 'closed'));
+onError(() => (lastEvent.value = 'error'));
+
+async function requestPermission() {
+  await ensurePermissionGranted();
+}
+
+function notify() {
+  show({ title: title.value, body: body.value });
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      v-if="!isSupported"
+      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-700 dark:text-amber-400"
+    >
+      Notifications are not supported in this browser.
+    </div>
+
+    <template v-else>
+      <div class="flex items-center justify-between rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+        <div>
+          <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+            Permission
+          </div>
+          <div class="mt-1 flex items-center gap-2 text-sm text-(--fg-muted)">
+            <span
+              class="inline-block size-2 rounded-full transition"
+              :class="permissionGranted ? 'bg-emerald-500' : 'bg-(--border-strong)'"
+            />
+            {{ permissionGranted ? 'Granted' : 'Not granted' }}
+          </div>
+        </div>
+        <button
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          :disabled="permissionGranted"
+          @click="requestPermission"
+        >
+          {{ permissionGranted ? 'Allowed' : 'Request access' }}
+        </button>
+      </div>
+
+      <div class="flex flex-col gap-3">
+        <label class="flex flex-col gap-1.5">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Title</span>
+          <input
+            v-model="title"
+            type="text"
+            class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          >
+        </label>
+        <label class="flex flex-col gap-1.5">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Body</span>
+          <textarea
+            v-model="body"
+            rows="2"
+            class="w-full resize-none rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          />
+        </label>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <button
+          class="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          :disabled="!permissionGranted"
+          @click="notify"
+        >
+          Show notification
+        </button>
+        <button
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          :disabled="!notification"
+          @click="close"
+        >
+          Close
+        </button>
+      </div>
+
+      <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-sm">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Last event</span>
+        <span class="font-mono text-(--fg)">{{ lastEvent || '—' }}</span>
+      </div>
+
+      <p v-if="!permissionGranted" class="text-xs text-(--fg-subtle)">
+        Grant access first, then trigger a notification. Switch back to this tab and it auto-closes.
+      </p>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useWebNotification/index.test.ts b/vue/toolkit/src/composables/browser/useWebNotification/index.test.ts
new file mode 100644
index 0000000..70dbc2a
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useWebNotification/index.test.ts
@@ -0,0 +1,282 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick } from 'vue';
+import { useWebNotification } from '.';
+
+// A minimal stub of the `Notification` constructor. `permission` and the
+// `requestPermission` result are configurable per test via the static fields.
+class StubNotification {
+  static permission: NotificationPermission = 'granted';
+  static requestPermission = vi.fn(async (): Promise<NotificationPermission> => StubNotification.permission);
+
+  title: string;
+  options: any;
+  onclick: ((e: Event) => void) | null = null;
+  onshow: ((e: Event) => void) | null = null;
+  onerror: ((e: Event) => void) | null = null;
+  onclose: ((e: Event) => void) | null = null;
+  close = vi.fn();
+
+  static instances: StubNotification[] = [];
+
+  constructor(title: string, options?: any) {
+    this.title = title;
+    this.options = options;
+    StubNotification.instances.push(this);
+  }
+}
+
+interface StubDocument {
+  visibilityState: DocumentVisibilityState;
+  addEventListener: ReturnType<typeof vi.fn>;
+  removeEventListener: ReturnType<typeof vi.fn>;
+  listeners: Map<string, EventListener[]>;
+  dispatch: (type: string) => void;
+}
+
+function makeDocument(): StubDocument {
+  const listeners = new Map<string, EventListener[]>();
+  return {
+    visibilityState: 'hidden',
+    listeners,
+    addEventListener: vi.fn((type: string, fn: EventListener) => {
+      const arr = listeners.get(type) ?? [];
+      arr.push(fn);
+      listeners.set(type, arr);
+    }),
+    removeEventListener: vi.fn((type: string, fn: EventListener) => {
+      const arr = listeners.get(type) ?? [];
+      listeners.set(type, arr.filter(l => l !== fn));
+    }),
+    dispatch(type: string) {
+      for (const fn of listeners.get(type) ?? [])
+        fn(new Event(type));
+    },
+  };
+}
+
+function makeWindow(overrides: Partial<{ hasNotification: boolean }> = {}): Window {
+  const { hasNotification = true } = overrides;
+  const doc = makeDocument();
+  const win: any = {
+    document: doc,
+  };
+  if (hasNotification)
+    win.Notification = StubNotification;
+  return win as Window;
+}
+
+function withScope<T>(fn: () => T): { result: T; stop: () => void } {
+  const scope = effectScope();
+  const result = scope.run(fn)!;
+  return { result, stop: () => scope.stop() };
+}
+
+describe(useWebNotification, () => {
+  beforeEach(() => {
+    StubNotification.permission = 'granted';
+    StubNotification.instances = [];
+    StubNotification.requestPermission = vi.fn(async () => StubNotification.permission);
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    vi.restoreAllMocks();
+  });
+
+  it('exposes the documented surface', () => {
+    const win = makeWindow();
+    const { result, stop } = withScope(() => useWebNotification({ window: win, requestPermissions: false }));
+
+    expect(result.isSupported.value).toBeTruthy();
+    expect(result.notification.value).toBeNull();
+    expect(typeof result.show).toBe('function');
+    expect(typeof result.close).toBe('function');
+    expect(typeof result.ensurePermissionGranted).toBe('function');
+    expect(typeof result.onClick).toBe('function');
+    expect(typeof result.onShow).toBe('function');
+    expect(typeof result.onError).toBe('function');
+    expect(typeof result.onClose).toBe('function');
+    stop();
+  });
+
+  it('reports unsupported when Notification is absent', () => {
+    const win = makeWindow({ hasNotification: false });
+    const { result, stop } = withScope(() => useWebNotification({ window: win, requestPermissions: false }));
+
+    expect(result.isSupported.value).toBeFalsy();
+    expect(result.permissionGranted.value).toBeFalsy();
+    stop();
+  });
+
+  it('is SSR-safe with no window', () => {
+    const { result, stop } = withScope(() => useWebNotification({ window: undefined, requestPermissions: false }));
+
+    expect(result.isSupported.value).toBeFalsy();
+    expect(result.permissionGranted.value).toBeFalsy();
+    stop();
+  });
+
+  it('show() does nothing when unsupported', async () => {
+    const win = makeWindow({ hasNotification: false });
+    const { result, stop } = withScope(() => useWebNotification({ window: win, requestPermissions: false }));
+
+    const n = await result.show();
+    expect(n).toBeUndefined();
+    expect(result.notification.value).toBeNull();
+    stop();
+  });
+
+  it('show() does nothing when permission not granted', async () => {
+    StubNotification.permission = 'default';
+    const win = makeWindow();
+    const { result, stop } = withScope(() => useWebNotification({ window: win, requestPermissions: false }));
+
+    expect(result.permissionGranted.value).toBeFalsy();
+    const n = await result.show();
+    expect(n).toBeUndefined();
+    expect(result.notification.value).toBeNull();
+    stop();
+  });
+
+  it('show() creates a notification merging default and override options', async () => {
+    const win = makeWindow();
+    const { result, stop } = withScope(() => useWebNotification({
+      window: win,
+      requestPermissions: false,
+      title: 'Default title',
+      body: 'Default body',
+    }));
+
+    const n = await result.show({ body: 'Override body' });
+    expect(n).toBeInstanceOf(StubNotification);
+    expect(result.notification.value).toBe(n);
+    expect((n as unknown as StubNotification).title).toBe('Default title');
+    expect((n as unknown as StubNotification).options.body).toBe('Override body');
+    stop();
+  });
+
+  it('show() uses an empty title when none is provided', async () => {
+    const win = makeWindow();
+    const { result, stop } = withScope(() => useWebNotification({ window: win, requestPermissions: false }));
+
+    const n = await result.show();
+    expect((n as unknown as StubNotification).title).toBe('');
+    stop();
+  });
+
+  it('wires onClick/onShow/onError/onClose to native handlers', async () => {
+    const win = makeWindow();
+    const { result, stop } = withScope(() => useWebNotification({ window: win, requestPermissions: false }));
+
+    const click = vi.fn();
+    const showed = vi.fn();
+    const errored = vi.fn();
+    const closed = vi.fn();
+    result.onClick(click);
+    result.onShow(showed);
+    result.onError(errored);
+    result.onClose(closed);
+
+    const n = (await result.show()) as unknown as StubNotification;
+
+    n.onclick?.(new Event('click'));
+    n.onshow?.(new Event('show'));
+    n.onerror?.(new Event('error'));
+    n.onclose?.(new Event('close'));
+    await nextTick();
+
+    expect(click).toHaveBeenCalledTimes(1);
+    expect(showed).toHaveBeenCalledTimes(1);
+    expect(errored).toHaveBeenCalledTimes(1);
+    expect(closed).toHaveBeenCalledTimes(1);
+    stop();
+  });
+
+  it('close() closes the active notification and clears the ref', async () => {
+    const win = makeWindow();
+    const { result, stop } = withScope(() => useWebNotification({ window: win, requestPermissions: false }));
+
+    const n = (await result.show()) as unknown as StubNotification;
+    result.close();
+    expect(n.close).toHaveBeenCalledTimes(1);
+    expect(result.notification.value).toBeNull();
+    stop();
+  });
+
+  it('ensurePermissionGranted() requests permission and flips the flag', async () => {
+    StubNotification.permission = 'default';
+    StubNotification.requestPermission = vi.fn(async () => 'granted' as NotificationPermission);
+    const win = makeWindow();
+    const { result, stop } = withScope(() => useWebNotification({ window: win, requestPermissions: false }));
+
+    expect(result.permissionGranted.value).toBeFalsy();
+    const granted = await result.ensurePermissionGranted();
+    expect(StubNotification.requestPermission).toHaveBeenCalledTimes(1);
+    expect(granted).toBeTruthy();
+    expect(result.permissionGranted.value).toBeTruthy();
+    stop();
+  });
+
+  it('ensurePermissionGranted() does not request when already denied', async () => {
+    StubNotification.permission = 'denied';
+    const requestSpy = vi.fn(async () => 'denied' as NotificationPermission);
+    StubNotification.requestPermission = requestSpy;
+    const win = makeWindow();
+    const { result, stop } = withScope(() => useWebNotification({ window: win, requestPermissions: false }));
+
+    const granted = await result.ensurePermissionGranted();
+    expect(requestSpy).not.toHaveBeenCalled();
+    expect(granted).toBeFalsy();
+    stop();
+  });
+
+  it('ensurePermissionGranted() returns undefined when unsupported', async () => {
+    const win = makeWindow({ hasNotification: false });
+    const { result, stop } = withScope(() => useWebNotification({ window: win, requestPermissions: false }));
+
+    expect(await result.ensurePermissionGranted()).toBeUndefined();
+    stop();
+  });
+
+  it('closes the active notification when the tab becomes visible', async () => {
+    const win = makeWindow();
+    const doc = win.document as unknown as StubDocument;
+    const { result, stop } = withScope(() => useWebNotification({ window: win, requestPermissions: false }));
+
+    const n = (await result.show()) as unknown as StubNotification;
+    expect(result.notification.value).toBe(n);
+
+    // Listener was registered for visibilitychange.
+    expect(doc.addEventListener).toHaveBeenCalledWith('visibilitychange', expect.any(Function), expect.objectContaining({ passive: true }));
+
+    doc.visibilityState = 'visible';
+    doc.dispatch('visibilitychange');
+
+    expect(n.close).toHaveBeenCalledTimes(1);
+    expect(result.notification.value).toBeNull();
+    stop();
+  });
+
+  it('does not close on visibilitychange when still hidden', async () => {
+    const win = makeWindow();
+    const doc = win.document as unknown as StubDocument;
+    const { result, stop } = withScope(() => useWebNotification({ window: win, requestPermissions: false }));
+
+    const n = (await result.show()) as unknown as StubNotification;
+    doc.visibilityState = 'hidden';
+    doc.dispatch('visibilitychange');
+
+    expect(n.close).not.toHaveBeenCalled();
+    expect(result.notification.value).toBe(n);
+    stop();
+  });
+
+  it('closes the active notification when the scope is disposed', async () => {
+    const win = makeWindow();
+    const { result, stop } = withScope(() => useWebNotification({ window: win, requestPermissions: false }));
+
+    const n = (await result.show()) as unknown as StubNotification;
+    stop();
+    expect(n.close).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/vue/toolkit/src/composables/browser/useWebNotification/index.ts b/vue/toolkit/src/composables/browser/useWebNotification/index.ts
new file mode 100644
index 0000000..bd518f6
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useWebNotification/index.ts
@@ -0,0 +1,293 @@
+import { shallowRef } from 'vue';
+import type { ComputedRef, ShallowRef } from 'vue';
+import { defaultWindow } from '@/types';
+import type { ConfigurableWindow } from '@/types';
+import { useSupported } from '@/composables/utilities/useSupported';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import { tryOnMounted } from '@/composables/lifecycle/tryOnMounted';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+import { createEventHook } from '@/composables/utilities/createEventHook';
+import type { EventHookOn } from '@/composables/utilities/createEventHook';
+
+/**
+ * Per-notification options mirroring the `Notification` constructor's
+ * `NotificationOptions`, plus the `title` argument folded in for convenience.
+ */
+export interface WebNotificationOptions {
+  /**
+   * The title shown at the top of the notification.
+   */
+  title?: string;
+
+  /**
+   * The body text displayed below the title.
+   */
+  body?: string;
+
+  /**
+   * Text direction.
+   *
+   * @default 'auto'
+   */
+  dir?: 'auto' | 'ltr' | 'rtl';
+
+  /**
+   * BCP 47 language tag for the notification's content.
+   */
+  lang?: string;
+
+  /**
+   * An identifying tag. Notifications sharing a tag replace one another.
+   */
+  tag?: string;
+
+  /**
+   * URL of an icon to display.
+   */
+  icon?: string;
+
+  /**
+   * Whether to re-alert the user when a notification replaces an older one
+   * with the same `tag`.
+   *
+   * @default false
+   */
+  renotify?: boolean;
+
+  /**
+   * Keep the notification active until the user interacts with it instead of
+   * auto-dismissing.
+   *
+   * @default false
+   */
+  requireInteraction?: boolean;
+
+  /**
+   * Whether the notification is silent (no sound/vibration).
+   *
+   * @default false
+   */
+  silent?: boolean;
+
+  /**
+   * Vibration pattern (in milliseconds) for devices that support it.
+   */
+  vibrate?: number[];
+}
+
+export interface UseWebNotificationOptions extends WebNotificationOptions, ConfigurableWindow {
+  /**
+   * Request permission on mount (when supported and not yet granted).
+   *
+   * @default true
+   */
+  requestPermissions?: boolean;
+}
+
+export interface UseWebNotificationReturn {
+  /**
+   * Whether the Notification API is supported in the current environment.
+   */
+  isSupported: ComputedRef<boolean>;
+
+  /**
+   * The currently displayed `Notification`, or `null` when none is shown.
+   */
+  notification: ShallowRef<Notification | null>;
+
+  /**
+   * Whether notification permission has been granted.
+   */
+  permissionGranted: ShallowRef<boolean>;
+
+  /**
+   * Display a notification, optionally overriding the default options for this
+   * call. Resolves with the created `Notification`, or `undefined` when
+   * unsupported or permission is not granted.
+   */
+  show: (overrides?: WebNotificationOptions) => Promise<Notification | undefined>;
+
+  /**
+   * Close the currently displayed notification (if any).
+   */
+  close: () => void;
+
+  /**
+   * Request permission if it has not yet been granted (and was not denied).
+   * Resolves with the resulting granted state, or `undefined` when unsupported.
+   */
+  ensurePermissionGranted: () => Promise<boolean | undefined>;
+
+  /**
+   * Register a listener fired when the notification is clicked.
+   */
+  onClick: EventHookOn<Event>;
+
+  /**
+   * Register a listener fired when the notification is shown.
+   */
+  onShow: EventHookOn<Event>;
+
+  /**
+   * Register a listener fired when the notification errors.
+   */
+  onError: EventHookOn<Event>;
+
+  /**
+   * Register a listener fired when the notification is closed.
+   */
+  onClose: EventHookOn<Event>;
+}
+
+/**
+ * @name useWebNotification
+ * @category Browser
+ * @description Reactive, SSR-safe wrapper around the Web Notification API with
+ * permission handling and `onClick`/`onShow`/`onError`/`onClose` event hooks.
+ *
+ * @param {UseWebNotificationOptions} [options={}] Default notification options plus behavior flags
+ * @returns {UseWebNotificationReturn} `isSupported`, `notification`, `permissionGranted`, `show`, `close`, `ensurePermissionGranted`, and the `onClick`/`onShow`/`onError`/`onClose` hooks
+ *
+ * @example
+ * const { show, isSupported, onClick } = useWebNotification({
+ *   title: 'Hello',
+ *   body: 'You have a new message',
+ *   icon: '/icon.png',
+ * });
+ * onClick(() => console.log('clicked'));
+ * if (isSupported.value)
+ *   show();
+ *
+ * @example
+ * // Override options per call
+ * const { show } = useWebNotification();
+ * show({ title: 'Override', body: 'Per-call body' });
+ *
+ * @since 0.0.15
+ */
+export function useWebNotification(
+  options: UseWebNotificationOptions = {},
+): UseWebNotificationReturn {
+  const {
+    window = defaultWindow,
+    requestPermissions = true,
+  } = options;
+
+  // The constructor lives on the resolved window so tests/iframes can supply
+  // their own; falling back to a globally available `Notification` keeps the
+  // common (no-window-override) case working.
+  const getNotificationCtor = (): typeof Notification | undefined => {
+    if (window && 'Notification' in window)
+      return (window as Window & { Notification: typeof Notification }).Notification;
+    return undefined;
+  };
+
+  const isSupported = useSupported(() => {
+    const Ctor = getNotificationCtor();
+    if (!Ctor)
+      return false;
+
+    // Already granted means the constructor is definitely usable.
+    if (Ctor.permission === 'granted')
+      return true;
+
+    // Some environments expose `Notification` but throw on construction
+    // (e.g. Android Chrome). Probe once to confirm it is truly usable.
+    try {
+      const probe = new Ctor('');
+      probe.onshow = () => probe.close();
+    }
+    catch (error) {
+      if ((error as Error).name === 'TypeError')
+        return false;
+    }
+
+    return true;
+  });
+
+  const notification = shallowRef<Notification | null>(null);
+
+  const permissionGranted = shallowRef(
+    isSupported.value && getNotificationCtor()?.permission === 'granted',
+  );
+
+  const { on: onClick, trigger: clickTrigger } = createEventHook<Event>();
+  const { on: onShow, trigger: showTrigger } = createEventHook<Event>();
+  const { on: onError, trigger: errorTrigger } = createEventHook<Event>();
+  const { on: onClose, trigger: closeTrigger } = createEventHook<Event>();
+
+  const ensurePermissionGranted = async (): Promise<boolean | undefined> => {
+    if (!isSupported.value)
+      return undefined;
+
+    const Ctor = getNotificationCtor()!;
+
+    if (!permissionGranted.value && Ctor.permission !== 'denied') {
+      const result = await Ctor.requestPermission();
+      if (result === 'granted')
+        permissionGranted.value = true;
+    }
+
+    return permissionGranted.value;
+  };
+
+  const close = (): void => {
+    if (notification.value)
+      notification.value.close();
+    notification.value = null;
+  };
+
+  const show = async (
+    overrides?: WebNotificationOptions,
+  ): Promise<Notification | undefined> => {
+    if (!isSupported.value || !permissionGranted.value)
+      return undefined;
+
+    const Ctor = getNotificationCtor()!;
+
+    const merged: WebNotificationOptions = { ...options, ...overrides };
+
+    const created = new Ctor(merged.title ?? '', merged);
+
+    created.onclick = clickTrigger;
+    created.onshow = showTrigger;
+    created.onerror = errorTrigger;
+    created.onclose = closeTrigger;
+
+    notification.value = created;
+
+    return created;
+  };
+
+  if (requestPermissions)
+    tryOnMounted(ensurePermissionGranted);
+
+  tryOnScopeDispose(close);
+
+  // Close the active notification when the tab becomes visible again — the
+  // user is already looking at the page, so the notification is redundant.
+  if (window) {
+    useEventListener(
+      window.document,
+      'visibilitychange',
+      () => {
+        if (window.document.visibilityState === 'visible')
+          close();
+      },
+      { passive: true },
+    );
+  }
+
+  return {
+    isSupported,
+    notification,
+    permissionGranted,
+    show,
+    close,
+    ensurePermissionGranted,
+    onClick,
+    onShow,
+    onError,
+    onClose,
+  };
+}
diff --git a/vue/toolkit/src/composables/component/createReusableTemplate/demo.vue b/vue/toolkit/src/composables/component/createReusableTemplate/demo.vue
new file mode 100644
index 0000000..bdd3c6c
--- /dev/null
+++ b/vue/toolkit/src/composables/component/createReusableTemplate/demo.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { createReusableTemplate } from './index';
+
+interface Member {
+  name: string;
+  role: string;
+  online: boolean;
+}
+
+// Define a stat card template once, reuse it for every metric below.
+const [DefineStat, ReuseStat] = createReusableTemplate<{ label: string; value: string }>();
+
+// Object form + typed bindings for a richer row template.
+const { define: DefineMember, reuse: ReuseMember } = createReusableTemplate<Member>();
+
+const team = ref<Member[]>([
+  { name: 'Ada Lovelace', role: 'Engineering', online: true },
+  { name: 'Grace Hopper', role: 'Design', online: false },
+  { name: 'Alan Turing', role: 'Research', online: true },
+]);
+
+function toggle(member: Member) {
+  member.online = !member.online;
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <!-- Templates are captured here, rendered wherever Reuse* appears -->
+    <DefineStat v-slot="{ label, value }">
+      <div class="flex-1 rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          {{ label }}
+        </div>
+        <div class="mt-1 font-mono text-2xl font-bold tabular-nums text-(--fg)">
+          {{ value }}
+        </div>
+      </div>
+    </DefineStat>
+
+    <DefineMember v-slot="{ name, role, online }">
+      <div class="flex items-center gap-3">
+        <span
+          class="inline-block size-2 shrink-0 rounded-full transition"
+          :class="online ? 'bg-emerald-500' : 'bg-(--border-strong)'"
+        />
+        <div class="min-w-0 flex-1">
+          <div class="truncate text-sm font-medium text-(--fg)">{{ name }}</div>
+          <div class="text-xs text-(--fg-subtle)">{{ role }}</div>
+        </div>
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+        >
+          {{ online ? 'Online' : 'Away' }}
+        </span>
+      </div>
+    </DefineMember>
+
+    <div class="flex gap-2">
+      <ReuseStat label="Members" :value="String(team.length)" />
+      <ReuseStat label="Online" :value="String(team.filter(m => m.online).length)" />
+    </div>
+
+    <div class="flex flex-col gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Team — click a row to toggle status
+      </div>
+      <button
+        v-for="member in team"
+        :key="member.name"
+        class="rounded-lg p-2 text-left transition hover:bg-(--bg-inset) active:scale-[0.99] cursor-pointer"
+        @click="toggle(member)"
+      >
+        <ReuseMember
+          :name="member.name"
+          :role="member.role"
+          :online="member.online"
+        />
+      </button>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Both card and row markup are declared once via <code class="font-mono">DefineTemplate</code> and
+      rendered from multiple <code class="font-mono">ReuseTemplate</code> call sites.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/component/createReusableTemplate/index.test.ts b/vue/toolkit/src/composables/component/createReusableTemplate/index.test.ts
new file mode 100644
index 0000000..44cacb8
--- /dev/null
+++ b/vue/toolkit/src/composables/component/createReusableTemplate/index.test.ts
@@ -0,0 +1,211 @@
+import { describe, expect, it } from 'vitest';
+import { defineComponent, h, nextTick, ref } from 'vue';
+import { mount } from '@vue/test-utils';
+import { createReusableTemplate } from '.';
+
+describe(createReusableTemplate, () => {
+  it('returns a destructurable [define, reuse] pair', () => {
+    const pair = createReusableTemplate();
+
+    expect(pair[0]).toBeDefined();
+    expect(pair[1]).toBeDefined();
+    expect(pair.define).toBe(pair[0]);
+    expect(pair.reuse).toBe(pair[1]);
+
+    const [DefineTemplate, ReuseTemplate] = pair;
+    expect(DefineTemplate).toBe(pair.define);
+    expect(ReuseTemplate).toBe(pair.reuse);
+  });
+
+  it('renders the defined template wherever reuse is used', () => {
+    const Host = defineComponent({
+      setup() {
+        const [DefineTemplate, ReuseTemplate] = createReusableTemplate();
+
+        return () => [
+          h(DefineTemplate, () => h('span', { class: 'tpl' }, 'Hello')),
+          h(ReuseTemplate),
+          h(ReuseTemplate),
+        ];
+      },
+    });
+
+    const wrapper = mount(Host);
+
+    expect(wrapper.findAll('.tpl')).toHaveLength(2);
+    expect(wrapper.text()).toBe('HelloHello');
+  });
+
+  it('passes props from reuse to the define slot as bindings', () => {
+    const [DefineTemplate, ReuseTemplate] = createReusableTemplate<{ label: string }>();
+
+    const Host = defineComponent({
+      setup() {
+        return () => [
+          h(DefineTemplate, {}, {
+            default: (bindings: { label: string }) => h('span', bindings.label),
+          }),
+          h(ReuseTemplate, { label: 'A' }),
+          h(ReuseTemplate, { label: 'B' }),
+        ];
+      },
+    });
+
+    const wrapper = mount(Host);
+
+    expect(wrapper.text()).toBe('AB');
+  });
+
+  it('camelizes raw attrs when no props option is given', () => {
+    const [DefineTemplate, ReuseTemplate] = createReusableTemplate<{ myValue: string }>();
+
+    const Host = defineComponent({
+      setup() {
+        return () => [
+          h(DefineTemplate, {}, {
+            default: (bindings: { myValue: string }) => h('span', bindings.myValue),
+          }),
+          // kebab attr should arrive camelized as `myValue` (raw attrs are untyped here)
+          h(ReuseTemplate as unknown as string, { 'my-value': 'hi' }),
+        ];
+      },
+    });
+
+    const wrapper = mount(Host);
+
+    expect(wrapper.text()).toBe('hi');
+  });
+
+  it('reacts to changes in the defined template', async () => {
+    const text = ref('first');
+
+    const Host = defineComponent({
+      setup() {
+        const [DefineTemplate, ReuseTemplate] = createReusableTemplate();
+
+        return () => [
+          h(DefineTemplate, () => h('span', { class: 'out' }, text.value)),
+          h(ReuseTemplate),
+        ];
+      },
+    });
+
+    const wrapper = mount(Host);
+    expect(wrapper.find('.out').text()).toBe('first');
+
+    text.value = 'second';
+    await nextTick();
+
+    expect(wrapper.find('.out').text()).toBe('second');
+  });
+
+  it('uses a typed props option for bindings', () => {
+    const [DefineTemplate, ReuseTemplate] = createReusableTemplate<{ count: number }>({
+      props: {
+        count: { type: Number, required: true },
+      },
+    });
+
+    const Host = defineComponent({
+      setup() {
+        return () => [
+          h(DefineTemplate, {}, {
+            default: (b: { count: number }) => h('span', String(b.count * 2)),
+          }),
+          h(ReuseTemplate, { count: 21 }),
+        ];
+      },
+    });
+
+    const wrapper = mount(Host);
+
+    expect(wrapper.text()).toBe('42');
+  });
+
+  it('inherits attrs onto a single root vnode by default', () => {
+    const [DefineTemplate, ReuseTemplate] = createReusableTemplate({
+      props: { label: { type: String } },
+    });
+
+    const Host = defineComponent({
+      setup() {
+        return () => [
+          h(DefineTemplate, {}, {
+            default: () => h('div', { class: 'root' }, 'x'),
+          }),
+          h(ReuseTemplate, { 'data-test': 'yes', label: 'l' }),
+        ];
+      },
+    });
+
+    const wrapper = mount(Host);
+    const root = wrapper.find('.root');
+
+    expect(root.attributes('data-test')).toBe('yes');
+  });
+
+  it('does not merge attrs onto root when inheritAttrs is false', () => {
+    const [DefineTemplate, ReuseTemplate] = createReusableTemplate({
+      inheritAttrs: false,
+      props: { label: { type: String } },
+    });
+
+    const Host = defineComponent({
+      setup() {
+        return () => [
+          h(DefineTemplate, {}, {
+            default: () => h('div', { class: 'root' }, 'x'),
+          }),
+          h(ReuseTemplate, { 'data-test': 'yes', label: 'l' }),
+        ];
+      },
+    });
+
+    const wrapper = mount(Host);
+    const root = wrapper.find('.root');
+
+    expect(root.attributes('data-test')).toBeUndefined();
+  });
+
+  it('forwards nested slots through $slots binding', () => {
+    const [DefineTemplate, ReuseTemplate] = createReusableTemplate();
+
+    const Host = defineComponent({
+      setup() {
+        return () => [
+          h(DefineTemplate, {}, {
+            default: (bindings: { $slots: Record<string, any> }) =>
+              h('div', { class: 'wrap' }, bindings.$slots.default?.()),
+          }),
+          h(ReuseTemplate, {}, {
+            default: () => h('em', 'slotted'),
+          }),
+        ];
+      },
+    });
+
+    const wrapper = mount(Host);
+
+    expect(wrapper.find('.wrap em').text()).toBe('slotted');
+  });
+
+  it('uses a custom name for the components', () => {
+    const [DefineTemplate, ReuseTemplate] = createReusableTemplate({ name: 'MyTpl' });
+
+    expect((DefineTemplate as any).name).toBe('MyTpl.define');
+    expect((ReuseTemplate as any).name).toBe('MyTpl.reuse');
+  });
+
+  it('throws when reuse renders before define (dev), and is SSR/render-safe', () => {
+    const [, ReuseTemplate] = createReusableTemplate();
+
+    const Host = defineComponent({
+      setup() {
+        return () => h(ReuseTemplate);
+      },
+    });
+
+    // In dev (NODE_ENV !== 'production') the missing-definition path throws.
+    expect(() => mount(Host)).toThrow(/Failed to find the template definition/);
+  });
+});
diff --git a/vue/toolkit/src/composables/component/createReusableTemplate/index.ts b/vue/toolkit/src/composables/component/createReusableTemplate/index.ts
new file mode 100644
index 0000000..69c3b77
--- /dev/null
+++ b/vue/toolkit/src/composables/component/createReusableTemplate/index.ts
@@ -0,0 +1,165 @@
+import type { ComponentObjectPropsOptions, DefineComponent, Slot } from 'vue';
+import { camelize, defineComponent, shallowRef } from 'vue';
+
+/** Map of slot name -> slot props object (or `undefined` for prop-less slots) */
+type SlotPropsMap = Record<string, Record<string, any> | undefined>;
+
+/** Turn a {@link SlotPropsMap} into a record of typed `Slot`s */
+type GenerateSlotsFromSlotMap<T extends SlotPropsMap>
+  = { [K in keyof T]: Slot<T[K]> };
+
+export type DefineTemplateComponent<Bindings extends Record<string, any>, Slots extends SlotPropsMap>
+  = DefineComponent & (new () => {
+    $slots: {
+      default: (_: Bindings & { $slots: GenerateSlotsFromSlotMap<Slots> }) => any;
+    };
+  });
+
+export type ReuseTemplateComponent<Bindings extends Record<string, any>, Slots extends SlotPropsMap>
+  = DefineComponent<Bindings> & (new () => { $slots: GenerateSlotsFromSlotMap<Slots> });
+
+/**
+ * The pair returned by {@link createReusableTemplate}. Usable both as a tuple
+ * (`const [Define, Reuse] = ...`) and as an object (`const { define, reuse } = ...`).
+ */
+export type ReusableTemplatePair<Bindings extends Record<string, any>, Slots extends SlotPropsMap>
+  = [DefineTemplateComponent<Bindings, Slots>, ReuseTemplateComponent<Bindings, Slots>] & {
+    define: DefineTemplateComponent<Bindings, Slots>;
+    reuse: ReuseTemplateComponent<Bindings, Slots>;
+  };
+
+export interface CreateReusableTemplateOptions<Props extends Record<string, any>> {
+  /**
+   * Inherit attrs from the reuse component onto its single root vnode.
+   *
+   * @default true
+   */
+  inheritAttrs?: boolean;
+  /**
+   * Name used for the define/reuse components (helpful in Vue devtools).
+   *
+   * @default 'ReusableTemplate'
+   */
+  name?: string;
+  /**
+   * Props definition for the reuse component. When provided, bindings are taken
+   * from typed props instead of raw (camelized) attrs.
+   */
+  props?: ComponentObjectPropsOptions<Props>;
+}
+
+/** Re-key an attrs object so every key is camelCased */
+function keysToCamelCase(obj: Record<string, any>): Record<string, any> {
+  const result: Record<string, any> = {};
+
+  for (const key in obj)
+    result[camelize(key)] = obj[key];
+
+  return result;
+}
+
+/**
+ * Wrap a `{ define, reuse }` object so it can also be destructured as the tuple
+ * `[define, reuse]`. Avoids a runtime dependency on `@vueuse/shared`.
+ */
+function makePair<
+  Bindings extends Record<string, any>,
+  Slots extends SlotPropsMap,
+>(
+  define: DefineTemplateComponent<Bindings, Slots>,
+  reuse: ReuseTemplateComponent<Bindings, Slots>,
+): ReusableTemplatePair<Bindings, Slots> {
+  const pair = [define, reuse] as unknown as ReusableTemplatePair<Bindings, Slots>;
+
+  pair.define = define;
+  pair.reuse = reuse;
+
+  return pair;
+}
+
+/**
+ * @name createReusableTemplate
+ * @category Component
+ * @description Define a template once and reuse it multiple times within the
+ * same component. Returns a `[DefineTemplate, ReuseTemplate]` pair (also
+ * destructurable as `{ define, reuse }`). The template captured by
+ * `DefineTemplate`'s default slot is rendered wherever `ReuseTemplate` appears,
+ * receiving its props/attrs as slot bindings. Supports a generic for typed
+ * bindings, typed slots, custom `props`, and `inheritAttrs`.
+ *
+ * Render-only and fully SSR-safe — it never touches `window`/`document`. The pair
+ * is created lazily and shares a single `shallowRef` for the captured render
+ * function, so there are no watchers and no per-render allocations beyond the
+ * vnode itself.
+ *
+ * @param {CreateReusableTemplateOptions<Bindings>} [options] - `name`, `inheritAttrs`, and `props`
+ * @returns {ReusableTemplatePair<Bindings, Slots>} A `[define, reuse]` tuple, also accessible as `{ define, reuse }`
+ *
+ * @example
+ * const [DefineTemplate, ReuseTemplate] = createReusableTemplate();
+ * // Template:
+ * // <DefineTemplate><span>Hello</span></DefineTemplate>
+ * // <ReuseTemplate /> <ReuseTemplate />
+ *
+ * @example
+ * // Typed bindings + custom props
+ * const [DefineItem, ReuseItem] = createReusableTemplate<{ label: string }>();
+ * // <DefineItem v-slot="{ label }">{{ label }}</DefineItem>
+ * // <ReuseItem label="A" /> <ReuseItem label="B" />
+ *
+ * @since 0.0.15
+ */
+export function createReusableTemplate<
+  Bindings extends Record<string, any>,
+  Slots extends SlotPropsMap = Record<'default', undefined>,
+>(
+  options: CreateReusableTemplateOptions<Bindings> = {},
+): ReusableTemplatePair<Bindings, Slots> {
+  const {
+    inheritAttrs = true,
+    name = 'ReusableTemplate',
+    props,
+  } = options;
+
+  // Shared captured render fn — no watchers, single allocation.
+  const render = shallowRef<Slot | undefined>();
+
+  const define = defineComponent({
+    name: `${name}.define`,
+    setup(_, { slots }) {
+      return () => {
+        render.value = slots.default;
+      };
+    },
+  }) as unknown as DefineTemplateComponent<Bindings, Slots>;
+
+  const reuse = defineComponent({
+    name: `${name}.reuse`,
+    inheritAttrs,
+    props,
+    setup(reuseProps, { attrs, slots }) {
+      return () => {
+        if (!render.value) {
+          // Local cast so the dev-only guard type-checks without @types/node and stays
+          // tree-shakeable in production builds (where NODE_ENV is statically replaced).
+          const nodeEnv = (globalThis as { process?: { env?: { NODE_ENV?: string } } }).process?.env?.NODE_ENV;
+          if (nodeEnv !== 'production')
+            throw new Error('[createReusableTemplate] Failed to find the template definition. Did you render the Define component before the Reuse component?');
+
+          return undefined;
+        }
+
+        const vnode = render.value({
+          ...(props === undefined ? keysToCamelCase(attrs) : reuseProps),
+          $slots: slots,
+        });
+
+        // When inheriting attrs onto a single root, unwrap the fragment so Vue
+        // can merge the reuse component's attrs onto that root vnode.
+        return inheritAttrs && vnode?.length === 1 ? vnode[0] : vnode;
+      };
+    },
+  }) as unknown as ReuseTemplateComponent<Bindings, Slots>;
+
+  return makePair(define, reuse);
+}
diff --git a/vue/toolkit/src/composables/component/index.ts b/vue/toolkit/src/composables/component/index.ts
new file mode 100644
index 0000000..97258d3
--- /dev/null
+++ b/vue/toolkit/src/composables/component/index.ts
@@ -0,0 +1,6 @@
+export * from './createReusableTemplate';
+export * from './unrefElement';
+export * from './useCurrentElement';
+export * from './useForwardExpose';
+export * from './useTemplateRefsList';
+export * from './useVirtualList';
diff --git a/vue/toolkit/src/composables/component/unrefElement/demo.vue b/vue/toolkit/src/composables/component/unrefElement/demo.vue
new file mode 100644
index 0000000..5a75c8e
--- /dev/null
+++ b/vue/toolkit/src/composables/component/unrefElement/demo.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue';
+import { unrefElement } from './index';
+
+const boxRef = useTemplateRef<HTMLElement>('box');
+const width = ref(280);
+const tag = ref('—');
+const rect = ref<{ w: number; h: number } | null>(null);
+
+function measure() {
+  // unrefElement turns the template ref into the raw DOM element, regardless of
+  // whether it points at an HTMLElement or a component instance.
+  const el = unrefElement(boxRef);
+  if (!el)
+    return;
+
+  tag.value = el.tagName.toLowerCase();
+  const { width: w, height: h } = el.getBoundingClientRect();
+  rect.value = { w: Math.round(w), h: Math.round(h) };
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      ref="box"
+      class="flex items-center justify-center rounded-xl border border-dashed border-(--border-strong) bg-(--bg-inset) py-8 text-sm font-medium text-(--fg-muted) transition-[width] duration-300 ease-out"
+      :style="{ width: `${width}px` }"
+    >
+      Target element
+    </div>
+
+    <label class="flex flex-col gap-1.5">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Width</span>
+        <span class="font-mono text-sm tabular-nums text-(--fg-muted)">{{ width }}px</span>
+      </div>
+      <input
+        v-model.number="width"
+        type="range"
+        min="120"
+        max="340"
+        class="w-full accent-(--accent)"
+      >
+    </label>
+
+    <button
+      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+      @click="measure"
+    >
+      Read element via unrefElement
+    </button>
+
+    <div class="flex flex-col gap-2 rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+      <div class="flex items-center justify-between">
+        <span class="text-(--fg-subtle)">tagName</span>
+        <span>{{ tag }}</span>
+      </div>
+      <div class="flex items-center justify-between">
+        <span class="text-(--fg-subtle)">boundingRect</span>
+        <span>{{ rect ? `${rect.w} × ${rect.h}` : '—' }}</span>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Resize the box, then measure. <code class="font-mono">unrefElement</code> unwraps the template
+      ref to the real DOM node — it also resolves a component ref to its <code class="font-mono">$el</code>.
+    </p>
+  </div>
+</template>
diff --git a/web/vue/src/composables/component/unrefElement/index.test.ts b/vue/toolkit/src/composables/component/unrefElement/index.test.ts
similarity index 91%
rename from web/vue/src/composables/component/unrefElement/index.test.ts
rename to vue/toolkit/src/composables/component/unrefElement/index.test.ts
index 0cc41bf..d48274d 100644
--- a/web/vue/src/composables/component/unrefElement/index.test.ts
+++ b/vue/toolkit/src/composables/component/unrefElement/index.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 import { computed, defineComponent, nextTick, ref, shallowRef } from 'vue';
-import { mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils';
 import { unrefElement } from '.';
 
 describe(unrefElement, () => {
@@ -32,12 +32,12 @@ describe(unrefElement, () => {
 
   it('returns component $el when passed a component instance', async () => {
     const Child = defineComponent({
-        template: `<span class="child-el">child</span>`,
+      template: `<span class="child-el">child</span>`,
     });
 
     const Parent = defineComponent({
-        components: { Child },
-        template: `<Child ref="childRef" />`,
+      components: { Child },
+      template: `<Child ref="childRef" />`,
     });
 
     const wrapper = mount(Parent);
diff --git a/web/vue/src/composables/component/unrefElement/index.ts b/vue/toolkit/src/composables/component/unrefElement/index.ts
similarity index 93%
rename from web/vue/src/composables/component/unrefElement/index.ts
rename to vue/toolkit/src/composables/component/unrefElement/index.ts
index d5e7e22..e98517e 100644
--- a/web/vue/src/composables/component/unrefElement/index.ts
+++ b/vue/toolkit/src/composables/component/unrefElement/index.ts
@@ -2,7 +2,7 @@ import type { ComponentPublicInstance, MaybeRef, MaybeRefOrGetter } from 'vue';
 import { toValue } from 'vue';
 
 export type VueInstance = ComponentPublicInstance;
-export type MaybeElement = HTMLElement | SVGElement | VueInstance | undefined | null;
+export type MaybeElement = Element | VueInstance | undefined | null;
 
 export type MaybeElementRef<El extends MaybeElement = MaybeElement> = MaybeRef<El>;
 export type MaybeComputedElementRef<El extends MaybeElement = MaybeElement> = MaybeRefOrGetter<El>;
@@ -24,10 +24,10 @@ export type UnRefElementReturn<T extends MaybeElement = MaybeElement> = T extend
  * @example
  * const component = useTemplateRef<Component>('component');
  * const result = unrefElement(component); // result is the component instance
- * 
+ *
  * @since 0.0.11
  */
 export function unrefElement<El extends MaybeElement>(elRef: MaybeComputedElementRef<El>): UnRefElementReturn<El> {
   const plain = toValue(elRef);
   return (plain as VueInstance)?.$el ?? plain;
-}
\ No newline at end of file
+}
diff --git a/vue/toolkit/src/composables/component/useCurrentElement/demo.vue b/vue/toolkit/src/composables/component/useCurrentElement/demo.vue
new file mode 100644
index 0000000..1c59986
--- /dev/null
+++ b/vue/toolkit/src/composables/component/useCurrentElement/demo.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { ref, watchEffect } from 'vue';
+import { useCurrentElement } from './index';
+
+// Resolves to this component's root DOM element, re-read on mount + every update.
+const el = useCurrentElement<HTMLElement>();
+
+const padding = ref(16);
+const childCount = ref(3);
+const info = ref<{ tag: string; children: number; height: number } | null>(null);
+
+watchEffect(() => {
+  const node = el.value;
+  if (!node) {
+    // SSR / pre-mount: el.value is undefined.
+    info.value = null;
+    return;
+  }
+
+  info.value = {
+    tag: node.tagName.toLowerCase(),
+    children: node.querySelectorAll('[data-chip]').length,
+    height: Math.round(node.getBoundingClientRect().height),
+  };
+});
+
+const chips = ['vue', 'reactivity', 'composables', 'ssr', 'typescript', 'dom'];
+</script>
+
+<template>
+  <div
+    class="flex w-full max-w-sm flex-col gap-4 rounded-xl border border-(--border) bg-(--bg-elevated)"
+    :style="{ padding: `${padding}px` }"
+  >
+    <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      Live measurement of this component's root
+    </div>
+
+    <div class="flex flex-wrap gap-1.5">
+      <span
+        v-for="chip in chips.slice(0, childCount)"
+        :key="chip"
+        data-chip
+        class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+      >
+        {{ chip }}
+      </span>
+    </div>
+
+    <label class="flex flex-col gap-1.5">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Root padding</span>
+        <span class="font-mono text-sm tabular-nums text-(--fg-muted)">{{ padding }}px</span>
+      </div>
+      <input
+        v-model.number="padding"
+        type="range"
+        min="8"
+        max="40"
+        class="w-full accent-(--accent)"
+      >
+    </label>
+
+    <div class="flex items-center gap-2">
+      <button
+        class="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="childCount <= 1"
+        @click="childCount--"
+      >
+        Remove chip
+      </button>
+      <button
+        class="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="childCount >= chips.length"
+        @click="childCount++"
+      >
+        Add chip
+      </button>
+    </div>
+
+    <div class="flex flex-col gap-2 rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+      <div class="flex items-center justify-between">
+        <span class="text-(--fg-subtle)">el.value</span>
+        <span>{{ info ? `<${info.tag}>` : 'undefined' }}</span>
+      </div>
+      <div class="flex items-center justify-between">
+        <span class="text-(--fg-subtle)">chips in DOM</span>
+        <span>{{ info?.children ?? '—' }}</span>
+      </div>
+      <div class="flex items-center justify-between">
+        <span class="text-(--fg-subtle)">root height</span>
+        <span>{{ info ? `${info.height}px` : '—' }}</span>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      The computed re-reads <code class="font-mono">$el</code> on every update, so the readout tracks
+      padding and chip changes automatically.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/component/useCurrentElement/index.test.ts b/vue/toolkit/src/composables/component/useCurrentElement/index.test.ts
new file mode 100644
index 0000000..05da1ae
--- /dev/null
+++ b/vue/toolkit/src/composables/component/useCurrentElement/index.test.ts
@@ -0,0 +1,127 @@
+import { describe, expect, it } from 'vitest';
+import type { UseCurrentElementReturn } from '.';
+import { defineComponent, nextTick, ref, shallowRef } from 'vue';
+import { mount } from '@vue/test-utils';
+import { useCurrentElement } from '.';
+
+describe(useCurrentElement, () => {
+  it('resolves to the root DOM element of the current instance after mount', () => {
+    let el!: UseCurrentElementReturn;
+
+    const Component = defineComponent({
+      setup() {
+        el = useCurrentElement();
+        return {};
+      },
+      template: `<div class="root">content</div>`,
+    });
+
+    const wrapper = mount(Component);
+
+    expect(el.value).toBe(wrapper.find('.root').element);
+    expect(el.value).toBeInstanceOf(HTMLDivElement);
+  });
+
+  it('returns a controlled computed ref with trigger / peek / stop', () => {
+    let el!: UseCurrentElementReturn;
+
+    const Component = defineComponent({
+      setup() {
+        el = useCurrentElement();
+        return {};
+      },
+      template: `<div>x</div>`,
+    });
+
+    mount(Component);
+
+    expect(el.trigger).toBeTypeOf('function');
+    expect(el.peek).toBeTypeOf('function');
+    expect(el.stop).toBeTypeOf('function');
+  });
+
+  it('re-reads the element on update when the root node changes', async () => {
+    let el!: UseCurrentElementReturn;
+    const flag = ref(true);
+
+    const Component = defineComponent({
+      setup() {
+        el = useCurrentElement();
+        return { flag };
+      },
+      template: `
+        <div v-if="flag" class="a">a</div>
+        <section v-else class="b">b</section>
+      `,
+    });
+
+    const wrapper = mount(Component);
+
+    expect(el.value).toBeInstanceOf(HTMLDivElement);
+
+    flag.value = false;
+    await nextTick();
+
+    expect(el.value).toBe(wrapper.find('.b').element);
+    expect(el.value).toBeInstanceOf(HTMLElement);
+    expect((el.value as Element).tagName).toBe('SECTION');
+  });
+
+  it('tracks an explicit rootComponent ref instead of $el', async () => {
+    const innerRef = shallowRef<Element | null>(null);
+    let el!: UseCurrentElementReturn;
+
+    const Component = defineComponent({
+      setup() {
+        el = useCurrentElement(innerRef as any);
+        return {};
+      },
+      template: `<div class="outer"><span class="inner">i</span></div>`,
+    });
+
+    const wrapper = mount(Component);
+
+    // Before assigning the ref, it resolves to whatever the ref holds (null/undefined)
+    expect(el.value).toBeFalsy();
+
+    innerRef.value = wrapper.find('.inner').element;
+    el.trigger();
+    await nextTick();
+
+    expect(el.value).toBe(wrapper.find('.inner').element);
+  });
+
+  it('stops re-reading after scope disposal (unmount)', async () => {
+    let el!: UseCurrentElementReturn;
+
+    const Component = defineComponent({
+      setup() {
+        el = useCurrentElement();
+        return {};
+      },
+      template: `<div class="alive">alive</div>`,
+    });
+
+    const wrapper = mount(Component);
+    const mountedEl = el.value;
+
+    expect(mountedEl).toBeInstanceOf(HTMLDivElement);
+
+    wrapper.unmount();
+
+    // After unmount the controlled watcher is stopped; trigger is safe and the
+    // value no longer tracks a live element.
+    expect(() => el.trigger()).not.toThrow();
+  });
+
+  it('does not throw and resolves to undefined outside a component instance (SSR-safe)', () => {
+    let el!: UseCurrentElementReturn;
+
+    expect(() => {
+      el = useCurrentElement();
+    }).not.toThrow();
+
+    expect(el).toBeDefined();
+    expect(el.value).toBeUndefined();
+  });
+});
diff --git a/vue/toolkit/src/composables/component/useCurrentElement/index.ts b/vue/toolkit/src/composables/component/useCurrentElement/index.ts
new file mode 100644
index 0000000..b8591b9
--- /dev/null
+++ b/vue/toolkit/src/composables/component/useCurrentElement/index.ts
@@ -0,0 +1,78 @@
+import { getCurrentInstance, onMounted, onUpdated } from 'vue';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+import { computedWithControl } from '@/composables/reactivity/computedWithControl';
+import type { ComputedRefWithControl } from '@/composables/reactivity/computedWithControl';
+import { unrefElement } from '@/composables/component/unrefElement';
+import type { MaybeComputedElementRef, MaybeElement, VueInstance } from '@/composables/component/unrefElement';
+
+/** Resolve `false` if `T` is `any`, otherwise `true` — used to detect a typed `$el`. */
+type IsAny<T> = 0 extends 1 & T ? true : false;
+
+/**
+ * Infer the resolved element type.
+ *
+ * When no explicit generic is supplied (`T` stays the broad `MaybeElement`) we
+ * fall back to the component instance's `$el` type — unless that is `any`
+ * (the un-typed default), in which case we keep `MaybeElement`.
+ */
+export type UseCurrentElementReturn<
+  T extends MaybeElement = MaybeElement,
+  R extends VueInstance = VueInstance,
+  E extends MaybeElement = MaybeElement extends T
+    ? IsAny<R['$el']> extends false ? R['$el'] : T
+    : T,
+> = ComputedRefWithControl<E>;
+
+/**
+ * @name useCurrentElement
+ * @category Component
+ * @description Reactive root DOM element of the current component instance.
+ * Resolves to `vm.$el` (or the unwrapped `rootComponent` ref when provided) and
+ * is re-read on `onMounted` and `onUpdated` via a controlled computed — so it
+ * stays correct across re-renders without an always-on watcher. Generic over the
+ * element type; the type is inferred from the component's `$el` when available.
+ * SSR-safe: returns `undefined` until the component is mounted on the client.
+ *
+ * @param {MaybeComputedElementRef<R>} [rootComponent] Optional ref/getter for an explicit root component or element; defaults to the current instance's `$el`
+ * @returns {UseCurrentElementReturn<T, R>} A controlled computed ref of the resolved element, with `.trigger()` / `.peek()` / `.stop()`
+ *
+ * @example
+ * // Inferred element type from the component's root node
+ * const el = useCurrentElement();
+ * watchEffect(() => console.log(el.value));
+ *
+ * @example
+ * // Explicit element type
+ * const el = useCurrentElement<HTMLDivElement>();
+ *
+ * @example
+ * // Track an explicit child component / element ref instead of `$el`
+ * const child = useTemplateRef('child');
+ * const el = useCurrentElement(child);
+ *
+ * @since 0.0.15
+ */
+export function useCurrentElement<
+  T extends MaybeElement = MaybeElement,
+  R extends VueInstance = VueInstance,
+  E extends MaybeElement = MaybeElement extends T
+    ? IsAny<R['$el']> extends false ? R['$el'] : T
+    : T,
+>(
+  rootComponent?: MaybeComputedElementRef<R>,
+): UseCurrentElementReturn<T, R, E> {
+  const vm = getCurrentInstance();
+
+  const currentElement = computedWithControl(
+    () => null,
+    () => (rootComponent ? unrefElement(rootComponent) : vm?.proxy?.$el) as E,
+  ) as UseCurrentElementReturn<T, R, E>;
+
+  if (vm) {
+    onMounted(currentElement.trigger);
+    onUpdated(currentElement.trigger);
+    tryOnScopeDispose(currentElement.stop);
+  }
+
+  return currentElement;
+}
diff --git a/vue/toolkit/src/composables/component/useForwardExpose/demo.vue b/vue/toolkit/src/composables/component/useForwardExpose/demo.vue
new file mode 100644
index 0000000..0e84b4c
--- /dev/null
+++ b/vue/toolkit/src/composables/component/useForwardExpose/demo.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import type { ComponentPublicInstance } from 'vue';
+import { defineComponent, h, ref, useTemplateRef, watchEffect } from 'vue';
+import { useForwardExpose } from './index';
+
+// A headless wrapper: it renders a child <input> but transparently forwards the
+// child's $el (and any exposed API) up to whoever holds a ref to the wrapper.
+const FieldWrapper = defineComponent({
+  name: 'FieldWrapper',
+  setup() {
+    // forwardRef is bound to the inner element's :ref; currentElement resolves
+    // to the underlying HTMLElement, skipping text/comment nodes.
+    const { forwardRef, currentElement } = useForwardExpose();
+
+    return () =>
+      h('input', {
+        ref: forwardRef,
+        placeholder: 'Forwarded input',
+        // expose the resolved element so the demo can show it changed live
+        'data-tag': currentElement.value?.tagName.toLowerCase(),
+        class:
+          'w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)',
+      });
+  },
+});
+
+// The parent holds a ref to the wrapper — but thanks to useForwardExpose,
+// wrapper.$el points straight at the inner <input>.
+const field = useTemplateRef<ComponentPublicInstance>('field');
+const resolved = ref<{ tag: string; value: string } | null>(null);
+
+watchEffect(() => {
+  const el = field.value?.$el as HTMLInputElement | undefined;
+  resolved.value = el ? { tag: el.tagName.toLowerCase(), value: el.value } : null;
+});
+
+function focusForwarded() {
+  // Reaching through the wrapper straight to the real DOM node.
+  (field.value?.$el as HTMLInputElement | undefined)?.focus();
+}
+
+function fillSample() {
+  const el = field.value?.$el as HTMLInputElement | undefined;
+  if (el) {
+    el.value = 'ada@anthropic.dev';
+    resolved.value = { tag: el.tagName.toLowerCase(), value: el.value };
+  }
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex flex-col gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Wrapper component
+      </div>
+      <FieldWrapper ref="field" />
+      <p class="text-xs text-(--fg-subtle)">
+        <code class="font-mono">&lt;FieldWrapper&gt;</code> renders an inner input, but
+        <code class="font-mono">useForwardExpose</code> makes its <code class="font-mono">$el</code>
+        resolve to that input.
+      </p>
+    </div>
+
+    <div class="flex items-center gap-2">
+      <button
+        class="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="focusForwarded"
+      >
+        Focus forwarded $el
+      </button>
+      <button
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="fillSample"
+      >
+        Fill sample
+      </button>
+    </div>
+
+    <div class="flex flex-col gap-2 rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+      <div class="flex items-center justify-between">
+        <span class="text-(--fg-subtle)">field.$el</span>
+        <span>{{ resolved ? `<${resolved.tag}>` : 'undefined' }}</span>
+      </div>
+      <div class="flex items-center justify-between gap-3">
+        <span class="text-(--fg-subtle)">value</span>
+        <span class="truncate">{{ resolved?.value || '""' }}</span>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      The parent never touches the input directly — it holds a ref to the wrapper, whose
+      <code class="font-mono">$el</code> is forwarded to the inner element.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/component/useForwardExpose/index.test.ts b/vue/toolkit/src/composables/component/useForwardExpose/index.test.ts
new file mode 100644
index 0000000..b4607aa
--- /dev/null
+++ b/vue/toolkit/src/composables/component/useForwardExpose/index.test.ts
@@ -0,0 +1,276 @@
+import { describe, expect, it } from 'vitest';
+import type { UseForwardExposeReturn } from '.';
+import { defineComponent, nextTick, ref } from 'vue';
+import { mount } from '@vue/test-utils';
+import { useForwardExpose } from '.';
+
+describe(useForwardExpose, () => {
+  it('returns forwardRef, currentRef, and currentElement', () => {
+    let result!: UseForwardExposeReturn<any>;
+
+    const Component = defineComponent({
+      setup() {
+        result = useForwardExpose();
+        return {};
+      },
+      template: `<div>test</div>`,
+    });
+
+    mount(Component);
+
+    expect(result.forwardRef).toBeTypeOf('function');
+    expect(result.currentRef).toBeDefined();
+    expect(result.currentElement).toBeDefined();
+  });
+
+  it('exposes parent props on instance.exposed', () => {
+    const Component = defineComponent({
+      props: {
+        label: { type: String, default: 'hello' },
+      },
+      setup() {
+        useForwardExpose();
+        return {};
+      },
+      template: `<div>{{ label }}</div>`,
+    });
+
+    const wrapper = mount(Component, { props: { label: 'world' } });
+
+    expect(wrapper.vm.$.exposed).toBeDefined();
+    expect(wrapper.vm.$.exposed!.label).toBe('world');
+  });
+
+  it('exposes $el on instance.exposed', () => {
+    const Component = defineComponent({
+      setup() {
+        useForwardExpose();
+        return {};
+      },
+      template: `<div class="root">content</div>`,
+    });
+
+    const wrapper = mount(Component);
+
+    expect(wrapper.vm.$.exposed).toBeDefined();
+    expect(wrapper.vm.$.exposed!.$el).toBeInstanceOf(HTMLDivElement);
+    expect(wrapper.vm.$.exposed!.$el.classList.contains('root')).toBeTruthy();
+  });
+
+  it('forwardRef with a DOM element updates $el', async () => {
+    let result!: UseForwardExposeReturn<any>;
+
+    const Component = defineComponent({
+      setup() {
+        result = useForwardExpose();
+        return {};
+      },
+      template: `<div><span class="inner">inner</span></div>`,
+    });
+
+    const wrapper = mount(Component);
+    const innerSpan = wrapper.find('.inner').element;
+
+    result.forwardRef(innerSpan as Element);
+    await nextTick();
+
+    expect(result.currentRef.value).toBe(innerSpan);
+    expect(wrapper.vm.$.exposed!.$el).toBe(innerSpan);
+  });
+
+  it('forwardRef with a child component instance copies child exposed', async () => {
+    const Child = defineComponent({
+      setup(_, { expose }) {
+        const childValue = ref('from-child');
+        expose({ childValue });
+        return { childValue };
+      },
+      template: `<span class="child">child</span>`,
+    });
+
+    let result!: UseForwardExposeReturn<any>;
+
+    const Parent = defineComponent({
+      components: { Child },
+      setup() {
+        result = useForwardExpose();
+        return { forwardRef: result.forwardRef };
+      },
+      template: `<Child :ref="forwardRef" />`,
+    });
+
+    const wrapper = mount(Parent);
+    await nextTick();
+
+    // The parent's exposed should contain the child's exposed ref
+    expect(wrapper.vm.$.exposed).toBeDefined();
+    expect(wrapper.vm.$.exposed!.childValue).toEqual(ref('from-child'));
+  });
+
+  it('forwardRef with null clears currentRef without error', async () => {
+    let result!: UseForwardExposeReturn<any>;
+
+    const Component = defineComponent({
+      setup() {
+        result = useForwardExpose();
+        return {};
+      },
+      template: `<div>test</div>`,
+    });
+
+    mount(Component);
+
+    expect(() => result.forwardRef(null)).not.toThrow();
+    expect(result.currentRef.value).toBeNull();
+  });
+
+  it('merges prior expose bindings', () => {
+    const Component = defineComponent({
+      setup(_, { expose }) {
+        const custom = ref(42);
+        expose({ custom });
+        useForwardExpose();
+        return {};
+      },
+      template: `<div>test</div>`,
+    });
+
+    const wrapper = mount(Component);
+
+    expect(wrapper.vm.$.exposed).toBeDefined();
+    expect(wrapper.vm.$.exposed!.custom).toEqual(ref(42));
+    expect(wrapper.vm.$.exposed!.$el).toBeDefined();
+  });
+
+  it('currentElement resolves to HTMLElement for element ref', async () => {
+    let result!: UseForwardExposeReturn<any>;
+
+    const Component = defineComponent({
+      setup() {
+        result = useForwardExpose();
+        return {};
+      },
+      template: `<div class="resolved">content</div>`,
+    });
+
+    const wrapper = mount(Component);
+    const el = wrapper.find('.resolved').element;
+
+    result.forwardRef(el as Element);
+    await nextTick();
+
+    expect(result.currentElement.value).toBe(el);
+  });
+
+  it('switching child components updates exposed correctly', async () => {
+    const ChildA = defineComponent({
+      setup(_, { expose }) {
+        const a = ref('value-a');
+        expose({ a });
+        return { a };
+      },
+      template: `<span class="a">A</span>`,
+    });
+
+    const ChildB = defineComponent({
+      setup(_, { expose }) {
+        const b = ref('value-b');
+        expose({ b });
+        return { b };
+      },
+      template: `<span class="b">B</span>`,
+    });
+
+    let result!: UseForwardExposeReturn<any>;
+
+    const Parent = defineComponent({
+      components: { ChildA, ChildB },
+      setup() {
+        const showA = ref(true);
+        result = useForwardExpose();
+        return { showA, forwardRef: result.forwardRef };
+      },
+      template: `
+        <ChildA v-if="showA" :ref="forwardRef" />
+        <ChildB v-else :ref="forwardRef" />
+      `,
+    });
+
+    const wrapper = mount(Parent);
+    await nextTick();
+
+    // Initially ChildA is rendered
+    expect(wrapper.vm.$.exposed!.a).toEqual(ref('value-a'));
+
+    // Switch to ChildB
+    wrapper.vm.showA = false;
+    await nextTick();
+
+    // ChildB's exposed should be available
+    expect(wrapper.vm.$.exposed!.b).toEqual(ref('value-b'));
+  });
+
+  it('$el remains correct after switching from component to element', async () => {
+    const Child = defineComponent({
+      setup(_, { expose }) {
+        expose({ test: ref(1) });
+        return {};
+      },
+      template: `<span class="child-el">child</span>`,
+    });
+
+    let result!: UseForwardExposeReturn<any>;
+
+    const Parent = defineComponent({
+      components: { Child },
+      setup() {
+        result = useForwardExpose();
+        return { forwardRef: result.forwardRef };
+      },
+      template: `<Child :ref="forwardRef" />`,
+    });
+
+    const wrapper = mount(Parent);
+    await nextTick();
+
+    expect(wrapper.vm.$.exposed!.test).toEqual(ref(1));
+
+    // Now forward to a plain DOM element — $el must update on instance.exposed
+    const div = document.createElement('div');
+    result.forwardRef(div);
+    await nextTick();
+
+    expect(wrapper.vm.$.exposed!.$el).toBe(div);
+  });
+
+  it('parent props remain accessible after child forwarding', async () => {
+    const Child = defineComponent({
+      setup(_, { expose }) {
+        expose({ childProp: ref('child') });
+        return {};
+      },
+      template: `<span>child</span>`,
+    });
+
+    let result!: UseForwardExposeReturn<any>;
+
+    const Parent = defineComponent({
+      components: { Child },
+      props: {
+        parentLabel: { type: String, default: 'parent' },
+      },
+      setup() {
+        result = useForwardExpose();
+        return { forwardRef: result.forwardRef };
+      },
+      template: `<Child :ref="forwardRef" />`,
+    });
+
+    const wrapper = mount(Parent, { props: { parentLabel: 'test' } });
+    await nextTick();
+
+    // Both parent props and child exposed should be accessible
+    expect(wrapper.vm.$.exposed!.parentLabel).toBe('test');
+    expect(wrapper.vm.$.exposed!.childProp).toEqual(ref('child'));
+  });
+});
diff --git a/vue/toolkit/src/composables/component/useForwardExpose/index.ts b/vue/toolkit/src/composables/component/useForwardExpose/index.ts
new file mode 100644
index 0000000..f6fcb70
--- /dev/null
+++ b/vue/toolkit/src/composables/component/useForwardExpose/index.ts
@@ -0,0 +1,128 @@
+import type { ComponentPublicInstance, Ref } from 'vue';
+import { computed, getCurrentInstance, shallowRef } from 'vue';
+import type { MaybeElement } from '../unrefElement';
+import { unrefElement } from '../unrefElement';
+
+/** Set of non-element node names that should be skipped when resolving `$el` */
+const NON_ELEMENT_NODES = new Set(['#text', '#comment']);
+
+export interface UseForwardExposeReturn<T extends ComponentPublicInstance> {
+  /** Callback to set as `:ref` — forwards child's exposed API and `$el` through the parent */
+  forwardRef: (ref: T | MaybeElement) => void;
+  /** Reactive reference to the forwarded element or component instance */
+  currentRef: Ref<T | MaybeElement>;
+  /** Computed property resolving to the underlying `HTMLElement`, skipping text/comment nodes */
+  currentElement: Readonly<Ref<HTMLElement | undefined>>;
+}
+
+/**
+ * @name useForwardExpose
+ * @category Component
+ * @description Forwards a child component's exposed API and DOM element (`$el`) through
+ * the parent component. Useful for wrapper / headless components that need to transparently
+ * proxy the inner component's ref to the consumer.
+ *
+ * Merges the parent's own props and any prior `expose()` bindings onto `instance.exposed`,
+ * then updates them when `forwardRef` is called with a child element or component instance.
+ *
+ * @returns {UseForwardExposeReturn<T>} An object with `forwardRef`, `currentRef`, and `currentElement`
+ *
+ * @example
+ * const { forwardRef, currentElement } = useForwardExpose();
+ * // Template: <ChildComponent :ref="forwardRef" />
+ *
+ * @example
+ * const { forwardRef, currentRef } = useForwardExpose<InstanceType<typeof MyInput>>();
+ * // Template: <MyInput :ref="forwardRef" />
+ * // currentRef.value exposes MyInput's public API
+ *
+ * @since 0.0.14
+ */
+export function useForwardExpose<T extends ComponentPublicInstance>(): UseForwardExposeReturn<T> {
+  const instance = getCurrentInstance()!;
+
+  const currentRef = shallowRef<T | MaybeElement>();
+  const currentElement = computed<HTMLElement | undefined>(() => {
+    // @ts-expect-error — $el exists on component instances but not on HTMLElement/SVGElement
+    const el = currentRef.value?.$el;
+
+    return NON_ELEMENT_NODES.has(el?.nodeName)
+      ? (el.nextElementSibling as HTMLElement | undefined) ?? undefined
+      : (unrefElement(currentRef) as HTMLElement | undefined);
+  });
+
+  // localExpose should only be assigned once else will create infinite loop
+  const localExpose = instance.exposed;
+  const ret: Record<string, any> = {};
+
+  // Collect all property descriptors in a single pass
+  const descriptors: PropertyDescriptorMap = {};
+
+  for (const key in instance.props) {
+    descriptors[key] = {
+      enumerable: true,
+      configurable: true,
+      get: () => instance.props[key],
+    };
+  }
+
+  if (localExpose && Object.keys(localExpose).length > 0) {
+    for (const key in localExpose) {
+      descriptors[key] = {
+        enumerable: true,
+        configurable: true,
+        get: () => localExpose[key],
+      };
+    }
+  }
+
+  descriptors['$el'] = {
+    enumerable: true,
+    configurable: true,
+    get: () => instance.vnode.el,
+  };
+
+  Object.defineProperties(ret, descriptors);
+  instance.exposed = ret;
+
+  function forwardRef(ref: T | MaybeElement) {
+    currentRef.value = ref;
+    if (!ref) return;
+
+    const $elDescriptor: PropertyDescriptor = {
+      enumerable: true,
+      configurable: true,
+      get: () => (ref instanceof Element ? ref : ref.$el),
+    };
+
+    // Keep ret in sync — it's the source of descriptors for future rebuilds
+    Object.defineProperty(ret, '$el', $elDescriptor);
+
+    // Also update current instance.exposed if it has diverged from ret
+    if (instance.exposed && instance.exposed !== ret) {
+      Object.defineProperty(instance.exposed, '$el', $elDescriptor);
+    }
+
+    if (!(ref instanceof Element) && !Object.prototype.hasOwnProperty.call(ref, '$el')) {
+      const childExposed = ref.$.exposed;
+
+      if (childExposed) {
+        // Copy descriptors from ret (includes props, prior expose, $el)
+        const allDescriptors = Object.getOwnPropertyDescriptors(ret);
+        allDescriptors['$el'] = $elDescriptor;
+
+        for (const key in childExposed) {
+          allDescriptors[key] = {
+            enumerable: true,
+            configurable: true,
+            get: () => childExposed[key],
+          };
+        }
+
+        instance.exposed = Object.defineProperties({}, allDescriptors);
+      }
+    }
+  }
+
+  return { forwardRef, currentRef, currentElement };
+}
diff --git a/vue/toolkit/src/composables/component/useTemplateRefsList/demo.vue b/vue/toolkit/src/composables/component/useTemplateRefsList/demo.vue
new file mode 100644
index 0000000..82bb7db
--- /dev/null
+++ b/vue/toolkit/src/composables/component/useTemplateRefsList/demo.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue';
+import { useTemplateRefsList } from './index';
+
+interface Track {
+  id: number;
+  title: string;
+  artist: string;
+}
+
+let nextId = 6;
+const tracks = ref<Track[]>([
+  { id: 1, title: 'Midnight City', artist: 'M83' },
+  { id: 2, title: 'Resonance', artist: 'Home' },
+  { id: 3, title: 'Nightcall', artist: 'Kavinsky' },
+  { id: 4, title: 'Strangers', artist: 'Sigrid' },
+  { id: 5, title: 'Open Eye Signal', artist: 'Jon Hopkins' },
+]);
+
+// Collect a live, document-ordered array of every rendered row element.
+const { refs, set } = useTemplateRefsList<HTMLLIElement>();
+
+const lastMeasured = ref<{ index: number; width: number } | null>(null);
+
+// Reads the freshly collected refs to measure the DOM directly.
+function measureLast() {
+  const els = refs.value;
+  if (els.length === 0)
+    return;
+  const index = els.length - 1;
+  const el = els[index]!;
+  lastMeasured.value = { index, width: Math.round(el.getBoundingClientRect().width) };
+  el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+}
+
+async function addTrack() {
+  const sample = { id: nextId++, title: `Aurora ${nextId}`, artist: 'Synthwave' };
+  tracks.value.push(sample);
+  // Wait for the update flush so the new element is in `refs`.
+  await nextTick();
+  measureLast();
+}
+
+function removeTrack(id: number) {
+  tracks.value = tracks.value.filter(t => t.id !== id);
+  lastMeasured.value = null;
+}
+
+const collected = computed(() => refs.value.length);
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Playlist</span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        {{ collected }} refs collected
+      </span>
+    </div>
+
+    <ul class="flex flex-col gap-2 max-h-56 overflow-y-auto rounded-xl border border-(--border) bg-(--bg-elevated) p-2">
+      <li
+        v-for="(track, index) in tracks"
+        :key="track.id"
+        :ref="set"
+        class="group flex items-center gap-3 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2 transition"
+        :class="lastMeasured?.index === index ? 'border-(--accent) ring-2 ring-(--ring)' : 'hover:border-(--border-strong)'"
+      >
+        <span class="font-mono text-xs tabular-nums text-(--fg-subtle) w-5 text-right">{{ index + 1 }}</span>
+        <span class="flex min-w-0 flex-1 flex-col">
+          <span class="truncate text-sm font-medium text-(--fg)">{{ track.title }}</span>
+          <span class="truncate text-xs text-(--fg-muted)">{{ track.artist }}</span>
+        </span>
+        <button
+          type="button"
+          aria-label="Remove track"
+          class="rounded-md px-1.5 py-0.5 text-xs text-(--fg-subtle) opacity-0 transition hover:text-(--fg) group-hover:opacity-100 cursor-pointer"
+          @click="removeTrack(track.id)"
+        >
+          ✕
+        </button>
+      </li>
+      <li v-if="tracks.length === 0" class="px-3 py-6 text-center text-sm text-(--fg-subtle)">
+        No tracks — add one to collect a ref.
+      </li>
+    </ul>
+
+    <div
+      v-if="lastMeasured"
+      class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums"
+    >
+      refs[{{ lastMeasured.index }}].width = {{ lastMeasured.width }}px
+    </div>
+    <p v-else class="text-xs text-(--fg-subtle)">
+      Add a track to measure the newest collected element directly from the DOM.
+    </p>
+
+    <div class="flex gap-2">
+      <button
+        type="button"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="addTrack"
+      >
+        Add track
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="collected === 0"
+        @click="measureLast"
+      >
+        Measure last
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/component/useTemplateRefsList/index.test.ts b/vue/toolkit/src/composables/component/useTemplateRefsList/index.test.ts
new file mode 100644
index 0000000..f89c92d
--- /dev/null
+++ b/vue/toolkit/src/composables/component/useTemplateRefsList/index.test.ts
@@ -0,0 +1,141 @@
+import { describe, expect, it } from 'vitest';
+import { defineComponent, nextTick, ref } from 'vue';
+import { mount } from '@vue/test-utils';
+import { useTemplateRefsList } from '.';
+
+describe(useTemplateRefsList, () => {
+  it('collects elements rendered with v-for', async () => {
+    const Component = defineComponent({
+      setup() {
+        const items = ref([1, 2, 3]);
+        const { refs, set } = useTemplateRefsList<HTMLDivElement>();
+        return { items, refs, set };
+      },
+      template: `<div v-for="item in items" :key="item" :ref="set">{{ item }}</div>`,
+    });
+
+    const wrapper = mount(Component);
+    await nextTick();
+
+    expect(wrapper.vm.refs).toHaveLength(3);
+    expect(wrapper.vm.refs[0]).toBeInstanceOf(HTMLDivElement);
+    expect(wrapper.vm.refs[1]).toBeInstanceOf(HTMLDivElement);
+    expect(wrapper.vm.refs[2]).toBeInstanceOf(HTMLDivElement);
+  });
+
+  it('updates refs when items are added', async () => {
+    const Component = defineComponent({
+      setup() {
+        const items = ref([1, 2]);
+        const { refs, set } = useTemplateRefsList<HTMLDivElement>();
+        return { items, refs, set };
+      },
+      template: `<div v-for="item in items" :key="item" :ref="set">{{ item }}</div>`,
+    });
+
+    const wrapper = mount(Component);
+    await nextTick();
+    expect(wrapper.vm.refs).toHaveLength(2);
+
+    wrapper.vm.items.push(3);
+    await nextTick();
+    expect(wrapper.vm.refs).toHaveLength(3);
+  });
+
+  it('updates refs when items are removed', async () => {
+    const Component = defineComponent({
+      setup() {
+        const items = ref([1, 2, 3]);
+        const { refs, set } = useTemplateRefsList<HTMLDivElement>();
+        return { items, refs, set };
+      },
+      template: `<div v-for="item in items" :key="item" :ref="set">{{ item }}</div>`,
+    });
+
+    const wrapper = mount(Component);
+    await nextTick();
+    expect(wrapper.vm.refs).toHaveLength(3);
+
+    wrapper.vm.items.splice(0, 1);
+    await nextTick();
+    expect(wrapper.vm.refs).toHaveLength(2);
+  });
+
+  it('returns empty array when no elements are rendered', async () => {
+    const Component = defineComponent({
+      setup() {
+        const items = ref<number[]>([]);
+        const { refs, set } = useTemplateRefsList<HTMLDivElement>();
+        return { items, refs, set };
+      },
+      template: `<div><span v-for="item in items" :key="item" :ref="set">{{ item }}</span></div>`,
+    });
+
+    const wrapper = mount(Component);
+    await nextTick();
+    expect(wrapper.vm.refs).toHaveLength(0);
+  });
+
+  it('unwraps component instances to their root elements', async () => {
+    const Child = defineComponent({
+      template: `<span class="child">child</span>`,
+    });
+
+    const Parent = defineComponent({
+      components: { Child },
+      setup() {
+        const items = ref([1, 2]);
+        const { refs, set } = useTemplateRefsList<HTMLSpanElement>();
+        return { items, refs, set };
+      },
+      template: `<div><Child v-for="item in items" :key="item" :ref="set" /></div>`,
+    });
+
+    const wrapper = mount(Parent);
+    await nextTick();
+
+    expect(wrapper.vm.refs).toHaveLength(2);
+    expect(wrapper.vm.refs[0]).toBeInstanceOf(HTMLSpanElement);
+    expect(wrapper.vm.refs[0]!.classList.contains('child')).toBeTruthy();
+  });
+
+  it('preserves element order matching v-for order', async () => {
+    const Component = defineComponent({
+      setup() {
+        const items = ref(['a', 'b', 'c']);
+        const { refs, set } = useTemplateRefsList<HTMLDivElement>();
+        return { items, refs, set };
+      },
+      template: `<div v-for="item in items" :key="item" :ref="set" :data-item="item">{{ item }}</div>`,
+    });
+
+    const wrapper = mount(Component);
+    await nextTick();
+
+    expect(wrapper.vm.refs[0]!.dataset.item).toBe('a');
+    expect(wrapper.vm.refs[1]!.dataset.item).toBe('b');
+    expect(wrapper.vm.refs[2]!.dataset.item).toBe('c');
+  });
+
+  it('handles complete list replacement', async () => {
+    const Component = defineComponent({
+      setup() {
+        const items = ref([1, 2, 3]);
+        const { refs, set } = useTemplateRefsList<HTMLDivElement>();
+        return { items, refs, set };
+      },
+      template: `<div v-for="item in items" :key="item" :ref="set" :data-item="item">{{ item }}</div>`,
+    });
+
+    const wrapper = mount(Component);
+    await nextTick();
+    expect(wrapper.vm.refs).toHaveLength(3);
+
+    wrapper.vm.items = [4, 5];
+    await nextTick();
+
+    expect(wrapper.vm.refs).toHaveLength(2);
+    expect(wrapper.vm.refs[0]!.dataset.item).toBe('4');
+    expect(wrapper.vm.refs[1]!.dataset.item).toBe('5');
+  });
+});
diff --git a/vue/toolkit/src/composables/component/useTemplateRefsList/index.ts b/vue/toolkit/src/composables/component/useTemplateRefsList/index.ts
new file mode 100644
index 0000000..3029b8d
--- /dev/null
+++ b/vue/toolkit/src/composables/component/useTemplateRefsList/index.ts
@@ -0,0 +1,72 @@
+import { onBeforeUpdate, onMounted, onUpdated, readonly, shallowRef } from 'vue';
+import type { DeepReadonly, ShallowRef } from 'vue';
+import type { MaybeElement } from '../unrefElement';
+import { unrefElement } from '../unrefElement';
+
+export interface UseTemplateRefsListReturn<El extends Element> {
+  /** Reactive readonly array of collected template refs */
+  refs: DeepReadonly<ShallowRef<El[]>>;
+  /** Ref setter function — bind via `:ref="set"` in templates */
+  set: (el: MaybeElement) => void;
+}
+
+/**
+ * @name useTemplateRefsList
+ * @category Component
+ * @description Collects a dynamic list of template refs for use with `v-for`.
+ * Automatically clears the list before each component update and repopulates it
+ * with fresh element references. Handles both plain DOM elements and Vue component
+ * instances (unwraps `$el`).
+ *
+ * Uses a non-reactive buffer internally to collect refs during the render cycle,
+ * then flushes to a `shallowRef` in `onMounted`/`onUpdated` to avoid triggering
+ * recursive update loops.
+ *
+ * @returns {UseTemplateRefsListReturn<El>} An object with a reactive `refs` array and a `set` function
+ *
+ * @example
+ * const { refs, set } = useTemplateRefsList<HTMLDivElement>();
+ * // Template: <div v-for="item in items" :key="item.id" :ref="set" />
+ * // refs.value contains all rendered div elements
+ *
+ * @since 0.0.14
+ */
+export function useTemplateRefsList<El extends Element = Element>(): UseTemplateRefsListReturn<El> {
+  const refs = shallowRef<El[]>([]);
+  let buffer: El[] = [];
+
+  const set = (el: MaybeElement) => {
+    const plain = unrefElement(el);
+
+    if (plain)
+      buffer.push(plain as unknown as El);
+  };
+
+  const flush = () => {
+    buffer.sort(documentPositionComparator);
+    refs.value = buffer;
+  };
+
+  onBeforeUpdate(() => {
+    buffer = [];
+  });
+
+  onMounted(flush);
+  onUpdated(flush);
+
+  return {
+    refs: readonly(refs) as DeepReadonly<ShallowRef<El[]>>,
+    set,
+  };
+}
+
+function documentPositionComparator(a: Element, b: Element): number {
+  if (a === b) return 0;
+
+  const position = a.compareDocumentPosition(b);
+
+  if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
+  if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
+
+  return 0;
+}
diff --git a/vue/toolkit/src/composables/component/useVirtualList/demo.vue b/vue/toolkit/src/composables/component/useVirtualList/demo.vue
new file mode 100644
index 0000000..efc31cb
--- /dev/null
+++ b/vue/toolkit/src/composables/component/useVirtualList/demo.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { computed, ref, shallowRef } from 'vue';
+import { useVirtualList } from './index';
+
+// 10,000 rows — only the visible window (plus overscan) is ever in the DOM.
+const total = 10000;
+const items = shallowRef(
+  Array.from({ length: total }, (_, i) => ({
+    id: i,
+    label: `Row #${(i + 1).toString().padStart(5, '0')}`,
+    hue: (i * 37) % 360,
+  })),
+);
+
+const itemHeight = 44;
+
+const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(items, {
+  itemHeight,
+  overscan: 6,
+});
+
+const jumpTo = ref(5000);
+
+function go() {
+  const index = Math.min(Math.max(jumpTo.value || 0, 0), total - 1);
+  scrollTo(index, { behavior: 'smooth', block: 'center' });
+}
+
+const visibleRange = computed(() => {
+  if (list.value.length === 0)
+    return '—';
+  const first = list.value[0]!.index;
+  const last = list.value[list.value.length - 1]!.index;
+  return `${first}–${last}`;
+});
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Virtual list</span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        {{ total.toLocaleString() }} rows
+      </span>
+    </div>
+
+    <div
+      v-bind="containerProps"
+      class="h-64 rounded-xl border border-(--border) bg-(--bg-elevated)"
+    >
+      <div v-bind="wrapperProps">
+        <div
+          v-for="{ data, index } in list"
+          :key="index"
+          class="flex items-center gap-3 border-b border-(--border) px-3"
+          :style="{ height: `${itemHeight}px` }"
+        >
+          <span
+            class="size-6 shrink-0 rounded-md border border-(--border)"
+            :style="{ backgroundColor: `hsl(${data.hue} 65% 55%)` }"
+          />
+          <span class="flex-1 truncate font-mono text-sm text-(--fg) tabular-nums">{{ data.label }}</span>
+          <span class="text-xs text-(--fg-subtle)">idx {{ index }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums flex items-center justify-between">
+      <span class="text-(--fg-muted)">rendered</span>
+      <span>{{ list.length }} nodes · idx {{ visibleRange }}</span>
+    </div>
+
+    <div class="flex items-end gap-2">
+      <label class="flex flex-1 flex-col gap-1">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Scroll to index</span>
+        <input
+          v-model.number="jumpTo"
+          type="number"
+          :min="0"
+          :max="total - 1"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+      </label>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-2 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="go"
+      >
+        Jump
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/component/useVirtualList/index.test.ts b/vue/toolkit/src/composables/component/useVirtualList/index.test.ts
new file mode 100644
index 0000000..d76ed11
--- /dev/null
+++ b/vue/toolkit/src/composables/component/useVirtualList/index.test.ts
@@ -0,0 +1,221 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, ref } from 'vue';
+import { useVirtualList } from '.';
+
+class StubResizeObserver {
+  observe = vi.fn();
+  disconnect = vi.fn();
+  unobserve = vi.fn();
+}
+
+function makeContainer(overrides: Partial<{
+  clientWidth: number;
+  clientHeight: number;
+  scrollWidth: number;
+  scrollHeight: number;
+}> = {}) {
+  const el = document.createElement('div');
+  Object.defineProperties(el, {
+    clientWidth: { value: overrides.clientWidth ?? 100, configurable: true },
+    clientHeight: { value: overrides.clientHeight ?? 100, configurable: true },
+    scrollWidth: { value: overrides.scrollWidth ?? 10000, configurable: true },
+    scrollHeight: { value: overrides.scrollHeight ?? 10000, configurable: true },
+  });
+  el.scrollTop = 0;
+  el.scrollLeft = 0;
+  el.scrollTo = vi.fn((opts: ScrollToOptions) => {
+    if (typeof opts.top === 'number') el.scrollTop = opts.top;
+    if (typeof opts.left === 'number') el.scrollLeft = opts.left;
+  }) as unknown as typeof el.scrollTo;
+  return el;
+}
+
+function withScope<T>(fn: () => T): { result: T; scope: ReturnType<typeof effectScope> } {
+  const scope = effectScope();
+  let result!: T;
+  scope.run(() => {
+    result = fn();
+  });
+  return { result, scope };
+}
+
+describe(useVirtualList, () => {
+  beforeEach(() => {
+    vi.stubGlobal('ResizeObserver', StubResizeObserver);
+  });
+  afterEach(() => vi.unstubAllGlobals());
+
+  it('renders an empty window before the container mounts (SSR-safe)', () => {
+    const data = Array.from({ length: 1000 }, (_, i) => i);
+    const { result, scope } = withScope(() => useVirtualList(data, { itemHeight: 20 }));
+
+    expect(result.list.value).toEqual([]);
+    expect(result.containerProps.ref.value).toBeNull();
+    expect(result.containerProps.style).toEqual({ overflowY: 'auto' });
+    scope.stop();
+  });
+
+  it('exposes the documented return shape', () => {
+    const { result, scope } = withScope(() => useVirtualList([1, 2, 3], { itemHeight: 20 }));
+
+    expect(result).toHaveProperty('list');
+    expect(result).toHaveProperty('scrollTo');
+    expect(result).toHaveProperty('containerProps');
+    expect(result).toHaveProperty('wrapperProps');
+    expect(typeof result.scrollTo).toBe('function');
+    expect(typeof result.containerProps.onScroll).toBe('function');
+    scope.stop();
+  });
+
+  it('slices the visible window plus overscan (vertical, fixed height)', async () => {
+    const data = Array.from({ length: 1000 }, (_, i) => i);
+    const el = makeContainer({ clientHeight: 100 });
+    const { result, scope } = withScope(() => useVirtualList(data, { itemHeight: 20, overscan: 2 }));
+
+    result.containerProps.ref.value = el;
+    await nextTick();
+
+    // offset(0) = 0, capacity = ceil(100/20) = 5, overscan 2 -> start 0, end 7.
+    expect(result.list.value[0]).toEqual({ data: 0, index: 0 });
+    expect(result.list.value).toHaveLength(7);
+    expect(result.list.value.at(-1)).toEqual({ data: 6, index: 6 });
+    scope.stop();
+  });
+
+  it('recomputes the window on scroll with correct original indices', async () => {
+    const data = Array.from({ length: 1000 }, (_, i) => i);
+    const el = makeContainer({ clientHeight: 100 });
+    const { result, scope } = withScope(() => useVirtualList(data, { itemHeight: 20, overscan: 2 }));
+
+    result.containerProps.ref.value = el;
+    await nextTick();
+
+    el.scrollTop = 400; // offset = floor(400/20) = 20
+    el.dispatchEvent(new Event('scroll'));
+    await nextTick();
+
+    // start = 20 - 2 = 18, end = 20 + 5 + 2 = 27
+    expect(result.list.value[0]).toEqual({ data: 18, index: 18 });
+    expect(result.list.value.at(-1)).toEqual({ data: 26, index: 26 });
+    scope.stop();
+  });
+
+  it('computes total height and offset spacers via wrapperProps', async () => {
+    const data = Array.from({ length: 50 }, (_, i) => i);
+    const el = makeContainer({ clientHeight: 100 });
+    const { result, scope } = withScope(() => useVirtualList(data, { itemHeight: 20, overscan: 0 }));
+
+    result.containerProps.ref.value = el;
+    await nextTick();
+
+    // total height = 50 * 20 = 1000; at top, marginTop = 0
+    expect(result.wrapperProps.value.style.height).toBe('1000px');
+    expect(result.wrapperProps.value.style.marginTop).toBe('0px');
+    expect(result.wrapperProps.value.style.width).toBe('100%');
+
+    el.scrollTop = 200; // offset = 10, start = 10
+    el.dispatchEvent(new Event('scroll'));
+    await nextTick();
+
+    // marginTop = distance(10) = 200px; remaining height = 1000 - 200 = 800px
+    expect(result.wrapperProps.value.style.marginTop).toBe('200px');
+    expect(result.wrapperProps.value.style.height).toBe('800px');
+    scope.stop();
+  });
+
+  it('supports horizontal layout with itemWidth', async () => {
+    const data = Array.from({ length: 1000 }, (_, i) => i);
+    const el = makeContainer({ clientWidth: 100 });
+    const { result, scope } = withScope(() => useVirtualList(data, { itemWidth: 25, overscan: 1 }));
+
+    expect(result.containerProps.style).toEqual({ overflowX: 'auto' });
+
+    result.containerProps.ref.value = el;
+    await nextTick();
+
+    // capacity = ceil(100/25) = 4, overscan 1 -> start 0, end 5
+    expect(result.list.value).toHaveLength(5);
+    expect(result.wrapperProps.value.style.display).toBe('flex');
+    expect(result.wrapperProps.value.style.height).toBe('100%');
+    expect(result.wrapperProps.value.style.marginLeft).toBe('0px');
+    scope.stop();
+  });
+
+  it('supports variable item heights via a getter (prefix-sum metrics)', async () => {
+    const data = Array.from({ length: 100 }, (_, i) => i);
+    const el = makeContainer({ clientHeight: 100 });
+    // even indices: 40px, odd: 10px
+    const itemHeight = (i: number) => (i % 2 === 0 ? 40 : 10);
+    const { result, scope } = withScope(() => useVirtualList(data, { itemHeight, overscan: 0 }));
+
+    result.containerProps.ref.value = el;
+    await nextTick();
+
+    expect(result.list.value[0]).toEqual({ data: 0, index: 0 });
+
+    // total = 50 * 40 + 50 * 10 = 2500
+    expect(result.wrapperProps.value.style.height).toBe('2500px');
+
+    // distance to index 4 = sizes[0..3] = 40+10+40+10 = 100
+    el.scrollTop = 100;
+    el.dispatchEvent(new Event('scroll'));
+    await nextTick();
+
+    expect(result.list.value[0]).toEqual({ data: 4, index: 4 });
+    expect(result.wrapperProps.value.style.marginTop).toBe('100px');
+    scope.stop();
+  });
+
+  it('scrollTo moves the container and re-slices', async () => {
+    const data = Array.from({ length: 1000 }, (_, i) => i);
+    const el = makeContainer({ clientHeight: 100 });
+    const { result, scope } = withScope(() => useVirtualList(data, { itemHeight: 20, overscan: 0 }));
+
+    result.containerProps.ref.value = el;
+    await nextTick();
+
+    result.scrollTo(30);
+    // distance(30) = 30 * 20 = 600; block 'start' keeps offset 0
+    expect(el.scrollTop).toBe(600);
+    expect(result.list.value[0]).toEqual({ data: 30, index: 30 });
+    scope.stop();
+  });
+
+  it('scrollTo is a no-op when the container is not mounted', () => {
+    const { result, scope } = withScope(() => useVirtualList([1, 2, 3], { itemHeight: 20 }));
+    expect(() => result.scrollTo(2)).not.toThrow();
+    scope.stop();
+  });
+
+  it('reacts to a changing source ref', async () => {
+    const data = ref(Array.from({ length: 10 }, (_, i) => i));
+    const el = makeContainer({ clientHeight: 100 });
+    const { result, scope } = withScope(() => useVirtualList(data, { itemHeight: 20, overscan: 0 }));
+
+    result.containerProps.ref.value = el;
+    await nextTick();
+
+    // total = 10 * 20 = 200
+    expect(result.wrapperProps.value.style.height).toBe('200px');
+
+    data.value = Array.from({ length: 100 }, (_, i) => i);
+    await nextTick();
+
+    // total = 100 * 20 = 2000
+    expect(result.wrapperProps.value.style.height).toBe('2000px');
+    scope.stop();
+  });
+
+  it('clamps the window to the source bounds', async () => {
+    const data = Array.from({ length: 3 }, (_, i) => i);
+    const el = makeContainer({ clientHeight: 1000 });
+    const { result, scope } = withScope(() => useVirtualList(data, { itemHeight: 20, overscan: 5 }));
+
+    result.containerProps.ref.value = el;
+    await nextTick();
+
+    expect(result.list.value).toHaveLength(3);
+    expect(result.list.value.at(-1)).toEqual({ data: 2, index: 2 });
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/component/useVirtualList/index.ts b/vue/toolkit/src/composables/component/useVirtualList/index.ts
new file mode 100644
index 0000000..d5d9526
--- /dev/null
+++ b/vue/toolkit/src/composables/component/useVirtualList/index.ts
@@ -0,0 +1,325 @@
+import type { ComputedRef, MaybeRefOrGetter, Ref, ShallowRef, StyleValue } from 'vue';
+import { computed, shallowRef, toValue, watch } from 'vue';
+import { clamp, isNumber } from '@robonen/stdlib';
+import { useElementSize } from '@/composables/elements/useElementSize';
+import { useEventListener } from '@/composables/browser/useEventListener';
+
+/**
+ * Fixed pixel size or a per-index getter.
+ */
+export type UseVirtualListItemSize = number | ((index: number) => number);
+
+export interface UseVirtualListOptionsBase {
+  /**
+   * Number of extra items rendered above and below the visible window to
+   * reduce blank flashes while scrolling.
+   *
+   * @default 5
+   */
+  overscan?: number;
+}
+
+export interface UseHorizontalVirtualListOptions extends UseVirtualListOptionsBase {
+  /**
+   * Horizontal item size in pixels, or a getter `(index) => number`.
+   */
+  itemWidth: UseVirtualListItemSize;
+}
+
+export interface UseVerticalVirtualListOptions extends UseVirtualListOptionsBase {
+  /**
+   * Vertical item size in pixels, or a getter `(index) => number`.
+   */
+  itemHeight: UseVirtualListItemSize;
+}
+
+export type UseVirtualListOptions
+  = | UseHorizontalVirtualListOptions
+    | UseVerticalVirtualListOptions;
+
+export interface UseVirtualListItem<T> {
+  data: T;
+  index: number;
+}
+
+export interface UseVirtualListScrollToOptions {
+  behavior?: ScrollBehavior;
+  block?: ScrollLogicalPosition;
+  inline?: ScrollLogicalPosition;
+}
+
+export interface UseVirtualListContainerProps {
+  ref: ShallowRef<HTMLElement | null>;
+  onScroll: () => void;
+  style: StyleValue;
+}
+
+export interface UseVirtualListWrapperStyle {
+  width: string;
+  height: string;
+  marginTop?: string;
+  marginLeft?: string;
+  display?: string;
+}
+
+export interface UseVirtualListReturn<T> {
+  /**
+   * The currently visible slice (with original indices) to render.
+   */
+  list: Ref<Array<UseVirtualListItem<T>>>;
+  /**
+   * Scroll the container so the item at `index` becomes visible.
+   */
+  scrollTo: (index: number, options?: UseVirtualListScrollToOptions) => void;
+  /**
+   * Props to bind on the scrolling container element.
+   */
+  containerProps: UseVirtualListContainerProps;
+  /**
+   * Reactive props to bind on the inner wrapper element (spacer offsets).
+   */
+  wrapperProps: ComputedRef<{ style: UseVirtualListWrapperStyle }>;
+}
+
+interface UseVirtualListState {
+  start: number;
+  end: number;
+}
+
+type Axis = 'horizontal' | 'vertical';
+
+const scrollKey = {
+  horizontal: 'scrollLeft',
+  vertical: 'scrollTop',
+} as const;
+
+const scrollToKey = {
+  horizontal: 'left',
+  vertical: 'top',
+} as const;
+
+const defaultScrollToOptions: UseVirtualListScrollToOptions = {
+  behavior: 'auto',
+  block: 'start',
+  inline: 'nearest',
+};
+
+interface UseVirtualListMetrics {
+  /** Cumulative offset before the item at `index` (i.e. distance from the start). */
+  distance: (index: number) => number;
+  /** Total size of every item. */
+  total: () => number;
+  /** How many items fit, starting at `start`, inside `containerSize`. */
+  viewCapacity: (containerSize: number, start: number) => number;
+  /** Index of the first item whose cumulative span reaches `scrollPos`. */
+  offset: (scrollPos: number) => number;
+  /** Size of a single item. */
+  size: (index: number) => number;
+}
+
+/**
+ * Build size metrics for the current source.
+ *
+ * For a fixed numeric `itemSize` everything is O(1) arithmetic. For a getter
+ * we precompute a prefix-sum table once per (source, itemSize) change so that
+ * `distance`, `total`, `offset`, and `viewCapacity` are O(1)/O(log n) lookups
+ * instead of re-reducing the whole array on every scroll frame.
+ */
+function createMetrics(length: number, itemSize: UseVirtualListItemSize): UseVirtualListMetrics {
+  if (isNumber(itemSize)) {
+    const fixed = itemSize;
+    return {
+      size: () => fixed,
+      distance: index => clamp(index, 0, length) * fixed,
+      total: () => length * fixed,
+      viewCapacity: containerSize => Math.ceil(containerSize / fixed),
+      offset: scrollPos => Math.floor(scrollPos / fixed),
+    };
+  }
+
+  // prefix[i] = sum of sizes of items [0, i); prefix[length] = total size.
+  const prefix = new Float64Array(length + 1);
+  for (let i = 0; i < length; i++)
+    prefix[i + 1] = prefix[i]! + itemSize(i);
+
+  const total = prefix[length]!;
+
+  // Largest index whose cumulative offset is <= target, via binary search.
+  const lowerBound = (target: number): number => {
+    let lo = 0;
+    let hi = length;
+    while (lo < hi) {
+      const mid = (lo + hi) >> 1;
+      if (prefix[mid]! <= target)
+        lo = mid + 1;
+      else
+        hi = mid;
+    }
+    return lo - 1;
+  };
+
+  return {
+    size: index => itemSize(index),
+    distance: index => prefix[clamp(index, 0, length)]!,
+    total: () => total,
+    viewCapacity: (containerSize, start) => {
+      const target = prefix[clamp(start, 0, length)]! + containerSize;
+      const end = lowerBound(target);
+      return Math.max(0, end - start + 1);
+    },
+    offset: scrollPos => Math.max(0, lowerBound(scrollPos)),
+  };
+}
+
+/**
+ * @name useVirtualList
+ * @category Component
+ * @description Virtualize a large list so only the items inside (and slightly
+ * around) the viewport are rendered. Supports vertical (`itemHeight`) and
+ * horizontal (`itemWidth`) layouts, fixed or per-index sizes, and an `overscan`
+ * buffer. Backed by `useElementSize` (reactive container size) and
+ * `useEventListener` (passive, auto-cleaned scroll handling). SSR-safe: renders
+ * an empty window until the container mounts.
+ *
+ * @param {MaybeRefOrGetter<readonly T[]>} list The full source array (may be reactive)
+ * @param {UseVirtualListOptions} options Layout options — supply `itemHeight` (vertical) or `itemWidth` (horizontal), plus optional `overscan`
+ * @returns {UseVirtualListReturn<T>} `{ list, containerProps, wrapperProps, scrollTo }`
+ *
+ * @example
+ * const all = ref(Array.from({ length: 99999 }, (_, i) => i));
+ * const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(all, { itemHeight: 22 });
+ * // <div v-bind="containerProps" style="height: 300px">
+ * //   <div v-bind="wrapperProps">
+ * //     <div v-for="{ data, index } in list" :key="index" style="height: 22px">{{ data }}</div>
+ * //   </div>
+ * // </div>
+ *
+ * @example
+ * // Variable heights and a wider overscan buffer.
+ * const { list } = useVirtualList(items, { itemHeight: i => (i % 2 ? 40 : 80), overscan: 10 });
+ *
+ * @since 0.0.15
+ */
+export function useVirtualList<T = any>(
+  list: MaybeRefOrGetter<readonly T[]>,
+  options: UseVirtualListOptions,
+): UseVirtualListReturn<T> {
+  const isVertical = 'itemHeight' in options;
+  const axis: Axis = isVertical ? 'vertical' : 'horizontal';
+  const itemSize = isVertical
+    ? (options as UseVerticalVirtualListOptions).itemHeight
+    : (options as UseHorizontalVirtualListOptions).itemWidth;
+  const overscan = options.overscan ?? 5;
+
+  const containerRef = shallowRef<HTMLElement | null>(null);
+  const size = useElementSize(containerRef);
+  const source = computed(() => toValue(list));
+
+  const currentList = shallowRef<Array<UseVirtualListItem<T>>>([]);
+  const state = shallowRef<UseVirtualListState>({ start: 0, end: overscan });
+
+  // Recompute metrics only when the source length or item-size strategy changes.
+  const metrics = computed(() => createMetrics(source.value.length, itemSize));
+
+  const calculateRange = (): void => {
+    const element = containerRef.value;
+    if (!element)
+      return;
+
+    const m = metrics.value;
+    const len = source.value.length;
+    const scrollPos = axis === 'vertical' ? element.scrollTop : element.scrollLeft;
+    const containerSize = axis === 'vertical' ? element.clientHeight : element.clientWidth;
+
+    const offset = m.offset(scrollPos);
+    const viewCapacity = m.viewCapacity(containerSize, offset);
+
+    const start = clamp(offset - overscan, 0, len);
+    const end = clamp(offset + viewCapacity + overscan, 0, len);
+
+    state.value = { start, end };
+
+    const view: Array<UseVirtualListItem<T>> = [];
+    for (let i = start; i < end; i++)
+      view.push({ data: source.value[i]!, index: i });
+    currentList.value = view;
+  };
+
+  // Re-slice when the viewport size, the source, or the mounted element changes.
+  watch(
+    [size.width, size.height, source, containerRef],
+    calculateRange,
+    { flush: 'post' },
+  );
+
+  // Passive scroll listener with automatic cleanup and reactive re-binding.
+  useEventListener(containerRef, 'scroll', calculateRange, { passive: true });
+
+  const offsetStart = computed(() => metrics.value.distance(state.value.start));
+  const totalSize = computed(() => metrics.value.total());
+
+  const wrapperProps = computed((): { style: UseVirtualListWrapperStyle } => {
+    if (axis === 'vertical') {
+      return {
+        style: {
+          width: '100%',
+          height: `${totalSize.value - offsetStart.value}px`,
+          marginTop: `${offsetStart.value}px`,
+        },
+      };
+    }
+    return {
+      style: {
+        height: '100%',
+        width: `${totalSize.value - offsetStart.value}px`,
+        marginLeft: `${offsetStart.value}px`,
+        display: 'flex',
+      },
+    };
+  });
+
+  const containerStyle: StyleValue = isVertical
+    ? { overflowY: 'auto' }
+    : { overflowX: 'auto' };
+
+  const scrollTo = (index: number, scrollOptions?: UseVirtualListScrollToOptions): void => {
+    const element = containerRef.value;
+    if (!element)
+      return;
+
+    const resolved = { ...defaultScrollToOptions, ...scrollOptions };
+    const m = metrics.value;
+
+    let offset = 0;
+    const align = axis === 'horizontal' ? resolved.inline : resolved.block;
+    if (align) {
+      const containerSize = axis === 'vertical' ? element.clientHeight : element.clientWidth;
+      const fullItemSize = m.size(index);
+      if (align === 'center')
+        offset = containerSize / 2 - fullItemSize / 2;
+      else if (align === 'end')
+        offset = containerSize - fullItemSize;
+      else if (align === 'nearest' && m.distance(index) > element[scrollKey[axis]] + containerSize / 2)
+        offset = containerSize - fullItemSize;
+    }
+
+    element.scrollTo({
+      [scrollToKey[axis]]: m.distance(index) - offset,
+      behavior: resolved.behavior,
+    });
+    calculateRange();
+  };
+
+  const containerProps: UseVirtualListContainerProps = {
+    ref: containerRef,
+    onScroll: calculateRange,
+    style: containerStyle,
+  };
+
+  return {
+    list: currentList,
+    scrollTo,
+    containerProps,
+    wrapperProps,
+  };
+}
diff --git a/web/vue/src/composables/component/index.ts b/vue/toolkit/src/composables/debug/index.ts
similarity index 67%
rename from web/vue/src/composables/component/index.ts
rename to vue/toolkit/src/composables/debug/index.ts
index 85867cc..f2e4127 100644
--- a/web/vue/src/composables/component/index.ts
+++ b/vue/toolkit/src/composables/debug/index.ts
@@ -1,3 +1,2 @@
-export * from './unrefElement';
 export * from './useRenderCount';
 export * from './useRenderInfo';
diff --git a/vue/toolkit/src/composables/debug/useRenderCount/demo.vue b/vue/toolkit/src/composables/debug/useRenderCount/demo.vue
new file mode 100644
index 0000000..a34343b
--- /dev/null
+++ b/vue/toolkit/src/composables/debug/useRenderCount/demo.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useRenderCount } from './index';
+
+// Increments on mount and on every subsequent re-render of this component.
+const renderCount = useRenderCount();
+
+// Reactive state — touching any of these triggers a re-render, bumping the count.
+const message = ref('Edit me to force a re-render');
+const tint = ref(210);
+
+function nudgeTint() {
+  tint.value = (tint.value + 40) % 360;
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col items-center gap-2">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Render count</span>
+      <span
+        class="font-mono text-3xl font-bold tabular-nums text-(--fg) transition-colors"
+        :style="{ color: `hsl(${tint} 70% 55%)` }"
+      >{{ renderCount }}</span>
+      <span class="text-xs text-(--fg-subtle)">renders since mount</span>
+    </div>
+
+    <label class="flex flex-col gap-1">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Bound input</span>
+      <input
+        v-model="message"
+        type="text"
+        placeholder="Type to re-render…"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+    </label>
+
+    <p class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-sm text-(--fg)">
+      {{ message }}
+    </p>
+
+    <button
+      type="button"
+      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+      @click="nudgeTint"
+    >
+      Force re-render (shift color)
+    </button>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/debug/useRenderCount/index.test.ts b/vue/toolkit/src/composables/debug/useRenderCount/index.test.ts
new file mode 100644
index 0000000..a625980
--- /dev/null
+++ b/vue/toolkit/src/composables/debug/useRenderCount/index.test.ts
@@ -0,0 +1,75 @@
+import { describe, expect, it } from 'vitest';
+import { defineComponent, nextTick, ref } from 'vue';
+import { mount } from '@vue/test-utils';
+import { useRenderCount } from '.';
+
+const ComponentStub = defineComponent({
+  setup() {
+    const count = useRenderCount();
+    const visibleCount = ref(0);
+    const hiddenCount = ref(0);
+
+    return { count, visibleCount, hiddenCount };
+  },
+  template: `<div>{{ visibleCount }}</div>`,
+});
+
+describe(useRenderCount, () => {
+  it('return the number of times the component has been rendered', async () => {
+    const component = mount(ComponentStub);
+
+    // Initial render
+    expect(component.vm.count).toBe(1);
+
+    component.vm.hiddenCount = 1;
+    await nextTick();
+
+    // Will not trigger a render
+    expect(component.vm.count).toBe(1);
+    expect(component.text()).toBe('0');
+
+    component.vm.visibleCount++;
+    await nextTick();
+
+    // Will trigger a render
+    expect(component.vm.count).toBe(2);
+    expect(component.text()).toBe('1');
+
+    component.vm.visibleCount++;
+    component.vm.visibleCount++;
+    await nextTick();
+
+    // Will trigger a single render for both updates
+    expect(component.vm.count).toBe(3);
+    expect(component.text()).toBe('3');
+  });
+
+  it('can be used with a specific component instance', async () => {
+    const component = mount(ComponentStub);
+    const instance = component.vm.$;
+
+    const count = useRenderCount(instance);
+
+    // Initial render (should be zero because the component has already rendered on mount)
+    expect(count.value).toBe(0);
+
+    component.vm.hiddenCount = 1;
+    await nextTick();
+
+    // Will not trigger a render
+    expect(count.value).toBe(0);
+
+    component.vm.visibleCount++;
+    await nextTick();
+
+    // Will trigger a render
+    expect(count.value).toBe(1);
+
+    component.vm.visibleCount++;
+    component.vm.visibleCount++;
+    await nextTick();
+
+    // Will trigger a single render for both updates
+    expect(count.value).toBe(2);
+  });
+});
diff --git a/web/vue/src/composables/component/useRenderCount/index.ts b/vue/toolkit/src/composables/debug/useRenderCount/index.ts
similarity index 75%
rename from web/vue/src/composables/component/useRenderCount/index.ts
rename to vue/toolkit/src/composables/debug/useRenderCount/index.ts
index 3d4bf15..759e366 100644
--- a/web/vue/src/composables/component/useRenderCount/index.ts
+++ b/vue/toolkit/src/composables/debug/useRenderCount/index.ts
@@ -5,26 +5,26 @@ import { getLifeCycleTarger } from '@/utils';
 
 /**
  * @name useRenderCount
- * @category Component
+ * @category Debug
  * @description Returns the number of times the component has been rendered into the DOM
- * 
+ *
  * @param {ComponentInternalInstance} [instance] The component instance to track the render count for
  * @returns {Readonly<Ref<number>>} The number of times the component has been rendered
- * 
+ *
  * @example
  * const count = useRenderCount();
- * 
+ *
  * @example
  * const count = useRenderCount(getCurrentInstance());
- * 
+ *
  * @since 0.0.1
  */
 export function useRenderCount(instance?: ComponentInternalInstance) {
-    const { count, increment } = useCounter(0);
-    const target = getLifeCycleTarger(instance);
+  const { count, increment } = useCounter(0);
+  const target = getLifeCycleTarger(instance);
 
-    onMounted(increment, target);
-    onUpdated(increment, target);
+  onMounted(increment, target);
+  onUpdated(increment, target);
 
-    return readonly(count);
-}
\ No newline at end of file
+  return readonly(count);
+}
diff --git a/vue/toolkit/src/composables/debug/useRenderInfo/demo.vue b/vue/toolkit/src/composables/debug/useRenderInfo/demo.vue
new file mode 100644
index 0000000..ff3c78c
--- /dev/null
+++ b/vue/toolkit/src/composables/debug/useRenderInfo/demo.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useRenderInfo } from './index';
+
+// `count` and `duration` are reactive refs; `component` and `lastRendered`
+// are captured once at setup (component name/uid and the mount timestamp).
+const { component, count, duration, lastRendered } = useRenderInfo();
+
+// Reactive state — mutating it triggers re-renders that update count + duration.
+const rows = ref(40);
+const grid = computed(() => Array.from({ length: rows.value }, (_, i) => i));
+
+const mountedAt = new Date(lastRendered).toLocaleTimeString();
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Render info</span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        {{ component ?? 'anonymous' }}
+      </span>
+    </div>
+
+    <div class="grid grid-cols-2 gap-2">
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
+        <div class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ count }}</div>
+        <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">renders</div>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
+        <div class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ duration.toFixed(2) }}</div>
+        <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">last render ms</div>
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums flex items-center justify-between">
+      <span class="text-(--fg-muted)">mounted at</span>
+      <span>{{ mountedAt }}</span>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="rows">Render workload</label>
+        <span class="font-mono text-xs tabular-nums text-(--fg-muted)">{{ rows }} cells</span>
+      </div>
+      <input
+        id="rows"
+        v-model.number="rows"
+        type="range"
+        min="1"
+        max="400"
+        step="1"
+        class="w-full accent-(--accent) cursor-pointer"
+      >
+      <p class="text-xs text-(--fg-subtle)">Drag to re-render a larger DOM subtree and watch the render duration climb.</p>
+    </div>
+
+    <div class="grid grid-cols-10 gap-1">
+      <span
+        v-for="i in grid"
+        :key="i"
+        class="aspect-square rounded-sm bg-(--accent-subtle)"
+      />
+    </div>
+  </div>
+</template>
diff --git a/web/vue/src/composables/component/useRenderInfo/index.test.ts b/vue/toolkit/src/composables/debug/useRenderInfo/index.test.ts
similarity index 88%
rename from web/vue/src/composables/component/useRenderInfo/index.test.ts
rename to vue/toolkit/src/composables/debug/useRenderInfo/index.test.ts
index 87f3486..d201e4b 100644
--- a/web/vue/src/composables/component/useRenderInfo/index.test.ts
+++ b/vue/toolkit/src/composables/debug/useRenderInfo/index.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { useRenderInfo } from '.';
 import { defineComponent, nextTick, ref } from 'vue';
 import { mount } from '@vue/test-utils';
@@ -6,22 +6,22 @@ import { mount } from '@vue/test-utils';
 const NamedComponentStub = defineComponent({
   name: 'ComponentStub',
   setup() {
-      const info = useRenderInfo();
-      const visibleCount = ref(0);
-      const hiddenCount = ref(0);
+    const info = useRenderInfo();
+    const visibleCount = ref(0);
+    const hiddenCount = ref(0);
 
-      return { info, visibleCount, hiddenCount };
+    return { info, visibleCount, hiddenCount };
   },
   template: `<div>{{ visibleCount }}</div>`,
 });
 
 const UnnamedComponentStub = defineComponent({
   setup() {
-      const info = useRenderInfo();
-      const visibleCount = ref(0);
-      const hiddenCount = ref(0);
+    const info = useRenderInfo();
+    const visibleCount = ref(0);
+    const hiddenCount = ref(0);
 
-      return { info, visibleCount, hiddenCount };
+    return { info, visibleCount, hiddenCount };
   },
   template: `<div>{{ visibleCount }}</div>`,
 });
@@ -97,4 +97,4 @@ describe(useRenderInfo, () => {
     expect(info.duration.value).not.toBe(duration);
     expect(info.lastRendered).toBeGreaterThan(0);
   });
-});
\ No newline at end of file
+});
diff --git a/web/vue/src/composables/component/useRenderInfo/index.ts b/vue/toolkit/src/composables/debug/useRenderInfo/index.ts
similarity index 53%
rename from web/vue/src/composables/component/useRenderInfo/index.ts
rename to vue/toolkit/src/composables/debug/useRenderInfo/index.ts
index 6253f5f..0092178 100644
--- a/web/vue/src/composables/component/useRenderInfo/index.ts
+++ b/vue/toolkit/src/composables/debug/useRenderInfo/index.ts
@@ -6,41 +6,43 @@ import { getLifeCycleTarger } from '@/utils';
 
 /**
  * @name useRenderInfo
- * @category Component
+ * @category Debug
  * @description Returns information about the component's render count and the last time it was rendered
- * 
+ *
  * @param {ComponentInternalInstance} [instance] The component instance to track the render count for
- * 
- * 
+ *
+ *
  * @example
  * const { component, count, duration, lastRendered } = useRenderInfo();
- * 
+ *
  * @example
  * const { component, count, duration, lastRendered } = useRenderInfo(getCurrentInstance());
- * 
+ *
  * @since 0.0.1
  */
 export function useRenderInfo(instance?: ComponentInternalInstance) {
-    const target = getLifeCycleTarger(instance);
-    const duration = ref(0);
-    let renderStartTime = 0;
+  const target = getLifeCycleTarger(instance);
+  const duration = ref(0);
+  let renderStartTime = 0;
 
-    const startMark = () => { renderStartTime = performance.now(); };
-    const endMark = () => {
-        duration.value = Math.max(performance.now() - renderStartTime, 0);
-        renderStartTime = 0;
-    };
+  const startMark = () => {
+    renderStartTime = performance.now();
+  };
+  const endMark = () => {
+    duration.value = Math.max(performance.now() - renderStartTime, 0);
+    renderStartTime = 0;
+  };
 
-    onBeforeMount(startMark, target);
-    onMounted(endMark, target);
+  onBeforeMount(startMark, target);
+  onMounted(endMark, target);
 
-    onBeforeUpdate(startMark, target);
-    onUpdated(endMark, target);
+  onBeforeUpdate(startMark, target);
+  onUpdated(endMark, target);
 
-    return {
-        component: target?.type.name ?? target?.uid,
-        count: useRenderCount(instance),
-        duration: readonly(duration),
-        lastRendered: timestamp(),
-    };
-}
\ No newline at end of file
+  return {
+    component: target?.type.name ?? target?.uid,
+    count: useRenderCount(instance),
+    duration: readonly(duration),
+    lastRendered: timestamp(),
+  };
+}
diff --git a/vue/toolkit/src/composables/elements/index.ts b/vue/toolkit/src/composables/elements/index.ts
new file mode 100644
index 0000000..dcc95f2
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/index.ts
@@ -0,0 +1,17 @@
+export * from './onElementRemoval';
+export * from './useActiveElement';
+export * from './useDocumentReadyState';
+export * from './useDocumentVisibility';
+export * from './useDraggable';
+export * from './useDropZone';
+export * from './useElementBounding';
+export * from './useElementSize';
+export * from './useElementVisibility';
+export * from './useFocusGuard';
+export * from './useIntersectionObserver';
+export * from './useMutationObserver';
+export * from './useParentElement';
+export * from './useResizeObserver';
+export * from './useWindowFocus';
+export * from './useWindowScroll';
+export * from './useWindowSize';
diff --git a/vue/toolkit/src/composables/elements/onElementRemoval/demo.vue b/vue/toolkit/src/composables/elements/onElementRemoval/demo.vue
new file mode 100644
index 0000000..eaa0a87
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/onElementRemoval/demo.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue';
+import { onElementRemoval } from './index';
+
+const watched = useTemplateRef<HTMLDivElement>('watched');
+
+const mounted = ref(true);
+const removals = ref(0);
+const lastEvent = ref<string | null>(null);
+
+// Fires whenever the watched element (or any ancestor containing it) leaves the DOM.
+onElementRemoval(watched, (records) => {
+  removals.value++;
+  lastEvent.value = new Date().toLocaleTimeString();
+  // `records` are the raw MutationRecords describing the removal.
+  void records;
+});
+
+function toggle() {
+  mounted.value = !mounted.value;
+}
+
+function reset() {
+  removals.value = 0;
+  lastEvent.value = null;
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">DOM removal watcher</span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+      >
+        <span class="size-1.5 rounded-full transition" :class="mounted ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+        {{ mounted ? 'In DOM' : 'Removed' }}
+      </span>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 min-h-28 flex items-center justify-center">
+      <div
+        v-if="mounted"
+        ref="watched"
+        class="flex w-full flex-col items-center gap-1 rounded-lg border border-(--accent) bg-(--accent-subtle) px-4 py-6 text-center transition"
+      >
+        <span class="text-sm font-medium text-(--accent-text)">Watched element</span>
+        <span class="text-xs text-(--fg-muted)">Remove me and the callback fires</span>
+      </div>
+      <span v-else class="text-sm text-(--fg-subtle)">Element detached from the document</span>
+    </div>
+
+    <div class="grid grid-cols-2 gap-2">
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
+        <div class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ removals }}</div>
+        <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">removals fired</div>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center flex flex-col justify-center">
+        <div class="font-mono text-sm font-medium tabular-nums text-(--fg)">{{ lastEvent ?? '—' }}</div>
+        <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">last fired</div>
+      </div>
+    </div>
+
+    <div class="flex gap-2">
+      <button
+        type="button"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="toggle"
+      >
+        {{ mounted ? 'Remove element' : 'Mount element' }}
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="removals === 0"
+        @click="reset"
+      >
+        Reset
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/elements/onElementRemoval/index.test.ts b/vue/toolkit/src/composables/elements/onElementRemoval/index.test.ts
new file mode 100644
index 0000000..f55a9e4
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/onElementRemoval/index.test.ts
@@ -0,0 +1,157 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, ref } from 'vue';
+import { onElementRemoval } from '.';
+
+let instances: Array<{ cb: MutationCallback; observe: ReturnType<typeof vi.fn>; disconnect: ReturnType<typeof vi.fn> }> = [];
+
+class StubMutationObserver {
+  observe = vi.fn();
+  disconnect = vi.fn();
+  takeRecords = vi.fn(() => []);
+  cb: MutationCallback;
+  constructor(cb: MutationCallback) {
+    this.cb = cb;
+    instances.push(this);
+  }
+}
+
+function fireRemoval(index: number, removedNodes: Node[]): void {
+  const record = { removedNodes } as unknown as MutationRecord;
+  instances[index]!.cb([record], instances[index] as unknown as MutationObserver);
+}
+
+describe(onElementRemoval, () => {
+  beforeEach(() => {
+    instances = [];
+    vi.stubGlobal('MutationObserver', StubMutationObserver);
+  });
+  afterEach(() => vi.unstubAllGlobals());
+
+  it('observes the document subtree once a target is available', () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    scope.run(() => onElementRemoval(ref(el), vi.fn()));
+
+    expect(instances).toHaveLength(1);
+    expect(instances[0]!.observe).toHaveBeenCalledWith(
+      document.documentElement,
+      { childList: true, subtree: true },
+    );
+    scope.stop();
+  });
+
+  it('fires the callback when the element itself is removed', () => {
+    const el = document.createElement('div');
+    const callback = vi.fn();
+    const scope = effectScope();
+    scope.run(() => onElementRemoval(el, callback));
+
+    fireRemoval(0, [el]);
+    expect(callback).toHaveBeenCalledTimes(1);
+    scope.stop();
+  });
+
+  it('fires when an ancestor containing the element is removed', () => {
+    const parent = document.createElement('div');
+    const el = document.createElement('span');
+    parent.appendChild(el);
+    const callback = vi.fn();
+    const scope = effectScope();
+    scope.run(() => onElementRemoval(el, callback));
+
+    fireRemoval(0, [parent]);
+    expect(callback).toHaveBeenCalledTimes(1);
+    expect(callback).toHaveBeenCalledWith([{ removedNodes: [parent] }]);
+    scope.stop();
+  });
+
+  it('does not fire when an unrelated node is removed', () => {
+    const el = document.createElement('div');
+    const other = document.createElement('div');
+    const callback = vi.fn();
+    const scope = effectScope();
+    scope.run(() => onElementRemoval(el, callback));
+
+    fireRemoval(0, [other]);
+    expect(callback).not.toHaveBeenCalled();
+    scope.stop();
+  });
+
+  it('does not observe for a nullish target', () => {
+    const callback = vi.fn();
+    const scope = effectScope();
+    scope.run(() => onElementRemoval(ref(null), callback));
+
+    expect(instances).toHaveLength(0);
+    scope.stop();
+  });
+
+  it('re-observes when a reactive target appears, and tears down the old observer', async () => {
+    const target = ref<HTMLElement | null>(null);
+    const scope = effectScope();
+    scope.run(() => onElementRemoval(target, vi.fn(), { flush: 'sync' }));
+
+    expect(instances).toHaveLength(0);
+
+    target.value = document.createElement('div');
+    await nextTick();
+    expect(instances).toHaveLength(1);
+
+    target.value = document.createElement('span');
+    await nextTick();
+    expect(instances).toHaveLength(2);
+    expect(instances[0]!.disconnect).toHaveBeenCalled();
+    scope.stop();
+  });
+
+  it('stop() disconnects and prevents further callbacks', () => {
+    const el = document.createElement('div');
+    const callback = vi.fn();
+    const scope = effectScope();
+    let stop: () => void;
+    scope.run(() => {
+      stop = onElementRemoval(el, callback);
+    });
+
+    stop!();
+    expect(instances[0]!.disconnect).toHaveBeenCalled();
+    scope.stop();
+  });
+
+  it('disposes the observer when the scope stops', () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    scope.run(() => onElementRemoval(el, vi.fn()));
+
+    expect(instances).toHaveLength(1);
+    scope.stop();
+    expect(instances[0]!.disconnect).toHaveBeenCalled();
+  });
+
+  it('supports post flush timing', async () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    scope.run(() => onElementRemoval(ref(el), vi.fn(), { flush: 'post' }));
+
+    await nextTick();
+    expect(instances).toHaveLength(1);
+    scope.stop();
+  });
+
+  it('returns a no-op and does not observe when document is unavailable (SSR)', () => {
+    const el = document.createElement('div');
+    const callback = vi.fn();
+    const scope = effectScope();
+    let stop: () => void;
+    scope.run(() => {
+      stop = onElementRemoval(el, callback, {
+        window: { document: undefined } as unknown as Window & typeof globalThis,
+      });
+    });
+
+    expect(instances).toHaveLength(0);
+    expect(callback).not.toHaveBeenCalled();
+    expect(() => stop!()).not.toThrow();
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/elements/onElementRemoval/index.ts b/vue/toolkit/src/composables/elements/onElementRemoval/index.ts
new file mode 100644
index 0000000..23d1ff3
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/onElementRemoval/index.ts
@@ -0,0 +1,99 @@
+import { watch } from 'vue';
+import { noop } from '@robonen/stdlib';
+import type { VoidFunction } from '@robonen/stdlib';
+import type { ConfigurableDocument, ConfigurableFlush, ConfigurableWindow } from '@/types';
+import { defaultWindow } from '@/types';
+import type { MaybeComputedElementRef } from '@/composables/component/unrefElement';
+import { unrefElement } from '@/composables/component/unrefElement';
+import { useMutationObserver } from '@/composables/elements/useMutationObserver';
+
+export interface OnElementRemovalOptions extends ConfigurableWindow, ConfigurableDocument, ConfigurableFlush {}
+
+export type OnElementRemovalCallback = (mutationRecords: MutationRecord[]) => void;
+
+export type OnElementRemovalReturn = VoidFunction;
+
+/**
+ * @name onElementRemoval
+ * @category Elements
+ * @description Fire a callback when the target element — or any ancestor containing it — is
+ * removed from the DOM. Backed by a single `childList`/`subtree` `MutationObserver` on the
+ * element's owning document, so it also catches removal of a parent further up the tree.
+ *
+ * @param {MaybeComputedElementRef} target Element (or ref/getter) to watch for removal
+ * @param {OnElementRemovalCallback} callback Invoked with the mutation records that removed the element
+ * @param {OnElementRemovalOptions} [options={}] `window`, `document`, and watcher `flush` timing
+ * @returns {OnElementRemovalReturn} Stop handle that tears down the watcher and observer
+ *
+ * @example
+ * const el = useTemplateRef<HTMLElement>('el');
+ * onElementRemoval(el, () => console.log('gone'));
+ *
+ * @example
+ * const stop = onElementRemoval(el, (records) => report(records), { flush: 'post' });
+ *
+ * @since 0.0.15
+ */
+export function onElementRemoval(
+  target: MaybeComputedElementRef,
+  callback: OnElementRemovalCallback,
+  options: OnElementRemovalOptions = {},
+): OnElementRemovalReturn {
+  const {
+    window = defaultWindow,
+    document = window?.document,
+    flush = 'sync',
+  } = options;
+
+  // SSR
+  if (!window || !document)
+    return noop;
+
+  let stopObserver: VoidFunction | undefined;
+
+  const disconnect = () => {
+    stopObserver?.();
+    stopObserver = undefined;
+  };
+
+  const stopWatch = watch(
+    () => unrefElement(target),
+    (el) => {
+      disconnect();
+
+      if (!el)
+        return;
+
+      // Observe the element's owning document so removal of any ancestor is caught,
+      // and so the correct root is used for elements inside iframes / shadow trees.
+      const root = el.ownerDocument ?? document;
+
+      const { stop } = useMutationObserver(
+        root.documentElement ?? (root as unknown as Element),
+        (mutationRecords) => {
+          const removed = mutationRecords.some(record =>
+            Array.prototype.some.call(record.removedNodes, (node: Node) => node === el || node.contains(el)),
+          );
+
+          if (removed)
+            callback(mutationRecords);
+        },
+        {
+          window,
+          childList: true,
+          subtree: true,
+        },
+      );
+
+      stopObserver = stop;
+    },
+    { immediate: true, flush },
+  );
+
+  const stop: VoidFunction = () => {
+    stopWatch();
+    disconnect();
+  };
+
+  return stop;
+}
diff --git a/vue/toolkit/src/composables/elements/useActiveElement/demo.vue b/vue/toolkit/src/composables/elements/useActiveElement/demo.vue
new file mode 100644
index 0000000..8f136c2
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useActiveElement/demo.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useActiveElement } from './index';
+
+const activeElement = useActiveElement();
+
+const fields = [
+  { id: 'name', label: 'Full name', placeholder: 'Ada Lovelace', type: 'text' },
+  { id: 'email', label: 'Email', placeholder: 'ada@analytical.engine', type: 'email' },
+  { id: 'city', label: 'City', placeholder: 'London', type: 'text' },
+];
+
+const activeId = computed(() => activeElement.value?.id || null);
+const activeTag = computed(() => activeElement.value?.tagName.toLowerCase() ?? null);
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="space-y-3">
+      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Focus a field
+      </p>
+      <div
+        v-for="field in fields"
+        :key="field.id"
+        class="space-y-1"
+      >
+        <label
+          :for="field.id"
+          class="text-sm font-medium text-(--fg-muted)"
+        >{{ field.label }}</label>
+        <input
+          :id="field.id"
+          :type="field.type"
+          :placeholder="field.placeholder"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+      </div>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+      >
+        A focusable button
+      </button>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+      <div class="flex items-center justify-between gap-3">
+        <span class="text-(--fg-subtle)">activeElement</span>
+        <span
+          v-if="activeTag"
+          class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-elevated) px-2 py-0.5 text-xs font-medium text-(--accent-text)"
+        >
+          &lt;{{ activeTag }}&gt;
+        </span>
+        <span
+          v-else
+          class="text-xs text-(--fg-subtle)"
+        >none</span>
+      </div>
+      <div class="mt-2 flex items-center justify-between gap-3">
+        <span class="text-(--fg-subtle)">id</span>
+        <span class="truncate">{{ activeId ?? '—' }}</span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/elements/useActiveElement/index.test.ts b/vue/toolkit/src/composables/elements/useActiveElement/index.test.ts
new file mode 100644
index 0000000..2fbdd6e
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useActiveElement/index.test.ts
@@ -0,0 +1,207 @@
+import { describe, expect, it } from 'vitest';
+import { effectScope, isReadonly, nextTick } from 'vue';
+import { useActiveElement } from '.';
+
+describe(useActiveElement, () => {
+  it('tracks the focused element', async () => {
+    const input = document.createElement('input');
+    document.body.appendChild(input);
+
+    const scope = effectScope();
+    let active: ReturnType<typeof useActiveElement>;
+    scope.run(() => {
+      active = useActiveElement();
+    });
+
+    input.focus();
+    input.dispatchEvent(new FocusEvent('focusin', { bubbles: true }));
+    await nextTick();
+
+    expect(active!.value).toBe(input);
+
+    scope.stop();
+    input.remove();
+  });
+
+  it('returns a shallow ref (not readonly)', () => {
+    const scope = effectScope();
+    let active: ReturnType<typeof useActiveElement>;
+    scope.run(() => {
+      active = useActiveElement();
+    });
+
+    // shallowRef is writable internally; ensure we did not return a readonly wrapper
+    expect(isReadonly(active!)).toBeFalsy();
+
+    scope.stop();
+  });
+
+  it('reflects the active element on creation', () => {
+    const input = document.createElement('input');
+    document.body.appendChild(input);
+    input.focus();
+
+    const scope = effectScope();
+    let active: ReturnType<typeof useActiveElement>;
+    scope.run(() => {
+      active = useActiveElement();
+    });
+
+    // initial trigger should capture the already-focused element synchronously
+    expect(active!.value).toBe(input);
+
+    scope.stop();
+    input.remove();
+  });
+
+  it('traverses open shadow roots when deep', async () => {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const shadow = host.attachShadow({ mode: 'open' });
+    const inner = document.createElement('input');
+    shadow.appendChild(inner);
+
+    const scope = effectScope();
+    let active: ReturnType<typeof useActiveElement>;
+    scope.run(() => {
+      active = useActiveElement();
+    });
+
+    inner.focus();
+    document.dispatchEvent(new FocusEvent('focusin', { bubbles: true }));
+    await nextTick();
+
+    expect(active!.value).toBe(inner);
+
+    scope.stop();
+    host.remove();
+  });
+
+  it('does not descend into shadow roots when deep is false', async () => {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const shadow = host.attachShadow({ mode: 'open' });
+    const inner = document.createElement('input');
+    shadow.appendChild(inner);
+
+    const scope = effectScope();
+    let active: ReturnType<typeof useActiveElement>;
+    scope.run(() => {
+      active = useActiveElement({ deep: false });
+    });
+
+    inner.focus();
+    document.dispatchEvent(new FocusEvent('focusin', { bubbles: true }));
+    await nextTick();
+
+    // with deep:false we stay at the shadow host instead of piercing it
+    expect(active!.value).toBe(host);
+
+    scope.stop();
+    host.remove();
+  });
+
+  it('resets when focus leaves the window (blur with no relatedTarget)', async () => {
+    const input = document.createElement('input');
+    document.body.appendChild(input);
+
+    const scope = effectScope();
+    let active: ReturnType<typeof useActiveElement>;
+    scope.run(() => {
+      active = useActiveElement();
+    });
+
+    input.focus();
+    globalThis.dispatchEvent(new FocusEvent('focus'));
+    await nextTick();
+    expect(active!.value).toBe(input);
+
+    // simulate focus leaving the document entirely
+    input.blur();
+    globalThis.dispatchEvent(new FocusEvent('blur', { relatedTarget: null }));
+    await nextTick();
+    expect(active!.value).toBe(document.body);
+
+    scope.stop();
+    input.remove();
+  });
+
+  it('ignores window blur when focus moves to another element (relatedTarget set)', async () => {
+    const input = document.createElement('input');
+    document.body.appendChild(input);
+
+    const scope = effectScope();
+    let active: ReturnType<typeof useActiveElement>;
+    scope.run(() => {
+      active = useActiveElement();
+    });
+
+    input.focus();
+    await nextTick();
+    expect(active!.value).toBe(input);
+
+    // blur carrying a relatedTarget means focus stayed within the page -> ignore
+    const other = document.createElement('button');
+    globalThis.dispatchEvent(new FocusEvent('blur', { relatedTarget: other }));
+    await nextTick();
+    expect(active!.value).toBe(input);
+
+    scope.stop();
+    input.remove();
+  });
+
+  it('accepts a custom document via options', () => {
+    const fakeEl = document.createElement('textarea');
+    const fakeDocument = { activeElement: fakeEl } as unknown as Document;
+
+    const scope = effectScope();
+    let active: ReturnType<typeof useActiveElement>;
+    scope.run(() => {
+      active = useActiveElement({ document: fakeDocument });
+    });
+
+    expect(active!.value).toBe(fakeEl);
+
+    scope.stop();
+  });
+
+  it('does not throw and stays undefined when document has no active element', () => {
+    // emulate an environment (e.g. SSR / detached document) with no focus
+    const emptyDocument = { activeElement: null } as unknown as Document;
+
+    const scope = effectScope();
+    let active: ReturnType<typeof useActiveElement>;
+    scope.run(() => {
+      // pass a real window so listeners attach without error, but a doc with no focus
+      active = useActiveElement({ document: emptyDocument });
+    });
+
+    expect(active!.value).toBeNull();
+
+    scope.stop();
+  });
+
+  it('re-evaluates when the active element is removed (triggerOnRemoval)', async () => {
+    const input = document.createElement('input');
+    document.body.appendChild(input);
+
+    const scope = effectScope();
+    let active: ReturnType<typeof useActiveElement>;
+    scope.run(() => {
+      active = useActiveElement({ triggerOnRemoval: true });
+    });
+
+    input.focus();
+    await nextTick();
+    expect(active!.value).toBe(input);
+
+    input.remove();
+    // MutationObserver delivery is async; wait a microtask-ish tick
+    await new Promise(resolve => setTimeout(resolve, 0));
+    await nextTick();
+
+    expect(active!.value).toBe(document.body);
+
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/elements/useActiveElement/index.ts b/vue/toolkit/src/composables/elements/useActiveElement/index.ts
new file mode 100644
index 0000000..8579b1a
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useActiveElement/index.ts
@@ -0,0 +1,111 @@
+import { shallowRef } from 'vue';
+import type { ShallowRef } from 'vue';
+import { defaultWindow } from '@/types';
+import type { ConfigurableDocument, ConfigurableWindow } from '@/types';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import { useMutationObserver } from '@/composables/elements/useMutationObserver';
+
+export interface UseActiveElementOptions extends ConfigurableWindow, ConfigurableDocument {
+  /**
+   * Search for the active element inside open shadow roots
+   *
+   * @default true
+   */
+  deep?: boolean;
+  /**
+   * Re-evaluate the active element when it is removed from the DOM.
+   * Uses a `MutationObserver` under the hood, so it is only enabled on demand.
+   *
+   * @default false
+   */
+  triggerOnRemoval?: boolean;
+}
+
+export type UseActiveElementReturn<T extends HTMLElement = HTMLElement> = ShallowRef<T | null | undefined>;
+
+/**
+ * @name useActiveElement
+ * @category Elements
+ * @description Reactive `document.activeElement`, traversing open shadow roots.
+ *
+ * @param {UseActiveElementOptions} [options={}] Options
+ * @returns {UseActiveElementReturn<T>} The currently focused element
+ *
+ * @example
+ * const active = useActiveElement();
+ *
+ * @example
+ * // keep tracking even if the focused node is detached from the DOM
+ * const active = useActiveElement({ triggerOnRemoval: true });
+ *
+ * @since 0.0.15
+ */
+export function useActiveElement<T extends HTMLElement>(
+  options: UseActiveElementOptions = {},
+): UseActiveElementReturn<T> {
+  const {
+    window = defaultWindow,
+    deep = true,
+    triggerOnRemoval = false,
+  } = options;
+
+  const document = options.document ?? window?.document;
+
+  const getDeepActiveElement = (): Element | null | undefined => {
+    let element = document?.activeElement;
+
+    if (deep) {
+      while (element?.shadowRoot)
+        element = element.shadowRoot.activeElement;
+    }
+
+    return element;
+  };
+
+  const activeElement = shallowRef<T | null | undefined>();
+
+  const trigger = (): void => {
+    activeElement.value = getDeepActiveElement() as T | null | undefined;
+  };
+
+  if (window) {
+    const listenerOptions = { capture: true, passive: true } as const;
+
+    // `focus` (capture) catches focus moving onto any element, including those
+    // inside open shadow roots; `blur` with no `relatedTarget` resets the ref
+    // when focus leaves the document/window entirely.
+    useEventListener(
+      window,
+      'blur',
+      (event: FocusEvent) => {
+        if (event.relatedTarget !== null)
+          return;
+
+        trigger();
+      },
+      listenerOptions,
+    );
+    useEventListener(window, 'focus', trigger, listenerOptions);
+  }
+
+  if (triggerOnRemoval && document) {
+    useMutationObserver(
+      () => [document.body],
+      (mutations) => {
+        for (const mutation of mutations) {
+          for (const removed of mutation.removedNodes) {
+            if (removed === activeElement.value || removed.contains(activeElement.value as Node)) {
+              trigger();
+              return;
+            }
+          }
+        }
+      },
+      { window, childList: true, subtree: true },
+    );
+  }
+
+  trigger();
+
+  return activeElement;
+}
diff --git a/vue/toolkit/src/composables/elements/useDocumentReadyState/demo.vue b/vue/toolkit/src/composables/elements/useDocumentReadyState/demo.vue
new file mode 100644
index 0000000..ebd88f7
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useDocumentReadyState/demo.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useDocumentReadyState } from './index';
+
+const readyState = useDocumentReadyState();
+
+const stages: { state: DocumentReadyState; label: string; hint: string }[] = [
+  { state: 'loading', label: 'loading', hint: 'Parsing the document' },
+  { state: 'interactive', label: 'interactive', hint: 'DOM ready, assets pending' },
+  { state: 'complete', label: 'complete', hint: 'Everything loaded' },
+];
+
+const activeIndex = computed(() => stages.findIndex(s => s.state === readyState.value));
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        document.readyState
+      </span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-emerald-500/30 bg-emerald-500/10 px-2 py-0.5 text-xs font-medium text-emerald-600 dark:text-emerald-400">
+        <span class="size-1.5 rounded-full bg-emerald-500" />
+        {{ readyState }}
+      </span>
+    </div>
+
+    <ol class="space-y-2">
+      <li
+        v-for="(stage, i) in stages"
+        :key="stage.state"
+        class="flex items-center gap-3 rounded-lg border p-3 transition"
+        :class="i <= activeIndex
+          ? 'border-(--accent) bg-(--accent-subtle)'
+          : 'border-(--border) bg-(--bg-elevated)'"
+      >
+        <span
+          class="flex size-6 shrink-0 items-center justify-center rounded-full font-mono text-xs font-bold tabular-nums transition"
+          :class="i < activeIndex
+            ? 'bg-(--accent) text-(--accent-fg)'
+            : i === activeIndex
+              ? 'bg-(--accent) text-(--accent-fg) ring-4 ring-(--ring)'
+              : 'bg-(--bg-inset) text-(--fg-subtle)'"
+        >
+          {{ i + 1 }}
+        </span>
+        <div class="min-w-0">
+          <p class="font-mono text-sm font-medium text-(--fg)">
+            {{ stage.label }}
+          </p>
+          <p class="text-xs text-(--fg-subtle)">
+            {{ stage.hint }}
+          </p>
+        </div>
+      </li>
+    </ol>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/elements/useDocumentReadyState/index.test.ts b/vue/toolkit/src/composables/elements/useDocumentReadyState/index.test.ts
new file mode 100644
index 0000000..2973c45
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useDocumentReadyState/index.test.ts
@@ -0,0 +1,143 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick } from 'vue';
+import { useDocumentReadyState } from '.';
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+  Object.defineProperty(document, 'readyState', { value: 'complete', configurable: true });
+});
+
+function setReadyState(state: DocumentReadyState) {
+  Object.defineProperty(document, 'readyState', { value: state, configurable: true });
+  document.dispatchEvent(new Event('readystatechange'));
+}
+
+describe(useDocumentReadyState, () => {
+  it('reads the current ready state', () => {
+    const scope = effectScope();
+    let readyState: ReturnType<typeof useDocumentReadyState>;
+    scope.run(() => {
+      readyState = useDocumentReadyState();
+    });
+
+    expect(readyState!.value).toBe('complete');
+    scope.stop();
+  });
+
+  it('reflects a non-default initial state at setup time', () => {
+    Object.defineProperty(document, 'readyState', { value: 'loading', configurable: true });
+
+    const scope = effectScope();
+    let readyState: ReturnType<typeof useDocumentReadyState>;
+    scope.run(() => {
+      readyState = useDocumentReadyState();
+    });
+
+    expect(readyState!.value).toBe('loading');
+    scope.stop();
+  });
+
+  it('updates on readystatechange', async () => {
+    Object.defineProperty(document, 'readyState', { value: 'loading', configurable: true });
+
+    const scope = effectScope();
+    let readyState: ReturnType<typeof useDocumentReadyState>;
+    scope.run(() => {
+      readyState = useDocumentReadyState();
+    });
+
+    expect(readyState!.value).toBe('loading');
+
+    setReadyState('interactive');
+    await nextTick();
+    expect(readyState!.value).toBe('interactive');
+
+    setReadyState('complete');
+    await nextTick();
+    expect(readyState!.value).toBe('complete');
+
+    scope.stop();
+  });
+
+  it('invokes onChange with new state, previous state, and the event', async () => {
+    Object.defineProperty(document, 'readyState', { value: 'loading', configurable: true });
+
+    const onChange = vi.fn();
+    const scope = effectScope();
+    scope.run(() => {
+      useDocumentReadyState({ onChange });
+    });
+
+    setReadyState('interactive');
+    await nextTick();
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    const [state, previous, event] = onChange.mock.calls[0]!;
+    expect(state).toBe('interactive');
+    expect(previous).toBe('loading');
+    expect(event).toBeInstanceOf(Event);
+
+    setReadyState('complete');
+    await nextTick();
+
+    expect(onChange).toHaveBeenCalledTimes(2);
+    expect(onChange.mock.calls[1]!.slice(0, 2)).toEqual(['complete', 'interactive']);
+    scope.stop();
+  });
+
+  it('does not update or fire onChange when the state is unchanged', async () => {
+    const onChange = vi.fn();
+    const scope = effectScope();
+    let readyState: ReturnType<typeof useDocumentReadyState>;
+    scope.run(() => {
+      readyState = useDocumentReadyState({ onChange });
+    });
+
+    // readyState is already 'complete'; dispatching with no real change is a no-op
+    document.dispatchEvent(new Event('readystatechange'));
+    await nextTick();
+
+    expect(onChange).not.toHaveBeenCalled();
+    expect(readyState!.value).toBe('complete');
+    scope.stop();
+  });
+
+  it('is SSR-safe and returns "loading" without a document', () => {
+    // Passing `document: undefined` resolves to the default document, so to exercise the
+    // no-document branch we cast a falsy value that bypasses the default-parameter logic.
+    const scope = effectScope();
+    let readyState: ReturnType<typeof useDocumentReadyState>;
+    scope.run(() => {
+      readyState = useDocumentReadyState({ document: null as unknown as Document });
+    });
+
+    expect(readyState!.value).toBe('loading');
+    scope.stop();
+  });
+
+  it('accepts a custom document instance', async () => {
+    const onChange = vi.fn();
+    let listener: ((event: Event) => void) | undefined;
+    const customDoc = {
+      readyState: 'loading' as DocumentReadyState,
+      addEventListener: (_type: string, cb: (event: Event) => void) => { listener = cb; },
+      removeEventListener: vi.fn(),
+    } as unknown as Document;
+
+    const scope = effectScope();
+    let readyState: ReturnType<typeof useDocumentReadyState>;
+    scope.run(() => {
+      readyState = useDocumentReadyState({ document: customDoc, onChange });
+    });
+
+    expect(readyState!.value).toBe('loading');
+
+    (customDoc as { readyState: DocumentReadyState }).readyState = 'complete';
+    listener?.(new Event('readystatechange'));
+    await nextTick();
+
+    expect(readyState!.value).toBe('complete');
+    expect(onChange).toHaveBeenCalledWith('complete', 'loading', expect.any(Event));
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/elements/useDocumentReadyState/index.ts b/vue/toolkit/src/composables/elements/useDocumentReadyState/index.ts
new file mode 100644
index 0000000..4a122c0
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useDocumentReadyState/index.ts
@@ -0,0 +1,67 @@
+import { shallowRef } from 'vue';
+import type { ShallowRef } from 'vue';
+import { defaultDocument } from '@/types';
+import type { ConfigurableDocument } from '@/types';
+import { useEventListener } from '@/composables/browser/useEventListener';
+
+export interface UseDocumentReadyStateOptions extends ConfigurableDocument {
+  /**
+   * Called whenever `document.readyState` changes, receiving the new state,
+   * the previous state, and the originating `readystatechange` event.
+   *
+   * @default undefined
+   */
+  onChange?: (
+    state: DocumentReadyState,
+    previous: DocumentReadyState,
+    event: Event,
+  ) => void;
+}
+
+export type UseDocumentReadyStateReturn = ShallowRef<DocumentReadyState>;
+
+/**
+ * @name useDocumentReadyState
+ * @category Elements
+ * @description Reactive `document.readyState` (`loading` | `interactive` | `complete`), updated on `readystatechange`.
+ *
+ * @param {UseDocumentReadyStateOptions} [options={}] Options (custom `document`, `onChange` callback)
+ * @returns {UseDocumentReadyStateReturn} The current document ready state
+ *
+ * @example
+ * const readyState = useDocumentReadyState();
+ * watch(readyState, (state) => {
+ *   if (state === 'complete') runAfterLoad();
+ * });
+ *
+ * @example
+ * useDocumentReadyState({
+ *   onChange: (state) => {
+ *     if (state === 'interactive') hydrate();
+ *   },
+ * });
+ *
+ * @since 0.0.15
+ */
+export function useDocumentReadyState(
+  options: UseDocumentReadyStateOptions = {},
+): UseDocumentReadyStateReturn {
+  const { document = defaultDocument, onChange } = options;
+
+  const readyState = shallowRef<DocumentReadyState>(document?.readyState ?? 'loading');
+
+  if (document) {
+    useEventListener(document, 'readystatechange', (event) => {
+      const previous = readyState.value;
+      const state = document.readyState;
+
+      if (state === previous)
+        return;
+
+      readyState.value = state;
+      onChange?.(state, previous, event);
+    }, { passive: true });
+  }
+
+  return readyState;
+}
diff --git a/vue/toolkit/src/composables/elements/useDocumentVisibility/demo.vue b/vue/toolkit/src/composables/elements/useDocumentVisibility/demo.vue
new file mode 100644
index 0000000..79fda82
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useDocumentVisibility/demo.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useDocumentVisibility } from './index';
+
+const switches = ref(0);
+const lastHidden = ref<string | null>(null);
+
+const visibility = useDocumentVisibility({
+  onChange: (state) => {
+    if (state === 'hidden') {
+      switches.value += 1;
+      lastHidden.value = new Date().toLocaleTimeString();
+    }
+  },
+});
+
+const isVisible = computed(() => visibility.value === 'visible');
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col items-center gap-3 text-center">
+      <span
+        class="flex size-14 items-center justify-center rounded-full text-2xl transition"
+        :class="isVisible
+          ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'bg-amber-500/10 text-amber-600 dark:text-amber-400'"
+      >
+        {{ isVisible ? '👁️' : '💤' }}
+      </span>
+      <div>
+        <p class="font-mono text-2xl font-bold tabular-nums text-(--fg)">
+          {{ visibility }}
+        </p>
+        <p class="text-xs text-(--fg-subtle)">
+          {{ isVisible ? 'This tab is in the foreground' : 'This tab is hidden' }}
+        </p>
+      </div>
+    </div>
+
+    <p class="text-center text-xs text-(--fg-subtle)">
+      Switch to another tab or minimize the window to watch this update.
+    </p>
+
+    <div class="grid grid-cols-2 gap-3">
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
+        <p class="font-mono text-3xl font-bold tabular-nums text-(--fg)">
+          {{ switches }}
+        </p>
+        <p class="mt-0.5 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Times hidden
+        </p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
+        <p class="font-mono text-sm font-medium tabular-nums text-(--fg) truncate">
+          {{ lastHidden ?? '—' }}
+        </p>
+        <p class="mt-0.5 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Last hidden at
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/elements/useDocumentVisibility/index.test.ts b/vue/toolkit/src/composables/elements/useDocumentVisibility/index.test.ts
new file mode 100644
index 0000000..b629eda
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useDocumentVisibility/index.test.ts
@@ -0,0 +1,131 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick } from 'vue';
+import { useDocumentVisibility } from '.';
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+  Object.defineProperty(document, 'visibilityState', { value: 'visible', configurable: true });
+});
+
+function setVisibility(state: DocumentVisibilityState) {
+  Object.defineProperty(document, 'visibilityState', { value: state, configurable: true });
+  document.dispatchEvent(new Event('visibilitychange'));
+}
+
+describe(useDocumentVisibility, () => {
+  it('reads the current visibility state', () => {
+    const scope = effectScope();
+    let visibility: ReturnType<typeof useDocumentVisibility>;
+    scope.run(() => {
+      visibility = useDocumentVisibility();
+    });
+
+    expect(visibility!.value).toBe('visible');
+    scope.stop();
+  });
+
+  it('updates on visibilitychange', async () => {
+    const scope = effectScope();
+    let visibility: ReturnType<typeof useDocumentVisibility>;
+    scope.run(() => {
+      visibility = useDocumentVisibility();
+    });
+
+    setVisibility('hidden');
+    await nextTick();
+
+    expect(visibility!.value).toBe('hidden');
+    scope.stop();
+  });
+
+  it('invokes onChange with new state, previous state, and the event', async () => {
+    const onChange = vi.fn();
+    const scope = effectScope();
+    scope.run(() => {
+      useDocumentVisibility({ onChange });
+    });
+
+    setVisibility('hidden');
+    await nextTick();
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    const [state, previous, event] = onChange.mock.calls[0]!;
+    expect(state).toBe('hidden');
+    expect(previous).toBe('visible');
+    expect(event).toBeInstanceOf(Event);
+
+    setVisibility('visible');
+    await nextTick();
+
+    expect(onChange).toHaveBeenCalledTimes(2);
+    expect(onChange.mock.calls[1]!.slice(0, 2)).toEqual(['visible', 'hidden']);
+    scope.stop();
+  });
+
+  it('does not update or fire onChange when the state is unchanged', async () => {
+    const onChange = vi.fn();
+    const scope = effectScope();
+    let visibility: ReturnType<typeof useDocumentVisibility>;
+    scope.run(() => {
+      visibility = useDocumentVisibility({ onChange });
+    });
+
+    // visibilityState is already 'visible'; dispatching with no real change is a no-op
+    document.dispatchEvent(new Event('visibilitychange'));
+    await nextTick();
+
+    expect(onChange).not.toHaveBeenCalled();
+    expect(visibility!.value).toBe('visible');
+    scope.stop();
+  });
+
+  it('reflects a non-default initial state at setup time', () => {
+    Object.defineProperty(document, 'visibilityState', { value: 'hidden', configurable: true });
+
+    const scope = effectScope();
+    let visibility: ReturnType<typeof useDocumentVisibility>;
+    scope.run(() => {
+      visibility = useDocumentVisibility();
+    });
+
+    expect(visibility!.value).toBe('hidden');
+    scope.stop();
+  });
+
+  it('is SSR-safe and returns "visible" without a document', () => {
+    const scope = effectScope();
+    let visibility: ReturnType<typeof useDocumentVisibility>;
+    scope.run(() => {
+      visibility = useDocumentVisibility({ document: undefined });
+    });
+
+    expect(visibility!.value).toBe('visible');
+    scope.stop();
+  });
+
+  it('accepts a custom document instance', async () => {
+    const onChange = vi.fn();
+    let listener: ((event: Event) => void) | undefined;
+    const customDoc = {
+      visibilityState: 'visible' as DocumentVisibilityState,
+      addEventListener: (_type: string, cb: (event: Event) => void) => { listener = cb; },
+      removeEventListener: vi.fn(),
+    } as unknown as Document;
+
+    const scope = effectScope();
+    let visibility: ReturnType<typeof useDocumentVisibility>;
+    scope.run(() => {
+      visibility = useDocumentVisibility({ document: customDoc, onChange });
+    });
+
+    expect(visibility!.value).toBe('visible');
+
+    (customDoc as { visibilityState: DocumentVisibilityState }).visibilityState = 'hidden';
+    listener?.(new Event('visibilitychange'));
+    await nextTick();
+
+    expect(visibility!.value).toBe('hidden');
+    expect(onChange).toHaveBeenCalledWith('hidden', 'visible', expect.any(Event));
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/elements/useDocumentVisibility/index.ts b/vue/toolkit/src/composables/elements/useDocumentVisibility/index.ts
new file mode 100644
index 0000000..ba95b6a
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useDocumentVisibility/index.ts
@@ -0,0 +1,67 @@
+import { shallowRef } from 'vue';
+import type { ShallowRef } from 'vue';
+import { defaultDocument } from '@/types';
+import type { ConfigurableDocument } from '@/types';
+import { useEventListener } from '@/composables/browser/useEventListener';
+
+export interface UseDocumentVisibilityOptions extends ConfigurableDocument {
+  /**
+   * Called whenever `document.visibilityState` changes, receiving the new state,
+   * the previous state, and the originating `visibilitychange` event.
+   *
+   * @default undefined
+   */
+  onChange?: (
+    state: DocumentVisibilityState,
+    previous: DocumentVisibilityState,
+    event: Event,
+  ) => void;
+}
+
+export type UseDocumentVisibilityReturn = ShallowRef<DocumentVisibilityState>;
+
+/**
+ * @name useDocumentVisibility
+ * @category Elements
+ * @description Reactive `document.visibilityState`.
+ *
+ * @param {UseDocumentVisibilityOptions} [options={}] Options (custom `document`, `onChange` callback)
+ * @returns {UseDocumentVisibilityReturn} The current visibility state
+ *
+ * @example
+ * const visibility = useDocumentVisibility();
+ * watch(visibility, (state) => {
+ *   if (state === 'visible') refresh();
+ * });
+ *
+ * @example
+ * useDocumentVisibility({
+ *   onChange: (state) => {
+ *     if (state === 'hidden') pausePlayback();
+ *   },
+ * });
+ *
+ * @since 0.0.15
+ */
+export function useDocumentVisibility(
+  options: UseDocumentVisibilityOptions = {},
+): UseDocumentVisibilityReturn {
+  const { document = defaultDocument, onChange } = options;
+
+  const visibility = shallowRef<DocumentVisibilityState>(document?.visibilityState ?? 'visible');
+
+  if (document) {
+    useEventListener(document, 'visibilitychange', (event) => {
+      const previous = visibility.value;
+      const state = document.visibilityState;
+
+      if (state === previous)
+        return;
+
+      visibility.value = state;
+      onChange?.(state, previous, event);
+    }, { passive: true });
+  }
+
+  return visibility;
+}
diff --git a/vue/toolkit/src/composables/elements/useDraggable/demo.vue b/vue/toolkit/src/composables/elements/useDraggable/demo.vue
new file mode 100644
index 0000000..96c35fb
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useDraggable/demo.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { useTemplateRef } from 'vue';
+import { useDraggable } from './index';
+
+const container = useTemplateRef<HTMLElement>('container');
+const handle = useTemplateRef<HTMLElement>('handle');
+
+const { x, y, isDragging, style } = useDraggable(
+  useTemplateRef<HTMLElement>('card'),
+  {
+    initialValue: { x: 24, y: 24 },
+    containerElement: container,
+    handle,
+  },
+);
+</script>
+
+<template>
+  <div class="w-full max-w-md flex flex-col gap-4">
+    <div class="flex items-center justify-between gap-3">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Draggable, clamped to container
+      </span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
+        :class="isDragging
+          ? 'border-(--accent) bg-(--accent-subtle) text-(--accent-text)'
+          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        <span
+          class="size-1.5 rounded-full transition"
+          :class="isDragging ? 'bg-(--accent)' : 'bg-(--fg-subtle)'"
+        />
+        {{ isDragging ? 'dragging' : 'idle' }}
+      </span>
+    </div>
+
+    <div
+      ref="container"
+      class="relative h-56 w-full overflow-hidden rounded-xl border border-(--border) bg-(--bg-inset)"
+    >
+      <div
+        ref="card"
+        :style="style"
+        class="absolute w-36 select-none rounded-lg border border-(--border-strong) bg-(--bg-elevated) shadow-lg"
+        :class="isDragging ? 'ring-2 ring-(--ring)' : ''"
+      >
+        <div
+          ref="handle"
+          class="flex items-center gap-1.5 rounded-t-lg border-b border-(--border) bg-(--bg-subtle) px-3 py-2 cursor-grab active:cursor-grabbing"
+        >
+          <span class="text-(--fg-subtle)">⠿</span>
+          <span class="text-xs font-medium text-(--fg-muted)">Drag me</span>
+        </div>
+        <div class="p-3 font-mono text-xs tabular-nums text-(--fg)">
+          <div>x: {{ Math.round(x) }}</div>
+          <div>y: {{ Math.round(y) }}</div>
+        </div>
+      </div>
+    </div>
+
+    <p class="text-center text-xs text-(--fg-subtle)">
+      Drag from the header. Movement is clamped to the container bounds.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/elements/useDraggable/index.test.ts b/vue/toolkit/src/composables/elements/useDraggable/index.test.ts
new file mode 100644
index 0000000..b87e4b6
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useDraggable/index.test.ts
@@ -0,0 +1,351 @@
+import { describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, shallowRef } from 'vue';
+import { useDraggable } from '.';
+
+interface PointerCoords {
+  clientX?: number;
+  clientY?: number;
+  button?: number;
+  pointerType?: string;
+}
+
+function dispatchPointer(targetEl: EventTarget, type: string, coords: PointerCoords = {}): Event {
+  const event = new Event(type, { bubbles: true, cancelable: true });
+  Object.defineProperty(event, 'clientX', { value: coords.clientX ?? 0, configurable: true });
+  Object.defineProperty(event, 'clientY', { value: coords.clientY ?? 0, configurable: true });
+  Object.defineProperty(event, 'button', { value: coords.button ?? 0, configurable: true });
+  Object.defineProperty(event, 'pointerType', { value: coords.pointerType ?? 'mouse', configurable: true });
+  Object.defineProperty(event, 'target', { value: targetEl, configurable: true });
+  targetEl.dispatchEvent(event);
+  return event;
+}
+
+function makeElement(rect: Partial<DOMRect> = {}): HTMLElement {
+  const el = document.createElement('div');
+  const full: DOMRect = {
+    x: 0,
+    y: 0,
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: 0,
+    height: 0,
+    toJSON: () => ({}),
+    ...rect,
+  } as DOMRect;
+  el.getBoundingClientRect = () => full;
+  return el;
+}
+
+describe(useDraggable, () => {
+  it('uses the initial value', () => {
+    const el = makeElement();
+    const scope = effectScope();
+    let drag: ReturnType<typeof useDraggable>;
+    scope.run(() => {
+      drag = useDraggable(el, { initialValue: { x: 20, y: 30 } });
+    });
+    expect(drag!.x.value).toBe(20);
+    expect(drag!.y.value).toBe(30);
+    expect(drag!.position.value).toEqual({ x: 20, y: 30 });
+    expect(drag!.isDragging.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('defaults to { x: 0, y: 0 }', () => {
+    const el = makeElement();
+    const scope = effectScope();
+    let drag: ReturnType<typeof useDraggable>;
+    scope.run(() => {
+      drag = useDraggable(el);
+    });
+    expect(drag!.position.value).toEqual({ x: 0, y: 0 });
+    scope.stop();
+  });
+
+  it('drags along both axes and tracks isDragging', async () => {
+    const el = makeElement({ left: 0, top: 0, width: 50, height: 50 });
+    const scope = effectScope();
+    let drag: ReturnType<typeof useDraggable>;
+    scope.run(() => {
+      drag = useDraggable(el);
+    });
+    await nextTick();
+
+    dispatchPointer(el, 'pointerdown', { clientX: 10, clientY: 10 });
+    expect(drag!.isDragging.value).toBeTruthy();
+
+    dispatchPointer(globalThis, 'pointermove', { clientX: 40, clientY: 60 });
+    // delta captured at start was (10, 10); new pos = client - delta
+    expect(drag!.position.value).toEqual({ x: 30, y: 50 });
+
+    dispatchPointer(globalThis, 'pointerup', { clientX: 40, clientY: 60 });
+    expect(drag!.isDragging.value).toBeFalsy();
+
+    // moving after end does nothing
+    dispatchPointer(globalThis, 'pointermove', { clientX: 100, clientY: 100 });
+    expect(drag!.position.value).toEqual({ x: 30, y: 50 });
+    scope.stop();
+  });
+
+  it('locks to the x axis', async () => {
+    const el = makeElement();
+    const scope = effectScope();
+    let drag: ReturnType<typeof useDraggable>;
+    scope.run(() => {
+      drag = useDraggable(el, { axis: 'x' });
+    });
+    await nextTick();
+
+    dispatchPointer(el, 'pointerdown', { clientX: 0, clientY: 0 });
+    dispatchPointer(globalThis, 'pointermove', { clientX: 25, clientY: 99 });
+    expect(drag!.position.value).toEqual({ x: 25, y: 0 });
+    scope.stop();
+  });
+
+  it('locks to the y axis', async () => {
+    const el = makeElement();
+    const scope = effectScope();
+    let drag: ReturnType<typeof useDraggable>;
+    scope.run(() => {
+      drag = useDraggable(el, { axis: 'y' });
+    });
+    await nextTick();
+
+    dispatchPointer(el, 'pointerdown', { clientX: 0, clientY: 0 });
+    dispatchPointer(globalThis, 'pointermove', { clientX: 99, clientY: 25 });
+    expect(drag!.position.value).toEqual({ x: 0, y: 25 });
+    scope.stop();
+  });
+
+  it('fires onStart, onMove and onEnd callbacks', async () => {
+    const el = makeElement();
+    const onStart = vi.fn();
+    const onMove = vi.fn();
+    const onEnd = vi.fn();
+    const scope = effectScope();
+    scope.run(() => {
+      useDraggable(el, { onStart, onMove, onEnd });
+    });
+    await nextTick();
+
+    dispatchPointer(el, 'pointerdown', { clientX: 5, clientY: 5 });
+    dispatchPointer(globalThis, 'pointermove', { clientX: 15, clientY: 25 });
+    dispatchPointer(globalThis, 'pointerup', { clientX: 15, clientY: 25 });
+
+    expect(onStart).toHaveBeenCalledTimes(1);
+    expect(onMove).toHaveBeenCalledWith({ x: 10, y: 20 }, expect.any(Object));
+    expect(onEnd).toHaveBeenCalledWith({ x: 10, y: 20 }, expect.any(Object));
+    scope.stop();
+  });
+
+  it('cancels the drag when onStart returns false', async () => {
+    const el = makeElement();
+    const scope = effectScope();
+    let drag: ReturnType<typeof useDraggable>;
+    scope.run(() => {
+      drag = useDraggable(el, { onStart: () => false });
+    });
+    await nextTick();
+
+    dispatchPointer(el, 'pointerdown', { clientX: 0, clientY: 0 });
+    expect(drag!.isDragging.value).toBeFalsy();
+
+    dispatchPointer(globalThis, 'pointermove', { clientX: 50, clientY: 50 });
+    expect(drag!.position.value).toEqual({ x: 0, y: 0 });
+    scope.stop();
+  });
+
+  it('does not drag when disabled', async () => {
+    const el = makeElement();
+    const scope = effectScope();
+    let drag: ReturnType<typeof useDraggable>;
+    scope.run(() => {
+      drag = useDraggable(el, { disabled: true });
+    });
+    await nextTick();
+
+    dispatchPointer(el, 'pointerdown', { clientX: 0, clientY: 0 });
+    dispatchPointer(globalThis, 'pointermove', { clientX: 30, clientY: 30 });
+    expect(drag!.isDragging.value).toBeFalsy();
+    expect(drag!.position.value).toEqual({ x: 0, y: 0 });
+    scope.stop();
+  });
+
+  it('respects a reactive disabled flag', async () => {
+    const el = makeElement();
+    const disabled = shallowRef(true);
+    const scope = effectScope();
+    let drag: ReturnType<typeof useDraggable>;
+    scope.run(() => {
+      drag = useDraggable(el, { disabled });
+    });
+    await nextTick();
+
+    dispatchPointer(el, 'pointerdown', { clientX: 0, clientY: 0 });
+    expect(drag!.isDragging.value).toBeFalsy();
+
+    disabled.value = false;
+    dispatchPointer(el, 'pointerdown', { clientX: 0, clientY: 0 });
+    dispatchPointer(globalThis, 'pointermove', { clientX: 10, clientY: 10 });
+    expect(drag!.position.value).toEqual({ x: 10, y: 10 });
+    scope.stop();
+  });
+
+  it('ignores non-allowed pointer buttons', async () => {
+    const el = makeElement();
+    const scope = effectScope();
+    let drag: ReturnType<typeof useDraggable>;
+    scope.run(() => {
+      drag = useDraggable(el);
+    });
+    await nextTick();
+
+    // right button (2) should be ignored when default buttons = [0]
+    dispatchPointer(el, 'pointerdown', { clientX: 0, clientY: 0, button: 2 });
+    expect(drag!.isDragging.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('filters by pointer type', async () => {
+    const el = makeElement();
+    const scope = effectScope();
+    let drag: ReturnType<typeof useDraggable>;
+    scope.run(() => {
+      drag = useDraggable(el, { pointerTypes: ['touch'] });
+    });
+    await nextTick();
+
+    dispatchPointer(el, 'pointerdown', { clientX: 0, clientY: 0, pointerType: 'mouse' });
+    expect(drag!.isDragging.value).toBeFalsy();
+
+    dispatchPointer(el, 'pointerdown', { clientX: 0, clientY: 0, pointerType: 'touch' });
+    expect(drag!.isDragging.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('starts from a separate handle element', async () => {
+    const el = makeElement();
+    const handle = makeElement();
+    const scope = effectScope();
+    let drag: ReturnType<typeof useDraggable>;
+    scope.run(() => {
+      drag = useDraggable(el, { handle });
+    });
+    await nextTick();
+
+    // pointerdown on the target itself should NOT start a drag
+    dispatchPointer(el, 'pointerdown', { clientX: 0, clientY: 0 });
+    expect(drag!.isDragging.value).toBeFalsy();
+
+    // pointerdown on the handle should
+    dispatchPointer(handle, 'pointerdown', { clientX: 0, clientY: 0 });
+    expect(drag!.isDragging.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('honours exact (only starts on the target itself, not children)', async () => {
+    const el = makeElement();
+    const child = makeElement();
+    el.appendChild(child);
+    const scope = effectScope();
+    let drag: ReturnType<typeof useDraggable>;
+    scope.run(() => {
+      drag = useDraggable(el, { exact: true });
+    });
+    await nextTick();
+
+    // event.target is the child -> should be ignored
+    dispatchPointer(child, 'pointerdown', { clientX: 0, clientY: 0 });
+    expect(drag!.isDragging.value).toBeFalsy();
+
+    // event.target is the element itself -> allowed
+    dispatchPointer(el, 'pointerdown', { clientX: 0, clientY: 0 });
+    expect(drag!.isDragging.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('clamps within a container element', async () => {
+    const el = makeElement({ left: 0, top: 0, width: 20, height: 20 });
+    const container = makeElement({ left: 0, top: 0, width: 100, height: 100 });
+    Object.defineProperty(container, 'scrollWidth', { value: 100, configurable: true });
+    Object.defineProperty(container, 'scrollHeight', { value: 100, configurable: true });
+    Object.defineProperty(container, 'scrollLeft', { value: 0, configurable: true });
+    Object.defineProperty(container, 'scrollTop', { value: 0, configurable: true });
+
+    const scope = effectScope();
+    let drag: ReturnType<typeof useDraggable>;
+    scope.run(() => {
+      drag = useDraggable(el, { containerElement: container });
+    });
+    await nextTick();
+
+    dispatchPointer(el, 'pointerdown', { clientX: 0, clientY: 0 });
+    // try to drag way past the container; clamps to scrollWidth - width = 80
+    dispatchPointer(globalThis, 'pointermove', { clientX: 500, clientY: 500 });
+    expect(drag!.position.value).toEqual({ x: 80, y: 80 });
+
+    // negative also clamps to 0
+    dispatchPointer(globalThis, 'pointermove', { clientX: -50, clientY: -50 });
+    expect(drag!.position.value).toEqual({ x: 0, y: 0 });
+    scope.stop();
+  });
+
+  it('exposes a writable x/y that updates position', () => {
+    const el = makeElement();
+    const scope = effectScope();
+    let drag: ReturnType<typeof useDraggable>;
+    scope.run(() => {
+      drag = useDraggable(el);
+    });
+    drag!.x.value = 11;
+    drag!.y.value = 22;
+    expect(drag!.position.value).toEqual({ x: 11, y: 22 });
+    scope.stop();
+  });
+
+  it('produces a style string', () => {
+    const el = makeElement();
+    const scope = effectScope();
+    let drag: ReturnType<typeof useDraggable>;
+    scope.run(() => {
+      drag = useDraggable(el, { initialValue: { x: 4, y: 8 } });
+    });
+    expect(drag!.style.value).toBe('left:4px;top:8px;');
+    scope.stop();
+  });
+
+  it('attaches passive listeners when not preventing default', async () => {
+    const el = makeElement();
+    const addSpy = vi.spyOn(el, 'addEventListener');
+    const scope = effectScope();
+    scope.run(() => {
+      useDraggable(el);
+    });
+    await nextTick();
+
+    const downCall = addSpy.mock.calls.find(([name]) => name === 'pointerdown');
+    expect(downCall).toBeDefined();
+    expect((downCall![2] as AddEventListenerOptions).passive).toBeTruthy();
+
+    addSpy.mockRestore();
+    scope.stop();
+  });
+
+  it('does nothing on the SSR path (no window)', () => {
+    // Simulate a missing window by passing draggingElement undefined and a
+    // detached element; the composable must still return sane defaults.
+    const el = makeElement();
+    const scope = effectScope();
+    let drag: ReturnType<typeof useDraggable>;
+    scope.run(() => {
+      drag = useDraggable(el, { draggingElement: undefined });
+    });
+    expect(drag!.x.value).toBe(0);
+    expect(drag!.y.value).toBe(0);
+    expect(drag!.isDragging.value).toBeFalsy();
+    expect(drag!.style.value).toBe('left:0px;top:0px;');
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/elements/useDraggable/index.ts b/vue/toolkit/src/composables/elements/useDraggable/index.ts
new file mode 100644
index 0000000..35face0
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useDraggable/index.ts
@@ -0,0 +1,323 @@
+import { computed, shallowRef, toValue } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';
+import { noop } from '@robonen/stdlib';
+import { defaultWindow } from '@/types';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import { unrefElement } from '@/composables/component/unrefElement';
+import type { MaybeComputedElementRef } from '@/composables/component/unrefElement';
+
+export type UseDraggableAxis = 'x' | 'y' | 'both';
+export type UseDraggablePointerType = 'mouse' | 'touch' | 'pen';
+
+export interface Position {
+  x: number;
+  y: number;
+}
+
+export interface UseDraggableOptions {
+  /**
+   * Initial position of the draggable element.
+   *
+   * @default { x: 0, y: 0 }
+   */
+  initialValue?: MaybeRefOrGetter<Position>;
+
+  /**
+   * Axis along which dragging is allowed.
+   *
+   * @default 'both'
+   */
+  axis?: UseDraggableAxis;
+
+  /**
+   * Element that initiates the drag. Defaults to the dragged `target` itself.
+   * Accepts an element ref, getter, or component instance.
+   *
+   * @default target
+   */
+  handle?: MaybeComputedElementRef;
+
+  /**
+   * Element whose bounds constrain the dragged element. When set, the position
+   * is clamped so the element cannot be dragged outside of it.
+   *
+   * @default undefined
+   */
+  containerElement?: MaybeComputedElementRef;
+
+  /**
+   * Element on which the `pointermove` / `pointerup` listeners are attached.
+   * Defaults to `window` so dragging keeps working when the pointer leaves the
+   * element.
+   *
+   * @default window
+   */
+  draggingElement?: MaybeComputedElementRef | Window | Document;
+
+  /**
+   * Only start dragging when the pointer goes down on the `handle` itself, not
+   * on one of its descendants.
+   *
+   * @default false
+   */
+  exact?: MaybeRefOrGetter<boolean>;
+
+  /**
+   * Pointer types that are allowed to start a drag.
+   *
+   * @default ['mouse', 'touch', 'pen']
+   */
+  pointerTypes?: UseDraggablePointerType[];
+
+  /**
+   * Pointer buttons that are allowed to start a drag (`0` = primary/left).
+   *
+   * @default [0]
+   */
+  buttons?: MaybeRefOrGetter<number[]>;
+
+  /**
+   * Call `preventDefault` on the pointer events. When `false` listeners are
+   * attached passively for better scroll performance.
+   *
+   * @default false
+   */
+  preventDefault?: MaybeRefOrGetter<boolean>;
+
+  /**
+   * Call `stopPropagation` on the pointer events.
+   *
+   * @default false
+   */
+  stopPropagation?: MaybeRefOrGetter<boolean>;
+
+  /**
+   * Use event capture when attaching the listeners.
+   *
+   * @default true
+   */
+  capture?: boolean;
+
+  /**
+   * Disable dragging entirely. May be reactive to toggle at runtime.
+   *
+   * @default false
+   */
+  disabled?: MaybeRefOrGetter<boolean>;
+
+  /**
+   * Invoked when a drag starts. Return `false` to cancel the drag.
+   */
+  onStart?: (position: Position, event: PointerEvent) => void | false;
+
+  /**
+   * Invoked on every pointer move while dragging.
+   */
+  onMove?: (position: Position, event: PointerEvent) => void;
+
+  /**
+   * Invoked when the drag ends.
+   */
+  onEnd?: (position: Position, event: PointerEvent) => void;
+}
+
+export interface UseDraggableReturn {
+  /**
+   * Current x position.
+   */
+  x: Ref<number>;
+
+  /**
+   * Current y position.
+   */
+  y: Ref<number>;
+
+  /**
+   * Current position as a `{ x, y }` object.
+   */
+  position: Ref<Position>;
+
+  /**
+   * Whether a drag is currently in progress.
+   */
+  isDragging: ComputedRef<boolean>;
+
+  /**
+   * Ready-to-bind inline `style` string positioning the element.
+   */
+  style: ComputedRef<string>;
+}
+
+/**
+ * @name useDraggable
+ * @category Elements
+ * @description Make an element draggable by pointer, tracking its position with
+ * optional axis locking, a drag handle, container constraints, and lifecycle
+ * callbacks. SSR-safe and built on passive pointer listeners.
+ *
+ * @param {MaybeComputedElementRef} target - The element to make draggable
+ * @param {UseDraggableOptions} [options={}] - Options
+ * @returns {UseDraggableReturn} Reactive `x`, `y`, `position`, `isDragging`, and a `style` string
+ *
+ * @example
+ * const el = useTemplateRef<HTMLElement>('el');
+ * const { x, y, style } = useDraggable(el, { initialValue: { x: 40, y: 40 } });
+ *
+ * @example
+ * // Lock to the horizontal axis and only drag from a handle.
+ * const { position } = useDraggable(el, { axis: 'x', handle: handleEl });
+ *
+ * @since 0.0.15
+ */
+export function useDraggable(
+  target: MaybeComputedElementRef,
+  options: UseDraggableOptions = {},
+): UseDraggableReturn {
+  const {
+    initialValue,
+    axis = 'both',
+    handle = target,
+    containerElement,
+    draggingElement = defaultWindow,
+    exact,
+    pointerTypes,
+    buttons = [0],
+    preventDefault,
+    stopPropagation,
+    capture = true,
+    disabled,
+    onStart = noop,
+    onMove = noop,
+    onEnd = noop,
+  } = options;
+
+  const position = shallowRef<Position>(toValue(initialValue) ?? { x: 0, y: 0 });
+
+  // Offset from the pointer to the element's top-left at drag start.
+  // `null` means we are not dragging.
+  const pressedDelta = shallowRef<Position | null>(null);
+
+  const filterEvent = (event: PointerEvent): boolean => {
+    if (pointerTypes)
+      return pointerTypes.includes(event.pointerType as UseDraggablePointerType);
+    return true;
+  };
+
+  const handleEvent = (event: PointerEvent): void => {
+    if (toValue(preventDefault))
+      event.preventDefault();
+    if (toValue(stopPropagation))
+      event.stopPropagation();
+  };
+
+  const start = (event: PointerEvent): void => {
+    if (toValue(disabled))
+      return;
+    if (!toValue(buttons).includes(event.button))
+      return;
+    if (!filterEvent(event))
+      return;
+
+    const el = unrefElement(target) as HTMLElement | SVGElement | null | undefined;
+
+    if (toValue(exact) && event.target !== el)
+      return;
+
+    const container = unrefElement(containerElement) as HTMLElement | SVGElement | null | undefined;
+    const containerRect = container?.getBoundingClientRect();
+    const targetRect = el?.getBoundingClientRect();
+
+    if (!targetRect)
+      return;
+
+    const pos: Position = {
+      x: event.clientX - (container ? targetRect.left - containerRect!.left + container.scrollLeft : targetRect.left),
+      y: event.clientY - (container ? targetRect.top - containerRect!.top + container.scrollTop : targetRect.top),
+    };
+
+    if (onStart(pos, event) === false)
+      return;
+
+    pressedDelta.value = pos;
+    handleEvent(event);
+  };
+
+  const move = (event: PointerEvent): void => {
+    if (toValue(disabled))
+      return;
+    if (!pressedDelta.value)
+      return;
+    if (!filterEvent(event))
+      return;
+
+    const el = unrefElement(target) as HTMLElement | SVGElement | null | undefined;
+    const container = unrefElement(containerElement) as HTMLElement | SVGElement | null | undefined;
+    const targetRect = el?.getBoundingClientRect();
+
+    let { x, y } = position.value;
+
+    if (axis === 'x' || axis === 'both') {
+      x = event.clientX - pressedDelta.value.x;
+      if (container && targetRect)
+        x = Math.min(Math.max(0, x), container.scrollWidth - targetRect.width);
+    }
+
+    if (axis === 'y' || axis === 'both') {
+      y = event.clientY - pressedDelta.value.y;
+      if (container && targetRect)
+        y = Math.min(Math.max(0, y), container.scrollHeight - targetRect.height);
+    }
+
+    position.value = { x, y };
+    onMove(position.value, event);
+    handleEvent(event);
+  };
+
+  const end = (event: PointerEvent): void => {
+    if (toValue(disabled))
+      return;
+    if (!pressedDelta.value)
+      return;
+    if (!filterEvent(event))
+      return;
+
+    pressedDelta.value = null;
+    onEnd(position.value, event);
+    handleEvent(event);
+  };
+
+  if (defaultWindow) {
+    const config = (): AddEventListenerOptions => ({
+      capture,
+      passive: !toValue(preventDefault),
+    });
+
+    // `MaybeComputedElementRef` includes `VueInstance`, which isn't an `EventTarget`;
+    // these targets always resolve to a real element/window at runtime (useEventListener
+    // unwraps via unrefElement), so cast to the EventTarget overload.
+    const asEventTarget = (value: unknown): MaybeRefOrGetter<EventTarget | null | undefined> =>
+      value as MaybeRefOrGetter<EventTarget | null | undefined>;
+
+    useEventListener(asEventTarget(handle), 'pointerdown', start as (e: Event) => void, config);
+    useEventListener(asEventTarget(draggingElement), 'pointermove', move as (e: Event) => void, config);
+    useEventListener(asEventTarget(draggingElement), 'pointerup', end as (e: Event) => void, config);
+  }
+
+  const x = computed<number>({
+    get: () => position.value.x,
+    set: value => (position.value = { x: value, y: position.value.y }),
+  });
+
+  const y = computed<number>({
+    get: () => position.value.y,
+    set: value => (position.value = { x: position.value.x, y: value }),
+  });
+
+  return {
+    x,
+    y,
+    position,
+    isDragging: computed(() => !!pressedDelta.value),
+    style: computed(() => `left:${position.value.x}px;top:${position.value.y}px;`),
+  };
+}
diff --git a/vue/toolkit/src/composables/elements/useDropZone/demo.vue b/vue/toolkit/src/composables/elements/useDropZone/demo.vue
new file mode 100644
index 0000000..7961c1a
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useDropZone/demo.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { computed, useTemplateRef } from 'vue';
+import { useDropZone } from './index';
+
+const dropZone = useTemplateRef<HTMLElement>('dropZone');
+
+const { isOverDropZone, files, isSupported } = useDropZone(dropZone, {
+  dataTypes: ['image/'],
+  onDrop: (dropped) => {
+    // eslint-disable-next-line no-console
+    console.log('dropped', dropped);
+  },
+});
+
+const fileList = computed(() => files.value ?? []);
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024)
+    return `${bytes} B`;
+  if (bytes < 1024 * 1024)
+    return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div
+      v-if="!isSupported"
+      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-center text-sm text-amber-700 dark:text-amber-300"
+    >
+      Drag and Drop is not supported in this browser.
+    </div>
+
+    <template v-else>
+      <div
+        ref="dropZone"
+        class="flex flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed p-8 text-center transition"
+        :class="isOverDropZone
+          ? 'border-(--accent) bg-(--accent-subtle)'
+          : 'border-(--border-strong) bg-(--bg-elevated)'"
+      >
+        <span class="text-3xl transition" :class="isOverDropZone ? 'scale-110' : ''">
+          {{ isOverDropZone ? '📥' : '🖼️' }}
+        </span>
+        <p class="text-sm font-medium text-(--fg)">
+          {{ isOverDropZone ? 'Release to drop' : 'Drop image files here' }}
+        </p>
+        <p class="text-xs text-(--fg-subtle)">
+          Only <span class="font-mono">image/*</span> files are accepted
+        </p>
+      </div>
+
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <div class="flex items-center justify-between">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+            Dropped files
+          </span>
+          <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-elevated) px-2 py-0.5 text-xs font-medium text-(--fg-muted) tabular-nums">
+            {{ fileList.length }}
+          </span>
+        </div>
+
+        <p
+          v-if="fileList.length === 0"
+          class="mt-3 text-center text-sm text-(--fg-subtle)"
+        >
+          Nothing dropped yet.
+        </p>
+
+        <ul v-else class="mt-3 space-y-1.5">
+          <li
+            v-for="file in fileList"
+            :key="file.name"
+            class="flex items-center justify-between gap-3 rounded-md bg-(--bg-elevated) px-2.5 py-1.5"
+          >
+            <span class="truncate text-sm text-(--fg)">{{ file.name }}</span>
+            <span class="shrink-0 font-mono text-xs tabular-nums text-(--fg-subtle)">
+              {{ formatSize(file.size) }}
+            </span>
+          </li>
+        </ul>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/elements/useDropZone/index.test.ts b/vue/toolkit/src/composables/elements/useDropZone/index.test.ts
new file mode 100644
index 0000000..a73120d
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useDropZone/index.test.ts
@@ -0,0 +1,288 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, ref } from 'vue';
+import { useDropZone } from '.';
+
+interface FakeDataTransfer {
+  files: File[];
+  items: Array<{ type: string }>;
+  dropEffect: string;
+}
+
+function makeFile(name = 'a.png', type = 'image/png'): File {
+  return new File(['x'], name, { type });
+}
+
+// jsdom lacks DragEvent / DataTransfer, so we synthesize an Event with a dataTransfer payload.
+function dispatchDrag(
+  el: EventTarget,
+  type: 'dragenter' | 'dragover' | 'dragleave' | 'drop',
+  files: File[] = [],
+): { event: Event; dataTransfer: FakeDataTransfer } {
+  const dataTransfer: FakeDataTransfer = {
+    files,
+    items: files.map(f => ({ type: f.type })),
+    dropEffect: 'none',
+  };
+
+  const event = new Event(type, { bubbles: true, cancelable: true });
+  Object.defineProperty(event, 'dataTransfer', { value: dataTransfer, configurable: true });
+
+  el.dispatchEvent(event);
+  return { event, dataTransfer };
+}
+
+describe(useDropZone, () => {
+  let el: HTMLElement;
+
+  beforeEach(() => {
+    el = document.createElement('div');
+    document.body.appendChild(el);
+  });
+
+  afterEach(() => {
+    el.remove();
+    vi.unstubAllGlobals();
+  });
+
+  it('exposes reactive state', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const { isOverDropZone, files, isSupported } = useDropZone(el);
+      expect(isOverDropZone.value).toBeFalsy();
+      expect(files.value).toBeNull();
+      expect(isSupported).toBeDefined();
+    });
+    scope.stop();
+  });
+
+  it('sets isOverDropZone on dragenter and clears on matching dragleave', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const { isOverDropZone } = useDropZone(el);
+
+      dispatchDrag(el, 'dragenter', [makeFile()]);
+      expect(isOverDropZone.value).toBeTruthy();
+
+      dispatchDrag(el, 'dragleave', [makeFile()]);
+      expect(isOverDropZone.value).toBeFalsy();
+    });
+    scope.stop();
+  });
+
+  it('uses a counter so nested enter/leave keeps isOverDropZone true', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const { isOverDropZone } = useDropZone(el);
+
+      dispatchDrag(el, 'dragenter', [makeFile()]);
+      dispatchDrag(el, 'dragenter', [makeFile()]);
+      expect(isOverDropZone.value).toBeTruthy();
+
+      dispatchDrag(el, 'dragleave', [makeFile()]);
+      expect(isOverDropZone.value).toBeTruthy();
+
+      dispatchDrag(el, 'dragleave', [makeFile()]);
+      expect(isOverDropZone.value).toBeFalsy();
+    });
+    scope.stop();
+  });
+
+  it('collects dropped files and resets isOverDropZone', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const { files, isOverDropZone } = useDropZone(el);
+
+      dispatchDrag(el, 'dragenter', [makeFile()]);
+      const dropped = [makeFile('one.png'), makeFile('two.png')];
+      dispatchDrag(el, 'drop', dropped);
+
+      expect(files.value).toHaveLength(2);
+      expect(files.value?.[0]!.name).toBe('one.png');
+      expect(isOverDropZone.value).toBeFalsy();
+    });
+    scope.stop();
+  });
+
+  it('invokes lifecycle callbacks', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const onEnter = vi.fn();
+      const onOver = vi.fn();
+      const onLeave = vi.fn();
+      const onDrop = vi.fn();
+
+      useDropZone(el, { onEnter, onOver, onLeave, onDrop });
+
+      const f = [makeFile()];
+      dispatchDrag(el, 'dragenter', f);
+      dispatchDrag(el, 'dragover', f);
+      dispatchDrag(el, 'dragleave', f);
+      dispatchDrag(el, 'drop', f);
+
+      expect(onEnter).toHaveBeenCalledTimes(1);
+      expect(onOver).toHaveBeenCalledTimes(1);
+      expect(onLeave).toHaveBeenCalledTimes(1);
+      expect(onDrop).toHaveBeenCalledTimes(1);
+      expect(onEnter).toHaveBeenCalledWith(null, expect.any(Event));
+      expect(onDrop.mock.calls[0]![0]).toHaveLength(1);
+    });
+    scope.stop();
+  });
+
+  it('accepts a shorthand onDrop function as options', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const onDrop = vi.fn();
+      useDropZone(el, onDrop);
+
+      dispatchDrag(el, 'drop', [makeFile()]);
+      expect(onDrop).toHaveBeenCalledTimes(1);
+    });
+    scope.stop();
+  });
+
+  it('respects multiple: false by keeping only the first file', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const { files } = useDropZone(el, { multiple: false });
+
+      // Two files dragged: validation should reject, so drop is ignored
+      dispatchDrag(el, 'drop', [makeFile('a.png'), makeFile('b.png')]);
+      expect(files.value).toBeNull();
+
+      // Single file passes and only the first is kept
+      dispatchDrag(el, 'drop', [makeFile('solo.png')]);
+      expect(files.value).toHaveLength(1);
+      expect(files.value?.[0]!.name).toBe('solo.png');
+    });
+    scope.stop();
+  });
+
+  it('filters by dataTypes array', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const onDrop = vi.fn();
+      const { files } = useDropZone(el, { dataTypes: ['image/png'], onDrop });
+
+      // wrong type rejected
+      dispatchDrag(el, 'drop', [makeFile('doc.pdf', 'application/pdf')]);
+      expect(files.value).toBeNull();
+      expect(onDrop).not.toHaveBeenCalled();
+
+      // correct type accepted
+      dispatchDrag(el, 'drop', [makeFile('img.png', 'image/png')]);
+      expect(files.value).toHaveLength(1);
+      expect(onDrop).toHaveBeenCalledTimes(1);
+    });
+    scope.stop();
+  });
+
+  it('supports dataTypes as a predicate function', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const predicate = vi.fn((types: readonly string[]) => types.includes('image/png'));
+      const { files } = useDropZone(el, { dataTypes: predicate });
+
+      dispatchDrag(el, 'drop', [makeFile('img.png', 'image/png')]);
+      expect(predicate).toHaveBeenCalled();
+      expect(files.value).toHaveLength(1);
+    });
+    scope.stop();
+  });
+
+  it('reacts to a reactive dataTypes ref', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const allowed = ref<string[]>(['image/png']);
+      const { files } = useDropZone(el, { dataTypes: allowed });
+
+      dispatchDrag(el, 'drop', [makeFile('doc.pdf', 'application/pdf')]);
+      expect(files.value).toBeNull();
+
+      allowed.value = ['application/pdf'];
+      dispatchDrag(el, 'drop', [makeFile('doc.pdf', 'application/pdf')]);
+      expect(files.value).toHaveLength(1);
+    });
+    scope.stop();
+  });
+
+  it('sets dropEffect to none for invalid drags', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      useDropZone(el, { dataTypes: ['image/png'] });
+
+      const { dataTransfer } = dispatchDrag(el, 'dragenter', [makeFile('doc.pdf', 'application/pdf')]);
+      expect(dataTransfer.dropEffect).toBe('none');
+    });
+    scope.stop();
+  });
+
+  it('sets dropEffect to copy for valid drags', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      useDropZone(el, { dataTypes: ['image/png'] });
+
+      const { dataTransfer } = dispatchDrag(el, 'dragenter', [makeFile('img.png', 'image/png')]);
+      expect(dataTransfer.dropEffect).toBe('copy');
+    });
+    scope.stop();
+  });
+
+  it('preventDefaultForUnhandled calls preventDefault on invalid drags', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      useDropZone(el, { dataTypes: ['image/png'], preventDefaultForUnhandled: true });
+
+      const { event } = dispatchDrag(el, 'dragenter', [makeFile('doc.pdf', 'application/pdf')]);
+      expect(event.defaultPrevented).toBeTruthy();
+    });
+    scope.stop();
+  });
+
+  it('works with a reactive element ref target', async () => {
+    const scope = effectScope();
+    await scope.run(async () => {
+      const target = ref<HTMLElement | null>(null);
+      const { isOverDropZone } = useDropZone(target);
+
+      target.value = el;
+      await nextTick();
+
+      dispatchDrag(el, 'dragenter', [makeFile()]);
+      expect(isOverDropZone.value).toBeTruthy();
+    });
+    scope.stop();
+  });
+
+  it('works with document as the target', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const { isOverDropZone } = useDropZone(document);
+
+      dispatchDrag(document, 'dragenter', [makeFile()]);
+      expect(isOverDropZone.value).toBeTruthy();
+    });
+    scope.stop();
+  });
+
+  it('stops listening after the scope is disposed', () => {
+    const onDrop = vi.fn();
+    const scope = effectScope();
+    scope.run(() => {
+      useDropZone(el, { onDrop });
+    });
+    scope.stop();
+
+    dispatchDrag(el, 'drop', [makeFile()]);
+    expect(onDrop).not.toHaveBeenCalled();
+  });
+
+  it('reports isSupported via the configurable window option', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const { isSupported } = useDropZone(el, { window: undefined });
+      expect(isSupported.value).toBeFalsy();
+    });
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/elements/useDropZone/index.ts b/vue/toolkit/src/composables/elements/useDropZone/index.ts
new file mode 100644
index 0000000..cacd1be
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useDropZone/index.ts
@@ -0,0 +1,205 @@
+import type { ComputedRef, MaybeRef, MaybeRefOrGetter, ShallowRef } from 'vue';
+import { shallowRef, toValue, unref } from 'vue';
+import { isFunction } from '@robonen/stdlib';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import { useSupported } from '@/composables/utilities/useSupported';
+import { unrefElement } from '@/composables/component/unrefElement';
+import type { MaybeComputedElementRef } from '@/composables/component/unrefElement';
+import { defaultNavigator, defaultWindow } from '@/types';
+import type { ConfigurableNavigator, ConfigurableWindow } from '@/types';
+
+export type UseDropZoneDataTypes = MaybeRef<readonly string[]> | ((types: readonly string[]) => boolean);
+
+export interface UseDropZoneOptions extends ConfigurableWindow, ConfigurableNavigator {
+  /**
+   * Allowed data types. If not set, all data types are allowed.
+   * Can also be a predicate that receives the dragged item types and returns whether they are valid.
+   */
+  dataTypes?: UseDropZoneDataTypes;
+  /**
+   * Allow multiple files to be dropped.
+   *
+   * @default true
+   */
+  multiple?: boolean;
+  /**
+   * Call `preventDefault` even for drags that fail validation, suppressing the browser's default handling.
+   *
+   * @default false
+   */
+  preventDefaultForUnhandled?: boolean;
+  /**
+   * Fired when valid files are dropped on the target.
+   */
+  onDrop?: (files: File[] | null, event: DragEvent) => void;
+  /**
+   * Fired when a drag enters the target.
+   */
+  onEnter?: (files: File[] | null, event: DragEvent) => void;
+  /**
+   * Fired when a drag leaves the target.
+   */
+  onLeave?: (files: File[] | null, event: DragEvent) => void;
+  /**
+   * Fired repeatedly while a drag hovers over the target.
+   */
+  onOver?: (files: File[] | null, event: DragEvent) => void;
+}
+
+export interface UseDropZoneReturn {
+  /**
+   * Whether a valid drag is currently hovering over the target.
+   */
+  isOverDropZone: ShallowRef<boolean>;
+  /**
+   * The dropped files, or `null` when nothing has been dropped yet.
+   */
+  files: ShallowRef<File[] | null>;
+  /**
+   * Whether the Drag and Drop API is available in the current environment.
+   */
+  isSupported: ComputedRef<boolean>;
+}
+
+type DropZoneEventType = 'enter' | 'over' | 'leave' | 'drop';
+
+/**
+ * @name useDropZone
+ * @category Elements
+ * @description Create a drag-and-drop file drop zone on a target element or document.
+ *
+ * @param {MaybeComputedElementRef | MaybeRefOrGetter<Document | null | undefined>} target - The element (or document) acting as the drop zone.
+ * @param {UseDropZoneOptions | UseDropZoneOptions['onDrop']} [options] - Drop zone options, or a shorthand `onDrop` callback.
+ * @returns {UseDropZoneReturn} The reactive drop zone state.
+ *
+ * @example
+ * const dropZone = useTemplateRef<HTMLElement>('dropZone');
+ * const { isOverDropZone, files } = useDropZone(dropZone, {
+ *   dataTypes: ['image/png'],
+ *   onDrop: (files) => console.log(files),
+ * });
+ *
+ * @since 0.0.15
+ */
+export function useDropZone(
+  target: MaybeComputedElementRef | MaybeRefOrGetter<Document | null | undefined>,
+  options: UseDropZoneOptions | UseDropZoneOptions['onDrop'] = {},
+): UseDropZoneReturn {
+  const _options: UseDropZoneOptions = isFunction(options) ? { onDrop: options } : options;
+  const {
+    window = defaultWindow,
+    navigator = defaultNavigator,
+    multiple = true,
+    preventDefaultForUnhandled = false,
+  } = _options;
+
+  const isOverDropZone = shallowRef(false);
+  const files = shallowRef<File[] | null>(null);
+  const isSupported = useSupported(() => window && 'DataTransfer' in window);
+
+  let counter = 0;
+  let isValid = true;
+
+  const getFiles = (event: DragEvent): File[] | null => {
+    const list = Array.from(event.dataTransfer?.files ?? []);
+    if (list.length === 0)
+      return null;
+    return multiple ? list : [list[0]!];
+  };
+
+  const checkDataTypes = (types: readonly string[]): boolean => {
+    // `dataTypes` may be a predicate function, so unwrap with `unref` (not `toValue`,
+    // which would call a function as a getter).
+    const dataTypes = unref(_options.dataTypes);
+
+    if (isFunction(dataTypes))
+      return dataTypes(types);
+
+    if (!dataTypes?.length)
+      return true;
+
+    if (types.length === 0)
+      return false;
+
+    return types.every(type => dataTypes.some(allowed => type.includes(allowed)));
+  };
+
+  const checkValidity = (items: DataTransferItemList): boolean => {
+    const types = Array.from(items ?? []).map(item => item.type);
+    const dataTypesValid = checkDataTypes(types);
+    const multipleFilesValid = multiple || items.length <= 1;
+
+    return dataTypesValid && multipleFilesValid;
+  };
+
+  // Safari fires drag events without populating `dataTransfer.items`, so validation
+  // cannot be trusted there — always accept the drag and let `drop` resolve files.
+  const isSafari = (): boolean => {
+    if (!navigator || !window)
+      return false;
+    return /^(?:(?!chrome|android).)*safari/i.test(navigator.userAgent) && !('chrome' in window);
+  };
+
+  const handleDragEvent = (event: DragEvent, type: DropZoneEventType): void => {
+    const items = event.dataTransfer?.items;
+    isValid = (items && checkValidity(items)) ?? false;
+
+    if (preventDefaultForUnhandled)
+      event.preventDefault();
+
+    if (!isSafari() && !isValid) {
+      if (event.dataTransfer)
+        event.dataTransfer.dropEffect = 'none';
+      return;
+    }
+
+    event.preventDefault();
+    if (event.dataTransfer)
+      event.dataTransfer.dropEffect = 'copy';
+
+    const currentFiles = getFiles(event);
+
+    switch (type) {
+      case 'enter':
+        counter += 1;
+        isOverDropZone.value = true;
+        _options.onEnter?.(null, event);
+        break;
+      case 'over':
+        _options.onOver?.(null, event);
+        break;
+      case 'leave':
+        counter -= 1;
+        if (counter === 0)
+          isOverDropZone.value = false;
+        _options.onLeave?.(null, event);
+        break;
+      case 'drop':
+        counter = 0;
+        isOverDropZone.value = false;
+        if (isValid) {
+          files.value = currentFiles;
+          _options.onDrop?.(currentFiles, event);
+        }
+        break;
+    }
+  };
+
+  const resolveTarget = (): EventTarget | null | undefined => {
+    const value = toValue(target as MaybeRefOrGetter<unknown>);
+    if (value instanceof Document)
+      return value;
+    return unrefElement(target as MaybeComputedElementRef);
+  };
+
+  useEventListener<DragEvent>(resolveTarget, 'dragenter', event => handleDragEvent(event, 'enter'));
+  useEventListener<DragEvent>(resolveTarget, 'dragover', event => handleDragEvent(event, 'over'));
+  useEventListener<DragEvent>(resolveTarget, 'dragleave', event => handleDragEvent(event, 'leave'));
+  useEventListener<DragEvent>(resolveTarget, 'drop', event => handleDragEvent(event, 'drop'));
+
+  return {
+    isOverDropZone,
+    files,
+    isSupported,
+  };
+}
diff --git a/vue/toolkit/src/composables/elements/useElementBounding/demo.vue b/vue/toolkit/src/composables/elements/useElementBounding/demo.vue
new file mode 100644
index 0000000..59b4110
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useElementBounding/demo.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useElementBounding } from './index';
+
+type Timing = 'sync' | 'next-frame';
+
+const timing = ref<Timing>('sync');
+
+const target = ref<HTMLElement>();
+
+// Two independent measurers so toggling the timing mode is visible live.
+const sync = useElementBounding(target, { updateTiming: 'sync' });
+const nextFrame = useElementBounding(target, { updateTiming: 'next-frame' });
+
+const bounds = computed(() => (timing.value === 'sync' ? sync : nextFrame));
+
+// Resizable, draggable-ish target driven by sliders so every field updates live.
+const size = ref(56);
+
+const metrics = computed(() => [
+  { label: 'width', value: bounds.value.width.value },
+  { label: 'height', value: bounds.value.height.value },
+  { label: 'top', value: bounds.value.top.value },
+  { label: 'left', value: bounds.value.left.value },
+  { label: 'right', value: bounds.value.right.value },
+  { label: 'bottom', value: bounds.value.bottom.value },
+  { label: 'x', value: bounds.value.x.value },
+  { label: 'y', value: bounds.value.y.value },
+]);
+
+function fmt(n: number) {
+  return Math.round(n);
+}
+</script>
+
+<template>
+  <div class="w-full max-w-md flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">getBoundingClientRect</span>
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+          {{ timing }}
+        </span>
+      </div>
+
+      <!-- The measured target. Resizing it mutates the reactive bounds. -->
+      <div class="relative h-40 overflow-hidden rounded-lg border border-(--border) bg-(--bg-inset)">
+        <div
+          ref="target"
+          class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 grid place-items-center rounded-lg bg-(--accent) text-(--accent-fg) shadow transition-[width,height] duration-150"
+          :style="{ width: `${size}px`, height: `${size}px` }"
+        >
+          <span class="font-mono text-xs font-semibold tabular-nums">{{ fmt(bounds.width.value) }}×{{ fmt(bounds.height.value) }}</span>
+        </div>
+      </div>
+
+      <div class="grid grid-cols-4 gap-2">
+        <div
+          v-for="m in metrics"
+          :key="m.label"
+          class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center"
+        >
+          <div class="font-mono text-sm font-bold tabular-nums text-(--fg)">{{ fmt(m.value) }}</div>
+          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">{{ m.label }}</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="bound-size">Size</label>
+        <span class="font-mono text-xs tabular-nums text-(--fg-muted)">{{ size }}px</span>
+      </div>
+      <input
+        id="bound-size"
+        v-model.number="size"
+        type="range"
+        min="32"
+        max="140"
+        step="2"
+        class="w-full accent-(--accent) cursor-pointer"
+      >
+    </div>
+
+    <div class="flex items-center gap-2">
+      <button
+        v-for="opt in (['sync', 'next-frame'] as Timing[])"
+        :key="opt"
+        type="button"
+        class="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+        :class="timing === opt
+          ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
+          : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+        @click="timing = opt"
+      >
+        {{ opt }}
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="bounds.update()"
+      >
+        Update
+      </button>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      <span class="font-mono">next-frame</span> batches rapid scroll/resize reads into one measurement per animation frame.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/elements/useElementBounding/index.test.ts b/vue/toolkit/src/composables/elements/useElementBounding/index.test.ts
new file mode 100644
index 0000000..121f4e8
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useElementBounding/index.test.ts
@@ -0,0 +1,153 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, ref } from 'vue';
+import { useElementBounding } from '.';
+
+class StubObserver {
+  observe = vi.fn();
+  disconnect = vi.fn();
+  unobserve = vi.fn();
+  takeRecords = vi.fn(() => []);
+}
+
+describe(useElementBounding, () => {
+  beforeEach(() => {
+    vi.stubGlobal('ResizeObserver', StubObserver);
+    vi.stubGlobal('MutationObserver', StubObserver);
+  });
+  afterEach(() => vi.unstubAllGlobals());
+
+  it('reads the bounding rect immediately', () => {
+    const el = document.createElement('div');
+    el.getBoundingClientRect = () => ({
+      width: 100, height: 50, top: 10, left: 20, right: 120, bottom: 60, x: 20, y: 10,
+    } as DOMRect);
+
+    const scope = effectScope();
+    let bounds: ReturnType<typeof useElementBounding>;
+    scope.run(() => {
+      bounds = useElementBounding(ref(el));
+    });
+
+    expect(bounds!.width.value).toBe(100);
+    expect(bounds!.height.value).toBe(50);
+    expect(bounds!.top.value).toBe(10);
+    expect(bounds!.left.value).toBe(20);
+    expect(bounds!.x.value).toBe(20);
+    expect(bounds!.y.value).toBe(10);
+    scope.stop();
+  });
+
+  it('update recomputes the rect', () => {
+    const el = document.createElement('div');
+    let w = 10;
+    el.getBoundingClientRect = () => ({ width: w, height: 0, top: 0, left: 0, right: 0, bottom: 0, x: 0, y: 0 } as DOMRect);
+
+    const scope = effectScope();
+    let bounds: ReturnType<typeof useElementBounding>;
+    scope.run(() => {
+      bounds = useElementBounding(ref(el));
+    });
+
+    expect(bounds!.width.value).toBe(10);
+    w = 200;
+    bounds!.update();
+    expect(bounds!.width.value).toBe(200);
+    scope.stop();
+  });
+
+  it('resets to zero when target is null', () => {
+    const scope = effectScope();
+    let bounds: ReturnType<typeof useElementBounding>;
+    scope.run(() => {
+      bounds = useElementBounding(ref(null));
+    });
+
+    expect(bounds!.width.value).toBe(0);
+    expect(bounds!.height.value).toBe(0);
+    scope.stop();
+  });
+
+  // NOTE: defaultWindow is captured at import time, so vi.stubGlobal does not
+  // reach requestAnimationFrame. We inject a fake window via the `window` option.
+  it('defers measurement to the next frame with updateTiming "next-frame"', () => {
+    const raf = vi.fn((cb: FrameRequestCallback) => {
+      cb(0);
+      return 1;
+    });
+    const fakeWindow = { requestAnimationFrame: raf, cancelAnimationFrame: vi.fn() } as unknown as Window;
+
+    const el = document.createElement('div');
+    let w = 10;
+    el.getBoundingClientRect = () => ({ width: w, height: 0, top: 0, left: 0, right: 0, bottom: 0, x: 0, y: 0 } as DOMRect);
+
+    const scope = effectScope();
+    let bounds: ReturnType<typeof useElementBounding>;
+    scope.run(() => {
+      bounds = useElementBounding(ref(el), { updateTiming: 'next-frame', window: fakeWindow });
+    });
+
+    // The immediate update went through requestAnimationFrame
+    expect(raf).toHaveBeenCalled();
+    expect(bounds!.width.value).toBe(10);
+
+    w = 200;
+    bounds!.update();
+    expect(bounds!.width.value).toBe(200);
+    scope.stop();
+  });
+
+  it('coalesces multiple "next-frame" updates into a single read per frame', () => {
+    let scheduled: FrameRequestCallback | undefined;
+    const raf = vi.fn((cb: FrameRequestCallback) => {
+      scheduled = cb;
+      return 1;
+    });
+    const fakeWindow = { requestAnimationFrame: raf, cancelAnimationFrame: vi.fn() } as unknown as Window;
+
+    const el = document.createElement('div');
+    const getRect = vi.fn(() => ({ width: 0, height: 0, top: 0, left: 0, right: 0, bottom: 0, x: 0, y: 0 } as DOMRect));
+    el.getBoundingClientRect = getRect;
+
+    const scope = effectScope();
+    let bounds: ReturnType<typeof useElementBounding>;
+    scope.run(() => {
+      bounds = useElementBounding(ref(el), { updateTiming: 'next-frame', immediate: false, window: fakeWindow });
+    });
+
+    bounds!.update();
+    bounds!.update();
+    bounds!.update();
+
+    // Only one frame was scheduled despite three update() calls
+    expect(raf).toHaveBeenCalledTimes(1);
+    expect(getRect).not.toHaveBeenCalled();
+
+    // Flushing the frame reads the rect exactly once
+    scheduled!(0);
+    expect(getRect).toHaveBeenCalledTimes(1);
+
+    // A new update after the frame flushed schedules a fresh frame
+    bounds!.update();
+    expect(raf).toHaveBeenCalledTimes(2);
+    scope.stop();
+  });
+
+  it('cancels a pending frame on scope dispose', () => {
+    const raf = vi.fn(() => 42);
+    const caf = vi.fn();
+    const fakeWindow = { requestAnimationFrame: raf, cancelAnimationFrame: caf } as unknown as Window;
+
+    const el = document.createElement('div');
+    el.getBoundingClientRect = () => ({ width: 0, height: 0, top: 0, left: 0, right: 0, bottom: 0, x: 0, y: 0 } as DOMRect);
+
+    const scope = effectScope();
+    scope.run(() => {
+      useElementBounding(ref(el), { updateTiming: 'next-frame', window: fakeWindow });
+    });
+
+    // The immediate update scheduled a frame that never ran (raf returns id without invoking)
+    expect(raf).toHaveBeenCalled();
+    scope.stop();
+    expect(caf).toHaveBeenCalledWith(42);
+  });
+});
diff --git a/vue/toolkit/src/composables/elements/useElementBounding/index.ts b/vue/toolkit/src/composables/elements/useElementBounding/index.ts
new file mode 100644
index 0000000..c0cbe9e
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useElementBounding/index.ts
@@ -0,0 +1,199 @@
+import { shallowRef, watch } from 'vue';
+import type { Ref } from 'vue';
+import { defaultWindow } from '@/types';
+import type { ConfigurableWindow } from '@/types';
+import type { MaybeComputedElementRef } from '@/composables/component/unrefElement';
+import { unrefElement } from '@/composables/component/unrefElement';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import { useResizeObserver } from '@/composables/elements/useResizeObserver';
+import { useMutationObserver } from '@/composables/elements/useMutationObserver';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+
+export interface UseElementBoundingOptions extends ConfigurableWindow {
+  /**
+   * Reset values to 0 when the element is unmounted
+   *
+   * @default true
+   */
+  reset?: boolean;
+
+  /**
+   * Recalculate on window resize
+   *
+   * @default true
+   */
+  windowResize?: boolean;
+
+  /**
+   * Recalculate on window scroll
+   *
+   * @default true
+   */
+  windowScroll?: boolean;
+
+  /**
+   * Calculate immediately on mount
+   *
+   * @default true
+   */
+  immediate?: boolean;
+
+  /**
+   * When to recalculate the bounding box.
+   *
+   * - `'sync'` measures synchronously, the moment a trigger fires.
+   * - `'next-frame'` defers measurement to the next animation frame. This
+   *   batches bursts of triggers (e.g. rapid scroll/resize) into a single
+   *   read per frame, avoiding repeated layout thrash from `getBoundingClientRect`.
+   *
+   * @default 'sync'
+   */
+  updateTiming?: 'sync' | 'next-frame';
+}
+
+export interface UseElementBoundingReturn {
+  height: Ref<number>;
+  width: Ref<number>;
+  top: Ref<number>;
+  right: Ref<number>;
+  bottom: Ref<number>;
+  left: Ref<number>;
+  x: Ref<number>;
+  y: Ref<number>;
+  /**
+   * Manually recalculate the bounding box, honouring `updateTiming`.
+   */
+  update: () => void;
+}
+
+/**
+ * @name useElementBounding
+ * @category Elements
+ * @description Reactive bounding box of an element (`getBoundingClientRect`),
+ * kept in sync via `ResizeObserver`, `MutationObserver`, and window scroll/resize.
+ * Supports deferring reads to the next animation frame to avoid layout thrash.
+ *
+ * @param {MaybeComputedElementRef} target Element to measure
+ * @param {UseElementBoundingOptions} [options={}] Options
+ * @returns {UseElementBoundingReturn} Reactive bounds and a manual `update`
+ *
+ * @example
+ * const { width, height, top, left } = useElementBounding(el);
+ *
+ * @example
+ * // Batch rapid scroll/resize reads into one measurement per frame
+ * const bounds = useElementBounding(el, { updateTiming: 'next-frame' });
+ *
+ * @since 0.0.15
+ */
+export function useElementBounding(
+  target: MaybeComputedElementRef,
+  options: UseElementBoundingOptions = {},
+): UseElementBoundingReturn {
+  const {
+    reset = true,
+    windowResize = true,
+    windowScroll = true,
+    immediate = true,
+    updateTiming = 'sync',
+    window = defaultWindow,
+  } = options;
+
+  const height = shallowRef(0);
+  const width = shallowRef(0);
+  const top = shallowRef(0);
+  const right = shallowRef(0);
+  const bottom = shallowRef(0);
+  const left = shallowRef(0);
+  const x = shallowRef(0);
+  const y = shallowRef(0);
+
+  function recalculate() {
+    const el = unrefElement(target);
+
+    if (!el) {
+      if (reset) {
+        height.value = 0;
+        width.value = 0;
+        top.value = 0;
+        right.value = 0;
+        bottom.value = 0;
+        left.value = 0;
+        x.value = 0;
+        y.value = 0;
+      }
+      return;
+    }
+
+    const rect = el.getBoundingClientRect();
+
+    height.value = rect.height;
+    width.value = rect.width;
+    top.value = rect.top;
+    right.value = rect.right;
+    bottom.value = rect.bottom;
+    left.value = rect.left;
+    x.value = rect.x;
+    y.value = rect.y;
+  }
+
+  // Pending animation frame id, so deferred reads coalesce and can be cancelled.
+  // `pending` is the source of truth for coalescing; `rafId` is only kept for
+  // cancellation. A separate flag avoids ordering bugs when the scheduler runs
+  // the callback synchronously (the assignment below would otherwise clobber the
+  // id the callback just cleared).
+  let pending = false;
+  let rafId: number | undefined;
+
+  function update() {
+    if (updateTiming === 'next-frame' && window) {
+      // Coalesce: only schedule one read per frame
+      if (pending)
+        return;
+
+      pending = true;
+      rafId = window.requestAnimationFrame(() => {
+        pending = false;
+        rafId = undefined;
+        recalculate();
+      });
+      return;
+    }
+
+    recalculate();
+  }
+
+  useResizeObserver(target, update);
+  watch(() => unrefElement(target), el => !el && update());
+  useMutationObserver(target, update, { attributeFilter: ['style', 'class'] });
+
+  if (windowScroll)
+    useEventListener('scroll', update, { capture: true, passive: true });
+
+  if (windowResize)
+    useEventListener('resize', update, { passive: true });
+
+  if (window && immediate)
+    update();
+
+  // Cancel any pending frame so we don't read a detached/disposed element
+  tryOnScopeDispose(() => {
+    if (pending && rafId !== undefined && window)
+      window.cancelAnimationFrame(rafId);
+
+    pending = false;
+    rafId = undefined;
+  });
+
+  return {
+    height,
+    width,
+    top,
+    right,
+    bottom,
+    left,
+    x,
+    y,
+    update,
+  };
+}
diff --git a/vue/toolkit/src/composables/elements/useElementSize/demo.vue b/vue/toolkit/src/composables/elements/useElementSize/demo.vue
new file mode 100644
index 0000000..474cb27
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useElementSize/demo.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useElementSize } from './index';
+
+const target = ref<HTMLElement>();
+
+// content-box vs border-box is the headline option, so observe it directly.
+const { width, height, stop } = useElementSize(target, { width: 0, height: 0 }, { box: 'border-box' });
+
+const padding = ref(16);
+const observing = ref(true);
+
+function toggleObserver() {
+  if (observing.value) {
+    stop();
+    observing.value = false;
+  }
+  // Re-observing requires a fresh composable instance; keep the demo honest by
+  // only offering "stop" once and noting it below.
+}
+
+function fmt(n: number) {
+  return n.toFixed(0);
+}
+</script>
+
+<template>
+  <div class="w-full max-w-md flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">ResizeObserver</span>
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+          <span class="size-1.5 rounded-full" :class="observing ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+          {{ observing ? 'Observing' : 'Stopped' }}
+        </span>
+      </div>
+
+      <!-- Native textarea resize handle makes the element user-resizable. -->
+      <textarea
+        ref="target"
+        readonly
+        :style="{ padding: `${padding}px` }"
+        class="w-full min-h-24 resize rounded-lg border border-(--border-strong) bg-(--bg-inset) text-sm leading-relaxed text-(--fg-muted) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >Drag the bottom-right corner to resize me. The width and height update live as the ResizeObserver fires. Border-box sizing includes the padding below.</textarea>
+
+      <div class="grid grid-cols-2 gap-3">
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
+          <div class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ fmt(width) }}</div>
+          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">width px</div>
+        </div>
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
+          <div class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ fmt(height) }}</div>
+          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">height px</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="size-padding">Padding (border-box)</label>
+        <span class="font-mono text-xs tabular-nums text-(--fg-muted)">{{ padding }}px</span>
+      </div>
+      <input
+        id="size-padding"
+        v-model.number="padding"
+        type="range"
+        min="0"
+        max="40"
+        step="2"
+        class="w-full accent-(--accent) cursor-pointer"
+      >
+    </div>
+
+    <button
+      type="button"
+      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+      :disabled="!observing"
+      @click="toggleObserver"
+    >
+      {{ observing ? 'Stop observing' : 'Observer stopped' }}
+    </button>
+
+    <p class="text-xs text-(--fg-subtle)">
+      With <span class="font-mono">box: 'border-box'</span> the reported size includes padding, so the slider changes the numbers without resizing the element.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/elements/useElementSize/index.test.ts b/vue/toolkit/src/composables/elements/useElementSize/index.test.ts
new file mode 100644
index 0000000..140fcb2
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useElementSize/index.test.ts
@@ -0,0 +1,229 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, ref } from 'vue';
+import { useElementSize } from '.';
+
+interface StubInstance {
+  cb: ResizeObserverCallback;
+  observe: ReturnType<typeof vi.fn>;
+  disconnect: ReturnType<typeof vi.fn>;
+  unobserve: ReturnType<typeof vi.fn>;
+}
+
+let instances: StubInstance[] = [];
+
+class StubResizeObserver {
+  observe = vi.fn();
+  disconnect = vi.fn();
+  unobserve = vi.fn();
+  cb: ResizeObserverCallback;
+  constructor(cb: ResizeObserverCallback) {
+    this.cb = cb;
+    instances.push(this);
+  }
+}
+
+function fire(width: number, height: number, fields: Partial<ResizeObserverEntry> = {}) {
+  instances[0]!.cb([
+    {
+      contentBoxSize: [{ inlineSize: width, blockSize: height }],
+      contentRect: { width, height },
+      ...fields,
+    } as unknown as ResizeObserverEntry,
+  ], {} as ResizeObserver);
+}
+
+describe(useElementSize, () => {
+  beforeEach(() => {
+    instances = [];
+    vi.stubGlobal('ResizeObserver', StubResizeObserver);
+  });
+  afterEach(() => vi.unstubAllGlobals());
+
+  it('uses the initial size when the target resolves to no element', () => {
+    const scope = effectScope();
+    let size: ReturnType<typeof useElementSize>;
+    scope.run(() => {
+      size = useElementSize(ref(undefined), { width: 5, height: 7 });
+    });
+
+    expect(size!.width.value).toBe(5);
+    expect(size!.height.value).toBe(7);
+    scope.stop();
+  });
+
+  it('measures synchronously on mount via offset size', () => {
+    const el = document.createElement('div');
+    Object.defineProperty(el, 'offsetWidth', { value: 80, configurable: true });
+    Object.defineProperty(el, 'offsetHeight', { value: 60, configurable: true });
+    const scope = effectScope();
+    let size: ReturnType<typeof useElementSize>;
+    scope.run(() => {
+      size = useElementSize(ref(el), { width: 5, height: 7 });
+    });
+
+    // tryOnMounted runs synchronously outside a component, overwriting the initial size.
+    expect(size!.width.value).toBe(80);
+    expect(size!.height.value).toBe(60);
+    scope.stop();
+  });
+
+  it('reports size from contentBoxSize', () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let size: ReturnType<typeof useElementSize>;
+    scope.run(() => {
+      size = useElementSize(ref(el));
+    });
+
+    instances[0]!.cb([
+      { contentBoxSize: [{ inlineSize: 100, blockSize: 50 }], contentRect: { width: 0, height: 0 } } as unknown as ResizeObserverEntry,
+    ], {} as ResizeObserver);
+
+    expect(size!.width.value).toBe(100);
+    expect(size!.height.value).toBe(50);
+    scope.stop();
+  });
+
+  it('falls back to contentRect when box sizes are missing', () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let size: ReturnType<typeof useElementSize>;
+    scope.run(() => {
+      size = useElementSize(ref(el));
+    });
+
+    instances[0]!.cb([
+      { contentBoxSize: undefined, contentRect: { width: 30, height: 40 } } as unknown as ResizeObserverEntry,
+    ], {} as ResizeObserver);
+
+    expect(size!.width.value).toBe(30);
+    expect(size!.height.value).toBe(40);
+    scope.stop();
+  });
+
+  it('normalises a single (non-array) ResizeObserverSize object', () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let size: ReturnType<typeof useElementSize>;
+    scope.run(() => {
+      size = useElementSize(ref(el));
+    });
+
+    // Older Firefox reports box sizes as a single object rather than an array.
+    instances[0]!.cb([
+      { contentBoxSize: { inlineSize: 12, blockSize: 34 }, contentRect: { width: 0, height: 0 } } as unknown as ResizeObserverEntry,
+    ], {} as ResizeObserver);
+
+    expect(size!.width.value).toBe(12);
+    expect(size!.height.value).toBe(34);
+    scope.stop();
+  });
+
+  it('sums multiple box fragments in a single pass', () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let size: ReturnType<typeof useElementSize>;
+    scope.run(() => {
+      size = useElementSize(ref(el));
+    });
+
+    instances[0]!.cb([
+      {
+        contentBoxSize: [
+          { inlineSize: 10, blockSize: 5 },
+          { inlineSize: 20, blockSize: 7 },
+        ],
+        contentRect: { width: 0, height: 0 },
+      } as unknown as ResizeObserverEntry,
+    ], {} as ResizeObserver);
+
+    expect(size!.width.value).toBe(30);
+    expect(size!.height.value).toBe(12);
+    scope.stop();
+  });
+
+  it('reads borderBoxSize when box is "border-box"', () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let size: ReturnType<typeof useElementSize>;
+    scope.run(() => {
+      size = useElementSize(ref(el), { width: 0, height: 0 }, { box: 'border-box' });
+    });
+
+    instances[0]!.cb([
+      {
+        borderBoxSize: [{ inlineSize: 200, blockSize: 120 }],
+        contentBoxSize: [{ inlineSize: 1, blockSize: 1 }],
+        contentRect: { width: 0, height: 0 },
+      } as unknown as ResizeObserverEntry,
+    ], {} as ResizeObserver);
+
+    expect(size!.width.value).toBe(200);
+    expect(size!.height.value).toBe(120);
+    scope.stop();
+  });
+
+  it('measures SVG elements via getBoundingClientRect', () => {
+    const el = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    el.getBoundingClientRect = () => ({ width: 64, height: 48 }) as DOMRect;
+    const scope = effectScope();
+    let size: ReturnType<typeof useElementSize>;
+    scope.run(() => {
+      size = useElementSize(ref(el), { width: 0, height: 0 }, { window: globalThis as unknown as Window });
+    });
+
+    // Even though the entry advertises a different box size, the SVG path wins.
+    instances[0]!.cb([
+      { contentBoxSize: [{ inlineSize: 999, blockSize: 999 }], contentRect: { width: 999, height: 999 } } as unknown as ResizeObserverEntry,
+    ], {} as ResizeObserver);
+
+    expect(size!.width.value).toBe(64);
+    expect(size!.height.value).toBe(48);
+    scope.stop();
+  });
+
+  it('resets to 0 when the element detaches', async () => {
+    const el = ref<HTMLElement | undefined>(document.createElement('div'));
+    const scope = effectScope();
+    let size: ReturnType<typeof useElementSize>;
+    scope.run(() => {
+      size = useElementSize(el, { width: 5, height: 7 });
+    });
+
+    fire(100, 50);
+    expect(size!.width.value).toBe(100);
+
+    el.value = undefined;
+    await nextTick();
+
+    expect(size!.width.value).toBe(0);
+    expect(size!.height.value).toBe(0);
+    scope.stop();
+  });
+
+  it('stop() disconnects the observer and the detach watcher', async () => {
+    const el = ref<HTMLElement | undefined>(document.createElement('div'));
+    const scope = effectScope();
+    let size: ReturnType<typeof useElementSize>;
+    scope.run(() => {
+      size = useElementSize(el, { width: 0, height: 0 });
+    });
+
+    await nextTick();
+    expect(instances[0]!.disconnect).not.toHaveBeenCalled();
+
+    fire(100, 50);
+    expect(size!.width.value).toBe(100);
+
+    size!.stop();
+    // The observer is torn down so it stops delivering callbacks in a real browser.
+    expect(instances[0]!.disconnect).toHaveBeenCalled();
+
+    // The detach watcher is also stopped: clearing the target no longer resets the size to 0.
+    el.value = undefined;
+    await nextTick();
+    expect(size!.width.value).toBe(100);
+    expect(size!.height.value).toBe(50);
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/elements/useElementSize/index.ts b/vue/toolkit/src/composables/elements/useElementSize/index.ts
new file mode 100644
index 0000000..719df8f
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useElementSize/index.ts
@@ -0,0 +1,121 @@
+import { computed, shallowRef, watch } from 'vue';
+import type { ShallowRef } from 'vue';
+import { toArray } from '@robonen/stdlib';
+import type { ConfigurableWindow } from '@/types';
+import { defaultWindow } from '@/types';
+import type { MaybeComputedElementRef } from '@/composables/component/unrefElement';
+import { unrefElement } from '@/composables/component/unrefElement';
+import { useResizeObserver } from '@/composables/elements/useResizeObserver';
+import type { UseResizeObserverOptions } from '@/composables/elements/useResizeObserver';
+import { tryOnMounted } from '@/composables/lifecycle/tryOnMounted';
+
+export interface ElementSize {
+  width: number;
+  height: number;
+}
+
+export interface UseElementSizeOptions extends UseResizeObserverOptions, ConfigurableWindow {}
+
+export interface UseElementSizeReturn {
+  width: ShallowRef<number>;
+  height: ShallowRef<number>;
+  stop: () => void;
+}
+
+/**
+ * @name useElementSize
+ * @category Elements
+ * @description Reactive size of an element, backed by `ResizeObserver`.
+ * Measures synchronously on mount, handles SVG elements via `getBoundingClientRect`,
+ * and sums multiple box fragments (e.g. multi-column layouts).
+ *
+ * @param {MaybeComputedElementRef} target Element to measure (ref, getter, or component instance)
+ * @param {ElementSize} [initialSize={ width: 0, height: 0 }] Initial size, restored when the element detaches
+ * @param {UseElementSizeOptions} [options={}] Options forwarded to `ResizeObserver` (`box`, `window`)
+ * @returns {UseElementSizeReturn} Reactive `width`, `height`, and a `stop` handle
+ *
+ * @example
+ * const el = useTemplateRef('el');
+ * const { width, height } = useElementSize(el);
+ *
+ * @example
+ * const { width, height, stop } = useElementSize(el, { width: 100, height: 100 }, { box: 'border-box' });
+ *
+ * @since 0.0.15
+ */
+export function useElementSize(
+  target: MaybeComputedElementRef,
+  initialSize: ElementSize = { width: 0, height: 0 },
+  options: UseElementSizeOptions = {},
+): UseElementSizeReturn {
+  const { window = defaultWindow, box = 'content-box' } = options;
+
+  const width = shallowRef(initialSize.width);
+  const height = shallowRef(initialSize.height);
+
+  const isSVG = computed(() => unrefElement(target)?.namespaceURI?.includes('svg'));
+
+  const { stop: stopObserver } = useResizeObserver(target, ([entry]) => {
+    if (!entry)
+      return;
+
+    // SVG elements report unreliable box sizes in some browsers; measure the layout box instead.
+    if (window && isSVG.value) {
+      const el = unrefElement(target);
+      if (el) {
+        const rect = el.getBoundingClientRect();
+        width.value = rect.width;
+        height.value = rect.height;
+      }
+      return;
+    }
+
+    const boxSize = box === 'border-box'
+      ? entry.borderBoxSize
+      : box === 'content-box'
+        ? entry.contentBoxSize
+        : entry.devicePixelContentBoxSize;
+
+    if (boxSize) {
+      // Normalise the cross-browser `ResizeObserverSize | ReadonlyArray<ResizeObserverSize>` shape
+      // and sum fragments (e.g. multi-column layouts) in a single pass.
+      let nextWidth = 0;
+      let nextHeight = 0;
+      for (const size of toArray(boxSize as ResizeObserverSize | ResizeObserverSize[])) {
+        nextWidth += size.inlineSize;
+        nextHeight += size.blockSize;
+      }
+      width.value = nextWidth;
+      height.value = nextHeight;
+    }
+    else {
+      width.value = entry.contentRect.width;
+      height.value = entry.contentRect.height;
+    }
+  }, options);
+
+  // Provide a measurement immediately on mount, before the first observer callback fires.
+  tryOnMounted(() => {
+    const el = unrefElement(target);
+    if (el) {
+      width.value = 'offsetWidth' in el ? (el as HTMLElement).offsetWidth : initialSize.width;
+      height.value = 'offsetHeight' in el ? (el as HTMLElement).offsetHeight : initialSize.height;
+    }
+  });
+
+  // Reset to the initial size when the element is attached/detached.
+  const stopWatch = watch(
+    () => unrefElement(target),
+    (el) => {
+      width.value = el ? initialSize.width : 0;
+      height.value = el ? initialSize.height : 0;
+    },
+  );
+
+  const stop = (): void => {
+    stopObserver();
+    stopWatch();
+  };
+
+  return { width, height, stop };
+}
diff --git a/vue/toolkit/src/composables/elements/useElementVisibility/demo.vue b/vue/toolkit/src/composables/elements/useElementVisibility/demo.vue
new file mode 100644
index 0000000..f13ae2e
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useElementVisibility/demo.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useElementVisibility } from './index';
+
+const root = ref<HTMLElement>();
+const target = ref<HTMLElement>();
+
+// controls: true returns { isVisible, isSupported, isActive, pause, resume, stop }.
+const { isVisible, isActive, pause, resume } = useElementVisibility(target, {
+  controls: true,
+  root,
+  threshold: 0.5,
+});
+
+const seenCount = ref(0);
+
+// Count each time the card crosses into view (rising edge only).
+watch(isVisible, (visible, was) => {
+  if (visible && !was)
+    seenCount.value++;
+});
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">IntersectionObserver</span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
+        :class="isVisible
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        <span class="size-1.5 rounded-full" :class="isVisible ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+        {{ isVisible ? 'In view' : 'Hidden' }}
+      </span>
+    </div>
+
+    <!-- Scrollable root; the target card sits below the fold until scrolled. -->
+    <div
+      ref="root"
+      class="h-44 overflow-y-auto rounded-xl border border-(--border) bg-(--bg-inset) p-3"
+    >
+      <p class="text-sm text-(--fg-subtle)">Scroll down inside this box…</p>
+      <div class="h-40" />
+      <div
+        ref="target"
+        class="rounded-lg border border-(--border) bg-(--accent) p-4 text-center text-(--accent-fg) shadow transition"
+        :class="isVisible ? 'opacity-100 scale-100' : 'opacity-60 scale-95'"
+      >
+        <div class="text-sm font-semibold">Target element</div>
+        <div class="text-xs opacity-80">at least 50% visible to count</div>
+      </div>
+      <div class="h-24" />
+      <p class="text-sm text-(--fg-subtle)">…and back up to hide it again.</p>
+    </div>
+
+    <div class="grid grid-cols-2 gap-3">
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
+        <div class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ seenCount }}</div>
+        <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">times seen</div>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center flex flex-col items-center justify-center">
+        <div class="text-sm font-semibold" :class="isActive ? 'text-emerald-600 dark:text-emerald-400' : 'text-(--fg-muted)'">
+          {{ isActive ? 'Active' : 'Paused' }}
+        </div>
+        <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">observer</div>
+      </div>
+    </div>
+
+    <button
+      type="button"
+      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+      @click="isActive ? pause() : resume()"
+    >
+      {{ isActive ? 'Pause observer' : 'Resume observer' }}
+    </button>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/elements/useElementVisibility/index.test.ts b/vue/toolkit/src/composables/elements/useElementVisibility/index.test.ts
new file mode 100644
index 0000000..30e3d0d
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useElementVisibility/index.test.ts
@@ -0,0 +1,145 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, isReadonly, ref } from 'vue';
+import type { UseElementVisibilityReturn } from '.';
+import { useElementVisibility } from '.';
+
+let instances: StubIntersectionObserver[] = [];
+let lastInit: IntersectionObserverInit | undefined;
+
+class StubIntersectionObserver {
+  observe = vi.fn();
+  disconnect = vi.fn();
+  unobserve = vi.fn();
+  takeRecords = vi.fn();
+  cb: IntersectionObserverCallback;
+  init?: IntersectionObserverInit;
+  constructor(cb: IntersectionObserverCallback, init?: IntersectionObserverInit) {
+    this.cb = cb;
+    this.init = init;
+    lastInit = init;
+    instances.push(this);
+  }
+}
+
+describe(useElementVisibility, () => {
+  beforeEach(() => {
+    instances = [];
+    lastInit = undefined;
+    vi.stubGlobal('IntersectionObserver', StubIntersectionObserver);
+  });
+  afterEach(() => vi.unstubAllGlobals());
+
+  it('is false initially and updates on intersection', () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let isVisible: UseElementVisibilityReturn<false>;
+    scope.run(() => {
+      isVisible = useElementVisibility(ref(el));
+    });
+
+    expect(isVisible!.value).toBeFalsy();
+
+    instances[0]!.cb([{ isIntersecting: true, time: 1 } as IntersectionObserverEntry], {} as IntersectionObserver);
+    expect(isVisible!.value).toBeTruthy();
+
+    instances[0]!.cb([{ isIntersecting: false, time: 2 } as IntersectionObserverEntry], {} as IntersectionObserver);
+    expect(isVisible!.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('uses the most recent entry by time', () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let isVisible: UseElementVisibilityReturn<false>;
+    scope.run(() => {
+      isVisible = useElementVisibility(ref(el));
+    });
+
+    instances[0]!.cb([
+      { isIntersecting: false, time: 5 } as IntersectionObserverEntry,
+      { isIntersecting: true, time: 10 } as IntersectionObserverEntry,
+    ], {} as IntersectionObserver);
+    expect(isVisible!.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('respects initialValue', () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let isVisible: UseElementVisibilityReturn<false>;
+    scope.run(() => {
+      isVisible = useElementVisibility(ref(el), { initialValue: true });
+    });
+
+    expect(isVisible!.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('returns a writable shallow ref (not readonly) by default', () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let isVisible: UseElementVisibilityReturn<false>;
+    scope.run(() => {
+      isVisible = useElementVisibility(ref(el));
+    });
+
+    expect(isReadonly(isVisible!)).toBeFalsy();
+    scope.stop();
+  });
+
+  it('forwards rootMargin and threshold to the observer', () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    scope.run(() => useElementVisibility(ref(el), { rootMargin: '10px', threshold: [0, 0.5, 1] }));
+
+    expect(lastInit?.rootMargin).toBe('10px');
+    expect(lastInit?.threshold).toEqual([0, 0.5, 1]);
+    scope.stop();
+  });
+
+  it('stops observing after first visibility when once is true', () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let isVisible: UseElementVisibilityReturn<false>;
+    scope.run(() => {
+      isVisible = useElementVisibility(ref(el), { once: true });
+    });
+
+    const observer = instances[0]!;
+
+    // Not visible yet: should not disconnect.
+    observer.cb([{ isIntersecting: false, time: 1 } as IntersectionObserverEntry], {} as IntersectionObserver);
+    expect(observer.disconnect).not.toHaveBeenCalled();
+    expect(isVisible!.value).toBeFalsy();
+
+    // Becomes visible: stop() should disconnect the observer.
+    observer.cb([{ isIntersecting: true, time: 2 } as IntersectionObserverEntry], {} as IntersectionObserver);
+    expect(isVisible!.value).toBeTruthy();
+    expect(observer.disconnect).toHaveBeenCalled();
+    scope.stop();
+  });
+
+  it('exposes observer controls when controls is true', () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let result: UseElementVisibilityReturn<true>;
+    scope.run(() => {
+      result = useElementVisibility(ref(el), { controls: true });
+    });
+
+    expect(result!).toHaveProperty('isVisible');
+    expect(result!).toHaveProperty('stop');
+    expect(result!).toHaveProperty('pause');
+    expect(result!).toHaveProperty('resume');
+    expect(result!).toHaveProperty('isSupported');
+    expect(result!).toHaveProperty('isActive');
+
+    expect(result!.isVisible.value).toBeFalsy();
+    instances[0]!.cb([{ isIntersecting: true, time: 1 } as IntersectionObserverEntry], {} as IntersectionObserver);
+    expect(result!.isVisible.value).toBeTruthy();
+
+    result!.stop();
+    expect(instances[0]!.disconnect).toHaveBeenCalled();
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/elements/useElementVisibility/index.ts b/vue/toolkit/src/composables/elements/useElementVisibility/index.ts
new file mode 100644
index 0000000..ee1e3ab
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useElementVisibility/index.ts
@@ -0,0 +1,108 @@
+import { shallowRef } from 'vue';
+import type { ShallowRef } from 'vue';
+import type { MaybeComputedElementRef } from '@/composables/component/unrefElement';
+import { useIntersectionObserver } from '@/composables/elements/useIntersectionObserver';
+import type { UseIntersectionObserverOptions, UseIntersectionObserverReturn } from '@/composables/elements/useIntersectionObserver';
+
+export interface UseElementVisibilityOptions<Controls extends boolean = false> extends UseIntersectionObserverOptions {
+  /**
+   * The initial visibility state, used before the observer reports its first entry.
+   *
+   * @default false
+   */
+  initialValue?: boolean;
+
+  /**
+   * Stop observing as soon as the element becomes visible for the first time.
+   *
+   * @default false
+   */
+  once?: boolean;
+
+  /**
+   * Expose the underlying observer controls (`pause`, `resume`, `stop`, ...)
+   * alongside the visibility ref instead of returning the ref directly.
+   *
+   * @default false
+   */
+  controls?: Controls;
+}
+
+export interface UseElementVisibilityReturnWithControls extends UseIntersectionObserverReturn {
+  /**
+   * Whether the element is currently visible within the root/viewport.
+   */
+  isVisible: ShallowRef<boolean>;
+}
+
+export type UseElementVisibilityReturn<Controls extends boolean = false>
+  = Controls extends true
+    ? UseElementVisibilityReturnWithControls
+    : ShallowRef<boolean>;
+
+/**
+ * @name useElementVisibility
+ * @category Elements
+ * @description Track whether an element is visible within the viewport (or a
+ * custom scroll root), backed by `IntersectionObserver`.
+ *
+ * @param {MaybeComputedElementRef} target Element to track
+ * @param {UseElementVisibilityOptions} [options={}] Options
+ * @returns {UseElementVisibilityReturn} Visibility ref, or `{ isVisible, ...controls }` when `controls` is `true`
+ *
+ * @example
+ * const isVisible = useElementVisibility(el);
+ *
+ * @example
+ * const { isVisible, stop } = useElementVisibility(el, { controls: true, once: true });
+ *
+ * @since 0.0.15
+ */
+export function useElementVisibility(
+  target: MaybeComputedElementRef,
+  options?: UseElementVisibilityOptions<false>,
+): UseElementVisibilityReturn<false>;
+export function useElementVisibility(
+  target: MaybeComputedElementRef,
+  options: UseElementVisibilityOptions<true>,
+): UseElementVisibilityReturn<true>;
+export function useElementVisibility(
+  target: MaybeComputedElementRef,
+  options: UseElementVisibilityOptions<boolean> = {},
+): UseElementVisibilityReturn<boolean> {
+  const {
+    initialValue = false,
+    once = false,
+    controls = false,
+    ...observerOptions
+  } = options;
+
+  const isVisible = shallowRef(initialValue);
+
+  const observer = useIntersectionObserver(target, (entries) => {
+    // Use the most recent entry to reflect the latest state.
+    let latest = isVisible.value;
+    let latestTime = 0;
+
+    for (const entry of entries) {
+      if (entry.time >= latestTime) {
+        latestTime = entry.time;
+        latest = entry.isIntersecting;
+      }
+    }
+
+    isVisible.value = latest;
+
+    if (once && latest)
+      observer.stop();
+  }, observerOptions);
+
+  if (controls) {
+    return {
+      ...observer,
+      isVisible,
+    };
+  }
+
+  return isVisible;
+}
diff --git a/vue/toolkit/src/composables/elements/useFocusGuard/demo.vue b/vue/toolkit/src/composables/elements/useFocusGuard/demo.vue
new file mode 100644
index 0000000..c27546e
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useFocusGuard/demo.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { defineComponent, h, ref } from 'vue';
+import { useFocusGuard } from './index';
+
+// useFocusGuard() returns void: on mount it inserts a pair of invisible,
+// focusable sentinel elements at the boundaries of the DOM tree. They keep
+// focus order consistent (e.g. for modal/overlay focus management) and are
+// removed when the last consumer unmounts.
+
+// Mount the guard through a child so we can toggle it on/off in the demo.
+const GuardHost = defineComponent({
+  name: 'GuardHost',
+  setup() {
+    useFocusGuard('demo-guard');
+    return () => h('span', { class: 'sr-only' }, 'focus guards mounted');
+  },
+});
+
+const enabled = ref(false);
+const focused = ref<string | null>(null);
+
+const fields = [
+  { id: 'name', label: 'Name', value: 'Ada Lovelace' },
+  { id: 'email', label: 'Email', value: 'ada@analytical.engine' },
+];
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <component :is="GuardHost" v-if="enabled" />
+
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Focus guards</span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
+        :class="enabled
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        <span class="size-1.5 rounded-full" :class="enabled ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+        {{ enabled ? 'Mounted' : 'Off' }}
+      </span>
+    </div>
+
+    <!-- A small focusable form to feel tab order with the guards active. -->
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+      <div v-for="f in fields" :key="f.id" class="flex flex-col gap-1">
+        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" :for="f.id">{{ f.label }}</label>
+        <input
+          :id="f.id"
+          :value="f.value"
+          type="text"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          @focus="focused = f.label"
+          @blur="focused = null"
+        >
+      </div>
+
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @focus="focused = 'Submit'"
+        @blur="focused = null"
+      >
+        Submit
+      </button>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+      focused: {{ focused ?? 'nothing' }}
+    </div>
+
+    <button
+      type="button"
+      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+      @click="enabled = !enabled"
+    >
+      {{ enabled ? 'Remove focus guards' : 'Mount focus guards' }}
+    </button>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Guards are invisible <span class="font-mono">tabindex="0"</span> sentinels inserted at the page boundaries. Tab past the last field with them on to feel focus wrap around for overlays and modals.
+    </p>
+  </div>
+</template>
diff --git a/web/vue/src/composables/browser/useFocusGuard/index.test.ts b/vue/toolkit/src/composables/elements/useFocusGuard/index.test.ts
similarity index 96%
rename from web/vue/src/composables/browser/useFocusGuard/index.test.ts
rename to vue/toolkit/src/composables/elements/useFocusGuard/index.test.ts
index be5e308..1215525 100644
--- a/web/vue/src/composables/browser/useFocusGuard/index.test.ts
+++ b/vue/toolkit/src/composables/elements/useFocusGuard/index.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, beforeEach, afterEach, expect } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import { mount } from '@vue/test-utils';
 import { defineComponent, nextTick } from 'vue';
 import { useFocusGuard } from '.';
@@ -10,7 +10,7 @@ const setupFocusGuard = (namespace?: string) => {
         useFocusGuard(namespace);
       },
       template: '<div></div>',
-    })
+    }),
   );
 };
 
diff --git a/web/vue/src/composables/browser/useFocusGuard/index.ts b/vue/toolkit/src/composables/elements/useFocusGuard/index.ts
similarity index 95%
rename from web/vue/src/composables/browser/useFocusGuard/index.ts
rename to vue/toolkit/src/composables/elements/useFocusGuard/index.ts
index db2e83c..7d9145b 100644
--- a/web/vue/src/composables/browser/useFocusGuard/index.ts
+++ b/vue/toolkit/src/composables/elements/useFocusGuard/index.ts
@@ -6,18 +6,18 @@ let counter = 0;
 
 /**
  * @name useFocusGuard
- * @category Browser
+ * @category Elements
  * @description Adds a pair of focus guards at the boundaries of the DOM tree to ensure consistent focus behavior
- * 
+ *
  * @param {string} [namespace] - A namespace to group the focus guards
  * @returns {void}
- * 
+ *
  * @example
  * useFocusGuard();
- * 
+ *
  * @example
  * useFocusGuard('my-namespace');
- * 
+ *
  * @since 0.0.2
  */
 export function useFocusGuard(namespace?: string) {
@@ -31,7 +31,7 @@ export function useFocusGuard(namespace?: string) {
   const removeGuard = () => {
     if (counter <= 1)
       manager.removeGuard();
-      
+
     counter = Math.max(0, counter - 1);
   };
 
diff --git a/vue/toolkit/src/composables/elements/useIntersectionObserver/demo.vue b/vue/toolkit/src/composables/elements/useIntersectionObserver/demo.vue
new file mode 100644
index 0000000..87925ca
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useIntersectionObserver/demo.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useIntersectionObserver } from './index';
+
+const sections = [
+  { id: 'intro', label: 'Introduction', color: 'bg-sky-500' },
+  { id: 'install', label: 'Installation', color: 'bg-emerald-500' },
+  { id: 'usage', label: 'Usage', color: 'bg-violet-500' },
+  { id: 'api', label: 'API Reference', color: 'bg-amber-500' },
+];
+
+const root = ref<HTMLElement>();
+const itemEls = ref<HTMLElement[]>([]);
+
+// Reactive threshold + rootMargin demonstrate live re-observation.
+const threshold = ref(0.5);
+
+// Track which section is currently the most-visible "active" one (scroll-spy).
+const ratios = ref<Record<string, number>>({});
+
+useIntersectionObserver(
+  itemEls,
+  (entries) => {
+    for (const entry of entries) {
+      const id = (entry.target as HTMLElement).dataset.id;
+      if (id)
+        ratios.value = { ...ratios.value, [id]: entry.intersectionRatio };
+    }
+  },
+  {
+    root,
+    threshold: () => [0, 0.25, 0.5, 0.75, 1],
+  },
+);
+
+const activeId = computed(() => {
+  let best: string | null = null;
+  let bestRatio = threshold.value;
+  for (const s of sections) {
+    const r = ratios.value[s.id] ?? 0;
+    if (r >= bestRatio) {
+      bestRatio = r;
+      best = s.id;
+    }
+  }
+  return best;
+});
+</script>
+
+<template>
+  <div class="w-full max-w-md flex flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Scroll spy</span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        active: {{ activeId ?? '—' }}
+      </span>
+    </div>
+
+    <div class="flex gap-3">
+      <!-- Nav reflects which section dominates the viewport. -->
+      <nav class="flex w-32 shrink-0 flex-col gap-1">
+        <span
+          v-for="s in sections"
+          :key="s.id"
+          class="flex items-center gap-2 rounded-lg border px-2.5 py-1.5 text-xs font-medium transition"
+          :class="activeId === s.id
+            ? 'border-(--border-strong) bg-(--bg-inset) text-(--fg)'
+            : 'border-transparent text-(--fg-muted)'"
+        >
+          <span class="size-2 rounded-full transition" :class="[s.color, activeId === s.id ? 'opacity-100' : 'opacity-30']" />
+          {{ s.label }}
+        </span>
+      </nav>
+
+      <!-- Scrollable content; each section is an observed target. -->
+      <div
+        ref="root"
+        class="h-56 flex-1 overflow-y-auto rounded-xl border border-(--border) bg-(--bg-inset) p-3 flex flex-col gap-3 scroll-smooth"
+      >
+        <section
+          v-for="s in sections"
+          :key="s.id"
+          ref="itemEls"
+          :data-id="s.id"
+          class="rounded-lg border border-(--border) bg-(--bg-elevated) p-4 transition"
+          :class="activeId === s.id ? 'ring-2 ring-(--ring)' : ''"
+        >
+          <h3 class="text-sm font-semibold text-(--fg)">{{ s.label }}</h3>
+          <p class="mt-1 text-xs text-(--fg-subtle)">
+            Visibility: {{ Math.round((ratios[s.id] ?? 0) * 100) }}%
+          </p>
+          <div class="mt-2 h-16 rounded bg-(--bg-inset)" />
+        </section>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="io-threshold">Active threshold</label>
+        <span class="font-mono text-xs tabular-nums text-(--fg-muted)">{{ Math.round(threshold * 100) }}%</span>
+      </div>
+      <input
+        id="io-threshold"
+        v-model.number="threshold"
+        type="range"
+        min="0.1"
+        max="0.9"
+        step="0.1"
+        class="w-full accent-(--accent) cursor-pointer"
+      >
+      <p class="text-xs text-(--fg-subtle)">A section becomes active once at least this much of it is visible inside the scroll root.</p>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/elements/useIntersectionObserver/index.test.ts b/vue/toolkit/src/composables/elements/useIntersectionObserver/index.test.ts
new file mode 100644
index 0000000..3289cd6
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useIntersectionObserver/index.test.ts
@@ -0,0 +1,206 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, ref } from 'vue';
+import { useIntersectionObserver } from '.';
+
+interface StubInstance {
+  cb: IntersectionObserverCallback;
+  options?: IntersectionObserverInit;
+  observe: ReturnType<typeof vi.fn>;
+  disconnect: ReturnType<typeof vi.fn>;
+}
+
+let instances: StubInstance[] = [];
+
+class StubIntersectionObserver {
+  observe = vi.fn();
+  disconnect = vi.fn();
+  unobserve = vi.fn();
+  takeRecords = vi.fn();
+  cb: IntersectionObserverCallback;
+  options?: IntersectionObserverInit;
+  constructor(cb: IntersectionObserverCallback, options?: IntersectionObserverInit) {
+    this.cb = cb;
+    this.options = options;
+    instances.push(this);
+  }
+}
+
+describe(useIntersectionObserver, () => {
+  beforeEach(() => {
+    instances = [];
+    vi.stubGlobal('IntersectionObserver', StubIntersectionObserver);
+  });
+  afterEach(() => vi.unstubAllGlobals());
+
+  it('observes the target immediately', () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    scope.run(() => useIntersectionObserver(ref(el), vi.fn()));
+
+    expect(instances).toHaveLength(1);
+    expect(instances[0]!.observe).toHaveBeenCalledWith(el);
+    scope.stop();
+  });
+
+  it('does not observe when immediate is false', () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    scope.run(() => useIntersectionObserver(ref(el), vi.fn(), { immediate: false }));
+
+    expect(instances).toHaveLength(0);
+    scope.stop();
+  });
+
+  it('pause disconnects and resume re-observes', async () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let controls: ReturnType<typeof useIntersectionObserver>;
+    scope.run(() => {
+      controls = useIntersectionObserver(ref(el), vi.fn());
+    });
+
+    controls!.pause();
+    expect(instances[0]!.disconnect).toHaveBeenCalled();
+    expect(controls!.isActive.value).toBeFalsy();
+
+    controls!.resume();
+    await nextTick();
+    expect(controls!.isActive.value).toBeTruthy();
+    expect(instances).toHaveLength(2);
+    scope.stop();
+  });
+
+  it('stop disconnects and marks inactive', () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let controls: ReturnType<typeof useIntersectionObserver>;
+    scope.run(() => {
+      controls = useIntersectionObserver(ref(el), vi.fn());
+    });
+
+    controls!.stop();
+    expect(instances[0]!.disconnect).toHaveBeenCalled();
+    expect(controls!.isActive.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('invokes the callback with entries', () => {
+    const el = document.createElement('div');
+    const callback = vi.fn();
+    const scope = effectScope();
+    scope.run(() => useIntersectionObserver(ref(el), callback));
+
+    const entry = { isIntersecting: true, time: 1 } as IntersectionObserverEntry;
+    instances[0]!.cb([entry], instances[0] as unknown as IntersectionObserver);
+    expect(callback).toHaveBeenCalled();
+    scope.stop();
+  });
+
+  it('observes an array of targets', () => {
+    const a = document.createElement('div');
+    const b = document.createElement('div');
+    const scope = effectScope();
+    scope.run(() => useIntersectionObserver([ref(a), ref(b)], vi.fn()));
+
+    expect(instances).toHaveLength(1);
+    expect(instances[0]!.observe).toHaveBeenCalledWith(a);
+    expect(instances[0]!.observe).toHaveBeenCalledWith(b);
+    scope.stop();
+  });
+
+  it('tracks a reactive target ref of an array', async () => {
+    const a = document.createElement('div');
+    const b = document.createElement('div');
+    const list = ref([a]);
+    const scope = effectScope();
+    scope.run(() => useIntersectionObserver(list, vi.fn()));
+
+    expect(instances).toHaveLength(1);
+    expect(instances[0]!.observe).toHaveBeenCalledTimes(1);
+
+    list.value = [a, b];
+    await nextTick();
+
+    // recreated with both elements
+    expect(instances).toHaveLength(2);
+    expect(instances[1]!.observe).toHaveBeenCalledWith(a);
+    expect(instances[1]!.observe).toHaveBeenCalledWith(b);
+    scope.stop();
+  });
+
+  it('tracks a getter target', async () => {
+    const a = document.createElement('div');
+    const enabled = ref(false);
+    const scope = effectScope();
+    scope.run(() => useIntersectionObserver(() => (enabled.value ? a : null), vi.fn()));
+
+    // null target -> no observer
+    expect(instances).toHaveLength(0);
+
+    enabled.value = true;
+    await nextTick();
+    expect(instances).toHaveLength(1);
+    expect(instances[0]!.observe).toHaveBeenCalledWith(a);
+    scope.stop();
+  });
+
+  it('passes rootMargin and threshold to the observer', () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    scope.run(() => useIntersectionObserver(ref(el), vi.fn(), { rootMargin: '10px', threshold: [0, 0.5, 1] }));
+
+    expect(instances[0]!.options?.rootMargin).toBe('10px');
+    expect(instances[0]!.options?.threshold).toEqual([0, 0.5, 1]);
+    scope.stop();
+  });
+
+  it('reacts to a reactive rootMargin', async () => {
+    const el = document.createElement('div');
+    const rootMargin = ref('0px');
+    const scope = effectScope();
+    scope.run(() => useIntersectionObserver(ref(el), vi.fn(), { rootMargin }));
+
+    expect(instances[0]!.options?.rootMargin).toBe('0px');
+
+    rootMargin.value = '20px';
+    await nextTick();
+
+    expect(instances).toHaveLength(2);
+    expect(instances[1]!.options?.rootMargin).toBe('20px');
+    scope.stop();
+  });
+
+  it('reacts to a reactive threshold', async () => {
+    const el = document.createElement('div');
+    const threshold = ref<number | number[]>(0);
+    const scope = effectScope();
+    scope.run(() => useIntersectionObserver(ref(el), vi.fn(), { threshold }));
+
+    expect(instances[0]!.options?.threshold).toBe(0);
+
+    threshold.value = 0.75;
+    await nextTick();
+
+    expect(instances).toHaveLength(2);
+    expect(instances[1]!.options?.threshold).toBe(0.75);
+    scope.stop();
+  });
+
+  it('reports unsupported and never constructs an observer', () => {
+    // jsdom has no native IntersectionObserver; remove the stub so the
+    // feature detection `'IntersectionObserver' in window` reports false.
+    vi.unstubAllGlobals();
+    delete (globalThis as Record<string, unknown>).IntersectionObserver;
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let controls: ReturnType<typeof useIntersectionObserver>;
+    scope.run(() => {
+      controls = useIntersectionObserver(ref(el), vi.fn());
+    });
+
+    expect(controls!.isSupported.value).toBeFalsy();
+    // stop should be a safe no-op
+    expect(() => controls!.stop()).not.toThrow();
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/elements/useIntersectionObserver/index.ts b/vue/toolkit/src/composables/elements/useIntersectionObserver/index.ts
new file mode 100644
index 0000000..ef157c8
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useIntersectionObserver/index.ts
@@ -0,0 +1,150 @@
+import { computed, readonly, ref, toValue, watch } from 'vue';
+import type { MaybeRefOrGetter, Ref } from 'vue';
+import { noop, toArray } from '@robonen/stdlib';
+import type { ConfigurableWindow } from '@/types';
+import { defaultWindow } from '@/types';
+import type { MaybeComputedElementRef, MaybeElement } from '@/composables/component/unrefElement';
+import { unrefElement } from '@/composables/component/unrefElement';
+import { useSupported } from '@/composables/utilities/useSupported';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+
+export interface UseIntersectionObserverOptions extends ConfigurableWindow {
+  /**
+   * The element or document used as the viewport for checking visibility
+   */
+  root?: MaybeComputedElementRef | Document;
+
+  /**
+   * Margin around the root. Reactive — pass a ref or getter to update it.
+   *
+   * @default '0px'
+   */
+  rootMargin?: MaybeRefOrGetter<string>;
+
+  /**
+   * Threshold(s) at which to trigger the callback. Reactive — pass a ref or
+   * getter to update it.
+   *
+   * @default 0
+   */
+  threshold?: MaybeRefOrGetter<number | number[]>;
+
+  /**
+   * Start observing immediately
+   *
+   * @default true
+   */
+  immediate?: boolean;
+}
+
+export interface UseIntersectionObserverReturn {
+  isSupported: Readonly<Ref<boolean>>;
+  isActive: Readonly<Ref<boolean>>;
+  pause: () => void;
+  resume: () => void;
+  stop: () => void;
+}
+
+/**
+ * @name useIntersectionObserver
+ * @category Elements
+ * @description Detect when an element enters or leaves the viewport via
+ * `IntersectionObserver`. Accepts a single target, an array of targets, or a
+ * ref/getter resolving to either, plus reactive `rootMargin` and `threshold`.
+ *
+ * @param {MaybeComputedElementRef | MaybeComputedElementRef[] | MaybeRefOrGetter<MaybeElement[]>} target Element(s) to observe
+ * @param {IntersectionObserverCallback} callback Invoked with the observer entries
+ * @param {UseIntersectionObserverOptions} [options={}] Options
+ * @returns {UseIntersectionObserverReturn} Observer controls
+ *
+ * @example
+ * useIntersectionObserver(el, ([{ isIntersecting }]) => {
+ *   visible.value = isIntersecting;
+ * });
+ *
+ * @since 0.0.15
+ */
+export function useIntersectionObserver(
+  target: MaybeComputedElementRef | MaybeComputedElementRef[] | MaybeRefOrGetter<MaybeElement[]>,
+  callback: IntersectionObserverCallback,
+  options: UseIntersectionObserverOptions = {},
+): UseIntersectionObserverReturn {
+  const {
+    root,
+    rootMargin = '0px',
+    threshold = 0,
+    window = defaultWindow,
+    immediate = true,
+  } = options;
+
+  const isSupported = useSupported(() => window && 'IntersectionObserver' in window);
+
+  const targets = computed(() => {
+    const value = toValue(target) as MaybeElement | MaybeElement[];
+    return toArray(value as MaybeElement)
+      .map(el => unrefElement(el))
+      .filter((el): el is Element => Boolean(el));
+  });
+
+  const isActive = ref(immediate);
+
+  let cleanup = noop;
+
+  const stopWatch = isSupported.value
+    ? watch(
+        () => [
+          targets.value,
+          unrefElement(root as MaybeComputedElementRef),
+          toValue(rootMargin),
+          toValue(threshold),
+          isActive.value,
+        ] as const,
+        ([els, rootEl, margin, thresh, active]) => {
+          cleanup();
+
+          if (!active || !els.length)
+            return;
+
+          const observer = new IntersectionObserver(callback, {
+            root: (rootEl as Element | null) ?? (root as Document | undefined),
+            rootMargin: margin,
+            threshold: thresh,
+          });
+
+          for (const el of els)
+            observer.observe(el);
+
+          cleanup = () => {
+            observer.disconnect();
+            cleanup = noop;
+          };
+        },
+        { immediate: true, flush: 'post' },
+      )
+    : noop;
+
+  const resume = (): void => {
+    isActive.value = true;
+  };
+
+  const pause = (): void => {
+    cleanup();
+    isActive.value = false;
+  };
+
+  const stop = (): void => {
+    cleanup();
+    stopWatch();
+    isActive.value = false;
+  };
+
+  tryOnScopeDispose(stop);
+
+  return {
+    isSupported,
+    isActive: readonly(isActive),
+    pause,
+    resume,
+    stop,
+  };
+}
diff --git a/vue/toolkit/src/composables/elements/useMutationObserver/demo.vue b/vue/toolkit/src/composables/elements/useMutationObserver/demo.vue
new file mode 100644
index 0000000..460d995
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useMutationObserver/demo.vue
@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { ref, shallowRef, useTemplateRef } from 'vue';
+import { useMutationObserver } from './index';
+
+const target = useTemplateRef<HTMLElement>('target');
+
+// Mutable state that drives the observed element so changes are visible.
+const labels = ref(['Inbox', 'Drafts', 'Archive']);
+const accent = ref(false);
+const fontSize = ref(14);
+
+const mutationCount = shallowRef(0);
+const lastType = shallowRef<MutationRecordType | '—'>('—');
+const log = ref<string[]>([]);
+
+const { isSupported, isActive, pause, resume } = useMutationObserver(
+  target,
+  (records) => {
+    for (const record of records) {
+      mutationCount.value++;
+      lastType.value = record.type;
+
+      let detail = record.type as string;
+      if (record.type === 'attributes')
+        detail = `attribute "${record.attributeName}"`;
+      else if (record.type === 'childList')
+        detail = `children +${record.addedNodes.length} −${record.removedNodes.length}`;
+
+      log.value.unshift(detail);
+      if (log.value.length > 5)
+        log.value.pop();
+    }
+  },
+  { attributes: true, childList: true, subtree: true, attributeFilter: ['style', 'class'] },
+);
+
+function addLabel() {
+  const pool = ['Spam', 'Sent', 'Starred', 'Trash', 'Snoozed', 'Important'];
+  labels.value.push(pool[labels.value.length % pool.length]);
+}
+
+function removeLabel() {
+  labels.value.pop();
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">MutationObserver</span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        <span class="size-1.5 rounded-full transition" :class="isActive ? 'bg-emerald-500' : 'bg-amber-500'" />
+        {{ isActive ? 'Observing' : 'Paused' }}
+      </span>
+    </div>
+
+    <p v-if="!isSupported" class="rounded-lg border border-amber-500/30 bg-amber-500/10 p-3 text-sm text-amber-600 dark:text-amber-400">
+      MutationObserver is not supported in this browser.
+    </p>
+
+    <template v-else>
+      <!-- Observed subtree: every attribute/child change fires the callback -->
+      <div
+        ref="target"
+        class="rounded-xl border p-4 transition"
+        :class="accent ? 'border-(--accent) bg-(--accent-subtle)' : 'border-(--border) bg-(--bg-elevated)'"
+        :style="{ fontSize: `${fontSize}px` }"
+      >
+        <div class="mb-2 text-xs font-medium uppercase tracking-wide" :class="accent ? 'text-(--accent-text)' : 'text-(--fg-subtle)'">
+          Observed element
+        </div>
+        <div class="flex flex-wrap gap-1.5">
+          <span
+            v-for="(label, i) in labels"
+            :key="`${label}-${i}`"
+            class="inline-flex items-center rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+          >
+            {{ label }}
+          </span>
+          <span v-if="!labels.length" class="text-xs text-(--fg-subtle)">No labels</span>
+        </div>
+      </div>
+
+      <div class="grid grid-cols-2 gap-2">
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
+          <div class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ mutationCount }}</div>
+          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">mutations</div>
+        </div>
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
+          <div class="truncate font-mono text-sm font-bold text-(--fg)">{{ lastType }}</div>
+          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">last record type</div>
+        </div>
+      </div>
+
+      <div class="grid grid-cols-2 gap-2">
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="addLabel"
+        >
+          Add child
+        </button>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          :disabled="!labels.length"
+          @click="removeLabel"
+        >
+          Remove child
+        </button>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="accent = !accent"
+        >
+          Toggle class
+        </button>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="fontSize = fontSize === 14 ? 18 : 14"
+        >
+          Toggle style
+        </button>
+      </div>
+
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <div class="mb-1.5 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Recent records</div>
+        <ul v-if="log.length" class="flex flex-col gap-1 font-mono text-xs text-(--fg)">
+          <li v-for="(entry, i) in log" :key="i" class="truncate">{{ entry }}</li>
+        </ul>
+        <p v-else class="font-mono text-xs text-(--fg-subtle)">Mutate the element above to record changes.</p>
+      </div>
+
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="isActive ? pause() : resume()"
+      >
+        {{ isActive ? 'Pause observer' : 'Resume observer' }}
+      </button>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/elements/useMutationObserver/index.test.ts b/vue/toolkit/src/composables/elements/useMutationObserver/index.test.ts
new file mode 100644
index 0000000..cc6e21e
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useMutationObserver/index.test.ts
@@ -0,0 +1,193 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, ref } from 'vue';
+import { useMutationObserver } from '.';
+
+let instances: Array<{ cb: MutationCallback; observe: ReturnType<typeof vi.fn>; disconnect: ReturnType<typeof vi.fn>; takeRecords: ReturnType<typeof vi.fn> }> = [];
+
+class StubMutationObserver {
+  observe = vi.fn();
+  disconnect = vi.fn();
+  takeRecords = vi.fn(() => []);
+  cb: MutationCallback;
+  constructor(cb: MutationCallback) {
+    this.cb = cb;
+    instances.push(this);
+  }
+}
+
+describe(useMutationObserver, () => {
+  beforeEach(() => {
+    instances = [];
+    vi.stubGlobal('MutationObserver', StubMutationObserver);
+  });
+  afterEach(() => vi.unstubAllGlobals());
+
+  it('observes the target with the given options', () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    scope.run(() => useMutationObserver(ref(el), vi.fn(), { attributes: true }));
+
+    expect(instances).toHaveLength(1);
+    expect(instances[0]!.observe).toHaveBeenCalledWith(el, { attributes: true });
+    scope.stop();
+  });
+
+  it('does not leak immediate/window into observer options', () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    scope.run(() => useMutationObserver(ref(el), vi.fn(), { childList: true, immediate: true }));
+
+    expect(instances[0]!.observe).toHaveBeenCalledWith(el, { childList: true });
+    scope.stop();
+  });
+
+  it('disconnects on stop', () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let stop: () => void;
+    scope.run(() => {
+      stop = useMutationObserver(ref(el), vi.fn()).stop;
+    });
+
+    stop!();
+    expect(instances[0]!.disconnect).toHaveBeenCalled();
+    scope.stop();
+  });
+
+  it('forwards records to the callback', () => {
+    const el = document.createElement('div');
+    const callback = vi.fn();
+    const scope = effectScope();
+    scope.run(() => useMutationObserver(ref(el), callback));
+
+    const records = [{ type: 'attributes' } as MutationRecord];
+    instances[0]!.cb(records, instances[0] as unknown as MutationObserver);
+    expect(callback).toHaveBeenCalledWith(records, expect.anything());
+    scope.stop();
+  });
+
+  it('observes an array of targets with a single observer', () => {
+    const a = document.createElement('div');
+    const b = document.createElement('span');
+    const scope = effectScope();
+    scope.run(() => useMutationObserver([ref(a), b], vi.fn(), { childList: true }));
+
+    expect(instances).toHaveLength(1);
+    expect(instances[0]!.observe).toHaveBeenCalledTimes(2);
+    expect(instances[0]!.observe).toHaveBeenCalledWith(a, { childList: true });
+    expect(instances[0]!.observe).toHaveBeenCalledWith(b, { childList: true });
+    scope.stop();
+  });
+
+  it('accepts a getter returning an array of targets', () => {
+    const a = document.createElement('div');
+    const b = document.createElement('span');
+    const scope = effectScope();
+    scope.run(() => useMutationObserver(() => [a, b], vi.fn(), { childList: true }));
+
+    expect(instances).toHaveLength(1);
+    expect(instances[0]!.observe).toHaveBeenCalledTimes(2);
+    scope.stop();
+  });
+
+  it('deduplicates repeated targets', () => {
+    const a = document.createElement('div');
+    const scope = effectScope();
+    scope.run(() => useMutationObserver([a, a, ref(a)], vi.fn(), { childList: true }));
+
+    expect(instances[0]!.observe).toHaveBeenCalledTimes(1);
+    scope.stop();
+  });
+
+  it('skips nullish targets', () => {
+    const scope = effectScope();
+    scope.run(() => useMutationObserver([ref(null), ref(undefined)], vi.fn(), { childList: true }));
+
+    expect(instances).toHaveLength(0);
+    scope.stop();
+  });
+
+  it('re-observes when a reactive target changes', async () => {
+    const el = document.createElement('div');
+    const target = ref<HTMLElement | null>(null);
+    const scope = effectScope();
+    scope.run(() => useMutationObserver(target, vi.fn(), { childList: true }));
+
+    await nextTick();
+    expect(instances).toHaveLength(0);
+
+    target.value = el;
+    await nextTick();
+    expect(instances).toHaveLength(1);
+    expect(instances[0]!.observe).toHaveBeenCalledWith(el, { childList: true });
+    scope.stop();
+  });
+
+  it('does not observe when immediate is false, then resumes', async () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let api: ReturnType<typeof useMutationObserver>;
+    scope.run(() => {
+      api = useMutationObserver(ref(el), vi.fn(), { attributes: true, immediate: false });
+    });
+
+    await nextTick();
+    expect(instances).toHaveLength(0);
+    expect(api!.isActive.value).toBeFalsy();
+
+    api!.resume();
+    await nextTick();
+    expect(instances).toHaveLength(1);
+    expect(api!.isActive.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('pause disconnects and flips isActive, resume re-observes', async () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let api: ReturnType<typeof useMutationObserver>;
+    scope.run(() => {
+      api = useMutationObserver(ref(el), vi.fn(), { attributes: true });
+    });
+
+    expect(instances).toHaveLength(1);
+
+    api!.pause();
+    expect(instances[0]!.disconnect).toHaveBeenCalled();
+    expect(api!.isActive.value).toBeFalsy();
+
+    api!.resume();
+    await nextTick();
+    expect(instances).toHaveLength(2);
+    scope.stop();
+  });
+
+  it('takeRecords proxies to the active observer and returns undefined when inactive', () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let api: ReturnType<typeof useMutationObserver>;
+    scope.run(() => {
+      api = useMutationObserver(ref(el), vi.fn());
+    });
+
+    expect(api!.takeRecords()).toEqual([]);
+    expect(instances[0]!.takeRecords).toHaveBeenCalled();
+
+    api!.stop();
+    expect(api!.takeRecords()).toBeUndefined();
+    scope.stop();
+  });
+
+  it('reports isSupported false when MutationObserver is missing', () => {
+    const scope = effectScope();
+    let api: ReturnType<typeof useMutationObserver>;
+    const el = document.createElement('div');
+    scope.run(() => {
+      api = useMutationObserver(ref(el), vi.fn(), { window: { foo: 1 } as unknown as Window & typeof globalThis });
+    });
+
+    expect(api!.isSupported.value).toBeFalsy();
+    expect(instances).toHaveLength(0);
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/elements/useMutationObserver/index.ts b/vue/toolkit/src/composables/elements/useMutationObserver/index.ts
new file mode 100644
index 0000000..1298450
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useMutationObserver/index.ts
@@ -0,0 +1,140 @@
+import { computed, readonly, ref, toValue, watch } from 'vue';
+import type { MaybeRefOrGetter, Ref } from 'vue';
+import { toArray } from '@robonen/stdlib';
+import type { ConfigurableWindow } from '@/types';
+import { defaultWindow } from '@/types';
+import type { MaybeComputedElementRef, MaybeElement } from '@/composables/component/unrefElement';
+import { unrefElement } from '@/composables/component/unrefElement';
+import { useSupported } from '@/composables/utilities/useSupported';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+
+export interface UseMutationObserverOptions extends MutationObserverInit, ConfigurableWindow {
+  /**
+   * Start observing immediately once a target is available
+   *
+   * @default true
+   */
+  immediate?: boolean;
+}
+
+export interface UseMutationObserverReturn {
+  isSupported: Readonly<Ref<boolean>>;
+  /**
+   * Whether the observer is currently active (not paused or stopped)
+   */
+  isActive: Readonly<Ref<boolean>>;
+  /**
+   * Temporarily disconnect the observer without tearing down the watcher.
+   * Re-observe with `resume`.
+   */
+  pause: () => void;
+  /**
+   * Re-attach the observer to the current target(s) after a `pause`.
+   */
+  resume: () => void;
+  /**
+   * Permanently stop observing and dispose the watcher.
+   */
+  stop: () => void;
+  /**
+   * Synchronously take and clear the observer's record queue
+   */
+  takeRecords: () => MutationRecord[] | undefined;
+}
+
+/**
+ * @name useMutationObserver
+ * @category Elements
+ * @description Watch for changes to the DOM tree via `MutationObserver`.
+ * Accepts a single target, an array of targets, or a getter returning either.
+ *
+ * @param {MaybeComputedElementRef | MaybeComputedElementRef[] | MaybeRefOrGetter<MaybeElement[]>} target Element(s) to observe
+ * @param {MutationCallback} callback Invoked with the mutation records
+ * @param {UseMutationObserverOptions} [options={}] Observer options (childList, attributes, …)
+ * @returns {UseMutationObserverReturn} `isSupported`, `isActive`, `pause`, `resume`, `stop`, and `takeRecords`
+ *
+ * @example
+ * useMutationObserver(el, (records) => {
+ *   console.log(records);
+ * }, { attributes: true });
+ *
+ * @example
+ * const { pause, resume } = useMutationObserver([elA, elB], onMutate, { childList: true });
+ *
+ * @since 0.0.15
+ */
+export function useMutationObserver(
+  target: MaybeComputedElementRef | MaybeComputedElementRef[] | MaybeRefOrGetter<MaybeElement[]>,
+  callback: MutationCallback,
+  options: UseMutationObserverOptions = {},
+): UseMutationObserverReturn {
+  const { window = defaultWindow, immediate = true, ...observerOptions } = options;
+
+  const isSupported = useSupported(() => window && 'MutationObserver' in window);
+
+  let observer: MutationObserver | undefined;
+
+  const isActive = ref(immediate);
+
+  const targets = computed(() => {
+    const value = toArray(toValue(target));
+    const set = new Set<Element>();
+
+    for (const item of value) {
+      const el = unrefElement(item as MaybeComputedElementRef);
+      if (el)
+        set.add(el);
+    }
+
+    return set;
+  });
+
+  const cleanup = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = undefined;
+    }
+  };
+
+  const takeRecords = () => observer?.takeRecords();
+
+  const stopWatch = watch(
+    () => [targets.value, isActive.value] as const,
+    ([els, active]) => {
+      cleanup();
+
+      if (!active || !isSupported.value || !window || !els.size)
+        return;
+
+      observer = new MutationObserver(callback);
+      for (const el of els)
+        observer.observe(el, observerOptions);
+    },
+    { immediate: true, flush: 'post' },
+  );
+
+  const resume = () => {
+    isActive.value = true;
+  };
+
+  const pause = () => {
+    cleanup();
+    isActive.value = false;
+  };
+
+  const stop = () => {
+    cleanup();
+    stopWatch();
+  };
+
+  tryOnScopeDispose(stop);
+
+  return {
+    isSupported,
+    isActive: readonly(isActive),
+    pause,
+    resume,
+    stop,
+    takeRecords,
+  };
+}
diff --git a/vue/toolkit/src/composables/elements/useParentElement/demo.vue b/vue/toolkit/src/composables/elements/useParentElement/demo.vue
new file mode 100644
index 0000000..05ca7e6
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useParentElement/demo.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { computed, ref, useTemplateRef } from 'vue';
+import { useParentElement } from './index';
+
+const child = useTemplateRef<HTMLElement>('child');
+
+// useParentElement returns a read-only shallow ref of the element's parent.
+const parent = useParentElement(child);
+
+// Reparent the child between two wrappers to watch the resolved parent change.
+const inSecond = ref(false);
+
+const parentInfo = computed(() => {
+  const el = parent.value;
+  if (!el)
+    return null;
+
+  return {
+    tag: el.tagName.toLowerCase(),
+    id: el.id || '—',
+    classes: el.className || '—',
+    width: Math.round(el.getBoundingClientRect().width),
+    height: Math.round(el.getBoundingClientRect().height),
+  };
+});
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">parentElement</span>
+
+    <!-- Two candidate parents; the child is teleported between them via v-if -->
+    <div class="flex flex-col gap-3">
+      <div
+        id="wrapper-a"
+        class="rounded-xl border border-dashed p-3 transition"
+        :class="!inSecond ? 'border-(--accent) bg-(--accent-subtle)' : 'border-(--border) bg-(--bg-elevated)'"
+      >
+        <div class="mb-2 text-xs font-medium uppercase tracking-wide" :class="!inSecond ? 'text-(--accent-text)' : 'text-(--fg-subtle)'">
+          #wrapper-a
+        </div>
+        <div
+          v-if="!inSecond"
+          ref="child"
+          class="rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2 text-sm font-medium text-(--fg)"
+        >
+          Tracked child
+        </div>
+        <div v-else class="text-xs text-(--fg-subtle)">empty</div>
+      </div>
+
+      <div
+        id="wrapper-b"
+        class="rounded-xl border border-dashed p-3 transition"
+        :class="inSecond ? 'border-(--accent) bg-(--accent-subtle)' : 'border-(--border) bg-(--bg-elevated)'"
+      >
+        <div class="mb-2 text-xs font-medium uppercase tracking-wide" :class="inSecond ? 'text-(--accent-text)' : 'text-(--fg-subtle)'">
+          #wrapper-b
+        </div>
+        <div
+          v-if="inSecond"
+          ref="child"
+          class="rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2 text-sm font-medium text-(--fg)"
+        >
+          Tracked child
+        </div>
+        <div v-else class="text-xs text-(--fg-subtle)">empty</div>
+      </div>
+    </div>
+
+    <button
+      type="button"
+      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+      @click="inSecond = !inSecond"
+    >
+      Move child to #wrapper-{{ inSecond ? 'a' : 'b' }}
+    </button>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+      <div class="mb-2 font-sans text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Resolved parent</div>
+      <template v-if="parentInfo">
+        <div class="flex justify-between gap-2">
+          <span class="text-(--fg-subtle)">tag</span>
+          <span class="text-(--accent-text)">&lt;{{ parentInfo.tag }}&gt;</span>
+        </div>
+        <div class="flex justify-between gap-2">
+          <span class="text-(--fg-subtle)">id</span>
+          <span class="truncate">{{ parentInfo.id }}</span>
+        </div>
+        <div class="flex justify-between gap-2">
+          <span class="text-(--fg-subtle)">size</span>
+          <span>{{ parentInfo.width }} × {{ parentInfo.height }}</span>
+        </div>
+      </template>
+      <div v-else class="font-sans text-xs text-(--fg-subtle)">Resolving parent on the client…</div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/elements/useParentElement/index.test.ts b/vue/toolkit/src/composables/elements/useParentElement/index.test.ts
new file mode 100644
index 0000000..6ca9432
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useParentElement/index.test.ts
@@ -0,0 +1,121 @@
+import { describe, expect, it } from 'vitest';
+import { defineComponent, nextTick, shallowRef } from 'vue';
+import { mount } from '@vue/test-utils';
+import type { UseParentElementReturn } from '.';
+import { useParentElement } from '.';
+
+describe(useParentElement, () => {
+  it('resolves to the parent of an explicit element ref', async () => {
+    const child = document.createElement('span');
+    const parent = document.createElement('div');
+    parent.appendChild(child);
+
+    const elRef = shallowRef<HTMLElement | null>(child);
+    const result = useParentElement(elRef);
+
+    await nextTick();
+
+    expect(result.value).toBe(parent);
+  });
+
+  it('reacts when the target element ref changes', async () => {
+    const parentA = document.createElement('div');
+    const childA = document.createElement('span');
+    parentA.appendChild(childA);
+
+    const parentB = document.createElement('section');
+    const childB = document.createElement('p');
+    parentB.appendChild(childB);
+
+    const elRef = shallowRef<HTMLElement | null>(childA);
+    const result = useParentElement(elRef);
+
+    await nextTick();
+    expect(result.value).toBe(parentA);
+
+    elRef.value = childB;
+    await nextTick();
+
+    expect(result.value).toBe(parentB);
+  });
+
+  it('accepts a getter as the target', async () => {
+    const child = document.createElement('span');
+    const parent = document.createElement('article');
+    parent.appendChild(child);
+
+    const result = useParentElement(() => child);
+
+    await nextTick();
+
+    expect(result.value).toBe(parent);
+  });
+
+  it('resolves to null/undefined when the element has no parent', async () => {
+    const orphan = document.createElement('span');
+    const result = useParentElement(shallowRef<HTMLElement | null>(orphan));
+
+    await nextTick();
+
+    expect(result.value).toBeFalsy();
+  });
+
+  it('resolves to undefined when the target ref is null (SSR / unmounted path)', async () => {
+    const elRef = shallowRef<HTMLElement | null>(null);
+    const result = useParentElement(elRef);
+
+    await nextTick();
+
+    expect(result.value).toBeUndefined();
+  });
+
+  it('updates to undefined when the target becomes null', async () => {
+    const child = document.createElement('span');
+    const parent = document.createElement('div');
+    parent.appendChild(child);
+
+    const elRef = shallowRef<HTMLElement | null>(child);
+    const result = useParentElement(elRef);
+
+    await nextTick();
+    expect(result.value).toBe(parent);
+
+    elRef.value = null;
+    await nextTick();
+
+    expect(result.value).toBeUndefined();
+  });
+
+  it('defaults to the current instance root element parent', async () => {
+    let result!: UseParentElementReturn;
+
+    const Child = defineComponent({
+      setup() {
+        result = useParentElement();
+        return {};
+      },
+      template: `<span class="leaf">leaf</span>`,
+    });
+
+    const Parent = defineComponent({
+      components: { Child },
+      template: `<div class="wrapper"><Child /></div>`,
+    });
+
+    const wrapper = mount(Parent);
+    await nextTick();
+
+    expect(result.value).toBe(wrapper.find('.wrapper').element);
+  });
+
+  it('does not throw outside a component instance (SSR-safe default)', () => {
+    let result!: UseParentElementReturn;
+
+    expect(() => {
+      result = useParentElement();
+    }).not.toThrow();
+
+    expect(result).toBeDefined();
+    expect(result.value).toBeUndefined();
+  });
+});
diff --git a/vue/toolkit/src/composables/elements/useParentElement/index.ts b/vue/toolkit/src/composables/elements/useParentElement/index.ts
new file mode 100644
index 0000000..af90bce
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useParentElement/index.ts
@@ -0,0 +1,49 @@
+import { shallowRef, watch } from 'vue';
+import type { MaybeRefOrGetter, ShallowRef } from 'vue';
+import { unrefElement } from '@/composables/component/unrefElement';
+import type { MaybeComputedElementRef } from '@/composables/component/unrefElement';
+import { useCurrentElement } from '@/composables/component/useCurrentElement';
+
+export type UseParentElementReturn
+  = Readonly<ShallowRef<HTMLElement | SVGElement | null | undefined>>;
+
+/**
+ * @name useParentElement
+ * @category Elements
+ * @description Reactive `parentElement` of a given element (or the current
+ * component instance's root element when no target is supplied). Resolves the
+ * target through `unrefElement`, so it accepts plain elements, template refs,
+ * component instances, getters and computed refs. A single `immediate` watcher
+ * tracks the resolved target and re-reads its parent only when the element
+ * itself changes — no extra lifecycle hooks or always-on observers. SSR-safe:
+ * stays `undefined` until the target is resolved on the client.
+ *
+ * @param {MaybeComputedElementRef | MaybeRefOrGetter<HTMLElement | SVGElement | null | undefined>} [element] Target element/ref/getter; defaults to the current instance's root element
+ * @returns {UseParentElementReturn} A read-only shallow ref of the resolved parent element
+ *
+ * @example
+ * // Parent of the current component's root element
+ * const parent = useParentElement();
+ *
+ * @example
+ * // Parent of a specific template ref
+ * const el = useTemplateRef<HTMLElement>('el');
+ * const parent = useParentElement(el);
+ *
+ * @since 0.0.15
+ */
+export function useParentElement(
+  element: MaybeComputedElementRef | MaybeRefOrGetter<HTMLElement | SVGElement | null | undefined> = useCurrentElement<HTMLElement | SVGAElement>(),
+): UseParentElementReturn {
+  const parentElement = shallowRef<HTMLElement | SVGElement | null | undefined>();
+
+  watch(
+    () => unrefElement(element as MaybeComputedElementRef),
+    (el) => {
+      parentElement.value = (el as Element | null | undefined)?.parentElement;
+    },
+    { immediate: true, flush: 'post' },
+  );
+
+  return parentElement;
+}
diff --git a/vue/toolkit/src/composables/elements/useResizeObserver/demo.vue b/vue/toolkit/src/composables/elements/useResizeObserver/demo.vue
new file mode 100644
index 0000000..025dabd
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useResizeObserver/demo.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { reactive, shallowRef, useTemplateRef } from 'vue';
+import { useResizeObserver } from './index';
+
+const target = useTemplateRef<HTMLElement>('target');
+
+const size = reactive({ width: 0, height: 0 });
+const callbacks = shallowRef(0);
+
+const { isSupported, isActive, pause, resume } = useResizeObserver(
+  target,
+  ([entry]) => {
+    if (!entry)
+      return;
+
+    const { width, height } = entry.contentRect;
+    size.width = Math.round(width);
+    size.height = Math.round(height);
+    callbacks.value++;
+  },
+);
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">ResizeObserver</span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        <span class="size-1.5 rounded-full transition" :class="isActive ? 'bg-emerald-500' : 'bg-amber-500'" />
+        {{ isActive ? 'Observing' : 'Paused' }}
+      </span>
+    </div>
+
+    <p v-if="!isSupported" class="rounded-lg border border-amber-500/30 bg-amber-500/10 p-3 text-sm text-amber-600 dark:text-amber-400">
+      ResizeObserver is not supported in this browser.
+    </p>
+
+    <template v-else>
+      <!-- Drag the bottom-right handle to resize; the observer reports new dimensions -->
+      <div
+        ref="target"
+        class="relative grid min-h-32 min-w-40 max-w-full resize overflow-auto rounded-xl border border-(--border) bg-(--bg-elevated) p-4 place-items-center"
+        style="width: 16rem; height: 8rem;"
+      >
+        <div class="pointer-events-none select-none text-center">
+          <div class="font-mono text-3xl font-bold tabular-nums text-(--fg)">
+            {{ size.width }}<span class="text-(--fg-subtle)"> × </span>{{ size.height }}
+          </div>
+          <div class="mt-1 text-xs text-(--fg-subtle)">drag the bottom-right corner</div>
+        </div>
+      </div>
+
+      <div class="grid grid-cols-3 gap-2">
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
+          <div class="font-mono text-lg font-bold tabular-nums text-(--fg)">{{ size.width }}</div>
+          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">width px</div>
+        </div>
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
+          <div class="font-mono text-lg font-bold tabular-nums text-(--fg)">{{ size.height }}</div>
+          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">height px</div>
+        </div>
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
+          <div class="font-mono text-lg font-bold tabular-nums text-(--fg)">{{ callbacks }}</div>
+          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">callbacks</div>
+        </div>
+      </div>
+
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="isActive ? pause() : resume()"
+      >
+        {{ isActive ? 'Pause observer' : 'Resume observer' }}
+      </button>
+      <p class="text-xs text-(--fg-subtle)">
+        While paused, resizing won't update the readout until you resume.
+      </p>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/elements/useResizeObserver/index.test.ts b/vue/toolkit/src/composables/elements/useResizeObserver/index.test.ts
new file mode 100644
index 0000000..deb30d9
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useResizeObserver/index.test.ts
@@ -0,0 +1,188 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, ref } from 'vue';
+import { useResizeObserver } from '.';
+
+let instances: Array<{ cb: ResizeObserverCallback; observe: ReturnType<typeof vi.fn>; disconnect: ReturnType<typeof vi.fn> }> = [];
+
+class StubResizeObserver {
+  observe = vi.fn();
+  disconnect = vi.fn();
+  unobserve = vi.fn();
+  cb: ResizeObserverCallback;
+  constructor(cb: ResizeObserverCallback) {
+    this.cb = cb;
+    instances.push(this);
+  }
+}
+
+describe(useResizeObserver, () => {
+  beforeEach(() => {
+    instances = [];
+    vi.stubGlobal('ResizeObserver', StubResizeObserver);
+  });
+  afterEach(() => vi.unstubAllGlobals());
+
+  it('observes the target element', () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    scope.run(() => useResizeObserver(ref(el), vi.fn()));
+
+    expect(instances).toHaveLength(1);
+    expect(instances[0]!.observe).toHaveBeenCalledWith(el, undefined);
+    scope.stop();
+  });
+
+  it('passes the box option through to observe', () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    scope.run(() => useResizeObserver(ref(el), vi.fn(), { box: 'border-box' }));
+
+    expect(instances[0]!.observe).toHaveBeenCalledWith(el, { box: 'border-box' });
+    scope.stop();
+  });
+
+  it('observes an array of targets with a single observer', () => {
+    const a = document.createElement('div');
+    const b = document.createElement('div');
+    const scope = effectScope();
+    scope.run(() => useResizeObserver([ref(a), ref(b)], vi.fn()));
+
+    expect(instances).toHaveLength(1);
+    expect(instances[0]!.observe).toHaveBeenCalledWith(a, undefined);
+    expect(instances[0]!.observe).toHaveBeenCalledWith(b, undefined);
+    scope.stop();
+  });
+
+  it('supports a getter target', () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    scope.run(() => useResizeObserver(() => el, vi.fn()));
+
+    expect(instances).toHaveLength(1);
+    expect(instances[0]!.observe).toHaveBeenCalledWith(el, undefined);
+    scope.stop();
+  });
+
+  it('disconnects on stop', () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let stop: () => void;
+    scope.run(() => {
+      stop = useResizeObserver(ref(el), vi.fn()).stop;
+    });
+
+    stop!();
+    expect(instances[0]!.disconnect).toHaveBeenCalled();
+    scope.stop();
+  });
+
+  it('invokes the callback with entries', () => {
+    const el = document.createElement('div');
+    const callback = vi.fn();
+    const scope = effectScope();
+    scope.run(() => useResizeObserver(ref(el), callback));
+
+    const entry = { contentRect: { width: 10, height: 20 } } as ResizeObserverEntry;
+    instances[0]!.cb([entry], instances[0] as unknown as ResizeObserver);
+    expect(callback).toHaveBeenCalledWith([entry], expect.anything());
+    scope.stop();
+  });
+
+  it('re-observes when the target ref changes', async () => {
+    const a = document.createElement('div');
+    const b = document.createElement('div');
+    const target = ref<HTMLElement>(a);
+    const scope = effectScope();
+    scope.run(() => useResizeObserver(target, vi.fn()));
+
+    expect(instances).toHaveLength(1);
+    expect(instances[0]!.observe).toHaveBeenCalledWith(a, undefined);
+
+    target.value = b;
+    await nextTick();
+
+    expect(instances[0]!.disconnect).toHaveBeenCalled();
+    expect(instances).toHaveLength(2);
+    expect(instances[1]!.observe).toHaveBeenCalledWith(b, undefined);
+    scope.stop();
+  });
+
+  it('does not create an observer for a null target', () => {
+    const target = ref<HTMLElement | null>(null);
+    const scope = effectScope();
+    scope.run(() => useResizeObserver(target, vi.fn()));
+
+    expect(instances).toHaveLength(0);
+    scope.stop();
+  });
+
+  it('starts observing when a null target is later assigned', async () => {
+    const el = document.createElement('div');
+    const target = ref<HTMLElement | null>(null);
+    const scope = effectScope();
+    scope.run(() => useResizeObserver(target, vi.fn()));
+
+    expect(instances).toHaveLength(0);
+
+    target.value = el;
+    await nextTick();
+
+    expect(instances).toHaveLength(1);
+    expect(instances[0]!.observe).toHaveBeenCalledWith(el, undefined);
+    scope.stop();
+  });
+
+  it('does not observe when immediate is false until resumed', async () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let controls!: ReturnType<typeof useResizeObserver>;
+    scope.run(() => {
+      controls = useResizeObserver(ref(el), vi.fn(), { immediate: false });
+    });
+
+    expect(controls.isActive.value).toBeFalsy();
+    expect(instances).toHaveLength(0);
+
+    controls.resume();
+    await nextTick();
+
+    expect(controls.isActive.value).toBeTruthy();
+    expect(instances).toHaveLength(1);
+    expect(instances[0]!.observe).toHaveBeenCalledWith(el, undefined);
+    scope.stop();
+  });
+
+  it('pause disconnects and flips isActive, resume re-observes', async () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let controls!: ReturnType<typeof useResizeObserver>;
+    scope.run(() => {
+      controls = useResizeObserver(ref(el), vi.fn());
+    });
+
+    expect(controls.isActive.value).toBeTruthy();
+    expect(instances).toHaveLength(1);
+
+    controls.pause();
+    expect(controls.isActive.value).toBeFalsy();
+    expect(instances[0]!.disconnect).toHaveBeenCalled();
+
+    controls.resume();
+    await nextTick();
+
+    expect(controls.isActive.value).toBeTruthy();
+    expect(instances).toHaveLength(2);
+    expect(instances[1]!.observe).toHaveBeenCalledWith(el, undefined);
+    scope.stop();
+  });
+
+  it('cleans up when the scope is disposed', () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    scope.run(() => useResizeObserver(ref(el), vi.fn()));
+
+    expect(instances).toHaveLength(1);
+    scope.stop();
+    expect(instances[0]!.disconnect).toHaveBeenCalled();
+  });
+});
diff --git a/vue/toolkit/src/composables/elements/useResizeObserver/index.ts b/vue/toolkit/src/composables/elements/useResizeObserver/index.ts
new file mode 100644
index 0000000..4680f17
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useResizeObserver/index.ts
@@ -0,0 +1,149 @@
+import { computed, readonly, ref, watch } from 'vue';
+import type { Ref } from 'vue';
+import { toArray } from '@robonen/stdlib';
+import type { ConfigurableWindow } from '@/types';
+import { defaultWindow } from '@/types';
+import type { MaybeComputedElementRef } from '@/composables/component/unrefElement';
+import { unrefElement } from '@/composables/component/unrefElement';
+import { useSupported } from '@/composables/utilities/useSupported';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+
+export interface UseResizeObserverOptions extends ConfigurableWindow {
+  /**
+   * The box model to observe
+   *
+   * @default 'content-box'
+   */
+  box?: ResizeObserverBoxOptions;
+
+  /**
+   * Start observing immediately once the target is resolved
+   *
+   * @default true
+   */
+  immediate?: boolean;
+}
+
+export type ResizeObserverCallback = (
+  entries: readonly ResizeObserverEntry[],
+  observer: ResizeObserver,
+) => void;
+
+export interface UseResizeObserverReturn {
+  /**
+   * Whether `ResizeObserver` is supported in the current environment
+   */
+  isSupported: Readonly<Ref<boolean>>;
+
+  /**
+   * Whether the observer is currently active
+   */
+  isActive: Readonly<Ref<boolean>>;
+
+  /**
+   * Temporarily stop observing (disconnects the observer) while keeping the
+   * target watcher alive, so observing can be resumed later
+   */
+  pause: () => void;
+
+  /**
+   * Resume observing after a `pause`
+   */
+  resume: () => void;
+
+  /**
+   * Permanently stop observing and tear down the target watcher
+   */
+  stop: () => void;
+}
+
+/**
+ * @name useResizeObserver
+ * @category Elements
+ * @description Reports changes to the dimensions of an element via `ResizeObserver`.
+ * Accepts a single target or an array of (reactive) targets. The observer is
+ * recreated only when the resolved elements change, and can be paused/resumed.
+ *
+ * @param {MaybeComputedElementRef | MaybeComputedElementRef[]} target Element(s) to observe
+ * @param {ResizeObserverCallback} callback Invoked with the observer entries
+ * @param {UseResizeObserverOptions} [options={}] Options
+ * @returns {UseResizeObserverReturn} `isSupported`, `isActive`, `pause`, `resume`, and `stop`
+ *
+ * @example
+ * useResizeObserver(el, ([entry]) => {
+ *   console.log(entry.contentRect.width);
+ * });
+ *
+ * @example
+ * const { pause, resume } = useResizeObserver([el1, el2], (entries) => {
+ *   // react to multiple targets
+ * }, { box: 'border-box' });
+ *
+ * @since 0.0.15
+ */
+export function useResizeObserver(
+  target: MaybeComputedElementRef | MaybeComputedElementRef[],
+  callback: ResizeObserverCallback,
+  options: UseResizeObserverOptions = {},
+): UseResizeObserverReturn {
+  const { window = defaultWindow, box, immediate = true } = options;
+
+  const isSupported = useSupported(() => window && 'ResizeObserver' in window);
+
+  // Cache the observer options object so it is not rebuilt on every observe call
+  const observerOptions: ResizeObserverOptions | undefined = box ? { box } : undefined;
+
+  const isActive = ref(immediate);
+
+  let observer: ResizeObserver | undefined;
+
+  const targets = computed(() => {
+    return toArray(target).map(el => unrefElement(el)).filter((el): el is Element => Boolean(el));
+  });
+
+  const cleanup = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = undefined;
+    }
+  };
+
+  const stopWatch = watch(
+    () => [targets.value, isActive.value] as const,
+    ([els, active]) => {
+      cleanup();
+
+      if (!active || !isSupported.value || !window || !els.length)
+        return;
+
+      observer = new ResizeObserver(callback);
+      for (const el of els)
+        observer.observe(el, observerOptions);
+    },
+    { immediate: true, flush: 'post' },
+  );
+
+  const resume = () => {
+    isActive.value = true;
+  };
+
+  const pause = () => {
+    cleanup();
+    isActive.value = false;
+  };
+
+  const stop = () => {
+    cleanup();
+    stopWatch();
+  };
+
+  tryOnScopeDispose(stop);
+
+  return {
+    isSupported,
+    isActive: readonly(isActive),
+    pause,
+    resume,
+    stop,
+  };
+}
diff --git a/vue/toolkit/src/composables/elements/useWindowFocus/demo.vue b/vue/toolkit/src/composables/elements/useWindowFocus/demo.vue
new file mode 100644
index 0000000..8424b7f
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useWindowFocus/demo.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useWindowFocus } from './index';
+
+// useWindowFocus returns a single ShallowRef<boolean> — bind it directly.
+const focused = useWindowFocus();
+
+const blurCount = ref(0);
+
+watch(focused, (isFocused) => {
+  if (!isFocused)
+    blurCount.value++;
+});
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Window focus</span>
+
+    <div
+      class="rounded-xl border p-6 text-center transition"
+      :class="focused
+        ? 'border-emerald-500/30 bg-emerald-500/10'
+        : 'border-(--border) bg-(--bg-inset)'"
+    >
+      <div
+        class="mx-auto flex size-14 items-center justify-center rounded-full transition"
+        :class="focused
+          ? 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400'
+          : 'bg-(--bg-elevated) text-(--fg-subtle)'"
+      >
+        <span class="size-3 rounded-full transition" :class="focused ? 'bg-emerald-500 animate-pulse' : 'bg-(--fg-subtle)'" />
+      </div>
+      <div class="mt-3 text-lg font-semibold text-(--fg)">
+        {{ focused ? 'Window focused' : 'Window blurred' }}
+      </div>
+      <p class="mt-1 text-sm text-(--fg-muted)">
+        {{ focused ? 'Click outside or switch apps to blur.' : 'Click back into this window to refocus.' }}
+      </p>
+    </div>
+
+    <div class="grid grid-cols-2 gap-2">
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
+        <div class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ focused ? 'on' : 'off' }}</div>
+        <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">focused</div>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
+        <div class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ blurCount }}</div>
+        <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">times blurred</div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/elements/useWindowFocus/index.test.ts b/vue/toolkit/src/composables/elements/useWindowFocus/index.test.ts
new file mode 100644
index 0000000..3a4af5c
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useWindowFocus/index.test.ts
@@ -0,0 +1,169 @@
+import { describe, expect, it } from 'vitest';
+import { effectScope, isReadonly } from 'vue';
+import { useWindowFocus } from '.';
+
+interface FakeWindow {
+  document: { hasFocus: () => boolean };
+  addEventListener: Window['addEventListener'];
+  removeEventListener: Window['removeEventListener'];
+  dispatchEvent: Window['dispatchEvent'];
+}
+
+// Build a minimal window-like object whose event plumbing is driven by a real
+// EventTarget, while `document.hasFocus()` is controllable for initial state.
+function createFakeWindow(initialFocus: boolean): FakeWindow {
+  const target = new EventTarget();
+
+  return {
+    document: { hasFocus: () => initialFocus },
+    addEventListener: target.addEventListener.bind(target) as Window['addEventListener'],
+    removeEventListener: target.removeEventListener.bind(target) as Window['removeEventListener'],
+    dispatchEvent: target.dispatchEvent.bind(target) as Window['dispatchEvent'],
+  };
+}
+
+describe(useWindowFocus, () => {
+  it('initialises from document.hasFocus() (focused)', () => {
+    const fakeWindow = createFakeWindow(true);
+
+    const scope = effectScope();
+    let focused: ReturnType<typeof useWindowFocus>;
+    scope.run(() => {
+      focused = useWindowFocus({ window: fakeWindow as unknown as Window });
+    });
+
+    expect(focused!.value).toBeTruthy();
+
+    scope.stop();
+  });
+
+  it('initialises from document.hasFocus() (blurred)', () => {
+    const fakeWindow = createFakeWindow(false);
+
+    const scope = effectScope();
+    let focused: ReturnType<typeof useWindowFocus>;
+    scope.run(() => {
+      focused = useWindowFocus({ window: fakeWindow as unknown as Window });
+    });
+
+    expect(focused!.value).toBeFalsy();
+
+    scope.stop();
+  });
+
+  it('becomes false on blur', () => {
+    const fakeWindow = createFakeWindow(true);
+
+    const scope = effectScope();
+    let focused: ReturnType<typeof useWindowFocus>;
+    scope.run(() => {
+      focused = useWindowFocus({ window: fakeWindow as unknown as Window });
+    });
+
+    expect(focused!.value).toBeTruthy();
+
+    fakeWindow.dispatchEvent(new Event('blur'));
+    expect(focused!.value).toBeFalsy();
+
+    scope.stop();
+  });
+
+  it('becomes true on focus', () => {
+    const fakeWindow = createFakeWindow(false);
+
+    const scope = effectScope();
+    let focused: ReturnType<typeof useWindowFocus>;
+    scope.run(() => {
+      focused = useWindowFocus({ window: fakeWindow as unknown as Window });
+    });
+
+    expect(focused!.value).toBeFalsy();
+
+    fakeWindow.dispatchEvent(new Event('focus'));
+    expect(focused!.value).toBeTruthy();
+
+    scope.stop();
+  });
+
+  it('tracks repeated focus/blur transitions', () => {
+    const fakeWindow = createFakeWindow(true);
+
+    const scope = effectScope();
+    let focused: ReturnType<typeof useWindowFocus>;
+    scope.run(() => {
+      focused = useWindowFocus({ window: fakeWindow as unknown as Window });
+    });
+
+    fakeWindow.dispatchEvent(new Event('blur'));
+    expect(focused!.value).toBeFalsy();
+
+    fakeWindow.dispatchEvent(new Event('focus'));
+    expect(focused!.value).toBeTruthy();
+
+    fakeWindow.dispatchEvent(new Event('blur'));
+    expect(focused!.value).toBeFalsy();
+
+    scope.stop();
+  });
+
+  it('removes listeners when the scope is disposed', () => {
+    const fakeWindow = createFakeWindow(true);
+
+    const scope = effectScope();
+    let focused: ReturnType<typeof useWindowFocus>;
+    scope.run(() => {
+      focused = useWindowFocus({ window: fakeWindow as unknown as Window });
+    });
+
+    scope.stop();
+
+    // after disposal, events must no longer mutate the ref
+    fakeWindow.dispatchEvent(new Event('blur'));
+    expect(focused!.value).toBeTruthy();
+  });
+
+  it('returns a writable shallow ref (not readonly)', () => {
+    const fakeWindow = createFakeWindow(true);
+
+    const scope = effectScope();
+    let focused: ReturnType<typeof useWindowFocus>;
+    scope.run(() => {
+      focused = useWindowFocus({ window: fakeWindow as unknown as Window });
+    });
+
+    expect(isReadonly(focused!)).toBeFalsy();
+
+    scope.stop();
+  });
+
+  it('returns false and does not throw when window is unavailable (SSR)', () => {
+    const scope = effectScope();
+    let focused: ReturnType<typeof useWindowFocus>;
+    scope.run(() => {
+      focused = useWindowFocus({ window: undefined });
+    });
+
+    expect(focused!.value).toBeFalsy();
+
+    scope.stop();
+  });
+
+  it('uses the real jsdom window by default', () => {
+    const scope = effectScope();
+    let focused: ReturnType<typeof useWindowFocus>;
+    scope.run(() => {
+      focused = useWindowFocus();
+    });
+
+    // initial value mirrors document.hasFocus()
+    expect(focused!.value).toBe(document.hasFocus());
+
+    globalThis.dispatchEvent(new Event('blur'));
+    expect(focused!.value).toBeFalsy();
+
+    globalThis.dispatchEvent(new Event('focus'));
+    expect(focused!.value).toBeTruthy();
+
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/elements/useWindowFocus/index.ts b/vue/toolkit/src/composables/elements/useWindowFocus/index.ts
new file mode 100644
index 0000000..cbf160d
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useWindowFocus/index.ts
@@ -0,0 +1,43 @@
+import { shallowRef } from 'vue';
+import type { ShallowRef } from 'vue';
+import { defaultWindow } from '@/types';
+import type { ConfigurableWindow } from '@/types';
+import { useEventListener } from '@/composables/browser/useEventListener';
+
+export interface UseWindowFocusOptions extends ConfigurableWindow {}
+
+export type UseWindowFocusReturn = ShallowRef<boolean>;
+
+/**
+ * @name useWindowFocus
+ * @category Elements
+ * @description Reactively track whether the window is focused via `focus`/`blur` events.
+ *
+ * @param {UseWindowFocusOptions} [options={}] Options
+ * @returns {UseWindowFocusReturn} A shallow ref that is `true` while the window has focus
+ *
+ * @example
+ * const focused = useWindowFocus();
+ *
+ * @since 0.0.15
+ */
+export function useWindowFocus(options: UseWindowFocusOptions = {}): UseWindowFocusReturn {
+  const { window = defaultWindow } = options;
+
+  if (!window)
+    return shallowRef(false);
+
+  const focused = shallowRef(window.document.hasFocus());
+
+  const listenerOptions = { passive: true } as const;
+
+  useEventListener(window, 'blur', () => {
+    focused.value = false;
+  }, listenerOptions);
+
+  useEventListener(window, 'focus', () => {
+    focused.value = true;
+  }, listenerOptions);
+
+  return focused;
+}
diff --git a/vue/toolkit/src/composables/elements/useWindowScroll/demo.vue b/vue/toolkit/src/composables/elements/useWindowScroll/demo.vue
new file mode 100644
index 0000000..7f022dd
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useWindowScroll/demo.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useWindowScroll } from './index';
+
+const { x, y, isScrolling, arrivedState, directions, measure } = useWindowScroll({
+  behavior: 'smooth',
+});
+
+const verticalDirection = computed(() => {
+  if (directions.bottom)
+    return 'down';
+  if (directions.top)
+    return 'up';
+  return 'idle';
+});
+
+function scrollToTop() {
+  y.value = 0;
+}
+
+function scrollToBottom() {
+  // Writing past the max is clamped by the browser, taking us to the bottom.
+  y.value = 1_000_000;
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Window scroll</span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        <span class="size-1.5 rounded-full transition" :class="isScrolling ? 'bg-emerald-500 animate-pulse' : 'bg-(--fg-subtle)'" />
+        {{ isScrolling ? 'Scrolling' : 'Idle' }}
+      </span>
+    </div>
+
+    <div class="grid grid-cols-2 gap-2">
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
+        <div class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ Math.round(x) }}</div>
+        <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">scroll x</div>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
+        <div class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ Math.round(y) }}</div>
+        <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">scroll y</div>
+      </div>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Direction</span>
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+          {{ verticalDirection }}
+        </span>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <div class="flex items-center justify-between text-sm">
+          <span class="text-(--fg-muted)">Arrived at top</span>
+          <span
+            class="inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium"
+            :class="arrivedState.top
+              ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+              : 'bg-(--bg-inset) text-(--fg-subtle)'"
+          >
+            {{ arrivedState.top ? 'yes' : 'no' }}
+          </span>
+        </div>
+        <div class="flex items-center justify-between text-sm">
+          <span class="text-(--fg-muted)">Arrived at bottom</span>
+          <span
+            class="inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium"
+            :class="arrivedState.bottom
+              ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+              : 'bg-(--bg-inset) text-(--fg-subtle)'"
+          >
+            {{ arrivedState.bottom ? 'yes' : 'no' }}
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <div class="grid grid-cols-2 gap-2">
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="arrivedState.top"
+        @click="scrollToTop"
+      >
+        Scroll to top
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="arrivedState.bottom"
+        @click="scrollToBottom"
+      >
+        Scroll to bottom
+      </button>
+    </div>
+
+    <button
+      type="button"
+      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+      @click="measure"
+    >
+      Re-measure
+    </button>
+    <p class="text-xs text-(--fg-subtle)">
+      Scroll the documentation page to watch the position and arrived edges update live.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/elements/useWindowScroll/index.test.ts b/vue/toolkit/src/composables/elements/useWindowScroll/index.test.ts
new file mode 100644
index 0000000..c0e5b66
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useWindowScroll/index.test.ts
@@ -0,0 +1,244 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick } from 'vue';
+import { useWindowScroll } from '.';
+
+function setScroll(x: number, y: number): void {
+  (globalThis as any).scrollX = x;
+  (globalThis as any).scrollY = y;
+}
+
+describe(useWindowScroll, () => {
+  beforeEach(() => {
+    Object.defineProperty(globalThis, 'scrollX', { value: 0, configurable: true, writable: true });
+    Object.defineProperty(globalThis, 'scrollY', { value: 0, configurable: true, writable: true });
+  });
+  afterEach(() => vi.unstubAllGlobals());
+
+  it('reads the initial scroll position', () => {
+    setScroll(15, 25);
+    const scope = effectScope();
+    let result: ReturnType<typeof useWindowScroll>;
+    scope.run(() => {
+      result = useWindowScroll();
+    });
+
+    expect(result!.x.value).toBe(15);
+    expect(result!.y.value).toBe(25);
+    scope.stop();
+  });
+
+  it('updates on scroll', async () => {
+    const scope = effectScope();
+    let result: ReturnType<typeof useWindowScroll>;
+    scope.run(() => {
+      result = useWindowScroll();
+    });
+
+    setScroll(30, 60);
+    globalThis.dispatchEvent(new Event('scroll'));
+    await nextTick();
+
+    expect(result!.x.value).toBe(30);
+    expect(result!.y.value).toBe(60);
+    scope.stop();
+  });
+
+  it('scrolls the window when writing to x/y', () => {
+    const scrollTo = vi.fn();
+    vi.stubGlobal('scrollTo', scrollTo);
+
+    const scope = effectScope();
+    let result: ReturnType<typeof useWindowScroll>;
+    scope.run(() => {
+      result = useWindowScroll();
+    });
+
+    result!.x.value = 100;
+    expect(scrollTo).toHaveBeenCalledWith(expect.objectContaining({ left: 100 }));
+    result!.y.value = 200;
+    expect(scrollTo).toHaveBeenCalledWith(expect.objectContaining({ top: 200 }));
+    scope.stop();
+  });
+
+  it('passes the configured behavior when writing to x/y', () => {
+    const scrollTo = vi.fn();
+    vi.stubGlobal('scrollTo', scrollTo);
+
+    const scope = effectScope();
+    let result: ReturnType<typeof useWindowScroll>;
+    scope.run(() => {
+      result = useWindowScroll({ behavior: 'smooth' });
+    });
+
+    result!.x.value = 50;
+    expect(scrollTo).toHaveBeenCalledWith(expect.objectContaining({ left: 50, behavior: 'smooth' }));
+    scope.stop();
+  });
+
+  it('exposes isScrolling that toggles on scroll and resets after idle', async () => {
+    vi.useFakeTimers();
+    const scope = effectScope();
+    let result: ReturnType<typeof useWindowScroll>;
+    scope.run(() => {
+      result = useWindowScroll({ idle: 50 });
+    });
+
+    expect(result!.isScrolling.value).toBeFalsy();
+
+    setScroll(10, 10);
+    globalThis.dispatchEvent(new Event('scroll'));
+    expect(result!.isScrolling.value).toBeTruthy();
+
+    vi.advanceTimersByTime(60);
+    await nextTick();
+    expect(result!.isScrolling.value).toBeFalsy();
+
+    scope.stop();
+    vi.useRealTimers();
+  });
+
+  it('calls onScroll and onStop callbacks', async () => {
+    vi.useFakeTimers();
+    const onScroll = vi.fn();
+    const onStop = vi.fn();
+    const scope = effectScope();
+    scope.run(() => {
+      useWindowScroll({ idle: 50, onScroll, onStop });
+    });
+
+    setScroll(5, 5);
+    globalThis.dispatchEvent(new Event('scroll'));
+    expect(onScroll).toHaveBeenCalledTimes(1);
+    expect(onStop).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(60);
+    await nextTick();
+    expect(onStop).toHaveBeenCalledTimes(1);
+
+    scope.stop();
+    vi.useRealTimers();
+  });
+
+  it('tracks scroll directions', () => {
+    const scope = effectScope();
+    let result: ReturnType<typeof useWindowScroll>;
+    scope.run(() => {
+      result = useWindowScroll();
+    });
+
+    setScroll(40, 80);
+    globalThis.dispatchEvent(new Event('scroll'));
+    expect(result!.directions.right).toBeTruthy();
+    expect(result!.directions.bottom).toBeTruthy();
+    expect(result!.directions.left).toBeFalsy();
+    expect(result!.directions.top).toBeFalsy();
+
+    setScroll(10, 20);
+    globalThis.dispatchEvent(new Event('scroll'));
+    expect(result!.directions.left).toBeTruthy();
+    expect(result!.directions.top).toBeTruthy();
+    expect(result!.directions.right).toBeFalsy();
+    expect(result!.directions.bottom).toBeFalsy();
+
+    scope.stop();
+  });
+
+  it('reports arrivedState at the top/left edges initially', () => {
+    const scope = effectScope();
+    let result: ReturnType<typeof useWindowScroll>;
+    scope.run(() => {
+      result = useWindowScroll();
+    });
+
+    expect(result!.arrivedState.top).toBeTruthy();
+    expect(result!.arrivedState.left).toBeTruthy();
+    scope.stop();
+  });
+
+  it('clears arrivedState.top once scrolled down', () => {
+    const scope = effectScope();
+    let result: ReturnType<typeof useWindowScroll>;
+    scope.run(() => {
+      result = useWindowScroll();
+    });
+
+    setScroll(0, 100);
+    globalThis.dispatchEvent(new Event('scroll'));
+    expect(result!.arrivedState.top).toBeFalsy();
+    scope.stop();
+  });
+
+  it('honors the top offset for arrivedState', () => {
+    const scope = effectScope();
+    let result: ReturnType<typeof useWindowScroll>;
+    scope.run(() => {
+      result = useWindowScroll({ offset: { top: 30 } });
+    });
+
+    setScroll(0, 20);
+    globalThis.dispatchEvent(new Event('scroll'));
+    // Within the 30px offset, still considered "arrived at top".
+    expect(result!.arrivedState.top).toBeTruthy();
+
+    setScroll(0, 40);
+    globalThis.dispatchEvent(new Event('scroll'));
+    expect(result!.arrivedState.top).toBeFalsy();
+    scope.stop();
+  });
+
+  it('measure() recomputes state without a scroll event', () => {
+    const scope = effectScope();
+    let result: ReturnType<typeof useWindowScroll>;
+    scope.run(() => {
+      result = useWindowScroll();
+    });
+
+    setScroll(0, 70);
+    // No event dispatched; values are stale until measure().
+    expect(result!.y.value).toBe(0);
+    result!.measure();
+    expect(result!.y.value).toBe(70);
+    scope.stop();
+  });
+
+  it('is SSR-safe when window is undefined', () => {
+    const scope = effectScope();
+    let result: ReturnType<typeof useWindowScroll>;
+    scope.run(() => {
+      result = useWindowScroll({ window: undefined });
+    });
+
+    expect(result!.x.value).toBe(0);
+    expect(result!.y.value).toBe(0);
+    expect(result!.isScrolling.value).toBeFalsy();
+    // Writing should be a no-op (no throw).
+    expect(() => {
+      result!.x.value = 10;
+    }).not.toThrow();
+    scope.stop();
+  });
+
+  it('throttles the scroll handler when throttle is set', async () => {
+    vi.useFakeTimers();
+    const onScroll = vi.fn();
+    const scope = effectScope();
+    scope.run(() => {
+      useWindowScroll({ throttle: 100, onScroll });
+    });
+
+    setScroll(1, 1);
+    globalThis.dispatchEvent(new Event('scroll'));
+    setScroll(2, 2);
+    globalThis.dispatchEvent(new Event('scroll'));
+    setScroll(3, 3);
+    globalThis.dispatchEvent(new Event('scroll'));
+
+    // Trailing-only throttle: collapses the burst into a single deferred call.
+    vi.advanceTimersByTime(120);
+    await nextTick();
+    expect(onScroll).toHaveBeenCalledTimes(1);
+
+    scope.stop();
+    vi.useRealTimers();
+  });
+});
diff --git a/vue/toolkit/src/composables/elements/useWindowScroll/index.ts b/vue/toolkit/src/composables/elements/useWindowScroll/index.ts
new file mode 100644
index 0000000..05e3b5d
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useWindowScroll/index.ts
@@ -0,0 +1,272 @@
+import { computed, reactive, shallowRef, toValue } from 'vue';
+import type { MaybeRefOrGetter, Reactive, ShallowRef, WritableComputedRef } from 'vue';
+import { noop } from '@robonen/stdlib';
+import { defaultWindow } from '@/types';
+import type { ConfigurableWindow } from '@/types';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import { useDebounceFn } from '@/composables/reactivity/useDebounceFn';
+import { useThrottleFn } from '@/composables/reactivity/useThrottleFn';
+import { tryOnMounted } from '@/composables/lifecycle/tryOnMounted';
+
+/**
+ * `scrollTop`/`scrollLeft` are sub-pixel (fractional) numbers, while
+ * `scrollHeight`/`scrollWidth` and `clientHeight`/`clientWidth` are rounded
+ * integers. We therefore allow a 1px tolerance when deciding whether an edge
+ * has been reached.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#determine_if_an_element_has_been_totally_scrolled
+ */
+const ARRIVED_STATE_THRESHOLD_PIXELS = 1;
+
+export interface UseWindowScrollOffset {
+  left?: number;
+  right?: number;
+  top?: number;
+  bottom?: number;
+}
+
+export interface UseWindowScrollEdgeState {
+  left: boolean;
+  right: boolean;
+  top: boolean;
+  bottom: boolean;
+}
+
+export interface UseWindowScrollOptions extends ConfigurableWindow {
+  /**
+   * Throttle time (ms) for the scroll handler. Disabled by default.
+   *
+   * @default 0
+   */
+  throttle?: number;
+
+  /**
+   * Delay (ms) after the last scroll event before `isScrolling` flips back to
+   * `false`. When `throttle` is set the effective idle window becomes
+   * `throttle + idle`.
+   *
+   * @default 200
+   */
+  idle?: number;
+
+  /**
+   * Offset the `arrivedState` edges by a number of pixels, e.g. to treat the
+   * page as "arrived at bottom" slightly before the true bottom.
+   */
+  offset?: UseWindowScrollOffset;
+
+  /**
+   * Invoked on every (throttled) scroll event.
+   */
+  onScroll?: (event: Event) => void;
+
+  /**
+   * Invoked once scrolling stops (after the idle window elapses).
+   */
+  onStop?: (event: Event) => void;
+
+  /**
+   * Listener options for the scroll event.
+   *
+   * @default { capture: false, passive: true }
+   */
+  eventListenerOptions?: boolean | AddEventListenerOptions;
+
+  /**
+   * Scroll behavior applied when writing to `x`/`y`. `'auto'` jumps instantly,
+   * `'smooth'` animates. Accepts a ref or getter for reactivity.
+   *
+   * @default 'auto'
+   */
+  behavior?: MaybeRefOrGetter<ScrollBehavior>;
+}
+
+export interface UseWindowScrollReturn {
+  /**
+   * Reactive horizontal scroll position. Writing to it scrolls the window.
+   */
+  x: WritableComputedRef<number>;
+
+  /**
+   * Reactive vertical scroll position. Writing to it scrolls the window.
+   */
+  y: WritableComputedRef<number>;
+
+  /**
+   * Whether the window is currently being scrolled.
+   */
+  isScrolling: ShallowRef<boolean>;
+
+  /**
+   * Whether each edge of the document has been reached.
+   */
+  arrivedState: Reactive<UseWindowScrollEdgeState>;
+
+  /**
+   * The direction(s) the window is currently scrolling towards.
+   */
+  directions: Reactive<UseWindowScrollEdgeState>;
+
+  /**
+   * Force a re-measurement of `arrivedState`/`directions`.
+   */
+  measure: () => void;
+}
+
+/**
+ * @name useWindowScroll
+ * @category Elements
+ * @description Reactive window scroll position with arrived/direction tracking. Writing to `x`/`y` scrolls the window.
+ *
+ * @param {UseWindowScrollOptions} [options={}] Options
+ * @returns {UseWindowScrollReturn} Reactive `x`, `y`, `isScrolling`, `arrivedState`, `directions` and a `measure()` helper
+ *
+ * @example
+ * const { x, y, isScrolling, arrivedState, directions } = useWindowScroll();
+ *
+ * @since 0.0.15
+ */
+export function useWindowScroll(options: UseWindowScrollOptions = {}): UseWindowScrollReturn {
+  const {
+    window = defaultWindow,
+    throttle = 0,
+    idle = 200,
+    onStop = noop,
+    onScroll = noop,
+    offset = {},
+    eventListenerOptions = { capture: false, passive: true },
+    behavior = 'auto',
+  } = options;
+
+  const internalX = shallowRef(0);
+  const internalY = shallowRef(0);
+
+  // We use computed getters/setters so that writing `x`/`y` triggers a real
+  // `scrollTo()` while the internal refs are updated from the scroll event
+  // without re-triggering a scroll.
+  const x = computed<number>({
+    get: () => internalX.value,
+    set: value => scrollTo(value, undefined),
+  });
+
+  const y = computed<number>({
+    get: () => internalY.value,
+    set: value => scrollTo(undefined, value),
+  });
+
+  function scrollTo(_x: number | undefined, _y: number | undefined): void {
+    if (!window)
+      return;
+
+    window.scrollTo({
+      left: _x ?? internalX.value,
+      top: _y ?? internalY.value,
+      behavior: toValue(behavior),
+    });
+
+    if (_x !== null && _x !== undefined)
+      internalX.value = _x;
+    if (_y !== null && _y !== undefined)
+      internalY.value = _y;
+  }
+
+  const isScrolling = shallowRef(false);
+
+  const arrivedState = reactive<UseWindowScrollEdgeState>({
+    left: true,
+    right: false,
+    top: true,
+    bottom: false,
+  });
+
+  const directions = reactive<UseWindowScrollEdgeState>({
+    left: false,
+    right: false,
+    top: false,
+    bottom: false,
+  });
+
+  function setArrivedState(): void {
+    if (!window)
+      return;
+
+    const el = window.document.documentElement;
+    const { direction } = window.getComputedStyle(el);
+    const directionMultiplier = direction === 'rtl' ? -1 : 1;
+
+    const scrollLeft = window.scrollX;
+    directions.left = scrollLeft < internalX.value;
+    directions.right = scrollLeft > internalX.value;
+
+    arrivedState.left = Math.abs(scrollLeft * directionMultiplier) <= (offset.left ?? 0);
+    arrivedState.right = Math.abs(scrollLeft * directionMultiplier)
+      + el.clientWidth >= el.scrollWidth
+      - (offset.right ?? 0)
+      - ARRIVED_STATE_THRESHOLD_PIXELS;
+
+    internalX.value = scrollLeft;
+
+    const scrollTop = window.scrollY;
+    directions.top = scrollTop < internalY.value;
+    directions.bottom = scrollTop > internalY.value;
+
+    arrivedState.top = Math.abs(scrollTop) <= (offset.top ?? 0);
+    arrivedState.bottom = Math.abs(scrollTop)
+      + el.clientHeight >= el.scrollHeight
+      - (offset.bottom ?? 0)
+      - ARRIVED_STATE_THRESHOLD_PIXELS;
+
+    internalY.value = scrollTop;
+  }
+
+  function onScrollEnd(event: Event): void {
+    // Dedupe in case the native `scrollend` event is supported.
+    if (!isScrolling.value)
+      return;
+
+    isScrolling.value = false;
+    directions.left = false;
+    directions.right = false;
+    directions.top = false;
+    directions.bottom = false;
+    onStop(event);
+  }
+
+  const onScrollEndDebounced = useDebounceFn(onScrollEnd, throttle + idle);
+
+  function onScrollHandler(event: Event): void {
+    if (!window)
+      return;
+
+    setArrivedState();
+
+    isScrolling.value = true;
+    onScrollEndDebounced(event);
+    onScroll(event);
+  }
+
+  useEventListener(
+    window,
+    'scroll',
+    throttle ? useThrottleFn(onScrollHandler, throttle, true, false) : onScrollHandler,
+    eventListenerOptions,
+  );
+
+  useEventListener(
+    window,
+    'scrollend',
+    onScrollEnd,
+    eventListenerOptions,
+  );
+
+  tryOnMounted(setArrivedState);
+
+  return {
+    x,
+    y,
+    isScrolling,
+    arrivedState,
+    directions,
+    measure: setArrivedState,
+  };
+}
diff --git a/vue/toolkit/src/composables/elements/useWindowSize/demo.vue b/vue/toolkit/src/composables/elements/useWindowSize/demo.vue
new file mode 100644
index 0000000..47574ec
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useWindowSize/demo.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useWindowSize } from './index';
+
+const { width, height } = useWindowSize();
+
+const orientation = computed(() => (width.value >= height.value ? 'landscape' : 'portrait'));
+const aspect = computed(() => (height.value === 0 ? '–' : (width.value / height.value).toFixed(2)));
+const ratioPercent = computed(() => {
+  const total = width.value + height.value;
+  return total === 0 ? 50 : Math.round((width.value / total) * 100);
+});
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="grid grid-cols-2 gap-3">
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 text-center">
+        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Width
+        </p>
+        <p class="font-mono text-3xl font-bold tabular-nums text-(--fg)">
+          {{ width }}
+        </p>
+        <p class="text-xs text-(--fg-subtle)">
+          px
+        </p>
+      </div>
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 text-center">
+        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Height
+        </p>
+        <p class="font-mono text-3xl font-bold tabular-nums text-(--fg)">
+          {{ height }}
+        </p>
+        <p class="text-xs text-(--fg-subtle)">
+          px
+        </p>
+      </div>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div
+        class="relative flex items-center justify-center overflow-hidden rounded-lg border border-(--border-strong) bg-(--bg-inset) transition-all"
+        :style="{ aspectRatio: `${Math.max(width, 1)} / ${Math.max(height, 1)}` }"
+      >
+        <div
+          class="absolute inset-y-0 left-0 bg-(--accent-subtle) transition-all"
+          :style="{ width: `${ratioPercent}%` }"
+        />
+        <span class="relative font-mono text-xs text-(--fg-muted) tabular-nums">
+          {{ width }} × {{ height }}
+        </span>
+      </div>
+    </div>
+
+    <div class="flex flex-wrap items-center justify-center gap-2">
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        {{ orientation }}
+      </span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        ratio {{ aspect }}
+      </span>
+    </div>
+
+    <p class="text-center text-xs text-(--fg-subtle)">
+      Resize your browser window to watch the values update live.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/elements/useWindowSize/index.test.ts b/vue/toolkit/src/composables/elements/useWindowSize/index.test.ts
new file mode 100644
index 0000000..9d60cf7
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useWindowSize/index.test.ts
@@ -0,0 +1,119 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick } from 'vue';
+import { useWindowSize } from '.';
+
+describe(useWindowSize, () => {
+  beforeEach(() => {
+    vi.stubGlobal('matchMedia', undefined);
+    window.innerWidth = 1024;
+    window.innerHeight = 768;
+  });
+  afterEach(() => vi.unstubAllGlobals());
+
+  it('reads the current window size', () => {
+    const scope = effectScope();
+    let size: ReturnType<typeof useWindowSize>;
+    scope.run(() => {
+      size = useWindowSize({ listenOrientation: false });
+    });
+
+    expect(size!.width.value).toBe(1024);
+    expect(size!.height.value).toBe(768);
+    scope.stop();
+  });
+
+  it('updates on resize', async () => {
+    const scope = effectScope();
+    let size: ReturnType<typeof useWindowSize>;
+    scope.run(() => {
+      size = useWindowSize({ listenOrientation: false });
+    });
+
+    window.innerWidth = 500;
+    window.innerHeight = 400;
+    globalThis.dispatchEvent(new Event('resize'));
+    await nextTick();
+
+    expect(size!.width.value).toBe(500);
+    expect(size!.height.value).toBe(400);
+    scope.stop();
+  });
+
+  it('uses documentElement client size when includeScrollbar is false', () => {
+    Object.defineProperty(globalThis.document.documentElement, 'clientWidth', {
+      configurable: true,
+      value: 1000,
+    });
+    Object.defineProperty(globalThis.document.documentElement, 'clientHeight', {
+      configurable: true,
+      value: 700,
+    });
+
+    const scope = effectScope();
+    let size: ReturnType<typeof useWindowSize>;
+    scope.run(() => {
+      size = useWindowSize({ listenOrientation: false, includeScrollbar: false });
+    });
+
+    expect(size!.width.value).toBe(1000);
+    expect(size!.height.value).toBe(700);
+    scope.stop();
+  });
+
+  it('reads outer window size for type "outer"', () => {
+    window.outerWidth = 1440;
+    window.outerHeight = 900;
+
+    const scope = effectScope();
+    let size: ReturnType<typeof useWindowSize>;
+    scope.run(() => {
+      size = useWindowSize({ listenOrientation: false, type: 'outer' });
+    });
+
+    expect(size!.width.value).toBe(1440);
+    expect(size!.height.value).toBe(900);
+    scope.stop();
+  });
+
+  it('reads scaled visual viewport size for type "visual"', async () => {
+    const visualViewport = {
+      width: 800,
+      height: 600,
+      scale: 1.5,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    };
+    Object.defineProperty(globalThis, 'visualViewport', {
+      configurable: true,
+      value: visualViewport,
+    });
+
+    const scope = effectScope();
+    let size: ReturnType<typeof useWindowSize>;
+    scope.run(() => {
+      size = useWindowSize({ listenOrientation: false, type: 'visual' });
+    });
+    await nextTick();
+
+    expect(size!.width.value).toBe(1200);
+    expect(size!.height.value).toBe(900);
+    expect(visualViewport.addEventListener).toHaveBeenCalledWith('resize', expect.any(Function), expect.objectContaining({ passive: true }));
+    scope.stop();
+
+    Object.defineProperty(globalThis, 'visualViewport', { configurable: true, value: undefined });
+  });
+
+  it('falls back to inner size for type "visual" without visualViewport', () => {
+    Object.defineProperty(globalThis, 'visualViewport', { configurable: true, value: undefined });
+
+    const scope = effectScope();
+    let size: ReturnType<typeof useWindowSize>;
+    scope.run(() => {
+      size = useWindowSize({ listenOrientation: false, type: 'visual' });
+    });
+
+    expect(size!.width.value).toBe(1024);
+    expect(size!.height.value).toBe(768);
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/elements/useWindowSize/index.ts b/vue/toolkit/src/composables/elements/useWindowSize/index.ts
new file mode 100644
index 0000000..84cd062
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useWindowSize/index.ts
@@ -0,0 +1,135 @@
+import { shallowRef, watch } from 'vue';
+import type { ShallowRef } from 'vue';
+import { defaultWindow } from '@/types';
+import type { ConfigurableWindow } from '@/types';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import { useMediaQuery } from '@/composables/browser/useMediaQuery';
+import { tryOnMounted } from '@/composables/lifecycle/tryOnMounted';
+
+/**
+ * Which window dimensions to track.
+ *
+ * - `'inner'` — `window.innerWidth/innerHeight` (or `documentElement.clientWidth/clientHeight`
+ *   when `includeScrollbar` is `false`). The viewport size.
+ * - `'outer'` — `window.outerWidth/outerHeight`. The whole browser window, including chrome.
+ * - `'visual'` — `window.visualViewport` size, accounting for pinch-zoom scale. Useful on
+ *   mobile where the visual viewport differs from the layout viewport.
+ */
+export type WindowSizeType = 'inner' | 'outer' | 'visual';
+
+export interface UseWindowSizeOptions extends ConfigurableWindow {
+  /**
+   * The initial width, used before the window is available (e.g. during SSR).
+   *
+   * @default Number.POSITIVE_INFINITY
+   */
+  initialWidth?: number;
+
+  /**
+   * The initial height, used before the window is available (e.g. during SSR).
+   *
+   * @default Number.POSITIVE_INFINITY
+   */
+  initialHeight?: number;
+
+  /**
+   * Listen to orientation changes via a `(orientation: portrait)` media query.
+   *
+   * @default true
+   */
+  listenOrientation?: boolean;
+
+  /**
+   * Use `window.innerWidth/innerHeight` (includes scrollbar) instead of
+   * `documentElement.clientWidth/clientHeight`. Only affects the `'inner'` type.
+   *
+   * @default true
+   */
+  includeScrollbar?: boolean;
+
+  /**
+   * Which window dimensions to track.
+   *
+   * @default 'inner'
+   */
+  type?: WindowSizeType;
+}
+
+export interface UseWindowSizeReturn {
+  width: ShallowRef<number>;
+  height: ShallowRef<number>;
+}
+
+/**
+ * @name useWindowSize
+ * @category Elements
+ * @description Reactive window size. Tracks the inner viewport, the outer window, or the
+ * visual viewport (pinch-zoom aware), and reacts to resize and orientation changes.
+ *
+ * @param {UseWindowSizeOptions} [options={}] Options
+ * @returns {UseWindowSizeReturn} Reactive `width` and `height`
+ *
+ * @example
+ * const { width, height } = useWindowSize();
+ *
+ * @example
+ * // Track the pinch-zoom aware visual viewport on mobile
+ * const { width, height } = useWindowSize({ type: 'visual' });
+ *
+ * @since 0.0.15
+ */
+export function useWindowSize(options: UseWindowSizeOptions = {}): UseWindowSizeReturn {
+  const {
+    window = defaultWindow,
+    initialWidth = Number.POSITIVE_INFINITY,
+    initialHeight = Number.POSITIVE_INFINITY,
+    listenOrientation = true,
+    includeScrollbar = true,
+    type = 'inner',
+  } = options;
+
+  const width = shallowRef(initialWidth);
+  const height = shallowRef(initialHeight);
+
+  const update = (): void => {
+    if (!window)
+      return;
+
+    if (type === 'outer') {
+      width.value = window.outerWidth;
+      height.value = window.outerHeight;
+    }
+    else if (type === 'visual' && window.visualViewport) {
+      const { width: visualWidth, height: visualHeight, scale } = window.visualViewport;
+      width.value = Math.round(visualWidth * scale);
+      height.value = Math.round(visualHeight * scale);
+    }
+    else if (includeScrollbar) {
+      width.value = window.innerWidth;
+      height.value = window.innerHeight;
+    }
+    else {
+      width.value = window.document.documentElement.clientWidth;
+      height.value = window.document.documentElement.clientHeight;
+    }
+  };
+
+  update();
+  tryOnMounted(update);
+
+  const listenerOptions = { passive: true } as const;
+
+  useEventListener('resize', update, listenerOptions);
+
+  // Reactive getter target: auto-binds when `visualViewport` becomes available and
+  // is a no-op otherwise (SSR / unsupported), without recreating listeners.
+  if (type === 'visual')
+    useEventListener(() => window?.visualViewport, 'resize', update, listenerOptions);
+
+  if (listenOrientation) {
+    const orientation = useMediaQuery('(orientation: portrait)', { window });
+    watch(orientation, update);
+  }
+
+  return { width, height };
+}
diff --git a/vue/toolkit/src/composables/forms/index.ts b/vue/toolkit/src/composables/forms/index.ts
new file mode 100644
index 0000000..3c9d55a
--- /dev/null
+++ b/vue/toolkit/src/composables/forms/index.ts
@@ -0,0 +1,4 @@
+export * from './useField';
+export * from './useFieldArray';
+export * from './useForm';
+export * from './useFormContext';
diff --git a/vue/toolkit/src/composables/forms/useField/demo.vue b/vue/toolkit/src/composables/forms/useField/demo.vue
new file mode 100644
index 0000000..7b8c44c
--- /dev/null
+++ b/vue/toolkit/src/composables/forms/useField/demo.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { useField } from './index';
+
+// Standalone mode: no useForm() ancestor, so the field owns its own value,
+// errors, touched state, and validation.
+const {
+  value,
+  errorMessage,
+  meta,
+  attrs,
+  validate,
+  reset,
+} = useField<string>('email', {
+  initialValue: 'ada@example',
+  validateOn: 'value',
+  validate: (input) => {
+    if (!input)
+      return 'Email is required';
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(input))
+      return 'Enter a valid email address';
+    return true;
+  },
+});
+
+const inputClass = 'w-full rounded-lg border bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:outline-none focus:ring-2 focus:ring-(--ring)';
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex flex-col gap-1.5">
+      <label
+        class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)"
+        :for="attrs.name"
+      >
+        Email address
+      </label>
+      <input
+        :id="attrs.name"
+        v-model="value"
+        v-bind="attrs"
+        type="email"
+        placeholder="you@example.com"
+        :class="[
+          inputClass,
+          meta.touched.value && errorMessage
+            ? 'border-red-500/60 focus:border-red-500'
+            : 'border-(--border) focus:border-(--accent)',
+        ]"
+      >
+      <p
+        v-if="meta.touched.value && errorMessage"
+        class="text-xs text-red-600 dark:text-red-400"
+      >
+        {{ errorMessage }}
+      </p>
+      <p
+        v-else
+        class="text-xs text-(--fg-subtle)"
+      >
+        Validates on every keystroke.
+      </p>
+    </div>
+
+    <div class="flex flex-wrap gap-2">
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+        :class="meta.valid.value
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-red-500/30 bg-red-500/10 text-red-600 dark:text-red-400'"
+      >
+        {{ meta.valid.value ? 'valid' : 'invalid' }}
+      </span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        dirty: {{ meta.dirty.value }}
+      </span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        touched: {{ meta.touched.value }}
+      </span>
+    </div>
+
+    <div class="flex gap-2">
+      <button
+        type="button"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="validate()"
+      >
+        Validate
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="reset()"
+      >
+        Reset
+      </button>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+      value: "{{ value }}"
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/forms/useField/index.test.ts b/vue/toolkit/src/composables/forms/useField/index.test.ts
new file mode 100644
index 0000000..11e7247
--- /dev/null
+++ b/vue/toolkit/src/composables/forms/useField/index.test.ts
@@ -0,0 +1,134 @@
+import { describe, expect, it } from 'vitest';
+import { defineComponent, h } from 'vue';
+import { mount } from '@vue/test-utils';
+import { useForm } from '../useForm';
+import type { UseFieldOptions, UseFieldReturn, UseFormReturn } from '../useForm';
+import { useField } from '.';
+
+function mountField<T>(
+  path: string,
+  fieldOptions: Omit<UseFieldOptions<T>, 'form'> = {},
+  initialValues: Record<string, any> = {},
+) {
+  let form!: UseFormReturn<any>;
+  let field!: UseFieldReturn<T>;
+
+  mount(defineComponent({
+    setup() {
+      form = useForm({ initialValues });
+      field = useField<T>(path, { ...fieldOptions, form });
+      return () => h('div');
+    },
+  }));
+
+  return { form, field };
+}
+
+function mountStandalone<T>(path: string, fieldOptions: UseFieldOptions<T>) {
+  let field!: UseFieldReturn<T>;
+
+  mount(defineComponent({
+    setup() {
+      field = useField<T>(path, fieldOptions);
+      return () => h('div');
+    },
+  }));
+
+  return field;
+}
+
+describe(useField, () => {
+  describe('bound to a form', () => {
+    it('reads and writes the form value through value', () => {
+      const { form, field } = mountField<string>('email', {}, { email: 'init' });
+
+      expect(field.value.value).toBe('init');
+      field.value.value = 'changed';
+      expect(form.values.email).toBe('changed');
+    });
+
+    it('reflects the form errors for its path', async () => {
+      const { field } = mountField<string>('email', {
+        validate: value => (value.includes('@') ? true : 'Invalid'),
+      }, { email: '' });
+
+      const result = await field.validate();
+      expect(result.valid).toBeFalsy();
+      expect(field.errorMessage.value).toBe('Invalid');
+
+      field.value.value = 'a@b.com';
+      const ok = await field.validate();
+      expect(ok.valid).toBeTruthy();
+      expect(field.errors.value).toEqual([]);
+    });
+
+    it('validates with a per-field schema', async () => {
+      const { field } = mountField<string>('name', {
+        schema: {
+          '~standard': {
+            version: 1,
+            vendor: 'test',
+            validate: (value: any) => (value ? { value } : { issues: [{ message: 'Required' }] }),
+          },
+        },
+      }, { name: '' });
+
+      expect((await field.validate()).valid).toBeFalsy();
+      expect(field.errorMessage.value).toBe('Required');
+    });
+
+    it('marks the field touched on blur', () => {
+      const { field } = mountField<string>('email', {}, { email: '' });
+
+      expect(field.meta.touched.value).toBeFalsy();
+      field.handleBlur();
+      expect(field.meta.touched.value).toBeTruthy();
+    });
+
+    it('tracks dirty state', () => {
+      const { field } = mountField<string>('email', {}, { email: 'a' });
+
+      expect(field.meta.dirty.value).toBeFalsy();
+      field.value.value = 'b';
+      expect(field.meta.dirty.value).toBeTruthy();
+    });
+
+    it('exposes attrs with name and aria-invalid', async () => {
+      const { form, field } = mountField<string>('email', {}, { email: '' });
+
+      expect(field.attrs.value.name).toBe('email');
+      expect(field.attrs.value['aria-invalid']).toBeUndefined();
+
+      form.setFieldError('email', 'bad');
+      expect(field.attrs.value['aria-invalid']).toBeTruthy();
+    });
+  });
+
+  describe('standalone (no form)', () => {
+    it('holds its own value and validates locally', async () => {
+      const field = mountStandalone<string>('search', {
+        initialValue: '',
+        validate: value => (value.length >= 3 ? true : 'Too short'),
+      });
+
+      expect(field.value.value).toBe('');
+      field.handleChange('ab');
+      const result = await field.validate();
+      expect(result.valid).toBeFalsy();
+      expect(field.errorMessage.value).toBe('Too short');
+
+      field.handleChange('abc');
+      expect((await field.validate()).valid).toBeTruthy();
+    });
+
+    it('resets to its initial value', () => {
+      const field = mountStandalone<string>('x', { initialValue: 'start' });
+
+      field.value.value = 'changed';
+      expect(field.meta.dirty.value).toBeTruthy();
+      field.reset();
+      expect(field.value.value).toBe('start');
+      expect(field.meta.dirty.value).toBeFalsy();
+    });
+  });
+});
diff --git a/vue/toolkit/src/composables/forms/useField/index.ts b/vue/toolkit/src/composables/forms/useField/index.ts
new file mode 100644
index 0000000..6ebb6eb
--- /dev/null
+++ b/vue/toolkit/src/composables/forms/useField/index.ts
@@ -0,0 +1,236 @@
+import { computed, ref, toValue, watch } from 'vue';
+import type { MaybeRefOrGetter, Ref } from 'vue';
+import { cloneFnDefault } from '@/composables/reactivity/useCloned';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+import { isEqual } from '@robonen/stdlib';
+import { injectFormContext } from '../useForm/context';
+import { normalizeFieldResult, runStandardSchema } from '../useForm/validation';
+import type {
+  FieldBindingProps,
+  FieldMeta,
+  FieldValidationResultDetail,
+  FieldValidator,
+  UseFieldOptions,
+  UseFieldReturn,
+  ValidationTrigger,
+} from '../useForm';
+
+/**
+ * @name useField
+ * @category Forms
+ * @description Bind a single field by path. When rendered under a {@link useForm}
+ * (or given an explicit `form`), it reads/writes that form's state; otherwise it
+ * runs standalone with its own value, errors, and validation. Returns a writable
+ * `value`, reactive errors/meta, blur/change handlers, and `attrs` to spread.
+ *
+ * @param {MaybeRefOrGetter<string>} path The dotted field path (reactive allowed)
+ * @param {UseFieldOptions} [options={}] Validators, schema, trigger, explicit form, or standalone `initialValue`
+ * @returns {UseFieldReturn} The field's reactive value, errors, meta, and handlers
+ *
+ * @example
+ * // Within a useForm() component
+ * const { value, errorMessage, attrs } = useField('email', {
+ *   validate: (v) => v.includes('@') || 'Invalid email',
+ * });
+ * // <input v-model="value" v-bind="attrs">
+ *
+ * @example
+ * // Standalone (no form ancestor)
+ * const { value, errors } = useField('search', { initialValue: '', schema });
+ *
+ * @since 0.0.16
+ */
+export function useField<T = any>(
+  path: MaybeRefOrGetter<string>,
+  options: UseFieldOptions<T> = {},
+): UseFieldReturn<T> {
+  const form = options.form ?? injectFormContext();
+  const resolvePath = (): string => toValue(path);
+
+  // Wrap a per-field Standard Schema as a function validator (reuse the adapter).
+  const schemaValidator: ((value: T) => Promise<string[]>) | undefined = options.schema
+    ? async (value): Promise<string[]> => {
+      const run = await runStandardSchema(options.schema!, value);
+      return run.valid ? [] : Object.values(run.errors).flat();
+    }
+    : undefined;
+
+  // Decide whether a given event should trigger validation, honoring a
+  // field-level `validateOn` override or deferring to the form's gate.
+  function fieldShould(event: 'value' | 'blur'): boolean {
+    const override: ValidationTrigger | undefined = options.validateOn;
+    if (override) {
+      if (override === 'manual' || override === 'submit')
+        return false;
+      return override === 'value' || event === 'blur';
+    }
+
+    return form ? form._shouldValidate(event) : true;
+  }
+
+  if (form) {
+    // ---- bound mode -----------------------------------------------------
+    if (options.validate)
+      form._registerValidator(resolvePath(), options.validate as FieldValidator);
+    if (schemaValidator)
+      form._registerValidator(resolvePath(), schemaValidator as FieldValidator);
+
+    // Re-register field validators when a reactive path changes.
+    watch(resolvePath, (next, prev) => {
+      if (next === prev)
+        return;
+      if (options.validate) {
+        form._unregisterValidator(prev, options.validate as FieldValidator);
+        form._registerValidator(next, options.validate as FieldValidator);
+      }
+      if (schemaValidator) {
+        form._unregisterValidator(prev, schemaValidator as FieldValidator);
+        form._registerValidator(next, schemaValidator as FieldValidator);
+      }
+    });
+
+    tryOnScopeDispose(() => {
+      if (options.validate)
+        form._unregisterValidator(resolvePath(), options.validate as FieldValidator);
+      if (schemaValidator)
+        form._unregisterValidator(resolvePath(), schemaValidator as FieldValidator);
+    });
+
+    const value = computed<T>({
+      get: () => form.getFieldValue(resolvePath() as never) as T,
+      set: (next) => {
+        form.setFieldValue(resolvePath() as never, next as never, { shouldValidate: false });
+        if (fieldShould('value'))
+          void form.validateField(resolvePath() as never);
+      },
+    });
+
+    const errors = computed<string[]>(() => form.getErrors(resolvePath() as never));
+    const errorMessage = computed<string | undefined>(() => errors.value[0]);
+
+    const meta: FieldMeta = {
+      dirty: computed(() => form.isFieldDirty(resolvePath() as never)),
+      touched: computed(() => form.isFieldTouched(resolvePath() as never)),
+      valid: computed(() => errors.value.length === 0),
+    };
+
+    const setValue = (next: T): void => {
+      value.value = next;
+    };
+
+    const handleChange = (next: T, shouldValidate = fieldShould('value')): void => {
+      form.setFieldValue(resolvePath() as never, next as never, { shouldValidate });
+    };
+
+    const handleBlur = (): void => {
+      form.setFieldTouched(resolvePath() as never, true);
+      if (fieldShould('blur'))
+        void form.validateField(resolvePath() as never);
+    };
+
+    const handleInput = (event: Event): void => {
+      const target = event.target as HTMLInputElement;
+      const next = (target.type === 'checkbox' ? target.checked : target.value) as unknown as T;
+      handleChange(next);
+    };
+
+    const attrs = computed<FieldBindingProps>(() => ({
+      name: resolvePath(),
+      onBlur: handleBlur,
+      'aria-invalid': errors.value.length > 0 ? true : undefined,
+    }));
+
+    return {
+      value,
+      errors,
+      errorMessage,
+      meta,
+      handleBlur,
+      handleChange,
+      handleInput,
+      setValue,
+      setTouched: (touched = true) => form.setFieldTouched(resolvePath() as never, touched),
+      setErrors: message => form.setFieldError(resolvePath() as never, message),
+      validate: () => form.validateField(resolvePath() as never),
+      reset: () => form.resetField(resolvePath() as never),
+      attrs,
+    };
+  }
+
+  // ---- standalone mode --------------------------------------------------
+  const localValue = ref(options.initialValue) as Ref<T>;
+  const localErrors = ref<string[]>([]);
+  const localTouched = ref(false);
+  const initialSnapshot = cloneFnDefault(options.initialValue) as T;
+
+  async function runLocal(): Promise<FieldValidationResultDetail> {
+    const messages: string[] = [];
+
+    if (schemaValidator)
+      messages.push(...await schemaValidator(localValue.value));
+    if (options.validate)
+      messages.push(...normalizeFieldResult(await options.validate(localValue.value, {} as never)));
+
+    localErrors.value = messages;
+    return { valid: messages.length === 0, errors: messages };
+  }
+
+  const errors = computed<string[]>(() => localErrors.value);
+  const errorMessage = computed<string | undefined>(() => errors.value[0]);
+
+  const meta: FieldMeta = {
+    dirty: computed(() => !isEqual(localValue.value, initialSnapshot)),
+    touched: computed(() => localTouched.value),
+    valid: computed(() => errors.value.length === 0),
+  };
+
+  const handleChange = (next: T, shouldValidate = fieldShould('value')): void => {
+    localValue.value = next;
+    if (shouldValidate)
+      void runLocal();
+  };
+
+  const handleBlur = (): void => {
+    localTouched.value = true;
+    if (fieldShould('blur'))
+      void runLocal();
+  };
+
+  const handleInput = (event: Event): void => {
+    const target = event.target as HTMLInputElement;
+    const next = (target.type === 'checkbox' ? target.checked : target.value) as unknown as T;
+    handleChange(next);
+  };
+
+  const attrs = computed<FieldBindingProps>(() => ({
+    name: resolvePath(),
+    onBlur: handleBlur,
+    'aria-invalid': errors.value.length > 0 ? true : undefined,
+  }));
+
+  return {
+    value: localValue,
+    errors,
+    errorMessage,
+    meta,
+    handleBlur,
+    handleChange,
+    handleInput,
+    setValue: (next) => {
+      localValue.value = next;
+    },
+    setTouched: (touched = true) => {
+      localTouched.value = touched;
+    },
+    setErrors: (message) => {
+      localErrors.value = message === null ? [] : Array.isArray(message) ? message : [message];
+    },
+    validate: runLocal,
+    reset: () => {
+      localValue.value = cloneFnDefault(initialSnapshot);
+      localErrors.value = [];
+      localTouched.value = false;
+    },
+    attrs,
+  };
+}
diff --git a/vue/toolkit/src/composables/forms/useFieldArray/demo.vue b/vue/toolkit/src/composables/forms/useFieldArray/demo.vue
new file mode 100644
index 0000000..2b84ecf
--- /dev/null
+++ b/vue/toolkit/src/composables/forms/useFieldArray/demo.vue
@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { useForm } from '../useForm';
+import { useFieldArray } from './index';
+
+interface Task {
+  title: string;
+  done: boolean;
+}
+
+// useFieldArray needs a form. We pass it explicitly via the `form` option so
+// the demo works as a single self-contained component.
+const form = useForm<{ tasks: Task[] }>({
+  initialValues: {
+    tasks: [
+      { title: 'Sketch wireframes', done: true },
+      { title: 'Wire up the API', done: false },
+      { title: 'Write release notes', done: false },
+    ],
+  },
+});
+
+const { fields, push, remove, move, swap } = useFieldArray<Task>('tasks', { form });
+
+function addTask(): void {
+  push({ title: '', done: false });
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-3">
+    <div class="flex items-center justify-between">
+      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Tasks ({{ fields.length }})
+      </p>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="addTask"
+      >
+        + Add task
+      </button>
+    </div>
+
+    <TransitionGroup
+      tag="ul"
+      class="flex flex-col gap-2"
+      enter-active-class="transition duration-200 ease-out"
+      enter-from-class="opacity-0 -translate-y-1"
+      leave-active-class="transition duration-150 ease-in absolute"
+      leave-to-class="opacity-0 translate-x-2"
+    >
+      <li
+        v-for="(field, index) in fields"
+        :key="field.key"
+        class="flex items-center gap-2 rounded-xl border border-(--border) bg-(--bg-elevated) p-2"
+      >
+        <input
+          v-model="field.value.value.done"
+          type="checkbox"
+          class="size-4 shrink-0 cursor-pointer accent-(--accent)"
+          aria-label="Mark done"
+        >
+        <input
+          v-model="field.value.value.title"
+          type="text"
+          placeholder="Describe the task…"
+          class="min-w-0 flex-1 rounded-lg border border-(--border) bg-(--bg) px-3 py-1.5 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          :class="field.value.value.done ? 'line-through text-(--fg-subtle)' : ''"
+        >
+        <div class="flex shrink-0 items-center gap-1">
+          <button
+            type="button"
+            :disabled="field.isFirst"
+            class="inline-flex size-7 items-center justify-center rounded-md border border-(--border) bg-(--bg-elevated) text-(--fg-muted) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.95] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+            aria-label="Move up"
+            @click="move(index, index - 1)"
+          >
+            ↑
+          </button>
+          <button
+            type="button"
+            :disabled="field.isLast"
+            class="inline-flex size-7 items-center justify-center rounded-md border border-(--border) bg-(--bg-elevated) text-(--fg-muted) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.95] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+            aria-label="Move down"
+            @click="move(index, index + 1)"
+          >
+            ↓
+          </button>
+          <button
+            type="button"
+            class="inline-flex size-7 items-center justify-center rounded-md border border-red-500/30 bg-red-500/10 text-red-600 transition hover:bg-red-500/20 active:scale-[0.95] cursor-pointer dark:text-red-400"
+            aria-label="Remove"
+            @click="remove(index)"
+          >
+            ×
+          </button>
+        </div>
+      </li>
+    </TransitionGroup>
+
+    <div
+      v-if="fields.length === 0"
+      class="rounded-xl border border-dashed border-(--border) bg-(--bg-inset) p-6 text-center text-sm text-(--fg-subtle)"
+    >
+      No tasks yet. Add one to get started.
+    </div>
+
+    <div class="flex items-center justify-between border-t border-(--border) pt-3">
+      <span class="text-xs text-(--fg-subtle)">
+        Stable keys survive reorders
+      </span>
+      <button
+        type="button"
+        :disabled="fields.length < 2"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="swap(0, fields.length - 1)"
+      >
+        Swap first ↔ last
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/forms/useFieldArray/index.test.ts b/vue/toolkit/src/composables/forms/useFieldArray/index.test.ts
new file mode 100644
index 0000000..5b5ef33
--- /dev/null
+++ b/vue/toolkit/src/composables/forms/useFieldArray/index.test.ts
@@ -0,0 +1,109 @@
+import { describe, expect, it } from 'vitest';
+import { defineComponent, h } from 'vue';
+import { mount } from '@vue/test-utils';
+import { useForm } from '../useForm';
+import type { UseFieldArrayReturn, UseFormReturn } from '../useForm';
+import { useFieldArray } from '.';
+
+interface User { name: string }
+
+function mountArray(initial: User[]) {
+  let form!: UseFormReturn<{ users: User[] }>;
+  let arr!: UseFieldArrayReturn<User>;
+
+  mount(defineComponent({
+    setup() {
+      form = useForm<{ users: User[] }>({ initialValues: { users: initial } });
+      arr = useFieldArray<User>('users', { form });
+      return () => h('div');
+    },
+  }));
+
+  return { form, arr };
+}
+
+const names = (form: UseFormReturn<{ users: User[] }>): string[] => form.values.users.map(u => u.name);
+
+describe(useFieldArray, () => {
+  it('exposes entries with stable keys', () => {
+    const { arr } = mountArray([{ name: 'a' }, { name: 'b' }]);
+
+    expect(arr.fields.value).toHaveLength(2);
+    expect(arr.fields.value[0]!.isFirst).toBeTruthy();
+    expect(arr.fields.value[1]!.isLast).toBeTruthy();
+    expect(arr.fields.value[0]!.key).not.toBe(arr.fields.value[1]!.key);
+  });
+
+  it('push and prepend add items', () => {
+    const { form, arr } = mountArray([{ name: 'a' }]);
+
+    arr.push({ name: 'b' });
+    expect(names(form)).toEqual(['a', 'b']);
+
+    arr.prepend({ name: 'z' });
+    expect(names(form)).toEqual(['z', 'a', 'b']);
+  });
+
+  it('insert, remove and update', () => {
+    const { form, arr } = mountArray([{ name: 'a' }, { name: 'c' }]);
+
+    arr.insert(1, { name: 'b' });
+    expect(names(form)).toEqual(['a', 'b', 'c']);
+
+    arr.remove(0);
+    expect(names(form)).toEqual(['b', 'c']);
+
+    arr.update(1, { name: 'C' });
+    expect(names(form)).toEqual(['b', 'C']);
+  });
+
+  it('move and swap reorder items and keys together', () => {
+    const { form, arr } = mountArray([{ name: 'a' }, { name: 'b' }, { name: 'c' }]);
+    const keys = arr.fields.value.map(f => f.key);
+
+    arr.move(0, 2);
+    expect(names(form)).toEqual(['b', 'c', 'a']);
+    expect(arr.fields.value.map(f => f.key)).toEqual([keys[1], keys[2], keys[0]]);
+
+    arr.swap(0, 2);
+    expect(names(form)).toEqual(['a', 'c', 'b']);
+  });
+
+  it('replace swaps the entire array', () => {
+    const { form, arr } = mountArray([{ name: 'a' }]);
+
+    arr.replace([{ name: 'x' }, { name: 'y' }]);
+    expect(names(form)).toEqual(['x', 'y']);
+    expect(arr.fields.value).toHaveLength(2);
+  });
+
+  it('remaps errors when an item is removed', () => {
+    const { form, arr } = mountArray([{ name: 'a' }, { name: 'b' }]);
+
+    form.setFieldError('users.1.name', 'Bad');
+    expect(form.getError('users.1.name')).toBe('Bad');
+
+    arr.remove(0);
+
+    // The second item shifted into index 0 — its error follows.
+    expect(form.getError('users.0.name')).toBe('Bad');
+    expect(form.getErrors('users.1.name')).toEqual([]);
+  });
+
+  it('drops the error of a removed item', () => {
+    const { form, arr } = mountArray([{ name: 'a' }, { name: 'b' }]);
+
+    form.setFieldError('users.0.name', 'Gone');
+    arr.remove(0);
+
+    expect(form.getErrors('users.0.name')).toEqual([]);
+    expect(form.getError('users.0.name')).toBeUndefined();
+  });
+
+  it('lets an entry value edit the underlying slot', () => {
+    const { form, arr } = mountArray([{ name: 'a' }]);
+
+    arr.fields.value[0]!.value.value = { name: 'edited' };
+    expect(form.values.users[0]!.name).toBe('edited');
+  });
+});
diff --git a/vue/toolkit/src/composables/forms/useFieldArray/index.ts b/vue/toolkit/src/composables/forms/useFieldArray/index.ts
new file mode 100644
index 0000000..dfc7819
--- /dev/null
+++ b/vue/toolkit/src/composables/forms/useFieldArray/index.ts
@@ -0,0 +1,146 @@
+import { computed, ref, toValue, watch } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';
+import { insert as insertAt, move as moveItem, remove as removeAt, swap as swapItems } from '@robonen/stdlib';
+import { injectFormContext } from '../useForm/context';
+import type {
+  FieldArrayEntry,
+  UseFieldArrayOptions,
+  UseFieldArrayReturn,
+} from '../useForm';
+
+/**
+ * @name useFieldArray
+ * @category Forms
+ * @description Manage a dynamic array field within a {@link useForm}. Exposes a
+ * reactive `fields` list with **stable keys** (preserved across reorders, so
+ * `v-for :key` keeps DOM/state intact) plus immutable `push`/`prepend`/`insert`/
+ * `remove`/`move`/`swap`/`replace`/`update` operations that also re-key the
+ * matching errors and touched state.
+ *
+ * @param {MaybeRefOrGetter<string>} path The dotted path of the array field
+ * @param {UseFieldArrayOptions} [options={}] Optionally an explicit `form`
+ * @returns {UseFieldArrayReturn} The reactive entries and mutation helpers
+ *
+ * @example
+ * const form = useForm({ initialValues: { users: [{ name: '' }] } });
+ * const { fields, push, remove } = useFieldArray('users');
+ * // <div v-for="(field, i) in fields" :key="field.key">
+ * //   <input v-model="field.value.name"> <button @click="remove(i)">x</button>
+ * // </div>
+ * // <button @click="push({ name: '' })">add</button>
+ *
+ * @since 0.0.16
+ */
+export function useFieldArray<T = any>(
+  path: MaybeRefOrGetter<string>,
+  options: UseFieldArrayOptions = {},
+): UseFieldArrayReturn<T> {
+  const form = options.form ?? injectFormContext();
+
+  if (!form)
+    throw new Error('[useFieldArray] must be used within a useForm() provider or given an explicit `form`.');
+
+  const resolvePath = (): string => toValue(path);
+
+  function currentArray(): T[] {
+    return (form!.getFieldValue(resolvePath() as never) as T[] | undefined) ?? [];
+  }
+
+  // Stable keys parallel to the values array — one per item, preserved on reorder.
+  let keyCounter = 0;
+  const keys = ref<number[]>(currentArray().map(() => keyCounter++));
+
+  // Reconcile keys if the array length changes from outside our own ops.
+  watch(() => currentArray().length, (length) => {
+    const current = keys.value;
+    if (length > current.length) {
+      const next = current.slice();
+      while (next.length < length)
+        next.push(keyCounter++);
+      keys.value = next;
+    }
+    else if (length < current.length) {
+      keys.value = current.slice(0, length);
+    }
+  });
+
+  function indexRef(index: number): Ref<T> {
+    return computed<T>({
+      get: () => (form!.getFieldValue(`${resolvePath()}.${index}` as never) as T),
+      set: value => form!.setFieldValue(`${resolvePath()}.${index}` as never, value as never, { shouldValidate: false }),
+    }) as unknown as Ref<T>;
+  }
+
+  const fields = computed<Array<FieldArrayEntry<T>>>(() => {
+    const length = currentArray().length;
+    const keyList = keys.value;
+
+    return Array.from({ length }, (_unused, index) => ({
+      key: keyList[index] ?? index,
+      value: indexRef(index),
+      isFirst: index === 0,
+      isLast: index === length - 1,
+    }));
+  });
+
+  function writeArray(nextValues: T[], nextKeys: number[]): void {
+    form!.setFieldValue(resolvePath() as never, nextValues as never, { shouldValidate: false });
+    keys.value = nextKeys;
+  }
+
+  function push(value: T): void {
+    writeArray([...currentArray(), value], [...keys.value, keyCounter++]);
+  }
+
+  function prepend(value: T): void {
+    writeArray([value, ...currentArray()], [keyCounter++, ...keys.value]);
+    form!._remapFieldPaths(resolvePath(), index => index + 1);
+  }
+
+  function insert(index: number, value: T): void {
+    writeArray(insertAt(currentArray(), index, value), insertAt(keys.value, index, keyCounter++));
+    form!._remapFieldPaths(resolvePath(), current => (current >= index ? current + 1 : current));
+  }
+
+  function remove(index: number): void {
+    writeArray(removeAt(currentArray(), index), removeAt(keys.value, index));
+    form!._remapFieldPaths(resolvePath(), current =>
+      current === index ? null : current > index ? current - 1 : current);
+  }
+
+  function move(from: number, to: number): void {
+    writeArray(moveItem(currentArray(), from, to), moveItem(keys.value, from, to));
+    const order = moveItem(Array.from({ length: currentArray().length }, (_unused, index) => index), from, to);
+    form!._remapFieldPaths(resolvePath(), current => order.indexOf(current));
+  }
+
+  function swap(indexA: number, indexB: number): void {
+    writeArray(swapItems(currentArray(), indexA, indexB), swapItems(keys.value, indexA, indexB));
+    form!._remapFieldPaths(resolvePath(), current =>
+      current === indexA ? indexB : current === indexB ? indexA : current);
+  }
+
+  function replace(values: T[]): void {
+    writeArray([...values], values.map(() => keyCounter++));
+  }
+
+  function update(index: number, value: T): void {
+    const next = currentArray().slice();
+    if (index < 0 || index >= next.length)
+      return;
+    next[index] = value;
+    writeArray(next, keys.value.slice());
+  }
+
+  return {
+    fields: fields as ComputedRef<Array<FieldArrayEntry<T>>>,
+    push,
+    prepend,
+    insert,
+    remove,
+    move,
+    swap,
+    replace,
+    update,
+  };
+}
diff --git a/vue/toolkit/src/composables/forms/useForm/context.ts b/vue/toolkit/src/composables/forms/useForm/context.ts
new file mode 100644
index 0000000..4c8d034
--- /dev/null
+++ b/vue/toolkit/src/composables/forms/useForm/context.ts
@@ -0,0 +1,25 @@
+import { inject } from 'vue';
+import { useContextFactory } from '@/composables/state/useContextFactory';
+import type { FormContext } from './types';
+
+// Reuse the toolkit's context factory for the unique key + provider rather than
+// hand-rolling a Symbol + provide/inject.
+const formContextFactory = /* #__PURE__ */ useContextFactory<FormContext>('VueToolsErrorForm');
+
+/**
+ * The shared injection key under which {@link useForm} provides its context.
+ */
+export const FORM_CONTEXT_KEY = formContextFactory.key;
+
+/**
+ * Provide a form context to descendant components (called by `useForm`).
+ */
+export const provideFormContext = formContextFactory.provide;
+
+/**
+ * Inject the nearest provided form context, or `null` when there is none.
+ * (The factory's own `inject` throws when absent; fields need an optional one.)
+ */
+export function injectFormContext<TInput extends object = any, TOutput = TInput>(): FormContext<TInput, TOutput> | null {
+  return inject(FORM_CONTEXT_KEY, null) as FormContext<TInput, TOutput> | null;
+}
diff --git a/vue/toolkit/src/composables/forms/useForm/demo.vue b/vue/toolkit/src/composables/forms/useForm/demo.vue
new file mode 100644
index 0000000..2628ae1
--- /dev/null
+++ b/vue/toolkit/src/composables/forms/useForm/demo.vue
@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useForm } from './index';
+import type { FormErrors } from './index';
+
+interface SignUp {
+  name: string;
+  email: string;
+  age: number;
+}
+
+const submitted = ref<SignUp | null>(null);
+
+const {
+  errors,
+  meta,
+  isSubmitting,
+  submitCount,
+  defineField,
+  handleSubmit,
+  resetForm,
+} = useForm<SignUp>({
+  initialValues: { name: '', email: '', age: 18 },
+  validateOn: 'blur',
+  revalidateOn: 'value',
+  // A custom resolver — no external schema library needed.
+  resolver: (values) => {
+    const errs: FormErrors = {};
+    if (!values.name.trim())
+      errs.name = ['Name is required'];
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(values.email))
+      errs.email = ['Enter a valid email'];
+    if (values.age < 18)
+      errs.age = ['Must be 18 or older'];
+    return { errors: errs, values };
+  },
+});
+
+const [name, nameProps] = defineField('name');
+const [email, emailProps] = defineField('email');
+const [age, ageProps] = defineField('age');
+
+const onSubmit = handleSubmit(async (values) => {
+  await new Promise(resolve => setTimeout(resolve, 600));
+  submitted.value = { ...values };
+});
+
+const baseInput = 'w-full rounded-lg border bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:outline-none focus:ring-2 focus:ring-(--ring)';
+
+function cls(path: keyof SignUp): string {
+  return errors[path]?.length
+    ? `${baseInput} border-red-500/60 focus:border-red-500`
+    : `${baseInput} border-(--border) focus:border-(--accent)`;
+}
+</script>
+
+<template>
+  <form
+    class="flex w-full max-w-sm flex-col gap-4"
+    novalidate
+    @submit.prevent="onSubmit"
+  >
+    <div class="flex flex-col gap-1.5">
+      <label for="uf-name" class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Name</label>
+      <input
+        id="uf-name"
+        v-model="name"
+        v-bind="nameProps"
+        :class="cls('name')"
+        placeholder="Ada Lovelace"
+      >
+      <p v-if="errors.name?.length" class="text-xs text-red-600 dark:text-red-400">
+        {{ errors.name[0] }}
+      </p>
+    </div>
+
+    <div class="flex flex-col gap-1.5">
+      <label for="uf-email" class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Email</label>
+      <input
+        id="uf-email"
+        v-model="email"
+        v-bind="emailProps"
+        type="email"
+        :class="cls('email')"
+        placeholder="ada@example.com"
+      >
+      <p v-if="errors.email?.length" class="text-xs text-red-600 dark:text-red-400">
+        {{ errors.email[0] }}
+      </p>
+    </div>
+
+    <div class="flex flex-col gap-1.5">
+      <label for="uf-age" class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Age</label>
+      <input
+        id="uf-age"
+        v-model.number="age"
+        v-bind="ageProps"
+        type="number"
+        :class="cls('age')"
+      >
+      <p v-if="errors.age?.length" class="text-xs text-red-600 dark:text-red-400">
+        {{ errors.age[0] }}
+      </p>
+    </div>
+
+    <div class="flex flex-wrap gap-2">
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+        :class="meta.valid
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        {{ meta.valid ? 'valid' : 'invalid' }}
+      </span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        dirty: {{ meta.dirty }}
+      </span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        submits: {{ submitCount }}
+      </span>
+    </div>
+
+    <div class="flex gap-2">
+      <button
+        type="submit"
+        :disabled="isSubmitting"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+      >
+        {{ isSubmitting ? 'Submitting…' : 'Create account' }}
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="resetForm(); submitted = null"
+      >
+        Reset
+      </button>
+    </div>
+
+    <div
+      v-if="submitted"
+      class="rounded-lg border border-emerald-500/30 bg-emerald-500/10 p-3 font-mono text-xs text-emerald-700 dark:text-emerald-300"
+    >
+      <p class="mb-1 font-semibold not-italic">
+        Submitted
+      </p>
+      <pre class="whitespace-pre-wrap">{{ JSON.stringify(submitted, null, 2) }}</pre>
+    </div>
+    <p v-else class="text-center text-xs text-(--fg-subtle)">
+      Validates on blur, then live on every change.
+    </p>
+  </form>
+</template>
diff --git a/vue/toolkit/src/composables/forms/useForm/index.test.ts b/vue/toolkit/src/composables/forms/useForm/index.test.ts
new file mode 100644
index 0000000..129375d
--- /dev/null
+++ b/vue/toolkit/src/composables/forms/useForm/index.test.ts
@@ -0,0 +1,245 @@
+import { describe, expect, it, vi } from 'vitest';
+import { defineComponent, h, nextTick } from 'vue';
+import { flushPromises, mount } from '@vue/test-utils';
+import { useForm } from '.';
+import type { UseFormOptions, UseFormReturn } from '.';
+import type { StandardSchemaIssue, StandardSchemaV1 } from '@/types';
+
+/**
+ * A hand-rolled Standard Schema (no zod dependency) proving `~standard` interop.
+ * Each entry returns a message string for an invalid field, or `undefined`.
+ */
+function makeSchema<T extends Record<string, any>>(
+  rules: { [K in keyof T]?: (value: any) => string | undefined },
+): StandardSchemaV1<T> {
+  return {
+    '~standard': {
+      version: 1,
+      vendor: 'test',
+      validate(value: any) {
+        const issues: StandardSchemaIssue[] = [];
+        for (const key of Object.keys(rules)) {
+          const message = rules[key]!(value?.[key]);
+          if (message)
+            issues.push({ message, path: [key] });
+        }
+        return issues.length > 0 ? { issues } : { value: value as T };
+      },
+    },
+  };
+}
+
+function mountForm<TInput extends object, TOutput = TInput>(
+  options: UseFormOptions<TInput, TOutput>,
+) {
+  let form!: UseFormReturn<TInput, TOutput>;
+  const wrapper = mount(defineComponent({
+    setup() {
+      form = useForm<TInput, TOutput>(options);
+      return () => h('form');
+    },
+  }));
+  return { form: form!, wrapper };
+}
+
+describe(useForm, () => {
+  it('exposes reactive values from initialValues', () => {
+    const { form } = mountForm({ initialValues: { email: 'a@b.com', age: 30 } });
+
+    expect(form.values.email).toBe('a@b.com');
+    expect(form.getFieldValue('age')).toBe(30);
+  });
+
+  it('writes a field value by path', () => {
+    const { form } = mountForm({ initialValues: { address: { city: '' } } });
+
+    form.setFieldValue('address.city', 'NYC');
+
+    expect(form.values.address.city).toBe('NYC');
+    expect(form.getFieldValue('address.city')).toBe('NYC');
+  });
+
+  it('tracks dirty state against the initial snapshot', () => {
+    const { form } = mountForm({ initialValues: { name: 'Jane' } });
+
+    expect(form.isDirty.value).toBeFalsy();
+    form.setFieldValue('name', 'John');
+    expect(form.isDirty.value).toBeTruthy();
+    expect(form.isFieldDirty('name')).toBeTruthy();
+    form.setFieldValue('name', 'Jane');
+    expect(form.isDirty.value).toBeFalsy();
+  });
+
+  it('validates with a Standard Schema and maps issues by path', async () => {
+    const { form } = mountForm({
+      initialValues: { email: '', age: 0 },
+      schema: makeSchema<{ email: string; age: number }>({
+        email: v => (typeof v === 'string' && v.includes('@') ? undefined : 'Invalid email'),
+        age: v => (v >= 18 ? undefined : 'Too young'),
+      }),
+    });
+
+    const result = await form.validate();
+
+    expect(result.valid).toBeFalsy();
+    expect(form.getError('email')).toBe('Invalid email');
+    expect(form.getError('age')).toBe('Too young');
+    expect(form.isValid.value).toBeFalsy();
+
+    form.setFieldValue('email', 'a@b.com');
+    form.setFieldValue('age', 21);
+    const ok = await form.validate();
+
+    expect(ok.valid).toBeTruthy();
+    expect(ok.output).toEqual({ email: 'a@b.com', age: 21 });
+    expect(form.isValid.value).toBeTruthy();
+  });
+
+  it('supports a custom resolver', async () => {
+    const { form } = mountForm<{ pin: string }>({
+      initialValues: { pin: '12' },
+      resolver: values => (values.pin.length === 4 ? { values } : { errors: { pin: ['Need 4 digits'] } }),
+    });
+
+    expect((await form.validate()).valid).toBeFalsy();
+    expect(form.getError('pin')).toBe('Need 4 digits');
+
+    form.setFieldValue('pin', '1234');
+    expect((await form.validate()).valid).toBeTruthy();
+  });
+
+  it('merges per-field function validators with the schema', async () => {
+    const { form } = mountForm<{ password: string; confirm: string }>({
+      initialValues: { password: 'secret', confirm: 'nope' },
+    });
+
+    form.defineField('confirm', {
+      validate: (value, values) => (value === values.password ? true : 'Passwords must match'),
+    });
+
+    expect((await form.validate()).valid).toBeFalsy();
+    expect(form.getError('confirm')).toBe('Passwords must match');
+
+    form.setFieldValue('confirm', 'secret');
+    expect((await form.validate()).valid).toBeTruthy();
+  });
+
+  it('handleSubmit calls onValid with typed output and bumps submitCount', async () => {
+    const onValid = vi.fn();
+    const { form } = mountForm({
+      initialValues: { name: 'Jane' },
+      schema: makeSchema<{ name: string }>({ name: v => (v ? undefined : 'Required') }),
+    });
+
+    await form.handleSubmit(onValid)();
+
+    expect(onValid).toHaveBeenCalledWith({ name: 'Jane' }, undefined);
+    expect(form.submitCount.value).toBe(1);
+  });
+
+  it('handleSubmit calls onInvalid and marks errored fields touched', async () => {
+    const onValid = vi.fn();
+    const onInvalid = vi.fn();
+    const { form } = mountForm({
+      initialValues: { name: '' },
+      schema: makeSchema<{ name: string }>({ name: v => (v ? undefined : 'Required') }),
+    });
+
+    await form.handleSubmit(onValid, onInvalid)();
+
+    expect(onValid).not.toHaveBeenCalled();
+    expect(onInvalid).toHaveBeenCalledTimes(1);
+    expect(form.isFieldTouched('name')).toBeTruthy();
+  });
+
+  it('prevents the native submit event default', async () => {
+    const { form } = mountForm({ initialValues: { a: 1 } });
+    const event = { preventDefault: vi.fn() } as unknown as Event;
+
+    await form.handleSubmit(vi.fn())(event);
+
+    expect((event.preventDefault as ReturnType<typeof vi.fn>)).toHaveBeenCalled();
+  });
+
+  it('setValues merges by default and replaces when asked', () => {
+    const { form } = mountForm({ initialValues: { a: 1, b: 2 } });
+
+    form.setValues({ a: 9 });
+    expect(form.values).toEqual({ a: 9, b: 2 });
+
+    form.setValues({ a: 5 }, { merge: false });
+    expect(form.values).toEqual({ a: 5 });
+  });
+
+  it('sets and clears field errors directly', () => {
+    const { form } = mountForm({ initialValues: { name: '' } });
+
+    form.setFieldError('name', 'Bad');
+    expect(form.getError('name')).toBe('Bad');
+
+    form.setFieldError('name', null);
+    expect(form.getErrors('name')).toEqual([]);
+
+    form.setErrors({ name: ['One', 'Two'] });
+    expect(form.getErrors('name')).toEqual(['One', 'Two']);
+  });
+
+  it('resets values, errors, touched and submitCount', async () => {
+    const { form } = mountForm({
+      initialValues: { name: 'Jane' },
+      schema: makeSchema<{ name: string }>({ name: () => 'always-bad' }),
+    });
+
+    form.setFieldValue('name', 'John');
+    form.setFieldTouched('name', true);
+    await form.handleSubmit(vi.fn())();
+
+    form.resetForm();
+
+    expect(form.values.name).toBe('Jane');
+    expect(form.getErrors('name')).toEqual([]);
+    expect(form.isFieldTouched('name')).toBeFalsy();
+    expect(form.submitCount.value).toBe(0);
+  });
+
+  it('resetField restores a single field to its initial value', () => {
+    const { form } = mountForm({ initialValues: { a: 1, b: 2 } });
+
+    form.setFieldValue('a', 10);
+    form.setFieldValue('b', 20);
+    form.resetField('a');
+
+    expect(form.values.a).toBe(1);
+    expect(form.values.b).toBe(20);
+  });
+
+  it('defineField yields a working v-model + props pair', async () => {
+    const { form } = mountForm({
+      initialValues: { name: '' },
+      schema: makeSchema<{ name: string }>({ name: v => (v ? undefined : 'Required') }),
+    });
+
+    const [model, props] = form.defineField('name');
+
+    expect(props.value.name).toBe('name');
+    expect(props.value['aria-invalid']).toBeUndefined();
+
+    model.value = 'Jane';
+    expect(form.values.name).toBe('Jane');
+
+    form.setFieldError('name', 'Required');
+    await nextTick();
+    expect(props.value['aria-invalid']).toBeTruthy();
+  });
+
+  it('validateOnMount validates immediately', async () => {
+    const { form } = mountForm({
+      initialValues: { name: '' },
+      schema: makeSchema<{ name: string }>({ name: v => (v ? undefined : 'Required') }),
+      validateOnMount: true,
+    });
+
+    await flushPromises();
+    expect(form.getError('name')).toBe('Required');
+  });
+});
diff --git a/vue/toolkit/src/composables/forms/useForm/index.ts b/vue/toolkit/src/composables/forms/useForm/index.ts
new file mode 100644
index 0000000..0d36a7a
--- /dev/null
+++ b/vue/toolkit/src/composables/forms/useForm/index.ts
@@ -0,0 +1,506 @@
+import { computed, reactive, readonly, ref, toValue } from 'vue';
+import type { ComputedRef, Ref } from 'vue';
+import { get, isEqual, isObject, set, toArray } from '@robonen/stdlib';
+import { cloneFnDefault } from '@/composables/reactivity/useCloned';
+import { tryOnMounted } from '@/composables/lifecycle/tryOnMounted';
+import { provideFormContext } from './context';
+import { normalizeFieldResult, runStandardSchema } from './validation';
+import type {
+  FieldBindingProps,
+  FieldPath,
+  FieldPathValue,
+  FieldValidationResultDetail,
+  FieldValidator,
+  FormErrors,
+  FormMeta,
+  FormResetState,
+  FormValidationResult,
+  InvalidSubmissionHandler,
+  PartialDeep,
+  SetValueOptions,
+  SubmissionHandler,
+  UseFormOptions,
+  UseFormReturn,
+  ValidationTrigger,
+} from './types';
+
+export type {
+  FieldArrayEntry,
+  FieldBindingProps,
+  FieldMeta,
+  FieldPath,
+  FieldPathValue,
+  FieldValidationResult,
+  FieldValidationResultDetail,
+  FieldValidator,
+  FormContext,
+  FormErrors,
+  FormMeta,
+  FormResetState,
+  FormResolver,
+  FormResolverResult,
+  FormValidationResult,
+  InvalidSubmissionHandler,
+  PartialDeep,
+  SetValueOptions,
+  SubmissionHandler,
+  UseFieldArrayOptions,
+  UseFieldArrayReturn,
+  UseFieldOptions,
+  UseFieldReturn,
+  UseFormOptions,
+  UseFormReturn,
+  ValidationTrigger,
+} from './types';
+
+/**
+ * Recursively assign `source` into the reactive `target`, deep-merging plain
+ * objects and cloning leaf values so callers can't share mutable references.
+ */
+function deepAssign(target: Record<string, any>, source: Record<string, any>): void {
+  for (const key of Object.keys(source)) {
+    const value = source[key];
+    const current = target[key];
+
+    if (isObject(value) && isObject(current))
+      deepAssign(current, value);
+    else
+      target[key] = cloneFnDefault(value);
+  }
+}
+
+/**
+ * @name useForm
+ * @category Forms
+ * @description Headless, performant form state management. Holds reactive `values`,
+ * flat path-keyed `errors`/touched maps, derived `meta`, and a full set of
+ * mutation/validation/submit/reset helpers. Validation accepts a
+ * [Standard Schema](https://github.com/standard-schema/standard-schema)
+ * (zod/valibot/arktype), a custom resolver, or per-field function validators.
+ *
+ * @param {UseFormOptions} [options={}] Initial values, schema/resolver, and validation triggers
+ * @returns {UseFormReturn} The reactive form instance (also provided to descendant fields)
+ *
+ * @example
+ * const { values, errors, handleSubmit } = useForm({
+ *   initialValues: { email: '', age: 0 },
+ *   schema: z.object({ email: z.string().email(), age: z.number().min(18) }),
+ * });
+ * const onSubmit = handleSubmit((output) => save(output));
+ *
+ * @example
+ * // Inline binding with defineField
+ * const form = useForm({ initialValues: { name: '' } });
+ * const [name, nameProps] = form.defineField('name');
+ * // <input v-model="name" v-bind="nameProps">
+ *
+ * @since 0.0.16
+ */
+export function useForm<TInput extends object, TOutput = TInput>(
+  options: UseFormOptions<TInput, TOutput> = {},
+): UseFormReturn<TInput, TOutput> {
+  const {
+    schema,
+    resolver,
+    validateOnMount = false,
+    validateOn = 'submit',
+    revalidateOn = 'value',
+  } = options;
+
+  // Cloned snapshot of the initial values, used as the dirty/reset baseline.
+  let initialSnapshot = cloneFnDefault((toValue(options.initialValues) ?? {}) as PartialDeep<TInput>);
+
+  const values = reactive(cloneFnDefault(initialSnapshot) as object) as TInput;
+  const errorsMap = ref<FormErrors>({});
+  const touchedMap = reactive<Record<string, boolean>>({});
+
+  const isValidating = ref(false);
+  const isSubmitting = ref(false);
+  const submitCount = ref(0);
+
+  // Field-level function validators registered by useField/defineField.
+  const fieldValidators = new Map<string, Set<FieldValidator>>();
+  // Every path a field has been declared for (drives setTouched("all")).
+  const knownFields = new Set<string>();
+
+  function readPath(path: string): any {
+    return get(values as any, path);
+  }
+
+  // ---- derived state ----------------------------------------------------
+
+  const errors = computed<FormErrors>(() => errorsMap.value);
+  const isValid = computed<boolean>(() => Object.keys(errorsMap.value).length === 0);
+  const isDirty = computed<boolean>(() => !isEqual(values, initialSnapshot));
+  const isTouched = computed<boolean>(() => Object.values(touchedMap).some(Boolean));
+
+  const meta = computed<FormMeta>(() => ({
+    dirty: isDirty.value,
+    valid: isValid.value,
+    touched: isTouched.value,
+    pending: isValidating.value,
+  }));
+
+  // ---- trigger gating ---------------------------------------------------
+
+  function effectiveTrigger(override?: ValidationTrigger): ValidationTrigger {
+    return override ?? (submitCount.value > 0 ? revalidateOn : validateOn);
+  }
+
+  function shouldValidate(event: 'value' | 'blur', override?: ValidationTrigger): boolean {
+    const trigger = effectiveTrigger(override);
+    if (trigger === 'manual' || trigger === 'submit')
+      return false;
+    if (trigger === 'value')
+      return true;
+    return event === 'blur';
+  }
+
+  // ---- validation pipeline ---------------------------------------------
+
+  let validationSeq = 0;
+
+  async function runValidation(): Promise<FormValidationResult<TOutput>> {
+    // Validate against the live reactive `values` — schema/resolver/validators
+    // only READ it — so there is no deep clone on every keystroke. A plain
+    // snapshot is materialised only for the (schemaless) success output.
+    let resultErrors: FormErrors = {};
+    let output: TOutput | undefined;
+
+    if (schema) {
+      const run = await runStandardSchema(schema, values);
+      resultErrors = run.errors;
+      output = run.output;
+    }
+    else if (resolver) {
+      const run = await resolver(values as TInput);
+      resultErrors = run.errors ?? {};
+      output = run.values;
+    }
+
+    // Merge per-field function validators on top of schema/resolver errors.
+    for (const [path, validators] of fieldValidators) {
+      for (const validator of validators) {
+        const messages = normalizeFieldResult(await validator(get(values as any, path), values as TInput));
+        if (messages.length > 0)
+          (resultErrors[path] ??= []).push(...messages);
+      }
+    }
+
+    const valid = Object.keys(resultErrors).length === 0;
+
+    return {
+      valid,
+      errors: resultErrors,
+      output: valid ? (output ?? (cloneFnDefault(values) as unknown as TOutput)) : undefined,
+    };
+  }
+
+  async function validate(): Promise<FormValidationResult<TOutput>> {
+    const seq = ++validationSeq;
+    isValidating.value = true;
+
+    try {
+      const result = await runValidation();
+      // Apply only if this is still the latest run (drop stale async results).
+      if (seq === validationSeq)
+        errorsMap.value = result.errors;
+      return result;
+    }
+    finally {
+      if (seq === validationSeq)
+        isValidating.value = false;
+    }
+  }
+
+  async function validateField(path: FieldPath<TInput>): Promise<FieldValidationResultDetail> {
+    const result = await validate();
+    const fieldErrors = result.errors[path as string] ?? [];
+    return { valid: fieldErrors.length === 0, errors: fieldErrors };
+  }
+
+  // ---- queries ----------------------------------------------------------
+
+  function getFieldValue<P extends FieldPath<TInput>>(path: P): FieldPathValue<TInput, P> {
+    return readPath(path as string) as FieldPathValue<TInput, P>;
+  }
+
+  function getErrors(path: FieldPath<TInput>): string[] {
+    return errorsMap.value[path as string] ?? [];
+  }
+
+  function getError(path: FieldPath<TInput>): string | undefined {
+    return getErrors(path)[0];
+  }
+
+  function isFieldDirty(path: FieldPath<TInput>): boolean {
+    return !isEqual(readPath(path as string), get(initialSnapshot as any, path as string));
+  }
+
+  function isFieldTouched(path: FieldPath<TInput>): boolean {
+    return touchedMap[path as string] === true;
+  }
+
+  function isFieldValid(path: FieldPath<TInput>): boolean {
+    return getErrors(path).length === 0;
+  }
+
+  // ---- mutations --------------------------------------------------------
+
+  function setFieldValue<P extends FieldPath<TInput>>(
+    path: P,
+    value: FieldPathValue<TInput, P>,
+    setOptions?: SetValueOptions,
+  ): void {
+    set(values as any, path as string, value);
+
+    if (setOptions?.shouldTouch) {
+      touchedMap[path as string] = true;
+      knownFields.add(path as string);
+    }
+
+    const should = setOptions?.shouldValidate ?? shouldValidate('value');
+    if (should)
+      void validate();
+  }
+
+  function setValues(next: PartialDeep<TInput>, setOptions?: { merge?: boolean }): void {
+    const merge = setOptions?.merge ?? true;
+
+    if (!merge) {
+      for (const key of Object.keys(values as object))
+        delete (values as Record<string, unknown>)[key];
+    }
+
+    deepAssign(values as Record<string, any>, next as Record<string, any>);
+
+    if (shouldValidate('value'))
+      void validate();
+  }
+
+  function setFieldError(path: FieldPath<TInput>, message: string | string[] | null): void {
+    if (message === null) {
+      delete errorsMap.value[path as string];
+      return;
+    }
+
+    errorsMap.value[path as string] = toArray(message);
+  }
+
+  function setErrors(next: FormErrors): void {
+    errorsMap.value = { ...next };
+  }
+
+  function setFieldTouched(path: FieldPath<TInput>, touched = true): void {
+    touchedMap[path as string] = touched;
+    knownFields.add(path as string);
+  }
+
+  function setTouched(touched = true): void {
+    for (const path of knownFields)
+      touchedMap[path] = touched;
+  }
+
+  // ---- reset ------------------------------------------------------------
+
+  function resetForm(state?: FormResetState<TInput>): void {
+    if (state?.values !== undefined)
+      initialSnapshot = cloneFnDefault(state.values);
+
+    for (const key of Object.keys(values as object))
+      delete (values as Record<string, unknown>)[key];
+    deepAssign(values as Record<string, any>, initialSnapshot as Record<string, any>);
+
+    errorsMap.value = state?.errors ? { ...state.errors } : {};
+
+    for (const key of Object.keys(touchedMap))
+      delete touchedMap[key];
+    if (state?.touched) {
+      for (const [key, value] of Object.entries(state.touched))
+        touchedMap[key] = value;
+    }
+
+    submitCount.value = 0;
+  }
+
+  function resetField<P extends FieldPath<TInput>>(path: P, value?: FieldPathValue<TInput, P>): void {
+    const next = value !== undefined ? value : get(initialSnapshot as any, path as string);
+    set(values as any, path as string, cloneFnDefault(next));
+    delete errorsMap.value[path as string];
+    delete touchedMap[path as string];
+  }
+
+  // ---- handlers ---------------------------------------------------------
+
+  function handleSubmit(
+    onValid: SubmissionHandler<TOutput>,
+    onInvalid?: InvalidSubmissionHandler,
+  ): (event?: Event) => Promise<void> {
+    return async (event?: Event) => {
+      event?.preventDefault?.();
+      submitCount.value += 1;
+      isSubmitting.value = true;
+
+      try {
+        const result = await validate();
+
+        if (result.valid) {
+          await onValid(result.output as TOutput, event);
+        }
+        else {
+          for (const path of Object.keys(result.errors)) {
+            touchedMap[path] = true;
+            knownFields.add(path);
+          }
+          onInvalid?.(result.errors, event);
+        }
+      }
+      finally {
+        isSubmitting.value = false;
+      }
+    };
+  }
+
+  function handleReset(event?: Event): void {
+    event?.preventDefault?.();
+    resetForm();
+  }
+
+  function remapFieldPaths(basePath: string, indexMap: (index: number) => number | null): void {
+    const prefix = `${basePath}.`;
+
+    const rewriteKey = (key: string): string | null => {
+      if (!key.startsWith(prefix))
+        return key;
+
+      const rest = key.slice(prefix.length);
+      const dot = rest.indexOf('.');
+      const index = Number(dot === -1 ? rest : rest.slice(0, dot));
+      if (!Number.isInteger(index))
+        return key;
+
+      const mapped = indexMap(index);
+      if (mapped === null)
+        return null;
+
+      return `${prefix}${mapped}${dot === -1 ? '' : rest.slice(dot)}`;
+    };
+
+    const nextErrors: FormErrors = {};
+    for (const key of Object.keys(errorsMap.value)) {
+      const mappedKey = rewriteKey(key);
+      if (mappedKey !== null)
+        nextErrors[mappedKey] = errorsMap.value[key]!;
+    }
+    errorsMap.value = nextErrors;
+
+    const touchedEntries = Object.entries(touchedMap);
+    for (const key of Object.keys(touchedMap))
+      delete touchedMap[key];
+    for (const [key, value] of touchedEntries) {
+      const mappedKey = rewriteKey(key);
+      if (mappedKey !== null)
+        touchedMap[mappedKey] = value;
+    }
+  }
+
+  // ---- binding ----------------------------------------------------------
+
+  function registerValidator(path: string, validator: FieldValidator): void {
+    let set_ = fieldValidators.get(path);
+    if (!set_) {
+      set_ = new Set();
+      fieldValidators.set(path, set_);
+    }
+    set_.add(validator);
+    knownFields.add(path);
+  }
+
+  function unregisterValidator(path: string, validator: FieldValidator): void {
+    const set_ = fieldValidators.get(path);
+    if (!set_)
+      return;
+    set_.delete(validator);
+    if (set_.size === 0)
+      fieldValidators.delete(path);
+  }
+
+  function defineField<P extends FieldPath<TInput>>(
+    path: P,
+    fieldOptions?: { validate?: FieldValidator<FieldPathValue<TInput, P>, TInput>; validateOn?: ValidationTrigger },
+  ): [Ref<FieldPathValue<TInput, P>>, ComputedRef<FieldBindingProps>] {
+    knownFields.add(path as string);
+
+    if (fieldOptions?.validate)
+      registerValidator(path as string, fieldOptions.validate as FieldValidator);
+
+    const model = computed<FieldPathValue<TInput, P>>({
+      get: () => getFieldValue(path),
+      set: value => setFieldValue(path, value, { shouldValidate: shouldValidate('value', fieldOptions?.validateOn) }),
+    });
+
+    const props = computed<FieldBindingProps>(() => ({
+      name: path as string,
+      onBlur: () => {
+        touchedMap[path as string] = true;
+        if (shouldValidate('blur', fieldOptions?.validateOn))
+          void validate();
+      },
+      'aria-invalid': getErrors(path).length > 0 ? true : undefined,
+    }));
+
+    return [model as Ref<FieldPathValue<TInput, P>>, props];
+  }
+
+  const formProps = {
+    onSubmit: (event: Event): void => {
+      event.preventDefault();
+    },
+    onReset: handleReset,
+    novalidate: true,
+  };
+
+  const context: UseFormReturn<TInput, TOutput> = {
+    values,
+    errors,
+    meta,
+    isDirty,
+    isValid,
+    isValidating: readonly(isValidating),
+    isSubmitting: readonly(isSubmitting),
+    submitCount: readonly(submitCount),
+    getFieldValue,
+    getError,
+    getErrors,
+    isFieldDirty,
+    isFieldTouched,
+    isFieldValid,
+    setFieldValue,
+    setValues,
+    setFieldError,
+    setErrors,
+    setFieldTouched,
+    setTouched,
+    validate,
+    validateField,
+    resetForm,
+    resetField,
+    handleSubmit,
+    handleReset,
+    defineField,
+    formProps,
+    _registerValidator: registerValidator,
+    _unregisterValidator: unregisterValidator,
+    _shouldValidate: trigger => (trigger === 'submit' ? true : shouldValidate(trigger)),
+    _remapFieldPaths: remapFieldPaths,
+  };
+
+  provideFormContext(context as UseFormReturn);
+
+  tryOnMounted(() => {
+    if (validateOnMount)
+      void validate();
+  });
+
+  return context;
+}
diff --git a/vue/toolkit/src/composables/forms/useForm/types.ts b/vue/toolkit/src/composables/forms/useForm/types.ts
new file mode 100644
index 0000000..b59c7c7
--- /dev/null
+++ b/vue/toolkit/src/composables/forms/useForm/types.ts
@@ -0,0 +1,608 @@
+import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';
+import type { StandardSchemaV1 } from '@/types';
+
+/**
+ * Values that cannot be descended into when building field paths.
+ */
+type FieldPrimitive
+  = | string
+    | number
+    | boolean
+    | bigint
+    | symbol
+    | null
+    | undefined
+    | Date
+    | RegExp
+    | ((...args: any[]) => any);
+
+/**
+ * Union of every dot-separated path into `T` (including array indices), e.g.
+ * `'email' | 'address' | 'address.city' | 'tags.0'`.
+ */
+export type FieldPath<T> = T extends FieldPrimitive
+  ? never
+  : T extends ReadonlyArray<infer U>
+    ? `${number}` | `${number}.${FieldPath<U>}`
+    : {
+        [K in keyof T & (string | number)]: T[K] extends FieldPrimitive
+          ? `${K}`
+          : `${K}` | `${K}.${FieldPath<T[K]>}`;
+      }[keyof T & (string | number)];
+
+/**
+ * The value type at a given {@link FieldPath} of `T`.
+ */
+export type FieldPathValue<T, P extends string> = P extends `${infer K}.${infer Rest}`
+  ? K extends keyof T
+    ? FieldPathValue<T[K], Rest>
+    : T extends ReadonlyArray<infer U>
+      ? FieldPathValue<U, Rest>
+      : unknown
+  : P extends keyof T
+    ? T[P]
+    : T extends ReadonlyArray<infer U>
+      ? U
+      : unknown;
+
+/**
+ * A recursively-partial version of `T` (used for `initialValues`/`setValues`).
+ */
+export type PartialDeep<T> = T extends FieldPrimitive
+  ? T
+  : T extends ReadonlyArray<infer U>
+    ? Array<PartialDeep<U>>
+    : { [K in keyof T]?: PartialDeep<T[K]> };
+
+/**
+ * When validation runs for a field/form.
+ * - `value` — on every value change
+ * - `blur` — when the field is blurred
+ * - `submit` — only on submit
+ * - `manual` — never automatically; only via `validate()`/`validateField()`
+ */
+export type ValidationTrigger = 'value' | 'blur' | 'submit' | 'manual';
+
+/**
+ * Flat map of field path → error messages.
+ */
+export type FormErrors = Record<string, string[]>;
+
+/**
+ * The value a field-level function validator may return. A `string`/`string[]`
+ * is treated as error message(s); `true`/`void`/`null`/`undefined` means valid.
+ */
+export type FieldValidationResult = string | string[] | true | void | null | undefined;
+
+/**
+ * A field-level function validator.
+ */
+export type FieldValidator<T = any, TInput extends object = any>
+  = (value: T, values: TInput) => FieldValidationResult | Promise<FieldValidationResult>;
+
+/**
+ * A custom form-level resolver (alternative to a Standard Schema).
+ */
+export type FormResolver<TInput extends object, TOutput = TInput>
+  = (values: TInput) => FormResolverResult<TOutput> | Promise<FormResolverResult<TOutput>>;
+
+/**
+ * The shape returned by a {@link FormResolver}.
+ */
+export interface FormResolverResult<TOutput> {
+  /**
+   * The (optionally transformed) valid output. Read on success.
+   */
+  values?: TOutput;
+  /**
+   * Flat map of path → messages. Empty/absent means valid.
+   */
+  errors?: FormErrors;
+}
+
+/**
+ * The outcome of running form validation.
+ */
+export interface FormValidationResult<TOutput> {
+  /**
+   * Whether the form is valid (no errors).
+   */
+  valid: boolean;
+  /**
+   * The flat error map produced by this run.
+   */
+  errors: FormErrors;
+  /**
+   * The typed, validated output (present only when `valid`).
+   */
+  output?: TOutput;
+}
+
+/**
+ * The outcome of validating a single field.
+ */
+export interface FieldValidationResultDetail {
+  /**
+   * Whether the field is valid.
+   */
+  valid: boolean;
+  /**
+   * The field's error messages (empty when valid).
+   */
+  errors: string[];
+}
+
+/**
+ * Reactive meta flags describing the whole form.
+ */
+export interface FormMeta {
+  /**
+   * Whether any value differs from its initial snapshot.
+   */
+  dirty: boolean;
+  /**
+   * Whether the form currently has no errors.
+   */
+  valid: boolean;
+  /**
+   * Whether any field has been touched.
+   */
+  touched: boolean;
+  /**
+   * Whether a validation run is in flight.
+   */
+  pending: boolean;
+}
+
+/**
+ * Reactive meta flags describing a single field.
+ */
+export interface FieldMeta {
+  /**
+   * Whether the field's value differs from its initial snapshot.
+   */
+  dirty: ComputedRef<boolean>;
+  /**
+   * Whether the field has been touched (blurred).
+   */
+  touched: ComputedRef<boolean>;
+  /**
+   * Whether the field currently has no errors.
+   */
+  valid: ComputedRef<boolean>;
+}
+
+/**
+ * Props to spread onto a native field element (via `v-bind`).
+ */
+export interface FieldBindingProps {
+  /**
+   * The field's dotted path, suitable as the input `name`.
+   */
+  name: string;
+  /**
+   * Blur handler that marks the field touched and (re)validates per trigger.
+   */
+  onBlur: (event?: Event) => void;
+  /**
+   * `true` when the field currently has errors, for `aria-invalid`.
+   */
+  'aria-invalid': boolean | undefined;
+}
+
+/**
+ * Options for {@link UseFormOptions}'s value-write helpers.
+ */
+export interface SetValueOptions {
+  /**
+   * Whether to (re)validate after the write. Defaults to the form's trigger config.
+   */
+  shouldValidate?: boolean;
+  /**
+   * Whether to mark the field touched. Defaults to `false`.
+   */
+  shouldTouch?: boolean;
+}
+
+/**
+ * State accepted by `resetForm`.
+ */
+export interface FormResetState<TInput extends object> {
+  /**
+   * New baseline values (defaults to the original initial values).
+   */
+  values?: PartialDeep<TInput>;
+  /**
+   * New touched map (defaults to empty).
+   */
+  touched?: Record<string, boolean>;
+  /**
+   * New error map (defaults to empty).
+   */
+  errors?: FormErrors;
+}
+
+/**
+ * The success callback for `handleSubmit`.
+ */
+export type SubmissionHandler<TOutput> = (values: TOutput, event?: Event) => void | Promise<void>;
+
+/**
+ * The invalid callback for `handleSubmit`.
+ */
+export type InvalidSubmissionHandler = (errors: FormErrors, event?: Event) => void;
+
+/**
+ * Options for {@link useForm}.
+ */
+export interface UseFormOptions<TInput extends object, TOutput = TInput> {
+  /**
+   * Initial form values (ref/getter supported; cloned on init).
+   */
+  initialValues?: MaybeRefOrGetter<PartialDeep<TInput>>;
+  /**
+   * A Standard Schema (zod/valibot/arktype/…) validating the whole form.
+   */
+  schema?: StandardSchemaV1<TInput, TOutput>;
+  /**
+   * A custom form-level resolver (alternative to `schema`).
+   */
+  resolver?: FormResolver<TInput, TOutput>;
+  /**
+   * Validate once on mount.
+   *
+   * @default false
+   */
+  validateOnMount?: boolean;
+  /**
+   * When to validate before the first submit.
+   *
+   * @default 'submit'
+   */
+  validateOn?: ValidationTrigger;
+  /**
+   * When to validate after the first submit (or after a field is touched).
+   *
+   * @default 'value'
+   */
+  revalidateOn?: ValidationTrigger;
+}
+
+/**
+ * The form instance returned by {@link useForm} (and injected by
+ * {@link useFormContext}). Also serves as the context shared with fields.
+ */
+export interface FormContext<TInput extends object = any, TOutput = TInput> {
+  /**
+   * Reactive form values. Bind directly with `v-model="values.path"`.
+   */
+  values: TInput;
+  /**
+   * Flat, reactive map of path → error messages.
+   */
+  errors: ComputedRef<FormErrors>;
+  /**
+   * Grouped reactive meta flags for the whole form.
+   */
+  meta: ComputedRef<FormMeta>;
+
+  /**
+   * Whether any value differs from the initial snapshot.
+   */
+  isDirty: ComputedRef<boolean>;
+  /**
+   * Whether the form has no errors.
+   */
+  isValid: ComputedRef<boolean>;
+  /**
+   * Whether a validation run is in flight.
+   */
+  isValidating: Readonly<Ref<boolean>>;
+  /**
+   * Whether a submit is in flight.
+   */
+  isSubmitting: Readonly<Ref<boolean>>;
+  /**
+   * Number of times submit has been attempted.
+   */
+  submitCount: Readonly<Ref<number>>;
+
+  /**
+   * Read a field value by path.
+   */
+  getFieldValue: <P extends FieldPath<TInput>>(path: P) => FieldPathValue<TInput, P>;
+  /**
+   * The first error message for a path, if any.
+   */
+  getError: (path: FieldPath<TInput>) => string | undefined;
+  /**
+   * All error messages for a path (empty array when none).
+   */
+  getErrors: (path: FieldPath<TInput>) => string[];
+  /**
+   * Whether a field differs from its initial snapshot.
+   */
+  isFieldDirty: (path: FieldPath<TInput>) => boolean;
+  /**
+   * Whether a field has been touched.
+   */
+  isFieldTouched: (path: FieldPath<TInput>) => boolean;
+  /**
+   * Whether a field currently has no errors.
+   */
+  isFieldValid: (path: FieldPath<TInput>) => boolean;
+
+  /**
+   * Write a field value by path.
+   */
+  setFieldValue: <P extends FieldPath<TInput>>(
+    path: P,
+    value: FieldPathValue<TInput, P>,
+    options?: SetValueOptions,
+  ) => void;
+  /**
+   * Merge or replace multiple values at once.
+   */
+  setValues: (values: PartialDeep<TInput>, options?: { merge?: boolean }) => void;
+  /**
+   * Set or clear (with `null`) a field's error messages.
+   */
+  setFieldError: (path: FieldPath<TInput>, message: string | string[] | null) => void;
+  /**
+   * Replace the entire error map.
+   */
+  setErrors: (errors: FormErrors) => void;
+  /**
+   * Mark a field touched/untouched.
+   */
+  setFieldTouched: (path: FieldPath<TInput>, touched?: boolean) => void;
+  /**
+   * Mark all known fields touched/untouched.
+   */
+  setTouched: (touched?: boolean) => void;
+
+  /**
+   * Validate the whole form.
+   */
+  validate: () => Promise<FormValidationResult<TOutput>>;
+  /**
+   * Validate a single field (runs the pipeline, updates that field's errors).
+   */
+  validateField: (path: FieldPath<TInput>) => Promise<FieldValidationResultDetail>;
+
+  /**
+   * Reset the form to its initial (or provided) state.
+   */
+  resetForm: (state?: FormResetState<TInput>) => void;
+  /**
+   * Reset a single field to its initial (or provided) value.
+   */
+  resetField: <P extends FieldPath<TInput>>(path: P, value?: FieldPathValue<TInput, P>) => void;
+
+  /**
+   * Wrap a submit callback: validates, then calls `onValid` with typed output
+   * (or `onInvalid` with the error map).
+   */
+  handleSubmit: (
+    onValid: SubmissionHandler<TOutput>,
+    onInvalid?: InvalidSubmissionHandler,
+  ) => (event?: Event) => Promise<void>;
+  /**
+   * Reset handler suitable for a `<form>`'s `reset` event.
+   */
+  handleReset: (event?: Event) => void;
+
+  /**
+   * Bind a field inline: returns `[model, props]` for `v-model` + `v-bind`.
+   */
+  defineField: <P extends FieldPath<TInput>>(
+    path: P,
+    options?: DefineFieldOptions<FieldPathValue<TInput, P>, TInput>,
+  ) => [Ref<FieldPathValue<TInput, P>>, ComputedRef<FieldBindingProps>];
+
+  /**
+   * Props to spread on the `<form>` element (`@submit`/`@reset`/`novalidate`).
+   */
+  formProps: {
+    onSubmit: (event: Event) => void;
+    onReset: (event: Event) => void;
+    novalidate: boolean;
+  };
+
+  /**
+   * @internal Register a field-level validator for a path (used by `useField`).
+   */
+  _registerValidator: (path: string, validator: FieldValidator) => void;
+  /**
+   * @internal Unregister a field-level validator for a path.
+   */
+  _unregisterValidator: (path: string, validator: FieldValidator) => void;
+  /**
+   * @internal Whether validation should run for a given trigger right now.
+   */
+  _shouldValidate: (trigger: Exclude<ValidationTrigger, 'manual'>) => boolean;
+  /**
+   * @internal Re-key error/touched entries under `basePath` after an array
+   * reorder. `indexMap` maps an old array index to its new index, or `null`
+   * to drop it (removal). Used by `useFieldArray`.
+   */
+  _remapFieldPaths: (basePath: string, indexMap: (index: number) => number | null) => void;
+}
+
+/**
+ * Alias: the public return of {@link useForm} is the form context itself.
+ */
+export type UseFormReturn<TInput extends object = any, TOutput = TInput> = FormContext<TInput, TOutput>;
+
+/**
+ * Options for `defineField`.
+ */
+export interface DefineFieldOptions<T = any, TInput extends object = any> {
+  /**
+   * A field-level function validator.
+   */
+  validate?: FieldValidator<T, TInput>;
+  /**
+   * Override the form's validation trigger for this field.
+   */
+  validateOn?: ValidationTrigger;
+}
+
+/**
+ * Options for {@link useField}.
+ */
+export interface UseFieldOptions<T, TInput extends object = any> {
+  /**
+   * The form to bind to. Defaults to the injected form context; if there is
+   * none and `initialValue` is given, the field runs standalone.
+   */
+  form?: FormContext<TInput>;
+  /**
+   * Initial value for standalone mode (no form context).
+   */
+  initialValue?: T;
+  /**
+   * A field-level function validator.
+   */
+  validate?: FieldValidator<T, TInput>;
+  /**
+   * A per-field Standard Schema (standalone or augmenting the form schema).
+   */
+  schema?: StandardSchemaV1<T>;
+  /**
+   * Override the form's validation trigger for this field.
+   */
+  validateOn?: ValidationTrigger;
+}
+
+/**
+ * The reactive API returned by {@link useField}.
+ */
+export interface UseFieldReturn<T> {
+  /**
+   * The field's writable value (bound to the form path, or local in standalone).
+   */
+  value: Ref<T>;
+  /**
+   * The field's error messages.
+   */
+  errors: ComputedRef<string[]>;
+  /**
+   * The field's first error message, if any.
+   */
+  errorMessage: ComputedRef<string | undefined>;
+  /**
+   * Grouped reactive meta for the field.
+   */
+  meta: FieldMeta;
+  /**
+   * Blur handler — marks touched and (re)validates per trigger.
+   */
+  handleBlur: (event?: Event) => void;
+  /**
+   * Set the value and optionally validate.
+   */
+  handleChange: (value: T, shouldValidate?: boolean) => void;
+  /**
+   * `input`/`change` DOM handler for native elements.
+   */
+  handleInput: (event: Event) => void;
+  /**
+   * Set the field value programmatically.
+   */
+  setValue: (value: T) => void;
+  /**
+   * Mark the field touched/untouched.
+   */
+  setTouched: (touched?: boolean) => void;
+  /**
+   * Set or clear (with `null`) the field's errors.
+   */
+  setErrors: (message: string | string[] | null) => void;
+  /**
+   * Validate just this field.
+   */
+  validate: () => Promise<FieldValidationResultDetail>;
+  /**
+   * Reset the field to its initial value.
+   */
+  reset: () => void;
+  /**
+   * Props to spread on the field element (`v-bind="attrs"`).
+   */
+  attrs: ComputedRef<FieldBindingProps>;
+}
+
+/**
+ * One entry of a {@link useFieldArray}.
+ */
+export interface FieldArrayEntry<T> {
+  /**
+   * A stable key for `v-for`, preserved across reorders.
+   */
+  key: number;
+  /**
+   * The item's writable value (bound to the array slot).
+   */
+  value: Ref<T>;
+  /**
+   * Whether this is the first entry.
+   */
+  isFirst: boolean;
+  /**
+   * Whether this is the last entry.
+   */
+  isLast: boolean;
+}
+
+/**
+ * The API returned by {@link useFieldArray}.
+ */
+export interface UseFieldArrayReturn<T> {
+  /**
+   * The reactive list of entries with stable keys.
+   */
+  fields: Readonly<Ref<Array<FieldArrayEntry<T>>>>;
+  /**
+   * Append an item.
+   */
+  push: (value: T) => void;
+  /**
+   * Prepend an item.
+   */
+  prepend: (value: T) => void;
+  /**
+   * Insert an item at an index.
+   */
+  insert: (index: number, value: T) => void;
+  /**
+   * Remove the item at an index.
+   */
+  remove: (index: number) => void;
+  /**
+   * Move an item from one index to another.
+   */
+  move: (from: number, to: number) => void;
+  /**
+   * Swap two items.
+   */
+  swap: (indexA: number, indexB: number) => void;
+  /**
+   * Replace the whole array.
+   */
+  replace: (values: T[]) => void;
+  /**
+   * Replace a single item.
+   */
+  update: (index: number, value: T) => void;
+}
+
+/**
+ * Options for {@link useFieldArray}.
+ */
+export interface UseFieldArrayOptions<TInput extends object = any> {
+  /**
+   * The form to bind to. Defaults to the injected form context.
+   */
+  form?: FormContext<TInput>;
+}
diff --git a/vue/toolkit/src/composables/forms/useForm/validation.ts b/vue/toolkit/src/composables/forms/useForm/validation.ts
new file mode 100644
index 0000000..86d832c
--- /dev/null
+++ b/vue/toolkit/src/composables/forms/useForm/validation.ts
@@ -0,0 +1,73 @@
+import { isArray } from '@robonen/stdlib';
+import type { StandardSchemaIssue, StandardSchemaV1 } from '@/types';
+import type { FieldValidationResult, FormErrors } from './types';
+
+/**
+ * Convert a Standard Schema issue path into our dot-separated string form.
+ */
+export function issuePathToString(path: StandardSchemaIssue['path']): string {
+  if (!path || path.length === 0)
+    return '';
+
+  let result = '';
+
+  for (const segment of path) {
+    const key = typeof segment === 'object' ? segment.key : segment;
+    result = result === '' ? String(key) : `${result}.${String(key)}`;
+  }
+
+  return result;
+}
+
+/**
+ * Fold a list of Standard Schema issues into a flat `path → messages` map.
+ */
+export function issuesToErrors(issues: readonly StandardSchemaIssue[]): FormErrors {
+  const errors: FormErrors = {};
+
+  for (const issue of issues) {
+    const path = issuePathToString(issue.path);
+    (errors[path] ??= []).push(issue.message);
+  }
+
+  return errors;
+}
+
+/**
+ * The normalized outcome of validating a value against a Standard Schema.
+ */
+export interface StandardSchemaRun<Output> {
+  valid: boolean;
+  output?: Output;
+  errors: FormErrors;
+}
+
+/**
+ * Validate a value against a Standard Schema, awaiting async schemas, and map
+ * the result into our `{ valid, output?, errors }` shape.
+ */
+export async function runStandardSchema<Output>(
+  schema: StandardSchemaV1<any, Output>,
+  value: unknown,
+): Promise<StandardSchemaRun<Output>> {
+  const result = await schema['~standard'].validate(value);
+
+  if (result.issues)
+    return { valid: false, errors: issuesToErrors(result.issues) };
+
+  return { valid: true, output: result.value, errors: {} };
+}
+
+/**
+ * Normalize the return of a field-level function validator into messages.
+ * `true`/`null`/`undefined`/`''` mean valid (empty array).
+ */
+export function normalizeFieldResult(result: FieldValidationResult): string[] {
+  if (result === true || result === null || result === undefined)
+    return [];
+
+  if (isArray(result))
+    return result.filter(message => message.length > 0);
+
+  return result.length > 0 ? [result] : [];
+}
diff --git a/vue/toolkit/src/composables/forms/useFormContext/demo.vue b/vue/toolkit/src/composables/forms/useFormContext/demo.vue
new file mode 100644
index 0000000..578a743
--- /dev/null
+++ b/vue/toolkit/src/composables/forms/useFormContext/demo.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { defineComponent, h } from 'vue';
+import { useForm } from '../useForm';
+import { useFormContext } from './index';
+
+interface Profile {
+  username: string;
+  bio: string;
+}
+
+// A descendant "field" component that reaches the form purely through context —
+// it receives no props and is never told which form it belongs to.
+const ContextField = defineComponent({
+  props: {
+    path: { type: String, required: true },
+    label: { type: String, required: true },
+    multiline: { type: Boolean, default: false },
+  },
+  setup(props) {
+    const form = useFormContext<Profile>();
+
+    // Graceful standalone behaviour when no form ancestor is present.
+    if (!form) {
+      return () =>
+        h('p', { class: 'text-xs text-amber-600 dark:text-amber-400' }, 'No form context found.');
+    }
+
+    const tag = props.multiline ? 'textarea' : 'input';
+    const inputClass
+      = 'w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)';
+
+    return () =>
+      h('div', { class: 'flex flex-col gap-1.5' }, [
+        h(
+          'label',
+          { class: 'text-xs font-medium uppercase tracking-wide text-(--fg-subtle)' },
+          props.label,
+        ),
+        h(tag, {
+          'class': inputClass,
+          'rows': props.multiline ? 2 : undefined,
+          'value': form.getFieldValue(props.path as keyof Profile),
+          'aria-invalid': form.getErrors(props.path as keyof Profile).length > 0 || undefined,
+          'onInput': (event: Event) =>
+            form.setFieldValue(
+              props.path as keyof Profile,
+              (event.target as HTMLInputElement).value,
+              { shouldTouch: true },
+            ),
+        }),
+      ]);
+  },
+});
+
+const form = useForm<Profile>({
+  initialValues: { username: 'grace', bio: 'Compiler pioneer.' },
+});
+const { values, meta, isDirty } = form;
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex flex-col gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Profile (fields read context, not props)
+      </p>
+      <ContextField path="username" label="Username" />
+      <ContextField path="bio" label="Bio" multiline />
+    </div>
+
+    <div class="flex flex-wrap gap-2">
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        dirty: {{ isDirty }}
+      </span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        touched: {{ meta.touched }}
+      </span>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs text-(--fg)">
+      <p class="mb-1 text-(--fg-subtle)">
+        Shared form values:
+      </p>
+      <pre class="whitespace-pre-wrap">{{ JSON.stringify(values, null, 2) }}</pre>
+    </div>
+
+    <p class="text-center text-xs text-(--fg-subtle)">
+      Both inputs are nested children that locate the form via useFormContext().
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/forms/useFormContext/index.test.ts b/vue/toolkit/src/composables/forms/useFormContext/index.test.ts
new file mode 100644
index 0000000..44156ad
--- /dev/null
+++ b/vue/toolkit/src/composables/forms/useFormContext/index.test.ts
@@ -0,0 +1,44 @@
+import { describe, expect, it } from 'vitest';
+import { defineComponent, h } from 'vue';
+import { mount } from '@vue/test-utils';
+import { useForm } from '../useForm';
+import type { UseFormReturn } from '../useForm';
+import { useFormContext } from '.';
+
+describe(useFormContext, () => {
+  it('returns null when no form is provided', () => {
+    let ctx: UseFormReturn | null = null as UseFormReturn | null;
+
+    mount(defineComponent({
+      setup() {
+        ctx = useFormContext();
+        return () => h('div');
+      },
+    }));
+
+    expect(ctx).toBeNull();
+  });
+
+  it('injects the form provided by an ancestor', () => {
+    let injected: UseFormReturn | null = null;
+    let provided: UseFormReturn | undefined;
+
+    const Child = defineComponent({
+      setup() {
+        injected = useFormContext();
+        return () => h('div');
+      },
+    });
+
+    const Parent = defineComponent({
+      setup() {
+        provided = useForm({ initialValues: { a: 1 } });
+        return () => h(Child);
+      },
+    });
+
+    mount(Parent);
+
+    expect(injected).toBe(provided);
+  });
+});
diff --git a/vue/toolkit/src/composables/forms/useFormContext/index.ts b/vue/toolkit/src/composables/forms/useFormContext/index.ts
new file mode 100644
index 0000000..aa16818
--- /dev/null
+++ b/vue/toolkit/src/composables/forms/useFormContext/index.ts
@@ -0,0 +1,23 @@
+import { injectFormContext } from '../useForm/context';
+import type { UseFormReturn } from '../useForm';
+
+/**
+ * @name useFormContext
+ * @category Forms
+ * @description Retrieve the {@link useForm} instance provided by an ancestor, for
+ * building field components that live anywhere in the form's subtree. Returns
+ * `null` when no form has been provided (so callers can support standalone use).
+ *
+ * @returns {UseFormReturn | null} The injected form instance, or `null`
+ *
+ * @example
+ * // Inside a custom <TextField> rendered within a useForm() component:
+ * const form = useFormContext();
+ * if (form)
+ *   form.setFieldValue('email', 'a@b.com');
+ *
+ * @since 0.0.16
+ */
+export function useFormContext<TInput extends object = any, TOutput = TInput>(): UseFormReturn<TInput, TOutput> | null {
+  return injectFormContext<TInput, TOutput>();
+}
diff --git a/web/vue/src/composables/index.ts b/vue/toolkit/src/composables/index.ts
similarity index 51%
rename from web/vue/src/composables/index.ts
rename to vue/toolkit/src/composables/index.ts
index 2e69457..d53b753 100644
--- a/web/vue/src/composables/index.ts
+++ b/vue/toolkit/src/composables/index.ts
@@ -1,8 +1,16 @@
+export * from './animation';
+export * from './array';
 export * from './browser';
 export * from './component';
+export * from './debug';
+export * from './elements';
+export * from './forms';
 export * from './lifecycle';
 export * from './math';
+export * from './media';
 export * from './reactivity';
+export * from './sensors';
 export * from './state';
 export * from './storage';
 export * from './utilities';
+export * from './watch';
diff --git a/web/vue/src/composables/lifecycle/index.ts b/vue/toolkit/src/composables/lifecycle/index.ts
similarity index 100%
rename from web/vue/src/composables/lifecycle/index.ts
rename to vue/toolkit/src/composables/lifecycle/index.ts
diff --git a/vue/toolkit/src/composables/lifecycle/tryOnBeforeMount/demo.vue b/vue/toolkit/src/composables/lifecycle/tryOnBeforeMount/demo.vue
new file mode 100644
index 0000000..a82fca7
--- /dev/null
+++ b/vue/toolkit/src/composables/lifecycle/tryOnBeforeMount/demo.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { tryOnBeforeMount } from './index';
+
+interface LogEntry {
+  id: number;
+  label: string;
+  phase: 'before-mount' | 'setup';
+}
+
+let seq = 0;
+const log = ref<LogEntry[]>([]);
+const order = ref<string[]>([]);
+
+function push(label: string, phase: LogEntry['phase']) {
+  log.value.push({ id: ++seq, label, phase });
+  order.value.push(label);
+}
+
+// A marker we drop synchronously in setup so the relative ordering is visible.
+push('setup body ran', 'setup');
+
+// Synchronous hook: registers via onBeforeMount because we are inside a component.
+tryOnBeforeMount(() => push('sync callback (onBeforeMount)', 'before-mount'));
+
+// Async hook: deferred to the next tick.
+tryOnBeforeMount(() => push('async callback (nextTick)', 'before-mount'), { sync: false });
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <div class="flex flex-col gap-1">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">tryOnBeforeMount</span>
+      <p class="text-sm text-(--fg-muted)">
+        Registers a callback on <code class="font-mono text-(--fg)">onBeforeMount</code> when inside a component,
+        otherwise calls it directly. Watch the execution order below.
+      </p>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Execution timeline</span>
+
+      <ol class="mt-3 flex flex-col gap-2">
+        <li
+          v-for="(entry, index) in log"
+          :key="entry.id"
+          class="flex items-center gap-3"
+        >
+          <span
+            class="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md border border-(--border) bg-(--bg-inset) font-mono text-xs font-medium text-(--fg-muted) tabular-nums"
+          >
+            {{ index + 1 }}
+          </span>
+          <span class="text-sm text-(--fg)">{{ entry.label }}</span>
+          <span
+            class="ml-auto inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+            :class="entry.phase === 'before-mount'
+              ? 'border-sky-500/30 bg-sky-500/10 text-sky-600 dark:text-sky-400'
+              : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+          >
+            {{ entry.phase }}
+          </span>
+        </li>
+      </ol>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+      <span class="text-(--fg-subtle)">order:</span> [{{ order.join(' → ') }}]
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      The sync callback fires during the component's before-mount phase; the async one is queued to the next tick,
+      so it always lands last.
+    </p>
+  </div>
+</template>
diff --git a/web/vue/src/composables/lifecycle/tryOnBeforeMount/index.ts b/vue/toolkit/src/composables/lifecycle/tryOnBeforeMount/index.ts
similarity index 95%
rename from web/vue/src/composables/lifecycle/tryOnBeforeMount/index.ts
rename to vue/toolkit/src/composables/lifecycle/tryOnBeforeMount/index.ts
index f6d2ee1..ca2d9d1 100644
--- a/web/vue/src/composables/lifecycle/tryOnBeforeMount/index.ts
+++ b/vue/toolkit/src/composables/lifecycle/tryOnBeforeMount/index.ts
@@ -1,4 +1,4 @@
-import { onBeforeMount, nextTick } from 'vue';
+import { nextTick, onBeforeMount } from 'vue';
 import type { ComponentInternalInstance } from 'vue';
 import { getLifeCycleTarger } from '@/utils';
 import type { VoidFunction } from '@robonen/stdlib';
@@ -14,19 +14,19 @@ export interface TryOnBeforeMountOptions {
  * @name tryOnBeforeMount
  * @category Lifecycle
  * @description Call onBeforeMount if it's inside a component lifecycle hook, otherwise just calls it
- * 
+ *
  * @param {VoidFunction} fn - The function to run on before mount.
  * @param {TryOnBeforeMountOptions} options - The options for the function.
  * @param {boolean} [options.sync=true] - If true, the function will run synchronously, otherwise it will run asynchronously.
  * @param {ComponentInternalInstance} [options.target] - The target component instance to run the function on.
  * @returns {void}
- * 
+ *
  * @example
  * tryOnBeforeMount(() => console.log('Before mount'));
- * 
+ *
  * @example
  * tryOnBeforeMount(() => console.log('Before mount async'), { sync: false });
- * 
+ *
  * @since 0.0.1
  */
 export function tryOnBeforeMount(fn: VoidFunction, options: TryOnBeforeMountOptions = {}) {
@@ -34,7 +34,7 @@ export function tryOnBeforeMount(fn: VoidFunction, options: TryOnBeforeMountOpti
     sync = true,
     target,
   } = options;
-  
+
   const instance = getLifeCycleTarger(target);
 
   if (instance)
@@ -43,4 +43,4 @@ export function tryOnBeforeMount(fn: VoidFunction, options: TryOnBeforeMountOpti
     fn();
   else
     nextTick(fn);
-}
\ No newline at end of file
+}
diff --git a/vue/toolkit/src/composables/lifecycle/tryOnMounted/demo.vue b/vue/toolkit/src/composables/lifecycle/tryOnMounted/demo.vue
new file mode 100644
index 0000000..ba787d6
--- /dev/null
+++ b/vue/toolkit/src/composables/lifecycle/tryOnMounted/demo.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { tryOnMounted } from './index';
+
+interface LogEntry {
+  id: number;
+  label: string;
+  at: number;
+}
+
+let seq = 0;
+const start = Date.now();
+const log = ref<LogEntry[]>([]);
+const mounted = ref(false);
+
+function push(label: string) {
+  log.value.push({ id: ++seq, label, at: Date.now() - start });
+}
+
+// Marker dropped synchronously while setup runs — before the DOM exists.
+push('setup body executed');
+
+// Sync callback: registered through onMounted because we're inside a component.
+tryOnMounted(() => {
+  mounted.value = true;
+  push('sync callback (onMounted)');
+});
+
+// Async callback: deferred to the next tick, runs after the sync one.
+tryOnMounted(() => push('async callback (nextTick)'), { sync: false });
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <div class="flex items-center justify-between gap-3">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">tryOnMounted</span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+        :class="mounted
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'"
+      >
+        <span
+          class="h-1.5 w-1.5 rounded-full"
+          :class="mounted ? 'bg-emerald-500' : 'bg-amber-500'"
+        />
+        {{ mounted ? 'mounted' : 'pending' }}
+      </span>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Mount timeline</span>
+
+      <ol class="mt-3 flex flex-col gap-2">
+        <li
+          v-for="(entry, index) in log"
+          :key="entry.id"
+          class="flex items-center gap-3"
+        >
+          <span
+            class="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md border border-(--border) bg-(--bg-inset) font-mono text-xs font-medium text-(--fg-muted) tabular-nums"
+          >
+            {{ index + 1 }}
+          </span>
+          <span class="text-sm text-(--fg)">{{ entry.label }}</span>
+          <span class="ml-auto font-mono text-xs text-(--fg-subtle) tabular-nums">+{{ entry.at }}ms</span>
+        </li>
+      </ol>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Both callbacks are safely deferred until the component is mounted. The async variant is queued one extra tick,
+      so it consistently runs after the synchronous one.
+    </p>
+  </div>
+</template>
diff --git a/web/vue/src/composables/lifecycle/tryOnMounted/index.test.ts b/vue/toolkit/src/composables/lifecycle/tryOnMounted/index.test.ts
similarity index 91%
rename from web/vue/src/composables/lifecycle/tryOnMounted/index.test.ts
rename to vue/toolkit/src/composables/lifecycle/tryOnMounted/index.test.ts
index 4000a8b..507ef72 100644
--- a/web/vue/src/composables/lifecycle/tryOnMounted/index.test.ts
+++ b/vue/toolkit/src/composables/lifecycle/tryOnMounted/index.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, vi, expect } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 import { defineComponent, nextTick } from 'vue';
 import type { PropType } from 'vue';
 import { tryOnMounted } from '.';
@@ -12,7 +12,9 @@ const ComponentStub = defineComponent({
     },
   },
   setup(props) {
-    if (props.callback) { tryOnMounted(props.callback); }
+    if (props.callback) {
+      tryOnMounted(props.callback);
+    }
   },
   template: `<div></div>`,
 });
@@ -20,7 +22,7 @@ const ComponentStub = defineComponent({
 describe(tryOnMounted, () => {
   it('run the callback when mounted', () => {
     const callback = vi.fn();
-    
+
     mount(ComponentStub, {
       props: { callback },
     });
@@ -55,4 +57,4 @@ describe(tryOnMounted, () => {
 
     expect(callback).toHaveBeenCalled();
   });
-});
\ No newline at end of file
+});
diff --git a/web/vue/src/composables/lifecycle/tryOnMounted/index.ts b/vue/toolkit/src/composables/lifecycle/tryOnMounted/index.ts
similarity index 92%
rename from web/vue/src/composables/lifecycle/tryOnMounted/index.ts
rename to vue/toolkit/src/composables/lifecycle/tryOnMounted/index.ts
index 583fca4..e9b133d 100644
--- a/web/vue/src/composables/lifecycle/tryOnMounted/index.ts
+++ b/vue/toolkit/src/composables/lifecycle/tryOnMounted/index.ts
@@ -1,10 +1,8 @@
-import { onMounted, nextTick } from 'vue';
+import { nextTick, onMounted } from 'vue';
 import type { ComponentInternalInstance } from 'vue';
 import { getLifeCycleTarger } from '@/utils';
 import type { VoidFunction } from '@robonen/stdlib';
 
-// TODO: tests
-
 export interface TryOnMountedOptions {
   sync?: boolean;
   target?: ComponentInternalInstance;
@@ -14,19 +12,19 @@ export interface TryOnMountedOptions {
  * @name tryOnMounted
  * @category Lifecycle
  * @description Call onMounted if it's inside a component lifecycle hook, otherwise just calls it
- * 
+ *
  * @param {VoidFunction} fn The function to call
  * @param {TryOnMountedOptions} options The options to use
  * @param {boolean} [options.sync=true] If the function should be called synchronously
  * @param {ComponentInternalInstance} [options.target] The target instance to use
  * @returns {void}
- * 
+ *
  * @example
  * tryOnMounted(() => console.log('Mounted!'));
- * 
+ *
  * @example
  * tryOnMounted(() => console.log('Mounted!'), { sync: false });
- * 
+ *
  * @since 0.0.1
  */
 export function tryOnMounted(fn: VoidFunction, options: TryOnMountedOptions = {}) {
@@ -37,10 +35,10 @@ export function tryOnMounted(fn: VoidFunction, options: TryOnMountedOptions = {}
 
   const instance = getLifeCycleTarger(target);
 
-  if (instance)  
+  if (instance)
     onMounted(fn, instance);
   else if (sync)
     fn();
   else
     nextTick(fn);
-}
\ No newline at end of file
+}
diff --git a/vue/toolkit/src/composables/lifecycle/tryOnScopeDispose/demo.vue b/vue/toolkit/src/composables/lifecycle/tryOnScopeDispose/demo.vue
new file mode 100644
index 0000000..8ca903c
--- /dev/null
+++ b/vue/toolkit/src/composables/lifecycle/tryOnScopeDispose/demo.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { effectScope, ref } from 'vue';
+import { tryOnScopeDispose } from './index';
+
+interface LogEntry {
+  id: number;
+  label: string;
+  kind: 'create' | 'dispose' | 'noop';
+}
+
+let seq = 0;
+const log = ref<LogEntry[]>([]);
+const activeScopes = ref(0);
+
+function push(label: string, kind: LogEntry['kind']) {
+  log.value.unshift({ id: ++seq, label, kind });
+}
+
+let current: ReturnType<typeof effectScope> | null = null;
+
+// Create a fresh effect scope and register a dispose hook inside it.
+function createScope() {
+  const id = activeScopes.value + 1;
+  const scope = effectScope();
+
+  scope.run(() => {
+    const registered = tryOnScopeDispose(() => {
+      activeScopes.value--;
+      push(`scope #${id} disposed → cleanup ran`, 'dispose');
+    });
+
+    push(
+      registered
+        ? `scope #${id} created → hook registered`
+        : `scope #${id} created → no active scope (skipped)`,
+      registered ? 'create' : 'noop',
+    );
+  });
+
+  // Stop any previously open scope first so only one is live at a time.
+  current?.stop();
+  current = scope;
+  activeScopes.value = 1;
+}
+
+function disposeScope() {
+  current?.stop();
+  current = null;
+}
+
+// Demonstrates the graceful fallback: outside any scope it returns false.
+function callOutsideScope() {
+  const registered = tryOnScopeDispose(() => {});
+  push(
+    registered
+      ? 'unexpected: registered outside a scope'
+      : 'called outside scope → returned false (no-op)',
+    'noop',
+  );
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <div class="flex items-center justify-between gap-3">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">tryOnScopeDispose</span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+        :class="activeScopes > 0
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        <span
+          class="h-1.5 w-1.5 rounded-full"
+          :class="activeScopes > 0 ? 'bg-emerald-500' : 'bg-(--fg-subtle)'"
+        />
+        {{ activeScopes > 0 ? 'scope active' : 'no scope' }}
+      </span>
+    </div>
+
+    <div class="grid grid-cols-3 gap-2">
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="createScope"
+      >
+        Create scope
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="activeScopes === 0"
+        @click="disposeScope"
+      >
+        Dispose
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="callOutsideScope"
+      >
+        Outside
+      </button>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Event log</span>
+
+      <ul v-if="log.length" class="mt-3 flex flex-col gap-2">
+        <li
+          v-for="entry in log"
+          :key="entry.id"
+          class="flex items-center gap-2.5 text-sm"
+        >
+          <span
+            class="h-1.5 w-1.5 shrink-0 rounded-full"
+            :class="{
+              'bg-emerald-500': entry.kind === 'create',
+              'bg-rose-500': entry.kind === 'dispose',
+              'bg-(--fg-subtle)': entry.kind === 'noop',
+            }"
+          />
+          <span class="text-(--fg)">{{ entry.label }}</span>
+        </li>
+      </ul>
+
+      <p v-else class="mt-3 text-sm text-(--fg-subtle)">
+        Create a scope to register a cleanup hook, then dispose it to watch the callback fire.
+      </p>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Inside an active effect scope the cleanup is registered and runs on disposal. Called with no scope present, it
+      simply returns <code class="font-mono text-(--fg)">false</code> instead of throwing.
+    </p>
+  </div>
+</template>
diff --git a/web/vue/src/composables/lifecycle/tryOnScopeDispose/index.test.ts b/vue/toolkit/src/composables/lifecycle/tryOnScopeDispose/index.test.ts
similarity index 97%
rename from web/vue/src/composables/lifecycle/tryOnScopeDispose/index.test.ts
rename to vue/toolkit/src/composables/lifecycle/tryOnScopeDispose/index.test.ts
index 81c3884..25b8933 100644
--- a/web/vue/src/composables/lifecycle/tryOnScopeDispose/index.test.ts
+++ b/vue/toolkit/src/composables/lifecycle/tryOnScopeDispose/index.test.ts
@@ -9,8 +9,8 @@ const ComponentStub = defineComponent({
   props: {
     callback: {
       type: Function as PropType<VoidFunction>,
-      required: true
-    }
+      required: true,
+    },
   },
   setup(props) {
     tryOnScopeDispose(props.callback);
@@ -26,7 +26,7 @@ describe(tryOnScopeDispose, () => {
     expect(detectedScope).toBeFalsy();
     expect(callback).not.toHaveBeenCalled();
   });
-  
+
   it('run the callback when the scope is disposed', () => {
     const callback = vi.fn();
     const scope = effectScope();
@@ -56,4 +56,4 @@ describe(tryOnScopeDispose, () => {
 
     expect(callback).toHaveBeenCalled();
   });
-});
\ No newline at end of file
+});
diff --git a/web/vue/src/composables/lifecycle/tryOnScopeDispose/index.ts b/vue/toolkit/src/composables/lifecycle/tryOnScopeDispose/index.ts
similarity index 98%
rename from web/vue/src/composables/lifecycle/tryOnScopeDispose/index.ts
rename to vue/toolkit/src/composables/lifecycle/tryOnScopeDispose/index.ts
index 7439016..1be7833 100644
--- a/web/vue/src/composables/lifecycle/tryOnScopeDispose/index.ts
+++ b/vue/toolkit/src/composables/lifecycle/tryOnScopeDispose/index.ts
@@ -5,13 +5,13 @@ import { getCurrentScope, onScopeDispose } from 'vue';
  * @name tryOnScopeDispose
  * @category Lifecycle
  * @description A composable that will run a callback when the scope is disposed or do nothing if the scope isn't available.
- * 
+ *
  * @param {VoidFunction} callback - The callback to run when the scope is disposed.
  * @returns {boolean} - Returns true if the callback was run, otherwise false.
- * 
+ *
  * @example
  * tryOnScopeDispose(() => console.log('Scope disposed'));
- * 
+ *
  * @since 0.0.1
  */
 export function tryOnScopeDispose(callback: VoidFunction) {
diff --git a/vue/toolkit/src/composables/lifecycle/useMounted/demo.vue b/vue/toolkit/src/composables/lifecycle/useMounted/demo.vue
new file mode 100644
index 0000000..620f057
--- /dev/null
+++ b/vue/toolkit/src/composables/lifecycle/useMounted/demo.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { useMounted } from './index';
+
+// A readonly ref that flips to true once the component is mounted.
+const isMounted = useMounted();
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex flex-col gap-1">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">useMounted</span>
+      <p class="text-sm text-(--fg-muted)">
+        Tracks whether the component has finished mounting — handy for SSR-safe rendering and entry animations.
+      </p>
+    </div>
+
+    <div class="flex items-center justify-between rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex flex-col gap-0.5">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">isMounted</span>
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ isMounted }}</span>
+      </div>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs font-medium transition"
+        :class="isMounted
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'"
+      >
+        <span
+          class="h-1.5 w-1.5 rounded-full"
+          :class="isMounted ? 'bg-emerald-500' : 'bg-amber-500'"
+        />
+        {{ isMounted ? 'mounted' : 'mounting…' }}
+      </span>
+    </div>
+
+    <!-- Mount-gated reveal: only animates in once the client takes over. -->
+    <div
+      class="overflow-hidden rounded-lg border border-(--border) bg-(--bg-inset) p-4 transition-all duration-500 ease-out"
+      :class="isMounted ? 'translate-y-0 opacity-100' : 'translate-y-2 opacity-0'"
+    >
+      <p class="text-sm text-(--fg)">
+        This panel fades and slides into view the moment <code class="font-mono">isMounted</code> becomes
+        <code class="font-mono text-(--fg)">true</code>.
+      </p>
+      <p class="mt-1 text-xs text-(--fg-subtle)">
+        On the server it renders hidden, avoiding hydration flicker.
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/lifecycle/useMounted/index.test.ts b/vue/toolkit/src/composables/lifecycle/useMounted/index.test.ts
new file mode 100644
index 0000000..c965c24
--- /dev/null
+++ b/vue/toolkit/src/composables/lifecycle/useMounted/index.test.ts
@@ -0,0 +1,27 @@
+import { describe, expect, it } from 'vitest';
+import { defineComponent, nextTick, ref } from 'vue';
+import { mount } from '@vue/test-utils';
+import { useMounted } from '.';
+
+const ComponentStub = defineComponent({
+  setup() {
+    const isMounted = useMounted();
+
+    return { isMounted };
+  },
+  template: `<div>{{ isMounted }}</div>`,
+});
+
+describe(useMounted, () => {
+  it('return the mounted state of the component', async () => {
+    const component = mount(ComponentStub);
+
+    // Initial render
+    expect(component.text()).toBe('false');
+
+    await nextTick();
+
+    // Will trigger a render
+    expect(component.text()).toBe('true');
+  });
+});
diff --git a/web/vue/src/composables/lifecycle/useMounted/index.ts b/vue/toolkit/src/composables/lifecycle/useMounted/index.ts
similarity index 90%
rename from web/vue/src/composables/lifecycle/useMounted/index.ts
rename to vue/toolkit/src/composables/lifecycle/useMounted/index.ts
index 397b1f0..46e83ae 100644
--- a/web/vue/src/composables/lifecycle/useMounted/index.ts
+++ b/vue/toolkit/src/composables/lifecycle/useMounted/index.ts
@@ -6,23 +6,25 @@ import { getLifeCycleTarger } from '@/utils';
  * @name useMounted
  * @category Lifecycle
  * @description Returns a ref that tracks the mounted state of the component (doesn't track the unmounted state)
- * 
+ *
  * @param {ComponentInternalInstance} [instance] The component instance to track the mounted state for
  * @returns {Readonly<Ref<boolean>>} The mounted state of the component
- * 
+ *
  * @example
  * const isMounted = useMounted();
- * 
+ *
  * @example
  * const isMounted = useMounted(getCurrentInstance());
- * 
+ *
  * @since 0.0.1
  */
 export function useMounted(instance?: ComponentInternalInstance) {
   const isMounted = ref(false);
   const targetInstance = getLifeCycleTarger(instance);
 
-  onMounted(() => { isMounted.value = true; }, targetInstance);
+  onMounted(() => {
+    isMounted.value = true;
+  }, targetInstance);
 
   return readonly(isMounted);
 }
diff --git a/vue/toolkit/src/composables/math/index.ts b/vue/toolkit/src/composables/math/index.ts
new file mode 100644
index 0000000..28cf7d2
--- /dev/null
+++ b/vue/toolkit/src/composables/math/index.ts
@@ -0,0 +1,16 @@
+export * from './logicAnd';
+export * from './logicNot';
+export * from './logicOr';
+export * from './useAbs';
+export * from './useAverage';
+export * from './useCeil';
+export * from './useClamp';
+export * from './useFloor';
+export * from './useMath';
+export * from './useMax';
+export * from './useMin';
+export * from './usePrecision';
+export * from './useProjection';
+export * from './useRound';
+export * from './useSum';
+export * from './useTrunc';
diff --git a/vue/toolkit/src/composables/math/logicAnd/demo.vue b/vue/toolkit/src/composables/math/logicAnd/demo.vue
new file mode 100644
index 0000000..e446500
--- /dev/null
+++ b/vue/toolkit/src/composables/math/logicAnd/demo.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { logicAnd } from './index';
+
+// Realistic "ready to publish" checklist — each is a reactive boolean source.
+const hasTitle = ref(true);
+const acceptedTerms = ref(false);
+const draftSaved = ref(true);
+
+// A getter input, to show logicAnd accepts refs *and* getters.
+const wordCount = ref(180);
+const meetsLength = computed(() => wordCount.value >= 150);
+
+const conditions = [
+  { key: 'title', label: 'Title is filled in', model: hasTitle },
+  { key: 'terms', label: 'Accepted publishing terms', model: acceptedTerms },
+  { key: 'draft', label: 'Draft auto-saved', model: draftSaved },
+];
+
+// True only when every condition is truthy.
+const canPublish = logicAnd(hasTitle, acceptedTerms, draftSaved, meetsLength);
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <div class="flex flex-col gap-1">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">logicAnd</span>
+      <p class="text-sm text-(--fg-muted)">
+        Reactive logical <code class="font-mono text-(--fg)">AND</code> — the result is true only when every input
+        resolves truthy. Toggle the checklist below.
+      </p>
+    </div>
+
+    <div class="flex flex-col gap-2 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <label
+        v-for="cond in conditions"
+        :key="cond.key"
+        class="flex cursor-pointer items-center gap-3 rounded-lg px-1.5 py-1.5 transition hover:bg-(--bg-inset)"
+      >
+        <input
+          v-model="cond.model.value"
+          type="checkbox"
+          class="h-4 w-4 shrink-0 cursor-pointer accent-(--accent)"
+        >
+        <span class="text-sm text-(--fg)">{{ cond.label }}</span>
+        <span
+          class="ml-auto inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium tabular-nums"
+          :class="cond.model.value
+            ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+            : 'border-(--border) bg-(--bg-inset) text-(--fg-subtle)'"
+        >
+          {{ cond.model.value }}
+        </span>
+      </label>
+
+      <!-- A getter-driven input to prove logicAnd accepts getters too. -->
+      <div class="mt-1 flex flex-col gap-2 rounded-lg bg-(--bg-inset) p-3">
+        <div class="flex items-center justify-between">
+          <span class="text-sm text-(--fg)">Word count ≥ 150</span>
+          <span
+            class="inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium tabular-nums"
+            :class="meetsLength
+              ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+              : 'border-(--border) bg-(--bg-elevated) text-(--fg-subtle)'"
+          >
+            {{ meetsLength }}
+          </span>
+        </div>
+        <input
+          v-model.number="wordCount"
+          type="range"
+          min="0"
+          max="300"
+          step="10"
+          class="w-full cursor-pointer accent-(--accent)"
+        >
+        <span class="font-mono text-xs text-(--fg-subtle) tabular-nums">{{ wordCount }} words</span>
+      </div>
+    </div>
+
+    <div
+      class="flex items-center justify-between rounded-lg border p-4 transition"
+      :class="canPublish
+        ? 'border-emerald-500/30 bg-emerald-500/10'
+        : 'border-(--border) bg-(--bg-inset)'"
+    >
+      <div class="flex flex-col gap-0.5">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">canPublish</span>
+        <span
+          class="font-mono text-3xl font-bold tabular-nums"
+          :class="canPublish ? 'text-emerald-600 dark:text-emerald-400' : 'text-(--fg)'"
+        >
+          {{ canPublish }}
+        </span>
+      </div>
+      <button
+        type="button"
+        :disabled="!canPublish"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+      >
+        Publish
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/math/logicAnd/index.test.ts b/vue/toolkit/src/composables/math/logicAnd/index.test.ts
new file mode 100644
index 0000000..05eeb8d
--- /dev/null
+++ b/vue/toolkit/src/composables/math/logicAnd/index.test.ts
@@ -0,0 +1,87 @@
+import { computed, isReadonly, ref } from 'vue';
+import { describe, expect, it } from 'vitest';
+import { and, logicAnd } from '.';
+
+describe(logicAnd, () => {
+  it('returns true when every input is truthy', () => {
+    expect(logicAnd(true, true, true).value).toBeTruthy();
+    expect(logicAnd(ref(true), () => true, true).value).toBeTruthy();
+  });
+
+  it('returns false when any input is falsy', () => {
+    expect(logicAnd(true, false, true).value).toBeFalsy();
+    expect(logicAnd(ref(true), ref(false)).value).toBeFalsy();
+  });
+
+  it('returns true with no arguments (vacuous truth)', () => {
+    expect(logicAnd().value).toBeTruthy();
+  });
+
+  it('reacts to ref changes', () => {
+    const a = ref(true);
+    const b = ref(true);
+    const result = logicAnd(a, b);
+
+    expect(result.value).toBeTruthy();
+
+    b.value = false;
+    expect(result.value).toBeFalsy();
+
+    b.value = true;
+    a.value = false;
+    expect(result.value).toBeFalsy();
+  });
+
+  it('supports getters', () => {
+    const flag = ref(true);
+    const result = logicAnd(() => flag.value, () => true);
+
+    expect(result.value).toBeTruthy();
+
+    flag.value = false;
+    expect(result.value).toBeFalsy();
+  });
+
+  it('works with computed inputs', () => {
+    const count = ref(2);
+    const positive = computed(() => count.value > 0);
+    const even = computed(() => count.value % 2 === 0);
+    const result = logicAnd(positive, even);
+
+    expect(result.value).toBeTruthy();
+
+    count.value = 3;
+    expect(result.value).toBeFalsy();
+
+    count.value = -4;
+    expect(result.value).toBeFalsy();
+  });
+
+  it('coerces non-boolean truthy and falsy values to a strict boolean result', () => {
+    const truthy = logicAnd(1, 'a', {});
+    const falsy = logicAnd(1, 0);
+
+    // The composable normalises to a real boolean rather than passing the
+    // raw value through, so assert on the exact value and its type.
+    expect(truthy.value).toBeTruthy();
+    expect(typeof truthy.value).toBe('boolean');
+    expect(falsy.value).toBeFalsy();
+    expect(typeof falsy.value).toBe('boolean');
+
+    expect(logicAnd('text', '').value).toBeFalsy();
+    expect(logicAnd(1, null).value).toBeFalsy();
+    expect(logicAnd(1, undefined).value).toBeFalsy();
+  });
+
+  it('returns a readonly computed', () => {
+    const result = logicAnd(ref(true));
+
+    expect(isReadonly(result)).toBeTruthy();
+  });
+
+  it('exposes `and` as an alias of `logicAnd`', () => {
+    expect(and).toBe(logicAnd);
+    expect(and(ref(true), () => true).value).toBeTruthy();
+    expect(and(ref(true), ref(false)).value).toBeFalsy();
+  });
+});
diff --git a/vue/toolkit/src/composables/math/logicAnd/index.ts b/vue/toolkit/src/composables/math/logicAnd/index.ts
new file mode 100644
index 0000000..77cc822
--- /dev/null
+++ b/vue/toolkit/src/composables/math/logicAnd/index.ts
@@ -0,0 +1,37 @@
+import { computed, toValue } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+
+export type LogicAndReturn = ComputedRef<boolean>;
+
+/**
+ * @name logicAnd
+ * @category Math
+ * @description Reactive logical `AND` across boolean refs or getters. The result is `true` only when every input resolves to a truthy value.
+ *
+ * @param {...MaybeRefOrGetter<unknown>} args The boolean refs or getters to combine
+ * @returns {LogicAndReturn} A readonly computed that is `true` only when every input is truthy
+ *
+ * @example
+ * const a = ref(true);
+ * const b = ref(false);
+ * const all = logicAnd(a, b);
+ * // all.value === false
+ *
+ * @example
+ * const isReady = ref(true);
+ * const hasAccess = computed(() => true);
+ * const canProceed = logicAnd(isReady, hasAccess, () => true);
+ * // canProceed.value === true
+ *
+ * @since 0.0.15
+ */
+export function logicAnd(...args: Array<MaybeRefOrGetter<unknown>>): LogicAndReturn {
+  return computed(() => args.every(arg => Boolean(toValue(arg))));
+}
+
+/**
+ * Alias for {@link logicAnd}.
+ *
+ * @since 0.0.15
+ */
+export const and: typeof logicAnd = logicAnd;
diff --git a/vue/toolkit/src/composables/math/logicNot/demo.vue b/vue/toolkit/src/composables/math/logicNot/demo.vue
new file mode 100644
index 0000000..6f8222a
--- /dev/null
+++ b/vue/toolkit/src/composables/math/logicNot/demo.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { logicNot } from './index';
+
+const isLoading = ref(false);
+const isReady = logicNot(isLoading);
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex flex-col">
+        <span class="text-sm font-medium text-(--fg)">Loading</span>
+        <span class="text-xs text-(--fg-subtle)">source value</span>
+      </div>
+      <button
+        type="button"
+        role="switch"
+        :aria-checked="isLoading"
+        class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border border-(--border) transition focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        :class="isLoading ? 'bg-(--accent)' : 'bg-(--bg-inset)'"
+        @click="isLoading = !isLoading"
+      >
+        <span
+          class="inline-block size-4 transform rounded-full bg-white shadow transition"
+          :class="isLoading ? 'translate-x-6' : 'translate-x-1'"
+        />
+      </button>
+    </div>
+
+    <div class="grid grid-cols-2 gap-3">
+      <div class="flex flex-col items-center gap-1 rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">isLoading</span>
+        <span
+          class="font-mono text-lg font-bold tabular-nums"
+          :class="isLoading ? 'text-emerald-600 dark:text-emerald-400' : 'text-(--fg-muted)'"
+        >{{ isLoading }}</span>
+      </div>
+      <div class="flex flex-col items-center gap-1 rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">isReady = !isLoading</span>
+        <span
+          class="font-mono text-lg font-bold tabular-nums"
+          :class="isReady ? 'text-emerald-600 dark:text-emerald-400' : 'text-(--fg-muted)'"
+        >{{ isReady }}</span>
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center text-sm text-(--fg-muted)">
+      <span v-if="isReady" class="text-emerald-600 dark:text-emerald-400">Ready to continue</span>
+      <span v-else>Please wait, loading…</span>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/math/logicNot/index.test.ts b/vue/toolkit/src/composables/math/logicNot/index.test.ts
new file mode 100644
index 0000000..6dc31ad
--- /dev/null
+++ b/vue/toolkit/src/composables/math/logicNot/index.test.ts
@@ -0,0 +1,76 @@
+import { computed, isReadonly, ref } from 'vue';
+import { describe, expect, it } from 'vitest';
+import { logicNot, not } from '.';
+
+describe(logicNot, () => {
+  it('returns the negation of a truthy input', () => {
+    expect(logicNot(true).value).toBeFalsy();
+    expect(logicNot(ref(true)).value).toBeFalsy();
+    expect(logicNot(() => true).value).toBeFalsy();
+  });
+
+  it('returns the negation of a falsy input', () => {
+    expect(logicNot(false).value).toBeTruthy();
+    expect(logicNot(ref(false)).value).toBeTruthy();
+    expect(logicNot(() => false).value).toBeTruthy();
+  });
+
+  it('reacts to ref changes', () => {
+    const a = ref(true);
+    const result = logicNot(a);
+
+    expect(result.value).toBeFalsy();
+
+    a.value = false;
+    expect(result.value).toBeTruthy();
+
+    a.value = true;
+    expect(result.value).toBeFalsy();
+  });
+
+  it('supports getters', () => {
+    const flag = ref(false);
+    const result = logicNot(() => flag.value);
+
+    expect(result.value).toBeTruthy();
+
+    flag.value = true;
+    expect(result.value).toBeFalsy();
+  });
+
+  it('works with computed inputs', () => {
+    const count = ref(0);
+    const positive = computed(() => count.value > 0);
+    const result = logicNot(positive);
+
+    expect(result.value).toBeTruthy();
+
+    count.value = 5;
+    expect(result.value).toBeFalsy();
+
+    count.value = -1;
+    expect(result.value).toBeTruthy();
+  });
+
+  it('coerces non-boolean values to a boolean result', () => {
+    expect(logicNot(1).value).toBeFalsy();
+    expect(logicNot('text').value).toBeFalsy();
+    expect(logicNot({}).value).toBeFalsy();
+    expect(logicNot(0).value).toBeTruthy();
+    expect(logicNot('').value).toBeTruthy();
+    expect(logicNot(null).value).toBeTruthy();
+    expect(logicNot(undefined).value).toBeTruthy();
+  });
+
+  it('returns a readonly computed', () => {
+    const result = logicNot(ref(true));
+
+    expect(isReadonly(result)).toBeTruthy();
+  });
+
+  it('exposes `not` as an alias of `logicNot`', () => {
+    expect(not).toBe(logicNot);
+    expect(not(ref(true)).value).toBeFalsy();
+    expect(not(() => false).value).toBeTruthy();
+  });
+});
diff --git a/vue/toolkit/src/composables/math/logicNot/index.ts b/vue/toolkit/src/composables/math/logicNot/index.ts
new file mode 100644
index 0000000..8f3faab
--- /dev/null
+++ b/vue/toolkit/src/composables/math/logicNot/index.ts
@@ -0,0 +1,35 @@
+import { computed, toValue } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+
+export type LogicNotReturn = ComputedRef<boolean>;
+
+/**
+ * @name logicNot
+ * @category Math
+ * @description Reactive logical `NOT` of a boolean ref or getter. The result is `true` whenever the input resolves to a falsy value.
+ *
+ * @param {MaybeRefOrGetter<unknown>} v The boolean ref or getter to negate
+ * @returns {LogicNotReturn} A readonly computed that is `true` only when the input is falsy
+ *
+ * @example
+ * const a = ref(true);
+ * const notA = logicNot(a);
+ * // notA.value === false
+ *
+ * @example
+ * const isLoading = ref(false);
+ * const isReady = logicNot(isLoading);
+ * // isReady.value === true
+ *
+ * @since 0.0.15
+ */
+export function logicNot(v: MaybeRefOrGetter<unknown>): LogicNotReturn {
+  return computed(() => !toValue(v));
+}
+
+/**
+ * Alias for {@link logicNot}.
+ *
+ * @since 0.0.15
+ */
+export const not: typeof logicNot = logicNot;
diff --git a/vue/toolkit/src/composables/math/logicOr/demo.vue b/vue/toolkit/src/composables/math/logicOr/demo.vue
new file mode 100644
index 0000000..0804144
--- /dev/null
+++ b/vue/toolkit/src/composables/math/logicOr/demo.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { logicOr } from './index';
+
+const email = ref(true);
+const sms = ref(false);
+const push = ref(false);
+
+const hasChannel = logicOr(email, sms, push);
+
+const channels = [
+  { key: 'email', label: 'Email', model: email },
+  { key: 'sms', label: 'SMS', model: sms },
+  { key: 'push', label: 'Push', model: push },
+] as const;
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Notification channels</span>
+
+    <div class="flex flex-col gap-2">
+      <label
+        v-for="ch in channels"
+        :key="ch.key"
+        class="flex cursor-pointer items-center justify-between rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2.5 transition hover:border-(--border-strong)"
+      >
+        <span class="text-sm font-medium text-(--fg)">{{ ch.label }}</span>
+        <input
+          v-model="ch.model.value"
+          type="checkbox"
+          class="size-4 cursor-pointer accent-(--accent)"
+        >
+      </label>
+    </div>
+
+    <div
+      class="flex items-center justify-between rounded-xl border p-4 transition"
+      :class="hasChannel
+        ? 'border-emerald-500/30 bg-emerald-500/10'
+        : 'border-amber-500/30 bg-amber-500/10'"
+    >
+      <div class="flex flex-col">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">logicOr(email, sms, push)</span>
+        <span
+          class="text-sm font-medium"
+          :class="hasChannel
+            ? 'text-emerald-600 dark:text-emerald-400'
+            : 'text-amber-600 dark:text-amber-400'"
+        >{{ hasChannel ? 'At least one channel is on' : 'Pick a channel to get notified' }}</span>
+      </div>
+      <span class="font-mono text-2xl font-bold tabular-nums text-(--fg)">{{ hasChannel }}</span>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/math/logicOr/index.test.ts b/vue/toolkit/src/composables/math/logicOr/index.test.ts
new file mode 100644
index 0000000..b3a0291
--- /dev/null
+++ b/vue/toolkit/src/composables/math/logicOr/index.test.ts
@@ -0,0 +1,98 @@
+import { computed, ref } from 'vue';
+import { describe, expect, it } from 'vitest';
+import { logicOr, or } from '.';
+
+describe(logicOr, () => {
+  it('returns false with no arguments', () => {
+    const result = logicOr();
+
+    expect(result.value).toBeFalsy();
+  });
+
+  it('returns true when a single raw value is truthy', () => {
+    expect(logicOr(true).value).toBeTruthy();
+    expect(logicOr(1).value).toBeTruthy();
+  });
+
+  it('returns false when a single raw value is falsy', () => {
+    expect(logicOr(false).value).toBeFalsy();
+    expect(logicOr(0).value).toBeFalsy();
+  });
+
+  it('returns true when at least one ref is truthy', () => {
+    const a = ref(false);
+    const b = ref(true);
+    const result = logicOr(a, b);
+
+    expect(result.value).toBeTruthy();
+  });
+
+  it('returns false when all refs are falsy', () => {
+    const a = ref(false);
+    const b = ref(false);
+    const result = logicOr(a, b);
+
+    expect(result.value).toBeFalsy();
+  });
+
+  it('supports getter arguments', () => {
+    const result = logicOr(() => false, () => true);
+
+    expect(result.value).toBeTruthy();
+  });
+
+  it('mixes refs, getters and raw values', () => {
+    const a = ref(false);
+    const result = logicOr(a, () => false, 1);
+
+    expect(result.value).toBeTruthy();
+  });
+
+  it('reacts to ref changes', () => {
+    const a = ref(false);
+    const b = ref(false);
+    const result = logicOr(a, b);
+
+    expect(result.value).toBeFalsy();
+
+    a.value = true;
+
+    expect(result.value).toBeTruthy();
+  });
+
+  it('coerces truthy and falsy non-boolean values', () => {
+    expect(logicOr(ref('hello')).value).toBeTruthy();
+    expect(logicOr(ref('')).value).toBeFalsy();
+    expect(logicOr(ref(null)).value).toBeFalsy();
+    expect(logicOr(ref(undefined)).value).toBeFalsy();
+  });
+
+  it('handles computed sources', () => {
+    const count = ref(0);
+    const positive = computed(() => count.value > 0);
+    const result = logicOr(positive);
+
+    expect(result.value).toBeFalsy();
+
+    count.value = 5;
+
+    expect(result.value).toBeTruthy();
+  });
+
+  it('exposes `or` as an alias of `logicOr`', () => {
+    expect(or).toBe(logicOr);
+
+    const a = ref(false);
+    const b = ref(true);
+
+    expect(or(a, b).value).toBeTruthy();
+  });
+
+  it('is SSR-safe and touches no globals', () => {
+    // Pure reactive computation: constructing and reading must never reference
+    // window/document/navigator, so this works identically in any environment.
+    const result = logicOr(ref(false), () => false);
+
+    expect(result.value).toBeFalsy();
+  });
+});
diff --git a/vue/toolkit/src/composables/math/logicOr/index.ts b/vue/toolkit/src/composables/math/logicOr/index.ts
new file mode 100644
index 0000000..e092cc3
--- /dev/null
+++ b/vue/toolkit/src/composables/math/logicOr/index.ts
@@ -0,0 +1,54 @@
+import { computed, toValue } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+
+export type LogicOrSource = MaybeRefOrGetter<unknown>;
+
+/**
+ * @name logicOr
+ * @category Math
+ * @description Reactively compute the logical `OR` across a list of boolean
+ * sources (each a ref, getter, or raw value). Returns a `ComputedRef<boolean>`
+ * that is `true` when at least one source is truthy. Short-circuits on the first
+ * truthy source, so later refs are only read when needed. With no arguments the
+ * result is `false` (the identity for `OR`). Fully SSR-safe — touches no globals.
+ *
+ * @param {...MaybeRefOrGetter<unknown>} args The boolean sources to combine
+ * @returns {ComputedRef<boolean>} A computed ref that is `true` when any source is truthy
+ *
+ * @example
+ * const a = ref(false);
+ * const b = ref(true);
+ * const either = logicOr(a, b); // true
+ *
+ * @example
+ * const valid = ref(false);
+ * const result = logicOr(valid, () => Date.now() > 0); // true
+ *
+ * @since 0.0.15
+ */
+export function logicOr(...args: LogicOrSource[]): ComputedRef<boolean> {
+  return computed<boolean>(() => {
+    // Manual loop short-circuits on the first truthy source without allocating
+    // a closure per evaluation the way Array.prototype.some would.
+    for (const arg of args)
+      if (toValue(arg)) return true;
+
+    return false;
+  });
+}
+
+/**
+ * @name or
+ * @category Math
+ * @description Alias for {@link logicOr}. Reactively computes the logical `OR`
+ * across boolean refs, getters, or raw values.
+ *
+ * @param {...MaybeRefOrGetter<unknown>} args The boolean sources to combine
+ * @returns {ComputedRef<boolean>} A computed ref that is `true` when any source is truthy
+ *
+ * @example
+ * const result = or(a, b);
+ *
+ * @since 0.0.15
+ */
+export const or: typeof logicOr = logicOr;
diff --git a/vue/toolkit/src/composables/math/useAbs/demo.vue b/vue/toolkit/src/composables/math/useAbs/demo.vue
new file mode 100644
index 0000000..7697e17
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useAbs/demo.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useAbs } from './index';
+
+const value = ref(-42);
+const abs = useAbs(value);
+
+// Map the current value (-100..100) to a 0..100% offset for the marker.
+const markerLeft = computed(() => `${(value.value + 100) / 2}%`);
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-5">
+    <div class="flex items-end justify-between">
+      <div class="flex flex-col">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">value</span>
+        <span class="font-mono text-2xl font-bold tabular-nums text-(--fg-muted)">{{ value }}</span>
+      </div>
+      <div class="flex flex-col items-end">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">|value|</span>
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ abs }}</span>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <input
+        v-model.number="value"
+        type="range"
+        min="-100"
+        max="100"
+        step="1"
+        class="w-full cursor-pointer accent-(--accent)"
+      >
+      <div class="relative h-2 rounded-full bg-(--bg-inset)">
+        <div class="absolute inset-y-0 left-1/2 w-px bg-(--border-strong)" />
+        <div
+          class="absolute -top-1 size-4 -translate-x-1/2 rounded-full border-2 border-(--bg) bg-(--accent) transition-[left] duration-75"
+          :style="{ left: markerLeft }"
+        />
+      </div>
+      <div class="flex justify-between font-mono text-xs text-(--fg-subtle) tabular-nums">
+        <span>-100</span>
+        <span>0</span>
+        <span>100</span>
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center font-mono text-sm text-(--fg) tabular-nums">
+      Math.abs({{ value }}) = {{ abs }}
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/math/useAbs/index.test.ts b/vue/toolkit/src/composables/math/useAbs/index.test.ts
new file mode 100644
index 0000000..1b4c8e3
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useAbs/index.test.ts
@@ -0,0 +1,64 @@
+import { computed, isReadonly, ref } from 'vue';
+import { describe, expect, it } from 'vitest';
+import { useAbs } from '.';
+
+describe(useAbs, () => {
+  it('returns the absolute value of a static number', () => {
+    expect(useAbs(-42).value).toBe(42);
+    expect(useAbs(42).value).toBe(42);
+    expect(useAbs(0).value).toBe(0);
+  });
+
+  it('returns the absolute value of a ref', () => {
+    const value = ref(-10);
+    const abs = useAbs(value);
+
+    expect(abs.value).toBe(10);
+  });
+
+  it('reacts to ref changes', () => {
+    const value = ref(-10);
+    const abs = useAbs(value);
+
+    expect(abs.value).toBe(10);
+
+    value.value = 5;
+    expect(abs.value).toBe(5);
+
+    value.value = -3;
+    expect(abs.value).toBe(3);
+  });
+
+  it('supports getters', () => {
+    const value = ref(-7);
+    const abs = useAbs(() => value.value);
+
+    expect(abs.value).toBe(7);
+
+    value.value = -100;
+    expect(abs.value).toBe(100);
+  });
+
+  it('handles negative zero, infinity and NaN like Math.abs', () => {
+    expect(useAbs(-0).value).toBe(0);
+    expect(useAbs(Number.NEGATIVE_INFINITY).value).toBe(Number.POSITIVE_INFINITY);
+    expect(useAbs(Number.NaN).value).toBeNaN();
+  });
+
+  it('returns a readonly computed', () => {
+    const abs = useAbs(ref(-1));
+
+    expect(isReadonly(abs)).toBeTruthy();
+  });
+
+  it('works with computed inputs', () => {
+    const value = ref(-4);
+    const doubled = computed(() => value.value * 2);
+    const abs = useAbs(doubled);
+
+    expect(abs.value).toBe(8);
+
+    value.value = 3;
+    expect(abs.value).toBe(6);
+  });
+});
diff --git a/vue/toolkit/src/composables/math/useAbs/index.ts b/vue/toolkit/src/composables/math/useAbs/index.ts
new file mode 100644
index 0000000..c0ea5c7
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useAbs/index.ts
@@ -0,0 +1,27 @@
+import { computed, toValue } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+
+export type UseAbsReturn = ComputedRef<number>;
+
+/**
+ * @name useAbs
+ * @category Math
+ * @description Reactive `Math.abs` of a number ref or getter
+ *
+ * @param {MaybeRefOrGetter<number>} value The value to take the absolute value of
+ * @returns {UseAbsReturn} A readonly computed of `Math.abs(value)`
+ *
+ * @example
+ * const value = ref(-42);
+ * const abs = useAbs(value);
+ * // abs.value === 42
+ *
+ * @example
+ * const abs = useAbs(() => -10);
+ * // abs.value === 10
+ *
+ * @since 0.0.15
+ */
+export function useAbs(value: MaybeRefOrGetter<number>): UseAbsReturn {
+  return computed(() => Math.abs(toValue(value)));
+}
diff --git a/vue/toolkit/src/composables/math/useAverage/demo.vue b/vue/toolkit/src/composables/math/useAverage/demo.vue
new file mode 100644
index 0000000..55be5af
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useAverage/demo.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useAverage } from './index';
+
+const scores = ref([88, 92, 76, 95]);
+const average = useAverage(scores);
+
+const display = computed(() =>
+  scores.value.length === 0 ? 'NaN' : average.value.toFixed(2),
+);
+
+function addScore() {
+  scores.value.push(Math.floor(Math.random() * 41) + 60);
+}
+
+function removeScore(index: number) {
+  scores.value.splice(index, 1);
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between gap-4 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex flex-col">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Average score</span>
+        <span class="text-xs text-(--fg-subtle)">{{ scores.length }} value{{ scores.length === 1 ? '' : 's' }}</span>
+      </div>
+      <span
+        class="font-mono text-3xl font-bold tabular-nums"
+        :class="scores.length === 0 ? 'text-amber-600 dark:text-amber-400' : 'text-(--fg)'"
+      >{{ display }}</span>
+    </div>
+
+    <div v-if="scores.length" class="flex flex-col gap-2">
+      <div
+        v-for="(score, i) in scores"
+        :key="i"
+        class="flex items-center gap-3 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2"
+      >
+        <span class="w-6 shrink-0 font-mono text-xs text-(--fg-subtle) tabular-nums">#{{ i + 1 }}</span>
+        <input
+          v-model.number="scores[i]"
+          type="number"
+          min="0"
+          max="100"
+          class="w-full rounded-md border border-(--border) bg-(--bg) px-2 py-1 text-sm text-(--fg) tabular-nums transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+        <button
+          type="button"
+          aria-label="Remove value"
+          class="shrink-0 rounded-md border border-(--border) bg-(--bg-elevated) px-2 py-1 text-sm text-(--fg-muted) transition hover:border-(--border-strong) hover:text-(--fg) active:scale-[0.98] cursor-pointer"
+          @click="removeScore(i)"
+        >
+          ✕
+        </button>
+      </div>
+    </div>
+
+    <div v-else class="rounded-lg border border-amber-500/30 bg-amber-500/10 p-3 text-center text-sm text-amber-600 dark:text-amber-400">
+      No values — mean is NaN (0 / 0)
+    </div>
+
+    <button
+      type="button"
+      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+      @click="addScore"
+    >
+      + Add random score
+    </button>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/math/useAverage/index.test.ts b/vue/toolkit/src/composables/math/useAverage/index.test.ts
new file mode 100644
index 0000000..55e0351
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useAverage/index.test.ts
@@ -0,0 +1,116 @@
+import { computed, readonly, ref } from 'vue';
+import { describe, expect, it } from 'vitest';
+import { useAverage } from '.';
+
+describe(useAverage, () => {
+  it('returns the average of raw variadic values', () => {
+    const avg = useAverage(1, 3, 2);
+
+    expect(avg.value).toBe(2);
+  });
+
+  it('returns the average of ref variadic values', () => {
+    const a = ref(2);
+    const b = ref(4);
+    const c = ref(6);
+    const avg = useAverage(a, b, c);
+
+    expect(avg.value).toBe(4);
+  });
+
+  it('supports getter arguments', () => {
+    const avg = useAverage(() => 4, () => 8, () => 0);
+
+    expect(avg.value).toBe(4);
+  });
+
+  it('mixes refs, getters and raw values', () => {
+    const a = ref(5);
+    const avg = useAverage(a, () => 7, 3);
+
+    expect(avg.value).toBe(5);
+  });
+
+  it('reacts to ref changes', () => {
+    const a = ref(2);
+    const b = ref(4);
+    const avg = useAverage(a, b);
+
+    expect(avg.value).toBe(3);
+
+    a.value = 10;
+
+    expect(avg.value).toBe(7);
+  });
+
+  it('returns the average of a reactive array', () => {
+    const list = ref([1, 5, 3]);
+    const avg = useAverage(list);
+
+    expect(avg.value).toBe(3);
+
+    list.value = [2, 4, 6];
+
+    expect(avg.value).toBe(4);
+  });
+
+  it('returns the average of a getter array', () => {
+    const avg = useAverage(() => [1, 2, 3, 4]);
+
+    expect(avg.value).toBe(2.5);
+  });
+
+  it('unwraps refs and getters nested inside the array', () => {
+    const a = ref(2);
+    const avg = useAverage(ref([a, () => 4, 6]));
+
+    expect(avg.value).toBe(4);
+
+    a.value = 8;
+
+    expect(avg.value).toBe(6);
+  });
+
+  it('reacts when a mutated plain array ref is reassigned', () => {
+    const list = ref([1, 2, 3]);
+    const avg = useAverage(list);
+
+    expect(avg.value).toBe(2);
+
+    list.value = [...list.value, 6];
+
+    expect(avg.value).toBe(3);
+  });
+
+  it('handles readonly and computed sources', () => {
+    const computedValue = computed(() => 12);
+    const readonlyValue = readonly(ref(6));
+    const avg = useAverage(computedValue, readonlyValue, 3);
+
+    expect(avg.value).toBe(7);
+  });
+
+  it('handles negative values', () => {
+    const avg = useAverage(-4, -2, -6);
+
+    expect(avg.value).toBe(-4);
+  });
+
+  it('returns NaN for an empty array (SSR-safe, no globals touched)', () => {
+    const avg = useAverage(ref<number[]>([]));
+
+    expect(avg.value).toBeNaN();
+  });
+
+  it('returns the single value when only one argument is given', () => {
+    const avg = useAverage(42);
+
+    expect(avg.value).toBe(42);
+  });
+
+  it('returns the mean of a single-element array', () => {
+    const avg = useAverage(ref([9]));
+
+    expect(avg.value).toBe(9);
+  });
+});
diff --git a/vue/toolkit/src/composables/math/useAverage/index.ts b/vue/toolkit/src/composables/math/useAverage/index.ts
new file mode 100644
index 0000000..e78e844
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useAverage/index.ts
@@ -0,0 +1,55 @@
+import { isArray, sum } from '@robonen/stdlib';
+import { computed, toValue } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+import type { MaybeComputedRefArgs } from '@/types';
+
+/**
+ * @name useAverage
+ * @category Math
+ * @description Reactively compute the average (arithmetic mean) of the provided
+ * numbers. Accepts either a variadic list of numbers (each a ref, getter, or raw
+ * value) or a single reactive array whose items may themselves be refs/getters.
+ * Returns `NaN` when there are no values, mirroring `0 / 0`.
+ *
+ * @param {...MaybeRefOrGetter<number>} args The values to average, or a single reactive array of values
+ * @returns {ComputedRef<number>} A computed ref of the mean (`NaN` when empty)
+ *
+ * @example
+ * const a = ref(1);
+ * const b = ref(3);
+ * const avg = useAverage(a, b, 2); // 2
+ *
+ * @example
+ * const list = ref([1, 5, 3]);
+ * const avg = useAverage(list); // 3
+ *
+ * @example
+ * const list = ref([ref(2), () => 4, 6]);
+ * const avg = useAverage(list); // 4
+ *
+ * @since 0.0.15
+ */
+export function useAverage(array: MaybeRefOrGetter<Array<MaybeRefOrGetter<number>>>): ComputedRef<number>;
+export function useAverage(...args: Array<MaybeRefOrGetter<number>>): ComputedRef<number>;
+export function useAverage(...args: MaybeComputedRefArgs<number>): ComputedRef<number> {
+  return computed<number>(() => {
+    // Collect into a single flat numeric array so we can reuse stdlib `sum`
+    // and divide by the real count in one pass — no intermediate flatMap.
+    const values: number[] = [];
+
+    for (const arg of args) {
+      const value = toValue(arg);
+
+      if (isArray(value)) {
+        for (const inner of value)
+          values.push(toValue(inner));
+      }
+      else {
+        values.push(value);
+      }
+    }
+
+    // Empty -> NaN (0 / 0), matching the mathematical definition of a mean.
+    return sum(values) / values.length;
+  });
+}
diff --git a/vue/toolkit/src/composables/math/useCeil/demo.vue b/vue/toolkit/src/composables/math/useCeil/demo.vue
new file mode 100644
index 0000000..9424a22
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useCeil/demo.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useCeil } from './index';
+
+const value = ref(7.25);
+const ceiled = useCeil(value);
+
+// Fractional part drives a little fill bar so rounding "up" feels visual.
+const fraction = computed(() => {
+  const f = value.value - Math.floor(value.value);
+  return Math.min(Math.max(f, 0), 1);
+});
+
+function step(delta: number) {
+  value.value = Math.round((value.value + delta) * 100) / 100;
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex flex-col gap-1.5">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">value</span>
+      <div class="flex items-center gap-2">
+        <button
+          type="button"
+          aria-label="Decrement"
+          class="inline-flex size-9 shrink-0 items-center justify-center rounded-lg border border-(--border) bg-(--bg-elevated) text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="step(-0.25)"
+        >−</button>
+        <input
+          v-model.number="value"
+          type="number"
+          step="0.25"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-center font-mono text-sm text-(--fg) tabular-nums transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+        <button
+          type="button"
+          aria-label="Increment"
+          class="inline-flex size-9 shrink-0 items-center justify-center rounded-lg border border-(--border) bg-(--bg-elevated) text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="step(0.25)"
+        >+</button>
+      </div>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="mb-2 flex items-baseline justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Math.ceil</span>
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ ceiled }}</span>
+      </div>
+      <div class="relative h-2 overflow-hidden rounded-full bg-(--bg-inset)">
+        <div
+          class="h-full rounded-full bg-(--accent) transition-[width] duration-150"
+          :style="{ width: `${fraction * 100}%` }"
+        />
+      </div>
+      <div class="mt-1.5 flex justify-between font-mono text-xs text-(--fg-subtle) tabular-nums">
+        <span>{{ Math.floor(value) }}</span>
+        <span class="text-(--accent-text)">{{ ceiled }}</span>
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center font-mono text-sm text-(--fg) tabular-nums">
+      Math.ceil({{ value }}) = {{ ceiled }}
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/math/useCeil/index.test.ts b/vue/toolkit/src/composables/math/useCeil/index.test.ts
new file mode 100644
index 0000000..73de748
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useCeil/index.test.ts
@@ -0,0 +1,56 @@
+import { computed, ref } from 'vue';
+import { describe, expect, it } from 'vitest';
+import { useCeil } from '.';
+
+describe(useCeil, () => {
+  it('rounds up a non-reactive value', () => {
+    const ceiled = useCeil(0.95);
+
+    expect(ceiled.value).toBe(1);
+  });
+
+  it('rounds up a ref value', () => {
+    const value = ref(7.004);
+    const ceiled = useCeil(value);
+
+    expect(ceiled.value).toBe(8);
+  });
+
+  it('rounds up a getter value', () => {
+    const ceiled = useCeil(() => 4.0001);
+
+    expect(ceiled.value).toBe(5);
+  });
+
+  it('rounds up a computed value', () => {
+    const value = computed(() => -0.5);
+    const ceiled = useCeil(value);
+
+    expect(ceiled.value).toBe(-0);
+  });
+
+  it('reacts to changes in the source ref', () => {
+    const value = ref(1.2);
+    const ceiled = useCeil(value);
+
+    expect(ceiled.value).toBe(2);
+
+    value.value = 9.9;
+    expect(ceiled.value).toBe(10);
+
+    value.value = -3.7;
+    expect(ceiled.value).toBe(-3);
+  });
+
+  it('passes integers through unchanged', () => {
+    expect(useCeil(5).value).toBe(5);
+    expect(useCeil(-5).value).toBe(-5);
+    expect(useCeil(0).value).toBe(0);
+  });
+
+  it('propagates non-finite inputs', () => {
+    expect(useCeil(Infinity).value).toBe(Infinity);
+    expect(useCeil(-Infinity).value).toBe(-Infinity);
+    expect(useCeil(Number.NaN).value).toBeNaN();
+  });
+});
diff --git a/vue/toolkit/src/composables/math/useCeil/index.ts b/vue/toolkit/src/composables/math/useCeil/index.ts
new file mode 100644
index 0000000..322f510
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useCeil/index.ts
@@ -0,0 +1,25 @@
+import { computed, toValue } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+
+export type UseCeilReturn = ComputedRef<number>;
+
+/**
+ * @name useCeil
+ * @category Math
+ * @description Reactive `Math.ceil`. Rounds a number up to the next largest integer.
+ *
+ * @param {MaybeRefOrGetter<number>} value The value to round up
+ * @returns {UseCeilReturn} A readonly computed ref of the rounded-up value
+ *
+ * @example
+ * const value = ref(0.95);
+ * const ceiled = useCeil(value); // 1
+ *
+ * @example
+ * const ceiled = useCeil(() => 7.004); // 8
+ *
+ * @since 0.0.15
+ */
+export function useCeil(value: MaybeRefOrGetter<number>): UseCeilReturn {
+  return computed<number>(() => Math.ceil(toValue(value)));
+}
diff --git a/vue/toolkit/src/composables/math/useClamp/demo.vue b/vue/toolkit/src/composables/math/useClamp/demo.vue
new file mode 100644
index 0000000..91313b3
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useClamp/demo.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useClamp } from './index';
+
+const min = ref(20);
+const max = ref(80);
+const raw = ref(50);
+
+// useClamp returns a WritableComputedRef when given a ref: writing through it
+// clamps the underlying value back into [min, max].
+const clamped = useClamp(raw, min, max);
+
+const presets = [-30, 0, 50, 100, 130];
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <div class="flex items-end justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Clamped</span>
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ clamped }}</span>
+      </div>
+
+      <div class="flex flex-col gap-1.5">
+        <div class="flex items-center justify-between text-xs text-(--fg-muted)">
+          <span>{{ min }}</span>
+          <span>range</span>
+          <span>{{ max }}</span>
+        </div>
+        <div class="relative h-2 rounded-full bg-(--bg-inset)">
+          <div
+            class="absolute top-0 h-2 rounded-full bg-(--accent-subtle)"
+            :style="{ left: `${min}%`, width: `${Math.max(0, max - min)}%` }"
+          />
+          <div
+            class="absolute -top-1 size-4 -translate-x-1/2 rounded-full border-2 border-(--bg-elevated) bg-(--accent) shadow transition-[left]"
+            :style="{ left: `${clamped}%` }"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <label class="flex flex-col gap-1.5">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Input value</span>
+        <input
+          v-model.number="raw"
+          type="range"
+          min="-50"
+          max="150"
+          class="w-full accent-(--accent)"
+        >
+        <span class="font-mono text-sm tabular-nums text-(--fg-muted)">raw = {{ raw }}</span>
+      </label>
+
+      <div class="grid grid-cols-2 gap-3">
+        <label class="flex flex-col gap-1">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Min</span>
+          <input
+            v-model.number="min"
+            type="number"
+            class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          >
+        </label>
+        <label class="flex flex-col gap-1">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Max</span>
+          <input
+            v-model.number="max"
+            type="number"
+            class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          >
+        </label>
+      </div>
+
+      <div class="flex flex-wrap gap-2">
+        <button
+          v-for="p in presets"
+          :key="p"
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="clamped = p"
+        >
+          set {{ p }}
+        </button>
+      </div>
+      <p class="text-xs text-(--fg-subtle)">
+        The buttons write straight through the clamped ref &mdash; values outside the range snap to the nearest bound.
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/web/vue/src/composables/math/useClamp/index.test.ts b/vue/toolkit/src/composables/math/useClamp/index.test.ts
similarity index 93%
rename from web/vue/src/composables/math/useClamp/index.test.ts
rename to vue/toolkit/src/composables/math/useClamp/index.test.ts
index ec3bf6f..b334438 100644
--- a/web/vue/src/composables/math/useClamp/index.test.ts
+++ b/vue/toolkit/src/composables/math/useClamp/index.test.ts
@@ -1,5 +1,5 @@
-import { ref, readonly, computed } from 'vue';
-import { describe, it, expect } from 'vitest';
+import { computed, readonly, ref } from 'vue';
+import { describe, expect, it } from 'vitest';
 import { useClamp } from '.';
 
 describe(useClamp, () => {
@@ -57,4 +57,4 @@ describe(useClamp, () => {
 
     expect(clampedValue.value).toBe(11);
   });
-});
\ No newline at end of file
+});
diff --git a/web/vue/src/composables/math/useClamp/index.ts b/vue/toolkit/src/composables/math/useClamp/index.ts
similarity index 98%
rename from web/vue/src/composables/math/useClamp/index.ts
rename to vue/toolkit/src/composables/math/useClamp/index.ts
index 91577e1..b054885 100644
--- a/web/vue/src/composables/math/useClamp/index.ts
+++ b/vue/toolkit/src/composables/math/useClamp/index.ts
@@ -6,20 +6,20 @@ import type { ComputedRef, MaybeRef, MaybeRefOrGetter, WritableComputedRef } fro
  * @name useClamp
  * @category Math
  * @description Clamps a value between a minimum and maximum value
- * 
+ *
  * @param {MaybeRefOrGetter<number>} value The value to clamp
  * @param {MaybeRefOrGetter<number>} min The minimum value
  * @param {MaybeRefOrGetter<number>} max The maximum value
  * @returns {ComputedRef<number>} The clamped value
- * 
+ *
  * @example
  * const value = ref(10);
  * const clampedValue = useClamp(value, 0, 5);
- * 
+ *
  * @example
  * const value = ref(10);
  * const clampedValue = useClamp(value, () => 0, () => 5);
- * 
+ *
  * @since 0.0.1
  */
 export function useClamp(value: MaybeRef<number>, min: MaybeRefOrGetter<number>, max: MaybeRefOrGetter<number>): WritableComputedRef<number>;
diff --git a/vue/toolkit/src/composables/math/useFloor/demo.vue b/vue/toolkit/src/composables/math/useFloor/demo.vue
new file mode 100644
index 0000000..2d4cac1
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useFloor/demo.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useFloor } from './index';
+
+const value = ref(5.95);
+
+// Reactive Math.floor: recomputes whenever `value` changes.
+const floored = useFloor(value);
+
+function nudge(delta: number) {
+  value.value = Math.round((value.value + delta) * 100) / 100;
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col items-center gap-3">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Math.floor</span>
+      <div class="flex items-baseline gap-3 font-mono tabular-nums">
+        <span class="text-2xl text-(--fg-muted)">{{ value.toFixed(2) }}</span>
+        <span class="text-(--fg-subtle)">&rarr;</span>
+        <span class="text-4xl font-bold text-(--fg)">{{ floored }}</span>
+      </div>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <label class="flex flex-col gap-1.5">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Value</span>
+        <input
+          v-model.number="value"
+          type="range"
+          min="-10"
+          max="10"
+          step="0.01"
+          class="w-full accent-(--accent)"
+        >
+      </label>
+
+      <div class="flex flex-wrap items-center gap-2">
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="nudge(-0.1)"
+        >
+          &minus;0.1
+        </button>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="nudge(0.1)"
+        >
+          +0.1
+        </button>
+        <input
+          v-model.number="value"
+          type="number"
+          step="0.01"
+          class="ml-auto w-28 rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+      </div>
+
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+        useFloor({{ value }}) === {{ floored }}
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/math/useFloor/index.test.ts b/vue/toolkit/src/composables/math/useFloor/index.test.ts
new file mode 100644
index 0000000..ed69045
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useFloor/index.test.ts
@@ -0,0 +1,63 @@
+import { computed, ref } from 'vue';
+import { describe, expect, it } from 'vitest';
+import { useFloor } from '.';
+
+describe(useFloor, () => {
+  it('floors a non-reactive value', () => {
+    const floored = useFloor(5.95);
+
+    expect(floored.value).toBe(5);
+  });
+
+  it('floors a reactive ref value', () => {
+    const value = ref(5.05);
+    const floored = useFloor(value);
+
+    expect(floored.value).toBe(5);
+  });
+
+  it('floors a getter value', () => {
+    const floored = useFloor(() => 5.5);
+
+    expect(floored.value).toBe(5);
+  });
+
+  it('updates when the source ref changes', () => {
+    const value = ref(5.95);
+    const floored = useFloor(value);
+
+    expect(floored.value).toBe(5);
+
+    value.value = 8.1;
+
+    expect(floored.value).toBe(8);
+  });
+
+  it('floors negative values toward negative infinity', () => {
+    expect(useFloor(-5.05).value).toBe(-6);
+    expect(useFloor(-0.5).value).toBe(-1);
+  });
+
+  it('returns integers unchanged', () => {
+    expect(useFloor(42).value).toBe(42);
+    expect(useFloor(0).value).toBe(0);
+  });
+
+  it('works with a computed source', () => {
+    const value = ref(2);
+    const source = computed(() => value.value + 0.9);
+    const floored = useFloor(source);
+
+    expect(floored.value).toBe(2);
+
+    value.value = 5;
+
+    expect(floored.value).toBe(5);
+  });
+
+  it('propagates special numeric values', () => {
+    expect(useFloor(Number.NaN).value).toBeNaN();
+    expect(useFloor(Infinity).value).toBe(Infinity);
+    expect(useFloor(-Infinity).value).toBe(-Infinity);
+  });
+});
diff --git a/vue/toolkit/src/composables/math/useFloor/index.ts b/vue/toolkit/src/composables/math/useFloor/index.ts
new file mode 100644
index 0000000..3ea2717
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useFloor/index.ts
@@ -0,0 +1,23 @@
+import { computed, toValue } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+
+/**
+ * @name useFloor
+ * @category Math
+ * @description Reactive `Math.floor`. Returns the largest integer less than or equal to the given value
+ *
+ * @param {MaybeRefOrGetter<number>} value The value to floor
+ * @returns {ComputedRef<number>} The floored value
+ *
+ * @example
+ * const value = ref(5.95);
+ * const floored = useFloor(value); // 5
+ *
+ * @example
+ * const floored = useFloor(() => 5.05); // 5
+ *
+ * @since 0.0.15
+ */
+export function useFloor(value: MaybeRefOrGetter<number>): ComputedRef<number> {
+  return computed<number>(() => Math.floor(toValue(value)));
+}
diff --git a/vue/toolkit/src/composables/math/useMath/demo.vue b/vue/toolkit/src/composables/math/useMath/demo.vue
new file mode 100644
index 0000000..927e89c
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useMath/demo.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useMath } from './index';
+
+const a = ref(3);
+const b = ref(4);
+
+// Reactive wrappers over Math methods. Each recomputes when a or b change.
+const hypot = useMath('hypot', a, b);
+const max = useMath('max', a, b);
+const min = useMath('min', a, b);
+const pow = useMath('pow', a, b);
+
+// A single-argument method driven by a getter.
+const sqrtOfA = useMath('sqrt', () => a.value);
+
+const results = computed(() => [
+  { label: 'hypot(a, b)', expr: '√(a² + b²)', value: hypot.value },
+  { label: 'pow(a, b)', expr: 'aᵇ', value: pow.value },
+  { label: 'max(a, b)', expr: 'larger', value: max.value },
+  { label: 'min(a, b)', expr: 'smaller', value: min.value },
+  { label: 'sqrt(a)', expr: '√a', value: sqrtOfA.value },
+]);
+
+function fmt(n: number) {
+  return Number.isInteger(n) ? `${n}` : n.toFixed(3);
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 grid grid-cols-2 gap-3">
+      <label class="flex flex-col gap-1.5">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">a = {{ a }}</span>
+        <input
+          v-model.number="a"
+          type="range"
+          min="0"
+          max="12"
+          step="1"
+          class="w-full accent-(--accent)"
+        >
+      </label>
+      <label class="flex flex-col gap-1.5">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">b = {{ b }}</span>
+        <input
+          v-model.number="b"
+          type="range"
+          min="0"
+          max="12"
+          step="1"
+          class="w-full accent-(--accent)"
+        >
+      </label>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) divide-y divide-(--border)">
+      <div
+        v-for="r in results"
+        :key="r.label"
+        class="flex items-center justify-between gap-3 px-4 py-2.5"
+      >
+        <div class="flex flex-col">
+          <span class="font-mono text-sm text-(--fg)">{{ r.label }}</span>
+          <span class="text-xs text-(--fg-subtle)">{{ r.expr }}</span>
+        </div>
+        <span class="font-mono text-lg font-semibold tabular-nums text-(--fg)">{{ fmt(r.value) }}</span>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Every value above is a single <code class="font-mono">useMath('&lt;key&gt;', ...)</code> computed &mdash; any callable
+      <code class="font-mono">Math</code> method works, with refs, getters or plain values as arguments.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/math/useMath/index.test.ts b/vue/toolkit/src/composables/math/useMath/index.test.ts
new file mode 100644
index 0000000..34227e2
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useMath/index.test.ts
@@ -0,0 +1,113 @@
+import { computed, effectScope, ref } from 'vue';
+import { describe, expect, it, vi } from 'vitest';
+import { useMath } from '.';
+
+describe(useMath, () => {
+  it('computes a unary method from plain values', () => {
+    const result = useMath('abs', -5);
+
+    expect(result.value).toBe(5);
+  });
+
+  it('computes a binary method from refs', () => {
+    const a = ref(2);
+    const b = ref(8);
+    const result = useMath('max', a, b);
+
+    expect(result.value).toBe(8);
+  });
+
+  it('accepts getters as arguments', () => {
+    const value = ref(-4.7);
+    const result = useMath('round', () => value.value);
+
+    expect(result.value).toBe(-5);
+  });
+
+  it('mixes plain values, refs and getters', () => {
+    const a = ref(3);
+    const result = useMath('max', a, 4, () => 1);
+
+    expect(result.value).toBe(4);
+  });
+
+  it('handles variadic methods such as hypot', () => {
+    const x = ref(3);
+    const y = ref(4);
+    const result = useMath('hypot', x, y);
+
+    expect(result.value).toBe(5);
+  });
+
+  it('recomputes when a ref argument changes', () => {
+    const a = ref(2);
+    const b = ref(8);
+    const result = useMath('max', a, b);
+
+    expect(result.value).toBe(8);
+
+    a.value = 20;
+
+    expect(result.value).toBe(20);
+
+    b.value = 100;
+
+    expect(result.value).toBe(100);
+  });
+
+  it('recomputes when a getter dependency changes', () => {
+    const value = ref(1.4);
+    const result = useMath('round', () => value.value);
+
+    expect(result.value).toBe(1);
+
+    value.value = 1.6;
+
+    expect(result.value).toBe(2);
+  });
+
+  it('works with readonly computed inputs', () => {
+    const value = computed(() => 2);
+    const result = useMath('pow', value, 3);
+
+    expect(result.value).toBe(8);
+  });
+
+  it('returns a lazily evaluated computed ref', () => {
+    const spy = vi.spyOn(Math, 'sqrt');
+    const value = ref(16);
+    const result = useMath('sqrt', value);
+
+    // computed is lazy: not evaluated until first read
+    expect(spy).not.toHaveBeenCalled();
+
+    expect(result.value).toBe(4);
+    expect(spy).toHaveBeenCalledTimes(1);
+
+    // repeated reads without dependency change are cached
+    void result.value;
+    expect(spy).toHaveBeenCalledTimes(1);
+
+    spy.mockRestore();
+  });
+
+  it('is SSR-safe (no global access; works inside a detached scope)', () => {
+    const scope = effectScope();
+    let result: ReturnType<typeof useMath<'min'>> | undefined;
+
+    scope.run(() => {
+      result = useMath('min', () => 10, () => 3, () => 7);
+    });
+
+    expect(result?.value).toBe(3);
+
+    scope.stop();
+  });
+
+  it('produces NaN for invalid input without throwing', () => {
+    const value = ref(-1);
+    const result = useMath('sqrt', value);
+
+    expect(Number.isNaN(result.value)).toBeTruthy();
+  });
+});
diff --git a/vue/toolkit/src/composables/math/useMath/index.ts b/vue/toolkit/src/composables/math/useMath/index.ts
new file mode 100644
index 0000000..4b0a790
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useMath/index.ts
@@ -0,0 +1,62 @@
+import { computed, toValue } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+
+/**
+ * Keys of `Math` that resolve to callable methods (excludes numeric constants
+ * such as `Math.PI` or `Math.E`).
+ */
+export type UseMathKey
+  = keyof { [K in keyof Math as Math[K] extends (...args: any[]) => any ? K : never]: unknown };
+
+/**
+ * Maps each argument of a `Math` method to a reactive equivalent
+ * (`MaybeRefOrGetter`), so callers may pass plain values, refs or getters.
+ */
+export type UseMathArgs<K extends UseMathKey>
+  = Math[K] extends (...args: infer A) => any
+    ? { [I in keyof A]: MaybeRefOrGetter<A[I]> }
+    : never;
+
+/**
+ * Reactive result of the wrapped `Math` method.
+ */
+export type UseMathReturn<K extends UseMathKey>
+  = Math[K] extends (...args: any[]) => infer R ? ComputedRef<R> : never;
+
+/**
+ * @name useMath
+ * @category Math
+ * @description Reactive wrapper over any callable `Math.<key>` method. Each
+ * argument may be a plain value, a ref or a getter; the result recomputes
+ * lazily whenever a reactive input changes.
+ *
+ * @param {UseMathKey} key The name of the `Math` method to wrap (e.g. `'max'`, `'round'`, `'hypot'`).
+ * @param {...UseMathArgs} args The reactive arguments forwarded to the method.
+ * @returns {UseMathReturn} A computed ref holding the method's result.
+ *
+ * @example
+ * const a = ref(2);
+ * const b = ref(8);
+ * const max = useMath('max', a, b); // ComputedRef<number> -> 8
+ *
+ * @example
+ * // getters and plain values mix freely
+ * const value = ref(-4.7);
+ * const rounded = useMath('round', value);   // 5 -> -5
+ * const absVal = useMath('abs', () => value.value); // 4.7
+ *
+ * @example
+ * // variadic methods
+ * const sides = ref([3, 4]);
+ * const dist = useMath('hypot', () => sides.value[0], () => sides.value[1]); // 5
+ *
+ * @since 0.0.15
+ */
+export function useMath<K extends UseMathKey>(
+  key: K,
+  ...args: UseMathArgs<K>
+): UseMathReturn<K> {
+  return computed(
+    () => (Math[key] as (...a: any[]) => any)(...args.map(arg => toValue(arg))),
+  ) as UseMathReturn<K>;
+}
diff --git a/vue/toolkit/src/composables/math/useMax/demo.vue b/vue/toolkit/src/composables/math/useMax/demo.vue
new file mode 100644
index 0000000..a500cb4
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useMax/demo.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useMax } from './index';
+
+// A single reactive array — useMax resolves each item (which may itself be a
+// ref/getter) and tracks changes to the array.
+const samples = ref([42, 17, 88, 23, 64]);
+
+const max = useMax(samples);
+
+const maxIndex = computed(() => samples.value.indexOf(max.value));
+
+function randomize() {
+  const len = 3 + Math.floor(Math.random() * 4);
+  samples.value = Array.from({ length: len }, () => Math.floor(Math.random() * 100));
+}
+
+function add() {
+  samples.value.push(Math.floor(Math.random() * 100));
+}
+
+function removeAt(i: number) {
+  samples.value.splice(i, 1);
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col items-center gap-1">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Maximum</span>
+      <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">
+        {{ Number.isFinite(max) ? max : '−∞' }}
+      </span>
+      <span v-if="!samples.length" class="text-xs text-(--fg-subtle)">empty list → −Infinity</span>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Values</span>
+        <div class="flex gap-2">
+          <button
+            type="button"
+            class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+            @click="add"
+          >
+            + add
+          </button>
+          <button
+            type="button"
+            class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+            @click="randomize"
+          >
+            shuffle
+          </button>
+        </div>
+      </div>
+
+      <div v-if="samples.length" class="flex flex-col gap-2">
+        <div
+          v-for="(n, i) in samples"
+          :key="i"
+          class="flex items-center gap-2"
+        >
+          <div class="relative h-7 flex-1 overflow-hidden rounded-md bg-(--bg-inset)">
+            <div
+              class="h-full rounded-md transition-all"
+              :class="i === maxIndex ? 'bg-(--accent)' : 'bg-(--accent-subtle)'"
+              :style="{ width: `${Math.max(4, n)}%` }"
+            />
+            <span class="absolute inset-y-0 left-2 flex items-center font-mono text-xs font-medium tabular-nums text-(--fg)">
+              {{ n }}
+            </span>
+          </div>
+          <button
+            type="button"
+            class="inline-flex size-7 items-center justify-center rounded-md border border-(--border) bg-(--bg-elevated) text-(--fg-muted) transition hover:bg-(--bg-inset) hover:text-(--fg) active:scale-[0.98] cursor-pointer"
+            aria-label="Remove value"
+            @click="removeAt(i)"
+          >
+            &times;
+          </button>
+        </div>
+      </div>
+      <p v-else class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center text-sm text-(--fg-subtle)">
+        No values &mdash; add some to compute a maximum.
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/math/useMax/index.test.ts b/vue/toolkit/src/composables/math/useMax/index.test.ts
new file mode 100644
index 0000000..c6903bc
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useMax/index.test.ts
@@ -0,0 +1,113 @@
+import { computed, readonly, ref } from 'vue';
+import { describe, expect, it } from 'vitest';
+import { useMax } from '.';
+
+describe(useMax, () => {
+  it('returns the maximum of raw variadic values', () => {
+    const max = useMax(1, 3, 2);
+
+    expect(max.value).toBe(3);
+  });
+
+  it('returns the maximum of ref variadic values', () => {
+    const a = ref(1);
+    const b = ref(3);
+    const c = ref(2);
+    const max = useMax(a, b, c);
+
+    expect(max.value).toBe(3);
+  });
+
+  it('supports getter arguments', () => {
+    const max = useMax(() => 4, () => 9, () => 1);
+
+    expect(max.value).toBe(9);
+  });
+
+  it('mixes refs, getters and raw values', () => {
+    const a = ref(5);
+    const max = useMax(a, () => 8, 2);
+
+    expect(max.value).toBe(8);
+  });
+
+  it('reacts to ref changes', () => {
+    const a = ref(1);
+    const b = ref(3);
+    const max = useMax(a, b);
+
+    expect(max.value).toBe(3);
+
+    a.value = 10;
+
+    expect(max.value).toBe(10);
+  });
+
+  it('returns the maximum of a reactive array', () => {
+    const list = ref([1, 5, 2]);
+    const max = useMax(list);
+
+    expect(max.value).toBe(5);
+
+    list.value = [7, 3, 4];
+
+    expect(max.value).toBe(7);
+  });
+
+  it('returns the maximum of a getter array', () => {
+    const max = useMax(() => [1, 9, 4]);
+
+    expect(max.value).toBe(9);
+  });
+
+  it('unwraps refs and getters nested inside the array', () => {
+    const list = ref<Array<number | (() => number)>>([ref(1) as unknown as number, () => 5, 2]);
+    // The array items are refs/getters; useMax should unwrap them.
+    const a = ref(1);
+    const max = useMax(ref([a, () => 5, 2]));
+
+    expect(max.value).toBe(5);
+
+    a.value = 99;
+
+    expect(max.value).toBe(99);
+    void list;
+  });
+
+  it('reacts when a mutated plain array ref is reassigned', () => {
+    const list = ref([1, 2, 3]);
+    const max = useMax(list);
+
+    expect(max.value).toBe(3);
+
+    list.value = [...list.value, 100];
+
+    expect(max.value).toBe(100);
+  });
+
+  it('handles readonly and computed sources', () => {
+    const computedValue = computed(() => 12);
+    const readonlyValue = readonly(ref(7));
+    const max = useMax(computedValue, readonlyValue, 3);
+
+    expect(max.value).toBe(12);
+  });
+
+  it('handles negative values', () => {
+    const max = useMax(-5, -1, -10);
+
+    expect(max.value).toBe(-1);
+  });
+
+  it('returns -Infinity for an empty array (SSR-safe, no globals touched)', () => {
+    const max = useMax(ref<number[]>([]));
+
+    expect(max.value).toBe(Number.NEGATIVE_INFINITY);
+  });
+
+  it('returns a single value when only one argument is given', () => {
+    const max = useMax(42);
+
+    expect(max.value).toBe(42);
+  });
+});
diff --git a/vue/toolkit/src/composables/math/useMax/index.ts b/vue/toolkit/src/composables/math/useMax/index.ts
new file mode 100644
index 0000000..2449583
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useMax/index.ts
@@ -0,0 +1,55 @@
+import { isArray } from '@robonen/stdlib';
+import { computed, toValue } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+import type { MaybeComputedRefArgs } from '@/types';
+
+/**
+ * @name useMax
+ * @category Math
+ * @description Reactively compute the maximum of the provided numbers. Accepts
+ * either a variadic list of numbers (each a ref, getter, or raw value) or a
+ * single reactive array whose items may themselves be refs/getters.
+ *
+ * @param {...MaybeRefOrGetter<number>} args The values to compare, or a single reactive array of values
+ * @returns {ComputedRef<number>} A computed ref of the largest value (`-Infinity` when empty)
+ *
+ * @example
+ * const a = ref(1);
+ * const b = ref(3);
+ * const max = useMax(a, b, 2); // 3
+ *
+ * @example
+ * const list = ref([1, 5, 2]);
+ * const max = useMax(list); // 5
+ *
+ * @example
+ * const list = ref([ref(1), () => 5, 2]);
+ * const max = useMax(list); // 5
+ *
+ * @since 0.0.15
+ */
+export function useMax(array: MaybeRefOrGetter<Array<MaybeRefOrGetter<number>>>): ComputedRef<number>;
+export function useMax(...args: Array<MaybeRefOrGetter<number>>): ComputedRef<number>;
+export function useMax(...args: MaybeComputedRefArgs<number>): ComputedRef<number> {
+  return computed<number>(() => {
+    // Avoid Math.max(...array): large spreads can overflow the call stack, and
+    // a single pass skips the intermediate flattened array that flatMap builds.
+    let max = Number.NEGATIVE_INFINITY;
+
+    for (const arg of args) {
+      const value = toValue(arg);
+
+      if (isArray(value)) {
+        for (const item of value) {
+          const inner = toValue(item);
+          if (inner > max) max = inner;
+        }
+      }
+      else if (value > max) {
+        max = value;
+      }
+    }
+
+    return max;
+  });
+}
diff --git a/vue/toolkit/src/composables/math/useMin/demo.vue b/vue/toolkit/src/composables/math/useMin/demo.vue
new file mode 100644
index 0000000..a4616c3
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useMin/demo.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useMin } from './index';
+
+// A single reactive array — useMin resolves each item (refs/getters allowed)
+// and recomputes whenever the array changes.
+const samples = ref([42, 17, 88, 23, 64]);
+
+const min = useMin(samples);
+
+const minIndex = computed(() => samples.value.indexOf(min.value));
+
+function randomize() {
+  const len = 3 + Math.floor(Math.random() * 4);
+  samples.value = Array.from({ length: len }, () => Math.floor(Math.random() * 100));
+}
+
+function add() {
+  samples.value.push(Math.floor(Math.random() * 100));
+}
+
+function removeAt(i: number) {
+  samples.value.splice(i, 1);
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col items-center gap-1">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Minimum</span>
+      <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">
+        {{ Number.isFinite(min) ? min : '∞' }}
+      </span>
+      <span v-if="!samples.length" class="text-xs text-(--fg-subtle)">empty list → Infinity</span>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Values</span>
+        <div class="flex gap-2">
+          <button
+            type="button"
+            class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+            @click="add"
+          >
+            + add
+          </button>
+          <button
+            type="button"
+            class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+            @click="randomize"
+          >
+            shuffle
+          </button>
+        </div>
+      </div>
+
+      <div v-if="samples.length" class="flex flex-col gap-2">
+        <div
+          v-for="(n, i) in samples"
+          :key="i"
+          class="flex items-center gap-2"
+        >
+          <div class="relative h-7 flex-1 overflow-hidden rounded-md bg-(--bg-inset)">
+            <div
+              class="h-full rounded-md transition-all"
+              :class="i === minIndex ? 'bg-emerald-500' : 'bg-(--accent-subtle)'"
+              :style="{ width: `${Math.max(4, n)}%` }"
+            />
+            <span class="absolute inset-y-0 left-2 flex items-center font-mono text-xs font-medium tabular-nums text-(--fg)">
+              {{ n }}
+            </span>
+          </div>
+          <button
+            type="button"
+            class="inline-flex size-7 items-center justify-center rounded-md border border-(--border) bg-(--bg-elevated) text-(--fg-muted) transition hover:bg-(--bg-inset) hover:text-(--fg) active:scale-[0.98] cursor-pointer"
+            aria-label="Remove value"
+            @click="removeAt(i)"
+          >
+            &times;
+          </button>
+        </div>
+      </div>
+      <p v-else class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center text-sm text-(--fg-subtle)">
+        No values &mdash; add some to compute a minimum.
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/math/useMin/index.test.ts b/vue/toolkit/src/composables/math/useMin/index.test.ts
new file mode 100644
index 0000000..2b622ad
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useMin/index.test.ts
@@ -0,0 +1,89 @@
+import { computed, ref } from 'vue';
+import { describe, expect, it } from 'vitest';
+import { useMin } from '.';
+
+describe(useMin, () => {
+  it('returns the smallest of plain variadic values', () => {
+    const min = useMin(3, 1, 2);
+
+    expect(min.value).toBe(1);
+  });
+
+  it('returns the smallest of refs/getters/values', () => {
+    const a = ref(2);
+    const b = ref(5);
+    const min = useMin(a, b, 10, () => -1);
+
+    expect(min.value).toBe(-1);
+  });
+
+  it('reacts when a ref argument changes', () => {
+    const a = ref(2);
+    const b = ref(5);
+    const min = useMin(a, b);
+
+    expect(min.value).toBe(2);
+
+    a.value = 8;
+
+    expect(min.value).toBe(5);
+  });
+
+  it('accepts a single plain array', () => {
+    const min = useMin([4, 2, 9]);
+
+    expect(min.value).toBe(2);
+  });
+
+  it('accepts a reactive array whose items may be refs/getters', () => {
+    const item = ref(5);
+    const list = ref([10, item, () => 7]);
+    const min = useMin(list);
+
+    expect(min.value).toBe(5);
+
+    item.value = 1;
+
+    expect(min.value).toBe(1);
+  });
+
+  it('reacts when the reactive array reference changes', () => {
+    const list = ref([4, 6]);
+    const min = useMin(list);
+
+    expect(min.value).toBe(4);
+
+    list.value = [9, 3, 8];
+
+    expect(min.value).toBe(3);
+  });
+
+  it('works with a getter that returns an array', () => {
+    const a = ref(8);
+    const min = useMin(() => [a.value, 3]);
+
+    expect(min.value).toBe(3);
+
+    a.value = 1;
+
+    expect(min.value).toBe(1);
+  });
+
+  it('supports computed inputs', () => {
+    const base = ref(10);
+    const derived = computed(() => base.value * 2);
+    const min = useMin(derived, 15);
+
+    expect(min.value).toBe(15);
+
+    base.value = 4;
+
+    expect(min.value).toBe(8);
+  });
+
+  it('returns Infinity for an empty array (matching Math.min)', () => {
+    const min = useMin([]);
+
+    expect(min.value).toBe(Number.POSITIVE_INFINITY);
+  });
+});
diff --git a/vue/toolkit/src/composables/math/useMin/index.ts b/vue/toolkit/src/composables/math/useMin/index.ts
new file mode 100644
index 0000000..7c05ff7
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useMin/index.ts
@@ -0,0 +1,52 @@
+import { isArray } from '@robonen/stdlib';
+import { computed, toValue } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+
+export type MaybeRefOrGetterArgs<T>
+  = Array<MaybeRefOrGetter<T>> | [MaybeRefOrGetter<Array<MaybeRefOrGetter<T>>>];
+
+/**
+ * Resolve a variadic args tuple (numbers, refs/getters, or a single reactive
+ * array of refs/getters) into a flat array of resolved values.
+ */
+function resolveArgs(args: MaybeRefOrGetterArgs<number>): number[] {
+  // Fast path: single reactive-array argument (the common useMin(arrayRef) case).
+  if (args.length === 1) {
+    const value = toValue(args[0] as MaybeRefOrGetter<number | Array<MaybeRefOrGetter<number>>>);
+
+    if (isArray(value))
+      return value.map(item => toValue(item));
+
+    return [value];
+  }
+
+  // Variadic path: each argument is a single number/ref/getter.
+  return (args as Array<MaybeRefOrGetter<number>>).map(arg => toValue(arg));
+}
+
+/**
+ * @name useMin
+ * @category Math
+ * @description Reactive `Math.min`. Accepts a variadic list of numbers (each a
+ * ref, getter, or plain value) or a single reactive array whose items may
+ * themselves be refs/getters.
+ *
+ * @param {...MaybeRefOrGetter<number>} args A list of numeric refs/getters/values, or a single reactive array of them
+ * @returns {ComputedRef<number>} A computed of the smallest resolved value (`Infinity` when empty, matching `Math.min`)
+ *
+ * @example
+ * const a = ref(2);
+ * const b = ref(5);
+ * const min = useMin(a, b, 10); // 2
+ *
+ * @example
+ * const list = ref([2, ref(5), () => 10]);
+ * const min = useMin(list); // 2
+ *
+ * @since 0.0.15
+ */
+export function useMin(array: MaybeRefOrGetter<Array<MaybeRefOrGetter<number>>>): ComputedRef<number>;
+export function useMin(...args: Array<MaybeRefOrGetter<number>>): ComputedRef<number>;
+export function useMin(...args: MaybeRefOrGetterArgs<number>): ComputedRef<number> {
+  return computed<number>(() => Math.min(...resolveArgs(args)));
+}
diff --git a/vue/toolkit/src/composables/math/usePrecision/demo.vue b/vue/toolkit/src/composables/math/usePrecision/demo.vue
new file mode 100644
index 0000000..f5b4868
--- /dev/null
+++ b/vue/toolkit/src/composables/math/usePrecision/demo.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { usePrecision } from './index';
+import type { UsePrecisionMath } from './index';
+
+const value = ref(3.14159);
+const digits = ref(2);
+const math = ref<UsePrecisionMath>('round');
+
+const result = usePrecision(value, digits, computed(() => ({ math: math.value })));
+
+const methods: ReadonlyArray<{ key: UsePrecisionMath; label: string }> = [
+  { key: 'round', label: 'round' },
+  { key: 'floor', label: 'floor' },
+  { key: 'ceil', label: 'ceil' },
+];
+
+const samples = [3.14159, 0.1 + 0.2, 1234.5678, 9.999, 2.71828];
+
+function pick(n: number) {
+  value.value = n;
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex items-baseline justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">precision result</span>
+        <span class="font-mono text-xs text-(--fg-subtle)">{{ digits }} digit{{ digits === 1 ? '' : 's' }}</span>
+      </div>
+      <div class="mt-1 font-mono text-3xl font-bold tabular-nums text-(--fg)">
+        {{ result }}
+      </div>
+      <div class="mt-1 font-mono text-xs text-(--fg-subtle)">
+        from {{ value }}
+      </div>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <label class="flex items-center justify-between text-sm font-medium text-(--fg)">
+        <span>Value</span>
+        <span class="font-mono text-(--fg-muted)">{{ value }}</span>
+      </label>
+      <input
+        v-model.number="value"
+        type="range"
+        min="0"
+        max="10"
+        step="0.00001"
+        class="mt-2 w-full accent-(--accent)"
+      >
+
+      <label class="mt-4 flex items-center justify-between text-sm font-medium text-(--fg)">
+        <span>Digits</span>
+        <span class="font-mono text-(--fg-muted)">{{ digits }}</span>
+      </label>
+      <input
+        v-model.number="digits"
+        type="range"
+        min="0"
+        max="5"
+        step="1"
+        class="mt-2 w-full accent-(--accent)"
+      >
+    </div>
+
+    <div>
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Rounding method</span>
+      <div class="mt-2 grid grid-cols-3 gap-2">
+        <button
+          v-for="m in methods"
+          :key="m.key"
+          type="button"
+          class="inline-flex items-center justify-center rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+          :class="math === m.key
+            ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
+            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+          @click="math = m.key"
+        >
+          {{ m.label }}
+        </button>
+      </div>
+    </div>
+
+    <div>
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Samples</span>
+      <div class="mt-2 flex flex-wrap gap-2">
+        <button
+          v-for="(s, i) in samples"
+          :key="i"
+          type="button"
+          class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted) transition hover:border-(--border-strong) hover:text-(--fg) cursor-pointer"
+          @click="pick(s)"
+        >
+          {{ s }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/math/usePrecision/index.test.ts b/vue/toolkit/src/composables/math/usePrecision/index.test.ts
new file mode 100644
index 0000000..ad1d382
--- /dev/null
+++ b/vue/toolkit/src/composables/math/usePrecision/index.test.ts
@@ -0,0 +1,103 @@
+import { ref } from 'vue';
+import { describe, expect, it } from 'vitest';
+import { usePrecision } from '.';
+
+describe(usePrecision, () => {
+  it('rounds to the requested number of digits by default', () => {
+    const result = usePrecision(3.14159, 2);
+
+    expect(result.value).toBe(3.14);
+  });
+
+  it('works with plain (non-reactive) inputs', () => {
+    expect(usePrecision(1.2345, 0).value).toBe(1);
+    expect(usePrecision(1.5, 0).value).toBe(2);
+  });
+
+  it('reacts when the source value changes', () => {
+    const value = ref(3.14159);
+    const result = usePrecision(value, 2);
+
+    expect(result.value).toBe(3.14);
+
+    value.value = 9.87654;
+
+    expect(result.value).toBe(9.88);
+  });
+
+  it('reacts when the digits change', () => {
+    const value = ref(3.14159);
+    const digits = ref(2);
+    const result = usePrecision(value, digits);
+
+    expect(result.value).toBe(3.14);
+
+    digits.value = 4;
+
+    expect(result.value).toBe(3.1416);
+
+    digits.value = 0;
+
+    expect(result.value).toBe(3);
+  });
+
+  it('supports getter inputs', () => {
+    const result = usePrecision(() => 3.14159, () => 3);
+
+    expect(result.value).toBe(3.142);
+  });
+
+  it('applies the floor math option', () => {
+    const result = usePrecision(3.14159, 2, { math: 'floor' });
+
+    expect(result.value).toBe(3.14);
+    expect(usePrecision(3.149, 2, { math: 'floor' }).value).toBe(3.14);
+  });
+
+  it('applies the ceil math option', () => {
+    const result = usePrecision(3.14159, 2, { math: 'ceil' });
+
+    expect(result.value).toBe(3.15);
+    expect(usePrecision(3.141, 2, { math: 'ceil' }).value).toBe(3.15);
+  });
+
+  it('reacts when the options change', () => {
+    const options = ref<{ math: 'floor' | 'ceil' | 'round' }>({ math: 'floor' });
+    const result = usePrecision(3.149, 2, options);
+
+    expect(result.value).toBe(3.14);
+
+    options.value = { math: 'ceil' };
+
+    expect(result.value).toBe(3.15);
+  });
+
+  it('supports getter options', () => {
+    const result = usePrecision(3.149, 2, () => ({ math: 'ceil' }));
+
+    expect(result.value).toBe(3.15);
+  });
+
+  it('handles negative numbers', () => {
+    expect(usePrecision(-3.14159, 2).value).toBe(-3.14);
+    expect(usePrecision(-3.149, 2, { math: 'floor' }).value).toBe(-3.15);
+    expect(usePrecision(-3.141, 2, { math: 'ceil' }).value).toBe(-3.14);
+  });
+
+  it('corrects binary floating-point drift', () => {
+    // 0.69 * 10 in raw float math is 6.8999999999999995 (would floor to 6.8 without correction)
+    expect(usePrecision(0.69, 1).value).toBe(0.7);
+    expect(usePrecision(0.615, 2).value).toBe(0.62);
+    expect(usePrecision(1.255, 2).value).toBe(1.26);
+  });
+
+  it('handles negative digits (rounding to tens, hundreds, ...)', () => {
+    expect(usePrecision(1234, -2).value).toBe(1200);
+    expect(usePrecision(1280, -2, { math: 'ceil' }).value).toBe(1300);
+  });
+
+  it('leaves integers untouched', () => {
+    expect(usePrecision(42, 2).value).toBe(42);
+    expect(usePrecision(42, 0).value).toBe(42);
+  });
+});
diff --git a/vue/toolkit/src/composables/math/usePrecision/index.ts b/vue/toolkit/src/composables/math/usePrecision/index.ts
new file mode 100644
index 0000000..001e235
--- /dev/null
+++ b/vue/toolkit/src/composables/math/usePrecision/index.ts
@@ -0,0 +1,78 @@
+import { computed, toValue } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+
+export type UsePrecisionMath
+  = 'floor' | 'ceil' | 'round';
+
+export interface UsePrecisionOptions {
+  /**
+   * The `Math` method used to reduce the number to the requested precision.
+   *
+   * @default 'round'
+   */
+  math?: UsePrecisionMath;
+}
+
+export type UsePrecisionReturn
+  = ComputedRef<number>;
+
+/**
+ * Multiply a value by a power of ten while compensating for binary
+ * floating-point drift (e.g. `0.1 * 100` -> `10` instead of `10.000000000000002`).
+ *
+ * @param {number} value The value to scale
+ * @param {number} power The multiplier (a power of ten)
+ * @returns {number} The drift-corrected product
+ */
+function accurateMultiply(value: number, power: number): number {
+  const valueStr = value.toString();
+  const dotIndex = valueStr.indexOf('.');
+
+  if (dotIndex === -1)
+    return value * power;
+
+  const decimalPlaces = valueStr.length - dotIndex - 1;
+  const multiplier = 10 ** decimalPlaces;
+
+  return (value * multiplier * power) / multiplier;
+}
+
+/**
+ * @name usePrecision
+ * @category Math
+ * @description Reactively set the decimal precision of a number.
+ *
+ * @param {MaybeRefOrGetter<number>} value The source number
+ * @param {MaybeRefOrGetter<number>} digits The number of decimal places to keep
+ * @param {MaybeRefOrGetter<UsePrecisionOptions>} [options] Precision options
+ * @param {UsePrecisionMath} [options.math='round'] The `Math` rounding method to apply
+ * @returns {UsePrecisionReturn} A computed ref holding the value at the requested precision
+ *
+ * @example
+ * const value = ref(3.14159);
+ * const result = usePrecision(value, 2); // 3.14
+ *
+ * @example
+ * const value = ref(3.14159);
+ * const result = usePrecision(value, 2, { math: 'ceil' }); // 3.15
+ *
+ * @example
+ * const value = ref(3.14159);
+ * const digits = ref(2);
+ * const result = usePrecision(value, digits); // reacts to value and digits
+ *
+ * @since 0.0.15
+ */
+export function usePrecision(
+  value: MaybeRefOrGetter<number>,
+  digits: MaybeRefOrGetter<number>,
+  options?: MaybeRefOrGetter<UsePrecisionOptions>,
+): UsePrecisionReturn {
+  return computed<number>(() => {
+    const _value = toValue(value);
+    const power = 10 ** toValue(digits);
+    const math = toValue(options)?.math ?? 'round';
+
+    return Math[math](accurateMultiply(_value, power)) / power;
+  });
+}
diff --git a/vue/toolkit/src/composables/math/useProjection/demo.vue b/vue/toolkit/src/composables/math/useProjection/demo.vue
new file mode 100644
index 0000000..d1aa575
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useProjection/demo.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useProjection } from './index';
+
+// Source value lives in a temperature domain.
+const celsius = ref(22);
+
+const clamp = ref(false);
+const options = computed(() => ({ clamp: clamp.value }));
+
+// Same reactive source projected into several target domains at once.
+const fahrenheit = useProjection(celsius, [0, 100], [32, 212], options);
+const fraction = useProjection(celsius, [0, 40], [0, 1], options);
+const percent = useProjection(celsius, [0, 40], [0, 100], options);
+const hue = useProjection(celsius, [0, 40], [210, 0], options);
+
+const barWidth = computed(() => `${Math.max(0, Math.min(100, percent.value))}%`);
+const swatch = computed(() => `hsl(${hue.value} 80% 50%)`);
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">source · °C</span>
+        <span class="font-mono text-sm text-(--fg-muted)">domain [0, 40]</span>
+      </div>
+      <div class="mt-1 flex items-center gap-3">
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ celsius }}°</span>
+        <span
+          class="size-6 shrink-0 rounded-full border border-(--border)"
+          :style="{ backgroundColor: swatch }"
+        />
+      </div>
+      <input
+        v-model.number="celsius"
+        type="range"
+        min="-10"
+        max="50"
+        step="1"
+        class="mt-3 w-full accent-(--accent)"
+      >
+    </div>
+
+    <div class="space-y-2">
+      <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <span class="text-sm text-(--fg-muted)">→ °F <span class="font-mono text-xs text-(--fg-subtle)">[32, 212]</span></span>
+        <span class="font-mono text-sm font-bold tabular-nums text-(--fg)">{{ fahrenheit.toFixed(1) }}</span>
+      </div>
+      <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <span class="text-sm text-(--fg-muted)">→ fraction <span class="font-mono text-xs text-(--fg-subtle)">[0, 1]</span></span>
+        <span class="font-mono text-sm font-bold tabular-nums text-(--fg)">{{ fraction.toFixed(3) }}</span>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <div class="flex items-center justify-between">
+          <span class="text-sm text-(--fg-muted)">→ percent <span class="font-mono text-xs text-(--fg-subtle)">[0, 100]</span></span>
+          <span class="font-mono text-sm font-bold tabular-nums text-(--fg)">{{ percent.toFixed(0) }}%</span>
+        </div>
+        <div class="mt-2 h-2 w-full overflow-hidden rounded-full bg-(--bg)">
+          <div
+            class="h-full rounded-full bg-(--accent) transition-[width] duration-200"
+            :style="{ width: barWidth }"
+          />
+        </div>
+      </div>
+    </div>
+
+    <label class="flex items-center justify-between gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <span class="flex flex-col">
+        <span class="text-sm font-medium text-(--fg)">Clamp to domain</span>
+        <span class="text-xs text-(--fg-subtle)">prevent extrapolation past bounds</span>
+      </span>
+      <input v-model="clamp" type="checkbox" class="size-4 accent-(--accent)">
+    </label>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/math/useProjection/index.test.ts b/vue/toolkit/src/composables/math/useProjection/index.test.ts
new file mode 100644
index 0000000..1992e09
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useProjection/index.test.ts
@@ -0,0 +1,144 @@
+import { computed, ref } from 'vue';
+import { describe, expect, it } from 'vitest';
+import { createGenericProjection, createProjection, useProjection } from '.';
+
+describe(useProjection, () => {
+  it('projects a static value linearly', () => {
+    const projected = useProjection(50, [0, 100], [0, 1]);
+
+    expect(projected.value).toBe(0.5);
+  });
+
+  it('reacts to input changes', () => {
+    const input = ref(0);
+    const projected = useProjection(input, [0, 100], [0, 1]);
+
+    expect(projected.value).toBe(0);
+
+    input.value = 100;
+    expect(projected.value).toBe(1);
+
+    input.value = 25;
+    expect(projected.value).toBe(0.25);
+  });
+
+  it('reacts to domain changes (getters)', () => {
+    const input = ref(5);
+    const from = ref<[number, number]>([0, 10]);
+    const to = ref<[number, number]>([0, 100]);
+    const projected = useProjection(input, () => from.value, () => to.value);
+
+    expect(projected.value).toBe(50);
+
+    to.value = [0, 200];
+    expect(projected.value).toBe(100);
+
+    from.value = [0, 5];
+    expect(projected.value).toBe(200);
+  });
+
+  it('extrapolates past the bounds by default', () => {
+    const projected = useProjection(150, [0, 100], [0, 10]);
+
+    expect(projected.value).toBe(15);
+  });
+
+  it('clamps to the from-domain when { clamp: true }', () => {
+    const above = useProjection(150, [0, 100], [0, 10], { clamp: true });
+    const below = useProjection(-50, [0, 100], [0, 10], { clamp: true });
+
+    expect(above.value).toBe(10);
+    expect(below.value).toBe(0);
+  });
+
+  it('handles a reversed output domain', () => {
+    const projected = useProjection(0, [0, 100], [10, 0]);
+
+    expect(projected.value).toBe(10);
+  });
+
+  it('maps a degenerate (zero-width) from-domain to the to-start instead of NaN', () => {
+    const projected = useProjection(7, [5, 5], [0, 100]);
+
+    expect(projected.value).toBe(0);
+    expect(Number.isNaN(projected.value)).toBeFalsy();
+  });
+
+  it('accepts a custom projector function', () => {
+    const projector = (input: number, from: readonly [number, number], to: readonly [number, number]): number =>
+      Math.round((input - from[0]) / (from[1] - from[0]) * (to[1] - to[0]) + to[0]);
+    const projected = useProjection(0.4, [0, 1], [0, 3], projector);
+
+    expect(projected.value).toBe(1);
+  });
+
+  it('works with readonly/computed inputs (SSR-safe, pure)', () => {
+    const source = computed(() => 25);
+    const projected = useProjection(source, [0, 100], [0, 4]);
+
+    expect(projected.value).toBe(1);
+  });
+});
+
+describe(createProjection, () => {
+  it('returns a reusable factory', () => {
+    const project = createProjection([0, 10], [0, 100]);
+
+    expect(project(0).value).toBe(0);
+    expect(project(5).value).toBe(50);
+    expect(project(10).value).toBe(100);
+  });
+
+  it('keeps each produced ref reactive to its own input', () => {
+    const project = createProjection([0, 10], [0, 100]);
+    const a = ref(1);
+    const b = ref(2);
+    const pa = project(a);
+    const pb = project(b);
+
+    a.value = 3;
+    expect(pa.value).toBe(30);
+    expect(pb.value).toBe(20);
+  });
+
+  it('supports the clamp option', () => {
+    const project = createProjection([0, 10], [0, 100], { clamp: true });
+
+    expect(project(20).value).toBe(100);
+    expect(project(-5).value).toBe(0);
+  });
+});
+
+describe(createGenericProjection, () => {
+  it('projects across non-numeric domains via a custom projector', () => {
+    const project = createGenericProjection<number, string>(
+      [0, 25],
+      ['a', 'z'],
+      (n, from, to) => {
+        const lo = to[0].charCodeAt(0);
+        const hi = to[1].charCodeAt(0);
+        const t = (n - from[0]) / (from[1] - from[0]);
+
+        return String.fromCharCode(Math.round(lo + t * (hi - lo)));
+      },
+    );
+
+    expect(project(0).value).toBe('a');
+    expect(project(25).value).toBe('z');
+  });
+
+  it('reacts to a reactive input', () => {
+    const input = ref(0);
+    const project = createGenericProjection<number, number>(
+      [0, 10],
+      [0, 1],
+      (n, from, to) => (n - from[0]) / (from[1] - from[0]) * (to[1] - to[0]) + to[0],
+    );
+    const projected = project(input);
+
+    expect(projected.value).toBe(0);
+
+    input.value = 10;
+    expect(projected.value).toBe(1);
+  });
+});
diff --git a/vue/toolkit/src/composables/math/useProjection/index.ts b/vue/toolkit/src/composables/math/useProjection/index.ts
new file mode 100644
index 0000000..560bdfb
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useProjection/index.ts
@@ -0,0 +1,156 @@
+import { inverseLerp, lerp, remap } from '@robonen/stdlib';
+import { computed, toValue } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+
+/**
+ * A pure mapping from a value in the `from` domain to the `to` domain.
+ *
+ * @typeParam F The input domain element type.
+ * @typeParam T The output domain element type.
+ */
+export type ProjectorFunction<F, T>
+  = (input: F, from: readonly [F, F], to: readonly [T, T]) => T;
+
+/**
+ * A reusable projection: given a reactive input it yields a `ComputedRef`
+ * of the projected value.
+ *
+ * @typeParam F The input domain element type.
+ * @typeParam T The output domain element type.
+ */
+export type UseProjection<F, T>
+  = (input: MaybeRefOrGetter<F>) => ComputedRef<T>;
+
+export interface CreateProjectionOptions {
+  /**
+   * Clamp the input to the `from` domain before projecting so the result never
+   * extrapolates past the `to` domain bounds. Reuses the stdlib `remap` (which
+   * also tolerates a reversed/descending input range). Defaults to `false`,
+   * matching VueUse's extrapolating behaviour.
+   *
+   * @default false
+   */
+  clamp?: boolean;
+}
+
+// Extrapolating linear projector (matches VueUse's defaultNumericProjector) but
+// composed from stdlib lerp/inverseLerp and guarded against a zero-width input
+// domain so a degenerate `[n, n]` source maps to `to[0]` instead of NaN.
+function defaultNumericProjector(input: number, from: readonly [number, number], to: readonly [number, number]): number {
+  return lerp(to[0], to[1], inverseLerp(from[0], from[1], input));
+}
+
+// Clamping projector — delegates entirely to stdlib `remap`.
+function clampedNumericProjector(input: number, from: readonly [number, number], to: readonly [number, number]): number {
+  return remap(input, from[0], from[1], to[0], to[1]);
+}
+
+/**
+ * @name createGenericProjection
+ * @category Math
+ * @description Create a reusable projection between two arbitrary (non-numeric)
+ * domains using a custom projector. The returned factory turns a reactive input
+ * into a `ComputedRef` of the projected value, so the same projection can be
+ * applied to many inputs without re-resolving the domains each time.
+ *
+ * @typeParam F The input domain element type.
+ * @typeParam T The output domain element type.
+ * @param {MaybeRefOrGetter<readonly [F, F]>} fromDomain The source domain `[start, end]`
+ * @param {MaybeRefOrGetter<readonly [T, T]>} toDomain The target domain `[start, end]`
+ * @param {ProjectorFunction<F, T>} projector The pure mapping function
+ * @returns {UseProjection<F, T>} A factory that projects a reactive input into a `ComputedRef`
+ *
+ * @example
+ * const project = createGenericProjection(
+ *   [0, 10],
+ *   ['a', 'z'],
+ *   (n, from, to) => to[0] + Math.round((n - from[0]) / (from[1] - from[0]) * (to[1].charCodeAt(0) - to[0].charCodeAt(0))),
+ * );
+ *
+ * @since 0.0.15
+ */
+/* @__NO_SIDE_EFFECTS__ */
+export function createGenericProjection<F = number, T = number>(
+  fromDomain: MaybeRefOrGetter<readonly [F, F]>,
+  toDomain: MaybeRefOrGetter<readonly [T, T]>,
+  projector: ProjectorFunction<F, T>,
+): UseProjection<F, T> {
+  return (input: MaybeRefOrGetter<F>): ComputedRef<T> =>
+    computed<T>(() => projector(toValue(input), toValue(fromDomain), toValue(toDomain)));
+}
+
+/**
+ * @name createProjection
+ * @category Math
+ * @description Create a reusable numeric projection from one numeric domain to
+ * another. Without a custom projector it performs a linear (lerp-based)
+ * remap that extrapolates past the bounds; pass `{ clamp: true }` to clamp the
+ * input to the `from` domain via the stdlib `remap`. The returned factory can
+ * be reused for many inputs.
+ *
+ * @param {MaybeRefOrGetter<readonly [number, number]>} fromDomain The source domain `[start, end]`
+ * @param {MaybeRefOrGetter<readonly [number, number]>} toDomain The target domain `[start, end]`
+ * @param {ProjectorFunction<number, number> | CreateProjectionOptions} [projector] A custom projector, or options for the default projector
+ * @returns {UseProjection<number, number>} A factory that projects a reactive number into a `ComputedRef<number>`
+ *
+ * @example
+ * const project = createProjection([0, 100], [0, 1]);
+ * const half = project(50); // 0.5
+ *
+ * @example
+ * const project = createProjection([0, 10], [0, 100], { clamp: true });
+ * const out = project(20); // 100 (clamped)
+ *
+ * @since 0.0.15
+ */
+/* @__NO_SIDE_EFFECTS__ */
+export function createProjection(
+  fromDomain: MaybeRefOrGetter<readonly [number, number]>,
+  toDomain: MaybeRefOrGetter<readonly [number, number]>,
+  projector?: ProjectorFunction<number, number> | CreateProjectionOptions,
+): UseProjection<number, number> {
+  const resolved: ProjectorFunction<number, number>
+    = typeof projector === 'function'
+      ? projector
+      : projector?.clamp
+        ? clampedNumericProjector
+        : defaultNumericProjector;
+
+  return createGenericProjection<number, number>(fromDomain, toDomain, resolved);
+}
+
+/**
+ * @name useProjection
+ * @category Math
+ * @description Reactive numeric projection from one numeric domain to another.
+ * A thin one-shot wrapper over {@link createProjection}: it projects a single
+ * reactive `input` and returns a `ComputedRef` of the result. The default
+ * (lerp-based) projector extrapolates past the domain bounds; pass
+ * `{ clamp: true }` to clamp the input to the `from` domain. SSR-safe — it
+ * performs only pure arithmetic and touches no browser globals.
+ *
+ * @param {MaybeRefOrGetter<number>} input The reactive value to project
+ * @param {MaybeRefOrGetter<readonly [number, number]>} fromDomain The source domain `[start, end]`
+ * @param {MaybeRefOrGetter<readonly [number, number]>} toDomain The target domain `[start, end]`
+ * @param {ProjectorFunction<number, number> | CreateProjectionOptions} [projector] A custom projector, or options for the default projector
+ * @returns {ComputedRef<number>} A computed ref of the projected value
+ *
+ * @example
+ * const input = ref(50);
+ * const projected = useProjection(input, [0, 100], [0, 1]); // 0.5
+ *
+ * @example
+ * const input = ref(150);
+ * const projected = useProjection(input, [0, 100], [0, 10], { clamp: true }); // 10
+ *
+ * @since 0.0.15
+ */
+/* @__NO_SIDE_EFFECTS__ */
+export function useProjection(
+  input: MaybeRefOrGetter<number>,
+  fromDomain: MaybeRefOrGetter<readonly [number, number]>,
+  toDomain: MaybeRefOrGetter<readonly [number, number]>,
+  projector?: ProjectorFunction<number, number> | CreateProjectionOptions,
+): ComputedRef<number> {
+  return createProjection(fromDomain, toDomain, projector)(input);
+}
diff --git a/vue/toolkit/src/composables/math/useRound/demo.vue b/vue/toolkit/src/composables/math/useRound/demo.vue
new file mode 100644
index 0000000..365ffc6
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useRound/demo.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useRound } from './index';
+
+const value = ref(1234.5678);
+const digits = ref(2);
+
+const rounded = useRound(value, { digits });
+
+const hint = computed(() => {
+  if (digits.value > 0)
+    return `to ${digits.value} decimal place${digits.value === 1 ? '' : 's'}`;
+  if (digits.value < 0)
+    return `to nearest ${10 ** -digits.value}`;
+  return 'to nearest integer (Math.round)';
+});
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex items-baseline justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">rounded</span>
+        <span class="font-mono text-xs text-(--fg-subtle)">{{ hint }}</span>
+      </div>
+      <div class="mt-1 font-mono text-3xl font-bold tabular-nums text-(--fg)">
+        {{ rounded }}
+      </div>
+      <div class="mt-1 font-mono text-xs text-(--fg-subtle)">
+        input {{ value }}
+      </div>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <label class="block text-sm font-medium text-(--fg)" for="round-value">Value</label>
+      <input
+        id="round-value"
+        v-model.number="value"
+        type="number"
+        step="0.0001"
+        class="mt-2 w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+
+      <label class="mt-4 flex items-center justify-between text-sm font-medium text-(--fg)">
+        <span>Digits</span>
+        <span
+          class="font-mono tabular-nums"
+          :class="digits === 0 ? 'text-(--fg-muted)' : 'text-(--accent-text)'"
+        >{{ digits > 0 ? '+' : '' }}{{ digits }}</span>
+      </label>
+      <input
+        v-model.number="digits"
+        type="range"
+        min="-3"
+        max="4"
+        step="1"
+        class="mt-2 w-full accent-(--accent)"
+      >
+      <div class="mt-1 flex justify-between font-mono text-xs text-(--fg-subtle)">
+        <span>tens</span>
+        <span>integer</span>
+        <span>decimals</span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/math/useRound/index.test.ts b/vue/toolkit/src/composables/math/useRound/index.test.ts
new file mode 100644
index 0000000..115a268
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useRound/index.test.ts
@@ -0,0 +1,106 @@
+import { computed, ref } from 'vue';
+import { describe, expect, it } from 'vitest';
+import { useRound } from '.';
+
+describe(useRound, () => {
+  it('rounds a non-reactive value', () => {
+    expect(useRound(0.6).value).toBe(1);
+    expect(useRound(0.4).value).toBe(0);
+    expect(useRound(-0.6).value).toBe(-1);
+  });
+
+  it('rounds a ref value', () => {
+    const value = ref(1.49);
+    const rounded = useRound(value);
+
+    expect(rounded.value).toBe(1);
+  });
+
+  it('rounds a getter value', () => {
+    const value = ref(2.5);
+    const rounded = useRound(() => value.value);
+
+    expect(rounded.value).toBe(3);
+  });
+
+  it('updates reactively when the source value changes', () => {
+    const value = ref(1.2);
+    const rounded = useRound(value);
+
+    expect(rounded.value).toBe(1);
+
+    value.value = 1.8;
+
+    expect(rounded.value).toBe(2);
+  });
+
+  it('rounds a readonly computed source', () => {
+    const source = computed(() => 4.7);
+    const rounded = useRound(source);
+
+    expect(rounded.value).toBe(5);
+  });
+
+  it('matches Math.round semantics for halves', () => {
+    expect(useRound(0.5).value).toBe(1);
+    expect(useRound(2.5).value).toBe(3);
+    // Math.round(-0.5) === -0, which our composable preserves exactly.
+    expect(useRound(-0.5).value).toBe(Math.round(-0.5));
+    expect(useRound(-1.5).value).toBe(-1);
+  });
+
+  it('rounds to a fixed number of decimal places', () => {
+    expect(useRound(1.2345, { digits: 2 }).value).toBe(1.23);
+    expect(useRound(1.2355, { digits: 2 }).value).toBe(1.24);
+    expect(useRound(1.005, { digits: 2 }).value).toBe(1.01);
+  });
+
+  it('rounds negative numbers with decimal precision', () => {
+    expect(useRound(-1.2345, { digits: 2 }).value).toBe(-1.23);
+    expect(useRound(-1.2355, { digits: 2 }).value).toBe(-1.24);
+  });
+
+  it('rounds to the left of the decimal point with negative digits', () => {
+    expect(useRound(1234, { digits: -1 }).value).toBe(1230);
+    expect(useRound(1250, { digits: -2 }).value).toBe(1300);
+  });
+
+  it('treats digits 0 as plain Math.round', () => {
+    expect(useRound(1.6, { digits: 0 }).value).toBe(2);
+  });
+
+  it('reacts to a reactive digits option', () => {
+    const value = ref(1.23456);
+    const digits = ref(2);
+    const rounded = useRound(value, { digits });
+
+    expect(rounded.value).toBe(1.23);
+
+    digits.value = 4;
+
+    expect(rounded.value).toBe(1.2346);
+  });
+
+  it('accepts a getter for digits', () => {
+    const digits = ref(1);
+    const rounded = useRound(3.14159, { digits: () => digits.value });
+
+    expect(rounded.value).toBe(3.1);
+  });
+
+  it('passes through non-finite values', () => {
+    expect(useRound(Number.NaN).value).toBeNaN();
+    expect(useRound(Number.POSITIVE_INFINITY).value).toBe(Number.POSITIVE_INFINITY);
+    expect(useRound(Number.NEGATIVE_INFINITY, { digits: 2 }).value).toBe(Number.NEGATIVE_INFINITY);
+    expect(useRound(Number.NaN, { digits: 2 }).value).toBeNaN();
+  });
+
+  it('works without any DOM globals (SSR-safe, pure computed)', () => {
+    // The composable never touches window/document/navigator, so it must work
+    // identically regardless of environment.
+    const value = ref(9.99);
+    const rounded = useRound(value, { digits: 1 });
+
+    expect(rounded.value).toBe(10);
+  });
+});
diff --git a/vue/toolkit/src/composables/math/useRound/index.ts b/vue/toolkit/src/composables/math/useRound/index.ts
new file mode 100644
index 0000000..f1b2327
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useRound/index.ts
@@ -0,0 +1,67 @@
+import { computed, toValue } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+
+export interface UseRoundOptions {
+  /**
+   * Number of decimal places to round to.
+   *
+   * `0` (default) reproduces `Math.round` exactly. Positive values round to
+   * fractional digits (e.g. `2` -> `1.23`), negative values round to the left
+   * of the decimal point (e.g. `-1` -> nearest ten).
+   *
+   * @default 0
+   */
+  digits?: MaybeRefOrGetter<number>;
+}
+
+/**
+ * @name useRound
+ * @category Math
+ * @description Reactive `Math.round` with optional decimal-place precision
+ *
+ * @param {MaybeRefOrGetter<number>} value The value to round
+ * @param {UseRoundOptions} [options] Rounding options
+ * @returns {ComputedRef<number>} A computed ref of the rounded value
+ *
+ * @example
+ * const value = ref(0.6);
+ * const rounded = useRound(value); // 1
+ *
+ * @example
+ * const value = ref(1.2345);
+ * const rounded = useRound(value, { digits: 2 }); // 1.23
+ *
+ * @example
+ * const value = ref(0.5);
+ * const rounded = useRound(() => value.value); // 1
+ *
+ * @since 0.0.15
+ */
+export function useRound(value: MaybeRefOrGetter<number>, options: UseRoundOptions = {}): ComputedRef<number> {
+  const { digits = 0 } = options;
+
+  return computed<number>(() => {
+    const v = toValue(value);
+    const d = toValue(digits);
+
+    // Fast path: identical to Math.round, avoids any precision math.
+    if (!d)
+      return Math.round(v);
+
+    // Non-finite inputs (NaN/Infinity) round to themselves; bail early so the
+    // factor multiplication below does not turn Infinity into NaN.
+    if (!Number.isFinite(v))
+      return v;
+
+    // Scale into integer space, round, then scale back. Using `Number(... )`
+    // through exponential notation sidesteps the classic float artifacts of
+    // `Math.round(v * factor) / factor` (e.g. 1.005 -> 1.00).
+    const sign = v < 0 ? '-' : '';
+    const abs = Math.abs(v);
+
+    const shifted = Number(`${abs}e${d}`);
+    const rounded = Math.round(shifted);
+
+    return Number(`${sign}${rounded}e${-d}`);
+  });
+}
diff --git a/vue/toolkit/src/composables/math/useSum/demo.vue b/vue/toolkit/src/composables/math/useSum/demo.vue
new file mode 100644
index 0000000..4921378
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useSum/demo.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useSum } from './index';
+
+interface LineItem {
+  id: number;
+  label: string;
+  amount: number;
+}
+
+let nextId = 4;
+const items = ref<LineItem[]>([
+  { id: 1, label: 'Domain renewal', amount: 12.99 },
+  { id: 2, label: 'Cloud hosting', amount: 24.5 },
+  { id: 3, label: 'Email service', amount: 6.0 },
+]);
+
+// useSum reads a reactive array of getters, recomputing as items mutate.
+const total = useSum(() => items.value.map(item => () => item.amount));
+
+function addItem() {
+  items.value.push({ id: nextId++, label: 'New item', amount: 0 });
+}
+
+function removeItem(id: number) {
+  items.value = items.value.filter(item => item.id !== id);
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex flex-col">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">monthly total</span>
+        <span class="text-xs text-(--fg-subtle)">{{ items.length }} item{{ items.length === 1 ? '' : 's' }}</span>
+      </div>
+      <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">${{ total.toFixed(2) }}</span>
+    </div>
+
+    <div class="space-y-2">
+      <div
+        v-for="item in items"
+        :key="item.id"
+        class="flex items-center gap-2 rounded-lg border border-(--border) bg-(--bg-inset) p-2"
+      >
+        <input
+          v-model="item.label"
+          type="text"
+          class="min-w-0 flex-1 rounded-md border border-transparent bg-transparent px-2 py-1 text-sm text-(--fg) transition focus:border-(--accent) focus:bg-(--bg) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+        <div class="flex items-center text-sm text-(--fg-subtle)">
+          <span class="font-mono">$</span>
+          <input
+            v-model.number="item.amount"
+            type="number"
+            step="0.01"
+            class="w-20 rounded-md border border-(--border) bg-(--bg) px-2 py-1 text-right font-mono text-sm tabular-nums text-(--fg) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          >
+        </div>
+        <button
+          type="button"
+          aria-label="Remove item"
+          class="inline-flex size-7 shrink-0 items-center justify-center rounded-md border border-(--border) bg-(--bg-elevated) text-(--fg-muted) transition hover:border-red-500/40 hover:text-red-600 dark:hover:text-red-400 active:scale-[0.98] cursor-pointer"
+          @click="removeItem(item.id)"
+        >
+          &times;
+        </button>
+      </div>
+
+      <p v-if="!items.length" class="rounded-lg border border-dashed border-(--border) bg-(--bg-inset) p-4 text-center text-sm text-(--fg-subtle)">
+        No items — total is ${{ total.toFixed(2) }}
+      </p>
+    </div>
+
+    <button
+      type="button"
+      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+      @click="addItem"
+    >
+      + Add item
+    </button>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/math/useSum/index.test.ts b/vue/toolkit/src/composables/math/useSum/index.test.ts
new file mode 100644
index 0000000..136ec3c
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useSum/index.test.ts
@@ -0,0 +1,116 @@
+import { computed, readonly, ref } from 'vue';
+import { describe, expect, it } from 'vitest';
+import { useSum } from '.';
+
+describe(useSum, () => {
+  it('returns the sum of raw variadic values', () => {
+    const total = useSum(1, 3, 2);
+
+    expect(total.value).toBe(6);
+  });
+
+  it('returns the sum of ref variadic values', () => {
+    const a = ref(1);
+    const b = ref(3);
+    const c = ref(2);
+    const total = useSum(a, b, c);
+
+    expect(total.value).toBe(6);
+  });
+
+  it('supports getter arguments', () => {
+    const total = useSum(() => 4, () => 9, () => 1);
+
+    expect(total.value).toBe(14);
+  });
+
+  it('mixes refs, getters and raw values', () => {
+    const a = ref(5);
+    const total = useSum(a, () => 8, 2);
+
+    expect(total.value).toBe(15);
+  });
+
+  it('reacts to ref changes', () => {
+    const a = ref(1);
+    const b = ref(3);
+    const total = useSum(a, b);
+
+    expect(total.value).toBe(4);
+
+    a.value = 10;
+
+    expect(total.value).toBe(13);
+  });
+
+  it('returns the sum of a reactive array', () => {
+    const list = ref([1, 5, 2]);
+    const total = useSum(list);
+
+    expect(total.value).toBe(8);
+
+    list.value = [7, 3, 4];
+
+    expect(total.value).toBe(14);
+  });
+
+  it('returns the sum of a getter array', () => {
+    const total = useSum(() => [1, 9, 4]);
+
+    expect(total.value).toBe(14);
+  });
+
+  it('unwraps refs and getters nested inside the array', () => {
+    const a = ref(1);
+    const total = useSum(ref([a, () => 5, 2]));
+
+    expect(total.value).toBe(8);
+
+    a.value = 99;
+
+    expect(total.value).toBe(106);
+  });
+
+  it('reacts when a mutated plain array ref is reassigned', () => {
+    const list = ref([1, 2, 3]);
+    const total = useSum(list);
+
+    expect(total.value).toBe(6);
+
+    list.value = [...list.value, 100];
+
+    expect(total.value).toBe(106);
+  });
+
+  it('handles readonly and computed sources', () => {
+    const computedValue = computed(() => 12);
+    const readonlyValue = readonly(ref(7));
+    const total = useSum(computedValue, readonlyValue, 3);
+
+    expect(total.value).toBe(22);
+  });
+
+  it('handles negative values', () => {
+    const total = useSum(-5, -1, -10);
+
+    expect(total.value).toBe(-16);
+  });
+
+  it('returns 0 for an empty array (SSR-safe, no globals touched)', () => {
+    const total = useSum(ref<number[]>([]));
+
+    expect(total.value).toBe(0);
+  });
+
+  it('returns 0 when called with no arguments', () => {
+    const total = useSum();
+
+    expect(total.value).toBe(0);
+  });
+
+  it('returns a single value when only one argument is given', () => {
+    const total = useSum(42);
+
+    expect(total.value).toBe(42);
+  });
+});
diff --git a/vue/toolkit/src/composables/math/useSum/index.ts b/vue/toolkit/src/composables/math/useSum/index.ts
new file mode 100644
index 0000000..0737b9f
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useSum/index.ts
@@ -0,0 +1,54 @@
+import { isArray, sum } from '@robonen/stdlib';
+import { computed, toValue } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+import type { MaybeComputedRefArgs } from '@/types';
+
+/**
+ * @name useSum
+ * @category Math
+ * @description Reactively compute the sum of the provided numbers. Accepts
+ * either a variadic list of numbers (each a ref, getter, or raw value) or a
+ * single reactive array whose items may themselves be refs/getters.
+ *
+ * @param {...MaybeRefOrGetter<number>} args The values to add, or a single reactive array of values
+ * @returns {ComputedRef<number>} A computed ref of the total (`0` when empty)
+ *
+ * @example
+ * const a = ref(1);
+ * const b = ref(3);
+ * const total = useSum(a, b, 2); // 6
+ *
+ * @example
+ * const list = ref([1, 5, 2]);
+ * const total = useSum(list); // 8
+ *
+ * @example
+ * const list = ref([ref(1), () => 5, 2]);
+ * const total = useSum(list); // 8
+ *
+ * @since 0.0.15
+ */
+export function useSum(array: MaybeRefOrGetter<Array<MaybeRefOrGetter<number>>>): ComputedRef<number>;
+export function useSum(...args: Array<MaybeRefOrGetter<number>>): ComputedRef<number>;
+export function useSum(...args: MaybeComputedRefArgs<number>): ComputedRef<number> {
+  return computed<number>(() => {
+    // Collect the resolved values into a single flat array, unwrapping refs and
+    // getters at both the top level and inside a reactive array argument, then
+    // delegate the reduction to stdlib `sum` (one pass, no per-arg closures).
+    const values: number[] = [];
+
+    for (const arg of args) {
+      const value = toValue(arg);
+
+      if (isArray(value)) {
+        for (const inner of value)
+          values.push(toValue(inner));
+      }
+      else {
+        values.push(value);
+      }
+    }
+
+    return sum(values);
+  });
+}
diff --git a/vue/toolkit/src/composables/math/useTrunc/demo.vue b/vue/toolkit/src/composables/math/useTrunc/demo.vue
new file mode 100644
index 0000000..3585528
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useTrunc/demo.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useTrunc } from './index';
+
+const value = ref(2.9);
+const truncated = useTrunc(value);
+
+// The fractional part discarded by Math.trunc, for a side-by-side comparison.
+const fractional = computed(() => value.value - truncated.value);
+
+const samples = [2.9, -3.7, 42.0001, -0.5, 99.999];
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="grid grid-cols-2 gap-3">
+      <div class="flex flex-col items-center gap-1 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">truncated</span>
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ truncated }}</span>
+      </div>
+      <div class="flex flex-col items-center gap-1 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">dropped</span>
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg-muted)">{{ fractional.toFixed(3) }}</span>
+      </div>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <label class="flex items-center justify-between text-sm font-medium text-(--fg)">
+        <span>Value</span>
+        <span class="font-mono tabular-nums text-(--fg-muted)">{{ value }}</span>
+      </label>
+      <input
+        v-model.number="value"
+        type="range"
+        min="-10"
+        max="10"
+        step="0.01"
+        class="mt-2 w-full accent-(--accent)"
+      >
+    </div>
+
+    <div>
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Samples</span>
+      <div class="mt-2 flex flex-wrap gap-2">
+        <button
+          v-for="(s, i) in samples"
+          :key="i"
+          type="button"
+          class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted) transition hover:border-(--border-strong) hover:text-(--fg) cursor-pointer"
+          @click="value = s"
+        >
+          {{ s }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/math/useTrunc/index.test.ts b/vue/toolkit/src/composables/math/useTrunc/index.test.ts
new file mode 100644
index 0000000..4be6f07
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useTrunc/index.test.ts
@@ -0,0 +1,64 @@
+import { computed, readonly, ref } from 'vue';
+import { describe, expect, it } from 'vitest';
+import { useTrunc } from '.';
+
+describe(useTrunc, () => {
+  it('truncate a non-reactive value', () => {
+    const truncated = useTrunc(2.9);
+
+    expect(truncated.value).toBe(2);
+  });
+
+  it('truncate negative values toward zero', () => {
+    expect(useTrunc(-3.7).value).toBe(-3);
+    expect(useTrunc(-0.4).value).toBe(-0);
+  });
+
+  it('leave integers unchanged', () => {
+    expect(useTrunc(5).value).toBe(5);
+    expect(useTrunc(-5).value).toBe(-5);
+    expect(useTrunc(0).value).toBe(0);
+  });
+
+  it('truncate a reactive ref', () => {
+    const value = ref(2.9);
+    const truncated = useTrunc(value);
+
+    expect(truncated.value).toBe(2);
+  });
+
+  it('truncate using a getter', () => {
+    const truncated = useTrunc(() => 4.999);
+
+    expect(truncated.value).toBe(4);
+  });
+
+  it('truncate readonly values', () => {
+    const computedValue = computed(() => 7.5);
+    const readonlyValue = readonly(ref(7.5));
+
+    expect(useTrunc(computedValue).value).toBe(7);
+    expect(useTrunc(readonlyValue).value).toBe(7);
+  });
+
+  it('update the truncated value when the original value changes', () => {
+    const value = ref(2.9);
+    const truncated = useTrunc(value);
+
+    expect(truncated.value).toBe(2);
+
+    value.value = 9.99;
+
+    expect(truncated.value).toBe(9);
+
+    value.value = -1.5;
+
+    expect(truncated.value).toBe(-1);
+  });
+
+  it('propagate non-finite inputs', () => {
+    expect(useTrunc(Number.POSITIVE_INFINITY).value).toBe(Number.POSITIVE_INFINITY);
+    expect(useTrunc(Number.NEGATIVE_INFINITY).value).toBe(Number.NEGATIVE_INFINITY);
+    expect(useTrunc(Number.NaN).value).toBeNaN();
+  });
+});
diff --git a/vue/toolkit/src/composables/math/useTrunc/index.ts b/vue/toolkit/src/composables/math/useTrunc/index.ts
new file mode 100644
index 0000000..23c1e03
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useTrunc/index.ts
@@ -0,0 +1,25 @@
+import { computed, toValue } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+
+/**
+ * @name useTrunc
+ * @category Math
+ * @description Reactive `Math.trunc`. Returns the integer part of a number by removing any fractional digits.
+ *
+ * @param {MaybeRefOrGetter<number>} value The value to truncate
+ * @returns {ComputedRef<number>} A computed ref holding the truncated value
+ *
+ * @example
+ * const value = ref(2.9);
+ * const truncated = useTrunc(value);
+ * // truncated.value === 2
+ *
+ * @example
+ * const truncated = useTrunc(() => -3.7);
+ * // truncated.value === -3
+ *
+ * @since 0.0.15
+ */
+export function useTrunc(value: MaybeRefOrGetter<number>): ComputedRef<number> {
+  return computed<number>(() => Math.trunc(toValue(value)));
+}
diff --git a/vue/toolkit/src/composables/media/index.ts b/vue/toolkit/src/composables/media/index.ts
new file mode 100644
index 0000000..5f02dde
--- /dev/null
+++ b/vue/toolkit/src/composables/media/index.ts
@@ -0,0 +1,10 @@
+export * from './useBluetooth';
+export * from './useDisplayMedia';
+export * from './useMediaControls';
+export * from './useMemory';
+export * from './usePerformanceObserver';
+export * from './useSpeechRecognition';
+export * from './useSpeechSynthesis';
+export * from './useUserMedia';
+export * from './useWebWorker';
+export * from './useWebWorkerFn';
diff --git a/vue/toolkit/src/composables/media/useBluetooth/demo.vue b/vue/toolkit/src/composables/media/useBluetooth/demo.vue
new file mode 100644
index 0000000..400a889
--- /dev/null
+++ b/vue/toolkit/src/composables/media/useBluetooth/demo.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useBluetooth } from './index';
+
+const {
+  isSupported,
+  isConnected,
+  device,
+  requestDevice,
+  connect,
+  disconnect,
+  error,
+} = useBluetooth({
+  // Surface every nearby device in the chooser so the demo works without
+  // assuming any particular peripheral is in range.
+  acceptAllDevices: true,
+  optionalServices: ['battery_service'],
+});
+
+const deviceName = computed(() => device.value?.name || 'Unnamed device');
+const deviceId = computed(() => device.value?.id ?? '');
+
+const errorMessage = computed(() => {
+  const err = error.value;
+  if (!err)
+    return '';
+  if (err instanceof Error)
+    return err.name === 'NotFoundError' ? 'No device selected (picker dismissed).' : err.message;
+  return String(err);
+});
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div v-if="!isSupported" class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-600 dark:text-amber-400">
+      Web Bluetooth is not supported in this browser.
+    </div>
+
+    <template v-else>
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+        <div class="flex items-center justify-between">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Web Bluetooth</span>
+          <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+            <span class="size-1.5 rounded-full transition" :class="isConnected ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+            {{ isConnected ? 'Connected' : 'Disconnected' }}
+          </span>
+        </div>
+
+        <div v-if="device" class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex flex-col gap-1">
+          <div class="text-sm font-medium text-(--fg) truncate">{{ deviceName }}</div>
+          <div class="font-mono text-xs text-(--fg-subtle) truncate">{{ deviceId }}</div>
+        </div>
+        <div v-else class="rounded-lg border border-dashed border-(--border) bg-(--bg-inset) p-6 text-center text-sm text-(--fg-subtle)">
+          No device paired yet
+        </div>
+      </div>
+
+      <div class="flex flex-wrap gap-2">
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+          @click="requestDevice"
+        >
+          Pair device
+        </button>
+        <button
+          type="button"
+          :disabled="!device || isConnected"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          @click="connect"
+        >
+          Reconnect
+        </button>
+        <button
+          type="button"
+          :disabled="!isConnected"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          @click="disconnect"
+        >
+          Disconnect
+        </button>
+      </div>
+
+      <p v-if="errorMessage" class="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs text-red-600 dark:text-red-400">
+        {{ errorMessage }}
+      </p>
+      <p class="text-xs text-(--fg-subtle)">
+        Pairing prompts the browser's device chooser. A physical Bluetooth peripheral must be in range.
+      </p>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/media/useBluetooth/index.test.ts b/vue/toolkit/src/composables/media/useBluetooth/index.test.ts
new file mode 100644
index 0000000..61654e2
--- /dev/null
+++ b/vue/toolkit/src/composables/media/useBluetooth/index.test.ts
@@ -0,0 +1,263 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick } from 'vue';
+import type { UseBluetoothReturn } from '.';
+import { useBluetooth } from '.';
+
+interface StubGatt {
+  connect: ReturnType<typeof vi.fn>;
+  disconnect: ReturnType<typeof vi.fn>;
+}
+
+function makeServer(connected = true) {
+  return { connected } as unknown as BluetoothRemoteGATTServer;
+}
+
+function makeDevice(gattConnected = true) {
+  const listeners = new Map<string, Set<EventListener>>();
+  const server = makeServer(gattConnected);
+  const gatt: StubGatt = {
+    connect: vi.fn(async () => server),
+    disconnect: vi.fn(),
+  };
+  const device = {
+    name: 'stub-device',
+    gatt,
+    addEventListener: vi.fn((type: string, fn: EventListener) => {
+      if (!listeners.has(type))
+        listeners.set(type, new Set());
+      listeners.get(type)!.add(fn);
+    }),
+    removeEventListener: vi.fn((type: string, fn: EventListener) => {
+      listeners.get(type)?.delete(fn);
+    }),
+    dispatch: (type: string) => {
+      listeners.get(type)?.forEach(fn => fn(new Event(type)));
+    },
+  };
+  return { device, gatt, server };
+}
+
+function stubBluetooth(device?: ReturnType<typeof makeDevice>['device']) {
+  const requestDevice = vi.fn(async () => device);
+  const navigator = {
+    bluetooth: { requestDevice },
+  } as unknown as Navigator;
+  return { navigator, requestDevice };
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe(useBluetooth, () => {
+  it('reports support when the Bluetooth API exists', () => {
+    const { navigator } = stubBluetooth();
+    const scope = effectScope();
+    let bt: UseBluetoothReturn;
+    scope.run(() => {
+      bt = useBluetooth({ navigator });
+    });
+    expect(bt!.isSupported.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('is not supported without the Bluetooth API', () => {
+    const navigator = {} as unknown as Navigator;
+    const scope = effectScope();
+    let bt: UseBluetoothReturn;
+    scope.run(() => {
+      bt = useBluetooth({ navigator });
+    });
+    expect(bt!.isSupported.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('is not supported when navigator is undefined (SSR)', () => {
+    const scope = effectScope();
+    let bt: UseBluetoothReturn;
+    scope.run(() => {
+      bt = useBluetooth({ navigator: undefined });
+    });
+    expect(bt!.isSupported.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('does nothing when requestDevice is called unsupported', async () => {
+    const navigator = {} as unknown as Navigator;
+    const scope = effectScope();
+    let bt: UseBluetoothReturn;
+    scope.run(() => {
+      bt = useBluetooth({ navigator });
+    });
+    await bt!.requestDevice();
+    expect(bt!.device.value).toBeUndefined();
+    expect(bt!.error.value).toBeNull();
+    scope.stop();
+  });
+
+  it('requests a device and connects to its GATT server', async () => {
+    const { device, gatt, server } = makeDevice(true);
+    const { navigator, requestDevice } = stubBluetooth(device);
+    const scope = effectScope();
+    let bt: UseBluetoothReturn;
+    scope.run(() => {
+      bt = useBluetooth({ navigator, acceptAllDevices: true });
+    });
+
+    await bt!.requestDevice();
+    expect(requestDevice).toHaveBeenCalledWith({
+      acceptAllDevices: true,
+      filters: undefined,
+      optionalServices: undefined,
+    });
+    expect(bt!.device.value).toBe(device);
+
+    // The device watcher triggers connect() asynchronously
+    await nextTick();
+    await Promise.resolve();
+    expect(gatt.connect).toHaveBeenCalled();
+    expect(bt!.server.value).toBe(server);
+    expect(bt!.isConnected.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('forces acceptAllDevices off when filters are provided', async () => {
+    const { device } = makeDevice();
+    const { navigator, requestDevice } = stubBluetooth(device);
+    const filters = [{ services: ['heart_rate'] }] as BluetoothLEScanFilter[];
+    const scope = effectScope();
+    let bt: UseBluetoothReturn;
+    scope.run(() => {
+      bt = useBluetooth({ navigator, acceptAllDevices: true, filters });
+    });
+
+    await bt!.requestDevice();
+    expect(requestDevice).toHaveBeenCalledWith({
+      acceptAllDevices: false,
+      filters,
+      optionalServices: undefined,
+    });
+    scope.stop();
+  });
+
+  it('captures errors from requestDevice and calls onError', async () => {
+    const requestDevice = vi.fn(async () => {
+      throw new Error('user cancelled');
+    });
+    const navigator = { bluetooth: { requestDevice } } as unknown as Navigator;
+    const onError = vi.fn();
+    const scope = effectScope();
+    let bt: UseBluetoothReturn;
+    scope.run(() => {
+      bt = useBluetooth({ navigator, acceptAllDevices: true, onError });
+    });
+
+    await bt!.requestDevice();
+    expect(bt!.error.value).toBeInstanceOf(Error);
+    expect((bt!.error.value as Error).message).toBe('user cancelled');
+    expect(onError).toHaveBeenCalledWith(bt!.error.value);
+    expect(bt!.device.value).toBeUndefined();
+    scope.stop();
+  });
+
+  it('captures errors from the GATT connection', async () => {
+    const { device, gatt } = makeDevice();
+    gatt.connect.mockRejectedValueOnce(new Error('gatt failed'));
+    const { navigator } = stubBluetooth(device);
+    const onError = vi.fn();
+    const scope = effectScope();
+    let bt: UseBluetoothReturn;
+    scope.run(() => {
+      bt = useBluetooth({ navigator, acceptAllDevices: true, onError });
+    });
+
+    await bt!.requestDevice();
+    await nextTick();
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(bt!.error.value).toBeInstanceOf(Error);
+    expect(onError).toHaveBeenCalled();
+    expect(bt!.isConnected.value).toBeFalsy();
+    expect(bt!.server.value).toBeUndefined();
+    scope.stop();
+  });
+
+  it('resets connection state on gattserverdisconnected', async () => {
+    const { device } = makeDevice(true);
+    const { navigator } = stubBluetooth(device);
+    const scope = effectScope();
+    let bt: UseBluetoothReturn;
+    scope.run(() => {
+      bt = useBluetooth({ navigator, acceptAllDevices: true });
+    });
+
+    await bt!.requestDevice();
+    await nextTick();
+    await Promise.resolve();
+    expect(bt!.isConnected.value).toBeTruthy();
+
+    device.dispatch('gattserverdisconnected');
+    expect(bt!.isConnected.value).toBeFalsy();
+    expect(bt!.server.value).toBeUndefined();
+    scope.stop();
+  });
+
+  it('disconnect() disconnects the gatt server and resets state', async () => {
+    const { device, gatt } = makeDevice(true);
+    const { navigator } = stubBluetooth(device);
+    const scope = effectScope();
+    let bt: UseBluetoothReturn;
+    scope.run(() => {
+      bt = useBluetooth({ navigator, acceptAllDevices: true });
+    });
+
+    await bt!.requestDevice();
+    await nextTick();
+    await Promise.resolve();
+    expect(bt!.isConnected.value).toBeTruthy();
+
+    bt!.disconnect();
+    expect(gatt.disconnect).toHaveBeenCalled();
+    expect(bt!.isConnected.value).toBeFalsy();
+    expect(bt!.server.value).toBeUndefined();
+    scope.stop();
+  });
+
+  it('connect() reconnects to the current device', async () => {
+    const { device, gatt } = makeDevice(true);
+    const { navigator } = stubBluetooth(device);
+    const scope = effectScope();
+    let bt: UseBluetoothReturn;
+    scope.run(() => {
+      bt = useBluetooth({ navigator, acceptAllDevices: true });
+    });
+
+    await bt!.requestDevice();
+    await nextTick();
+    await Promise.resolve();
+    gatt.connect.mockClear();
+
+    await bt!.connect();
+    expect(gatt.connect).toHaveBeenCalledTimes(1);
+    expect(bt!.isConnected.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('disconnects the gatt server when the scope is disposed', async () => {
+    const { device, gatt } = makeDevice(true);
+    const { navigator } = stubBluetooth(device);
+    const scope = effectScope();
+    let bt: UseBluetoothReturn;
+    scope.run(() => {
+      bt = useBluetooth({ navigator, acceptAllDevices: true });
+    });
+
+    await bt!.requestDevice();
+    await nextTick();
+    await Promise.resolve();
+    gatt.disconnect.mockClear();
+
+    scope.stop();
+    expect(gatt.disconnect).toHaveBeenCalled();
+  });
+});
diff --git a/vue/toolkit/src/composables/media/useBluetooth/index.ts b/vue/toolkit/src/composables/media/useBluetooth/index.ts
new file mode 100644
index 0000000..0fa6c31
--- /dev/null
+++ b/vue/toolkit/src/composables/media/useBluetooth/index.ts
@@ -0,0 +1,218 @@
+import { shallowReadonly, shallowRef, watch } from 'vue';
+import type { Ref, ShallowRef } from 'vue';
+import { noop } from '@robonen/stdlib';
+import { defaultNavigator } from '@/types';
+import type { ConfigurableNavigator } from '@/types';
+import { useSupported } from '@/composables/utilities/useSupported';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import { tryOnMounted } from '@/composables/lifecycle/tryOnMounted';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+
+export interface UseBluetoothRequestDeviceOptions {
+  /**
+   * An array of `BluetoothLEScanFilter`. Each filter consists of an array of
+   * `BluetoothServiceUUID`s, a `name` parameter, and a `namePrefix` parameter.
+   */
+  filters?: BluetoothLEScanFilter[];
+
+  /**
+   * An array of `BluetoothServiceUUID`s that the device may expose but that are
+   * not part of `filters`.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/BluetoothRemoteGATTService/uuid
+   */
+  optionalServices?: BluetoothServiceUUID[];
+}
+
+export interface UseBluetoothOptions extends UseBluetoothRequestDeviceOptions, ConfigurableNavigator {
+  /**
+   * Accept all Bluetooth devices in the chooser.
+   *
+   * !! Showing every nearby device wastes energy (no filters) and is rarely what
+   * you want — prefer `filters`. Ignored when `filters` is non-empty.
+   *
+   * @default false
+   */
+  acceptAllDevices?: boolean;
+
+  /**
+   * Called when `requestDevice` or a GATT connection rejects, instead of
+   * throwing. The same value is also stored in the returned `error` ref.
+   *
+   * @default noop
+   */
+  onError?: (error: unknown) => void;
+}
+
+export interface UseBluetoothReturn {
+  /**
+   * Whether the Web Bluetooth API is available
+   */
+  isSupported: Readonly<Ref<boolean>>;
+
+  /**
+   * Whether a GATT server connection is currently established
+   */
+  isConnected: Readonly<ShallowRef<boolean>>;
+
+  /**
+   * The selected Bluetooth device, or `undefined` before one is chosen
+   */
+  device: ShallowRef<BluetoothDevice | undefined>;
+
+  /**
+   * Prompt the user to pick a device, then connect to its GATT server
+   */
+  requestDevice: () => Promise<void>;
+
+  /**
+   * Re-establish the GATT connection to the current `device`
+   */
+  connect: () => Promise<void>;
+
+  /**
+   * Disconnect from the current device's GATT server
+   */
+  disconnect: () => void;
+
+  /**
+   * The connected GATT server, or `undefined` while disconnected
+   */
+  server: ShallowRef<BluetoothRemoteGATTServer | undefined>;
+
+  /**
+   * The last error thrown by `requestDevice` or a connection attempt
+   */
+  error: ShallowRef<unknown | null>;
+}
+
+/**
+ * @name useBluetooth
+ * @category Media
+ * @description Reactive Web Bluetooth API. Prompts for a device and tracks its GATT server connection.
+ *
+ * @param {UseBluetoothOptions} [options={}] Options
+ * @param {boolean} [options.acceptAllDevices=false] Show all devices in the chooser (ignored when `filters` is set)
+ * @param {BluetoothLEScanFilter[]} [options.filters] Device scan filters
+ * @param {BluetoothServiceUUID[]} [options.optionalServices] Optional GATT services to request access to
+ * @param {Function} [options.onError=noop] Error callback invoked instead of throwing
+ * @param {Navigator} [options.navigator=defaultNavigator] Custom `navigator` instance
+ * @returns {UseBluetoothReturn} `isSupported`, `isConnected`, `device`, `requestDevice`, `connect`, `disconnect`, `server`, and `error`
+ *
+ * @example
+ * const { isSupported, isConnected, device, requestDevice, server, error } = useBluetooth({
+ *   acceptAllDevices: true,
+ * });
+ * requestDevice();
+ *
+ * @example
+ * // Filter by advertised service and request access to the battery service
+ * const { device, requestDevice, server } = useBluetooth({
+ *   filters: [{ services: ['heart_rate'] }],
+ *   optionalServices: ['battery_service'],
+ * });
+ *
+ * @since 0.0.15
+ */
+export function useBluetooth(options: UseBluetoothOptions = {}): UseBluetoothReturn {
+  const {
+    filters,
+    optionalServices,
+    navigator = defaultNavigator,
+    onError = noop,
+  } = options;
+
+  // `acceptAllDevices` is forced off whenever filters narrow the chooser, so it lives in a local.
+  const hasFilters = !!filters && filters.length > 0;
+  const acceptAllDevices = hasFilters ? false : options.acceptAllDevices ?? false;
+
+  const isSupported = useSupported(() => navigator && 'bluetooth' in navigator);
+
+  const device = shallowRef<BluetoothDevice | undefined>();
+  const server = shallowRef<BluetoothRemoteGATTServer | undefined>();
+  const isConnected = shallowRef(false);
+  const error = shallowRef<unknown | null>(null);
+
+  function reset(): void {
+    isConnected.value = false;
+    server.value = undefined;
+  }
+
+  function fail(err: unknown): void {
+    error.value = err;
+    onError(err);
+  }
+
+  // A single reactive listener tied to `device` — re-binds itself whenever the device changes
+  // instead of stacking a new listener on every connect (as VueUse does).
+  useEventListener(device, 'gattserverdisconnected', reset, { passive: true });
+
+  async function connect(): Promise<void> {
+    error.value = null;
+
+    const gatt = device.value?.gatt;
+
+    if (!gatt)
+      return;
+
+    try {
+      server.value = await gatt.connect();
+      isConnected.value = server.value.connected;
+    }
+    catch (err) {
+      reset();
+      fail(err);
+    }
+  }
+
+  function disconnect(): void {
+    device.value?.gatt?.disconnect();
+    reset();
+  }
+
+  // Auto-(re)connect when a new device is selected.
+  watch(device, () => {
+    reset();
+    connect();
+  });
+
+  async function requestDevice(): Promise<void> {
+    if (!isSupported.value)
+      return;
+
+    error.value = null;
+
+    try {
+      // `isSupported` guarantees `navigator.bluetooth` exists before we get here.
+      device.value = await navigator!.bluetooth!.requestDevice({
+        acceptAllDevices,
+        filters,
+        optionalServices,
+      });
+    }
+    catch (err) {
+      fail(err);
+    }
+  }
+
+  tryOnMounted(() => {
+    if (device.value?.gatt)
+      connect();
+  });
+
+  tryOnScopeDispose(() => {
+    if (device.value?.gatt)
+      device.value.gatt.disconnect();
+  });
+
+  return {
+    isSupported,
+    isConnected: shallowReadonly(isConnected),
+    device,
+    requestDevice,
+    connect,
+    disconnect,
+    server,
+    error,
+  };
+}
diff --git a/vue/toolkit/src/composables/media/useDisplayMedia/demo.vue b/vue/toolkit/src/composables/media/useDisplayMedia/demo.vue
new file mode 100644
index 0000000..775b594
--- /dev/null
+++ b/vue/toolkit/src/composables/media/useDisplayMedia/demo.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { computed, useTemplateRef, watch } from 'vue';
+import { useDisplayMedia } from './index';
+
+const video = useTemplateRef<HTMLVideoElement>('video');
+
+const { isSupported, stream, enabled, start, stop } = useDisplayMedia({ audio: false });
+
+// Wire the live stream into the preview element whenever it changes.
+watch([video, stream], ([el, media]) => {
+  if (el)
+    el.srcObject = media ?? null;
+});
+
+const track = computed(() => stream.value?.getVideoTracks()[0]);
+const surfaceLabel = computed(() => track.value?.label || 'Shared surface');
+</script>
+
+<template>
+  <div class="w-full max-w-md flex flex-col gap-4">
+    <div v-if="!isSupported" class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-600 dark:text-amber-400">
+      Screen capture (getDisplayMedia) is not supported in this browser.
+    </div>
+
+    <template v-else>
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+        <div class="flex items-center justify-between">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Screen share</span>
+          <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+            <span class="size-1.5 rounded-full transition" :class="enabled ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+            {{ enabled ? 'Sharing' : 'Idle' }}
+          </span>
+        </div>
+
+        <div class="relative aspect-video overflow-hidden rounded-lg border border-(--border) bg-(--bg-inset)">
+          <video
+            ref="video"
+            autoplay
+            muted
+            playsinline
+            class="size-full object-contain"
+          />
+          <div
+            v-if="!stream"
+            class="absolute inset-0 flex flex-col items-center justify-center gap-1 text-center text-sm text-(--fg-subtle)"
+          >
+            <span class="text-(--fg-muted)">No active capture</span>
+            <span class="text-xs">Start sharing to preview your screen</span>
+          </div>
+        </div>
+
+        <div v-if="stream" class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs text-(--fg) truncate">
+          {{ surfaceLabel }}
+        </div>
+      </div>
+
+      <div class="flex items-center gap-3">
+        <button
+          v-if="!enabled"
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+          @click="start"
+        >
+          Start sharing
+        </button>
+        <button
+          v-else
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="stop"
+        >
+          Stop sharing
+        </button>
+
+        <label class="inline-flex select-none items-center gap-2 text-sm text-(--fg-muted) cursor-pointer">
+          <input v-model="enabled" type="checkbox" class="size-4 accent-(--accent) cursor-pointer">
+          enabled
+        </label>
+      </div>
+
+      <p class="text-xs text-(--fg-subtle)">
+        Starting prompts the browser's screen-picker. Toggling <code class="font-mono">enabled</code> drives the same stream.
+      </p>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/media/useDisplayMedia/index.test.ts b/vue/toolkit/src/composables/media/useDisplayMedia/index.test.ts
new file mode 100644
index 0000000..291e450
--- /dev/null
+++ b/vue/toolkit/src/composables/media/useDisplayMedia/index.test.ts
@@ -0,0 +1,170 @@
+import { describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick } from 'vue';
+import type { UseDisplayMediaReturn } from '.';
+import { useDisplayMedia } from '.';
+
+function track() {
+  let endedHandler: ((ev: Event) => any) | undefined;
+  return {
+    stop: vi.fn(),
+    kind: 'video',
+    addEventListener: vi.fn((type: string, handler: any) => {
+      if (type === 'ended') endedHandler = handler;
+    }),
+    removeEventListener: vi.fn(() => { endedHandler = undefined; }),
+    emitEnded: () => endedHandler?.(new Event('ended')),
+  };
+}
+
+function stubDisplayMedia() {
+  const videoTrack = track();
+  const media = {
+    getTracks: () => [videoTrack],
+  } as unknown as MediaStream;
+
+  const getDisplayMedia = vi.fn(async () => media);
+  const mediaDevices = { getDisplayMedia } as unknown as MediaDevices;
+  const navigator = { mediaDevices } as unknown as Navigator;
+
+  return { navigator, getDisplayMedia, media, videoTrack };
+}
+
+function host(fn: () => UseDisplayMediaReturn) {
+  const scope = effectScope();
+  let result: UseDisplayMediaReturn;
+  scope.run(() => {
+    result = fn();
+  });
+  return { result: result!, scope };
+}
+
+describe(useDisplayMedia, () => {
+  it('reports unsupported when getDisplayMedia is missing', () => {
+    const { result, scope } = host(() => useDisplayMedia({ navigator: {} as Navigator }));
+
+    expect(result.isSupported.value).toBeFalsy();
+    expect(result.stream.value).toBeUndefined();
+    scope.stop();
+  });
+
+  it('handles the SSR path (no navigator) gracefully', async () => {
+    const { result, scope } = host(() => useDisplayMedia({ navigator: undefined }));
+
+    expect(result.isSupported.value).toBeFalsy();
+    await expect(result.start()).resolves.toBeUndefined();
+    expect(result.enabled.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('reports supported and starts a stream', async () => {
+    const { navigator, getDisplayMedia, media } = stubDisplayMedia();
+    const { result, scope } = host(() => useDisplayMedia({ navigator }));
+
+    expect(result.isSupported.value).toBeTruthy();
+
+    const returned = await result.start();
+    expect(returned).toBe(media);
+    expect(result.stream.value).toBe(media);
+    expect(result.enabled.value).toBeTruthy();
+    expect(getDisplayMedia).toHaveBeenCalledWith({ audio: false, video: true });
+    scope.stop();
+  });
+
+  it('passes custom audio/video constraints', async () => {
+    const { navigator, getDisplayMedia } = stubDisplayMedia();
+    const { result, scope } = host(() =>
+      useDisplayMedia({ navigator, audio: true, video: { frameRate: 30 } }));
+
+    await result.start();
+    expect(getDisplayMedia).toHaveBeenCalledWith({ audio: true, video: { frameRate: 30 } });
+    scope.stop();
+  });
+
+  it('stop() releases tracks and clears the stream', async () => {
+    const { navigator, videoTrack } = stubDisplayMedia();
+    const { result, scope } = host(() => useDisplayMedia({ navigator }));
+
+    await result.start();
+    result.stop();
+
+    expect(videoTrack.stop).toHaveBeenCalled();
+    expect(result.stream.value).toBeUndefined();
+    expect(result.enabled.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('registers the ended listener passively and stops on track end', async () => {
+    const { navigator, videoTrack } = stubDisplayMedia();
+    const { result, scope } = host(() => useDisplayMedia({ navigator }));
+
+    await result.start();
+    expect(videoTrack.addEventListener).toHaveBeenCalledWith(
+      'ended',
+      expect.any(Function),
+      { passive: true },
+    );
+
+    videoTrack.emitEnded();
+    expect(result.stream.value).toBeUndefined();
+    expect(result.enabled.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('toggling enabled starts and stops the stream', async () => {
+    const { navigator, getDisplayMedia, videoTrack } = stubDisplayMedia();
+    const { result, scope } = host(() => useDisplayMedia({ navigator }));
+
+    result.enabled.value = true;
+    await nextTick();
+    await vi.waitFor(() => expect(result.stream.value).toBeTruthy());
+    expect(getDisplayMedia).toHaveBeenCalledTimes(1);
+
+    result.enabled.value = false;
+    await nextTick();
+    expect(videoTrack.stop).toHaveBeenCalled();
+    expect(result.stream.value).toBeUndefined();
+    scope.stop();
+  });
+
+  it('starts immediately when enabled is true on init', async () => {
+    const { navigator, getDisplayMedia } = stubDisplayMedia();
+    const { result, scope } = host(() => useDisplayMedia({ navigator, enabled: true }));
+
+    await vi.waitFor(() => expect(getDisplayMedia).toHaveBeenCalled());
+    expect(result.enabled.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('does not re-request when a stream is already running', async () => {
+    const { navigator, getDisplayMedia } = stubDisplayMedia();
+    const { result, scope } = host(() => useDisplayMedia({ navigator }));
+
+    await result.start();
+    await result.start();
+    expect(getDisplayMedia).toHaveBeenCalledTimes(1);
+    scope.stop();
+  });
+
+  it('dedupes concurrent start() calls', async () => {
+    const { navigator, getDisplayMedia } = stubDisplayMedia();
+    const { result, scope } = host(() => useDisplayMedia({ navigator }));
+
+    await Promise.all([result.start(), result.start()]);
+    expect(getDisplayMedia).toHaveBeenCalledTimes(1);
+    scope.stop();
+  });
+
+  it('reports getDisplayMedia rejection via onError and stays disabled', async () => {
+    const onError = vi.fn();
+    const { navigator, getDisplayMedia } = stubDisplayMedia();
+    (getDisplayMedia as any).mockRejectedValueOnce(new Error('cancelled'));
+    const { result, scope } = host(() => useDisplayMedia({ navigator, onError }));
+
+    const returned = await result.start();
+    expect(returned).toBeUndefined();
+    expect(onError).toHaveBeenCalled();
+    expect(result.stream.value).toBeUndefined();
+    expect(result.enabled.value).toBeFalsy();
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/media/useDisplayMedia/index.ts b/vue/toolkit/src/composables/media/useDisplayMedia/index.ts
new file mode 100644
index 0000000..02444cc
--- /dev/null
+++ b/vue/toolkit/src/composables/media/useDisplayMedia/index.ts
@@ -0,0 +1,172 @@
+import { shallowRef, toValue, watch } from 'vue';
+import type { MaybeRefOrGetter, Ref, ShallowRef } from 'vue';
+import { noop } from '@robonen/stdlib';
+import { defaultNavigator } from '@/types';
+import type { ConfigurableNavigator } from '@/types';
+import { useSupported } from '@/composables/utilities/useSupported';
+import { useEventListener } from '@/composables/browser/useEventListener';
+
+export interface UseDisplayMediaOptions extends ConfigurableNavigator {
+  /**
+   * Whether the stream should be active. Toggling this reactively starts or
+   * stops the screen share.
+   *
+   * @default false
+   */
+  enabled?: MaybeRefOrGetter<boolean>;
+
+  /**
+   * Video media constraints for the captured display surface.
+   *
+   * @default true
+   */
+  video?: boolean | MediaTrackConstraints;
+
+  /**
+   * Audio media constraints for the captured display surface.
+   *
+   * @default false
+   */
+  audio?: boolean | MediaTrackConstraints;
+
+  /**
+   * Called when `getDisplayMedia` rejects (e.g. the user cancels the picker).
+   * Defaults to a no-op — we never log to the console.
+   *
+   * @default noop
+   */
+  onError?: (error: unknown) => void;
+}
+
+export interface UseDisplayMediaReturn {
+  /**
+   * Whether `navigator.mediaDevices.getDisplayMedia` is available.
+   */
+  isSupported: Readonly<Ref<boolean>>;
+
+  /**
+   * The active `MediaStream`, or `undefined` when not sharing.
+   */
+  stream: ShallowRef<MediaStream | undefined>;
+
+  /**
+   * Request the screen-share picker and start the stream. Resolves to the
+   * stream (or `undefined` when unsupported / cancelled). Concurrent calls are
+   * deduped and an already-running stream is returned as-is.
+   */
+  start: () => Promise<MediaStream | undefined>;
+
+  /**
+   * Stop every track and clear the stream.
+   */
+  stop: () => void;
+
+  /**
+   * Two-way switch mirroring the live state of the stream. Set it to `true` to
+   * start sharing and `false` to stop.
+   */
+  enabled: ShallowRef<boolean>;
+}
+
+/**
+ * @name useDisplayMedia
+ * @category Media
+ * @description Reactive `mediaDevices.getDisplayMedia` (screen share) streaming.
+ *
+ * @param {UseDisplayMediaOptions} [options={}] Options
+ * @returns {UseDisplayMediaReturn} `stream`, `start`, `stop`, `enabled` and `isSupported`
+ *
+ * @example
+ * const { stream, enabled, isSupported } = useDisplayMedia();
+ * videoEl.srcObject = stream.value ?? null;
+ * enabled.value = true; // prompts the screen-share picker
+ *
+ * @example
+ * const { start, stop } = useDisplayMedia({ audio: true });
+ * await start();
+ *
+ * @since 0.0.15
+ */
+export function useDisplayMedia(options: UseDisplayMediaOptions = {}): UseDisplayMediaReturn {
+  const {
+    navigator = defaultNavigator,
+    video = true,
+    audio = false,
+    onError = noop,
+  } = options;
+
+  const enabled = shallowRef(toValue(options.enabled ?? false));
+  const stream = shallowRef<MediaStream | undefined>();
+
+  const isSupported = useSupported(() =>
+    !!navigator && !!navigator.mediaDevices && !!navigator.mediaDevices.getDisplayMedia);
+
+  // Constraints never change for the lifetime of the composable, so build the
+  // object once rather than per start() call.
+  const constraints: MediaStreamConstraints = { audio, video };
+
+  // Dedupe overlapping start() calls — a single picker prompt is enough.
+  let startPromise: Promise<MediaStream | undefined> | undefined;
+
+  function release(): void {
+    if (!stream.value)
+      return;
+
+    stream.value.getTracks().forEach(track => track.stop());
+    stream.value = undefined;
+  }
+
+  async function open(): Promise<MediaStream | undefined> {
+    if (!isSupported.value || stream.value)
+      return stream.value;
+
+    if (startPromise)
+      return startPromise;
+
+    startPromise = navigator!.mediaDevices.getDisplayMedia(constraints)
+      .then((media) => {
+        stream.value = media;
+        // The user can stop sharing from the browser UI; mirror that here.
+        media.getTracks().forEach(track =>
+          useEventListener(track, 'ended', stop, { passive: true }));
+        return media;
+      })
+      .catch((error) => {
+        onError(error);
+        return undefined;
+      })
+      .finally(() => {
+        startPromise = undefined;
+      });
+
+    return startPromise;
+  }
+
+  function stop(): void {
+    release();
+    enabled.value = false;
+  }
+
+  async function start(): Promise<MediaStream | undefined> {
+    const media = await open();
+    if (media)
+      enabled.value = true;
+
+    return media;
+  }
+
+  watch(enabled, (value) => {
+    if (value)
+      void open();
+    else
+      release();
+  }, { immediate: true });
+
+  return {
+    isSupported,
+    stream,
+    start,
+    stop,
+    enabled,
+  };
+}
diff --git a/vue/toolkit/src/composables/media/useMediaControls/demo.vue b/vue/toolkit/src/composables/media/useMediaControls/demo.vue
new file mode 100644
index 0000000..fd464b4
--- /dev/null
+++ b/vue/toolkit/src/composables/media/useMediaControls/demo.vue
@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { computed, useTemplateRef } from 'vue';
+import { useMediaControls } from './index';
+
+const video = useTemplateRef<HTMLVideoElement>('video');
+
+const {
+  playing,
+  currentTime,
+  duration,
+  volume,
+  muted,
+  rate,
+  waiting,
+  buffered,
+  ended,
+  supportsPictureInPicture,
+  isPictureInPicture,
+  togglePictureInPicture,
+} = useMediaControls(video, {
+  src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBigBuckBunny.mp4',
+});
+
+function formatTime(seconds: number): string {
+  if (!Number.isFinite(seconds))
+    return '0:00';
+  const m = Math.floor(seconds / 60);
+  const s = Math.floor(seconds % 60);
+  return `${m}:${s.toString().padStart(2, '0')}`;
+}
+
+// Show buffered coverage as a percentage of the total duration.
+const bufferedPercent = computed(() => {
+  if (!duration.value)
+    return 0;
+  const end = buffered.value.length ? buffered.value[buffered.value.length - 1][1] : 0;
+  return Math.min(100, (end / duration.value) * 100);
+});
+
+const progressPercent = computed(() =>
+  duration.value ? (currentTime.value / duration.value) * 100 : 0);
+
+const rates = [0.5, 1, 1.5, 2];
+</script>
+
+<template>
+  <div class="w-full max-w-md flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <div class="relative aspect-video overflow-hidden rounded-lg border border-(--border) bg-black">
+        <video
+          ref="video"
+          playsinline
+          class="size-full object-contain"
+        />
+        <div
+          v-if="waiting"
+          class="absolute inset-0 flex items-center justify-center bg-black/30 text-sm text-white"
+        >
+          Buffering…
+        </div>
+      </div>
+
+      <!-- Scrub bar with a buffered underlay -->
+      <div class="flex flex-col gap-1.5">
+        <div class="relative h-1.5 overflow-hidden rounded-full bg-(--bg-inset)">
+          <div class="absolute inset-y-0 left-0 bg-(--fg-subtle)/30" :style="{ width: `${bufferedPercent}%` }" />
+          <div class="absolute inset-y-0 left-0 bg-(--accent) transition-[width] duration-150" :style="{ width: `${progressPercent}%` }" />
+        </div>
+        <input
+          v-model.number="currentTime"
+          type="range"
+          min="0"
+          :max="duration || 0"
+          step="0.1"
+          class="w-full accent-(--accent) cursor-pointer"
+          aria-label="Seek"
+        >
+        <div class="flex items-center justify-between font-mono text-xs tabular-nums text-(--fg-muted)">
+          <span>{{ formatTime(currentTime) }}</span>
+          <span>{{ formatTime(duration) }}</span>
+        </div>
+      </div>
+
+      <div class="flex flex-wrap items-center gap-2">
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+          @click="playing = !playing"
+        >
+          {{ playing ? 'Pause' : ended ? 'Replay' : 'Play' }}
+        </button>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="muted = !muted"
+        >
+          {{ muted ? 'Unmute' : 'Mute' }}
+        </button>
+        <button
+          v-if="supportsPictureInPicture"
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="togglePictureInPicture"
+        >
+          {{ isPictureInPicture ? 'Exit PiP' : 'Picture-in-Picture' }}
+        </button>
+      </div>
+
+      <div class="grid grid-cols-2 gap-4">
+        <div class="flex flex-col gap-1.5">
+          <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="vol">Volume</label>
+          <input
+            id="vol"
+            v-model.number="volume"
+            type="range"
+            min="0"
+            max="1"
+            step="0.05"
+            class="w-full accent-(--accent) cursor-pointer"
+          >
+        </div>
+        <div class="flex flex-col gap-1.5">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Speed</span>
+          <div class="flex gap-1">
+            <button
+              v-for="r in rates"
+              :key="r"
+              type="button"
+              class="flex-1 rounded-md border px-2 py-1 text-xs font-medium tabular-nums transition cursor-pointer"
+              :class="rate === r
+                ? 'border-(--accent) bg-(--accent-subtle) text-(--accent-text)'
+                : 'border-(--border) bg-(--bg-elevated) text-(--fg-muted) hover:bg-(--bg-inset)'"
+              @click="rate = r"
+            >
+              {{ r }}x
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Reactive controls over a real <code class="font-mono">&lt;video&gt;</code>: seek, volume, mute, playback rate, buffered ranges, and Picture-in-Picture.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/media/useMediaControls/index.test.ts b/vue/toolkit/src/composables/media/useMediaControls/index.test.ts
new file mode 100644
index 0000000..728cc86
--- /dev/null
+++ b/vue/toolkit/src/composables/media/useMediaControls/index.test.ts
@@ -0,0 +1,512 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, shallowRef } from 'vue';
+import type { UseMediaControlsReturn } from '.';
+import { useMediaControls } from '.';
+
+/**
+ * A minimal fake HTMLMediaElement backed by a real EventTarget so
+ * useEventListener can attach/dispatch, with the props the composable touches.
+ */
+class FakeMediaElement extends EventTarget {
+  currentTime = 0;
+  duration = 0;
+  volume = 1;
+  muted = false;
+  playbackRate = 1;
+  buffered = { length: 0, start: () => 0, end: () => 0 } as unknown as TimeRanges;
+  textTracks = makeTextTrackList();
+
+  play = vi.fn(() => Promise.resolve());
+  pause = vi.fn(() => {});
+  load = vi.fn(() => {});
+  requestPictureInPicture = vi.fn(() => Promise.resolve({} as PictureInPictureWindow));
+
+  // Source/track injection paths
+  private children: any[] = [];
+  appendChild = vi.fn((node: any) => {
+    this.children.push(node);
+    return node;
+  });
+
+  querySelectorAll = vi.fn((selector: string) => {
+    const tag = selector.toLowerCase();
+    return this.children.filter(c => c.tagName?.toLowerCase() === tag);
+  });
+
+  emit(type: string): void {
+    this.dispatchEvent(new Event(type));
+  }
+}
+
+function makeTextTrackList(modes: TextTrackMode[] = ['disabled', 'disabled']): TextTrackList {
+  const list = modes.map((mode, id) => ({
+    id,
+    label: `Track ${id}`,
+    language: 'en',
+    mode,
+    kind: 'subtitles' as TextTrackKind,
+    inBandMetadataTrackDispatchType: '',
+    cues: null,
+    activeCues: null,
+  }));
+  const target = new EventTarget();
+  return new Proxy(list, {
+    get(t, prop) {
+      if (prop === 'length')
+        return t.length;
+      if (prop === 'addEventListener' || prop === 'removeEventListener' || prop === 'dispatchEvent')
+        return (target as any)[prop].bind(target);
+      return (t as any)[prop];
+    },
+  }) as unknown as TextTrackList;
+}
+
+function makeDocument(supportsPip = true): Document {
+  const doc: any = {
+    createElement: vi.fn((tag: string) => {
+      const el: any = new EventTarget();
+      el.tagName = tag.toUpperCase();
+      el.setAttribute = vi.fn();
+      return el;
+    }),
+    exitPictureInPicture: vi.fn(() => Promise.resolve()),
+  };
+  if (supportsPip)
+    doc.pictureInPictureEnabled = false;
+  return doc as Document;
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe(useMediaControls, () => {
+  it('reports Picture-in-Picture support from the document', () => {
+    const el = new FakeMediaElement();
+    const scope = effectScope();
+    let controls: UseMediaControlsReturn;
+    scope.run(() => {
+      controls = useMediaControls(shallowRef(el as unknown as HTMLMediaElement), {
+        document: makeDocument(true),
+      });
+    });
+    expect(controls!.supportsPictureInPicture).toBeTruthy();
+    scope.stop();
+  });
+
+  it('does not report Picture-in-Picture support when the document lacks it', () => {
+    const el = new FakeMediaElement();
+    const scope = effectScope();
+    let controls: UseMediaControlsReturn;
+    scope.run(() => {
+      controls = useMediaControls(shallowRef(el as unknown as HTMLMediaElement), {
+        document: makeDocument(false),
+      });
+    });
+    expect(controls!.supportsPictureInPicture).toBeFalsy();
+    scope.stop();
+  });
+
+  it('is SSR-safe when no document is available', () => {
+    const el = new FakeMediaElement();
+    const scope = effectScope();
+    let controls: UseMediaControlsReturn;
+    scope.run(() => {
+      controls = useMediaControls(shallowRef(el as unknown as HTMLMediaElement), {
+        document: undefined,
+      });
+    });
+    expect(controls!.supportsPictureInPicture).toBeFalsy();
+    // Source injection is skipped without a document.
+    expect(el.load).not.toHaveBeenCalled();
+    scope.stop();
+  });
+
+  it('reflects timeupdate into currentTime without re-seeking', async () => {
+    const el = new FakeMediaElement();
+    const scope = effectScope();
+    let controls: UseMediaControlsReturn;
+    scope.run(() => {
+      controls = useMediaControls(shallowRef(el as unknown as HTMLMediaElement), {
+        document: makeDocument(),
+      });
+    });
+    await nextTick();
+
+    el.currentTime = 12.5;
+    el.emit('timeupdate');
+    await nextTick();
+
+    expect(controls!.currentTime.value).toBe(12.5);
+    scope.stop();
+  });
+
+  it('seeks the element when currentTime is written', async () => {
+    const el = new FakeMediaElement();
+    const scope = effectScope();
+    let controls: UseMediaControlsReturn;
+    scope.run(() => {
+      controls = useMediaControls(shallowRef(el as unknown as HTMLMediaElement), {
+        document: makeDocument(),
+      });
+    });
+    await nextTick();
+
+    controls!.currentTime.value = 42;
+    await nextTick();
+
+    expect(el.currentTime).toBe(42);
+    scope.stop();
+  });
+
+  it('tracks duration, buffered, seeking, ended, stalled, waiting', async () => {
+    const el = new FakeMediaElement();
+    const scope = effectScope();
+    let controls: UseMediaControlsReturn;
+    scope.run(() => {
+      controls = useMediaControls(shallowRef(el as unknown as HTMLMediaElement), {
+        document: makeDocument(),
+      });
+    });
+    await nextTick();
+
+    el.duration = 100;
+    el.emit('durationchange');
+    el.buffered = { length: 1, start: () => 0, end: () => 50 } as unknown as TimeRanges;
+    el.emit('progress');
+    el.emit('seeking');
+    el.emit('stalled');
+    el.emit('ended');
+    el.emit('waiting');
+    await nextTick();
+
+    expect(controls!.duration.value).toBe(100);
+    expect(controls!.buffered.value).toEqual([[0, 50]]);
+    expect(controls!.seeking.value).toBeTruthy();
+    expect(controls!.stalled.value).toBeTruthy();
+    expect(controls!.ended.value).toBeTruthy();
+    expect(controls!.waiting.value).toBeTruthy();
+
+    el.emit('seeked');
+    el.emit('loadeddata');
+    await nextTick();
+    expect(controls!.seeking.value).toBeFalsy();
+    expect(controls!.waiting.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('plays and pauses through the playing ref', async () => {
+    const el = new FakeMediaElement();
+    const scope = effectScope();
+    let controls: UseMediaControlsReturn;
+    scope.run(() => {
+      controls = useMediaControls(shallowRef(el as unknown as HTMLMediaElement), {
+        document: makeDocument(),
+      });
+    });
+    await nextTick();
+
+    controls!.playing.value = true;
+    await nextTick();
+    expect(el.play).toHaveBeenCalled();
+
+    controls!.playing.value = false;
+    await nextTick();
+    expect(el.pause).toHaveBeenCalled();
+    scope.stop();
+  });
+
+  it('reflects play/pause events into playing without re-calling play()', async () => {
+    const el = new FakeMediaElement();
+    const scope = effectScope();
+    let controls: UseMediaControlsReturn;
+    scope.run(() => {
+      controls = useMediaControls(shallowRef(el as unknown as HTMLMediaElement), {
+        document: makeDocument(),
+      });
+    });
+    await nextTick();
+
+    el.emit('play');
+    await nextTick();
+    expect(controls!.playing.value).toBeTruthy();
+    expect(el.play).not.toHaveBeenCalled();
+
+    el.emit('pause');
+    await nextTick();
+    expect(controls!.playing.value).toBeFalsy();
+    expect(el.pause).not.toHaveBeenCalled();
+    scope.stop();
+  });
+
+  it('surfaces playback errors via onPlaybackError and onError', async () => {
+    const el = new FakeMediaElement();
+    const boom = new Error('cannot play');
+    el.play = vi.fn(() => Promise.reject(boom));
+    const onError = vi.fn();
+    const onPlayback = vi.fn();
+
+    const scope = effectScope();
+    let controls: UseMediaControlsReturn;
+    scope.run(() => {
+      controls = useMediaControls(shallowRef(el as unknown as HTMLMediaElement), {
+        document: makeDocument(),
+        onError,
+      });
+    });
+    controls!.onPlaybackError(onPlayback);
+    await nextTick();
+
+    controls!.playing.value = true;
+    await nextTick();
+    await Promise.resolve();
+    await Promise.resolve();
+
+    expect(onPlayback).toHaveBeenCalledWith(boom);
+    expect(onError).toHaveBeenCalledWith(boom);
+    scope.stop();
+  });
+
+  it('pushes volume, muted and rate to the element', async () => {
+    const el = new FakeMediaElement();
+    const scope = effectScope();
+    let controls: UseMediaControlsReturn;
+    scope.run(() => {
+      controls = useMediaControls(shallowRef(el as unknown as HTMLMediaElement), {
+        document: makeDocument(),
+      });
+    });
+    await nextTick();
+
+    controls!.volume.value = 0.3;
+    controls!.muted.value = true;
+    controls!.rate.value = 1.5;
+    await nextTick();
+
+    expect(el.volume).toBe(0.3);
+    expect(el.muted).toBeTruthy();
+    expect(el.playbackRate).toBe(1.5);
+    // playbackRate alias is the same ref as rate
+    expect(controls!.playbackRate).toBe(controls!.rate);
+    scope.stop();
+  });
+
+  it('reads volume and muted back from a volumechange event', async () => {
+    const el = new FakeMediaElement();
+    const scope = effectScope();
+    let controls: UseMediaControlsReturn;
+    scope.run(() => {
+      controls = useMediaControls(shallowRef(el as unknown as HTMLMediaElement), {
+        document: makeDocument(),
+      });
+    });
+    await nextTick();
+
+    el.volume = 0.8;
+    el.muted = true;
+    el.emit('volumechange');
+    await nextTick();
+
+    expect(controls!.volume.value).toBe(0.8);
+    expect(controls!.muted.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('injects sources and loads the element', async () => {
+    const el = new FakeMediaElement();
+    const document = makeDocument();
+    const scope = effectScope();
+    scope.run(() => {
+      useMediaControls(shallowRef(el as unknown as HTMLMediaElement), {
+        document,
+        src: 'https://example.com/clip.mp4',
+      });
+    });
+    await nextTick();
+
+    expect(document.createElement).toHaveBeenCalledWith('source');
+    expect(el.appendChild).toHaveBeenCalled();
+    expect(el.load).toHaveBeenCalled();
+    scope.stop();
+  });
+
+  it('injects a list of sources', async () => {
+    const el = new FakeMediaElement();
+    const document = makeDocument();
+    const scope = effectScope();
+    scope.run(() => {
+      useMediaControls(shallowRef(el as unknown as HTMLMediaElement), {
+        document,
+        src: [
+          { src: 'a.webm', type: 'video/webm' },
+          { src: 'b.mp4', type: 'video/mp4' },
+        ],
+      });
+    });
+    await nextTick();
+
+    expect(document.createElement).toHaveBeenCalledTimes(2);
+    scope.stop();
+  });
+
+  it('injects text tracks and selects the default', async () => {
+    const el = new FakeMediaElement();
+    const document = makeDocument();
+    const scope = effectScope();
+    let controls: UseMediaControlsReturn;
+    scope.run(() => {
+      controls = useMediaControls(shallowRef(el as unknown as HTMLMediaElement), {
+        document,
+        tracks: [
+          { src: 'en.vtt', srcLang: 'en', label: 'English', kind: 'subtitles' },
+          { default: true, src: 'fr.vtt', srcLang: 'fr', label: 'French', kind: 'subtitles' },
+        ],
+      });
+    });
+    await nextTick();
+
+    expect(document.createElement).toHaveBeenCalledWith('track');
+    expect(controls!.selectedTrack.value).toBe(1);
+    scope.stop();
+  });
+
+  it('enables and disables text tracks', async () => {
+    const el = new FakeMediaElement();
+    const scope = effectScope();
+    let controls: UseMediaControlsReturn;
+    scope.run(() => {
+      controls = useMediaControls(shallowRef(el as unknown as HTMLMediaElement), {
+        document: makeDocument(),
+      });
+    });
+    await nextTick();
+
+    controls!.enableTrack(1);
+    expect(el.textTracks[1]!.mode).toBe('showing');
+    expect(el.textTracks[0]!.mode).toBe('disabled');
+    expect(controls!.selectedTrack.value).toBe(1);
+
+    controls!.disableTrack(1);
+    expect(el.textTracks[1]!.mode).toBe('disabled');
+    expect(controls!.selectedTrack.value).toBe(-1);
+
+    controls!.enableTrack(0, false);
+    expect(el.textTracks[0]!.mode).toBe('showing');
+
+    controls!.disableTrack();
+    expect(el.textTracks[0]!.mode).toBe('disabled');
+    expect(controls!.selectedTrack.value).toBe(-1);
+    scope.stop();
+  });
+
+  it('syncs tracks on addtrack/change/removetrack events', async () => {
+    const el = new FakeMediaElement();
+    const scope = effectScope();
+    let controls: UseMediaControlsReturn;
+    scope.run(() => {
+      controls = useMediaControls(shallowRef(el as unknown as HTMLMediaElement), {
+        document: makeDocument(),
+      });
+    });
+    await nextTick();
+
+    (el.textTracks as unknown as EventTarget).dispatchEvent(new Event('addtrack'));
+    await nextTick();
+
+    expect(controls!.tracks.value).toHaveLength(2);
+    expect(controls!.tracks.value[0]).toMatchObject({ id: 0, label: 'Track 0', kind: 'subtitles' });
+    scope.stop();
+  });
+
+  it('toggles Picture-in-Picture and reflects enter/leave events', async () => {
+    const el = new FakeMediaElement();
+    const document = makeDocument(true);
+    const scope = effectScope();
+    let controls: UseMediaControlsReturn;
+    scope.run(() => {
+      controls = useMediaControls(shallowRef(el as unknown as HTMLMediaElement), {
+        document,
+      });
+    });
+    await nextTick();
+
+    await controls!.togglePictureInPicture();
+    expect(el.requestPictureInPicture).toHaveBeenCalled();
+
+    el.emit('enterpictureinpicture');
+    await nextTick();
+    expect(controls!.isPictureInPicture.value).toBeTruthy();
+
+    await controls!.togglePictureInPicture();
+    expect(document.exitPictureInPicture).toHaveBeenCalled();
+
+    el.emit('leavepictureinpicture');
+    await nextTick();
+    expect(controls!.isPictureInPicture.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('resolves togglePictureInPicture to a no-op when unsupported', async () => {
+    const el = new FakeMediaElement();
+    const scope = effectScope();
+    let controls: UseMediaControlsReturn;
+    scope.run(() => {
+      controls = useMediaControls(shallowRef(el as unknown as HTMLMediaElement), {
+        document: makeDocument(false),
+      });
+    });
+    await nextTick();
+
+    await expect(controls!.togglePictureInPicture()).resolves.toBeUndefined();
+    expect(el.requestPictureInPicture).not.toHaveBeenCalled();
+    scope.stop();
+  });
+
+  it('emits onSourceError when a source errors', async () => {
+    const el = new FakeMediaElement();
+    const created: any[] = [];
+    const document: any = {
+      createElement: vi.fn((tag: string) => {
+        const node = new EventTarget() as any;
+        node.tagName = tag.toUpperCase();
+        node.setAttribute = vi.fn();
+        created.push(node);
+        return node;
+      }),
+      exitPictureInPicture: vi.fn(() => Promise.resolve()),
+      pictureInPictureEnabled: false,
+    };
+    const onSource = vi.fn();
+    const scope = effectScope();
+    let controls: UseMediaControlsReturn;
+    scope.run(() => {
+      controls = useMediaControls(shallowRef(el as unknown as HTMLMediaElement), {
+        document: document as Document,
+        src: 'broken.mp4',
+      });
+    });
+    controls!.onSourceError(onSource);
+    await nextTick();
+
+    created[0].dispatchEvent(new Event('error'));
+    expect(onSource).toHaveBeenCalled();
+    scope.stop();
+  });
+
+  it('does nothing when target is null', async () => {
+    const scope = effectScope();
+    let controls: UseMediaControlsReturn;
+    scope.run(() => {
+      controls = useMediaControls(shallowRef(null), {
+        document: makeDocument(),
+      });
+    });
+    await nextTick();
+
+    expect(controls!.duration.value).toBe(0);
+    expect(() => controls!.disableTrack()).not.toThrow();
+    expect(() => controls!.enableTrack(0)).not.toThrow();
+    await expect(controls!.togglePictureInPicture()).resolves.toBeUndefined();
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/media/useMediaControls/index.ts b/vue/toolkit/src/composables/media/useMediaControls/index.ts
new file mode 100644
index 0000000..f023bad
--- /dev/null
+++ b/vue/toolkit/src/composables/media/useMediaControls/index.ts
@@ -0,0 +1,622 @@
+import { shallowRef, toValue, watch, watchEffect } from 'vue';
+import type { MaybeRefOrGetter, ShallowRef } from 'vue';
+import { isArray, isString, noop } from '@robonen/stdlib';
+import { defaultDocument } from '@/types';
+import type { ConfigurableDocument } from '@/types';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import { unrefElement } from '@/composables/component/unrefElement';
+import type { MaybeComputedElementRef } from '@/composables/component/unrefElement';
+import { watchIgnorable } from '@/composables/watch/watchIgnorable';
+
+/**
+ * A media `<source>` descriptor injected as a child `<source>` element.
+ *
+ * Many of these definitions mirror MDN's HTMLMediaElement documentation.
+ */
+export interface UseMediaSource {
+  /**
+   * The source url for the media
+   */
+  src: string;
+
+  /**
+   * The media codec type
+   */
+  type?: string;
+
+  /**
+   * Media query for the resource's intended media
+   */
+  media?: string;
+}
+
+/**
+ * A text track `<track>` descriptor injected as a child `<track>` element.
+ */
+export interface UseMediaTextTrackSource {
+  /**
+   * Mark the track as enabled unless the user's preferences indicate another is preferred
+   */
+  default?: boolean;
+
+  /**
+   * How the text track is meant to be used. Defaults to `subtitles` when omitted.
+   */
+  kind: TextTrackKind;
+
+  /**
+   * A user-readable title used by the browser when listing tracks
+   */
+  label: string;
+
+  /**
+   * Address of the track (`.vtt` file). Must be same-origin as the document.
+   */
+  src: string;
+
+  /**
+   * Language of the track text data. A valid BCP 47 language tag.
+   */
+  srcLang: string;
+}
+
+/**
+ * A reactive snapshot of a single `TextTrack`.
+ */
+export interface UseMediaTextTrack {
+  /**
+   * The index of the text track within the element's `textTracks`
+   */
+  id: number;
+
+  /**
+   * The text track label
+   */
+  label: string;
+
+  /**
+   * Language of the track text data (BCP 47)
+   */
+  language: string;
+
+  /**
+   * The display mode of the text track: `disabled`, `hidden`, or `showing`
+   */
+  mode: TextTrackMode;
+
+  /**
+   * How the text track is meant to be used
+   */
+  kind: TextTrackKind;
+
+  /**
+   * The track's in-band metadata track dispatch type
+   */
+  inBandMetadataTrackDispatchType: string;
+
+  /**
+   * A list of text track cues
+   */
+  cues: TextTrackCueList | null;
+
+  /**
+   * A list of active text track cues
+   */
+  activeCues: TextTrackCueList | null;
+}
+
+/**
+ * Subscribe to a media event hook; returns an unsubscribe handle.
+ */
+export type MediaEventHookOn<T = void> = (callback: (param: T) => void) => { off: () => void };
+
+export interface UseMediaControlsOptions extends ConfigurableDocument {
+  /**
+   * The media source(s). A url string, a `UseMediaSource`, or a list of them.
+   * When provided, matching `<source>` children are injected and the element is reloaded.
+   */
+  src?: MaybeRefOrGetter<string | UseMediaSource | UseMediaSource[]>;
+
+  /**
+   * Text tracks to inject as `<track>` children
+   */
+  tracks?: MaybeRefOrGetter<UseMediaTextTrackSource[]>;
+
+  /**
+   * Error handler invoked when `play()` or `exitPictureInPicture()` rejects.
+   * Defaults to a no-op (errors are also surfaced via `onPlaybackError`).
+   *
+   * @default noop
+   */
+  onError?: (error: unknown) => void;
+}
+
+export interface UseMediaControlsReturn {
+  /**
+   * Current playback position in seconds. Writing seeks the media.
+   */
+  currentTime: ShallowRef<number>;
+
+  /**
+   * Total media duration in seconds (read-only mirror)
+   */
+  duration: ShallowRef<number>;
+
+  /**
+   * Whether the media is buffering and waiting for more data
+   */
+  waiting: ShallowRef<boolean>;
+
+  /**
+   * Whether a seek operation is in progress
+   */
+  seeking: ShallowRef<boolean>;
+
+  /**
+   * Whether playback has reached the end of the media
+   */
+  ended: ShallowRef<boolean>;
+
+  /**
+   * Whether the browser is trying to fetch data but it is not forthcoming
+   */
+  stalled: ShallowRef<boolean>;
+
+  /**
+   * Buffered time ranges as `[start, end]` second pairs
+   */
+  buffered: ShallowRef<Array<[number, number]>>;
+
+  /**
+   * Whether the media is currently playing. Writing toggles play/pause.
+   */
+  playing: ShallowRef<boolean>;
+
+  /**
+   * Playback rate (`1` is normal speed). Writing sets `playbackRate`.
+   */
+  rate: ShallowRef<number>;
+
+  /**
+   * Alias of `rate` for API parity. Writing sets `playbackRate`.
+   */
+  playbackRate: ShallowRef<number>;
+
+  /**
+   * Audio volume in the range `[0, 1]`. Writing sets the element volume.
+   */
+  volume: ShallowRef<number>;
+
+  /**
+   * Whether the media is muted. Writing mutes/unmutes the element.
+   */
+  muted: ShallowRef<boolean>;
+
+  /**
+   * Reactive snapshot of the element's text tracks
+   */
+  tracks: ShallowRef<UseMediaTextTrack[]>;
+
+  /**
+   * The id of the currently selected (`showing`) track, or `-1` when none
+   */
+  selectedTrack: ShallowRef<number>;
+
+  /**
+   * Enable a track (set to `showing`), optionally disabling all others first.
+   *
+   * @param track The track or its id to enable
+   * @param disableTracks Disable all other tracks first (default `true`)
+   */
+  enableTrack: (track: number | UseMediaTextTrack, disableTracks?: boolean) => void;
+
+  /**
+   * Disable a track. With no argument, disables every track.
+   *
+   * @param track The track or its id to disable
+   */
+  disableTrack: (track?: number | UseMediaTextTrack) => void;
+
+  /**
+   * Whether the Picture-in-Picture API is available
+   */
+  supportsPictureInPicture: boolean;
+
+  /**
+   * Toggle Picture-in-Picture for a `<video>` element
+   */
+  togglePictureInPicture: () => Promise<PictureInPictureWindow | void>;
+
+  /**
+   * Whether the element is currently in Picture-in-Picture mode
+   */
+  isPictureInPicture: ShallowRef<boolean>;
+
+  /**
+   * Register a callback fired when a `<source>` element errors
+   */
+  onSourceError: MediaEventHookOn<Event>;
+
+  /**
+   * Register a callback fired when playback errors (e.g. `play()` rejects)
+   */
+  onPlaybackError: MediaEventHookOn<unknown>;
+}
+
+interface MediaEventHook<T> {
+  on: MediaEventHookOn<T>;
+  trigger: (param: T) => void;
+}
+
+function createEventHook<T = void>(): MediaEventHook<T> {
+  const callbacks = new Set<(param: T) => void>();
+
+  const on: MediaEventHookOn<T> = (callback) => {
+    callbacks.add(callback);
+    return {
+      off: () => {
+        callbacks.delete(callback);
+      },
+    };
+  };
+
+  const trigger = (param: T): void => {
+    callbacks.forEach(cb => cb(param));
+  };
+
+  return { on, trigger };
+}
+
+/**
+ * Convert a `TimeRanges` object to an array of `[start, end]` pairs.
+ */
+function timeRangeToArray(timeRanges: TimeRanges): Array<[number, number]> {
+  const ranges: Array<[number, number]> = [];
+
+  for (let i = 0; i < timeRanges.length; ++i)
+    ranges.push([timeRanges.start(i), timeRanges.end(i)]);
+
+  return ranges;
+}
+
+/**
+ * Convert a `TextTrackList` to an array of `UseMediaTextTrack`.
+ */
+function tracksToArray(tracks: TextTrackList): UseMediaTextTrack[] {
+  return Array.from(tracks).map(
+    ({ label, kind, language, mode, activeCues, cues, inBandMetadataTrackDispatchType }, id) => ({
+      id,
+      label,
+      kind,
+      language,
+      mode,
+      activeCues,
+      cues,
+      inBandMetadataTrackDispatchType,
+    }),
+  );
+}
+
+const LISTENER_OPTIONS = { passive: true } as const;
+
+/**
+ * @name useMediaControls
+ * @category Media
+ * @description Reactive controls and state for an `<audio>`/`<video>` element:
+ * play/pause, seeking, duration, buffered ranges, volume, mute, rate, text tracks,
+ * and Picture-in-Picture. Source and track injection are handled for you, and all
+ * DOM listeners attach passively with automatic cleanup. SSR-safe.
+ *
+ * @param {MaybeComputedElementRef<HTMLMediaElement | null | undefined>} target The media element (reactive ref, getter, or component instance)
+ * @param {UseMediaControlsOptions} [options={}] Source/track configuration and a custom `document`
+ * @returns {UseMediaControlsReturn} Reactive media state plus track and Picture-in-Picture controls
+ *
+ * @example
+ * const video = useTemplateRef<HTMLVideoElement>('video');
+ * const { playing, currentTime, duration, volume } = useMediaControls(video, {
+ *   src: 'https://example.com/clip.mp4',
+ * });
+ * playing.value = true; // start playback
+ *
+ * @example
+ * const { tracks, enableTrack, togglePictureInPicture } = useMediaControls(video, {
+ *   src: 'video.mp4',
+ *   tracks: [{ default: true, src: 'en.vtt', srcLang: 'en', label: 'English', kind: 'subtitles' }],
+ * });
+ *
+ * @since 0.0.15
+ */
+export function useMediaControls(
+  target: MaybeComputedElementRef<HTMLMediaElement | null | undefined>,
+  options: UseMediaControlsOptions = {},
+): UseMediaControlsReturn {
+  const {
+    document = defaultDocument,
+    onError = noop,
+  } = options;
+
+  const resolve = (): HTMLMediaElement | undefined =>
+    unrefElement(target) as HTMLMediaElement | undefined;
+
+  const currentTime = shallowRef(0);
+  const duration = shallowRef(0);
+  const seeking = shallowRef(false);
+  const volume = shallowRef(1);
+  const waiting = shallowRef(false);
+  const ended = shallowRef(false);
+  const playing = shallowRef(false);
+  const rate = shallowRef(1);
+  const stalled = shallowRef(false);
+  const buffered = shallowRef<Array<[number, number]>>([]);
+  const tracks = shallowRef<UseMediaTextTrack[]>([]);
+  const selectedTrack = shallowRef<number>(-1);
+  const isPictureInPicture = shallowRef(false);
+  const muted = shallowRef(false);
+
+  const supportsPictureInPicture = Boolean(document && 'pictureInPictureEnabled' in document);
+
+  const sourceErrorEvent = createEventHook<Event>();
+  const playbackErrorEvent = createEventHook<unknown>();
+
+  const disableTrack = (track?: number | UseMediaTextTrack): void => {
+    const el = resolve();
+    if (!el)
+      return;
+
+    if (track !== undefined) {
+      const id = typeof track === 'number' ? track : track.id;
+      const textTrack = el.textTracks[id];
+      if (textTrack)
+        textTrack.mode = 'disabled';
+    }
+    else {
+      for (const textTrack of el.textTracks)
+        textTrack.mode = 'disabled';
+    }
+
+    selectedTrack.value = -1;
+  };
+
+  const enableTrack = (track: number | UseMediaTextTrack, disableTracks = true): void => {
+    const el = resolve();
+    if (!el)
+      return;
+
+    const id = typeof track === 'number' ? track : track.id;
+
+    if (disableTracks)
+      disableTrack();
+
+    const textTrack = el.textTracks[id];
+    if (textTrack)
+      textTrack.mode = 'showing';
+    selectedTrack.value = id;
+  };
+
+  const togglePictureInPicture = (): Promise<PictureInPictureWindow | void> => {
+    const el = resolve() as HTMLVideoElement | undefined;
+
+    if (!el || !supportsPictureInPicture)
+      return Promise.resolve();
+
+    return isPictureInPicture.value
+      ? document!.exitPictureInPicture()
+      : el.requestPictureInPicture();
+  };
+
+  // Inject <source> children and (re)load whenever the resolved element or src changes.
+  watchEffect(() => {
+    if (!document)
+      return;
+
+    const el = resolve();
+    const src = toValue(options.src);
+
+    if (!el || !src)
+      return;
+
+    let sources: UseMediaSource[];
+    if (isString(src))
+      sources = [{ src }];
+    else if (isArray(src))
+      sources = src;
+    else
+      sources = [src];
+
+    el.querySelectorAll('source').forEach(node => node.remove());
+
+    for (const { src, type, media } of sources) {
+      const source = document.createElement('source');
+      source.setAttribute('src', src);
+      source.setAttribute('type', type ?? '');
+      source.setAttribute('media', media ?? '');
+      useEventListener(source, 'error', sourceErrorEvent.trigger, LISTENER_OPTIONS);
+      el.appendChild(source);
+    }
+
+    el.load();
+  });
+
+  // Inject <track> children whenever the resolved element or tracks change.
+  watchEffect(() => {
+    if (!document)
+      return;
+
+    const el = resolve();
+    const textTracks = toValue(options.tracks);
+
+    if (!el || !textTracks || !textTracks.length)
+      return;
+
+    // The Media API can add but not remove text tracks, so recreate via the HTML API.
+    el.querySelectorAll('track').forEach(node => node.remove());
+
+    textTracks.forEach(({ default: isDefault, kind, label, src, srcLang }, i) => {
+      const track = document.createElement('track');
+      track.default = isDefault ?? false;
+      track.kind = kind;
+      track.label = label;
+      track.src = src;
+      track.srclang = srcLang;
+
+      if (track.default)
+        selectedTrack.value = i;
+
+      el.appendChild(track);
+    });
+  });
+
+  // Push volume/muted/rate to the element, also when the element itself changes.
+  watch([resolve, volume], () => {
+    const el = resolve();
+    if (el)
+      el.volume = volume.value;
+  });
+
+  watch([resolve, muted], () => {
+    const el = resolve();
+    if (el)
+      el.muted = muted.value;
+  });
+
+  watch([resolve, rate], () => {
+    const el = resolve();
+    if (el)
+      el.playbackRate = rate.value;
+  });
+
+  // Ignorable so the timeupdate-driven write does not re-seek the media.
+  const { ignoreUpdates: ignoreCurrentTimeUpdates } = watchIgnorable(currentTime, (time) => {
+    const el = resolve();
+    if (el)
+      el.currentTime = time;
+  });
+
+  // Ignorable so play/pause events do not re-trigger play()/pause().
+  const { ignoreUpdates: ignorePlayingUpdates } = watchIgnorable(playing, (isPlaying) => {
+    const el = resolve();
+    if (!el)
+      return;
+
+    if (isPlaying) {
+      el.play().catch((error) => {
+        playbackErrorEvent.trigger(error);
+        onError(error);
+      });
+    }
+    else {
+      el.pause();
+    }
+  });
+
+  const onTimeUpdate = (): void => {
+    ignoreCurrentTimeUpdates(() => {
+      currentTime.value = resolve()!.currentTime;
+    });
+  };
+
+  const onDurationChange = (): void => {
+    duration.value = resolve()!.duration;
+  };
+
+  const onProgress = (): void => {
+    buffered.value = timeRangeToArray(resolve()!.buffered);
+  };
+
+  const onWaiting = (): void => {
+    waiting.value = true;
+    ignorePlayingUpdates(() => {
+      playing.value = false;
+    });
+  };
+
+  const onPlaying = (): void => {
+    waiting.value = false;
+    ended.value = false;
+    ignorePlayingUpdates(() => {
+      playing.value = true;
+    });
+  };
+
+  const onRateChange = (): void => {
+    rate.value = resolve()!.playbackRate;
+  };
+
+  const onPause = (): void => {
+    ignorePlayingUpdates(() => {
+      playing.value = false;
+    });
+  };
+
+  const onPlay = (): void => {
+    ignorePlayingUpdates(() => {
+      playing.value = true;
+    });
+  };
+
+  const onVolumeChange = (): void => {
+    const el = resolve();
+    if (!el)
+      return;
+
+    volume.value = el.volume;
+    muted.value = el.muted;
+  };
+
+  const setSeeking = (value: boolean) => (): void => {
+    seeking.value = value;
+  };
+
+  useEventListener(target, 'timeupdate', onTimeUpdate, LISTENER_OPTIONS);
+  useEventListener(target, 'durationchange', onDurationChange, LISTENER_OPTIONS);
+  useEventListener(target, 'progress', onProgress, LISTENER_OPTIONS);
+  useEventListener(target, 'seeking', setSeeking(true), LISTENER_OPTIONS);
+  useEventListener(target, 'seeked', setSeeking(false), LISTENER_OPTIONS);
+  useEventListener(target, ['waiting', 'loadstart'], onWaiting, LISTENER_OPTIONS);
+  useEventListener(target, 'loadeddata', () => (waiting.value = false), LISTENER_OPTIONS);
+  useEventListener(target, 'playing', onPlaying, LISTENER_OPTIONS);
+  useEventListener(target, 'ratechange', onRateChange, LISTENER_OPTIONS);
+  useEventListener(target, 'stalled', () => (stalled.value = true), LISTENER_OPTIONS);
+  useEventListener(target, 'ended', () => (ended.value = true), LISTENER_OPTIONS);
+  useEventListener(target, 'pause', onPause, LISTENER_OPTIONS);
+  useEventListener(target, 'play', onPlay, LISTENER_OPTIONS);
+  useEventListener(target, 'enterpictureinpicture', () => (isPictureInPicture.value = true), LISTENER_OPTIONS);
+  useEventListener(target, 'leavepictureinpicture', () => (isPictureInPicture.value = false), LISTENER_OPTIONS);
+  useEventListener(target, 'volumechange', onVolumeChange, LISTENER_OPTIONS);
+
+  // The text-track list lives on a nested object; attach its listeners reactively
+  // via a getter so they re-bind when the element changes and auto-clean on dispose.
+  const syncTracks = (): void => {
+    const el = resolve();
+    if (el)
+      tracks.value = tracksToArray(el.textTracks);
+  };
+  const trackListTarget = (): TextTrackList | undefined => resolve()?.textTracks;
+  useEventListener(trackListTarget, 'addtrack', syncTracks, LISTENER_OPTIONS);
+  useEventListener(trackListTarget, 'removetrack', syncTracks, LISTENER_OPTIONS);
+  useEventListener(trackListTarget, 'change', syncTracks, LISTENER_OPTIONS);
+
+  return {
+    currentTime,
+    duration,
+    waiting,
+    seeking,
+    ended,
+    stalled,
+    buffered,
+    playing,
+    rate,
+    playbackRate: rate,
+    volume,
+    muted,
+    tracks,
+    selectedTrack,
+    enableTrack,
+    disableTrack,
+    supportsPictureInPicture,
+    togglePictureInPicture,
+    isPictureInPicture,
+    onSourceError: sourceErrorEvent.on,
+    onPlaybackError: playbackErrorEvent.on,
+  };
+}
diff --git a/vue/toolkit/src/composables/media/useMemory/demo.vue b/vue/toolkit/src/composables/media/useMemory/demo.vue
new file mode 100644
index 0000000..30dd4a2
--- /dev/null
+++ b/vue/toolkit/src/composables/media/useMemory/demo.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { computed, ref, shallowRef } from 'vue';
+import { useMemory } from './index';
+
+const { isSupported, memory } = useMemory({ interval: 1000 });
+
+function formatBytes(bytes: number): string {
+  const mb = bytes / (1024 * 1024);
+  return mb >= 1024 ? `${(mb / 1024).toFixed(2)} GB` : `${mb.toFixed(1)} MB`;
+}
+
+const usedPercent = computed(() => {
+  if (!memory.value)
+    return 0;
+  return (memory.value.usedJSHeapSize / memory.value.jsHeapSizeLimit) * 100;
+});
+
+const allocatedPercent = computed(() => {
+  if (!memory.value)
+    return 0;
+  return (memory.value.totalJSHeapSize / memory.value.jsHeapSizeLimit) * 100;
+});
+
+// A button to deliberately allocate memory so the gauge visibly moves.
+const ballast = shallowRef<number[][]>([]);
+const allocations = ref(0);
+
+function allocate(): void {
+  // ~8 MB of doubles per click.
+  ballast.value = [...ballast.value, Array.from({ length: 1_000_000 }, (_, i) => i)];
+  allocations.value++;
+}
+
+function release(): void {
+  ballast.value = [];
+  allocations.value = 0;
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div v-if="!isSupported" class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-600 dark:text-amber-400">
+      <code class="font-mono">performance.memory</code> is not available in this browser (Chromium only).
+    </div>
+
+    <template v-else>
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+        <div class="flex items-center justify-between">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">JS heap</span>
+          <span class="font-mono text-xs tabular-nums text-(--fg-muted)">{{ usedPercent.toFixed(1) }}%</span>
+        </div>
+
+        <div class="flex items-baseline gap-2">
+          <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">
+            {{ memory ? formatBytes(memory.usedJSHeapSize) : '—' }}
+          </span>
+          <span class="text-sm text-(--fg-subtle)">used</span>
+        </div>
+
+        <!-- Stacked gauge: allocated under used, both relative to the heap limit -->
+        <div class="relative h-2.5 overflow-hidden rounded-full bg-(--bg-inset)">
+          <div class="absolute inset-y-0 left-0 bg-(--fg-subtle)/30 transition-[width] duration-500" :style="{ width: `${allocatedPercent}%` }" />
+          <div class="absolute inset-y-0 left-0 bg-(--accent) transition-[width] duration-500" :style="{ width: `${usedPercent}%` }" />
+        </div>
+
+        <div class="grid grid-cols-3 gap-2">
+          <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
+            <div class="font-mono text-sm font-bold tabular-nums text-(--fg)">{{ memory ? formatBytes(memory.usedJSHeapSize) : '—' }}</div>
+            <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">used</div>
+          </div>
+          <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
+            <div class="font-mono text-sm font-bold tabular-nums text-(--fg)">{{ memory ? formatBytes(memory.totalJSHeapSize) : '—' }}</div>
+            <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">total</div>
+          </div>
+          <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
+            <div class="font-mono text-sm font-bold tabular-nums text-(--fg)">{{ memory ? formatBytes(memory.jsHeapSizeLimit) : '—' }}</div>
+            <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">limit</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <button
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+          @click="allocate"
+        >
+          Allocate ~8 MB
+        </button>
+        <button
+          type="button"
+          :disabled="allocations === 0"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          @click="release"
+        >
+          Release
+        </button>
+      </div>
+
+      <p class="text-xs text-(--fg-subtle)">
+        Sampled every second. Allocate buffers to watch usage climb; releasing lets the next GC reclaim it.
+      </p>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/media/useMemory/index.test.ts b/vue/toolkit/src/composables/media/useMemory/index.test.ts
new file mode 100644
index 0000000..4a5a0a1
--- /dev/null
+++ b/vue/toolkit/src/composables/media/useMemory/index.test.ts
@@ -0,0 +1,143 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope } from 'vue';
+import { useMemory } from '.';
+import type { MemoryInfo } from '.';
+
+function makeMemory(used: number): MemoryInfo {
+  return {
+    jsHeapSizeLimit: 4096,
+    totalJSHeapSize: 2048,
+    usedJSHeapSize: used,
+    [Symbol.toStringTag]: 'MemoryInfo',
+  };
+}
+
+function makeWindow(memory?: MemoryInfo): Window {
+  const performance = memory === undefined
+    ? ({} as Performance)
+    : ({ memory } as unknown as Performance);
+
+  return { performance } as unknown as Window;
+}
+
+describe(useMemory, () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.useRealTimers();
+  });
+
+  it('reports supported and reads the first sample immediately', () => {
+    const info = makeMemory(100);
+    const win = makeWindow(info);
+
+    const scope = effectScope();
+    let result: ReturnType<typeof useMemory>;
+    scope.run(() => {
+      result = useMemory({ window: win });
+    });
+
+    expect(result!.isSupported.value).toBeTruthy();
+    expect(result!.memory.value).toBe(info);
+    expect(result!.memory.value?.usedJSHeapSize).toBe(100);
+    scope.stop();
+  });
+
+  it('polls on the configured interval', () => {
+    let current = makeMemory(1);
+    const win = {
+      get performance() {
+        return { memory: current } as unknown as Performance;
+      },
+    } as unknown as Window;
+
+    const scope = effectScope();
+    let result: ReturnType<typeof useMemory>;
+    scope.run(() => {
+      result = useMemory({ window: win, interval: 500 });
+    });
+
+    expect(result!.memory.value?.usedJSHeapSize).toBe(1);
+
+    current = makeMemory(2);
+    vi.advanceTimersByTime(500);
+    expect(result!.memory.value?.usedJSHeapSize).toBe(2);
+
+    current = makeMemory(3);
+    vi.advanceTimersByTime(500);
+    expect(result!.memory.value?.usedJSHeapSize).toBe(3);
+
+    scope.stop();
+  });
+
+  it('does not poll when immediate is false', () => {
+    const info = makeMemory(42);
+    const win = makeWindow(info);
+
+    const scope = effectScope();
+    let result: ReturnType<typeof useMemory>;
+    scope.run(() => {
+      result = useMemory({ window: win, immediate: false });
+    });
+
+    expect(result!.memory.value).toBeUndefined();
+
+    vi.advanceTimersByTime(5000);
+    expect(result!.memory.value).toBeUndefined();
+    scope.stop();
+  });
+
+  it('stops polling when the scope is disposed', () => {
+    let current = makeMemory(1);
+    const win = {
+      get performance() {
+        return { memory: current } as unknown as Performance;
+      },
+    } as unknown as Window;
+
+    const scope = effectScope();
+    let result: ReturnType<typeof useMemory>;
+    scope.run(() => {
+      result = useMemory({ window: win });
+    });
+
+    expect(result!.memory.value?.usedJSHeapSize).toBe(1);
+    scope.stop();
+
+    current = makeMemory(99);
+    vi.advanceTimersByTime(5000);
+    expect(result!.memory.value?.usedJSHeapSize).toBe(1);
+  });
+
+  it('reports unsupported when performance.memory is missing', () => {
+    const win = makeWindow(undefined);
+
+    const scope = effectScope();
+    let result: ReturnType<typeof useMemory>;
+    scope.run(() => {
+      result = useMemory({ window: win });
+    });
+
+    expect(result!.isSupported.value).toBeFalsy();
+    expect(result!.memory.value).toBeUndefined();
+
+    vi.advanceTimersByTime(5000);
+    expect(result!.memory.value).toBeUndefined();
+    scope.stop();
+  });
+
+  it('is SSR-safe when window is undefined', () => {
+    const scope = effectScope();
+    let result: ReturnType<typeof useMemory>;
+    scope.run(() => {
+      result = useMemory({ window: undefined });
+    });
+
+    expect(result!.isSupported.value).toBeFalsy();
+    expect(result!.memory.value).toBeUndefined();
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/media/useMemory/index.ts b/vue/toolkit/src/composables/media/useMemory/index.ts
new file mode 100644
index 0000000..880cdbb
--- /dev/null
+++ b/vue/toolkit/src/composables/media/useMemory/index.ts
@@ -0,0 +1,115 @@
+import { shallowRef } from 'vue';
+import type { ComputedRef, ShallowRef } from 'vue';
+import { defaultWindow } from '@/types';
+import type { ConfigurableWindow } from '@/types';
+import { useSupported } from '@/composables/utilities/useSupported';
+import { useIntervalFn } from '@/composables/animation/useIntervalFn';
+
+/**
+ * Non-standard `performance.memory` heap statistics.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Performance/memory
+ */
+export interface MemoryInfo {
+  /**
+   * The maximum size of the heap, in bytes, that is available to the context.
+   */
+  readonly jsHeapSizeLimit: number;
+
+  /**
+   * The total allocated heap size, in bytes.
+   */
+  readonly totalJSHeapSize: number;
+
+  /**
+   * The currently active segment of JS heap, in bytes.
+   */
+  readonly usedJSHeapSize: number;
+
+  [Symbol.toStringTag]: 'MemoryInfo';
+}
+
+type PerformanceWithMemory
+  = Performance & {
+    memory: MemoryInfo;
+  };
+
+export interface UseMemoryOptions extends ConfigurableWindow {
+  /**
+   * Polling interval in milliseconds.
+   *
+   * @default 1000
+   */
+  interval?: number;
+
+  /**
+   * Start polling immediately and read the first sample synchronously.
+   *
+   * @default true
+   */
+  immediate?: boolean;
+}
+
+export interface UseMemoryReturn {
+  /**
+   * Whether `performance.memory` is available in the current environment.
+   */
+  isSupported: ComputedRef<boolean>;
+
+  /**
+   * The latest `performance.memory` snapshot, or `undefined` until the first
+   * sample is read (or when unsupported).
+   */
+  memory: ShallowRef<MemoryInfo | undefined>;
+}
+
+/**
+ * @name useMemory
+ * @category Media
+ * @description Reactive `performance.memory` heap statistics, polled on an
+ * interval. SSR-safe and a no-op where the API is unavailable.
+ *
+ * @param {UseMemoryOptions} [options={}] Configuration options
+ * @returns {UseMemoryReturn} `{ isSupported, memory }`
+ *
+ * @example
+ * const { isSupported, memory } = useMemory();
+ * // memory.value?.usedJSHeapSize
+ *
+ * @example
+ * // Poll every 500ms
+ * const { memory } = useMemory({ interval: 500 });
+ *
+ * @since 0.0.15
+ */
+export function useMemory(options: UseMemoryOptions = {}): UseMemoryReturn {
+  const {
+    interval = 1000,
+    immediate = true,
+    window = defaultWindow,
+  } = options;
+
+  const memory = shallowRef<MemoryInfo | undefined>();
+
+  const isSupported = useSupported(
+    () => !!window && 'performance' in window && 'memory' in window.performance,
+  );
+
+  if (isSupported.value) {
+    useIntervalFn(
+      () => {
+        memory.value = (window!.performance as PerformanceWithMemory).memory;
+      },
+      interval,
+      {
+        immediate,
+        immediateCallback: immediate,
+      },
+    );
+  }
+
+  return {
+    isSupported,
+    memory,
+  };
+}
diff --git a/vue/toolkit/src/composables/media/usePerformanceObserver/demo.vue b/vue/toolkit/src/composables/media/usePerformanceObserver/demo.vue
new file mode 100644
index 0000000..417098f
--- /dev/null
+++ b/vue/toolkit/src/composables/media/usePerformanceObserver/demo.vue
@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { computed, ref, shallowRef } from 'vue';
+import { usePerformanceObserver } from './index';
+
+interface Entry {
+  name: string;
+  type: string;
+  startTime: number;
+  duration: number;
+}
+
+const entries = shallowRef<Entry[]>([]);
+const total = ref(0);
+
+const { isSupported, isActive, pause, resume } = usePerformanceObserver(
+  (list) => {
+    const next = list.getEntries().map(e => ({
+      name: e.name,
+      type: e.entryType,
+      startTime: e.startTime,
+      duration: e.duration,
+    }));
+    total.value += next.length;
+    // Keep the most recent entries, newest first.
+    entries.value = [...next.reverse(), ...entries.value].slice(0, 8);
+  },
+  {
+    entryTypes: ['measure', 'mark'],
+    buffered: true,
+  },
+);
+
+let counter = 0;
+
+// Emit real User Timing entries the observer will pick up.
+function measureWork(): void {
+  const id = ++counter;
+  const startMark = `task-${id}-start`;
+  const endMark = `task-${id}-end`;
+
+  performance.mark(startMark);
+  // A small synchronous workload so the measure has a non-zero duration.
+  let acc = 0;
+  for (let i = 0; i < 2_000_000; i++)
+    acc += Math.sqrt(i);
+  performance.mark(endMark);
+  performance.measure(`render-pass-${id} (${acc > 0 ? 'ok' : 'noop'})`, startMark, endMark);
+}
+
+function toggle(): void {
+  isActive.value ? pause() : resume();
+}
+
+const lastDuration = computed(() => {
+  const measure = entries.value.find(e => e.type === 'measure');
+  return measure ? measure.duration : 0;
+});
+</script>
+
+<template>
+  <div class="w-full max-w-md flex flex-col gap-4">
+    <div v-if="!isSupported" class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-600 dark:text-amber-400">
+      <code class="font-mono">PerformanceObserver</code> is not supported in this browser.
+    </div>
+
+    <template v-else>
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+        <div class="flex items-center justify-between">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Performance entries</span>
+          <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+            <span class="size-1.5 rounded-full transition" :class="isActive ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+            {{ isActive ? 'Observing' : 'Paused' }}
+          </span>
+        </div>
+
+        <div class="grid grid-cols-2 gap-2">
+          <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
+            <div class="font-mono text-lg font-bold tabular-nums text-(--fg)">{{ total }}</div>
+            <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">entries seen</div>
+          </div>
+          <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
+            <div class="font-mono text-lg font-bold tabular-nums text-(--fg)">{{ lastDuration.toFixed(2) }}</div>
+            <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">last measure ms</div>
+          </div>
+        </div>
+
+        <div class="flex flex-col gap-1.5">
+          <ul v-if="entries.length" class="flex flex-col gap-1.5">
+            <li
+              v-for="(entry, i) in entries"
+              :key="`${entry.name}-${i}`"
+              class="flex items-center justify-between gap-3 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-1.5"
+            >
+              <span class="flex min-w-0 items-center gap-2">
+                <span
+                  class="inline-flex items-center rounded-md border border-(--border) bg-(--bg-elevated) px-1.5 py-0.5 text-[10px] font-medium uppercase text-(--fg-muted)"
+                >{{ entry.type }}</span>
+                <span class="truncate font-mono text-xs text-(--fg)">{{ entry.name }}</span>
+              </span>
+              <span class="shrink-0 font-mono text-xs tabular-nums text-(--fg-muted)">{{ entry.duration.toFixed(1) }}ms</span>
+            </li>
+          </ul>
+          <div
+            v-else
+            class="rounded-lg border border-dashed border-(--border) bg-(--bg-inset) p-6 text-center text-sm text-(--fg-subtle)"
+          >
+            No entries yet — run a measured task
+          </div>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <button
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+          @click="measureWork"
+        >
+          Run measured task
+        </button>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="toggle"
+        >
+          {{ isActive ? 'Pause' : 'Resume' }}
+        </button>
+      </div>
+
+      <p class="text-xs text-(--fg-subtle)">
+        Each task emits User Timing <code class="font-mono">mark</code>/<code class="font-mono">measure</code> entries that the observer streams in live.
+      </p>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/media/usePerformanceObserver/index.test.ts b/vue/toolkit/src/composables/media/usePerformanceObserver/index.test.ts
new file mode 100644
index 0000000..f206e70
--- /dev/null
+++ b/vue/toolkit/src/composables/media/usePerformanceObserver/index.test.ts
@@ -0,0 +1,178 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick } from 'vue';
+import { usePerformanceObserver } from '.';
+
+interface StubInstance {
+  cb: PerformanceObserverCallback;
+  observe: ReturnType<typeof vi.fn>;
+  disconnect: ReturnType<typeof vi.fn>;
+  takeRecords: ReturnType<typeof vi.fn>;
+}
+
+let instances: StubInstance[] = [];
+
+class StubPerformanceObserver {
+  observe = vi.fn();
+  disconnect = vi.fn();
+  takeRecords = vi.fn(() => [] as PerformanceEntryList);
+  cb: PerformanceObserverCallback;
+  constructor(cb: PerformanceObserverCallback) {
+    this.cb = cb;
+    instances.push(this as unknown as StubInstance);
+  }
+}
+
+describe(usePerformanceObserver, () => {
+  beforeEach(() => {
+    instances = [];
+    vi.stubGlobal('PerformanceObserver', StubPerformanceObserver);
+  });
+  afterEach(() => vi.unstubAllGlobals());
+
+  it('reports support when PerformanceObserver exists', () => {
+    const scope = effectScope();
+    let controls!: ReturnType<typeof usePerformanceObserver>;
+    scope.run(() => {
+      controls = usePerformanceObserver(vi.fn());
+    });
+
+    expect(controls.isSupported.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('creates an observer and calls observe with the init options', () => {
+    const scope = effectScope();
+    scope.run(() => usePerformanceObserver(vi.fn(), { entryTypes: ['paint', 'measure'] }));
+
+    expect(instances).toHaveLength(1);
+    expect(instances[0]!.observe).toHaveBeenCalledWith({ entryTypes: ['paint', 'measure'] });
+    scope.stop();
+  });
+
+  it('passes a single type with buffered option through to observe', () => {
+    const scope = effectScope();
+    scope.run(() => usePerformanceObserver(vi.fn(), { type: 'longtask', buffered: true }));
+
+    expect(instances[0]!.observe).toHaveBeenCalledWith({ type: 'longtask', buffered: true });
+    scope.stop();
+  });
+
+  it('invokes the callback with the entry list and observer', () => {
+    const callback = vi.fn();
+    const scope = effectScope();
+    scope.run(() => usePerformanceObserver(callback, { entryTypes: ['paint'] }));
+
+    const list = { getEntries: () => [] } as unknown as PerformanceObserverEntryList;
+    instances[0]!.cb(list, instances[0] as unknown as PerformanceObserver);
+    expect(callback).toHaveBeenCalledWith(list, expect.anything());
+    scope.stop();
+  });
+
+  it('disconnects on stop', () => {
+    const scope = effectScope();
+    let stop!: () => void;
+    scope.run(() => {
+      stop = usePerformanceObserver(vi.fn()).stop;
+    });
+
+    stop();
+    expect(instances[0]!.disconnect).toHaveBeenCalled();
+    scope.stop();
+  });
+
+  it('does not observe when immediate is false until resumed', async () => {
+    const scope = effectScope();
+    let controls!: ReturnType<typeof usePerformanceObserver>;
+    scope.run(() => {
+      controls = usePerformanceObserver(vi.fn(), { immediate: false, entryTypes: ['paint'] });
+    });
+
+    expect(controls.isActive.value).toBeFalsy();
+    expect(instances).toHaveLength(0);
+
+    controls.resume();
+    await nextTick();
+
+    expect(controls.isActive.value).toBeTruthy();
+    expect(instances).toHaveLength(1);
+    expect(instances[0]!.observe).toHaveBeenCalledWith({ entryTypes: ['paint'] });
+    scope.stop();
+  });
+
+  it('pause disconnects and flips isActive, resume re-observes', async () => {
+    const scope = effectScope();
+    let controls!: ReturnType<typeof usePerformanceObserver>;
+    scope.run(() => {
+      controls = usePerformanceObserver(vi.fn(), { entryTypes: ['paint'] });
+    });
+
+    expect(controls.isActive.value).toBeTruthy();
+    expect(instances).toHaveLength(1);
+
+    controls.pause();
+    expect(controls.isActive.value).toBeFalsy();
+    expect(instances[0]!.disconnect).toHaveBeenCalled();
+
+    controls.resume();
+    await nextTick();
+
+    expect(controls.isActive.value).toBeTruthy();
+    expect(instances).toHaveLength(2);
+    expect(instances[1]!.observe).toHaveBeenCalledWith({ entryTypes: ['paint'] });
+    scope.stop();
+  });
+
+  it('takeRecords delegates to the active observer', () => {
+    const records = [{ name: 'x' }] as unknown as PerformanceEntryList;
+    const scope = effectScope();
+    let controls!: ReturnType<typeof usePerformanceObserver>;
+    scope.run(() => {
+      controls = usePerformanceObserver(vi.fn());
+    });
+
+    instances[0]!.takeRecords.mockReturnValue(records);
+    expect(controls.takeRecords()).toBe(records);
+    expect(instances[0]!.takeRecords).toHaveBeenCalled();
+    scope.stop();
+  });
+
+  it('takeRecords returns undefined when no observer is active', () => {
+    const scope = effectScope();
+    let controls!: ReturnType<typeof usePerformanceObserver>;
+    scope.run(() => {
+      controls = usePerformanceObserver(vi.fn(), { immediate: false });
+    });
+
+    expect(controls.takeRecords()).toBeUndefined();
+    scope.stop();
+  });
+
+  it('cleans up when the scope is disposed', () => {
+    const scope = effectScope();
+    scope.run(() => usePerformanceObserver(vi.fn()));
+
+    expect(instances).toHaveLength(1);
+    scope.stop();
+    expect(instances[0]!.disconnect).toHaveBeenCalled();
+  });
+
+  it('does nothing in an unsupported / SSR-like environment', () => {
+    // A window object without PerformanceObserver simulates both an
+    // unsupported browser and an SSR shell (passed explicitly via options,
+    // since defaultWindow is captured at import time).
+    const fakeWindow = {} as Window & typeof globalThis;
+    const scope = effectScope();
+    let controls!: ReturnType<typeof usePerformanceObserver>;
+    scope.run(() => {
+      controls = usePerformanceObserver(vi.fn(), { window: fakeWindow, entryTypes: ['paint'] });
+    });
+
+    expect(controls.isSupported.value).toBeFalsy();
+    expect(instances).toHaveLength(0);
+    // Operations remain safe no-ops.
+    expect(controls.takeRecords()).toBeUndefined();
+    controls.resume();
+    expect(instances).toHaveLength(0);
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/media/usePerformanceObserver/index.ts b/vue/toolkit/src/composables/media/usePerformanceObserver/index.ts
new file mode 100644
index 0000000..7bd0383
--- /dev/null
+++ b/vue/toolkit/src/composables/media/usePerformanceObserver/index.ts
@@ -0,0 +1,135 @@
+import { readonly, ref, watch } from 'vue';
+import type { Ref } from 'vue';
+import type { ConfigurableWindow } from '@/types';
+import { defaultWindow } from '@/types';
+import { useSupported } from '@/composables/utilities/useSupported';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+
+export interface UsePerformanceObserverOptions extends PerformanceObserverInit, ConfigurableWindow {
+  /**
+   * Start observing immediately on creation
+   *
+   * @default true
+   */
+  immediate?: boolean;
+}
+
+export interface UsePerformanceObserverReturn {
+  /**
+   * Whether `PerformanceObserver` is supported in the current environment
+   */
+  isSupported: Readonly<Ref<boolean>>;
+
+  /**
+   * Whether the observer is currently active
+   */
+  isActive: Readonly<Ref<boolean>>;
+
+  /**
+   * Resume observing after a `pause`
+   */
+  resume: () => void;
+
+  /**
+   * Temporarily stop observing (disconnects the observer) while keeping the
+   * activation watcher alive, so observing can be resumed later
+   */
+  pause: () => void;
+
+  /**
+   * Permanently stop observing and tear down the activation watcher
+   */
+  stop: () => void;
+
+  /**
+   * Synchronously return the current list of buffered performance entries and
+   * clear the observer's buffer. Returns `undefined` when not observing.
+   */
+  takeRecords: () => PerformanceEntryList | undefined;
+}
+
+/**
+ * @name usePerformanceObserver
+ * @category Media
+ * @description Observe performance metrics via `PerformanceObserver`. The
+ * observer is (re)created only when activation changes, and can be paused,
+ * resumed, or permanently stopped. SSR-safe: nothing runs until mounted in
+ * a supporting environment.
+ *
+ * @param {PerformanceObserverCallback} callback Invoked with the observed entries and observer
+ * @param {UsePerformanceObserverOptions} [options={}] Observer init (`entryTypes`/`type`/`buffered`) plus `immediate`
+ * @returns {UsePerformanceObserverReturn} `isSupported`, `isActive`, `pause`, `resume`, `stop`, and `takeRecords`
+ *
+ * @example
+ * usePerformanceObserver((list) => {
+ *   console.log(list.getEntries());
+ * }, { entryTypes: ['paint', 'measure'] });
+ *
+ * @example
+ * const { pause, resume } = usePerformanceObserver(onEntries, {
+ *   entryTypes: ['longtask'],
+ *   buffered: true,
+ * });
+ *
+ * @since 0.0.15
+ */
+export function usePerformanceObserver(
+  callback: PerformanceObserverCallback,
+  options: UsePerformanceObserverOptions = {},
+): UsePerformanceObserverReturn {
+  const { window = defaultWindow, immediate = true, ...observerOptions } = options;
+
+  const isSupported = useSupported(() => window && 'PerformanceObserver' in window);
+
+  const isActive = ref(immediate);
+
+  let observer: PerformanceObserver | undefined;
+
+  const cleanup = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = undefined;
+    }
+  };
+
+  const takeRecords = () => observer?.takeRecords();
+
+  const stopWatch = watch(
+    () => [isActive.value, isSupported.value] as const,
+    ([active, supported]) => {
+      cleanup();
+
+      if (!active || !supported || !window)
+        return;
+
+      observer = new PerformanceObserver(callback);
+      observer.observe(observerOptions);
+    },
+    { immediate: true, flush: 'post' },
+  );
+
+  const resume = () => {
+    isActive.value = true;
+  };
+
+  const pause = () => {
+    cleanup();
+    isActive.value = false;
+  };
+
+  const stop = () => {
+    cleanup();
+    stopWatch();
+  };
+
+  tryOnScopeDispose(stop);
+
+  return {
+    isSupported,
+    isActive: readonly(isActive),
+    resume,
+    pause,
+    stop,
+    takeRecords,
+  };
+}
diff --git a/vue/toolkit/src/composables/media/useSpeechRecognition/demo.vue b/vue/toolkit/src/composables/media/useSpeechRecognition/demo.vue
new file mode 100644
index 0000000..d890ed0
--- /dev/null
+++ b/vue/toolkit/src/composables/media/useSpeechRecognition/demo.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useSpeechRecognition } from './index';
+
+const lang = ref('en-US');
+
+const languages = [
+  { value: 'en-US', label: 'English (US)' },
+  { value: 'en-GB', label: 'English (UK)' },
+  { value: 'es-ES', label: 'Spanish' },
+  { value: 'fr-FR', label: 'French' },
+  { value: 'de-DE', label: 'German' },
+  { value: 'ru-RU', label: 'Russian' },
+];
+
+const {
+  isSupported,
+  isListening,
+  isFinal,
+  result,
+  confidence,
+  error,
+  toggle,
+} = useSpeechRecognition({ lang, continuous: true, interimResults: true });
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div
+      v-if="!isSupported"
+      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-600 dark:text-amber-400"
+    >
+      Speech Recognition is not supported in this browser.
+    </div>
+
+    <template v-else>
+      <div class="flex items-center justify-between gap-3">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Language</span>
+        <select
+          v-model="lang"
+          :disabled="isListening"
+          class="rounded-lg border border-(--border) bg-(--bg) px-2.5 py-1.5 text-sm text-(--fg) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring) disabled:cursor-not-allowed disabled:opacity-40"
+        >
+          <option v-for="l in languages" :key="l.value" :value="l.value">{{ l.label }}</option>
+        </select>
+      </div>
+
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-2 rounded-lg border border-transparent px-3 py-2.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+        :class="isListening
+          ? 'bg-red-500 text-white hover:bg-red-600'
+          : 'bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'"
+        @click="toggle()"
+      >
+        <span
+          class="size-2 rounded-full"
+          :class="isListening ? 'bg-white animate-pulse' : 'bg-(--accent-fg)/60'"
+        />
+        {{ isListening ? 'Stop listening' : 'Start listening' }}
+      </button>
+
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-2 min-h-28">
+        <div class="flex items-center justify-between">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Transcript</span>
+          <span
+            v-if="result"
+            class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+          >
+            {{ isFinal ? 'final' : 'interim' }}
+          </span>
+        </div>
+        <p
+          v-if="result"
+          class="text-sm leading-relaxed text-(--fg)"
+          :class="{ 'italic text-(--fg-muted)': !isFinal }"
+        >
+          {{ result }}
+        </p>
+        <p v-else class="text-sm text-(--fg-subtle)">
+          {{ isListening ? 'Listening… start speaking.' : 'Press start and say something.' }}
+        </p>
+      </div>
+
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Confidence</span>
+        <div class="flex items-center gap-2">
+          <div class="h-1.5 w-24 overflow-hidden rounded-full bg-(--bg-elevated)">
+            <div
+              class="h-full rounded-full bg-(--accent) transition-all duration-300"
+              :style="{ width: `${Math.round(confidence * 100)}%` }"
+            />
+          </div>
+          <span class="font-mono text-sm tabular-nums text-(--fg)">{{ Math.round(confidence * 100) }}%</span>
+        </div>
+      </div>
+
+      <p
+        v-if="error"
+        class="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-sm text-red-600 dark:text-red-400"
+      >
+        {{ 'error' in error ? error.error : error.message }}
+      </p>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/media/useSpeechRecognition/index.test.ts b/vue/toolkit/src/composables/media/useSpeechRecognition/index.test.ts
new file mode 100644
index 0000000..a1ce13d
--- /dev/null
+++ b/vue/toolkit/src/composables/media/useSpeechRecognition/index.test.ts
@@ -0,0 +1,360 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, ref } from 'vue';
+import { useSpeechRecognition } from '.';
+import type {
+  SpeechRecognition,
+  SpeechRecognitionErrorEvent,
+  SpeechRecognitionEvent,
+} from './types';
+
+// Minimal stub of the SpeechRecognition browser API.
+class StubSpeechRecognition implements SpeechRecognition {
+  static instances: StubSpeechRecognition[] = [];
+
+  lang = '';
+  continuous = false;
+  interimResults = false;
+  maxAlternatives = 0;
+
+  onstart: SpeechRecognition['onstart'] = null;
+  onend: SpeechRecognition['onend'] = null;
+  onerror: SpeechRecognition['onerror'] = null;
+  onresult: SpeechRecognition['onresult'] = null;
+
+  start = vi.fn(() => {
+    this.onstart?.call(this, new Event('start'));
+  });
+
+  stop = vi.fn(() => {
+    this.onend?.call(this, new Event('end'));
+  });
+
+  abort = vi.fn();
+
+  // EventTarget stubs (unused by the composable but required by the interface).
+  addEventListener = vi.fn();
+  removeEventListener = vi.fn();
+  dispatchEvent = vi.fn(() => true);
+
+  constructor() {
+    StubSpeechRecognition.instances.push(this);
+  }
+
+  emitResult(transcript: string, isFinal: boolean, confidence = 0.9): void {
+    const event = {
+      resultIndex: 0,
+      results: {
+        length: 1,
+        item: () => ({}),
+        0: {
+          isFinal,
+          length: 1,
+          item: () => ({ transcript, confidence }),
+          0: { transcript, confidence },
+        },
+      },
+    } as unknown as SpeechRecognitionEvent;
+
+    this.onresult?.call(this, event);
+  }
+
+  emitError(code: string): void {
+    const event = { error: code, message: code } as unknown as SpeechRecognitionErrorEvent;
+    this.onerror?.call(this, event);
+  }
+}
+
+function stubWindow(ctor: unknown = StubSpeechRecognition) {
+  return { SpeechRecognition: ctor } as unknown as Window;
+}
+
+describe(useSpeechRecognition, () => {
+  afterEach(() => {
+    StubSpeechRecognition.instances = [];
+    vi.unstubAllGlobals();
+  });
+
+  it('reports support based on the provided window', () => {
+    const scope = effectScope();
+    let result: ReturnType<typeof useSpeechRecognition>;
+    scope.run(() => {
+      result = useSpeechRecognition({ window: stubWindow() });
+    });
+
+    expect(result!.isSupported.value).toBeTruthy();
+    expect(result!.recognition).toBeInstanceOf(StubSpeechRecognition);
+    scope.stop();
+  });
+
+  it('detects the webkit-prefixed constructor', () => {
+    const win = { webkitSpeechRecognition: StubSpeechRecognition } as unknown as Window;
+    const scope = effectScope();
+    let result: ReturnType<typeof useSpeechRecognition>;
+    scope.run(() => {
+      result = useSpeechRecognition({ window: win });
+    });
+
+    expect(result!.isSupported.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('reports unsupported when the API is missing', () => {
+    const scope = effectScope();
+    let result: ReturnType<typeof useSpeechRecognition>;
+    scope.run(() => {
+      result = useSpeechRecognition({ window: {} as Window });
+    });
+
+    expect(result!.isSupported.value).toBeFalsy();
+    expect(result!.recognition).toBeUndefined();
+    scope.stop();
+  });
+
+  it('reports unsupported when window is undefined (SSR path) and never throws', () => {
+    const scope = effectScope();
+    let result: ReturnType<typeof useSpeechRecognition>;
+    scope.run(() => {
+      result = useSpeechRecognition({ window: undefined });
+    });
+
+    expect(result!.isSupported.value).toBeFalsy();
+    expect(result!.recognition).toBeUndefined();
+    expect(() => result!.start()).not.toThrow();
+    expect(() => result!.stop()).not.toThrow();
+    expect(() => result!.toggle()).not.toThrow();
+    scope.stop();
+  });
+
+  it('applies the configured options to the recognizer', () => {
+    const scope = effectScope();
+    let result: ReturnType<typeof useSpeechRecognition>;
+    scope.run(() => {
+      result = useSpeechRecognition({
+        window: stubWindow(),
+        lang: 'ru-RU',
+        continuous: false,
+        interimResults: false,
+        maxAlternatives: 3,
+      });
+    });
+
+    const recognition = result!.recognition as unknown as StubSpeechRecognition;
+    expect(recognition.lang).toBe('ru-RU');
+    expect(recognition.continuous).toBeFalsy();
+    expect(recognition.interimResults).toBeFalsy();
+    expect(recognition.maxAlternatives).toBe(3);
+    scope.stop();
+  });
+
+  it('defaults lang to en-US', () => {
+    const scope = effectScope();
+    let result: ReturnType<typeof useSpeechRecognition>;
+    scope.run(() => {
+      result = useSpeechRecognition({ window: stubWindow() });
+    });
+
+    expect((result!.recognition as unknown as StubSpeechRecognition).lang).toBe('en-US');
+    scope.stop();
+  });
+
+  it('start() begins listening and stop() ends it', async () => {
+    const scope = effectScope();
+    let result: ReturnType<typeof useSpeechRecognition>;
+    scope.run(() => {
+      result = useSpeechRecognition({ window: stubWindow() });
+    });
+
+    const recognition = result!.recognition as unknown as StubSpeechRecognition;
+
+    result!.start();
+    await nextTick();
+    expect(recognition.start).toHaveBeenCalledTimes(1);
+    expect(result!.isListening.value).toBeTruthy();
+
+    result!.stop();
+    await nextTick();
+    expect(recognition.stop).toHaveBeenCalledTimes(1);
+    expect(result!.isListening.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('writing isListening directly drives the recognizer', async () => {
+    const scope = effectScope();
+    let result: ReturnType<typeof useSpeechRecognition>;
+    scope.run(() => {
+      result = useSpeechRecognition({ window: stubWindow() });
+    });
+
+    const recognition = result!.recognition as unknown as StubSpeechRecognition;
+
+    result!.isListening.value = true;
+    await nextTick();
+    expect(recognition.start).toHaveBeenCalledTimes(1);
+
+    result!.isListening.value = false;
+    await nextTick();
+    expect(recognition.stop).toHaveBeenCalledTimes(1);
+    scope.stop();
+  });
+
+  it('toggle() flips and forces the listening state', async () => {
+    const scope = effectScope();
+    let result: ReturnType<typeof useSpeechRecognition>;
+    scope.run(() => {
+      result = useSpeechRecognition({ window: stubWindow() });
+    });
+
+    const recognition = result!.recognition as unknown as StubSpeechRecognition;
+
+    result!.toggle();
+    await nextTick();
+    expect(result!.isListening.value).toBeTruthy();
+
+    result!.toggle(true);
+    await nextTick();
+    // Already listening, no extra start.
+    expect(recognition.start).toHaveBeenCalledTimes(1);
+
+    result!.toggle();
+    await nextTick();
+    expect(result!.isListening.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('updates result, isFinal, and confidence from recognition events', async () => {
+    const scope = effectScope();
+    let result: ReturnType<typeof useSpeechRecognition>;
+    scope.run(() => {
+      result = useSpeechRecognition({ window: stubWindow() });
+    });
+
+    const recognition = result!.recognition as unknown as StubSpeechRecognition;
+    result!.start();
+    await nextTick();
+
+    recognition.emitResult('hello', false, 0.4);
+    expect(result!.result.value).toBe('hello');
+    expect(result!.isFinal.value).toBeFalsy();
+    expect(result!.confidence.value).toBe(0.4);
+
+    recognition.emitResult('hello world', true, 0.95);
+    expect(result!.result.value).toBe('hello world');
+    expect(result!.isFinal.value).toBeTruthy();
+    expect(result!.confidence.value).toBe(0.95);
+    scope.stop();
+  });
+
+  it('captures recognition errors', async () => {
+    const scope = effectScope();
+    let result: ReturnType<typeof useSpeechRecognition>;
+    scope.run(() => {
+      result = useSpeechRecognition({ window: stubWindow() });
+    });
+
+    const recognition = result!.recognition as unknown as StubSpeechRecognition;
+    recognition.emitError('no-speech');
+
+    expect((result!.error.value as SpeechRecognitionErrorEvent).error).toBe('no-speech');
+    scope.stop();
+  });
+
+  it('clears error on a successful result', async () => {
+    const scope = effectScope();
+    let result: ReturnType<typeof useSpeechRecognition>;
+    scope.run(() => {
+      result = useSpeechRecognition({ window: stubWindow() });
+    });
+
+    const recognition = result!.recognition as unknown as StubSpeechRecognition;
+    recognition.emitError('network');
+    expect(result!.error.value).toBeDefined();
+
+    recognition.emitResult('ok', true);
+    expect(result!.error.value).toBeUndefined();
+    scope.stop();
+  });
+
+  it('captures synchronous start() errors thrown by the engine', async () => {
+    class ThrowingRecognition extends StubSpeechRecognition {
+      override start = vi.fn(() => {
+        throw new Error('already started');
+      });
+    }
+
+    const scope = effectScope();
+    let result: ReturnType<typeof useSpeechRecognition>;
+    scope.run(() => {
+      result = useSpeechRecognition({ window: stubWindow(ThrowingRecognition) });
+    });
+
+    result!.start();
+    await nextTick();
+
+    expect(result!.error.value).toBeInstanceOf(Error);
+    expect((result!.error.value as Error).message).toBe('already started');
+    scope.stop();
+  });
+
+  it('syncs lang while idle and re-applies it on end', async () => {
+    const lang = ref('en-US');
+    const scope = effectScope();
+    let result: ReturnType<typeof useSpeechRecognition>;
+    scope.run(() => {
+      result = useSpeechRecognition({ window: stubWindow(), lang });
+    });
+
+    const recognition = result!.recognition as unknown as StubSpeechRecognition;
+
+    lang.value = 'fr-FR';
+    await nextTick();
+    expect(recognition.lang).toBe('fr-FR');
+
+    // While listening, lang changes are deferred.
+    result!.start();
+    await nextTick();
+    lang.value = 'de-DE';
+    await nextTick();
+    expect(recognition.lang).toBe('fr-FR');
+
+    // On end, the latest lang is re-applied.
+    result!.stop();
+    await nextTick();
+    expect(recognition.lang).toBe('de-DE');
+    scope.stop();
+  });
+
+  it('resets isListening when the engine ends on its own', async () => {
+    const scope = effectScope();
+    let result: ReturnType<typeof useSpeechRecognition>;
+    scope.run(() => {
+      result = useSpeechRecognition({ window: stubWindow() });
+    });
+
+    const recognition = result!.recognition as unknown as StubSpeechRecognition;
+    result!.start();
+    await nextTick();
+    expect(result!.isListening.value).toBeTruthy();
+
+    // Simulate the browser auto-stopping.
+    recognition.onend?.call(recognition, new Event('end'));
+    expect(result!.isListening.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('stops listening when the scope is disposed', async () => {
+    const scope = effectScope();
+    let result: ReturnType<typeof useSpeechRecognition>;
+    scope.run(() => {
+      result = useSpeechRecognition({ window: stubWindow() });
+    });
+
+    const recognition = result!.recognition as unknown as StubSpeechRecognition;
+    result!.start();
+    await nextTick();
+
+    scope.stop();
+    await nextTick();
+    expect(recognition.abort).toHaveBeenCalled();
+    expect(result!.isListening.value).toBeFalsy();
+  });
+});
diff --git a/vue/toolkit/src/composables/media/useSpeechRecognition/index.ts b/vue/toolkit/src/composables/media/useSpeechRecognition/index.ts
new file mode 100644
index 0000000..1f3a26c
--- /dev/null
+++ b/vue/toolkit/src/composables/media/useSpeechRecognition/index.ts
@@ -0,0 +1,258 @@
+import { shallowReadonly, shallowRef, toRef, toValue, watch } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter, ShallowRef } from 'vue';
+import { noop } from '@robonen/stdlib';
+import type { ConfigurableWindow } from '@/types';
+import { defaultWindow } from '@/types';
+import { useSupported } from '@/composables/utilities/useSupported';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+import type {
+  SpeechRecognition,
+  SpeechRecognitionConstructor,
+  SpeechRecognitionErrorEvent,
+} from './types';
+
+export type {
+  SpeechRecognition,
+  SpeechRecognitionAlternative,
+  SpeechRecognitionConstructor,
+  SpeechRecognitionErrorCode,
+  SpeechRecognitionErrorEvent,
+  SpeechRecognitionEvent,
+  SpeechRecognitionResult,
+  SpeechRecognitionResultList,
+} from './types';
+
+export interface UseSpeechRecognitionOptions extends ConfigurableWindow {
+  /**
+   * Language of the recognition. BCP 47 tag (e.g. `'en-US'`, `'ru-RU'`).
+   *
+   * Reactive: while not listening, changing it updates the recognizer's language
+   * for the next session.
+   *
+   * @default 'en-US'
+   */
+  lang?: MaybeRefOrGetter<string>;
+
+  /**
+   * Keep returning results for each continuous recognition, rather than stopping
+   * after the first final result.
+   *
+   * @default true
+   */
+  continuous?: boolean;
+
+  /**
+   * Emit interim (not-yet-final) results while the user is still speaking.
+   *
+   * @default true
+   */
+  interimResults?: boolean;
+
+  /**
+   * Maximum number of alternatives provided per result.
+   *
+   * @default 1
+   */
+  maxAlternatives?: number;
+}
+
+export interface UseSpeechRecognitionReturn {
+  /**
+   * Whether the SpeechRecognition API is supported in the current environment.
+   */
+  isSupported: ComputedRef<boolean>;
+
+  /**
+   * Whether recognition is currently active. Writable: setting it starts/stops
+   * the recognizer, mirroring `start()` / `stop()`.
+   */
+  isListening: ShallowRef<boolean>;
+
+  /**
+   * Whether the latest `result` is final (`true`) or interim (`false`).
+   */
+  isFinal: Readonly<ShallowRef<boolean>>;
+
+  /**
+   * Transcript of the most recent recognition result.
+   */
+  result: Readonly<ShallowRef<string>>;
+
+  /**
+   * Confidence (0-1) the engine has in the most recent result.
+   */
+  confidence: Readonly<ShallowRef<number>>;
+
+  /**
+   * The most recent error, or `undefined` when none.
+   */
+  error: ShallowRef<SpeechRecognitionErrorEvent | Error | undefined>;
+
+  /**
+   * The underlying `SpeechRecognition` instance, or `undefined` when unsupported.
+   */
+  recognition: SpeechRecognition | undefined;
+
+  /**
+   * Start listening.
+   */
+  start: () => void;
+
+  /**
+   * Stop listening.
+   */
+  stop: () => void;
+
+  /**
+   * Toggle listening. Pass a boolean to force a state.
+   *
+   * @param value - Optional forced listening state
+   */
+  toggle: (value?: boolean) => void;
+}
+
+/**
+ * @name useSpeechRecognition
+ * @category Media
+ * @description Reactive wrapper around the Web Speech API `SpeechRecognition` for transcribing speech to text.
+ *
+ * @param {UseSpeechRecognitionOptions} [options] Configuration options
+ * @returns {UseSpeechRecognitionReturn} Support flag, reactive listening/result/error state, and start/stop/toggle controls
+ *
+ * @example
+ * const { isSupported, isListening, result, start, stop } = useSpeechRecognition({ lang: 'en-US' });
+ * start();
+ *
+ * @example
+ * // Toggle from a button, read the live transcript
+ * const { result, isFinal, toggle } = useSpeechRecognition({ continuous: true });
+ * watch(result, transcript => console.log(transcript));
+ *
+ * @since 0.0.15
+ */
+export function useSpeechRecognition(options: UseSpeechRecognitionOptions = {}): UseSpeechRecognitionReturn {
+  const {
+    interimResults = true,
+    continuous = true,
+    maxAlternatives = 1,
+    window = defaultWindow,
+  } = options;
+
+  const lang = toRef(options.lang ?? 'en-US');
+  const isListening = shallowRef(false);
+  const isFinal = shallowRef(false);
+  const result = shallowRef('');
+  const confidence = shallowRef(0);
+  const error = shallowRef<SpeechRecognitionErrorEvent | Error | undefined>(undefined);
+
+  const speechWindow = window as (Window & {
+    SpeechRecognition?: SpeechRecognitionConstructor;
+    webkitSpeechRecognition?: SpeechRecognitionConstructor;
+  }) | undefined;
+  const Recognition: SpeechRecognitionConstructor | undefined
+    = speechWindow?.SpeechRecognition ?? speechWindow?.webkitSpeechRecognition;
+
+  const isSupported = useSupported(() => Recognition);
+
+  let recognition: SpeechRecognition | undefined;
+
+  function start(): void {
+    isListening.value = true;
+  }
+
+  function stop(): void {
+    isListening.value = false;
+  }
+
+  function toggle(value = !isListening.value): void {
+    isListening.value = value;
+  }
+
+  if (isSupported.value && Recognition) {
+    recognition = new Recognition();
+
+    recognition.continuous = continuous;
+    recognition.interimResults = interimResults;
+    recognition.lang = toValue(lang);
+    recognition.maxAlternatives = maxAlternatives;
+
+    recognition.onstart = () => {
+      isListening.value = true;
+      isFinal.value = false;
+    };
+
+    recognition.onresult = (event) => {
+      // The result at `resultIndex` carries the latest transcript chunk.
+      const currentResult = event.results[event.resultIndex];
+      const alternative = currentResult?.[0];
+      if (!currentResult || !alternative)
+        return;
+
+      isFinal.value = currentResult.isFinal;
+      result.value = alternative.transcript;
+      confidence.value = alternative.confidence;
+      error.value = undefined;
+    };
+
+    recognition.onerror = (event) => {
+      error.value = event;
+    };
+
+    recognition.onend = () => {
+      isListening.value = false;
+      // Re-apply lang (it may have been changed while listening).
+      recognition!.lang = toValue(lang);
+    };
+
+    // Only sync lang while idle; mutating it mid-session takes effect on the next start.
+    watch(lang, (value) => {
+      if (recognition && !isListening.value)
+        recognition.lang = value;
+    });
+
+    // Single source of truth: writing `isListening` (directly or via start/stop/toggle)
+    // drives the recognizer. `onstart`/`onend` resync the flag if the engine self-stops.
+    watch(isListening, (value, prev) => {
+      if (value === prev)
+        return;
+
+      try {
+        if (value)
+          recognition!.start();
+        else
+          recognition!.stop();
+      }
+      catch (err) {
+        error.value = err as Error;
+      }
+    });
+  }
+
+  tryOnScopeDispose(() => {
+    if (!recognition)
+      return;
+
+    // Detach handlers first so the teardown stop() can't re-enter our state.
+    recognition.onstart = noop;
+    recognition.onresult = noop;
+    recognition.onerror = noop;
+    recognition.onend = noop;
+
+    isListening.value = false;
+    // The isListening watcher is gone with the scope, so abort the engine directly.
+    recognition.abort();
+  });
+
+  return {
+    isSupported,
+    isListening,
+    isFinal: shallowReadonly(isFinal),
+    result: shallowReadonly(result),
+    confidence: shallowReadonly(confidence),
+    error,
+    recognition,
+    start,
+    stop,
+    toggle,
+  };
+}
diff --git a/vue/toolkit/src/composables/media/useSpeechRecognition/types.ts b/vue/toolkit/src/composables/media/useSpeechRecognition/types.ts
new file mode 100644
index 0000000..d3c800d
--- /dev/null
+++ b/vue/toolkit/src/composables/media/useSpeechRecognition/types.ts
@@ -0,0 +1,63 @@
+// Minimal ambient typings for the Web Speech API (SpeechRecognition).
+// These are not part of TypeScript's lib.dom.d.ts, so we declare the subset we
+// rely on here rather than depending on `@types/dom-speech-recognition`.
+
+export interface SpeechRecognitionAlternative {
+  readonly transcript: string;
+  readonly confidence: number;
+}
+
+export interface SpeechRecognitionResult {
+  readonly isFinal: boolean;
+  readonly length: number;
+  item: (index: number) => SpeechRecognitionAlternative;
+  [index: number]: SpeechRecognitionAlternative;
+}
+
+export interface SpeechRecognitionResultList {
+  readonly length: number;
+  item: (index: number) => SpeechRecognitionResult;
+  [index: number]: SpeechRecognitionResult;
+}
+
+export interface SpeechRecognitionEvent extends Event {
+  readonly resultIndex: number;
+  readonly results: SpeechRecognitionResultList;
+}
+
+export type SpeechRecognitionErrorCode
+  = | 'aborted'
+    | 'audio-capture'
+    | 'bad-grammar'
+    | 'language-not-supported'
+    | 'network'
+    | 'no-speech'
+    | 'not-allowed'
+    | 'service-not-allowed'
+    | (string & {});
+
+export interface SpeechRecognitionErrorEvent extends Event {
+  readonly error: SpeechRecognitionErrorCode;
+  readonly message: string;
+}
+
+export interface SpeechRecognition extends EventTarget {
+  lang: string;
+  continuous: boolean;
+  interimResults: boolean;
+  maxAlternatives: number;
+
+  start: () => void;
+  stop: () => void;
+  abort: () => void;
+
+  onstart: ((this: SpeechRecognition, event: Event) => void) | null;
+  onend: ((this: SpeechRecognition, event: Event) => void) | null;
+  onerror: ((this: SpeechRecognition, event: SpeechRecognitionErrorEvent) => void) | null;
+  onresult: ((this: SpeechRecognition, event: SpeechRecognitionEvent) => void) | null;
+}
+
+export interface SpeechRecognitionConstructor {
+  new (): SpeechRecognition;
+  prototype: SpeechRecognition;
+}
diff --git a/vue/toolkit/src/composables/media/useSpeechSynthesis/demo.vue b/vue/toolkit/src/composables/media/useSpeechSynthesis/demo.vue
new file mode 100644
index 0000000..a82b7b0
--- /dev/null
+++ b/vue/toolkit/src/composables/media/useSpeechSynthesis/demo.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useSpeechSynthesis } from './index';
+
+const text = ref('The quick brown fox jumps over the lazy dog.');
+const pitch = ref(1);
+const rate = ref(1);
+const volume = ref(1);
+
+const {
+  isSupported,
+  isPlaying,
+  status,
+  speak,
+  stop,
+  toggle,
+} = useSpeechSynthesis(text, { pitch, rate, volume });
+
+const statusLabels: Record<string, string> = {
+  init: 'Ready',
+  play: 'Speaking',
+  pause: 'Paused',
+  end: 'Finished',
+};
+</script>
+
+<template>
+  <div class="w-full max-w-md flex flex-col gap-4">
+    <div
+      v-if="!isSupported"
+      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-600 dark:text-amber-400"
+    >
+      Speech Synthesis is not supported in this browser.
+    </div>
+
+    <template v-else>
+      <div class="flex flex-col gap-1.5">
+        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Text to speak</label>
+        <textarea
+          v-model="text"
+          rows="2"
+          class="w-full resize-none rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        />
+      </div>
+
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+        <div class="flex items-center justify-between">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Rate</span>
+          <span class="font-mono text-sm tabular-nums text-(--fg)">{{ rate.toFixed(1) }}×</span>
+        </div>
+        <input v-model.number="rate" type="range" min="0.5" max="2" step="0.1" class="w-full accent-(--accent) cursor-pointer">
+
+        <div class="flex items-center justify-between">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Pitch</span>
+          <span class="font-mono text-sm tabular-nums text-(--fg)">{{ pitch.toFixed(1) }}</span>
+        </div>
+        <input v-model.number="pitch" type="range" min="0" max="2" step="0.1" class="w-full accent-(--accent) cursor-pointer">
+
+        <div class="flex items-center justify-between">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Volume</span>
+          <span class="font-mono text-sm tabular-nums text-(--fg)">{{ Math.round(volume * 100) }}%</span>
+        </div>
+        <input v-model.number="volume" type="range" min="0" max="1" step="0.05" class="w-full accent-(--accent) cursor-pointer">
+      </div>
+
+      <div class="flex items-center gap-2">
+        <button
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          :disabled="!text.trim()"
+          @click="speak()"
+        >
+          Speak
+        </button>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          :disabled="!isPlaying && status !== 'pause'"
+          @click="toggle()"
+        >
+          {{ isPlaying ? 'Pause' : 'Resume' }}
+        </button>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="stop()"
+        >
+          Stop
+        </button>
+      </div>
+
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Status</span>
+        <span class="inline-flex items-center gap-1.5 font-mono text-sm text-(--fg)">
+          <span
+            class="size-2 rounded-full transition-colors"
+            :class="isPlaying ? 'bg-emerald-500 animate-pulse' : 'bg-(--fg-subtle)'"
+          />
+          {{ statusLabels[status] }}
+        </span>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/media/useSpeechSynthesis/index.test.ts b/vue/toolkit/src/composables/media/useSpeechSynthesis/index.test.ts
new file mode 100644
index 0000000..67857d6
--- /dev/null
+++ b/vue/toolkit/src/composables/media/useSpeechSynthesis/index.test.ts
@@ -0,0 +1,277 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, ref } from 'vue';
+import { useSpeechSynthesis } from '.';
+
+class FakeUtterance {
+  text: string;
+  lang = '';
+  voice: SpeechSynthesisVoice | null = null;
+  pitch = 1;
+  rate = 1;
+  volume = 1;
+  onstart: (() => void) | null = null;
+  onpause: (() => void) | null = null;
+  onresume: (() => void) | null = null;
+  onend: (() => void) | null = null;
+  onerror: ((event: unknown) => void) | null = null;
+  onboundary: ((event: unknown) => void) | null = null;
+
+  constructor(text = '') {
+    this.text = text;
+  }
+}
+
+function stubWindow() {
+  const speechSynthesis = {
+    speak: vi.fn(),
+    cancel: vi.fn(),
+    pause: vi.fn(),
+    resume: vi.fn(),
+  };
+  const window = { speechSynthesis } as unknown as Window;
+  return { window, speechSynthesis };
+}
+
+describe(useSpeechSynthesis, () => {
+  beforeEach(() => {
+    vi.stubGlobal('SpeechSynthesisUtterance', FakeUtterance);
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it('reports support when window.speechSynthesis exists', () => {
+    const { window } = stubWindow();
+    const scope = effectScope();
+    let result: ReturnType<typeof useSpeechSynthesis>;
+    scope.run(() => {
+      result = useSpeechSynthesis('hi', { window });
+    });
+
+    expect(result!.isSupported.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('reports unsupported when window lacks speechSynthesis', () => {
+    const window = {} as Window;
+    const scope = effectScope();
+    let result: ReturnType<typeof useSpeechSynthesis>;
+    scope.run(() => {
+      result = useSpeechSynthesis('hi', { window });
+    });
+
+    expect(result!.isSupported.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('reports unsupported in the SSR path (window undefined) and never throws', () => {
+    const scope = effectScope();
+    let result: ReturnType<typeof useSpeechSynthesis>;
+    scope.run(() => {
+      result = useSpeechSynthesis('hi', { window: undefined });
+    });
+
+    expect(result!.isSupported.value).toBeFalsy();
+    expect(() => result!.speak()).not.toThrow();
+    expect(() => result!.stop()).not.toThrow();
+    expect(() => result!.toggle()).not.toThrow();
+    scope.stop();
+  });
+
+  it('builds an utterance with the configured options', () => {
+    const { window } = stubWindow();
+    const voice = { name: 'Test Voice' } as SpeechSynthesisVoice;
+    const scope = effectScope();
+    let result: ReturnType<typeof useSpeechSynthesis>;
+    scope.run(() => {
+      result = useSpeechSynthesis('hello', {
+        window,
+        lang: 'fr-FR',
+        pitch: 1.5,
+        rate: 0.8,
+        volume: 0.5,
+        voice,
+      });
+    });
+
+    const u = result!.utterance.value;
+    expect(u.text).toBe('hello');
+    expect(u.lang).toBe('fr-FR');
+    expect(u.pitch).toBe(1.5);
+    expect(u.rate).toBe(0.8);
+    expect(u.volume).toBe(0.5);
+    expect(u.voice).toBe(voice);
+    scope.stop();
+  });
+
+  it('defaults lang to en-US and voice to null', () => {
+    const { window } = stubWindow();
+    const scope = effectScope();
+    let result: ReturnType<typeof useSpeechSynthesis>;
+    scope.run(() => {
+      result = useSpeechSynthesis('hello', { window });
+    });
+
+    const u = result!.utterance.value;
+    expect(u.lang).toBe('en-US');
+    expect(u.voice).toBeNull();
+    scope.stop();
+  });
+
+  it('rebuilds the utterance when reactive text changes', () => {
+    const { window } = stubWindow();
+    const text = ref('first');
+    const scope = effectScope();
+    let result: ReturnType<typeof useSpeechSynthesis>;
+    scope.run(() => {
+      result = useSpeechSynthesis(text, { window });
+    });
+
+    expect(result!.utterance.value.text).toBe('first');
+    text.value = 'second';
+    expect(result!.utterance.value.text).toBe('second');
+    scope.stop();
+  });
+
+  it('speak() cancels the queue then speaks the current utterance', () => {
+    const { window, speechSynthesis } = stubWindow();
+    const scope = effectScope();
+    let result: ReturnType<typeof useSpeechSynthesis>;
+    scope.run(() => {
+      result = useSpeechSynthesis('hello', { window });
+    });
+
+    result!.speak();
+    expect(speechSynthesis.cancel).toHaveBeenCalled();
+    expect(speechSynthesis.speak).toHaveBeenCalledWith(result!.utterance.value);
+    scope.stop();
+  });
+
+  it('speak() is a no-op when unsupported', () => {
+    const window = {} as Window;
+    const scope = effectScope();
+    let result: ReturnType<typeof useSpeechSynthesis>;
+    scope.run(() => {
+      result = useSpeechSynthesis('hello', { window });
+    });
+
+    expect(() => result!.speak()).not.toThrow();
+    scope.stop();
+  });
+
+  it('stop() cancels and clears isPlaying', () => {
+    const { window, speechSynthesis } = stubWindow();
+    const scope = effectScope();
+    let result: ReturnType<typeof useSpeechSynthesis>;
+    scope.run(() => {
+      result = useSpeechSynthesis('hello', { window });
+    });
+
+    result!.isPlaying.value = true;
+    result!.stop();
+    expect(speechSynthesis.cancel).toHaveBeenCalled();
+    expect(result!.isPlaying.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('toggle() flips and sets isPlaying which drives pause/resume', async () => {
+    const { window, speechSynthesis } = stubWindow();
+    const scope = effectScope();
+    let result: ReturnType<typeof useSpeechSynthesis>;
+    scope.run(() => {
+      result = useSpeechSynthesis('hello', { window });
+    });
+
+    result!.toggle();
+    expect(result!.isPlaying.value).toBeTruthy();
+    await nextTick();
+    expect(speechSynthesis.resume).toHaveBeenCalled();
+
+    result!.toggle();
+    expect(result!.isPlaying.value).toBeFalsy();
+    await nextTick();
+    expect(speechSynthesis.pause).toHaveBeenCalled();
+
+    result!.toggle(true);
+    expect(result!.isPlaying.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('updates status and isPlaying through utterance events', () => {
+    const { window } = stubWindow();
+    const scope = effectScope();
+    let result: ReturnType<typeof useSpeechSynthesis>;
+    scope.run(() => {
+      result = useSpeechSynthesis('hello', { window });
+    });
+
+    const u = result!.utterance.value as unknown as FakeUtterance;
+    expect(result!.status.value).toBe('init');
+
+    u.onstart!();
+    expect(result!.status.value).toBe('play');
+    expect(result!.isPlaying.value).toBeTruthy();
+
+    u.onpause!();
+    expect(result!.status.value).toBe('pause');
+    expect(result!.isPlaying.value).toBeFalsy();
+
+    u.onresume!();
+    expect(result!.status.value).toBe('play');
+
+    u.onend!();
+    expect(result!.status.value).toBe('end');
+    expect(result!.isPlaying.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('captures errors and invokes onError', () => {
+    const { window } = stubWindow();
+    const onError = vi.fn();
+    const scope = effectScope();
+    let result: ReturnType<typeof useSpeechSynthesis>;
+    scope.run(() => {
+      result = useSpeechSynthesis('hello', { window, onError });
+    });
+
+    const u = result!.utterance.value as unknown as FakeUtterance;
+    const event = { error: 'network' };
+    u.onerror!(event);
+
+    expect(result!.error.value).toBe(event);
+    expect(onError).toHaveBeenCalledWith(event);
+    scope.stop();
+  });
+
+  it('forwards boundary events to onBoundary', () => {
+    const { window } = stubWindow();
+    const onBoundary = vi.fn();
+    const scope = effectScope();
+    let result: ReturnType<typeof useSpeechSynthesis>;
+    scope.run(() => {
+      result = useSpeechSynthesis('hello', { window, onBoundary });
+    });
+
+    const u = result!.utterance.value as unknown as FakeUtterance;
+    const event = { charIndex: 0 };
+    u.onboundary!(event);
+    expect(onBoundary).toHaveBeenCalledWith(event);
+    scope.stop();
+  });
+
+  it('cancels speech when the scope is disposed', () => {
+    const { window, speechSynthesis } = stubWindow();
+    const scope = effectScope();
+    let result: ReturnType<typeof useSpeechSynthesis>;
+    scope.run(() => {
+      result = useSpeechSynthesis('hello', { window });
+    });
+
+    result!.isPlaying.value = true;
+    speechSynthesis.cancel.mockClear();
+    scope.stop();
+    expect(speechSynthesis.cancel).toHaveBeenCalled();
+    expect(result!.isPlaying.value).toBeFalsy();
+  });
+});
diff --git a/vue/toolkit/src/composables/media/useSpeechSynthesis/index.ts b/vue/toolkit/src/composables/media/useSpeechSynthesis/index.ts
new file mode 100644
index 0000000..c424e21
--- /dev/null
+++ b/vue/toolkit/src/composables/media/useSpeechSynthesis/index.ts
@@ -0,0 +1,240 @@
+import { computed, shallowRef, toRef, toValue, watch } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter, ShallowRef } from 'vue';
+import { noop } from '@robonen/stdlib';
+import type { ConfigurableWindow } from '@/types';
+import { defaultWindow } from '@/types';
+import { useSupported } from '@/composables/utilities/useSupported';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+
+export type UseSpeechSynthesisStatus = 'init' | 'play' | 'pause' | 'end';
+
+export interface UseSpeechSynthesisOptions extends ConfigurableWindow {
+  /**
+   * Language used to speak the utterance (BCP 47 tag).
+   *
+   * @default 'en-US'
+   */
+  lang?: MaybeRefOrGetter<string>;
+
+  /**
+   * Pitch the utterance is spoken at, between `0` and `2`.
+   *
+   * @default 1
+   */
+  pitch?: MaybeRefOrGetter<number>;
+
+  /**
+   * Rate the utterance is spoken at, between `0.1` and `10`.
+   *
+   * @default 1
+   */
+  rate?: MaybeRefOrGetter<number>;
+
+  /**
+   * Volume the utterance is spoken at, between `0` and `1`.
+   *
+   * @default 1
+   */
+  volume?: MaybeRefOrGetter<number>;
+
+  /**
+   * Voice used to speak the utterance. Defaults to the platform's default voice.
+   */
+  voice?: MaybeRefOrGetter<SpeechSynthesisVoice | undefined>;
+
+  /**
+   * Fired when the spoken utterance reaches a word or sentence boundary.
+   */
+  onBoundary?: (event: SpeechSynthesisEvent) => void;
+
+  /**
+   * Called with any `SpeechSynthesisErrorEvent` raised while speaking.
+   *
+   * @default noop
+   */
+  onError?: (event: SpeechSynthesisErrorEvent) => void;
+}
+
+export interface UseSpeechSynthesisReturn {
+  /**
+   * Whether the SpeechSynthesis API is supported in the current environment.
+   */
+  isSupported: ComputedRef<boolean>;
+
+  /**
+   * Whether the utterance is currently being spoken.
+   */
+  isPlaying: ShallowRef<boolean>;
+
+  /**
+   * Current lifecycle status of the utterance.
+   */
+  status: ShallowRef<UseSpeechSynthesisStatus>;
+
+  /**
+   * The reactive `SpeechSynthesisUtterance` rebuilt whenever the text or options change.
+   */
+  utterance: ComputedRef<SpeechSynthesisUtterance>;
+
+  /**
+   * The most recent error raised while speaking, if any.
+   */
+  error: ShallowRef<SpeechSynthesisErrorEvent | undefined>;
+
+  /**
+   * Pause/resume speaking. Pass an explicit boolean to force a state.
+   *
+   * @param value - `true` to resume, `false` to pause; toggles when omitted
+   */
+  toggle: (value?: boolean) => void;
+
+  /**
+   * Cancel any queued speech and speak the current utterance from the start.
+   */
+  speak: () => void;
+
+  /**
+   * Stop speaking and clear the queue.
+   */
+  stop: () => void;
+}
+
+/**
+ * @name useSpeechSynthesis
+ * @category Media
+ * @description Reactive wrapper around the Web Speech `SpeechSynthesis` API for text-to-speech.
+ *
+ * @param {MaybeRefOrGetter<string>} text - The text to speak; rebuilds the utterance reactively
+ * @param {UseSpeechSynthesisOptions} [options] - Configuration options
+ * @returns {UseSpeechSynthesisReturn} Support flag, playing/status/error state, the reactive utterance, and speak/stop/toggle actions
+ *
+ * @example
+ * const { speak, stop, isPlaying } = useSpeechSynthesis('Hello world', { lang: 'en-US', rate: 1.2 });
+ * speak();
+ *
+ * @example
+ * // Reactive text and voice
+ * const text = ref('Initial');
+ * const { speak, status } = useSpeechSynthesis(text, { pitch: 1.5 });
+ * text.value = 'Updated';
+ * speak();
+ *
+ * @since 0.0.15
+ */
+export function useSpeechSynthesis(
+  text: MaybeRefOrGetter<string>,
+  options: UseSpeechSynthesisOptions = {},
+): UseSpeechSynthesisReturn {
+  const {
+    lang = 'en-US',
+    pitch = 1,
+    rate = 1,
+    volume = 1,
+    voice,
+    window = defaultWindow,
+    onBoundary,
+    onError = noop,
+  } = options;
+
+  const synth = window?.speechSynthesis;
+  const isSupported = useSupported(() => synth);
+
+  const isPlaying = shallowRef(false);
+  const status = shallowRef<UseSpeechSynthesisStatus>('init');
+  const error = shallowRef<SpeechSynthesisErrorEvent | undefined>(undefined);
+
+  const spokenText = toRef(text);
+
+  function configure(target: SpeechSynthesisUtterance): SpeechSynthesisUtterance {
+    target.lang = toValue(lang);
+    target.voice = toValue(voice) ?? null;
+    target.pitch = toValue(pitch);
+    target.rate = toValue(rate);
+    target.volume = toValue(volume);
+
+    target.onstart = () => {
+      isPlaying.value = true;
+      status.value = 'play';
+    };
+
+    target.onpause = () => {
+      isPlaying.value = false;
+      status.value = 'pause';
+    };
+
+    target.onresume = () => {
+      isPlaying.value = true;
+      status.value = 'play';
+    };
+
+    target.onend = () => {
+      isPlaying.value = false;
+      status.value = 'end';
+    };
+
+    target.onerror = (event) => {
+      error.value = event;
+      onError(event);
+    };
+
+    if (onBoundary)
+      target.onboundary = onBoundary;
+
+    return target;
+  }
+
+  const utterance = computed<SpeechSynthesisUtterance>(() => {
+    isPlaying.value = false;
+    status.value = 'init';
+    return configure(new SpeechSynthesisUtterance(spokenText.value));
+  });
+
+  function speak(): void {
+    if (!isSupported.value)
+      return;
+
+    synth!.cancel();
+    synth!.speak(utterance.value);
+  }
+
+  function stop(): void {
+    if (isSupported.value)
+      synth!.cancel();
+
+    isPlaying.value = false;
+  }
+
+  function toggle(value = !isPlaying.value): void {
+    isPlaying.value = value;
+  }
+
+  if (isSupported.value) {
+    // Eagerly build the first utterance so it is ready to speak.
+    void utterance.value;
+
+    watch(isPlaying, (playing) => {
+      if (playing)
+        synth!.resume();
+      else
+        synth!.pause();
+    });
+  }
+
+  tryOnScopeDispose(() => {
+    isPlaying.value = false;
+
+    if (isSupported.value)
+      synth!.cancel();
+  });
+
+  return {
+    isSupported,
+    isPlaying,
+    status,
+    utterance,
+    error,
+    toggle,
+    speak,
+    stop,
+  };
+}
diff --git a/vue/toolkit/src/composables/media/useUserMedia/demo.vue b/vue/toolkit/src/composables/media/useUserMedia/demo.vue
new file mode 100644
index 0000000..44e6bab
--- /dev/null
+++ b/vue/toolkit/src/composables/media/useUserMedia/demo.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { ref, shallowRef, useTemplateRef, watch } from 'vue';
+import { useUserMedia } from './index';
+
+const facingMode = ref<'user' | 'environment'>('user');
+const lastError = shallowRef<string | undefined>();
+
+const video = useTemplateRef<HTMLVideoElement>('video');
+
+const {
+  isSupported,
+  stream,
+  enabled,
+  start,
+  stop,
+} = useUserMedia({
+  constraints: () => ({ video: { facingMode: facingMode.value }, audio: false }),
+  onError: (error) => {
+    lastError.value = error instanceof Error ? error.message : String(error);
+  },
+});
+
+// Attach the live stream to the <video> element whenever it changes.
+watch([stream, video], ([currentStream, el]) => {
+  if (el)
+    el.srcObject = currentStream ?? null;
+});
+
+async function handleStart(): Promise<void> {
+  lastError.value = undefined;
+  await start();
+}
+
+function swapCamera(): void {
+  facingMode.value = facingMode.value === 'user' ? 'environment' : 'user';
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div
+      v-if="!isSupported"
+      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-600 dark:text-amber-400"
+    >
+      Camera capture (getUserMedia) is not supported in this browser.
+    </div>
+
+    <template v-else>
+      <div class="relative aspect-video w-full overflow-hidden rounded-xl border border-(--border) bg-(--bg-inset)">
+        <video
+          ref="video"
+          autoplay
+          playsinline
+          muted
+          class="size-full object-cover"
+          :class="{ 'opacity-0': !stream }"
+        />
+        <div
+          v-if="!stream"
+          class="absolute inset-0 flex flex-col items-center justify-center gap-1 text-(--fg-subtle)"
+        >
+          <span class="text-sm font-medium">Camera off</span>
+          <span class="text-xs">Press start to enable your webcam.</span>
+        </div>
+        <span
+          v-if="stream"
+          class="absolute left-2 top-2 inline-flex items-center gap-1.5 rounded-md bg-black/60 px-2 py-0.5 text-xs font-medium text-white backdrop-blur"
+        >
+          <span class="size-1.5 rounded-full bg-red-500 animate-pulse" />
+          LIVE
+        </span>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <button
+          v-if="!enabled"
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+          @click="handleStart"
+        >
+          Start camera
+        </button>
+        <button
+          v-else
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="stop()"
+        >
+          Stop camera
+        </button>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="swapCamera"
+        >
+          Flip
+        </button>
+      </div>
+
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Facing</span>
+        <span class="font-mono text-sm tabular-nums text-(--fg)">
+          {{ facingMode === 'user' ? 'Front (user)' : 'Back (environment)' }}
+        </span>
+      </div>
+
+      <p
+        v-if="lastError"
+        class="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-sm text-red-600 dark:text-red-400"
+      >
+        {{ lastError }}
+      </p>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/media/useUserMedia/index.test.ts b/vue/toolkit/src/composables/media/useUserMedia/index.test.ts
new file mode 100644
index 0000000..c7a241f
--- /dev/null
+++ b/vue/toolkit/src/composables/media/useUserMedia/index.test.ts
@@ -0,0 +1,343 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick } from 'vue';
+import type { UseUserMediaReturn } from '.';
+import { useUserMedia } from '.';
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+function createTrack() {
+  return { stop: vi.fn() } as unknown as MediaStreamTrack;
+}
+
+function createStream(trackCount = 2) {
+  const tracks = Array.from({ length: trackCount }, createTrack);
+  return {
+    getTracks: () => tracks,
+    _tracks: tracks,
+  } as unknown as MediaStream & { _tracks: MediaStreamTrack[] };
+}
+
+function stubNavigator(getUserMedia?: (c: MediaStreamConstraints) => Promise<MediaStream>) {
+  const fn = getUserMedia ?? vi.fn(async () => createStream());
+  const navigator = {
+    mediaDevices: { getUserMedia: fn },
+  } as unknown as Navigator;
+  return { navigator, getUserMedia: fn as ReturnType<typeof vi.fn> };
+}
+
+describe(useUserMedia, () => {
+  it('reports supported when getUserMedia exists', () => {
+    const { navigator } = stubNavigator();
+    const scope = effectScope();
+    let result!: UseUserMediaReturn;
+    scope.run(() => {
+      result = useUserMedia({ navigator });
+    });
+    expect(result.isSupported.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('reports unsupported when mediaDevices is missing', () => {
+    const navigator = {} as Navigator;
+    const scope = effectScope();
+    let result!: UseUserMediaReturn;
+    scope.run(() => {
+      result = useUserMedia({ navigator });
+    });
+    expect(result.isSupported.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('is SSR-safe when navigator is undefined', () => {
+    const scope = effectScope();
+    let result!: UseUserMediaReturn;
+    scope.run(() => {
+      result = useUserMedia({ navigator: undefined });
+    });
+    expect(result.isSupported.value).toBeFalsy();
+    expect(result.stream.value).toBeUndefined();
+    scope.stop();
+  });
+
+  it('does not auto-start when disabled', () => {
+    const { navigator, getUserMedia } = stubNavigator();
+    const scope = effectScope();
+    scope.run(() => useUserMedia({ navigator }));
+    expect(getUserMedia).not.toHaveBeenCalled();
+    scope.stop();
+  });
+
+  it('start() acquires a stream and flips enabled', async () => {
+    const stream = createStream();
+    const { navigator, getUserMedia } = stubNavigator(vi.fn(async () => stream));
+    const scope = effectScope();
+    let result!: UseUserMediaReturn;
+    scope.run(() => {
+      result = useUserMedia({ navigator, constraints: { video: true } });
+    });
+
+    const returned = await result.start();
+    expect(getUserMedia).toHaveBeenCalledTimes(1);
+    expect(returned).toBe(stream);
+    expect(result.stream.value).toBe(stream);
+    expect(result.enabled.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('passes video/audio constraints through to getUserMedia', async () => {
+    const { navigator, getUserMedia } = stubNavigator();
+    const scope = effectScope();
+    let result!: UseUserMediaReturn;
+    scope.run(() => {
+      result = useUserMedia({
+        navigator,
+        constraints: { video: { width: 1280 }, audio: true },
+      });
+    });
+
+    await result.start();
+    expect(getUserMedia).toHaveBeenCalledWith({ video: { width: 1280 }, audio: true });
+    scope.stop();
+  });
+
+  it('defaults missing constraint kinds to false', async () => {
+    const { navigator, getUserMedia } = stubNavigator();
+    const scope = effectScope();
+    let result!: UseUserMediaReturn;
+    scope.run(() => {
+      result = useUserMedia({ navigator, constraints: { video: true } });
+    });
+
+    await result.start();
+    expect(getUserMedia).toHaveBeenCalledWith({ video: true, audio: false });
+    scope.stop();
+  });
+
+  it('does not re-acquire when a stream is already running', async () => {
+    const { navigator, getUserMedia } = stubNavigator();
+    const scope = effectScope();
+    let result!: UseUserMediaReturn;
+    scope.run(() => {
+      result = useUserMedia({ navigator });
+    });
+
+    await result.start();
+    await result.start();
+    expect(getUserMedia).toHaveBeenCalledTimes(1);
+    scope.stop();
+  });
+
+  it('stop() stops every track and clears state', async () => {
+    const stream = createStream(3);
+    const { navigator } = stubNavigator(vi.fn(async () => stream));
+    const scope = effectScope();
+    let result!: UseUserMediaReturn;
+    scope.run(() => {
+      result = useUserMedia({ navigator });
+    });
+
+    await result.start();
+    result.stop();
+
+    for (const track of stream._tracks)
+      expect(track.stop).toHaveBeenCalledTimes(1);
+
+    expect(result.stream.value).toBeUndefined();
+    expect(result.enabled.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('starts when enabled is toggled true', async () => {
+    const { navigator, getUserMedia } = stubNavigator();
+    const scope = effectScope();
+    let result!: UseUserMediaReturn;
+    scope.run(() => {
+      result = useUserMedia({ navigator });
+    });
+
+    result.enabled.value = true;
+    await nextTick();
+    await Promise.resolve();
+    expect(getUserMedia).toHaveBeenCalledTimes(1);
+    scope.stop();
+  });
+
+  it('stops the stream when enabled is toggled false', async () => {
+    const stream = createStream();
+    const { navigator } = stubNavigator(vi.fn(async () => stream));
+    const scope = effectScope();
+    let result!: UseUserMediaReturn;
+    scope.run(() => {
+      result = useUserMedia({ navigator, enabled: true });
+    });
+
+    await Promise.resolve();
+    expect(result.stream.value).toBe(stream);
+
+    result.enabled.value = false;
+    await nextTick();
+    expect(result.stream.value).toBeUndefined();
+    scope.stop();
+  });
+
+  it('restart() releases the old stream and acquires a new one', async () => {
+    const first = createStream();
+    const second = createStream();
+    const getUserMedia = vi.fn()
+      .mockResolvedValueOnce(first)
+      .mockResolvedValueOnce(second);
+    const { navigator } = stubNavigator(getUserMedia);
+    const scope = effectScope();
+    let result!: UseUserMediaReturn;
+    scope.run(() => {
+      result = useUserMedia({ navigator });
+    });
+
+    await result.start();
+    expect(result.stream.value).toBe(first);
+
+    await result.restart();
+    for (const track of first._tracks)
+      expect(track.stop).toHaveBeenCalled();
+    expect(result.stream.value).toBe(second);
+    expect(getUserMedia).toHaveBeenCalledTimes(2);
+    scope.stop();
+  });
+
+  it('auto-restarts on constraint change while running', async () => {
+    const first = createStream();
+    const second = createStream();
+    const getUserMedia = vi.fn()
+      .mockResolvedValueOnce(first)
+      .mockResolvedValueOnce(second);
+    const { navigator } = stubNavigator(getUserMedia);
+    const scope = effectScope();
+    let result!: UseUserMediaReturn;
+    scope.run(() => {
+      result = useUserMedia({ navigator, constraints: { video: true } });
+    });
+
+    await result.start();
+    expect(getUserMedia).toHaveBeenCalledTimes(1);
+
+    result.constraints.value = { video: { deviceId: 'cam-2' } };
+    await nextTick();
+    await Promise.resolve();
+    await Promise.resolve();
+
+    expect(getUserMedia).toHaveBeenCalledTimes(2);
+    expect(result.stream.value).toBe(second);
+    scope.stop();
+  });
+
+  it('does not restart on constraint change when not running', async () => {
+    const { navigator, getUserMedia } = stubNavigator();
+    const scope = effectScope();
+    let result!: UseUserMediaReturn;
+    scope.run(() => {
+      result = useUserMedia({ navigator, constraints: { video: true } });
+    });
+
+    result.constraints.value = { video: false, audio: true };
+    await nextTick();
+    expect(getUserMedia).not.toHaveBeenCalled();
+    scope.stop();
+  });
+
+  it('does not auto-restart when autoSwitch is false', async () => {
+    const { navigator, getUserMedia } = stubNavigator();
+    const scope = effectScope();
+    let result!: UseUserMediaReturn;
+    scope.run(() => {
+      result = useUserMedia({ navigator, autoSwitch: false, constraints: { video: true } });
+    });
+
+    await result.start();
+    expect(getUserMedia).toHaveBeenCalledTimes(1);
+
+    result.constraints.value = { video: { deviceId: 'cam-2' } };
+    await nextTick();
+    await Promise.resolve();
+    expect(getUserMedia).toHaveBeenCalledTimes(1);
+    scope.stop();
+  });
+
+  it('invokes onError and leaves stream undefined when getUserMedia rejects', async () => {
+    const error = new Error('denied');
+    const getUserMedia = vi.fn(async () => {
+      throw error;
+    });
+    const { navigator } = stubNavigator(getUserMedia);
+    const onError = vi.fn();
+    const scope = effectScope();
+    let result!: UseUserMediaReturn;
+    scope.run(() => {
+      result = useUserMedia({ navigator, onError });
+    });
+
+    const returned = await result.start();
+    expect(onError).toHaveBeenCalledWith(error);
+    expect(returned).toBeUndefined();
+    expect(result.stream.value).toBeUndefined();
+    expect(result.enabled.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('discards a stale stream when superseded by a stop', async () => {
+    let resolveFirst!: (s: MediaStream) => void;
+    const first = createStream();
+    const getUserMedia = vi.fn(() => new Promise<MediaStream>((resolve) => {
+      resolveFirst = resolve;
+    }));
+    const { navigator } = stubNavigator(getUserMedia);
+    const scope = effectScope();
+    let result!: UseUserMediaReturn;
+    scope.run(() => {
+      result = useUserMedia({ navigator });
+    });
+
+    const pending = result.start();
+    // Stop before the acquisition resolves.
+    result.stop();
+    resolveFirst(first);
+    await pending;
+
+    // The orphaned stream must be torn down, not assigned.
+    for (const track of first._tracks)
+      expect(track.stop).toHaveBeenCalled();
+    expect(result.stream.value).toBeUndefined();
+    scope.stop();
+  });
+
+  it('stops the stream when the scope is disposed', async () => {
+    const stream = createStream();
+    const { navigator } = stubNavigator(vi.fn(async () => stream));
+    const scope = effectScope();
+    let result!: UseUserMediaReturn;
+    scope.run(() => {
+      result = useUserMedia({ navigator });
+    });
+
+    await result.start();
+    expect(result.stream.value).toBe(stream);
+
+    scope.stop();
+    for (const track of stream._tracks)
+      expect(track.stop).toHaveBeenCalled();
+  });
+
+  it('does not acquire when unsupported even if enabled', async () => {
+    const navigator = {} as Navigator;
+    const scope = effectScope();
+    let result!: UseUserMediaReturn;
+    scope.run(() => {
+      result = useUserMedia({ navigator, enabled: true });
+    });
+
+    await Promise.resolve();
+    expect(result.stream.value).toBeUndefined();
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/media/useUserMedia/index.ts b/vue/toolkit/src/composables/media/useUserMedia/index.ts
new file mode 100644
index 0000000..f54e2c4
--- /dev/null
+++ b/vue/toolkit/src/composables/media/useUserMedia/index.ts
@@ -0,0 +1,218 @@
+import { ref as deepRef, shallowReadonly, shallowRef, toValue, watch } from 'vue';
+import type { MaybeRefOrGetter, Ref, ShallowRef } from 'vue';
+import { noop } from '@robonen/stdlib';
+import { defaultNavigator } from '@/types';
+import type { ConfigurableNavigator } from '@/types';
+import { useSupported } from '@/composables/utilities/useSupported';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+
+export interface UseUserMediaOptions extends ConfigurableNavigator {
+  /**
+   * Whether the stream should start immediately and stay open.
+   *
+   * @default false
+   */
+  enabled?: MaybeRefOrGetter<boolean>;
+
+  /**
+   * Recreate the stream automatically when `constraints` change while the
+   * stream is enabled. Disable to apply constraint changes manually via
+   * `restart()`.
+   *
+   * @default true
+   */
+  autoSwitch?: MaybeRefOrGetter<boolean>;
+
+  /**
+   * `MediaStreamConstraints` applied to the requested `MediaStream`.
+   *
+   * @default {}
+   */
+  constraints?: MaybeRefOrGetter<MediaStreamConstraints>;
+
+  /**
+   * Called whenever `getUserMedia()` rejects (e.g. permission denied, device
+   * busy). Receives the thrown error so failures can be surfaced without
+   * inspecting them through a watcher.
+   *
+   * @default () => {}
+   */
+  onError?: (error: unknown) => void;
+}
+
+export interface UseUserMediaReturn {
+  /**
+   * Whether `navigator.mediaDevices.getUserMedia` is available.
+   */
+  isSupported: Readonly<Ref<boolean>>;
+
+  /**
+   * The active `MediaStream`, or `undefined` while stopped.
+   */
+  stream: Readonly<ShallowRef<MediaStream | undefined>>;
+
+  /**
+   * Request the stream and mark it as enabled. Resolves with the resulting
+   * stream, or `undefined` when unsupported or already running.
+   */
+  start: () => Promise<MediaStream | undefined>;
+
+  /**
+   * Stop all tracks, release the stream, and mark it as disabled.
+   */
+  stop: () => void;
+
+  /**
+   * Stop the current stream and acquire a fresh one with the latest
+   * constraints.
+   */
+  restart: () => Promise<MediaStream | undefined>;
+
+  /**
+   * The constraints applied to the next acquisition. Mutating or replacing
+   * this re-acquires the stream while enabled and `autoSwitch` is `true`.
+   */
+  constraints: Ref<MediaStreamConstraints | undefined>;
+
+  /**
+   * Whether the stream is currently enabled. Toggle to start/stop.
+   */
+  enabled: ShallowRef<boolean>;
+
+  /**
+   * Whether constraint changes auto-restart the stream while enabled.
+   */
+  autoSwitch: ShallowRef<boolean>;
+}
+
+/**
+ * @name useUserMedia
+ * @category Media
+ * @description Reactive `navigator.mediaDevices.getUserMedia` streaming. Acquires
+ * a `MediaStream` for camera/microphone capture, keeps it in sync with reactive
+ * constraints, and auto-restarts on constraint changes while enabled. SSR-safe
+ * and race-safe — overlapping acquisitions never leave an orphaned stream open.
+ *
+ * @param {UseUserMediaOptions} [options={}] Options
+ * @returns {UseUserMediaReturn} Reactive support flag, stream, controls, and reactive `enabled`/`autoSwitch`/`constraints`
+ *
+ * @example
+ * const { stream, enabled } = useUserMedia({ constraints: { video: true } });
+ * enabled.value = true; // start capturing
+ *
+ * @example
+ * // Switch cameras reactively — the stream restarts automatically
+ * const { constraints, start } = useUserMedia();
+ * await start();
+ * constraints.value = { video: { deviceId: nextCameraId } };
+ *
+ * @since 0.0.15
+ */
+export function useUserMedia(options: UseUserMediaOptions = {}): UseUserMediaReturn {
+  const {
+    navigator = defaultNavigator,
+    onError = noop,
+  } = options;
+
+  const enabled = shallowRef(toValue(options.enabled) ?? false);
+  const autoSwitch = shallowRef(toValue(options.autoSwitch) ?? true);
+  const constraints = deepRef<MediaStreamConstraints | undefined>(toValue(options.constraints));
+
+  const isSupported = useSupported(() => navigator?.mediaDevices?.getUserMedia);
+
+  const stream = shallowRef<MediaStream | undefined>();
+
+  // Monotonic token guarding against stale async acquisitions: getUserMedia is
+  // async, so a rapid stop()/restart() could resolve out of order and overwrite
+  // the current stream with an orphaned one. Only the latest request wins.
+  let acquireToken = 0;
+
+  function getDeviceOptions(type: 'video' | 'audio'): MediaStreamConstraints[typeof type] {
+    const value = constraints.value;
+    if (!value)
+      return false;
+
+    return value[type] ?? false;
+  }
+
+  function _stop(): void {
+    const tracks = stream.value?.getTracks();
+    if (tracks)
+      for (const track of tracks) track.stop();
+
+    stream.value = undefined;
+  }
+
+  async function _start(): Promise<MediaStream | undefined> {
+    if (!isSupported.value || stream.value)
+      return stream.value;
+
+    const token = ++acquireToken;
+
+    try {
+      const media = await navigator!.mediaDevices.getUserMedia({
+        video: getDeviceOptions('video'),
+        audio: getDeviceOptions('audio'),
+      });
+
+      // A newer request (or a stop) superseded this one while awaiting — discard
+      // the now-orphaned stream instead of leaking the device handle.
+      if (token !== acquireToken) {
+        for (const track of media.getTracks()) track.stop();
+        return stream.value;
+      }
+
+      stream.value = media;
+      return media;
+    }
+    catch (error) {
+      onError(error);
+      return undefined;
+    }
+  }
+
+  async function start(): Promise<MediaStream | undefined> {
+    await _start();
+    if (stream.value)
+      enabled.value = true;
+
+    return stream.value;
+  }
+
+  function stop(): void {
+    // Invalidate any in-flight acquisition before releasing tracks.
+    acquireToken++;
+    _stop();
+    enabled.value = false;
+  }
+
+  async function restart(): Promise<MediaStream | undefined> {
+    acquireToken++;
+    _stop();
+    return start();
+  }
+
+  watch(enabled, (value) => {
+    if (value)
+      void _start();
+    else _stop();
+  }, { immediate: true });
+
+  watch(constraints, () => {
+    if (autoSwitch.value && stream.value)
+      void restart();
+  }, { deep: true });
+
+  tryOnScopeDispose(stop);
+
+  return {
+    isSupported,
+    stream: shallowReadonly(stream),
+    start,
+    stop,
+    restart,
+    constraints,
+    enabled,
+    autoSwitch,
+  };
+}
diff --git a/vue/toolkit/src/composables/media/useWebWorker/demo.vue b/vue/toolkit/src/composables/media/useWebWorker/demo.vue
new file mode 100644
index 0000000..ac75179
--- /dev/null
+++ b/vue/toolkit/src/composables/media/useWebWorker/demo.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { ref, shallowRef, watch } from 'vue';
+import { useWebWorker } from './index';
+
+// Build a self-contained worker from a Blob so the demo needs no external file.
+// The worker echoes back an uppercased, reversed version of the input string.
+function createWorker(): Worker {
+  const source = `
+    onmessage = (e) => {
+      const text = String(e.data ?? '');
+      const transformed = text.toUpperCase().split('').reverse().join('');
+      postMessage({ transformed, length: text.length, at: Date.now() });
+    };
+  `;
+  const blob = new Blob([source], { type: 'application/javascript' });
+  return new Worker(URL.createObjectURL(blob));
+}
+
+const input = ref('Hello from the main thread');
+const log = shallowRef<string[]>([]);
+
+const { data, post, isSupported } = useWebWorker<{ transformed: string; length: number; at: number }>(
+  () => createWorker(),
+);
+
+watch(data, (value) => {
+  if (value)
+    log.value = [`${value.length} chars → ${value.transformed}`, ...log.value].slice(0, 4);
+});
+
+function send(): void {
+  if (input.value.trim())
+    post(input.value);
+}
+</script>
+
+<template>
+  <div class="w-full max-w-md flex flex-col gap-4">
+    <div
+      v-if="!isSupported"
+      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-600 dark:text-amber-400"
+    >
+      Web Workers are not supported in this browser.
+    </div>
+
+    <template v-else>
+      <div class="flex flex-col gap-1.5">
+        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Message to worker</label>
+        <div class="flex items-center gap-2">
+          <input
+            v-model="input"
+            type="text"
+            class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+            placeholder="Type something…"
+            @keydown.enter="send"
+          >
+          <button
+            type="button"
+            class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-2 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+            :disabled="!input.trim()"
+            @click="send"
+          >
+            Post
+          </button>
+        </div>
+      </div>
+
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-2">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Latest reply</span>
+        <p
+          v-if="data"
+          class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) break-all"
+        >
+          {{ data.transformed }}
+        </p>
+        <p v-else class="text-sm text-(--fg-subtle)">
+          The worker runs off the main thread — post a message to see its reply.
+        </p>
+      </div>
+
+      <div v-if="log.length" class="flex flex-col gap-1.5">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">History</span>
+        <ul class="flex flex-col gap-1">
+          <li
+            v-for="(entry, i) in log"
+            :key="i"
+            class="rounded-md border border-(--border) bg-(--bg-inset) px-2.5 py-1.5 font-mono text-xs text-(--fg-muted) break-all"
+          >
+            {{ entry }}
+          </li>
+        </ul>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/media/useWebWorker/index.test.ts b/vue/toolkit/src/composables/media/useWebWorker/index.test.ts
new file mode 100644
index 0000000..9427ac3
--- /dev/null
+++ b/vue/toolkit/src/composables/media/useWebWorker/index.test.ts
@@ -0,0 +1,171 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { effectScope } from 'vue';
+import type { UseWebWorkerReturn } from '.';
+import { useWebWorker } from '.';
+
+class FakeWorker {
+  listeners: Record<string, Set<(event: any) => void>> = {};
+  postMessage = vi.fn();
+  terminate = vi.fn();
+
+  addEventListener(type: string, listener: (event: any) => void): void {
+    (this.listeners[type] ??= new Set()).add(listener);
+  }
+
+  removeEventListener(type: string, listener: (event: any) => void): void {
+    this.listeners[type]?.delete(listener);
+  }
+
+  emit(type: string, event: any): void {
+    this.listeners[type]?.forEach(listener => listener(event));
+  }
+}
+
+function stubWindow(): { window: Window; WorkerCtor: ReturnType<typeof vi.fn>; created: FakeWorker[] } {
+  const created: FakeWorker[] = [];
+  const WorkerCtor = vi.fn(function (this: unknown) {
+    const instance = new FakeWorker();
+    created.push(instance);
+    return instance as unknown as Worker;
+  });
+
+  const window = { Worker: WorkerCtor } as unknown as Window;
+  return { window, WorkerCtor, created };
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe(useWebWorker, () => {
+  it('reports support when Worker exists on the window', () => {
+    const { window } = stubWindow();
+    const scope = effectScope();
+    let ww: UseWebWorkerReturn;
+    scope.run(() => {
+      ww = useWebWorker('/worker.js', { window });
+    });
+    expect(ww!.isSupported.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('is not supported and is a no-op without Worker (SSR path)', () => {
+    const window = {} as unknown as Window;
+    const scope = effectScope();
+    let ww: UseWebWorkerReturn;
+    scope.run(() => {
+      ww = useWebWorker('/worker.js', { window });
+    });
+    expect(ww!.isSupported.value).toBeFalsy();
+    expect(ww!.worker.value).toBeUndefined();
+    // post / terminate must not throw when unsupported
+    expect(() => ww!.post('x')).not.toThrow();
+    expect(() => ww!.terminate()).not.toThrow();
+    scope.stop();
+  });
+
+  it('constructs a worker from a URL string and forwards workerOptions', () => {
+    const { window, WorkerCtor } = stubWindow();
+    const workerOptions = { type: 'module' as const };
+    const scope = effectScope();
+    scope.run(() => {
+      useWebWorker('/worker.js', { window, workerOptions });
+    });
+    expect(WorkerCtor).toHaveBeenCalledWith('/worker.js', workerOptions);
+    scope.stop();
+  });
+
+  it('accepts a factory function returning a Worker', () => {
+    const { window } = stubWindow();
+    const instance = new FakeWorker();
+    const factory = vi.fn(() => instance as unknown as Worker);
+    const scope = effectScope();
+    let ww: UseWebWorkerReturn;
+    scope.run(() => {
+      ww = useWebWorker(factory, { window });
+    });
+    expect(factory).toHaveBeenCalledOnce();
+    expect(ww!.worker.value).toBe(instance);
+    scope.stop();
+  });
+
+  it('accepts an existing Worker instance directly', () => {
+    const { window } = stubWindow();
+    const instance = new FakeWorker();
+    const scope = effectScope();
+    let ww: UseWebWorkerReturn;
+    scope.run(() => {
+      ww = useWebWorker(instance as unknown as Worker, { window });
+    });
+    expect(ww!.worker.value).toBe(instance);
+    scope.stop();
+  });
+
+  it('updates data and calls onMessage when the worker posts a message', () => {
+    const { window, created } = stubWindow();
+    const onMessage = vi.fn();
+    const scope = effectScope();
+    let ww: UseWebWorkerReturn<{ value: number }>;
+    scope.run(() => {
+      ww = useWebWorker<{ value: number }>('/worker.js', { window, onMessage });
+    });
+
+    created[0]!.emit('message', { data: { value: 42 } });
+    expect(onMessage).toHaveBeenCalledOnce();
+    expect(ww!.data.value).toEqual({ value: 42 });
+    scope.stop();
+  });
+
+  it('post forwards arguments to the worker', () => {
+    const { window, created } = stubWindow();
+    const scope = effectScope();
+    let ww: UseWebWorkerReturn;
+    scope.run(() => {
+      ww = useWebWorker('/worker.js', { window });
+    });
+
+    const transfer: Transferable[] = [];
+    ww!.post({ cmd: 'run' }, transfer);
+    expect(created[0]!.postMessage).toHaveBeenCalledWith({ cmd: 'run' }, transfer);
+    scope.stop();
+  });
+
+  it('invokes onError on messageerror and error events', () => {
+    const { window, created } = stubWindow();
+    const onError = vi.fn();
+    const scope = effectScope();
+    scope.run(() => {
+      useWebWorker('/worker.js', { window, onError });
+    });
+
+    created[0]!.emit('messageerror', { type: 'messageerror' });
+    created[0]!.emit('error', { type: 'error' });
+    expect(onError).toHaveBeenCalledTimes(2);
+    scope.stop();
+  });
+
+  it('terminate stops the worker and clears the reference', () => {
+    const { window, created } = stubWindow();
+    const scope = effectScope();
+    let ww: UseWebWorkerReturn;
+    scope.run(() => {
+      ww = useWebWorker('/worker.js', { window });
+    });
+
+    ww!.terminate();
+    expect(created[0]!.terminate).toHaveBeenCalledOnce();
+    expect(ww!.worker.value).toBeUndefined();
+    scope.stop();
+  });
+
+  it('terminates the worker automatically when the scope is disposed', () => {
+    const { window, created } = stubWindow();
+    const scope = effectScope();
+    scope.run(() => {
+      useWebWorker('/worker.js', { window });
+    });
+
+    scope.stop();
+    expect(created[0]!.terminate).toHaveBeenCalledOnce();
+  });
+});
diff --git a/vue/toolkit/src/composables/media/useWebWorker/index.ts b/vue/toolkit/src/composables/media/useWebWorker/index.ts
new file mode 100644
index 0000000..9eae0c4
--- /dev/null
+++ b/vue/toolkit/src/composables/media/useWebWorker/index.ts
@@ -0,0 +1,141 @@
+import type { AnyFunction, VoidFunction } from '@robonen/stdlib';
+import { isFunction, isString, noop } from '@robonen/stdlib';
+import { shallowRef } from 'vue';
+import { defaultWindow } from '@/types';
+import type { ConfigurableWindow } from '@/types';
+import type { ShallowRef } from 'vue';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import { useSupported } from '@/composables/utilities/useSupported';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+
+export type WebWorkerSource = string | URL | Worker | (() => Worker);
+
+type WorkerPostMessage = (typeof Worker)['prototype']['postMessage'];
+
+export interface UseWebWorkerOptions extends ConfigurableWindow {
+  /**
+   * Options forwarded to the `Worker` constructor when a URL string is passed
+   */
+  workerOptions?: WorkerOptions;
+
+  /**
+   * Called with the `MessageEvent` whenever the worker posts a message back.
+   * Runs before `data` is updated.
+   */
+  onMessage?: (event: MessageEvent) => void;
+
+  /**
+   * Called when the worker fails to deserialize a message (`messageerror`)
+   * or throws an uncaught error (`error`).
+   *
+   * @default noop
+   */
+  onError?: (event: ErrorEvent | MessageEvent) => void;
+}
+
+export interface UseWebWorkerReturn<Data = any> {
+  /**
+   * The latest data received from the worker via `postMessage`
+   */
+  data: ShallowRef<Data | null>;
+
+  /**
+   * Send a message to the worker. No-op when the worker is unavailable.
+   */
+  post: WorkerPostMessage;
+
+  /**
+   * Terminate the worker immediately and release the reference.
+   */
+  terminate: VoidFunction;
+
+  /**
+   * The underlying `Worker` instance, or `undefined` when unsupported / terminated.
+   */
+  worker: ShallowRef<Worker | undefined>;
+
+  /**
+   * Whether `Worker` is available in the current environment (SSR-safe).
+   */
+  isSupported: ShallowRef<boolean>;
+}
+
+/**
+ * @name useWebWorker
+ * @category Media
+ * @description Simple Web Worker communication with reactive incoming data and automatic teardown
+ *
+ * @param {WebWorkerSource} source A `Worker` instance, a script URL/string, or a factory returning a `Worker`
+ * @param {UseWebWorkerOptions} [options] Worker constructor options and message/error hooks
+ * @returns {UseWebWorkerReturn} `{ data, post, terminate, worker, isSupported }`
+ *
+ * @example
+ * const { data, post, terminate } = useWebWorker('/worker.js');
+ * post({ type: 'start' });
+ * watch(data, value => console.log(value));
+ *
+ * @example
+ * const { data } = useWebWorker(() => new Worker(new URL('./worker.ts', import.meta.url)));
+ *
+ * @since 0.0.15
+ */
+export function useWebWorker<Data = any>(
+  source: WebWorkerSource,
+  options: UseWebWorkerOptions = {},
+): UseWebWorkerReturn<Data> {
+  const {
+    window = defaultWindow,
+    workerOptions,
+    onMessage,
+    onError = noop,
+  } = options;
+
+  const isSupported = useSupported(() => !!window && 'Worker' in window);
+  const data = shallowRef<Data | null>(null);
+  const worker = shallowRef<Worker | undefined>();
+
+  const post = ((message: any, transfer?: any) => {
+    if (worker.value)
+      worker.value.postMessage(message, transfer);
+  }) as WorkerPostMessage;
+
+  const terminate: VoidFunction = () => {
+    if (worker.value) {
+      worker.value.terminate();
+      worker.value = undefined;
+    }
+  };
+
+  if (window && 'Worker' in window) {
+    const WorkerCtor = (window as Window & { Worker: typeof Worker }).Worker;
+
+    if (isString(source) || source instanceof URL)
+      worker.value = new WorkerCtor(source, workerOptions);
+    else if (isFunction(source))
+      worker.value = (source as AnyFunction)();
+    else
+      worker.value = source;
+
+    const instance = worker.value;
+
+    if (instance) {
+      useEventListener(instance, 'message', (event: MessageEvent) => {
+        onMessage?.(event);
+        data.value = event.data;
+      }, { passive: true });
+
+      useEventListener(instance, 'messageerror', (event: MessageEvent) => onError(event), { passive: true });
+      useEventListener(instance, 'error', (event: ErrorEvent) => onError(event), { passive: true });
+    }
+
+    tryOnScopeDispose(terminate);
+  }
+
+  return {
+    data,
+    post,
+    terminate,
+    worker,
+    isSupported,
+  };
+}
diff --git a/vue/toolkit/src/composables/media/useWebWorkerFn/demo.vue b/vue/toolkit/src/composables/media/useWebWorkerFn/demo.vue
new file mode 100644
index 0000000..e446b5a
--- /dev/null
+++ b/vue/toolkit/src/composables/media/useWebWorkerFn/demo.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { computed, ref, shallowRef } from 'vue';
+import { useWebWorkerFn } from './index';
+
+const iterations = ref(50_000_000);
+const result = shallowRef<number | undefined>();
+const elapsed = shallowRef<number | undefined>();
+
+// A deliberately heavy, self-contained computation: sum of primes' count.
+// Runs in a transient worker so the UI stays responsive while it churns.
+const { workerFn, workerStatus, workerTerminate, isSupported } = useWebWorkerFn(
+  (count: number) => {
+    let sum = 0;
+    for (let i = 0; i < count; i++)
+      sum += Math.sqrt(i) % 1;
+    return Math.round(sum);
+  },
+  { timeout: 15_000 },
+);
+
+const isRunning = computed(() => workerStatus.value === 'RUNNING');
+
+async function run(): Promise<void> {
+  result.value = undefined;
+  elapsed.value = undefined;
+  const startedAt = performance.now();
+  try {
+    result.value = await workerFn(iterations.value);
+    elapsed.value = Math.round(performance.now() - startedAt);
+  }
+  catch {
+    // Status reflects ERROR / TIMEOUT_EXPIRED; nothing else to do here.
+  }
+}
+
+const statusStyles: Record<string, string> = {
+  PENDING: 'text-(--fg-muted)',
+  RUNNING: 'text-sky-600 dark:text-sky-400',
+  SUCCESS: 'text-emerald-600 dark:text-emerald-400',
+  ERROR: 'text-red-600 dark:text-red-400',
+  TIMEOUT_EXPIRED: 'text-amber-600 dark:text-amber-400',
+};
+</script>
+
+<template>
+  <div class="w-full max-w-md flex flex-col gap-4">
+    <div
+      v-if="!isSupported"
+      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-600 dark:text-amber-400"
+    >
+      Web Workers are not supported in this browser.
+    </div>
+
+    <template v-else>
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+        <div class="flex items-center justify-between">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Iterations</span>
+          <span class="font-mono text-sm tabular-nums text-(--fg)">{{ iterations.toLocaleString() }}</span>
+        </div>
+        <input
+          v-model.number="iterations"
+          type="range"
+          min="10000000"
+          max="200000000"
+          step="10000000"
+          :disabled="isRunning"
+          class="w-full accent-(--accent) cursor-pointer disabled:cursor-not-allowed disabled:opacity-40"
+        >
+      </div>
+
+      <div class="flex items-center gap-2">
+        <button
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          :disabled="isRunning"
+          @click="run"
+        >
+          <span v-if="isRunning" class="size-2 rounded-full bg-(--accent-fg) animate-pulse" />
+          {{ isRunning ? 'Computing…' : 'Run in worker' }}
+        </button>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          :disabled="!isRunning"
+          @click="workerTerminate()"
+        >
+          Cancel
+        </button>
+      </div>
+
+      <div class="grid grid-cols-2 gap-2">
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex flex-col gap-1">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Result</span>
+          <span class="font-mono text-xl font-bold tabular-nums text-(--fg)">
+            {{ result?.toLocaleString() ?? '—' }}
+          </span>
+        </div>
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex flex-col gap-1">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Elapsed</span>
+          <span class="font-mono text-xl font-bold tabular-nums text-(--fg)">
+            {{ elapsed !== undefined ? `${elapsed}ms` : '—' }}
+          </span>
+        </div>
+      </div>
+
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Status</span>
+        <span class="font-mono text-sm" :class="statusStyles[workerStatus]">{{ workerStatus }}</span>
+      </div>
+
+      <p class="text-xs text-(--fg-subtle)">
+        The heavy loop runs off the main thread, so this UI stays interactive while it computes.
+      </p>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/media/useWebWorkerFn/index.test.ts b/vue/toolkit/src/composables/media/useWebWorkerFn/index.test.ts
new file mode 100644
index 0000000..0343346
--- /dev/null
+++ b/vue/toolkit/src/composables/media/useWebWorkerFn/index.test.ts
@@ -0,0 +1,276 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick } from 'vue';
+import type { UseWebWorkerFnReturn } from '.';
+import { useWebWorkerFn } from '.';
+
+/**
+ * A fake Worker that runs the blob source synchronously by exposing the
+ * function from `onmessage`. We don't actually execute the stringified code —
+ * instead the test supplies a behavior closure that decides what to post back.
+ */
+class FakeWorker {
+  onmessage: ((event: MessageEvent) => void) | null = null;
+  onerror: ((event: ErrorEvent) => void) | null = null;
+  terminate = vi.fn();
+  url: string;
+
+  constructor(url: string) {
+    this.url = url;
+    FakeWorker.created.push(this);
+  }
+
+  postMessage(data: unknown): void {
+    FakeWorker.lastMessage = data;
+    FakeWorker.behavior?.(this, data);
+  }
+
+  static created: FakeWorker[] = [];
+  static lastMessage: unknown;
+  static behavior: ((worker: FakeWorker, data: unknown) => void) | null = null;
+
+  static reset(): void {
+    FakeWorker.created = [];
+    FakeWorker.lastMessage = undefined;
+    FakeWorker.behavior = null;
+  }
+}
+
+function stubWindow(): { window: Window; createObjectURL: ReturnType<typeof vi.fn>; revokeObjectURL: ReturnType<typeof vi.fn>; clearTimeout: ReturnType<typeof vi.fn> } {
+  const createObjectURL = vi.fn(() => 'blob:fake-url');
+  const revokeObjectURL = vi.fn();
+  const clearTimeout = vi.fn((id: number) => globalThis.clearTimeout(id));
+  const setTimeout = ((cb: () => void, ms?: number) => globalThis.setTimeout(cb, ms)) as Window['setTimeout'];
+
+  const window = {
+    Worker: FakeWorker as unknown as typeof Worker,
+    Blob: globalThis.Blob,
+    URL: { createObjectURL, revokeObjectURL } as unknown as typeof URL,
+    setTimeout,
+    clearTimeout,
+  } as unknown as Window;
+
+  return { window, createObjectURL, revokeObjectURL, clearTimeout };
+}
+
+beforeEach(() => {
+  FakeWorker.reset();
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+  vi.useRealTimers();
+});
+
+describe(useWebWorkerFn, () => {
+  it('reports support when Worker / Blob / URL exist on the window', () => {
+    const { window } = stubWindow();
+    const scope = effectScope();
+    let api: UseWebWorkerFnReturn<() => number>;
+    scope.run(() => {
+      api = useWebWorkerFn(() => 1, { window });
+    });
+    expect(api!.isSupported.value).toBeTruthy();
+    expect(api!.workerStatus.value).toBe('PENDING');
+    scope.stop();
+  });
+
+  it('is unsupported and rejects without throwing (SSR path)', async () => {
+    const window = {} as unknown as Window;
+    const scope = effectScope();
+    let api: UseWebWorkerFnReturn<() => number>;
+    scope.run(() => {
+      api = useWebWorkerFn(() => 1, { window });
+    });
+
+    expect(api!.isSupported.value).toBeFalsy();
+    await expect(api!.workerFn()).rejects.toThrow(/not supported/);
+    expect(() => api!.workerTerminate()).not.toThrow();
+    scope.stop();
+  });
+
+  it('resolves with the worker result on SUCCESS', async () => {
+    const { window } = stubWindow();
+    FakeWorker.behavior = (worker) => {
+      worker.onmessage?.({ data: ['SUCCESS', 42] } as MessageEvent);
+    };
+
+    const scope = effectScope();
+    let api: UseWebWorkerFnReturn<(a: number, b: number) => number>;
+    scope.run(() => {
+      api = useWebWorkerFn((a: number, b: number) => a + b, { window });
+    });
+
+    await expect(api!.workerFn(40, 2)).resolves.toBe(42);
+    expect(FakeWorker.lastMessage).toEqual([[40, 2]]);
+    expect(api!.workerStatus.value).toBe('SUCCESS');
+    scope.stop();
+  });
+
+  it('rejects and calls onError on an ERROR message', async () => {
+    const { window } = stubWindow();
+    const onError = vi.fn();
+    FakeWorker.behavior = (worker) => {
+      worker.onmessage?.({ data: ['ERROR', 'boom'] } as MessageEvent);
+    };
+
+    const scope = effectScope();
+    let api: UseWebWorkerFnReturn<() => number>;
+    scope.run(() => {
+      api = useWebWorkerFn(() => 1, { window, onError });
+    });
+
+    await expect(api!.workerFn()).rejects.toBe('boom');
+    expect(onError).toHaveBeenCalledWith('boom');
+    expect(api!.workerStatus.value).toBe('ERROR');
+    scope.stop();
+  });
+
+  it('rejects and calls onError on a worker error event', async () => {
+    const { window } = stubWindow();
+    const onError = vi.fn();
+    const errorEvent = { preventDefault: vi.fn(), message: 'crashed' } as unknown as ErrorEvent;
+    FakeWorker.behavior = (worker) => {
+      worker.onerror?.(errorEvent);
+    };
+
+    const scope = effectScope();
+    let api: UseWebWorkerFnReturn<() => number>;
+    scope.run(() => {
+      api = useWebWorkerFn(() => 1, { window, onError });
+    });
+
+    await expect(api!.workerFn()).rejects.toBe(errorEvent);
+    expect(errorEvent.preventDefault).toHaveBeenCalledOnce();
+    expect(onError).toHaveBeenCalledWith(errorEvent);
+    expect(api!.workerStatus.value).toBe('ERROR');
+    scope.stop();
+  });
+
+  it('sets RUNNING status while a run is in flight', () => {
+    const { window } = stubWindow();
+    // behavior left null: worker never posts back -> stays RUNNING
+    const scope = effectScope();
+    let api: UseWebWorkerFnReturn<() => number>;
+    scope.run(() => {
+      api = useWebWorkerFn(() => 1, { window });
+    });
+
+    void api!.workerFn();
+    expect(api!.workerStatus.value).toBe('RUNNING');
+    scope.stop();
+  });
+
+  it('rejects a second concurrent run while one is active', async () => {
+    const { window } = stubWindow();
+    const scope = effectScope();
+    let api: UseWebWorkerFnReturn<() => number>;
+    scope.run(() => {
+      api = useWebWorkerFn(() => 1, { window });
+    });
+
+    void api!.workerFn();
+    await expect(api!.workerFn()).rejects.toThrow(/one worker run/);
+    scope.stop();
+  });
+
+  it('forwards dependencies and creates a blob URL', () => {
+    const { window, createObjectURL } = stubWindow();
+    const scope = effectScope();
+    scope.run(() => {
+      const api = useWebWorkerFn(() => 1, {
+        window,
+        dependencies: ['https://cdn/dep.js'],
+        localDependencies: [function helper() { return 2; }],
+      });
+      void api.workerFn();
+    });
+
+    expect(createObjectURL).toHaveBeenCalledOnce();
+    const blob = createObjectURL.mock.calls[0]![0] as Blob;
+    expect(blob).toBeInstanceOf(Blob);
+    scope.stop();
+  });
+
+  it('terminates and revokes the object URL on success', async () => {
+    const { window, revokeObjectURL } = stubWindow();
+    FakeWorker.behavior = (worker) => {
+      worker.onmessage?.({ data: ['SUCCESS', 'ok'] } as MessageEvent);
+    };
+
+    const scope = effectScope();
+    let api: UseWebWorkerFnReturn<() => string>;
+    scope.run(() => {
+      api = useWebWorkerFn(() => 'ok', { window });
+    });
+
+    await api!.workerFn();
+    expect(FakeWorker.created[0]!.terminate).toHaveBeenCalledOnce();
+    expect(revokeObjectURL).toHaveBeenCalledWith('blob:fake-url');
+    scope.stop();
+  });
+
+  it('workerTerminate resets the status and tears down the worker', () => {
+    const { window, revokeObjectURL } = stubWindow();
+    const scope = effectScope();
+    let api: UseWebWorkerFnReturn<() => number>;
+    scope.run(() => {
+      api = useWebWorkerFn(() => 1, { window });
+    });
+
+    void api!.workerFn();
+    api!.workerTerminate();
+    expect(FakeWorker.created[0]!.terminate).toHaveBeenCalledOnce();
+    expect(revokeObjectURL).toHaveBeenCalledOnce();
+    expect(api!.workerStatus.value).toBe('PENDING');
+    scope.stop();
+  });
+
+  it('honors a custom termination status', () => {
+    const { window } = stubWindow();
+    const scope = effectScope();
+    let api: UseWebWorkerFnReturn<() => number>;
+    scope.run(() => {
+      api = useWebWorkerFn(() => 1, { window });
+    });
+
+    void api!.workerFn();
+    api!.workerTerminate('TIMEOUT_EXPIRED');
+    expect(api!.workerStatus.value).toBe('TIMEOUT_EXPIRED');
+    scope.stop();
+  });
+
+  it('times out and rejects with TIMEOUT_EXPIRED', async () => {
+    vi.useFakeTimers();
+    const { window } = stubWindow();
+    const onError = vi.fn();
+    // never post back -> let the timeout fire
+    const scope = effectScope();
+    let api: UseWebWorkerFnReturn<() => number>;
+    scope.run(() => {
+      api = useWebWorkerFn(() => 1, { window, timeout: 1000, onError });
+    });
+
+    const pending = api!.workerFn();
+    // eslint-disable-next-line vitest/valid-expect -- intentionally deferred; awaited below after advancing timers
+    const assertion = expect(pending).rejects.toThrow('TIMEOUT_EXPIRED');
+    await vi.advanceTimersByTimeAsync(1000);
+    await assertion;
+    expect(api!.workerStatus.value).toBe('TIMEOUT_EXPIRED');
+    expect(onError).toHaveBeenCalledOnce();
+    scope.stop();
+  });
+
+  it('terminates automatically when the scope is disposed', async () => {
+    const { window } = stubWindow();
+    const scope = effectScope();
+    let api: UseWebWorkerFnReturn<() => number>;
+    scope.run(() => {
+      api = useWebWorkerFn(() => 1, { window });
+    });
+
+    void api!.workerFn();
+    await nextTick();
+    scope.stop();
+    expect(FakeWorker.created[0]!.terminate).toHaveBeenCalledOnce();
+  });
+});
diff --git a/vue/toolkit/src/composables/media/useWebWorkerFn/index.ts b/vue/toolkit/src/composables/media/useWebWorkerFn/index.ts
new file mode 100644
index 0000000..c2d689e
--- /dev/null
+++ b/vue/toolkit/src/composables/media/useWebWorkerFn/index.ts
@@ -0,0 +1,235 @@
+import type { AnyFunction } from '@robonen/stdlib';
+import { noop } from '@robonen/stdlib';
+import { shallowRef } from 'vue';
+import { defaultWindow } from '@/types';
+import type { ConfigurableWindow } from '@/types';
+import type { ShallowRef } from 'vue';
+import { useSupported } from '@/composables/utilities/useSupported';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+
+export type WebWorkerStatus
+  = | 'PENDING'
+    | 'RUNNING'
+    | 'SUCCESS'
+    | 'ERROR'
+    | 'TIMEOUT_EXPIRED';
+
+export interface UseWebWorkerFnOptions extends ConfigurableWindow {
+  /**
+   * External script URLs to load inside the worker via `importScripts`.
+   *
+   * @default []
+   */
+  dependencies?: string[];
+
+  /**
+   * Local functions to inline into the worker scope so `workerFn` can call them.
+   *
+   * @default []
+   */
+  localDependencies?: AnyFunction[];
+
+  /**
+   * Milliseconds before the worker is terminated with a `TIMEOUT_EXPIRED` status.
+   * When omitted, the worker runs until it resolves or errors.
+   */
+  timeout?: number;
+
+  /**
+   * Called when the worker errors or its run is terminated abnormally.
+   *
+   * @default noop
+   */
+  onError?: (error: unknown) => void;
+}
+
+export interface UseWebWorkerFnReturn<T extends AnyFunction> {
+  /**
+   * Run `fn` in a transient worker. Resolves with its return value,
+   * rejects on error or timeout. Only one run may be active at a time.
+   */
+  workerFn: (...args: Parameters<T>) => Promise<ReturnType<T>>;
+
+  /**
+   * Reactive status of the current worker run.
+   */
+  workerStatus: ShallowRef<WebWorkerStatus>;
+
+  /**
+   * Terminate the active worker and reset to the given status.
+   */
+  workerTerminate: (status?: WebWorkerStatus) => void;
+
+  /**
+   * Whether `Worker`, `Blob` and `URL.createObjectURL` are available (SSR-safe).
+   */
+  isSupported: ShallowRef<boolean>;
+}
+
+type WorkerWithUrl = Worker & { _objectUrl?: string };
+
+interface WorkerRunHandlers<T extends AnyFunction> {
+  resolve: (result: ReturnType<T>) => void;
+  reject: (reason: unknown) => void;
+}
+
+/**
+ * Builds the worker bootstrap source: inlines external `importScripts`,
+ * local dependencies, the user function and a message-driven job runner.
+ */
+function createWorkerBlobUrl(
+  fn: AnyFunction,
+  dependencies: string[],
+  localDependencies: AnyFunction[],
+  createUrl: typeof URL.createObjectURL,
+): string {
+  const importScriptsString = dependencies.length
+    ? `importScripts(${dependencies.map(dep => `'${dep}'`).join(',')});`
+    : '';
+
+  const localDependenciesString = localDependencies
+    .filter(dep => typeof dep === 'function')
+    .map((dep) => {
+      const source = dep.toString();
+      return source.trim().startsWith('function') ? source : `const ${dep.name} = ${source}`;
+    })
+    .join(';');
+
+  const blobCode = `${importScriptsString}${localDependenciesString};`
+    + `onmessage=function(e){`
+    + `Promise.resolve((${fn.toString()}).apply(undefined,e.data[0]))`
+    + `.then(function(result){postMessage(['SUCCESS',result])})`
+    + `.catch(function(error){postMessage(['ERROR',error])})`
+    + `}`;
+
+  const blob = new Blob([blobCode], { type: 'application/javascript' });
+  return createUrl(blob);
+}
+
+/**
+ * @name useWebWorkerFn
+ * @category Media
+ * @description Run an expensive function in a transient Web Worker off the main thread
+ *
+ * @param {Function} fn The function to execute inside the worker (must be self-contained or rely on `dependencies`/`localDependencies`)
+ * @param {UseWebWorkerFnOptions} [options] Worker dependencies, timeout and error hook
+ * @returns {UseWebWorkerFnReturn} `{ workerFn, workerStatus, workerTerminate, isSupported }`
+ *
+ * @example
+ * const { workerFn, workerStatus } = useWebWorkerFn((n: number) => {
+ *   let sum = 0;
+ *   for (let i = 0; i < n; i++) sum += i;
+ *   return sum;
+ * });
+ * const total = await workerFn(1e9);
+ *
+ * @example
+ * const { workerFn } = useWebWorkerFn(dates => dayjs(dates[0]).isBefore(dates[1]), {
+ *   dependencies: ['https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js'],
+ *   timeout: 5000,
+ * });
+ *
+ * @since 0.0.15
+ */
+export function useWebWorkerFn<T extends AnyFunction>(
+  fn: T,
+  options: UseWebWorkerFnOptions = {},
+): UseWebWorkerFnReturn<T> {
+  const {
+    dependencies = [],
+    localDependencies = [],
+    timeout,
+    window = defaultWindow,
+    onError = noop,
+  } = options;
+
+  // `URL`/`Worker` are global constructors on `typeof globalThis`, not the `Window` interface.
+  const globalWindow = window as (Window & typeof globalThis) | undefined;
+
+  const isSupported = useSupported(() =>
+    !!window && 'Worker' in window && 'Blob' in window && typeof globalWindow?.URL?.createObjectURL === 'function');
+
+  const workerStatus = shallowRef<WebWorkerStatus>('PENDING');
+
+  let worker: WorkerWithUrl | undefined;
+  let handlers: WorkerRunHandlers<T> | undefined;
+  let timeoutId: ReturnType<typeof setTimeout> | undefined;
+
+  const workerTerminate = (status: WebWorkerStatus = 'PENDING'): void => {
+    if (worker && window) {
+      worker.terminate();
+      if (worker._objectUrl)
+        globalWindow!.URL.revokeObjectURL(worker._objectUrl);
+    }
+
+    if (timeoutId !== undefined && window) {
+      window.clearTimeout(timeoutId);
+      timeoutId = undefined;
+    }
+
+    worker = undefined;
+    handlers = undefined;
+    workerStatus.value = status;
+  };
+
+  tryOnScopeDispose(workerTerminate);
+
+  const generateWorker = (): WorkerWithUrl => {
+    const objectUrl = createWorkerBlobUrl(fn, dependencies, localDependencies, globalWindow!.URL.createObjectURL.bind(globalWindow!.URL));
+    const instance: WorkerWithUrl = new globalWindow!.Worker(objectUrl);
+    instance._objectUrl = objectUrl;
+
+    instance.onmessage = (event: MessageEvent) => {
+      const [status, payload] = event.data as [WebWorkerStatus, ReturnType<T>];
+
+      if (status === 'SUCCESS') {
+        handlers?.resolve(payload);
+        workerTerminate('SUCCESS');
+        return;
+      }
+
+      onError(payload);
+      handlers?.reject(payload);
+      workerTerminate('ERROR');
+    };
+
+    instance.onerror = (event: ErrorEvent) => {
+      event.preventDefault();
+      onError(event);
+      handlers?.reject(event);
+      workerTerminate('ERROR');
+    };
+
+    if (timeout !== undefined) {
+      timeoutId = window!.setTimeout(() => {
+        onError(new Error(`[useWebWorkerFn] Worker timed out after ${timeout}ms`));
+        handlers?.reject(new Error('TIMEOUT_EXPIRED'));
+        workerTerminate('TIMEOUT_EXPIRED');
+      }, timeout);
+    }
+
+    return instance;
+  };
+
+  const workerFn = (...args: Parameters<T>): Promise<ReturnType<T>> => {
+    if (!isSupported.value || !window)
+      return Promise.reject(new Error('[useWebWorkerFn] Web Worker is not supported in this environment'));
+
+    if (workerStatus.value === 'RUNNING')
+      return Promise.reject(new Error('[useWebWorkerFn] Only one worker run may be active at a time'));
+
+    return new Promise<ReturnType<T>>((resolve, reject) => {
+      handlers = { resolve, reject };
+      worker = generateWorker();
+      workerStatus.value = 'RUNNING';
+      worker.postMessage([[...args]]);
+    });
+  };
+
+  return {
+    workerFn,
+    workerStatus,
+    workerTerminate,
+    isSupported,
+  };
+}
diff --git a/vue/toolkit/src/composables/reactivity/computedAsync/demo.vue b/vue/toolkit/src/composables/reactivity/computedAsync/demo.vue
new file mode 100644
index 0000000..b40b510
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/computedAsync/demo.vue
@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { computedAsync } from './index';
+
+interface User {
+  name: string;
+  role: string;
+  city: string;
+}
+
+const directory: Record<number, User> = {
+  1: { name: 'Ada Lovelace', role: 'Mathematician', city: 'London' },
+  2: { name: 'Grace Hopper', role: 'Rear Admiral', city: 'New York' },
+  3: { name: 'Alan Turing', role: 'Cryptanalyst', city: 'Cambridge' },
+  4: { name: 'Katherine Johnson', role: 'Aerospace Engineer', city: 'Hampton' },
+};
+
+const userId = ref(1);
+const evaluating = ref(false);
+const error = ref<string | null>(null);
+
+// Simulated network fetch with artificial latency.
+function fetchUser(id: number, signal: AbortSignal): Promise<User> {
+  return new Promise((resolve, reject) => {
+    const timer = setTimeout(() => {
+      const found = directory[id];
+      if (found)
+        resolve(found);
+      else
+        reject(new Error(`No user with id ${id}`));
+    }, 700);
+
+    signal.addEventListener('abort', () => {
+      clearTimeout(timer);
+      reject(new DOMException('Aborted', 'AbortError'));
+    });
+  });
+}
+
+const user = computedAsync<User | null>(
+  async (onCancel) => {
+    error.value = null;
+    const controller = new AbortController();
+    onCancel(() => controller.abort());
+    return fetchUser(userId.value, controller.signal);
+  },
+  null,
+  {
+    evaluating,
+    onError: (e) => {
+      if ((e as DOMException)?.name !== 'AbortError')
+        error.value = (e as Error).message;
+    },
+  },
+);
+
+const ids = [1, 2, 3, 4, 99];
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="flex flex-col gap-2">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Fetch user by id</span>
+      <div class="flex flex-wrap gap-1.5">
+        <button
+          v-for="id in ids"
+          :key="id"
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+          :class="userId === id
+            ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
+            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+          @click="userId = id"
+        >
+          #{{ id }}
+        </button>
+      </div>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 min-h-32 flex flex-col justify-center">
+      <Transition name="fade" mode="out-in">
+        <div v-if="evaluating" key="loading" class="flex items-center gap-2 text-sm text-(--fg-muted)">
+          <span class="size-4 animate-spin rounded-full border-2 border-(--border) border-t-(--accent)" />
+          Resolving promise…
+        </div>
+
+        <div v-else-if="error" key="error" class="flex flex-col gap-1">
+          <span class="text-sm font-medium text-red-600 dark:text-red-400">Evaluation failed</span>
+          <span class="font-mono text-xs text-(--fg-muted)">{{ error }}</span>
+        </div>
+
+        <div v-else-if="user" key="user" class="flex flex-col gap-1">
+          <span class="text-lg font-semibold text-(--fg)">{{ user.name }}</span>
+          <span class="text-sm text-(--fg-muted)">{{ user.role }}</span>
+          <span class="inline-flex w-fit items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+            {{ user.city }}
+          </span>
+        </div>
+
+        <div v-else key="empty" class="text-sm text-(--fg-subtle)">
+          Awaiting first resolution…
+        </div>
+      </Transition>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">evaluating</span>
+      <span
+        class="inline-flex items-center gap-1.5 font-mono text-sm tabular-nums"
+        :class="evaluating ? 'text-amber-600 dark:text-amber-400' : 'text-emerald-600 dark:text-emerald-400'"
+      >
+        <span class="size-1.5 rounded-full" :class="evaluating ? 'bg-amber-500' : 'bg-emerald-500'" />
+        {{ evaluating }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.18s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/vue/toolkit/src/composables/reactivity/computedAsync/index.test.ts b/vue/toolkit/src/composables/reactivity/computedAsync/index.test.ts
new file mode 100644
index 0000000..c1487be
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/computedAsync/index.test.ts
@@ -0,0 +1,212 @@
+import { describe, expect, it, vi } from 'vitest';
+import { effectScope, isReadonly, nextTick, ref } from 'vue';
+import { asyncComputed, computedAsync } from '.';
+
+function flushPromises(): Promise<void> {
+  return new Promise(resolve => setTimeout(resolve, 0));
+}
+
+describe(computedAsync, () => {
+  it('uses the initial state until the first evaluation resolves', async () => {
+    const value = computedAsync(async () => {
+      await flushPromises();
+      return 'resolved';
+    }, 'initial');
+
+    expect(value.value).toBe('initial');
+
+    await flushPromises();
+    await nextTick();
+    expect(value.value).toBe('resolved');
+  });
+
+  it('defaults to undefined when no initial state is given', () => {
+    const value = computedAsync(async () => 42);
+    expect(value.value).toBeUndefined();
+  });
+
+  it('re-evaluates when a reactive dependency changes', async () => {
+    const id = ref(1);
+    const spy = vi.fn(async () => `user-${id.value}`);
+    const value = computedAsync(spy, undefined);
+
+    await flushPromises();
+    await nextTick();
+    expect(value.value).toBe('user-1');
+    expect(spy).toHaveBeenCalledTimes(1);
+
+    id.value = 2;
+    await nextTick();
+    await flushPromises();
+    await nextTick();
+    expect(value.value).toBe('user-2');
+    expect(spy).toHaveBeenCalledTimes(2);
+  });
+
+  it('tracks pending state through the evaluating ref', async () => {
+    const evaluating = ref(false);
+    const value = computedAsync(async () => {
+      await flushPromises();
+      return 'done';
+    }, 'init', { evaluating });
+
+    // deferred to a microtask after the effect runs
+    await nextTick();
+    expect(evaluating.value).toBeTruthy();
+    expect(value.value).toBe('init');
+
+    await flushPromises();
+    await nextTick();
+    expect(evaluating.value).toBeFalsy();
+    expect(value.value).toBe('done');
+  });
+
+  it('accepts a bare Ref<boolean> as the evaluating ref', async () => {
+    const evaluating = ref(false);
+    const value = computedAsync(async () => {
+      await flushPromises();
+      return 1;
+    }, 0, evaluating);
+
+    await nextTick();
+    expect(evaluating.value).toBeTruthy();
+
+    await flushPromises();
+    await nextTick();
+    expect(evaluating.value).toBeFalsy();
+    expect(value.value).toBe(1);
+  });
+
+  it('invokes onError and keeps the previous value when the callback rejects', async () => {
+    const onError = vi.fn();
+    const fail = ref(false);
+    const value = computedAsync(async () => {
+      if (fail.value)
+        throw new Error('boom');
+
+      return 'ok';
+    }, 'init', { onError });
+
+    await flushPromises();
+    await nextTick();
+    expect(value.value).toBe('ok');
+
+    fail.value = true;
+    await nextTick();
+    await flushPromises();
+    await nextTick();
+
+    expect(onError).toHaveBeenCalledTimes(1);
+    expect((onError.mock.calls[0]![0] as Error).message).toBe('boom');
+    // value is retained on error
+    expect(value.value).toBe('ok');
+  });
+
+  it('does not throw or call onError by default when no handler is provided', async () => {
+    const value = computedAsync(async () => {
+      throw new Error('silent');
+    }, 'fallback');
+
+    await flushPromises();
+    await nextTick();
+    // default onError is noop; value stays at the initial state
+    expect(value.value).toBe('fallback');
+  });
+
+  it('does not evaluate until read when lazy', async () => {
+    const spy = vi.fn(async () => 'lazy-value');
+    const value = computedAsync(spy, 'pending', { lazy: true });
+
+    await flushPromises();
+    await nextTick();
+    expect(spy).not.toHaveBeenCalled();
+
+    // first read triggers evaluation
+    expect(value.value).toBe('pending');
+    await flushPromises();
+    await nextTick();
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(value.value).toBe('lazy-value');
+  });
+
+  it('returns a readonly computed when lazy', () => {
+    const value = computedAsync(async () => 1, 0, { lazy: true });
+    expect(isReadonly(value)).toBeTruthy();
+  });
+
+  it('discards out-of-order resolutions so only the latest run wins', async () => {
+    const delays = ref(0);
+    const value = computedAsync(async () => {
+      const wait = delays.value;
+      await new Promise(resolve => setTimeout(resolve, wait));
+      return wait;
+    }, -1);
+
+    // first run: slow (30ms)
+    delays.value = 30;
+    await nextTick();
+    // second run: fast (0ms) — triggered before the slow one settles
+    delays.value = 0;
+    await nextTick();
+
+    await new Promise(resolve => setTimeout(resolve, 50));
+    await nextTick();
+
+    // the fast (latest) run committed; the slow stale run was discarded
+    expect(value.value).toBe(0);
+  });
+
+  it('invokes the onCancel callback when a stale run is invalidated', async () => {
+    const cancelled = vi.fn();
+    const tick = ref(0);
+
+    computedAsync(async (onCancel) => {
+      void tick.value;
+      onCancel(cancelled);
+      await new Promise(resolve => setTimeout(resolve, 20));
+      return tick.value;
+    }, 0);
+
+    await nextTick();
+    // trigger a re-run before the first settles
+    tick.value = 1;
+    await nextTick();
+
+    await new Promise(resolve => setTimeout(resolve, 40));
+    expect(cancelled).toHaveBeenCalled();
+  });
+
+  it('supports a deep ref backing when shallow is false', async () => {
+    const value = computedAsync(async () => ({ nested: { count: 1 } }), undefined, { shallow: false });
+
+    await flushPromises();
+    await nextTick();
+    expect(value.value).toEqual({ nested: { count: 1 } });
+  });
+
+  it('stops evaluating when the owning scope is disposed', async () => {
+    const trigger = ref(0);
+    const spy = vi.fn(async () => trigger.value);
+    const scope = effectScope();
+
+    scope.run(() => {
+      computedAsync(spy, undefined);
+    });
+
+    await flushPromises();
+    await nextTick();
+    expect(spy).toHaveBeenCalledTimes(1);
+
+    scope.stop();
+
+    trigger.value = 1;
+    await nextTick();
+    await flushPromises();
+    // effect torn down with the scope; no further evaluation
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  it('exposes asyncComputed as an alias of computedAsync', () => {
+    expect(asyncComputed).toBe(computedAsync);
+  });
+});
diff --git a/vue/toolkit/src/composables/reactivity/computedAsync/index.ts b/vue/toolkit/src/composables/reactivity/computedAsync/index.ts
new file mode 100644
index 0000000..27c7a6e
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/computedAsync/index.ts
@@ -0,0 +1,183 @@
+import { noop } from '@robonen/stdlib';
+import { computed, ref as deepRef, isRef, shallowRef, watchEffect } from 'vue';
+import type { ComputedRef, Ref } from 'vue';
+import type { ConfigurableFlush } from '@/types';
+
+/**
+ * Handle overlapping async evaluations.
+ *
+ * The provided callback is invoked when a re-evaluation of the computed value
+ * is triggered before the previous one finished, letting you abort stale work.
+ */
+export type AsyncComputedOnCancel = (cancelCallback: () => void) => void;
+
+export interface UseComputedAsyncOptions<Lazy = boolean> extends ConfigurableFlush {
+  /**
+   * Should the value be evaluated lazily, i.e. only on first read.
+   *
+   * @default false
+   */
+  lazy?: Lazy;
+
+  /**
+   * Ref that receives the in-flight state of the async evaluation.
+   * `true` while the callback is pending, `false` once it settles.
+   */
+  evaluating?: Ref<boolean>;
+
+  /**
+   * Use `shallowRef` instead of a deep `ref` to back the resolved value.
+   *
+   * @default true
+   */
+  shallow?: boolean;
+
+  /**
+   * Callback invoked when the evaluation callback throws or rejects.
+   *
+   * @default noop
+   */
+  onError?: (error: unknown) => void;
+}
+
+export type UseComputedAsyncReturn<T>
+  = Ref<T> | ComputedRef<T>;
+
+/**
+ * @name computedAsync
+ * @category Reactivity
+ * @description Computed value driven by an async (promise-returning) evaluation
+ * callback. The value updates reactively when its dependencies change, exposing
+ * an optional `evaluating` ref for pending state, an `onError` handler, lazy
+ * evaluation, and a default value used until the first resolution settles.
+ * Out-of-order resolutions are discarded so only the latest run wins, and an
+ * `onCancel` hook lets callbacks abort stale work.
+ *
+ * @param {(onCancel: AsyncComputedOnCancel) => T | Promise<T>} evaluationCallback Promise-returning function producing the value
+ * @param {T} [initialState] Value used until the first evaluation resolves
+ * @param {UseComputedAsyncOptions | Ref<boolean>} [optionsOrRef] Options object, or a `Ref<boolean>` used as the `evaluating` ref
+ * @returns {Ref<T> | ComputedRef<T>} A ref holding the latest resolved value (a `ComputedRef` when `lazy`)
+ *
+ * @example
+ * const id = ref(1);
+ * const user = computedAsync(async () => {
+ *   const res = await fetch(`/api/users/${id.value}`);
+ *   return res.json();
+ * }, null);
+ *
+ * @example
+ * const evaluating = ref(false);
+ * const data = computedAsync(async () => fetchData(), [], { evaluating });
+ * // evaluating.value is true while the promise is pending
+ *
+ * @example
+ * // Abort stale requests when dependencies change mid-flight
+ * const result = computedAsync(async (onCancel) => {
+ *   const controller = new AbortController();
+ *   onCancel(() => controller.abort());
+ *   const res = await fetch(url.value, { signal: controller.signal });
+ *   return res.json();
+ * }, undefined, { lazy: true });
+ *
+ * @since 0.0.15
+ */
+export function computedAsync<T>(
+  evaluationCallback: (onCancel: AsyncComputedOnCancel) => T | Promise<T>,
+  initialState: T,
+  optionsOrRef: UseComputedAsyncOptions<true>,
+): ComputedRef<T>;
+export function computedAsync<T>(
+  evaluationCallback: (onCancel: AsyncComputedOnCancel) => T | Promise<T>,
+  initialState: undefined,
+  optionsOrRef: UseComputedAsyncOptions<true>,
+): ComputedRef<T | undefined>;
+export function computedAsync<T>(
+  evaluationCallback: (onCancel: AsyncComputedOnCancel) => T | Promise<T>,
+  initialState: T,
+  optionsOrRef?: Ref<boolean> | UseComputedAsyncOptions,
+): Ref<T>;
+export function computedAsync<T>(
+  evaluationCallback: (onCancel: AsyncComputedOnCancel) => T | Promise<T>,
+  initialState?: undefined,
+  optionsOrRef?: Ref<boolean> | UseComputedAsyncOptions,
+): Ref<T | undefined>;
+export function computedAsync<T>(
+  evaluationCallback: (onCancel: AsyncComputedOnCancel) => T | Promise<T>,
+  initialState?: T,
+  optionsOrRef?: Ref<boolean> | UseComputedAsyncOptions,
+): UseComputedAsyncReturn<T> | UseComputedAsyncReturn<T | undefined> {
+  const options: UseComputedAsyncOptions = isRef(optionsOrRef)
+    ? { evaluating: optionsOrRef }
+    : optionsOrRef ?? {};
+
+  const {
+    lazy = false,
+    flush = 'pre',
+    evaluating,
+    shallow = true,
+    onError = noop,
+  } = options;
+
+  const started = shallowRef(!lazy);
+  const current = (shallow ? shallowRef(initialState) : deepRef(initialState)) as Ref<T>;
+  let counter = 0;
+
+  watchEffect(async (onInvalidate) => {
+    if (!started.value)
+      return;
+
+    const runId = ++counter;
+    let hasFinished = false;
+
+    // Defer flipping `evaluating` to true so it is not tracked as a dependency
+    // of this effect (which would cause an infinite re-run loop).
+    if (evaluating) {
+      Promise.resolve().then(() => {
+        evaluating.value = true;
+      });
+    }
+
+    try {
+      const result = await evaluationCallback((cancelCallback) => {
+        onInvalidate(() => {
+          if (evaluating)
+            evaluating.value = false;
+
+          if (!hasFinished)
+            cancelCallback();
+        });
+      });
+
+      // Discard out-of-order resolutions: only the latest run commits.
+      if (runId === counter)
+        current.value = result;
+    }
+    catch (error) {
+      onError(error);
+    }
+    finally {
+      if (evaluating && runId === counter)
+        evaluating.value = false;
+
+      hasFinished = true;
+    }
+  }, { flush });
+
+  if (lazy) {
+    return computed(() => {
+      started.value = true;
+      return current.value;
+    });
+  }
+
+  return current;
+}
+
+/**
+ * @name asyncComputed
+ * @category Reactivity
+ * @description Alias for {@link computedAsync}.
+ *
+ * @since 0.0.15
+ */
+export const asyncComputed = computedAsync;
diff --git a/vue/toolkit/src/composables/reactivity/computedEager/demo.vue b/vue/toolkit/src/composables/reactivity/computedEager/demo.vue
new file mode 100644
index 0000000..0da20c2
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/computedEager/demo.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { computedEager } from './index';
+
+const password = ref('hunter2');
+
+// All derived synchronously and eagerly on every keystroke — the cached
+// values are always fresh, no lazy read required.
+const length = computedEager(() => password.value.length);
+const hasUpper = computedEager(() => /[A-Z]/.test(password.value));
+const hasNumber = computedEager(() => /\d/.test(password.value));
+const hasSymbol = computedEager(() => /[^A-Z0-9]/i.test(password.value));
+
+const score = computedEager(() => {
+  const checks = [length.value >= 8, hasUpper.value, hasNumber.value, hasSymbol.value];
+  return checks.filter(Boolean).length;
+});
+
+const label = computedEager(() => ['Empty', 'Weak', 'Fair', 'Good', 'Strong'][score.value]);
+
+const rules = computedEager(() => [
+  { ok: length.value >= 8, text: 'At least 8 characters' },
+  { ok: hasUpper.value, text: 'An uppercase letter' },
+  { ok: hasNumber.value, text: 'A number' },
+  { ok: hasSymbol.value, text: 'A symbol' },
+]);
+
+const tones = [
+  'bg-(--border)',
+  'bg-red-500',
+  'bg-amber-500',
+  'bg-sky-500',
+  'bg-emerald-500',
+];
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="flex flex-col gap-2">
+      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="pwd">Password</label>
+      <input
+        id="pwd"
+        v-model="password"
+        type="text"
+        placeholder="Type a password…"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <span class="text-sm text-(--fg-muted)">Strength</span>
+        <span class="font-mono text-sm font-medium tabular-nums text-(--fg)">{{ label }}</span>
+      </div>
+      <div class="flex gap-1.5">
+        <div
+          v-for="i in 4"
+          :key="i"
+          class="h-1.5 flex-1 rounded-full transition-colors duration-300"
+          :class="i <= score ? tones[score] : 'bg-(--bg-inset)'"
+        />
+      </div>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-2">
+      <div
+        v-for="rule in rules"
+        :key="rule.text"
+        class="flex items-center gap-2 text-sm transition-colors"
+        :class="rule.ok ? 'text-(--fg)' : 'text-(--fg-subtle)'"
+      >
+        <span
+          class="grid size-4 place-items-center rounded-full text-[10px] transition-colors"
+          :class="rule.ok
+            ? 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400'
+            : 'bg-(--bg-inset) text-(--fg-subtle)'"
+        >
+          {{ rule.ok ? '✓' : '○' }}
+        </span>
+        {{ rule.text }}
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums flex items-center justify-between">
+      <span class="text-(--fg-muted)">length</span>
+      <span>{{ length }}</span>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/reactivity/computedEager/index.test.ts b/vue/toolkit/src/composables/reactivity/computedEager/index.test.ts
new file mode 100644
index 0000000..368dd9b
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/computedEager/index.test.ts
@@ -0,0 +1,132 @@
+import { describe, expect, it, vi } from 'vitest';
+import { computed, effectScope, isReadonly, nextTick, ref } from 'vue';
+import { computedEager, eagerComputed } from '.';
+
+describe(computedEager, () => {
+  it('computes the initial value eagerly', () => {
+    const count = ref(2);
+    const doubled = computedEager(() => count.value * 2);
+    expect(doubled.value).toBe(4);
+  });
+
+  it('updates synchronously when a dependency changes', () => {
+    const count = ref(0);
+    const isEven = computedEager(() => count.value % 2 === 0);
+
+    expect(isEven.value).toBeTruthy();
+
+    count.value = 1;
+    // no flush/tick needed with the default sync flush
+    expect(isEven.value).toBeFalsy();
+
+    count.value = 4;
+    expect(isEven.value).toBeTruthy();
+  });
+
+  it('tracks multiple reactive sources', () => {
+    const a = ref(1);
+    const b = ref(2);
+    const sum = computedEager(() => a.value + b.value);
+
+    expect(sum.value).toBe(3);
+
+    a.value = 10;
+    expect(sum.value).toBe(12);
+
+    b.value = 20;
+    expect(sum.value).toBe(30);
+  });
+
+  it('depends on other computed refs', () => {
+    const n = ref(3);
+    const squared = computed(() => n.value * n.value);
+    const label = computedEager(() => `value:${squared.value}`);
+
+    expect(label.value).toBe('value:9');
+
+    n.value = 4;
+    expect(label.value).toBe('value:16');
+  });
+
+  it('returns a readonly ref', () => {
+    const count = ref(0);
+    const derived = computedEager(() => count.value);
+    expect(isReadonly(derived)).toBeTruthy();
+  });
+
+  it('does not mutate when writing to the readonly ref (warns instead)', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const count = ref(5);
+    const derived = computedEager(() => count.value);
+    // @ts-expect-error: readonly ref must not be writable at the type level
+    derived.value = 99;
+    expect(derived.value).toBe(5);
+    warn.mockRestore();
+  });
+
+  it('is eager rather than lazy: getter runs without being read', () => {
+    const count = ref(0);
+    const spy = vi.fn(() => count.value);
+
+    computedEager(spy);
+    // eager: getter ran once on creation even though .value was never read
+    expect(spy).toHaveBeenCalledTimes(1);
+
+    count.value = 1;
+    // and again on dependency change, still without any read
+    expect(spy).toHaveBeenCalledTimes(2);
+  });
+
+  it('respects a custom flush timing', async () => {
+    const count = ref(0);
+    const derived = computedEager(() => count.value, { flush: 'post' });
+
+    // initial post-flush effect resolves after a tick
+    await nextTick();
+    expect(derived.value).toBe(0);
+
+    count.value = 1;
+    // post flush is deferred until after the next tick
+    expect(derived.value).toBe(0);
+
+    await nextTick();
+    expect(derived.value).toBe(1);
+  });
+
+  it('stops recomputing when the owning scope is disposed', () => {
+    const count = ref(0);
+    const scope = effectScope();
+
+    const derived = scope.run(() => computedEager(() => count.value))!;
+
+    count.value = 1;
+    expect(derived.value).toBe(1);
+
+    scope.stop();
+
+    count.value = 2;
+    // effect is torn down with the scope, so the value is frozen
+    expect(derived.value).toBe(1);
+  });
+
+  it('handles getters that return objects', () => {
+    const flag = ref(true);
+    const obj = computedEager(() => ({ ok: flag.value }));
+
+    expect(obj.value).toEqual({ ok: true });
+
+    flag.value = false;
+    expect(obj.value).toEqual({ ok: false });
+  });
+
+  it('exposes eagerComputed as an alias of computedEager', () => {
+    expect(eagerComputed).toBe(computedEager);
+
+    const count = ref(1);
+    const derived = eagerComputed(() => count.value + 1);
+    expect(derived.value).toBe(2);
+
+    count.value = 9;
+    expect(derived.value).toBe(10);
+  });
+});
diff --git a/vue/toolkit/src/composables/reactivity/computedEager/index.ts b/vue/toolkit/src/composables/reactivity/computedEager/index.ts
new file mode 100644
index 0000000..8b6ec30
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/computedEager/index.ts
@@ -0,0 +1,52 @@
+import { shallowReadonly, shallowRef, watchEffect } from 'vue';
+import type { ShallowRef, WatchOptionsBase } from 'vue';
+
+export type ComputedEagerOptions = Pick<WatchOptionsBase, 'flush' | 'onTrack' | 'onTrigger'>;
+
+export type ComputedEagerReturn<T>
+  = Readonly<ShallowRef<T>>;
+
+/**
+ * @name computedEager
+ * @category Reactivity
+ * @description Eager (non-lazy) computed value backed by a `watchEffect`-driven
+ * `shallowRef`. Unlike `computed`, the getter runs immediately and on every
+ * dependency change rather than lazily on read, so the cached value is always
+ * up to date. Best for cheap derived values that are read in many places.
+ *
+ * @param {() => T} getter The effect function deriving the value
+ * @param {ComputedEagerOptions} [options={}] Watch options (`flush` defaults to `'sync'`)
+ * @returns {Readonly<ShallowRef<T>>} A readonly shallow ref holding the derived value
+ *
+ * @example
+ * const count = ref(0);
+ * const isEven = computedEager(() => count.value % 2 === 0);
+ * isEven.value; // true
+ *
+ * @example
+ * // Defer recomputation until after the component update flush
+ * const total = computedEager(() => a.value + b.value, { flush: 'post' });
+ *
+ * @since 0.0.15
+ */
+export function computedEager<T>(getter: () => T, options: ComputedEagerOptions = {}): ComputedEagerReturn<T> {
+  const result = shallowRef<T>();
+
+  watchEffect(() => {
+    result.value = getter();
+  }, {
+    ...options,
+    flush: options.flush ?? 'sync',
+  });
+
+  return shallowReadonly(result) as ComputedEagerReturn<T>;
+}
+
+/**
+ * @name eagerComputed
+ * @category Reactivity
+ * @description Alias for {@link computedEager}.
+ *
+ * @since 0.0.15
+ */
+export const eagerComputed = computedEager;
diff --git a/vue/toolkit/src/composables/reactivity/computedWithControl/demo.vue b/vue/toolkit/src/composables/reactivity/computedWithControl/demo.vue
new file mode 100644
index 0000000..85a6132
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/computedWithControl/demo.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { computedWithControl } from './index';
+
+// `source` controls recomputation; `tax` deliberately does NOT.
+const source = ref(100);
+const tax = ref(0);
+let recomputes = 0;
+
+const total = computedWithControl(source, () => {
+  recomputes++;
+  return Math.round(source.value * (1 + tax.value / 100));
+});
+
+const peeked = ref<number | null>(null);
+const detached = ref(false);
+
+function peek() {
+  // Read the cached value without registering tracking or recomputing.
+  peeked.value = total.peek();
+}
+
+function stop() {
+  total.stop();
+  detached.value = true;
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <div class="flex flex-col gap-2">
+        <div class="flex items-center justify-between">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Base price (tracked)</span>
+          <span class="font-mono text-sm tabular-nums text-(--accent-text)">{{ source }}</span>
+        </div>
+        <input
+          v-model.number="source"
+          type="range"
+          min="0"
+          max="500"
+          step="10"
+          class="w-full accent-(--accent)"
+        >
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <div class="flex items-center justify-between">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Tax % (untracked)</span>
+          <span class="font-mono text-sm tabular-nums text-(--fg-muted)">{{ tax }}</span>
+        </div>
+        <input
+          v-model.number="tax"
+          type="range"
+          min="0"
+          max="30"
+          step="1"
+          class="w-full accent-(--fg-muted)"
+        >
+        <span class="text-xs text-(--fg-subtle)">
+          Changing tax alone won't recompute — trigger to pull it in.
+        </span>
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Total</span>
+      <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ total }}</span>
+    </div>
+
+    <div class="grid grid-cols-3 gap-1.5">
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="total.trigger()"
+      >
+        Trigger
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="peek"
+      >
+        Peek
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="detached"
+        @click="stop"
+      >
+        Stop
+      </button>
+    </div>
+
+    <div class="flex flex-col gap-1.5 text-sm">
+      <div class="flex items-center justify-between">
+        <span class="text-(--fg-muted)">Getter runs</span>
+        <span class="font-mono tabular-nums text-(--fg)">{{ recomputes }}</span>
+      </div>
+      <div class="flex items-center justify-between">
+        <span class="text-(--fg-muted)">Last peek</span>
+        <span class="font-mono tabular-nums text-(--fg)">{{ peeked ?? '—' }}</span>
+      </div>
+      <div v-if="detached" class="text-xs text-amber-600 dark:text-amber-400">
+        Source watcher stopped — only Trigger updates the total now.
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/reactivity/computedWithControl/index.test.ts b/vue/toolkit/src/composables/reactivity/computedWithControl/index.test.ts
new file mode 100644
index 0000000..69ff46f
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/computedWithControl/index.test.ts
@@ -0,0 +1,273 @@
+import { describe, expect, it, vi } from 'vitest';
+import { computed, effectScope, isReadonly, isRef, nextTick, ref, watch } from 'vue';
+import type { ComputedRefWithControl } from '.';
+import { computedWithControl, controlledComputed } from '.';
+
+describe(computedWithControl, () => {
+  it('is a ref that reflects the getter', () => {
+    const source = ref(1);
+    const result = computedWithControl(source, () => source.value * 2);
+
+    expect(isRef(result)).toBeTruthy();
+    expect(result.value).toBe(2);
+  });
+
+  it('only recomputes when the controlled source changes', () => {
+    const source = ref(1);
+    const unrelated = ref(10);
+    const getter = vi.fn(() => source.value + unrelated.value);
+    const result = computedWithControl(source, getter);
+
+    // first access computes lazily
+    expect(result.value).toBe(11);
+    expect(getter).toHaveBeenCalledTimes(1);
+
+    // reading again is cached
+    expect(result.value).toBe(11);
+    expect(getter).toHaveBeenCalledTimes(1);
+
+    // mutating an undeclared dependency does NOT recompute
+    unrelated.value = 20;
+    expect(result.value).toBe(11);
+    expect(getter).toHaveBeenCalledTimes(1);
+
+    // mutating the declared source recomputes (and now picks up unrelated too)
+    source.value = 2;
+    expect(result.value).toBe(22);
+    expect(getter).toHaveBeenCalledTimes(2);
+  });
+
+  it('is lazy: the getter does not run until first access', () => {
+    const getter = vi.fn(() => 42);
+    computedWithControl(ref(0), getter);
+
+    expect(getter).not.toHaveBeenCalled();
+  });
+
+  it('passes the previous value to the getter', () => {
+    const source = ref(0);
+    const seen: Array<number | undefined> = [];
+    const result = computedWithControl(source, (prev?: number) => {
+      seen.push(prev);
+
+      return source.value;
+    });
+
+    expect(result.value).toBe(0);
+    source.value = 5;
+    expect(result.value).toBe(5);
+
+    expect(seen).toEqual([undefined, 0]);
+  });
+
+  it('triggers reactive effects when the source changes', () => {
+    const scope = effectScope();
+    const source = ref(1);
+    const spy = vi.fn();
+    let result: ComputedRefWithControl<number>;
+
+    scope.run(() => {
+      result = computedWithControl(source, () => source.value * 2);
+      watch(result, spy, { flush: 'sync' });
+    });
+
+    source.value = 2;
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenLastCalledWith(4, 2, expect.anything());
+
+    scope.stop();
+  });
+
+  it('is reactive inside a downstream computed', () => {
+    const source = ref(2);
+    const controlled = computedWithControl(source, () => source.value);
+    const doubled = computed(() => controlled.value * 2);
+
+    expect(doubled.value).toBe(4);
+    source.value = 3;
+    expect(doubled.value).toBe(6);
+  });
+
+  describe('trigger', () => {
+    it('forces recomputation for sources Vue cannot track', () => {
+      let external = 0;
+      const result = computedWithControl(() => {}, () => external);
+
+      expect(result.value).toBe(0);
+
+      external = 10;
+      // not picked up automatically
+      expect(result.value).toBe(0);
+
+      result.trigger();
+      expect(result.value).toBe(10);
+    });
+
+    it('notifies subscribers', () => {
+      const scope = effectScope();
+      let external = 1;
+      const spy = vi.fn();
+      let result: ComputedRefWithControl<number>;
+
+      scope.run(() => {
+        result = computedWithControl(() => {}, () => external);
+        watch(result, spy, { flush: 'sync' });
+      });
+
+      external = 2;
+      result!.trigger();
+      expect(spy).toHaveBeenCalledTimes(1);
+      expect(spy).toHaveBeenLastCalledWith(2, 1, expect.anything());
+
+      scope.stop();
+    });
+  });
+
+  describe('peek', () => {
+    it('reads the value without registering customRef tracking', () => {
+      const scope = effectScope();
+      // drive the value from an external (non-reactive) source so the only
+      // reactive dependency a tracked read could create is the customRef itself
+      let external = 0;
+      const result = computedWithControl(() => {}, () => external);
+      let reads = 0;
+
+      scope.run(() => {
+        watch(() => result.peek(), () => {
+          reads++;
+        }, { flush: 'sync' });
+      });
+
+      external = 1;
+      result.trigger();
+      // the outer watcher did NOT re-run, because peek() never tracked the ref
+      expect(reads).toBe(0);
+      expect(result.peek()).toBe(1);
+
+      scope.stop();
+    });
+
+    it('computes lazily on first peek without tracking', () => {
+      const source = ref(7);
+      const getter = vi.fn(() => source.value);
+      const result = computedWithControl(source, getter);
+
+      expect(result.peek()).toBe(7);
+      expect(getter).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('writable computed', () => {
+    it('supports get and set', () => {
+      const base = ref(1);
+      const doubled = computedWithControl(base, {
+        get: () => base.value * 2,
+        set: (v: number) => {
+          base.value = v / 2;
+        },
+      });
+
+      expect(doubled.value).toBe(2);
+
+      doubled.value = 10;
+      expect(base.value).toBe(5);
+      // source changed, so the controlled value recomputes
+      expect(doubled.value).toBe(10);
+    });
+
+    it('is not readonly when a setter is provided', () => {
+      const base = ref(1);
+      const writable = computedWithControl(base, {
+        get: () => base.value,
+        set: (v: number) => {
+          base.value = v;
+        },
+      });
+
+      expect(isReadonly(writable)).toBeFalsy();
+    });
+  });
+
+  describe('multiple sources', () => {
+    it('recomputes when any source in the array changes', () => {
+      const a = ref(1);
+      const b = ref(2);
+      const getter = vi.fn(() => a.value + b.value);
+      const result = computedWithControl([a, b], getter);
+
+      expect(result.value).toBe(3);
+      expect(getter).toHaveBeenCalledTimes(1);
+
+      a.value = 10;
+      expect(result.value).toBe(12);
+
+      b.value = 20;
+      expect(result.value).toBe(30);
+      expect(getter).toHaveBeenCalledTimes(3);
+    });
+  });
+
+  describe('stop', () => {
+    it('detaches the source watcher', () => {
+      const source = ref(1);
+      const getter = vi.fn(() => source.value);
+      const result = computedWithControl(source, getter);
+
+      expect(result.value).toBe(1);
+      result.stop();
+
+      source.value = 5;
+      // watcher gone, so no recompute happens
+      expect(result.value).toBe(1);
+      expect(getter).toHaveBeenCalledTimes(1);
+
+      // manual trigger still works
+      result.trigger();
+      expect(result.value).toBe(5);
+    });
+  });
+
+  it('forwards custom watch options (flush: post)', async () => {
+    const scope = effectScope();
+    const source = ref(0);
+    const spy = vi.fn();
+    let result: ComputedRefWithControl<number>;
+
+    scope.run(() => {
+      result = computedWithControl(source, () => source.value, { flush: 'post' });
+      watch(result, spy, { flush: 'post' });
+    });
+
+    source.value = 1;
+    expect(spy).not.toHaveBeenCalled();
+
+    await nextTick();
+    expect(result!.value).toBe(1);
+    expect(spy).toHaveBeenCalledTimes(1);
+
+    scope.stop();
+  });
+
+  it('exposes controlledComputed as an alias', () => {
+    expect(controlledComputed).toBe(computedWithControl);
+
+    const source = ref('a');
+    const result = controlledComputed(source, () => source.value.toUpperCase());
+    expect(result.value).toBe('A');
+    source.value = 'b';
+    expect(result.value).toBe('B');
+  });
+
+  it('runs without an active effect scope (SSR-style, no host component)', () => {
+    // No effectScope / no component: the customRef + sync watcher must still
+    // work, and reading must not throw even though there are no subscribers.
+    let external = 1;
+    const result = computedWithControl(() => {}, () => external);
+
+    expect(result.value).toBe(1);
+    external = 2;
+    result.trigger();
+    expect(result.value).toBe(2);
+    expect(result.peek()).toBe(2);
+  });
+});
diff --git a/vue/toolkit/src/composables/reactivity/computedWithControl/index.ts b/vue/toolkit/src/composables/reactivity/computedWithControl/index.ts
new file mode 100644
index 0000000..4d3b266
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/computedWithControl/index.ts
@@ -0,0 +1,162 @@
+import { customRef, watch } from 'vue';
+import type {
+  ComputedGetter,
+  ComputedRef,
+  WatchOptions,
+  WatchSource,
+  WatchStopHandle,
+  WritableComputedOptions,
+  WritableComputedRef,
+} from 'vue';
+
+type MultiWatchSources = Array<WatchSource<unknown> | object>;
+
+export interface ComputedWithControlExtra<T> {
+  /**
+   * Force the computed value to recompute on next access and notify subscribers.
+   */
+  trigger: () => void;
+
+  /**
+   * Read the current value without recomputing or registering reactive tracking.
+   *
+   * Returns the last cached value. If the value has never been computed it is
+   * computed once (lazily) without tracking.
+   */
+  peek: () => T;
+
+  /**
+   * Stop watching the controlled dependency source.
+   *
+   * After calling this the value only updates via {@link ComputedWithControlExtra.trigger} or a manual set.
+   */
+  stop: WatchStopHandle;
+}
+
+export type ComputedRefWithControl<T>
+  = ComputedRef<T> & ComputedWithControlExtra<T>;
+
+export type WritableComputedRefWithControl<T>
+  = WritableComputedRef<T> & ComputedWithControlExtra<T>;
+
+export type ComputedWithControlRef<T>
+  = ComputedRefWithControl<T> | WritableComputedRefWithControl<T>;
+
+/**
+ * @name computedWithControl
+ * @category Reactivity
+ * @description A computed ref whose recomputation is driven only by an
+ * explicitly declared dependency `source`, plus a manual `.trigger()`. Built on
+ * `customRef` with a single `flush: 'sync'` watcher and a lazy `dirty` flag, so
+ * the getter is cached and only re-runs when the source changes or you trigger
+ * it — never on unrelated reactive reads. Also exposes `.peek()` (untracked
+ * read) and `.stop()` (detach the source watcher).
+ *
+ * @param {WatchSource | MultiWatchSources} source The dependency (or array of dependencies) that controls recomputation
+ * @param {ComputedGetter<T> | WritableComputedOptions<T>} fn A getter, or a `{ get, set }` object for a writable computed
+ * @param {WatchOptions} [options={}] Watch options forwarded to the internal watcher (`flush` defaults to `'sync'`)
+ * @returns {ComputedWithControlRef<T>} A computed ref extended with `trigger`/`peek`/`stop`
+ *
+ * @example
+ * const source = ref(0);
+ * const unrelated = ref('a');
+ * // only recomputes when `source` changes, not when `unrelated` does
+ * const result = computedWithControl(source, () => source.value + unrelated.value.length);
+ *
+ * @example
+ * // manual control: recompute on demand
+ * let counter = 0;
+ * const value = computedWithControl(() => {}, () => counter);
+ * counter = 10;
+ * value.trigger(); // value.value is now 10
+ *
+ * @example
+ * // writable computed with controlled dependency
+ * const base = ref(1);
+ * const doubled = computedWithControl(base, {
+ *   get: () => base.value * 2,
+ *   set: (v) => { base.value = v / 2; },
+ * });
+ *
+ * @since 0.0.15
+ */
+export function computedWithControl<T>(
+  source: WatchSource | MultiWatchSources,
+  fn: ComputedGetter<T>,
+  options?: WatchOptions,
+): ComputedRefWithControl<T>;
+export function computedWithControl<T>(
+  source: WatchSource | MultiWatchSources,
+  fn: WritableComputedOptions<T>,
+  options?: WatchOptions,
+): WritableComputedRefWithControl<T>;
+export function computedWithControl<T>(
+  source: WatchSource | MultiWatchSources,
+  fn: ComputedGetter<T> | WritableComputedOptions<T>,
+  options: WatchOptions = {},
+): ComputedWithControlRef<T> {
+  let value: T = undefined!;
+  let dirty = true;
+  let track: () => void = noopTrack;
+  let trigger: () => void = noopTrigger;
+
+  const get = isGetter(fn) ? fn : fn.get;
+  const set = isGetter(fn) ? undefined : fn.set;
+
+  function compute(): T {
+    if (dirty) {
+      value = get(value);
+      dirty = false;
+    }
+
+    return value;
+  }
+
+  function update(): void {
+    dirty = true;
+    trigger();
+  }
+
+  const stop = watch(source, update, { flush: 'sync', ...options });
+
+  const result = customRef<T>((_track, _trigger) => {
+    track = _track;
+    trigger = _trigger;
+
+    return {
+      get() {
+        const next = compute();
+        track();
+
+        return next;
+      },
+      set(incoming) {
+        set?.(incoming);
+      },
+    };
+  }) as ComputedWithControlRef<T>;
+
+  result.trigger = update;
+  result.peek = compute;
+  result.stop = stop;
+
+  return result;
+}
+
+function isGetter<T>(
+  fn: ComputedGetter<T> | WritableComputedOptions<T>,
+): fn is ComputedGetter<T> {
+  return typeof fn === 'function';
+}
+
+function noopTrack(): void {}
+function noopTrigger(): void {}
+
+/**
+ * @name controlledComputed
+ * @category Reactivity
+ * @description Alias of {@link computedWithControl}.
+ *
+ * @since 0.0.15
+ */
+export const controlledComputed = computedWithControl;
diff --git a/vue/toolkit/src/composables/reactivity/extendRef/demo.vue b/vue/toolkit/src/composables/reactivity/extendRef/demo.vue
new file mode 100644
index 0000000..5f14467
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/extendRef/demo.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { extendRef } from './index';
+
+// A plain ref carrying its own derived + imperative API.
+const baseVolume = ref(40);
+
+const volume = extendRef(baseVolume, {
+  // reactive (unwrapped) — read without .value
+  percent: computed(() => `${baseVolume.value}%`),
+  isMuted: computed(() => baseVolume.value === 0),
+  // imperative helpers attached to the same ref
+  mute: () => { baseVolume.value = 0; },
+  max: () => { baseVolume.value = 100; },
+});
+
+let lastMuted = 50;
+function toggleMute() {
+  if (volume.isMuted) {
+    volume.value = lastMuted;
+  }
+  else {
+    lastMuted = volume.value || 50;
+    volume.mute();
+  }
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Volume</span>
+        <span
+          class="font-mono text-3xl font-bold tabular-nums transition-colors"
+          :class="volume.isMuted ? 'text-(--fg-subtle)' : 'text-(--fg)'"
+        >{{ volume.percent }}</span>
+      </div>
+
+      <!-- bind the ref directly with v-model — it's still a ref -->
+      <input
+        v-model.number="volume"
+        type="range"
+        min="0"
+        max="100"
+        class="w-full accent-(--accent)"
+      >
+
+      <div class="flex gap-1.5">
+        <button
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="toggleMute"
+        >
+          {{ volume.isMuted ? 'Unmute' : 'Mute' }}
+        </button>
+        <button
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="volume.max()"
+        >
+          Max
+        </button>
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex flex-col gap-2 font-mono text-sm tabular-nums">
+      <div class="flex items-center justify-between">
+        <span class="text-(--fg-muted)">volume.value</span>
+        <span class="text-(--fg)">{{ volume.value }}</span>
+      </div>
+      <div class="flex items-center justify-between">
+        <span class="text-(--fg-muted)">volume.percent</span>
+        <span class="text-(--fg)">{{ volume.percent }}</span>
+      </div>
+      <div class="flex items-center justify-between">
+        <span class="text-(--fg-muted)">volume.isMuted</span>
+        <span :class="volume.isMuted ? 'text-amber-600 dark:text-amber-400' : 'text-emerald-600 dark:text-emerald-400'">
+          {{ volume.isMuted }}
+        </span>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      One ref carries its value, derived properties, and methods — no destructuring of an object needed.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/reactivity/extendRef/index.test.ts b/vue/toolkit/src/composables/reactivity/extendRef/index.test.ts
new file mode 100644
index 0000000..edf4a08
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/extendRef/index.test.ts
@@ -0,0 +1,99 @@
+import { describe, expect, it } from 'vitest';
+import { computed, isRef, ref } from 'vue';
+import type { Ref } from 'vue';
+import { extendRef } from '.';
+
+describe(extendRef, () => {
+  it('returns the same ref instance', () => {
+    const source = ref('content');
+    const extended = extendRef(source, { foo: 'bar' });
+    expect(extended).toBe(source);
+    expect(isRef(extended)).toBeTruthy();
+  });
+
+  it('keeps the ref value accessible and writable', () => {
+    const extended = extendRef(ref('content'), { foo: 'bar' });
+    expect(extended.value).toBe('content');
+    extended.value = 'updated';
+    expect(extended.value).toBe('updated');
+  });
+
+  it('attaches static (non-ref) properties', () => {
+    const extended = extendRef(ref(0), { foo: 'bar', n: 1 });
+    expect(extended.foo).toBe('bar');
+    expect(extended.n).toBe(1);
+  });
+
+  it('never overwrites the ref value via a "value" key in extend', () => {
+    const extended = extendRef(ref('keep'), { value: 'overwrite' });
+    expect(extended.value).toBe('keep');
+  });
+
+  it('unwraps ref-valued properties by default (read)', () => {
+    const count = ref(0);
+    const extended = extendRef(count, { double: computed(() => count.value * 2) });
+    expect(extended.double).toBe(0);
+    count.value = 4;
+    expect(extended.double).toBe(8);
+  });
+
+  it('unwraps ref-valued properties with two-way write', () => {
+    const inner = ref(1);
+    // `unwrap` (default true) auto-`.value`s the property at runtime, so it reads/writes as a number.
+    const extended = extendRef(ref(0), { inner }) as unknown as Ref<number> & { inner: number };
+    expect(extended.inner).toBe(1);
+    extended.inner = 5;
+    expect(inner.value).toBe(5);
+    expect(extended.inner).toBe(5);
+  });
+
+  it('keeps refs as refs when unwrap is false', () => {
+    const inner = ref(1);
+    // With `unwrap: false` the property stays a real ref at runtime.
+    const extended = extendRef(ref(0), { inner }, { unwrap: false }) as unknown as Ref<number> & { inner: Ref<number> };
+    expect(isRef(extended.inner)).toBeTruthy();
+    expect(extended.inner.value).toBe(1);
+    inner.value = 2;
+    expect(extended.inner.value).toBe(2);
+  });
+
+  it('extended properties are non-enumerable by default', () => {
+    const extended = extendRef(ref(0), { foo: 'bar' });
+    expect(Object.keys(extended)).not.toContain('foo');
+    expect(extended.foo).toBe('bar');
+  });
+
+  it('extended properties become enumerable with enumerable: true', () => {
+    const extended = extendRef(ref(0), { foo: 'bar' }, { enumerable: true });
+    expect(Object.keys(extended)).toContain('foo');
+  });
+
+  it('enumerable applies to unwrapped ref properties too', () => {
+    const extended = extendRef(ref(0), { inner: ref(1) }, { enumerable: true });
+    expect(Object.keys(extended)).toContain('inner');
+    expect(extended.inner).toBe(1);
+  });
+
+  it('supports multiple properties of mixed kinds', () => {
+    const r = ref(2);
+    const extended = extendRef(ref('x'), {
+      label: 'tag',
+      live: r,
+      frozen: 99,
+    });
+    expect(extended.label).toBe('tag');
+    expect(extended.live).toBe(2);
+    expect(extended.frozen).toBe(99);
+    r.value = 3;
+    expect(extended.live).toBe(3);
+  });
+
+  it('remains reactive after extension (value tracked by computed)', () => {
+    const source = ref(1);
+    const extended = extendRef(source, { meta: 'm' });
+    const derived = computed(() => extended.value * 10);
+    expect(derived.value).toBe(10);
+    extended.value = 5;
+    expect(derived.value).toBe(50);
+  });
+});
diff --git a/vue/toolkit/src/composables/reactivity/extendRef/index.ts b/vue/toolkit/src/composables/reactivity/extendRef/index.ts
new file mode 100644
index 0000000..5aac893
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/extendRef/index.ts
@@ -0,0 +1,90 @@
+import { isRef } from 'vue';
+import type { Ref, ShallowUnwrapRef } from 'vue';
+
+export interface ExtendRefOptions<Unwrap extends boolean = boolean> {
+  /**
+   * Whether the extended properties are enumerable.
+   *
+   * @default false
+   */
+  enumerable?: boolean;
+
+  /**
+   * Whether to unwrap (auto-`.value`) extended properties that are themselves refs.
+   *
+   * @default true
+   */
+  unwrap?: Unwrap;
+}
+
+export type ExtendRefReturn<R extends Ref<unknown>, Extend extends object, Unwrap extends boolean>
+  = Unwrap extends false ? (R & ShallowUnwrapRef<Extend>) : (R & Extend);
+
+/**
+ * @name extendRef
+ * @category Reactivity
+ * @description Attach extra (optionally reactive) attributes to a ref while keeping it a usable ref.
+ *
+ * @param {Ref<T>} ref The ref to extend
+ * @param {object} extend The properties to attach; ref-valued props are unwrapped by default
+ * @param {ExtendRefOptions} [options={}] `enumerable` (default `false`) and `unwrap` (default `true`)
+ * @returns {Ref<T> & Extend} The same ref instance, now carrying the extended properties
+ *
+ * @example
+ * const myRef = ref('content');
+ * const extended = extendRef(myRef, { foo: 'bar' });
+ * extended.value; // 'content'
+ * extended.foo; // 'bar'
+ *
+ * @example
+ * // reactive extension: unwrapped two-way by default
+ * const count = ref(0);
+ * const extended = extendRef(count, { double: computed(() => count.value * 2) });
+ * extended.double; // 0 (no .value needed)
+ *
+ * @example
+ * // keep refs as refs with unwrap: false
+ * const extended = extendRef(ref(0), { inner: ref(1) }, { unwrap: false });
+ * extended.inner.value; // 1
+ *
+ * @since 0.0.15
+ */
+export function extendRef<R extends Ref<unknown>, Extend extends object, Options extends ExtendRefOptions<false>>(ref: R, extend: Extend, options: Options): R & ShallowUnwrapRef<Extend>;
+export function extendRef<R extends Ref<unknown>, Extend extends object, Options extends ExtendRefOptions>(ref: R, extend: Extend, options?: Options): R & Extend;
+export function extendRef<R extends Ref<unknown>, Extend extends object>(
+  ref: R,
+  extend: Extend,
+  options: ExtendRefOptions = {},
+): R & Extend {
+  const { enumerable = false, unwrap = true } = options;
+
+  for (const key in extend) {
+    if (key === 'value')
+      continue;
+
+    const value = extend[key];
+
+    if (unwrap && isRef(value)) {
+      Object.defineProperty(ref, key, {
+        get() {
+          return value.value;
+        },
+        set(v) {
+          value.value = v;
+        },
+        enumerable,
+        configurable: true,
+      });
+    }
+    else {
+      Object.defineProperty(ref, key, {
+        value,
+        enumerable,
+        configurable: true,
+        writable: true,
+      });
+    }
+  }
+
+  return ref as R & Extend;
+}
diff --git a/vue/toolkit/src/composables/reactivity/index.ts b/vue/toolkit/src/composables/reactivity/index.ts
new file mode 100644
index 0000000..47b24ef
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/index.ts
@@ -0,0 +1,22 @@
+export * from './computedAsync';
+export * from './computedEager';
+export * from './computedWithControl';
+export * from './extendRef';
+export * from './reactiveComputed';
+export * from './reactiveOmit';
+export * from './reactivePick';
+export * from './refAutoReset';
+export * from './refDebounced';
+export * from './refDefault';
+export * from './refThrottled';
+export * from './refWithControl';
+export * from './syncRef';
+export * from './toReactive';
+export * from './useCached';
+export * from './useCloned';
+export * from './useDebounceFn';
+export * from './usePrevious';
+export * from './useSyncRefs';
+export * from './useThrottleFn';
+export * from './useToNumber';
+export * from './useToString';
diff --git a/vue/toolkit/src/composables/reactivity/reactiveComputed/demo.vue b/vue/toolkit/src/composables/reactivity/reactiveComputed/demo.vue
new file mode 100644
index 0000000..7532ab3
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/reactiveComputed/demo.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { reactiveComputed } from './index';
+
+const price = ref(24);
+const quantity = ref(3);
+const discount = ref(10);
+
+// One getter, exposed as a reactive object whose fields stay independently
+// reactive — and writable back through to the source refs.
+const cart = reactiveComputed(() => {
+  const subtotal = price.value * quantity.value;
+  const saved = Math.round((subtotal * discount.value) / 100);
+  return {
+    subtotal,
+    saved,
+    total: subtotal - saved,
+    discount, // a ref — unwrapped and writable through the proxy
+  };
+});
+
+const presets = [0, 10, 25, 50];
+
+function setDiscount(value: number) {
+  // Writes through the reactive proxy back to the `discount` ref.
+  cart.discount = value;
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <div class="grid grid-cols-2 gap-3">
+        <label class="flex flex-col gap-1.5">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Unit price</span>
+          <input
+            v-model.number="price"
+            type="number"
+            min="0"
+            class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) tabular-nums transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          >
+        </label>
+        <label class="flex flex-col gap-1.5">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Quantity</span>
+          <input
+            v-model.number="quantity"
+            type="number"
+            min="1"
+            class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) tabular-nums transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          >
+        </label>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Discount</span>
+        <div class="flex flex-wrap gap-1.5">
+          <button
+            v-for="p in presets"
+            :key="p"
+            type="button"
+            class="inline-flex items-center justify-center rounded-lg border px-3 py-1.5 text-sm font-medium tabular-nums transition active:scale-[0.98] cursor-pointer"
+            :class="cart.discount === p
+              ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
+              : 'border-(--border) bg-(--bg) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+            @click="setDiscount(p)"
+          >
+            {{ p }}%
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex flex-col gap-2 font-mono text-sm tabular-nums">
+      <div class="flex items-center justify-between text-(--fg-muted)">
+        <span>Subtotal</span>
+        <span class="text-(--fg)">${{ cart.subtotal }}</span>
+      </div>
+      <div class="flex items-center justify-between text-(--fg-muted)">
+        <span>Saved ({{ cart.discount }}%)</span>
+        <span class="text-emerald-600 dark:text-emerald-400">-${{ cart.saved }}</span>
+      </div>
+      <div class="h-px bg-(--border)" />
+      <div class="flex items-center justify-between">
+        <span class="text-(--fg)">Total</span>
+        <span class="text-2xl font-bold text-(--fg)">${{ cart.total }}</span>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Each field reads from a single cached getter; writing <code class="text-(--fg-muted)">cart.discount</code> flows back to the source ref.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/reactivity/reactiveComputed/index.test.ts b/vue/toolkit/src/composables/reactivity/reactiveComputed/index.test.ts
new file mode 100644
index 0000000..b480dd9
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/reactiveComputed/index.test.ts
@@ -0,0 +1,159 @@
+import { describe, expect, it, vi } from 'vitest';
+import { effectScope, isReactive, nextTick, ref, toRefs, watch } from 'vue';
+import { reactiveComputed } from '.';
+
+describe(reactiveComputed, () => {
+  it('returns a reactive object backed by the getter', () => {
+    const count = ref(1);
+    const state = reactiveComputed(() => ({
+      foo: count.value,
+      bar: count.value * 2,
+    }));
+
+    expect(isReactive(state)).toBeTruthy();
+    expect(state.foo).toBe(1);
+    expect(state.bar).toBe(2);
+  });
+
+  it('updates field values when a dependency changes', async () => {
+    const count = ref(1);
+    const state = reactiveComputed(() => ({
+      doubled: count.value * 2,
+    }));
+
+    expect(state.doubled).toBe(2);
+    count.value = 5;
+    await nextTick();
+    expect(state.doubled).toBe(10);
+  });
+
+  it('only re-runs the getter when a dependency changes (cached)', () => {
+    const count = ref(1);
+    const getter = vi.fn(() => ({ value: count.value }));
+    const state = reactiveComputed(getter);
+
+    // Multiple reads of the same / different keys without a dep change
+    // should not re-invoke the getter beyond the first lazy evaluation.
+    void state.value;
+    void state.value;
+    void state.value;
+    expect(getter).toHaveBeenCalledTimes(1);
+
+    count.value = 2;
+    void state.value;
+    expect(getter).toHaveBeenCalledTimes(2);
+  });
+
+  it('tracks individual fields independently', async () => {
+    const a = ref(0);
+    const b = ref(0);
+    const state = reactiveComputed(() => ({
+      a: a.value,
+      b: b.value,
+    }));
+
+    const spyA = vi.fn();
+    const scope = effectScope();
+    scope.run(() => {
+      watch(() => state.a, spyA);
+    });
+
+    // Changing `b` should not trigger a watcher on `a`.
+    b.value = 1;
+    await nextTick();
+    expect(spyA).not.toHaveBeenCalled();
+
+    a.value = 1;
+    await nextTick();
+    expect(spyA).toHaveBeenCalledTimes(1);
+
+    scope.stop();
+  });
+
+  it('unwraps nested refs returned by the getter', () => {
+    const name = ref('alice');
+    const state = reactiveComputed(() => ({ name }));
+
+    expect(state.name).toBe('alice');
+  });
+
+  it('writes a raw value through to an underlying ref', async () => {
+    const name = ref('alice');
+    const state = reactiveComputed(() => ({ name }));
+
+    state.name = 'bob';
+    expect(name.value).toBe('bob');
+    await nextTick();
+    expect(state.name).toBe('bob');
+  });
+
+  it('writes plain (non-ref) fields back onto the computed value', () => {
+    const state = reactiveComputed<{ count: number }>(() => ({ count: 1 }));
+
+    state.count = 42;
+    expect(state.count).toBe(42);
+  });
+
+  it('supports the `in` operator via the has trap', () => {
+    const state = reactiveComputed(() => ({ foo: 1 }));
+
+    expect('foo' in state).toBeTruthy();
+    expect('missing' in state).toBeFalsy();
+  });
+
+  it('enumerates own keys', () => {
+    const state = reactiveComputed(() => ({ a: 1, b: 2, c: 3 }));
+
+    expect(Object.keys(state).sort()).toEqual(['a', 'b', 'c']);
+  });
+
+  it('supports property deletion', () => {
+    const state = reactiveComputed<{ a?: number; b: number }>(() => ({ a: 1, b: 2 }));
+
+    delete state.a;
+    expect('a' in state).toBeFalsy();
+    expect('b' in state).toBeTruthy();
+  });
+
+  it('works with toRefs while preserving reactivity', async () => {
+    const count = ref(1);
+    const state = reactiveComputed(() => ({ doubled: count.value * 2 }));
+    const { doubled } = toRefs(state);
+
+    expect(doubled.value).toBe(2);
+    count.value = 3;
+    await nextTick();
+    expect(doubled.value).toBe(6);
+  });
+
+  it('is observable by a deep watcher', async () => {
+    const count = ref(1);
+    const state = reactiveComputed(() => ({ count: count.value }));
+    const spy = vi.fn();
+
+    const scope = effectScope();
+    scope.run(() => {
+      watch(state, spy, { deep: true });
+    });
+
+    count.value = 2;
+    await nextTick();
+    expect(spy).toHaveBeenCalledTimes(1);
+
+    scope.stop();
+  });
+
+  it('handles getters returning nested object structures', async () => {
+    const open = ref(false);
+    const state = reactiveComputed(() => ({
+      ui: {
+        open: open.value,
+      },
+    }));
+
+    expect(state.ui.open).toBeFalsy();
+    open.value = true;
+    await nextTick();
+    expect(state.ui.open).toBeTruthy();
+  });
+});
diff --git a/vue/toolkit/src/composables/reactivity/reactiveComputed/index.ts b/vue/toolkit/src/composables/reactivity/reactiveComputed/index.ts
new file mode 100644
index 0000000..226f90c
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/reactiveComputed/index.ts
@@ -0,0 +1,82 @@
+import { computed, isRef, reactive, unref } from 'vue';
+import type { ComputedGetter, UnwrapNestedRefs } from 'vue';
+
+export type ReactiveComputedReturn<T extends object>
+  = UnwrapNestedRefs<T>;
+
+/**
+ * @name reactiveComputed
+ * @category Reactivity
+ * @description Computed that resolves to a reactive object whose individual
+ * fields stay reactive — read a single property and only that property is
+ * tracked, instead of the whole getter re-running on every access.
+ *
+ * The getter is wrapped in a single cached `computed`, so the object is
+ * recomputed only when one of its reactive dependencies changes. The returned
+ * value is a `reactive` proxy over that computed: destructuring with `toRefs`,
+ * spreading and writing back individual fields all work as on a normal
+ * `reactive` object.
+ *
+ * @param {ComputedGetter<T>} getter Factory returning the object to expose reactively
+ * @returns {ReactiveComputedReturn<T>} A reactive object backed by the cached computed
+ *
+ * @example
+ * const state = reactiveComputed(() => ({
+ *   foo: count.value,
+ *   bar: count.value * 2,
+ * }));
+ * // reading state.bar only depends on `bar`
+ *
+ * @example
+ * // nested refs returned by the getter are unwrapped and kept writable
+ * const name = ref('a');
+ * const obj = reactiveComputed(() => ({ name }));
+ * obj.name; // 'a'
+ * obj.name = 'b'; // writes through to name.value
+ *
+ * @since 0.0.15
+ */
+export function reactiveComputed<T extends object>(
+  getter: ComputedGetter<T>,
+): ReactiveComputedReturn<T> {
+  const source = computed<T>(getter);
+
+  // A Proxy over the computed's current value: each trap reads
+  // `source.value` lazily, so only the accessed key is tracked and the proxy
+  // itself is created exactly once (no re-creation per recompute).
+  const proxy = new Proxy({} as T, {
+    get(_, key, receiver) {
+      return unref(Reflect.get(source.value, key, receiver));
+    },
+    set(_, key, value) {
+      const current = source.value as Record<PropertyKey, unknown>;
+      const existing = current[key];
+
+      // Preserve ref identity: assigning a raw value to a field that holds a
+      // ref writes through to `.value` instead of clobbering the ref.
+      if (isRef(existing) && !isRef(value))
+        existing.value = value;
+      else
+        current[key] = value;
+
+      return true;
+    },
+    deleteProperty(_, key) {
+      return Reflect.deleteProperty(source.value, key);
+    },
+    has(_, key) {
+      return Reflect.has(source.value, key);
+    },
+    ownKeys() {
+      return Reflect.ownKeys(source.value);
+    },
+    getOwnPropertyDescriptor() {
+      return {
+        enumerable: true,
+        configurable: true,
+      };
+    },
+  });
+
+  return reactive(proxy) as ReactiveComputedReturn<T>;
+}
diff --git a/vue/toolkit/src/composables/reactivity/reactiveOmit/demo.vue b/vue/toolkit/src/composables/reactivity/reactiveOmit/demo.vue
new file mode 100644
index 0000000..fb97877
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/reactiveOmit/demo.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { reactive } from 'vue';
+import { reactiveOmit } from './index';
+
+const user = reactive({
+  name: 'Ada Lovelace',
+  email: 'ada@analytical.engine',
+  role: 'admin',
+  token: 'sk_live_8f2a91c3',
+  active: true,
+});
+
+// Omit listed keys — stays reactive as the source changes.
+const safeUser = reactiveOmit(user, 'token', ['email']);
+
+// Predicate form — drop every boolean field.
+const noFlags = reactiveOmit(user, value => typeof value === 'boolean');
+
+const roles = ['admin', 'editor', 'viewer'] as const;
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="space-y-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Source object
+      </p>
+
+      <label class="flex flex-col gap-1">
+        <span class="text-xs font-medium text-(--fg-muted)">name</span>
+        <input
+          v-model="user.name"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+      </label>
+
+      <div class="flex items-center justify-between gap-3">
+        <span class="text-xs font-medium text-(--fg-muted)">role</span>
+        <div class="flex gap-1.5">
+          <button
+            v-for="r in roles"
+            :key="r"
+            type="button"
+            class="rounded-md border px-2 py-0.5 text-xs font-medium transition cursor-pointer"
+            :class="user.role === r
+              ? 'border-transparent bg-(--accent) text-(--accent-fg)'
+              : 'border-(--border) bg-(--bg-inset) text-(--fg-muted) hover:border-(--border-strong)'"
+            @click="user.role = r"
+          >
+            {{ r }}
+          </button>
+        </div>
+      </div>
+
+      <label class="flex items-center justify-between gap-3">
+        <span class="text-xs font-medium text-(--fg-muted)">active</span>
+        <button
+          type="button"
+          class="relative h-5 w-9 rounded-full transition cursor-pointer"
+          :class="user.active ? 'bg-(--accent)' : 'bg-(--bg-inset)'"
+          role="switch"
+          :aria-checked="user.active"
+          @click="user.active = !user.active"
+        >
+          <span
+            class="absolute top-0.5 size-4 rounded-full bg-white shadow transition-all"
+            :class="user.active ? 'left-4' : 'left-0.5'"
+          />
+        </button>
+      </label>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <p class="mb-2 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Omit <code class="text-(--accent-text)">token</code>, <code class="text-(--accent-text)">email</code>
+      </p>
+      <pre class="overflow-x-auto rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs text-(--fg)">{{ safeUser }}</pre>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <p class="mb-2 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Predicate: drop booleans
+      </p>
+      <pre class="overflow-x-auto rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs text-(--fg)">{{ noFlags }}</pre>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/reactivity/reactiveOmit/index.test.ts b/vue/toolkit/src/composables/reactivity/reactiveOmit/index.test.ts
new file mode 100644
index 0000000..e490c72
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/reactiveOmit/index.test.ts
@@ -0,0 +1,144 @@
+import { describe, expect, it, vi } from 'vitest';
+import { computed, effectScope, nextTick, reactive, ref, watch } from 'vue';
+import { reactiveOmit } from '.';
+
+describe(reactiveOmit, () => {
+  it('omits a single key', () => {
+    const source = reactive({ name: 'a', count: 1, hidden: true });
+    const result = reactiveOmit(source, 'hidden');
+    expect({ ...result }).toEqual({ name: 'a', count: 1 });
+  });
+
+  it('omits multiple keys passed variadically', () => {
+    const source = reactive({ a: 1, b: 2, c: 3, d: 4 });
+    const result = reactiveOmit(source, 'a', 'c');
+    expect({ ...result }).toEqual({ b: 2, d: 4 });
+  });
+
+  it('omits keys passed as an array', () => {
+    const source = reactive({ a: 1, b: 2, c: 3 });
+    const result = reactiveOmit(source, ['a', 'b']);
+    expect({ ...result }).toEqual({ c: 3 });
+  });
+
+  it('omits a mix of single keys and arrays', () => {
+    const source = reactive({ a: 1, b: 2, c: 3, d: 4 });
+    const result = reactiveOmit(source, 'a', ['c', 'd']);
+    expect({ ...result }).toEqual({ b: 2 });
+  });
+
+  it('returns a shallow copy of all fields when no keys are given', () => {
+    const source = reactive({ a: 1, b: 2 });
+    const result = reactiveOmit(source);
+    expect({ ...result }).toEqual({ a: 1, b: 2 });
+  });
+
+  it('reacts to source mutations', async () => {
+    const source = reactive({ a: 1, b: 2, c: 3 });
+    const result = reactiveOmit(source, 'c');
+    expect(result.a).toBe(1);
+
+    source.a = 10;
+    await nextTick();
+    expect(result.a).toBe(10);
+    expect({ ...result }).toEqual({ a: 10, b: 2 });
+  });
+
+  it('reflects keys added to the source after creation', async () => {
+    const source = reactive<Record<string, number>>({ a: 1 });
+    const result = reactiveOmit(source, 'a');
+    expect({ ...result }).toEqual({});
+
+    source.b = 2;
+    await nextTick();
+    expect({ ...result }).toEqual({ b: 2 });
+  });
+
+  it('supports a predicate dropping fields by value', () => {
+    const source = reactive({ name: 'a', count: 1, enabled: true });
+    const result = reactiveOmit(source, value => typeof value === 'boolean');
+    expect({ ...result }).toEqual({ name: 'a', count: 1 });
+  });
+
+  it('supports a predicate dropping fields by key', () => {
+    const source = reactive({ id: 1, _internal: 2, label: 'x' });
+    const result = reactiveOmit(source, (_value, key) => key.startsWith('_'));
+    expect({ ...result }).toEqual({ id: 1, label: 'x' });
+  });
+
+  it('re-evaluates the predicate reactively', async () => {
+    const source = reactive({ a: 1, b: -2, c: 3 });
+    const result = reactiveOmit(source, value => (value as number) < 0);
+    expect({ ...result }).toEqual({ a: 1, c: 3 });
+
+    source.a = -1;
+    await nextTick();
+    expect({ ...result }).toEqual({ c: 3 });
+  });
+
+  it('unwraps refs held on the source object', () => {
+    const count = ref(5);
+    const source = reactive({ count, label: 'x' });
+    const result = reactiveOmit(source, 'label');
+    expect(result.count).toBe(5);
+  });
+
+  it('tracks only the accessed field (granular reactivity)', async () => {
+    const source = reactive({ a: 1, b: 2, c: 3 });
+    const result = reactiveOmit(source, 'c');
+
+    const spy = vi.fn();
+    const scope = effectScope();
+    scope.run(() => {
+      watch(() => result.a, spy);
+    });
+
+    // Mutating an unwatched field must not trigger the `a` watcher.
+    source.b = 20;
+    await nextTick();
+    expect(spy).not.toHaveBeenCalled();
+
+    source.a = 10;
+    await nextTick();
+    expect(spy).toHaveBeenCalledTimes(1);
+
+    scope.stop();
+  });
+
+  it('does not re-run the getter for an untouched dependency (cached computed)', async () => {
+    const source = reactive({ a: 1, b: 2 });
+    const getter = vi.fn(() => source.a);
+    const tracked = computed(getter);
+
+    const result = reactiveOmit(reactive({ value: tracked, other: 99 }), 'other');
+    expect(result.value).toBe(1);
+    expect(getter).toHaveBeenCalledTimes(1);
+
+    // Reading again without changing the dependency does not re-run the getter.
+    expect(result.value).toBe(1);
+    expect(getter).toHaveBeenCalledTimes(1);
+
+    source.a = 2;
+    await nextTick();
+    expect(result.value).toBe(2);
+  });
+
+  it('works on a plain (non-reactive) source object', () => {
+    const result = reactiveOmit({ a: 1, b: 2, c: 3 }, 'b');
+    expect({ ...result }).toEqual({ a: 1, c: 3 });
+  });
+
+  it('is SSR-safe (no DOM globals touched, runs without window)', () => {
+    const original = globalThis.window;
+    // @ts-expect-error force a non-DOM environment for the duration of the call
+    delete globalThis.window;
+    try {
+      const source = reactive({ a: 1, secret: 2 });
+      const result = reactiveOmit(source, 'secret');
+      expect({ ...result }).toEqual({ a: 1 });
+    }
+    finally {
+      globalThis.window = original;
+    }
+  });
+});
diff --git a/vue/toolkit/src/composables/reactivity/reactiveOmit/index.ts b/vue/toolkit/src/composables/reactivity/reactiveOmit/index.ts
new file mode 100644
index 0000000..b3ed8fc
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/reactiveOmit/index.ts
@@ -0,0 +1,101 @@
+import { toValue } from 'vue';
+import { omit } from '@robonen/stdlib';
+import { reactiveComputed } from '@/composables/reactivity/reactiveComputed';
+
+/**
+ * Resolved type of `reactiveOmit`: a reactive object that drops either the
+ * listed keys (`Omit`) or — when a predicate is used — an arbitrary subset
+ * (`Partial`), since the kept keys are only known at runtime.
+ */
+export type ReactiveOmitReturn<
+  T extends object,
+  K extends keyof T | undefined = undefined,
+>
+  = [K] extends [undefined]
+    ? Partial<T>
+    : Omit<T, Extract<K, keyof T>>;
+
+/**
+ * Predicate deciding, per field, whether a key should be omitted.
+ * Return `true` to drop the field.
+ */
+export type ReactiveOmitPredicate<T extends object>
+  = (value: T[keyof T], key: keyof T) => boolean;
+
+export function reactiveOmit<T extends object, K extends keyof T>(
+  obj: T,
+  ...keys: Array<K | K[]>
+): ReactiveOmitReturn<T, K>;
+export function reactiveOmit<T extends object>(
+  obj: T,
+  predicate: ReactiveOmitPredicate<T>,
+): ReactiveOmitReturn<T>;
+
+/**
+ * @name reactiveOmit
+ * @category Reactivity
+ * @description Reactively omit keys from a reactive object or ref. Accepts a
+ * variadic list of keys (mixing single keys and key arrays) or a predicate that
+ * decides per field whether to drop it. The result is a reactive object backed
+ * by a single cached `computed`, so reading one field tracks only that field and
+ * the underlying selection is recomputed only when a dependency changes.
+ *
+ * Keys are removed via the stdlib `omit`, which builds the result without
+ * `delete` (avoiding V8 dictionary-mode deopts on the kept object).
+ *
+ * @param {T} obj The source reactive object (or ref-bearing object) to omit from
+ * @param {...(K | K[])[] | [ReactiveOmitPredicate<T>]} keys Keys to drop (single or arrays), or a single predicate
+ * @returns {ReactiveOmitReturn<T, K>} A reactive object without the omitted fields
+ *
+ * @example
+ * const state = reactive({ name: 'a', count: 1, hidden: true });
+ * const visible = reactiveOmit(state, 'hidden');
+ * visible; // reactive { name: 'a', count: 1 }
+ *
+ * @example
+ * // mix single keys and arrays
+ * const slim = reactiveOmit(state, 'hidden', ['count']);
+ *
+ * @example
+ * // predicate: drop every boolean field
+ * const noFlags = reactiveOmit(state, (value) => typeof value === 'boolean');
+ *
+ * @since 0.0.15
+ */
+export function reactiveOmit<T extends object, K extends keyof T>(
+  obj: T,
+  ...keys: Array<K | K[] | ReactiveOmitPredicate<T>>
+): ReactiveOmitReturn<T, K> {
+  const first = keys[0];
+  const predicate = typeof first === 'function'
+    ? first as ReactiveOmitPredicate<T>
+    : undefined;
+
+  // Flatten the variadic key list once, outside the reactive getter, so the
+  // recompute below does not re-flatten on every dependency change.
+  const flatKeys: K[] = predicate
+    ? []
+    : (keys as Array<K | K[]>).flat() as K[];
+
+  if (predicate) {
+    return reactiveComputed<Partial<T>>(() => {
+      const source = toValue(obj) as T;
+      const result = {} as Partial<T>;
+
+      for (const key in source) {
+        if (!Object.hasOwn(source, key))
+          continue;
+
+        const value = source[key];
+        if (!predicate(value as T[keyof T], key as unknown as keyof T))
+          result[key] = value;
+      }
+
+      return result;
+    }) as ReactiveOmitReturn<T, K>;
+  }
+
+  return reactiveComputed<Omit<T, K>>(
+    () => omit<T, K>(toValue(obj) as T, flatKeys),
+  ) as ReactiveOmitReturn<T, K>;
+}
diff --git a/vue/toolkit/src/composables/reactivity/reactivePick/demo.vue b/vue/toolkit/src/composables/reactivity/reactivePick/demo.vue
new file mode 100644
index 0000000..72eaf78
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/reactivePick/demo.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { reactive } from 'vue';
+import { reactivePick } from './index';
+
+const settings = reactive({
+  brightness: 60,
+  contrast: 40,
+  theme: 'midnight',
+  autosave: true,
+  syncedAt: '2026-06-08',
+});
+
+// Live two-way view limited to the picked keys — writes flow back to `settings`.
+const display = reactivePick(settings, 'brightness', 'contrast');
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="space-y-4 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Picked view (two-way)
+      </p>
+
+      <label class="flex flex-col gap-1.5">
+        <span class="flex items-center justify-between text-sm text-(--fg)">
+          <span>brightness</span>
+          <span class="font-mono tabular-nums text-(--fg-muted)">{{ display.brightness }}</span>
+        </span>
+        <input
+          v-model.number="display.brightness"
+          type="range"
+          min="0"
+          max="100"
+          class="w-full accent-(--accent) cursor-pointer"
+        >
+      </label>
+
+      <label class="flex flex-col gap-1.5">
+        <span class="flex items-center justify-between text-sm text-(--fg)">
+          <span>contrast</span>
+          <span class="font-mono tabular-nums text-(--fg-muted)">{{ display.contrast }}</span>
+        </span>
+        <input
+          v-model.number="display.contrast"
+          type="range"
+          min="0"
+          max="100"
+          class="w-full accent-(--accent) cursor-pointer"
+        >
+      </label>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <p class="mb-2 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Full source object
+      </p>
+      <pre class="overflow-x-auto rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs text-(--fg)">{{ settings }}</pre>
+      <p class="mt-2 text-xs text-(--fg-subtle)">
+        Editing the picked view above writes straight back to the source.
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/reactivity/reactivePick/index.test.ts b/vue/toolkit/src/composables/reactivity/reactivePick/index.test.ts
new file mode 100644
index 0000000..209869d
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/reactivePick/index.test.ts
@@ -0,0 +1,145 @@
+import { describe, expect, it } from 'vitest';
+import { computed, effectScope, isReactive, nextTick, reactive, ref, watch } from 'vue';
+import { reactivePick } from '.';
+
+describe(reactivePick, () => {
+  it('picks the listed keys from a reactive object', () => {
+    const state = reactive({ x: 1, y: 2, z: 3 });
+    const picked = reactivePick(state, 'x', 'y');
+    expect(picked.x).toBe(1);
+    expect(picked.y).toBe(2);
+    expect((picked as Record<string, unknown>).z).toBeUndefined();
+  });
+
+  it('returns a reactive proxy', () => {
+    const picked = reactivePick(reactive({ a: 1 }), 'a');
+    expect(isReactive(picked)).toBeTruthy();
+  });
+
+  it('accepts an array of keys', () => {
+    const state = reactive({ a: 1, b: 2, c: 3 });
+    const picked = reactivePick(state, ['a', 'c']);
+    expect(Object.keys(picked).sort()).toEqual(['a', 'c']);
+  });
+
+  it('accepts mixed spread keys and arrays', () => {
+    const state = reactive({ a: 1, b: 2, c: 3, d: 4 });
+    const picked = reactivePick(state, 'a', ['b', 'c']);
+    expect(Object.keys(picked).sort()).toEqual(['a', 'b', 'c']);
+  });
+
+  it('stays in sync with source mutations', () => {
+    const state = reactive({ x: 1, y: 2 });
+    const picked = reactivePick(state, 'x');
+    state.x = 99;
+    expect(picked.x).toBe(99);
+  });
+
+  it('writes pass back to the source', () => {
+    const state = reactive({ x: 1, y: 2 });
+    const picked = reactivePick(state, 'x');
+    picked.x = 42;
+    expect(state.x).toBe(42);
+  });
+
+  it('ignores writes to keys that were not picked', () => {
+    const state = reactive({ x: 1, y: 2 });
+    const picked = reactivePick(state, 'x') as Record<string, number>;
+    picked.y = 100;
+    expect(state.y).toBe(2);
+  });
+
+  it('supports the in operator (has trap)', () => {
+    const state = reactive({ x: 1, y: 2 });
+    const picked = reactivePick(state, 'x');
+    expect('x' in picked).toBeTruthy();
+    expect('y' in picked).toBeFalsy();
+  });
+
+  it('enumerates only the picked own keys', () => {
+    const state = reactive({ a: 1, b: 2, c: 3 });
+    const picked = reactivePick(state, 'a', 'b');
+    expect(Object.keys(picked).sort()).toEqual(['a', 'b']);
+  });
+
+  it('spreads only the picked enumerable properties', () => {
+    const state = reactive({ a: 1, b: 2, c: 3 });
+    const picked = reactivePick(state, 'a', 'c');
+    expect({ ...picked }).toEqual({ a: 1, c: 3 });
+  });
+
+  it('is reactive inside an effect', async () => {
+    const state = reactive({ x: 0, y: 0 });
+    const picked = reactivePick(state, 'x');
+    const seen: number[] = [];
+
+    const scope = effectScope();
+    scope.run(() => {
+      watch(() => picked.x, value => seen.push(value));
+    });
+
+    state.x = 1;
+    await nextTick();
+    picked.x = 2;
+    await nextTick();
+
+    expect(seen).toEqual([1, 2]);
+    scope.stop();
+  });
+
+  it('works as a computed source', () => {
+    const state = reactive({ first: 'John', last: 'Doe', age: 30 });
+    const picked = reactivePick(state, 'first', 'last');
+    const full = computed(() => `${picked.first} ${picked.last}`);
+    expect(full.value).toBe('John Doe');
+    state.first = 'Jane';
+    expect(full.value).toBe('Jane Doe');
+  });
+
+  it('unwraps nested refs on read', () => {
+    const inner = ref(1);
+    const state = reactive({ inner, other: 2 });
+    const picked = reactivePick(state, 'inner');
+    expect(picked.inner as unknown).toBe(1);
+    inner.value = 5;
+    expect(picked.inner as unknown).toBe(5);
+  });
+
+  describe('predicate form', () => {
+    it('keeps only keys matched by the predicate', () => {
+      const state = reactive({ a: 1, b: 'x', c: 3 });
+      const picked = reactivePick(state, value => typeof value === 'number');
+      expect(Object.keys(picked).sort()).toEqual(['a', 'c']);
+    });
+
+    it('passes the key as the second predicate argument', () => {
+      const state = reactive({ keepMe: 1, dropMe: 2 });
+      const picked = reactivePick(state, (_value, key) => key === 'keepMe');
+      expect(Object.keys(picked)).toEqual(['keepMe']);
+    });
+
+    it('re-evaluates membership reactively as values change', () => {
+      const state = reactive<{ a: number | string; b: number }>({ a: 1, b: 2 });
+      const picked = reactivePick(state, value => typeof value === 'number');
+      expect(Object.keys(picked).sort()).toEqual(['a', 'b']);
+      state.a = 'now a string';
+      expect(Object.keys(picked)).toEqual(['b']);
+    });
+
+    it('reads picked values through the predicate proxy', () => {
+      const state = reactive({ a: 1, b: 2, c: 3 });
+      const picked = reactivePick(state, value => value > 1);
+      expect((picked as Record<string, number>).b).toBe(2);
+      expect((picked as Record<string, number>).a).toBeUndefined();
+    });
+  });
+
+  it('works with a ref-of-object value passed via toValue resolution on reads', () => {
+    // Source is a plain reactive whose property holds a ref — covers unwrap path.
+    const flag = ref(true);
+    const state = reactive({ flag, count: 1 });
+    const picked = reactivePick(state, 'flag', 'count');
+    expect(picked.flag as unknown).toBeTruthy();
+    expect(picked.count).toBe(1);
+  });
+});
diff --git a/vue/toolkit/src/composables/reactivity/reactivePick/index.ts b/vue/toolkit/src/composables/reactivity/reactivePick/index.ts
new file mode 100644
index 0000000..7653ca7
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/reactivePick/index.ts
@@ -0,0 +1,113 @@
+import { reactive, toValue } from 'vue';
+import type { UnwrapRef } from 'vue';
+import { isFunction } from '@robonen/stdlib';
+
+/**
+ * The reactive object produced by {@link reactivePick}: a subset of `T`
+ * restricted to the picked keys `K`, with each value unwrapped.
+ */
+export type ReactivePickReturn<T extends object, K extends keyof T>
+  = { [Key in K]: UnwrapRef<T[Key]> };
+
+/**
+ * Predicate form: receive each `(value, key)` pair of the source object and
+ * return `true` to keep the key in the resulting reactive view.
+ */
+export type ReactivePickPredicate<T extends object>
+  = (value: T[keyof T], key: keyof T) => boolean;
+
+/**
+ * @name reactivePick
+ * @category Reactivity
+ * @description Reactively pick a subset of keys (or keys matched by a
+ * predicate) from a reactive object. The result is a live `reactive` proxy:
+ * reads forward to the source's current value (so it tracks reassignment of
+ * nested refs) and writes pass straight back to the source. Unlike a
+ * `computed` of an object literal, no new object is allocated per recompute —
+ * the proxy is built once and lookups are resolved lazily on access.
+ *
+ * @param {T} obj The reactive source object (a `reactive`, `ref` value, or plain object)
+ * @param {...((K | K[]))} keys One or more keys (or arrays of keys) to pick
+ * @returns {ReactivePickReturn<T, K>} A reactive view limited to the picked keys
+ *
+ * @example
+ * const state = reactive({ x: 1, y: 2, z: 3 });
+ * const picked = reactivePick(state, 'x', 'y');
+ * picked.x; // 1 — stays in sync with state.x
+ * picked.x = 10; // writes back: state.x === 10
+ *
+ * @example
+ * // predicate form — keep only numeric values
+ * const filtered = reactivePick(state, (value) => typeof value === 'number');
+ *
+ * @since 0.0.15
+ */
+export function reactivePick<T extends object, K extends keyof T>(
+  obj: T,
+  ...keys: Array<K | K[]>
+): ReactivePickReturn<T, K>;
+export function reactivePick<T extends object>(
+  obj: T,
+  predicate: ReactivePickPredicate<T>,
+): ReactivePickReturn<T, keyof T>;
+export function reactivePick<T extends object, K extends keyof T>(
+  obj: T,
+  ...keys: Array<K | K[] | ReactivePickPredicate<T>>
+): ReactivePickReturn<T, K> {
+  const first = keys[0];
+
+  // Predicate form: the set of kept keys is data-dependent, so it must be
+  // evaluated on every key-set access (`ownKeys`/`has`/`get`). Value reads
+  // still forward straight to the source, keeping the view reactive.
+  if (isFunction(first)) {
+    const predicate = first as ReactivePickPredicate<T>;
+    const keeps = (key: PropertyKey): boolean =>
+      key in obj && predicate(toValue((obj as Record<PropertyKey, unknown>)[key]) as T[keyof T], key as keyof T);
+
+    return reactive(new Proxy({} as ReactivePickReturn<T, K>, {
+      get(_, key, receiver) {
+        return keeps(key) ? Reflect.get(obj, key, receiver) : undefined;
+      },
+      set(_, key, value) {
+        return keeps(key) ? Reflect.set(obj as object, key, value) : true;
+      },
+      has(_, key) {
+        return keeps(key);
+      },
+      ownKeys() {
+        return Reflect.ownKeys(obj).filter(keeps);
+      },
+      getOwnPropertyDescriptor(_, key) {
+        if (!keeps(key))
+          return undefined;
+
+        return { enumerable: true, configurable: true };
+      },
+    })) as ReactivePickReturn<T, K>;
+  }
+
+  // Key form: flatten the (possibly nested) key arguments into a stable Set
+  // once at construction time, then resolve membership in O(1) per access.
+  const picked = new Set<PropertyKey>((keys as Array<K | K[]>).flat());
+
+  return reactive(new Proxy({} as ReactivePickReturn<T, K>, {
+    get(_, key, receiver) {
+      return picked.has(key) ? Reflect.get(obj, key, receiver) : undefined;
+    },
+    set(_, key, value) {
+      return picked.has(key) ? Reflect.set(obj as object, key, value) : true;
+    },
+    has(_, key) {
+      return picked.has(key) && key in obj;
+    },
+    ownKeys() {
+      return Reflect.ownKeys(obj).filter(key => picked.has(key));
+    },
+    getOwnPropertyDescriptor(_, key) {
+      if (!picked.has(key) || !(key in obj))
+        return undefined;
+
+      return { enumerable: true, configurable: true };
+    },
+  })) as ReactivePickReturn<T, K>;
+}
diff --git a/vue/toolkit/src/composables/reactivity/refAutoReset/demo.vue b/vue/toolkit/src/composables/reactivity/refAutoReset/demo.vue
new file mode 100644
index 0000000..09717af
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/refAutoReset/demo.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { refAutoReset } from './index';
+
+// Reactive delay — the ref resets `delay`ms after the most recent write.
+const delay = ref(1500);
+
+// Reverts to 'Idle' once writes stop arriving.
+const status = refAutoReset('Idle', delay);
+const copied = refAutoReset(false, 1200);
+
+function flash(message: string) {
+  status.value = message;
+}
+
+async function copy() {
+  copied.value = true;
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="space-y-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Live value
+      </p>
+      <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <span class="font-mono text-lg font-semibold tabular-nums text-(--fg)">{{ status }}</span>
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
+          :class="status === 'Idle'
+            ? 'border-(--border) bg-(--bg-elevated) text-(--fg-muted)'
+            : 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'"
+        >
+          {{ status === 'Idle' ? 'reset' : 'active' }}
+        </span>
+      </div>
+
+      <div class="flex flex-wrap gap-2">
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="flash('Saved')"
+        >
+          Save
+        </button>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="flash('Synced')"
+        >
+          Sync
+        </button>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="flash('Uploading…')"
+        >
+          Upload
+        </button>
+      </div>
+    </div>
+
+    <label class="flex flex-col gap-1.5 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <span class="flex items-center justify-between text-sm text-(--fg)">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">reset delay</span>
+        <span class="font-mono tabular-nums text-(--fg-muted)">{{ delay }}ms</span>
+      </span>
+      <input
+        v-model.number="delay"
+        type="range"
+        min="500"
+        max="4000"
+        step="250"
+        class="w-full accent-(--accent) cursor-pointer"
+      >
+    </label>
+
+    <div class="flex items-center justify-between rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <span class="text-sm text-(--fg)">Copy-to-clipboard pattern</span>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="copy"
+      >
+        {{ copied ? 'Copied!' : 'Copy' }}
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/reactivity/refAutoReset/index.test.ts b/vue/toolkit/src/composables/reactivity/refAutoReset/index.test.ts
new file mode 100644
index 0000000..fa7166c
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/refAutoReset/index.test.ts
@@ -0,0 +1,138 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, ref, watch } from 'vue';
+import { refAutoReset } from '.';
+
+describe(refAutoReset, () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+
+  it('initializes with the default value', () => {
+    const value = refAutoReset('default', 1000);
+    expect(value.value).toBe('default');
+  });
+
+  it('resets to the default value after the delay', () => {
+    const value = refAutoReset('default', 1000);
+
+    value.value = 'changed';
+    expect(value.value).toBe('changed');
+
+    vi.advanceTimersByTime(999);
+    expect(value.value).toBe('changed');
+
+    vi.advanceTimersByTime(1);
+    expect(value.value).toBe('default');
+  });
+
+  it('uses a default delay of 10000ms', () => {
+    const value = refAutoReset('default');
+
+    value.value = 'changed';
+    vi.advanceTimersByTime(9999);
+    expect(value.value).toBe('changed');
+
+    vi.advanceTimersByTime(1);
+    expect(value.value).toBe('default');
+  });
+
+  it('restarts the timer on each set', () => {
+    const value = refAutoReset('default', 1000);
+
+    value.value = 'first';
+    vi.advanceTimersByTime(800);
+
+    value.value = 'second';
+    vi.advanceTimersByTime(800);
+    // 1600ms total elapsed but only 800ms since last set
+    expect(value.value).toBe('second');
+
+    vi.advanceTimersByTime(200);
+    expect(value.value).toBe('default');
+  });
+
+  it('does not reset before any write', () => {
+    const value = refAutoReset('default', 1000);
+
+    vi.advanceTimersByTime(5000);
+    expect(value.value).toBe('default');
+  });
+
+  it('resolves a reactive default value at reset time', () => {
+    const fallback = ref('a');
+    const value = refAutoReset(fallback, 1000);
+
+    expect(value.value).toBe('a');
+
+    value.value = 'changed';
+    fallback.value = 'b';
+
+    vi.advanceTimersByTime(1000);
+    expect(value.value).toBe('b');
+  });
+
+  it('resolves a reactive delay on each set', () => {
+    const delay = ref(1000);
+    const value = refAutoReset('default', delay);
+
+    value.value = 'first';
+    delay.value = 500;
+
+    // delay is resolved at set time -> still 1000 for the first write
+    vi.advanceTimersByTime(1000);
+    expect(value.value).toBe('default');
+
+    // next set picks up the new delay
+    value.value = 'second';
+    vi.advanceTimersByTime(500);
+    expect(value.value).toBe('default');
+  });
+
+  it('resolves a getter as the default value', () => {
+    let base = 1;
+    const value = refAutoReset(() => base, 1000);
+
+    expect(value.value).toBe(1);
+    value.value = 99;
+    base = 5;
+
+    vi.advanceTimersByTime(1000);
+    expect(value.value).toBe(5);
+  });
+
+  it('is reactive and triggers watchers on set and on reset', async () => {
+    const scope = effectScope();
+    const spy = vi.fn();
+
+    scope.run(() => {
+      const value = refAutoReset('default', 1000);
+      watch(value, spy, { flush: 'sync' });
+      value.value = 'changed';
+    });
+
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenLastCalledWith('changed', 'default', expect.anything());
+
+    vi.advanceTimersByTime(1000);
+    await nextTick();
+
+    expect(spy).toHaveBeenCalledTimes(2);
+    expect(spy).toHaveBeenLastCalledWith('default', 'changed', expect.anything());
+
+    scope.stop();
+  });
+
+  it('cancels the pending reset when the owning scope is disposed', () => {
+    const scope = effectScope();
+    let value!: ReturnType<typeof refAutoReset<string>>;
+
+    scope.run(() => {
+      value = refAutoReset('default', 1000);
+      value.value = 'changed';
+    });
+
+    scope.stop();
+
+    vi.advanceTimersByTime(1000);
+    expect(value.value).toBe('changed');
+  });
+});
diff --git a/vue/toolkit/src/composables/reactivity/refAutoReset/index.ts b/vue/toolkit/src/composables/reactivity/refAutoReset/index.ts
new file mode 100644
index 0000000..ab9e0d9
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/refAutoReset/index.ts
@@ -0,0 +1,59 @@
+import { customRef, toValue } from 'vue';
+import type { MaybeRefOrGetter, Ref } from 'vue';
+import { useTimeoutFn } from '@/composables/animation/useTimeoutFn';
+
+export type RefAutoResetReturn<T> = Ref<T>;
+
+/**
+ * @name refAutoReset
+ * @category Reactivity
+ * @description Create a ref that resets to its default value after a delay
+ * since the last write. Each set restarts the timer; reading is reactive.
+ *
+ * @param {MaybeRefOrGetter<T>} defaultValue The value the ref resets to (resolved each reset, can be reactive)
+ * @param {MaybeRefOrGetter<number>} [afterMs=10000] Delay in milliseconds before resetting (resolved on each set, can be reactive)
+ * @returns {RefAutoResetReturn<T>} A ref that auto-resets to `defaultValue`
+ *
+ * @example
+ * const message = refAutoReset('', 1000);
+ * message.value = 'Saved!'; // reverts to '' after 1000ms
+ *
+ * @example
+ * // Reactive delay and default
+ * const delay = ref(2000);
+ * const fallback = ref('idle');
+ * const status = refAutoReset(fallback, delay);
+ *
+ * @since 0.0.15
+ */
+export function refAutoReset<T>(
+  defaultValue: MaybeRefOrGetter<T>,
+  afterMs: MaybeRefOrGetter<number> = 10000,
+): RefAutoResetReturn<T> {
+  return customRef<T>((track, trigger) => {
+    let value: T = toValue(defaultValue);
+
+    const { start, stop } = useTimeoutFn(
+      () => {
+        value = toValue(defaultValue);
+        trigger();
+      },
+      afterMs,
+      { immediate: false },
+    );
+
+    return {
+      get() {
+        track();
+        return value;
+      },
+      set(newValue) {
+        value = newValue;
+        trigger();
+
+        stop();
+        start();
+      },
+    };
+  });
+}
diff --git a/vue/toolkit/src/composables/reactivity/refDebounced/demo.vue b/vue/toolkit/src/composables/reactivity/refDebounced/demo.vue
new file mode 100644
index 0000000..91d886e
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/refDebounced/demo.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { refDebounced } from './index';
+
+const search = ref('Vue composables');
+const ms = ref(400);
+
+// Read-only mirror that only updates after `ms` of quiet, with a maxWait ceiling.
+const debounced = refDebounced(search, ms, { maxWait: 2000 });
+
+const pending = computed(() => search.value !== debounced.value);
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <label class="flex flex-col gap-1.5">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Type to search
+      </span>
+      <input
+        v-model="search"
+        placeholder="Start typing…"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+    </label>
+
+    <label class="flex flex-col gap-1.5 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <span class="flex items-center justify-between text-sm text-(--fg)">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">debounce</span>
+        <span class="font-mono tabular-nums text-(--fg-muted)">{{ ms }}ms</span>
+      </span>
+      <input
+        v-model.number="ms"
+        type="range"
+        min="100"
+        max="1500"
+        step="50"
+        class="w-full accent-(--accent) cursor-pointer"
+      >
+    </label>
+
+    <div class="grid grid-cols-2 gap-3">
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-3">
+        <p class="mb-1 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Source
+        </p>
+        <p class="truncate font-mono text-sm text-(--fg)">{{ search || '—' }}</p>
+      </div>
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-3">
+        <p class="mb-1 flex items-center gap-1.5 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Debounced
+          <span
+            v-if="pending"
+            class="size-1.5 animate-pulse rounded-full bg-amber-500"
+            aria-label="pending"
+          />
+        </p>
+        <p class="truncate font-mono text-sm text-(--accent-text)">{{ debounced || '—' }}</p>
+      </div>
+    </div>
+
+    <p
+      class="rounded-lg border px-3 py-2 text-center text-xs font-medium transition"
+      :class="pending
+        ? 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'
+        : 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'"
+    >
+      {{ pending ? 'Waiting for input to settle…' : 'Synced — debounced value caught up' }}
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/reactivity/refDebounced/index.test.ts b/vue/toolkit/src/composables/reactivity/refDebounced/index.test.ts
new file mode 100644
index 0000000..5b55756
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/refDebounced/index.test.ts
@@ -0,0 +1,153 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, isReadonly, nextTick, reactive, ref } from 'vue';
+import { refDebounced } from '.';
+
+describe(refDebounced, () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.useRealTimers();
+  });
+
+  it('returns a readonly ref', () => {
+    const source = ref('a');
+    const debounced = refDebounced(source);
+    expect(isReadonly(debounced)).toBeTruthy();
+  });
+
+  it('mirrors the initial value synchronously', () => {
+    const source = ref('initial');
+    const debounced = refDebounced(source, 100);
+    expect(debounced.value).toBe('initial');
+  });
+
+  it('delays updates by the given ms', async () => {
+    const source = ref('a');
+    const debounced = refDebounced(source, 100);
+
+    source.value = 'b';
+    await nextTick();
+    expect(debounced.value).toBe('a');
+
+    vi.advanceTimersByTime(99);
+    expect(debounced.value).toBe('a');
+
+    vi.advanceTimersByTime(1);
+    expect(debounced.value).toBe('b');
+  });
+
+  it('uses a default delay of 200ms', async () => {
+    const source = ref(0);
+    const debounced = refDebounced(source);
+
+    source.value = 1;
+    await nextTick();
+
+    vi.advanceTimersByTime(199);
+    expect(debounced.value).toBe(0);
+
+    vi.advanceTimersByTime(1);
+    expect(debounced.value).toBe(1);
+  });
+
+  it('coalesces rapid bursts into a single trailing update', async () => {
+    const source = ref(0);
+    const debounced = refDebounced(source, 100);
+
+    source.value = 1;
+    await nextTick();
+    vi.advanceTimersByTime(50);
+
+    source.value = 2;
+    await nextTick();
+    vi.advanceTimersByTime(50);
+
+    source.value = 3;
+    await nextTick();
+
+    // Still within the debounce window — no update yet.
+    expect(debounced.value).toBe(0);
+
+    vi.advanceTimersByTime(100);
+    expect(debounced.value).toBe(3);
+  });
+
+  it('respects maxWait to force progress under sustained input', async () => {
+    const source = ref(0);
+    const debounced = refDebounced(source, 100, { maxWait: 250 });
+
+    // Keep pushing updates just before each debounce timer fires.
+    for (let i = 1; i <= 5; i++) {
+      source.value = i;
+      await nextTick();
+      vi.advanceTimersByTime(60);
+    }
+
+    // 5 * 60 = 300ms elapsed; maxWait (250ms) must have forced a flush.
+    expect(debounced.value).not.toBe(0);
+  });
+
+  it('supports a reactive ms', async () => {
+    const source = ref('a');
+    const ms = ref(100);
+    const debounced = refDebounced(source, ms);
+
+    ms.value = 50;
+    source.value = 'b';
+    await nextTick();
+
+    vi.advanceTimersByTime(50);
+    expect(debounced.value).toBe('b');
+  });
+
+  it('runs synchronously when ms is zero or negative', async () => {
+    const source = ref('a');
+    const debounced = refDebounced(source, 0);
+
+    source.value = 'b';
+    await nextTick();
+    expect(debounced.value).toBe('b');
+  });
+
+  it('works with a getter source', async () => {
+    const state = reactive({ n: 1 });
+    const debounced = refDebounced(() => state.n, 100);
+
+    expect(debounced.value).toBe(1);
+
+    state.n = 2;
+    await nextTick();
+    vi.advanceTimersByTime(100);
+    expect(debounced.value).toBe(2);
+  });
+
+  it('disposes pending timers when the owning scope stops', async () => {
+    const source = ref('a');
+    let debounced: ReturnType<typeof refDebounced<string>>;
+
+    const scope = effectScope();
+    scope.run(() => {
+      debounced = refDebounced(source, 100);
+    });
+
+    source.value = 'b';
+    await nextTick();
+
+    scope.stop();
+
+    vi.advanceTimersByTime(200);
+    // The pending update was cancelled with the scope.
+    expect(debounced!.value).toBe('a');
+  });
+
+  it('does not update when the source never changes (SSR-safe, no timers)', () => {
+    const source = ref('stable');
+    const debounced = refDebounced(source, 100);
+
+    vi.advanceTimersByTime(1000);
+    expect(debounced.value).toBe('stable');
+  });
+});
diff --git a/vue/toolkit/src/composables/reactivity/refDebounced/index.ts b/vue/toolkit/src/composables/reactivity/refDebounced/index.ts
new file mode 100644
index 0000000..d3566eb
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/refDebounced/index.ts
@@ -0,0 +1,52 @@
+import { shallowReadonly, shallowRef, toRef, toValue, watch } from 'vue';
+import type { MaybeRefOrGetter, Ref } from 'vue';
+import { useDebounceFn } from '@/composables/reactivity/useDebounceFn';
+import type { UseDebounceFnOptions } from '@/composables/reactivity/useDebounceFn';
+
+export type RefDebouncedOptions = UseDebounceFnOptions;
+
+export type RefDebouncedReturn<T> = Readonly<Ref<T>>;
+
+/**
+ * @name refDebounced
+ * @category Reactivity
+ * @description A readonly ref whose value mirrors a source but only after
+ * updates stop arriving for `ms`. Wraps the source change in our debounce
+ * primitive (built on `debounceFilter`), so rapid bursts collapse into a single
+ * delayed write. Supports a `maxWait` ceiling so the value still progresses
+ * under sustained input, and tears its timer down with the owning scope.
+ *
+ * @param {MaybeRefOrGetter<T>} source The ref, getter, or reactive source to debounce
+ * @param {MaybeRefOrGetter<number>} [ms=200] Debounce delay in milliseconds (can be reactive)
+ * @param {RefDebouncedOptions} [options={}] Debounce options (`maxWait`, `rejectOnCancel`)
+ * @returns {RefDebouncedReturn<T>} A readonly ref tracking the source with debounced updates
+ *
+ * @example
+ * const input = ref('');
+ * const debounced = refDebounced(input, 300);
+ * // debounced.value lags `input` by 300ms of quiet
+ *
+ * @example
+ * // Guarantee the debounced value advances at least every 1000ms
+ * const debounced = refDebounced(input, 300, { maxWait: 1000 });
+ *
+ * @since 0.0.15
+ */
+export function refDebounced<T>(
+  source: MaybeRefOrGetter<T>,
+  ms: MaybeRefOrGetter<number> = 200,
+  options: RefDebouncedOptions = {},
+): RefDebouncedReturn<T> {
+  const reference = toRef(source);
+  const debounced = shallowRef(toValue(source)) as Ref<T>;
+
+  const update = useDebounceFn(() => {
+    debounced.value = reference.value;
+  }, ms, options);
+
+  watch(reference, () => {
+    void update();
+  });
+
+  return shallowReadonly(debounced) as RefDebouncedReturn<T>;
+}
diff --git a/vue/toolkit/src/composables/reactivity/refDefault/demo.vue b/vue/toolkit/src/composables/reactivity/refDefault/demo.vue
new file mode 100644
index 0000000..2b7750f
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/refDefault/demo.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { refDefault } from './index';
+
+// Source may legitimately hold null (e.g. "not set yet").
+const raw = ref<string | null>(null);
+
+// Reactive fallback — `name` reads as `fallback` whenever `raw` is null/undefined.
+const fallback = ref('Anonymous');
+const name = refDefault(raw, fallback);
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="space-y-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Resolved value
+      </p>
+      <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <span class="font-mono text-lg font-semibold text-(--fg)">{{ name }}</span>
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+          :class="raw == null
+            ? 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'
+            : 'border-(--border) bg-(--bg-elevated) text-(--fg-muted)'"
+        >
+          {{ raw == null ? 'using default' : 'from source' }}
+        </span>
+      </div>
+    </div>
+
+    <label class="flex flex-col gap-1.5">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Source ref (writes pass through)
+      </span>
+      <div class="flex gap-2">
+        <input
+          v-model="name"
+          placeholder="Type a name…"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+        <button
+          type="button"
+          class="inline-flex shrink-0 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          :disabled="raw == null"
+          @click="raw = null"
+        >
+          Clear
+        </button>
+      </div>
+      <span class="font-mono text-xs text-(--fg-subtle)">
+        raw.value = {{ raw === null ? 'null' : `"${raw}"` }}
+      </span>
+    </label>
+
+    <label class="flex flex-col gap-1.5 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Reactive fallback
+      </span>
+      <input
+        v-model="fallback"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+      <span class="text-xs text-(--fg-subtle)">
+        Changes here update the resolved value while the source is empty.
+      </span>
+    </label>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/reactivity/refDefault/index.test.ts b/vue/toolkit/src/composables/reactivity/refDefault/index.test.ts
new file mode 100644
index 0000000..91de25e
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/refDefault/index.test.ts
@@ -0,0 +1,99 @@
+import { describe, expect, it } from 'vitest';
+import { isReadonly, ref } from 'vue';
+import { refDefault } from '.';
+
+describe(refDefault, () => {
+  it('returns the default when the source is null', () => {
+    const source = ref<string | null>(null);
+    const wrapped = refDefault(source, 'fallback');
+    expect(wrapped.value).toBe('fallback');
+  });
+
+  it('returns the default when the source is undefined', () => {
+    const source = ref<string | undefined>(undefined);
+    const wrapped = refDefault(source, 'fallback');
+    expect(wrapped.value).toBe('fallback');
+  });
+
+  it('returns the source value when it is present', () => {
+    const source = ref<string | null>('actual');
+    const wrapped = refDefault(source, 'fallback');
+    expect(wrapped.value).toBe('actual');
+  });
+
+  it('reacts when the source becomes null or non-null', () => {
+    const source = ref<string | null>('initial');
+    const wrapped = refDefault(source, 'fallback');
+    expect(wrapped.value).toBe('initial');
+    source.value = null;
+    expect(wrapped.value).toBe('fallback');
+    source.value = 'restored';
+    expect(wrapped.value).toBe('restored');
+  });
+
+  it('does NOT replace falsy-but-defined values (0, empty string, false)', () => {
+    expect(refDefault(ref<number | null>(0), 99).value).toBe(0);
+    expect(refDefault(ref<string | null>(''), 'x').value).toBe('');
+    expect(refDefault(ref<boolean | null>(false), true).value).toBeFalsy();
+  });
+
+  it('writes pass straight through to the source', () => {
+    const source = ref<string | null>(null);
+    const wrapped = refDefault(source, 'fallback');
+    wrapped.value = 'written';
+    expect(source.value).toBe('written');
+    expect(wrapped.value).toBe('written');
+  });
+
+  it('can be written back to null, which re-exposes the default on read', () => {
+    const source = ref<string | null>('present');
+    const wrapped = refDefault(source, 'fallback');
+    wrapped.value = null as never;
+    expect(source.value).toBeNull();
+    expect(wrapped.value).toBe('fallback');
+  });
+
+  it('supports a reactive (ref) default value', () => {
+    const fallback = ref('guest');
+    const wrapped = refDefault(ref<string | null>(null), fallback);
+    expect(wrapped.value).toBe('guest');
+    fallback.value = 'visitor';
+    expect(wrapped.value).toBe('visitor');
+  });
+
+  it('supports a getter default value', () => {
+    const base = ref(2);
+    const wrapped = refDefault(ref<string | null>(null), () => `item-${base.value}`);
+    expect(wrapped.value).toBe('item-2');
+    base.value = 5;
+    expect(wrapped.value).toBe('item-5');
+  });
+
+  it('prefers the source over a reactive default once the source is set', () => {
+    const fallback = ref('guest');
+    const source = ref<string | null>(null);
+    const wrapped = refDefault(source, fallback);
+    expect(wrapped.value).toBe('guest');
+    source.value = 'ada';
+    expect(wrapped.value).toBe('ada');
+    fallback.value = 'changed';
+    expect(wrapped.value).toBe('ada');
+  });
+
+  it('works with object sources', () => {
+    const fallback = { id: 0 };
+    const source = ref<{ id: number } | null>(null);
+    const wrapped = refDefault(source, fallback);
+    // ref does not proxy the plain default object, so identity is preserved
+    expect(wrapped.value).toBe(fallback);
+    source.value = { id: 1 };
+    // ref() wraps object source values in a reactive proxy; compare by shape
+    expect(wrapped.value).toStrictEqual({ id: 1 });
+    expect(wrapped.value).toBe(source.value);
+  });
+
+  it('returns a writable (non-readonly) computed ref', () => {
+    const wrapped = refDefault(ref<string | null>(null), 'fallback');
+    expect(isReadonly(wrapped)).toBeFalsy();
+  });
+});
diff --git a/vue/toolkit/src/composables/reactivity/refDefault/index.ts b/vue/toolkit/src/composables/reactivity/refDefault/index.ts
new file mode 100644
index 0000000..49349ef
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/refDefault/index.ts
@@ -0,0 +1,50 @@
+import { computed, toValue } from 'vue';
+import type { MaybeRefOrGetter, Ref, WritableComputedRef } from 'vue';
+
+export type RefDefaultReturn<T> = WritableComputedRef<T>;
+
+/**
+ * @name refDefault
+ * @category Reactivity
+ * @description Wrap a writable `ref` so that reads fall back to a default value
+ * whenever the source holds `null` or `undefined`, while writes pass straight
+ * through to the source. The default may itself be reactive (a ref, getter, or
+ * plain value), so the fallback can track other state. Implemented as a single
+ * writable `computed` — no watchers, no extra refs, nothing to tear down — which
+ * keeps it allocation-light and SSR-safe (it never touches the DOM).
+ *
+ * @param {Ref<T | null | undefined>} source The source ref to read through and write back to
+ * @param {MaybeRefOrGetter<T>} defaultValue Fallback returned when the source is `null`/`undefined` (can be reactive)
+ * @returns {RefDefaultReturn<T>} A writable computed ref that never reads as `null`/`undefined`
+ *
+ * @example
+ * const raw = ref<string | null>(null);
+ * const name = refDefault(raw, 'anonymous');
+ * name.value; // 'anonymous'
+ * raw.value = 'ada';
+ * name.value; // 'ada'
+ * name.value = 'grace';
+ * raw.value; // 'grace' — writes pass through
+ *
+ * @example
+ * // The default can be reactive
+ * const fallback = ref('guest');
+ * const user = refDefault(ref<string | null>(null), fallback);
+ * fallback.value = 'visitor';
+ * user.value; // 'visitor'
+ *
+ * @since 0.0.15
+ */
+export function refDefault<T>(
+  source: Ref<T | null | undefined>,
+  defaultValue: MaybeRefOrGetter<T>,
+): RefDefaultReturn<T> {
+  return computed<T>({
+    get() {
+      return source.value ?? toValue(defaultValue);
+    },
+    set(value) {
+      source.value = value;
+    },
+  });
+}
diff --git a/vue/toolkit/src/composables/reactivity/refThrottled/demo.vue b/vue/toolkit/src/composables/reactivity/refThrottled/demo.vue
new file mode 100644
index 0000000..ac0fc31
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/refThrottled/demo.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { computed, onUnmounted, ref } from 'vue';
+import { refThrottled } from './index';
+
+const delay = ref(500);
+
+// A high-frequency source the throttled ref will rate-limit.
+const source = ref(0);
+const throttled = refThrottled(source, delay.value);
+
+// Track how often each side actually updates so the savings are visible.
+const sourceUpdates = ref(0);
+const throttledUpdates = ref(0);
+
+let lastThrottled = throttled.value;
+const lag = computed(() => source.value - throttled.value);
+
+let timer: ReturnType<typeof setInterval> | undefined;
+const running = ref(false);
+
+function tick() {
+  source.value++;
+  sourceUpdates.value++;
+  if (throttled.value !== lastThrottled) {
+    lastThrottled = throttled.value;
+    throttledUpdates.value++;
+  }
+}
+
+function start() {
+  if (running.value)
+    return;
+  running.value = true;
+  timer = setInterval(tick, 60);
+}
+
+function stop() {
+  running.value = false;
+  if (timer)
+    clearInterval(timer);
+  timer = undefined;
+}
+
+function reset() {
+  stop();
+  source.value = 0;
+  sourceUpdates.value = 0;
+  throttledUpdates.value = 0;
+  lastThrottled = throttled.value;
+}
+
+onUnmounted(stop);
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="grid grid-cols-2 gap-3">
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-1">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Source</span>
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ source }}</span>
+        <span class="text-xs text-(--fg-muted)">{{ sourceUpdates }} updates</span>
+      </div>
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-1">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Throttled</span>
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--accent-text)">{{ throttled }}</span>
+        <span class="text-xs text-(--fg-muted)">{{ throttledUpdates }} updates</span>
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Lag behind source</span>
+      <span class="font-mono text-sm tabular-nums text-(--fg)">+{{ lag }}</span>
+    </div>
+
+    <label class="flex flex-col gap-1.5">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Throttle window: {{ delay }}ms
+      </span>
+      <input
+        v-model.number="delay"
+        type="range"
+        min="100"
+        max="1500"
+        step="100"
+        class="w-full accent-(--accent) cursor-pointer"
+      >
+      <span class="text-xs text-(--fg-subtle)">Reset to apply a new window</span>
+    </label>
+
+    <div class="flex gap-2">
+      <button
+        type="button"
+        :disabled="running"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="start"
+      >
+        Run (60ms)
+      </button>
+      <button
+        type="button"
+        :disabled="!running"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="stop"
+      >
+        Pause
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="reset"
+      >
+        Reset
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/reactivity/refThrottled/index.test.ts b/vue/toolkit/src/composables/reactivity/refThrottled/index.test.ts
new file mode 100644
index 0000000..877a7e8
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/refThrottled/index.test.ts
@@ -0,0 +1,168 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, ref } from 'vue';
+import { refThrottled } from '.';
+
+describe(refThrottled, () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('initializes with the source value', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const source = ref('init');
+      const throttled = refThrottled(source, 100);
+      expect(throttled.value).toBe('init');
+    });
+    scope.stop();
+  });
+
+  it('updates immediately on the leading edge', async () => {
+    const scope = effectScope();
+    await scope.run(async () => {
+      const source = ref(0);
+      const throttled = refThrottled(source, 100);
+
+      source.value = 1;
+      await nextTick();
+      expect(throttled.value).toBe(1);
+    });
+    scope.stop();
+  });
+
+  it('throttles intermediate updates within the window', async () => {
+    const scope = effectScope();
+    await scope.run(async () => {
+      const source = ref(0);
+      const throttled = refThrottled(source, 100);
+
+      source.value = 1;
+      await nextTick();
+      expect(throttled.value).toBe(1);
+
+      source.value = 2;
+      await nextTick();
+      // Still within the window: not yet propagated as a fresh leading update.
+      expect(throttled.value).toBe(1);
+
+      source.value = 3;
+      await nextTick();
+      expect(throttled.value).toBe(1);
+
+      // Trailing edge fires with the most recent value.
+      vi.advanceTimersByTime(100);
+      await nextTick();
+      expect(throttled.value).toBe(3);
+    });
+    scope.stop();
+  });
+
+  it('does not emit a trailing update when trailing is false', async () => {
+    const scope = effectScope();
+    await scope.run(async () => {
+      const source = ref(0);
+      const throttled = refThrottled(source, 100, false);
+
+      source.value = 1;
+      await nextTick();
+      expect(throttled.value).toBe(1);
+
+      source.value = 2;
+      await nextTick();
+      expect(throttled.value).toBe(1);
+
+      vi.advanceTimersByTime(200);
+      await nextTick();
+      // No trailing edge: value stays at the leading update.
+      expect(throttled.value).toBe(1);
+    });
+    scope.stop();
+  });
+
+  it('skips the leading update when leading is false', async () => {
+    const scope = effectScope();
+    await scope.run(async () => {
+      const source = ref(0);
+      const throttled = refThrottled(source, 100, true, false);
+
+      source.value = 1;
+      await nextTick();
+      // Leading suppressed: initial value retained until the trailing edge.
+      expect(throttled.value).toBe(0);
+
+      vi.advanceTimersByTime(100);
+      await nextTick();
+      expect(throttled.value).toBe(1);
+    });
+    scope.stop();
+  });
+
+  it('mirrors the source synchronously when delay <= 0', async () => {
+    const scope = effectScope();
+    await scope.run(async () => {
+      const source = ref(0);
+      const throttled = refThrottled(source, 0);
+
+      source.value = 1;
+      await nextTick();
+      expect(throttled.value).toBe(1);
+
+      source.value = 2;
+      await nextTick();
+      expect(throttled.value).toBe(2);
+    });
+    scope.stop();
+  });
+
+  it('mirrors the source synchronously when delay is negative', async () => {
+    const scope = effectScope();
+    await scope.run(async () => {
+      const source = ref('a');
+      const throttled = refThrottled(source, -50);
+
+      source.value = 'b';
+      await nextTick();
+      expect(throttled.value).toBe('b');
+    });
+    scope.stop();
+  });
+
+  it('accepts a getter as the source', async () => {
+    const scope = effectScope();
+    await scope.run(async () => {
+      const obj = ref({ n: 1 });
+      const throttled = refThrottled(() => obj.value.n, 100);
+      expect(throttled.value).toBe(1);
+
+      obj.value = { n: 2 };
+      await nextTick();
+      expect(throttled.value).toBe(2);
+    });
+    scope.stop();
+  });
+
+  it('reopens the leading edge after the window elapses', async () => {
+    const scope = effectScope();
+    await scope.run(async () => {
+      const source = ref(0);
+      const throttled = refThrottled(source, 100);
+
+      source.value = 1;
+      await nextTick();
+      expect(throttled.value).toBe(1);
+
+      // Advance past the window so the next change is a fresh leading update.
+      vi.advanceTimersByTime(100);
+      await nextTick();
+
+      source.value = 2;
+      await nextTick();
+      expect(throttled.value).toBe(2);
+    });
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/reactivity/refThrottled/index.ts b/vue/toolkit/src/composables/reactivity/refThrottled/index.ts
new file mode 100644
index 0000000..bd5d4a0
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/refThrottled/index.ts
@@ -0,0 +1,60 @@
+import { ref, toValue, watch } from 'vue';
+import type { MaybeRefOrGetter, Ref } from 'vue';
+import { createFilterWrapper, throttleFilter } from '@/utils/filters';
+
+export type RefThrottledReturn<T = any> = Ref<T>;
+
+/**
+ * @name refThrottled
+ * @category Reactivity
+ * @description A ref whose value updates are throttled. The returned ref mirrors
+ * the source but propagates changes at most once per `delay` window, making it
+ * useful for rate-limiting reactive updates driven by high-frequency events such
+ * as `scroll` or `resize`.
+ *
+ * @param {MaybeRefOrGetter<T>} source The ref, getter, or value to watch and throttle
+ * @param {number} [delay=200] A zero-or-greater delay in milliseconds; values around 100–250 (or higher) are most useful
+ * @param {boolean} [trailing=true] Update the value again on the trailing edge after the window elapses
+ * @param {boolean} [leading=true] Update the value on the leading edge of the window
+ * @returns {RefThrottledReturn<T>} A ref reflecting the throttled source value
+ *
+ * @example
+ * const input = ref('');
+ * const throttled = refThrottled(input, 1000);
+ *
+ * @example
+ * const scrollY = ref(0);
+ * const throttledY = refThrottled(scrollY, 100, true, false);
+ *
+ * @since 0.0.15
+ */
+export function refThrottled<T = any>(
+  source: MaybeRefOrGetter<T>,
+  delay = 200,
+  trailing = true,
+  leading = true,
+): RefThrottledReturn<T> {
+  const throttled = ref(toValue(source)) as Ref<T>;
+
+  // A non-positive delay disables throttling: mirror the source synchronously.
+  if (delay <= 0) {
+    watch(() => toValue(source), (value) => {
+      throttled.value = value;
+    });
+
+    return throttled;
+  }
+
+  const update = createFilterWrapper(
+    throttleFilter(delay, trailing, leading),
+    () => {
+      throttled.value = toValue(source);
+    },
+  );
+
+  watch(() => toValue(source), () => {
+    update();
+  });
+
+  return throttled;
+}
diff --git a/vue/toolkit/src/composables/reactivity/refWithControl/demo.vue b/vue/toolkit/src/composables/reactivity/refWithControl/demo.vue
new file mode 100644
index 0000000..f829e24
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/refWithControl/demo.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { refWithControl } from './index';
+
+interface LogEntry {
+  id: number;
+  message: string;
+  vetoed: boolean;
+}
+
+const log = ref<LogEntry[]>([]);
+let logId = 0;
+
+function push(message: string, vetoed = false) {
+  log.value.unshift({ id: logId++, message, vetoed });
+  if (log.value.length > 6)
+    log.value.pop();
+}
+
+// Only values within 0..10 are accepted; anything else is vetoed.
+const volume = refWithControl(5, {
+  onBeforeChange: (value) => {
+    if (value < 0 || value > 10) {
+      push(`vetoed ${value} (out of 0..10)`, true);
+      return false;
+    }
+  },
+  onChanged: (value, old) => push(`changed ${old} -> ${value}`),
+});
+
+// Read without registering tracking — does not show up reactively.
+const peeked = ref(volume.peek());
+function peek() {
+  peeked.value = volume.peek();
+}
+
+// Write without triggering effects: the bound display stays stale until
+// a tracked read/write happens, demonstrating the silent set.
+function silentBump() {
+  volume.lay(Math.min(10, volume.peek() + 1));
+  peeked.value = volume.peek();
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+      <div class="flex items-baseline justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Volume (tracked)</span>
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ volume }}</span>
+      </div>
+      <div class="flex gap-2">
+        <button
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="volume.value--"
+        >
+          - 1
+        </button>
+        <button
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+          @click="volume.value++"
+        >
+          + 1
+        </button>
+        <button
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="volume.value = 99"
+        >
+          Set 99
+        </button>
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex items-center justify-between">
+      <div class="flex flex-col">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">peek() snapshot</span>
+        <span class="text-xs text-(--fg-subtle)">untracked read; lay() writes silently</span>
+      </div>
+      <span class="font-mono text-2xl font-bold tabular-nums text-(--fg)">{{ peeked }}</span>
+    </div>
+
+    <div class="flex gap-2">
+      <button
+        type="button"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="peek"
+      >
+        peek()
+      </button>
+      <button
+        type="button"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="silentBump"
+      >
+        lay() +1 silent
+      </button>
+    </div>
+
+    <div class="flex flex-col gap-1.5">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Hooks log</span>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 min-h-24 flex flex-col gap-1">
+        <p v-if="!log.length" class="text-xs text-(--fg-subtle)">
+          Try setting volume to 99 to see onBeforeChange veto.
+        </p>
+        <p
+          v-for="entry in log"
+          :key="entry.id"
+          class="font-mono text-xs tabular-nums"
+          :class="entry.vetoed ? 'text-red-600 dark:text-red-400' : 'text-(--fg-muted)'"
+        >
+          {{ entry.vetoed ? '✗' : '✓' }} {{ entry.message }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/reactivity/refWithControl/index.test.ts b/vue/toolkit/src/composables/reactivity/refWithControl/index.test.ts
new file mode 100644
index 0000000..f277ebe
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/refWithControl/index.test.ts
@@ -0,0 +1,249 @@
+import { describe, expect, it, vi } from 'vitest';
+import { computed, effectScope, isRef, nextTick, watch } from 'vue';
+import { controlledRef, refWithControl } from '.';
+
+describe(refWithControl, () => {
+  it('behaves like a normal ref by default', () => {
+    const num = refWithControl(0);
+
+    expect(isRef(num)).toBeTruthy();
+    expect(num.value).toBe(0);
+
+    num.value = 1;
+    expect(num.value).toBe(1);
+
+    num.value++;
+    expect(num.value).toBe(2);
+  });
+
+  it('triggers reactive effects on a tracked set', async () => {
+    const scope = effectScope();
+    const num = refWithControl(0);
+    const spy = vi.fn();
+
+    scope.run(() => {
+      watch(num, spy, { flush: 'sync' });
+    });
+
+    num.value = 5;
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenLastCalledWith(5, 0, expect.anything());
+
+    scope.stop();
+  });
+
+  it('is reactive inside computed', () => {
+    const num = refWithControl(2);
+    const double = computed(() => num.value * 2);
+
+    expect(double.value).toBe(4);
+    num.value = 3;
+    expect(double.value).toBe(6);
+  });
+
+  it('does not trigger effects when the value is unchanged', () => {
+    const scope = effectScope();
+    const num = refWithControl(0);
+    const spy = vi.fn();
+
+    scope.run(() => {
+      watch(num, spy, { flush: 'sync' });
+    });
+
+    num.value = 0;
+    expect(spy).not.toHaveBeenCalled();
+
+    scope.stop();
+  });
+
+  describe('peek / untrackedGet', () => {
+    it('reads the current value', () => {
+      const num = refWithControl(42);
+      expect(num.peek()).toBe(42);
+      expect(num.untrackedGet()).toBe(42);
+    });
+
+    it('does not register reactive tracking', () => {
+      const scope = effectScope();
+      const num = refWithControl(0);
+      let read = 0;
+
+      scope.run(() => {
+        watch(() => num.peek(), () => {
+          read++;
+        }, { flush: 'sync' });
+      });
+
+      num.value = 1;
+      expect(read).toBe(0);
+
+      scope.stop();
+    });
+  });
+
+  describe('lay / silentSet', () => {
+    it('writes without triggering effects', () => {
+      const scope = effectScope();
+      const num = refWithControl(0);
+      const spy = vi.fn();
+
+      scope.run(() => {
+        watch(num, spy, { flush: 'sync' });
+      });
+
+      num.lay(10);
+      expect(num.peek()).toBe(10);
+      expect(spy).not.toHaveBeenCalled();
+
+      num.silentSet(20);
+      expect(num.peek()).toBe(20);
+      expect(spy).not.toHaveBeenCalled();
+
+      scope.stop();
+    });
+  });
+
+  describe('get / set explicit control', () => {
+    it('get(false) skips tracking and set(v, false) skips triggering', () => {
+      const scope = effectScope();
+      const num = refWithControl(0);
+      const spy = vi.fn();
+
+      scope.run(() => {
+        watch(num, spy, { flush: 'sync' });
+      });
+
+      expect(num.get(false)).toBe(0);
+      num.set(7, false);
+      expect(num.get()).toBe(7);
+      expect(spy).not.toHaveBeenCalled();
+
+      num.set(8);
+      expect(spy).toHaveBeenCalledTimes(1);
+
+      scope.stop();
+    });
+  });
+
+  describe('onBeforeChange', () => {
+    it('receives the new and old value', () => {
+      const onBeforeChange = vi.fn();
+      const num = refWithControl(1 as number, { onBeforeChange });
+
+      num.value = 2;
+      expect(onBeforeChange).toHaveBeenCalledWith(2, 1);
+    });
+
+    it('rejects the change when it returns false', () => {
+      const num = refWithControl(1, {
+        onBeforeChange: value => value > 0,
+      });
+
+      num.value = 5;
+      expect(num.value).toBe(5);
+
+      num.value = -1;
+      expect(num.value).toBe(5);
+    });
+
+    it('allows the change for any non-false return', () => {
+      const num = refWithControl(0, {
+        onBeforeChange: () => undefined,
+      });
+
+      num.value = 3;
+      expect(num.value).toBe(3);
+    });
+
+    it('runs on silent sets too and can still veto', () => {
+      const num = refWithControl(0, {
+        onBeforeChange: value => value !== 99,
+      });
+
+      num.lay(99);
+      expect(num.peek()).toBe(0);
+
+      num.lay(7);
+      expect(num.peek()).toBe(7);
+    });
+  });
+
+  describe('onChanged', () => {
+    it('fires after a tracked change', () => {
+      const onChanged = vi.fn();
+      const num = refWithControl(1 as number, { onChanged });
+
+      num.value = 2;
+      expect(onChanged).toHaveBeenCalledWith(2, 1);
+    });
+
+    it('fires on silent sets as well', () => {
+      const onChanged = vi.fn();
+      const num = refWithControl(0 as number, { onChanged });
+
+      num.silentSet(9);
+      expect(onChanged).toHaveBeenCalledWith(9, 0);
+    });
+
+    it('does not fire when the change was vetoed', () => {
+      const onChanged = vi.fn();
+      const num = refWithControl(0 as number, {
+        onBeforeChange: () => false,
+        onChanged,
+      });
+
+      num.value = 1;
+      expect(onChanged).not.toHaveBeenCalled();
+      expect(num.value).toBe(0);
+    });
+
+    it('does not fire when the value is unchanged', () => {
+      const onChanged = vi.fn();
+      const num = refWithControl(5, { onChanged });
+
+      num.value = 5;
+      expect(onChanged).not.toHaveBeenCalled();
+    });
+  });
+
+  it('works with post-flush watchers', async () => {
+    const scope = effectScope();
+    const num = refWithControl(0);
+    const spy = vi.fn();
+
+    scope.run(() => {
+      watch(num, spy, { flush: 'post' });
+    });
+
+    num.value = 1;
+    expect(spy).not.toHaveBeenCalled();
+
+    await nextTick();
+    expect(spy).toHaveBeenCalledTimes(1);
+
+    scope.stop();
+  });
+
+  it('exposes controlledRef as an alias', () => {
+    expect(controlledRef).toBe(refWithControl);
+
+    const num = controlledRef('a');
+    expect(num.value).toBe('a');
+    num.value = 'b';
+    expect(num.peek()).toBe('b');
+  });
+
+  it('supports object values via reference equality', () => {
+    const a = { id: 1 };
+    const b = { id: 2 };
+    const onChanged = vi.fn();
+    const obj = refWithControl(a, { onChanged });
+
+    obj.value = a;
+    expect(onChanged).not.toHaveBeenCalled();
+
+    obj.value = b;
+    expect(onChanged).toHaveBeenCalledWith(b, a);
+    expect(obj.value).toBe(b);
+  });
+});
diff --git a/vue/toolkit/src/composables/reactivity/refWithControl/index.ts b/vue/toolkit/src/composables/reactivity/refWithControl/index.ts
new file mode 100644
index 0000000..70b4082
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/refWithControl/index.ts
@@ -0,0 +1,159 @@
+import { customRef } from 'vue';
+import type { Ref, ShallowUnwrapRef } from 'vue';
+import { extendRef } from '@/composables/reactivity/extendRef';
+
+export interface RefWithControlOptions<T> {
+  /**
+   * Called right before the value is about to change.
+   *
+   * Return `false` to reject the change and keep the current value.
+   *
+   * @param value The incoming value
+   * @param oldValue The current value
+   */
+  onBeforeChange?: (value: T, oldValue: T) => void | boolean;
+
+  /**
+   * Called after the value has changed and (optionally) the ref has triggered.
+   *
+   * @param value The new value
+   * @param oldValue The previous value
+   */
+  onChanged?: (value: T, oldValue: T) => void;
+}
+
+export interface ControlledRefMethods<T> {
+  /**
+   * Read the value, optionally registering reactive tracking.
+   *
+   * @param tracking Whether to register the dependency. Defaults to `true`.
+   */
+  get: (tracking?: boolean) => T;
+
+  /**
+   * Write the value, optionally triggering reactive effects.
+   *
+   * @param value The new value
+   * @param triggering Whether to trigger effects. Defaults to `true`.
+   */
+  set: (value: T, triggering?: boolean) => void;
+
+  /**
+   * Read the value without registering reactive tracking. Alias of `get(false)`.
+   */
+  peek: () => T;
+
+  /**
+   * Write the value without triggering reactive effects. Alias of `set(v, false)`.
+   */
+  lay: (value: T) => void;
+
+  /**
+   * Read the value without registering reactive tracking. Alias of `peek`.
+   */
+  untrackedGet: () => T;
+
+  /**
+   * Write the value without triggering reactive effects. Alias of `lay`.
+   */
+  silentSet: (value: T) => void;
+}
+
+export type RefWithControlReturn<T>
+  = Ref<T> & ShallowUnwrapRef<ControlledRefMethods<T>>;
+
+/**
+ * @name refWithControl
+ * @category Reactivity
+ * @description A ref with fine-grained control over its reactivity: read/write
+ * without tracking or triggering, plus `onBeforeChange` (vetoable) and
+ * `onChanged` hooks. Built on `customRef`, so there are no extra watchers.
+ *
+ * @param {T} initial The initial value
+ * @param {RefWithControlOptions<T>} [options={}] `onBeforeChange` (return `false` to veto) and `onChanged` hooks
+ * @returns {RefWithControlReturn<T>} A ref extended with `get`/`set`/`peek`/`lay`/`untrackedGet`/`silentSet`
+ *
+ * @example
+ * const num = refWithControl(0);
+ * num.value++; // tracked + triggered, like a normal ref
+ * num.peek(); // read without tracking
+ * num.lay(5); // write without triggering effects
+ *
+ * @example
+ * // veto changes with onBeforeChange
+ * const positive = refWithControl(1, {
+ *   onBeforeChange: (value) => value > 0, // reject non-positive values
+ *   onChanged: (value, old) => log(`${old} -> ${value}`),
+ * });
+ * positive.value = -1; // rejected, stays 1
+ *
+ * @since 0.0.15
+ */
+export function refWithControl<T>(
+  initial: T,
+  options: RefWithControlOptions<T> = {},
+): RefWithControlReturn<T> {
+  const { onBeforeChange, onChanged } = options;
+
+  let source = initial;
+  let track: () => void;
+  let trigger: () => void;
+
+  const controlled = customRef<T>((_track, _trigger) => {
+    track = _track;
+    trigger = _trigger;
+
+    return {
+      get: () => get(),
+      set: value => set(value),
+    };
+  });
+
+  function get(tracking = true): T {
+    if (tracking)
+      track();
+
+    return source;
+  }
+
+  function set(value: T, triggering = true): void {
+    if (value === source)
+      return;
+
+    const oldValue = source;
+
+    if (onBeforeChange?.(value, oldValue) === false)
+      return;
+
+    source = value;
+    onChanged?.(value, oldValue);
+
+    if (triggering)
+      trigger();
+  }
+
+  const peek = (): T => get(false);
+  const lay = (value: T): void => set(value, false);
+
+  return extendRef(
+    controlled,
+    {
+      get,
+      set,
+      peek,
+      lay,
+      untrackedGet: peek,
+      silentSet: lay,
+    },
+    { enumerable: true },
+  ) as RefWithControlReturn<T>;
+}
+
+/**
+ * @name controlledRef
+ * @category Reactivity
+ * @description Alias of {@link refWithControl}.
+ *
+ * @since 0.0.15
+ */
+export const controlledRef = refWithControl;
diff --git a/vue/toolkit/src/composables/reactivity/syncRef/demo.vue b/vue/toolkit/src/composables/reactivity/syncRef/demo.vue
new file mode 100644
index 0000000..539215c
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/syncRef/demo.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { onUnmounted, ref } from 'vue';
+import { syncRef } from './index';
+
+// Two refs kept in sync with a transform: Celsius <-> Fahrenheit.
+const celsius = ref(20);
+const fahrenheit = ref(68);
+
+const { stop } = syncRef(celsius, fahrenheit, {
+  direction: 'both',
+  transform: {
+    ltr: c => Math.round((c * 9) / 5 + 32),
+    rtl: f => Math.round(((f - 32) * 5) / 9),
+  },
+});
+
+const synced = ref(true);
+function toggleSync() {
+  if (synced.value) {
+    stop();
+    synced.value = false;
+  }
+}
+
+onUnmounted(stop);
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Two-way sync + transform</span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+        :class="synced
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        <span
+          class="size-1.5 rounded-full"
+          :class="synced ? 'bg-emerald-500' : 'bg-(--fg-subtle)'"
+        />
+        {{ synced ? 'live' : 'stopped' }}
+      </span>
+    </div>
+
+    <div class="grid grid-cols-2 gap-3">
+      <label class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-2">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Celsius</span>
+        <input
+          v-model.number="celsius"
+          type="number"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-lg font-mono tabular-nums text-(--fg) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+      </label>
+      <label class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-2">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Fahrenheit</span>
+        <input
+          v-model.number="fahrenheit"
+          type="number"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-lg font-mono tabular-nums text-(--fg) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+      </label>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+      {{ celsius }}°C ⇄ {{ fahrenheit }}°F
+    </div>
+
+    <input
+      v-model.number="celsius"
+      type="range"
+      min="-20"
+      max="40"
+      step="1"
+      class="w-full accent-(--accent) cursor-pointer"
+      aria-label="Celsius slider"
+    >
+
+    <button
+      type="button"
+      :disabled="!synced"
+      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+      @click="toggleSync"
+    >
+      Stop synchronization
+    </button>
+    <p v-if="!synced" class="text-xs text-(--fg-subtle) -mt-2">
+      Watchers torn down — the two refs now drift independently.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/reactivity/syncRef/index.test.ts b/vue/toolkit/src/composables/reactivity/syncRef/index.test.ts
new file mode 100644
index 0000000..49b8e29
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/syncRef/index.test.ts
@@ -0,0 +1,184 @@
+import { describe, expect, it } from 'vitest';
+import { effectScope, nextTick, ref } from 'vue';
+import { syncRef } from '.';
+
+describe(syncRef, () => {
+  it('keeps both refs in sync two-way by default', () => {
+    const left = ref('foo');
+    const right = ref('bar');
+
+    syncRef(left, right);
+
+    // immediate sync: ltr propagates left -> right on setup
+    expect(right.value).toBe('foo');
+
+    left.value = 'left-change';
+    expect(right.value).toBe('left-change');
+
+    right.value = 'right-change';
+    expect(left.value).toBe('right-change');
+  });
+
+  it('does not enter an infinite feedback loop', () => {
+    const left = ref(0);
+    const right = ref(0);
+
+    syncRef(left, right);
+
+    left.value = 1;
+    expect(left.value).toBe(1);
+    expect(right.value).toBe(1);
+
+    right.value = 2;
+    expect(left.value).toBe(2);
+    expect(right.value).toBe(2);
+  });
+
+  it('respects direction: ltr (one-way left -> right)', () => {
+    const left = ref('a');
+    const right = ref('b');
+
+    syncRef(left, right, { direction: 'ltr' });
+
+    // immediate ltr sync
+    expect(right.value).toBe('a');
+
+    left.value = 'c';
+    expect(right.value).toBe('c');
+
+    // right does not propagate back to left
+    right.value = 'd';
+    expect(left.value).toBe('c');
+  });
+
+  it('respects direction: rtl (one-way right -> left)', () => {
+    const left = ref('a');
+    const right = ref('b');
+
+    syncRef(left, right, { direction: 'rtl' });
+
+    // immediate rtl sync
+    expect(left.value).toBe('b');
+
+    right.value = 'c';
+    expect(left.value).toBe('c');
+
+    // left does not propagate to right
+    left.value = 'd';
+    expect(right.value).toBe('c');
+  });
+
+  it('applies transforms for both directions', () => {
+    const left = ref(10);
+    const right = ref('0');
+
+    syncRef(left, right, {
+      transform: {
+        ltr: value => String(value),
+        rtl: value => Number(value),
+      },
+    });
+
+    // immediate: left (10) -> right ('10')
+    expect(right.value).toBe('10');
+
+    left.value = 42;
+    expect(right.value).toBe('42');
+
+    right.value = '7';
+    expect(left.value).toBe(7);
+  });
+
+  it('applies a one-way ltr transform', () => {
+    const count = ref(0);
+    const text = ref('');
+
+    syncRef(count, text, {
+      direction: 'ltr',
+      transform: { ltr: value => `count: ${value}` },
+    });
+
+    expect(text.value).toBe('count: 0');
+
+    count.value = 5;
+    expect(text.value).toBe('count: 5');
+  });
+
+  it('skips the immediate sync when immediate is false', () => {
+    const left = ref('initial-left');
+    const right = ref('initial-right');
+
+    syncRef(left, right, { immediate: false });
+
+    // no initial sync
+    expect(right.value).toBe('initial-right');
+    expect(left.value).toBe('initial-left');
+
+    left.value = 'updated';
+    expect(right.value).toBe('updated');
+  });
+
+  it('stops synchronizing after stop() is called', () => {
+    const left = ref(0);
+    const right = ref(0);
+
+    const { stop } = syncRef(left, right);
+
+    left.value = 1;
+    expect(right.value).toBe(1);
+
+    stop();
+
+    left.value = 2;
+    right.value = 3;
+    expect(right.value).toBe(3);
+    expect(left.value).toBe(2);
+  });
+
+  it('supports async flush (pre) with nextTick', async () => {
+    const left = ref('x');
+    const right = ref('y');
+
+    syncRef(left, right, { flush: 'pre', immediate: false });
+
+    left.value = 'changed';
+    // pre flush is async
+    expect(right.value).toBe('y');
+
+    await nextTick();
+    expect(right.value).toBe('changed');
+
+    right.value = 'back';
+    await nextTick();
+    expect(left.value).toBe('back');
+  });
+
+  it('syncs deep object changes when deep is enabled', () => {
+    const left = ref({ nested: { count: 0 } });
+    const right = ref({ nested: { count: 0 } });
+
+    syncRef(left, right, { deep: true });
+
+    left.value.nested.count = 5;
+    expect(right.value.nested.count).toBe(5);
+  });
+
+  it('works inside an effect scope and is disposed with it', () => {
+    const left = ref(0);
+    const right = ref(0);
+    const scope = effectScope();
+
+    scope.run(() => {
+      syncRef(left, right);
+    });
+
+    left.value = 1;
+    expect(right.value).toBe(1);
+
+    scope.stop();
+
+    left.value = 2;
+    // watchers torn down with the scope
+    expect(right.value).toBe(1);
+  });
+});
diff --git a/vue/toolkit/src/composables/reactivity/syncRef/index.ts b/vue/toolkit/src/composables/reactivity/syncRef/index.ts
new file mode 100644
index 0000000..b6a7bed
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/syncRef/index.ts
@@ -0,0 +1,167 @@
+import type { Ref, WatchStopHandle } from 'vue';
+import type { ConfigurableFlush } from '@/types';
+import { watchIgnorable } from '@/composables/watch/watchIgnorable';
+
+export type SyncRefDirection = 'ltr' | 'rtl' | 'both';
+
+/**
+ * Conversion functions used when the two refs hold different value types.
+ *
+ * - `ltr` maps a left value to a right value (used when the left ref changes).
+ * - `rtl` maps a right value to a left value (used when the right ref changes).
+ */
+export interface SyncRefTransform<L, R> {
+  /**
+   * Transform a left value into a right value. Required for `ltr`/`both` when `L !== R`.
+   */
+  ltr?: (left: L) => R;
+  /**
+   * Transform a right value into a left value. Required for `rtl`/`both` when `L !== R`.
+   */
+  rtl?: (right: R) => L;
+}
+
+export interface SyncRefOptions<L, R> extends ConfigurableFlush {
+  /**
+   * Watch the refs deeply.
+   *
+   * @default false
+   */
+  deep?: boolean;
+  /**
+   * Sync the values immediately on setup (in the chosen direction).
+   *
+   * @default true
+   */
+  immediate?: boolean;
+  /**
+   * Direction of synchronization.
+   *
+   * - `both` keeps both refs in sync.
+   * - `ltr` only propagates `left` -> `right`.
+   * - `rtl` only propagates `right` -> `left`.
+   *
+   * @default 'both'
+   */
+  direction?: SyncRefDirection;
+  /**
+   * Conversion functions to apply when the refs hold different value types.
+   * Provide `ltr` and/or `rtl` matching the active {@link SyncRefOptions.direction}.
+   */
+  transform?: SyncRefTransform<L, R>;
+}
+
+export interface SyncRefReturn {
+  /**
+   * Stop all underlying watchers. Synchronization cannot be resumed afterwards.
+   */
+  stop: WatchStopHandle;
+}
+
+const identity = <T>(value: T): T => value;
+type IgnoredUpdater = (updater: () => void) => void;
+const runDirect: IgnoredUpdater = updater => updater();
+
+/**
+ * @name syncRef
+ * @category Reactivity
+ * @description Keeps two refs in sync (two-way by default, or one-way via `direction`), with optional value transforms.
+ *
+ * @param {Ref<L>} left The left ref to synchronize
+ * @param {Ref<R>} right The right ref to synchronize
+ * @param {SyncRefOptions<L, R>} [options={}] `direction`, `transform`, `immediate`, `flush`, and `deep`
+ * @returns {SyncRefReturn} `{ stop }` to tear down the synchronization
+ *
+ * @example
+ * const left = ref('hello');
+ * const right = ref('hello');
+ * syncRef(left, right);
+ *
+ * left.value = 'world'; // right.value === 'world'
+ * right.value = 'foo';  // left.value === 'foo'
+ *
+ * @example
+ * // One-way with a transform (left number -> right string)
+ * const count = ref(0);
+ * const text = ref('0');
+ * syncRef(count, text, {
+ *   direction: 'ltr',
+ *   transform: { ltr: value => String(value) },
+ * });
+ *
+ * @since 0.0.15
+ */
+export function syncRef<L, R = L>(
+  left: Ref<L>,
+  right: Ref<R>,
+  options: SyncRefOptions<L, R> = {},
+): SyncRefReturn {
+  const {
+    flush = 'sync',
+    deep = false,
+    immediate = true,
+    direction = 'both',
+    transform = {},
+  } = options;
+
+  // Identity is the safe fallback when both refs share the same value type.
+  const transformLTR = (transform.ltr ?? identity) as (left: L) => R;
+  const transformRTL = (transform.rtl ?? identity) as (right: R) => L;
+
+  const syncLTR = direction === 'both' || direction === 'ltr';
+  const syncRTL = direction === 'both' || direction === 'rtl';
+
+  // Each callback wraps its cross-write in the OPPOSITE watcher's
+  // `ignoreUpdates` so a programmatic write never re-triggers the watcher that
+  // observes the written ref — preventing feedback loops without pausing every
+  // watcher on every change. The handles are bound after both watchers exist,
+  // so callbacks read them through these late-bound slots.
+  let ignoreLeftWrites: IgnoredUpdater = runDirect;
+  let ignoreRightWrites: IgnoredUpdater = runDirect;
+
+  const watchers: WatchStopHandle[] = [];
+
+  if (syncLTR) {
+    const { stop, ignoreUpdates } = watchIgnorable(
+      left,
+      (newValue) => {
+        // Writing `right`; suppress the rtl watcher.
+        ignoreRightWrites(() => {
+          right.value = transformLTR(newValue as L);
+        });
+      },
+      { flush, deep, immediate },
+    );
+
+    // Writes to `left` (done by the rtl watcher) must be ignored here.
+    ignoreLeftWrites = ignoreUpdates;
+    watchers.push(stop);
+  }
+
+  if (syncRTL) {
+    // The ltr watcher already performed the initial sync, so a `both` setup
+    // must not immediately back-sync (it would clobber `left` from `right`).
+    const rtlImmediate = direction === 'rtl' ? immediate : false;
+
+    const { stop, ignoreUpdates } = watchIgnorable(
+      right,
+      (newValue) => {
+        // Writing `left`; suppress the ltr watcher.
+        ignoreLeftWrites(() => {
+          left.value = transformRTL(newValue as R);
+        });
+      },
+      { flush, deep, immediate: rtlImmediate },
+    );
+
+    // Writes to `right` (done by the ltr watcher) must be ignored here.
+    ignoreRightWrites = ignoreUpdates;
+    watchers.push(stop);
+  }
+
+  const stop = (): void => {
+    for (const stopWatcher of watchers) stopWatcher();
+  };
+
+  return { stop };
+}
diff --git a/vue/toolkit/src/composables/reactivity/toReactive/demo.vue b/vue/toolkit/src/composables/reactivity/toReactive/demo.vue
new file mode 100644
index 0000000..1838137
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/toReactive/demo.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { toReactive } from './index';
+
+interface Profile {
+  name: string;
+  role: string;
+  level: number;
+}
+
+// A ref holding an object, exposed as a reactive proxy. Writes to the proxy
+// flow straight through to source.value, and reads survive reassignment.
+const source = ref<Profile>({ name: 'Ada Lovelace', role: 'Engineer', level: 3 });
+const profile = toReactive(source);
+
+const presets: Profile[] = [
+  { name: 'Ada Lovelace', role: 'Engineer', level: 3 },
+  { name: 'Alan Turing', role: 'Researcher', level: 5 },
+  { name: 'Grace Hopper', role: 'Architect', level: 8 },
+];
+
+// Reassign the whole underlying ref — the proxy keeps pointing at fresh data.
+function loadPreset(p: Profile) {
+  source.value = { ...p };
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+      <label class="flex flex-col gap-1.5">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Name</span>
+        <input
+          v-model="profile.name"
+          type="text"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+      </label>
+      <label class="flex flex-col gap-1.5">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Role</span>
+        <input
+          v-model="profile.role"
+          type="text"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+      </label>
+      <label class="flex flex-col gap-1.5">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Level: {{ profile.level }}
+        </span>
+        <input
+          v-model.number="profile.level"
+          type="range"
+          min="1"
+          max="10"
+          step="1"
+          class="w-full accent-(--accent) cursor-pointer"
+        >
+      </label>
+    </div>
+
+    <div class="flex flex-col gap-1.5">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">source.value (the backing ref)</span>
+      <pre class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs text-(--fg) overflow-x-auto">{{ JSON.stringify(source, null, 2) }}</pre>
+    </div>
+
+    <div class="flex flex-col gap-1.5">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Reassign the whole ref</span>
+      <div class="flex flex-wrap gap-2">
+        <button
+          v-for="preset in presets"
+          :key="preset.name"
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="loadPreset(preset)"
+        >
+          {{ preset.name.split(' ')[0] }}
+        </button>
+      </div>
+      <p class="text-xs text-(--fg-subtle)">
+        The proxy survives reassignment — fields above update without re-binding.
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/reactivity/toReactive/index.test.ts b/vue/toolkit/src/composables/reactivity/toReactive/index.test.ts
new file mode 100644
index 0000000..4127f11
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/toReactive/index.test.ts
@@ -0,0 +1,141 @@
+import { describe, expect, it } from 'vitest';
+import { computed, effectScope, isReactive, nextTick, ref, shallowRef, watch } from 'vue';
+import { toReactive } from '.';
+
+describe(toReactive, () => {
+  it('reads properties through the ref', () => {
+    const state = ref({ count: 0, name: 'a' });
+    const r = toReactive(state);
+    expect(r.count).toBe(0);
+    expect(r.name).toBe('a');
+  });
+
+  it('returns a reactive proxy', () => {
+    const r = toReactive(ref({ count: 0 }));
+    expect(isReactive(r)).toBeTruthy();
+  });
+
+  it('writes pass through to the ref value', () => {
+    const state = ref({ count: 0 });
+    const r = toReactive(state);
+    r.count = 5;
+    expect(state.value.count).toBe(5);
+  });
+
+  it('reflects external ref mutations', () => {
+    const state = ref({ count: 0 });
+    const r = toReactive(state);
+    state.value.count = 9;
+    expect(r.count).toBe(9);
+  });
+
+  it('survives reassignment of the whole ref value', () => {
+    const state = ref({ name: 'a' });
+    const r = toReactive(state);
+    expect(r.name).toBe('a');
+    state.value = { name: 'b' };
+    expect(r.name).toBe('b');
+  });
+
+  it('unwraps nested refs on read', () => {
+    // shallowRef preserves nested refs as values (a deep ref would unwrap them)
+    const inner = ref(1);
+    const state = shallowRef({ inner });
+    const r = toReactive(state);
+    expect(r.inner as unknown).toBe(1);
+    inner.value = 2;
+    expect(r.inner as unknown).toBe(2);
+  });
+
+  it('writes a plain value into a nested ref via .value', () => {
+    const inner = ref(1);
+    const state = shallowRef({ inner });
+    const r = toReactive(state);
+    (r as unknown as { inner: number }).inner = 42;
+    expect(inner.value).toBe(42);
+    // the property is still a ref, not overwritten by a plain number
+    expect(state.value.inner).toBe(inner);
+  });
+
+  it('replaces a nested ref when assigning another ref', () => {
+    const a = ref(1);
+    const b = ref(2);
+    const state = shallowRef<{ x: unknown }>({ x: a });
+    const r = toReactive(state) as { x: unknown };
+    r.x = b;
+    expect(state.value.x).toBe(b);
+  });
+
+  it('supports the in operator (has trap)', () => {
+    const state = ref<Record<string, number>>({ a: 1 });
+    const r = toReactive(state);
+    expect('a' in r).toBeTruthy();
+    expect('b' in r).toBeFalsy();
+  });
+
+  it('supports key deletion', () => {
+    const state = ref<Record<string, number>>({ a: 1, b: 2 });
+    const r = toReactive(state);
+    delete r.a;
+    expect('a' in state.value).toBeFalsy();
+    expect(r.b).toBe(2);
+  });
+
+  it('enumerates own keys via Object.keys', () => {
+    const state = ref<Record<string, number>>({ a: 1, b: 2 });
+    const r = toReactive(state);
+    expect(Object.keys(r).sort()).toEqual(['a', 'b']);
+  });
+
+  it('spreads enumerable own properties', () => {
+    const state = ref<Record<string, number>>({ a: 1, b: 2 });
+    const r = toReactive(state);
+    expect({ ...r }).toEqual({ a: 1, b: 2 });
+  });
+
+  it('is deeply reactive in an effect', async () => {
+    const state = ref({ count: 0 });
+    const r = toReactive(state);
+    const seen: number[] = [];
+
+    const scope = effectScope();
+    scope.run(() => {
+      watch(() => r.count, value => seen.push(value));
+    });
+
+    r.count = 1;
+    await nextTick();
+    state.value.count = 2;
+    await nextTick();
+
+    expect(seen).toEqual([1, 2]);
+    scope.stop();
+  });
+
+  it('works as a computed source', () => {
+    const state = ref({ first: 'John', last: 'Doe' });
+    const r = toReactive(state);
+    const full = computed(() => `${r.first} ${r.last}`);
+    expect(full.value).toBe('John Doe');
+    r.first = 'Jane';
+    expect(full.value).toBe('Jane Doe');
+  });
+
+  it('returns reactive(object) for a plain (non-ref) object', () => {
+    const plain = { count: 0 };
+    const r = toReactive(plain);
+    expect(isReactive(r)).toBeTruthy();
+    r.count = 3;
+    expect(plain.count).toBe(3);
+  });
+
+  it('handles index and length access on array-backed refs', () => {
+    const state = ref<number[]>([1, 2, 3]);
+    const r = toReactive(state);
+    expect(r).toHaveLength(3);
+    expect(r[0]).toBe(1);
+    expect(r[2]).toBe(3);
+    r[0] = 9;
+    expect(state.value[0]).toBe(9);
+  });
+});
diff --git a/vue/toolkit/src/composables/reactivity/toReactive/index.ts b/vue/toolkit/src/composables/reactivity/toReactive/index.ts
new file mode 100644
index 0000000..c34d84a
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/toReactive/index.ts
@@ -0,0 +1,73 @@
+import { isRef, reactive, unref } from 'vue';
+import type { MaybeRef, UnwrapNestedRefs } from 'vue';
+
+// Shared, frozen descriptor returned by the proxy's `getOwnPropertyDescriptor`
+// trap. Every enumerable own key of the underlying ref resolves to the same
+// shape, so we allocate it once at module scope instead of per-lookup.
+const OWN_PROPERTY_DESCRIPTOR: PropertyDescriptor = {
+  enumerable: true,
+  configurable: true,
+};
+
+/**
+ * @name toReactive
+ * @category Reactivity
+ * @description Convert a ref of object to a reactive proxy. Property reads and
+ * writes pass straight through to the ref's current value, so the proxy stays
+ * in sync even if the ref is reassigned to a whole new object. Writing a plain
+ * value onto a key that currently holds a ref unwraps into that ref's `.value`.
+ * Passing a plain object simply returns `reactive(object)`.
+ *
+ * @param {MaybeRef<T>} objectRef A ref of object (or a plain object)
+ * @returns {UnwrapNestedRefs<T>} A reactive proxy backed by the ref
+ *
+ * @example
+ * const state = ref({ count: 0 });
+ * const reactiveState = toReactive(state);
+ * reactiveState.count++; // state.value.count === 1
+ *
+ * @example
+ * // survives ref reassignment
+ * const obj = ref({ name: 'a' });
+ * const r = toReactive(obj);
+ * obj.value = { name: 'b' };
+ * r.name; // 'b'
+ *
+ * @since 0.0.15
+ */
+export function toReactive<T extends object>(
+  objectRef: MaybeRef<T>,
+): UnwrapNestedRefs<T> {
+  if (!isRef(objectRef))
+    return reactive(objectRef);
+
+  const proxy = new Proxy({} as T, {
+    get(_, key, receiver) {
+      return unref(Reflect.get(objectRef.value, key, receiver));
+    },
+    set(_, key, value) {
+      const current = objectRef.value[key as keyof T];
+
+      if (isRef(current) && !isRef(value))
+        current.value = value;
+      else
+        (objectRef.value as Record<PropertyKey, unknown>)[key] = value;
+
+      return true;
+    },
+    deleteProperty(_, key) {
+      return Reflect.deleteProperty(objectRef.value, key);
+    },
+    has(_, key) {
+      return Reflect.has(objectRef.value, key);
+    },
+    ownKeys() {
+      return Reflect.ownKeys(objectRef.value);
+    },
+    getOwnPropertyDescriptor() {
+      return OWN_PROPERTY_DESCRIPTOR;
+    },
+  });
+
+  return reactive(proxy) as UnwrapNestedRefs<T>;
+}
diff --git a/vue/toolkit/src/composables/reactivity/useCached/demo.vue b/vue/toolkit/src/composables/reactivity/useCached/demo.vue
new file mode 100644
index 0000000..8a22084
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/useCached/demo.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useCached } from './index';
+
+// Source the user edits freely.
+const source = ref('Hello');
+
+// Default cache: updates on any strict-inequality change.
+const cachedDefault = useCached(source);
+
+// Custom cache: treats values equal when they match case-insensitively, so
+// "hello" / "HELLO" never refresh the cache once one of them is stored.
+const cachedInsensitive = useCached(
+  source,
+  (a, b) => a.toLowerCase() === b.toLowerCase(),
+);
+
+const samples = ['Hello', 'hello', 'HELLO', 'World', 'world!'];
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <label class="flex flex-col gap-1.5">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Source ref</span>
+      <input
+        v-model="source"
+        type="text"
+        placeholder="Type to change the source"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+    </label>
+
+    <div class="flex flex-wrap gap-2">
+      <button
+        v-for="sample in samples"
+        :key="sample"
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="source = sample"
+      >
+        {{ sample }}
+      </button>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+      <div class="flex items-center justify-between gap-3">
+        <div class="flex flex-col">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Default cache</span>
+          <span class="text-xs text-(--fg-subtle)">a === b</span>
+        </div>
+        <span class="font-mono text-sm tabular-nums text-(--fg) truncate">"{{ cachedDefault }}"</span>
+      </div>
+      <div class="h-px bg-(--border)" />
+      <div class="flex items-center justify-between gap-3">
+        <div class="flex flex-col">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Case-insensitive cache</span>
+          <span class="text-xs text-(--fg-subtle)">toLowerCase() match</span>
+        </div>
+        <span class="font-mono text-sm tabular-nums text-(--accent-text) truncate">"{{ cachedInsensitive }}"</span>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Toggle between <span class="font-mono">Hello</span>, <span class="font-mono">hello</span> and
+      <span class="font-mono">HELLO</span>: the default cache follows every change, while the
+      case-insensitive cache keeps its first stored casing.
+    </p>
+  </div>
+</template>
diff --git a/web/vue/src/composables/reactivity/useCached/index.test.ts b/vue/toolkit/src/composables/reactivity/useCached/index.test.ts
similarity index 96%
rename from web/vue/src/composables/reactivity/useCached/index.test.ts
rename to vue/toolkit/src/composables/reactivity/useCached/index.test.ts
index 570b633..ec1ff31 100644
--- a/web/vue/src/composables/reactivity/useCached/index.test.ts
+++ b/vue/toolkit/src/composables/reactivity/useCached/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { ref, nextTick, reactive } from 'vue';
+import { nextTick, reactive, ref } from 'vue';
 import { useCached } from '.';
 
 const arrayEquals = (a: number[], b: number[]) => a.length === b.length && a.every((v, i) => v === b[i]);
@@ -48,4 +48,4 @@ describe(useCached, () => {
     await nextTick();
     expect(cachedValue.value).toBe(1);
   });
-});
\ No newline at end of file
+});
diff --git a/web/vue/src/composables/reactivity/useCached/index.ts b/vue/toolkit/src/composables/reactivity/useCached/index.ts
similarity index 64%
rename from web/vue/src/composables/reactivity/useCached/index.ts
rename to vue/toolkit/src/composables/reactivity/useCached/index.ts
index a12aa2e..d231d3e 100644
--- a/web/vue/src/composables/reactivity/useCached/index.ts
+++ b/vue/toolkit/src/composables/reactivity/useCached/index.ts
@@ -1,4 +1,4 @@
-import { ref, watch, toValue } from 'vue';
+import { ref, toValue, watch } from 'vue';
 import type { MaybeRefOrGetter, Ref, WatchOptions } from 'vue';
 
 export type Comparator<Value> = (a: Value, b: Value) => boolean;
@@ -7,33 +7,33 @@ export type Comparator<Value> = (a: Value, b: Value) => boolean;
  * @name useCached
  * @category Reactivity
  * @description Caches the value of an external ref and updates it only when the value changes
- * 
+ *
  * @param {Ref<T>} externalValue Ref to cache
  * @param {Comparator<T>} comparator Comparator function to compare the values
  * @param {WatchOptions} watchOptions Watch options
  * @returns {Ref<T>} Cached ref
- * 
+ *
  * @example
  * const externalValue = ref(0);
  * const cachedValue = useCached(externalValue);
- * 
+ *
  * @example
  * const externalValue = ref(0);
  * const cachedValue = useCached(externalValue, (a, b) => a === b, { immediate: true });
- * 
+ *
  * @since 0.0.1
  */
 export function useCached<Value = unknown>(
-    externalValue: MaybeRefOrGetter<Value>,
-    comparator: Comparator<Value> = (a, b) => a === b,
-    watchOptions?: WatchOptions,
+  externalValue: MaybeRefOrGetter<Value>,
+  comparator: Comparator<Value> = (a, b) => a === b,
+  watchOptions?: WatchOptions,
 ): Ref<Value> {
-    const cached = ref(toValue(externalValue)) as Ref<Value>;
+  const cached = ref(toValue(externalValue)) as Ref<Value>;
 
-    watch(() => toValue(externalValue), (value) => {
-        if (!comparator(value, cached.value))
-            cached.value = value;
-    }, watchOptions);
+  watch(() => toValue(externalValue), (value) => {
+    if (!comparator(value, cached.value))
+      cached.value = value;
+  }, watchOptions);
 
-    return cached;
-}
\ No newline at end of file
+  return cached;
+}
diff --git a/vue/toolkit/src/composables/reactivity/useCloned/demo.vue b/vue/toolkit/src/composables/reactivity/useCloned/demo.vue
new file mode 100644
index 0000000..39ad7d0
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/useCloned/demo.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { reactive } from 'vue';
+import { useCloned } from './index';
+
+const original = reactive({
+  name: 'Ada Lovelace',
+  role: 'Maintainer',
+  tags: ['core', 'docs'],
+});
+
+const { cloned, isModified, sync } = useCloned(() => ({ ...original, tags: [...original.tags] }));
+
+const roles = ['Maintainer', 'Contributor', 'Reviewer'];
+
+function bumpOriginal() {
+  original.role = roles[(roles.indexOf(original.role) + 1) % roles.length];
+}
+
+function addTag() {
+  cloned.value.tags.push(`tag-${cloned.value.tags.length + 1}`);
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">useCloned</span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
+        :class="isModified
+          ? 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'
+          : 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'"
+      >
+        <span
+          class="size-1.5 rounded-full"
+          :class="isModified ? 'bg-amber-500' : 'bg-emerald-500'"
+        />
+        {{ isModified ? 'Modified' : 'In sync' }}
+      </span>
+    </div>
+
+    <div class="grid grid-cols-2 gap-3">
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+        <p class="mb-2 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Source</p>
+        <dl class="space-y-1.5 text-sm text-(--fg)">
+          <div class="flex justify-between gap-2">
+            <dt class="text-(--fg-muted)">name</dt>
+            <dd class="truncate font-medium">{{ original.name }}</dd>
+          </div>
+          <div class="flex justify-between gap-2">
+            <dt class="text-(--fg-muted)">role</dt>
+            <dd class="font-medium">{{ original.role }}</dd>
+          </div>
+          <div class="flex justify-between gap-2">
+            <dt class="text-(--fg-muted)">tags</dt>
+            <dd class="font-mono text-xs text-(--fg-muted)">{{ original.tags.length }}</dd>
+          </div>
+        </dl>
+      </div>
+
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+        <p class="mb-2 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Cloned (editable)</p>
+        <dl class="space-y-1.5 text-sm text-(--fg)">
+          <div class="flex justify-between gap-2">
+            <dt class="text-(--fg-muted)">name</dt>
+            <dd class="truncate font-medium">{{ cloned.name }}</dd>
+          </div>
+          <div class="flex justify-between gap-2">
+            <dt class="text-(--fg-muted)">role</dt>
+            <dd class="font-medium">{{ cloned.role }}</dd>
+          </div>
+          <div class="flex flex-wrap justify-end gap-1">
+            <span
+              v-for="tag in cloned.tags"
+              :key="tag"
+              class="inline-flex items-center rounded-md border border-(--border) bg-(--bg-inset) px-1.5 py-0.5 font-mono text-[0.65rem] text-(--fg-muted)"
+            >
+              {{ tag }}
+            </span>
+          </div>
+        </dl>
+      </div>
+    </div>
+
+    <div class="flex flex-wrap gap-2">
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:border-(--border-strong) hover:bg-(--bg-inset) active:scale-[0.98] cursor-pointer"
+        @click="bumpOriginal"
+      >
+        Cycle source role
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:border-(--border-strong) hover:bg-(--bg-inset) active:scale-[0.98] cursor-pointer"
+        @click="addTag"
+      >
+        Edit clone
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="!isModified"
+        @click="sync()"
+      >
+        Re-sync from source
+      </button>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Editing the source auto-resyncs the clone. Editing the clone marks it modified without touching the source.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/reactivity/useCloned/index.test.ts b/vue/toolkit/src/composables/reactivity/useCloned/index.test.ts
new file mode 100644
index 0000000..b3a3483
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/useCloned/index.test.ts
@@ -0,0 +1,165 @@
+import { describe, expect, it, vi } from 'vitest';
+import { nextTick, reactive, ref } from 'vue';
+import { cloneFnDefault, useCloned } from '.';
+
+describe(useCloned, () => {
+  it('clones the initial source value (deep, not referentially equal)', () => {
+    const source = ref({ nested: { count: 0 } });
+    const { cloned } = useCloned(source);
+
+    expect(cloned.value).toEqual({ nested: { count: 0 } });
+    expect(cloned.value).not.toBe(source.value);
+    expect(cloned.value.nested).not.toBe(source.value.nested);
+  });
+
+  it('re-clones automatically when the source ref changes', async () => {
+    const source = ref({ count: 0 });
+    const { cloned } = useCloned(source);
+
+    source.value = { count: 5 };
+    await nextTick();
+
+    expect(cloned.value).toEqual({ count: 5 });
+    expect(cloned.value).not.toBe(source.value);
+  });
+
+  it('re-clones automatically when a deep source property changes', async () => {
+    const source = ref({ nested: { count: 0 } });
+    const { cloned } = useCloned(source);
+
+    source.value.nested.count = 9;
+    await nextTick();
+
+    expect(cloned.value.nested.count).toBe(9);
+  });
+
+  it('tracks modification of the cloned value via isModified', () => {
+    const source = ref({ count: 0 });
+    const { cloned, isModified } = useCloned(source);
+
+    expect(isModified.value).toBeFalsy();
+
+    cloned.value.count = 1;
+
+    expect(isModified.value).toBeTruthy();
+  });
+
+  it('does not set isModified when the change came from a source sync', async () => {
+    const source = ref({ count: 0 });
+    const { isModified } = useCloned(source);
+
+    source.value = { count: 1 };
+    await nextTick();
+
+    expect(isModified.value).toBeFalsy();
+  });
+
+  it('sync() re-clones from source and resets isModified', () => {
+    const source = ref({ count: 0 });
+    const { cloned, isModified, sync } = useCloned(source);
+
+    cloned.value.count = 42;
+    expect(isModified.value).toBeTruthy();
+
+    sync();
+
+    expect(cloned.value).toEqual({ count: 0 });
+    expect(isModified.value).toBeFalsy();
+  });
+
+  it('manual mode does not auto-sync on source change', async () => {
+    const source = ref({ count: 0 });
+    const { cloned, sync } = useCloned(source, { manual: true });
+
+    expect(cloned.value).toEqual({ count: 0 });
+
+    source.value = { count: 100 };
+    await nextTick();
+
+    // still the original clone, manual mode ignores source changes
+    expect(cloned.value).toEqual({ count: 0 });
+
+    sync();
+    expect(cloned.value).toEqual({ count: 100 });
+  });
+
+  it('supports a getter source', async () => {
+    const state = reactive({ count: 1 });
+    const { cloned } = useCloned(() => ({ count: state.count }));
+
+    expect(cloned.value).toEqual({ count: 1 });
+
+    state.count = 2;
+    await nextTick();
+
+    expect(cloned.value).toEqual({ count: 2 });
+  });
+
+  it('supports a plain (non-reactive) source value', () => {
+    const { cloned, isModified } = useCloned({ count: 7 });
+
+    expect(cloned.value).toEqual({ count: 7 });
+    expect(isModified.value).toBeFalsy();
+  });
+
+  it('uses a custom clone function when provided', () => {
+    const clone = vi.fn((s: { count: number }) => ({ count: s.count + 1 }));
+    const source = ref({ count: 10 });
+    const { cloned } = useCloned(source, { clone });
+
+    expect(clone).toHaveBeenCalled();
+    expect(cloned.value).toEqual({ count: 11 });
+  });
+
+  it('respects immediate: false (no clone until source changes)', async () => {
+    const source = ref({ count: 0 });
+    const { cloned } = useCloned(source, { immediate: false });
+
+    // not yet synced
+    expect(cloned.value).toBeUndefined();
+
+    source.value = { count: 3 };
+    await nextTick();
+
+    expect(cloned.value).toEqual({ count: 3 });
+  });
+});
+
+describe(cloneFnDefault, () => {
+  it('deep clones via structuredClone when available', () => {
+    const input = { a: 1, b: { c: [1, 2, 3] }, d: new Date(0) };
+    const out = cloneFnDefault(input);
+
+    expect(out).toEqual(input);
+    expect(out).not.toBe(input);
+    expect(out.b).not.toBe(input.b);
+    expect(out.d).toBeInstanceOf(Date);
+  });
+
+  it('falls back to JSON when structuredClone is unavailable (SSR / old runtime)', () => {
+    const original = globalThis.structuredClone;
+    // simulate environment without structuredClone
+    (globalThis as { structuredClone?: unknown }).structuredClone = undefined;
+
+    try {
+      const input = { a: 1, b: { c: 2 } };
+      const out = cloneFnDefault(input);
+
+      expect(out).toEqual(input);
+      expect(out).not.toBe(input);
+      expect(out.b).not.toBe(input.b);
+    }
+    finally {
+      globalThis.structuredClone = original;
+    }
+  });
+
+  it('falls back to JSON when the value is not structured-cloneable', () => {
+    // functions are not structured-cloneable; JSON drops them
+    const input = { keep: 1, fn: () => {} };
+    const out = cloneFnDefault(input) as { keep: number; fn?: unknown };
+
+    expect(out.keep).toBe(1);
+    expect(out.fn).toBeUndefined();
+  });
+});
diff --git a/vue/toolkit/src/composables/reactivity/useCloned/index.ts b/vue/toolkit/src/composables/reactivity/useCloned/index.ts
new file mode 100644
index 0000000..d86fdc8
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/useCloned/index.ts
@@ -0,0 +1,125 @@
+import { isRef, ref, toValue, watch } from 'vue';
+import type { MaybeRefOrGetter, Ref, WatchOptions } from 'vue';
+import { isFunction } from '@robonen/stdlib';
+
+export type CloneFn<Source, Target = Source> = (source: Source) => Target;
+
+export interface UseClonedOptions<T = unknown> extends WatchOptions {
+  /**
+   * Custom clone function.
+   *
+   * By default uses `structuredClone` when available, falling back to
+   * `JSON.parse(JSON.stringify(value))`.
+   */
+  clone?: CloneFn<T>;
+
+  /**
+   * Manually sync the cloned ref instead of watching the source.
+   *
+   * @default false
+   */
+  manual?: boolean;
+}
+
+export interface UseClonedReturn<T> {
+  /**
+   * The cloned, mutable ref.
+   */
+  cloned: Ref<T>;
+
+  /**
+   * Whether the cloned data has been modified since the last sync.
+   */
+  isModified: Ref<boolean>;
+
+  /**
+   * Sync the cloned data with the source manually.
+   */
+  sync: () => void;
+}
+
+/**
+ * Default clone implementation. Prefers the structured clone algorithm and
+ * falls back to a JSON round-trip when `structuredClone` is unavailable
+ * (older runtimes / SSR) or the value is not structured-cloneable.
+ */
+export function cloneFnDefault<T>(source: T): T {
+  if (typeof structuredClone === 'function') {
+    try {
+      return structuredClone(source);
+    }
+    catch {
+      // value contains functions, symbols, etc. — fall back to JSON.
+    }
+  }
+
+  return JSON.parse(JSON.stringify(source)) as T;
+}
+
+/**
+ * @name useCloned
+ * @category Reactivity
+ * @description Reactive deep clone of a source with a mutable cloned ref, modification tracking, and manual mode.
+ *
+ * @param {MaybeRefOrGetter<T>} source The reactive source to clone (ref, getter, or plain value)
+ * @param {UseClonedOptions<T>} [options={}] Options: `clone`, `manual`, and watch options (`deep`, `immediate`, `flush`)
+ * @returns {UseClonedReturn<T>} The cloned ref, an `isModified` flag, and a `sync` function
+ *
+ * @example
+ * const original = ref({ count: 0 });
+ * const { cloned, isModified, sync } = useCloned(original);
+ * cloned.value.count = 1; // isModified.value === true
+ * sync(); // re-clone from source, isModified.value === false
+ *
+ * @example
+ * const { cloned, sync } = useCloned(source, { manual: true });
+ * // cloned only updates when sync() is called
+ *
+ * @since 0.0.15
+ */
+export function useCloned<T>(
+  source: MaybeRefOrGetter<T>,
+  options: UseClonedOptions<T> = {},
+): UseClonedReturn<T> {
+  const cloned = ref<T>() as Ref<T>;
+  const isModified = ref(false);
+  let lastSync = false;
+
+  const {
+    manual,
+    clone = cloneFnDefault,
+    deep = true,
+    immediate = true,
+  } = options;
+
+  function sync(): void {
+    lastSync = true;
+    isModified.value = false;
+    cloned.value = clone(toValue(source));
+  }
+
+  watch(cloned, () => {
+    if (lastSync) {
+      lastSync = false;
+      return;
+    }
+
+    isModified.value = true;
+  }, {
+    deep: true,
+    flush: 'sync',
+  });
+
+  if (!manual && (isRef(source) || isFunction(source))) {
+    watch(source, sync, {
+      ...options,
+      deep,
+      immediate,
+    });
+  }
+  else {
+    sync();
+  }
+
+  return { cloned, isModified, sync };
+}
diff --git a/vue/toolkit/src/composables/reactivity/useDebounceFn/demo.vue b/vue/toolkit/src/composables/reactivity/useDebounceFn/demo.vue
new file mode 100644
index 0000000..ddc4b6d
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/useDebounceFn/demo.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useDebounceFn } from './index';
+
+const delay = ref(500);
+const query = ref('');
+const calls = ref(0);
+const lastResult = ref('');
+const log = ref<string[]>([]);
+
+const runSearch = useDebounceFn((term: string) => {
+  calls.value++;
+  const result = term.trim() ? `${term.length} matches for "${term.trim()}"` : 'idle';
+  lastResult.value = result;
+  log.value = [`#${calls.value} → ${result}`, ...log.value].slice(0, 5);
+  return result;
+}, delay, { maxWait: 2000 });
+
+function onInput(event: Event) {
+  query.value = (event.target as HTMLInputElement).value;
+  runSearch(query.value);
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">useDebounceFn</span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
+        :class="runSearch.isPending.value
+          ? 'border-sky-500/30 bg-sky-500/10 text-sky-600 dark:text-sky-400'
+          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        <span
+          class="size-1.5 rounded-full transition"
+          :class="runSearch.isPending.value ? 'animate-pulse bg-sky-500' : 'bg-(--fg-subtle)'"
+        />
+        {{ runSearch.isPending.value ? 'Pending' : 'Settled' }}
+      </span>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="search">
+        Type to search
+      </label>
+      <input
+        id="search"
+        :value="query"
+        type="text"
+        placeholder="Search the docs…"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        @input="onInput"
+      >
+    </div>
+
+    <div class="flex items-center gap-3">
+      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="delay">
+        Delay
+      </label>
+      <input
+        id="delay"
+        v-model.number="delay"
+        type="range"
+        min="0"
+        max="1500"
+        step="100"
+        class="flex-1 accent-(--accent)"
+      >
+      <span class="w-16 text-right font-mono text-sm tabular-nums text-(--fg)">{{ delay }}ms</span>
+    </div>
+
+    <div class="grid grid-cols-2 gap-3">
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Invocations</p>
+        <p class="mt-1 font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ calls }}</p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Last result</p>
+        <p class="mt-1 truncate font-mono text-sm text-(--fg)">{{ lastResult || '—' }}</p>
+      </div>
+    </div>
+
+    <div class="flex flex-wrap gap-2">
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:border-(--border-strong) hover:bg-(--bg-inset) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="!runSearch.isPending.value"
+        @click="runSearch.flush()"
+      >
+        Flush now
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:border-(--border-strong) hover:bg-(--bg-inset) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="!runSearch.isPending.value"
+        @click="runSearch.cancel()"
+      >
+        Cancel
+      </button>
+    </div>
+
+    <div v-if="log.length" class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+      <p class="mb-2 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Recent calls</p>
+      <ul class="space-y-1 font-mono text-xs text-(--fg-muted)">
+        <li v-for="(entry, i) in log" :key="i" class="truncate">{{ entry }}</li>
+      </ul>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/reactivity/useDebounceFn/index.test.ts b/vue/toolkit/src/composables/reactivity/useDebounceFn/index.test.ts
new file mode 100644
index 0000000..d7db38e
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/useDebounceFn/index.test.ts
@@ -0,0 +1,264 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick } from 'vue';
+import { useDebounceFn } from '.';
+
+describe(useDebounceFn, () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+
+  it('delays invocation until ms elapsed', () => {
+    const fn = vi.fn();
+    const debounced = useDebounceFn(fn, 100);
+
+    debounced();
+    expect(fn).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(100);
+    expect(fn).toHaveBeenCalledOnce();
+  });
+
+  it('coalesces rapid calls into one with the latest args', () => {
+    const fn = vi.fn();
+    const debounced = useDebounceFn(fn, 100);
+
+    debounced('a');
+    debounced('b');
+    debounced('c');
+
+    vi.advanceTimersByTime(100);
+    expect(fn).toHaveBeenCalledOnce();
+    expect(fn).toHaveBeenCalledWith('c');
+  });
+
+  it('resolves the promise with the function result', async () => {
+    const debounced = useDebounceFn((x: number) => x * 2, 100);
+
+    const promise = debounced(21);
+    vi.advanceTimersByTime(100);
+
+    await expect(promise).resolves.toBe(42);
+  });
+
+  it('rejects the promise when the function throws', async () => {
+    const debounced = useDebounceFn(() => {
+      throw new Error('boom');
+    }, 100);
+
+    const promise = debounced();
+    vi.advanceTimersByTime(100);
+
+    await expect(promise).rejects.toThrow('boom');
+  });
+
+  it('preserves the `this` context', () => {
+    const ctx = { value: 7, fn: vi.fn() };
+    const obj = {
+      value: 7,
+      debounced: useDebounceFn(function (this: typeof ctx) {
+        ctx.fn(this.value);
+      }, 100),
+    } as unknown as typeof ctx & { debounced: () => Promise<void> };
+
+    obj.debounced();
+    vi.advanceTimersByTime(100);
+    expect(ctx.fn).toHaveBeenCalledWith(7);
+  });
+
+  it('runs synchronously when ms <= 0', () => {
+    const fn = vi.fn();
+    const debounced = useDebounceFn(fn, 0);
+
+    debounced();
+    expect(fn).toHaveBeenCalledOnce();
+  });
+
+  it('accepts a reactive/getter delay', () => {
+    const fn = vi.fn();
+    let ms = 100;
+    const debounced = useDebounceFn(fn, () => ms);
+
+    debounced();
+    vi.advanceTimersByTime(100);
+    expect(fn).toHaveBeenCalledTimes(1);
+
+    ms = 300;
+    debounced();
+    vi.advanceTimersByTime(100);
+    expect(fn).toHaveBeenCalledTimes(1); // not yet — delay grew to 300
+    vi.advanceTimersByTime(200);
+    expect(fn).toHaveBeenCalledTimes(2);
+  });
+
+  describe('isPending', () => {
+    it('reflects the pending state', () => {
+      const debounced = useDebounceFn(vi.fn(), 100);
+      expect(debounced.isPending.value).toBeFalsy();
+
+      debounced();
+      expect(debounced.isPending.value).toBeTruthy();
+
+      vi.advanceTimersByTime(100);
+      expect(debounced.isPending.value).toBeFalsy();
+    });
+
+    it('is false after ms <= 0 synchronous calls', () => {
+      const debounced = useDebounceFn(vi.fn(), 0);
+      debounced();
+      expect(debounced.isPending.value).toBeFalsy();
+    });
+  });
+
+  describe('cancel', () => {
+    it('cancels a pending invocation', () => {
+      const fn = vi.fn();
+      const debounced = useDebounceFn(fn, 100);
+
+      debounced();
+      debounced.cancel();
+      expect(debounced.isPending.value).toBeFalsy();
+
+      vi.advanceTimersByTime(100);
+      expect(fn).not.toHaveBeenCalled();
+    });
+
+    it('resolves the pending promise with undefined by default', async () => {
+      const debounced = useDebounceFn((x: number) => x, 100);
+
+      const promise = debounced(5);
+      debounced.cancel();
+
+      await expect(promise).resolves.toBeUndefined();
+    });
+
+    it('rejects the pending promise when rejectOnCancel is set', async () => {
+      const debounced = useDebounceFn((x: number) => x, 100, { rejectOnCancel: true });
+
+      const promise = debounced(5);
+      // Attach the rejection expectation synchronously, *then* cancel — cancel is
+      // what rejects the promise, so awaiting before it would deadlock.
+      // eslint-disable-next-line vitest/valid-expect -- intentionally deferred; awaited below after cancel()
+      const assertion = expect(promise).rejects.toBeUndefined();
+      debounced.cancel();
+
+      await assertion;
+    });
+
+    it('is a no-op when nothing is pending', () => {
+      const debounced = useDebounceFn(vi.fn(), 100);
+      expect(() => debounced.cancel()).not.toThrow();
+    });
+  });
+
+  describe('flush', () => {
+    it('invokes the pending call immediately', () => {
+      const fn = vi.fn();
+      const debounced = useDebounceFn(fn, 100);
+
+      debounced('x');
+      debounced.flush();
+
+      expect(fn).toHaveBeenCalledOnce();
+      expect(fn).toHaveBeenCalledWith('x');
+      expect(debounced.isPending.value).toBeFalsy();
+    });
+
+    it('resolves the pending promise with the result', async () => {
+      const debounced = useDebounceFn((x: number) => x * 3, 100);
+
+      const promise = debounced(4);
+      debounced.flush();
+
+      await expect(promise).resolves.toBe(12);
+    });
+
+    it('does not invoke twice when the timer later fires', () => {
+      const fn = vi.fn();
+      const debounced = useDebounceFn(fn, 100);
+
+      debounced();
+      debounced.flush();
+      vi.advanceTimersByTime(100);
+
+      expect(fn).toHaveBeenCalledOnce();
+    });
+
+    it('is a no-op when nothing is pending', () => {
+      const fn = vi.fn();
+      const debounced = useDebounceFn(fn, 100);
+      debounced.flush();
+      expect(fn).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('maxWait', () => {
+    it('forces invocation after maxWait under sustained calls', () => {
+      const fn = vi.fn();
+      const debounced = useDebounceFn(fn, 100, { maxWait: 250 });
+
+      // Keep resetting the 100ms timer every 80ms so it never fires on its own.
+      debounced();
+      vi.advanceTimersByTime(80);
+      debounced();
+      vi.advanceTimersByTime(80);
+      debounced();
+      vi.advanceTimersByTime(80);
+      expect(fn).not.toHaveBeenCalled(); // 240ms elapsed, under maxWait
+
+      vi.advanceTimersByTime(10); // 250ms total — maxWait fires
+      expect(fn).toHaveBeenCalledOnce();
+    });
+
+    it('resets the maxWait window after firing', () => {
+      const fn = vi.fn();
+      const debounced = useDebounceFn(fn, 100, { maxWait: 250 });
+
+      debounced();
+      vi.advanceTimersByTime(250);
+      expect(fn).toHaveBeenCalledTimes(1);
+
+      debounced();
+      vi.advanceTimersByTime(100);
+      expect(fn).toHaveBeenCalledTimes(2);
+    });
+
+    it('runs synchronously when maxWait <= 0', () => {
+      const fn = vi.fn();
+      const debounced = useDebounceFn(fn, 100, { maxWait: 0 });
+      debounced();
+      expect(fn).toHaveBeenCalledOnce();
+    });
+  });
+
+  describe('scope disposal', () => {
+    it('cancels pending timers when the owning scope is disposed', () => {
+      const fn = vi.fn();
+      const scope = effectScope();
+      let debounced!: ReturnType<typeof useDebounceFn>;
+
+      scope.run(() => {
+        debounced = useDebounceFn(fn, 100);
+      });
+
+      debounced();
+      expect(debounced.isPending.value).toBeTruthy();
+
+      scope.stop();
+      vi.advanceTimersByTime(100);
+      expect(fn).not.toHaveBeenCalled();
+      expect(debounced.isPending.value).toBeFalsy();
+    });
+  });
+
+  it('settles superseded promises with undefined (default)', async () => {
+    const debounced = useDebounceFn((x: string) => x, 100);
+
+    const first = debounced('a');
+    const second = debounced('b');
+
+    vi.advanceTimersByTime(100);
+    await nextTick();
+
+    await expect(first).resolves.toBeUndefined();
+    await expect(second).resolves.toBe('b');
+  });
+});
diff --git a/vue/toolkit/src/composables/reactivity/useDebounceFn/index.ts b/vue/toolkit/src/composables/reactivity/useDebounceFn/index.ts
new file mode 100644
index 0000000..d719ddc
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/useDebounceFn/index.ts
@@ -0,0 +1,156 @@
+import { shallowReadonly, shallowRef, toValue } from 'vue';
+import type { MaybeRefOrGetter, Ref } from 'vue';
+import { debounce } from '@robonen/stdlib';
+import type { AnyFunction } from '@robonen/stdlib';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+
+export interface UseDebounceFnOptions {
+  /**
+   * The maximum time `fn` is allowed to be delayed before it is forcibly
+   * invoked, even if calls keep arriving. Guarantees progress under sustained
+   * input. When omitted there is no upper bound.
+   *
+   * @default undefined
+   */
+  maxWait?: number;
+
+  /**
+   * Reject the pending promise (instead of silently resolving it) when a call
+   * is cancelled — either explicitly via `cancel()` or implicitly when a newer
+   * call supersedes it.
+   *
+   * @default false
+   */
+  rejectOnCancel?: boolean;
+}
+
+export interface UseDebounceFnReturn<T extends AnyFunction> {
+  /**
+   * Invoke the debounced function. Returns a promise that resolves with the
+   * wrapped function's result once the trailing edge fires. Superseded calls
+   * resolve with `undefined` (or reject when `rejectOnCancel` is set).
+   */
+  (this: ThisParameterType<T>, ...args: Parameters<T>): Promise<Awaited<ReturnType<T>>>;
+
+  /**
+   * Cancel the pending invocation, if any.
+   */
+  cancel: () => void;
+
+  /**
+   * Immediately invoke the pending call (if any) ahead of its timer.
+   */
+  flush: () => void;
+
+  /**
+   * Whether a debounced invocation is currently scheduled.
+   */
+  readonly isPending: Readonly<Ref<boolean>>;
+}
+
+/**
+ * @name useDebounceFn
+ * @category Reactivity
+ * @description Debounce execution of a function — a thin reactive wrapper around
+ * `@robonen/stdlib`'s `debounce`. Postpones invocation until `ms` have elapsed
+ * since the last call and resolves with the wrapped function's result. Supports
+ * a reactive delay, a `maxWait` ceiling, `rejectOnCancel`, and exposes `cancel`,
+ * `flush`, and `isPending`. Pending timers are cleared on scope dispose.
+ *
+ * @param {T} fn The function to debounce
+ * @param {MaybeRefOrGetter<number>} [ms=200] Delay in milliseconds (can be reactive)
+ * @param {UseDebounceFnOptions} [options] Debounce options (`maxWait`, `rejectOnCancel`)
+ * @returns {UseDebounceFnReturn<T>} The debounced function with `cancel`, `flush`, and `isPending`
+ *
+ * @example
+ * const search = useDebounceFn(() => fetchResults(query.value), 300);
+ * watch(query, search);
+ *
+ * @example
+ * const save = useDebounceFn(persist, 300, { maxWait: 1000 });
+ * save.cancel();
+ * save.flush();
+ * if (save.isPending.value) {}
+ *
+ * @since 0.0.15
+ */
+export function useDebounceFn<T extends AnyFunction>(
+  fn: T,
+  ms: MaybeRefOrGetter<number> = 200,
+  options: UseDebounceFnOptions = {},
+): UseDebounceFnReturn<T> {
+  const { maxWait, rejectOnCancel = false } = options;
+
+  const isPending = shallowRef(false);
+
+  // The latest unresolved promise settler; superseded ones are settled early.
+  let settler: { resolve: (value?: unknown) => void; reject: (reason?: unknown) => void } | undefined;
+
+  function settleCancelled() {
+    const pending = settler;
+    settler = undefined;
+
+    if (!pending)
+      return;
+
+    if (rejectOnCancel)
+      pending.reject();
+    else
+      pending.resolve(undefined);
+  }
+
+  // The function stdlib debounces: runs `fn` and settles the latest promise.
+  function run(this: ThisParameterType<T>, ...args: Parameters<T>) {
+    isPending.value = false;
+    const pending = settler;
+    settler = undefined;
+
+    try {
+      const result = fn.apply(this, args) as Awaited<ReturnType<T>>;
+      pending?.resolve(result);
+      return result;
+    }
+    catch (error) {
+      pending?.reject(error);
+      return undefined;
+    }
+  }
+
+  const debounced = debounce(run as AnyFunction, () => toValue(ms), { maxWait, leading: false, trailing: true });
+
+  const wrapper = function (this: ThisParameterType<T>, ...args: Parameters<T>) {
+    return new Promise<Awaited<ReturnType<T>>>((resolve, reject) => {
+      // A new call supersedes the previous pending promise.
+      settleCancelled();
+      settler = { resolve: resolve as (value?: unknown) => void, reject };
+
+      const duration = toValue(ms);
+
+      // Fast path: non-positive delay (or maxWait) runs synchronously.
+      if (duration <= 0 || (maxWait !== undefined && maxWait <= 0)) {
+        debounced.cancel();
+        isPending.value = false;
+        run.apply(this, args);
+        return;
+      }
+
+      isPending.value = true;
+      debounced.apply(this, args);
+    });
+  } as UseDebounceFnReturn<T>;
+
+  wrapper.cancel = () => {
+    debounced.cancel();
+    isPending.value = false;
+    settleCancelled();
+  };
+
+  wrapper.flush = () => {
+    // stdlib flush synchronously runs `run`, which settles + clears isPending.
+    debounced.flush();
+  };
+
+  tryOnScopeDispose(wrapper.cancel);
+
+  return Object.assign(wrapper, { isPending: shallowReadonly(isPending) }) as UseDebounceFnReturn<T>;
+}
diff --git a/vue/toolkit/src/composables/reactivity/usePrevious/demo.vue b/vue/toolkit/src/composables/reactivity/usePrevious/demo.vue
new file mode 100644
index 0000000..dbe19dc
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/usePrevious/demo.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { usePrevious } from './index';
+
+const themes = ['Light', 'Dark', 'System', 'Sepia', 'High contrast'];
+const selected = ref(themes[0]);
+const previous = usePrevious(selected, 'None');
+
+function pick(theme: string) {
+  selected.value = theme;
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">usePrevious</span>
+
+    <div class="grid grid-cols-2 gap-3">
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Current</p>
+        <p class="mt-1 truncate text-2xl font-bold text-(--fg)">{{ selected }}</p>
+      </div>
+      <div class="rounded-xl border border-(--border) bg-(--bg-inset) p-4">
+        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Previous</p>
+        <p class="mt-1 truncate text-2xl font-bold text-(--fg-muted)">{{ previous }}</p>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Select a theme</p>
+      <div class="flex flex-wrap gap-2">
+        <button
+          v-for="theme in themes"
+          :key="theme"
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+          :class="theme === selected
+            ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
+            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:border-(--border-strong) hover:bg-(--bg-inset)'"
+          @click="pick(theme)"
+        >
+          {{ theme }}
+        </button>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Seeded with <span class="font-mono text-(--fg-muted)">"None"</span> as the initial previous value until the source first changes.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/reactivity/usePrevious/index.test.ts b/vue/toolkit/src/composables/reactivity/usePrevious/index.test.ts
new file mode 100644
index 0000000..401168c
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/usePrevious/index.test.ts
@@ -0,0 +1,103 @@
+import { describe, expect, it, vi } from 'vitest';
+import { effectScope, isReadonly, nextTick, reactive, ref } from 'vue';
+import { usePrevious } from '.';
+
+describe(usePrevious, () => {
+  it('is undefined before any change', () => {
+    const count = ref(0);
+    const prev = usePrevious(count);
+    expect(prev.value).toBeUndefined();
+  });
+
+  it('uses the provided initial value', () => {
+    const count = ref(0);
+    const prev = usePrevious(count, -1);
+    expect(prev.value).toBe(-1);
+  });
+
+  it('tracks the previous value on change', () => {
+    const count = ref(0);
+    const prev = usePrevious(count);
+
+    count.value = 1;
+    expect(prev.value).toBe(0);
+
+    count.value = 5;
+    expect(prev.value).toBe(1);
+  });
+
+  it('works with a getter source', () => {
+    const obj = ref({ n: 1 });
+    const prev = usePrevious(() => obj.value.n);
+    obj.value = { n: 2 };
+    expect(prev.value).toBe(1);
+  });
+
+  it('returns a readonly ref', () => {
+    const count = ref(0);
+    const prev = usePrevious(count);
+    expect(isReadonly(prev)).toBeTruthy();
+  });
+
+  it('does not throw when writing to the readonly ref (warns instead)', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const count = ref(0);
+    const prev = usePrevious(count);
+    // @ts-expect-error: readonly ref must not be writable at the type level
+    prev.value = 99;
+    expect(prev.value).toBeUndefined();
+    warn.mockRestore();
+  });
+
+  it('updates synchronously by default', () => {
+    const count = ref(0);
+    const prev = usePrevious(count);
+    count.value = 1;
+    // no flush/tick needed with the default sync flush
+    expect(prev.value).toBe(0);
+  });
+
+  it('respects a custom flush timing', async () => {
+    const count = ref(0);
+    const prev = usePrevious(count, undefined, { flush: 'post' });
+
+    count.value = 1;
+    // post flush is deferred until after the next tick
+    expect(prev.value).toBeUndefined();
+
+    await nextTick();
+    expect(prev.value).toBe(0);
+  });
+
+  it('tracks deep mutations with the deep option', () => {
+    const state = reactive({ n: 1 });
+    const prev = usePrevious(() => ({ ...state }), undefined, { deep: true });
+
+    state.n = 2;
+    expect(prev.value).toEqual({ n: 1 });
+
+    state.n = 3;
+    expect(prev.value).toEqual({ n: 2 });
+  });
+
+  it('accepts a raw (non-ref) source', () => {
+    const prev = usePrevious(5);
+    expect(prev.value).toBeUndefined();
+  });
+
+  it('stops tracking when the owning scope is disposed', () => {
+    const count = ref(0);
+    const scope = effectScope();
+
+    const prev = scope.run(() => usePrevious(count))!;
+
+    count.value = 1;
+    expect(prev.value).toBe(0);
+
+    scope.stop();
+
+    count.value = 2;
+    // watcher is torn down with the scope, so the previous value is frozen
+    expect(prev.value).toBe(0);
+  });
+});
diff --git a/vue/toolkit/src/composables/reactivity/usePrevious/index.ts b/vue/toolkit/src/composables/reactivity/usePrevious/index.ts
new file mode 100644
index 0000000..b82ca89
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/usePrevious/index.ts
@@ -0,0 +1,49 @@
+import { shallowReadonly, shallowRef, toRef, watch } from 'vue';
+import type { MaybeRefOrGetter, ShallowRef, WatchOptions } from 'vue';
+
+export type UsePreviousOptions = Pick<WatchOptions, 'deep' | 'flush'>;
+
+/**
+ * @name usePrevious
+ * @category Reactivity
+ * @description Track the previous value of a ref, getter, or reactive source.
+ *
+ * @param {MaybeRefOrGetter<T>} value The source value to track
+ * @param {T} [initialValue] The initial previous value, or an options object
+ * @param {UsePreviousOptions} [options={}] Watch options (`deep`, `flush`)
+ * @returns {Readonly<ShallowRef<T | undefined>>} The previous value of the source
+ *
+ * @example
+ * const count = ref(0);
+ * const prev = usePrevious(count);
+ * count.value = 1; // prev.value === 0
+ *
+ * @example
+ * const count = ref(0);
+ * const prev = usePrevious(count, -1); // prev.value === -1 until count changes
+ *
+ * @example
+ * const state = reactive({ n: 1 });
+ * const prev = usePrevious(() => ({ ...state }), undefined, { deep: true });
+ *
+ * @since 0.0.15
+ */
+export function usePrevious<T>(value: MaybeRefOrGetter<T>, initialValue: T, options?: UsePreviousOptions): Readonly<ShallowRef<T>>;
+export function usePrevious<T>(value: MaybeRefOrGetter<T>, initialValue?: undefined, options?: UsePreviousOptions): Readonly<ShallowRef<T | undefined>>;
+export function usePrevious<T>(
+  value: MaybeRefOrGetter<T>,
+  initialValue?: T,
+  options: UsePreviousOptions = {},
+): Readonly<ShallowRef<T | undefined>> {
+  const previous = shallowRef<T | undefined>(initialValue);
+
+  watch(
+    toRef(value),
+    (_, oldValue) => {
+      previous.value = oldValue;
+    },
+    { flush: options.flush ?? 'sync', deep: options.deep },
+  );
+
+  return shallowReadonly(previous);
+}
diff --git a/vue/toolkit/src/composables/reactivity/useSyncRefs/demo.vue b/vue/toolkit/src/composables/reactivity/useSyncRefs/demo.vue
new file mode 100644
index 0000000..2261c7f
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/useSyncRefs/demo.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useSyncRefs } from './index';
+
+// A single source kept in lock-step with several independent target refs.
+const source = ref('#6366f1');
+
+const swatch = ref(source.value);
+const label = ref(source.value);
+const hex = ref(source.value);
+
+useSyncRefs(source, [swatch, label, hex]);
+
+const presets = ['#6366f1', '#10b981', '#f59e0b', '#ef4444', '#0ea5e9'];
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">useSyncRefs</span>
+
+    <div class="flex flex-col gap-2">
+      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="color">
+        Source ref
+      </label>
+      <div class="flex items-center gap-2">
+        <input
+          id="color"
+          v-model="source"
+          type="color"
+          class="h-9 w-12 shrink-0 cursor-pointer rounded-lg border border-(--border) bg-(--bg)"
+        >
+        <input
+          v-model="source"
+          type="text"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 font-mono text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">Three independent target refs stay synced to the source:</p>
+
+    <div class="grid grid-cols-3 gap-3">
+      <div class="flex flex-col items-center gap-2 rounded-xl border border-(--border) bg-(--bg-elevated) p-3">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">swatch</span>
+        <span
+          class="size-10 rounded-lg border border-(--border-strong) shadow-sm transition"
+          :style="{ backgroundColor: swatch }"
+        />
+      </div>
+      <div class="flex flex-col items-center justify-center gap-2 rounded-xl border border-(--border) bg-(--bg-elevated) p-3">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">label</span>
+        <span class="font-mono text-xs text-(--fg)">{{ label }}</span>
+      </div>
+      <div class="flex flex-col items-center justify-center gap-2 rounded-xl border border-(--border) bg-(--bg-inset) p-3">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">hex</span>
+        <span class="font-mono text-xs uppercase text-(--fg)">{{ hex }}</span>
+      </div>
+    </div>
+
+    <div class="flex flex-wrap gap-2">
+      <button
+        v-for="preset in presets"
+        :key="preset"
+        type="button"
+        class="size-7 rounded-md border border-(--border) transition hover:scale-110 active:scale-95 cursor-pointer"
+        :style="{ backgroundColor: preset }"
+        :aria-label="`Set source to ${preset}`"
+        @click="source = preset"
+      />
+    </div>
+  </div>
+</template>
diff --git a/web/vue/src/composables/reactivity/useSyncRefs/index.test.ts b/vue/toolkit/src/composables/reactivity/useSyncRefs/index.test.ts
similarity index 99%
rename from web/vue/src/composables/reactivity/useSyncRefs/index.test.ts
rename to vue/toolkit/src/composables/reactivity/useSyncRefs/index.test.ts
index 7e573f4..c5f245e 100644
--- a/web/vue/src/composables/reactivity/useSyncRefs/index.test.ts
+++ b/vue/toolkit/src/composables/reactivity/useSyncRefs/index.test.ts
@@ -36,4 +36,4 @@ describe(useSyncRefs, () => {
 
     expect(target.value).toBe(30);
   });
-});
\ No newline at end of file
+});
diff --git a/web/vue/src/composables/reactivity/useSyncRefs/index.ts b/vue/toolkit/src/composables/reactivity/useSyncRefs/index.ts
similarity index 64%
rename from web/vue/src/composables/reactivity/useSyncRefs/index.ts
rename to vue/toolkit/src/composables/reactivity/useSyncRefs/index.ts
index be5e9cf..8ef9847 100644
--- a/web/vue/src/composables/reactivity/useSyncRefs/index.ts
+++ b/vue/toolkit/src/composables/reactivity/useSyncRefs/index.ts
@@ -6,42 +6,42 @@ import { isArray } from '@robonen/stdlib';
  * @name useSyncRefs
  * @category Reactivity
  * @description Syncs the value of a source ref with multiple target refs
- * 
+ *
  * @param {WatchSource<T>} source Source ref to sync
  * @param {Ref<T> | Ref<T>[]} targets Target refs to sync
  * @param {WatchOptions} watchOptions Watch options
  * @returns {WatchStopHandle} Watch stop handle
- * 
+ *
  * @example
  * const source = ref(0);
  * const target1 = ref(0);
  * const target2 = ref(0);
  * useSyncRefs(source, [target1, target2]);
- * 
+ *
  * @example
  * const source = ref(0);
  * const target1 = ref(0);
  * useSyncRefs(source, target1, { immediate: true });
- * 
+ *
  * @since 0.0.1
  */
 export function useSyncRefs<T = unknown>(
-    source: WatchSource<T>,
-    targets: Ref<T> | Ref<T>[],
-    watchOptions: WatchOptions = {},
+  source: WatchSource<T>,
+  targets: Ref<T> | Array<Ref<T>>,
+  watchOptions: WatchOptions = {},
 ) {
-    const {
-        flush = 'sync',
-        deep = false,
-        immediate = true,
-    } = watchOptions;
+  const {
+    flush = 'sync',
+    deep = false,
+    immediate = true,
+  } = watchOptions;
 
-    if (!isArray(targets))
-        targets = [targets];
+  if (!isArray(targets))
+    targets = [targets];
 
-    return watch(
-        source,
-        (value) => targets.forEach((target) => { target.value = value; }),
-        { flush, deep, immediate },
-    );
+  return watch(
+    source,
+    value => targets.forEach((target) => { target.value = value; }),
+    { flush, deep, immediate },
+  );
 }
diff --git a/vue/toolkit/src/composables/reactivity/useThrottleFn/demo.vue b/vue/toolkit/src/composables/reactivity/useThrottleFn/demo.vue
new file mode 100644
index 0000000..392a0d0
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/useThrottleFn/demo.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useThrottleFn } from './index';
+
+const delay = ref(400);
+const moves = ref(0);
+const fires = ref(0);
+const position = ref({ x: 0, y: 0 });
+
+const onMove = useThrottleFn((x: number, y: number) => {
+  fires.value++;
+  position.value = { x, y };
+}, delay, true, true);
+
+function handlePointer(event: PointerEvent) {
+  moves.value++;
+  const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
+  const x = Math.round(((event.clientX - rect.left) / rect.width) * 100);
+  const y = Math.round(((event.clientY - rect.top) / rect.height) * 100);
+  onMove(Math.max(0, Math.min(100, x)), Math.max(0, Math.min(100, y)));
+}
+
+const ratio = () => (moves.value ? Math.round((fires.value / moves.value) * 100) : 0);
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">useThrottleFn</span>
+
+    <div
+      class="relative h-40 w-full overflow-hidden rounded-xl border border-(--border) bg-(--bg-inset) touch-none"
+      @pointermove="handlePointer"
+    >
+      <span
+        class="pointer-events-none absolute size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-(--accent-fg) bg-(--accent) shadow-md transition-all duration-150 ease-out"
+        :style="{ left: `${position.x}%`, top: `${position.y}%` }"
+      />
+      <span class="pointer-events-none absolute inset-x-0 bottom-2 text-center text-xs text-(--fg-subtle)">
+        Move your pointer over this area
+      </span>
+    </div>
+
+    <div class="flex items-center gap-3">
+      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="window">
+        Window
+      </label>
+      <input
+        id="window"
+        v-model.number="delay"
+        type="range"
+        min="0"
+        max="1000"
+        step="50"
+        class="flex-1 accent-(--accent)"
+      >
+      <span class="w-16 text-right font-mono text-sm tabular-nums text-(--fg)">{{ delay }}ms</span>
+    </div>
+
+    <div class="grid grid-cols-3 gap-3">
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Events</p>
+        <p class="mt-1 font-mono text-2xl font-bold tabular-nums text-(--fg)">{{ moves }}</p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Fired</p>
+        <p class="mt-1 font-mono text-2xl font-bold tabular-nums text-(--accent-text)">{{ fires }}</p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Ran</p>
+        <p class="mt-1 font-mono text-2xl font-bold tabular-nums text-(--fg)">{{ ratio() }}%</p>
+      </div>
+    </div>
+
+    <div class="flex items-center justify-between gap-2">
+      <span class="rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 font-mono text-xs text-(--fg-muted)">
+        x: {{ position.x }} · y: {{ position.y }}
+      </span>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:border-(--border-strong) hover:bg-(--bg-inset) active:scale-[0.98] cursor-pointer"
+        @click="onMove.flush()"
+      >
+        Flush trailing
+      </button>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Leading + trailing throttling caps the handler to once per window — drag faster and watch the fired count lag behind events.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/reactivity/useThrottleFn/index.test.ts b/vue/toolkit/src/composables/reactivity/useThrottleFn/index.test.ts
new file mode 100644
index 0000000..02574f2
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/useThrottleFn/index.test.ts
@@ -0,0 +1,214 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { ref } from 'vue';
+import { useThrottleFn } from '.';
+
+describe(useThrottleFn, () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+
+  it('invokes immediately on the leading edge', () => {
+    const fn = vi.fn();
+    const throttled = useThrottleFn(fn, 100);
+
+    throttled();
+    expect(fn).toHaveBeenCalledOnce();
+  });
+
+  it('ignores calls within the window by default (no trailing)', () => {
+    const fn = vi.fn();
+    const throttled = useThrottleFn(fn, 100);
+
+    throttled();
+    throttled();
+    throttled();
+    vi.advanceTimersByTime(200);
+
+    expect(fn).toHaveBeenCalledOnce();
+  });
+
+  it('invokes trailing when enabled', () => {
+    const fn = vi.fn();
+    const throttled = useThrottleFn(fn, 100, true);
+
+    throttled('a');
+    throttled('b');
+    expect(fn).toHaveBeenCalledOnce();
+
+    vi.advanceTimersByTime(100);
+    expect(fn).toHaveBeenCalledTimes(2);
+    expect(fn).toHaveBeenLastCalledWith('b');
+  });
+
+  it('resolves the promise with the function result', async () => {
+    const throttled = useThrottleFn((x: number) => x + 1, 100);
+    await expect(throttled(1)).resolves.toBe(2);
+  });
+
+  it('skips the leading edge when leading is false', () => {
+    const fn = vi.fn();
+    const throttled = useThrottleFn(fn, 100, true, false);
+
+    // first call only opens the window (no leading edge)
+    throttled('a');
+    expect(fn).not.toHaveBeenCalled();
+
+    // a call inside the same window schedules the trailing edge
+    throttled('b');
+    expect(fn).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(100);
+    expect(fn).toHaveBeenCalledOnce();
+    expect(fn).toHaveBeenLastCalledWith('b');
+  });
+
+  describe('options object', () => {
+    it('accepts delay/trailing/leading via an options object', () => {
+      const fn = vi.fn();
+      const throttled = useThrottleFn(fn, { delay: 100, trailing: true });
+
+      throttled('a');
+      throttled('b');
+      expect(fn).toHaveBeenCalledOnce();
+
+      vi.advanceTimersByTime(100);
+      expect(fn).toHaveBeenCalledTimes(2);
+      expect(fn).toHaveBeenLastCalledWith('b');
+    });
+
+    it('defaults delay to 200 when omitted', () => {
+      const fn = vi.fn();
+      const throttled = useThrottleFn(fn, {});
+
+      throttled(); // leading edge
+      expect(fn).toHaveBeenCalledOnce();
+
+      vi.advanceTimersByTime(199);
+      throttled(); // still inside the 200ms window → dropped (trailing off)
+      expect(fn).toHaveBeenCalledOnce();
+
+      vi.advanceTimersByTime(1); // 200ms elapsed — window reached
+      throttled(); // new window opens on the leading edge
+      expect(fn).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe('reactive delay', () => {
+    it('reads the current delay on each call', () => {
+      const fn = vi.fn();
+      const delay = ref(100);
+      const throttled = useThrottleFn(fn, delay);
+
+      throttled();
+      expect(fn).toHaveBeenCalledOnce();
+
+      vi.advanceTimersByTime(101);
+      throttled();
+      expect(fn).toHaveBeenCalledTimes(2);
+
+      delay.value = 1000;
+      vi.advanceTimersByTime(101);
+      throttled();
+      // window grew to 1000ms, so this call is throttled
+      expect(fn).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe('zero delay', () => {
+    it('invokes synchronously on every call when delay <= 0', () => {
+      const fn = vi.fn();
+      const throttled = useThrottleFn(fn, 0);
+
+      throttled();
+      throttled();
+      throttled();
+      expect(fn).toHaveBeenCalledTimes(3);
+    });
+  });
+
+  describe('cancel', () => {
+    it('drops a pending trailing invocation', () => {
+      const fn = vi.fn();
+      const throttled = useThrottleFn(fn, 100, true);
+
+      throttled('a');
+      throttled('b');
+      expect(fn).toHaveBeenCalledOnce();
+
+      throttled.cancel();
+      vi.advanceTimersByTime(100);
+      expect(fn).toHaveBeenCalledOnce();
+    });
+
+    it('resolves the pending promise with undefined by default', async () => {
+      const throttled = useThrottleFn((x: number) => x, 100, true);
+
+      throttled(1);
+      const pending = throttled(2);
+      throttled.cancel();
+
+      await expect(pending).resolves.toBeUndefined();
+    });
+  });
+
+  describe('rejectOnCancel', () => {
+    it('rejects a superseded trailing promise', async () => {
+      const throttled = useThrottleFn((x: number) => x, 100, true, true, true);
+
+      throttled(1);
+      const superseded = throttled(2);
+      // next call within the window supersedes the previous trailing promise
+      const latest = throttled(3);
+
+      await expect(superseded).rejects.toThrow();
+      vi.advanceTimersByTime(100);
+      await expect(latest).resolves.toBe(3);
+    });
+
+    it('rejects on explicit cancel', async () => {
+      const throttled = useThrottleFn((x: number) => x, 100, true, true, true);
+
+      throttled(1);
+      const pending = throttled(2);
+      throttled.cancel();
+
+      await expect(pending).rejects.toThrow();
+    });
+  });
+
+  describe('flush', () => {
+    it('invokes the pending trailing call immediately', async () => {
+      const fn = vi.fn((x: number) => x);
+      const throttled = useThrottleFn(fn, 100, true);
+
+      throttled(1);
+      const pending = throttled(2);
+      expect(fn).toHaveBeenCalledOnce();
+
+      throttled.flush();
+      expect(fn).toHaveBeenCalledTimes(2);
+      expect(fn).toHaveBeenLastCalledWith(2);
+      await expect(pending).resolves.toBe(2);
+    });
+
+    it('is a no-op when nothing is pending', () => {
+      const fn = vi.fn();
+      const throttled = useThrottleFn(fn, 100, true);
+
+      expect(() => throttled.flush()).not.toThrow();
+      expect(fn).not.toHaveBeenCalled();
+    });
+  });
+
+  it('preserves the calling context (this)', () => {
+    const obj = {
+      value: 42,
+      method: vi.fn(function (this: { value: number }) {
+        return this.value;
+      }),
+    };
+    const throttled = useThrottleFn(obj.method, 100);
+
+    throttled.call(obj);
+    expect(obj.method).toHaveReturnedWith(42);
+  });
+});
diff --git a/vue/toolkit/src/composables/reactivity/useThrottleFn/index.ts b/vue/toolkit/src/composables/reactivity/useThrottleFn/index.ts
new file mode 100644
index 0000000..7f41a9e
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/useThrottleFn/index.ts
@@ -0,0 +1,185 @@
+import { isRef, toValue } from 'vue';
+import type { MaybeRefOrGetter } from 'vue';
+import { isFunction, isObject, throttle } from '@robonen/stdlib';
+import type { AnyFunction } from '@robonen/stdlib';
+
+export interface UseThrottleFnOptions {
+  /**
+   * The window in milliseconds in which `fn` is invoked at most once.
+   * For event callbacks, values around 100–250 (or higher) are most useful.
+   *
+   * @default 200
+   */
+  delay?: MaybeRefOrGetter<number>;
+
+  /**
+   * Invoke `fn` again on the trailing edge of the window with the most
+   * recent arguments.
+   *
+   * @default false
+   */
+  trailing?: boolean;
+
+  /**
+   * Invoke `fn` on the leading edge of the window.
+   *
+   * @default true
+   */
+  leading?: boolean;
+
+  /**
+   * Reject the promise of a trailing call when it is superseded by a newer
+   * call or cancelled, instead of silently resolving it.
+   *
+   * @default false
+   */
+  rejectOnCancel?: boolean;
+}
+
+export type UseThrottleFnReturn<T extends AnyFunction>
+  = ((this: ThisParameterType<T>, ...args: Parameters<T>) => Promise<Awaited<ReturnType<T>>>) & {
+    /**
+     * Cancel a pending trailing invocation. Resolves (or rejects, when
+     * `rejectOnCancel` is set) the pending promise without calling `fn`.
+     */
+    cancel: () => void;
+
+    /**
+     * Immediately invoke any pending trailing call, resolving its promise.
+     */
+    flush: () => void;
+  };
+
+function normalizeOptions(
+  ms: MaybeRefOrGetter<number> | UseThrottleFnOptions,
+  trailing: boolean,
+  leading: boolean,
+  rejectOnCancel: boolean,
+): Required<UseThrottleFnOptions> {
+  // Distinguish an options object from a reactive delay (ref/getter/number).
+  if (isObject(ms) && !isRef(ms) && !isFunction(ms)) {
+    const options = ms as UseThrottleFnOptions;
+
+    return {
+      delay: options.delay ?? 200,
+      trailing: options.trailing ?? false,
+      leading: options.leading ?? true,
+      rejectOnCancel: options.rejectOnCancel ?? false,
+    };
+  }
+
+  return { delay: ms, trailing, leading, rejectOnCancel };
+}
+
+/**
+ * @name useThrottleFn
+ * @category Reactivity
+ * @description Throttle execution of a function — a thin reactive wrapper around
+ * `@robonen/stdlib`'s `throttle`. Invokes `fn` at most once per `delay` window
+ * and resolves with the wrapped function's result. Especially useful for
+ * rate-limiting handlers on high-frequency events like `scroll` and `resize`.
+ *
+ * Accepts either positional arguments or a single options object, and exposes
+ * `cancel`/`flush` controls on the returned function.
+ *
+ * @param {T} fn The function to throttle
+ * @param {MaybeRefOrGetter<number> | UseThrottleFnOptions} [ms=200] Window in milliseconds (can be reactive) or an options object
+ * @param {boolean} [trailing=false] Invoke on the trailing edge of the window
+ * @param {boolean} [leading=true] Invoke on the leading edge of the window
+ * @param {boolean} [rejectOnCancel=false] Reject a superseded/cancelled trailing promise instead of resolving it
+ * @returns {UseThrottleFnReturn<T>} The throttled function with `cancel` and `flush`
+ *
+ * @example
+ * const onScroll = useThrottleFn(() => updatePosition(), 100);
+ * useEventListener('scroll', onScroll);
+ *
+ * @example
+ * const save = useThrottleFn(persist, { delay: 1000, trailing: true });
+ * save.cancel();
+ *
+ * @since 0.0.15
+ */
+export function useThrottleFn<T extends AnyFunction>(
+  fn: T,
+  options: UseThrottleFnOptions,
+): UseThrottleFnReturn<T>;
+export function useThrottleFn<T extends AnyFunction>(
+  fn: T,
+  ms?: MaybeRefOrGetter<number>,
+  trailing?: boolean,
+  leading?: boolean,
+  rejectOnCancel?: boolean,
+): UseThrottleFnReturn<T>;
+export function useThrottleFn<T extends AnyFunction>(
+  fn: T,
+  ms: MaybeRefOrGetter<number> | UseThrottleFnOptions = 200,
+  trailing = false,
+  leading = true,
+  rejectOnCancel = false,
+): UseThrottleFnReturn<T> {
+  const { delay, trailing: useTrailing, leading: useLeading, rejectOnCancel: useReject }
+    = normalizeOptions(ms, trailing, leading, rejectOnCancel);
+
+  // The latest unsettled promise; superseded/dropped ones are settled early.
+  let settler: { resolve: (value?: unknown) => void; reject: (reason?: unknown) => void } | undefined;
+  let invokedSync = false;
+
+  function settleCancelled() {
+    const pending = settler;
+    settler = undefined;
+
+    if (!pending)
+      return;
+
+    if (useReject)
+      pending.reject(new Error('throttled call cancelled'));
+    else
+      pending.resolve(undefined);
+  }
+
+  // The function stdlib throttles: runs `fn` and settles the latest promise.
+  function run(this: ThisParameterType<T>, ...args: Parameters<T>) {
+    invokedSync = true;
+    const pending = settler;
+    settler = undefined;
+
+    try {
+      const result = fn.apply(this, args) as Awaited<ReturnType<T>>;
+      pending?.resolve(result);
+      return result;
+    }
+    catch (error) {
+      pending?.reject(error);
+      return undefined;
+    }
+  }
+
+  const throttled = throttle(run as AnyFunction, () => toValue(delay), { leading: useLeading, trailing: useTrailing });
+
+  const wrapper = function (this: ThisParameterType<T>, ...args: Parameters<T>) {
+    return new Promise<Awaited<ReturnType<T>>>((resolve, reject) => {
+      // A new call supersedes the previous pending (trailing) promise.
+      settleCancelled();
+      settler = { resolve: resolve as (value?: unknown) => void, reject };
+      invokedSync = false;
+
+      throttled.apply(this, args);
+
+      // If this call neither fired synchronously (leading) nor scheduled a
+      // trailing edge, it was dropped — settle its promise now to avoid a leak.
+      if (!invokedSync && !throttled.pending())
+        settleCancelled();
+    });
+  } as UseThrottleFnReturn<T>;
+
+  wrapper.cancel = () => {
+    throttled.cancel();
+    settleCancelled();
+  };
+
+  wrapper.flush = () => {
+    throttled.flush();
+  };
+
+  return wrapper;
+}
diff --git a/vue/toolkit/src/composables/reactivity/useToNumber/demo.vue b/vue/toolkit/src/composables/reactivity/useToNumber/demo.vue
new file mode 100644
index 0000000..80591a2
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/useToNumber/demo.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useToNumber } from './index';
+
+// Source string the user edits — kept as a string so we can demo real parsing.
+const source = ref('42.50');
+
+// The composable reads its options once at setup, so each variant below is its
+// own instance fed the SAME reactive source. They all recompute as you type.
+const asFloat = useToNumber(() => source.value, { method: 'parseFloat' });
+const asInt = useToNumber(() => source.value, { method: 'parseInt', radix: 10 });
+const safe = useToNumber(() => source.value, { nanToZero: true });
+const clamped = useToNumber(() => source.value, { min: 0, max: 100, nanToZero: true });
+
+const variants = [
+  { label: 'parseFloat', desc: 'default', value: asFloat },
+  { label: 'parseInt', desc: 'radix 10', value: asInt },
+  { label: 'nanToZero', desc: 'NaN → 0', value: safe },
+  { label: 'clamp 0–100', desc: 'min / max', value: clamped },
+];
+
+const presets = ['42.50', '3.14159', '255.9', 'abc', '-12'];
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <label class="flex flex-col gap-1.5">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Source value</span>
+      <input
+        v-model="source"
+        type="text"
+        placeholder="Type a number…"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+    </label>
+
+    <div class="flex flex-wrap gap-1.5">
+      <button
+        v-for="v in presets"
+        :key="v"
+        type="button"
+        class="inline-flex items-center rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted) transition hover:bg-(--bg-elevated) hover:border-(--border-strong) cursor-pointer"
+        @click="source = v"
+      >
+        {{ v }}
+      </button>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) divide-y divide-(--border)">
+      <div
+        v-for="variant in variants"
+        :key="variant.label"
+        class="flex items-center justify-between gap-3 px-4 py-2.5"
+      >
+        <div class="flex flex-col">
+          <span class="font-mono text-sm text-(--fg)">{{ variant.label }}</span>
+          <span class="text-xs text-(--fg-subtle)">{{ variant.desc }}</span>
+        </div>
+        <span
+          class="font-mono text-lg font-semibold tabular-nums"
+          :class="Number.isNaN(variant.value) ? 'text-amber-600 dark:text-amber-400' : 'text-(--fg)'"
+        >
+          {{ Number.isNaN(variant.value) ? 'NaN' : variant.value }}
+        </span>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle) leading-relaxed">
+      One reactive source, four <span class="font-mono text-(--accent-text)">useToNumber</span>
+      instances. Try <span class="font-mono text-(--fg-muted)">abc</span> to see how
+      <span class="font-mono text-(--fg-muted)">nanToZero</span> and clamping tame invalid input.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/reactivity/useToNumber/index.test.ts b/vue/toolkit/src/composables/reactivity/useToNumber/index.test.ts
new file mode 100644
index 0000000..9cc02c0
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/useToNumber/index.test.ts
@@ -0,0 +1,92 @@
+import { describe, expect, it } from 'vitest';
+import { ref } from 'vue';
+import { useToNumber } from '.';
+
+describe(useToNumber, () => {
+  it('parses a numeric string with parseFloat by default', () => {
+    const str = ref('42.5');
+    const num = useToNumber(str);
+    expect(num.value).toBe(42.5);
+  });
+
+  it('reacts to source changes', () => {
+    const str = ref('1');
+    const num = useToNumber(str);
+    expect(num.value).toBe(1);
+    str.value = '2.5';
+    expect(num.value).toBe(2.5);
+  });
+
+  it('passes through numbers unchanged', () => {
+    expect(useToNumber(10).value).toBe(10);
+  });
+
+  it('does not truncate a number source when method is parseInt', () => {
+    expect(useToNumber(3.9, { method: 'parseInt' }).value).toBe(3.9);
+  });
+
+  it('uses parseInt with radix', () => {
+    expect(useToNumber('ff', { method: 'parseInt', radix: 16 }).value).toBe(255);
+  });
+
+  it('resolves NaN to 0 when nanToZero is set', () => {
+    expect(useToNumber('abc', { nanToZero: true }).value).toBe(0);
+    expect(useToNumber('abc').value).toBeNaN();
+  });
+
+  it('supports a custom converter function', () => {
+    const num = useToNumber('10.4', { method: v => Math.round(+v) });
+    expect(num.value).toBe(10);
+  });
+
+  it('applies the custom converter to number sources too', () => {
+    const num = useToNumber(3.7, { method: v => Math.floor(+v) });
+    expect(num.value).toBe(3);
+  });
+
+  it('reacts to source changes with a custom converter', () => {
+    const src = ref<number | string>('5.6');
+    const num = useToNumber(src, { method: v => Math.round(+v) });
+    expect(num.value).toBe(6);
+    src.value = 2.2;
+    expect(num.value).toBe(2);
+  });
+
+  it('clamps to min', () => {
+    expect(useToNumber('-5', { min: 0 }).value).toBe(0);
+    expect(useToNumber('5', { min: 0 }).value).toBe(5);
+  });
+
+  it('clamps to max', () => {
+    expect(useToNumber('150', { max: 100 }).value).toBe(100);
+    expect(useToNumber('50', { max: 100 }).value).toBe(50);
+  });
+
+  it('clamps to both min and max', () => {
+    expect(useToNumber('-10', { min: 0, max: 100 }).value).toBe(0);
+    expect(useToNumber('200', { min: 0, max: 100 }).value).toBe(100);
+    expect(useToNumber('42', { min: 0, max: 100 }).value).toBe(42);
+  });
+
+  it('reacts to clamped source changes', () => {
+    const src = ref('5');
+    const num = useToNumber(src, { min: 0, max: 10 });
+    expect(num.value).toBe(5);
+    src.value = '20';
+    expect(num.value).toBe(10);
+    src.value = '-3';
+    expect(num.value).toBe(0);
+  });
+
+  it('applies nanToZero before clamping', () => {
+    expect(useToNumber('abc', { nanToZero: true, min: 1 }).value).toBe(1);
+  });
+
+  it('supports getter sources', () => {
+    const base = ref(2);
+    const num = useToNumber(() => `${base.value}5`);
+    expect(num.value).toBe(25);
+    base.value = 9;
+    expect(num.value).toBe(95);
+  });
+});
diff --git a/vue/toolkit/src/composables/reactivity/useToNumber/index.ts b/vue/toolkit/src/composables/reactivity/useToNumber/index.ts
new file mode 100644
index 0000000..81cd695
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/useToNumber/index.ts
@@ -0,0 +1,97 @@
+import { computed, toValue } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+import { clamp, isFunction, isNumber, isString } from '@robonen/stdlib';
+
+export type UseToNumberMethod = 'parseFloat' | 'parseInt' | ((value: number | string) => number);
+
+export interface UseToNumberOptions {
+  /**
+   * Parsing method for string input, or a custom converter function
+   *
+   * @default 'parseFloat'
+   */
+  method?: UseToNumberMethod;
+
+  /**
+   * Radix for `parseInt`
+   */
+  radix?: number;
+
+  /**
+   * Resolve `NaN` to `0`
+   *
+   * @default false
+   */
+  nanToZero?: boolean;
+
+  /**
+   * Clamp the result to a minimum value (applied after parsing)
+   */
+  min?: number;
+
+  /**
+   * Clamp the result to a maximum value (applied after parsing)
+   */
+  max?: number;
+}
+
+/**
+ * @name useToNumber
+ * @category Reactivity
+ * @description Reactively convert a string or number ref to a number.
+ *
+ * @param {MaybeRefOrGetter<number | string>} value The source value (can be reactive)
+ * @param {UseToNumberOptions} [options={}] Options
+ * @returns {ComputedRef<number>} The numeric value
+ *
+ * @example
+ * const str = ref('42.5');
+ * const num = useToNumber(str); // 42.5
+ *
+ * @example
+ * // custom converter and clamping
+ * const n = useToNumber(input, { method: v => Math.round(+v), min: 0, max: 100 });
+ *
+ * @since 0.0.15
+ */
+export function useToNumber(
+  value: MaybeRefOrGetter<number | string>,
+  options: UseToNumberOptions = {},
+): ComputedRef<number> {
+  const {
+    method = 'parseFloat',
+    radix,
+    nanToZero = false,
+    min,
+    max,
+  } = options;
+
+  // Hoist the parser resolution out of the computed so the property lookup /
+  // function-type check happens once instead of on every recompute.
+  const parse: (source: number | string) => number = isFunction(method)
+    ? method
+    : source => (isNumber(source) ? source : Number[method](source, radix));
+
+  const hasMin = isNumber(min);
+  const hasMax = isNumber(max);
+
+  return computed<number>(() => {
+    const source = toValue(value);
+
+    let resolved = isString(source) || isFunction(method)
+      ? parse(source)
+      : source;
+
+    if (nanToZero && Number.isNaN(resolved))
+      resolved = 0;
+
+    if (hasMin && hasMax)
+      resolved = clamp(resolved, min, max);
+    else if (hasMin && resolved < min)
+      resolved = min;
+    else if (hasMax && resolved > max)
+      resolved = max;
+
+    return resolved;
+  });
+}
diff --git a/vue/toolkit/src/composables/reactivity/useToString/demo.vue b/vue/toolkit/src/composables/reactivity/useToString/demo.vue
new file mode 100644
index 0000000..e1a3be3
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/useToString/demo.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useToString } from './index';
+
+// A handful of representative source types — useToString coerces each with String().
+const count = ref(7);
+const ratio = ref(0.5);
+const enabled = ref(true);
+const tags = ref(['vue', 'reactivity', 'docs']);
+const meta = computed(() => ({ id: count.value, ok: enabled.value }));
+
+// useToString returns a ComputedRef<string> — bind directly, never destructure.
+const countStr = useToString(count);
+const ratioStr = useToString(() => ratio.value.toFixed(2));
+const boolStr = useToString(enabled);
+const tagsStr = useToString(tags);
+const metaStr = useToString(meta);
+
+const rows = [
+  { type: 'number', value: countStr },
+  { type: 'getter', value: ratioStr },
+  { type: 'boolean', value: boolStr },
+  { type: 'array', value: tagsStr },
+  { type: 'object', value: metaStr },
+];
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Live source values</span>
+
+      <div class="flex items-center justify-between gap-3">
+        <label class="text-sm text-(--fg)">count</label>
+        <div class="flex items-center gap-2">
+          <button
+            type="button"
+            class="inline-flex h-7 w-7 items-center justify-center rounded-lg border border-(--border) bg-(--bg-elevated) text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+            @click="count--"
+          >−</button>
+          <span class="font-mono text-sm tabular-nums text-(--fg) w-6 text-center">{{ count }}</span>
+          <button
+            type="button"
+            class="inline-flex h-7 w-7 items-center justify-center rounded-lg border border-(--border) bg-(--bg-elevated) text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+            @click="count++"
+          >+</button>
+        </div>
+      </div>
+
+      <div class="flex items-center justify-between gap-3">
+        <label class="text-sm text-(--fg)" for="ratio">ratio</label>
+        <input id="ratio" v-model.number="ratio" type="range" min="0" max="1" step="0.01" class="accent-(--accent) cursor-pointer">
+      </div>
+
+      <label class="flex items-center justify-between gap-3 cursor-pointer">
+        <span class="text-sm text-(--fg)">enabled</span>
+        <input v-model="enabled" type="checkbox" class="size-4 accent-(--accent) cursor-pointer">
+      </label>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) divide-y divide-(--border) font-mono text-sm">
+      <div
+        v-for="row in rows"
+        :key="row.type"
+        class="flex items-center gap-3 px-3 py-2"
+      >
+        <span class="inline-flex items-center rounded-md border border-(--border) bg-(--bg-elevated) px-2 py-0.5 text-xs font-medium text-(--fg-muted) shrink-0">
+          {{ row.type }}
+        </span>
+        <span class="text-(--fg) truncate">"{{ row.value }}"</span>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle) leading-relaxed">
+      <span class="font-mono text-(--accent-text)">useToString</span> is
+      <span class="font-mono text-(--fg-muted)">computed(() =&gt; String(toValue(v)))</span> —
+      it stringifies refs, getters, and reactive objects alike.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/reactivity/useToString/index.test.ts b/vue/toolkit/src/composables/reactivity/useToString/index.test.ts
new file mode 100644
index 0000000..9c1e5be
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/useToString/index.test.ts
@@ -0,0 +1,74 @@
+import { describe, expect, it } from 'vitest';
+import { ref } from 'vue';
+import { useToString } from '.';
+
+describe(useToString, () => {
+  it('stringifies a number ref', () => {
+    const num = ref(42);
+    const str = useToString(num);
+    expect(str.value).toBe('42');
+  });
+
+  it('reacts to source changes', () => {
+    const num = ref(1);
+    const str = useToString(num);
+    expect(str.value).toBe('1');
+    num.value = 2;
+    expect(str.value).toBe('2');
+  });
+
+  it('stringifies a plain (non-reactive) value', () => {
+    expect(useToString(10).value).toBe('10');
+    expect(useToString('hello').value).toBe('hello');
+  });
+
+  it('stringifies booleans', () => {
+    expect(useToString(true).value).toBe('true');
+    expect(useToString(false).value).toBe('false');
+  });
+
+  it('stringifies null and undefined like String()', () => {
+    expect(useToString(null).value).toBe('null');
+    expect(useToString(undefined).value).toBe('undefined');
+  });
+
+  it('passes through string sources unchanged', () => {
+    const src = ref('already a string');
+    expect(useToString(src).value).toBe('already a string');
+  });
+
+  it('stringifies objects via their toString', () => {
+    expect(useToString({}).value).toBe('[object Object]');
+    expect(useToString([1, 2, 3]).value).toBe('1,2,3');
+  });
+
+  it('honors a custom toString on objects', () => {
+    const obj = { toString: () => 'custom' };
+    expect(useToString(obj).value).toBe('custom');
+  });
+
+  it('supports getter sources', () => {
+    const base = ref(2);
+    const str = useToString(() => `item-${base.value}`);
+    expect(str.value).toBe('item-2');
+    base.value = 9;
+    expect(str.value).toBe('item-9');
+  });
+
+  it('reacts to a getter returning different types', () => {
+    const src = ref<unknown>(0);
+    const str = useToString(() => src.value);
+    expect(str.value).toBe('0');
+    src.value = true;
+    expect(str.value).toBe('true');
+    src.value = null;
+    expect(str.value).toBe('null');
+  });
+
+  it('returns a readonly computed ref', () => {
+    const str = useToString(ref(1));
+    expect(typeof str.value).toBe('string');
+    // ComputedRef exposes a value getter; result is always a string
+    expect(str.value).toBe('1');
+  });
+});
diff --git a/vue/toolkit/src/composables/reactivity/useToString/index.ts b/vue/toolkit/src/composables/reactivity/useToString/index.ts
new file mode 100644
index 0000000..a8787e5
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/useToString/index.ts
@@ -0,0 +1,26 @@
+import { computed, toValue } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+
+/**
+ * @name useToString
+ * @category Reactivity
+ * @description Reactively stringify a value, equivalent to `computed(() => String(toValue(value)))`.
+ *
+ * @param {MaybeRefOrGetter<unknown>} value The source value (can be a ref, getter, or plain value)
+ * @returns {ComputedRef<string>} The string representation of the value
+ *
+ * @example
+ * const count = ref(42);
+ * const str = useToString(count); // '42'
+ *
+ * @example
+ * // works with getters
+ * const label = useToString(() => `item-${id.value}`);
+ *
+ * @since 0.0.15
+ */
+export function useToString(
+  value: MaybeRefOrGetter<unknown>,
+): ComputedRef<string> {
+  return computed<string>(() => `${toValue(value)}`);
+}
diff --git a/vue/toolkit/src/composables/sensors/index.ts b/vue/toolkit/src/composables/sensors/index.ts
new file mode 100644
index 0000000..0c757d4
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/index.ts
@@ -0,0 +1,37 @@
+export * from './onKeyStroke';
+export * from './onLongPress';
+export * from './onStartTyping';
+export * from './useBattery';
+export * from './useBodyScrollLock';
+export * from './useClickOutside';
+export * from './useDeviceMotion';
+export * from './useDeviceOrientation';
+export * from './useDevicePixelRatio';
+export * from './useDevicesList';
+export * from './useElementByPoint';
+export * from './useElementHover';
+export * from './useEscapeKey';
+export * from './useFocus';
+export * from './useFocusWithin';
+export * from './useFps';
+export * from './useGamepad';
+export * from './useGeolocation';
+export * from './useIdle';
+export * from './useInfiniteScroll';
+export * from './useKeyModifier';
+export * from './useMagicKeys';
+export * from './useMouse';
+export * from './useMouseInElement';
+export * from './useMousePressed';
+export * from './useNetwork';
+export * from './useOnline';
+export * from './usePageLeave';
+export * from './useParallax';
+export * from './usePointer';
+export * from './usePointerLock';
+export * from './usePointerSwipe';
+export * from './useScreenOrientation';
+export * from './useScroll';
+export * from './useScrollLock';
+export * from './useSwipe';
+export * from './useTextSelection';
diff --git a/vue/toolkit/src/composables/sensors/onKeyStroke/demo.vue b/vue/toolkit/src/composables/sensors/onKeyStroke/demo.vue
new file mode 100644
index 0000000..58a9d0f
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/onKeyStroke/demo.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue';
+import { onKeyStroke } from './index';
+
+// Scope the listener to a focusable capture area so the demo never hijacks the
+// page's global keyboard. onKeyStroke takes a MaybeRefOrGetter target via options.
+const capture = useTemplateRef<HTMLDivElement>('capture');
+const dedupe = ref(true);
+
+const lastKey = ref('');
+const lastCode = ref('');
+const pressCount = ref(0);
+const log = ref<string[]>([]);
+
+// Arrow keys drive a little cursor — demonstrates a string[] key filter that
+// can call preventDefault (listener is non-passive by default).
+const pos = ref({ x: 2, y: 2 });
+const GRID = 5;
+
+// Every key: record the most recent stroke for the readout.
+onKeyStroke(
+  (event) => {
+    lastKey.value = event.key;
+    lastCode.value = event.code;
+    pressCount.value++;
+    log.value = [`${event.key === ' ' ? 'Space' : event.key}`, ...log.value].slice(0, 8);
+    return true;
+  },
+  { target: capture, dedupe },
+);
+
+// Arrow filter: move within the grid, prevent page scroll.
+onKeyStroke(
+  ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'],
+  (event) => {
+    event.preventDefault();
+    if (event.key === 'ArrowUp') pos.value.y = Math.max(0, pos.value.y - 1);
+    if (event.key === 'ArrowDown') pos.value.y = Math.min(GRID - 1, pos.value.y + 1);
+    if (event.key === 'ArrowLeft') pos.value.x = Math.max(0, pos.value.x - 1);
+    if (event.key === 'ArrowRight') pos.value.x = Math.min(GRID - 1, pos.value.x + 1);
+  },
+  { target: capture },
+);
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div
+      ref="capture"
+      tabindex="0"
+      class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col items-center gap-3 outline-none transition focus:border-(--accent) focus:ring-2 focus:ring-(--ring)"
+    >
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Click here, then press keys / arrows
+      </span>
+
+      <div class="grid grid-cols-5 gap-1.5">
+        <div
+          v-for="i in GRID * GRID"
+          :key="i"
+          class="size-7 rounded-md border transition-colors"
+          :class="(i - 1) % GRID === pos.x && Math.floor((i - 1) / GRID) === pos.y
+            ? 'bg-(--accent) border-transparent'
+            : 'bg-(--bg-inset) border-(--border)'"
+        />
+      </div>
+
+      <div class="flex items-center gap-2">
+        <span class="inline-flex items-center rounded-md border border-(--border) bg-(--bg-inset) px-2.5 py-1 font-mono text-sm font-semibold text-(--fg)">
+          {{ lastKey === ' ' ? 'Space' : (lastKey || '—') }}
+        </span>
+        <span class="font-mono text-xs text-(--fg-subtle)">{{ lastCode || 'event.code' }}</span>
+      </div>
+    </div>
+
+    <div class="flex items-center justify-between gap-3 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2">
+      <label class="flex items-center gap-2 text-sm text-(--fg) cursor-pointer">
+        <input v-model="dedupe" type="checkbox" class="size-4 accent-(--accent) cursor-pointer">
+        dedupe held keys
+      </label>
+      <span class="font-mono text-xs tabular-nums text-(--fg-muted)">{{ pressCount }} strokes</span>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 min-h-12">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Recent</span>
+      <div v-if="log.length" class="mt-2 flex flex-wrap gap-1.5">
+        <span
+          v-for="(k, i) in log"
+          :key="i"
+          class="inline-flex items-center rounded-md border border-(--border) bg-(--bg-elevated) px-2 py-0.5 font-mono text-xs text-(--fg-muted)"
+        >{{ k }}</span>
+      </div>
+      <p v-else class="mt-1 text-sm text-(--fg-subtle)">No keys yet — focus the area above.</p>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/onKeyStroke/index.test.ts b/vue/toolkit/src/composables/sensors/onKeyStroke/index.test.ts
new file mode 100644
index 0000000..589b97e
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/onKeyStroke/index.test.ts
@@ -0,0 +1,237 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, ref } from 'vue';
+import { onKeyDown, onKeyPressed, onKeyStroke, onKeyUp } from '.';
+
+function keydown(key: string, init: KeyboardEventInit = {}, target: EventTarget = globalThis) {
+  target.dispatchEvent(new KeyboardEvent('keydown', { key, ...init }));
+}
+
+describe(onKeyStroke, () => {
+  let stops: Array<() => void> = [];
+
+  function track(stop: () => void) {
+    stops.push(stop);
+    return stop;
+  }
+
+  afterEach(() => {
+    stops.forEach(stop => stop());
+    stops = [];
+  });
+
+  it('fires the handler for a matching string key', () => {
+    const handler = vi.fn();
+    track(onKeyStroke('a', handler));
+
+    keydown('a');
+    expect(handler).toHaveBeenCalledTimes(1);
+    expect(handler.mock.calls[0]![0]).toBeInstanceOf(KeyboardEvent);
+  });
+
+  it('ignores non-matching keys', () => {
+    const handler = vi.fn();
+    track(onKeyStroke('a', handler));
+
+    keydown('b');
+    expect(handler).not.toHaveBeenCalled();
+  });
+
+  it('matches any key in an array filter', () => {
+    const handler = vi.fn();
+    track(onKeyStroke(['a', 'b', 'c'], handler));
+
+    keydown('a');
+    keydown('b');
+    keydown('z');
+    expect(handler).toHaveBeenCalledTimes(2);
+  });
+
+  it('uses a predicate filter', () => {
+    const handler = vi.fn();
+    track(onKeyStroke((e: KeyboardEvent) => e.metaKey && e.key === 's', handler));
+
+    keydown('s');
+    expect(handler).not.toHaveBeenCalled();
+
+    keydown('s', { metaKey: true });
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+
+  it('matches every key when filter is omitted', () => {
+    const handler = vi.fn();
+    track(onKeyStroke(handler));
+
+    keydown('a');
+    keydown('b');
+    expect(handler).toHaveBeenCalledTimes(2);
+  });
+
+  it('matches every key when filter is `true`', () => {
+    const handler = vi.fn();
+    track(onKeyStroke(true, handler));
+
+    keydown('x');
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+
+  it('supports the handler-plus-options overload', () => {
+    const handler = vi.fn();
+    const target = document.createElement('div');
+    track(onKeyStroke(handler, { target }));
+
+    keydown('a', {}, target);
+    expect(handler).toHaveBeenCalledTimes(1);
+
+    keydown('a');
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+
+  it('attaches to a custom target', () => {
+    const handler = vi.fn();
+    const target = document.createElement('div');
+    track(onKeyStroke('a', handler, { target }));
+
+    keydown('a', {}, target);
+    expect(handler).toHaveBeenCalledTimes(1);
+
+    keydown('a');
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+
+  it('listens on a custom eventName', () => {
+    const handler = vi.fn();
+    const target = document.createElement('div');
+    track(onKeyStroke('a', handler, { target, eventName: 'keyup' }));
+
+    keydown('a', {}, target);
+    expect(handler).not.toHaveBeenCalled();
+
+    target.dispatchEvent(new KeyboardEvent('keyup', { key: 'a' }));
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+
+  it('dedupe ignores auto-repeated events', () => {
+    const handler = vi.fn();
+    track(onKeyStroke('a', handler, { dedupe: true }));
+
+    keydown('a', { repeat: false });
+    keydown('a', { repeat: true });
+    keydown('a', { repeat: true });
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+
+  it('dedupe accepts a reactive ref', () => {
+    const handler = vi.fn();
+    const dedupe = ref(false);
+    track(onKeyStroke('a', handler, { dedupe }));
+
+    keydown('a', { repeat: true });
+    expect(handler).toHaveBeenCalledTimes(1);
+
+    dedupe.value = true;
+    keydown('a', { repeat: true });
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+
+  it('without dedupe still fires for repeated events', () => {
+    const handler = vi.fn();
+    track(onKeyStroke('a', handler));
+
+    keydown('a', { repeat: true });
+    keydown('a', { repeat: true });
+    expect(handler).toHaveBeenCalledTimes(2);
+  });
+
+  it('stop handle removes the listener', () => {
+    const handler = vi.fn();
+    const stop = onKeyStroke('a', handler);
+
+    stop();
+    keydown('a');
+    expect(handler).not.toHaveBeenCalled();
+  });
+
+  it('cleans up when the effect scope is disposed', () => {
+    const handler = vi.fn();
+    const scope = effectScope();
+
+    scope.run(() => {
+      onKeyStroke('a', handler);
+    });
+
+    scope.stop();
+    keydown('a');
+    expect(handler).not.toHaveBeenCalled();
+  });
+
+  it('returns a no-op when target is unavailable (SSR / unsupported)', () => {
+    const handler = vi.fn();
+    const stop = onKeyStroke('a', handler, { target: null });
+
+    expect(typeof stop).toBe('function');
+    keydown('a');
+    expect(handler).not.toHaveBeenCalled();
+    // stop should be safely callable
+    expect(() => stop()).not.toThrow();
+  });
+});
+
+describe(onKeyDown, () => {
+  let stop: (() => void) | undefined;
+
+  afterEach(() => {
+    stop?.();
+    stop = undefined;
+  });
+
+  it('listens for keydown', () => {
+    const handler = vi.fn();
+    const target = document.createElement('div');
+    stop = onKeyDown('a', handler, { target });
+
+    keydown('a', {}, target);
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe(onKeyUp, () => {
+  let stop: (() => void) | undefined;
+
+  afterEach(() => {
+    stop?.();
+    stop = undefined;
+  });
+
+  it('listens for keyup', () => {
+    const handler = vi.fn();
+    const target = document.createElement('div');
+    stop = onKeyUp('a', handler, { target });
+
+    keydown('a', {}, target);
+    expect(handler).not.toHaveBeenCalled();
+
+    target.dispatchEvent(new KeyboardEvent('keyup', { key: 'a' }));
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe(onKeyPressed, () => {
+  let stop: (() => void) | undefined;
+
+  afterEach(() => {
+    stop?.();
+    stop = undefined;
+  });
+
+  it('listens for keypress', () => {
+    const handler = vi.fn();
+    const target = document.createElement('div');
+    stop = onKeyPressed('a', handler, { target });
+
+    keydown('a', {}, target);
+    expect(handler).not.toHaveBeenCalled();
+
+    target.dispatchEvent(new KeyboardEvent('keypress', { key: 'a' }));
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/vue/toolkit/src/composables/sensors/onKeyStroke/index.ts b/vue/toolkit/src/composables/sensors/onKeyStroke/index.ts
new file mode 100644
index 0000000..4d56a7e
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/onKeyStroke/index.ts
@@ -0,0 +1,197 @@
+import type { VoidFunction } from '@robonen/stdlib';
+import { isArray, isFunction, isString, noop } from '@robonen/stdlib';
+import { toValue } from 'vue';
+import type { MaybeRefOrGetter } from 'vue';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import { defaultWindow } from '@/types';
+
+export type KeyPredicate = (event: KeyboardEvent) => boolean;
+export type KeyFilter = true | string | string[] | KeyPredicate;
+export type KeyStrokeEventName = 'keydown' | 'keypress' | 'keyup';
+
+export interface OnKeyStrokeOptions {
+  /**
+   * The keyboard event to listen for.
+   *
+   * @default 'keydown'
+   */
+  eventName?: KeyStrokeEventName;
+
+  /**
+   * The element to attach the listener to.
+   *
+   * @default window
+   */
+  target?: MaybeRefOrGetter<EventTarget | null | undefined>;
+
+  /**
+   * Register the listener as passive (cannot call `preventDefault`).
+   *
+   * @default false
+   */
+  passive?: boolean;
+
+  /**
+   * Ignore auto-repeated keydown events while a key is held down.
+   *
+   * @default false
+   */
+  dedupe?: MaybeRefOrGetter<boolean>;
+}
+
+/**
+ * Build a predicate from a key filter.
+ *
+ * - `function` → used as-is.
+ * - `string`   → matches `event.key`.
+ * - `string[]` → matches any key in the list.
+ * - `true`/anything else → matches every event.
+ */
+function createKeyPredicate(keyFilter: KeyFilter): KeyPredicate {
+  if (isFunction(keyFilter))
+    return keyFilter;
+
+  if (isString(keyFilter))
+    return (event: KeyboardEvent) => event.key === keyFilter;
+
+  if (isArray(keyFilter))
+    return (event: KeyboardEvent) => keyFilter.includes(event.key);
+
+  return () => true;
+}
+
+/**
+ * @name onKeyStroke
+ * @category Sensors
+ * @description Listen for keyboard strokes. Accepts a key, list of keys, or a predicate and
+ * fires the handler for matching events. Auto-cleans up on scope dispose.
+ *
+ * Overload 1: Explicit key filter
+ */
+export function onKeyStroke(key: KeyFilter, handler: (event: KeyboardEvent) => void, options?: OnKeyStrokeOptions): VoidFunction;
+
+/**
+ * @name onKeyStroke
+ * @category Sensors
+ * @description Listen for every keyboard stroke (no key filter).
+ *
+ * Overload 2: Omitted key filter (matches all keys)
+ *
+ * @param {(event: KeyboardEvent) => void} handler Callback invoked on a matching key event
+ * @param {OnKeyStrokeOptions} [options] Listener configuration
+ * @returns {VoidFunction} Stop handle that removes the listener
+ *
+ * @example
+ * onKeyStroke('ArrowDown', (e) => { e.preventDefault(); });
+ * onKeyStroke(['a', 'b', 'c'], (e) => console.log(e.key));
+ * onKeyStroke((e) => e.metaKey && e.key === 's', save, { eventName: 'keydown' });
+ *
+ * @since 0.0.15
+ */
+export function onKeyStroke(handler: (event: KeyboardEvent) => void, options?: OnKeyStrokeOptions): VoidFunction;
+
+export function onKeyStroke(...args: any[]): VoidFunction {
+  let key: KeyFilter;
+  let handler: (event: KeyboardEvent) => void;
+  let options: OnKeyStrokeOptions = {};
+
+  if (args.length === 3) {
+    key = args[0];
+    handler = args[1];
+    options = args[2];
+  }
+  else if (args.length === 2) {
+    if (typeof args[1] === 'object') {
+      key = true;
+      handler = args[0];
+      options = args[1];
+    }
+    else {
+      key = args[0];
+      handler = args[1];
+    }
+  }
+  else {
+    key = true;
+    handler = args[0];
+  }
+
+  const {
+    target = defaultWindow,
+    eventName = 'keydown',
+    passive = false,
+    dedupe = false,
+  } = options;
+
+  if (!target)
+    return noop;
+
+  const predicate = createKeyPredicate(key);
+
+  const listener = (event: KeyboardEvent) => {
+    if (event.repeat && toValue(dedupe))
+      return;
+
+    if (predicate(event))
+      handler(event);
+  };
+
+  return useEventListener(target, eventName, listener, { passive });
+}
+
+/**
+ * @name onKeyDown
+ * @category Sensors
+ * @description Listen for `keydown` strokes. Shorthand for `onKeyStroke` with `eventName: 'keydown'`.
+ *
+ * @param {KeyFilter} key Key, list of keys, or predicate to match
+ * @param {(event: KeyboardEvent) => void} handler Callback invoked on a matching key event
+ * @param {Omit<OnKeyStrokeOptions, 'eventName'>} [options] Listener configuration
+ * @returns {VoidFunction} Stop handle that removes the listener
+ *
+ * @example
+ * onKeyDown('Enter', submit);
+ *
+ * @since 0.0.15
+ */
+export function onKeyDown(key: KeyFilter, handler: (event: KeyboardEvent) => void, options: Omit<OnKeyStrokeOptions, 'eventName'> = {}): VoidFunction {
+  return onKeyStroke(key, handler, { ...options, eventName: 'keydown' });
+}
+
+/**
+ * @name onKeyUp
+ * @category Sensors
+ * @description Listen for `keyup` strokes. Shorthand for `onKeyStroke` with `eventName: 'keyup'`.
+ *
+ * @param {KeyFilter} key Key, list of keys, or predicate to match
+ * @param {(event: KeyboardEvent) => void} handler Callback invoked on a matching key event
+ * @param {Omit<OnKeyStrokeOptions, 'eventName'>} [options] Listener configuration
+ * @returns {VoidFunction} Stop handle that removes the listener
+ *
+ * @example
+ * onKeyUp('Escape', close);
+ *
+ * @since 0.0.15
+ */
+export function onKeyUp(key: KeyFilter, handler: (event: KeyboardEvent) => void, options: Omit<OnKeyStrokeOptions, 'eventName'> = {}): VoidFunction {
+  return onKeyStroke(key, handler, { ...options, eventName: 'keyup' });
+}
+
+/**
+ * @name onKeyPressed
+ * @category Sensors
+ * @description Listen for `keypress` strokes. Shorthand for `onKeyStroke` with `eventName: 'keypress'`.
+ *
+ * @param {KeyFilter} key Key, list of keys, or predicate to match
+ * @param {(event: KeyboardEvent) => void} handler Callback invoked on a matching key event
+ * @param {Omit<OnKeyStrokeOptions, 'eventName'>} [options] Listener configuration
+ * @returns {VoidFunction} Stop handle that removes the listener
+ *
+ * @example
+ * onKeyPressed('a', type);
+ *
+ * @since 0.0.15
+ */
+export function onKeyPressed(key: KeyFilter, handler: (event: KeyboardEvent) => void, options: Omit<OnKeyStrokeOptions, 'eventName'> = {}): VoidFunction {
+  return onKeyStroke(key, handler, { ...options, eventName: 'keypress' });
+}
diff --git a/vue/toolkit/src/composables/sensors/onLongPress/demo.vue b/vue/toolkit/src/composables/sensors/onLongPress/demo.vue
new file mode 100644
index 0000000..6e3ef92
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/onLongPress/demo.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { computed, ref, useTemplateRef } from 'vue';
+import { onLongPress } from './index';
+
+// onLongPress(target, handler, options) — target is a MaybeComputedElementRef.
+const pressTarget = useTemplateRef<HTMLButtonElement>('pressTarget');
+
+const DELAY = 700;
+const longPresses = ref(0);
+const taps = ref(0);
+const lastDuration = ref(0);
+const triggered = ref(false);
+
+// Fires once the press passes `delay` (held without moving past the threshold).
+onLongPress(
+  pressTarget,
+  () => {
+    longPresses.value++;
+    triggered.value = true;
+  },
+  {
+    delay: DELAY,
+    modifiers: { prevent: true },
+    // Reports every release: duration, travel distance, and long-press status.
+    onMouseUp: (duration, _distance, isLongPress) => {
+      lastDuration.value = Math.round(duration);
+      if (!isLongPress)
+        taps.value++;
+      triggered.value = false;
+    },
+  },
+);
+
+const progress = computed(() => Math.min(100, Math.round((lastDuration.value / DELAY) * 100)));
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <button
+      ref="pressTarget"
+      type="button"
+      class="select-none rounded-xl border px-4 py-8 text-center font-medium transition-colors duration-200 cursor-pointer active:scale-[0.99]"
+      :class="triggered
+        ? 'border-transparent bg-(--accent) text-(--accent-fg)'
+        : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:border-(--border-strong)'"
+    >
+      <span class="block text-base font-semibold">
+        {{ triggered ? 'Long press detected' : 'Press & hold me' }}
+      </span>
+      <span class="mt-1 block text-xs" :class="triggered ? 'text-(--accent-fg)/80' : 'text-(--fg-subtle)'">
+        hold for {{ DELAY }}ms — a quick click counts as a tap
+      </span>
+    </button>
+
+    <div class="grid grid-cols-2 gap-3">
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col items-center gap-1">
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ longPresses }}</span>
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">long presses</span>
+      </div>
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col items-center gap-1">
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ taps }}</span>
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">taps</span>
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Last hold</span>
+        <span class="font-mono text-sm tabular-nums text-(--fg)">{{ lastDuration }}ms</span>
+      </div>
+      <div class="h-1.5 w-full overflow-hidden rounded-full bg-(--bg-elevated)">
+        <div
+          class="h-full rounded-full bg-(--accent) transition-[width] duration-200"
+          :style="{ width: `${progress}%` }"
+        />
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle) leading-relaxed">
+      Moving more than ~10px while holding cancels the press. The
+      <span class="font-mono text-(--accent-text)">onMouseUp</span> callback tells taps from holds.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/onLongPress/index.test.ts b/vue/toolkit/src/composables/sensors/onLongPress/index.test.ts
new file mode 100644
index 0000000..6b24930
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/onLongPress/index.test.ts
@@ -0,0 +1,323 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, ref } from 'vue';
+import { onLongPress } from '.';
+
+interface PointerInit { type: string; x?: number; y?: number }
+
+// jsdom's PointerEvent does not reliably map clientX/clientY to the `x`/`y`
+// shorthands the composable reads, so build a plain Event and stamp the fields.
+function pointerEvent({ type, x = 0, y = 0 }: PointerInit): PointerEvent {
+  const event = new Event(type, { bubbles: true, cancelable: true }) as any;
+  event.x = x;
+  event.y = y;
+  return event as PointerEvent;
+}
+
+function dispatch(el: EventTarget, init: PointerInit) {
+  el.dispatchEvent(pointerEvent(init));
+}
+
+describe(onLongPress, () => {
+  let scope: ReturnType<typeof effectScope>;
+  let el: HTMLElement;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    scope = effectScope();
+    el = document.createElement('div');
+    document.body.appendChild(el);
+  });
+
+  afterEach(() => {
+    scope.stop();
+    el.remove();
+    vi.useRealTimers();
+    vi.unstubAllGlobals();
+  });
+
+  it('fires the handler after the default delay', () => {
+    const handler = vi.fn();
+
+    scope.run(() => {
+      onLongPress(el, handler);
+    });
+
+    dispatch(el, { type: 'pointerdown' });
+    expect(handler).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(499);
+    expect(handler).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(1);
+    expect(handler).toHaveBeenCalledTimes(1);
+    expect(handler.mock.calls[0]![0]).toBeInstanceOf(Event);
+  });
+
+  it('respects a custom numeric delay', () => {
+    const handler = vi.fn();
+
+    scope.run(() => {
+      onLongPress(el, handler, { delay: 1000 });
+    });
+
+    dispatch(el, { type: 'pointerdown' });
+    vi.advanceTimersByTime(999);
+    expect(handler).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(1);
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+
+  it('supports a function delay derived from the event', () => {
+    const handler = vi.fn();
+    const delay = vi.fn(() => 200);
+
+    scope.run(() => {
+      onLongPress(el, handler, { delay });
+    });
+
+    dispatch(el, { type: 'pointerdown' });
+    expect(delay).toHaveBeenCalledTimes(1);
+
+    vi.advanceTimersByTime(200);
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+
+  it('cancels the press on pointerup before the delay elapses', () => {
+    const handler = vi.fn();
+
+    scope.run(() => {
+      onLongPress(el, handler);
+    });
+
+    dispatch(el, { type: 'pointerdown' });
+    vi.advanceTimersByTime(200);
+    dispatch(el, { type: 'pointerup' });
+
+    vi.advanceTimersByTime(500);
+    expect(handler).not.toHaveBeenCalled();
+  });
+
+  it('cancels the press on pointerleave before the delay elapses', () => {
+    const handler = vi.fn();
+
+    scope.run(() => {
+      onLongPress(el, handler);
+    });
+
+    dispatch(el, { type: 'pointerdown' });
+    dispatch(el, { type: 'pointerleave' });
+
+    vi.advanceTimersByTime(500);
+    expect(handler).not.toHaveBeenCalled();
+  });
+
+  it('cancels the press when the pointer moves beyond the distance threshold', () => {
+    const handler = vi.fn();
+
+    scope.run(() => {
+      onLongPress(el, handler, { distanceThreshold: 10 });
+    });
+
+    dispatch(el, { type: 'pointerdown', x: 0, y: 0 });
+    dispatch(el, { type: 'pointermove', x: 20, y: 0 });
+
+    vi.advanceTimersByTime(500);
+    expect(handler).not.toHaveBeenCalled();
+  });
+
+  it('does not cancel for small moves within the threshold', () => {
+    const handler = vi.fn();
+
+    scope.run(() => {
+      onLongPress(el, handler, { distanceThreshold: 10 });
+    });
+
+    dispatch(el, { type: 'pointerdown', x: 0, y: 0 });
+    dispatch(el, { type: 'pointermove', x: 3, y: 3 });
+
+    vi.advanceTimersByTime(500);
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+
+  it('ignores movement when distanceThreshold is false', () => {
+    const handler = vi.fn();
+
+    scope.run(() => {
+      onLongPress(el, handler, { distanceThreshold: false });
+    });
+
+    dispatch(el, { type: 'pointerdown', x: 0, y: 0 });
+    dispatch(el, { type: 'pointermove', x: 999, y: 999 });
+
+    vi.advanceTimersByTime(500);
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+
+  it('reports duration, distance, and long-press status via onMouseUp', () => {
+    const handler = vi.fn();
+    const onMouseUp = vi.fn();
+
+    scope.run(() => {
+      onLongPress(el, handler, { onMouseUp });
+    });
+
+    dispatch(el, { type: 'pointerdown', x: 0, y: 0 });
+    vi.advanceTimersByTime(500);
+    expect(handler).toHaveBeenCalledTimes(1);
+
+    dispatch(el, { type: 'pointerup', x: 3, y: 4 });
+
+    expect(onMouseUp).toHaveBeenCalledTimes(1);
+    const [duration, distance, isLongPress, event] = onMouseUp.mock.calls[0]!;
+    expect(typeof duration).toBe('number');
+    expect(distance).toBeCloseTo(5);
+    expect(isLongPress).toBeTruthy();
+    expect(event).toBeInstanceOf(Event);
+  });
+
+  it('reports a non-long-press when released early', () => {
+    const handler = vi.fn();
+    const onMouseUp = vi.fn();
+
+    scope.run(() => {
+      onLongPress(el, handler, { onMouseUp });
+    });
+
+    dispatch(el, { type: 'pointerdown', x: 0, y: 0 });
+    vi.advanceTimersByTime(100);
+    dispatch(el, { type: 'pointerup', x: 0, y: 0 });
+
+    expect(handler).not.toHaveBeenCalled();
+    expect(onMouseUp).toHaveBeenCalledTimes(1);
+    expect(onMouseUp.mock.calls[0]![2]).toBeFalsy();
+  });
+
+  it('does not call onMouseUp when there was no preceding pointerdown', () => {
+    const onMouseUp = vi.fn();
+
+    scope.run(() => {
+      onLongPress(el, vi.fn(), { onMouseUp });
+    });
+
+    dispatch(el, { type: 'pointerup' });
+    expect(onMouseUp).not.toHaveBeenCalled();
+  });
+
+  it('only reacts to events on the element itself when self modifier is set', () => {
+    const handler = vi.fn();
+    const child = document.createElement('span');
+    el.appendChild(child);
+
+    scope.run(() => {
+      onLongPress(el, handler, { modifiers: { self: true } });
+    });
+
+    // pointerdown bubbling up from a child should be ignored
+    child.dispatchEvent(pointerEvent({ type: 'pointerdown' }));
+    vi.advanceTimersByTime(500);
+    expect(handler).not.toHaveBeenCalled();
+
+    // pointerdown on the element itself fires
+    dispatch(el, { type: 'pointerdown' });
+    vi.advanceTimersByTime(500);
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls preventDefault when the prevent modifier is set', () => {
+    scope.run(() => {
+      onLongPress(el, vi.fn(), { modifiers: { prevent: true } });
+    });
+
+    const event = pointerEvent({ type: 'pointerdown' });
+    const preventSpy = vi.spyOn(event, 'preventDefault');
+    el.dispatchEvent(event);
+
+    expect(preventSpy).toHaveBeenCalled();
+  });
+
+  it('registers passive listeners by default and active when prevent is set', () => {
+    const passiveEl = document.createElement('div');
+    const activeEl = document.createElement('div');
+    const passiveSpy = vi.spyOn(passiveEl, 'addEventListener');
+    const activeSpy = vi.spyOn(activeEl, 'addEventListener');
+
+    scope.run(() => {
+      onLongPress(passiveEl, vi.fn());
+      onLongPress(activeEl, vi.fn(), { modifiers: { prevent: true } });
+    });
+
+    expect(passiveSpy).toHaveBeenCalledWith('pointerdown', expect.any(Function), expect.objectContaining({ passive: true }));
+    expect(activeSpy).toHaveBeenCalledWith('pointerdown', expect.any(Function), expect.objectContaining({ passive: false }));
+  });
+
+  it('stops listening when the returned stop handle is called', () => {
+    const handler = vi.fn();
+    let stop!: () => void;
+
+    scope.run(() => {
+      stop = onLongPress(el, handler);
+    });
+
+    stop();
+
+    dispatch(el, { type: 'pointerdown' });
+    vi.advanceTimersByTime(500);
+    expect(handler).not.toHaveBeenCalled();
+  });
+
+  it('clears a pending timeout when stopped mid-press', () => {
+    const handler = vi.fn();
+    let stop!: () => void;
+
+    scope.run(() => {
+      stop = onLongPress(el, handler);
+    });
+
+    dispatch(el, { type: 'pointerdown' });
+    vi.advanceTimersByTime(200);
+    stop();
+
+    vi.advanceTimersByTime(500);
+    expect(handler).not.toHaveBeenCalled();
+  });
+
+  it('auto-cleans up when the effect scope is disposed', () => {
+    const handler = vi.fn();
+
+    scope.run(() => {
+      onLongPress(el, handler);
+    });
+
+    scope.stop();
+
+    dispatch(el, { type: 'pointerdown' });
+    vi.advanceTimersByTime(500);
+    expect(handler).not.toHaveBeenCalled();
+  });
+
+  it('reacts to a reactive target', () => {
+    const handler = vi.fn();
+    const target = ref<HTMLElement | null>(null);
+
+    scope.run(() => {
+      onLongPress(target, handler);
+    });
+
+    // No target yet: pointer events on a detached element do nothing.
+    dispatch(el, { type: 'pointerdown' });
+    vi.advanceTimersByTime(500);
+    expect(handler).not.toHaveBeenCalled();
+  });
+
+  it('returns noop-safe stop when the target is undefined', () => {
+    let stop!: () => void;
+
+    scope.run(() => {
+      stop = onLongPress(undefined, vi.fn());
+    });
+
+    expect(stop).toBeTypeOf('function');
+    expect(() => stop()).not.toThrow();
+  });
+});
diff --git a/vue/toolkit/src/composables/sensors/onLongPress/index.ts b/vue/toolkit/src/composables/sensors/onLongPress/index.ts
new file mode 100644
index 0000000..8230a9f
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/onLongPress/index.ts
@@ -0,0 +1,227 @@
+import type { VoidFunction } from '@robonen/stdlib';
+import { isFunction } from '@robonen/stdlib';
+import { computed } from 'vue';
+import type { MaybeComputedElementRef } from '@/composables/component/unrefElement';
+import { unrefElement } from '@/composables/component/unrefElement';
+import { useEventListener } from '@/composables/browser/useEventListener';
+
+const DEFAULT_DELAY = 500;
+const DEFAULT_THRESHOLD = 10;
+
+export interface OnLongPressPosition {
+  x: number;
+  y: number;
+}
+
+export interface OnLongPressModifiers {
+  /**
+   * Call `stopPropagation` on the pointer events.
+   *
+   * @default false
+   */
+  stop?: boolean;
+
+  /**
+   * Register the underlying listeners with `{ once: true }`.
+   *
+   * @default false
+   */
+  once?: boolean;
+
+  /**
+   * Call `preventDefault` on the pointer events. Forces non-passive listeners.
+   *
+   * @default false
+   */
+  prevent?: boolean;
+
+  /**
+   * Register the underlying listeners in the capture phase.
+   *
+   * @default false
+   */
+  capture?: boolean;
+
+  /**
+   * Only react when the event originates from the target element itself
+   * (i.e. ignore events that bubbled up from descendants).
+   *
+   * @default false
+   */
+  self?: boolean;
+}
+
+export interface OnLongPressOptions {
+  /**
+   * Time in milliseconds the pointer must be held before the handler fires.
+   * A function receives the originating `pointerdown` event and returns the delay.
+   *
+   * @default 500
+   */
+  delay?: number | ((event: PointerEvent) => number);
+
+  /**
+   * Pointer-event behaviour flags.
+   */
+  modifiers?: OnLongPressModifiers;
+
+  /**
+   * Maximum pointer travel (in pixels) tolerated before the press is cancelled.
+   * Pass `false` to disable movement cancellation entirely.
+   *
+   * @default 10
+   */
+  distanceThreshold?: number | false;
+
+  /**
+   * Invoked on pointer release. Receives the press duration (ms), the distance
+   * travelled (px), whether the press qualified as a long press, and the event.
+   */
+  onMouseUp?: (duration: number, distance: number, isLongPress: boolean, event: PointerEvent) => void;
+}
+
+export type OnLongPressReturn = VoidFunction;
+
+/**
+ * @name onLongPress
+ * @category Sensors
+ * @description Directive-like helper that invokes a handler after a sustained long press
+ * on a target element. Movement beyond `distanceThreshold` cancels the press, and an
+ * optional `onMouseUp` callback reports the press duration, distance, and long-press status.
+ * Listeners are passive by default and registered via `useEventListener` for automatic cleanup.
+ *
+ * @param {MaybeComputedElementRef} target Element to watch for long presses
+ * @param {(event: PointerEvent) => void} handler Callback fired once the press passes `delay`
+ * @param {OnLongPressOptions} [options={}] Long-press configuration
+ * @returns {OnLongPressReturn} Stop handle that removes all listeners
+ *
+ * @example
+ * onLongPress(el, () => console.log('held!'));
+ *
+ * @example
+ * // Custom delay, cancel-on-move disabled, release reporting
+ * const stop = onLongPress(el, onHeld, {
+ *   delay: 800,
+ *   distanceThreshold: false,
+ *   modifiers: { prevent: true },
+ *   onMouseUp: (duration, distance, isLongPress) => {
+ *     if (!isLongPress) onTap();
+ *   },
+ * });
+ *
+ * @since 0.0.15
+ */
+export function onLongPress(
+  target: MaybeComputedElementRef,
+  handler: (event: PointerEvent) => void,
+  options: OnLongPressOptions = {},
+): OnLongPressReturn {
+  const { delay = DEFAULT_DELAY, modifiers = {}, distanceThreshold = DEFAULT_THRESHOLD, onMouseUp } = options;
+  const { self: selfOnly = false, prevent = false, stop: stopProp = false, capture = false, once = false } = modifiers;
+
+  // Resolve the element once and cache it; reactive targets re-trigger this getter
+  // and the underlying useEventListener watch re-binds automatically.
+  const elementRef = computed(() => unrefElement(target));
+
+  // Hoisted as a function-valued delay only when the caller supplies one,
+  // so the common numeric path skips the per-press branch entirely.
+  const getDelay = isFunction(delay)
+    ? delay
+    : (): number => delay;
+
+  let timeout: ReturnType<typeof setTimeout> | undefined;
+  let posStart: OnLongPressPosition | undefined;
+  let startTimestamp: number | undefined;
+  let hasLongPressed = false;
+
+  function clear(): void {
+    if (timeout !== undefined) {
+      clearTimeout(timeout);
+      timeout = undefined;
+    }
+    posStart = undefined;
+    startTimestamp = undefined;
+    hasLongPressed = false;
+  }
+
+  function isForeignTarget(event: PointerEvent): boolean {
+    return selfOnly && event.target !== elementRef.value;
+  }
+
+  function applyModifiers(event: PointerEvent): void {
+    if (prevent)
+      event.preventDefault();
+    if (stopProp)
+      event.stopPropagation();
+  }
+
+  function onDown(event: PointerEvent): void {
+    if (isForeignTarget(event))
+      return;
+
+    clear();
+    applyModifiers(event);
+
+    posStart = { x: event.x, y: event.y };
+    startTimestamp = event.timeStamp;
+
+    timeout = setTimeout(() => {
+      hasLongPressed = true;
+      handler(event);
+    }, getDelay(event));
+  }
+
+  function onMove(event: PointerEvent): void {
+    if (isForeignTarget(event) || !posStart || distanceThreshold === false)
+      return;
+
+    applyModifiers(event);
+
+    const dx = event.x - posStart.x;
+    const dy = event.y - posStart.y;
+    const distance = Math.hypot(dx, dy);
+
+    if (distance >= distanceThreshold)
+      clear();
+  }
+
+  function onRelease(event: PointerEvent): void {
+    const _posStart = posStart;
+    const _startTimestamp = startTimestamp;
+    const _hasLongPressed = hasLongPressed;
+    clear();
+
+    if (!onMouseUp || !_posStart || _startTimestamp === undefined)
+      return;
+
+    if (isForeignTarget(event))
+      return;
+
+    applyModifiers(event);
+
+    const dx = event.x - _posStart.x;
+    const dy = event.y - _posStart.y;
+    const distance = Math.hypot(dx, dy);
+
+    onMouseUp(event.timeStamp - _startTimestamp, distance, _hasLongPressed, event);
+  }
+
+  // Passive unless the caller intends to preventDefault, in which case the
+  // listener must be active for the browser to honour it.
+  const listenerOptions: AddEventListenerOptions = {
+    capture,
+    once,
+    passive: !prevent,
+  };
+
+  const cleanups = [
+    useEventListener(elementRef, 'pointerdown', onDown, listenerOptions),
+    useEventListener(elementRef, 'pointermove', onMove, listenerOptions),
+    useEventListener(elementRef, ['pointerup', 'pointerleave'], onRelease, listenerOptions),
+  ];
+
+  return (): void => {
+    clear();
+    cleanups.forEach(stop => stop());
+  };
+}
diff --git a/vue/toolkit/src/composables/sensors/onStartTyping/demo.vue b/vue/toolkit/src/composables/sensors/onStartTyping/demo.vue
new file mode 100644
index 0000000..a5257ef
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/onStartTyping/demo.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue';
+import { onStartTyping } from './index';
+
+// The canonical use case: start typing anywhere on the page (while no field is
+// focused) and we auto-focus the search box — like GitHub / Slack quick search.
+const searchInput = useTemplateRef<HTMLInputElement>('searchInput');
+const query = ref('');
+const focused = ref(false);
+const lastChar = ref('');
+
+const fruits = ['Apricot', 'Blueberry', 'Cherry', 'Dragonfruit', 'Elderberry', 'Fig', 'Guava'];
+const results = ref(fruits);
+
+onStartTyping((event) => {
+  lastChar.value = event.key;
+  // Guard: only steal focus if the input isn't already active.
+  if (document.activeElement !== searchInput.value)
+    searchInput.value?.focus();
+});
+
+function filter() {
+  const q = query.value.trim().toLowerCase();
+  results.value = q ? fruits.filter(f => f.toLowerCase().includes(q)) : fruits;
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div
+      class="rounded-xl border border-dashed p-5 text-center transition-colors"
+      :class="focused
+        ? 'border-(--accent) bg-(--accent-subtle)'
+        : 'border-(--border-strong) bg-(--bg-inset)'"
+    >
+      <p class="text-sm text-(--fg)">
+        Start typing
+        <span class="font-medium">anywhere</span> on the page
+      </p>
+      <p class="mt-1 text-xs text-(--fg-subtle)">
+        the search box below focuses itself automatically
+      </p>
+      <span
+        v-if="lastChar"
+        class="mt-3 inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-elevated) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+      >
+        captured <span class="font-mono text-(--fg)">{{ lastChar === ' ' ? 'Space' : lastChar }}</span>
+      </span>
+    </div>
+
+    <input
+      ref="searchInput"
+      v-model="query"
+      type="text"
+      placeholder="Search fruit…"
+      class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      @input="filter"
+      @focus="focused = true"
+      @blur="focused = false"
+    >
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 min-h-12">
+      <ul v-if="results.length" class="flex flex-col">
+        <li
+          v-for="fruit in results"
+          :key="fruit"
+          class="rounded-md px-2 py-1.5 text-sm text-(--fg) transition-colors hover:bg-(--bg-elevated)"
+        >
+          {{ fruit }}
+        </li>
+      </ul>
+      <p v-else class="px-2 py-3 text-center text-sm text-(--fg-subtle)">
+        No fruit matches "{{ query }}"
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/onStartTyping/index.test.ts b/vue/toolkit/src/composables/sensors/onStartTyping/index.test.ts
new file mode 100644
index 0000000..54bd53f
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/onStartTyping/index.test.ts
@@ -0,0 +1,315 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { effectScope } from 'vue';
+import { isFocusedElementEditable, isTypedCharValid, onStartTyping } from '.';
+
+function keydown(key: string, modifiers: Partial<KeyboardEvent> = {}): KeyboardEvent {
+  return new KeyboardEvent('keydown', { key, bubbles: true, ...modifiers });
+}
+
+describe(onStartTyping, () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+    if (document.activeElement instanceof HTMLElement)
+      document.activeElement.blur();
+  });
+
+  it('fires when typing a printable character on a non-editable element', () => {
+    const callback = vi.fn();
+    const scope = effectScope();
+    scope.run(() => {
+      onStartTyping(callback);
+    });
+
+    document.dispatchEvent(keydown('a'));
+
+    expect(callback).toHaveBeenCalledTimes(1);
+    expect(callback.mock.calls[0]![0]).toBeInstanceOf(KeyboardEvent);
+
+    scope.stop();
+  });
+
+  it('passes the originating keydown event to the callback', () => {
+    const callback = vi.fn();
+    const scope = effectScope();
+    scope.run(() => {
+      onStartTyping(callback);
+    });
+
+    const event = keydown('z');
+    document.dispatchEvent(event);
+
+    expect(callback).toHaveBeenCalledWith(event);
+
+    scope.stop();
+  });
+
+  it('does not fire for named/control keys', () => {
+    const callback = vi.fn();
+    const scope = effectScope();
+    scope.run(() => {
+      onStartTyping(callback);
+    });
+
+    document.dispatchEvent(keydown('Enter'));
+    document.dispatchEvent(keydown('Tab'));
+    document.dispatchEvent(keydown('ArrowUp'));
+    document.dispatchEvent(keydown('Escape'));
+
+    expect(callback).not.toHaveBeenCalled();
+
+    scope.stop();
+  });
+
+  it('does not fire when a modifier key is held', () => {
+    const callback = vi.fn();
+    const scope = effectScope();
+    scope.run(() => {
+      onStartTyping(callback);
+    });
+
+    document.dispatchEvent(keydown('a', { metaKey: true }));
+    document.dispatchEvent(keydown('a', { ctrlKey: true }));
+    document.dispatchEvent(keydown('a', { altKey: true }));
+
+    expect(callback).not.toHaveBeenCalled();
+
+    scope.stop();
+  });
+
+  it('does not fire when focus is inside an input', () => {
+    const input = document.createElement('input');
+    document.body.appendChild(input);
+    input.focus();
+
+    const callback = vi.fn();
+    const scope = effectScope();
+    scope.run(() => {
+      onStartTyping(callback);
+    });
+
+    document.dispatchEvent(keydown('a'));
+
+    expect(callback).not.toHaveBeenCalled();
+
+    scope.stop();
+  });
+
+  it('does not fire when focus is inside a textarea', () => {
+    const textarea = document.createElement('textarea');
+    document.body.appendChild(textarea);
+    textarea.focus();
+
+    const callback = vi.fn();
+    const scope = effectScope();
+    scope.run(() => {
+      onStartTyping(callback);
+    });
+
+    document.dispatchEvent(keydown('a'));
+
+    expect(callback).not.toHaveBeenCalled();
+
+    scope.stop();
+  });
+
+  it('does not fire when focus is inside a contenteditable element', () => {
+    const editable = document.createElement('div');
+    editable.setAttribute('contenteditable', 'true');
+    editable.tabIndex = 0;
+    document.body.appendChild(editable);
+    editable.focus();
+
+    const callback = vi.fn();
+    const scope = effectScope();
+    scope.run(() => {
+      onStartTyping(callback);
+    });
+
+    document.dispatchEvent(keydown('a'));
+
+    expect(callback).not.toHaveBeenCalled();
+
+    scope.stop();
+  });
+
+  it('fires when a non-editable element (e.g. a button) is focused', () => {
+    const button = document.createElement('button');
+    document.body.appendChild(button);
+    button.focus();
+
+    const callback = vi.fn();
+    const scope = effectScope();
+    scope.run(() => {
+      onStartTyping(callback);
+    });
+
+    document.dispatchEvent(keydown('a'));
+
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    scope.stop();
+  });
+
+  it('detaches the listener via the returned stop function', () => {
+    const callback = vi.fn();
+    const scope = effectScope();
+    let stop: () => void;
+    scope.run(() => {
+      stop = onStartTyping(callback);
+    });
+
+    stop!();
+    document.dispatchEvent(keydown('a'));
+
+    expect(callback).not.toHaveBeenCalled();
+
+    scope.stop();
+  });
+
+  it('detaches the listener when the scope is disposed', () => {
+    const callback = vi.fn();
+    const scope = effectScope();
+    scope.run(() => {
+      onStartTyping(callback);
+    });
+
+    scope.stop();
+    document.dispatchEvent(keydown('a'));
+
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it('honors a custom isTypedCharValid predicate', () => {
+    const callback = vi.fn();
+    const scope = effectScope();
+    scope.run(() => {
+      onStartTyping(callback, { isTypedCharValid: event => event.key === 'Enter' });
+    });
+
+    document.dispatchEvent(keydown('a'));
+    expect(callback).not.toHaveBeenCalled();
+
+    document.dispatchEvent(keydown('Enter'));
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    scope.stop();
+  });
+
+  it('honors a custom isFocusedElementEditable predicate', () => {
+    const callback = vi.fn();
+    const scope = effectScope();
+    scope.run(() => {
+      // Treat everything as editable -> callback should never run.
+      onStartTyping(callback, { isFocusedElementEditable: () => true });
+    });
+
+    document.dispatchEvent(keydown('a'));
+
+    expect(callback).not.toHaveBeenCalled();
+
+    scope.stop();
+  });
+
+  it('listens on a custom document passed via options', () => {
+    const callback = vi.fn();
+    const listeners = new Map<string, EventListener>();
+    const fakeDocument = {
+      activeElement: null,
+      body: null,
+      addEventListener: vi.fn((type: string, listener: EventListener) => listeners.set(type, listener)),
+      removeEventListener: vi.fn((type: string) => listeners.delete(type)),
+    } as unknown as Document;
+
+    const scope = effectScope();
+    scope.run(() => {
+      onStartTyping(callback, { document: fakeDocument });
+    });
+
+    expect(fakeDocument.addEventListener).toHaveBeenCalledWith(
+      'keydown',
+      expect.any(Function),
+      expect.objectContaining({ passive: true }),
+    );
+
+    // Drive the captured listener directly.
+    listeners.get('keydown')!(keydown('a'));
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    scope.stop();
+  });
+
+  it('is SSR-safe: returns a no-op when document is undefined', () => {
+    const callback = vi.fn();
+    const scope = effectScope();
+    let stop: () => void;
+    scope.run(() => {
+      stop = onStartTyping(callback, { document: undefined });
+    });
+
+    expect(typeof stop!).toBe('function');
+    expect(() => stop!()).not.toThrow();
+    expect(callback).not.toHaveBeenCalled();
+
+    scope.stop();
+  });
+});
+
+describe(isTypedCharValid, () => {
+  it('accepts single printable characters', () => {
+    expect(isTypedCharValid(keydown('a'))).toBeTruthy();
+    expect(isTypedCharValid(keydown('Z'))).toBeTruthy();
+    expect(isTypedCharValid(keydown('5'))).toBeTruthy();
+    expect(isTypedCharValid(keydown('?'))).toBeTruthy();
+  });
+
+  it('accepts surrogate-pair characters (e.g. emoji)', () => {
+    expect(isTypedCharValid(keydown('😀'))).toBeTruthy();
+  });
+
+  it('rejects named keys', () => {
+    expect(isTypedCharValid(keydown('Enter'))).toBeFalsy();
+    expect(isTypedCharValid(keydown('ArrowLeft'))).toBeFalsy();
+    expect(isTypedCharValid(keydown('Shift'))).toBeFalsy();
+  });
+
+  it('rejects characters typed with a meta/ctrl/alt modifier', () => {
+    expect(isTypedCharValid(keydown('a', { metaKey: true }))).toBeFalsy();
+    expect(isTypedCharValid(keydown('a', { ctrlKey: true }))).toBeFalsy();
+    expect(isTypedCharValid(keydown('a', { altKey: true }))).toBeFalsy();
+  });
+});
+
+describe(isFocusedElementEditable, () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+    if (document.activeElement instanceof HTMLElement)
+      document.activeElement.blur();
+  });
+
+  it('returns false when nothing is focused', () => {
+    expect(isFocusedElementEditable(document)).toBeFalsy();
+  });
+
+  it('returns true when an input is focused', () => {
+    const input = document.createElement('input');
+    document.body.appendChild(input);
+    input.focus();
+    expect(isFocusedElementEditable(document)).toBeTruthy();
+  });
+
+  it('returns true when a contenteditable element is focused', () => {
+    const editable = document.createElement('div');
+    editable.setAttribute('contenteditable', 'true');
+    editable.tabIndex = 0;
+    document.body.appendChild(editable);
+    editable.focus();
+    expect(isFocusedElementEditable(document)).toBeTruthy();
+  });
+
+  it('returns false when a button is focused', () => {
+    const button = document.createElement('button');
+    document.body.appendChild(button);
+    button.focus();
+    expect(isFocusedElementEditable(document)).toBeFalsy();
+  });
+});
diff --git a/vue/toolkit/src/composables/sensors/onStartTyping/index.ts b/vue/toolkit/src/composables/sensors/onStartTyping/index.ts
new file mode 100644
index 0000000..d50a8cc
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/onStartTyping/index.ts
@@ -0,0 +1,109 @@
+import type { VoidFunction } from '@robonen/stdlib';
+import { noop } from '@robonen/stdlib';
+import { defaultDocument } from '@/types';
+import type { ConfigurableDocument } from '@/types';
+import { useEventListener } from '@/composables/browser/useEventListener';
+
+/**
+ * Decides whether the currently focused element already swallows text input
+ * (an `<input>`, `<textarea>`, or any `contenteditable` host). When it does we
+ * leave the keystroke alone so we never steal focus from a real text field.
+ */
+export function isFocusedElementEditable(document: Document): boolean {
+  const { activeElement, body } = document;
+
+  // No focus, or focus parked on <body>, means nothing is being edited.
+  if (!activeElement || activeElement === body)
+    return false;
+
+  switch (activeElement.tagName) {
+    case 'INPUT':
+    case 'TEXTAREA':
+      return true;
+  }
+
+  return activeElement.hasAttribute('contenteditable');
+}
+
+/**
+ * Returns `true` when the event represents a single printable character typed
+ * without a command/control/alt modifier. Uses `KeyboardEvent.key` (a single
+ * Unicode grapheme for printable keys) instead of the deprecated `keyCode`, so
+ * it transparently covers digits, latin letters and any other printable glyph.
+ */
+export function isTypedCharValid(event: KeyboardEvent): boolean {
+  const { key, metaKey, ctrlKey, altKey } = event;
+
+  if (metaKey || ctrlKey || altKey)
+    return false;
+
+  // Named keys ('Enter', 'Tab', 'ArrowUp', ...) are longer than one code unit.
+  // Printable characters (including surrogate-pair emoji) are not.
+  return key.length === 1 || [...key].length === 1;
+}
+
+export interface OnStartTypingOptions extends ConfigurableDocument {
+  /**
+   * Predicate deciding whether a keystroke counts as the start of typing.
+   *
+   * @default isTypedCharValid (single printable char, no meta/ctrl/alt)
+   */
+  isTypedCharValid?: (event: KeyboardEvent) => boolean;
+  /**
+   * Predicate deciding whether the focused element is already editable, in
+   * which case the callback is skipped.
+   *
+   * @default isFocusedElementEditable
+   */
+  isFocusedElementEditable?: (document: Document) => boolean;
+}
+
+export type OnStartTypingReturn = VoidFunction;
+
+/**
+ * @name onStartTyping
+ * @category Sensors
+ * @description Fires the callback when the user starts typing on a non-editable element, ideal for auto-focusing a search box.
+ *
+ * @param {(event: KeyboardEvent) => void} callback Invoked with the originating `keydown` event
+ * @param {OnStartTypingOptions} [options={}] Options
+ * @returns {OnStartTypingReturn} A function that detaches the `keydown` listener
+ *
+ * @example
+ * const input = useTemplateRef('input');
+ * onStartTyping(() => {
+ *   if (document.activeElement !== input.value)
+ *     input.value?.focus();
+ * });
+ *
+ * @example
+ * // stop listening manually
+ * const stop = onStartTyping(() => openSearch());
+ * stop();
+ *
+ * @since 0.0.15
+ */
+export function onStartTyping(
+  callback: (event: KeyboardEvent) => void,
+  options: OnStartTypingOptions = {},
+): OnStartTypingReturn {
+  const {
+    document = defaultDocument,
+    isTypedCharValid: isTypedCharValidFn = isTypedCharValid,
+    isFocusedElementEditable: isFocusedElementEditableFn = isFocusedElementEditable,
+  } = options;
+
+  // SSR / no-DOM: nothing to listen to, hand back a no-op stopper.
+  if (!document)
+    return noop;
+
+  return useEventListener(
+    document,
+    'keydown',
+    (event: KeyboardEvent) => {
+      if (!isFocusedElementEditableFn(document) && isTypedCharValidFn(event))
+        callback(event);
+    },
+    { passive: true },
+  );
+}
diff --git a/vue/toolkit/src/composables/sensors/useBattery/demo.vue b/vue/toolkit/src/composables/sensors/useBattery/demo.vue
new file mode 100644
index 0000000..d2242d5
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useBattery/demo.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useBattery } from './index';
+
+const { isSupported, charging, level, chargingTime, dischargingTime } = useBattery();
+
+const percent = computed(() => Math.round(level.value * 100));
+
+const statusLabel = computed(() => {
+  if (charging.value) return percent.value >= 100 ? 'Fully charged' : 'Charging';
+  return percent.value <= 20 ? 'Low battery' : 'On battery';
+});
+
+// Color-code the fill the way an OS status bar would.
+const fillClass = computed(() => {
+  if (charging.value) return 'bg-emerald-500';
+  if (percent.value <= 20) return 'bg-red-500';
+  if (percent.value <= 50) return 'bg-amber-500';
+  return 'bg-(--accent)';
+});
+
+function formatDuration(seconds: number): string {
+  if (!Number.isFinite(seconds) || seconds <= 0) return '—';
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  if (h > 0) return `${h}h ${m}m`;
+  return `${m}m`;
+}
+
+const chargingTimeLabel = computed(() => formatDuration(chargingTime.value));
+const dischargingTimeLabel = computed(() => formatDuration(dischargingTime.value));
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div v-if="!isSupported" class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-700 dark:text-amber-300">
+      Battery Status API is not supported in this browser.
+    </div>
+
+    <template v-else>
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+        <div class="flex items-center justify-between">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Battery Status</span>
+          <span
+            class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+          >
+            <span class="size-1.5 rounded-full transition" :class="charging ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+            {{ statusLabel }}
+          </span>
+        </div>
+
+        <!-- Battery silhouette: body + terminal cap, fill scales with level -->
+        <div class="flex items-center gap-2">
+          <div class="relative h-14 flex-1 rounded-lg border-2 border-(--border-strong) bg-(--bg-inset) p-1">
+            <div
+              class="h-full rounded-sm transition-all duration-500"
+              :class="fillClass"
+              :style="{ width: `${Math.max(percent, 2)}%` }"
+            />
+            <span class="absolute inset-0 flex items-center justify-center font-mono text-lg font-bold tabular-nums text-(--fg)">
+              {{ percent }}%
+            </span>
+          </div>
+          <div class="h-6 w-1.5 rounded-r-sm bg-(--border-strong)" />
+        </div>
+      </div>
+
+      <div class="grid grid-cols-2 gap-2">
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">Time to full</div>
+          <div class="font-mono text-base font-bold tabular-nums text-(--fg)">{{ chargingTimeLabel }}</div>
+        </div>
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">Time to empty</div>
+          <div class="font-mono text-base font-bold tabular-nums text-(--fg)">{{ dischargingTimeLabel }}</div>
+        </div>
+      </div>
+
+      <p class="text-xs text-(--fg-subtle)">
+        Plug in or unplug your charger to watch the charging state, level, and remaining time update live.
+      </p>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useBattery/index.test.ts b/vue/toolkit/src/composables/sensors/useBattery/index.test.ts
new file mode 100644
index 0000000..92c1cf8
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useBattery/index.test.ts
@@ -0,0 +1,227 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { effectScope } from 'vue';
+import { useBattery } from '.';
+import type { BatteryManager } from '.';
+
+afterEach(() => vi.unstubAllGlobals());
+
+function createBatteryManager(overrides: Partial<BatteryManager> = {}) {
+  const listeners = new Map<string, Set<EventListener>>();
+
+  const battery = {
+    charging: false,
+    chargingTime: 0,
+    dischargingTime: Number.POSITIVE_INFINITY,
+    level: 0.5,
+    ...overrides,
+    addEventListener: vi.fn((event: string, listener: EventListener) => {
+      if (!listeners.has(event))
+        listeners.set(event, new Set());
+      listeners.get(event)!.add(listener);
+    }),
+    removeEventListener: vi.fn((event: string, listener: EventListener) => {
+      listeners.get(event)?.delete(listener);
+    }),
+    dispatchEvent: vi.fn(),
+  } as unknown as BatteryManager;
+
+  function emit(event: string): void {
+    for (const listener of listeners.get(event) ?? [])
+      listener.call(battery, new Event(event));
+  }
+
+  return { battery, listeners, emit };
+}
+
+function stubNavigator(battery?: BatteryManager) {
+  const getBattery = vi.fn(() => Promise.resolve(battery!));
+  const navigator = { getBattery } as unknown as Navigator;
+  return { navigator, getBattery };
+}
+
+describe(useBattery, () => {
+  it('reports supported when navigator.getBattery exists', () => {
+    const { battery } = createBatteryManager();
+    const { navigator } = stubNavigator(battery);
+    const scope = effectScope();
+    let result!: ReturnType<typeof useBattery>;
+    scope.run(() => {
+      result = useBattery({ navigator });
+    });
+    expect(result.isSupported.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('reports unsupported when getBattery is missing', () => {
+    const navigator = {} as Navigator;
+    const scope = effectScope();
+    let result!: ReturnType<typeof useBattery>;
+    scope.run(() => {
+      result = useBattery({ navigator });
+    });
+    expect(result.isSupported.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('exposes safe defaults before the battery resolves', () => {
+    const { battery } = createBatteryManager();
+    const { navigator } = stubNavigator(battery);
+    const scope = effectScope();
+    let result!: ReturnType<typeof useBattery>;
+    scope.run(() => {
+      result = useBattery({ navigator });
+    });
+    expect(result.charging.value).toBeFalsy();
+    expect(result.chargingTime.value).toBe(0);
+    expect(result.dischargingTime.value).toBe(0);
+    expect(result.level.value).toBe(1);
+    scope.stop();
+  });
+
+  it('populates state once the battery resolves', async () => {
+    const { battery } = createBatteryManager({
+      charging: true,
+      chargingTime: 1200,
+      dischargingTime: 0,
+      level: 0.75,
+    });
+    const { navigator } = stubNavigator(battery);
+    const scope = effectScope();
+    let result!: ReturnType<typeof useBattery>;
+    scope.run(() => {
+      result = useBattery({ navigator });
+    });
+
+    await Promise.resolve();
+    await Promise.resolve();
+
+    expect(result.charging.value).toBeTruthy();
+    expect(result.chargingTime.value).toBe(1200);
+    expect(result.dischargingTime.value).toBe(0);
+    expect(result.level.value).toBe(0.75);
+    scope.stop();
+  });
+
+  it('normalizes falsy/Infinity charging times to 0', async () => {
+    const { battery } = createBatteryManager({
+      charging: false,
+      chargingTime: Number.POSITIVE_INFINITY,
+      dischargingTime: Number.POSITIVE_INFINITY,
+      level: 0.4,
+    });
+    const { navigator } = stubNavigator(battery);
+    const scope = effectScope();
+    let result!: ReturnType<typeof useBattery>;
+    scope.run(() => {
+      result = useBattery({ navigator });
+    });
+
+    await Promise.resolve();
+    await Promise.resolve();
+
+    // Infinity is truthy so it is preserved, but a 0 chargingTime should stay 0.
+    expect(result.chargingTime.value).toBe(Number.POSITIVE_INFINITY);
+    scope.stop();
+  });
+
+  it('registers passive listeners for every battery event', async () => {
+    const { battery } = createBatteryManager();
+    const { navigator } = stubNavigator(battery);
+    const scope = effectScope();
+    scope.run(() => useBattery({ navigator }));
+
+    await Promise.resolve();
+    await Promise.resolve();
+
+    const events = (battery.addEventListener as ReturnType<typeof vi.fn>).mock.calls.map(c => c[0]);
+    expect(events).toEqual(
+      expect.arrayContaining([
+        'chargingchange',
+        'chargingtimechange',
+        'dischargingtimechange',
+        'levelchange',
+      ]),
+    );
+    const opts = (battery.addEventListener as ReturnType<typeof vi.fn>).mock.calls[0]![2];
+    expect(opts).toMatchObject({ passive: true });
+    scope.stop();
+  });
+
+  it('updates reactive state when a battery event fires', async () => {
+    const { battery, emit } = createBatteryManager({ charging: false, level: 0.5 });
+    const { navigator } = stubNavigator(battery);
+    const scope = effectScope();
+    let result!: ReturnType<typeof useBattery>;
+    scope.run(() => {
+      result = useBattery({ navigator });
+    });
+
+    await Promise.resolve();
+    await Promise.resolve();
+
+    expect(result.charging.value).toBeFalsy();
+    expect(result.level.value).toBe(0.5);
+
+    (battery as unknown as { charging: boolean; level: number }).charging = true;
+    (battery as unknown as { charging: boolean; level: number }).level = 0.9;
+    emit('levelchange');
+
+    expect(result.charging.value).toBeTruthy();
+    expect(result.level.value).toBe(0.9);
+    scope.stop();
+  });
+
+  it('does not bind listeners when the scope is disposed before resolution', async () => {
+    const { battery } = createBatteryManager();
+    const { navigator } = stubNavigator(battery);
+    const scope = effectScope();
+    scope.run(() => useBattery({ navigator }));
+
+    // Tear down before getBattery() resolves.
+    scope.stop();
+
+    await Promise.resolve();
+    await Promise.resolve();
+
+    expect(battery.addEventListener).not.toHaveBeenCalled();
+  });
+
+  it('invokes onError when getBattery rejects', async () => {
+    const error = new Error('denied');
+    const getBattery = vi.fn(() => Promise.reject(error));
+    const navigator = { getBattery } as unknown as Navigator;
+    const onError = vi.fn();
+    const scope = effectScope();
+    scope.run(() => useBattery({ navigator, onError }));
+
+    await Promise.resolve();
+    await Promise.resolve();
+
+    expect(onError).toHaveBeenCalledWith(error);
+    scope.stop();
+  });
+
+  it('does not call getBattery when unsupported', () => {
+    const navigator = {} as Navigator;
+    const scope = effectScope();
+    let result!: ReturnType<typeof useBattery>;
+    scope.run(() => {
+      result = useBattery({ navigator });
+    });
+    expect(result.isSupported.value).toBeFalsy();
+    expect(result.level.value).toBe(1);
+    scope.stop();
+  });
+
+  it('is SSR-safe when navigator is undefined', () => {
+    const scope = effectScope();
+    let result!: ReturnType<typeof useBattery>;
+    scope.run(() => {
+      result = useBattery({ navigator: undefined });
+    });
+    expect(result.isSupported.value).toBeFalsy();
+    expect(result.charging.value).toBeFalsy();
+    expect(result.level.value).toBe(1);
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/sensors/useBattery/index.ts b/vue/toolkit/src/composables/sensors/useBattery/index.ts
new file mode 100644
index 0000000..ff73d58
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useBattery/index.ts
@@ -0,0 +1,139 @@
+import { shallowReadonly, shallowRef } from 'vue';
+import type { Ref } from 'vue';
+import { noop } from '@robonen/stdlib';
+import { defaultNavigator } from '@/types';
+import type { ConfigurableNavigator } from '@/types';
+import { useSupported } from '@/composables/utilities/useSupported';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+
+/**
+ * The `BatteryManager` interface of the Battery Status API.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/BatteryManager
+ */
+export interface BatteryManager extends EventTarget {
+  charging: boolean;
+  chargingTime: number;
+  dischargingTime: number;
+  level: number;
+}
+
+type NavigatorWithBattery
+  = Navigator & {
+    getBattery: () => Promise<BatteryManager>;
+  };
+
+export interface UseBatteryOptions extends ConfigurableNavigator {
+  /**
+   * Called whenever `navigator.getBattery()` rejects. Receives the thrown
+   * error. Useful for surfacing failures without inspecting it via a watcher.
+   *
+   * @default () => {}
+   */
+  onError?: (error: unknown) => void;
+}
+
+export interface UseBatteryReturn {
+  /**
+   * Whether the Battery Status API is supported in the current environment.
+   */
+  isSupported: Readonly<Ref<boolean>>;
+
+  /**
+   * Whether the device is currently charging.
+   */
+  charging: Readonly<Ref<boolean>>;
+
+  /**
+   * Seconds remaining until the battery is fully charged, or `0` if already
+   * full / not charging. `Infinity` while charging time is unknown.
+   */
+  chargingTime: Readonly<Ref<number>>;
+
+  /**
+   * Seconds remaining until the battery is fully discharged, or `0`.
+   * `Infinity` while discharging time is unknown.
+   */
+  dischargingTime: Readonly<Ref<number>>;
+
+  /**
+   * Battery charge level as a number between `0` and `1`.
+   */
+  level: Readonly<Ref<number>>;
+}
+
+const BATTERY_EVENTS: string[] = [
+  'chargingchange',
+  'chargingtimechange',
+  'dischargingtimechange',
+  'levelchange',
+];
+
+/**
+ * @name useBattery
+ * @category Sensors
+ * @description Reactive Battery Status API. Tracks the device charging state,
+ * charge level, and the estimated charging/discharging times, keeping them in
+ * sync with the underlying `BatteryManager` events.
+ *
+ * @param {UseBatteryOptions} [options={}] Options
+ * @returns {UseBatteryReturn} Reactive support flag, charging state, charging/discharging times, and level
+ *
+ * @example
+ * const { charging, level, chargingTime, dischargingTime } = useBattery();
+ *
+ * @example
+ * // React to acquisition failures
+ * const { isSupported } = useBattery({ onError: (e) => report(e) });
+ *
+ * @since 0.0.15
+ */
+export function useBattery(options: UseBatteryOptions = {}): UseBatteryReturn {
+  const { navigator = defaultNavigator, onError = noop } = options;
+
+  const isSupported = useSupported(
+    () => !!navigator && 'getBattery' in navigator && typeof (navigator as NavigatorWithBattery).getBattery === 'function',
+  );
+
+  const charging = shallowRef(false);
+  const chargingTime = shallowRef(0);
+  const dischargingTime = shallowRef(0);
+  const level = shallowRef(1);
+
+  function updateBatteryInfo(this: BatteryManager): void {
+    charging.value = this.charging;
+    chargingTime.value = this.chargingTime || 0;
+    dischargingTime.value = this.dischargingTime || 0;
+    level.value = this.level;
+  }
+
+  if (isSupported.value) {
+    let disposed = false;
+
+    // getBattery() resolves asynchronously, so the scope may have been torn
+    // down before the manager is ready — guard against late event binding.
+    tryOnScopeDispose(() => {
+      disposed = true;
+    });
+
+    (navigator as NavigatorWithBattery)
+      .getBattery()
+      .then((battery) => {
+        if (disposed)
+          return;
+
+        updateBatteryInfo.call(battery);
+        useEventListener(battery, BATTERY_EVENTS, updateBatteryInfo, { passive: true });
+      })
+      .catch(onError);
+  }
+
+  return {
+    isSupported,
+    charging: shallowReadonly(charging),
+    chargingTime: shallowReadonly(chargingTime),
+    dischargingTime: shallowReadonly(dischargingTime),
+    level: shallowReadonly(level),
+  };
+}
diff --git a/vue/toolkit/src/composables/sensors/useBodyScrollLock/demo.vue b/vue/toolkit/src/composables/sensors/useBodyScrollLock/demo.vue
new file mode 100644
index 0000000..8859740
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useBodyScrollLock/demo.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { VoidFunction } from '@robonen/stdlib';
+import { useBodyScrollLock } from './index';
+
+// We acquire the lock imperatively on open and call the returned release on close,
+// so the demo never holds the page scroll captive after the dialog dismisses.
+const open = ref(false);
+let release: VoidFunction | null = null;
+
+function openModal(): void {
+  if (open.value) return;
+  open.value = true;
+  release = useBodyScrollLock();
+}
+
+function closeModal(): void {
+  if (!open.value) return;
+  open.value = false;
+  release?.();
+  release = null;
+}
+
+const items = [
+  'Inbox', 'Drafts', 'Sent', 'Archive', 'Spam',
+  'Trash', 'Starred', 'Important', 'Snoozed', 'All mail',
+];
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Body scroll lock</span>
+      <p class="text-sm text-(--fg-muted)">
+        Open the dialog and try scrolling the page — the body is locked while it is open,
+        scrollbar width compensated so nothing shifts.
+      </p>
+      <span
+        class="inline-flex w-fit items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+      >
+        <span class="size-1.5 rounded-full transition" :class="open ? 'bg-amber-500' : 'bg-emerald-500'" />
+        {{ open ? 'Scroll locked' : 'Scroll free' }}
+      </span>
+    </div>
+
+    <button
+      type="button"
+      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+      @click="openModal"
+    >
+      Open dialog
+    </button>
+
+    <!-- Overlay rendered inline; lock acquired in openModal, released in closeModal -->
+    <Transition
+      enter-active-class="transition duration-150"
+      enter-from-class="opacity-0"
+      leave-active-class="transition duration-150"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="open"
+        class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
+        @click.self="closeModal"
+      >
+        <div class="w-full max-w-sm rounded-xl border border-(--border) bg-(--bg-elevated) p-5 shadow-xl flex flex-col gap-4">
+          <div class="flex items-center justify-between">
+            <h3 class="text-base font-semibold text-(--fg)">Mailboxes</h3>
+            <button
+              type="button"
+              class="rounded-md px-2 py-0.5 text-sm text-(--fg-muted) transition hover:bg-(--bg-inset) cursor-pointer"
+              @click="closeModal"
+            >
+              Close
+            </button>
+          </div>
+          <ul class="flex flex-col gap-1 max-h-48 overflow-y-auto">
+            <li
+              v-for="item in items"
+              :key="item"
+              class="rounded-md px-3 py-2 text-sm text-(--fg) transition hover:bg-(--bg-inset)"
+            >
+              {{ item }}
+            </li>
+          </ul>
+          <p class="text-xs text-(--fg-subtle)">The list scrolls, the page behind it does not.</p>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useBodyScrollLock/index.test.ts b/vue/toolkit/src/composables/sensors/useBodyScrollLock/index.test.ts
new file mode 100644
index 0000000..f398901
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useBodyScrollLock/index.test.ts
@@ -0,0 +1,43 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import { useBodyScrollLock } from '.';
+
+describe(useBodyScrollLock, () => {
+  afterEach(() => {
+    document.body.style.overflow = '';
+    document.body.style.paddingRight = '';
+    document.body.style.touchAction = '';
+  });
+
+  it('locks body overflow', () => {
+    const release = useBodyScrollLock();
+    expect(document.body.style.overflow).toBe('hidden');
+    release();
+  });
+
+  it('restores original overflow after release', () => {
+    document.body.style.overflow = 'auto';
+    const release = useBodyScrollLock();
+    expect(document.body.style.overflow).toBe('hidden');
+    release();
+    expect(document.body.style.overflow).toBe('auto');
+  });
+
+  it('reference-counts concurrent holders', () => {
+    const r1 = useBodyScrollLock();
+    const r2 = useBodyScrollLock();
+    expect(document.body.style.overflow).toBe('hidden');
+
+    r1();
+    expect(document.body.style.overflow).toBe('hidden');
+
+    r2();
+    expect(document.body.style.overflow).toBe('');
+  });
+
+  it('release is idempotent', () => {
+    const release = useBodyScrollLock();
+    release();
+    release();
+    expect(document.body.style.overflow).toBe('');
+  });
+});
diff --git a/vue/toolkit/src/composables/sensors/useBodyScrollLock/index.ts b/vue/toolkit/src/composables/sensors/useBodyScrollLock/index.ts
new file mode 100644
index 0000000..8bd0136
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useBodyScrollLock/index.ts
@@ -0,0 +1,73 @@
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+import { isClient } from '@robonen/platform/multi';
+import type { VoidFunction } from '@robonen/stdlib';
+import { noop } from '@robonen/stdlib';
+
+interface LockState {
+  refs: number;
+  originalOverflow: string;
+  originalPaddingRight: string;
+  originalTouchAction: string;
+}
+
+let state: LockState | null = null;
+
+function acquire(): VoidFunction {
+  if (!isClient) return noop;
+
+  if (!state) {
+    const { body, documentElement } = document;
+    const scrollbarWidth = globalThis.innerWidth - documentElement.clientWidth;
+
+    state = {
+      refs: 0,
+      originalOverflow: body.style.overflow,
+      originalPaddingRight: body.style.paddingRight,
+      originalTouchAction: body.style.touchAction,
+    };
+
+    body.style.overflow = 'hidden';
+    body.style.touchAction = 'none';
+
+    // Compensate scrollbar removal to prevent layout shift
+    if (scrollbarWidth > 0) {
+      const computedPr = Number.parseInt(globalThis.getComputedStyle(body).paddingRight, 10) || 0;
+      body.style.paddingRight = `${computedPr + scrollbarWidth}px`;
+    }
+  }
+
+  state.refs++;
+
+  let released = false;
+  const release = () => {
+    if (released || !state) return;
+    released = true;
+    state.refs--;
+
+    if (state.refs === 0) {
+      document.body.style.overflow = state.originalOverflow;
+      document.body.style.paddingRight = state.originalPaddingRight;
+      document.body.style.touchAction = state.originalTouchAction;
+      state = null;
+    }
+  };
+
+  tryOnScopeDispose(release);
+  return release;
+}
+
+/**
+ * @name useBodyScrollLock
+ * @category Sensors
+ * @description Reference-counted body scroll lock. Safe to invoke from multiple
+ * concurrent modals — the lock releases only after all holders release. Preserves
+ * the original overflow/padding/touch-action values and compensates for scrollbar
+ * removal to prevent layout shift.
+ *
+ * @returns {VoidFunction} Release function. Idempotent — call once per acquire.
+ *
+ * @since 0.0.14
+ */
+export function useBodyScrollLock(): VoidFunction {
+  return acquire();
+}
diff --git a/vue/toolkit/src/composables/sensors/useClickOutside/demo.vue b/vue/toolkit/src/composables/sensors/useClickOutside/demo.vue
new file mode 100644
index 0000000..a475cca
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useClickOutside/demo.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue';
+import { useClickOutside } from './index';
+
+const open = ref(false);
+const dismissals = ref(0);
+
+const menu = useTemplateRef<HTMLElement>('menu');
+
+// Close the menu whenever a pointer-down lands outside it.
+useClickOutside(menu, () => {
+  if (open.value) {
+    open.value = false;
+    dismissals.value++;
+  }
+});
+
+const options = ['Rename', 'Duplicate', 'Move to…', 'Archive'];
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Click outside to dismiss</span>
+      <p class="text-sm text-(--fg-muted)">
+        Open the menu, then click anywhere outside it to close. Clicks inside keep it open.
+      </p>
+    </div>
+
+    <div class="relative">
+      <button
+        ref="menu"
+        type="button"
+        class="inline-flex w-full items-center justify-between gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.99] cursor-pointer"
+        @click="open = !open"
+      >
+        Document actions
+        <span class="text-(--fg-subtle) transition" :class="{ 'rotate-180': open }">▾</span>
+
+        <!-- The menu lives inside `target`, so clicks on its items count as inside -->
+        <Transition
+          enter-active-class="transition duration-100"
+          enter-from-class="opacity-0 -translate-y-1"
+          leave-active-class="transition duration-100"
+          leave-to-class="opacity-0 -translate-y-1"
+        >
+          <div
+            v-if="open"
+            class="absolute left-0 right-0 top-full z-10 mt-1 overflow-hidden rounded-lg border border-(--border) bg-(--bg-elevated) shadow-lg"
+          >
+            <div
+              v-for="option in options"
+              :key="option"
+              class="px-3 py-2 text-left text-sm text-(--fg) transition hover:bg-(--bg-inset)"
+            >
+              {{ option }}
+            </div>
+          </div>
+        </Transition>
+      </button>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex items-center justify-between font-mono text-sm text-(--fg) tabular-nums">
+      <span class="text-(--fg-subtle)">outside dismissals</span>
+      <span class="font-bold">{{ dismissals }}</span>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useClickOutside/index.test.ts b/vue/toolkit/src/composables/sensors/useClickOutside/index.test.ts
new file mode 100644
index 0000000..1683971
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useClickOutside/index.test.ts
@@ -0,0 +1,77 @@
+import { describe, expect, it, vi } from 'vitest';
+import { defineComponent, h, nextTick, ref } from 'vue';
+import { mount } from '@vue/test-utils';
+import { useClickOutside } from '.';
+
+function mountWithOutside(handler: (e: Event) => void) {
+  const Comp = defineComponent({
+    setup() {
+      const target = ref<HTMLElement | null>(null);
+
+      return () => h('div', {
+        ref: (el: any) => { target.value = el; },
+        'data-testid': 'target',
+      }, [
+        h('button', { 'data-testid': 'inside' }, 'inside'),
+      ]);
+    },
+    mounted() {
+      useClickOutside(() => this.$el, handler);
+    },
+  });
+
+  return mount(Comp, { attachTo: document.body });
+}
+
+describe(useClickOutside, () => {
+  it('invokes handler on outside pointerdown', async () => {
+    const handler = vi.fn();
+    const w = mountWithOutside(handler);
+
+    const outside = document.createElement('button');
+    document.body.appendChild(outside);
+
+    await nextTick();
+    outside.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, composed: true }));
+    expect(handler).toHaveBeenCalledTimes(1);
+
+    outside.remove();
+    w.unmount();
+  });
+
+  it('does not invoke handler on inside pointerdown', async () => {
+    const handler = vi.fn();
+    const w = mountWithOutside(handler);
+    await nextTick();
+
+    const inside = w.find('[data-testid=inside]').element as HTMLElement;
+    inside.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, composed: true }));
+
+    expect(handler).not.toHaveBeenCalled();
+    w.unmount();
+  });
+
+  it('respects the ignore list', async () => {
+    const handler = vi.fn();
+    const ignored = document.createElement('div');
+    document.body.appendChild(ignored);
+
+    const Comp = defineComponent({
+      setup() {
+        return () => h('div', { 'data-testid': 'target' }, 'target');
+      },
+      mounted() {
+        useClickOutside(() => this.$el, handler, { ignore: [ignored] });
+      },
+    });
+
+    const w = mount(Comp, { attachTo: document.body });
+    await nextTick();
+
+    ignored.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, composed: true }));
+    expect(handler).not.toHaveBeenCalled();
+
+    ignored.remove();
+    w.unmount();
+  });
+});
diff --git a/vue/toolkit/src/composables/sensors/useClickOutside/index.ts b/vue/toolkit/src/composables/sensors/useClickOutside/index.ts
new file mode 100644
index 0000000..d0936f3
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useClickOutside/index.ts
@@ -0,0 +1,68 @@
+import type { MaybeComputedElementRef } from '@/composables/component/unrefElement';
+import { unrefElement } from '@/composables/component/unrefElement';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import { defaultWindow } from '@/types';
+import type { MaybeRefOrGetter } from 'vue';
+import { toValue } from 'vue';
+import type { VoidFunction } from '@robonen/stdlib';
+import { noop } from '@robonen/stdlib';
+
+export interface UseClickOutsideOptions {
+  /**
+   * Elements that are inside `target` semantically but physically rendered
+   * elsewhere (e.g. portaled menus). Events originating in these nodes
+   * are treated as *inside* clicks.
+   */
+  ignore?: MaybeRefOrGetter<Array<MaybeComputedElementRef | undefined>>;
+
+  /**
+   * Detect outside pointer-down instead of click. Useful for dismissable layers
+   * that want to react as soon as the user starts interacting outside.
+   * @default 'pointerdown'
+   */
+  event?: 'pointerdown' | 'mousedown' | 'click';
+}
+
+/**
+ * @name useClickOutside
+ * @category Sensors
+ * @description Invokes `handler` when a pointer event occurs outside `target`.
+ * SSR-safe: no-op on the server. Handles portaled/ignored subtrees and
+ * guards against synthetic "outside" clicks on removed nodes.
+ *
+ * @param {MaybeComputedElementRef} target Element to watch. Events inside it are ignored.
+ * @param {(event: PointerEvent | MouseEvent) => void} handler Callback invoked with the outside event
+ * @param {UseClickOutsideOptions} [options] Options
+ * @returns {VoidFunction} Stop handle to remove the listeners
+ *
+ * @since 0.0.14
+ */
+export function useClickOutside(
+  target: MaybeComputedElementRef,
+  handler: (event: PointerEvent | MouseEvent) => void,
+  options: UseClickOutsideOptions = {},
+): VoidFunction {
+  if (!defaultWindow) return noop;
+
+  const { event = 'pointerdown', ignore } = options;
+
+  const listener = (e: Event) => {
+    const el = unrefElement(target) as HTMLElement | undefined;
+    const pe = e as PointerEvent;
+    const path = (e.composedPath?.() ?? []) as Node[];
+    const eventTarget = (path[0] ?? e.target) as Node | null;
+
+    if (!el || !eventTarget) return;
+    if (el === eventTarget || el.contains(eventTarget)) return;
+
+    const ignoreList = toValue(ignore) ?? [];
+    for (const ref of ignoreList) {
+      const node = unrefElement(ref) as HTMLElement | undefined;
+      if (node && (node === eventTarget || node.contains(eventTarget))) return;
+    }
+
+    handler(pe);
+  };
+
+  return useEventListener(defaultWindow, event, listener, { passive: true, capture: true });
+}
diff --git a/vue/toolkit/src/composables/sensors/useDeviceMotion/demo.vue b/vue/toolkit/src/composables/sensors/useDeviceMotion/demo.vue
new file mode 100644
index 0000000..1be6faa
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useDeviceMotion/demo.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useDeviceMotion } from './index';
+
+const {
+  isSupported,
+  requirePermissions,
+  permissionGranted,
+  acceleration,
+  accelerationIncludingGravity,
+  rotationRate,
+  interval,
+  ensurePermissions,
+} = useDeviceMotion();
+
+function fmt(value: number | null | undefined): string {
+  return value == null ? '—' : value.toFixed(2);
+}
+
+// Magnitude of acceleration including gravity — a quick "how much is it moving" gauge.
+const magnitude = computed(() => {
+  const a = accelerationIncludingGravity.value;
+  if (!a) return 0;
+  const { x = 0, y = 0, z = 0 } = a;
+  return Math.sqrt((x ?? 0) ** 2 + (y ?? 0) ** 2 + (z ?? 0) ** 2);
+});
+
+const axes = computed(() => [
+  { key: 'x', label: 'X', value: acceleration.value?.x },
+  { key: 'y', label: 'Y', value: acceleration.value?.y },
+  { key: 'z', label: 'Z', value: acceleration.value?.z },
+]);
+
+const rotation = computed(() => [
+  { key: 'alpha', label: 'α', value: rotationRate.value?.alpha },
+  { key: 'beta', label: 'β', value: rotationRate.value?.beta },
+  { key: 'gamma', label: 'γ', value: rotationRate.value?.gamma },
+]);
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div v-if="!isSupported" class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-700 dark:text-amber-300">
+      DeviceMotionEvent is not supported in this browser.
+    </div>
+
+    <template v-else>
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+        <div class="flex items-center justify-between">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Device motion</span>
+          <span
+            class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+          >
+            <span class="size-1.5 rounded-full transition" :class="permissionGranted ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+            {{ permissionGranted ? 'Listening' : 'Idle' }}
+          </span>
+        </div>
+
+        <!-- Live magnitude gauge from acceleration incl. gravity (m/s²) -->
+        <div class="flex flex-col gap-1.5">
+          <div class="flex items-baseline justify-between">
+            <span class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">|a| incl. gravity</span>
+            <span class="font-mono text-sm tabular-nums text-(--fg-muted)">{{ magnitude.toFixed(2) }} m/s²</span>
+          </div>
+          <div class="h-2 overflow-hidden rounded-full bg-(--bg-inset)">
+            <div
+              class="h-full rounded-full bg-(--accent) transition-all duration-150"
+              :style="{ width: `${Math.min(magnitude / 20 * 100, 100)}%` }"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+        <span class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">Acceleration (m/s²)</span>
+        <div class="grid grid-cols-3 gap-2">
+          <div v-for="axis in axes" :key="axis.key" class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
+            <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">{{ axis.label }}</div>
+            <div class="font-mono text-base font-bold tabular-nums text-(--fg)">{{ fmt(axis.value) }}</div>
+          </div>
+        </div>
+
+        <span class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">Rotation rate (deg/s)</span>
+        <div class="grid grid-cols-3 gap-2">
+          <div v-for="r in rotation" :key="r.key" class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
+            <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">{{ r.label }}</div>
+            <div class="font-mono text-base font-bold tabular-nums text-(--fg)">{{ fmt(r.value) }}</div>
+          </div>
+        </div>
+
+        <div class="flex items-center justify-between text-xs">
+          <span class="text-(--fg-subtle)">Sampling interval</span>
+          <span class="font-mono tabular-nums text-(--fg-muted)">{{ interval ? `${interval} ms` : '—' }}</span>
+        </div>
+      </div>
+
+      <!-- iOS 13+ gates motion behind an explicit, gesture-triggered grant -->
+      <button
+        v-if="requirePermissions && !permissionGranted"
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="ensurePermissions"
+      >
+        Enable motion access
+      </button>
+      <p v-else class="text-xs text-(--fg-subtle)">
+        Move or tilt your device to see acceleration and rotation update in real time.
+      </p>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useDeviceMotion/index.test.ts b/vue/toolkit/src/composables/sensors/useDeviceMotion/index.test.ts
new file mode 100644
index 0000000..4bc5cdb
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useDeviceMotion/index.test.ts
@@ -0,0 +1,222 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { effectScope } from 'vue';
+import * as types from '@/types';
+import { useDeviceMotion } from '.';
+
+type Listener = (event: Event) => void;
+
+interface WindowStub {
+  DeviceMotionEvent?: unknown;
+  addEventListener: (type: string, cb: Listener, options?: unknown) => void;
+  removeEventListener: (type: string, cb: Listener) => void;
+  dispatch: (type: string, event: Event) => void;
+  listeners: Map<string, Set<Listener>>;
+}
+
+function makeWindowStub(options: { supported?: boolean; ios?: unknown } = {}): WindowStub {
+  const { supported = true, ios } = options;
+  const listeners = new Map<string, Set<Listener>>();
+
+  const stub: WindowStub = {
+    listeners,
+    addEventListener(type, cb) {
+      if (!listeners.has(type))
+        listeners.set(type, new Set());
+      listeners.get(type)!.add(cb);
+    },
+    removeEventListener(type, cb) {
+      listeners.get(type)?.delete(cb);
+    },
+    dispatch(type, event) {
+      for (const cb of listeners.get(type) ?? []) cb(event);
+    },
+  };
+
+  if (supported)
+    stub.DeviceMotionEvent = ios ?? function DeviceMotionEvent() {};
+
+  return stub;
+}
+
+function makeMotionEvent(): DeviceMotionEvent {
+  return {
+    acceleration: { x: 1, y: 2, z: 3 },
+    accelerationIncludingGravity: { x: 4, y: 5, z: 6 },
+    rotationRate: { alpha: 7, beta: 8, gamma: 9 },
+    interval: 16,
+  } as DeviceMotionEvent;
+}
+
+function runInScope<T>(fn: () => T): { result: T; scope: ReturnType<typeof effectScope> } {
+  const scope = effectScope();
+  let result!: T;
+  scope.run(() => {
+    result = fn();
+  });
+  return { result, scope };
+}
+
+describe(useDeviceMotion, () => {
+  afterEach(() => vi.unstubAllGlobals());
+
+  it('reports supported and initial values', () => {
+    const window = makeWindowStub();
+    const { result, scope } = runInScope(() => useDeviceMotion({ window: window as unknown as Window }));
+
+    expect(result.isSupported.value).toBeTruthy();
+    expect(result.requirePermissions.value).toBeFalsy();
+    expect(result.acceleration.value).toBeNull();
+    expect(result.accelerationIncludingGravity.value).toBeNull();
+    expect(result.rotationRate.value).toBeNull();
+    expect(result.interval.value).toBe(0);
+
+    scope.stop();
+  });
+
+  it('binds a passive devicemotion listener and updates on events', () => {
+    const window = makeWindowStub();
+    const { result, scope } = runInScope(() => useDeviceMotion({ window: window as unknown as Window }));
+
+    expect(window.listeners.get('devicemotion')?.size).toBe(1);
+
+    window.dispatch('devicemotion', makeMotionEvent());
+
+    expect(result.acceleration.value).toEqual({ x: 1, y: 2, z: 3 });
+    expect(result.accelerationIncludingGravity.value).toEqual({ x: 4, y: 5, z: 6 });
+    expect(result.rotationRate.value).toEqual({ alpha: 7, beta: 8, gamma: 9 });
+    expect(result.interval.value).toBe(16);
+
+    scope.stop();
+  });
+
+  it('removes the listener when the scope is disposed', () => {
+    const window = makeWindowStub();
+    const { result, scope } = runInScope(() => useDeviceMotion({ window: window as unknown as Window }));
+
+    expect(window.listeners.get('devicemotion')?.size).toBe(1);
+    scope.stop();
+    expect(window.listeners.get('devicemotion')?.size).toBe(0);
+
+    // Events after dispose must not mutate the refs.
+    window.dispatch('devicemotion', makeMotionEvent());
+    expect(result.acceleration.value).toBeNull();
+  });
+
+  it('applies the eventFilter so updates can be suppressed', () => {
+    const window = makeWindowStub();
+    const { result, scope } = runInScope(() =>
+      useDeviceMotion({ window: window as unknown as Window, eventFilter: () => {} }));
+
+    window.dispatch('devicemotion', makeMotionEvent());
+
+    // Filter never invokes the handler — values stay at their initial state.
+    expect(result.acceleration.value).toBeNull();
+    expect(result.interval.value).toBe(0);
+
+    scope.stop();
+  });
+
+  it('is a no-op and reports unsupported when no window/DeviceMotionEvent (SSR)', () => {
+    // `{ window: undefined }` re-applies the `defaultWindow` default (jsdom global),
+    // so the genuine SSR/unsupported path is exercised with a window lacking the API.
+    const window = makeWindowStub({ supported: false });
+    const { result, scope } = runInScope(() => useDeviceMotion({ window: window as unknown as Window }));
+
+    expect(result.isSupported.value).toBeFalsy();
+    expect(result.requirePermissions.value).toBeFalsy();
+    expect(result.acceleration.value).toBeNull();
+    expect(window.listeners.get('devicemotion')).toBeUndefined();
+    expect(() => result.ensurePermissions()).not.toThrow();
+
+    scope.stop();
+  });
+
+  it('is a no-op when defaultWindow is undefined (true SSR)', async () => {
+    vi.resetModules();
+    vi.doMock('@/types', () => ({ ...types, defaultWindow: undefined }));
+
+    const { useDeviceMotion: ssrUseDeviceMotion } = await import('.');
+    const { result, scope } = runInScope(() => ssrUseDeviceMotion());
+
+    expect(result.isSupported.value).toBeFalsy();
+    expect(result.requirePermissions.value).toBeFalsy();
+    expect(result.acceleration.value).toBeNull();
+    await expect(result.ensurePermissions()).resolves.toBeUndefined();
+
+    scope.stop();
+    vi.doUnmock('@/types');
+    vi.resetModules();
+  });
+
+  describe('iOS permission flow', () => {
+    function makeIosCtor(response: 'granted' | 'denied' | Error) {
+      const ctor = function DeviceMotionEvent() {} as unknown as { requestPermission: () => Promise<'granted' | 'denied'> };
+      ctor.requestPermission = vi.fn(() =>
+        response instanceof Error ? Promise.reject(response) : Promise.resolve(response));
+      return ctor;
+    }
+
+    it('defers binding until permission is granted', async () => {
+      const ctor = makeIosCtor('granted');
+      const window = makeWindowStub({ ios: ctor });
+      const { result, scope } = runInScope(() => useDeviceMotion({ window: window as unknown as Window }));
+
+      expect(result.requirePermissions.value).toBeTruthy();
+      // Not requested eagerly, nothing bound yet.
+      expect(window.listeners.get('devicemotion')).toBeUndefined();
+      expect(result.permissionGranted.value).toBeFalsy();
+
+      await result.ensurePermissions();
+
+      expect(ctor.requestPermission).toHaveBeenCalledTimes(1);
+      expect(result.permissionGranted.value).toBeTruthy();
+      expect(window.listeners.get('devicemotion')?.size).toBe(1);
+
+      scope.stop();
+    });
+
+    it('requests eagerly when requestPermissions is true', async () => {
+      const ctor = makeIosCtor('granted');
+      const window = makeWindowStub({ ios: ctor });
+      const { result, scope } = runInScope(() =>
+        useDeviceMotion({ window: window as unknown as Window, requestPermissions: true }));
+
+      // Microtask for the eager async request to settle.
+      await Promise.resolve();
+      await Promise.resolve();
+
+      expect(ctor.requestPermission).toHaveBeenCalled();
+      expect(result.permissionGranted.value).toBeTruthy();
+      expect(window.listeners.get('devicemotion')?.size).toBe(1);
+
+      scope.stop();
+    });
+
+    it('leaves the listener unbound when permission is denied', async () => {
+      const ctor = makeIosCtor('denied');
+      const window = makeWindowStub({ ios: ctor });
+      const { result, scope } = runInScope(() => useDeviceMotion({ window: window as unknown as Window }));
+
+      await result.ensurePermissions();
+
+      expect(result.permissionGranted.value).toBeFalsy();
+      expect(window.listeners.get('devicemotion')).toBeUndefined();
+
+      scope.stop();
+    });
+
+    it('routes a rejected request through onError without throwing', async () => {
+      const ctor = makeIosCtor(new Error('blocked'));
+      const window = makeWindowStub({ ios: ctor });
+      const onError = vi.fn();
+      const { result, scope } = runInScope(() =>
+        useDeviceMotion({ window: window as unknown as Window, onError }));
+
+      await expect(result.ensurePermissions()).resolves.toBeUndefined();
+      expect(onError).toHaveBeenCalledTimes(1);
+      expect(result.permissionGranted.value).toBeFalsy();
+
+      scope.stop();
+    });
+  });
+});
diff --git a/vue/toolkit/src/composables/sensors/useDeviceMotion/index.ts b/vue/toolkit/src/composables/sensors/useDeviceMotion/index.ts
new file mode 100644
index 0000000..cfdca55
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useDeviceMotion/index.ts
@@ -0,0 +1,189 @@
+import { shallowRef } from 'vue';
+import type { ComputedRef, ShallowRef } from 'vue';
+import { noop } from '@robonen/stdlib';
+import { defaultWindow } from '@/types';
+import type { ConfigurableWindow } from '@/types';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import { useSupported } from '@/composables/utilities/useSupported';
+import { bypassFilter, createFilterWrapper } from '@/utils/filters';
+import type { ConfigurableEventFilter } from '@/utils/filters';
+
+export interface UseDeviceMotionOptions extends ConfigurableWindow, ConfigurableEventFilter {
+  /**
+   * Eagerly request permission on iOS 13+ where `DeviceMotionEvent.requestPermission`
+   * gates access. When `false` you can call {@link UseDeviceMotionReturn.ensurePermissions}
+   * later from a user gesture (the spec requires a gesture).
+   *
+   * @default false
+   */
+  requestPermissions?: boolean;
+
+  /**
+   * Handler invoked when permission request rejects. Defaults to a no-op
+   * (the composable never writes to the console).
+   *
+   * @default noop
+   */
+  onError?: (error: unknown) => void;
+}
+
+export interface UseDeviceMotionReturn {
+  /**
+   * Whether the `DeviceMotionEvent` API is supported.
+   */
+  isSupported: ComputedRef<boolean>;
+
+  /**
+   * Whether an explicit permission grant is required (iOS 13+).
+   */
+  requirePermissions: ComputedRef<boolean>;
+
+  /**
+   * Whether motion permission has been granted.
+   */
+  permissionGranted: ShallowRef<boolean>;
+
+  /**
+   * Acceleration of the device on the three axes, excluding gravity (m/s²).
+   */
+  acceleration: ShallowRef<DeviceMotionEventAcceleration | null>;
+
+  /**
+   * Acceleration of the device on the three axes, including gravity (m/s²).
+   */
+  accelerationIncludingGravity: ShallowRef<DeviceMotionEventAcceleration | null>;
+
+  /**
+   * Rate of change of the device's orientation on the three axes (deg/s).
+   */
+  rotationRate: ShallowRef<DeviceMotionEventRotationRate | null>;
+
+  /**
+   * Interval, in ms, at which data is obtained from the underlying hardware.
+   */
+  interval: ShallowRef<number>;
+
+  /**
+   * Request motion permission (iOS 13+). Must be triggered by a user gesture.
+   * Resolves once the request settles; on grant the listener is attached.
+   */
+  ensurePermissions: () => Promise<void>;
+}
+
+interface DeviceMotionEventIos {
+  requestPermission: () => Promise<'granted' | 'denied'>;
+}
+
+/**
+ * @name useDeviceMotion
+ * @category Sensors
+ * @description Reactive `DeviceMotionEvent` exposing acceleration (with and
+ * without gravity), rotation rate, and the hardware sampling interval. SSR-safe,
+ * uses a single passive listener, and supports the iOS 13+ permission flow.
+ *
+ * @param {UseDeviceMotionOptions} [options={}] Options
+ * @returns {UseDeviceMotionReturn} Reactive motion data plus support/permission state
+ *
+ * @example
+ * const { acceleration, rotationRate, interval } = useDeviceMotion();
+ *
+ * @example
+ * // iOS 13+: request permission from a user gesture, throttle updates
+ * const { ensurePermissions, acceleration } = useDeviceMotion({ eventFilter: throttleFilter(100) });
+ * button.addEventListener('click', ensurePermissions);
+ *
+ * @since 0.0.15
+ */
+export function useDeviceMotion(options: UseDeviceMotionOptions = {}): UseDeviceMotionReturn {
+  const {
+    window = defaultWindow,
+    requestPermissions = false,
+    eventFilter = bypassFilter,
+    onError = noop,
+  } = options;
+
+  // `DeviceMotionEvent` is a global constructor on `typeof globalThis`, not the `Window` interface.
+  const globalWindow = window as (Window & typeof globalThis) | undefined;
+
+  const isSupported = useSupported(() => !!window && 'DeviceMotionEvent' in window);
+  const requirePermissions = useSupported(() =>
+    isSupported.value
+    && !!window
+    && typeof (globalWindow?.DeviceMotionEvent as unknown as DeviceMotionEventIos | undefined)?.requestPermission === 'function');
+
+  const permissionGranted = shallowRef(false);
+  const acceleration = shallowRef<DeviceMotionEventAcceleration | null>(null);
+  const accelerationIncludingGravity = shallowRef<DeviceMotionEventAcceleration | null>(null);
+  const rotationRate = shallowRef<DeviceMotionEventRotationRate | null>(null);
+  const interval = shallowRef(0);
+
+  // Replace whole objects each event (shallowRef) rather than mutating in place,
+  // so consumers get a single reactive trigger and no deep-watch overhead.
+  const onDeviceMotion = createFilterWrapper(eventFilter, (event: DeviceMotionEvent) => {
+    acceleration.value = event.acceleration;
+    accelerationIncludingGravity.value = event.accelerationIncludingGravity;
+    rotationRate.value = event.rotationRate;
+    interval.value = event.interval;
+  });
+
+  let bound = false;
+  function bind(): void {
+    if (bound || !window)
+      return;
+
+    bound = true;
+    useEventListener(window, 'devicemotion', onDeviceMotion as unknown as (e: Event) => void, { passive: true });
+  }
+
+  const ensurePermissions = async (): Promise<void> => {
+    if (!isSupported.value)
+      return;
+
+    if (!requirePermissions.value) {
+      permissionGranted.value = true;
+      bind();
+      return;
+    }
+
+    if (permissionGranted.value)
+      return;
+
+    const requestPermission = (globalWindow!.DeviceMotionEvent as unknown as DeviceMotionEventIos).requestPermission;
+
+    try {
+      const response = await requestPermission();
+
+      if (response === 'granted') {
+        permissionGranted.value = true;
+        bind();
+      }
+    }
+    catch (error) {
+      onError(error);
+    }
+  };
+
+  if (isSupported.value) {
+    // When a gesture-gated permission is required, defer binding until granted;
+    // requestPermissions opts into requesting eagerly (caller must be in a gesture).
+    if (requirePermissions.value) {
+      if (requestPermissions)
+        ensurePermissions();
+    }
+    else {
+      permissionGranted.value = true;
+      bind();
+    }
+  }
+
+  return {
+    isSupported,
+    requirePermissions,
+    permissionGranted,
+    acceleration,
+    accelerationIncludingGravity,
+    rotationRate,
+    interval,
+    ensurePermissions,
+  };
+}
diff --git a/vue/toolkit/src/composables/sensors/useDeviceOrientation/demo.vue b/vue/toolkit/src/composables/sensors/useDeviceOrientation/demo.vue
new file mode 100644
index 0000000..5fad36d
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useDeviceOrientation/demo.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useDeviceOrientation } from './index';
+
+const { isSupported, isAbsolute, alpha, beta, gamma } = useDeviceOrientation();
+
+function fmt(value: number | null): string {
+  return value == null ? '—' : `${value.toFixed(1)}°`;
+}
+
+// Drive a compass needle from alpha (rotation around the z axis).
+const compassRotation = computed(() => (alpha.value == null ? 0 : -alpha.value));
+
+// Tilt a card in 3D using beta (front-back) and gamma (left-right).
+const tiltStyle = computed(() => ({
+  transform: `perspective(600px) rotateX(${(beta.value ?? 0) * 0.4}deg) rotateY(${(gamma.value ?? 0) * 0.4}deg)`,
+}));
+
+const angles = computed(() => [
+  { key: 'alpha', label: 'α · z-axis', value: alpha.value },
+  { key: 'beta', label: 'β · x-axis', value: beta.value },
+  { key: 'gamma', label: 'γ · y-axis', value: gamma.value },
+]);
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div v-if="!isSupported" class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-700 dark:text-amber-300">
+      DeviceOrientationEvent is not supported in this browser.
+    </div>
+
+    <template v-else>
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col items-center gap-4">
+        <div class="flex w-full items-center justify-between">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Device orientation</span>
+          <span
+            class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+          >
+            <span class="size-1.5 rounded-full transition" :class="isAbsolute ? 'bg-emerald-500' : 'bg-sky-500'" />
+            {{ isAbsolute ? 'Absolute' : 'Relative' }}
+          </span>
+        </div>
+
+        <!-- Compass face + needle driven by alpha; card tilts via beta/gamma -->
+        <div
+          class="relative flex size-40 items-center justify-center rounded-full border-2 border-(--border-strong) bg-(--bg-inset)"
+          :style="tiltStyle"
+        >
+          <span class="absolute top-1 text-[10px] font-bold text-(--fg-muted)">N</span>
+          <span class="absolute bottom-1 text-[10px] text-(--fg-subtle)">S</span>
+          <span class="absolute left-1.5 text-[10px] text-(--fg-subtle)">W</span>
+          <span class="absolute right-1.5 text-[10px] text-(--fg-subtle)">E</span>
+          <div
+            class="h-16 w-1 origin-bottom rounded-full bg-(--accent) transition-transform duration-150"
+            :style="{ transform: `rotate(${compassRotation}deg)` }"
+          />
+          <div class="absolute size-2 rounded-full bg-(--border-strong)" />
+        </div>
+      </div>
+
+      <div class="grid grid-cols-3 gap-2">
+        <div v-for="angle in angles" :key="angle.key" class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
+          <div class="font-mono text-base font-bold tabular-nums text-(--fg)">{{ fmt(angle.value) }}</div>
+          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">{{ angle.label }}</div>
+        </div>
+      </div>
+
+      <p class="text-xs text-(--fg-subtle)">
+        Tilt and rotate your device to move the compass needle and tilt the dial. Best viewed on a phone.
+      </p>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useDeviceOrientation/index.test.ts b/vue/toolkit/src/composables/sensors/useDeviceOrientation/index.test.ts
new file mode 100644
index 0000000..6732a11
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useDeviceOrientation/index.test.ts
@@ -0,0 +1,132 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope } from 'vue';
+import { useDeviceOrientation } from '.';
+
+interface OrientationStub {
+  absolute?: boolean;
+  alpha?: number | null;
+  beta?: number | null;
+  gamma?: number | null;
+}
+
+function dispatchOrientation(target: Window, data: OrientationStub): void {
+  const event = Object.assign(new Event('deviceorientation'), data);
+  target.dispatchEvent(event);
+}
+
+describe(useDeviceOrientation, () => {
+  beforeEach(() => {
+    // Ensure feature detection passes on the real jsdom window.
+    if (!('DeviceOrientationEvent' in globalThis))
+      vi.stubGlobal('DeviceOrientationEvent', class {});
+  });
+  afterEach(() => vi.unstubAllGlobals());
+
+  it('reports supported and initial values', () => {
+    const scope = effectScope();
+    let result: ReturnType<typeof useDeviceOrientation>;
+    scope.run(() => {
+      result = useDeviceOrientation();
+    });
+
+    expect(result!.isSupported.value).toBeTruthy();
+    expect(result!.isAbsolute.value).toBeFalsy();
+    expect(result!.alpha.value).toBeNull();
+    expect(result!.beta.value).toBeNull();
+    expect(result!.gamma.value).toBeNull();
+    scope.stop();
+  });
+
+  it('updates reactive values when a deviceorientation event fires', () => {
+    const scope = effectScope();
+    let result: ReturnType<typeof useDeviceOrientation>;
+    scope.run(() => {
+      result = useDeviceOrientation();
+    });
+
+    dispatchOrientation(globalThis as unknown as Window, { absolute: true, alpha: 30, beta: 60, gamma: -45 });
+
+    expect(result!.isAbsolute.value).toBeTruthy();
+    expect(result!.alpha.value).toBe(30);
+    expect(result!.beta.value).toBe(60);
+    expect(result!.gamma.value).toBe(-45);
+    scope.stop();
+  });
+
+  it('reflects subsequent events', () => {
+    const scope = effectScope();
+    let result: ReturnType<typeof useDeviceOrientation>;
+    scope.run(() => {
+      result = useDeviceOrientation();
+    });
+
+    dispatchOrientation(globalThis as unknown as Window, { absolute: true, alpha: 30, beta: 60, gamma: -45 });
+    dispatchOrientation(globalThis as unknown as Window, { absolute: false, alpha: 90, beta: 0, gamma: 10 });
+
+    expect(result!.isAbsolute.value).toBeFalsy();
+    expect(result!.alpha.value).toBe(90);
+    expect(result!.beta.value).toBe(0);
+    expect(result!.gamma.value).toBe(10);
+    scope.stop();
+  });
+
+  it('registers the listener with a passive option', () => {
+    const target = {
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    } as unknown as Window;
+
+    const scope = effectScope();
+    scope.run(() => {
+      useDeviceOrientation({ window: target });
+    });
+
+    expect(target.addEventListener).toHaveBeenCalledWith(
+      'deviceorientation',
+      expect.any(Function),
+      expect.objectContaining({ passive: true }),
+    );
+    scope.stop();
+  });
+
+  it('stops listening when the scope is disposed', () => {
+    const target = {
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    } as unknown as Window;
+
+    const scope = effectScope();
+    scope.run(() => {
+      useDeviceOrientation({ window: target });
+    });
+    scope.stop();
+
+    expect(target.removeEventListener).toHaveBeenCalledWith(
+      'deviceorientation',
+      expect.any(Function),
+      expect.objectContaining({ passive: true }),
+    );
+  });
+
+  it('reports unsupported and stays inert when DeviceOrientationEvent is missing on the provided window (SSR / unsupported path)', () => {
+    // A window-like object without `DeviceOrientationEvent` models both an
+    // unsupported browser and the SSR fallback (defaultWindow === undefined
+    // is import-time captured and cannot be re-stubbed here).
+    const target = {
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    } as unknown as Window;
+
+    const scope = effectScope();
+    let result: ReturnType<typeof useDeviceOrientation>;
+    scope.run(() => {
+      result = useDeviceOrientation({ window: target });
+    });
+
+    expect(result!.isSupported.value).toBeFalsy();
+    expect(result!.alpha.value).toBeNull();
+    expect(result!.beta.value).toBeNull();
+    expect(result!.gamma.value).toBeNull();
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/sensors/useDeviceOrientation/index.ts b/vue/toolkit/src/composables/sensors/useDeviceOrientation/index.ts
new file mode 100644
index 0000000..2a36f4b
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useDeviceOrientation/index.ts
@@ -0,0 +1,81 @@
+import { shallowRef } from 'vue';
+import type { ComputedRef, ShallowRef } from 'vue';
+import { defaultWindow } from '@/types';
+import type { ConfigurableWindow } from '@/types';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import { useSupported } from '@/composables/utilities/useSupported';
+
+export interface UseDeviceOrientationOptions extends ConfigurableWindow {}
+
+export interface UseDeviceOrientationReturn {
+  /**
+   * Whether the `DeviceOrientationEvent` is supported in the current environment.
+   */
+  isSupported: ComputedRef<boolean>;
+
+  /**
+   * Whether the device is providing orientation data absolutely (relative to
+   * Earth's coordinate frame) rather than relative to an arbitrary frame.
+   */
+  isAbsolute: ShallowRef<boolean>;
+
+  /**
+   * Motion of the device around the z axis, in degrees (`0`–`360`), or `null`
+   * when unavailable.
+   */
+  alpha: ShallowRef<number | null>;
+
+  /**
+   * Motion of the device around the x axis, in degrees (`-180`–`180`), or `null`
+   * when unavailable.
+   */
+  beta: ShallowRef<number | null>;
+
+  /**
+   * Motion of the device around the y axis, in degrees (`-90`–`90`), or `null`
+   * when unavailable.
+   */
+  gamma: ShallowRef<number | null>;
+}
+
+/**
+ * @name useDeviceOrientation
+ * @category Sensors
+ * @description Reactive [`DeviceOrientationEvent`](https://developer.mozilla.org/en-US/docs/Web/API/DeviceOrientationEvent).
+ * Provides physical orientation of the device relative to Earth's coordinate frame.
+ *
+ * @param {UseDeviceOrientationOptions} [options={}] Options
+ * @returns {UseDeviceOrientationReturn} `isSupported`, `isAbsolute`, and the `alpha`/`beta`/`gamma` angles
+ *
+ * @example
+ * const { isSupported, isAbsolute, alpha, beta, gamma } = useDeviceOrientation();
+ *
+ * @since 0.0.15
+ */
+export function useDeviceOrientation(options: UseDeviceOrientationOptions = {}): UseDeviceOrientationReturn {
+  const { window = defaultWindow } = options;
+
+  const isSupported = useSupported(() => !!window && 'DeviceOrientationEvent' in window);
+
+  const isAbsolute = shallowRef(false);
+  const alpha = shallowRef<number | null>(null);
+  const beta = shallowRef<number | null>(null);
+  const gamma = shallowRef<number | null>(null);
+
+  if (window) {
+    useEventListener(window, 'deviceorientation', (event: DeviceOrientationEvent) => {
+      isAbsolute.value = event.absolute;
+      alpha.value = event.alpha;
+      beta.value = event.beta;
+      gamma.value = event.gamma;
+    }, { passive: true });
+  }
+
+  return {
+    isSupported,
+    isAbsolute,
+    alpha,
+    beta,
+    gamma,
+  };
+}
diff --git a/vue/toolkit/src/composables/sensors/useDevicePixelRatio/demo.vue b/vue/toolkit/src/composables/sensors/useDevicePixelRatio/demo.vue
new file mode 100644
index 0000000..eb2612d
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useDevicePixelRatio/demo.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useDevicePixelRatio } from './index';
+
+const { pixelRatio } = useDevicePixelRatio();
+
+// A DPR > 1 means the display packs more physical pixels per CSS pixel
+// (Retina / HiDPI), which also flips on browser zoom.
+const classification = computed(() => {
+  if (pixelRatio.value >= 3) return 'Ultra HiDPI';
+  if (pixelRatio.value >= 2) return 'Retina / HiDPI';
+  if (pixelRatio.value > 1) return 'Scaled';
+  return 'Standard';
+});
+
+// One CSS pixel maps to dpr² physical pixels across both axes.
+const physicalPerCss = computed(() => (pixelRatio.value ** 2).toFixed(2));
+const ratioLabel = computed(() => `${pixelRatio.value} dppx`);
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Device Pixel Ratio</span>
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+          <span class="size-1.5 rounded-full bg-(--accent)" />
+          {{ classification }}
+        </span>
+      </div>
+
+      <div class="flex items-end gap-2">
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ pixelRatio }}</span>
+        <span class="pb-1 text-sm text-(--fg-subtle)">{{ ratioLabel }}</span>
+      </div>
+
+      <!-- Visualise how a single CSS pixel maps onto a grid of physical pixels -->
+      <div class="flex items-center gap-3">
+        <div
+          class="grid flex-shrink-0 gap-px rounded-md border border-(--border-strong) bg-(--bg-inset) p-1 transition-all"
+          :style="{
+            gridTemplateColumns: `repeat(${Math.max(1, Math.round(pixelRatio))}, 0.75rem)`,
+            gridTemplateRows: `repeat(${Math.max(1, Math.round(pixelRatio))}, 0.75rem)`,
+          }"
+        >
+          <span
+            v-for="n in Math.max(1, Math.round(pixelRatio)) ** 2"
+            :key="n"
+            class="size-3 rounded-[3px] bg-(--accent)/80"
+          />
+        </div>
+        <p class="text-xs text-(--fg-muted)">
+          1 CSS pixel is rendered with about
+          <span class="font-mono font-semibold text-(--fg)">{{ physicalPerCss }}</span>
+          physical pixels.
+        </p>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Zoom the page (Cmd/Ctrl + and -) or drag this window to a monitor with a different scale to watch the ratio update live.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useDevicePixelRatio/index.test.ts b/vue/toolkit/src/composables/sensors/useDevicePixelRatio/index.test.ts
new file mode 100644
index 0000000..ca58d97
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useDevicePixelRatio/index.test.ts
@@ -0,0 +1,164 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, isReadonly, nextTick } from 'vue';
+import { useDevicePixelRatio } from '.';
+
+type Listener = (event: { matches: boolean }) => void;
+
+interface StubMql {
+  readonly matches: boolean;
+  media: string;
+  addEventListener: (type: string, cb: Listener) => void;
+  removeEventListener: (type: string, cb: Listener) => void;
+  dispatch: (value: boolean) => void;
+}
+
+function makeMql(media = ''): StubMql {
+  const listeners = new Set<Listener>();
+  let matches = true;
+
+  return {
+    get matches() {
+      return matches;
+    },
+    media,
+    addEventListener: (_: string, cb: Listener) => listeners.add(cb),
+    removeEventListener: (_: string, cb: Listener) => listeners.delete(cb),
+    dispatch(value: boolean) {
+      matches = value;
+      for (const cb of listeners) cb({ matches: value });
+    },
+  };
+}
+
+/** Returns one MediaQueryList per query string so re-binding can be exercised. */
+function stubMatchMediaByQuery() {
+  const map = new Map<string, StubMql>();
+  const spy = vi.fn((query: string) => {
+    if (!map.has(query))
+      map.set(query, makeMql(query));
+    return map.get(query)!;
+  });
+  vi.stubGlobal('matchMedia', spy);
+  return { spy, map };
+}
+
+/** A minimal window stub whose `devicePixelRatio` can be mutated in tests. */
+function makeWindowStub(initialRatio: number): Window & { devicePixelRatio: number } {
+  return {
+    devicePixelRatio: initialRatio,
+    matchMedia: globalThis.matchMedia,
+  } as unknown as Window & { devicePixelRatio: number };
+}
+
+describe(useDevicePixelRatio, () => {
+  beforeEach(() => {
+    vi.stubGlobal('matchMedia', undefined);
+  });
+  afterEach(() => vi.unstubAllGlobals());
+
+  it('reflects the initial devicePixelRatio', async () => {
+    stubMatchMediaByQuery();
+    const window = makeWindowStub(2);
+    const scope = effectScope();
+    let result: ReturnType<typeof useDevicePixelRatio>;
+    scope.run(() => {
+      result = useDevicePixelRatio({ window });
+    });
+    await nextTick();
+    expect(result!.pixelRatio.value).toBe(2);
+    scope.stop();
+  });
+
+  it('returns a readonly ref', async () => {
+    stubMatchMediaByQuery();
+    const window = makeWindowStub(1);
+    const scope = effectScope();
+    let result: ReturnType<typeof useDevicePixelRatio>;
+    scope.run(() => {
+      result = useDevicePixelRatio({ window });
+    });
+    await nextTick();
+    expect(isReadonly(result!.pixelRatio)).toBeTruthy();
+    scope.stop();
+  });
+
+  it('updates when the resolution media query flips', async () => {
+    const { map } = stubMatchMediaByQuery();
+    const window = makeWindowStub(1);
+    const scope = effectScope();
+    let result: ReturnType<typeof useDevicePixelRatio>;
+    scope.run(() => {
+      result = useDevicePixelRatio({ window });
+    });
+    await nextTick();
+    expect(result!.pixelRatio.value).toBe(1);
+
+    // Simulate a zoom: the real ratio changes, then the current query flips.
+    window.devicePixelRatio = 2;
+    map.get('(resolution: 1dppx)')!.dispatch(false);
+    await nextTick();
+    expect(result!.pixelRatio.value).toBe(2);
+
+    scope.stop();
+  });
+
+  it('re-binds the listener after the ratio changes', async () => {
+    const { spy, map } = stubMatchMediaByQuery();
+    const window = makeWindowStub(1);
+    const scope = effectScope();
+    let result: ReturnType<typeof useDevicePixelRatio>;
+    scope.run(() => {
+      result = useDevicePixelRatio({ window });
+    });
+    await nextTick();
+
+    window.devicePixelRatio = 3;
+    map.get('(resolution: 1dppx)')!.dispatch(false);
+    await nextTick();
+    expect(result!.pixelRatio.value).toBe(3);
+
+    // The query string should now track 3dppx (new MediaQueryList created).
+    expect(spy).toHaveBeenCalledWith('(resolution: 3dppx)');
+
+    // Further changes are driven by the new MediaQueryList.
+    window.devicePixelRatio = 1.5;
+    map.get('(resolution: 3dppx)')!.dispatch(false);
+    await nextTick();
+    expect(result!.pixelRatio.value).toBe(1.5);
+
+    scope.stop();
+  });
+
+  it('stops tracking after stop()', async () => {
+    const { map } = stubMatchMediaByQuery();
+    const window = makeWindowStub(1);
+    const scope = effectScope();
+    let result: ReturnType<typeof useDevicePixelRatio>;
+    scope.run(() => {
+      result = useDevicePixelRatio({ window });
+    });
+    await nextTick();
+
+    result!.stop();
+
+    window.devicePixelRatio = 2;
+    map.get('(resolution: 1dppx)')!.dispatch(false);
+    await nextTick();
+    expect(result!.pixelRatio.value).toBe(1);
+
+    scope.stop();
+  });
+
+  it('defaults to 1 with a no-op stop when no window is available (SSR)', async () => {
+    const scope = effectScope();
+    let result: ReturnType<typeof useDevicePixelRatio>;
+    scope.run(() => {
+      result = useDevicePixelRatio({ window: undefined });
+    });
+    await nextTick();
+    expect(result!.pixelRatio.value).toBe(1);
+    // stop() must be safe to call even when nothing was bound.
+    expect(() => result!.stop()).not.toThrow();
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/sensors/useDevicePixelRatio/index.ts b/vue/toolkit/src/composables/sensors/useDevicePixelRatio/index.ts
new file mode 100644
index 0000000..e925aee
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useDevicePixelRatio/index.ts
@@ -0,0 +1,63 @@
+import { noop } from '@robonen/stdlib';
+import { shallowReadonly, shallowRef, watch } from 'vue';
+import type { ShallowRef, WatchStopHandle } from 'vue';
+import { defaultWindow } from '@/types';
+import type { ConfigurableWindow } from '@/types';
+import { useMediaQuery } from '@/composables/browser/useMediaQuery';
+
+export interface UseDevicePixelRatioOptions extends ConfigurableWindow {}
+
+export interface UseDevicePixelRatioReturn {
+  /**
+   * Reactive, readonly `window.devicePixelRatio`. Defaults to `1` on the
+   * server / when no window is available.
+   */
+  pixelRatio: Readonly<ShallowRef<number>>;
+  /**
+   * Stop tracking the device pixel ratio. Idempotent and a no-op on SSR.
+   */
+  stop: WatchStopHandle;
+}
+
+/**
+ * @name useDevicePixelRatio
+ * @category Sensors
+ * @description Reactively track `window.devicePixelRatio`, updated via a
+ * `matchMedia(resolution)` listener (fires on zoom and on monitor changes).
+ *
+ * @param {UseDevicePixelRatioOptions} [options={}] Options (custom `window`)
+ * @returns {UseDevicePixelRatioReturn} `{ pixelRatio, stop }`
+ *
+ * @example
+ * const { pixelRatio } = useDevicePixelRatio();
+ *
+ * @since 0.0.15
+ */
+export function useDevicePixelRatio(options: UseDevicePixelRatioOptions = {}): UseDevicePixelRatioReturn {
+  const { window = defaultWindow } = options;
+
+  const pixelRatio = shallowRef(1);
+
+  // `devicePixelRatio` has no `change` event; the canonical trick is to watch a
+  // `(resolution: Ndppx)` media query whose threshold tracks the current ratio.
+  // When the real ratio crosses that threshold the query flips, re-evaluating
+  // the reactive query string and re-binding to a fresh MediaQueryList.
+  const query = useMediaQuery(() => `(resolution: ${pixelRatio.value}dppx)`, options);
+
+  let stop: WatchStopHandle = noop;
+
+  if (window) {
+    stop = watch(
+      query,
+      () => {
+        pixelRatio.value = window.devicePixelRatio;
+      },
+      { immediate: true },
+    );
+  }
+
+  return {
+    pixelRatio: shallowReadonly(pixelRatio),
+    stop,
+  };
+}
diff --git a/vue/toolkit/src/composables/sensors/useDevicesList/demo.vue b/vue/toolkit/src/composables/sensors/useDevicesList/demo.vue
new file mode 100644
index 0000000..929495e
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useDevicesList/demo.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useDevicesList } from './index';
+
+const {
+  isSupported,
+  videoInputs,
+  audioInputs,
+  audioOutputs,
+  permissionGranted,
+  ensurePermissions,
+} = useDevicesList();
+
+const requesting = ref(false);
+
+async function grant(): Promise<void> {
+  requesting.value = true;
+  try {
+    await ensurePermissions();
+  }
+  finally {
+    requesting.value = false;
+  }
+}
+
+interface Group {
+  key: string;
+  label: string;
+  icon: string;
+  devices: typeof videoInputs.value;
+}
+
+const groups = computed<Group[]>(() => [
+  { key: 'video', label: 'Cameras', icon: 'M', devices: videoInputs.value },
+  { key: 'audioin', label: 'Microphones', icon: 'A', devices: audioInputs.value },
+  { key: 'audioout', label: 'Speakers', icon: 'S', devices: audioOutputs.value },
+]);
+
+const total = computed(() =>
+  videoInputs.value.length + audioInputs.value.length + audioOutputs.value.length);
+
+function deviceLabel(device: MediaDeviceInfo, index: number, kind: string): string {
+  return device.label || `${kind} ${index + 1}`;
+}
+</script>
+
+<template>
+  <div class="w-full max-w-md flex flex-col gap-4">
+    <div
+      v-if="!isSupported"
+      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-700 dark:text-amber-300"
+    >
+      The MediaDevices API is not supported in this browser.
+    </div>
+
+    <template v-else>
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+        <div class="flex items-center justify-between">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Media Devices</span>
+          <span
+            class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium"
+            :class="permissionGranted ? 'text-emerald-600 dark:text-emerald-400' : 'text-(--fg-muted)'"
+          >
+            <span
+              class="size-1.5 rounded-full"
+              :class="permissionGranted ? 'bg-emerald-500' : 'bg-(--fg-subtle)'"
+            />
+            {{ permissionGranted ? 'Labels unlocked' : `${total} found` }}
+          </span>
+        </div>
+
+        <div class="flex flex-col gap-3">
+          <div v-for="group in groups" :key="group.key" class="flex flex-col gap-1.5">
+            <div class="flex items-center justify-between">
+              <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">{{ group.label }}</span>
+              <span class="font-mono text-xs tabular-nums text-(--fg-muted)">{{ group.devices.length }}</span>
+            </div>
+
+            <p v-if="group.devices.length === 0" class="px-1 py-1 text-xs text-(--fg-subtle)">
+              None detected
+            </p>
+
+            <ul v-else class="flex flex-col gap-1">
+              <li
+                v-for="(device, index) in group.devices"
+                :key="device.deviceId || index"
+                class="flex items-center gap-2 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2 text-sm text-(--fg)"
+              >
+                <span class="grid size-6 flex-shrink-0 place-items-center rounded-md bg-(--accent-subtle) font-mono text-xs font-bold text-(--accent-text)">
+                  {{ group.icon }}
+                </span>
+                <span class="truncate">{{ deviceLabel(device, index, group.label) }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="permissionGranted || requesting"
+        @click="grant"
+      >
+        {{ permissionGranted ? 'Permission granted' : requesting ? 'Requesting…' : 'Grant access to reveal names' }}
+      </button>
+
+      <p class="text-xs text-(--fg-subtle)">
+        Without permission, device names are hidden. Plug in or remove a device to watch the list re-enumerate automatically.
+      </p>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useDevicesList/index.test.ts b/vue/toolkit/src/composables/sensors/useDevicesList/index.test.ts
new file mode 100644
index 0000000..81bc29e
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useDevicesList/index.test.ts
@@ -0,0 +1,285 @@
+import { describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick } from 'vue';
+import type { UseDevicesListReturn } from '.';
+import { useDevicesList } from '.';
+
+function device(kind: MediaDeviceKind, id: string, label = ''): MediaDeviceInfo {
+  return {
+    deviceId: id,
+    kind,
+    label,
+    groupId: 'group',
+    toJSON: () => ({}),
+  } as MediaDeviceInfo;
+}
+
+function stubMediaDevices(initial: MediaDeviceInfo[] = []) {
+  let list = initial;
+  let changeHandler: ((ev: Event) => any) | undefined;
+
+  const enumerateDevices = vi.fn(async () => list);
+  const track = { stop: vi.fn() };
+  const getUserMedia = vi.fn(async () => ({
+    getTracks: () => [track],
+  } as unknown as MediaStream));
+
+  const mediaDevices = {
+    enumerateDevices,
+    getUserMedia,
+    addEventListener: vi.fn((_: string, handler: any) => { changeHandler = handler; }),
+    removeEventListener: vi.fn(() => { changeHandler = undefined; }),
+  };
+
+  const navigator = { mediaDevices } as unknown as Navigator;
+
+  return {
+    navigator,
+    enumerateDevices,
+    getUserMedia,
+    track,
+    setDevices: (next: MediaDeviceInfo[]) => { list = next; },
+    emitChange: () => changeHandler?.(new Event('devicechange')),
+    getChangeHandler: () => changeHandler,
+  };
+}
+
+describe(useDevicesList, () => {
+  it('reports unsupported when mediaDevices is missing', () => {
+    const navigator = {} as Navigator;
+    const scope = effectScope();
+    let result: UseDevicesListReturn;
+    scope.run(() => {
+      result = useDevicesList({ navigator });
+    });
+
+    expect(result!.isSupported.value).toBeFalsy();
+    expect(result!.devices.value).toEqual([]);
+    scope.stop();
+  });
+
+  it('handles the SSR path (no navigator) gracefully', async () => {
+    const scope = effectScope();
+    let result: UseDevicesListReturn;
+    scope.run(() => {
+      result = useDevicesList({ navigator: undefined });
+    });
+
+    expect(result!.isSupported.value).toBeFalsy();
+    await expect(result!.ensurePermissions()).resolves.toBeFalsy();
+    scope.stop();
+  });
+
+  it('enumerates devices on init', async () => {
+    const { navigator, enumerateDevices } = stubMediaDevices([
+      device('videoinput', 'cam1'),
+      device('audioinput', 'mic1'),
+    ]);
+    const scope = effectScope();
+    let result: UseDevicesListReturn;
+    scope.run(() => {
+      result = useDevicesList({ navigator });
+    });
+
+    expect(result!.isSupported.value).toBeTruthy();
+    await vi.waitFor(() => expect(result!.devices.value).toHaveLength(2));
+    expect(enumerateDevices).toHaveBeenCalled();
+    scope.stop();
+  });
+
+  it('filters devices by kind', async () => {
+    const { navigator } = stubMediaDevices([
+      device('videoinput', 'cam1'),
+      device('videoinput', 'cam2'),
+      device('audioinput', 'mic1'),
+      device('audiooutput', 'spk1'),
+    ]);
+    const scope = effectScope();
+    let result: UseDevicesListReturn;
+    scope.run(() => {
+      result = useDevicesList({ navigator });
+    });
+
+    await vi.waitFor(() => expect(result!.devices.value).toHaveLength(4));
+    expect(result!.videoInputs.value).toHaveLength(2);
+    expect(result!.audioInputs.value).toHaveLength(1);
+    expect(result!.audioOutputs.value).toHaveLength(1);
+    scope.stop();
+  });
+
+  it('calls onUpdated with the device list', async () => {
+    const onUpdated = vi.fn();
+    const { navigator } = stubMediaDevices([device('videoinput', 'cam1')]);
+    const scope = effectScope();
+    scope.run(() => {
+      useDevicesList({ navigator, onUpdated });
+    });
+
+    await vi.waitFor(() => expect(onUpdated).toHaveBeenCalled());
+    expect(onUpdated).toHaveBeenCalledWith([expect.objectContaining({ deviceId: 'cam1' })]);
+    scope.stop();
+  });
+
+  it('re-enumerates on devicechange', async () => {
+    const stub = stubMediaDevices([device('videoinput', 'cam1')]);
+    const scope = effectScope();
+    let result: UseDevicesListReturn;
+    scope.run(() => {
+      result = useDevicesList({ navigator: stub.navigator });
+    });
+
+    await vi.waitFor(() => expect(result!.devices.value).toHaveLength(1));
+
+    stub.setDevices([device('videoinput', 'cam1'), device('audioinput', 'mic1')]);
+    stub.emitChange();
+
+    await vi.waitFor(() => expect(result!.devices.value).toHaveLength(2));
+    scope.stop();
+  });
+
+  it('registers the devicechange listener passively', () => {
+    const { navigator } = stubMediaDevices();
+    const scope = effectScope();
+    scope.run(() => {
+      useDevicesList({ navigator });
+    });
+
+    expect((navigator.mediaDevices.addEventListener as any)).toHaveBeenCalledWith(
+      'devicechange',
+      expect.any(Function),
+      { passive: true },
+    );
+    scope.stop();
+  });
+
+  it('removes the listener on scope dispose', () => {
+    const { navigator } = stubMediaDevices();
+    const scope = effectScope();
+    scope.run(() => {
+      useDevicesList({ navigator });
+    });
+    scope.stop();
+
+    expect((navigator.mediaDevices.removeEventListener as any)).toHaveBeenCalledWith(
+      'devicechange',
+      expect.any(Function),
+      { passive: true },
+    );
+  });
+
+  it('ensurePermissions requests getUserMedia and grants permission', async () => {
+    const { navigator, getUserMedia, track } = stubMediaDevices([
+      device('videoinput', 'cam1'),
+      device('audioinput', 'mic1'),
+    ]);
+    const scope = effectScope();
+    let result: UseDevicesListReturn;
+    scope.run(() => {
+      result = useDevicesList({ navigator });
+    });
+
+    const granted = await result!.ensurePermissions();
+    expect(granted).toBeTruthy();
+    expect(result!.permissionGranted.value).toBeTruthy();
+    expect(getUserMedia).toHaveBeenCalledWith({ video: true, audio: true });
+    // The temporary stream tracks are released after the prompt.
+    expect(track.stop).toHaveBeenCalled();
+    scope.stop();
+  });
+
+  it('narrows constraints when a device kind is absent', async () => {
+    // Only a microphone present -> video constraint must be dropped.
+    const { navigator, getUserMedia } = stubMediaDevices([device('audioinput', 'mic1')]);
+    const scope = effectScope();
+    let result: UseDevicesListReturn;
+    scope.run(() => {
+      result = useDevicesList({ navigator });
+    });
+
+    await result!.ensurePermissions();
+    expect(getUserMedia).toHaveBeenCalledWith({ video: false, audio: true });
+    scope.stop();
+  });
+
+  it('does not mutate the caller-supplied constraints object', async () => {
+    const { navigator } = stubMediaDevices([device('audioinput', 'mic1')]);
+    const constraints: MediaStreamConstraints = { video: true, audio: true };
+    const scope = effectScope();
+    let result: UseDevicesListReturn;
+    scope.run(() => {
+      result = useDevicesList({ navigator, constraints });
+    });
+
+    await result!.ensurePermissions();
+    expect(constraints).toEqual({ video: true, audio: true });
+    scope.stop();
+  });
+
+  it('dedupes concurrent ensurePermissions calls', async () => {
+    const { navigator, getUserMedia } = stubMediaDevices([device('videoinput', 'cam1')]);
+    const scope = effectScope();
+    let result: UseDevicesListReturn;
+    scope.run(() => {
+      result = useDevicesList({ navigator });
+    });
+
+    await Promise.all([result!.ensurePermissions(), result!.ensurePermissions()]);
+    expect(getUserMedia).toHaveBeenCalledTimes(1);
+    scope.stop();
+  });
+
+  it('short-circuits ensurePermissions once granted', async () => {
+    const { navigator, getUserMedia } = stubMediaDevices([device('videoinput', 'cam1')]);
+    const scope = effectScope();
+    let result: UseDevicesListReturn;
+    scope.run(() => {
+      result = useDevicesList({ navigator });
+    });
+
+    await result!.ensurePermissions();
+    await result!.ensurePermissions();
+    expect(getUserMedia).toHaveBeenCalledTimes(1);
+    scope.stop();
+  });
+
+  it('requests permissions on init when requestPermissions is true', async () => {
+    const { navigator, getUserMedia } = stubMediaDevices([device('videoinput', 'cam1')]);
+    const scope = effectScope();
+    scope.run(() => {
+      useDevicesList({ navigator, requestPermissions: true });
+    });
+
+    await vi.waitFor(() => expect(getUserMedia).toHaveBeenCalled());
+    scope.stop();
+  });
+
+  it('reports getUserMedia failures via onError and leaves permission denied', async () => {
+    const onError = vi.fn();
+    const { navigator } = stubMediaDevices([device('videoinput', 'cam1')]);
+    (navigator.mediaDevices.getUserMedia as any).mockRejectedValueOnce(new Error('denied'));
+    const scope = effectScope();
+    let result: UseDevicesListReturn;
+    scope.run(() => {
+      result = useDevicesList({ navigator, onError });
+    });
+
+    const granted = await result!.ensurePermissions();
+    expect(granted).toBeFalsy();
+    expect(result!.permissionGranted.value).toBeFalsy();
+    expect(onError).toHaveBeenCalled();
+    scope.stop();
+  });
+
+  it('reports enumerateDevices failures via onError', async () => {
+    const onError = vi.fn();
+    const { navigator } = stubMediaDevices();
+    (navigator.mediaDevices.enumerateDevices as any).mockRejectedValue(new Error('boom'));
+    const scope = effectScope();
+    scope.run(() => {
+      useDevicesList({ navigator, onError });
+    });
+
+    await vi.waitFor(() => expect(onError).toHaveBeenCalled());
+    await nextTick();
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/sensors/useDevicesList/index.ts b/vue/toolkit/src/composables/sensors/useDevicesList/index.ts
new file mode 100644
index 0000000..fe314fa
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useDevicesList/index.ts
@@ -0,0 +1,211 @@
+import { computed, shallowRef } from 'vue';
+import type { ComputedRef, Ref, ShallowRef } from 'vue';
+import { noop } from '@robonen/stdlib';
+import { defaultNavigator } from '@/types';
+import type { ConfigurableNavigator } from '@/types';
+import { useSupported } from '@/composables/utilities/useSupported';
+import { useEventListener } from '@/composables/browser/useEventListener';
+
+export interface UseDevicesListOptions extends ConfigurableNavigator {
+  /**
+   * Called with the fresh device list every time it is (re)enumerated
+   */
+  onUpdated?: (devices: MediaDeviceInfo[]) => void;
+
+  /**
+   * Called when an unexpected error occurs (enumeration / `getUserMedia`).
+   * Defaults to a no-op — we never log to the console.
+   *
+   * @default noop
+   */
+  onError?: (error: unknown) => void;
+
+  /**
+   * Request permissions immediately. Without a granted permission the
+   * enumerated devices have empty `label`/`deviceId` fields.
+   *
+   * @default false
+   */
+  requestPermissions?: boolean;
+
+  /**
+   * Media kinds to request when ensuring permissions.
+   *
+   * @default { audio: true, video: true }
+   */
+  constraints?: MediaStreamConstraints;
+}
+
+export interface UseDevicesListReturn {
+  /**
+   * Whether `navigator.mediaDevices.enumerateDevices` is available
+   */
+  isSupported: Readonly<Ref<boolean>>;
+
+  /**
+   * All enumerated media devices
+   */
+  devices: ShallowRef<MediaDeviceInfo[]>;
+
+  /**
+   * Devices of kind `videoinput`
+   */
+  videoInputs: ComputedRef<MediaDeviceInfo[]>;
+
+  /**
+   * Devices of kind `audioinput`
+   */
+  audioInputs: ComputedRef<MediaDeviceInfo[]>;
+
+  /**
+   * Devices of kind `audiooutput`
+   */
+  audioOutputs: ComputedRef<MediaDeviceInfo[]>;
+
+  /**
+   * Whether media permissions have been granted (labels/deviceIds are populated)
+   */
+  permissionGranted: ShallowRef<boolean>;
+
+  /**
+   * Request media permissions (via `getUserMedia`) so labels become available.
+   * Resolves to whether permission is granted. Concurrent calls are deduped.
+   */
+  ensurePermissions: () => Promise<boolean>;
+}
+
+/**
+ * @name useDevicesList
+ * @category Sensors
+ * @description Reactive `enumerateDevices` listing available media input/output devices.
+ *
+ * @param {UseDevicesListOptions} [options={}] Options
+ * @returns {UseDevicesListReturn} `devices`, kind-filtered lists, `isSupported`, `permissionGranted` and `ensurePermissions`
+ *
+ * @example
+ * const { videoInputs, audioInputs, audioOutputs } = useDevicesList({ requestPermissions: true });
+ *
+ * @example
+ * const { devices, ensurePermissions, permissionGranted } = useDevicesList();
+ * await ensurePermissions();
+ *
+ * @since 0.0.15
+ */
+export function useDevicesList(options: UseDevicesListOptions = {}): UseDevicesListReturn {
+  const {
+    navigator = defaultNavigator,
+    requestPermissions = false,
+    constraints = { audio: true, video: true },
+    onUpdated,
+    onError = noop,
+  } = options;
+
+  const devices = shallowRef<MediaDeviceInfo[]>([]);
+  // Cache one pass over the list per dependency change rather than three.
+  const byKind = computed(() => {
+    const video: MediaDeviceInfo[] = [];
+    const audioIn: MediaDeviceInfo[] = [];
+    const audioOut: MediaDeviceInfo[] = [];
+
+    for (const device of devices.value) {
+      if (device.kind === 'videoinput') video.push(device);
+      else if (device.kind === 'audioinput') audioIn.push(device);
+      else if (device.kind === 'audiooutput') audioOut.push(device);
+    }
+
+    return { video, audioIn, audioOut };
+  });
+
+  const videoInputs = computed(() => byKind.value.video);
+  const audioInputs = computed(() => byKind.value.audioIn);
+  const audioOutputs = computed(() => byKind.value.audioOut);
+
+  const isSupported = useSupported(() =>
+    !!navigator && !!navigator.mediaDevices && !!navigator.mediaDevices.enumerateDevices);
+
+  const permissionGranted = shallowRef(false);
+
+  async function update(): Promise<void> {
+    if (!isSupported.value)
+      return;
+
+    try {
+      devices.value = await navigator!.mediaDevices.enumerateDevices();
+      onUpdated?.(devices.value);
+    }
+    catch (error) {
+      onError(error);
+    }
+  }
+
+  // Dedupe overlapping permission requests — a single getUserMedia is enough.
+  let permissionPromise: Promise<boolean> | undefined;
+
+  async function requestPermissionsOnce(): Promise<boolean> {
+    let granted = true;
+    let stream: MediaStream | null = null;
+
+    try {
+      // Don't mutate the caller's constraints object; narrow a shallow copy.
+      const list = await navigator!.mediaDevices.enumerateDevices();
+      const hasCamera = list.some(device => device.kind === 'videoinput');
+      const hasMicrophone = list.some(device => device.kind === 'audioinput' || device.kind === 'audiooutput');
+
+      const effective: MediaStreamConstraints = {
+        video: hasCamera ? constraints.video : false,
+        audio: hasMicrophone ? constraints.audio : false,
+      };
+
+      stream = await navigator!.mediaDevices.getUserMedia(effective);
+    }
+    catch (error) {
+      onError(error);
+      granted = false;
+    }
+    finally {
+      // Release the tracks straight away — we only needed the permission prompt.
+      if (stream)
+        stream.getTracks().forEach(track => track.stop());
+    }
+
+    permissionGranted.value = granted;
+    await update();
+
+    return granted;
+  }
+
+  function ensurePermissions(): Promise<boolean> {
+    if (!isSupported.value)
+      return Promise.resolve(false);
+
+    if (permissionGranted.value)
+      return Promise.resolve(true);
+
+    if (permissionPromise)
+      return permissionPromise;
+
+    permissionPromise = requestPermissionsOnce().finally(() => {
+      permissionPromise = undefined;
+    });
+
+    return permissionPromise;
+  }
+
+  if (isSupported.value) {
+    if (requestPermissions)
+      ensurePermissions();
+
+    useEventListener(navigator!.mediaDevices, 'devicechange', update, { passive: true });
+    update();
+  }
+
+  return {
+    isSupported,
+    devices,
+    videoInputs,
+    audioInputs,
+    audioOutputs,
+    permissionGranted,
+    ensurePermissions,
+  };
+}
diff --git a/vue/toolkit/src/composables/sensors/useElementByPoint/demo.vue b/vue/toolkit/src/composables/sensors/useElementByPoint/demo.vue
new file mode 100644
index 0000000..f6caec0
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useElementByPoint/demo.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useElementByPoint } from './index';
+
+// Viewport coordinates to probe — driven by the user moving the cursor over
+// the playground area below.
+const x = ref(0);
+const y = ref(0);
+const tracking = ref(false);
+
+const { element, isSupported, toggle } = useElementByPoint({ x, y });
+
+const active = ref(true);
+
+function onToggle(): void {
+  toggle();
+  active.value = !active.value;
+}
+
+function onMove(event: MouseEvent): void {
+  x.value = event.clientX;
+  y.value = event.clientY;
+  tracking.value = true;
+}
+
+function onLeave(): void {
+  tracking.value = false;
+}
+
+// Build a friendly description of whatever the probe currently sits on.
+const elementInfo = computed(() => {
+  const el = element.value as Element | null;
+  if (!el) return null;
+
+  const tag = el.tagName.toLowerCase();
+  const id = el.id ? `#${el.id}` : '';
+  const cls = el.className && typeof el.className === 'string'
+    ? `.${el.className.trim().split(/\s+/).slice(0, 2).join('.')}`
+    : '';
+
+  return { tag, selector: `${tag}${id}${cls}`, text: el.textContent?.trim().slice(0, 40) ?? '' };
+});
+
+const coords = computed(() => `${Math.round(x.value)}, ${Math.round(y.value)}`);
+</script>
+
+<template>
+  <div class="w-full max-w-md flex flex-col gap-4">
+    <div
+      v-if="!isSupported"
+      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-700 dark:text-amber-300"
+    >
+      elementFromPoint is not supported in this browser.
+    </div>
+
+    <template v-else>
+      <!-- Probe surface: hover anywhere inside to feed live viewport coordinates -->
+      <div
+        class="relative grid h-40 place-items-center overflow-hidden rounded-xl border border-(--border) bg-(--bg-inset)"
+        @mousemove="onMove"
+        @mouseleave="onLeave"
+      >
+        <div class="pointer-events-none absolute inset-0 grid grid-cols-3 grid-rows-2 gap-2 p-3 opacity-70">
+          <div
+            v-for="cell in ['alpha', 'beta', 'gamma', 'delta', 'epsilon', 'zeta']"
+            :key="cell"
+            :data-cell="cell"
+            class="grid place-items-center rounded-lg border border-(--border) bg-(--bg-elevated) text-xs font-medium text-(--fg-muted)"
+          >
+            {{ cell }}
+          </div>
+        </div>
+        <span class="pointer-events-none relative rounded-md bg-(--bg)/70 px-2 py-1 text-xs text-(--fg-subtle) backdrop-blur">
+          {{ tracking ? 'Probing…' : 'Move your cursor here' }}
+        </span>
+      </div>
+
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums flex flex-col gap-1.5">
+        <div class="flex items-center justify-between">
+          <span class="text-(--fg-subtle)">point</span>
+          <span>{{ coords }}</span>
+        </div>
+        <div class="flex items-center justify-between gap-3">
+          <span class="text-(--fg-subtle)">element</span>
+          <span class="truncate text-(--accent-text)">{{ elementInfo?.selector ?? '—' }}</span>
+        </div>
+        <div v-if="elementInfo?.text" class="flex items-center justify-between gap-3">
+          <span class="text-(--fg-subtle)">text</span>
+          <span class="truncate text-(--fg-muted)">{{ elementInfo.text }}</span>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="onToggle"
+        >
+          <span class="size-1.5 rounded-full" :class="active ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+          {{ active ? 'Pause sampling' : 'Resume sampling' }}
+        </button>
+        <span class="text-xs text-(--fg-subtle)">Sampled every animation frame</span>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useElementByPoint/index.test.ts b/vue/toolkit/src/composables/sensors/useElementByPoint/index.test.ts
new file mode 100644
index 0000000..6abb633
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useElementByPoint/index.test.ts
@@ -0,0 +1,267 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, shallowRef } from 'vue';
+import { useElementByPoint } from '.';
+
+interface FakeDocument {
+  elementFromPoint?: (x: number, y: number) => Element | null;
+  elementsFromPoint?: (x: number, y: number) => Element[];
+}
+
+function makeDocument(over: FakeDocument): Document {
+  return {
+    elementFromPoint: () => null,
+    elementsFromPoint: () => [],
+    ...over,
+  } as unknown as Document;
+}
+
+/**
+ * Drive `requestAnimationFrame` so the raf loop callback runs synchronously.
+ * Returns a restore function.
+ */
+function stubRaf() {
+  const callbacks: FrameRequestCallback[] = [];
+  const raf = vi.fn((cb: FrameRequestCallback) => {
+    callbacks.push(cb);
+    return callbacks.length;
+  });
+  const caf = vi.fn();
+  const originalRaf = globalThis.requestAnimationFrame;
+  const originalCaf = globalThis.cancelAnimationFrame;
+  globalThis.requestAnimationFrame = raf as typeof requestAnimationFrame;
+  globalThis.cancelAnimationFrame = caf as typeof cancelAnimationFrame;
+
+  return {
+    raf,
+    caf,
+    flush(timestamp = 16) {
+      const pending = callbacks.splice(0);
+      for (const cb of pending)
+        cb(timestamp);
+    },
+    restore() {
+      globalThis.requestAnimationFrame = originalRaf;
+      globalThis.cancelAnimationFrame = originalCaf;
+    },
+  };
+}
+
+describe(useElementByPoint, () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it('reads the topmost element at the point', () => {
+    const target = document.createElement('div');
+    const fromPoint = vi.fn(() => target);
+    const doc = makeDocument({ elementFromPoint: fromPoint });
+    const raf = stubRaf();
+
+    const scope = effectScope();
+    let api: ReturnType<typeof useElementByPoint>;
+    scope.run(() => {
+      api = useElementByPoint({ x: 10, y: 20, document: doc });
+    });
+
+    raf.flush();
+
+    expect(fromPoint).toHaveBeenCalledWith(10, 20);
+    expect(api!.element.value).toBe(target);
+
+    scope.stop();
+    raf.restore();
+  });
+
+  it('returns all elements at the point when multiple is set', () => {
+    const a = document.createElement('div');
+    const b = document.createElement('span');
+    const fromPoints = vi.fn(() => [a, b]);
+    const doc = makeDocument({ elementsFromPoint: fromPoints });
+    const raf = stubRaf();
+
+    const scope = effectScope();
+    let api: ReturnType<typeof useElementByPoint<true>>;
+    scope.run(() => {
+      api = useElementByPoint({ x: 1, y: 2, multiple: true, document: doc });
+    });
+
+    raf.flush();
+
+    expect(fromPoints).toHaveBeenCalledWith(1, 2);
+    expect(api!.element.value).toEqual([a, b]);
+
+    scope.stop();
+    raf.restore();
+  });
+
+  it('initializes to null (single) and [] (multiple) before the first frame', () => {
+    const doc = makeDocument({});
+
+    const scope = effectScope();
+    let single: ReturnType<typeof useElementByPoint>;
+    let multi: ReturnType<typeof useElementByPoint<true>>;
+    scope.run(() => {
+      single = useElementByPoint({ x: 0, y: 0, document: doc, immediate: false });
+      multi = useElementByPoint({ x: 0, y: 0, multiple: true, document: doc, immediate: false });
+    });
+
+    expect(single!.element.value).toBe(null);
+    expect(multi!.element.value).toEqual([]);
+
+    scope.stop();
+  });
+
+  it('tracks reactive coordinates on each frame', () => {
+    const fromPoint = vi.fn(() => null);
+    const doc = makeDocument({ elementFromPoint: fromPoint });
+    const raf = stubRaf();
+    const x = shallowRef(5);
+    const y = shallowRef(6);
+
+    const scope = effectScope();
+    scope.run(() => {
+      useElementByPoint({ x, y, document: doc });
+    });
+
+    raf.flush();
+    expect(fromPoint).toHaveBeenLastCalledWith(5, 6);
+
+    x.value = 100;
+    y.value = 200;
+    raf.flush();
+    expect(fromPoint).toHaveBeenLastCalledWith(100, 200);
+
+    scope.stop();
+    raf.restore();
+  });
+
+  it('does not probe before resume when immediate is false', () => {
+    const fromPoint = vi.fn(() => null);
+    const doc = makeDocument({ elementFromPoint: fromPoint });
+    const raf = stubRaf();
+
+    const scope = effectScope();
+    let api: ReturnType<typeof useElementByPoint>;
+    scope.run(() => {
+      api = useElementByPoint({ x: 0, y: 0, document: doc, immediate: false });
+    });
+
+    raf.flush();
+    expect(fromPoint).not.toHaveBeenCalled();
+
+    api!.resume();
+    raf.flush();
+    expect(fromPoint).toHaveBeenCalledTimes(1);
+
+    scope.stop();
+    raf.restore();
+  });
+
+  it('stops probing after pause', () => {
+    const fromPoint = vi.fn(() => null);
+    const doc = makeDocument({ elementFromPoint: fromPoint });
+    const raf = stubRaf();
+
+    const scope = effectScope();
+    let api: ReturnType<typeof useElementByPoint>;
+    scope.run(() => {
+      api = useElementByPoint({ x: 0, y: 0, document: doc });
+    });
+
+    raf.flush();
+    expect(fromPoint).toHaveBeenCalledTimes(1);
+
+    api!.pause();
+    raf.flush();
+    expect(fromPoint).toHaveBeenCalledTimes(1);
+
+    scope.stop();
+    raf.restore();
+  });
+
+  it('reports supported when the relevant API exists', async () => {
+    const doc = makeDocument({});
+
+    const scope = effectScope();
+    let single: ReturnType<typeof useElementByPoint>;
+    let multi: ReturnType<typeof useElementByPoint<true>>;
+    scope.run(() => {
+      single = useElementByPoint({ x: 0, y: 0, document: doc, immediate: false });
+      multi = useElementByPoint({ x: 0, y: 0, multiple: true, document: doc, immediate: false });
+    });
+    await nextTick();
+
+    expect(single!.isSupported.value).toBeTruthy();
+    expect(multi!.isSupported.value).toBeTruthy();
+
+    scope.stop();
+  });
+
+  it('reports unsupported when document is undefined (SSR)', async () => {
+    const scope = effectScope();
+    let api: ReturnType<typeof useElementByPoint>;
+    scope.run(() => {
+      api = useElementByPoint({ x: 0, y: 0, document: undefined, immediate: false });
+    });
+    await nextTick();
+
+    expect(api!.isSupported.value).toBeFalsy();
+    expect(api!.element.value).toBe(null);
+
+    scope.stop();
+  });
+
+  it('does not throw and leaves element untouched when the point API is missing', () => {
+    // a document object without elementFromPoint (e.g. jsdom)
+    const doc = { ownerDocument: null } as unknown as Document;
+    const raf = stubRaf();
+
+    const scope = effectScope();
+    let api: ReturnType<typeof useElementByPoint>;
+    scope.run(() => {
+      api = useElementByPoint({ x: 0, y: 0, document: doc });
+    });
+
+    expect(() => raf.flush()).not.toThrow();
+    expect(api!.element.value).toBe(null);
+
+    scope.stop();
+    raf.restore();
+  });
+
+  it('reports unsupported when the API is missing from document', async () => {
+    const doc = { elementsFromPoint: () => [] } as unknown as Document;
+
+    const scope = effectScope();
+    let api: ReturnType<typeof useElementByPoint>;
+    scope.run(() => {
+      // single mode but only elementsFromPoint is present
+      api = useElementByPoint({ x: 0, y: 0, document: doc, immediate: false });
+    });
+    await nextTick();
+
+    expect(api!.isSupported.value).toBeFalsy();
+
+    scope.stop();
+  });
+
+  it('stops probing once the scope is disposed', () => {
+    const fromPoint = vi.fn(() => null);
+    const doc = makeDocument({ elementFromPoint: fromPoint });
+    const raf = stubRaf();
+
+    const scope = effectScope();
+    scope.run(() => {
+      useElementByPoint({ x: 0, y: 0, document: doc });
+    });
+
+    raf.flush();
+    expect(fromPoint).toHaveBeenCalledTimes(1);
+
+    scope.stop();
+    raf.flush();
+    expect(fromPoint).toHaveBeenCalledTimes(1);
+
+    raf.restore();
+  });
+});
diff --git a/vue/toolkit/src/composables/sensors/useElementByPoint/index.ts b/vue/toolkit/src/composables/sensors/useElementByPoint/index.ts
new file mode 100644
index 0000000..6a3a741
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useElementByPoint/index.ts
@@ -0,0 +1,120 @@
+import { shallowRef, toValue } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter, ShallowRef } from 'vue';
+import { defaultDocument } from '@/types';
+import type { ConfigurableDocument, ResumableActions, ResumableOptions } from '@/types';
+import { useRafFn } from '@/composables/animation/useRafFn';
+import { useSupported } from '@/composables/utilities/useSupported';
+
+export interface UseElementByPointOptions<Multiple extends boolean = false>
+  extends ConfigurableDocument, ResumableOptions {
+  /**
+   * The x coordinate (relative to the viewport) to probe.
+   */
+  x: MaybeRefOrGetter<number>;
+
+  /**
+   * The y coordinate (relative to the viewport) to probe.
+   */
+  y: MaybeRefOrGetter<number>;
+
+  /**
+   * Return every element at the point (`elementsFromPoint`) instead of just the
+   * topmost one (`elementFromPoint`).
+   *
+   * @default false
+   */
+  multiple?: MaybeRefOrGetter<Multiple>;
+}
+
+export type UseElementByPointValue<Multiple extends boolean>
+  = Multiple extends true ? Element[] : Element | null;
+
+export interface UseElementByPointReturn<Multiple extends boolean = false>
+  extends ResumableActions {
+  /**
+   * Whether the underlying `elementFromPoint` / `elementsFromPoint` API is
+   * available (SSR-safe).
+   */
+  isSupported: ComputedRef<boolean>;
+
+  /**
+   * The element(s) currently located at the configured point. Updated on every
+   * animation frame while active.
+   */
+  element: ShallowRef<UseElementByPointValue<Multiple>>;
+}
+
+/**
+ * @name useElementByPoint
+ * @category Sensors
+ * @description Reactive element(s) at a given viewport point, sampled every animation frame via `document.elementFromPoint` (or `elementsFromPoint` when `multiple` is set).
+ *
+ * @param {UseElementByPointOptions} options Probe coordinates and behaviour
+ * @param {MaybeRefOrGetter<number>} options.x The x coordinate to probe
+ * @param {MaybeRefOrGetter<number>} options.y The y coordinate to probe
+ * @param {MaybeRefOrGetter<boolean>} [options.multiple=false] Return all elements at the point instead of the topmost
+ * @param {boolean} [options.immediate=true] Start sampling immediately
+ * @param {Document} [options.document=defaultDocument] Custom document instance
+ * @returns {UseElementByPointReturn} `{ element, isSupported, pause, resume, toggle }`
+ *
+ * @example
+ * const { x, y } = useMouse();
+ * const { element } = useElementByPoint({ x, y });
+ *
+ * @example
+ * const { element } = useElementByPoint({ x, y, multiple: true });
+ *
+ * @since 0.0.15
+ */
+export function useElementByPoint<Multiple extends boolean = false>(
+  options: UseElementByPointOptions<Multiple>,
+): UseElementByPointReturn<Multiple> {
+  const {
+    x,
+    y,
+    multiple,
+    immediate = true,
+    document = defaultDocument,
+  } = options;
+
+  const isSupported = useSupported(() => {
+    if (!document)
+      return false;
+
+    return toValue(multiple)
+      ? 'elementsFromPoint' in document
+      : 'elementFromPoint' in document;
+  });
+
+  // `shallowRef` distributes over the conditional `UseElementByPointValue`, producing a
+  // union of refs; collapse it back to a single ref of the resolved value type.
+  const element = shallowRef(
+    (toValue(multiple) ? [] : null) as UseElementByPointValue<Multiple>,
+  ) as ShallowRef<UseElementByPointValue<Multiple>>;
+
+  const { pause, resume, toggle } = useRafFn(() => {
+    if (!document)
+      return;
+
+    if (toValue(multiple)) {
+      if (typeof document.elementsFromPoint !== 'function')
+        return;
+
+      element.value = document.elementsFromPoint(toValue(x), toValue(y)) as UseElementByPointValue<Multiple>;
+    }
+    else {
+      if (typeof document.elementFromPoint !== 'function')
+        return;
+
+      element.value = document.elementFromPoint(toValue(x), toValue(y)) as UseElementByPointValue<Multiple>;
+    }
+  }, { immediate });
+
+  return {
+    isSupported,
+    element,
+    pause,
+    resume,
+    toggle,
+  };
+}
diff --git a/vue/toolkit/src/composables/sensors/useElementHover/demo.vue b/vue/toolkit/src/composables/sensors/useElementHover/demo.vue
new file mode 100644
index 0000000..0b0aa6a
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useElementHover/demo.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue';
+import { useElementHover } from './index';
+
+// Instant hover state.
+const instant = useTemplateRef<HTMLElement>('instant');
+const isInstantHovered = useElementHover(instant);
+
+// Delayed hover state — debounces flicker on quick passes.
+const delayEnter = ref(150);
+const delayLeave = ref(400);
+const delayed = useTemplateRef<HTMLElement>('delayed');
+const isDelayedHovered = useElementHover(delayed, {
+  delayEnter: delayEnter.value,
+  delayLeave: delayLeave.value,
+});
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <!-- Instant: state flips the moment the pointer enters / leaves -->
+    <div
+      ref="instant"
+      class="flex flex-col gap-1 rounded-xl border bg-(--bg-elevated) p-4 transition-all duration-200"
+      :class="isInstantHovered
+        ? 'border-(--accent) ring-2 ring-(--ring) -translate-y-0.5'
+        : 'border-(--border)'"
+    >
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Instant</span>
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium"
+          :class="isInstantHovered ? 'text-emerald-600 dark:text-emerald-400' : 'text-(--fg-muted)'"
+        >
+          <span class="size-1.5 rounded-full" :class="isInstantHovered ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+          {{ isInstantHovered ? 'hovered' : 'idle' }}
+        </span>
+      </div>
+      <p class="text-sm text-(--fg-muted)">Hover this card to flip the state immediately.</p>
+    </div>
+
+    <!-- Delayed: enter/leave delays smooth out flicker -->
+    <div
+      ref="delayed"
+      class="flex flex-col gap-2 rounded-xl border bg-(--bg-elevated) p-4 transition-all duration-200"
+      :class="isDelayedHovered
+        ? 'border-(--accent) ring-2 ring-(--ring) -translate-y-0.5'
+        : 'border-(--border)'"
+    >
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Delayed</span>
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium"
+          :class="isDelayedHovered ? 'text-emerald-600 dark:text-emerald-400' : 'text-(--fg-muted)'"
+        >
+          <span class="size-1.5 rounded-full" :class="isDelayedHovered ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+          {{ isDelayedHovered ? 'hovered' : 'idle' }}
+        </span>
+      </div>
+      <p class="text-sm text-(--fg-muted)">
+        Waits <span class="font-mono text-(--fg)">{{ delayEnter }}ms</span> to enter,
+        <span class="font-mono text-(--fg)">{{ delayLeave }}ms</span> to leave.
+      </p>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Enter/leave delays debounce hover flicker — useful for tooltips and submenus that should not vanish the instant you cross a gap.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useElementHover/index.test.ts b/vue/toolkit/src/composables/sensors/useElementHover/index.test.ts
new file mode 100644
index 0000000..ce3f9bd
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useElementHover/index.test.ts
@@ -0,0 +1,183 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, isReadonly, ref } from 'vue';
+import { useElementHover } from '.';
+
+function dispatch(el: HTMLElement, type: 'mouseenter' | 'mouseleave') {
+  el.dispatchEvent(new Event(type));
+}
+
+describe(useElementHover, () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+
+  it('is false initially', () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let isHovered: ReturnType<typeof useElementHover>;
+    scope.run(() => {
+      isHovered = useElementHover(ref(el));
+    });
+
+    expect(isHovered!.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('toggles on mouseenter / mouseleave', () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let isHovered: ReturnType<typeof useElementHover>;
+    scope.run(() => {
+      isHovered = useElementHover(ref(el));
+    });
+
+    dispatch(el, 'mouseenter');
+    expect(isHovered!.value).toBeTruthy();
+
+    dispatch(el, 'mouseleave');
+    expect(isHovered!.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('returns a writable shallow ref (not readonly)', () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let isHovered: ReturnType<typeof useElementHover>;
+    scope.run(() => {
+      isHovered = useElementHover(ref(el));
+    });
+
+    expect(isReadonly(isHovered!)).toBeFalsy();
+    scope.stop();
+  });
+
+  it('respects delayEnter', () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let isHovered: ReturnType<typeof useElementHover>;
+    scope.run(() => {
+      isHovered = useElementHover(ref(el), { delayEnter: 100 });
+    });
+
+    dispatch(el, 'mouseenter');
+    expect(isHovered!.value).toBeFalsy();
+
+    vi.advanceTimersByTime(99);
+    expect(isHovered!.value).toBeFalsy();
+
+    vi.advanceTimersByTime(1);
+    expect(isHovered!.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('respects delayLeave', () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let isHovered: ReturnType<typeof useElementHover>;
+    scope.run(() => {
+      isHovered = useElementHover(ref(el), { delayLeave: 200 });
+    });
+
+    dispatch(el, 'mouseenter');
+    expect(isHovered!.value).toBeTruthy();
+
+    dispatch(el, 'mouseleave');
+    expect(isHovered!.value).toBeTruthy();
+
+    vi.advanceTimersByTime(199);
+    expect(isHovered!.value).toBeTruthy();
+
+    vi.advanceTimersByTime(1);
+    expect(isHovered!.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('cancels a pending enter timer when leaving before the delay elapses', () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let isHovered: ReturnType<typeof useElementHover>;
+    scope.run(() => {
+      isHovered = useElementHover(ref(el), { delayEnter: 100 });
+    });
+
+    dispatch(el, 'mouseenter');
+    vi.advanceTimersByTime(50);
+    expect(isHovered!.value).toBeFalsy();
+
+    // Leaving cancels the pending enter; with no leave delay it settles to false.
+    dispatch(el, 'mouseleave');
+    vi.advanceTimersByTime(100);
+    expect(isHovered!.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('cancels a pending leave timer when re-entering before the delay elapses', () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let isHovered: ReturnType<typeof useElementHover>;
+    scope.run(() => {
+      isHovered = useElementHover(ref(el), { delayLeave: 200 });
+    });
+
+    dispatch(el, 'mouseenter');
+    expect(isHovered!.value).toBeTruthy();
+
+    dispatch(el, 'mouseleave');
+    vi.advanceTimersByTime(100);
+    // Re-enter before the leave delay finishes: stays hovered, no flip.
+    dispatch(el, 'mouseenter');
+    vi.advanceTimersByTime(200);
+    expect(isHovered!.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('stops listening once the scope is disposed', () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let isHovered: ReturnType<typeof useElementHover>;
+    scope.run(() => {
+      isHovered = useElementHover(ref(el));
+    });
+
+    scope.stop();
+
+    dispatch(el, 'mouseenter');
+    expect(isHovered!.value).toBeFalsy();
+  });
+
+  it('clears a pending timer on scope dispose (no late update)', () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let isHovered: ReturnType<typeof useElementHover>;
+    scope.run(() => {
+      isHovered = useElementHover(ref(el), { delayEnter: 100 });
+    });
+
+    dispatch(el, 'mouseenter');
+    scope.stop();
+
+    vi.advanceTimersByTime(200);
+    expect(isHovered!.value).toBeFalsy();
+  });
+
+  it('returns a static ref and registers no listeners when window is falsy (SSR)', () => {
+    // `defaultWindow` is captured at import time and cannot be stubbed via
+    // vi.stubGlobal, so we cast a falsy window through options to exercise the
+    // SSR early-return without touching the global. Note that passing literal
+    // `undefined` would resolve back to `defaultWindow` via the destructure
+    // default, hence the explicit null cast here.
+    const el = document.createElement('div');
+    const addSpy = vi.spyOn(el, 'addEventListener');
+    const scope = effectScope();
+    let isHovered: ReturnType<typeof useElementHover>;
+    scope.run(() => {
+      isHovered = useElementHover(ref(el), { window: null as unknown as Window });
+    });
+
+    expect(isHovered!.value).toBeFalsy();
+    expect(addSpy).not.toHaveBeenCalled();
+
+    dispatch(el, 'mouseenter');
+    expect(isHovered!.value).toBeFalsy();
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/sensors/useElementHover/index.ts b/vue/toolkit/src/composables/sensors/useElementHover/index.ts
new file mode 100644
index 0000000..a3eba3f
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useElementHover/index.ts
@@ -0,0 +1,91 @@
+import { computed, shallowRef } from 'vue';
+import type { ShallowRef } from 'vue';
+import type { ConfigurableWindow } from '@/types';
+import { defaultWindow } from '@/types';
+import type { MaybeComputedElementRef } from '@/composables/component/unrefElement';
+import { unrefElement } from '@/composables/component/unrefElement';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+
+export interface UseElementHoverOptions extends ConfigurableWindow {
+  /**
+   * Delay in milliseconds before flipping the state to hovered on `mouseenter`.
+   *
+   * @default 0
+   */
+  delayEnter?: number;
+
+  /**
+   * Delay in milliseconds before flipping the state to not-hovered on `mouseleave`.
+   *
+   * @default 0
+   */
+  delayLeave?: number;
+}
+
+export type UseElementHoverReturn = ShallowRef<boolean>;
+
+/**
+ * @name useElementHover
+ * @category Sensors
+ * @description Reactive hover state of an element, driven by `mouseenter` /
+ * `mouseleave`. Supports independent enter/leave delays to debounce flicker.
+ *
+ * @param {MaybeComputedElementRef} target Element to track (ref, getter, or component instance)
+ * @param {UseElementHoverOptions} [options={}] Options (`delayEnter`, `delayLeave`, `window`)
+ * @returns {UseElementHoverReturn} Reactive hover state ref
+ *
+ * @example
+ * const el = useTemplateRef('el');
+ * const isHovered = useElementHover(el);
+ *
+ * @example
+ * const isHovered = useElementHover(el, { delayEnter: 100, delayLeave: 200 });
+ *
+ * @since 0.0.15
+ */
+export function useElementHover(
+  target: MaybeComputedElementRef,
+  options: UseElementHoverOptions = {},
+): UseElementHoverReturn {
+  const {
+    delayEnter = 0,
+    delayLeave = 0,
+    window = defaultWindow,
+  } = options;
+
+  const isHovered = shallowRef(false);
+
+  let timer: ReturnType<typeof setTimeout> | undefined;
+
+  const clear = (): void => {
+    if (timer !== undefined) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+  };
+
+  const toggle = (entering: boolean): void => {
+    const delay = entering ? delayEnter : delayLeave;
+
+    clear();
+
+    if (delay)
+      timer = setTimeout(() => { isHovered.value = entering; }, delay);
+    else
+      isHovered.value = entering;
+  };
+
+  // SSR / no DOM: return a static, never-updating ref.
+  if (!window)
+    return isHovered;
+
+  const targetElement = computed(() => unrefElement(target) as HTMLElement | undefined | null);
+
+  useEventListener(targetElement, 'mouseenter', () => toggle(true), { passive: true });
+  useEventListener(targetElement, 'mouseleave', () => toggle(false), { passive: true });
+
+  tryOnScopeDispose(clear);
+
+  return isHovered;
+}
diff --git a/vue/toolkit/src/composables/sensors/useEscapeKey/demo.vue b/vue/toolkit/src/composables/sensors/useEscapeKey/demo.vue
new file mode 100644
index 0000000..6fc1d04
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useEscapeKey/demo.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useEscapeKey } from './index';
+
+// Stack of open layers — useEscapeKey only fires the topmost handler, so
+// Escape peels them off one at a time (outer panel, then inner dialog).
+const panelOpen = ref(false);
+const dialogOpen = ref(false);
+
+const lastDismissed = ref<string | null>(null);
+
+let stopPanel: (() => void) | undefined;
+let stopDialog: (() => void) | undefined;
+
+// Only register a handler while the layer is actually open. The most recently
+// registered (topmost) one wins for a given Escape press.
+watch(panelOpen, (open) => {
+  if (open) {
+    stopPanel = useEscapeKey(() => {
+      panelOpen.value = false;
+      lastDismissed.value = 'panel';
+    });
+  }
+  else {
+    stopPanel?.();
+    stopPanel = undefined;
+  }
+});
+
+watch(dialogOpen, (open) => {
+  if (open) {
+    stopDialog = useEscapeKey(() => {
+      dialogOpen.value = false;
+      lastDismissed.value = 'dialog';
+    });
+  }
+  else {
+    stopDialog?.();
+    stopDialog = undefined;
+  }
+});
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Escape Stack</span>
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+          {{ (panelOpen ? 1 : 0) + (dialogOpen ? 1 : 0) }} open
+        </span>
+      </div>
+
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="panelOpen = true"
+      >
+        Open panel
+      </button>
+
+      <!-- Outer layer -->
+      <div
+        v-if="panelOpen"
+        class="flex flex-col gap-3 rounded-lg border border-(--border-strong) bg-(--bg-inset) p-3"
+      >
+        <p class="text-sm text-(--fg)">
+          Panel open. Press <kbd class="rounded border border-(--border) bg-(--bg-elevated) px-1.5 py-0.5 font-mono text-xs text-(--fg)">Esc</kbd> to dismiss, or open a nested dialog on top.
+        </p>
+
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="dialogOpen = true"
+        >
+          Open nested dialog
+        </button>
+
+        <!-- Inner layer: topmost, so Escape closes this first -->
+        <div
+          v-if="dialogOpen"
+          class="flex items-center justify-between gap-2 rounded-lg border border-(--accent) bg-(--accent-subtle) p-3"
+        >
+          <p class="text-sm text-(--accent-text)">
+            Nested dialog — Esc closes me before the panel.
+          </p>
+          <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-elevated) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+            top
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) flex items-center justify-between">
+      <span class="text-(--fg-subtle)">last dismissed via Esc</span>
+      <span class="text-(--accent-text)">{{ lastDismissed ?? '—' }}</span>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Only the topmost layer responds to a single Escape press, so nested dismissables close in the right order.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useEscapeKey/index.test.ts b/vue/toolkit/src/composables/sensors/useEscapeKey/index.test.ts
new file mode 100644
index 0000000..7f267e7
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useEscapeKey/index.test.ts
@@ -0,0 +1,59 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { useEscapeKey } from '.';
+
+function dispatchEscape() {
+  globalThis.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+}
+
+describe(useEscapeKey, () => {
+  afterEach(() => {
+    // Ensure no lingering subscribers between tests
+  });
+
+  it('fires handler on Escape', () => {
+    const h = vi.fn();
+    const stop = useEscapeKey(h);
+
+    dispatchEscape();
+    expect(h).toHaveBeenCalledTimes(1);
+
+    stop();
+  });
+
+  it('ignores non-Escape keys', () => {
+    const h = vi.fn();
+    const stop = useEscapeKey(h);
+
+    globalThis.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+    expect(h).not.toHaveBeenCalled();
+
+    stop();
+  });
+
+  it('only topmost handler fires when multiple are stacked', () => {
+    const bottom = vi.fn();
+    const top = vi.fn();
+
+    const stopBottom = useEscapeKey(bottom);
+    const stopTop = useEscapeKey(top);
+
+    dispatchEscape();
+    expect(top).toHaveBeenCalledTimes(1);
+    expect(bottom).not.toHaveBeenCalled();
+
+    stopTop();
+    dispatchEscape();
+    expect(bottom).toHaveBeenCalledTimes(1);
+
+    stopBottom();
+  });
+
+  it('stop handle unsubscribes the listener', () => {
+    const h = vi.fn();
+    const stop = useEscapeKey(h);
+    stop();
+
+    dispatchEscape();
+    expect(h).not.toHaveBeenCalled();
+  });
+});
diff --git a/vue/toolkit/src/composables/sensors/useEscapeKey/index.ts b/vue/toolkit/src/composables/sensors/useEscapeKey/index.ts
new file mode 100644
index 0000000..eee7b0a
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useEscapeKey/index.ts
@@ -0,0 +1,60 @@
+import type { VoidFunction } from '@robonen/stdlib';
+import { noop } from '@robonen/stdlib';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+import { defaultWindow } from '@/types';
+
+type EscapeListener = (event: KeyboardEvent) => void;
+
+// Module-scoped stack: only the topmost non-paused layer handles Escape so that
+// nested dismissables behave correctly (top-most dialog closes first).
+const stack: EscapeListener[] = [];
+let installed = false;
+let cleanup: VoidFunction = noop;
+
+function install() {
+  if (installed || !defaultWindow) return;
+  installed = true;
+
+  cleanup = useEventListener(defaultWindow, 'keydown', (event: KeyboardEvent) => {
+    if (event.key !== 'Escape') return;
+
+    const top = stack.at(-1);
+    top?.(event);
+  }, { capture: true });
+}
+
+function uninstall() {
+  if (!installed || stack.length > 0) return;
+  installed = false;
+  cleanup();
+  cleanup = noop;
+}
+
+/**
+ * @name useEscapeKey
+ * @category Sensors
+ * @description Register a callback for the topmost Escape keydown. Uses an internal
+ * stack so that nested layers (e.g. nested Dialogs) dismiss in the correct order —
+ * only the most recently-registered listener fires for a given keydown.
+ *
+ * @param {(event: KeyboardEvent) => void} handler Callback invoked on the topmost Escape
+ * @returns {VoidFunction} Stop handle that removes the subscription
+ *
+ * @since 0.0.14
+ */
+export function useEscapeKey(handler: EscapeListener): VoidFunction {
+  if (!defaultWindow) return noop;
+
+  install();
+  stack.push(handler);
+
+  const stop = () => {
+    const i = stack.lastIndexOf(handler);
+    if (i !== -1) stack.splice(i, 1);
+    uninstall();
+  };
+
+  tryOnScopeDispose(stop);
+  return stop;
+}
diff --git a/vue/toolkit/src/composables/sensors/useFocus/demo.vue b/vue/toolkit/src/composables/sensors/useFocus/demo.vue
new file mode 100644
index 0000000..56ee3ce
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useFocus/demo.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue';
+import { useFocus } from './index';
+
+const input = useTemplateRef<HTMLInputElement>('input');
+const { focused } = useFocus(input);
+
+const email = ref('ada@example.com');
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="space-y-2">
+      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Newsletter email
+      </label>
+      <input
+        ref="input"
+        v-model="email"
+        type="email"
+        placeholder="you@example.com"
+        class="w-full rounded-lg border bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        :class="focused ? 'border-(--accent)' : 'border-(--border)'"
+      >
+    </div>
+
+    <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2.5">
+      <span class="text-sm text-(--fg-muted)">Focus state</span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium transition"
+        :class="focused
+          ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        <span
+          class="size-1.5 rounded-full transition"
+          :class="focused ? 'bg-emerald-500' : 'bg-(--fg-subtle)'"
+        />
+        {{ focused ? 'Focused' : 'Blurred' }}
+      </span>
+    </div>
+
+    <div class="flex gap-2">
+      <button
+        type="button"
+        :disabled="focused"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="focused = true"
+      >
+        Focus input
+      </button>
+      <button
+        type="button"
+        :disabled="!focused"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="focused = false"
+      >
+        Blur input
+      </button>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      <code class="font-mono">focused</code> is writable &mdash; click the buttons or use Tab to drive it.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useFocus/index.test.ts b/vue/toolkit/src/composables/sensors/useFocus/index.test.ts
new file mode 100644
index 0000000..fd0dd5c
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useFocus/index.test.ts
@@ -0,0 +1,173 @@
+import { describe, expect, it } from 'vitest';
+import { effectScope, nextTick, ref } from 'vue';
+import { useFocus } from '.';
+
+function host<T>(fn: () => T): { result: T; stop: () => void } {
+  const scope = effectScope();
+  let result!: T;
+  scope.run(() => {
+    result = fn();
+  });
+  return { result, stop: () => scope.stop() };
+}
+
+describe(useFocus, () => {
+  it('reflects focus and blur events on the target', async () => {
+    const input = document.createElement('input');
+    document.body.appendChild(input);
+
+    const { result, stop } = host(() => useFocus(input));
+    await nextTick();
+
+    expect(result.focused.value).toBeFalsy();
+
+    input.dispatchEvent(new FocusEvent('focus'));
+    expect(result.focused.value).toBeTruthy();
+
+    input.dispatchEvent(new FocusEvent('blur'));
+    expect(result.focused.value).toBeFalsy();
+
+    stop();
+    input.remove();
+  });
+
+  it('focuses the element when writing true', async () => {
+    const input = document.createElement('input');
+    document.body.appendChild(input);
+
+    const { result, stop } = host(() => useFocus(input));
+    await nextTick();
+
+    result.focused.value = true;
+    // jsdom dispatches the focus event synchronously from .focus()
+    expect(document.activeElement).toBe(input);
+    expect(result.focused.value).toBeTruthy();
+
+    stop();
+    input.remove();
+  });
+
+  it('blurs the element when writing false', async () => {
+    const input = document.createElement('input');
+    document.body.appendChild(input);
+
+    const { result, stop } = host(() => useFocus(input));
+    await nextTick();
+
+    result.focused.value = true;
+    expect(document.activeElement).toBe(input);
+
+    result.focused.value = false;
+    expect(document.activeElement).not.toBe(input);
+    expect(result.focused.value).toBeFalsy();
+
+    stop();
+    input.remove();
+  });
+
+  it('focuses on mount when initialValue is true', async () => {
+    const input = document.createElement('input');
+    document.body.appendChild(input);
+
+    const { result, stop } = host(() => useFocus(input, { initialValue: true }));
+    // the watch runs with flush: 'post'
+    await nextTick();
+
+    expect(document.activeElement).toBe(input);
+    expect(result.focused.value).toBeTruthy();
+
+    stop();
+    input.remove();
+  });
+
+  it('passes preventScroll to focus()', async () => {
+    const input = document.createElement('input');
+    document.body.appendChild(input);
+    let receivedOptions: FocusOptions | undefined;
+    const originalFocus = input.focus.bind(input);
+    input.focus = (opts?: FocusOptions) => {
+      receivedOptions = opts;
+      originalFocus(opts);
+    };
+
+    const { result, stop } = host(() => useFocus(input, { preventScroll: true }));
+    await nextTick();
+
+    result.focused.value = true;
+    expect(receivedOptions).toEqual({ preventScroll: true });
+
+    stop();
+    input.remove();
+  });
+
+  it('respects focusVisible by checking :focus-visible', async () => {
+    const input = document.createElement('input');
+    document.body.appendChild(input);
+    // emulate the element NOT matching :focus-visible (e.g. mouse focus)
+    input.matches = () => false;
+
+    const { result, stop } = host(() => useFocus(input, { focusVisible: true }));
+    await nextTick();
+
+    input.dispatchEvent(new FocusEvent('focus'));
+    // focus should be ignored because :focus-visible did not match
+    expect(result.focused.value).toBeFalsy();
+
+    // now emulate a keyboard focus that does match
+    input.matches = (selector: string) => selector === ':focus-visible';
+    input.dispatchEvent(new FocusEvent('focus'));
+    expect(result.focused.value).toBeTruthy();
+
+    stop();
+    input.remove();
+  });
+
+  it('tracks a reactive (changing) target', async () => {
+    const a = document.createElement('input');
+    const b = document.createElement('input');
+    document.body.append(a, b);
+
+    const target = ref<HTMLElement>(a);
+    const { result, stop } = host(() => useFocus(target));
+    await nextTick();
+
+    // start unfocused, then focus the first target
+    a.dispatchEvent(new FocusEvent('focus'));
+    expect(result.focused.value).toBeTruthy();
+    a.dispatchEvent(new FocusEvent('blur'));
+    expect(result.focused.value).toBeFalsy();
+
+    // swap the tracked target; listeners follow the reactive ref
+    target.value = b;
+    await nextTick();
+
+    // events on the new element are now tracked
+    b.dispatchEvent(new FocusEvent('focus'));
+    expect(result.focused.value).toBeTruthy();
+    b.dispatchEvent(new FocusEvent('blur'));
+    expect(result.focused.value).toBeFalsy();
+
+    // events on the old element no longer affect state
+    a.dispatchEvent(new FocusEvent('focus'));
+    expect(result.focused.value).toBeFalsy();
+
+    stop();
+    a.remove();
+    b.remove();
+  });
+
+  it('does not throw when the target is null', async () => {
+    const target = ref<HTMLElement | null>(null);
+    const { result, stop } = host(() => useFocus(target));
+    await nextTick();
+
+    expect(result.focused.value).toBeFalsy();
+    // writing to a null target must be a no-op, not a crash
+    expect(() => {
+      result.focused.value = true;
+    }).not.toThrow();
+    expect(result.focused.value).toBeFalsy();
+
+    stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/sensors/useFocus/index.ts b/vue/toolkit/src/composables/sensors/useFocus/index.ts
new file mode 100644
index 0000000..8deb671
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useFocus/index.ts
@@ -0,0 +1,113 @@
+import { computed, shallowRef, watch } from 'vue';
+import type { WritableComputedRef } from 'vue';
+import { unrefElement } from '@/composables/component/unrefElement';
+import type { MaybeComputedElementRef } from '@/composables/component/unrefElement';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import type { ConfigurableWindow } from '@/types';
+
+export interface UseFocusOptions extends ConfigurableWindow {
+  /**
+   * Initial focus state. When `true`, the element is focused on mount.
+   *
+   * @default false
+   */
+  initialValue?: boolean;
+  /**
+   * Only consider the element focused when it matches `:focus-visible`,
+   * mirroring the browser's keyboard-focus heuristics.
+   *
+   * @default false
+   */
+  focusVisible?: boolean;
+  /**
+   * Prevent the browser from scrolling the element into view when focusing it.
+   *
+   * @default false
+   */
+  preventScroll?: boolean;
+}
+
+export interface UseFocusReturn {
+  /**
+   * Reactive focus state. Read it to know whether the target is focused, or
+   * write to it to programmatically focus (`true`) or blur (`false`) the target.
+   */
+  focused: WritableComputedRef<boolean>;
+}
+
+/**
+ * @name useFocus
+ * @category Sensors
+ * @description Reactive focus state of an element. The returned `focused` ref tracks
+ * focus/blur events and can be written to in order to focus or blur the target.
+ *
+ * @param {MaybeComputedElementRef} target - The element (or template ref) to track.
+ * @param {UseFocusOptions} [options={}] - Options
+ * @returns {UseFocusReturn} An object containing the writable `focused` ref.
+ *
+ * @example
+ * const el = useTemplateRef<HTMLInputElement>('el');
+ * const { focused } = useFocus(el);
+ * // focus the element imperatively
+ * focused.value = true;
+ *
+ * @example
+ * // only treat keyboard focus as focused
+ * const { focused } = useFocus(el, { focusVisible: true });
+ *
+ * @since 0.0.15
+ */
+export function useFocus(
+  target: MaybeComputedElementRef,
+  options: UseFocusOptions = {},
+): UseFocusReturn {
+  const {
+    initialValue = false,
+    focusVisible = false,
+    preventScroll = false,
+  } = options;
+
+  const innerFocused = shallowRef(false);
+  const targetElement = computed(() => unrefElement(target) as HTMLElement | undefined | null);
+
+  const listenerOptions = { passive: true } as const;
+
+  useEventListener(
+    targetElement,
+    'focus',
+    (event: FocusEvent) => {
+      if (!focusVisible || (event.target as HTMLElement).matches?.(':focus-visible'))
+        innerFocused.value = true;
+    },
+    listenerOptions,
+  );
+
+  useEventListener(
+    targetElement,
+    'blur',
+    () => {
+      innerFocused.value = false;
+    },
+    listenerOptions,
+  );
+
+  const focused = computed<boolean>({
+    get: () => innerFocused.value,
+    set(value: boolean) {
+      if (!value && innerFocused.value)
+        targetElement.value?.blur();
+      else if (value && !innerFocused.value)
+        targetElement.value?.focus({ preventScroll });
+    },
+  });
+
+  watch(
+    targetElement,
+    () => {
+      focused.value = initialValue;
+    },
+    { immediate: true, flush: 'post' },
+  );
+
+  return { focused };
+}
diff --git a/vue/toolkit/src/composables/sensors/useFocusWithin/demo.vue b/vue/toolkit/src/composables/sensors/useFocusWithin/demo.vue
new file mode 100644
index 0000000..5ecaefe
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useFocusWithin/demo.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { useTemplateRef } from 'vue';
+import { useFocusWithin } from './index';
+
+const form = useTemplateRef<HTMLFormElement>('form');
+const { focused } = useFocusWithin(form);
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-3">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Shipping address
+      </span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium transition"
+        :class="focused
+          ? 'bg-sky-500/10 text-sky-600 dark:text-sky-400'
+          : 'border border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        <span
+          class="size-1.5 rounded-full transition"
+          :class="focused ? 'bg-sky-500' : 'bg-(--fg-subtle)'"
+        />
+        {{ focused ? 'Editing' : 'Idle' }}
+      </span>
+    </div>
+
+    <form
+      ref="form"
+      class="space-y-3 rounded-xl border bg-(--bg-elevated) p-4 transition"
+      :class="focused ? 'border-(--accent) ring-2 ring-(--ring)' : 'border-(--border)'"
+      @submit.prevent
+    >
+      <input
+        type="text"
+        placeholder="Full name"
+        value="Grace Hopper"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+      <input
+        type="text"
+        placeholder="Street address"
+        value="1701 Enterprise Ave"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+      <div class="flex gap-3">
+        <input
+          type="text"
+          placeholder="City"
+          value="Arlington"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+        <input
+          type="text"
+          placeholder="ZIP"
+          value="22202"
+          class="w-28 rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+      </div>
+    </form>
+
+    <p class="text-xs text-(--fg-subtle)">
+      The whole panel highlights while focus lives in <em>any</em> descendant field &mdash; tabbing between inputs stays "Editing".
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useFocusWithin/index.test.ts b/vue/toolkit/src/composables/sensors/useFocusWithin/index.test.ts
new file mode 100644
index 0000000..64dd15a
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useFocusWithin/index.test.ts
@@ -0,0 +1,194 @@
+import { describe, expect, it } from 'vitest';
+import { effectScope, nextTick, shallowRef } from 'vue';
+import { useFocusWithin } from '.';
+
+function makeTree(): { container: HTMLDivElement; input: HTMLInputElement; outside: HTMLButtonElement } {
+  const container = document.createElement('div');
+  const input = document.createElement('input');
+  container.appendChild(input);
+
+  const outside = document.createElement('button');
+
+  document.body.appendChild(container);
+  document.body.appendChild(outside);
+
+  return { container, input, outside };
+}
+
+describe(useFocusWithin, () => {
+  it('is not focused initially when nothing inside has focus', () => {
+    const { container } = makeTree();
+
+    const scope = effectScope();
+    let result: ReturnType<typeof useFocusWithin>;
+    scope.run(() => {
+      result = useFocusWithin(container);
+    });
+
+    expect(result!.focused.value).toBeFalsy();
+
+    scope.stop();
+    document.body.replaceChildren();
+  });
+
+  it('becomes focused when a descendant receives focus', async () => {
+    const { container, input } = makeTree();
+
+    const scope = effectScope();
+    let result: ReturnType<typeof useFocusWithin>;
+    scope.run(() => {
+      result = useFocusWithin(container);
+    });
+
+    input.focus();
+    container.dispatchEvent(new FocusEvent('focusin', { bubbles: true }));
+    await nextTick();
+
+    expect(result!.focused.value).toBeTruthy();
+
+    scope.stop();
+    document.body.replaceChildren();
+  });
+
+  it('is focused when the target element itself receives focus', async () => {
+    const { container } = makeTree();
+    container.tabIndex = 0;
+
+    const scope = effectScope();
+    let result: ReturnType<typeof useFocusWithin>;
+    scope.run(() => {
+      result = useFocusWithin(container);
+    });
+
+    container.focus();
+    container.dispatchEvent(new FocusEvent('focusin', { bubbles: true }));
+    await nextTick();
+
+    expect(result!.focused.value).toBeTruthy();
+
+    scope.stop();
+    document.body.replaceChildren();
+  });
+
+  it('clears focus when focus leaves the element entirely', async () => {
+    const { container, input, outside } = makeTree();
+
+    const scope = effectScope();
+    let result: ReturnType<typeof useFocusWithin>;
+    scope.run(() => {
+      result = useFocusWithin(container);
+    });
+
+    input.focus();
+    container.dispatchEvent(new FocusEvent('focusin', { bubbles: true }));
+    await nextTick();
+    expect(result!.focused.value).toBeTruthy();
+
+    // Move focus to an element outside the container.
+    outside.focus();
+    container.dispatchEvent(new FocusEvent('focusout', { bubbles: true, relatedTarget: outside }));
+    await nextTick();
+
+    expect(result!.focused.value).toBeFalsy();
+
+    scope.stop();
+    document.body.replaceChildren();
+  });
+
+  it('stays focused when focus moves between descendants', async () => {
+    const { container, input } = makeTree();
+    const second = document.createElement('input');
+    container.appendChild(second);
+
+    const scope = effectScope();
+    let result: ReturnType<typeof useFocusWithin>;
+    scope.run(() => {
+      result = useFocusWithin(container);
+    });
+
+    input.focus();
+    container.dispatchEvent(new FocusEvent('focusin', { bubbles: true }));
+    await nextTick();
+    expect(result!.focused.value).toBeTruthy();
+
+    // focusout fires as focus shifts, but the second input is still inside
+    // the container, so `:focus-within` keeps the state true.
+    second.focus();
+    container.dispatchEvent(new FocusEvent('focusout', { bubbles: true, relatedTarget: second }));
+    await nextTick();
+
+    expect(result!.focused.value).toBeTruthy();
+
+    scope.stop();
+    document.body.replaceChildren();
+  });
+
+  it('reflects focus that already lives inside the target on creation', () => {
+    const { container, input } = makeTree();
+    input.focus();
+
+    const scope = effectScope();
+    let result: ReturnType<typeof useFocusWithin>;
+    scope.run(() => {
+      result = useFocusWithin(container);
+    });
+
+    expect(result!.focused.value).toBeTruthy();
+
+    scope.stop();
+    document.body.replaceChildren();
+  });
+
+  it('accepts a reactive ref target', async () => {
+    const { container, input } = makeTree();
+    const targetRef = shallowRef<HTMLElement | null>(container);
+
+    const scope = effectScope();
+    let result: ReturnType<typeof useFocusWithin>;
+    scope.run(() => {
+      result = useFocusWithin(targetRef);
+    });
+
+    input.focus();
+    container.dispatchEvent(new FocusEvent('focusin', { bubbles: true }));
+    await nextTick();
+
+    expect(result!.focused.value).toBeTruthy();
+
+    scope.stop();
+    document.body.replaceChildren();
+  });
+
+  it('exposes a read-only computed (write throws / has no setter)', () => {
+    const { container } = makeTree();
+
+    const scope = effectScope();
+    let result: ReturnType<typeof useFocusWithin>;
+    scope.run(() => {
+      result = useFocusWithin(container);
+    });
+
+    // computed without a setter ignores writes (does not mutate internal state)
+    // @ts-expect-error - intentionally writing to a read-only computed
+    result!.focused.value = true;
+    expect(result!.focused.value).toBeFalsy();
+
+    scope.stop();
+    document.body.replaceChildren();
+  });
+
+  it('does not throw and stays false when window is unavailable (SSR)', () => {
+    const { container } = makeTree();
+
+    const scope = effectScope();
+    let result: ReturnType<typeof useFocusWithin>;
+    scope.run(() => {
+      result = useFocusWithin(container, { window: undefined });
+    });
+
+    expect(result!.focused.value).toBeFalsy();
+
+    scope.stop();
+    document.body.replaceChildren();
+  });
+});
diff --git a/vue/toolkit/src/composables/sensors/useFocusWithin/index.ts b/vue/toolkit/src/composables/sensors/useFocusWithin/index.ts
new file mode 100644
index 0000000..69a18f8
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useFocusWithin/index.ts
@@ -0,0 +1,83 @@
+import { computed, shallowRef } from 'vue';
+import type { ComputedRef } from 'vue';
+import { defaultWindow } from '@/types';
+import type { ConfigurableWindow } from '@/types';
+import { unrefElement } from '@/composables/component/unrefElement';
+import type { MaybeComputedElementRef } from '@/composables/component/unrefElement';
+import { useEventListener } from '@/composables/browser/useEventListener';
+
+export interface UseFocusWithinOptions extends ConfigurableWindow {}
+
+export interface UseFocusWithinReturn {
+  /**
+   * Whether the element or any of its descendants currently hold focus.
+   */
+  focused: ComputedRef<boolean>;
+}
+
+/**
+ * @name useFocusWithin
+ * @category Sensors
+ * @description Reactive tracking of whether an element or any of its
+ * descendants are focused, backed by the `focusin`/`focusout` events.
+ *
+ * @param {MaybeComputedElementRef} target Element to track
+ * @param {UseFocusWithinOptions} [options={}] Options
+ * @returns {UseFocusWithinReturn} `{ focused }` reactive focus-within state
+ *
+ * @example
+ * const el = useTemplateRef<HTMLElement>('el');
+ * const { focused } = useFocusWithin(el);
+ *
+ * @since 0.0.15
+ */
+export function useFocusWithin(
+  target: MaybeComputedElementRef,
+  options: UseFocusWithinOptions = {},
+): UseFocusWithinReturn {
+  const { window = defaultWindow } = options;
+
+  const _focused = shallowRef(false);
+  const focused = computed(() => _focused.value);
+
+  const activeElement = window?.document?.activeElement;
+
+  const targetElement = computed(() => unrefElement(target) as HTMLElement | undefined | null);
+
+  if (window) {
+    useEventListener(targetElement, 'focusin', () => {
+      _focused.value = true;
+    }, { passive: true });
+
+    useEventListener(targetElement, 'focusout', (event: FocusEvent) => {
+      // After focus leaves a descendant, confirm focus did not simply move to
+      // another descendant. `event.relatedTarget` carries the element about to
+      // receive focus; if it is still inside `target` we remain focused. We
+      // also consult the `:focus-within` pseudo-class as a fallback for cases
+      // where `relatedTarget` is unavailable.
+      const el = unrefElement(target);
+
+      if (!el) {
+        _focused.value = false;
+        return;
+      }
+
+      const next = event.relatedTarget as Node | null;
+      if (next && el.contains(next)) {
+        _focused.value = true;
+        return;
+      }
+
+      _focused.value = el.matches?.(':focus-within') ?? false;
+    }, { passive: true });
+  }
+
+  // Reflect focus that already lives inside the target on initialization.
+  const el = unrefElement(target);
+  if (el && activeElement && (el === activeElement || el.contains(activeElement)))
+    _focused.value = true;
+
+  return {
+    focused,
+  };
+}
diff --git a/vue/toolkit/src/composables/sensors/useFps/demo.vue b/vue/toolkit/src/composables/sensors/useFps/demo.vue
new file mode 100644
index 0000000..11aaa63
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useFps/demo.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { computed, onMounted, onScopeDispose, ref } from 'vue';
+import { useFps } from './index';
+
+const { fps, min, max, isActive, reset, pause, resume } = useFps({ every: 10 });
+
+// Optional artificial load so the FPS reading visibly reacts.
+const stress = ref(0);
+let raf = 0;
+
+function burn() {
+  if (stress.value > 0) {
+    const end = performance.now() + stress.value;
+    // Busy-wait to simulate a heavy frame and depress FPS.
+    while (performance.now() < end) { /* spin */ }
+  }
+  raf = requestAnimationFrame(burn);
+}
+// Client-only: requestAnimationFrame is undefined during SSR/prerender.
+onMounted(() => { raf = requestAnimationFrame(burn); });
+onScopeDispose(() => cancelAnimationFrame(raf));
+
+const health = computed(() => {
+  if (fps.value >= 55)
+    return { label: 'Smooth', cls: 'text-emerald-600 dark:text-emerald-400', dot: 'bg-emerald-500' };
+  if (fps.value >= 30)
+    return { label: 'Choppy', cls: 'text-amber-600 dark:text-amber-400', dot: 'bg-amber-500' };
+  return { label: 'Janky', cls: 'text-red-600 dark:text-red-400', dot: 'bg-red-500' };
+});
+
+const barWidth = computed(() => `${Math.min(100, (fps.value / 60) * 100)}%`);
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex items-baseline justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Frames / second
+        </span>
+        <span class="inline-flex items-center gap-1.5 text-xs font-medium" :class="health.cls">
+          <span class="size-1.5 rounded-full" :class="health.dot" />
+          {{ health.label }}
+        </span>
+      </div>
+
+      <div class="mt-1 flex items-baseline gap-2">
+        <span class="font-mono text-4xl font-bold tabular-nums text-(--fg)">{{ fps }}</span>
+        <span class="text-sm text-(--fg-subtle)">fps</span>
+      </div>
+
+      <div class="mt-3 h-1.5 overflow-hidden rounded-full bg-(--bg-inset)">
+        <div
+          class="h-full rounded-full transition-[width] duration-150"
+          :class="health.dot"
+          :style="{ width: barWidth }"
+        />
+      </div>
+    </div>
+
+    <div class="grid grid-cols-2 gap-3">
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Min</div>
+        <div class="font-mono text-xl font-bold tabular-nums text-(--fg)">
+          {{ Number.isFinite(min) ? min : '—' }}
+        </div>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Max</div>
+        <div class="font-mono text-xl font-bold tabular-nums text-(--fg)">{{ max }}</div>
+      </div>
+    </div>
+
+    <div class="space-y-1.5">
+      <div class="flex items-center justify-between text-xs">
+        <span class="font-medium uppercase tracking-wide text-(--fg-subtle)">Simulated load</span>
+        <span class="font-mono tabular-nums text-(--fg-muted)">{{ stress }} ms/frame</span>
+      </div>
+      <input
+        v-model.number="stress"
+        type="range"
+        min="0"
+        max="40"
+        step="2"
+        class="w-full accent-(--accent)"
+      >
+    </div>
+
+    <div class="flex gap-2">
+      <button
+        type="button"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="isActive ? pause() : resume()"
+      >
+        {{ isActive ? 'Pause' : 'Resume' }}
+      </button>
+      <button
+        type="button"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="reset"
+      >
+        Reset min / max
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useFps/index.test.ts b/vue/toolkit/src/composables/sensors/useFps/index.test.ts
new file mode 100644
index 0000000..3cf70d0
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useFps/index.test.ts
@@ -0,0 +1,244 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope } from 'vue';
+import { useFps } from '.';
+
+let rafCallbacks: Array<(time: number) => void> = [];
+let rafIdCounter = 0;
+
+beforeEach(() => {
+  rafCallbacks = [];
+  rafIdCounter = 0;
+
+  vi.stubGlobal('requestAnimationFrame', (cb: (time: number) => void) => {
+    const id = ++rafIdCounter;
+    rafCallbacks.push(cb);
+    return id;
+  });
+
+  vi.stubGlobal('cancelAnimationFrame', vi.fn());
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+function triggerFrame(time: number) {
+  const cbs = [...rafCallbacks];
+  rafCallbacks = [];
+  cbs.forEach(cb => cb(time));
+}
+
+function triggerFrames(startTime: number, interval: number, count: number) {
+  for (let i = 0; i < count; i++) {
+    triggerFrame(startTime + i * interval);
+  }
+}
+
+describe(useFps, () => {
+  it('starts at 0 fps', () => {
+    const scope = effectScope();
+    let result: ReturnType<typeof useFps>;
+
+    scope.run(() => {
+      result = useFps();
+    });
+
+    expect(result!.fps.value).toBe(0);
+    scope.stop();
+  });
+
+  it('reports fps after "every" frames', () => {
+    const scope = effectScope();
+    let result: ReturnType<typeof useFps>;
+
+    scope.run(() => {
+      result = useFps({ every: 5 });
+    });
+
+    // ~60fps = 16.67ms per frame
+    // First frame has delta=0, skipped by useFps. Need 5 real-delta frames.
+    triggerFrame(100); // delta=0, skipped
+    triggerFrame(116.67); // delta=16.67
+    triggerFrame(133.33); // delta=16.66
+    triggerFrame(150); // delta=16.67
+    triggerFrame(166.67); // delta=16.67
+    triggerFrame(183.33); // delta=16.66 → 5 deltas collected, update
+
+    expect(result!.fps.value).toBe(60);
+    scope.stop();
+  });
+
+  it('does not update fps before collecting enough frames', () => {
+    const scope = effectScope();
+    let result: ReturnType<typeof useFps>;
+
+    scope.run(() => {
+      result = useFps({ every: 10 });
+    });
+
+    triggerFrame(100);
+    triggerFrame(116.67);
+    triggerFrame(133.33);
+
+    expect(result!.fps.value).toBe(0);
+    scope.stop();
+  });
+
+  it('tracks min and max fps', () => {
+    const scope = effectScope();
+    let result: ReturnType<typeof useFps>;
+
+    scope.run(() => {
+      result = useFps({ every: 3 });
+    });
+
+    // First batch: ~60fps (16.67ms intervals)
+    triggerFrame(100); // delta=0, skipped
+    triggerFrame(116.67); // delta=16.67
+    triggerFrame(133.33); // delta=16.66
+    triggerFrame(150); // delta=16.67 → 3 deltas, update
+
+    const firstFps = result!.fps.value;
+    expect(firstFps).toBe(60);
+
+    // Second batch: ~30fps (33.33ms intervals)
+    triggerFrame(183.33); // delta=33.33
+    triggerFrame(216.67); // delta=33.34
+    triggerFrame(250); // delta=33.33 → 3 deltas, update
+
+    const secondFps = result!.fps.value;
+    expect(secondFps).toBe(30);
+
+    expect(result!.max.value).toBe(60);
+    expect(result!.min.value).toBe(30);
+
+    scope.stop();
+  });
+
+  it('resets min, max, and fps', () => {
+    const scope = effectScope();
+    let result: ReturnType<typeof useFps>;
+
+    scope.run(() => {
+      result = useFps({ every: 3 });
+    });
+
+    triggerFrame(100);
+    triggerFrame(116.67);
+    triggerFrame(133.33);
+    triggerFrame(150);
+
+    expect(result!.fps.value).toBe(60);
+
+    result!.reset();
+
+    expect(result!.fps.value).toBe(0);
+    expect(result!.min.value).toBe(Infinity);
+    expect(result!.max.value).toBe(0);
+
+    scope.stop();
+  });
+
+  it('cleans up on scope dispose', () => {
+    const scope = effectScope();
+
+    scope.run(() => {
+      useFps();
+    });
+
+    // Should not throw on stop
+    scope.stop();
+
+    // No more raf callbacks should be registered after stop
+    triggerFrame(100);
+    expect(rafCallbacks).toHaveLength(0);
+  });
+
+  it('does nothing when window is undefined (SSR)', () => {
+    const scope = effectScope();
+    let result: ReturnType<typeof useFps>;
+
+    scope.run(() => {
+      result = useFps({ window: undefined as any });
+    });
+
+    expect(result!.fps.value).toBe(0);
+    scope.stop();
+  });
+
+  it('is active by default', () => {
+    const scope = effectScope();
+    let result: ReturnType<typeof useFps>;
+
+    scope.run(() => {
+      result = useFps();
+    });
+
+    expect(result!.isActive.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('does not start when immediate is false', () => {
+    const scope = effectScope();
+    let result: ReturnType<typeof useFps>;
+
+    scope.run(() => {
+      result = useFps({ immediate: false });
+    });
+
+    expect(result!.isActive.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('pauses and resumes fps tracking', () => {
+    const scope = effectScope();
+    let result: ReturnType<typeof useFps>;
+
+    scope.run(() => {
+      result = useFps({ every: 3 });
+    });
+
+    // Collect one batch
+    triggerFrame(100);
+    triggerFrame(116.67);
+    triggerFrame(133.33);
+    triggerFrame(150);
+
+    expect(result!.fps.value).toBe(60);
+
+    result!.pause();
+    expect(result!.isActive.value).toBeFalsy();
+
+    // Frames while paused should not update
+    triggerFrame(200);
+    triggerFrame(300);
+    triggerFrame(400);
+    triggerFrame(500);
+
+    expect(result!.fps.value).toBe(60);
+
+    result!.resume();
+    expect(result!.isActive.value).toBeTruthy();
+
+    scope.stop();
+  });
+
+  it('toggles fps tracking', () => {
+    const scope = effectScope();
+    let result: ReturnType<typeof useFps>;
+
+    scope.run(() => {
+      result = useFps();
+    });
+
+    expect(result!.isActive.value).toBeTruthy();
+
+    result!.toggle();
+    expect(result!.isActive.value).toBeFalsy();
+
+    result!.toggle();
+    expect(result!.isActive.value).toBeTruthy();
+
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/sensors/useFps/index.ts b/vue/toolkit/src/composables/sensors/useFps/index.ts
new file mode 100644
index 0000000..b8485f4
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useFps/index.ts
@@ -0,0 +1,109 @@
+import type { ConfigurableWindow, ResumableActions, ResumableOptions } from '@/types';
+import type { UseRafFnCallbackArgs } from '@/composables/animation/useRafFn';
+import type { Ref } from 'vue';
+import { ref } from 'vue';
+import { useRafFn } from '@/composables/animation/useRafFn';
+
+export interface UseFpsOptions extends ResumableOptions, ConfigurableWindow {
+  /**
+   * Number of frames to average over for a smoother reading.
+   *
+   * @default 10
+   */
+  every?: number;
+}
+
+export interface UseFpsReturn extends ResumableActions {
+  /**
+   * Current frames per second (averaged over the last `every` frames)
+   */
+  fps: Readonly<Ref<number>>;
+
+  /**
+   * Minimum FPS recorded since the composable was created or last reset
+   */
+  min: Readonly<Ref<number>>;
+
+  /**
+   * Maximum FPS recorded since the composable was created or last reset
+   */
+  max: Readonly<Ref<number>>;
+
+  /**
+   * Whether the FPS counter is currently active
+   */
+  isActive: Readonly<Ref<boolean>>;
+
+  /**
+   * Reset min/max tracking
+   */
+  reset: () => void;
+}
+
+/**
+ * Reactive FPS counter based on `requestAnimationFrame`.
+ * Reports a smoothed FPS value averaged over a configurable number of frames,
+ * and tracks min/max values.
+ *
+ * @param options - Configuration options
+ *
+ * @example
+ * ```ts
+ * const { fps, min, max, reset } = useFps();
+ * ```
+ */
+export function useFps(options: UseFpsOptions = {}): UseFpsReturn {
+  const { every = 10, ...rafOptions } = options;
+
+  const fps = ref(0);
+  const min = ref(Infinity);
+  const max = ref(0);
+
+  let deltaSum = 0;
+  let frameCount = 0;
+
+  function update({ delta }: UseRafFnCallbackArgs) {
+    if (!delta)
+      return;
+
+    deltaSum += delta;
+    frameCount++;
+
+    if (frameCount < every)
+      return;
+
+    const currentFps = Math.round(1000 / (deltaSum / frameCount));
+
+    fps.value = currentFps;
+
+    if (currentFps < min.value)
+      min.value = currentFps;
+
+    if (currentFps > max.value)
+      max.value = currentFps;
+
+    deltaSum = 0;
+    frameCount = 0;
+  }
+
+  function reset() {
+    min.value = Infinity;
+    max.value = 0;
+    fps.value = 0;
+    deltaSum = 0;
+    frameCount = 0;
+  }
+
+  const { isActive, pause, resume, toggle } = useRafFn(update, rafOptions);
+
+  return {
+    fps,
+    min,
+    max,
+    isActive,
+    reset,
+    pause,
+    resume,
+    toggle,
+  };
+}
diff --git a/vue/toolkit/src/composables/sensors/useGamepad/demo.vue b/vue/toolkit/src/composables/sensors/useGamepad/demo.vue
new file mode 100644
index 0000000..6b706ca
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useGamepad/demo.vue
@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { mapGamepadToXbox360Controller, useGamepad } from './index';
+
+const { gamepads, isSupported } = useGamepad();
+
+const gamepad = computed(() => gamepads.value[0]);
+const hasPad = computed(() => Boolean(gamepad.value));
+const controller = mapGamepadToXbox360Controller(gamepad);
+
+function pct(value: number): string {
+  // Map a -1..1 axis to a 0..100 position for the stick dots.
+  return `${((value + 1) / 2) * 100}%`;
+}
+
+const faceButtons = computed(() => {
+  const c = controller.value;
+  if (!c)
+    return [];
+  return [
+    { key: 'A', pressed: c.buttons.a.pressed, color: 'text-emerald-500' },
+    { key: 'B', pressed: c.buttons.b.pressed, color: 'text-red-500' },
+    { key: 'X', pressed: c.buttons.x.pressed, color: 'text-sky-500' },
+    { key: 'Y', pressed: c.buttons.y.pressed, color: 'text-amber-500' },
+  ];
+});
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      v-if="!isSupported"
+      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-center text-sm text-amber-700 dark:text-amber-300"
+    >
+      The Gamepad API is not supported in this browser.
+    </div>
+
+    <template v-else>
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Gamepad
+        </span>
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium transition"
+          :class="hasPad
+            ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+            : 'border border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+        >
+          <span
+            class="size-1.5 rounded-full"
+            :class="hasPad ? 'bg-emerald-500 animate-pulse' : 'bg-(--fg-subtle)'"
+          />
+          {{ hasPad ? 'Connected' : 'Waiting' }}
+        </span>
+      </div>
+
+      <div
+        v-if="!hasPad"
+        class="rounded-xl border border-dashed border-(--border) bg-(--bg-inset) p-6 text-center"
+      >
+        <p class="text-sm font-medium text-(--fg)">No controller detected</p>
+        <p class="mt-1 text-xs text-(--fg-subtle)">
+          Connect a gamepad and press any button to wake it.
+        </p>
+      </div>
+
+      <template v-else-if="controller">
+        <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+          <div class="truncate text-xs text-(--fg-subtle)" :title="gamepad?.id">
+            {{ gamepad?.id }}
+          </div>
+
+          <div class="mt-3 grid grid-cols-2 gap-4">
+            <div class="space-y-2">
+              <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+                Buttons
+              </div>
+              <div class="flex flex-wrap gap-1.5">
+                <span
+                  v-for="b in faceButtons"
+                  :key="b.key"
+                  class="inline-flex size-7 items-center justify-center rounded-md border text-xs font-bold tabular-nums transition"
+                  :class="b.pressed
+                    ? `border-(--accent) bg-(--accent-subtle) ${b.color}`
+                    : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+                >
+                  {{ b.key }}
+                </span>
+              </div>
+            </div>
+
+            <div class="space-y-2">
+              <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+                Triggers
+              </div>
+              <div class="space-y-1.5">
+                <div
+                  v-for="(t, side) in { LT: controller.triggers.left, RT: controller.triggers.right }"
+                  :key="side"
+                  class="flex items-center gap-2"
+                >
+                  <span class="w-6 font-mono text-xs text-(--fg-muted)">{{ side }}</span>
+                  <div class="h-1.5 flex-1 overflow-hidden rounded-full bg-(--bg-inset)">
+                    <div
+                      class="h-full rounded-full bg-(--accent) transition-[width]"
+                      :style="{ width: `${t.value * 100}%` }"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="mt-4 grid grid-cols-2 gap-4">
+            <div
+              v-for="(stick, side) in { Left: controller.stick.left, Right: controller.stick.right }"
+              :key="side"
+              class="space-y-2"
+            >
+              <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+                {{ side }} stick
+              </div>
+              <div class="relative aspect-square w-full rounded-lg border border-(--border) bg-(--bg-inset)">
+                <div
+                  class="absolute size-3 -translate-x-1/2 -translate-y-1/2 rounded-full transition-all"
+                  :class="stick.button.pressed ? 'bg-(--accent)' : 'bg-(--fg-muted)'"
+                  :style="{ left: pct(stick.horizontal), top: pct(stick.vertical) }"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </template>
+
+    <p class="text-xs text-(--fg-subtle)">
+      State polls every animation frame and stays paused while no pad is connected.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useGamepad/index.test.ts b/vue/toolkit/src/composables/sensors/useGamepad/index.test.ts
new file mode 100644
index 0000000..da449f4
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useGamepad/index.test.ts
@@ -0,0 +1,294 @@
+import { describe, expect, it, vi } from 'vitest';
+import { computed, effectScope } from 'vue';
+import type { UseGamepadReturn } from '.';
+import { mapGamepadToXbox360Controller, useGamepad } from '.';
+
+function makeButton(value = 0, pressed = false): GamepadButton {
+  return { value, pressed, touched: pressed } as GamepadButton;
+}
+
+function makeGamepad(index: number, overrides: Partial<Gamepad> = {}): Gamepad {
+  return {
+    id: `pad-${index}`,
+    index,
+    connected: true,
+    mapping: 'standard',
+    timestamp: 0,
+    vibrationActuator: null,
+    hapticActuators: [],
+    axes: [0, 0, 0, 0],
+    buttons: Array.from({ length: 16 }, () => makeButton()),
+    ...overrides,
+  } as Gamepad;
+}
+
+function stubNavigator(initial: Array<Gamepad | null> = []) {
+  let pads = initial;
+  const getGamepads = vi.fn(() => pads);
+
+  return {
+    navigator: { getGamepads } as unknown as Navigator,
+    getGamepads,
+    setPads: (next: Array<Gamepad | null>) => { pads = next; },
+  };
+}
+
+function stubWindow() {
+  const handlers = new Map<string, Set<EventListener>>();
+  let rafCallback: FrameRequestCallback | null = null;
+  let rafId = 0;
+
+  const window = {
+    addEventListener: vi.fn((event: string, listener: EventListener) => {
+      const set = handlers.get(event) ?? new Set();
+      set.add(listener);
+      handlers.set(event, set);
+    }),
+    removeEventListener: vi.fn((event: string, listener: EventListener) => {
+      handlers.get(event)?.delete(listener);
+    }),
+    requestAnimationFrame: vi.fn((cb: FrameRequestCallback) => {
+      rafCallback = cb;
+      return ++rafId;
+    }),
+    cancelAnimationFrame: vi.fn(() => {
+      rafCallback = null;
+    }),
+  } as unknown as Window;
+
+  return {
+    window,
+    emit: (event: string, gamepad: Gamepad) => {
+      const set = handlers.get(event);
+      if (set)
+        for (const listener of set) listener({ gamepad } as unknown as Event);
+    },
+    hasListener: (event: string) => (handlers.get(event)?.size ?? 0) > 0,
+    tick: () => { rafCallback?.(performance.now()); },
+    isRafScheduled: () => rafCallback !== null,
+  };
+}
+
+describe(useGamepad, () => {
+  it('reports unsupported when getGamepads is missing', () => {
+    const scope = effectScope();
+    let result: UseGamepadReturn;
+    scope.run(() => {
+      result = useGamepad({ navigator: {} as Navigator, window: stubWindow().window });
+    });
+
+    expect(result!.isSupported.value).toBeFalsy();
+    expect(result!.gamepads.value).toEqual([]);
+    scope.stop();
+  });
+
+  it('handles the SSR path (no navigator/window) gracefully', () => {
+    const scope = effectScope();
+    let result: UseGamepadReturn;
+    scope.run(() => {
+      result = useGamepad({ navigator: undefined, window: undefined });
+    });
+
+    expect(result!.isSupported.value).toBeFalsy();
+    expect(result!.gamepads.value).toEqual([]);
+    expect(() => result!.resume()).not.toThrow();
+    scope.stop();
+  });
+
+  it('reports supported when getGamepads exists', () => {
+    const { navigator } = stubNavigator();
+    const { window } = stubWindow();
+    const scope = effectScope();
+    let result: UseGamepadReturn;
+    scope.run(() => {
+      result = useGamepad({ navigator, window });
+    });
+
+    expect(result!.isSupported.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('registers passive connection/disconnection listeners', () => {
+    const { navigator } = stubNavigator();
+    const win = stubWindow();
+    const scope = effectScope();
+    scope.run(() => {
+      useGamepad({ navigator, window: win.window });
+    });
+
+    expect(win.hasListener('gamepadconnected')).toBeTruthy();
+    expect(win.hasListener('gamepaddisconnected')).toBeTruthy();
+    expect(win.window.addEventListener).toHaveBeenCalledWith(
+      'gamepadconnected',
+      expect.any(Function),
+      { passive: true },
+    );
+    scope.stop();
+  });
+
+  it('adds a gamepad and fires onConnected when one connects', () => {
+    const { navigator } = stubNavigator();
+    const win = stubWindow();
+    const scope = effectScope();
+    const connected = vi.fn();
+    let result: UseGamepadReturn;
+    scope.run(() => {
+      result = useGamepad({ navigator, window: win.window });
+      result.onConnected(connected);
+    });
+
+    const pad = makeGamepad(0);
+    win.emit('gamepadconnected', pad);
+
+    expect(connected).toHaveBeenCalledWith(0);
+    expect(result!.gamepads.value).toHaveLength(1);
+    expect(result!.gamepads.value[0]!.id).toBe('pad-0');
+    expect(win.isRafScheduled()).toBeTruthy();
+    scope.stop();
+  });
+
+  it('does not double-add the same gamepad index', () => {
+    const { navigator } = stubNavigator();
+    const win = stubWindow();
+    const scope = effectScope();
+    const connected = vi.fn();
+    let result: UseGamepadReturn;
+    scope.run(() => {
+      result = useGamepad({ navigator, window: win.window });
+      result.onConnected(connected);
+    });
+
+    win.emit('gamepadconnected', makeGamepad(0));
+    win.emit('gamepadconnected', makeGamepad(0));
+
+    expect(connected).toHaveBeenCalledTimes(1);
+    expect(result!.gamepads.value.filter(Boolean)).toHaveLength(1);
+    scope.stop();
+  });
+
+  it('removes a gamepad and fires onDisconnected when one disconnects', () => {
+    const { navigator } = stubNavigator();
+    const win = stubWindow();
+    const scope = effectScope();
+    const disconnected = vi.fn();
+    let result: UseGamepadReturn;
+    scope.run(() => {
+      result = useGamepad({ navigator, window: win.window });
+      result.onDisconnected(disconnected);
+    });
+
+    const pad = makeGamepad(0);
+    win.emit('gamepadconnected', pad);
+    win.emit('gamepaddisconnected', pad);
+
+    expect(disconnected).toHaveBeenCalledWith(0);
+    expect(result!.gamepads.value).toHaveLength(0);
+    scope.stop();
+  });
+
+  it('polls live button/axis state on every animation frame', () => {
+    const stub = stubNavigator();
+    const win = stubWindow();
+    const scope = effectScope();
+    let result: UseGamepadReturn;
+    scope.run(() => {
+      result = useGamepad({ navigator: stub.navigator, window: win.window });
+    });
+
+    const pad = makeGamepad(0);
+    stub.setPads([pad]);
+    win.emit('gamepadconnected', pad);
+
+    // Simulate the live gamepad mutating: press button A and push left stick.
+    const moved = makeGamepad(0, {
+      buttons: [makeButton(1, true), ...Array.from({ length: 15 }, () => makeButton())],
+      axes: [-1, 0, 0, 0],
+    });
+    stub.setPads([moved]);
+
+    win.tick();
+
+    expect(result!.gamepads.value[0]!.buttons[0]!.pressed).toBeTruthy();
+    expect(result!.gamepads.value[0]!.axes[0]).toBe(-1);
+    scope.stop();
+  });
+
+  it('stops the raf loop when the last gamepad disconnects', () => {
+    const stub = stubNavigator();
+    const win = stubWindow();
+    const scope = effectScope();
+    let result: UseGamepadReturn;
+    scope.run(() => {
+      result = useGamepad({ navigator: stub.navigator, window: win.window });
+    });
+
+    const pad = makeGamepad(0);
+    stub.setPads([pad]);
+    win.emit('gamepadconnected', pad);
+    expect(result!.isActive.value).toBeTruthy();
+
+    win.emit('gamepaddisconnected', pad);
+    expect(result!.isActive.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('onConnected returns a stop function that removes the listener', () => {
+    const { navigator } = stubNavigator();
+    const win = stubWindow();
+    const scope = effectScope();
+    const connected = vi.fn();
+    let stop: () => void;
+    scope.run(() => {
+      const result = useGamepad({ navigator, window: win.window });
+      stop = result.onConnected(connected);
+    });
+
+    stop!();
+    win.emit('gamepadconnected', makeGamepad(0));
+
+    expect(connected).not.toHaveBeenCalled();
+    scope.stop();
+  });
+
+  it('cleans up event listeners when the scope is disposed', () => {
+    const { navigator } = stubNavigator();
+    const win = stubWindow();
+    const scope = effectScope();
+    scope.run(() => {
+      useGamepad({ navigator, window: win.window });
+    });
+
+    expect(win.hasListener('gamepadconnected')).toBeTruthy();
+    scope.stop();
+    expect(win.hasListener('gamepadconnected')).toBeFalsy();
+  });
+});
+
+describe(mapGamepadToXbox360Controller, () => {
+  it('returns null when no gamepad is present', () => {
+    const gamepad = computed<Gamepad | undefined>(() => undefined);
+    const mapped = mapGamepadToXbox360Controller(gamepad);
+    expect(mapped.value).toBeNull();
+  });
+
+  it('maps buttons, bumpers, triggers, sticks and dpad', () => {
+    const buttons = Array.from({ length: 16 }, () => makeButton());
+    buttons[0] = makeButton(1, true); // A
+    buttons[9] = makeButton(1, true); // start
+    const pad = makeGamepad(0, {
+      buttons,
+      axes: [0.5, -0.5, -0.25, 0.75],
+    });
+
+    const gamepad = computed<Gamepad | undefined>(() => pad);
+    const mapped = mapGamepadToXbox360Controller(gamepad);
+
+    expect(mapped.value!.buttons.a.pressed).toBeTruthy();
+    expect(mapped.value!.start.pressed).toBeTruthy();
+    expect(mapped.value!.stick.left.horizontal).toBe(0.5);
+    expect(mapped.value!.stick.left.vertical).toBe(-0.5);
+    expect(mapped.value!.stick.right.horizontal).toBe(-0.25);
+    expect(mapped.value!.stick.right.vertical).toBe(0.75);
+    expect(mapped.value!.dpad.up).toBe(pad.buttons[12]);
+  });
+});
diff --git a/vue/toolkit/src/composables/sensors/useGamepad/index.ts b/vue/toolkit/src/composables/sensors/useGamepad/index.ts
new file mode 100644
index 0000000..d9b2681
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useGamepad/index.ts
@@ -0,0 +1,324 @@
+import type { VoidFunction } from '@robonen/stdlib';
+import { PubSub } from '@robonen/stdlib';
+import { computed, ref } from 'vue';
+import type { ComputedRef, Ref } from 'vue';
+import { defaultNavigator, defaultWindow } from '@/types';
+import type { ConfigurableNavigator, ConfigurableWindow, ResumableActions } from '@/types';
+import { useSupported } from '@/composables/utilities/useSupported';
+import { useRafFn } from '@/composables/animation/useRafFn';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import { tryOnMounted } from '@/composables/lifecycle/tryOnMounted';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+
+export interface UseGamepadOptions extends ConfigurableNavigator, ConfigurableWindow {}
+
+/**
+ * Subscribe to a gamepad lifecycle event. Returns a stop function that
+ * removes the listener; it is also auto-removed when the owning scope is disposed.
+ */
+export type GamepadEventHookOn = (listener: (index: number) => void) => VoidFunction;
+
+export interface UseGamepadReturn extends ResumableActions {
+  /**
+   * Whether the Gamepad API is supported in the current environment
+   */
+  isSupported: ComputedRef<boolean>;
+
+  /**
+   * The list of currently connected gamepads, kept in sync each animation frame
+   */
+  gamepads: Ref<Gamepad[]>;
+
+  /**
+   * Subscribe to gamepad connection. The listener receives the gamepad index.
+   */
+  onConnected: GamepadEventHookOn;
+
+  /**
+   * Subscribe to gamepad disconnection. The listener receives the gamepad index.
+   */
+  onDisconnected: GamepadEventHookOn;
+
+  /**
+   * Whether the polling loop is currently active
+   */
+  isActive: Readonly<Ref<boolean>>;
+}
+
+export interface MappedGamepadButton {
+  /**
+   * The single (top/bottom/left/right) button under this slot
+   */
+  button: GamepadButton;
+}
+
+export interface MappedGamepadStick {
+  /**
+   * Horizontal axis value, `-1` (left) to `1` (right)
+   */
+  horizontal: number;
+
+  /**
+   * Vertical axis value, `-1` (up) to `1` (down)
+   */
+  vertical: number;
+
+  /**
+   * The stick's click button (e.g. L3 / R3)
+   */
+  button: GamepadButton;
+}
+
+export interface MappedXbox360Controller {
+  buttons: {
+    a: GamepadButton;
+    b: GamepadButton;
+    x: GamepadButton;
+    y: GamepadButton;
+  };
+  bumper: {
+    left: GamepadButton;
+    right: GamepadButton;
+  };
+  triggers: {
+    left: GamepadButton;
+    right: GamepadButton;
+  };
+  stick: {
+    left: MappedGamepadStick;
+    right: MappedGamepadStick;
+  };
+  dpad: {
+    up: GamepadButton;
+    down: GamepadButton;
+    left: GamepadButton;
+    right: GamepadButton;
+  };
+  back: GamepadButton;
+  start: GamepadButton;
+}
+
+/**
+ * @name mapGamepadToXbox360Controller
+ * @category Sensors
+ * @description Maps a raw {@link Gamepad} into a named Xbox 360 controller layout
+ * (buttons, bumpers, triggers, sticks, dpad). Returns `null` while no gamepad is present.
+ *
+ * @param {Ref<Gamepad | undefined>} gamepad The reactive gamepad to map
+ * @returns {ComputedRef<MappedXbox360Controller | null>} The mapped controller, or `null`
+ *
+ * @example
+ * const { gamepads } = useGamepad();
+ * const gamepad = computed(() => gamepads.value[0]);
+ * const controller = mapGamepadToXbox360Controller(gamepad);
+ * watchEffect(() => {
+ *   if (controller.value?.buttons.a.pressed) console.log('A pressed');
+ * });
+ *
+ * @since 0.0.15
+ */
+export function mapGamepadToXbox360Controller(
+  gamepad: Ref<Gamepad | undefined>,
+): ComputedRef<MappedXbox360Controller | null> {
+  return computed(() => {
+    const pad = gamepad.value;
+
+    if (!pad)
+      return null;
+
+    const { buttons, axes } = pad;
+
+    // Indexed access is `T | undefined` under noUncheckedIndexedAccess; the Xbox
+    // layout assumes the standard mapping, so resolve each slot non-null.
+    const btn = (index: number): GamepadButton => buttons[index]!;
+    const axis = (index: number): number => axes[index]!;
+
+    return {
+      buttons: {
+        a: btn(0),
+        b: btn(1),
+        x: btn(2),
+        y: btn(3),
+      },
+      bumper: {
+        left: btn(4),
+        right: btn(5),
+      },
+      triggers: {
+        left: btn(6),
+        right: btn(7),
+      },
+      stick: {
+        left: {
+          horizontal: axis(0),
+          vertical: axis(1),
+          button: btn(10),
+        },
+        right: {
+          horizontal: axis(2),
+          vertical: axis(3),
+          button: btn(11),
+        },
+      },
+      dpad: {
+        up: btn(12),
+        down: btn(13),
+        left: btn(14),
+        right: btn(15),
+      },
+      back: btn(8),
+      start: btn(9),
+    };
+  });
+}
+
+const CONNECTED = 'connected';
+const DISCONNECTED = 'disconnected';
+
+interface GamepadEvents {
+  connected: (index: number) => void;
+  disconnected: (index: number) => void;
+}
+
+/**
+ * Build a deep, plain snapshot of a live `Gamepad`. The native object is a
+ * live view that mutates between frames, so we copy axes and button state
+ * into fresh structures to keep Vue reactivity reliable.
+ */
+function snapshotGamepad(gamepad: Gamepad): Gamepad {
+  return {
+    id: gamepad.id,
+    index: gamepad.index,
+    connected: gamepad.connected,
+    mapping: gamepad.mapping,
+    timestamp: gamepad.timestamp,
+    vibrationActuator: gamepad.vibrationActuator,
+    hapticActuators: gamepad.hapticActuators,
+    axes: gamepad.axes.slice(),
+    buttons: gamepad.buttons.map(button => ({
+      pressed: button.pressed,
+      touched: button.touched,
+      value: button.value,
+    })),
+  } as Gamepad;
+}
+
+/**
+ * @name useGamepad
+ * @category Sensors
+ * @description Reactive wrapper around the Gamepad API. Tracks connected gamepads,
+ * emits connection/disconnection events, and polls live button/axis state on every
+ * animation frame. The polling loop stays paused while no gamepad is connected and
+ * resumes automatically on the first connection, so there is zero idle work. SSR-safe.
+ *
+ * @param {UseGamepadOptions} [options] Configuration options
+ * @param {Navigator} [options.navigator=defaultNavigator] Custom navigator (testing/iframes)
+ * @param {Window} [options.window=defaultWindow] Custom window for the polling loop and events
+ * @returns {UseGamepadReturn} Reactive gamepad state, lifecycle hooks, and loop controls
+ *
+ * @example
+ * const { gamepads, isSupported, onConnected, onDisconnected } = useGamepad();
+ *
+ * onConnected((index) => console.log(`gamepad ${index} connected`));
+ * onDisconnected((index) => console.log(`gamepad ${index} disconnected`));
+ *
+ * @example
+ * // Map the first gamepad to an Xbox 360 layout
+ * const { gamepads } = useGamepad();
+ * const gamepad = computed(() => gamepads.value[0]);
+ * const controller = mapGamepadToXbox360Controller(gamepad);
+ *
+ * @since 0.0.15
+ */
+export function useGamepad(options: UseGamepadOptions = {}): UseGamepadReturn {
+  const {
+    navigator = defaultNavigator,
+    window = defaultWindow,
+  } = options;
+
+  const isSupported = useSupported(() => Boolean(navigator) && 'getGamepads' in navigator!);
+  const gamepads = ref<Gamepad[]>([]);
+
+  // PubSub's `Record<string, …>` constraint rejects interfaces; a mapped type satisfies it.
+  const hub = new PubSub<{ [K in keyof GamepadEvents]: GamepadEvents[K] }>();
+
+  function makeHook(event: keyof GamepadEvents): GamepadEventHookOn {
+    return (listener) => {
+      hub.on(event, listener);
+
+      const stop = (): void => void hub.off(event, listener);
+
+      tryOnScopeDispose(stop);
+
+      return stop;
+    };
+  }
+
+  // Pull the current device list once; reused by polling, connect and the initial scan.
+  function readGamepads(): Array<Gamepad | null> {
+    return navigator?.getGamepads() ?? [];
+  }
+
+  function updateGamepadState(): void {
+    const devices = readGamepads();
+
+    for (const device of devices) {
+      if (device && gamepads.value[device.index])
+        gamepads.value[device.index] = snapshotGamepad(device);
+    }
+  }
+
+  const { isActive, pause, resume, toggle } = useRafFn(updateGamepadState, {
+    immediate: false,
+    window,
+  });
+
+  function onGamepadConnected(gamepad: Gamepad): void {
+    // O(index) direct slot check beats a linear `.some()` scan on every connect.
+    const existing = gamepads.value[gamepad.index];
+
+    if (!existing || existing.index !== gamepad.index) {
+      gamepads.value[gamepad.index] = snapshotGamepad(gamepad);
+      hub.emit(CONNECTED, gamepad.index);
+    }
+
+    resume();
+  }
+
+  function onGamepadDisconnected(gamepad: Gamepad): void {
+    gamepads.value = gamepads.value.filter(pad => pad.index !== gamepad.index);
+    hub.emit(DISCONNECTED, gamepad.index);
+
+    // Nothing left to poll — stop the loop to avoid idle frames.
+    if (!gamepads.value.some(Boolean))
+      pause();
+  }
+
+  const listenerOptions = { passive: true };
+
+  useEventListener(window, 'gamepadconnected', (event: GamepadEvent) => onGamepadConnected(event.gamepad), listenerOptions);
+  useEventListener(window, 'gamepaddisconnected', (event: GamepadEvent) => onGamepadDisconnected(event.gamepad), listenerOptions);
+
+  tryOnMounted(() => {
+    if (!isSupported.value)
+      return;
+
+    const devices = readGamepads();
+
+    for (const device of devices) {
+      if (device)
+        onGamepadConnected(device);
+    }
+  });
+
+  return {
+    isSupported,
+    gamepads,
+    onConnected: makeHook(CONNECTED),
+    onDisconnected: makeHook(DISCONNECTED),
+    isActive,
+    pause,
+    resume,
+    toggle,
+  };
+}
diff --git a/vue/toolkit/src/composables/sensors/useGeolocation/demo.vue b/vue/toolkit/src/composables/sensors/useGeolocation/demo.vue
new file mode 100644
index 0000000..4f7d46b
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useGeolocation/demo.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useGeolocation } from './index';
+
+// Don't auto-request location on mount — wait for a user gesture.
+const {
+  coords,
+  locatedAt,
+  error,
+  ready,
+  isActive,
+  isSupported,
+  resume,
+  pause,
+} = useGeolocation({ immediate: false, enableHighAccuracy: true });
+
+const located = computed(() => locatedAt.value
+  ? new Date(locatedAt.value).toLocaleTimeString()
+  : '—');
+
+function fmt(value: number | null, digits = 5): string {
+  return value == null || !Number.isFinite(value) ? '—' : value.toFixed(digits);
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      v-if="!isSupported"
+      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-center text-sm text-amber-700 dark:text-amber-300"
+    >
+      Geolocation is not supported in this browser.
+    </div>
+
+    <template v-else>
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Geolocation
+        </span>
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium transition"
+          :class="isActive
+            ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+            : 'border border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+        >
+          <span
+            class="size-1.5 rounded-full"
+            :class="isActive ? 'bg-emerald-500 animate-pulse' : 'bg-(--fg-subtle)'"
+          />
+          {{ isActive ? 'Watching' : 'Idle' }}
+        </span>
+      </div>
+
+      <div class="grid grid-cols-2 gap-3">
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+          <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Latitude</div>
+          <div class="mt-0.5 font-mono text-lg font-bold tabular-nums text-(--fg)">
+            {{ ready ? fmt(coords.latitude) : '—' }}
+          </div>
+        </div>
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+          <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Longitude</div>
+          <div class="mt-0.5 font-mono text-lg font-bold tabular-nums text-(--fg)">
+            {{ ready ? fmt(coords.longitude) : '—' }}
+          </div>
+        </div>
+      </div>
+
+      <dl class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-sm">
+        <div class="flex items-center justify-between py-0.5">
+          <dt class="text-(--fg-muted)">Accuracy</dt>
+          <dd class="font-mono tabular-nums text-(--fg)">
+            {{ ready ? `± ${Math.round(coords.accuracy)} m` : '—' }}
+          </dd>
+        </div>
+        <div class="flex items-center justify-between py-0.5">
+          <dt class="text-(--fg-muted)">Heading</dt>
+          <dd class="font-mono tabular-nums text-(--fg)">
+            {{ ready ? `${fmt(coords.heading, 0)}°` : '—' }}
+          </dd>
+        </div>
+        <div class="flex items-center justify-between py-0.5">
+          <dt class="text-(--fg-muted)">Located at</dt>
+          <dd class="font-mono tabular-nums text-(--fg)">{{ located }}</dd>
+        </div>
+      </dl>
+
+      <p
+        v-if="error"
+        class="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-sm text-red-600 dark:text-red-400"
+      >
+        {{ error.message || 'Unable to retrieve your location.' }}
+      </p>
+
+      <div class="flex gap-2">
+        <button
+          v-if="!isActive"
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+          @click="resume"
+        >
+          {{ ready ? 'Resume watching' : 'Find my location' }}
+        </button>
+        <button
+          v-else
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="pause"
+        >
+          Stop watching
+        </button>
+      </div>
+
+      <p class="text-xs text-(--fg-subtle)">
+        Requires permission &mdash; nothing is requested until you press the button.
+      </p>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useGeolocation/index.test.ts b/vue/toolkit/src/composables/sensors/useGeolocation/index.test.ts
new file mode 100644
index 0000000..8845bd7
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useGeolocation/index.test.ts
@@ -0,0 +1,266 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, shallowRef } from 'vue';
+import { useGeolocation } from '.';
+
+afterEach(() => vi.unstubAllGlobals());
+
+function stubGeolocation() {
+  let successCb: PositionCallback | null = null;
+  let errorCb: PositionErrorCallback | null = null;
+  let lastOptions: PositionOptions | undefined;
+  const watchPosition = vi.fn((success: PositionCallback, err?: PositionErrorCallback | null, opts?: PositionOptions) => {
+    successCb = success;
+    errorCb = err ?? null;
+    lastOptions = opts;
+    return 1;
+  });
+  const clearWatch = vi.fn();
+  const getCurrentPosition = vi.fn((success: PositionCallback, err?: PositionErrorCallback | null, opts?: PositionOptions) => {
+    successCb = success;
+    errorCb = err ?? null;
+    lastOptions = opts;
+  });
+  const navigator = { geolocation: { watchPosition, clearWatch, getCurrentPosition } } as unknown as Navigator;
+  return {
+    navigator,
+    watchPosition,
+    clearWatch,
+    getCurrentPosition,
+    getOptions: () => lastOptions,
+    emit: (position: GeolocationPosition) => successCb?.(position),
+    emitError: (err: GeolocationPositionError) => errorCb?.(err),
+  };
+}
+
+function makePosition(latitude: number, longitude: number, timestamp = 123): GeolocationPosition {
+  return {
+    timestamp,
+    coords: {
+      latitude,
+      longitude,
+      accuracy: 5,
+      altitude: null,
+      altitudeAccuracy: null,
+      heading: null,
+      speed: null,
+    } as GeolocationCoordinates,
+  } as GeolocationPosition;
+}
+
+function makeError(code = 1, message = 'denied'): GeolocationPositionError {
+  return { code, message, PERMISSION_DENIED: 1, POSITION_UNAVAILABLE: 2, TIMEOUT: 3 } as GeolocationPositionError;
+}
+
+describe(useGeolocation, () => {
+  it('starts watching immediately by default', () => {
+    const { watchPosition, navigator } = stubGeolocation();
+    const scope = effectScope();
+    scope.run(() => useGeolocation({ navigator }));
+    expect(watchPosition).toHaveBeenCalled();
+    scope.stop();
+  });
+
+  it('does not start watching when immediate is false', () => {
+    const { watchPosition, navigator } = stubGeolocation();
+    const scope = effectScope();
+    let geo: ReturnType<typeof useGeolocation>;
+    scope.run(() => {
+      geo = useGeolocation({ navigator, immediate: false });
+    });
+    expect(watchPosition).not.toHaveBeenCalled();
+    expect(geo!.isActive.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('updates coords on position change', () => {
+    const { emit, navigator } = stubGeolocation();
+    const scope = effectScope();
+    let geo: ReturnType<typeof useGeolocation>;
+    scope.run(() => {
+      geo = useGeolocation({ navigator });
+    });
+
+    emit(makePosition(1, 2));
+
+    expect(geo!.coords.value.latitude).toBe(1);
+    expect(geo!.coords.value.longitude).toBe(2);
+    expect(geo!.locatedAt.value).toBe(123);
+    expect(geo!.ready.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('tracks active state across resume/pause', () => {
+    const { navigator } = stubGeolocation();
+    const scope = effectScope();
+    let geo: ReturnType<typeof useGeolocation>;
+    scope.run(() => {
+      geo = useGeolocation({ navigator });
+    });
+    expect(geo!.isActive.value).toBeTruthy();
+    geo!.pause();
+    expect(geo!.isActive.value).toBeFalsy();
+    geo!.resume();
+    expect(geo!.isActive.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('clears the watch on pause', () => {
+    const { clearWatch, navigator } = stubGeolocation();
+    const scope = effectScope();
+    let geo: ReturnType<typeof useGeolocation>;
+    scope.run(() => {
+      geo = useGeolocation({ navigator });
+    });
+    geo!.pause();
+    expect(clearWatch).toHaveBeenCalledWith(1);
+    scope.stop();
+  });
+
+  it('does not re-watch when already active', () => {
+    const { watchPosition, navigator } = stubGeolocation();
+    const scope = effectScope();
+    let geo: ReturnType<typeof useGeolocation>;
+    scope.run(() => {
+      geo = useGeolocation({ navigator });
+    });
+    geo!.resume();
+    geo!.resume();
+    expect(watchPosition).toHaveBeenCalledTimes(1);
+    scope.stop();
+  });
+
+  it('records errors and invokes onError', () => {
+    const { emitError, navigator } = stubGeolocation();
+    const onError = vi.fn();
+    const scope = effectScope();
+    let geo: ReturnType<typeof useGeolocation>;
+    scope.run(() => {
+      geo = useGeolocation({ navigator, onError });
+    });
+
+    const err = makeError();
+    emitError(err);
+
+    expect(geo!.error.value).toBe(err);
+    expect(onError).toHaveBeenCalledWith(err);
+    scope.stop();
+  });
+
+  it('clears the error after a successful fix', () => {
+    const { emit, emitError, navigator } = stubGeolocation();
+    const scope = effectScope();
+    let geo: ReturnType<typeof useGeolocation>;
+    scope.run(() => {
+      geo = useGeolocation({ navigator });
+    });
+
+    emitError(makeError());
+    expect(geo!.error.value).not.toBeNull();
+    emit(makePosition(1, 2));
+    expect(geo!.error.value).toBeNull();
+    scope.stop();
+  });
+
+  it('passes position options to watchPosition', () => {
+    const { getOptions, navigator } = stubGeolocation();
+    const scope = effectScope();
+    scope.run(() => useGeolocation({ navigator, enableHighAccuracy: false, maximumAge: 1000, timeout: 5000 }));
+    expect(getOptions()).toEqual({ enableHighAccuracy: false, maximumAge: 1000, timeout: 5000 });
+    scope.stop();
+  });
+
+  it('restarts the watcher when reactive options change while active', async () => {
+    const { watchPosition, clearWatch, getOptions, navigator } = stubGeolocation();
+    const highAccuracy = shallowRef(false);
+    const scope = effectScope();
+    scope.run(() => useGeolocation({ navigator, enableHighAccuracy: highAccuracy }));
+
+    expect(watchPosition).toHaveBeenCalledTimes(1);
+    expect(getOptions()?.enableHighAccuracy).toBeFalsy();
+
+    highAccuracy.value = true;
+    await nextTick();
+
+    expect(clearWatch).toHaveBeenCalledWith(1);
+    expect(watchPosition).toHaveBeenCalledTimes(2);
+    expect(getOptions()?.enableHighAccuracy).toBeTruthy();
+    scope.stop();
+  });
+
+  it('does not restart on option change when paused', async () => {
+    const { watchPosition, navigator } = stubGeolocation();
+    const timeout = shallowRef(1000);
+    const scope = effectScope();
+    let geo: ReturnType<typeof useGeolocation>;
+    scope.run(() => {
+      geo = useGeolocation({ navigator, timeout, immediate: false });
+    });
+
+    timeout.value = 2000;
+    await nextTick();
+
+    expect(watchPosition).not.toHaveBeenCalled();
+    expect(geo!.isActive.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('getCurrentPosition resolves and updates state without a watch', async () => {
+    const { watchPosition, getCurrentPosition, emit, navigator } = stubGeolocation();
+    const scope = effectScope();
+    let geo: ReturnType<typeof useGeolocation>;
+    scope.run(() => {
+      geo = useGeolocation({ navigator, immediate: false });
+    });
+
+    const promise = geo!.getCurrentPosition();
+    emit(makePosition(10, 20, 999));
+    const position = await promise;
+
+    expect(getCurrentPosition).toHaveBeenCalled();
+    expect(watchPosition).not.toHaveBeenCalled();
+    expect(position.coords.latitude).toBe(10);
+    expect(geo!.coords.value.latitude).toBe(10);
+    expect(geo!.locatedAt.value).toBe(999);
+    expect(geo!.ready.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('getCurrentPosition rejects on error', async () => {
+    const { emitError, navigator } = stubGeolocation();
+    const scope = effectScope();
+    let geo: ReturnType<typeof useGeolocation>;
+    scope.run(() => {
+      geo = useGeolocation({ navigator, immediate: false });
+    });
+
+    const promise = geo!.getCurrentPosition();
+    const err = makeError();
+    emitError(err);
+
+    await expect(promise).rejects.toBe(err);
+    expect(geo!.error.value).toBe(err);
+    scope.stop();
+  });
+
+  it('reports unsupported when geolocation is missing', () => {
+    const navigator = {} as Navigator;
+    const scope = effectScope();
+    let geo: ReturnType<typeof useGeolocation>;
+    scope.run(() => {
+      geo = useGeolocation({ navigator });
+    });
+    expect(geo!.isSupported.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('getCurrentPosition rejects when unsupported', async () => {
+    const navigator = {} as Navigator;
+    const scope = effectScope();
+    let geo: ReturnType<typeof useGeolocation>;
+    scope.run(() => {
+      geo = useGeolocation({ navigator, immediate: false });
+    });
+    await expect(geo!.getCurrentPosition()).rejects.toThrow('not supported');
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/sensors/useGeolocation/index.ts b/vue/toolkit/src/composables/sensors/useGeolocation/index.ts
new file mode 100644
index 0000000..1417304
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useGeolocation/index.ts
@@ -0,0 +1,236 @@
+import { shallowReadonly, shallowRef, toValue, watch } from 'vue';
+import type { MaybeRefOrGetter, Ref } from 'vue';
+import { noop } from '@robonen/stdlib';
+import { defaultNavigator } from '@/types';
+import type { ConfigurableNavigator } from '@/types';
+import { useSupported } from '@/composables/utilities/useSupported';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+
+export interface UseGeolocationOptions extends ConfigurableNavigator {
+  /**
+   * A boolean that indicates the application would like to receive the best
+   * possible results. Reactive — changing it while watching restarts the watcher.
+   *
+   * @default true
+   */
+  enableHighAccuracy?: MaybeRefOrGetter<boolean>;
+
+  /**
+   * The maximum age in milliseconds of a possible cached position that is
+   * acceptable to return. Reactive — changing it while watching restarts the watcher.
+   *
+   * @default 30000
+   */
+  maximumAge?: MaybeRefOrGetter<number>;
+
+  /**
+   * The maximum length of time in milliseconds the device is allowed to take in
+   * order to return a position. Reactive — changing it while watching restarts the watcher.
+   *
+   * @default 27000
+   */
+  timeout?: MaybeRefOrGetter<number>;
+
+  /**
+   * Start watching the position immediately
+   *
+   * @default true
+   */
+  immediate?: boolean;
+
+  /**
+   * Called whenever the Geolocation API reports an error. Receives the
+   * `GeolocationPositionError`. Useful for reacting to permission denials or
+   * timeouts without setting up a watcher on `error`.
+   *
+   * @default () => {}
+   */
+  onError?: (error: GeolocationPositionError) => void;
+}
+
+export interface UseGeolocationReturn {
+  /**
+   * Whether the Geolocation API is supported in the current environment.
+   */
+  isSupported: Readonly<Ref<boolean>>;
+
+  /**
+   * The most recent set of coordinates.
+   */
+  coords: Readonly<Ref<Omit<GeolocationPosition['coords'], 'toJSON'>>>;
+
+  /**
+   * The timestamp of the most recent position, or `null` before the first fix.
+   */
+  locatedAt: Readonly<Ref<number | null>>;
+
+  /**
+   * The most recent error, or `null` if none.
+   */
+  error: Readonly<Ref<GeolocationPositionError | null>>;
+
+  /**
+   * Whether at least one position fix has been received.
+   */
+  ready: Readonly<Ref<boolean>>;
+
+  /**
+   * Whether the position is currently being watched.
+   */
+  isActive: Readonly<Ref<boolean>>;
+
+  /**
+   * Start watching the position.
+   */
+  resume: () => void;
+
+  /**
+   * Stop watching the position.
+   */
+  pause: () => void;
+
+  /**
+   * Request the current position once, without starting a continuous watch.
+   * Resolves with the position (and updates `coords`/`locatedAt`) or rejects
+   * with a `GeolocationPositionError`.
+   */
+  getCurrentPosition: () => Promise<GeolocationPosition>;
+}
+
+const DEFAULT_COORDS: Omit<GeolocationPosition['coords'], 'toJSON'> = {
+  accuracy: 0,
+  latitude: Number.POSITIVE_INFINITY,
+  longitude: Number.POSITIVE_INFINITY,
+  altitude: null,
+  altitudeAccuracy: null,
+  heading: null,
+  speed: null,
+};
+
+/**
+ * @name useGeolocation
+ * @category Sensors
+ * @description Reactive Geolocation API. Watches the device position, exposing
+ * reactive coordinates, error, and readiness state, plus pause/resume controls
+ * and a one-shot `getCurrentPosition`.
+ *
+ * @param {UseGeolocationOptions} [options={}] Options
+ * @returns {UseGeolocationReturn} Reactive position, error, readiness, and watch controls
+ *
+ * @example
+ * const { coords, locatedAt, error, ready } = useGeolocation();
+ *
+ * @example
+ * // One-shot fetch without a continuous watch
+ * const { getCurrentPosition } = useGeolocation({ immediate: false });
+ * const position = await getCurrentPosition();
+ *
+ * @since 0.0.15
+ */
+export function useGeolocation(options: UseGeolocationOptions = {}): UseGeolocationReturn {
+  const {
+    enableHighAccuracy = true,
+    maximumAge = 30000,
+    timeout = 27000,
+    navigator = defaultNavigator,
+    immediate = true,
+    onError = noop,
+  } = options;
+
+  const isSupported = useSupported(() => navigator && 'geolocation' in navigator);
+
+  const locatedAt = shallowRef<number | null>(null);
+  const error = shallowRef<GeolocationPositionError | null>(null);
+  const coords = shallowRef<Omit<GeolocationPosition['coords'], 'toJSON'>>(DEFAULT_COORDS);
+  const ready = shallowRef(false);
+  const isActive = shallowRef(false);
+
+  function resolveOptions(): PositionOptions {
+    return {
+      enableHighAccuracy: toValue(enableHighAccuracy),
+      maximumAge: toValue(maximumAge),
+      timeout: toValue(timeout),
+    };
+  }
+
+  function updatePosition(position: GeolocationPosition): void {
+    locatedAt.value = position.timestamp;
+    coords.value = position.coords;
+    error.value = null;
+    ready.value = true;
+  }
+
+  function handleError(err: GeolocationPositionError): void {
+    error.value = err;
+    onError(err);
+  }
+
+  let watcher: number | null = null;
+
+  function resume(): void {
+    if (!isSupported.value || !navigator || watcher !== null)
+      return;
+
+    watcher = navigator.geolocation.watchPosition(updatePosition, handleError, resolveOptions());
+    isActive.value = true;
+  }
+
+  function pause(): void {
+    if (watcher === null || !navigator)
+      return;
+
+    navigator.geolocation.clearWatch(watcher);
+    watcher = null;
+    isActive.value = false;
+  }
+
+  function getCurrentPosition(): Promise<GeolocationPosition> {
+    return new Promise((resolve, reject) => {
+      if (!isSupported.value || !navigator) {
+        reject(new Error('Geolocation is not supported'));
+        return;
+      }
+
+      navigator.geolocation.getCurrentPosition(
+        (position) => {
+          updatePosition(position);
+          resolve(position);
+        },
+        (err) => {
+          handleError(err);
+          reject(err);
+        },
+        resolveOptions(),
+      );
+    });
+  }
+
+  // Restart the watcher when reactive position options change while active.
+  watch(
+    () => resolveOptions(),
+    () => {
+      if (isActive.value) {
+        pause();
+        resume();
+      }
+    },
+    { deep: true },
+  );
+
+  if (immediate)
+    resume();
+
+  tryOnScopeDispose(pause);
+
+  return {
+    isSupported,
+    coords,
+    locatedAt: shallowReadonly(locatedAt),
+    error: shallowReadonly(error),
+    ready: shallowReadonly(ready),
+    isActive: shallowReadonly(isActive),
+    resume,
+    pause,
+    getCurrentPosition,
+  };
+}
diff --git a/vue/toolkit/src/composables/sensors/useIdle/demo.vue b/vue/toolkit/src/composables/sensors/useIdle/demo.vue
new file mode 100644
index 0000000..f85d468
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useIdle/demo.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { useIdle } from './index';
+
+// A short 3s threshold makes the idle transition easy to observe in the demo.
+const timeout = ref(3000);
+
+const { idle, lastActive, isPending, reset, start, stop } = useIdle(timeout.value);
+
+// lastActive is a ms timestamp; tick a clock so the "seconds since" readout is live.
+const now = ref(Date.now());
+let clockId: ReturnType<typeof setInterval> | undefined;
+onMounted(() => {
+  clockId = setInterval(() => { now.value = Date.now(); }, 250);
+});
+onUnmounted(() => {
+  if (clockId !== undefined)
+    clearInterval(clockId);
+});
+
+const secondsSinceActive = computed(() =>
+  Math.max(0, (now.value - lastActive.value) / 1000).toFixed(1),
+);
+
+const lastActiveLabel = computed(() =>
+  new Date(lastActive.value).toLocaleTimeString(undefined, { hour12: false }),
+);
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex items-center justify-between gap-3">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Status</span>
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
+          :class="idle
+            ? 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'
+            : 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'"
+        >
+          <span
+            class="size-1.5 rounded-full"
+            :class="idle ? 'bg-amber-500' : 'bg-emerald-500'"
+          />
+          {{ idle ? 'Idle' : 'Active' }}
+        </span>
+      </div>
+
+      <p class="mt-3 text-sm text-(--fg-muted)">
+        Move your mouse, type, or scroll to stay active. After
+        <span class="font-medium text-(--fg)">{{ (timeout / 1000).toFixed(0) }}s</span>
+        without activity you go idle.
+      </p>
+    </div>
+
+    <div class="grid grid-cols-2 gap-3">
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Inactive for</div>
+        <div class="mt-1 font-mono text-2xl font-bold tabular-nums text-(--fg)">
+          {{ secondsSinceActive }}<span class="text-base text-(--fg-subtle)">s</span>
+        </div>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Last active</div>
+        <div class="mt-1 font-mono text-2xl font-bold tabular-nums text-(--fg)">
+          {{ lastActiveLabel }}
+        </div>
+      </div>
+    </div>
+
+    <div class="flex flex-wrap items-center gap-2">
+      <button
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="reset()"
+      >
+        Reset timer
+      </button>
+      <button
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="!isPending"
+        @click="stop()"
+      >
+        Stop
+      </button>
+      <button
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="isPending"
+        @click="start()"
+      >
+        Start
+      </button>
+
+      <span class="ml-auto inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        tracking: {{ isPending ? 'on' : 'off' }}
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useIdle/index.test.ts b/vue/toolkit/src/composables/sensors/useIdle/index.test.ts
new file mode 100644
index 0000000..9a7045f
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useIdle/index.test.ts
@@ -0,0 +1,259 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope } from 'vue';
+import { useIdle } from '.';
+import { bypassFilter } from '@/utils/filters';
+
+/**
+ * Minimal EventTarget-like stub so we can drive listeners deterministically
+ * without relying on jsdom's real window/document timing.
+ */
+function createTarget() {
+  const listeners = new Map<string, Set<EventListener>>();
+  return {
+    addEventListener(type: string, listener: EventListener) {
+      if (!listeners.has(type))
+        listeners.set(type, new Set());
+      listeners.get(type)!.add(listener);
+    },
+    removeEventListener(type: string, listener: EventListener) {
+      listeners.get(type)?.delete(listener);
+    },
+    dispatch(type: string, event: Event = { type } as Event) {
+      listeners.get(type)?.forEach(fn => fn(event));
+    },
+    count(type: string) {
+      return listeners.get(type)?.size ?? 0;
+    },
+  };
+}
+
+function createWindow(doc: ReturnType<typeof createTarget> & { hidden?: boolean }) {
+  const win = createTarget() as ReturnType<typeof createTarget> & { document: typeof doc };
+  win.document = doc;
+  return win;
+}
+
+describe(useIdle, () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(1000);
+  });
+  afterEach(() => vi.useRealTimers());
+
+  it('starts not idle and exposes lastActive', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const doc = createTarget();
+      const window = createWindow(doc) as any;
+      const { idle, lastActive, isPending } = useIdle(1000, { window });
+
+      expect(idle.value).toBeFalsy();
+      expect(isPending.value).toBeTruthy();
+      expect(lastActive.value).toBe(1000);
+    });
+    scope.stop();
+  });
+
+  it('becomes idle after the timeout elapses with no activity', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const doc = createTarget();
+      const window = createWindow(doc) as any;
+      const { idle } = useIdle(1000, { window });
+
+      expect(idle.value).toBeFalsy();
+      vi.advanceTimersByTime(999);
+      expect(idle.value).toBeFalsy();
+      vi.advanceTimersByTime(1);
+      expect(idle.value).toBeTruthy();
+    });
+    scope.stop();
+  });
+
+  it('resets idle state and lastActive on user activity', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const doc = createTarget();
+      const window = createWindow(doc) as any;
+      const { idle, lastActive } = useIdle(1000, { window, eventFilter: bypassFilter });
+
+      vi.advanceTimersByTime(1000);
+      expect(idle.value).toBeTruthy();
+
+      vi.setSystemTime(2500);
+      window.dispatch('mousemove');
+
+      expect(idle.value).toBeFalsy();
+      expect(lastActive.value).toBe(2500);
+    });
+    scope.stop();
+  });
+
+  it('restarts the timeout after activity', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const doc = createTarget();
+      const window = createWindow(doc) as any;
+      const { idle } = useIdle(1000, { window, eventFilter: bypassFilter });
+
+      vi.advanceTimersByTime(500);
+      window.dispatch('keydown');
+      // 500ms more would have been idle without the reset
+      vi.advanceTimersByTime(500);
+      expect(idle.value).toBeFalsy();
+      // full timeout from the reset
+      vi.advanceTimersByTime(500);
+      expect(idle.value).toBeTruthy();
+    });
+    scope.stop();
+  });
+
+  it('honors a custom events list', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const doc = createTarget();
+      const window = createWindow(doc) as any;
+      useIdle(1000, { window, events: ['keydown'] });
+
+      expect(window.count('keydown')).toBe(1);
+      expect(window.count('mousemove')).toBe(0);
+    });
+    scope.stop();
+  });
+
+  it('listens for visibilitychange by default and resets when visible', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const doc = createTarget() as any;
+      doc.hidden = false;
+      const window = createWindow(doc) as any;
+      const { idle } = useIdle(1000, { window, eventFilter: bypassFilter });
+
+      expect(doc.count('visibilitychange')).toBe(1);
+
+      vi.advanceTimersByTime(1000);
+      expect(idle.value).toBeTruthy();
+
+      doc.dispatch('visibilitychange');
+      expect(idle.value).toBeFalsy();
+    });
+    scope.stop();
+  });
+
+  it('ignores visibilitychange when the document is hidden', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const doc = createTarget() as any;
+      doc.hidden = true;
+      const window = createWindow(doc) as any;
+      const { idle } = useIdle(1000, { window, eventFilter: bypassFilter });
+
+      vi.advanceTimersByTime(1000);
+      expect(idle.value).toBeTruthy();
+
+      doc.dispatch('visibilitychange');
+      expect(idle.value).toBeTruthy();
+    });
+    scope.stop();
+  });
+
+  it('does not register visibilitychange when disabled', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const doc = createTarget();
+      const window = createWindow(doc) as any;
+      useIdle(1000, { window, listenForVisibilityChange: false });
+
+      expect(doc.count('visibilitychange')).toBe(0);
+    });
+    scope.stop();
+  });
+
+  it('respects initialState: true (starts idle, no timer)', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const doc = createTarget();
+      const window = createWindow(doc) as any;
+      const { idle } = useIdle(1000, { window, initialState: true });
+
+      expect(idle.value).toBeTruthy();
+      vi.advanceTimersByTime(5000);
+      // no reset was scheduled, so it stays in the initial state
+      expect(idle.value).toBeTruthy();
+    });
+    scope.stop();
+  });
+
+  it('reset() manually clears idle and restarts the timer', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const doc = createTarget();
+      const window = createWindow(doc) as any;
+      const { idle, reset } = useIdle(1000, { window });
+
+      vi.advanceTimersByTime(1000);
+      expect(idle.value).toBeTruthy();
+
+      reset();
+      expect(idle.value).toBeFalsy();
+      vi.advanceTimersByTime(1000);
+      expect(idle.value).toBeTruthy();
+    });
+    scope.stop();
+  });
+
+  it('stop() halts tracking and start() resumes it', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const doc = createTarget();
+      const window = createWindow(doc) as any;
+      const { idle, isPending, start, stop } = useIdle(1000, { window, eventFilter: bypassFilter });
+
+      stop();
+      expect(isPending.value).toBeFalsy();
+      expect(idle.value).toBeFalsy();
+
+      // events are ignored while stopped
+      vi.advanceTimersByTime(1000);
+      expect(idle.value).toBeFalsy();
+      window.dispatch('mousemove');
+      expect(idle.value).toBeFalsy();
+
+      start();
+      expect(isPending.value).toBeTruthy();
+      vi.advanceTimersByTime(1000);
+      expect(idle.value).toBeTruthy();
+    });
+    scope.stop();
+  });
+
+  it('removes listeners when the scope is disposed', () => {
+    const scope = effectScope();
+    let win: any;
+    scope.run(() => {
+      const doc = createTarget();
+      win = createWindow(doc) as any;
+      useIdle(1000, { window: win });
+      expect(win.count('mousemove')).toBe(1);
+    });
+    scope.stop();
+    expect(win.count('mousemove')).toBe(0);
+  });
+
+  it('is SSR-safe when no window is available', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      // simulate an environment with no window (the guard sees a falsy target)
+      const { idle, isPending, lastActive } = useIdle(1000, { window: null as any });
+
+      // never started: stays in initial state and never schedules a timer
+      expect(idle.value).toBeFalsy();
+      expect(isPending.value).toBeFalsy();
+      expect(lastActive.value).toBe(1000);
+
+      vi.advanceTimersByTime(5000);
+      expect(idle.value).toBeFalsy();
+    });
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/sensors/useIdle/index.ts b/vue/toolkit/src/composables/sensors/useIdle/index.ts
new file mode 100644
index 0000000..3c3123f
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useIdle/index.ts
@@ -0,0 +1,169 @@
+import { shallowReadonly, shallowRef } from 'vue';
+import type { ShallowRef } from 'vue';
+import { timestamp } from '@robonen/stdlib';
+import { defaultWindow } from '@/types';
+import type { ConfigurableWindow } from '@/types';
+import { createFilterWrapper, throttleFilter } from '@/utils/filters';
+import type { ConfigurableEventFilter } from '@/utils/filters';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import type { WindowEventName } from '@/composables/browser/useEventListener';
+
+const DEFAULT_EVENTS: WindowEventName[] = ['mousemove', 'mousedown', 'resize', 'keydown', 'touchstart', 'wheel'];
+const ONE_MINUTE = 60_000;
+
+export interface UseIdleOptions extends ConfigurableWindow, ConfigurableEventFilter {
+  /**
+   * Event names to listen to for detecting user activity
+   *
+   * @default ['mousemove', 'mousedown', 'resize', 'keydown', 'touchstart', 'wheel']
+   */
+  events?: WindowEventName[];
+
+  /**
+   * Reset the idle timer when the document becomes visible again
+   *
+   * @default true
+   */
+  listenForVisibilityChange?: boolean;
+
+  /**
+   * Initial value of the `idle` ref
+   *
+   * @default false
+   */
+  initialState?: boolean;
+}
+
+export interface UseIdleReturn {
+  /**
+   * Whether the user is currently idle
+   */
+  idle: ShallowRef<boolean>;
+
+  /**
+   * Timestamp (ms) of the last detected user activity
+   */
+  lastActive: ShallowRef<number>;
+
+  /**
+   * Whether the idle tracker is currently running
+   */
+  isPending: Readonly<ShallowRef<boolean>>;
+
+  /**
+   * Manually mark the user as active and restart the idle timer
+   */
+  reset: () => void;
+
+  /**
+   * Begin (or resume) tracking. Restarts the idle timer unless `initialState` is `true`
+   */
+  start: () => void;
+
+  /**
+   * Stop tracking. Resets `idle` to `initialState` and clears the pending timer
+   */
+  stop: () => void;
+}
+
+/**
+ * @name useIdle
+ * @category Sensors
+ * @description Track whether the user has been inactive for a given duration.
+ *
+ * @param {number} [timeout=60000] Idle threshold in milliseconds
+ * @param {UseIdleOptions} [options={}] Options
+ * @returns {UseIdleReturn} `{ idle, lastActive, isPending, reset, start, stop }`
+ *
+ * @example
+ * const { idle, lastActive, reset } = useIdle(5 * 60_000); // 5 minutes
+ *
+ * @example
+ * const { idle } = useIdle(10_000, { events: ['keydown'] });
+ *
+ * @since 0.0.15
+ */
+export function useIdle(
+  timeout: number = ONE_MINUTE,
+  options: UseIdleOptions = {},
+): UseIdleReturn {
+  const {
+    initialState = false,
+    listenForVisibilityChange = true,
+    events = DEFAULT_EVENTS,
+    window = defaultWindow,
+    eventFilter = throttleFilter(50),
+  } = options;
+
+  const idle = shallowRef(initialState);
+  const lastActive = shallowRef(timestamp());
+  const isPending = shallowRef(false);
+
+  let timer: ReturnType<typeof setTimeout> | undefined;
+
+  const reset = (): void => {
+    idle.value = false;
+    if (timer !== undefined)
+      clearTimeout(timer);
+    timer = setTimeout(() => {
+      idle.value = true;
+    }, timeout);
+  };
+
+  const onEvent = createFilterWrapper(
+    eventFilter,
+    () => {
+      lastActive.value = timestamp();
+      reset();
+    },
+  );
+
+  const start = (): void => {
+    if (isPending.value)
+      return;
+    isPending.value = true;
+    if (!initialState)
+      reset();
+  };
+
+  const stop = (): void => {
+    idle.value = initialState;
+    if (timer !== undefined) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+    isPending.value = false;
+  };
+
+  if (window) {
+    const document = window.document;
+    const listenerOptions = { passive: true };
+
+    for (const event of events) {
+      useEventListener(window, event, () => {
+        if (!isPending.value)
+          return;
+        onEvent();
+      }, listenerOptions);
+    }
+
+    if (listenForVisibilityChange) {
+      useEventListener(document, 'visibilitychange', () => {
+        if (document.hidden || !isPending.value)
+          return;
+        onEvent();
+      }, listenerOptions);
+    }
+
+    start();
+  }
+
+  return {
+    idle,
+    lastActive,
+    isPending: shallowReadonly(isPending),
+    reset,
+    start,
+    stop,
+  };
+}
diff --git a/vue/toolkit/src/composables/sensors/useInfiniteScroll/demo.vue b/vue/toolkit/src/composables/sensors/useInfiniteScroll/demo.vue
new file mode 100644
index 0000000..89b6a86
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useInfiniteScroll/demo.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue';
+import { useInfiniteScroll } from './index';
+
+interface Repo {
+  id: number;
+  name: string;
+  stars: number;
+}
+
+const ADJECTIVES = ['swift', 'lunar', 'crisp', 'nimbus', 'atlas', 'echo', 'quartz', 'vivid'];
+const NOUNS = ['kit', 'forge', 'studio', 'engine', 'router', 'store', 'lab', 'core'];
+const PAGE_SIZE = 12;
+const MAX_ITEMS = 80;
+
+const scrollEl = useTemplateRef<HTMLDivElement>('scrollEl');
+const items = ref<Repo[]>([]);
+let nextId = 0;
+
+function makePage(): Repo[] {
+  return Array.from({ length: PAGE_SIZE }, () => {
+    const id = nextId++;
+    const name = `${ADJECTIVES[id % ADJECTIVES.length]}-${NOUNS[(id * 3) % NOUNS.length]}`;
+    return { id, name, stars: 200 + ((id * 137) % 9000) };
+  });
+}
+
+const canLoadMore = () => items.value.length < MAX_ITEMS;
+
+const { isLoading } = useInfiniteScroll(
+  scrollEl,
+  // Simulate a paged network fetch with latency.
+  () => new Promise<void>((resolve) => {
+    setTimeout(() => {
+      items.value.push(...makePage().slice(0, MAX_ITEMS - items.value.length));
+      resolve();
+    }, 600);
+  }),
+  { distance: 24, canLoadMore },
+);
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-3">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Repositories</span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted) tabular-nums">
+        {{ items.length }} / {{ MAX_ITEMS }} loaded
+      </span>
+    </div>
+
+    <div
+      ref="scrollEl"
+      class="h-72 overflow-y-auto rounded-xl border border-(--border) bg-(--bg-elevated) p-2"
+    >
+      <ul class="flex flex-col gap-1.5">
+        <li
+          v-for="repo in items"
+          :key="repo.id"
+          class="flex items-center justify-between gap-3 rounded-lg border border-(--border) bg-(--bg) px-3 py-2"
+        >
+          <span class="truncate font-mono text-sm text-(--fg)">{{ repo.name }}</span>
+          <span class="inline-flex items-center gap-1 text-xs font-medium tabular-nums text-(--fg-muted)">
+            <span class="text-amber-500">★</span>{{ repo.stars.toLocaleString() }}
+          </span>
+        </li>
+      </ul>
+
+      <div
+        v-if="isLoading"
+        class="flex items-center justify-center gap-2 py-4 text-sm text-(--fg-subtle)"
+      >
+        <span class="size-3.5 animate-spin rounded-full border-2 border-(--border-strong) border-t-transparent" />
+        Loading more…
+      </div>
+
+      <div
+        v-else-if="!canLoadMore()"
+        class="py-4 text-center text-sm text-(--fg-subtle)"
+      >
+        You've reached the end.
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Scroll to within <span class="font-medium text-(--fg-muted)">24px</span> of the bottom to fetch the next page.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useInfiniteScroll/index.test.ts b/vue/toolkit/src/composables/sensors/useInfiniteScroll/index.test.ts
new file mode 100644
index 0000000..043e347
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useInfiniteScroll/index.test.ts
@@ -0,0 +1,228 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, ref } from 'vue';
+import { useInfiniteScroll } from '.';
+
+interface ScrollMetrics {
+  scrollWidth: number;
+  scrollHeight: number;
+  clientWidth: number;
+  clientHeight: number;
+}
+
+function makeScrollable(overrides: Partial<ScrollMetrics> = {}) {
+  const el = document.createElement('div');
+  Object.defineProperties(el, {
+    scrollWidth: { value: overrides.scrollWidth ?? 1000, configurable: true },
+    scrollHeight: { value: overrides.scrollHeight ?? 1000, configurable: true },
+    clientWidth: { value: overrides.clientWidth ?? 100, configurable: true },
+    clientHeight: { value: overrides.clientHeight ?? 100, configurable: true },
+  });
+  el.scrollLeft = 0;
+  el.scrollTop = 0;
+  return el;
+}
+
+function withScope<T>(fn: () => T): { result: T; scope: ReturnType<typeof effectScope> } {
+  const scope = effectScope();
+  let result!: T;
+  scope.run(() => {
+    result = fn();
+  });
+  return { result, scope };
+}
+
+// Let queued promises (loader + delay Promise.all, its .finally, the nested
+// nextTick re-check) and post-flush watchers fully settle.
+async function settle() {
+  for (let i = 0; i < 4; i++) {
+    await Promise.resolve();
+    await nextTick();
+  }
+}
+
+interface Deferred {
+  promise: Promise<void>;
+  resolve: () => void;
+}
+
+function defer(): Deferred {
+  let resolve!: () => void;
+  const promise = new Promise<void>((res) => {
+    resolve = res;
+  });
+  return { promise, resolve };
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+  vi.useRealTimers();
+});
+
+describe(useInfiniteScroll, () => {
+  it('loads immediately when the container is not overflowing', async () => {
+    // scrollHeight <= clientHeight -> no scroll event will ever fire, so it
+    // should load eagerly on mount.
+    const el = makeScrollable({ scrollHeight: 100, clientHeight: 100 });
+    const onLoadMore = vi.fn();
+
+    const { result, scope } = withScope(() =>
+      useInfiniteScroll(ref(el), onLoadMore, { interval: 0 }));
+
+    await settle();
+
+    expect(onLoadMore).toHaveBeenCalledTimes(1);
+    expect(result.isLoading.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('does not load when the bottom edge is far away', async () => {
+    const el = makeScrollable();
+    const onLoadMore = vi.fn();
+
+    const { scope } = withScope(() =>
+      useInfiniteScroll(ref(el), onLoadMore, { interval: 0 }));
+
+    await settle();
+
+    expect(onLoadMore).not.toHaveBeenCalled();
+    scope.stop();
+  });
+
+  it('loads when scrolled within distance of the bottom edge', async () => {
+    const el = makeScrollable();
+    const onLoadMore = vi.fn();
+
+    const { scope } = withScope(() =>
+      useInfiniteScroll(ref(el), onLoadMore, { distance: 50, interval: 0 }));
+
+    await settle();
+    expect(onLoadMore).not.toHaveBeenCalled();
+
+    // 860 + 100 client + 50 distance >= 1000 scrollHeight - threshold
+    el.scrollTop = 860;
+    el.dispatchEvent(new Event('scroll'));
+    await settle();
+
+    expect(onLoadMore).toHaveBeenCalledTimes(1);
+    scope.stop();
+  });
+
+  it('respects the horizontal "right" direction', async () => {
+    const el = makeScrollable();
+    const onLoadMore = vi.fn();
+
+    const { scope } = withScope(() =>
+      useInfiniteScroll(ref(el), onLoadMore, { direction: 'right', interval: 0 }));
+
+    await settle();
+    expect(onLoadMore).not.toHaveBeenCalled();
+
+    el.scrollLeft = 900;
+    el.dispatchEvent(new Event('scroll'));
+    await settle();
+
+    expect(onLoadMore).toHaveBeenCalledTimes(1);
+    scope.stop();
+  });
+
+  it('exposes isLoading while an async loader is in flight', async () => {
+    const el = makeScrollable({ scrollHeight: 100, clientHeight: 100 });
+    const gate = defer();
+    const onLoadMore = vi.fn(() => gate.promise);
+
+    const { result, scope } = withScope(() =>
+      useInfiniteScroll(ref(el), onLoadMore, { interval: 0 }));
+
+    await settle();
+    expect(result.isLoading.value).toBeTruthy();
+
+    gate.resolve();
+    await settle();
+    expect(result.isLoading.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('does not start a second load while one is pending', async () => {
+    const el = makeScrollable({ scrollHeight: 100, clientHeight: 100 });
+    const gate = defer();
+    const onLoadMore = vi.fn(() => gate.promise);
+
+    const { scope } = withScope(() =>
+      useInfiniteScroll(ref(el), onLoadMore, { interval: 0 }));
+
+    await settle();
+    expect(onLoadMore).toHaveBeenCalledTimes(1);
+
+    // Trigger another check while the first load is still pending.
+    el.dispatchEvent(new Event('scroll'));
+    await settle();
+    expect(onLoadMore).toHaveBeenCalledTimes(1);
+
+    gate.resolve();
+    await settle();
+    scope.stop();
+  });
+
+  it('stops loading when canLoadMore returns false', async () => {
+    const el = makeScrollable({ scrollHeight: 100, clientHeight: 100 });
+    const onLoadMore = vi.fn();
+
+    const { scope } = withScope(() =>
+      useInfiniteScroll(ref(el), onLoadMore, { interval: 0, canLoadMore: () => false }));
+
+    await settle();
+
+    expect(onLoadMore).not.toHaveBeenCalled();
+    scope.stop();
+  });
+
+  it('reports loader errors via onError and keeps isLoading false afterwards', async () => {
+    const el = makeScrollable({ scrollHeight: 100, clientHeight: 100 });
+    const onError = vi.fn();
+    const onLoadMore = vi.fn(() => Promise.reject(new Error('boom')));
+
+    const { result, scope } = withScope(() =>
+      useInfiniteScroll(ref(el), onLoadMore, { interval: 0, onError }));
+
+    await settle();
+    await settle();
+
+    expect(onLoadMore).toHaveBeenCalled();
+    expect(onError).toHaveBeenCalledWith(expect.any(Error));
+    expect(result.isLoading.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('reset() re-runs the edge check', async () => {
+    const el = makeScrollable();
+    const onLoadMore = vi.fn();
+
+    const { result, scope } = withScope(() =>
+      useInfiniteScroll(ref(el), onLoadMore, { interval: 0 }));
+
+    await settle();
+    expect(onLoadMore).not.toHaveBeenCalled();
+
+    // Now make the container not overflow, then reset to pick it up.
+    Object.defineProperty(el, 'scrollHeight', { value: 100, configurable: true });
+    result.reset();
+    await settle();
+
+    expect(onLoadMore).toHaveBeenCalledTimes(1);
+    scope.stop();
+  });
+
+  it('does nothing in an SSR-like environment (window undefined)', async () => {
+    const onLoadMore = vi.fn();
+
+    const { result, scope } = withScope(() =>
+      useInfiniteScroll(ref(null), onLoadMore, { window: undefined, interval: 0 }));
+
+    await settle();
+
+    expect(onLoadMore).not.toHaveBeenCalled();
+    expect(result.isLoading.value).toBeFalsy();
+    expect(typeof result.reset).toBe('function');
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/sensors/useInfiniteScroll/index.ts b/vue/toolkit/src/composables/sensors/useInfiniteScroll/index.ts
new file mode 100644
index 0000000..d0c3f60
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useInfiniteScroll/index.ts
@@ -0,0 +1,241 @@
+import { computed, nextTick, reactive, shallowRef, toValue, watch } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter, UnwrapNestedRefs } from 'vue';
+import { noop } from '@robonen/stdlib';
+import { unrefElement } from '@/composables/component/unrefElement';
+import { useSupported } from '@/composables/utilities/useSupported';
+import { useElementVisibility } from '@/composables/elements/useElementVisibility';
+import { useScroll } from '@/composables/sensors/useScroll';
+import type { UseScrollOptions, UseScrollReturn } from '@/composables/sensors/useScroll';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+import { defaultWindow } from '@/types';
+
+export type InfiniteScrollElement = HTMLElement | SVGElement | Window | Document | null | undefined;
+
+export type UseInfiniteScrollDirection = 'top' | 'bottom' | 'left' | 'right';
+
+/**
+ * Result of the `onLoadMore` callback. May be synchronous or a promise; the
+ * loader is considered busy until it settles.
+ */
+export type UseInfiniteScrollLoadMore
+  = (state: UnwrapNestedRefs<UseScrollReturn>) => void | Promise<unknown>;
+
+export interface UseInfiniteScrollOptions<T extends InfiniteScrollElement = InfiniteScrollElement>
+  extends UseScrollOptions {
+  /**
+   * Distance (px) from the edge in `direction` at which `onLoadMore` fires.
+   *
+   * @default 0
+   */
+  distance?: number;
+
+  /**
+   * Edge that triggers loading more content.
+   *
+   * @default 'bottom'
+   */
+  direction?: UseInfiniteScrollDirection;
+
+  /**
+   * Minimum delay (ms) between two `onLoadMore` calls. The loader stays busy
+   * for at least this long even if the callback resolves sooner, which avoids
+   * hammering when the content does not grow.
+   *
+   * @default 100
+   */
+  interval?: number;
+
+  /**
+   * Guard checked before each load. Return `false` to stop further loading
+   * (e.g. when the last page has been reached).
+   *
+   * @default () => true
+   */
+  canLoadMore?: (el: T) => boolean;
+}
+
+export interface UseInfiniteScrollReturn {
+  /**
+   * Whether `onLoadMore` is currently in flight.
+   */
+  isLoading: ComputedRef<boolean>;
+
+  /**
+   * Re-run the edge check on the next tick. Call after appending content if
+   * the container is still not full and you want to keep loading.
+   */
+  reset: () => void;
+}
+
+const DEFAULT_INTERVAL_MILLISECONDS = 100;
+
+/**
+ * @name useInfiniteScroll
+ * @category Sensors
+ * @description Trigger a loader as a scroll container nears one of its edges.
+ * Backed by {@link useScroll} for RTL-aware arrived-edge detection: the
+ * `distance` is folded into that direction's offset, so `onLoadMore` fires the
+ * moment the edge comes within `distance` pixels. Re-checks automatically after
+ * each load (so an under-filled container keeps loading) and degrades safely
+ * under SSR and when `IntersectionObserver` is unavailable.
+ *
+ * @param {MaybeRefOrGetter<T>} target Scroll container (element ref, getter, window, or document)
+ * @param {UseInfiniteScrollLoadMore} onLoadMore Called near the edge; may return a promise
+ * @param {UseInfiniteScrollOptions<T>} [options={}] Options
+ * @returns {UseInfiniteScrollReturn} `{ isLoading, reset }`
+ *
+ * @example
+ * const { isLoading } = useInfiniteScroll(el, async () => {
+ *   items.push(...await fetchNextPage());
+ * }, { distance: 10 });
+ *
+ * @since 0.0.15
+ */
+export function useInfiniteScroll<T extends InfiniteScrollElement = InfiniteScrollElement>(
+  target: MaybeRefOrGetter<T>,
+  onLoadMore: UseInfiniteScrollLoadMore,
+  options: UseInfiniteScrollOptions<T> = {},
+): UseInfiniteScrollReturn {
+  const {
+    distance = 0,
+    direction = 'bottom',
+    interval = DEFAULT_INTERVAL_MILLISECONDS,
+    canLoadMore = () => true,
+    window = defaultWindow,
+    onError = noop,
+  } = options;
+
+  // Fold `distance` into the scroll offset for the chosen edge so arrived-state
+  // flips early, instead of recomputing geometry here on every tick.
+  const state = reactive(useScroll(target, {
+    ...options,
+    offset: {
+      [direction]: distance,
+      ...options.offset,
+    },
+  }));
+
+  // Resolve to a measurable DOM element. Window/Document are not observable by
+  // IntersectionObserver and have no scroll/client metrics, so visibility is
+  // skipped for them (they are always "visible").
+  const observedElement = computed<HTMLElement | SVGElement | null>(() => {
+    const el = unrefElement(target as MaybeRefOrGetter<HTMLElement | SVGElement | null | undefined>);
+    return el ?? null;
+  });
+
+  // IntersectionObserver-backed visibility gate. When unsupported (SSR/jsdom)
+  // we default to visible so the loader still works — VueUse would silently
+  // never load in those environments.
+  const isVisibilitySupported = useSupported(() => !!window && 'IntersectionObserver' in window);
+  const isVisible = useElementVisibility(observedElement, {
+    window,
+    initialValue: !isVisibilitySupported.value,
+  });
+
+  const promise = shallowRef<Promise<unknown> | null>(null);
+  const isLoading = computed<boolean>(() => promise.value !== null);
+
+  const canLoad = computed<boolean>(() => {
+    const el = toValue(target);
+
+    if (!el)
+      return false;
+
+    return canLoadMore(el as T);
+  });
+
+  const isElementVisible = (): boolean => !isVisibilitySupported.value || isVisible.value;
+
+  // Content-size signature captured before the most recent load. Used to break
+  // runaway loops: if a load adds nothing along the scroll axis we do NOT
+  // auto-rechain (VueUse spins forever in that case); a real scroll, edge,
+  // visibility, or canLoadMore change — or an explicit reset() — still re-arms.
+  let lastContentSize = -1;
+
+  const contentSize = (el: HTMLElement | SVGElement | null): number => {
+    if (!el)
+      return -1;
+
+    const node = el as Partial<HTMLElement>;
+    return direction === 'top' || direction === 'bottom'
+      ? (node.scrollHeight ?? 0)
+      : (node.scrollWidth ?? 0);
+  };
+
+  // `auto` distinguishes the watcher-driven path (which may auto-rechain after a
+  // load) from the post-load tail call (which must not rechain on stagnant content).
+  const checkAndLoad = (rechained = false): void => {
+    state.measure();
+
+    if (promise.value !== null || !canLoad.value || !isElementVisible())
+      return;
+
+    // A container smaller than its content along the scroll axis can never emit
+    // a scroll event, so treat "not overflowing" as already arrived.
+    const el = observedElement.value;
+    const isNarrower = isNotOverflowing(el, direction);
+
+    if (!state.arrivedState[direction] && !isNarrower)
+      return;
+
+    const sizeBefore = contentSize(el);
+
+    // The post-load re-check only proceeds while content keeps growing; once it
+    // stalls we stop so a no-op loader cannot busy-loop.
+    if (rechained && sizeBefore === lastContentSize)
+      return;
+
+    lastContentSize = sizeBefore;
+
+    promise.value = Promise.all([
+      // Wrap so a throwing or rejecting loader cannot leave `isLoading` stuck
+      // on `true`; the error is reported and the loop continues.
+      Promise.resolve()
+        .then(() => onLoadMore(state))
+        .catch((error) => { onError(error); }),
+      delay(interval, window as (Window & typeof globalThis) | undefined),
+    ]).finally(() => {
+      promise.value = null;
+      // Content may still not fill the container — re-check next tick.
+      void nextTick(() => checkAndLoad(true));
+    });
+  };
+
+  const stop = watch(
+    () => [state.arrivedState[direction], isVisible.value, canLoad.value] as const,
+    () => checkAndLoad(),
+    { immediate: true, flush: 'post' },
+  );
+
+  tryOnScopeDispose(stop);
+
+  return {
+    isLoading,
+    reset(): void {
+      void nextTick(() => checkAndLoad());
+    },
+  };
+}
+
+function isNotOverflowing(
+  el: HTMLElement | SVGElement | null,
+  direction: UseInfiniteScrollDirection,
+): boolean {
+  if (!el)
+    return false;
+
+  // SVGElement does not expose scroll/client metrics; only HTMLElement does.
+  const node = el as Partial<HTMLElement>;
+
+  if (direction === 'top' || direction === 'bottom')
+    return (node.scrollHeight ?? 0) <= (node.clientHeight ?? 0);
+
+  return (node.scrollWidth ?? 0) <= (node.clientWidth ?? 0);
+}
+
+function delay(ms: number, window: typeof defaultWindow): Promise<void> {
+  if (ms <= 0 || !window)
+    return Promise.resolve();
+
+  return new Promise<void>(resolve => window.setTimeout(resolve, ms));
+}
diff --git a/vue/toolkit/src/composables/sensors/useKeyModifier/demo.vue b/vue/toolkit/src/composables/sensors/useKeyModifier/demo.vue
new file mode 100644
index 0000000..8c445b2
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useKeyModifier/demo.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useKeyModifier } from './index';
+
+// Each call returns a single ShallowRef — bind it directly, do not destructure.
+const capsLock = useKeyModifier('CapsLock');
+const numLock = useKeyModifier('NumLock');
+const shift = useKeyModifier('Shift', { initial: false });
+const control = useKeyModifier('Control', { initial: false });
+const meta = useKeyModifier('Meta', { initial: false });
+const alt = useKeyModifier('Alt', { initial: false });
+
+const lockKeys = computed(() => [
+  { label: 'Caps Lock', state: capsLock.value },
+  { label: 'Num Lock', state: numLock.value },
+]);
+
+const heldKeys = computed(() => [
+  { label: 'Shift', state: shift.value },
+  { label: 'Control', state: control.value },
+  { label: 'Meta', state: meta.value },
+  { label: 'Alt', state: alt.value },
+]);
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <p class="text-sm text-(--fg-muted)">
+      Toggle <span class="font-medium text-(--fg)">Caps Lock</span> / <span class="font-medium text-(--fg)">Num Lock</span>,
+      or hold a modifier key, then press any key (or click here) to refresh state.
+    </p>
+
+    <div class="flex flex-col gap-2">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Lock keys</span>
+      <div class="grid grid-cols-2 gap-2">
+        <div
+          v-for="key in lockKeys"
+          :key="key.label"
+          class="flex items-center justify-between gap-2 rounded-lg border px-3 py-2 transition"
+          :class="key.state
+            ? 'border-(--accent) bg-(--accent-subtle) text-(--accent-text)'
+            : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+        >
+          <span class="text-sm font-medium">{{ key.label }}</span>
+          <span class="font-mono text-xs tabular-nums">
+            {{ key.state === null ? 'null' : key.state ? 'ON' : 'off' }}
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Held modifiers</span>
+      <div class="grid grid-cols-4 gap-2">
+        <div
+          v-for="key in heldKeys"
+          :key="key.label"
+          class="flex flex-col items-center gap-1 rounded-lg border px-2 py-2.5 text-center transition"
+          :class="key.state
+            ? 'border-emerald-500/40 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+            : 'border-(--border) bg-(--bg-inset) text-(--fg-subtle)'"
+        >
+          <span class="text-xs font-medium">{{ key.label }}</span>
+          <span
+            class="size-2 rounded-full transition"
+            :class="key.state ? 'bg-emerald-500' : 'bg-(--border-strong)'"
+          />
+        </div>
+      </div>
+    </div>
+
+    <p class="rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2 text-xs text-(--fg-subtle)">
+      Modifier state is read from <span class="font-mono text-(--fg-muted)">getModifierState</span>, so it stays
+      <span class="font-mono text-(--fg-muted)">null</span> until the first matching event arrives.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useKeyModifier/index.test.ts b/vue/toolkit/src/composables/sensors/useKeyModifier/index.test.ts
new file mode 100644
index 0000000..8568466
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useKeyModifier/index.test.ts
@@ -0,0 +1,174 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick } from 'vue';
+import { useKeyModifier } from '.';
+import type { KeyModifier } from '.';
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+/**
+ * Dispatch an event on `document` whose `getModifierState(modifier)` resolves to `active`.
+ * jsdom does not track real modifier state, so we stub the method per event.
+ */
+function dispatchModifier(
+  type: string,
+  active: boolean,
+  modifier: KeyModifier = 'Shift',
+  withGetModifierState = true,
+) {
+  const event = new Event(type) as Event & {
+    getModifierState?: (key: string) => boolean;
+  };
+
+  if (withGetModifierState) {
+    event.getModifierState = (key: string) => (key === modifier ? active : false);
+  }
+
+  document.dispatchEvent(event);
+}
+
+describe(useKeyModifier, () => {
+  it('defaults to null until the first matching event', () => {
+    const scope = effectScope();
+    let state: ReturnType<typeof useKeyModifier>;
+    scope.run(() => {
+      state = useKeyModifier('Shift');
+    });
+
+    expect(state!.value).toBeNull();
+    scope.stop();
+  });
+
+  it('respects a provided initial value', () => {
+    const scope = effectScope();
+    let state: ReturnType<typeof useKeyModifier<boolean>>;
+    scope.run(() => {
+      state = useKeyModifier('Shift', { initial: false });
+    });
+
+    expect(state!.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('updates when a default event reports the modifier active', async () => {
+    const scope = effectScope();
+    let state: ReturnType<typeof useKeyModifier>;
+    scope.run(() => {
+      state = useKeyModifier('Shift');
+    });
+
+    dispatchModifier('keydown', true, 'Shift');
+    await nextTick();
+    expect(state!.value).toBeTruthy();
+
+    dispatchModifier('keyup', false, 'Shift');
+    await nextTick();
+    expect(state!.value).toBeFalsy();
+
+    scope.stop();
+  });
+
+  it('tracks each modifier independently', async () => {
+    const scope = effectScope();
+    let caps: ReturnType<typeof useKeyModifier>;
+    scope.run(() => {
+      caps = useKeyModifier('CapsLock');
+    });
+
+    dispatchModifier('keydown', true, 'CapsLock');
+    await nextTick();
+    expect(caps!.value).toBeTruthy();
+
+    // An event reporting a different modifier (Shift) must not flip CapsLock
+    dispatchModifier('keydown', true, 'Shift');
+    await nextTick();
+    expect(caps!.value).toBeFalsy();
+
+    scope.stop();
+  });
+
+  it('only listens on the configured events', async () => {
+    const scope = effectScope();
+    let state: ReturnType<typeof useKeyModifier>;
+    scope.run(() => {
+      state = useKeyModifier('Shift', { events: ['keydown'] });
+    });
+
+    dispatchModifier('keyup', true, 'Shift');
+    await nextTick();
+    expect(state!.value).toBeNull();
+
+    dispatchModifier('keydown', true, 'Shift');
+    await nextTick();
+    expect(state!.value).toBeTruthy();
+
+    scope.stop();
+  });
+
+  it('ignores events without getModifierState', async () => {
+    const scope = effectScope();
+    let state: ReturnType<typeof useKeyModifier>;
+    scope.run(() => {
+      state = useKeyModifier('Shift', { initial: false });
+    });
+
+    dispatchModifier('keydown', true, 'Shift', false);
+    await nextTick();
+    expect(state!.value).toBeFalsy();
+
+    scope.stop();
+  });
+
+  it('removes its listeners when the scope is disposed', async () => {
+    const scope = effectScope();
+    let state: ReturnType<typeof useKeyModifier>;
+    scope.run(() => {
+      state = useKeyModifier('Shift');
+    });
+
+    scope.stop();
+
+    dispatchModifier('keydown', true, 'Shift');
+    await nextTick();
+    expect(state!.value).toBeNull();
+  });
+
+  it('accepts a custom document and listens on it', async () => {
+    const listeners = new Map<string, Set<EventListener>>();
+    const fakeDocument = {
+      addEventListener(type: string, listener: EventListener) {
+        if (!listeners.has(type))
+          listeners.set(type, new Set());
+        listeners.get(type)!.add(listener);
+      },
+      removeEventListener(type: string, listener: EventListener) {
+        listeners.get(type)?.delete(listener);
+      },
+    } as unknown as Document;
+
+    const scope = effectScope();
+    let state: ReturnType<typeof useKeyModifier>;
+    scope.run(() => {
+      state = useKeyModifier('Meta', { document: fakeDocument });
+    });
+
+    const event = { getModifierState: (k: string) => k === 'Meta' } as unknown as KeyboardEvent;
+    listeners.get('keydown')!.forEach(fn => fn(event));
+    await nextTick();
+    expect(state!.value).toBeTruthy();
+
+    scope.stop();
+  });
+
+  it('is a no-op under SSR (no document)', () => {
+    const scope = effectScope();
+    let state: ReturnType<typeof useKeyModifier>;
+    scope.run(() => {
+      state = useKeyModifier('Shift', { document: undefined, initial: false });
+    });
+
+    expect(state!.value).toBeFalsy();
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/sensors/useKeyModifier/index.ts b/vue/toolkit/src/composables/sensors/useKeyModifier/index.ts
new file mode 100644
index 0000000..59a0013
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useKeyModifier/index.ts
@@ -0,0 +1,83 @@
+import { shallowRef } from 'vue';
+import type { ShallowRef } from 'vue';
+import { isFunction } from '@robonen/stdlib';
+import { defaultDocument } from '@/types';
+import type { ConfigurableDocument } from '@/types';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import type { DocumentEventName } from '@/composables/browser/useEventListener';
+
+export type KeyModifier
+  = | 'Alt'
+    | 'AltGraph'
+    | 'CapsLock'
+    | 'Control'
+    | 'Fn'
+    | 'FnLock'
+    | 'Meta'
+    | 'NumLock'
+    | 'ScrollLock'
+    | 'Shift'
+    | 'Symbol'
+    | 'SymbolLock';
+
+const DEFAULT_EVENTS: DocumentEventName[] = ['mousedown', 'mouseup', 'keydown', 'keyup'];
+
+export interface UseKeyModifierOptions<Initial> extends ConfigurableDocument {
+  /**
+   * Event names that will prompt an update to the modifier state.
+   *
+   * @default ['mousedown', 'mouseup', 'keydown', 'keyup']
+   */
+  events?: DocumentEventName[];
+
+  /**
+   * Initial value of the returned ref.
+   *
+   * @default null
+   */
+  initial?: Initial;
+}
+
+export type UseKeyModifierReturn<Initial> = ShallowRef<Initial extends boolean ? boolean : boolean | null>;
+
+/**
+ * @name useKeyModifier
+ * @category Sensors
+ * @description Reactive state of a keyboard modifier (CapsLock, NumLock, Shift, Control, Alt, Meta, ...) tracked via `KeyboardEvent.getModifierState`.
+ *
+ * @param {KeyModifier} modifier The modifier key to observe
+ * @param {UseKeyModifierOptions} [options={}] Options (`events` to listen on, `initial` value, custom `document`)
+ * @returns {UseKeyModifierReturn} A shallow ref holding the current modifier state (`null` until the first matching event)
+ *
+ * @example
+ * const capsLock = useKeyModifier('CapsLock');
+ * watch(capsLock, (on) => {
+ *   if (on) showCapsLockWarning();
+ * });
+ *
+ * @example
+ * const shift = useKeyModifier('Shift', { initial: false, events: ['keydown', 'keyup'] });
+ *
+ * @since 0.0.15
+ */
+export function useKeyModifier<Initial extends boolean | null = null>(
+  modifier: KeyModifier,
+  options: UseKeyModifierOptions<Initial> = {},
+): UseKeyModifierReturn<Initial> {
+  const {
+    events = DEFAULT_EVENTS,
+    document = defaultDocument,
+    initial = null,
+  } = options;
+
+  const state = shallowRef(initial) as ShallowRef<boolean | null>;
+
+  if (document) {
+    useEventListener(document, events, (event: KeyboardEvent | MouseEvent) => {
+      if (isFunction(event.getModifierState))
+        state.value = event.getModifierState(modifier);
+    }, { passive: true });
+  }
+
+  return state as UseKeyModifierReturn<Initial>;
+}
diff --git a/vue/toolkit/src/composables/sensors/useMagicKeys/demo.vue b/vue/toolkit/src/composables/sensors/useMagicKeys/demo.vue
new file mode 100644
index 0000000..8ac46f1
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useMagicKeys/demo.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { useMagicKeys } from './index';
+
+// Prevent the browser's own save/find dialogs from stealing the chord.
+const keys = useMagicKeys({
+  onEventFired(e) {
+    if ((e.ctrlKey || e.metaKey) && ['s', 'k'].includes(e.key.toLowerCase()) && e.type === 'keydown')
+      e.preventDefault();
+  },
+});
+
+const { current, reset } = keys;
+
+// Combos are accessed as proxy properties returning ComputedRef<boolean>.
+const save = keys['ctrl+s'];
+const search = keys['cmd+k'];
+const selectAll = keys['ctrl+a'];
+
+const log = ref<string[]>([]);
+function fire(action: string) {
+  log.value = [`${new Date().toLocaleTimeString(undefined, { hour12: false })} · ${action}`, ...log.value].slice(0, 4);
+}
+
+// Each combo computed flips true exactly when the chord completes.
+watch(save, v => v && fire('Save (Ctrl+S)'));
+watch(search, v => v && fire('Search (Cmd+K)'));
+watch(selectAll, v => v && fire('Select all (Ctrl+A)'));
+
+const pressed = computed(() => [...current]);
+
+const combos = computed(() => [
+  { label: 'Ctrl + S', active: save.value },
+  { label: 'Cmd + K', active: search.value },
+  { label: 'Ctrl + A', active: selectAll.value },
+]);
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <p class="text-sm text-(--fg-muted)">
+      Press keys or try a combo — <span class="font-medium text-(--fg)">Ctrl + S</span>,
+      <span class="font-medium text-(--fg)">Cmd + K</span>, or
+      <span class="font-medium text-(--fg)">Ctrl + A</span>.
+    </p>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Currently pressed</span>
+        <button
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-2.5 py-1 text-xs font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          :disabled="!pressed.length"
+          @click="reset()"
+        >
+          Reset
+        </button>
+      </div>
+
+      <div class="mt-3 flex min-h-9 flex-wrap items-center gap-1.5">
+        <kbd
+          v-for="key in pressed"
+          :key="key"
+          class="inline-flex min-w-7 items-center justify-center rounded-md border border-(--border-strong) bg-(--bg-inset) px-2 py-1 font-mono text-xs font-semibold text-(--fg) shadow-sm"
+        >
+          {{ key === ' ' ? 'Space' : key }}
+        </kbd>
+        <span v-if="!pressed.length" class="text-sm text-(--fg-subtle)">No keys held</span>
+      </div>
+    </div>
+
+    <div class="grid grid-cols-3 gap-2">
+      <div
+        v-for="combo in combos"
+        :key="combo.label"
+        class="flex flex-col items-center gap-1 rounded-lg border px-2 py-2.5 text-center text-xs font-medium transition"
+        :class="combo.active
+          ? 'border-(--accent) bg-(--accent-subtle) text-(--accent-text)'
+          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        {{ combo.label }}
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs text-(--fg) tabular-nums">
+      <div class="mb-1.5 text-(--fg-subtle)">Triggered actions</div>
+      <ul v-if="log.length" class="flex flex-col gap-0.5">
+        <li v-for="entry in log" :key="entry" class="text-(--fg-muted)">{{ entry }}</li>
+      </ul>
+      <span v-else class="text-(--fg-subtle)">Waiting for a chord…</span>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useMagicKeys/index.test.ts b/vue/toolkit/src/composables/sensors/useMagicKeys/index.test.ts
new file mode 100644
index 0000000..885a4c1
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useMagicKeys/index.test.ts
@@ -0,0 +1,305 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, toValue, watch } from 'vue';
+import { DefaultMagicKeysAliasMap, useMagicKeys } from '.';
+
+function keydown(key: string, init: KeyboardEventInit = {}, target: EventTarget = globalThis) {
+  target.dispatchEvent(new KeyboardEvent('keydown', { key, ...init }));
+}
+
+function keyup(key: string, init: KeyboardEventInit = {}, target: EventTarget = globalThis) {
+  target.dispatchEvent(new KeyboardEvent('keyup', { key, ...init }));
+}
+
+describe(useMagicKeys, () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it('tracks a single pressed key', () => {
+    const scope = effectScope();
+
+    scope.run(() => {
+      const keys = useMagicKeys();
+
+      expect(keys.a!.value).toBeFalsy();
+
+      keydown('a');
+      expect(keys.a!.value).toBeTruthy();
+
+      keyup('a');
+      expect(keys.a!.value).toBeFalsy();
+    });
+
+    scope.stop();
+  });
+
+  it('exposes the current Set of pressed keys', () => {
+    const scope = effectScope();
+
+    scope.run(() => {
+      const keys = useMagicKeys();
+
+      keydown('a');
+      keydown('b');
+
+      expect([...keys.current]).toEqual(['a', 'b']);
+
+      keyup('a');
+      expect([...keys.current]).toEqual(['b']);
+    });
+
+    scope.stop();
+  });
+
+  it('supports combinations via proxy property (ctrl+a)', () => {
+    const scope = effectScope();
+
+    scope.run(() => {
+      const keys = useMagicKeys();
+      const ctrlA = keys['ctrl+a']!;
+
+      expect(ctrlA.value).toBeFalsy();
+
+      keydown('Control');
+      expect(ctrlA.value).toBeFalsy();
+
+      keydown('a');
+      expect(ctrlA.value).toBeTruthy();
+
+      keyup('a');
+      expect(ctrlA.value).toBeFalsy();
+    });
+
+    scope.stop();
+  });
+
+  it('supports combos with _ and - delimiters', () => {
+    const scope = effectScope();
+
+    scope.run(() => {
+      const keys = useMagicKeys();
+      const underscore = keys.ctrl_a!;
+      const dash = keys['ctrl-a']!;
+
+      keydown('Control');
+      keydown('a');
+
+      expect(underscore.value).toBeTruthy();
+      expect(dash.value).toBeTruthy();
+    });
+
+    scope.stop();
+  });
+
+  it('resolves aliases (cmd -> meta, esc -> escape)', () => {
+    const scope = effectScope();
+
+    scope.run(() => {
+      const keys = useMagicKeys();
+
+      keydown('Meta');
+      expect(keys.cmd!.value).toBeTruthy();
+      expect(keys.command!.value).toBeTruthy();
+      expect(keys.meta!.value).toBeTruthy();
+
+      keyup('Meta');
+
+      keydown('Escape');
+      expect(keys.esc!.value).toBeTruthy();
+    });
+
+    scope.stop();
+  });
+
+  it('respects a custom aliasMap', () => {
+    const scope = effectScope();
+
+    scope.run(() => {
+      const keys = useMagicKeys({ aliasMap: { fire: 'f' } });
+
+      keydown('f');
+      expect(keys.fire!.value).toBeTruthy();
+    });
+
+    scope.stop();
+  });
+
+  it('is case-insensitive on property access', () => {
+    const scope = effectScope();
+
+    scope.run(() => {
+      const keys = useMagicKeys();
+
+      keydown('a');
+      expect(keys.A!.value).toBeTruthy();
+    });
+
+    scope.stop();
+  });
+
+  it('tracks event.code as well as key', () => {
+    const scope = effectScope();
+
+    scope.run(() => {
+      const keys = useMagicKeys();
+
+      keydown('a', { code: 'KeyA' });
+      expect((keys as any).keya.value).toBeTruthy();
+
+      keyup('a', { code: 'KeyA' });
+      expect((keys as any).keya.value).toBeFalsy();
+    });
+
+    scope.stop();
+  });
+
+  it('reactive mode returns plain booleans', () => {
+    const scope = effectScope();
+
+    scope.run(() => {
+      const keys = useMagicKeys({ reactive: true });
+
+      expect(keys.a).toBeFalsy();
+
+      keydown('a');
+      expect(keys.a).toBeTruthy();
+    });
+
+    scope.stop();
+  });
+
+  it('reset() clears the current Set and all refs', () => {
+    const scope = effectScope();
+
+    scope.run(() => {
+      const keys = useMagicKeys();
+
+      keydown('a');
+      keydown('b');
+      expect(keys.a!.value).toBeTruthy();
+
+      keys.reset();
+
+      expect(keys.a!.value).toBeFalsy();
+      expect(keys.b!.value).toBeFalsy();
+      expect(keys.current.size).toBe(0);
+    });
+
+    scope.stop();
+  });
+
+  it('resets on blur so keys do not stick', () => {
+    const scope = effectScope();
+
+    scope.run(() => {
+      const keys = useMagicKeys();
+
+      keydown('a');
+      expect(keys.a!.value).toBeTruthy();
+
+      globalThis.dispatchEvent(new Event('blur'));
+      expect(keys.a!.value).toBeFalsy();
+      expect(keys.current.size).toBe(0);
+    });
+
+    scope.stop();
+  });
+
+  it('clears meta-dependent keys when Meta is released (macOS behaviour)', () => {
+    const scope = effectScope();
+
+    scope.run(() => {
+      const keys = useMagicKeys();
+
+      // Press Cmd, then 'a' while Cmd held (getModifierState reports Meta)
+      keydown('Meta');
+      keydown('a', { metaKey: true });
+
+      expect(keys.a!.value).toBeTruthy();
+      expect(keys.current.has('a')).toBeTruthy();
+
+      // Releasing Meta should drop 'a' too (no keyup fires for it on macOS)
+      keyup('Meta');
+
+      expect(keys.meta!.value).toBeFalsy();
+      expect(keys.a!.value).toBeFalsy();
+      expect(keys.current.has('a')).toBeFalsy();
+    });
+
+    scope.stop();
+  });
+
+  it('invokes onEventFired for keydown and keyup', () => {
+    const scope = effectScope();
+
+    scope.run(() => {
+      const onEventFired = vi.fn();
+      useMagicKeys({ onEventFired });
+
+      keydown('a');
+      keyup('a');
+
+      expect(onEventFired).toHaveBeenCalledTimes(2);
+      expect(onEventFired.mock.calls[0]![0]).toBeInstanceOf(KeyboardEvent);
+    });
+
+    scope.stop();
+  });
+
+  it('attaches to a custom target', () => {
+    const scope = effectScope();
+
+    scope.run(() => {
+      const el = document.createElement('div');
+      const keys = useMagicKeys({ target: el });
+
+      keydown('a', {}, el);
+      expect(keys.a!.value).toBeTruthy();
+
+      // window events should not affect a custom target
+      keyup('a', {}, el);
+      keydown('b');
+      expect(keys.b!.value).toBeFalsy();
+    });
+
+    scope.stop();
+  });
+
+  it('combination refs are reactive (computed)', async () => {
+    const scope = effectScope();
+
+    await scope.run(async () => {
+      const keys = useMagicKeys();
+      const combo = keys['shift+a']!;
+
+      const seen: boolean[] = [];
+      watch(combo, v => seen.push(v));
+
+      keydown('Shift');
+      keydown('a');
+      await nextTick();
+
+      expect(toValue(combo)).toBeTruthy();
+      expect(seen).toContain(true);
+    });
+
+    scope.stop();
+  });
+
+  it('exposes DefaultMagicKeysAliasMap with expected aliases', () => {
+    expect(DefaultMagicKeysAliasMap.ctrl).toBe('control');
+    expect(DefaultMagicKeysAliasMap.cmd).toBe('meta');
+    expect(DefaultMagicKeysAliasMap.command).toBe('meta');
+    expect(DefaultMagicKeysAliasMap.option).toBe('alt');
+    expect(DefaultMagicKeysAliasMap.up).toBe('arrowup');
+  });
+
+  it('does not throw and returns an object when window is absent (SSR path)', () => {
+    // No target available -> listeners are skipped, refs still usable
+    const keys = useMagicKeys({ target: undefined as unknown as EventTarget });
+
+    expect(keys.current.size).toBe(0);
+    // accessing a key lazily creates a ref defaulting to false
+    expect(keys.a!.value).toBeFalsy();
+  });
+});
diff --git a/vue/toolkit/src/composables/sensors/useMagicKeys/index.ts b/vue/toolkit/src/composables/sensors/useMagicKeys/index.ts
new file mode 100644
index 0000000..0cc6971
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useMagicKeys/index.ts
@@ -0,0 +1,227 @@
+import type { AnyFunction } from '@robonen/stdlib';
+import { isFunction, noop } from '@robonen/stdlib';
+import type { ComputedRef, Ref, ShallowRef } from 'vue';
+import { computed, reactive, shallowRef, toValue } from 'vue';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import { defaultWindow } from '@/types';
+
+export type UseMagicKeysAliasMap = Readonly<Record<string, string>>;
+
+/**
+ * Default lowercase alias map: maps common shorthand key names to their
+ * canonical `KeyboardEvent.key` (lowercased) equivalents.
+ */
+export const DefaultMagicKeysAliasMap: UseMagicKeysAliasMap = /* #__PURE__ */ {
+  ctrl: 'control',
+  command: 'meta',
+  cmd: 'meta',
+  option: 'alt',
+  opt: 'alt',
+  up: 'arrowup',
+  down: 'arrowdown',
+  left: 'arrowleft',
+  right: 'arrowright',
+  esc: 'escape',
+  space: ' ',
+};
+
+export interface UseMagicKeysOptions<Reactive extends boolean> {
+  /**
+   * Return a reactive object instead of an object of refs
+   *
+   * @default false
+   */
+  reactive?: Reactive;
+
+  /**
+   * Event target to attach the keyboard listeners to
+   *
+   * @default window
+   */
+  target?: EventTarget;
+
+  /**
+   * Alias map for keys, all keys should be lowercase
+   * { foo: 'bar' } means that pressing `bar` will also trigger `foo`
+   *
+   * @default DefaultMagicKeysAliasMap
+   */
+  aliasMap?: UseMagicKeysAliasMap;
+
+  /**
+   * Register passive listeners
+   *
+   * @default true
+   */
+  passive?: boolean;
+
+  /**
+   * Custom event handler for the keyboard event. Useful for preventing default
+   * behaviour for certain key combos. Called on every keydown and keyup.
+   */
+  onEventFired?: (event: KeyboardEvent) => void | boolean;
+}
+
+export interface UseMagicKeysReturn {
+  /**
+   * A Set of currently pressed keys (lowercase canonical names)
+   */
+  current: Set<string>;
+
+  /**
+   * Reset all tracked keys to `false` and clear the current Set
+   */
+  reset: () => void;
+}
+
+export type MagicKeys<Reactive extends boolean> = Readonly<
+  Omit<
+    Record<string, Reactive extends true ? boolean : ComputedRef<boolean>>,
+    keyof UseMagicKeysReturn
+  >
+  & UseMagicKeysReturn
+>;
+
+type KeyRefs = Record<string, Ref<boolean> | ShallowRef<boolean> | ComputedRef<boolean>>;
+
+/**
+ * @name useMagicKeys
+ * @category Sensors
+ * @description Reactive keys pressed state, with magical combination keys support via a Proxy.
+ * Access combinations directly as properties, e.g. `keys['ctrl+a']` or `keys.ctrl_a`.
+ *
+ * @param {UseMagicKeysOptions} [options] Configuration options
+ * @returns {MagicKeys} A Proxy of refs (or reactive booleans) plus `current` Set and `reset`
+ *
+ * @example
+ * const keys = useMagicKeys();
+ * const ctrlA = keys['ctrl+a'];
+ * watch(ctrlA, v => { if (v) console.log('Ctrl + A pressed'); });
+ *
+ * @example
+ * const { ctrl, a, current } = useMagicKeys({ reactive: true });
+ *
+ * @since 0.0.15
+ */
+export function useMagicKeys(options?: UseMagicKeysOptions<false>): MagicKeys<false>;
+export function useMagicKeys(options: UseMagicKeysOptions<true>): MagicKeys<true>;
+export function useMagicKeys(options: UseMagicKeysOptions<boolean> = {}): any {
+  const {
+    reactive: useReactive = false,
+    target = defaultWindow,
+    aliasMap = DefaultMagicKeysAliasMap,
+    passive = true,
+    onEventFired = noop as AnyFunction,
+  } = options;
+
+  const current = reactive(new Set<string>());
+  const usedKeys = new Set<string>();
+  // Keys pressed while Meta is held — on macOS, keyup is suppressed for other
+  // keys while Cmd is down, so we clear them when Meta is released.
+  const metaDeps = new Set<string>();
+
+  function reset(): void {
+    current.clear();
+
+    for (const key of usedKeys)
+      setRefs(key, false);
+  }
+
+  const obj: UseMagicKeysReturn = {
+    current,
+    reset,
+  };
+
+  const refs: KeyRefs = useReactive ? reactive(obj as any) : (obj as any);
+
+  function setRefs(key: string, value: boolean): void {
+    // Touch the proxy so the ref is materialized for keys we actually track,
+    // even if the consumer hasn't accessed them yet.
+    if (!(key in refs))
+      void (proxy as any)[key];
+
+    if (key in refs) {
+      if (useReactive)
+        (refs as any)[key] = value;
+      else
+        (refs[key] as Ref<boolean>).value = value;
+    }
+  }
+
+  function updateRefs(event: KeyboardEvent, value: boolean): void {
+    const key = event.key?.toLowerCase();
+    const code = event.code?.toLowerCase();
+    const values = [code, key].filter(Boolean) as string[];
+
+    if (!key)
+      return;
+
+    if (value)
+      current.add(key);
+    else
+      current.delete(key);
+
+    for (const k of values) {
+      usedKeys.add(k);
+      setRefs(k, value);
+    }
+
+    if (key === 'meta' && !value) {
+      // Cmd released on macOS: clear keys that were pressed during the chord
+      metaDeps.forEach((k) => {
+        current.delete(k);
+        setRefs(k, false);
+      });
+
+      metaDeps.clear();
+    }
+    else if (isFunction(event.getModifierState) && event.getModifierState('Meta') && value) {
+      [...current, ...values].forEach(k => metaDeps.add(k));
+    }
+  }
+
+  if (target) {
+    useEventListener(target, 'keydown', (event: KeyboardEvent) => {
+      updateRefs(event, true);
+      return onEventFired(event);
+    }, { passive });
+
+    useEventListener(target, 'keyup', (event: KeyboardEvent) => {
+      updateRefs(event, false);
+      return onEventFired(event);
+    }, { passive });
+
+    // Reset on blur so keys don't "stick" when focus leaves the page
+    useEventListener('blur', reset, { passive: true });
+    useEventListener('focus', reset, { passive: true });
+  }
+
+  const proxy = new Proxy(refs, {
+    get(target, prop, receiver) {
+      if (typeof prop !== 'string')
+        return Reflect.get(target, prop, receiver);
+
+      prop = prop.toLowerCase();
+
+      // alias resolution
+      if (prop in aliasMap)
+        prop = aliasMap[prop] as string;
+
+      // lazily create tracking ref for combos and single keys
+      if (!(prop in refs)) {
+        if (/[+_-]/.test(prop)) {
+          const keys = prop.split(/[+_-]/g).map((i: string) => i.trim());
+          refs[prop] = computed(() => keys.map(key => toValue((proxy as any)[key])).every(Boolean));
+        }
+        else {
+          refs[prop] = shallowRef(false);
+        }
+      }
+
+      const r = Reflect.get(target, prop, receiver);
+      return useReactive ? toValue(r) : r;
+    },
+  });
+
+  return proxy as any;
+}
diff --git a/vue/toolkit/src/composables/sensors/useMouse/demo.vue b/vue/toolkit/src/composables/sensors/useMouse/demo.vue
new file mode 100644
index 0000000..a7d39a4
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useMouse/demo.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { computed, useTemplateRef } from 'vue';
+import { useMouse } from './index';
+
+// Global page coordinates (and whether the input came from mouse or touch).
+const { x, y, sourceType } = useMouse();
+
+// Element-relative coordinates via a custom extractor that subtracts the
+// target's bounding box, clamped to the box so the dot stays inside.
+const area = useTemplateRef<HTMLDivElement>('area');
+const { x: relX, y: relY } = useMouse({
+  target: area,
+  type: (event) => {
+    const el = area.value;
+    if (!el || !('clientX' in event))
+      return null;
+    const rect = el.getBoundingClientRect();
+    const px = Math.min(Math.max(event.clientX - rect.left, 0), rect.width);
+    const py = Math.min(Math.max(event.clientY - rect.top, 0), rect.height);
+    return [px, py];
+  },
+});
+
+const inside = computed(() => relX.value > 0 || relY.value > 0);
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="grid grid-cols-3 gap-3">
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">page x</div>
+        <div class="mt-1 font-mono text-xl font-bold tabular-nums text-(--fg)">{{ Math.round(x) }}</div>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">page y</div>
+        <div class="mt-1 font-mono text-xl font-bold tabular-nums text-(--fg)">{{ Math.round(y) }}</div>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">source</div>
+        <div class="mt-1 font-mono text-xl font-bold tabular-nums text-(--fg)">{{ sourceType ?? '—' }}</div>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Move inside this area</span>
+      <div
+        ref="area"
+        class="relative h-40 w-full overflow-hidden rounded-xl border border-(--border) bg-(--bg-elevated)"
+        style="background-image: radial-gradient(circle, var(--border) 1px, transparent 1px); background-size: 16px 16px;"
+      >
+        <div
+          class="pointer-events-none absolute size-5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-(--accent) bg-(--accent-subtle) transition-opacity"
+          :class="inside ? 'opacity-100' : 'opacity-0'"
+          :style="{ left: `${relX}px`, top: `${relY}px` }"
+        />
+        <div
+          v-if="inside"
+          class="pointer-events-none absolute bottom-2 right-2 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 font-mono text-xs tabular-nums text-(--fg-muted)"
+        >
+          {{ Math.round(relX) }}, {{ Math.round(relY) }}
+        </div>
+        <span
+          v-else
+          class="absolute inset-0 flex items-center justify-center text-sm text-(--fg-subtle)"
+        >
+          Hover to track relative position
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useMouse/index.test.ts b/vue/toolkit/src/composables/sensors/useMouse/index.test.ts
new file mode 100644
index 0000000..8b2e2dd
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useMouse/index.test.ts
@@ -0,0 +1,287 @@
+import { describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, shallowRef } from 'vue';
+import { useMouse } from '.';
+
+function dispatchMouseMove(target: EventTarget, coords: Partial<Record<'pageX' | 'pageY' | 'clientX' | 'clientY' | 'screenX' | 'screenY' | 'movementX' | 'movementY', number>>) {
+  const event = new MouseEvent('mousemove');
+  for (const [key, value] of Object.entries(coords))
+    Object.defineProperty(event, key, { value, configurable: true });
+  target.dispatchEvent(event);
+  return event;
+}
+
+describe(useMouse, () => {
+  it('uses the initial value', () => {
+    const scope = effectScope();
+    let mouse: ReturnType<typeof useMouse>;
+    scope.run(() => {
+      mouse = useMouse({ initialValue: { x: 5, y: 10 } });
+    });
+    expect(mouse!.x.value).toBe(5);
+    expect(mouse!.y.value).toBe(10);
+    scope.stop();
+  });
+
+  it('tracks mousemove with page coordinates', async () => {
+    const scope = effectScope();
+    let mouse: ReturnType<typeof useMouse>;
+    scope.run(() => {
+      mouse = useMouse();
+    });
+
+    dispatchMouseMove(globalThis, { pageX: 100, pageY: 200 });
+    await nextTick();
+
+    expect(mouse!.x.value).toBe(100);
+    expect(mouse!.y.value).toBe(200);
+    expect(mouse!.sourceType.value).toBe('mouse');
+    scope.stop();
+  });
+
+  it('supports client coordinate type', async () => {
+    const scope = effectScope();
+    let mouse: ReturnType<typeof useMouse>;
+    scope.run(() => {
+      mouse = useMouse({ type: 'client' });
+    });
+
+    const event = new MouseEvent('mousemove', { clientX: 7, clientY: 9 });
+    globalThis.dispatchEvent(event);
+    await nextTick();
+
+    expect(mouse!.x.value).toBe(7);
+    expect(mouse!.y.value).toBe(9);
+    scope.stop();
+  });
+
+  it('supports screen coordinate type', async () => {
+    const scope = effectScope();
+    let mouse: ReturnType<typeof useMouse>;
+    scope.run(() => {
+      mouse = useMouse({ type: 'screen' });
+    });
+
+    const event = new MouseEvent('mousemove', { screenX: 11, screenY: 22 });
+    globalThis.dispatchEvent(event);
+    await nextTick();
+
+    expect(mouse!.x.value).toBe(11);
+    expect(mouse!.y.value).toBe(22);
+    scope.stop();
+  });
+
+  it('supports a custom extractor function', async () => {
+    const scope = effectScope();
+    let mouse: ReturnType<typeof useMouse>;
+    scope.run(() => {
+      mouse = useMouse({ type: e => [(e as MouseEvent).pageX * 2, (e as MouseEvent).pageY * 2] });
+    });
+
+    dispatchMouseMove(globalThis, { pageX: 3, pageY: 4 });
+    await nextTick();
+
+    expect(mouse!.x.value).toBe(6);
+    expect(mouse!.y.value).toBe(8);
+    scope.stop();
+  });
+
+  it('does not update when the extractor returns null', async () => {
+    const scope = effectScope();
+    let mouse: ReturnType<typeof useMouse>;
+    // a custom extractor that opts out of updating
+    scope.run(() => {
+      mouse = useMouse({ type: () => null, initialValue: { x: 1, y: 2 } });
+    });
+
+    dispatchMouseMove(globalThis, { pageX: 99, pageY: 99 });
+    await nextTick();
+
+    expect(mouse!.x.value).toBe(1);
+    expect(mouse!.y.value).toBe(2);
+    expect(mouse!.sourceType.value).toBe(null);
+    scope.stop();
+  });
+
+  it('tracks touch events', async () => {
+    const scope = effectScope();
+    let mouse: ReturnType<typeof useMouse>;
+    scope.run(() => {
+      mouse = useMouse();
+    });
+
+    const touch = { clientX: 0, clientY: 0, pageX: 50, pageY: 60 } as Touch;
+    const event = new Event('touchstart') as TouchEvent;
+    Object.defineProperty(event, 'touches', { value: [touch], configurable: true });
+    globalThis.dispatchEvent(event);
+    await nextTick();
+
+    expect(mouse!.x.value).toBe(50);
+    expect(mouse!.y.value).toBe(60);
+    expect(mouse!.sourceType.value).toBe('touch');
+    scope.stop();
+  });
+
+  it('ignores touch events when touch is disabled', async () => {
+    const scope = effectScope();
+    let mouse: ReturnType<typeof useMouse>;
+    scope.run(() => {
+      mouse = useMouse({ touch: false, initialValue: { x: 1, y: 1 } });
+    });
+
+    const touch = { pageX: 50, pageY: 60 } as Touch;
+    const event = new Event('touchstart') as TouchEvent;
+    Object.defineProperty(event, 'touches', { value: [touch], configurable: true });
+    globalThis.dispatchEvent(event);
+    await nextTick();
+
+    expect(mouse!.x.value).toBe(1);
+    expect(mouse!.y.value).toBe(1);
+    scope.stop();
+  });
+
+  it('resets on touchend when resetOnTouchEnds is set', async () => {
+    const scope = effectScope();
+    let mouse: ReturnType<typeof useMouse>;
+    scope.run(() => {
+      mouse = useMouse({ resetOnTouchEnds: true, initialValue: { x: 9, y: 9 } });
+    });
+
+    const touch = { pageX: 50, pageY: 60 } as Touch;
+    const start = new Event('touchstart') as TouchEvent;
+    Object.defineProperty(start, 'touches', { value: [touch], configurable: true });
+    globalThis.dispatchEvent(start);
+    await nextTick();
+    expect(mouse!.x.value).toBe(50);
+
+    globalThis.dispatchEvent(new Event('touchend'));
+    await nextTick();
+    expect(mouse!.x.value).toBe(9);
+    expect(mouse!.y.value).toBe(9);
+    scope.stop();
+  });
+
+  it('updates page coordinates on scroll without pointer movement', async () => {
+    const scope = effectScope();
+    let mouse: ReturnType<typeof useMouse>;
+    scope.run(() => {
+      mouse = useMouse({ type: 'page' });
+    });
+
+    // record a mouse position while scrollX/scrollY are 0
+    (globalThis as any).scrollX = 0;
+    (globalThis as any).scrollY = 0;
+    dispatchMouseMove(globalThis, { pageX: 100, pageY: 100 });
+    await nextTick();
+    expect(mouse!.x.value).toBe(100);
+
+    // scroll the page; page coordinates should shift by the scroll delta
+    (globalThis as any).scrollX = 30;
+    (globalThis as any).scrollY = 40;
+    globalThis.dispatchEvent(new Event('scroll'));
+    await nextTick();
+
+    expect(mouse!.x.value).toBe(130);
+    expect(mouse!.y.value).toBe(140);
+
+    (globalThis as any).scrollX = 0;
+    (globalThis as any).scrollY = 0;
+    scope.stop();
+  });
+
+  it('does not register a scroll listener for non-page types', async () => {
+    const addSpy = vi.spyOn(globalThis, 'addEventListener');
+    const scope = effectScope();
+    scope.run(() => {
+      useMouse({ type: 'client' });
+    });
+
+    const scrollCalls = addSpy.mock.calls.filter(([name]) => name === 'scroll');
+    expect(scrollCalls).toHaveLength(0);
+
+    addSpy.mockRestore();
+    scope.stop();
+  });
+
+  it('attaches passive listeners', () => {
+    const addSpy = vi.spyOn(globalThis, 'addEventListener');
+    const scope = effectScope();
+    scope.run(() => {
+      useMouse();
+    });
+
+    const moveCall = addSpy.mock.calls.find(([name]) => name === 'mousemove');
+    expect(moveCall).toBeDefined();
+    expect((moveCall![2] as AddEventListenerOptions).passive).toBeTruthy();
+
+    addSpy.mockRestore();
+    scope.stop();
+  });
+
+  it('listens on a custom element target', async () => {
+    const el = document.createElement('div');
+    const elRef = shallowRef(el);
+    const addSpy = vi.spyOn(el, 'addEventListener');
+
+    const scope = effectScope();
+    let mouse: ReturnType<typeof useMouse>;
+    scope.run(() => {
+      mouse = useMouse({ target: elRef, type: 'client' });
+    });
+    await nextTick();
+
+    expect(addSpy.mock.calls.some(([name]) => name === 'mousemove')).toBeTruthy();
+
+    const event = new MouseEvent('mousemove', { clientX: 5, clientY: 6 });
+    el.dispatchEvent(event);
+    await nextTick();
+
+    expect(mouse!.x.value).toBe(5);
+    expect(mouse!.y.value).toBe(6);
+
+    addSpy.mockRestore();
+    scope.stop();
+  });
+
+  it('does nothing when window is unavailable (SSR)', () => {
+    const scope = effectScope();
+    let mouse: ReturnType<typeof useMouse>;
+    scope.run(() => {
+      mouse = useMouse({ window: undefined, target: undefined });
+    });
+    expect(mouse!.x.value).toBe(0);
+    expect(mouse!.y.value).toBe(0);
+    expect(mouse!.sourceType.value).toBe(null);
+    scope.stop();
+  });
+
+  it('applies an event filter (throttle drops intermediate moves)', async () => {
+    vi.useFakeTimers();
+    const filtered = vi.fn();
+    // simple leading-only filter: only the first invoke passes immediately
+    let used = false;
+    const onceFilter = (invoke: () => void) => {
+      if (!used) {
+        used = true;
+        invoke();
+      }
+    };
+
+    const scope = effectScope();
+    let mouse: ReturnType<typeof useMouse>;
+    scope.run(() => {
+      mouse = useMouse({ eventFilter: onceFilter });
+    });
+
+    dispatchMouseMove(globalThis, { pageX: 10, pageY: 10 });
+    dispatchMouseMove(globalThis, { pageX: 20, pageY: 20 });
+    await nextTick();
+
+    // only the first move was let through
+    expect(mouse!.x.value).toBe(10);
+    expect(mouse!.y.value).toBe(10);
+
+    filtered();
+    scope.stop();
+    vi.useRealTimers();
+  });
+});
diff --git a/vue/toolkit/src/composables/sensors/useMouse/index.ts b/vue/toolkit/src/composables/sensors/useMouse/index.ts
new file mode 100644
index 0000000..72fb0cc
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useMouse/index.ts
@@ -0,0 +1,204 @@
+import { shallowRef } from 'vue';
+import type { Ref } from 'vue';
+import { isFunction } from '@robonen/stdlib';
+import { defaultWindow } from '@/types';
+import type { ConfigurableWindow } from '@/types';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import { unrefElement } from '@/composables/component/unrefElement';
+import type { MaybeComputedElementRef } from '@/composables/component/unrefElement';
+import { bypassFilter, createFilterWrapper } from '@/utils/filters';
+import type { ConfigurableEventFilter } from '@/utils/filters';
+
+export type UseMouseCoordType = 'page' | 'client' | 'screen' | 'movement';
+export type UseMouseSourceType = 'mouse' | 'touch' | null;
+
+/**
+ * Extracts an `[x, y]` pair from a mouse or touch point, or `null` to skip.
+ */
+export type UseMouseEventExtractor = (event: MouseEvent | Touch) => [x: number, y: number] | null | undefined;
+
+export interface UseMouseOptions extends ConfigurableWindow, ConfigurableEventFilter {
+  /**
+   * Which coordinate pair to read from the event, or a custom extractor function
+   *
+   * @default 'page'
+   */
+  type?: UseMouseCoordType | UseMouseEventExtractor;
+
+  /**
+   * Target to attach the listeners to. Accepts a window, document, element ref,
+   * getter, or component instance.
+   *
+   * @default window
+   */
+  target?: MaybeComputedElementRef | Window | Document;
+
+  /**
+   * Listen to touch events
+   *
+   * @default true
+   */
+  touch?: boolean;
+
+  /**
+   * Track window scroll so that `page` coordinates stay accurate while the page
+   * scrolls without the pointer moving. Only applies when `type === 'page'`.
+   *
+   * @default true
+   */
+  scroll?: boolean;
+
+  /**
+   * Reset coordinates to `initialValue` on `touchend`
+   *
+   * @default false
+   */
+  resetOnTouchEnds?: boolean;
+
+  /**
+   * Initial coordinates
+   *
+   * @default { x: 0, y: 0 }
+   */
+  initialValue?: { x: number; y: number };
+}
+
+export interface UseMouseReturn {
+  x: Ref<number>;
+  y: Ref<number>;
+  sourceType: Ref<UseMouseSourceType>;
+}
+
+const builtinExtractors: Record<UseMouseCoordType, UseMouseEventExtractor> = {
+  page: e => [(e as MouseEvent).pageX, (e as MouseEvent).pageY],
+  client: e => [e.clientX, e.clientY],
+  screen: e => [e.screenX, e.screenY],
+  movement: e => ('movementX' in e ? [e.movementX, e.movementY] : null),
+};
+
+/**
+ * @name useMouse
+ * @category Sensors
+ * @description Reactive mouse (and optionally touch) position with optional
+ * custom target, scroll tracking, custom extractors, and event filtering.
+ *
+ * @param {UseMouseOptions} [options={}] Options
+ * @returns {UseMouseReturn} Reactive `x`, `y`, and `sourceType`
+ *
+ * @example
+ * const { x, y, sourceType } = useMouse();
+ *
+ * @example
+ * // Track relative to an element, throttled
+ * const { x, y } = useMouse({ target: el, eventFilter: throttleFilter(50) });
+ *
+ * @since 0.0.15
+ */
+export function useMouse(options: UseMouseOptions = {}): UseMouseReturn {
+  const {
+    type = 'page',
+    touch = true,
+    scroll = true,
+    resetOnTouchEnds = false,
+    initialValue = { x: 0, y: 0 },
+    window = defaultWindow,
+    target = window,
+    eventFilter,
+  } = options;
+
+  let prevMouseEvent: MouseEvent | null = null;
+  let prevScrollX = 0;
+  let prevScrollY = 0;
+
+  const x = shallowRef(initialValue.x);
+  const y = shallowRef(initialValue.y);
+  const sourceType = shallowRef<UseMouseSourceType>(null);
+
+  const isExtractorFn = isFunction(type);
+  const extractor: UseMouseEventExtractor = isExtractorFn ? type : builtinExtractors[type];
+
+  const mouseHandler = (event: MouseEvent) => {
+    const result = extractor(event);
+    prevMouseEvent = event;
+
+    if (result) {
+      [x.value, y.value] = result;
+      sourceType.value = 'mouse';
+    }
+
+    if (window) {
+      prevScrollX = window.scrollX;
+      prevScrollY = window.scrollY;
+    }
+  };
+
+  const touchHandler = (event: TouchEvent) => {
+    if (event.touches.length) {
+      const result = extractor(event.touches[0]!);
+
+      if (result) {
+        [x.value, y.value] = result;
+        sourceType.value = 'touch';
+      }
+    }
+  };
+
+  // Keep page coordinates correct when scrolling without moving the pointer.
+  const scrollHandler = () => {
+    if (!prevMouseEvent || !window)
+      return;
+
+    const result = extractor(prevMouseEvent);
+
+    if (result) {
+      x.value = result[0] + window.scrollX - prevScrollX;
+      y.value = result[1] + window.scrollY - prevScrollY;
+    }
+  };
+
+  const reset = () => {
+    x.value = initialValue.x;
+    y.value = initialValue.y;
+  };
+
+  const filter = eventFilter ?? bypassFilter;
+  const mouseHandlerWrapper = createFilterWrapper(filter, mouseHandler);
+  const touchHandlerWrapper = createFilterWrapper(filter, touchHandler);
+  const scrollHandlerWrapper = createFilterWrapper(filter, scrollHandler);
+
+  const trackTouch = touch && !(isExtractorFn ? false : type === 'movement');
+  const trackScroll = scroll && !!window && (isExtractorFn ? true : type === 'page');
+
+  // A raw window/document/EventTarget is used directly (fast, non-reactive path
+  // in useEventListener). Refs/getters/element instances are resolved lazily via
+  // a getter so the listeners re-bind when the underlying element changes.
+  const listenTarget = isTarget(target)
+    ? target
+    : (): EventTarget | null | undefined => unrefElement(target as MaybeComputedElementRef) as EventTarget | null | undefined;
+
+  if (target) {
+    const listenerOptions = { passive: true };
+
+    useEventListener(listenTarget, ['mousemove', 'dragover'], mouseHandlerWrapper as unknown as (e: Event) => void, listenerOptions);
+
+    if (trackTouch) {
+      useEventListener(listenTarget, ['touchstart', 'touchmove'], touchHandlerWrapper as unknown as (e: Event) => void, listenerOptions);
+
+      if (resetOnTouchEnds)
+        useEventListener(listenTarget, 'touchend', reset, listenerOptions);
+    }
+
+    if (trackScroll)
+      useEventListener(window, 'scroll', scrollHandlerWrapper as (e: Event) => void, listenerOptions);
+  }
+
+  return { x, y, sourceType };
+}
+
+/**
+ * `true` for an object that is itself an event target (window/document/element)
+ * and should be attached to directly, rather than unwrapped from a ref/getter.
+ */
+function isTarget(value: unknown): value is EventTarget {
+  return typeof value === 'object' && value !== null && 'addEventListener' in value;
+}
diff --git a/vue/toolkit/src/composables/sensors/useMouseInElement/demo.vue b/vue/toolkit/src/composables/sensors/useMouseInElement/demo.vue
new file mode 100644
index 0000000..772823e
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useMouseInElement/demo.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { computed, useTemplateRef } from 'vue';
+import { useMouseInElement } from './index';
+
+const area = useTemplateRef<HTMLElement>('area');
+
+const {
+  elementX,
+  elementY,
+  elementWidth,
+  elementHeight,
+  isOutside,
+} = useMouseInElement(area);
+
+// Clamp to the element so the readout/spotlight stay sane at the edges.
+const clampedX = computed(() => Math.max(0, Math.min(elementX.value, elementWidth.value)));
+const clampedY = computed(() => Math.max(0, Math.min(elementY.value, elementHeight.value)));
+
+const percentX = computed(() => elementWidth.value ? Math.round((clampedX.value / elementWidth.value) * 100) : 0);
+const percentY = computed(() => elementHeight.value ? Math.round((clampedY.value / elementHeight.value) * 100) : 0);
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      ref="area"
+      class="relative h-44 w-full overflow-hidden rounded-xl border border-(--border) bg-(--bg-inset) transition-colors"
+      :class="isOutside ? 'border-(--border)' : 'border-(--accent)'"
+    >
+      <!-- Spotlight that follows the cursor -->
+      <div
+        class="pointer-events-none absolute size-32 -translate-x-1/2 -translate-y-1/2 rounded-full bg-(--accent)/15 blur-xl transition-opacity duration-200"
+        :class="isOutside ? 'opacity-0' : 'opacity-100'"
+        :style="{ left: `${clampedX}px`, top: `${clampedY}px` }"
+      />
+
+      <!-- Crosshair dot -->
+      <div
+        class="pointer-events-none absolute size-3 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-(--accent-fg) bg-(--accent) transition-opacity duration-150"
+        :class="isOutside ? 'opacity-0' : 'opacity-100'"
+        :style="{ left: `${clampedX}px`, top: `${clampedY}px` }"
+      />
+
+      <span
+        class="pointer-events-none absolute inset-0 flex items-center justify-center text-sm font-medium text-(--fg-subtle) transition-opacity"
+        :class="isOutside ? 'opacity-100' : 'opacity-0'"
+      >
+        Move your cursor here
+      </span>
+    </div>
+
+    <div class="grid grid-cols-2 gap-2">
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">elementX</p>
+        <p class="mt-1 font-mono text-lg font-bold tabular-nums text-(--fg)">{{ Math.round(clampedX) }}<span class="text-sm font-normal text-(--fg-subtle)">px</span></p>
+        <p class="mt-0.5 text-xs text-(--fg-muted) tabular-nums">{{ percentX }}%</p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">elementY</p>
+        <p class="mt-1 font-mono text-lg font-bold tabular-nums text-(--fg)">{{ Math.round(clampedY) }}<span class="text-sm font-normal text-(--fg-subtle)">px</span></p>
+        <p class="mt-0.5 text-xs text-(--fg-muted) tabular-nums">{{ percentY }}%</p>
+      </div>
+    </div>
+
+    <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2.5">
+      <span class="text-sm text-(--fg-muted)">Cursor</span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium transition"
+        :class="isOutside
+          ? 'border border-(--border) bg-(--bg-inset) text-(--fg-muted)'
+          : 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'"
+      >
+        <span class="size-1.5 rounded-full" :class="isOutside ? 'bg-(--fg-subtle)' : 'bg-emerald-500'" />
+        {{ isOutside ? 'Outside' : 'Inside' }}
+      </span>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Coordinates are relative to the box's top-left corner &mdash; observed via <code class="font-mono">useElementBounding</code>, so they stay correct as it moves or resizes.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useMouseInElement/index.test.ts b/vue/toolkit/src/composables/sensors/useMouseInElement/index.test.ts
new file mode 100644
index 0000000..434330b
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useMouseInElement/index.test.ts
@@ -0,0 +1,191 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, ref } from 'vue';
+import { useMouseInElement } from '.';
+
+class StubObserver {
+  observe = vi.fn();
+  disconnect = vi.fn();
+  unobserve = vi.fn();
+  takeRecords = vi.fn(() => []);
+}
+
+function makeElement(rect: Partial<DOMRect>): HTMLElement {
+  const el = document.createElement('div');
+  el.getBoundingClientRect = () => ({
+    width: 0, height: 0, top: 0, left: 0, right: 0, bottom: 0, x: 0, y: 0,
+    ...rect,
+  } as DOMRect);
+  return el;
+}
+
+// jsdom computes `pageX`/`pageY` from `clientX + scrollX` and ignores any
+// `pageX` passed to the constructor, so tests dispatch client coordinates and
+// rely on that derivation for `type: 'page'`.
+function dispatchMouse(type: string, init: MouseEventInit) {
+  globalThis.dispatchEvent(new MouseEvent(type, init));
+}
+
+describe(useMouseInElement, () => {
+  beforeEach(() => {
+    vi.stubGlobal('ResizeObserver', StubObserver);
+    vi.stubGlobal('MutationObserver', StubObserver);
+    (globalThis as any).scrollX = 0;
+    (globalThis as any).scrollY = 0;
+  });
+  afterEach(() => vi.unstubAllGlobals());
+
+  it('computes element-relative coordinates when the cursor is inside', () => {
+    const el = makeElement({ left: 100, top: 50, width: 200, height: 100, right: 300, bottom: 150 });
+
+    const scope = effectScope();
+    let result: ReturnType<typeof useMouseInElement>;
+    scope.run(() => {
+      result = useMouseInElement(ref(el));
+    });
+
+    dispatchMouse('mousemove', { clientX: 150, clientY: 80 });
+
+    expect(result!.elementPositionX.value).toBe(100);
+    expect(result!.elementPositionY.value).toBe(50);
+    expect(result!.elementWidth.value).toBe(200);
+    expect(result!.elementHeight.value).toBe(100);
+    expect(result!.elementX.value).toBe(50);
+    expect(result!.elementY.value).toBe(30);
+    expect(result!.isOutside.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('flags isOutside when the cursor is beyond the element bounds', () => {
+    const el = makeElement({ left: 100, top: 50, width: 200, height: 100 });
+
+    const scope = effectScope();
+    let result: ReturnType<typeof useMouseInElement>;
+    scope.run(() => {
+      result = useMouseInElement(ref(el));
+    });
+
+    dispatchMouse('mousemove', { clientX: 10, clientY: 10 });
+
+    expect(result!.isOutside.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('freezes element coordinates outside the element when handleOutside is false', () => {
+    const el = makeElement({ left: 100, top: 50, width: 200, height: 100 });
+
+    const scope = effectScope();
+    let result: ReturnType<typeof useMouseInElement>;
+    scope.run(() => {
+      result = useMouseInElement(ref(el), { handleOutside: false });
+    });
+
+    // Move inside first
+    dispatchMouse('mousemove', { clientX: 150, clientY: 80 });
+    expect(result!.elementX.value).toBe(50);
+    expect(result!.elementY.value).toBe(30);
+
+    // Now move outside — coordinates should not update
+    dispatchMouse('mousemove', { clientX: 5, clientY: 5 });
+    expect(result!.isOutside.value).toBeTruthy();
+    expect(result!.elementX.value).toBe(50);
+    expect(result!.elementY.value).toBe(30);
+    scope.stop();
+  });
+
+  it('accounts for page scroll offset with type "page"', () => {
+    const el = makeElement({ left: 100, top: 50, width: 200, height: 100 });
+    (globalThis as any).scrollX = 30;
+    (globalThis as any).scrollY = 20;
+
+    const scope = effectScope();
+    let result: ReturnType<typeof useMouseInElement>;
+    scope.run(() => {
+      result = useMouseInElement(ref(el));
+    });
+
+    // jsdom reports pageX === clientX (it does not fold scroll into pageX), so
+    // here pageX = 200, pageY = 120. The element position folds in scroll:
+    // left + scrollX = 130, top + scrollY = 70.
+    dispatchMouse('mousemove', { clientX: 200, clientY: 120 });
+
+    expect(result!.elementPositionX.value).toBe(130);
+    expect(result!.elementPositionY.value).toBe(70);
+    expect(result!.elementX.value).toBe(70);
+    expect(result!.elementY.value).toBe(50);
+    scope.stop();
+  });
+
+  it('ignores scroll offset with type "client"', () => {
+    const el = makeElement({ left: 100, top: 50, width: 200, height: 100 });
+    (globalThis as any).scrollX = 30;
+    (globalThis as any).scrollY = 20;
+
+    const scope = effectScope();
+    let result: ReturnType<typeof useMouseInElement>;
+    scope.run(() => {
+      result = useMouseInElement(ref(el), { type: 'client' });
+    });
+
+    dispatchMouse('mousemove', { clientX: 150, clientY: 80 });
+
+    expect(result!.elementPositionX.value).toBe(100);
+    expect(result!.elementPositionY.value).toBe(50);
+    expect(result!.elementX.value).toBe(50);
+    expect(result!.elementY.value).toBe(30);
+    scope.stop();
+  });
+
+  it('sets isOutside on document mouseleave', () => {
+    const el = makeElement({ left: 0, top: 0, width: 200, height: 100 });
+
+    const scope = effectScope();
+    let result: ReturnType<typeof useMouseInElement>;
+    scope.run(() => {
+      result = useMouseInElement(ref(el));
+    });
+
+    dispatchMouse('mousemove', { clientX: 50, clientY: 50 });
+    expect(result!.isOutside.value).toBeFalsy();
+
+    document.dispatchEvent(new MouseEvent('mouseleave'));
+    expect(result!.isOutside.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('stop() halts further updates', () => {
+    const el = makeElement({ left: 100, top: 50, width: 200, height: 100 });
+
+    const scope = effectScope();
+    let result: ReturnType<typeof useMouseInElement>;
+    scope.run(() => {
+      result = useMouseInElement(ref(el));
+    });
+
+    dispatchMouse('mousemove', { clientX: 150, clientY: 80 });
+    expect(result!.elementX.value).toBe(50);
+
+    result!.stop();
+
+    dispatchMouse('mousemove', { clientX: 250, clientY: 130 });
+    // x still updates (useMouse listener), but elementX no longer recomputes
+    expect(result!.elementX.value).toBe(50);
+    scope.stop();
+  });
+
+  it('does not throw and stays outside when window is unavailable (SSR)', () => {
+    const el = makeElement({ left: 100, top: 50, width: 200, height: 100 });
+
+    const scope = effectScope();
+    let result: ReturnType<typeof useMouseInElement>;
+    expect(() => {
+      scope.run(() => {
+        result = useMouseInElement(ref(el), { window: undefined });
+      });
+    }).not.toThrow();
+
+    expect(result!.isOutside.value).toBeTruthy();
+    expect(result!.x.value).toBe(0);
+    expect(result!.y.value).toBe(0);
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/sensors/useMouseInElement/index.ts b/vue/toolkit/src/composables/sensors/useMouseInElement/index.ts
new file mode 100644
index 0000000..abb8c64
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useMouseInElement/index.ts
@@ -0,0 +1,222 @@
+import { shallowRef, watch } from 'vue';
+import type { ShallowRef } from 'vue';
+import { defaultWindow } from '@/types';
+import { unrefElement } from '@/composables/component/unrefElement';
+import type { MaybeComputedElementRef } from '@/composables/component/unrefElement';
+import { useMouse } from '@/composables/sensors/useMouse';
+import type { UseMouseOptions, UseMouseReturn } from '@/composables/sensors/useMouse';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import { useElementBounding } from '@/composables/elements/useElementBounding';
+import { tryOnMounted } from '@/composables/lifecycle/tryOnMounted';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+
+export interface UseMouseInElementOptions extends UseMouseOptions {
+  /**
+   * Keep tracking the mouse position relative to the element even while the
+   * cursor is outside the element's bounds. When `false`, `elementX`/`elementY`
+   * freeze at their last in-bounds value once the cursor leaves.
+   *
+   * @default true
+   */
+  handleOutside?: boolean;
+
+  /**
+   * Recalculate the element's position on window scroll.
+   *
+   * @default true
+   */
+  windowScroll?: boolean;
+
+  /**
+   * Recalculate the element's position on window resize.
+   *
+   * @default true
+   */
+  windowResize?: boolean;
+}
+
+export interface UseMouseInElementReturn extends UseMouseReturn {
+  /**
+   * Mouse X relative to the element's top-left corner
+   */
+  elementX: ShallowRef<number>;
+
+  /**
+   * Mouse Y relative to the element's top-left corner
+   */
+  elementY: ShallowRef<number>;
+
+  /**
+   * The element's X position (page coordinates for `type: 'page'`, otherwise
+   * viewport coordinates)
+   */
+  elementPositionX: ShallowRef<number>;
+
+  /**
+   * The element's Y position (page coordinates for `type: 'page'`, otherwise
+   * viewport coordinates)
+   */
+  elementPositionY: ShallowRef<number>;
+
+  /**
+   * The element's width
+   */
+  elementWidth: ShallowRef<number>;
+
+  /**
+   * The element's height
+   */
+  elementHeight: ShallowRef<number>;
+
+  /**
+   * Whether the cursor is currently outside the element's bounds
+   */
+  isOutside: ShallowRef<boolean>;
+
+  /**
+   * Stop all tracking (mouse listeners, element observers, watchers)
+   */
+  stop: () => void;
+}
+
+/**
+ * @name useMouseInElement
+ * @category Sensors
+ * @description Reactive mouse position relative to an element. Exposes the
+ * cursor position, the cursor position relative to the element's top-left
+ * corner, the element's position and size, and whether the cursor is outside
+ * the element. Element geometry is observed via `useElementBounding`
+ * (`ResizeObserver` + `MutationObserver` + window scroll/resize), so the
+ * relative coordinates stay correct as the element moves or resizes — without
+ * re-measuring the element on every pointer move.
+ *
+ * @param {MaybeComputedElementRef} [target] Element to track against. Defaults to `document.body`.
+ * @param {UseMouseInElementOptions} [options={}] Options
+ * @returns {UseMouseInElementReturn} Reactive position/size refs and a `stop` function
+ *
+ * @example
+ * const el = useTemplateRef<HTMLElement>('el');
+ * const { elementX, elementY, isOutside } = useMouseInElement(el);
+ *
+ * @example
+ * // Throttle pointer reads and stop tracking outside the element
+ * const { elementX, elementY } = useMouseInElement(el, {
+ *   handleOutside: false,
+ *   eventFilter: throttleFilter(50),
+ * });
+ *
+ * @since 0.0.15
+ */
+export function useMouseInElement(
+  target?: MaybeComputedElementRef,
+  options: UseMouseInElementOptions = {},
+): UseMouseInElementReturn {
+  const {
+    handleOutside = true,
+    windowScroll = true,
+    windowResize = true,
+    window = defaultWindow,
+  } = options;
+
+  const type = options.type ?? 'page';
+
+  const { x, y, sourceType } = useMouse(options);
+
+  // Resolve the tracked element lazily through a getter so the bounding observer
+  // re-binds when the underlying ref/getter changes, and falls back to the body.
+  const targetRef = (): Element | null | undefined =>
+    (unrefElement(target as MaybeComputedElementRef) ?? window?.document?.body) as Element | null | undefined;
+
+  // Delegate all element geometry tracking (resize/mutation/scroll/resize) to
+  // useElementBounding. It batches reads and only re-measures when the element
+  // actually changes — far cheaper than re-running getBoundingClientRect on
+  // every mousemove like a naive implementation would.
+  const {
+    left,
+    top,
+    width: elementWidth,
+    height: elementHeight,
+    update: updateBounding,
+  } = useElementBounding(targetRef, { windowScroll, windowResize, window });
+
+  const elementX = shallowRef(0);
+  const elementY = shallowRef(0);
+  const elementPositionX = shallowRef(0);
+  const elementPositionY = shallowRef(0);
+  const isOutside = shallowRef(true);
+
+  // `useElementBounding` reports viewport-relative coordinates. For `page`
+  // coordinates (the default mouse type) we offset by the scroll position so the
+  // element's position lives in the same coordinate space as the cursor.
+  const usePageCoords = type === 'page';
+
+  function update() {
+    const scrollX = usePageCoords && window ? window.scrollX : 0;
+    const scrollY = usePageCoords && window ? window.scrollY : 0;
+
+    const posX = left.value + scrollX;
+    const posY = top.value + scrollY;
+    const w = elementWidth.value;
+    const h = elementHeight.value;
+
+    elementPositionX.value = posX;
+    elementPositionY.value = posY;
+
+    const elX = x.value - posX;
+    const elY = y.value - posY;
+
+    isOutside.value = w === 0 || h === 0
+      || elX < 0 || elY < 0
+      || elX > w || elY > h;
+
+    if (handleOutside || !isOutside.value) {
+      elementX.value = elX;
+      elementY.value = elY;
+    }
+  }
+
+  const stopWatch = watch(
+    [x, y, left, top, elementWidth, elementHeight],
+    update,
+    { flush: 'sync' },
+  );
+
+  let stopLeave: (() => void) | undefined;
+
+  if (window) {
+    // A pointer that exits the window entirely never fires a final mousemove
+    // inside the element, so flag it outside explicitly.
+    stopLeave = useEventListener(
+      window.document,
+      'mouseleave',
+      () => { isOutside.value = true; },
+      { passive: true },
+    );
+  }
+
+  function stop(): void {
+    stopWatch();
+    stopLeave?.();
+  }
+
+  tryOnMounted(() => {
+    updateBounding();
+    update();
+  });
+
+  tryOnScopeDispose(stop);
+
+  return {
+    x,
+    y,
+    sourceType,
+    elementX,
+    elementY,
+    elementPositionX,
+    elementPositionY,
+    elementWidth,
+    elementHeight,
+    isOutside,
+    stop,
+  };
+}
diff --git a/vue/toolkit/src/composables/sensors/useMousePressed/demo.vue b/vue/toolkit/src/composables/sensors/useMousePressed/demo.vue
new file mode 100644
index 0000000..2fd2ec5
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useMousePressed/demo.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue';
+import { useMousePressed } from './index';
+
+const pad = useTemplateRef<HTMLElement>('pad');
+
+const pressCount = ref(0);
+
+// Only track presses that begin on the pad, with press/release callbacks.
+const { pressed, sourceType } = useMousePressed({
+  target: pad,
+  onPressed: () => { pressCount.value += 1; },
+});
+
+const sourceLabel = {
+  mouse: 'Mouse',
+  touch: 'Touch',
+} as const;
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      ref="pad"
+      class="flex h-40 w-full cursor-pointer select-none items-center justify-center rounded-xl border-2 text-center transition-all duration-150"
+      :class="pressed
+        ? 'scale-[0.98] border-(--accent) bg-(--accent)/10'
+        : 'border-(--border) bg-(--bg-inset) hover:border-(--border-strong)'"
+    >
+      <div class="flex flex-col items-center gap-2">
+        <span
+          class="flex size-12 items-center justify-center rounded-full transition-all duration-150"
+          :class="pressed ? 'scale-110 bg-(--accent) text-(--accent-fg)' : 'bg-(--bg-elevated) text-(--fg-subtle)'"
+        >
+          <span class="size-3 rounded-full bg-current" />
+        </span>
+        <span class="text-sm font-medium" :class="pressed ? 'text-(--accent-text)' : 'text-(--fg-muted)'">
+          {{ pressed ? 'Holding…' : 'Press and hold' }}
+        </span>
+      </div>
+    </div>
+
+    <div class="grid grid-cols-3 gap-2">
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
+        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Pressed</p>
+        <p class="mt-1 text-sm font-semibold" :class="pressed ? 'text-emerald-600 dark:text-emerald-400' : 'text-(--fg)'">
+          {{ pressed ? 'true' : 'false' }}
+        </p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
+        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Source</p>
+        <p class="mt-1 font-mono text-sm font-semibold text-(--fg)">
+          {{ sourceType ? sourceLabel[sourceType] : '—' }}
+        </p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
+        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Presses</p>
+        <p class="mt-1 font-mono text-sm font-bold tabular-nums text-(--fg)">{{ pressCount }}</p>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Tracking is scoped to the pad via <code class="font-mono">target</code>, but release is global &mdash; let go anywhere and <code class="font-mono">pressed</code> flips back.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useMousePressed/index.test.ts b/vue/toolkit/src/composables/sensors/useMousePressed/index.test.ts
new file mode 100644
index 0000000..6076c2e
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useMousePressed/index.test.ts
@@ -0,0 +1,252 @@
+import { describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, shallowRef } from 'vue';
+import { useMousePressed } from '.';
+
+function dispatch(target: EventTarget, type: string): Event {
+  const event = new Event(type);
+  target.dispatchEvent(event);
+  return event;
+}
+
+describe(useMousePressed, () => {
+  it('starts not pressed by default', () => {
+    const scope = effectScope();
+    let res: ReturnType<typeof useMousePressed>;
+    scope.run(() => {
+      res = useMousePressed();
+    });
+    expect(res!.pressed.value).toBeFalsy();
+    expect(res!.sourceType.value).toBe(null);
+    scope.stop();
+  });
+
+  it('honors the initial value', () => {
+    const scope = effectScope();
+    let res: ReturnType<typeof useMousePressed>;
+    scope.run(() => {
+      res = useMousePressed({ initialValue: true });
+    });
+    expect(res!.pressed.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('sets pressed and mouse sourceType on mousedown, clears on mouseup', async () => {
+    const scope = effectScope();
+    let res: ReturnType<typeof useMousePressed>;
+    scope.run(() => {
+      res = useMousePressed();
+    });
+
+    dispatch(globalThis, 'mousedown');
+    await nextTick();
+    expect(res!.pressed.value).toBeTruthy();
+    expect(res!.sourceType.value).toBe('mouse');
+
+    dispatch(globalThis, 'mouseup');
+    await nextTick();
+    expect(res!.pressed.value).toBeFalsy();
+    expect(res!.sourceType.value).toBe(null);
+    scope.stop();
+  });
+
+  it('clears pressed on mouseleave', async () => {
+    const scope = effectScope();
+    let res: ReturnType<typeof useMousePressed>;
+    scope.run(() => {
+      res = useMousePressed();
+    });
+
+    dispatch(globalThis, 'mousedown');
+    await nextTick();
+    expect(res!.pressed.value).toBeTruthy();
+
+    dispatch(globalThis, 'mouseleave');
+    await nextTick();
+    expect(res!.pressed.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('tracks touch presses with touch sourceType', async () => {
+    const scope = effectScope();
+    let res: ReturnType<typeof useMousePressed>;
+    scope.run(() => {
+      res = useMousePressed();
+    });
+
+    dispatch(globalThis, 'touchstart');
+    await nextTick();
+    expect(res!.pressed.value).toBeTruthy();
+    expect(res!.sourceType.value).toBe('touch');
+
+    dispatch(globalThis, 'touchend');
+    await nextTick();
+    expect(res!.pressed.value).toBeFalsy();
+    expect(res!.sourceType.value).toBe(null);
+    scope.stop();
+  });
+
+  it('clears pressed on touchcancel', async () => {
+    const scope = effectScope();
+    let res: ReturnType<typeof useMousePressed>;
+    scope.run(() => {
+      res = useMousePressed();
+    });
+
+    dispatch(globalThis, 'touchstart');
+    await nextTick();
+    expect(res!.pressed.value).toBeTruthy();
+
+    dispatch(globalThis, 'touchcancel');
+    await nextTick();
+    expect(res!.pressed.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('does not register touch listeners when touch is disabled', async () => {
+    const addSpy = vi.spyOn(globalThis, 'addEventListener');
+    const scope = effectScope();
+    let res: ReturnType<typeof useMousePressed>;
+    scope.run(() => {
+      res = useMousePressed({ touch: false });
+    });
+    await nextTick();
+
+    const touchCalls = addSpy.mock.calls.filter(([name]) => String(name).startsWith('touch'));
+    expect(touchCalls).toHaveLength(0);
+
+    dispatch(globalThis, 'touchstart');
+    await nextTick();
+    expect(res!.pressed.value).toBeFalsy();
+
+    addSpy.mockRestore();
+    scope.stop();
+  });
+
+  it('tracks drag presses when drag is enabled', async () => {
+    const scope = effectScope();
+    let res: ReturnType<typeof useMousePressed>;
+    scope.run(() => {
+      res = useMousePressed();
+    });
+
+    dispatch(globalThis, 'dragstart');
+    await nextTick();
+    expect(res!.pressed.value).toBeTruthy();
+    expect(res!.sourceType.value).toBe('mouse');
+
+    dispatch(globalThis, 'dragend');
+    await nextTick();
+    expect(res!.pressed.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('clears pressed on drop', async () => {
+    const scope = effectScope();
+    let res: ReturnType<typeof useMousePressed>;
+    scope.run(() => {
+      res = useMousePressed();
+    });
+
+    dispatch(globalThis, 'dragstart');
+    await nextTick();
+    expect(res!.pressed.value).toBeTruthy();
+
+    dispatch(globalThis, 'drop');
+    await nextTick();
+    expect(res!.pressed.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('does not register drag listeners when drag is disabled', async () => {
+    const addSpy = vi.spyOn(globalThis, 'addEventListener');
+    const scope = effectScope();
+    scope.run(() => {
+      useMousePressed({ drag: false });
+    });
+    await nextTick();
+
+    const dragCalls = addSpy.mock.calls.filter(([name]) => String(name).startsWith('drag') || name === 'drop');
+    expect(dragCalls).toHaveLength(0);
+
+    addSpy.mockRestore();
+    scope.stop();
+  });
+
+  it('invokes onPressed and onReleased callbacks', async () => {
+    const onPressed = vi.fn();
+    const onReleased = vi.fn();
+    const scope = effectScope();
+    scope.run(() => {
+      useMousePressed({ onPressed, onReleased });
+    });
+
+    const down = dispatch(globalThis, 'mousedown');
+    await nextTick();
+    expect(onPressed).toHaveBeenCalledTimes(1);
+    expect(onPressed).toHaveBeenCalledWith(down);
+
+    const up = dispatch(globalThis, 'mouseup');
+    await nextTick();
+    expect(onReleased).toHaveBeenCalledTimes(1);
+    expect(onReleased).toHaveBeenCalledWith(up);
+    scope.stop();
+  });
+
+  it('attaches passive listeners and respects the capture option', async () => {
+    const addSpy = vi.spyOn(globalThis, 'addEventListener');
+    const scope = effectScope();
+    scope.run(() => {
+      useMousePressed({ capture: true });
+    });
+    await nextTick();
+
+    const downCall = addSpy.mock.calls.find(([name]) => name === 'mousedown');
+    expect(downCall).toBeDefined();
+    const opts = downCall![2] as AddEventListenerOptions;
+    expect(opts.passive).toBeTruthy();
+    expect(opts.capture).toBeTruthy();
+
+    addSpy.mockRestore();
+    scope.stop();
+  });
+
+  it('listens for press on a custom element target', async () => {
+    const el = document.createElement('div');
+    const elRef = shallowRef(el);
+    const addSpy = vi.spyOn(el, 'addEventListener');
+
+    const scope = effectScope();
+    let res: ReturnType<typeof useMousePressed>;
+    scope.run(() => {
+      res = useMousePressed({ target: elRef });
+    });
+    await nextTick();
+
+    expect(addSpy.mock.calls.some(([name]) => name === 'mousedown')).toBeTruthy();
+
+    dispatch(el, 'mousedown');
+    await nextTick();
+    expect(res!.pressed.value).toBeTruthy();
+    expect(res!.sourceType.value).toBe('mouse');
+
+    // release still listens on window
+    dispatch(globalThis, 'mouseup');
+    await nextTick();
+    expect(res!.pressed.value).toBeFalsy();
+
+    addSpy.mockRestore();
+    scope.stop();
+  });
+
+  it('does nothing when window is unavailable (SSR)', () => {
+    const scope = effectScope();
+    let res: ReturnType<typeof useMousePressed>;
+    scope.run(() => {
+      res = useMousePressed({ window: undefined, initialValue: true });
+    });
+    // returns refs without attaching listeners
+    expect(res!.pressed.value).toBeTruthy();
+    expect(res!.sourceType.value).toBe(null);
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/sensors/useMousePressed/index.ts b/vue/toolkit/src/composables/sensors/useMousePressed/index.ts
new file mode 100644
index 0000000..f6b2d11
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useMousePressed/index.ts
@@ -0,0 +1,130 @@
+import { computed, shallowRef } from 'vue';
+import type { ComputedRef, ShallowRef } from 'vue';
+import { defaultWindow } from '@/types';
+import type { ConfigurableWindow } from '@/types';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import { unrefElement } from '@/composables/component/unrefElement';
+import type { MaybeComputedElementRef } from '@/composables/component/unrefElement';
+import type { UseMouseSourceType } from '@/composables/sensors/useMouse';
+
+export type UseMousePressedEvent = MouseEvent | TouchEvent | DragEvent;
+
+export interface UseMousePressedOptions extends ConfigurableWindow {
+  /**
+   * Listen to `touchstart`, `touchend`, and `touchcancel` events
+   *
+   * @default true
+   */
+  touch?: boolean;
+
+  /**
+   * Listen to `dragstart`, `drop`, and `dragend` events
+   *
+   * @default true
+   */
+  drag?: boolean;
+
+  /**
+   * Add event listeners with the `capture` option set to `true`
+   * (see [MDN](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#capture))
+   *
+   * @default false
+   */
+  capture?: boolean;
+
+  /**
+   * Initial pressed state
+   *
+   * @default false
+   */
+  initialValue?: boolean;
+
+  /**
+   * Element target to capture the press on. Accepts an element ref, getter,
+   * or component instance. Defaults to `window` when omitted.
+   */
+  target?: MaybeComputedElementRef;
+
+  /**
+   * Callback invoked when a press starts
+   */
+  onPressed?: (event: UseMousePressedEvent) => void;
+
+  /**
+   * Callback invoked when a press is released
+   */
+  onReleased?: (event: UseMousePressedEvent) => void;
+}
+
+export interface UseMousePressedReturn {
+  pressed: ShallowRef<boolean>;
+  sourceType: ShallowRef<UseMouseSourceType>;
+}
+
+/**
+ * @name useMousePressed
+ * @category Sensors
+ * @description Reactive mouse/touch/drag pressed state on a target, with the
+ * input source type and optional press/release callbacks.
+ *
+ * @param {UseMousePressedOptions} [options={}] Options
+ * @returns {UseMousePressedReturn} Reactive `pressed` and `sourceType`
+ *
+ * @example
+ * const { pressed, sourceType } = useMousePressed();
+ *
+ * @example
+ * // Track presses only on a specific element, ignore touch
+ * const { pressed } = useMousePressed({ target: el, touch: false });
+ *
+ * @since 0.0.15
+ */
+export function useMousePressed(options: UseMousePressedOptions = {}): UseMousePressedReturn {
+  const {
+    touch = true,
+    drag = true,
+    capture = false,
+    initialValue = false,
+    window = defaultWindow,
+  } = options;
+
+  const pressed = shallowRef(initialValue);
+  const sourceType = shallowRef<UseMouseSourceType>(null);
+
+  if (!window)
+    return { pressed, sourceType };
+
+  const onPressed = (srcType: UseMouseSourceType) => (event: UseMousePressedEvent): void => {
+    pressed.value = true;
+    sourceType.value = srcType;
+    options.onPressed?.(event);
+  };
+
+  const onReleased = (event: UseMousePressedEvent): void => {
+    pressed.value = false;
+    sourceType.value = null;
+    options.onReleased?.(event);
+  };
+
+  const target: ComputedRef<EventTarget> = computed(() => unrefElement(options.target) ?? window);
+
+  const listenerOptions = { passive: true, capture };
+
+  useEventListener(target, 'mousedown', onPressed('mouse') as (e: Event) => void, listenerOptions);
+  useEventListener(window, 'mouseleave', onReleased as (e: Event) => void, listenerOptions);
+  useEventListener(window, 'mouseup', onReleased as (e: Event) => void, listenerOptions);
+
+  if (drag) {
+    useEventListener(target, 'dragstart', onPressed('mouse') as (e: Event) => void, listenerOptions);
+    useEventListener(window, 'drop', onReleased as (e: Event) => void, listenerOptions);
+    useEventListener(window, 'dragend', onReleased as (e: Event) => void, listenerOptions);
+  }
+
+  if (touch) {
+    useEventListener(target, 'touchstart', onPressed('touch') as (e: Event) => void, listenerOptions);
+    useEventListener(window, 'touchend', onReleased as (e: Event) => void, listenerOptions);
+    useEventListener(window, 'touchcancel', onReleased as (e: Event) => void, listenerOptions);
+  }
+
+  return { pressed, sourceType };
+}
diff --git a/vue/toolkit/src/composables/sensors/useNetwork/demo.vue b/vue/toolkit/src/composables/sensors/useNetwork/demo.vue
new file mode 100644
index 0000000..39523da
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useNetwork/demo.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useNetwork } from './index';
+
+const {
+  isSupported,
+  isOnline,
+  offlineAt,
+  onlineAt,
+  downlink,
+  downlinkMax,
+  effectiveType,
+  rtt,
+  saveData,
+  type,
+} = useNetwork();
+
+const lastTransition = computed(() => {
+  const ts = isOnline.value ? onlineAt.value : offlineAt.value;
+  if (!ts)
+    return '—';
+  return new Date(ts).toLocaleTimeString();
+});
+
+const speedTiers: Record<string, number> = { 'slow-2g': 1, '2g': 2, '3g': 3, '4g': 4 };
+const speedLevel = computed(() => effectiveType.value ? speedTiers[effectiveType.value] ?? 0 : 0);
+
+function fmt(value: number | undefined, unit: string): string {
+  return value === undefined ? '—' : `${value}${unit}`;
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      class="flex items-center justify-between rounded-xl border p-4 transition-colors"
+      :class="isOnline
+        ? 'border-emerald-500/30 bg-emerald-500/10'
+        : 'border-red-500/30 bg-red-500/10'"
+    >
+      <div class="flex items-center gap-3">
+        <span
+          class="flex size-9 items-center justify-center rounded-full"
+          :class="isOnline ? 'bg-emerald-500/20' : 'bg-red-500/20'"
+        >
+          <span
+            class="size-2.5 rounded-full"
+            :class="isOnline ? 'animate-pulse bg-emerald-500' : 'bg-red-500'"
+          />
+        </span>
+        <div>
+          <p class="text-sm font-semibold" :class="isOnline ? 'text-emerald-700 dark:text-emerald-300' : 'text-red-700 dark:text-red-300'">
+            {{ isOnline ? 'Online' : 'Offline' }}
+          </p>
+          <p class="text-xs text-(--fg-muted)">
+            {{ isOnline ? 'since' : 'at' }} {{ lastTransition }}
+          </p>
+        </div>
+      </div>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        {{ type }}
+      </span>
+    </div>
+
+    <div v-if="isSupported" class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="mb-3 flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Effective type</span>
+        <span class="font-mono text-sm font-semibold text-(--accent-text)">{{ effectiveType ?? 'unknown' }}</span>
+      </div>
+      <div class="flex gap-1">
+        <span
+          v-for="tier in 4"
+          :key="tier"
+          class="h-1.5 flex-1 rounded-full transition-colors"
+          :class="tier <= speedLevel ? 'bg-(--accent)' : 'bg-(--bg-inset)'"
+        />
+      </div>
+
+      <dl class="mt-4 grid grid-cols-2 gap-3">
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+          <dt class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Downlink</dt>
+          <dd class="mt-1 font-mono text-sm font-semibold tabular-nums text-(--fg)">{{ fmt(downlink, ' Mbps') }}</dd>
+        </div>
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+          <dt class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">RTT</dt>
+          <dd class="mt-1 font-mono text-sm font-semibold tabular-nums text-(--fg)">{{ fmt(rtt, ' ms') }}</dd>
+        </div>
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+          <dt class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Max downlink</dt>
+          <dd class="mt-1 font-mono text-sm font-semibold tabular-nums text-(--fg)">{{ fmt(downlinkMax, ' Mbps') }}</dd>
+        </div>
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+          <dt class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Save data</dt>
+          <dd class="mt-1 font-mono text-sm font-semibold text-(--fg)">{{ saveData === undefined ? '—' : (saveData ? 'on' : 'off') }}</dd>
+        </div>
+      </dl>
+    </div>
+
+    <div v-else class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-center">
+      <p class="text-sm font-medium text-amber-700 dark:text-amber-400">
+        Network Information API not supported
+      </p>
+      <p class="mt-1 text-xs text-(--fg-muted)">
+        Online status still works; connection details are unavailable in this browser.
+      </p>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Toggle your device's connection (or DevTools network conditions) to watch the state react live.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useNetwork/index.test.ts b/vue/toolkit/src/composables/sensors/useNetwork/index.test.ts
new file mode 100644
index 0000000..b90deb2
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useNetwork/index.test.ts
@@ -0,0 +1,164 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick } from 'vue';
+import { useNetwork } from '.';
+
+afterEach(() => vi.unstubAllGlobals());
+
+describe(useNetwork, () => {
+  it('exposes the full reactive network state shape', () => {
+    const scope = effectScope();
+    let state: ReturnType<typeof useNetwork>;
+    scope.run(() => {
+      state = useNetwork();
+    });
+
+    expect(state!.isOnline.value).toBe(navigator.onLine);
+    expect(state!.type.value).toBe('unknown');
+    // while online on mount, offlineAt stays undefined and onlineAt is stamped
+    expect(state!.offlineAt.value).toBeUndefined();
+    expect(typeof state!.onlineAt.value).toBe('number');
+    expect(state!.downlink.value).toBeUndefined();
+    expect(state!.downlinkMax.value).toBeUndefined();
+    expect(state!.rtt.value).toBeUndefined();
+    expect(state!.effectiveType.value).toBeUndefined();
+    expect(state!.saveData.value).toBeUndefined();
+    scope.stop();
+  });
+
+  it('reflects the initial navigator.onLine from a supplied window', () => {
+    const fakeWindow = {
+      navigator: { onLine: false },
+      addEventListener: () => {},
+      removeEventListener: () => {},
+    } as unknown as Window;
+
+    const scope = effectScope();
+    let state: ReturnType<typeof useNetwork>;
+    scope.run(() => {
+      state = useNetwork({ window: fakeWindow });
+    });
+    expect(state!.isOnline.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('records offlineAt and onlineAt timestamps on transitions', async () => {
+    const scope = effectScope();
+    let state: ReturnType<typeof useNetwork>;
+    scope.run(() => {
+      state = useNetwork();
+    });
+
+    expect(state!.offlineAt.value).toBeUndefined();
+
+    globalThis.dispatchEvent(new Event('offline'));
+    await nextTick();
+    expect(state!.isOnline.value).toBeFalsy();
+    expect(typeof state!.offlineAt.value).toBe('number');
+
+    globalThis.dispatchEvent(new Event('online'));
+    await nextTick();
+    expect(state!.isOnline.value).toBeTruthy();
+    expect(typeof state!.onlineAt.value).toBe('number');
+    scope.stop();
+  });
+
+  it('stays inert and reports online when window is undefined (SSR)', () => {
+    const scope = effectScope();
+    let state: ReturnType<typeof useNetwork>;
+    scope.run(() => {
+      state = useNetwork({ window: undefined });
+    });
+
+    expect(state!.isOnline.value).toBeTruthy();
+    expect(state!.isSupported.value).toBeFalsy();
+    expect(state!.type.value).toBe('unknown');
+    expect(state!.downlink.value).toBeUndefined();
+    scope.stop();
+  });
+
+  it('isSupported is false when Network Information API is unavailable', () => {
+    const fakeWindow = {
+      navigator: { onLine: true },
+      addEventListener: () => {},
+      removeEventListener: () => {},
+    } as unknown as Window;
+
+    const scope = effectScope();
+    let state: ReturnType<typeof useNetwork>;
+    scope.run(() => {
+      state = useNetwork({ window: fakeWindow });
+    });
+    expect(state!.isSupported.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('reads connection info and listens for change events when supported', () => {
+    const listeners: Record<string, Array<(e: Event) => void>> = {};
+    const connection = {
+      downlink: 10,
+      downlinkMax: 100,
+      effectiveType: '4g',
+      rtt: 50,
+      saveData: true,
+      type: 'wifi',
+      addEventListener: (event: string, cb: (e: Event) => void) => {
+        (listeners[event] ??= []).push(cb);
+      },
+      removeEventListener: () => {},
+    };
+
+    const fakeWindow = {
+      navigator: { onLine: true, connection },
+      addEventListener: () => {},
+      removeEventListener: () => {},
+    } as unknown as Window;
+
+    const scope = effectScope();
+    let state: ReturnType<typeof useNetwork>;
+    scope.run(() => {
+      state = useNetwork({ window: fakeWindow });
+    });
+
+    expect(state!.isSupported.value).toBeTruthy();
+    expect(state!.downlink.value).toBe(10);
+    expect(state!.downlinkMax.value).toBe(100);
+    expect(state!.effectiveType.value).toBe('4g');
+    expect(state!.rtt.value).toBe(50);
+    expect(state!.saveData.value).toBeTruthy();
+    expect(state!.type.value).toBe('wifi');
+
+    // a registered change listener should re-read connection state
+    connection.downlink = 5;
+    connection.effectiveType = '3g';
+    listeners.change?.forEach(cb => cb(new Event('change')));
+    expect(state!.downlink.value).toBe(5);
+    expect(state!.effectiveType.value).toBe('3g');
+    scope.stop();
+  });
+
+  it('falls back to "unknown" type when connection.type is missing', () => {
+    const connection = {
+      downlink: 8,
+      effectiveType: '4g',
+      addEventListener: () => {},
+      removeEventListener: () => {},
+    };
+
+    const fakeWindow = {
+      navigator: { onLine: true, connection },
+      addEventListener: () => {},
+      removeEventListener: () => {},
+    } as unknown as Window;
+
+    const scope = effectScope();
+    let state: ReturnType<typeof useNetwork>;
+    scope.run(() => {
+      state = useNetwork({ window: fakeWindow });
+    });
+
+    expect(state!.isSupported.value).toBeTruthy();
+    expect(state!.type.value).toBe('unknown');
+    expect(state!.downlink.value).toBe(8);
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/sensors/useNetwork/index.ts b/vue/toolkit/src/composables/sensors/useNetwork/index.ts
new file mode 100644
index 0000000..79c7958
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useNetwork/index.ts
@@ -0,0 +1,157 @@
+import { shallowReadonly, shallowRef } from 'vue';
+import type { ShallowRef } from 'vue';
+import { timestamp } from '@robonen/stdlib';
+import { defaultWindow } from '@/types';
+import type { ConfigurableWindow } from '@/types';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import { useSupported } from '@/composables/utilities/useSupported';
+
+export type NetworkType
+  = | 'bluetooth'
+    | 'cellular'
+    | 'ethernet'
+    | 'none'
+    | 'wifi'
+    | 'wimax'
+    | 'other'
+    | 'unknown';
+
+export type NetworkEffectiveType = 'slow-2g' | '2g' | '3g' | '4g' | undefined;
+
+export interface UseNetworkOptions extends ConfigurableWindow {}
+
+export interface UseNetworkReturn {
+  /**
+   * Whether the Network Information API (`navigator.connection`) is supported.
+   */
+  isSupported: Readonly<ShallowRef<boolean>>;
+  /**
+   * Whether the browser is currently online (`navigator.onLine`).
+   */
+  isOnline: Readonly<ShallowRef<boolean>>;
+  /**
+   * The timestamp of the last time the browser went offline, in ms.
+   */
+  offlineAt: Readonly<ShallowRef<number | undefined>>;
+  /**
+   * The timestamp of the last time the browser came back online, in ms.
+   */
+  onlineAt: Readonly<ShallowRef<number | undefined>>;
+  /**
+   * The estimated effective bandwidth in megabits per second.
+   */
+  downlink: Readonly<ShallowRef<number | undefined>>;
+  /**
+   * The maximum downlink speed of the underlying connection technology, in Mbps.
+   */
+  downlinkMax: Readonly<ShallowRef<number | undefined>>;
+  /**
+   * The effective type of the connection (`slow-2g`, `2g`, `3g`, or `4g`).
+   */
+  effectiveType: Readonly<ShallowRef<NetworkEffectiveType>>;
+  /**
+   * The estimated effective round-trip time of the current connection, in ms.
+   */
+  rtt: Readonly<ShallowRef<number | undefined>>;
+  /**
+   * Whether the user has requested a reduced data usage mode.
+   */
+  saveData: Readonly<ShallowRef<boolean | undefined>>;
+  /**
+   * The type of connection a device is using to communicate with the network.
+   */
+  type: Readonly<ShallowRef<NetworkType>>;
+}
+
+interface NetworkInformation extends EventTarget {
+  readonly downlink?: number;
+  readonly downlinkMax?: number;
+  readonly effectiveType?: NetworkEffectiveType;
+  readonly rtt?: number;
+  readonly saveData?: boolean;
+  readonly type?: NetworkType;
+}
+
+/**
+ * @name useNetwork
+ * @category Sensors
+ * @description Reactive Network Information API state plus online/offline status.
+ *
+ * @param {UseNetworkOptions} [options={}] Options
+ * @returns {UseNetworkReturn} Reactive online status, transition timestamps, and connection info
+ *
+ * @example
+ * const { isOnline, offlineAt, downlink, effectiveType, saveData, type } = useNetwork();
+ *
+ * @since 0.0.15
+ */
+export function useNetwork(options: UseNetworkOptions = {}): UseNetworkReturn {
+  const { window = defaultWindow } = options;
+  const navigator = window?.navigator;
+
+  const isSupported = useSupported(() => !!navigator && 'connection' in navigator);
+
+  const isOnline = shallowRef(navigator?.onLine ?? true);
+  const saveData = shallowRef<boolean | undefined>(undefined);
+  const offlineAt = shallowRef<number | undefined>(undefined);
+  const onlineAt = shallowRef<number | undefined>(undefined);
+  const downlink = shallowRef<number | undefined>(undefined);
+  const downlinkMax = shallowRef<number | undefined>(undefined);
+  const rtt = shallowRef<number | undefined>(undefined);
+  const effectiveType = shallowRef<NetworkEffectiveType>(undefined);
+  const type = shallowRef<NetworkType>('unknown');
+
+  const connection = navigator && 'connection' in navigator
+    ? (navigator as Navigator & { connection?: NetworkInformation }).connection
+    : undefined;
+
+  function updateNetworkInformation(): void {
+    if (!navigator)
+      return;
+
+    isOnline.value = navigator.onLine;
+    offlineAt.value = isOnline.value ? offlineAt.value : timestamp();
+    onlineAt.value = isOnline.value ? timestamp() : onlineAt.value;
+
+    if (connection) {
+      downlink.value = connection.downlink;
+      downlinkMax.value = connection.downlinkMax;
+      effectiveType.value = connection.effectiveType;
+      rtt.value = connection.rtt;
+      saveData.value = connection.saveData;
+      type.value = connection.type ?? 'unknown';
+    }
+  }
+
+  const listenerOptions = { passive: true } as const;
+
+  if (window) {
+    useEventListener(window, 'offline', () => {
+      isOnline.value = false;
+      offlineAt.value = timestamp();
+    }, listenerOptions);
+
+    useEventListener(window, 'online', () => {
+      isOnline.value = true;
+      onlineAt.value = timestamp();
+    }, listenerOptions);
+  }
+
+  if (connection)
+    useEventListener(connection, 'change', updateNetworkInformation, listenerOptions);
+
+  updateNetworkInformation();
+
+  return {
+    isSupported,
+    isOnline: shallowReadonly(isOnline),
+    saveData: shallowReadonly(saveData),
+    offlineAt: shallowReadonly(offlineAt),
+    onlineAt: shallowReadonly(onlineAt),
+    downlink: shallowReadonly(downlink),
+    downlinkMax: shallowReadonly(downlinkMax),
+    effectiveType: shallowReadonly(effectiveType),
+    rtt: shallowReadonly(rtt),
+    type: shallowReadonly(type),
+  };
+}
diff --git a/vue/toolkit/src/composables/sensors/useOnline/demo.vue b/vue/toolkit/src/composables/sensors/useOnline/demo.vue
new file mode 100644
index 0000000..f700f6d
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useOnline/demo.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { useOnline } from './index';
+
+// Returns a single readonly ref — bind it directly, do not destructure.
+const online = useOnline();
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      class="flex flex-col items-center gap-3 rounded-xl border p-8 transition-colors duration-300"
+      :class="online
+        ? 'border-emerald-500/30 bg-emerald-500/10'
+        : 'border-red-500/30 bg-red-500/10'"
+    >
+      <span
+        class="flex size-16 items-center justify-center rounded-full transition-colors duration-300"
+        :class="online ? 'bg-emerald-500/20' : 'bg-red-500/20'"
+      >
+        <span
+          class="size-4 rounded-full transition-colors duration-300"
+          :class="online ? 'animate-pulse bg-emerald-500' : 'bg-red-500'"
+        />
+      </span>
+      <div class="text-center">
+        <p
+          class="text-lg font-bold transition-colors duration-300"
+          :class="online ? 'text-emerald-700 dark:text-emerald-300' : 'text-red-700 dark:text-red-300'"
+        >
+          {{ online ? 'You are online' : 'You are offline' }}
+        </p>
+        <p class="mt-0.5 text-xs text-(--fg-muted)">
+          Reflects <code class="font-mono">navigator.onLine</code>
+        </p>
+      </div>
+    </div>
+
+    <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2.5">
+      <span class="text-sm text-(--fg-muted)"><code class="font-mono">online.value</code></span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium"
+        :class="online
+          ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'bg-red-500/10 text-red-600 dark:text-red-400'"
+      >
+        <span class="size-1.5 rounded-full" :class="online ? 'bg-emerald-500' : 'bg-red-500'" />
+        {{ online ? 'true' : 'false' }}
+      </span>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Disable Wi-Fi or flip DevTools to <span class="font-medium text-(--fg-muted)">Offline</span> and the banner updates instantly.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useOnline/index.test.ts b/vue/toolkit/src/composables/sensors/useOnline/index.test.ts
new file mode 100644
index 0000000..64ad7c3
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useOnline/index.test.ts
@@ -0,0 +1,44 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick } from 'vue';
+import { useOnline } from '.';
+
+afterEach(() => vi.unstubAllGlobals());
+
+describe(useOnline, () => {
+  it('reflects the initial navigator.onLine', () => {
+    const scope = effectScope();
+    let online: ReturnType<typeof useOnline>;
+    scope.run(() => {
+      online = useOnline();
+    });
+    expect(online!.value).toBe(navigator.onLine);
+    scope.stop();
+  });
+
+  it('updates on offline/online events', async () => {
+    const scope = effectScope();
+    let online: ReturnType<typeof useOnline>;
+    scope.run(() => {
+      online = useOnline();
+    });
+
+    globalThis.dispatchEvent(new Event('offline'));
+    await nextTick();
+    expect(online!.value).toBeFalsy();
+
+    globalThis.dispatchEvent(new Event('online'));
+    await nextTick();
+    expect(online!.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('defaults to true when there is no window (SSR)', () => {
+    const scope = effectScope();
+    let online: ReturnType<typeof useOnline>;
+    scope.run(() => {
+      online = useOnline({ window: undefined as any });
+    });
+    expect(online!.value).toBeTruthy();
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/sensors/useOnline/index.ts b/vue/toolkit/src/composables/sensors/useOnline/index.ts
new file mode 100644
index 0000000..e4ac5d6
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useOnline/index.ts
@@ -0,0 +1,38 @@
+import { shallowReadonly, shallowRef } from 'vue';
+import type { ShallowRef } from 'vue';
+import { defaultWindow } from '@/types';
+import type { ConfigurableWindow } from '@/types';
+import { useEventListener } from '@/composables/browser/useEventListener';
+
+export interface UseOnlineOptions extends ConfigurableWindow {}
+
+/**
+ * @name useOnline
+ * @category Sensors
+ * @description Reactive online/offline status based on `navigator.onLine`.
+ * For connection details (effectiveType, downlink, saveData, transition
+ * timestamps, ...) use {@link useNetwork} instead.
+ *
+ * @param {UseOnlineOptions} [options={}] Options
+ * @returns {Readonly<ShallowRef<boolean>>} Whether the browser is online
+ *
+ * @example
+ * const online = useOnline();
+ *
+ * @since 0.0.15
+ */
+export function useOnline(options: UseOnlineOptions = {}): Readonly<ShallowRef<boolean>> {
+  const { window = defaultWindow } = options;
+
+  const isOnline = shallowRef(window?.navigator?.onLine ?? true);
+
+  useEventListener(window, 'online', () => {
+    isOnline.value = true;
+  }, { passive: true });
+
+  useEventListener(window, 'offline', () => {
+    isOnline.value = false;
+  }, { passive: true });
+
+  return shallowReadonly(isOnline);
+}
diff --git a/vue/toolkit/src/composables/sensors/usePageLeave/demo.vue b/vue/toolkit/src/composables/sensors/usePageLeave/demo.vue
new file mode 100644
index 0000000..0859c7f
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/usePageLeave/demo.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { usePageLeave } from './index';
+
+const leaveCount = ref(0);
+
+// Single readonly ref — bind directly. onChange fires when the flag flips.
+const hasLeft = usePageLeave({
+  onChange: (isLeft) => {
+    if (isLeft)
+      leaveCount.value += 1;
+  },
+});
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      class="flex flex-col items-center gap-3 rounded-xl border p-8 transition-colors duration-300"
+      :class="hasLeft
+        ? 'border-(--accent) bg-(--accent)/10'
+        : 'border-(--border) bg-(--bg-inset)'"
+    >
+      <span
+        class="flex size-16 items-center justify-center rounded-full text-2xl transition-all duration-300"
+        :class="hasLeft ? 'scale-110 bg-(--accent) text-(--accent-fg)' : 'bg-(--bg-elevated) text-(--fg-subtle)'"
+      >
+        {{ hasLeft ? '👋' : '👀' }}
+      </span>
+      <p
+        class="text-base font-semibold transition-colors duration-300"
+        :class="hasLeft ? 'text-(--accent-text)' : 'text-(--fg)'"
+      >
+        {{ hasLeft ? 'Come back!' : 'Pointer is on the page' }}
+      </p>
+    </div>
+
+    <div class="grid grid-cols-2 gap-2">
+      <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2.5">
+        <span class="text-sm text-(--fg-muted)">State</span>
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium transition"
+          :class="hasLeft
+            ? 'bg-amber-500/10 text-amber-600 dark:text-amber-400'
+            : 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'"
+        >
+          <span class="size-1.5 rounded-full" :class="hasLeft ? 'bg-amber-500' : 'bg-emerald-500'" />
+          {{ hasLeft ? 'Left' : 'Inside' }}
+        </span>
+      </div>
+      <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2.5">
+        <span class="text-sm text-(--fg-muted)">Exits</span>
+        <span class="font-mono text-sm font-bold tabular-nums text-(--fg)">{{ leaveCount }}</span>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Move your cursor out of the browser viewport &mdash; the classic <span class="font-medium text-(--fg-muted)">exit-intent</span> signal for save-cart prompts and the like.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/usePageLeave/index.test.ts b/vue/toolkit/src/composables/sensors/usePageLeave/index.test.ts
new file mode 100644
index 0000000..131a468
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/usePageLeave/index.test.ts
@@ -0,0 +1,95 @@
+import { describe, expect, it, vi } from 'vitest';
+import { effectScope, isReadonly, nextTick } from 'vue';
+import { usePageLeave } from '.';
+
+function withScope<T>(fn: () => T): { value: T; stop: () => void } {
+  const scope = effectScope();
+  let value!: T;
+  scope.run(() => {
+    value = fn();
+  });
+  return { value, stop: () => scope.stop() };
+}
+
+describe(usePageLeave, () => {
+  it('is false initially', () => {
+    const { value: isLeft, stop } = withScope(() => usePageLeave());
+    expect(isLeft.value).toBeFalsy();
+    stop();
+  });
+
+  it('returns a writable shallow ref', () => {
+    const { value: isLeft, stop } = withScope(() => usePageLeave());
+    expect(isReadonly(isLeft)).toBeFalsy();
+    stop();
+  });
+
+  it('becomes true when the pointer leaves the document', async () => {
+    const { value: isLeft, stop } = withScope(() => usePageLeave());
+
+    document.documentElement.dispatchEvent(new MouseEvent('mouseleave'));
+    await nextTick();
+    expect(isLeft.value).toBeTruthy();
+
+    document.documentElement.dispatchEvent(new MouseEvent('mouseenter'));
+    await nextTick();
+    expect(isLeft.value).toBeFalsy();
+    stop();
+  });
+
+  it('uses mouseout relatedTarget to detect leaving', async () => {
+    const { value: isLeft, stop } = withScope(() => usePageLeave());
+
+    // No relatedTarget => pointer left the page.
+    globalThis.dispatchEvent(new MouseEvent('mouseout'));
+    await nextTick();
+    expect(isLeft.value).toBeTruthy();
+
+    // relatedTarget present => pointer moved to another element, still on page.
+    globalThis.dispatchEvent(new MouseEvent('mouseout', { relatedTarget: document.body }));
+    await nextTick();
+    expect(isLeft.value).toBeFalsy();
+    stop();
+  });
+
+  it('invokes onChange with the new value and event only on change', async () => {
+    const onChange = vi.fn();
+    const { stop } = withScope(() => usePageLeave({ onChange }));
+
+    document.documentElement.dispatchEvent(new MouseEvent('mouseleave'));
+    await nextTick();
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenLastCalledWith(true, expect.any(MouseEvent));
+
+    // Repeated leave should not fire again (no state change).
+    document.documentElement.dispatchEvent(new MouseEvent('mouseleave'));
+    await nextTick();
+    expect(onChange).toHaveBeenCalledTimes(1);
+
+    document.documentElement.dispatchEvent(new MouseEvent('mouseenter'));
+    await nextTick();
+    expect(onChange).toHaveBeenCalledTimes(2);
+    expect(onChange).toHaveBeenLastCalledWith(false, expect.any(MouseEvent));
+    stop();
+  });
+
+  it('does not throw and stays false when window is undefined (SSR)', () => {
+    const { value: isLeft, stop } = withScope(() =>
+      usePageLeave({ window: undefined }),
+    );
+    expect(isLeft.value).toBeFalsy();
+    stop();
+  });
+
+  it('binds listeners to a custom window', async () => {
+    const onChange = vi.fn();
+    const { stop } = withScope(() => usePageLeave({ window: globalThis as unknown as Window, onChange }));
+
+    document.documentElement.dispatchEvent(new MouseEvent('mouseleave'));
+    await nextTick();
+    expect(onChange).toHaveBeenCalledWith(true, expect.any(MouseEvent));
+    document.documentElement.dispatchEvent(new MouseEvent('mouseenter'));
+    await nextTick();
+    stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/sensors/usePageLeave/index.ts b/vue/toolkit/src/composables/sensors/usePageLeave/index.ts
new file mode 100644
index 0000000..fcd35e4
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/usePageLeave/index.ts
@@ -0,0 +1,71 @@
+import { shallowRef } from 'vue';
+import type { ShallowRef } from 'vue';
+import { defaultWindow } from '@/types';
+import type { ConfigurableWindow } from '@/types';
+import { useEventListener } from '@/composables/browser/useEventListener';
+
+export interface UsePageLeaveOptions extends ConfigurableWindow {
+  /**
+   * Called whenever the leave state flips, receiving the new value and the
+   * originating mouse event.
+   *
+   * @default undefined
+   */
+  onChange?: (isLeft: boolean, event: MouseEvent) => void;
+}
+
+export type UsePageLeaveReturn = ShallowRef<boolean>;
+
+/**
+ * @name usePageLeave
+ * @category Sensors
+ * @description Reactive flag indicating whether the mouse has left the page.
+ *
+ * @param {UsePageLeaveOptions} [options={}] Options (custom `window`, `onChange` callback)
+ * @returns {UsePageLeaveReturn} Whether the pointer has left the page
+ *
+ * @example
+ * const hasLeft = usePageLeave();
+ *
+ * @example
+ * usePageLeave({
+ *   onChange: (isLeft) => {
+ *     if (isLeft) showExitIntentModal();
+ *   },
+ * });
+ *
+ * @since 0.0.15
+ */
+export function usePageLeave(options: UsePageLeaveOptions = {}): UsePageLeaveReturn {
+  const { window = defaultWindow, onChange } = options;
+
+  const isLeft = shallowRef(false);
+
+  const update = (left: boolean, event: MouseEvent) => {
+    if (left === isLeft.value)
+      return;
+
+    isLeft.value = left;
+    onChange?.(left, event);
+  };
+
+  if (window) {
+    const documentElement = window.document.documentElement;
+    const listenerOptions = { passive: true } as const;
+
+    useEventListener(window, 'mouseout', (event) => {
+      const from = event.relatedTarget || (event as MouseEvent & { toElement?: EventTarget }).toElement;
+      update(!from, event);
+    }, listenerOptions);
+
+    useEventListener(documentElement, 'mouseleave', (event) => {
+      update(true, event);
+    }, listenerOptions);
+
+    useEventListener(documentElement, 'mouseenter', (event) => {
+      update(false, event);
+    }, listenerOptions);
+  }
+
+  return isLeft;
+}
diff --git a/vue/toolkit/src/composables/sensors/useParallax/demo.vue b/vue/toolkit/src/composables/sensors/useParallax/demo.vue
new file mode 100644
index 0000000..67d1264
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useParallax/demo.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { computed, ref, useTemplateRef } from 'vue';
+import { useParallax } from './index';
+
+const container = useTemplateRef<HTMLElement>('container');
+const { roll, tilt, source } = useParallax(container);
+
+// How aggressively the card reacts (degrees at the edges).
+const intensity = ref(20);
+
+const cardStyle = computed(() => ({
+  transform: `perspective(800px) rotateX(${roll.value * intensity.value}deg) rotateY(${tilt.value * intensity.value}deg)`,
+}));
+
+const layer = (depth: number) => ({
+  transform: `translateX(${tilt.value * depth}px) translateY(${-roll.value * depth}px)`,
+});
+
+const fmt = (n: number) => (n >= 0 ? '+' : '') + n.toFixed(3);
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      ref="container"
+      class="relative grid place-items-center overflow-hidden rounded-xl border border-(--border) bg-(--bg-inset) p-8"
+    >
+      <div
+        class="relative aspect-[4/3] w-full max-w-[16rem] rounded-xl border border-(--border-strong) bg-(--bg-elevated) shadow-xl transition-transform duration-75 ease-out will-change-transform"
+        :style="cardStyle"
+      >
+        <div class="absolute inset-0 grid place-items-center" :style="layer(8)">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+            depth 8
+          </span>
+        </div>
+        <div class="absolute inset-0 grid place-items-center" :style="layer(24)">
+          <span class="font-mono text-2xl font-bold tabular-nums text-(--fg)">
+            Parallax
+          </span>
+        </div>
+        <div class="absolute bottom-3 right-3" :style="layer(40)">
+          <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+            depth 40
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <p class="text-center text-xs text-(--fg-subtle)">
+      Move your pointer over the panel &mdash; layers shift by depth.
+    </p>
+
+    <div class="space-y-2">
+      <div class="flex items-center justify-between">
+        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Intensity
+        </label>
+        <span class="font-mono text-xs tabular-nums text-(--fg-muted)">{{ intensity }}&deg;</span>
+      </div>
+      <input
+        v-model.number="intensity"
+        type="range"
+        min="0"
+        max="45"
+        step="1"
+        class="w-full accent-(--accent)"
+      >
+    </div>
+
+    <div class="grid grid-cols-3 gap-2">
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Roll</div>
+        <div class="mt-1 font-mono text-sm tabular-nums text-(--fg)">{{ fmt(roll) }}</div>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Tilt</div>
+        <div class="mt-1 font-mono text-sm tabular-nums text-(--fg)">{{ fmt(tilt) }}</div>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Source</div>
+        <div class="mt-1 font-mono text-sm capitalize text-(--fg)">{{ source }}</div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useParallax/index.test.ts b/vue/toolkit/src/composables/sensors/useParallax/index.test.ts
new file mode 100644
index 0000000..179e577
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useParallax/index.test.ts
@@ -0,0 +1,252 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick } from 'vue';
+import type { OrientationType } from '@/composables/sensors/useScreenOrientation';
+import { useParallax } from '.';
+
+/**
+ * A minimal `window`-like stub that satisfies every composable `useParallax`
+ * composes (`useDeviceOrientation`, `useMouse`, `useScreenOrientation`,
+ * `useWindowSize`, `useElementBounding`). Events are routed through a real
+ * registry so we can drive `deviceorientation`/`mousemove` synchronously.
+ */
+function createWindowStub(opts: {
+  supportsOrientation?: boolean;
+  orientationType?: OrientationType;
+  innerWidth?: number;
+  innerHeight?: number;
+} = {}) {
+  const {
+    supportsOrientation = true,
+    orientationType = 'landscape-primary',
+    innerWidth = 200,
+    innerHeight = 100,
+  } = opts;
+
+  const listeners = new Map<string, Set<(e: Event) => void>>();
+
+  const target = {
+    innerWidth,
+    innerHeight,
+    outerWidth: innerWidth,
+    outerHeight: innerHeight,
+    scrollX: 0,
+    scrollY: 0,
+    visualViewport: undefined,
+    document: globalThis.document,
+    matchMedia: globalThis.matchMedia?.bind(globalThis) ?? (() => ({
+      matches: false,
+      addEventListener: () => {},
+      removeEventListener: () => {},
+    })),
+    screen: {
+      orientation: {
+        type: orientationType,
+        angle: 0,
+        addEventListener: (type: string, fn: (e: Event) => void) => {
+          (listeners.get(`screen:${type}`) ?? listeners.set(`screen:${type}`, new Set()).get(`screen:${type}`)!).add(fn);
+        },
+        removeEventListener: (type: string, fn: (e: Event) => void) => listeners.get(`screen:${type}`)?.delete(fn),
+      },
+    },
+    addEventListener: (type: string, fn: (e: Event) => void) => {
+      (listeners.get(type) ?? listeners.set(type, new Set()).get(type)!).add(fn);
+    },
+    removeEventListener: (type: string, fn: (e: Event) => void) => listeners.get(type)?.delete(fn),
+    dispatch: (type: string, data: Record<string, unknown>) => {
+      const event = Object.assign(new Event(type), data);
+      listeners.get(type)?.forEach(fn => fn(event));
+    },
+  };
+
+  if (supportsOrientation)
+    (target as Record<string, unknown>).DeviceOrientationEvent = class {};
+
+  return target as unknown as Window & {
+    dispatch: (type: string, data: Record<string, unknown>) => void;
+  };
+}
+
+describe(useParallax, () => {
+  afterEach(() => vi.unstubAllGlobals());
+
+  it('exposes the { roll, tilt, source } API with mouse as the default source', () => {
+    const window = createWindowStub();
+    const scope = effectScope();
+    let result: ReturnType<typeof useParallax>;
+    scope.run(() => {
+      result = useParallax(null, { window });
+    });
+
+    expect(result!.source.value).toBe('mouse');
+    expect(result!.roll.value).toBeTypeOf('number');
+    expect(result!.tilt.value).toBeTypeOf('number');
+    scope.stop();
+  });
+
+  it('computes viewport-relative mouse roll/tilt scaled to -0.5 ~ 0.5', () => {
+    const window = createWindowStub({ innerWidth: 200, innerHeight: 100 });
+    const scope = effectScope();
+    let result: ReturnType<typeof useParallax>;
+    scope.run(() => {
+      result = useParallax(null, { window });
+    });
+
+    // Pointer at the exact centre => no tilt, no roll.
+    window.dispatch('mousemove', { clientX: 100, clientY: 50 });
+    expect(result!.tilt.value).toBeCloseTo(0);
+    expect(result!.roll.value).toBeCloseTo(0);
+
+    // Pointer at the right edge => max tilt (+0.5); bottom edge => min roll (-0.5).
+    window.dispatch('mousemove', { clientX: 200, clientY: 100 });
+    expect(result!.tilt.value).toBeCloseTo(0.5);
+    expect(result!.roll.value).toBeCloseTo(-0.5);
+
+    // Top-left corner => -0.5 tilt, +0.5 roll.
+    window.dispatch('mousemove', { clientX: 0, clientY: 0 });
+    expect(result!.tilt.value).toBeCloseTo(-0.5);
+    expect(result!.roll.value).toBeCloseTo(0.5);
+    scope.stop();
+  });
+
+  it('applies the mouse adjust functions', () => {
+    const window = createWindowStub({ innerWidth: 200, innerHeight: 100 });
+    const scope = effectScope();
+    let result: ReturnType<typeof useParallax>;
+    scope.run(() => {
+      result = useParallax(null, {
+        window,
+        mouseTiltAdjust: i => i * 2,
+        mouseRollAdjust: i => i + 1,
+      });
+    });
+
+    window.dispatch('mousemove', { clientX: 200, clientY: 50 });
+    expect(result!.tilt.value).toBeCloseTo(1); // 0.5 * 2
+    expect(result!.roll.value).toBeCloseTo(1); // 0 + 1
+    scope.stop();
+  });
+
+  it('prefers device orientation when supported and providing data', async () => {
+    const window = createWindowStub({ orientationType: 'landscape-primary' });
+    const scope = effectScope();
+    let result: ReturnType<typeof useParallax>;
+    scope.run(() => {
+      result = useParallax(null, { window });
+    });
+
+    await nextTick(); // useSupported settles after mount
+
+    // gamma drives roll, beta drives tilt in landscape-primary, each / 90.
+    window.dispatch('deviceorientation', { absolute: true, alpha: 10, beta: 45, gamma: -90 });
+
+    expect(result!.source.value).toBe('deviceOrientation');
+    expect(result!.roll.value).toBeCloseTo(-1); // gamma -90 / 90
+    expect(result!.tilt.value).toBeCloseTo(0.5); // beta 45 / 90
+    scope.stop();
+  });
+
+  it('maps device orientation differently per screen orientation', async () => {
+    const window = createWindowStub({ orientationType: 'portrait-primary' });
+    const scope = effectScope();
+    let result: ReturnType<typeof useParallax>;
+    scope.run(() => {
+      result = useParallax(null, { window });
+    });
+
+    await nextTick();
+
+    // portrait-primary: roll = -beta / 90, tilt = gamma / 90.
+    window.dispatch('deviceorientation', { absolute: true, alpha: 5, beta: 90, gamma: 45 });
+    expect(result!.source.value).toBe('deviceOrientation');
+    expect(result!.roll.value).toBeCloseTo(-1); // -beta 90 / 90
+    expect(result!.tilt.value).toBeCloseTo(0.5); // gamma 45 / 90
+    scope.stop();
+  });
+
+  it('applies the device-orientation adjust functions', async () => {
+    const window = createWindowStub({ orientationType: 'landscape-primary' });
+    const scope = effectScope();
+    let result: ReturnType<typeof useParallax>;
+    scope.run(() => {
+      result = useParallax(null, {
+        window,
+        deviceOrientationRollAdjust: i => i * 10,
+        deviceOrientationTiltAdjust: i => -i,
+      });
+    });
+
+    await nextTick();
+    window.dispatch('deviceorientation', { absolute: true, alpha: 1, beta: 45, gamma: 90 });
+
+    expect(result!.roll.value).toBeCloseTo(10); // (90 / 90) * 10
+    expect(result!.tilt.value).toBeCloseTo(-0.5); // -(45 / 90)
+    scope.stop();
+  });
+
+  it('stays on mouse when orientation is supported but reports only zero/null angles', async () => {
+    const window = createWindowStub();
+    const scope = effectScope();
+    let result: ReturnType<typeof useParallax>;
+    scope.run(() => {
+      result = useParallax(null, { window });
+    });
+
+    await nextTick();
+    window.dispatch('deviceorientation', { absolute: true, alpha: 0, beta: 0, gamma: 0 });
+
+    expect(result!.source.value).toBe('mouse');
+    scope.stop();
+  });
+
+  it('measures the mouse fallback against a target element when provided', () => {
+    const window = createWindowStub();
+    const el = globalThis.document.createElement('div');
+    el.getBoundingClientRect = () => ({
+      x: 100,
+      y: 100,
+      top: 100,
+      left: 100,
+      right: 300,
+      bottom: 200,
+      width: 200,
+      height: 100,
+      toJSON: () => ({}),
+    });
+
+    const scope = effectScope();
+    let result: ReturnType<typeof useParallax>;
+    scope.run(() => {
+      result = useParallax(el, { window });
+    });
+
+    // Centre of the element box (200,150) => zero tilt/roll.
+    window.dispatch('mousemove', { clientX: 200, clientY: 150 });
+    expect(result!.tilt.value).toBeCloseTo(0);
+    expect(result!.roll.value).toBeCloseTo(0);
+
+    // Element right/bottom edge => +0.5 tilt, -0.5 roll.
+    window.dispatch('mousemove', { clientX: 300, clientY: 200 });
+    expect(result!.tilt.value).toBeCloseTo(0.5);
+    expect(result!.roll.value).toBeCloseTo(-0.5);
+    scope.stop();
+  });
+
+  it('reports mouse source and stays inert on the unsupported / SSR path', () => {
+    // A window-like object without DeviceOrientationEvent models both an
+    // unsupported browser and SSR. Mouse fallback still produces finite numbers.
+    const window = createWindowStub({ supportsOrientation: false, innerWidth: 100, innerHeight: 100 });
+    const scope = effectScope();
+    let result: ReturnType<typeof useParallax>;
+    scope.run(() => {
+      result = useParallax(null, { window });
+    });
+
+    expect(result!.source.value).toBe('mouse');
+    window.dispatch('deviceorientation', { absolute: true, alpha: 30, beta: 60, gamma: 45 });
+    // Still mouse — orientation is unsupported on this window.
+    expect(result!.source.value).toBe('mouse');
+    expect(Number.isFinite(result!.roll.value)).toBeTruthy();
+    expect(Number.isFinite(result!.tilt.value)).toBeTruthy();
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/sensors/useParallax/index.ts b/vue/toolkit/src/composables/sensors/useParallax/index.ts
new file mode 100644
index 0000000..920ee20
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useParallax/index.ts
@@ -0,0 +1,183 @@
+import { computed } from 'vue';
+import type { ComputedRef } from 'vue';
+import { defaultWindow } from '@/types';
+import type { ConfigurableWindow } from '@/types';
+import type { MaybeComputedElementRef } from '@/composables/component/unrefElement';
+import { useDeviceOrientation } from '@/composables/sensors/useDeviceOrientation';
+import { useMouse } from '@/composables/sensors/useMouse';
+import { useScreenOrientation } from '@/composables/sensors/useScreenOrientation';
+import { useElementBounding } from '@/composables/elements/useElementBounding';
+import { useWindowSize } from '@/composables/elements/useWindowSize';
+
+/**
+ * Where the parallax `roll`/`tilt` values are currently being derived from.
+ */
+export type ParallaxSource = 'deviceOrientation' | 'mouse';
+
+/**
+ * Adjusts a normalised (`-0.5 ~ 0.5`) parallax value before it is returned.
+ */
+export type ParallaxAdjust = (value: number) => number;
+
+export interface UseParallaxOptions extends ConfigurableWindow {
+  /**
+   * Transform the device-orientation derived tilt before returning it.
+   *
+   * @default (i) => i
+   */
+  deviceOrientationTiltAdjust?: ParallaxAdjust;
+
+  /**
+   * Transform the device-orientation derived roll before returning it.
+   *
+   * @default (i) => i
+   */
+  deviceOrientationRollAdjust?: ParallaxAdjust;
+
+  /**
+   * Transform the mouse derived tilt before returning it.
+   *
+   * @default (i) => i
+   */
+  mouseTiltAdjust?: ParallaxAdjust;
+
+  /**
+   * Transform the mouse derived roll before returning it.
+   *
+   * @default (i) => i
+   */
+  mouseRollAdjust?: ParallaxAdjust;
+}
+
+export interface UseParallaxReturn {
+  /**
+   * Roll, scaled to `-0.5 ~ 0.5` (rotation around the horizontal axis).
+   */
+  roll: ComputedRef<number>;
+
+  /**
+   * Tilt, scaled to `-0.5 ~ 0.5` (rotation around the vertical axis).
+   */
+  tilt: ComputedRef<number>;
+
+  /**
+   * The input the effect is currently reading from.
+   */
+  source: ComputedRef<ParallaxSource>;
+}
+
+const identity: ParallaxAdjust = i => i;
+
+/**
+ * @name useParallax
+ * @category Sensors
+ * @description Reactive parallax effect. Prefers the device orientation sensors and
+ * transparently falls back to mouse position when orientation is unavailable. Composes
+ * {@link useDeviceOrientation} and {@link useMouse}; pass a `target` to make the mouse
+ * fallback relative to an element's centre instead of the whole viewport. SSR-safe.
+ *
+ * @param {MaybeComputedElementRef} [target] Element the mouse fallback is measured against. Omit to use the viewport.
+ * @param {UseParallaxOptions} [options={}] Options
+ * @returns {UseParallaxReturn} Reactive `roll`, `tilt` (both `-0.5 ~ 0.5`), and `source`
+ *
+ * @example
+ * const { roll, tilt, source } = useParallax(el);
+ * // <div :style="{ transform: `rotateX(${roll * 20}deg) rotateY(${tilt * 20}deg)` }" />
+ *
+ * @example
+ * // Viewport-relative, with custom sensitivity on the mouse fallback
+ * const { roll, tilt } = useParallax(null, { mouseTiltAdjust: i => i * 2 });
+ *
+ * @since 0.0.15
+ */
+export function useParallax(
+  target?: MaybeComputedElementRef | null,
+  options: UseParallaxOptions = {},
+): UseParallaxReturn {
+  const {
+    deviceOrientationTiltAdjust = identity,
+    deviceOrientationRollAdjust = identity,
+    mouseTiltAdjust = identity,
+    mouseRollAdjust = identity,
+    window = defaultWindow,
+  } = options;
+
+  const orientation = useDeviceOrientation({ window });
+  const screen = useScreenOrientation({ window });
+  const { x, y } = useMouse({ window, type: 'client' });
+
+  // Only observe an element box when a target is supplied; otherwise fall back to
+  // the viewport size so we never pay for a ResizeObserver/MutationObserver we
+  // don't need.
+  const hasTarget = target !== null && target !== undefined;
+  const box = hasTarget ? useElementBounding(target as MaybeComputedElementRef, { window }) : null;
+  const viewport = hasTarget ? null : useWindowSize({ window });
+
+  const source = computed<ParallaxSource>(() => {
+    if (orientation.isSupported.value
+      && ((orientation.alpha.value !== null && orientation.alpha.value !== 0)
+        || (orientation.gamma.value !== null && orientation.gamma.value !== 0))) {
+      return 'deviceOrientation';
+    }
+
+    return 'mouse';
+  });
+
+  const roll = computed<number>(() => {
+    if (source.value === 'deviceOrientation') {
+      let value: number;
+
+      switch (screen.orientation.value) {
+        case 'landscape-primary':
+          value = orientation.gamma.value! / 90;
+          break;
+        case 'landscape-secondary':
+          value = -orientation.gamma.value! / 90;
+          break;
+        case 'portrait-secondary':
+          value = orientation.beta.value! / 90;
+          break;
+        case 'portrait-primary':
+        default:
+          value = -orientation.beta.value! / 90;
+      }
+
+      return deviceOrientationRollAdjust(value);
+    }
+
+    const height = box ? box.height.value : viewport!.height.value;
+    const offsetY = box ? y.value - box.top.value : y.value;
+
+    return mouseRollAdjust(-(offsetY - height / 2) / height);
+  });
+
+  const tilt = computed<number>(() => {
+    if (source.value === 'deviceOrientation') {
+      let value: number;
+
+      switch (screen.orientation.value) {
+        case 'landscape-primary':
+          value = orientation.beta.value! / 90;
+          break;
+        case 'landscape-secondary':
+          value = -orientation.beta.value! / 90;
+          break;
+        case 'portrait-secondary':
+          value = -orientation.gamma.value! / 90;
+          break;
+        case 'portrait-primary':
+        default:
+          value = orientation.gamma.value! / 90;
+      }
+
+      return deviceOrientationTiltAdjust(value);
+    }
+
+    const width = box ? box.width.value : viewport!.width.value;
+    const offsetX = box ? x.value - box.left.value : x.value;
+
+    return mouseTiltAdjust((offsetX - width / 2) / width);
+  });
+
+  return { roll, tilt, source };
+}
diff --git a/vue/toolkit/src/composables/sensors/usePointer/demo.vue b/vue/toolkit/src/composables/sensors/usePointer/demo.vue
new file mode 100644
index 0000000..ac04c30
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/usePointer/demo.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { computed, useTemplateRef } from 'vue';
+import { usePointer } from './index';
+
+const area = useTemplateRef<HTMLElement>('area');
+const { x, y, pressure, tiltX, tiltY, pointerType, isInside } = usePointer({ target: area });
+
+// Position the crosshair relative to the tracked element.
+const dotStyle = computed(() => ({
+  left: `${x.value}px`,
+  top: `${y.value}px`,
+}));
+
+const typeLabel = computed(() => pointerType.value ?? 'none');
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      ref="area"
+      class="relative h-44 touch-none overflow-hidden rounded-xl border border-(--border) bg-(--bg-inset) [background-image:radial-gradient(var(--border)_1px,transparent_1px)] [background-size:16px_16px]"
+    >
+      <div
+        v-if="isInside"
+        class="pointer-events-none absolute z-10 -translate-x-1/2 -translate-y-1/2 transition-transform duration-75 ease-out"
+        :style="dotStyle"
+      >
+        <div
+          class="rounded-full bg-(--accent) opacity-80"
+          :style="{ width: `${12 + pressure * 40}px`, height: `${12 + pressure * 40}px` }"
+        />
+      </div>
+      <div class="pointer-events-none absolute inset-0 grid place-items-center">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          {{ isInside ? 'Tracking' : 'Move your pointer here' }}
+        </span>
+      </div>
+    </div>
+
+    <div class="grid grid-cols-2 gap-2">
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm tabular-nums text-(--fg)">
+        <div class="font-sans text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Position</div>
+        <div class="mt-1">{{ Math.round(x) }}, {{ Math.round(y) }}</div>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm tabular-nums text-(--fg)">
+        <div class="font-sans text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Pressure</div>
+        <div class="mt-1">{{ pressure.toFixed(2) }}</div>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm tabular-nums text-(--fg)">
+        <div class="font-sans text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Tilt X / Y</div>
+        <div class="mt-1">{{ tiltX }} / {{ tiltY }}</div>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <div class="font-sans text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Type</div>
+        <div class="mt-1 font-mono text-sm capitalize text-(--fg)">{{ typeLabel }}</div>
+      </div>
+    </div>
+
+    <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2.5">
+      <span class="text-sm text-(--fg-muted)">Pointer inside</span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium transition"
+        :class="isInside
+          ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        <span class="size-1.5 rounded-full transition" :class="isInside ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+        {{ isInside ? 'Yes' : 'No' }}
+      </span>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Pressure scales the dot. Pen tilt &amp; pressure show real values on supporting hardware.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/usePointer/index.test.ts b/vue/toolkit/src/composables/sensors/usePointer/index.test.ts
new file mode 100644
index 0000000..3f0d198
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/usePointer/index.test.ts
@@ -0,0 +1,218 @@
+import { describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, shallowRef } from 'vue';
+import { usePointer } from '.';
+
+interface PointerProps {
+  x?: number;
+  y?: number;
+  pressure?: number;
+  pointerId?: number;
+  tiltX?: number;
+  tiltY?: number;
+  width?: number;
+  height?: number;
+  twist?: number;
+  pointerType?: string;
+}
+
+function dispatchPointer(target: EventTarget, type: string, props: PointerProps = {}) {
+  const event = new Event(type, { bubbles: true });
+  for (const [key, value] of Object.entries(props))
+    Object.defineProperty(event, key, { value, configurable: true });
+  target.dispatchEvent(event);
+  return event;
+}
+
+describe(usePointer, () => {
+  it('starts from the default state', () => {
+    const scope = effectScope();
+    let ptr: ReturnType<typeof usePointer>;
+    scope.run(() => {
+      ptr = usePointer();
+    });
+
+    expect(ptr!.x.value).toBe(0);
+    expect(ptr!.y.value).toBe(0);
+    expect(ptr!.pressure.value).toBe(0);
+    expect(ptr!.pointerId.value).toBe(0);
+    expect(ptr!.tiltX.value).toBe(0);
+    expect(ptr!.tiltY.value).toBe(0);
+    expect(ptr!.width.value).toBe(0);
+    expect(ptr!.height.value).toBe(0);
+    expect(ptr!.twist.value).toBe(0);
+    expect(ptr!.pointerType.value).toBe(null);
+    expect(ptr!.isInside.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('merges the initial value over defaults', () => {
+    const scope = effectScope();
+    let ptr: ReturnType<typeof usePointer>;
+    scope.run(() => {
+      ptr = usePointer({ initialValue: { x: 12, pressure: 0.5 } });
+    });
+
+    expect(ptr!.x.value).toBe(12);
+    expect(ptr!.pressure.value).toBe(0.5);
+    expect(ptr!.y.value).toBe(0);
+    scope.stop();
+  });
+
+  it('tracks pointermove and populates the full state', async () => {
+    const scope = effectScope();
+    let ptr: ReturnType<typeof usePointer>;
+    scope.run(() => {
+      ptr = usePointer();
+    });
+
+    dispatchPointer(globalThis, 'pointermove', {
+      x: 100,
+      y: 200,
+      pressure: 0.7,
+      pointerId: 3,
+      tiltX: 10,
+      tiltY: -5,
+      width: 4,
+      height: 6,
+      twist: 90,
+      pointerType: 'pen',
+    });
+    await nextTick();
+
+    expect(ptr!.x.value).toBe(100);
+    expect(ptr!.y.value).toBe(200);
+    expect(ptr!.pressure.value).toBe(0.7);
+    expect(ptr!.pointerId.value).toBe(3);
+    expect(ptr!.tiltX.value).toBe(10);
+    expect(ptr!.tiltY.value).toBe(-5);
+    expect(ptr!.width.value).toBe(4);
+    expect(ptr!.height.value).toBe(6);
+    expect(ptr!.twist.value).toBe(90);
+    expect(ptr!.pointerType.value).toBe('pen');
+    scope.stop();
+  });
+
+  it('sets isInside true on pointer activity and false on pointerleave', async () => {
+    const scope = effectScope();
+    let ptr: ReturnType<typeof usePointer>;
+    scope.run(() => {
+      ptr = usePointer();
+    });
+
+    expect(ptr!.isInside.value).toBeFalsy();
+
+    dispatchPointer(globalThis, 'pointerdown', { x: 1, y: 2, pointerType: 'mouse' });
+    await nextTick();
+    expect(ptr!.isInside.value).toBeTruthy();
+
+    dispatchPointer(globalThis, 'pointerleave');
+    await nextTick();
+    expect(ptr!.isInside.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('tracks pointerdown and pointerup', async () => {
+    const scope = effectScope();
+    let ptr: ReturnType<typeof usePointer>;
+    scope.run(() => {
+      ptr = usePointer();
+    });
+
+    dispatchPointer(globalThis, 'pointerdown', { x: 5, y: 5, pointerType: 'mouse' });
+    await nextTick();
+    expect(ptr!.x.value).toBe(5);
+
+    dispatchPointer(globalThis, 'pointerup', { x: 9, y: 9, pointerType: 'mouse' });
+    await nextTick();
+    expect(ptr!.x.value).toBe(9);
+    expect(ptr!.y.value).toBe(9);
+    scope.stop();
+  });
+
+  it('ignores events whose pointerType is not allowed', async () => {
+    const scope = effectScope();
+    let ptr: ReturnType<typeof usePointer>;
+    scope.run(() => {
+      ptr = usePointer({ pointerTypes: ['pen'], initialValue: { x: 1, y: 2 } });
+    });
+
+    dispatchPointer(globalThis, 'pointermove', { x: 50, y: 60, pointerType: 'mouse' });
+    await nextTick();
+    // mouse rejected: position unchanged, but isInside still flips true
+    expect(ptr!.x.value).toBe(1);
+    expect(ptr!.y.value).toBe(2);
+    expect(ptr!.isInside.value).toBeTruthy();
+
+    dispatchPointer(globalThis, 'pointermove', { x: 50, y: 60, pointerType: 'pen' });
+    await nextTick();
+    expect(ptr!.x.value).toBe(50);
+    expect(ptr!.y.value).toBe(60);
+    expect(ptr!.pointerType.value).toBe('pen');
+    scope.stop();
+  });
+
+  it('attaches passive listeners', () => {
+    const addSpy = vi.spyOn(globalThis, 'addEventListener');
+    const scope = effectScope();
+    scope.run(() => {
+      usePointer();
+    });
+
+    const moveCall = addSpy.mock.calls.find(([name]) => name === 'pointermove');
+    expect(moveCall).toBeDefined();
+    expect((moveCall![2] as AddEventListenerOptions).passive).toBeTruthy();
+
+    addSpy.mockRestore();
+    scope.stop();
+  });
+
+  it('listens on a custom element target', async () => {
+    const el = document.createElement('div');
+    const elRef = shallowRef(el);
+    const addSpy = vi.spyOn(el, 'addEventListener');
+
+    const scope = effectScope();
+    let ptr: ReturnType<typeof usePointer>;
+    scope.run(() => {
+      ptr = usePointer({ target: elRef });
+    });
+    await nextTick();
+
+    expect(addSpy.mock.calls.some(([name]) => name === 'pointermove')).toBeTruthy();
+
+    dispatchPointer(el, 'pointermove', { x: 7, y: 8, pointerType: 'mouse' });
+    await nextTick();
+
+    expect(ptr!.x.value).toBe(7);
+    expect(ptr!.y.value).toBe(8);
+
+    addSpy.mockRestore();
+    scope.stop();
+  });
+
+  it('exposes writable state refs', () => {
+    const scope = effectScope();
+    let ptr: ReturnType<typeof usePointer>;
+    scope.run(() => {
+      ptr = usePointer();
+    });
+
+    ptr!.x.value = 42;
+    expect(ptr!.x.value).toBe(42);
+    scope.stop();
+  });
+
+  it('does nothing when window is unavailable (SSR)', () => {
+    const scope = effectScope();
+    let ptr: ReturnType<typeof usePointer>;
+    scope.run(() => {
+      ptr = usePointer({ window: undefined, target: undefined });
+    });
+
+    expect(ptr!.x.value).toBe(0);
+    expect(ptr!.y.value).toBe(0);
+    expect(ptr!.pointerType.value).toBe(null);
+    expect(ptr!.isInside.value).toBeFalsy();
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/sensors/usePointer/index.ts b/vue/toolkit/src/composables/sensors/usePointer/index.ts
new file mode 100644
index 0000000..caae530
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/usePointer/index.ts
@@ -0,0 +1,162 @@
+import { computed, shallowRef } from 'vue';
+import type { ShallowRef, WritableComputedRef } from 'vue';
+import { pick } from '@robonen/stdlib';
+import { defaultWindow } from '@/types';
+import type { ConfigurableWindow } from '@/types';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import { unrefElement } from '@/composables/component/unrefElement';
+import type { MaybeComputedElementRef } from '@/composables/component/unrefElement';
+
+export type UsePointerType = 'mouse' | 'touch' | 'pen';
+
+export interface UsePointerState {
+  x: number;
+  y: number;
+  pressure: number;
+  pointerId: number;
+  tiltX: number;
+  tiltY: number;
+  width: number;
+  height: number;
+  twist: number;
+  pointerType: UsePointerType | null;
+}
+
+export interface UsePointerOptions extends ConfigurableWindow {
+  /**
+   * Pointer types that should be listened to.
+   *
+   * @default ['mouse', 'touch', 'pen']
+   */
+  pointerTypes?: UsePointerType[];
+
+  /**
+   * Initial pointer state.
+   */
+  initialValue?: Partial<UsePointerState>;
+
+  /**
+   * Target to attach the listeners to. Accepts a window, document, element ref,
+   * getter, or component instance.
+   *
+   * @default window
+   */
+  target?: MaybeComputedElementRef | Window | Document;
+}
+
+export interface UsePointerReturn {
+  x: WritableComputedRef<number>;
+  y: WritableComputedRef<number>;
+  pressure: WritableComputedRef<number>;
+  pointerId: WritableComputedRef<number>;
+  tiltX: WritableComputedRef<number>;
+  tiltY: WritableComputedRef<number>;
+  width: WritableComputedRef<number>;
+  height: WritableComputedRef<number>;
+  twist: WritableComputedRef<number>;
+  pointerType: WritableComputedRef<UsePointerType | null>;
+  isInside: ShallowRef<boolean>;
+}
+
+const defaultState: UsePointerState = {
+  x: 0,
+  y: 0,
+  pointerId: 0,
+  pressure: 0,
+  tiltX: 0,
+  tiltY: 0,
+  width: 0,
+  height: 0,
+  twist: 0,
+  pointerType: null,
+};
+
+const keys = Object.keys(defaultState) as Array<keyof UsePointerState>;
+
+/**
+ * @name usePointer
+ * @category Sensors
+ * @description Reactive pointer state (position, pressure, tilt, size, and
+ * pointer type) sourced from pointer events on a target, plus whether the
+ * pointer is currently inside it.
+ *
+ * @param {UsePointerOptions} [options={}] Options
+ * @returns {UsePointerReturn} Reactive pointer state refs and `isInside`
+ *
+ * @example
+ * const { x, y, pressure, pointerType, isInside } = usePointer();
+ *
+ * @example
+ * // Track a specific element, pen only
+ * const { x, y, tiltX, tiltY } = usePointer({ target: el, pointerTypes: ['pen'] });
+ *
+ * @since 0.0.15
+ */
+export function usePointer(options: UsePointerOptions = {}): UsePointerReturn {
+  const {
+    pointerTypes,
+    initialValue = {},
+    window = defaultWindow,
+    target = window,
+  } = options;
+
+  const isInside = shallowRef(false);
+
+  const state = shallowRef<UsePointerState>({
+    ...defaultState,
+    ...initialValue,
+  });
+
+  const handler = (event: PointerEvent) => {
+    isInside.value = true;
+
+    if (pointerTypes && !pointerTypes.includes(event.pointerType as UsePointerType))
+      return;
+
+    state.value = pick(event, keys) as UsePointerState;
+  };
+
+  // A raw window/document/EventTarget is used directly (fast, non-reactive path
+  // in useEventListener). Refs/getters/element instances are resolved lazily via
+  // a getter so the listeners re-bind when the underlying element changes.
+  const listenTarget = isTarget(target)
+    ? target
+    : (): EventTarget | null | undefined => unrefElement(target as MaybeComputedElementRef) as EventTarget | null | undefined;
+
+  if (target) {
+    const listenerOptions = { passive: true };
+
+    useEventListener(listenTarget, ['pointerdown', 'pointermove', 'pointerup'], handler as (e: Event) => void, listenerOptions);
+    useEventListener(listenTarget, 'pointerleave', () => (isInside.value = false), listenerOptions);
+  }
+
+  // Derive a writable ref per field that reads/writes through the single
+  // shallowRef holding the whole state, matching VueUse's `toRefs(shallowRef)`.
+  const toField = <K extends keyof UsePointerState>(key: K): WritableComputedRef<UsePointerState[K]> =>
+    computed({
+      get: () => state.value[key],
+      set: value => (state.value = { ...state.value, [key]: value }),
+    });
+
+  return {
+    x: toField('x'),
+    y: toField('y'),
+    pressure: toField('pressure'),
+    pointerId: toField('pointerId'),
+    tiltX: toField('tiltX'),
+    tiltY: toField('tiltY'),
+    width: toField('width'),
+    height: toField('height'),
+    twist: toField('twist'),
+    pointerType: toField('pointerType'),
+    isInside,
+  };
+}
+
+/**
+ * `true` for an object that is itself an event target (window/document/element)
+ * and should be attached to directly, rather than unwrapped from a ref/getter.
+ */
+function isTarget(value: unknown): value is EventTarget {
+  return typeof value === 'object' && value !== null && 'addEventListener' in value;
+}
diff --git a/vue/toolkit/src/composables/sensors/usePointerLock/demo.vue b/vue/toolkit/src/composables/sensors/usePointerLock/demo.vue
new file mode 100644
index 0000000..48970f9
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/usePointerLock/demo.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { computed, reactive, useTemplateRef } from 'vue';
+import { usePointerLock } from './index';
+
+const stage = useTemplateRef<HTMLElement>('stage');
+const { isSupported, element, lock, unlock } = usePointerLock(stage);
+
+const isLocked = computed(() => !!element.value);
+
+// Accumulate relative movement deltas while the pointer is locked.
+const pos = reactive({ x: 50, y: 50 });
+
+function onMove(event: PointerEvent) {
+  if (!isLocked.value)
+    return;
+
+  pos.x = clamp(pos.x + event.movementX * 0.25);
+  pos.y = clamp(pos.y + event.movementY * 0.25);
+}
+
+function clamp(value: number) {
+  return Math.min(100, Math.max(0, value));
+}
+
+async function toggle() {
+  if (isLocked.value)
+    await unlock();
+  else
+    await lock(stage);
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <template v-if="isSupported">
+      <div
+        ref="stage"
+        class="relative h-44 cursor-pointer select-none overflow-hidden rounded-xl border bg-(--bg-inset) transition"
+        :class="isLocked ? 'border-(--accent)' : 'border-(--border)'"
+        @click="toggle"
+        @pointermove="onMove"
+      >
+        <div
+          class="pointer-events-none absolute size-5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-(--accent-fg) bg-(--accent) shadow-lg transition-[box-shadow]"
+          :style="{ left: `${pos.x}%`, top: `${pos.y}%` }"
+        />
+        <div class="pointer-events-none absolute inset-0 grid place-items-center">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+            {{ isLocked ? 'Locked — move your mouse' : 'Click to lock pointer' }}
+          </span>
+        </div>
+      </div>
+
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+        :class="isLocked
+          ? 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'
+          : 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'"
+        @click="toggle"
+      >
+        {{ isLocked ? 'Release pointer (Esc)' : 'Lock pointer' }}
+      </button>
+
+      <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2.5">
+        <span class="text-sm text-(--fg-muted)">Lock state</span>
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium transition"
+          :class="isLocked
+            ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+            : 'border border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+        >
+          <span class="size-1.5 rounded-full transition" :class="isLocked ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+          {{ isLocked ? 'Locked' : 'Unlocked' }}
+        </span>
+      </div>
+
+      <p class="text-xs text-(--fg-subtle)">
+        While locked, the cursor is hidden and only relative
+        <code class="font-mono">movementX/Y</code> drives the dot. Press
+        <kbd class="rounded border border-(--border) bg-(--bg-elevated) px-1 font-mono text-[0.7rem]">Esc</kbd>
+        to release.
+      </p>
+    </template>
+
+    <div
+      v-else
+      class="flex flex-col items-center gap-2 rounded-xl border border-amber-500/30 bg-amber-500/10 p-6 text-center"
+    >
+      <span class="text-sm font-medium text-amber-600 dark:text-amber-400">
+        Pointer Lock API not supported
+      </span>
+      <span class="text-xs text-(--fg-subtle)">
+        This browser cannot lock the pointer to an element.
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/usePointerLock/index.test.ts b/vue/toolkit/src/composables/sensors/usePointerLock/index.test.ts
new file mode 100644
index 0000000..ec53885
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/usePointerLock/index.test.ts
@@ -0,0 +1,247 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, shallowRef } from 'vue';
+import { usePointerLock } from '.';
+
+interface FakeDocument {
+  pointerLockElement: Element | null;
+  exitPointerLock: ReturnType<typeof vi.fn>;
+  addEventListener: (type: string, listener: EventListener) => void;
+  removeEventListener: (type: string, listener: EventListener) => void;
+  dispatch: (type: string, event?: Event) => void;
+  /**
+   * Attach a fake `requestPointerLock` to a real DOM node so that calling it
+   * acquires the lock on this fake document (mirroring real browser behavior,
+   * where `requestPointerLock` lives on the Element and updates the document).
+   */
+  bind: (node: Element) => Element;
+  requestPointerLock: ReturnType<typeof vi.fn>;
+}
+
+/**
+ * jsdom does not implement the Pointer Lock API, so we build a minimal fake
+ * document plus an element binder that records `requestPointerLock`/
+ * `exitPointerLock` calls and lets tests drive `pointerlockchange` /
+ * `pointerlockerror` transitions manually.
+ */
+function createFakeDocument(supported = true): FakeDocument {
+  const listeners = new Map<string, Set<EventListener>>();
+
+  const requestPointerLock = vi.fn(function (this: Element) {
+    doc.pointerLockElement = this;
+    doc.dispatch('pointerlockchange');
+  });
+
+  const doc: FakeDocument = {
+    pointerLockElement: null,
+    requestPointerLock,
+    exitPointerLock: vi.fn(() => {
+      doc.pointerLockElement = null;
+      doc.dispatch('pointerlockchange');
+    }),
+    addEventListener(type, listener) {
+      if (!listeners.has(type)) listeners.set(type, new Set());
+      listeners.get(type)!.add(listener);
+    },
+    removeEventListener(type, listener) {
+      listeners.get(type)?.delete(listener);
+    },
+    dispatch(type, event = new Event(type)) {
+      listeners.get(type)?.forEach(fn => fn.call(doc, event));
+    },
+    bind(node) {
+      (node as unknown as { requestPointerLock: () => void }).requestPointerLock = requestPointerLock;
+      return node;
+    },
+  };
+
+  if (!supported)
+    delete (doc as Partial<FakeDocument>).pointerLockElement;
+
+  return doc;
+}
+
+describe(usePointerLock, () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it('reports supported when document exposes pointerLockElement', () => {
+    const doc = createFakeDocument(true);
+    const scope = effectScope();
+    let api: ReturnType<typeof usePointerLock>;
+    scope.run(() => {
+      api = usePointerLock(undefined, { document: doc as unknown as Document });
+    });
+
+    expect(api!.isSupported.value).toBeTruthy();
+
+    scope.stop();
+  });
+
+  it('reports unsupported when the API is missing', () => {
+    const doc = createFakeDocument(false);
+    const scope = effectScope();
+    let api: ReturnType<typeof usePointerLock>;
+    scope.run(() => {
+      api = usePointerLock(undefined, { document: doc as unknown as Document });
+    });
+
+    expect(api!.isSupported.value).toBeFalsy();
+
+    scope.stop();
+  });
+
+  it('is SSR-safe when no document is available', () => {
+    const scope = effectScope();
+    let api: ReturnType<typeof usePointerLock>;
+    scope.run(() => {
+      // Pass an explicit undefined document to emulate SSR (no globals touched).
+      api = usePointerLock(undefined, { document: undefined });
+    });
+
+    expect(api!.isSupported.value).toBeFalsy();
+    expect(api!.element.value).toBeUndefined();
+
+    scope.stop();
+  });
+
+  it('locks an element ref and tracks the locked element', async () => {
+    const doc = createFakeDocument(true);
+    const node = doc.bind(document.createElement('canvas'));
+    const elRef = shallowRef<HTMLElement | null>(node as HTMLElement);
+
+    const scope = effectScope();
+    let api: ReturnType<typeof usePointerLock>;
+    scope.run(() => {
+      api = usePointerLock(elRef, { document: doc as unknown as Document });
+    });
+
+    const locked = await api!.lock(elRef);
+
+    expect(locked).toBe(node);
+    expect(api!.element.value).toBe(node);
+    expect(doc.requestPointerLock).toHaveBeenCalledTimes(1);
+
+    scope.stop();
+  });
+
+  it('locks the event currentTarget, falling back to the configured target', async () => {
+    const doc = createFakeDocument(true);
+    const node = doc.bind(document.createElement('canvas'));
+
+    const scope = effectScope();
+    let api: ReturnType<typeof usePointerLock>;
+    scope.run(() => {
+      api = usePointerLock(undefined, { document: doc as unknown as Document });
+    });
+
+    const event = new Event('click');
+    Object.defineProperty(event, 'currentTarget', { value: node });
+
+    const locked = await api!.lock(event);
+
+    expect(locked).toBe(node);
+    expect(api!.triggerElement.value).toBe(node);
+    expect(api!.element.value).toBe(node);
+
+    scope.stop();
+  });
+
+  it('unlocks and resets the tracked elements', async () => {
+    const doc = createFakeDocument(true);
+    const node = doc.bind(document.createElement('canvas'));
+    const elRef = shallowRef<HTMLElement | null>(node as HTMLElement);
+
+    const scope = effectScope();
+    let api: ReturnType<typeof usePointerLock>;
+    scope.run(() => {
+      api = usePointerLock(elRef, { document: doc as unknown as Document });
+    });
+
+    await api!.lock(elRef);
+    expect(api!.element.value).toBe(node);
+
+    const released = await api!.unlock();
+
+    expect(released).toBeTruthy();
+    expect(doc.exitPointerLock).toHaveBeenCalledTimes(1);
+    expect(api!.element.value).toBeFalsy();
+    expect(api!.triggerElement.value).toBeNull();
+
+    scope.stop();
+  });
+
+  it('unlock returns false when nothing is locked', async () => {
+    const doc = createFakeDocument(true);
+    const scope = effectScope();
+    let api: ReturnType<typeof usePointerLock>;
+    scope.run(() => {
+      api = usePointerLock(undefined, { document: doc as unknown as Document });
+    });
+
+    const released = await api!.unlock();
+
+    expect(released).toBeFalsy();
+    expect(doc.exitPointerLock).not.toHaveBeenCalled();
+
+    scope.stop();
+  });
+
+  it('rejects lock when unsupported', async () => {
+    const doc = createFakeDocument(false);
+    const node = document.createElement('canvas');
+    const elRef = shallowRef<HTMLElement | null>(node);
+
+    const scope = effectScope();
+    let api: ReturnType<typeof usePointerLock>;
+    scope.run(() => {
+      api = usePointerLock(elRef, { document: doc as unknown as Document });
+    });
+
+    await expect(api!.lock(elRef)).rejects.toThrow(/not supported/i);
+
+    scope.stop();
+  });
+
+  it('rejects lock when target is undefined', async () => {
+    const doc = createFakeDocument(true);
+    const elRef = shallowRef<HTMLElement | null>(null);
+
+    const scope = effectScope();
+    let api: ReturnType<typeof usePointerLock>;
+    scope.run(() => {
+      api = usePointerLock(undefined, { document: doc as unknown as Document });
+    });
+
+    await expect(api!.lock(elRef)).rejects.toThrow(/undefined/i);
+
+    scope.stop();
+  });
+
+  it('invokes onError when a pointerlockerror fires for the locked target', async () => {
+    const onError = vi.fn();
+    const doc = createFakeDocument(true);
+    const node = doc.bind(document.createElement('canvas'));
+
+    // requestPointerLock that acquires the lock, then immediately errors.
+    doc.requestPointerLock.mockImplementation(function (this: Element) {
+      doc.pointerLockElement = this;
+      doc.dispatch('pointerlockchange');
+      doc.dispatch('pointerlockerror');
+    });
+
+    const elRef = shallowRef<HTMLElement | null>(node as HTMLElement);
+
+    const scope = effectScope();
+    let api: ReturnType<typeof usePointerLock>;
+    scope.run(() => {
+      api = usePointerLock(elRef, { document: doc as unknown as Document, onError });
+    });
+
+    await api!.lock(elRef);
+
+    expect(onError).toHaveBeenCalledTimes(1);
+
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/sensors/usePointerLock/index.ts b/vue/toolkit/src/composables/sensors/usePointerLock/index.ts
new file mode 100644
index 0000000..f1728a5
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/usePointerLock/index.ts
@@ -0,0 +1,159 @@
+import { noop } from '@robonen/stdlib';
+import { shallowRef } from 'vue';
+import type { ComputedRef, ShallowRef } from 'vue';
+import { defaultDocument } from '@/types';
+import type { ConfigurableDocument } from '@/types';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import { useSupported } from '@/composables/utilities/useSupported';
+import { unrefElement } from '@/composables/component/unrefElement';
+import type { MaybeComputedElementRef, MaybeElement } from '@/composables/component/unrefElement';
+import { until } from '@/composables/watch/until';
+
+export interface UsePointerLockOptions extends ConfigurableDocument {
+  /**
+   * Called when the browser raises a `pointerlockerror` for the locked target.
+   *
+   * `pointerlockerror` fires asynchronously, so throwing here is unrecoverable.
+   * Provide a handler to observe the failure instead.
+   *
+   * @default noop
+   */
+  onError?: (event: Event) => void;
+}
+
+export interface UsePointerLockReturn {
+  /**
+   * Whether the Pointer Lock API is supported (SSR-safe).
+   */
+  isSupported: ComputedRef<boolean>;
+  /**
+   * The element that currently holds the pointer lock, or `null` when unlocked.
+   */
+  element: ShallowRef<MaybeElement>;
+  /**
+   * The element whose event triggered the most recent `lock` call (the
+   * `event.currentTarget`), or `null` when locked programmatically / unlocked.
+   */
+  triggerElement: ShallowRef<MaybeElement>;
+  /**
+   * Request pointer lock. Accepts either a DOM `Event` (locks its
+   * `currentTarget`, or the composable's `target` fallback) or an element ref.
+   * Resolves with the locked element once `pointerlockchange` confirms it.
+   */
+  lock: (eventOrTarget: MaybeComputedElementRef | Event) => Promise<MaybeElement>;
+  /**
+   * Release the pointer lock. Resolves `true` once released, `false` if it was
+   * not locked.
+   */
+  unlock: () => Promise<boolean>;
+}
+
+/**
+ * @name usePointerLock
+ * @category Sensors
+ * @description Reactive [Pointer Lock API](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API). Locks the mouse cursor to an element and tracks the locked element reactively.
+ *
+ * @param {MaybeComputedElementRef} [target] Optional default element to lock when `lock` receives an `Event`
+ * @param {UsePointerLockOptions} [options={}] Options
+ * @returns {UsePointerLockReturn} `{ isSupported, element, triggerElement, lock, unlock }`
+ *
+ * @example
+ * const el = useTemplateRef<HTMLElement>('el');
+ * const { lock, unlock, element } = usePointerLock(el);
+ * // lock on user gesture
+ * function onClick() { lock(el); }
+ *
+ * @example
+ * // lock the element that received the event
+ * const { lock } = usePointerLock();
+ * function onDblClick(e: MouseEvent) { lock(e); }
+ *
+ * @since 0.0.15
+ */
+export function usePointerLock(
+  target?: MaybeComputedElementRef,
+  options: UsePointerLockOptions = {},
+): UsePointerLockReturn {
+  const { document = defaultDocument, onError = noop } = options;
+
+  const isSupported = useSupported(() => !!document && 'pointerLockElement' in document);
+
+  const element = shallowRef<MaybeElement>();
+  const triggerElement = shallowRef<MaybeElement>();
+
+  // The element we asked the browser to lock; compared against
+  // `pointerLockElement` so we only react to our own lock transitions.
+  let targetElement: MaybeElement;
+
+  if (isSupported.value) {
+    const listenerOptions = { passive: true } as const;
+
+    useEventListener(
+      document,
+      'pointerlockchange',
+      () => {
+        const currentElement = document!.pointerLockElement ?? element.value;
+
+        if (!targetElement || currentElement !== targetElement)
+          return;
+
+        element.value = document!.pointerLockElement;
+
+        if (!element.value)
+          targetElement = triggerElement.value = null;
+      },
+      listenerOptions,
+    );
+
+    useEventListener(
+      document,
+      'pointerlockerror',
+      (event: Event) => {
+        const currentElement = document!.pointerLockElement ?? element.value;
+
+        if (targetElement && currentElement === targetElement)
+          onError(event);
+      },
+      listenerOptions,
+    );
+  }
+
+  async function lock(eventOrTarget: MaybeComputedElementRef | Event): Promise<MaybeElement> {
+    if (!isSupported.value)
+      throw new Error('Pointer Lock API is not supported by your browser.');
+
+    if (eventOrTarget instanceof Event) {
+      triggerElement.value = eventOrTarget.currentTarget as MaybeElement;
+      targetElement = unrefElement(target) ?? triggerElement.value;
+    }
+    else {
+      triggerElement.value = null;
+      targetElement = unrefElement(eventOrTarget);
+    }
+
+    if (!targetElement)
+      throw new Error('Target element undefined.');
+
+    (targetElement as Element).requestPointerLock();
+
+    return await until(element).toBe(targetElement);
+  }
+
+  async function unlock(): Promise<boolean> {
+    if (!element.value)
+      return false;
+
+    document!.exitPointerLock();
+    await until(element).toBeNull();
+
+    return true;
+  }
+
+  return {
+    isSupported,
+    element,
+    triggerElement,
+    lock,
+    unlock,
+  };
+}
diff --git a/vue/toolkit/src/composables/sensors/usePointerSwipe/demo.vue b/vue/toolkit/src/composables/sensors/usePointerSwipe/demo.vue
new file mode 100644
index 0000000..cb13864
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/usePointerSwipe/demo.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { computed, ref, useTemplateRef } from 'vue';
+import { usePointerSwipe } from './index';
+
+const surface = useTemplateRef<HTMLElement>('surface');
+
+const lastDirection = ref<string>('—');
+const swipeCount = ref(0);
+
+const { isSwiping, direction, distanceX, distanceY } = usePointerSwipe(surface, {
+  threshold: 40,
+  onSwipeEnd(_event, dir) {
+    if (dir !== 'none') {
+      lastDirection.value = dir;
+      swipeCount.value++;
+    }
+  },
+});
+
+const arrows: Record<string, string> = {
+  up: '↑',
+  down: '↓',
+  left: '←',
+  right: '→',
+  none: '·',
+};
+
+// Follow the live drag while swiping, then snap back.
+const cardStyle = computed(() => {
+  if (!isSwiping.value)
+    return { transform: 'translate(0, 0)' };
+
+  return { transform: `translate(${-distanceX.value}px, ${-distanceY.value}px)` };
+});
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      ref="surface"
+      class="relative grid h-44 touch-none place-items-center overflow-hidden rounded-xl border border-(--border) bg-(--bg-inset) select-none"
+    >
+      <div
+        class="grid size-24 place-items-center rounded-xl border border-(--border-strong) bg-(--bg-elevated) shadow-lg"
+        :class="isSwiping ? 'transition-none' : 'transition-transform duration-300 ease-out'"
+        :style="cardStyle"
+      >
+        <span class="font-mono text-3xl text-(--fg)">{{ arrows[direction] }}</span>
+      </div>
+      <span class="pointer-events-none absolute bottom-2 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Drag in any direction
+      </span>
+    </div>
+
+    <div class="grid grid-cols-2 gap-2">
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Direction</div>
+        <div class="mt-1 font-mono text-sm capitalize text-(--fg)">{{ direction }}</div>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Swiping</div>
+        <div
+          class="mt-1 font-mono text-sm"
+          :class="isSwiping ? 'text-emerald-600 dark:text-emerald-400' : 'text-(--fg-muted)'"
+        >
+          {{ isSwiping ? 'active' : 'idle' }}
+        </div>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm tabular-nums text-(--fg)">
+        <div class="font-sans text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Distance X / Y</div>
+        <div class="mt-1">{{ Math.round(distanceX) }} / {{ Math.round(distanceY) }}</div>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Last swipe</div>
+        <div class="mt-1 font-mono text-sm capitalize text-(--fg)">
+          {{ lastDirection }}
+          <span v-if="swipeCount" class="text-(--fg-subtle)">&times;{{ swipeCount }}</span>
+        </div>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Threshold is <code class="font-mono">40px</code> &mdash; shorter drags resolve to
+      <code class="font-mono">none</code>.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/usePointerSwipe/index.test.ts b/vue/toolkit/src/composables/sensors/usePointerSwipe/index.test.ts
new file mode 100644
index 0000000..8b10dcd
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/usePointerSwipe/index.test.ts
@@ -0,0 +1,255 @@
+import { describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, shallowRef } from 'vue';
+import { usePointerSwipe } from '.';
+
+interface PointerProps {
+  clientX?: number;
+  clientY?: number;
+  pointerId?: number;
+  pointerType?: string;
+  buttons?: number;
+}
+
+function dispatchPointer(target: EventTarget, type: string, props: PointerProps = {}) {
+  const event = new Event(type, { bubbles: true });
+  const merged: PointerProps = { buttons: 1, pointerId: 1, pointerType: 'mouse', ...props };
+  for (const [key, value] of Object.entries(merged))
+    Object.defineProperty(event, key, { value, configurable: true });
+  // Provide a target that supports pointer capture (jsdom lacks it).
+  Object.defineProperty(event, 'target', { value: target, configurable: true });
+  target.dispatchEvent(event);
+  return event;
+}
+
+function createTarget() {
+  const el = document.createElement('div');
+  // jsdom does not implement setPointerCapture; stub it to a noop spy.
+  (el as any).setPointerCapture = vi.fn();
+  document.body.appendChild(el);
+  return el;
+}
+
+describe(usePointerSwipe, () => {
+  it('starts from the default state', () => {
+    const el = createTarget();
+    const scope = effectScope();
+    let swipe: ReturnType<typeof usePointerSwipe>;
+    scope.run(() => {
+      swipe = usePointerSwipe(el);
+    });
+
+    expect(swipe!.isSwiping.value).toBeFalsy();
+    expect(swipe!.direction.value).toBe('none');
+    expect(swipe!.posStart.x).toBe(0);
+    expect(swipe!.posStart.y).toBe(0);
+    expect(swipe!.posEnd.x).toBe(0);
+    expect(swipe!.posEnd.y).toBe(0);
+    expect(swipe!.distanceX.value).toBe(0);
+    expect(swipe!.distanceY.value).toBe(0);
+    scope.stop();
+  });
+
+  it('records start position and fires onSwipeStart on pointerdown', async () => {
+    const el = createTarget();
+    const onSwipeStart = vi.fn();
+    const scope = effectScope();
+    let swipe: ReturnType<typeof usePointerSwipe>;
+    scope.run(() => {
+      swipe = usePointerSwipe(el, { onSwipeStart });
+    });
+
+    dispatchPointer(el, 'pointerdown', { clientX: 10, clientY: 20 });
+    await nextTick();
+
+    expect(swipe!.posStart.x).toBe(10);
+    expect(swipe!.posStart.y).toBe(20);
+    expect(swipe!.posEnd.x).toBe(10);
+    expect(swipe!.posEnd.y).toBe(20);
+    expect(onSwipeStart).toHaveBeenCalledTimes(1);
+    expect((el as any).setPointerCapture).toHaveBeenCalledWith(1);
+    scope.stop();
+  });
+
+  it('detects a horizontal swipe (left) once threshold is exceeded', async () => {
+    const el = createTarget();
+    const onSwipe = vi.fn();
+    const onSwipeEnd = vi.fn();
+    const scope = effectScope();
+    let swipe: ReturnType<typeof usePointerSwipe>;
+    scope.run(() => {
+      swipe = usePointerSwipe(el, { threshold: 50, onSwipe, onSwipeEnd });
+    });
+
+    dispatchPointer(el, 'pointerdown', { clientX: 100, clientY: 100 });
+    await nextTick();
+    expect(swipe!.isSwiping.value).toBeFalsy();
+
+    // small move, under threshold
+    dispatchPointer(el, 'pointermove', { clientX: 90, clientY: 100 });
+    await nextTick();
+    expect(swipe!.isSwiping.value).toBeFalsy();
+    expect(onSwipe).not.toHaveBeenCalled();
+
+    // move left past threshold (posStart.x - posEnd.x = 100 - 40 = 60 > 50)
+    dispatchPointer(el, 'pointermove', { clientX: 40, clientY: 100 });
+    await nextTick();
+    expect(swipe!.isSwiping.value).toBeTruthy();
+    expect(swipe!.distanceX.value).toBe(60);
+    expect(swipe!.direction.value).toBe('left');
+    expect(onSwipe).toHaveBeenCalled();
+
+    dispatchPointer(el, 'pointerup', { clientX: 40, clientY: 100, buttons: 0 });
+    await nextTick();
+    expect(swipe!.isSwiping.value).toBeFalsy();
+    expect(onSwipeEnd).toHaveBeenCalledTimes(1);
+    expect(onSwipeEnd.mock.calls[0]![1]).toBe('left');
+    scope.stop();
+  });
+
+  it('resolves right / up / down directions', async () => {
+    const el = createTarget();
+    const scope = effectScope();
+    let swipe: ReturnType<typeof usePointerSwipe>;
+    scope.run(() => {
+      swipe = usePointerSwipe(el, { threshold: 10 });
+    });
+
+    // right: posStart.x - posEnd.x < 0
+    dispatchPointer(el, 'pointerdown', { clientX: 0, clientY: 0 });
+    dispatchPointer(el, 'pointermove', { clientX: 100, clientY: 0 });
+    await nextTick();
+    expect(swipe!.direction.value).toBe('right');
+    dispatchPointer(el, 'pointerup', { clientX: 100, clientY: 0, buttons: 0 });
+    await nextTick();
+
+    // up: posStart.y - posEnd.y > 0
+    dispatchPointer(el, 'pointerdown', { clientX: 0, clientY: 100 });
+    dispatchPointer(el, 'pointermove', { clientX: 0, clientY: 0 });
+    await nextTick();
+    expect(swipe!.direction.value).toBe('up');
+    dispatchPointer(el, 'pointerup', { clientX: 0, clientY: 0, buttons: 0 });
+    await nextTick();
+
+    // down: posStart.y - posEnd.y < 0
+    dispatchPointer(el, 'pointerdown', { clientX: 0, clientY: 0 });
+    dispatchPointer(el, 'pointermove', { clientX: 0, clientY: 100 });
+    await nextTick();
+    expect(swipe!.direction.value).toBe('down');
+    scope.stop();
+  });
+
+  it('ignores pointermove when no pointer is down', async () => {
+    const el = createTarget();
+    const onSwipe = vi.fn();
+    const scope = effectScope();
+    let swipe: ReturnType<typeof usePointerSwipe>;
+    scope.run(() => {
+      swipe = usePointerSwipe(el, { threshold: 10, onSwipe });
+    });
+
+    dispatchPointer(el, 'pointermove', { clientX: 200, clientY: 200 });
+    await nextTick();
+
+    expect(swipe!.posEnd.x).toBe(0);
+    expect(swipe!.isSwiping.value).toBeFalsy();
+    expect(onSwipe).not.toHaveBeenCalled();
+    scope.stop();
+  });
+
+  it('filters by pointerTypes', async () => {
+    const el = createTarget();
+    const scope = effectScope();
+    let swipe: ReturnType<typeof usePointerSwipe>;
+    scope.run(() => {
+      swipe = usePointerSwipe(el, { threshold: 10, pointerTypes: ['touch'] });
+    });
+
+    // mouse rejected
+    dispatchPointer(el, 'pointerdown', { clientX: 0, clientY: 0, pointerType: 'mouse' });
+    dispatchPointer(el, 'pointermove', { clientX: 100, clientY: 0, pointerType: 'mouse' });
+    await nextTick();
+    expect(swipe!.posStart.x).toBe(0);
+    expect(swipe!.isSwiping.value).toBeFalsy();
+
+    // touch accepted
+    dispatchPointer(el, 'pointerdown', { clientX: 0, clientY: 0, pointerType: 'touch' });
+    dispatchPointer(el, 'pointermove', { clientX: 100, clientY: 0, pointerType: 'touch' });
+    await nextTick();
+    expect(swipe!.isSwiping.value).toBeTruthy();
+    expect(swipe!.direction.value).toBe('right');
+    scope.stop();
+  });
+
+  it('stop() removes the listeners', async () => {
+    const el = createTarget();
+    const removeSpy = vi.spyOn(el, 'removeEventListener');
+    const scope = effectScope();
+    let swipe: ReturnType<typeof usePointerSwipe>;
+    scope.run(() => {
+      swipe = usePointerSwipe(el, { threshold: 10 });
+    });
+
+    swipe!.stop();
+
+    expect(removeSpy.mock.calls.some(([name]) => name === 'pointerdown')).toBeTruthy();
+    expect(removeSpy.mock.calls.some(([name]) => name === 'pointermove')).toBeTruthy();
+
+    // after stop, further events have no effect
+    dispatchPointer(el, 'pointerdown', { clientX: 0, clientY: 0 });
+    dispatchPointer(el, 'pointermove', { clientX: 100, clientY: 0 });
+    await nextTick();
+    expect(swipe!.isSwiping.value).toBeFalsy();
+
+    removeSpy.mockRestore();
+    scope.stop();
+  });
+
+  it('attaches passive listeners', () => {
+    const el = createTarget();
+    const addSpy = vi.spyOn(el, 'addEventListener');
+    const scope = effectScope();
+    scope.run(() => {
+      usePointerSwipe(el);
+    });
+
+    const downCall = addSpy.mock.calls.find(([name]) => name === 'pointerdown');
+    expect(downCall).toBeDefined();
+    expect((downCall![2] as AddEventListenerOptions).passive).toBeTruthy();
+
+    addSpy.mockRestore();
+    scope.stop();
+  });
+
+  it('re-binds listeners when the target ref changes', async () => {
+    const elRef = shallowRef<HTMLElement | undefined>(undefined);
+    const scope = effectScope();
+    let swipe: ReturnType<typeof usePointerSwipe>;
+    scope.run(() => {
+      swipe = usePointerSwipe(elRef, { threshold: 10 });
+    });
+
+    const el = createTarget();
+    elRef.value = el;
+    await nextTick();
+
+    dispatchPointer(el, 'pointerdown', { clientX: 0, clientY: 0 });
+    dispatchPointer(el, 'pointermove', { clientX: 100, clientY: 0 });
+    await nextTick();
+    expect(swipe!.isSwiping.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('does nothing when window is unavailable (SSR)', () => {
+    const el = createTarget();
+    const scope = effectScope();
+    let swipe: ReturnType<typeof usePointerSwipe>;
+    scope.run(() => {
+      swipe = usePointerSwipe(el, { window: undefined });
+    });
+
+    expect(swipe!.isSwiping.value).toBeFalsy();
+    expect(swipe!.direction.value).toBe('none');
+    expect(() => swipe!.stop()).not.toThrow();
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/sensors/usePointerSwipe/index.ts b/vue/toolkit/src/composables/sensors/usePointerSwipe/index.ts
new file mode 100644
index 0000000..f5d7254
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/usePointerSwipe/index.ts
@@ -0,0 +1,246 @@
+import { computed, reactive, shallowReadonly, shallowRef } from 'vue';
+import type { ComputedRef, DeepReadonly, ShallowRef } from 'vue';
+import { defaultWindow } from '@/types';
+import type { ConfigurableWindow } from '@/types';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import { tryOnMounted } from '@/composables/lifecycle/tryOnMounted';
+import { unrefElement } from '@/composables/component/unrefElement';
+import type { MaybeComputedElementRef } from '@/composables/component/unrefElement';
+import type { UsePointerType } from '@/composables/sensors/usePointer';
+
+export type UsePointerSwipeDirection = 'up' | 'down' | 'left' | 'right' | 'none';
+
+export interface UsePointerSwipePosition {
+  x: number;
+  y: number;
+}
+
+export interface UsePointerSwipeOptions extends ConfigurableWindow {
+  /**
+   * Minimum distance in pixels travelled before a swipe is registered.
+   *
+   * @default 50
+   */
+  threshold?: number;
+
+  /**
+   * Pointer types that should be listened to.
+   *
+   * When omitted, any primary-button press (or a released pointer) is accepted.
+   *
+   * @default undefined
+   */
+  pointerTypes?: UsePointerType[];
+
+  /**
+   * Disable text selection while swiping (sets `user-select: none` on the target).
+   *
+   * @default false
+   */
+  disableTextSelect?: boolean;
+
+  /**
+   * Callback fired on the initial pointer down, before the threshold is met.
+   */
+  onSwipeStart?: (event: PointerEvent) => void;
+
+  /**
+   * Callback fired on every pointer move once the swipe is active.
+   */
+  onSwipe?: (event: PointerEvent) => void;
+
+  /**
+   * Callback fired when the pointer is released, with the resolved direction.
+   */
+  onSwipeEnd?: (event: PointerEvent, direction: UsePointerSwipeDirection) => void;
+}
+
+export interface UsePointerSwipeReturn {
+  /**
+   * Whether a swipe is currently in progress (threshold exceeded).
+   */
+  isSwiping: Readonly<ShallowRef<boolean>>;
+
+  /**
+   * The resolved swipe direction.
+   */
+  direction: ComputedRef<UsePointerSwipeDirection>;
+
+  /**
+   * Coordinates where the pointer went down.
+   */
+  posStart: DeepReadonly<UsePointerSwipePosition>;
+
+  /**
+   * Coordinates of the latest pointer position.
+   */
+  posEnd: DeepReadonly<UsePointerSwipePosition>;
+
+  /**
+   * Signed horizontal distance travelled (`posStart.x - posEnd.x`).
+   */
+  distanceX: ComputedRef<number>;
+
+  /**
+   * Signed vertical distance travelled (`posStart.y - posEnd.y`).
+   */
+  distanceY: ComputedRef<number>;
+
+  /**
+   * Tear down all listeners.
+   */
+  stop: () => void;
+}
+
+/**
+ * @name usePointerSwipe
+ * @category Sensors
+ * @description Detect swipe gestures via PointerEvents on a target element.
+ * Works for mouse, touch and pen with a single unified event model, tracking
+ * start/end coordinates, the active state and the resolved direction.
+ *
+ * @param {MaybeComputedElementRef} target - Element ref, getter, or instance to listen on
+ * @param {UsePointerSwipeOptions} [options={}] - Threshold, pointer types and lifecycle callbacks
+ * @returns {UsePointerSwipeReturn} Reactive swipe state and a `stop` teardown function
+ *
+ * @example
+ * const el = useTemplateRef<HTMLElement>('el');
+ * const { isSwiping, direction, distanceX, distanceY } = usePointerSwipe(el, {
+ *   threshold: 30,
+ *   onSwipeEnd(e, dir) { console.log(dir); },
+ * });
+ *
+ * @since 0.0.15
+ */
+export function usePointerSwipe(
+  target: MaybeComputedElementRef,
+  options: UsePointerSwipeOptions = {},
+): UsePointerSwipeReturn {
+  const {
+    threshold = 50,
+    pointerTypes,
+    disableTextSelect = false,
+    onSwipe,
+    onSwipeEnd,
+    onSwipeStart,
+    window = defaultWindow,
+  } = options;
+
+  const posStart = reactive<UsePointerSwipePosition>({ x: 0, y: 0 });
+  const posEnd = reactive<UsePointerSwipePosition>({ x: 0, y: 0 });
+
+  // distanceX/distanceY follow the start-minus-end convention used for direction math.
+  const distanceX = computed(() => posStart.x - posEnd.x);
+  const distanceY = computed(() => posStart.y - posEnd.y);
+
+  const { max, abs } = Math;
+  const isThresholdExceeded = computed(() => max(abs(distanceX.value), abs(distanceY.value)) >= threshold);
+
+  const isSwiping = shallowRef(false);
+  const isPointerDown = shallowRef(false);
+
+  const direction = computed<UsePointerSwipeDirection>(() => {
+    if (!isThresholdExceeded.value)
+      return 'none';
+
+    if (abs(distanceX.value) > abs(distanceY.value))
+      return distanceX.value > 0 ? 'left' : 'right';
+
+    return distanceY.value > 0 ? 'up' : 'down';
+  });
+
+  const updatePosStart = (x: number, y: number): void => {
+    posStart.x = x;
+    posStart.y = y;
+  };
+
+  const updatePosEnd = (x: number, y: number): void => {
+    posEnd.x = x;
+    posEnd.y = y;
+  };
+
+  const eventIsAllowed = (event: PointerEvent): boolean => {
+    if (pointerTypes)
+      return pointerTypes.includes(event.pointerType as UsePointerType);
+
+    // No explicit filter: accept a primary-button press or a released pointer.
+    return event.buttons === 0 || event.buttons === 1;
+  };
+
+  const onPointerDown = (event: PointerEvent): void => {
+    if (!eventIsAllowed(event))
+      return;
+
+    isPointerDown.value = true;
+    // Retarget future pointer events to the element until pointerup/cancel.
+    (event.target as Element | null)?.setPointerCapture?.(event.pointerId);
+
+    const { clientX: x, clientY: y } = event;
+    updatePosStart(x, y);
+    updatePosEnd(x, y);
+    onSwipeStart?.(event);
+  };
+
+  const onPointerMove = (event: PointerEvent): void => {
+    if (!isPointerDown.value || !eventIsAllowed(event))
+      return;
+
+    updatePosEnd(event.clientX, event.clientY);
+
+    if (!isSwiping.value && isThresholdExceeded.value)
+      isSwiping.value = true;
+
+    if (isSwiping.value)
+      onSwipe?.(event);
+  };
+
+  const onPointerEnd = (event: PointerEvent): void => {
+    if (!eventIsAllowed(event))
+      return;
+
+    if (isSwiping.value)
+      onSwipeEnd?.(event, direction.value);
+
+    isPointerDown.value = false;
+    isSwiping.value = false;
+  };
+
+  // Resolve the listen target lazily so listeners re-bind when the underlying
+  // element changes (template refs resolve after mount).
+  const listenTarget = (): EventTarget | null | undefined =>
+    unrefElement(target) as EventTarget | null | undefined;
+
+  const listenerOptions = { passive: true };
+
+  const stops = window
+    ? [
+        useEventListener(listenTarget, 'pointerdown', onPointerDown as (e: Event) => void, listenerOptions),
+        useEventListener(listenTarget, 'pointermove', onPointerMove as (e: Event) => void, listenerOptions),
+        useEventListener(listenTarget, ['pointerup', 'pointercancel'], onPointerEnd as (e: Event) => void, listenerOptions),
+      ]
+    : [];
+
+  tryOnMounted(() => {
+    const el = unrefElement(target) as HTMLElement | null | undefined;
+    // Allow vertical scrolling, disable horizontal scrolling by touch.
+    el?.style?.setProperty('touch-action', 'pan-y');
+
+    if (disableTextSelect) {
+      el?.style?.setProperty('-webkit-user-select', 'none');
+      el?.style?.setProperty('-ms-user-select', 'none');
+      el?.style?.setProperty('user-select', 'none');
+    }
+  });
+
+  const stop = (): void => stops.forEach(s => s());
+
+  return {
+    isSwiping: shallowReadonly(isSwiping),
+    direction: shallowReadonly(direction) as ComputedRef<UsePointerSwipeDirection>,
+    posStart: shallowReadonly(posStart),
+    posEnd: shallowReadonly(posEnd),
+    distanceX,
+    distanceY,
+    stop,
+  };
+}
diff --git a/vue/toolkit/src/composables/sensors/useScreenOrientation/demo.vue b/vue/toolkit/src/composables/sensors/useScreenOrientation/demo.vue
new file mode 100644
index 0000000..7245ebe
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useScreenOrientation/demo.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useScreenOrientation } from './index';
+import type { OrientationLockType } from './index';
+
+const { isSupported, orientation, angle, lockOrientation, unlockOrientation } = useScreenOrientation();
+
+const error = ref<string | null>(null);
+const locked = ref<OrientationLockType | null>(null);
+
+const locks: OrientationLockType[] = ['portrait', 'landscape', 'any'];
+
+const isLandscape = computed(() => orientation.value?.startsWith('landscape') ?? false);
+
+async function applyLock(type: OrientationLockType) {
+  error.value = null;
+  try {
+    await lockOrientation(type);
+    locked.value = type;
+  }
+  catch (err) {
+    error.value = err instanceof Error ? err.message : 'Lock failed';
+  }
+}
+
+function release() {
+  unlockOrientation();
+  locked.value = null;
+  error.value = null;
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <template v-if="isSupported">
+      <div class="grid place-items-center rounded-xl border border-(--border) bg-(--bg-inset) p-6">
+        <div
+          class="flex items-center justify-center rounded-lg border-2 border-(--border-strong) bg-(--bg-elevated) text-(--fg-subtle) transition-all duration-300"
+          :class="isLandscape ? 'h-16 w-28' : 'h-28 w-16'"
+        >
+          <div class="size-2 rounded-full bg-(--accent)" />
+        </div>
+      </div>
+
+      <div class="grid grid-cols-2 gap-2">
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+          <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Orientation</div>
+          <div class="mt-1 font-mono text-sm text-(--fg)">{{ orientation ?? '—' }}</div>
+        </div>
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm tabular-nums text-(--fg)">
+          <div class="font-sans text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Angle</div>
+          <div class="mt-1">{{ angle }}&deg;</div>
+        </div>
+      </div>
+
+      <div class="space-y-2">
+        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Lock to</div>
+        <div class="flex gap-2">
+          <button
+            v-for="type in locks"
+            :key="type"
+            type="button"
+            class="inline-flex flex-1 items-center justify-center rounded-lg border px-3 py-1.5 text-sm font-medium capitalize transition active:scale-[0.98] cursor-pointer"
+            :class="locked === type
+              ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
+              : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+            @click="applyLock(type)"
+          >
+            {{ type }}
+          </button>
+        </div>
+        <button
+          type="button"
+          :disabled="!locked"
+          class="inline-flex w-full items-center justify-center rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          @click="release"
+        >
+          Unlock
+        </button>
+      </div>
+
+      <p v-if="error" class="rounded-lg border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-xs text-amber-600 dark:text-amber-400">
+        {{ error }}
+      </p>
+      <p v-else class="text-xs text-(--fg-subtle)">
+        Locking requires fullscreen on most devices and is typically a no-op on desktop.
+      </p>
+    </template>
+
+    <div
+      v-else
+      class="flex flex-col items-center gap-2 rounded-xl border border-amber-500/30 bg-amber-500/10 p-6 text-center"
+    >
+      <span class="text-sm font-medium text-amber-600 dark:text-amber-400">
+        Screen Orientation API not supported
+      </span>
+      <span class="text-xs text-(--fg-subtle)">
+        This browser does not expose <code class="font-mono">screen.orientation</code>.
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useScreenOrientation/index.test.ts b/vue/toolkit/src/composables/sensors/useScreenOrientation/index.test.ts
new file mode 100644
index 0000000..b301521
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useScreenOrientation/index.test.ts
@@ -0,0 +1,188 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick } from 'vue';
+import { useScreenOrientation } from '.';
+import type { OrientationLockType, OrientationType } from '.';
+
+type Listener = (event: Event) => void;
+
+interface StubScreenOrientation {
+  type: OrientationType;
+  angle: number;
+  lock: ReturnType<typeof vi.fn>;
+  unlock: ReturnType<typeof vi.fn>;
+  addEventListener: (type: string, cb: Listener) => void;
+  removeEventListener: (type: string, cb: Listener) => void;
+  dispatch: (type: OrientationType, angle: number) => void;
+}
+
+function makeScreenOrientation(
+  type: OrientationType = 'portrait-primary',
+  angle = 0,
+): StubScreenOrientation {
+  const listeners = new Set<Listener>();
+
+  const so: StubScreenOrientation = {
+    type,
+    angle,
+    lock: vi.fn(() => Promise.resolve()),
+    unlock: vi.fn(),
+    addEventListener: (_: string, cb: Listener) => listeners.add(cb),
+    removeEventListener: (_: string, cb: Listener) => listeners.delete(cb),
+    dispatch(nextType: OrientationType, nextAngle: number) {
+      so.type = nextType;
+      so.angle = nextAngle;
+      for (const cb of listeners) cb(new Event('change'));
+    },
+  };
+
+  return so;
+}
+
+/** A window stub exposing `screen.orientation` + an event target for `orientationchange`. */
+function makeWindowStub(so?: StubScreenOrientation): Window {
+  const winListeners = new Set<Listener>();
+  return {
+    screen: so ? { orientation: so } : {},
+    addEventListener: (_: string, cb: Listener) => winListeners.add(cb),
+    removeEventListener: (_: string, cb: Listener) => winListeners.delete(cb),
+  } as unknown as Window;
+}
+
+describe(useScreenOrientation, () => {
+  beforeEach(() => {
+    // Force the SSR / unsupported branch unless a window is passed via options.
+    vi.stubGlobal('screen', undefined);
+  });
+  afterEach(() => vi.unstubAllGlobals());
+
+  it('reports supported when screen.orientation is present', async () => {
+    const window = makeWindowStub(makeScreenOrientation());
+    const scope = effectScope();
+    let result: ReturnType<typeof useScreenOrientation>;
+    scope.run(() => {
+      result = useScreenOrientation({ window });
+    });
+    await nextTick();
+    expect(result!.isSupported.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('reflects the initial orientation type and angle', async () => {
+    const so = makeScreenOrientation('landscape-primary', 90);
+    const window = makeWindowStub(so);
+    const scope = effectScope();
+    let result: ReturnType<typeof useScreenOrientation>;
+    scope.run(() => {
+      result = useScreenOrientation({ window });
+    });
+    await nextTick();
+    expect(result!.orientation.value).toBe('landscape-primary');
+    expect(result!.angle.value).toBe(90);
+    scope.stop();
+  });
+
+  it('updates on the screen.orientation change event', async () => {
+    const so = makeScreenOrientation('portrait-primary', 0);
+    const window = makeWindowStub(so);
+    const scope = effectScope();
+    let result: ReturnType<typeof useScreenOrientation>;
+    scope.run(() => {
+      result = useScreenOrientation({ window });
+    });
+    await nextTick();
+    expect(result!.orientation.value).toBe('portrait-primary');
+
+    so.dispatch('landscape-secondary', 270);
+    await nextTick();
+    expect(result!.orientation.value).toBe('landscape-secondary');
+    expect(result!.angle.value).toBe(270);
+
+    scope.stop();
+  });
+
+  it('lockOrientation delegates to screen.orientation.lock', async () => {
+    const so = makeScreenOrientation();
+    const window = makeWindowStub(so);
+    const scope = effectScope();
+    let result: ReturnType<typeof useScreenOrientation>;
+    scope.run(() => {
+      result = useScreenOrientation({ window });
+    });
+    await nextTick();
+
+    const type: OrientationLockType = 'landscape';
+    await expect(result!.lockOrientation(type)).resolves.toBeUndefined();
+    expect(so.lock).toHaveBeenCalledWith('landscape');
+
+    scope.stop();
+  });
+
+  it('unlockOrientation delegates to screen.orientation.unlock', async () => {
+    const so = makeScreenOrientation();
+    const window = makeWindowStub(so);
+    const scope = effectScope();
+    let result: ReturnType<typeof useScreenOrientation>;
+    scope.run(() => {
+      result = useScreenOrientation({ window });
+    });
+    await nextTick();
+
+    result!.unlockOrientation();
+    expect(so.unlock).toHaveBeenCalledTimes(1);
+
+    scope.stop();
+  });
+
+  it('stops updating after the scope is disposed', async () => {
+    const so = makeScreenOrientation('portrait-primary', 0);
+    const window = makeWindowStub(so);
+    const scope = effectScope();
+    let result: ReturnType<typeof useScreenOrientation>;
+    scope.run(() => {
+      result = useScreenOrientation({ window });
+    });
+    await nextTick();
+
+    scope.stop();
+
+    so.dispatch('landscape-primary', 90);
+    await nextTick();
+    // Listener removed on dispose, so the value should not have changed.
+    expect(result!.orientation.value).toBe('portrait-primary');
+    expect(result!.angle.value).toBe(0);
+  });
+
+  it('is unsupported and safe when no window is available (SSR)', async () => {
+    // Pass an explicit falsy window: a destructuring default only fires for
+    // `undefined`, so `null` lets us exercise the genuine no-window branch.
+    const scope = effectScope();
+    let result: ReturnType<typeof useScreenOrientation>;
+    scope.run(() => {
+      result = useScreenOrientation({ window: null as unknown as Window });
+    });
+    await nextTick();
+
+    expect(result!.isSupported.value).toBeFalsy();
+    expect(result!.orientation.value).toBeUndefined();
+    expect(result!.angle.value).toBe(0);
+    expect(() => result!.unlockOrientation()).not.toThrow();
+    await expect(result!.lockOrientation('any')).rejects.toThrow('Not supported');
+
+    scope.stop();
+  });
+
+  it('is unsupported when screen lacks orientation', async () => {
+    const window = makeWindowStub();
+    const scope = effectScope();
+    let result: ReturnType<typeof useScreenOrientation>;
+    scope.run(() => {
+      result = useScreenOrientation({ window });
+    });
+    await nextTick();
+
+    expect(result!.isSupported.value).toBeFalsy();
+    await expect(result!.lockOrientation('portrait')).rejects.toThrow('Not supported');
+
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/sensors/useScreenOrientation/index.ts b/vue/toolkit/src/composables/sensors/useScreenOrientation/index.ts
new file mode 100644
index 0000000..d5b01cc
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useScreenOrientation/index.ts
@@ -0,0 +1,121 @@
+import { shallowRef } from 'vue';
+import type { ComputedRef, ShallowRef } from 'vue';
+import { isFunction } from '@robonen/stdlib';
+import { defaultWindow } from '@/types';
+import type { ConfigurableWindow } from '@/types';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import { useSupported } from '@/composables/utilities/useSupported';
+
+export type OrientationType
+  = | 'portrait-primary'
+    | 'portrait-secondary'
+    | 'landscape-primary'
+    | 'landscape-secondary';
+
+export type OrientationLockType
+  = | 'any'
+    | 'natural'
+    | 'landscape'
+    | 'portrait'
+    | 'portrait-primary'
+    | 'portrait-secondary'
+    | 'landscape-primary'
+    | 'landscape-secondary';
+
+/**
+ * Subset of the `ScreenOrientation` interface that we interact with.
+ */
+export interface ScreenOrientation extends EventTarget {
+  readonly type: OrientationType;
+  readonly angle: number;
+  lock: (orientation: OrientationLockType) => Promise<void>;
+  unlock: () => void;
+}
+
+export interface UseScreenOrientationOptions extends ConfigurableWindow {}
+
+export interface UseScreenOrientationReturn {
+  /**
+   * Whether the Screen Orientation API is supported
+   */
+  isSupported: ComputedRef<boolean>;
+  /**
+   * Current screen orientation type, or `undefined` when unsupported
+   */
+  orientation: ShallowRef<OrientationType | undefined>;
+  /**
+   * Current screen orientation angle in degrees (defaults to `0`)
+   */
+  angle: ShallowRef<number>;
+  /**
+   * Lock the screen to the given orientation. Rejects when unsupported.
+   */
+  lockOrientation: (type: OrientationLockType) => Promise<void>;
+  /**
+   * Release a previously applied orientation lock. No-op when unsupported.
+   */
+  unlockOrientation: () => void;
+}
+
+/**
+ * @name useScreenOrientation
+ * @category Sensors
+ * @description Reactive Screen Orientation API. Tracks the current orientation
+ * `type` and `angle`, and exposes helpers to lock/unlock the orientation. SSR-safe.
+ *
+ * @param {UseScreenOrientationOptions} [options={}] Options (custom `window`)
+ * @returns {UseScreenOrientationReturn} `{ isSupported, orientation, angle, lockOrientation, unlockOrientation }`
+ *
+ * @example
+ * const { isSupported, orientation, angle, lockOrientation, unlockOrientation } = useScreenOrientation();
+ *
+ * @example
+ * // Lock to landscape (must run from a user gesture / fullscreen context)
+ * const { lockOrientation } = useScreenOrientation();
+ * await lockOrientation('landscape');
+ *
+ * @since 0.0.15
+ */
+export function useScreenOrientation(options: UseScreenOrientationOptions = {}): UseScreenOrientationReturn {
+  const { window = defaultWindow } = options;
+
+  const isSupported = useSupported(() =>
+    Boolean(window && 'screen' in window && window.screen && 'orientation' in window.screen));
+
+  const screenOrientation = (isSupported.value ? window!.screen.orientation : {}) as ScreenOrientation;
+
+  const orientation = shallowRef<OrientationType | undefined>(screenOrientation.type);
+  const angle = shallowRef(screenOrientation.angle || 0);
+
+  const update = (): void => {
+    orientation.value = screenOrientation.type;
+    angle.value = screenOrientation.angle;
+  };
+
+  if (isSupported.value) {
+    // The standard `change` event fires on the `ScreenOrientation` object itself;
+    // `orientationchange` on `window` is the legacy fallback for older engines.
+    useEventListener(screenOrientation, 'change', update, { passive: true });
+    useEventListener(window, 'orientationchange', update, { passive: true });
+  }
+
+  const lockOrientation = (type: OrientationLockType): Promise<void> => {
+    if (isSupported.value && isFunction(screenOrientation.lock))
+      return screenOrientation.lock(type);
+
+    return Promise.reject(new Error('Not supported'));
+  };
+
+  const unlockOrientation = (): void => {
+    if (isSupported.value && isFunction(screenOrientation.unlock))
+      screenOrientation.unlock();
+  };
+
+  return {
+    isSupported,
+    orientation,
+    angle,
+    lockOrientation,
+    unlockOrientation,
+  };
+}
diff --git a/vue/toolkit/src/composables/sensors/useScroll/demo.vue b/vue/toolkit/src/composables/sensors/useScroll/demo.vue
new file mode 100644
index 0000000..07626c6
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useScroll/demo.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { useTemplateRef } from 'vue';
+import { useScroll } from './index';
+
+const el = useTemplateRef<HTMLElement>('el');
+
+const { x, y, isScrolling, arrivedState, directions } = useScroll(el, {
+  throttle: 16,
+  offset: { top: 8, bottom: 8 },
+});
+
+const items = Array.from({ length: 28 }, (_, i) => ({
+  id: i + 1,
+  label: [
+    'Aurora', 'Basalt', 'Cobalt', 'Driftwood', 'Ember', 'Fjord',
+    'Glacier', 'Harbor', 'Indigo', 'Juniper', 'Kelp', 'Lichen',
+  ][i % 12],
+}));
+
+function scrollToTop() {
+  y.value = 0;
+}
+
+function scrollToBottom() {
+  if (el.value)
+    y.value = el.value.scrollHeight;
+}
+
+const edges = ['top', 'bottom'] as const;
+
+function arrowFor() {
+  if (directions.bottom)
+    return '↓';
+  if (directions.top)
+    return '↑';
+  return '·';
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Scroll container</span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
+        :class="isScrolling
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        <span
+          class="size-1.5 rounded-full transition"
+          :class="isScrolling ? 'bg-emerald-500' : 'bg-(--fg-subtle)'"
+        />
+        {{ isScrolling ? 'scrolling' : 'idle' }}
+      </span>
+    </div>
+
+    <div
+      ref="el"
+      class="h-48 overflow-auto rounded-xl border border-(--border) bg-(--bg-elevated) p-2"
+    >
+      <ul class="flex flex-col gap-1">
+        <li
+          v-for="item in items"
+          :key="item.id"
+          class="flex items-center justify-between rounded-lg bg-(--bg-inset) px-3 py-2 text-sm text-(--fg)"
+        >
+          <span class="font-medium">{{ item.label }}</span>
+          <span class="font-mono text-xs text-(--fg-subtle)">#{{ item.id }}</span>
+        </li>
+      </ul>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+      <div class="flex items-center justify-between">
+        <span class="text-(--fg-muted)">offset</span>
+        <span>x {{ Math.round(x) }} · y {{ Math.round(y) }} {{ arrowFor() }}</span>
+      </div>
+    </div>
+
+    <div class="flex gap-2">
+      <div
+        v-for="edge in edges"
+        :key="edge"
+        class="flex flex-1 flex-col items-center gap-1 rounded-lg border p-2 text-xs transition"
+        :class="arrivedState[edge]
+          ? 'border-(--accent) bg-(--accent-subtle) text-(--accent-text)'
+          : 'border-(--border) bg-(--bg-elevated) text-(--fg-subtle)'"
+      >
+        <span class="font-medium uppercase tracking-wide">{{ edge }}</span>
+        <span class="font-mono">{{ arrivedState[edge] ? 'arrived' : '—' }}</span>
+      </div>
+    </div>
+
+    <div class="flex gap-2">
+      <button
+        type="button"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="arrivedState.top"
+        @click="scrollToTop"
+      >
+        Scroll to top
+      </button>
+      <button
+        type="button"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="arrivedState.bottom"
+        @click="scrollToBottom"
+      >
+        Scroll to bottom
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useScroll/index.test.ts b/vue/toolkit/src/composables/sensors/useScroll/index.test.ts
new file mode 100644
index 0000000..c941124
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useScroll/index.test.ts
@@ -0,0 +1,214 @@
+import { describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, ref } from 'vue';
+import { useScroll } from '.';
+
+function makeScrollable(overrides: Partial<{
+  scrollWidth: number;
+  scrollHeight: number;
+  clientWidth: number;
+  clientHeight: number;
+}> = {}) {
+  const el = document.createElement('div');
+  Object.defineProperties(el, {
+    scrollWidth: { value: overrides.scrollWidth ?? 1000, configurable: true },
+    scrollHeight: { value: overrides.scrollHeight ?? 1000, configurable: true },
+    clientWidth: { value: overrides.clientWidth ?? 100, configurable: true },
+    clientHeight: { value: overrides.clientHeight ?? 100, configurable: true },
+  });
+  el.scrollLeft = 0;
+  el.scrollTop = 0;
+  return el;
+}
+
+function withScope<T>(fn: () => T): { result: T; scope: ReturnType<typeof effectScope> } {
+  const scope = effectScope();
+  let result!: T;
+  scope.run(() => {
+    result = fn();
+  });
+  return { result, scope };
+}
+
+describe(useScroll, () => {
+  it('starts at the top-left with arrived state', () => {
+    const el = makeScrollable();
+    const { result, scope } = withScope(() => useScroll(ref(el)));
+
+    expect(result.x.value).toBe(0);
+    expect(result.y.value).toBe(0);
+    expect(result.arrivedState.top).toBeTruthy();
+    expect(result.arrivedState.left).toBeTruthy();
+    scope.stop();
+  });
+
+  it('updates position and isScrolling on scroll', async () => {
+    const el = makeScrollable();
+    const { result, scope } = withScope(() => useScroll(ref(el)));
+
+    el.scrollTop = 50;
+    el.scrollLeft = 20;
+    el.dispatchEvent(new Event('scroll'));
+    await nextTick();
+
+    expect(result.x.value).toBe(20);
+    expect(result.y.value).toBe(50);
+    expect(result.isScrolling.value).toBeTruthy();
+    expect(result.directions.bottom).toBeTruthy();
+    expect(result.directions.right).toBeTruthy();
+    scope.stop();
+  });
+
+  it('flags arrival at the bottom edge', async () => {
+    const el = makeScrollable();
+    const { result, scope } = withScope(() => useScroll(ref(el)));
+
+    el.scrollTop = 900; // 900 + 100 clientHeight >= 1000 scrollHeight
+    el.dispatchEvent(new Event('scroll'));
+    await nextTick();
+
+    expect(result.arrivedState.bottom).toBeTruthy();
+    scope.stop();
+  });
+
+  it('measures the initial scroll position on mount', () => {
+    const el = makeScrollable();
+    el.scrollLeft = 30;
+    el.scrollTop = 40;
+    const { result, scope } = withScope(() => useScroll(ref(el)));
+
+    expect(result.x.value).toBe(30);
+    expect(result.y.value).toBe(40);
+    expect(result.arrivedState.top).toBeFalsy();
+    expect(result.arrivedState.left).toBeFalsy();
+    scope.stop();
+  });
+
+  it('exposes measure() to re-sync without a scroll event', () => {
+    const el = makeScrollable();
+    const { result, scope } = withScope(() => useScroll(ref(el)));
+
+    expect(result.y.value).toBe(0);
+
+    el.scrollTop = 200;
+    result.measure();
+
+    expect(result.y.value).toBe(200);
+    // measure() must not fabricate directions.
+    expect(result.directions.bottom).toBeFalsy();
+    scope.stop();
+  });
+
+  it('respects the offset when computing arrived state', async () => {
+    const el = makeScrollable();
+    const { result, scope } = withScope(() => useScroll(ref(el), { offset: { top: 10, bottom: 50 } }));
+
+    el.scrollTop = 8; // <= offset.top (10) => still arrived at top
+    el.dispatchEvent(new Event('scroll'));
+    await nextTick();
+    expect(result.arrivedState.top).toBeTruthy();
+
+    el.scrollTop = 855; // 855 + 100 >= 1000 - 50 - 1 => arrived at bottom early
+    el.dispatchEvent(new Event('scroll'));
+    await nextTick();
+    expect(result.arrivedState.bottom).toBeTruthy();
+    scope.stop();
+  });
+
+  it('resets isScrolling and directions and calls onStop after idle', async () => {
+    vi.useFakeTimers();
+    const onStop = vi.fn();
+    const el = makeScrollable();
+    const { result, scope } = withScope(() => useScroll(ref(el), { idle: 100, onStop }));
+
+    el.scrollTop = 50;
+    el.dispatchEvent(new Event('scroll'));
+    expect(result.isScrolling.value).toBeTruthy();
+    expect(result.directions.bottom).toBeTruthy();
+
+    vi.advanceTimersByTime(150);
+    await nextTick();
+
+    expect(result.isScrolling.value).toBeFalsy();
+    expect(result.directions.bottom).toBeFalsy();
+    expect(onStop).toHaveBeenCalledTimes(1);
+    scope.stop();
+    vi.useRealTimers();
+  });
+
+  it('normalises a negative (RTL) scrollLeft for arrived state', async () => {
+    const el = makeScrollable();
+    const styleSpy = vi.spyOn(globalThis, 'getComputedStyle').mockReturnValue({ direction: 'rtl' } as CSSStyleDeclaration);
+    const { result, scope } = withScope(() => useScroll(ref(el)));
+
+    // RTL: scrolled to the far end reports a large negative magnitude.
+    el.scrollLeft = -900;
+    el.dispatchEvent(new Event('scroll'));
+    await nextTick();
+
+    // |−900| + 100 clientWidth >= 1000 scrollWidth => arrived at the right edge.
+    expect(result.arrivedState.right).toBeTruthy();
+    expect(result.arrivedState.left).toBeFalsy();
+    styleSpy.mockRestore();
+    scope.stop();
+  });
+
+  it('writes scroll position through the x/y setters with behavior', () => {
+    const el = makeScrollable();
+    const scrollToSpy = vi.fn();
+    el.scrollTo = scrollToSpy as typeof el.scrollTo;
+    const { result, scope } = withScope(() => useScroll(ref(el), { behavior: 'smooth' }));
+
+    result.y.value = 120;
+    expect(scrollToSpy).toHaveBeenCalledWith({ top: 120, behavior: 'smooth' });
+
+    result.x.value = 60;
+    expect(scrollToSpy).toHaveBeenCalledWith({ left: 60, behavior: 'smooth' });
+    scope.stop();
+  });
+
+  it('invokes onError when reading metrics throws', () => {
+    const el = makeScrollable();
+    const onError = vi.fn();
+    const styleSpy = vi.spyOn(globalThis, 'getComputedStyle').mockImplementation(() => {
+      throw new Error('detached');
+    });
+    const { scope } = withScope(() => useScroll(ref(el), { onError }));
+
+    expect(onError).toHaveBeenCalled();
+    styleSpy.mockRestore();
+    scope.stop();
+  });
+
+  it('does nothing when target is nullish', () => {
+    const { result, scope } = withScope(() => useScroll(ref(null)));
+
+    expect(result.x.value).toBe(0);
+    expect(result.y.value).toBe(0);
+    expect(() => result.measure()).not.toThrow();
+    scope.stop();
+  });
+
+  it('throttles scroll updates when throttle is set', async () => {
+    vi.useFakeTimers();
+    const onScroll = vi.fn();
+    const el = makeScrollable();
+    const { scope } = withScope(() => useScroll(ref(el), { throttle: 100, onScroll }));
+
+    el.scrollTop = 10;
+    el.dispatchEvent(new Event('scroll'));
+    el.scrollTop = 20;
+    el.dispatchEvent(new Event('scroll'));
+    el.scrollTop = 30;
+    el.dispatchEvent(new Event('scroll'));
+
+    // Leading edge fires once immediately, the rest are throttled.
+    expect(onScroll).toHaveBeenCalledTimes(1);
+
+    vi.advanceTimersByTime(150);
+    // Trailing edge flushes the latest.
+    expect(onScroll).toHaveBeenCalledTimes(2);
+
+    scope.stop();
+    vi.useRealTimers();
+  });
+});
diff --git a/vue/toolkit/src/composables/sensors/useScroll/index.ts b/vue/toolkit/src/composables/sensors/useScroll/index.ts
new file mode 100644
index 0000000..9f33c2b
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useScroll/index.ts
@@ -0,0 +1,339 @@
+import { computed, reactive, shallowRef, toValue } from 'vue';
+import type { MaybeRefOrGetter, Ref } from 'vue';
+import { noop } from '@robonen/stdlib';
+import type { ConfigurableWindow } from '@/types';
+import { defaultWindow } from '@/types';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import { useMutationObserver } from '@/composables/elements/useMutationObserver';
+import { useThrottleFn } from '@/composables/reactivity/useThrottleFn';
+import { useDebounceFn } from '@/composables/reactivity/useDebounceFn';
+
+export interface UseScrollOffset {
+  left?: number;
+  right?: number;
+  top?: number;
+  bottom?: number;
+}
+
+export interface UseScrollObserveOptions {
+  /**
+   * Re-measure the arrived/position state whenever the target's subtree
+   * mutates (children added/removed, attributes changed). Useful when the
+   * scrollable content grows or shrinks without a scroll event firing.
+   *
+   * @default false
+   */
+  mutation?: boolean;
+}
+
+export interface UseScrollOptions extends ConfigurableWindow {
+  /**
+   * Throttle delay (ms) for scroll position updates. `0` disables throttling.
+   *
+   * @default 0
+   */
+  throttle?: number;
+
+  /**
+   * Idle time (ms) before `isScrolling` is reset to `false`
+   *
+   * @default 200
+   */
+  idle?: number;
+
+  /**
+   * Distance (px) from each edge at which `arrivedState` flips to `true`
+   *
+   * @default { left: 0, right: 0, top: 0, bottom: 0 }
+   */
+  offset?: UseScrollOffset;
+
+  /**
+   * Called on every scroll event
+   */
+  onScroll?: (event: Event) => void;
+
+  /**
+   * Called when scrolling stops (after `idle`)
+   */
+  onStop?: (event: Event) => void;
+
+  /**
+   * Listener options for the scroll event
+   *
+   * @default { capture: false, passive: true }
+   */
+  eventListenerOptions?: boolean | AddEventListenerOptions;
+
+  /**
+   * Scroll behavior used when writing to `x`/`y`
+   *
+   * @default 'auto'
+   */
+  behavior?: ScrollBehavior;
+
+  /**
+   * Re-measure the scroll state on DOM mutations of the target.
+   * Pass `true` to enable the default (`{ mutation: true }`).
+   *
+   * @default false
+   */
+  observe?: boolean | UseScrollObserveOptions;
+
+  /**
+   * Error handler invoked when reading scroll metrics or computed style throws
+   * (e.g. a detached or cross-origin element).
+   *
+   * @default console.error
+   */
+  onError?: (error: unknown) => void;
+}
+
+export type UseScrollTarget = MaybeRefOrGetter<HTMLElement | SVGElement | Window | Document | null | undefined>;
+
+export interface UseScrollEdgeState {
+  left: boolean;
+  right: boolean;
+  top: boolean;
+  bottom: boolean;
+}
+
+export interface UseScrollReturn {
+  x: Ref<number>;
+  y: Ref<number>;
+  isScrolling: Ref<boolean>;
+  arrivedState: UseScrollEdgeState;
+  directions: UseScrollEdgeState;
+  /**
+   * Recompute `x`, `y`, `arrivedState`, and `directions` from the current DOM
+   * state. Call after a programmatic layout change that did not emit a scroll
+   * event.
+   */
+  measure: () => void;
+}
+
+const ARRIVED_STATE_THRESHOLD_PIXELS = 1;
+
+interface ScrollMetrics {
+  scrollLeft: number;
+  scrollTop: number;
+  scrollWidth: number;
+  scrollHeight: number;
+  clientWidth: number;
+  clientHeight: number;
+  /**
+   * `-1` when the element is laid out right-to-left, `1` otherwise. Used to
+   * normalise the (possibly negative) `scrollLeft` reported under RTL.
+   */
+  directionMultiplier: number;
+}
+
+function isWindow(value: unknown, window: Window | undefined): value is Window {
+  return value === window || (typeof Window !== 'undefined' && value instanceof Window);
+}
+
+function getScrollMetrics(
+  el: HTMLElement | SVGElement | Window | Document,
+  window: Window,
+): ScrollMetrics {
+  if (isWindow(el, window)) {
+    const doc = window.document.documentElement;
+    return {
+      scrollLeft: window.scrollX,
+      scrollTop: window.scrollY,
+      scrollWidth: doc.scrollWidth,
+      scrollHeight: doc.scrollHeight,
+      clientWidth: window.innerWidth,
+      clientHeight: window.innerHeight,
+      directionMultiplier: getDirectionMultiplier(doc, window),
+    };
+  }
+
+  const node = (el instanceof Document ? el.documentElement : el) as HTMLElement;
+
+  return {
+    scrollLeft: node.scrollLeft,
+    scrollTop: node.scrollTop,
+    scrollWidth: node.scrollWidth,
+    scrollHeight: node.scrollHeight,
+    clientWidth: node.clientWidth,
+    clientHeight: node.clientHeight,
+    directionMultiplier: getDirectionMultiplier(node, window),
+  };
+}
+
+function getDirectionMultiplier(node: Element, window: Window): number {
+  // getComputedStyle can throw on detached nodes; callers wrap this in try/catch.
+  return window.getComputedStyle(node).direction === 'rtl' ? -1 : 1;
+}
+
+/**
+ * @name useScroll
+ * @category Sensors
+ * @description Reactive scroll position and state for an element or the window,
+ * with arrived-edge detection (RTL-aware), scroll directions, an `isScrolling`
+ * flag, optional throttling, and a `measure()` method for manual re-sync.
+ *
+ * @param {UseScrollTarget} target The scroll container (can be reactive)
+ * @param {UseScrollOptions} [options={}] Options
+ * @returns {UseScrollReturn} Reactive position, scroll state, arrived edges, directions, and `measure`
+ *
+ * @example
+ * const { x, y, isScrolling, arrivedState, measure } = useScroll(el);
+ *
+ * @since 0.0.15
+ */
+export function useScroll(
+  target: UseScrollTarget,
+  options: UseScrollOptions = {},
+): UseScrollReturn {
+  const {
+    throttle = 0,
+    idle = 200,
+    onStop = noop,
+    onScroll = noop,
+    offset = {},
+    eventListenerOptions = { capture: false, passive: true },
+    behavior = 'auto',
+    window = defaultWindow,
+    observe: observeOption = false,
+    onError = noop,
+  } = options;
+
+  const internalX = shallowRef(0);
+  const internalY = shallowRef(0);
+
+  const isScrolling = shallowRef(false);
+  const arrivedState = reactive<UseScrollEdgeState>({ left: true, right: false, top: true, bottom: false });
+  const directions = reactive<UseScrollEdgeState>({ left: false, right: false, top: false, bottom: false });
+
+  const scrollTo = (axis: 'x' | 'y', value: number): void => {
+    const el = toValue(target);
+
+    if (!el)
+      return;
+
+    (el instanceof Document ? el.documentElement : el as HTMLElement | Window).scrollTo(
+      axis === 'x' ? { left: value, behavior } : { top: value, behavior },
+    );
+  };
+
+  const x = computed<number>({
+    get: () => internalX.value,
+    set: value => scrollTo('x', value),
+  });
+
+  const y = computed<number>({
+    get: () => internalY.value,
+    set: value => scrollTo('y', value),
+  });
+
+  const setArrivedState = (m: ScrollMetrics): void => {
+    // RTL elements report a negative scrollLeft; normalise to a magnitude so
+    // edge maths is identical to the LTR case.
+    const left = Math.abs(m.scrollLeft);
+    const top = Math.abs(m.scrollTop);
+
+    arrivedState.left = left <= (offset.left ?? 0);
+    arrivedState.right = left + m.clientWidth >= m.scrollWidth - (offset.right ?? 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+    arrivedState.top = top <= (offset.top ?? 0);
+    arrivedState.bottom = top + m.clientHeight >= m.scrollHeight - (offset.bottom ?? 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+  };
+
+  // `trackDirections` only applies when driven by a real scroll event; a manual
+  // measure() should not invent directions, so it is skipped there.
+  const sync = (trackDirections: boolean): void => {
+    const el = toValue(target);
+
+    if (!el || !window)
+      return;
+
+    let m: ScrollMetrics;
+    try {
+      m = getScrollMetrics(el, window);
+    }
+    catch (error) {
+      onError(error);
+      return;
+    }
+
+    const left = m.scrollLeft;
+    const top = m.scrollTop;
+
+    if (trackDirections) {
+      directions.left = left < internalX.value;
+      directions.right = left > internalX.value;
+      directions.top = top < internalY.value;
+      directions.bottom = top > internalY.value;
+    }
+
+    setArrivedState(m);
+
+    internalX.value = left;
+    internalY.value = top;
+  };
+
+  const measure = (): void => sync(false);
+
+  const onScrollEnd = useDebounceFn((event: Event) => {
+    // Guard against the debounce trailing edge firing after we already settled.
+    if (!isScrolling.value)
+      return;
+
+    isScrolling.value = false;
+    directions.left = false;
+    directions.right = false;
+    directions.top = false;
+    directions.bottom = false;
+    onStop(event);
+  }, throttle + idle);
+
+  const onScrollHandler = (event: Event): void => {
+    if (!toValue(target) || !window)
+      return;
+
+    sync(true);
+
+    isScrolling.value = true;
+    onScrollEnd(event);
+    onScroll(event);
+  };
+
+  const handler = throttle > 0
+    ? useThrottleFn(onScrollHandler, throttle, true, true)
+    : onScrollHandler;
+
+  useEventListener(
+    target as MaybeRefOrGetter<EventTarget | null | undefined>,
+    'scroll',
+    handler as (event: Event) => void,
+    eventListenerOptions,
+  );
+
+  // Initial measure once a target is resolvable so x/y/arrivedState reflect the
+  // real starting position instead of the optimistic top-left defaults.
+  measure();
+
+  const observe = observeOption === true ? { mutation: true } : observeOption;
+
+  if (observe && observe.mutation) {
+    useMutationObserver(
+      // Window/Document are not observable elements; only observe real elements.
+      () => {
+        const el = toValue(target);
+        return el && !isWindow(el, window) && !(el instanceof Document) ? el : null;
+      },
+      () => measure(),
+      { window, attributes: true, childList: true, subtree: true },
+    );
+  }
+
+  return {
+    x,
+    y,
+    isScrolling,
+    arrivedState,
+    directions,
+    measure,
+  };
+}
diff --git a/vue/toolkit/src/composables/sensors/useScrollLock/demo.vue b/vue/toolkit/src/composables/sensors/useScrollLock/demo.vue
new file mode 100644
index 0000000..b857a99
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useScrollLock/demo.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { useTemplateRef } from 'vue';
+import { useScrollLock } from './index';
+
+const el = useTemplateRef<HTMLElement>('el');
+const isLocked = useScrollLock(el);
+
+const lines = [
+  'The kingfisher dives where the river bends.',
+  'Reeds lean low over the slow green water.',
+  'A heron stands knee-deep in the shallows.',
+  'Dragonflies stitch the air above the lilies.',
+  'Sunlight breaks across the rippling surface.',
+  'Trout shadows drift beneath the willow roots.',
+  'The current folds and unfolds the weeds.',
+  'Far off, a mill wheel turns and turns.',
+];
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Scroll lock</span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
+        :class="isLocked
+          ? 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'
+          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        {{ isLocked ? 'locked' : 'free' }}
+      </span>
+    </div>
+
+    <div
+      ref="el"
+      class="h-44 overflow-auto rounded-xl border border-(--border) bg-(--bg-elevated) p-4"
+    >
+      <p
+        v-for="(line, i) in lines"
+        :key="i"
+        class="py-1.5 text-sm leading-relaxed text-(--fg)"
+      >
+        {{ line }}
+      </p>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      {{ isLocked ? 'Overflow is hidden — the panel above will not scroll.' : 'Try scrolling the panel, then lock it.' }}
+    </p>
+
+    <div class="flex items-center gap-3 rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+      <button
+        type="button"
+        role="switch"
+        :aria-checked="isLocked"
+        class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border border-(--border) transition cursor-pointer focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        :class="isLocked ? 'bg-(--accent)' : 'bg-(--bg-elevated)'"
+        @click="isLocked = !isLocked"
+      >
+        <span
+          class="inline-block size-4 rounded-full bg-(--bg) shadow transition"
+          :class="isLocked ? 'translate-x-6' : 'translate-x-1'"
+        />
+      </button>
+      <span class="text-sm font-medium text-(--fg)">Lock scrolling</span>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useScrollLock/index.test.ts b/vue/toolkit/src/composables/sensors/useScrollLock/index.test.ts
new file mode 100644
index 0000000..abc5aaf
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useScrollLock/index.test.ts
@@ -0,0 +1,365 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, isReadonly, nextTick, ref, shallowRef } from 'vue';
+import { useScrollLock } from '.';
+
+function makeIOSNavigator(): Navigator {
+  return {
+    userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X)',
+    platform: 'iPhone',
+    maxTouchPoints: 5,
+  } as unknown as Navigator;
+}
+
+function makeDesktopNavigator(): Navigator {
+  return {
+    userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)',
+    platform: 'MacIntel',
+    maxTouchPoints: 0,
+  } as unknown as Navigator;
+}
+
+describe(useScrollLock, () => {
+  afterEach(() => vi.unstubAllGlobals());
+
+  it('returns a writable boolean ref (not readonly)', () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let isLocked: ReturnType<typeof useScrollLock>;
+    scope.run(() => {
+      isLocked = useScrollLock(ref(el));
+    });
+
+    expect(isLocked!.value).toBeFalsy();
+    expect(isReadonly(isLocked!)).toBeFalsy();
+    scope.stop();
+  });
+
+  it('respects the initialState argument and applies overflow when the element resolves', async () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let isLocked: ReturnType<typeof useScrollLock>;
+    scope.run(() => {
+      isLocked = useScrollLock(ref(el), true);
+    });
+    await nextTick();
+
+    expect(isLocked!.value).toBeTruthy();
+    expect(el.style.overflow).toBe('hidden');
+    scope.stop();
+  });
+
+  it('sets overflow:hidden when locked via the setter', () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let isLocked: ReturnType<typeof useScrollLock>;
+    scope.run(() => {
+      isLocked = useScrollLock(ref(el), false, { navigator: makeDesktopNavigator() });
+    });
+
+    expect(el.style.overflow).toBe('');
+
+    isLocked!.value = true;
+    expect(el.style.overflow).toBe('hidden');
+    expect(isLocked!.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('restores the prior overflow value on unlock', () => {
+    const el = document.createElement('div');
+    el.style.overflow = 'auto';
+    const scope = effectScope();
+    let isLocked: ReturnType<typeof useScrollLock>;
+    scope.run(() => {
+      isLocked = useScrollLock(ref(el), false, { navigator: makeDesktopNavigator() });
+    });
+
+    isLocked!.value = true;
+    expect(el.style.overflow).toBe('hidden');
+
+    isLocked!.value = false;
+    expect(el.style.overflow).toBe('auto');
+    expect(isLocked!.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('restores an empty inline overflow when none was set before locking', () => {
+    const el = document.createElement('div');
+    const scope = effectScope();
+    let isLocked: ReturnType<typeof useScrollLock>;
+    scope.run(() => {
+      isLocked = useScrollLock(ref(el), false, { navigator: makeDesktopNavigator() });
+    });
+
+    isLocked!.value = true;
+    expect(el.style.overflow).toBe('hidden');
+
+    isLocked!.value = false;
+    expect(el.style.overflow).toBe('');
+    scope.stop();
+  });
+
+  it('lock is idempotent — setting true twice does not change state', () => {
+    const el = document.createElement('div');
+    el.style.overflow = 'scroll';
+    const scope = effectScope();
+    let isLocked: ReturnType<typeof useScrollLock>;
+    scope.run(() => {
+      isLocked = useScrollLock(ref(el), false, { navigator: makeDesktopNavigator() });
+    });
+
+    isLocked!.value = true;
+    isLocked!.value = true;
+    expect(el.style.overflow).toBe('hidden');
+
+    isLocked!.value = false;
+    // The original 'scroll' is preserved across the double-lock.
+    expect(el.style.overflow).toBe('scroll');
+    scope.stop();
+  });
+
+  it('treats an element that already has overflow:hidden as locked', async () => {
+    const el = document.createElement('div');
+    el.style.overflow = 'hidden';
+    const scope = effectScope();
+    let isLocked: ReturnType<typeof useScrollLock>;
+    scope.run(() => {
+      isLocked = useScrollLock(ref(el));
+    });
+    await nextTick();
+
+    expect(isLocked!.value).toBeTruthy();
+    scope.stop();
+  });
+
+  it('applies the lock once a lazily-resolved element appears', async () => {
+    const target = shallowRef<HTMLElement | null>(null);
+    const scope = effectScope();
+    let isLocked: ReturnType<typeof useScrollLock>;
+    scope.run(() => {
+      isLocked = useScrollLock(target);
+    });
+
+    isLocked!.value = true;
+    // No element yet, so nothing to lock.
+    expect(isLocked!.value).toBeFalsy();
+
+    const el = document.createElement('div');
+    target.value = el;
+    await nextTick();
+
+    // The watcher sees isLocked still false; lock again now that the el exists.
+    isLocked!.value = true;
+    expect(el.style.overflow).toBe('hidden');
+    scope.stop();
+  });
+
+  it('does nothing when there is no element', () => {
+    const scope = effectScope();
+    let isLocked: ReturnType<typeof useScrollLock>;
+    scope.run(() => {
+      isLocked = useScrollLock(ref(null));
+    });
+
+    isLocked!.value = true;
+    expect(isLocked!.value).toBeFalsy();
+    isLocked!.value = false;
+    expect(isLocked!.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('registers a passive:false touchmove listener on iOS when locking', () => {
+    const el = document.createElement('div');
+    const addSpy = vi.spyOn(el, 'addEventListener');
+    const scope = effectScope();
+    let isLocked: ReturnType<typeof useScrollLock>;
+    scope.run(() => {
+      isLocked = useScrollLock(ref(el), false, { navigator: makeIOSNavigator() });
+    });
+
+    isLocked!.value = true;
+
+    expect(addSpy).toHaveBeenCalledWith(
+      'touchmove',
+      expect.any(Function),
+      expect.objectContaining({ passive: false }),
+    );
+    scope.stop();
+  });
+
+  it('does not register a touchmove listener on non-iOS platforms', () => {
+    const el = document.createElement('div');
+    const addSpy = vi.spyOn(el, 'addEventListener');
+    const scope = effectScope();
+    let isLocked: ReturnType<typeof useScrollLock>;
+    scope.run(() => {
+      isLocked = useScrollLock(ref(el), false, { navigator: makeDesktopNavigator() });
+    });
+
+    isLocked!.value = true;
+
+    expect(addSpy).not.toHaveBeenCalledWith('touchmove', expect.any(Function), expect.anything());
+    scope.stop();
+  });
+
+  it('removes the iOS touchmove listener on unlock', () => {
+    const el = document.createElement('div');
+    const removeSpy = vi.spyOn(el, 'removeEventListener');
+    const scope = effectScope();
+    let isLocked: ReturnType<typeof useScrollLock>;
+    scope.run(() => {
+      isLocked = useScrollLock(ref(el), false, { navigator: makeIOSNavigator() });
+    });
+
+    isLocked!.value = true;
+    isLocked!.value = false;
+
+    expect(removeSpy).toHaveBeenCalledWith('touchmove', expect.any(Function), expect.objectContaining({ passive: false }));
+    scope.stop();
+  });
+
+  it('prevents default on a single-touch touchmove over a non-scrollable target (iOS)', () => {
+    const el = document.createElement('div');
+    document.body.appendChild(el);
+    let captured: EventListener | undefined;
+    vi.spyOn(el, 'addEventListener').mockImplementation((type, listener) => {
+      if (type === 'touchmove')
+        captured = listener as EventListener;
+    });
+
+    const scope = effectScope();
+    let isLocked: ReturnType<typeof useScrollLock>;
+    scope.run(() => {
+      isLocked = useScrollLock(ref(el), false, { navigator: makeIOSNavigator() });
+    });
+    isLocked!.value = true;
+
+    expect(captured).toBeTypeOf('function');
+
+    const event = {
+      target: el,
+      touches: [{}],
+      cancelable: true,
+      preventDefault: vi.fn(),
+    } as unknown as TouchEvent;
+    captured!(event);
+
+    expect(event.preventDefault).toHaveBeenCalledTimes(1);
+
+    document.body.removeChild(el);
+    scope.stop();
+  });
+
+  it('does NOT prevent default for multi-touch gestures (iOS pinch-zoom)', () => {
+    const el = document.createElement('div');
+    document.body.appendChild(el);
+    let captured: EventListener | undefined;
+    vi.spyOn(el, 'addEventListener').mockImplementation((type, listener) => {
+      if (type === 'touchmove')
+        captured = listener as EventListener;
+    });
+
+    const scope = effectScope();
+    let isLocked: ReturnType<typeof useScrollLock>;
+    scope.run(() => {
+      isLocked = useScrollLock(ref(el), false, { navigator: makeIOSNavigator() });
+    });
+    isLocked!.value = true;
+
+    const event = {
+      target: el,
+      touches: [{}, {}],
+      cancelable: true,
+      preventDefault: vi.fn(),
+    } as unknown as TouchEvent;
+    captured!(event);
+
+    expect(event.preventDefault).not.toHaveBeenCalled();
+
+    document.body.removeChild(el);
+    scope.stop();
+  });
+
+  it('does NOT prevent default when the touch target is itself scrollable (iOS)', () => {
+    const el = document.createElement('div');
+    document.body.appendChild(el);
+    let captured: EventListener | undefined;
+    vi.spyOn(el, 'addEventListener').mockImplementation((type, listener) => {
+      if (type === 'touchmove')
+        captured = listener as EventListener;
+    });
+
+    const scrollable = document.createElement('div');
+    el.appendChild(scrollable);
+
+    // Force the inner element to look scrollable.
+    const win = {
+      getComputedStyle: (node: Element) =>
+        node === scrollable
+          ? ({ overflowX: 'scroll', overflowY: 'scroll' } as CSSStyleDeclaration)
+          : ({ overflowX: 'visible', overflowY: 'visible' } as CSSStyleDeclaration),
+    } as unknown as Window;
+
+    const scope = effectScope();
+    let isLocked: ReturnType<typeof useScrollLock>;
+    scope.run(() => {
+      isLocked = useScrollLock(ref(el), false, { navigator: makeIOSNavigator(), window: win });
+    });
+    isLocked!.value = true;
+
+    const event = {
+      target: scrollable,
+      touches: [{}],
+      cancelable: true,
+      preventDefault: vi.fn(),
+    } as unknown as TouchEvent;
+    captured!(event);
+
+    expect(event.preventDefault).not.toHaveBeenCalled();
+
+    el.removeChild(scrollable);
+    document.body.removeChild(el);
+    scope.stop();
+  });
+
+  it('restores overflow and detaches the touchmove listener on scope dispose', () => {
+    // The composable registers tryOnScopeDispose(unlock), so disposing the scope
+    // restores the prior overflow and tears the iOS touchmove listener down even
+    // though the lock was triggered from the setter (outside the scope).
+    const el = document.createElement('div');
+    el.style.overflow = 'auto';
+    const removeSpy = vi.spyOn(el, 'removeEventListener');
+    const scope = effectScope();
+    let isLocked: ReturnType<typeof useScrollLock>;
+    scope.run(() => {
+      isLocked = useScrollLock(ref(el), false, { navigator: makeIOSNavigator() });
+    });
+
+    isLocked!.value = true;
+    expect(el.style.overflow).toBe('hidden');
+
+    scope.stop();
+
+    expect(el.style.overflow).toBe('auto');
+    expect(removeSpy).toHaveBeenCalledWith('touchmove', expect.any(Function), expect.anything());
+  });
+
+  it('does not register listeners when window is falsy (SSR)', () => {
+    const el = document.createElement('div');
+    const addSpy = vi.spyOn(el, 'addEventListener');
+    const scope = effectScope();
+    let isLocked: ReturnType<typeof useScrollLock>;
+    scope.run(() => {
+      isLocked = useScrollLock(ref(el), false, {
+        window: null as unknown as Window,
+        navigator: makeIOSNavigator(),
+      });
+    });
+
+    isLocked!.value = true;
+
+    // overflow is still toggled, but no iOS touchmove listener is attached.
+    expect(el.style.overflow).toBe('hidden');
+    expect(addSpy).not.toHaveBeenCalledWith('touchmove', expect.any(Function), expect.anything());
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/sensors/useScrollLock/index.ts b/vue/toolkit/src/composables/sensors/useScrollLock/index.ts
new file mode 100644
index 0000000..8f0c172
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useScrollLock/index.ts
@@ -0,0 +1,183 @@
+import type { WritableComputedRef } from 'vue';
+import { computed, shallowRef, toRef, watch } from 'vue';
+import type { VoidFunction } from '@robonen/stdlib';
+import type { ConfigurableNavigator, ConfigurableWindow } from '@/types';
+import { defaultNavigator, defaultWindow } from '@/types';
+import type { MaybeComputedElementRef } from '@/composables/component/unrefElement';
+import { unrefElement } from '@/composables/component/unrefElement';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+
+type LockableElement = HTMLElement | SVGElement;
+
+export interface UseScrollLockOptions extends ConfigurableWindow, ConfigurableNavigator {}
+
+export type UseScrollLockReturn = WritableComputedRef<boolean>;
+
+/**
+ * Stores each element's `style.overflow` value as it was the first time we
+ * touched it, so unlocking restores exactly what the author had set (rather
+ * than wiping inline overflow entirely). A WeakMap keeps this from pinning
+ * detached elements in memory.
+ */
+const elementInitialOverflow = /* #__PURE__ */ new WeakMap<LockableElement, string>();
+
+function isIOS(navigator: Navigator | undefined): boolean {
+  if (!navigator)
+    return false;
+
+  const ua = navigator.userAgent;
+  // iPhone / iPod / legacy iPad, plus iPadOS 13+ which masquerades as MacIntel
+  // while reporting a touch screen.
+  return /iP(?:ad|hone|od)/.test(ua)
+    || (navigator.platform === 'MacIntel' && (navigator.maxTouchPoints ?? 0) > 1);
+}
+
+/**
+ * Walks up from the touched node looking for an ancestor that can actually
+ * scroll. If one exists we must NOT prevent the touchmove, otherwise nested
+ * scroll regions (e.g. a modal body) become un-scrollable on iOS.
+ */
+function checkOverflowScroll(element: Element, window: Window): boolean {
+  const style = window.getComputedStyle(element);
+
+  if (
+    style.overflowX === 'scroll'
+    || style.overflowY === 'scroll'
+    || (style.overflowX === 'auto' && element.clientWidth < element.scrollWidth)
+    || (style.overflowY === 'auto' && element.clientHeight < element.scrollHeight)
+  ) {
+    return true;
+  }
+
+  const parent = element.parentNode as Element | null;
+
+  if (!parent || parent.tagName === 'BODY')
+    return false;
+
+  return checkOverflowScroll(parent, window);
+}
+
+function preventDefault(event: TouchEvent, window: Window): void {
+  const target = event.target as Element | null;
+
+  // Allow scrolling inside genuinely scrollable descendants.
+  if (target && checkOverflowScroll(target, window))
+    return;
+
+  // A multi-touch gesture (pinch-zoom) should be left alone.
+  if (event.touches.length > 1)
+    return;
+
+  if (event.cancelable)
+    event.preventDefault();
+}
+
+/**
+ * @name useScrollLock
+ * @category Sensors
+ * @description Lock scrolling of an element by toggling `overflow: hidden`,
+ * preserving the element's prior inline overflow and handling iOS `touchmove`.
+ * Returns a writable boolean ref — set it to lock/unlock, read it for state.
+ *
+ * @param {MaybeComputedElementRef} element - The element (or template ref / getter) to lock.
+ * @param {boolean} [initialState] - Whether the element starts locked. Defaults to `false`.
+ * @param {UseScrollLockOptions} [options] - Configurable `window` / `navigator` (mainly for SSR & testing).
+ * @returns {UseScrollLockReturn} A writable boolean ref; `true` while locked.
+ *
+ * @example
+ * const el = useTemplateRef<HTMLElement>('el');
+ * const isLocked = useScrollLock(el);
+ * isLocked.value = true; // lock
+ * isLocked.value = false; // unlock
+ *
+ * @since 0.0.15
+ */
+export function useScrollLock(
+  element: MaybeComputedElementRef,
+  initialState = false,
+  options: UseScrollLockOptions = {},
+): UseScrollLockReturn {
+  const { window = defaultWindow, navigator = defaultNavigator } = options;
+
+  const isLocked = shallowRef(initialState);
+  let stopTouchMoveListener: VoidFunction | null = null;
+  let initialOverflow = '';
+
+  watch(
+    toRef(element),
+    () => {
+      const el = unrefElement(element) as LockableElement | undefined;
+
+      if (!el)
+        return;
+
+      const style = el.style;
+
+      if (!elementInitialOverflow.has(el))
+        elementInitialOverflow.set(el, style.overflow);
+
+      if (style.overflow !== 'hidden')
+        initialOverflow = style.overflow;
+
+      // The element was already hidden before we attached — treat as locked.
+      if (style.overflow === 'hidden') {
+        isLocked.value = true;
+        return;
+      }
+
+      if (isLocked.value)
+        style.overflow = 'hidden';
+    },
+    { immediate: true },
+  );
+
+  const lock = (): void => {
+    const el = unrefElement(element) as LockableElement | undefined;
+
+    if (!el || isLocked.value)
+      return;
+
+    if (window && isIOS(navigator)) {
+      stopTouchMoveListener = useEventListener(
+        el as HTMLElement,
+        'touchmove',
+        (event: Event) => preventDefault(event as TouchEvent, window),
+        { passive: false },
+      );
+    }
+
+    el.style.overflow = 'hidden';
+    isLocked.value = true;
+  };
+
+  const unlock = (): void => {
+    const el = unrefElement(element) as LockableElement | undefined;
+
+    if (!el || !isLocked.value)
+      return;
+
+    stopTouchMoveListener?.();
+    stopTouchMoveListener = null;
+
+    el.style.overflow = initialOverflow;
+    elementInitialOverflow.delete(el);
+    isLocked.value = false;
+  };
+
+  // Restore overflow and detach the iOS touchmove listener when the owning
+  // scope is disposed, regardless of where the lock was triggered from.
+  tryOnScopeDispose(unlock);
+
+  return computed<boolean>({
+    get() {
+      return isLocked.value;
+    },
+    set(value) {
+      if (value)
+        lock();
+      else
+        unlock();
+    },
+  });
+}
diff --git a/vue/toolkit/src/composables/sensors/useSwipe/demo.vue b/vue/toolkit/src/composables/sensors/useSwipe/demo.vue
new file mode 100644
index 0000000..c311607
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useSwipe/demo.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed, ref, useTemplateRef } from 'vue';
+import { useSwipe } from './index';
+
+const el = useTemplateRef<HTMLElement>('el');
+
+const lastDirection = ref<'up' | 'down' | 'left' | 'right' | 'none'>('none');
+
+const { isSwiping, direction, lengthX, lengthY, coordsStart, coordsEnd } = useSwipe(el, {
+  passive: false,
+  threshold: 40,
+  onSwipeEnd(_event, dir) {
+    lastDirection.value = dir;
+  },
+});
+
+// Live drag offset while actively swiping, clamped so the card stays in view.
+const offsetX = computed(() => (isSwiping.value ? Math.max(-80, Math.min(80, lengthX.value)) : 0));
+const offsetY = computed(() => (isSwiping.value ? Math.max(-40, Math.min(40, lengthY.value)) : 0));
+
+const arrows: Record<string, string> = {
+  up: '↑',
+  down: '↓',
+  left: '←',
+  right: '→',
+  none: '·',
+};
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Swipe area (touch / drag)</span>
+
+    <div
+      ref="el"
+      class="relative flex h-40 touch-none select-none items-center justify-center overflow-hidden rounded-xl border border-(--border-strong) bg-(--bg-inset)"
+    >
+      <div
+        class="flex flex-col items-center gap-1 rounded-lg border border-(--border) bg-(--bg-elevated) px-6 py-4 shadow-sm"
+        :class="isSwiping ? 'transition-none' : 'transition-transform duration-300'"
+        :style="{ transform: `translate(${offsetX}px, ${offsetY}px)` }"
+      >
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ arrows[direction] }}</span>
+        <span class="text-xs text-(--fg-subtle)">{{ isSwiping ? 'swiping…' : 'swipe me' }}</span>
+      </div>
+    </div>
+
+    <div class="grid grid-cols-2 gap-2">
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+        <div class="flex items-center justify-between">
+          <span class="text-(--fg-muted)">Δx</span>
+          <span>{{ Math.round(lengthX) }}px</span>
+        </div>
+        <div class="mt-1 flex items-center justify-between">
+          <span class="text-(--fg-muted)">Δy</span>
+          <span>{{ Math.round(lengthY) }}px</span>
+        </div>
+      </div>
+      <div class="flex flex-col justify-center gap-1 rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Last swipe</span>
+        <span class="font-mono text-sm font-medium capitalize text-(--accent-text)">{{ lastDirection }}</span>
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs text-(--fg-muted) tabular-nums">
+      start ({{ Math.round(coordsStart.x) }}, {{ Math.round(coordsStart.y) }})
+      → end ({{ Math.round(coordsEnd.x) }}, {{ Math.round(coordsEnd.y) }})
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      On a desktop, click and drag with touch emulation; on touch devices, swipe in any direction.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useSwipe/index.test.ts b/vue/toolkit/src/composables/sensors/useSwipe/index.test.ts
new file mode 100644
index 0000000..b21101b
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useSwipe/index.test.ts
@@ -0,0 +1,228 @@
+import { describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, ref } from 'vue';
+import { useSwipe } from '.';
+
+function withScope<T>(fn: () => T): { result: T; scope: ReturnType<typeof effectScope> } {
+  const scope = effectScope();
+  let result!: T;
+  scope.run(() => {
+    result = fn();
+  });
+  return { result, scope };
+}
+
+interface TouchPoint {
+  clientX: number;
+  clientY: number;
+}
+
+// jsdom does not implement the Touch/TouchEvent constructors fully; build a
+// minimal event carrying the `touches` list our composable reads.
+function dispatchTouch(el: EventTarget, type: string, points: TouchPoint[]): TouchEvent {
+  const event = new Event(type, { bubbles: true, cancelable: true }) as unknown as TouchEvent;
+  Object.defineProperty(event, 'touches', {
+    value: points.map(p => ({ clientX: p.clientX, clientY: p.clientY })),
+    configurable: true,
+  });
+  el.dispatchEvent(event as unknown as Event);
+  return event;
+}
+
+function makeTarget(): HTMLElement {
+  return document.createElement('div');
+}
+
+describe(useSwipe, () => {
+  it('starts idle with zeroed coordinates and no direction', () => {
+    const el = makeTarget();
+    const { result, scope } = withScope(() => useSwipe(ref(el)));
+
+    expect(result.isSwiping.value).toBeFalsy();
+    expect(result.direction.value).toBe('none');
+    expect(result.coordsStart.x).toBe(0);
+    expect(result.coordsEnd.y).toBe(0);
+    expect(result.lengthX.value).toBe(0);
+    expect(result.lengthY.value).toBe(0);
+    scope.stop();
+  });
+
+  it('records start coordinates and fires onSwipeStart on touchstart', () => {
+    const el = makeTarget();
+    const onSwipeStart = vi.fn();
+    const { result, scope } = withScope(() => useSwipe(ref(el), { onSwipeStart }));
+
+    dispatchTouch(el, 'touchstart', [{ clientX: 100, clientY: 100 }]);
+
+    expect(onSwipeStart).toHaveBeenCalledTimes(1);
+    expect(result.coordsStart.x).toBe(100);
+    expect(result.coordsStart.y).toBe(100);
+    expect(result.isSwiping.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('detects a left swipe once the threshold is exceeded', () => {
+    const el = makeTarget();
+    const onSwipe = vi.fn();
+    const onSwipeEnd = vi.fn();
+    const { result, scope } = withScope(() =>
+      useSwipe(ref(el), { threshold: 50, onSwipe, onSwipeEnd }));
+
+    dispatchTouch(el, 'touchstart', [{ clientX: 200, clientY: 100 }]);
+    // Move left less than threshold: not swiping yet.
+    dispatchTouch(el, 'touchmove', [{ clientX: 180, clientY: 100 }]);
+    expect(result.isSwiping.value).toBeFalsy();
+    expect(onSwipe).not.toHaveBeenCalled();
+
+    // Move past the threshold.
+    dispatchTouch(el, 'touchmove', [{ clientX: 100, clientY: 100 }]);
+    expect(result.isSwiping.value).toBeTruthy();
+    expect(onSwipe).toHaveBeenCalled();
+    expect(result.direction.value).toBe('left');
+    expect(result.lengthX.value).toBe(-100);
+    expect(result.lengthY.value).toBe(0);
+
+    dispatchTouch(el, 'touchend', [{ clientX: 100, clientY: 100 }]);
+    expect(onSwipeEnd).toHaveBeenCalledTimes(1);
+    expect(onSwipeEnd.mock.calls[0]![1]).toBe('left');
+    expect(result.isSwiping.value).toBeFalsy();
+    scope.stop();
+  });
+
+  it('detects a right swipe', () => {
+    const el = makeTarget();
+    const { result, scope } = withScope(() => useSwipe(ref(el)));
+
+    dispatchTouch(el, 'touchstart', [{ clientX: 50, clientY: 100 }]);
+    dispatchTouch(el, 'touchmove', [{ clientX: 200, clientY: 100 }]);
+
+    expect(result.direction.value).toBe('right');
+    expect(result.lengthX.value).toBe(150);
+    scope.stop();
+  });
+
+  it('detects up and down swipes on the dominant axis', () => {
+    const up = makeTarget();
+    const { result: upResult, scope: upScope } = withScope(() => useSwipe(ref(up)));
+    dispatchTouch(up, 'touchstart', [{ clientX: 100, clientY: 200 }]);
+    dispatchTouch(up, 'touchmove', [{ clientX: 100, clientY: 100 }]);
+    expect(upResult.direction.value).toBe('up');
+    expect(upResult.lengthY.value).toBe(-100);
+    upScope.stop();
+
+    const down = makeTarget();
+    const { result: downResult, scope: downScope } = withScope(() => useSwipe(ref(down)));
+    dispatchTouch(down, 'touchstart', [{ clientX: 100, clientY: 50 }]);
+    dispatchTouch(down, 'touchmove', [{ clientX: 100, clientY: 200 }]);
+    expect(downResult.direction.value).toBe('down');
+    expect(downResult.lengthY.value).toBe(150);
+    downScope.stop();
+  });
+
+  it('ignores multi-touch gestures', () => {
+    const el = makeTarget();
+    const onSwipeStart = vi.fn();
+    const { result, scope } = withScope(() => useSwipe(ref(el), { onSwipeStart }));
+
+    dispatchTouch(el, 'touchstart', [
+      { clientX: 100, clientY: 100 },
+      { clientX: 150, clientY: 150 },
+    ]);
+
+    expect(onSwipeStart).not.toHaveBeenCalled();
+    expect(result.coordsStart.x).toBe(0);
+    scope.stop();
+  });
+
+  it('does not call preventDefault when passive (default)', () => {
+    const el = makeTarget();
+    const { scope } = withScope(() => useSwipe(ref(el)));
+
+    dispatchTouch(el, 'touchstart', [{ clientX: 200, clientY: 100 }]);
+    const moveEvent = dispatchTouch(el, 'touchmove', [{ clientX: 100, clientY: 100 }]);
+
+    expect(moveEvent.defaultPrevented).toBeFalsy();
+    scope.stop();
+  });
+
+  it('calls preventDefault on horizontal move when passive is false', () => {
+    const el = makeTarget();
+    const { scope } = withScope(() => useSwipe(ref(el), { passive: false }));
+
+    dispatchTouch(el, 'touchstart', [{ clientX: 200, clientY: 100 }]);
+    // Horizontal dominant move should preventDefault to block scrolling.
+    const moveEvent = dispatchTouch(el, 'touchmove', [{ clientX: 100, clientY: 100 }]);
+    expect(moveEvent.defaultPrevented).toBeTruthy();
+
+    // Vertical dominant move should NOT preventDefault.
+    dispatchTouch(el, 'touchstart', [{ clientX: 100, clientY: 200 }]);
+    const verticalMove = dispatchTouch(el, 'touchmove', [{ clientX: 100, clientY: 100 }]);
+    expect(verticalMove.defaultPrevented).toBeFalsy();
+    scope.stop();
+  });
+
+  it('respects a custom threshold', () => {
+    const el = makeTarget();
+    const { result, scope } = withScope(() => useSwipe(ref(el), { threshold: 200 }));
+
+    dispatchTouch(el, 'touchstart', [{ clientX: 0, clientY: 100 }]);
+    dispatchTouch(el, 'touchmove', [{ clientX: 150, clientY: 100 }]);
+    expect(result.isSwiping.value).toBeFalsy();
+    expect(result.direction.value).toBe('none');
+
+    dispatchTouch(el, 'touchmove', [{ clientX: 250, clientY: 100 }]);
+    expect(result.isSwiping.value).toBeTruthy();
+    expect(result.direction.value).toBe('right');
+    scope.stop();
+  });
+
+  it('stop() removes listeners so further touches are ignored', () => {
+    const el = makeTarget();
+    const onSwipeStart = vi.fn();
+    const { result, scope } = withScope(() => useSwipe(ref(el), { onSwipeStart }));
+
+    result.stop();
+
+    dispatchTouch(el, 'touchstart', [{ clientX: 100, clientY: 100 }]);
+    expect(onSwipeStart).not.toHaveBeenCalled();
+    expect(result.coordsStart.x).toBe(0);
+    scope.stop();
+  });
+
+  it('re-binds listeners when the target ref changes', async () => {
+    const a = makeTarget();
+    const b = makeTarget();
+    const target = ref<HTMLElement | null>(a);
+    const onSwipeStart = vi.fn();
+    const { scope } = withScope(() => useSwipe(target, { onSwipeStart }));
+
+    dispatchTouch(a, 'touchstart', [{ clientX: 10, clientY: 10 }]);
+    expect(onSwipeStart).toHaveBeenCalledTimes(1);
+
+    target.value = b;
+    await nextTick();
+
+    // Old target no longer listened to.
+    dispatchTouch(a, 'touchstart', [{ clientX: 10, clientY: 10 }]);
+    expect(onSwipeStart).toHaveBeenCalledTimes(1);
+
+    // New target is.
+    dispatchTouch(b, 'touchstart', [{ clientX: 20, clientY: 20 }]);
+    expect(onSwipeStart).toHaveBeenCalledTimes(2);
+    scope.stop();
+  });
+
+  it('does nothing and stays safe when window is undefined (SSR)', () => {
+    const el = makeTarget();
+    const { result, scope } = withScope(() =>
+      useSwipe(ref(el), { window: undefined }));
+
+    expect(result.isSwiping.value).toBeFalsy();
+    expect(result.direction.value).toBe('none');
+    expect(() => result.stop()).not.toThrow();
+
+    // No listeners registered, so a touch is a no-op.
+    dispatchTouch(el, 'touchstart', [{ clientX: 100, clientY: 100 }]);
+    expect(result.coordsStart.x).toBe(0);
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/sensors/useSwipe/index.ts b/vue/toolkit/src/composables/sensors/useSwipe/index.ts
new file mode 100644
index 0000000..d340ec6
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useSwipe/index.ts
@@ -0,0 +1,221 @@
+import { computed, reactive, shallowReadonly, shallowRef } from 'vue';
+import type { ComputedRef, DeepReadonly, ShallowRef } from 'vue';
+import { defaultWindow } from '@/types';
+import type { ConfigurableWindow } from '@/types';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import { unrefElement } from '@/composables/component/unrefElement';
+import type { MaybeComputedElementRef } from '@/composables/component/unrefElement';
+
+export type UseSwipeDirection = 'up' | 'down' | 'left' | 'right' | 'none';
+
+export interface UseSwipePosition {
+  x: number;
+  y: number;
+}
+
+export interface UseSwipeOptions extends ConfigurableWindow {
+  /**
+   * Register events as passive.
+   *
+   * When `false`, the move handler can call `preventDefault()` to block
+   * scrolling while swiping horizontally.
+   *
+   * @default true
+   */
+  passive?: boolean;
+
+  /**
+   * Minimum distance in pixels travelled before a swipe is registered.
+   *
+   * @default 50
+   */
+  threshold?: number;
+
+  /**
+   * Callback fired on the initial touch, before the threshold is met.
+   */
+  onSwipeStart?: (event: TouchEvent) => void;
+
+  /**
+   * Callback fired on every move once the swipe is active.
+   */
+  onSwipe?: (event: TouchEvent) => void;
+
+  /**
+   * Callback fired when the touch ends, with the resolved direction.
+   */
+  onSwipeEnd?: (event: TouchEvent, direction: UseSwipeDirection) => void;
+}
+
+export interface UseSwipeReturn {
+  /**
+   * Whether a swipe is currently in progress (threshold exceeded).
+   */
+  isSwiping: ShallowRef<boolean>;
+
+  /**
+   * The resolved swipe direction.
+   */
+  direction: ComputedRef<UseSwipeDirection>;
+
+  /**
+   * Coordinates of the initial touch.
+   */
+  coordsStart: DeepReadonly<UseSwipePosition>;
+
+  /**
+   * Coordinates of the latest touch position.
+   */
+  coordsEnd: DeepReadonly<UseSwipePosition>;
+
+  /**
+   * Signed horizontal distance travelled (`coordsEnd.x - coordsStart.x`).
+   */
+  lengthX: ComputedRef<number>;
+
+  /**
+   * Signed vertical distance travelled (`coordsEnd.y - coordsStart.y`).
+   */
+  lengthY: ComputedRef<number>;
+
+  /**
+   * Tear down all listeners.
+   */
+  stop: () => void;
+}
+
+/**
+ * @name useSwipe
+ * @category Sensors
+ * @description Detect swipe gestures via touch events on a target element.
+ * Tracks start/end coordinates, the active state and the resolved direction.
+ *
+ * @param {MaybeComputedElementRef} target - Element ref, getter, or instance to listen on
+ * @param {UseSwipeOptions} [options={}] - Threshold, lifecycle callbacks and passive flag
+ * @returns {UseSwipeReturn} Reactive swipe state and a `stop` teardown function
+ *
+ * @example
+ * const el = useTemplateRef<HTMLElement>('el');
+ * const { isSwiping, direction, lengthX, lengthY } = useSwipe(el, {
+ *   onSwipeEnd(e, dir) { console.log(dir); },
+ * });
+ *
+ * @since 0.0.15
+ */
+export function useSwipe(
+  target: MaybeComputedElementRef,
+  options: UseSwipeOptions = {},
+): UseSwipeReturn {
+  const {
+    passive = true,
+    threshold = 50,
+    onSwipe,
+    onSwipeEnd,
+    onSwipeStart,
+    window = defaultWindow,
+  } = options;
+
+  const coordsStart = reactive<UseSwipePosition>({ x: 0, y: 0 });
+  const coordsEnd = reactive<UseSwipePosition>({ x: 0, y: 0 });
+
+  // diffX/diffY follow the start-minus-end convention used for direction math.
+  const diffX = computed(() => coordsStart.x - coordsEnd.x);
+  const diffY = computed(() => coordsStart.y - coordsEnd.y);
+
+  // Public lengths report the signed travel from start to end.
+  const lengthX = computed(() => coordsEnd.x - coordsStart.x);
+  const lengthY = computed(() => coordsEnd.y - coordsStart.y);
+
+  const { max, abs } = Math;
+  const isThresholdExceeded = computed(() => max(abs(diffX.value), abs(diffY.value)) >= threshold);
+
+  const isSwiping = shallowRef(false);
+
+  const direction = computed<UseSwipeDirection>(() => {
+    if (!isThresholdExceeded.value)
+      return 'none';
+
+    if (abs(diffX.value) > abs(diffY.value))
+      return diffX.value > 0 ? 'left' : 'right';
+
+    return diffY.value > 0 ? 'up' : 'down';
+  });
+
+  // capture: !passive lets the move handler call preventDefault when blocking
+  // native scrolling during a horizontal swipe.
+  const listenerOptions = { passive, capture: !passive };
+
+  const updateCoordsStart = (x: number, y: number): void => {
+    coordsStart.x = x;
+    coordsStart.y = y;
+  };
+
+  const updateCoordsEnd = (x: number, y: number): void => {
+    coordsEnd.x = x;
+    coordsEnd.y = y;
+  };
+
+  const getTouchEventCoords = (event: TouchEvent): [number, number] => [
+    event.touches[0]!.clientX,
+    event.touches[0]!.clientY,
+  ];
+
+  const onTouchStart = (event: TouchEvent): void => {
+    if (event.touches.length !== 1)
+      return;
+
+    const [x, y] = getTouchEventCoords(event);
+    updateCoordsStart(x, y);
+    updateCoordsEnd(x, y);
+    onSwipeStart?.(event);
+  };
+
+  const onTouchMove = (event: TouchEvent): void => {
+    if (event.touches.length !== 1)
+      return;
+
+    const [x, y] = getTouchEventCoords(event);
+    updateCoordsEnd(x, y);
+
+    if (!listenerOptions.passive && abs(diffX.value) > abs(diffY.value))
+      event.preventDefault();
+
+    if (!isSwiping.value && isThresholdExceeded.value)
+      isSwiping.value = true;
+
+    if (isSwiping.value)
+      onSwipe?.(event);
+  };
+
+  const onTouchEnd = (event: TouchEvent): void => {
+    if (isSwiping.value)
+      onSwipeEnd?.(event, direction.value);
+
+    isSwiping.value = false;
+  };
+
+  // Resolve the listen target lazily so listeners re-bind when the underlying
+  // element changes (template refs resolve after mount).
+  const listenTarget = (): EventTarget | null | undefined =>
+    unrefElement(target) as EventTarget | null | undefined;
+
+  const stops = window
+    ? [
+        useEventListener(listenTarget, 'touchstart', onTouchStart as (e: Event) => void, listenerOptions),
+        useEventListener(listenTarget, 'touchmove', onTouchMove as (e: Event) => void, listenerOptions),
+        useEventListener(listenTarget, ['touchend', 'touchcancel'], onTouchEnd as (e: Event) => void, listenerOptions),
+      ]
+    : [];
+
+  const stop = (): void => stops.forEach(s => s());
+
+  return {
+    isSwiping,
+    direction: shallowReadonly(direction) as ComputedRef<UseSwipeDirection>,
+    coordsStart: shallowReadonly(coordsStart),
+    coordsEnd: shallowReadonly(coordsEnd),
+    lengthX,
+    lengthY,
+    stop,
+  };
+}
diff --git a/vue/toolkit/src/composables/sensors/useTextSelection/demo.vue b/vue/toolkit/src/composables/sensors/useTextSelection/demo.vue
new file mode 100644
index 0000000..14eb2ec
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useTextSelection/demo.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useTextSelection } from './index';
+
+const { text, ranges, rects } = useTextSelection();
+
+const charCount = computed(() => text.value.length);
+const wordCount = computed(() => {
+  const trimmed = text.value.trim();
+  return trimmed ? trimmed.split(/\s+/).length : 0;
+});
+
+const sample = 'Select any part of this paragraph with your cursor. '
+  + 'The composable tracks the live selection through Window.getSelection, '
+  + 'exposing the selected text, its bounding rectangles, and the underlying '
+  + 'Range objects — all fully reactive.';
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Select some text</span>
+
+    <p class="select-text rounded-xl border border-(--border) bg-(--bg-elevated) p-4 text-sm leading-relaxed text-(--fg) selection:bg-(--accent) selection:text-(--accent-fg)">
+      {{ sample }}
+    </p>
+
+    <div class="grid grid-cols-3 gap-2">
+      <div class="flex flex-col items-center gap-0.5 rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <span class="font-mono text-2xl font-bold tabular-nums text-(--fg)">{{ charCount }}</span>
+        <span class="text-xs text-(--fg-subtle)">chars</span>
+      </div>
+      <div class="flex flex-col items-center gap-0.5 rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <span class="font-mono text-2xl font-bold tabular-nums text-(--fg)">{{ wordCount }}</span>
+        <span class="text-xs text-(--fg-subtle)">words</span>
+      </div>
+      <div class="flex flex-col items-center gap-0.5 rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <span class="font-mono text-2xl font-bold tabular-nums text-(--fg)">{{ ranges.length }}</span>
+        <span class="text-xs text-(--fg-subtle)">ranges</span>
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Selected text</span>
+      <p v-if="text" class="mt-1.5 break-words font-mono text-sm text-(--accent-text)">
+        “{{ text }}”
+      </p>
+      <p v-else class="mt-1.5 font-mono text-sm text-(--fg-subtle)">
+        Nothing selected yet.
+      </p>
+    </div>
+
+    <div v-if="rects.length" class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs text-(--fg-muted) tabular-nums">
+      first rect · {{ Math.round(rects[0]!.width) }} × {{ Math.round(rects[0]!.height) }} px
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useTextSelection/index.test.ts b/vue/toolkit/src/composables/sensors/useTextSelection/index.test.ts
new file mode 100644
index 0000000..5a7aa75
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useTextSelection/index.test.ts
@@ -0,0 +1,252 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick } from 'vue';
+import { useTextSelection } from '.';
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+  // Clear any selection so tests stay isolated.
+  globalThis.getSelection()?.removeAllRanges();
+  document.body.innerHTML = '';
+});
+
+/**
+ * jsdom never auto-fires `selectionchange`, so mutate the live selection and
+ * dispatch the event ourselves to mimic real browser behavior.
+ */
+function selectContents(node: Node): void {
+  const selection = globalThis.getSelection()!;
+  selection.removeAllRanges();
+  const range = document.createRange();
+  range.selectNodeContents(node);
+  selection.addRange(range);
+  document.dispatchEvent(new Event('selectionchange'));
+}
+
+function clearSelection(): void {
+  globalThis.getSelection()?.removeAllRanges();
+  document.dispatchEvent(new Event('selectionchange'));
+}
+
+describe(useTextSelection, () => {
+  it('starts empty when nothing is selected', () => {
+    const scope = effectScope();
+    let state: ReturnType<typeof useTextSelection>;
+    scope.run(() => {
+      state = useTextSelection();
+    });
+
+    expect(state!.text.value).toBe('');
+    expect(state!.ranges.value).toEqual([]);
+    expect(state!.rects.value).toEqual([]);
+    scope.stop();
+  });
+
+  it('tracks the selected text on selectionchange', async () => {
+    const div = document.createElement('div');
+    div.textContent = 'Hello World';
+    document.body.appendChild(div);
+
+    const scope = effectScope();
+    let state: ReturnType<typeof useTextSelection>;
+    scope.run(() => {
+      state = useTextSelection();
+    });
+
+    selectContents(div);
+    await nextTick();
+
+    expect(state!.text.value).toBe('Hello World');
+    scope.stop();
+  });
+
+  it('exposes the ranges that make up the selection', async () => {
+    const div = document.createElement('div');
+    div.textContent = 'Ranges here';
+    document.body.appendChild(div);
+
+    const scope = effectScope();
+    let state: ReturnType<typeof useTextSelection>;
+    scope.run(() => {
+      state = useTextSelection();
+    });
+
+    selectContents(div);
+    await nextTick();
+
+    expect(state!.ranges.value).toHaveLength(1);
+    expect(state!.ranges.value[0]).toBeInstanceOf(Range);
+    expect(state!.ranges.value[0]!.toString()).toBe('Ranges here');
+    scope.stop();
+  });
+
+  it('maps each range to its bounding rect', async () => {
+    const div = document.createElement('div');
+    div.textContent = 'Rect me';
+    document.body.appendChild(div);
+
+    // jsdom Range lacks getBoundingClientRect; define it before spying.
+    const fakeRect = { x: 1, y: 2, width: 3, height: 4, top: 2, left: 1, right: 4, bottom: 6 } as DOMRect;
+    const original = (Range.prototype as { getBoundingClientRect?: () => DOMRect }).getBoundingClientRect;
+    (Range.prototype as { getBoundingClientRect: () => DOMRect }).getBoundingClientRect = () => fakeRect;
+
+    const scope = effectScope();
+    let state: ReturnType<typeof useTextSelection>;
+    scope.run(() => {
+      state = useTextSelection();
+    });
+
+    selectContents(div);
+    await nextTick();
+
+    expect(state!.rects.value).toEqual([fakeRect]);
+
+    if (original)
+      (Range.prototype as { getBoundingClientRect: () => DOMRect }).getBoundingClientRect = original;
+    else
+      delete (Range.prototype as { getBoundingClientRect?: () => DOMRect }).getBoundingClientRect;
+    scope.stop();
+  });
+
+  it('exposes the raw Selection object', async () => {
+    const div = document.createElement('div');
+    div.textContent = 'Raw selection';
+    document.body.appendChild(div);
+
+    const scope = effectScope();
+    let state: ReturnType<typeof useTextSelection>;
+    scope.run(() => {
+      state = useTextSelection();
+    });
+
+    selectContents(div);
+    await nextTick();
+
+    expect(state!.selection.value).not.toBeNull();
+    expect(state!.selection.value!.toString()).toBe('Raw selection');
+    scope.stop();
+  });
+
+  it('resets when the selection is cleared', async () => {
+    const div = document.createElement('div');
+    div.textContent = 'Will be cleared';
+    document.body.appendChild(div);
+
+    const scope = effectScope();
+    let state: ReturnType<typeof useTextSelection>;
+    scope.run(() => {
+      state = useTextSelection();
+    });
+
+    selectContents(div);
+    await nextTick();
+    expect(state!.text.value).toBe('Will be cleared');
+
+    clearSelection();
+    await nextTick();
+
+    expect(state!.text.value).toBe('');
+    expect(state!.ranges.value).toEqual([]);
+    expect(state!.rects.value).toEqual([]);
+    scope.stop();
+  });
+
+  it('reacts to a new identity even when the browser mutates the same Selection in place', async () => {
+    const a = document.createElement('div');
+    a.textContent = 'First';
+    const b = document.createElement('div');
+    b.textContent = 'Second';
+    document.body.append(a, b);
+
+    const scope = effectScope();
+    let state: ReturnType<typeof useTextSelection>;
+    scope.run(() => {
+      state = useTextSelection();
+    });
+
+    selectContents(a);
+    await nextTick();
+    expect(state!.text.value).toBe('First');
+
+    selectContents(b);
+    await nextTick();
+    expect(state!.text.value).toBe('Second');
+    scope.stop();
+  });
+
+  it('cleans up the listener when the scope is disposed', () => {
+    const add = vi.fn();
+    const remove = vi.fn();
+    const windowStub = { getSelection: () => null } as unknown as Window;
+    const documentStub = {
+      addEventListener: add,
+      removeEventListener: remove,
+    } as unknown as Document;
+
+    const scope = effectScope();
+    scope.run(() => {
+      useTextSelection({ window: windowStub, document: documentStub });
+    });
+
+    expect(add).toHaveBeenCalledWith('selectionchange', expect.any(Function), expect.anything());
+    expect(remove).not.toHaveBeenCalled();
+
+    scope.stop();
+
+    expect(remove).toHaveBeenCalledWith('selectionchange', expect.any(Function), expect.anything());
+  });
+
+  it('accepts a custom document/window via options', async () => {
+    let listener: ((event: Event) => void) | undefined;
+    const selectionStub = {
+      _text: '',
+      rangeCount: 0,
+      toString() { return this._text; },
+      getRangeAt: vi.fn(),
+    };
+    const windowStub = {
+      getSelection: () => selectionStub as unknown as Selection,
+    } as unknown as Window;
+    const documentStub = {
+      addEventListener: (_type: string, cb: (event: Event) => void) => { listener = cb; },
+      removeEventListener: vi.fn(),
+    } as unknown as Document;
+
+    const scope = effectScope();
+    let state: ReturnType<typeof useTextSelection>;
+    scope.run(() => {
+      state = useTextSelection({ window: windowStub, document: documentStub });
+    });
+
+    expect(state!.text.value).toBe('');
+
+    selectionStub._text = 'Custom doc text';
+    listener?.(new Event('selectionchange'));
+    await nextTick();
+
+    expect(state!.text.value).toBe('Custom doc text');
+    scope.stop();
+  });
+
+  it('returns empty state and registers no listener when selection is unsupported', () => {
+    // Emulate an SSR / unsupported environment: getSelection yields null and the
+    // document never emits selectionchange.
+    const add = vi.fn();
+    const windowStub = { getSelection: () => null } as unknown as Window;
+    const documentStub = {
+      addEventListener: add,
+      removeEventListener: vi.fn(),
+    } as unknown as Document;
+
+    const scope = effectScope();
+    let state: ReturnType<typeof useTextSelection>;
+    scope.run(() => {
+      state = useTextSelection({ window: windowStub, document: documentStub });
+    });
+
+    expect(state!.selection.value).toBeNull();
+    expect(state!.text.value).toBe('');
+    expect(state!.ranges.value).toEqual([]);
+    expect(state!.rects.value).toEqual([]);
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/sensors/useTextSelection/index.ts b/vue/toolkit/src/composables/sensors/useTextSelection/index.ts
new file mode 100644
index 0000000..a4fd2ce
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useTextSelection/index.ts
@@ -0,0 +1,81 @@
+import type { ComputedRef, ShallowRef } from 'vue';
+import { computed, shallowRef } from 'vue';
+import type { ConfigurableDocument, ConfigurableWindow } from '@/types';
+import { defaultWindow } from '@/types';
+import { useEventListener } from '@/composables/browser/useEventListener';
+
+export interface UseTextSelectionOptions extends ConfigurableWindow, ConfigurableDocument {}
+
+export interface UseTextSelectionReturn {
+  /**
+   * The selected text, equivalent to `Selection.toString()`.
+   */
+  text: ComputedRef<string>;
+  /**
+   * Bounding rectangles for every range in the current selection.
+   */
+  rects: ComputedRef<DOMRect[]>;
+  /**
+   * The `Range` objects that make up the current selection.
+   */
+  ranges: ComputedRef<Range[]>;
+  /**
+   * The raw `Selection` object, or `null` when nothing is selected / unsupported.
+   */
+  selection: ShallowRef<Selection | null>;
+}
+
+function getRangesFromSelection(selection: Selection): Range[] {
+  const rangeCount = selection.rangeCount ?? 0;
+  const ranges: Range[] = [];
+
+  for (let i = 0; i < rangeCount; i++)
+    ranges.push(selection.getRangeAt(i));
+
+  return ranges;
+}
+
+/**
+ * @name useTextSelection
+ * @category Sensors
+ * @description Reactively track the user's text selection via `Window.getSelection`.
+ *
+ * @param {UseTextSelectionOptions} [options={}] Options (custom `window`, `document`)
+ * @returns {UseTextSelectionReturn} Reactive `text`, `rects`, `ranges`, and the raw `selection`
+ *
+ * @example
+ * const { text, rects, ranges, selection } = useTextSelection();
+ * watch(text, (value) => console.log('selected:', value));
+ *
+ * @since 0.0.15
+ */
+export function useTextSelection(
+  options: UseTextSelectionOptions = {},
+): UseTextSelectionReturn {
+  const { window = defaultWindow } = options;
+  const document = options.document ?? window?.document;
+
+  const selection = shallowRef<Selection | null>(window?.getSelection() ?? null);
+  const text = computed<string>(() => selection.value?.toString() ?? '');
+  const ranges = computed<Range[]>(() => (selection.value ? getRangesFromSelection(selection.value) : []));
+  const rects = computed<DOMRect[]>(() => ranges.value.map(range => range.getBoundingClientRect()));
+
+  const onSelectionChange = (): void => {
+    // Reassign through `null` so the shallowRef sees a new identity even when the
+    // browser mutates and reuses the same live `Selection` object in place.
+    selection.value = null;
+
+    if (window)
+      selection.value = window.getSelection();
+  };
+
+  if (document)
+    useEventListener(document, 'selectionchange', onSelectionChange, { passive: true });
+
+  return {
+    text,
+    rects,
+    ranges,
+    selection,
+  };
+}
diff --git a/vue/toolkit/src/composables/state/createSharedComposable/demo.vue b/vue/toolkit/src/composables/state/createSharedComposable/demo.vue
new file mode 100644
index 0000000..c94f87d
--- /dev/null
+++ b/vue/toolkit/src/composables/state/createSharedComposable/demo.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { defineComponent, h, onScopeDispose, ref, shallowRef } from 'vue';
+import { createSharedComposable } from './index';
+
+// A tiny composable that holds a counter plus a per-instance setup id, so we can
+// observe how many independent instances actually get created behind the scenes.
+let instanceCounter = 0;
+
+function useLiveCounter() {
+  const setupId = ++instanceCounter;
+  const count = shallowRef(0);
+
+  // Demos render client-only, so the timer API is always available here.
+  const id = setInterval(() => {
+    count.value += 1;
+  }, 1000);
+
+  onScopeDispose(() => clearInterval(id));
+
+  return { count, setupId };
+}
+
+// Shared variant: every consumer reuses the SAME instance + ticking interval.
+const useSharedCounter = createSharedComposable(useLiveCounter);
+
+// A subscriber widget that consumes the shared composable on mount and releases
+// it on unmount (ref-counting drives scope creation / disposal).
+const Subscriber = defineComponent({
+  props: { label: { type: String, required: true } },
+  setup(props) {
+    const { count, setupId } = useSharedCounter();
+    return () =>
+      h('div', { class: 'flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2' }, [
+        h('span', { class: 'text-sm font-medium text-(--fg)' }, props.label),
+        h('span', { class: 'font-mono text-sm tabular-nums text-(--accent-text)' }, `count ${count.value} · #${setupId}`),
+      ]);
+  },
+});
+
+const subscribers = ref<string[]>(['Consumer A', 'Consumer B']);
+const names = ['A', 'B', 'C', 'D', 'E'];
+
+function addSubscriber() {
+  const next = names[subscribers.value.length];
+  if (next)
+    subscribers.value.push(`Consumer ${next}`);
+}
+
+function removeSubscriber() {
+  subscribers.value.pop();
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Shared composable</span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        {{ subscribers.length }} active
+      </span>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-3">
+      <div v-if="subscribers.length" class="flex flex-col gap-2">
+        <Subscriber
+          v-for="name in subscribers"
+          :key="name"
+          :label="name"
+        />
+      </div>
+      <p v-else class="px-3 py-6 text-center text-sm text-(--fg-subtle)">
+        No consumers — the shared scope is disposed and its interval cleared.
+      </p>
+    </div>
+
+    <p class="text-xs leading-relaxed text-(--fg-subtle)">
+      Every consumer reads the same count and the same setup id (<span class="font-mono">#</span>),
+      proving a single instance and one interval back all of them. Remove every
+      consumer to dispose the scope; adding one again creates a fresh instance.
+    </p>
+
+    <div class="flex gap-2">
+      <button
+        type="button"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="subscribers.length >= names.length"
+        @click="addSubscriber"
+      >
+        Add consumer
+      </button>
+      <button
+        type="button"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="!subscribers.length"
+        @click="removeSubscriber"
+      >
+        Remove consumer
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/state/createSharedComposable/index.test.ts b/vue/toolkit/src/composables/state/createSharedComposable/index.test.ts
new file mode 100644
index 0000000..66daf79
--- /dev/null
+++ b/vue/toolkit/src/composables/state/createSharedComposable/index.test.ts
@@ -0,0 +1,180 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { defineComponent, ref } from 'vue';
+import type { Ref } from 'vue';
+import { mount } from '@vue/test-utils';
+import { createSharedComposable } from '.';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+
+describe(createSharedComposable, () => {
+  afterEach(() => {
+    vi.resetModules();
+    vi.doUnmock('@robonen/platform/multi');
+  });
+
+  it('returns a function with the same call signature', () => {
+    const shared = createSharedComposable((value: number) => ref(value));
+
+    expect(shared).toBeTypeOf('function');
+  });
+
+  it('reuses a single instance across consumers', () => {
+    const factory = vi.fn(() => ({ count: ref(0) }));
+    const useShared = createSharedComposable(factory);
+
+    let firstState: { count: Ref<number> } | undefined;
+    let secondState: { count: Ref<number> } | undefined;
+
+    const Host = defineComponent({
+      setup() {
+        const a = useShared();
+        const b = useShared();
+        firstState = a;
+        secondState = b;
+        return () => null;
+      },
+    });
+
+    const wrapper = mount(Host);
+
+    expect(factory).toHaveBeenCalledTimes(1);
+    expect(firstState).toBe(secondState);
+
+    wrapper.unmount();
+  });
+
+  it('shares reactive state between separate component instances', () => {
+    const useShared = createSharedComposable(() => ({ count: ref(0) }));
+
+    let stateA: { count: Ref<number> } | undefined;
+    let stateB: { count: Ref<number> } | undefined;
+
+    const ComponentA = defineComponent({
+      setup() {
+        stateA = useShared();
+        return () => null;
+      },
+    });
+
+    const ComponentB = defineComponent({
+      setup() {
+        stateB = useShared();
+        return () => null;
+      },
+    });
+
+    const a = mount(ComponentA);
+    const b = mount(ComponentB);
+
+    expect(stateA).toBe(stateB);
+
+    stateA!.count.value = 42;
+    expect(stateB!.count.value).toBe(42);
+
+    a.unmount();
+    b.unmount();
+  });
+
+  it('keeps state alive while at least one consumer remains', () => {
+    const factory = vi.fn(() => ({ count: ref(0) }));
+    const useShared = createSharedComposable(factory);
+
+    const make = () => defineComponent({
+      setup() {
+        useShared();
+        return () => null;
+      },
+    });
+
+    const a = mount(make());
+    const b = mount(make());
+
+    expect(factory).toHaveBeenCalledTimes(1);
+
+    a.unmount();
+
+    // Still one consumer (b), so a new mount must reuse the existing instance.
+    const c = mount(make());
+    expect(factory).toHaveBeenCalledTimes(1);
+
+    b.unmount();
+    c.unmount();
+  });
+
+  it('disposes the scope and recreates state after the last consumer leaves', () => {
+    const factory = vi.fn(() => ({ count: ref(0) }));
+    const useShared = createSharedComposable(factory);
+
+    const make = () => defineComponent({
+      setup() {
+        useShared();
+        return () => null;
+      },
+    });
+
+    const a = mount(make());
+    expect(factory).toHaveBeenCalledTimes(1);
+
+    a.unmount();
+
+    // Last consumer gone -> next call rebuilds.
+    const b = mount(make());
+    expect(factory).toHaveBeenCalledTimes(2);
+
+    b.unmount();
+  });
+
+  it('stops effects in the shared scope when fully disposed', () => {
+    const stop = vi.fn();
+    const useShared = createSharedComposable(() => {
+      // tryOnScopeDispose registers against the shared effect scope.
+      tryOnScopeDispose(stop);
+      return ref(0);
+    });
+
+    const make = () => defineComponent({
+      setup() {
+        useShared();
+        return () => null;
+      },
+    });
+
+    const a = mount(make());
+    const b = mount(make());
+
+    expect(stop).not.toHaveBeenCalled();
+
+    a.unmount();
+    expect(stop).not.toHaveBeenCalled();
+
+    b.unmount();
+    expect(stop).toHaveBeenCalledTimes(1);
+  });
+
+  it('works outside of a component scope (no tracking, no crash)', () => {
+    const factory = vi.fn(() => ({ count: ref(0) }));
+    const useShared = createSharedComposable(factory);
+
+    const first = useShared();
+    const second = useShared();
+
+    expect(factory).toHaveBeenCalledTimes(1);
+    expect(first).toBe(second);
+  });
+
+  it('falls back to the raw composable in a non-client (SSR) environment', async () => {
+    vi.resetModules();
+    vi.doMock('@robonen/platform/multi', () => ({ isClient: false }));
+
+    const { createSharedComposable: ssrShared } = await import('.');
+
+    const factory = vi.fn(() => ({ count: ref(0) }));
+    const useShared = ssrShared(factory);
+
+    const a = useShared();
+    const b = useShared();
+
+    // No sharing on the server: every call builds a fresh instance.
+    expect(factory).toHaveBeenCalledTimes(2);
+    expect(a).not.toBe(b);
+  });
+});
diff --git a/vue/toolkit/src/composables/state/createSharedComposable/index.ts b/vue/toolkit/src/composables/state/createSharedComposable/index.ts
new file mode 100644
index 0000000..83f7f98
--- /dev/null
+++ b/vue/toolkit/src/composables/state/createSharedComposable/index.ts
@@ -0,0 +1,59 @@
+import type { AnyFunction } from '@robonen/stdlib';
+import { isClient } from '@robonen/platform/multi';
+import { effectScope } from 'vue';
+import type { EffectScope } from 'vue';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+
+export type CreateSharedComposableReturn<Fn extends AnyFunction>
+  = Fn;
+
+/**
+ * @name createSharedComposable
+ * @category State
+ * @description Promotes a composable to a shared one: every call reuses the same instance backed by a single effect scope. The scope is created lazily on the first consumer and is ref-counted, so it is disposed only when the last consumer's scope unmounts. State is recreated on the next call after a full dispose.
+ *
+ * @param {Fn} composable The composable to share across consumers.
+ * @returns {CreateSharedComposableReturn<Fn>} A shared variant of the composable with the same signature.
+ *
+ * @example
+ * const useSharedMouse = createSharedComposable(useMouse);
+ * // Both components share a single set of listeners and reactive state.
+ * const { x, y } = useSharedMouse();
+ *
+ * @since 0.0.15
+ */
+export function createSharedComposable<Fn extends AnyFunction>(
+  composable: Fn,
+): CreateSharedComposableReturn<Fn> {
+  // SSR: there is no scope lifecycle to ref-count against, so fall back to the
+  // raw composable. Each request gets a fresh instance, which is what we want.
+  if (!isClient)
+    return composable;
+
+  let subscribers = 0;
+  let state: ReturnType<Fn> | undefined;
+  let scope: EffectScope | undefined;
+
+  const dispose = (): void => {
+    subscribers -= 1;
+
+    if (scope && subscribers <= 0) {
+      scope.stop();
+      state = undefined;
+      scope = undefined;
+    }
+  };
+
+  return ((...args: Parameters<Fn>): ReturnType<Fn> => {
+    subscribers += 1;
+
+    if (!scope) {
+      scope = effectScope(true);
+      state = scope.run(() => composable(...args)) as ReturnType<Fn>;
+    }
+
+    tryOnScopeDispose(dispose);
+
+    return state as ReturnType<Fn>;
+  }) as Fn;
+}
diff --git a/vue/toolkit/src/composables/state/index.ts b/vue/toolkit/src/composables/state/index.ts
new file mode 100644
index 0000000..939ffce
--- /dev/null
+++ b/vue/toolkit/src/composables/state/index.ts
@@ -0,0 +1,16 @@
+export * from './createSharedComposable';
+export * from './useAppSharedState';
+export * from './useAsyncState';
+export * from './useContextFactory';
+export * from './useCounter';
+export * from './useCycleList';
+export * from './useDebouncedRefHistory';
+export * from './useId';
+export * from './useInjectionStore';
+export * from './useLastChanged';
+export * from './useManualRefHistory';
+export * from './useOffsetPagination';
+export * from './useRefHistory';
+export * from './useStepper';
+export * from './useThrottledRefHistory';
+export * from './useToggle';
diff --git a/vue/toolkit/src/composables/state/useAppSharedState/demo.vue b/vue/toolkit/src/composables/state/useAppSharedState/demo.vue
new file mode 100644
index 0000000..f014e3d
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useAppSharedState/demo.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed, reactive } from 'vue';
+import { useAppSharedState } from './index';
+
+// Build one shared store; every consumer that calls useStore() gets the SAME
+// reactive object back, so edits in one panel are reflected in the other.
+const useStore = useAppSharedState(() => {
+  const state = reactive({ likes: 0, lastBy: '—' });
+  const like = (by: string) => {
+    state.likes++;
+    state.lastBy = by;
+  };
+  return { state, like };
+});
+
+// Two independent "components" subscribing to the same shared state.
+const alice = useStore();
+const bob = useStore();
+
+const total = computed(() => alice.state.likes);
+</script>
+
+<template>
+  <div class="w-full max-w-md flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col items-center gap-1">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Shared likes</span>
+      <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ total }}</span>
+      <span class="text-xs text-(--fg-subtle)">last reaction by {{ alice.state.lastBy }}</span>
+    </div>
+
+    <div class="grid grid-cols-2 gap-3">
+      <!-- Consumer A -->
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+        <div class="flex items-center gap-2">
+          <span class="flex size-7 items-center justify-center rounded-full bg-(--accent-subtle) text-xs font-semibold text-(--accent-text)">A</span>
+          <span class="text-sm font-medium text-(--fg)">Alice’s panel</span>
+        </div>
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center font-mono text-sm tabular-nums text-(--fg)">
+          reads {{ alice.state.likes }}
+        </div>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+          @click="alice.like('Alice')"
+        >
+          ♥ Like
+        </button>
+      </div>
+
+      <!-- Consumer B -->
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+        <div class="flex items-center gap-2">
+          <span class="flex size-7 items-center justify-center rounded-full bg-(--accent-subtle) text-xs font-semibold text-(--accent-text)">B</span>
+          <span class="text-sm font-medium text-(--fg)">Bob’s panel</span>
+        </div>
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center font-mono text-sm tabular-nums text-(--fg)">
+          reads {{ bob.state.likes }}
+        </div>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="bob.like('Bob')"
+        >
+          ♥ Like
+        </button>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Both panels call <span class="font-mono text-(--fg-muted)">useStore()</span> independently yet share one
+      reactive instance — like in either column updates the other instantly.
+    </p>
+  </div>
+</template>
diff --git a/web/vue/src/composables/state/useAppSharedState/index.test.ts b/vue/toolkit/src/composables/state/useAppSharedState/index.test.ts
similarity index 92%
rename from web/vue/src/composables/state/useAppSharedState/index.test.ts
rename to vue/toolkit/src/composables/state/useAppSharedState/index.test.ts
index 4d3f197..381e7f2 100644
--- a/web/vue/src/composables/state/useAppSharedState/index.test.ts
+++ b/vue/toolkit/src/composables/state/useAppSharedState/index.test.ts
@@ -1,5 +1,5 @@
-import { describe, it, vi, expect } from 'vitest';
-import { ref, reactive } from 'vue';
+import { describe, expect, it, vi } from 'vitest';
+import { reactive, ref } from 'vue';
 import { useAppSharedState } from '.';
 
 describe(useAppSharedState, () => {
@@ -37,4 +37,4 @@ describe(useAppSharedState, () => {
     expect(sharedState2.state.count).toBe(1);
     expect(sharedState1).toBe(sharedState2);
   });
-});
\ No newline at end of file
+});
diff --git a/web/vue/src/composables/state/useAppSharedState/index.ts b/vue/toolkit/src/composables/state/useAppSharedState/index.ts
similarity index 94%
rename from web/vue/src/composables/state/useAppSharedState/index.ts
rename to vue/toolkit/src/composables/state/useAppSharedState/index.ts
index e03ba7a..3dc9a2d 100644
--- a/web/vue/src/composables/state/useAppSharedState/index.ts
+++ b/vue/toolkit/src/composables/state/useAppSharedState/index.ts
@@ -7,23 +7,23 @@ import { effectScope } from 'vue';
  * @name useAppSharedState
  * @category State
  * @description Provides a shared state object for use across Vue instances
- * 
+ *
  * @param {Function} stateFactory A factory function that returns the shared state object
  * @returns {Function} A function that returns the shared state object
- * 
+ *
  * @example
  * const useSharedState = useAppSharedState((initValue?: number) => {
  *   const count = ref(initValue ?? 0);
  *   return { count };
  * });
- * 
+ *
  * @example
  * const useSharedState = useAppSharedState(() => {
  *   const state = reactive({ count: 0 });
  *   const increment = () => state.count++;
  *   return { state, increment };
  * });
- * 
+ *
  * @since 0.0.1
  */
 export function useAppSharedState<Fn extends AnyFunction>(stateFactory: Fn) {
@@ -31,12 +31,12 @@ export function useAppSharedState<Fn extends AnyFunction>(stateFactory: Fn) {
   let state: ReturnType<Fn>;
   const scope = effectScope(true);
 
-  return ((...args: Parameters<Fn>) => {
+  return (...args: Parameters<Fn>) => {
     if (!initialized) {
       state = scope.run(() => stateFactory(...args));
       initialized = true;
     }
 
     return state;
-  });
+  };
 }
diff --git a/vue/toolkit/src/composables/state/useAsyncState/demo.vue b/vue/toolkit/src/composables/state/useAsyncState/demo.vue
new file mode 100644
index 0000000..074d657
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useAsyncState/demo.vue
@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useAsyncState } from './index';
+
+interface Profile {
+  name: string;
+  role: string;
+  commits: number;
+}
+
+const roster: Profile[] = [
+  { name: 'Ada Lovelace', role: 'Staff Engineer', commits: 1843 },
+  { name: 'Grace Hopper', role: 'Compiler Lead', commits: 2056 },
+  { name: 'Alan Turing', role: 'Research', commits: 974 },
+];
+
+// Simulated request: succeeds with a roster entry, or rejects to show error UI.
+function fetchProfile(id: number): Promise<Profile> {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      if (id < 0) {
+        reject(new Error('Profile not found (404)'));
+        return;
+      }
+      resolve(roster[id % roster.length]!);
+    }, 800);
+  });
+}
+
+const id = ref(0);
+
+const { state, isLoading, isReady, error, execute } = useAsyncState<Profile | null, [number]>(
+  args => fetchProfile(args),
+  null,
+  { immediate: false, resetOnExecute: true },
+);
+
+const errorMessage = computed(() => (error.value instanceof Error ? error.value.message : String(error.value)));
+
+function load() {
+  // Re-trigger with no delay, passing the current id as a param.
+  execute(0, id.value);
+}
+
+function loadMissing() {
+  execute(0, -1);
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4 min-h-40">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Profile</span>
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+        >
+          <span
+            class="size-1.5 rounded-full transition"
+            :class="isLoading ? 'bg-amber-500 animate-pulse' : isReady ? 'bg-emerald-500' : error ? 'bg-red-500' : 'bg-(--fg-subtle)'"
+          />
+          {{ isLoading ? 'Loading' : isReady ? 'Ready' : error ? 'Error' : 'Idle' }}
+        </span>
+      </div>
+
+      <!-- Loading skeleton -->
+      <div v-if="isLoading" class="flex items-center gap-3">
+        <div class="size-12 shrink-0 rounded-full bg-(--bg-inset) animate-pulse" />
+        <div class="flex flex-1 flex-col gap-2">
+          <div class="h-3.5 w-2/3 rounded bg-(--bg-inset) animate-pulse" />
+          <div class="h-3 w-1/2 rounded bg-(--bg-inset) animate-pulse" />
+        </div>
+      </div>
+
+      <!-- Error state -->
+      <div
+        v-else-if="error"
+        class="flex items-center gap-3 rounded-lg border border-red-500/30 bg-red-500/10 p-3 text-sm text-red-600 dark:text-red-400"
+      >
+        {{ errorMessage }}
+      </div>
+
+      <!-- Loaded data -->
+      <div v-else-if="state" class="flex items-center gap-3">
+        <div class="flex size-12 shrink-0 items-center justify-center rounded-full bg-(--accent-subtle) text-lg font-semibold text-(--accent-text)">
+          {{ state.name.charAt(0) }}
+        </div>
+        <div class="flex flex-1 flex-col">
+          <span class="font-semibold text-(--fg)">{{ state.name }}</span>
+          <span class="text-sm text-(--fg-muted)">{{ state.role }}</span>
+          <span class="font-mono text-xs tabular-nums text-(--fg-subtle)">{{ state.commits.toLocaleString() }} commits</span>
+        </div>
+      </div>
+
+      <!-- Idle / empty -->
+      <div v-else class="flex flex-1 items-center justify-center text-sm text-(--fg-subtle)">
+        Press “Load” to fetch a profile.
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="profile-id">Profile id</label>
+        <span class="font-mono text-xs tabular-nums text-(--fg-muted)">#{{ id }}</span>
+      </div>
+      <input
+        id="profile-id"
+        v-model.number="id"
+        type="range"
+        min="0"
+        max="5"
+        step="1"
+        class="w-full accent-(--accent) cursor-pointer"
+      >
+    </div>
+
+    <div class="grid grid-cols-2 gap-2">
+      <button
+        type="button"
+        :disabled="isLoading"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="load"
+      >
+        {{ isLoading ? 'Loading…' : 'Load' }}
+      </button>
+      <button
+        type="button"
+        :disabled="isLoading"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="loadMissing"
+      >
+        Trigger error
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/web/vue/src/composables/state/useAsyncState/index.test.ts b/vue/toolkit/src/composables/state/useAsyncState/index.test.ts
similarity index 98%
rename from web/vue/src/composables/state/useAsyncState/index.test.ts
rename to vue/toolkit/src/composables/state/useAsyncState/index.test.ts
index 5fcd9f2..b27ee02 100644
--- a/web/vue/src/composables/state/useAsyncState/index.test.ts
+++ b/vue/toolkit/src/composables/state/useAsyncState/index.test.ts
@@ -1,5 +1,5 @@
 import { isShallow, nextTick, ref } from 'vue';
-import { it, expect, describe, vi, beforeEach, afterEach } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { useAsyncState } from '.';
 
 describe(useAsyncState, () => {
@@ -70,7 +70,7 @@ describe(useAsyncState, () => {
 
   it('calls onSuccess callback', async () => {
     const onSuccess = vi.fn();
-  
+
     useAsyncState(
       Promise.resolve('data'),
       'initial',
@@ -85,7 +85,7 @@ describe(useAsyncState, () => {
   it('calls onError callback', async () => {
     const onError = vi.fn();
     const error = new Error('test-error');
-  
+
     useAsyncState(
       Promise.reject(error),
       'initial',
@@ -99,7 +99,7 @@ describe(useAsyncState, () => {
 
   it('throws error if throwError is true', async () => {
     const error = new Error('test-error');
-  
+
     const { executeImmediately } = useAsyncState(
       Promise.reject(error),
       'initial',
@@ -191,7 +191,7 @@ describe(useAsyncState, () => {
       Promise.resolve({ a: 1 }),
       { a: 0 },
     );
-  
+
     expect(state.value.a).toBe(1);
     expect(isShallow(state)).toBeTruthy();
   });
diff --git a/web/vue/src/composables/state/useAsyncState/index.ts b/vue/toolkit/src/composables/state/useAsyncState/index.ts
similarity index 94%
rename from web/vue/src/composables/state/useAsyncState/index.ts
rename to vue/toolkit/src/composables/state/useAsyncState/index.ts
index bd380a6..68239c5 100644
--- a/web/vue/src/composables/state/useAsyncState/index.ts
+++ b/vue/toolkit/src/composables/state/useAsyncState/index.ts
@@ -21,9 +21,9 @@ export interface UseAsyncStateReturnBase<Data, Params extends any[], Shallow ext
   executeImmediately: (...params: Params) => Promise<Data>;
 }
 
-export type UseAsyncStateReturn<Data, Params extends any[], Shallow extends boolean> =
-  & UseAsyncStateReturnBase<Data, Params, Shallow>
-  & PromiseLike<UseAsyncStateReturnBase<Data, Params, Shallow>>;
+export type UseAsyncStateReturn<Data, Params extends any[], Shallow extends boolean>
+  = & UseAsyncStateReturnBase<Data, Params, Shallow>
+    & PromiseLike<UseAsyncStateReturnBase<Data, Params, Shallow>>;
 
 /**
  * @name useAsyncState
@@ -107,11 +107,11 @@ export function useAsyncState<Data, Params extends any[] = [], Shallow extends b
           if (loading === false) {
             if (error.value)
               reject(error.value);
-            else 
+            else
               resolve(shell);
           }
         },
-        { 
+        {
           immediate: true,
           once: true,
           flush: 'sync',
@@ -126,5 +126,5 @@ export function useAsyncState<Data, Params extends any[] = [], Shallow extends b
     then(onFulfilled, onRejected) {
       return waitResolve().then(onFulfilled, onRejected);
     },
-  }
+  };
 }
diff --git a/vue/toolkit/src/composables/state/useContextFactory/demo.vue b/vue/toolkit/src/composables/state/useContextFactory/demo.vue
new file mode 100644
index 0000000..2f3ede4
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useContextFactory/demo.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { computed, defineComponent, h, reactive } from 'vue';
+import { useContextFactory } from './index';
+
+interface ThemeContext {
+  accent: string;
+  density: 'cozy' | 'compact';
+}
+
+// Create a typed, uniquely-keyed context once. `provide` is used by the parent,
+// `inject` by any descendant — no string-key collisions, fully type-safe.
+const ThemeCtx = useContextFactory<ThemeContext>('DemoTheme');
+
+// Parent owns the source of truth and provides it down the tree.
+const theme = reactive<ThemeContext>({ accent: '#6366f1', density: 'cozy' });
+ThemeCtx.provide(theme);
+
+const accents = ['#6366f1', '#10b981', '#f43f5e', '#0ea5e9'];
+
+// A descendant component that reads context via inject() — no props drilling.
+const ThemedCard = defineComponent({
+  name: 'ThemedCard',
+  setup() {
+    const ctx = ThemeCtx.inject();
+    const pad = computed(() => (ctx.density === 'cozy' ? '16px' : '8px'));
+    return () =>
+      h(
+        'div',
+        {
+          class: 'rounded-lg border border-(--border) bg-(--bg-inset)',
+          style: { padding: pad.value, borderLeft: `3px solid ${ctx.accent}` },
+        },
+        [
+          h('div', { class: 'text-sm font-medium text-(--fg)' }, 'Injected child'),
+          h(
+            'div',
+            { class: 'font-mono text-xs tabular-nums text-(--fg-muted)' },
+            `accent ${ctx.accent} · ${ctx.density}`,
+          ),
+        ],
+      );
+  },
+});
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Provider (parent)</span>
+
+      <div class="flex flex-col gap-2">
+        <span class="text-xs text-(--fg-muted)">Accent</span>
+        <div class="flex gap-2">
+          <button
+            v-for="color in accents"
+            :key="color"
+            type="button"
+            :aria-pressed="theme.accent === color"
+            class="size-8 rounded-lg border-2 transition active:scale-[0.95] cursor-pointer"
+            :class="theme.accent === color ? 'border-(--accent) scale-110' : 'border-(--border) hover:border-(--border-strong)'"
+            :style="{ backgroundColor: color }"
+            @click="theme.accent = color"
+          />
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <span class="text-xs text-(--fg-muted)">Density</span>
+        <div class="grid grid-cols-2 gap-2">
+          <button
+            type="button"
+            class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+            :class="theme.density === 'cozy'
+              ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
+              : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+            @click="theme.density = 'cozy'"
+          >
+            Cozy
+          </button>
+          <button
+            type="button"
+            class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+            :class="theme.density === 'compact'
+              ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
+              : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+            @click="theme.density = 'compact'"
+          >
+            Compact
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Descendant resolves the value through inject(), no props passed in -->
+    <ThemedCard />
+
+    <p class="text-xs text-(--fg-subtle)">
+      The card reads context with <span class="font-mono text-(--fg-muted)">inject()</span> — change the controls above
+      and it updates without a single prop.
+    </p>
+  </div>
+</template>
diff --git a/web/vue/src/composables/state/useContextFactory/index.test.ts b/vue/toolkit/src/composables/state/useContextFactory/index.test.ts
similarity index 97%
rename from web/vue/src/composables/state/useContextFactory/index.test.ts
rename to vue/toolkit/src/composables/state/useContextFactory/index.test.ts
index a9ab250..8a43a2b 100644
--- a/web/vue/src/composables/state/useContextFactory/index.test.ts
+++ b/vue/toolkit/src/composables/state/useContextFactory/index.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { defineComponent } from 'vue';
 import { useContextFactory } from '.';
 import { mount } from '@vue/test-utils';
@@ -78,4 +78,4 @@ describe(useContextFactory, () => {
 
     expect(childComponent.text()).toBe('test');
   });
-});
\ No newline at end of file
+});
diff --git a/web/vue/src/composables/state/useContextFactory/index.ts b/vue/toolkit/src/composables/state/useContextFactory/index.ts
similarity index 53%
rename from web/vue/src/composables/state/useContextFactory/index.ts
rename to vue/toolkit/src/composables/state/useContextFactory/index.ts
index e379561..ca4d1a4 100644
--- a/web/vue/src/composables/state/useContextFactory/index.ts
+++ b/vue/toolkit/src/composables/state/useContextFactory/index.ts
@@ -1,16 +1,16 @@
 import { inject as vueInject, provide as vueProvide } from 'vue';
-import type { InjectionKey, App } from 'vue';
+import type { App, InjectionKey } from 'vue';
 import { VueToolsError } from '@/utils';
 
 /**
  * @name useContextFactory
  * @category State
  * @description A composable that provides a factory for creating context with unique key
- * 
+ *
  * @param {string} name The name of the context
  * @returns {Object} An object with `inject`, `provide`, `appProvide` and `key` properties
  * @throws {VueToolsError} when the context is not provided
- * 
+ *
  * @example
  * const { inject, provide } = useContextFactory('MyContext');
  *
@@ -33,31 +33,31 @@ import { VueToolsError } from '@/utils';
  * @since 0.0.1
  */
 export function useContextFactory<ContextValue>(name: string) {
-    const injectionKey: InjectionKey<ContextValue> = Symbol(name);
+  const injectionKey: InjectionKey<ContextValue> = Symbol(name);
 
-    const inject = <Fallback extends ContextValue = ContextValue>(fallback?: Fallback) => {
-        const context = vueInject(injectionKey, fallback);
+  const inject = <Fallback extends ContextValue = ContextValue>(fallback?: Fallback) => {
+    const context = vueInject(injectionKey, fallback);
 
-        if (context !== undefined)
-            return context;
+    if (context !== undefined)
+      return context;
 
-        throw new VueToolsError(`useContextFactory: '${name}' context is not provided`);
-    };
+    throw new VueToolsError(`useContextFactory: '${name}' context is not provided`);
+  };
 
-    const provide = (context: ContextValue) => {
-        vueProvide(injectionKey, context);
-        return context;
-    };
+  const provide = (context: ContextValue) => {
+    vueProvide(injectionKey, context);
+    return context;
+  };
 
-    const appProvide = (app: App) => (context: ContextValue) => {
-        app.provide(injectionKey, context);
-        return context;
-    };
+  const appProvide = (app: App) => (context: ContextValue) => {
+    app.provide(injectionKey, context);
+    return context;
+  };
 
-    return {
-        inject,
-        provide,
-        appProvide,
-        key: injectionKey,
-    }
-}
\ No newline at end of file
+  return {
+    inject,
+    provide,
+    appProvide,
+    key: injectionKey,
+  };
+}
diff --git a/vue/toolkit/src/composables/state/useCounter/demo.vue b/vue/toolkit/src/composables/state/useCounter/demo.vue
new file mode 100644
index 0000000..01d7de8
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useCounter/demo.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useCounter } from './index';
+
+// Bounded counter: a quantity selector that never escapes 0..12.
+const MIN = 0;
+const MAX = 12;
+
+const { count, increment, decrement, set, reset } = useCounter(3, { min: MIN, max: MAX });
+
+const atMin = computed(() => count.value <= MIN);
+const atMax = computed(() => count.value >= MAX);
+const fillPercent = computed(() => ((count.value - MIN) / (MAX - MIN)) * 100);
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Tickets</span>
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+          {{ MIN }} – {{ MAX }}
+        </span>
+      </div>
+
+      <!-- Big live readout with stepper controls -->
+      <div class="flex items-center justify-between gap-3">
+        <button
+          type="button"
+          :disabled="atMin"
+          aria-label="Decrement"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) size-11 text-lg font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          @click="decrement()"
+        >
+          −
+        </button>
+
+        <div class="flex flex-col items-center">
+          <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ count }}</span>
+          <span class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">in cart</span>
+        </div>
+
+        <button
+          type="button"
+          :disabled="atMax"
+          aria-label="Increment"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) size-11 text-lg font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          @click="increment()"
+        >
+          +
+        </button>
+      </div>
+
+      <!-- Visual clamp feedback -->
+      <div class="h-2 overflow-hidden rounded-full border border-(--border) bg-(--bg-inset)">
+        <div
+          class="h-full rounded-full bg-(--accent) transition-all duration-200"
+          :style="{ width: `${fillPercent}%` }"
+        />
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Step actions</span>
+      <div class="grid grid-cols-3 gap-2">
+        <button
+          type="button"
+          :disabled="atMax"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          @click="increment(5)"
+        >
+          +5
+        </button>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="set(MAX)"
+        >
+          Max
+        </button>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="reset()"
+        >
+          Reset
+        </button>
+      </div>
+      <p class="text-xs text-(--fg-subtle)">
+        Values are clamped to <span class="font-mono text-(--fg-muted)">{{ MIN }}–{{ MAX }}</span> — try +5 near the top.
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/web/vue/src/composables/state/useCounter/index.test.ts b/vue/toolkit/src/composables/state/useCounter/index.test.ts
similarity index 84%
rename from web/vue/src/composables/state/useCounter/index.test.ts
rename to vue/toolkit/src/composables/state/useCounter/index.test.ts
index c4c2371..a2040a7 100644
--- a/web/vue/src/composables/state/useCounter/index.test.ts
+++ b/vue/toolkit/src/composables/state/useCounter/index.test.ts
@@ -1,4 +1,4 @@
-import { it, expect, describe } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { ref } from 'vue';
 import { useCounter } from '.';
 
@@ -68,14 +68,14 @@ describe(useCounter, () => {
   });
 
   it('clamp count to the minimum value', () => {
-      const { count, decrement } = useCounter(Number.MIN_SAFE_INTEGER);
-      decrement();
-      expect(count.value).toBe(Number.MIN_SAFE_INTEGER);
+    const { count, decrement } = useCounter(Number.MIN_SAFE_INTEGER);
+    decrement();
+    expect(count.value).toBe(Number.MIN_SAFE_INTEGER);
   });
 
   it('clamp count to the maximum value', () => {
-      const { count, increment } = useCounter(Number.MAX_SAFE_INTEGER);
-      increment();
-      expect(count.value).toBe(Number.MAX_SAFE_INTEGER);
+    const { count, increment } = useCounter(Number.MAX_SAFE_INTEGER);
+    increment();
+    expect(count.value).toBe(Number.MAX_SAFE_INTEGER);
   });
-});
\ No newline at end of file
+});
diff --git a/vue/toolkit/src/composables/state/useCounter/index.ts b/vue/toolkit/src/composables/state/useCounter/index.ts
new file mode 100644
index 0000000..143d50e
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useCounter/index.ts
@@ -0,0 +1,77 @@
+import { ref, toValue } from 'vue';
+import type { MaybeRefOrGetter, Ref } from 'vue';
+import { clamp } from '@robonen/stdlib';
+
+export interface UseCounterOptions {
+  min?: number;
+  max?: number;
+}
+
+export interface UseConterReturn {
+  count: Ref<number>;
+  increment: (delta?: number) => void;
+  decrement: (delta?: number) => void;
+  set: (value: number) => void;
+  get: () => number;
+  reset: (value?: number) => void;
+}
+
+/**
+ * @name useCounter
+ * @category State
+ * @description A composable that provides a counter with increment, decrement, set, get, and reset functions
+ *
+ * @param {MaybeRef<number>} [initialValue=0] The initial value of the counter
+ * @param {UseCounterOptions} [options={}] The options for the counter
+ * @param {number} [options.min=Number.MIN_SAFE_INTEGER] The minimum value of the counter
+ * @param {number} [options.max=Number.MAX_SAFE_INTEGER] The maximum value of the counter
+ * @returns {UseConterReturn} The counter object
+ *
+ * @example
+ * const { count, increment } = useCounter(0);
+ *
+ * @example
+ * const { count, increment, decrement, set, get, reset } = useCounter(0, { min: 0, max: 10 });
+ *
+ * @since 0.0.1
+ */
+export function useCounter(
+  initialValue: MaybeRefOrGetter<number> = 0,
+  options: UseCounterOptions = {},
+): UseConterReturn {
+  let _initialValue = toValue(initialValue);
+  const count = ref(_initialValue);
+
+  const {
+    min = Number.MIN_SAFE_INTEGER,
+    max = Number.MAX_SAFE_INTEGER,
+  } = options;
+
+  const increment = (delta = 1) => {
+    count.value = clamp(count.value + delta, min, max);
+  };
+
+  const decrement = (delta = 1) => {
+    count.value = clamp(count.value - delta, min, max);
+  };
+
+  const set = (value: number) => {
+    count.value = clamp(value, min, max);
+  };
+
+  const get = () => count.value;
+
+  const reset = (value = _initialValue) => {
+    _initialValue = value;
+    return set(value);
+  };
+
+  return {
+    count,
+    increment,
+    decrement,
+    set,
+    get,
+    reset,
+  };
+};
diff --git a/vue/toolkit/src/composables/state/useCycleList/demo.vue b/vue/toolkit/src/composables/state/useCycleList/demo.vue
new file mode 100644
index 0000000..b3a77c3
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useCycleList/demo.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useCycleList } from './index';
+
+// Cycle through a small palette of theme accents.
+interface Swatch {
+  name: string;
+  hex: string;
+}
+
+const palette: Swatch[] = [
+  { name: 'Indigo', hex: '#6366f1' },
+  { name: 'Emerald', hex: '#10b981' },
+  { name: 'Amber', hex: '#f59e0b' },
+  { name: 'Rose', hex: '#f43f5e' },
+  { name: 'Sky', hex: '#0ea5e9' },
+];
+
+const { state, index, next, prev, go } = useCycleList(palette, {
+  getIndexOf: (value, list) => list.findIndex(item => item.hex === value.hex),
+});
+
+const position = computed(() => `${index.value + 1} / ${palette.length}`);
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Accent</span>
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted) tabular-nums">
+          {{ position }}
+        </span>
+      </div>
+
+      <!-- Live preview of the currently selected swatch -->
+      <div class="flex items-center gap-4">
+        <div
+          class="size-16 shrink-0 rounded-xl border border-(--border-strong) shadow-inner transition-colors duration-300"
+          :style="{ backgroundColor: state.hex }"
+        />
+        <div class="flex flex-col gap-1">
+          <span class="text-lg font-semibold text-(--fg)">{{ state.name }}</span>
+          <span class="font-mono text-sm uppercase tabular-nums text-(--fg-muted)">{{ state.hex }}</span>
+        </div>
+      </div>
+
+      <!-- prev / next controls -->
+      <div class="grid grid-cols-2 gap-2">
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="prev()"
+        >
+          ← Prev
+        </button>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+          @click="next()"
+        >
+          Next →
+        </button>
+      </div>
+    </div>
+
+    <!-- index.value is writable: tap any swatch to jump straight to it -->
+    <div class="flex flex-col gap-2">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Jump to</span>
+      <div class="flex flex-wrap gap-2">
+        <button
+          v-for="(swatch, i) in palette"
+          :key="swatch.hex"
+          type="button"
+          :aria-pressed="i === index"
+          :title="swatch.name"
+          class="size-9 rounded-lg border-2 transition active:scale-[0.95] cursor-pointer"
+          :class="i === index ? 'border-(--accent) scale-110' : 'border-(--border) hover:border-(--border-strong)'"
+          :style="{ backgroundColor: swatch.hex }"
+          @click="go(i)"
+        />
+      </div>
+      <p class="text-xs text-(--fg-subtle)">
+        Tabs call <span class="font-mono text-(--fg-muted)">go(i)</span>; arrows wrap around with
+        <span class="font-mono text-(--fg-muted)">next/prev</span>.
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/state/useCycleList/index.test.ts b/vue/toolkit/src/composables/state/useCycleList/index.test.ts
new file mode 100644
index 0000000..78d3018
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useCycleList/index.test.ts
@@ -0,0 +1,151 @@
+import { describe, expect, it } from 'vitest';
+import { nextTick, ref } from 'vue';
+import { useCycleList } from '.';
+
+describe(useCycleList, () => {
+  it('starts at the first item', () => {
+    const { state, index } = useCycleList(['a', 'b', 'c']);
+    expect(state.value).toBe('a');
+    expect(index.value).toBe(0);
+  });
+
+  it('cycles forward and wraps around', () => {
+    const { state, next } = useCycleList(['a', 'b', 'c']);
+    expect(next()).toBe('b');
+    expect(next()).toBe('c');
+    expect(next()).toBe('a');
+    expect(state.value).toBe('a');
+  });
+
+  it('cycles backward and wraps around', () => {
+    const { prev } = useCycleList(['a', 'b', 'c']);
+    expect(prev()).toBe('c');
+    expect(prev()).toBe('b');
+  });
+
+  it('honors initialValue', () => {
+    const { state, index } = useCycleList(['a', 'b', 'c'], { initialValue: 'b' });
+    expect(state.value).toBe('b');
+    expect(index.value).toBe(1);
+  });
+
+  it('honors a ref initialValue', () => {
+    const initialValue = ref('c');
+    const { state, index } = useCycleList(['a', 'b', 'c'], { initialValue });
+    expect(state.value).toBe('c');
+    expect(index.value).toBe(2);
+  });
+
+  it('go jumps to an index', () => {
+    const { go, state } = useCycleList(['a', 'b', 'c']);
+    expect(go(2)).toBe('c');
+    expect(state.value).toBe('c');
+  });
+
+  it('go wraps negative and out-of-range indices', () => {
+    const { go } = useCycleList(['a', 'b', 'c']);
+    expect(go(-1)).toBe('c');
+    expect(go(3)).toBe('a');
+    expect(go(4)).toBe('b');
+  });
+
+  it('next/prev accept a step count', () => {
+    const { next, prev } = useCycleList(['a', 'b', 'c', 'd']);
+    expect(next(2)).toBe('c');
+    expect(prev(3)).toBe('d');
+  });
+
+  it('shift moves by a signed delta', () => {
+    const { shift, state } = useCycleList(['a', 'b', 'c', 'd']);
+    expect(shift(2)).toBe('c');
+    expect(shift(-1)).toBe('b');
+    expect(shift()).toBe('c');
+    expect(state.value).toBe('c');
+  });
+
+  it('exposes a writable index', () => {
+    const { index, state } = useCycleList(['a', 'b', 'c']);
+    index.value = 2;
+    expect(state.value).toBe('c');
+    expect(index.value).toBe(2);
+
+    // Out-of-range assignments wrap into bounds.
+    index.value = 4;
+    expect(state.value).toBe('b');
+    expect(index.value).toBe(1);
+  });
+
+  it('supports a getter-based list', () => {
+    const source = ref(['a', 'b', 'c']);
+    const { state, next, index } = useCycleList(() => source.value);
+    expect(state.value).toBe('a');
+    expect(next()).toBe('b');
+
+    source.value = ['x', 'b', 'y'];
+    expect(state.value).toBe('b');
+    expect(index.value).toBe(1);
+  });
+
+  it('uses a custom getIndexOf resolver', () => {
+    const list = [{ id: 1 }, { id: 2 }, { id: 3 }];
+    const { state, index, next } = useCycleList(list, {
+      initialValue: { id: 2 },
+      getIndexOf: (value, l) => l.findIndex(item => item.id === value.id),
+    });
+    expect(index.value).toBe(1);
+    expect(next()).toEqual({ id: 3 });
+  });
+
+  it('falls back to fallbackIndex when the current item is missing', () => {
+    const { index } = useCycleList(['a', 'b', 'c'], {
+      initialValue: 'z',
+      fallbackIndex: 2,
+    });
+    expect(index.value).toBe(2);
+  });
+
+  it('preserves the current item across list changes when it still exists', () => {
+    const list = ref(['a', 'b', 'c', 'd']);
+    const { go, state, index } = useCycleList(list);
+    go(1);
+    expect(state.value).toBe('b');
+
+    list.value = ['x', 'b', 'y'];
+    expect(state.value).toBe('b');
+    expect(index.value).toBe(1);
+  });
+
+  it('falls back to fallbackIndex when the current item disappears', async () => {
+    const list = ref(['a', 'b', 'c']);
+    const { go, state } = useCycleList(list, { fallbackIndex: 0 });
+    go(2);
+    expect(state.value).toBe('c');
+
+    list.value = ['x', 'y'];
+    await nextTick();
+    expect(state.value).toBe('x');
+  });
+
+  it('does not corrupt state when the list is empty', () => {
+    const list = ref<string[]>([]);
+    const { state, next, prev, go } = useCycleList(list, { initialValue: 'a' });
+    expect(state.value).toBe('a');
+    // Operations on an empty list are no-ops rather than producing undefined.
+    expect(next()).toBe('a');
+    expect(prev()).toBe('a');
+    expect(go(5)).toBe('a');
+    expect(state.value).toBe('a');
+  });
+
+  it('does not throw when a non-empty list becomes empty', async () => {
+    const list = ref(['a', 'b', 'c']);
+    const { state, go } = useCycleList(list);
+    go(1);
+    expect(state.value).toBe('b');
+
+    list.value = [];
+    await nextTick();
+    // State is retained (no NaN/undefined) when there is nothing to cycle to.
+    expect(state.value).toBe('b');
+  });
+});
diff --git a/vue/toolkit/src/composables/state/useCycleList/index.ts b/vue/toolkit/src/composables/state/useCycleList/index.ts
new file mode 100644
index 0000000..ebe4fbc
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useCycleList/index.ts
@@ -0,0 +1,152 @@
+import { computed, shallowRef, toRef, toValue, watch } from 'vue';
+import type { MaybeRef, MaybeRefOrGetter, Ref, ShallowRef, WritableComputedRef } from 'vue';
+
+export interface UseCycleListOptions<T> {
+  /**
+   * The initial value of the state. Defaults to the first item in the list.
+   * A ref can be provided to reuse it.
+   */
+  initialValue?: MaybeRef<T>;
+
+  /**
+   * Index used when the current value is not found in the list.
+   *
+   * @default 0
+   */
+  fallbackIndex?: number;
+
+  /**
+   * Custom function to resolve the index of a value in the list.
+   */
+  getIndexOf?: (value: T, list: T[]) => number;
+}
+
+export interface UseCycleListReturn<T> {
+  /**
+   * The currently selected item.
+   */
+  state: ShallowRef<T>;
+
+  /**
+   * The index of the currently selected item. Writable — assigning jumps to that index.
+   */
+  index: WritableComputedRef<number>;
+
+  /**
+   * Move forward by `n` items (wraps around). Defaults to 1.
+   */
+  next: (n?: number) => T;
+
+  /**
+   * Move backward by `n` items (wraps around). Defaults to 1.
+   */
+  prev: (n?: number) => T;
+
+  /**
+   * Move by a signed `delta` relative to the current item (wraps around). Defaults to 1.
+   */
+  shift: (delta?: number) => T;
+
+  /**
+   * Jump to a specific index (wraps around out-of-range/negative indices).
+   */
+  go: (i: number) => T;
+}
+
+/**
+ * @name useCycleList
+ * @category State
+ * @description Cycle through a list of items, with `next`/`prev`/`shift`/`go` controls.
+ * Supports a reactive list — the index is kept valid when the list changes.
+ *
+ * @param {MaybeRefOrGetter<T[]>} list The list to cycle through (can be reactive)
+ * @param {UseCycleListOptions<T>} [options={}] Options
+ * @returns {UseCycleListReturn<T>} State and controls
+ *
+ * @example
+ * const { state, next, prev } = useCycleList(['a', 'b', 'c']);
+ * next(); // state.value === 'b'
+ *
+ * @example
+ * const { index } = useCycleList(['a', 'b', 'c']);
+ * index.value = 2; // jump directly to 'c'
+ *
+ * @since 0.0.15
+ */
+export function useCycleList<T>(
+  list: MaybeRefOrGetter<T[]>,
+  options: UseCycleListOptions<T> = {},
+): UseCycleListReturn<T> {
+  const { fallbackIndex = 0, getIndexOf } = options;
+
+  // Normalize the source once: a stable ref we can watch and read cheaply,
+  // regardless of whether the caller passed an array, a ref, or a getter.
+  const listRef = toRef(list) as Ref<T[]>;
+
+  const state = shallowRef(
+    options.initialValue !== undefined ? toValue(options.initialValue) : listRef.value[0],
+  ) as ShallowRef<T>;
+
+  const index = computed<number>({
+    get() {
+      const targetList = listRef.value;
+
+      let position = getIndexOf
+        ? getIndexOf(state.value, targetList)
+        : targetList.indexOf(state.value);
+
+      if (position < 0)
+        position = fallbackIndex;
+
+      return position;
+    },
+    set(value) {
+      set(value);
+    },
+  });
+
+  function set(i: number): T {
+    const targetList = listRef.value;
+    const length = targetList.length;
+
+    // Nothing to select — keep the current state untouched (avoids NaN indexing).
+    if (length === 0)
+      return state.value;
+
+    // Wrap negative and out-of-range indices into bounds.
+    const position = ((i % length) + length) % length;
+    const value = targetList[position]!;
+
+    state.value = value;
+    return value;
+  }
+
+  function go(i: number): T {
+    return set(i);
+  }
+
+  function shift(delta = 1): T {
+    return set(index.value + delta);
+  }
+
+  function next(n = 1): T {
+    return shift(n);
+  }
+
+  function prev(n = 1): T {
+    return shift(-n);
+  }
+
+  // Keep the state in sync when the list shrinks/changes: re-resolving the
+  // current index falls back automatically if the active item disappeared.
+  watch(listRef, () => set(index.value));
+
+  return {
+    state,
+    index,
+    next,
+    prev,
+    shift,
+    go,
+  };
+}
diff --git a/vue/toolkit/src/composables/state/useDebouncedRefHistory/demo.vue b/vue/toolkit/src/composables/state/useDebouncedRefHistory/demo.vue
new file mode 100644
index 0000000..24285c0
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useDebouncedRefHistory/demo.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useDebouncedRefHistory } from './index';
+
+// A draft message the user types into. Rapid keystrokes collapse into a single
+// history record once typing pauses for `debounce` ms.
+const message = ref('The quick brown fox');
+
+const debounce = ref(400);
+
+const { history, undo, redo, canUndo, canRedo, clear } = useDebouncedRefHistory(message, {
+  debounce,
+  maxWait: 2000,
+  capacity: 8,
+});
+
+function formatTime(ts: number): string {
+  return new Date(ts).toLocaleTimeString(undefined, {
+    hour12: false,
+    minute: '2-digit',
+    second: '2-digit',
+  });
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <label class="flex flex-col gap-1.5">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Tracked draft</span>
+      <textarea
+        v-model="message"
+        rows="2"
+        placeholder="Type fast — bursts collapse into one record"
+        class="w-full resize-none rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      />
+    </label>
+
+    <label class="flex flex-col gap-1.5">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Debounce delay</span>
+        <span class="font-mono text-xs tabular-nums text-(--fg-muted)">{{ debounce }}ms</span>
+      </div>
+      <input
+        v-model.number="debounce"
+        type="range"
+        min="0"
+        max="1200"
+        step="100"
+        class="w-full accent-(--accent)"
+      >
+    </label>
+
+    <div class="flex flex-wrap gap-2">
+      <button
+        type="button"
+        :disabled="!canUndo"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="undo"
+      >
+        Undo
+      </button>
+      <button
+        type="button"
+        :disabled="!canRedo"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="redo"
+      >
+        Redo
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="clear"
+      >
+        Clear
+      </button>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">History</span>
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted) tabular-nums">
+          {{ history.length }} records
+        </span>
+      </div>
+      <ol class="flex flex-col gap-1.5">
+        <li
+          v-for="(record, i) in history"
+          :key="record.timestamp"
+          class="flex items-center justify-between gap-3 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-1.5"
+        >
+          <span class="truncate font-mono text-sm text-(--fg)">"{{ record.snapshot }}"</span>
+          <span class="shrink-0 font-mono text-xs tabular-nums" :class="i === 0 ? 'text-(--accent-text)' : 'text-(--fg-subtle)'">
+            {{ i === 0 ? 'now' : formatTime(record.timestamp) }}
+          </span>
+        </li>
+      </ol>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/state/useDebouncedRefHistory/index.test.ts b/vue/toolkit/src/composables/state/useDebouncedRefHistory/index.test.ts
new file mode 100644
index 0000000..05eb145
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useDebouncedRefHistory/index.test.ts
@@ -0,0 +1,255 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, ref } from 'vue';
+import { useDebouncedRefHistory } from '.';
+
+describe(useDebouncedRefHistory, () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.useRealTimers();
+  });
+
+  it('seeds history with the initial value', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const { history, last, canUndo, canRedo } = useDebouncedRefHistory(count, {
+        flush: 'sync',
+        debounce: 100,
+      });
+
+      expect(history.value).toHaveLength(1);
+      expect(history.value[0]!.snapshot).toBe(0);
+      expect(last.value.snapshot).toBe(0);
+      expect(canUndo.value).toBeFalsy();
+      expect(canRedo.value).toBeFalsy();
+    });
+    scope.stop();
+  });
+
+  it('collapses a burst of changes into a single commit after the debounce window', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const { history } = useDebouncedRefHistory(count, { flush: 'sync', debounce: 100 });
+
+      count.value = 1;
+      count.value = 2;
+      count.value = 3;
+
+      // Nothing committed yet — still within the debounce window.
+      expect(history.value.map(r => r.snapshot)).toEqual([0]);
+
+      vi.advanceTimersByTime(100);
+
+      // Only the final value is recorded.
+      expect(history.value.map(r => r.snapshot)).toEqual([3, 0]);
+    });
+    scope.stop();
+  });
+
+  it('records separate commits for changes spaced beyond the debounce window', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const { history } = useDebouncedRefHistory(count, { flush: 'sync', debounce: 100 });
+
+      count.value = 1;
+      vi.advanceTimersByTime(100);
+      count.value = 2;
+      vi.advanceTimersByTime(100);
+
+      expect(history.value.map(r => r.snapshot)).toEqual([2, 1, 0]);
+    });
+    scope.stop();
+  });
+
+  it('resets the timer on each change (trailing edge)', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const { history } = useDebouncedRefHistory(count, { flush: 'sync', debounce: 100 });
+
+      count.value = 1;
+      vi.advanceTimersByTime(60);
+      count.value = 2;
+      vi.advanceTimersByTime(60); // 60ms since last change -> still pending
+
+      expect(history.value.map(r => r.snapshot)).toEqual([0]);
+
+      vi.advanceTimersByTime(40); // now 100ms since last change
+
+      expect(history.value.map(r => r.snapshot)).toEqual([2, 0]);
+    });
+    scope.stop();
+  });
+
+  it('honours maxWait, forcing a commit under sustained input', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const { history } = useDebouncedRefHistory(count, {
+        flush: 'sync',
+        debounce: 100,
+        maxWait: 250,
+      });
+
+      // Keep poking every 60ms so the trailing debounce never settles on its own.
+      count.value = 1;
+      vi.advanceTimersByTime(60);
+      count.value = 2;
+      vi.advanceTimersByTime(60);
+      count.value = 3;
+      vi.advanceTimersByTime(60);
+      count.value = 4;
+      vi.advanceTimersByTime(60); // 240ms elapsed, still under maxWait
+      expect(history.value.map(r => r.snapshot)).toEqual([0]);
+
+      count.value = 5;
+      vi.advanceTimersByTime(10); // crosses maxWait of 250ms
+
+      // The latest value at the forced commit is recorded.
+      expect(history.value[0]!.snapshot).toBe(5);
+    });
+    scope.stop();
+  });
+
+  it('commits synchronously when debounce is not provided', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const { history } = useDebouncedRefHistory(count, { flush: 'sync' });
+
+      count.value = 1;
+      count.value = 2;
+
+      // No debounce filter -> immediate commits, just like useRefHistory.
+      expect(history.value.map(r => r.snapshot)).toEqual([2, 1, 0]);
+    });
+    scope.stop();
+  });
+
+  it('commits synchronously when debounce is non-positive', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const { history } = useDebouncedRefHistory(count, { flush: 'sync', debounce: 0 });
+
+      count.value = 1;
+      count.value = 2;
+
+      expect(history.value.map(r => r.snapshot)).toEqual([2, 1, 0]);
+    });
+    scope.stop();
+  });
+
+  it('supports undo/redo on debounced records', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const { undo, redo, canUndo, canRedo } = useDebouncedRefHistory(count, {
+        flush: 'sync',
+        debounce: 100,
+      });
+
+      count.value = 1;
+      vi.advanceTimersByTime(100);
+      count.value = 2;
+      vi.advanceTimersByTime(100);
+
+      expect(canUndo.value).toBeTruthy();
+      undo();
+      expect(count.value).toBe(1);
+      undo();
+      expect(count.value).toBe(0);
+      expect(canUndo.value).toBeFalsy();
+
+      expect(canRedo.value).toBeTruthy();
+      redo();
+      expect(count.value).toBe(1);
+    });
+    scope.stop();
+  });
+
+  it('forwards capacity through to useRefHistory', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const { history } = useDebouncedRefHistory(count, {
+        flush: 'sync',
+        debounce: 100,
+        capacity: 2,
+      });
+
+      count.value = 1;
+      vi.advanceTimersByTime(100);
+      count.value = 2;
+      vi.advanceTimersByTime(100);
+      count.value = 3;
+      vi.advanceTimersByTime(100);
+
+      expect(history.value).toHaveLength(2);
+      expect(history.value.map(r => r.snapshot)).toEqual([3, 2]);
+    });
+    scope.stop();
+  });
+
+  it('supports a reactive debounce delay', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const delay = ref(100);
+      const { history } = useDebouncedRefHistory(count, { flush: 'sync', debounce: delay });
+
+      count.value = 1;
+      vi.advanceTimersByTime(100);
+      expect(history.value.map(r => r.snapshot)).toEqual([1, 0]);
+
+      delay.value = 300;
+      count.value = 2;
+      vi.advanceTimersByTime(100); // not enough for the new delay
+      expect(history.value.map(r => r.snapshot)).toEqual([1, 0]);
+
+      vi.advanceTimersByTime(200); // total 300ms
+      expect(history.value.map(r => r.snapshot)).toEqual([2, 1, 0]);
+    });
+    scope.stop();
+  });
+
+  it('stops feeding the filter after dispose', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const { history, dispose } = useDebouncedRefHistory(count, { flush: 'sync', debounce: 100 });
+
+      dispose();
+
+      // The watcher is stopped, so post-dispose mutations never reach the
+      // debounce filter and schedule no commits.
+      count.value = 1;
+      count.value = 2;
+      vi.advanceTimersByTime(100);
+
+      expect(history.value).toHaveLength(1);
+      expect(history.value[0]!.snapshot).toBe(0);
+    });
+    scope.stop();
+  });
+
+  it('is SSR-safe: instantiates without touching window/document', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const api = useDebouncedRefHistory(count, { flush: 'sync', debounce: 100 });
+
+      expect(typeof api.undo).toBe('function');
+      expect(typeof api.redo).toBe('function');
+      expect(typeof api.dispose).toBe('function');
+      expect(api.history.value).toHaveLength(1);
+    });
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/state/useDebouncedRefHistory/index.ts b/vue/toolkit/src/composables/state/useDebouncedRefHistory/index.ts
new file mode 100644
index 0000000..615343c
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useDebouncedRefHistory/index.ts
@@ -0,0 +1,69 @@
+import type { MaybeRefOrGetter, Ref } from 'vue';
+import { useRefHistory } from '@/composables/state/useRefHistory';
+import type { UseRefHistoryOptions, UseRefHistoryReturn } from '@/composables/state/useRefHistory';
+import { debounceFilter } from '@/utils/filters';
+
+export interface UseDebouncedRefHistoryOptions<Raw, Serialized = Raw>
+  extends Omit<UseRefHistoryOptions<Raw, Serialized>, 'eventFilter'> {
+  /**
+   * Debounce delay in milliseconds before a tracked change is committed to
+   * history. Can be reactive. When `0`, `undefined`, or non-positive, changes
+   * commit synchronously (no debouncing).
+   *
+   * @default undefined (no debounce)
+   */
+  debounce?: MaybeRefOrGetter<number>;
+  /**
+   * Maximum time a commit may be deferred while changes keep arriving. Once
+   * exceeded, the pending change is forcibly committed even under sustained
+   * input. Can be reactive. When omitted there is no upper bound.
+   */
+  maxWait?: MaybeRefOrGetter<number>;
+}
+
+export type UseDebouncedRefHistoryReturn<Raw, Serialized = Raw>
+  = UseRefHistoryReturn<Raw, Serialized>;
+
+/**
+ * @name useDebouncedRefHistory
+ * @category State
+ * @description Track the change history of a ref, debouncing commits so that
+ * rapid bursts of changes collapse into a single history record. A shorthand
+ * for {@link useRefHistory} pre-wired with a debounce {@link EventFilter}.
+ *
+ * @param {Ref<Raw>} source The ref whose changes are tracked
+ * @param {UseDebouncedRefHistoryOptions<Raw, Serialized>} [options={}] Tracking options (`debounce`, `maxWait`, plus all `useRefHistory` options except `eventFilter`)
+ * @returns {UseDebouncedRefHistoryReturn<Raw, Serialized>} History records plus `undo`/`redo`/`commit`/`reset`/`clear`/`pause`/`resume`/`batch`/`dispose`
+ *
+ * @example
+ * const count = ref(0);
+ * const { history, undo, redo } = useDebouncedRefHistory(count, { debounce: 200 });
+ *
+ * // Rapid changes within 200ms collapse into a single commit
+ * count.value = 1;
+ * count.value = 2;
+ * count.value = 3;
+ * // after 200ms idle -> history has one new record with snapshot 3
+ *
+ * @example
+ * // Bound the maximum deferral under sustained input
+ * const text = ref('');
+ * const { history } = useDebouncedRefHistory(text, { debounce: 300, maxWait: 1000 });
+ *
+ * @since 0.0.15
+ */
+export function useDebouncedRefHistory<Raw, Serialized = Raw>(
+  source: Ref<Raw>,
+  options: UseDebouncedRefHistoryOptions<Raw, Serialized> = {},
+): UseDebouncedRefHistoryReturn<Raw, Serialized> {
+  const { debounce, maxWait, ...historyOptions } = options;
+
+  const eventFilter = debounce === undefined
+    ? undefined
+    : debounceFilter(debounce, { maxWait });
+
+  return useRefHistory<Raw, Serialized>(source, {
+    ...historyOptions,
+    eventFilter,
+  });
+}
diff --git a/vue/toolkit/src/composables/state/useId/demo.vue b/vue/toolkit/src/composables/state/useId/demo.vue
new file mode 100644
index 0000000..c5ff319
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useId/demo.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useId } from './index';
+
+// An auto-generated, SSR-safe id — ideal for wiring <label for> to an input.
+const fieldId = useId('email-field');
+
+// A second id using a custom prefix, demonstrating how primitives namespace ids.
+const helpId = useId(undefined, 'dialog');
+
+// A "deterministic" id: when the caller supplies a value, it wins over the
+// generated one — exactly how a component would respect a user-provided `id` prop.
+const userProvided = ref('');
+const resolvedId = useId(() => userProvided.value || undefined, 'panel');
+
+const email = ref('');
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-2.5">
+      <label :for="fieldId" class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Email
+      </label>
+      <input
+        :id="fieldId"
+        v-model="email"
+        type="email"
+        :aria-describedby="helpId"
+        placeholder="ada@example.com"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+      <p :id="helpId" class="text-xs text-(--fg-subtle)">
+        The <span class="font-mono">label</span>, <span class="font-mono">input</span> and this hint are
+        linked by generated ids — no hard-coded strings, no collisions.
+      </p>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums flex flex-col gap-1.5">
+      <div class="flex items-center justify-between gap-3">
+        <span class="text-(--fg-subtle)">field</span>
+        <span class="truncate">{{ fieldId }}</span>
+      </div>
+      <div class="flex items-center justify-between gap-3">
+        <span class="text-(--fg-subtle)">help</span>
+        <span class="truncate">{{ helpId }}</span>
+      </div>
+    </div>
+
+    <label class="flex flex-col gap-1.5">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Deterministic override</span>
+      <input
+        v-model="userProvided"
+        type="text"
+        placeholder="Leave blank to auto-generate"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+    </label>
+
+    <div class="flex items-center justify-between gap-3 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2.5">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Resolved</span>
+      <span class="truncate font-mono text-sm text-(--accent-text) tabular-nums">{{ resolvedId }}</span>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/state/useId/index.test.ts b/vue/toolkit/src/composables/state/useId/index.test.ts
new file mode 100644
index 0000000..2663be4
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useId/index.test.ts
@@ -0,0 +1,61 @@
+import { describe, expect, it } from 'vitest';
+import { defineComponent, h, ref } from 'vue';
+import { mount } from '@vue/test-utils';
+import { useId } from '.';
+
+function mountWithId(deterministic?: () => string | undefined, prefix?: string) {
+  const Comp = defineComponent({
+    setup() {
+      const id = useId(deterministic, prefix);
+      return () => h('span', { 'data-id': id.value }, id.value);
+    },
+  });
+
+  return mount(Comp);
+}
+
+describe(useId, () => {
+  it('returns a non-empty string', () => {
+    const w = mountWithId();
+    expect(w.text()).toMatch(/^robonen-/);
+    w.unmount();
+  });
+
+  it('uses custom prefix', () => {
+    const w = mountWithId(undefined, 'dialog');
+    expect(w.text()).toMatch(/^dialog-/);
+    w.unmount();
+  });
+
+  it('returns deterministic value when provided', () => {
+    const w = mountWithId(() => 'custom-id');
+    expect(w.text()).toBe('custom-id');
+    w.unmount();
+  });
+
+  it('falls back to generated when deterministic is empty', () => {
+    const w = mountWithId(() => '', 'x');
+    expect(w.text()).toMatch(/^x-/);
+    w.unmount();
+  });
+
+  it('is reactive to deterministic input changes', async () => {
+    const d = ref<string | undefined>(undefined);
+
+    const Comp = defineComponent({
+      setup() {
+        const id = useId(() => d.value, 'p');
+        return () => h('span', id.value);
+      },
+    });
+
+    const w = mount(Comp);
+    expect(w.text()).toMatch(/^p-/);
+
+    d.value = 'forced';
+    await w.vm.$nextTick();
+
+    expect(w.text()).toBe('forced');
+    w.unmount();
+  });
+});
diff --git a/vue/toolkit/src/composables/state/useId/index.ts b/vue/toolkit/src/composables/state/useId/index.ts
new file mode 100644
index 0000000..ae4f460
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useId/index.ts
@@ -0,0 +1,32 @@
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+import { computed, toValue, useId as vueUseId } from 'vue';
+
+/**
+ * @name useId
+ * @category State
+ * @description SSR-safe unique identifier. Thin wrapper around Vue 3.5's built-in `useId()`
+ * that accepts an optional prefix and allows callers to pass a pre-existing id
+ * (useful for primitives that accept a user-supplied `id` prop).
+ *
+ * @param {MaybeRefOrGetter<string | undefined>} [deterministic] Existing id to return if provided
+ * @param {string} [prefix='robonen'] Prefix appended before the generated id (ignored when `deterministic` is set)
+ * @returns {ComputedRef<string>} A stable, SSR-safe id that matches between server and client
+ *
+ * @example
+ * const id = useId();
+ * // => 'robonen-v-1'
+ *
+ * @example
+ * const id = useId(() => props.id, 'dialog');
+ * // => props.id ?? 'dialog-v-1'
+ *
+ * @since 0.0.14
+ */
+export function useId(
+  deterministic?: MaybeRefOrGetter<string | undefined>,
+  prefix = 'robonen',
+): ComputedRef<string> {
+  const generated = vueUseId();
+
+  return computed(() => toValue(deterministic) || `${prefix}-${generated}`);
+}
diff --git a/vue/toolkit/src/composables/state/useInjectionStore/demo.vue b/vue/toolkit/src/composables/state/useInjectionStore/demo.vue
new file mode 100644
index 0000000..a6f3bed
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useInjectionStore/demo.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { computed, defineComponent, ref } from 'vue';
+import { useInjectionStore } from './index';
+
+// Define a store once: a shared cart state with a derived total.
+const { useProvidingState, useInjectedState } = useInjectionStore(() => {
+  const items = ref<Array<{ name: string; price: number }>>([
+    { name: 'Mechanical keyboard', price: 89 },
+    { name: 'USB-C hub', price: 35 },
+  ]);
+
+  const total = computed(() => items.value.reduce((sum, i) => sum + i.price, 0));
+
+  function add(name: string, price: number) {
+    items.value.push({ name, price });
+  }
+
+  function remove(index: number) {
+    items.value.splice(index, 1);
+  }
+
+  return { items, total, add, remove };
+});
+
+// The parent provides the state for its subtree.
+const cart = useProvidingState();
+
+const draftName = ref('Wrist rest');
+const draftPrice = ref(19);
+
+function addDraft() {
+  const name = draftName.value.trim();
+  if (name)
+    cart.add(name, Number(draftPrice.value) || 0);
+}
+
+// A nested child component injects the SAME store instance — no props drilled.
+const Summary = defineComponent({
+  setup() {
+    const injected = useInjectedState();
+    return { injected };
+  },
+  template: `
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex items-center justify-between">
+      <div class="flex flex-col">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Injected in child</span>
+        <span class="text-xs text-(--fg-subtle)">{{ injected.items.length }} items</span>
+      </div>
+      <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">\${{ injected.total }}</span>
+    </div>
+  `,
+});
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-2">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Cart (provided here)</span>
+      <ul class="flex flex-col gap-1.5">
+        <li
+          v-for="(item, i) in cart.items"
+          :key="i"
+          class="flex items-center justify-between gap-3 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-1.5"
+        >
+          <span class="truncate text-sm text-(--fg)">{{ item.name }}</span>
+          <div class="flex shrink-0 items-center gap-2">
+            <span class="font-mono text-sm tabular-nums text-(--fg-muted)">${{ item.price }}</span>
+            <button
+              type="button"
+              aria-label="Remove item"
+              class="rounded-md border border-(--border) bg-(--bg-elevated) px-2 py-0.5 text-xs font-medium text-(--fg-muted) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+              @click="cart.remove(i)"
+            >
+              ✕
+            </button>
+          </div>
+        </li>
+        <li v-if="!cart.items.length" class="rounded-lg border border-dashed border-(--border) px-3 py-4 text-center text-sm text-(--fg-subtle)">
+          Cart is empty
+        </li>
+      </ul>
+    </div>
+
+    <div class="flex gap-2">
+      <input
+        v-model="draftName"
+        type="text"
+        placeholder="Item name"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        @keydown.enter="addDraft"
+      >
+      <input
+        v-model.number="draftPrice"
+        type="number"
+        min="0"
+        aria-label="Price"
+        class="w-20 shrink-0 rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) tabular-nums transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        @keydown.enter="addDraft"
+      >
+      <button
+        type="button"
+        class="inline-flex shrink-0 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="addDraft"
+      >
+        Add
+      </button>
+    </div>
+
+    <Summary />
+
+    <p class="text-xs text-(--fg-subtle)">
+      The parent calls <span class="font-mono">useProvidingState()</span>; the nested summary calls
+      <span class="font-mono">useInjectedState()</span> and reads the very same reactive cart.
+    </p>
+  </div>
+</template>
diff --git a/web/vue/src/composables/state/useInjectionStore/index.test.ts b/vue/toolkit/src/composables/state/useInjectionStore/index.test.ts
similarity index 91%
rename from web/vue/src/composables/state/useInjectionStore/index.test.ts
rename to vue/toolkit/src/composables/state/useInjectionStore/index.test.ts
index 0c42e08..e1c38f2 100644
--- a/web/vue/src/composables/state/useInjectionStore/index.test.ts
+++ b/vue/toolkit/src/composables/state/useInjectionStore/index.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { defineComponent, ref } from 'vue';
 import { useInjectionStore } from '.';
 import { mount } from '@vue/test-utils';
@@ -34,7 +34,7 @@ function testFactory<Args, Return>(
 describe('useInjectionState', () => {
   it('provides and injects state correctly', () => {
     const { Parent } = testFactory(
-      useInjectionStore(() => ref('base'))
+      useInjectionStore(() => ref('base')),
     );
 
     const wrapper = mount(Parent);
@@ -45,8 +45,8 @@ describe('useInjectionState', () => {
     const { Child } = testFactory(
       useInjectionStore(() => ref('without provider'), {
         defaultValue: ref('default'),
-        injectionKey: 'testKey',
-      })
+        injectionName: 'testKey',
+      }),
     );
 
     const wrapper = mount(Child);
@@ -60,7 +60,7 @@ describe('useInjectionState', () => {
     const wrapper = mount(Child, {
       global: {
         plugins: [
-          app => {
+          (app) => {
             const state = injectionStore.useAppProvidingState(app)();
             expect(state.value).toBe('app level');
           },
@@ -74,7 +74,7 @@ describe('useInjectionState', () => {
   it('works with custom injection key', () => {
     const { Parent } = testFactory(
       useInjectionStore(() => ref('custom key'), {
-        injectionKey: Symbol('customKey'),
+        injectionName: 'customKey',
       }),
     );
 
@@ -85,7 +85,7 @@ describe('useInjectionState', () => {
   it('handles state factory with arguments', () => {
     const injectionStore = useInjectionStore((arg: string) => arg);
     const { Child } = testFactory(injectionStore);
-      
+
     const wrapper = mount(Child, {
       global: {
         plugins: [
diff --git a/web/vue/src/composables/state/useInjectionStore/index.ts b/vue/toolkit/src/composables/state/useInjectionStore/index.ts
similarity index 96%
rename from web/vue/src/composables/state/useInjectionStore/index.ts
rename to vue/toolkit/src/composables/state/useInjectionStore/index.ts
index 9882d9b..b2e9716 100644
--- a/web/vue/src/composables/state/useInjectionStore/index.ts
+++ b/vue/toolkit/src/composables/state/useInjectionStore/index.ts
@@ -47,7 +47,7 @@ export interface useInjectionStoreOptions<Return> {
  */
 export function useInjectionStore<Args extends any[], Return>(
   stateFactory: (...args: Args) => Return,
-  options?: useInjectionStoreOptions<Return>
+  options?: useInjectionStoreOptions<Return>,
 ) {
   const ctx = useContextFactory<Return>(options?.injectionName ?? stateFactory.name ?? 'InjectionStore');
 
@@ -68,6 +68,6 @@ export function useInjectionStore<Args extends any[], Return>(
   return {
     useProvidingState,
     useAppProvidingState,
-    useInjectedState
+    useInjectedState,
   };
-}
\ No newline at end of file
+}
diff --git a/vue/toolkit/src/composables/state/useLastChanged/demo.vue b/vue/toolkit/src/composables/state/useLastChanged/demo.vue
new file mode 100644
index 0000000..bda5dc7
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useLastChanged/demo.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { computed, onUnmounted, ref } from 'vue';
+import { useLastChanged } from './index';
+
+// A document title the user edits. `useLastChanged` records the timestamp of
+// every change so we can render a live "edited N seconds ago" indicator.
+const title = ref('Untitled document');
+
+const lastChanged = useLastChanged(title);
+
+// Tick once a second so the relative time stays fresh without re-triggering it.
+const now = ref(Date.now());
+const interval = setInterval(() => (now.value = Date.now()), 1000);
+onUnmounted(() => clearInterval(interval));
+
+const relative = computed(() => {
+  if (lastChanged.value === null)
+    return 'No changes yet';
+
+  const seconds = Math.max(0, Math.round((now.value - lastChanged.value) / 1000));
+  if (seconds < 1)
+    return 'just now';
+  if (seconds < 60)
+    return `${seconds}s ago`;
+  const minutes = Math.floor(seconds / 60);
+  return `${minutes}m ${seconds % 60}s ago`;
+});
+
+const exactTime = computed(() =>
+  lastChanged.value === null
+    ? '—'
+    : new Date(lastChanged.value).toLocaleTimeString(undefined, { hour12: false }),
+);
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <label class="flex flex-col gap-1.5">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Document title</span>
+      <input
+        v-model="title"
+        type="text"
+        placeholder="Edit to update the timestamp"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+    </label>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Last edited</span>
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+          :class="lastChanged === null
+            ? 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'
+            : 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'"
+        >
+          <span class="h-1.5 w-1.5 rounded-full" :class="lastChanged === null ? 'bg-(--fg-subtle)' : 'bg-emerald-500'" />
+          {{ lastChanged === null ? 'untouched' : 'edited' }}
+        </span>
+      </div>
+
+      <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ relative }}</span>
+
+      <div class="h-px bg-(--border)" />
+
+      <div class="flex items-center justify-between">
+        <span class="text-xs text-(--fg-subtle)">Timestamp</span>
+        <span class="font-mono text-sm tabular-nums text-(--fg-muted)">{{ exactTime }}</span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/web/vue/src/composables/reactivity/useLastChanged/index.test.ts b/vue/toolkit/src/composables/state/useLastChanged/index.test.ts
similarity index 94%
rename from web/vue/src/composables/reactivity/useLastChanged/index.test.ts
rename to vue/toolkit/src/composables/state/useLastChanged/index.test.ts
index 5c980d0..e71ebf7 100644
--- a/web/vue/src/composables/reactivity/useLastChanged/index.test.ts
+++ b/vue/toolkit/src/composables/state/useLastChanged/index.test.ts
@@ -1,5 +1,5 @@
-import { ref, nextTick } from 'vue';
-import { describe, it, expect } from 'vitest';
+import { nextTick, ref } from 'vue';
+import { describe, expect, it } from 'vitest';
 import { useLastChanged } from '.';
 import { timestamp } from '@robonen/stdlib';
 
@@ -47,4 +47,4 @@ describe(useLastChanged, () => {
 
     expect(lastChanged.value).toBe(initialTimestamp);
   });
-});
\ No newline at end of file
+});
diff --git a/web/vue/src/composables/reactivity/useLastChanged/index.ts b/vue/toolkit/src/composables/state/useLastChanged/index.ts
similarity index 87%
rename from web/vue/src/composables/reactivity/useLastChanged/index.ts
rename to vue/toolkit/src/composables/state/useLastChanged/index.ts
index 06c69f8..d1a016e 100644
--- a/web/vue/src/composables/reactivity/useLastChanged/index.ts
+++ b/vue/toolkit/src/composables/state/useLastChanged/index.ts
@@ -1,6 +1,6 @@
 import { timestamp } from '@robonen/stdlib';
 import { ref, watch } from 'vue';
-import type { WatchSource, WatchOptions, Ref } from 'vue';
+import type { Ref, WatchOptions, WatchSource } from 'vue';
 
 export interface UseLastChangedOptions<
   Immediate extends boolean,
@@ -11,29 +11,31 @@ export interface UseLastChangedOptions<
 
 /**
  * @name useLastChanged
- * @category Reactivity
+ * @category State
  * @description Records the last time a value changed
- * 
+ *
  * @param {WatchSource} source The value to track
  * @param {UseLastChangedOptions} [options={}] The options for the last changed tracker
  * @returns {Ref<number | null>} The timestamp of the last change
- * 
+ *
  * @example
  * const value = ref(0);
  * const lastChanged = useLastChanged(value);
- * 
+ *
  * @example
  * const value = ref(0);
  * const lastChanged = useLastChanged(value, { immediate: true });
- * 
+ *
  * @since 0.0.1
  */
 export function useLastChanged(source: WatchSource, options?: UseLastChangedOptions<false>): Ref<number | null>;
-export function useLastChanged(source: WatchSource, options: UseLastChangedOptions<true> | UseLastChangedOptions<boolean, number>): Ref<number>
+export function useLastChanged(source: WatchSource, options: UseLastChangedOptions<true> | UseLastChangedOptions<boolean, number>): Ref<number>;
 export function useLastChanged(source: WatchSource, options: UseLastChangedOptions<boolean, any> = {}): Ref<number | null> | Ref<number> {
   const lastChanged = ref<number | null>(options.initialValue ?? null);
 
-  watch(source, () => { lastChanged.value = timestamp(); }, options);
+  watch(source, () => {
+    lastChanged.value = timestamp();
+  }, options);
 
   return lastChanged;
 }
diff --git a/vue/toolkit/src/composables/state/useManualRefHistory/demo.vue b/vue/toolkit/src/composables/state/useManualRefHistory/demo.vue
new file mode 100644
index 0000000..e0807f7
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useManualRefHistory/demo.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useManualRefHistory } from './index';
+
+// A pannable, hue-shiftable color value. Snapshots are only recorded when the
+// user explicitly commits — perfect for a "save state" / checkpoint workflow.
+const hue = ref(210);
+
+const { history, undo, redo, commit, reset, clear, canUndo, canRedo } = useManualRefHistory(hue, {
+  capacity: 6,
+});
+
+function formatTime(ts: number): string {
+  return new Date(ts).toLocaleTimeString(undefined, {
+    hour12: false,
+    minute: '2-digit',
+    second: '2-digit',
+  });
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Working value</span>
+        <span class="font-mono text-sm tabular-nums text-(--fg-muted)">hue {{ hue }}°</span>
+      </div>
+
+      <div
+        class="h-16 w-full rounded-lg border border-(--border)"
+        :style="{ backgroundColor: `hsl(${hue} 72% 56%)` }"
+      />
+
+      <input
+        v-model.number="hue"
+        type="range"
+        min="0"
+        max="360"
+        class="w-full accent-(--accent)"
+      >
+
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="commit"
+      >
+        Commit snapshot
+      </button>
+    </div>
+
+    <div class="flex flex-wrap gap-2">
+      <button
+        type="button"
+        :disabled="!canUndo"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="undo"
+      >
+        Undo
+      </button>
+      <button
+        type="button"
+        :disabled="!canRedo"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="redo"
+      >
+        Redo
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="reset"
+      >
+        Reset
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="clear"
+      >
+        Clear
+      </button>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Committed snapshots</span>
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted) tabular-nums">
+          {{ history.length }}
+        </span>
+      </div>
+      <ol class="flex flex-col gap-1.5">
+        <li
+          v-for="(record, i) in history"
+          :key="record.timestamp"
+          class="flex items-center justify-between gap-3 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-1.5"
+        >
+          <span class="flex items-center gap-2">
+            <span
+              class="h-4 w-4 shrink-0 rounded-full border border-(--border)"
+              :style="{ backgroundColor: `hsl(${record.snapshot} 72% 56%)` }"
+            />
+            <span class="font-mono text-sm tabular-nums text-(--fg)">{{ record.snapshot }}°</span>
+          </span>
+          <span class="shrink-0 font-mono text-xs tabular-nums" :class="i === 0 ? 'text-(--accent-text)' : 'text-(--fg-subtle)'">
+            {{ i === 0 ? 'current' : formatTime(record.timestamp) }}
+          </span>
+        </li>
+      </ol>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Unlike automatic history, nothing is recorded until you press
+      <span class="font-mono">Commit snapshot</span>.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/state/useManualRefHistory/index.test.ts b/vue/toolkit/src/composables/state/useManualRefHistory/index.test.ts
new file mode 100644
index 0000000..545f0c2
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useManualRefHistory/index.test.ts
@@ -0,0 +1,237 @@
+import { describe, expect, it, vi } from 'vitest';
+import { ref } from 'vue';
+import { useManualRefHistory } from '.';
+
+describe(useManualRefHistory, () => {
+  it('starts with a single record snapshotting the initial value', () => {
+    const source = ref(0);
+    const { history, last, canUndo, canRedo } = useManualRefHistory(source);
+
+    expect(history.value).toHaveLength(1);
+    expect(history.value[0]!.snapshot).toBe(0);
+    expect(last.value.snapshot).toBe(0);
+    expect(canUndo.value).toBeFalsy();
+    expect(canRedo.value).toBeFalsy();
+  });
+
+  it('attaches a timestamp to each record', () => {
+    const now = 1_000_000;
+    vi.spyOn(Date, 'now').mockReturnValue(now);
+
+    const source = ref(0);
+    const { last } = useManualRefHistory(source);
+
+    expect(last.value.timestamp).toBe(now);
+    vi.restoreAllMocks();
+  });
+
+  it('only records snapshots when commit is called', () => {
+    const source = ref(0);
+    const { history, commit } = useManualRefHistory(source);
+
+    source.value = 1;
+    expect(history.value).toHaveLength(1);
+    expect(history.value[0]!.snapshot).toBe(0);
+
+    commit();
+    expect(history.value).toHaveLength(2);
+    expect(history.value[0]!.snapshot).toBe(1);
+    expect(history.value[1]!.snapshot).toBe(0);
+  });
+
+  it('exposes the most recent record first in history', () => {
+    const source = ref('a');
+    const { history, commit } = useManualRefHistory(source);
+
+    source.value = 'b';
+    commit();
+    source.value = 'c';
+    commit();
+
+    expect(history.value.map(r => r.snapshot)).toEqual(['c', 'b', 'a']);
+  });
+
+  it('undoes to the previous committed value', () => {
+    const source = ref(0);
+    const { commit, undo, canUndo, canRedo } = useManualRefHistory(source);
+
+    source.value = 1;
+    commit();
+    expect(canUndo.value).toBeTruthy();
+
+    undo();
+    expect(source.value).toBe(0);
+    expect(canUndo.value).toBeFalsy();
+    expect(canRedo.value).toBeTruthy();
+  });
+
+  it('redoes a previously undone value', () => {
+    const source = ref(0);
+    const { commit, undo, redo, canRedo } = useManualRefHistory(source);
+
+    source.value = 1;
+    commit();
+    undo();
+    expect(source.value).toBe(0);
+
+    redo();
+    expect(source.value).toBe(1);
+    expect(canRedo.value).toBeFalsy();
+  });
+
+  it('is a no-op when undoing or redoing with empty stacks', () => {
+    const source = ref(5);
+    const { undo, redo } = useManualRefHistory(source);
+
+    undo();
+    redo();
+    expect(source.value).toBe(5);
+  });
+
+  it('clears the redo stack on a new commit', () => {
+    const source = ref(0);
+    const { commit, undo, canRedo } = useManualRefHistory(source);
+
+    source.value = 1;
+    commit();
+    undo();
+    expect(canRedo.value).toBeTruthy();
+
+    source.value = 2;
+    commit();
+    expect(canRedo.value).toBeFalsy();
+  });
+
+  it('clear empties both stacks but keeps last', () => {
+    const source = ref(0);
+    const { commit, clear, history, last, canUndo, canRedo } = useManualRefHistory(source);
+
+    source.value = 1;
+    commit();
+    source.value = 2;
+    commit();
+
+    clear();
+    expect(canUndo.value).toBeFalsy();
+    expect(canRedo.value).toBeFalsy();
+    expect(history.value).toHaveLength(1);
+    expect(last.value.snapshot).toBe(2);
+  });
+
+  it('reset restores the source to the last committed snapshot', () => {
+    const source = ref(0);
+    const { commit, reset } = useManualRefHistory(source);
+
+    source.value = 1;
+    commit();
+    source.value = 999;
+
+    reset();
+    expect(source.value).toBe(1);
+  });
+
+  it('respects the capacity option', () => {
+    const source = ref(0);
+    const { commit, undoStack, history } = useManualRefHistory(source, { capacity: 2 });
+
+    for (let i = 1; i <= 5; i++) {
+      source.value = i;
+      commit();
+    }
+
+    expect(undoStack.value).toHaveLength(2);
+    // last (5) + 2 undo records
+    expect(history.value.map(r => r.snapshot)).toEqual([5, 4, 3]);
+  });
+
+  it('does not clone snapshots by default (shares references)', () => {
+    const source = ref({ count: 0 });
+    const { commit, history } = useManualRefHistory(source);
+
+    commit();
+    expect(history.value[0]!.snapshot).toBe(source.value);
+  });
+
+  it('deep clones snapshots when clone: true', () => {
+    const obj = { count: 0 };
+    const source = ref(obj);
+    const { commit, history } = useManualRefHistory(source, { clone: true });
+
+    commit();
+    const snapshot = history.value[0]!.snapshot;
+
+    expect(snapshot).toEqual(obj);
+    expect(snapshot).not.toBe(obj);
+  });
+
+  it('clone deep-isolates undo restoration from later source mutation', () => {
+    const source = ref({ value: 'initial' });
+    const { commit, undo } = useManualRefHistory(source, { clone: true });
+
+    source.value = { value: 'changed' };
+    commit();
+    source.value.value = 'mutated';
+
+    undo();
+    expect(source.value.value).toBe('initial');
+  });
+
+  it('accepts a custom clone function', () => {
+    const clone = vi.fn((v: { n: number }) => ({ n: v.n }));
+    const source = ref({ n: 1 });
+    const { commit } = useManualRefHistory(source, { clone });
+
+    commit();
+    expect(clone).toHaveBeenCalled();
+  });
+
+  it('supports custom dump and parse serialization', () => {
+    const source = ref({ a: 1 });
+    const { commit, undo, history } = useManualRefHistory<{ a: number }, string>(source, {
+      dump: v => JSON.stringify(v),
+      parse: s => JSON.parse(s) as { a: number },
+    });
+
+    source.value = { a: 2 };
+    commit();
+    expect(history.value[0]!.snapshot).toBe('{"a":2}');
+
+    undo();
+    expect(source.value).toEqual({ a: 1 });
+  });
+
+  it('supports a custom setSource', () => {
+    const source = ref(0);
+    const setSource = vi.fn((s: typeof source, v: number) => {
+      s.value = v;
+    });
+    const { commit, undo } = useManualRefHistory(source, { setSource });
+
+    source.value = 1;
+    commit();
+    undo();
+
+    expect(setSource).toHaveBeenCalled();
+    expect(source.value).toBe(0);
+  });
+
+  it('returns the original source ref', () => {
+    const source = ref(0);
+    const result = useManualRefHistory(source);
+    expect(result.source).toBe(source);
+  });
+
+  it('works in an SSR-like environment without DOM globals', () => {
+    // No window/document/navigator are touched by this composable; verify it
+    // operates purely on the ref it is given.
+    const source = ref(42);
+    const { commit, undo, history } = useManualRefHistory(source);
+
+    source.value = 43;
+    commit();
+    expect(history.value).toHaveLength(2);
+
+    undo();
+    expect(source.value).toBe(42);
+  });
+});
diff --git a/vue/toolkit/src/composables/state/useManualRefHistory/index.ts b/vue/toolkit/src/composables/state/useManualRefHistory/index.ts
new file mode 100644
index 0000000..85d95bc
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useManualRefHistory/index.ts
@@ -0,0 +1,238 @@
+import { computed, markRaw, ref } from 'vue';
+import type { ComputedRef, Ref } from 'vue';
+import { isFunction, timestamp } from '@robonen/stdlib';
+import { cloneFnDefault } from '@/composables/reactivity/useCloned';
+import type { CloneFn } from '@/composables/reactivity/useCloned';
+
+export interface UseRefHistoryRecord<T> {
+  /**
+   * The (optionally serialized) value captured at commit time.
+   */
+  snapshot: T;
+
+  /**
+   * Milliseconds since the Unix epoch when the record was created.
+   */
+  timestamp: number;
+}
+
+export interface UseManualRefHistoryOptions<Raw, Serialized = Raw> {
+  /**
+   * Maximum number of history records kept in the undo stack. When omitted the
+   * stack grows without bound.
+   */
+  capacity?: number;
+
+  /**
+   * Clone the snapshot when committing. Pass `true` for the default deep clone
+   * (`structuredClone` with a JSON fallback), or a custom clone function.
+   *
+   * @default false
+   */
+  clone?: boolean | CloneFn<Raw>;
+
+  /**
+   * Serialize the source value into a snapshot when committing. Defaults to the
+   * clone function when `clone` is set, otherwise an identity passthrough.
+   */
+  dump?: (value: Raw) => Serialized;
+
+  /**
+   * Deserialize a snapshot back into a source value when restoring. Defaults to
+   * the clone function when `clone` is set, otherwise an identity passthrough.
+   */
+  parse?: (value: Serialized) => Raw;
+
+  /**
+   * Write a restored value back to the source ref. Override to integrate with
+   * custom writable sources.
+   */
+  setSource?: (source: Ref<Raw>, value: Raw) => void;
+}
+
+export interface UseManualRefHistoryReturn<Raw, Serialized> {
+  /**
+   * The tracked source ref.
+   */
+  source: Ref<Raw>;
+
+  /**
+   * All records, most recent first (the current `last` followed by the undo stack).
+   */
+  history: ComputedRef<Array<UseRefHistoryRecord<Serialized>>>;
+
+  /**
+   * The most recently committed record.
+   */
+  last: Ref<UseRefHistoryRecord<Serialized>>;
+
+  /**
+   * Records available to undo to, most recent first.
+   */
+  undoStack: Ref<Array<UseRefHistoryRecord<Serialized>>>;
+
+  /**
+   * Records available to redo to, most recent first.
+   */
+  redoStack: Ref<Array<UseRefHistoryRecord<Serialized>>>;
+
+  /**
+   * Whether there is at least one record to undo to.
+   */
+  canUndo: ComputedRef<boolean>;
+
+  /**
+   * Whether there is at least one record to redo to.
+   */
+  canRedo: ComputedRef<boolean>;
+
+  /**
+   * Capture the current source value as a new history record.
+   */
+  commit: () => void;
+
+  /**
+   * Drop every record from both stacks (keeps the current `last`).
+   */
+  clear: () => void;
+
+  /**
+   * Restore the previous record, moving the current one onto the redo stack.
+   */
+  undo: () => void;
+
+  /**
+   * Reapply the most recently undone record.
+   */
+  redo: () => void;
+
+  /**
+   * Restore the source to the value of the current `last` record.
+   */
+  reset: () => void;
+}
+
+type FnCloneOrBypass<F, T> = (value: F) => T;
+
+function fnBypass<F, T>(value: F): T {
+  return value as unknown as T;
+}
+
+function fnSetSource<T>(source: Ref<T>, value: T): void {
+  source.value = value;
+}
+
+function resolveTransform<R, S>(clone?: boolean | CloneFn<R>): FnCloneOrBypass<R, S> {
+  if (!clone)
+    return fnBypass as FnCloneOrBypass<R, S>;
+
+  return (isFunction(clone) ? clone : cloneFnDefault) as unknown as FnCloneOrBypass<R, S>;
+}
+
+/**
+ * @name useManualRefHistory
+ * @category State
+ * @description Manually-committed undo/redo history for a ref. Records snapshots only when `commit()` is called, with optional cloning, serialization, and a bounded capacity.
+ *
+ * @param {Ref<Raw>} source The ref whose value changes are tracked
+ * @param {UseManualRefHistoryOptions<Raw, Serialized>} [options={}] Options: `capacity`, `clone`, `dump`, `parse`, `setSource`
+ * @returns {UseManualRefHistoryReturn<Raw, Serialized>} History state plus `commit`, `undo`, `redo`, `clear`, and `reset`
+ *
+ * @example
+ * const count = ref(0);
+ * const { history, commit, undo, redo, canUndo } = useManualRefHistory(count);
+ * count.value = 1;
+ * commit();
+ * undo(); // count.value === 0
+ *
+ * @example
+ * const state = ref({ items: [] });
+ * const { commit, undo } = useManualRefHistory(state, { clone: true, capacity: 10 });
+ *
+ * @since 0.0.15
+ */
+export function useManualRefHistory<Raw, Serialized = Raw>(
+  source: Ref<Raw>,
+  options: UseManualRefHistoryOptions<Raw, Serialized> = {},
+): UseManualRefHistoryReturn<Raw, Serialized> {
+  const {
+    capacity,
+    clone = false,
+    dump = resolveTransform<Raw, Serialized>(clone),
+    parse = resolveTransform<Serialized, Raw>(clone as boolean | CloneFn<Serialized>),
+    setSource = fnSetSource,
+  } = options;
+
+  function createRecord(): UseRefHistoryRecord<Serialized> {
+    return markRaw({
+      snapshot: dump(source.value),
+      timestamp: timestamp(),
+    });
+  }
+
+  const last = ref(createRecord()) as Ref<UseRefHistoryRecord<Serialized>>;
+  const undoStack = ref([]) as Ref<Array<UseRefHistoryRecord<Serialized>>>;
+  const redoStack = ref([]) as Ref<Array<UseRefHistoryRecord<Serialized>>>;
+
+  function applyRecord(record: UseRefHistoryRecord<Serialized>): void {
+    setSource(source, parse(record.snapshot));
+    last.value = record;
+  }
+
+  function commit(): void {
+    undoStack.value.unshift(last.value);
+    last.value = createRecord();
+
+    if (capacity && undoStack.value.length > capacity)
+      undoStack.value.splice(capacity, Number.POSITIVE_INFINITY);
+
+    if (redoStack.value.length)
+      redoStack.value.splice(0, redoStack.value.length);
+  }
+
+  function clear(): void {
+    undoStack.value.splice(0, undoStack.value.length);
+    redoStack.value.splice(0, redoStack.value.length);
+  }
+
+  function undo(): void {
+    const record = undoStack.value.shift();
+
+    if (record) {
+      redoStack.value.unshift(last.value);
+      applyRecord(record);
+    }
+  }
+
+  function redo(): void {
+    const record = redoStack.value.shift();
+
+    if (record) {
+      undoStack.value.unshift(last.value);
+      applyRecord(record);
+    }
+  }
+
+  function reset(): void {
+    applyRecord(last.value);
+  }
+
+  const history = computed<Array<UseRefHistoryRecord<Serialized>>>(() => [last.value, ...undoStack.value]);
+  const canUndo = computed(() => undoStack.value.length > 0);
+  const canRedo = computed(() => redoStack.value.length > 0);
+
+  return {
+    source,
+    history,
+    last,
+    undoStack,
+    redoStack,
+    canUndo,
+    canRedo,
+    commit,
+    clear,
+    undo,
+    redo,
+    reset,
+  };
+}
diff --git a/vue/toolkit/src/composables/state/useOffsetPagination/demo.vue b/vue/toolkit/src/composables/state/useOffsetPagination/demo.vue
new file mode 100644
index 0000000..1f41534
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useOffsetPagination/demo.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useOffsetPagination } from './index';
+
+interface User {
+  id: number;
+  name: string;
+  role: string;
+}
+
+const ROLES = ['Engineer', 'Designer', 'Manager', 'Analyst', 'Support'];
+const FIRST = ['Ada', 'Linus', 'Grace', 'Alan', 'Margaret', 'Dennis', 'Barbara', 'Ken'];
+const LAST = ['Lovelace', 'Torvalds', 'Hopper', 'Turing', 'Hamilton', 'Ritchie', 'Liskov', 'Thompson'];
+
+// Realistic dataset of 47 users
+const all = ref<User[]>(
+  Array.from({ length: 47 }, (_, i) => ({
+    id: i + 1,
+    name: `${FIRST[i % FIRST.length]} ${LAST[(i * 3) % LAST.length]}`,
+    role: ROLES[i % ROLES.length],
+  })),
+);
+
+const total = computed(() => all.value.length);
+
+const {
+  currentPage,
+  currentPageSize,
+  totalPages,
+  isFirstPage,
+  isLastPage,
+  next,
+  previous,
+  select,
+} = useOffsetPagination({ total, pageSize: 5, page: 1 });
+
+const pageItems = computed(() => {
+  const start = (currentPage.value - 1) * currentPageSize.value;
+  return all.value.slice(start, start + currentPageSize.value);
+});
+
+const rangeStart = computed(() => (currentPage.value - 1) * currentPageSize.value + 1);
+const rangeEnd = computed(() => Math.min(currentPage.value * currentPageSize.value, total.value));
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <!-- Page size control -->
+    <div class="flex items-center justify-between gap-3">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Per page
+      </span>
+      <div class="flex gap-1.5">
+        <button
+          v-for="size in [5, 10, 20]"
+          :key="size"
+          type="button"
+          class="inline-flex items-center justify-center rounded-lg border px-2.5 py-1 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+          :class="currentPageSize === size
+            ? 'border-transparent bg-(--accent) text-(--accent-fg)'
+            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+          @click="currentPageSize = size"
+        >
+          {{ size }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Records -->
+    <ul class="overflow-hidden rounded-xl border border-(--border) bg-(--bg-elevated)">
+      <li
+        v-for="user in pageItems"
+        :key="user.id"
+        class="flex items-center gap-3 border-b border-(--border) px-4 py-2.5 last:border-b-0"
+      >
+        <span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-(--accent-subtle) text-xs font-semibold text-(--accent-text)">
+          {{ user.id }}
+        </span>
+        <span class="flex-1 truncate text-sm font-medium text-(--fg)">{{ user.name }}</span>
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+          {{ user.role }}
+        </span>
+      </li>
+    </ul>
+
+    <!-- Footer + pager -->
+    <div class="flex flex-wrap items-center justify-between gap-3">
+      <p class="text-sm text-(--fg-muted) tabular-nums">
+        {{ rangeStart }}–{{ rangeEnd }} of {{ total }}
+      </p>
+
+      <div class="flex flex-wrap items-center justify-center gap-1.5">
+        <button
+          type="button"
+          class="inline-flex items-center justify-center rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          :disabled="isFirstPage"
+          @click="previous"
+        >
+          ‹ Prev
+        </button>
+
+        <button
+          v-for="page in totalPages"
+          :key="page"
+          type="button"
+          class="inline-flex h-8 w-8 items-center justify-center rounded-lg border text-sm font-medium tabular-nums transition active:scale-[0.98] cursor-pointer"
+          :class="page === currentPage
+            ? 'border-transparent bg-(--accent) text-(--accent-fg)'
+            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+          :aria-current="page === currentPage ? 'page' : undefined"
+          @click="select(page)"
+        >
+          {{ page }}
+        </button>
+
+        <button
+          type="button"
+          class="inline-flex items-center justify-center rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          :disabled="isLastPage"
+          @click="next"
+        >
+          Next ›
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/web/vue/src/composables/utilities/useOffsetPagination/index.test.ts b/vue/toolkit/src/composables/state/useOffsetPagination/index.test.ts
similarity index 94%
rename from web/vue/src/composables/utilities/useOffsetPagination/index.test.ts
rename to vue/toolkit/src/composables/state/useOffsetPagination/index.test.ts
index 191e744..b006b6e 100644
--- a/web/vue/src/composables/utilities/useOffsetPagination/index.test.ts
+++ b/vue/toolkit/src/composables/state/useOffsetPagination/index.test.ts
@@ -1,11 +1,11 @@
-import { describe, it, expect, vi } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 import { nextTick, ref } from 'vue';
 import { useOffsetPagination } from '.';
 
 describe(useOffsetPagination, () => {
   it('initialize with default values without options', () => {
     const { currentPage, currentPageSize, totalPages, isFirstPage } = useOffsetPagination({});
-    
+
     expect(currentPage.value).toBe(1);
     expect(currentPageSize.value).toBe(10);
     expect(totalPages.value).toBe(Infinity);
@@ -14,42 +14,42 @@ describe(useOffsetPagination, () => {
 
   it('calculate total pages correctly', () => {
     const { totalPages } = useOffsetPagination({ total: 100, pageSize: 10 });
-    
+
     expect(totalPages.value).toBe(10);
   });
 
   it('update current page correctly', () => {
     const { currentPage, next, previous, select } = useOffsetPagination({ total: 100, pageSize: 10 });
-  
+
     next();
     expect(currentPage.value).toBe(2);
-    
+
     previous();
     expect(currentPage.value).toBe(1);
-    
+
     select(5);
     expect(currentPage.value).toBe(5);
   });
 
   it('handle out of bounds increments correctly', () => {
     const { currentPage, next, previous } = useOffsetPagination({ total: 10, pageSize: 5 });
-    
+
     next();
     next();
     next();
-    
+
     expect(currentPage.value).toBe(2);
-    
+
     previous();
     previous();
     previous();
-    
+
     expect(currentPage.value).toBe(1);
   });
 
   it('handle page boundaries correctly', () => {
     const { currentPage, isFirstPage, isLastPage } = useOffsetPagination({ total: 20, pageSize: 10 });
-    
+
     expect(currentPage.value).toBe(1);
     expect(isFirstPage.value).toBeTruthy();
     expect(isLastPage.value).toBeFalsy();
@@ -64,10 +64,10 @@ describe(useOffsetPagination, () => {
   it('call onPageChange callback', async () => {
     const onPageChange = vi.fn();
     const { currentPage, next } = useOffsetPagination({ total: 100, pageSize: 10, onPageChange });
-    
+
     next();
     await nextTick();
-    
+
     expect(onPageChange).toHaveBeenCalledTimes(1);
     expect(onPageChange.mock.calls[0]![0]).toHaveProperty('currentPage', currentPage.value);
   });
@@ -75,8 +75,8 @@ describe(useOffsetPagination, () => {
   it('call onPageSizeChange callback', async () => {
     const onPageSizeChange = vi.fn();
     const pageSize = ref(10);
-    const { currentPageSize } = useOffsetPagination({  total: 100, pageSize, onPageSizeChange });
-    
+    const { currentPageSize } = useOffsetPagination({ total: 100, pageSize, onPageSizeChange });
+
     pageSize.value = 20;
     await nextTick();
 
@@ -88,7 +88,7 @@ describe(useOffsetPagination, () => {
     const onTotalPagesChange = vi.fn();
     const total = ref(100);
     const { totalPages } = useOffsetPagination({ total, pageSize: 10, onTotalPagesChange });
-    
+
     total.value = 200;
     await nextTick();
 
@@ -113,7 +113,7 @@ describe(useOffsetPagination, () => {
       onPageSizeChange,
       onTotalPagesChange,
     });
-    
+
     // Initial values
     expect(currentPage.value).toBe(1);
     expect(currentPageSize.value).toBe(10);
@@ -121,12 +121,12 @@ describe(useOffsetPagination, () => {
     expect(onPageChange).toHaveBeenCalledTimes(0);
     expect(onPageSizeChange).toHaveBeenCalledTimes(0);
     expect(onTotalPagesChange).toHaveBeenCalledTimes(0);
-    
+
     total.value = 300;
     pageSize.value = 15;
     page.value = 2;
     await nextTick();
-    
+
     // Valid values after changes
     expect(currentPage.value).toBe(2);
     expect(currentPageSize.value).toBe(15);
@@ -144,4 +144,4 @@ describe(useOffsetPagination, () => {
     expect(onPageSizeChange).toHaveBeenCalledTimes(1);
     expect(onTotalPagesChange).toHaveBeenCalledTimes(1);
   });
-});
\ No newline at end of file
+});
diff --git a/web/vue/src/composables/utilities/useOffsetPagination/index.ts b/vue/toolkit/src/composables/state/useOffsetPagination/index.ts
similarity index 96%
rename from web/vue/src/composables/utilities/useOffsetPagination/index.ts
rename to vue/toolkit/src/composables/state/useOffsetPagination/index.ts
index 21c9988..ffa91fc 100644
--- a/web/vue/src/composables/utilities/useOffsetPagination/index.ts
+++ b/vue/toolkit/src/composables/state/useOffsetPagination/index.ts
@@ -29,9 +29,9 @@ export type UseOffsetPaginationInfinityReturn = Omit<UseOffsetPaginationReturn,
 
 /**
  * @name useOffsetPagination
- * @category Utilities
+ * @category State
  * @description A composable function that provides pagination functionality for offset based pagination
- * 
+ *
  * @param {UseOffsetPaginationOptions} options The options for the pagination
  * @param {MaybeRefOrGetter<number>} options.total The total number of items
  * @param {MaybeRef<number>} options.pageSize The number of items per page
@@ -40,7 +40,7 @@ export type UseOffsetPaginationInfinityReturn = Omit<UseOffsetPaginationReturn,
  * @param {(returnValue: UnwrapNestedRefs<UseOffsetPaginationReturn>) => unknown} options.onPageSizeChange A callback that is called when the page size changes
  * @param {(returnValue: UnwrapNestedRefs<UseOffsetPaginationReturn>) => unknown} options.onTotalPagesChange A callback that is called when the total number of pages changes
  * @returns {UseOffsetPaginationReturn} The pagination object
- * 
+ *
  * @example
  * const {
  *  currentPage,
@@ -52,7 +52,7 @@ export type UseOffsetPaginationInfinityReturn = Omit<UseOffsetPaginationReturn,
  *  previous,
  *  select,
  * } = useOffsetPagination({ total: 100, pageSize: 10, page: 1 });
- * 
+ *
  * @example
  * const {
  *  currentPage,
@@ -64,7 +64,7 @@ export type UseOffsetPaginationInfinityReturn = Omit<UseOffsetPaginationReturn,
  *  onPageSizeChange: ({ currentPageSize }) => console.log(currentPageSize),
  *  onTotalPagesChange: ({ totalPages }) => console.log(totalPages),
  * });
- * 
+ *
  * @since 0.0.1
  */
 export function useOffsetPagination(options: Omit<UseOffsetPaginationOptions, 'total'>): UseOffsetPaginationInfinityReturn;
@@ -80,7 +80,7 @@ export function useOffsetPagination(options: UseOffsetPaginationOptions): UseOff
 
   const totalPages = computed(() => Math.max(
     1,
-    Math.ceil(toValue(total) / toValue(currentPageSize))
+    Math.ceil(toValue(total) / toValue(currentPageSize)),
   ));
 
   const currentPage = useClamp(page, 1, totalPages);
@@ -90,7 +90,9 @@ export function useOffsetPagination(options: UseOffsetPaginationOptions): UseOff
 
   const next = () => currentPage.value++;
   const previous = () => currentPage.value--;
-  const select = (page: number) => { currentPage.value = page; };
+  const select = (page: number) => {
+    currentPage.value = page;
+  };
 
   const returnValue = {
     currentPage,
diff --git a/vue/toolkit/src/composables/state/useRefHistory/demo.vue b/vue/toolkit/src/composables/state/useRefHistory/demo.vue
new file mode 100644
index 0000000..2961035
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useRefHistory/demo.vue
@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useRefHistory } from './index';
+
+const text = ref('The quick brown fox');
+
+const {
+  history,
+  canUndo,
+  canRedo,
+  isTracking,
+  undo,
+  redo,
+  clear,
+  pause,
+  resume,
+} = useRefHistory(text, { capacity: 10 });
+
+function formatTime(ts: number): string {
+  return new Date(ts).toLocaleTimeString(undefined, {
+    hour12: false,
+    minute: '2-digit',
+    second: '2-digit',
+  });
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <!-- Source editor -->
+    <div class="flex flex-col gap-2">
+      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Tracked value
+      </label>
+      <input
+        v-model="text"
+        type="text"
+        placeholder="Type to record history…"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+    </div>
+
+    <!-- Controls -->
+    <div class="flex flex-wrap items-center gap-2">
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="!canUndo"
+        @click="undo"
+      >
+        ↶ Undo
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="!canRedo"
+        @click="redo"
+      >
+        ↷ Redo
+      </button>
+
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="isTracking ? pause() : resume()"
+      >
+        {{ isTracking ? '❚❚ Pause' : '▶ Resume' }}
+      </button>
+
+      <button
+        type="button"
+        class="ml-auto inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="clear"
+      >
+        Clear
+      </button>
+    </div>
+
+    <!-- Tracking status -->
+    <div class="flex items-center gap-2">
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+        :class="isTracking
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'"
+      >
+        <span class="h-1.5 w-1.5 rounded-full" :class="isTracking ? 'bg-emerald-500' : 'bg-amber-500'" />
+        {{ isTracking ? 'Tracking' : 'Paused' }}
+      </span>
+      <span class="text-xs text-(--fg-subtle) tabular-nums">
+        {{ history.length }} record{{ history.length === 1 ? '' : 's' }}
+      </span>
+    </div>
+
+    <!-- History timeline -->
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-2">
+      <ul class="flex max-h-48 flex-col gap-1 overflow-y-auto">
+        <li
+          v-for="(record, i) in history"
+          :key="record.timestamp + '-' + i"
+          class="flex items-center gap-3 rounded-lg px-2 py-1.5 text-sm"
+          :class="i === 0 ? 'bg-(--accent-subtle)' : ''"
+        >
+          <span class="font-mono text-xs text-(--fg-subtle) tabular-nums">
+            {{ formatTime(record.timestamp) }}
+          </span>
+          <span class="flex-1 truncate" :class="i === 0 ? 'font-medium text-(--accent-text)' : 'text-(--fg-muted)'">
+            {{ record.snapshot || '(empty)' }}
+          </span>
+          <span
+            v-if="i === 0"
+            class="text-xs font-medium text-(--accent-text)"
+          >current</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/state/useRefHistory/index.test.ts b/vue/toolkit/src/composables/state/useRefHistory/index.test.ts
new file mode 100644
index 0000000..0505e72
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useRefHistory/index.test.ts
@@ -0,0 +1,375 @@
+import { describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, ref } from 'vue';
+import { useRefHistory } from '.';
+
+describe(useRefHistory, () => {
+  it('seeds history with the initial value', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const { history, last, canUndo, canRedo } = useRefHistory(count, { flush: 'sync' });
+
+      expect(history.value).toHaveLength(1);
+      expect(history.value[0]!.snapshot).toBe(0);
+      expect(last.value.snapshot).toBe(0);
+      expect(canUndo.value).toBeFalsy();
+      expect(canRedo.value).toBeFalsy();
+    });
+    scope.stop();
+  });
+
+  it('records changes (newest first) with sync flush', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const { history } = useRefHistory(count, { flush: 'sync' });
+
+      count.value = 1;
+      count.value = 2;
+
+      expect(history.value.map(r => r.snapshot)).toEqual([2, 1, 0]);
+    });
+    scope.stop();
+  });
+
+  it('records changes with the default (pre) flush', async () => {
+    const scope = effectScope();
+    await scope.run(async () => {
+      const count = ref(0);
+      const { history } = useRefHistory(count);
+
+      count.value = 1;
+      await nextTick();
+      count.value = 2;
+      await nextTick();
+
+      expect(history.value.map(r => r.snapshot)).toEqual([2, 1, 0]);
+    });
+    scope.stop();
+  });
+
+  it('undoes and redoes', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const { undo, redo, canUndo, canRedo } = useRefHistory(count, { flush: 'sync' });
+
+      count.value = 1;
+      count.value = 2;
+      expect(canUndo.value).toBeTruthy();
+      expect(canRedo.value).toBeFalsy();
+
+      undo();
+      expect(count.value).toBe(1);
+      expect(canRedo.value).toBeTruthy();
+
+      undo();
+      expect(count.value).toBe(0);
+      expect(canUndo.value).toBeFalsy();
+
+      redo();
+      expect(count.value).toBe(1);
+      redo();
+      expect(count.value).toBe(2);
+      expect(canRedo.value).toBeFalsy();
+    });
+    scope.stop();
+  });
+
+  it('does not record undo/redo writes as new history', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const { history, undo } = useRefHistory(count, { flush: 'sync' });
+
+      count.value = 1;
+      count.value = 2;
+      undo();
+
+      expect(history.value.map(r => r.snapshot)).toEqual([1, 0]);
+    });
+    scope.stop();
+  });
+
+  it('clears the redo stack on a fresh edit', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const { undo, canRedo } = useRefHistory(count, { flush: 'sync' });
+
+      count.value = 1;
+      count.value = 2;
+      undo();
+      expect(canRedo.value).toBeTruthy();
+
+      count.value = 5;
+      expect(canRedo.value).toBeFalsy();
+    });
+    scope.stop();
+  });
+
+  it('commits manually', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const { history, commit } = useRefHistory(count, { flush: 'sync' });
+
+      count.value = 1;
+      // a sync flush already committed; force a duplicate manual commit
+      commit();
+
+      expect(history.value.map(r => r.snapshot)).toEqual([1, 1, 0]);
+    });
+    scope.stop();
+  });
+
+  it('clears history but keeps the current value', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const { history, clear, canUndo, canRedo, last } = useRefHistory(count, { flush: 'sync' });
+
+      count.value = 1;
+      count.value = 2;
+      clear();
+
+      expect(history.value).toHaveLength(1);
+      expect(last.value.snapshot).toBe(2);
+      expect(canUndo.value).toBeFalsy();
+      expect(canRedo.value).toBeFalsy();
+    });
+    scope.stop();
+  });
+
+  it('resets to the last snapshot, discarding uncommitted edits', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const { history, reset, pause } = useRefHistory(count, { flush: 'sync' });
+
+      count.value = 1;
+      pause();
+      count.value = 99; // not committed while paused
+      reset();
+
+      expect(count.value).toBe(1);
+      expect(history.value.map(r => r.snapshot)).toEqual([1, 0]);
+    });
+    scope.stop();
+  });
+
+  it('pauses and resumes tracking', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const { history, pause, resume, isTracking } = useRefHistory(count, { flush: 'sync' });
+
+      pause();
+      expect(isTracking.value).toBeFalsy();
+      count.value = 1;
+      count.value = 2;
+      expect(history.value.map(r => r.snapshot)).toEqual([0]);
+
+      resume();
+      expect(isTracking.value).toBeTruthy();
+      count.value = 3;
+      expect(history.value.map(r => r.snapshot)).toEqual([3, 0]);
+    });
+    scope.stop();
+  });
+
+  it('commits on resume when requested', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const { history, pause, resume } = useRefHistory(count, { flush: 'sync' });
+
+      pause();
+      count.value = 5;
+      resume(true);
+
+      expect(history.value.map(r => r.snapshot)).toEqual([5, 0]);
+    });
+    scope.stop();
+  });
+
+  it('batches edits into a single commit', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const { history, batch } = useRefHistory(count, { flush: 'sync' });
+
+      batch(() => {
+        count.value = 1;
+        count.value = 2;
+        count.value = 3;
+      });
+
+      expect(history.value.map(r => r.snapshot)).toEqual([3, 0]);
+    });
+    scope.stop();
+  });
+
+  it('skips the trailing commit when a batch is canceled', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const { history, batch } = useRefHistory(count, { flush: 'sync' });
+
+      batch((cancel) => {
+        count.value = 1;
+        cancel();
+      });
+
+      expect(history.value.map(r => r.snapshot)).toEqual([0]);
+    });
+    scope.stop();
+  });
+
+  it('respects capacity by dropping the oldest records', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const { history } = useRefHistory(count, { flush: 'sync', capacity: 2 });
+
+      count.value = 1;
+      count.value = 2;
+      count.value = 3;
+
+      expect(history.value).toHaveLength(2);
+      expect(history.value.map(r => r.snapshot)).toEqual([3, 2]);
+    });
+    scope.stop();
+  });
+
+  it('clones snapshots for deep tracking', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const state = ref({ n: 0 });
+      const { history, undo } = useRefHistory(state, { flush: 'sync', deep: true });
+
+      state.value.n = 1;
+      // deep watch fires on nested mutation; force a commit via assignment too
+      state.value = { n: 2 };
+
+      const first = history.value[history.value.length - 1]!.snapshot;
+      expect(first).toEqual({ n: 0 });
+
+      undo();
+      // snapshot must not be the same reference as the live value
+      expect(history.value[0]!.snapshot).not.toBe(state.value);
+    });
+    scope.stop();
+  });
+
+  it('uses custom dump/parse serializers', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const state = ref({ a: 1 });
+      const { history, undo } = useRefHistory(state, {
+        flush: 'sync',
+        dump: v => JSON.stringify(v),
+        parse: v => JSON.parse(v),
+      });
+
+      state.value = { a: 2 };
+      expect(history.value[0]!.snapshot).toBe('{"a":2}');
+
+      undo();
+      expect(state.value).toEqual({ a: 1 });
+    });
+    scope.stop();
+  });
+
+  it('honours shouldCommit to filter changes', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const { history } = useRefHistory(count, {
+        flush: 'sync',
+        shouldCommit: (_old, next) => next % 2 === 0,
+      });
+
+      count.value = 1; // odd -> skipped
+      count.value = 2; // even -> committed
+      count.value = 3; // odd -> skipped
+      count.value = 4; // even -> committed
+
+      expect(history.value.map(r => r.snapshot)).toEqual([4, 2, 0]);
+    });
+    scope.stop();
+  });
+
+  it('applies the eventFilter to tracked changes', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const passes: number[] = [];
+      // a filter that only lets through even values
+      const { history } = useRefHistory(count, {
+        flush: 'sync',
+        eventFilter: (invoke) => {
+          if (count.value % 2 === 0) {
+            passes.push(count.value);
+            invoke();
+          }
+        },
+      });
+
+      count.value = 1;
+      count.value = 2;
+      count.value = 3;
+      count.value = 4;
+
+      expect(history.value.map(r => r.snapshot)).toEqual([4, 2, 0]);
+      expect(passes).toEqual([2, 4]);
+    });
+    scope.stop();
+  });
+
+  it('stops tracking and clears history on dispose', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const { history, dispose } = useRefHistory(count, { flush: 'sync' });
+
+      count.value = 1;
+      dispose();
+      expect(history.value).toHaveLength(1);
+
+      count.value = 2;
+      expect(history.value).toHaveLength(1);
+    });
+    scope.stop();
+  });
+
+  it('records timestamps on each snapshot', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const now = vi.spyOn(Date, 'now').mockReturnValue(1234);
+      const count = ref(0);
+      const { last } = useRefHistory(count, { flush: 'sync' });
+
+      count.value = 1;
+      expect(last.value.timestamp).toBe(1234);
+      now.mockRestore();
+    });
+    scope.stop();
+  });
+
+  it('is SSR-safe: instantiates without touching window/document', () => {
+    // No DOM globals are read at construction; running under jsdom suffices to
+    // prove no top-level global access, but we also guard the no-op path.
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const api = useRefHistory(count, { flush: 'sync' });
+
+      expect(typeof api.undo).toBe('function');
+      expect(typeof api.redo).toBe('function');
+      expect(typeof api.dispose).toBe('function');
+      expect(api.history.value).toHaveLength(1);
+    });
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/state/useRefHistory/index.ts b/vue/toolkit/src/composables/state/useRefHistory/index.ts
new file mode 100644
index 0000000..7dd46d8
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useRefHistory/index.ts
@@ -0,0 +1,339 @@
+import { computed, markRaw, ref, toRaw } from 'vue';
+import type { ComputedRef, Ref } from 'vue';
+import { isFunction } from '@robonen/stdlib';
+import { watchIgnorable } from '@/composables/watch/watchIgnorable';
+import type { UseRefHistoryRecord } from '@/composables/state/useManualRefHistory';
+import type { ConfigurableFlush } from '@/types';
+import type { ConfigurableEventFilter, EventFilter } from '@/utils';
+
+export interface UseRefHistoryOptions<Raw, Serialized = Raw> extends ConfigurableEventFilter, ConfigurableFlush {
+  /**
+   * Watch for deep changes. When enabled, snapshots are cloned so nested
+   * mutations are not shared between history records.
+   *
+   * @default false
+   */
+  deep?: boolean;
+  /**
+   * Maximum number of history records to retain (oldest are dropped first).
+   * Defaults to unlimited.
+   */
+  capacity?: number;
+  /**
+   * Clone the value when taking a snapshot. Pass `true` for a structured deep
+   * clone, or supply a custom clone function. Implied by `deep`.
+   *
+   * @default false
+   */
+  clone?: boolean | ((value: Raw) => Raw);
+  /**
+   * Serialize the raw value into the snapshot stored in history.
+   *
+   * @default identity (or a clone when `clone`/`deep` is enabled)
+   */
+  dump?: (value: Raw) => Serialized;
+  /**
+   * Deserialize a stored snapshot back into the raw value.
+   *
+   * @default identity
+   */
+  parse?: (value: Serialized) => Raw;
+  /**
+   * Determine whether a tracked change should be committed to history.
+   *
+   * @param oldValue Previous raw value
+   * @param newValue New raw value
+   * @returns `true` to record the change
+   * @default () => true
+   */
+  shouldCommit?: (oldValue: Raw | undefined, newValue: Raw) => boolean;
+}
+
+export interface UseRefHistoryReturn<_Raw, Serialized> {
+  /**
+   * Bidirectional list of recorded snapshots, newest first
+   */
+  history: Ref<Array<UseRefHistoryRecord<Serialized>>>;
+  /**
+   * The most recent snapshot record
+   */
+  last: Ref<UseRefHistoryRecord<Serialized>>;
+  /**
+   * Undo history records (the redo stack), newest first
+   */
+  undoStack: Ref<Array<UseRefHistoryRecord<Serialized>>>;
+  /**
+   * Redo history records, newest first
+   */
+  redoStack: Ref<Array<UseRefHistoryRecord<Serialized>>>;
+  /**
+   * Whether change tracking is currently active
+   */
+  isTracking: Ref<boolean>;
+  /**
+   * Whether an undo operation is available
+   */
+  canUndo: ComputedRef<boolean>;
+  /**
+   * Whether a redo operation is available
+   */
+  canRedo: ComputedRef<boolean>;
+  /**
+   * Step the source back to the previous snapshot
+   */
+  undo: () => void;
+  /**
+   * Step the source forward to the next snapshot
+   */
+  redo: () => void;
+  /**
+   * Clear all recorded history (keeps the current value as the only record)
+   */
+  clear: () => void;
+  /**
+   * Manually record the current value as a new snapshot
+   */
+  commit: () => void;
+  /**
+   * Reset the source back to the most recent snapshot, discarding uncommitted changes
+   */
+  reset: () => void;
+  /**
+   * Pause change tracking
+   */
+  pause: () => void;
+  /**
+   * Resume change tracking
+   *
+   * @param commit If `true`, immediately record the current value after resuming
+   */
+  resume: (commit?: boolean) => void;
+  /**
+   * Run a function with tracking suspended, committing once on completion.
+   * Call the provided `cancel` to skip the trailing commit.
+   */
+  batch: (fn: (cancel: () => void) => void) => void;
+  /**
+   * Stop the underlying watcher and clear all history
+   */
+  dispose: () => void;
+}
+
+const fnBypass = <T>(value: T): T => value;
+
+const bypassEventFilter: EventFilter = (invoke) => {
+  invoke();
+};
+
+function defaultDump<Raw, Serialized>(clone?: boolean | ((value: Raw) => Raw)): (value: Raw) => Serialized {
+  if (!clone)
+    return fnBypass as (value: Raw) => Serialized;
+
+  const cloneFn = isFunction(clone)
+    ? clone
+    : (value: Raw): Raw => {
+        // Unwrap reactive proxies before cloning — `structuredClone` chokes on them.
+        const raw = toRaw(value);
+        return typeof structuredClone === 'function'
+          ? structuredClone(raw)
+          : JSON.parse(JSON.stringify(raw));
+      };
+
+  return cloneFn as unknown as (value: Raw) => Serialized;
+}
+
+/**
+ * @name useRefHistory
+ * @category State
+ * @description Track the change history of a ref with undo/redo, pause/resume, batching, and manual commits.
+ *
+ * @param {Ref<Raw>} source The ref whose changes are tracked
+ * @param {UseRefHistoryOptions<Raw, Serialized>} [options={}] Tracking options (`deep`, `flush`, `capacity`, `clone`, `dump`, `parse`, `eventFilter`, `shouldCommit`)
+ * @returns {UseRefHistoryReturn<Raw, Serialized>} History records plus `undo`/`redo`/`commit`/`reset`/`clear`/`pause`/`resume`/`batch`/`dispose`
+ *
+ * @example
+ * const count = ref(0);
+ * const { history, undo, redo, canUndo, canRedo } = useRefHistory(count);
+ *
+ * count.value = 1;
+ * count.value = 2;
+ * undo(); // count.value === 1
+ * redo(); // count.value === 2
+ *
+ * @example
+ * // Deep tracking with bounded capacity and a custom serializer
+ * const state = ref({ items: [] });
+ * const { history } = useRefHistory(state, { deep: true, capacity: 10 });
+ *
+ * @since 0.0.15
+ */
+export function useRefHistory<Raw, Serialized = Raw>(
+  source: Ref<Raw>,
+  options: UseRefHistoryOptions<Raw, Serialized> = {},
+): UseRefHistoryReturn<Raw, Serialized> {
+  const {
+    deep = false,
+    flush = 'pre',
+    capacity,
+    eventFilter,
+    shouldCommit = () => true,
+  } = options;
+
+  const dump = options.dump ?? defaultDump<Raw, Serialized>(options.clone || deep);
+  const parse = options.parse ?? (fnBypass as (value: Serialized) => Raw);
+
+  const createRecord = (value: Raw): UseRefHistoryRecord<Serialized> =>
+    markRaw({ snapshot: dump(value), timestamp: Date.now() });
+
+  const last = ref(createRecord(source.value)) as Ref<UseRefHistoryRecord<Serialized>>;
+
+  const undoStack = ref<Array<UseRefHistoryRecord<Serialized>>>([]) as Ref<Array<UseRefHistoryRecord<Serialized>>>;
+  const redoStack = ref<Array<UseRefHistoryRecord<Serialized>>>([]) as Ref<Array<UseRefHistoryRecord<Serialized>>>;
+
+  const history = computed<Array<UseRefHistoryRecord<Serialized>>>(() => [last.value, ...undoStack.value]);
+
+  // Compose the user filter with a pause gate. When paused, tracked changes are
+  // dropped entirely (rather than queued), matching VueUse's `pause` semantics.
+  const isTracking = ref(true);
+  const userFilter: EventFilter = eventFilter ?? bypassEventFilter;
+  const composedFilter: EventFilter = (invoke) => {
+    if (isTracking.value)
+      userFilter(invoke);
+  };
+
+  // Last raw value used for the `shouldCommit` comparison.
+  let lastRawValue: Raw | undefined = source.value;
+
+  const { ignoreUpdates, ignorePrevAsyncUpdates, stop } = watchIgnorable(
+    source,
+    () => internalCommit(),
+    { deep, flush, eventFilter: composedFilter },
+  );
+
+  function setSource(value: Raw): void {
+    // Drop any async changes queued before this programmatic write so they do
+    // not produce a spurious commit after an undo/redo/reset.
+    ignorePrevAsyncUpdates();
+    ignoreUpdates(() => {
+      source.value = value;
+      lastRawValue = value;
+    });
+  }
+
+  function applyCapacity(): void {
+    if (capacity === undefined)
+      return;
+
+    // `undoStack` holds everything except `last`, so the total kept is capacity.
+    if (undoStack.value.length + 1 > capacity)
+      undoStack.value.splice(capacity - 1, Number.POSITIVE_INFINITY);
+  }
+
+  function internalCommit(): void {
+    ignorePrevAsyncUpdates();
+
+    if (!shouldCommit(lastRawValue, source.value))
+      return;
+
+    lastRawValue = source.value;
+
+    undoStack.value.unshift(last.value);
+    last.value = createRecord(source.value);
+
+    if (redoStack.value.length)
+      redoStack.value.splice(0, redoStack.value.length);
+
+    applyCapacity();
+  }
+
+  function commit(): void {
+    internalCommit();
+  }
+
+  function undo(): void {
+    const previous = undoStack.value.shift();
+
+    if (!previous)
+      return;
+
+    redoStack.value.unshift(last.value);
+    last.value = previous;
+    setSource(parse(previous.snapshot));
+  }
+
+  function redo(): void {
+    const next = redoStack.value.shift();
+
+    if (!next)
+      return;
+
+    undoStack.value.unshift(last.value);
+    last.value = next;
+    setSource(parse(next.snapshot));
+  }
+
+  function reset(): void {
+    ignorePrevAsyncUpdates();
+
+    if (redoStack.value.length)
+      redoStack.value.splice(0, redoStack.value.length);
+
+    setSource(parse(last.value.snapshot));
+  }
+
+  function clear(): void {
+    undoStack.value.splice(0, undoStack.value.length);
+    redoStack.value.splice(0, redoStack.value.length);
+  }
+
+  function pause(): void {
+    isTracking.value = false;
+  }
+
+  function resume(commitNow?: boolean): void {
+    isTracking.value = true;
+    if (commitNow)
+      commit();
+  }
+
+  function batch(fn: (cancel: () => void) => void): void {
+    let canceled = false;
+    const cancel = (): void => {
+      canceled = true;
+    };
+
+    ignoreUpdates(() => {
+      fn(cancel);
+    });
+
+    if (!canceled)
+      commit();
+  }
+
+  function dispose(): void {
+    stop();
+    clear();
+  }
+
+  const canUndo = computed<boolean>(() => undoStack.value.length > 0);
+  const canRedo = computed<boolean>(() => redoStack.value.length > 0);
+
+  return {
+    history,
+    last,
+    undoStack,
+    redoStack,
+    isTracking: isTracking as Ref<boolean>,
+    canUndo,
+    canRedo,
+    undo,
+    redo,
+    clear,
+    commit,
+    reset,
+    pause,
+    resume,
+    batch,
+    dispose,
+  };
+}
diff --git a/vue/toolkit/src/composables/state/useStepper/demo.vue b/vue/toolkit/src/composables/state/useStepper/demo.vue
new file mode 100644
index 0000000..4dd9781
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useStepper/demo.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { useStepper } from './index';
+
+// A record-based wizard: keys are step names, values carry per-step metadata
+const {
+  index,
+  current,
+  stepNames,
+  isFirst,
+  isLast,
+  goToNext,
+  goToPrevious,
+  goTo,
+  isBefore,
+  isCurrent,
+} = useStepper({
+  account: { title: 'Account', hint: 'Pick a username and email' },
+  profile: { title: 'Profile', hint: 'Tell us about yourself' },
+  billing: { title: 'Billing', hint: 'Add a payment method' },
+  review: { title: 'Review', hint: 'Confirm and finish' },
+});
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-5">
+    <!-- Step indicator -->
+    <ol class="flex items-center justify-between">
+      <li
+        v-for="(name, i) in stepNames"
+        :key="name"
+        class="flex flex-1 items-center"
+      >
+        <button
+          type="button"
+          class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full border text-sm font-semibold transition active:scale-[0.98] cursor-pointer"
+          :class="[
+            isCurrent(name)
+              ? 'border-transparent bg-(--accent) text-(--accent-fg)'
+              : isBefore(name)
+                ? 'border-transparent bg-(--bg-elevated) text-(--fg-muted)'
+                : 'border-transparent bg-emerald-500/15 text-emerald-600 dark:text-emerald-400',
+          ]"
+          :aria-current="isCurrent(name) ? 'step' : undefined"
+          @click="goTo(name)"
+        >
+          <span v-if="!isBefore(name) && !isCurrent(name)">✓</span>
+          <span v-else>{{ i + 1 }}</span>
+        </button>
+
+        <span
+          v-if="i < stepNames.length - 1"
+          class="mx-2 h-px flex-1 transition-colors"
+          :class="isBefore(name) ? 'bg-(--border)' : 'bg-(--accent)'"
+        />
+      </li>
+    </ol>
+
+    <!-- Current step content -->
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Step {{ index + 1 }} of {{ stepNames.length }}
+      </p>
+      <h3 class="mt-1 text-lg font-semibold text-(--fg)">
+        {{ current.title }}
+      </h3>
+      <p class="mt-1 text-sm text-(--fg-muted)">
+        {{ current.hint }}
+      </p>
+    </div>
+
+    <!-- Navigation -->
+    <div class="flex items-center justify-between gap-3">
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="isFirst"
+        @click="goToPrevious"
+      >
+        ‹ Back
+      </button>
+
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="isLast"
+        @click="goToNext"
+      >
+        {{ isLast ? 'Finished' : 'Continue ›' }}
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/state/useStepper/index.test.ts b/vue/toolkit/src/composables/state/useStepper/index.test.ts
new file mode 100644
index 0000000..e27fcba
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useStepper/index.test.ts
@@ -0,0 +1,189 @@
+import { describe, expect, it } from 'vitest';
+import { effectScope, nextTick, ref } from 'vue';
+import { useStepper } from '.';
+
+describe(useStepper, () => {
+  describe('array of steps', () => {
+    it('initializes on the first step by default', () => {
+      const { index, current, stepNames } = useStepper(['first', 'second', 'last']);
+      expect(index.value).toBe(0);
+      expect(current.value).toBe('first');
+      expect(stepNames.value).toEqual(['first', 'second', 'last']);
+    });
+
+    it('initializes on the provided initial step', () => {
+      const { index, current } = useStepper(['first', 'second', 'last'], 'second');
+      expect(index.value).toBe(1);
+      expect(current.value).toBe('second');
+    });
+
+    it('exposes the original steps ref', () => {
+      const { steps } = useStepper(['first', 'second']);
+      expect(steps.value).toEqual(['first', 'second']);
+    });
+
+    it('computes next and previous step names', () => {
+      const { next, previous, goToNext } = useStepper(['first', 'second', 'last']);
+      expect(previous.value).toBeUndefined();
+      expect(next.value).toBe('second');
+      goToNext();
+      expect(previous.value).toBe('first');
+      expect(next.value).toBe('last');
+    });
+
+    it('next/previous are undefined at the boundaries', () => {
+      const { next, previous, goTo } = useStepper(['first', 'second', 'last']);
+      expect(previous.value).toBeUndefined();
+      goTo('last');
+      expect(next.value).toBeUndefined();
+    });
+
+    it('tracks isFirst and isLast', () => {
+      const { isFirst, isLast, goToNext } = useStepper(['first', 'second', 'last']);
+      expect(isFirst.value).toBeTruthy();
+      expect(isLast.value).toBeFalsy();
+      goToNext();
+      expect(isFirst.value).toBeFalsy();
+      expect(isLast.value).toBeFalsy();
+      goToNext();
+      expect(isFirst.value).toBeFalsy();
+      expect(isLast.value).toBeTruthy();
+    });
+  });
+
+  describe('navigation', () => {
+    it('goToNext advances the index but stops at the last step', () => {
+      const { index, goToNext } = useStepper(['first', 'second', 'last']);
+      goToNext();
+      expect(index.value).toBe(1);
+      goToNext();
+      expect(index.value).toBe(2);
+      goToNext();
+      expect(index.value).toBe(2);
+    });
+
+    it('goToPrevious decrements the index but stops at the first step', () => {
+      const { index, goToPrevious } = useStepper(['first', 'second', 'last'], 'last');
+      goToPrevious();
+      expect(index.value).toBe(1);
+      goToPrevious();
+      expect(index.value).toBe(0);
+      goToPrevious();
+      expect(index.value).toBe(0);
+    });
+
+    it('goTo jumps to a named step', () => {
+      const { index, current, goTo } = useStepper(['first', 'second', 'last']);
+      goTo('last');
+      expect(index.value).toBe(2);
+      expect(current.value).toBe('last');
+    });
+
+    it('goTo ignores unknown steps', () => {
+      const { index, goTo } = useStepper(['first', 'second', 'last']);
+      goTo('missing' as any);
+      expect(index.value).toBe(0);
+    });
+
+    it('goBackTo only navigates backwards', () => {
+      const { index, goBackTo, goTo } = useStepper(['first', 'second', 'last']);
+      goTo('last');
+      goBackTo('first');
+      expect(index.value).toBe(0);
+      // already before 'last', so this is a no-op
+      goBackTo('last');
+      expect(index.value).toBe(0);
+    });
+  });
+
+  describe('predicates', () => {
+    it('isCurrent / isNext / isPrevious reflect the current index', () => {
+      const { isCurrent, isNext, isPrevious, goToNext } = useStepper(['first', 'second', 'last']);
+      expect(isCurrent('first')).toBeTruthy();
+      expect(isNext('second')).toBeTruthy();
+      expect(isPrevious('second')).toBeFalsy();
+      goToNext();
+      expect(isCurrent('second')).toBeTruthy();
+      expect(isPrevious('first')).toBeTruthy();
+      expect(isNext('last')).toBeTruthy();
+    });
+
+    it('isBefore / isAfter compare against the current position', () => {
+      const { isBefore, isAfter, goTo } = useStepper(['first', 'second', 'last']);
+      goTo('second');
+      expect(isBefore('last')).toBeTruthy();
+      expect(isBefore('first')).toBeFalsy();
+      expect(isAfter('first')).toBeTruthy();
+      expect(isAfter('last')).toBeFalsy();
+    });
+  });
+
+  describe('accessors', () => {
+    it('at returns the step at an index', () => {
+      const { at } = useStepper(['first', 'second', 'last']);
+      expect(at(0)).toBe('first');
+      expect(at(2)).toBe('last');
+      expect(at(99)).toBeUndefined();
+    });
+
+    it('get returns a step by name and undefined for unknown', () => {
+      const { get } = useStepper(['first', 'second', 'last']);
+      expect(get('second')).toBe('second');
+      expect(get('missing' as any)).toBeUndefined();
+    });
+  });
+
+  describe('record of steps', () => {
+    const makeSteps = () => ({
+      account: { title: 'Account' },
+      billing: { title: 'Billing' },
+      review: { title: 'Review' },
+    });
+
+    it('derives step names from the record keys', () => {
+      const { stepNames, current } = useStepper(makeSteps());
+      expect(stepNames.value).toEqual(['account', 'billing', 'review']);
+      expect(current.value).toEqual({ title: 'Account' });
+    });
+
+    it('current resolves to the step value', () => {
+      const { current, goToNext } = useStepper(makeSteps());
+      goToNext();
+      expect(current.value).toEqual({ title: 'Billing' });
+    });
+
+    it('at and get resolve record values', () => {
+      const { at, get } = useStepper(makeSteps());
+      expect(at(1)).toEqual({ title: 'Billing' });
+      expect(get('review')).toEqual({ title: 'Review' });
+    });
+
+    it('honors the initial step', () => {
+      const { current, index } = useStepper(makeSteps(), 'review');
+      expect(index.value).toBe(2);
+      expect(current.value).toEqual({ title: 'Review' });
+    });
+  });
+
+  describe('reactivity', () => {
+    it('updates when steps come from a ref', () => {
+      const steps = ref(['first', 'second']);
+      const { stepNames, next } = useStepper(steps);
+      expect(stepNames.value).toEqual(['first', 'second']);
+      steps.value = ['first', 'second', 'third'];
+      expect(stepNames.value).toEqual(['first', 'second', 'third']);
+      expect(next.value).toBe('second');
+    });
+
+    it('current is reactive to index changes', async () => {
+      const scope = effectScope();
+      await scope.run(async () => {
+        const { current, index } = useStepper(['first', 'second', 'last']);
+        index.value = 2;
+        await nextTick();
+        expect(current.value).toBe('last');
+      });
+      scope.stop();
+    });
+  });
+});
diff --git a/vue/toolkit/src/composables/state/useStepper/index.ts b/vue/toolkit/src/composables/state/useStepper/index.ts
new file mode 100644
index 0000000..1913de2
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useStepper/index.ts
@@ -0,0 +1,154 @@
+import { computed, ref } from 'vue';
+import type { ComputedRef, MaybeRef, Ref } from 'vue';
+import { isArray } from '@robonen/stdlib';
+
+export interface UseStepperReturn<StepName, Steps, Step> {
+  /** List of steps. */
+  steps: Readonly<Ref<Steps>>;
+  /** List of step names. */
+  stepNames: Readonly<Ref<StepName[]>>;
+  /** Index of the current step. */
+  index: Ref<number>;
+  /** Current step. */
+  current: ComputedRef<Step>;
+  /** Next step name, or undefined if the current step is the last one. */
+  next: ComputedRef<StepName | undefined>;
+  /** Previous step name, or undefined if the current step is the first one. */
+  previous: ComputedRef<StepName | undefined>;
+  /** Whether the current step is the first one. */
+  isFirst: ComputedRef<boolean>;
+  /** Whether the current step is the last one. */
+  isLast: ComputedRef<boolean>;
+  /** Get the step at the specified index. */
+  at: (index: number) => Step | undefined;
+  /** Get a step by the specified name. */
+  get: (step: StepName) => Step | undefined;
+  /** Go to the specified step. */
+  goTo: (step: StepName) => void;
+  /** Go to the next step. Does nothing if the current step is the last one. */
+  goToNext: () => void;
+  /** Go to the previous step. Does nothing if the current step is the first one. */
+  goToPrevious: () => void;
+  /** Go back to the given step, only if the current step is after it. */
+  goBackTo: (step: StepName) => void;
+  /** Checks whether the given step is the next step. */
+  isNext: (step: StepName) => boolean;
+  /** Checks whether the given step is the previous step. */
+  isPrevious: (step: StepName) => boolean;
+  /** Checks whether the given step is the current step. */
+  isCurrent: (step: StepName) => boolean;
+  /** Checks if the current step is before the given step. */
+  isBefore: (step: StepName) => boolean;
+  /** Checks if the current step is after the given step. */
+  isAfter: (step: StepName) => boolean;
+}
+
+/**
+ * @name useStepper
+ * @category State
+ * @description A composable for building wizards/steppers over a list or record of steps
+ *
+ * @param {MaybeRef<T[] | Record<string, any>>} steps The list of steps, or a record keyed by step name
+ * @param {T} [initialStep] The step to start on (defaults to the first step)
+ * @returns {UseStepperReturn} The stepper state and navigation helpers
+ *
+ * @example
+ * const { current, goToNext, isLast } = useStepper(['first', 'second', 'last']);
+ *
+ * @example
+ * const { current, stepNames, goTo } = useStepper({
+ *   account: { title: 'Account' },
+ *   billing: { title: 'Billing' },
+ * });
+ *
+ * @since 0.0.15
+ */
+export function useStepper<T extends string | number>(
+  steps: MaybeRef<T[]>,
+  initialStep?: T,
+): UseStepperReturn<T, T[], T>;
+export function useStepper<T extends Record<string, any>>(
+  steps: MaybeRef<T>,
+  initialStep?: keyof T,
+): UseStepperReturn<Exclude<keyof T, symbol>, T, T[keyof T]>;
+export function useStepper(steps: any, initialStep?: any): UseStepperReturn<any, any, any> {
+  const stepsRef = ref<any>(steps);
+
+  const stepNames = computed<any[]>(() =>
+    isArray(stepsRef.value) ? stepsRef.value : Object.keys(stepsRef.value),
+  );
+
+  const index = ref(stepNames.value.indexOf(initialStep ?? stepNames.value[0]));
+
+  const at = (at: number): any => {
+    if (isArray(stepsRef.value))
+      return stepsRef.value[at];
+
+    return stepsRef.value[stepNames.value[at]];
+  };
+
+  const current = computed(() => at(index.value));
+  const isFirst = computed(() => index.value === 0);
+  const isLast = computed(() => index.value === stepNames.value.length - 1);
+  const next = computed(() => stepNames.value[index.value + 1]);
+  const previous = computed(() => stepNames.value[index.value - 1]);
+
+  const get = (step: any): any => {
+    if (!stepNames.value.includes(step))
+      return;
+
+    return at(stepNames.value.indexOf(step));
+  };
+
+  const goTo = (step: any): void => {
+    if (stepNames.value.includes(step))
+      index.value = stepNames.value.indexOf(step);
+  };
+
+  const goToNext = (): void => {
+    if (isLast.value)
+      return;
+
+    index.value++;
+  };
+
+  const goToPrevious = (): void => {
+    if (isFirst.value)
+      return;
+
+    index.value--;
+  };
+
+  const isNext = (step: any): boolean => stepNames.value.indexOf(step) === index.value + 1;
+  const isPrevious = (step: any): boolean => stepNames.value.indexOf(step) === index.value - 1;
+  const isCurrent = (step: any): boolean => stepNames.value.indexOf(step) === index.value;
+  const isBefore = (step: any): boolean => index.value < stepNames.value.indexOf(step);
+  const isAfter = (step: any): boolean => index.value > stepNames.value.indexOf(step);
+
+  const goBackTo = (step: any): void => {
+    if (isAfter(step))
+      goTo(step);
+  };
+
+  return {
+    steps: stepsRef,
+    stepNames,
+    index,
+    current,
+    next,
+    previous,
+    isFirst,
+    isLast,
+    at,
+    get,
+    goTo,
+    goToNext,
+    goToPrevious,
+    goBackTo,
+    isNext,
+    isPrevious,
+    isCurrent,
+    isBefore,
+    isAfter,
+  };
+}
diff --git a/vue/toolkit/src/composables/state/useThrottledRefHistory/demo.vue b/vue/toolkit/src/composables/state/useThrottledRefHistory/demo.vue
new file mode 100644
index 0000000..fd380a2
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useThrottledRefHistory/demo.vue
@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useThrottledRefHistory } from './index';
+
+// A continuously-mutating value (a slider) — rapid changes are collapsed
+// into at most one committed snapshot per throttle interval.
+const value = ref(50);
+const throttle = ref(600);
+
+const {
+  history,
+  canUndo,
+  canRedo,
+  undo,
+  redo,
+  clear,
+} = useThrottledRefHistory(value, { throttle });
+
+function formatTime(ts: number): string {
+  return new Date(ts).toLocaleTimeString(undefined, {
+    hour12: false,
+    minute: '2-digit',
+    second: '2-digit',
+  });
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <!-- Live value -->
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex items-baseline justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Live value
+        </span>
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ value }}</span>
+      </div>
+
+      <input
+        v-model.number="value"
+        type="range"
+        min="0"
+        max="100"
+        class="mt-3 w-full cursor-pointer accent-(--accent)"
+      >
+      <p class="mt-2 text-xs text-(--fg-subtle)">
+        Drag the slider — only one snapshot is committed per {{ throttle }}ms.
+      </p>
+    </div>
+
+    <!-- Throttle interval -->
+    <div class="flex items-center justify-between gap-3">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Throttle
+      </span>
+      <div class="flex gap-1.5">
+        <button
+          v-for="ms in [200, 600, 1500]"
+          :key="ms"
+          type="button"
+          class="inline-flex items-center justify-center rounded-lg border px-2.5 py-1 text-sm font-medium tabular-nums transition active:scale-[0.98] cursor-pointer"
+          :class="throttle === ms
+            ? 'border-transparent bg-(--accent) text-(--accent-fg)'
+            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+          @click="throttle = ms"
+        >
+          {{ ms }}ms
+        </button>
+      </div>
+    </div>
+
+    <!-- Controls -->
+    <div class="flex items-center gap-2">
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="!canUndo"
+        @click="undo"
+      >
+        ↶ Undo
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="!canRedo"
+        @click="redo"
+      >
+        ↷ Redo
+      </button>
+      <button
+        type="button"
+        class="ml-auto inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="clear"
+      >
+        Clear
+      </button>
+    </div>
+
+    <!-- Committed snapshots -->
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-2">
+      <ul class="flex max-h-40 flex-col gap-1 overflow-y-auto">
+        <li
+          v-for="(record, i) in history"
+          :key="record.timestamp + '-' + i"
+          class="flex items-center gap-3 rounded-lg px-2 py-1.5 text-sm"
+          :class="i === 0 ? 'bg-(--accent-subtle)' : ''"
+        >
+          <span class="font-mono text-xs text-(--fg-subtle) tabular-nums">
+            {{ formatTime(record.timestamp) }}
+          </span>
+          <span
+            class="flex-1 font-mono tabular-nums"
+            :class="i === 0 ? 'font-medium text-(--accent-text)' : 'text-(--fg-muted)'"
+          >
+            {{ record.snapshot }}
+          </span>
+          <span v-if="i === 0" class="text-xs font-medium text-(--accent-text)">latest</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/state/useThrottledRefHistory/index.test.ts b/vue/toolkit/src/composables/state/useThrottledRefHistory/index.test.ts
new file mode 100644
index 0000000..5b98432
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useThrottledRefHistory/index.test.ts
@@ -0,0 +1,243 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, ref } from 'vue';
+import { useThrottledRefHistory } from '.';
+
+describe(useThrottledRefHistory, () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.useRealTimers();
+  });
+
+  it('seeds history with the initial value', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const { history, last, canUndo, canRedo } = useThrottledRefHistory(count, { flush: 'sync' });
+
+      expect(history.value).toHaveLength(1);
+      expect(history.value[0]!.snapshot).toBe(0);
+      expect(last.value.snapshot).toBe(0);
+      expect(canUndo.value).toBeFalsy();
+      expect(canRedo.value).toBeFalsy();
+    });
+    scope.stop();
+  });
+
+  it('commits the leading change immediately', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const { history } = useThrottledRefHistory(count, { throttle: 1000, flush: 'sync' });
+
+      count.value = 1;
+
+      // Leading edge: the first change records right away.
+      expect(history.value.map(r => r.snapshot)).toEqual([1, 0]);
+    });
+    scope.stop();
+  });
+
+  it('coalesces rapid changes within the throttle window into a trailing commit', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const { history } = useThrottledRefHistory(count, { throttle: 1000, flush: 'sync' });
+
+      count.value = 1; // leading commit
+      count.value = 2; // within window — coalesced
+      count.value = 3; // within window — coalesced
+
+      // Only the leading snapshot is present so far.
+      expect(history.value.map(r => r.snapshot)).toEqual([1, 0]);
+
+      // Trailing edge fires after the window elapses with the latest value.
+      vi.advanceTimersByTime(1000);
+
+      expect(history.value.map(r => r.snapshot)).toEqual([3, 1, 0]);
+    });
+    scope.stop();
+  });
+
+  it('records again after the window resets', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const { history } = useThrottledRefHistory(count, { throttle: 500, flush: 'sync' });
+
+      count.value = 1; // leading
+      vi.advanceTimersByTime(500);
+
+      count.value = 2; // new window — leading again
+      vi.advanceTimersByTime(500);
+
+      expect(history.value.map(r => r.snapshot)).toEqual([2, 1, 0]);
+    });
+    scope.stop();
+  });
+
+  it('skips the trailing commit when trailing is false', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const { history } = useThrottledRefHistory(count, { throttle: 1000, trailing: false, flush: 'sync' });
+
+      count.value = 1; // leading commit
+      count.value = 2; // dropped (no trailing)
+      count.value = 3; // dropped (no trailing)
+
+      vi.advanceTimersByTime(1000);
+
+      expect(history.value.map(r => r.snapshot)).toEqual([1, 0]);
+    });
+    scope.stop();
+  });
+
+  it('skips the leading commit when leading is false', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const { history } = useThrottledRefHistory(count, { throttle: 1000, leading: false, flush: 'sync' });
+
+      count.value = 1; // no leading commit
+      count.value = 2;
+
+      expect(history.value.map(r => r.snapshot)).toEqual([0]);
+
+      vi.advanceTimersByTime(1000);
+
+      // Only the trailing snapshot is recorded.
+      expect(history.value.map(r => r.snapshot)).toEqual([2, 0]);
+    });
+    scope.stop();
+  });
+
+  it('supports a reactive throttle interval', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const throttle = ref(1000);
+      const { history } = useThrottledRefHistory(count, { throttle, flush: 'sync' });
+
+      count.value = 1; // leading
+      count.value = 2; // coalesced
+
+      vi.advanceTimersByTime(1000);
+      expect(history.value.map(r => r.snapshot)).toEqual([2, 1, 0]);
+
+      // Shrink the window: a shorter advance now flushes the trailing commit.
+      throttle.value = 100;
+      count.value = 3; // within the (now 100ms) window — schedules trailing
+      count.value = 4; // coalesced into the same trailing commit
+
+      vi.advanceTimersByTime(100);
+      expect(history.value.map(r => r.snapshot)).toEqual([4, 2, 1, 0]);
+    });
+    scope.stop();
+  });
+
+  it('defaults to a 200ms throttle window', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const { history } = useThrottledRefHistory(count, { flush: 'sync' });
+
+      count.value = 1; // leading
+      count.value = 2; // coalesced
+
+      vi.advanceTimersByTime(199);
+      expect(history.value.map(r => r.snapshot)).toEqual([1, 0]);
+
+      vi.advanceTimersByTime(1);
+      expect(history.value.map(r => r.snapshot)).toEqual([2, 1, 0]);
+    });
+    scope.stop();
+  });
+
+  it('exposes the full useRefHistory API (undo/redo)', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const { undo, redo, canUndo, canRedo } = useThrottledRefHistory(count, { throttle: 100, flush: 'sync' });
+
+      count.value = 1;
+      vi.advanceTimersByTime(100);
+      count.value = 2;
+      vi.advanceTimersByTime(100);
+
+      expect(canUndo.value).toBeTruthy();
+      expect(canRedo.value).toBeFalsy();
+
+      undo();
+      expect(count.value).toBe(1);
+      expect(canRedo.value).toBeTruthy();
+
+      redo();
+      expect(count.value).toBe(2);
+    });
+    scope.stop();
+  });
+
+  it('honors capacity together with throttling', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const { history } = useThrottledRefHistory(count, { throttle: 100, capacity: 2, flush: 'sync' });
+
+      count.value = 1;
+      vi.advanceTimersByTime(100);
+      count.value = 2;
+      vi.advanceTimersByTime(100);
+      count.value = 3;
+      vi.advanceTimersByTime(100);
+
+      expect(history.value).toHaveLength(2);
+      expect(history.value.map(r => r.snapshot)).toEqual([3, 2]);
+    });
+    scope.stop();
+  });
+
+  it('stops recording after dispose', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const { history, dispose } = useThrottledRefHistory(count, { throttle: 100, flush: 'sync' });
+
+      count.value = 1;
+      vi.advanceTimersByTime(100);
+      dispose();
+
+      count.value = 2;
+      vi.advanceTimersByTime(100);
+
+      // After dispose history is cleared and no further commits land.
+      expect(history.value.map(r => r.snapshot)).toEqual([1]);
+    });
+    scope.stop();
+  });
+
+  it('works without any DOM globals (SSR-safe)', () => {
+    // The composable is pure composition over refs/timers — it must never touch
+    // window/document/navigator. Run it with those globals stubbed undefined.
+    vi.stubGlobal('window', undefined);
+    vi.stubGlobal('document', undefined);
+    vi.stubGlobal('navigator', undefined);
+
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const { history } = useThrottledRefHistory(count, { throttle: 100, flush: 'sync' });
+
+      count.value = 1;
+      vi.advanceTimersByTime(100);
+
+      expect(history.value.map(r => r.snapshot)).toEqual([1, 0]);
+    });
+    scope.stop();
+
+    vi.unstubAllGlobals();
+  });
+});
diff --git a/vue/toolkit/src/composables/state/useThrottledRefHistory/index.ts b/vue/toolkit/src/composables/state/useThrottledRefHistory/index.ts
new file mode 100644
index 0000000..9c53e08
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useThrottledRefHistory/index.ts
@@ -0,0 +1,67 @@
+import type { MaybeRefOrGetter, Ref } from 'vue';
+import { useRefHistory } from '@/composables/state/useRefHistory';
+import type { UseRefHistoryOptions, UseRefHistoryReturn } from '@/composables/state/useRefHistory';
+import { throttleFilter } from '@/utils';
+
+export type UseThrottledRefHistoryOptions<Raw, Serialized = Raw>
+  = Omit<UseRefHistoryOptions<Raw, Serialized>, 'eventFilter'> & {
+    /**
+     * Throttle interval in milliseconds between committed snapshots.
+     * Can be reactive — changes apply to subsequent commits.
+     *
+     * @default 200
+     */
+    throttle?: MaybeRefOrGetter<number>;
+    /**
+     * Commit a trailing snapshot after the throttle window elapses so the final
+     * value of a burst is always recorded.
+     *
+     * @default true
+     */
+    trailing?: boolean;
+    /**
+     * Commit a leading snapshot at the start of a throttle window.
+     *
+     * @default true
+     */
+    leading?: boolean;
+  };
+
+export type UseThrottledRefHistoryReturn<Raw, Serialized = Raw>
+  = UseRefHistoryReturn<Raw, Serialized>;
+
+/**
+ * @name useThrottledRefHistory
+ * @category State
+ * @description Shorthand for {@link useRefHistory} with a throttled event filter, so rapid source changes are committed at most once per interval (trailing edge by default).
+ *
+ * @param {Ref<Raw>} source The ref whose changes are tracked
+ * @param {UseThrottledRefHistoryOptions<Raw, Serialized>} [options={}] Tracking options — all of {@link useRefHistory}'s except `eventFilter`, plus `throttle`, `trailing`, and `leading`
+ * @returns {UseThrottledRefHistoryReturn<Raw, Serialized>} History records plus `undo`/`redo`/`commit`/`reset`/`clear`/`pause`/`resume`/`batch`/`dispose`
+ *
+ * @example
+ * const count = ref(0);
+ * const { history, undo, redo } = useThrottledRefHistory(count, { throttle: 1000 });
+ *
+ * count.value = 1;
+ * count.value = 2;
+ * count.value = 3; // collapsed into a single throttled commit
+ *
+ * @example
+ * // Reactive interval and deep tracking
+ * const ms = ref(500);
+ * const state = ref({ items: [] });
+ * const { history } = useThrottledRefHistory(state, { throttle: ms, deep: true });
+ *
+ * @since 0.0.15
+ */
+export function useThrottledRefHistory<Raw, Serialized = Raw>(
+  source: Ref<Raw>,
+  options: UseThrottledRefHistoryOptions<Raw, Serialized> = {},
+): UseThrottledRefHistoryReturn<Raw, Serialized> {
+  const { throttle = 200, trailing = true, leading = true } = options;
+
+  const eventFilter = throttleFilter(throttle, trailing, leading);
+
+  return useRefHistory(source, { ...options, eventFilter });
+}
diff --git a/vue/toolkit/src/composables/state/useToggle/demo.vue b/vue/toolkit/src/composables/state/useToggle/demo.vue
new file mode 100644
index 0000000..0f8772b
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useToggle/demo.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { useToggle } from './index';
+
+// Basic boolean toggle
+const { value: isOn, toggle } = useToggle(false);
+
+// Custom truthy/falsy values — drives a theme label
+const { value: theme, toggle: toggleTheme } = useToggle('light', {
+  truthyValue: 'dark',
+  falsyValue: 'light',
+});
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <!-- Boolean toggle -->
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Boolean toggle
+      </p>
+
+      <div class="mt-3 flex items-center justify-between gap-3">
+        <span class="text-sm text-(--fg-muted)">Notifications</span>
+
+        <button
+          type="button"
+          role="switch"
+          :aria-checked="isOn"
+          class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border border-(--border) transition focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          :class="isOn ? 'bg-(--accent)' : 'bg-(--bg-inset)'"
+          @click="toggle()"
+        >
+          <span
+            class="inline-block h-4 w-4 transform rounded-full bg-(--bg-elevated) shadow transition"
+            :class="isOn ? 'translate-x-6' : 'translate-x-1'"
+          />
+        </button>
+      </div>
+
+      <div class="mt-3 rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm tabular-nums">
+        <span class="text-(--fg-subtle)">value: </span>
+        <span :class="isOn ? 'text-emerald-600 dark:text-emerald-400' : 'text-(--fg-muted)'">
+          {{ isOn }}
+        </span>
+      </div>
+    </div>
+
+    <!-- Custom truthy/falsy values -->
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Custom values
+      </p>
+
+      <div class="mt-3 flex items-center justify-between gap-3">
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+          {{ theme === 'dark' ? '☽' : '☀' }} {{ theme }}
+        </span>
+
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="toggleTheme()"
+        >
+          Toggle theme
+        </button>
+      </div>
+
+      <div class="mt-3 flex gap-2">
+        <button
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          :disabled="theme === 'light'"
+          @click="toggleTheme('light')"
+        >
+          Set light
+        </button>
+        <button
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          :disabled="theme === 'dark'"
+          @click="toggleTheme('dark')"
+        >
+          Set dark
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/web/vue/src/composables/state/useToggle/index.test.ts b/vue/toolkit/src/composables/state/useToggle/index.test.ts
similarity index 98%
rename from web/vue/src/composables/state/useToggle/index.test.ts
rename to vue/toolkit/src/composables/state/useToggle/index.test.ts
index bd0df23..cd4570b 100644
--- a/web/vue/src/composables/state/useToggle/index.test.ts
+++ b/vue/toolkit/src/composables/state/useToggle/index.test.ts
@@ -1,4 +1,4 @@
-import { it, expect, describe } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { ref } from 'vue';
 import { useToggle } from '.';
 
diff --git a/vue/toolkit/src/composables/state/useToggle/index.ts b/vue/toolkit/src/composables/state/useToggle/index.ts
new file mode 100644
index 0000000..b515a35
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useToggle/index.ts
@@ -0,0 +1,57 @@
+import { ref, toValue } from 'vue';
+import type { MaybeRef, MaybeRefOrGetter, Ref } from 'vue';
+
+export interface UseToggleOptions<Truthy, Falsy> {
+  truthyValue?: MaybeRefOrGetter<Truthy>;
+  falsyValue?: MaybeRefOrGetter<Falsy>;
+}
+
+export interface UseToggleReturn<Truthy, Falsy> {
+  value: Ref<Truthy | Falsy>;
+  toggle: (value?: Truthy | Falsy) => Truthy | Falsy;
+}
+
+/**
+ * @name useToggle
+ * @category State
+ * @description A composable that provides a boolean toggle with customizable truthy/falsy values
+ *
+ * @param {MaybeRef<Truthy | Falsy>} [initialValue=false] The initial value
+ * @param {UseToggleOptions<Truthy, Falsy>} [options={}] Options for custom truthy/falsy values
+ * @returns {UseToggleReturn<Truthy, Falsy>} The toggle state and function
+ *
+ * @example
+ * const { value, toggle } = useToggle();
+ *
+ * @example
+ * const { value, toggle } = useToggle(false, { truthyValue: 'on', falsyValue: 'off' });
+ *
+ * @since 0.0.1
+ */
+export function useToggle<Truthy = true, Falsy = false>(
+  initialValue: MaybeRef<Truthy | Falsy> = false as Truthy | Falsy,
+  options: UseToggleOptions<Truthy, Falsy> = {},
+): UseToggleReturn<Truthy, Falsy> {
+  const {
+    truthyValue = true as Truthy,
+    falsyValue = false as Falsy,
+  } = options;
+
+  const value = ref(initialValue) as Ref<Truthy | Falsy>;
+
+  const toggle = (newValue?: Truthy | Falsy) => {
+    if (newValue !== undefined) {
+      value.value = newValue;
+      return value.value;
+    }
+
+    const truthy = toValue(truthyValue);
+    const falsy = toValue(falsyValue);
+
+    value.value = value.value === truthy ? falsy : truthy;
+
+    return value.value;
+  };
+
+  return { value, toggle };
+}
diff --git a/web/vue/src/composables/storage/index.ts b/vue/toolkit/src/composables/storage/index.ts
similarity index 100%
rename from web/vue/src/composables/storage/index.ts
rename to vue/toolkit/src/composables/storage/index.ts
diff --git a/vue/toolkit/src/composables/storage/useLocalStorage/demo.vue b/vue/toolkit/src/composables/storage/useLocalStorage/demo.vue
new file mode 100644
index 0000000..334fb43
--- /dev/null
+++ b/vue/toolkit/src/composables/storage/useLocalStorage/demo.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useLocalStorage } from './index';
+
+// Persists across reloads and syncs across tabs via the `storage` event.
+const username = useLocalStorage('demo:username', 'ada-lovelace');
+const fontSize = useLocalStorage('demo:font-size', 16);
+const darkMode = useLocalStorage('demo:dark-mode', false);
+
+// Object value — serialized as JSON automatically.
+const profile = useLocalStorage('demo:profile', {
+  role: 'Engineer',
+  team: 'Platform',
+});
+
+const persistedJson = computed(() =>
+  JSON.stringify(
+    { username: username.value, fontSize: fontSize.value, darkMode: darkMode.value, profile: profile.value },
+    null,
+    2,
+  ),
+);
+
+function reset() {
+  // Assigning null removes the key; the ref falls back to its default on next read.
+  username.value = null as never;
+  fontSize.value = 16;
+  darkMode.value = false;
+  profile.value = { role: 'Engineer', team: 'Platform' };
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Persisted settings</span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        localStorage
+      </span>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <label class="flex flex-col gap-1.5">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Username</span>
+        <input
+          v-model="username"
+          type="text"
+          placeholder="your handle"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+      </label>
+
+      <label class="flex flex-col gap-1.5">
+        <div class="flex items-center justify-between">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Font size</span>
+          <span class="font-mono text-sm tabular-nums text-(--fg-muted)">{{ fontSize }}px</span>
+        </div>
+        <input
+          v-model.number="fontSize"
+          type="range"
+          min="12"
+          max="28"
+          step="1"
+          class="w-full accent-(--accent)"
+        >
+      </label>
+
+      <button
+        type="button"
+        :aria-pressed="darkMode"
+        class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2 text-sm font-medium text-(--fg) transition hover:border-(--border-strong) cursor-pointer"
+        @click="darkMode = !darkMode"
+      >
+        <span>Dark mode</span>
+        <span
+          class="relative h-5 w-9 rounded-full transition"
+          :class="darkMode ? 'bg-(--accent)' : 'bg-(--border-strong)'"
+        >
+          <span
+            class="absolute top-0.5 h-4 w-4 rounded-full bg-white transition-all"
+            :class="darkMode ? 'left-4' : 'left-0.5'"
+          />
+        </span>
+      </button>
+    </div>
+
+    <pre
+      class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs leading-relaxed text-(--fg) overflow-auto"
+      :style="{ fontSize: `${fontSize}px` }"
+    >{{ persistedJson }}</pre>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Edit anything, then reload the page or open a second tab — values stay in sync.
+    </p>
+
+    <button
+      type="button"
+      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+      @click="reset"
+    >
+      Reset to defaults
+    </button>
+  </div>
+</template>
diff --git a/web/vue/src/composables/storage/useLocalStorage/index.test.ts b/vue/toolkit/src/composables/storage/useLocalStorage/index.test.ts
similarity index 92%
rename from web/vue/src/composables/storage/useLocalStorage/index.test.ts
rename to vue/toolkit/src/composables/storage/useLocalStorage/index.test.ts
index 60ce4d0..151fdbb 100644
--- a/web/vue/src/composables/storage/useLocalStorage/index.test.ts
+++ b/vue/toolkit/src/composables/storage/useLocalStorage/index.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect, beforeEach } from 'vitest';
+import { beforeEach, describe, expect, it } from 'vitest';
 import { nextTick } from 'vue';
 import { useLocalStorage } from '.';
 
@@ -45,7 +45,7 @@ describe(useLocalStorage, () => {
     localStorage.setItem('ls-existing', '"stored"');
 
     const state = useLocalStorage('ls-existing', 'default', {
-      serializer: { read: (v) => JSON.parse(v), write: (v) => JSON.stringify(v) },
+      serializer: { read: v => JSON.parse(v), write: v => JSON.stringify(v) },
     });
 
     expect(state.value).toBe('stored');
diff --git a/vue/toolkit/src/composables/storage/useLocalStorage/index.ts b/vue/toolkit/src/composables/storage/useLocalStorage/index.ts
new file mode 100644
index 0000000..19e79e1
--- /dev/null
+++ b/vue/toolkit/src/composables/storage/useLocalStorage/index.ts
@@ -0,0 +1,45 @@
+import { ref, shallowRef, toValue } from 'vue';
+import type { MaybeRefOrGetter } from 'vue';
+import type { RemovableRef } from '@/types';
+import { defaultWindow } from '@/types';
+import { useStorage } from '../useStorage';
+import type { UseStorageOptions } from '../useStorage';
+
+/**
+ * @name useLocalStorage
+ * @category Storage
+ * @description Reactive localStorage binding — creates a ref synced with `window.localStorage`
+ *
+ * @param {MaybeRefOrGetter<string>} key The storage key (can be reactive)
+ * @param {MaybeRefOrGetter<T>} initialValue The initial/default value
+ * @param {UseStorageOptions<T>} [options={}] Options
+ * @returns {RemovableRef<T>} A reactive ref synced with localStorage
+ *
+ * @example
+ * const count = useLocalStorage('my-count', 0);
+ *
+ * @example
+ * const state = useLocalStorage('my-state', { hello: 'world' });
+ *
+ * @since 0.0.12
+ */
+export function useLocalStorage<T extends string>(key: MaybeRefOrGetter<string>, initialValue: MaybeRefOrGetter<T>, options?: UseStorageOptions<T>): RemovableRef<T>;
+export function useLocalStorage<T extends number>(key: MaybeRefOrGetter<string>, initialValue: MaybeRefOrGetter<T>, options?: UseStorageOptions<T>): RemovableRef<T>;
+export function useLocalStorage<T extends boolean>(key: MaybeRefOrGetter<string>, initialValue: MaybeRefOrGetter<T>, options?: UseStorageOptions<T>): RemovableRef<T>;
+export function useLocalStorage<T>(key: MaybeRefOrGetter<string>, initialValue: MaybeRefOrGetter<T>, options?: UseStorageOptions<T>): RemovableRef<T>;
+export function useLocalStorage<T = unknown>(key: MaybeRefOrGetter<string>, initialValue: MaybeRefOrGetter<null>, options?: UseStorageOptions<T>): RemovableRef<T>;
+export function useLocalStorage<T>(
+  key: MaybeRefOrGetter<string>,
+  initialValue: MaybeRefOrGetter<T>,
+  options: UseStorageOptions<T> = {},
+): RemovableRef<T> {
+  const window = options.window ?? defaultWindow;
+  const storage = window?.localStorage;
+
+  if (!storage) {
+    // SSR / non-browser environment: return an in-memory ref
+    return (options.shallow !== false ? shallowRef : ref)(toValue(initialValue)) as RemovableRef<T>;
+  }
+
+  return useStorage(key, initialValue, storage, { ...options, window });
+}
diff --git a/vue/toolkit/src/composables/storage/useSessionStorage/demo.vue b/vue/toolkit/src/composables/storage/useSessionStorage/demo.vue
new file mode 100644
index 0000000..186c5f7
--- /dev/null
+++ b/vue/toolkit/src/composables/storage/useSessionStorage/demo.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useSessionStorage } from './index';
+
+// sessionStorage survives reloads but is cleared when the tab closes —
+// perfect for a multi-step draft that should not leak between sessions.
+const step = useSessionStorage('demo:wizard-step', 1);
+
+const draft = useSessionStorage('demo:wizard-draft', {
+  name: '',
+  email: '',
+  newsletter: true,
+});
+
+const totalSteps = 3;
+
+const progress = computed(() => Math.round((step.value / totalSteps) * 100));
+
+function next() {
+  if (step.value < totalSteps)
+    step.value++;
+}
+
+function prev() {
+  if (step.value > 1)
+    step.value--;
+}
+
+function clearDraft() {
+  step.value = 1;
+  draft.value = { name: '', email: '', newsletter: true };
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Step {{ step }} of {{ totalSteps }}
+      </span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        sessionStorage
+      </span>
+    </div>
+
+    <div class="h-1.5 w-full overflow-hidden rounded-full bg-(--bg-inset)">
+      <div
+        class="h-full rounded-full bg-(--accent) transition-all duration-300"
+        :style="{ width: `${progress}%` }"
+      />
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <template v-if="step === 1">
+        <label class="flex flex-col gap-1.5">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Full name</span>
+          <input
+            v-model="draft.name"
+            type="text"
+            placeholder="Grace Hopper"
+            class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          >
+        </label>
+      </template>
+
+      <template v-else-if="step === 2">
+        <label class="flex flex-col gap-1.5">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Email</span>
+          <input
+            v-model="draft.email"
+            type="email"
+            placeholder="grace@navy.mil"
+            class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          >
+        </label>
+      </template>
+
+      <template v-else>
+        <label class="flex items-center justify-between gap-3 cursor-pointer">
+          <span class="text-sm text-(--fg)">Subscribe to the newsletter</span>
+          <input v-model="draft.newsletter" type="checkbox" class="h-4 w-4 accent-(--accent)">
+        </label>
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-sm text-(--fg-muted)">
+          <p><span class="text-(--fg-subtle)">Name:</span> {{ draft.name || '—' }}</p>
+          <p><span class="text-(--fg-subtle)">Email:</span> {{ draft.email || '—' }}</p>
+        </div>
+      </template>
+    </div>
+
+    <div class="flex items-center gap-2">
+      <button
+        type="button"
+        :disabled="step === 1"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="prev"
+      >
+        Back
+      </button>
+      <button
+        type="button"
+        :disabled="step === totalSteps"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="next"
+      >
+        Continue
+      </button>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Reload the page — your step and draft are restored. Closing the tab clears them.
+    </p>
+
+    <button
+      type="button"
+      class="self-start text-xs font-medium text-(--fg-muted) underline-offset-2 hover:underline cursor-pointer"
+      @click="clearDraft"
+    >
+      Discard draft
+    </button>
+  </div>
+</template>
diff --git a/web/vue/src/composables/storage/useSessionStorage/index.test.ts b/vue/toolkit/src/composables/storage/useSessionStorage/index.test.ts
similarity index 93%
rename from web/vue/src/composables/storage/useSessionStorage/index.test.ts
rename to vue/toolkit/src/composables/storage/useSessionStorage/index.test.ts
index 345c69b..8722b1d 100644
--- a/web/vue/src/composables/storage/useSessionStorage/index.test.ts
+++ b/vue/toolkit/src/composables/storage/useSessionStorage/index.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect, beforeEach } from 'vitest';
+import { beforeEach, describe, expect, it } from 'vitest';
 import { nextTick } from 'vue';
 import { useSessionStorage } from '.';
 
@@ -45,7 +45,7 @@ describe(useSessionStorage, () => {
     sessionStorage.setItem('ss-existing', '"stored"');
 
     const state = useSessionStorage('ss-existing', 'default', {
-      serializer: { read: (v) => JSON.parse(v), write: (v) => JSON.stringify(v) },
+      serializer: { read: v => JSON.parse(v), write: v => JSON.stringify(v) },
     });
 
     expect(state.value).toBe('stored');
diff --git a/vue/toolkit/src/composables/storage/useSessionStorage/index.ts b/vue/toolkit/src/composables/storage/useSessionStorage/index.ts
new file mode 100644
index 0000000..39ff21c
--- /dev/null
+++ b/vue/toolkit/src/composables/storage/useSessionStorage/index.ts
@@ -0,0 +1,45 @@
+import { ref, shallowRef, toValue } from 'vue';
+import type { MaybeRefOrGetter } from 'vue';
+import type { RemovableRef } from '@/types';
+import { defaultWindow } from '@/types';
+import { useStorage } from '../useStorage';
+import type { UseStorageOptions } from '../useStorage';
+
+/**
+ * @name useSessionStorage
+ * @category Storage
+ * @description Reactive sessionStorage binding — creates a ref synced with `window.sessionStorage`
+ *
+ * @param {MaybeRefOrGetter<string>} key The storage key (can be reactive)
+ * @param {MaybeRefOrGetter<T>} initialValue The initial/default value
+ * @param {UseStorageOptions<T>} [options={}] Options
+ * @returns {RemovableRef<T>} A reactive ref synced with sessionStorage
+ *
+ * @example
+ * const count = useSessionStorage('my-count', 0);
+ *
+ * @example
+ * const state = useSessionStorage('my-state', { hello: 'world' });
+ *
+ * @since 0.0.12
+ */
+export function useSessionStorage<T extends string>(key: MaybeRefOrGetter<string>, initialValue: MaybeRefOrGetter<T>, options?: UseStorageOptions<T>): RemovableRef<T>;
+export function useSessionStorage<T extends number>(key: MaybeRefOrGetter<string>, initialValue: MaybeRefOrGetter<T>, options?: UseStorageOptions<T>): RemovableRef<T>;
+export function useSessionStorage<T extends boolean>(key: MaybeRefOrGetter<string>, initialValue: MaybeRefOrGetter<T>, options?: UseStorageOptions<T>): RemovableRef<T>;
+export function useSessionStorage<T>(key: MaybeRefOrGetter<string>, initialValue: MaybeRefOrGetter<T>, options?: UseStorageOptions<T>): RemovableRef<T>;
+export function useSessionStorage<T = unknown>(key: MaybeRefOrGetter<string>, initialValue: MaybeRefOrGetter<null>, options?: UseStorageOptions<T>): RemovableRef<T>;
+export function useSessionStorage<T>(
+  key: MaybeRefOrGetter<string>,
+  initialValue: MaybeRefOrGetter<T>,
+  options: UseStorageOptions<T> = {},
+): RemovableRef<T> {
+  const window = options.window ?? defaultWindow;
+  const storage = window?.sessionStorage;
+
+  if (!storage) {
+    // SSR / non-browser environment: return an in-memory ref
+    return (options.shallow !== false ? shallowRef : ref)(toValue(initialValue)) as RemovableRef<T>;
+  }
+
+  return useStorage(key, initialValue, storage, { ...options, window });
+}
diff --git a/vue/toolkit/src/composables/storage/useStorage/demo.vue b/vue/toolkit/src/composables/storage/useStorage/demo.vue
new file mode 100644
index 0000000..135f4b2
--- /dev/null
+++ b/vue/toolkit/src/composables/storage/useStorage/demo.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { computed, reactive } from 'vue';
+import { useStorage } from './index';
+import type { StorageLike } from './index';
+
+// useStorage is backend-agnostic: pass any object implementing StorageLike.
+// Here we use a transparent in-memory backend so the demo is fully SSR-safe
+// and we can show exactly what gets written to the store.
+const raw = reactive<Record<string, string>>({});
+
+const memoryStorage: StorageLike = {
+  getItem: (key) => (key in raw ? raw[key] : null),
+  setItem: (key, value) => { raw[key] = value; },
+  removeItem: (key) => { delete raw[key]; },
+};
+
+// A Set value — useStorage guesses the Set serializer automatically.
+const tags = useStorage('demo:tags', new Set(['vue', 'reactive']), memoryStorage);
+
+// A custom serializer: store a number as a zero-padded string.
+const ticket = useStorage('demo:ticket', 1, memoryStorage, {
+  serializer: {
+    read: (v) => Number.parseInt(v, 10),
+    write: (v) => String(v).padStart(5, '0'),
+  },
+});
+
+const newTag = reactive({ value: '' });
+
+const tagList = computed(() => [...tags.value]);
+const storeEntries = computed(() => Object.entries(raw));
+
+function addTag() {
+  const t = newTag.value.trim().toLowerCase();
+  if (!t)
+    return;
+  // Reassign so the shallowRef watcher fires and writes to storage.
+  tags.value = new Set([...tags.value, t]);
+  newTag.value = '';
+}
+
+function removeTag(tag: string) {
+  const next = new Set(tags.value);
+  next.delete(tag);
+  tags.value = next;
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Custom storage backend</span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        in-memory
+      </span>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Tags (Set)</span>
+
+      <div class="flex flex-wrap gap-1.5 min-h-7">
+        <span
+          v-for="tag in tagList"
+          :key="tag"
+          class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+        >
+          {{ tag }}
+          <button
+            type="button"
+            class="text-(--fg-subtle) transition hover:text-(--fg) cursor-pointer"
+            :aria-label="`Remove ${tag}`"
+            @click="removeTag(tag)"
+          >
+            &times;
+          </button>
+        </span>
+        <span v-if="tagList.length === 0" class="text-xs text-(--fg-subtle)">No tags yet</span>
+      </div>
+
+      <form class="flex items-center gap-2" @submit.prevent="addTag">
+        <input
+          v-model="newTag.value"
+          type="text"
+          placeholder="add a tag…"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+        <button
+          type="submit"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        >
+          Add
+        </button>
+      </form>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex items-center justify-between">
+      <div class="flex flex-col gap-0.5">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Ticket #</span>
+        <span class="text-xs text-(--fg-subtle)">zero-padded serializer</span>
+      </div>
+      <div class="flex items-center gap-3">
+        <button
+          type="button"
+          class="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-(--border) bg-(--bg-inset) text-(--fg) transition hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="ticket = Math.max(0, ticket - 1)"
+        >
+          &minus;
+        </button>
+        <span class="font-mono text-2xl font-bold tabular-nums text-(--fg)">{{ ticket }}</span>
+        <button
+          type="button"
+          class="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-(--border) bg-(--bg-inset) text-(--fg) transition hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="ticket = ticket + 1"
+        >
+          +
+        </button>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-1.5">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Raw store contents</span>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs text-(--fg) flex flex-col gap-1">
+        <div v-for="[key, value] in storeEntries" :key="key" class="flex gap-2">
+          <span class="text-(--fg-subtle) shrink-0">{{ key }}</span>
+          <span class="truncate">{{ value }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/web/vue/src/composables/storage/useStorage/index.test.ts b/vue/toolkit/src/composables/storage/useStorage/index.test.ts
similarity index 62%
rename from web/vue/src/composables/storage/useStorage/index.test.ts
rename to vue/toolkit/src/composables/storage/useStorage/index.test.ts
index 2d68a93..5d996bc 100644
--- a/web/vue/src/composables/storage/useStorage/index.test.ts
+++ b/vue/toolkit/src/composables/storage/useStorage/index.test.ts
@@ -1,7 +1,7 @@
-import { describe, it, expect, vi } from 'vitest';
-import { nextTick } from 'vue';
-import { useStorage, StorageSerializers } from '.';
-import type { StorageLike } from '.';
+import { describe, expect, it, vi } from 'vitest';
+import { nextTick, ref } from 'vue';
+import { StorageSerializers, customStorageEventName, useStorage } from '.';
+import type { StorageEventLike, StorageLike } from '.';
 
 function createMockStorage(): StorageLike & { store: Map<string, string> } {
   const store = new Map<string, string>();
@@ -316,4 +316,175 @@ describe(useStorage, () => {
     // Watcher fires once with the last value (pre flush batches)
     expect(storage.getItem('rapid-key')).toBe('third');
   });
+
+  // --- Cross-tab synchronization via custom storage event ---
+  // Note: Mock storage is not `instanceof Storage`, so useStorage listens
+  // for the custom event 'vuetools-storage' instead of the native 'storage' event.
+
+  it('updates ref when receiving a custom storage event with matching key', async () => {
+    const storage = createMockStorage();
+    const state = useStorage<string>('sync-key', 'initial', storage, {
+      listenToStorageChanges: true,
+      window: globalThis as unknown as Window,
+    });
+
+    expect(state.value).toBe('initial');
+
+    const detail: StorageEventLike = {
+      key: 'sync-key',
+      oldValue: 'initial',
+      newValue: 'from-other-tab',
+      storageArea: storage,
+    };
+
+    globalThis.dispatchEvent(new CustomEvent(customStorageEventName, { detail }));
+    await nextTick();
+
+    expect(state.value).toBe('from-other-tab');
+  });
+
+  it('ignores storage events with a different key', async () => {
+    const storage = createMockStorage();
+    const state = useStorage<string>('my-key', 'initial', storage, {
+      listenToStorageChanges: true,
+      window: globalThis as unknown as Window,
+    });
+
+    const detail: StorageEventLike = {
+      key: 'other-key',
+      oldValue: null,
+      newValue: 'other-value',
+      storageArea: storage,
+    };
+
+    globalThis.dispatchEvent(new CustomEvent(customStorageEventName, { detail }));
+    await nextTick();
+
+    expect(state.value).toBe('initial');
+  });
+
+  it('resets to default when storage event has null key (clear)', async () => {
+    const storage = createMockStorage();
+    storage.store.set('clear-key', 'stored');
+
+    const state = useStorage<string>('clear-key', 'default', storage, {
+      listenToStorageChanges: true,
+      window: globalThis as unknown as Window,
+    });
+
+    expect(state.value).toBe('stored');
+
+    // null key means storage.clear() was called
+    const detail: StorageEventLike = {
+      key: null,
+      oldValue: null,
+      newValue: null,
+      storageArea: storage,
+    };
+
+    globalThis.dispatchEvent(new CustomEvent(customStorageEventName, { detail }));
+    await nextTick();
+
+    expect(state.value).toBe('default');
+  });
+
+  it('does not update ref on storage events when listenToStorageChanges is false', async () => {
+    const storage = createMockStorage();
+    const state = useStorage<string>('no-listen', 'initial', storage, {
+      listenToStorageChanges: false,
+      window: globalThis as unknown as Window,
+    });
+
+    const detail: StorageEventLike = {
+      key: 'no-listen',
+      oldValue: null,
+      newValue: 'changed',
+      storageArea: storage,
+    };
+
+    globalThis.dispatchEvent(new CustomEvent(customStorageEventName, { detail }));
+    await nextTick();
+
+    expect(state.value).toBe('initial');
+  });
+
+  // --- Custom storage event for non-native backends ---
+
+  it('responds to custom storage events for non-native backends', async () => {
+    const storage = createMockStorage();
+    const state = useStorage<string>('custom-backend', 'initial', storage, {
+      listenToStorageChanges: true,
+      window: globalThis as unknown as Window,
+    });
+
+    const detail: StorageEventLike = {
+      key: 'custom-backend',
+      oldValue: 'initial',
+      newValue: 'updated-via-custom',
+      storageArea: storage,
+    };
+
+    globalThis.dispatchEvent(new CustomEvent(customStorageEventName, { detail }));
+    await nextTick();
+
+    expect(state.value).toBe('updated-via-custom');
+  });
+
+  // --- Reactive key ---
+
+  it('re-reads from storage when reactive key changes', async () => {
+    const storage = createMockStorage();
+    storage.store.set('key-a', 'value-a');
+    storage.store.set('key-b', 'value-b');
+
+    const keyRef = ref('key-a');
+    const state = useStorage<string>(keyRef, 'default', storage);
+
+    expect(state.value).toBe('value-a');
+
+    keyRef.value = 'key-b';
+    await nextTick();
+
+    expect(state.value).toBe('value-b');
+  });
+
+  // --- initOnMounted ---
+
+  it('defers reading from storage until mounted when initOnMounted is true', async () => {
+    const storage = createMockStorage();
+    storage.store.set('mounted-key', 'stored-value');
+
+    // Outside component context, tryOnMounted calls fn synchronously
+    const state = useStorage<string>('mounted-key', 'default', storage, {
+      initOnMounted: true,
+    });
+
+    // tryOnMounted calls fn synchronously when outside component context
+    expect(state.value).toBe('stored-value');
+  });
+
+  // --- eventFilter ---
+
+  it('applies event filter to writes', async () => {
+    vi.useFakeTimers();
+
+    const storage = createMockStorage();
+    const state = useStorage<string>('filtered-key', 'initial', storage, {
+      eventFilter: invoke => setTimeout(invoke, 100),
+    });
+
+    const setItem = vi.spyOn(storage, 'setItem');
+    setItem.mockClear();
+
+    state.value = 'filtered';
+    await nextTick();
+
+    // Not written yet — debounced
+    expect(setItem).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(100);
+    expect(setItem).toHaveBeenCalledWith('filtered-key', 'filtered');
+
+    vi.useRealTimers();
+  });
 });
diff --git a/vue/toolkit/src/composables/storage/useStorage/index.ts b/vue/toolkit/src/composables/storage/useStorage/index.ts
new file mode 100644
index 0000000..5a02e15
--- /dev/null
+++ b/vue/toolkit/src/composables/storage/useStorage/index.ts
@@ -0,0 +1,361 @@
+import { nextTick, ref, shallowRef, toValue, watch } from 'vue';
+import type { MaybeRefOrGetter } from 'vue';
+import { isBoolean, isDate, isFunction, isMap, isNumber, isObject, isSet, isString } from '@robonen/stdlib';
+import type { ConfigurableFlush, ConfigurableWindow, RemovableRef } from '@/types';
+import { defaultWindow } from '@/types';
+import type { ConfigurableEventFilter, EventFilter } from '@/utils/filters';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import { tryOnMounted } from '@/composables/lifecycle/tryOnMounted';
+
+export interface StorageSerializer<T> {
+  read: (raw: string) => T;
+  write: (value: T) => string;
+}
+
+export const StorageSerializers: Record<string, StorageSerializer<any>> & {
+  boolean: StorageSerializer<boolean>;
+  number: StorageSerializer<number>;
+  string: StorageSerializer<string>;
+  object: StorageSerializer<any>;
+  map: StorageSerializer<Map<any, any>>;
+  set: StorageSerializer<Set<any>>;
+  date: StorageSerializer<Date>;
+} = {
+  boolean: {
+    read: (v: string) => v === 'true',
+    write: (v: boolean) => String(v),
+  },
+  number: {
+    read: (v: string) => Number.parseFloat(v),
+    write: (v: number) => String(v),
+  },
+  string: {
+    read: (v: string) => v,
+    write: (v: string) => v,
+  },
+  object: {
+    read: (v: string) => JSON.parse(v),
+    write: (v: any) => JSON.stringify(v),
+  },
+  map: {
+    read: (v: string) => new Map(JSON.parse(v)),
+    write: (v: Map<any, any>) => JSON.stringify([...v.entries()]),
+  },
+  set: {
+    read: (v: string) => new Set(JSON.parse(v)),
+    write: (v: Set<any>) => JSON.stringify([...v]),
+  },
+  date: {
+    read: (v: string) => new Date(v),
+    write: (v: Date) => v.toISOString(),
+  },
+};
+
+export interface StorageLike {
+  getItem: (key: string) => string | null;
+  setItem: (key: string, value: string) => void;
+  removeItem: (key: string) => void;
+}
+
+export const customStorageEventName = 'vuetools-storage';
+
+export interface StorageEventLike {
+  storageArea: StorageLike | null;
+  key: StorageEvent['key'];
+  oldValue: StorageEvent['oldValue'];
+  newValue: StorageEvent['newValue'];
+}
+
+export interface UseStorageOptions<T> extends ConfigurableFlush, ConfigurableWindow, ConfigurableEventFilter {
+  /**
+   * Use shallowRef instead of ref for the internal state
+   * @default true
+   */
+  shallow?: boolean;
+  /**
+   * Watch for deep changes
+   * @default true
+   */
+  deep?: boolean;
+  /**
+   * Listen to storage changes from other tabs/windows
+   * @default true
+   */
+  listenToStorageChanges?: boolean;
+  /**
+   * Write the default value to the storage when it does not exist
+   * @default true
+   */
+  writeDefaults?: boolean;
+  /**
+   * Merge the default value with the stored value
+   * @default false
+   */
+  mergeDefaults?: boolean | ((stored: T, defaults: T) => T);
+  /**
+   * Custom serializer for reading/writing storage values
+   */
+  serializer?: StorageSerializer<T>;
+  /**
+   * Error handler for read/write failures
+   */
+  onError?: (error: unknown) => void;
+  /**
+   * Wait for the component to be mounted before reading the storage
+   *
+   * Useful for SSR hydration to prevent mismatch
+   * @default false
+   */
+  initOnMounted?: boolean;
+}
+
+export type UseStorageReturn<T> = RemovableRef<T>;
+
+export function guessSerializer<T>(value: T): StorageSerializer<T> {
+  if (isBoolean(value)) return StorageSerializers.boolean as any;
+  if (isNumber(value)) return StorageSerializers.number as any;
+  if (isString(value)) return StorageSerializers.string as any;
+  if (isMap(value)) return StorageSerializers.map as any;
+  if (isSet(value)) return StorageSerializers.set as any;
+  if (isDate(value)) return StorageSerializers.date as any;
+  if (isObject(value)) return StorageSerializers.object as any;
+
+  return StorageSerializers.object as any;
+}
+
+export function shallowMerge<T>(stored: T, defaults: T): T {
+  if (isObject(stored) && isObject(defaults))
+    return { ...defaults, ...stored };
+
+  return stored;
+}
+
+/**
+ * @name useStorage
+ * @category Storage
+ * @description Reactive Storage binding — creates a ref synced with a storage backend
+ *
+ * @param {MaybeRefOrGetter<string>} key The storage key (can be reactive)
+ * @param {MaybeRefOrGetter<T>} initialValue The initial/default value
+ * @param {StorageLike} storage The storage backend
+ * @param {UseStorageOptions<T>} [options={}] Options
+ * @returns {RemovableRef<T>} A reactive ref synced with storage
+ *
+ * @example
+ * const count = useStorage('my-count', 0, storage);
+ *
+ * @example
+ * const state = useStorage('my-state', { hello: 'world' }, storage);
+ *
+ * @example
+ * const id = useStorage('my-id', 'default', storage, {
+ *   serializer: { read: (v) => v, write: (v) => v },
+ * });
+ *
+ * @since 0.0.12
+ */
+export function useStorage<T extends string>(key: MaybeRefOrGetter<string>, initialValue: MaybeRefOrGetter<T>, storage: StorageLike, options?: UseStorageOptions<T>): RemovableRef<T>;
+export function useStorage<T extends number>(key: MaybeRefOrGetter<string>, initialValue: MaybeRefOrGetter<T>, storage: StorageLike, options?: UseStorageOptions<T>): RemovableRef<T>;
+export function useStorage<T extends boolean>(key: MaybeRefOrGetter<string>, initialValue: MaybeRefOrGetter<T>, storage: StorageLike, options?: UseStorageOptions<T>): RemovableRef<T>;
+export function useStorage<T>(key: MaybeRefOrGetter<string>, initialValue: MaybeRefOrGetter<T>, storage: StorageLike, options?: UseStorageOptions<T>): RemovableRef<T>;
+export function useStorage<T = unknown>(key: MaybeRefOrGetter<string>, initialValue: MaybeRefOrGetter<null>, storage: StorageLike, options?: UseStorageOptions<T>): RemovableRef<T>;
+export function useStorage<T>(
+  key: MaybeRefOrGetter<string>,
+  initialValue: MaybeRefOrGetter<T>,
+  storage: StorageLike,
+  options: UseStorageOptions<T> = {},
+): RemovableRef<T> {
+  const {
+    shallow = true,
+    deep = true,
+    flush = 'pre',
+    writeDefaults = true,
+    mergeDefaults = false,
+    listenToStorageChanges = true,
+    window = defaultWindow,
+    eventFilter,
+    initOnMounted = false,
+    onError = console.error, // eslint-disable-line no-console
+  } = options;
+
+  const defaults = toValue(initialValue);
+  const serializer = options.serializer ?? guessSerializer(defaults);
+
+  const data = (shallow ? shallowRef : ref)(defaults) as RemovableRef<T>;
+  const resolvedKey = () => toValue(key);
+
+  function read(event?: StorageEventLike): T {
+    const rawValue = event
+      ? event.newValue
+      : storage.getItem(resolvedKey());
+
+    if (rawValue === undefined || rawValue === null) {
+      if (writeDefaults && defaults !== undefined && defaults !== null) {
+        try {
+          storage.setItem(resolvedKey(), serializer.write(defaults));
+        }
+        catch (e) {
+          onError(e);
+        }
+      }
+
+      return defaults;
+    }
+
+    try {
+      if (!event && mergeDefaults) {
+        const value = serializer.read(rawValue);
+
+        return isFunction(mergeDefaults)
+          ? mergeDefaults(value, defaults)
+          : shallowMerge(value, defaults);
+      }
+
+      return serializer.read(rawValue);
+    }
+    catch (e) {
+      onError(e);
+      return defaults;
+    }
+  }
+
+  function dispatchWriteEvent(oldValue: string | null, newValue: string | null) {
+    if (!window)
+      return;
+
+    const payload = {
+      key: resolvedKey(),
+      oldValue,
+      newValue,
+      storageArea: storage as Storage,
+    };
+
+    // Use native StorageEvent for built-in Storage, CustomEvent for custom backends
+    window.dispatchEvent(
+      storage instanceof Storage
+        ? new StorageEvent('storage', payload)
+        : new CustomEvent<StorageEventLike>(customStorageEventName, { detail: payload }),
+    );
+  }
+
+  function write(value: T) {
+    try {
+      const oldValue = storage.getItem(resolvedKey());
+
+      if (value === undefined || value === null) {
+        dispatchWriteEvent(oldValue, null);
+        storage.removeItem(resolvedKey());
+      }
+      else {
+        const serialized = serializer.write(value);
+
+        if (oldValue !== serialized) {
+          storage.setItem(resolvedKey(), serialized);
+          dispatchWriteEvent(oldValue, serialized);
+        }
+      }
+    }
+    catch (e) {
+      onError(e);
+    }
+  }
+
+  // Write-lock prevents the data watcher from writing back to storage
+  // when data.value is being updated programmatically (from storage reads,
+  // key changes, or cross-tab events). The lock is released via nextTick
+  // so it persists through the pre-flush watcher cycle.
+  let writeLock = false;
+
+  function lockWritesUntilFlush() {
+    writeLock = true;
+    nextTick(() => {
+      writeLock = false;
+    });
+  }
+
+  function update(event: StorageEventLike) {
+    if (event.storageArea !== storage)
+      return;
+
+    if (event.key === null) {
+      lockWritesUntilFlush();
+      data.value = defaults;
+      return;
+    }
+
+    if (event.key !== resolvedKey())
+      return;
+
+    const currentSerialized = serializer.write(data.value);
+
+    if (event.newValue !== currentSerialized) {
+      lockWritesUntilFlush();
+      data.value = read(event);
+    }
+  }
+
+  function updateFromCustomEvent(event: CustomEvent<StorageEventLike>) {
+    update(event.detail);
+  }
+
+  // Apply event filter if provided
+  const writeWithFilter: (value: T) => void = eventFilter
+    ? (value: T) => (eventFilter as EventFilter)(() => write(value))
+    : write;
+
+  // Initialize data from storage BEFORE creating watchers to avoid
+  // Vue 3.5 pause/resume replay race conditions
+  if (!initOnMounted) {
+    data.value = read();
+  }
+
+  // Data write watcher — skips writes when writeLock is active
+  watch(data, (newValue) => {
+    if (writeLock)
+      return;
+
+    writeWithFilter(newValue);
+  }, { flush, deep });
+
+  // Watch for reactive key changes
+  if (typeof key !== 'string') {
+    watch(resolvedKey, () => {
+      lockWritesUntilFlush();
+      data.value = read();
+    });
+  }
+
+  // Event listeners for cross-tab synchronization
+  let firstMounted = false;
+
+  const onStorageEvent = (ev: StorageEvent): void => {
+    if (initOnMounted && !firstMounted)
+      return;
+
+    update(ev);
+  };
+
+  const onStorageCustomEvent = (ev: CustomEvent<StorageEventLike>): void => {
+    if (initOnMounted && !firstMounted)
+      return;
+
+    updateFromCustomEvent(ev);
+  };
+
+  if (window && listenToStorageChanges) {
+    if (storage instanceof Storage)
+      useEventListener(window, 'storage', onStorageEvent, { passive: true });
+    else
+      useEventListener(window as any, customStorageEventName as any, onStorageCustomEvent as any);
+  }
+
+  if (initOnMounted) {
+    tryOnMounted(() => {
+      firstMounted = true;
+      lockWritesUntilFlush();
+      data.value = read();
+    });
+  }
+
+  return data;
+}
diff --git a/vue/toolkit/src/composables/storage/useStorageAsync/demo.vue b/vue/toolkit/src/composables/storage/useStorageAsync/demo.vue
new file mode 100644
index 0000000..8423aac
--- /dev/null
+++ b/vue/toolkit/src/composables/storage/useStorageAsync/demo.vue
@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import { useStorageAsync } from './index';
+import type { StorageLikeAsync } from './index';
+
+// useStorageAsync works with any async backend (IndexedDB, a REST cache, etc.).
+// We simulate latency with a tiny in-memory store so the demo is SSR-safe and
+// you can watch the `isReady` flag flip once the initial read resolves.
+const store = reactive<Record<string, string>>({});
+const LATENCY = 600;
+
+function delay<T>(value: T): Promise<T> {
+  return new Promise((resolve) => { setTimeout(() => resolve(value), LATENCY); });
+}
+
+const asyncStorage: StorageLikeAsync = {
+  getItem: (key) => delay(key in store ? store[key] : null),
+  setItem: async (key, value) => { await delay(null); store[key] = value; },
+  removeItem: async (key) => { await delay(null); delete store[key]; },
+};
+
+const saving = ref(false);
+
+// Returns { state, isReady } and is itself awaitable. `isReady` flips to true
+// once the initial async read resolves — the composable sets it for us.
+const { state: prefs, isReady } = useStorageAsync(
+  'demo:async-prefs',
+  { theme: 'system', density: 'comfortable' },
+  asyncStorage,
+);
+
+const themes = ['light', 'dark', 'system'] as const;
+const densities = ['compact', 'comfortable'] as const;
+
+async function update<K extends keyof typeof prefs.value>(key: K, value: (typeof prefs.value)[K]) {
+  prefs.value = { ...prefs.value, [key]: value };
+  // The watcher writes asynchronously; show a brief saving indicator.
+  saving.value = true;
+  await delay(null);
+  saving.value = false;
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Async preferences</span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
+        :class="isReady
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        <span
+          class="h-1.5 w-1.5 rounded-full"
+          :class="isReady ? 'bg-emerald-500' : 'bg-(--fg-subtle) animate-pulse'"
+        />
+        {{ isReady ? 'ready' : 'loading…' }}
+      </span>
+    </div>
+
+    <div
+      v-if="!isReady"
+      class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3"
+    >
+      <div class="h-3 w-1/3 animate-pulse rounded bg-(--bg-inset)" />
+      <div class="h-9 w-full animate-pulse rounded-lg bg-(--bg-inset)" />
+      <div class="h-3 w-1/3 animate-pulse rounded bg-(--bg-inset)" />
+      <div class="h-9 w-full animate-pulse rounded-lg bg-(--bg-inset)" />
+    </div>
+
+    <div v-else class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <div class="flex flex-col gap-2">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Theme</span>
+        <div class="grid grid-cols-3 gap-1.5">
+          <button
+            v-for="t in themes"
+            :key="t"
+            type="button"
+            class="rounded-lg border px-2 py-1.5 text-sm font-medium capitalize transition active:scale-[0.98] cursor-pointer"
+            :class="prefs.theme === t
+              ? 'border-transparent bg-(--accent) text-(--accent-fg)'
+              : 'border-(--border) bg-(--bg-inset) text-(--fg) hover:border-(--border-strong)'"
+            @click="update('theme', t)"
+          >
+            {{ t }}
+          </button>
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Density</span>
+        <div class="grid grid-cols-2 gap-1.5">
+          <button
+            v-for="d in densities"
+            :key="d"
+            type="button"
+            class="rounded-lg border px-2 py-1.5 text-sm font-medium capitalize transition active:scale-[0.98] cursor-pointer"
+            :class="prefs.density === d
+              ? 'border-transparent bg-(--accent) text-(--accent-fg)'
+              : 'border-(--border) bg-(--bg-inset) text-(--fg) hover:border-(--border-strong)'"
+            @click="update('density', d)"
+          >
+            {{ d }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) flex items-center justify-between">
+      <span class="truncate">{{ JSON.stringify(prefs) }}</span>
+      <span
+        class="ml-2 shrink-0 text-xs transition"
+        :class="saving ? 'text-sky-600 dark:text-sky-400' : 'text-(--fg-subtle)'"
+      >
+        {{ saving ? 'saving…' : 'saved' }}
+      </span>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Every change is written through the async backend with simulated latency.
+    </p>
+  </div>
+</template>
diff --git a/web/vue/src/composables/storage/useStorageAsync/index.test.ts b/vue/toolkit/src/composables/storage/useStorageAsync/index.test.ts
similarity index 79%
rename from web/vue/src/composables/storage/useStorageAsync/index.test.ts
rename to vue/toolkit/src/composables/storage/useStorageAsync/index.test.ts
index 65401cd..ac101e5 100644
--- a/web/vue/src/composables/storage/useStorageAsync/index.test.ts
+++ b/vue/toolkit/src/composables/storage/useStorageAsync/index.test.ts
@@ -1,5 +1,5 @@
-import { describe, it, expect, vi } from 'vitest';
-import { nextTick } from 'vue';
+import { describe, expect, it, vi } from 'vitest';
+import { nextTick, ref } from 'vue';
 import { useStorageAsync } from '.';
 import type { StorageLikeAsync } from '.';
 
@@ -19,9 +19,15 @@ function createDelayedAsyncStorage(delay: number): StorageLikeAsync & { store: M
 
   return {
     store,
-    getItem: (key: string) => new Promise((resolve) => setTimeout(() => resolve(store.get(key) ?? null), delay)),
-    setItem: (key: string, value: string) => new Promise((resolve) => setTimeout(() => { store.set(key, value); resolve(); }, delay)),
-    removeItem: (key: string) => new Promise((resolve) => setTimeout(() => { store.delete(key); resolve(); }, delay)),
+    getItem: (key: string) => new Promise(resolve => setTimeout(() => resolve(store.get(key) ?? null), delay)),
+    setItem: (key: string, value: string) => new Promise(resolve => setTimeout(() => {
+      store.set(key, value);
+      resolve();
+    }, delay)),
+    removeItem: (key: string) => new Promise(resolve => setTimeout(() => {
+      store.delete(key);
+      resolve();
+    }, delay)),
   };
 }
 
@@ -54,7 +60,7 @@ describe(useStorageAsync, () => {
     await nextTick();
 
     // Allow async write to complete
-    await new Promise((resolve) => setTimeout(resolve, 0));
+    await new Promise(resolve => setTimeout(resolve, 0));
 
     expect(storage.store.get('key')).toBe('updated');
   });
@@ -71,7 +77,7 @@ describe(useStorageAsync, () => {
 
     state.value = 100;
     await nextTick();
-    await new Promise((resolve) => setTimeout(resolve, 0));
+    await new Promise(resolve => setTimeout(resolve, 0));
 
     expect(storage.store.get('num')).toBe('100');
   });
@@ -86,7 +92,7 @@ describe(useStorageAsync, () => {
 
     state.value = false;
     await nextTick();
-    await new Promise((resolve) => setTimeout(resolve, 0));
+    await new Promise(resolve => setTimeout(resolve, 0));
 
     expect(storage.store.get('flag')).toBe('false');
   });
@@ -185,7 +191,7 @@ describe(useStorageAsync, () => {
 
     state.value = [4, 5, 6];
     await nextTick();
-    await new Promise((resolve) => setTimeout(resolve, 0));
+    await new Promise(resolve => setTimeout(resolve, 0));
 
     expect(storage.store.get('custom')).toBe('4,5,6');
   });
@@ -200,7 +206,7 @@ describe(useStorageAsync, () => {
 
     state.value = null;
     await nextTick();
-    await new Promise((resolve) => setTimeout(resolve, 0));
+    await new Promise(resolve => setTimeout(resolve, 0));
 
     expect(storage.store.has('nullable')).toBeFalsy();
   });
@@ -236,7 +242,7 @@ describe(useStorageAsync, () => {
 
     state.value = 'new';
     await nextTick();
-    await new Promise((resolve) => setTimeout(resolve, 0));
+    await new Promise(resolve => setTimeout(resolve, 0));
 
     // Another error from the write triggered by value change
     expect(onError).toHaveBeenCalledTimes(2);
@@ -254,7 +260,7 @@ describe(useStorageAsync, () => {
 
     await useStorageAsync('key', 'default', storage);
     await nextTick();
-    await new Promise((resolve) => setTimeout(resolve, 0));
+    await new Promise(resolve => setTimeout(resolve, 0));
 
     expect(setItem).not.toHaveBeenCalled();
   });
@@ -269,7 +275,7 @@ describe(useStorageAsync, () => {
 
     await useStorageAsync('key', 'default', storage, { writeDefaults: false });
     await nextTick();
-    await new Promise((resolve) => setTimeout(resolve, 0));
+    await new Promise(resolve => setTimeout(resolve, 0));
 
     expect(setItem).not.toHaveBeenCalled();
   });
@@ -287,7 +293,7 @@ describe(useStorageAsync, () => {
 
     state.value.nested.count = 42;
     await nextTick();
-    await new Promise((resolve) => setTimeout(resolve, 0));
+    await new Promise(resolve => setTimeout(resolve, 0));
 
     expect(JSON.parse(storage.store.get('deep-obj')!)).toEqual({ nested: { count: 42 } });
   });
@@ -302,7 +308,7 @@ describe(useStorageAsync, () => {
     state.value = 'second';
     state.value = 'third';
     await nextTick();
-    await new Promise((resolve) => setTimeout(resolve, 0));
+    await new Promise(resolve => setTimeout(resolve, 0));
 
     expect(storage.store.get('rapid')).toBe('third');
   });
@@ -333,4 +339,50 @@ describe(useStorageAsync, () => {
 
     expect(storage.store.get('existing')).toBe('stored');
   });
+
+  // --- Reactive key ---
+
+  it('re-reads from async storage when reactive key changes', async () => {
+    const storage = createMockAsyncStorage();
+    storage.store.set('key-a', 'value-a');
+    storage.store.set('key-b', 'value-b');
+
+    const keyRef = ref('key-a');
+    const { state } = await useStorageAsync<string>(keyRef, 'default', storage);
+
+    expect(state.value).toBe('value-a');
+
+    keyRef.value = 'key-b';
+    await nextTick();
+    await new Promise(resolve => setTimeout(resolve, 0));
+
+    expect(state.value).toBe('value-b');
+  });
+
+  // --- eventFilter ---
+
+  it('applies event filter to writes', async () => {
+    const storage = createMockAsyncStorage();
+    let captured: (() => void) | undefined;
+
+    const { state } = await useStorageAsync<string>('filtered', 'initial', storage, {
+      eventFilter: (invoke) => { captured = invoke; },
+    });
+
+    const setItem = vi.spyOn(storage, 'setItem');
+    (setItem as any).mockClear();
+
+    state.value = 'filtered-value';
+    await nextTick();
+
+    // Not written yet — held by filter
+    expect(setItem).not.toHaveBeenCalled();
+    expect(captured).toBeDefined();
+
+    // Release the filter
+    captured!();
+    await new Promise(resolve => setTimeout(resolve, 0));
+
+    expect(setItem).toHaveBeenCalled();
+  });
 });
diff --git a/vue/toolkit/src/composables/storage/useStorageAsync/index.ts b/vue/toolkit/src/composables/storage/useStorageAsync/index.ts
new file mode 100644
index 0000000..79fab2d
--- /dev/null
+++ b/vue/toolkit/src/composables/storage/useStorageAsync/index.ts
@@ -0,0 +1,267 @@
+import { computed, ref, shallowRef, toValue, watch } from 'vue';
+import type { MaybeRefOrGetter, Ref, ShallowRef, UnwrapRef } from 'vue';
+import { isFunction } from '@robonen/stdlib';
+import type { ConfigurableFlush, ConfigurableWindow } from '@/types';
+import { defaultWindow } from '@/types';
+import type { ConfigurableEventFilter, EventFilter } from '@/utils/filters';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+import { tryOnMounted } from '@/composables/lifecycle/tryOnMounted';
+import { useEventListener } from '@/composables/browser/useEventListener';
+import { guessSerializer, shallowMerge } from '../useStorage';
+import type { StorageEventLike } from '../useStorage';
+
+export interface StorageSerializerAsync<T> {
+  read: (raw: string) => T | Promise<T>;
+  write: (value: T) => string | Promise<string>;
+}
+
+export interface StorageLikeAsync {
+  getItem: (key: string) => string | null | Promise<string | null>;
+  setItem: (key: string, value: string) => void | Promise<void>;
+  removeItem: (key: string) => void | Promise<void>;
+}
+
+export interface UseStorageAsyncOptions<T, Shallow extends boolean = true> extends ConfigurableFlush, ConfigurableWindow, ConfigurableEventFilter {
+  /**
+   * Use shallowRef instead of ref for the internal state
+   * @default true
+   */
+  shallow?: Shallow;
+  /**
+   * Watch for deep changes
+   * @default true
+   */
+  deep?: boolean;
+  /**
+   * Listen to storage changes from other tabs/windows
+   * @default true
+   */
+  listenToStorageChanges?: boolean;
+  /**
+   * Write the default value to the storage when it does not exist
+   * @default true
+   */
+  writeDefaults?: boolean;
+  /**
+   * Custom serializer for reading/writing storage values
+   */
+  serializer?: StorageSerializerAsync<T>;
+  /**
+   * Merge the default value with the stored value
+   * @default false
+   */
+  mergeDefaults?: boolean | ((stored: T, defaults: T) => T);
+  /**
+   * Called once when the initial value has been loaded from storage
+   */
+  onReady?: (value: T) => void;
+  /**
+   * Error handler for read/write failures
+   */
+  onError?: (error: unknown) => void;
+  /**
+   * Wait for the component to be mounted before reading the storage
+   *
+   * Useful for SSR hydration to prevent mismatch
+   * @default false
+   */
+  initOnMounted?: boolean;
+}
+
+export interface UseStorageAsyncReturnBase<T, Shallow extends boolean> {
+  state: Shallow extends true ? ShallowRef<T> : Ref<UnwrapRef<T>>;
+  isReady: Ref<boolean>;
+}
+
+export type UseStorageAsyncReturn<T, Shallow extends boolean>
+  = & UseStorageAsyncReturnBase<T, Shallow>
+    & PromiseLike<UseStorageAsyncReturnBase<T, Shallow>>;
+
+/**
+ * @name useStorageAsync
+ * @category Storage
+ * @description Reactive Storage binding with async support — creates a ref synced with an async storage backend
+ *
+ * @param {MaybeRefOrGetter<string>} key The storage key (can be reactive)
+ * @param {MaybeRefOrGetter<T>} initialValue The initial/default value
+ * @param {StorageLikeAsync} storage The async storage backend
+ * @param {UseStorageAsyncOptions<T>} [options={}] Options
+ * @returns {UseStorageAsyncReturn<T, Shallow>} An object with state ref and isReady flag, also awaitable
+ *
+ * @example
+ * const { state } = useStorageAsync('access-token', '', asyncStorage);
+ *
+ * @example
+ * const { state, isReady } = await useStorageAsync('settings', { theme: 'dark' }, asyncStorage);
+ *
+ * @example
+ * const { state } = useStorageAsync('key', 'default', asyncStorage, {
+ *   onReady: (value) => console.log('Loaded:', value),
+ * });
+ *
+ * @since 0.0.12
+ */
+export function useStorageAsync<T extends string, Shallow extends boolean = true>(key: MaybeRefOrGetter<string>, initialValue: MaybeRefOrGetter<T>, storage: StorageLikeAsync, options?: UseStorageAsyncOptions<T, Shallow>): UseStorageAsyncReturn<T, Shallow>;
+export function useStorageAsync<T extends number, Shallow extends boolean = true>(key: MaybeRefOrGetter<string>, initialValue: MaybeRefOrGetter<T>, storage: StorageLikeAsync, options?: UseStorageAsyncOptions<T, Shallow>): UseStorageAsyncReturn<T, Shallow>;
+export function useStorageAsync<T extends boolean, Shallow extends boolean = true>(key: MaybeRefOrGetter<string>, initialValue: MaybeRefOrGetter<T>, storage: StorageLikeAsync, options?: UseStorageAsyncOptions<T, Shallow>): UseStorageAsyncReturn<T, Shallow>;
+export function useStorageAsync<T, Shallow extends boolean = true>(key: MaybeRefOrGetter<string>, initialValue: MaybeRefOrGetter<T>, storage: StorageLikeAsync, options?: UseStorageAsyncOptions<T, Shallow>): UseStorageAsyncReturn<T, Shallow>;
+export function useStorageAsync<T = unknown, Shallow extends boolean = true>(key: MaybeRefOrGetter<string>, initialValue: MaybeRefOrGetter<null>, storage: StorageLikeAsync, options?: UseStorageAsyncOptions<T, Shallow>): UseStorageAsyncReturn<T, Shallow>;
+export function useStorageAsync<T, Shallow extends boolean = true>(
+  key: MaybeRefOrGetter<string>,
+  initialValue: MaybeRefOrGetter<T>,
+  storage: StorageLikeAsync,
+  options: UseStorageAsyncOptions<T, Shallow> = {},
+): UseStorageAsyncReturn<T, Shallow> {
+  const {
+    shallow = true,
+    deep = true,
+    flush = 'pre',
+    writeDefaults = true,
+    mergeDefaults = false,
+    listenToStorageChanges = true,
+    window = defaultWindow,
+    eventFilter,
+    initOnMounted = false,
+    onReady,
+    onError = console.error, // eslint-disable-line no-console
+  } = options;
+
+  const defaults = toValue(initialValue);
+  const serializer = options.serializer ?? guessSerializer(defaults);
+
+  const state = (shallow ? shallowRef : ref)(defaults) as Shallow extends true ? ShallowRef<T> : Ref<UnwrapRef<T>>;
+  const isReady = ref(false);
+  const keyComputed = computed<string>(() => toValue(key));
+
+  async function read(event?: StorageEventLike): Promise<T> {
+    try {
+      const rawValue = event
+        ? event.newValue
+        : await storage.getItem(keyComputed.value);
+
+      if (rawValue === undefined || rawValue === null) {
+        if (writeDefaults && defaults !== undefined && defaults !== null) {
+          try {
+            await storage.setItem(keyComputed.value, await serializer.write(defaults));
+          }
+          catch (e) {
+            onError(e);
+          }
+        }
+
+        return defaults;
+      }
+
+      if (!event && mergeDefaults) {
+        const value: T = await serializer.read(rawValue) as T;
+
+        return isFunction(mergeDefaults)
+          ? mergeDefaults(value, defaults)
+          : shallowMerge(value, defaults);
+      }
+
+      return await serializer.read(rawValue) as T;
+    }
+    catch (e) {
+      onError(e);
+      return defaults;
+    }
+  }
+
+  async function write(value: T) {
+    try {
+      if (value === undefined || value === null) {
+        await storage.removeItem(keyComputed.value);
+      }
+      else {
+        const raw = await serializer.write(value);
+        await storage.setItem(keyComputed.value, raw);
+      }
+    }
+    catch (e) {
+      onError(e);
+    }
+  }
+
+  // Apply event filter if provided
+  const writeWithFilter: (value: T) => void = eventFilter
+    ? (value: T) => (eventFilter as EventFilter)(() => write(value))
+    : (value: T) => { write(value); };
+
+  let stopWatch: (() => void) | null = null;
+  let stopKeyWatch: (() => void) | null = null;
+
+  tryOnScopeDispose(() => {
+    stopWatch?.();
+    stopKeyWatch?.();
+  });
+
+  // Event listeners for cross-tab synchronization
+  let firstMounted = false;
+
+  if (window && listenToStorageChanges) {
+    useEventListener(window, 'storage', (ev: StorageEvent) => {
+      if (initOnMounted && !firstMounted)
+        return;
+      if (ev.key !== keyComputed.value)
+        return;
+      if (ev.storageArea !== storage)
+        return;
+
+      Promise.resolve().then(() => read(ev)).then((value) => {
+        (state as Ref).value = value;
+      });
+    }, { passive: true });
+  }
+
+  const shell: UseStorageAsyncReturnBase<T, Shallow> = {
+    state,
+    isReady,
+  };
+
+  function performInit() {
+    return read().then((value) => {
+      (state as Ref).value = value;
+      isReady.value = true;
+      onReady?.(value);
+
+      // Set up watcher AFTER initial state is set — avoids write-back on init
+      const stop = watch(state, (newValue) => {
+        writeWithFilter(newValue as T);
+      }, { flush, deep });
+
+      stopWatch = stop;
+
+      // Watch for key changes
+      stopKeyWatch = watch(keyComputed, () => {
+        read().then((v) => {
+          (state as Ref).value = v;
+        });
+      }, { flush });
+
+      return shell;
+    });
+  }
+
+  let readyPromise: Promise<UseStorageAsyncReturnBase<T, Shallow>>;
+
+  if (initOnMounted) {
+    readyPromise = new Promise<UseStorageAsyncReturnBase<T, Shallow>>((resolve) => {
+      tryOnMounted(() => {
+        firstMounted = true;
+        performInit().then(resolve);
+      });
+    });
+  }
+  else {
+    readyPromise = performInit();
+  }
+
+  return {
+    ...shell,
+    // eslint-disable-next-line unicorn/no-thenable
+    then(onFulfilled, onRejected) {
+      return readyPromise.then(onFulfilled, onRejected);
+    },
+  };
+}
diff --git a/vue/toolkit/src/composables/utilities/createEventHook/demo.vue b/vue/toolkit/src/composables/utilities/createEventHook/demo.vue
new file mode 100644
index 0000000..015756a
--- /dev/null
+++ b/vue/toolkit/src/composables/utilities/createEventHook/demo.vue
@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { onScopeDispose, ref } from 'vue';
+import { createEventHook } from './index';
+
+interface LogEntry {
+  id: number;
+  level: 'info' | 'warn' | 'error';
+  message: string;
+}
+
+// A typed event hook with a tuple payload: (level, message).
+const logHook = createEventHook<[LogEntry['level'], string]>();
+
+const entries = ref<LogEntry[]>([]);
+const listenerActive = ref(false);
+const draft = ref('Deployment finished');
+const level = ref<LogEntry['level']>('info');
+let nextId = 0;
+let off: (() => void) | null = null;
+
+const levels: LogEntry['level'][] = ['info', 'warn', 'error'];
+
+const badgeClass: Record<LogEntry['level'], string> = {
+  info: 'border-sky-500/30 bg-sky-500/10 text-sky-600 dark:text-sky-400',
+  warn: 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400',
+  error: 'border-red-500/30 bg-red-500/10 text-red-600 dark:text-red-400',
+};
+
+function subscribe() {
+  if (off)
+    return;
+  // `on` returns a callable off-handle; calling it removes the listener.
+  off = logHook.on((lvl, message) => {
+    entries.value = [{ id: nextId++, level: lvl, message }, ...entries.value].slice(0, 6);
+  });
+  listenerActive.value = true;
+}
+
+function unsubscribe() {
+  off?.();
+  off = null;
+  listenerActive.value = false;
+}
+
+async function emit() {
+  const message = draft.value.trim();
+  if (!message)
+    return;
+  // trigger fans out to every listener and awaits async ones.
+  await logHook.trigger(level.value, message);
+}
+
+function clearLog() {
+  entries.value = [];
+}
+
+onScopeDispose(unsubscribe);
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Event hook</span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
+        :class="listenerActive
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        {{ listenerActive ? '1 listener' : 'no listeners' }}
+      </span>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+      <div class="grid grid-cols-3 gap-1.5">
+        <button
+          v-for="lvl in levels"
+          :key="lvl"
+          type="button"
+          class="rounded-lg border px-2 py-1.5 text-xs font-medium uppercase tracking-wide transition active:scale-[0.98] cursor-pointer"
+          :class="level === lvl
+            ? 'border-transparent bg-(--accent) text-(--accent-fg)'
+            : 'border-(--border) bg-(--bg-inset) text-(--fg) hover:border-(--border-strong)'"
+          @click="level = lvl"
+        >
+          {{ lvl }}
+        </button>
+      </div>
+
+      <form class="flex items-center gap-2" @submit.prevent="emit">
+        <input
+          v-model="draft"
+          type="text"
+          placeholder="log message…"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+        <button
+          type="submit"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        >
+          Trigger
+        </button>
+      </form>
+
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="listenerActive ? unsubscribe() : subscribe()"
+      >
+        {{ listenerActive ? 'Detach listener (off)' : 'Attach listener (on)' }}
+      </button>
+    </div>
+
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Received events</span>
+      <button
+        v-if="entries.length"
+        type="button"
+        class="text-xs font-medium text-(--fg-muted) underline-offset-2 hover:underline cursor-pointer"
+        @click="clearLog"
+      >
+        Clear
+      </button>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex flex-col gap-2 min-h-24">
+      <p v-if="!entries.length" class="text-sm text-(--fg-subtle)">
+        {{ listenerActive ? 'Trigger an event to see it here.' : 'Attach a listener, then trigger.' }}
+      </p>
+      <div
+        v-for="entry in entries"
+        :key="entry.id"
+        class="flex items-center gap-2 text-sm"
+      >
+        <span
+          class="inline-flex shrink-0 items-center rounded border px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide"
+          :class="badgeClass[entry.level]"
+        >
+          {{ entry.level }}
+        </span>
+        <span class="truncate text-(--fg)">{{ entry.message }}</span>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Detach the listener and trigger again — with no listeners the payload is dropped.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/utilities/createEventHook/index.test.ts b/vue/toolkit/src/composables/utilities/createEventHook/index.test.ts
new file mode 100644
index 0000000..e2d636e
--- /dev/null
+++ b/vue/toolkit/src/composables/utilities/createEventHook/index.test.ts
@@ -0,0 +1,209 @@
+import { describe, expect, it, vi } from 'vitest';
+import { effectScope } from 'vue';
+import { createEventHook } from '.';
+
+describe(createEventHook, () => {
+  it('triggers registered listeners with the payload', async () => {
+    const { on, trigger } = createEventHook<string>();
+    const listener = vi.fn();
+
+    on(listener);
+    await trigger('hello');
+
+    expect(listener).toHaveBeenCalledOnce();
+    expect(listener).toHaveBeenCalledWith('hello');
+  });
+
+  it('triggers multiple listeners', async () => {
+    const { on, trigger } = createEventHook<number>();
+    const a = vi.fn();
+    const b = vi.fn();
+
+    on(a);
+    on(b);
+    await trigger(42);
+
+    expect(a).toHaveBeenCalledWith(42);
+    expect(b).toHaveBeenCalledWith(42);
+  });
+
+  it('supports tuple payloads for multiple positional arguments', async () => {
+    const { on, trigger } = createEventHook<[number, number]>();
+    const listener = vi.fn();
+
+    on(listener);
+    await trigger(2, 3);
+
+    expect(listener).toHaveBeenCalledWith(2, 3);
+  });
+
+  it('resolves with the results of all listeners', async () => {
+    const { on, trigger } = createEventHook<number>();
+
+    on(x => x + 1);
+    on(async x => x * 2);
+
+    const results = await trigger(10);
+    expect(results).toEqual([11, 20]);
+  });
+
+  it('awaits async listeners before resolving', async () => {
+    const { on, trigger } = createEventHook<void>();
+    let done = false;
+
+    on(async () => {
+      await Promise.resolve();
+      done = true;
+    });
+
+    const promise = trigger();
+    expect(done).toBeFalsy();
+
+    await promise;
+    expect(done).toBeTruthy();
+  });
+
+  it('off removes a listener', async () => {
+    const { on, off, trigger } = createEventHook<string>();
+    const listener = vi.fn();
+
+    on(listener);
+    off(listener);
+    await trigger('x');
+
+    expect(listener).not.toHaveBeenCalled();
+  });
+
+  it('on returns a callable off handle', async () => {
+    const { on, trigger } = createEventHook<string>();
+    const listener = vi.fn();
+
+    const stop = on(listener);
+    stop();
+    await trigger('x');
+
+    expect(listener).not.toHaveBeenCalled();
+  });
+
+  it('on returns a handle whose .off method removes the listener', async () => {
+    const { on, trigger } = createEventHook<string>();
+    const listener = vi.fn();
+
+    const { off } = on(listener);
+    off();
+    await trigger('x');
+
+    expect(listener).not.toHaveBeenCalled();
+  });
+
+  it('clear removes every listener', async () => {
+    const { on, trigger, clear } = createEventHook<string>();
+    const a = vi.fn();
+    const b = vi.fn();
+
+    on(a);
+    on(b);
+    clear();
+    await trigger('x');
+
+    expect(a).not.toHaveBeenCalled();
+    expect(b).not.toHaveBeenCalled();
+  });
+
+  it('does not call listeners added during a trigger in the same pass', async () => {
+    const { on, trigger } = createEventHook<void>();
+    const late = vi.fn();
+
+    on(() => {
+      on(late);
+    });
+
+    await trigger();
+    expect(late).not.toHaveBeenCalled();
+
+    await trigger();
+    expect(late).toHaveBeenCalledOnce();
+  });
+
+  it('allows a listener to remove itself during a trigger', async () => {
+    const { on, trigger } = createEventHook<void>();
+    const listener = vi.fn();
+
+    const off = on(() => {
+      off();
+      listener();
+    });
+
+    await trigger();
+    await trigger();
+
+    expect(listener).toHaveBeenCalledOnce();
+  });
+
+  it('routes a throwing listener to onError without rejecting trigger', async () => {
+    const onError = vi.fn();
+    const { on, trigger } = createEventHook<void>({ onError });
+    const after = vi.fn();
+
+    on(() => {
+      throw new Error('boom');
+    });
+    on(after);
+
+    await expect(trigger()).resolves.toBeDefined();
+    expect(onError).toHaveBeenCalledOnce();
+    expect(onError.mock.calls[0]![0]).toBeInstanceOf(Error);
+    expect(after).toHaveBeenCalledOnce();
+  });
+
+  it('routes a rejecting async listener to onError without rejecting trigger', async () => {
+    const onError = vi.fn();
+    const { on, trigger } = createEventHook<void>({ onError });
+
+    on(async () => {
+      throw new Error('async boom');
+    });
+
+    await expect(trigger()).resolves.toEqual([undefined]);
+    expect(onError).toHaveBeenCalledOnce();
+  });
+
+  it('swallows listener errors by default', async () => {
+    const { on, trigger } = createEventHook<void>();
+
+    on(() => {
+      throw new Error('boom');
+    });
+
+    await expect(trigger()).resolves.toBeDefined();
+  });
+
+  it('removes the listener when the effect scope is disposed', async () => {
+    const listener = vi.fn();
+    const hook = createEventHook<void>();
+    const scope = effectScope();
+
+    scope.run(() => {
+      hook.on(listener);
+    });
+
+    scope.stop();
+    await hook.trigger();
+
+    expect(listener).not.toHaveBeenCalled();
+  });
+
+  it('works outside of an effect scope (SSR-safe, no scope available)', async () => {
+    const listener = vi.fn();
+    const hook = createEventHook<string>();
+
+    // No getCurrentScope here -> tryOnScopeDispose is a no-op, must not throw.
+    const off = hook.on(listener);
+    await hook.trigger('ok');
+    expect(listener).toHaveBeenCalledWith('ok');
+
+    off();
+    await hook.trigger('again');
+    expect(listener).toHaveBeenCalledOnce();
+  });
+});
diff --git a/vue/toolkit/src/composables/utilities/createEventHook/index.ts b/vue/toolkit/src/composables/utilities/createEventHook/index.ts
new file mode 100644
index 0000000..65b4918
--- /dev/null
+++ b/vue/toolkit/src/composables/utilities/createEventHook/index.ts
@@ -0,0 +1,160 @@
+import { noop } from '@robonen/stdlib';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+
+/**
+ * A listener for an event hook. `T` is the payload type:
+ * - `void` -> the listener takes no arguments
+ * - a tuple `[a, b]` -> the listener takes those positional arguments
+ * - anything else -> the listener takes a single argument of that type
+ *
+ * Listeners may be sync or async; async listeners are awaited by `trigger`.
+ */
+export type EventHookListener<T = any>
+  = [T] extends [void]
+    ? () => any
+    : [T] extends [any[]]
+        ? (...args: T) => any
+        : (arg: T) => any;
+
+/**
+ * Handle returned from {@link EventHook.on}. It is both a callable that removes
+ * the listener and an object exposing an `off` method, so either of these work:
+ *
+ * ```ts
+ * const off = on(fn); off();
+ * const { off } = on(fn); off();
+ * ```
+ */
+export interface EventHookOffHandle {
+  (): void;
+  off: () => void;
+}
+
+export type EventHookOn<T = any> = (listener: EventHookListener<T>) => EventHookOffHandle;
+export type EventHookOff<T = any> = (listener: EventHookListener<T>) => void;
+export type EventHookTrigger<T = any>
+  = [T] extends [void]
+    ? () => Promise<any[]>
+    : [T] extends [any[]]
+        ? (...args: T) => Promise<any[]>
+        : (arg: T) => Promise<any[]>;
+
+export interface CreateEventHookOptions {
+  /**
+   * Handler invoked when a listener throws synchronously or rejects.
+   * Defaults to `noop` (errors are swallowed so one bad listener never breaks
+   * the others or rejects the `trigger` promise). Provide this to surface them.
+   *
+   * @default noop
+   */
+  onError?: (error: unknown) => void;
+}
+
+export interface CreateEventHookReturn<T = any> {
+  /**
+   * Register a listener. Returns a handle that removes the listener when
+   * called (or via its `.off` method). The listener is also removed
+   * automatically when the surrounding effect scope is disposed.
+   */
+  on: EventHookOn<T>;
+
+  /**
+   * Remove a previously registered listener.
+   */
+  off: EventHookOff<T>;
+
+  /**
+   * Invoke every registered listener with the given payload and resolve once
+   * all of them (including async listeners) have settled.
+   */
+  trigger: EventHookTrigger<T>;
+
+  /**
+   * Remove all listeners.
+   */
+  clear: () => void;
+}
+
+/**
+ * @name createEventHook
+ * @category Utilities
+ * @description Lightweight, non-reactive event hook factory exposing
+ * `{ on, off, trigger, clear }`. `on` returns a callable off handle (also
+ * carrying an `.off` method) and auto-removes the listener on scope dispose.
+ * `trigger` awaits async listeners and resolves with all their results. SSR-safe
+ * (touches no browser globals) and tree-shakeable.
+ *
+ * @param {CreateEventHookOptions} [options={}] Options
+ * @returns {CreateEventHookReturn} The event hook controls
+ *
+ * @example
+ * const { on, trigger } = createEventHook<string>();
+ * const off = on((msg) => console.log(msg));
+ * await trigger('hello');
+ * off();
+ *
+ * @example
+ * // Tuple payload for multiple positional arguments
+ * const hook = createEventHook<[number, number]>();
+ * hook.on((x, y) => x + y);
+ * const results = await hook.trigger(2, 3); // [5]
+ *
+ * @example
+ * // trigger awaits async listeners
+ * const hook = createEventHook<void>();
+ * hook.on(async () => { await save(); });
+ * await hook.trigger(); // resolves after save() completes
+ *
+ * @since 0.0.15
+ */
+export function createEventHook<T = any>(
+  options: CreateEventHookOptions = {},
+): CreateEventHookReturn<T> {
+  const { onError = noop } = options;
+
+  const listeners = new Set<EventHookListener<T>>();
+
+  const off: EventHookOff<T> = (listener) => {
+    listeners.delete(listener);
+  };
+
+  const clear = (): void => {
+    listeners.clear();
+  };
+
+  const on: EventHookOn<T> = (listener) => {
+    listeners.add(listener);
+
+    const offHandle = (() => off(listener)) as EventHookOffHandle;
+    offHandle.off = offHandle;
+
+    tryOnScopeDispose(offHandle);
+
+    return offHandle;
+  };
+
+  const trigger = ((...args: any[]) => {
+    // Snapshot first: a listener that mutates the set during the trigger (e.g.
+    // self-removal or registering a new one) must not affect the current pass.
+    const snapshot = [...listeners];
+
+    return Promise.all(
+      snapshot.map(async (listener) => {
+        try {
+          return await listener(...(args as [T]));
+        }
+        catch (error) {
+          onError(error);
+          return undefined;
+        }
+      }),
+    );
+  }) as EventHookTrigger<T>;
+
+  return {
+    on,
+    off,
+    trigger,
+    clear,
+  };
+}
diff --git a/vue/toolkit/src/composables/utilities/get/demo.vue b/vue/toolkit/src/composables/utilities/get/demo.vue
new file mode 100644
index 0000000..58a66db
--- /dev/null
+++ b/vue/toolkit/src/composables/utilities/get/demo.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue';
+import { get } from './index';
+
+// A reactive user record we read from in three different ways.
+const user = reactive({
+  name: 'Ada Lovelace',
+  role: 'Mathematician',
+  followers: 1843,
+});
+
+// A plain ref, edited live by the slider below.
+const count = ref(42);
+
+// A getter — `get` resolves it via `toValue`, just like a ref or plain value.
+const doubled = (): number => count.value * 2;
+
+// Pick which property of `user` to read with the key overload.
+const keys = ['name', 'role', 'followers'] as const;
+const selectedKey = ref<typeof keys[number]>('name');
+
+// `get(ref)` unwraps the ref.
+const countValue = computed(() => get(count));
+// `get(getter)` resolves the getter function.
+const doubledValue = computed(() => get(doubled));
+// `get(reactive, key)` reads a single property off the resolved value.
+const keyedValue = computed(() => get(user, selectedKey.value));
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex flex-col gap-1">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">unwrap a ref</span>
+      <div class="flex items-center gap-3">
+        <input
+          v-model.number="count"
+          type="range"
+          min="0"
+          max="100"
+          class="h-2 flex-1 cursor-pointer appearance-none rounded-full bg-(--bg-inset) accent-(--accent)"
+        >
+        <span class="font-mono text-sm tabular-nums text-(--fg-muted)">{{ count }}</span>
+      </div>
+    </div>
+
+    <div class="grid grid-cols-2 gap-3">
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">get(count)</p>
+        <p class="mt-1 font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ countValue }}</p>
+      </div>
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">get(getter)</p>
+        <p class="mt-1 font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ doubledValue }}</p>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">read a single key</span>
+      <div class="flex flex-wrap gap-1.5">
+        <button
+          v-for="k in keys"
+          :key="k"
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+          :class="selectedKey === k
+            ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
+            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+          @click="selectedKey = k"
+        >
+          {{ k }}
+        </button>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+        <span class="text-(--fg-subtle)">get(user, '{{ selectedKey }}')</span>
+        <span class="px-2 text-(--fg-subtle)">→</span>
+        <span class="text-(--accent-text)">{{ JSON.stringify(keyedValue) }}</span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/utilities/get/index.test.ts b/vue/toolkit/src/composables/utilities/get/index.test.ts
new file mode 100644
index 0000000..d2b3a7b
--- /dev/null
+++ b/vue/toolkit/src/composables/utilities/get/index.test.ts
@@ -0,0 +1,72 @@
+import { describe, expect, it } from 'vitest';
+import { computed, ref } from 'vue';
+import { get } from '.';
+
+describe(get, () => {
+  it('unwraps a ref to its value', () => {
+    const count = ref(1);
+
+    expect(get(count)).toBe(1);
+  });
+
+  it('returns a plain value unchanged', () => {
+    expect(get(42)).toBe(42);
+    expect(get('hello')).toBe('hello');
+    expect(get(null)).toBeNull();
+    expect(get(undefined)).toBeUndefined();
+  });
+
+  it('resolves a getter function', () => {
+    expect(get(() => 42)).toBe(42);
+  });
+
+  it('reads a property from a ref value', () => {
+    const user = ref({ name: 'Ada', age: 36 });
+
+    expect(get(user, 'name')).toBe('Ada');
+    expect(get(user, 'age')).toBe(36);
+  });
+
+  it('reads a property from a plain object', () => {
+    const user = { name: 'Grace' };
+
+    expect(get(user, 'name')).toBe('Grace');
+  });
+
+  it('reads an index from an array ref', () => {
+    const list = ref([10, 20, 30]);
+
+    expect(get(list, 0)).toBe(10);
+    expect(get(list, 2)).toBe(30);
+  });
+
+  it('reads a property from a getter result', () => {
+    expect(get(() => ({ name: 'Linus' }), 'name')).toBe('Linus');
+  });
+
+  it('reflects the current value of a ref each call', () => {
+    const count = ref(0);
+
+    expect(get(count)).toBe(0);
+    count.value = 5;
+    expect(get(count)).toBe(5);
+  });
+
+  it('works with computed refs', () => {
+    const base = ref(2);
+    const doubled = computed(() => base.value * 2);
+
+    expect(get(doubled)).toBe(4);
+    base.value = 5;
+    expect(get(doubled)).toBe(10);
+  });
+
+  it('treats a nullish key as no key (returns whole value)', () => {
+    const user = ref({ name: 'Ada' });
+    // `key` is typed as `keyof T`, but the runtime guard also handles a nullish
+    // key for parity with `unref`-style accessors; exercise that branch here.
+    const key = undefined as unknown as 'name';
+
+    expect(get(user, key)).toEqual({ name: 'Ada' });
+  });
+});
diff --git a/vue/toolkit/src/composables/utilities/get/index.ts b/vue/toolkit/src/composables/utilities/get/index.ts
new file mode 100644
index 0000000..1e3c923
--- /dev/null
+++ b/vue/toolkit/src/composables/utilities/get/index.ts
@@ -0,0 +1,43 @@
+import { toValue } from 'vue';
+import type { MaybeRefOrGetter } from 'vue';
+
+/**
+ * @name get
+ * @category Utilities
+ * @description Shorthand accessor that unwraps a ref/getter to its value, optionally
+ * reading a single property off the resolved value. Accepts plain values, refs and
+ * getter functions (via `toValue`), so it works anywhere `unref`/`toValue` would.
+ * Purely synchronous and side-effect free, so it is fully SSR-safe.
+ *
+ * @param {MaybeRefOrGetter<T>} source The ref, getter or plain value to read
+ * @param {K} [key] Optional property key to read from the resolved value
+ * @returns {T | T[K]} The unwrapped value, or `value[key]` when a key is provided
+ *
+ * @example
+ * const count = ref(1);
+ * get(count); // 1
+ *
+ * @example
+ * const user = ref({ name: 'Ada' });
+ * get(user, 'name'); // 'Ada'
+ *
+ * @example
+ * // Works with getters and plain values too
+ * get(() => 42); // 42
+ * get(42); // 42
+ *
+ * @since 0.0.15
+ */
+export function get<T>(source: MaybeRefOrGetter<T>): T;
+export function get<T, K extends keyof T>(source: MaybeRefOrGetter<T>, key: K): T[K];
+export function get<T, K extends keyof T>(
+  source: MaybeRefOrGetter<T>,
+  key?: K,
+): T | T[K] {
+  const value = toValue(source);
+
+  if (key === undefined || key === null)
+    return value;
+
+  return value[key];
+}
diff --git a/vue/toolkit/src/composables/utilities/index.ts b/vue/toolkit/src/composables/utilities/index.ts
new file mode 100644
index 0000000..a136bd0
--- /dev/null
+++ b/vue/toolkit/src/composables/utilities/index.ts
@@ -0,0 +1,7 @@
+export * from './createEventHook';
+export * from './get';
+export * from './isDefined';
+export * from './set';
+export * from './useEventBus';
+export * from './useMemoize';
+export * from './useSupported';
diff --git a/vue/toolkit/src/composables/utilities/isDefined/demo.vue b/vue/toolkit/src/composables/utilities/isDefined/demo.vue
new file mode 100644
index 0000000..b991093
--- /dev/null
+++ b/vue/toolkit/src/composables/utilities/isDefined/demo.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { isDefined, useIsDefined } from './index';
+
+interface Profile {
+  name: string;
+  email: string;
+}
+
+// A value that toggles between a real object and `null` — the classic
+// "data not loaded yet" case `isDefined` is built to narrow.
+const profile = ref<Profile | null>({ name: 'Ada Lovelace', email: 'ada@analytical.engine' });
+
+// Reactive guard: re-evaluates automatically whenever `profile` changes.
+const ready = useIsDefined(profile);
+
+// Synchronous one-off guard, used inside a normal computed below.
+const greeting = computed(() => {
+  // After this check TypeScript narrows `profile.value` to `Profile`.
+  if (isDefined(profile))
+    return `Welcome back, ${profile.value.name}`;
+
+  return 'No profile loaded';
+});
+
+function load(): void {
+  profile.value = { name: 'Grace Hopper', email: 'grace@navy.mil' };
+}
+
+function clear(): void {
+  profile.value = null;
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">useIsDefined(profile)</span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-semibold transition"
+        :class="ready
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'"
+      >
+        <span class="size-2 rounded-full" :class="ready ? 'bg-emerald-500' : 'bg-amber-500'" />
+        {{ ready ? 'defined' : 'nullish' }}
+      </span>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">narrowed read</p>
+      <p class="mt-1 text-base font-semibold text-(--fg)">{{ greeting }}</p>
+      <p
+        v-if="isDefined(profile)"
+        class="mt-1 font-mono text-sm text-(--fg-muted)"
+      >
+        {{ profile.email }}
+      </p>
+      <p v-else class="mt-1 text-sm italic text-(--fg-subtle)">
+        Waiting for data…
+      </p>
+    </div>
+
+    <div class="flex gap-2">
+      <button
+        type="button"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="ready"
+        @click="load"
+      >
+        Load profile
+      </button>
+      <button
+        type="button"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="!ready"
+        @click="clear"
+      >
+        Clear
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/utilities/isDefined/index.test.ts b/vue/toolkit/src/composables/utilities/isDefined/index.test.ts
new file mode 100644
index 0000000..25fd364
--- /dev/null
+++ b/vue/toolkit/src/composables/utilities/isDefined/index.test.ts
@@ -0,0 +1,96 @@
+import { describe, expect, it } from 'vitest';
+import { computed, ref, shallowRef } from 'vue';
+import { isDefined, useIsDefined } from '.';
+
+describe(isDefined, () => {
+  it('returns true for a ref holding a defined value', () => {
+    expect(isDefined(ref(0))).toBeTruthy();
+    expect(isDefined(ref(''))).toBeTruthy();
+    expect(isDefined(ref(false))).toBeTruthy();
+    expect(isDefined(ref({}))).toBeTruthy();
+  });
+
+  it('returns false for a ref holding null or undefined', () => {
+    expect(isDefined(ref(null))).toBeFalsy();
+    expect(isDefined(ref(undefined))).toBeFalsy();
+  });
+
+  it('treats null and undefined as equivalently undefined', () => {
+    const value = ref<number | null | undefined>(undefined);
+    expect(isDefined(value)).toBeFalsy();
+    value.value = null;
+    expect(isDefined(value)).toBeFalsy();
+    value.value = 0;
+    expect(isDefined(value)).toBeTruthy();
+  });
+
+  it('works with plain (non-ref) values', () => {
+    expect(isDefined(42)).toBeTruthy();
+    expect(isDefined('')).toBeTruthy();
+    expect(isDefined(null)).toBeFalsy();
+    expect(isDefined(undefined)).toBeFalsy();
+  });
+
+  it('works with computed refs', () => {
+    const source = ref<number | null>(null);
+    const derived = computed(() => source.value);
+    expect(isDefined(derived)).toBeFalsy();
+    source.value = 5;
+    expect(isDefined(derived)).toBeTruthy();
+  });
+
+  it('works with shallowRef', () => {
+    expect(isDefined(shallowRef(null))).toBeFalsy();
+    expect(isDefined(shallowRef('x'))).toBeTruthy();
+  });
+
+  it('narrows the type for guarded access (compile-time check)', () => {
+    const maybe = ref<{ name: string } | null>(null);
+    let name = 'fallback';
+    if (isDefined(maybe))
+      name = maybe.value.name;
+    expect(name).toBe('fallback');
+    maybe.value = { name: 'robonen' };
+    if (isDefined(maybe))
+      name = maybe.value.name;
+    expect(name).toBe('robonen');
+  });
+});
+
+describe(useIsDefined, () => {
+  it('returns a computed boolean reflecting the current value', () => {
+    const source = ref<number | null>(1);
+    const defined = useIsDefined(source);
+    expect(defined.value).toBeTruthy();
+  });
+
+  it('reacts to source changes', () => {
+    const source = ref<number | null>(null);
+    const defined = useIsDefined(source);
+    expect(defined.value).toBeFalsy();
+    source.value = 0;
+    expect(defined.value).toBeTruthy();
+    source.value = null;
+    expect(defined.value).toBeFalsy();
+  });
+
+  it('accepts a getter source', () => {
+    const source = ref<string | undefined>(undefined);
+    const defined = useIsDefined(() => source.value);
+    expect(defined.value).toBeFalsy();
+    source.value = 'ready';
+    expect(defined.value).toBeTruthy();
+  });
+
+  it('accepts a plain value source', () => {
+    expect(useIsDefined(123).value).toBeTruthy();
+    expect(useIsDefined(null).value).toBeFalsy();
+    expect(useIsDefined(undefined).value).toBeFalsy();
+  });
+
+  it('treats falsy-but-defined values as defined', () => {
+    expect(useIsDefined(0).value).toBeTruthy();
+    expect(useIsDefined('').value).toBeTruthy();
+    expect(useIsDefined(false).value).toBeTruthy();
+  });
+});
diff --git a/vue/toolkit/src/composables/utilities/isDefined/index.ts b/vue/toolkit/src/composables/utilities/isDefined/index.ts
new file mode 100644
index 0000000..59a20aa
--- /dev/null
+++ b/vue/toolkit/src/composables/utilities/isDefined/index.ts
@@ -0,0 +1,73 @@
+import { computed, toValue, unref } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';
+
+/**
+ * The result of {@link isDefined}: a plain boolean acting as a type guard.
+ */
+export type IsDefinedReturn = boolean;
+
+/**
+ * @name isDefined
+ * @category Utilities
+ * @description Type-guard that checks whether a ref's (or plain value's) current
+ * value is neither `null` nor `undefined`, narrowing the source to its
+ * `NonNullable` form. Unwraps refs with a single `unref` — no extra reactivity
+ * or watchers are created, so it is a cheap synchronous check that is fully
+ * SSR-safe. For a reactive guard that tracks changes, use {@link useIsDefined}.
+ *
+ * @param {ComputedRef<T> | Ref<T> | T} value The ref or value to test
+ * @returns {IsDefinedReturn} `true` when the unwrapped value is non-nullish
+ *
+ * @example
+ * const user = ref<User | null>(null);
+ * if (isDefined(user)) {
+ *   // `user` is now narrowed to `Ref<User>`
+ *   console.log(user.value.name);
+ * }
+ *
+ * @example
+ * const value = isDefined(maybeNumber) ? maybeNumber.value : 0;
+ *
+ * @since 0.0.15
+ */
+export function isDefined<T>(value: ComputedRef<T>): value is ComputedRef<NonNullable<T>>;
+export function isDefined<T>(value: Ref<T>): value is Ref<NonNullable<T>>;
+export function isDefined<T>(value: T): value is NonNullable<T>;
+export function isDefined<T>(value: Ref<T> | T): IsDefinedReturn {
+  const resolved = unref(value);
+  return resolved !== null && resolved !== undefined;
+}
+
+/**
+ * The result of {@link useIsDefined}: a readonly computed boolean.
+ */
+export type UseIsDefinedReturn = ComputedRef<boolean>;
+
+/**
+ * @name useIsDefined
+ * @category Utilities
+ * @description Reactive counterpart to {@link isDefined}. Returns a
+ * `ComputedRef<boolean>` that re-evaluates whenever the source ref, getter, or
+ * plain value resolves to a non-nullish value. Use this when the definedness
+ * itself needs to drive reactivity (templates, watchers, derived state); reach
+ * for the synchronous {@link isDefined} when you only need a one-off type guard.
+ *
+ * @param {MaybeRefOrGetter<T>} value The reactive source (ref, getter, or value)
+ * @returns {UseIsDefinedReturn} A computed boolean, `true` while the source is non-nullish
+ *
+ * @example
+ * const data = ref<Data | null>(null);
+ * const ready = useIsDefined(data);
+ * watch(ready, isReady => isReady && render());
+ *
+ * @example
+ * const hasResult = useIsDefined(() => store.result);
+ *
+ * @since 0.0.15
+ */
+export function useIsDefined<T>(value: MaybeRefOrGetter<T>): UseIsDefinedReturn {
+  return computed(() => {
+    const resolved = toValue(value);
+    return resolved !== null && resolved !== undefined;
+  });
+}
diff --git a/vue/toolkit/src/composables/utilities/set/demo.vue b/vue/toolkit/src/composables/utilities/set/demo.vue
new file mode 100644
index 0000000..5a8ee86
--- /dev/null
+++ b/vue/toolkit/src/composables/utilities/set/demo.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import { set } from './index';
+
+// Two-argument form: write straight to a ref.
+const volume = ref(60);
+
+function nudge(delta: number): void {
+  // set(ref, value) — equivalent to volume.value = ...
+  set(volume, Math.min(100, Math.max(0, volume.value + delta)));
+}
+
+// Three-argument form: mutate a single property of an object.
+const profile = reactive({
+  name: 'Grace Hopper',
+  status: 'online' as 'online' | 'away' | 'offline',
+});
+
+const statuses = ['online', 'away', 'offline'] as const;
+const statusDot: Record<typeof statuses[number], string> = {
+  online: 'bg-emerald-500',
+  away: 'bg-amber-500',
+  offline: 'bg-(--fg-subtle)',
+};
+
+function rename(): void {
+  const names = ['Grace Hopper', 'Ada Lovelace', 'Alan Turing', 'Katherine Johnson'];
+  const next = names[(names.indexOf(profile.name) + 1) % names.length];
+  // set(object, key, value) — equivalent to profile.name = next
+  set(profile, 'name', next);
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-5">
+    <div class="flex flex-col gap-2">
+      <div class="flex items-baseline justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">set(volume, n)</span>
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ volume }}</span>
+      </div>
+      <div class="h-2 w-full overflow-hidden rounded-full bg-(--bg-inset)">
+        <div
+          class="h-full rounded-full bg-(--accent) transition-[width] duration-200"
+          :style="{ width: `${volume}%` }"
+        />
+      </div>
+      <div class="flex gap-2">
+        <button
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="nudge(-10)"
+        >
+          −10
+        </button>
+        <button
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="nudge(10)"
+        >
+          +10
+        </button>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">set(profile, key, value)</span>
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+          <span class="size-2 rounded-full" :class="statusDot[profile.status]" />
+          {{ profile.status }}
+        </span>
+      </div>
+      <p class="font-mono text-lg font-semibold text-(--fg)">{{ profile.name }}</p>
+      <div class="flex flex-wrap gap-1.5">
+        <button
+          v-for="s in statuses"
+          :key="s"
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+          :class="profile.status === s
+            ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
+            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+          @click="set(profile, 'status', s)"
+        >
+          {{ s }}
+        </button>
+      </div>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="rename"
+      >
+        Set next name
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/utilities/set/index.test.ts b/vue/toolkit/src/composables/utilities/set/index.test.ts
new file mode 100644
index 0000000..3f3a823
--- /dev/null
+++ b/vue/toolkit/src/composables/utilities/set/index.test.ts
@@ -0,0 +1,108 @@
+import { describe, expect, it } from 'vitest';
+import { nextTick, reactive, ref, shallowRef, watch } from 'vue';
+import { set } from '.';
+
+describe(set, () => {
+  it('assigns a value to a ref', () => {
+    const count = ref(0);
+
+    set(count, 5);
+
+    expect(count.value).toBe(5);
+  });
+
+  it('overwrites an existing ref value', () => {
+    const message = ref('hello');
+
+    set(message, 'world');
+
+    expect(message.value).toBe('world');
+  });
+
+  it('assigns a value to a shallowRef', () => {
+    const state = shallowRef({ open: false });
+    const next = { open: true };
+
+    set(state, next);
+
+    expect(state.value).toBe(next);
+  });
+
+  it('triggers ref reactivity', async () => {
+    const count = ref(0);
+    let observed = 0;
+
+    watch(count, (value) => {
+      observed = value;
+    });
+    set(count, 42);
+    await nextTick();
+
+    expect(observed).toBe(42);
+  });
+
+  it('sets a property on a plain object', () => {
+    const user = { name: 'Ada', age: 36 };
+
+    set(user, 'name', 'Grace');
+
+    expect(user.name).toBe('Grace');
+    expect(user.age).toBe(36);
+  });
+
+  it('sets a property on a reactive object', async () => {
+    const user = reactive({ name: 'Ada' });
+    let observed = '';
+
+    watch(() => user.name, (value) => {
+      observed = value;
+    });
+    set(user, 'name', 'Linus');
+    await nextTick();
+
+    expect(user.name).toBe('Linus');
+    expect(observed).toBe('Linus');
+  });
+
+  it('sets an index on an array', () => {
+    const list = [10, 20, 30];
+
+    set(list, 1, 99);
+
+    expect(list).toEqual([10, 99, 30]);
+  });
+
+  it('assigns falsy values to a ref', () => {
+    const count = ref<number | null>(5);
+
+    set(count, 0);
+    expect(count.value).toBe(0);
+
+    set(count, null);
+    expect(count.value).toBeNull();
+  });
+
+  it('assigns undefined to a ref (two-argument form is detected by arity)', () => {
+    const value = ref<string | undefined>('present');
+
+    set(value, undefined);
+
+    expect(value.value).toBeUndefined();
+  });
+
+  it('sets a falsy property value on an object', () => {
+    const flags = { active: true };
+
+    set(flags, 'active', false);
+
+    expect(flags.active).toBeFalsy();
+  });
+
+  it('does not mutate other properties when setting one', () => {
+    const config = { a: 1, b: 2, c: 3 };
+
+    set(config, 'b', 20);
+
+    expect(config).toEqual({ a: 1, b: 20, c: 3 });
+  });
+});
diff --git a/vue/toolkit/src/composables/utilities/set/index.ts b/vue/toolkit/src/composables/utilities/set/index.ts
new file mode 100644
index 0000000..c182949
--- /dev/null
+++ b/vue/toolkit/src/composables/utilities/set/index.ts
@@ -0,0 +1,40 @@
+import type { Ref } from 'vue';
+
+/**
+ * @name set
+ * @category Utilities
+ * @description Shorthand setter that mirrors {@link get}. Either assigns `value` to a
+ * ref (`ref.value = value`) or assigns `value` to a single property of an object
+ * (`target[key] = value`). The arity is resolved at the type level via overloads, so
+ * both forms stay fully type-safe. Purely synchronous and side-effect free, so it is
+ * fully SSR-safe.
+ *
+ * @param {Ref<T> | O} target The ref to write to, or the object to mutate
+ * @param {T | K} valueOrKey The value to assign to the ref, or the key to mutate
+ * @param {O[K]} [value] The value to assign to `target[key]` in the three-argument form
+ * @returns {void}
+ *
+ * @example
+ * const count = ref(0);
+ * set(count, 5); // count.value === 5
+ *
+ * @example
+ * const user = reactive({ name: 'Ada' });
+ * set(user, 'name', 'Grace'); // user.name === 'Grace'
+ *
+ * @since 0.0.15
+ */
+export function set<T>(ref: Ref<T>, value: T): void;
+export function set<O extends object, K extends keyof O>(target: O, key: K, value: O[K]): void;
+export function set<O extends object, K extends keyof O>(
+  target: Ref<unknown> | O,
+  valueOrKey: K | unknown,
+  value?: O[K],
+): void {
+  if (arguments.length === 2) {
+    (target as Ref<unknown>).value = valueOrKey;
+    return;
+  }
+
+  (target as O)[valueOrKey as K] = value as O[K];
+}
diff --git a/vue/toolkit/src/composables/utilities/useEventBus/demo.vue b/vue/toolkit/src/composables/utilities/useEventBus/demo.vue
new file mode 100644
index 0000000..999823e
--- /dev/null
+++ b/vue/toolkit/src/composables/utilities/useEventBus/demo.vue
@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { useEventBus } from './index';
+import type { EventBusKey } from './index';
+
+interface ChatPayload {
+  from: string;
+  text: string;
+}
+
+// A typed key. In a real app this lives in a shared module so any component
+// can `useEventBus(chatKey)` and land on the same listener set.
+const chatKey: EventBusKey<'message'> = Symbol('demo:chat');
+
+// Two distinct calls — they observe the SAME bus because the key matches.
+const sender = useEventBus<'message', ChatPayload>(chatKey);
+const receiver = useEventBus<'message', ChatPayload>(chatKey);
+
+interface Entry extends ChatPayload {
+  id: number;
+  once?: boolean;
+}
+
+const log = ref<Entry[]>([]);
+const draft = ref('Hello from the bus!');
+let nextId = 0;
+
+onMounted(() => {
+  // Subscribe on the "receiver" side. tryOnScopeDispose unsubscribes for us.
+  receiver.on((_event, payload) => {
+    if (payload)
+      log.value.unshift({ ...payload, id: nextId++ });
+  });
+});
+
+function send(): void {
+  const text = draft.value.trim();
+  if (!text)
+    return;
+
+  sender.emit('message', { from: 'You', text });
+  draft.value = '';
+}
+
+function pingOnce(): void {
+  // once() fires for exactly one emit, then auto-unsubscribes.
+  receiver.once((_event, payload) => {
+    if (payload)
+      log.value.unshift({ ...payload, id: nextId++, once: true });
+  });
+  sender.emit('message', { from: 'System', text: 'one-shot listener fired' });
+}
+
+function reset(): void {
+  receiver.reset();
+  log.value = [];
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <div class="flex items-center gap-2">
+      <input
+        v-model="draft"
+        type="text"
+        placeholder="Type a message…"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        @keydown.enter="send"
+      >
+      <button
+        type="button"
+        class="inline-flex shrink-0 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-2 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="!draft.trim()"
+        @click="send"
+      >
+        Emit
+      </button>
+    </div>
+
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">received via bus</span>
+      <div class="flex gap-2">
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="pingOnce"
+        >
+          once()
+        </button>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          :disabled="log.length === 0"
+          @click="reset"
+        >
+          reset()
+        </button>
+      </div>
+    </div>
+
+    <div class="flex max-h-56 flex-col gap-2 overflow-y-auto rounded-xl border border-(--border) bg-(--bg-elevated) p-3">
+      <p v-if="log.length === 0" class="py-6 text-center text-sm italic text-(--fg-subtle)">
+        No events yet — emit one above.
+      </p>
+      <div
+        v-for="entry in log"
+        :key="entry.id"
+        class="flex items-center gap-2 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2"
+      >
+        <span
+          class="inline-flex shrink-0 items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-elevated) px-2 py-0.5 text-xs font-medium"
+          :class="entry.from === 'You' ? 'text-(--accent-text)' : 'text-(--fg-muted)'"
+        >
+          {{ entry.from }}
+        </span>
+        <span class="min-w-0 flex-1 truncate text-sm text-(--fg)">{{ entry.text }}</span>
+        <span
+          v-if="entry.once"
+          class="shrink-0 rounded-md border border-sky-500/30 bg-sky-500/10 px-1.5 py-0.5 text-[10px] font-semibold uppercase text-sky-600 dark:text-sky-400"
+        >
+          once
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/utilities/useEventBus/index.test.ts b/vue/toolkit/src/composables/utilities/useEventBus/index.test.ts
new file mode 100644
index 0000000..b330c90
--- /dev/null
+++ b/vue/toolkit/src/composables/utilities/useEventBus/index.test.ts
@@ -0,0 +1,201 @@
+import { describe, expect, it, vi } from 'vitest';
+import { effectScope } from 'vue';
+import { useEventBus } from '@/composables/utilities/useEventBus';
+import type { EventBusKey } from '@/composables/utilities/useEventBus';
+
+describe(useEventBus, () => {
+  it('should call listeners on emit', () => {
+    const bus = useEventBus(Symbol('emit'));
+    const listener = vi.fn();
+
+    bus.on(listener);
+    bus.emit('hello');
+
+    expect(listener).toHaveBeenCalledTimes(1);
+    expect(listener).toHaveBeenCalledWith('hello', undefined);
+  });
+
+  it('should forward event and payload', () => {
+    const bus = useEventBus<string, { id: number }>(Symbol('payload'));
+    const listener = vi.fn();
+
+    bus.on(listener);
+    bus.emit('open', { id: 7 });
+
+    expect(listener).toHaveBeenCalledWith('open', { id: 7 });
+  });
+
+  it('should support multiple listeners', () => {
+    const bus = useEventBus(Symbol('multi'));
+    const a = vi.fn();
+    const b = vi.fn();
+
+    bus.on(a);
+    bus.on(b);
+    bus.emit('x');
+
+    expect(a).toHaveBeenCalledTimes(1);
+    expect(b).toHaveBeenCalledTimes(1);
+  });
+
+  it('should remove a listener via the returned stop function', () => {
+    const bus = useEventBus(Symbol('stop'));
+    const listener = vi.fn();
+
+    const stop = bus.on(listener);
+    bus.emit('a');
+    stop();
+    bus.emit('b');
+
+    expect(listener).toHaveBeenCalledTimes(1);
+    expect(listener).toHaveBeenCalledWith('a', undefined);
+  });
+
+  it('should remove a listener via off', () => {
+    const bus = useEventBus(Symbol('off'));
+    const listener = vi.fn();
+
+    bus.on(listener);
+    bus.off(listener);
+    bus.emit('a');
+
+    expect(listener).not.toHaveBeenCalled();
+  });
+
+  it('should be a no-op when off is called for an unknown key', () => {
+    const bus = useEventBus(Symbol('unknown'));
+    const listener = vi.fn();
+
+    expect(() => bus.off(listener)).not.toThrow();
+  });
+
+  it('should fire once listeners exactly once', () => {
+    const bus = useEventBus(Symbol('once'));
+    const listener = vi.fn();
+
+    bus.once(listener);
+    bus.emit('a');
+    bus.emit('b');
+
+    expect(listener).toHaveBeenCalledTimes(1);
+    expect(listener).toHaveBeenCalledWith('a', undefined);
+  });
+
+  it('should allow stopping a once listener before it fires', () => {
+    const bus = useEventBus(Symbol('once-stop'));
+    const listener = vi.fn();
+
+    const stop = bus.once(listener);
+    stop();
+    bus.emit('a');
+
+    expect(listener).not.toHaveBeenCalled();
+  });
+
+  it('should remove all listeners on reset', () => {
+    const bus = useEventBus(Symbol('reset'));
+    const a = vi.fn();
+    const b = vi.fn();
+
+    bus.on(a);
+    bus.on(b);
+    bus.reset();
+    bus.emit('x');
+
+    expect(a).not.toHaveBeenCalled();
+    expect(b).not.toHaveBeenCalled();
+  });
+
+  it('should share listeners across buses with the same key', () => {
+    const key: EventBusKey<string> = Symbol('shared');
+    const busA = useEventBus(key);
+    const busB = useEventBus(key);
+    const listener = vi.fn();
+
+    busA.on(listener);
+    busB.emit('cross');
+
+    expect(listener).toHaveBeenCalledWith('cross', undefined);
+  });
+
+  it('should isolate listeners across different keys', () => {
+    const listenerA = vi.fn();
+    const listenerB = vi.fn();
+
+    useEventBus(Symbol('iso-a')).on(listenerA);
+    useEventBus(Symbol('iso-b')).on(listenerB);
+    useEventBus(Symbol('iso-a-emit'));
+
+    // Emit on a fresh, unrelated key
+    useEventBus(Symbol('iso-c')).emit('x');
+
+    expect(listenerA).not.toHaveBeenCalled();
+    expect(listenerB).not.toHaveBeenCalled();
+  });
+
+  it('should support string and number identifiers', () => {
+    const strListener = vi.fn();
+    const numListener = vi.fn();
+
+    useEventBus('string-key').on(strListener);
+    useEventBus(42).on(numListener);
+
+    useEventBus('string-key').emit('s');
+    useEventBus(42).emit('n');
+
+    expect(strListener).toHaveBeenCalledWith('s', undefined);
+    expect(numListener).toHaveBeenCalledWith('n', undefined);
+  });
+
+  it('should not throw when emitting with no listeners', () => {
+    const bus = useEventBus(Symbol('empty'));
+
+    expect(() => bus.emit('x')).not.toThrow();
+  });
+
+  it('should snapshot listeners so emit is stable against self-removal', () => {
+    const bus = useEventBus(Symbol('snapshot'));
+    const order: string[] = [];
+
+    const stopFirst = bus.on(() => {
+      order.push('first');
+      stopFirst();
+    });
+    bus.on(() => order.push('second'));
+
+    bus.emit('x');
+
+    expect(order).toEqual(['first', 'second']);
+  });
+
+  it('should auto-unsubscribe listeners when the owning scope is disposed', () => {
+    const key = Symbol('scope');
+    const listener = vi.fn();
+    const scope = effectScope();
+
+    scope.run(() => {
+      const bus = useEventBus(key);
+      bus.on(listener);
+    });
+
+    useEventBus(key).emit('before');
+    expect(listener).toHaveBeenCalledTimes(1);
+
+    scope.stop();
+
+    useEventBus(key).emit('after');
+    expect(listener).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not register scope cleanup when called outside a scope', () => {
+    // Running outside any effectScope must still work and not throw.
+    const bus = useEventBus(Symbol('no-scope'));
+    const listener = vi.fn();
+
+    const stop = bus.on(listener);
+    bus.emit('x');
+    stop();
+
+    expect(listener).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/vue/toolkit/src/composables/utilities/useEventBus/index.ts b/vue/toolkit/src/composables/utilities/useEventBus/index.ts
new file mode 100644
index 0000000..953ecb6
--- /dev/null
+++ b/vue/toolkit/src/composables/utilities/useEventBus/index.ts
@@ -0,0 +1,167 @@
+import type { VoidFunction } from '@robonen/stdlib';
+import { PubSub } from '@robonen/stdlib';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
+
+/**
+ * A listener invoked when its bus emits. Receives the emitted `event`
+ * value and an optional `payload`.
+ */
+export type EventBusListener<T = unknown, P = any>
+  = (event: T, payload?: P) => void;
+
+/**
+ * A branded `Symbol` that carries the bus' event type so a typed key can be
+ * shared across modules without re-declaring generics at every call site.
+ *
+ * @example
+ * const fooKey: EventBusKey<{ id: number }> = Symbol('foo');
+ * const bus = useEventBus(fooKey); // inferred as UseEventBusReturn<{ id: number }>
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-wrapper-object-types
+export interface EventBusKey<T> extends Symbol {}
+
+/**
+ * Anything usable to identify a shared bus. Buses with an equal identifier
+ * share their listener set, regardless of how many times `useEventBus` runs.
+ */
+export type EventBusIdentifier<T = unknown>
+  = EventBusKey<T> | string | number;
+
+export interface UseEventBusReturn<T, P> {
+  /**
+   * Subscribe to the bus. Every `emit` invokes the listener.
+   *
+   * @param {EventBusListener<T, P>} listener The listener to register
+   * @returns {VoidFunction} A stop function that removes this listener
+   */
+  on: (listener: EventBusListener<T, P>) => VoidFunction;
+
+  /**
+   * Subscribe to the bus for a single emit, then auto-unsubscribe.
+   *
+   * @param {EventBusListener<T, P>} listener The listener to register
+   * @returns {VoidFunction} A stop function that removes this listener early
+   */
+  once: (listener: EventBusListener<T, P>) => VoidFunction;
+
+  /**
+   * Remove a previously registered listener.
+   *
+   * @param {EventBusListener<T, P>} listener The listener to remove
+   */
+  off: (listener: EventBusListener<T, P>) => void;
+
+  /**
+   * Emit an event to every listener on this bus.
+   *
+   * @param {T} [event] The value sent to listeners
+   * @param {P} [payload] An optional secondary payload
+   */
+  emit: (event?: T, payload?: P) => void;
+
+  /**
+   * Remove every listener on this bus.
+   */
+  reset: () => void;
+}
+
+/**
+ * The single internal channel name every bus multiplexes onto. Each
+ * identifier owns its own {@link PubSub}, so the channel can be constant.
+ */
+const CHANNEL = '*';
+
+/**
+ * Global registry of buses keyed by identifier. Shared at module scope so
+ * separate `useEventBus(sameKey)` calls observe the same listener set. This is
+ * lazily populated, side-effect-free at import time, and SSR-safe (no global
+ * access — a `Map` works identically on server and client).
+ */
+const registry = new Map<EventBusIdentifier<any>, PubSub<{ '*': EventBusListener }>>();
+
+/**
+ * @name useEventBus
+ * @category Utilities
+ * @description A typed, SSR-safe event bus. Calls sharing an identifier share
+ * listeners, giving cross-component (and cross-module) communication without
+ * prop drilling or provide/inject. Backed by stdlib `PubSub` for stable
+ * snapshot-based emit semantics, and auto-removes the current scope's
+ * listeners on dispose so components never leak subscriptions.
+ *
+ * @template T The event value type
+ * @template P The optional payload type
+ * @param {EventBusIdentifier<T>} key Identifier shared across buses; equal keys share listeners
+ * @returns {UseEventBusReturn<T, P>} The bus controls: `on`, `once`, `off`, `emit`, `reset`
+ *
+ * @example
+ * // shared key (typically exported from a module)
+ * const busKey: EventBusKey<string> = Symbol('messages');
+ *
+ * // component A
+ * const bus = useEventBus(busKey);
+ * const unsubscribe = bus.on((msg) => console.log(msg));
+ *
+ * // component B
+ * useEventBus(busKey).emit('hello');
+ *
+ * @example
+ * // payloads and one-shot listeners
+ * const bus = useEventBus<'open' | 'close', { id: number }>('modal');
+ * bus.once((event, payload) => console.log(event, payload?.id));
+ * bus.emit('open', { id: 1 });
+ *
+ * @since 0.0.15
+ */
+export function useEventBus<T = unknown, P = any>(
+  key: EventBusIdentifier<T>,
+): UseEventBusReturn<T, P> {
+  function getBus(): PubSub<{ '*': EventBusListener }> {
+    let bus = registry.get(key);
+
+    if (!bus) {
+      bus = new PubSub();
+      registry.set(key, bus);
+    }
+
+    return bus;
+  }
+
+  function off(listener: EventBusListener<T, P>): void {
+    const bus = registry.get(key);
+
+    if (!bus)
+      return;
+
+    bus.off(CHANNEL, listener as EventBusListener);
+  }
+
+  function on(listener: EventBusListener<T, P>): VoidFunction {
+    getBus().on(CHANNEL, listener as EventBusListener);
+
+    const stop = (): void => off(listener);
+
+    // Auto-unsubscribe when the owning scope is disposed.
+    tryOnScopeDispose(stop);
+
+    return stop;
+  }
+
+  function once(listener: EventBusListener<T, P>): VoidFunction {
+    function wrapper(event: T, payload?: P): void {
+      off(wrapper);
+      listener(event, payload);
+    }
+
+    return on(wrapper);
+  }
+
+  function emit(event?: T, payload?: P): void {
+    registry.get(key)?.emit(CHANNEL, event as unknown, payload);
+  }
+
+  function reset(): void {
+    registry.delete(key);
+  }
+
+  return { on, once, off, emit, reset };
+}
diff --git a/vue/toolkit/src/composables/utilities/useMemoize/demo.vue b/vue/toolkit/src/composables/utilities/useMemoize/demo.vue
new file mode 100644
index 0000000..d8e3a0f
--- /dev/null
+++ b/vue/toolkit/src/composables/utilities/useMemoize/demo.vue
@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useMemoize } from './index';
+
+interface Result {
+  value: number;
+  computedAt: string;
+}
+
+// Track how many times the resolver actually runs, so cache hits are visible.
+const runs = ref(0);
+
+// An "expensive" computation. With useMemoize, a repeated input returns the
+// cached Result instantly and the resolver does NOT run again.
+const fib = useMemoize((n: number): Result => {
+  runs.value++;
+  let a = 0;
+  let b = 1;
+  for (let i = 0; i < n; i++)
+    [a, b] = [b, a + b];
+
+  return {
+    value: a,
+    computedAt: new Date().toLocaleTimeString(),
+  };
+}, { getKey: n => n });
+
+const input = ref(20);
+
+interface LogEntry {
+  id: number;
+  n: number;
+  value: number;
+  hit: boolean;
+  computedAt: string;
+}
+
+const history = ref<LogEntry[]>([]);
+let nextId = 0;
+
+// Reactive cache size — reads the shallowReactive cache, so it stays live.
+const cacheSize = computed(() => (fib.cache as Map<number, Result>).size);
+
+function compute(force = false): void {
+  const before = runs.value;
+  const result = force ? fib.load(input.value) : fib(input.value);
+  const hit = !force && runs.value === before;
+
+  history.value.unshift({
+    id: nextId++,
+    n: input.value,
+    value: result.value,
+    hit,
+    computedAt: result.computedAt,
+  });
+}
+
+function evictCurrent(): void {
+  fib.delete(input.value);
+}
+
+function clearAll(): void {
+  fib.clear();
+  history.value = [];
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <div class="grid grid-cols-2 gap-3">
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">resolver runs</p>
+        <p class="mt-1 font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ runs }}</p>
+      </div>
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">cached keys</p>
+        <p class="mt-1 font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ cacheSize }}</p>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">fib(n)</span>
+        <span class="font-mono text-sm tabular-nums text-(--fg-muted)">key: {{ fib.generateKey(input) }}</span>
+      </div>
+      <div class="flex items-center gap-3">
+        <input
+          v-model.number="input"
+          type="range"
+          min="0"
+          max="40"
+          class="h-2 flex-1 cursor-pointer appearance-none rounded-full bg-(--bg-inset) accent-(--accent)"
+        >
+        <span class="w-8 text-right font-mono text-sm tabular-nums text-(--fg)">{{ input }}</span>
+      </div>
+    </div>
+
+    <div class="flex flex-wrap gap-2">
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="compute()"
+      >
+        Compute
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="compute(true)"
+      >
+        load (force)
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="evictCurrent"
+      >
+        delete(n)
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="cacheSize === 0 && history.length === 0"
+        @click="clearAll"
+      >
+        clear
+      </button>
+    </div>
+
+    <div class="flex max-h-44 flex-col gap-2 overflow-y-auto rounded-xl border border-(--border) bg-(--bg-elevated) p-3">
+      <p v-if="history.length === 0" class="py-5 text-center text-sm italic text-(--fg-subtle)">
+        Compute a value — repeat the same n to see a cache hit.
+      </p>
+      <div
+        v-for="entry in history"
+        :key="entry.id"
+        class="flex items-center gap-2 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2 font-mono text-sm tabular-nums text-(--fg)"
+      >
+        <span class="text-(--fg-subtle)">fib({{ entry.n }})</span>
+        <span class="text-(--fg-subtle)">=</span>
+        <span class="min-w-0 flex-1 truncate text-(--accent-text)">{{ entry.value }}</span>
+        <span class="text-xs text-(--fg-subtle)">{{ entry.computedAt }}</span>
+        <span
+          class="shrink-0 rounded-md border px-1.5 py-0.5 text-[10px] font-semibold uppercase"
+          :class="entry.hit
+            ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+            : 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'"
+        >
+          {{ entry.hit ? 'hit' : 'miss' }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/utilities/useMemoize/index.test.ts b/vue/toolkit/src/composables/utilities/useMemoize/index.test.ts
new file mode 100644
index 0000000..7e05030
--- /dev/null
+++ b/vue/toolkit/src/composables/utilities/useMemoize/index.test.ts
@@ -0,0 +1,216 @@
+import { describe, expect, it, vi } from 'vitest';
+import { computed, effectScope, nextTick } from 'vue';
+import type { ComputedRef } from 'vue';
+import { useMemoize } from '.';
+import type { UseMemoizeCache } from '.';
+
+describe(useMemoize, () => {
+  it('computes once and returns the cached result on subsequent calls', () => {
+    const fn = vi.fn((n: number) => n * 2);
+    const memoized = useMemoize(fn);
+
+    expect(memoized(2)).toBe(4);
+    expect(memoized(2)).toBe(4);
+    expect(memoized(3)).toBe(6);
+
+    expect(fn).toHaveBeenCalledTimes(2);
+  });
+
+  it('distinguishes calls by serialized arguments', () => {
+    const fn = vi.fn((a: number, b: number) => a + b);
+    const memoized = useMemoize(fn);
+
+    memoized(1, 2);
+    memoized(1, 2);
+    memoized(2, 1);
+
+    expect(fn).toHaveBeenCalledTimes(2);
+  });
+
+  it('matches object arguments by value via the default JSON key', () => {
+    const fn = vi.fn((o: { id: number }) => o.id);
+    const memoized = useMemoize(fn);
+
+    expect(memoized({ id: 1 })).toBe(1);
+    // Different object reference, same shape -> cache hit.
+    expect(memoized({ id: 1 })).toBe(1);
+
+    expect(fn).toHaveBeenCalledOnce();
+  });
+
+  describe('async resolver', () => {
+    it('caches the returned promise so repeated calls share one invocation', async () => {
+      const fn = vi.fn(async (id: number) => `user-${id}`);
+      const memoized = useMemoize(fn);
+
+      const p1 = memoized(1);
+      const p2 = memoized(1);
+
+      expect(p1).toBe(p2);
+      await expect(p1).resolves.toBe('user-1');
+      expect(fn).toHaveBeenCalledOnce();
+    });
+  });
+
+  describe('load', () => {
+    it('recomputes and overwrites the cache, bypassing a hit', () => {
+      let value = 10;
+      const fn = vi.fn(() => value);
+      const memoized = useMemoize(fn);
+
+      expect(memoized()).toBe(10);
+      value = 20;
+      // Plain read is still cached.
+      expect(memoized()).toBe(10);
+      // load forces a recompute and updates the cache.
+      expect(memoized.load()).toBe(20);
+      expect(memoized()).toBe(20);
+
+      expect(fn).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe('delete', () => {
+    it('evicts a single cached entry', () => {
+      const fn = vi.fn((n: number) => n * n);
+      const memoized = useMemoize(fn);
+
+      memoized(2);
+      memoized(3);
+      memoized.delete(2);
+
+      memoized(2); // recompute
+      memoized(3); // still cached
+
+      expect(fn).toHaveBeenCalledTimes(3);
+    });
+  });
+
+  describe('clear', () => {
+    it('drops every cached entry', () => {
+      const fn = vi.fn((n: number) => n + 1);
+      const memoized = useMemoize(fn);
+
+      memoized(1);
+      memoized(2);
+      memoized.clear();
+      memoized(1);
+      memoized(2);
+
+      expect(fn).toHaveBeenCalledTimes(4);
+    });
+  });
+
+  describe('generateKey', () => {
+    it('produces the same key the cache uses, without touching the cache', () => {
+      const fn = vi.fn((a: number, b: number) => a + b);
+      const memoized = useMemoize(fn);
+
+      const key = memoized.generateKey(1, 2);
+      expect(key).toBe(JSON.stringify([1, 2]));
+      expect(fn).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('getKey option', () => {
+    it('uses the custom key resolver for cache identity', () => {
+      const fn = vi.fn((o: { id: number; name: string }) => o.name);
+      const memoized = useMemoize(fn, { getKey: o => o.id });
+
+      memoized({ id: 1, name: 'a' });
+      // Same id, different name -> cache hit because key is the id only.
+      const second = memoized({ id: 1, name: 'b' });
+
+      expect(second).toBe('a');
+      expect(memoized.generateKey({ id: 7, name: 'x' })).toBe(7);
+      expect(fn).toHaveBeenCalledOnce();
+    });
+  });
+
+  describe('custom cache backend', () => {
+    it('routes get/set/has/delete/clear through the supplied cache', () => {
+      const store = new Map<PropertyKey, number>();
+      const cache: UseMemoizeCache<PropertyKey, number> = {
+        get: k => store.get(k),
+        set: (k, v) => void store.set(k, v),
+        has: k => store.has(k),
+        delete: k => void store.delete(k),
+        clear: () => store.clear(),
+      };
+      const fn = vi.fn((n: number) => n * 3);
+      const memoized = useMemoize(fn, { cache, getKey: n => n });
+
+      expect(memoized(4)).toBe(12);
+      expect(memoized(4)).toBe(12);
+      expect(store.get(4)).toBe(12);
+      expect(fn).toHaveBeenCalledOnce();
+
+      memoized.delete(4);
+      expect(store.has(4)).toBeFalsy();
+
+      memoized(4);
+      memoized.clear();
+      expect(store.size).toBe(0);
+    });
+  });
+
+  describe('reactivity', () => {
+    it('re-evaluates a computed reading the cache as entries change', async () => {
+      const scope = effectScope();
+      let size!: ComputedRef<number>;
+      let memoized!: ReturnType<typeof useMemoize<number, [number]>>;
+
+      scope.run(() => {
+        memoized = useMemoize((n: number) => n * n, { getKey: n => n });
+        size = computed(() => (memoized.cache as unknown as Map<number, number>).size);
+      });
+
+      expect(size.value).toBe(0);
+
+      memoized(2);
+      await nextTick();
+      expect(size.value).toBe(1);
+
+      memoized(3);
+      await nextTick();
+      expect(size.value).toBe(2);
+
+      memoized.clear();
+      await nextTick();
+      expect(size.value).toBe(0);
+
+      scope.stop();
+    });
+  });
+
+  describe('SSR safety', () => {
+    it('works without any browser globals (no window/document/navigator access)', () => {
+      const win = globalThis.window;
+      const doc = globalThis.document;
+      const nav = globalThis.navigator;
+
+      try {
+        // Simulate a server environment: globals absent.
+        // @ts-expect-error force-delete for the test
+        delete globalThis.window;
+        // @ts-expect-error force-delete for the test
+        delete globalThis.document;
+        // @ts-expect-error force-delete for the test
+        delete globalThis.navigator;
+
+        const fn = vi.fn((n: number) => n + 100);
+        const memoized = useMemoize(fn);
+
+        expect(memoized(1)).toBe(101);
+        expect(memoized(1)).toBe(101);
+        expect(memoized.generateKey(1)).toBe(JSON.stringify([1]));
+        expect(fn).toHaveBeenCalledOnce();
+      }
+      finally {
+        globalThis.window = win;
+        globalThis.document = doc;
+        globalThis.navigator = nav;
+      }
+    });
+  });
+});
diff --git a/vue/toolkit/src/composables/utilities/useMemoize/index.ts b/vue/toolkit/src/composables/utilities/useMemoize/index.ts
new file mode 100644
index 0000000..a8c8aa2
--- /dev/null
+++ b/vue/toolkit/src/composables/utilities/useMemoize/index.ts
@@ -0,0 +1,174 @@
+import { shallowReactive } from 'vue';
+import { memoize } from '@robonen/stdlib';
+
+/**
+ * The type of the key used to index the cache. Defaults to a serialized string
+ * but may be any value when a custom `getKey` is supplied.
+ */
+export type MemoizeCacheKey = PropertyKey;
+
+/**
+ * Pluggable cache backend. Any object implementing this shape can be supplied
+ * via `options.cache` to control storage (e.g. an LRU cache). When omitted a
+ * plain `Map` is used and the heavy lifting is delegated to `@robonen/stdlib`'s
+ * `memoize`.
+ */
+export interface UseMemoizeCache<Key, Value> {
+  /**
+   * Read the cached value for `key`, or `undefined` when absent.
+   */
+  get: (key: Key) => Value | undefined;
+
+  /**
+   * Store `value` under `key`.
+   */
+  set: (key: Key, value: Value) => void;
+
+  /**
+   * Whether a value is cached for `key`.
+   */
+  has: (key: Key) => boolean;
+
+  /**
+   * Drop the cached value for `key`.
+   */
+  delete: (key: Key) => void;
+
+  /**
+   * Drop every cached value.
+   */
+  clear: () => void;
+}
+
+export interface UseMemoizeOptions<Result, Args extends unknown[]> {
+  /**
+   * Derive the cache key from the call arguments. When omitted the arguments
+   * are serialized with `JSON.stringify`, which matches by value rather than by
+   * reference.
+   *
+   * @default (...args) => JSON.stringify(args)
+   */
+  getKey?: (...args: Args) => MemoizeCacheKey;
+
+  /**
+   * A custom cache backend. When supplied it is wrapped in `shallowReactive`
+   * so reads inside effects re-run as the cache mutates.
+   *
+   * @default new Map()
+   */
+  cache?: UseMemoizeCache<MemoizeCacheKey, Result>;
+}
+
+export interface UseMemoizeReturn<Result, Args extends unknown[]> {
+  /**
+   * Return the cached result for `args`, computing and caching it on a miss.
+   */
+  (...args: Args): Result;
+
+  /**
+   * Recompute the result for `args` and overwrite the cache, bypassing any hit.
+   * Use this to refresh stale data.
+   */
+  load: (...args: Args) => Result;
+
+  /**
+   * Drop the cached result for `args`.
+   */
+  delete: (...args: Args) => void;
+
+  /**
+   * Drop every cached result.
+   */
+  clear: () => void;
+
+  /**
+   * Compute the cache key for `args` without touching the cache.
+   */
+  generateKey: (...args: Args) => MemoizeCacheKey;
+
+  /**
+   * The reactive cache backend. Mutations are tracked, so reading from it
+   * inside a `computed`/`watchEffect` re-evaluates as entries change.
+   */
+  cache: UseMemoizeCache<MemoizeCacheKey, Result>;
+}
+
+const defaultKey = (...args: unknown[]): MemoizeCacheKey => JSON.stringify(args);
+
+/**
+ * @name useMemoize
+ * @category Utilities
+ * @description Cache the result of a (possibly async) function by its arguments,
+ * exposing a reactive cache and explicit `load`/`delete`/`clear`/`generateKey`
+ * controls. When no custom `cache` is supplied the default `Map` path delegates
+ * to `@robonen/stdlib`'s `memoize` for the get-or-compute core and is wrapped in
+ * `shallowReactive` so cache reads inside effects stay live. A custom cache
+ * backend (e.g. an LRU) can be plugged in via `options.cache`. SSR-safe: no
+ * browser globals are touched.
+ *
+ * @param {(...args: Args) => Result} resolver The function whose results are cached (sync or async)
+ * @param {UseMemoizeOptions<Result, Args>} [options] Custom `getKey` and/or `cache` backend
+ * @returns {UseMemoizeReturn<Result, Args>} A callable memoized function with `load`, `delete`, `clear`, `generateKey`, and the reactive `cache`
+ *
+ * @example
+ * const getUser = useMemoize(async (id: number) => fetch(`/users/${id}`).then(r => r.json()));
+ * const a = await getUser(1); // network call
+ * const b = await getUser(1); // cached, same promise
+ * await getUser.load(1);      // force refresh
+ * getUser.delete(1);          // evict one
+ * getUser.clear();            // evict all
+ *
+ * @example
+ * // Custom key + reactive cache size in a computed
+ * const square = useMemoize((n: number) => n * n, { getKey: n => n });
+ * const size = computed(() => (square.cache as Map<number, number>).size);
+ *
+ * @since 0.0.15
+ */
+export function useMemoize<Result, Args extends unknown[]>(
+  resolver: (...args: Args) => Result,
+  options?: UseMemoizeOptions<Result, Args>,
+): UseMemoizeReturn<Result, Args> {
+  const generateKey = (options?.getKey ?? defaultKey) as (...args: Args) => MemoizeCacheKey;
+
+  // Default path: reuse stdlib `memoize` to build the typed backing `Map` (and
+  // its key-resolver wiring). Custom backends skip this. Either way the cache is
+  // wrapped in `shallowReactive` and the get-or-compute runs *through* the proxy
+  // so reads inside effects track mutations — stdlib's own callable writes to the
+  // raw Map and would bypass reactivity, so we drive the proxy ourselves.
+  const cache = shallowReactive(
+    options?.cache ?? memoize(resolver as (...a: Args) => Result, generateKey).cache,
+  ) as UseMemoizeCache<MemoizeCacheKey, Result>;
+
+  const load = (...args: Args): Result => {
+    const key = generateKey(...args);
+    const result = resolver(...args);
+    cache.set(key, result);
+    return result;
+  };
+
+  const get = (...args: Args): Result => {
+    const key = generateKey(...args);
+
+    if (cache.has(key))
+      return cache.get(key) as Result;
+
+    return load(...args);
+  };
+
+  const remove = (...args: Args): void => {
+    cache.delete(generateKey(...args));
+  };
+
+  const clear = (): void => {
+    cache.clear();
+  };
+
+  return Object.assign(get, {
+    load,
+    delete: remove,
+    clear,
+    generateKey,
+    cache,
+  }) as UseMemoizeReturn<Result, Args>;
+}
diff --git a/vue/toolkit/src/composables/utilities/useSupported/demo.vue b/vue/toolkit/src/composables/utilities/useSupported/demo.vue
new file mode 100644
index 0000000..9e438e6
--- /dev/null
+++ b/vue/toolkit/src/composables/utilities/useSupported/demo.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useSupported } from './index';
+
+// Probe a handful of real browser APIs. Each feature is a guarded getter so
+// useSupported can run during SSR without ever touching `window` on the server.
+const features = [
+  { name: 'IntersectionObserver', test: () => 'IntersectionObserver' in window },
+  { name: 'ResizeObserver', test: () => 'ResizeObserver' in window },
+  { name: 'Clipboard API', test: () => 'clipboard' in navigator },
+  { name: 'Web Share', test: () => 'share' in navigator },
+  { name: 'Geolocation', test: () => 'geolocation' in navigator },
+  { name: 'EyeDropper', test: () => 'EyeDropper' in window },
+];
+
+const checks = features.map(f => ({ name: f.name, supported: useSupported(f.test) }));
+
+const supportedCount = computed(() => checks.filter(c => c.supported.value).length);
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Browser features</span>
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+          {{ supportedCount }} / {{ checks.length }} available
+        </span>
+      </div>
+
+      <ul class="flex flex-col gap-1.5">
+        <li
+          v-for="check in checks"
+          :key="check.name"
+          class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2 text-sm"
+        >
+          <span class="font-mono text-(--fg)">{{ check.name }}</span>
+          <span
+            v-if="check.supported.value"
+            class="inline-flex items-center gap-1.5 text-xs font-medium text-emerald-600 dark:text-emerald-400"
+          >
+            <span class="size-1.5 rounded-full bg-emerald-500" />
+            Supported
+          </span>
+          <span
+            v-else
+            class="inline-flex items-center gap-1.5 text-xs font-medium text-(--fg-subtle)"
+          >
+            <span class="size-1.5 rounded-full bg-(--border-strong)" />
+            Unavailable
+          </span>
+        </li>
+      </ul>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Each check is SSR-safe: the result is <span class="font-mono text-(--fg-muted)">false</span> during
+      server render and resolves on the client after mount.
+    </p>
+  </div>
+</template>
diff --git a/web/vue/src/composables/browser/useSupported/index.test.ts b/vue/toolkit/src/composables/utilities/useSupported/index.test.ts
similarity index 53%
rename from web/vue/src/composables/browser/useSupported/index.test.ts
rename to vue/toolkit/src/composables/utilities/useSupported/index.test.ts
index 7a0efd2..817dda1 100644
--- a/web/vue/src/composables/browser/useSupported/index.test.ts
+++ b/vue/toolkit/src/composables/utilities/useSupported/index.test.ts
@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue';
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { useSupported } from '.';
 import { mount } from '@vue/test-utils';
 
@@ -11,27 +11,27 @@ const ComponentStub = defineComponent({
     },
   },
   setup(props) {
-      const isSupported = useSupported(() => props.location in globalThis);
-      
-      return { isSupported };
+    const isSupported = useSupported(() => props.location in globalThis);
+
+    return { isSupported };
   },
   template: `<div>{{ isSupported }}</div>`,
 });
 
 describe(useSupported, () => {
   it('return whether the feature is supported', async () => {
-      const component = mount(ComponentStub);
+    const component = mount(ComponentStub);
 
-      expect(component.text()).toBe('true');
+    expect(component.text()).toBe('true');
   });
 
   it('return whether the feature is not supported', async () => {
-      const component = mount(ComponentStub, {
-        props: {
-          location: 'unsupported',
-        },
-      });
+    const component = mount(ComponentStub, {
+      props: {
+        location: 'unsupported',
+      },
+    });
 
-      expect(component.text()).toBe('false');
+    expect(component.text()).toBe('false');
   });
-});
\ No newline at end of file
+});
diff --git a/web/vue/src/composables/browser/useSupported/index.ts b/vue/toolkit/src/composables/utilities/useSupported/index.ts
similarity index 68%
rename from web/vue/src/composables/browser/useSupported/index.ts
rename to vue/toolkit/src/composables/utilities/useSupported/index.ts
index 9609cb1..891c655 100644
--- a/web/vue/src/composables/browser/useSupported/index.ts
+++ b/vue/toolkit/src/composables/utilities/useSupported/index.ts
@@ -3,28 +3,27 @@ import { useMounted } from '@/composables/lifecycle/useMounted';
 
 /**
  * @name useSupported
- * @category Browser
+ * @category Utilities
  * @description SSR-friendly way to check if a feature is supported
- * 
+ *
  * @param {Function} feature The feature to check for support
  * @returns {ComputedRef<boolean>} Whether the feature is supported
- * 
+ *
  * @example
  * const isSupported = useSupported(() => 'IntersectionObserver' in window);
- * 
+ *
  * @example
  * const isSupported = useSupported(() => 'ResizeObserver' in window);
- * 
+ *
  * @since 0.0.1
  */
 export function useSupported(feature: () => unknown) {
-    const isMounted = useMounted();
+  const isMounted = useMounted();
 
-    return computed(() => {
-      // add reactive dependency on isMounted
-      // eslint-disable-next-line no-unused-expressions
-      isMounted.value;
+  return computed(() => {
+    // Touch isMounted to register it as a reactive dependency
+    void isMounted.value;
 
-      return Boolean(feature());
-    });
-}
\ No newline at end of file
+    return Boolean(feature());
+  });
+}
diff --git a/vue/toolkit/src/composables/watch/index.ts b/vue/toolkit/src/composables/watch/index.ts
new file mode 100644
index 0000000..481e32f
--- /dev/null
+++ b/vue/toolkit/src/composables/watch/index.ts
@@ -0,0 +1,7 @@
+export * from './until';
+export * from './watchDebounced';
+export * from './watchIgnorable';
+export * from './watchOnce';
+export * from './watchPausable';
+export * from './watchThrottled';
+export * from './whenever';
diff --git a/vue/toolkit/src/composables/watch/until/demo.vue b/vue/toolkit/src/composables/watch/until/demo.vue
new file mode 100644
index 0000000..6dd41e8
--- /dev/null
+++ b/vue/toolkit/src/composables/watch/until/demo.vue
@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { until } from './index';
+
+// A small game: nudge the value toward a target, and `until` resolves a promise
+// the moment the source matches — no manual watcher teardown required.
+const TARGET = 7;
+
+const count = ref(0);
+const status = ref<'idle' | 'waiting' | 'reached' | 'timeout'>('idle');
+const log = ref<string[]>([]);
+
+function push(message: string) {
+  log.value = [message, ...log.value].slice(0, 4);
+}
+
+async function awaitTarget() {
+  status.value = 'waiting';
+  push(`Waiting for count === ${TARGET} (3s timeout)…`);
+
+  try {
+    const value = await until(count).toBe(TARGET, { timeout: 3000, throwOnTimeout: true });
+    status.value = 'reached';
+    push(`Resolved! count reached ${value}.`);
+  }
+  catch {
+    status.value = 'timeout';
+    push('Timed out before reaching the target.');
+  }
+}
+
+async function awaitChanges() {
+  status.value = 'waiting';
+  push('Waiting for 3 changes via changedTimes(3)…');
+  const value = await until(count).changedTimes(3);
+  status.value = 'reached';
+  push(`Source changed 3 times, now ${value}.`);
+}
+
+function reset() {
+  count.value = 0;
+  status.value = 'idle';
+  log.value = [];
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Live source</span>
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+          target = {{ TARGET }}
+        </span>
+      </div>
+
+      <div class="flex items-center justify-between gap-3">
+        <button
+          type="button"
+          aria-label="Decrement"
+          class="inline-flex items-center justify-center rounded-lg border border-(--border) bg-(--bg-elevated) size-11 text-lg font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="count--"
+        >
+          −
+        </button>
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ count }}</span>
+        <button
+          type="button"
+          aria-label="Increment"
+          class="inline-flex items-center justify-center rounded-lg border border-transparent bg-(--accent) size-11 text-lg font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+          @click="count++"
+        >
+          +
+        </button>
+      </div>
+
+      <div class="grid grid-cols-2 gap-2">
+        <button
+          type="button"
+          :disabled="status === 'waiting'"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          @click="awaitTarget"
+        >
+          await toBe({{ TARGET }})
+        </button>
+        <button
+          type="button"
+          :disabled="status === 'waiting'"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          @click="awaitChanges"
+        >
+          changedTimes(3)
+        </button>
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex flex-col gap-1.5">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Promise log</span>
+        <span
+          class="text-xs font-medium"
+          :class="{
+            'text-(--fg-subtle)': status === 'idle',
+            'text-amber-600 dark:text-amber-400': status === 'waiting',
+            'text-emerald-600 dark:text-emerald-400': status === 'reached',
+            'text-red-600 dark:text-red-400': status === 'timeout',
+          }"
+        >{{ status }}</span>
+      </div>
+      <p v-if="!log.length" class="font-mono text-xs text-(--fg-subtle)">
+        Press a button, then change the value above.
+      </p>
+      <p
+        v-for="(line, i) in log"
+        v-else
+        :key="i"
+        class="font-mono text-xs text-(--fg)"
+        :class="{ 'opacity-50': i > 0 }"
+      >
+        {{ line }}
+      </p>
+    </div>
+
+    <button
+      type="button"
+      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+      @click="reset"
+    >
+      Reset
+    </button>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/watch/until/index.test.ts b/vue/toolkit/src/composables/watch/until/index.test.ts
new file mode 100644
index 0000000..43df96e
--- /dev/null
+++ b/vue/toolkit/src/composables/watch/until/index.test.ts
@@ -0,0 +1,216 @@
+import { describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, ref } from 'vue';
+import { until } from '.';
+
+describe(until, () => {
+  it('resolves immediately when the value already matches', async () => {
+    const value = ref(7);
+    await expect(until(value).toBe(7)).resolves.toBe(7);
+  });
+
+  it('resolves once the value changes to match toBe', async () => {
+    const value = ref(0);
+    const promise = until(value).toBe(7);
+
+    value.value = 3;
+    value.value = 7;
+
+    await expect(promise).resolves.toBe(7);
+  });
+
+  it('tracks another ref passed to toBe', async () => {
+    const value = ref(0);
+    const target = ref(5);
+    const promise = until(value).toBe(target);
+
+    value.value = 5;
+    await expect(promise).resolves.toBe(5);
+  });
+
+  it('resolves with a getter source watched against a literal', async () => {
+    const value = ref(0);
+    const promise = until(() => value.value * 2).toBe(18);
+
+    value.value = 9;
+    await expect(promise).resolves.toBe(18);
+  });
+
+  it('resolves on toBeTruthy', async () => {
+    const value = ref(0);
+    const promise = until(value).toBeTruthy();
+
+    value.value = 1;
+    await expect(promise).resolves.toBe(1);
+  });
+
+  it('resolves on toBeNull', async () => {
+    const value = ref<number | null>(1);
+    const promise = until(value).toBeNull();
+
+    value.value = null;
+    await expect(promise).resolves.toBeNull();
+  });
+
+  it('resolves on toBeUndefined', async () => {
+    const value = ref<number | undefined>(1);
+    const promise = until(value).toBeUndefined();
+
+    value.value = undefined;
+    await expect(promise).resolves.toBeUndefined();
+  });
+
+  it('resolves on toBeNaN', async () => {
+    const value = ref(0);
+    const promise = until(value).toBeNaN();
+
+    value.value = Number.NaN;
+    await expect(promise).resolves.toBeNaN();
+  });
+
+  it('resolves on toMatch with a predicate', async () => {
+    const value = ref(0);
+    const promise = until(value).toMatch(v => v > 10);
+
+    value.value = 5;
+    value.value = 11;
+    await expect(promise).resolves.toBe(11);
+  });
+
+  it('negates a condition with not.toBe', async () => {
+    const value = ref(0);
+    const promise = until(value).not.toBe(0);
+
+    value.value = 1;
+    await expect(promise).resolves.toBe(1);
+  });
+
+  it('negates toBeTruthy with not', async () => {
+    const value = ref(1);
+    const promise = until(value).not.toBeTruthy();
+
+    value.value = 0;
+    await expect(promise).resolves.toBe(0);
+  });
+
+  it('negates a tracked ref with not.toBe', async () => {
+    const value = ref(0);
+    const target = ref(0);
+    const promise = until(value).not.toBe(target);
+
+    value.value = 4;
+    await expect(promise).resolves.toBe(4);
+  });
+
+  it('resolves after a single change with changed', async () => {
+    const value = ref(0);
+    const promise = until(value).changed();
+
+    value.value = 1;
+    await expect(promise).resolves.toBe(1);
+  });
+
+  it('resolves after n changes with changedTimes', async () => {
+    const value = ref(0);
+    const promise = until(value).changedTimes(3);
+
+    value.value = 1;
+    value.value = 2;
+    value.value = 3;
+    await expect(promise).resolves.toBe(3);
+  });
+
+  it('works with array sources via toContains', async () => {
+    const list = ref<number[]>([1, 2]);
+    const promise = until(list).toContains(3);
+
+    list.value = [1, 2, 3];
+    await expect(promise).resolves.toEqual([1, 2, 3]);
+  });
+
+  it('negates toContains via not', async () => {
+    const list = ref<number[]>([1, 2, 3]);
+    const promise = until(list).not.toContains(3);
+
+    list.value = [1, 2];
+    await expect(promise).resolves.toEqual([1, 2]);
+  });
+
+  it('resolves with the current value on timeout when not throwing', async () => {
+    vi.useFakeTimers();
+    try {
+      const value = ref(0);
+      const promise = until(value).toBe(99, { timeout: 100 });
+
+      vi.advanceTimersByTime(100);
+      await expect(promise).resolves.toBe(0);
+    }
+    finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('rejects on timeout when throwOnTimeout is set', async () => {
+    vi.useFakeTimers();
+    try {
+      const value = ref(0);
+      const promise = until(value).toBe(99, { timeout: 100, throwOnTimeout: true });
+      // Attach the rejection expectation synchronously (do not await it yet), then
+      // advance the timers that trigger the rejection — awaiting first would deadlock.
+      // eslint-disable-next-line vitest/valid-expect -- intentionally deferred; awaited below after advancing timers
+      const assertion = expect(promise).rejects.toBe('Timeout');
+
+      await vi.advanceTimersByTimeAsync(100);
+      await assertion;
+    }
+    finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('resolves before the timeout fires when condition is met', async () => {
+    vi.useFakeTimers();
+    try {
+      const value = ref(0);
+      const promise = until(value).toBe(7, { timeout: 1000, throwOnTimeout: true });
+
+      value.value = 7;
+      await expect(promise).resolves.toBe(7);
+    }
+    finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('stops watching after it resolves', async () => {
+    const value = ref(0);
+    const promise = until(value).toBe(1);
+
+    value.value = 1;
+    await promise;
+
+    // mutating further should not throw or re-trigger anything
+    value.value = 2;
+    value.value = 3;
+    expect(value.value).toBe(3);
+  });
+
+  it('does not leak a watcher into the owning scope', async () => {
+    const value = ref(0);
+    const scope = effectScope();
+
+    const promise = scope.run(() => until(value).toBe(1))!;
+    value.value = 1;
+    await expect(promise).resolves.toBe(1);
+
+    scope.stop();
+  });
+
+  it('supports a post flush timing', async () => {
+    const value = ref(0);
+    const promise = until(value).toBe(5, { flush: 'post' });
+
+    value.value = 5;
+    await nextTick();
+    await expect(promise).resolves.toBe(5);
+  });
+});
diff --git a/vue/toolkit/src/composables/watch/until/index.ts b/vue/toolkit/src/composables/watch/until/index.ts
new file mode 100644
index 0000000..99bbde1
--- /dev/null
+++ b/vue/toolkit/src/composables/watch/until/index.ts
@@ -0,0 +1,247 @@
+import { isRef, nextTick, toValue, watch } from 'vue';
+import type { MaybeRefOrGetter, WatchOptions, WatchSource } from 'vue';
+
+type ElementOf<T> = T extends Array<infer E> ? E : never;
+
+type Falsy = false | void | null | undefined | 0 | 0n | '';
+
+export interface UntilToMatchOptions {
+  /**
+   * Milliseconds timeout for promise to resolve/reject if the when condition does not meet.
+   * 0 for never timed out
+   *
+   * @default 0
+   */
+  timeout?: number;
+
+  /**
+   * Reject the promise when timeout
+   *
+   * @default false
+   */
+  throwOnTimeout?: boolean;
+
+  /**
+   * `flush` option for internal watch
+   *
+   * @default 'sync'
+   */
+  flush?: WatchOptions['flush'];
+
+  /**
+   * `deep` option for internal watch
+   *
+   * @default 'false'
+   */
+  deep?: WatchOptions['deep'];
+}
+
+export interface UntilBaseInstance<T, Not extends boolean = false> {
+  toMatch: (<U extends T = T>(
+    condition: (v: T) => v is U,
+    options?: UntilToMatchOptions,
+  ) => Not extends true ? Promise<Exclude<T, U>> : Promise<U>) & ((
+    condition: (v: T) => boolean,
+    options?: UntilToMatchOptions,
+  ) => Promise<T>);
+  changed: (options?: UntilToMatchOptions) => Promise<T>;
+  changedTimes: (n?: number, options?: UntilToMatchOptions) => Promise<T>;
+}
+
+export interface UntilValueInstance<T, Not extends boolean = false> extends UntilBaseInstance<T, Not> {
+  readonly not: UntilValueInstance<T, Not extends true ? false : true>;
+  toBe: <P = T>(value: MaybeRefOrGetter<P>, options?: UntilToMatchOptions) => Not extends true ? Promise<T> : Promise<P>;
+  toBeTruthy: (options?: UntilToMatchOptions) => Not extends true ? Promise<T & Falsy> : Promise<Exclude<T, Falsy>>;
+  toBeNull: (options?: UntilToMatchOptions) => Not extends true ? Promise<Exclude<T, null>> : Promise<null>;
+  toBeUndefined: (options?: UntilToMatchOptions) => Not extends true ? Promise<Exclude<T, undefined>> : Promise<undefined>;
+  toBeNaN: (options?: UntilToMatchOptions) => Promise<T>;
+}
+
+export interface UntilArrayInstance<T> extends UntilBaseInstance<T> {
+  readonly not: UntilArrayInstance<T>;
+  toContains: (value: MaybeRefOrGetter<ElementOf<T>>, options?: UntilToMatchOptions) => Promise<T>;
+}
+
+function promiseTimeout(ms: number, throwOnTimeout = false, reason = 'Timeout'): Promise<void> {
+  return new Promise((resolve, reject) => {
+    if (throwOnTimeout)
+      setTimeout(() => reject(reason), ms);
+    else
+      setTimeout(resolve, ms);
+  });
+}
+
+function createUntil<T>(r: WatchSource<T> | MaybeRefOrGetter<T>, isNot = false): UntilValueInstance<T, boolean> | UntilArrayInstance<T> {
+  function toMatch(
+    condition: (v: T) => boolean,
+    { flush = 'sync', deep = false, timeout, throwOnTimeout }: UntilToMatchOptions = {},
+  ): Promise<T> {
+    let stop: (() => void) | null = null;
+    const watcher = new Promise<T>((resolve) => {
+      stop = watch(
+        r as WatchSource<T>,
+        (v) => {
+          if (condition(v) !== isNot) {
+            if (stop)
+              stop();
+            else
+              nextTick(() => stop?.());
+
+            resolve(v);
+          }
+        },
+        {
+          flush,
+          deep,
+          immediate: true,
+        },
+      );
+    });
+
+    const promises = [watcher];
+    if (timeout !== null && timeout !== undefined) {
+      promises.push(
+        promiseTimeout(timeout, throwOnTimeout)
+          .then(() => toValue(r as MaybeRefOrGetter<T>))
+          .finally(() => stop?.()),
+      );
+    }
+
+    return Promise.race(promises);
+  }
+
+  function toBe<P>(value: MaybeRefOrGetter<P | T>, options?: UntilToMatchOptions): Promise<T> {
+    if (!isRef(value))
+      return toMatch(v => v === value, options);
+
+    const { flush = 'sync', deep = false, timeout, throwOnTimeout } = options ?? {};
+    let stop: (() => void) | null = null;
+    const watcher = new Promise<T>((resolve) => {
+      stop = watch(
+        [r as WatchSource<T>, value],
+        ([v1, v2]) => {
+          if (isNot !== (v1 === v2)) {
+            if (stop)
+              stop();
+            else
+              nextTick(() => stop?.());
+
+            resolve(v1 as T);
+          }
+        },
+        {
+          flush,
+          deep,
+          immediate: true,
+        },
+      );
+    });
+
+    const promises = [watcher];
+    if (timeout !== null && timeout !== undefined) {
+      promises.push(
+        promiseTimeout(timeout, throwOnTimeout)
+          .then(() => toValue(r as MaybeRefOrGetter<T>))
+          .finally(() => stop?.()),
+      );
+    }
+
+    return Promise.race(promises);
+  }
+
+  function toBeTruthy(options?: UntilToMatchOptions): Promise<T> {
+    return toMatch(v => Boolean(v), options);
+  }
+
+  function toBeNull(options?: UntilToMatchOptions): Promise<T> {
+    return toBe<null>(null, options);
+  }
+
+  function toBeUndefined(options?: UntilToMatchOptions): Promise<T> {
+    return toBe<undefined>(undefined, options);
+  }
+
+  function toBeNaN(options?: UntilToMatchOptions): Promise<T> {
+    return toMatch(Number.isNaN, options);
+  }
+
+  function toContains(value: MaybeRefOrGetter<ElementOf<T>>, options?: UntilToMatchOptions): Promise<T> {
+    return toMatch((v) => {
+      const array = new Set(Array.from(v as Iterable<unknown>));
+      return array.has(value) || array.has(toValue(value));
+    }, options);
+  }
+
+  function changed(options?: UntilToMatchOptions): Promise<T> {
+    return changedTimes(1, options);
+  }
+
+  function changedTimes(n = 1, options?: UntilToMatchOptions): Promise<T> {
+    let count = -1;
+    return toMatch(() => {
+      count += 1;
+      return count >= n;
+    }, options);
+  }
+
+  if (Array.isArray(toValue(r as MaybeRefOrGetter<T>))) {
+    const instance: UntilArrayInstance<T> = {
+      toMatch: toMatch as UntilArrayInstance<T>['toMatch'],
+      toContains,
+      changed,
+      changedTimes,
+      get not() {
+        return createUntil(r, !isNot) as UntilArrayInstance<T>;
+      },
+    };
+    return instance;
+  }
+
+  const instance: UntilValueInstance<T, boolean> = {
+    toMatch: toMatch as UntilValueInstance<T, boolean>['toMatch'],
+    toBe: toBe as UntilValueInstance<T, boolean>['toBe'],
+    toBeTruthy: toBeTruthy as UntilValueInstance<T, boolean>['toBeTruthy'],
+    toBeNull: toBeNull as UntilValueInstance<T, boolean>['toBeNull'],
+    toBeNaN,
+    toBeUndefined: toBeUndefined as UntilValueInstance<T, boolean>['toBeUndefined'],
+    changed,
+    changedTimes,
+    get not() {
+      return createUntil(r, !isNot) as UntilValueInstance<T, boolean>;
+    },
+  };
+
+  return instance;
+}
+
+/**
+ * @name until
+ * @category Watch
+ * @description Promised one-time watch for ref / getter changes. Resolve once the source matches a condition, optionally with a timeout.
+ *
+ * @param {WatchSource<T> | MaybeRefOrGetter<T>} r The reactive source to watch
+ * @returns {UntilValueInstance<T> | UntilArrayInstance<T>} A chainable instance exposing `toBe`, `toBeTruthy`, `toBeNull`, `toBeUndefined`, `toBeNaN`, `toMatch`, `toContains`, `changed`, `changedTimes`, and the `not` negation
+ *
+ * @example
+ * const count = ref(0);
+ * await until(count).toBe(7);
+ *
+ * @example
+ * const ready = ref(false);
+ * await until(ready).toBeTruthy();
+ *
+ * @example
+ * // negation and timeout
+ * await until(count).not.toBe(0, { timeout: 1000, throwOnTimeout: true });
+ *
+ * @example
+ * // resolve once the source changes n times
+ * await until(count).changedTimes(3);
+ *
+ * @since 0.0.15
+ */
+export function until<T extends unknown[]>(r: WatchSource<T> | MaybeRefOrGetter<T>): UntilArrayInstance<T>;
+export function until<T>(r: WatchSource<T> | MaybeRefOrGetter<T>): UntilValueInstance<T>;
+export function until<T>(r: WatchSource<T> | MaybeRefOrGetter<T>): UntilValueInstance<T> | UntilArrayInstance<T> {
+  return createUntil(r);
+}
diff --git a/vue/toolkit/src/composables/watch/watchDebounced/demo.vue b/vue/toolkit/src/composables/watch/watchDebounced/demo.vue
new file mode 100644
index 0000000..37eaf4d
--- /dev/null
+++ b/vue/toolkit/src/composables/watch/watchDebounced/demo.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { watchDebounced } from './index';
+
+// Classic debounced search box: keystrokes mutate `query` instantly, but the
+// "fetch" callback only fires once typing settles — with a maxWait ceiling so
+// a long burst still flushes at least every 1500ms.
+const query = ref('vue composables');
+const debounce = ref(400);
+
+const settledQuery = ref(query.value);
+const keystrokes = ref(0);
+const fetches = ref(0);
+
+watchDebounced(
+  query,
+  (value) => {
+    settledQuery.value = value;
+    fetches.value++;
+  },
+  { debounce, maxWait: 1500 },
+);
+
+function onInput() {
+  keystrokes.value++;
+}
+
+const savings = () =>
+  keystrokes.value === 0 ? 0 : Math.round((1 - fetches.value / keystrokes.value) * 100);
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="flex flex-col gap-2">
+      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="wd-search">
+        Search
+      </label>
+      <input
+        id="wd-search"
+        v-model="query"
+        type="text"
+        placeholder="Start typing…"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        @input="onInput"
+      >
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Debounce</span>
+        <span class="font-mono text-xs text-(--fg-muted) tabular-nums">{{ debounce }}ms</span>
+      </div>
+      <input
+        v-model.number="debounce"
+        type="range"
+        min="0"
+        max="1200"
+        step="50"
+        class="w-full accent-(--accent) cursor-pointer"
+      >
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex flex-col gap-1">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Settled query</span>
+      <span class="font-mono text-sm text-(--fg) truncate">{{ settledQuery || '—' }}</span>
+    </div>
+
+    <div class="grid grid-cols-3 gap-2 text-center">
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-3">
+        <div class="font-mono text-2xl font-bold tabular-nums text-(--fg)">{{ keystrokes }}</div>
+        <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">keystrokes</div>
+      </div>
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-3">
+        <div class="font-mono text-2xl font-bold tabular-nums text-(--accent-text)">{{ fetches }}</div>
+        <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">fetches</div>
+      </div>
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-3">
+        <div class="font-mono text-2xl font-bold tabular-nums text-emerald-600 dark:text-emerald-400">
+          {{ savings() }}%
+        </div>
+        <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">saved</div>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Callback fires <span class="font-mono text-(--fg-muted)">{{ debounce }}ms</span> after you stop typing,
+      capped by a <span class="font-mono text-(--fg-muted)">maxWait: 1500</span> ceiling.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/watch/watchDebounced/index.test.ts b/vue/toolkit/src/composables/watch/watchDebounced/index.test.ts
new file mode 100644
index 0000000..8cad6a4
--- /dev/null
+++ b/vue/toolkit/src/composables/watch/watchDebounced/index.test.ts
@@ -0,0 +1,270 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, reactive, ref } from 'vue';
+import { debouncedWatch, watchDebounced } from '.';
+
+describe(watchDebounced, () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('does not fire before the source changes', () => {
+    const count = ref(0);
+    const cb = vi.fn();
+
+    watchDebounced(count, cb, { debounce: 100, flush: 'sync' });
+
+    vi.advanceTimersByTime(200);
+    expect(cb).not.toHaveBeenCalled();
+  });
+
+  it('defers the callback by the debounce delay', () => {
+    const count = ref(0);
+    const cb = vi.fn();
+
+    watchDebounced(count, cb, { debounce: 100, flush: 'sync' });
+
+    count.value = 1;
+    expect(cb).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(50);
+    expect(cb).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(50);
+    expect(cb).toHaveBeenCalledTimes(1);
+    expect(cb).toHaveBeenLastCalledWith(1, 0, expect.any(Function));
+  });
+
+  it('coalesces rapid changes into a single trailing call', () => {
+    const count = ref(0);
+    const cb = vi.fn();
+
+    watchDebounced(count, cb, { debounce: 100, flush: 'sync' });
+
+    count.value = 1;
+    vi.advanceTimersByTime(80);
+    count.value = 2;
+    vi.advanceTimersByTime(80);
+    count.value = 3;
+
+    expect(cb).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(100);
+    expect(cb).toHaveBeenCalledTimes(1);
+    // The filtered callback receives the args of the latest watch trigger:
+    // new value 3, and old value 2 (the source value just before the last change).
+    expect(cb).toHaveBeenLastCalledWith(3, 2, expect.any(Function));
+  });
+
+  it('fires synchronously with no debounce (debounce = 0)', () => {
+    const count = ref(0);
+    const cb = vi.fn();
+
+    watchDebounced(count, cb, { flush: 'sync' });
+
+    count.value = 1;
+    expect(cb).toHaveBeenCalledTimes(1);
+    expect(cb).toHaveBeenLastCalledWith(1, 0, expect.any(Function));
+  });
+
+  it('enforces maxWait under sustained changes', () => {
+    const count = ref(0);
+    const cb = vi.fn();
+
+    watchDebounced(count, cb, { debounce: 100, maxWait: 250, flush: 'sync' });
+
+    // Keep changing before the debounce timer can ever settle.
+    count.value = 1;
+    vi.advanceTimersByTime(80);
+    count.value = 2;
+    vi.advanceTimersByTime(80);
+    count.value = 3;
+    vi.advanceTimersByTime(80);
+    // 240ms elapsed, debounce has reset each time, but maxWait is 250ms.
+    expect(cb).not.toHaveBeenCalled();
+
+    count.value = 4;
+    vi.advanceTimersByTime(20);
+    // maxWait (250ms) elapsed -> forced invocation with the latest trigger args.
+    expect(cb).toHaveBeenCalledTimes(1);
+    expect(cb).toHaveBeenLastCalledWith(4, 3, expect.any(Function));
+  });
+
+  it('does not double-fire when maxWait and debounce settle together', () => {
+    const count = ref(0);
+    const cb = vi.fn();
+
+    watchDebounced(count, cb, { debounce: 100, maxWait: 200, flush: 'sync' });
+
+    count.value = 1;
+    // debounce settles at 100ms; maxWait would be at 200ms but is cleared.
+    vi.advanceTimersByTime(100);
+    expect(cb).toHaveBeenCalledTimes(1);
+
+    vi.advanceTimersByTime(200);
+    expect(cb).toHaveBeenCalledTimes(1);
+  });
+
+  it('supports a reactive debounce delay', () => {
+    const count = ref(0);
+    const delay = ref(100);
+    const cb = vi.fn();
+
+    watchDebounced(count, cb, { debounce: delay, flush: 'sync' });
+
+    count.value = 1;
+    vi.advanceTimersByTime(100);
+    expect(cb).toHaveBeenCalledTimes(1);
+
+    delay.value = 300;
+    count.value = 2;
+    vi.advanceTimersByTime(100);
+    expect(cb).toHaveBeenCalledTimes(1);
+
+    vi.advanceTimersByTime(200);
+    expect(cb).toHaveBeenCalledTimes(2);
+  });
+
+  it('works with a getter source', () => {
+    const count = ref(0);
+    const cb = vi.fn();
+
+    watchDebounced(() => count.value * 2, cb, { debounce: 100, flush: 'sync' });
+
+    count.value = 5;
+    vi.advanceTimersByTime(100);
+    expect(cb).toHaveBeenCalledTimes(1);
+    expect(cb).toHaveBeenLastCalledWith(10, 0, expect.any(Function));
+  });
+
+  it('works with an array of sources', () => {
+    const a = ref(0);
+    const b = ref('x');
+    const cb = vi.fn();
+
+    watchDebounced([a, b], cb, { debounce: 100, flush: 'sync' });
+
+    a.value = 1;
+    vi.advanceTimersByTime(100);
+    expect(cb).toHaveBeenCalledTimes(1);
+    expect(cb).toHaveBeenLastCalledWith([1, 'x'], [0, 'x'], expect.any(Function));
+  });
+
+  it('works with a reactive object source and deep option', () => {
+    const state = reactive({ nested: { value: 0 } });
+    const cb = vi.fn();
+
+    watchDebounced(state, cb, { debounce: 100, deep: true, flush: 'sync' });
+
+    state.nested.value = 1;
+    vi.advanceTimersByTime(100);
+    expect(cb).toHaveBeenCalledTimes(1);
+  });
+
+  it('fires immediately with the immediate option', () => {
+    const count = ref(0);
+    const cb = vi.fn();
+
+    watchDebounced(count, cb, { debounce: 100, immediate: true, flush: 'sync' });
+
+    // immediate runs through the filter synchronously only when debounce=0;
+    // with a positive debounce the immediate run is also debounced.
+    vi.advanceTimersByTime(100);
+    expect(cb).toHaveBeenCalledTimes(1);
+    expect(cb).toHaveBeenLastCalledWith(0, undefined, expect.any(Function));
+  });
+
+  it('respects a custom flush timing', async () => {
+    const count = ref(0);
+    const cb = vi.fn();
+
+    watchDebounced(count, cb, { debounce: 100, flush: 'post' });
+
+    count.value = 1;
+    await nextTick();
+    expect(cb).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(100);
+    expect(cb).toHaveBeenCalledTimes(1);
+  });
+
+  it('returns a handle that stops watching', () => {
+    const count = ref(0);
+    const cb = vi.fn();
+
+    const stop = watchDebounced(count, cb, { debounce: 100, flush: 'sync' });
+
+    stop();
+
+    count.value = 1;
+    vi.advanceTimersByTime(200);
+    expect(cb).not.toHaveBeenCalled();
+  });
+
+  it('stops watching when the owning scope is disposed', () => {
+    const count = ref(0);
+    const cb = vi.fn();
+    const scope = effectScope();
+
+    scope.run(() => watchDebounced(count, cb, { debounce: 100, flush: 'sync' }));
+
+    scope.stop();
+
+    count.value = 1;
+    vi.advanceTimersByTime(200);
+    expect(cb).not.toHaveBeenCalled();
+  });
+
+  it('honours a caller-supplied eventFilter over debounce/maxWait', () => {
+    const count = ref(0);
+    const cb = vi.fn();
+    const passthrough = vi.fn((invoke: () => void) => invoke());
+
+    watchDebounced(count, cb, {
+      debounce: 1000,
+      eventFilter: passthrough,
+      flush: 'sync',
+    });
+
+    count.value = 1;
+    // The custom filter invokes immediately, bypassing the debounce timer.
+    expect(passthrough).toHaveBeenCalledTimes(1);
+    expect(cb).toHaveBeenCalledTimes(1);
+    expect(cb).toHaveBeenLastCalledWith(1, 0, expect.any(Function));
+  });
+
+  it('passes onCleanup to the callback', () => {
+    const count = ref(0);
+    const cleanup = vi.fn();
+
+    watchDebounced(count, (_value, _old, onCleanup) => {
+      onCleanup(cleanup);
+    }, { debounce: 100, flush: 'sync' });
+
+    count.value = 1;
+    vi.advanceTimersByTime(100);
+    count.value = 2;
+    vi.advanceTimersByTime(100);
+
+    // cleanup registered on the first settled run fires before the second.
+    expect(cleanup).toHaveBeenCalledTimes(1);
+  });
+
+  it('exposes debouncedWatch as an alias', () => {
+    expect(debouncedWatch).toBe(watchDebounced);
+  });
+
+  it('runs in a non-DOM scope without touching globals (SSR-safe)', () => {
+    const count = ref(0);
+    const cb = vi.fn();
+    const scope = effectScope();
+
+    expect(() => {
+      scope.run(() => watchDebounced(count, cb, { debounce: 100, flush: 'sync' }));
+    }).not.toThrow();
+
+    scope.stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/watch/watchDebounced/index.ts b/vue/toolkit/src/composables/watch/watchDebounced/index.ts
new file mode 100644
index 0000000..fd48114
--- /dev/null
+++ b/vue/toolkit/src/composables/watch/watchDebounced/index.ts
@@ -0,0 +1,111 @@
+import { watch } from 'vue';
+import type {
+  MaybeRefOrGetter,
+  WatchCallback,
+  WatchHandle,
+  WatchOptions,
+  WatchSource,
+} from 'vue';
+import { createFilterWrapper, debounceFilter } from '@/utils/filters';
+import type { ConfigurableEventFilter, EventFilter } from '@/utils/filters';
+
+type MultiWatchSources = Array<WatchSource<unknown> | object>;
+
+type MapSources<T> = {
+  [K in keyof T]: T[K] extends WatchSource<infer V> ? V : T[K] extends object ? T[K] : never;
+};
+
+type MapOldSources<T, Immediate> = {
+  [K in keyof T]: T[K] extends WatchSource<infer V>
+    ? Immediate extends true ? V | undefined : V
+    : T[K] extends object
+      ? Immediate extends true ? T[K] | undefined : T[K]
+      : never;
+};
+
+export interface WatchDebouncedOptions<Immediate> extends WatchOptions<Immediate>, ConfigurableEventFilter {
+  /**
+   * Delay in milliseconds before the watch callback fires after the last
+   * source change. Resets on every change. Can be reactive.
+   *
+   * @default 0
+   */
+  debounce?: MaybeRefOrGetter<number>;
+
+  /**
+   * The maximum time the callback is allowed to be delayed before it is
+   * forcibly invoked, even while the source keeps changing. Guarantees the
+   * callback runs at least once per `maxWait` window under sustained input.
+   * When omitted there is no upper bound. Can be reactive.
+   *
+   * @default undefined
+   */
+  maxWait?: MaybeRefOrGetter<number>;
+}
+
+/**
+ * @name watchDebounced
+ * @category Watch
+ * @description Debounced `watch`. The callback is postponed until `debounce`
+ * milliseconds have elapsed since the last source change; an optional `maxWait`
+ * caps how long it can be delayed under sustained changes. Implemented via an
+ * event filter so the public surface matches `watch` exactly.
+ *
+ * @param {WatchSource<T> | T} source The reactive source (ref, getter, reactive object, or array of sources) to watch
+ * @param {WatchCallback} cb Invoked with the new value, old value, and `onCleanup` once the debounce settles
+ * @param {WatchDebouncedOptions} [options] Watch options plus `debounce` (ms) and `maxWait` (ms ceiling)
+ * @returns {WatchHandle} A handle to stop watching (also cancels a pending invocation)
+ *
+ * @example
+ * const search = ref('');
+ * watchDebounced(search, value => fetchResults(value), { debounce: 300 });
+ *
+ * @example
+ * // Guarantee the callback runs at least every 1000ms while typing continuously
+ * watchDebounced(input, save, { debounce: 300, maxWait: 1000 });
+ *
+ * @since 0.0.15
+ */
+export function watchDebounced<T, Immediate extends Readonly<boolean> = false>(
+  source: WatchSource<T>,
+  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
+  options?: WatchDebouncedOptions<Immediate>,
+): WatchHandle;
+
+export function watchDebounced<T extends Readonly<MultiWatchSources>, Immediate extends Readonly<boolean> = false>(
+  sources: [...T],
+  cb: WatchCallback<MapSources<T>, MapOldSources<T, Immediate>>,
+  options?: WatchDebouncedOptions<Immediate>,
+): WatchHandle;
+
+export function watchDebounced<T extends object, Immediate extends Readonly<boolean> = false>(
+  source: T,
+  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
+  options?: WatchDebouncedOptions<Immediate>,
+): WatchHandle;
+
+export function watchDebounced<Immediate extends Readonly<boolean> = false>(
+  source: WatchSource<unknown> | MultiWatchSources | object,
+  cb: WatchCallback,
+  options: WatchDebouncedOptions<Immediate> = {},
+): WatchHandle {
+  const {
+    debounce = 0,
+    maxWait,
+    eventFilter,
+    ...watchOptions
+  } = options;
+
+  // Honour a caller-supplied eventFilter if present; otherwise build a
+  // debounce filter (with optional maxWait) from the timing options.
+  const filter: EventFilter = eventFilter
+    ?? debounceFilter(debounce, { maxWait });
+
+  return watch(
+    source,
+    createFilterWrapper(filter, cb),
+    watchOptions as WatchOptions<Immediate>,
+  );
+}
+
+export const debouncedWatch = watchDebounced;
diff --git a/vue/toolkit/src/composables/watch/watchIgnorable/demo.vue b/vue/toolkit/src/composables/watch/watchIgnorable/demo.vue
new file mode 100644
index 0000000..d43b8b1
--- /dev/null
+++ b/vue/toolkit/src/composables/watch/watchIgnorable/demo.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { watchIgnorable } from './index';
+
+// A "dirty tracking" editor: user typing marks the draft dirty, but a
+// programmatic normalize pass writes the same ref inside `ignoreUpdates`,
+// so it does NOT flip the dirty flag or count as a real edit.
+const text = ref('The quick brown fox.');
+const dirty = ref(false);
+const trackedEdits = ref(0);
+const lastChange = ref('—');
+
+const { ignoreUpdates } = watchIgnorable(text, (value) => {
+  dirty.value = true;
+  trackedEdits.value++;
+  lastChange.value = value;
+});
+
+function normalize() {
+  // Collapse whitespace silently — the watcher stays quiet for this write.
+  ignoreUpdates(() => {
+    text.value = text.value.replace(/\s+/g, ' ').trim();
+  });
+}
+
+function save() {
+  dirty.value = false;
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="wi-text">
+          Draft
+        </label>
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
+          :class="dirty
+            ? 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'
+            : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+        >
+          <span
+            class="size-1.5 rounded-full"
+            :class="dirty ? 'bg-amber-500' : 'bg-emerald-500'"
+          />
+          {{ dirty ? 'Unsaved' : 'Saved' }}
+        </span>
+      </div>
+      <textarea
+        id="wi-text"
+        v-model="text"
+        rows="2"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition resize-none focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      />
+    </div>
+
+    <div class="grid grid-cols-2 gap-2">
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="normalize"
+      >
+        Normalize (ignored)
+      </button>
+      <button
+        type="button"
+        :disabled="!dirty"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="save"
+      >
+        Save
+      </button>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex flex-col gap-2">
+      <div class="flex items-center justify-between text-sm">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Tracked edits</span>
+        <span class="font-mono text-(--fg) tabular-nums">{{ trackedEdits }}</span>
+      </div>
+      <div class="flex items-center justify-between gap-3 text-sm">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Last change</span>
+        <span class="font-mono text-xs text-(--fg-muted) truncate">{{ lastChange }}</span>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Typing counts as an edit; <span class="font-mono text-(--fg-muted)">Normalize</span> writes the same
+      ref inside <span class="font-mono text-(--fg-muted)">ignoreUpdates()</span> and the watcher stays silent.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/watch/watchIgnorable/index.test.ts b/vue/toolkit/src/composables/watch/watchIgnorable/index.test.ts
new file mode 100644
index 0000000..afac858
--- /dev/null
+++ b/vue/toolkit/src/composables/watch/watchIgnorable/index.test.ts
@@ -0,0 +1,203 @@
+import { describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, ref } from 'vue';
+import { watchIgnorable } from '.';
+
+describe(watchIgnorable, () => {
+  it('fires the callback on normal updates (async flush)', async () => {
+    const count = ref(0);
+    const cb = vi.fn();
+    watchIgnorable(count, cb);
+
+    count.value = 1;
+    await nextTick();
+    expect(cb).toHaveBeenCalledTimes(1);
+    expect(cb).toHaveBeenLastCalledWith(1, 0, expect.any(Function));
+  });
+
+  it('suppresses the callback inside ignoreUpdates (async flush)', async () => {
+    const count = ref(0);
+    const cb = vi.fn();
+    const { ignoreUpdates } = watchIgnorable(count, cb);
+
+    ignoreUpdates(() => {
+      count.value = 1;
+    });
+    await nextTick();
+    expect(cb).not.toHaveBeenCalled();
+
+    count.value = 2;
+    await nextTick();
+    expect(cb).toHaveBeenCalledTimes(1);
+    expect(cb).toHaveBeenLastCalledWith(2, 1, expect.any(Function));
+  });
+
+  it('commits when an ignored update is followed by a real change before flush (async)', async () => {
+    const count = ref(0);
+    const cb = vi.fn();
+    const { ignoreUpdates } = watchIgnorable(count, cb);
+
+    ignoreUpdates(() => {
+      count.value = 1;
+    });
+    // A real (non-ignored) change after the ignored one: syncCounter > ignoreCounter
+    count.value = 2;
+    await nextTick();
+
+    expect(cb).toHaveBeenCalledTimes(1);
+    expect(cb).toHaveBeenLastCalledWith(2, 0, expect.any(Function));
+  });
+
+  it('supports multiple chained ignored updates (async)', async () => {
+    const count = ref(0);
+    const cb = vi.fn();
+    const { ignoreUpdates } = watchIgnorable(count, cb);
+
+    ignoreUpdates(() => {
+      count.value = 1;
+      count.value = 2;
+      count.value = 3;
+    });
+    await nextTick();
+    expect(cb).not.toHaveBeenCalled();
+  });
+
+  it('fires the callback on normal updates (sync flush)', () => {
+    const count = ref(0);
+    const cb = vi.fn();
+    watchIgnorable(count, cb, { flush: 'sync' });
+
+    count.value = 1;
+    expect(cb).toHaveBeenCalledTimes(1);
+    expect(cb).toHaveBeenLastCalledWith(1, 0, expect.any(Function));
+  });
+
+  it('suppresses the callback inside ignoreUpdates (sync flush)', () => {
+    const count = ref(0);
+    const cb = vi.fn();
+    const { ignoreUpdates } = watchIgnorable(count, cb, { flush: 'sync' });
+
+    ignoreUpdates(() => {
+      count.value = 1;
+      count.value = 2;
+    });
+    expect(cb).not.toHaveBeenCalled();
+
+    count.value = 3;
+    expect(cb).toHaveBeenCalledTimes(1);
+    expect(cb).toHaveBeenLastCalledWith(3, 2, expect.any(Function));
+  });
+
+  it('ignorePrevAsyncUpdates suppresses already-queued changes (async)', async () => {
+    const count = ref(0);
+    const cb = vi.fn();
+    const { ignorePrevAsyncUpdates } = watchIgnorable(count, cb);
+
+    count.value = 1;
+    // Drop the pending change before the async callback flushes
+    ignorePrevAsyncUpdates();
+    await nextTick();
+    expect(cb).not.toHaveBeenCalled();
+  });
+
+  it('ignorePrevAsyncUpdates only drops prior changes, not subsequent ones (async)', async () => {
+    const count = ref(0);
+    const cb = vi.fn();
+    const { ignorePrevAsyncUpdates } = watchIgnorable(count, cb);
+
+    count.value = 1;
+    ignorePrevAsyncUpdates();
+    count.value = 2;
+    await nextTick();
+
+    expect(cb).toHaveBeenCalledTimes(1);
+    expect(cb).toHaveBeenLastCalledWith(2, 0, expect.any(Function));
+  });
+
+  it('ignorePrevAsyncUpdates is a no-op for sync flush', () => {
+    const count = ref(0);
+    const cb = vi.fn();
+    const { ignorePrevAsyncUpdates } = watchIgnorable(count, cb, { flush: 'sync' });
+
+    count.value = 1;
+    expect(cb).toHaveBeenCalledTimes(1);
+    // Calling after a sync change does nothing
+    ignorePrevAsyncUpdates();
+    count.value = 2;
+    expect(cb).toHaveBeenCalledTimes(2);
+  });
+
+  it('stop tears down the watcher (async flush)', async () => {
+    const count = ref(0);
+    const cb = vi.fn();
+    const { stop } = watchIgnorable(count, cb);
+
+    stop();
+    count.value = 1;
+    await nextTick();
+    expect(cb).not.toHaveBeenCalled();
+  });
+
+  it('stop tears down the watcher (sync flush)', () => {
+    const count = ref(0);
+    const cb = vi.fn();
+    const { stop } = watchIgnorable(count, cb, { flush: 'sync' });
+
+    stop();
+    count.value = 1;
+    expect(cb).not.toHaveBeenCalled();
+  });
+
+  it('watches an array of sources', async () => {
+    const a = ref(0);
+    const b = ref('x');
+    const cb = vi.fn();
+    const { ignoreUpdates } = watchIgnorable([a, b], cb);
+
+    a.value = 1;
+    await nextTick();
+    expect(cb).toHaveBeenCalledTimes(1);
+    expect(cb).toHaveBeenLastCalledWith([1, 'x'], [0, 'x'], expect.any(Function));
+
+    ignoreUpdates(() => {
+      b.value = 'y';
+    });
+    await nextTick();
+    expect(cb).toHaveBeenCalledTimes(1);
+  });
+
+  it('respects an eventFilter', async () => {
+    const count = ref(0);
+    const cb = vi.fn();
+    // A filter that drops every invocation
+    watchIgnorable(count, cb, { eventFilter: () => {} });
+
+    count.value = 1;
+    await nextTick();
+    expect(cb).not.toHaveBeenCalled();
+  });
+
+  it('supports the immediate option', () => {
+    const count = ref(5);
+    const cb = vi.fn();
+    watchIgnorable(count, cb, { immediate: true, flush: 'sync' });
+    expect(cb).toHaveBeenCalledTimes(1);
+    expect(cb).toHaveBeenLastCalledWith(5, undefined, expect.any(Function));
+  });
+
+  it('stops with the owning effect scope', async () => {
+    const count = ref(0);
+    const cb = vi.fn();
+    const scope = effectScope();
+
+    scope.run(() => watchIgnorable(count, cb));
+
+    count.value = 1;
+    await nextTick();
+    expect(cb).toHaveBeenCalledTimes(1);
+
+    scope.stop();
+    count.value = 2;
+    await nextTick();
+    expect(cb).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/vue/toolkit/src/composables/watch/watchIgnorable/index.ts b/vue/toolkit/src/composables/watch/watchIgnorable/index.ts
new file mode 100644
index 0000000..ea59bbc
--- /dev/null
+++ b/vue/toolkit/src/composables/watch/watchIgnorable/index.ts
@@ -0,0 +1,170 @@
+import { watch } from 'vue';
+import type { WatchCallback, WatchOptions, WatchSource, WatchStopHandle } from 'vue';
+import { noop } from '@robonen/stdlib';
+import type { AnyFunction } from '@robonen/stdlib';
+import { bypassFilter, createFilterWrapper } from '@/utils';
+import type { ConfigurableEventFilter } from '@/utils';
+
+type MultiWatchSources = Array<WatchSource<unknown> | object>;
+
+type MapSources<T> = {
+  [K in keyof T]: T[K] extends WatchSource<infer V> ? V : T[K] extends object ? T[K] : never;
+};
+
+type MapOldSources<T, Immediate> = {
+  [K in keyof T]: T[K] extends WatchSource<infer V>
+    ? Immediate extends true ? V | undefined : V
+    : T[K] extends object
+      ? Immediate extends true ? T[K] | undefined : T[K]
+      : never;
+};
+
+export interface WatchWithFilterOptions<Immediate> extends WatchOptions<Immediate>, ConfigurableEventFilter {}
+
+export type IgnoredUpdater = (updater: () => void) => void;
+export type IgnoredPrevAsyncUpdates = () => void;
+
+export interface WatchIgnorableReturn {
+  /**
+   * Run `updater`, suppressing the watch callback for any source writes it performs
+   */
+  ignoreUpdates: IgnoredUpdater;
+  /**
+   * Ignore the callback for source changes already queued before this call (async flush only)
+   */
+  ignorePrevAsyncUpdates: IgnoredPrevAsyncUpdates;
+  /**
+   * Stop the underlying watcher(s)
+   */
+  stop: WatchStopHandle;
+}
+
+/**
+ * @name watchIgnorable
+ * @category Watch
+ * @description Extended `watch` that exposes `ignoreUpdates(fn)` and `ignorePrevAsyncUpdates()` to suppress reactions to programmatic writes.
+ *
+ * @param {WatchSource<T> | T} source The reactive source (ref, getter, reactive object, or array of sources) to watch
+ * @param {WatchCallback} cb Invoked with the new value, old value, and `onCleanup` when the source changes (unless ignored)
+ * @param {WatchWithFilterOptions} [options={}] Watch options (`immediate`, `deep`, `flush`) plus an optional `eventFilter`
+ * @returns {WatchIgnorableReturn} `{ ignoreUpdates, ignorePrevAsyncUpdates, stop }`
+ *
+ * @example
+ * const count = ref(0);
+ * const { ignoreUpdates } = watchIgnorable(count, value => console.log('changed', value));
+ *
+ * count.value = 1;            // logs: changed 1
+ * ignoreUpdates(() => {
+ *   count.value = 2;          // does NOT log
+ * });
+ * count.value = 3;            // logs: changed 3
+ *
+ * @since 0.0.15
+ */
+export function watchIgnorable<T, Immediate extends Readonly<boolean> = false>(
+  source: WatchSource<T>,
+  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
+  options?: WatchWithFilterOptions<Immediate>,
+): WatchIgnorableReturn;
+
+export function watchIgnorable<T extends Readonly<MultiWatchSources>, Immediate extends Readonly<boolean> = false>(
+  sources: [...T],
+  cb: WatchCallback<MapSources<T>, MapOldSources<T, Immediate>>,
+  options?: WatchWithFilterOptions<Immediate>,
+): WatchIgnorableReturn;
+
+export function watchIgnorable<T extends object, Immediate extends Readonly<boolean> = false>(
+  source: T,
+  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
+  options?: WatchWithFilterOptions<Immediate>,
+): WatchIgnorableReturn;
+
+export function watchIgnorable<Immediate extends Readonly<boolean> = false>(
+  source: any,
+  cb: AnyFunction,
+  options: WatchWithFilterOptions<Immediate> = {},
+): WatchIgnorableReturn {
+  const { eventFilter = bypassFilter, ...watchOptions } = options;
+
+  const filteredCb = createFilterWrapper(eventFilter, cb);
+
+  let ignoreUpdates: IgnoredUpdater;
+  let ignorePrevAsyncUpdates: IgnoredPrevAsyncUpdates;
+  let stop: WatchStopHandle;
+
+  if (watchOptions.flush === 'sync') {
+    let ignore = false;
+
+    // No async queue to drain with sync flush
+    ignorePrevAsyncUpdates = noop;
+
+    ignoreUpdates = (updater: () => void) => {
+      ignore = true;
+      updater();
+      ignore = false;
+    };
+
+    stop = watch(
+      source,
+      (...args: any[]) => {
+        if (!ignore)
+          filteredCb(...args);
+      },
+      watchOptions,
+    );
+  }
+  else {
+    // flush: 'pre' | 'post'
+    const disposables: WatchStopHandle[] = [];
+
+    // `syncCounter` increments on every source change (tracked synchronously).
+    // `ignoreCounter` records how many of those changes should be suppressed.
+    // Comparing the two on the async callback lets us know whether the change
+    // came purely from an ignored update or includes a real modification.
+    let ignoreCounter = 0;
+    let syncCounter = 0;
+
+    ignorePrevAsyncUpdates = () => {
+      ignoreCounter = syncCounter;
+    };
+
+    disposables.push(
+      watch(
+        source,
+        () => {
+          syncCounter++;
+        },
+        { ...watchOptions, flush: 'sync' },
+      ),
+    );
+
+    ignoreUpdates = (updater: () => void) => {
+      const syncCounterPrev = syncCounter;
+      updater();
+      ignoreCounter += syncCounter - syncCounterPrev;
+    };
+
+    disposables.push(
+      watch(
+        source,
+        (...args: any[]) => {
+          const ignore = ignoreCounter > 0 && ignoreCounter === syncCounter;
+          ignoreCounter = 0;
+          syncCounter = 0;
+
+          if (ignore)
+            return;
+
+          filteredCb(...args);
+        },
+        watchOptions,
+      ),
+    );
+
+    stop = () => {
+      for (const dispose of disposables) dispose();
+    };
+  }
+
+  return { ignoreUpdates, ignorePrevAsyncUpdates, stop };
+}
diff --git a/vue/toolkit/src/composables/watch/watchOnce/demo.vue b/vue/toolkit/src/composables/watch/watchOnce/demo.vue
new file mode 100644
index 0000000..a814661
--- /dev/null
+++ b/vue/toolkit/src/composables/watch/watchOnce/demo.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { watchOnce } from './index';
+
+// "First interaction" capture: watchOnce fires for the very first change to
+// the source and then tears itself down — later changes are ignored. Great for
+// recording the moment a user first engages with something.
+const volume = ref(50);
+const firstTouch = ref<number | null>(null);
+const totalChanges = ref(0);
+const armed = ref(true);
+
+function arm() {
+  firstTouch.value = null;
+  totalChanges.value = 0;
+  volume.value = 50;
+  armed.value = true;
+
+  watchOnce(volume, (value) => {
+    firstTouch.value = value;
+    armed.value = false;
+  });
+}
+
+// Arm immediately on setup (re-arming resets the demo).
+arm();
+
+function onInput() {
+  totalChanges.value++;
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Volume</span>
+        <span class="font-mono text-sm text-(--fg) tabular-nums">{{ volume }}</span>
+      </div>
+      <input
+        v-model.number="volume"
+        type="range"
+        min="0"
+        max="100"
+        class="w-full accent-(--accent) cursor-pointer"
+        @input="onInput"
+      >
+    </div>
+
+    <div
+      class="rounded-lg border bg-(--bg-inset) p-3 flex items-center justify-between transition"
+      :class="firstTouch === null ? 'border-(--border)' : 'border-emerald-500/30'"
+    >
+      <div class="flex flex-col">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">First captured value</span>
+        <span
+          class="font-mono text-2xl font-bold tabular-nums"
+          :class="firstTouch === null ? 'text-(--fg-subtle)' : 'text-emerald-600 dark:text-emerald-400'"
+        >
+          {{ firstTouch === null ? '—' : firstTouch }}
+        </span>
+      </div>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+        :class="armed
+          ? 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'
+          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        <span class="size-1.5 rounded-full" :class="armed ? 'bg-amber-500 animate-pulse' : 'bg-(--border-strong)'" />
+        {{ armed ? 'Armed' : 'Spent' }}
+      </span>
+    </div>
+
+    <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-sm">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Total drags</span>
+      <span class="font-mono text-(--fg) tabular-nums">{{ totalChanges }}</span>
+    </div>
+
+    <button
+      type="button"
+      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+      @click="arm"
+    >
+      Re-arm watcher
+    </button>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Drag the slider — only the <span class="font-mono text-(--fg-muted)">first</span> change is captured,
+      then the watcher stops. Total drags keeps climbing to prove it.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/watch/watchOnce/index.test.ts b/vue/toolkit/src/composables/watch/watchOnce/index.test.ts
new file mode 100644
index 0000000..a5ec01b
--- /dev/null
+++ b/vue/toolkit/src/composables/watch/watchOnce/index.test.ts
@@ -0,0 +1,147 @@
+import { describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, reactive, ref } from 'vue';
+import { watchOnce } from '.';
+
+describe(watchOnce, () => {
+  it('does not fire before the source changes', () => {
+    const count = ref(0);
+    const cb = vi.fn();
+
+    watchOnce(count, cb, { flush: 'sync' });
+
+    expect(cb).not.toHaveBeenCalled();
+  });
+
+  it('fires once on the first change', () => {
+    const count = ref(0);
+    const cb = vi.fn();
+
+    watchOnce(count, cb, { flush: 'sync' });
+
+    count.value = 1;
+    expect(cb).toHaveBeenCalledTimes(1);
+    expect(cb).toHaveBeenLastCalledWith(1, 0, expect.any(Function));
+  });
+
+  it('auto-stops after the first trigger', () => {
+    const count = ref(0);
+    const cb = vi.fn();
+
+    watchOnce(count, cb, { flush: 'sync' });
+
+    count.value = 1;
+    count.value = 2;
+    count.value = 3;
+
+    expect(cb).toHaveBeenCalledTimes(1);
+    expect(cb).toHaveBeenLastCalledWith(1, 0, expect.any(Function));
+  });
+
+  it('works with a getter source', () => {
+    const count = ref(0);
+    const cb = vi.fn();
+
+    watchOnce(() => count.value * 2, cb, { flush: 'sync' });
+
+    count.value = 5;
+    expect(cb).toHaveBeenCalledTimes(1);
+    expect(cb).toHaveBeenLastCalledWith(10, 0, expect.any(Function));
+
+    count.value = 6;
+    expect(cb).toHaveBeenCalledTimes(1);
+  });
+
+  it('works with an array of sources', () => {
+    const a = ref(0);
+    const b = ref('x');
+    const cb = vi.fn();
+
+    watchOnce([a, b], cb, { flush: 'sync' });
+
+    a.value = 1;
+    expect(cb).toHaveBeenCalledTimes(1);
+    expect(cb).toHaveBeenLastCalledWith([1, 'x'], [0, 'x'], expect.any(Function));
+
+    b.value = 'y';
+    expect(cb).toHaveBeenCalledTimes(1);
+  });
+
+  it('works with a reactive object source and deep option', () => {
+    const state = reactive({ nested: { value: 0 } });
+    const cb = vi.fn();
+
+    watchOnce(state, cb, { deep: true, flush: 'sync' });
+
+    state.nested.value = 1;
+    expect(cb).toHaveBeenCalledTimes(1);
+
+    state.nested.value = 2;
+    expect(cb).toHaveBeenCalledTimes(1);
+  });
+
+  it('fires immediately with the immediate option and then stops', () => {
+    const count = ref(0);
+    const cb = vi.fn();
+
+    watchOnce(count, cb, { immediate: true, flush: 'sync' });
+
+    expect(cb).toHaveBeenCalledTimes(1);
+    expect(cb).toHaveBeenLastCalledWith(0, undefined, expect.any(Function));
+
+    count.value = 1;
+    expect(cb).toHaveBeenCalledTimes(1);
+  });
+
+  it('respects a custom flush timing', async () => {
+    const count = ref(0);
+    const cb = vi.fn();
+
+    watchOnce(count, cb, { flush: 'post' });
+
+    count.value = 1;
+    expect(cb).not.toHaveBeenCalled();
+
+    await nextTick();
+    expect(cb).toHaveBeenCalledTimes(1);
+
+    count.value = 2;
+    await nextTick();
+    expect(cb).toHaveBeenCalledTimes(1);
+  });
+
+  it('returns a handle that stops watching before the first trigger', () => {
+    const count = ref(0);
+    const cb = vi.fn();
+
+    const stop = watchOnce(count, cb, { flush: 'sync' });
+
+    stop();
+
+    count.value = 1;
+    expect(cb).not.toHaveBeenCalled();
+  });
+
+  it('stops watching when the owning scope is disposed', () => {
+    const count = ref(0);
+    const cb = vi.fn();
+    const scope = effectScope();
+
+    scope.run(() => watchOnce(count, cb, { flush: 'sync' }));
+
+    scope.stop();
+
+    count.value = 1;
+    expect(cb).not.toHaveBeenCalled();
+  });
+
+  it('passes an onCleanup function to the callback', () => {
+    const count = ref(0);
+    const cb = vi.fn();
+
+    watchOnce(count, cb, { flush: 'sync' });
+
+    count.value = 1;
+    expect(cb).toHaveBeenCalledTimes(1);
+    expect(cb.mock.calls[0]![2]).toBeTypeOf('function');
+  });
+});
diff --git a/vue/toolkit/src/composables/watch/watchOnce/index.ts b/vue/toolkit/src/composables/watch/watchOnce/index.ts
new file mode 100644
index 0000000..be78bf0
--- /dev/null
+++ b/vue/toolkit/src/composables/watch/watchOnce/index.ts
@@ -0,0 +1,65 @@
+import { watch } from 'vue';
+import type { WatchCallback, WatchHandle, WatchOptions, WatchSource } from 'vue';
+
+type MultiWatchSources = Array<WatchSource<unknown> | object>;
+
+type MapSources<T> = {
+  [K in keyof T]: T[K] extends WatchSource<infer V> ? V : T[K] extends object ? T[K] : never;
+};
+
+type MapOldSources<T, Immediate> = {
+  [K in keyof T]: T[K] extends WatchSource<infer V>
+    ? Immediate extends true ? V | undefined : V
+    : T[K] extends object
+      ? Immediate extends true ? T[K] | undefined : T[K]
+      : never;
+};
+
+export type WatchOnceOptions<Immediate = boolean> = Omit<WatchOptions<Immediate>, 'once'>;
+
+/**
+ * @name watchOnce
+ * @category Watch
+ * @description Shorthand for `watch` that automatically stops after the callback fires once.
+ *
+ * @param {WatchSource<T> | T} source The reactive source (ref, getter, reactive object, or array of sources) to watch
+ * @param {WatchCallback} cb Invoked once with the new value, old value, and `onCleanup`
+ * @param {WatchOnceOptions} [options] Watch options (`immediate`, `deep`, `flush`); `once` is forced on
+ * @returns {WatchHandle} A handle to stop watching before the first trigger
+ *
+ * @example
+ * const count = ref(0);
+ * watchOnce(count, value => console.log('fired once with', value));
+ *
+ * @example
+ * watchOnce([a, b], ([a, b]) => console.log(a, b));
+ *
+ * @since 0.0.15
+ */
+export function watchOnce<T>(
+  source: WatchSource<T>,
+  cb: WatchCallback<T, T | undefined>,
+  options?: WatchOnceOptions<true>,
+): WatchHandle;
+
+export function watchOnce<T extends Readonly<MultiWatchSources>>(
+  source: [...T],
+  cb: WatchCallback<MapSources<T>, MapOldSources<T, true>>,
+  options?: WatchOnceOptions<true>,
+): WatchHandle;
+
+export function watchOnce<T extends object>(
+  source: T,
+  cb: WatchCallback<T, T | undefined>,
+  options?: WatchOnceOptions<true>,
+): WatchHandle;
+
+export function watchOnce(
+  source: WatchSource<unknown> | MultiWatchSources | object,
+  cb: WatchCallback,
+  options?: WatchOnceOptions,
+): WatchHandle {
+  // Vue's native `once` stops the watcher after its first trigger (the
+  // immediate run counts as that trigger), so no manual teardown is needed.
+  return watch(source, cb, { ...options, once: true });
+}
diff --git a/vue/toolkit/src/composables/watch/watchPausable/demo.vue b/vue/toolkit/src/composables/watch/watchPausable/demo.vue
new file mode 100644
index 0000000..e9332e2
--- /dev/null
+++ b/vue/toolkit/src/composables/watch/watchPausable/demo.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { watchPausable } from './index';
+
+const message = ref('Hello, world');
+const syncs = ref<{ id: number; value: string; at: string }[]>([]);
+let counter = 0;
+
+const { isActive, pause, resume, stop } = watchPausable(message, (value) => {
+  syncs.value.unshift({
+    id: ++counter,
+    value,
+    at: new Date().toLocaleTimeString(undefined, { hour12: false }),
+  });
+  if (syncs.value.length > 6)
+    syncs.value.length = 6;
+});
+
+const stopped = ref(false);
+
+function handleStop() {
+  stop();
+  stopped.value = true;
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex flex-col gap-1.5">
+      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Watched source
+      </label>
+      <input
+        v-model="message"
+        :disabled="stopped"
+        type="text"
+        placeholder="Type to trigger the watcher"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring) disabled:opacity-40"
+      >
+    </div>
+
+    <div class="flex items-center gap-2">
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
+        :class="stopped
+          ? 'border-(--border) bg-(--bg-inset) text-(--fg-subtle)'
+          : isActive
+            ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+            : 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'"
+      >
+        <span
+          class="size-1.5 rounded-full"
+          :class="stopped ? 'bg-(--fg-subtle)' : isActive ? 'bg-emerald-500' : 'bg-amber-500'"
+        />
+        {{ stopped ? 'Stopped' : isActive ? 'Watching' : 'Paused' }}
+      </span>
+
+      <div class="ml-auto flex gap-2">
+        <button
+          v-if="isActive"
+          :disabled="stopped"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          @click="pause"
+        >
+          Pause
+        </button>
+        <button
+          v-else
+          :disabled="stopped"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          @click="resume"
+        >
+          Resume
+        </button>
+        <button
+          :disabled="stopped"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          @click="handleStop"
+        >
+          Stop
+        </button>
+      </div>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="mb-2 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Sync log
+      </div>
+      <ul v-if="syncs.length" class="flex flex-col gap-1.5">
+        <li
+          v-for="entry in syncs"
+          :key="entry.id"
+          class="flex items-center gap-2 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2"
+        >
+          <span class="font-mono text-xs text-(--fg-subtle) tabular-nums">{{ entry.at }}</span>
+          <span class="truncate font-mono text-sm text-(--fg)">{{ entry.value || '—' }}</span>
+        </li>
+      </ul>
+      <p v-else class="py-2 text-sm text-(--fg-subtle)">
+        Edit the field above to record a sync.
+      </p>
+    </div>
+
+    <p class="text-xs text-(--fg-muted)">
+      While paused, source changes are ignored — no entry is logged until you resume.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/watch/watchPausable/index.test.ts b/vue/toolkit/src/composables/watch/watchPausable/index.test.ts
new file mode 100644
index 0000000..582773e
--- /dev/null
+++ b/vue/toolkit/src/composables/watch/watchPausable/index.test.ts
@@ -0,0 +1,265 @@
+import { describe, expect, it, vi } from 'vitest';
+import { effectScope, isReadonly, nextTick, reactive, ref } from 'vue';
+import { pausableWatch, watchPausable } from '.';
+import { debounceFilter } from '@/utils/filters';
+
+describe(watchPausable, () => {
+  it('invokes the callback on source change when active', async () => {
+    const scope = effectScope();
+    await scope.run(async () => {
+      const count = ref(0);
+      const cb = vi.fn();
+      watchPausable(count, cb);
+
+      count.value = 1;
+      await nextTick();
+      expect(cb).toHaveBeenCalledTimes(1);
+      expect(cb).toHaveBeenLastCalledWith(1, 0, expect.anything());
+    });
+    scope.stop();
+  });
+
+  it('starts active by default', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const { isActive } = watchPausable(ref(0), () => {});
+      expect(isActive.value).toBeTruthy();
+    });
+    scope.stop();
+  });
+
+  it('does not invoke the callback while paused', async () => {
+    const scope = effectScope();
+    await scope.run(async () => {
+      const count = ref(0);
+      const cb = vi.fn();
+      const { pause } = watchPausable(count, cb);
+
+      pause();
+      count.value = 1;
+      await nextTick();
+      expect(cb).not.toHaveBeenCalled();
+    });
+    scope.stop();
+  });
+
+  it('isActive reflects pause/resume', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const { pause, resume, isActive } = watchPausable(ref(0), () => {});
+
+      expect(isActive.value).toBeTruthy();
+      pause();
+      expect(isActive.value).toBeFalsy();
+      resume();
+      expect(isActive.value).toBeTruthy();
+    });
+    scope.stop();
+  });
+
+  it('resumes reacting to changes after resume', async () => {
+    const scope = effectScope();
+    await scope.run(async () => {
+      const count = ref(0);
+      const cb = vi.fn();
+      const { pause, resume } = watchPausable(count, cb);
+
+      pause();
+      count.value = 1;
+      await nextTick();
+      expect(cb).not.toHaveBeenCalled();
+
+      resume();
+      count.value = 2;
+      await nextTick();
+      expect(cb).toHaveBeenCalledTimes(1);
+      expect(cb).toHaveBeenLastCalledWith(2, 1, expect.anything());
+    });
+    scope.stop();
+  });
+
+  it('does not replay changes that happened while paused', async () => {
+    const scope = effectScope();
+    await scope.run(async () => {
+      const count = ref(0);
+      const cb = vi.fn();
+      const { pause, resume } = watchPausable(count, cb);
+
+      pause();
+      count.value = 1;
+      count.value = 2;
+      await nextTick();
+      resume();
+      await nextTick();
+
+      // Resume alone must not fire the callback for the missed changes.
+      expect(cb).not.toHaveBeenCalled();
+    });
+    scope.stop();
+  });
+
+  it('respects initialState: paused', async () => {
+    const scope = effectScope();
+    await scope.run(async () => {
+      const count = ref(0);
+      const cb = vi.fn();
+      const { isActive, resume } = watchPausable(count, cb, { initialState: 'paused' });
+
+      expect(isActive.value).toBeFalsy();
+      count.value = 1;
+      await nextTick();
+      expect(cb).not.toHaveBeenCalled();
+
+      resume();
+      count.value = 2;
+      await nextTick();
+      expect(cb).toHaveBeenCalledTimes(1);
+    });
+    scope.stop();
+  });
+
+  it('stop() halts the watcher permanently', async () => {
+    const scope = effectScope();
+    await scope.run(async () => {
+      const count = ref(0);
+      const cb = vi.fn();
+      const { stop, resume } = watchPausable(count, cb);
+
+      stop();
+      count.value = 1;
+      await nextTick();
+      expect(cb).not.toHaveBeenCalled();
+
+      // resume cannot revive a stopped watcher
+      resume();
+      count.value = 2;
+      await nextTick();
+      expect(cb).not.toHaveBeenCalled();
+    });
+    scope.stop();
+  });
+
+  it('returns a readonly isActive ref', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const { isActive } = watchPausable(ref(0), () => {});
+      expect(isReadonly(isActive)).toBeTruthy();
+    });
+    scope.stop();
+  });
+
+  it('supports multiple sources', async () => {
+    const scope = effectScope();
+    await scope.run(async () => {
+      const a = ref(0);
+      const b = ref('x');
+      const cb = vi.fn();
+      watchPausable([a, b], cb);
+
+      a.value = 1;
+      await nextTick();
+      expect(cb).toHaveBeenLastCalledWith([1, 'x'], [0, 'x'], expect.anything());
+
+      b.value = 'y';
+      await nextTick();
+      expect(cb).toHaveBeenLastCalledWith([1, 'y'], [1, 'x'], expect.anything());
+    });
+    scope.stop();
+  });
+
+  it('supports a getter source', async () => {
+    const scope = effectScope();
+    await scope.run(async () => {
+      const state = reactive({ n: 1 });
+      const cb = vi.fn();
+      watchPausable(() => state.n, cb);
+
+      state.n = 2;
+      await nextTick();
+      expect(cb).toHaveBeenLastCalledWith(2, 1, expect.anything());
+    });
+    scope.stop();
+  });
+
+  it('supports a reactive object source with deep', async () => {
+    const scope = effectScope();
+    await scope.run(async () => {
+      const state = reactive({ nested: { n: 1 } });
+      const cb = vi.fn();
+      watchPausable(state, cb, { deep: true });
+
+      state.nested.n = 2;
+      await nextTick();
+      expect(cb).toHaveBeenCalledTimes(1);
+    });
+    scope.stop();
+  });
+
+  it('fires synchronously with flush: sync', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const cb = vi.fn();
+      watchPausable(count, cb, { flush: 'sync' });
+
+      count.value = 1;
+      expect(cb).toHaveBeenCalledTimes(1);
+    });
+    scope.stop();
+  });
+
+  it('honors immediate option', () => {
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const cb = vi.fn();
+      watchPausable(count, cb, { immediate: true, flush: 'sync' });
+
+      expect(cb).toHaveBeenCalledTimes(1);
+      expect(cb).toHaveBeenLastCalledWith(0, undefined, expect.anything());
+    });
+    scope.stop();
+  });
+
+  it('composes with a custom eventFilter (debounce)', async () => {
+    vi.useFakeTimers();
+    const scope = effectScope();
+    scope.run(() => {
+      const count = ref(0);
+      const cb = vi.fn();
+      const { pause } = watchPausable(count, cb, {
+        eventFilter: debounceFilter(100),
+        flush: 'sync',
+      });
+
+      count.value = 1;
+      count.value = 2;
+      expect(cb).not.toHaveBeenCalled();
+      vi.advanceTimersByTime(100);
+      expect(cb).toHaveBeenCalledTimes(1);
+
+      // While paused the filter must not even be reached.
+      pause();
+      count.value = 3;
+      vi.advanceTimersByTime(100);
+      expect(cb).toHaveBeenCalledTimes(1);
+    });
+    scope.stop();
+    vi.useRealTimers();
+  });
+
+  it('pausableWatch is an alias for watchPausable', () => {
+    expect(pausableWatch).toBe(watchPausable);
+  });
+
+  it('works outside an effect scope (SSR-style, manual stop)', async () => {
+    const count = ref(0);
+    const cb = vi.fn();
+    const { stop } = watchPausable(count, cb);
+
+    count.value = 1;
+    await nextTick();
+    expect(cb).toHaveBeenCalledTimes(1);
+    stop();
+  });
+});
diff --git a/vue/toolkit/src/composables/watch/watchPausable/index.ts b/vue/toolkit/src/composables/watch/watchPausable/index.ts
new file mode 100644
index 0000000..510aa37
--- /dev/null
+++ b/vue/toolkit/src/composables/watch/watchPausable/index.ts
@@ -0,0 +1,126 @@
+import { ref, shallowReadonly, watch } from 'vue';
+import type {
+  MultiWatchSources,
+  Ref,
+  WatchCallback,
+  WatchOptions,
+  WatchSource,
+  WatchStopHandle,
+} from 'vue';
+import { bypassFilter, createFilterWrapper } from '@/utils/filters';
+import type { ConfigurableEventFilter, EventFilter } from '@/utils/filters';
+
+type MapSources<T> = {
+  [K in keyof T]: T[K] extends WatchSource<infer V> ? V : never;
+};
+
+type MapOldSources<T, Immediate> = {
+  [K in keyof T]: T[K] extends WatchSource<infer V>
+    ? Immediate extends true ? V | undefined : V
+    : never;
+};
+
+export interface UseWatchPausableOptions<Immediate>
+  extends WatchOptions<Immediate>, ConfigurableEventFilter {
+  /**
+   * Whether the watcher starts in an active (running) or paused state.
+   *
+   * @default 'active'
+   */
+  initialState?: 'active' | 'paused';
+}
+
+export interface UseWatchPausableReturn {
+  /**
+   * Whether the watcher is currently active. While `false`, source changes are
+   * ignored and the callback is not invoked.
+   */
+  isActive: Readonly<Ref<boolean>>;
+  /**
+   * Pause the watcher. Changes to the source are ignored until {@link resume}.
+   */
+  pause: () => void;
+  /**
+   * Resume the watcher so it reacts to source changes again.
+   */
+  resume: () => void;
+  /**
+   * Stop the watcher entirely. It cannot be restarted afterwards.
+   */
+  stop: WatchStopHandle;
+}
+
+/**
+ * @name watchPausable
+ * @category Watch
+ * @description A `watch` whose execution can be paused and resumed on demand via a pausable event filter.
+ *
+ * @param {WatchSource | WatchSource[] | object} source The watch source (ref, getter, reactive object, or an array of sources)
+ * @param {WatchCallback} cb The callback invoked when an active source changes
+ * @param {UseWatchPausableOptions} [options={}] Watch options plus `eventFilter` and `initialState`
+ * @returns {UseWatchPausableReturn} `{ stop, pause, resume, isActive }`
+ *
+ * @example
+ * const count = ref(0);
+ * const { pause, resume, isActive } = watchPausable(count, (value) => {
+ *   console.log('changed to', value);
+ * });
+ *
+ * pause();
+ * count.value++; // callback not called
+ * resume();
+ * count.value++; // callback called
+ *
+ * @since 0.0.15
+ */
+export function watchPausable<T extends Readonly<MultiWatchSources>, Immediate extends Readonly<boolean> = false>(
+  sources: [...T],
+  cb: WatchCallback<MapSources<T>, MapOldSources<T, Immediate>>,
+  options?: UseWatchPausableOptions<Immediate>,
+): UseWatchPausableReturn;
+export function watchPausable<T, Immediate extends Readonly<boolean> = false>(
+  source: WatchSource<T>,
+  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
+  options?: UseWatchPausableOptions<Immediate>,
+): UseWatchPausableReturn;
+export function watchPausable<T extends object, Immediate extends Readonly<boolean> = false>(
+  source: T,
+  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
+  options?: UseWatchPausableOptions<Immediate>,
+): UseWatchPausableReturn;
+export function watchPausable<Immediate extends Readonly<boolean> = false>(
+  source: any,
+  cb: any,
+  options: UseWatchPausableOptions<Immediate> = {},
+): UseWatchPausableReturn {
+  const {
+    eventFilter: filter = bypassFilter,
+    initialState = 'active',
+    ...watchOptions
+  } = options;
+
+  const isActive = ref(initialState !== 'paused');
+
+  const eventFilter: EventFilter = (invoke) => {
+    if (isActive.value)
+      filter(invoke);
+  };
+
+  const stop = watch(
+    source,
+    createFilterWrapper(eventFilter, cb),
+    watchOptions,
+  );
+
+  return {
+    isActive: shallowReadonly(isActive),
+    pause: () => { isActive.value = false; },
+    resume: () => { isActive.value = true; },
+    stop,
+  };
+}
+
+/**
+ * Alias for {@link watchPausable}.
+ */
+export const pausableWatch = watchPausable;
diff --git a/vue/toolkit/src/composables/watch/watchThrottled/demo.vue b/vue/toolkit/src/composables/watch/watchThrottled/demo.vue
new file mode 100644
index 0000000..e9aad8e
--- /dev/null
+++ b/vue/toolkit/src/composables/watch/watchThrottled/demo.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { watchThrottled } from './index';
+
+const throttle = ref(500);
+const volume = ref(42);
+const saved = ref(42);
+const saveCount = ref(0);
+const flash = ref(false);
+
+watchThrottled(volume, (value) => {
+  saved.value = value;
+  saveCount.value++;
+  flash.value = true;
+  setTimeout(() => { flash.value = false; }, 220);
+}, { throttle });
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex flex-col gap-2">
+      <div class="flex items-baseline justify-between">
+        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Live value
+        </label>
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ volume }}</span>
+      </div>
+      <input
+        v-model.number="volume"
+        type="range"
+        min="0"
+        max="100"
+        class="w-full cursor-pointer accent-(--accent)"
+      >
+      <p class="text-xs text-(--fg-muted)">
+        Drag rapidly — updates fire continuously, but the throttled callback only commits at most once per interval.
+      </p>
+    </div>
+
+    <div class="grid grid-cols-2 gap-3">
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Saved (throttled)
+        </div>
+        <div
+          class="mt-1 font-mono text-3xl font-bold tabular-nums transition-colors duration-150"
+          :class="flash ? 'text-emerald-600 dark:text-emerald-400' : 'text-(--fg)'"
+        >
+          {{ saved }}
+        </div>
+      </div>
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Commits
+        </div>
+        <div class="mt-1 font-mono text-3xl font-bold tabular-nums text-(--fg)">
+          {{ saveCount }}
+        </div>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-2 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex items-baseline justify-between">
+        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Throttle interval
+        </label>
+        <span class="font-mono text-sm tabular-nums text-(--fg-muted)">{{ throttle }} ms</span>
+      </div>
+      <input
+        v-model.number="throttle"
+        type="range"
+        min="0"
+        max="2000"
+        step="100"
+        class="w-full cursor-pointer accent-(--accent)"
+      >
+      <p class="text-xs text-(--fg-muted)">
+        The interval is reactive — change it and the next throttle window adapts immediately.
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/watch/watchThrottled/index.test.ts b/vue/toolkit/src/composables/watch/watchThrottled/index.test.ts
new file mode 100644
index 0000000..5348041
--- /dev/null
+++ b/vue/toolkit/src/composables/watch/watchThrottled/index.test.ts
@@ -0,0 +1,214 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, reactive, ref } from 'vue';
+import { watchThrottled } from '.';
+
+describe(watchThrottled, () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.useRealTimers();
+  });
+
+  it('does not fire before the source changes', async () => {
+    const count = ref(0);
+    const cb = vi.fn();
+
+    watchThrottled(count, cb, { throttle: 100 });
+
+    await nextTick();
+    expect(cb).not.toHaveBeenCalled();
+  });
+
+  it('fires immediately on the leading edge', async () => {
+    const count = ref(0);
+    const cb = vi.fn();
+
+    watchThrottled(count, cb, { throttle: 100, flush: 'sync' });
+
+    count.value = 1;
+    expect(cb).toHaveBeenCalledTimes(1);
+    expect(cb).toHaveBeenLastCalledWith(1, 0, expect.any(Function));
+  });
+
+  it('throttles rapid changes to one leading + one trailing call', async () => {
+    const count = ref(0);
+    const cb = vi.fn();
+
+    watchThrottled(count, cb, { throttle: 100, flush: 'sync' });
+
+    count.value = 1; // leading -> fires with 1
+    count.value = 2;
+    count.value = 3; // scheduled trailing -> fires with latest (3)
+
+    expect(cb).toHaveBeenCalledTimes(1);
+    expect(cb).toHaveBeenLastCalledWith(1, 0, expect.any(Function));
+
+    await vi.advanceTimersByTimeAsync(100);
+
+    expect(cb).toHaveBeenCalledTimes(2);
+    expect(cb).toHaveBeenLastCalledWith(3, 2, expect.any(Function));
+  });
+
+  it('suppresses the leading call when leading is false', async () => {
+    const count = ref(0);
+    const cb = vi.fn();
+
+    watchThrottled(count, cb, { throttle: 100, leading: false, flush: 'sync' });
+
+    count.value = 1;
+    expect(cb).not.toHaveBeenCalled();
+
+    await vi.advanceTimersByTimeAsync(100);
+    expect(cb).toHaveBeenCalledTimes(1);
+    expect(cb).toHaveBeenLastCalledWith(1, 0, expect.any(Function));
+  });
+
+  it('suppresses the trailing call when trailing is false', async () => {
+    const count = ref(0);
+    const cb = vi.fn();
+
+    watchThrottled(count, cb, { throttle: 100, trailing: false, flush: 'sync' });
+
+    count.value = 1; // leading
+    count.value = 2;
+    count.value = 3;
+
+    expect(cb).toHaveBeenCalledTimes(1);
+    expect(cb).toHaveBeenLastCalledWith(1, 0, expect.any(Function));
+
+    await vi.advanceTimersByTimeAsync(200);
+
+    // no trailing invocation
+    expect(cb).toHaveBeenCalledTimes(1);
+  });
+
+  it('behaves like a plain watch when throttle is 0', async () => {
+    const count = ref(0);
+    const cb = vi.fn();
+
+    watchThrottled(count, cb, { throttle: 0, flush: 'sync' });
+
+    count.value = 1;
+    count.value = 2;
+    count.value = 3;
+
+    expect(cb).toHaveBeenCalledTimes(3);
+    expect(cb).toHaveBeenLastCalledWith(3, 2, expect.any(Function));
+  });
+
+  it('works with a getter source', async () => {
+    const count = ref(0);
+    const cb = vi.fn();
+
+    watchThrottled(() => count.value * 2, cb, { throttle: 100, flush: 'sync' });
+
+    count.value = 5;
+    expect(cb).toHaveBeenCalledTimes(1);
+    expect(cb).toHaveBeenLastCalledWith(10, 0, expect.any(Function));
+  });
+
+  it('works with an array of sources', async () => {
+    const a = ref(0);
+    const b = ref('x');
+    const cb = vi.fn();
+
+    watchThrottled([a, b], cb, { throttle: 100, flush: 'sync' });
+
+    a.value = 1;
+    expect(cb).toHaveBeenCalledTimes(1);
+    expect(cb).toHaveBeenLastCalledWith([1, 'x'], [0, 'x'], expect.any(Function));
+  });
+
+  it('works with a reactive object source and deep option', async () => {
+    const state = reactive({ nested: { value: 0 } });
+    const cb = vi.fn();
+
+    watchThrottled(state, cb, { throttle: 100, deep: true, flush: 'sync' });
+
+    state.nested.value = 1;
+    expect(cb).toHaveBeenCalledTimes(1);
+  });
+
+  it('honors a reactive throttle interval', async () => {
+    const count = ref(0);
+    const interval = ref(100);
+    const cb = vi.fn();
+
+    watchThrottled(count, cb, { throttle: interval, flush: 'sync' });
+
+    count.value = 1; // leading at t=0
+    count.value = 2; // schedules trailing at t=100
+    expect(cb).toHaveBeenCalledTimes(1);
+
+    await vi.advanceTimersByTimeAsync(100);
+    expect(cb).toHaveBeenCalledTimes(2);
+  });
+
+  it('respects a post flush timing', async () => {
+    const count = ref(0);
+    const cb = vi.fn();
+
+    watchThrottled(count, cb, { throttle: 100, flush: 'post' });
+
+    count.value = 1;
+    expect(cb).not.toHaveBeenCalled();
+
+    await nextTick();
+    expect(cb).toHaveBeenCalledTimes(1);
+  });
+
+  it('fires immediately with the immediate option', async () => {
+    const count = ref(5);
+    const cb = vi.fn();
+
+    watchThrottled(count, cb, { throttle: 100, immediate: true, flush: 'sync' });
+
+    expect(cb).toHaveBeenCalledTimes(1);
+    expect(cb).toHaveBeenLastCalledWith(5, undefined, expect.any(Function));
+  });
+
+  it('returns a handle that stops watching', async () => {
+    const count = ref(0);
+    const cb = vi.fn();
+
+    const stop = watchThrottled(count, cb, { throttle: 100, flush: 'sync' });
+
+    stop();
+
+    count.value = 1;
+    await vi.advanceTimersByTimeAsync(100);
+    expect(cb).not.toHaveBeenCalled();
+  });
+
+  it('stops watching when the owning scope is disposed', async () => {
+    const count = ref(0);
+    const cb = vi.fn();
+    const scope = effectScope();
+
+    scope.run(() => watchThrottled(count, cb, { throttle: 100, flush: 'sync' }));
+
+    scope.stop();
+
+    count.value = 1;
+    await vi.advanceTimersByTimeAsync(100);
+    expect(cb).not.toHaveBeenCalled();
+  });
+
+  it('passes onCleanup to the callback', async () => {
+    const count = ref(0);
+    const cleanup = vi.fn();
+
+    watchThrottled(count, (_value, _old, onCleanup) => {
+      onCleanup(cleanup);
+    }, { throttle: 100, flush: 'sync' });
+
+    count.value = 1;
+    count.value = 2; // schedules trailing, which triggers cleanup of the leading run
+
+    await vi.advanceTimersByTimeAsync(100);
+    expect(cleanup).toHaveBeenCalled();
+  });
+});
diff --git a/vue/toolkit/src/composables/watch/watchThrottled/index.ts b/vue/toolkit/src/composables/watch/watchThrottled/index.ts
new file mode 100644
index 0000000..bd27521
--- /dev/null
+++ b/vue/toolkit/src/composables/watch/watchThrottled/index.ts
@@ -0,0 +1,96 @@
+import { watch } from 'vue';
+import type { MaybeRefOrGetter, WatchCallback, WatchHandle, WatchOptions, WatchSource } from 'vue';
+import { createFilterWrapper, throttleFilter } from '@/utils/filters';
+import type { EventFilter } from '@/utils/filters';
+
+type MultiWatchSources = Array<WatchSource<unknown> | object>;
+
+type MapSources<T> = {
+  [K in keyof T]: T[K] extends WatchSource<infer V> ? V : T[K] extends object ? T[K] : never;
+};
+
+type MapOldSources<T, Immediate> = {
+  [K in keyof T]: T[K] extends WatchSource<infer V>
+    ? Immediate extends true ? V | undefined : V
+    : T[K] extends object
+      ? Immediate extends true ? T[K] | undefined : T[K]
+      : never;
+};
+
+export interface WatchThrottledOptions<Immediate> extends WatchOptions<Immediate> {
+  /**
+   * Throttle interval in milliseconds (can be reactive)
+   *
+   * @default 0
+   */
+  throttle?: MaybeRefOrGetter<number>;
+  /**
+   * Invoke the callback on the trailing edge of the interval
+   *
+   * @default true
+   */
+  trailing?: boolean;
+  /**
+   * Invoke the callback on the leading edge of the interval
+   *
+   * @default true
+   */
+  leading?: boolean;
+}
+
+/**
+ * @name watchThrottled
+ * @category Watch
+ * @description Like `watch`, but throttles the callback so it fires at most once per interval.
+ *
+ * @param {WatchSource<T> | T} source The reactive source (ref, getter, reactive object, or array of sources) to watch
+ * @param {WatchCallback} cb Invoked with the new value, old value, and `onCleanup`, throttled by the interval
+ * @param {WatchThrottledOptions} [options] Watch options plus `throttle` (ms), `leading`, and `trailing`
+ * @returns {WatchHandle} A handle to stop watching
+ *
+ * @example
+ * const count = ref(0);
+ * watchThrottled(count, value => console.log(value), { throttle: 500 });
+ *
+ * @example
+ * watchThrottled([a, b], ([a, b]) => save(a, b), { throttle: 1000, leading: false });
+ *
+ * @since 0.0.15
+ */
+export function watchThrottled<T, Immediate extends Readonly<boolean> = false>(
+  source: WatchSource<T>,
+  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
+  options?: WatchThrottledOptions<Immediate>,
+): WatchHandle;
+
+export function watchThrottled<T extends Readonly<MultiWatchSources>, Immediate extends Readonly<boolean> = false>(
+  source: [...T],
+  cb: WatchCallback<MapSources<T>, MapOldSources<T, Immediate>>,
+  options?: WatchThrottledOptions<Immediate>,
+): WatchHandle;
+
+export function watchThrottled<T extends object, Immediate extends Readonly<boolean> = false>(
+  source: T,
+  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
+  options?: WatchThrottledOptions<Immediate>,
+): WatchHandle;
+
+export function watchThrottled(
+  source: WatchSource<unknown> | MultiWatchSources | object,
+  cb: WatchCallback,
+  options: WatchThrottledOptions<boolean> = {},
+): WatchHandle {
+  const {
+    throttle = 0,
+    trailing = true,
+    leading = true,
+    eventFilter = throttleFilter(throttle, trailing, leading),
+    ...watchOptions
+  } = options as WatchThrottledOptions<boolean> & { eventFilter?: EventFilter };
+
+  return watch(
+    source,
+    createFilterWrapper(eventFilter, cb),
+    watchOptions,
+  );
+}
diff --git a/vue/toolkit/src/composables/watch/whenever/demo.vue b/vue/toolkit/src/composables/watch/whenever/demo.vue
new file mode 100644
index 0000000..f0640ff
--- /dev/null
+++ b/vue/toolkit/src/composables/watch/whenever/demo.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { whenever } from './index';
+
+const code = ref('');
+const isValid = computed(() => code.value.length >= 6);
+const events = ref<{ id: number; at: string }[]>([]);
+let counter = 0;
+
+// Fires only when the gate transitions into a truthy (valid) state.
+whenever(isValid, () => {
+  events.value.unshift({
+    id: ++counter,
+    at: new Date().toLocaleTimeString(undefined, { hour12: false }),
+  });
+  if (events.value.length > 5)
+    events.value.length = 5;
+});
+
+// `once` variant — fires a single celebration the first time we hit 12 chars.
+const celebrated = ref(false);
+whenever(() => code.value.length >= 12, () => {
+  celebrated.value = true;
+}, { once: true });
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex flex-col gap-1.5">
+      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Access code
+      </label>
+      <input
+        v-model="code"
+        type="text"
+        placeholder="Enter at least 6 characters"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+      <div class="flex items-center justify-between text-xs">
+        <span class="text-(--fg-subtle)">{{ code.length }} / 6 chars</span>
+        <span
+          class="font-medium"
+          :class="isValid ? 'text-emerald-600 dark:text-emerald-400' : 'text-(--fg-subtle)'"
+        >
+          {{ isValid ? 'valid' : 'too short' }}
+        </span>
+      </div>
+    </div>
+
+    <div
+      v-if="celebrated"
+      class="rounded-xl border border-sky-500/30 bg-sky-500/10 px-4 py-3 text-sm font-medium text-sky-600 dark:text-sky-400"
+    >
+      Reached 12+ characters — this fired exactly once.
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="mb-2 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Became valid at
+      </div>
+      <ul v-if="events.length" class="flex flex-col gap-1.5">
+        <li
+          v-for="event in events"
+          :key="event.id"
+          class="flex items-center gap-2 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2"
+        >
+          <span class="size-1.5 rounded-full bg-emerald-500" />
+          <span class="font-mono text-sm text-(--fg) tabular-nums">{{ event.at }}</span>
+        </li>
+      </ul>
+      <p v-else class="py-2 text-sm text-(--fg-subtle)">
+        The callback only runs when the source turns truthy — type a valid code to log an event, then clear it and try again.
+      </p>
+    </div>
+
+    <p class="text-xs text-(--fg-muted)">
+      Unlike a plain <code class="rounded bg-(--bg-inset) px-1 py-0.5 font-mono">watch</code>, the callback skips every falsy transition.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/watch/whenever/index.test.ts b/vue/toolkit/src/composables/watch/whenever/index.test.ts
new file mode 100644
index 0000000..1727ba5
--- /dev/null
+++ b/vue/toolkit/src/composables/watch/whenever/index.test.ts
@@ -0,0 +1,167 @@
+import { describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, reactive, ref } from 'vue';
+import { whenever } from '.';
+
+describe(whenever, () => {
+  it('does not fire while the source is falsy', () => {
+    const ready = ref(false);
+    const cb = vi.fn();
+
+    whenever(ready, cb, { flush: 'sync' });
+
+    expect(cb).not.toHaveBeenCalled();
+  });
+
+  it('fires when the source becomes truthy', () => {
+    const ready = ref(false);
+    const cb = vi.fn();
+
+    whenever(ready, cb, { flush: 'sync' });
+
+    ready.value = true;
+    expect(cb).toHaveBeenCalledTimes(1);
+    expect(cb).toHaveBeenLastCalledWith(true, false, expect.any(Function));
+  });
+
+  it('does not fire when the source becomes falsy again', () => {
+    const ready = ref(true);
+    const cb = vi.fn();
+
+    whenever(ready, cb, { flush: 'sync' });
+
+    ready.value = false;
+    expect(cb).not.toHaveBeenCalled();
+
+    ready.value = true;
+    expect(cb).toHaveBeenCalledTimes(1);
+  });
+
+  it('fires repeatedly on each truthy transition', () => {
+    const value = ref(0);
+    const cb = vi.fn();
+
+    whenever(value, cb, { flush: 'sync' });
+
+    value.value = 1;
+    value.value = 0;
+    value.value = 2;
+    value.value = 0;
+    value.value = 3;
+
+    expect(cb).toHaveBeenCalledTimes(3);
+  });
+
+  it('works with a getter source', () => {
+    const count = ref(0);
+    const cb = vi.fn();
+
+    whenever(() => count.value > 5, cb, { flush: 'sync' });
+
+    count.value = 3;
+    expect(cb).not.toHaveBeenCalled();
+
+    count.value = 10;
+    expect(cb).toHaveBeenCalledTimes(1);
+    expect(cb).toHaveBeenLastCalledWith(true, false, expect.any(Function));
+  });
+
+  it('fires immediately when source is already truthy with immediate', () => {
+    const ready = ref(true);
+    const cb = vi.fn();
+
+    whenever(ready, cb, { immediate: true, flush: 'sync' });
+
+    expect(cb).toHaveBeenCalledTimes(1);
+    expect(cb).toHaveBeenLastCalledWith(true, undefined, expect.any(Function));
+  });
+
+  it('does not fire immediately when source is falsy with immediate', () => {
+    const ready = ref(false);
+    const cb = vi.fn();
+
+    whenever(ready, cb, { immediate: true, flush: 'sync' });
+
+    expect(cb).not.toHaveBeenCalled();
+  });
+
+  it('only fires once with the once option', async () => {
+    const value = ref(0);
+    const cb = vi.fn();
+
+    whenever(value, cb, { once: true, flush: 'sync' });
+
+    value.value = 1;
+    expect(cb).toHaveBeenCalledTimes(1);
+
+    // once schedules teardown on the next tick
+    await nextTick();
+
+    value.value = 0;
+    value.value = 2;
+    expect(cb).toHaveBeenCalledTimes(1);
+  });
+
+  it('tracks deep mutations with the deep option', () => {
+    const state = reactive({ active: false });
+    const cb = vi.fn();
+
+    whenever(() => state.active, cb, { deep: true, flush: 'sync' });
+
+    state.active = true;
+    expect(cb).toHaveBeenCalledTimes(1);
+  });
+
+  it('respects a custom flush timing', async () => {
+    const ready = ref(false);
+    const cb = vi.fn();
+
+    whenever(ready, cb, { flush: 'post' });
+
+    ready.value = true;
+    // post flush is deferred until after the next tick
+    expect(cb).not.toHaveBeenCalled();
+
+    await nextTick();
+    expect(cb).toHaveBeenCalledTimes(1);
+  });
+
+  it('returns a handle that stops watching when called', () => {
+    const ready = ref(false);
+    const cb = vi.fn();
+
+    const stop = whenever(ready, cb, { flush: 'sync' });
+
+    stop();
+
+    ready.value = true;
+    expect(cb).not.toHaveBeenCalled();
+  });
+
+  it('stops watching when the owning scope is disposed', () => {
+    const ready = ref(false);
+    const cb = vi.fn();
+    const scope = effectScope();
+
+    scope.run(() => whenever(ready, cb, { flush: 'sync' }));
+
+    ready.value = true;
+    expect(cb).toHaveBeenCalledTimes(1);
+
+    scope.stop();
+
+    ready.value = false;
+    ready.value = true;
+    expect(cb).toHaveBeenCalledTimes(1);
+  });
+
+  it('passes the truthy value to the callback for non-boolean sources', () => {
+    const user = ref<{ id: number } | null>(null);
+    const cb = vi.fn();
+
+    whenever(user, cb, { flush: 'sync' });
+
+    const next = { id: 1 };
+    user.value = next;
+    expect(cb).toHaveBeenLastCalledWith(next, null, expect.any(Function));
+  });
+});
diff --git a/vue/toolkit/src/composables/watch/whenever/index.ts b/vue/toolkit/src/composables/watch/whenever/index.ts
new file mode 100644
index 0000000..f8bd483
--- /dev/null
+++ b/vue/toolkit/src/composables/watch/whenever/index.ts
@@ -0,0 +1,60 @@
+import { nextTick, watch } from 'vue';
+import type { WatchCallback, WatchHandle, WatchOptions, WatchSource } from 'vue';
+
+type Truthy<T> = T extends false | null | undefined | 0 | '' ? never : T;
+
+export interface WheneverOptions<Immediate = boolean> extends WatchOptions<Immediate> {
+  /**
+   * Only trigger the callback once when the source becomes truthy.
+   *
+   * Overrides the `once` option inherited from `WatchOptions`.
+   *
+   * @default false
+   */
+  once?: boolean;
+}
+
+/**
+ * @name whenever
+ * @category Watch
+ * @description Shorthand for watching a source to be truthy. Behaves like `watch`, but the callback only fires when the resolved value is truthy.
+ *
+ * @param {WatchSource<T>} source The reactive source to watch
+ * @param {WatchCallback} cb Invoked with the truthy value, previous value, and `onCleanup`
+ * @param {WheneverOptions} [options] Watch options (`immediate`, `deep`, `flush`, `once`)
+ * @returns {WatchHandle} A handle to stop watching
+ *
+ * @example
+ * const ready = ref(false);
+ * whenever(ready, () => console.log('ready!'));
+ *
+ * @example
+ * whenever(() => count.value > 5, () => console.log('over five'), { once: true });
+ *
+ * @since 0.0.15
+ */
+export function whenever<T>(source: WatchSource<T>, cb: WatchCallback<Truthy<T>, T | undefined>, options?: WheneverOptions<true>): WatchHandle;
+export function whenever<T>(source: WatchSource<T>, cb: WatchCallback<Truthy<T>, T>, options?: WheneverOptions<false>): WatchHandle;
+export function whenever<T>(
+  source: WatchSource<T>,
+  cb: WatchCallback<Truthy<T>, T | undefined>,
+  options?: WheneverOptions,
+): WatchHandle {
+  const stop = watch(
+    source,
+    (value, oldValue, onCleanup) => {
+      if (value) {
+        if (options?.once)
+          nextTick(() => stop());
+
+        cb(value as Truthy<T>, oldValue, onCleanup);
+      }
+    },
+    {
+      ...options,
+      once: false,
+    } as WatchOptions,
+  );
+
+  return stop;
+}
diff --git a/web/vue/src/index.ts b/vue/toolkit/src/index.ts
similarity index 69%
rename from web/vue/src/index.ts
rename to vue/toolkit/src/index.ts
index 13a9fc4..9f9c5fc 100644
--- a/web/vue/src/index.ts
+++ b/vue/toolkit/src/index.ts
@@ -1,3 +1,3 @@
 export * from './composables';
 export * from './utils';
-export * from './types';
\ No newline at end of file
+export * from './types';
diff --git a/vue/toolkit/src/types/dom.ts b/vue/toolkit/src/types/dom.ts
new file mode 100644
index 0000000..190efc0
--- /dev/null
+++ b/vue/toolkit/src/types/dom.ts
@@ -0,0 +1,95 @@
+/**
+ * Ambient type shims for browser APIs that are not (yet) part of TypeScript's
+ * bundled `lib.dom.d.ts`. Declared globally so composables can reference them
+ * as bare types without importing. Keep these minimal — only the surface the
+ * toolkit actually consumes.
+ */
+
+declare global {
+  // ---- Web Bluetooth API (https://webbluetoothcg.github.io/web-bluetooth/) ----
+
+  type BluetoothServiceUUID = number | string;
+  type BluetoothCharacteristicUUID = number | string;
+  type BluetoothDescriptorUUID = number | string;
+
+  interface BluetoothDataFilter {
+    readonly dataPrefix?: BufferSource;
+    readonly mask?: BufferSource;
+  }
+
+  interface BluetoothManufacturerDataFilter extends BluetoothDataFilter {
+    companyIdentifier: number;
+  }
+
+  interface BluetoothServiceDataFilter extends BluetoothDataFilter {
+    service: BluetoothServiceUUID;
+  }
+
+  interface BluetoothLEScanFilter {
+    readonly name?: string;
+    readonly namePrefix?: string;
+    readonly services?: BluetoothServiceUUID[];
+    readonly manufacturerData?: BluetoothManufacturerDataFilter[];
+    readonly serviceData?: BluetoothServiceDataFilter[];
+  }
+
+  interface RequestDeviceOptions {
+    filters?: BluetoothLEScanFilter[];
+    optionalServices?: BluetoothServiceUUID[];
+    optionalManufacturerData?: number[];
+    acceptAllDevices?: boolean;
+  }
+
+  interface BluetoothRemoteGATTServer {
+    readonly device: BluetoothDevice;
+    readonly connected: boolean;
+    connect: () => Promise<BluetoothRemoteGATTServer>;
+    disconnect: () => void;
+    getPrimaryService: (service: BluetoothServiceUUID) => Promise<BluetoothRemoteGATTService>;
+    getPrimaryServices: (service?: BluetoothServiceUUID) => Promise<BluetoothRemoteGATTService[]>;
+  }
+
+  interface BluetoothRemoteGATTService extends EventTarget {
+    readonly device: BluetoothDevice;
+    readonly uuid: string;
+    readonly isPrimary: boolean;
+    getCharacteristic: (characteristic: BluetoothCharacteristicUUID) => Promise<BluetoothRemoteGATTCharacteristic>;
+    getCharacteristics: (characteristic?: BluetoothCharacteristicUUID) => Promise<BluetoothRemoteGATTCharacteristic[]>;
+  }
+
+  interface BluetoothRemoteGATTCharacteristic extends EventTarget {
+    readonly service: BluetoothRemoteGATTService;
+    readonly uuid: string;
+    readonly value?: DataView;
+    readValue: () => Promise<DataView>;
+    writeValue: (value: BufferSource) => Promise<void>;
+    startNotifications: () => Promise<BluetoothRemoteGATTCharacteristic>;
+    stopNotifications: () => Promise<BluetoothRemoteGATTCharacteristic>;
+  }
+
+  interface BluetoothDevice extends EventTarget {
+    readonly id: string;
+    readonly name?: string;
+    readonly gatt?: BluetoothRemoteGATTServer;
+    watchAdvertisements: () => Promise<void>;
+    forget: () => Promise<void>;
+  }
+
+  interface Bluetooth extends EventTarget {
+    getAvailability: () => Promise<boolean>;
+    getDevices: () => Promise<BluetoothDevice[]>;
+    requestDevice: (options?: RequestDeviceOptions) => Promise<BluetoothDevice>;
+  }
+
+  interface Navigator {
+    readonly bluetooth?: Bluetooth;
+  }
+
+  // ---- Gamepad haptics (not in lib.dom yet) ----
+
+  interface Gamepad {
+    readonly hapticActuators?: readonly GamepadHapticActuator[];
+  }
+}
+
+export {};
diff --git a/web/vue/src/types/flush.ts b/vue/toolkit/src/types/flush.ts
similarity index 100%
rename from web/vue/src/types/flush.ts
rename to vue/toolkit/src/types/flush.ts
diff --git a/vue/toolkit/src/types/index.ts b/vue/toolkit/src/types/index.ts
new file mode 100644
index 0000000..ead4763
--- /dev/null
+++ b/vue/toolkit/src/types/index.ts
@@ -0,0 +1,6 @@
+export * from './dom';
+export * from './flush';
+export * from './ref';
+export * from './resumable';
+export * from './standard-schema';
+export * from './window';
diff --git a/vue/toolkit/src/types/ref.ts b/vue/toolkit/src/types/ref.ts
new file mode 100644
index 0000000..1e2f817
--- /dev/null
+++ b/vue/toolkit/src/types/ref.ts
@@ -0,0 +1,15 @@
+import type { MaybeRefOrGetter, Ref } from 'vue';
+
+/**
+ * A ref that can be set to `null` to remove the associated storage entry.
+ * Setting the value to `null` or `undefined` will call `removeItem` on the storage backend.
+ */
+export type RemovableRef<T> = Ref<T>;
+
+/**
+ * Argument form accepted by the reactive math helpers (`useMax`, `useMin`, `useSum`, `useAverage`):
+ * either a spread of (possibly reactive) values, or a single (possibly reactive) array of them.
+ */
+export type MaybeComputedRefArgs<T>
+  = | Array<MaybeRefOrGetter<T>>
+    | [MaybeRefOrGetter<Array<MaybeRefOrGetter<T>>>];
diff --git a/web/vue/src/types/resumable.ts b/vue/toolkit/src/types/resumable.ts
similarity index 98%
rename from web/vue/src/types/resumable.ts
rename to vue/toolkit/src/types/resumable.ts
index ad99dc8..06d50ba 100644
--- a/web/vue/src/types/resumable.ts
+++ b/vue/toolkit/src/types/resumable.ts
@@ -6,10 +6,10 @@
 
 /**
  * The options for a resumable process.
- * 
+ *
  * @typedef {Object} ResumableOptions
  * @property {boolean} [immediate] Whether to immediately resume the process
- * 
+ *
  */
 export interface ResumableOptions {
   immediate?: boolean;
@@ -17,7 +17,7 @@ export interface ResumableOptions {
 
 /**
  * The actions for a resumable process.
- * 
+ *
  * @typedef {Object} ResumableActions
  * @property {Function} resume Resumes the process
  * @property {Function} pause Pauses the process
@@ -27,4 +27,4 @@ export interface ResumableActions {
   resume: () => void;
   pause: () => void;
   toggle: () => void;
-}
\ No newline at end of file
+}
diff --git a/vue/toolkit/src/types/standard-schema.ts b/vue/toolkit/src/types/standard-schema.ts
new file mode 100644
index 0000000..20836f1
--- /dev/null
+++ b/vue/toolkit/src/types/standard-schema.ts
@@ -0,0 +1,127 @@
+/**
+ * Vendored, dependency-free types for the
+ * [Standard Schema](https://github.com/standard-schema/standard-schema) spec (v1).
+ *
+ * Any validation library implementing the `~standard` contract — zod, valibot,
+ * arktype, … — is structurally assignable to {@link StandardSchemaV1}, so the
+ * forms layer can accept them without taking on a dependency. The namespace
+ * pattern from the official spec is flattened into named exports to stay within
+ * the repo's lint rules.
+ */
+
+/**
+ * The Standard Schema interface. A schema is any object exposing a `~standard`
+ * property describing how to validate a value.
+ */
+export interface StandardSchemaV1<Input = unknown, Output = Input> {
+  /**
+   * The Standard Schema properties.
+   */
+  readonly '~standard': StandardSchemaProps<Input, Output>;
+}
+
+/**
+ * The properties carried on a schema's `~standard` key.
+ */
+export interface StandardSchemaProps<Input = unknown, Output = Input> {
+  /**
+   * The version number of the standard.
+   */
+  readonly version: 1;
+  /**
+   * The vendor name of the schema library (e.g. `'zod'`, `'valibot'`).
+   */
+  readonly vendor: string;
+  /**
+   * Validate an unknown value, returning its typed output or a list of issues.
+   */
+  readonly validate: (
+    value: unknown,
+  ) => StandardSchemaResult<Output> | Promise<StandardSchemaResult<Output>>;
+  /**
+   * Inferred input/output types — present only at type level.
+   */
+  readonly types?: StandardSchemaTypes<Input, Output> | undefined;
+}
+
+/**
+ * The result of validating a value: either a success carrying the typed output
+ * or a failure carrying a list of issues.
+ */
+export type StandardSchemaResult<Output>
+  = | StandardSchemaSuccessResult<Output>
+    | StandardSchemaFailureResult;
+
+/**
+ * A successful validation result.
+ */
+export interface StandardSchemaSuccessResult<Output> {
+  /**
+   * The validated, typed value.
+   */
+  readonly value: Output;
+  /**
+   * The absence of issues marks success.
+   */
+  readonly issues?: undefined;
+}
+
+/**
+ * A failed validation result.
+ */
+export interface StandardSchemaFailureResult {
+  /**
+   * The non-empty list of validation issues.
+   */
+  readonly issues: readonly StandardSchemaIssue[];
+}
+
+/**
+ * A single validation issue.
+ */
+export interface StandardSchemaIssue {
+  /**
+   * A human-readable message describing the issue.
+   */
+  readonly message: string;
+  /**
+   * The path to the offending value, as keys or `{ key }` segments.
+   */
+  readonly path?: ReadonlyArray<PropertyKey | StandardSchemaPathSegment> | undefined;
+}
+
+/**
+ * A single segment of an issue path.
+ */
+export interface StandardSchemaPathSegment {
+  /**
+   * The key of this path segment.
+   */
+  readonly key: PropertyKey;
+}
+
+/**
+ * The inferred input/output types of a schema.
+ */
+export interface StandardSchemaTypes<Input = unknown, Output = Input> {
+  /**
+   * The input type accepted by the schema.
+   */
+  readonly input: Input;
+  /**
+   * The output type produced by the schema.
+   */
+  readonly output: Output;
+}
+
+/**
+ * Infer the input type of a Standard Schema.
+ */
+export type StandardSchemaInferInput<Schema extends StandardSchemaV1>
+  = NonNullable<Schema['~standard']['types']>['input'];
+
+/**
+ * Infer the output type of a Standard Schema.
+ */
+export type StandardSchemaInferOutput<Schema extends StandardSchemaV1>
+  = NonNullable<Schema['~standard']['types']>['output'];
diff --git a/vue/toolkit/src/types/window.ts b/vue/toolkit/src/types/window.ts
new file mode 100644
index 0000000..134c7d0
--- /dev/null
+++ b/vue/toolkit/src/types/window.ts
@@ -0,0 +1,32 @@
+import { isClient } from '@robonen/platform/multi';
+
+export const defaultWindow = /* #__PURE__ */ isClient ? globalThis as Window & typeof globalThis : undefined;
+export const defaultDocument = /* #__PURE__ */ isClient ? globalThis.document : undefined;
+export const defaultNavigator = /* #__PURE__ */ isClient ? globalThis.navigator : undefined;
+
+export interface ConfigurableWindow {
+  /**
+   * Specify a custom `window` instance, e.g. working with iframes or testing environments
+   *
+   * @default defaultWindow
+   */
+  window?: Window;
+}
+
+export interface ConfigurableDocument {
+  /**
+   * Specify a custom `document` instance, e.g. working with iframes or testing environments
+   *
+   * @default defaultDocument
+   */
+  document?: Document;
+}
+
+export interface ConfigurableNavigator {
+  /**
+   * Specify a custom `navigator` instance, e.g. working with testing environments
+   *
+   * @default defaultNavigator
+   */
+  navigator?: Navigator;
+}
diff --git a/web/vue/src/utils/components.ts b/vue/toolkit/src/utils/components.ts
similarity index 90%
rename from web/vue/src/utils/components.ts
rename to vue/toolkit/src/utils/components.ts
index 08ac4f2..75834a3 100644
--- a/web/vue/src/utils/components.ts
+++ b/vue/toolkit/src/utils/components.ts
@@ -5,18 +5,18 @@ import type { ComponentInternalInstance } from 'vue';
  * @name getLifeCycleTarger
  * @category Utils
  * @description Function to get the target instance of the lifecycle hook
- * 
+ *
  * @param {ComponentInternalInstance} target The target instance of the lifecycle hook
  * @returns {ComponentInternalInstance | null} Instance of the lifecycle hook or null
- * 
+ *
  * @example
  * const target = getLifeCycleTarger();
- * 
+ *
  * @example
  * const target = getLifeCycleTarger(instance);
- * 
+ *
  * @since 0.0.1
  */
 export function getLifeCycleTarger(target?: ComponentInternalInstance) {
-    return target || getCurrentInstance();
-}
\ No newline at end of file
+  return target || getCurrentInstance();
+}
diff --git a/web/vue/src/utils/error.ts b/vue/toolkit/src/utils/error.ts
similarity index 98%
rename from web/vue/src/utils/error.ts
rename to vue/toolkit/src/utils/error.ts
index 65fd163..a717ee3 100644
--- a/web/vue/src/utils/error.ts
+++ b/vue/toolkit/src/utils/error.ts
@@ -2,7 +2,7 @@
  * @name VueToolsError
  * @category Error
  * @description VueToolsError is a custom error class that represents an error in Vue Tools
- * 
+ *
  * @since 0.0.1
  */
 export class VueToolsError extends Error {
@@ -10,4 +10,4 @@ export class VueToolsError extends Error {
     super(message);
     this.name = 'VueToolsError';
   }
-}
\ No newline at end of file
+}
diff --git a/vue/toolkit/src/utils/filters.test.ts b/vue/toolkit/src/utils/filters.test.ts
new file mode 100644
index 0000000..e1b82a6
--- /dev/null
+++ b/vue/toolkit/src/utils/filters.test.ts
@@ -0,0 +1,171 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { ref } from 'vue';
+import { bypassFilter, debounceFilter, pausableFilter, throttleFilter } from './filters';
+
+describe(bypassFilter, () => {
+  it('invokes callback immediately', () => {
+    const fn = vi.fn();
+    bypassFilter(fn);
+    expect(fn).toHaveBeenCalledOnce();
+  });
+});
+
+describe(debounceFilter, () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('delays invocation by the specified ms', () => {
+    const filter = debounceFilter(100);
+    const fn = vi.fn();
+
+    filter(fn);
+    expect(fn).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(50);
+    expect(fn).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(50);
+    expect(fn).toHaveBeenCalledOnce();
+  });
+
+  it('resets timer on repeated calls', () => {
+    const filter = debounceFilter(100);
+    const fn = vi.fn();
+
+    filter(fn);
+    vi.advanceTimersByTime(80);
+    filter(fn);
+    vi.advanceTimersByTime(80);
+
+    expect(fn).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(20);
+    expect(fn).toHaveBeenCalledOnce();
+  });
+
+  it('supports reactive ms via ref', () => {
+    const delay = ref(100);
+    const filter = debounceFilter(delay);
+    const fn = vi.fn();
+
+    filter(fn);
+    vi.advanceTimersByTime(100);
+    expect(fn).toHaveBeenCalledOnce();
+
+    delay.value = 200;
+    filter(fn);
+    vi.advanceTimersByTime(100);
+    expect(fn).toHaveBeenCalledOnce(); // still 1
+
+    vi.advanceTimersByTime(100);
+    expect(fn).toHaveBeenCalledTimes(2);
+  });
+});
+
+describe(throttleFilter, () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('invokes immediately on first call (leading)', () => {
+    const filter = throttleFilter(100);
+    const fn = vi.fn();
+
+    filter(fn);
+    expect(fn).toHaveBeenCalledOnce();
+  });
+
+  it('throttles subsequent calls', () => {
+    const filter = throttleFilter(100);
+    const fn1 = vi.fn();
+    const fn2 = vi.fn();
+
+    filter(fn1);
+    expect(fn1).toHaveBeenCalledOnce();
+
+    // Within throttle window
+    filter(fn2);
+    expect(fn2).not.toHaveBeenCalled();
+
+    // After throttle window, trailing fires
+    vi.advanceTimersByTime(100);
+    expect(fn2).toHaveBeenCalledOnce();
+  });
+
+  it('does not invoke trailing when trailing=false', () => {
+    const filter = throttleFilter(100, false, true);
+    const fn1 = vi.fn();
+    const fn2 = vi.fn();
+
+    filter(fn1);
+    expect(fn1).toHaveBeenCalledOnce();
+
+    filter(fn2);
+    vi.advanceTimersByTime(200);
+    expect(fn2).not.toHaveBeenCalled();
+  });
+
+  it('does not invoke leading when leading=false', () => {
+    const filter = throttleFilter(100, true, false);
+    const fn = vi.fn();
+
+    filter(fn);
+    expect(fn).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(100);
+    expect(fn).toHaveBeenCalledOnce();
+  });
+});
+
+describe(pausableFilter, () => {
+  it('invokes immediately when active', () => {
+    const { filter, isActive } = pausableFilter();
+    const fn = vi.fn();
+
+    expect(isActive.value).toBeTruthy();
+    filter(fn);
+    expect(fn).toHaveBeenCalledOnce();
+  });
+
+  it('queues invocations when paused', () => {
+    const { filter, pause } = pausableFilter();
+    const fn = vi.fn();
+
+    pause();
+    filter(fn);
+    expect(fn).not.toHaveBeenCalled();
+  });
+
+  it('replays queued invocations on resume', () => {
+    const { filter, pause, resume } = pausableFilter();
+    const fn1 = vi.fn();
+    const fn2 = vi.fn();
+
+    pause();
+    filter(fn1);
+    filter(fn2);
+    expect(fn1).not.toHaveBeenCalled();
+    expect(fn2).not.toHaveBeenCalled();
+
+    resume();
+    expect(fn1).toHaveBeenCalledOnce();
+    expect(fn2).toHaveBeenCalledOnce();
+  });
+
+  it('isActive reflects the paused state', () => {
+    const { isActive, pause, resume } = pausableFilter();
+
+    expect(isActive.value).toBeTruthy();
+    pause();
+    expect(isActive.value).toBeFalsy();
+    resume();
+    expect(isActive.value).toBeTruthy();
+  });
+});
diff --git a/vue/toolkit/src/utils/filters.ts b/vue/toolkit/src/utils/filters.ts
new file mode 100644
index 0000000..55ed493
--- /dev/null
+++ b/vue/toolkit/src/utils/filters.ts
@@ -0,0 +1,167 @@
+import { ref, toValue } from 'vue';
+import type { MaybeRefOrGetter, Ref } from 'vue';
+import { debounce, throttle } from '@robonen/stdlib';
+import type { AnyFunction } from '@robonen/stdlib';
+
+export type EventFilter = (invoke: () => void) => void;
+
+export interface ConfigurableEventFilter {
+  /**
+   * Event filter for controlling how frequently writes propagate
+   *
+   * @example debounceFilter(500) — debounce writes by 500ms
+   * @example throttleFilter(1000) — throttle writes to once per 1000ms
+   */
+  eventFilter?: EventFilter;
+}
+
+export interface DebounceFilterOptions {
+  /**
+   * The maximum time the callback may be delayed before it is forcibly invoked
+   * under sustained input (can be reactive). When omitted there is no upper bound.
+   */
+  maxWait?: MaybeRefOrGetter<number>;
+}
+
+/**
+ * A no-op filter that invokes the callback immediately
+ */
+export const bypassFilter: EventFilter = (invoke) => {
+  invoke();
+};
+
+/**
+ * Create a debounce event filter — a reactive-aware wrapper around
+ * `@robonen/stdlib`'s `debounce` (trailing edge).
+ *
+ * @param ms Delay in milliseconds (can be reactive)
+ * @param options Optional `maxWait` ceiling (can be reactive)
+ * @returns EventFilter
+ */
+export function debounceFilter(ms: MaybeRefOrGetter<number>, options: DebounceFilterOptions = {}): EventFilter {
+  const { maxWait } = options;
+
+  const debounced = debounce(
+    (invoke: () => void) => invoke(),
+    () => toValue(ms),
+    { maxWait: maxWait === undefined ? undefined : () => toValue(maxWait) },
+  );
+
+  return (invoke) => {
+    // Non-positive delay runs synchronously (behaves like an un-debounced call).
+    if (toValue(ms) <= 0) {
+      debounced.cancel();
+      invoke();
+      return;
+    }
+
+    debounced(invoke);
+  };
+}
+
+/**
+ * Create a throttle event filter — a reactive-aware wrapper around
+ * `@robonen/stdlib`'s `throttle`.
+ *
+ * @param ms Interval in milliseconds (can be reactive)
+ * @param trailing Whether to invoke on trailing edge (default: true)
+ * @param leading Whether to invoke on leading edge (default: true)
+ * @returns EventFilter
+ */
+export function throttleFilter(
+  ms: MaybeRefOrGetter<number>,
+  trailing = true,
+  leading = true,
+): EventFilter {
+  const throttled = throttle(
+    (invoke: () => void) => invoke(),
+    () => toValue(ms),
+    { trailing, leading },
+  );
+
+  return invoke => throttled(invoke);
+}
+
+export interface PausableEventFilterReturn {
+  filter: EventFilter;
+  isActive: Ref<boolean>;
+  pause: () => void;
+  resume: () => void;
+}
+
+/**
+ * Create a pausable event filter
+ *
+ * When paused, invocations are queued and replayed on resume.
+ *
+ * @returns PausableEventFilterReturn
+ */
+export function pausableFilter(): PausableEventFilterReturn {
+  const isActive = ref(true);
+  let pendingInvocations: Array<() => void> = [];
+
+  const filter: EventFilter = (invoke) => {
+    if (isActive.value) {
+      invoke();
+    }
+    else {
+      pendingInvocations.push(invoke);
+    }
+  };
+
+  return {
+    filter,
+    isActive: isActive as Ref<boolean>,
+    pause: () => { isActive.value = false; },
+    resume: () => {
+      isActive.value = true;
+      const pending = pendingInvocations;
+      pendingInvocations = [];
+      for (const fn of pending) fn();
+    },
+  };
+}
+
+/**
+ * Wrap a function with an {@link EventFilter}, preserving arguments, `this`,
+ * and the return value through a promise.
+ *
+ * The wrapper returns a promise that resolves with the result of the wrapped
+ * function once the filter lets it through. When the filter coalesces calls
+ * (e.g. debounce/throttle), every pending promise scheduled since the last
+ * invocation resolves together with that invocation's result — so nothing is
+ * left dangling.
+ *
+ * @param filter The event filter controlling invocation timing
+ * @param fn The function to wrap
+ * @returns A filtered wrapper returning a promise of the result
+ */
+export function createFilterWrapper<T extends AnyFunction>(
+  filter: EventFilter,
+  fn: T,
+): (...args: Parameters<T>) => Promise<Awaited<ReturnType<T>>> {
+  // Promises scheduled but not yet resolved by an invocation. The filter may
+  // drop intermediate invokes (debounce) — they all settle on the next real one.
+  let pending: Array<{ resolve: (value: any) => void; reject: (reason?: unknown) => void }> = [];
+
+  function wrapper(this: unknown, ...args: Parameters<T>) {
+    return new Promise<Awaited<ReturnType<T>>>((resolve, reject) => {
+      pending.push({ resolve, reject });
+
+      filter(() => {
+        const settled = pending;
+        pending = [];
+
+        try {
+          const result = fn.apply(this, args);
+          for (const p of settled) p.resolve(result);
+        }
+        catch (error) {
+          for (const p of settled) p.reject(error);
+        }
+      });
+    });
+  }
+
+  return wrapper;
+}
diff --git a/vue/toolkit/src/utils/index.ts b/vue/toolkit/src/utils/index.ts
new file mode 100644
index 0000000..8a3e5ba
--- /dev/null
+++ b/vue/toolkit/src/utils/index.ts
@@ -0,0 +1,3 @@
+export * from './components';
+export * from './error';
+export * from './filters';
diff --git a/vue/toolkit/tsconfig.json b/vue/toolkit/tsconfig.json
new file mode 100644
index 0000000..2781e66
--- /dev/null
+++ b/vue/toolkit/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.src.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/vue/toolkit/tsconfig.node.json b/vue/toolkit/tsconfig.node.json
new file mode 100644
index 0000000..edc474f
--- /dev/null
+++ b/vue/toolkit/tsconfig.node.json
@@ -0,0 +1,8 @@
+{
+  "extends": "@robonen/tsconfig/tsconfig.node.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo"
+  },
+  "include": ["*.config.ts"]
+}
diff --git a/vue/toolkit/tsconfig.src.json b/vue/toolkit/tsconfig.src.json
new file mode 100644
index 0000000..5482396
--- /dev/null
+++ b/vue/toolkit/tsconfig.src.json
@@ -0,0 +1,15 @@
+{
+  "extends": "@robonen/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "composite": true,
+    "types": [],
+    "paths": {
+      "@/*": ["./src/*"],
+      "@/composables/*": ["./src/composables/*"],
+      "@/types": ["./src/types"],
+      "@/utils": ["./src/utils"]
+    },
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.src.tsbuildinfo"
+  },
+  "include": ["src/**/*.ts"]
+}
diff --git a/web/vue/tsdown.config.ts b/vue/toolkit/tsdown.config.ts
similarity index 84%
rename from web/vue/tsdown.config.ts
rename to vue/toolkit/tsdown.config.ts
index afc29c6..0907e4b 100644
--- a/web/vue/tsdown.config.ts
+++ b/vue/toolkit/tsdown.config.ts
@@ -3,7 +3,8 @@ import { sharedConfig } from '@robonen/tsdown';
 
 export default defineConfig({
   ...sharedConfig,
+  tsconfig: './tsconfig.src.json',
   entry: ['src/index.ts'],
   external: ['vue'],
   noExternal: [/^@robonen\//],
-});
\ No newline at end of file
+});
diff --git a/web/vue/vitest.config.ts b/vue/toolkit/vitest.config.ts
similarity index 100%
rename from web/vue/vitest.config.ts
rename to vue/toolkit/vitest.config.ts
diff --git a/web/vue/README.md b/web/vue/README.md
deleted file mode 100644
index 1878647..0000000
--- a/web/vue/README.md
+++ /dev/null
@@ -1,28 +0,0 @@
-# @robonen/vue
-
-Collection of composables and utilities for Vue 3.
-
-## Install
-
-```bash
-pnpm install @robonen/vue
-```
-
-## Composables
-
-| Category       | Composables                                                        |
-| -------------- | ------------------------------------------------------------------ |
-| **browser**    | `useEventListener`, `useFocusGuard`, `useSupported`                |
-| **component**  | `unrefElement`, `useRenderCount`, `useRenderInfo`                  |
-| **lifecycle**  | `tryOnBeforeMount`, `tryOnMounted`, `tryOnScopeDispose`, `useMounted` |
-| **math**       | `useClamp`                                                         |
-| **reactivity** | `broadcastedRef`, `useCached`, `useLastChanged`, `useSyncRefs`     |
-| **state**      | `useAppSharedState`, `useAsyncState`, `useContextFactory`, `useCounter`, `useInjectionStore`, `useToggle` |
-| **storage**    | `useLocalStorage`, `useSessionStorage`, `useStorage`, `useStorageAsync` |
-| **utilities**  | `useOffsetPagination`                                              |
-
-## Usage
-
-```ts
-import { useToggle, useEventListener } from '@robonen/vue';
-```
\ No newline at end of file
diff --git a/web/vue/oxlint.config.ts b/web/vue/oxlint.config.ts
deleted file mode 100644
index f9dcedd..0000000
--- a/web/vue/oxlint.config.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { defineConfig } from 'oxlint';
-import { compose, base, typescript, vue, vitest, imports } from '@robonen/oxlint';
-
-export default defineConfig(compose(base, typescript, vue, vitest, imports));
diff --git a/web/vue/src/composables/browser/index.ts b/web/vue/src/composables/browser/index.ts
deleted file mode 100644
index 232c767..0000000
--- a/web/vue/src/composables/browser/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './useEventListener';
-export * from './useFocusGuard';
-export * from './useSupported';
-export * from './useTabLeader';
diff --git a/web/vue/src/composables/component/useRenderCount/index.test.ts b/web/vue/src/composables/component/useRenderCount/index.test.ts
deleted file mode 100644
index 45088ef..0000000
--- a/web/vue/src/composables/component/useRenderCount/index.test.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { defineComponent, nextTick, ref } from 'vue';
-import { mount } from '@vue/test-utils'
-import { useRenderCount } from '.';
-
-const ComponentStub = defineComponent({
-    setup() {
-        const count = useRenderCount();
-        const visibleCount = ref(0);
-        const hiddenCount = ref(0);
-
-        return { count, visibleCount, hiddenCount };
-    },
-    template: `<div>{{ visibleCount }}</div>`,
-});
-
-describe(useRenderCount, () => {
-    it('return the number of times the component has been rendered', async () => {
-        const component = mount(ComponentStub);
-        
-        // Initial render
-        expect(component.vm.count).toBe(1);
-
-        component.vm.hiddenCount = 1;
-        await nextTick();
-        
-        // Will not trigger a render
-        expect(component.vm.count).toBe(1);
-        expect(component.text()).toBe('0');
-
-        component.vm.visibleCount++;
-        await nextTick();
-
-        // Will trigger a render
-        expect(component.vm.count).toBe(2);
-        expect(component.text()).toBe('1');
-
-        component.vm.visibleCount++;
-        component.vm.visibleCount++;
-        await nextTick();
-
-        // Will trigger a single render for both updates
-        expect(component.vm.count).toBe(3);
-        expect(component.text()).toBe('3');
-    });
-
-    it('can be used with a specific component instance', async () => {
-        const component = mount(ComponentStub);
-        const instance = component.vm.$;
-
-        const count = useRenderCount(instance);
-
-        // Initial render (should be zero because the component has already rendered on mount)
-        expect(count.value).toBe(0);
-
-        component.vm.hiddenCount = 1;
-        await nextTick();
-        
-        // Will not trigger a render
-        expect(count.value).toBe(0);
-
-        component.vm.visibleCount++;
-        await nextTick();
-
-        // Will trigger a render
-        expect(count.value).toBe(1);
-
-        component.vm.visibleCount++;
-        component.vm.visibleCount++;
-        await nextTick();
-
-        // Will trigger a single render for both updates
-        expect(count.value).toBe(2);
-    });
-});
\ No newline at end of file
diff --git a/web/vue/src/composables/lifecycle/useMounted/index.test.ts b/web/vue/src/composables/lifecycle/useMounted/index.test.ts
deleted file mode 100644
index e23263f..0000000
--- a/web/vue/src/composables/lifecycle/useMounted/index.test.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { defineComponent, nextTick, ref } from 'vue';
-import { mount } from '@vue/test-utils'
-import { useMounted } from '.';
-
-const ComponentStub = defineComponent({
-    setup() {
-        const isMounted = useMounted();
-        
-        return { isMounted };
-    },
-    template: `<div>{{ isMounted }}</div>`,
-});
-
-describe(useMounted, () => {
-    it('return the mounted state of the component', async () => {
-        const component = mount(ComponentStub);
-        
-        // Initial render
-        expect(component.text()).toBe('false');
-
-        await nextTick();
-        
-        // Will trigger a render
-        expect(component.text()).toBe('true');
-    });
-});
diff --git a/web/vue/src/composables/math/index.ts b/web/vue/src/composables/math/index.ts
deleted file mode 100644
index 1dcfd64..0000000
--- a/web/vue/src/composables/math/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './useClamp';
diff --git a/web/vue/src/composables/reactivity/index.ts b/web/vue/src/composables/reactivity/index.ts
deleted file mode 100644
index a17f1fc..0000000
--- a/web/vue/src/composables/reactivity/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './broadcastedRef';
-export * from './useCached';
-export * from './useLastChanged';
-export * from './useSyncRefs';
diff --git a/web/vue/src/composables/state/index.ts b/web/vue/src/composables/state/index.ts
deleted file mode 100644
index bf2c4fe..0000000
--- a/web/vue/src/composables/state/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export * from './useAppSharedState';
-export * from './useAsyncState';
-export * from './useContextFactory';
-export * from './useCounter';
-export * from './useInjectionStore';
-export * from './useToggle';
diff --git a/web/vue/src/composables/state/useCounter/demo.vue b/web/vue/src/composables/state/useCounter/demo.vue
deleted file mode 100644
index a94d1cb..0000000
--- a/web/vue/src/composables/state/useCounter/demo.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-    <div>
-    </div>
-</template>
\ No newline at end of file
diff --git a/web/vue/src/composables/state/useCounter/index.ts b/web/vue/src/composables/state/useCounter/index.ts
deleted file mode 100644
index 00066d9..0000000
--- a/web/vue/src/composables/state/useCounter/index.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { ref, toValue } from 'vue';
-import type { MaybeRefOrGetter, Ref } from 'vue';
-import { clamp } from '@robonen/stdlib';
-
-export interface UseCounterOptions {
-    min?: number;
-    max?: number;
-}
-
-export interface UseConterReturn {
-    count: Ref<number>;
-    increment: (delta?: number) => void;
-    decrement: (delta?: number) => void;
-    set: (value: number) => void;
-    get: () => number;
-    reset: (value?: number) => void;
-}
-
-/**
- * @name useCounter
- * @category State
- * @description A composable that provides a counter with increment, decrement, set, get, and reset functions
- * 
- * @param {MaybeRef<number>} [initialValue=0] The initial value of the counter
- * @param {UseCounterOptions} [options={}] The options for the counter
- * @param {number} [options.min=Number.MIN_SAFE_INTEGER] The minimum value of the counter
- * @param {number} [options.max=Number.MAX_SAFE_INTEGER] The maximum value of the counter
- * @returns {UseConterReturn} The counter object
- * 
- * @example
- * const { count, increment } = useCounter(0);
- * 
- * @example
- * const { count, increment, decrement, set, get, reset } = useCounter(0, { min: 0, max: 10 });
- * 
- * @since 0.0.1
- */
-export function useCounter(
-    initialValue: MaybeRefOrGetter<number> = 0,
-    options: UseCounterOptions = {},
-): UseConterReturn {
-    let _initialValue = toValue(initialValue);
-    const count = ref(_initialValue);
-
-    const {
-        min = Number.MIN_SAFE_INTEGER,
-        max = Number.MAX_SAFE_INTEGER,
-    } = options;
-
-    const increment = (delta = 1) => {
-        count.value = clamp(count.value + delta, min, max);
-    };
-
-    const decrement = (delta = 1) => {
-        count.value = clamp(count.value - delta, min, max);
-    };
-
-    const set = (value: number) => {
-        count.value = clamp(value, min, max);
-    };
-
-    const get = () => count.value;
-
-    const reset = (value = _initialValue) => {
-        _initialValue = value;
-        return set(value);
-    };
-
-    return {
-        count,
-        increment,
-        decrement,
-        set,
-        get,
-        reset,
-    };
-};
diff --git a/web/vue/src/composables/state/useToggle/index.ts b/web/vue/src/composables/state/useToggle/index.ts
deleted file mode 100644
index 89c8982..0000000
--- a/web/vue/src/composables/state/useToggle/index.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { ref, toValue } from 'vue';
-import type { MaybeRefOrGetter, MaybeRef, Ref } from 'vue';
-
-export interface UseToggleOptions<Truthy, Falsy> {
-    truthyValue?: MaybeRefOrGetter<Truthy>,
-    falsyValue?: MaybeRefOrGetter<Falsy>,
-}
-
-export interface UseToggleReturn<Truthy, Falsy> {
-    value: Ref<Truthy | Falsy>;
-    toggle: (value?: Truthy | Falsy) => Truthy | Falsy;
-}
-
-/**
- * @name useToggle
- * @category State
- * @description A composable that provides a boolean toggle with customizable truthy/falsy values
- *
- * @param {MaybeRef<Truthy | Falsy>} [initialValue=false] The initial value
- * @param {UseToggleOptions<Truthy, Falsy>} [options={}] Options for custom truthy/falsy values
- * @returns {UseToggleReturn<Truthy, Falsy>} The toggle state and function
- *
- * @example
- * const { value, toggle } = useToggle();
- *
- * @example
- * const { value, toggle } = useToggle(false, { truthyValue: 'on', falsyValue: 'off' });
- *
- * @since 0.0.1
- */
-export function useToggle<Truthy = true, Falsy = false>(
-    initialValue: MaybeRef<Truthy | Falsy> = false as Truthy | Falsy,
-    options: UseToggleOptions<Truthy, Falsy> = {},
-): UseToggleReturn<Truthy, Falsy> {
-    const {
-        truthyValue = true as Truthy,
-        falsyValue = false as Falsy,
-    } = options;
-
-    const value = ref(initialValue) as Ref<Truthy | Falsy>;
-
-    const toggle = (newValue?: Truthy | Falsy) => {
-        if (newValue !== undefined) {
-            value.value = newValue;
-            return value.value;
-        }
-        
-        const truthy = toValue(truthyValue);
-        const falsy = toValue(falsyValue);
-
-        value.value = value.value === truthy ? falsy : truthy;
-
-        return value.value;
-    };
-
-    return { value, toggle };
-}
diff --git a/web/vue/src/composables/storage/useLocalStorage/index.ts b/web/vue/src/composables/storage/useLocalStorage/index.ts
deleted file mode 100644
index c7a5f52..0000000
--- a/web/vue/src/composables/storage/useLocalStorage/index.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import type { MaybeRefOrGetter, Ref } from 'vue';
-import { defaultWindow } from '@/types';
-import { VueToolsError } from '@/utils/error';
-import { useStorage } from '../useStorage';
-import type { UseStorageOptions } from '../useStorage';
-
-/**
- * @name useLocalStorage
- * @category Storage
- * @description Reactive localStorage binding — creates a ref synced with `window.localStorage`
- *
- * @param {string} key The storage key
- * @param {MaybeRefOrGetter<T>} initialValue The initial/default value
- * @param {UseStorageOptions<T>} [options={}] Options
- * @returns {Ref<T>} A reactive ref synced with localStorage
- *
- * @example
- * const count = useLocalStorage('my-count', 0);
- *
- * @example
- * const state = useLocalStorage('my-state', { hello: 'world' });
- *
- * @since 0.0.12
- */
-export function useLocalStorage<T extends string>(key: string, initialValue: MaybeRefOrGetter<T>, options?: UseStorageOptions<T>): Ref<T>;
-export function useLocalStorage<T extends number>(key: string, initialValue: MaybeRefOrGetter<T>, options?: UseStorageOptions<T>): Ref<T>;
-export function useLocalStorage<T extends boolean>(key: string, initialValue: MaybeRefOrGetter<T>, options?: UseStorageOptions<T>): Ref<T>;
-export function useLocalStorage<T>(key: string, initialValue: MaybeRefOrGetter<T>, options?: UseStorageOptions<T>): Ref<T>;
-export function useLocalStorage<T = unknown>(key: string, initialValue: MaybeRefOrGetter<null>, options?: UseStorageOptions<T>): Ref<T>;
-export function useLocalStorage<T>(
-  key: string,
-  initialValue: MaybeRefOrGetter<T>,
-  options: UseStorageOptions<T> = {},
-): Ref<T> {
-  const storage = defaultWindow?.localStorage;
-
-  if (!storage)
-    throw new VueToolsError('useLocalStorage: localStorage is not available');
-
-  return useStorage(key, initialValue, storage, options);
-}
diff --git a/web/vue/src/composables/storage/useSessionStorage/index.ts b/web/vue/src/composables/storage/useSessionStorage/index.ts
deleted file mode 100644
index 476285a..0000000
--- a/web/vue/src/composables/storage/useSessionStorage/index.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import type { MaybeRefOrGetter, Ref } from 'vue';
-import { defaultWindow } from '@/types';
-import { VueToolsError } from '@/utils/error';
-import { useStorage } from '../useStorage';
-import type { UseStorageOptions } from '../useStorage';
-
-/**
- * @name useSessionStorage
- * @category Storage
- * @description Reactive sessionStorage binding — creates a ref synced with `window.sessionStorage`
- *
- * @param {string} key The storage key
- * @param {MaybeRefOrGetter<T>} initialValue The initial/default value
- * @param {UseStorageOptions<T>} [options={}] Options
- * @returns {Ref<T>} A reactive ref synced with sessionStorage
- *
- * @example
- * const count = useSessionStorage('my-count', 0);
- *
- * @example
- * const state = useSessionStorage('my-state', { hello: 'world' });
- *
- * @since 0.0.12
- */
-export function useSessionStorage<T extends string>(key: string, initialValue: MaybeRefOrGetter<T>, options?: UseStorageOptions<T>): Ref<T>;
-export function useSessionStorage<T extends number>(key: string, initialValue: MaybeRefOrGetter<T>, options?: UseStorageOptions<T>): Ref<T>;
-export function useSessionStorage<T extends boolean>(key: string, initialValue: MaybeRefOrGetter<T>, options?: UseStorageOptions<T>): Ref<T>;
-export function useSessionStorage<T>(key: string, initialValue: MaybeRefOrGetter<T>, options?: UseStorageOptions<T>): Ref<T>;
-export function useSessionStorage<T = unknown>(key: string, initialValue: MaybeRefOrGetter<null>, options?: UseStorageOptions<T>): Ref<T>;
-export function useSessionStorage<T>(
-  key: string,
-  initialValue: MaybeRefOrGetter<T>,
-  options: UseStorageOptions<T> = {},
-): Ref<T> {
-  const storage = defaultWindow?.sessionStorage;
-
-  if (!storage)
-    throw new VueToolsError('useSessionStorage: sessionStorage is not available');
-
-  return useStorage(key, initialValue, storage, options);
-}
diff --git a/web/vue/src/composables/storage/useStorage/index.ts b/web/vue/src/composables/storage/useStorage/index.ts
deleted file mode 100644
index 0a2e3a0..0000000
--- a/web/vue/src/composables/storage/useStorage/index.ts
+++ /dev/null
@@ -1,224 +0,0 @@
-import { ref, shallowRef, watch, toValue } from 'vue';
-import type { Ref, MaybeRefOrGetter } from 'vue';
-import { isBoolean, isNumber, isString, isObject, isMap, isSet, isDate } from '@robonen/stdlib';
-import type { ConfigurableFlush } from '@/types';
-
-export interface StorageSerializer<T> {
-  read: (raw: string) => T;
-  write: (value: T) => string;
-}
-
-export const StorageSerializers: { [K: string]: StorageSerializer<any> } & {
-  boolean: StorageSerializer<boolean>;
-  number: StorageSerializer<number>;
-  string: StorageSerializer<string>;
-  object: StorageSerializer<any>;
-  map: StorageSerializer<Map<any, any>>;
-  set: StorageSerializer<Set<any>>;
-  date: StorageSerializer<Date>;
-} = {
-  boolean: {
-    read: (v: string) => v === 'true',
-    write: (v: boolean) => String(v),
-  },
-  number: {
-    read: (v: string) => Number.parseFloat(v),
-    write: (v: number) => String(v),
-  },
-  string: {
-    read: (v: string) => v,
-    write: (v: string) => v,
-  },
-  object: {
-    read: (v: string) => JSON.parse(v),
-    write: (v: any) => JSON.stringify(v),
-  },
-  map: {
-    read: (v: string) => new Map(JSON.parse(v)),
-    write: (v: Map<any, any>) => JSON.stringify([...v.entries()]),
-  },
-  set: {
-    read: (v: string) => new Set(JSON.parse(v)),
-    write: (v: Set<any>) => JSON.stringify([...v]),
-  },
-  date: {
-    read: (v: string) => new Date(v),
-    write: (v: Date) => v.toISOString(),
-  },
-};
-
-export interface StorageLike {
-  getItem: (key: string) => string | null;
-  setItem: (key: string, value: string) => void;
-  removeItem: (key: string) => void;
-}
-
-export interface UseStorageOptions<T> extends ConfigurableFlush {
-  /**
-   * Use shallowRef instead of ref for the internal state
-   * @default true
-   */
-  shallow?: boolean;
-  /**
-   * Watch for deep changes
-   * @default true
-   */
-  deep?: boolean;
-  /**
-   * Write the default value to the storage when it does not exist
-   * @default true
-   */
-  writeDefaults?: boolean;
-  /**
-   * Custom serializer for reading/writing storage values
-   */
-  serializer?: StorageSerializer<T>;
-  /**
-   * Merge the default value with the stored value
-   * @default false
-   */
-  mergeDefaults?: boolean | ((stored: T, defaults: T) => T);
-  /**
-   * Error handler for read/write failures
-   */
-  onError?: (error: unknown) => void;
-}
-
-export type UseStorageReturn<T> = Ref<T>;
-
-export function guessSerializer<T>(value: T): StorageSerializer<T> {
-  if (isBoolean(value)) return StorageSerializers.boolean as any;
-  if (isNumber(value)) return StorageSerializers.number as any;
-  if (isString(value)) return StorageSerializers.string as any;
-  if (isMap(value)) return StorageSerializers.map as any;
-  if (isSet(value)) return StorageSerializers.set as any;
-  if (isDate(value)) return StorageSerializers.date as any;
-  if (isObject(value)) return StorageSerializers.object as any;
-
-  return StorageSerializers.object as any;
-}
-
-export function shallowMerge<T>(stored: T, defaults: T): T {
-  if (isObject(stored) && isObject(defaults))
-    return { ...defaults, ...stored };
-
-  return stored;
-}
-
-/**
- * @name useStorage
- * @category Storage
- * @description Reactive Storage binding — creates a ref synced with a storage backend
- *
- * @param {string} key The storage key
- * @param {MaybeRefOrGetter<T>} initialValue The initial/default value
- * @param {StorageLike} storage The storage backend
- * @param {UseStorageOptions<T>} [options={}] Options
- * @returns {Ref<T>} A reactive ref synced with storage
- *
- * @example
- * const count = useStorage('my-count', 0, storage);
- *
- * @example
- * const state = useStorage('my-state', { hello: 'world' }, storage);
- *
- * @example
- * const id = useStorage('my-id', 'default', storage, {
- *   serializer: { read: (v) => v, write: (v) => v },
- * });
- *
- * @since 0.0.12
- */
-export function useStorage<T extends string>(key: string, initialValue: MaybeRefOrGetter<T>, storage: StorageLike, options?: UseStorageOptions<T>): Ref<T>;
-export function useStorage<T extends number>(key: string, initialValue: MaybeRefOrGetter<T>, storage: StorageLike, options?: UseStorageOptions<T>): Ref<T>;
-export function useStorage<T extends boolean>(key: string, initialValue: MaybeRefOrGetter<T>, storage: StorageLike, options?: UseStorageOptions<T>): Ref<T>;
-export function useStorage<T>(key: string, initialValue: MaybeRefOrGetter<T>, storage: StorageLike, options?: UseStorageOptions<T>): Ref<T>;
-export function useStorage<T = unknown>(key: string, initialValue: MaybeRefOrGetter<null>, storage: StorageLike, options?: UseStorageOptions<T>): Ref<T>;
-export function useStorage<T>(
-  key: string,
-  initialValue: MaybeRefOrGetter<T>,
-  storage: StorageLike,
-  options: UseStorageOptions<T> = {},
-): Ref<T> {
-  const {
-    shallow = true,
-    deep = true,
-    flush = 'pre',
-    writeDefaults = true,
-    mergeDefaults = false,
-    onError = console.error, // eslint-disable-line no-console
-  } = options;
-
-  const defaults = toValue(initialValue);
-  const serializer = options.serializer ?? guessSerializer(defaults);
-
-  const data = (shallow ? shallowRef : ref)(defaults) as Ref<T>;
-
-  function read(): T {
-    const raw = storage.getItem(key);
-
-    if (raw === undefined || raw === null) {
-      if (writeDefaults && defaults !== undefined && defaults !== null) {
-        try {
-          storage.setItem(key, serializer.write(defaults));
-        } catch (e) {
-          onError(e);
-        }
-      }
-
-      return defaults;
-    }
-
-    try {
-      let value = serializer.read(raw);
-
-      if (mergeDefaults) {
-        value = typeof mergeDefaults === 'function'
-          ? mergeDefaults(value, defaults)
-          : shallowMerge(value, defaults);
-      }
-
-      return value;
-    } catch (e) {
-      onError(e);
-      return defaults;
-    }
-  }
-
-  function write(value: T) {
-    try {
-      const oldValue = storage.getItem(key);
-
-      if (value === undefined || value === null) {
-        storage.removeItem(key);
-      } else {
-        const serialized = serializer.write(value);
-
-        if (oldValue !== serialized)
-          storage.setItem(key, serialized);
-      }
-    } catch (e) {
-      onError(e);
-    }
-  }
-
-  function update() {
-    pauseWatch();
-
-    try {
-      data.value = read();
-    } catch (e) {
-      onError(e);
-    } finally {
-      resumeWatch();
-    }
-  }
-
-  const { pause: pauseWatch, resume: resumeWatch } = watch(data, (newValue) => {
-    write(newValue);
-  }, { flush, deep });
-
-  update();
-
-  return data;
-}
diff --git a/web/vue/src/composables/storage/useStorageAsync/index.ts b/web/vue/src/composables/storage/useStorageAsync/index.ts
deleted file mode 100644
index 7ca4736..0000000
--- a/web/vue/src/composables/storage/useStorageAsync/index.ts
+++ /dev/null
@@ -1,188 +0,0 @@
-import { ref, shallowRef, watch, toValue } from 'vue';
-import type { Ref, ShallowRef, MaybeRefOrGetter, UnwrapRef } from 'vue';
-import type { ConfigurableFlush } from '@/types';
-import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
-import { guessSerializer, shallowMerge } from '../useStorage';
-
-export interface StorageSerializerAsync<T> {
-  read: (raw: string) => T | Promise<T>;
-  write: (value: T) => string | Promise<string>;
-}
-
-export interface StorageLikeAsync {
-  getItem: (key: string) => string | null | Promise<string | null>;
-  setItem: (key: string, value: string) => void | Promise<void>;
-  removeItem: (key: string) => void | Promise<void>;
-}
-
-export interface UseStorageAsyncOptions<T, Shallow extends boolean = true> extends ConfigurableFlush {
-  /**
-   * Use shallowRef instead of ref for the internal state
-   * @default true
-   */
-  shallow?: Shallow;
-  /**
-   * Watch for deep changes
-   * @default true
-   */
-  deep?: boolean;
-  /**
-   * Write the default value to the storage when it does not exist
-   * @default true
-   */
-  writeDefaults?: boolean;
-  /**
-   * Custom serializer for reading/writing storage values
-   */
-  serializer?: StorageSerializerAsync<T>;
-  /**
-   * Merge the default value with the stored value
-   * @default false
-   */
-  mergeDefaults?: boolean | ((stored: T, defaults: T) => T);
-  /**
-   * Called once when the initial value has been loaded from storage
-   */
-  onReady?: (value: T) => void;
-  /**
-   * Error handler for read/write failures
-   */
-  onError?: (error: unknown) => void;
-}
-
-export interface UseStorageAsyncReturnBase<T, Shallow extends boolean> {
-  state: Shallow extends true ? ShallowRef<T> : Ref<UnwrapRef<T>>;
-  isReady: Ref<boolean>;
-}
-
-export type UseStorageAsyncReturn<T, Shallow extends boolean> =
-  & UseStorageAsyncReturnBase<T, Shallow>
-  & PromiseLike<UseStorageAsyncReturnBase<T, Shallow>>;
-
-/**
- * @name useStorageAsync
- * @category Storage
- * @description Reactive Storage binding with async support — creates a ref synced with an async storage backend
- *
- * @param {string} key The storage key
- * @param {MaybeRefOrGetter<T>} initialValue The initial/default value
- * @param {StorageLikeAsync} storage The async storage backend
- * @param {UseStorageAsyncOptions<T>} [options={}] Options
- * @returns {UseStorageAsyncReturn<T, Shallow>} An object with state ref and isReady flag, also awaitable
- *
- * @example
- * const { state } = useStorageAsync('access-token', '', asyncStorage);
- *
- * @example
- * const { state, isReady } = await useStorageAsync('settings', { theme: 'dark' }, asyncStorage);
- *
- * @example
- * const { state } = useStorageAsync('key', 'default', asyncStorage, {
- *   onReady: (value) => console.log('Loaded:', value),
- * });
- *
- * @since 0.0.12
- */
-export function useStorageAsync<T extends string, Shallow extends boolean = true>(key: string, initialValue: MaybeRefOrGetter<T>, storage: StorageLikeAsync, options?: UseStorageAsyncOptions<T, Shallow>): UseStorageAsyncReturn<T, Shallow>;
-export function useStorageAsync<T extends number, Shallow extends boolean = true>(key: string, initialValue: MaybeRefOrGetter<T>, storage: StorageLikeAsync, options?: UseStorageAsyncOptions<T, Shallow>): UseStorageAsyncReturn<T, Shallow>;
-export function useStorageAsync<T extends boolean, Shallow extends boolean = true>(key: string, initialValue: MaybeRefOrGetter<T>, storage: StorageLikeAsync, options?: UseStorageAsyncOptions<T, Shallow>): UseStorageAsyncReturn<T, Shallow>;
-export function useStorageAsync<T, Shallow extends boolean = true>(key: string, initialValue: MaybeRefOrGetter<T>, storage: StorageLikeAsync, options?: UseStorageAsyncOptions<T, Shallow>): UseStorageAsyncReturn<T, Shallow>;
-export function useStorageAsync<T = unknown, Shallow extends boolean = true>(key: string, initialValue: MaybeRefOrGetter<null>, storage: StorageLikeAsync, options?: UseStorageAsyncOptions<T, Shallow>): UseStorageAsyncReturn<T, Shallow>;
-export function useStorageAsync<T, Shallow extends boolean = true>(
-  key: string,
-  initialValue: MaybeRefOrGetter<T>,
-  storage: StorageLikeAsync,
-  options: UseStorageAsyncOptions<T, Shallow> = {},
-): UseStorageAsyncReturn<T, Shallow> {
-  const {
-    shallow = true,
-    deep = true,
-    flush = 'pre',
-    writeDefaults = true,
-    mergeDefaults = false,
-    onReady,
-    onError = console.error, // eslint-disable-line no-console
-  } = options;
-
-  const defaults = toValue(initialValue);
-  const serializer = options.serializer ?? guessSerializer(defaults);
-
-  const state = (shallow ? shallowRef : ref)(defaults) as Shallow extends true ? ShallowRef<T> : Ref<UnwrapRef<T>>;
-  const isReady = ref(false);
-
-  async function read(): Promise<T> {
-    try {
-      const raw = await storage.getItem(key);
-
-      if (raw === undefined || raw === null) {
-        if (writeDefaults && defaults !== undefined && defaults !== null) {
-          try {
-            await storage.setItem(key, await serializer.write(defaults));
-          } catch (e) {
-            onError(e);
-          }
-        }
-
-        return defaults;
-      }
-
-      let value: T = await serializer.read(raw) as T;
-
-      if (mergeDefaults) {
-        value = typeof mergeDefaults === 'function'
-          ? mergeDefaults(value, defaults)
-          : shallowMerge(value, defaults);
-      }
-
-      return value;
-    } catch (e) {
-      onError(e);
-      return defaults;
-    }
-  }
-
-  async function write(value: T) {
-    try {
-      if (value === undefined || value === null) {
-        await storage.removeItem(key);
-      } else {
-        const raw = await serializer.write(value);
-        await storage.setItem(key, raw);
-      }
-    } catch (e) {
-      onError(e);
-    }
-  }
-
-  let stopWatch: (() => void) | null = null;
-
-  tryOnScopeDispose(() => stopWatch?.());
-
-  const shell: UseStorageAsyncReturnBase<T, Shallow> = {
-    state,
-    isReady,
-  };
-
-  const readyPromise: Promise<UseStorageAsyncReturnBase<T, Shallow>> = read().then((value) => {
-    (state as Ref).value = value;
-    isReady.value = true;
-    onReady?.(value);
-
-    // Set up watcher AFTER initial state is set — avoids write-back on init
-    const stop = watch(state, (newValue) => {
-      write(newValue as T);
-    }, { flush, deep });
-
-    stopWatch = stop;
-
-    return shell;
-  });
-
-  return {
-    ...shell,
-    // eslint-disable-next-line unicorn/no-thenable
-    then(onFulfilled, onRejected) {
-      return readyPromise.then(onFulfilled, onRejected);
-    },
-  };
-}
diff --git a/web/vue/src/composables/utilities/index.ts b/web/vue/src/composables/utilities/index.ts
deleted file mode 100644
index 901130d..0000000
--- a/web/vue/src/composables/utilities/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './useOffsetPagination';
diff --git a/web/vue/src/types/index.ts b/web/vue/src/types/index.ts
deleted file mode 100644
index 370b87b..0000000
--- a/web/vue/src/types/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './flush';
-export * from './resumable';
-export * from './window';
\ No newline at end of file
diff --git a/web/vue/src/types/window.ts b/web/vue/src/types/window.ts
deleted file mode 100644
index cae0d39..0000000
--- a/web/vue/src/types/window.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { isClient } from '@robonen/platform/multi';
-
-export const defaultWindow = /* #__PURE__ */ isClient ? globalThis as Window & typeof globalThis : undefined
-
-export interface ConfigurableWindow {
-  /**
-   * Specify a custom `window` instance, e.g. working with iframes or testing environments
-   *
-   * @default defaultWindow
-   */
-  window?: Window;
-}
\ No newline at end of file
diff --git a/web/vue/src/utils/index.ts b/web/vue/src/utils/index.ts
deleted file mode 100644
index 5aab4b8..0000000
--- a/web/vue/src/utils/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './components';
-export * from './error';
\ No newline at end of file
diff --git a/web/vue/tsconfig.json b/web/vue/tsconfig.json
deleted file mode 100644
index 0ca905e..0000000
--- a/web/vue/tsconfig.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "extends": "@robonen/tsconfig/tsconfig.json",
-  "compilerOptions": {
-    "lib": ["DOM"],
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/*"],
-      "@/composables/*": ["src/composables/*"],
-      "@/types": ["src/types"],
-      "@/utils": ["src/utils"]
-    }
-  }
-}
\ No newline at end of file